/* prrp_admin 1.15.25 – /help och ärendevyn omgjord (ägaren 10-20: "smidigare, enklare, allt ser förvirrigt ut").
   Laddas SIST. Bara .sc.sc2 (ärendevyn) påverkas. Klasser hx-* skapas i ui2.js (scRenderSide, scRenderHeader, scMsgNode). */

/* ── Ram ───────────────────────────────────────────────────────────────────────────────────────── */
.sc.sc2 { gap: 10px; }
.sc.sc2 .col-main { display: flex; flex-direction: column; }

/* ── Ärendehuvud ───────────────────────────────────────────────────────────────────────────────── */
.sc.sc2 .thead { padding: 16px 20px 0; border-bottom: 1px solid var(--mg-line); }
.sc.sc2 .thead .trow { gap: 10px; min-height: 34px; }
.sc.sc2 .thead h2 { font-size: 17px; font-weight: 700; gap: 8px; letter-spacing: -.01em; }
.sc.sc2 .thead h2 .num { font-family: var(--mg-mono); font-size: 13px; font-weight: 600; color: var(--mg-muted); }
.sc.sc2 .thead .acts { gap: 6px; }
.sc.sc2 .thead .acts .dup { display: inline-flex !important; }            /* knapparna finns bara här nu (inte i högerpanelen) */
.sc.sc2 .thead .acts .btn.small { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; gap: 7px; }
.sc.sc2 .thead .acts .revive-btn { background: var(--mg-green-soft); border: 1px solid rgba(34, 197, 94, .35); color: #7ee2a4; }
.sc.sc2 .thead .acts .revive-btn:hover:not(:disabled) { background: rgba(34, 197, 94, .22); }
.sc.sc2 .thead .acts .btn.primary { background: var(--mg-green); border-color: var(--mg-green); color: #04140a; }
.sc.sc2 .thead .acts .btn.danger-o { background: var(--mg-red-soft); border: 1px solid rgba(239, 68, 68, .35); color: #ff9a9a; }
.sc.sc2 .thead .acts .btn.danger-o:hover { background: rgba(239, 68, 68, .22); }
.sc.sc2 .thead .acts .iconbtn { width: 32px; height: 32px; border-radius: 8px; }
.sc.sc2 .thead .meta2 .stl.big { height: 24px; font-size: 12px; }

.hx-pinfo { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 6px; font-size: 13px; color: var(--mg-text2); }
.hx-pinfo b { color: var(--mg-text); font-weight: 600; white-space: nowrap; }
.hx-pinfo .hx-job { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-pinfo .hx-job::before { content: '·'; margin-right: 8px; color: var(--mg-muted); }
.hx-pinfo .hx-when { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--mg-muted); font-size: 12px; }
.hx-pinfo .hx-when i { font-size: 11px; }

.sc.sc2 .ctabs { margin-top: 10px; gap: 4px; border: 0; }
.sc.sc2 .ctabs button { height: 36px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--mg-text2); border-bottom: 2px solid transparent; }
.sc.sc2 .ctabs button i { font-size: 12px; opacity: .8; }
.sc.sc2 .ctabs button:hover { color: var(--mg-text); }
.sc.sc2 .ctabs button.on { color: var(--mg-text); border-bottom-color: var(--mg-green); }

/* gemensamma småbitar */
.hx-dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mg-muted); }
.hx-dot.on { background: var(--mg-green); box-shadow: 0 0 6px rgba(34, 197, 94, .7); }
.hx-id { flex: none; font-family: var(--mg-mono); font-size: 11px; font-weight: 600; color: var(--mg-text2); background: rgba(255, 255, 255, .06); border-radius: 5px; padding: 1px 6px; }

