/* =====================================================================
   SMart Build studio admin - shared styles.
   Copied from docs/mockups/v5/admin/admin.css (approved mockup); additions
   for the Django pages are at the end ("Studio admin additions").
   ---------------------------------------------------------------------
   SMart Build admin (v5 mockup) - shared styles
   Tokens: copied from ../baltic-power.html (v5 prototype).
   Structure borrowed from dashboard/templates/dashboard/panel/base.html
   (pnl-shell / pnl-sidebar / pnl-topbar / pnl-card / pnl-stat / pnl-table /
   pnl-badge / pnl-modal / pnl-toast / pnl-empty), restyled flat: plain fills,
   no shadows beyond menus and dialogs. Navy brand #0c3c60 kept for the sidebar.
   ===================================================================== */
:root{
  --head:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --font:"Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:#E6EDF4; --glass:#FFFFFF; --glass2:#F4F7FA; --ink:#0D1B2E; --muted:#3B4E6B; --faint:#5E7090;
  --line:rgba(13,27,46,.10); --line2:rgba(13,27,46,.18); --accent:#0062BB; --chip:rgba(13,27,46,.06);
  --ok:#0E9F8A; --ok-ink:#0B7A6A; --warn:#E08A00; --warn-ink:#B45309; --bad:#E5484D; --brand:#0062BB; --brand2:#0053AA; --sus:#D92D20; --sus-ink:#B42318;
  --info-ink:#0053AA; --mock-ink:#6B4A00; --mock-bg:#FFF4D6; --mock-line:#C98A00;
  /* sidebar: panel navy, flat */
  --nav:#0C3C60; --nav2:#0A3352; --nav-ink:#FFFFFF; --nav-mut:rgba(255,255,255,.74); --nav-sec:rgba(255,255,255,.66); --nav-hi:rgba(255,255,255,.12); --nav-bar:#7CC4FF;
  --side:236px; --top:60px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070B14; --glass:#0E1528; --glass2:#162038; --ink:#EEF3FF; --muted:#98A6C6; --faint:#8492B4;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18); --accent:#3B9BE0; --chip:rgba(255,255,255,.07);
  --ok:#2CC5AE; --ok-ink:#5EE3CC; --warn:#F5A524; --warn-ink:#FBBF24; --bad:#F2555A; --brand:#3B9BE0; --brand2:#0062BB; --sus:#FF6B6B; --sus-ink:#FF8A8A;
  --info-ink:#8CC8FF; --mock-ink:#FFD98A; --mock-bg:rgba(245,165,36,.12); --mock-line:#B07A12;
  --nav:#0A1730; --nav2:#081226; --nav-hi:rgba(255,255,255,.09);
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#070B14; --glass:#0E1528; --glass2:#162038; --ink:#EEF3FF; --muted:#98A6C6; --faint:#8492B4;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18); --accent:#3B9BE0; --chip:rgba(255,255,255,.07);
  --ok:#2CC5AE; --ok-ink:#5EE3CC; --warn:#F5A524; --warn-ink:#FBBF24; --bad:#F2555A; --brand:#3B9BE0; --brand2:#0062BB; --sus:#FF6B6B; --sus-ink:#FF8A8A;
  --info-ink:#8CC8FF; --mock-ink:#FFD98A; --mock-bg:rgba(245,165,36,.12); --mock-line:#B07A12;
  --nav:#0A1730; --nav2:#081226; --nav-hi:rgba(255,255,255,.09);
  color-scheme:dark;}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;min-height:100vh}
