:root{
  --bg:#070611;--bg2:#0d0820;--panel:#121126;--panel2:#17142e;--card:#15132c;--line:rgba(255,255,255,.09);
  --text:#f7f3ff;--muted:#a9a1c5;--muted2:#786f98;--purple:#8b5cf6;--purple2:#a855f7;--pink:#ec4899;
  --green:#22c55e;--yellow:#f59e0b;--red:#ef4444;--blue:#38bdf8;--shadow:0 24px 80px rgba(0,0,0,.45);
  --r:22px;--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}

.login-body{
  min-height:100vh;
  overflow-x:hidden;
  background:radial-gradient(circle at 78% 18%,rgba(139,92,246,.28),transparent 34%),radial-gradient(circle at 18% 88%,rgba(168,85,247,.17),transparent 32%),linear-gradient(135deg,#06050f,#100926 55%,#070611)
}

.login-grid-bg{
  position:fixed;
  inset:0;
  opacity:.38;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at center,#000,transparent 72%)
}

.login-shell{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
  max-width:1180px;
  margin:0 auto;
  padding:44px 28px
}

.brand-mark{
  width:72px;
  height:72px;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-weight:950;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow:0 20px 60px rgba(139,92,246,.35);
  letter-spacing:-.06em
}

.brand-mark.small{
  width:44px;
  height:44px;
  border-radius:14px;
  font-size:15px
}

.eyebrow{
  margin:0 0 12px;
  color:#c4b5fd;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em
}

.login-hero h1{
  font-size:clamp(48px,7vw,86px);
  line-height:.92;
  margin:18px 0 22px;
  letter-spacing:-.08em
}

.lead{
  font-size:20px;
  line-height:1.65;
  color:var(--muted);
  max-width:650px;
  margin:0 0 28px
}

.btn{
  border:0;
  border-radius:16px;
  padding:13px 18px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:.18s ease;
  white-space:nowrap
}

.btn:hover{transform:translateY(-1px)}

.btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:white;
  box-shadow:0 18px 45px rgba(139,92,246,.35)
}

.btn-primary:disabled{
  filter:grayscale(1);
  opacity:.65;
  cursor:not-allowed
}

.btn-large{
  padding:17px 24px;
  border-radius:18px;
  font-size:16px
}

.btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text)
}

.btn-ok{
  background:rgba(34,197,94,.18);
  color:#86efac;
  border:1px solid rgba(34,197,94,.28)
}

.btn-danger{
  background:rgba(239,68,68,.16);
  color:#fca5a5;
  border:1px solid rgba(239,68,68,.28)
}

.btn-small{
  padding:9px 12px;
  border-radius:12px;
  font-size:12px
}

.full{width:100%}

.login-actions{
  display:flex;
  gap:14px;
  align-items:center
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px
}

.trust-row span{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  padding:10px 13px;
  border-radius:999px;
  color:#d8d1ee;
  font-size:13px
}

.config-warning{
  max-width:650px;
  margin:18px 0 0;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.25);
  color:#fde68a
}

.login-preview-card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border-radius:34px;
  padding:26px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden
}

.login-preview-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(circle at 75% 18%,rgba(168,85,247,.25),transparent 35%);
  pointer-events:none
}

.preview-top,.fake-card,.fake-stats{position:relative}

.preview-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:18px
}

.preview-top h2{
  margin:12px 0 0;
  font-size:28px
}

.pill,.mini-badge,.status{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  padding:7px 10px
}

.pill.purple{
  background:rgba(139,92,246,.16);
  color:#c4b5fd;
  border:1px solid rgba(139,92,246,.25)
}

.mini-badge{
  background:rgba(255,255,255,.08);
  color:#ede9fe;
  border:1px solid var(--line)
}

.fake-card{
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.055));
  border:1px solid var(--line);
  padding:22px;
  margin-bottom:18px
}

.fake-card.featured{
  box-shadow:0 20px 60px rgba(0,0,0,.25)
}

