/* ════════════════════════════════════════════════════════════════════
   app-shell.css — shared shell (sidebar, topbar, theme, toast, drawer)
   Extracted verbatim from index.html so gallery.html / content.html match
   the dashboard exactly. index.html keeps its own inline copy untouched.
   ════════════════════════════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }

/* icon fills from the Figma node — driven by theme tokens so they re-paint on toggle */
/* Figma icon fills → currentColor so rail icons inherit nav-item state (dim / accent). */
.st0, .st44, .st46, .st51 { fill:currentColor; }

:root{
  /* ── DARK theme (default) — "Widget App New Site" mockup palette ── */
  --bg:#16152A;
  --bg-dot:rgba(255,255,255,.045);
  --panel:#1C1B30;
  --rail:#0F0E1C;
  --card:#232135;
  --card-hover:#2A2842;
  --btn:#B3A6FF;
  --accent:#B3A6FF;
  --accent-hover:#9C8CF2;
  --accent-border:rgba(179,166,255,0.30);
  --border-strong:rgba(255,255,255,.10);
  --pink:#F591C8;
  --ink:#16152A;
  --red:#FF9EA9;
  --text:#EDECF7;
  --text-muted:rgba(237,236,247,0.82);
  --text-dim:rgba(237,236,247,0.55);
  --border:rgba(179,166,255,0.30);
  --border-soft:rgba(179,166,255,0.16);
  --shadow:0 24px 60px rgba(0,0,0,0.45);
  --shadow-toast:0 14px 40px rgba(0,0,0,0.5);
  --banner:linear-gradient(160deg,#3A2E66 0%,#241F45 32%,#1C1B30 72%,#16152A 100%);
  --twitch-grad:linear-gradient(177deg,#16152A 0%,#2E2652 42%,#6954A7 82%,#9C8CF2 100%);

  --font:'Nunito', system-ui, sans-serif;
  --font-head:'Baloo 2','Nunito', system-ui, sans-serif;

  --sidebar-w:clamp(248px, 20vw, 320px);
  --right-w:clamp(300px, 24vw, 360px);
  --gap:clamp(16px, 2vw, 32px);
  --radius:16px;
  --fs-label:clamp(13px, 1vw, 17px);
  --fs-small:clamp(11px, .9vw, 13px);
}

:root[data-theme="light"]{
  --bg:#F4F2FC;
  --bg-dot:rgba(30,22,60,.05);
  --panel:#ffffff;
  --rail:#ffffff;
  --card:#EEEBF8;
  --card-hover:#E3DEF3;
  --btn:#7B66E0;
  --accent:#7B66E0;
  --accent-hover:#6D5AE6;
  --accent-border:rgba(123,102,224,0.35);
  --border-strong:rgba(30,22,60,.15);
  --pink:#E06BB0;
  --ink:#ffffff;
  --red:#E0566E;
  --text:#211F38;
  --text-muted:rgba(33,31,56,0.78);
  --text-dim:rgba(33,31,56,0.55);
  --border:rgba(123,102,224,0.35);
  --border-soft:rgba(123,102,224,0.18);
  --shadow:0 20px 45px rgba(60,40,110,0.15);
  --shadow-toast:0 14px 40px rgba(60,40,110,0.18);
  --banner:linear-gradient(160deg,#c9bef0 0%,#b3a6e8 40%,#e6def7 100%);
  --twitch-grad:linear-gradient(177deg,#a594e4 0%,#8a78d6 38%,#7B66E0 100%);
}

html,body{ min-height:100%; }
body{
  background:radial-gradient(var(--bg-dot) 1px, transparent 1px) 0 0/22px 22px, var(--bg);
  font-family:var(--font);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}

#loading{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;}
#loading.hidden{display:none;}
.spinner{width:48px;height:48px;border-radius:50%;border:4px solid var(--border-soft);border-top-color:var(--accent);animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ════════ STAGE ════════ */
#stage{ display:flex; align-items:stretch; min-height:100vh; width:100%; }

/* ════════ ICON RAIL (mockup 72px) ════════ */
#sidebar{
  flex:0 0 72px; width:72px; align-self:flex-start; position:sticky; top:0; height:100vh; z-index:50;
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 0;
  background:var(--rail); border-right:1px solid var(--border);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, border-color .25s ease;
}
.rail-logo{
  width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#B3A6FF,#F591C8);
  display:grid; place-items:center; color:#16152A; margin-bottom:14px; flex:none;
  font:800 13px var(--font-head); text-decoration:none;
}
.brand{ display:none; }   /* legacy text brand — replaced by .rail-logo */

#nav{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; padding:0; }
.nav-pill{
  position:absolute; left:50%; transform:translateX(-50%); right:auto; top:0; width:44px; height:44px;
  background:rgba(179,166,255,.16); border-radius:13px; z-index:0; opacity:0;
  transition:top .25s cubic-bezier(0.34,1.4,0.5,1), height .2s ease, opacity .2s ease;
}
.nav-item{
  position:relative; z-index:1; width:44px; height:44px; padding:0; border-radius:13px;
  display:grid; place-items:center; gap:0; text-decoration:none; cursor:pointer;
  color:var(--text-dim); font:inherit; transition:color .15s ease;
}
.nav-item .ico{ width:22px; height:22px; display:grid; place-items:center; }
.nav-item .ico svg{ width:22px; height:22px; }
.nav-item > span:not(.ico){ display:none; }   /* icon-only rail (title tooltip) */
.nav-item:hover{ color:var(--text); }
.nav-item.active{ color:var(--accent); }

.side-spacer{ flex:1; min-height:10px; }

.twitch-btn{
  width:44px; height:44px; margin:0; border-radius:13px; display:grid; place-items:center;
  background:var(--twitch-grad); border:1px solid var(--accent-border); color:#fff; text-decoration:none;
  font-size:0; flex:none; transition:filter .15s ease;
}
.twitch-btn:hover{ filter:brightness(1.14); }
.twitch-btn svg{ width:18px; height:18px; fill:#fff; }

.foot-item{
  width:44px; height:44px; margin:0; border-radius:13px; display:grid; place-items:center; gap:0;
  color:var(--text-dim); cursor:pointer; text-decoration:none; transition:color .15s ease;
}
.foot-item .ico{ width:20px; height:20px; display:grid; place-items:center; }
.foot-item .ico svg{ width:20px; height:20px; }
.foot-item > span:not(.ico){ display:none; }
.foot-item:hover{ color:var(--text); }
#it-setting{ color:var(--text-dim); }
#it-logout{ color:var(--text-dim); }
#it-logout:hover{ color:var(--red); }

/* ════════ CONTENT COLUMN ════════ */
#content{ flex:1; min-width:0; position:relative; z-index:1; display:flex; flex-direction:column; padding:clamp(18px,2.5vw,34px); gap:18px; }

.topbar{ display:flex; align-items:center; gap:12px; }
.hamburger{ display:none; }
.topbar-brand{ display:none; }
.topbar-spacer{ flex:1; }

#dark-toggle{
  display:flex; align-items:center; gap:8px; padding:6px 10px 6px 14px;
  border-radius:999px; background:var(--panel); border:1px solid var(--border);
  cursor:pointer; font-family:inherit; color:var(--text);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
#dark-toggle:hover{ border-color:var(--accent-border); }
.toggle-label{ font-size:12px; font-weight:700; color:var(--text); white-space:nowrap; letter-spacing:0.3px; }
.toggle-track{ width:38px; height:19px; border-radius:9.5px; background:var(--card); border:1px solid var(--border-strong); position:relative; transition:background .2s; }
.toggle-dot{ position:absolute; left:3px; top:2px; width:13px; height:13px; border-radius:50%; background:var(--text-dim); transition:left .25s cubic-bezier(0.34,1.56,0.64,1), background .2s; }
:root[data-theme="light"] .toggle-track{ background:var(--accent); border-color:transparent; }
:root[data-theme="light"] .toggle-dot{ left:21px; background:#fff; }

/* generic page heading used by gallery / content */
.page-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; max-width:1240px; }
.page-title{ font-family:var(--font-head); font-weight:800; font-size:clamp(24px,2.4vw,34px); color:var(--text); }
.page-sub{ margin-top:4px; font-size:clamp(13px,1vw,15px); color:var(--text-dim); max-width:640px; line-height:1.55; }

/* primary pill button (matches #new-overlay) */
.pill-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:clamp(42px,5vh,50px); padding:0 clamp(20px,2.2vw,30px);
  background:var(--accent); border:0; border-radius:999px; cursor:pointer;
  color:var(--ink); font-family:var(--font); font-size:clamp(13px,1.1vw,15px); font-weight:800;
  text-decoration:none; transition:background .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.pill-btn:hover{ background:var(--accent-hover); transform:translateY(-2px); }
.pill-btn svg{ width:17px; height:17px; }

/* ════════ DRAWER BACKDROP ════════ */
#drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:45; }
#drawer-backdrop.show{ opacity:1; pointer-events:auto; }

/* ════════ TOAST ════════ */
.toast{
  position:fixed; bottom:26px; right:26px; z-index:9000;
  background:var(--panel); border:1px solid var(--accent); color:var(--text);
  padding:13px 20px; border-radius:12px; font-size:13px; font-weight:500; font-family:var(--font);
  transform:translateY(120px); transition:transform .35s cubic-bezier(0.16,1,0.3,1), background .25s ease, color .25s ease;
  box-shadow:var(--shadow-toast); max-width:calc(100vw - 52px);
}
.toast.show{ transform:translateY(0); }

/* ════════ RESPONSIVE ════════ */
/* The 72px icon rail stays visible at every width — no slide-out drawer needed. */
@media (max-width:560px){
  #content{ padding:14px; gap:16px; }
  .toast{ left:14px; right:14px; bottom:14px; }
}