button,input,select,textarea{font-family:inherit;color:inherit;font-size:inherit}
h1,h2,h3,h4{font-family:var(--head);margin:0;font-weight:600}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:80;background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:999px;font-weight:700;font-size:12.5px;text-decoration:none}
.skip:focus{top:10px}
code,.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ── Shell (pnl-shell) ─────────────────────────────────────────────── */
.shell{display:flex;min-height:100vh}
.side{width:var(--side);flex:none;background:var(--nav);color:var(--nav-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40;transition:width .2s ease}
.brand{height:var(--top);display:flex;align-items:center;gap:11px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.10);color:#fff;text-decoration:none;flex:none}
.brand .mk{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#fff;color:#0C3C60;font-family:var(--head);font-weight:700;font-size:13px;flex:none}
.brand b{font-family:var(--head);font-weight:600;font-size:16px;white-space:nowrap}
.brand small{display:block;font-size:11px;color:var(--nav-mut);font-weight:600;letter-spacing:.02em}
.nav{flex:1;overflow-y:auto;padding:6px 0 12px}
.nav-sec{padding:16px 18px 5px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--nav-sec);white-space:nowrap}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 18px;color:var(--nav-mut);text-decoration:none;position:relative;white-space:nowrap;font-weight:600;font-size:13.5px}
.nav a:hover{background:var(--nav-hi);color:#fff}
.nav a[aria-current="page"]{background:var(--nav-hi);color:#fff}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--nav-bar)}
.nav a:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.nav .cnt{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#fff;color:#0C3C60;font-size:11px;font-weight:700;display:grid;place-items:center}
.nav .ext{margin-left:auto;opacity:.8}
.side-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.10);font-size:11.5px;color:var(--nav-mut);line-height:1.4}
.side-foot b{color:#fff}
/* desktop collapse to icons (panel's .pnl-sidebar.collapsed) */
body.side-min{--side:66px}
body.side-min .brand b,body.side-min .nav-sec,body.side-min .nav .lbl,body.side-min .nav .cnt,body.side-min .nav .ext,body.side-min .side-foot{display:none}
body.side-min .nav a{justify-content:center;padding:11px 0}
body.side-min .brand{justify-content:center;padding:0}

.col{flex:1;min-width:0;display:flex;flex-direction:column}
/* ── Topbar (pnl-topbar) ───────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;min-height:var(--top);padding:10px 20px;background:var(--glass);border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb strong{color:var(--ink);font-family:var(--head);font-weight:600;font-size:16px}
.spacer{flex:1}
.pswitch{display:flex;align-items:center;gap:6px}
.pswitch label{font-size:12px;font-weight:700;color:var(--muted)}
.sel,.inp{height:36px;border-radius:10px;border:1px solid var(--line2);background:var(--glass);padding:0 10px;min-width:0}
.sel{padding-right:6px}
.inp::placeholder{color:var(--faint)}
textarea.inp{height:auto;padding:8px 10px;resize:vertical;min-height:72px;width:100%}
.btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line2);background:var(--glass);font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{background:var(--glass2)}
.btn svg.i{width:16px;height:16px}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand2)}
:root[data-theme="dark"] .btn.primary{color:#06121f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{color:#06121f}}
.btn.danger{color:var(--sus-ink);border-color:color-mix(in srgb,var(--sus) 45%,transparent)}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.btn.icon{width:36px;padding:0;justify-content:center}
.btn.sm.icon{width:30px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.btn:disabled:hover{background:var(--glass)}
.ubtn{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 4px;border-radius:999px;border:1px solid var(--line2);background:var(--glass);cursor:pointer;font-weight:700}
.ubtn .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0C3C60;color:#fff;font-size:11px;font-weight:700}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:236px;background:var(--glass);border:1px solid var(--line2);border-radius:12px;padding:6px;z-index:60;box-shadow:0 8px 24px rgba(7,11,20,.16)}
.menu .mh{padding:8px 10px 6px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px}
.menu .mh b{display:block;color:var(--ink);font-size:13px}
.menu a,.menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:8px;border:0;background:none;text-align:left;text-decoration:none;color:var(--ink);font-weight:600;cursor:pointer}
.menu a:hover,.menu button:hover,.menu a:focus-visible,.menu button:focus-visible{background:var(--chip)}
.menu button:disabled{opacity:.6;cursor:not-allowed}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.hamb{display:none}

main{padding:20px 22px 48px;max-width:1440px;width:100%;outline:none}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ph h1{font-size:22px;line-height:1.25}
.ph p{margin:4px 0 0;color:var(--muted);max-width:760px}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ── Banners / labels ─────────────────────────────────────────────── */
.banner{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--glass);margin-bottom:14px;font-weight:600}
.banner svg.i{margin-top:1px}
.banner.warn{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--glass));color:var(--ink)}
.banner.warn svg.i{color:var(--warn-ink)}
.banner.info svg.i{color:var(--accent)}
.banner.mock{border:1px dashed var(--mock-line);background:var(--mock-bg);color:var(--mock-ink)}
.banner p{margin:2px 0 0;font-weight:500;color:var(--muted)}
.banner.mock p{color:inherit}
.mock{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;border:1px dashed var(--mock-line);background:var(--mock-bg);color:var(--mock-ink);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.real{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;border:1px solid var(--line2);color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.flag{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:10px;border:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent);color:var(--warn-ink);font-weight:700;font-size:12.5px}
.why{font-size:12px;color:var(--muted);font-weight:600}

/* ── Cards / KPIs (pnl-card, pnl-stat) ────────────────────────────── */
.card{background:var(--glass);border:1px solid var(--line);border-radius:14px;margin-bottom:16px;min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:15.5px}
.card-h h2 small{font-family:var(--font);font-weight:600;font-size:12px;color:var(--muted);margin-left:6px}
.card-b{padding:14px 16px}
.card-b .note{margin:0;color:var(--muted);font-size:12.5px}
.card-b .note b{color:var(--ink)}
.vw-intro,#sec-profiles>.card-b{display:flex;flex-direction:column;gap:12px;align-items:stretch}
#sec-profiles>.card-b>*{max-width:100%}
#sec-profiles .empty{padding:18px 12px}
#sec-profiles details.card{margin:0!important;padding:0}
#sec-profiles details.card>summary{padding:11px 14px;cursor:pointer;border-radius:14px}
#sec-profiles details.card>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#sec-profiles details.card>form,#sec-profiles details.card>.acts{padding:4px 14px 14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#sec-profiles details.card>.acts{flex-direction:row;padding-top:0}
#sec-profiles .cbs{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0;min-width:0;align-self:stretch}
#sec-profiles .cbs legend{font-weight:700;font-size:12.5px;padding:0 6px}
#sec-profiles .cb{display:inline-flex;align-items:center;gap:6px;margin:3px 14px 3px 0;font-size:13px}
.t .act .sub{white-space:normal;text-align:right}
.card-f{padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid2>.card,.grid3>.card{margin-bottom:0}
.stack{display:flex;flex-direction:column;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);position:relative}
a.kpi:hover{border-color:var(--line2);background:var(--glass2)}
.kpi .k{font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi .k i{width:9px;height:9px;border-radius:3px;background:var(--c,var(--accent));flex:none}
.kpi .v{font-family:var(--head);font-size:28px;font-weight:600;line-height:1.15}
.kpi .v small{font-size:14px;color:var(--muted);font-weight:500}
.kpi .s{font-size:12px;color:var(--muted)}
.kpi .mock{position:absolute;right:10px;top:10px}
.meter{display:block;height:8px;border-radius:999px;background:var(--chip);overflow:hidden;margin-top:6px;border:1px solid var(--line)}
.meter i{display:block;height:100%;background:var(--c,var(--accent))}
.seg{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--chip);margin:8px 0 6px}
.seg i{display:block;height:100%;background:var(--c)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);font-weight:600}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}

