/* =========================================================================
   STUDIOKING  app shell styles
   Layout: top bar / sidebar / stage / inspector. Body never scrolls; each
   column scrolls on its own. Below 1240px the inspector is a bottom sheet,
   below 960px the sidebar is a drawer.
   ========================================================================= */
:root{
  --gold:#c6a15b; --gold-soft:#e7cf9a; --ink:#070b15; --bg:#070b15;
  --panel:#0d1322; --panel-2:#131a2c; --panel-3:#182039; --line:rgba(198,161,91,.22);
  --line-2:rgba(255,255,255,.08); --text:#eef1f7; --muted:#9aa6bd; --muted-2:#6b7793;
  --ok:#5fd6a0; --warn:#e8b873; --bad:#e8807f; --radius:12px;
  --top:56px; --side:300px; --insp:340px;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,sans-serif; --serif:'Playfair Display',Georgia,serif; --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{ background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow:hidden; }
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#26304a;border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#36436a;background-clip:content-box}
.serif{font-family:var(--serif)}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- app frame ---------- */
.app{ height:100dvh; display:grid; grid-template-rows:var(--top) minmax(0,1fr); }
.shell{ display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:0; position:relative; }
.app[data-mode="studio"] .shell{ grid-template-columns:var(--side) minmax(0,1fr) var(--insp); }
.app[data-side="closed"] .shell{ grid-template-columns:0 minmax(0,1fr); }
.app[data-side="closed"][data-mode="studio"] .shell{ grid-template-columns:0 minmax(0,1fr) var(--insp); }
.app[data-side="closed"] .sidebar{ display:none }

/* ---------- top bar ---------- */
.topbar{ display:flex; align-items:center; gap:12px; padding:0 16px; background:rgba(7,11,21,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); min-width:0; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand .mark{ width:30px;height:30px;border-radius:8px; flex:none; background:conic-gradient(from 200deg,#0b1224,#16223f,#c6a15b,#16223f,#0b1224); box-shadow:0 0 0 1px var(--line) inset; }
.brand b{ font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:.01em; white-space:nowrap; }
.brand span{ font-size:10.5px; color:var(--muted); letter-spacing:.24em; text-transform:uppercase; display:block; margin-top:1px; white-space:nowrap; }
.modes{ display:flex; gap:2px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:10px; padding:3px; margin-left:6px; }
.mode{ font:600 13px var(--sans); color:var(--muted); background:transparent; border:0; padding:7px 14px; border-radius:8px; transition:.15s; white-space:nowrap; }
.mode:hover{ color:#fff; background:rgba(255,255,255,.05); }
.mode[aria-selected="true"]{ color:#0a0a0a; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); }
.spacer{ flex:1 }
.search{ display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:10px; padding:0 12px; height:36px; width:min(320px,34vw); min-width:140px; }
.search input{ background:transparent; border:0; outline:0; color:var(--text); font-size:13px; width:100%; min-width:0; }
.search svg{ flex:none; opacity:.6 }
.search kbd{ font:600 10px var(--mono); color:var(--muted-2); border:1px solid var(--line-2); border-radius:5px; padding:2px 5px; }
.statepill{ display:none; align-items:center; gap:8px; font:600 12.5px var(--sans); color:var(--muted); background:var(--panel-2); border:1px solid var(--line-2); border-radius:999px; padding:6px 12px 6px 7px; max-width:240px; white-space:nowrap; overflow:hidden; }
.statepill .sw{ width:20px;height:20px;border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.15) inset; }
.statepill b{ color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.app[data-mode="studio"] .statepill{ display:flex }
.tbtn{ font:600 13px var(--sans); color:var(--text); background:var(--panel-2); border:1px solid var(--line-2); padding:0 14px; height:36px; border-radius:10px; transition:.15s; white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.tbtn:hover{ border-color:var(--gold); color:#fff; }
.tbtn.gold{ background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#0a0a0a; border:0; }
.tbtn.gold:hover{ filter:brightness(1.05) }
.tbtn.ghost{ background:transparent }
.tbtn:disabled{ opacity:.45; cursor:default }
.iconbtn{ width:34px;height:34px; border:1px solid var(--line-2); border-radius:9px; background:var(--panel-2); color:var(--muted); font-size:15px; display:inline-flex; align-items:center; justify-content:center; transition:.13s; flex:none; }
.iconbtn:hover{ color:#fff; border-color:var(--gold) }
.iconbtn.sm{ width:26px;height:26px; border:0; border-radius:6px; background:rgba(255,255,255,.06); font-size:13px; }
.iconbtn.sm:hover{ background:rgba(255,255,255,.14) }
#menuBtn{ display:none }

/* ---------- sidebar ---------- */
.sidebar{ display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line-2); background:var(--panel); }
.sidebar .panels{ flex:1; overflow-y:auto; overflow-x:hidden; padding:6px 0 16px; }
.sidebar .foot{ padding:12px 14px; border-top:1px solid var(--line-2); background:var(--panel); display:grid; gap:8px; }
.sidebar .foot .row .tbtn{ flex:1; justify-content:center }
.panel{ border-bottom:1px solid var(--line-2); }
.phead{ width:100%; display:flex; align-items:center; gap:8px; padding:12px 14px; background:transparent; border:0; color:var(--text); font:700 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; text-align:left; }
.phead .chev{ margin-left:auto; color:var(--muted-2); transition:transform .15s; font-size:11px; }
.phead[aria-expanded="false"] .chev{ transform:rotate(-90deg) }
.phead .cnt{ font:600 11px var(--sans); color:var(--muted-2); letter-spacing:0; text-transform:none; }
.pbody{ padding:2px 14px 14px; }
.phead[aria-expanded="false"] + .pbody{ display:none }
.sectionlbl{ font:700 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin:4px 0 10px; }
.field{ margin-bottom:12px; }
.field > label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.row{ display:flex; gap:8px; align-items:center; }
.row.tight{ gap:6px }
.hint{ font-size:11.5px; color:var(--muted-2); margin-top:6px; line-height:1.5 }

/* chips + options */
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ font:500 12.5px var(--sans); color:var(--muted); background:transparent; border:1px solid var(--line-2); padding:6px 11px; border-radius:999px; transition:.15s; display:inline-flex; align-items:center; gap:6px; }
.chip:hover{ color:#fff; border-color:var(--gold); }
.chip[aria-pressed="true"],.chip.active{ color:#0a0a0a; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); border-color:var(--gold); font-weight:600; }
.chip .n{ font-size:10.5px; opacity:.7 }
.seg{ display:flex; background:var(--panel-2); border:1px solid var(--line-2); border-radius:9px; overflow:hidden; }
.seg button{ font:600 12px var(--sans); color:var(--muted); background:transparent; border:0; padding:7px 11px; flex:1; white-space:nowrap; }
.seg button[aria-pressed="true"],.seg button.active{ color:#0a0a0a; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); }
.seg.wrap{ flex-wrap:wrap }
select.sel{ font:500 13px var(--sans); color:var(--text); background:var(--panel-2); border:1px solid var(--line-2); padding:8px 11px; border-radius:9px; cursor:pointer; width:100%; }
.optlist{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.opt{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--muted); font:500 12px var(--sans); text-align:left; min-width:0; }
.opt .sw{ width:18px;height:18px;border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; }
.opt span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opt:hover{ color:#fff; background:rgba(255,255,255,.05); }
.opt[aria-pressed="true"]{ color:var(--text); border-color:var(--gold); background:rgba(198,161,91,.1); }
.collist{ display:grid; gap:4px; }
.colopt{ display:block; width:100%; text-align:left; padding:8px 10px; border-radius:9px; border:1px solid transparent; background:transparent; color:var(--text); }
.colopt b{ display:block; font:600 13px var(--sans); }
.colopt span{ display:block; font-size:11.5px; color:var(--muted-2); margin-top:2px; line-height:1.4 }
.colopt:hover{ background:rgba(255,255,255,.05) }
.colopt[aria-pressed="true"]{ border-color:var(--gold); background:rgba(198,161,91,.1); }

/* inputs */
input[type=color]{ -webkit-appearance:none; appearance:none; width:34px; height:30px; border:1px solid var(--line-2); border-radius:8px; background:none; cursor:pointer; padding:2px; flex:none; }
input[type=text].hex, input[type=text].nm{ background:var(--panel-2); border:1px solid var(--line-2); color:var(--text); border-radius:8px; padding:7px 9px; font:500 12.5px var(--mono); width:100%; min-width:0; }
input[type=text].nm{ font-family:var(--sans) }
input[type=range]{ width:100%; accent-color:var(--gold); min-width:0; }
.rng{ display:flex; align-items:center; gap:9px; }
.rng .val{ font:600 11.5px var(--mono); color:var(--gold-soft); min-width:42px; text-align:right; }
.layer{ border:1px solid var(--line-2); border-radius:11px; margin-bottom:9px; background:var(--panel-2); overflow:hidden; }
.layer.off{ opacity:.5 }
.lhead{ display:flex; align-items:center; gap:6px; padding:8px 9px; background:var(--panel-3); }
.lhead .ltype{ font:700 9.5px var(--sans); letter-spacing:.1em; text-transform:uppercase; padding:3px 6px; border-radius:5px; flex:none; }
.ltype.pattern{ color:#cfe0ff; background:rgba(20,40,80,.6);} .ltype.atmos{ color:#ffe6c2; background:rgba(80,55,20,.6);}
.lhead select{ flex:1; min-width:0; font:500 12px var(--sans); color:var(--text); background:var(--panel); border:1px solid var(--line-2); border-radius:7px; padding:5px 6px; }
.lbody{ padding:9px 10px; display:grid; gap:8px; }
.lbody .mini-lbl{ font-size:10.5px; color:var(--muted-2); margin-bottom:3px; display:flex; justify-content:space-between; }
.addrow{ display:flex; gap:8px; margin-top:4px; }
.addrow .tbtn{ flex:1; justify-content:center; }

/* ---------- stage + views ---------- */
.stage{ position:relative; min-width:0; min-height:0; background:var(--bg); }
.view{ display:none; position:absolute; inset:0; overflow:auto; }
.view.active{ display:block }
.vtools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 18px; border-bottom:1px solid var(--line-2); position:sticky; top:0; z-index:5; background:rgba(7,11,21,.9); backdrop-filter:blur(10px); }
.count{ font-size:12.5px; color:var(--muted); white-space:nowrap; }
.count b{ color:var(--text) }

/* gallery grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--card,250px)),1fr)); gap:14px; padding:18px clamp(14px,2.5vw,28px) 80px; }
.app[data-density="s"] .grid{ --card:190px } .app[data-density="l"] .grid{ --card:330px }
.card{ border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; background:var(--panel); transition:.18s; position:relative; }
.card:hover{ transform:translateY(-3px); border-color:var(--line); box-shadow:0 18px 40px -24px #000; }
.card:focus-within{ border-color:var(--gold) }
.swatch{ position:relative; display:block; width:100%; height:168px; border:0; padding:0; cursor:zoom-in; background:var(--panel-2); text-align:left; }
.app[data-density="s"] .swatch{ height:128px } .app[data-density="l"] .swatch{ height:220px }
.swatch .num{ position:absolute; top:9px; left:10px; font:600 10.5px var(--sans); letter-spacing:.05em; color:var(--gold-soft); background:rgba(0,0,0,.42); padding:3px 7px; border-radius:6px; backdrop-filter:blur(3px); }
.swatch .tone{ position:absolute; bottom:9px; left:10px; font:700 9.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.42); padding:3px 7px; border-radius:6px; backdrop-filter:blur(3px); opacity:0; transition:.15s; }
.card:hover .swatch .tone{ opacity:1 }
.swatch .overlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; }
.app[data-overlay="on"] .swatch .overlay{ display:flex }
.swatch .overlay div{ font-family:var(--serif); font-weight:600; font-size:clamp(14px,1.4vw,19px); line-height:1.15; text-align:center; padding:0 16px; max-width:18ch; }
.swatch .overlay small{ display:block; font-family:var(--sans); font-weight:400; font-size:11px; opacity:.8; margin-top:6px; letter-spacing:.04em }
.fav{ position:absolute; top:7px; right:8px; width:30px;height:30px; border-radius:8px; border:0; background:rgba(0,0,0,.38); color:#fff; cursor:pointer; font-size:15px; backdrop-filter:blur(3px); opacity:.85; transition:.15s; z-index:2; }
.fav:hover{ opacity:1; background:rgba(0,0,0,.6); } .fav.on{ color:var(--gold-soft); }
.quick{ position:absolute; right:8px; bottom:8px; display:flex; gap:6px; opacity:0; transform:translateY(4px); transition:.15s; z-index:2; }
.card:hover .quick, .card:focus-within .quick{ opacity:1; transform:none }
.quick button{ font:600 11px var(--sans); color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); padding:5px 9px; border-radius:7px; backdrop-filter:blur(4px); }
.quick button:hover{ background:var(--gold); color:#0a0a0a; border-color:var(--gold) }
.meta{ padding:10px 12px 12px; }
.mtitle{ font-family:var(--serif); font-size:14.5px; font-weight:600; line-height:1.25; margin-bottom:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow{ display:flex; align-items:center; gap:8px; }
.dot{ width:10px;height:10px;border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.08); }
.pal{ font-size:12px; color:var(--muted); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini{ font:600 11px var(--sans); color:var(--gold); background:transparent; border:1px solid var(--line); padding:5px 9px; border-radius:7px; transition:.15s; white-space:nowrap; }
.mini:hover{ background:var(--gold); color:#0a0a0a; }
.sentinel{ height:1px }
.empty{ color:var(--muted); font-size:14px; padding:48px 24px; text-align:center; border:1px dashed var(--line-2); border-radius:14px; margin:24px; line-height:1.7 }
.empty b{ color:var(--text) }

/* ---------- studio stage ---------- */
.studiostage{ display:flex; flex-direction:column; height:100%; }
.canvaswrap{ flex:1; min-height:0; overflow:auto; display:flex; align-items:stretch; justify-content:center; background:#05080f; padding:0; }
.app[data-frame="desktop"] .canvaswrap,.app[data-frame="tablet"] .canvaswrap,.app[data-frame="phone"] .canvaswrap{ padding:22px; align-items:flex-start; background:#05080f radial-gradient(60% 60% at 50% 0%, rgba(198,161,91,.06), transparent 70%); }
.canvas{ flex:1; min-height:420px; position:relative; display:flex; align-items:center; justify-content:center; width:100%; }
.app[data-frame="desktop"] .canvas{ max-width:1180px; min-height:620px; border-radius:14px; border:1px solid var(--line-2); overflow:hidden; box-shadow:0 30px 70px -40px #000; }
.app[data-frame="tablet"] .canvas{ max-width:800px; min-height:620px; border-radius:22px; border:8px solid #1a2134; overflow:hidden; box-shadow:0 30px 70px -40px #000; }
.app[data-frame="phone"] .canvas{ max-width:400px; min-height:760px; border-radius:40px; border:9px solid #1a2134; overflow:hidden; box-shadow:0 30px 70px -40px #000; }
.app[data-frame="phone"] .mocknav .ml{ display:none }
.app[data-frame="phone"] .mockhero h1{ font-size:30px }
.app[data-frame="phone"] .msplit,.app[data-frame="phone"] .mcards{ grid-template-columns:1fr }
.contrast{ font:600 12px var(--sans); margin-left:auto; display:flex; align-items:center; gap:7px; color:var(--muted); white-space:nowrap }
.badge{ font:700 11px var(--sans); padding:3px 8px; border-radius:6px; }
.badge.AAA,.badge.AA{ color:#06241b; background:var(--ok); } .badge.AALarge{ color:#2a1c05; background:var(--warn); } .badge.Fail{ color:#2a0a0a; background:var(--bad); }
/* mock layouts */
.mock{ width:100%; height:100%; min-height:420px; display:flex; flex-direction:column; }
.mocknav{ display:flex; align-items:center; gap:18px; padding:22px 34px; }
.mocknav .mb{ font-family:var(--serif); font-weight:700; font-size:18px; }
.mocknav .ml{ margin-left:auto; display:flex; gap:20px; font-size:13px; opacity:.85 }
.mockhero{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 34px 50px; }
.mockhero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(28px,5vw,52px); margin:0 0 16px; max-width:14ch; line-height:1.08; }
.mockhero p{ font-size:16px; max-width:46ch; opacity:.82; margin:0 0 26px; line-height:1.6; }
.mbtns{ display:flex; gap:13px; flex-wrap:wrap; justify-content:center }
.btnp{ font:600 14px var(--sans); padding:13px 26px; border-radius:10px; border:0; cursor:default; background:var(--mock-accent,linear-gradient(180deg,var(--gold-soft),var(--gold))); color:var(--mock-on,#0a0a0a); }
.btns{ font:600 14px var(--sans); padding:13px 26px; border-radius:10px; cursor:default; background:transparent; border:1px solid currentColor; color:inherit; }
.mstats{ display:flex; gap:40px; margin-top:42px; flex-wrap:wrap; justify-content:center; }
.mstats div b{ font-family:var(--serif); font-size:26px; display:block; }
.mstats div span{ font-size:12px; opacity:.7; letter-spacing:.04em }
.glass{ background:var(--glass-bg,rgba(255,255,255,.06)); border:1px solid var(--glass-line,rgba(255,255,255,.14)); border-radius:16px; backdrop-filter:blur(7px); padding:26px; }
.msplit{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; padding:50px 44px; }
.msplit h2{ font-family:var(--serif); font-size:34px; margin:0 0 14px; }
.mcards{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:50px 44px; align-items:center; }
.mcards .glass h3{ font-family:var(--serif); margin:0 0 10px; font-size:20px; }
.tone-light{ color:#fff } .tone-gold{ color:var(--gold-soft) } .tone-dark{ color:#0a0a0a; --glass-bg:rgba(255,255,255,.45); --glass-line:rgba(0,0,0,.08) }
.mock.tone-dark .btns{ color:#0a0a0a }
@media(max-width:700px){ .msplit,.mcards{ grid-template-columns:1fr; padding:30px 22px } .mocknav .ml{ display:none } }

/* ---------- inspector (export) ---------- */
.inspector{ border-left:1px solid var(--line-2); background:var(--panel); overflow-y:auto; display:none; flex-direction:column; min-height:0; }
.app[data-mode="studio"] .inspector{ display:flex }
.inspector .ibody{ padding:14px; flex:1; }
.fmtseg{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.fmtseg button{ font:600 11.5px var(--sans); color:var(--muted); background:var(--panel-2); border:1px solid var(--line-2); padding:6px 10px; border-radius:8px; }
.fmtseg button[aria-pressed="true"]{ color:#0a0a0a; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); border-color:var(--gold); }
pre.code{ margin:0; background:#05080f; border:1px solid var(--line-2); border-radius:10px; padding:12px; font:500 11.5px/1.5 var(--mono); color:#cdd6e6; white-space:pre; overflow:auto; max-height:340px; }
.exprow{ display:flex; gap:8px; margin-top:10px; }
.exprow .tbtn{ flex:1; justify-content:center; }
.ifoot{ position:sticky; bottom:0; padding:12px 14px; border-top:1px solid var(--line-2); background:var(--panel); display:grid; gap:8px; }

/* ---------- kits ---------- */
.kitwrap{ padding:0 0 70px; }
.kitlist .grid{ padding-top:16px }
.sync{ font-size:12px; color:var(--muted); line-height:1.5 }
.sync b{ color:var(--text) }
.sync .ok{ color:var(--ok) }

/* ---------- modal ---------- */
.modal{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(4,7,13,.82); backdrop-filter:blur(6px); }
.modal.open{ display:flex }
.sheet{ width:min(1120px,100%); max-height:94vh; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; box-shadow:0 40px 90px -30px #000; }
.preview{ flex:1; min-height:44vh; position:relative; display:flex; align-items:center; justify-content:center; }
.preview .overlay{ position:relative; z-index:1; text-align:center; padding:28px; max-width:620px; }
.preview .overlay h2{ font-family:var(--serif); font-weight:700; font-size:clamp(26px,4vw,44px); margin:0 0 12px; line-height:1.1 }
.preview .overlay p{ margin:0 0 18px; opacity:.85; font-size:15px; line-height:1.6 }
.preview.plain .overlay{ display:none }
.pclose{ position:absolute; top:14px; right:14px; z-index:2; width:38px;height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.42); color:#fff; font-size:18px; }
.pclose:hover{ background:rgba(0,0,0,.7) }
.pnav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px;height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.42); color:#fff; font-size:18px; }
.pnav.prev{ left:14px } .pnav.next{ right:14px }
.pnav:hover{ background:rgba(0,0,0,.7) }
.ptoggle{ position:absolute; left:14px; bottom:14px; z-index:2; display:flex; gap:6px; }
.ptoggle button{ font:600 11.5px var(--sans); color:#fff; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2); padding:6px 10px; border-radius:7px; backdrop-filter:blur(4px); }
.ptoggle button[aria-pressed="true"]{ background:var(--gold); color:#0a0a0a; border-color:var(--gold) }
.pbar{ padding:14px 20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; background:var(--panel-2); }
.pinfo h3{ font-family:var(--serif); margin:0 0 5px; font-size:19px; }
.ptags{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12.5px; flex-wrap:wrap }
.pbtns{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.pbtns select.sel{ width:auto }
.similar{ padding:10px 20px 16px; background:var(--panel-2); border-top:1px solid var(--line-2); }
.similar .sectionlbl{ margin:4px 0 8px }
.simrow{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.sim{ width:84px; height:58px; flex:none; border-radius:8px; border:1px solid var(--line-2); padding:0; cursor:pointer; background:var(--panel); position:relative; overflow:hidden; }
.sim:hover{ border-color:var(--gold) }
.sim span{ position:absolute; left:4px; bottom:3px; font:600 9px var(--sans); color:#fff; background:rgba(0,0,0,.5); padding:1px 5px; border-radius:4px; max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.help .sheet{ max-width:640px }
.helpbody{ padding:28px 30px 32px; overflow:auto }
.helpbody h2{ margin:0 0 6px } .helpbody h3{ margin:16px 0 6px; font-size:15px }
.helpbody p{ color:var(--muted); font-size:13.5px; line-height:1.7; margin:0 0 10px }
.helpbody kbd{ font:600 11px var(--mono); color:var(--text); border:1px solid var(--line-2); border-radius:5px; padding:2px 6px; background:var(--panel-2) }
.keys{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 14px; font-size:13px; color:var(--muted) }

/* ---------- toast + scrim ---------- */
.toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#0a0a0a; font:600 13px var(--sans); padding:11px 18px; border-radius:10px; z-index:70; transition:.25s; pointer-events:none; box-shadow:0 14px 30px -12px rgba(0,0,0,.7); width:max-content; max-width:min(92vw,560px); text-align:center }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.scrim{ display:none; position:fixed; inset:var(--top) 0 0 0; background:rgba(0,0,0,.55); z-index:19; }

/* ---------- responsive ---------- */
@media(max-width:1240px){
  .app[data-mode="studio"] .shell{ grid-template-columns:var(--side) minmax(0,1fr); }
  .app[data-side="closed"][data-mode="studio"] .shell{ grid-template-columns:0 minmax(0,1fr); }
  .inspector{ position:fixed; left:0; right:0; bottom:0; max-height:70vh; z-index:25; border-left:0; border-top:1px solid var(--line); transform:translateY(100%); visibility:hidden; transition:transform .22s, visibility 0s .22s; box-shadow:0 -20px 50px -20px #000; border-radius:14px 14px 0 0; }
  .app[data-inspector="open"] .inspector{ transform:none; visibility:visible; transition:transform .22s; }
  .app[data-mode="studio"] #codeBtn{ display:inline-flex }
}
#codeBtn{ display:none }
#primaryBtn .short{ display:none }
@media(max-width:960px){
  :root{ --top:52px }
  #menuBtn{ display:inline-flex }
  .modes{ margin-left:0 }
  .brand span{ display:none }
  .shell, .app[data-mode="studio"] .shell, .app[data-side="closed"] .shell, .app[data-side="closed"][data-mode="studio"] .shell{ grid-template-columns:minmax(0,1fr); }
  .sidebar{ position:fixed; top:var(--top); bottom:0; left:0; width:min(320px,86vw); z-index:20; transform:translateX(-100%); visibility:hidden; transition:transform .22s, visibility 0s .22s; border-right:1px solid var(--line); display:flex !important; }
  .app[data-drawer="open"] .sidebar{ transform:none; visibility:visible; transition:transform .22s; }
  .app[data-drawer="open"] .scrim{ display:block }
  .search{ width:auto; flex:1; min-width:0 }
  .statepill{ display:none !important }
  .topbar .tbtn .lbl{ display:none }
  .topbar .tbtn{ padding:0 11px }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr)); gap:10px; padding:12px 14px 90px }
  .swatch{ height:130px }
  .vtools{ padding:8px 14px; gap:8px }
  .pbar{ padding:12px 14px }
  .modal{ padding:0 }
  .sheet{ max-height:100dvh; height:100dvh; border-radius:0; border:0 }
  .preview{ min-height:38vh }
  .canvas{ min-height:60vh }
  .app[data-frame="phone"] .canvaswrap,.app[data-frame="tablet"] .canvaswrap,.app[data-frame="desktop"] .canvaswrap{ padding:12px }
}
@media(max-width:560px){
  /* phone top bar: one row (menu, modes, help, primary); Browse adds a second row for search */
  .app[data-mode="browse"]{ --top:96px }
  .topbar{ padding:0 10px; gap:8px; overflow:hidden }
  .app[data-mode="browse"] .topbar{ flex-wrap:wrap; padding:7px 10px; row-gap:6px; align-content:center }
  .brand{ display:none }
  .modes{ margin:0; flex:1; justify-content:space-between } .modes .mode{ padding:7px 8px; font-size:12.5px; flex:1 }
  .spacer{ display:none }
  #shareBtn, #randomBtn{ display:none }
  .app:not([data-mode="browse"]) #helpBtn{ display:none }
  #primaryBtn{ padding:0 11px; font-size:12.5px; height:34px }
  #primaryBtn .long{ display:none } #primaryBtn .short{ display:inline }
  .search{ display:none; order:10; flex:1 1 100%; width:100%; height:34px }
  .app[data-mode="browse"] .search{ display:flex }
  #frameSeg{ display:none }
  #viewSeg{ max-width:100%; overflow-x:auto } #viewSeg button{ flex:none }
  .mtitle{ font-size:13.5px }
  .pbtns select.sel{ display:none }
  .pbar{ gap:10px }
}
@media(prefers-reduced-motion:reduce){ .card, .card:hover{ transition:none; transform:none } }