*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--page-background);color:var(--page-text);font-family:var(--theme-font);line-height:1.55;transition:background .25s,color .25s}a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.theme-background{position:fixed;inset:0;z-index:-3;pointer-events:none}.site-header{height:68px;padding:0 18px;position:sticky;top:0;z-index:1000;background:var(--header-background);color:var(--header-text);display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 22px var(--shadow-color);backdrop-filter:blur(10px)}.header-left,.header-actions,.actions,.row-actions,.queue-add,.panel-head,.section-head,.page-title{display:flex;align-items:center;gap:10px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.12rem;font-weight:800}.brand-icon{font-size:1.5rem}.icon-btn{width:44px;height:44px;border:1px solid color-mix(in srgb,var(--header-text) 22%,transparent);border-radius:12px;background:var(--header-hover);color:var(--header-text);display:grid;place-items:center}.mobile-menu-btn{display:none}.app-layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 68px)}.sidebar{position:sticky;top:68px;height:calc(100vh - 68px);overflow:auto;padding:15px;background:var(--drawer-background);color:var(--drawer-text);border-right:1px solid var(--border-color);z-index:900}.sidebar nav{display:grid;gap:5px}.sidebar a{min-height:50px;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--radius-sm);text-decoration:none;color:var(--drawer-text);font-weight:650}.sidebar a:hover,.sidebar a:focus-visible{background:var(--drawer-hover);outline:2px solid transparent}.main-content{padding:22px;min-width:0;max-width:1600px;width:100%;margin:0 auto}.site-footer{padding:20px;text-align:center;background:var(--footer-background);color:var(--footer-text);position:relative;z-index:2}.page-title,.section-head{justify-content:space-between;align-items:flex-start;margin-bottom:16px}.page-title h1,.section-head h2{margin:.1rem 0}.page-title p,.section-head p{margin:.25rem 0;color:var(--page-muted)}.eyebrow{font-size:.74rem;letter-spacing:.12em;font-weight:800;color:var(--theme-primary)}.grid,.stats-grid,.form-grid,.info-grid{display:grid;gap:14px}.grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:18px}.form-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.info-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:10px 0 18px}.info-grid>div{padding:12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--card-background) 80%,transparent)}.info-grid span{display:block;color:var(--card-muted);font-size:.82rem}.info-grid strong{display:block;margin-top:4px;word-break:break-word}.card,.stat-card,.login-card,.modal-card,.subpanel{background:var(--card-background);color:var(--card-text);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--card-shadow)}.card{padding:19px;margin-bottom:18px}.stat-card{padding:17px;display:grid;gap:5px}.stat-card span,.stat-card small{color:var(--card-muted)}.stat-card strong{font-size:1.22rem;overflow-wrap:anywhere}.hero{padding:28px;margin-bottom:18px;border-radius:calc(var(--radius) + 4px);background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary));color:#fff;box-shadow:var(--card-shadow)}.dashboard-hero{display:flex;justify-content:space-between;align-items:center;gap:20px}.dashboard-hero h1{font-size:clamp(2.7rem,7vw,5.4rem);line-height:1;margin:.2rem 0}.hero-status{font-weight:800;background:rgba(255,255,255,.16);padding:12px 16px;border-radius:999px}.notice,.alert{padding:13px 15px;border-radius:12px;margin-bottom:14px;background:color-mix(in srgb,var(--info-color) 13%,var(--card-background));border:1px solid color-mix(in srgb,var(--info-color) 32%,transparent)}.alert.error{background:color-mix(in srgb,var(--danger-color) 12%,var(--card-background));border-color:color-mix(in srgb,var(--danger-color) 35%,transparent)}.muted{color:var(--card-muted)}.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--theme-primary) 12%,var(--card-background));color:var(--card-text);border:1px solid color-mix(in srgb,var(--theme-primary) 28%,transparent);font-size:.8rem;font-weight:700}.badge.success{background:color-mix(in srgb,var(--success-color) 15%,var(--card-background));color:var(--card-text)}.muted-badge{opacity:.7}.danger-badge{background:color-mix(in srgb,var(--danger-color) 15%,var(--card-background))}.table-wrap{width:100%;overflow:auto;border:1px solid var(--border-color);border-radius:var(--radius-sm)}table{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;background:var(--card-background);color:var(--card-text)}th,td{padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-color)}th{position:sticky;top:0;background:color-mix(in srgb,var(--theme-primary) 9%,var(--card-background));z-index:1;font-size:.86rem}tbody tr:hover{background:color-mix(in srgb,var(--theme-primary) 5%,var(--card-background))}tbody tr:last-child td{border-bottom:0}.empty{text-align:center;color:var(--card-muted);padding:28px}label{display:grid;gap:6px;margin:8px 0;font-weight:650;color:var(--card-text)}input,select,textarea{width:100%;min-height:44px;border:1px solid var(--input-border);border-radius:10px;background:var(--input-background);color:var(--input-text);padding:9px 11px;outline:none}textarea{min-height:100px;resize:vertical}input::placeholder,textarea::placeholder{color:var(--input-placeholder)}input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--focus-color) 38%,transparent);outline-offset:2px}input[type=checkbox],input[type=radio]{width:18px;min-height:18px;accent-color:var(--theme-primary)}button,.button{min-height:44px;padding:9px 14px;border:0;border-radius:10px;background:var(--button-background);color:var(--button-text);font-weight:750;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s,filter .15s,background .15s}button:hover,.button:hover{background:var(--button-hover);transform:translateY(-1px)}button.secondary,.button.secondary{background:#596579;color:#fff}.danger{background:var(--danger-color)!important;color:#fff!important}.actions,.row-actions{flex-wrap:wrap}.actions>*{flex:0 0 auto}.row-actions form{margin:0}.row-actions button{min-height:36px;padding:6px 9px;font-size:.84rem}.inline-rename{display:flex;gap:6px;align-items:center}.inline-rename input{min-width:170px;min-height:36px}.days{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.days label,.check-card{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--border-color);border-radius:10px;background:color-mix(in srgb,var(--theme-primary) 4%,var(--card-background));margin:0}.subpanel{padding:16px;margin:12px 0}.hidden{display:none!important}.queue-builder{padding:14px;border:1px dashed color-mix(in srgb,var(--theme-primary) 45%,var(--border-color));border-radius:12px;margin:12px 0}.queue-builder h3{margin-top:0}.queue-add select{flex:1}.queue-list{display:grid;gap:7px;padding-left:24px}.queue-list li{padding:8px 9px;background:color-mix(in srgb,var(--theme-primary) 5%,var(--card-background));border:1px solid var(--border-color);border-radius:9px}.queue-list li>div{float:right;display:flex;gap:4px}.queue-list button{min-height:30px;padding:3px 8px}.upload-zone{padding:15px;border:2px dashed color-mix(in srgb,var(--theme-primary) 32%,var(--border-color));border-radius:14px;background:color-mix(in srgb,var(--theme-primary) 3%,var(--card-background));margin-bottom:14px}.quick-actions .actions{gap:10px}.login-shell{min-height:calc(100vh - 150px);display:grid;place-items:center;padding:20px}.login-card{width:min(480px,100%);padding:30px}.login-icon{font-size:3rem}.login-card details{margin-top:18px;color:var(--card-muted)}code,.code{font-family:Consolas,"Courier New",monospace;background:color-mix(in srgb,var(--theme-primary) 8%,var(--card-background));padding:3px 6px;border-radius:6px;overflow-wrap:anywhere}.theme-settings-panel{position:fixed;right:-390px;top:68px;width:min(370px,92vw);height:calc(100vh - 68px);overflow:auto;z-index:1600;padding:18px;background:var(--drawer-background);color:var(--drawer-text);border-left:1px solid var(--border-color);box-shadow:-12px 0 30px var(--shadow-color);transition:right .25s}.theme-settings-panel.open{right:0}.theme-settings-panel .panel-head{justify-content:space-between;position:sticky;top:-18px;background:var(--drawer-background);padding:12px 0;z-index:1}.theme-settings-panel .icon-btn{color:var(--drawer-text);border-color:var(--border-color);background:var(--drawer-hover)}.font-preview{padding:12px;border:1px solid var(--border-color);border-radius:10px;margin:8px 0;background:var(--card-background);color:var(--card-text)}.custom-theme-controls{display:none;padding:10px;border:1px solid var(--border-color);border-radius:12px}.custom-theme-controls.show{display:grid;grid-template-columns:1fr 1fr;gap:6px}.custom-theme-controls h4{grid-column:1/-1}.custom-theme-controls input[type=color]{padding:3px;height:42px}.mobile-overlay{display:none;position:fixed;inset:68px 0 0;background:rgba(0,0,0,.45);z-index:1100}.modal-backdrop{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);display:none;place-items:center;padding:18px}.modal-backdrop.open{display:grid}.modal-card{width:min(900px,96vw);max-height:92vh;overflow:auto;padding:18px}.modal-card .panel-head{justify-content:space-between}.modal-card .icon-btn{color:var(--card-text);background:transparent;border-color:var(--border-color)}hr{border:0;border-top:1px solid var(--border-color);margin:20px 0}details{border:1px solid var(--border-color);border-radius:10px;padding:10px;margin-top:14px}summary{cursor:pointer;font-weight:750}
@media(max-width:900px){.mobile-menu-btn{display:grid}.app-layout{grid-template-columns:1fr}.sidebar{position:fixed;left:-285px;top:68px;width:275px;height:calc(100vh - 68px);z-index:1200;transition:left .24s}.nav-open .sidebar{left:0}.nav-open .mobile-overlay{display:block}.nav-open{overflow:hidden}.main-content{padding:14px}.dashboard-hero{align-items:flex-start;flex-direction:column}.page-title,.section-head{align-items:stretch;flex-direction:column}.section-head>button{align-self:flex-start}.row-actions{min-width:210px}.theme-settings-panel{z-index:1700}}
@media(max-width:600px){.site-header{height:62px;padding:0 10px}.app-layout{min-height:calc(100vh - 62px)}.sidebar{top:62px;height:calc(100vh - 62px)}.mobile-overlay{inset:62px 0 0}.theme-settings-panel{top:62px;height:calc(100vh - 62px)}.brand{font-size:1rem}.main-content{padding:10px}.card{padding:14px}.stats-grid{grid-template-columns:1fr 1fr;gap:8px}.stat-card{padding:12px}.stat-card strong{font-size:1rem}.actions>*{width:100%}.actions form{width:100%}.actions button,.actions .button{width:100%}.row-actions>*{width:100%}.row-actions form{width:100%}.row-actions button{width:100%}.queue-add{flex-direction:column;align-items:stretch}.queue-add button{width:100%}.inline-rename{flex-direction:column;align-items:stretch}.inline-rename input{min-width:0}.custom-theme-controls{grid-template-columns:1fr}}
@media print{*,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important}body{background:#fff!important;color:#000!important;font-family:"Sarabun",sans-serif!important}.theme-effects,.theme-background,.site-header,.site-footer,.sidebar,.mobile-overlay,.theme-settings-panel,.no-print,button{display:none!important}.app-layout{display:block!important}.main-content{padding:0!important;max-width:none!important}.card,.stat-card{background:#fff!important;color:#000!important;border:1px solid #bbb!important}table{color:#000!important;background:#fff!important}th{background:#eee!important;color:#000!important}}

.userbar{display:flex;justify-content:flex-end;gap:8px;color:var(--page-muted);margin-bottom:12px}.server-brand-sub{font-size:.72rem;opacity:.8}.flash-server{margin-bottom:12px}.top-actions{display:flex;gap:8px;align-items:center}


/* v0.5 Schedule Builder */
.schedule-basic{display:grid;grid-template-columns:minmax(220px,2fr) minmax(150px,1fr);gap:14px}
.schedule-days-box{margin:14px 0;padding:14px;border:1px solid var(--border-color);border-radius:14px;background:color-mix(in srgb,var(--theme-primary) 3%,var(--card-background))}
.schedule-days-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.day-presets{display:flex;gap:6px;flex-wrap:wrap}.day-presets button{min-height:34px;padding:5px 10px}
.sound-sequence-grid{display:grid;gap:12px;margin:16px 0}
.sound-step{position:relative;padding:15px;border:1px solid color-mix(in srgb,var(--theme-primary) 28%,var(--border-color));border-radius:15px;background:color-mix(in srgb,var(--theme-primary) 4%,var(--card-background));transition:opacity .18s,border-color .18s,background .18s}
.sound-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:15px 0 0 15px;background:var(--theme-primary)}
.sound-step-toggle{display:flex;align-items:center;gap:10px;margin:0;font-size:1rem}
.sound-step-toggle span{display:flex;align-items:center;gap:8px}.sound-step-toggle b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--theme-primary);color:#fff;font-size:.82rem}
.sound-step-controls{margin-top:10px;padding-left:36px}.sound-step-controls>label{margin-top:0}
.sound-step.sound-disabled{opacity:.55;background:color-mix(in srgb,var(--card-muted) 6%,var(--card-background))}
.sound-step.sound-disabled::before{background:var(--card-muted)}
.sound-step.enabled-always{background:color-mix(in srgb,var(--success-color) 5%,var(--card-background))}
.activity-list{list-style:none;padding:0;margin:10px 0}
.activity-list li{display:flex;align-items:center;justify-content:space-between;gap:12px}
.audio-file-name{min-width:0;overflow-wrap:anywhere;font-weight:650}.queue-row-actions{display:flex;gap:4px;flex-shrink:0}
.schedule-legend{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}.schedule-legend span,.sound-chip{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;border:1px solid var(--border-color);background:color-mix(in srgb,var(--theme-primary) 7%,var(--card-background));font-size:.82rem}
.schedule-sound-summary{display:flex;gap:5px;flex-wrap:wrap;max-width:520px}.schedule-time{font-size:1.15rem}
.save-schedule-btn{margin-top:12px;min-width:210px}.schedule-modal-card{width:min(980px,97vw)}
.advanced-settings{margin-top:14px}.advanced-settings summary{padding:4px 0}
.audio-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:12px}.audio-toolbar label{margin:0;min-width:200px}.audio-toolbar input,.audio-toolbar select{min-height:40px}
.audio-category-badge{white-space:nowrap}
@media(max-width:700px){.schedule-basic{grid-template-columns:1fr}.sound-step-controls{padding-left:0}.activity-list li{align-items:flex-start;flex-direction:column}.queue-row-actions{width:100%}.queue-row-actions button{flex:1}.schedule-days-head{align-items:flex-start;flex-direction:column}.day-presets{width:100%}.day-presets button{flex:1}.schedule-table{min-width:920px}}