/* ── Meddelanden ───────────────────────────────────────────────────────────────────────────────── */
.sc.sc2 .msgs { padding: 14px 22px 10px; gap: 2px; }
.sc.sc2 .cm.cm2 { gap: 10px; }
.sc.sc2 .cm.cm2:not(.cont) { margin-top: 12px; }
.sc.sc2 .msgs > .cm.cm2:first-child, .sc.sc2 .msgs > .daysep + .cm.cm2, .sc.sc2 .msgs > .older + .cm.cm2 { margin-top: 0; }
.sc.sc2 .cm2 .av { flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 10.5px; font-weight: 700; background: var(--mg-card3); color: var(--mg-text2); }
.sc.sc2 .cm2 .av.avsp { height: 1px; background: none; }
.sc.sc2 .cm2.staffmsg .av { background: rgba(34, 197, 94, .16); color: #7ee2a4; }
.sc.sc2 .cm2 .cb { gap: 4px; max-width: min(70%, 640px); }
.sc.sc2 .cm2 .mh { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; white-space: nowrap; font-size: 12px; line-height: 1.2; }
.sc.sc2 .cm2 .mh b, .sc.sc2 .cm2 .mh .namebtn { font-size: 13px; font-weight: 600; color: var(--mg-text); }
.sc.sc2 .cm2 .mh .mid { color: var(--mg-muted); font-family: var(--mg-mono); font-size: 11px; }
.sc.sc2 .cm2 .mh .mrole { font-size: 11px; font-weight: 600; color: #7ee2a4; }
.sc.sc2 .cm2 .mh .tm { font-size: 11px; color: var(--mg-muted); }
.sc.sc2 .cm2 .bub { background: var(--mg-card2); border: 1px solid var(--mg-line); border-radius: 4px 12px 12px 12px; padding: 8px 12px; }
.sc.sc2 .cm2.cont .bub { border-radius: 12px; }
.sc.sc2 .cm2.staffmsg .bub { background: rgba(34, 197, 94, .09); border-color: rgba(34, 197, 94, .2); border-radius: 12px 4px 12px 12px; }
.sc.sc2 .cm2.staffmsg.cont .bub { border-radius: 12px; }
.sc.sc2 .cm2.aimsg .bub { background: var(--mg-blue-soft); border-color: rgba(91, 157, 255, .25); }
.sc.sc2 .cm2 .mb { font-size: 14px; line-height: 1.5; color: var(--mg-text); }
.sc.sc2 .cchat.int .cm2 .bub { background: var(--mg-purple-soft); border-color: rgba(167, 139, 250, .22); }
.sc.sc2 .sys { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 2px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .04); font-size: 11.5px; color: var(--mg-muted); }
.sc.sc2 .sys .tm { color: var(--mg-muted); opacity: .8; }
.sc.sc2 .daysep { margin: 14px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-muted); }

/* skrivfält */
.sc.sc2 .composer2 { padding: 10px 20px 16px; }
.sc.sc2 .composer2 .cbox { align-items: center; background: #111214; border: 1px solid var(--mg-line2); border-radius: 12px; }
.sc.sc2 .composer2 .cbox:focus-within { border-color: rgba(34, 197, 94, .55); }
.sc.sc2 .composer2 .attbtn { width: 42px; height: 42px; border-right: 0; color: var(--mg-muted); }
.sc.sc2 .composer2 .in2 { font-size: 14px; padding: 11px 4px; }
.sc.sc2 .composer2 .sendbtn { width: 38px; height: 34px; margin: 4px; border-radius: 9px; background: var(--mg-green); color: #04140a; font-size: 14px; }

/* ── Högerpanelen ──────────────────────────────────────────────────────────────────────────────── */
.sc.sc2 .col-side { padding-bottom: 8px; }
.sc.sc2 .col-side .ps { padding: 14px 16px; border-bottom: 1px solid var(--mg-line); }
.sc.sc2 .col-side .pt, .hx-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sc.sc2 .col-side .pt > span:first-child, .hx-t { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mg-text2); }
.sc.sc2 .col-side .pt .pm { font-size: 11.5px; }
.hx-n { font-size: 11px; font-weight: 600; color: var(--mg-muted); background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 0 7px; }
.hx-g { flex: 1; }
.hx-add, .hx-more { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--mg-line2); background: transparent; color: var(--mg-text2); font-size: 12px; }
.hx-add:hover, .hx-more:hover { background: rgba(255, 255, 255, .06); color: var(--mg-text); }
.hx-empty { font-size: 12.5px; color: var(--mg-muted); }

/* spelarväljare (flera spelare) */
.hx-pick { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.hx-pr { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--mg-text2); font-size: 13px; font-weight: 500; text-align: left; }
.hx-pr:hover { background: rgba(255, 255, 255, .04); color: var(--mg-text); }
.hx-pr.on { background: rgba(255, 255, 255, .07); color: var(--mg-text); box-shadow: inset 2px 0 0 var(--mg-green); }
.hx-pr .hx-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-pr .hx-cr { flex: none; font-size: 10.5px; color: var(--mg-muted); }

