:root{
  --ground:#F5F2EE; --surface:#FFFFFF; --surface-2:#EFEBE4;
  --ink:#1A1A2E; --body:#3B3B4D; --muted:#7A7A88; --line:#E2DCD2;
  --jade:#2D7D6F; --jade-lys:#4BA898; --jade-soft:#E4F0ED;
  --peach:#FFB693; --amber:#C98A2B; --crit:#C0553F;
  --shadow:0 1px 2px rgba(26,26,46,.05), 0 8px 24px rgba(26,26,46,.06);
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#121220; --surface:#1C1C30; --surface-2:#232340;
    --ink:#F1EEE9; --body:#BEC9C5; --muted:#7E8A92; --line:#2C2C48;
    --jade:#4BA898; --jade-lys:#6FC7B7; --jade-soft:#1E3A36;
    --peach:#FFB693; --amber:#E0A94E; --crit:#E07A62;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ground:#121220; --surface:#1C1C30; --surface-2:#232340;
  --ink:#F1EEE9; --body:#BEC9C5; --muted:#7E8A92; --line:#2C2C48;
  --jade:#4BA898; --jade-lys:#6FC7B7; --jade-soft:#1E3A36; --peach:#FFB693;
  --amber:#E0A94E; --crit:#E07A62;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --ground:#F5F2EE; --surface:#FFFFFF; --surface-2:#EFEBE4;
  --ink:#1A1A2E; --body:#3B3B4D; --muted:#7A7A88; --line:#E2DCD2;
  --jade:#2D7D6F; --jade-lys:#4BA898; --jade-soft:#E4F0ED; --peach:#FFB693;
  --amber:#C98A2B; --crit:#C0553F;
  --shadow:0 1px 2px rgba(26,26,46,.05), 0 8px 24px rgba(26,26,46,.06);
}
*{box-sizing:border-box}
/* hidden-attributten SKAL vinde over klasse-display (.gate/.loading sætter display) */
[hidden]{display:none !important}
body{margin:0;background:var(--ground);color:var(--body);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
button{font-family:inherit}

/* GATE */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:var(--ground)}
.gate-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:34px 30px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px;text-align:center}
.gate-card .mark{width:48px;height:48px;border-radius:13px;background:linear-gradient(150deg,var(--jade),var(--jade-lys));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:22px;margin:0 auto 4px}
.gate-card h1{font-size:20px}
.gate-card p{margin:0;font-size:13.5px;color:var(--muted)}
.gate-card input{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--ground);
  color:var(--ink);font-size:15px;margin-top:4px}
.gate-card input:focus{outline:2px solid var(--jade);outline-offset:1px;border-color:var(--jade)}
.gate-card button{padding:12px 14px;border:0;border-radius:10px;background:var(--ink);color:var(--ground);
  font-weight:600;font-size:15px;cursor:pointer;transition:opacity .15s}
.gate-card button:hover{opacity:.9}
.gate-card button:disabled{opacity:.5;cursor:default}
.gate-err{color:var(--crit);font-size:13px}
.gate-foot{font-size:11.5px;color:var(--muted);margin-top:2px}

/* LOADING */
.loading{position:fixed;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;background:var(--ground)}
.loading p{color:var(--muted);font-size:14px}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--jade);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}

/* LAYOUT */
.wrap{max-width:1180px;margin:0 auto;padding:26px 22px 64px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.brand{display:flex;align-items:center;gap:13px}
.brand .mk{width:42px;height:42px;border-radius:11px;background:linear-gradient(150deg,var(--jade),var(--jade-lys));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:19px;flex:none;box-shadow:var(--shadow)}
.brand h1{font-size:20px;font-weight:700}
.brand .sub{font-size:12.5px;color:var(--muted)}
.meta{font-size:12px;color:var(--muted);text-align:right}
.meta .fresh{display:inline-flex;align-items:center;gap:6px}
.meta .dot{width:8px;height:8px;border-radius:50%;background:var(--jade)}
.meta .back{display:block;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--jade);text-decoration:none}
.meta .back:hover{text-decoration:underline}
.lead{color:var(--muted);font-size:13.5px;margin:12px 0 20px;max-width:74ch}

