:root{
  --bg:#06060c; --bg2:#0c0b18; --panel:#11101f; --line:#27243f; --line2:#36325a;
  --ink:#e9e6f5; --muted:#9690b8; --faint:#6a6490;
  --void:#a06bff; --void-dim:#6f4ad6; --cyan:#46e0d6; --gold:#f5c451; --red:#ff6b8a; --green:#5fe39a;
  --display:'Cinzel',serif; --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(160,107,255,.14), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(70,224,214,.08), transparent 55%), var(--bg);
  color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(160,107,255,.5), transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(70,224,214,.4), transparent),
    radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,.3), transparent);
}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:42px 24px 90px;}
header.top{margin-bottom:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
/* feedback-knapp (Discord) — i headern, högerställd, wrappar på smala skärmar */
.feedback-btn{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;font-weight:600;text-decoration:none;color:#cdd3ff;
  background:rgba(88,101,242,.16);border:1px solid #5865f2;border-radius:9px;padding:7px 12px;
  transition:background .15s,box-shadow .15s;}
.feedback-btn:hover{background:rgba(88,101,242,.3);box-shadow:0 0 18px -4px rgba(88,101,242,.65);}
.foot-cta{color:var(--muted);} .foot-cta a{color:var(--cyan);}
.brand-img{width:66px;height:66px;border-radius:14px;flex:0 0 auto;box-shadow:0 0 24px -4px rgba(70,224,214,.35);}
.logo{font-family:var(--display);font-weight:700;letter-spacing:.5px;font-size:34px;line-height:1;
  background:linear-gradient(110deg,var(--void),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;}
.logo .dot{color:var(--gold);-webkit-text-fill-color:var(--gold);}
.tag{color:var(--muted);font-family:var(--mono);font-size:12.5px;margin-top:8px;}
.tag b{color:var(--cyan);font-weight:600;}
.banner{background:rgba(245,196,81,.12);border:1px solid rgba(245,196,81,.4);color:var(--gold);
  font-family:var(--mono);font-size:12.5px;border-radius:9px;padding:10px 14px;margin-bottom:20px;}
.banner code{background:rgba(0,0,0,.3);padding:1px 6px;border-radius:4px;}
/* beta-notis högst upp under headern */
.betabanner{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:10px 14px;border-radius:9px;
  background:linear-gradient(110deg,rgba(160,107,255,.12),rgba(70,224,214,.08));border:1px solid var(--void-dim);
  font-family:var(--mono);font-size:12.5px;color:var(--muted);line-height:1.5;}
.betabanner .beta-tag{flex:0 0 auto;font-weight:700;font-size:10.5px;letter-spacing:1px;color:var(--void);
  background:rgba(160,107,255,.18);border:1px solid var(--void-dim);border-radius:5px;padding:2px 7px;}
.betabanner a{color:var(--cyan);}
.step{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:14px;
  padding:22px;margin-bottom:20px;box-shadow:0 18px 40px -28px rgba(0,0,0,.9);}
.step-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.num{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);
  font-weight:600;font-size:14px;background:rgba(160,107,255,.13);color:var(--void);border:1px solid var(--void-dim);}
.step-h h2{font-family:var(--display);font-weight:500;font-size:18px;margin:0;}
.step-h .sub{color:var(--faint);font-size:12.5px;font-family:var(--mono);margin-left:auto;}
label.fld{display:block;font-size:12px;color:var(--muted);font-family:var(--mono);margin:0 0 6px;text-transform:uppercase;letter-spacing:.6px;}
textarea,input,select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  font-family:var(--mono);font-size:13px;padding:11px 12px;outline:none;transition:border-color .15s,box-shadow .15s;}
textarea{resize:vertical;min-height:110px;line-height:1.5;}
textarea:focus,input:focus,select:focus{border-color:var(--void-dim);box-shadow:0 0 0 3px rgba(160,107,255,.12);}
select{appearance:none;cursor:pointer;}
.hint{color:var(--faint);font-size:12px;margin-top:8px;font-family:var(--mono);}
/* import-panel (steg 1) — Raidbots-lik "Load from SimC addon" */
.impanel{border:1px solid var(--line2);border-radius:11px;padding:14px;background:rgba(160,107,255,.04);}
.impanel-h{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px;}
.impanel-ic{flex:0 0 auto;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:17px;
  background:rgba(70,224,214,.12);border:1px solid rgba(70,224,214,.3);color:var(--cyan);}
