:root{--screen: linear-gradient(180deg, #0f4c56 0%, #1a7a72 52%, #123e46 100%);--header: linear-gradient(90deg, #14857a, #2a6f9a);--card: linear-gradient(90deg, #1e5c66, #246b62);--send: linear-gradient(90deg, #1f8a4c, #217983);--amber: linear-gradient(90deg, #e8a317, #c2410c);--red: linear-gradient(90deg, #b42318, #7f1d1d);--mint-circle: linear-gradient(135deg, #2dd4bf, #217983);--cream: #f4e7c8;--mint: #7ee7d8;--sky: #7dd3fc;font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica Neue,Arial,sans-serif;color:#fff;background:#0e3a42;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;height:100%}body{background:var(--screen);overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:disabled{cursor:default;opacity:.6}h1,h2,p{margin:0}.screen{position:relative;display:flex;flex-direction:column;gap:14px;height:100vh;height:100dvh;padding:16px clamp(12px,2vw,28px);background:var(--screen)}.overlay-screen{position:fixed;inset:0;z-index:60}.login-screen{display:grid;grid-template-columns:minmax(220px,.36fr) minmax(300px,.64fr);align-items:center;gap:clamp(24px,4vw,64px);min-height:100vh;min-height:100dvh;padding:24px clamp(20px,6vw,96px);background:linear-gradient(180deg,#0f3d4c,#1f8a70 60%,#f4e7c8 135%);overflow:auto}.login-brand{display:grid;justify-items:center;gap:6px;text-align:center}.login-brand img{width:104px;height:104px;border-radius:26px;box-shadow:0 14px 34px #00000047;margin-bottom:8px}.login-brand h1{font-size:1.9rem;font-weight:900}.login-brand strong{color:var(--cream);font-size:1.1rem}.login-brand span{opacity:.85;font-size:.9rem}.login-card{display:grid;gap:16px;max-width:560px;width:100%;padding:28px;border-radius:26px;background:linear-gradient(160deg,#ffffff29,#ffffff0f);border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 60px #00000040;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.field{display:grid;gap:6px}.field span{font-weight:700;color:var(--cream);font-size:.95rem}.field input{height:54px;padding:0 16px;border-radius:16px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(180deg,#04181c6b,#04181c42);color:#fff;font-size:1.2rem;font-weight:700;letter-spacing:.02em;outline:none;transition:border-color .15s,box-shadow .15s}.field input:focus{border-color:var(--mint);box-shadow:0 0 0 3px #7ee7d840}.btn-enter{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;border-radius:18px;background:var(--amber);font-size:1.2rem;font-weight:900;box-shadow:0 12px 26px #c2410c59;transition:transform .12s,filter .12s}.btn-enter:not(:disabled):hover{filter:brightness(1.06);transform:translateY(-1px)}.btn-enter:disabled{opacity:.45}.topbar,.call-header{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border-radius:22px;background:var(--header);box-shadow:0 10px 28px #0003}.topbar-title,.call-title{display:grid;gap:2px;min-width:0;flex:1}.topbar-title h1{font-size:1.45rem;font-weight:900}.topbar-title span,.call-title span{font-weight:600;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.call-title h1{font-size:clamp(1.35rem,2vw,1.8rem);font-weight:900;line-height:1.1}.t-cream{color:var(--cream)}.t-mint{color:var(--mint)}.header-bell{display:inline-flex;color:#fff}.round-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:46px;height:46px;border-radius:50%;background:#ffffff29;transition:background .15s,transform .15s}.round-btn:not(:disabled):hover{background:#ffffff42}.round-btn:not(:disabled):active{transform:scale(.94)}.watch-menu{position:relative}.watch-btn{display:flex;align-items:center;gap:8px;width:clamp(180px,22vw,280px);padding:10px 14px;border-radius:16px;background:#ffffff29;font-weight:900;text-align:left}.watch-btn span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-shield{position:fixed;inset:0;z-index:20}.watch-list{position:absolute;top:calc(100% + 8px);right:0;z-index:21;display:grid;min-width:100%;max-height:60vh;overflow:auto;padding:6px;border-radius:18px;background:linear-gradient(180deg,#14686a,#0e3a42);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 40px #00000059}.watch-list button{padding:12px 14px;border-radius:12px;text-align:left;font-weight:700;white-space:nowrap}.watch-list button:hover{background:#ffffff24}.error-bar{padding:10px 14px;border-radius:16px;background:var(--red);font-weight:700}.call-list{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));align-content:start;gap:12px;padding:2px}.call-card{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;border-radius:22px;background:var(--card);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 22px #00000029}.call-card.is-late{background:linear-gradient(90deg,#8f1d1d,#b42318);border-color:#fecaca66}.call-card.is-fresh{animation:fresh-in .5s ease-out,fresh-glow 1.6s ease-in-out 3}@keyframes fresh-in{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}@keyframes fresh-glow{50%{box-shadow:0 0 0 4px #f4b942a6,0 8px 22px #00000029}}.face{width:clamp(54px,5vw,72px);height:clamp(54px,5vw,72px);border-radius:50%;object-fit:cover;background:#fff;flex-shrink:0;box-shadow:0 0 0 3px #ffffff38}.call-info{display:grid;gap:2px;min-width:0;flex:1}.call-info strong{font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.call-info span{color:var(--sky);font-weight:700}.call-card.is-late .call-info span{color:#fecaca}.wait-pill{flex-shrink:0;padding:5px 10px;border-radius:999px;background:#04181c59;font-size:.85rem;font-weight:800;white-space:nowrap}.send-btn{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:12px 18px;border-radius:16px;background:var(--send);font-weight:900;font-size:1.05rem;box-shadow:0 8px 18px #0000002e;transition:transform .12s,filter .12s}.send-btn:not(:disabled):hover{filter:brightness(1.08)}.send-btn:not(:disabled):active{transform:scale(.96)}.empty{flex:1;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center}.empty strong{font-size:1.35rem;font-weight:900}.empty-bell{display:inline-flex;padding:22px;border-radius:50%;background:#ffffff1a}.class-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));align-content:start;gap:12px;padding:4px}.class-tile{display:grid;gap:4px;justify-items:center;padding:24px 12px;border-radius:18px;background:var(--header);font-size:1.2rem;font-weight:900;box-shadow:0 8px 20px #00000029;transition:transform .12s,filter .12s}.class-tile:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-2px)}.class-tile span{color:var(--cream);font-size:.85rem}.class-tile.is-busy{background:linear-gradient(90deg,#4b5d63,#3c5a60)}.backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:#04181cbf;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.notice,.start-card{display:grid;justify-items:center;gap:12px;width:min(480px,100%);padding:28px 26px 24px;border-radius:28px;background:linear-gradient(180deg,#14686a,#0e3a42);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px #0006;text-align:center}.notice-art,.start-art,.flash-art{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:var(--mint-circle);color:#fff}.notice.tone-red .notice-art{background:linear-gradient(135deg,#ef4444,#7f1d1d)}.notice.tone-amber .notice-art{background:linear-gradient(135deg,#f4b942,#c2410c)}.notice h2,.start-card h2{font-size:1.4rem;font-weight:900}.notice p,.start-card p{font-weight:600;opacity:.92;line-height:1.45}.report{display:grid;gap:6px;text-align:left}.btn-row{display:flex;gap:12px;justify-content:center;width:100%;margin-top:6px}.btn-row>.btn+.btn{margin-inline-start:0}.btn{flex:1;max-width:200px;padding:12px 18px;border-radius:16px;font-weight:900}.btn-ghost{background:#ffffff24}.btn-teal{background:var(--send)}.btn-red{background:var(--red)}.btn-amber{background:var(--amber)}.start-card small{color:var(--cream);font-weight:700;opacity:.85}.btn-start{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:6px;padding:18px 22px;border-radius:20px;background:var(--amber);font-size:1.35rem;font-weight:900;box-shadow:0 16px 34px #c2410c66;animation:start-pulse 2s ease-in-out infinite}@keyframes start-pulse{50%{transform:scale(1.03);box-shadow:0 18px 40px #e8a3178c}}.flash{position:fixed;inset:0;z-index:45;display:grid;place-content:center;justify-items:center;gap:12px;background:#04181cbf;animation:fade .2s ease-out}.flash strong{font-size:1.25rem;font-weight:900}@keyframes fade{0%{opacity:0}}.settings-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-content:start;gap:14px}.set-stack{display:grid;gap:14px;align-content:start}.set-card{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:22px;text-align:left;box-shadow:0 8px 22px #00000029}section.set-card{display:grid;gap:12px}.set-card strong{font-size:1.15rem;font-weight:900}.set-head{display:flex;align-items:center;gap:14px}.set-art{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:56px;height:56px;border-radius:50%;background:#ffffff29}.tone-sound{background:linear-gradient(90deg,#1d6f8a,#2a9a8a)}.tone-test{background:var(--header)}.tone-full{background:linear-gradient(90deg,#2a6f9a,#14857a)}.tone-exit{background:var(--red)}.tone-power{background:linear-gradient(90deg,#5b4bb7,#2a6f9a)}.tone-update{background:linear-gradient(90deg,#14857a,#3a9a5a)}.set-copy{display:grid;gap:3px;flex:1;min-width:0}.set-copy small{font-size:.85rem;font-weight:600;opacity:.85}.switch{position:relative;flex-shrink:0;width:54px;height:30px;border-radius:999px;background:linear-gradient(135deg,#f87171,#dc2626);transition:background .2s ease}.switch>span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #00000040;transition:transform .2s ease}.switch.is-on{background:linear-gradient(135deg,#34d399,#16a34a)}.switch.is-on>span{transform:translate(24px)}.sound-list{display:grid;gap:6px}.sound-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:#ffffff14;font-weight:600;font-size:1.02rem;text-align:left}.sound-row.is-on{background:#ffffff3d;font-weight:900}.radio{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff3;flex-shrink:0}.sound-row.is-on .radio{background:var(--cream)}.sound-row.is-on .radio:after{content:"";width:10px;height:10px;border-radius:50%;background:#0e3a42}.spinner{width:24px;height:24px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.login-screen,.settings-grid{grid-template-columns:1fr}.call-header{flex-wrap:wrap}.call-title{flex-basis:calc(100% - 60px)}.watch-btn{width:auto;min-width:150px}.wait-pill{display:none}}