/* layout.css — app shell (top bar, bottom tab bar on mobile, side rail on desktop), auth screens, seal */
.app{min-height:100dvh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:var(--z-top);display:flex;align-items:center;gap:var(--s-3);height:var(--top-h);padding:0 var(--gutter);
  background:var(--glass-strong);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--fs-lg);color:var(--text);min-width:0}
.brand:hover{text-decoration:none}
.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;background:linear-gradient(145deg,var(--brand-400),var(--brand) 55%,#3730a3);box-shadow:0 4px 12px -3px rgba(79,70,229,.6)}
.brand-mark .icon{width:20px;height:20px;stroke-width:2.4}
.brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.brand small{display:block;font-weight:500;font-size:var(--fs-xs);color:var(--text-3);line-height:1.1}
.topbar .spacer{flex:1}
.main{flex:1;min-width:0;padding:var(--s-4) var(--gutter) calc(var(--nav-h) + var(--s-8) + env(safe-area-inset-bottom));width:100%;max-width:1080px;margin:0 auto}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4);flex-wrap:wrap}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:flex;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);
  background:var(--glass-strong);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-top:1px solid var(--line)}
.nav-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:var(--text-3);
  font-size:11px;font-weight:600;border-radius:var(--r-md);min-height:var(--touch);text-decoration:none!important;position:relative;transition:color var(--dur)}
.nav-item .icon{width:24px;height:24px;transition:transform .25s var(--ease)}
.nav-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.nav-item[aria-current=page]{color:var(--brand-text)}
.nav-item[aria-current=page] .icon{transform:translateY(-1px) scale(1.08)}
.nav-item[aria-current=page]::before{content:"";position:absolute;top:-7px;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
.nav-badge{position:absolute;top:4px;left:calc(50% + 8px);min-width:16px;height:16px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;display:grid;place-items:center;padding:0 4px}

.nav-rail{display:none}
@media (min-width:900px){
  .tabbar{display:none}
  .app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);grid-template-rows:auto 1fr}
  .topbar{grid-column:2}
  .nav-rail{display:flex;flex-direction:column;gap:var(--s-1);grid-row:1/3;grid-column:1;position:sticky;top:0;height:100dvh;padding:var(--s-4) var(--s-3);
    background:var(--glass-strong);backdrop-filter:blur(18px);border-right:1px solid var(--line)}
  .nav-rail .brand{padding:var(--s-2) var(--s-2) var(--s-5)}
  .nav-rail .nav-item{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 var(--s-3);font-size:var(--fs-md);min-height:46px}
  .nav-rail .nav-item[aria-current=page]{background:var(--brand-soft)}
  .nav-rail .nav-item[aria-current=page]::before{top:12px;bottom:12px;left:-12px;width:4px;height:auto;border-radius:0 4px 4px 0}
  .nav-rail .nav-item[aria-current=page] .icon{transform:none}
  .nav-rail .nav-item:hover{background:var(--surface-3)}
  .nav-rail .nav-item span{font-size:var(--fs-md)}
  .nav-rail .rail-foot{margin-top:auto}
  .topbar .brand{display:none}
  .main{padding:var(--s-6) var(--s-8) var(--s-10)}
  .main.has-rail{grid-column:2}
}

/* offline strip */
.offline-strip{background:var(--warn-bg);color:var(--warn);text-align:center;font-size:var(--fs-sm);font-weight:600;padding:6px}

/* Auth + status screens */
.auth{min-height:100dvh;display:grid;grid-template-rows:auto 1fr;position:relative}
.auth-hero{position:relative;overflow:hidden;color:#fff;padding:calc(var(--s-8) + env(safe-area-inset-top)) var(--gutter) var(--s-12);
  background:radial-gradient(520px 320px at 90% 0%,rgba(165,180,252,.45),transparent 60%),linear-gradient(160deg,var(--hero-a),var(--hero-b) 80%)}
.auth-hero h1{font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.15;max-width:12ch;font-weight:700;margin-top:var(--s-5)}
.auth-hero p{opacity:.85;max-width:34ch;margin-top:var(--s-3);font-size:var(--fs-md)}
.auth-hero .brand{color:#fff} .auth-hero .brand small{color:rgba(255,255,255,.7)}
.auth-hero .brand-mark{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.auth-body{padding:0 var(--gutter) var(--s-8);margin-top:-28px;position:relative;z-index:1}
.auth-card{width:min(100%,440px);margin:0 auto;padding:var(--s-6)}
.auth-card h2{margin-bottom:var(--s-1)} .auth-card .sub{color:var(--text-2);margin-bottom:var(--s-5)}
.auth-foot{display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4);font-size:var(--fs-sm)}
.auth-tools{position:absolute;top:calc(var(--s-3) + env(safe-area-inset-top));right:var(--gutter);display:flex;gap:6px;z-index:2}
.auth-tools .btn{--b:rgba(255,255,255,.14);--bh:rgba(255,255,255,.26);--c:#fff;border-color:rgba(255,255,255,.25)}
@media (min-width:900px){
  .auth{grid-template-rows:1fr;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .auth-hero{display:flex;flex-direction:column;justify-content:center;padding:var(--s-12)}
  .auth-hero h1{font-size:3.2rem}
  .auth-body{margin:0;display:grid;place-items:center;padding:var(--s-8)}
  .auth-tools{right:var(--s-6)}
}
.status-screen{min-height:100dvh;display:grid;place-items:center;padding:var(--gutter)}
.status-card{width:min(100%,460px);text-align:center;padding:var(--s-8) var(--s-6)}
.status-card .ico{width:72px;height:72px;border-radius:24px;margin:0 auto var(--s-4);display:grid;place-items:center}
.status-card .ico .icon{width:34px;height:34px}
.ico.warn{background:var(--warn-bg);color:var(--warn)} .ico.danger{background:var(--danger-bg);color:var(--danger)} .ico.brand{background:var(--brand-soft);color:var(--brand-text)}
.splash{min-height:100dvh;display:grid;place-items:center}

/* The seal: circular ballot stamp — the app's signature motif */
.seal{--sz:160px;position:relative;width:var(--sz);height:var(--sz);border-radius:50%;display:grid;place-items:center;color:#fff}
.seal::before,.seal::after{content:"";position:absolute;border-radius:50%;border:2px solid currentColor}
.seal::before{inset:0;opacity:.55;border-style:dashed;animation:spin 60s linear infinite}
.seal::after{inset:12%;opacity:.9}
.seal .icon{width:42%;height:42%;stroke-width:2.6}
.auth-hero .seal{position:absolute;right:-30px;bottom:-34px;--sz:210px;opacity:.28;transform:rotate(-12deg)}
@media (min-width:900px){.auth-hero .seal{--sz:340px;right:-60px;bottom:-60px}}
.hero-card{position:relative;overflow:hidden;color:#fff;border-radius:var(--r-xl);padding:var(--s-6);background:radial-gradient(400px 240px at 100% 0,rgba(165,180,252,.5),transparent 60%),linear-gradient(150deg,var(--hero-a),var(--hero-b));box-shadow:var(--shadow-lg)}
.hero-card h1{font-size:var(--fs-2xl)} .hero-card p{opacity:.85;margin:var(--s-1) 0 0}
.hero-card .seal{position:absolute;right:-24px;top:-24px;--sz:150px;opacity:.2}
.hero-card .badge{background:rgba(255,255,255,.18);color:#fff}
@media (prefers-reduced-motion:reduce){.seal::before{animation:none}}