@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/anton-latin-400-normal.woff2) format('woff2')}

/* ---------- grund ---------- */

:root{

  --ink:#0f0d14; --paper:#fff; --cream:#f6f1e8; --muted:#5f5a6b; --line:#0f0d14;

  --coral:#ff5a36; --yellow:#ffd93d; --lilac:#c4b0ff; --mint:#8ee3c8;

  --display:Anton,Impact,"Haettenschweiler","Arial Narrow Bold","Arial Narrow",sans-serif-condensed,sans-serif;

  color-scheme:light;

}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:76px}

body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}

img,svg{display:block;max-width:100%}

a{color:inherit}

p{margin:0 0 1em}

h1,h2,h3{margin:0}

.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.05}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

.narrow{max-width:780px}

.muted{color:var(--muted)}

.small{font-size:.9rem}

.fine{font-size:.82rem;color:var(--muted);margin:.9rem 0 0}

[hidden]{display:none!important}

:focus-visible{outline:3px solid var(--coral);outline-offset:3px}



/* ---------- knappar ---------- */

.btn{display:inline-flex;align-items:center;justify-content:center;padding:.72rem 1.5rem;border-radius:999px;border:2px solid transparent;font:inherit;font-weight:700;font-size:.97rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .12s,background .12s,color .12s}

.btn:hover{transform:translateY(-2px)}

.btn:active{transform:none}

.btn-accent{background:var(--coral);color:var(--ink)}

.btn-accent:hover{background:#ff7255}

.btn-ink{background:var(--ink);color:#fff}

.btn-ink:hover{background:#26212f}

.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}

.btn-outline:hover{border-color:#fff}

.listen-top .btn-outline,.btn-outline-dark{color:var(--ink);border-color:var(--ink)}

.btn-lg{padding:1.05rem 2.2rem;font-size:1.1rem}

.btn-sm{padding:.5rem 1rem;font-size:.88rem}

.btn-block{display:flex;width:100%}

.btn[disabled]{opacity:.6;cursor:wait}

.link-arrow{display:inline-block;font-weight:700;text-decoration:none;border-bottom:3px solid currentColor;padding-bottom:2px}

.link-arrow::after{content:" →"}

.link-arrow:hover{border-bottom-width:5px}



/* ---------- logotyp och rubrikrad ---------- */

.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font-family:var(--display);font-size:1.45rem;text-transform:uppercase;letter-spacing:.02em}

.logo img{border-radius:9px;flex:none}

.logo-text{display:flex;flex-direction:column;line-height:1}

.logo-text b{font-weight:400;font-size:1.45rem}

.logo-text small{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;font-size:.6rem;letter-spacing:.26em;margin-top:.22rem;opacity:.85}

.logo.on-light{color:var(--ink)}

.site-header{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff}

.bar{display:flex;align-items:center;gap:1.6rem;height:64px}

.nav{display:none;gap:1.7rem;margin-left:1.4rem}

.nav a{color:#c9c5d3;text-decoration:none;font-weight:700;font-size:.95rem}

.nav a:hover{color:#fff}

.bar-actions{margin-left:auto;display:flex;gap:.6rem;align-items:center}

@media (min-width:880px){.nav{display:flex}}

@media (max-width:480px){.bar-actions .btn-outline{display:none}.logo{font-size:1.25rem}}



/* ---------- hero (bara typografi) ---------- */

.hero{padding:clamp(48px,9vw,110px) 22px clamp(48px,8vw,96px);text-align:center}

.hero-kicker{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--muted);margin-bottom:2rem}

.hero-title{font-size:clamp(4rem,15.5vw,13rem);line-height:1.02;margin:.15em auto .4em}

.hero-sub{font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:400;max-width:34em;margin:0 auto 2rem}

.hero-note{margin:1.1rem 0 0;color:var(--muted);font-size:.92rem}



/* löpande remsa */

.ticker{background:var(--yellow);border-block:3px solid var(--ink);overflow:hidden;white-space:nowrap}

.ticker-track{display:inline-flex;align-items:center;gap:1.6rem;padding:.9rem 0;animation:scroll 42s linear infinite;will-change:transform}

.ticker span{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.2rem);text-transform:uppercase;line-height:1}

.ticker i{width:14px;height:14px;border-radius:50%;background:var(--ink);flex:none}

@keyframes scroll{to{transform:translateX(-50%)}}

.ticker-track{padding-left:1.6rem}



/* ---------- färgfält ---------- */

.panel{padding:clamp(56px,9vw,110px) 0;border-bottom:3px solid var(--ink)}

.p-yellow{background:var(--yellow)}

.p-lilac{background:var(--lilac)}

.p-coral{background:var(--coral)}

.panel-grid{display:grid;gap:2rem 3rem;align-items:center}

.panel h2{font-size:clamp(3.4rem,11vw,9rem);line-height:1.02}

.panel-body p{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:400;max-width:24em;margin-bottom:1.4rem}

@media (min-width:900px){.panel-grid{grid-template-columns:1.4fr 1fr .8fr}}

.art{display:grid;place-items:center;min-height:200px}

@media (max-width:899px){.art{justify-items:start;min-height:0}}



.art-vinyl span{display:block;width:min(240px,60vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--coral) 0 14%,var(--ink) 14.5% 16%,#26212f 16.5% 100%);position:relative;animation:spin 14s linear infinite}

.art-vinyl span::before{content:"";position:absolute;inset:8%;border-radius:50%;border:2px solid #3b3547;box-shadow:0 0 0 14px #26212f,0 0 0 16px #3b3547,0 0 0 30px #26212f,0 0 0 32px #3b3547}

.art-vinyl span::after{content:"";position:absolute;left:50%;top:50%;width:8%;aspect-ratio:1;margin:-4% 0 0 -4%;border-radius:50%;background:var(--yellow)}

@keyframes spin{to{transform:rotate(360deg)}}



.art-bars{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:240px}

.art-bars i{display:block;width:26px;border-radius:13px;background:var(--ink);transform-origin:bottom;animation:eq 1.3s ease-in-out infinite}

.art-bars i:nth-child(1){height:45%}.art-bars i:nth-child(2){height:80%;animation-delay:-.4s}.art-bars i:nth-child(3){height:60%;animation-delay:-.8s}

.art-bars i:nth-child(4){height:100%;animation-delay:-.2s}.art-bars i:nth-child(5){height:70%;animation-delay:-.6s}.art-bars i:nth-child(6){height:50%;animation-delay:-1s}.art-bars i:nth-child(7){height:85%;animation-delay:-.1s}



.art-zero{display:flex;align-items:baseline;justify-content:center;gap:.4rem;color:var(--ink)}

.art-zero b{font-family:var(--display);font-weight:400;font-size:clamp(9rem,22vw,15rem);line-height:.8}

.art-zero span{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.4rem);text-transform:uppercase}



/* equalizer */

.eq{display:inline-flex;align-items:flex-end;gap:5px;height:34px}

.eq i{display:block;width:6px;height:100%;border-radius:3px;background:var(--ink);transform-origin:bottom;transform:scaleY(.25);animation:eq 1.1s ease-in-out infinite}

.eq i:nth-child(2n){animation-duration:.9s;animation-delay:-.3s}

.eq i:nth-child(3n){animation-duration:1.3s;animation-delay:-.6s}

.eq i:nth-child(4n){animation-duration:.8s;animation-delay:-.2s}

.eq i:nth-child(5n){animation-duration:1.2s;animation-delay:-.8s}

@keyframes eq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}



/* ---------- sektioner ---------- */

.section{padding:clamp(56px,9vw,104px) 0}

.section.cream{background:var(--cream);border-block:3px solid var(--ink)}

.sec-title{font-size:clamp(2.8rem,8vw,5.6rem);margin-bottom:.35em}

.sec-sub{font-size:1.15rem;color:var(--muted);max-width:34em;margin-bottom:2.2rem}



.steps{list-style:none;padding:0;margin:2.6rem 0 0;display:grid;gap:0}

@media (min-width:800px){.steps{grid-template-columns:repeat(3,1fr);gap:2.4rem}}

.steps li{border-top:3px solid var(--ink);padding:1.2rem 0 2rem}

.step-n{display:block;font-size:clamp(5rem,12vw,8rem);line-height:.9;color:var(--coral);margin-bottom:.6rem}

.steps h3{font-size:1.45rem;font-weight:700;margin-bottom:.35rem}

.steps p{color:var(--muted);margin:0;max-width:20em}



/* kalender: stora rader som fylls med färg */

.calendar{list-style:none;padding:0;margin:2rem 0 1.6rem;border-bottom:3px solid var(--ink)}

.calendar li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 2rem;padding:1.1rem 0;border-top:3px solid var(--ink);transition:background .2s,padding .2s}

.calendar li:hover{padding-inline:1.2rem}

.cal-mint:hover{background:var(--mint)}.cal-yellow:hover{background:var(--yellow)}.cal-coral:hover{background:var(--coral)}.cal-lilac:hover{background:var(--lilac)}

.cal-name{font-size:clamp(3rem,10vw,7rem);line-height:1.08}

.cal-desc{font-weight:400;font-size:1.1rem;max-width:22em}



/* pris */

.price-band{background:var(--ink);color:#fff;padding:clamp(56px,9vw,110px) 0}

.price-grid{display:grid;gap:2.6rem 4rem;align-items:center}

@media (min-width:900px){.price-grid{grid-template-columns:1.2fr 1fr}}

.price-band h2{font-size:clamp(3.2rem,9vw,7rem);line-height:1.02;margin-bottom:1.6rem}

.checks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-weight:700;font-size:1.1rem}

.checks li{display:flex;align-items:center;gap:.7rem}

.checks svg{width:22px;height:22px;color:var(--yellow);flex:none}

.price-box{background:var(--yellow);color:var(--ink);padding:2rem 1.8rem;border-radius:6px}

.price{display:flex;align-items:baseline;gap:.5rem;margin:0}

.price span{font-size:clamp(5.5rem,16vw,9rem);line-height:.85}

.price small{font-size:clamp(1.6rem,4vw,2.4rem)}

.price-period{font-weight:700;margin:.4rem 0 1.6rem}



/* frågor */

.faq{border-bottom:3px solid var(--ink)}

.faq details{border-top:3px solid var(--ink);padding:1.2rem 0}

.faq summary{cursor:pointer;font-weight:700;font-size:1.2rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{content:"+";font-family:var(--display);font-size:2rem;line-height:1;flex:none;transition:transform .2s}

.faq details[open] summary::after{transform:rotate(45deg)}

.faq details p{margin:.8rem 0 0;color:var(--muted);max-width:40em}



/* avslutning */

.final{background:var(--coral);border-top:3px solid var(--ink);padding:clamp(64px,11vw,130px) 0;text-align:center}

.final h2{font-size:clamp(4rem,15vw,12rem);line-height:1.02;margin-bottom:.35em}



.site-footer{background:var(--ink);color:#c9c5d3;padding:44px 0}

.foot{display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;align-items:center}

.foot nav{display:flex;gap:1.5rem;margin-left:auto;flex-wrap:wrap}

.foot nav a{text-decoration:none;font-weight:700;font-size:.95rem}

.foot nav a:hover{color:#fff}

.foot .small{width:100%;margin:0;color:#8d879b}



/* ---------- formulär och modal ---------- */

label{display:block;font-weight:700;font-size:.9rem;margin:0 0 1rem}

label .hint{font-weight:400;color:var(--muted);font-size:.85rem;margin-left:.3rem}

input[type=email],input[type=password],input[type=text],input[type=search]{display:block;width:100%;margin-top:.4rem;padding:.85rem 1rem;font:inherit;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:10px}

input:focus{outline:0;box-shadow:0 0 0 4px rgba(255,90,54,.35);border-color:var(--ink)}

.form-error{background:var(--ink);color:#fff;border-radius:10px;padding:.7rem 1rem;font-size:.92rem;font-weight:700;margin:0 0 1rem;border-left:6px solid var(--coral)}



dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;overflow:visible}

dialog::backdrop{background:rgba(15,13,20,.7)}

dialog[open]{animation:pop .2s ease-out;margin:auto}

@keyframes pop{from{opacity:0;transform:translateY(12px)}}

.dlg{position:relative;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:1.6rem 1.6rem 1.6rem}

.dlg-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:transparent;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--ink)}

.dlg-title{font-size:2.4rem;margin:1.2rem 0 1rem}

.tabs{display:flex;gap:1.4rem;border-bottom:3px solid var(--ink);margin-right:2.2rem}

.tabs button{border:0;background:transparent;padding:.4rem 0 .6rem;font:inherit;font-weight:700;font-size:1rem;color:var(--muted);cursor:pointer;margin-bottom:-3px;border-bottom:6px solid transparent}

.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--coral)}



.auth-page{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:1.6rem;padding:28px 16px}

.auth-card{width:min(440px,100%);padding:2rem 1.8rem;background:#fff;border:3px solid var(--ink);border-radius:12px}

.auth-card h1{font-size:2.6rem;margin-bottom:.4rem}

.switch{text-align:center;margin:1.4rem 0 0;color:var(--muted);font-size:.95rem}

.switch a,.fine a{font-weight:700;color:var(--ink)}

.page-auth{background:var(--yellow)}



/* ---------- spelsidan ---------- */

.page-listen{min-height:100dvh;background:var(--cream)}

.listen-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:14px 22px;max-width:1000px;margin:0 auto}

.listen-top .logo{color:var(--ink)}

.who{display:flex;align-items:center;gap:.6rem}

.who .btn{white-space:nowrap}

.who-mail{display:none;color:var(--muted)}

@media (min-width:600px){.who-mail{display:inline}}

.listen{max-width:560px;margin:0 auto;padding:2vh 20px 48px;display:flex;flex-direction:column;align-items:center}

.stage{display:flex;flex-direction:column;align-items:center;margin:4vh 0 3rem}

.play{position:relative;width:min(62vw,250px);height:min(62vw,250px);border:0;border-radius:50%;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}

.play-face{position:absolute;inset:0;border-radius:50%;background:var(--coral);border:4px solid var(--ink);display:grid;place-items:center;transition:transform .15s}

.play:hover .play-face{transform:scale(1.04)}

.play:active .play-face{transform:scale(.97)}

.ico{grid-area:1/1;display:grid;place-items:center}

.ico svg{width:88px;height:88px;fill:var(--ink)}

.ico-play svg{transform:translateX(6px)}

.ico-pause{display:none}

.is-playing .ico-play{display:none}

.is-playing .ico-pause{display:grid}

.ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--coral);opacity:0}

