@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800;900&display=swap";.brand__logos img{width:112px!important;height:112px!important}.brand__logos{gap:14px!important}.brand__plus{font-size:30px!important}.topbar{height:102px!important}.listening-time{grid-template-columns:1fr 1fr;gap:10px;width:min(430px,100%);margin:4px 0 2px;display:grid}.listening-time>div{background:#07544624;border:1px solid #37d2a233;border-radius:12px;flex-direction:column;align-items:center;padding:10px 14px;display:flex}.listening-time span{color:#72a9a0;font-size:9px;font-weight:700}.listening-time strong{color:#75ebbd;letter-spacing:.04em;margin-top:2px;font-size:15px}.emergency-overlay{z-index:5000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:radial-gradient(circle at 50% 42%,#991b1bb3,#230308f7 58%,#130106);place-items:center;padding:24px;display:grid;position:fixed;inset:0;overflow:auto}.emergency-pulse{pointer-events:none;border:2px solid #ff414159;border-radius:50%;animation:1.8s infinite emergencyWave;position:fixed}.emergency-pulse--one{width:520px;height:520px}.emergency-pulse--two{width:680px;height:680px;animation-delay:.55s}.emergency-modal{z-index:1;background:#030817;border:2px solid #ff746c;border-radius:28px;width:min(680px,100%);max-height:calc(100vh - 48px);position:relative;overflow:auto;box-shadow:0 0 0 1px #ffffff14,0 0 90px #ef1e1e9e}.emergency-modal__header{z-index:2;background:linear-gradient(100deg,#e31b23,#b60712);border-bottom:1px solid #ff7d76;align-items:center;gap:16px;padding:18px 22px;display:flex;position:sticky;top:0}.emergency-modal__header img{object-fit:contain;filter:drop-shadow(0 5px 8px #00000059);width:72px;height:72px}.emergency-modal__header>div{flex:1;min-width:0}.emergency-modal__header span{letter-spacing:.2em;color:#ffd1ce;font-size:11px;font-weight:900}.emergency-modal__header h1{color:#fff;margin:2px 0 0;font-size:27px;line-height:1.2}.emergency-modal__header>strong{white-space:nowrap;background:#24000347;border:1px solid #ffffff59;border-radius:99px;align-self:flex-start;padding:5px 9px;font-size:10px}.emergency-modal__body{gap:14px;padding:22px;display:grid}.emergency-school>span,.emergency-location span,.emergency-detail span,.emergency-info-grid section>span{color:#8393aa;font-size:10px;font-weight:700;display:block}.emergency-school h2{color:#fff;margin:2px 0 0;font-size:25px}.emergency-school p{color:#ffb0aa;margin:0;font-weight:800}.emergency-school small{color:#ffb7b2;background:#dc26261f;border:1px solid #ff4a4a66;border-radius:99px;margin-top:9px;padding:5px 10px;font-size:10px;font-weight:800;display:inline-flex}.emergency-location{background:#5d0c1347;border:1px solid #ff404094;border-radius:13px;padding:14px 16px}.emergency-location span{color:#ff938d}.emergency-location strong{color:#fff;margin-top:2px;font-size:19px;display:block}.emergency-detail{background:#10192b;border-radius:12px;padding:13px 15px}.emergency-detail p{color:#e8eef7;margin:3px 0 0;font-size:13px}.emergency-floorplan{color:#c8dcff;text-align:center;background:#10204b;border:1px solid #508bff66;border-radius:12px;padding:13px;font-weight:900;text-decoration:none;display:block}.emergency-info-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.emergency-info-grid section{background:#10192b;border-radius:12px;flex-direction:column;min-height:100px;padding:13px;display:flex}.emergency-info-grid strong{color:#fff;margin-top:3px;font-size:14px}.emergency-info-grid p{color:#b7c2d2;margin:1px 0;font-size:12px}.emergency-info-grid a,.emergency-contacts a{color:#6edcff;margin-top:auto;font-size:12px;font-weight:900;text-decoration:none}.emergency-contacts{background:#0c1729;border:1px solid #19cfe540;border-radius:13px;padding:14px}.emergency-contacts h3{color:#61dded;margin:0 0 8px;font-size:11px}.emergency-contacts>div{color:#aebbd0;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;font-size:12px;display:flex}.emergency-contacts b{color:#fff}.emergency-acknowledge{color:#1c1000;background:linear-gradient(90deg,#ffb000,#ff8500);border:0;border-radius:13px;width:100%;padding:15px;font-size:16px;font-weight:900;box-shadow:0 10px 30px #ff8f0038}.emergency-note{color:#718096;text-align:center;margin:-4px 0 0;font-size:9px}@keyframes emergencyWave{0%{opacity:.85;transform:scale(.6)}to{opacity:0;transform:scale(1.18)}}:root{color:#eaf3ff;font-synthesis:none;background:#04102a;font-family:Noto Sans Thai,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.welcome-shell,.monitor-shell{background:radial-gradient(circle at 50% -10%,#123b78 0,#071a3c 33%,#030b1d 72%);min-height:100vh;position:relative;overflow:hidden}.welcome-shell{place-items:center;padding:38px 20px;display:grid}.welcome-shell:before{content:"";background-image:linear-gradient(#3493ff09 1px,#0000 1px),linear-gradient(90deg,#3493ff09 1px,#0000 1px);background-size:44px 44px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000);mask-image:linear-gradient(#000,#0000)}.welcome-glow{filter:blur(40px);opacity:.25;border-radius:50%;position:absolute}.welcome-glow--one{background:#008cff;width:380px;height:380px;top:-160px;left:-100px}.welcome-glow--two{background:#075dd5;width:440px;height:440px;bottom:-240px;right:-180px}.welcome-card{background:linear-gradient(145deg,#0c244cf5,#04122df5);border:1px solid #6fb5ff40;border-radius:28px;width:min(850px,100%);padding:34px 48px 28px;position:relative;box-shadow:0 30px 90px #0000007a,inset 0 1px #ffffff14}.brand{justify-content:center;align-items:center;gap:30px;display:flex}.brand__logos{align-items:center;gap:12px;display:flex}.brand__logos img{object-fit:contain;filter:drop-shadow(0 7px 12px #00000052);width:88px;height:88px}.brand__plus{color:#62baff;font-size:27px;font-weight:800}.brand__copy{border-left:1px solid #ffffff29;padding-left:30px}.brand__copy p{color:#91b6dd;margin:0 0 2px;font-size:13px}.brand__copy h1{letter-spacing:1px;margin:0;font-size:32px;line-height:1.1}.brand__copy h1 span{color:#2faaff}.welcome-card__intro{border-top:1px solid #ffffff1a;justify-content:space-between;align-items:end;margin:36px 0 22px;padding-top:28px;display:flex}.eyebrow{color:#49b7ff;letter-spacing:1.8px;text-transform:uppercase;font-size:11px;font-weight:800;display:block}.welcome-card__intro h2{margin:4px 0 0;font-size:25px}.secure-chip{color:#79e9b7;background:#14aa661a;border:1px solid #34d39938;border-radius:99px;padding:7px 11px;font-size:11px}.secure-chip i,.connection-pill i,.status-row i{background:#35d996;border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block;box-shadow:0 0 9px #35d996}.selector-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.selector-grid label>span{color:#c8dcf1;margin:0 0 7px;font-size:13px;font-weight:700;display:block}.selector-grid label b{color:#fff;background:#1477dc;border-radius:50%;place-items:center;width:20px;height:20px;margin-right:5px;font-size:10px;display:inline-grid}.selector-grid select{color:#e8f2ff;background:#081a37;border:1px solid #234d7d;border-radius:12px;outline:none;width:100%;height:48px;padding:0 13px;transition:all .2s}.selector-grid select:focus{border-color:#38a8ff;box-shadow:0 0 0 3px #38a8ff21}.selector-grid select:disabled{color:#607b99}.form-message{color:#ffbd86;background:#ff742814;border-radius:10px;grid-column:1/-1;margin:0;padding:10px 12px;font-size:12px}.primary-button{color:#fff;background:linear-gradient(90deg,#0878db,#159cff);border:0;border-radius:13px;grid-column:1/-1;height:52px;margin-top:4px;font-weight:800;transition:all .2s;box-shadow:0 11px 28px #007ae240}.primary-button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.primary-button span{float:right;margin-right:16px;font-size:20px}.remember-note{text-align:center;color:#7593b1;margin:19px 0 0;font-size:11px}.brand--compact{justify-content:flex-start}.brand--compact .brand__logos{gap:7px}.brand--compact .brand__logos img{width:47px;height:47px}.brand--compact .brand__plus{font-size:15px}.topbar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#030d22b8;border-bottom:1px solid #70aeee26;align-items:center;gap:18px;height:78px;padding:0 max(28px,50vw - 590px);display:flex}.topbar__title{border-left:1px solid #ffffff29;flex-direction:column;padding-left:18px;display:flex}.topbar__title strong{letter-spacing:1px;font-size:15px}.topbar__title span{color:#7896b7;font-size:10px}.school-switch{color:#bdd7f1;background:#102b4d;border:1px solid #315b87;border-radius:10px;margin-left:auto;padding:9px 14px;font-size:12px;font-weight:700}.monitor-content{width:min(1180px,100% - 40px);margin:0 auto;padding:35px 0}.school-heading{justify-content:space-between;align-items:end;margin-bottom:25px;display:flex}.school-heading h1{margin:4px 0 3px;font-size:29px}.school-heading p{color:#87a3c0;margin:0;font-size:13px}.connection-pill{color:#819bb6;background:#0b1e3b;border:1px solid #1b3d64;border-radius:99px;align-items:center;padding:9px 13px;font-size:11px;font-weight:700;display:flex}.connection-pill--connected{color:#75e9b5;background:#0c7c4f1f;border-color:#27d1894d}.connection-pill--connecting{color:#8dccff}.connection-pill--error{color:#ff9b9b;border-color:#ff47474d}.connection-pill--idle i,.connection-pill--error i{box-shadow:none;background:#6e849c}.dashboard-grid{grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr);gap:22px;display:grid}.listen-card,.settings-card{background:linear-gradient(145deg,#091f41e0,#041129eb);border:1px solid #5e9fe233;border-radius:24px;box-shadow:0 22px 60px #00000038}.listen-card{flex-direction:column;justify-content:center;align-items:center;min-height:470px;padding:38px;display:flex}.radar{place-items:center;width:310px;height:310px;display:grid;position:relative}.radar:before{content:"";background:radial-gradient(circle,#123b6b 0,#071b3b 63%,#0000 64%);border:1px solid #419bef26;border-radius:50%;position:absolute;inset:20px}.radar__ring{border:1px solid #3aa5ff2e;border-radius:50%;position:absolute}.radar__ring--one{inset:0}.radar__ring--two{inset:34px}.radar--active .radar__ring{animation:2s infinite pulse}.radar--active .radar__ring--two{animation-delay:.5s}.radar button{z-index:2;color:#fff;background:radial-gradient(circle at 40% 30%,#209dff,#0757ae 67%,#04366e);border:6px solid #163f72;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:210px;height:210px;display:flex;position:relative;box-shadow:0 0 0 7px #1b78d421,0 18px 40px #005bbe66,inset 0 2px 7px #ffffff42}.radar button.is-listening{background:radial-gradient(circle at 40% 30%,#21d79d,#087d68 67%,#045449);border-color:#166e65}.radar button>span{margin-bottom:5px;font-size:35px}.radar button strong{font-size:20px}.radar button small{color:#b9dcfa;margin-top:4px;font-size:10px}.radar button.is-listening small{color:#c7f8e9}.status-row{color:#718aa5;border-top:1px solid #ffffff14;justify-content:space-between;width:100%;margin-top:18px;padding-top:18px;font-size:11px;display:flex}.status-row span{font-weight:700}.status-row i{box-shadow:none;background:#718aa5}.status-row span.online{color:#71e1ac}.status-row span.online i{background:#35d996;box-shadow:0 0 9px #35d996}.settings-card{padding:26px}.settings-card__head{border-bottom:1px solid #ffffff17;align-items:center;gap:13px;padding-bottom:20px;display:flex}.sound-icon{color:#57b5ff;background:#123d70;border-radius:13px;place-items:center;width:45px;height:45px;font-size:21px;display:grid}.settings-card__head h2{margin:0;font-size:16px}.settings-card__head p{color:#7594b1;margin:2px 0 0;font-size:10px}.toggle{background:#31465f;border:0;border-radius:99px;width:46px;height:25px;margin-left:auto;padding:3px;transition:all .2s}.toggle i{background:#fff;border-radius:50%;width:19px;height:19px;transition:all .2s;display:block}.toggle--on{background:#168ee8}.toggle--on i{transform:translate(21px)}.sound-file{flex-direction:column;padding:20px 0 16px;display:flex}.sound-file span{color:#7897b5;font-size:10px}.sound-file strong{white-space:nowrap;text-overflow:ellipsis;margin:3px 0;font-size:14px;overflow:hidden}.sound-file small{color:#4dcea0;font-size:10px}.file-button,.test-button,.reset-button{text-align:center;border-radius:10px;width:100%;padding:11px;font-size:11px;font-weight:700;display:block}.file-button{color:#a8d8ff;cursor:pointer;background:#102c50;border:1px dashed #3674aa}.file-button input{display:none}.test-button{color:#fff;background:#168ae2;border:0;margin-top:9px}.reset-button{color:#7fa9cc;background:0 0;border:0;margin-top:7px}.audio-notice{color:#8acfff;text-align:center;margin:10px 0 0;font-size:10px}.fallback-note{background:#040b1c94;border-radius:11px;flex-direction:column;margin-top:17px;padding:12px;display:flex}.fallback-note b{color:#a9c6e2;font-size:10px}.fallback-note span{color:#647f9a;margin-top:3px;font-size:9px}.alert-banner{background:linear-gradient(90deg,#771215f2,#330813f2);border:1px solid #ff4f3da6;border-radius:18px;align-items:center;gap:17px;margin-bottom:20px;padding:18px 20px;display:flex;box-shadow:0 0 35px #ff1c1c2b}.alert-banner__icon{background:#ff392f;border-radius:50%;place-items:center;width:50px;height:50px;font-size:30px;font-weight:900;display:grid}.alert-banner span{color:#ffb6b1;letter-spacing:1px;font-size:10px;font-weight:800}.alert-banner h2{margin:1px 0;font-size:20px}.alert-banner p{color:#ffd5d2;margin:0;font-size:11px}.alert-banner small{color:#c88b89;font-size:9px}.alert-banner button{color:#981e24;background:#fff;border:0;border-radius:10px;margin-left:auto;padding:11px 14px;font-size:11px;font-weight:800}.monitor-shell--alert{animation:1.1s 3 alertGlow}.monitor-shell footer{color:#4c6986;justify-content:space-between;width:min(1180px,100% - 40px);margin:0 auto;padding:4px 0 22px;font-size:9px;display:flex}@keyframes pulse{0%{opacity:.9;transform:scale(.75)}to{opacity:0;transform:scale(1.12)}}@keyframes alertGlow{50%{box-shadow:inset 0 0 70px #ff141438}}@media (width<=780px){.welcome-shell{padding:16px 12px}.welcome-card{border-radius:22px;padding:24px 18px}.brand{gap:14px}.brand__logos img{width:60px;height:60px}.brand__copy{padding-left:14px}.brand__copy p{font-size:9px}.brand__copy h1{font-size:20px}.welcome-card__intro{align-items:flex-start;margin:25px 0 18px;padding-top:22px}.welcome-card__intro h2{font-size:21px}.secure-chip{display:none}.selector-grid{grid-template-columns:1fr;gap:13px}.form-message,.primary-button{grid-column:1}.selector-grid select{height:46px}.topbar{gap:10px;height:68px;padding:0 14px}.brand--compact .brand__logos img{width:38px;height:38px}.topbar__title{padding-left:10px}.topbar__title strong{font-size:12px}.topbar__title span{display:none}.school-switch{padding:7px 9px;font-size:10px}.monitor-content{width:calc(100% - 24px);padding:21px 0}.school-heading{margin-bottom:18px;display:block}.school-heading h1{font-size:22px}.school-heading p{font-size:11px}.connection-pill{width:max-content;margin-top:13px;font-size:9px}.dashboard-grid{grid-template-columns:1fr;gap:14px}.listen-card{min-height:385px;padding:22px 14px}.radar{width:270px;height:270px}.radar button{width:180px;height:180px}.radar button strong{font-size:18px}.status-row{flex-direction:column;align-items:center;gap:5px;padding-top:14px}.settings-card{padding:20px}.alert-banner{flex-wrap:wrap;align-items:flex-start;padding:14px}.alert-banner__icon{width:40px;height:40px}.alert-banner div:nth-child(2){width:calc(100% - 60px)}.alert-banner h2{font-size:16px}.alert-banner button{width:100%;margin:0}.monitor-shell footer{flex-direction:column;gap:4px;width:calc(100% - 24px)}.brand--compact .brand__plus{font-size:11px}}@media (width<=380px){.welcome-card{padding:20px 14px}.brand__copy h1{font-size:17px}.brand__logos img{width:53px;height:53px}.radar{width:245px;height:245px}.radar button{width:165px;height:165px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (width<=780px){.brand__logos img{width:78px!important;height:78px!important}.brand--compact .brand__logos img{width:54px!important;height:54px!important}.brand--compact .brand__plus{font-size:15px!important}.topbar{height:82px!important}.listening-time{grid-template-columns:1fr 1fr;width:100%}.listening-time strong{font-size:13px}}@media (width<=680px){.emergency-overlay{align-items:start;padding:12px}.emergency-pulse{display:none}.emergency-modal{border-radius:20px;max-height:calc(100vh - 24px)}.emergency-modal__header{gap:10px;padding:13px 14px}.emergency-modal__header img{width:55px;height:55px}.emergency-modal__header span{letter-spacing:.12em;font-size:8px}.emergency-modal__header h1{font-size:19px}.emergency-modal__header>strong{font-size:8px}.emergency-modal__body{gap:11px;padding:15px}.emergency-school h2{font-size:21px}.emergency-info-grid{grid-template-columns:1fr 1fr;gap:8px}.emergency-info-grid section{min-height:96px;padding:11px}.emergency-info-grid strong{font-size:12px}.emergency-contacts>div{flex-direction:column;align-items:flex-start;gap:2px}.emergency-contacts a{margin-top:0}.emergency-acknowledge{padding:13px;font-size:14px}}