:root{
      --bg0:#06080d;
      --bg1:#0a1020;
      --card: rgba(13,18,34,.72);
      --stroke: rgba(255,255,255,.12);
      --stroke2: rgba(137,207,255,.22);
      --text: #edf3ff;
      --muted:#a9b7d6;
      --good:#4ef0a2;
      --bad:#ff5f73;
      --warn:#ffd37a;
      --accent:#7b5cff;
      --accent2:#34d2ff;
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --radius: 18px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      color:var(--text);
      font-family:"Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1100px 520px at 15% 10%, rgba(123,92,255,.30), transparent 60%),
        radial-gradient(900px 540px at 85% 5%, rgba(52,210,255,.18), transparent 60%),
        radial-gradient(900px 640px at 50% 115%, rgba(78,240,162,.10), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.14;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 12px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 16px);
      mix-blend-mode:overlay;
    }

    .wrap{max-width:min(1560px, 96vw); margin:0 auto; padding:clamp(18px, 2vw, 30px) clamp(14px, 2.2vw, 34px) clamp(40px, 4vw, 70px);}
    .top{
      display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
      margin-bottom:14px;
    }
    .stats-brand{display:flex; align-items:center; gap:14px; min-width: 260px;}
    .logo{height:clamp(44px, 3.2vw, 60px); width:auto; display:block; filter: drop-shadow(0 12px 28px rgba(0,0,0,.35));}
    h1{margin:0; font-family:"Cinzel", serif; font-weight:700; letter-spacing:.6px; font-size:clamp(22px, 1.6vw, 30px); line-height:1.05;}
    .sub{margin-top:4px; color:var(--muted); font-size:clamp(13px, 1.0vw, 15px);}

    .actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
    .btn{
      appearance:none; border:none; cursor:pointer;
      padding:10px 12px; border-radius:14px;
      color:var(--text);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      border:1px solid var(--stroke);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      display:inline-flex; align-items:center; gap:10px;
      text-decoration:none;
      font-weight:800; font-size:clamp(13px, 0.95vw, 15px);
      user-select:none;
    }
    .btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.20);}
    .btn:active{transform: translateY(0);}
    .btn.primary{
      background: linear-gradient(135deg, rgba(123,92,255,.55), rgba(52,210,255,.28));
      border-color: rgba(137,207,255,.28);
    }
    .btn.ghost{background: transparent; box-shadow:none;}
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 12px; border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(10,15,28,.50);
      color:var(--muted);
      font-size:clamp(12px, 0.9vw, 14px);
      white-space:nowrap;
    }
    .mono{font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing:.2px;}
    .muted{color:var(--muted);}

    .card{
      background: linear-gradient(180deg, rgba(13,18,34,.78), rgba(10,15,28,.70));
      border:1px solid rgba(137,207,255,.16);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .card::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(800px 220px at 10% 0%, rgba(123,92,255,.18), transparent 60%),
        radial-gradient(700px 240px at 90% 0%, rgba(52,210,255,.12), transparent 60%);
      pointer-events:none;
    }
    .card > *{position:relative}
    .hd{
      padding:clamp(14px, 1.2vw, 18px) clamp(16px, 1.4vw, 22px);
      border-bottom:1px solid rgba(255,255,255,.08);
      display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    }
    .hd h2{
      margin:0;
      font-size:14px;
      letter-spacing:.4px;
      font-family:"Cinzel", serif;
      display:flex; align-items:center; gap:10px;
    }
    .bd{padding:clamp(14px, 1.2vw, 18px) clamp(16px, 1.4vw, 22px);}

    .badge{
      display:inline-flex; align-items:center; justify-content:center;
      padding:3px 9px; border-radius:999px;
      font-size:clamp(12px, 0.9vw, 14px); font-weight:900;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      white-space:nowrap;
    }
    .badge.ok{border-color: rgba(78,240,162,.35); background: rgba(78,240,162,.10); color: var(--good);}
    .badge.no{border-color: rgba(255,95,115,.35); background: rgba(255,95,115,.10); color: var(--bad);}
    .badge.warn{border-color: rgba(255,211,122,.35); background: rgba(255,211,122,.10); color: var(--warn);}
    .badge.dim{opacity:.75}
    .badge.neu{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: rgba(237,243,255,.86);}

    .lamp{
      width:12px; height:12px; border-radius:50%;
      box-shadow: 0 0 18px rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      flex:0 0 auto;
    }
    .lamp.on{background: var(--good); box-shadow: 0 0 18px rgba(78,240,162,.28);}
    .lamp.off{background: var(--bad); box-shadow: 0 0 18px rgba(255,95,115,.28);}
    .lamp.unk{background: var(--warn); box-shadow: 0 0 18px rgba(255,211,122,.22);}
    .lamp.dim{background: rgba(255,255,255,.22); box-shadow: 0 0 18px rgba(255,255,255,.10);}

    .grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:14px;
      align-items:start;
    }
    @media (max-width: 980px){ .grid{grid-template-columns:1fr;} .actions{justify-content:flex-start} }

    .statusBox{
      padding:14px 14px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
    }
    .bigLine{
      display:flex; align-items:center; gap:12px; flex-wrap:wrap;
      font-size:clamp(20px, 1.6vw, 26px);
      font-weight:900;
      letter-spacing:.3px;
      margin-top:6px;
    }

    /* Live-info i grafkortet */
    .liveTop{margin-bottom:14px;}
    .liveState{
      display:flex; align-items:center; gap:12px; flex-wrap:wrap;
      font-size:clamp(20px, 1.6vw, 26px);
      font-weight:900;
      letter-spacing:.3px;
      margin:6px 0 12px;
    }
    .liveInfoGrid{
      display:grid;
      grid-template-columns: .9fr 1.1fr;
      gap:14px;
      align-items:start;
    }
    .liveLeft{display:grid; grid-template-columns:1fr; gap:10px;}
    .miniCard{
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
    }
    .miniLabel{color: var(--muted); font-weight:900; font-size:13px; letter-spacing:.2px;}
    .miniValue{
      margin-top:8px;
      font-weight:900;
      font-size:18px;
      display:flex;
      align-items:baseline;
      gap:6px;
      flex-wrap:wrap;
    }
    .miniValue.mono{font-size:14px; font-weight:800;}
    .livePlayersCard .chips{margin-top:8px;}
    .livePlayersCard .chartHint{margin:8px 0 0;}
    @media (max-width: 860px){ .liveInfoGrid{grid-template-columns:1fr;} }

    .kv{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px;}
    .row{
      display:grid;
      grid-template-columns: minmax(130px,.34fr) 1fr;
      gap:12px;
      padding:10px 10px;
      border-radius:14px;
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
    }
    @media (max-width: 720px){ .row{grid-template-columns:1fr; gap:6px;} }
    .key{font-weight:900; color: rgba(237,243,255,.92);}
    .val{color: rgba(237,243,255,.92); word-break:break-word;}

    .chips{display:flex; flex-wrap:wrap; gap:8px;}
    .onlineChips{margin-top:2px;}
    .pluginArea{margin-top:12px;}
    .chip{
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(123,92,255,.10);
      font-size:clamp(12px, 0.9vw, 14px);
      font-weight:900;
      color: rgba(237,243,255,.92);
    }

    button.chip{
      appearance:none;
      cursor:pointer;
      font: inherit;
      color: inherit;
    }
    button.chip:focus-visible{
      outline: 2px solid rgba(52,210,255,.55);
      outline-offset: 2px;
    }

    /* Spelare-chip med avatar */
    .chip.chipPlayer{display:inline-flex; align-items:center; gap:8px; padding:6px 10px 6px 6px;}
    .chip.chipPlayer .pHead{width:22px; height:22px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18);}

    /* Verifierad (check-symbol) */
    .vCheck{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:18px;
      height:18px;
      border-radius:999px;
      border:1px solid rgba(52,210,255,.28);
      background: rgba(52,210,255,.10);
      color: var(--accent2);
      font-size:12px;
      font-weight:900;
      line-height:1;
      flex:0 0 auto;
      user-select:none;
    }
    .chip.chipPlayer .vCheck{width:16px; height:16px; font-size:11px;}

    /* Rank-badges */
    .rankBadges{display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center;}
    .rankBadge{
      display:inline-flex; align-items:center;
      padding:3px 8px;
      border-radius:999px;
      border:1px solid rgba(137,207,255,.22);
      background: rgba(52,210,255,.10);
      font-size:11px;
      font-weight:900;
      letter-spacing:.35px;
      color: rgba(237,243,255,.92);
      line-height:1;
    }
    .chip.chipPlayer .rankBadges{margin-left:8px;}
    .chip.chipPlayer .rankBadge{padding:2px 7px; font-size:10px;}


    /* Registrerade spelare */
    .search{
      width:100%;
      max-width:520px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.12);
      color: rgba(237,243,255,.92);
      font-weight:800;
      outline:none;
    }
    .search::placeholder{color: rgba(169,183,214,.75);}

    .rList{display:flex; flex-direction:column; gap:8px; max-height:clamp(560px, 60vh, 760px); overflow:auto; padding-right:4px;}
    .rItem{
      display:flex; align-items:center; gap:12px;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      cursor:pointer;
      user-select:none;
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
    }
    .rItem:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05);} 
    .rItem:active{transform: translateY(0px);} 
    .rItem img{width:36px; height:36px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18);}
    .rMain{min-width:0; display:flex; flex-direction:column; gap:4px;}
    .rNameRow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;}
    .rPos{
      display:none;
      align-items:center;
      justify-content:center;
      min-width:22px;
      height:22px;
      padding:0 7px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      font-size:12px;
      font-weight:900;
      color: rgba(237,243,255,.92);
      line-height:1;
    }
    .rItem.showPos .rPos{display:inline-flex;}

    /* Podium (endast vid sortering Saldo/Speltid, högst först) */
    .rItem.leader1{background: rgba(255,215,90,.10); border-color: rgba(255,215,90,.26);}
    .rItem.leader2{background: rgba(210,220,235,.10); border-color: rgba(210,220,235,.26);}
    .rItem.leader3{background: rgba(205,127,50,.10); border-color: rgba(205,127,50,.26);}

    .rItem.leader1 .rPos{background: rgba(255,215,90,.22); border-color: rgba(255,215,90,.45);}
    .rItem.leader2 .rPos{background: rgba(210,220,235,.22); border-color: rgba(210,220,235,.45);}
    .rItem.leader3 .rPos{background: rgba(205,127,50,.22); border-color: rgba(205,127,50,.45);}

    .rItem.leader1:hover{background: rgba(255,215,90,.14);}
    .rItem.leader2:hover{background: rgba(210,220,235,.14);}
    .rItem.leader3:hover{background: rgba(205,127,50,.14);}

    .rName{font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 420px;}
    @media (max-width: 520px){ .rName{max-width: 220px;} }
    .rBadges{display:flex; gap:6px; flex-wrap:wrap;}
    .rMeta{margin-top:2px; font-size:12px; color: var(--muted);}
    .rRight{margin-left:auto; display:flex; align-items:center; gap:8px; white-space:nowrap;}
    .rSortVal{font-size:12px; font-weight:900; color: var(--muted);}
    .rDot{width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.18);}
    .rDot.on{background: var(--good); box-shadow: 0 0 14px rgba(78,240,162,.20);}
    .rDot.off{background: rgba(255,255,255,.16);}

