/* ============================================================================
   FORRE.NU — NOTISPANELEN, A2.
   Reglerna är hämtade RAKT UR design-proposals/notiser-A2-2026-08-01.html
   (rad 98-190) — inte omtolkade. Första försöket uttryckte dem som
   Tailwind-utilities och tappade hälften på vägen; det var därför live inte
   liknade mockupen. Mockupens CSS ÄR designen.

   Egen namnrymd `fnx-` så ingenting krockar med .ddh/.ddrow/.dd-foot som
   sajtens övriga dropdowns använder. React renderar dessa klasser.

   Tätheten ligger i variabler precis som i mockupen — byt --np/--nav/--nt
   på #dd-notifs så flyttar hela panelen med. "Kompakt" är default.
   ========================================================================== */
#dd-notifs{
  /* Mockupen: .dd{width:340px}. Live låg på 320 och rader med citat blev
     två rader där mockupen har en. */
  width:340px!important;
  /* Mockupen: border-radius:var(--r) = 6px. Sajtens .tb-dd ligger på 8px, ett
     värde som inte finns bland tokens. Bara klockan ändras här — de andra
     dropdownerna byter när de migreras, inte innan. */
  border-radius:var(--r)!important;
  --np:6px 11px; --nav:28px; --nbg:15px; --nt:12px; --nq:11px; --nm:10px; --ngap:9px; --nlh:1.35;
  --nt-friend:#2796f2; --nt-like:#f43f5e; --nt-comment:#3b82f6; --nt-mention:#8b5cf6;
  --nt-post:#22c55e; --nt-lfg:#10b981; --nt-squad:#f59e0b; --nt-reward:#eab308;
  --nt-news:#06b6d4; --nt-fortnite:#f97316; --nt-system:#64748b;
}

/* ── HUVUD ───────────────────────────────────────────────────────────────── */
.tb-dd .fnx-list{max-height:420px;overflow-y:auto}
.tb-dd .fnx-h{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--line)}
.tb-dd .fnx-h .t{font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.tb-dd .fnx-h .n{font-size:9.5px;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.tb-dd .fnx-h .acts{margin-left:auto;display:flex;gap:2px}
.tb-dd .fnx-h .acts button,.tb-dd .fnx-h .acts a{width:24px;height:24px;border-radius:var(--r);
  display:grid;place-items:center;font-size:12.5px;color:var(--faint);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:none}
.tb-dd .fnx-h .acts button:hover,.tb-dd .fnx-h .acts a:hover{background:var(--inset);color:var(--ink)}

/* ── FILTERCHIPS ─────────────────────────────────────────────────────────── */
.tb-dd .fnx-f{display:flex;gap:4px;padding:7px 11px;border-bottom:1px solid var(--line);overflow-x:auto}
.tb-dd .fnx-f button{height:21px;padding:0 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--inset);font-size:9.5px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;cursor:pointer;flex:0 0 auto}
.tb-dd .fnx-f button.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── BRIEFING ────────────────────────────────────────────────────────────── */
.tb-dd .fnx-brief{padding:8px 11px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  font-size:var(--nt);color:var(--ink);line-height:var(--nlh)}
.tb-dd .fnx-brief b{font-weight:900}

/* ── RAD ─────────────────────────────────────────────────────────────────── */
.tb-dd .fnx-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--ngap);align-items:start;
  padding:var(--np);border-bottom:1px solid var(--line);--ntc:var(--accent);position:relative;
  color:inherit;text-decoration:none}
.tb-dd .fnx-row:hover{background:var(--zebra)}
.tb-dd .fnx-row.unread{background:color-mix(in srgb,var(--ntc) 5%,transparent)}
.tb-dd .fnx-row.unread::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ntc)}

.tb-dd .fnx-av{position:relative;width:var(--nav);height:var(--nav);flex:0 0 auto}
.tb-dd .fnx-im{width:var(--nav);height:var(--nav);border-radius:50%;background:var(--inset);
  border:1px solid var(--line);display:grid;place-items:center;font-size:calc(var(--nav)*.4);
  font-weight:900;color:var(--ink2);overflow:hidden;background-size:cover;background-position:center}
.tb-dd .fnx-im.sq{border-radius:var(--r)}
.tb-dd .fnx-bg{position:absolute;right:-2px;bottom:-2px;width:var(--nbg);height:var(--nbg);
  border-radius:50%;display:grid;place-items:center;font-size:calc(var(--nbg)*.55);color:#fff;
  background:var(--ntc);border:2px solid var(--card)}
.tb-dd .fnx-ic{width:var(--nav);height:var(--nav);border-radius:var(--r);display:grid;place-items:center;
  font-size:calc(var(--nav)*.44);color:var(--ntc);background:color-mix(in srgb,var(--ntc) 14%,transparent)}

.tb-dd .fnx-body{min-width:0}
/* font-weight:400 uttryckligen — .tb-dd ärver 600 från sajten, och då blev
   hela meningen halvfet i stället för bara namnet. Uppmätt mot mockupen. */