.fake-card-head,.card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}

.op-id{
  font-size:12px;
  color:#c4b5fd;
  font-weight:900;
  letter-spacing:.04em
}

.fake-card h3,.opinion-card h2{
  font-size:23px;
  margin:18px 0 9px
}

.fake-card p,.opinion-card p{
  color:var(--muted);
  line-height:1.55
}

.fake-card button{
  width:100%;
  border:0;
  border-radius:16px;
  margin-top:14px;
  padding:14px;
  background:white;
  color:#120a2a;
  font-weight:950
}

.fake-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}

.fake-stats div,.stats-grid div{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  border-radius:20px;
  padding:16px
}

.fake-stats strong,.stats-grid strong{
  display:block;
  font-size:22px
}

.fake-stats span,.stats-grid span{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-top:4px
}

.app-body{
  background:radial-gradient(circle at 12% -10%,rgba(139,92,246,.26),transparent 28%),radial-gradient(circle at 88% 10%,rgba(168,85,247,.13),transparent 30%),var(--bg);
  min-height:100vh
}

.app-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100vh
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:22px;
  border-right:1px solid var(--line);
  background:rgba(7,6,17,.72);
  backdrop-filter:blur(18px);
  display:flex;
  flex-direction:column
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px
}

.sidebar-brand strong{display:block}

.sidebar-brand small,.sidebar-user small{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:3px
}

.sidebar-nav{
  display:grid;
  gap:6px;
  align-content:start;
  flex:1
}

.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 13px;
  border-radius:16px;
  color:#d8d1ee;
  font-weight:800
}

.sidebar-nav a:hover,.sidebar-nav a.active{
  background:rgba(139,92,246,.15);
  color:#fff
}

.nav-sep{
  margin:16px 8px 7px;
  color:var(--muted2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:950
}

.sidebar-user{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:10px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:18px
}

.sidebar-user img,.avatar-fallback{
  width:42px;
  height:42px;
  border-radius:15px;
  object-fit:cover
}

.avatar-fallback{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  font-weight:950
}

.logout{
  font-size:12px;
  color:var(--muted);
  font-weight:800
}

.main{
  padding:34px;
  max-width:1500px;
  width:100%;
  margin:0 auto
}

.flash{
  padding:14px 16px;
  border-radius:16px;
  margin-bottom:16px;
  border:1px solid var(--line);
  font-weight:800
}

.flash.ok{
  background:rgba(34,197,94,.12);
  color:#bbf7d0
}

.flash.danger{
  background:rgba(239,68,68,.12);
  color:#fecaca
}

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:24px
}

.page-head.compact{
  margin-bottom:18px
}

.page-head h1{
  font-size:clamp(30px,4vw,48px);
  line-height:1;
  margin:0;
  letter-spacing:-.06em
}

.count-pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  padding:12px 14px;
  border-radius:999px;
  color:#d8d1ee;
  font-weight:900
}

.opinion-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch
}

.opinion-card,.active-card,.panel-card,.table-card,.empty-state,.ranking-list{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border-radius:var(--r);
  box-shadow:0 20px 70px rgba(0,0,0,.22)
}

.opinion-card{
  padding:20px;
  position:relative;
  overflow:hidden;
  height:100%;
  min-height:360px;
  display:flex;
  flex-direction:column
}

.opinion-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(circle at 80% 0,rgba(139,92,246,.18),transparent 35%);
  pointer-events:none
}

.opinion-card>*{position:relative}

.opinion-card .card-top{
  flex-shrink:0
}

.opinion-card h2{
  min-height:96px;
  margin-bottom:18px;
  display:flex;
  align-items:flex-start
}

.opinion-card p{
  min-height:58px;
  margin-bottom:20px
}

.card-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0
}

.opinion-card .card-meta{
  margin-top:auto;
  margin-bottom:22px
}

.card-meta span{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:#ede9fe;
  font-size:13px;
  font-weight:850
}

