:root{--bezel:#0a0a0c;--page:#0f1115;--panel:#171a20;--panel-2:#1e222a;--line:#2a2f38;--ink:#e8eaed;--muted:#9aa0a6;--accent:#4f8cff;--ok:#34c759;--warn:#ffb020;--danger:#ff5a52;--logo-h:44px;--panel-min-w:280px;--panel-max-w:380px;--stage-pad:32px;--phone-w:390px;--phone-h:844px;--bezel-w:12px;--phone-radius:54px;--phone-scale:1}*{box-sizing:border-box}html,body{background:var(--page);height:100%;color:var(--ink);margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.layout{grid-template-columns:minmax(var(--panel-min-w),var(--panel-max-w))1fr;height:100vh;display:grid}@media (max-width:860px){.layout{grid-template-columns:1fr;height:auto}}.panel{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;gap:22px;padding:28px 24px;display:flex;overflow-y:auto}.brand img{width:auto;height:var(--logo-h);display:block}.panel h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-height:1.5em;margin:0 0 8px;font-size:12px}.card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.muted{color:var(--muted);margin:0;font-size:13px}.persona{border:0;border-top:1px solid var(--line);width:100%;color:inherit;text-align:left;cursor:pointer;background:0 0;border-radius:0;align-items:center;gap:10px;padding:8px 0;display:flex}.persona:first-child{border-top:0;padding-top:0}.persona:disabled{cursor:default;opacity:.6}.persona:not(:disabled):hover .name{color:var(--accent)}.avatar{width:32px;height:32px;color:var(--ink);object-fit:cover;background:#2b3340;border-radius:50%;flex:none;place-items:center;font-size:12px;font-weight:700;display:grid}.avatar[data-role=faculty]{color:#cdddff;background:#34405a}.avatar[data-role=parent]{color:#ddd2ff;background:#3a3550}.avatar[data-role=student]{color:#c9f0e2;background:#2c4440}.persona .name{font-weight:600;line-height:1.2}.persona .role{color:var(--muted);font-size:12px}.target-status{flex:none;place-items:center;width:16px;height:16px;margin-left:auto;display:grid}.target-status .check{color:var(--ok)}.spinner{border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.account-card{margin-top:auto}.panel-footer{flex-direction:column;align-items:flex-start;gap:6px;margin-top:auto;display:flex}.panel button.link-button{color:var(--muted);background:0 0;border:0;padding:0;font-size:13px;text-decoration:underline}.panel button.link-button:not(:disabled):hover{color:var(--ink)}.actions{flex-wrap:wrap;gap:8px;display:flex}.actions button{align-items:center;gap:6px;display:inline-flex}.panel button:not(.persona),.gate button{font:inherit;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer;border-radius:8px;padding:8px 12px;font-size:13px;text-decoration:none}.panel button:disabled,.gate button:disabled{cursor:default;opacity:.6}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{border-color:var(--danger);color:var(--danger)}select{font:inherit;border:1px solid var(--line);background:var(--panel);width:100%;color:var(--ink);border-radius:8px;padding:8px 10px;font-size:13px}.preview-back{margin-top:8px}.panel-toggles{flex-wrap:wrap;justify-content:flex-start;gap:8px 16px;display:flex}.panel-toggles+.actions{margin-top:-14px}.toggle-group{align-items:center;gap:6px;display:flex}.panel .toggle-group button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;border-radius:999px;padding:4px 10px;font-size:12px}.panel .toggle-group button[aria-pressed=true]{border-color:var(--accent);color:var(--ink);background:var(--panel-2)}.panel-alert{border:1px solid var(--danger);background:var(--panel-2);border-radius:8px;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px;font-size:13px;display:flex}.panel-alert p{margin:0}.stage{height:100vh;padding:var(--stage-pad);flex-direction:column;justify-content:center;align-items:center;display:flex;overflow:hidden}.stage[data-frame=android]{--phone-radius:28px;--bezel-w:10px}.phone-slot{width:calc((var(--phone-w) + 2*var(--bezel-w))*var(--phone-scale));height:calc((var(--phone-h) + 2*var(--bezel-w))*var(--phone-scale));flex:none}.phone{width:var(--phone-w);height:var(--phone-h);box-sizing:content-box;transform:scale(var(--phone-scale));transform-origin:0 0;border-radius:var(--phone-radius);border:var(--bezel-w)solid var(--bezel);background:#000;position:relative;overflow:hidden;box-shadow:0 30px 70px #0009,0 0 0 2px #2a2d33,inset 0 0 0 1px #000}.island{background:var(--bezel);z-index:2;pointer-events:none;border-radius:20px;width:120px;height:34px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.stage[data-frame=android] .island{border-radius:50%;width:14px;height:14px;top:10px}.phone iframe{background:#fff;border:0;width:100%;height:100%;display:block}.run-on{flex-direction:column;gap:8px;display:flex}.run-on .toggle-group{flex-wrap:wrap}.panel .toggle-group button:disabled{cursor:default;opacity:.45}.stage[hidden]{display:none}.preview-stage{text-align:center;gap:16px}.preview-viewer{background:var(--page);border:0;border-radius:16px;width:100%;height:100%}.gate{place-items:center;min-height:100vh;padding:24px;display:grid}.gate .card{flex-direction:column;gap:14px;width:min(420px,100%);padding:28px 24px;display:flex}.gate h1{margin:0;font-size:18px}.gate .error-text{color:var(--danger);margin:0;font-size:13px}.run-on-field{flex-direction:column;gap:4px;display:flex}.run-on-caption{letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#8b93a1);font-size:11px}