.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px 14px;box-shadow:var(--shadow)}
.kpi .lab{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .big{font-size:24px;font-weight:700;color:var(--ink);margin-top:6px;letter-spacing:-.02em}
.kpi .big small{font-size:13px;font-weight:600;color:var(--muted)}
.kpi .foot{font-size:12px;margin-top:5px;color:var(--muted)}
.kpi .foot b{color:var(--jade)}

.grid{display:grid;gap:16px;margin-bottom:16px}
.g2{grid-template-columns:1.55fr 1fr}
.g2b{grid-template-columns:1fr 1fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px;box-shadow:var(--shadow)}
.card h3{font-size:15px;font-weight:700}
.card .hint{font-size:12.5px;color:var(--muted);margin-top:2px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}

.chart{width:100%;height:210px;display:block}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:6px}
.legend .d{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}

.crow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:0}
.flag{width:26px;height:18px;border-radius:3px;flex:none;border:1px solid var(--line)}
.cname{font-weight:600;color:var(--ink);font-size:13.5px;min-width:70px}
.cbar{flex:1;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.cbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--jade),var(--jade-lys))}
.cval{font-size:12.5px;color:var(--body);min-width:118px;text-align:right}
.cval b{color:var(--ink)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:0 10px 9px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);color:var(--body)}
tr:last-child td{border-bottom:0}
td.name{color:var(--ink);font-weight:600}
td.r{text-align:right}
.mbadge{font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--jade-soft);color:var(--jade)}
.sitechip{font-size:11px;padding:2px 7px;border-radius:5px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.warnchip{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}

.mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini .box{padding:13px;border:1px solid var(--line);border-radius:10px}
.mini .box .l{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mini .box .v{font-size:21px;font-weight:700;color:var(--ink);margin-top:4px}
.mini .box .v.warn{color:var(--amber)}
.mini .box .s{font-size:12px;color:var(--muted);margin-top:2px}
.note{font-size:12.5px;color:var(--muted);margin:12px 0 0}

.sect-label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:28px 0 12px}
.flags{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.flag-card{border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--surface)}
.flag-card .sev{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.flag-card.warn{border-left:3px solid var(--amber)} .flag-card.warn .sev{color:var(--amber)}
.flag-card.crit{border-left:3px solid var(--crit)} .flag-card.crit .sev{color:var(--crit)}
.flag-card.info{border-left:3px solid var(--jade)} .flag-card.info .sev{color:var(--jade)}
.flag-card p{margin:7px 0 0;font-size:13px;color:var(--body)}
.flag-card b{color:var(--ink)}

.foot-note{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-note b{color:var(--body)}
.scroll{overflow-x:auto}

@media(max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .g2,.g2b{grid-template-columns:1fr}
  .flags{grid-template-columns:1fr}
}

/* ===== v2: faner ===== */
.tabs{display:flex;gap:4px;margin:18px 0 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{background:none;border:0;padding:10px 16px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0}
.tab:hover{color:var(--body);background:var(--surface-2)}
.tab.on{color:var(--jade);border-bottom-color:var(--jade)}
.link{background:none;border:0;color:var(--jade);font-weight:600;font-size:13px;cursor:pointer;padding:0;font-family:inherit}
.link:hover{text-decoration:underline}

/* ===== explorer ===== */
.explorer-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.search{flex:1;min-width:200px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--ground);color:var(--ink);font-size:14px;font-family:inherit}
.search:focus{outline:2px solid var(--jade);outline-offset:1px;border-color:var(--jade)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--surface-2);border:1px solid var(--line);color:var(--body);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:99px;cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--jade)}
.chip.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.ptable{width:100%;border-collapse:collapse;font-size:13.5px}
.ptable th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.ptable th.sortable:hover{color:var(--jade)}
.ptable tbody tr[data-key]{cursor:pointer}
.ptable tbody tr[data-key]:hover{background:var(--surface-2)}
.ptable td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable .sku{font-size:11px;color:var(--muted);margin-top:2px;font-variant-numeric:normal}
.newchip{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--peach);background:color-mix(in srgb,var(--peach) 20%,transparent);padding:1px 6px;border-radius:5px;vertical-align:middle}
.pill-low{color:var(--amber);font-weight:600}
.pill-out{font-size:11px;font-weight:700;color:var(--crit);background:color-mix(in srgb,var(--crit) 15%,transparent);padding:2px 7px;border-radius:5px}
.pill-dead{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:5px}
.more{margin-top:14px;text-align:center}
.btn-more{background:var(--surface-2);border:1px solid var(--line);color:var(--body);font-weight:600;font-size:13px;padding:9px 20px;border-radius:10px;cursor:pointer;font-family:inherit}
.btn-more:hover{border-color:var(--jade);color:var(--jade)}
.more-done{font-size:12.5px;color:var(--muted)}
/* drill-down */
.detail td{background:var(--surface-2);border-bottom:2px solid var(--line)}
.detail-grid{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:20px;padding:6px 4px}
.dl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.dstats{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.dstats b{color:var(--ink);font-weight:600}
.dcountries{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--body)}
.dcountries .flag{width:20px;height:14px;margin-right:6px;vertical-align:middle}
.drec{margin-top:12px;padding:10px 12px;background:var(--jade-soft);border-radius:8px;font-size:12.5px;color:var(--body)}
.drec b{color:var(--jade)}