.is-playing .ring{animation:ring 2.8s ease-out infinite}

.is-playing .ring.r2{animation-delay:1.4s}

@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.5);opacity:0}}

.label{margin:1.8rem 0 .8rem;font-size:2.4rem;text-align:center}

.bars{height:34px;opacity:0;transition:opacity .3s}

.is-playing .bars{opacity:1}

.bars .eq i{animation-play-state:paused}

.is-playing .bars .eq i{animation-play-state:running}

.is-loading .label::after{content:"…"}



.channels{width:100%;display:grid;gap:.8rem}

@media (min-width:480px){.channels{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

.ch{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;padding:1.1rem 1.3rem;border-radius:12px;border:3px solid var(--ink);background:#fff;cursor:pointer;font:inherit;color:var(--ink);transition:background .15s,color .15s,transform .12s}

.ch:hover{transform:translateY(-2px)}

.ch-name{font-size:1.9rem}

.ch-desc{font-size:.95rem;font-weight:400;opacity:.75}

.ch[aria-pressed=true]{background:var(--ink);color:#fff}

.ch[aria-pressed=true] .ch-name{color:var(--yellow)}



.filters{width:100%;margin-top:1.4rem;display:grid;gap:1rem}

.filter{padding:1.1rem 1.3rem 1rem;border:3px solid var(--ink);border-radius:18px;background:var(--yellow)}

.filter:nth-child(2){background:var(--lilac)}

.f-name{display:block;font-size:2rem;margin-bottom:.8rem}

.dial{display:flex;align-items:flex-start;gap:.8rem}

.dial-end{position:relative;flex:none;width:22px;height:52px}

.dial-end::before{content:"";position:absolute;left:0;right:0;top:23px;height:6px;border-radius:3px;background:var(--ink)}

.dial-end.plus::after{content:"";position:absolute;top:12px;bottom:12px;left:8px;width:6px;border-radius:3px;background:var(--ink)}

.dial-track{position:relative;flex:1;display:flex;justify-content:space-between;padding:0 2px}

.dial-track::before{content:"";position:absolute;left:30px;right:30px;top:23px;height:6px;border-radius:3px;background:var(--ink)}

.dot-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:60px}

.dot{width:52px;height:52px;padding:0;border-radius:50%;border:6px solid var(--coral);background:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .15s,border-color .15s}

.dot::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .18s}

.dot:hover{transform:scale(1.08)}

.dot[aria-checked=true]{background:var(--coral);border-color:var(--ink);transform:scale(1.18)}

.dot[aria-checked=true]::after{transform:scale(1)}

.dot-label{font-size:.78rem;font-weight:700;letter-spacing:.03em}

.volume{display:flex;align-items:center;gap:.9rem;width:100%;max-width:420px;margin:2.4rem 0 0}

.vol-ico svg{width:30px;height:30px;fill:var(--ink)}

.volume output{min-width:2.4ch;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

input[type=range]{flex:1;height:34px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}

input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:var(--ink)}

input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:var(--ink)}

input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:var(--coral);border:3px solid var(--ink)}

input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--coral);border:3px solid var(--ink)}

.notice{margin:1.6rem 0 0;padding:.9rem 1.1rem;border-radius:12px;background:var(--yellow);border:3px solid var(--ink);font-weight:700;text-align:center;width:100%}