/* v0.7 ESP32 provisioning and telemetry */
.telemetry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.telemetry-grid>div{padding:13px;border:1px solid var(--border-color);border-radius:12px;background:color-mix(in srgb,var(--theme-primary) 4%,var(--card-background));min-width:0}
.telemetry-grid span{display:block;color:var(--card-muted);font-size:.8rem}
.telemetry-grid strong{display:block;margin-top:4px;overflow-wrap:anywhere;font-size:1.03rem}
.pairing-code{display:inline-block;font-size:1.35rem;letter-spacing:.18em;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,var(--theme-primary) 12%,var(--card-background))}


/* v0.8 School Tenant Portal */
.tenant-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--theme-primary) 12%,var(--card-background));font-weight:750}
.portal-url-box{display:flex;gap:7px;align-items:center;flex-wrap:wrap;max-width:520px}.portal-url-box a{overflow-wrap:anywhere}
.permission-box{margin:16px 0;padding:15px;border:1px solid var(--border-color);border-radius:16px;background:color-mix(in srgb,var(--theme-primary) 4%,var(--card-background))}
.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px}.permission-grid .check-card{align-items:flex-start}.permission-grid small{display:block;color:var(--card-muted);margin-top:3px}
.portal-help{margin-top:18px}.school-login-card{border-top:5px solid var(--school-primary,#1769e0)}
@media(max-width:700px){.portal-url-box{display:block}.portal-url-box button{margin-top:7px;width:100%}.permission-grid{grid-template-columns:1fr}}

/* ========================================================================
   SchoolBell Theme UX v1.2.0 — layout and component mapping
   Basis: uploaded TreeManager assets package
   ======================================================================== */
*{box-sizing:border-box}
html{min-height:100%;scroll-padding-top:calc(var(--header-height) + 18px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:transparent;color:var(--text-primary);line-height:1.58;overflow-x:hidden}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.theme-background,.theme-background-layer{position:fixed;inset:0;z-index:var(--z-background);pointer-events:none}
.theme-effects{z-index:calc(var(--z-content) - 1)}

.container{width:min(100%,1720px);margin-inline:auto;padding-inline:clamp(14px,2.2vw,34px)}
.master-header{position:sticky;top:0;width:100%;z-index:var(--z-header);flex:0 0 auto}
.header-container{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--header-height);gap:clamp(8px,1vw,16px)}
.logo-area{display:flex;align-items:center;gap:10px;min-width:0;max-width:min(330px,25vw);font-weight:800;color:var(--header-text)}
.logo-area .logo-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:color-mix(in srgb,var(--primary) 13%,transparent);font-size:1.55rem}
.logo-area .brand-copy{min-width:0;display:grid;line-height:1.2}
.logo-area .brand-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(1rem,1.2vw,1.22rem);font-weight:800}
.logo-area .brand-subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;color:var(--header-muted);font-weight:600}
.main-nav{min-width:0;flex:1 1 auto}
.nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(2px,.45vw,8px);padding:0;margin:0;list-style:none;white-space:nowrap}
.nav-links>li{min-width:0}
.nav-links a{display:flex;align-items:center;gap:6px;min-height:44px;padding:9px clamp(8px,.7vw,13px);border-radius:var(--radius-sm);text-decoration:none;color:var(--header-text);font-size:clamp(.82rem,.88vw,.95rem);font-weight:650;transition:var(--transition)}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.active{background:var(--menu-hover-bg);color:var(--menu-hover-text)}
.nav-links a.active{box-shadow:inset 0 -3px 0 var(--accent)}
.nav-icon{font-size:1.12em;line-height:1}
.user-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.header-user-link{max-width:220px;min-height:44px;display:flex;align-items:center;gap:8px;padding:6px 10px;text-decoration:none;border:1px solid color-mix(in srgb,var(--header-border) 65%,transparent);border-radius:var(--radius-pill);color:var(--header-text)}
.header-user-copy{min-width:0;display:grid;line-height:1.18}
.header-user-copy strong,.header-user-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-user-copy small{color:var(--header-muted)}
.header-icon-btn,.mobile-menu-btn,.icon-btn{width:44px;height:44px;min-width:44px;padding:0;display:inline-grid;place-items:center;border:1px solid var(--header-border);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--header-bg) 82%,transparent);color:var(--header-text);font-size:1.08rem;transition:var(--transition)}
.header-icon-btn:hover,.mobile-menu-btn:hover,.icon-btn:hover{background:var(--menu-hover-bg);color:var(--menu-hover-text);transform:translateY(-1px)}
.mobile-menu-btn{display:none}
.mobile-drawer-overlay{position:fixed;inset:var(--header-height) 0 0;background:rgba(0,0,0,.52);opacity:0;visibility:hidden;transition:.25s;z-index:var(--z-overlay)}
.mobile-drawer-overlay.is-open{opacity:1;visibility:visible}
body.drawer-open{overflow:hidden}
.mobile-user-menu{display:none}

