/* ============================================================================
   FORRE.NU — DET NYA TEMAT (forre_ny) · grunden + skalet
   Källa: design-proposals/nytt-forre-2026-10-20.html, riktning C (A:s skal,
   B:s sidor). Kenta 2026-10-20: "BARA BÖRJA BYGGA SKA SE EXAKT UT SOM MOCKUP".

   ★ LADDAS BARA I forre_ny (app/Helpers/PulseAssets.php). forre_pulse ser
     aldrig den här filen, så :root-tokens nedan rör inte dagens sajt.
   ★ PREFIX: n- (byggklossar), nt- (skalet), np- (paneler/rutnät som alla
     sidor delar). Inga generiska klassnamn — forre_pulse.css laddas fortfarande
     för de sidor som inte byggts om, och .av/.ml/.sp finns redan där.
   ★ TOKENS: forre_pulse :root + [data-theme="dark"] gäller oförändrade. Här
     läggs bara mockupens tillägg (cupens orange, rumsfärgerna, rubriktypsnittet).
   ============================================================================ */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  --hw:#ff7a1a; --hw-ink:#b4500c; --hw-wash:#fff1e6; --hw-on:#1c0c00;
  --raise:#e9ecf0; --sh2:0 10px 30px rgba(16,24,40,.10);
  --r-bronze:#b8693a; --r-silver:#6f7c9e;
  --c-spela:color-mix(in srgb,var(--live) 76%,#000); --c-tavla:var(--gold); --c-cup:var(--hw-ink);
  --c-spr:var(--champ); --c-snack:var(--accent-ink); --c-fira:#e0336f; --c-shop:var(--elite);
  --hd:"Roboto Condensed",Roboto,sans-serif; --ui:Roboto,system-ui,sans-serif;
  --ny-w:1360px; --nt-h:56px; --nt-sub:42px;
  /* LOGGAN: F-ringen och ".NU" bär ALLTID samma färg (Kenta 2026-10-21). Märkets blå till
     vardags; säsongsfärgen kommer från <html data-logo> (app/Helpers/TemaService.php). */
  --logo:var(--accent);
}
/* Halloween-orange: samma val som högtidens märke (pulse-hogtid.css --hw-mark) — #ff7a1a mot
   vitt ger bara 2,6:1, så ljust läge bär den mörkare --hw-ink. Mörkt läge: rena --hw. */
html[data-logo="halloween"]{--logo:var(--hw-ink)}
html[data-logo="halloween"][data-theme="dark"]{--logo:var(--hw)}
[data-theme="dark"]{
  --hw-ink:#ff9a4d; --hw-wash:#2a1a0f;
  --raise:#232323; --sh2:0 10px 30px rgba(0,0,0,.45);
  --r-bronze:#e0905c; --r-silver:#aab6d8;
  --c-spela:var(--live); --c-fira:#ff5f97;
}
/* NIVÅTONERNA — EN ägare i nya temat (2026-10-21, flyttade ur ny-topplista.css .nlb med samma
   värden): topplistan och bragdraden i toppen säger samma rank i samma färg. Ljust = mörka
   toner mot vitt, mörkt = ljusa. -w = tvätten bakom en etikett, -f = fyllnaden i en stapel. */
:root{
  --t-unreal:var(--champ);    --t-unreal-w:var(--champ-w);    --t-unreal-f:var(--champ);
  --t-champion:#c85708;       --t-champion-w:#ffe6d1;         --t-champion-f:#c85708;
  --t-elite:var(--elite);     --t-elite-w:var(--elite-w);     --t-elite-f:var(--elite);
  --t-diamond:var(--dia);     --t-diamond-w:var(--dia-w);     --t-diamond-f:var(--dia);
  --t-platinum:var(--plat);   --t-platinum-w:var(--plat-w);   --t-platinum-f:var(--plat);
  --t-gold:var(--gold-r);     --t-gold-w:color-mix(in srgb,var(--gold-r) 15%,transparent); --t-gold-f:var(--gold-r);
  --t-silver:#5f6a75;         --t-silver-w:#e9ecef;           --t-silver-f:#8b96a3;
  --t-bronze:#7a4f22;         --t-bronze-w:#efe0cf;           --t-bronze-f:#b07a3c;
}
[data-theme="dark"]{
  --t-champion:var(--hw-ink); --t-champion-w:#33210f;         --t-champion-f:var(--hw-ink);
  --t-silver:#8b96a3;         --t-silver-w:#2a2e33;
  --t-bronze:#c4996b;         --t-bronze-w:#3a2c1c;
}

/* ---------------------------------------------------------------- 2. SIDAN */
body.pulse-shell{background:var(--bg);font:400 14px/1.45 var(--ui)}
body::after{content:none!important;display:none!important}
.nt-in{width:min(var(--ny-w),calc(100% - 40px));margin:0 auto}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- 3. BYGGKLOSSAR */
.n-num{font-family:var(--hd);font-variant-numeric:tabular-nums}
.n-lk{color:var(--accent-ink);font-weight:500;cursor:pointer;text-decoration:none}
.n-lk:hover{text-decoration:underline}
.n-kbd{font:600 10.5px/1 var(--ui);color:var(--dim);background:var(--card);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:3px 5px}
.n-dim{color:var(--dim)}

/* avatarer — runda = människa. Bilden ligger över initialerna; faller bilden bort syns de. */
.n-av{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s,32px);height:var(--s,32px);border-radius:50%;background:var(--inset);color:var(--ink2);overflow:hidden;box-shadow:0 0 0 1px var(--line) inset;vertical-align:middle;font:700 var(--f,11px)/1 var(--hd);letter-spacing:.02em;text-transform:uppercase}
.n-av>b{font:inherit;color:inherit;white-space:nowrap}
.n-av>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.n-av.s16{--s:16px;--f:7px}.n-av.s18{--s:18px;--f:7px}.n-av.s20{--s:20px;--f:8px}.n-av.s24{--s:24px;--f:9px}
.n-av.s26{--s:26px;--f:9px}.n-av.s28{--s:28px;--f:10px}.n-av.s30{--s:30px;--f:10px}.n-av.s32{--s:32px;--f:11px}
.n-av.s36{--s:36px;--f:12px}.n-av.s40{--s:40px;--f:13px}.n-av.s44{--s:44px;--f:14px}.n-av.s48{--s:48px;--f:15px}
.n-av.s52{--s:52px;--f:16px}.n-av.s56{--s:56px;--f:17px}.n-av.s64{--s:64px;--f:19px}.n-av.s72{--s:72px;--f:22px}
.n-av.s96{--s:96px;--f:28px}.n-av.s112{--s:112px;--f:32px}.n-av.s128{--s:128px;--f:36px}
.n-sq{border-radius:8px}
/* statusringen — grön = spelar/sänder, blå = söker folk. Aldrig två ringar */
.n-ring{border-radius:50%;padding:2px;box-shadow:0 0 0 2px var(--live);display:inline-flex;flex:none;margin:2px}
.n-ring.blue{box-shadow:0 0 0 2px var(--accent)}
.n-ring>.n-av{box-shadow:none}
.n-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);flex:none}
.n-dot.on{background:color-mix(in srgb,var(--live) 55%,var(--card));box-shadow:0 0 0 1.5px var(--live) inset}
.n-dot.blue{background:var(--accent)}
.n-dot.dim{background:var(--faint)}
.n-fp{display:inline-flex;align-items:center}
.n-fp>.n-av{box-shadow:0 0 0 2px var(--card)}
.n-fp>.n-av+.n-av{margin-left:-7px}