.opinion-card form{
  margin-top:0
}

.opinion-card .btn.full{
  width:100%
}

.status.ok{
  background:rgba(34,197,94,.14);
  color:#86efac
}

.status.info{
  background:rgba(56,189,248,.14);
  color:#7dd3fc
}

.status.warn{
  background:rgba(245,158,11,.14);
  color:#fcd34d
}

.status.danger{
  background:rgba(239,68,68,.14);
  color:#fca5a5
}

.status.muted{
  background:rgba(255,255,255,.08);
  color:var(--muted)
}

.status.purple{
  background:rgba(139,92,246,.16);
  color:#c4b5fd
}

.empty-state{
  padding:42px;
  text-align:center
}

.empty-state h2{
  margin:0 0 10px;
  font-size:28px
}

.empty-state p{
  color:var(--muted);
  margin:0 0 18px
}

.empty-state.mini{
  padding:24px;
  text-align:left
}

.active-card{
  padding:24px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:24px
}

.active-main h2{
  font-size:34px;
  margin:14px 0 12px
}

.active-main p{
  color:var(--muted);
  line-height:1.65;
  max-width:750px
}

.upload-box,.stack-form{
  display:grid;
  gap:14px
}

.upload-box label,.stack-form label{
  display:grid;
  gap:8px;
  color:#d8d1ee;
  font-weight:800
}

.upload-box input,.upload-box textarea,.stack-form input,.stack-form textarea,.release-form input,.searchbar input,.inline-actions input{
  width:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  color:var(--text);
  border-radius:15px;
  padding:13px 14px;
  outline:none
}

.upload-box textarea,.stack-form textarea{
  min-height:96px;
  resize:vertical
}

.release-form{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px
}

.table-card{
  overflow:auto
}

.table-card table{
  width:100%;
  border-collapse:collapse;
  min-width:780px
}

.table-card th,.table-card td{
  padding:15px 16px;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:top
}

.table-card th{
  color:#c4b5fd;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em
}

.table-card td small{
  display:block;
  color:var(--muted);
  margin-top:4px
}

.split-grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:18px
}

.panel-card{
  padding:22px
}

.panel-card h2{
  margin:0 0 18px
}

.mt{margin-top:18px}

.ledger-row,.rank-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:12px 0
}

.ledger-row:last-child,.rank-row:last-child{
  border-bottom:0
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}

.stats-grid strong{
  font-size:34px
}

.inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center
}

.inline-actions input{
  min-width:160px;
  width:auto;
  flex:1
}

.searchbar{
  display:flex;
  gap:10px
}

.searchbar input{
  font-size:16px
}

.ranking-list{
  padding:10px 20px
}

.rank-row{
  padding:18px 0
}

.rank-row strong{
  font-size:20px;
  color:#c4b5fd
}

.timer-box{
  margin-top:20px;
  border:1px solid rgba(139,92,246,.28);
  background:linear-gradient(180deg,rgba(139,92,246,.13),rgba(255,255,255,.035));
  border-radius:22px;
  padding:18px;
  box-shadow:0 16px 45px rgba(0,0,0,.18)
}

.timer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px
}

.timer-head span{
  color:#d8d1ee;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em
}

.timer-head strong{
  font-size:34px;
  letter-spacing:-.05em;
  color:#fff
}

.timer-track{
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.08)
}

.timer-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cf6,#d946ef);
  box-shadow:0 0 28px rgba(139,92,246,.55);
  transition:width .35s ease
}

.timer-box p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45
}

.hidden-form{
  display:none!important
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.detail-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--line);
  padding:12px 0
}

.detail-row:last-child{
  border-bottom:0
}

.detail-row span{
  color:var(--muted);
  font-size:13px;
  font-weight:800
}

.detail-row strong{
  text-align:right;
  max-width:65%;
  word-break:break-word
}

.timeline{
  display:grid;
  gap:14px
}