/* ── Filters (pnl-filter-*) ───────────────────────────────────────── */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters .sel,.filters .inp{height:32px;font-size:13px}
.filters .inp{width:200px}
.seg-b{display:inline-flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden;background:var(--glass)}
.seg-b button{height:30px;padding:0 12px;border:0;background:none;font-weight:700;font-size:12.5px;cursor:pointer;color:var(--muted)}
.seg-b button+button{border-left:1px solid var(--line2)}
.seg-b button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.chk{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;color:var(--muted);cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--accent)}
.count{font-size:12px;color:var(--muted);font-weight:600}

/* ── Table (pnl-table) ────────────────────────────────────────────── */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
.t th{position:sticky;top:0;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--glass2);padding:9px 12px;border-bottom:1px solid var(--line2);white-space:nowrap}
.t th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.t th button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.t th[aria-sort] button::after{content:"";width:0;height:0;border:4px solid transparent;margin-left:2px}
.t th[aria-sort="ascending"] button::after{border-bottom-color:currentColor;margin-top:-4px}
.t th[aria-sort="descending"] button::after{border-top-color:currentColor;margin-top:4px}
.t td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.t tbody tr:hover td{background:color-mix(in srgb,var(--chip) 70%,transparent)}
.t tbody tr:last-child td{border-bottom:0}
.t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t .act{text-align:right;white-space:nowrap}
.t .act .btn+.btn{margin-left:4px}
.t .sub{display:block;font-size:12px;color:var(--muted)}
.t .nw{white-space:nowrap}
.t td.err{color:var(--sus-ink);font-size:12.5px;max-width:280px}
.t tr.done td{opacity:.62}
.t caption{text-align:left;padding:0 0 8px;font-weight:700;color:var(--muted);font-size:12px}
.empty{padding:36px 20px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-family:var(--head);font-size:16px;font-weight:600;margin-bottom:4px}