/* ===== anbefalinger ===== */
.rec-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.rec-head{padding:13px 18px;display:flex;align-items:baseline;gap:12px;border-left:3px solid var(--jade)}
.rec-head h3{font-size:14.5px}
.rec-head span{font-size:12.5px;color:var(--muted)}
.rec-crit{border-left-color:var(--crit)} .rec-warn{border-left-color:var(--amber)}
.rec-info{border-left-color:var(--jade)} .rec-good{border-left-color:var(--jade-lys)}
.rec-item{padding:11px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.rec-title{font-weight:600;color:var(--ink);font-size:13.5px}
.rec-text{font-size:13px;color:var(--body)}

/* ===== spørg AI ===== */
.ask-card h3{font-size:16px}
.ask-row{display:flex;gap:10px;margin:14px 0 12px}
.ask-send{background:var(--ink);color:var(--ground);border:0;border-radius:10px;padding:10px 22px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit}
.ask-send:hover{opacity:.9}
.ask-send:disabled{opacity:.5;cursor:default}
.suggest{display:flex;gap:8px;flex-wrap:wrap}
.sug{background:var(--surface-2);border:1px solid var(--line);color:var(--body);font-size:12.5px;padding:7px 12px;border-radius:99px;cursor:pointer;font-family:inherit}
.sug:hover{border-color:var(--jade);color:var(--jade)}
.ask-out{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.ask-loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.spinner.sm{width:18px;height:18px;border-width:2px}
.ask-q{font-weight:600;color:var(--ink);margin-bottom:10px;font-size:14.5px}
.ask-report{font-size:14px;color:var(--body);line-height:1.6}
.ask-err{color:var(--crit);font-size:13.5px}

@media(max-width:760px){ .detail-grid{grid-template-columns:1fr} .dstats{grid-template-columns:1fr 1fr} }

/* ===== v3: varianter ===== */
.caret{display:inline-block;width:14px;color:var(--muted);font-size:11px;transition:transform .15s;margin-right:2px}
.has-variants td.name{position:relative}
.row-alert{background:color-mix(in srgb,var(--amber) 7%,transparent)}
.vbadge{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--surface-2);color:var(--muted);vertical-align:middle}
.vbadge.urgent{background:color-mix(in srgb,var(--crit) 15%,transparent);color:var(--crit)}
.vcount{color:var(--jade)}
.vwrap{padding:8px 4px}
.vtable{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vtable th{background:var(--surface-2);padding:8px 12px;font-size:10.5px;border-bottom:1px solid var(--line)}
.vtable td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.vtable tr:last-child td{border-bottom:0}
.vname{color:var(--ink);font-weight:600}
.vsku{font-size:10.5px;color:var(--muted);margin-top:2px;font-variant-numeric:normal}
.apill{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:5px;vertical-align:middle}
.apill.out{background:color-mix(in srgb,var(--crit) 15%,transparent);color:var(--crit)}
.apill.low{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.vfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.dcountries-inline{display:flex;gap:14px;font-size:12.5px;color:var(--body);flex-wrap:wrap}
.dcountries-inline .flag{width:20px;height:14px;margin-right:5px;vertical-align:middle}
.vfoot .drec{margin-top:0;flex:1;min-width:220px}

/* Udstillingsvare-markering (dødt lager) */
.mark-btn{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;
  border:1px solid var(--jade);background:transparent;color:var(--jade);cursor:pointer;vertical-align:middle;
  font-family:inherit;transition:background .12s,color .12s}
.mark-btn:hover{background:var(--jade);color:#fff}
.mark-btn.undo{border-color:var(--muted);color:var(--muted)}
.mark-btn.undo:hover{background:var(--muted);color:#fff}