.tb-dd .fnx-title{font-size:var(--nt);color:var(--ink2);line-height:var(--nlh);display:block;font-weight:400}
.tb-dd .fnx-title b{font-weight:800;color:var(--ink)}
.tb-dd .fnx-row.unread .fnx-title{color:var(--ink)}
.tb-dd .fnx-stars{color:var(--gold);font-size:calc(var(--nt) - 1px);letter-spacing:-.5px;white-space:nowrap}
.tb-dd .fnx-quote{font-size:var(--nq);color:var(--dim);font-style:italic;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tb-dd .fnx-meta{display:flex;align-items:center;gap:5px;font-size:var(--nm);font-weight:700;
  color:var(--faint);margin-top:2px;flex-wrap:wrap}
.tb-dd .fnx-meta .ok{color:var(--live);display:inline-flex;align-items:center;gap:3px}
.tb-dd .fnx-faces{display:inline-flex;vertical-align:middle;margin-left:4px}
.tb-dd .fnx-faces span{width:14px;height:14px;border-radius:50%;background:var(--inset);
  border:1.5px solid var(--card);margin-left:-4px;display:grid;place-items:center;font-size:7px;
  font-weight:900;color:var(--ink2);background-size:cover;background-position:center}
.tb-dd .fnx-faces span:first-child{margin-left:0}

.tb-dd .fnx-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tb-dd .fnx-time{font-size:var(--nm);font-weight:700;color:var(--faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tb-dd .fnx-dot{width:6px;height:6px;border-radius:50%;background:var(--ntc)}

/* ── INLINE-ÅTGÄRDER (vänförfrågan) ──────────────────────────────────────── */
.tb-dd .fnx-act{display:flex;gap:4px;margin-top:6px}
.tb-dd .fnx-btn{height:23px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line2);
  background:var(--card);font-size:10.5px;font-weight:800;color:var(--ink2);display:inline-flex;
  align-items:center;gap:4px;cursor:pointer}
.tb-dd .fnx-btn:hover{border-color:var(--accent);color:var(--accent)}
.tb-dd .fnx-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.tb-dd .fnx-btn[disabled]{opacity:.5;cursor:default}
.tb-dd .fnx-done{font-size:var(--nm);font-weight:800;color:var(--live);margin-top:6px;display:block}

/* ── CO-PLAY-STJÄRNOR ("Kräver svar", B 2.0 2026-08-02) ───────────────────
   Stjärnan ÄR bekräftelsen — ingen Ja-knapp, ingen Skicka-knapp. Reglerna är
   kopierade ur design-proposals/omdome-B2-2026-08-02.html (§0C R5: mockupens CSS
   tas rakt av, inte omtolkad), namnrymdade fnx- och scopade till .tb-dd — ALDRIG
   till #dd-notifs, det bröt de tre andra menyerna samma dag den gången.

   FÄRGREGELN: osatta stjärnor är GRÅ (--faint), guld tänds först när ett betyg
   finns. Guld betyder därmed "här finns ett omdöme" i stället för att vara
   dekoration (§0B punkt 5). Blek guld på tre osatta rader blev femton bruna
   klumpar som inte betydde något. --live/--danger används INTE här: de betyder
   närvaro respektive fara på resten av sajten, inte ja/nej. */
.tb-dd .fnx-stars{display:inline-flex;gap:1px;align-items:center;flex:0 0 auto}
.tb-dd .fnx-star{width:22px;height:28px;display:grid;place-items:center;
  border:0;background:none;padding:0;cursor:pointer;font-size:15px;line-height:1}
.tb-dd .fnx-star > i{color:var(--faint);opacity:.5;transition:color .12s ease-out,opacity .12s ease-out}
.tb-dd .fnx-star.on > i{color:var(--gold);opacity:1}
.tb-dd .fnx-star:hover > i{color:var(--gold);opacity:.7}
.tb-dd .fnx-star[disabled]{cursor:default}
.tb-dd .fnx-nope{width:24px;height:28px;display:grid;place-items:center;border:0;background:none;
  padding:0;margin-left:5px;cursor:pointer;color:var(--faint);font-size:12px}
.tb-dd .fnx-nope:hover{color:var(--ink2)}
.tb-dd .fnx-saved{color:var(--gold);font-weight:700}
.tb-dd .fnx-err{color:var(--danger);font-weight:700}
/* Kommentaren finns bara vid <= 3 stjärnor. 56px = 11px radpadding + 28px avatar
   + 9px gap + 8px — meningen linjerar med titeln ovanför (§0B "symmetri och lod"). */
.tb-dd .fnx-why{padding:0 11px 8px 56px}
.tb-dd .fnx-why input{width:100%;height:28px;padding:0 9px;border-radius:var(--r-sm);
  background:var(--inset);border:1px solid var(--line2);color:var(--ink);
  font:inherit;font-size:var(--nq)}
.tb-dd .fnx-why input::placeholder{color:var(--faint)}
.tb-dd .fnx-why input:focus{outline:none;border-color:var(--accent)}
/* PHP-fallbacken göms först när React FAKTISKT monterat, och flaggan sitter på
   ELEMENTET — aldrig på <html> (§0D P3, FÖR DIG-fällan gav en tom låda). */
.tdk-ask[data-fnx-coplay="1"] .ask-row--star{display:none!important}
/* Mobil: 22px stjärna är under 44px touch-mål, så raden bryts och stjärnorna
   växer. Enda stället designen blir högre — uppmätt +38px. */
@media (max-width:820px){
  .tb-dd .fnx-row:has(.fnx-stars){flex-wrap:wrap}
  .tb-dd .fnx-stars{flex-basis:100%;margin-top:6px;padding-left:37px}
  .tb-dd .fnx-star{width:42px;height:38px;font-size:17px}
  .tb-dd .fnx-nope{width:42px;height:38px;font-size:14px}
  .tb-dd .fnx-why{padding-left:11px}
}

/* ── HOPVIKT GRUPP ───────────────────────────────────────────────────────── */
.tb-dd .fnx-fold{display:grid;grid-template-columns:auto 1fr auto;gap:var(--ngap);align-items:center;
  padding:var(--np);border-bottom:1px solid var(--line);--ntc:var(--nt-news);width:100%;text-align:left;
  background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;position:relative}
.tb-dd .fnx-fold:hover{background:var(--zebra)}
.tb-dd .fnx-fold .ch{font-size:11px;color:var(--faint);transition:transform .15s}
.tb-dd .fnx-fold[aria-expanded="true"] .ch{transform:rotate(180deg)}
.tb-dd .fnx-sub{background:color-mix(in srgb,var(--dim) 4%,transparent);border-bottom:1px solid var(--line)}
.tb-dd .fnx-sub a{display:flex;align-items:center;gap:8px;padding:5px 11px 5px 30px;font-size:11px;
  color:var(--ink2);text-decoration:none}
.tb-dd .fnx-sub a:hover{background:var(--zebra)}
.tb-dd .fnx-sub a b{font-weight:800;color:var(--ink)}
.tb-dd .fnx-sub a .tm{margin-left:auto;font-size:10px;color:var(--faint);font-weight:700;
  font-variant-numeric:tabular-nums}

/* ── TOMT + FOT ──────────────────────────────────────────────────────────── */
.tb-dd .fnx-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 20px;text-align:center}
.tb-dd .fnx-empty i{font-size:20px;color:var(--faint)}
.tb-dd .fnx-empty b{font-size:12.5px;font-weight:900;color:var(--ink)}
.tb-dd .fnx-empty span{font-size:11.5px;color:var(--dim);max-width:30ch}
.tb-dd .fnx-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;
  border-top:1px solid var(--line);font-size:11px;font-weight:800;color:var(--accent);text-decoration:none}
.tb-dd .fnx-foot:hover{background:var(--zebra)}

/* Kategorifärger SIST — de förlorade mot .fnx-fold när de stod först.
   Samma anteckning finns i mockupen; det var en riktig bugg där. */
.tb-dd [data-nt="friend"]{--ntc:var(--nt-friend)}
.tb-dd [data-nt="like"]{--ntc:var(--nt-like)}
.tb-dd [data-nt="comment"]{--ntc:var(--nt-comment)}
.tb-dd [data-nt="mention"]{--ntc:var(--nt-mention)}
.tb-dd [data-nt="post"]{--ntc:var(--nt-post)}
.tb-dd [data-nt="lfg"]{--ntc:var(--nt-lfg)}
.tb-dd [data-nt="squad"]{--ntc:var(--nt-squad)}
.tb-dd [data-nt="reward"]{--ntc:var(--nt-reward)}
.tb-dd [data-nt="news"]{--ntc:var(--nt-news)}
.tb-dd [data-nt="fortnite"]{--ntc:var(--nt-fortnite)}
.tb-dd [data-nt="system"]{--ntc:var(--nt-system)}
.tb-dd [data-nt="danger"]{--ntc:var(--danger)}
.tb-dd [data-nt="live"]{--ntc:var(--live)}

/* ============================================================================
   MENY-KÄRNAN — samma delar i meddelanden, vänförfrågningar och kontot.
   Scopet utökat från #dd-notifs till alla fyra panelerna (2026-08-01).
   ========================================================================== */
#dd-msgs,#dd-friends,#dd-me{
  width:340px!important;border-radius:var(--r)!important;
  --np:6px 11px; --nav:28px; --nbg:15px; --nt:12px; --nq:11px; --nm:10px; --ngap:9px; --nlh:1.35;
  --nt-friend:#2796f2; --nt-like:#f43f5e; --nt-comment:#3b82f6; --nt-mention:#8b5cf6;
  --nt-post:#22c55e; --nt-lfg:#10b981; --nt-squad:#f59e0b; --nt-reward:#eab308;
  --nt-news:#06b6d4; --nt-fortnite:#f97316; --nt-system:#64748b;
}



/* Närvaroprick — RUND avatar = människa, pricken sitter på personen. */
.tb-dd .fnx-pres{
  position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--card);background:var(--faint)}
.tb-dd .fnx-pres.on{background:var(--live)}
.tb-dd .fnx-pres.play{background:var(--nt-fortnite)}
.tb-dd .fnx-pres:empty{display:block}

/* Oläst-räknaren till höger på en tråd. */
.tb-dd .fnx-ct{
  min-width:16px;height:16px;padding:0 5px;border-radius:999px;background:var(--ntc);color:#fff;
  font-size:9px;font-weight:900;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.tb-dd .fnx-onl{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:900;
  color:var(--live);background:color-mix(in srgb,var(--live) 14%,transparent);border-radius:999px;
  padding:1px 5px;font-variant-numeric:tabular-nums}
.tb-dd .fnx-onl::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--live)}
.tb-dd .fnx-pin{font-size:9px;color:var(--faint);margin-left:4px}
.tb-dd .fnx-go{font-size:11px;color:var(--faint)}

/* Sektionsrad ("Förfrågningar", "Senaste"). */
.tb-dd .fnx-sec{
  display:flex;align-items:center;gap:6px;padding:5px 11px;background:var(--inset);font-size:8.5px;
  font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--faint);
  border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.tb-dd .fnx-sec .ct{margin-left:auto;letter-spacing:0}

/* ── KONTOMENYN ──────────────────────────────────────────────────────────── */
#dd-me{padding:0}
#dd-me .fnx-mehead{display:flex;align-items:center;gap:10px;padding:11px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
#dd-me .fnx-mehead:hover{background:var(--zebra)}
#dd-me .fnx-meav{width:38px;height:38px;border-radius:50%;background:var(--inset);
  border:1px solid var(--line);display:grid;place-items:center;font-size:15px;font-weight:900;
  flex:0 0 auto;background-size:cover;background-position:center;overflow:hidden}
#dd-me .fnx-mei{flex:1;min-width:0;display:block}
#dd-me .fnx-menm{font-size:13px;font-weight:900;letter-spacing:-.2px;display:flex;
  align-items:center;gap:5px;color:var(--ink)}
#dd-me .fnx-metag{font-size:9px;font-weight:900;color:#fff;background:var(--champ,#8b3df0);
  border-radius:3px;padding:1px 5px;letter-spacing:.4px}
#dd-me .fnx-mesub{font-size:10px;font-weight:700;color:var(--faint);margin-top:1px;
  display:flex;align-items:center;gap:4px}
