*{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}