:root{
 --bg:#0b0d10;--panel:#14171c;--panel2:#1a1e24;--text:#f5f7fa;--muted:#929aa6;
 --line:rgba(255,255,255,.09);--gold:#d9b36c;--radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at top right,#29200f 0,transparent 34%),linear-gradient(180deg,#090b0d,#101318 55%,#090b0d);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh;padding-bottom:105px}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,64px);border-bottom:1px solid var(--line);background:rgba(9,11,13,.86);backdrop-filter:blur(18px);position:sticky;top:0;z-index:30}
.brand{display:flex;gap:12px;align-items:center}.brand-mark,.logo,.mini-logo{display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#222831,#101216);border:1px solid rgba(217,179,108,.28);color:var(--gold);box-shadow:inset 0 0 25px rgba(217,179,108,.08)}
.brand-mark{width:43px;height:43px;font-size:22px}.brand strong{display:block}.brand small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.topbar nav{display:flex;gap:22px}.topbar nav a{color:#cdd2d9;font-size:14px}
main{width:min(1240px,calc(100% - 32px));margin:auto}
.hero{display:grid;grid-template-columns:1.5fr .8fr;gap:34px;align-items:center;padding:68px 0 46px}.eyebrow{color:var(--gold);font-weight:800;letter-spacing:.16em;font-size:11px}.hero h1{font-size:clamp(34px,5vw,66px);line-height:1.01;max-width:850px;margin:10px 0 18px}.hero p{color:#aab1bc;font-size:17px;line-height:1.6;max-width:760px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hero-stats div{background:rgba(255,255,255,.035);border:1px solid var(--line);padding:22px 10px;border-radius:16px;text-align:center}.hero-stats b{display:block;font-size:28px}.hero-stats span{color:var(--muted);font-size:12px}
.toolbar{display:grid;grid-template-columns:1fr 210px auto;gap:12px;margin-bottom:25px}.search-wrap{position:relative}.search-wrap span{position:absolute;left:16px;top:12px;color:#777;font-size:22px}.search-wrap input{padding-left:44px!important}
input,select{width:100%;background:#11151a;color:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;outline:none}input:focus,select:focus{border-color:rgba(217,179,108,.55);box-shadow:0 0 0 3px rgba(217,179,108,.08)}
button{border:0;background:linear-gradient(135deg,#d9b36c,#aa7d35);color:#111;font-weight:800;border-radius:12px;padding:12px 16px;cursor:pointer;transition:.2s transform,.2s opacity}button:hover{transform:translateY(-1px)}button.secondary{background:#171b21;color:#e8ebef;border:1px solid var(--line)}button.danger{background:#2a1517;color:#ffb8bd;border:1px solid rgba(255,80,90,.2)}
.station-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.station-card{background:linear-gradient(180deg,rgba(26,30,36,.96),rgba(17,20,25,.96));border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.18)}.station-card:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--accent)}
.station-head{display:grid;grid-template-columns:54px 1fr auto;gap:13px;align-items:center}.logo{width:54px;height:54px;overflow:hidden}.logo img{width:100%;height:100%;object-fit:cover}.station-title h2{font-size:18px;margin:0 0 5px}.station-title p{margin:0;color:var(--muted);font-size:13px}.fav-btn{width:40px;height:40px;padding:0;border-radius:50%;background:#101318;color:#cfd4db;border:1px solid var(--line);font-size:21px}.fav-btn.active{color:#ffcf68}
.nowplaying{margin:22px 0;background:#0e1115;border:1px solid rgba(255,255,255,.055);border-radius:14px;padding:15px}.nowplaying small{display:block;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.14em;margin-bottom:6px}.nowplaying strong,.nowplaying span{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nowplaying strong{font-size:15px}.nowplaying span{font-size:13px;color:var(--muted);margin-top:3px}
.station-meta{display:flex;justify-content:space-between;color:#aab0b8;font-size:12px;margin-bottom:16px}.status{display:flex;align-items:center;gap:7px}.status i{width:8px;height:8px;border-radius:50%;background:#777}.status.online i{background:#40d889;box-shadow:0 0 10px rgba(64,216,137,.65)}.status.offline i{background:#ec6570}.actions{display:flex;gap:9px}.actions button{flex:1}
.empty{text-align:center;padding:60px;color:var(--muted)}
.playerbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;width:min(1000px,calc(100% - 28px));z-index:50;background:rgba(18,21,26,.93);backdrop-filter:blur(20px);border:1px solid rgba(217,179,108,.18);border-radius:20px;padding:13px 17px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;box-shadow:0 25px 80px rgba(0,0,0,.48)}.player-info{display:flex;align-items:center;gap:11px;min-width:0}.mini-logo{width:44px;height:44px}.player-info small,.player-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-info small{color:var(--gold);font-size:11px}.player-info strong{font-size:13px;max-width:330px;margin-top:3px}.player-controls{display:flex;gap:8px;align-items:center}.player-controls button{background:transparent;color:#eee;padding:7px 9px}.player-controls .main-play{background:linear-gradient(135deg,#e0ba73,#a77b36);color:#111;width:48px;height:48px;border-radius:50%;font-size:17px}.volume{display:flex;justify-content:flex-end;align-items:center;gap:8px}.volume input{width:120px;padding:0;accent-color:var(--gold)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:80;display:grid;place-items:center;padding:20px}.modal-card{width:min(980px,100%);background:#11151a;border:1px solid var(--line);border-radius:20px;padding:20px;position:relative;max-height:90vh;overflow:auto}.close-modal{position:absolute;right:12px;top:12px;width:38px;height:38px;padding:0;background:#20252c;color:#fff}
.admin-main{padding-top:34px}.login-card,.admin-panel{background:rgba(20,23,28,.97);border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:18px}.login-card{max-width:520px;margin:60px auto}.login-card label,.editor-grid label{display:block;color:#c7ccd4;font-size:13px;margin-bottom:14px}.login-card input,.editor-grid input{margin-top:7px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.panel-head h1{margin:5px 0}.admin-list{display:grid;gap:10px}.admin-row{display:grid;grid-template-columns:1fr auto auto;gap:15px;align-items:center;background:#101318;border:1px solid var(--line);padding:15px;border-radius:13px}.admin-row strong,.admin-row span{display:block}.admin-row span{color:var(--muted);font-size:12px;margin-top:4px}.row-actions{display:flex;gap:8px}.row-actions form{margin:0}.row-state{font-size:11px;font-weight:900;text-transform:uppercase}.row-state.on{color:#51df92}.row-state.off{color:#ee7b84}.alert{padding:13px 15px;border-radius:12px;margin-bottom:16px}.alert.error{background:#30171a;color:#ffb9c0}.alert.success{background:#123022;color:#a4f3c5}.warning-panel{border-color:rgba(217,179,108,.4)}.inline-form{display:flex;gap:10px}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}.editor-grid .full{grid-column:1/-1}.editor-grid .check{display:flex;align-items:center;gap:8px;background:#0e1115;border-radius:10px;padding:12px}.editor-grid .check input{width:auto;margin:0}.station-editor{max-width:820px}
@media(max-width:900px){.hero{grid-template-columns:1fr}.station-grid{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr 1fr}.toolbar .search-wrap{grid-column:1/-1}.playerbar{grid-template-columns:1fr auto}.volume{display:none}}
@media(max-width:650px){body{padding-bottom:115px}.topbar{height:auto;min-height:68px;padding:10px 16px}.topbar nav{gap:10px}.topbar nav a{font-size:12px}.hero{padding:38px 0 30px}.hero-stats{grid-template-columns:repeat(3,1fr)}.station-grid{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr}.toolbar .search-wrap{grid-column:auto}.playerbar{bottom:8px;width:calc(100% - 14px);padding:10px}.player-info strong{max-width:160px}.player-controls button:not(.main-play){display:none}.admin-row{grid-template-columns:1fr}.row-actions{justify-content:flex-start}.editor-grid{grid-template-columns:1fr}.editor-grid .full{grid-column:auto}.inline-form{flex-direction:column}.brand small{display:none}}

.request-modal-card{max-width:780px;min-height:300px}
.request-modal-card h2{margin:7px 0 2px;font-size:26px}
.request-station-name{color:var(--gold);margin:0 0 18px;font-weight:800}
.request-search-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.request-info{margin:14px 0;padding:12px 14px;border-radius:12px;background:#0d1014;border:1px solid var(--line);color:#aeb5bf;font-size:13px}
.request-info.error{background:#291417;border-color:rgba(236,101,112,.25);color:#ffb9c0}
.request-info.success{background:#10271b;border-color:rgba(64,216,137,.25);color:#a9f3c7}
.request-results{display:grid;gap:9px;max-height:48vh;overflow:auto;padding-right:3px}
.request-result{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;background:#0e1115;border:1px solid var(--line);padding:10px;border-radius:13px}
.request-art{width:54px;height:54px;display:grid;place-items:center;border-radius:10px;overflow:hidden;background:#171b21;color:var(--gold);font-size:20px}
.request-art img{width:100%;height:100%;object-fit:cover}
.request-song-info{min-width:0}
.request-song-info strong,.request-song-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.request-song-info strong{font-size:14px}
.request-song-info span{font-size:12px;color:var(--muted);margin-top:4px}
.request-send-btn{min-width:106px}
.request-fallback{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:12px}
.request-fallback p{margin:0 0 8px}
.request-fallback a{color:var(--gold);font-weight:800}
@media(max-width:650px){
  .request-search-row{grid-template-columns:1fr}
  .request-result{grid-template-columns:48px 1fr}
  .request-art{width:48px;height:48px}
  .request-send-btn{grid-column:1/-1;width:100%}
}

textarea{width:100%;background:#11151a;color:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;resize:vertical;font:inherit}
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 16px;font-weight:800}
.button.secondary{background:#171b21;color:#e8ebef;border:1px solid var(--line)}
.station-description{color:var(--muted);font-size:13px;line-height:1.5;margin:14px 0 -6px}
.actions{flex-wrap:wrap}.actions .button,.actions button{flex:1;min-width:110px}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.status-grid>div{background:#0f1317;border:1px solid var(--line);border-radius:12px;padding:13px}
.status-grid b,.status-grid span{display:block}.status-grid span{font-size:12px;margin-top:5px}
.good{color:#55dd95}.bad{color:#ef7983}
.editor-section{margin-top:8px;background:#0d1014;border:1px solid var(--line);padding:13px;border-radius:12px}
.editor-section h3{margin:0 0 4px}.editor-section p{margin:0;color:var(--muted);font-size:12px}
code{color:var(--gold)}
@media(max-width:800px){.status-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.status-grid{grid-template-columns:1fr}}

.auth-main{width:min(760px,calc(100% - 28px));margin:auto;padding-top:34px}
.muted-link{color:var(--muted);font-size:13px}.muted-link a{color:var(--gold)}
.helptext{color:var(--muted);line-height:1.6}
.dashboard-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.dashboard-cards>div{background:linear-gradient(180deg,#171b21,#101318);border:1px solid var(--line);border-radius:16px;padding:20px}
.dashboard-cards b{display:block;font-size:28px;color:var(--gold)}.dashboard-cards span{font-size:12px;color:var(--muted)}
.request-admin-row{grid-template-columns:1fr auto}.request-admin-row small{display:block;color:#7f8792;margin-top:6px;word-break:break-all}
.top-gap{margin-top:12px}.log-box{max-height:320px;overflow:auto;background:#0d1014;border:1px solid var(--line);border-radius:12px;padding:12px}
.log-box div{padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px;color:#aeb5bf}
@media(max-width:850px){.dashboard-cards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.dashboard-cards{grid-template-columns:1fr}.topbar nav{flex-wrap:wrap}}

.station-banner{height:120px;margin:-20px -20px 18px;overflow:hidden;border-bottom:1px solid var(--line);background:#0d1014}
.station-banner img{width:100%;height:100%;object-fit:cover;display:block}
.external-players{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.external-players a{font-size:11px;font-weight:800;color:var(--gold);background:#0d1014;border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.station-admin-editor{background:#0f1317;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.station-admin-editor summary{cursor:pointer;padding:15px 16px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.station-admin-editor summary span{color:var(--muted);font-size:12px}
.station-full-form{padding:16px;border-top:1px solid var(--line)}
.mobile-player-page{padding:0;min-height:100vh;display:grid;place-items:center}
.mobile-station-shell{width:min(480px,100%);min-height:100vh;background:#0d1014}
.mobile-banner{width:100%;height:180px;object-fit:cover;display:block}
.mobile-station-card{padding:28px 20px;text-align:center}
.mobile-logo{width:96px;height:96px;border-radius:22px;background:#171b21;border:1px solid var(--line);margin:-66px auto 16px;position:relative;display:grid;place-items:center;overflow:hidden;font-size:32px;color:var(--gold)}
.mobile-logo img{width:100%;height:100%;object-fit:cover}
.mobile-station-card h1{margin:8px 0}.mobile-station-card p{color:var(--muted)}
.mobile-station-card audio{width:100%;margin:18px 0}.mobile-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:650px){.station-banner{height:100px}.station-admin-editor summary{align-items:flex-start;flex-direction:column}}

/* V6 PROFESSIONAL UI */
body{background:
radial-gradient(circle at 80% -10%,rgba(217,179,108,.16),transparent 32%),
radial-gradient(circle at 0 30%,rgba(71,83,103,.12),transparent 26%),
linear-gradient(180deg,#080a0d 0%,#0c0f13 45%,#090b0e 100%);
}
.pro-topbar{box-shadow:0 12px 45px rgba(0,0,0,.22)}
.pro-hero{min-height:510px;padding-top:76px;padding-bottom:70px}
.pro-hero h1{max-width:760px;letter-spacing:-.04em}
.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.pro-stats{align-self:end}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:34px 0 18px}
.section-head h2{font-size:30px;margin:6px 0 0;letter-spacing:-.025em}
.section-head p{color:var(--muted);margin:0}
.featured-section{margin-bottom:42px}
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.featured-card{min-height:220px;border-radius:20px;overflow:hidden;position:relative;border:1px solid var(--line);background:#11151a;box-shadow:0 24px 60px rgba(0,0,0,.22)}
.featured-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.featured-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.82))}
.featured-card:after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--accent)}
.featured-inner{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;gap:12px;z-index:2}
.featured-logo{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(12,15,19,.88);border:1px solid rgba(255,255,255,.12);overflow:hidden;color:var(--gold);font-size:20px}
.featured-logo img{width:100%;height:100%;object-fit:cover}
.featured-inner span{font-size:11px;color:#c6ccd4}.featured-inner h3{font-size:20px;margin:3px 0 0}
.genre-strip{display:flex;gap:9px;overflow:auto;padding:2px 0 20px;scrollbar-width:thin}
.genre-chip{white-space:nowrap;background:#11151a;color:#d9dde3;border:1px solid var(--line);display:flex;gap:12px;align-items:center}
.genre-chip b{background:#20252d;border-radius:999px;padding:3px 8px;font-size:10px;color:var(--gold)}
.stations-heading{margin-top:26px}
.join-section{margin:56px 0 12px;padding:30px;border:1px solid rgba(217,179,108,.22);border-radius:22px;background:linear-gradient(135deg,rgba(217,179,108,.08),rgba(255,255,255,.025));display:flex;justify-content:space-between;gap:24px;align-items:center}
.join-section h2{margin:5px 0 10px;font-size:30px}.join-section p{margin:0;color:var(--muted);max-width:760px;line-height:1.6}
.station-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.station-card:hover{transform:translateY(-3px);border-color:rgba(217,179,108,.22);box-shadow:0 26px 70px rgba(0,0,0,.28)}
.station-card .actions .button,.station-card .actions button{font-size:12px}
.station-profile-main{width:min(1180px,calc(100% - 30px));margin:auto;padding:35px 0}
.station-profile-hero{min-height:330px;border-radius:26px;overflow:hidden;position:relative;background:#14171c;border:1px solid var(--line)}
.profile-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,12,.94),rgba(7,9,12,.58) 58%,rgba(7,9,12,.28))}
.profile-content{position:absolute;inset:auto 34px 32px;display:flex;align-items:end;gap:18px}
.profile-logo{width:100px;height:100px;border-radius:22px;overflow:hidden;display:grid;place-items:center;background:#101318;border:1px solid rgba(255,255,255,.12);font-size:34px;color:var(--accent);box-shadow:0 18px 45px rgba(0,0,0,.35)}
.profile-logo img{width:100%;height:100%;object-fit:cover}
.profile-copy{flex:1}.profile-copy h1{font-size:42px;margin:5px 0 8px}.profile-copy p{margin:0;color:#c1c7ce;max-width:700px}
.profile-live-badge{align-self:flex-start;background:#d84f58;color:#fff;font-weight:900;font-size:11px;border-radius:999px;padding:8px 12px;letter-spacing:.08em}
.profile-live-badge i{display:inline-block;width:7px;height:7px;background:#fff;border-radius:50%;margin-right:5px}
.profile-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:18px}
.pro-player,.profile-info-card{background:#13171c;border:1px solid var(--line);border-radius:18px;padding:20px}
.pro-player-top{display:flex;justify-content:space-between;gap:20px}.pro-player-top h2{margin:5px 0 2px}.pro-player-top p{margin:0;color:var(--muted)}
.detail-status{font-size:12px;color:var(--muted)}.detail-status.online{color:#4cdb91}.detail-status.offline{color:#ec6570}
.pro-controls{display:flex;align-items:center;justify-content:space-between;margin-top:24px}
.big-play{width:58px;height:58px;border-radius:50%;font-size:18px}.detail-volume{display:flex;align-items:center;gap:9px}.detail-volume input{width:160px;padding:0}
.profile-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.profile-sidebar{display:grid;gap:12px;align-content:start}.profile-info-card h3{margin:0 0 14px}
.profile-info-card>div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.profile-info-card>div:last-child{border-bottom:0}.profile-info-card span{color:var(--muted);font-size:12px}.profile-info-card b{font-size:12px;text-align:right}
.admin-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.admin-quick-grid a{background:#0f1317;border:1px solid var(--line);border-radius:14px;padding:18px}.admin-quick-grid b{display:block;font-size:25px;color:var(--gold)}.admin-quick-grid span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.client-dashboard-cards{margin-top:0}
@media(max-width:1000px){.featured-grid{grid-template-columns:1fr 1fr}.profile-grid{grid-template-columns:1fr}.profile-sidebar{grid-template-columns:1fr 1fr}.admin-quick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.featured-grid{grid-template-columns:1fr}.join-section{align-items:flex-start;flex-direction:column}.profile-content{left:18px;right:18px;bottom:20px;align-items:flex-start;flex-direction:column}.profile-copy h1{font-size:31px}.profile-logo{width:78px;height:78px}.profile-live-badge{position:absolute;right:0;top:0}.profile-sidebar{grid-template-columns:1fr}.pro-player-top{flex-direction:column}.detail-volume input{width:120px}}

/* V7 DELUXE – visitor, admin and customer polish */
.portal-hero{position:relative;min-height:440px;margin:28px 0 30px;border:1px solid rgba(217,179,108,.2);border-radius:26px;overflow:hidden;background:#0d1014;box-shadow:0 30px 90px rgba(0,0,0,.32)}
.portal-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portal-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,10,.93) 0%,rgba(5,7,10,.68) 48%,rgba(5,7,10,.28) 100%)}
.portal-hero-content{position:absolute;left:42px;bottom:48px;z-index:2;max-width:600px}
.portal-hero-content h1{font-size:clamp(40px,6vw,72px);line-height:.98;margin:7px 0 15px;letter-spacing:-.045em}
.portal-hero-content p{font-size:17px;line-height:1.55;color:#d1d6dd;max-width:560px}
.glass-button{background:rgba(15,18,23,.74)!important;backdrop-filter:blur(12px)}
.portal-hero-stats{position:absolute;right:24px;bottom:24px;z-index:2;display:flex;gap:8px}
.portal-hero-stats div{min-width:105px;padding:14px 15px;border-radius:14px;background:rgba(10,13,17,.8);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);text-align:center}
.portal-hero-stats b{display:block;font-size:22px;color:#fff}.portal-hero-stats span{display:block;font-size:10px;color:#aeb5bf;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.visitor-quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 38px}
.visitor-quick-actions>a{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#14181e,#0e1115);border:1px solid var(--line);border-radius:15px;padding:15px;transition:.2s}
.visitor-quick-actions>a:hover{transform:translateY(-2px);border-color:rgba(217,179,108,.35)}
.quick-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(217,179,108,.09);border:1px solid rgba(217,179,108,.18);color:var(--gold);font-size:18px}
.visitor-quick-actions b,.visitor-quick-actions small{display:block}.visitor-quick-actions b{font-size:13px}.visitor-quick-actions small{color:var(--muted);font-size:10px;margin-top:3px;line-height:1.3}
.how-section{margin:55px 0 26px}.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.how-grid>div{background:#11151a;border:1px solid var(--line);border-radius:16px;padding:20px}.how-grid>div>span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(217,179,108,.1);color:var(--gold);font-weight:900}.how-grid h3{margin:13px 0 7px}.how-grid p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.portal-info-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:40px}.portal-info-strip>div{background:#0f1317;padding:16px}.portal-info-strip b,.portal-info-strip span{display:block}.portal-info-strip b{font-size:13px;color:var(--gold)}.portal-info-strip span{font-size:10px;color:var(--muted);margin-top:4px}
.portal-footer{margin-top:50px;padding:28px 0 10px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center;color:var(--muted);font-size:12px}.portal-footer strong{color:#fff;font-size:15px}.portal-footer p{margin:4px 0 0}.portal-footer>div:nth-child(2){display:flex;gap:16px}.portal-footer>div:last-child{text-align:right}
.account-hero,.admin-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px;border-radius:20px;background:linear-gradient(135deg,rgba(217,179,108,.1),rgba(255,255,255,.025));border:1px solid rgba(217,179,108,.22);margin-bottom:18px}.account-hero h1,.admin-hero h1{font-size:32px;margin:5px 0 8px}.account-hero p,.admin-hero p{margin:0;color:var(--muted);max-width:720px;line-height:1.5}
.customer-scope-card{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.customer-scope-card>div{background:#101318;border:1px solid var(--line);border-radius:14px;padding:16px}.customer-scope-card b,.customer-scope-card span{display:block}.customer-scope-card span{color:var(--muted);font-size:12px;margin-top:5px;line-height:1.5}
.station-user-stats{display:flex;gap:8px;flex-wrap:wrap}.station-user-stats span{font-size:10px!important;background:#0d1014;border:1px solid var(--line);padding:6px 8px;border-radius:999px;margin:0!important}
.admin-hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-section-nav{display:flex;gap:8px;flex-wrap:wrap;position:sticky;top:87px;z-index:20;background:rgba(9,11,14,.88);backdrop-filter:blur(16px);padding:10px;border:1px solid var(--line);border-radius:14px;margin-bottom:18px}.admin-section-nav a{background:#12161b;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:11px;font-weight:800}.admin-section-nav b{margin-left:6px;color:var(--gold)}
.admin-panel{box-shadow:0 18px 55px rgba(0,0,0,.14)}
.station-admin-editor[open]{border-color:rgba(217,179,108,.24);box-shadow:0 14px 40px rgba(0,0,0,.2)}
@media(max-width:1000px){.visitor-quick-actions,.how-grid,.portal-info-strip{grid-template-columns:1fr 1fr}.portal-footer{grid-template-columns:1fr 1fr}.portal-footer>div:last-child{text-align:left;grid-column:1/-1}}
@media(max-width:720px){.portal-hero{min-height:520px}.portal-hero-content{left:20px;right:20px;bottom:125px}.portal-hero-shade{background:linear-gradient(180deg,rgba(5,7,10,.45),rgba(5,7,10,.92) 65%)}.portal-hero-stats{left:14px;right:14px;bottom:14px}.portal-hero-stats div{flex:1;min-width:0}.visitor-quick-actions,.how-grid,.portal-info-strip,.customer-scope-card{grid-template-columns:1fr}.account-hero,.admin-hero{align-items:flex-start;flex-direction:column}.portal-footer{grid-template-columns:1fr}.portal-footer>div:nth-child(2){flex-wrap:wrap}.portal-footer>div:last-child{grid-column:auto}.admin-section-nav{top:76px;overflow:auto;flex-wrap:nowrap}}

/* =========================================================
   V8 - REFERENCE IMAGE 1:1 STYLE
   ========================================================= */
.portal-reference-layout{
  margin:0;
  padding-bottom:96px;
  background:#07090c;
  color:#f4f5f7;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.ref-header{
  height:74px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
  padding:0 20px;
  background:#080b0f;
  border-bottom:1px solid #27303a;
  position:sticky;top:0;z-index:100;
  box-shadow:0 8px 30px rgba(0,0,0,.34);
}
.ref-brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.ref-brand-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#151a20,#080a0d);border:1px solid #3f3320;color:#efbd53;font-size:21px}
.ref-brand strong{display:block;font-size:18px;letter-spacing:.03em}.ref-brand small{display:block;color:#d2b06d;font-size:9px;letter-spacing:.18em;margin-top:3px}
.ref-nav{display:flex;align-items:stretch;height:74px;gap:2px}
.ref-nav a{min-width:70px;padding:11px 10px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;color:#d3d7dd;font-size:10px;border-left:1px solid transparent;border-right:1px solid transparent}
.ref-nav a span{font-size:17px}.ref-nav a.active,.ref-nav a:hover{background:linear-gradient(180deg,rgba(239,189,83,.12),rgba(239,189,83,.03));border-color:#6a5225;color:#fff}
.ref-head-actions{display:flex;align-items:center;gap:10px}
.header-search{width:290px;height:42px;border:1px solid #39434f;border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#0b0f13}
.header-search input{border:0;background:transparent;padding:0;color:#fff;box-shadow:none}.header-search span{color:#d4d8de}
.header-login,.header-register{height:42px;display:flex;align-items:center;padding:0 17px;border-radius:9px;font-size:12px;font-weight:800;white-space:nowrap}
.header-login{background:#11161c;border:1px solid #2f3945;color:#fff}.header-register{background:linear-gradient(135deg,#ffd578,#e5a62e);color:#17120a}
.ref-main{width:calc(100% - 24px);max-width:none;margin:0 auto}
.ref-hero{height:272px;position:relative;overflow:hidden;border-left:1px solid #29323d;border-right:1px solid #29323d}
.ref-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ref-hero-dark{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,8,.1),rgba(4,6,8,.28) 50%,rgba(4,6,8,.12))}
.ref-hero-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-51%);text-align:center;text-shadow:0 4px 20px #000}
.ref-hero-copy .hero-kicker{font-size:54px;line-height:.85;font-weight:1000;letter-spacing:.03em;color:#e7e9ed}
.ref-hero-copy h1{font-size:47px;line-height:.92;margin:2px 0;color:#efb843;letter-spacing:-.03em;text-transform:uppercase}
.ref-hero-copy em{font-family:Georgia,serif;font-size:25px;color:#f4f4f4}.hero-divider{width:360px;height:1px;background:linear-gradient(90deg,transparent,#eebc54,transparent);margin:12px auto 8px}.ref-hero-copy small{font-size:8px;letter-spacing:.28em;color:#f1f1f1}
.hero-benefits{position:absolute;right:14px;top:28px;width:250px;padding:16px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(18,19,20,.86),rgba(25,20,11,.82));border:1px solid rgba(239,189,83,.22);box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.hero-benefits div{display:flex;gap:12px;align-items:center;padding:6px 0;font-size:12px}.hero-benefits div:first-child{color:#fff}.hero-benefits strong{display:block;text-align:center;font-family:Georgia,serif;font-style:italic;color:#f1c66c;font-size:21px;margin-top:9px}
.ref-feature-strip{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid #26303a;border-radius:11px;background:#0c1014;margin:0 0 8px;padding:9px;gap:8px}
.ref-feature-strip>div{min-height:66px;display:flex;align-items:center;gap:12px;padding:8px 11px;border:1px solid #232c35;border-radius:8px;background:linear-gradient(180deg,#12171c,#0c1014)}
.ref-feature-strip>div>span{width:38px;height:38px;flex:0 0 38px;border-radius:9px;border:1px solid #70531e;background:#1b170d;color:#f0bd55;display:grid;place-items:center;font-size:19px}
.ref-feature-strip p{margin:0}.ref-feature-strip b,.ref-feature-strip small{display:block}.ref-feature-strip b{font-size:11px}.ref-feature-strip small{font-size:9px;color:#9fa7b1;margin-top:3px}
.ref-content{display:grid;grid-template-columns:235px minmax(0,1fr) 235px;gap:10px;align-items:start}
.left-sidebar,.right-panel{background:#0c1014;border:1px solid #26303a;border-radius:9px;padding:13px}
.side-title{font-size:14px;font-weight:900;margin-bottom:12px}.side-subtitle{font-size:11px;font-weight:800;margin:16px 0 8px}
.side-search{height:42px;border:1px solid #34404c;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#0a0e12}.side-search input{border:0;background:transparent;padding:0;font-size:10px;box-shadow:none}
.side-genre{width:100%;border:0;background:transparent;color:#cbd0d7;display:flex;justify-content:flex-start;gap:10px;align-items:center;padding:8px 9px;border-radius:7px;font-size:11px;font-weight:500;text-align:left}.side-genre:hover,.side-genre.active{background:linear-gradient(90deg,#4a3614,#241b0c);color:#fff;border:1px solid #79591f}.side-genre span{width:18px;text-align:center}
.station-area{min-width:0}
.station-tabs{display:flex;gap:9px;align-items:center;margin-bottom:10px}.station-tabs button{height:40px;background:#10151b;color:#e7e9ed;border:1px solid #2c3640;border-radius:8px;padding:0 18px;font-size:11px}.station-tabs button.active{background:linear-gradient(180deg,#3a2a0e,#1e170a);border-color:#8b6422;color:#fff}.station-tabs a{margin-left:auto;font-size:11px;color:#f0c364;font-weight:800}
.ref-station-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ref-station-card{background:#0c1014;border:1px solid #26303a;border-radius:8px;overflow:hidden;min-width:0}
.ref-station-card:hover{border-color:#5f4a25;box-shadow:0 16px 40px rgba(0,0,0,.24)}
.card-cover{height:160px;position:relative;overflow:hidden;background:#0d1115}.card-cover>img{width:100%;height:100%;object-fit:cover;display:block}.fallback-cover{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at center,rgba(239,189,83,.12),transparent 58%),linear-gradient(135deg,#0c1116,#17120a);color:#f0bd55;text-align:center;padding:14px}.fallback-cover strong{font-size:18px;color:#fff}.fallback-wave{letter-spacing:4px;font-size:24px;color:#e2ad43}
.online-pill{position:absolute;right:7px;top:7px;background:#188a49;color:#fff;border-radius:999px;padding:4px 8px;font-size:8px;font-weight:900}.online-pill.offline{background:#7d2c33}
.card-body{padding:12px}.card-body h2{font-size:16px;margin:0 0 8px}.genre-pills{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px}.genre-pills span{font-size:8px;padding:4px 8px;border-radius:999px;border:1px solid #39434e;background:#11161b;color:#d9dde3}
.card-now small{display:block;color:#f1c362;font-size:9px;font-weight:800;margin-bottom:3px}.card-now strong,.card-now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-now strong{font-size:11px}.card-now span{font-size:10px;color:#c3c8cf;margin-top:2px}
.card-listeners{font-size:10px;color:#f0c364;margin:14px 0 10px}.ref-listen-btn{width:100%;height:40px;border-radius:7px;background:linear-gradient(135deg,#ffd77d,#e6a72e);color:#161109;font-size:11px}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.card-actions a{height:37px;border:1px solid #37424d;background:#0d1115;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#eef0f3}
.right-sidebar{display:grid;gap:9px}.right-panel{padding:13px}.right-panel>a{display:block;padding:7px 0;color:#d3d7dc;font-size:10px;border-bottom:1px solid rgba(255,255,255,.03)}.right-panel>a:last-child{border-bottom:0}.right-title-row{display:flex;justify-content:space-between;align-items:flex-start}.right-title-row>a{font-size:8px;color:#f0c364}.news-item{display:flex;gap:9px;padding:9px 0;border-top:1px solid #202832}.news-item>span{width:26px;height:26px;border:1px solid #685020;border-radius:6px;display:grid;place-items:center;color:#e8b64d;background:#181308;font-size:11px}.news-item b,.news-item small{display:block}.news-item b{font-size:9px}.news-item small{font-size:8px;color:#89929c;margin-top:2px}
.ref-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 28px}.ref-info>div{background:#0c1014;border:1px solid #26303a;border-radius:9px;padding:15px}.ref-info b{font-size:11px;color:#f0c364}.ref-info p{font-size:9px;color:#9fa7b1;line-height:1.55;margin:6px 0 0}
.ref-empty{text-align:center;padding:50px;background:#0c1014;border:1px solid #26303a;border-radius:9px}
.ref-playerbar{position:fixed;left:0;right:0;bottom:0;z-index:120;height:86px;background:linear-gradient(180deg,rgba(12,17,22,.98),rgba(7,9,12,.99));border-top:2px solid #9a6f20;display:grid;grid-template-columns:minmax(330px,1.1fr) auto 320px 320px;align-items:center;gap:20px;padding:0 28px;box-shadow:0 -16px 45px rgba(0,0,0,.38)}
.ref-player-station{display:flex;align-items:center;gap:12px;min-width:0}.ref-mini-cover{width:54px;height:54px;border-radius:7px;background:#17130b;border:1px solid #72551e;color:#f0bd55;display:grid;place-items:center}.ref-player-station>div:nth-child(2){min-width:0;flex:1}.ref-player-station strong,.ref-player-station span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ref-player-station strong{font-size:12px}.ref-player-station span{font-size:10px;color:#c4cad1;margin-top:3px}.ref-live{color:#54df8e!important;font-size:9px!important;font-weight:900}.ref-heart{background:transparent;color:#fff;border:0;font-size:25px;padding:5px}
.ref-player-controls{display:flex;align-items:center;gap:12px}.ref-player-controls button{background:transparent;color:#fff;border:0;font-size:17px}.ref-player-controls .ref-main-play{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#ffd77a,#e5a52e);color:#171109;font-size:19px}
.ref-volume{display:flex;align-items:center;gap:8px}.ref-volume input{width:150px;padding:0;accent-color:#e9b448}.ref-volume small{font-size:9px;color:#d1d5db}
.ref-device-actions{height:100%;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;border-left:1px solid #222a33}.ref-device-actions a,.ref-device-actions button{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;color:#f0b94f;border:0;font-size:18px}.ref-device-actions small{display:block;font-size:8px;color:#d4d7dc}
@media(max-width:1400px){
 .ref-header{grid-template-columns:auto 1fr}.ref-head-actions{grid-column:1/-1;display:none}.ref-nav{justify-content:flex-end}
 .ref-content{grid-template-columns:210px minmax(0,1fr)}.right-sidebar{display:none}.ref-station-grid{grid-template-columns:repeat(3,1fr)}
 .ref-playerbar{grid-template-columns:1fr auto 250px}.ref-device-actions{display:none}
}
@media(max-width:1000px){
 .ref-header{height:auto;min-height:70px;padding:8px 14px}.ref-nav{display:none}
 .ref-main{width:calc(100% - 14px)}.ref-hero{height:300px}.hero-benefits{display:none}.ref-hero-copy{left:50%;width:90%}
 .ref-feature-strip{grid-template-columns:repeat(3,1fr)}
 .ref-content{grid-template-columns:1fr}.left-sidebar{display:none}.ref-station-grid{grid-template-columns:repeat(2,1fr)}
 .station-tabs{overflow:auto}.station-tabs a{display:none}
 .ref-playerbar{grid-template-columns:1fr auto;height:82px;padding:0 14px}.ref-volume{display:none}
}
@media(max-width:640px){
 .ref-brand strong{font-size:14px}.ref-brand small{font-size:7px}
 .ref-hero{height:310px}.ref-hero-copy .hero-kicker{font-size:38px}.ref-hero-copy h1{font-size:33px}.ref-hero-copy em{font-size:19px}.hero-divider{width:220px}
 .ref-feature-strip{grid-template-columns:1fr 1fr}.ref-station-grid{grid-template-columns:1fr}
 .ref-info{grid-template-columns:1fr}.ref-player-station .ref-live,.ref-heart{display:none}.ref-playerbar{gap:8px}
}

/* =========================================================
   V9 PREMIUM FINISH
   ========================================================= */
html{background:#05070a}
body.portal-reference-layout,
body.admin-body,
.mobile-player-page,
.auth-main body{
  background-color:#06080b;
  background-image:
    linear-gradient(rgba(5,7,10,.84),rgba(5,7,10,.92)),
    url("images/portal-premium-background.jpg");
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
body.admin-body{
  background-image:
    linear-gradient(rgba(7,9,12,.91),rgba(7,9,12,.96)),
    url("images/portal-admin-background.jpg");
}
.ref-main{
  background:rgba(4,6,9,.62);
  border-left:1px solid rgba(239,189,83,.08);
  border-right:1px solid rgba(239,189,83,.08);
  box-shadow:0 0 90px rgba(0,0,0,.4);
}
.ref-header{
  background:rgba(6,9,13,.93);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(239,189,83,.23);
}
.ref-brand-icon{
  box-shadow:0 0 24px rgba(239,189,83,.12), inset 0 0 18px rgba(239,189,83,.08);
}
.ref-nav a,
.header-login,
.header-register,
.ref-feature-strip>div,
.left-sidebar,
.right-panel,
.ref-station-card,
.ref-info>div,
.station-admin-editor,
.admin-panel,
.login-card,
.account-hero,
.admin-hero,
.customer-scope-card>div{
  box-shadow:0 16px 45px rgba(0,0,0,.18);
}
.ref-hero{
  border:1px solid rgba(239,189,83,.18);
  border-top:0;
  box-shadow:0 22px 65px rgba(0,0,0,.28);
}
.ref-hero:after{
  content:"";
  position:absolute;inset:auto 0 0;height:2px;
  background:linear-gradient(90deg,transparent,#d7a443,#fff0aa,#d7a443,transparent);
  opacity:.75;
}
.ref-feature-strip{
  background:rgba(7,10,14,.86);
  backdrop-filter:blur(16px);
  border-color:rgba(239,189,83,.18);
}
.ref-feature-strip>div{
  background:linear-gradient(180deg,rgba(18,23,29,.96),rgba(8,12,16,.96));
}
.left-sidebar,.right-panel{
  background:rgba(8,12,16,.9);
  backdrop-filter:blur(16px);
  border-color:rgba(255,255,255,.08);
}
.station-tabs{
  padding:2px 0 3px;
}
.station-tabs button{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.ref-station-card{
  background:
    linear-gradient(180deg,rgba(14,18,23,.97),rgba(7,10,14,.98));
  border-color:rgba(255,255,255,.09);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.ref-station-card:hover{
  transform:translateY(-4px);
  border-color:rgba(239,189,83,.42);
  box-shadow:0 28px 75px rgba(0,0,0,.34),0 0 0 1px rgba(239,189,83,.05);
}
.card-cover:after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:50%;
  background:linear-gradient(transparent,rgba(5,7,10,.56));
  pointer-events:none;
}
.online-pill{z-index:2;box-shadow:0 7px 22px rgba(0,0,0,.32)}
.card-body{
  position:relative;
}
.genre-pills span{
  background:rgba(21,27,34,.88);
}
.ref-listen-btn{
  box-shadow:0 9px 24px rgba(225,166,46,.14),inset 0 1px 0 rgba(255,255,255,.35);
}
.ref-listen-btn:hover{
  filter:brightness(1.08);
}
.card-actions a:hover,
.external-players a:hover,
.side-genre:hover{
  border-color:rgba(239,189,83,.42);
  color:#fff;
}
.ref-playerbar{
  background:linear-gradient(180deg,rgba(10,14,19,.97),rgba(5,8,11,.99));
  backdrop-filter:blur(22px);
  border-top:1px solid rgba(239,189,83,.55);
  box-shadow:0 -20px 60px rgba(0,0,0,.58),0 -1px 0 rgba(255,255,255,.03);
}
.ref-main-play{
  box-shadow:0 0 0 6px rgba(239,189,83,.06),0 10px 28px rgba(239,189,83,.18);
}
.ref-volume input,
#volume{
  accent-color:#e7b34d;
}
.ref-info>div{
  background:rgba(9,13,17,.9);
}
.ref-empty{
  background:rgba(9,13,17,.9);
}
.portal-footer,
.ref-info{
  backdrop-filter:blur(8px);
}
.admin-main{
  width:min(1380px,calc(100% - 32px));
  margin:auto;
}
.admin-hero,.account-hero{
  background:
    linear-gradient(135deg,rgba(218,174,82,.12),rgba(255,255,255,.02)),
    rgba(10,13,17,.9);
  border-color:rgba(218,174,82,.28);
}
.dashboard-cards>div,
.admin-quick-grid a{
  background:linear-gradient(180deg,rgba(18,23,29,.96),rgba(8,11,15,.96));
  border-color:rgba(255,255,255,.08);
}
.dashboard-cards>div:hover,
.admin-quick-grid a:hover{
  border-color:rgba(218,174,82,.28);
}
.admin-section-nav{
  background:rgba(8,11,15,.88);
  border-color:rgba(218,174,82,.16);
}
.admin-panel,.login-card{
  background:rgba(10,14,18,.93);
  backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.08);
}
.admin-panel h1,.admin-panel h2,.login-card h1{
  letter-spacing:-.02em;
}
input,select,textarea{
  background:rgba(7,10,14,.95);
  border-color:rgba(255,255,255,.1);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(218,174,82,.55);
  box-shadow:0 0 0 3px rgba(218,174,82,.08);
}
button,.button{
  letter-spacing:.01em;
}
.station-admin-editor{
  background:rgba(7,10,14,.86);
}
.station-admin-editor summary{
  transition:background .2s ease;
}
.station-admin-editor summary:hover{
  background:rgba(218,174,82,.04);
}
.auth-main .login-card{
  border-color:rgba(218,174,82,.2);
}
@media(max-width:1000px){
  body.portal-reference-layout,body.admin-body{
    background-attachment:scroll;
  }
  .ref-main{
    background:rgba(4,6,9,.78);
  }
}

/* =========================================================
   V10 - GOLDEN RADIOPORTAL EXACT BUILD
   ========================================================= */
.v10-body{
 margin:0;
 padding-bottom:92px;
 color:#f6f7f8;
 background:
   linear-gradient(rgba(4,6,9,.78),rgba(4,6,9,.92)),
   url("images/portal-bg.jpg") center top/cover fixed no-repeat;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.v10-header{
 height:76px;
 display:grid;
 grid-template-columns:auto 1fr auto;
 align-items:center;
 gap:22px;
 padding:0 34px;
 background:rgba(5,8,12,.96);
 border-bottom:1px solid rgba(240,188,75,.35);
 position:sticky;top:0;z-index:200;
 backdrop-filter:blur(18px);
}
.v10-brand{display:flex;align-items:center;gap:12px;white-space:nowrap}
.v10-brand-logo{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#2a1f09,#080b0f);border:2px solid #e7b342;color:#ffc957;font-size:25px;box-shadow:0 0 24px rgba(230,174,55,.24)}
.v10-brand strong{display:block;font-size:21px;letter-spacing:-.03em}.v10-brand strong span{color:#e5b247}.v10-brand small{display:block;color:#e8b957;font-family:Georgia,serif;font-style:italic;font-size:12px;margin-top:2px}
.v10-nav{display:flex;height:76px;align-items:stretch;justify-content:center}
.v10-nav a{min-width:72px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#e7e9ec;font-size:10px;border-left:1px solid transparent;border-right:1px solid transparent}
.v10-nav a b{font-size:18px}.v10-nav a.active,.v10-nav a:hover{background:linear-gradient(180deg,rgba(230,177,67,.18),rgba(230,177,67,.03));border-color:#765922;box-shadow:inset 0 0 20px rgba(229,177,67,.08)}
.v10-head-right{display:flex;align-items:center;gap:10px}
.v10-head-search{width:255px;height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #36414d;border-radius:8px;background:#0b1015;color:#fff}.v10-head-search input{border:0;background:transparent;box-shadow:none;padding:0;font-size:11px}
.v10-login,.v10-register{height:40px;padding:0 16px;border-radius:8px;display:flex;align-items:center;font-weight:800;font-size:11px}.v10-login{background:#10151b;border:1px solid #3a4652}.v10-register{background:linear-gradient(135deg,#ffd778,#e1a127);color:#141006}
.v10-shell{width:calc(100% - 40px);max-width:none;margin:auto;background:rgba(4,7,10,.5);border-left:1px solid rgba(235,181,67,.12);border-right:1px solid rgba(235,181,67,.12)}
.v10-hero{height:310px;position:relative;overflow:hidden;border-bottom:1px solid rgba(237,183,64,.45)}
.v10-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v10-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.24),rgba(0,0,0,.06))}
.v10-hero-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-48%);text-align:center;text-shadow:0 6px 22px rgba(0,0,0,.65);z-index:2}.hero-radio{font-size:66px;font-weight:1000;line-height:.78;color:#e6e9ed;letter-spacing:.02em}.hero-title{font-size:52px;font-weight:1000;line-height:1;color:#f0b742;letter-spacing:-.04em}.hero-script{font-family:Georgia,serif;font-style:italic;font-size:28px;margin-top:5px}.hero-rule{height:1px;width:460px;margin:12px auto 8px;background:linear-gradient(90deg,transparent,#e4b54d,transparent)}.hero-tags{font-size:8px;letter-spacing:.26em}
.v10-hero-card{position:absolute;right:44px;top:33px;width:280px;padding:16px 18px;background:linear-gradient(180deg,rgba(12,16,20,.92),rgba(8,10,13,.88));border:1px solid rgba(224,173,55,.36);border-radius:14px;box-shadow:0 20px 55px rgba(0,0,0,.38);z-index:3}.v10-hero-card div{display:flex;gap:12px;align-items:center;padding:7px 0;font-size:11px}.v10-hero-card strong{display:block;text-align:right;font-size:32px;color:#f3c563}
.v10-features{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:9px;background:rgba(5,8,11,.86);border-bottom:1px solid rgba(234,181,69,.25)}.v10-features>div{min-height:62px;display:flex;gap:11px;align-items:center;padding:8px 11px;border:1px solid #26303a;border-radius:8px;background:linear-gradient(180deg,rgba(19,24,30,.95),rgba(8,12,16,.95))}.v10-features i{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:#1a1408;border:1px solid #71511a;color:#efbd55;font-size:18px;font-style:normal}.v10-features p{margin:0}.v10-features b,.v10-features span{display:block}.v10-features b{font-size:11px}.v10-features span{font-size:9px;color:#9da6b0;margin-top:3px}
.v10-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 235px;gap:10px;padding:10px}
.v10-panel{background:rgba(8,12,16,.93);border:1px solid #2a343e;border-radius:9px;padding:13px;box-shadow:0 16px 50px rgba(0,0,0,.24)}.v10-panel h2{font-size:15px;margin:0 0 12px}.v10-panel h3{font-size:11px;margin:17px 0 8px}.v10-side-search{height:40px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #34414d;border-radius:8px;background:#090d11}.v10-side-search input{border:0;background:transparent;padding:0;box-shadow:none;font-size:10px}
.genre-btn{width:100%;display:flex;align-items:center;justify-content:flex-start;padding:7px 10px;border:0;background:transparent;color:#d4d8de;font-size:10px;border-radius:7px;font-weight:500}.genre-btn.active,.genre-btn:hover{background:linear-gradient(90deg,#4a3612,#231a0b);border:1px solid #7b5b1c;color:#fff}
.v10-tabs{height:42px;display:flex;gap:9px;align-items:center}.v10-tabs button{height:38px;padding:0 17px;border-radius:7px;border:1px solid #313b46;background:#0f1419;color:#e6e8eb;font-size:10px}.v10-tabs button.active{background:linear-gradient(180deg,#4a350e,#21180a);border-color:#9b7020;box-shadow:0 0 18px rgba(226,172,53,.18)}.v10-tabs a{margin-left:auto;color:#f1bf50;font-size:10px;font-weight:900}
.v10-stations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.v10-station{background:linear-gradient(180deg,rgba(13,18,23,.98),rgba(7,10,14,.99));border:1px solid #28323d;border-radius:8px;overflow:hidden;transition:.2s}.v10-station:hover{transform:translateY(-3px);border-color:rgba(235,181,67,.5);box-shadow:0 22px 60px rgba(0,0,0,.35)}
.v10-cover{height:170px;position:relative;overflow:hidden;background:#0b0e12}.v10-cover img{width:100%;height:100%;object-fit:cover}.v10-cover-fallback{height:100%;display:grid;place-items:center;background:radial-gradient(circle,#2b210d,#090c10);color:#e7b44b}.v10-cover-fallback strong{display:block}.v10-online{position:absolute;right:7px;top:7px;background:#188a49;color:#fff;border-radius:999px;padding:4px 8px;font-size:8px;font-weight:900}.v10-online.offline{background:#722b30}
.v10-card-body{padding:12px}.v10-card-body h2{font-size:15px;margin:0 0 8px}.v10-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px}.v10-tags span{font-size:8px;padding:4px 8px;border:1px solid #3c4651;border-radius:999px;background:#10151a}.v10-now small{display:block;color:#f0bd50;font-size:9px;font-weight:800}.v10-now strong,.v10-now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v10-now strong{font-size:11px;margin-top:3px}.v10-now span{font-size:10px;color:#c7ccd2;margin-top:2px}.v10-listeners{margin:13px 0 10px;color:#f1bf50;font-size:10px}.v10-listen{width:100%;height:39px;border-radius:7px;background:linear-gradient(135deg,#ffd679,#e5a52d);color:#160f05;font-size:11px;box-shadow:0 8px 22px rgba(230,174,55,.14)}.v10-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.v10-actions a{height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #39434e;border-radius:7px;background:#0a0e12;font-size:9px;font-weight:800}
.v10-right{display:grid;gap:10px;align-content:start}.v10-right .v10-panel>a{display:block;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:10px}.v10-news-head{display:flex;justify-content:space-between;align-items:center}.v10-news-head a{font-size:8px;color:#efbd53}.v10-news-item{display:flex;gap:8px;padding:9px 0;border-top:1px solid #202832}.v10-news-item i{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;background:#171209;border:1px solid #664c1a;color:#efb846;font-style:normal}.v10-news-item b,.v10-news-item span{display:block}.v10-news-item b{font-size:9px}.v10-news-item span{font-size:8px;color:#87909a;margin-top:2px}
.v10-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 10px 22px}.v10-info>div{background:rgba(8,12,16,.92);border:1px solid #28323d;border-radius:8px;padding:14px}.v10-info b,.v10-info span{display:block}.v10-info b{font-size:11px;color:#efbd53}.v10-info span{font-size:9px;color:#98a2ad;margin-top:4px}
.v10-player{position:fixed;left:0;right:0;bottom:0;height:88px;z-index:300;display:grid;grid-template-columns:minmax(320px,1fr) auto 250px 250px 300px;gap:16px;align-items:center;padding:0 28px;background:linear-gradient(180deg,rgba(9,13,18,.98),rgba(4,7,10,.99));border-top:1px solid #b07c1e;box-shadow:0 -18px 55px rgba(0,0,0,.6);backdrop-filter:blur(18px)}
.v10-current{display:flex;align-items:center;gap:11px;min-width:0}.v10-current-cover{width:52px;height:52px;border-radius:7px;display:grid;place-items:center;background:#1b1509;border:1px solid #75551c;color:#efbd52}.v10-current-meta{min-width:0;flex:1}.v10-current-meta strong,.v10-current-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v10-current-meta strong{font-size:11px}.v10-current-meta span{font-size:9px;color:#c7ccd2;margin-top:3px}.v10-live{font-size:8px;color:#56df90;font-weight:900}.v10-heart{background:transparent;border:0;color:#f1bf50;font-size:23px}
.v10-control-group{display:flex;gap:10px;align-items:center}.v10-control-group button{background:transparent;border:0;color:#fff}.v10-main-play{width:54px!important;height:54px!important;border-radius:50%!important;background:linear-gradient(135deg,#ffd67a,#e3a327)!important;color:#171007!important;font-size:19px!important;box-shadow:0 0 0 6px rgba(236,183,68,.06)}
.v10-volume{display:flex;align-items:center;gap:8px;font-size:11px}.v10-volume input{width:140px;padding:0;accent-color:#e7b13e}.v10-volume small{font-size:9px}
.v10-select-wrap{height:44px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#0a0e12;border:1px solid #34414d;border-radius:8px}.v10-select-wrap span{color:#eab64b}.v10-select-wrap select{border:0;background:transparent;box-shadow:none;padding:0;font-size:10px}
.v10-player-links{height:100%;display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid #222b34}.v10-player-links a,.v10-player-links button{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:transparent;border:0;color:#efbd53;font-size:17px}.v10-player-links small{font-size:8px;color:#d2d6dc}
.v10-empty{text-align:center;padding:50px;background:#0a0e12;border:1px solid #2b3540;border-radius:8px}
@media(max-width:1450px){
 .v10-header{grid-template-columns:auto 1fr}.v10-head-right{display:none}.v10-nav{justify-content:flex-end}
 .v10-grid{grid-template-columns:210px minmax(0,1fr)}.v10-right{display:none}.v10-stations{grid-template-columns:repeat(3,1fr)}
 .v10-player{grid-template-columns:1fr auto 220px}.v10-select-wrap,.v10-player-links{display:none}
}
@media(max-width:1000px){
 .v10-header{height:auto;min-height:68px;padding:8px 14px}.v10-nav{display:none}.v10-shell{width:calc(100% - 14px)}
 .v10-hero{height:300px}.v10-hero-card{display:none}.hero-radio{font-size:46px}.hero-title{font-size:36px}.hero-script{font-size:21px}.hero-rule{width:250px}
 .v10-features{grid-template-columns:repeat(3,1fr)}.v10-grid{grid-template-columns:1fr}.v10-left{display:none}.v10-stations{grid-template-columns:repeat(2,1fr)}
 .v10-player{grid-template-columns:1fr auto;padding:0 14px}.v10-volume{display:none}
}
@media(max-width:650px){
 .v10-brand strong{font-size:15px}.v10-brand small{font-size:9px}.v10-hero{height:270px}.hero-radio{font-size:38px}.hero-title{font-size:30px}.hero-tags{font-size:6px}
 .v10-features{grid-template-columns:1fr 1fr}.v10-stations{grid-template-columns:1fr}.v10-tabs{overflow:auto}.v10-tabs a{display:none}.v10-info{grid-template-columns:1fr}
 .v10-live,.v10-heart{display:none}
}

/* =========================================================
   V11 - WORKING + READABILITY PASS
   ========================================================= */

/* Global text readability */
.v10-body{
  color:#f7f8fa;
  font-size:15px;
  line-height:1.45;
}
.v10-body a{color:#f4f6f8}
.v10-body small,
.v10-body .v10-features span,
.v10-body .v10-news-item span,
.v10-body .v10-info span,
.v10-body .v10-current-meta span{
  color:#c7ced6;
}
.v10-panel,
.v10-station,
.v10-player,
.v10-header{
  text-shadow:none;
}

/* Header text */
.v10-brand strong{font-size:22px}
.v10-brand small{font-size:13px;color:#f0c66b}
.v10-nav a{font-size:11px;color:#eef1f4}
.v10-nav a span{font-weight:700}
.v10-head-search input{font-size:12px;color:#fff}
.v10-head-search input::placeholder,
.v10-side-search input::placeholder{color:#9fa8b2;opacity:1}

/* Hero */
.hero-tags{font-size:9px;color:#f8f8f8;font-weight:700}
.v10-hero-card div{font-size:12px;color:#f4f4f4}

/* Feature strip */
.v10-features b{font-size:12px;color:#fff}
.v10-features span{font-size:10px}

/* Sidebars */
.v10-panel h2{font-size:16px;color:#fff}
.v10-panel h3{font-size:12px;color:#f3c462}
.genre-btn{font-size:11px;color:#e6e9ed}
.v10-right .v10-panel>a{font-size:11px;color:#e7eaee}

/* Tabs */
.v10-tabs button{font-size:11px;font-weight:800}
.v10-tabs a{font-size:11px}

/* Station cards */
.v10-card-body h2{font-size:17px;color:#fff}
.v10-tags span{font-size:9px;color:#f0f2f4}
.v10-now small{font-size:10px}
.v10-now strong{font-size:13px;color:#fff}
.v10-now span{font-size:11px;color:#d6dbe0}
.v10-listeners{font-size:11px;font-weight:800}
.v10-listen{font-size:12px;font-weight:900}
.v10-actions a{font-size:10px;color:#fff}
.v10-online{font-size:9px}

/* Fixed player: much clearer */
.v10-player{
  min-height:94px;
  height:94px;
  color:#fff;
}
.v10-current-cover{
  width:58px;
  height:58px;
  font-size:22px;
}
.v10-current-meta strong{
  font-size:14px;
  color:#fff;
  font-weight:900;
  letter-spacing:.01em;
}
.v10-current-meta span{
  font-size:12px;
  color:#dce1e6;
  line-height:1.35;
  margin-top:4px;
}
.v10-live{
  font-size:10px;
  color:#63ef9f;
  background:rgba(42,148,84,.12);
  border:1px solid rgba(78,220,130,.28);
  border-radius:999px;
  padding:5px 8px;
}
.v10-heart{
  font-size:25px;
}
.v10-control-group button{
  color:#fff;
  font-size:18px;
}
.v10-main-play{
  width:58px!important;
  height:58px!important;
  font-size:20px!important;
}
.v10-volume{
  font-size:13px;
  color:#fff;
}
.v10-volume small{
  font-size:10px;
  color:#fff;
  min-width:34px;
}
.v10-select-wrap{
  height:48px;
}
.v10-select-wrap select{
  font-size:11px;
  color:#fff;
}
.v10-select-wrap select option{
  background:#0b1015;
  color:#fff;
}
.v10-player-links a,
.v10-player-links button{
  color:#f0bd53;
  font-size:18px;
}
.v10-player-links small{
  font-size:9px;
  color:#fff;
  font-weight:700;
}

/* Improve button focus / keyboard usability */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid #f1bd4f;
  outline-offset:2px;
}

/* Ensure no text disappears behind background */
.v10-panel,
.v10-station,
.v10-info>div,
.v10-player{
  background-color:rgba(7,10,14,.97);
}

/* Player on tablet/mobile */
@media(max-width:1450px){
  .v10-player{
    grid-template-columns:minmax(300px,1fr) auto minmax(220px,260px);
  }
  .v10-current-meta strong{font-size:13px}
  .v10-current-meta span{font-size:11px}
}
@media(max-width:1000px){
  .v10-player{
    min-height:88px;
    height:88px;
  }
  .v10-current-cover{width:52px;height:52px}
  .v10-current-meta strong{font-size:13px}
  .v10-current-meta span{font-size:11px}
}
@media(max-width:650px){
  .v10-body{padding-bottom:92px}
  .v10-player{
    grid-template-columns:minmax(0,1fr) auto;
    min-height:86px;
    height:86px;
    padding:0 10px;
  }
  .v10-current{
    min-width:0;
    gap:8px;
  }
  .v10-current-cover{
    width:46px;height:46px;flex:0 0 46px
  }
  .v10-current-meta strong{font-size:12px}
  .v10-current-meta span{
    font-size:10px;
    max-width:180px;
  }
  .v10-main-play{
    width:50px!important;
    height:50px!important;
  }
  .v10-control-group button:not(.v10-main-play){display:none}
}

/* V12 full-function admin additions */
.user-admin-body{padding:16px;border-top:1px solid var(--line)}
.user-admin-editor summary span{max-width:70%;text-align:right}
@media(max-width:700px){.user-admin-editor summary span{max-width:100%;text-align:left}}

/* V13 - station aan ander klantaccount koppelen */
.station-owner-box{border-color:rgba(217,179,108,.28);background:linear-gradient(135deg,rgba(217,179,108,.06),rgba(255,255,255,.015))}
.owner-current{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0b0f13}
.owner-current span,.owner-current b,.owner-current small{display:block}
.owner-current span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.owner-current b{margin-top:4px;color:#fff}
.owner-current small{margin-top:3px;color:var(--gold)}
.station-owner-transfer{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-bottom:8px}
@media(max-width:700px){.station-owner-transfer{grid-template-columns:1fr}.station-owner-transfer button{width:100%}}

/* V14 - grote Nederlandse radiogids */
.directory-listen{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  background:linear-gradient(135deg,#ffd679,#e5a52d);
  color:#160f05!important;
}
.directory-listen:hover{filter:brightness(1.07);color:#160f05!important}
.v10-station[data-stream=""] .v10-now strong{color:#dbe0e5}
.v10-station[data-stream=""] .v10-listeners{opacity:.78}

/* V15 - Cast, bezoekers, IP en strakkere home */
.v10-card-status{display:flex;align-items:center;gap:6px;margin:12px 0 10px;color:#d8dde2;font-size:10px}
.status-dot{width:8px;height:8px;border-radius:50%;background:#3bd47c;box-shadow:0 0 0 3px rgba(59,212,124,.08)}
.status-dot.offline{background:#d95761;box-shadow:0 0 0 3px rgba(217,87,97,.08)}
.v10-card-status .status-text{color:#fff}
.v10-player-links{grid-template-columns:repeat(5,1fr)}
.v10-station .v10-cover{border-bottom:1px solid rgba(217,179,108,.13)}
.compact-list .admin-row{align-items:center}
#castCurrent{color:#f0bd53}
#castCurrent:hover{background:rgba(240,189,83,.06)}
@media(max-width:1450px){.v10-player-links{display:none}}

/* V17 - alle radio-audio rechtstreeks in eigen platform */
.stream-unavailable{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#15191e!important;
  color:#7f8994!important;
  border:1px solid #2c343d!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}
.v10-listen.play-btn:before{content:"";display:inline-block}

/* V18 - AzuraCast + Nederlandse directe streams */
.stream-source-badge{display:inline-flex;margin-bottom:8px;padding:4px 7px;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.stream-source-badge.azura{background:rgba(64,174,255,.11);border:1px solid rgba(64,174,255,.3);color:#8fd1ff}
.stream-source-badge.directory{background:rgba(217,179,108,.10);border:1px solid rgba(217,179,108,.26);color:#efc76f}

/* V19 - Top 10 home + volledige zoekdatabase */
.v19-search-database{margin:20px 10px 12px;padding:22px;border:1px solid rgba(217,179,108,.22);border-radius:16px;background:rgba(7,11,15,.94);box-shadow:0 20px 55px rgba(0,0,0,.2)}
.v19-search-head{display:flex;align-items:end;justify-content:space-between;gap:20px}
.v19-search-head h2{margin:5px 0 6px;font-size:24px}.v19-search-head p{margin:0;color:#aeb7c1;font-size:11px}
.v19-db-search{min-width:340px;height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #394552;border-radius:9px;background:#090d11}
.v19-db-search input{border:0;background:transparent;box-shadow:none;padding:0;color:#fff;font-size:12px}
.v19-db-results{display:grid;gap:8px;margin-top:16px}
.v19-search-hint{padding:18px;border:1px dashed #35404b;border-radius:10px;color:#aab3bd;text-align:center;font-size:11px}
.v19-result-card{display:grid;grid-template-columns:82px 1fr auto;gap:13px;align-items:center;padding:10px;border:1px solid #28333e;border-radius:11px;background:linear-gradient(180deg,#10151a,#0a0e12)}
.v19-result-media{width:82px;height:62px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:#171209;color:#efbd53;font-size:22px}
.v19-result-media img{width:100%;height:100%;object-fit:cover}
.v19-result-copy h3{margin:0 0 3px;font-size:13px}.v19-result-copy p{margin:0;color:#efbd53;font-size:9px}.v19-result-copy small{display:block;color:#a9b2bc;font-size:9px;margin-top:4px;line-height:1.4}
.v19-result-actions{display:flex;gap:7px;align-items:center}.v19-result-actions button,.v19-result-actions a{height:36px;padding:0 12px;border-radius:7px;display:flex;align-items:center;border:1px solid #39444f;background:#0b0f13;color:#fff;font-size:9px;font-weight:800}
.v19-result-actions button{background:linear-gradient(135deg,#ffd679,#e5a52d);color:#160f05;border-color:#b77e20}
@media(max-width:800px){.v19-search-head{align-items:stretch;flex-direction:column}.v19-db-search{min-width:0;width:100%}.v19-result-card{grid-template-columns:68px 1fr}.v19-result-media{width:68px;height:58px}.v19-result-actions{grid-column:1/-1}.v19-result-actions>*{flex:1;justify-content:center}}

/* =========================================================
   V21 - SMALLER / COMPACT STATION BLOCKS
   Gebaseerd op aangeleverde screenshot
   ========================================================= */

/* Geef de middenkolom iets meer ademruimte */
.v10-grid{
  grid-template-columns:220px minmax(0,1fr) 225px;
  gap:9px;
}

/* Kleinere stationkaarten */
.v10-stations{
  grid-template-columns:repeat(4,minmax(220px,1fr));
  gap:9px;
}

.v10-station{
  max-width:100%;
  border-radius:8px;
}

/* Cover minder hoog */
.v10-cover{
  height:142px;
}

/* Minder padding in kaart */
.v10-card-body{
  padding:10px 11px 11px;
}

/* Titels en labels compacter */
.v10-card-body h2{
  font-size:15px;
  margin-bottom:7px;
}

.stream-source-badge{
  margin-bottom:6px;
  padding:3px 6px;
  font-size:7px;
}

.v10-tags{
  gap:4px;
  margin-bottom:10px;
}

.v10-tags span{
  font-size:7px;
  padding:3px 7px;
}

/* Now playing compacter */
.v10-now small{
  font-size:8px;
}
.v10-now strong{
  font-size:11px;
}
.v10-now span{
  font-size:9px;
}

/* Status regel compacter */
.v10-card-status{
  margin:10px 0 8px;
  font-size:9px;
  gap:5px;
}
.status-dot{
  width:7px;
  height:7px;
}

/* Hoofdknop kleiner */
.v10-listen{
  height:36px;
  font-size:10px;
}

/* Onderste knoppen compacter */
.v10-actions{
  gap:6px;
  margin-top:7px;
}
.v10-actions a{
  height:33px;
  font-size:8px;
  border-radius:6px;
}

/* Minder ruimte boven tabs */
.v10-tabs{
  height:39px;
}
.v10-tabs button{
  height:35px;
  padding:0 13px;
  font-size:9px;
}

/* Homepage top10 sectie visueel strakker */
.v10-main-content{
  min-width:0;
}

/* Op middelgrote desktop toch 4 kaarten blijven tonen zolang mogelijk */
@media(max-width:1500px) and (min-width:1181px){
  .v10-grid{
    grid-template-columns:200px minmax(0,1fr);
  }
  .v10-right{
    display:none;
  }
  .v10-stations{
    grid-template-columns:repeat(4,minmax(200px,1fr));
  }
}

/* Tablet */
@media(max-width:1180px){
  .v10-stations{
    grid-template-columns:repeat(3,minmax(210px,1fr));
  }
}

/* Klein tablet */
@media(max-width:900px){
  .v10-stations{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobiel */
@media(max-width:620px){
  .v10-stations{
    grid-template-columns:1fr;
  }
  .v10-cover{
    height:155px;
  }
}

/* =========================================================
   V22 - MOBILE READY + AZURACAST IMAGES RESTORED
   ========================================================= */
.mobile-menu-btn{
  display:none;
  width:44px;height:44px;
  border:1px solid rgba(239,189,83,.38);
  border-radius:10px;
  background:#11161b;
  color:#f3c45c;
  font-size:21px;
  align-items:center;
  justify-content:center;
  padding:0;
}
.mobile-menu-panel{
  display:none;
}
@media(max-width:1000px){
  html,body{
    max-width:100%;
    overflow-x:hidden;
  }
  .v10-body{
    background-attachment:scroll;
    padding-bottom:92px;
  }
  .v10-header{
    position:sticky;
    top:0;
    z-index:300;
    min-height:68px;
    height:auto;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px;
    padding:9px 12px;
  }
  .mobile-menu-btn{
    display:flex;
    grid-column:1;
    grid-row:1;
  }
  .v10-brand{
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .v10-brand-logo{
    width:42px;height:42px;
    flex:0 0 42px;
  }
  .v10-brand strong{
    font-size:15px;
    white-space:normal;
    line-height:1.05;
  }
  .v10-brand small{
    font-size:9px;
  }
  .v10-nav,.v10-head-right{
    display:none!important;
  }
  .mobile-menu-panel{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:9px 0 3px;
  }
  .mobile-menu-panel[hidden]{display:none!important}
  .mobile-menu-panel a{
    display:flex;
    align-items:center;
    min-height:42px;
    padding:0 11px;
    border:1px solid #2d3741;
    border-radius:8px;
    background:#0c1116;
    color:#f0f2f4;
    font-size:11px;
    font-weight:800;
  }
  .mobile-menu-panel a:hover{
    border-color:#7c5c20;
    background:#171309;
  }

  .v10-shell{
    width:100%;
    border-left:0;
    border-right:0;
  }
  .v10-hero{
    height:250px;
  }
  .v10-hero-center{
    width:92%;
  }
  .hero-radio{font-size:40px}
  .hero-title{font-size:31px}
  .hero-script{font-size:19px}
  .hero-rule{width:220px}
  .hero-tags{font-size:6px;line-height:1.6}
  .v10-hero-card{display:none}

  .v10-features{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:7px;
    gap:7px;
  }
  .v10-features>div{
    min-height:58px;
    padding:7px 8px;
  }
  .v10-features i{
    width:34px;height:34px;flex:0 0 34px;
  }
  .v10-features b{font-size:10px}
  .v10-features span{font-size:8px}

  .v10-grid{
    display:block;
    padding:8px;
  }
  .v10-left,.v10-right{
    display:none!important;
  }
  .v10-main-content{
    width:100%;
  }
  .v10-tabs{
    display:flex;
    overflow-x:auto;
    gap:6px;
    height:auto;
    padding:2px 0 8px;
    scrollbar-width:thin;
  }
  .v10-tabs button{
    flex:0 0 auto;
    height:35px;
    white-space:nowrap;
    padding:0 11px;
  }
  .v10-tabs a{display:none}

  .v10-stations{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .v10-station{
    min-width:0;
  }
  .v10-cover{
    height:130px;
  }
  .v10-card-body{
    padding:9px;
  }
  .v10-card-body h2{
    font-size:14px;
  }
  .v10-now strong{
    font-size:10px;
  }
  .v10-now span{
    font-size:9px;
  }
  .v10-card-status{
    flex-wrap:wrap;
  }
  .v10-actions{
    grid-template-columns:1fr;
  }
  .v10-actions a{
    height:32px;
  }

  .v19-search-database{
    margin:10px 8px 12px;
    padding:15px;
  }
  .v19-search-head{
    display:block;
  }
  .v19-search-head h2{
    font-size:19px;
  }
  .v19-db-search{
    width:100%;
    min-width:0;
    margin-top:12px;
    box-sizing:border-box;
  }
  .v19-result-card{
    grid-template-columns:64px 1fr;
  }
  .v19-result-media{
    width:64px;height:56px;
  }
  .v19-result-actions{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .v10-info{
    grid-template-columns:1fr;
    padding:0 8px 14px;
  }

  .v10-player{
    left:0;right:0;bottom:0;
    height:86px;
    min-height:86px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    padding:0 10px;
  }
  .v10-current{
    min-width:0;
  }
  .v10-current-cover{
    width:44px;height:44px;flex:0 0 44px;
  }
  .v10-current-meta{
    min-width:0;
  }
  .v10-current-meta strong{
    font-size:11px;
  }
  .v10-current-meta span{
    font-size:9px;
    max-width:38vw;
  }
  .v10-live,.v10-heart,.v10-volume,.v10-select-wrap,.v10-player-links{
    display:none!important;
  }
  .v10-control-group{
    gap:4px;
  }
  .v10-control-group button:not(.v10-main-play){
    display:none;
  }
  .v10-main-play{
    width:50px!important;height:50px!important;
  }
}

@media(max-width:620px){
  .mobile-menu-panel{
    grid-template-columns:1fr;
  }
  .v10-hero{
    height:220px;
  }
  .hero-radio{font-size:33px}
  .hero-title{font-size:26px}
  .hero-script{font-size:17px}
  .v10-features{
    grid-template-columns:1fr 1fr;
  }
  .v10-stations{
    grid-template-columns:1fr;
  }
  .v10-cover{
    height:150px;
  }
  .v10-card-body{
    padding:10px;
  }
  .v10-actions{
    grid-template-columns:1fr 1fr;
  }
  .v19-result-actions{
    grid-template-columns:1fr;
  }
  .v10-current-meta span{
    max-width:48vw;
  }
}

/* Account/admin/auth responsive safety */
@media(max-width:760px){
  .admin-main{
    width:calc(100% - 16px)!important;
  }
  .admin-hero,.account-hero{
    padding:18px;
  }
  .admin-hero h1,.account-hero h1{
    font-size:24px;
  }
  .dashboard-cards{
    grid-template-columns:1fr 1fr!important;
  }
  .admin-quick-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .editor-grid{
    grid-template-columns:1fr!important;
  }
  .editor-grid .full{
    grid-column:1!important;
  }
  .station-admin-editor summary{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .station-admin-editor summary span{
    max-width:100%!important;
    text-align:left!important;
  }
  .topbar{
    padding:10px 12px;
  }
  .topbar nav{
    flex-wrap:wrap;
    gap:7px;
  }
}

@media(max-width:480px){
  .dashboard-cards,
  .admin-quick-grid{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   V23 - STREAM UITLEG + ACCOUNT ONBOARDING
   ========================================================= */
.guide-main{width:min(1180px,calc(100% - 30px));margin:auto;padding:28px 0 70px}
.guide-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:30px;border:1px solid rgba(217,179,108,.26);border-radius:20px;background:linear-gradient(135deg,rgba(217,179,108,.10),rgba(255,255,255,.02)),rgba(8,12,16,.94);box-shadow:0 24px 70px rgba(0,0,0,.25)}
.guide-hero h1{font-size:38px;margin:6px 0 12px;letter-spacing:-.035em}.guide-hero p{margin:0;color:#c3cad2;max-width:800px;line-height:1.65}
.guide-badge{flex:0 0 auto;padding:12px 16px;border:1px solid rgba(217,179,108,.32);border-radius:999px;background:#151107;color:#efc66b;font-weight:900}
.guide-summary{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:16px 0 22px}
.guide-summary a{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #2d3741;border-radius:10px;background:#0b1015;font-size:9px}.guide-summary b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#241b0c;color:#f1bf57;border:1px solid #77591f}.guide-summary span{color:#e3e7eb}
.guide-step{display:grid;grid-template-columns:58px 1fr;gap:16px;margin:12px 0;padding:22px;border:1px solid #29333d;border-radius:16px;background:rgba(8,12,16,.94)}
.guide-number{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#2e210c,#151008);border:1px solid #7b5a1c;color:#f2c45f;font-size:20px;font-weight:1000}
.guide-content h2{margin:0 0 10px;font-size:23px}.guide-content h3{margin:20px 0 8px;font-size:15px;color:#efc35f}.guide-content p{color:#c1c8d0;line-height:1.65;margin:8px 0}
.guide-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.guide-choice-grid>div{padding:14px;border:1px solid #303a45;border-radius:11px;background:#0a0e12}.guide-choice-grid h3{margin:0 0 6px}.guide-choice-grid p{font-size:11px;margin:0}
.guide-note,.guide-warning,.guide-danger{margin:14px 0;padding:14px;border-radius:10px;font-size:12px;line-height:1.55}.guide-note{border:1px solid rgba(76,173,255,.22);background:rgba(76,173,255,.06)}.guide-warning{border:1px solid rgba(239,189,83,.25);background:rgba(239,189,83,.06)}.guide-danger{border:1px solid rgba(224,83,94,.24);background:rgba(224,83,94,.06)}
.guide-warning span{display:block;margin-top:5px;color:#f0d79b}
.guide-example{margin:12px 0;padding:12px;border:1px solid #36414c;border-radius:10px;background:#070a0d}.guide-example span{display:block;color:#9fa8b3;font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.guide-example code{display:block;color:#f1c25b;word-break:break-all}
.guide-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.guide-checks span{padding:10px;border:1px solid #2c3640;border-radius:8px;background:#0b0f13;color:#dce1e6;font-size:10px}.guide-checks.vertical{grid-template-columns:1fr 1fr}
.guide-ordered{padding-left:22px;color:#cbd1d7}.guide-ordered li{margin:9px 0;line-height:1.5}.guide-ordered code{color:#efc45e}
.guide-final{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;padding:24px;border:1px solid rgba(217,179,108,.25);border-radius:16px;background:linear-gradient(135deg,rgba(217,179,108,.08),rgba(255,255,255,.02))}.guide-final h2{margin:5px 0 7px}.guide-final p{margin:0;color:#aeb7c1}.guide-final-actions{display:flex;gap:8px}

.account-onboarding{margin-bottom:18px;padding:20px;border:1px solid rgba(217,179,108,.25);border-radius:16px;background:linear-gradient(135deg,rgba(217,179,108,.07),rgba(255,255,255,.015)),#0a0e12}
.onboarding-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.onboarding-head h2{margin:4px 0 0}
.onboarding-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}.onboarding-steps>div{display:flex;gap:10px;padding:12px;border:1px solid #2c3640;border-radius:10px;background:#0b1015}.onboarding-steps b{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;background:#251c0c;border:1px solid #75581e;color:#efc15d}.onboarding-steps span{font-size:10px;color:#aeb7c1}.onboarding-steps strong{display:block;color:#fff;font-size:11px;margin-bottom:3px}
.onboarding-warning{margin-top:12px;padding:11px;border:1px solid rgba(239,189,83,.22);border-radius:9px;background:rgba(239,189,83,.05);font-size:11px;color:#d9dde2}
label small{display:block;color:#8f99a4;font-size:9px;line-height:1.35;margin:3px 0 6px;font-weight:400}

@media(max-width:1000px){.guide-summary{grid-template-columns:repeat(4,1fr)}.guide-choice-grid{grid-template-columns:1fr 1fr}.guide-checks{grid-template-columns:1fr 1fr}.onboarding-steps{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.guide-main{width:calc(100% - 16px)}.guide-hero{align-items:flex-start;flex-direction:column;padding:20px}.guide-hero h1{font-size:29px}.guide-summary{grid-template-columns:1fr 1fr}.guide-step{grid-template-columns:1fr;padding:16px}.guide-choice-grid,.guide-checks,.guide-checks.vertical,.onboarding-steps{grid-template-columns:1fr}.guide-final,.onboarding-head{align-items:flex-start;flex-direction:column}.guide-final-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}}

/* =========================================================
   V24 - STRAK RADIO ACCOUNT STAPPENPLAN
   ========================================================= */
.account-onboarding-pro{
  margin:22px 0 20px;
  padding:24px;
  border:1px solid rgba(217,179,108,.24);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(217,179,108,.055),rgba(255,255,255,.015)),
    rgba(7,11,15,.96);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.onboarding-head-pro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

.onboarding-head-pro h2{
  margin:5px 0 8px;
  font-size:25px;
  letter-spacing:-.02em;
}

.onboarding-head-pro p{
  margin:0;
  max-width:760px;
  color:#aeb7c2;
  font-size:12px;
  line-height:1.6;
}

.onboarding-guide-btn{
  flex:0 0 auto;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 15px;
  white-space:nowrap;
}

.onboarding-steps-pro{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.onboarding-step-card{
  min-height:112px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px;
  border:1px solid #2b3540;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(16,21,27,.98),rgba(9,13,17,.98));
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.onboarding-step-card:hover{
  transform:translateY(-2px);
  border-color:rgba(217,179,108,.34);
  box-shadow:0 14px 35px rgba(0,0,0,.2);
}

.step-number{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(145deg,#2e220d,#171108);
  border:1px solid #76591f;
  color:#f0c45e;
  font-size:14px;
  font-weight:1000;
  box-shadow:inset 0 0 14px rgba(217,179,108,.05);
}

.step-copy{
  min-width:0;
}

.step-copy h3{
  margin:1px 0 6px;
  color:#fff;
  font-size:14px;
  line-height:1.25;
}

.step-copy p{
  margin:0;
  color:#aeb7c1;
  font-size:11px;
  line-height:1.55;
}

.onboarding-warning-pro{
  margin-top:14px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 15px;
  border:1px solid rgba(239,189,83,.25);
  border-radius:11px;
  background:rgba(239,189,83,.055);
}

.warning-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#2a1f0b;
  border:1px solid #7a591b;
  color:#f2c65f;
  font-weight:1000;
}

.onboarding-warning-pro strong{
  display:block;
  color:#f0c76c;
  font-size:12px;
  margin-bottom:3px;
}

.onboarding-warning-pro p{
  margin:0;
  color:#d0d5db;
  font-size:11px;
  line-height:1.55;
}

@media(max-width:1050px){
  .onboarding-steps-pro{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .account-onboarding-pro{
    padding:16px;
  }
  .onboarding-head-pro{
    flex-direction:column;
    gap:12px;
  }
  .onboarding-guide-btn{
    width:100%;
  }
  .onboarding-steps-pro{
    grid-template-columns:1fr;
  }
  .onboarding-step-card{
    min-height:0;
  }
}