.timeline-item{
  display:grid;
  grid-template-columns:16px 1fr;
  gap:14px;
  align-items:start
}

.timeline-item>span{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  box-shadow:0 0 0 6px rgba(139,92,246,.12);
  margin-top:5px
}

.timeline-item strong{
  display:block
}

.timeline-item p{
  margin:4px 0;
  color:var(--muted);
  font-size:13px
}

.timeline-item small{
  display:block;
  color:#d8d1ee;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 11px;
  margin-top:6px
}

.muted-text{
  color:var(--muted)
}

.action-buttons{
  gap:8px
}

.action-buttons form{
  display:inline-flex;
  margin:0
}

.active-list{
  display:grid;
  gap:22px
}

.active-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 430px;
  gap:24px;
  align-items:start
}

.active-main{
  min-width:0
}

.active-side{
  display:grid;
  gap:16px;
  min-width:0
}

.release-panel{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  border-radius:22px;
  padding:18px;
  display:grid;
  gap:14px
}

.release-panel h3{
  margin:0 0 6px;
  font-size:16px;
  letter-spacing:-.03em
}

.release-panel p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5
}

.release-form{
  margin-top:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px
}

.release-form input{
  width:100%;
  height:48px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.065);
  color:var(--text);
  border-radius:14px;
  padding:0 14px;
  outline:none
}

.release-form input::placeholder{
  color:rgba(237,233,254,.45)
}

.release-form .btn{
  width:100%;
  height:48px;
  border-radius:14px
}

.upload-box{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  border-radius:22px;
  padding:18px
}

.upload-box input[type="file"]{
  min-height:48px;
  display:flex;
  align-items:center
}

.copy-opinion-box{
  margin-top:22px;
  border:1px solid rgba(139,92,246,.30);
  background:rgba(139,92,246,.08);
  border-radius:22px;
  padding:18px
}

.copy-opinion-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px
}

.copy-opinion-head span,
.place-link-box span{
  display:block;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em
}

.copy-opinion-head strong{
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:18px;
  letter-spacing:-.04em
}

.copy-opinion-text{
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  border-radius:18px;
  padding:16px;
  color:#f5f3ff;
  line-height:1.65;
  font-weight:650;
  white-space:normal
}

