/* ============ SNAPITAL Operator Panel — BLACK Mario theme, top bar ============ */
:root{
  --bg:#0d0d10;          /* near-black */
  --bg-2:#141419;
  --panel:#1b1b22;       /* dark block */
  --panel-2:#232330;
  --stone:#2a2a36;
  --coin:#ffce1f;        /* mario coin gold (brand) */
  --coin-d:#e0a800;
  --red:#e52521;         /* mario red */
  --red-d:#a01812;
  --green:#43b047;       /* pipe green */
  --green-d:#2c7a30;
  --brick:#d1642a;       /* warm brick accent */
  --sky:#3a6ea5;         /* muted night blue */
  --text:#f4f0e6;
  --muted:#9a94a8;
  --ink:#000;
  --shadow: 4px 4px 0 #000;
  --shadow-sm: 3px 3px 0 #000;
  --bevel: inset -4px -4px 0 rgba(0,0,0,.5), inset 4px 4px 0 rgba(255,255,255,.06);
  --pixel:'Press Start 2P', monospace;   /* logo / brand only */
  --ui:'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --read:var(--ui);
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ font-family:var(--ui); color:var(--text); background:var(--bg);
  font-size:15px; line-height:1.5; overflow-x:hidden; }
img{ image-rendering:pixelated; max-width:100%; }
button, input, select{ font-family:var(--ui); }
[hidden]{ display:none !important; }