.impanel-t{font-family:var(--display);font-size:15px;color:var(--ink);}
.impanel-s{font-size:12px;color:var(--faint);font-family:var(--mono);margin-top:2px;}
.link-btn{display:inline;width:auto;background:none;border:none;padding:0;margin:0;color:var(--cyan);
  font-family:var(--mono);font-size:12px;cursor:pointer;text-decoration:none;}
.link-btn:hover{text-decoration:underline;}
.link-btn .chev{display:inline-block;font-size:9px;transition:transform .15s;}
.link-btn.open .chev{transform:rotate(90deg);}
.simc-help{margin:0 0 11px;padding:11px 14px 11px 30px;border-radius:9px;background:rgba(0,0,0,.22);
  border:1px solid var(--line);font-size:12.5px;line-height:1.7;color:var(--muted);}
.simc-help li{margin:2px 0;} .simc-help b{color:var(--ink);}
.simc-help code{background:rgba(160,107,255,.15);color:var(--void);padding:1px 5px;border-radius:4px;font-size:12px;}
/* inbound-handoff: hämta rapport via länk */
.importrow{display:flex;gap:8px;margin-bottom:10px;}
.importrow input{flex:1;}
.importrow .btn-ghost{width:auto;white-space:nowrap;flex:0 0 auto;margin:0;}
.importstatus{font-size:12px;line-height:1.5;padding:8px 11px;border-radius:8px;margin-bottom:10px;border:1px solid var(--line2);color:var(--muted);}
.importstatus a{color:var(--cyan);}
.importstatus.ok{color:var(--green);border-color:#2e7d4f;background:rgba(70,224,150,.06);}
.importstatus.err{color:var(--red);border-color:#9a3a4e;background:rgba(255,107,138,.07);}
.importstatus.warn{color:var(--gold);border-color:#9a7a30;background:rgba(245,196,81,.06);}
/* report-identitet: varna om fel karaktärs rapport klistrats in */
.repwarn{font-size:13px;line-height:1.55;padding:11px 14px;border-radius:10px;margin-bottom:12px;border:1px solid var(--red);background:rgba(255,107,138,.12);color:#ffd2da;}
.repwarn b{color:#fff;}
.repinfo{font-size:12px;color:var(--muted);font-family:var(--mono);margin-bottom:10px;}
.repinfo b{color:var(--ink);}
.detect{font-family:var(--mono);font-size:12.5px;border-radius:9px;padding:10px 14px;margin-bottom:14px;}
.detect.ok{background:rgba(70,224,214,.1);border:1px solid rgba(70,224,214,.35);color:var(--cyan);}
.detect.ok b{color:var(--ink);}
.detect.warn{background:rgba(245,196,81,.1);border:1px solid rgba(245,196,81,.35);color:var(--gold);}
.detect.warn b{color:var(--ink);}

/* ---- raid-block (huvudrubrik per raid → boss-undergrupper) ---- */
.raidblock{margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:2px 12px 12px;background:rgba(255,107,138,.04);}
.raid-h{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:10px 2px 8px;}
.raid-name{font-family:var(--display);font-size:18px;color:var(--red);display:flex;align-items:center;gap:10px;}
.raid-diff label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);display:flex;align-items:center;gap:6px;}
.raid-diff select{width:auto;padding:5px 9px;font-size:12px;}
.dgroup.bossgrp{margin:0 0 4px 4px;}
.dgroup.bossgrp .dg-name{font-size:13.5px;color:var(--gold);}

/* ---- top-gear-panel (Warcraft Logs meta) ---- */
.metapanel{border:1px solid var(--line2);border-radius:11px;margin-bottom:14px;overflow:hidden;}
/* Meta-panelen som EGET kort (egen sektionsbrytning mot rollbar loot) — kortet ger ramen, panelen fyller det */
.metastep{padding:0;overflow:hidden;}
.metastep .metapanel{border:none;border-radius:0;margin:0;}
.mg-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:11px 14px;
  background:rgba(245,196,81,.07);color:var(--gold);font-family:var(--mono);font-size:12.5px;font-weight:600;}
.mg-head .mg-sub{color:var(--faint);font-weight:400;}
.mg-toggle{color:var(--faint);}
/* teaser-läge (hopfälld panel): ikon-strip av topp-itemet per slot + CTA → lockar att öppna */
.mg-teaser{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;padding:11px 14px 13px;cursor:pointer;}
.mg-teaser-icons{display:flex;flex-wrap:wrap;gap:5px;}
.mg-teaser-icons img{width:27px;height:27px;border-radius:5px;border:1px solid var(--line2);display:block;
  transition:border-color .15s,transform .15s;}
.mg-teaser:hover .mg-teaser-icons img{border-color:var(--void-dim);}
.mg-teaser-cta{font-family:var(--mono);font-size:12px;color:var(--cyan);margin-left:4px;}
.mg-teaser:hover .mg-teaser-cta{text-decoration:underline;}
.mg-body{padding:12px 14px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;}
.mg-slot{border:1px solid var(--line2);border-radius:9px;padding:7px 11px 9px;background:rgba(0,0,0,.22);}
.mg-slothead{display:flex;align-items:center;border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:4px;}
.mg-slotname{flex:1;font-family:var(--display);font-size:14px;color:var(--ink);}
.mg-colkey,.mg-colpop{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);text-align:right;}
.mg-colkey{flex:0 0 48px;} .mg-colpop{flex:0 0 58px;}
.mg-item{display:flex;align-items:center;gap:9px;padding:3px 0;font-size:12.5px;}
.mg-ic,.mg-ic img{width:24px;height:24px;border-radius:4px;display:block;}
.mg-ic{flex:0 0 24px;background:#15131f;}
.mg-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.mg-nmline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c77dff;}
.mg-src{font-size:10px;color:var(--cyan);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9;}
.mg-src:hover{text-decoration:underline;opacity:1;}
.mg-srccost{font-family:var(--mono);color:var(--gold);}
.mg-src-x{color:var(--muted);cursor:default;opacity:.6;}
.mg-src-x:hover{text-decoration:none;}
.dgroup.flash{animation:flashloc 1.4s ease-out;}
@keyframes flashloc{0%,30%{background:rgba(70,224,214,.16);box-shadow:0 0 0 2px rgba(70,224,214,.4);}100%{background:transparent;box-shadow:none;}}
.mg-key{flex:0 0 48px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--gold);}
.mg-pct{flex:0 0 58px;text-align:right;font-family:var(--mono);font-size:12px;font-weight:600;}
.mg-pct.hi{color:#ff9d3a;} .mg-pct.mid{color:#46a0e0;} .mg-pct.lo{color:var(--green);}
.mg-more{font-family:var(--mono);font-size:10.5px;color:var(--cyan);cursor:pointer;text-align:center;padding:5px 0 1px;opacity:.85;}
.mg-more:hover{opacity:1;text-decoration:underline;}
/* förklarande hjälptext för meta-indikatorerna (+key ★pct) */
.mg-help{font-size:11.5px;color:var(--muted);line-height:1.6;padding:2px 2px 10px;}
.mg-help b{color:var(--gold);font-family:var(--mono);}
.mg-help i{color:#c77dff;font-style:normal;}
/* tier-token-tagg (används av meta-panelens drop-källa) */
.bis-tiertag{color:#c77dff;font-family:var(--mono);font-size:9px;border:1px solid #7a4fb0;border-radius:4px;padding:0 4px;}
.filters .f{flex:1;min-width:160px;}
.loot{margin-top:14px;}
.dgroup{margin-bottom:10px;}
.dgroup-h{font-family:var(--display);font-size:15px;color:var(--cyan);margin:14px 0 4px;display:flex;align-items:center;gap:9px;}
.grpall{width:16px;height:16px;accent-color:var(--cyan);cursor:pointer;flex:0 0 auto;}
.litem{display:flex;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid rgba(39,36,63,.5);font-size:13px;}
.litem.obtained{opacity:.4;}
.litem input{width:16px;height:16px;accent-color:var(--void);cursor:pointer;flex:0 0 auto;}
.litem .ricon{width:24px;height:24px;border-radius:5px;border:1px solid var(--line2);flex:0 0 auto;display:block;}
.litem .ricon.ph{background:#15131f;}
.litem.obtained .ricon{filter:grayscale(.7);}
.litem .lleft{flex:1;min-width:0;display:flex;align-items:center;gap:9px;} /* namn + slot/ilvl-kluster, växer */
.litem .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* hugger vänster */
.litem .lslot{display:flex;align-items:baseline;gap:5px;flex:0 0 auto;font-family:var(--mono);font-size:11px;}
.litem .lslot-t{color:var(--faint);text-transform:uppercase;letter-spacing:.4px;}
.litem .lslot-i{color:var(--gold);font-weight:600;}
.litem .lmeta{display:flex;align-items:center;gap:9px;flex:0 0 auto;font-family:var(--mono);font-size:11.5px;}
.litem .lkey{color:var(--void);}
.litem .lpop{color:var(--gold);font-weight:600;min-width:44px;text-align:right;}
.litem .lmeta.lnone{color:var(--faint);min-width:0;}
.litem .tiertag{font-family:var(--mono);font-size:10px;color:var(--gold);border:1px solid #9a7a30;background:rgba(245,196,81,.08);border-radius:5px;padding:1px 6px;flex:0 0 auto;}
/* raid tier-token: redan tier (lila), till skillnad från M+ catalyst (guld) */
.litem .tiertag.tokentag{color:#c77dff;border-color:#7a4fb0;background:rgba(199,125,255,.10);}
.tierlegend{font-size:11.5px;color:var(--muted);padding:7px 10px;margin-bottom:8px;border:1px solid var(--line2);border-radius:7px;background:rgba(255,255,255,.02);line-height:1.7;}
.tierlegend b{color:var(--gold);}
.tierlegend .tiertag{font-family:var(--mono);font-size:10px;color:var(--gold);border:1px solid #9a7a30;background:rgba(245,196,81,.08);border-radius:5px;padding:1px 6px;}
.tierlegend .tiertag.tokentag{color:#c77dff;border-color:#7a4fb0;background:rgba(199,125,255,.10);}
/* Loot-listan: M+ i VÄNSTER kolumn, raider i HÖGER (hård split, ej balanserad) på breda skärmar */
.loot-cols{display:grid;grid-template-columns:1fr;gap:22px;}
.loot-col{min-width:0;}
.loot-col > .dgroup:first-child .dgroup-h{margin-top:0;}
@media (min-width:820px){ .loot-cols{grid-template-columns:1fr 1fr;align-items:start;} }
.litem .badge{font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;border:1px solid var(--line2);color:var(--muted);}
.litem .badge.hi{border-color:var(--gold);color:var(--gold);}
.litem .badge.int{color:#8db4ff;border-color:#3a5a99;}
.litem .badge.agi{color:var(--green);border-color:#2f7a4f;}
.litem .badge.str{color:#ffb27a;border-color:#9a5a30;}
.litem .badge.role{text-transform:uppercase;letter-spacing:.4px;}
.litem .badge.role.dps{color:var(--red);border-color:#9a3a4e;}
.litem .badge.role.healer{color:var(--green);border-color:#2f7a4f;}
.litem .badge.role.tank{color:var(--gold);border-color:#9a7a30;}
.litem .badge.pop{color:var(--gold);border-color:#9a7a30;background:rgba(245,196,81,.08);font-weight:600;}
.empty{color:var(--faint);font-family:var(--mono);font-size:12.5px;text-align:center;padding:18px;}
button{font-family:var(--mono);font-weight:600;font-size:13px;cursor:pointer;border:none;border-radius:9px;padding:11px 16px;transition:transform .08s,filter .15s;}
button:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(100deg,var(--void),var(--void-dim));color:#0b0814;width:100%;padding:14px;font-size:14px;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;border:1px solid var(--line2);color:var(--muted);}
.btn-ghost:hover{border-color:var(--void-dim);color:var(--ink);}
.btn-copy{background:rgba(70,224,214,.12);color:var(--cyan);border:1px solid rgba(70,224,214,.35);padding:8px 14px;}
.codebar{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.codebar .sp{margin-left:auto;}
pre.code{background:#070611;border:1px solid var(--line);border-radius:9px;padding:14px;overflow:auto;font-family:var(--mono);
  font-size:12px;line-height:1.6;color:#cfc8ee;max-height:300px;margin:0;white-space:pre;}
.warnflag{color:var(--gold);font-size:11px;font-family:var(--mono);}
.ext{color:var(--cyan);text-decoration:none;border-bottom:1px dotted var(--cyan);}
.note{background:rgba(160,107,255,.07);border-left:3px solid var(--void-dim);border-radius:0 8px 8px 0;padding:11px 14px;color:var(--muted);font-size:12.5px;margin-top:14px;}
.err{color:var(--red);font-family:var(--mono);font-size:12.5px;margin-top:10px;}
.reco{background:linear-gradient(110deg,rgba(245,196,81,.14),rgba(160,107,255,.08));border:1px solid rgba(245,196,81,.4);border-radius:11px;padding:16px 18px;margin-bottom:18px;}
.reco .k{font-family:var(--mono);font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--gold);}
.reco .v{font-size:17px;margin-top:4px;} .reco .v b{color:var(--gold);}
.tokenbar{margin-top:12px;padding:11px 14px;border:1px solid var(--void-dim);border-radius:10px;background:rgba(160,107,255,.07);}
.tokenbar.need{border-color:var(--red);background:rgba(255,107,138,.1);animation:pulse 1s ease;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,138,.5);}100%{box-shadow:0 0 0 8px rgba(255,107,138,0);}}
.tokenrow{display:flex;align-items:center;gap:12px;}
.tokenrow .fld{margin:0;}
.tokenbar .req{color:var(--red);font-size:10px;}
.tokenbar input{width:110px;font-size:15px;font-weight:600;text-align:center;}
.tokenhint{display:block;color:var(--faint);font-family:var(--mono);font-size:11.5px;margin-top:7px;}
.tokenhint b{color:var(--void);}
.rtag{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.4px;padding:1px 6px;border-radius:5px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap;}
.rtag.raid{color:var(--red);border-color:#9a3a4e;background:rgba(255,107,138,.08);}
.pertok{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);font-weight:400;}
/* Token-budget-plan: chips för de rolls planen rekommenderar */
.planrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 2px;margin-top:8px;}
.planpick{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:9px;
  border:1px solid rgba(245,196,81,.45);background:rgba(245,196,81,.1);font-size:14px;}
.planpick.raid{border-color:#9a3a4e;background:rgba(255,107,138,.1);}
.planpick b{color:var(--ink);}
.planpick .pp-tok{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);white-space:nowrap;}
.planpick .pp-val{font-family:var(--mono);font-size:12px;color:var(--cyan);font-weight:600;}
.planpick .pp-slot{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--void);
  border:1px solid var(--void-dim);border-radius:4px;padding:0 4px;white-space:nowrap;}
.pp-plus{color:var(--faint);font-weight:700;padding:0 5px;}
.reco-warn{font-size:13px;color:var(--red);margin-top:9px;} .reco-warn b{color:var(--red);}
.reco-note{font-size:12px;color:var(--faint);margin-top:8px;} .reco-note b{color:var(--muted);}
/* ★ markerar rader som ingår i planen */
.drow.pick{background:rgba(245,196,81,.07);}
.drow.pick:not(.dhead):hover{background:rgba(245,196,81,.12);}
.pickstar{color:var(--gold);font-size:12px;}
/* Låsta (oöverkomliga) raid-platser längst ner */
.dsum.locked{margin-top:14px;opacity:.62;}
.locked-h{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--faint);padding:9px 12px;background:rgba(0,0,0,.2);border-bottom:1px solid var(--line2);}
.locked-row{cursor:default;} .locked-row:hover{background:none!important;} .locked-row .dn{color:var(--muted);}
.dungeon{margin-bottom:16px;}
.dungeon-h{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font-family:var(--display);font-size:16px;font-weight:500;}
.dungeon-h .meta{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-left:auto;font-weight:400;}
.bar-row{display:flex;align-items:center;gap:10px;padding:5px 0;}
.bar-row .nm{flex:0 0 220px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{flex:1;height:18px;background:var(--bg);border-radius:5px;overflow:hidden;border:1px solid var(--line);}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--void-dim),var(--void));}
.bar-fill.best{background:linear-gradient(90deg,#caa23a,var(--gold));}
.bar-fill.neg{background:linear-gradient(90deg,#7a3145,var(--red));}
.bar-row .val{flex:0 0 110px;text-align:right;font-family:var(--mono);font-size:12.5px;font-weight:600;}
.val.pos{color:var(--green);} .val.neg{color:var(--red);} .val.best{color:var(--gold);}
.slotnote{font-family:var(--mono);font-size:10px;color:var(--faint);border:1px solid var(--line2);border-radius:4px;padding:1px 5px;margin-left:6px;}

/* ---- dungeon summary (Raidbots-stil) ---- */
.dsum-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;}
.sortgrp{display:flex;align-items:center;gap:6px;}
.sortgrp .lbl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);margin-right:2px;}
.sortbtn{background:transparent;border:1px solid var(--line2);color:var(--muted);padding:6px 12px;font-size:12px;}
.sortbtn:hover{border-color:var(--void-dim);color:var(--ink);}
.sortbtn.active{background:rgba(160,107,255,.15);border-color:var(--void);color:var(--void);}
.reltoggle{display:flex;align-items:center;gap:6px;margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer;}
.reltoggle input{width:14px;height:14px;accent-color:var(--void);cursor:pointer;}
.dsum{border:1px solid var(--line);border-radius:11px;overflow:hidden;}
.drow{display:grid;grid-template-columns:34px minmax(120px,1.4fr) 3fr 96px 96px;align-items:center;gap:10px;
  padding:8px 14px;border-bottom:1px solid rgba(39,36,63,.55);cursor:pointer;transition:background .12s;}
.drow:last-child{border-bottom:none;}
.drow:not(.dhead):hover{background:rgba(160,107,255,.06);}
.drow.dhead{cursor:default;background:rgba(0,0,0,.25);font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--faint);padding-top:9px;padding-bottom:9px;}
.drow.dhead:hover{background:rgba(0,0,0,.25);}
.drank{font-family:var(--mono);font-size:13px;color:var(--faint);text-align:center;}
.dname{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;}
.dname .dn{font-family:var(--display);font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dname .dsub{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--faint);}
.pbar{flex:0 0 54px;height:5px;background:var(--bg);border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.pbar>span{display:block;height:100%;background:linear-gradient(90deg,var(--void-dim),var(--cyan));}
.drow.dhead .dname{justify-content:center;}
.bar-row .drop{flex:0 0 50px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--faint);}
.dcells{display:flex;flex-wrap:wrap;gap:4px;}
.cell{width:26px;height:26px;border-radius:5px;background:#15131f;border:2px solid var(--line2);overflow:hidden;}
.cell img{width:100%;height:100%;display:block;}
.cell:not(.zero):not(.best){border-color:rgba(95,227,154,calc(.25 + var(--t) * .75));}
.cell.best{border-color:var(--gold);box-shadow:0 0 7px rgba(245,196,81,.6);}
.cell.zero{border-color:var(--line);}
.cell.zero img{opacity:.32;filter:grayscale(.6);}
.dev,.dbest{font-family:var(--mono);font-size:13px;font-weight:600;text-align:right;}
.dev{color:var(--green);} .dbest{color:var(--gold);}
.drow.dhead .dev,.drow.dhead .dbest,.drow.dhead .drank,.drow.dhead .dname{color:var(--faint);font-weight:400;font-family:var(--mono);}
.drow.open{background:rgba(160,107,255,.08);}
.ddetail{padding:6px 16px 12px 48px;background:rgba(0,0,0,.18);border-bottom:1px solid rgba(39,36,63,.55);}
.dsum-hint{color:var(--faint);font-family:var(--mono);font-size:11px;margin-top:8px;}
/* ---- hover-tooltip ---- */
.tt{position:fixed;z-index:50;pointer-events:none;max-width:340px;background:#0a0913;border:1px solid var(--line2);
  border-radius:8px;padding:10px 12px;box-shadow:0 14px 40px -10px rgba(0,0,0,.9);font-size:12.5px;line-height:1.5;}
/* jämförelse-tooltip: kandidat + utrustat, sida vid sida (Wowhead-HTML inuti) */
.cmptip{position:fixed;z-index:80;pointer-events:none;max-width:min(96vw,960px);}
.cmp{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.cmp-col{display:flex;flex-direction:column;gap:4px;}
.cmp-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono);padding-left:3px;}
.cmp-new .cmp-label{color:var(--gold);} .cmp-eq .cmp-label{color:var(--cyan);}
.cmp-note{color:var(--green);text-transform:none;letter-spacing:0;font-weight:600;margin-left:5px;}
.cmp-tt,.cmp-load{background:#0b0b12;border:1px solid #2c2942;border-radius:7px;padding:9px 11px;color:#fff;
  font-size:12px;line-height:1.45;max-width:300px;box-shadow:0 14px 40px -10px rgba(0,0,0,.9);}
.cmp-tt table{border-collapse:collapse;width:100%;}
.cmp-tt th,.cmp-tt td{text-align:left;font-weight:400;vertical-align:top;}
.cmp-tt th{text-align:right;}            /* armor-typ/sekundär till höger om sloten (som in-game) */
.cmp-load{color:var(--muted);}
/* Wowhead-tooltip-HTML (injiceras i .cmp-tt) — styla quality-klasser + länkar SJÄLVA, eftersom vi tog
   bort power.js som gjorde det globalt. Efterliknar in-game/Wowhead-utseendet (länkar utan understrykning,
   grå set-pjäser/inaktiva set-bonusar, gröna use-effekter, guld item level). */
.cmp-tt a{text-decoration:none;color:inherit;cursor:default;} /* länkar ärver färg, ingen blå understrykning */
.cmp-tt .q0{color:#9d9d9d;} .cmp-tt .q1{color:#fff;} .cmp-tt .q2{color:#1eff00;}
.cmp-tt .q3{color:#3b9bff;} .cmp-tt .q4{color:#c479ff;} .cmp-tt .q5{color:#ff8000;} .cmp-tt .q6{color:#e6cc80;}
.cmp-tt .q{color:#ffd100;}               /* item level / upgrade / set-namn = guld */
.cmp-tt .indent{padding-left:12px;}
.cmp-tt .whtt-sellprice,.cmp-tt .whtt-extra,.cmp-tt .wowhead-tooltip-item-classes{color:#8a86a8;margin-top:3px;}
.cmp-tt .moneygold{color:#f5c451;} .cmp-tt .moneysilver{color:#cfd3e0;} .cmp-tt .moneycopper{color:#d08b5b;}
.tt-name{font-weight:600;font-size:14px;margin-bottom:3px;}
.tt-gain{font-family:var(--mono);font-size:12px;color:var(--green);margin-bottom:4px;}
.tt-row{display:flex;justify-content:space-between;gap:14px;}
.tt-r{text-align:right;}
.tt-dim{color:var(--faint);font-size:12px;}
.tt-stat{color:var(--ink);}
.tt-effect{color:var(--green);margin-top:4px;}
.tt-set{color:var(--gold);margin-top:5px;}
.tt-pop{color:var(--gold);margin-top:5px;font-family:var(--mono);font-size:11.5px;}
.tt-setbonus{color:var(--faint);font-size:12px;}
.foot{color:var(--faint);font-family:var(--mono);font-size:11px;text-align:center;margin-top:30px;line-height:1.7;}

/* "Hur det funkar"-strip under headern */
.howstrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:20px;padding:11px 14px;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);
  font-family:var(--mono);font-size:12.5px;color:var(--muted);}
.howstrip .s{display:inline-flex;align-items:center;}
.howstrip b{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:5px;margin-right:7px;
  background:rgba(160,107,255,.15);border:1px solid var(--void-dim);color:var(--void);font-size:11px;font-weight:700;}
.howstrip .howarrow{color:var(--faint);}

/* FAQ-accordion (native <details>) */
.faq details{border:1px solid var(--line);border-radius:9px;margin-bottom:8px;background:rgba(0,0,0,.15);overflow:hidden;}
.faq summary{cursor:pointer;padding:12px 14px;font-weight:600;color:var(--ink);font-size:14px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';color:var(--void);font-family:var(--mono);font-size:18px;line-height:1;}
.faq details[open] summary::after{content:'\2212';}
.faq summary:hover{background:rgba(160,107,255,.06);}
.faq .faq-a{padding:0 14px 13px;color:var(--muted);font-size:13.5px;line-height:1.65;}
.faq .faq-a code{background:rgba(160,107,255,.15);color:var(--void);padding:1px 5px;border-radius:4px;}

/* Responsiv: mobil */
@media (max-width:640px){
  .wrap{padding:24px 14px 64px;}
  .step{padding:16px;border-radius:11px;}
  .brand-img{width:52px;height:52px;}
  .logo{font-size:27px;}
  .tag{font-size:11.5px;}
  .step-h h2{font-size:16px;}
  .step-h .sub{display:none;}
  .feedback-btn{margin-left:0;}
  .mg-body{grid-template-columns:1fr !important;}
  .mg-body .mg-slot{min-width:0;}   /* grid-item måste få krympa, annars spränger den spåret */
  .mg-item, .mg-slothead{min-width:0;}
  .cmp{flex-direction:column;}
  .howstrip .howarrow{display:none;}
  .dsum{overflow-x:auto;}
  .dsum .drow{min-width:430px;}
}