*{box-sizing:border-box} :root{--c:#0d6efd;--bg:#050b14;--panel:#07111e;--panel2:#0b1726;--line:#17304d;--txt:#f5f8ff;--muted:#a8b5c8} body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,#062a55 0,#050b14 36%,#02060b 100%);color:var(--txt)} a{color:#59aaff;text-decoration:none}.btn{border:0;background:linear-gradient(135deg,var(--c,#0d6efd),#0057ff);color:#fff;border-radius:10px;padding:12px 17px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;box-shadow:0 8px 20px rgba(0,92,255,.25)}.btn.smallbtn{padding:9px 13px;font-size:13px}.btn.danger{background:#b73535}.btn.alt{background:#16a34a}.btn.ghost{background:#101f33;border:1px solid var(--line);box-shadow:none}.input,select,textarea{width:100%;padding:14px;margin:8px 0 16px;border:1px solid #203f63;border-radius:10px;background:#0b1726;color:var(--txt);outline:none}.input:focus{border-color:#2d8cff}.small{font-size:13px;color:var(--muted)}.notice{background:#0c1c31;border:1px solid var(--line);padding:12px;border-radius:12px;margin-bottom:10px}.error{background:#7b2222;color:#fff;padding:12px;border-radius:10px;margin:10px 0}.hw-logo{height:44px;max-width:210px;width:auto;object-fit:contain;display:block}.topbar{height:82px;background:rgba(6,13,23,.92);display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:13px;font-size:25px;font-weight:900;letter-spacing:-.5px}.toolrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.listener-pill{display:flex;align-items:center;gap:10px;font-weight:800}.listener-pill b{font-size:21px}.listener-pill span:first-child{font-size:28px;color:#57d45a}.layout{height:calc(100vh - 82px);display:grid;grid-template-columns:300px minmax(420px,1fr) 360px;gap:12px;padding:12px}.sidebar,.rightbar,.chat{background:rgba(7,17,30,.92);border:1px solid var(--line);border-radius:14px;overflow:hidden}.sidebar,.rightbar{overflow:auto;padding:14px}.side-title{font-size:16px;color:#d7e5ff;text-transform:uppercase;margin:8px 4px 12px}.room{display:flex;align-items:center;justify-content:space-between;color:#eaf2ff;padding:13px 14px;border-radius:10px;margin:7px 0;background:transparent}.room small{display:block;color:#8fa4be}.room:hover,.room.active{background:linear-gradient(135deg,var(--c,#0d6efd),#0063ff);color:#fff}.room.active small{color:#d9e8ff}.card{background:rgba(11,23,38,.95);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}.chat{display:flex;flex-direction:column;min-width:0}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line);background:#07111e}.chat-head h1{margin:0 0 6px;font-size:22px}.messages{flex:1;overflow:auto;padding:18px;background:linear-gradient(180deg,#07111e,#08101d)}.message{display:flex;gap:12px;margin-bottom:13px}.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#17304d}.bubble{background:#0d1b2d;border:1px solid #102c49;border-radius:14px;padding:11px 13px;max-width:780px;box-shadow:0 7px 20px rgba(0,0,0,.12)}.meta{font-size:12px;color:var(--muted);margin-bottom:6px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}.name{font-weight:900;color:#49a6ff}.time{margin-left:auto;color:#8fa4be}.role{font-size:10px;background:#31476b;color:#fff;border-radius:999px;padding:2px 7px;text-transform:uppercase}.role.admin{background:#0d6efd}.role.moderator{background:#8e44ad}.role.vip{background:#d89b00}.text{white-space:pre-wrap;word-break:break-word;font-size:16px;line-height:1.42}.composer-wrap{border-top:1px solid var(--line);padding:10px;background:#07111e}.emoji-tools{padding:0 0 9px}.emoji-bar{display:none;flex-wrap:wrap;gap:7px;background:#0b1726;border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:9px}.emoji-bar.open{display:flex}.emoji-bar button{font-size:23px;line-height:1;border:1px solid #234365;background:#0d1b2d;color:#fff;border-radius:9px;padding:7px 9px;cursor:pointer}.emoji-bar button:hover{background:#0d6efd}.composer{display:flex;gap:9px}.composer input{flex:1;padding:14px;border-radius:10px;border:1px solid #203f63;background:#0b1726;color:#fff}.radio-widget h3,.webcam-widget h3{margin:0 0 12px;text-transform:uppercase;font-size:15px}.radio-player{display:grid;grid-template-columns:72px 1fr;gap:13px;align-items:center}.radio-cover{width:72px;height:72px;border-radius:12px;object-fit:contain;background:#07111e;border:1px solid #18345a}.onair{color:#65ff5e;font-weight:900}.radio-controls{grid-column:1/3;display:flex;gap:12px;align-items:center}.round-btn{width:52px;height:52px;border-radius:50%;font-size:22px}.volume{flex:1}.listeners{font-size:14px;color:#d6e4ff;margin-top:9px}.visualizer{height:22px;background:repeating-linear-gradient(90deg,#0d6efd 0 4px,transparent 4px 8px);opacity:.9;mask-image:linear-gradient(to top,black 35%,transparent)}.webcam-preview{position:relative;background:#111;border-radius:12px;min-height:190px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}.webcam-preview video{width:100%;height:100%;object-fit:cover}.live-dot{position:absolute;top:10px;left:10px;background:#111b;border-radius:999px;padding:5px 9px;font-size:12px}.live-dot:before{content:'';display:inline-block;width:9px;height:9px;background:#53e043;border-radius:50%;margin-right:6px}.webcam-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:10px}.userline{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px}.userline:hover{background:#0b1726}.dot{width:9px;height:9px;border-radius:50%;background:#40d64a;margin-left:auto}.container{padding:22px}.admin-table{width:100%;border-collapse:collapse;background:#fff;color:#111;border-radius:12px;overflow:hidden}.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid #e4e7ef;text-align:left}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 0,#063b75 0,#050b14 45%,#02060b 100%);padding:20px}.auth-box{width:420px;max-width:94vw;background:rgba(7,17,30,.96);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 25px 80px rgba(0,0,0,.55);text-align:center}.auth-box.wide{width:560px}.auth-box .hw-logo{height:auto;max-height:82px;max-width:240px;width:auto;margin:0 auto 14px;object-fit:contain;display:block}.auth-box h1{font-size:26px;margin:10px 0 8px}.auth-box .btn{width:100%;margin-top:4px}.pm-box{height:390px;overflow:auto;background:#0d1324;border:1px solid #283657;border-radius:12px;padding:12px;margin-bottom:10px}.pm-me{text-align:right}.pm-line{margin:8px 0}.pm-line span{display:inline-block;background:#1c2744;padding:9px 11px;border-radius:12px}.pm-me span{background:#2d7cff}.webcam-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}.video-box{background:#111;border-radius:14px;overflow:hidden;min-height:340px;display:flex;align-items:center;justify-content:center;color:white}.video-box video{width:100%;height:auto;display:block}@media(max-width:1100px){.layout{grid-template-columns:240px 1fr}.rightbar{display:none}}@media(max-width:820px){.topbar{height:auto;flex-wrap:wrap}.layout{height:auto;min-height:calc(100vh - 82px);grid-template-columns:1fr}.sidebar,.rightbar{display:block}.messages{min-height:420px}.composer{position:sticky;bottom:0}.webcam-grid{grid-template-columns:1fr}.video-box{min-height:220px}}

/* Logo fix: kleiner en passend binnen login-kader */
.login-logo{height:auto;max-height:82px;max-width:240px;width:auto;margin:0 auto 14px;object-fit:contain;display:block}
.topbar .hw-logo{height:44px;max-width:210px;width:auto;object-fit:contain}

.chat-smiley{width:34px;height:34px;object-fit:contain;vertical-align:middle;margin:0 2px}.picker-smiley{width:30px;height:30px;object-fit:contain;display:block}.emoji-bar button{min-width:43px;min-height:43px;display:flex;align-items:center;justify-content:center}.admin-grid{display:grid;grid-template-columns:minmax(320px,480px) minmax(500px,1fr);gap:18px}.smiley-admin-list{display:flex;flex-direction:column;gap:10px}.smiley-admin-row{display:grid;grid-template-columns:58px minmax(150px,1fr) auto auto auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#081522}.smiley-preview{width:52px;height:52px;border-radius:10px;background:#06101d;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:30px}.smiley-preview img{max-width:42px;max-height:42px;object-fit:contain}.smiley-info{display:flex;flex-direction:column;gap:4px}.smiley-info small{color:var(--muted)}.status-chip{font-size:12px;font-weight:800;border-radius:999px;padding:5px 9px}.status-chip.on{background:#123c22;color:#70ef8e}.status-chip.off{background:#4a2020;color:#ff9a9a}@media(max-width:1000px){.admin-grid{grid-template-columns:1fr}.smiley-admin-row{grid-template-columns:52px 1fr}.smiley-admin-row form,.smiley-admin-row .status-chip{grid-column:auto}}
.group-video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.group-video-card{position:relative;aspect-ratio:16/9;background:#02060b;border:1px solid var(--line);border-radius:14px;overflow:hidden;min-height:190px}.group-video-card video{width:100%;height:100%;object-fit:cover;display:block}.video-label{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.72);padding:6px 10px;border-radius:999px;font-weight:800}.video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);background:#06101d}.group-video-card.local{outline:2px solid var(--c)}


/* Groepswebcam vast naast de chat */
.layout{grid-template-columns:280px minmax(430px,1fr) minmax(390px,520px)}
.rightbar.webcam-side{display:flex;flex-direction:column;gap:12px;padding:12px;overflow:auto}
.webcam-docked{display:flex;flex-direction:column;min-height:560px;flex:1;margin:0;padding:12px}
.webcam-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.webcam-side-head h3{margin:0 0 3px}.webcam-side-head small{color:var(--muted)}
.webcam-side-frame{display:block;width:100%;flex:1;min-height:460px;border:1px solid var(--line);border-radius:12px;background:#02060b}
.webcam-side-note{font-size:12px;color:var(--muted);padding:8px 2px 0;line-height:1.4}
.compact-radio{margin:0;flex:0 0 auto}.compact-radio .radio-cover{width:54px;height:54px}.compact-radio .round-btn{width:42px;height:42px}
@media(max-width:1250px){.layout{grid-template-columns:230px minmax(400px,1fr) minmax(340px,430px)}}
@media(max-width:980px){.layout{grid-template-columns:1fr}.sidebar{display:block}.rightbar.webcam-side{display:flex;min-height:620px}.webcam-docked{min-height:520px}.webcam-side-frame{min-height:440px}.chat{min-height:650px}}
.moderation-actions{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:18px;align-items:stretch}.moderation-actions form{background:#081522;border:1px solid var(--line);border-radius:12px;padding:16px}.moderation-actions h3{margin-top:0}@media(max-width:800px){.moderation-actions{grid-template-columns:1fr}.admin-table{display:block;overflow-x:auto}}

/* SonicPanel live-DJ widget */
.sonic-dj-header{display:flex;align-items:center;gap:9px;min-width:180px;max-width:420px;background:#0b1726;border:1px solid var(--line);border-radius:12px;padding:7px 10px;overflow:hidden}.sonic-dj-label{font-size:12px;font-weight:900;white-space:nowrap;color:#70ef8e}.sonic-dj-code{min-width:0;overflow:hidden}.sonic-dj-code iframe{display:block;max-width:100%;border:0}.sonic-dj-code img{max-width:100%;height:auto}.sonic-dj-card{margin:14px 0 10px;padding:11px;background:#07111e;border:1px solid var(--line);border-radius:11px}.sonic-dj-card>strong{display:block;margin-bottom:8px}.code-input{font-family:Consolas,Monaco,monospace;font-size:13px;line-height:1.45}.topbar:has(.sonic-dj-header){gap:14px}.topbar:has(.sonic-dj-header) .toolrow{justify-content:flex-end}@media(max-width:1180px){.sonic-dj-header{order:3;width:100%;max-width:none}.topbar:has(.sonic-dj-header){height:auto;flex-wrap:wrap}.layout{height:auto;min-height:calc(100vh - 82px)}}


/* Door admin instelbare huisstijl */
html,body{font-family:var(--font-family,Arial,sans-serif);color:var(--base-text,#e9f1ff)}
h1,h2,h3,h4,.brand,.side-title{color:var(--heading-color,#fff)}
.sidebar,.rightbar,.card,.composer-wrap,.chat-head{background-color:var(--panel-bg,#0b1726)}
.messages{position:relative;background-color:var(--chat-bg,#07111e);background-image:linear-gradient(rgba(7,17,30,calc(1 - var(--custom-bg-opacity,1))),rgba(7,17,30,calc(1 - var(--custom-bg-opacity,1)))),var(--custom-bg);background-size:auto,var(--custom-bg-size,cover);background-position:center,var(--custom-bg-position,center center);background-repeat:no-repeat,var(--custom-bg-repeat,no-repeat);background-attachment:scroll,local}
.text{color:var(--message-text,#fff);font-size:var(--message-font-size,16px)}
.name{color:var(--username-color,#49a6ff)}
.small,small,.meta,.webcam-side-note{color:var(--muted,#8fa4be)}
.input,.composer input,textarea,select{color:var(--input-text,#fff);background-color:var(--panel-bg,#0b1726)}

.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:18px}.color-setting{display:grid;grid-template-columns:58px 1fr;gap:9px;align-items:center}.color-setting input[type=color]{width:58px;height:46px;padding:3px;border-radius:9px;border:1px solid var(--line);background:#07111e;cursor:pointer}.background-preview{height:210px;border-radius:14px;border:1px solid var(--line);background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:12px;margin:10px 0}.background-preview span{background:rgba(0,0,0,.7);padding:6px 10px;border-radius:999px}.checkline{display:flex!important;align-items:center;gap:8px;margin:10px 0 16px}.checkline input{width:18px;height:18px}


/* Vaste login-huisstijl: niet beïnvloedbaar vanuit admin */
.auth-page{font-family:Inter,Arial,Helvetica,sans-serif!important;color:#f5f8ff!important;background:radial-gradient(circle at 50% 0,#063b75 0,#050b14 45%,#02060b 100%)!important;background-image:radial-gradient(circle at 50% 0,#063b75 0,#050b14 45%,#02060b 100%)!important}
.auth-page .auth-box{background:rgba(7,17,30,.96)!important;color:#f5f8ff!important}
.auth-page .input,.auth-page select,.auth-page textarea{background:#0b1726!important;color:#fff!important}
.auth-page h1,.auth-page h2,.auth-page h3{color:#fff!important}

/* Compact SonicPanel DJ-blok in de header */
.sonic-dj-header{flex:0 1 285px;width:285px;max-width:285px;height:56px;min-width:210px;padding:6px 9px}
.sonic-dj-label{flex:0 0 auto}
.sonic-dj-compact{display:block;flex:1;max-width:190px;height:42px;line-height:42px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.sonic-dj-compact>*{max-width:100%!important;max-height:42px!important;box-sizing:border-box!important}
.sonic-dj-compact iframe{width:100%!important;height:42px!important;min-height:0!important;overflow:hidden!important}
.sonic-dj-compact img{width:auto!important;height:34px!important;max-height:34px!important;object-fit:contain!important;vertical-align:middle}
.sonic-dj-compact table{width:100%!important;max-width:100%!important;font-size:12px!important;line-height:1.15!important}
.sonic-dj-compact td,.sonic-dj-compact div,.sonic-dj-compact span,.sonic-dj-compact a{max-width:100%!important;font-size:12px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
@media(max-width:1180px){.sonic-dj-header{width:100%;max-width:100%;flex-basis:100%}.sonic-dj-compact{max-width:calc(100% - 75px)}}


/* Achtergrondfix: absolute upload-URL en zichtbaar over het volledige chatgedeelte */
.chat{position:relative;background-color:var(--chat-bg,#07111e);background-image:linear-gradient(rgba(7,17,30,calc(1 - var(--custom-bg-opacity,1))),rgba(7,17,30,calc(1 - var(--custom-bg-opacity,1)))),var(--custom-bg);background-size:auto,var(--custom-bg-size,cover);background-position:center,var(--custom-bg-position,center center);background-repeat:no-repeat,var(--custom-bg-repeat,no-repeat);background-attachment:scroll,scroll}
.chat-head,.composer-wrap{background:rgba(7,17,30,.90);backdrop-filter:blur(4px)}
.messages{background-color:transparent!important;background-image:none!important}

/* Groter en beter leesbaar SonicPanel-blok bovenin */
.sonic-dj-header{flex:0 1 380px;width:380px;max-width:380px;height:68px;min-width:285px;padding:8px 12px;gap:12px}
.sonic-dj-label{font-size:14px}
.sonic-dj-compact{max-width:275px;height:50px;line-height:50px}
.sonic-dj-compact>*{max-height:50px!important}
.sonic-dj-compact iframe{height:50px!important}
.sonic-dj-compact img{height:42px!important;max-height:42px!important}
.sonic-dj-compact table{font-size:14px!important;line-height:1.25!important}
.sonic-dj-compact td,.sonic-dj-compact div,.sonic-dj-compact span,.sonic-dj-compact a{font-size:14px!important}
@media(max-width:1250px){.sonic-dj-header{width:100%;max-width:100%;flex-basis:100%}.sonic-dj-compact{max-width:calc(100% - 95px)}}
.sonic-player-wrap{width:100%;overflow:hidden;border-radius:12px;background:#06101c;border:1px solid rgba(255,255,255,.1);margin:.6rem 0}
.sonic-player-frame{display:block;width:100%;height:165px;border:0;background:transparent}
.radio-error{margin:.55rem 0;padding:.65rem .75rem;border-radius:9px;background:rgba(220,53,69,.14);border:1px solid rgba(220,53,69,.45);font-size:.88rem}
.radio-fallback{margin-top:.55rem}
.radio-title{min-width:0;flex:1}.radio-title strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Compactere groepswebcam naast de chat */
@media(min-width:981px){.layout{grid-template-columns:260px minmax(430px,1fr) minmax(290px,340px)}.webcam-docked{min-height:0;flex:0 0 auto}.webcam-side-frame{flex:none;height:280px;min-height:0}.rightbar.webcam-side{gap:10px}}
@media(max-width:980px){.rightbar.webcam-side{min-height:0}.webcam-docked{min-height:0;flex:0 0 auto}.webcam-side-frame{flex:none;height:300px;min-height:0}}

/* Footer onder de complete chat */
.chat-site-footer{width:100%;box-sizing:border-box;padding:14px 20px;text-align:center;background:#07111e;color:#e8eef8;border-top:1px solid rgba(255,255,255,.12);font-size:14px;line-height:1.5}
.chat-site-footer a{color:#70b7ff;font-weight:700;text-decoration:none}
.chat-site-footer a:hover,.chat-site-footer a:focus{text-decoration:underline}

/* Footer gecentreerd en headerlogo klikbaar */
.chat-site-footer{text-align:center;display:block;margin-inline:auto;}
.brand-logo-link{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-logo-link:focus-visible{outline:2px solid #70b7ff;outline-offset:4px;border-radius:5px;}