/* ---- night background ---- */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:linear-gradient(#07070a 0%, #0d0d10 45%, #12121a 100%); }
.bg-stars{ position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff8, transparent),
    radial-gradient(1px 1px at 32% 12%, #fff6, transparent),
    radial-gradient(2px 2px at 58% 28%, #ffce1f88, transparent),
    radial-gradient(1px 1px at 74% 16%, #fff7, transparent),
    radial-gradient(1px 1px at 88% 32%, #fff6, transparent),
    radial-gradient(1px 1px at 46% 40%, #fff5, transparent);
}
.bg-hills{ position:absolute; bottom:56px; left:0; right:0; height:120px; opacity:.5;
  background:
    radial-gradient(circle at 14% 100%, #1f5c22 0 70px, transparent 71px),
    radial-gradient(circle at 44% 100%, #1f5c22 0 100px, transparent 101px),
    radial-gradient(circle at 80% 100%, #1f5c22 0 80px, transparent 81px); }
.bg-ground{ position:absolute; bottom:0; left:0; right:0; height:56px;
  background:repeating-linear-gradient(90deg,#241812 0 30px,#1a110c 30px 32px), #241812;
  border-top:4px solid #000; box-shadow:inset 0 4px 0 rgba(255,255,255,.05); }

/* ---- components ---- */
.btn{ font-family:var(--ui); font-weight:700; font-size:13px; letter-spacing:.4px; color:#fff; cursor:pointer; text-transform:uppercase;
  background:var(--red); border:4px solid var(--ink); box-shadow:var(--shadow-sm); padding:11px 15px; transition:transform .05s; }
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translate(3px,3px); box-shadow:none; }
.btn-block{ display:block; width:100%; }
.btn-small{ font-size:12px; padding:8px 12px; }
.btn-tiny{ font-size:11px; padding:6px 10px; background:var(--green); }
.btn-green{ background:var(--green); }
.btn-ghost{ background:var(--stone); color:var(--coin); }
.btn-coin{ background:var(--coin); color:var(--ink); }
.btn[disabled]{ filter:grayscale(.6) brightness(.7); cursor:not-allowed; }

.panel{ background:var(--panel); border:3px solid var(--ink); box-shadow:var(--shadow-sm);
  padding:13px; margin-bottom:12px; }
.panel h2{ font-family:var(--ui); font-weight:800; font-size:16px; letter-spacing:.3px; margin:0 0 10px; color:var(--coin); text-shadow:2px 2px 0 #000; }
.panel h3{ font-family:var(--ui); font-weight:700; font-size:13px; margin:0 0 8px; color:var(--muted); }

.field{ width:100%; font-size:15px; padding:12px; border:4px solid var(--ink);
  background:#0a0a0d; color:#fff; box-shadow:var(--bevel); }
.field:focus{ outline:none; border-color:var(--coin); }
.field-label{ display:block; font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.5px; color:var(--muted); margin:14px 0 6px; text-transform:uppercase; }

/* ============ LOGIN ============ */
.login{ min-height:100dvh; display:grid; place-items:center; padding:24px; }
.login-card{ width:min(440px,94vw); background:var(--panel); border:5px solid var(--coin);
  box-shadow:8px 8px 0 #000, 0 0 40px rgba(255,206,31,.12); padding:28px 24px 24px; text-align:center; }
.login-mascot{ width:96px; height:96px; margin:0 auto 8px; filter:drop-shadow(0 0 12px rgba(255,206,31,.5)); }
.login-mascot svg, .brand-mascot svg{ width:100%; height:100%; display:block; }
.title{ font-family:var(--pixel); font-size:24px; letter-spacing:2px; margin:8px 0 4px;
  color:var(--coin); -webkit-text-stroke:3px #000; paint-order:stroke fill; text-shadow:0 0 16px rgba(255,206,31,.4); }
.subtitle{ font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:2px; color:var(--red); margin:0 0 6px; filter:brightness(1.2); text-transform:uppercase; }
.login .field{ text-align:center; }
.login .btn{ margin-top:18px; }
.login-msg{ font-family:var(--ui); font-size:13px; color:#ff6a66; margin:12px 0 0; }
.login-foot{ font-size:14px; color:var(--muted); margin:14px 0 0; }

/* ============ SHELL (top bar) ============ */
.app{ min-height:100dvh; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:16px;
  background:var(--bg-2); border-bottom:3px solid var(--coin); box-shadow:0 3px 0 #000; padding:7px 14px; }
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand-mascot{ width:40px; height:40px; filter:drop-shadow(0 0 6px rgba(255,206,31,.4)); }
.brand-name{ font-family:var(--pixel); font-size:14px; color:var(--coin); -webkit-text-stroke:2px #000; paint-order:stroke fill; }

.nav{ display:flex; gap:8px; flex:1; flex-wrap:wrap; }
.nav-item{ font-family:var(--ui); font-weight:700; font-size:13px; color:#fff; cursor:pointer; white-space:nowrap;
  padding:9px 12px; border:4px solid var(--ink); background:var(--panel-2); box-shadow:var(--shadow-sm); user-select:none; }
.nav-item:hover{ filter:brightness(1.2); border-color:var(--coin); }
.nav-item.active{ background:var(--coin); color:var(--ink); }

.topbar-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.token-chip{ display:flex; align-items:center; gap:8px; background:var(--panel); border:4px solid var(--ink);
  box-shadow:var(--shadow-sm); padding:6px 10px; font-family:var(--ui); font-weight:700; font-size:12px; }
.token-dot{ width:12px; height:12px; background:var(--red); border:2px solid #000; display:inline-block; }
.token-dot.on{ background:var(--coin); box-shadow:0 0 8px var(--coin); }
.menu-btn{ display:none; background:var(--red); }

.subbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--bg); border-bottom:3px solid #000; padding:7px 14px; position:sticky; top:52px; z-index:5; }
.crumb{ font-family:var(--ui); font-weight:800; font-size:17px; letter-spacing:.3px; color:var(--coin); flex:1; }
.license-strip{ display:flex; gap:8px; flex-wrap:wrap; }
.li-chip{ font-family:var(--ui); font-weight:700; font-size:12px; color:var(--muted); background:var(--panel);
  border:3px solid #000; box-shadow:var(--shadow-sm); padding:6px 9px; }
.li-chip b{ color:var(--coin); margin-left:6px; }
.li-chip b.ok{ color:var(--green); }

.main{ flex:1; }
.view{ padding:14px; max-width:1200px; width:100%; margin:0 auto; }
/* full-height view: the page doesn't scroll — an inner region does */
.view.fill{ height:calc(100dvh - 108px); display:flex; flex-direction:column; }
.view.fill > .panel{ flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; margin-bottom:0; }
.view.fill #convTableWrap{ flex:1; min-height:0; display:flex; }

/* two-column layout that stacks on mobile */
.two-col{ display:grid; grid-template-columns:1.2fr 1fr; gap:12px; align-items:start; }

/* cards */
.grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.grid.tight{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.stat{ background:var(--panel); border:3px solid var(--ink); box-shadow:var(--shadow-sm); padding:11px 12px; }
.stat .k{ font-family:var(--ui); font-weight:700; font-size:11px; letter-spacing:.5px; color:var(--muted); text-transform:uppercase; }
.stat .v{ font-family:var(--ui); font-weight:800; font-size:24px; margin-top:4px; color:var(--coin); text-shadow:2px 2px 0 #000; }
.stat .s{ font-size:13px; color:var(--muted); margin-top:3px; }
/* compact stat variant for one-line strips */
.stat.mini{ display:flex; align-items:baseline; gap:8px; padding:9px 12px; }
.stat.mini .v{ font-size:20px; margin:0; }
.stat.mini .k{ margin:0; }

/* lists */
.list{ display:flex; flex-direction:column; gap:8px; }
/* internal scroll so the page itself doesn't grow */
.list.scroll{ overflow:auto; padding-right:4px; }
.list.scroll.h1{ max-height:calc(100dvh - 360px); min-height:120px; }
.list.scroll.h2{ max-height:340px; }
.row{ display:flex; align-items:center; gap:12px; background:var(--panel-2);
  border:4px solid var(--ink); box-shadow:var(--shadow-sm); padding:10px 12px; }
.row .av{ width:36px; height:36px; background:var(--sky); border:3px solid #000; display:grid; place-items:center;
  font-family:var(--ui); font-size:12px; color:#fff; flex:0 0 auto; }
.row .who{ flex:1; min-width:0; }
.row .who .nm{ font-family:var(--ui); font-weight:700; font-size:15px; color:#fff; }
.row .who .mt{ font-size:13px; color:var(--muted); }
.row .actions{ display:flex; gap:8px; align-items:center; flex:0 0 auto; }
.badge{ font-family:var(--ui); font-weight:700; font-size:11px; padding:4px 8px; border:3px solid #000; }
.badge.conv{ background:var(--green); color:#03210a; }
.badge.under{ background:var(--red); color:#fff; }
.badge.new{ background:var(--coin); color:var(--ink); }
.badge.active{ background:var(--stone); color:var(--coin); }
/* import queue status */
.badge.imp-queued{ background:#555; color:#fff; }
.badge.imp-login{ background:var(--coin); color:#111; }
.badge.imp-live{ background:var(--green); color:#03210a; }
.badge.imp-error{ background:var(--red); color:#fff; }
/* conversion status */
.conv-badge{ font-family:var(--ui); font-weight:800; font-size:11px; letter-spacing:.5px; padding:5px 9px; border:3px solid #000; }
.cs-idle{ background:var(--stone); color:var(--muted); }
.cs-converting{ background:var(--green); color:#03210a; }
.cs-error{ background:var(--red); color:#fff; }
.grp-sum{ font-size:13px; color:var(--muted); margin-right:12px; }
/* import form */
.form-grid{ display:grid; gap:12px 16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.form-grid .field-label{ margin-top:0; }

/* ADD ACCOUNTS (Snapfans account center) */
.seg-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.seg{ font-family:var(--ui); font-weight:800; font-size:12px; letter-spacing:.5px; color:var(--muted); cursor:pointer;
  background:var(--stone); border:4px solid var(--ink); box-shadow:var(--shadow-sm); padding:9px 14px; text-transform:uppercase; }
.seg.on{ background:var(--coin); color:#111; }
.mlabel{ font-family:var(--ui); font-weight:800; font-size:12px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin:14px 0 6px; }
.mta{ width:100%; font-family:var(--read); font-size:15px; padding:10px; color:#fff; background:#0a0a0d;
  border:3px solid var(--ink); box-shadow:var(--bevel); resize:vertical; line-height:1.5; max-height:130px; }
.mlabel{ margin:10px 0 5px; }
.mta:focus{ outline:none; border-color:var(--coin); }
.mfoot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.mcount{ font-family:var(--ui); font-weight:800; font-size:12px; color:var(--coin); letter-spacing:1px; }
.mgo{ font-family:var(--ui); font-weight:800; font-size:13px; letter-spacing:.5px; color:#fff; cursor:pointer; text-transform:uppercase;
  background:var(--green); border:4px solid var(--ink); box-shadow:var(--shadow-sm); padding:11px 16px; }
.mgo:hover{ filter:brightness(1.12); } .mgo:active{ transform:translate(3px,3px); box-shadow:none; }
.mgo[disabled]{ filter:grayscale(.6) brightness(.6); cursor:not-allowed; }
.file-drop{ display:block; border:4px dashed var(--stone); background:#0a0a0d; color:var(--muted);
  padding:16px; text-align:center; cursor:pointer; font-size:14px; }
.file-drop:hover{ border-color:var(--coin); color:var(--text); }
code{ font-family:var(--read); background:#000; color:var(--coin); padding:1px 5px; border:1px solid var(--stone); }

/* custom pixel icons */
.pxicon{ display:inline-block; vertical-align:-2px; }
h2 .pxicon, h3 .pxicon{ vertical-align:-1px; margin-right:8px; color:var(--coin); }
.nav-item{ display:inline-flex; align-items:center; gap:8px; }
.nav-item .pxicon{ vertical-align:0; }
.seg .pxicon, .type-badge .pxicon{ vertical-align:-2px; margin-right:5px; }
.btn .pxicon{ vertical-align:-2px; margin-right:6px; }
.tile .th .pxicon{ color:var(--coin); }

/* creator groups */
.gcard{ background:var(--panel-2); border:3px solid var(--ink); box-shadow:var(--shadow-sm); padding:12px; margin-bottom:10px; }
.ghead{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.gname{ font-family:var(--ui); font-weight:800; font-size:16px; color:var(--coin); }
.gsub{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.gdel{ margin-left:auto; font-family:var(--ui); font-weight:700; font-size:10px; color:#fff; cursor:pointer;
  background:var(--red); border:3px solid var(--ink); box-shadow:var(--shadow-sm); padding:5px 9px; }
.ggrid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.gfield{ font-family:var(--ui); font-weight:700; font-size:10px; letter-spacing:.5px; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
.gsel, .ggrid .select{ font-size:13px; padding:8px; }
/* creatable presets (dropdown + delete) */
.preset-row{ display:flex; gap:8px; align-items:stretch; }
.preset-row .presetSel{ flex:1; }
.preset-row .delpreset{ flex:0 0 auto; }
.gsub{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* messaging */
.msg-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.count-pill{ font-family:var(--ui); font-weight:800; font-size:12px; background:var(--coin); color:var(--ink);
  border:3px solid #000; padding:4px 9px; margin-left:8px; }
.bar{ display:flex; align-items:center; margin-bottom:12px; }
.bar h2{ margin:0; } .bar .sp{ flex:1; }

/* log */
.log{ background:#050507; border:4px solid var(--ink); box-shadow:var(--shadow); padding:12px; max-height:260px; overflow:auto; }
.log .ln{ font-size:16px; color:#8fd98a; }
.log .ln .t{ color:#5a6; margin-right:8px; }
.log .ln .em{ color:var(--coin); }

/* transcript */
.chat{ display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow:auto; padding:6px; }
.bub{ max-width:76%; padding:8px 10px; border:3px solid #000; font-size:17px; }
.bub.model{ align-self:flex-end; background:var(--coin); color:#111; }
.bub.fan{ align-self:flex-start; background:var(--stone); color:#fff; }
.bub .tm{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

/* vault */
.tiles{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
.tile{ background:var(--panel); border:4px solid var(--ink); box-shadow:var(--shadow-sm); padding:8px; }
.tile .th{ aspect-ratio:3/4; background:var(--sky); border:3px solid #000; display:grid; place-items:center;
  font-size:30px; color:#fff; text-align:center; overflow:hidden; }
.tile .cap{ font-size:14px; margin-top:6px; color:var(--muted); }
.pool-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }

/* tiers */
.tiers{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.tier{ background:var(--panel); border:4px solid var(--ink); box-shadow:var(--shadow); padding:16px; text-align:center; }
.tier.cur{ border-color:var(--green); box-shadow:6px 6px 0 var(--green-d); }
.tier .nm{ font-family:var(--ui); font-weight:800; font-size:16px; color:var(--red); filter:brightness(1.2); }
.tier .pr{ font-family:var(--ui); font-weight:800; font-size:28px; color:var(--coin); text-shadow:2px 2px 0 #000; margin:12px 0; }
.tier .li{ font-size:14px; color:var(--muted); }

.select{ width:100%; font-size:14px; padding:10px; border:4px solid #000; background:#0a0a0d; color:#fff; }
.help{ font-size:14px; color:var(--muted); margin:0 0 12px; line-height:1.5; }

/* pixel toggle switch */
.pxsw{ display:inline-block; width:42px; height:22px; background:#333; border:3px solid #000;
  box-shadow:var(--shadow-sm); cursor:pointer; position:relative; }
.pxsw .knob{ position:absolute; top:0; left:0; width:16px; height:16px; background:#888; border:2px solid #000; transition:left .08s; }
.pxsw.on{ background:var(--green); }
.pxsw.on .knob{ left:20px; background:var(--coin); }
.tog{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.tog-l{ font-family:var(--ui); font-weight:700; font-size:11px; color:var(--muted); }

/* stage badges */
.stage-badge{ font-family:var(--ui); font-weight:700; font-size:11px; padding:3px 7px; border:2px solid #000; margin-left:8px; vertical-align:middle; }
.s-intake{ background:#555; color:#fff; }
.s-seed{ background:var(--sky); color:#fff; }
.s-traffic{ background:var(--brick); color:#fff; }
.s-convert{ background:var(--green); color:#03210a; }
.src{ text-transform:uppercase; font-size:12px; font-weight:700; }
.src.mobile{ color:var(--coin); } .src.web{ color:var(--sky); }

/* capital state tag */
.tag-state{ font-family:var(--ui); font-weight:700; font-size:12px; color:#ff9a96; display:inline-flex; align-items:center; gap:6px;
  border:3px solid #000; background:var(--panel); padding:6px 10px; }
.tag-state .d{ width:10px; height:10px; background:var(--red); border:2px solid #000; display:inline-block; }
.tag-state.ok{ color:var(--green); } .tag-state.ok .d{ background:var(--green); }

.in-row{ display:flex; gap:10px; align-items:stretch; }
.in-row .field{ flex:1; }
.grp-actions{ gap:8px; flex-wrap:wrap; }
.select.mini{ width:auto; min-width:130px; font-size:13px; padding:9px; }

/* conversion table (Stage 3 convert) */
.conv-tbl{ border:3px solid var(--ink); box-shadow:var(--shadow-sm); overflow:hidden; flex:1; display:flex; flex-direction:column; min-height:0; width:100%; }
.view.fill .conv-body.scroll{ flex:1; max-height:none; min-height:0; }
.conv-head, .conv-row{ display:grid; grid-template-columns:minmax(140px,1.5fr) 110px minmax(100px,1.1fr) 64px 64px 74px minmax(140px,1fr); gap:10px; align-items:center; }
.type-badge{ font-family:var(--ui); font-weight:700; font-size:11px; padding:3px 7px; border:2px solid #000; white-space:nowrap; }
.t-mobile{ background:var(--coin); color:#111; } .t-web{ background:var(--sky); color:#fff; }
.conv-head{ background:var(--panel-2); border-bottom:3px solid var(--ink); padding:10px 14px;
  font-family:var(--ui); font-weight:800; font-size:10px; letter-spacing:.5px; color:var(--muted); }
.conv-body{ background:var(--panel); }
.conv-body.scroll{ max-height:calc(100dvh - 360px); min-height:120px; overflow:auto; }
.conv-row{ padding:11px 14px; border-bottom:2px solid #000; }
.conv-row:last-child{ border-bottom:none; }
.conv-head .num, .conv-row .num{ text-align:right; }
.conv-head .r{ text-align:right; }
.c-nm{ font-family:var(--ui); font-weight:700; font-size:14px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-sub{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }
.c-sub.rep{ color:var(--coin); }
.c-per{ font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-row .num{ font-family:var(--ui); font-weight:800; font-size:15px; color:var(--coin); }
.c-conv{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.sw-lbl{ font-family:var(--ui); font-weight:700; font-size:10px; color:var(--muted); }
@media (max-width:760px){
  .conv-head{ display:none; }
  .conv-row{ grid-template-columns:1fr auto; grid-auto-rows:min-content; gap:4px 10px; }
  .conv-row .num{ display:none; }
  .c-acct{ grid-column:1; } .c-type{ grid-column:1; } .c-per{ grid-column:1; font-size:12px; } .c-conv{ grid-column:2; grid-row:1/4; }
}

/* modal (convert settings) */
.overlay{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.65); display:grid; place-items:center; padding:20px; }
.modal{ width:min(460px,94vw); background:var(--panel); border:4px solid var(--coin); box-shadow:8px 8px 0 #000; padding:16px; }
.mhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mtitle{ font-family:var(--ui); font-weight:800; font-size:15px; letter-spacing:1px; color:var(--coin); }
.mx{ font-family:var(--ui); font-weight:800; font-size:12px; color:#fff; cursor:pointer; background:var(--red); border:3px solid #000; box-shadow:var(--shadow-sm); padding:5px 10px; }
.pace-opts{ display:flex; flex-direction:column; gap:8px; margin:8px 0 4px; }
.pace{ text-align:left; cursor:pointer; background:var(--stone); border:3px solid var(--ink); box-shadow:var(--shadow-sm); padding:10px 12px; color:var(--text); }
.pace b{ display:block; font-family:var(--ui); font-weight:800; font-size:14px; color:#fff; }
.pace span{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.pace.on{ background:var(--coin); } .pace.on b, .pace.on span{ color:#111; }

/* full preset editor */
.modal.wide{ width:min(920px,96vw); }
.preset-editor{ display:flex; flex-direction:column; max-height:90dvh; }
.preset-editor .mhead{ gap:10px; align-items:center; }
.pe-name{ font-size:14px; }
.pe-body{ display:grid; grid-template-columns:180px 1fr; gap:0; min-height:0; flex:1; }
.pe-nav{ display:flex; flex-direction:column; gap:6px; padding:10px 10px 10px 0; border-right:3px solid #000; overflow:auto; }
.pe-tab{ font-family:var(--ui); font-weight:700; font-size:13px; text-align:left; cursor:pointer; color:var(--bone);
  background:var(--stone); border:3px solid var(--ink); box-shadow:var(--shadow-sm); padding:9px 10px; }
.pe-tab.on{ background:var(--coin); color:#111; }
.pe-main{ padding:12px 4px 12px 14px; overflow:auto; min-height:0; }
.ef{ display:block; margin-bottom:10px; }
.ef-l{ display:block; font-family:var(--ui); font-weight:700; font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.ef-grid{ display:grid; gap:10px 14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.ef-togs{ display:flex; flex-wrap:wrap; gap:14px; margin:10px 0; }
.ef-tog{ display:inline-flex; align-items:center; gap:8px; }
.ef-tog .ef-l{ margin:0; }
.ef-item{ background:var(--panel-2); border:3px solid var(--ink); box-shadow:var(--shadow-sm); padding:10px; margin:10px 0; }
.ef-item-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ef-item-head b{ font-family:var(--ui); font-size:13px; color:var(--coin); }
@media (max-width:680px){ .pe-body{ grid-template-columns:1fr; } .pe-nav{ flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:3px solid #000; } }

/* toast */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:50;
  font-family:var(--ui); font-weight:700; font-size:13px; background:#000; color:var(--coin);
  border:4px solid var(--coin); padding:12px 16px; box-shadow:6px 6px 0 rgba(0,0,0,.6); }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:8; }

/* ---- responsive ---- */
@media (max-width:860px){
  .menu-btn{ display:inline-block; }
  .nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--bg-2);
    border-bottom:4px solid var(--coin); box-shadow:0 6px 0 #000; padding:12px; display:none; z-index:9; }
  .app.nav-open .nav{ display:flex; }
  .brand{ flex:1; }
  .nav-item{ font-size:14px; }
  .msg-cols{ grid-template-columns:1fr; }
  .subbar{ top:60px; }
  .title{ font-size:20px; }
}
@media (min-width:861px){ .scrim{ display:none !important; } }