/* knappar — EN fylld per yta, logoblå */
.n-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r);font:600 12.5px/1 var(--ui);white-space:nowrap;border:1px solid transparent;color:var(--ink);background:transparent;cursor:pointer;flex:none;text-decoration:none}
.n-btn i{font-size:13px}
.n-btn.p{background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff}
.n-btn.p:hover{background:color-mix(in srgb,var(--accent) 68%,#000)}
[data-theme="dark"] .n-btn.p{background:var(--accent);color:#06121f}
[data-theme="dark"] .n-btn.p:hover{background:var(--accent-ink)}
.n-btn.s{border-color:var(--line2);color:var(--ink)}
.n-btn.s:hover{border-color:var(--accent);color:var(--accent-ink)}
.n-btn.g{color:var(--accent-ink);padding:0 6px}
.n-btn.g:hover{background:var(--accent-wash)}
.n-btn.q{background:var(--inset);color:var(--ink2)}
.n-btn.q:hover{color:var(--ink)}
.n-btn.sm{height:26px;padding:0 9px;font-size:12px}
.n-btn.g.sm{padding:0 6px}
.n-btn.ico{width:30px;padding:0}
.n-btn.sm.ico{width:26px}
.n-btn.dn{color:var(--live);cursor:default;padding:0 4px}
.n-btn.klar{background:var(--live-wash)!important;color:var(--live)!important;border-color:transparent!important}
.n-btn.cup{background:var(--hw);color:var(--hw-on)}
.n-btn[disabled]{opacity:.55;cursor:default}

/* små etiketter */
.n-ml{font:600 10.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.n-tag{display:inline-block;font:700 9.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:3px 5px;border-radius:4px;vertical-align:middle}
.n-tag.stab{color:var(--champ);background:var(--champ-w)}
.n-tag.ny{color:var(--accent-ink);background:var(--accent-wash)}
.n-tag.cup{color:var(--hw-ink);background:var(--hw-wash)}
.n-tag.ok{color:var(--live);background:var(--live-wash)}
.n-cnt{font:700 10.5px/1 var(--ui);color:var(--ink2);background:var(--inset);padding:3px 6px;border-radius:999px}
.n-emb{display:block;flex:none;object-fit:contain}
.n-prog{display:block;height:6px;border-radius:3px;background:var(--inset);overflow:hidden;position:relative}
.n-prog>i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--accent)}
.n-prog.g>i{background:var(--live)}
.n-prog.s>i{background:var(--champ)}
.n-prog.o>i{background:var(--hw)}
/* omkopplare */
.n-sw{position:relative;display:inline-block;width:38px;height:22px;border-radius:11px;background:var(--line2);flex:none;transition:background .15s}
.n-sw>i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.n-sw.pa{background:var(--live)}
.n-sw.pa>i{left:19px}
/* LAGETS MÄRKE (2026-10-22) — fyrkant = lag. Samma neutrala märke som squad-rummet i Meddelanden
   (ny-medd.css .ms-sq.lag): taggens två första tecken, eller det uppladdade märket ovanpå (faller
   bilden bort syns taggen). Ritas av App\Helpers\SquadSida::marke(). Bor HÄR och inte i ny-squad.css
   — märket syns även i profilen, på Hem, i Spela och i personkortet. */
.nsq-cr{--s:44px;position:relative;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .28);display:inline-grid;place-items:center;flex:none;overflow:hidden;
  background:color-mix(in srgb,var(--ink) 9%,var(--card));color:var(--ink);vertical-align:middle;box-sizing:border-box}
.nsq-cr>b{font:800 calc(var(--s) * .36)/1 var(--hd);letter-spacing:.02em;text-transform:uppercase;color:inherit;white-space:nowrap}
.nsq-cr>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nsq-cr.s16{--s:16px;border-radius:4px}.nsq-cr.s18{--s:18px;border-radius:5px}.nsq-cr.s20{--s:20px;border-radius:5px}
.nsq-cr.s24{--s:24px}.nsq-cr.s28{--s:28px}.nsq-cr.s32{--s:32px}.nsq-cr.s36{--s:36px}.nsq-cr.s40{--s:40px}
.nsq-cr.s44{--s:44px}.nsq-cr.s48{--s:48px}.nsq-cr.s56{--s:56px}.nsq-cr.s72{--s:72px}.nsq-cr.s104{--s:104px}
.nsq-cr.s16>b,.nsq-cr.s18>b,.nsq-cr.s20>b{font-size:calc(var(--s) * .42);letter-spacing:0}
/* lagchipset (profilen, personkortet): märke + namn + din roll */
.nsq-chip-lag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 3px;border-radius:999px;background:var(--card);border:1px solid var(--line);font:500 12px/1 var(--ui);color:var(--ink);text-decoration:none;white-space:nowrap;max-width:100%;min-width:0}
.nsq-chip-lag>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.nsq-chip-lag>em{font-style:normal;color:var(--dim);font-size:11px;flex:none}
a.nsq-chip-lag:hover{border-color:var(--line2)}

/* ---------------------------------------------------------------- 4. RAD 1 */
.nt-top{position:sticky;top:0;z-index:60;height:var(--nt-h);background:var(--card);border-bottom:1px solid var(--line)}
.nt-top>.nt-in{height:var(--nt-h);display:flex;align-items:center;gap:18px}
.nt-logo{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none}
.nt-logo svg{width:28px;height:28px;color:var(--logo);display:block}
.nt-logo span{font:800 19px/1 var(--hd);letter-spacing:.01em;color:var(--ink)}
.nt-logo em{font-style:normal;color:var(--logo)}
/* LOGGAN ÖVERALLT (Kenta 2026-10-21: "ändras det på ett ställe ska det vara på alla andra
   ställen"). Varje ställe där MÄRKET står läser --logo — samma ton som toppen. Uppmätt på 31
   sidor 2026-10-21; F-ringen som PRIS (klippens vinnare, ledare — guld) och som STATUS
   (klippens band) är inte loggan och rörs inte. html-prefixet för att vinna över filer som
   laddas efter den här (pulse-lock.css, ny-profil.css, inloggningsrutans egen stil). */
html .pf-brand b{color:var(--logo)}                       /* sidfotens ordmärke, varje sida */
html .pauth-ring{background:var(--logo)}                  /* inloggnings-/registreringsrutan */
html .flock{--flock-acc:var(--logo)}                      /* låset: gästernas startsida, Tracker m.fl. */
html .npf-covstd{color:var(--logo)}                       /* profilens omslag utan egen bild */
/* Delningskortet (?page=stats, .k2) är mörkt i båda lägena — där bär märket den ljusa tonen.
   Nedladdningen läser samma --fring (stats/index.php fringLas(), ändrad 2026-10-21 med Kentas
   ok), så ringen, sigillet, ".NU" och forre.nu i PNG:en följer skärmen. */
html[data-logo="halloween"] .k2{--fring:var(--hw)}
/* F-RINGEN SOM VATTENSTÄMPEL — klassen n-fvm (2026-10-23).
   Kenta 23 okt: först "F loggan i bakgrunden i top höger" på topplistans "Racet runt dig" och
   Spelas "Ditt lag", sedan: "så stor är den på sprites sidan, dem du gjorde var små, ska verkligen
   synas". Måtten och styrkan är därför sprites-sidans (pulse-sprites.css .sq-mx::before): ringen
   360 px, 58 px utanför högerkanten och 64 px över överkanten, toningen 17 % → 12 % → 0 lodrätt
   över 440 px. Mobil (≤820): 240 px, 40/46 px, 300 px. Användning: klassen n-fvm på kortet.
   · Formen = masterfilen public/images/icons/forre-f-ring-currentcolor.svg — ingen kopia av banan.
   · Toningen ligger INNE i märket: bakgrunden är toningen och masken klipper den till ringen, så
     ytan under får ingen gradient (Kenta 2026-08-28).
   · Färgen är var(--logo), inte --ink som sprites-sidan (gamla temat): märket följer loggan
     (Halloween-orange via <html data-logo>) — "ändras det på ett ställe ska det vara på alla".
   · Rutan = kortets högra 302 px i hela höjden (top/right/bottom 0), så kortets kanter beskär
     ringen utan overflow:hidden. z-index -1 i kortets egen stapling (isolation) = bakom text och
     knappar, ovanpå kortets bakgrund. pointer-events:none — den tar aldrig ett klick.
   · Hems "Din ställning" (ny-hem.css .nh-st2::before) är den MINDRE varianten från 21 okt och
     läser --n-fvm nedan: ringen med en diagonal toning i SVG:ns egen gradient. */
:root{--n-fvm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23t)' d='M236.69,77.14 A120.00,120.00 0 1 1 221.80,53.16 L197.18,55.10 A100.50,100.50 0 0 0 44.73,184.27 L76.40,94.43 A48.92,48.92 0 0 1 122.54,61.78 L233.15,61.78 A2.42,2.42 0 0 1 234.86,65.91 L209.17,91.60 A9.55,9.55 0 0 1 202.61,94.39 L122.96,95.97 A18.23,18.23 0 0 0 106.22,107.88 L76.10,189.46 A8.97,8.97 0 0 1 72.17,194.12 L59.43,201.47 A100.50,100.50 0 0 0 221.26,90.55 Z M197.96,116.00 L182.68,137.19 A20.46,20.46 0 0 1 165.80,145.68 L144.44,145.38 A8.04,8.04 0 0 0 136.79,150.64 L123.22,187.36 A10.81,10.81 0 0 1 115.52,194.15 L91.15,199.77 A3.11,3.11 0 0 1 87.52,195.71 L114.40,119.47 A10.82,10.82 0 0 1 124.75,112.25 L196.58,113.25 A1.74,1.74 0 0 1 197.96,116.00 Z'/%3E%3C/svg%3E")}
.n-fvm{position:relative;isolation:isolate}
.n-fvm::before{content:"";position:absolute;top:0;right:0;bottom:0;width:302px;z-index:-1;pointer-events:none;
  border-top-right-radius:inherit;border-bottom-right-radius:inherit;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--logo) 17%,transparent) 0%,
    color-mix(in srgb,var(--logo) 12%,transparent) 42%,transparent 88%) 0 -64px/100% 440px no-repeat;
  -webkit-mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") right -58px top -64px/360px 360px no-repeat;
          mask:url("/public/images/icons/forre-f-ring-currentcolor.svg") right -58px top -64px/360px 360px no-repeat}