.notice.err{background:#fff;border-left:10px solid var(--coral)}

.foot-note{margin:2rem 0 0;color:var(--muted);font-size:.9rem;text-align:center}



/* ---------- juridiska sidor ---------- */

.legal{padding-top:48px;padding-bottom:90px}

.legal h1{font-size:clamp(3rem,9vw,5rem);margin-bottom:.4em}

.legal h2{font-size:1.25rem;font-weight:700;margin:2rem 0 .4rem}

.draft{background:var(--yellow);border:3px solid var(--ink);padding:.8rem 1rem;border-radius:10px;font-weight:700}



@media (prefers-reduced-motion:reduce){

  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

  html{scroll-behavior:auto}

}



/* ---------- admin ---------- */

.admin{padding-top:40px;padding-bottom:90px}

.admin h1{font-size:clamp(3rem,9vw,5rem);margin-bottom:.3em}

.adm-card{border:3px solid var(--ink);border-radius:12px;padding:1.4rem 1.4rem .6rem;margin:1.6rem 0;background:#fff}

.adm-card h2{font-size:2rem;margin-bottom:1rem}

.adm-filters{display:grid;gap:0 1.4rem}

@media (min-width:640px){.adm-filters{grid-template-columns:1fr 1fr}}

.hint{display:block;font-weight:400;color:var(--muted);font-size:.82rem;margin-top:.3rem}

.adm-card code,.hint code{font-size:.85em;background:var(--cream);padding:.1em .35em;border-radius:4px}



/* ---------- installera som app ---------- */

.install{width:100%;margin-top:1.4rem;display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border:3px solid var(--ink);border-radius:14px;background:#fff;font-weight:400;font-size:.92rem}

.install span{flex:1}

.install-x{border:0;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink);padding:0 .2rem}



/* ---------- innehållssidor ---------- */

.art-hero{padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px);background:var(--yellow);border-bottom:3px solid var(--ink)}

.art-hero h1{font-size:clamp(3rem,10vw,6.4rem);line-height:1.05;margin-bottom:.4em}

.art-lead{font-size:clamp(1.1rem,2vw,1.3rem);font-weight:400;max-width:36em;margin-bottom:1.8rem}

.article{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}

.article h2{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.1;margin:2.2rem 0 .8rem;font-weight:700;letter-spacing:-.01em}

.article h2:first-child{margin-top:0}

.article p,.article li{font-size:1.1rem;max-width:40em}

.article ul{padding-left:1.3rem}

.article li{margin:.4rem 0}

.art-final{border-bottom:3px solid var(--ink)}

.art-final h2{font-size:clamp(3.4rem,11vw,8rem)}

.related{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;padding-top:2.4rem;padding-bottom:3rem}

.related span{font-weight:700}

.related a{font-weight:700}

.eyebrow{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;margin:0 0 1rem}



/* ---------- språkflaggor ---------- */

.langs{display:inline-flex;gap:.45rem;align-items:center}

.flag{display:block;width:30px;height:20px;border-radius:4px;overflow:hidden;border:2px solid rgba(255,255,255,.5);opacity:.6;transition:opacity .15s,transform .12s;line-height:0}

.flag svg{width:100%;height:100%}

.flag:hover{opacity:1;transform:translateY(-1px)}

.flag.on{opacity:1;border-color:#fff;outline:2px solid var(--coral);outline-offset:2px}

.listen-top .flag,.auth-top .flag{border-color:rgba(15,13,20,.35)}

.listen-top .flag.on,.auth-top .flag.on{border-color:var(--ink)}

.auth-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(440px,100%)}

@media (max-width:480px){.site-header .bar{gap:.7rem}.bar-actions{gap:.45rem}.flag{width:26px;height:17px}}



/* ---------- finjusteringar för två språk ---------- */



.bar-actions .btn{white-space:nowrap}

@media (max-width:480px){

  .bar-actions .btn-accent{padding:.5rem .9rem;font-size:.85rem}

  .logo-text b{font-size:1.25rem}

  .logo-text small{font-size:.52rem;letter-spacing:.2em}

  .logo img{width:30px;height:30px}

}



/* ---------- slogan ---------- */

.foot-brand{display:flex;flex-direction:column;gap:.5rem}

.foot-slogan{margin:0;font-size:.9rem;font-weight:700;color:#c9c5d3}



/* ---------- priser och prenumeration ---------- */

.plans{display:grid;gap:1.2rem}

@media (min-width:560px){.plans{grid-template-columns:1fr 1fr}}

.plan{position:relative;background:#fff;color:var(--ink);padding:2.2rem 1.6rem 1.6rem;border-radius:6px;display:flex;flex-direction:column}

.plan-best{background:var(--yellow);outline:4px solid var(--coral);outline-offset:-4px}

.plan-name{font-size:1.1rem;font-weight:700;margin:0 0 .6rem}

.plan .price span{font-size:clamp(3.6rem,9vw,5.6rem)}

.plan .price small{font-size:1.4rem}

.plan .price-period{margin:.2rem 0 .4rem}

.plan-note{font-size:.92rem;font-weight:400;margin:0 0 1.2rem;min-height:2.6em}

.plan .btn{margin-top:auto}

.badge{position:absolute;top:-.9rem;left:1.2rem;background:var(--ink);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.04em;padding:.35rem .8rem;border-radius:999px}

.bill-card{width:min(720px,100%)}

.bill-card .plans{margin:1.2rem 0}

.bill-card .plan{border:3px solid var(--ink)}

.bill-card form{margin:.8rem 0 0}

.bill-facts{margin:1.2rem 0;display:grid;gap:.6rem}

.bill-facts div{display:flex;justify-content:space-between;gap:1rem;border-bottom:2px solid var(--line);padding-bottom:.5rem}

.bill-facts dt{font-weight:700}

.bill-facts dd{margin:0}

.btn-ghost-dark{background:transparent;color:var(--ink);border-color:var(--ink)}

.price-grid .plans{align-self:start}

.plan .btn{white-space:nowrap;padding-left:1rem;padding-right:1rem}



/* ---------- hero: rubrikstorlek och klisterlappar ---------- */

.hero{position:relative}

.hero-title{font-size:clamp(2.6rem,10.4vw,9.4rem);line-height:1.02}

html[lang=en] .hero-title{font-size:clamp(2.6rem,9.2vw,8.4rem)}

@media (max-width:600px){

  .hero-title{font-size:12.6vw}

  html[lang=en] .hero-title{font-size:11vw}

}

.hero-kicker{text-transform:none;letter-spacing:.06em;font-size:.95rem}

.stickers{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:1.4rem}

.sticker{display:inline-block;font-family:var(--display);text-transform:uppercase;font-size:1.25rem;line-height:1;padding:.55rem .95rem;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);white-space:nowrap}

.sticker-a{background:var(--yellow);transform:rotate(-4deg)}

.sticker-b{background:var(--coral);transform:rotate(3deg)}

@media (min-width:1000px){

  .stickers{display:block;margin:0}

  .sticker{position:absolute;top:84px;font-size:1.6rem;padding:.7rem 1.2rem}

  .sticker-a{left:max(3%,calc(50% - 590px));transform:rotate(-7deg)}

  .sticker-b{right:max(3%,calc(50% - 590px));transform:rotate(6deg)}

}



/* ---------- färgfält: rubrikens storlek och spalter ---------- */

.panel h2{font-size:clamp(3rem,7.2vw,6.6rem)}

@media (min-width:900px){.panel-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.55fr)}}

.panel-body p{max-width:28em}



/* ---------- hero-rubrik: längre text, mer radavstånd (Å Ä Ö) ---------- */

.hero-title{font-size:clamp(2.2rem,7.4vw,6.8rem);line-height:1.14;max-width:16em;margin-left:auto;margin-right:auto}

html[lang=en] .hero-title{font-size:clamp(2.2rem,7.4vw,6.8rem)}

@media (max-width:600px){

  .hero-title{font-size:9.6vw}

  html[lang=en] .hero-title{font-size:9.6vw}

}



/* ---------- branscher ---------- */

.industry-grid{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;gap:1rem}

@media (min-width:640px){.industry-grid{grid-template-columns:repeat(2,1fr)}}

@media (min-width:980px){.industry-grid{grid-template-columns:repeat(3,1fr)}}

.industry-grid a{display:flex;flex-direction:column;gap:.5rem;height:100%;padding:1.4rem 1.4rem 1.2rem;background:#fff;border:3px solid var(--ink);border-radius:12px;text-decoration:none;color:var(--ink);transition:transform .15s,background .15s}

.industry-grid a:hover{transform:translateY(-3px);background:var(--yellow)}

.ind-name{font-size:2rem;line-height:1.05}

.ind-line{font-weight:400;flex:1}

.ind-more{font-weight:700;font-size:.9rem}



/* ---------- rättningar efter layoutkontroll ---------- */

.display{line-height:1.12}

.panel h2,.final h2,.sec-title,.price-band h2,.hero-title{line-height:1.12}

.art-hero h1{font-size:clamp(2.3rem,9.4vw,6.4rem);line-height:1.12}

.legal h1{font-size:clamp(2.3rem,9vw,5rem)}

.art{min-width:0}

.art-vinyl span{width:min(240px,100%)}

.art-bars{max-width:100%}

.art-zero b{font-size:clamp(7rem,18vw,15rem)}

.art-vinyl span{overflow:hidden}

.art-vinyl{overflow:hidden}

@media (max-width:380px){

  .logo-text small{display:none}

  .site-header .bar{gap:.5rem}

  .bar-actions{gap:.35rem}

  .bar-actions .btn-accent{padding:.45rem .75rem;font-size:.8rem}

  .flag{width:24px;height:16px}

  .logo img{width:28px;height:28px}

}

.hero-title{line-height:1.2}

.hero-sub{max-width:44em}

.final h2{font-size:clamp(2.6rem,8.6vw,7.6rem)}

.art-final h2{font-size:clamp(2.6rem,8.6vw,7.6rem)}



/* ---------- färre typsnitt i hero: Anton för rubriker och etiketter, ett vanligt typsnitt för all löptext ---------- */

.hero-kicker{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;color:var(--ink);opacity:.7}

.hero-sub{font-weight:400}

.hero-note{font-weight:400}



/* ---------- fakta ---------- */

.facts{background:var(--lilac);border-block:3px solid var(--ink)}

.fact-grid{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:1.2rem}

@media (min-width:760px){.fact-grid{grid-template-columns:repeat(2,1fr)}}

.fact-grid li{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:1.6rem 1.5rem 1.3rem;display:flex;flex-direction:column}

.fact-big{font-size:clamp(2.6rem,6vw,4.2rem);color:var(--coral);margin:0 0 .6rem;line-height:1.12;overflow-wrap:anywhere}

.fact-text{font-size:1.1rem;font-weight:400;margin:0 0 1rem}

.fact-src{margin:auto 0 0;font-size:.82rem;color:var(--muted)}

.fact-src a{color:var(--ink);font-weight:700}

.fact-note{margin:1.4rem 0 0;font-size:.85rem;max-width:52em}

.facts .sec-sub{color:var(--ink)}

.price-band h2{font-size:clamp(3rem,8vw,6.2rem);line-height:1.22}

.price-band h2{line-height:1.32}

.hero-title{font-size:clamp(2rem,6vw,5.6rem);line-height:1.34}



/* ---------- admin: dynamiska kanaler ---------- */

.adm-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}

