/* ============================================================================
   MCQLab Admin — design system
   Light: editorial (warm paper, ink, antique gold)
   Dark:  luxurious (deep ink, gold primary, glass)
   ========================================================================== */
:root{
  --font-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-body:'Figtree','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;

  --bg:#F7F5F1; --surface:#FFFEFB; --surface2:#F1EDE5; --surface3:#E7E1D6;
  --line:#E7E1D6; --line2:#D6CDBC;
  --fg:#1A1712; --muted:#6B6355; --faint:#9A907E;
  --primary:#1A1712; --on-primary:#FBF9F5; --soft:rgba(26,23,18,.06);
  --gold:#A8842C; --gold-hi:#E7D3A4; --gold-bg:rgba(168,132,44,.12);
  --ok:#2F6B4A; --ok-bg:#E4EFE7; --warn:#8A5B10; --warn-bg:#F7EBD2;
  --bad:#9E3B34; --bad-bg:#F7E3E0; --info:#1F3A5F; --info-bg:#E6EBF2;
  --v1:#1F3A5F; --v2:#A8842C; --v3:#2F6B5A; --v4:#6B4E7A; --v5:#B0603F;
  --r:12px; --r-sm:9px; --r-lg:18px;
  --shadow:0 1px 2px rgba(26,23,18,.04),0 2px 8px rgba(26,23,18,.05),0 18px 40px -24px rgba(26,23,18,.20);
  --glass:rgba(255,254,251,.82); --hair:rgba(26,23,18,.08);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0B0D12; --surface:#141720; --surface2:#1B1F2B; --surface3:#252A38;
  --line:#232838; --line2:#333A4C;
  --fg:#F3F0E9; --muted:#9C958A; --faint:#6E6862;
  --primary:#D3B573; --on-primary:#17140E; --soft:rgba(211,181,115,.14);
  --gold:#D3B573; --gold-hi:#F0E0B8; --gold-bg:rgba(211,181,115,.14);
  --ok:#6FCF97; --ok-bg:rgba(111,207,151,.14); --warn:#E8C06A; --warn-bg:rgba(232,192,106,.14);
  --bad:#E8797F; --bad-bg:rgba(232,121,127,.16); --info:#8FB4E8; --info-bg:rgba(143,180,232,.14);
  --v1:#7FA8DC; --v2:#D3B573; --v3:#5FC0A0; --v4:#B49BDC; --v5:#E0885F;
  --glass:rgba(20,23,32,.76); --hair:rgba(255,255,255,.07);
  --shadow:0 1px 1px rgba(0,0,0,.5),0 16px 36px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;margin:0}