/* ── Badges (pnl-badge) ───────────────────────────────────────────── */
.b{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;background:color-mix(in srgb,var(--bc) 13%,transparent);color:var(--bi);border:1px solid color-mix(in srgb,var(--bc) 35%,transparent)}
.b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bc)}
.b.ok{--bc:var(--ok);--bi:var(--ok-ink)}
.b.warn{--bc:var(--warn);--bi:var(--warn-ink)}
.b.bad{--bc:var(--sus);--bi:var(--sus-ink)}
.b.info{--bc:var(--accent);--bi:var(--info-ink)}
.b.neutral{--bc:var(--faint);--bi:var(--muted)}
.b.bad::before{border-radius:1px;transform:rotate(45deg)}
.b.warn::before{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);width:8px;height:7px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;background:var(--chip);font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line2);vertical-align:-2px;background:var(--c)}
.yes{color:var(--ok-ink);font-weight:700}
.no{color:var(--muted)}
.tick{display:inline-flex;align-items:center;gap:4px;font-weight:700}

/* ── Lists ────────────────────────────────────────────────────────── */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);align-items:start}
.feed li:last-child{border-bottom:0}
.feed .dot{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--c,var(--accent))}
.feed .w{font-weight:600}
.feed .w small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.feed time{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:600}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.qlink{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--glass)}
.qlink:hover{background:var(--glass2);border-color:var(--line2)}
.qlink svg.i{color:var(--accent);margin-top:2px}
.qlink b{display:block;font-family:var(--head);font-weight:600}
.qlink span{font-size:12px;color:var(--muted)}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
dl.kv dt{color:var(--muted);font-weight:700;font-size:12.5px}
dl.kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}

/* ── Embedded frame ───────────────────────────────────────────────── */
.frame{border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--glass)}
.frame iframe{display:block;width:100%;height:72vh;min-height:480px;border:0;background:var(--bg)}
.frame-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:600}
.frame-bar code{color:var(--ink)}

