/* =========================================================
   Demobandet – neon, kassett och nattklubb
   ========================================================= */

@font-face { font-family: "Marker"; src: url(fonts/permanent-marker-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Skrivmaskin"; src: url(fonts/special-elite-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/barlow-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --natt: #05051a;
  --natt-2: #0a0b2a;
  --panel: #0c0e33;
  --panel-2: #121548;
  --linje: #2a34c9;
  --linje-svag: #1d2370;
  --rosa: #ff2fb0;
  --rosa-mjuk: #ff7ad1;
  --cyan: #4ff3ff;
  --lila: #7b4dff;
  --bla: #3d5bff;
  --text: #e9ebff;
  --text-svag: #a2a7dd;
  --gron: #3cf08a;
  --rod: #ff4d6d;
  --gul: #ffd84d;
  --radie: 6px;
  --glod-bla: 0 0 0 1px rgba(61,91,255,.35), 0 0 18px rgba(61,91,255,.25);
  --glod-rosa: 0 0 6px rgba(255,47,176,.9), 0 0 22px rgba(255,47,176,.55);
  --text-font: "Barlow", system-ui, sans-serif;
  --rubrik-font: "Barlow Condensed", "Barlow", sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(123,77,255,.22), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(61,91,255,.15), transparent 60%),
    var(--natt);
  background-attachment: fixed;
  color: var(--text);
  font: 400 16px/1.5 var(--text-font);
  min-height: 100vh;
}
body.har-spelare { padding-bottom: 96px; }
img, svg { display: block; max-width: 100%; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.dold, .honung { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hoppa { position: absolute; left: -999px; top: 8px; background: var(--rosa); color: #000; padding: 8px 14px; z-index: 100; }
.hoppa:focus { left: 8px; }

/* ---------- Toppen ---------- */
.topp {
  position: relative;
  max-width: 1500px; margin: 0 auto;
  padding: 18px 24px 10px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 32px;
  overflow: hidden;
}
.topp::before { /* stjärnstoft */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 12% 30%, #fff, transparent), radial-gradient(1px 1px at 35% 80%, #9cf, transparent),
    radial-gradient(1px 1px at 58% 20%, #fff, transparent), radial-gradient(1px 1px at 81% 65%, #f9c, transparent),
    radial-gradient(1px 1px at 92% 15%, #fff, transparent), radial-gradient(1px 1px at 4% 75%, #9cf, transparent);
}
.logga { text-decoration: none; display: flex; align-items: baseline; line-height: .9; grid-row: span 2; }
.logga__demo {
  font-family: "Marker", cursive; font-size: clamp(2.6rem, 6vw, 4.6rem); color: #ffd6f1;
  text-shadow: 0 0 4px #fff, var(--glod-rosa), 0 0 40px rgba(255,47,176,.35);
  transform: rotate(-4deg); display: inline-block; margin-right: .1em;
}
.logga__bandet {
  font-family: var(--rubrik-font); font-weight: 800; font-size: clamp(2.4rem, 5.6vw, 4.3rem);
  color: #d8fdff; letter-spacing: .01em;
  text-shadow: 0 0 3px #fff, 0 0 10px var(--cyan), 0 0 28px rgba(79,243,255,.5);
}
.topp__text { grid-column: 1; }
.topp__slogan { font-family: "Skrivmaskin", monospace; font-size: 1.15rem; margin: 6px 0 2px 22px; letter-spacing: .03em; }
.topp__format { font-family: "Skrivmaskin", monospace; margin: 0; color: var(--text-svag); font-size: .95rem; }
.topp__format span { color: var(--rosa); margin: 0 .5em; }
.topp__kassett { grid-column: 3; grid-row: 1 / span 2; width: 210px; transform: rotate(-8deg); filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.k-skal { fill: #16173a; stroke: #3a3f8a; stroke-width: 3; }
.k-etikett { fill: #e8e2cf; }
.k-text { font: 700 20px "Marker", cursive; fill: #1a1a2e; }
.k-fonster { fill: #07071a; stroke: #4a4f9a; stroke-width: 2; }
.k-hjul { fill: #2b2b4a; stroke: #cfd2ff; stroke-width: 2; }
.k-nav { fill: #cfd2ff; }
.k-fot { fill: #101130; stroke: #3a3f8a; stroke-width: 2; }
.topp__klotter {
  position: absolute; right: 250px; top: 18px; margin: 0; font-family: "Marker", cursive; color: var(--rosa-mjuk);
  transform: rotate(-6deg); font-size: 1.1rem; line-height: 1.1; text-shadow: 0 0 10px rgba(255,47,176,.6);
}

/* ---------- Huvudmeny ---------- */
.meny {
  max-width: 1460px; margin: 6px auto 0; display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #10144a, #0a0c35);
  border: 1.5px solid var(--bla); border-radius: var(--radie); box-shadow: var(--glod-bla);
  padding: 6px 10px 6px 18px; width: calc(100% - 32px);
}
.meny ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; flex-wrap: wrap; }
.meny ul a {
  display: block; padding: 8px 18px; color: var(--text); text-decoration: none;
  font: 600 1.15rem var(--rubrik-font); letter-spacing: .02em; border-radius: 4px;
}
.meny ul a:hover { color: #fff; background: rgba(61,91,255,.2); }
.meny ul a[aria-current] { color: #fff; text-shadow: 0 0 10px var(--cyan); box-shadow: inset 0 -2px 0 var(--rosa); }
.meny__knapp { display: none; }
.sok { display: flex; gap: 6px; }
.sok input { width: 240px; }
.sok button, .meny__knapp {
  background: var(--bla); color: #fff; border: 0; border-radius: 4px; padding: 0 16px; font: 600 1rem var(--rubrik-font); cursor: pointer;
}

/* ---------- Flash ---------- */
.flash-lista { max-width: 1460px; width: calc(100% - 32px); margin: 12px auto 0; }
.flash { margin: 0 0 8px; padding: 10px 14px; border-radius: var(--radie); border: 1px solid; font-weight: 500; }
.flash--ok { border-color: var(--gron); background: rgba(60,240,138,.08); color: #c9ffe0; }
.flash--fel { border-color: var(--rod); background: rgba(255,77,109,.1); color: #ffd4dc; }

/* ---------- Ramverk ---------- */
.ram {
  max-width: 1460px; width: calc(100% - 32px); margin: 14px auto 0;
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; align-items: start;
}
.huvud { display: grid; gap: 14px; min-width: 0; }
.vanster { display: grid; gap: 14px; }

.panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 60px);
  border: 1.5px solid var(--linje); border-radius: var(--radie);
  box-shadow: var(--glod-bla), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 0 16px 14px; min-width: 0;
}
.panel__rubrik {
  margin: 0 -16px 12px; padding: 10px 16px 8px;
  font: 600 1.2rem/1.2 var(--rubrik-font); letter-spacing: .02em; color: #fff;
  border-bottom: 1px solid var(--linje-svag);
  background: linear-gradient(90deg, rgba(61,91,255,.28), transparent 70%);
  border-radius: var(--radie) var(--radie) 0 0;
}
h1.panel__rubrik { font-size: 1.45rem; }
.panel__fot { margin: 10px 0 0; font-size: .95rem; }
.meta { color: var(--text-svag); font-size: .85rem; }
.prick { margin: 0 .45em; color: var(--linje); }
.tomt { color: var(--text-svag); font-style: italic; }
.info { padding: 10px 12px; background: rgba(79,243,255,.07); border-left: 3px solid var(--cyan); border-radius: 4px; }
.info--varning { border-color: var(--gul); background: rgba(255,216,77,.08); }
.ingress { color: var(--text-svag); margin-top: 0; }
.smal { max-width: 560px; width: 100%; }
.underrubrik { font: 600 1.15rem var(--rubrik-font); margin: 18px 0 6px; }
.brodtext { max-width: 70ch; }
.brodtext h2 { font: 600 1.3rem var(--rubrik-font); color: var(--rosa-mjuk); margin: 1.4em 0 .3em; }

/* ---------- Formulär ---------- */
input, select, textarea {
  width: 100%; font: inherit; color: var(--text);
  background: #070824; border: 1px solid var(--linje); border-radius: 4px; padding: 8px 10px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(79,243,255,.2); }
input[type=file] { padding: 6px; }
input[type=checkbox] { width: auto; accent-color: var(--rosa); }
input::placeholder, textarea::placeholder { color: #6b70a8; }
[aria-invalid="true"] { border-color: var(--rod); }
.formular { display: grid; gap: 4px; }
.formular label, .formular legend { font-weight: 500; margin-top: 10px; }
.formular--tat label { margin-top: 4px; font-size: .95rem; color: var(--text-svag); }
.formular button { margin-top: 14px; }
.formular fieldset { border: 1px solid var(--linje-svag); border-radius: var(--radie); padding: 4px 14px 14px; margin: 14px 0 0; }
.formular--tva { grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.formular--tva .hel { grid-column: 1 / -1; }
.formular--tva > div label:first-child { display: block; }
.falt-fel { color: #ff9fb2; margin: 2px 0 0; font-size: .9rem; }
.kryss { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; }
.kryss input { margin-top: 5px; }

.slapp {
  display: flex !important; align-items: center; gap: 18px; padding: 22px; margin: 4px 0 0 !important;
  border: 2px dashed var(--linje); border-radius: var(--radie); cursor: pointer;
  background: rgba(61,91,255,.06); transition: .15s;
}
.slapp:hover, .slapp--over { border-color: var(--rosa); background: rgba(255,47,176,.07); }
.slapp--fel { border-color: var(--rod); }
.slapp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slapp__ikon { font-size: 2.2rem; color: var(--rosa); text-shadow: var(--glod-rosa); }
.framsteg { width: 100%; height: 10px; accent-color: var(--rosa); margin-bottom: 8px; }

/* ---------- Knappar ---------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 4px; border: 1px solid var(--linje);
  background: #12164e; color: var(--text); font: 600 1rem var(--text-font); text-decoration: none; cursor: pointer;
}
.knapp:hover { border-color: var(--cyan); color: #fff; }
.knapp--neon { background: linear-gradient(180deg, #4b3bff, #2b1fd0); border-color: #7b6dff; color: #fff; box-shadow: 0 0 14px rgba(91,77,255,.45); }
.knapp--neon:hover { box-shadow: 0 0 20px rgba(255,47,176,.5); border-color: var(--rosa); }
.knapp--bred { width: 100%; }
.knapp--stor { padding: 12px 24px; font-size: 1.1rem; }
.knapp--liten { padding: 4px 10px; font-size: .88rem; }
.knapp--ok { border-color: var(--gron); color: #c9ffe0; }
.knapp--ok:hover { background: rgba(60,240,138,.15); border-color: var(--gron); }
.knapp--fara { border-color: var(--rod); color: #ffc2cf; }
.knapp--fara:hover { background: rgba(255,77,109,.15); border-color: var(--rod); }
.knapp:disabled { opacity: .6; cursor: progress; }
.lank-knapp { background: none; border: 0; color: var(--cyan); font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.neonlank { font-family: "Skrivmaskin", monospace; color: var(--rosa); font-size: 1.15rem; text-shadow: 0 0 8px rgba(255,47,176,.7); }
.raknare { background: var(--rosa); color: #000; border-radius: 999px; padding: 0 7px; font-size: .8rem; font-weight: 600; }
.bricka { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border: 1px solid var(--rosa); color: var(--rosa-mjuk); border-radius: 3px; vertical-align: middle; }

/* ---------- Vänsterspalt ---------- */
.inloggad__rad { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.inloggad__namn { font: 600 1.2rem var(--rubrik-font); color: #fff; text-decoration: none; display: block; }
.inloggad .knapp { margin-bottom: 8px; }
.inloggad__lankar { display: flex; justify-content: space-between; font-size: .95rem; }
.inloggad__lankar form { margin: 0; }
.sidmeny { padding: 6px 12px; display: grid; }
.sidmeny a { display: flex; align-items: center; gap: 12px; padding: 8px 4px; color: var(--text); text-decoration: none; font-size: 1.08rem; border-bottom: 1px solid var(--linje-svag); }
.sidmeny a:last-child { border: 0; }
.sidmeny a:hover { color: var(--cyan); }
.sidmeny svg { width: 22px; height: 22px; fill: none; stroke: var(--rosa); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(255,47,176,.6)); }
.klistermarke {
  border: 1.5px solid var(--linje); border-radius: var(--radie); padding: 20px 14px 70px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cg fill='none' stroke='%23c9ccff' stroke-width='2' opacity='.55'%3E%3Crect x='8' y='6' width='184' height='78' rx='8'/%3E%3Crect x='28' y='14' width='144' height='26' rx='3'/%3E%3Ccircle cx='66' cy='54' r='10'/%3E%3Ccircle cx='134' cy='54' r='10'/%3E%3Cpath d='M44 84l10-18h92l10 18'/%3E%3C/g%3E%3C/svg%3E") center bottom 12px / 80% no-repeat,
    linear-gradient(160deg, #1a0f3a, #0a0b2a);
}
.klistermarke p {
  margin: 0; font-family: "Marker", cursive; font-size: 1.35rem; line-height: 1.15; text-transform: uppercase;
  color: var(--rosa); text-shadow: 0 0 10px rgba(255,47,176,.6); transform: rotate(-7deg);
}
.besokare { padding-top: 12px; }
.besokare p { margin: 0; }
.besokare__siffror { display: flex; gap: 6px; margin-top: 6px !important; }
.besokare__siffror span {
  font: 1.6rem "Skrivmaskin", monospace; color: var(--gron); background: #02030f; border: 1px solid var(--linje-svag);
  padding: 0 8px; border-radius: 3px; text-shadow: 0 0 8px rgba(60,240,138,.8);
}

/* ---------- Startsidan ---------- */
.hem { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.hem__mitt { display: grid; gap: 14px; min-width: 0; }
.hem__rutnat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.hem__sida, .hem__hoger { display: grid; gap: 14px; }

.hjalte {
  position: relative; overflow: hidden; min-height: 210px;
  border: 1.5px solid var(--linje); border-radius: var(--radie); box-shadow: var(--glod-bla);
  background:
    linear-gradient(90deg, rgba(5,5,26,.96) 0%, rgba(5,5,26,.75) 42%, rgba(5,5,26,.1) 75%),
    radial-gradient(260px 200px at 72% 30%, rgba(255,47,176,.55), transparent 70%),
    radial-gradient(220px 220px at 88% 10%, rgba(79,243,255,.45), transparent 70%),
    radial-gradient(300px 160px at 60% 100%, rgba(123,77,255,.6), transparent 70%),
    #0a0626;
}
.hjalte__ljus { /* scenljus + publik i siluett */
  position: absolute; inset: 0; pointer-events: none;
  background:
    conic-gradient(from 200deg at 70% -10%, transparent 0 8deg, rgba(255,255,255,.12) 10deg, transparent 14deg 30deg, rgba(79,243,255,.12) 33deg, transparent 37deg 60deg),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath fill='%2303030f' d='M0 80V52c8-6 14-6 20 0 4-14 16-16 22-2 6-10 14-10 20 2 4-16 18-18 24-2 6-8 12-8 18 2 6-14 18-14 22 0 6-10 14-10 20 0 4-18 20-18 26-2 6-6 12-6 16 4 4-14 18-14 22 0 6-8 14-8 20 2 6-16 18-16 24-2 4-8 12-8 16 2 6-12 16-12 22 0 4-14 16-14 22 0 6-8 14-8 18 2 4-10 14-10 20 0 6-6 12-6 16 2V80z'/%3E%3C/svg%3E") left bottom / 100% 40% no-repeat;
}
.hjalte__text { position: relative; padding: 32px 28px; max-width: 460px; }
.hjalte h1 { font: 400 clamp(1.6rem, 3vw, 2.1rem) "Skrivmaskin", monospace; margin: 0 0 12px; letter-spacing: .02em; color: #fff; }
.hjalte p { font-family: "Skrivmaskin", monospace; color: #d7d9ff; margin: 0 0 16px; line-height: 1.55; }

/* Demolistor */
.demo-lista { list-style: none; margin: 0; padding: 0; }
.demo-rad {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linje-svag);
}
.demo-rad:last-child { border-bottom: 0; }
.demo-rad__text { display: grid; min-width: 0; }
.demo-rad__band { color: #fff; font-weight: 500; font-size: 1.05rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-rad__band:hover { color: var(--cyan); }
.demo-rad__titel { font-style: italic; color: #d3d6ff; font-size: .95rem; }
.demo-rad__langd { color: var(--text-svag); font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.omslag { width: 72px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; border: 1px solid var(--linje-svag); background: #0b0c2a; }
.omslag--tomt { display: grid; place-items: center; background: linear-gradient(135deg, #1b1550, #0b0c2a); }
.omslag--tomt svg { width: 70%; fill: none; stroke: #8f94e8; stroke-width: 2.2; }
.omslag--liten { width: 40px; }
.omslag--stor { width: 220px; }
.spela-knapp {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent; background: none; cursor: pointer;
  display: grid; place-items: center; color: #fff;
}
.spela-knapp svg { width: 22px; fill: currentColor; }
.spela-knapp:hover { border-color: var(--rosa); color: var(--rosa); box-shadow: var(--glod-rosa); }
.spela-knapp.spelar { color: var(--rosa); border-color: var(--rosa); animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: var(--glod-rosa); } }

/* Topplista & medlemmar */
.topplista, .medlemslista { list-style: none; margin: 0; padding: 0; }
.topplista li, .medlemslista li {
  display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linje-svag);
}
.topplista li > div, .medlemslista li > div { display: grid; min-width: 0; }
.topplista a, .medlemslista a { color: #fff; text-decoration: none; font-weight: 500; }
.topplista a:hover, .medlemslista a:hover { color: var(--cyan); }
.topplista__nr { font: 600 1.15rem var(--rubrik-font); width: 1.2em; color: var(--text-svag); }

.avatar { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; flex: none; border: 1px solid var(--linje-svag); }
.avatar--stor { width: 56px; height: 56px; }
.avatar--jatte { width: 120px; height: 120px; }
.avatar--init { display: inline-grid; place-items: center; font: 600 1.1rem var(--rubrik-font); color: #fff; }
.avatar--stor.avatar--init { font-size: 1.6rem; }
.avatar--jatte.avatar--init { font-size: 3.4rem; }
.nyans-0 { background: linear-gradient(135deg, #ff2fb0, #7b4dff); }
.nyans-1 { background: linear-gradient(135deg, #3d5bff, #4ff3ff); }
.nyans-2 { background: linear-gradient(135deg, #7b4dff, #3d5bff); }
.nyans-3 { background: linear-gradient(135deg, #ff7a3d, #ff2fb0); }
.nyans-4 { background: linear-gradient(135deg, #1fbf8f, #3d5bff); }
.nyans-5 { background: linear-gradient(135deg, #b14dff, #ff2fb0); }

/* ---------- Chatt ---------- */
.chatt__lista {
  list-style: none; margin: 0 -6px; padding: 0 6px; height: 380px; overflow-y: auto;
  scrollbar-color: var(--bla) transparent; scrollbar-width: thin;
}
.chatt--stor .chatt__lista { height: min(62vh, 640px); }
.chatt__rad { display: flex; gap: 10px; padding: 7px 0; }
.chatt__rad.ny { animation: in .35s ease-out; }
@keyframes in { from { opacity: 0; transform: translateY(6px); } }
.chatt__rad > div { min-width: 0; flex: 1; }
.chatt__huvud { margin: 0; display: flex; gap: 8px; align-items: baseline; }
.chatt__huvud a { color: var(--cyan); font-weight: 600; text-decoration: none; }
.chatt__huvud time { color: var(--text-svag); font-size: .82rem; }
.chatt__text { margin: 1px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: .95rem; }
.chatt__radera { margin-left: auto; background: none; border: 0; color: var(--text-svag); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.chatt__radera:hover { color: var(--rod); }
.chatt__tom { color: var(--text-svag); font-style: italic; padding: 12px 0; }
.chatt__form { display: flex; gap: 8px; margin-top: 12px; }
.chatt__form .knapp { flex: none; }
.chatt__fel { color: #ff9fb2; margin: 6px 0 0; font-size: .9rem; }
.chatt__last { text-align: center; padding: 26px 8px; display: grid; gap: 10px; justify-items: center; }
.chatt__last p { margin: 0 0 6px; color: var(--text-svag); }
.chattsida { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }

.online { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.online li::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gron); margin-right: 10px; box-shadow: 0 0 8px var(--gron); }
.online li.online--ingen::before { background: var(--text-svag); box-shadow: none; }
.online--ingen { color: var(--text-svag); }
.prick-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gron); box-shadow: 0 0 8px var(--gron); margin-right: 6px; vertical-align: middle; }
.klotter {
  font-family: "Marker", cursive; color: var(--rosa); font-size: 2rem; line-height: 1.05; text-align: right;
  transform: rotate(-8deg); margin: 10px 20px; text-shadow: var(--glod-rosa);
}

/* ---------- Arkiv, band, medlemmar ---------- */
.filter { display: flex; gap: 8px; flex-wrap: wrap; }
.filter input { flex: 1 1 260px; width: auto; }
.filter select { width: auto; }
.arkiv__antal { margin: 10px 0 0; }
.sidnr { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.sidnr a { padding: 4px 11px; border: 1px solid var(--linje); border-radius: 4px; text-decoration: none; }
.sidnr a[aria-current] { background: var(--bla); color: #fff; }

.bandrutnat, .medlemsrutnat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.bandrutnat a, .medlemsrutnat a {
  display: grid; gap: 3px; padding: 10px; text-decoration: none; color: var(--text);
  border: 1px solid var(--linje-svag); border-radius: var(--radie); background: rgba(5,5,26,.4); height: 100%;
}
.bandrutnat a:hover, .medlemsrutnat a:hover { border-color: var(--rosa); box-shadow: 0 0 14px rgba(255,47,176,.25); }
.bandrutnat .omslag { width: 100%; margin-bottom: 6px; }
.medlemsrutnat a { justify-items: center; text-align: center; }
.medlemsrutnat .avatar { margin-bottom: 6px; }

.demo-sida__topp { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding-top: 16px; }
.demo-sida__band { margin: 0; font: 600 1.3rem var(--rubrik-font); }
.demo-sida__band a { color: var(--rosa-mjuk); text-decoration: none; }
.demo-sida h1 { margin: 0 0 12px; font: 600 2.1rem/1.1 var(--rubrik-font); }
.fakta { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 0 0 18px; }
.fakta dt { color: var(--text-svag); }
.fakta dd { margin: 0; }
.medlem__topp { display: flex; gap: 20px; align-items: center; padding-top: 16px; }
.medlem__topp h1 { margin: 0; font: 600 2rem var(--rubrik-font); }
.profil__bild { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.band__meta { margin-top: -4px; }
.tomt-sida { text-align: center; }

/* ---------- Admin ---------- */
.adminmeny, .flikar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--linje-svag); }
.adminmeny a, .flikar a { padding: 6px 14px; text-decoration: none; color: var(--text-svag); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.adminmeny a[aria-current], .flikar a[aria-current] { color: #fff; border-color: var(--rosa); }
.statistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0; }
.statistik div { border: 1px solid var(--linje-svag); border-radius: var(--radie); padding: 10px 14px; background: rgba(5,5,26,.4); }
.statistik dt { color: var(--text-svag); font-size: .85rem; }
.statistik dd { margin: 0; font: 600 1.9rem var(--rubrik-font); color: var(--cyan); }
.ansokan { border: 1px solid var(--linje-svag); border-left: 3px solid var(--linje); border-radius: var(--radie); padding: 12px 14px; margin-bottom: 10px; background: rgba(5,5,26,.35); }
.ansokan--vantande { border-left-color: var(--gul); }
.ansokan--godkand { border-left-color: var(--gron); }
.ansokan--avslagen, .ansokan--avstangd { border-left-color: var(--rod); opacity: .85; }
.ansokan header { display: flex; gap: 12px; align-items: center; }
.ansokan header > div { display: grid; flex: 1; min-width: 0; }
.ansokan blockquote { margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid var(--linje); color: #d7d9ff; font-style: italic; background: rgba(61,91,255,.06); }
.ansokan__knappar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ansokan__knappar form, .tabell__knappar form { margin: 0; }
.status { font-size: .78rem; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.status--vantande { color: var(--gul); }
.status--godkand { color: var(--gron); }
.status--avslagen, .status--avstangd { color: var(--rod); }
.tabell-ram { overflow-x: auto; }
.tabell { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabell th { text-align: left; color: var(--text-svag); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--linje); }
.tabell td { padding: 8px; border-bottom: 1px solid var(--linje-svag); vertical-align: top; }
.tabell td a { color: #fff; text-decoration: none; display: block; }
.tabell__knappar { display: flex; gap: 6px; }
.rad--dold { opacity: .6; }

/* ---------- Spelaren ---------- */
.spelare {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 50;
  width: min(960px, calc(100% - 24px));
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto minmax(160px, 1.3fr) 110px auto; gap: 16px; align-items: center;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(10,11,42,.94); backdrop-filter: blur(10px);
  border: 1.5px solid var(--bla); box-shadow: var(--glod-bla), 0 10px 40px rgba(0,0,0,.6);
}
.spelare[hidden] { display: none; }
.spelare__omslag { width: 60px; height: 60px; border-radius: 4px; overflow: hidden; background: linear-gradient(135deg, #3a0f3a, #1b1550); }
.spelare__omslag img { width: 100%; height: 100%; object-fit: cover; }
.spelare__info { min-width: 0; }
.spelare__titel { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spelare__band { margin: 0; color: var(--text-svag); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spelare__kontroller { display: flex; gap: 6px; align-items: center; }
.spelare__kontroller button { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; border-radius: 50%; }
.spelare__kontroller svg { width: 20px; fill: currentColor; }
.spelare__spela { width: 42px; height: 42px; display: grid; place-items: center; background: var(--lila) !important; box-shadow: 0 0 14px rgba(123,77,255,.7); }
.spelare__spela .ik-paus, .spelare.spelar .ik-spela { display: none; }
.spelare.spelar .ik-paus { display: block; }
.spelare__tid { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: .85rem; color: var(--text-svag); font-variant-numeric: tabular-nums; }
.spelare input[type=range] { padding: 0; border: 0; background: transparent; accent-color: var(--rosa); height: 20px; }
.spelare__stang { background: none; border: 0; color: var(--text-svag); font-size: 1.5rem; cursor: pointer; }
.spelare__stang:hover { color: #fff; }

.fot { max-width: 1460px; margin: 26px auto 18px; text-align: center; color: var(--text-svag); font-size: .9rem; padding: 0 16px; }

/* ---------- Responsivt ---------- */
@media (max-width: 1240px) {
  .hem { grid-template-columns: minmax(0, 1fr); }
  .hem__hoger { grid-template-columns: 1fr 1fr; align-items: start; }
  .hem__hoger .klotter { display: none; }
  .topp__klotter { display: none; }
}
@media (max-width: 980px) {
  .ram { grid-template-columns: minmax(0, 1fr); }
  .vanster { order: 2; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .klistermarke { display: none; }
  .hem__rutnat, .chattsida { grid-template-columns: minmax(0, 1fr); }
  .meny { flex-wrap: wrap; padding: 8px; }
  .meny__knapp { display: block; height: 38px; }
  .meny ul { display: none; flex-basis: 100%; order: 3; flex-direction: column; }
  .meny__knapp[aria-expanded="true"] ~ ul { display: flex; }
  .sok { flex: 1; }
  .sok input { width: 100%; }
  .topp__kassett { width: 130px; }
  .spelare { grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 10px; }
  .spelare__omslag { width: 48px; height: 48px; }
  .spelare__tid { grid-column: 1 / -1; grid-row: 2; }
  .spelare__volym { display: none; }
  body.har-spelare { padding-bottom: 130px; }
}
@media (max-width: 640px) {
  .topp { grid-template-columns: 1fr; padding: 14px 16px 6px; }
  .topp__kassett { display: none; }
  .topp__slogan { margin-left: 4px; }
  .hem__hoger { grid-template-columns: minmax(0, 1fr); }
  .formular--tva { grid-template-columns: minmax(0, 1fr); }
  .demo-rad { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; }
  .demo-rad .omslag { width: 56px; }
  .demo-rad__langd { display: none; }
  .demo-sida__topp { grid-template-columns: minmax(0, 1fr); }
  .omslag--stor { width: 100%; max-width: 320px; }
  .spelare__kontroller #sp-bak, .spelare__kontroller #sp-fram { display: none; }
  .ram, .meny, .flash-lista { width: calc(100% - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}