a{color:var(--gold);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--font-mono);font-size:.86em}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.tiny{font-size:.72rem} .small{font-size:.84rem}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:12px}
.spacer{flex:1}
.right{text-align:right}
.hidden{display:none!important}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.brand b{font-family:var(--font-display);font-size:1.12rem}
.mark{width:32px;height:32px;border-radius:9px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:800;font-family:var(--font-display)}
.navgrp{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px;font-weight:700}
.nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;color:var(--muted);font-weight:600;border:0;background:none;width:100%;text-align:left}
.nav:hover{background:var(--surface2);color:var(--fg)}
.nav.on{background:var(--primary);color:var(--on-primary)}
.nav .dot{margin-left:auto;background:var(--bad);color:#fff;border-radius:20px;font-size:.68rem;padding:1px 7px;font-weight:700}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:var(--glass);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 22px;display:flex;align-items:center;gap:14px}
.top h1{font-size:1.3rem}
.body{padding:22px;display:flex;flex-direction:column;gap:18px;max-width:1500px}

/* ---------- bits ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:700;background:var(--surface2);color:var(--muted)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.gold{background:var(--gold-bg);color:var(--gold)}
.pill{padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:.84rem}
.pill.on{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;transition:.15s}
.btn:hover{border-color:var(--line2)}
.btn.pri{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn.gold{background:var(--gold);color:var(--on-primary);border-color:var(--gold)}
.btn.danger{color:var(--bad);border-color:var(--bad-bg)}
.btn.xs{padding:5px 10px;font-size:.8rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.kpi b{font-family:var(--font-display);font-size:1.9rem;font-weight:600;display:block;line-height:1.15;margin:10px 0 2px}
.kpi .lbl{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.03em}
.ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--gold-bg);color:var(--gold)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.76rem;font-weight:700;color:var(--muted);letter-spacing:.03em}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:90px;resize:vertical;font-family:var(--font-mono);font-size:.85rem}
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
tr:hover td{background:var(--surface2)}
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty .disp{font-size:1.15rem;margin-bottom:6px}
.divider{height:1px;background:var(--line);margin:4px 0}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--on-primary);padding:11px 20px;border-radius:30px;font-weight:600;box-shadow:var(--shadow);z-index:60}
.scrim{position:fixed;inset:0;background:rgba(10,8,6,.5);display:grid;place-items:center;z-index:50;padding:18px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);width:min(620px,100%);max-height:88vh;overflow:auto;padding:22px}
.ov{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;padding:20px;z-index:80}
.login{width:min(400px,100%)}
.chart{display:flex;align-items:flex-end;gap:6px;height:150px}
.bar{flex:1;background:var(--gold-bg);border-radius:6px 6px 0 0;min-height:3px;position:relative}
.bar i{position:absolute;inset:auto 0 0 0;background:var(--gold);border-radius:6px 6px 0 0}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:40;transform:translateX(-100%);transition:.2s}
  .side.open{transform:none}
  .body{padding:16px}
}

/* ============================================================================
   Console additions — sections, tabs, tables, dialogs, media, distributions.
   Appended to the base design system; nothing above is changed.
   ========================================================================== */

/* ---------- section scaffolding ---------- */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pagehead .lead{color:var(--muted);font-size:.88rem;max-width:70ch}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto}
.toolbar .grow{flex:1;min-width:180px}
.toolbar input.grow{width:100%}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:2px}
.tab{padding:8px 14px;border-radius:var(--r-sm) var(--r-sm) 0 0;border:1px solid transparent;border-bottom:0;
  background:none;cursor:pointer;font-weight:600;color:var(--muted)}
.tab:hover{color:var(--fg);background:var(--surface2)}
.tab.on{color:var(--fg);background:var(--surface);border-color:var(--line);box-shadow:0 -1px 0 var(--gold) inset}
.tab .dot{margin-left:7px;background:var(--bad);color:#fff;border-radius:20px;font-size:.68rem;padding:0 6px}

/* ---------- cards & grids ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card h2{font-size:1.05rem}
.card h3{font-size:.92rem;color:var(--muted);letter-spacing:.02em}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}

/* ---------- key/value + stats ---------- */
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:6px 16px;font-size:.9rem}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0}
.stat{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);border-radius:var(--r)}
.stat b{font-family:var(--font-display);font-size:1.35rem}
.stat .lbl{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}

/* ---------- table extras ---------- */
table.mini td,table.mini th{padding:7px 10px;font-size:.84rem}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.mono,.mono{font-family:var(--font-mono)}
.tag{display:inline-block;padding:1px 8px;border-radius:20px;background:var(--surface2);color:var(--muted);
  font-size:.72rem;font-weight:600;margin:0 4px 3px 0;white-space:nowrap}
.tag.gold{background:var(--gold-bg);color:var(--gold)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.dotsep{color:var(--faint);padding:0 6px}
.clip{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--gold-bg);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
input[type=checkbox]{width:auto;accent-color:var(--gold)}

/* ---------- distribution bars ---------- */
.dist{display:flex;flex-direction:column;gap:8px}
.dist .rowline{display:grid;grid-template-columns:26px 1fr 64px;align-items:center;gap:10px}
.dist .track{background:var(--surface2);border-radius:20px;height:12px;overflow:hidden}
.dist .fill{height:100%;background:var(--gold);border-radius:20px}
.dist .fill.key{background:var(--ok)}
.dist .fill.zero{background:var(--bad)}

/* ---------- notes / alerts ---------- */
.note{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--surface2);
  border-radius:var(--r-sm);padding:10px 13px;font-size:.86rem;color:var(--muted)}
