:root{font-family:"Segoe UI",Arial,sans-serif;color:#1c2e50;background:#f3f7fd;font-synthesis:none;--blue:#1755b8;--muted:#64738e;--line:#d8e2f0;--accent:#efae3e;--red:#9b4035}
*{box-sizing:border-box}
body{margin:0}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:wait}
button,a,input,select{outline-offset:4px}
button{border:1px solid var(--line);background:white;color:var(--blue);border-radius:8px;padding:10px 15px;font-weight:600}
button:hover{border-color:#6a91c7;background:#edf3ff}
.primary{background:var(--blue);border-color:var(--blue);color:white}
.primary:hover{background:#124796;color:white}
.danger{color:var(--red)}
.quiet{background:transparent}
.small{padding:6px 10px;font-size:13px}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted)}
h1,h2,h3,p{margin:0}
h1{font-size:34px;line-height:1.12;letter-spacing:-1.2px;font-weight:650}
h2{font-size:23px;letter-spacing:-.6px}
h3{font-size:17px}
p{line-height:1.6}
.loading{display:grid;min-height:100dvh;place-items:center}
.auth{min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-story{background:var(--blue);color:white;display:flex;flex-direction:column;justify-content:space-between;padding:54px 64px;position:relative;overflow:hidden}
.brand{display:flex;align-items:center;gap:12px;font-weight:650;font-size:20px;letter-spacing:-.4px}
.brand-mark{display:grid;place-items:center;background:var(--accent);color:var(--blue);width:38px;height:38px;border-radius:10px;font-size:24px}
.auth-story h1{font-size:clamp(40px,4.9vw,72px);max-width:620px;letter-spacing:-2px;line-height:1.06}
.auth-story p{color:#d2e2ff;max-width:390px;margin-top:22px;font-size:17px}
.auth-footer{color:#d2e2ff;font-size:13px;margin-top:40px}
.auth-form{align-self:center;width:100%;max-width:440px;padding:36px;margin:auto}
.auth-form>p{margin:12px 0 28px}
.field{display:grid;gap:7px;margin-bottom:18px;font-size:14px;font-weight:600}
input,select{width:100%;min-width:0;border:1px solid #c5d3e8;border-radius:7px;padding:12px;background:white;color:#1c2e50}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue);flex-shrink:0}
input[type=file]{padding:14px;border-style:dashed}
.check{display:flex;align-items:center;gap:9px;font-size:14px;margin:10px 0}
.auth-form .primary{width:100%;padding:13px}
.error{background:#f9e9e4;color:#8d322a;padding:12px;border-radius:7px;margin:16px 0;font-size:14px;line-height:1.5}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100dvh}
.sidebar{background:var(--blue);color:white;padding:29px 22px;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh}
.sidebar .brand{font-size:18px}
.school-note{font-size:11px;letter-spacing:1.8px;margin:12px 0 42px 50px;color:#c5d7f4}
.nav{display:grid;gap:6px}
.nav button{border:0;color:#c6d6f5;background:transparent;text-align:left;padding:13px 14px;display:flex;align-items:center;gap:12px;font-size:14px}
.nav button.active{color:white;background:#2d5ab0}
.nav button:hover{background:#23498f}
.nav-icon{font-size:11px;min-width:25px;font-weight:700;letter-spacing:.3px}
.sidebar-bottom{margin-top:auto;padding-top:30px;font-size:12px;color:#c5d5f1}
.network-indicator{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.dot{display:inline-block;width:7px;height:7px;background:#488ee7;border-radius:50%}
.dot.amber{background:#ca9132}
.account{border-top:1px solid #49649c;padding-top:18px;display:flex;gap:10px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:#355ca6;display:grid;place-items:center;font-weight:700;color:white}
.account strong{display:block;color:white;font-size:13px}
.account button{padding:5px 8px;font-size:11px;color:#e3edff;border:1px solid #6783b8;background:transparent;margin-left:auto}
.main{padding:36px 42px;min-width:0;max-width:1600px;width:100%;margin:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:33px;gap:16px}
.topbar p{font-size:13px;margin-top:8px}
.date{font-size:13px;color:var(--muted);text-align:right}
.page-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px}
.page-title p{margin-top:8px;font-size:14px;color:var(--muted)}
.intro-banner{background:#e5eefd;display:flex;align-items:center;justify-content:space-between;padding:28px 30px;border-radius:12px;margin-bottom:28px;gap:20px}
.intro-banner h2{font-size:27px}
.intro-banner p{font-size:14px;max-width:520px;margin-top:9px;color:#4b6287}
.capacity{text-align:right;white-space:nowrap}
.capacity strong{display:block;font-size:40px;letter-spacing:-2px}
.capacity span{font-size:12px;color:var(--muted)}
.tv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:30px}
.tv-card{background:white;border:1px solid var(--line);border-radius:11px;padding:21px}
.tv-card.selected{border-color:#3570c8;box-shadow:0 0 0 1px #3570c8}
.tv-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}
.tv-heading label{display:flex;align-items:center;gap:10px;min-width:0}
.tv-heading h3{overflow-wrap:anywhere}
.status{font-size:11px;font-weight:650;padding:5px 8px;border-radius:5px;background:#eaf1ff;color:#2d5b9c;white-space:nowrap}
.status.error{color:var(--red);background:#f9e9e4;margin:0}
.screen{height:132px;border-radius:6px;background:#edf2fb;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;margin-bottom:18px;color:#4b6691;padding:18px;text-align:center}
.screen.playing{background:#163d83;color:#dfeaff}
.screen strong{font-size:17px}
.screen span{font-size:12px}
.screen .screen-symbol{font-size:27px;font-weight:300;line-height:1}
.tv-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);gap:10px;margin-bottom:17px}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tv-card>.actions{padding-top:15px;border-top:1px solid #edf2fb}
.empty{padding:42px 28px;background:white;border:1px dashed #c3d2e9;border-radius:10px;text-align:center}
.empty h3{margin-bottom:10px}
.empty p{font-size:14px;color:var(--muted);max-width:520px;margin:0 auto 20px}
.section{margin:28px 0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-heading a{font-size:13px;color:var(--blue)}
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);gap:25px}
.panel{background:white;border:1px solid var(--line);border-radius:10px;padding:23px}
.panel h3{margin-bottom:16px}
.help{font-size:13px;color:var(--muted);line-height:1.65}
.media-list{display:grid;gap:8px}
.media-row{display:flex;align-items:center;gap:14px;padding:14px;background:white;border:1px solid var(--line);border-radius:9px;min-width:0}
.media-kind{width:42px;height:42px;border-radius:7px;background:#e5edfb;display:grid;place-items:center;font-size:11px;letter-spacing:.7px;font-weight:700;flex-shrink:0}
.media-info{min-width:0;flex:1}
.media-info strong{display:block;font-size:14px;overflow-wrap:anywhere}
.media-info span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.media-row .actions{flex-shrink:0}
.queue-bar{position:sticky;bottom:15px;background:var(--blue);color:white;padding:17px 22px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:22px;box-shadow:0 5px 25px #1755b822}
.queue-bar p{font-size:12px;color:#c8dcff;margin-top:4px}
.queue-bar button{background:var(--accent);border-color:var(--accent)}
.playlist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.playlist{background:white;border:1px solid var(--line);border-radius:10px;padding:24px}
.playlist-count{color:#8b733d;font-size:12px;margin-bottom:13px}
.playlist h3{font-size:21px;margin-bottom:11px}
.playlist ol{padding-left:20px;margin:16px 0 24px;color:var(--muted);font-size:13px;line-height:1.9;max-height:180px;overflow:auto}
.playlist-footer{border-top:1px solid var(--line);padding-top:15px;display:flex;gap:8px;flex-wrap:wrap}
.notice{padding:17px 20px;border-left:3px solid var(--accent);background:#f5eedc;font-size:13px;line-height:1.7;margin-bottom:23px;color:#715f34}
.notice strong{display:block}
.search-form{display:flex;gap:10px;margin:20px 0}
.youtube-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.youtube-result{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:white}
.youtube-result img{width:100%;aspect-ratio:16/9;object-fit:cover}
.youtube-result div{padding:16px}
.youtube-result h3{font-size:15px;margin-bottom:8px}
.youtube-result p{font-size:12px;color:var(--muted);margin-bottom:14px}
.activity{display:grid;gap:15px}
.activity-row{display:flex;align-items:start;justify-content:space-between;gap:15px;font-size:13px}
.activity-row p{font-size:12px;color:var(--muted);margin-top:4px}
.activity-row time{font-size:11px;white-space:nowrap;color:var(--muted)}
.progress-job{background:#f8edcf;color:#715e2d;padding:12px 16px;margin:12px 0;border-radius:7px;font-size:13px}
.tools{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.tool{font-size:12px;padding:7px 10px;background:#e4edfc;border-radius:5px}
.tool.missing{background:#f7e3db;color:var(--red)}
dialog{border:1px solid var(--line);border-radius:14px;padding:28px;width:min(640px,calc(100% - 32px));max-height:88dvh;color:#1c2e50;background:#f7faff}
dialog::backdrop{background:#101f5888;backdrop-filter:blur(3px)}
.dialog-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}
.dialog-head button{padding:4px 10px}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}
.choice-list{max-height:260px;overflow:auto;background:white;border:1px solid var(--line);border-radius:8px;padding:10px 15px}
.choice-list .check{padding:7px 0}
.builder-list{padding:0;list-style:none;display:grid;gap:8px;max-height:240px;overflow:auto;margin-bottom:18px}
.builder-list li{background:white;border:1px solid var(--line);border-radius:7px;padding:10px;display:flex;align-items:center;gap:8px}
.builder-list span{font-size:13px;flex:1;overflow-wrap:anywhere}
video,audio{width:100%;max-height:55dvh;background:#0b1537;border-radius:8px}
iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px;min-height:220px}
.form-error:empty{display:none}
.form-error{color:#8d322a;font-size:13px;margin-top:13px;line-height:1.6}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#193f83;color:white;padding:14px 22px;border-radius:9px;box-shadow:0 4px 25px #0002;max-width:min(650px,90vw);z-index:20;font-size:14px;display:none}
#toast.visible{display:block}
#toast.bad{background:#873d31}
.users{display:grid;gap:12px}
.user-row{padding:15px;background:white;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:14px}
.user-row .media-info{flex:1}
.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.setting-grid .panel{align-self:start}
.footer-note{font-size:12px;color:var(--muted);margin-top:30px}
.nowrap{white-space:nowrap}
@media(min-width:1500px){.main{padding:40px 55px}
.screen{height:170px}
}
@media(max-width:1050px){.shell{grid-template-columns:190px 1fr}
.sidebar{padding:25px 15px}
.main{padding:28px 25px}
.split,.setting-grid{grid-template-columns:1fr}
.auth-story{padding:40px}
.media-row{flex-wrap:wrap}
.media-row .actions{margin-left:56px}
.auth-story h1{font-size:48px}
}
@media(max-width:730px){.shell{display:block}
.sidebar{height:auto;position:static;padding:16px 20px}
.sidebar .brand{font-size:17px}
.brand-mark{width:31px;height:31px;font-size:20px}
.school-note,.sidebar-bottom{display:none}
.nav{display:flex;overflow:auto;gap:3px;margin-top:16px}
.nav button{padding:9px 11px;white-space:nowrap;font-size:12px}
.nav-icon{display:none}
.main{padding:22px 18px}
.topbar{margin-bottom:24px;padding-bottom:20px}
h1{font-size:27px}
.topbar .date{display:none}
.tv-grid,.playlist-grid{grid-template-columns:1fr}
.intro-banner{padding:22px}
.intro-banner h2{font-size:23px}
.capacity strong{font-size:32px}
.intro-banner p{font-size:13px}
.queue-bar{flex-wrap:wrap}
.page-title{align-items:flex-start}
.page-title>.actions{justify-content:flex-end}
.auth{grid-template-columns:1fr}
.auth-story{padding:26px;gap:35px}
.auth-story h1{font-size:36px;max-width:500px;margin-top:15px}
.auth-story p{display:none}
.auth-footer{margin-top:0}
.auth-form{padding:30px 26px}
.youtube-results{grid-template-columns:1fr}
.panel{padding:19px}
.media-row .actions{margin-left:0}
.search-form{flex-wrap:wrap}
.search-form input{flex:1;min-width:180px}
}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s}
.tv-card{transition:border-color .15s}
}

.download-error{font-size:12px;line-height:1.6;color:var(--red);margin-top:8px;overflow-wrap:anywhere}
.download-error:empty{display:none}


.sidebar{background:#132c70}.auth-story{background:#154fae}.brand{gap:12px;align-items:center}.school-logo{display:block;object-fit:contain;background:white;border-radius:10px;padding:4px;flex-shrink:0;width:52px;height:52px}.brand-copy{display:block;min-width:0}.brand-copy strong{font-size:18px;font-weight:700;display:block;line-height:1.15}.brand-copy small{display:block;font-size:9px;letter-spacing:.8px;line-height:1.6;margin-top:5px;color:#d7e6ff;text-transform:uppercase}.sidebar .brand-copy strong{font-size:17px}.sidebar .school-logo{width:45px;height:45px}.school-note{margin-left:57px}.auth-story .school-logo{width:78px;height:78px;padding:5px}.auth-story .brand-copy strong{font-size:27px}.auth-story .brand-copy small{font-size:12px;letter-spacing:1.5px}.auth-footer strong{display:block;color:white;font-weight:600;font-size:15px;margin-bottom:9px}.notice{border-left-color:#3e77d4;background:#eaf1ff;color:#345581}.auth-form>.eyebrow{color:#1755b8;margin-bottom:10px}.sidebar .brand{margin-bottom:3px}@media(max-width:1050px) and (min-width:731px){.sidebar .brand{gap:8px}.sidebar .school-logo{width:38px;height:38px}.sidebar .brand-copy strong{font-size:15px}.sidebar .brand-copy small{font-size:8px;letter-spacing:0}.school-note{margin-left:46px}}@media(max-width:730px){.auth-story .school-logo{width:59px;height:59px}.auth-story .brand-copy strong{font-size:24px}.auth-story .brand-copy small{font-size:10px}.sidebar .school-logo{width:43px;height:43px}.sidebar .brand-copy small{font-size:9px}.auth-story{gap:28px}}