.regTools{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.regSort{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

.select{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: rgba(237,243,255,.92);
  font-weight:900;
  outline:none;
}
.btn.sm{padding:8px 10px; font-size:12px; border-radius:12px;}

.regPager{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  margin-top:12px;
}
.regPager .pageInfo{
  margin-right:auto;
  color: var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.regPager .btn{padding:8px 10px; font-size:12px; border-radius:12px;}
.regPager .btn[disabled]{opacity:.5; cursor:default; transform:none;}
.regPager .btn.pageActive{
  background: rgba(52,210,255,.12);
  border-color: rgba(137,207,255,.26);
}




    .filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
    .seg{
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.12);
      color: rgba(237,243,255,.92);
      font-weight:900;
      font-size:clamp(12px, 0.9vw, 14px);
      cursor:pointer;
      user-select:none;
    }
    .seg.active{
      background: rgba(52,210,255,.12);
      border-color: rgba(137,207,255,.26);
    }

    details.plugin{
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      padding:10px 10px;
      margin:10px 0;
    }
    details.plugin > summary{
      cursor:pointer;
      list-style:none;
      display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    }
    details.plugin > summary::-webkit-details-marker{display:none;}
    .pLeft{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:900; letter-spacing:.2px;}
    .pName{font-weight:900; color: rgba(237,243,255,.95);}
    .pMeta{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
    .pBody{padding-top:10px;}
    .mini{font-size:12px; color: var(--muted); font-weight:800;}

    /* Plugin-grupper & listor */
    details.plugin.pluginGroup{background: rgba(0,0,0,.12);}
    details.plugin.pluginItem{
      margin:8px 0;
      padding:9px 9px;
      border-radius:14px;
      background: rgba(255,255,255,.02);
      border-color: rgba(255,255,255,.09);
    }
    .pList{margin-top:10px;}

    /* Graf */
    .chartTop{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
    }
    .chartMainTitle{
      margin:10px 0 14px;
      text-align:center;
      font-family:"Cinzel", serif;
      font-size:clamp(26px, 2.8vw, 40px);
      line-height:1.1;
      letter-spacing:.35px;
      color: rgba(237,243,255,.98);
      text-shadow: 0 8px 24px rgba(0,0,0,.45);
    }
    .chartStats{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    }
    .statPill{
      padding:8px 10px; border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.14);
      font-size:clamp(12px, 0.9vw, 14px);
      font-weight:900;
      color: rgba(237,243,255,.92);
    }
    .chartWrap{
      margin-top:12px;
      padding:12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
    }
    .chartWrapSub{
      margin-top:14px;
    }
    .subChartTitle{
      margin:0 0 10px;
      text-align:center;
      font-family:"Cinzel", serif;
      font-size:clamp(20px, 1.8vw, 30px);
      letter-spacing:.3px;
      color: rgba(237,243,255,.96);
    }
    .chartWrapSub canvas{
      height:clamp(220px, 28vh, 300px);
    }
    canvas{display:block; width:100%; height:clamp(240px, 30vh, 340px);}
    .chartHint{margin-top:10px; color: var(--muted); font-size:12px; font-weight:700;}

    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      padding:10px 12px;
      border-radius:999px;
      background: rgba(10,15,28,.85);
      border:1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow);
      color: rgba(237,243,255,.92);
      font-weight:900;
      font-size:12px;
      opacity:0;
      pointer-events:none;
      transition: opacity .18s ease, transform .18s ease;
    }
    .toast.show{opacity:1; transform:translateX(-50%) translateY(-2px);}

    footer{
      margin-top:14px;
      color: rgba(169,183,214,.85);
      font-size:12px;
      display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
      opacity:.95;
    }
    .sep{opacity:.35}
  
    /* Modal: spelardetaljer */
    [hidden]{display:none !important;}
    .modalBack[hidden]{display:none !important;}

    body.modalOpen{overflow:hidden;}
    .modalBack{
      position:fixed; inset:0;
      display:flex; align-items:center; justify-content:center;
      padding:18px;
      overflow-y:auto;
      background: rgba(0,0,0,.68);
      backdrop-filter: blur(8px);
      z-index: 1200;
    }
    .modalCard{
      width:min(860px, 100%);
      max-height: calc(100dvh - 36px);
      display:flex;
      flex-direction:column;
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(13,18,34,.92);
      box-shadow: 0 22px 90px rgba(0,0,0,.62);
      overflow:hidden;
    }
    .modalTop{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:12px;
      padding:14px 14px 10px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .modalPlayer{display:flex; gap:12px; align-items:center; min-width:0;}
    .modalPlayer img{
      width:56px; height:56px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      flex: 0 0 auto;
    }
    .modalName{
      font-weight:900;
      font-size:18px;
      line-height:1.15;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      max-width: 360px;
    }
    .tagRow{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
    .tag{
      display:inline-flex; align-items:center;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(137,207,255,.24);
      background: rgba(123,92,255,.18);
      font-weight:900;
      font-size:12px;
      letter-spacing:.4px;
    }
    .modalBody{
      padding:14px;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .pmLayout{
      display:flex;
      gap:18px;
      align-items:stretch;
    }

    /* Vänster: spelarkaraktär (utan synligt "kort") */
    .pmChar{
      flex:0 0 auto;
      width:230px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
      border:none;
      background: transparent;
      border-radius:0;
      overflow:visible;
    }
    .pmChar img{
      width:100%;
      height:auto;
      max-height: 420px;
      object-fit:contain;
      display:block;
      border-radius:0;
      background: transparent;
      border:none;
    }

    /* Höger: raderna ska ta hela bredden */
    .pmGrid{
      flex: 1 1 auto;
      width: 100%;
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top:6px;
      min-width: 0;
    }
    .pmRow{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 16px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
    }
    .pmLabel{
      display:inline-flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      font-weight:900;
      color: rgba(169,183,214,.96);
      font-size:15px;
      letter-spacing:.25px;
      flex: 0 0 auto;
      white-space:nowrap;
    }
    .pmLabelMeta{
      font-size:12px;
      letter-spacing:.2px;
      opacity:.82;
    }
    .pmValue{
      text-align:right;
      font-weight:900;
      color: rgba(237,243,255,.98);
      font-size:16px;
      flex: 1 1 auto;
      min-width: 0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .pmRowWrap{
      align-items:flex-start;
    }
    .pmValueFlow{
      text-align:right;
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      line-height:1.45;
    }

    /* Större taggar i raderna (t.ex. rank) */
    .pmValue .tag{
      font-size:13px;
      padding:7px 11px;
    }

    @media (max-width: 720px){
      .modalBack{
        align-items:flex-start;
        padding:10px;
      }
      .modalCard{
        max-height: calc(100dvh - 20px);
      }
      .modalName{
        max-width: min(56vw, 240px);
      }
      .pmLayout{flex-direction:column;}
      .pmChar{width:100%;}
      .pmChar img{max-height: 320px;}
      .pmRow{
        padding:13px 14px;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
      }
      .pmLabel{font-size:14px; white-space:normal;}
      .pmValue{
        font-size:15px;
        width:100%;
        text-align:left;
        white-space:normal;
      }
    }

.pmValue .tag{ margin-left:6px; margin-bottom:4px; }
    .modalBody .kv{margin-top:10px;}
    .modalBody .row{padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.08);}
    .modalBody .row:last-child{border-bottom:none;}
    .modalBody .key{color:var(--muted); font-weight:900;}
    .modalBody .val{font-weight:800;}

    /* Swetale site-aligned overrides */
    :root{
      --bg0:#0a0d10;
      --bg1:#0f151d;
      --stroke:rgba(255,255,255,.14);
      --stroke2:rgba(229,181,103,.30);
      --text:#eef2f6;
      --muted:#9ea7b3;
      --good:#48c78e;
      --bad:#ff6b6b;
      --warn:#e5b567;
      --accent:#e5b567;
      --accent2:#1f5c4f;
      --shadow:0 16px 48px rgba(0,0,0,.48);
    }
    body{
      font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(920px 500px at 18% 10%, rgba(31,92,79,.18), transparent 60%),
        radial-gradient(940px 540px at 82% 8%, rgba(229,181,103,.14), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
    }
    body::before{
      opacity:.10;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 12px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 16px);
    }
    .wrap{
      padding-top:clamp(18px, 2vw, 30px);
    }
    h1,.hd h2{
      font-family:"Cinzel", serif;
    }
    .sub{
      color:rgba(158,167,179,.95);
    }
    .card{
      background:linear-gradient(180deg, rgba(17,22,28,.82), rgba(17,22,28,.66));
      border:1px solid rgba(255,255,255,.11);
      box-shadow:var(--shadow);
    }
    .card::before{
      background:
        radial-gradient(820px 240px at 10% 0%, rgba(229,181,103,.14), transparent 62%),
        radial-gradient(720px 260px at 90% 0%, rgba(31,92,79,.16), transparent 62%);
    }
    .btn{
      font-family:"Cinzel", serif;
      border:1px solid rgba(255,255,255,.22);
      background:linear-gradient(135deg, rgba(229,181,103,.34), rgba(31,92,79,.30));
      text-shadow:1px 1px 3px rgba(0,0,0,.55);
    }
    .btn:hover{
      border-color:rgba(255,255,255,.32);
      box-shadow:0 10px 26px rgba(229,181,103,.28);
      background:linear-gradient(135deg, rgba(229,181,103,.48), rgba(31,92,79,.44));
    }
    .btn.primary{
      background:linear-gradient(135deg, rgba(229,181,103,.52), rgba(31,92,79,.48));
      border-color:rgba(229,181,103,.46);
    }
    .btn.ghost{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.18);
    }
    .pill{
      background:rgba(17,22,28,.86);
      border-color:rgba(255,255,255,.18);
    }
    .chip{
      background:rgba(31,92,79,.18);
      border-color:rgba(229,181,103,.30);
    }
    .badge.warn{
      border-color:rgba(229,181,103,.45);
      background:rgba(229,181,103,.16);
    }
    .seg.active{
      border-color:rgba(229,181,103,.55);
      background:rgba(229,181,103,.22);
      color:#fff;
    }

@media (max-width: 900px){
  .wrap{
    padding-top:clamp(16px, 2vw, 24px);
  }
}

/* View modes: /stats shows graph, /spelare shows registered list */
body.stats-view-main .card--registered,
body.stats-view-main .stats-gap{
  display:none;
}

body.stats-view-players .card--stats-overview,
body.stats-view-players .stats-gap{
  display:none;
}