/* DM Sans lokaal, SIL Open Font License: assets/fonts/OFL.txt. */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('./fonts/dm-sans-variable.woff2') format('woff2'); }
/* Bewust: rechte hoeken, geen kleurverlopen, geen zachte schaduwen. Zware letters, felle zenderkleuren op lichtgrijs.
   Richting geïnspireerd door de uitstraling van nova.fr (geen kopie: eigen naam, kleuren en opzet). */
:root { --bg:#eeeeef; --bg2:#e1e1e5; --fg:#1c1d23; --mute:#52535e; --lil:#a5a5ff; --line:2px solid var(--fg); }
* { box-sizing:border-box; border-radius:0; }
html { font-size:17px; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:'DM Sans',Arial,Helvetica,sans-serif; line-height:1.45; padding-bottom:6rem; }
a { color:inherit; }
.mono { font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:500; font-size:.78rem; letter-spacing:.02em; }
.top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem 1.5rem; padding:1rem 1.2rem; border-bottom:2px solid #d1d1d7; }
.logo { font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:700; font-size:1.7rem; text-decoration:none; text-transform:lowercase; letter-spacing:-.04em; line-height:1; display:inline-flex; align-items:center; gap:.55rem; }
.logo img { width:1.9rem; height:1.9rem; display:block; }
.top nav a, .top nav button { margin-right:1.2rem; text-decoration:none; font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:700; font-size:1rem; letter-spacing:-.02em; padding:.2rem 0; border-bottom:4px solid transparent; background:transparent; border-top:0; border-left:0; border-right:0; color:inherit; cursor:pointer; }
.top nav form { display:inline; }
.top nav { margin-right:-1.2rem; }
.menu-btn { display:none; background:none; border:0; cursor:pointer; padding:.55rem .3rem; margin-left:auto; }
.menu-btn span { display:block; width:1.7rem; height:3px; background:var(--fg); margin:5px 0; transition:transform .18s ease, opacity .18s ease; }
.top.nav-open .menu-btn span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.top.nav-open .menu-btn span:nth-child(2) { opacity:0; }
.top.nav-open .menu-btn span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
@media (max-width:820px) {
  .menu-btn { display:block; }
  .top nav { display:none; width:100%; margin:0; padding:.3rem 0 .1rem; }
  .top.nav-open nav { display:flex; flex-direction:column; align-items:stretch; }
  .top nav a, .top nav button { margin:0; padding:.65rem 0; border-bottom:1px solid #d1d1d7; font-size:1.1rem; text-align:left; }
  .top nav form { display:block; }
  .top nav form button { width:100%; }
}
.top nav a:hover, .top nav a[aria-current], .top nav button:hover { border-bottom-color:var(--lil); }
main { max-width:1200px; margin:0 auto; }
.hero { padding:3rem 1.2rem 2rem; }
.kicker { text-transform:uppercase; margin:0 0 1rem; color:#5555a6; }
h1 { font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:700; font-size:clamp(2.8rem,12vw,8rem); line-height:.88; margin:0 0 1.2rem; letter-spacing:-.05em; }
h1 em { font-style:normal; background:var(--lil); color:#1c1d23; display:inline-flex; align-items:center; justify-content:center; vertical-align:baseline; height:.98em; padding:0 .16em; line-height:1; letter-spacing:-.05em; }
h1 em span { display:block; transform:translate(-.025em,0); }
.h1s { font-size:clamp(2.4rem,9vw,5rem); }
h2 { font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:700; font-size:1.5rem; letter-spacing:-.03em; margin:0 0 1rem; }
.lead { font-size:1.2rem; max-width:34rem; color:var(--mute); }
.zoek { display:flex; gap:.6rem; max-width:34rem; margin:0 0 1.6rem; }
.hero .zoek { margin-top:.4rem; }
.zoek input { flex:1; min-width:0; font:inherit; padding:.75rem 1rem; border:2px solid var(--fg); background:#fff; color:var(--fg); border-radius:999px; }
.zoek button { font:inherit; font-weight:700; cursor:pointer; padding:.75rem 1.4rem; border:2px solid var(--fg); background:var(--lil); color:#000; border-radius:999px; }
.zoek button:hover { background:#fff; }
.embed-box { margin-top:1rem; max-width:34rem; }
.embed-box summary { cursor:pointer; font-weight:700; }
.embed-box p { color:var(--mute); }
.embed-box textarea { width:100%; font-family:ui-monospace,Menlo,monospace; font-size:.8rem; padding:.6rem; border:2px solid var(--fg); border-radius:10px; background:#fff; resize:vertical; }
.ticker { overflow:hidden; white-space:nowrap; background:var(--lil); color:#000; font-weight:bold; text-transform:uppercase; padding:.55rem 0; }
.ticker span { display:inline-block; animation:tick 40s linear infinite; }
@keyframes tick { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .ticker span { animation:none; padding-left:1rem; } }
.block { padding:2rem 1.2rem; }
.strip { list-style:none; margin:0 -1.2rem; padding:0 1.2rem .5rem; display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:1.2rem; }
/* Voorpagina: één rij van 5 aanbevolen zenders op een breed scherm. */
.home-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
@media (min-width:560px) { .home-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:860px) { .home-grid { grid-template-columns:repeat(5,1fr); gap:1rem; } }
.home-grid .tile-band { padding:.5rem .6rem; }
.home-grid .tile-band-name { font-size:.9rem; }
.more { margin:1.1rem 0 0; text-align:right; }
.more-btn { display:inline-block; background:var(--lil); color:#000; font-weight:800; font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; padding:.85rem 1.5rem; }
.more-btn:hover { background:#fff; }
.strip .tile { flex:0 0 min(13.5rem,72vw); scroll-snap-align:start; }
.grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
@media (min-width:560px) { .grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:860px) { .grid { grid-template-columns:repeat(6,1fr); gap:1rem; } }
.grid .tile-band { padding:.5rem .6rem; }
.grid .tile-band-name { font-size:.95rem; }
/* Zenderkaart naar Nova-voorbeeld: witte balk met de zendernaam,
   daaronder een vierkant veld (even breed als hoog) met het logo vullend
   en de playknop linksonder. */
.tile { position:relative; display:flex; flex-direction:column; border-radius:26px; overflow:hidden; background:var(--c); color:#fff; box-shadow:0 2px 10px rgba(20,20,30,.07); transition:transform .18s ease, box-shadow .18s ease; }
.tile-band-name { color:inherit; text-decoration:none; }
.tile-band-name:hover { text-decoration:underline; text-underline-offset:2px; }
.tile-info { flex:none; width:1.3rem; height:1.3rem; border-radius:50%; border:2px solid var(--lil); color:#5555a6; display:grid; place-items:center; font-weight:900; font-size:.78rem; font-style:italic; text-decoration:none; line-height:1; }
.tile-info:hover { background:var(--lil); color:#000; }
.tile-main { flex:1; }
.tile:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(20,20,30,.22); }
.tile-main { position:relative; display:flex; flex-direction:column; width:100%; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer; background:var(--c); }
.tile-main:focus-visible { outline:3px solid #5555a6; outline-offset:-3px; }
.tile-main.on .tile-play-ico { background:var(--lil); color:#fff; }
.tile-main.on .tile-play .ico { clip-path:none; background:transparent; width:auto; height:auto; transform:none; display:flex; align-items:center; gap:.17rem; }
.tile-main.on .tile-play .ico::before, .tile-main.on .tile-play .ico::after { content:''; width:.21rem; height:.78rem; border-radius:.1rem; background:currentColor; }
@media (prefers-reduced-motion:reduce) { .tile { transition:none; } }
.tile-band { background:#fff; color:#14151a; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .7rem; flex:none; }
.tile-band-name { font-weight:900; font-size:1.05rem; line-height:1.1; letter-spacing:-.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile-art { width:100%; aspect-ratio:1/1; display:grid; place-items:center; padding:1rem; }
.tile-logo-wrap { position:relative; width:100%; aspect-ratio:1/1; display:block; }
.tile-logo-full { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.tile-art-name { color:#fff; font-weight:900; font-size:1.9rem; line-height:.95; letter-spacing:-.045em; text-align:center; }
.tile-play { position:absolute; left:1.1rem; bottom:1.1rem; z-index:2; display:inline-flex; align-items:center; }
.tile-play-ico { width:2.15rem; height:2.15rem; border-radius:50%; background:#fff; color:var(--lil); display:grid; place-items:center; font-size:.78rem; box-shadow:0 5px 14px rgba(0,0,0,.22); flex:none; transition:transform .15s ease, background .15s ease, color .15s ease; }
.tile-play .ico { width:.62rem; height:.72rem; background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%); transform:translateX(.08rem); flex:none; }
.tile-main:hover .tile-play-ico { background:var(--lil); color:#fff; transform:scale(1.07); }
.play { font:inherit; background:var(--lil); color:#000; border:0; cursor:pointer; min-width:3rem; min-height:3rem; font-weight:900; font-size:1rem; }
.play:hover { background:#fff; }
.play.on { background:#fff; }
.play .ico { width:.85rem; height:.98rem; background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%); flex:none; }
.play.on .ico { clip-path:none; background:transparent; width:auto; height:auto; display:flex; align-items:center; gap:.22rem; }
.play.on .ico::before, .play.on .ico::after { content:''; width:.26rem; height:1rem; border-radius:.1rem; background:currentColor; }
.play.big { font-size:1.2rem; padding:.9rem 1.6rem; display:inline-flex; gap:.6rem; align-items:center; }
.play.big::after { content:'Luister'; font-family:'DM Sans',Arial,Helvetica,sans-serif; letter-spacing:-.02em; }
.play:focus-visible, .pbtn:focus-visible, a:focus-visible, input:focus-visible, .pclose:focus-visible { outline:3px solid #5555a6; outline-offset:2px; }
.ad-slot { max-width:1200px; margin:0 auto 2.5rem; padding:0 1.2rem; }
.ad-slot ins { background:#e4e4e9; min-height:110px; }
.ad-label { display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mute); margin-bottom:.3rem; }
.consent { position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:30; max-width:44rem; margin:0 auto; background:#14151a; color:#fff; border-radius:18px; padding:1.1rem 1.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; box-shadow:0 18px 44px rgba(0,0,0,.35); }
.consent[hidden] { display:none; }
.consent p { margin:0; flex:1 1 18rem; font-size:.92rem; line-height:1.45; }
.consent a { color:var(--lil); }
.consent-btns { display:flex; gap:.6rem; flex-wrap:wrap; }
.consent-btns button { font:inherit; font-weight:700; cursor:pointer; border-radius:999px; padding:.6rem 1.1rem; border:2px solid #fff; }
.consent-all { background:var(--lil); border-color:var(--lil); color:#000; }
.consent-min { background:transparent; color:#fff; }
.block-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.block-head h2 { margin:0; }
.all-genres { font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:-.02em; color:var(--fg); text-decoration:none; }
.all-genres:hover { color:#5555a6; text-decoration:underline; text-underline-offset:3px; }
.genre-list { list-style:none; margin:.8rem 0 0; padding:0; border-bottom:2px solid #d8d8de; }
.genre-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.12rem 0; border-top:2px solid #d8d8de; text-decoration:none; color:var(--fg); }
.genre-word { position:relative; z-index:0; display:inline-block; font-weight:800; font-size:clamp(1.75rem,4.6vw,3.1rem); line-height:1.02; letter-spacing:-.045em; padding:0 .08em; }
.genre-word::before { content:''; position:absolute; z-index:-1; left:-.05em; right:-.05em; top:.07em; bottom:.07em; background:var(--lil); transform:scaleX(0); transform-origin:left center; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.genre-row:hover .genre-word::before, .genre-row:focus-visible .genre-word::before { transform:scaleX(1); }
.genre-arrow { flex:none; font-size:clamp(1.25rem,3vw,1.9rem); font-weight:700; color:#9a9aa5; transition:transform .25s ease, color .25s ease; }
.genre-row:hover .genre-arrow, .genre-row:focus-visible .genre-arrow { transform:translateX(.35rem); color:var(--fg); }
@media (prefers-reduced-motion:reduce) { .genre-word::before, .genre-arrow { transition:none; } }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; }
.filters a { padding:.45rem .8rem; text-decoration:none; font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:700; font-size:.9rem; letter-spacing:-.02em; border:2px solid var(--fg); }
.filters a:hover { border-color:var(--lil); }
.filters a[aria-current] { background:var(--lil); color:#000; border-color:var(--lil); }
.station { color:#fff; background:var(--c); margin:1.5rem 1.2rem; padding:2rem 1.2rem; }
.crumb { margin:0 0 1rem; }
.station-head { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.station-logo { width:10rem; height:10rem; object-fit:cover; border-radius:22px; box-shadow:0 10px 26px rgba(20,21,26,.16); flex:none; background:#fff; }
.station-title { flex:1; min-width:16rem; }
.share { color:var(--mute); }
.share a { margin-left:.5rem; font-weight:700; }
.station-title .h1s { margin:0 0 .5rem; }
.facts-light { border-top:2px solid var(--fg); max-width:44rem; }
.facts-light dt, .facts-light dd { border-bottom:2px solid #cfcfd8; }
.seo-text { max-width:44rem; }
.faq h3 { font-size:1.08rem; letter-spacing:-.02em; margin:1.3rem 0 .3rem; }
.faq p { margin:0; }
.bigfreq { font-size:1.2rem; }
.tag { background:#000; color:#fff; padding:.15rem .5rem; font-size:.7rem; text-transform:uppercase; margin-left:.5rem; vertical-align:middle; }
.station .lead { color:#fff; }
.station a { text-underline-offset:3px; }
.facts { display:grid; grid-template-columns:7rem 1fr; border-top:2px solid #fff; margin-top:1.5rem; }
.facts dt, .facts dd { margin:0; padding:.6rem 0; border-bottom:2px solid rgba(255,255,255,.5); }
.facts dt { font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:600; font-size:.8rem; text-transform:uppercase; }
.station .play.big { background:#fff; color:#000; }
.prose { max-width:40rem; } .prose h2 { margin-top:1.8rem; } code { background:var(--lil); color:#000; padding:0 .3rem; font-size:.85em; }
.player { position:fixed; left:0; right:0; bottom:0; display:flex; align-items:center; gap:1rem; padding:.7rem 1.2rem; background:#e1e1e5; color:var(--fg); border-top:2px solid #b4b4c4; z-index:10; }
.player[hidden] { display:none; }
.pbtn { position:relative; width:3.4rem; height:3.4rem; background:var(--lil); color:#000; border:0; font-size:1.2rem; font-weight:900; cursor:pointer; padding:0; overflow:hidden; flex:none; }
#p-logo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
#p-logo[hidden] { display:none; }
#p-ico { position:relative; display:inline-flex; align-items:center; justify-content:center; }
#p-ico::before { content:''; width:.85rem; height:.98rem; background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%); transform:translateX(.07rem); }
#p-ico.is-pause { gap:.16rem; }
#p-ico.is-pause::before { clip-path:none; transform:none; width:.22rem; height:.85rem; border-radius:.1rem; }
#p-ico.is-pause::after { content:''; width:.22rem; height:.85rem; border-radius:.1rem; background:currentColor; }
.pbtn.has-logo #p-ico { position:absolute; right:.22rem; bottom:.22rem; width:1.15rem; height:1.15rem; border-radius:50%; background:#fff; color:var(--lil); display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.pbtn.has-logo #p-ico::before { width:.5rem; height:.58rem; }
.pbtn.has-logo #p-ico.is-pause { display:flex; gap:.11rem; }
.pbtn.has-logo #p-ico.is-pause::before, .pbtn.has-logo #p-ico.is-pause::after { width:.15rem; height:.58rem; }
.pinfo { display:flex; flex-direction:column; flex:1; min-width:0; } .pinfo strong { font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:700; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pinfo span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pinfo .mono { color:#5555a6; }
.vol { font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:600; font-size:.75rem; text-transform:uppercase; display:flex; gap:.5rem; align-items:center; }
.vol input { accent-color:var(--lil); width:6rem; }
.pclose { background:transparent; color:var(--fg); border:2px solid #b4b4c4; font-family:'DM Sans',Arial,Helvetica,sans-serif; font-weight:600; text-transform:uppercase; font-size:.75rem; padding:.6rem .8rem; cursor:pointer; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:1rem; margin:0 0 1.2rem; }
.stat { background:var(--bg2); padding:1rem; }
.stat b { display:block; font-size:2rem; letter-spacing:-.04em; line-height:1; margin-bottom:.35rem; }
.stat span, .bars .mono { color:var(--mute); font-weight:500; }
.bars { list-style:none; padding:0; margin:1.2rem 0 0; }
.bars li { margin:0 0 1rem; }
.bars .row { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.bars .row a { font-weight:700; text-decoration:none; }
.bars .row a:hover { text-decoration:underline; }
.bar { height:.55rem; background:#fff; margin-top:.35rem; }
.bars .bar span { background:var(--lil); }
.vt-head, .vt-row { display:grid; grid-template-columns:1fr 7rem 6rem 7rem; gap:1rem; align-items:baseline; }
.vt-head { color:var(--mute); font-size:.72rem; text-transform:uppercase; margin-top:1.2rem; }
.vt-head span:not(:first-child), .vt-row span { text-align:right; font-variant-numeric:tabular-nums; }
.vt-row a { font-weight:700; text-decoration:none; }
.vt-row a:hover { text-decoration:underline; }
@media (max-width:560px) { .vt-head, .vt-row { grid-template-columns:1fr 5rem 4.5rem 5.5rem; gap:.5rem; font-size:.85rem; } }
.bar span { display:block; height:100%; min-width:2px; }
.admin-list { list-style:none; padding:0; margin:1rem 0 0; }
.admin-list a { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.9rem 0; text-decoration:none; }
.admin-list li { border-bottom:2px solid var(--bg2); }
.admin-list strong { font-size:1.15rem; letter-spacing:-.03em; }
.form { display:grid; gap:.9rem; max-width:36rem; }
.form label, .checks { display:grid; gap:.35rem; font-weight:700; }
.checks { border:0; margin:0; padding:0; }
.checks legend { font-weight:700; padding:0; margin-bottom:.2rem; }
.form input[type=text], .form input[type=url], .form input[type=password], .form input[type=number], .form textarea { font:inherit; padding:.7rem .8rem; border:2px solid var(--fg); background:#fff; width:100%; }
.form textarea { min-height:6rem; resize:vertical; }
.check { display:flex; align-items:center; gap:.6rem; font-weight:600; }
.check input { width:1.2rem; height:1.2rem; accent-color:#5555a6; }
.btn { display:inline-block; font:inherit; font-weight:700; background:var(--lil); color:#000; border:0; padding:.8rem 1.1rem; cursor:pointer; min-height:3rem; text-decoration:none; line-height:1.2; }
.btn:hover { background:#fff; }
.admin-actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.form-error { background:#c8102e; color:#fff; padding:.7rem 1rem; font-weight:700; }
.foot { max-width:1200px; margin:1.6rem auto 0; padding:.55rem 1.2rem .7rem; border-top:2px solid var(--bg2); font-size:.66rem; color:var(--mute); display:flex; flex-wrap:wrap; gap:.2rem 1.2rem; justify-content:space-between; }
.foot-links { display:flex; flex-wrap:wrap; gap:.4rem 1rem; }
.foot a { color:inherit; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.btn-min { background:#e4e4ea; color:#14151a; min-height:2.4rem; padding:.5rem .9rem; }
.btn-min:hover { background:#fff; }
.subs { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.sub { display:flex; gap:1.1rem; align-items:flex-start; background:#fff; border-radius:18px; padding:1rem; box-shadow:0 2px 10px rgba(20,21,26,.07); }
.sub-afgewezen { opacity:.55; }
.sub-logo { width:5.5rem; height:5.5rem; object-fit:cover; border-radius:12px; flex:none; background:#e4e4ea; }
.sub-logo-leeg { display:grid; place-items:center; font-size:.7rem; color:var(--mute); text-align:center; }
.sub-info { flex:1; display:grid; gap:.2rem; min-width:0; }
.sub-msg { margin:.35rem 0; line-height:1.5; }
.form textarea[name="message"] { min-height:9rem; }
.form input[type=email] { font:inherit; padding:.7rem .8rem; border:2px solid var(--fg); background:#fff; width:100%; }
.sub-info .mono { word-break:break-all; font-size:.8rem; }
.sub-status { text-transform:capitalize; font-weight:700; color:#5555a6; font-size:.78rem; }
.sub-date { color:var(--mute); }
.sub-actions { display:grid; gap:.5rem; flex:none; }
.sub-actions form { margin:0; }
.flash { background:var(--lil); color:#000; padding:.7rem 1rem; font-weight:700; }
.logo-preview { width:9rem; height:9rem; object-fit:contain; background:#fff; border:2px solid var(--fg); }
.logo-row { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.logo-actions { display:grid; gap:.55rem; justify-items:start; }
.btn-light { background:#e4e4ea; }
.btn-light:hover { background:#fff; }
.modal { position:fixed; inset:0; z-index:60; background:rgba(23,24,32,.55); display:grid; place-items:center; padding:1rem; }
.modal[hidden] { display:none; }
.modal-card { background:var(--bg); color:var(--fg); border-radius:18px; padding:1.3rem; width:min(26rem,94vw); max-height:92vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.35); display:grid; gap:.8rem; }
.modal-title { margin:0; font-size:1.45rem; letter-spacing:-.02em; }
.modal-card #logo-stage { justify-self:center; }
.modal-actions { display:flex; gap:.7rem; flex-wrap:wrap; }
.admin-list li { display:flex; align-items:center; gap:1rem; }
.admin-list li > a:first-child { flex:1; }
.admin-logo-link { font-weight:700; color:#5555a6; white-space:nowrap; }
#logo-stage { position:relative; width:min(20rem,78vw); aspect-ratio:1/1; overflow:hidden; background:#fff; border:2px solid var(--fg); touch-action:none; cursor:grab; }
#logo-stage::after { content:''; position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(to right, transparent calc(33.33% - 1px), rgba(20,20,30,.35) 33.33%, transparent calc(33.33% + 1px)),
  linear-gradient(to right, transparent calc(66.66% - 1px), rgba(20,20,30,.35) 66.66%, transparent calc(66.66% + 1px)),
  linear-gradient(to bottom, transparent calc(33.33% - 1px), rgba(20,20,30,.35) 33.33%, transparent calc(33.33% + 1px)),
  linear-gradient(to bottom, transparent calc(66.66% - 1px), rgba(20,20,30,.35) 66.66%, transparent calc(66.66% + 1px)); }
#logo-stage:active { cursor:grabbing; }
#logo-img { position:absolute; left:0; top:0; max-width:none; user-select:none; -webkit-user-drag:none; }
#logo-crop { display:grid; gap:.7rem; }
#logo-crop[hidden] { display:none; }
@media (max-width:900px) {
  }
@media (max-width:560px) {
  .bars .row, .admin-list a { flex-direction:column; gap:.15rem; }
      .vol input { width:4rem; } .vol { font-size:0; } .vol input { font-size:1rem; }
  .top nav a { margin-right:.8rem; }
}