:root{--bg:#0f0f0f;--panel:#181818;--soft:#222;--line:#343434;--text:#f5f5f5;--muted:#aaa;--accent:#ff0033;--danger:#ff5a67;color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0;background:var(--bg);color:var(--text)}body{font-size:14px}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,.button{border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text);cursor:pointer}.topbar{position:sticky;z-index:100;top:0;display:flex;align-items:center;gap:24px;height:64px;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(15,15,15,.96);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:9px;font-size:20px;letter-spacing:-.04em}.brand-play{display:grid;place-items:center;width:35px;height:25px;border-radius:8px;background:var(--accent);color:#fff;font-size:14px}.main-nav{display:flex;align-items:center;gap:4px}.main-nav a,.account-menu>a,.account-menu button{padding:10px 13px;border-radius:10px;color:#ddd}.main-nav a:hover,.main-nav a.active,.account-menu>a:hover,.account-menu button:hover{background:#2b2b2b;color:#fff}.account-menu{display:flex;align-items:center;gap:3px;margin-left:auto}.account-menu form{margin:0}.account-menu button{border:0;background:transparent}.page{width:100%;max-width:none;margin:0;padding:18px 22px 30px}.landing{max-width:1300px;margin:0 auto;padding-top:6vh}.landing>header small{color:var(--accent);font-weight:900;letter-spacing:.17em}.landing>header h1{margin:12px 0;font-size:clamp(38px,6vw,78px);line-height:1.02;letter-spacing:-.07em}.landing>header p{color:var(--muted);font-size:clamp(16px,2vw,22px)}.room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:50px}.room{position:relative;display:flex;align-items:end;gap:16px;min-height:260px;padding:28px;border:1px solid #383838;border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#292929,#171717);box-shadow:0 20px 60px #0007}.room:before{content:"";position:absolute;inset:auto -15% -55% 35%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--room-color),transparent 66%);opacity:.42}.room>span,.room>div{position:relative}.room>span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--room-color);font-size:23px}.room b,.room small{display:block}.room b{font-size:clamp(22px,2.5vw,34px)}.room small{margin-top:7px;color:#bbb}.room.yt{--room-color:#ff0033}.room.music{--room-color:#c100ff}.room.kids{--room-color:#00a8ff}.login-page{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at 50% 0,#381018,transparent 40rem),#0f0f0f}.login-page .page{display:grid;place-items:center}.login-card{width:min(420px,calc(100vw - 28px));padding:34px;border:1px solid var(--line);border-radius:24px;background:#181818;box-shadow:0 24px 80px #0009}.login-logo{display:flex;align-items:center;gap:10px}.login-logo span{display:grid;place-items:center;width:42px;height:30px;border-radius:9px;background:var(--accent)}.login-card h1{margin:32px 0 4px;font-size:30px}.login-card p{margin:0 0 24px;color:var(--muted)}label{display:grid;gap:7px;margin:13px 0;color:#ccc;font-weight:700}input,select{width:100%;min-height:44px;padding:0 13px;border:1px solid #444;border-radius:10px;background:#111;color:#fff}.primary{min-height:44px;padding:0 18px;border-color:var(--accent);background:var(--accent);color:#fff;font-weight:850}.login-card .primary{width:100%;margin-top:12px}.alert{margin:12px 0;padding:12px 14px;border-radius:10px}.alert.error{background:#44141b;color:#ffb2ba}.alert.ok{background:#123c2a;color:#a6efc4}.admin-shell{max-width:1200px;margin:0 auto}.admin-shell>header{margin:18px 0 28px}.admin-shell h1{margin:0;font-size:36px}.admin-shell header p{color:var(--muted)}.settings-grid,.users-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.panel{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.panel h2{margin:0 0 18px}.row{display:flex;gap:8px;margin-top:15px}.row>*{display:grid;place-items:center;min-height:42px;padding:0 14px}.checks{display:flex;flex-wrap:wrap;gap:9px}.checks label{display:flex;align-items:center;gap:6px;margin:4px 0;padding:8px 10px;border-radius:9px;background:#242424}.checks input{width:auto;min-height:0}.user-list{display:grid;gap:8px}.user-list button{display:block;padding:14px;text-align:left}.user-list b,.user-list small{display:block}.user-list small{margin-top:5px;color:var(--muted)}
/* Compatibility layer for the three migrated, proven room UIs. */
.page>style+*{max-width:none}.muted{color:var(--muted)}.danger{color:var(--danger)}
@media(max-width:800px){.topbar{height:auto;min-height:58px;padding:8px 12px;gap:8px;flex-wrap:wrap}.brand{font-size:17px}.main-nav{order:3;width:100%;overflow-x:auto}.main-nav a{flex:1;min-width:max-content;text-align:center}.account-menu{gap:0}.account-menu>a,.account-menu button{padding:8px}.page{padding:12px}.room-grid,.settings-grid,.users-layout{grid-template-columns:1fr}.room{min-height:170px}.landing{padding-top:3vh}.landing>header h1{font-size:42px}}

/* Official service branding. The source images are intentionally shown at their
   native proportions instead of being cropped into synthetic icon tiles. */
.main-nav a{display:flex;align-items:center;gap:8px}
.main-nav a img{display:block;width:auto;height:24px;max-width:118px;border-radius:4px;object-fit:contain}
.main-nav a span{display:none}
.room{flex-direction:column;align-items:flex-start;justify-content:flex-end}
.room-logo{position:relative;display:block;width:auto;height:clamp(34px,3.3vw,50px);max-width:88%;border-radius:7px;object-fit:contain}
.service-logo{display:block;width:auto;max-width:min(42vw,220px);height:40px;border-radius:6px;object-fit:contain}
.service-logo-music{height:42px}.service-logo-kids{height:38px}
.yt-brand .service-logo{height:34px;max-width:150px}.ytm-brand .service-logo{height:42px;max-width:180px}.ytk-brand .service-logo{height:38px;max-width:165px}

/* Three independent, private YouTube API key slots. */
.youtube-settings{grid-column:1/-1}.api-key-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0}
.api-key-card{padding:14px;border:1px solid var(--line);border-radius:14px;background:#121212}.api-key-card header{display:flex;align-items:center;justify-content:space-between;gap:8px}.api-key-card h3{margin:0;font-size:15px}.api-key-state{color:var(--muted);font-size:12px}.api-key-card label{margin:11px 0 8px}.key-clear{display:flex;align-items:center;gap:7px;margin:9px 0 0;color:#d8a9ad;font-size:12px}.key-clear input,.inline-check input{width:auto;min-height:0}.usage-track{height:7px;margin-top:10px;border-radius:999px;overflow:hidden;background:#303030}.usage-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#35c66d,#ffbf42,#ff4c62)}.usage-text{display:block;margin-top:6px;color:var(--muted);font-size:11px}.config-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.inline-check{display:flex;align-items:center;gap:8px;margin:13px 0}.oauth-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.settings-actions>*{display:grid;place-items:center;min-height:44px;padding:0 16px}
@media(max-width:800px){.main-nav a{justify-content:center}.main-nav a img{height:21px}.main-nav a span{display:none}.service-logo{max-width:58vw}.api-key-grid,.config-grid,.oauth-grid{grid-template-columns:1fr}.room-logo{height:40px}.yt-brand .service-logo,.ytm-brand .service-logo,.ytk-brand .service-logo{height:31px;max-width:145px}}