.adm-head h2{margin:0}

.adm-tools{display:flex;gap:.4rem;flex-wrap:wrap}

.adm-card.is-off{opacity:.6}

.adm-row{display:grid;gap:0 1.4rem;align-items:end}

@media (min-width:640px){.adm-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

.adm-check{display:flex;align-items:center;gap:.6rem;font-weight:700;margin-bottom:1rem}

.adm-check input{width:1.2rem;height:1.2rem}

.admin select{display:block;width:100%;margin-top:.35rem;padding:.7rem .8rem;border:2px solid var(--ink);border-radius:8px;background:#fff;font:inherit}

.adm-new{margin-top:2rem;padding-bottom:1.4rem}

.adm-summary{border:3px solid var(--ink);border-radius:12px;padding:1.2rem 1.4rem;margin:1.6rem 0;background:#fff}

.adm-summary h2{font-size:1.1rem;margin:0 0 .4rem}

.adm-big{font-size:1.15rem;margin:0 0 .5rem}

.adm-summary progress{width:100%;height:14px;margin-bottom:.6rem;accent-color:#2e9e5b}

.adm-near progress{accent-color:#e0a100}

.adm-over{background:#fff1ee}

.adm-over progress{accent-color:var(--coral)}

.admin button[disabled]{opacity:.35;cursor:not-allowed}







.adm-image{display:flex;gap:1rem;align-items:center;margin:.4rem 0 1rem}

.adm-image img,.adm-noimg{width:84px;height:84px;border-radius:12px;border:2px solid var(--ink);object-fit:cover;flex:none}

.adm-noimg{display:grid;place-items:center;background:var(--cream);font-size:.75rem;color:var(--muted);text-align:center}

.adm-upload{cursor:pointer}

.adm-upload-list{list-style:none;padding:0;margin:.8rem 0 0;font-size:.92rem}
.adm-upload-list li{padding:.3rem 0;border-bottom:1px solid rgba(15,13,20,.1)}
details.adm-card>summary{cursor:pointer}
details.adm-card[open]>summary{margin-bottom:.6rem}


.adm-pricing{margin-top:1.6rem}

.adm-prices{display:grid;gap:0 1.4rem}

@media (min-width:640px){.adm-prices{grid-template-columns:1fr 1fr}}

.adm-pricing .adm-check{margin-bottom:.6rem}

.adm-pricing input[type=radio]{width:1.2rem;height:1.2rem}

input[type=number],input[type=date]{display:block;width:100%;margin-top:.4rem;padding:.85rem 1rem;font:inherit;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:10px}

.adm-check{display:flex}

.adm-check input[type=radio],.adm-check input[type=checkbox]{flex:none;margin:0}



/* ---------- spelare: mörk yta, vald kanal stor överst, övriga i en rad ---------- */

.page-listen{background:#0d0b12;color:#fff}

.listen-top{max-width:1200px}

.listen-top .logo{color:#fff}

.page-listen .btn-outline,.page-listen .btn-outline-dark{color:#fff;border-color:rgba(255,255,255,.45)}

.page-listen .btn-outline:hover,.page-listen .btn-outline-dark:hover{background:#fff;color:var(--ink)}

.page-listen .who-mail{color:rgba(255,255,255,.6)}

.page-listen .listen-top .flag{border-color:rgba(255,255,255,.35)}

.page-listen .listen-top .flag.on{border-color:#fff}

@media (max-width:560px){.listen-top{flex-wrap:wrap;padding-inline:16px}.who{flex-wrap:wrap;justify-content:flex-end;gap:.5rem}}

.listen{max-width:1200px;align-items:stretch;padding:4px 20px 56px}

.c0{--card:var(--yellow);--hue:255,217,61}

.c1{--card:var(--lilac);--hue:196,176,255}

.c2{--card:var(--coral);--hue:255,90,54}

.c3{--card:var(--mint);--hue:142,227,200}



.now{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:26px;padding:clamp(20px,4vw,52px);border-radius:28px;border:1px solid rgba(255,255,255,.08);background:#14111b}

.now-bg{position:absolute;inset:-40px;z-index:-2;background:radial-gradient(120% 90% at 85% 0%,rgba(var(--hue),.4),transparent 60%),#14111b}

.now-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(46px) saturate(1.25);transform:scale(1.25);opacity:.55}

.now::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,11,18,.15),rgba(13,11,18,.8))}

.now>*{min-width:0}



.now-art{position:relative;width:min(70vw,300px);aspect-ratio:1;margin:0 auto;border-radius:50%;overflow:hidden;background:#1d1826;border:6px solid #0d0b12;box-shadow:0 24px 60px rgba(0,0,0,.55);display:grid;place-items:center}

.now-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.now-art .art-initial{font-size:clamp(5rem,28vw,9rem);color:rgb(var(--hue))}

.now-art::after{content:"";position:absolute;left:50%;top:50%;width:15%;aspect-ratio:1;border-radius:50%;background:#0d0b12;transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(var(--hue),.95)}

.is-playing .now-art img,.is-playing .now-art .art-initial{animation:spin 30s linear infinite}



.now-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem}

.now-kicker{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--hue))}

.now-name{margin:0;color:#fff;font-size:clamp(2.8rem,11vw,5.4rem);line-height:1.1;overflow-wrap:anywhere}

.now-desc{margin:0;font-size:1.1rem;font-weight:400;color:rgba(255,255,255,.75);max-width:34ch}

.now-ctrl{display:flex;align-items:center;gap:1.2rem;margin-top:1.1rem}

.now .play{width:88px;height:88px;flex:none}

.now .play-face{background:var(--coral);border:0}

.now .ico svg{width:38px;height:38px;fill:#0d0b12}

.now .ico-play svg{transform:translateX(3px)}

.now .ring{border-color:var(--coral)}

.now .bars{height:34px;opacity:.3}

.is-playing .now .bars{opacity:1}

.now .bars .eq i{background:var(--coral)}

.now-hint{margin:.2rem 0 0;font-size:.92rem;font-weight:700;color:rgba(255,255,255,.75)}



.fbtn{display:inline-flex;align-items:center;gap:.55rem;max-width:100%;margin-top:1.3rem;padding:.65rem 1rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-weight:700;cursor:pointer}

.fbtn[hidden]{display:none}

.fbtn:hover{background:rgba(255,255,255,.14)}

.fbtn svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.fbtn-chev svg{width:18px;height:18px;transition:transform .2s}

.fbtn[aria-expanded=true] .fbtn-chev svg{transform:rotate(180deg)}

.fsum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:30ch;font-weight:400;font-size:.85rem;color:rgb(var(--hue))}

.fsum:empty{display:none}



.now .filters{width:100%;max-width:560px;margin-top:.9rem;display:grid;gap:.8rem;text-align:left}

.now .filter,.now .filter:nth-child(2){background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:1rem 1.1rem}

.now .f-name{color:#fff;font-size:1.5rem;margin-bottom:.6rem}

.now .dial-end::before,.now .dial-end.plus::after{background:#fff}

.now .dial-track::before{background:rgba(255,255,255,.35)}

.now .dot{background:#14111b;border-color:var(--coral)}

.now .dot::after{background:#0d0b12}

.now .dot[aria-checked=true]{background:var(--coral);border-color:#fff}

.now .dot-label{color:rgba(255,255,255,.85)}



.now .volume{width:100%;max-width:560px;margin:1.3rem 0 0;color:#fff}

.now .vol-ico svg{fill:#fff}

.now input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.3)}

.now input[type=range]::-moz-range-track{background:rgba(255,255,255,.3)}

.now input[type=range]::-webkit-slider-thumb{border-color:#fff}

.now input[type=range]::-moz-range-thumb{border-color:#fff}

.now .foot-note{color:rgba(255,255,255,.6)}



@media (min-width:900px){

  .now{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:40px}

  .now-art{grid-column:2;grid-row:1;width:100%;max-width:440px;margin:0 0 0 auto;border:0;border-radius:28px}

  .now-art::after{display:none}

  .now-body{grid-column:1;grid-row:1;align-items:flex-start;text-align:left}

  .is-playing .now-art img,.is-playing .now-art .art-initial{animation:none}

}



.more{margin-top:2.4rem}

.more-title{margin:0 0 .9rem;font-size:1.5rem;color:#fff}

.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}

.rail .ch{flex:0 0 clamp(150px,42vw,200px);scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:.55rem;padding:10px 10px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:#1a1722;color:#fff;text-align:left;cursor:pointer;font:inherit;transition:transform .15s,background .15s}

.rail .ch[hidden]{display:none}

.rail .ch:hover{transform:translateY(-3px);background:#231e2e}

.rail .ch .ch-art{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#241f30;display:grid;place-items:center;border:0}

.rail .ch .ch-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.rail .ch .art-initial{font-size:3.4rem;color:rgb(var(--hue))}

.rail .ch-name{font-size:1.35rem;line-height:1.2;padding:0 4px;color:#fff;overflow-wrap:anywhere}

.rail .ch-desc{font-size:.88rem;font-weight:400;padding:0 4px;color:rgba(255,255,255,.65);opacity:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}

.page-listen .foot-note{color:rgba(255,255,255,.5)}

@media (prefers-reduced-motion:reduce){.is-playing .now-art img,.is-playing .now-art .art-initial{animation:none}.rail .ch{transition:none}}

.install{color:var(--ink)}



/* ---------- inloggning för spelaren (mörk) ---------- */

.page-login{background:#0d0b12;color:#fff}

.page-login::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(90% 55% at 50% 0%,rgba(255,90,54,.35),transparent 70%),radial-gradient(70% 50% at 90% 100%,rgba(196,176,255,.18),transparent 70%)}

.page-login .logo{color:#fff}

.page-login .auth-top .flag{border-color:rgba(255,255,255,.35)}

.page-login .auth-top .flag.on{border-color:#fff}

.login-card{width:min(440px,100%);padding:.4rem .2rem}

.login-kicker{margin:0 0 .6rem;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}

.login-card h1{font-size:clamp(3rem,13vw,4.6rem);line-height:1.1;margin:0 0 .5rem;color:#fff}

.login-lead{margin:0 0 1.6rem;color:rgba(255,255,255,.75);font-size:1.1rem}

.login-card label{color:#fff}

.login-card input[type=email],.login-card input[type=password]{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);color:#fff}

.login-card input:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,90,54,.4)}

.login-card .btn-accent{margin-top:.4rem;padding-block:1rem;font-size:1.05rem}

.login-new{margin:1.6rem 0 0;text-align:center;color:rgba(255,255,255,.65);font-size:.95rem}

.login-new a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.login-page .install{width:min(440px,100%);color:var(--ink)}



/* ---------- spelare: val av eget val eller schema ---------- */

.mode-row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-bottom:.9rem}

.mode{display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}

.mode-btn{border:0;background:transparent;color:rgba(255,255,255,.8);font:inherit;font-weight:700;font-size:.9rem;padding:.45rem 1.1rem;border-radius:999px;cursor:pointer}

.mode-btn[aria-pressed=true]{background:#fff;color:var(--ink)}

.sched-edit{color:rgba(255,255,255,.75);font-size:.88rem;text-decoration:underline;text-underline-offset:3px}

.sched-edit:hover{color:#fff}

.sched-line{margin:0 0 .6rem;font-size:.95rem;font-weight:700;color:rgb(var(--hue))}

.sched-line a{color:#fff;text-decoration:underline}

@media (min-width:900px){.mode-row{justify-content:flex-start}}



/* ---------- schemasidan ---------- */

.sched{max-width:760px;margin:0 auto;padding:10px 20px 70px;color:#fff}

.sched-title{font-size:clamp(3rem,10vw,4.6rem);margin:.2rem 0 .4rem;color:#fff}

.sched-lead{margin:0 0 1.6rem;color:rgba(255,255,255,.75);font-size:1.08rem;max-width:56ch}

.days{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.6rem}

.day{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:transparent;color:#fff;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;position:relative}

.day.on{background:#fff;color:var(--ink);border-color:#fff}

.day.today::after{content:"";position:absolute;left:50%;bottom:-9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--coral)}

.day:hover{border-color:#fff}

.day-list{display:grid;gap:.8rem}

.blk-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:.9rem;align-items:start}

.blk-time{font-weight:700;font-size:1.15rem;padding-top:1rem;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.9)}

.blk{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;text-align:left;padding:1rem 1rem 1rem 1.3rem;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:#1a1722;color:#fff;font:inherit;cursor:pointer;transition:background .15s,transform .15s}

.blk:hover{background:#241f30;transform:translateY(-2px)}

.blk-text{display:flex;flex-direction:column;gap:.2rem;min-width:0}

.blk-kicker{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}

.blk-name{font-size:clamp(1.6rem,6vw,2.2rem);line-height:1.15;overflow-wrap:anywhere}

.blk-sum{font-size:.88rem;color:var(--yellow)}

.blk-art{position:relative;flex:none;width:76px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#241f30;display:grid;place-items:center}

.blk-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.blk-art .art-initial{font-size:2.4rem;color:rgb(var(--hue))}

.now-row{align-items:center}

.now-pill{justify-self:start;padding:.35rem .7rem;border-radius:999px;background:var(--coral);color:var(--ink);font-weight:700;font-size:.85rem;white-space:nowrap}

.now-line{height:2px;background:var(--coral);border-radius:1px}

.sched-empty{margin:.4rem 0 0;color:rgba(255,255,255,.6)}

.blk-edit{padding:1.1rem;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:#1a1722}

.blk-field{display:block;margin-bottom:1rem;color:#fff;font-weight:700;font-size:.9rem}

.blk-field input[type=time]{display:block;margin-top:.4rem;width:10rem;padding:.7rem .9rem;font:inherit;font-weight:700;font-size:1.2rem;color:#fff;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);border-radius:10px;color-scheme:dark}

.blk-picks{border:0;padding:0;margin:0 0 1rem}

.blk-picks legend,.blk-legend{padding:0;margin:0 0 .5rem;font-weight:700;font-size:.9rem}

.picks{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.4rem}

.pick{flex:0 0 96px;display:flex;flex-direction:column;gap:.35rem;margin:0;cursor:pointer;color:#fff;font-size:.85rem;text-align:center}

.pick input{position:absolute;opacity:0;pointer-events:none}

.pick-art{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#241f30;display:grid;place-items:center;border:2px solid transparent}

.pick-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.pick-art .art-initial{font-size:2rem;color:var(--coral)}

.pick.on .pick-art{border-color:#fff;box-shadow:0 0 0 3px var(--coral)}

.pick-name{font-weight:700;line-height:1.2;overflow-wrap:anywhere}

.pick input:focus-visible+.pick-art{outline:3px solid var(--coral);outline-offset:2px}

.blk-filter{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.7rem}

.blk-fname{font-weight:700}

.seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.1)}

.seg-btn{border:0;background:transparent;color:rgba(255,255,255,.85);font:inherit;font-weight:700;font-size:.85rem;padding:.4rem .9rem;border-radius:999px;cursor:pointer}

.seg-btn[aria-checked=true]{background:var(--coral);color:var(--ink)}

.blk-btns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

.page-schedule .btn-ghost-light{background:transparent;color:rgba(255,255,255,.8);border:0;text-decoration:underline}

.page-schedule .form-error{margin-top:.8rem}

.sched-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:1.6rem}

.sched-actions .btn[disabled]{opacity:.4;cursor:not-allowed}

.copy-box{flex-basis:100%;padding:1rem;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:#1a1722}

.copy-box .hint{margin:0 0 .6rem;color:rgba(255,255,255,.7);font-size:.9rem}

.copy-days{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}

.copy-days .day{width:42px;height:42px;font-size:.95rem}

.tz{flex-basis:100%;margin:.6rem 0 0;color:rgba(255,255,255,.75);font-size:.88rem;font-weight:700}

.tz select{display:block;margin-top:.35rem;max-width:100%;padding:.55rem .7rem;font:inherit;color:#fff;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);border-radius:10px;color-scheme:dark}

.sched-status{min-height:1.4em;margin:.8rem 0 0;color:rgb(var(--hue,255,217,61));font-weight:700;font-size:.9rem}

.sched .foot-note{color:rgba(255,255,255,.55);text-align:left;max-width:60ch}

@media (max-width:520px){.blk-row{grid-template-columns:52px minmax(0,1fr);gap:.6rem}.blk-time{font-size:1rem}.blk-art{width:64px}}

.now-row{grid-template-columns:auto minmax(0,1fr)}

.blk-filter{flex-direction:column;align-items:flex-start;gap:.35rem}

@media (max-width:420px){.days{gap:.4rem}.day{width:40px;height:40px;font-size:.95rem}.copy-days .day{width:38px;height:38px}}



/* ---------- admin: flikar, översikt, kunder, inställningar, banderoll ---------- */

.adm-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 .8rem;padding-bottom:.8rem;border-bottom:3px solid var(--ink)}

.adm-tabs a{padding:.55rem 1rem;border-radius:999px;border:2px solid var(--ink);font-weight:700;font-size:.95rem;color:var(--ink);background:#fff}

.adm-tabs a:hover{background:var(--yellow)}

.adm-tabs a[aria-current=page]{background:var(--ink);color:#fff}

.admin.wrap.narrow{max-width:1000px}

.adm-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin:1rem 0}

@media (min-width:720px){.adm-stats{grid-template-columns:repeat(4,1fr)}}

.adm-stat{border:3px solid var(--ink);border-radius:12px;background:#fff;padding:1rem 1.1rem;display:flex;flex-direction:column}

.adm-stat-n{font-family:Anton,Impact,sans-serif;font-size:2.8rem;line-height:1.1}

.adm-stat-l{font-size:.9rem;color:var(--muted);font-weight:700}

.live-bar{display:grid;grid-template-columns:minmax(80px,200px) 1fr 2.5ch;gap:.8rem;align-items:center;margin:.4rem 0}

.live-name{font-weight:700;overflow-wrap:anywhere}

.live-bar progress{width:100%;height:14px;accent-color:var(--coral)}

.live-count{font-weight:700;text-align:right}

.adm-table-wrap{overflow-x:auto;margin:1rem 0}

.adm-table{width:100%;border-collapse:collapse;font-size:.92rem}

.adm-table th{text-align:left;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.5rem .7rem;border-bottom:2px solid var(--ink)}

.adm-table td{padding:.7rem;border-bottom:1px solid rgba(15,13,20,.15);vertical-align:top}

.adm-mail{overflow-wrap:anywhere;font-weight:700}

.chip{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.75rem;font-weight:700;background:var(--cream);border:1.5px solid var(--ink)}

.chip-on{background:var(--mint)}

.chip-off{background:#eee;color:var(--muted)}

.chip-me{background:var(--yellow)}

.adm-acts .adm-inline{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}

.adm-search{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 .4rem}

.adm-search input[type=search]{flex:1;min-width:200px;margin:0;padding:.8rem 1rem;font:inherit;border:2px solid var(--ink);border-radius:10px;background:#fff}

.adm-pager{display:flex;gap:1rem;align-items:center;justify-content:center;margin:1rem 0}

.admin input[type=email]{margin-top:.4rem}

.site-banner{display:flex;gap:1rem;align-items:center;justify-content:center;padding:.65rem 1rem;font-weight:700;font-size:.93rem;text-align:center;color:var(--ink)}

.site-banner[hidden]{display:none}

.banner-info{background:var(--yellow)}

.banner-warn{background:var(--coral)}

.banner-x{border:0;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink);padding:0 .3rem}

.adm-banner-prev{border:2px solid var(--ink);border-radius:10px;overflow:hidden;margin-bottom:1rem}

.adm-tabs a{text-decoration:none}



/* ---------- finslipning efter designgranskning ---------- */

.now .play:focus-visible{outline:3px solid #fff;outline-offset:4px}

.mode-btn:focus-visible,.fbtn:focus-visible,.seg-btn:focus-visible,.day:focus-visible,.blk:focus-visible,.rail .ch:focus-visible{outline:3px solid #fff;outline-offset:2px}

.page-listen .install{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.18)}

.page-listen .install .btn-ink{background:var(--coral);color:var(--ink)}

.page-listen .install-x{color:#fff}

.blk-active{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral) inset}

.blk-active .blk-kicker{color:var(--coral)}

/* Mindre skiva på låga skärmar, så att play-knappen syns utan att skrolla */

.now-art{width:min(62vw,280px,46vh)}

@media (max-width:899px){.now{gap:16px;padding:18px 18px 22px}.now-art{width:min(54vw,230px,40vh)}.mode-row{margin-bottom:.4rem}.now-ctrl{margin-top:.6rem}.now-name{font-size:clamp(2.4rem,10vw,3.6rem)}}

@media (max-height:520px) and (orientation:landscape){.now{grid-template-columns:minmax(0,1fr) auto;align-items:center}.now-art{grid-column:2;grid-row:1;width:min(40vh,220px);margin:0}.now-body{grid-column:1;grid-row:1;align-items:flex-start;text-align:left}.mode-row{justify-content:flex-start}}



/* ---------- signatur: namnet och ordleken ihop ---------- */

.signoff{display:flex;flex-direction:column;align-items:center;gap:.15rem;margin:2.4rem 0 0;text-align:center}

.signoff-name{font-family:Anton,Impact,sans-serif;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;color:#fff}

.signoff-line{font-size:.85rem;color:rgba(255,255,255,.55);letter-spacing:.02em}

.signoff-line b{color:var(--coral);font-weight:700}

.login-page .signoff{margin-top:1.6rem}



/* ---------- glömt lösenord ---------- */

.forgot{margin:-.4rem 0 1rem;text-align:right;font-size:.9rem}

.forgot a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}

.login-notice{margin:0 0 1.2rem;padding:.8rem 1rem;border-radius:12px;background:rgba(142,227,200,.16);border:1px solid var(--mint);color:#fff;font-weight:700}

.login-card .form-error{margin-bottom:1rem}

.adm-warn{text-align:left;background:#fff1ee;border-color:var(--coral)}



/* ---------- admin: statistik ---------- */

.adm-range{display:flex;gap:.4rem;margin:.6rem 0}

.adm-range a{padding:.4rem .9rem;border-radius:999px;border:2px solid var(--ink);font-weight:700;font-size:.9rem;color:var(--ink);text-decoration:none;background:#fff}

.adm-range a[aria-current=page]{background:var(--ink);color:#fff}

.adm-stats-3{grid-template-columns:repeat(2,1fr)}

@media (min-width:720px){.adm-stats-3{grid-template-columns:repeat(3,1fr)}}

.adm-stat-s{font-size:.8rem;color:var(--muted);margin-top:.15rem}

.chart{display:block;width:100%;height:auto}

.chart .cbar{fill:var(--coral)}

.chart .gl{stroke:rgba(15,13,20,.15);stroke-width:1}

.chart .ax{font-size:11px;fill:var(--muted);font-family:inherit}

.heat{border-collapse:separate;border-spacing:2px;font-size:.72rem;min-width:520px}

.heat th{font-weight:700;color:var(--muted);text-align:right;padding:0 .4rem 0 0;white-space:nowrap}

.heat thead th{text-align:center;padding:0}

.heat td{width:22px;height:22px;border-radius:3px;background:#f0ede6}

.heat .hm1{background:#ffe0d6}.heat .hm2{background:#ffb8a3}.heat .hm3{background:#ff8c6b}.heat .hm4{background:#ff5a36}.heat .hm5{background:#c93a1a}

.adm-two{display:grid;gap:1rem}

@media (min-width:820px){.adm-two{grid-template-columns:1fr 1fr}}

.adm-users td:last-child{min-width:160px}

.live-bar-wide{grid-template-columns:minmax(80px,200px) 1fr 11ch}.live-bar-wide .live-count{white-space:nowrap}



/* tyst läge i spelaren: ljudet är tyst men spelaren är igång */

.is-quiet .ico-play{display:none}

.is-quiet .ico-pause{display:grid}

.is-quiet .now .bars{opacity:.3}

.is-quiet .now-art img,.is-quiet .now-art .art-initial{animation:none}

.is-quiet .now-art{opacity:.55}



/* ---------- schemasidan: veckokalender (dator) och dagslista (mobil) ---------- */

.sched{max-width:1240px}

.sched-lead,.sched .foot-note{max-width:70ch}

.sched-actions{margin:.4rem 0 .2rem}

.sched-status{min-height:1.4em;margin:.3rem 0 .6rem}

.wc0{--wc:#9b6bff;--wt:#fff}.wc1{--wc:#ffb4b8;--wt:#0f0d14}.wc2{--wc:#4d78ff;--wt:#fff}

.wc3{--wc:#ffe45e;--wt:#0f0d14}.wc4{--wc:#1aa653;--wt:#fff}.wc5{--wc:#4a1b78;--wt:#fff}

.week{display:none}

.sched-tip{display:none;color:rgba(255,255,255,.6);font-size:.88rem;margin:.8rem 0 0}

@media (min-width:900px){

  .week{display:block}

  .sched-tip{display:block}

  .dayview{display:none}

}

.wk-grid{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));column-gap:8px;align-items:start}

.wk-head{padding:.2rem .2rem .7rem;text-align:center;display:flex;flex-direction:column;gap:.1rem}

.wk-day{font-weight:700;color:#fff}

.wk-head.today .wk-day{color:var(--coral)}

.wk-sum{font-size:.74rem;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}

.wk-axis{position:relative}

.wk-hour{position:absolute;right:6px;font-size:.72rem;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}

.wk-col{position:relative;border-radius:14px;background-color:#14111b;background-image:linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);background-size:100% 46px;cursor:crosshair;touch-action:pan-y}

.wk-col.today{background-color:#1b1724}

.wb{position:absolute;left:3px;right:3px;box-sizing:border-box;display:flex;flex-direction:column;gap:.1rem;align-items:flex-start;text-align:left;padding:.5rem .6rem;border:0;border-radius:12px;background:var(--wc);color:var(--wt);font:inherit;cursor:pointer;overflow:hidden;transition:filter .15s}

.wb:hover{filter:brightness(1.08)}

.wb-time{font-size:.72rem;font-weight:700;opacity:.85;font-variant-numeric:tabular-nums}

.wb-name{font-size:1.15rem;line-height:1.15;overflow-wrap:anywhere;padding-right:46px}

.wb-sum{font-size:.74rem;opacity:.9}

.wb-art{position:absolute;top:.5rem;right:.5rem;width:38px;height:38px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.25);display:grid;place-items:center}

.wb-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.wb-art .art-initial{font-size:1.3rem;color:#fff}

.wb-short{flex-direction:row;align-items:center;gap:.5rem;padding:.2rem .5rem}

.wb-short .wb-name{font-size:.9rem;padding-right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.wb-short .wb-art,.wb-short .wb-sum{display:none}

.wb-active{outline:3px solid #fff;outline-offset:-3px}

.wb-grip{position:absolute;left:0;right:0;height:12px;cursor:ns-resize;touch-action:none}

.wb-grip-top{top:0}.wb-grip-bot{bottom:0}

.wb-grip::after{content:"";position:absolute;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:2px;background:currentColor;opacity:0;transition:opacity .15s}

.wb-grip-top::after{top:3px}.wb-grip-bot::after{bottom:3px}

.wb:hover .wb-grip::after,.wb:focus-visible .wb-grip::after{opacity:.55}

.wk-ghost{position:absolute;left:3px;right:3px;border-radius:12px;border:2px dashed var(--coral);background:rgba(255,90,54,.18);color:#fff;font-size:.78rem;font-weight:700;padding:.3rem .5rem;pointer-events:none;box-sizing:border-box}

.wk-now{position:absolute;left:0;right:0;height:2px;background:var(--coral);z-index:2;pointer-events:none}

.wk-now span{position:absolute;left:-2px;top:-9px;font-size:.66rem;font-weight:700;background:var(--coral);color:var(--ink);border-radius:999px;padding:0 .35rem;line-height:1.35}



.day-sum{margin:.2rem 0 .8rem;color:rgba(255,255,255,.7);font-weight:700}

.day-list{display:grid;gap:.6rem}

.dl{position:relative;display:flex;flex-direction:column;gap:.1rem;align-items:flex-start;text-align:left;width:100%;box-sizing:border-box;padding:.8rem 5.4rem .8rem 1rem;min-height:84px;border:0;border-radius:18px;background:var(--wc);color:var(--wt);font:inherit;cursor:pointer}

.dl-time{font-size:.82rem;font-weight:700;opacity:.88;font-variant-numeric:tabular-nums}

.dl-name{font-size:1.7rem;line-height:1.15;overflow-wrap:anywhere}

.dl-sum{font-size:.82rem}

.dl-art{position:absolute;top:.8rem;right:.8rem;width:58px;height:58px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.25);display:grid;place-items:center}

.dl-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.dl-art .art-initial{font-size:2rem;color:#fff}

.dl-active{outline:3px solid #fff;outline-offset:2px}

.gap{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;box-sizing:border-box;padding:.7rem 1rem;border-radius:14px;border:1.5px dashed rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.65);font:inherit;font-size:.9rem;cursor:pointer}

.gap:hover{border-color:#fff;color:#fff}

.gap-add{font-weight:700;color:var(--coral)}



.dlg-sched{width:min(600px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:#16131d;color:#fff;overflow:auto}

.dlg-sched::backdrop{background:rgba(5,4,8,.7)}

.dlg-form{padding:1.4rem 1.4rem 1.2rem}

.dlg-title{margin:0 0 1rem;font-size:2rem;color:#fff}

.dlg-times{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}

.dlg-midnight{margin:-.4rem 0 1rem}

.dlg-sched .blk-field select,.dlg-sched .blk-field input[type=time]{display:block;margin-top:.4rem;width:100%;padding:.7rem .9rem;font:inherit;font-weight:700;font-size:1.15rem;color:#fff;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);border-radius:10px;color-scheme:dark;box-sizing:border-box}

.dlg-sched .hint{color:rgba(255,255,255,.6);font-size:.82rem;margin:.4rem 0 0}

.blk-days{margin:1rem 0 .4rem}

.dlg-sched .copy-days{display:flex;gap:.5rem;flex-wrap:wrap}

.dlg-sched .btn-ghost-light{background:transparent;color:rgba(255,255,255,.8);border:0;text-decoration:underline}

@media (max-width:420px){.dlg-form{padding:1.1rem 1rem}.dlg-times{gap:.6rem}.dlg-title{font-size:1.7rem}}

@media (prefers-reduced-motion:reduce){.wb{transition:none}}



.wk-now{height:2px;box-shadow:0 0 0 1px rgba(255,90,54,.25)}

.wk-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--coral)}

.wb-name{font-size:1.02rem;padding-right:34px;overflow-wrap:break-word;hyphens:auto}

.wb-art{width:30px;height:30px;top:.45rem;right:.45rem;border-radius:7px}

.wb-art .art-initial{font-size:1.1rem}

.sched-tz{margin-top:1.4rem}

.sched-tz .tz{display:block;color:rgba(255,255,255,.7);font-size:.85rem;font-weight:700}

.sched-tz select{display:block;margin-top:.35rem;max-width:100%;padding:.55rem .7rem;font:inherit;color:#fff;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);border-radius:10px;color-scheme:dark}

.pick{flex-basis:104px}

.pick-name{font-size:.8rem;overflow-wrap:break-word;hyphens:auto}



/* ---------- schema: mötesbokningskänsla (ruta bredvid passet, mindre text) ---------- */

.sched-lead{font-size:1.1rem;margin:0 0 1rem}

.lead-narrow{display:none}

@media (max-width:899px){.lead-wide{display:none}.lead-narrow{display:inline}}

.sched-status{display:flex;align-items:center;gap:.4rem}

.undo{border:0;background:transparent;color:#fff;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}

.sched-help{margin-top:1.4rem;color:rgba(255,255,255,.65);font-size:.9rem;max-width:62ch}

.sched-help summary{cursor:pointer;font-weight:700;color:rgba(255,255,255,.8)}

.sched-help ul{margin:.6rem 0 0;padding-left:1.2rem;display:grid;gap:.4rem}

.sched-help strong{color:#fff}

.wb-open{outline:3px solid #fff;outline-offset:-3px;z-index:3}

.wb{transition:filter .15s}



.dlg-sched{padding:0}

.dlg-sched .pop{padding:1rem 1.1rem 1rem}

.dlg-pop{position:fixed;margin:0;inset:auto;width:min(370px,calc(100vw - 20px));max-height:calc(100dvh - 20px);box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:20}

.pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}

.pop-day{font-family:Anton,Impact,sans-serif;font-size:1.5rem;letter-spacing:.02em}

.pop-x{border:0;background:transparent;color:rgba(255,255,255,.7);font-size:1.7rem;line-height:1;cursor:pointer;padding:.1rem .4rem;border-radius:8px}

.pop-x:hover{color:#fff;background:rgba(255,255,255,.1)}

.pop-times{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}

.pop-times select,.dlg-sched select{flex:1;min-width:0;padding:.6rem .7rem;font:inherit;font-weight:700;font-size:1.05rem;color:#fff;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.28);border-radius:10px;color-scheme:dark;box-sizing:border-box}

.dlg-sched .blk-field{display:block;margin:0 0 .8rem;font-weight:700;font-size:.9rem}

.dlg-sched .blk-field select{display:block;width:100%;margin-top:.35rem}

.pop .picks{display:flex;gap:.5rem;overflow-x:auto;padding:2px 2px 8px;margin-bottom:.4rem}

.pop .pick{flex:0 0 76px;display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;border:0;background:transparent;color:#fff;font:inherit;font-size:.78rem;text-align:center;cursor:pointer}

.pop .pick-art{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#241f30;display:grid;place-items:center;border:2px solid transparent}

.pop .pick-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.pop .pick-art .art-initial{font-size:1.6rem;color:var(--coral)}

.pop .pick.on .pick-art{border-color:#fff;box-shadow:0 0 0 3px var(--coral)}

.pop .pick-name{font-weight:700;line-height:1.15;overflow-wrap:break-word;hyphens:auto}

.pop .blk-filters{margin:.2rem 0 .6rem}

.pop .blk-filter{margin-bottom:.5rem}

.pop-copy{margin:.5rem 0 .2rem}

.pop-label{margin:0 0 .35rem;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.04em;text-transform:uppercase}

.pop .copy-days{display:flex;gap:.35rem;flex-wrap:wrap}

.pop .day{width:36px;height:36px;font-size:.88rem}

.pop .day:disabled{opacity:.9;cursor:default}

.pop .day:disabled.on{background:rgba(255,255,255,.25);color:#fff;border-color:rgba(255,255,255,.25)}

.pop-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem}

.btn-link{border:0;background:transparent;color:rgba(255,255,255,.75);font:inherit;text-decoration:underline;cursor:pointer;padding:.3rem 0}

.btn-link:hover{color:#fff}

@media (max-width:899px){

  .dlg-sched:not(.dlg-pop){width:100%;max-width:none;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:88dvh}

  .pop .pick{flex-basis:84px}

}



.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.adm-table-wrap:focus-visible{outline:3px solid var(--coral);outline-offset:2px}



.accept{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--muted);margin:.4rem 0 .9rem}

.accept input{width:1.15rem;height:1.15rem;margin-top:.15rem;flex:none}

.accept a{font-weight:700;color:var(--ink)}

.adm-tabs-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0}

.chip-tab{text-decoration:none;color:var(--ink);border:1px solid var(--line,#ccc);padding:.25rem .7rem;border-radius:999px}

.chip-tab.on{background:var(--ink);color:#fff}


/* ---------- hjälp för kunder ---------- */
.help{padding-top:2.2rem;padding-bottom:3rem}
.help h1{font-size:clamp(2.2rem,6vw,3.2rem)}
.help-lead{margin:.5rem 0 1.2rem}
.help-search input{width:100%;font:inherit;padding:.95rem 1.2rem;border:2px solid var(--ink);border-radius:999px;background:#fff}
.help-pop{margin:1.6rem 0 .4rem;background:var(--cream);border-radius:20px;padding:1.2rem 1.4rem}
.help h2{font-size:1.35rem;margin:0 0 .5rem}
.help ul{list-style:none;margin:0;padding:0}
.help li{margin:0}
.help li a{display:block;padding:.55rem 0;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(15,13,20,.12)}
.help li a:hover{color:var(--coral)}
.help-cats{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:1.8rem}
@media (min-width:700px){.help-cats{grid-template-columns:1fr 1fr;gap:1.6rem 2.2rem}}
.help-cat p{margin:0 0 .4rem;font-size:.92rem}
.help-crumbs{font-size:.9rem;margin-bottom:1rem;color:var(--muted)}
.help-crumbs a{font-weight:700;color:var(--ink)}
.help-article p,.help-article li{font-size:1.04rem}
.help-article h1{margin-bottom:1rem}
.help-steps{padding-left:1.4rem;margin:0 0 1rem}
.help-steps li{padding:.2rem 0}
.help-tip{background:var(--yellow);border-radius:14px;padding:.8rem 1rem;font-weight:600}
.help-more{margin-top:2.2rem}
.help-contact{margin-top:2.6rem;background:var(--ink);color:#fff;border-radius:22px;padding:1.5rem 1.6rem}
.help-contact h2{color:#fff}
.help-contact .btn-ink{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.help-contact .muted{color:#d9d3e6}

/* ---------- låst spelare ---------- */
.locked-note{display:none;font-size:.9rem;opacity:.8;margin:0 0 .6rem}
.locked .locked-note{display:block}
.locked .when-open{display:none!important}
.locked #filters{display:none!important}
.dlg-unlock{border:2px solid var(--ink);border-radius:20px;padding:1.4rem;max-width:min(92vw,380px);background:#fff;color:var(--ink)}
.dlg-unlock::backdrop{background:rgba(15,13,20,.6)}
.dlg-unlock h2{font-size:1.5rem;margin:0 0 .8rem}
.dlg-unlock input{width:100%;font:inherit;padding:.7rem .9rem;border:2px solid var(--ink);border-radius:12px;margin-top:.3rem}
.dlg-unlock .dlg-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}
.dlg-unlock .btn-outline-dark{color:var(--ink);background:#fff;border-color:var(--ink)}

.legal .pn{display:inline-block;min-width:2.6em;font-weight:700}

.article .sources{margin:.4rem 0 0;padding-left:1.2rem;font-size:.92rem}
.article .sources a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:980px){.industry-grid li:last-child{grid-column:1/-1}.industry-grid li:last-child a{flex-direction:row;align-items:center;gap:1.4rem}.industry-grid li:last-child .ind-line{flex:1}}

/* ---------- rapportera problem, håll skärmen på ---------- */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.85}
.linkbtn:hover{opacity:1}
.wake{display:flex;align-items:center;gap:.6rem;margin:1rem 0 0;font-size:.92rem;font-weight:400;color:#fff}
.wake input{width:1.1rem;height:1.1rem}
.dlg-unlock textarea{width:100%;font:inherit;padding:.7rem .9rem;border:2px solid var(--ink);border-radius:12px;margin-top:.5rem;resize:vertical}
.dlg-unlock .form-error.good{background:#e6f6ee;color:#14532d;border-color:#14532d}
.adm-diag{white-space:pre-wrap;word-break:break-all;font-size:.78rem;max-width:480px;margin:.4rem 0 0}

/* ---------- välkomstruta ---------- */
.welcome{background:#1e1c26;color:#fff;border-radius:18px;padding:1.3rem 1.5rem;margin:0 0 1.2rem}
.welcome h2{font-size:1.5rem;margin:0 0 .6rem}
.welcome ol{margin:0 0 1rem;padding-left:1.3rem}
.welcome li{padding:.2rem 0}
.welcome a{color:var(--yellow);font-weight:700}
.linkbtn{opacity:1;color:#cfcdd8}

/* ---------- priskort: pris utan moms som huvudsiffra ---------- */
.price-incl{margin:.15rem 0 0;font-size:.92rem;opacity:.8}
.price-day{margin:.7rem 0 0;font-weight:700}
.plans-note{margin:1.2rem 0 0;text-align:center}

.acct-form{margin:1.6rem 0 0}
.acct-form h2{font-size:1.4rem;margin:0 0 .8rem}
.auth-card .fine{margin:.8rem 0 0}

/* ---------- admin: säkerhet ---------- */
.adm-secret{display:inline-block;margin:.5rem 0;padding:.5rem .8rem;background:var(--cream);border-radius:10px;font-size:1.15rem;letter-spacing:.08em;word-break:break-all}
.adm-codes{background:var(--cream);padding:1rem;border-radius:12px;font-size:1.05rem;line-height:1.7;user-select:all}
.adm-steps{padding-left:1.3rem}
.adm-steps li{padding:.3rem 0}
.adm-card h3{font-size:1.05rem;margin:0 0 .3rem}

.page-admin .acct-form{margin:1.1rem 0 0}
.page-admin .acct-form label{display:block;margin:.7rem 0}
.page-admin .acct-form input{display:block;margin-top:.3rem;padding:.6rem .8rem;border:2px solid var(--ink);border-radius:10px;font:inherit;width:100%;max-width:340px;background:#fff}
.page-admin .acct-form .btn{margin-top:.2rem}
.adm-card form+form{margin-top:.8rem}
/* Favoriter */
.ch-fav{display:none;position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);color:var(--yellow);font-size:16px;line-height:28px;text-align:center}
.ch.is-fav .ch-fav{display:block}
.now-art .ch-fav{display:none!important}
.fav-btn{display:inline-flex;align-items:center;gap:.4rem;margin:.5rem 0 0;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:inherit;font-size:.95rem;cursor:pointer}
.fav-btn:hover{background:rgba(255,255,255,.08)}
.fav-btn[aria-pressed=true]{border-color:var(--yellow);color:var(--yellow)}
.fav-btn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.locked .fav-btn{display:none}
/* Taggar: kanalernas och låtarnas taggar, grupperade som i Låtverkstaden */
.adm-tags{border:1px solid var(--line,#d9d9d9);border-radius:12px;padding:.8rem 1rem;margin:0 0 1rem}
.adm-tags legend{font-weight:700;padding:0 .3rem}
.adm-taggroup{margin:.3rem 0}
.adm-taggroup summary{cursor:pointer;font-weight:600;padding:.2rem 0}
.adm-tagchecks{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;padding:.4rem 0 .2rem}
.adm-tagchecks .adm-check{font-weight:400;margin-bottom:.2rem}
.adm-chip{display:inline-block;font-size:.8rem;padding:.1rem .55rem;border-radius:999px;background:rgba(0,0,0,.07);margin:.1rem 0;white-space:nowrap}
.adm-rowedit summary{list-style:none;display:inline-block}
.adm-rowedit summary::-webkit-details-marker{display:none}
.adm-rowedit[open]{min-width:min(560px,80vw)}
.adm-rowedit form{margin-top:.6rem}
.adm-bulk{margin:.6rem 0 1rem;padding:.6rem .8rem;border-radius:10px;background:rgba(0,0,0,.04)}
.adm-pager{display:flex;align-items:center;gap:.8rem;margin-top:.8rem}
.adm-inline{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.adm-inline input[type=text]{max-width:16rem}
.adm-warn{color:#b3261e;font-weight:600}

/* ---------- admin: Texter ---------- */
.tx-intro p{max-width:72ch}
.tx-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin:1rem 0 .4rem}
.tx-tools .adm-check{margin:0}
.tx-search{flex:1 1 320px;margin:0}
.tx-search input{width:100%;padding:.7rem .9rem;border:2px solid var(--ink);border-radius:10px;font:inherit;background:#fff}
.tx-area{margin:2.2rem 0 0}
.tx-area>h2{font-size:1.5rem;margin:0 0 .7rem}
.tx-sec{border:2px solid var(--ink);border-radius:12px;background:#fff;margin:.55rem 0}
.tx-sec>summary{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;padding:.8rem 1.1rem;cursor:pointer;font-weight:700}
.tx-sec[open]>summary{border-bottom:2px solid var(--ink);background:var(--cream);border-radius:10px 10px 0 0}
.tx-sec-meta{font-weight:400;font-size:.88rem;color:var(--muted)}
.tx-sec-meta b{color:#b2321a}
.tx-form{padding:.4rem 1.1rem 1.1rem}
.tx-row{padding:.9rem 0;border-bottom:1px solid #e3ded4}
.tx-row:last-of-type{border-bottom:0}
.tx-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin-bottom:.45rem}
.tx-label{font-weight:700;font-size:.9rem}
.tx-tag{font-size:.72rem;font-weight:700;padding:.08rem .5rem;border-radius:999px;background:var(--cream);border:1px solid #d7d0c3;color:var(--muted)}
.tx-tag-on{display:none;background:#ffe3da;border-color:#f3a58f;color:#8a2410}
.tx-row.is-changed .tx-tag-on,.tx-row.is-dirty .tx-tag-on{display:inline-block}
.tx-row.is-dirty .tx-tag-on::after{content:" (inte sparad)"}
.tx-reset{display:none;margin-left:auto;font-size:.85rem}
.tx-row.is-changed .tx-reset,.tx-row.is-dirty .tx-reset{display:inline}
.tx-pair{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.tx-field{margin:0;font-weight:400}
.tx-lang{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:.2rem}
.tx-field textarea{display:block;width:100%;padding:.55rem .7rem;border:2px solid #cfc8bb;border-radius:9px;font:inherit;font-size:.95rem;line-height:1.45;resize:vertical;background:#fff}
.tx-field textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px #ffd9cc}
.tx-row.is-changed textarea,.tx-row.is-dirty textarea{border-color:#e8765a}
.tx-none{align-self:end;padding:.6rem 0}
.tx-save{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding:.8rem 0 .2rem;background:#fff}
.tx-row[hidden],.tx-sec[hidden],.tx-area[hidden]{display:none}
@media (max-width:720px){.tx-pair{grid-template-columns:1fr}}
.tx-err{display:block;margin:.3rem 0 0;font-size:.85rem}
.tx-label{font-weight:500;font-size:.8rem;color:var(--muted)}
.tx-save{box-shadow:0 -10px 14px -10px rgba(15,13,20,.18)}
.tx-cols{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;padding:.7rem 0 .2rem;font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
@media (min-width:721px){.tx-lang{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.tx-head{margin-bottom:.3rem}.tx-row{padding:.6rem 0}}
@media (max-width:720px){.tx-cols{display:none}}