/* vald spelare */
.hx-card { padding: 12px; border: 1px solid var(--mg-line); border-radius: 12px; background: var(--mg-card2); background-image: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)); }
.hx-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hx-top .av.hx-av { flex: none; width: 38px; height: 38px; border-radius: 50%; font-size: 13px; font-weight: 700; background: linear-gradient(145deg, #2b2e34, #1e2024); color: var(--mg-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.hx-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hx-who b { font-size: 15px; font-weight: 700; color: var(--mg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mg-text2); }
.hx-sub { margin-top: 8px; font-size: 12.5px; color: var(--mg-text2); line-height: 1.4; }
.hx-warn { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--mg-amber); }
.hx-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; margin-top: 12px; }
.hx-a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 54px; padding: 0 4px; border: 1px solid var(--mg-line); border-radius: 9px; background: rgba(255, 255, 255, .03); color: var(--mg-text); font-size: 11.5px; font-weight: 600; }
.hx-a i { font-size: 14px; color: var(--mg-text2); }
.hx-a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-a:hover:not(:disabled) { background: rgba(255, 255, 255, .07); border-color: var(--mg-line2); }
.hx-a:hover:not(:disabled) i { color: var(--mg-green2); }
.hx-a:disabled { opacity: .4; cursor: default; }

/* varningar/kickar/bans – kompakt rad under kortet */
.sc.sc2 .col-side .ps.hx-mod { padding: 10px 2px 0; border: 0; }
.sc.sc2 .col-side .ps.hx-mod .pt { display: none; }
.sc.sc2 .col-side .ps.hx-mod .stack { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mg-text2); }
.sc.sc2 .col-side .ps.hx-mod .btn.small { height: 26px; padding: 0 10px; margin-left: auto; font-size: 11.5px; border-radius: 7px; background: transparent; border: 1px solid var(--mg-line2); }