#dd-me .fnx-melvl{height:4px;border-radius:2px;background:var(--inset);overflow:hidden;
  margin-top:5px;display:block}
#dd-me .fnx-melvl i{display:block;height:100%;background:var(--accent)}
#dd-me .fnx-mexp{font-size:9.5px;font-weight:700;color:var(--faint);margin-top:3px;display:block}
#dd-me .fnx-mexp b{color:var(--gold);font-weight:900}
#dd-me .fnx-megrid{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line)}
#dd-me .fnx-megrid a{padding:9px 4px;text-align:center;border-right:1px solid var(--line);
  text-decoration:none}
#dd-me .fnx-megrid a:last-child{border-right:0}
#dd-me .fnx-megrid a:hover{background:var(--zebra)}
#dd-me .fnx-megrid i{font-size:14px;color:var(--dim);display:block;margin-bottom:3px}
#dd-me .fnx-megrid span{font-size:9px;font-weight:900;text-transform:uppercase;
  letter-spacing:.5px;color:var(--dim)}
#dd-me .fnx-melinks{padding:5px 0}
#dd-me .fnx-melinks a,#dd-me .fnx-melinks button{display:flex;align-items:center;gap:9px;
  padding:7px 11px;font-size:12px;color:var(--ink2);width:100%;text-align:left;
  background:none;border:0;cursor:pointer;text-decoration:none}
#dd-me .fnx-melinks a:hover,#dd-me .fnx-melinks button:hover{background:var(--zebra);color:var(--ink)}
#dd-me .fnx-melinks i{font-size:13px;color:var(--faint);width:15px;text-align:center}
#dd-me .fnx-melinks .ct{margin-left:auto;min-width:16px;height:16px;padding:0 5px;
  border-radius:999px;background:var(--danger);color:#fff;font-size:9px;font-weight:900;
  display:grid;place-items:center}
#dd-me .fnx-melinks .kbd{margin-left:auto;font-size:9px;font-weight:800;color:var(--faint);
  border:1px solid var(--line);border-radius:3px;padding:1px 4px;white-space:nowrap}
#dd-me .fnx-mesep{height:1px;background:var(--line);margin:5px 0}
#dd-me .fnx-mdanger{color:var(--danger)!important}
#dd-me .fnx-mdanger i{color:var(--danger)!important}
#dd-me .fnx-champ{color:var(--champ,#8b3df0)!important}
#dd-me .fnx-champ i{color:var(--champ,#8b3df0)!important}
#dd-me .fnx-row{grid-template-columns:auto 1fr auto}

/* PHP-fallbacken göms först när React monterat — laddar inte React ser man
   exakt dagens menyer. */
html.forre-msgs-react #dd-msgs > .ddh,
html.forre-msgs-react #dd-msgs > .ddlist{display:none!important}
html.forre-van-react  #dd-friends > .ddh,
html.forre-van-react  #dd-friends > .ddlist{display:none!important}
html.forre-me-react   #dd-me > .me-head,
html.forre-me-react   #dd-me > .me-links{display:none!important}

/* SMART: vänikonen försvinner ur navbaren när ingen har frågat något.
   Tystnad är signalen. ?ikoner=alla stänger av regeln så den går att testa. */
html.fnx-inga-vanner:not(.fnx-tvinga-van) body .top .in .right .tb-item:has([data-dd="friends"]){display:none!important}

/* "Visa alla ikoner": radar, ärenden och crew ligger normalt bakom ••• */
/* Radarn och ärendeknappen är gömda med FLIT i pulse-shoutbox.php:536 och
   pulse-topdeck.css — radarns siffror bor på pulsraden, ärendena i kontomenyn.
   De reglerna har hög specificitet, så den här måste ha högre. Klassen sätts
   av pulse-topbar.php och är en rad att ta bort den dagen du vill tillbaka. */
html.fnx-alla-ikoner body .top .in .right .tb-item.tb-sec{display:inline-flex!important}
html.fnx-alla-ikoner body .top .in .right .tb-item:has(> [data-dd="radar"]){display:inline-flex!important}
html.fnx-alla-ikoner body .top .in .right .tb-item:has([data-dd="tickets"]){display:inline-flex!important}
html.fnx-alla-ikoner .top .right .more-btn{display:none!important}

/* ============================================================================
   FLIKPANELERNA (2026-08-01) — Butik · Streams · Forum · LFG.
   EN form för alla fyra: 288 px, max fem rader, alltid en fot.
   Den gamla flyouten var 166 / 170 / 472 px beroende på flik.
   ========================================================================== */
