/* App shell
   Sidebar, sticky top bar and main column. Below 920px the sidebar becomes a bottom tab bar. */

.app{display:flex;align-items:flex-start;min-height:calc(100dvh - var(--sat) - var(--sab))}

/* ---------- sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);flex:none;
  position:sticky;top:0;
  height:calc(100dvh - var(--sat) - var(--sab));
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(78,91,214,.22), transparent 70%),
    radial-gradient(360px 240px at 100% 100%, rgba(18,181,160,.10), transparent 70%),
    linear-gradient(178deg,var(--nav-2),var(--nav) 55%);
  border-right:1px solid var(--nav-line);
  display:flex;flex-direction:column;gap:6px;
  padding:18px 14px 14px;overflow:hidden;color:var(--nav-ink);
  box-shadow:1px 0 0 rgba(0,0,0,.25), 12px 0 40px -24px rgba(0,0,0,.6);
  z-index:30;
}
.sb-brand{display:flex;align-items:center;gap:11px;padding:2px 6px 16px}
.logo{width:42px;height:42px;flex:none;filter:drop-shadow(0 6px 14px rgba(36,44,134,.55))}
.wordmark{font-size:17px;font-weight:680;letter-spacing:-.035em;color:#fff;line-height:1.1}
.wordmark em{font-style:normal;background:linear-gradient(92deg,var(--teal-2),#8FA2FF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sb-sub{font-size:10.5px;color:var(--nav-muted);letter-spacing:.055em;text-transform:uppercase;font-weight:620;margin-top:3px}

.sb-label{font-size:10px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;color:var(--nav-muted);padding:0 10px 7px}
.sb-nav{display:flex;flex-direction:column;gap:3px}
.sb-nav button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  padding:8px 11px;cursor:pointer;color:var(--nav-ink-2);
  font-size:13.5px;font-weight:540;letter-spacing:-.012em;position:relative;
  transition:background .17s ease,color .17s ease,transform .11s cubic-bezier(.2,.9,.3,1),box-shadow .17s ease;
}
.sb-nav button:hover{background:rgba(255,255,255,.055);color:#fff}
.sb-nav button:active{transform:scale(.98)}
.sb-nav button .ic{width:28px;height:28px;flex:none;display:block;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));transition:transform .2s cubic-bezier(.2,.9,.3,1)}
.sb-nav button:hover .ic{transform:translateY(-1.5px) scale(1.04)}
.sb-nav button .lbl{flex:1;min-width:0}
.sb-nav button .ct{
  font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--nav-muted);
  background:rgba(255,255,255,.07);border-radius:var(--pill);padding:2px 7px;font-weight:600;
}
.sb-nav button[aria-selected="true"]{
  background:linear-gradient(170deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  border-color:rgba(255,255,255,.1);color:#fff;font-weight:620;
  box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
}
.sb-nav button[aria-selected="true"]::before{
  content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:3px;height:19px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--teal-2),var(--brand-2));
  box-shadow:0 0 12px rgba(110,121,242,.8);
}
.sb-nav button[aria-selected="true"] .ct{background:rgba(255,255,255,.14);color:#fff}

.sb-stats{display:flex;flex-direction:column;gap:1px;padding:0 4px}
.sb-stat{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:var(--r-xs);
  transition:background .15s ease}
.sb-stat:hover{background:rgba(255,255,255,.045)}
.sb-stat .hdot{width:6px;height:6px;border-radius:2px;flex:none;box-shadow:0 0 7px currentColor;opacity:.95}
.sb-stat .k{flex:1;font-size:12px;color:var(--nav-ink-2);letter-spacing:-.008em}
.sb-stat .v{font-size:12.5px;font-weight:660;color:#fff}
.sb-stat .v.bad{color:var(--amber-2)}
.sb-spacer{flex:1;min-height:12px}
.sb-card{
  background:linear-gradient(168deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  border:1px solid var(--nav-line);border-radius:var(--r);
  padding:13px;display:flex;align-items:center;gap:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.ring{
  width:46px;height:46px;flex:none;border-radius:50%;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--teal) calc(var(--p) * 1%), rgba(255,255,255,.1) 0);
  filter:drop-shadow(0 2px 8px rgba(18,181,160,.4));
}
.ring::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--nav-2)}
.ring b{position:relative;z-index:1;font-size:12px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.sb-card .meta{min-width:0}
.sb-card .meta .t{font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--nav-muted)}
.sb-card .meta .d{font-size:12.5px;font-weight:600;color:#fff;margin-top:2px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-foot{display:flex;align-items:center;gap:7px;padding:11px 4px 0;border-top:1px solid var(--nav-line);margin-top:10px}
.themeswitch{display:inline-flex;gap:1px;padding:2px;border-radius:var(--pill);
  background:rgba(255,255,255,.06);border:1px solid var(--nav-line)}
.themeswitch button{width:22px;height:20px;border:0;border-radius:var(--pill);background:transparent;
  color:var(--nav-muted);cursor:pointer;font-size:11px;line-height:1;padding:0;
  display:grid;place-items:center;transition:background .16s ease,color .16s ease}
.themeswitch button:hover{color:#fff}
.themeswitch button[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16)}
.dotlive{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);flex:none}
#savestate{font-size:11px;color:var(--nav-muted);letter-spacing:-.005em}

/* ---------- main column ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:var(--sat);z-index:25;
  background:var(--material);
  -webkit-backdrop-filter:saturate(200%) blur(22px);backdrop-filter:saturate(200%) blur(22px);
  border-bottom:1px solid var(--hairline);
  padding:15px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.tb-logo{display:none}
.tb-title{min-width:0;flex:1}
.tb-title .eyebrow{margin-bottom:2px}
.tb-title h1{font-size:20px;letter-spacing:-.03em}
.tb-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
main#view{padding:26px;display:flex;flex-direction:column;gap:20px;min-width:0;padding-bottom:64px}
main#view>*{min-width:0}

@media (max-width:920px){
  .app{flex-direction:column;align-items:stretch}
  .sidebar{
    position:fixed;inset:auto 0 0 0;top:auto;width:auto;height:auto;z-index:60;
    flex-direction:row;align-items:center;gap:0;
    padding:8px 10px calc(8px + var(--sab));
    border-right:0;border-top:1px solid var(--nav-line);
    background:linear-gradient(180deg,var(--nav-2),var(--nav));
    box-shadow:0 -8px 30px -14px rgba(0,0,0,.7);overflow:visible;
  }
  .sb-brand,.sb-label,.sb-spacer,.sb-card,.sb-foot,.sb-stats{display:none}
  .sb-nav{flex-direction:row;width:100%;gap:2px}
  .sb-nav button{flex-direction:column;gap:3px;padding:6px 2px;font-size:10.5px;justify-content:center;text-align:center}
  .sb-nav button .ct{display:none}
  .sb-nav button[aria-selected="true"]::before{left:50%;top:-8px;transform:translateX(-50%);width:22px;height:3px;border-radius:0 0 3px 3px}
  .sb-nav button .ic{width:24px;height:24px}
  .tb-logo{display:block;width:32px;height:32px;flex:none;filter:drop-shadow(0 4px 9px rgba(36,44,134,.5))}
  .topbar{padding:13px 16px}
  .tb-title h1{font-size:17.5px}
  /* title keeps its own row; actions sit below it and scroll sideways when they don't fit */
  .topbar{gap:10px 12px}
  .tb-title{flex:1 1 calc(100% - 44px)}
  .tb-actions{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -16px;padding:2px 16px;-webkit-overflow-scrolling:touch}
  .tb-actions::-webkit-scrollbar{display:none}
  .tb-actions .btn{flex:none;white-space:nowrap}
  main#view{padding:18px 16px 110px}
}
.sb-label-gap{padding-top:20px}