@media (max-width:820px){
  .n-fvm::before{width:200px;background-position:0 -46px;background-size:100% 300px;
    -webkit-mask-position:right -40px top -46px;mask-position:right -40px top -46px;
    -webkit-mask-size:240px 240px;mask-size:240px 240px}
}
@media (prefers-contrast:more){ .n-fvm::before{display:none} }
/* Rummen står på SAMMA mittlinje som loggan, söket och ikonerna (Kenta 21 okt: "nav inte
   är samma linje" — de satt 8 px lägre, nedtryckta som flikar). Alla kontroller i rad 1 är
   36 px höga och centrerade. Det aktiva rummet behåller Bladet: samma etikett på linjen,
   och fliken fortsätter nedåt in i rad 2. */
.nt-rooms{display:flex;align-items:center;height:var(--nt-h);margin-left:2px}
.nt-rooms a{--rc:var(--accent);position:relative;display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:10px;font:600 13.5px/1 var(--ui);color:var(--ink2);text-decoration:none;white-space:nowrap}
.nt-rooms a>i{color:var(--rc);font-size:15px}
.nt-rooms a:hover{color:var(--ink);background:color-mix(in srgb,var(--inset) 70%,transparent)}
.nt-rooms a.on{color:var(--ink);background:var(--bg);align-self:flex-end;height:47px;margin-bottom:-1px;align-items:flex-start;padding-top:11px;border-radius:10px 10px 0 0;z-index:2}
.nt-rooms a.on>i{color:color-mix(in srgb,var(--rc) 84%,#000)}
[data-theme="dark"] .nt-rooms a.on>i{color:color-mix(in srgb,var(--rc) 72%,#fff)}
/* Bladet: konkava hörn ner i rad 2 */
.nt-rooms a.on:before,.nt-rooms a.on:after{content:"";position:absolute;bottom:0;width:10px;height:10px;background:transparent}
.nt-rooms a.on:before{left:-10px;border-bottom-right-radius:10px;box-shadow:5px 5px 0 5px var(--bg)}
.nt-rooms a.on:after{right:-10px;border-bottom-left-radius:10px;box-shadow:-5px 5px 0 5px var(--bg)}
.nt-rooms .nt-lvf{display:inline-flex;margin-left:2px}
.nt-rooms .nt-lvf .n-ring{padding:1px;margin:0;box-shadow:0 0 0 1.5px var(--live);background:var(--card)}
.nt-rooms .nt-lvf .n-ring+.n-ring{margin-left:-5px}
.nt-sok{margin-left:auto;width:250px;height:36px;border-radius:8px;background:var(--inset);border:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:0 8px 0 11px;color:var(--dim);font:400 13.5px/1 var(--ui);cursor:text;flex:none;position:relative}
.nt-sok>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.nt-sok:hover{border-color:var(--line2)}
.nt-right{display:flex;align-items:center;gap:4px;flex:none}
.nt-kopp{display:flex;align-items:center;gap:7px;height:30px;padding:0 9px;border-radius:15px;color:var(--dim);font-size:13px;margin:0 2px;text-decoration:none}
/* Kopplingarna i mockupens färger: Epic bevisat grön, Discord kopplat --ink2,
   Companion (du står i kön) --dim. Inte kopplat = --faint och genomstruket i titeln. */
.nt-kopp i{color:var(--faint)}
.nt-kopp i.bi-patch-check-fill.ok{color:var(--live)}
.nt-kopp i.dc.ok{color:var(--ink2)}
.nt-kopp i.bi-windows.ok{color:var(--dim)}
.nt-kopp i.off{opacity:.55}
.nt-kopp:hover{background:var(--inset)}
.nt-ic{position:relative;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--ink2);font-size:17px;background:transparent;border:0;cursor:pointer;text-decoration:none}
.nt-ic:hover,.nt-ic.on{background:var(--inset);color:var(--ink)}
.nt-bdg{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff;font:700 10.5px/17px var(--ui);text-align:center;box-shadow:0 0 0 2px var(--card);pointer-events:none}
[data-theme="dark"] .nt-bdg{background:var(--accent);color:#06121f}
.nt-bdg[data-n="0"],.nt-bdg:empty{display:none}
.nt-me{display:flex;align-items:center;gap:7px;padding:2px 8px 2px 2px;border-radius:20px;margin-left:4px;background:transparent;border:0;cursor:pointer;color:var(--ink)}
.nt-me:hover,.nt-me.on{background:var(--inset)}
.nt-me .bp{font:700 13px/1 var(--hd);color:var(--ink);display:flex;align-items:baseline;gap:3px}
.nt-me .bp small{font:700 9px/1 var(--ui);color:var(--dim);letter-spacing:.05em}
.nt-me>i.bi{font-size:11px;color:var(--dim)}
.nt-gast{display:flex;align-items:center;gap:6px}

/* ---------------------------------------------------------------- 5. RAD 2 */
.nt-sub{position:relative;z-index:55;height:var(--nt-sub);background:var(--bg);border-bottom:1px solid var(--line)}
.nt-sub>.nt-in{height:var(--nt-sub);display:flex;align-items:center;gap:14px;position:relative}
.nt-tabs{display:flex;height:var(--nt-sub);min-width:0;overflow:hidden}
.nt-tabs a{position:relative;display:flex;align-items:center;padding:0 12px;font:500 13px/1 var(--ui);color:var(--ink2);text-decoration:none;white-space:nowrap}
.nt-tabs a:first-child{padding-left:0}
.nt-tabs a:hover{color:var(--ink)}
.nt-tabs a.on{color:var(--ink);font-weight:600}
.nt-tabs a.on:after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--accent)}
.nt-tabs a.on:first-child:after{left:0}
.nt-tabs[hidden]{display:none!important}
.nt-tk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;min-width:0;flex:1}
.nt-tk b{color:var(--ink);font-weight:600}
.nt-tk a{color:inherit;text-decoration:none}
.nt-tk .rx{display:flex;gap:4px}
.nt-tk .rx button{font:600 11px/1 var(--ui);color:var(--ink2);background:var(--card);border:1px solid var(--line);padding:4px 7px;border-radius:12px;cursor:pointer}
.nt-tk .rx button:hover{color:var(--ink);border-color:var(--line2)}
.nt-tk .rx button.on{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-wash)}
.nt-tk .mdot{width:4px;height:4px;border-radius:50%;background:var(--faint);flex:none}
.nt-tk .tm{color:var(--dim);font-size:12px}
.nt-stab{flex:none}
.nt-ctx{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);white-space:nowrap;min-width:0;overflow:hidden}
.nt-ctx a.bk{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--accent-ink);text-decoration:none}
.nt-ctx b{color:var(--ink)}
.nt-ctx i.bi-chevron-right{font-size:10px;color:var(--faint)}
.nt-pgs{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.nt-pgs>.n-ml{margin-right:2px}
.nt-pg{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:12.5px;color:var(--ink2);white-space:nowrap;text-decoration:none;cursor:pointer}
.nt-pg:hover{border-color:var(--line2);color:var(--ink)}
.nt-pg i.bi{color:var(--accent-ink);font-size:12.5px}
.nt-pg b{color:var(--ink);font-weight:600}
.nt-pg em{font-style:normal;font-weight:700;color:var(--ink)}
.nt-pg.live em{font-weight:500;color:var(--live)}
.nt-sp{flex:1}
/* cupens flik — hänger från rad 1 så länge en cup är godkänd för hela sajten */
.nt-cupf{align-self:flex-start;margin-left:8px;height:36px;display:flex;align-items:center;gap:8px;padding:0 10px 0 5px;border-radius:0 0 10px 10px;background:var(--hw);color:var(--hw-on);font:600 13px/1 var(--ui);white-space:nowrap;flex:none;position:relative;z-index:3;border:0;cursor:pointer}
.nt-cupf .pm{width:26px;height:26px;border-radius:50%;background:#000 center/cover;box-shadow:0 0 0 2px color-mix(in srgb,var(--hw-on) 25%,transparent)}
.nt-cupf b{font:700 14px/1 var(--hd);letter-spacing:.01em}
.nt-cupf em{font-style:normal;font:700 12px/1 var(--hd);background:var(--hw-on);color:var(--hw);padding:4px 6px;border-radius:5px}
.nt-cupf i{font-size:11px}
.nt-cupf:hover,.nt-cupf.on{background:color-mix(in srgb,var(--hw) 86%,#000)}

/* ---------------------------------------------------------------- 6. LAGREN (notiser, konto, cup, vänner) */
.nt-dd{position:fixed;z-index:90;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);overflow:hidden;text-align:left;color:var(--ink)}
.nt-dd[hidden]{display:none!important}
.nt-ddh{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:1px solid var(--line)}
.nt-ddh>b{font:700 16px/1 var(--hd)}
.nt-chips{display:flex;gap:2px;margin-left:auto}
.nt-chips button,.nt-chips a{font:600 12px/1 var(--ui);color:var(--ink2);padding:6px 9px;border-radius:999px;background:transparent;border:0;cursor:pointer;text-decoration:none}
.nt-chips .on{background:var(--accent-wash);color:var(--accent-ink)}
.nt-ddb{max-height:min(560px,calc(100vh - 170px));overflow-y:auto;overscroll-behavior:contain}
.nt-zon{padding:8px 0 6px}
.nt-zon+.nt-zon{border-top:1px solid var(--line)}
.nt-zon>.n-ml{padding:6px 16px 6px;display:flex;align-items:baseline;gap:8px}
.nt-zon>.n-ml span{text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px;color:var(--faint)}
.nt-nr{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 16px;min-height:52px;text-decoration:none;color:inherit}
.nt-nr:hover{background:var(--inset)}
.nt-nr.olast{background:color-mix(in srgb,var(--accent-wash) 55%,transparent)}
.nt-nr .t{min-width:0;font-size:13px;color:var(--ink2);line-height:1.35}
.nt-nr .t b{color:var(--ink)}
.nt-nr .t small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-nr .t>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-nr .r{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.nt-nr .r em{font-style:normal;font-size:11.5px;color:var(--dim);white-space:nowrap}
.nt-nr.q{min-height:44px}
.nt-nr .sq{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--inset);color:var(--ink2);font-size:14px;margin-left:2px}
.nt-nr .sq.stab{background:var(--champ-w);color:var(--champ)}
.nt-ddf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.nt-ddf b{color:var(--ink2);font-weight:600}
.nt-ddf .n-lk{font-size:13px}
.nt-tom{display:flex;align-items:center;gap:10px;padding:18px 16px;font-size:13px;color:var(--dim)}
.nt-tom i{font-size:18px;opacity:.5}
.nt-not{width:440px}
.nt-van{width:380px}
/* kontomenyn — platt lista, liten ikon, ingen förklaringstext */
.nt-konto{width:300px}
.nt-kh{display:flex;align-items:center;gap:12px;padding:14px 14px 10px}
.nt-kh>div{flex:1;min-width:0}
.nt-kh b{display:flex;align-items:center;gap:7px;font-size:15px}
.nt-kh small{display:block;font-size:12px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-kst{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:4px;margin:0 10px 6px;background:var(--inset);border-radius:8px;padding:8px 6px}
.nt-kst>span{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:0}
.nt-kst>span:first-child{display:grid;grid-template-columns:22px auto;column-gap:5px;justify-content:center;align-items:center;text-align:left}
.nt-kst>span:first-child .n-emb{grid-row:span 2}
.nt-kst b{font:700 14px/1.1 var(--hd);white-space:nowrap}
.nt-kst small{font-size:10.5px;color:var(--dim);white-space:nowrap}
.nt-kl{display:flex;flex-direction:column;padding:4px 6px 8px}
.nt-kl a,.nt-kl button{display:flex;align-items:center;gap:11px;height:36px;padding:0 10px;border-radius:7px;font:400 13.5px/1 var(--ui);color:var(--ink);cursor:pointer;background:transparent;border:0;text-decoration:none;text-align:left;width:100%}
.nt-kl a:hover,.nt-kl button:hover{background:var(--inset)}
.nt-kl a>i,.nt-kl button>i{width:18px;text-align:center;font-size:15px;color:var(--ink2)}
.nt-kl a>span:first-of-type,.nt-kl button>span:first-of-type{flex:1}
.nt-kl em{font-style:normal;font-size:12px;color:var(--dim);white-space:nowrap}
.nt-kl em.kp{display:flex;gap:6px;font-size:13px}
.nt-kl em.kp i.ok{color:var(--live)}.nt-kl em.kp i.dc{color:#5865f2}.nt-kl em.kp i.off{color:var(--faint)}
.nt-kl .n-sw{width:32px;height:18px}
.nt-kl .n-sw>i{width:14px;height:14px;top:2px;left:2px}
.nt-kl .n-sw.pa>i{left:16px}
.nt-kl hr{border:0;height:1px;background:var(--line);margin:5px 4px}
.nt-kl .live>i{color:var(--live)}
/* cupens panel */
.nt-cupp{width:380px}
.nt-cupp .hd{height:118px;background:#000 center 20%/cover;position:relative}
.nt-cupp .hd .x{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:7px;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:12px;border:0;cursor:pointer}
.nt-cupp .bd{padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px}
.nt-cupp .t b{display:block;font:800 22px/1.05 var(--hd)}
.nt-cupp .t small{display:block;font-size:12.5px;color:var(--ink2);margin-top:3px}
.nt-cupp .cdn{display:flex;align-items:baseline;gap:8px;font:600 12px/1 var(--ui);color:var(--dim)}
.nt-cupp .cdn span{background:var(--hw-wash);color:var(--hw-ink);border-radius:6px;padding:6px 8px;font-weight:700}
.nt-cupp .cdn span b{font:700 20px/1 var(--hd);margin-right:2px}
.nt-cupp .me{display:flex;align-items:center;gap:8px;background:var(--inset);border-radius:10px;padding:10px}
.nt-cupp .me>div{flex:1;min-width:0;margin-left:4px}
.nt-cupp .me b{display:block;font-size:13px}
.nt-cupp .me small{display:block;font-size:11.5px;color:var(--dim)}
.nt-cupp .plus{color:var(--dim);font-weight:700}
.nt-cupp .vnt{display:inline-flex;border-radius:50%;padding:1px;border:1.5px dashed var(--hw-ink)}
.nt-cupp .ab{display:flex;gap:6px;flex-wrap:wrap}
.nt-cupp .hosts{display:flex;gap:8px;font-size:12.5px;color:var(--ink2);line-height:1.4}
.nt-cupp .hosts i{color:var(--live)}
/* Hela panelen leder till cupsidan (Kenta 2026-10-23) — samma grepp som cupkortet på Hem.
   .nt-cupl = tom länk över .nt-cupi; stängknappen och knapparna lyfts över den, ytan
   bredvid knapparna släpper igenom klicket. .nt-cupg = pilen på bilden, i ord. */
.nt-cupi{position:relative;isolation:isolate}
.nt-cupl{position:absolute;inset:0;z-index:1;-webkit-tap-highlight-color:transparent}
.nt-cupl:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:11px}
.nt-cupp .hd .x{z-index:2}
.nt-cupp .ab{position:relative;z-index:2;pointer-events:none}
.nt-cupp .ab :is(a,button){pointer-events:auto}
.nt-cupp .nt-cupg{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px 0 10px;border-radius:7px;background:rgba(10,10,10,.68);color:#fff;font:600 12px/1 var(--ui);white-space:nowrap;transition:background-color .15s,color .15s}
.nt-cupp .nt-cupg i{font-size:11px;transition:transform .15s}
.nt-cupl:is(:hover,:active,:focus-visible)~.hd .nt-cupg{background:var(--hw);color:var(--hw-on)}
.nt-cupl:hover~.hd .nt-cupg i{transform:translateX(2px)}

/* ---------------------------------------------------------------- 6b. SKALETS DETALJER */
/* Bladet när sidan rullat: rad 2 är borta, fliken blir ett streck i rad 1. */
.nt-rull .nt-rooms a.on{align-self:center;height:36px;margin-bottom:0;align-items:center;padding-top:0;border-radius:10px;background:transparent}
.nt-rull .nt-rooms a.on:before{content:none}
.nt-rull .nt-rooms a.on:after{left:10px;right:10px;bottom:-10px;width:auto;height:3px;border-radius:3px 3px 0 0;box-shadow:none;background:var(--rc)}
.nt-kopp i.halv{color:var(--gold)}
.nt-bdg.svar{background:var(--danger-fill);color:#fff}
[data-theme="dark"] .nt-bdg.svar{background:var(--danger-fill);color:#fff}
.nt-bdg.svar:not([hidden])+.nt-bdg.gora{display:none}
.nt-vanster{display:flex;align-items:center;flex:1;min-width:0;height:100%}
.nt-vanster>[hidden]{display:none!important}
.nt-pgs.tom{display:none}
.nt-pgs [hidden]{display:none!important}
.nt-tk .tx{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nt-tk a.tx:hover,.nt-tk a.vem:hover b{color:var(--accent-ink)}
.nt-tk .vem{display:inline-flex;align-items:center;gap:7px}
.nt-tk .rx.done button.on{color:var(--live);border-color:transparent;background:var(--live-wash)}
/* Bragdväggen byter bragd (Kenta 2026-10-21: "får gärna scrolla lite då och då").
   Samma byte som gamla shoutraden, Kentas riktning 2026-07-17: mjuk fade ut uppåt,
   nästa in nerifrån. Remsan är en lucka (overflow), så texten glider ur och in i den.
   Bredden glider med (ny-skal.js §4) så att människan efter pricken aldrig hoppar. */
.nt-tkr{display:flex;align-items:center;min-width:0;flex:0 1 auto;overflow:hidden;transition:width .34s cubic-bezier(.2,.7,.2,1)}
.nt-tki{display:none;align-items:center;gap:8px;min-width:0;transition:opacity .22s ease,transform .22s ease}
.nt-tki.on{display:flex}
.nt-tkr.ut>.nt-tki.on{opacity:0;transform:translateY(-10px)}
.nt-tki.in{animation:ntTkIn .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes ntTkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ntTkTona{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.nt-tkr{transition:none}.nt-tki{transition:opacity .16s ease}.nt-tkr.ut>.nt-tki.on{transform:none}.nt-tki.in{animation:ntTkTona .2s ease both}}
/* Staben i rad 2: gamla skalets bokmärke (pulse-stab.css) som en liten lila bricka. */
.nt-sub .stf-bm{position:relative;left:auto;top:auto;height:auto;padding:0;margin-right:2px;filter:none;clip-path:none;flex:none;align-self:center}
.nt-sub .stf-bm::before,.nt-sub .stf-bm::after{content:none}
.nt-sub .stf-bm-in{height:22px;gap:5px;font:700 9.5px/1 var(--ui);letter-spacing:.06em;color:var(--champ);background:var(--champ-w);padding:0 6px;border-radius:4px}
.nt-sub .stf-bm .bi{font-size:11px}
.nt-sub .stf-bm[aria-expanded="true"] .stf-bm-in{background:var(--champ);color:#fff}
.nt-sub .stf-n{min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--danger-fill);color:#fff;font:700 9.5px/15px var(--ui);text-align:center;letter-spacing:0}
.nt-sub .stf-remsa{left:auto;position:static;display:none;flex:1;min-width:0}
.nt-sub .nt-in.stf-lage>.stf-remsa{display:flex}
.nt-sub .nt-in.stf-lage>.nt-vanster{display:none}
.nt-sub .stf-p{top:calc(100% + 1px);left:0;width:100%;border-radius:0 0 var(--r) var(--r)}
.nt-sub .stf-p::before{content:none}
/* lagrens rader — notiserna bär gamla klockans klasser (ddrow) för pulse-notifs.js */
.nt-dd .nt-nr.ddrow{display:grid;border-bottom:0;padding:7px 16px;background:transparent;align-items:center}
.nt-dd .nt-nr.ddrow.unread{background:color-mix(in srgb,var(--accent-wash) 55%,transparent)}
.nt-dd .nt-nr.ddrow:hover{background:var(--inset)}
.nt-nr .n-dot.blue{width:7px;height:7px}
.nt-nr .sq.svar{background:color-mix(in srgb,var(--danger) 10%,var(--card));color:var(--danger)}
/* rader som pulse-notifs.js lägger in live (gamla klockans markup) */
.nt-not .ddlist>a.ddrow--notif{display:flex;align-items:center;gap:12px;padding:7px 16px;border-bottom:0;min-height:52px}
.nt-not .ddlist>a.ddrow--notif .nic,.nt-not .ddlist>a.ddrow--notif .nic-main{width:36px;height:36px}
.nt-not .ddlist>a.ddrow--notif .c .tt{font-size:13px}
.nt-not .ddlist>a.ddrow--notif .ndot{width:7px;height:7px;background:var(--accent);box-shadow:none}
.nt-not .ddlist>a.ddrow--notif[hidden],.nt-not .ddlist .nt-nr[hidden]{display:none!important}
/* Kräver svar */
.nt-svar>.n-ml{color:var(--danger);display:flex;align-items:center;gap:7px}
.nt-svar .skl-pn{font:700 10.5px/1 var(--ui);font-style:normal;color:#fff;background:var(--danger-fill);padding:3px 6px;border-radius:999px;letter-spacing:0}
.nt-nr .r.skl-ak{flex-direction:row;align-items:center;gap:6px}
.nt-nr .r.skl-ak form{display:inline-flex;margin:0}
/* Cupfrågan (2026-10-22, CupUtskick::fragor): knapparna under texten — tre får inte plats i högerkanten */
.nt-cupq{align-items:flex-start}
.nt-cupq>.t{flex:1;min-width:0}
.nt-cupk{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.nt-cupk form{display:inline-flex;margin:0}
.nt-nr.ask-done{display:flex!important;min-height:44px;background:var(--live-wash)!important}
.nt-nr.ask-done--no{background:var(--inset)!important}
.nt-nr.ask-done .ask-done-txt{font-size:13px;color:var(--ink)}
.nt-nr.ask-done .ask-done-txt a{color:var(--accent-ink);font-weight:600}
.nt-nr.ask-err{animation:nt-skak .3s}
@keyframes nt-skak{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.nt-van .skl-vklar{background:var(--live-wash)}
.nt-van .skl-pt2 a{color:inherit;text-decoration:none}
.nt-van .skl-pr .skl-pt2{font-size:13px;color:var(--ink2)}
.nt-ddh .nt-x{margin-left:4px}
.nt-ddh .n-cnt{margin-left:2px}
.nt-ddh>.n-btn.g:not(.nt-x){margin-left:auto}
/* meddelandepanelen: listan ritas av pulse-messenger.js (skm-, pulse-skal-msg.css) */
.nt-medd{width:420px}
.nt-medd .skl-msglist{padding:4px 0 8px}
.nt-medd .skl-msglist:empty::before{content:"Inga meddelanden än.";display:block;padding:18px 16px;font-size:13px;color:var(--dim)}
/* kontomenyn */
.nt-kl .kaffe>span:first-of-type{display:flex;flex-direction:column;gap:2px}
.nt-kl .kaffe small{font-size:11.5px;color:var(--dim);line-height:1.3;white-space:normal}
.nt-kl a.kaffe{height:auto;min-height:36px;padding-top:6px;padding-bottom:6px}
.nt-kl .n-tag{margin-left:auto}
/* mobilmenyn */
.nt-meny{width:340px}
.nt-mrum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 12px 10px}
.nt-mrum a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:68px;border-radius:10px;background:var(--inset);color:var(--ink);font:600 12.5px/1 var(--ui);text-decoration:none}
.nt-mrum a i{font-size:19px;color:var(--rc)}
.nt-mrum a.on{background:var(--accent-wash);color:var(--accent-ink)}
/* söket (Ctrl K) */
.nt-sokp{position:fixed;inset:0;z-index:120;background:color-mix(in srgb,#000 38%,transparent);display:flex;justify-content:center;align-items:flex-start;padding-top:min(12vh,96px)}
.nt-sokp[hidden]{display:none!important}
.nt-sokb{width:min(640px,calc(100% - 24px));max-height:min(620px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);overflow:hidden}
.nt-sokf{display:flex;align-items:center;gap:10px;padding:0 14px;height:54px;border-bottom:1px solid var(--line);color:var(--dim);font-size:17px}
.nt-sokf input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:400 16px/1 var(--ui)}
.nt-sokf input::-webkit-search-cancel-button{display:none}
.nt-sokr{overflow-y:auto;overscroll-behavior:contain}
.nt-sokr .n-ml i{font-size:11px;margin-right:3px}
.nt-sokrad.val{background:var(--accent-wash)}
.nt-sokar body{overflow:hidden}
/* mobilen: lager som ark låser sidan bakom */
@media (max-width:820px){
  .nt-last body{overflow:hidden}
  .nt-mtop>button .nt-bdg,.nt-mtop>a .nt-bdg{top:4px;right:2px}
  .nt-sokp{padding-top:0;align-items:stretch}
  .nt-sokb{width:100%;max-height:none;border-radius:0;border:0}
  .nt-meny .nt-kl a,.nt-meny .nt-kl button{height:42px}
}

/* ---------------------------------------------------------------- 7. SIDANS RAM */
.nt-main{padding-top:20px;padding-bottom:40px}
/* Layoutens topp-omslag (forre_pulse.css gör det till en klistrad kolumn under 820 px)
   — i nya temat klistrar rad 1 och mobiltoppen själva. */
.pulse-topwrap{display:contents!important;position:static!important;transform:none!important}
/* GAMLA VYER I NYA SKALET: ingen vänsterspalt — rummen sitter i rad 1.
   Railen renderas inte alls (pulse-leftrail.php returnerar i nya temat); den tomma
   <aside> döljs och rutnätet tar dess kolumn. Bredden följer skalet: 1 360 innehåll. */
:root{--shell-w:calc(var(--ny-w) + 32px)}
.shell>aside.rail.left,.shell>aside.rail:empty{display:none!important}
.shell:has(> aside.rail.left):has(> aside.rail.right){grid-template-columns:minmax(0,1fr) 320px!important}
.shell:has(> aside.rail.left):not(:has(> aside.rail.right)){grid-template-columns:minmax(0,1fr)!important}
/* Tom högerrail (events utan kommande events, mätt 2026-10-21: 320 px tomt) — ingen
   tom spalt. Aldrig en tom låda. */
.shell>aside.rail.right:not(:has(>*)){display:none!important}
.shell:has(>aside.rail.right:not(:has(>*))){grid-template-columns:minmax(0,1fr)!important}
.rail{top:76px}
/* NYA VYER I LAYOUTENS SKAL (2026-10-21). PulseSkal ger bl.a. lfg och streaming ett
   layout-ritat .shell.clb + <main class="center">. De nya vyerna bär sin egen bredd
   (.nt-in) — skalet lade sin gutter och topp ovanpå: 1 320 i stället för 1 360 på
   datorn, 340 i stället för 372 på en 414 px-telefon. Runt en ny vy ritar skalet inget. */
.shell:has(>main.center>.nt-in){display:block;max-width:none;width:100%;padding:0;margin:0}
.shell:has(>main.center>.nt-in)>main.center{display:block}
/* Squads ritar railen i en egen spalt (aside.sqm-left, bara pulse-leftrail.php) — tom i
   nya temat: 250 px tomt till vänster (mätt 2026-10-21). Spalten tas bort; högerrailen
   (.sqm-rail) står kvar där den fick plats förut. */
.shell.sqm>aside.sqm-left{display:none!important}
.shell.sqm{grid-template-columns:minmax(0,1fr) 300px}
.shell.sqm.sqm-norail{grid-template-columns:minmax(0,1fr)}
@media (max-width:1180px){.shell.sqm{grid-template-columns:minmax(0,1fr)}}

/* DRIFTNOTISEN (pulse-driftnotis.php, bara stab, bara när något är TRASIGT NU). Dess
   stil bodde i pulse-topbar-rad1.css som nya temat inte laddar — utan raderna här stod
   den som oformaterad text ovanför rad 1. Samma utseende, nya temats bredd. */
.dfn{width:100%;background:var(--danger-fill,#e0245e);color:#fff}
.dfn-in{width:min(var(--ny-w),calc(100% - 40px));margin:0 auto;min-height:30px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px}
.dfn b{font-weight:800}
.dfn-t{opacity:.94}
.dfn-a{margin-left:auto;color:#fff;text-decoration:none;font:600 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.45)}
.dfn-a:hover{border-bottom-color:#fff}
.dfn.dfn-warn{background:var(--gold);color:#1a1200}
.dfn.dfn-warn .dfn-a{color:#1a1200;border-bottom-color:rgba(26,18,0,.45)}
.pulse-shell>.pulse-footer{margin-top:auto}
/* Sidfoten ärvs från forre_pulse (alla länkar, juridikraden, flaggknappen och Epic-
   texten oförändrade). Två avvikelser: inga lodräta streck mellan länkarna, och på
   mobilen bär <body> redan bottennavens luft — 58 px marginal till gav 122 px tomt. */
html[data-ny] .pf-links a::after{content:none}
@media (max-width:820px){html[data-ny] .pulse-footer{margin-bottom:0}}

/* gemensamma paneler och rubriker — alla nya sidor */
.np-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.np-fh{display:flex;align-items:center;gap:12px;height:50px;padding:0 18px;border-bottom:1px solid var(--line)}
.np-fh h2{font:600 15.5px/1 var(--ui);margin:0;color:var(--ink)}
.np-fh .n-dim{font-size:12.5px}
.np-fh>.n-lk,.np-fh>.np-mseg,.np-fh>.np-r{margin-left:auto}
.np-ph2{display:flex;align-items:baseline;gap:10px;padding:16px 18px 10px}
.np-ph2 h2{font:600 15.5px/1 var(--ui);margin:0}
.np-ph2>span,.np-ph2>.n-lk{margin-left:auto;font-size:12.5px;color:var(--dim)}
.np-ph2>.n-lk{font-size:13px;color:var(--accent-ink)}
.np-ph2 span b{color:var(--ink);font-weight:700}
.np-more{padding:12px 18px;border-top:1px solid var(--line);font-size:13px}
.np-mseg{display:flex;gap:2px;background:var(--inset);border-radius:7px;padding:2px}
.np-mseg a,.np-mseg button{font:600 12px/1 var(--ui);color:var(--ink2);padding:6px 10px;border-radius:5px;background:transparent;border:0;cursor:pointer;text-decoration:none}
.np-mseg .on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.np-ph{display:flex;align-items:flex-end;gap:20px;margin-bottom:16px}
.np-ph h1{font:700 30px/1.05 var(--hd);letter-spacing:-.01em;margin:0;color:var(--ink)}
.np-meta{font-size:13px;color:var(--dim);margin-top:6px}
.np-phr{margin-left:auto;display:flex;align-items:center;gap:8px}
.np-seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
.np-seg a,.np-seg button{font:500 13px/1 var(--ui);color:var(--ink2);padding:8px 12px;border-radius:6px;display:flex;gap:6px;align-items:center;background:transparent;border:0;cursor:pointer;text-decoration:none}
.np-seg span{font-size:11.5px;color:var(--dim)}
.np-seg .on{background:var(--accent-wash);color:var(--accent-ink);font-weight:600}
.np-seg .on span{color:var(--accent-ink)}
.np-g{display:grid;gap:20px;align-items:start}
.np-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.np-tom{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:13px;color:var(--dim)}
.np-tom i{font-size:18px;opacity:.5}

/* PLATTFORMSBRICKAN — EN för hela huset (Kenta 2026-10-21: "ska samlas till en"; förut
   tre: .n-pfb, startsidans .nh-pfb och profilens .npf-pfb). Markup: NySkal::pfb, i JS
   window.NyPfb. Märkena, färgerna och bläcket är plattformarnas egna och kommer från
   SocialBrandService som --pf/--pfi på plattan (Kentas order 2026-07-30 — inget "K" för
   Kick, ingen ikonfont). Enfärgade märken (TikTok) har inga egna färger och följer
   underlaget: bläck-platta, bakgrundsfärgat märke — vänder med temat. */
.n-pfb{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--pf,var(--ink));color:var(--pfi,var(--bg));flex:none;vertical-align:-3px;margin-right:5px}
.n-pfb svg{width:10px;height:10px;display:block;fill:currentColor}

/* LIVE-RUTAN (mockupens NY.pop, ny-skal.js §6) — nere till vänster, ovanför botknappen
   (#forreBotFab, 46 px på 16/16). Aldrig på startsidan eller i Live-rummet, aldrig när
   du själv sänder. */
.nt-pop{position:fixed;left:16px;bottom:74px;z-index:55;display:flex;align-items:center;gap:10px;width:330px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh2);padding:8px 8px 8px 10px;color:var(--ink)}
.nt-pop[hidden],html[data-ny-sida="hub"] .nt-pop,html[data-ny-sida="streaming"] .nt-pop,html[data-stream="pa"] .nt-pop{display:none!important}
.nt-pop>div{flex:1;min-width:0}
.nt-pop b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-pop small{display:flex;align-items:center;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden}
.nt-pop .n-ring>.n-av{outline:0}
.nt-pop .x{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--dim);font-size:12px;background:transparent;border:0;cursor:pointer;flex:none}
.nt-pop .x:hover{background:var(--inset);color:var(--ink)}
/* Botten pratar (.fb-nudge, 300 × ~83 ovanför botknappen) — då står rutan ovanför. */
body:has(.fb-nudge) .nt-pop{bottom:180px}

/* ★ STREAM-LÄGET — html[data-stream="pa"] när DU sänder just nu (NySkal::liveRuta,
   pollen i ny-skal.js). Samma grepp som forre_pulse:s pulse-stream-mode.css: suddat,
   inte borta — det klarnar när du själv håller musen över eller fokuserar raden.
   En OBS-källa gör aldrig det. Coins i kontomenyn, texten i meddelandelistorna
   (panelen, rutan, helsidan) och i meddelandetoasten. */
html[data-ny][data-stream="pa"] .nt-kl a[href="/?page=coins"] em,
html[data-ny][data-stream="pa"] .ms-pv,
html[data-ny][data-stream="pa"] .pm-toast-tx{filter:blur(6px);user-select:none;transition:filter .12s ease}
html[data-ny][data-stream="pa"] .nt-kl a[href="/?page=coins"]:hover em,
html[data-ny][data-stream="pa"] .nt-kl a[href="/?page=coins"]:focus-visible em,
html[data-ny][data-stream="pa"] .ms-row:hover .ms-pv,
html[data-ny][data-stream="pa"] .ms-row:focus-visible .ms-pv,
html[data-ny][data-stream="pa"] .pm-toast:hover .pm-toast-tx{filter:none;user-select:auto}

/* ---------------------------------------------------------------- 8. SMALARE SKÄRMAR (dator) */
@media (max-width:1320px){
  .nt-sok{width:200px}
  .nt-rooms a{padding:0 10px}
}
@media (max-width:1200px){
  .nt-kopp{display:none}
  .nt-sok{width:40px;padding:0;justify-content:center;gap:0}
  .nt-sok>span,.nt-sok>.n-kbd{display:none}
  .nt-pgs>.n-ml{display:none}
}
@media (max-width:1020px){
  .nt-rooms a>span{display:none}
  .nt-rooms a{padding:0 11px}
  .nt-me .bp{display:none}
}

/* ---------------------------------------------------------------- 9. MOBILEN (≤ 820) */
.nt-mtop,.nt-mstrip,.nt-mnav{display:none}
@media (max-width:820px){
  .nt-top,.nt-sub{display:none}
  .nt-mtop{position:sticky;top:0;z-index:60;height:52px;display:flex;align-items:center;gap:2px;padding:0 6px;background:var(--card);border-bottom:1px solid var(--line)}
  .nt-mtop>button,.nt-mtop>a.nt-ic{width:40px;height:40px;display:grid;place-items:center;font-size:19px;color:var(--ink2);background:transparent;border:0;border-radius:8px;position:relative}
  .nt-mtop .nt-logo{margin-left:2px}
  .nt-mtop .nt-logo svg{width:24px;height:24px}
  .nt-mtop .nt-logo span{font-size:17px}
  .nt-mtop .nt-sp{flex:1}
  .nt-mstrip{display:block}
  .nt-mchips{display:flex;gap:6px;padding:10px 16px 2px;overflow-x:auto;scrollbar-width:none}
  .nt-mchips::-webkit-scrollbar{display:none}
  .nt-mchips a{font:600 12.5px/1 var(--ui);color:var(--ink2);background:var(--card);border:1px solid var(--line);padding:8px 12px;border-radius:16px;white-space:nowrap;text-decoration:none}
  .nt-mchips a.on{background:var(--accent-wash);border-color:transparent;color:var(--accent-ink)}
  .nt-mtk{font-size:12.5px;color:var(--ink2);padding:8px 16px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nt-mtk b{color:var(--ink)}
  .nt-mtk{display:flex;align-items:center;gap:5px}
  .nt-mtk>b{flex:none}
  .nt-mtk>.tx{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .nt-mtk .nt-tkr{flex:1 1 auto}
  .nt-mtk .nt-tki.on{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nt-mpg{display:flex;align-items:center;gap:6px;padding:10px 16px 0;overflow-x:auto;scrollbar-width:none}
  .nt-mpg::-webkit-scrollbar{display:none}
  .nt-mpg .mp{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);background:var(--card);border:1px solid var(--line);padding:6px 10px;border-radius:14px;white-space:nowrap;text-decoration:none;cursor:pointer;flex:none}
  .nt-mpg .mp i.bi{color:var(--accent-ink)}
  .nt-mpg .mp b{color:var(--ink)}
  .nt-mpg .mp em{font-style:normal;font-weight:700;color:var(--ink)}
  .nt-mpg .mp.cup{background:var(--hw);border-color:transparent;color:var(--hw-on);padding-left:3px}
  .nt-mpg .mp.cup b,.nt-mpg .mp.cup em{color:var(--hw-on)!important}
  .nt-mpg .mp .pm{width:20px;height:20px;border-radius:50%;background:#000 center/cover}
  .nt-mpg .mp.live b{color:var(--live)}
  .nt-mnav{position:fixed;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:70}
  .nt-mnav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10.5px/1 var(--ui);color:var(--dim);text-decoration:none}
  .nt-mnav a>i{font-size:20px;width:46px;height:28px;display:grid;place-items:center;border-radius:14px}
  .nt-mnav a.on{color:var(--ink)}
  .nt-mnav a.on>i{background:var(--accent-wash);color:var(--accent-ink)}
  .nt-mnav a.fab>i{width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff;font-size:22px}
  [data-theme="dark"] .nt-mnav a.fab>i{background:var(--accent);color:#06121f}
  .nt-mnav .nt-bdg{top:-3px;right:calc(50% - 22px)}
  body.pulse-shell{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .nt-main{padding:12px 0 24px}
  .nt-pop,body:has(.fb-nudge) .nt-pop{left:12px;right:12px;width:auto;max-width:none;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  /* GAMLA VYER PÅ MOBILEN: EN spalt. forre_pulse.css döljer högerrailen under 820 px
     (.right{display:none}) — men desktopregeln ovan (minmax(0,1fr) 320px !important)
     lämnade kvar dess 320-spalt, och innehållet kläms till ~34 px (väggen, duellerna,
     forumet … mätt 2026-10-21 på 414 px). */
  .shell:has(> aside.rail.left):has(> aside.rail.right){grid-template-columns:minmax(0,1fr)!important}
  .dfn-in{width:calc(100% - 32px)}
  .nt-in{width:calc(100% - 32px)}
  /* lagren blir ark under toppen */
  .nt-dd{position:fixed!important;left:0!important;right:0!important;top:52px!important;bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;width:auto!important;border-radius:0;border:0;border-top:1px solid var(--line);overflow-y:auto;box-shadow:none}
  .nt-dd .nt-ddb{max-height:none}
  .nt-cupp .hd{height:150px}
}

/* ---------------------------------------------------------------- 9b. MOBILEN: TOPP OCH BOTTEN GÖMS
   Kenta 2026-10-21 (Facebook-appen): rullar du ned försvinner toppen och bottennaven,
   rullar du upp kommer de fram igen — solida, med en kort toning från genomskinligt.
   Klassen html.nt-gomd sätts av ny-skal.js §7 (tröskel, lager, sidbyten). Ut går fort
   (ingen ska vänta på att en meny försvinner), in får ta sin tid: glidningen är framme
   på 0,26 s, toningen till helt solid är klar på 0,34 s. Gömd = visibility:hidden,
   så ingen tabbar in i en meny som inte syns. Live-rutan följer bottennaven ned. */
@media (max-width:820px){
  .nt-mtop,.nt-mnav{transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .34s cubic-bezier(.3,0,.2,1),visibility 0s}
  html.nt-gomd .nt-mtop,html.nt-gomd .nt-mnav{opacity:0;visibility:hidden;transition:transform .2s cubic-bezier(.4,0,1,1),opacity .16s linear,visibility 0s linear .2s}
  html.nt-gomd .nt-mtop{transform:translateY(-100%)}
  html.nt-gomd .nt-mnav{transform:translateY(100%)}
  .nt-pop{transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  html.nt-gomd .nt-pop{transform:translateY(calc(64px + env(safe-area-inset-bottom,0px)));transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.2s}
}
/* Minskad rörelse (husets regel): ingen glidning — bara toningen, ut och in. */
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .nt-mtop,.nt-mnav,.nt-pop{transform:none!important}
}

/* ---------------------------------------------------------------- 10. ETT INLÄGG (?page=wall/N)
   Väggnotisernas mål (app/Helpers/NyInlagg.php, Kenta 2026-10-21: "ska komma till inlägget
   och gärna snabbt som fan"). Kortet står i profilens rad (.npf-post, ny-profil.css).
   Kommentaren notisen handlar om lyses upp en stund (pulse.js lägger .cm-fokus) — en ton i
   bubblan som tonar bort, ingen glöd. */
.nip{max-width:680px}
.nip-hd{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px 0 8px;font-size:13px;color:var(--dim)}
.nip-bk{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--r);color:var(--ink2);font-weight:600;text-decoration:none;flex:none}
.nip-bk:hover{background:var(--inset);color:var(--ink)}
.nip-bk>i{font-size:15px}
.nip-var{margin-left:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nip-var a{color:var(--ink2);font-weight:600;text-decoration:none}
.nip-var a:hover{color:var(--accent-ink)}
.nip .npf-post{padding-top:12px}
.nip .cm .cm-bub{transition:background-color .8s ease}
.nip .cm.cm-fokus>.cm-b>.cm-bub{background:var(--accent-wash)}

/* ---------------------------------------------------------------- 11. RAD 2: FÄRGEN, NYASTE MEDLEMMEN, FOLK
   Kenta 2026-10-21 18:49: "vill gärna se senaste medlemmen här med, någon drop down för vilka
   som är online och vilka som spelar? … sen är det bara enfärgat för bragderna".
   Markup: pulse-topbar.php ("RAD 2"). Data: NySkal::bragdTyp/bragdText/nyastMedlem/folk.
   FÄRG = BETYDELSE: händelsens typ bär EN färg — ikonen och frasen, inget annat på raden.
   Rankerna nivåtonerna (samma som topplistan), Victory Royale guld, eld orange, live grönt,
   fest rosa (--c-fira), sajtens egna milstolpar blått. Alla tokens har en ljus och en mörk ton. */
.nt-tki[data-ev="vr"]{--ev:var(--gold)}
.nt-tki[data-ev="eld"]{--ev:var(--hw-ink)}
.nt-tki[data-ev="live"]{--ev:var(--live)}
.nt-tki[data-ev="fira"]{--ev:var(--c-fira)}
.nt-tki[data-ev="folk"]{--ev:var(--accent-ink)}
.nt-tki[data-ev="unreal"]{--ev:var(--t-unreal)}
.nt-tki[data-ev="champion"]{--ev:var(--t-champion)}
.nt-tki[data-ev="elite"]{--ev:var(--t-elite)}
.nt-tki[data-ev="diamond"]{--ev:var(--t-diamond)}
.nt-tki[data-ev="platinum"]{--ev:var(--t-platinum)}
.nt-tki[data-ev="gold"]{--ev:var(--t-gold)}
.nt-tki[data-ev="silver"]{--ev:var(--t-silver)}
.nt-tki[data-ev="bronze"]{--ev:var(--t-bronze)}
.nt-tki b.ev{color:var(--ev,var(--ink));font-weight:700}
.nt-tkic{flex:none;font-size:14px;line-height:1;color:var(--ev,var(--dim))}
.nt-tkem{flex:none;width:18px;height:18px;object-fit:contain}
.nt-tki>.n-pfb{margin-right:0}

/* SENASTE MÄNNISKAN är ett varv i tickern: ansiktet först, inget färgat — en människa som
   pratar, inte en händelse. */
.nt-tki.prat a.m:hover{color:var(--accent-ink)}
/* NYASTE MEDLEMMEN efter pricken — står still medan bragden glider (tickerns bredd glider,
   så den flyttar sig mjukt i sidled; den hoppar aldrig in och ut). Får inte plats båda
   krymper bragdens text med en ellips, inte namnet. Under full radbredd (< 1400 px) bor
   den bara i folklagret — där räcker raden inte till en bragd OCH en svans. */
.nt-nymg{display:flex;align-items:center;gap:8px;flex:none}
.nt-nym{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);text-decoration:none;white-space:nowrap}
.nt-nym b{color:var(--ink);font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.nt-nym:hover b{color:var(--accent-ink)}
@media (max-width:1399px){.nt-nymg{display:none}}

/* FOLK-KNAPPEN — ansikten först, talen sedan (pulsremsans två tal i en knapp). Samma form som
   Pågår-brickorna bredvid. Lagret: .nt-folk. */
.nt-folkk{display:flex;align-items:center;gap:7px;height:28px;padding:0 9px 0 4px;border-radius:14px;background:var(--card);border:1px solid var(--line);font:400 12.5px/1 var(--ui);color:var(--ink2);white-space:nowrap;cursor:pointer;flex:none}
.nt-folkk:hover,.nt-folkk.on{border-color:var(--line2);color:var(--ink)}
.nt-folkk .tal{display:inline-flex;align-items:center}
.nt-folkk .tal b{font-size:13px;font-weight:700;color:var(--ink)}
.nt-folkk .tal .n-dot{width:7px;height:7px;margin-right:6px}
.nt-folkk .n-fp+.tal .n-dot{display:none}
.nt-folkk .sep{font-style:normal;color:var(--faint);margin:0 6px}
.nt-folkk>.bi{font-size:10px;color:var(--dim)}
/* lagret: Spelar nu (grön ring = husets statusring), Online (ihålig prick), nyaste medlemmen */
.nt-folk{width:340px}
.nt-folk .nt-ddh .nt-x{margin-left:auto}
.nt-folk .nt-nr>.n-av{justify-self:center}
.nt-folk .nt-nr>.n-ring{margin:0}
.nt-folk .nt-nr .t small .n-dot{width:7px;height:7px;margin-right:6px;vertical-align:0}
.nt-fmer{display:block;padding:3px 16px 6px 64px;font-size:12.5px;color:var(--accent-ink);text-decoration:none}
.nt-fmer:hover{text-decoration:underline}
@media (max-width:1200px){
  .nt-folkk{padding-left:10px}
  .nt-folkk .n-fp{display:none}
  .nt-folkk .n-fp+.tal .n-dot{display:inline-block}
}
@media (max-width:820px){
  .nt-mtk .nt-tkic{margin-right:5px;font-size:12.5px}
  .nt-mtk .nt-tkem{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin-right:5px}
  .nt-mtk .nt-tki>.n-pfb{margin-right:5px}
  .nt-mtk .nt-tki.prat>.n-av{margin-right:5px;vertical-align:-4px}
  .nt-mpg .mp.folk{padding-left:4px}
}

/* ★ DISCORD-KNAPPEN I NAVBAREN (2026-10-31, Kenta: "så folk hittar forre.nu discord").
   Discords egen blå (#5865F2) — plattformsloggor i färg, som klippsidan. Mjuk ton i vila,
   fylld vid hover. ≤ 1200 px: bara ikonen. Mobilen: en ikon i toppraden (.nt-mdc). */
.nt-dc{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;margin-right:4px;border-radius:15px;
  background:color-mix(in srgb,#5865f2 16%,transparent);color:#7983f5;font:600 12.5px/1 var(--ui);text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s}
html:not([data-theme="dark"]) .nt-dc{background:color-mix(in srgb,#5865f2 12%,transparent);color:#4752c4}
.nt-dc .bi{font-size:16px}
.nt-dc:hover,.nt-dc:focus-visible{background:#5865f2;color:#fff}
html:not([data-theme="dark"]) .nt-dc:hover{background:#5865f2;color:#fff}
@media (max-width:1200px){.nt-dc{width:36px;padding:0;justify-content:center}.nt-dc>span{display:none}}
.nt-mtop>a.nt-mdc{color:#7983f5}
html:not([data-theme="dark"]) .nt-mtop>a.nt-mdc{color:#4752c4}


/* ★ SPRÅKFLAGGAN (2026-11-01, agent B lang-skalet) — LÅST. Läs BRAIN.md "SAJTEN PÅ ENGELSKA" först.
   Flaggan visar språket du byter TILL (Union Jack på svenska sidan, svenska flaggan på den engelska),
   precis som sidfotens juridikknapp. Nationsfärgerna är innehåll, inte tema — de följer inte ljust/
   mörkt läge; bara den tunna kanten gör det. Ingen glow, ingen skugga.
   .nt-lang  = ikonknappen i rad 1 (36 px, .nt-ic ger storlek och hover) bredvid Discord.
   .nt-langr = raden i kontomenyn och mobilmenyn (flaggan där ikonen står, "Språk" till höger). */
.nt-flagg{display:block;flex:none;border-radius:3px;outline:1px solid color-mix(in srgb,var(--ink) 16%,transparent);outline-offset:0}
.nt-lang .nt-flagg{width:22px;height:15px}
.nt-langr .nt-flagg{width:18px;height:12px;border-radius:2px}
.nt-lang:focus-visible{outline:2px solid var(--ink2);outline-offset:1px}
/* Kontomenyns rankruta utan emblem (Orankad/Unranked): ordet och "Epic ranked" under varandra,
   centrerat — utan emblemet hamnade ordet i 22 px-kolumnen och låg över etiketten. */
.nt-kst>span:first-child:not(:has(.n-emb)){display:flex;flex-direction:column;align-items:center;text-align:center}