:root{
  --bg:#070b14;
  --panel:#0c1326cc;
  --panel2:#0b1224f2;
  --text:#eaf0ff;
  --muted:#a9b6da;
  --blue:#1c5cff;
  --blue2:#0ea5ff;
  --gold:#f7c948;
  --gold2:#ffde70;
  --line:#1b2a52;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --r: 18px;
}

*{box-sizing:border-box}
html{ height:100%; }
body{ min-height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  /*
    Bakgrund: blå+guld-glöd enbart i toppen, tonar sedan mjukt till svart.
    Allt i en gradient — ingen separat div som kan skapa skarvar.
    radial-gradient klipper automatiskt mot transparent långt innan
    linear-gradient tar över och tonar ut mot #020407.
  */
  background:
    radial-gradient(ellipse 130% 35% at 15% 0%,  rgba(28,92,255,.32),  transparent 100%),
    radial-gradient(ellipse 110% 25% at 88% 0%,  rgba(247,201,72,.18), transparent 100%),
    linear-gradient(180deg,
      #0d1528 0%,
      #080e1c 20%,
      #050810 50%,
      #020407 80%,
      #010203 100%
    );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color:var(--text);
  padding-bottom: 92px;
}

/* bg-glow behövs inte längre — allt sköts av body-bakgrunden ovan */
.bg-glow{ display:none; }

.top{padding:18px 14px 6px}
.brand{
  display:flex; gap:14px; align-items:center;
  max-width:1100px; margin:0 auto;
}
.brand .brandText{ flex:1; }
.logo{
  width:92px; height:92px; object-fit:contain;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.45));
}
.brandText h1{margin:.2rem 0 .2rem; font-size:28px; letter-spacing:.2px}
.kicker{color:var(--gold2); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.tagline{margin:.2rem 0 0; color:var(--muted); line-height:1.35}

.hero{
  max-width:1100px; margin:14px auto 0;
}
.banner{
  width:100%;
  border-radius: calc(var(--r) + 8px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.heroCards{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top:12px;
}

.card{
  background: linear-gradient(180deg, rgba(12,19,38,.88), rgba(8,12,24,.92));
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--r);
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.cardTitle{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(234,240,255,.72);
  margin-bottom:8px;
}
.liveRow{display:flex; align-items:center; gap:10px}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.18);
  box-shadow: 0 0 0 6px rgba(255,255,255,.05);
}
.dot.on{
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(247,201,72,.12), 0 0 25px rgba(247,201,72,.35);
}
.liveText{font-weight:800; font-size:16px}
.mini{margin-top:10px; color:var(--muted); font-size:12.5px; line-height:1.35}

.npLine{margin:.25rem 0}
.muted{color:var(--muted)}
.about{margin:.35rem 0; line-height:1.45}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(28,92,255,.10);
}

.main{padding:10px 14px 24px}
.grid{
  max-width:1100px; margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

.panel{
  background: linear-gradient(180deg, rgba(10,16,32,.85), rgba(6,9,18,.92));
  border:1px solid rgba(255,255,255,.09);
  border-radius: calc(var(--r) + 6px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panelHead{
  padding:16px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, rgba(28,92,255,.16), rgba(247,201,72,.10));
}
.panelHead h2{margin:0 0 6px; font-size:18px}
.panelHead p{margin:0; color:var(--muted); line-height:1.35}

.shoutForm{padding:14px 16px 10px}
.row2{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.field span{
  display:block;
  font-size:12px;
  color:rgba(234,240,255,.72);
  margin:0 0 6px;
  font-weight:700;
  letter-spacing:.04em;
}
input, textarea{
  width:100%;
  color:var(--text);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding:12px 12px;
  outline:none;
}
textarea{resize:vertical; min-height:88px}
input:focus, textarea:focus{
  border-color: rgba(14,165,255,.55);
  box-shadow: 0 0 0 4px rgba(14,165,255,.12);
}

.emojiBar{display:flex; gap:8px; flex-wrap:wrap}
.emojiBtn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(247,201,72,.10);
  color:var(--text);
  border-radius: 12px;
  padding:10px 10px;
  cursor:pointer;
  transition: transform .08s ease;
}
.emojiBtn:active{transform: scale(.97)}

.actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
}
.btn{
  appearance:none;
  border:none;
  cursor:pointer;

  border-radius:999px;
  padding:12px 14px;

  font-weight:900;
  letter-spacing:.04em;
  color:#2a1a00;
  text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 -1px 0 rgba(0,0,0,.25);

  /* More metallic: higher contrast + darker base */
  background:
    linear-gradient(180deg,
      #fff9e3 0%,
      #ffe7a6 12%,
      #ffd25a 32%,
      #f0b22a 52%,
      #d39a18 64%,
      #a56f08 100%
    );

  /* Less glow, more “machined” depth */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -6px 10px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 5px 0 #6f4f0a,
    0 10px 18px rgba(0,0,0,.38);

  position:relative;
  overflow:hidden;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* Dual highlight for “metal” */
.btn::before{
  content:"";
  position:absolute;
  inset:2px 6px auto 6px;
  height:42%;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,0));
  pointer-events:none;
}