/* ── Dialog (pnl-modal) ───────────────────────────────────────────── */
dialog.dlg{border:1px solid var(--line2);border-radius:16px;padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px);background:var(--glass);color:var(--ink);box-shadow:0 20px 60px rgba(7,11,20,.28)}
dialog.dlg.wide{width:min(760px,calc(100vw - 24px))}
dialog.dlg::backdrop{background:rgba(7,11,20,.5)}
.dlg form{display:flex;flex-direction:column;max-height:calc(100vh - 42px)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px 12px;border-bottom:1px solid var(--line)}
.dlg-h h2{font-size:17px}
.dlg-b{padding:16px 18px;overflow-y:auto}
.dlg-f{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line)}
.dlg-f .note{margin-right:auto;font-size:12px;color:var(--muted);font-weight:600}
.fg{margin-bottom:13px}
.fg>label,.fg>.lb{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px}
.fg .inp,.fg .sel{width:100%}
.fg .hint{font-size:12px;color:var(--muted);margin-top:4px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
fieldset.fs{border:1px solid var(--line2);border-radius:12px;padding:12px 14px 4px;margin:0 0 13px}
fieldset.fs legend{padding:0 6px;font-weight:700;font-size:12.5px;color:var(--muted)}
fieldset.fs.lock{border-color:var(--warn);border-style:dashed}
fieldset.fs .flag{margin-bottom:12px}
.inp:disabled,.sel:disabled{opacity:.7;cursor:not-allowed;background:var(--glass2)}

/* Template choice options (W-2; from docs/mockups/v5/maps.html) */
.dsub{margin:0 0 12px;color:var(--muted);font-size:12.5px}
.opts{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0;min-width:0}
.opts legend{font-weight:700;font-size:13px;margin-bottom:4px;padding:0}
.opt{display:grid;grid-template-columns:20px 1fr;gap:4px 8px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;cursor:pointer}
.opt:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.opt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.opt:has(input:disabled){cursor:not-allowed;background:var(--glass2)}
.opt:has(input:disabled) .on{color:var(--muted)}
.opt input{margin:3px 0 0;accent-color:var(--brand)}
.opt .on{font-weight:700}
.opt .od{grid-column:2;font-size:12px;color:var(--muted)}
.opt .why{grid-column:2;font-size:12px;font-weight:700;color:var(--warn-ink)}
.opt .cur{font-size:11px;font-weight:700;color:var(--ok-ink);margin-left:6px}
.callout{margin:12px 0 0;padding:10px 12px;border-radius:12px;border:1px solid var(--warn);color:var(--ink);font-size:12.5px}
.callout.info{border-color:var(--line2);color:var(--muted)}

/* ── Toast (pnl-toast) ────────────────────────────────────────────── */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:90}
.toast{background:var(--ink);color:var(--bg);padding:11px 15px;border-radius:12px;font-weight:600;font-size:13px;max-width:340px;box-shadow:0 6px 20px rgba(7,11,20,.25);display:flex;gap:9px;align-items:flex-start;animation:tin .18s ease-out}
.toast .mock{flex:none}
@keyframes tin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ── Questions ───────────────────────────────────────────────────── */
.q{border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:0}
.q summary{list-style:none;display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:start;padding:12px 16px;cursor:pointer}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{background:var(--glass2)}
.q .qid{font-family:var(--head);font-weight:600;font-size:16px;color:var(--accent)}
.q .qt{font-weight:700}
.q .qt small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.q .qb{padding:0 16px 14px 82px}
.q .qb h4{font-family:var(--font);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:10px 0 3px}
.q .qb p,.q .qb pre{margin:0;white-space:pre-wrap;font-family:inherit}
.q .ans{border-left:3px solid var(--ok);padding-left:10px}
.q .ans.none{border-left-color:var(--warn)}