.master-content{position:relative;z-index:var(--z-content);flex:1 0 auto;width:100%;padding:clamp(18px,2.4vw,36px) 0 clamp(34px,4vw,64px)}
.main-content{min-width:0;width:100%;padding:0;margin:0;max-width:none}
.master-footer{position:relative;z-index:var(--z-content);flex:0 0 auto;margin-top:auto;padding:22px 0;color:var(--footer-text)}
.footer-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:8px;font-weight:750}
.footer-meta{color:var(--footer-muted);font-size:.86rem}
.userbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding:11px 14px;background:color-mix(in srgb,var(--card-bg) 88%,transparent);color:var(--card-text);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm-theme);backdrop-filter:blur(12px)}
.tenant-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-weight:700}

.page-title,.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-title h1,.section-head h2{margin:.05rem 0;line-height:1.3;color:var(--text-primary)}
.page-title h1{font-size:clamp(1.55rem,2.8vw,2.35rem)}
.section-head h2{font-size:clamp(1.25rem,2vw,1.72rem)}
.page-title p,.section-head p{max-width:900px;margin:.3rem 0;color:var(--text-secondary)}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}
.eyebrow{display:block;margin-bottom:3px;font-size:.72rem;letter-spacing:.13em;font-weight:850;color:var(--primary)}

