/* ============================================================
   VOLTACORE UI — delad SSOT-CSS (skärm) · spik av _GRAFIK-SSOT.md
   Pine/Walnut/Gold · Poppins/JetBrains Mono · faded gold-grid ·
   svävande front (rundat) · skarp data (ingen radie) · ▸-eyebrow
   ============================================================ */
:root{
 --pine:#405044;--pine-dark:#2E3B32;--pine-deep:#232D26;--pine-light:#556657;--walnut:#403430;
 --gold:#D89A28;--gold-soft:#E8B85A;--gold-pale:#F3DBA5;
 --paper:#FBFAF6;--off:#F5F4F0;--line:#D9D6CC;--line2:#CAC6BA;--muted:#8a8d85;--ink:#1a1f1b;--head:#22281e;
 --ok:#2B7A2B;--warn:#B33A3A;
 --fm:'JetBrains Mono',ui-monospace,monospace;--fs:'Poppins',system-ui,sans-serif;
 --float:0 20px 50px -12px rgba(26,31,27,.26),0 3px 9px -3px rgba(26,31,27,.1);
 --rail:236px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fs);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;display:flex;min-height:100vh}
/* L4 filmkorn */
body::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.022;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--fm)}
/* RAIL */
/* Designförslag v2 "Verket" (2026-07-04): pine-deep-rail, 3px guld-rail på aktiv, kantig V-mark. */
.rail{width:var(--rail);flex:none;background:var(--pine-deep);color:#cfd6cc;padding:20px 0;z-index:6;position:relative}
.brand{display:flex;align-items:center;gap:11px;padding:0 20px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
.brand .v{width:36px;height:36px;background:var(--gold);color:var(--pine-deep);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center}
.brand .t{font-weight:700;font-size:16px;color:#fff}.brand .t span{color:var(--gold)}
.brand .s{font-family:var(--fm);font-size:7.5px;color:#8a978c;letter-spacing:1.5px;text-transform:uppercase;margin-top:2px}
.grp{font-family:var(--fm);font-size:8.5px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.38);padding:16px 20px 6px}
.nav{display:flex;align-items:center;gap:11px;padding:8px 20px 8px 17px;font-size:13px;font-weight:500;color:rgba(255,255,255,.78);border-left:3px solid transparent;cursor:pointer;text-decoration:none;transition:background .12s,color .12s}
.nav .ic{width:16px;text-align:center;opacity:.8}
.nav:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav.on{background:rgba(216,154,40,.12);color:var(--gold-soft);border-left-color:var(--gold)}
.nav.on .ic{opacity:1}
.nav .sub{display:block;font-family:var(--fm);font-size:8px;color:#76847a;margin-top:1px}
.nav .grip{cursor:grab;color:#5f6d62;font-size:10px;opacity:.55;margin:0 -4px 0 -6px;user-select:none}
.nav:hover .grip{opacity:.9}.nav.drag{opacity:.35}
.addrow{font-family:var(--fm);font-size:11px;color:#7e8c80;padding:10px 20px;cursor:pointer}.addrow:hover{color:var(--gold)}
.navinp{margin:6px 18px 4px;width:calc(100% - 36px);background:rgba(255,255,255,.08);border:1px solid #4a5a4e;color:#fff;font-family:var(--fs);font-size:12.5px;padding:7px 9px;outline:none}.navinp:focus{border-color:var(--gold)}
/* MAIN + bakgrundslager */
.main{flex:1;position:relative;overflow-x:hidden;min-height:100vh}
.gridbg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;background-image:linear-gradient(rgba(216,154,40,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(216,154,40,.14) 1px,transparent 1px);background-size:50px 50px;
 -webkit-mask-image:radial-gradient(ellipse 86% 55% at 60% 6%,#000 6%,transparent 58%);mask-image:radial-gradient(ellipse 86% 55% at 60% 6%,#000 6%,transparent 58%)}
.glow{position:absolute;right:-4%;top:-10%;width:680px;height:680px;z-index:0;pointer-events:none;filter:blur(6px);background:radial-gradient(circle at 50% 50%,rgba(216,154,40,.12),rgba(216,154,40,.04) 40%,transparent 64%)}
.wrap{position:relative;z-index:2;padding:30px 46px 56px;max-width:1340px}
/* topp */
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.crumb{font-family:var(--fm);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}.crumb b{color:var(--head)}.crumb a{color:var(--gold)}.crumb .sep{color:var(--gold);margin:0 8px}
.role{font-family:var(--fm);font-size:11px;color:var(--head);border:1px solid var(--line);padding:7px 14px;background:rgba(255,255,255,.6)}
/* hero */
.eyebrow{font-family:var(--fm);font-size:9.5px;font-weight:600;color:var(--gold);letter-spacing:2.6px;text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:10px}.eyebrow:before{content:"▸"}
h1{font-size:33px;font-weight:600;color:var(--head);letter-spacing:-.6px;line-height:1.05}h1 .accent{color:var(--gold)}
.lead{font-size:13.5px;color:var(--muted);margin-top:10px;max-width:620px;line-height:1.6}
.beta{font-family:var(--fm);font-size:8px;font-weight:600;letter-spacing:1px;padding:3px 8px}
.beta.b{background:var(--gold-pale);color:var(--walnut)}.beta.kon{background:var(--off);color:var(--muted);border:1px solid var(--line)}.beta.live{background:rgba(43,122,43,.12);color:var(--ok)}
/* frostade KPI-pills (svävar) */
.kpis{display:flex;flex-wrap:wrap;gap:11px;margin:26px 0 30px}
.kpi{background:rgba(255,255,255,.72);backdrop-filter:blur(10px) saturate(1.1);border:1px solid rgba(255,255,255,.9);border-radius:999px;padding:11px 19px;box-shadow:var(--float);display:flex;align-items:baseline;gap:9px;transition:transform .25s}
.kpi:hover{transform:translateY(-3px)}
.kpi .n{font-family:var(--fm);font-weight:700;font-size:15px;color:var(--head);letter-spacing:-.3px}.kpi .n.gold{color:var(--gold)}
.kpi .l{font-family:var(--fm);font-size:8.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
/* sektionsrubrik */
.sechead{display:flex;align-items:center;gap:13px;margin:8px 0 16px}.sechead h2{font-size:15px;font-weight:600;color:var(--head)}
.sechead .s{font-family:var(--fm);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}.sechead .line{flex:1;height:1px;background:var(--line)}
.sechead .lk{font-family:var(--fm);font-size:10px;color:var(--gold);letter-spacing:.5px}
/* floating-kort (svävar) */
.cards{display:grid;gap:16px}
.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c2{grid-template-columns:1fr 1fr}
.card{background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.95);border-radius:16px;padding:19px 20px;box-shadow:var(--float);transition:transform .25s,box-shadow .25s;display:block}
.card.hov{cursor:pointer}.card.hov:hover{transform:translateY(-3px);box-shadow:0 30px 64px -16px rgba(26,31,27,.34)}
/* rank-markör (ej emoji) */
.rank{font-family:var(--fm);font-size:12px;font-weight:700;color:var(--gold);border:1px solid var(--gold);padding:3px 9px;letter-spacing:1px}.rank.lead{background:var(--gold);color:var(--pine-dark)}
/* taggar (skarpa) */
.tag{font-family:var(--fm);font-size:8.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:3px 10px}
.tag.ok{background:rgba(43,122,43,.1);color:var(--ok)}.tag.warn{background:var(--gold-pale);color:var(--walnut)}.tag.proj,.tag.na{background:var(--off);color:var(--muted);border:1px solid var(--line)}.tag.no{background:#f6dcd6;color:#9a3b30}.tag.it{background:#e7eef6;color:#3a5a86}
/* fyrkant-avatar */
.av{width:27px;height:27px;background:var(--gold-pale);color:var(--walnut);font-family:var(--fm);font-weight:700;font-size:10px;display:flex;align-items:center;justify-content:center}.av.na{background:var(--off);color:var(--muted);border:1px solid var(--line)}
/* bar */
.bar{height:5px;background:var(--off);overflow:hidden;margin-top:12px}.bar .f{height:100%;background:var(--gold)}
/* svävande panel + skarp datatabell inuti */
.panel{background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.95);border-radius:16px;box-shadow:var(--float);overflow:hidden;margin-bottom:18px}
.panel .ph{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 11px;font-family:var(--fm);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.panel .ph .t:before{content:"▸ ";color:var(--gold)}
.panel .ph .s{font-size:9px;color:var(--muted)}
.panel .pb{padding:4px 20px 16px}
table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-family:var(--fm);font-size:8.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 20px;background:rgba(245,244,240,.5)}
table.t td{padding:11px 20px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--head);vertical-align:top}
table.t tr:last-child td{border-bottom:none}
table.t td.r,table.t th.r{text-align:right;font-family:var(--fm)}
/* resultatrad-lista */
.row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.row:last-child{border-bottom:none}
.row .k{color:var(--muted)}.row .v{font-family:var(--fm);color:var(--head);text-align:right}.row.sum{border-top:2px solid var(--line);font-weight:600}.row.sum .v{color:var(--pine)}
/* knappar — SKARPA (high-end) */
.btn{font-family:var(--fm);font-size:11px;letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--head);padding:9px 15px;cursor:pointer;transition:.15s;display:inline-block}
.btn:hover{border-color:var(--gold);color:var(--walnut);background:var(--gold-pale)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#2a2113}.btn.gold:hover{background:var(--gold-soft)}
.na{color:var(--muted);font-style:italic;font-family:var(--fm)}
.note{font-family:var(--fm);font-size:10.5px;color:var(--muted);line-height:1.6}
.foot{font-family:var(--fm);font-size:10.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:26px}
@media(max-width:1100px){.cards.c3{grid-template-columns:1fr 1fr}}