/* ── Responsive: sidebar becomes a drawer (panel's mobile-open) ─── */
.scrim{display:none}
@media (max-width:1100px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:960px){
  body{--side:264px}
  body.side-min{--side:264px}
  body.side-min .brand b,body.side-min .nav-sec,body.side-min .nav .lbl,body.side-min .nav .cnt,body.side-min .nav .ext,body.side-min .side-foot{display:revert}
  body.side-min .nav a{justify-content:flex-start;padding:9px 18px}
  .side{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s ease;visibility:hidden}
  body.drawer .side{transform:none;visibility:visible}
  body.drawer .scrim{display:block;position:fixed;inset:0;background:rgba(7,11,20,.5);z-index:35}
  .hamb{display:inline-flex}
  .colbtn{display:none!important}
  .grid2,.grid3{grid-template-columns:1fr}
}
@media (max-width:680px){
  .top{flex-wrap:wrap;padding:8px 12px;gap:8px}
  .crumb{flex:1}
  .pswitch{order:10;flex:1 1 100%}
  .pswitch .sel{flex:1}
  .ubtn .nm{display:none}
  main{padding:14px 12px 40px}
  .ph h1{font-size:19px}
  .filters .inp{flex:1 1 100%;width:auto}
  .frow{grid-template-columns:1fr}
  .q .qb{padding-left:16px}
  .q summary{grid-template-columns:44px 1fr}
  .q summary .b{grid-column:2;justify-self:start}
  .frame iframe{height:64vh;min-height:380px}
  .t.stack-sm thead{display:none}
  .t.stack-sm,.t.stack-sm tbody,.t.stack-sm tr,.t.stack-sm td{display:block;width:100%}
  .t.stack-sm tr{border-bottom:1px solid var(--line2);padding:6px 0}
  .t.stack-sm td{border:0;padding:4px 14px;display:flex;gap:10px;justify-content:space-between;text-align:right}
  .t.stack-sm td::before{content:attr(data-l);font-weight:700;color:var(--muted);font-size:12px;text-align:left;flex:none}
  .t.stack-sm td.act{justify-content:flex-end}
  .t.stack-sm td.act::before{content:none}
  .toasts{left:12px;right:12px;bottom:12px}
}

/* ── Studio admin additions (Django pages) ────────────────────────── */
.nav a.off{opacity:.55;cursor:not-allowed}
.nav a.off:hover{background:none;color:var(--nav-mut)}
.nav .soon{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:0 5px}
body.side-min .nav .soon{display:none}
.side-foot{display:flex;flex-direction:column;gap:2px;padding:8px 0}
.foot-link{display:flex;align-items:center;gap:11px;padding:8px 18px;color:var(--nav-mut);text-decoration:none;font-weight:600;font-size:13px}
.foot-link:hover{background:var(--nav-hi);color:#fff}
.foot-link:focus-visible{outline:2px solid #fff;outline-offset:-3px}
body.side-min .side-foot{display:flex}
body.side-min .side-foot .lbl{display:none}
body.side-min .foot-link{justify-content:center;padding:10px 0}
.msgs{margin-bottom:6px}
.inl{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.inl .inp{height:30px;font-size:12.5px}
.inp.short,.inp.col{height:30px;width:110px;font-size:12.5px}
.nav .lbl{overflow:hidden;text-overflow:ellipsis;min-width:0}
.nav .soon{flex:none}
.pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:600}
.pager .spacer{flex:1}
.lock-note{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--warn-ink);font-weight:700}
.lock-note svg.i{width:14px;height:14px}
.err-page{max-width:560px;margin:12vh auto;padding:0 16px}
.err-page .card-b p{margin:0 0 12px;color:var(--muted)}
@media (max-width:680px){
  .t.stack-sm td{flex-wrap:wrap;overflow-wrap:anywhere}
  .t.stack-sm td>*{min-width:0}
  .t.stack-sm td .sub{flex-basis:100%;text-align:right}
  .card-h .filters{width:100%}
  .crumb{min-width:0}
}

/* UI-5: Overview layout, selectable rows */
.ov-grid{grid-template-columns:minmax(0,1fr) minmax(380px,34%);align-items:start}
.ov-grid .tw{overflow-x:auto;max-width:100%}
.ov-grid .t .act{white-space:nowrap;position:sticky;right:0;background:var(--glass)}
.ov-grid .dchip{display:inline-block;border:1px solid currentColor;border-radius:9px;padding:0 6px;margin-left:4px;white-space:normal;overflow-wrap:anywhere}
.ov-grid .kv dd{overflow-wrap:anywhere;min-width:0}
.ov-grid .filters{display:flex;flex-wrap:wrap;gap:8px}
.ov-row{cursor:pointer}
.ov-row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ov-row.is-sel{background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.ov-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:1100px){.ov-grid{grid-template-columns:1fr}}
.ov-row:hover .act{background:color-mix(in srgb,var(--accent) 8%,var(--glass))}
.ov-row.is-sel .act{background:color-mix(in srgb,var(--accent) 16%,var(--glass))}