.card,.stat-card,.login-card,.modal-card,.subpanel,.notice,.alert,.table-wrap{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card,.stat-card,.login-card,.modal-card,.subpanel{background:color-mix(in srgb,var(--card-bg) 96%,transparent);color:var(--card-text);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md-theme)}
.card{padding:clamp(17px,2vw,25px);margin-bottom:20px}
.card:hover{box-shadow:var(--shadow-lg-theme)}
.stat-card{padding:18px;display:grid;gap:5px;min-height:112px}
.stat-card span,.stat-card small{color:var(--card-muted)}
.stat-card strong{font-size:clamp(1.18rem,2.2vw,1.55rem);overflow-wrap:anywhere}
.grid,.stats-grid,.form-grid,.info-grid{display:grid;gap:16px}
.grid{grid-template-columns:repeat(auto-fit,minmax(245px,1fr))}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));margin-bottom:20px}
.form-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.info-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:12px 0 20px}
.info-grid>div{padding:13px 14px;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--surface-2)}
.info-grid span{display:block;color:var(--card-muted);font-size:.8rem}
.info-grid strong{display:block;margin-top:4px;overflow-wrap:anywhere}
.hero{padding:clamp(24px,3.5vw,42px);margin-bottom:20px;border-radius:calc(var(--radius-md) + 5px);background:var(--theme-gradient);color:var(--text-on-primary);box-shadow:var(--shadow-lg-theme)}
.hero h1,.hero h2,.hero p{color:inherit}
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.dashboard-hero h1{font-size:clamp(2.7rem,7vw,5.4rem);line-height:1;margin:.2rem 0}
.hero-status{padding:11px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.17);font-weight:800}