/* personal */
.hx-staff { display: flex; flex-direction: column; gap: 2px; }
.sc.sc2 .srow2.hx-s { min-height: 40px; gap: 10px; padding: 0 2px; }
.sc.sc2 .srow2.hx-s .avw .av { width: 28px; height: 28px; font-size: 10.5px; font-weight: 700; background: var(--mg-card3); color: var(--mg-text2); }
.sc.sc2 .srow2.hx-s.resp .avw .av { background: rgba(34, 197, 94, .16); color: #7ee2a4; }
.hx-sn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hx-sn b { font-size: 13.5px; font-weight: 600; color: var(--mg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-sn em { font-style: normal; font-size: 11.5px; color: var(--mg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-resp { flex: none; font-size: 10.5px; font-weight: 700; color: #7ee2a4; background: var(--mg-green-soft); border-radius: 999px; padding: 2px 8px; }
.sc.sc2 .srow2.hx-s .iconbtn { width: 26px; height: 26px; opacity: .6; }
.sc.sc2 .srow2.hx-s:hover .iconbtn { opacity: 1; }

/* ärendeuppgifter */
.sc.sc2 .hx-props .props { margin: 0; }
.sc.sc2 .hx-props .prop { padding: 0; min-height: 36px; }
.sc.sc2 .hx-props .prop .pl { font-size: 12.5px; color: var(--mg-text2); }
.sc.sc2 .hx-props .psel { height: 30px; border-radius: 7px; background: #111214; border: 1px solid var(--mg-line); font-size: 12.5px; }
.sc.sc2 .col-side .moreinfo { margin-top: 4px; font-size: 12.5px; color: var(--mg-text2); }
.sc.sc2 .thead .acts .gs-btn { background: var(--mg-blue-soft); border: 1px solid rgba(91, 157, 255, .35); color: #a9c8ff; }
.sc.sc2 .thead .acts .gs-btn:hover:not(:disabled) { background: rgba(91, 157, 255, .22); }
.hx-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc.sc2 .lhead2 .ltabs { gap: 2px; }
.sc.sc2 .lhead2 .ltab { padding: 0 10px; }
/* "Du kontrollerar X" – vem Ge skin/Återuppliva gäller */
.hx-ctl { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; background: rgba(245, 184, 61, .1); border: 1px solid rgba(245, 184, 61, .35); color: #f5c76a; font-size: 12px; white-space: nowrap; max-width: 300px; }
.hx-ctl i { font-size: 12px; }
.hx-ctl .hx-ctl-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hx-ctl b { font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #ffe2a3; overflow: hidden; text-overflow: ellipsis; }
.hx-ctl.multi { animation: hxctl .5s ease-out 1; }
@keyframes hxctl { from { box-shadow: 0 0 0 4px rgba(245, 184, 61, .35); } to { box-shadow: 0 0 0 0 rgba(245, 184, 61, 0); } }
.hx-pinfo .hx-ctl { height: 28px; margin-left: 4px; }
.hx-ctl .hx-id { background: rgba(245, 184, 61, .16); color: #ffe2a3; }
.hx-pinfo .hx-ctl { max-width: none; }
.hx-pinfo .hx-ctl b { overflow: visible; }
.hx-pinfo .hx-when { margin-left: auto; }

/* ══ 1.15.25b: chatten i ärenden – djup, former och ny bakgrund (ägaren 10-20) ═════════════════════ */
/* Bakgrund: mjukt ljus uppifrån + svagt prickmönster, ingen bild, inga animationer */
.sc.sc2 .msgs {
  background-color: #111215;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(34, 197, 94, .07), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(91, 157, 255, .05), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.4px);
  background-size: auto, auto, 22px 22px;
  background-attachment: local, local, local;
  box-shadow: inset 0 10px 18px -12px rgba(0, 0, 0, .7), inset 0 -10px 18px -12px rgba(0, 0, 0, .7);
}
.sc.sc2 .cchat.int .msgs {
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(167, 139, 250, .09), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.4px);
  background-size: auto, 22px 22px;
}

/* Avatarer: rundade med ljus kant och skugga */
.sc.sc2 .cm2 .av:not(.avsp) {
  background: linear-gradient(150deg, #34373e, #1d1f23);
  color: #d9dce2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 8px rgba(0, 0, 0, .45);
}
.sc.sc2 .cm2.staffmsg .av:not(.avsp) { background: linear-gradient(150deg, #2fd16b, #138a43); color: #04140a; }
.sc.sc2 .cm2.aimsg .av:not(.avsp) { background: linear-gradient(150deg, #7fb2ff, #3a6fd1); color: #061226; }

/* Bubblor: gradient, ljus överkant, skugga, mjukare hörn */
.sc.sc2 .cm2 .bub {
  position: relative;
  background: linear-gradient(180deg, #24262c, #1d1f24);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px 16px 16px 16px;
  padding: 9px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 14px rgba(0, 0, 0, .35);
}
.sc.sc2 .cm2.cont .bub { border-radius: 16px; }
.sc.sc2 .cm2.staffmsg .bub {
  background: linear-gradient(180deg, rgba(34, 197, 94, .2), rgba(21, 128, 61, .14));
  border-color: rgba(34, 197, 94, .3);
  border-radius: 16px 6px 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 16px rgba(0, 0, 0, .35), 0 0 22px -8px rgba(34, 197, 94, .35);
}
.sc.sc2 .cm2.staffmsg.cont .bub { border-radius: 16px; }
.sc.sc2 .cm2.aimsg .bub { background: linear-gradient(180deg, rgba(91, 157, 255, .2), rgba(58, 111, 209, .12)); border-color: rgba(91, 157, 255, .3); }
.sc.sc2 .cchat.int .cm2 .bub { background: linear-gradient(180deg, rgba(167, 139, 250, .2), rgba(120, 90, 210, .12)); border-color: rgba(167, 139, 250, .3); }
.sc.sc2 .cm2 .mb { font-size: 14px; line-height: 1.55; color: #eef0f3; }
.sc.sc2 .cm2.staffmsg .mb { color: #effdf3; }
.sc.sc2 .cm2:hover .bub { border-color: rgba(255, 255, 255, .13); }
.sc.sc2 .cm2.staffmsg:hover .bub { border-color: rgba(34, 197, 94, .45); }

/* Namnrad lite luftigare */
.sc.sc2 .cm2 .mh { padding: 0 4px; }
.sc.sc2 .cm2 .mh .mrole { padding: 1px 7px; border-radius: 999px; background: rgba(34, 197, 94, .14); }

/* Underlag i bubblor: egen ruta */
.sc.sc2 .cm2 .bub .evrow { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .08); border-radius: 10px; }

/* Systemrader och dagavdelare: glas-piller med linjer */
.sc.sc2 .sys { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); color: var(--mg-text2); }
.sc.sc2 .daysep { display: flex; align-items: center; gap: 12px; }
.sc.sc2 .daysep::before, .sc.sc2 .daysep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent); }

/* Skrivfältet: svävande glasyta */
.sc.sc2 .composer2 { background: linear-gradient(180deg, rgba(17, 18, 21, 0), #111215 40%); padding-top: 12px; }
.sc.sc2 .composer2 .cbox { background: linear-gradient(180deg, #1b1d21, #15161a); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .45); }
.sc.sc2 .composer2 .cbox:focus-within { border-color: rgba(34, 197, 94, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 3px rgba(34, 197, 94, .12); }
.sc.sc2 .composer2 .sendbtn { background: linear-gradient(150deg, #3ee07c, #16a34a); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 12px rgba(34, 197, 94, .35); }
.sc.sc2 .composer2.int .cbox { border-color: rgba(167, 139, 250, .35); }
.sc.sc2 .cm2 .mh .mrole::before { content: none; }

/* ══ 1.15.25c: VIP-etikett (profil + ärenden) ═══════════════════════════════════════════════════════ */
.vip-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; color: #1a1205; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 8px rgba(0, 0, 0, .35); }
.vip-pill i { font-size: 10px; }
.vip-pill.sm { height: 18px; padding: 0 7px; font-size: 10px; gap: 4px; }
.vip-pill.t1 { background: linear-gradient(150deg, #e6a96b, #a8642c); }
.vip-pill.t2 { background: linear-gradient(150deg, #f1f3f6, #9aa2ad); }
.vip-pill.t3 { background: linear-gradient(150deg, #ffe08a, #d29a12); }
.vip-pill.t4 { background: linear-gradient(150deg, #d8b4fe, #7c3aed); color: #fff; }
.hx-vipi { font-size: 11px; }
.hx-vipi.t1 { color: #e6a96b; } .hx-vipi.t2 { color: #c9ced6; } .hx-vipi.t3 { color: #ffd257; } .hx-vipi.t4 { color: #c4a1ff; }

/* ══ 1.15.25c: ärendelistan som kort ═══════════════════════════════════════════════════════════════ */
.sc.sc2 .lbody2 { padding: 8px 12px 12px; gap: 8px; }
.sc.sc2 .tk2 {
  --st: var(--mg-blue);
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px;
  border: 1px solid rgba(255, 255, 255, .06); border-left: 1px solid rgba(255, 255, 255, .06); border-radius: 12px;
  background: linear-gradient(180deg, #1d1f23, #18191d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 3px 10px rgba(0, 0, 0, .3);
  overflow: hidden; transition: transform .12s, border-color .12s, background .12s;
}
.sc.sc2 .tk2::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--st); box-shadow: 0 0 10px var(--st); }
.sc.sc2 .tk2.st-pagar { --st: var(--mg-green); }
.sc.sc2 .tk2.st-vantar_spelare { --st: var(--mg-amber); }
.sc.sc2 .tk2.st-vantar_personal { --st: var(--mg-purple); }
.sc.sc2 .tk2.st-avslutat { --st: var(--mg-muted); }
.sc.sc2 .tk2:hover { border-color: rgba(255, 255, 255, .12); background: linear-gradient(180deg, #22242a, #1b1c21); transform: translateY(-1px); }
.sc.sc2 .tk2.on { border-color: rgba(34, 197, 94, .45); background: linear-gradient(180deg, rgba(34, 197, 94, .14), rgba(34, 197, 94, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(34, 197, 94, .15); }
.sc.sc2:not(.dm) .tk2 > .av { display: inline-flex; flex: none; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: linear-gradient(150deg, #34373e, #1d1f23); color: #d9dce2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 8px rgba(0, 0, 0, .4); }
.sc.sc2 .tk2.chat > .av { background: linear-gradient(150deg, #7fb2ff, #3a6fd1); color: #061226; }
.sc.sc2 .tk2 .tkm { gap: 5px; }
.sc.sc2 .tk2 .t1 { align-items: center; gap: 8px; }
.sc.sc2 .tk2 .num { font-family: var(--mg-mono); font-size: 11px; font-weight: 700; color: var(--mg-text2); background: rgba(255, 255, 255, .06); border-radius: 5px; padding: 1px 6px; }
.sc.sc2 .tk2 .ttl { font-size: 13.5px; font-weight: 700; color: #e9ebee; }
.sc.sc2 .tk2.unr .ttl { color: #fff; }
.sc.sc2 .tk2 .when { font-size: 11px; color: var(--mg-muted); }
.sc.sc2 .tk2 .t2 { gap: 8px; font-size: 12px; }
.sc.sc2 .tk2 .who { color: var(--mg-text2); }
.sc.sc2 .tk2 .stl { height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .05); font-size: 11px; font-weight: 600; color: var(--mg-text2); gap: 5px; }
.sc.sc2 .tk2 .stl .sd { width: 6px; height: 6px; }
.sc.sc2 .tk2.st-pagar .stl { background: var(--mg-green-soft); color: #7ee2a4; }
.sc.sc2 .tk2.st-vantar_spelare .stl { background: var(--mg-amber-soft); color: #f5c76a; }
.sc.sc2 .tk2.st-vantar_personal .stl { background: var(--mg-purple-soft); color: #c4b1ff; }
.sc.sc2 .tk2 .stl.nytt.unseen { background: var(--mg-blue-soft); color: #a9c8ff; }
.sc.sc2 .tk2 .unread { position: static; flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: linear-gradient(150deg, #3ee07c, #16a34a); color: #04140a; box-shadow: 0 0 12px rgba(34, 197, 94, .55); }

/* ══ 1.15.25c: vänstermenyn ════════════════════════════════════════════════════════════════════════ */
.shell.mg .sidenav {
  background:
    radial-gradient(ellipse 140% 40% at 0% 0%, rgba(34, 197, 94, .12), transparent 60%),
    radial-gradient(ellipse 120% 35% at 100% 100%, rgba(91, 157, 255, .07), transparent 60%),
    linear-gradient(180deg, #141519, #0f1013);
  border-right: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .02), 6px 0 24px rgba(0, 0, 0, .25);
}
.mg-brand { height: 62px; padding: 0 10px; }
.mg-brand .mg-bl { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: linear-gradient(145deg, #3ee07c 0%, #22c55e 45%, #15803d 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px rgba(34, 197, 94, .35); color: #04140a; box-sizing: border-box; }
.mg-brand b { font-size: 15px; font-weight: 800; }
.shell.mg .ns-t { display: flex; align-items: center; gap: 8px; margin: 20px 8px 8px; font-size: 9.5px; letter-spacing: .14em; color: #7c818a; }
.shell.mg .ns-t::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .08), transparent); }
.shell.mg .ns-list { gap: 2px; }
.shell.mg .ns-i { position: relative; height: 36px; padding: 0 8px; gap: 10px; border-radius: 9px; font-size: 13px; color: #c3c7ce; transition: background .12s, color .12s; }
.shell.mg .ns-i i { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 12px; color: #9aa0a9; background: rgba(255, 255, 255, .035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: background .12s, color .12s; }
.shell.mg .ns-i:hover { background: rgba(255, 255, 255, .045); color: #fff; }
.shell.mg .ns-i:hover i { color: #fff; background: rgba(255, 255, 255, .07); }
.shell.mg .ns-i.on { background: linear-gradient(90deg, rgba(34, 197, 94, .16), rgba(34, 197, 94, .03)); color: #fff; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .18); }
.shell.mg .ns-i.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mg-green); box-shadow: 0 0 10px rgba(34, 197, 94, .8); }
.shell.mg .ns-i.on i { color: #04140a; background: linear-gradient(150deg, #3ee07c, #16a34a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 10px rgba(34, 197, 94, .35); }
.shell.mg .ns-i .ns-n, .shell.mg .ns-i .mg-nb { height: 18px; min-width: 18px; border-radius: 9px; background: linear-gradient(150deg, #ff6b6b, #dc2626); box-shadow: 0 0 10px rgba(239, 68, 68, .5); }
.shell.mg .ns-foot { border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 10px; }
.sc.sc2 .col-list { width: clamp(330px, 23vw, 420px); }
.sc.sc2:not(.dm) .tk2 > .av { width: 32px; height: 32px; font-size: 11px; }
.sc.sc2 .tk2 { gap: 10px; padding: 11px 12px 11px 14px; }
.hx-force { width: 100%; height: 38px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; border: 1px solid rgba(91, 157, 255, .4); background: linear-gradient(180deg, rgba(91, 157, 255, .2), rgba(58, 111, 209, .12)); color: #cfe0ff; font-size: 12.5px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 10px rgba(0, 0, 0, .3); }
.hx-force i { font-size: 13px; }
.hx-force:hover:not(:disabled) { background: linear-gradient(180deg, rgba(91, 157, 255, .3), rgba(58, 111, 209, .18)); border-color: rgba(91, 157, 255, .6); color: #fff; }
.hx-force:disabled { opacity: .45; cursor: default; }