/* Thin specular line (makes it feel like metal) */
.btn::after{
  content:"";
  position:absolute;
  left:10px; right:10px;
  top:50%;
  height:1px;
  background: rgba(255,255,255,.22);
  transform: translateY(-14px);
  pointer-events:none;
}

.btn:hover{
  filter: brightness(1.05) contrast(1.02);
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(3px);
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 3px 0 #6f4f0a,
    0 6px 12px rgba(0,0,0,.35);
}

.btn:focus-visible{
  outline:none;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -6px 10px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 5px 0 #6f4f0a,
    0 10px 18px rgba(0,0,0,.38),
    0 0 0 4px rgba(14,165,255,.18);
}
.btnGhost{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color: var(--text);
  box-shadow:none;
}
.btnBolt{margin-right:6px}
.status{color:var(--muted); font-size:12.5px; line-height:1.2}

.shoutListWrap{padding:0 16px 16px}
.shoutList{
  max-height: 420px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
}
.item{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.item:last-child{border-bottom:none}
.itemTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:rgba(234,240,255,.72);
}
.itemName{font-weight:900; color: var(--gold2)}
.itemMsg{margin-top:6px; line-height:1.35}

.feature{
  display:flex; gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.feature:last-child{border-bottom:none}
.featureIcon{
  width:52px; height:52px;
  object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.featureIcon{ display:none; }
.feature{ gap:0; }

.feature h3{margin:0 0 6px; font-size:15px}
.feature p{margin:0; color:var(--muted); line-height:1.35}

.badgeGold{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  background: linear-gradient(180deg, rgba(247,201,72,.22), rgba(28,92,255,.10));
  border:1px solid rgba(255,255,255,.10);
  font-size:22px;
}

.divider{height:1px; background: rgba(255,255,255,.08); margin:0 16px}
.playerBar{
  position:fixed; left:0; right:0; bottom:0;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(7,11,20,.65);
  backdrop-filter: blur(12px);
  border-top:1px solid rgba(255,255,255,.10);
}
.playerInner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.pLeft{display:flex; align-items:center; gap:10px; min-width:0}
.pLogo{width:44px; height:44px; object-fit:contain}
.pText{min-width:0}
.pTitle{font-weight:1000}
.pSub{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw}

.pControls{display:flex; align-items:center; gap:10px}
.vol{width:120px}

@media (min-width: 920px){
  .heroCards{grid-template-columns: 1fr 1fr 1fr}
  .grid{grid-template-columns: 1.25fr .75fr}
  .row2{grid-template-columns: 1fr .9fr}
  .brandText h1{font-size:34px}
  .logo{width:106px;height:106px}
}


/* === ZapQ Floating Mini Player (v6) === */
.playerBar{
  position: fixed;
  left: auto !important;
  right: 14px !important;
  bottom: 14px !important;
  width: min(92vw, 360px) !important;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  background: rgba(7,11,20,.88) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.55) !important;
  z-index: 9999 !important;
}

.playerInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.pSub{ max-width: 44vw; }

/* Minimized: becomes a round bolt button */
.playerBar.minimized{
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.playerBar.minimized .pLeft,
.playerBar.minimized .vol,
.playerBar.minimized .pText{ display:none !important; }
.playerBar.minimized #playBtn{ width: 58px; height: 58px; border-radius: 999px; font-size: 18px; }

/* Now-playing list */
.recentWrap{ margin-top:10px; }
.recentTitle{
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(234,240,255,.72);
  margin:10px 0 6px;
}
.recentList{
  display:grid;
  gap:6px;
}
.recentItem{
  font-size:12.5px;
  color:rgba(234,240,255,.88);
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.recentItem .t{ color: rgba(234,240,255,.70); margin-right:8px; }

/* === Drag handle for floating player (v7) === */
.dragHandle{
  user-select:none;
  -webkit-user-select:none;
  padding:8px 10px;
  margin:2px 2px 8px;
  border-radius:16px;
  font-weight:900;
  letter-spacing:.06em;
  font-size:11px;
  text-transform:uppercase;
  color: rgba(234,240,255,.78);
  background: linear-gradient(90deg, rgba(28,92,255,.14), rgba(247,201,72,.10));
  border: 1px solid rgba(255,255,255,.08);
  cursor: grab;
}
.playerBar.minimized .dragHandle{
  display:none !important;
}

/* === v11: Safety - if any old footer player remains, hide it === */
.playerBar{ display:none !important; }

/* === v11: Inline player inside LIVE-status card === */
.playerInline{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.playerInlineHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.pillLive{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.pillLive.on{
  border-color: rgba(247,201,72,.35);
  background: rgba(247,201,72,.12);
  box-shadow: 0 0 18px rgba(247,201,72,.20);
}
.pillText{
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48vw;
}
.playerInline .pSub{ max-width: 44vw; }
@media (min-width: 920px){
  .pillText{ max-width: 220px; }
  .playerInline .pSub{ max-width: 240px; }
}


/* === Shoutbox tuning: compact + 3 items visible + music emojis (v12) === */
.emojiRow{ display:flex; flex-wrap:wrap; gap:8px; }
.emojiBtn{ width:40px; height:40px; border-radius:12px; font-size:18px; }
@media (max-width:520px){
  .emojiBtn{ width:38px; height:38px; }
}

/* Smaller message box */
#message.msgSmall{
  min-height: 78px;
  height: 78px;
  resize: vertical; /* allow a little resizing if you want */
}

/* Show max ~3 shouts, then scroll */
#shoutList{
  max-height: 210px; /* approx 3 items depending on text */
  overflow-y: auto;
  padding-right: 6px;
}

/* Hide scrollbar but keep scrolling */
#shoutList::-webkit-scrollbar{ width:0px; height:0px; }
#shoutList{ scrollbar-width: none; -ms-overflow-style: none; }



/* Mini shouts in Varför ZapQ */
.panelSubTitle{
  margin: 8px 0 10px;
  padding: 0 2px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.miniShouts{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 2px 2px 6px;
  max-height: 240px; /* ~3 shouts synliga */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}
.miniShouts::-webkit-scrollbar{ width:0; height:0; }
.miniShout{
  padding:12px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.miniShoutTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}
.miniShoutName{ font-weight: 800; color: var(--gold2); }
.miniShoutMsg{ font-size: 14px; line-height: 1.25; }


/* ======================================
   🆕 TILLÄGG: Party-o-meter, Stats,
   Topp10, Reaktioner, Slumpa, Lyssnar
====================================== */

/* === 🏆 Lyssnar-stats === */
.listenerStats{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:10px 0 0;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-size:13px; color:var(--muted);
}
.statItem{ display:flex; align-items:center; gap:5px; }
.statIcon{ font-size:14px; }
.statSep{ color:rgba(255,255,255,.2); }
#listenerCount, #listenerPeak{ font-weight:800; color:var(--gold2); }

/* === 🎉 Party-o-meter === */
.partyMeter{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
}
.partyMeterLabel{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(234,240,255,.65); margin-bottom:10px;
}
.partyMeterVal{ font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--text); }

/* === VU LED BAR — 2 rader === */
.vuLeds{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:2px 0;
}
.vuRow{
  display:flex;
  gap:3px;
  height:16px;
}
.vuLed{
  flex:1;
  height:100%;
  border-radius:2px;
  transition: box-shadow .04s ease;
  position:relative;
}

/* OFF state — mörk "inaktiv" LED */
.vuLed--green  { background:rgba(0,200,80,.12);  border:1px solid rgba(0,200,80,.18); }
.vuLed--yellow { background:rgba(220,180,0,.12); border:1px solid rgba(220,180,0,.18); }
.vuLed--red    { background:rgba(255,40,40,.12); border:1px solid rgba(255,40,40,.18); }

/* ON state — tänd LED med glow */
.vuLed--green.vuLed--on{
  background: linear-gradient(180deg,#00ff66,#00cc44);
  border-color:#00ff66;
  box-shadow: 0 0 6px rgba(0,255,80,.7), 0 0 14px rgba(0,255,80,.35);
}
.vuLed--yellow.vuLed--on{
  background: linear-gradient(180deg,#ffe033,#ddaa00);
  border-color:#ffe033;
  box-shadow: 0 0 6px rgba(255,220,40,.8), 0 0 14px rgba(255,200,0,.4);
}
.vuLed--red.vuLed--on{
  background: linear-gradient(180deg,#ff4444,#cc1111);
  border-color:#ff4444;
  box-shadow: 0 0 8px rgba(255,50,50,.9), 0 0 18px rgba(255,0,0,.5);
}

/* Peak hold marker */
.vuLed--peak.vuLed--green{
  background:rgba(0,255,80,.4);
  border-color:rgba(0,255,80,.7);
  box-shadow: 0 0 10px rgba(0,255,80,.5);
}
.vuLed--peak.vuLed--yellow{
  background:rgba(255,220,40,.4);
  border-color:rgba(255,220,40,.7);
  box-shadow: 0 0 10px rgba(255,200,0,.5);
}
.vuLed--peak.vuLed--red{
  background:rgba(255,50,50,.5);
  border-color:rgba(255,50,50,.8);
  box-shadow: 0 0 12px rgba(255,0,0,.6);
}

/* === 💬 Reaktions-knappar === */
.reactionRow{
  display:flex; gap:8px; align-items:center; margin:10px 0 6px;
}
.reactBtn{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text); font-size:14px; cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.reactBtn:hover{
  background:rgba(247,201,72,.12);
  border-color:rgba(247,201,72,.3);
  transform:scale(1.05);
}
.reactBtn.reacted{
  transform:scale(1.25);
  background:rgba(247,201,72,.22);
  box-shadow:0 0 18px rgba(247,201,72,.35);
}
.reactCount{ font-size:12px; font-weight:800; color:var(--muted); }

/* === 🎲 Slumpa-sektion === */
.randomWrap{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px 0;
}
.btnBlue{
  background:linear-gradient(180deg,#3d7eff,#1a4fcc);
  color:#fff; text-shadow:none;
  box-shadow:0 4px 16px rgba(28,92,255,.4);
}
.btnBlue:hover{ filter:brightness(1.1); }
/* === Skicka-knapp — glasig gold === */
.btnGold{
  color: #fff8e7;
  text-shadow: 0 1px 8px rgba(255,200,60,.6), 0 0 2px rgba(0,0,0,.4);

  background:
    linear-gradient(135deg,
      rgba(255,235,140,.18) 0%,
      rgba(255,200,60,.10) 40%,
      rgba(200,140,0,.08)  100%
    );

  border: 1px solid rgba(255,220,80,.35);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 18px rgba(255,200,50,.12),
    0 4px 16px rgba(0,0,0,.35);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btnGold::before{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}
.btnGold::after{
  background: rgba(255,220,80,.15);
}

.btnGold:hover{
  border-color: rgba(255,220,80,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 0 28px rgba(255,200,50,.22),
    0 6px 20px rgba(0,0,0,.35);
  filter: brightness(1.08);
}

.btnGold:active{
  transform: translateY(2px);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,220,80,.20),
    0 0 12px rgba(255,200,50,.10),
    0 2px 8px rgba(0,0,0,.3);
}
.randomHint{
  font-size:13px; color:var(--gold2); font-weight:700;
  opacity:0; transform:translateY(4px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.randomHint.show{ opacity:1; transform:translateY(0); }

/* === 🎵 Topp 3-lista (inuti Varför ZapQ-kort) === */
.top10Wrap{
  margin:10px 14px 6px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.top10Head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(234,240,255,.72); margin-bottom:8px;
}
.top10Sub{ font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); font-size:11px; }
.top10List{ display:flex; flex-direction:column; gap:5px; }
.top10Item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  margin-bottom:6px; font-size:13px;
}
.top10Item:last-child{ margin-bottom:0; }
.top10Rank{ font-size:16px; min-width:24px; text-align:center; }
.top10Msg{ flex:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top10Count{
  font-size:11px; font-weight:800; letter-spacing:.05em;
  padding:3px 7px; border-radius:999px;
  background:rgba(247,201,72,.15);
  color:var(--gold2); border:1px solid rgba(247,201,72,.2);
  white-space:nowrap;
}

/* === grid2 fix (shoutform) === */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
@media(max-width:520px){ .grid2{grid-template-columns:1fr;} }
label{
  display:block;
  font-size:12px; font-weight:700;
  color:rgba(234,240,255,.72);
  letter-spacing:.04em; margin-bottom:6px;
}

/* === Kompakt ZapQ-pitch === */
.zapqPitch{
  padding:10px 14px 12px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.7;
}

/* === 🌐 Språkknapp === */
.langBtn{
  margin-left:auto;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  line-height: 0;
  transition: background .15s, transform .1s, box-shadow .15s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  display:flex; align-items:center;
}
.langBtn:hover{
  background: rgba(255,255,255,.15);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.langBtn:active{ transform: scale(.95); }
.langBtn svg{ display:block; border-radius:3px; }