.note.warn{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.note.bad{border-left-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.note.ok{border-left-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.code{font-family:var(--font-mono);font-size:.8rem;background:var(--surface2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px;white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto}

/* ---------- media ---------- */
.thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:var(--surface2);display:block}
.typeicon{width:52px;height:52px;border-radius:10px;display:grid;place-items:center;background:var(--surface2);
  border:1px solid var(--line);font-weight:800;font-size:.68rem;letter-spacing:.04em;color:var(--muted)}
.drop{border:1.5px dashed var(--line2);border-radius:var(--r);padding:20px;text-align:center;color:var(--muted);background:var(--surface2)}
.problist{display:flex;flex-direction:column;gap:8px}
.prob{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:start;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px}
.prob .sev{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;
  border-radius:20px;justify-self:start}
.prob .sev.error{background:var(--bad-bg);color:var(--bad)}
.prob .sev.warn{background:var(--warn-bg);color:var(--warn)}
.prob .sev.info{background:var(--info-bg);color:var(--info)}

/* ---------- modal ---------- */
.modal.wide{width:min(920px,100%)}
.modal.xwide{width:min(1120px,100%)}
.modal h2{font-size:1.15rem}
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}

/* ---------- picker / builder ---------- */
.qrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.qrow .ord{font-family:var(--font-mono);color:var(--faint);width:34px}
.qrow .stem{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow.flag{border-color:var(--bad);background:var(--bad-bg)}
.qrow .stem.flag{color:var(--bad);font-weight:600}

/* ============================================================================
   Question block editor + media picker + preview.
   Appended to the console additions; nothing above is changed.
   ========================================================================== */

/* ---------- editor scaffolding ---------- */
.qed{display:flex;flex-direction:column;gap:16px}
.qed-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.qed-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.qed-sec{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface)}
.qed-sec h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700}
.bklist{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.bkrow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.bkrow .field{min-width:120px}
.bkrow .field input,.bkrow .field textarea{min-width:0}
.bk-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bk-chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 4px 2px 8px}
.bk-chip input{width:120px;border:0;background:transparent;padding:4px}
.bk-edit td,.bk-edit th{padding:4px 6px}
.bk-edit input{width:100%;min-width:70px}
.bk-edit input[type=checkbox]{width:auto}
.bk-edit tr.hl td{background:var(--gold-bg)}

/* ---------- a block card ---------- */
.bkcard{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.bkcard.bad{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad) inset}
.bkhead{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.bkhead select{width:auto}
.bktag{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);background:var(--gold-bg);padding:3px 9px;border-radius:20px;white-space:nowrap}
.bkbody{padding:12px;display:flex;flex-direction:column;gap:10px}
.bk-err{margin-top:8px;border-left:3px solid var(--bad);background:var(--bad-bg);color:var(--bad);border-radius:var(--r-sm);padding:8px 10px;font-size:.82rem;font-family:var(--font-mono)}

/* ---------- media control ---------- */
.bk-media{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-media input{flex:1;min-width:160px}
.bk-media-thumb{flex:none}
.bk-media-thumb .thumb,.bk-media-thumb .typeicon{width:44px;height:44px}

/* ---------- live preview ---------- */
.bk-preview{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--bg);margin-top:10px;max-height:70vh;overflow:auto}
.bk-pv-sec{margin-bottom:16px}
.bk-pv-sec:last-child{margin-bottom:0}
.bk-pv-sec>.tiny{letter-spacing:.08em;font-weight:700;margin-bottom:6px}
.bk-p,.bk-list,.bk-ref,.bk-co{font-size:.92rem}
.bk-p{margin:.4em 0}
.bk-list{margin:.4em 0;padding-left:1.2em}
.bk-list ul{padding-left:1.1em;margin:.2em 0}
.bk-tblwrap{overflow-x:auto;margin:8px 0}
.bk-tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.bk-tbl th,.bk-tbl td{border:1px solid var(--line);padding:6px 9px;text-align:left}
.bk-tbl th{background:var(--surface2)}
.bk-tbl tr.hl td{background:var(--gold-bg);font-weight:600}
.bk-cap{font-size:.78rem;color:var(--muted);margin-top:4px}
.bk-fig{margin:8px 0;display:flex;flex-direction:column;gap:6px}
.bk-fig img,.bk-fig video{max-width:100%;border-radius:var(--r-sm);border:1px solid var(--line)}
.bk-grid{display:grid;gap:8px;margin:8px 0}
.bk-grid figure{margin:0}
.bk-grid img{width:100%;border-radius:var(--r-sm);border:1px solid var(--line)}
.bk-flow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;align-items:center}
.bk-flow.col{flex-direction:column;align-items:stretch}
.bk-node{border:1px solid var(--line2);border-radius:20px;padding:6px 12px;font-size:.82rem;background:var(--surface);text-align:center}
.bk-node.start{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.bk-node.end{background:var(--info-bg);border-color:var(--info);color:var(--info)}
.bk-node.decision{background:var(--warn-bg);border-color:var(--warn);color:var(--warn);border-radius:8px}
.bk-edges{margin-top:4px}
.bk-co{border-left:3px solid var(--gold);background:var(--surface2);border-radius:var(--r-sm);padding:8px 12px;margin:6px 0}
.bk-co.info{border-left-color:var(--info);background:var(--info-bg);color:var(--info)}
.bk-co.tip{border-left-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.bk-co.warn{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.bk-ref ul{margin:.2em 0;padding-left:1.2em}
.bk-ph{border:1px dashed var(--line2);border-radius:var(--r-sm);padding:10px;text-align:center;color:var(--faint);font-size:.82rem}

/* ---------- media picker overlay ---------- */
.bk-picker{z-index:70}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:52vh;overflow:auto}
.pk-item{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:8px;cursor:pointer;text-align:left}
.pk-item:hover{border-color:var(--gold)}
.pk-item .thumb,.pk-item .typeicon{width:100%;height:80px;object-fit:cover}
.pk-name{font-size:.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

@media (max-width:1100px){ .qed-cols{grid-template-columns:1fr} }

/* ============================================================================
   Template sample — the blank import template shown inline in the Import panel.
   Appended to the console additions; nothing above is changed.
   ========================================================================== */
.tpl-sample{margin-top:10px}
.tpl-sec{margin-top:14px}
.tpl-sec>.tiny{letter-spacing:.08em;font-weight:700;margin-bottom:6px}
.tpl-head{margin:0;padding-left:1.2em;font-size:.86rem;color:var(--muted)}
.tpl-head li{margin:2px 0}
.tpl-head .mono{color:var(--fg)}
.tpl-card{margin-top:10px;box-shadow:none}
.tpl-card .cardhead{margin-bottom:8px}
.tpl-opts{margin:6px 0;padding-left:1.4em;font-size:.9rem}
.tpl-opts li{margin:3px 0}
.tpl-opts li.ok{font-weight:700;color:var(--ok)}
.tpl-ok{margin-left:8px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:var(--ok-bg);color:var(--ok);padding:1px 7px;border-radius:20px;white-space:nowrap}
.tpl-legend{display:flex;flex-direction:column;gap:8px}
.tpl-leg{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;background:var(--surface)}
.tpl-code{max-height:180px;margin-top:6px}
/* Passage groups (grouped / case-based questions) */
.tpl-group{border-left:3px solid var(--gold)}
.tpl-gtitle{font-weight:700;margin:2px 0 8px;font-size:.95rem}
.tpl-sub{border-top:1px dashed var(--line);padding-top:10px;margin-top:10px}
.tpl-sub:first-child{border-top:0;padding-top:0;margin-top:0}
.bk-gtitle{font-weight:700;margin:2px 0 8px}
@media (max-width:640px){
  .tpl-card .cardhead{flex-direction:column;align-items:flex-start;gap:8px}
  .tpl-head{padding-left:1em}
}

/* ---- file drop zone (bulk import) --------------------------------------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 26px 18px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 14px; background: var(--surface);
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--primary); }
.dropzone.over { border-color: var(--primary); background: var(--surface2); }
.dropzone .dz-icon { font-size: 22px; color: var(--muted); line-height: 1; }
.dropzone .dz-main { font-size: 14px; color: var(--fg); }
.dropzone .dz-sub { font-size: 11.5px; color: var(--muted); max-width: 46ch; }

.navbuild { margin-top: auto; padding: 12px 14px 4px; font-size: 10.5px; color: var(--faint, var(--muted)); letter-spacing: .02em; }