.notice,.alert{padding:13px 15px;margin-bottom:15px;border-radius:var(--radius-sm);background:var(--info-soft);color:var(--text-primary);border:1px solid color-mix(in srgb,var(--info) 35%,transparent)}
.alert.error{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 38%,transparent)}
.muted{color:var(--text-secondary)}
.badge,.status-pill,.status-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 28%,transparent);font-size:.78rem;font-weight:750}
.badge.success{background:var(--success-soft);color:var(--success)}
.badge.warning{background:var(--warning-soft);color:var(--warning)}
.danger-badge{background:var(--danger-soft);color:var(--danger)}
.muted-badge{opacity:.72}

.table-wrap{width:100%;overflow:auto;border:1px solid var(--card-border);border-radius:var(--radius-md);background:var(--table-bg);box-shadow:var(--shadow-sm-theme)}
table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;background:transparent;color:var(--card-text)}
th,td{padding:12px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--card-border)}
th{position:sticky;top:0;z-index:2;background:var(--table-head-bg);color:var(--table-head-text);font-size:.84rem;white-space:nowrap}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--table-row-hover)}
tbody tr:last-child td{border-bottom:0}
.empty{text-align:center;color:var(--card-muted);padding:30px}

label{display:grid;gap:7px;margin:9px 0;color:var(--text-primary);font-weight:650}
input,select,textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--input-text);outline:none}
textarea{min-height:110px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--input-placeholder);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--input-focus);box-shadow:0 0 0 4px var(--focus-ring)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:18px;accent-color:var(--primary)}
button,.button,.btn{min-height:44px;padding:9px 15px;border:1px solid color-mix(in srgb,var(--button-bg) 80%,#000);border-radius:var(--radius-sm);background:var(--button-bg);color:var(--button-text);font-weight:750;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .15s,filter .15s,background .15s,box-shadow .15s}
button:hover,.button:hover,.btn:hover{background:var(--button-hover-bg);color:var(--button-text);transform:translateY(-1px);box-shadow:var(--shadow-sm-theme)}
button.secondary,.button.secondary,.btn-outline{background:var(--surface-2);color:var(--primary);border-color:var(--primary)}
button.secondary:hover,.button.secondary:hover,.btn-outline:hover{background:var(--primary);color:var(--text-on-primary)}
.danger,.btn-danger{background:var(--danger)!important;color:#fff!important;border-color:var(--danger)!important}
.actions,.row-actions,.queue-add,.panel-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.actions form,.row-actions form{margin:0}
.row-actions button{min-height:36px;padding:6px 10px;font-size:.82rem}
.inline-rename{display:flex;align-items:center;gap:7px}
.inline-rename input{min-width:170px;min-height:38px}
.days{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0}
.days label,.check-card{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:0;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--surface-2)}
.subpanel{padding:17px;margin:13px 0}
.hidden{display:none!important}

.queue-builder{padding:15px;margin:13px 0;border:1px dashed color-mix(in srgb,var(--primary) 48%,var(--card-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--primary-soft) 55%,transparent)}
.queue-builder h3{margin-top:0}
.queue-add select{flex:1}
.queue-list{display:grid;gap:8px;padding-left:24px}
.queue-list li{padding:9px 10px;border:1px solid var(--card-border);border-radius:var(--radius-sm);background:var(--surface-2)}
.queue-list li>div{float:right;display:flex;gap:4px}
.queue-list button{min-height:30px;padding:3px 8px}
.upload-zone{padding:17px;margin-bottom:15px;border:2px dashed color-mix(in srgb,var(--primary) 38%,var(--card-border));border-radius:var(--radius-md);background:var(--surface-2)}

.login-shell{position:relative;z-index:var(--z-content);min-height:100dvh;display:grid;place-items:center;padding:clamp(20px,5vw,58px)}
.login-card{width:min(510px,100%);padding:clamp(24px,4vw,38px);border-top:5px solid var(--accent)}
.login-card h1{margin:.25rem 0;font-size:clamp(1.65rem,4vw,2.35rem)}
.login-icon{font-size:3.2rem;line-height:1}
.login-secondary-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.login-secondary-actions>*{flex:1 1 180px}
.login-theme-tools{position:fixed;top:14px;right:14px;z-index:calc(var(--z-header) + 2);display:flex;gap:7px}
.school-logo{box-shadow:var(--shadow-sm-theme);border:1px solid var(--card-border)}

.modal,.modal-backdrop{z-index:var(--z-modal)!important}
.modal{padding:calc(var(--header-height) + 14px) 14px max(24px,env(safe-area-inset-bottom))!important;overflow-y:auto!important}
.modal-content,.modal-card{max-height:calc(100dvh - var(--header-height) - 28px);overflow:auto}
body.modal-open{overflow:hidden}

.theme-panel-overlay{position:fixed;inset:0;background:rgba(4,12,18,.56);opacity:0;visibility:hidden;transition:.25s;z-index:calc(var(--z-modal) - 2)}
.theme-panel-overlay.is-open{opacity:1;visibility:visible}
body.theme-panel-open{overflow:hidden}
.theme-settings-panel{position:fixed;top:0;right:0;width:min(460px,94vw);height:100dvh;z-index:calc(var(--z-modal) - 1);padding:0;background:var(--surface-elevated);color:var(--text-primary);border-left:1px solid var(--card-border);box-shadow:var(--shadow-lg-theme);overflow:auto;transform:translateX(105%);visibility:hidden;transition:transform .3s ease,visibility .3s ease}
.theme-settings-panel.open{transform:translateX(0);visibility:visible}
.theme-settings-panel .panel-head{position:sticky;top:0;z-index:4;justify-content:space-between;padding:16px 18px;background:var(--header-bg);color:var(--header-text);border-bottom:2px solid var(--header-border);backdrop-filter:blur(16px)}
.theme-panel-body{display:grid;gap:20px;padding:18px 18px 34px}
.theme-control-section{display:grid;gap:12px;padding:16px;border:1px solid var(--card-border);border-radius:var(--radius-md);background:var(--surface-2)}
.theme-control-section h3{margin:0;font-size:1rem;color:var(--text-primary)}
.theme-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.theme-choice{position:relative;display:block;margin:0;cursor:pointer}
.theme-choice input{position:absolute;opacity:0;pointer-events:none}
.theme-choice-body{min-height:86px;display:flex;align-items:center;gap:10px;padding:12px;border:2px solid var(--card-border);border-radius:var(--radius-md);background:var(--card-bg);transition:var(--transition)}
.theme-choice-icon{font-size:1.8rem}
.theme-choice-copy{display:grid;gap:2px}
.theme-choice-copy strong{color:var(--card-text)}
.theme-choice-copy small{color:var(--card-muted);font-weight:500}
.theme-choice input:checked+.theme-choice-body{border-color:var(--primary);box-shadow:0 0 0 4px var(--focus-ring);transform:translateY(-1px)}
.mode-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mode-choice{position:relative;margin:0;cursor:pointer}
.mode-choice input{position:absolute;opacity:0}
.mode-choice span{min-height:44px;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--card-bg)}
.mode-choice input:checked+span{background:var(--primary);color:var(--text-on-primary);border-color:var(--primary)}
.font-preview{padding:16px;border:1px solid var(--card-border);border-radius:var(--radius-md);background:var(--card-bg);font-size:1.18rem;line-height:1.7;color:var(--card-text)}
.font-load-status{font-size:.78rem;color:var(--text-secondary)}
.range-row{display:grid;grid-template-columns:1fr 58px;gap:10px;align-items:center}
.range-row label{grid-column:1/-1;margin:0}
.range-row input{min-height:auto;padding:0}
.range-row output{padding:4px 7px;text-align:center;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-weight:750}
.custom-theme-controls{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.custom-theme-controls.show{display:grid}
.custom-theme-controls h4{grid-column:1/-1;margin:0}
.custom-theme-controls label{margin:0;font-size:.8rem}
.custom-theme-controls input[type=color]{height:46px;padding:4px;cursor:pointer}
.theme-reset{width:100%}

.update-progress-track{height:14px;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-3);border:1px solid var(--card-border);margin:14px 0}
.update-progress-bar{height:100%;background:var(--theme-gradient);transition:width .35s ease}
.sync-error-detail pre,#software-update pre,.log-box{white-space:pre-wrap;overflow-wrap:anywhere}

@media(max-width:1180px){
  :root{--header-height:72px}
  .logo-area{max-width:min(58vw,430px);flex:1 1 auto}
  .mobile-menu-btn{display:inline-grid;order:-1}
  .main-nav{flex:0 0 0;width:0;height:0}
  .main-nav .nav-links{position:fixed;top:var(--header-height);left:0;width:min(89vw,390px);height:calc(100dvh - var(--header-height));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:10px 12px max(22px,env(safe-area-inset-bottom));background:var(--drawer-bg);color:var(--drawer-text);border-right:1px solid var(--drawer-border);box-shadow:var(--shadow-lg-theme);overflow:auto;transform:translateX(-105%);visibility:hidden;opacity:0;transition:.28s;z-index:var(--z-drawer)}
  .main-nav .nav-links.mobile-active{transform:translateX(0);visibility:visible;opacity:1}
  .main-nav .nav-links>li{width:100%;border-bottom:1px solid var(--drawer-border)}
  .main-nav .nav-links a{width:100%;min-height:52px;padding:12px 10px;color:var(--drawer-text);font-size:.98rem;white-space:normal}
  .main-nav .nav-links a.active{box-shadow:inset 4px 0 0 var(--accent)}
  .mobile-user-menu{display:block;margin-top:10px;padding-top:8px;border-top:2px solid var(--drawer-border)}
  .header-user-link{display:none}
}
@media(max-width:700px){
  :root{--header-height:66px}
  .container{padding-inline:12px}
  .header-container{gap:6px}
  .logo-area .logo-icon{width:38px;height:38px;border-radius:11px;font-size:1.3rem}
  .logo-area .brand-title{font-size:.98rem}
  .logo-area .brand-subtitle{display:none}
  .header-icon-btn,.mobile-menu-btn,.icon-btn{width:40px;height:40px;min-width:40px}
  .userbar{align-items:flex-start}
  .page-title,.section-head{display:block}
  .page-actions,.section-head>.actions{margin-top:12px}
  .card{padding:16px}
  .dashboard-hero{align-items:flex-start}
  .theme-choice-grid{grid-template-columns:1fr}
  .theme-settings-panel{width:100vw}
  .login-theme-tools{top:8px;right:8px}
  .footer-container{display:grid;text-align:center;justify-items:center}
}
@media(max-width:430px){
  .logo-area .brand-title{max-width:42vw}
  .user-actions{gap:4px}
  .theme-panel-body{padding-inline:13px}
  .mode-choice-grid{grid-template-columns:1fr}
  .custom-theme-controls{grid-template-columns:1fr}
  .actions>*,.actions form,.actions button,.actions .button{width:100%}
  .inline-rename{display:grid}
}
@media print{
  .master-header,.master-footer,.theme-settings-panel,.theme-panel-overlay,.mobile-drawer-overlay,.login-theme-tools,.userbar,.no-print{display:none!important}
  .master-content{padding:0!important}
  .container{max-width:none!important;padding:0!important}
}

/* Live Talk pages */
.live-wrap{max-width:780px;margin-inline:auto}
.status-box{padding:14px;border-radius:var(--radius-sm);margin:12px 0;font-weight:750;border:1px solid transparent}
.status-off,.off{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.status-wait,.wait{background:var(--warning-soft);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 30%,transparent)}
.status-ready,.ready{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 30%,transparent)}
.status-live,.live{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.ptt{width:100%;height:clamp(145px,24vh,195px);font-size:clamp(1.35rem,4vw,1.85rem);font-weight:800;touch-action:none;user-select:none;border-radius:var(--radius-lg)}
.ptt:disabled{opacity:.45;transform:none}
.meter{height:18px;background:var(--surface-3);border:1px solid var(--card-border);border-radius:var(--radius-pill);overflow:hidden;margin:12px 0}
.meter>div{height:100%;width:0;background:var(--theme-gradient);transition:width .08s linear}
.help{font-size:.86rem;color:var(--text-secondary)}
.narrow{width:min(620px,calc(100% - 28px));margin:clamp(24px,6vw,70px) auto}


/* v1.2.1 grouped header navigation */
.grouped-nav{display:flex;align-items:center;justify-content:center;gap:clamp(4px,.55vw,10px);flex-wrap:nowrap}
.grouped-nav>.nav-group{position:relative;list-style:none;flex:0 0 auto}
.grouped-nav>.nav-group[hidden]{display:none!important}
.nav-group-toggle{display:flex;align-items:center;gap:6px;min-height:44px;padding:9px clamp(8px,.7vw,13px);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--header-text);font-size:clamp(.82rem,.88vw,.95rem);font-weight:650;cursor:pointer;transition:var(--transition);white-space:nowrap}
.nav-group-toggle:hover,.nav-group-toggle:focus-visible,.nav-group.is-open>.nav-group-toggle,.nav-group.has-active>.nav-group-toggle{background:var(--menu-hover-bg);color:var(--menu-hover-text)}
.nav-group.has-active>.nav-group-toggle{box-shadow:inset 0 -3px 0 var(--accent)}
.nav-caret{font-size:.78em;opacity:.82}
.nav-submenu{position:absolute;top:calc(100% + 8px);left:0;display:none;min-width:230px;max-width:min(88vw,320px);padding:8px;margin:0;list-style:none;background:var(--drawer-bg);border:1px solid var(--drawer-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg-theme);z-index:calc(var(--z-header) + 5)}
.nav-submenu li{margin:0;padding:0}
.nav-submenu a{display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:10px 12px;border-radius:10px;color:var(--drawer-text)!important;text-decoration:none;white-space:normal;line-height:1.35}
.nav-submenu a:hover,.nav-submenu a:focus-visible,.nav-submenu a.active{background:color-mix(in srgb,var(--accent) 14%, transparent);color:var(--drawer-text)!important;box-shadow:none}
.nav-group.is-open>.nav-submenu,.nav-group:hover>.nav-submenu,.nav-group:focus-within>.nav-submenu{display:block}
.nav-more .nav-submenu .nav-group{position:static}
.nav-more .nav-submenu .nav-group-toggle{width:100%;justify-content:space-between;padding:10px 12px;color:var(--drawer-text);background:transparent;border-radius:10px}
.nav-more .nav-submenu .nav-group-toggle:hover,.nav-more .nav-submenu .nav-group.is-open>.nav-group-toggle{background:color-mix(in srgb,var(--accent) 14%, transparent)}
.nav-more .nav-submenu .nav-submenu{position:static;display:none;min-width:0;max-width:none;margin-top:4px;padding:6px 0 0 12px;border:none;box-shadow:none;background:transparent}
.nav-more .nav-submenu .nav-group.is-open>.nav-submenu{display:block}
.nav-more .nav-submenu .nav-submenu a{padding:9px 10px}
@media (max-width:1180px){
  .grouped-nav{gap:0}
  .main-nav .grouped-nav{position:fixed;top:var(--header-height);left:0;width:min(89vw,390px);height:calc(100dvh - var(--header-height));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:10px 12px max(22px,env(safe-area-inset-bottom));background:var(--drawer-bg);color:var(--drawer-text);border-right:1px solid var(--drawer-border);box-shadow:var(--shadow-lg-theme);overflow:auto;transform:translateX(-105%);visibility:hidden;opacity:0;transition:.28s;z-index:var(--z-drawer)}
  .main-nav .grouped-nav.mobile-active{transform:translateX(0);visibility:visible;opacity:1}
  .main-nav .grouped-nav>li{width:100%;border-bottom:1px solid var(--drawer-border)}
  .nav-group-toggle{width:100%;justify-content:space-between;min-height:52px;padding:12px 10px;color:var(--drawer-text);font-size:.98rem;background:transparent}
  .nav-group.has-active>.nav-group-toggle,.nav-group-toggle:hover,.nav-group-toggle:focus-visible,.nav-group.is-open>.nav-group-toggle{box-shadow:none;background:color-mix(in srgb,var(--accent) 14%, transparent);color:var(--drawer-text)}
  .nav-submenu{position:static;display:none;min-width:0;max-width:none;padding:0 0 10px;border:none;border-radius:0;box-shadow:none;background:transparent}
  .nav-group.is-open>.nav-submenu{display:block}
  .nav-submenu a{color:var(--drawer-text)!important;padding:10px 14px 10px 22px}
  .nav-more .nav-submenu{padding:0 0 10px}
  .nav-more .nav-submenu .nav-submenu{padding:0 0 6px 14px}
}