.fnx-fpwrap{position:fixed;z-index:1200;width:288px}
.fnx-fp{width:288px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 34px rgba(0,0,0,.22);overflow:hidden;
  --nt-friend:#2796f2;--nt-like:#f43f5e;--nt-comment:#3b82f6;--nt-mention:#8b5cf6;
  --nt-post:#22c55e;--nt-lfg:#10b981;--nt-squad:#f59e0b;--nt-reward:#eab308;
  --nt-news:#06b6d4;--nt-fortnite:#f97316;--nt-system:#64748b}
.fnx-fph{display:flex;align-items:center;gap:6px;padding:8px 11px;border-bottom:1px solid var(--line);
  font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.fnx-fph > i{font-size:11px;color:var(--accent)}
.fnx-fph .r{margin-left:auto;letter-spacing:0;color:var(--faint);font-size:9.5px}
.fnx-fprow{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:6px 11px;
  border-bottom:1px solid var(--line);--c:var(--accent);text-decoration:none;color:inherit}
.fnx-fprow:hover{background:var(--zebra)}
.fnx-fpav{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;font-size:12px;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);font-weight:900;
  background-size:cover;background-position:center;flex:0 0 auto}
.fnx-fpav.rund{border-radius:50%;color:#fff;font-size:11px;background-color:var(--c)}
.fnx-fpbd{min-width:0}
.fnx-fpt{font-size:12px;color:var(--ink);line-height:1.35;display:block;font-weight:400;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnx-fpt b{font-weight:800}
.fnx-fpm{font-size:10px;font-weight:700;color:var(--faint);margin-top:2px;display:flex;
  align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnx-fpm .ok{color:var(--live);display:inline-flex;align-items:center;gap:3px}
.fnx-fpm .ok i{font-size:6px}
.fnx-fpgo{font-size:11px;color:var(--faint)}
.fnx-fp .fnx-ct{min-width:16px;height:16px;padding:0 5px;border-radius:999px;background:var(--danger);
  color:#fff;font-size:9px;font-weight:900;display:grid;place-items:center;font-variant-numeric:tabular-nums}
/* Primärknappen — den enda fyllda ytan i panelen. Kentas regel: en hero. */
.fnx-fpcta{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;color:#fff;
  background:var(--accent);text-decoration:none}
.fnx-fpcta:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}
.fnx-fp .fnx-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;
  border-top:1px solid var(--line);font-size:11px;font-weight:800;color:var(--accent);text-decoration:none}
.fnx-fp .fnx-foot:hover{background:var(--zebra)}

/* De gamla PHP-flyouterna för LFG och Forum stängs av när React monterat —
   annars öppnas två paneler samtidigt. Squad-flyouten rörs INTE. */
html.forre-flikar-react #tdkLfgFly,
html.forre-flikar-react #tdkForumFly{display:none!important}

@media(prefers-reduced-motion:reduce){.fnx-fp{transition:none}}
@media(max-width:820px){.fnx-fpwrap{display:none}}

/* ============================================================================
   LFG-SIDANS SKAL — Kentas val 2026-08-01 (mockup B "Rummet")
   ============================================================================
   Före: .lfg6 .shell = 1fr 292px  →  main 864, högerrail 292.
   Uppmätt på live: railen var 612 px hög bredvid 587 px innehåll — längre än
   sidan den stod bredvid. Huvudkolumnens rader slutade vid ~640 px av 864.

   Efter: 250px 1fr → main 938 px, alltså BREDARE än före trots att en hel
   kolumn tillkommit. Vänsterrailen kostar 250, högerrailen ger 292.

   HANS MARKUP ÄR ORÖRD. Högerrailen flyttas inte i DOM och raderas inte —
   den placeras i rad 2 av kolumn 1, direkt under vänsterrailen, medan main
   spänner båda raderna i kolumn 2.

   SJÄLVGUARDANDE: hela blocket hänger på :has(> .rail.left). Renderas inte
   vänsterrailen (include borta, utloggad, fel tema) gäller ingenting av det
   här och sidan är exakt dagens sida.
--------------------------------------------------------------------------- */
.lfgp.lfg6 .shell:has(> .rail.left){
  grid-template-columns:250px minmax(0,1fr);
  align-items:start;
}
.lfgp.lfg6 .shell:has(> .rail.left) > .rail.left{ grid-column:1; grid-row:1; min-width:0; }
.lfgp.lfg6 .shell:has(> .rail.left) > main.main{ grid-column:2; grid-row:1 / span 2; min-width:0; }
.lfgp.lfg6 .shell:has(> .rail.left) > .rail:not(.left){ grid-column:1; grid-row:2; min-width:0; }

/* Railen ritades för 292 px. På 250 måste statuspanelens nyckel/värde-rader få
   brytas i stället för att spilla — mätt: "1 spelar nu · 1 söker lag" är den
   längsta strängen och går i 214 px vid 11 px text. */
.lfgp.lfg6 .shell:has(> .rail.left) > .rail:not(.left) .statp .kv{ flex-wrap:wrap; }
.lfgp.lfg6 .shell:has(> .rail.left) > .rail:not(.left) .statp .kv .v{ flex:1 0 100%; }

/* Mobil: pulse-skalets brytpunkt är 820 px överallt. Under den staplas allt,
   och vänsterrailen ska ligga SIST — på telefon vill man se grupperna först. */
@media (max-width:820px){
  .lfgp.lfg6 .shell:has(> .rail.left){ grid-template-columns:minmax(0,1fr); }
  .lfgp.lfg6 .shell:has(> .rail.left) > main.main{ grid-column:1; grid-row:1; }
  .lfgp.lfg6 .shell:has(> .rail.left) > .rail:not(.left){ grid-column:1; grid-row:2; }
  .lfgp.lfg6 .shell:has(> .rail.left) > .rail.left{ grid-column:1; grid-row:3; }
}

/* ============================================================================
   VÄGGEN — LFG-KORTET OCH SVARSRADEN   (2026-08-01, Kentas bild 1 + bild 2)
   ============================================================================
   Bild 1 är hur kortet SKA se ut, bild 2 är svarsraden han underkände:
   "när man svarar på inlägg ser det inte bra ut! ingen spaceing osv".

   Uppmätt på live före: kortet pad 9px 12px, gap 1px 10px, titel 13/800,
   meta 11px med margin-top 1px. Svarsraden: .cm gap 8, .cm-bub pad 7px 11px,
   .cm-meta margin-top 2px, .cpreview pad 0 12px 8px.

   Basreglerna bor kvar i wall-post-card.php — hans fil är orörd. Det här är
   ett lager ovanpå, i React-motorns egen CSS (BRAIN §0C R5), så det kan tas
   bort i ett stycke utan att röra väggen.
--------------------------------------------------------------------------- */

/* ── SPECIFICITET (uppmätt 2026-08-01) ─────────────────────────────────────
   Första försöket skrevs som `.wlfg{...}` och `.card.post .cpreview{...}`.
   Uppmätt på live efteråt: border-top och gap slog igenom, men padding och
   margin gjorde det INTE. Orsaken är att hans regler ligger i ett <style>-block
   INUTI wall-post-card.php (rad 422-439), alltså senare i dokumentet än
   forre-ui.css. Samma specificitet + senare i kaskaden = hans vinner, men bara
   på de egenskaper han faktiskt sätter. Därför dubblerad klass här
   (`.wlfg.wlfg`, 0-2-0 mot hans 0-1-0). Inga !important: de vinner allt för
   alltid och gör nästa ändring i HANS fil verkningslös.
--------------------------------------------------------------------------- */

/* ── LFG-KORTET ─────────────────────────────────────────────────────────────
   1px mellan titel och meta är för tätt när titeln är 13px/800 — de läses som
   ETT stycke. Bild 1 har luft där, och kortet andas i höjd. */
.wlfg.wlfg{ padding:11px 13px; gap:5px 12px; }
.wlfg.wlfg .wl-h{ font-size:9px; letter-spacing:1.1px; opacity:.85; }
.wlfg.wlfg .wl-t{ font-size:13.5px; line-height:1.35; }
.wlfg.wlfg .wl-m{ margin-top:0; font-size:11px; }

/* Knappen ska inte vara lika tung som postens egna handlingar — kortet är
   redan klickbart i sin helhet. Färg = betydelse: EN accent, inte två. */
.wlfg.wlfg .wl-go{ height:28px; padding:0 12px; align-self:center; }

/* Hela kortet är en länk. Utan detta får bara knappen fokusring och
   tangentbordsanvändaren ser aldrig var hen är. */
.wlfg.wlfg:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── SVARSRADEN ─────────────────────────────────────────────────────────────
   Felet var inte en enskild siffra utan att svarsblocket saknade GRÄNS mot
   inlägget ovanför: 8 px margin och inget mer, så kommentaren såg ut att
   tillhöra handlingsraden. En hårfin linje + luft gör den till ett eget stycke
   utan att lägga till en enda ny yta. */
.card.post .cpreview.cpreview{
  margin-top:0;
  padding:11px 12px 12px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card.post .cpreview.cpreview .cm{ gap:9px; align-items:flex-start; }

/* Bubblan: 7px höjd mot 11px sida gjorde texten hoptryckt vertikalt.
   8/12 ger samma optiska luft runt om. */
.card.post .cpreview.cpreview .cm-bub{ padding:8px 12px; border-radius:12px; }
.card.post .cpreview.cpreview .cm-nm{ line-height:1.4; }
.card.post .cpreview.cpreview .cm-tx{ margin-top:3px; line-height:1.5; }

/* Metaraden låg 2 px under bubblan med 4px vänsterpadding som inte linjerade
   med bubblans 12. Nu linjerar "2 min sedan" med namnet ovanför — Kentas
   symmetriregel: kanterna ska följa containerns synliga kant. */
.card.post .cpreview.cpreview .cm-meta{
  margin-top:5px;
  padding:0 0 0 12px;
  gap:12px;
  align-items:center;
}
.card.post .cpreview.cpreview .cm-meta .cm-a{ line-height:1.2; }

/* Flera kommentarer efter varandra separeras av luft, inte av linjer —
   linjer mellan svar gör en tråd till en tabell. */
.card.post .cpreview.cpreview .cm + .cm{ margin-top:2px; }

/* ── SÖKER LAG (2026-08-01) ────────────────────────────────────────────────
   Opt-in-kontrollen för "Spelare söker lag". Samma kontroll på fyra ytor —
   topbarens meny, LFG-railen, "För dig" och egen profil.
   §10b: grönt = närvaro (och bara då), max en färg i viloläge, kompakt.
   Vilande knapp är helt neutral; grönt vaknar först när du FAKTISKT syns. */
.fnx-seek{display:flex;flex-direction:column;gap:6px}
.fnx-seek-lage{display:flex;align-items:center;gap:6px;min-height:18px}
.fnx-seek-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.fnx-seek.pa .fnx-seek-dot,.fnx-seek-btn.pa .fnx-seek-dot{background:var(--ok,#2f9e44)}
.fnx-seek-lbl{font-size:11.5px;color:var(--dim);font-weight:500}
.fnx-seek.pa .fnx-seek-lbl{color:var(--ink)}
.fnx-seek-n{margin-left:auto;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}

.fnx-seek-btn{display:inline-flex;align-items:center;gap:6px;min-height:30px;
  padding:6px 10px;border:1px solid color-mix(in srgb,var(--dim) 30%,transparent);
  border-radius:var(--r,6px);
  background:var(--card);color:var(--ink);font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;text-align:left;width:100%;transition:border-color .12s,background .12s}
.fnx-seek-btn:hover{border-color:var(--accent);background:var(--hover,rgba(0,0,0,.03))}
.fnx-seek-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fnx-seek-btn.pa{border-color:color-mix(in srgb,var(--ok,#2f9e44) 55%,transparent)}
.fnx-seek-btn.jobbar{opacity:.6;cursor:progress}
.fnx-seek-btn .fnx-seek-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Knappen ensam (topbaren) bär sin egen prick — raden har redan en. */
.fnx-seek .fnx-seek-btn .fnx-seek-dot{display:none}

.fnx-seek-fel{font-size:11px;color:var(--danger,#c92a2a)}

/* R2: PHP-fallbacken göms FÖRST när React monterat. */
html.forre-seek-react .fnx-seek-php{display:none!important}

/* Fastet i topbarens kontomeny. Kontrollen ar en NARVAROVALJARE och hor hemma
   bredvid niva och XP - inte begravd pa en undersida. Kompakt per §10b:2. */
.tb-dd .me-seek{padding:6px 10px 2px}
.tb-dd .me-seek .fnx-seek{gap:4px}
.tb-dd .me-seek-a{display:flex;align-items:center;gap:7px;min-height:30px;
  font-size:12px;color:var(--ink);text-decoration:none}
.tb-dd .me-seek-a:hover{color:var(--accent)}
.tb-dd .fnx-meseek{padding:2px 12px 8px}
.tb-dd .fnx-meseek .fnx-seek{gap:5px}

/* ══════════════════════════════════════════════════════════════════════════
   AUTO-REMSAN — "C · Marginalen med A:s dragspel" (Kentas val 2026-08-01)
   Ersätter wall-post-card.php som digestens komponent. Väggen behåller kortet.
   Fyra typsteg: 12.5 rad · 12.5 kommentar · 11.5 antal/tid · 9.5 dagrubrik.
   ══════════════════════════════════════════════════════════════════════════ */
.fnx-am{--am-mar:76px}

/* Avatar-primitiven är scopad till .tb-dd i kärnan — remsan behöver egen scope,
   annars renderas <Avatar> helt ostylad här. (R5: scopa, skriv inte om.) */
.fnx-am .fnx-av{position:relative;width:18px;height:18px;flex:0 0 auto}
.fnx-am .fnx-im{width:18px;height:18px;border-radius:50%;background:var(--inset);
  border:1px solid var(--line);display:grid;place-items:center;font-size:8px;
  font-weight:900;color:var(--ink2);overflow:hidden;background-size:cover;background-position:center}
.fnx-am-tr .fnx-av,.fnx-am-tr .fnx-im{width:22px;height:22px;font-size:9.5px}

.fnx-am-dag{display:flex;align-items:center;gap:8px;padding:9px 14px 3px}
.fnx-am-dag .d{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.fnx-am-dag .hr{flex:1;height:1px;background:var(--line)}

.fnx-am-row{display:flex;align-items:center;gap:10px;min-height:30px;padding:0 14px;
  width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.fnx-am-row:hover{background:var(--zebra)}
.fnx-am-item.open .fnx-am-row{background:var(--zebra)}
.fnx-am-tx{flex:1;min-width:0;font-size:12.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnx-am-tx b{font-weight:700;color:var(--ink)}
.fnx-am-tx a{color:inherit}
.fnx-am-tx a:hover{text-decoration:underline}
/* Guld = duell/coins (etablerad betydelse). Siffran står i meningen, inte i en
   egen kolumn med enhetsetikett — "Dagar · Kills" under ett tal var två enheter. */
.fnx-am-tal{font-style:normal;font-weight:800;color:var(--gold);margin-left:6px;
  font-variant-numeric:tabular-nums}

/* Marginalen: ALLTID lika bred, tom eller ej. Det är den som gör att varje rad
   linjerar i lod oavsett om någon kommenterat. */
.fnx-am-mar{width:var(--am-mar);flex:0 0 auto;display:flex;align-items:center;
  justify-content:flex-end;gap:5px}
.fnx-am-stack{display:flex}
.fnx-am-stack .fnx-av{margin-left:-6px;box-shadow:0 0 0 2px var(--card);border-radius:50%}
.fnx-am-stack .fnx-av:first-child{margin-left:0}
.fnx-am-n{font-size:11.5px;font-weight:800;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.fnx-am-add{font-size:11px;font-weight:700;color:var(--faint);opacity:0;transition:opacity .12s}
.fnx-am-row:hover .fnx-am-add,.fnx-am-row:focus-visible .fnx-am-add{opacity:1}

.fnx-am-tr{padding:3px 14px 10px;background:var(--zebra);border-top:1px solid var(--line)}
.fnx-am-cm{display:flex;gap:8px;align-items:flex-start;padding:4px 0}
.fnx-am-cb{min-width:0}
.fnx-am-cn{font-size:11.5px;font-weight:800;color:var(--ink)}
.fnx-am-ct{font-size:12.5px;color:var(--ink2)}
.fnx-am-cw{font-size:10.5px;color:var(--faint);margin-left:6px}
.fnx-am-fler{display:inline-block;font-size:11.5px;font-weight:700;color:var(--accent-ink);margin:3px 0 0 30px}
.fnx-am-skriv{display:flex;gap:8px;margin-top:7px}
.fnx-am-in{flex:1;min-width:0;height:30px;border:1px solid var(--line2);border-radius:var(--r);
  background:var(--card);color:var(--ink);font-size:12.5px;padding:0 10px;font-family:inherit}
.fnx-am-in::placeholder{color:var(--faint)}
.fnx-am-in:disabled{opacity:.6}
.fnx-am-send{height:30px;padding:0 12px;border-radius:var(--r);background:var(--accent);
  color:#fff;font-size:12px;font-weight:700;border:0;cursor:pointer;font-family:inherit;flex:0 0 auto}
.fnx-am-fel{font-size:11px;color:var(--danger);margin-top:5px}

/* Mobil: hover finns inte — CTA:n måste synas. */
@media (max-width:820px){
  .fnx-am{--am-mar:64px}
  .fnx-am-add{opacity:1}
}

/* ── Ansiktskolumnen ("B · Ansiktet", Kentas val 2026-08-02) ─────────────
   Fast bredd så texten linjerar i lod oavsett ett eller två ansikten.
   Raden växte från 30 till 34 px — hela kostnaden för att kolumnen finns. */
.fnx-am-row{min-height:34px}
/* 32 px OAVSETT ett eller tva ansikten - annars borjar duellradernas mening
   6 px langre in an milstolparnas och kolumnen slutar vara en kolumn. */
.fnx-am-fc{position:relative;flex:0 0 32px;display:flex;align-items:center;height:22px}
.fnx-am .fnx-am-fc .fnx-av,.fnx-am .fnx-am-fc .fnx-im{width:22px;height:22px;font-size:9.5px}
.fnx-am .fnx-am-fc.duo .fnx-av,.fnx-am .fnx-am-fc.duo .fnx-im{width:20px;height:20px;font-size:9px}
.fnx-am-fc.duo .fnx-av + .fnx-av{margin-left:-8px;box-shadow:0 0 0 1.5px var(--card);border-radius:50%}
.fnx-am-item.open .fnx-am-fc.duo .fnx-av + .fnx-av,
.fnx-am-row:hover .fnx-am-fc.duo .fnx-av + .fnx-av{box-shadow:0 0 0 1.5px var(--zebra)}

/* Märket: typen, nere till höger. Ringen är kortets egen färg — den lyfter
   brickan från ansiktet utan att lägga till en ram i en ny kulör. */
.fnx-am-mk{position:absolute;right:-3px;bottom:-2px;width:14px;height:14px;border-radius:50%;
  display:grid;place-items:center;font-size:9px;line-height:1;color:var(--dim);
  background:var(--card);box-shadow:0 0 0 1.5px var(--card)}
.fnx-am-mk img{width:14px;height:14px;display:block;object-fit:contain}
.fnx-am-item.open .fnx-am-mk,.fnx-am-row:hover .fnx-am-mk{background:var(--zebra);box-shadow:0 0 0 1.5px var(--zebra)}
.fnx-am-mk.t-guld{color:var(--gold)}
.fnx-am-mk.t-lila{color:var(--champ)}
.fnx-am-mk.t-bla{color:var(--accent-ink)}
.fnx-am-mk.t-rod{color:var(--danger)}
.fnx-am-mk.t-gron{color:var(--live)}
.fnx-am-mk.t-gra{color:var(--dim)}

/* Traden linjerar under meningen: 14 padding + 32 ansikte + 10 gap. */
.fnx-am-tr{padding-left:56px}

/* R2: PHP-fallbacken göms FÖRST när ön monterat. */
html.forre-am-react .fnx-am-php{display:none!important}

/* Remsans rubrikrad. Låg som inline-<style> i hub/feed.php rad 1244-1251 —
   flyttad hit med markupen (§0C R5: aldrig inline-CSS i PHP). */
.amdig{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:12.5px;color:var(--ink2)}
.amdig .amic{width:22px;height:22px;border-radius:var(--r-sm);background:var(--inset);color:var(--dim);
  display:grid;place-items:center;font-size:12px;flex:0 0 auto}
.amdig .amtx{flex:1;min-width:0}
.amdig .amtx b{color:var(--ink);font-weight:800}
.amdig .amgo{font-size:11.5px;font-weight:700;color:var(--accent-ink);background:none;border:0;
  cursor:pointer;padding:0;font-family:inherit}
.amdig .amgo:hover{text-decoration:underline}
.ambody{border-top:1px solid var(--line)}

/* ============================================================================
   TOPPLISTAN 5.0 — React-ön (2026-08-02)
   ============================================================================
   Reglerna är hämtade RAKT UR design-proposals/topplistan-5.0-final-2026-08-02.html
   — inte omtolkade till utilities (BRAIN §0C R5: "mockupens CSS ÄR designen";
   vi tappade halva A2-mockupen genom att översätta den).

   Namnrymd: allt är scopat till `.fnx-lb`, samma teknik som `.tb-dd .fnx-*`.
   Inga hårdkodade hex — bara sajtens tokens, så ljust/mörkt följer med gratis.

   Uppmätta mål (live 2026-08-02): radhöjd 45 px (16 px namnrad + 14 px metarad
   + 2×7 px luft = 30 px innehåll som matchar avatarens 30 px), spalt 250/562/320,
   typvikter enligt live (namn 13,5/600 · meta 11/400 · rubrik 12,5/600 ·
   tabellhuvud 10/500 · poäng 13,5/700) — INTE en vikt tyngre, det var felet
   som fick mockupen att kännas större än navbaren.
   ========================================================================== */
.fnx-lb{display:contents}

/* ── Kort & rubriker ─────────────────────────────────────────────────── */
.fnx-lb .lbc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.fnx-lb .lbhd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.fnx-lb .lbt{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink);min-width:0}
.fnx-lb .lbic{width:22px;height:22px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 auto}
.fnx-lb .lbic i{line-height:1}
.fnx-lb .lbic.gold{background:var(--inset);color:var(--gold)}
.fnx-lb .lbic.live{background:var(--live-wash);color:var(--live)}
.fnx-lb .lbic.comp{background:var(--accent-wash);color:var(--accent-ink)}
.fnx-lb .lbic.champ{background:var(--inset);color:var(--champ)}

/* Klockchipet — railens viktigaste tillägg. Fyra kort, fyra tidshorisonter. */
.fnx-lb .lbclock{flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:var(--r-sm);background:var(--inset);color:var(--dim);white-space:nowrap}
.fnx-lb .lbclock.nu{background:var(--live-wash);color:var(--live)}
.fnx-lb .lbclock.vecka{background:var(--accent-wash);color:var(--accent-ink)}
.fnx-lb .lbclock.sasong{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.fnx-lb .lbclock.evig{background:var(--champ-w);color:var(--champ)}
.fnx-lb .lbnote{padding:6px 12px 8px;font-size:10.5px;line-height:1.4;color:var(--dim)}
.fnx-lb .lbnote b{color:var(--ink2);font-weight:700}
.fnx-lb .lbfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;font-size:11px;color:var(--dim);border-top:1px solid var(--line)}
.fnx-lb .lbfoot b{color:var(--ink2);font-weight:700}
.fnx-lb .lbfoot a{color:var(--accent-ink);font-weight:600}
.fnx-lb .lbempty{padding:15px 12px;text-align:center}
.fnx-lb .lbempty .ic{width:30px;height:30px;border-radius:50%;background:var(--inset);color:var(--dim);display:grid;place-items:center;margin:0 auto 7px;font-size:13px}
.fnx-lb .lbempty .t{font-size:12px;font-weight:600;color:var(--ink)}
.fnx-lb .lbempty .s{font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.45}

/* ── Knappar, brickor, avatarer ──────────────────────────────────────── */
.fnx-lb .lbbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:13px;padding:8px 14px;border-radius:var(--r);border:1px solid transparent;color:var(--ink);white-space:nowrap;cursor:pointer;transition:background .12s ease-out,border-color .12s ease-out,color .12s ease-out}
.fnx-lb .lbbtn.p{background:var(--accent);color:#fff}
.fnx-lb .lbbtn.p:hover{background:var(--accent-ink)}
.fnx-lb .lbbtn.g{background:var(--card);border-color:var(--line2)}
.fnx-lb .lbbtn.g:hover{border-color:var(--accent);color:var(--accent)}
.fnx-lb .lbbtn.q{background:transparent;color:var(--dim);padding:8px 10px}
.fnx-lb .lbbtn.q:hover{color:var(--ink);background:var(--inset)}
.fnx-lb .lbbtn.sm{font-size:12px;padding:6px 11px}
.fnx-lb .lbdgb{font-weight:700;font-size:11px;padding:2px 7px;border-radius:var(--r-sm);letter-spacing:.02em;white-space:nowrap;display:inline-block}
.fnx-lb .lbdgb.champ,.fnx-lb .lbdgb.unreal{color:var(--champ);background:var(--champ-w)}
.fnx-lb .lbdgb.elite{color:var(--elite);background:var(--elite-w)}
.fnx-lb .lbdgb.dia{color:var(--dia);background:var(--dia-w)}
.fnx-lb .lbdgb.plat{color:var(--plat);background:var(--plat-w)}
.fnx-lb .lbdgb.gold{color:var(--gold-r);background:color-mix(in srgb,var(--gold-r) 15%,transparent)}
.fnx-lb .lbdgb.silver{color:var(--dim);background:color-mix(in srgb,var(--dim) 16%,transparent)}
.fnx-lb .lbav{width:30px;height:30px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--inset);border:1px solid var(--line);display:grid;place-items:center;position:relative;font-size:10.5px;font-weight:700;color:var(--ink2);overflow:visible}
.fnx-lb .lbav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.fnx-lb .lbav.sm{width:22px;height:22px;font-size:9px}
.fnx-lb .lbav.on::after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:var(--live);border:2px solid var(--card)}
.fnx-lb .lbav.sm.on::after{right:-3px;bottom:-3px;width:7px;height:7px}
.fnx-lb .lbnm2{font-size:12.5px;font-weight:500;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}
.fnx-lb .lbmeta{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}

/* ── Raden: 45 px, hub-väggens typskala ──────────────────────────────── */
.fnx-lb .lbr{display:grid;align-items:center;gap:9px;padding:7px 12px;min-height:45px;box-sizing:border-box;border-bottom:1px solid var(--line);position:relative}
.fnx-lb .lbr:last-of-type{border-bottom:0}
.fnx-lb .lbr:nth-of-type(even){background:var(--zebra)}
.fnx-lb .lbr:hover{background:var(--inset)}
/* Egen modifierare, INTE `me` (2026-08-02). Sajten har tva globala, klasslosa
   `.me`-regler (border-radius:30px och 50%) — sannolikt for meddelandebubblor.
   Min rad arvde dem och ritades som ett agg i stallet for en radmarkering. */
.fnx-lb .lbr.lbjag,.fnx-lb .lbr.lbjag:hover{background:var(--accent-wash);border-radius:0}
/* Rank-cellen: siffran högerställd i 20 px, Δ bredvid i resten. Δ låg förut
   absolutpositionerad ovanpå siffran och "▲107" spillde utanför kolumnen. */
.fnx-lb .lbrk{display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px;align-items:center;font-variant-numeric:tabular-nums}
.fnx-lb .lbrk .n{font-size:13px;font-weight:400;color:var(--dim);text-align:right}
.fnx-lb .lbr.p1 .lbrk .n{font-weight:800;color:var(--gold)}
.fnx-lb .lbr.p2 .lbrk .n,.fnx-lb .lbr.p3 .lbrk .n{font-weight:800;color:var(--ink2)}
.fnx-lb .lbr.lbjag .lbrk .n{color:var(--accent-ink);font-weight:800}
.fnx-lb .lbdl{font-size:9px;font-weight:800;line-height:1;text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.fnx-lb .lbdl.up{color:var(--live)}
.fnx-lb .lbdl.dn{color:var(--danger)}
.fnx-lb .lbwho{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:center;min-width:0}
.fnx-lb .lbn1{display:flex;align-items:center;gap:5px;min-width:0;height:16px}
.fnx-lb .lbnm{font-size:13.5px;font-weight:600;line-height:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fnx-lb a.lbnm:hover{color:var(--accent-ink)}
.fnx-lb .lbn2{display:flex;align-items:center;gap:5px;min-width:0;height:14px;font-size:11px;line-height:14px;font-weight:400;color:var(--dim);white-space:nowrap;overflow:hidden}
.fnx-lb .lbn2 .sep{color:var(--faint)}
/* Alla chip i en rad med låst höjd måste tvingas till radhöjden — annars
   växer raden tyst (rankbrickan är 19 px med sin normala padding). */
.fnx-lb .lbn2 .lbdgb{font-size:9.5px;line-height:14px;padding:0 5px;height:14px}
.fnx-lb .lbn2 .lbarch{font-size:9.5px;font-weight:700;color:var(--dim);line-height:14px;letter-spacing:.03em}
.fnx-lb .lbnum{font-size:13px;font-weight:400;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
.fnx-lb .lbpts{font-size:13.5px;font-weight:700;color:var(--accent-ink);text-align:right;font-variant-numeric:tabular-nums}
.fnx-lb .lbtag{flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 15%,transparent);border-radius:var(--r-sm);padding:1px 5px}
.fnx-lb .lbtag.live{color:var(--live);background:var(--live-wash)}
.fnx-lb .lbstrm{flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--danger);border-radius:var(--r-sm);padding:1px 5px}
.fnx-lb .lbbadge{flex:0 0 auto;width:13px;height:13px;border-radius:3px;background:var(--champ-w);color:var(--champ);display:inline-grid;place-items:center;font-size:8px}
.fnx-lb .lbtitle{flex:0 0 auto;font-size:9px;font-weight:700;padding:0 5px;height:14px;line-height:14px;border-radius:var(--r-sm);background:var(--inset);color:var(--ink2);max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Formpilen renderas BARA när formen säger något — platt form = tom cell,
   annars konkurrerar den med Δ-markören till vänster. Tystnad är signalen. */
.fnx-lb .lbform{font-size:11px;line-height:1;text-align:center}
.fnx-lb .lbform.up{color:var(--live)}
.fnx-lb .lbform.dn{color:var(--danger)}
.fnx-lb .lbrkico{width:13px;height:13px;object-fit:contain;flex:0 0 auto;vertical-align:middle}

/* Kolumnrutnät */
.fnx-lb .lbh{display:grid;align-items:center;gap:9px;padding:6px 12px;border-bottom:1px solid var(--line);font-size:10px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.fnx-lb .lbh .ar{text-align:right}
.fnx-lb .lbh .ac{text-align:center}
.fnx-lb .lbh.gL>span:first-child{text-align:right;padding-right:30px}
.fnx-lb .gL{grid-template-columns:50px minmax(0,1fr) 22px 46px 62px}
/* Relationskolumnen bär TRE saker: avstånd (~40px) + duellbricka (~28px) +
   Utmana (26px) + 2×6px gap ≈ 106px. Mockupens 74px var mätt på en rad utan
   bricka — vid 74 kröp brickan in över namnet. Namnet tappar 34px och har
   ändå ~289px; det trunkerar redan med ellips. */
.fnx-lb .gR{grid-template-columns:50px minmax(0,1fr) 108px 62px}

/* ── Sorterings-/filterrad ───────────────────────────────────────────── */
.fnx-lb .lbbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line)}
.fnx-lb .lbseg{display:flex;gap:2px;background:var(--inset);border-radius:var(--r);padding:2px}
.fnx-lb .lbseg a,.fnx-lb .lbseg button{height:26px;padding:0 10px;border-radius:var(--r-sm);font-size:11.5px;font-weight:600;color:var(--dim);display:inline-flex;align-items:center;cursor:pointer;transition:background .12s ease-out,color .12s ease-out}
.fnx-lb .lbseg a:hover,.fnx-lb .lbseg button:hover{color:var(--ink)}
.fnx-lb .lbseg .on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.fnx-lb .lbseg .on.pri{color:var(--accent-ink)}
.fnx-lb .lbfl{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:1px solid var(--line2);border-radius:var(--r);font-size:11.5px;font-weight:600;color:var(--ink2);cursor:pointer;transition:border-color .12s ease-out,color .12s ease-out}
.fnx-lb .lbfl:hover{border-color:var(--accent);color:var(--accent)}
.fnx-lb .lbfl.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
.fnx-lb .lbfl i{font-size:10px;color:var(--faint)}

/* ── Ditt band ───────────────────────────────────────────────────────── */
/* Bandet är DIN RAD, inte en scoreboard — därför --accent-wash, samma token
   som .lbt-me använder. Board-tonen var fel lån och blev en svart list. */
.fnx-lb .lbband{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;background:var(--card)}
.fnx-lb .lbband-t{background:var(--accent-wash);color:var(--ink);padding:10px 13px;border-bottom:1px solid var(--line)}
.fnx-lb .lbband-g{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.fnx-lb .lbme{display:flex;align-items:center;gap:9px;white-space:nowrap}
.fnx-lb .lbme .p{font-size:24px;font-weight:900;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent-ink)}
.fnx-lb .lbme .st{display:flex;flex-direction:column;gap:1px}
.fnx-lb .lbme .of{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.fnx-lb .lbmv{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;color:var(--live);font-variant-numeric:tabular-nums}
.fnx-lb .lbmv.dn{color:var(--danger)}
.fnx-lb .lbgap{min-width:0;display:flex;align-items:center;gap:9px}
.fnx-lb .lbgap .tx{font-size:11.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnx-lb .lbgap .tx b{color:var(--ink);font-weight:700}
.fnx-lb .lbgap .tr{flex:1 1 auto;min-width:36px;height:4px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.fnx-lb .lbgap .tr i{display:block;height:100%;background:var(--live);border-radius:999px}
.fnx-lb .lbacts{display:flex;gap:6px;align-items:center}
.fnx-lb .lbstats{display:flex;background:var(--card)}
.fnx-lb .lbst{flex:1 1 0;min-width:0;text-align:center;padding:8px 4px}
.fnx-lb .lbst .v{font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.fnx-lb .lbst .l{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-top:2px}

/* ── Rivalgruppen ────────────────────────────────────────────────────── */
.fnx-lb .lbrel{display:flex;align-items:center;gap:6px;justify-content:flex-end;white-space:nowrap}
/* Avståndet är INTE färgkodat: rött = trasigt och grönt = live på den här
   sajten, och den som ligger 111 p före dig är varken. Tecken + vikt bär det. */
.fnx-lb .lbgapn{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--dim)}
.fnx-lb .lbgapn.up{color:var(--ink2)}
.fnx-lb .lbgapn.dn{color:var(--dim);font-weight:500}
.fnx-lb .lbduel{font-size:9px;font-weight:800;letter-spacing:.05em;padding:1px 5px;border-radius:var(--r-sm);background:var(--inset);color:var(--dim);font-variant-numeric:tabular-nums}
.fnx-lb .lbduel.w{background:var(--live-wash);color:var(--live)}
.fnx-lb .lbduel.l{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.fnx-lb .lbib{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--dim);font-size:12px;cursor:pointer;border:0;background:transparent;transition:background .12s ease-out,color .12s ease-out}
.fnx-lb .lbib:hover{background:var(--inset);color:var(--accent)}

/* ── Railrader (32 px) ───────────────────────────────────────────────── */
.fnx-lb .lbmrow{display:grid;grid-template-columns:18px 22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 12px;min-height:32px;box-sizing:border-box;border-bottom:1px solid var(--line)}
.fnx-lb .lbmrow:last-of-type{border-bottom:0}
.fnx-lb .lbmrow.norank{grid-template-columns:22px minmax(0,1fr) auto}
.fnx-lb .lbmrow .rk{font-size:11px;font-weight:500;color:var(--dim);font-variant-numeric:tabular-nums;text-align:center}
.fnx-lb .lbmrow .v{font-size:12.5px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}

/* Aktiva nu efter en poll-tick. pulse-leaderboard.js skriver sin egen .trow-
   markup i [data-role="aktiva-list"]; de har reglerna ger den EXAKT samma
   geometri som .lbmrow.norank sa kortet inte hoppar nar listan uppdateras.
   Namn och meta laggs pa SAMMA rad (som .lbone) — pollarens markup staplar dem,
   vilket gav 39 px rader i ett 32 px-kort.
   ID-selektor, inte .fnx-lb: sidans egna `.rail.right .trow`-regler har samma
   specificitet som `.fnx-lb .trow` och ligger SENARE i kaskaden (inline
   <style> i vyn), sa de vann. #pulseAktivaNu finns bara pa det har kortet. */
.fnx-lb #pulseAktivaNu .trow{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 12px;min-height:32px;box-sizing:border-box;border-bottom:1px solid var(--line);cursor:pointer}
.fnx-lb #pulseAktivaNu .trow:last-of-type{border-bottom:0}
.fnx-lb #pulseAktivaNu .trow:hover{background:var(--inset)}
.fnx-lb #pulseAktivaNu .trow>div{display:flex;align-items:baseline;gap:5px;min-width:0}
.fnx-lb #pulseAktivaNu .trow .av{position:relative;width:22px;height:22px;border-radius:var(--r-sm);overflow:hidden;display:grid;place-items:center;background:var(--inset);font-size:8.5px;font-weight:800;color:var(--dim)}
.fnx-lb #pulseAktivaNu .trow .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fnx-lb #pulseAktivaNu .trow .av i{display:none}
.fnx-lb #pulseAktivaNu .trow .nm{flex:0 1 auto;min-width:0;font-size:12.5px;font-weight:500;color:var(--ink2);line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnx-lb #pulseAktivaNu .trow .nm a{color:inherit;text-decoration:none}
.fnx-lb #pulseAktivaNu .trow .nm a:hover{color:var(--accent-ink)}
.fnx-lb #pulseAktivaNu .trow .md{flex:1 1 auto;min-width:0;font-size:10.5px;color:var(--dim);line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Kills-cellen delas av BADA tillstanden: React-raden (.lbmrow) fore forsta
   poll-ticken och pollarens .trow efter. Samma markup + samma regler => kortet
   ser exakt likadant ut fore och efter en uppdatering. */
.fnx-lb #pulseAktivaNu .kx{display:inline-flex;align-items:baseline;gap:3px}
.fnx-lb #pulseAktivaNu .kn{font-size:12.5px;font-weight:600;color:var(--live);font-variant-numeric:tabular-nums}
.fnx-lb #pulseAktivaNu .kl{display:inline;font-size:9px;font-weight:500;color:var(--dim)}
.fnx-lb .lbone{display:flex;align-items:baseline;gap:5px;min-width:0}
.fnx-lb .lbone>.lbnm2{flex:0 1 auto;min-width:0;line-height:15px}
.fnx-lb .lbone>.lbmeta{flex:1 1 auto;min-width:0;line-height:15px}
.fnx-lb .lbmerow{display:grid;grid-template-columns:18px 22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 12px;background:var(--accent-wash);border-top:1px solid var(--line)}
.fnx-lb .lbmerow .rk{font-size:11px;font-weight:800;color:var(--accent-ink);text-align:center;font-variant-numeric:tabular-nums}
.fnx-lb .lbmerow .v{font-size:12.5px;font-weight:800;color:var(--accent-ink);font-variant-numeric:tabular-nums}

/* ── Hall of fame ────────────────────────────────────────────────────── */
.fnx-lb .lbhof.snart{border-color:color-mix(in srgb,var(--gold) 50%,var(--line))}
.fnx-lb .lbhof.last{border-color:color-mix(in srgb,var(--gold) 32%,var(--line))}
.fnx-lb .lbdrama{padding:9px 12px;background:color-mix(in srgb,var(--gold) 11%,transparent);border-bottom:1px solid var(--line)}
.fnx-lb .lbdrama .h{font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.03em}
.fnx-lb .lbdrama .s{font-size:10.5px;color:var(--ink2);margin-top:2px;line-height:1.45}
.fnx-lb .lbhero{display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
.fnx-lb .lbcr{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 15%,transparent);color:var(--gold);font-size:18px}
.fnx-lb .lbhof.preview .lbcr{background:var(--inset);color:var(--dim)}
.fnx-lb .lbhlb{display:block;font-size:8.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnx-lb .lbhof.preview .lbhlb{color:var(--dim)}
.fnx-lb .lbhnm{display:block;font-size:15px;font-weight:700;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnx-lb .lbhof.preview .lbhnm{color:var(--ink2)}
.fnx-lb .lbhst{display:block;font-size:10.5px;color:var(--dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnx-lb .lbhst b{color:var(--ink2);font-weight:700}
.fnx-lb .lbarc{padding:11px 12px 5px;font-size:8.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);border-top:1px solid var(--line)}
.fnx-lb .lbshelf{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--line)}
.fnx-lb .lbshelf:last-of-type{border-bottom:0}
.fnx-lb .lbshelf .ic{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:12px}
.fnx-lb .lbshelf .ic.g{background:color-mix(in srgb,var(--gold) 15%,transparent);color:var(--gold)}
.fnx-lb .lbshelf .ic.v{background:var(--accent-wash);color:var(--accent-ink)}
.fnx-lb .lbshelf .w{display:block;line-height:15px;font-size:12.5px;font-weight:500;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnx-lb .lbshelf .m{display:block;font-size:10px;line-height:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnx-lb .lbshelf .tag{font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--dim);white-space:nowrap}

/* ── Grafikpanelen ───────────────────────────────────────────────────── */
.fnx-lb .lbg{padding:12px}
.fnx-lb .lbgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px}
.fnx-lb .lbbox{background:var(--inset);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.fnx-lb .lbbh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.fnx-lb .lbbh .t{font-size:10.5px;font-weight:700;color:var(--ink2)}
.fnx-lb .lbbh .v{font-size:10.5px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums}
.fnx-lb .lbchart{width:100%;height:auto;display:block;overflow:visible}
.fnx-lb .lbchart .ln{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fnx-lb .lbchart .ar{fill:var(--accent);opacity:.10}
.fnx-lb .lbchart .gd{stroke:var(--line);stroke-width:1}
.fnx-lb .lbchart .dt{fill:var(--accent)}
/* Placeringskurvan färgas av RIKTNINGEN, inte av att den är en placeringskurva.
   Mockupen ritade den grön för att dess data klättrade (#45→#42); med en kurva
   som sjunker (#30→#42) påstod samma gröna att det gick bra. Grönt = du har
   klättrat. Sjunker den blir den neutral — inte röd: rött betyder trasigt här,
   och att tappa placeringar är inte ett fel. */
.fnx-lb .lbchart.rank .ln{stroke:var(--live)}
.fnx-lb .lbchart.rank .ar{fill:var(--live)}
.fnx-lb .lbchart.rank .dt{fill:var(--live)}
.fnx-lb .lbchart.rank.ner .ln{stroke:var(--ink2)}
.fnx-lb .lbchart.rank.ner .ar{fill:var(--ink2)}
.fnx-lb .lbchart.rank.ner .dt{fill:var(--ink2)}
.fnx-lb .lbstack{height:9px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);display:flex;overflow:hidden}
.fnx-lb .lbstack i{display:block;height:100%}
.fnx-lb .lbleg{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:var(--dim);margin-top:7px}
.fnx-lb .lbleg i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:4px}
.fnx-lb .lbleg b{color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums}
.fnx-lb .lbmodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;margin-top:10px}
.fnx-lb .lbmode{background:var(--card);padding:8px 7px;min-width:0;text-align:center}
.fnx-lb .lbmode .m{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnx-lb .lbmode .r{margin-top:4px}
.fnx-lb .lbmode.best{background:var(--accent-wash)}

/* ── Paginering ──────────────────────────────────────────────────────── */
.fnx-lb .lbpager{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 0 10px;border-top:1px solid var(--line);flex-wrap:wrap}
.fnx-lb .lbpager span,.fnx-lb .lbpager a{min-width:30px;height:30px;padding:0 9px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:500;color:var(--dim);border:1px solid var(--line)}
.fnx-lb .lbpager a:hover{border-color:var(--accent);color:var(--accent)}
.fnx-lb .lbpager .on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.fnx-lb .lbpager .gapdot{border-color:transparent}
/* "Min #NN" — genvagen till din egen rad, fanns i PHP-pagern. Skiljs fran
   siffrorna med marginal sa den last som en handling, inte som en sida till. */
.fnx-lb .lbpager .lbjump{margin-left:9px;gap:5px;color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 35%,transparent);font-weight:600}
.fnx-lb .lbpager .lbjump:hover{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-ink)}

/* ── Rad-fot (CTA under en lista) ────────────────────────────────────── */
.fnx-lb .lbcta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;flex-wrap:wrap;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink2)}
.fnx-lb .lbcta b{color:var(--ink);font-weight:700}

/* ── Mobil: samma brytpunkt som pulse-skalet ─────────────────────────── */
@media(max-width:820px){
  .fnx-lb .gL{grid-template-columns:44px minmax(0,1fr) 22px 44px 56px}
  .fnx-lb .gR{grid-template-columns:44px minmax(0,1fr) 62px 54px}
  .fnx-lb .lbh.gL>span:nth-child(3){display:none}
  .fnx-lb .lbband-g{grid-template-columns:minmax(0,1fr);gap:10px}
  .fnx-lb .lbstats{overflow-x:auto}
  .fnx-lb .lbst{min-width:62px}
  .fnx-lb .lbacts .lbbtn{flex:1 1 auto}
  .fnx-lb .lbgrid{grid-template-columns:minmax(0,1fr)}
  .fnx-lb .lbmodes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fnx-lb .lbduel{display:none}
  .fnx-lb .lbbar{flex-wrap:nowrap;overflow-x:auto}
  .fnx-lb .lbseg,.fnx-lb .lbfl{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){.fnx-lb *{transition:none!important;animation:none!important}}

/* PHP-fallbacken göms FÖRST när React monterat (BRAIN §0C R2). */
html.forre-lb-react .fnx-lb-php{display:none!important}