.place-link-box{
  margin-top:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  border-radius:20px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

@media(max-width:1100px){
  .login-shell{
    grid-template-columns:1fr
  }

  .login-preview-card{
    max-width:620px
  }

  .app-layout{
    grid-template-columns:1fr
  }

  .sidebar{
    position:relative;
    height:auto
  }

  .main{
    padding:20px
  }

  .opinion-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .active-card,.split-grid{
    grid-template-columns:1fr
  }

  .active-side{
    width:100%
  }

  .stats-grid{
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:900px){
  .detail-grid{
    grid-template-columns:1fr
  }

  .detail-row{
    display:block
  }

  .detail-row strong{
    text-align:left;
    display:block;
    max-width:100%;
    margin-top:4px
  }
}

@media(max-width:700px){
  .copy-opinion-head,
  .place-link-box{
    align-items:stretch;
    flex-direction:column
  }

  .copy-opinion-head .btn,
  .place-link-box .btn{
    width:100%
  }
}

@media(max-width:680px){
  .login-shell{
    padding:28px 18px
  }

  .login-hero h1{
    font-size:48px
  }

  .lead{
    font-size:17px
  }

  .trust-row{
    display:none
  }

  .fake-stats{
    grid-template-columns:1fr
  }

  .opinion-grid{
    grid-template-columns:1fr
  }

  .opinion-card{
    min-height:auto
  }

  .opinion-card h2{
    min-height:auto
  }

  .opinion-card p{
    min-height:auto
  }

  .opinion-card .card-meta{
    margin-top:18px
  }

  .opinion-card form{
    margin-top:18px
  }

  .page-head{
    align-items:flex-start;
    flex-direction:column
  }

  .sidebar{
    padding:16px
  }

  .sidebar-nav{
    grid-template-columns:repeat(2,1fr)
  }

  .sidebar-nav a{
    font-size:13px
  }

  .sidebar-user{
    grid-template-columns:38px 1fr
  }

  .logout{
    grid-column:2
  }

  .release-form,.searchbar{
    grid-template-columns:1fr;
    display:grid
  }

  .stats-grid{
    grid-template-columns:1fr
  }

  .timer-head strong{
    font-size:28px
  }

  .timer-box{
    padding:15px
  }
}

/* =========================================================
   MOBILE ADMIN 1:1 — zgłoszenia jak na makiecie telefonu
   ========================================================= */
.mobile-admin-topbar,
.mobile-admin-submissions-head,
.mobile-submissions-list,
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 760px) {
    html,
    body {
        background: #05040d;
        overflow-x: hidden;
    }

    .app-body {
        background:
            radial-gradient(circle at 20% -12%, rgba(139, 92, 246, 0.22), transparent 28%),
            radial-gradient(circle at 85% 6%, rgba(168, 85, 247, 0.18), transparent 32%),
            linear-gradient(180deg, #070611 0%, #090617 48%, #05040d 100%);
    }

    .app-layout {
        display: block;
        min-height: 100vh;
        padding-bottom: 108px;
    }

    .sidebar {
        display: none !important;
    }

    .main {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 20px 14px 20px;
    }

    .flash {
        margin: 12px 14px;
        border-radius: 18px;
    }

    .mobile-admin-topbar {
        display: grid;
        grid-template-columns: 46px 1fr auto;
        gap: 12px;
        align-items: center;
        height: 98px;
        padding: 20px 18px 18px;
        background:
            linear-gradient(90deg, rgba(20, 14, 42, 0.98), rgba(47, 28, 91, 0.94)),
            radial-gradient(circle at 72% 0%, rgba(168, 85, 247, 0.26), transparent 42%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        position: sticky;
        top: 0;
        z-index: 50;
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.32);
    }

    .mobile-menu-button {
        width: 40px;
        height: 40px;
        border: 0;
        background: transparent;
        color: #f7f3ff;
        font-size: 34px;
        line-height: 1;
        padding: 0;
        display: grid;
        place-items: center;
    }

    .mobile-top-brand strong {
        display: block;
        font-size: 26px;
        line-height: 1.05;
        font-weight: 950;
        letter-spacing: -0.045em;
        color: #fff;
    }

    .mobile-top-brand span {
        display: block;
        margin-top: 5px;
        color: #c4b5fd;
        font-size: 16px;
        font-weight: 750;
        letter-spacing: 0;
    }

    .mobile-top-logout {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #e9ddff;
        font-size: 18px;
        font-weight: 800;
        white-space: nowrap;
    }

    .admin-mobile-hidden,
    .admin-submissions-table-card {
        display: none !important;
    }

    .mobile-admin-submissions-head {
        display: block;
        padding: 14px 0 12px;
    }

    .mobile-title-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
    }

    .mobile-title-row h1 {
        margin: 0;
        font-size: 34px;
        line-height: 1;
        letter-spacing: -0.065em;
        font-weight: 950;
    }

    .mobile-title-row span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 36px;
        padding: 0 12px;
        border-radius: 11px;
        background: rgba(139, 92, 246, 0.35);
        color: #eadfff;
        font-weight: 950;
        font-size: 18px;
    }

    .mobile-admin-controls {
        display: grid;
        grid-template-columns: 1.55fr .92fr .98fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-search-control,
    .mobile-filter-button {
        height: 52px;
        border: 1px solid rgba(255, 255, 255, 0.13);
        background: rgba(255, 255, 255, 0.025);
        border-radius: 7px;
        color: #f7f3ff;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .mobile-search-control {
        gap: 9px;
        padding: 0 14px;
    }

    .mobile-search-control span {
        color: #afa5cc;
        font-size: 22px;
    }

    .mobile-search-control input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        padding: 0;
        background: transparent;
        color: #fff;
        font-size: 18px;
        letter-spacing: -0.02em;
    }

    .mobile-search-control input::placeholder {
        color: #968daa;
    }

    .mobile-filter-button {
        justify-content: space-between;
        padding: 0 13px;
        font-size: 16px;
        font-weight: 850;
        white-space: nowrap;
    }

    .mobile-filter-button span {
        color: #d8d1ee;
        font-size: 16px;
    }

    .mobile-submissions-list {
        display: grid;
        gap: 18px;
    }

    .mobile-submission-card {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background:
            radial-gradient(circle at 82% 0%, rgba(139, 92, 246, 0.12), transparent 34%),
            linear-gradient(180deg, rgba(31, 24, 56, 0.92), rgba(17, 15, 34, 0.96));
        border-radius: 11px;
        padding: 26px 28px 24px;
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
        overflow: hidden;
    }

    .mobile-submission-card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding-bottom: 22px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-submission-id-wrap {
        display: flex;
        align-items: center;
        gap: 18px;
        min-width: 0;
    }

    .mobile-card-icon {
        color: #a879ff;
        font-size: 30px;
        line-height: 1;
        flex: 0 0 auto;
    }

    .mobile-submission-id-wrap a {
        color: #fff;
        font-weight: 950;
        font-size: 25px;
        letter-spacing: 0.045em;
        line-height: 1.1;
        word-break: break-word;
    }

    .mobile-status-pill {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 156px;
        height: 43px;
        padding: 0 16px;
        border-radius: 10px;
        color: #ffd95c;
        background: rgba(245, 158, 11, 0.17);
        font-size: 18px;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-status-pill.ok,
    .mobile-status-pill.info,
    .mobile-status-pill.purple,
    .mobile-status-pill.warn,
    .mobile-status-pill.danger,
    .mobile-status-pill.muted {
        color: #ffd95c;
        background: rgba(245, 158, 11, 0.17);
    }

    .mobile-submission-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        padding-top: 18px;
    }

    .mobile-submission-left,
    .mobile-submission-right {
        min-width: 0;
    }

    .mobile-submission-right {
        border-left: 1px solid rgba(255, 255, 255, 0.055);
        padding-left: 18px;
    }

    .mobile-info-row {
        display: grid;
        grid-template-columns: 26px 100px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        margin-bottom: 19px;
    }

    .mobile-info-icon {
        color: #eee9ff;
        opacity: .92;
        font-size: 20px;
        line-height: 1.1;
        text-align: center;
    }

    .mobile-info-label,
    .mobile-screen-row span,
    .mobile-note-row span {
        color: #eee9ff;
        font-size: 15px;
        font-weight: 850;
        letter-spacing: 0;
    }

    .mobile-info-row strong {
        min-width: 0;
        color: #eee9ff;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .mobile-info-row:first-child strong {
        color: #b98cff;
        font-weight: 850;
    }

    .mobile-screen-row {
        display: grid;
        grid-template-columns: 26px 1fr auto;
        gap: 10px;
        align-items: center;
        min-height: 50px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    }

    .mobile-screen-row a {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        color: #b98cff;
        font-size: 18px;
        font-weight: 950;
    }

    .mobile-screen-row a b {
        color: #bd9cff;
        font-size: 32px;
        line-height: .8;
        font-weight: 300;
    }

    .mobile-note-row {
        display: grid;
        grid-template-columns: 26px 1fr;
        gap: 10px;
        align-items: center;
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .mobile-decision-form input,
    .mobile-readonly-note {
        width: 100%;
        height: 58px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.035);
        color: #fff;
        border-radius: 11px;
        padding: 0 18px;
        font-size: 17px;
        outline: none;
    }

    .mobile-decision-form input::placeholder {
        color: #8f85a6;
    }

    .mobile-readonly-note {
        display: flex;
        align-items: center;
        color: #a9a1c5;
    }

    .mobile-decision-buttons {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding-top: 22px;
        margin-top: 22px;
        border-top: 1px solid rgba(255, 255, 255, 0.065);
    }

    .mobile-approve,
    .mobile-reject {
        height: 53px;
        border: 0;
        border-radius: 8px;
        color: #fff;
        font-size: 18px;
        font-weight: 950;
        letter-spacing: .01em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    }

    .mobile-approve {
        background: linear-gradient(180deg, #208542, #176c34);
    }

    .mobile-reject {
        background: linear-gradient(180deg, #ce1f55, #a91443);
    }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 70;
        left: 8px;
        right: 8px;
        bottom: 8px;
        height: 97px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        background: rgba(13, 11, 27, 0.96);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
        box-shadow: 0 -14px 50px rgba(0, 0, 0, 0.45);
        overflow: hidden;
    }

    .mobile-bottom-nav a {
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 7px;
        color: #b9b1cf;
        font-size: 13px;
        font-weight: 850;
    }

    .mobile-bottom-nav a span {
        font-size: 31px;
        line-height: 1;
        color: #9f96b8;
    }

    .mobile-bottom-nav a b {
        font-size: 14px;
        font-weight: 850;
        letter-spacing: -0.01em;
    }

    .mobile-bottom-nav a.active {
        color: #f4eaff;
        background: rgba(139, 92, 246, 0.18);
        border-radius: 11px;
        margin: 0 0 12px 0;
    }

    .mobile-bottom-nav a.active span {
        color: #a879ff;
    }
}

@media (max-width: 430px) {
    .main {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mobile-admin-controls {
        grid-template-columns: 1fr;
    }

    .mobile-submission-card {
        padding: 20px 14px 20px;
    }

    .mobile-submission-card-head {
        align-items: flex-start;
    }

    .mobile-submission-id-wrap a {
        font-size: 20px;
    }

    .mobile-status-pill {
        min-width: auto;
        height: 36px;
        font-size: 14px;
        padding: 0 10px;
    }

    .mobile-submission-body {
        grid-template-columns: 1fr;
    }

    .mobile-submission-right {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.065);
        padding-left: 0;
        padding-top: 14px;
    }

    .mobile-info-row {
        grid-template-columns: 24px 86px minmax(0, 1fr);
    }

    .mobile-decision-buttons {
        gap: 10px;
    }
}


/* =========================================================
   FIX: dodawanie screena na telefonie
   ========================================================= */
.screen-upload-label {
    display: grid;
    gap: 10px;
}

.screen-upload-label > span:first-child {
    color: #d8d1ee;
    font-weight: 900;
}

.screen-upload-button {
    position: relative;
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.16);
    color: #f7f3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    cursor: pointer;
}

.screen-file-input {
    width: 100%;
    min-height: 54px;
    cursor: pointer;
}

.screen-file-name {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 760px) {
    .mobile-upload-fixed {
        padding: 18px;
        border-radius: 22px;
    }

    .screen-file-input {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        height: auto !important;
        min-height: 48px;
        padding: 10px;
        border-radius: 14px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        color: #fff;
    }

    .screen-upload-button {
        display: none;
    }
}


/* =========================================================
   FIX 1.0.15 — natywny input pliku na telefonie
   Nie chowamy inputa, bo iPhone/Safari czasem blokuje sztuczne przyciski.
   ========================================================= */
.native-screen-upload {
  display: grid;
  gap: 10px;
  color: #d8d1ee;
  font-weight: 900;
}

.native-screen-upload small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

.native-screen-input {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(139,92,246,.38) !important;
  background: rgba(139,92,246,.12) !important;
  color: #fff !important;
  cursor: pointer !important;
}

@media (max-width: 760px) {
  .mobile-upload-fixed {
    position: relative;
    z-index: 5;
  }

  .native-screen-input {
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  .screen-upload-button,
  .screen-file-name {
    display: none !important;
  }
}