:root {
  --navy-950: #0b1932;
  --navy-900: #112445;
  --navy-800: #19345d;
  --ink: #14223a;
  --muted: #66738a;
  --soft: #f1f5f8;
  --paper: #fbfcfd;
  --white: #ffffff;
  --orange: #ff681c;
  --orange-soft: #fff0e6;
  --mint: #18b785;
  --mint-soft: #e8f8f2;
  --blue: #3478f6;
  --line: #e3e9ee;
  --shadow: 0 16px 45px rgba(14, 31, 58, 0.08);
  --display: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --body: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  --utility: Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #edf2f5; font-family: var(--body); -webkit-font-smoothing: antialiased; }
.session-pending .app-shell, .logged-out .app-shell { visibility: hidden; }
.session-pending .login-screen, .logged-out .login-screen { display: grid; }
.logged-in .login-screen { display: none; }
.onboarding .login-screen, .onboarding .app-shell { display: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(52,120,246,.28); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 244px; padding: 30px 20px 22px; background: var(--navy-950); color: #fff; display: flex; flex-direction: column; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 13px; padding: 0 10px 34px; }
.brand-mark { width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 3px; background: var(--orange); box-shadow: 0 8px 20px rgba(255,104,28,.32); }
.brand-mark span { width: 3px; border-radius: 3px; background: #fff; animation: bar-wave 1.2s ease-in-out infinite alternate; }
.brand-mark span:nth-child(1) { height: 10px; animation-delay: -.2s; }.brand-mark span:nth-child(2) { height: 20px; animation-delay: -.6s; }.brand-mark span:nth-child(3) { height: 15px; animation-delay: -.4s; }.brand-mark span:nth-child(4) { height: 7px; animation-delay: -.8s; }
@keyframes bar-wave { to { transform: scaleY(.55); } }
.brand-copy { display: flex; flex-direction: column; }
.brand-copy strong { font-size: 20px; letter-spacing: .08em; }.brand-copy small { color: #8f9bb0; font-size: 11px; margin-top: 2px; }
.nav-list { display: flex; flex-direction: column; gap: 6px; }
.nav-item { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 13px; min-height: 52px; padding: 0 14px; border-radius: 12px; color: #aab4c5; font-size: 14px; font-weight: 700; transition: .2s ease; }
.nav-item svg { width: 21px; }.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }.nav-item.active { color: #fff; background: rgba(255,255,255,.1); }
.nav-item.active::before { content: ""; position: absolute; left: -20px; top: 12px; bottom: 12px; width: 4px; background: var(--orange); border-radius: 0 4px 4px 0; }
.nav-count { min-width: 23px; height: 23px; display: grid; place-items: center; border-radius: 12px; background: #223b61; color: #d9e1ed; font-family: var(--utility); font-size: 11px; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 14px; }
.logout-button { min-height: 28px; border: 0; background: transparent; color: #718096; font-size: 9px; cursor: pointer; }.logout-button:hover { color: #fff; }
.download-card { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px; background: #14294a; color: #fff; display: grid; grid-template-columns: 34px 1fr 14px; align-items: center; gap: 10px; text-align: left; cursor: pointer; transition: .2s ease; }
.download-card:hover { transform: translateY(-2px); border-color: rgba(255,104,28,.5); }.download-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,104,28,.16); color: #ff8b51; }.download-icon svg { width: 19px; }
.download-card > span:nth-child(2) { display: grid; gap: 3px; }.download-card strong { font-size: 12px; }.download-card small { color: #8e9bb0; font-size: 9px; }.download-card .chevron { width: 14px; color: #738197; }
.profile { width: 100%; padding: 14px 10px 0; border: 0; border-top: 1px solid rgba(255,255,255,.09); background: none; color: #fff; display: grid; grid-template-columns: 36px 1fr 22px; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.avatar { width: 36px; height: 36px; border: 0; border-radius: 11px; display: grid; place-items: center; background: #ffd8c4; color: #b7410d; font-size: 13px; font-weight: 900; }.profile-copy { display: grid; gap: 2px; }.profile-copy strong { font-size: 12px; }.profile-copy small { color: #8996aa; font-size: 9px; }.profile .more { width: 18px; color: #77869c; fill: currentColor; stroke: none; }
.main-wrap { min-height: 100vh; margin-left: 244px; }
.topbar { height: 82px; padding: 0 clamp(24px, 4vw, 58px); display: flex; align-items: center; justify-content: space-between; background: rgba(251,252,253,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.eyebrow { display: none; }.top-title h1 { margin: 0; font-size: 20px; letter-spacing: -.03em; }.top-actions { display: flex; align-items: center; gap: 12px; }
.network-ok { display: flex; align-items: center; gap: 7px; margin-right: 4px; color: var(--muted); font-size: 11px; }.network-ok span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(24,183,133,.12); }
.icon-button { width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #516079; display: grid; place-items: center; cursor: pointer; }.icon-button svg { width: 19px; }.top-avatar { display: none; cursor: pointer; }
.mobile-brand, .mobile-nav { display: none; }
main { min-height: calc(100vh - 82px); padding: 38px clamp(24px, 4vw, 58px) 64px; background: radial-gradient(circle at 86% 0%, rgba(52,120,246,.06), transparent 24%), #f5f7f9; }
.view { display: none; max-width: 1220px; margin: 0 auto; animation: view-in .32s ease both; }.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.home-intro, .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.date-line { margin: 0 0 7px; color: var(--orange); font-family: var(--utility); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.page-heading h2 { margin: 0; color: var(--navy-950); font-size: clamp(25px, 2.7vw, 34px); line-height: 1.24; letter-spacing: -.06em; }.home-intro p:last-child { margin: 2px 0 0; color: var(--muted); font-size: 13px; }.page-heading p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.ghost-button, .primary-button { min-height: 44px; border-radius: 11px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 800; font-size: 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ghost-button { border: 1px solid #dce3e9; background: #fff; color: #30415d; }.ghost-button:hover { transform: translateY(-1px); border-color: #b9c5d0; }.ghost-button svg { width: 18px; }
.primary-button { width: 100%; min-height: 53px; border: 0; color: #fff; background: var(--orange); box-shadow: 0 9px 20px rgba(255,104,28,.22); }.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(255,104,28,.29); }.primary-button svg { width: 20px; }.primary-button.compact { width: auto; min-height: 44px; padding: 0 22px; }
.status-strip { min-height: 65px; margin-bottom: 18px; padding: 10px 14px 10px 17px; border: 1px solid #dce7e4; border-radius: 15px; background: linear-gradient(90deg, #f0faf6, #fff); display: flex; align-items: center; gap: 14px; box-shadow: 0 5px 18px rgba(14,31,58,.035); }
.status-main { min-width: 210px; display: flex; align-items: center; gap: 12px; padding-right: 18px; border-right: 1px solid #dce8e4; }.pulse-dot { position: relative; width: 9px; height: 9px; margin: 0 3px; border-radius: 50%; background: var(--mint); }.pulse-dot::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--mint); border-radius: 50%; animation: pulse 1.8s infinite; }
@keyframes pulse { 70%,100% { transform: scale(1.6); opacity: 0; } }
.status-main span:last-child { display: grid; }.status-main strong { color: #204a43; font-size: 12px; }.status-main small { margin-top: 3px; color: #79918c; font-size: 9px; }
.status-class { padding: 7px 11px; border: 1px solid #dce8e4; border-radius: 9px; background: #fff; display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; }.online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(24,183,133,.1); }
.strip-link { margin-left: auto; border: 0; background: transparent; color: #597069; font-size: 10px; cursor: pointer; }.strip-link span { padding-left: 3px; font-size: 16px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .85fr); gap: 18px; align-items: start; }
.compose-card, .activity-card, .table-card, .tip-card, .plan-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.compose-card { padding: clamp(22px, 3vw, 32px); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.card-heading > div:first-child { display: flex; align-items: center; gap: 11px; }.card-heading h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }.card-heading > span { color: #7c8899; font-size: 10px; }.section-index { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--navy-900); color: #fff; font: 800 9px/1 var(--utility); letter-spacing: .08em; }
.class-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 17px; }.picker-empty { grid-column: 1 / -1; margin: 0; padding: 25px; border: 1px dashed #d7dfe6; border-radius: 12px; color: #8491a2; font-size: 10px; text-align: center; }.class-chip { position: relative; min-height: 66px; padding: 0 34px 0 39px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; text-align: left; cursor: pointer; transition: .18s ease; }.class-chip:hover { border-color: #b9c6d2; background: #fff; }.class-chip.selected { border-color: #ffb48e; background: var(--orange-soft); box-shadow: inset 0 0 0 1px rgba(255,104,28,.12); }.class-chip .mini-status { position: absolute; left: 18px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: #bdc7d2; }.class-chip .mini-status.online { background: var(--mint); }.class-chip strong { display: block; font-size: 12px; }.class-chip small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }.class-chip > svg { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; padding: 2px; border-radius: 50%; border: 1px solid #d7dfe6; color: transparent; }.class-chip.selected > svg { border-color: var(--orange); background: var(--orange); color: #fff; }.class-chip.offline { opacity: .68; }
.compose-divider { height: 1px; margin: 27px 0 24px; background: var(--line); }.card-heading.second { align-items: flex-start; }
.mode-tabs { padding: 3px; border-radius: 10px; background: #eef2f5; }.mode-tab { min-height: 29px; padding: 0 11px; border: 0; border-radius: 7px; color: #748196; background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }.mode-tab.active { color: var(--navy-900); background: #fff; box-shadow: 0 2px 7px rgba(14,31,58,.08); }
.composer-panel { display: none; }.composer-panel.active { display: block; animation: panel-in .22s ease; }@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } }
.quick-label { margin: 18px 0 9px; display: flex; justify-content: space-between; color: #637086; font-size: 10px; font-weight: 800; }.quick-label button { border: 0; background: transparent; color: #8995a7; cursor: pointer; font-size: 9px; }.template-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }.template-list button { height: 29px; padding: 0 11px; border: 1px solid #dfe5ea; border-radius: 8px; background: #f8fafb; color: #536177; font-size: 9px; cursor: pointer; }.template-list button:hover { color: var(--orange); border-color: #ffc3a4; background: #fff8f4; }
.message-box { position: relative; display: block; }.message-box textarea { width: 100%; height: 108px; resize: vertical; min-height: 90px; padding: 15px 18px 28px; border: 1px solid #d8e0e7; border-radius: 12px; background: #fbfcfd; color: var(--ink); font-size: 15px; line-height: 1.75; transition: .18s ease; }.message-box textarea:focus { border-color: #fd9a68; background: #fff; outline: 3px solid rgba(255,104,28,.09); }.message-box textarea::placeholder { color: #a5afbc; }.char-count { position: absolute; right: 12px; bottom: 10px; color: #9aa5b3; font: 9px/1 var(--utility); }.char-count strong { color: #657286; }
.broadcast-options { min-height: 60px; margin: 11px 0 15px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; display: flex; align-items: center; justify-content: space-between; gap: 14px; }.switch-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }.switch-row input { position: absolute; opacity: 0; pointer-events: none; }.switch { position: relative; width: 32px; height: 18px; border-radius: 12px; background: #ccd4dd; transition: .2s ease; }.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s ease; }.switch-row input:checked + .switch { background: var(--mint); }.switch-row input:checked + .switch::after { transform: translateX(14px); }.switch-row > span:last-child { display: grid; }.switch-row strong { font-size: 10px; }.switch-row small { color: #7b8798; font-size: 8px; margin-top: 3px; }.broadcast-settings { display: flex; align-items: center; gap: 15px; color: #718094; font-size: 9px; }.broadcast-settings label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }.broadcast-settings select { min-width: 58px; height: 31px; padding: 0 7px; border: 1px solid #dce3e9; border-radius: 8px; background: #fff; color: #42516a; font-size: 9px; font-weight: 700; outline: none; transition: opacity .2s ease; }.broadcast-settings select:disabled { opacity: .45; cursor: not-allowed; }
.send-hint { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 9px 0 0; color: #8792a2; font-size: 9px; }.send-hint svg { width: 13px; color: var(--mint); }
.voice-stage { min-height: 338px; padding-top: 27px; display: flex; flex-direction: column; align-items: center; text-align: center; }.voice-orbit { width: 108px; height: 108px; border: 1px dashed #ffc5a9; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,104,28,.08), transparent 62%); }.voice-button-core { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--orange); box-shadow: 0 10px 26px rgba(255,104,28,.28); }.voice-button-core svg { width: 29px; }.voice-mode-kicker { margin-top: 18px; color: #d75b1d; font: 800 8px/1 var(--utility); letter-spacing: .14em; }.voice-stage h4 { margin: 7px 0 7px; font-size: 17px; }.voice-stage p { margin: 0 0 17px; color: var(--muted); font-size: 10px; }.voice-stage .primary-button { min-width: 160px; }.voice-stage .primary-button:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; transform: none; }.voice-privacy { margin-top: 10px; color: #8896a8; font-size: 8px; }
.activity-column { display: grid; gap: 18px; }.activity-card { padding: 24px; }.side-card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }.side-card-title > div { display: flex; align-items: center; gap: 8px; }.side-card-title h3 { margin: 0; font-size: 14px; }.live-pin { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }.side-card-title button { border: 0; background: transparent; color: #7a8798; font-size: 9px; cursor: pointer; }
.timeline { display: grid; }.timeline-item { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 11px; padding-bottom: 22px; }.timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 37px; bottom: 0; border-left: 1px dashed #d7dfe6; }.timeline-icon { z-index: 1; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }.timeline-icon svg { width: 17px; }.timeline-icon.sent { background: var(--orange-soft); color: var(--orange); }.timeline-icon.voice { background: #eaf1ff; color: var(--blue); }.timeline-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 1px; }.timeline-meta strong { font-size: 11px; }.timeline-meta time { color: #9aa4b2; font: 8px/1 var(--utility); }.timeline-item p { margin: 5px 0 4px; color: #4e5b70; font-size: 10px; line-height: 1.5; }.delivered { color: var(--mint); font-size: 8px; }.muted-item { padding-bottom: 0; opacity: .72; }
.empty-copy, .history-empty { margin: 0; color: #8995a5; font-size: 10px; text-align: center; }.empty-copy { padding: 32px 0; }.history-empty { padding: 50px 20px; }
.tip-card { position: relative; min-height: 140px; padding: 22px 20px 20px 126px; display: flex; align-items: center; overflow: hidden; background: var(--navy-900); color: #fff; border: 0; }.tip-card::after { content: ""; position: absolute; width: 120px; height: 120px; right: -60px; top: -55px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }.tip-illustration { position: absolute; left: 13px; bottom: 7px; width: 107px; color: #7590b6; }.tip-illustration svg { width: 100%; stroke-width: 1.5; }.tip-illustration svg circle { fill: var(--orange); stroke: none; }.tip-card > div:last-child { display: grid; }.tip-card span { color: #82a1ce; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.tip-card strong { margin-top: 6px; font-size: 12px; }.tip-card p { margin: 6px 0 0; color: #aebbd0; font-size: 9px; line-height: 1.6; }
.page-heading { margin-bottom: 28px; }.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }.metric-row article { min-height: 94px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: flex; align-items: center; gap: 14px; box-shadow: 0 8px 25px rgba(14,31,58,.045); }.metric-icon { width: 43px; height: 43px; border-radius: 12px; display: grid; place-items: center; }.metric-icon svg { width: 21px; }.metric-icon.green { color: var(--mint); background: var(--mint-soft); }.metric-icon.blue { color: var(--blue); background: #ebf2ff; }.metric-icon.orange { color: var(--orange); background: var(--orange-soft); }.metric-row article > div { display: grid; }.metric-row strong { color: var(--navy-900); font: 800 23px/1.1 var(--utility); }.metric-row small { margin-top: 6px; color: var(--muted); font-size: 9px; }
.table-card { overflow: hidden; }.table-toolbar { min-height: 68px; padding: 0 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }.table-toolbar h3 { margin: 0; font-size: 14px; }.table-toolbar h3 span { margin-left: 5px; color: #929eac; font: 500 10px/1 var(--utility); }.search-field { width: 200px; height: 36px; padding: 0 11px; border: 1px solid #dfe5ea; border-radius: 9px; background: #f8fafb; display: flex; align-items: center; gap: 7px; }.search-field svg { width: 15px; color: #8e9baa; }.search-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }.search-field input::placeholder { color: #9ba6b4; }
.classroom-row { min-height: 82px; padding: 14px 22px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 45px minmax(150px, 1fr) 130px 130px 32px; align-items: center; gap: 13px; }.classroom-row:last-child { border-bottom: 0; }.room-avatar { position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #edf4ff; color: #315f9d; font-size: 13px; font-weight: 900; }.room-avatar b { font-weight: 900; }.room-avatar .online-dot { position: absolute; right: -2px; bottom: -1px; border: 2px solid #fff; width: 9px; height: 9px; box-shadow: none; }.room-avatar.offline-avatar { background: #f0f2f4; color: #8490a0; }.offline-small { position: absolute; right: -2px; bottom: -1px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #aab4c0; }.room-main { display: grid; }.room-main strong { font-size: 12px; }.room-main small, .room-time small { margin-top: 5px; color: #8a96a5; font-size: 9px; }.status-pill { width: max-content; padding: 6px 9px; border-radius: 20px; font-size: 9px; font-weight: 800; }.status-pill.online { color: #148964; background: var(--mint-soft); }.status-pill.offline { color: #7d8997; background: #edf0f3; }.room-time { display: grid; }.room-time span { margin-top: 3px; color: #536177; font-size: 10px; }.more-button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #8692a2; letter-spacing: 2px; cursor: pointer; }.more-button:hover { background: var(--soft); }
.filter-bar { min-height: 60px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; display: flex; align-items: center; gap: 6px; }.filter-bar > span { flex: 1; }.filter { height: 34px; padding: 0 15px; border: 0; border-radius: 9px; background: transparent; color: #748195; font-size: 10px; font-weight: 700; cursor: pointer; }.filter.active { color: var(--navy-900); background: #edf2f7; }.history-list { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }.history-item { min-height: 90px; padding: 15px 21px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 42px minmax(220px, 1fr) 90px 110px 84px; align-items: center; gap: 13px; }.history-item:last-child { border-bottom: 0; }.history-type { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }.history-type svg { width: 19px; }.history-type.orange { color: var(--orange); background: var(--orange-soft); }.history-type.blue { color: var(--blue); background: #eaf1ff; }.history-content { display: grid; }.history-content strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.history-content span { margin-top: 6px; color: #8793a4; font-size: 9px; }.delivery-state { color: #248b6b; font-size: 9px; }.delivery-state b { font-weight: 500; }.delivery-state i, .member-state i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--mint); }.history-item time { color: #788598; font: 9px/1 var(--utility); }.reuse-button { height: 30px; border: 1px solid #dfe5ea; border-radius: 8px; background: #fff; color: #506078; font-size: 9px; cursor: pointer; }.reuse-button:hover { border-color: #ffb38d; color: var(--orange); }
.team-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }.team-table .table-toolbar { min-height: 65px; }.member-row { min-height: 82px; padding: 14px 22px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 44px minmax(130px,1fr) 100px 100px 30px; align-items: center; gap: 12px; }.member-row:last-child { border: 0; }.member-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: 12px; font-weight: 900; }.member-avatar.navy { color: #fff; background: var(--navy-800); }.member-avatar.coral { color: #bd4d1c; background: #ffe0ce; }.member-avatar.mint { color: #148260; background: #dff5ed; }.member-row > div { display: grid; }.member-row strong { font-size: 11px; }.member-row strong em { margin-left: 4px; color: #8390a1; font-size: 8px; font-style: normal; }.member-row small { margin-top: 5px; color: #8e99a8; font: 9px/1 var(--utility); }.role-pill { width: max-content; padding: 6px 9px; border-radius: 8px; color: #56657a; background: #edf1f5; font-size: 8px; font-weight: 800; }.role-pill.owner { color: #ab4518; background: var(--orange-soft); }.role-pill.pro { color: #2461aa; background: #e9f1ff; }.member-state { color: #4b5a70; font-size: 9px; }
.plan-card { padding: 26px; background: var(--navy-900); color: #fff; border: 0; }.plan-tag { padding: 5px 8px; border-radius: 6px; color: #ffc29f; background: rgba(255,104,28,.14); font-size: 8px; font-weight: 800; }.plan-card h3 { margin: 16px 0 7px; font-size: 19px; }.plan-card > p { margin: 0; color: #aebbd0; font-size: 9px; line-height: 1.7; }.price-row { margin: 24px 0 17px; display: flex; align-items: baseline; }.price-row strong { font: 800 32px/1 var(--utility); }.price-row span { margin-left: 6px; color: #9eabc0; font-size: 9px; }.plan-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }.plan-card li { color: #d1d9e5; font-size: 9px; }.plan-card li::before { content: "✓"; margin-right: 7px; color: var(--mint); font-weight: 900; }.plan-divider { height: 1px; margin: 21px 0; background: rgba(255,255,255,.12); }.plan-card .pro-note { display: grid; gap: 4px; }.pro-note strong { color: #fff; font-size: 10px; }.pro-note span { color: #92a2ba; font-size: 8px; }
.modal-backdrop { position: fixed; z-index: 600; inset: 0; padding: 20px; background: rgba(7,17,34,.65); display: none; place-items: center; backdrop-filter: blur(5px); }.modal-backdrop.open { display: grid; animation: fade-in .18s ease; }@keyframes fade-in { from { opacity: 0; } }.modal { position: relative; width: min(430px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 34px; border-radius: 21px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.2); text-align: center; animation: modal-in .24s ease; }@keyframes modal-in { from { transform: translateY(12px) scale(.98); opacity: .5; } }
.modal-close { position: absolute; right: 17px; top: 15px; width: 31px; height: 31px; border: 0; border-radius: 50%; background: #f0f3f6; color: #68768a; font-size: 21px; line-height: 1; cursor: pointer; }.confirm-icon, .success-check { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 17px; display: grid; place-items: center; }.confirm-icon { color: var(--orange); background: var(--orange-soft); }.confirm-icon svg { width: 26px; }.modal-kicker, .step-label { margin: 0 0 7px; color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .08em; }.modal h2 { margin: 0; color: var(--navy-950); font-size: 22px; letter-spacing: -.04em; }.modal > p:not(.modal-kicker):not(.modal-footnote) { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }.confirm-preview { margin: 22px 0; padding: 16px; border: 1px solid #f0d4c5; border-radius: 13px; background: #fff9f5; text-align: left; display: grid; }.confirm-preview span { color: var(--orange); font-size: 9px; font-weight: 900; }.confirm-preview strong { margin: 9px 0; color: var(--ink); font-size: 14px; line-height: 1.6; }.confirm-preview small { color: #718094; font-size: 9px; }.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.modal-actions .ghost-button { width: 100%; }.success-check { border-radius: 50%; background: var(--mint); color: #fff; box-shadow: 0 8px 24px rgba(24,183,133,.25); }.success-check svg { width: 29px; stroke-width: 2.4; }.success-modal > .primary-button { margin-top: 24px; min-width: 130px; }.install-modal { width: min(550px, 100%); }.install-steps { margin: 25px 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.install-steps div { min-height: 102px; padding: 13px 7px; border: 1px solid var(--line); border-radius: 11px; display: grid; justify-items: center; align-content: start; }.install-steps span { width: 24px; height: 24px; margin-bottom: 9px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--orange); font: 800 9px/1 var(--utility); }.install-steps strong { font-size: 10px; }.install-steps small { margin-top: 5px; color: #8793a4; font-size: 8px; }.binding-classroom-label { margin: 0 0 10px; }.binding-classroom-label + .primary-button { margin: 0 0 10px !important; }.binding-code { margin: 0 0 12px; padding: 16px; border: 1px dashed #efbb9f; border-radius: 12px; background: #fffaf7; display: grid; justify-items: center; transition: .2s ease; }.binding-code.pending { border-color: #d8e0e7; background: #f7f9fa; }.binding-code span { color: #7d8999; font-size: 8px; }.binding-code strong { margin: 8px 0; color: var(--navy-900); font: 800 21px/1 var(--utility); letter-spacing: .25em; }.binding-code small { color: #9b7562; font-size: 8px; }.new-classroom-panel { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; text-align: left; }.new-classroom-panel summary { padding: 11px 13px; color: #667489; font-size: 9px; font-weight: 800; cursor: pointer; }.new-classroom-panel > div { padding: 0 12px 12px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }.new-classroom-panel input { min-width: 0; height: 34px; padding: 0 9px; border: 1px solid #dbe2e8; border-radius: 8px; font-size: 9px; }.new-classroom-panel button { border: 0; border-radius: 8px; color: #fff; background: var(--navy-900); font-size: 9px; font-weight: 800; cursor: pointer; }.client-source-button { width: 100%; }.modal-footnote { margin: 12px 0 0; color: #8a95a4; font-size: 8px; }.help-modal { text-align: left; }.help-modal h2 { margin-bottom: 20px; }.help-modal details { border-top: 1px solid var(--line); }.help-modal details:last-child { border-bottom: 1px solid var(--line); }.help-modal summary { padding: 14px 2px; font-size: 11px; font-weight: 800; cursor: pointer; }.help-modal details p { margin: -3px 0 14px; color: var(--muted); font-size: 9px; line-height: 1.7; }.form-label { margin-top: 16px; display: grid; gap: 7px; color: #536178; font-size: 9px; font-weight: 800; text-align: left; }.form-label input, .form-label select { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #dbe2e8; border-radius: 10px; color: var(--ink); background: #fbfcfd; outline: 0; font-size: 11px; }.form-label input:focus, .form-label select:focus { border-color: #ff9b69; }.modal .form-label + .primary-button, .modal .form-label ~ .primary-button { margin-top: 20px; }
.voice-live-backdrop { background: rgba(5,15,31,.92); }.voice-live-modal { --voice-scale:.55; position: relative; width: min(530px, 100%); padding: 52px 30px; color: #fff; text-align: center; }.voice-live-modal::before { position:absolute; inset:8% 4%; border:1px solid rgba(255,255,255,.07); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.018),0 0 0 90px rgba(255,255,255,.012); content:""; pointer-events:none; }.voice-live-modal > * { position:relative; z-index:1; }.modal-close.light { color: #fff; background: rgba(255,255,255,.1); }.live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 20px; color: #ffb18a; background: rgba(255,104,28,.13); font-size: 9px; font-weight: 900; }.live-badge b { font:inherit; }.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,104,28,.13); animation:live-signal 1.2s ease-out infinite; }@keyframes live-signal{70%,100%{box-shadow:0 0 0 11px rgba(255,104,28,0)}}.voice-live-modal h2 { margin: 17px 0 7px; font-size: 30px; }.voice-live-modal > p { margin: 0; color: #a9b7cc; font-size: 10px; }.waveform { height: 96px; margin: 35px auto 17px; display: flex; align-items: center; justify-content: center; gap: 6px; }.waveform i { width: 5px; height: 48px; border-radius: 5px; background: linear-gradient(to top, var(--orange), #ffc09f); transform:scaleY(.25); animation:live-wave .52s ease-in-out infinite alternate; }.waveform i:nth-child(2),.waveform i:nth-child(10){height:62px;animation-delay:-.13s}.waveform i:nth-child(3),.waveform i:nth-child(9){height:78px;animation-delay:-.39s}.waveform i:nth-child(4),.waveform i:nth-child(8){height:54px;animation-delay:-.22s}.waveform i:nth-child(5),.waveform i:nth-child(7){height:88px;animation-delay:-.46s}.waveform i:nth-child(6){height:68px;animation-delay:-.31s}@keyframes live-wave{to{transform:scaleY(var(--voice-scale));opacity:.62}}.voice-timer { display: block; font: 700 16px/1 var(--utility); letter-spacing: .08em; }.stop-voice { min-width: 150px; height: 47px; margin-top: 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; font-size: 11px; font-weight: 800; }.stop-voice:hover { border-color:rgba(255,104,28,.55); background:rgba(255,104,28,.12); }.stop-voice span { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 2px; background: var(--orange); }.voice-live-privacy { display:block; margin-top:15px; color:#7789a4; font-size:8px; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 28px; min-width: 210px; padding: 12px 17px; border-radius: 12px; background: var(--navy-950); color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.22); display: flex; align-items: center; gap: 10px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast span { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; color: var(--navy-950); background: var(--mint); font-size: 10px; font-weight: 900; }.toast p { margin: 0; font-size: 10px; font-weight: 700; }
.login-screen { position: fixed; z-index: 500; inset: 0; display: none; grid-template-columns: minmax(330px, .9fr) minmax(480px, 1.1fr); background: #f6f8fa; }
.login-brand-panel { position: relative; overflow: hidden; padding: 48px clamp(32px, 5vw, 80px); background: radial-gradient(circle at 65% 60%, #1c3f70, transparent 40%), var(--navy-950); color: #fff; display: flex; flex-direction: column; justify-content: space-between; }.login-brand-panel::before { content: ""; position: absolute; width: 520px; height: 520px; left: -220px; bottom: -300px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.02), 0 0 0 110px rgba(255,255,255,.02); }.login-brand { position: relative; z-index: 1; padding: 0; }.login-statement { position: relative; z-index: 1; }.login-statement p { margin: 0; font-size: clamp(36px, 4vw, 62px); line-height: 1.22; letter-spacing: -.07em; font-weight: 900; }.login-signal { height: 72px; margin-top: 35px; display: flex; align-items: center; gap: 8px; }.login-signal i { width: 4px; height: 14px; border-radius: 4px; background: var(--orange); animation: login-wave 1.4s ease-in-out infinite alternate; }.login-signal i:nth-child(2),.login-signal i:nth-child(8){height:27px;animation-delay:-.2s}.login-signal i:nth-child(3),.login-signal i:nth-child(7){height:44px;animation-delay:-.7s}.login-signal i:nth-child(4),.login-signal i:nth-child(6){height:65px;animation-delay:-1s}.login-signal i:nth-child(5){height:38px;animation-delay:-.45s}@keyframes login-wave{to{transform:scaleY(.4);opacity:.5}}.login-points { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 20px; color: #94a6c0; font-size: 10px; }.login-points span::before { content: "✓"; margin-right: 7px; color: var(--mint); font-weight: 900; }
.login-form-panel { display: grid; place-items: center; padding: 35px; }.login-card { width: min(390px, 100%); }.login-kicker { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .12em; }.login-card h1 { margin: 10px 0 8px; color: var(--navy-950); font-size: 34px; letter-spacing: -.06em; }.login-card > p { margin: 0 0 30px; color: var(--muted); font-size: 11px; }.login-card label { margin-top: 16px; display: grid; gap: 8px; color: #4d5d75; font-size: 10px; font-weight: 800; }.login-card input { width: 100%; height: 50px; padding: 0 15px; border: 1px solid #dbe2e8; border-radius: 11px; background: #fff; color: var(--ink); outline: none; font-size: 13px; box-shadow: 0 5px 18px rgba(14,31,58,.025); }.login-card input:focus { border-color: #ff9b69; box-shadow: 0 0 0 3px rgba(255,104,28,.08); }.login-error { min-height: 27px; padding-top: 9px; display: block; color: #db493e; font-size: 9px; }.login-card .primary-button:disabled { opacity: .65; cursor: wait; }.demo-account { margin-top: 17px; padding: 12px 14px; border-radius: 10px; background: #edf1f5; display: flex; justify-content: space-between; color: #7e8998; font: 9px/1.4 var(--utility); }.demo-account strong { color: #55647a; font-family: var(--body); }

.class-chip.managed-class { box-shadow: inset 3px 0 0 var(--blue); }
.class-chip.collaborating-class { box-shadow: inset 3px 0 0 var(--mint); }
.classroom-row.managed-class .room-avatar { background: #edf4ff; color: var(--blue); }
.classroom-row.collaborating-class .room-avatar { background: var(--mint-soft); color: #188064; }
.class-context + .primary-button { margin-left: 10px; }

@media (max-width: 1000px) {
  .sidebar { width: 210px; }.main-wrap { margin-left: 210px; }.home-grid { grid-template-columns: 1fr; }.activity-column { grid-template-columns: 1.25fr .75fr; }.status-class { display: none; }.team-layout { grid-template-columns: 1fr; }.plan-card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }.plan-card .plan-divider { display: none; }.plan-card .pro-note { grid-column: 2; grid-row: 2 / span 2; }.history-item { grid-template-columns: 42px minmax(180px,1fr) 80px 90px 76px; }
}

@media (max-width: 760px) {
  .login-screen { grid-template-columns: 1fr; overflow-y: auto; }.login-brand-panel { min-height: 210px; padding: 28px 24px; }.login-statement p { margin-top: 35px; font-size: 31px; }.login-signal { display: none; }.login-points { margin-top: 28px; }.login-form-panel { align-items: start; padding: 32px 24px 50px; }.login-card h1 { font-size: 29px; }.login-card > p { margin-bottom: 20px; }
  .sidebar { display: none; }.main-wrap { margin-left: 0; }.topbar { position: sticky; z-index: 30; top: 0; height: 67px; padding: 0 17px; }.top-title { display: none; }.mobile-brand { padding: 0; border: 0; background: none; display: flex; align-items: center; gap: 9px; color: var(--navy-950); }.brand-mark.small { width: 31px; height: 31px; border-radius: 9px; }.brand-mark.small span { width: 2px; }.mobile-brand strong { font-size: 17px; letter-spacing: .06em; }.network-ok { display: none; }.top-avatar { display: grid; }.icon-button { border: 0; background: transparent; }.mobile-nav { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); height: 62px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; display: grid; grid-template-columns: repeat(4,1fr); background: rgba(11,25,50,.96); box-shadow: 0 10px 30px rgba(7,18,36,.28); backdrop-filter: blur(14px); }.mobile-nav a { border-radius: 12px; color: #8797b0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 8px; font-weight: 700; }.mobile-nav a svg { width: 19px; }.mobile-nav a.active { color: #fff; background: rgba(255,255,255,.1); }.mobile-nav a.active svg { color: #ff8c55; }
  main { min-height: calc(100vh - 67px); padding: 24px 15px 100px; }.home-intro, .page-heading { align-items: flex-start; margin-bottom: 20px; }.page-heading h2 { font-size: 25px; }.home-intro p:last-child, .page-heading p:last-child { font-size: 11px; line-height: 1.6; }.home-intro > .ghost-button { display: none; }.page-heading > button { min-width: max-content; }.status-strip { padding: 10px 14px; }.status-main { min-width: 0; border: 0; }.status-main small { display: none; }.strip-link { font-size: 0; }.strip-link span { font-size: 19px; }.home-grid { gap: 14px; }.compose-card { padding: 20px 15px; border-radius: 16px; }.class-picker { grid-template-columns: 1fr; }.class-chip { min-height: 60px; }.card-heading.second { flex-direction: column; }.mode-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }.mode-tab { min-height: 34px; }.broadcast-options { align-items: flex-start; flex-direction: column; padding: 13px; }.broadcast-settings { width: 100%; padding-left: 42px; }.broadcast-settings label { flex: 1; }.broadcast-settings select { flex: 1; min-width: 0; }.primary-button { min-height: 51px; }.activity-column { grid-template-columns: 1fr; }.tip-card { min-height: 130px; }.metric-row { grid-template-columns: 1fr; gap: 8px; }.metric-row article { min-height: 76px; padding: 14px 17px; }.table-card { border-radius: 14px; }.table-toolbar { padding: 0 14px; }.table-toolbar .search-field { width: 145px; }.classroom-row { grid-template-columns: 43px 1fr auto; padding: 14px; }.classroom-row .status-pill { grid-column: 2; }.classroom-row .room-time { display: none; }.classroom-row .more-button { grid-column: 3; grid-row: 1; }.filter-bar { overflow-x: auto; }.filter-bar .search-field { display: none; }.history-item { grid-template-columns: 39px 1fr auto; padding: 14px; }.history-item .delivery-state { grid-column: 2; }.history-item time { grid-column: 3; grid-row: 1; }.reuse-button { grid-column: 3; grid-row: 2; }.team-layout { grid-template-columns: 1fr; }.member-row { grid-template-columns: 42px 1fr auto; padding: 14px; }.member-row .role-pill { grid-column: 2; }.member-row .member-state { display: none; }.member-row .more-button { grid-column: 3; grid-row: 1; }.plan-card { display: block; }.plan-card .pro-note { margin-top: 18px; }.modal { padding: 31px 19px 23px; }.install-steps { grid-template-columns: 1fr; }.install-steps div { min-height: 62px; grid-template-columns: 30px 1fr; justify-items: start; align-items: center; text-align: left; }.install-steps span { grid-row: 1 / span 2; margin: 0; }.install-steps small { margin-top: -5px; }.new-classroom-panel > div { grid-template-columns: 1fr; }.new-classroom-panel button { min-height: 34px; }.toast { bottom: 86px; }
}

/* v0.8.5 — invitation handoff: platform review passes one clear action to the class manager. */
.team-main-column { min-width: 0; display: grid; gap: 14px; }
.classroom-code-card { overflow: hidden; border: 1px solid #d7e2ed; border-radius: 17px; background: linear-gradient(145deg,#fff 0%,#f4f8fc 100%); box-shadow: var(--shadow); }
.classroom-code-card[hidden] { display: none; }
.classroom-code-card > header { min-height: 76px; padding: 17px 21px; border-bottom: 1px solid #e2e9f0; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.classroom-code-card > header > div { display: grid; gap: 5px; }
.classroom-code-card > header > div > span { color: var(--orange); font: 800 8px/1 var(--utility); letter-spacing: .12em; }
.classroom-code-card h3 { margin: 0; color: var(--navy-950); font-size: 14px; }
.classroom-code-card p { margin: 0; color: #7d8999; font-size: 9px; line-height: 1.55; }
.classroom-code-safety { padding: 7px 10px; border-radius: 999px; color: #14795d; background: #e5f6ef; font-size: 8px; font-weight: 800; white-space: nowrap; }
.classroom-code-ticket { margin: 18px 21px 14px; padding: 17px 19px; border: 1px dashed #bdcad8; border-radius: 13px; background: #fff; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 16px; }
.classroom-code-ticket small { color: #66768b; font-size: 9px; font-weight: 800; }
.classroom-code-ticket strong { grid-row: 1 / span 2; grid-column: 2; color: var(--navy-950); font: 900 29px/1 var(--utility); letter-spacing: .11em; white-space: nowrap; }
.classroom-code-ticket span { color: #8794a5; font-size: 8px; }
.classroom-invite-steps { margin: 0; padding: 0 21px; list-style: none; display: grid; gap: 8px; }
.classroom-invite-steps li { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 9px; color: #5f6e82; font-size: 9px; }
.classroom-invite-steps b { width: 22px; height: 22px; border-radius: 7px; color: #315f9d; background: #e8f0fa; display: grid; place-items: center; font: 800 8px/1 var(--utility); }
.classroom-code-card > footer { padding: 17px 21px 20px; display: flex; gap: 9px; }
.classroom-code-card > footer[hidden] { display: none; }
.classroom-code-card > footer button { flex: 1; }
.classroom-code-unbound { margin: 0 !important; padding: 0 21px 20px; color: #b05b30 !important; }
.classroom-code-unbound[hidden] { display: none; }
.invitation-ledger { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.invitation-ledger[hidden] { display: none; }
.invitation-ledger > header { min-height: 68px; padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.invitation-ledger > header > div { display: grid; gap: 5px; }
.invitation-ledger > header span { color: var(--orange); font: 800 8px/1 var(--utility); letter-spacing: .12em; }
.invitation-ledger > header h3 { margin: 0; color: var(--navy-950); font-size: 13px; }
.invitation-ledger > header h3 b { display: inline-grid; min-width: 19px; height: 19px; margin-left: 5px; place-items: center; border-radius: 7px; background: #edf2f7; color: #66758a; font: 800 9px/1 var(--utility); }
.invitation-ledger > header > small { color: #7d8999; font-size: 9px; }
.invitation-item { position: relative; min-height: 78px; padding: 14px 18px 14px 24px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.2fr) auto; align-items: center; gap: 18px; }
.invitation-item:last-child { border-bottom: 0; }
.invitation-item::before { position: absolute; inset: 14px auto 14px 0; width: 4px; border-radius: 0 4px 4px 0; background: #b7c2d0; content: ""; }
.invitation-item.approved::before { background: #28aa82; }
.invitation-item.rejected::before { background: #dc6d5d; }
.invitation-item.expired::before { background: #d69a45; }
.invitation-person, .invitation-stage { display: grid; gap: 6px; }
.invitation-person strong { color: var(--navy-950); font: 800 12px/1.2 var(--utility); }
.invitation-person small, .invitation-stage small { color: #8490a0; font-size: 9px; line-height: 1.45; }
.invitation-stage span { width: max-content; padding: 6px 9px; border-radius: 8px; background: #edf1f5; color: #59677a; font-size: 8px; font-weight: 800; }
.invitation-item.approved .invitation-stage span { background: #e5f6ef; color: #14795d; }
.invitation-item.rejected .invitation-stage span { background: #fff0ed; color: #bd4d40; }
.invitation-item.expired .invitation-stage span { background: #fff5e5; color: #9b651c; }
.invitation-copy { min-height: 36px; padding: 0 13px; border: 1px solid #cbd8e7; border-radius: 10px; background: #f7faff; color: #17365f; font-size: 9px; font-weight: 800; cursor: pointer; }
.invitation-copy:hover { border-color: #ff9c6d; color: #d9581b; background: #fff8f4; }
.invitation-copy:disabled { opacity: .55; cursor: wait; }
.join-review-actions { display:flex; gap:7px; }
.join-review-actions[hidden] { display:none; }
.join-review-actions button { min-height:34px; padding:0 12px; border:1px solid #cbd8e7; border-radius:9px; background:#f7faff; color:#17365f; font-size:9px; font-weight:800; cursor:pointer; }
.join-review-actions button[data-action="approve"] { border-color:#9fdac7; background:#ebf8f3; color:#14795d; }
.join-review-actions button[data-action="reject"] { border-color:#efc4bd; background:#fff5f3; color:#b4493c; }
.invitation-empty { margin: 0; padding: 24px 20px; color: #8591a1; font-size: 10px; }

@media (max-width: 760px) {
  .classroom-code-card > header { padding: 15px; align-items: flex-start; flex-direction: column; gap: 9px; }
  .classroom-code-card > header p { max-width: 210px; }
  .classroom-code-ticket { margin: 14px 15px 13px; padding: 15px; }
  .classroom-code-ticket strong { font-size: 24px; }
  .classroom-invite-steps { padding: 0 15px; }
  .classroom-code-card > footer { padding: 15px; }
  .classroom-code-card .invitation-copy { grid-column: auto; grid-row: auto; }
  .classroom-code-unbound { padding: 0 15px 17px; }
  .invitation-ledger > header { align-items: flex-start; flex-direction: column; gap: 6px; padding: 14px; }
  .invitation-item { padding: 15px 14px 15px 20px; grid-template-columns: 1fr auto; gap: 12px; }
  .invitation-stage { grid-column: 1 / -1; grid-row: 2; }
  .invitation-copy { grid-column: 2; grid-row: 1; }
  .join-review-actions { grid-column:2; grid-row:1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.application-link{width:100%;margin-top:12px;border:0;background:transparent;color:#536b8a;font-size:11px;font-weight:700;cursor:pointer}.application-link:hover{color:#ff681c}.application-modal>p{color:#718097;line-height:1.7}.application-result{display:block;min-height:24px;margin:8px 0;color:#178365}.application-result.error{color:#d84f3c}

/* v0.9.4 — a two-step teacher handoff: identity first, classroom after approval. */
.application-modal { width: min(480px, 100%); padding: 31px 34px 27px; text-align: left; }
.application-route, .onboarding-route { position: relative; margin: 0 0 25px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; }
.application-route::before, .onboarding-route::before { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: 1px; background: #dce4eb; }
.application-route li, .onboarding-route li { position: relative; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 9px; }
.application-route li + li, .onboarding-route li + li { padding-left: 15px; background: linear-gradient(90deg, transparent, #fff 15px); }
.application-route li > span, .onboarding-route li > span { z-index: 1; width: 36px; height: 36px; border: 1px solid #d7e0e8; border-radius: 50%; color: #7c8999; background: #fff; display: grid; place-items: center; font: 800 10px/1 var(--utility); }
.application-route li.current > span, .onboarding-route li.current > span { border-color: var(--orange); color: #fff; background: var(--orange); box-shadow: 0 6px 16px rgba(255,104,28,.22); }
.application-route li div, .onboarding-route li div { min-width: 0; display: grid; gap: 3px; }
.application-route strong, .onboarding-route strong { color: var(--ink); font-size: 10px; }
.application-route small, .onboarding-route small { color: #8b96a5; font-size: 8px; }
.application-modal .modal-kicker { margin-top: 2px; }
.application-modal > p:not(.modal-kicker) { margin: 9px 0 17px; }
.application-modal .form-label { margin-top: 12px; }
.application-privacy { margin-top: 15px; padding: 13px 14px; border-left: 3px solid #315f9d; border-radius: 0 10px 10px 0; color: #6d7b8f; background: #f3f7fb; display: grid; gap: 5px; font-size: 9px; line-height: 1.7; }
.application-privacy strong { color: #315f9d; font-size: 9px; }
.application-modal .primary-button { width: 100%; margin-top: 3px !important; }

.onboarding-screen { min-height: 100vh; display: none; background-color: #f2f6f9; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(30,62,99,.035) 32px); }
.onboarding .onboarding-screen { display: block; }
.onboarding-header { height: 82px; padding: 0 clamp(22px,5vw,72px); border-bottom: 1px solid #dce4eb; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: space-between; }
.onboarding-header .brand { padding: 0; }
.onboarding-header button { border: 0; color: #718096; background: transparent; cursor: pointer; font-size: 10px; }
.onboarding-main { min-height: calc(100vh - 82px); padding: 34px 20px 55px; display: grid; place-items: center; }
.onboarding-card { position: relative; width: min(560px,100%); padding: 38px 43px 41px; border: 1px solid #dbe4ec; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(20,42,72,.1); }
.onboarding-card::before { content: "班"; position: absolute; right: 25px; bottom: 12px; color: rgba(17,36,69,.035); font: 900 128px/1 "KaiTi",serif; pointer-events: none; }
.onboarding-route li.complete > span { border-color: var(--mint); color: #fff; background: var(--mint); }
.onboarding-kicker { margin: 0 0 8px; color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.onboarding-card h1 { margin: 0; color: var(--navy-950); font-size: 31px; letter-spacing: -.05em; }
.onboarding-card > p:not(.onboarding-kicker) { margin: 10px 0 23px; color: #718096; font-size: 11px; line-height: 1.7; }
.onboarding-card > label { position: relative; margin-top: 13px; color: #4d5d75; display: grid; gap: 7px; font-size: 10px; font-weight: 800; }
.onboarding-card > label small { color: #929dab; font-size: 8px; font-weight: 600; }
.onboarding-card input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #dbe3ea; border-radius: 11px; color: var(--ink); background: #fbfcfd; outline: none; }
.onboarding-card input:focus { border-color: #ff9b69; background: #fff; box-shadow: 0 0 0 3px rgba(255,104,28,.08); }
.onboarding-privacy { position: relative; z-index: 1; margin-top: 17px; padding: 12px 14px; border-radius: 11px; color: #6b7b91; background: #eef4fa; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.onboarding-privacy span { padding: 4px 7px; border-radius: 6px; color: #315f9d; background: #dfeafb; font-size: 8px; font-weight: 900; }
.onboarding-privacy p { margin: 1px 0 0; font-size: 9px; line-height: 1.7; }
.onboarding-error { position: relative; z-index: 1; min-height: 25px; padding-top: 8px; color: #d84f3c; display: block; font-size: 9px; }
.onboarding-card .primary-button { position: relative; z-index: 1; width: 100%; }

@media (max-width: 600px) {
  .application-modal { padding: 27px 19px 23px; }
  .application-route li + li, .onboarding-route li + li { padding-left: 6px; background: linear-gradient(90deg, transparent, #fff 6px); }
  .application-route li, .onboarding-route li { grid-template-columns: 31px 1fr; gap: 6px; }
  .application-route li > span, .onboarding-route li > span { width: 31px; height: 31px; }
  .application-route::before, .onboarding-route::before { top: 15px; }
  .onboarding-header { height: 68px; }
  .onboarding-header .brand-copy small { display: none; }
  .onboarding-main { min-height: calc(100vh - 68px); padding: 20px 14px 35px; align-items: start; }
  .onboarding-card { padding: 28px 19px 31px; border-radius: 18px; }
  .onboarding-card h1 { font-size: 27px; }
  .onboarding-privacy { grid-template-columns: 1fr; gap: 5px; }
  .onboarding-privacy span { width: max-content; }
}

/* v0.5 classroom workspace — a living class ledger, not a generic dashboard */
.nav-new { margin-left: auto; padding: 3px 6px; border-radius: 5px; background: #ff6b1a; color: #fff; font: 700 9px/1 "Arial Narrow", sans-serif; letter-spacing: .08em; }
.tools-heading { align-items: flex-end; }
.class-context { min-width: 220px; color: #66758b; font-size: 12px; font-weight: 700; }
.class-context select { display: block; width: 100%; margin-top: 7px; border: 1px solid #dbe3ed; border-radius: 12px; padding: 12px 36px 12px 14px; background: #fff; color: #102445; font: 700 14px/1.2 "Microsoft YaHei UI", sans-serif; }
.workspace-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 20px; }
.workspace-tabs button { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; border: 1px solid #dfe6ee; border-radius: 16px; background: #fff; padding: 16px; color: #102445; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.workspace-tabs button:hover { transform: translateY(-2px); border-color: #bdcbdc; }
.workspace-tabs button.active { border-color: #ff6b1a; box-shadow: 0 8px 24px rgba(255,107,26,.12); }
.workspace-tabs button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #edf3f8; color: #173257; font: 900 18px/1 "STKaiti", "KaiTi", serif; }
.workspace-tabs button.active > span { background: #ff6b1a; color: #fff; }
.workspace-tabs strong { font-size: 15px; }.workspace-tabs small { margin-top: 3px; color: #8290a4; }
.workspace-loading { padding: 34px; border: 1px dashed #cbd7e4; border-radius: 16px; text-align: center; color: #708096; background: rgba(255,255,255,.65); }.workspace-loading[hidden] { display: none; }
.workspace-panel { display: none; }.workspace-panel.active { display: block; animation: workspace-in .22s ease-out; }@keyframes workspace-in { from { opacity: 0; transform: translateY(5px); } }
.workspace-grid { display: grid; gap: 18px; }.roster-grid { grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); }.today-grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); margin-top: 18px; }
.chalk-card { background: #fff; border: 1px solid #e0e7ef; border-radius: 18px; padding: 22px; box-shadow: 0 10px 32px rgba(30,55,87,.05); }.chalk-card > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.chalk-card header > div { display: flex; align-items: center; gap: 10px; }.chalk-card h3 { margin: 0; color: #102445; font-size: 18px; }.chalk-card > p { margin: 12px 0 18px; color: #718097; line-height: 1.7; }
.card-index { display: inline-grid; place-items: center; width: 38px; height: 29px; border-radius: 6px 11px 6px 11px; background: #173257; color: #fff; font: 700 12px/1 "KaiTi", serif; transform: rotate(-2deg); }.card-index.orange { background: #ff6b1a; }.card-index.mint { background: #23a982; }
.text-button { border: 0; background: transparent; color: #e85b15; font-weight: 700; cursor: pointer; }.file-button { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.roster-actions { display: flex; gap: 10px; flex-wrap: wrap; }.import-preview { margin-top: 14px; padding: 12px; border: 1px solid #ffd4bd; border-radius: 12px; background: #fff7f2; display: flex; justify-content: space-between; align-items: center; gap: 10px; }.import-preview[hidden] { display: none; }.import-preview div { display: flex; flex-direction: column; gap: 3px; }.import-preview small { color: #b35425; }
.roster-table-wrap { max-height: 305px; overflow: auto; margin-top: 16px; border: 1px solid #e6ebf1; border-radius: 12px; }.roster-table { width: 100%; border-collapse: collapse; font-size: 13px; }.roster-table th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: #f3f6f9; color: #748197; text-align: left; }.roster-table td { padding: 10px 12px; border-top: 1px solid #edf1f5; color: #243a5a; }.roster-table td:last-child { color: #1b9a76; }
.duty-task-list { display: grid; gap: 9px; margin: 17px 0 12px; }.duty-task-row { display: grid; grid-template-columns: minmax(120px, 1fr) 84px 32px; gap: 8px; align-items: center; }.duty-task-row input { min-width: 0; border: 1px solid #dfe6ed; border-radius: 10px; padding: 11px; color: #173257; background: #f9fbfc; }.duty-task-row label { display: flex; align-items: center; gap: 5px; color: #7a8798; font-size: 12px; }.duty-task-row label input { width: 48px; padding: 10px 5px; text-align: center; }.duty-task-row button { border: 0; background: transparent; color: #a4adba; font-size: 20px; cursor: pointer; }
.term-rule { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #d6dee8; }.term-rule h4 { margin: 0 0 12px; color: #173257; }.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.date-fields label,.time-range label { color: #7a8798; font-size: 11px; font-weight: 700; }.date-fields input,.time-range input { display: block; width: 100%; margin-top: 5px; padding: 10px; border: 1px solid #dbe3ec; border-radius: 10px; color: #173257; background: #f9fbfc; }.term-rule p { margin: 10px 0; color: #8995a6; font-size: 12px; }.term-rule .primary-button { width: 100%; }
.today-board { position: relative; display: grid; grid-template-columns: 130px 1fr; min-height: 220px; overflow: hidden; border-radius: 18px; background: #102445; color: #fff; box-shadow: 0 14px 36px rgba(16,36,69,.18); }.today-board::after { content: "值"; position: absolute; right: -5px; bottom: -54px; color: rgba(255,255,255,.035); font: 900 190px/1 "KaiTi", serif; }.board-date { display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }.board-date span { color: #ff9a62; font-weight: 700; }.board-date strong { margin-top: 7px; font: 800 36px/1 "Arial Narrow", sans-serif; }.today-board > div:last-child { position: relative; z-index: 1; padding: 25px; }.today-board p { margin: 0; color: #9fb0c7; }.today-board h3 { margin: 5px 0 18px; font-size: 24px; }.today-assignments { display: flex; flex-wrap: wrap; gap: 9px; }.today-duty-chip { padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.1); }.today-duty-chip b { margin-right: 7px; color: #ff8a4a; }.today-duty-chip button { margin-left: 8px; border: 0; background: transparent; color: #a9b9cf; cursor: pointer; }
.live-status { color: #159878; font-size: 12px; font-weight: 700; }.time-range { display: grid; grid-template-columns: 1fr 20px 1fr; gap: 8px; align-items: end; margin: 24px 0 15px; }.time-range > span { padding-bottom: 10px; text-align: center; color: #97a2b1; }.check-row { display: flex; gap: 8px; align-items: center; color: #52647d; font-size: 13px; margin-bottom: 18px; }
.widget-prerequisite { margin: 18px 0 12px; padding: 10px 12px; border: 1px solid #efd9cc; border-radius: 10px; color: #9a5b38; background: #fff8f3; font-size: 10px; line-height: 1.55; }.widget-prerequisite[data-ready="true"] { border-color: #cce5dd; color: #19745c; background: #f1faf7; }.widget-enable-row { align-items: flex-start; margin: 0; padding: 13px; border: 1px solid #dce5ec; border-radius: 12px; background: #f8fafc; }.widget-enable-row input { margin-top: 3px; }.widget-enable-row span { display: grid; gap: 4px; }.widget-enable-row b { color: #18304f; font-size: 12px; }.widget-enable-row small { color: #7d8a9b; font-size: 9px; line-height: 1.5; }.widget-settings .time-range { margin-top: 15px; }.widget-settings #save-widget { width: 100%; }
.seat-toolbar { display: flex; justify-content: space-between; gap: 24px; align-items: center; }.seat-toolbar > div:first-child > span,.seat-toolbar > div:first-child > h3 { display: inline-flex; margin-right: 9px; vertical-align: middle; }.seat-toolbar p { margin: 9px 0 0; color: #718097; }.seat-controls { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; }.seat-controls label { color: #75839a; font-size: 11px; }.seat-controls input { display: block; width: 60px; margin-top: 4px; padding: 9px; border: 1px solid #dae3ec; border-radius: 9px; }
.seat-workbench { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 18px; margin-top: 18px; }.seat-canvas-card { overflow: auto; min-height: 500px; padding: 22px; border: 1px solid #dfe6ee; border-radius: 18px; background-color: #f8fafc; background-image: linear-gradient(#edf2f6 1px,transparent 1px),linear-gradient(90deg,#edf2f6 1px,transparent 1px); background-size: 24px 24px; }.teacher-desk { width: min(360px,70%); margin: 0 auto 42px; padding: 10px; border-radius: 6px 6px 18px 18px; background: #173257; color: #fff; text-align: center; font: 700 12px/1.2 "KaiTi", serif; letter-spacing: .12em; }.seat-board { display: grid; gap: 12px; min-width: 580px; }.seat-cell { position: relative; display: grid; place-items: center; min-height: 72px; border: 1px dashed #b9c7d6; border-radius: 11px; background: rgba(255,255,255,.9); color: #9aa7b7; font-size: 11px; }.seat-cell.occupied { border-style: solid; border-color: #b8cae0; color: #173257; font-size: 13px; font-weight: 700; box-shadow: 0 5px 12px rgba(23,50,87,.07); }.seat-cell.locked { border-color: #ff9961; background: #fff7f2; }.seat-cell.drag-over { outline: 3px solid rgba(255,107,26,.25); }.seat-lock { position: absolute; top: 4px; right: 5px; border: 0; background: transparent; font-size: 12px; cursor: pointer; opacity: .7; }
.student-tray { padding: 18px; border-radius: 18px; background: #173257; color: #fff; }.student-tray header { display: flex; justify-content: space-between; align-items: center; }.student-tray h3 { margin: 0; font-size: 15px; }.student-tray header span { min-width: 28px; padding: 5px; border-radius: 9px; background: #ff6b1a; text-align: center; font-weight: 800; }.student-tray > div { display: grid; gap: 7px; max-height: 390px; overflow: auto; margin: 18px 0; }.student-token { padding: 10px; border-radius: 8px; background: rgba(255,255,255,.1); cursor: grab; font-size: 13px; }.student-tray p { color: #9fb0c7; font-size: 11px; line-height: 1.7; }
.active-scene-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; padding: 13px 16px; border: 1px solid #dce5ed; border-radius: 13px; background: #fff; color: #607189; }.active-scene-bar div { display: flex; align-items: center; gap: 9px; }.active-scene-bar i { width: 9px; height: 9px; border-radius: 50%; background: #a9b4c1; }.active-scene-bar.live { border-color: #b9dfd4; background: #f2fbf8; color: #16765f; }.active-scene-bar.live i { background: #20ad84; box-shadow: 0 0 0 5px rgba(32,173,132,.12); }.active-scene-bar button { border: 0; background: transparent; color: #d55030; font-weight: 700; cursor: pointer; }
.scene-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 15px; }.scene-card { display: flex; flex-direction: column; min-height: 255px; padding: 21px; border-radius: 18px; color: #fff; overflow: hidden; position: relative; }.scene-card::after { content: attr(data-mark); position: absolute; right: -10px; bottom: -45px; font: 900 130px/1 "KaiTi", serif; color: rgba(255,255,255,.06); }.scene-card > span { font-size: 11px; font-weight: 800; letter-spacing: .12em; opacity: .7; }.scene-card h3 { margin: 8px 0 14px; font-size: 20px; line-height: 1.35; }.scene-card p { color: inherit; opacity: .7; font-size: 12px; line-height: 1.6; }.scene-card textarea,.scene-card input { position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; padding: 11px; resize: none; }.scene-card textarea { min-height: 72px; }.scene-card textarea::placeholder { color: rgba(255,255,255,.55); }.scene-card > button { position: relative; z-index: 1; margin-top: auto; border: 0; border-radius: 10px; padding: 11px; background: #fff; color: #132c4f; font-weight: 800; cursor: pointer; }.scene-card > .secondary-scene-button { margin-top: 7px; background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.2); }.scene-text { grid-column: span 2; background: #173257; }.scene-image { grid-column: span 2; background: #475e7c; }.scene-countdown { grid-column: span 2; background: #df5f24; }.scene-random { grid-column: span 2; background: #188d70; }.scene-seat { grid-column: span 4; min-height: 210px; background: linear-gradient(110deg,#243b60,#102445); }
.image-drop { display: grid; place-items: center; min-height: 68px; border: 1px dashed rgba(255,255,255,.35); border-radius: 10px; cursor: pointer; font-size: 12px; }.image-drop input { display: none; }.scene-image small { margin: 7px 0; opacity: .65; }.countdown-control { display: flex; align-items: center; gap: 9px; }.countdown-control input { width: 90px; font: 800 30px/1 "Arial Narrow", sans-serif; }
@media (max-width:1050px){.roster-grid,.today-grid,.seat-workbench{grid-template-columns:1fr}.student-tray>div{max-height:180px}.scene-card{grid-column:span 3}}
@media (max-width:760px){.mobile-nav{grid-template-columns:repeat(5,1fr)}.tools-heading{align-items:stretch}.class-context{width:100%}.workspace-tabs{grid-template-columns:1fr;gap:8px}.workspace-tabs button{padding:12px}.today-board{grid-template-columns:86px 1fr}.board-date strong{font-size:28px}.seat-toolbar{align-items:stretch;flex-direction:column}.seat-controls{justify-content:flex-start}.scene-grid{grid-template-columns:1fr}.scene-card{grid-column:auto}.roster-actions>*{flex:1}.import-preview{align-items:stretch;flex-direction:column}}

/* v0.6 — identity, timetable and classroom-shaped seating */
[hidden] { display: none !important; }
.identity-chip { min-height: 40px; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 13px; background: #fff; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.identity-chip > span:last-child { color: #5e6c80; font-size: 10px; font-weight: 800; }
.identity-chip .top-avatar { display: grid; }
.current-identity-card { margin: -10px 0 18px; padding: 16px 18px; border: 1px solid #dce7f1; border-radius: 16px; background: #f8fbfd; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px; }
.current-identity-card .member-avatar { width: 46px; height: 46px; }
.current-identity-card > div { display: grid; gap: 3px; }
.current-identity-card small { color: #78879a; font-size: 9px; font-weight: 700; }
.current-identity-card strong { color: var(--navy-950); font-size: 15px; }
.current-identity-card p { margin: 1px 0 0; color: #63738a; font-size: 10px; }
.member-action { min-height: 30px; padding: 0 10px; border: 1px solid #f1cbc3; border-radius: 8px; background: #fff8f6; color: #ba4735; font-size: 9px; font-weight: 800; cursor: pointer; }
.member-action:hover { border-color: #dc7463; }
.account-modal { text-align: left; }
.account-modal > .modal-kicker, .account-modal > h2 { text-align: center; }
.account-identity { margin: 22px 0 4px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #f7f9fb; display: flex; align-items: center; gap: 11px; }
.account-identity > div { display: grid; gap: 4px; }
.account-identity strong { font-size: 12px; }.account-identity small { color: #79869a; font-size: 9px; }
.field-help { margin: 6px 0 0 !important; text-align: left; }
.account-danger-zone { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.account-danger-zone > button { width: 100%; min-height: 43px; border-radius: 11px; font-size: 10px; font-weight: 800; cursor: pointer; }
.danger-button { border: 1px solid #efbdb5; background: #fff5f3; color: #b63e2c; }

.workspace-tabs { grid-template-columns: repeat(4, 1fr); }
.seat-toolbar-actions, .schedule-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.seat-workbench { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.seat-settings-panel { padding: 18px; }
.seat-settings-panel > header { margin-bottom: 17px; }
.seat-settings-panel fieldset { margin: 17px 0 0; padding: 0; border: 0; }
.seat-settings-panel legend { width: 100%; margin-bottom: 9px; color: #495a72; font-size: 11px; font-weight: 800; }
.seat-settings-panel legend small, .seat-number-field small { color: #98a3b2; font-size: 8px; font-weight: 500; }
.seat-number-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #e1e7ed; border-radius: 11px; color: #40516a; font-size: 11px; font-weight: 800; }
.seat-number-field span { display: grid; gap: 3px; }
.seat-number-field input, .seat-number-pair input, .opening-settings input, .opening-settings select { min-width: 0; height: 36px; border: 1px solid #dce4eb; border-radius: 9px; background: #f8fafc; color: var(--navy-900); text-align: center; font-weight: 800; }
.seat-number-field input { width: 70px; font-size: 16px; }
.seat-number-pair, .opening-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.seat-number-pair label, .opening-settings label { display: grid; gap: 5px; color: #708096; font-size: 9px; font-weight: 700; }
.seat-number-pair input, .opening-settings input, .opening-settings select { width: 100%; }
.aisle-options { display: flex; flex-wrap: wrap; gap: 7px; }
.aisle-options label { position: relative; cursor: pointer; }
.aisle-options input, .segmented-control input { position: absolute; opacity: 0; pointer-events: none; }
.aisle-options span { min-height: 31px; padding: 0 10px; border: 1px solid #dfe6ed; border-radius: 8px; background: #f8fafc; color: #627188; display: inline-flex; align-items: center; font-size: 9px; }
.aisle-options input:checked + span { border-color: #7d6bdb; background: #f0edff; color: #5b46be; font-weight: 800; }
.segmented-control { padding: 3px; border-radius: 10px; background: #eef2f6; display: grid; grid-template-columns: 1fr 1fr; }
.segmented-control label { position: relative; cursor: pointer; }
.segmented-control span { min-height: 32px; border-radius: 8px; color: #738096; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.segmented-control input:checked + span { background: #fff; color: #6045c5; box-shadow: 0 2px 8px rgba(28,39,63,.1); }
.seat-settings-panel .student-tray { margin-top: 18px; padding: 14px; border-radius: 13px; background: #152b4c; }
.seat-settings-panel .student-tray > div { max-height: 150px; margin: 12px 0; }
.seat-settings-panel .student-tray p { margin: 0; }
.seat-canvas-card { min-height: 680px; padding: 24px; background: #eef3f6; background-image: none; }
.seat-room { position: relative; min-width: 720px; min-height: 620px; padding: 22px 34px 34px; border: 7px solid #c0a17a; border-radius: 19px; background: #fffcf6; box-shadow: inset 0 0 0 1px rgba(104,75,43,.2), 0 12px 28px rgba(39,49,62,.09); display: flex; flex-direction: column; }
.teacher-desk { flex: none; width: min(340px,55%); margin: -1px auto 34px; padding: 12px; border-radius: 7px 7px 19px 19px; background: #86501f; box-shadow: 0 8px 18px rgba(90,54,25,.15); font-family: var(--body); font-size: 11px; letter-spacing: .1em; }
.seat-room.podium-bottom .teacher-desk { order: 2; margin: 34px auto -1px; border-radius: 19px 19px 7px 7px; }
.seat-board { flex: 1; align-content: center; gap: 11px; min-width: 0; padding: 0 16px; }
.seat-cell { min-height: 64px; border: 1px solid #c7c0ec; border-radius: 9px; background: #efedff; color: #766ea4; }
.seat-cell.occupied { border-color: #b1a8e8; background: #e8e4ff; color: #352d69; box-shadow: 0 5px 12px rgba(82,67,145,.09); }
.seat-cell.locked { border-color: #df739a; background: #fff0f5; }
.seat-cell.inactive { visibility: hidden; pointer-events: none; }
.seat-cell.aisle-after { margin-right: 25px; }
.seat-cell.aisle-after::after { content: "过道"; position: absolute; right: -24px; top: 50%; width: 23px; color: #45a98f; font-size: 8px; font-weight: 800; text-align: center; transform: translateY(-50%) rotate(90deg); }
.room-opening { position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 3px; background: #fff; font-size: 9px; font-weight: 900; }
.room-opening.left, .room-opening.right { width: 10px; height: 62px; writing-mode: vertical-rl; }
.room-opening.top, .room-opening.bottom { width: 66px; height: 10px; }
.room-opening.left { left: -9px; }.room-opening.right { right: -9px; }.room-opening.top { top: -9px; }.room-opening.bottom { bottom: -9px; }
.room-opening.left.start, .room-opening.right.start { top: 18%; }.room-opening.left.middle, .room-opening.right.middle { top: 46%; }.room-opening.left.end, .room-opening.right.end { top: 73%; }
.room-opening.top.start, .room-opening.bottom.start { left: 18%; }.room-opening.top.middle, .room-opening.bottom.middle { left: 46%; }.room-opening.top.end, .room-opening.bottom.end { left: 73%; }
.room-opening.door { border: 1px solid #8e582d; color: #76431c; }.room-opening.window { border: 1px solid #3e9dc1; color: #14769d; background: #def5ff; }

.schedule-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.schedule-toolbar > div:first-child > span, .schedule-toolbar > div:first-child > h3 { display: inline-flex; margin-right: 9px; vertical-align: middle; }
.schedule-toolbar p { margin: 9px 0 0; color: #718097; }
.schedule-import-status { margin: 14px 0; padding: 12px 14px; border: 1px solid #bfe4d8; border-radius: 12px; background: #f0faf7; color: #19745c; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; font-weight: 700; }
.schedule-import-status[data-kind="notice"] { border-color: #d7dfea; background: #f5f7fa; color: #56677f; }.schedule-import-status[data-kind="error"] { border-color: #f0c8c0; background: #fff5f3; color: #a94232; }
.schedule-import-status button { border: 0; background: transparent; color: inherit; cursor: pointer; }
.schedule-editor-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 16px; margin-top: 16px; align-items: start; }
.schedule-editor-layout:has(.schedule-image-assist[hidden]) { grid-template-columns: 1fr; }
.schedule-card { min-width: 0; padding: 15px; border: 1px solid #dfe6ed; border-radius: 18px; background: #fff; box-shadow: 0 10px 32px rgba(30,55,87,.05); }
.schedule-scroll { overflow: auto; }
.schedule-grid { min-width: 800px; display: grid; grid-template-columns: 150px repeat(5,minmax(118px,1fr)); gap: 7px; }
.schedule-heading { min-height: 50px; border-radius: 11px; background: #eaf1f5; color: #172944; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.schedule-day-heading { position: relative; }
.schedule-day-heading > button { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border: 0; border-radius: 6px; color: #8b98a8; background: rgba(255,255,255,.62); cursor: pointer; }
.schedule-day-heading > button:hover { color: #b8402f; background: #fff0ed; }
.schedule-slot, .schedule-course-cell { min-height: 76px; border: 1px solid #dce5eb; border-radius: 11px; background: #fbfcfd; }
.schedule-slot { position: relative; padding: 8px 24px 7px 8px; display: grid; align-content: center; gap: 4px; }
.schedule-slot > input { width: 100%; border: 0; background: transparent; color: #16263d; text-align: center; font-size: 12px; font-weight: 900; outline: 0; }
.schedule-slot > div { display: flex; align-items: center; justify-content: center; gap: 2px; }
.schedule-slot > div input { width: 47px; padding: 0; border: 0; background: transparent; color: #64748a; font-size: 9px; }
.schedule-slot > div input::-webkit-calendar-picker-indicator { display: none; }
.schedule-slot > div input { appearance: none; }
.schedule-slot > div span { color: #94a0af; font-size: 8px; }
.schedule-slot > button { position: absolute; right: 5px; top: 5px; width: 21px; height: 21px; border: 0; border-radius: 6px; background: transparent; color: #a4afbc; cursor: pointer; }
.schedule-slot > button:hover { background: #fff0ed; color: #c14a37; }
.schedule-course-cell { position: relative; display: grid; place-items: center; transition: .16s ease; }
.schedule-course-cell:focus-within { border-color: #6f8fa8; box-shadow: 0 0 0 3px rgba(74,112,142,.1); }
.schedule-course-cell.filled { border-color: #badfd7; background: #f3fbf9; }
.schedule-course-cell input { width: 100%; height: 100%; min-height: 72px; padding: 8px; border: 0; outline: 0; background: transparent; color: #126255; text-align: center; font-size: 13px; font-weight: 800; }
.schedule-course-cell input::placeholder { color: #8195a4; font-size: 27px; font-weight: 300; }
.schedule-hint { margin: 11px 3px 0; color: #8491a3; font-size: 9px; }
.schedule-image-assist { overflow: hidden; border: 1px solid #dfe6ed; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(30,55,87,.06); }
.schedule-image-assist header { padding: 13px; border-bottom: 1px solid #e6ebf0; display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.schedule-image-assist header > div { display: grid; gap: 4px; }.schedule-image-assist strong { font-size: 11px; }.schedule-image-assist small { color: #8491a2; font-size: 8px; line-height: 1.5; }
.schedule-image-assist button { border: 0; background: transparent; color: #8c98a8; cursor: pointer; }.schedule-image-assist img { display: block; width: 100%; max-height: 560px; object-fit: contain; background: #f3f5f7; }

/* Projection controls: quiet white instruments, with color reserved for actions. */
.scene-grid { grid-template-columns: repeat(12,1fr); }
.scene-card { min-height: 245px; border: 1px solid #dce4eb; border-radius: 16px; background: #fff !important; color: var(--navy-950); box-shadow: 0 10px 28px rgba(22,42,68,.055); }
.scene-card::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 0 4px 4px 0; background: #5d77d8; }
.scene-card > span { color: #728197; opacity: 1; }.scene-card p { color: #738197; opacity: 1; }
.scene-card textarea, .scene-card input { border-color: #dce4eb; background: #f7f9fb; color: #152944; }
.scene-card textarea::placeholder { color: #97a3b2; }
.scene-card > button { background: #172b4a; color: #fff; }
.scene-card > .secondary-scene-button { border: 1px solid #d8e0e8; background: #f4f7f9; color: #253b59; }
.scene-text, .scene-image, .scene-countdown, .scene-random, .scene-seat, .scene-schedule { grid-column: span 4; }
.scene-image::before { background: #3ba88a; }.scene-countdown::before { background: #df8050; }.scene-random::before { background: #be6eaa; }.scene-seat::before { background: #6958c8; }.scene-schedule::before { background: #2f79a8; }
.image-drop { border-color: #cad4de; color: #64758b; background: #f8fafb; }.scene-image small { color: #8090a5; }

@media (max-width: 1050px) {
  .workspace-tabs { grid-template-columns: repeat(2, 1fr); }
  .seat-workbench, .schedule-editor-layout { grid-template-columns: 1fr; }
  .seat-settings-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .seat-settings-panel > header, .seat-settings-panel .student-tray { grid-column: 1 / -1; }
  .scene-card { grid-column: span 6; }
}
@media (max-width: 760px) {
  .identity-chip { padding-right: 7px; }.identity-chip > span:last-child { display: none; }
  .current-identity-card { grid-template-columns: 42px 1fr; padding: 14px; }.current-identity-card > button { grid-column: 1 / -1; width: 100%; }
  .member-row .member-action { grid-column: 3; grid-row: 1; }
  .account-danger-zone { grid-template-columns: 1fr; }
  .workspace-tabs { grid-template-columns: 1fr 1fr; }
  .seat-toolbar, .schedule-toolbar { align-items: stretch; flex-direction: column; }
  .seat-toolbar-actions, .schedule-actions { display: grid; grid-template-columns: 1fr 1fr; }.schedule-actions .primary-button { grid-column: 1 / -1; }
  .seat-workbench { margin-top: 12px; }.seat-settings-panel { display: block; }
  .seat-canvas-card { min-height: 500px; padding: 12px; }.seat-room { min-width: 650px; min-height: 520px; }
  .schedule-card { padding: 8px; }.schedule-editor-layout { margin-top: 12px; }.schedule-grid { min-width: 720px; }
  .scene-grid { grid-template-columns: 1fr; }.scene-card { grid-column: auto; }
}

/* v0.8.2 — the classroom installer reads as one connection path, not a stack of equal cards. */
.install-modal { width: min(620px, 100%); padding: 32px 34px 27px; text-align: left; }
.install-modal > p:not(.modal-footnote) { max-width: 440px; }
.install-route { position: relative; margin: 23px 0 20px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); }
.install-route::before { content: ""; position: absolute; left: 17px; right: 17px; top: 17px; height: 1px; background: #d9e1e9; }
.install-route li { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; }
.install-route li:not(:first-child) { padding-left: 12px; background: linear-gradient(90deg, transparent 0, #fff 12px); }
.install-route li > span { z-index: 1; width: 34px; height: 34px; border: 1px solid #d6e0ea; border-radius: 50%; color: #53647c; background: #fff; display: grid; place-items: center; font: 800 10px/1 var(--utility); }
.install-route li:nth-child(2) > span { border-color: #ffc09f; color: #fff; background: var(--orange); box-shadow: 0 5px 13px rgba(255,104,28,.22); }
.install-route li div { min-width: 0; display: grid; gap: 3px; }
.install-route strong { font-size: 10px; }
.install-route small { color: #8995a4; font-size: 8px; white-space: nowrap; }
.binding-workbench { padding: 19px; border: 1px solid #dce4ec; border-radius: 16px; background: #f7f9fb; box-shadow: inset 0 1px 0 #fff; }
.binding-workbench-heading { display: flex; align-items: flex-start; gap: 11px; }
.binding-workbench-heading > span { flex: none; margin-top: 1px; padding: 6px 8px; border-radius: 7px; color: #b84816; background: var(--orange-soft); font-size: 8px; font-weight: 900; }
.binding-workbench-heading h3 { margin: 0; color: var(--navy-950); font-size: 14px; letter-spacing: -.02em; }
.binding-workbench-heading p { margin: 5px 0 0; color: #7d899a; font-size: 8px; }
.binding-action-row { margin-top: 15px; display: grid; grid-template-columns: minmax(0,1fr) 160px; align-items: end; gap: 9px; }
.binding-action-row .form-label { margin: 0; gap: 6px; }
.binding-action-row .form-label > span { color: #5a687e; font-size: 9px; }
.binding-action-row .primary-button { min-height: 44px; margin: 0 !important; box-shadow: 0 7px 16px rgba(255,104,28,.18); }
.pairing-code-label input { color: var(--navy-950); background: #fff; font: 900 20px/1 var(--utility); letter-spacing: .26em; text-align: center; }
.protection-choice { position: relative; z-index: 1; margin-top: 13px; min-height: 52px; padding: 10px 12px; border: 1px solid #dce4eb; border-radius: 11px; background: #f8fafc; display: flex !important; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.protection-choice > span { display: grid; gap: 3px; }.protection-choice b { color: #3e506b; font-size: 10px; }.protection-choice small { color: #8a97a8 !important; font-size: 8px; font-weight: 500 !important; }
.protection-choice input { position: relative; flex: none; width: 38px !important; height: 22px !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important; background: #c9d2dc !important; appearance: none; cursor: pointer; transition: .2s ease; }
.protection-choice input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(10,25,49,.2); transition: .2s ease; }
.protection-choice input:checked { background: var(--mint) !important; }.protection-choice input:checked::after { transform: translateX(16px); }
.protection-choice.compact { margin-top: 12px; background: #fff; }
.protection-fields { position: relative; z-index: 1; margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.protection-fields[hidden] { display: none; }.protection-fields label { color: #4d5d75; display: grid; gap: 7px; font-size: 9px; font-weight: 800; }.protection-fields.compact input { background: #fff; }
.pairing-submit { min-height: 47px; margin-top: 12px; }
.activation-modal { width: min(490px,100%); }.activation-modal #activation-code { color: var(--navy-950); font: 900 16px/1 var(--utility); letter-spacing: .08em; }
.binding-workbench .binding-code { position: relative; margin: 13px 0 0; padding: 17px 15px 15px; border: 1px dashed #e9aa88; border-radius: 12px; background: #fff; overflow: hidden; }
.binding-workbench .binding-code::before, .binding-workbench .binding-code::after { content: ""; position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: #f7f9fb; }
.binding-workbench .binding-code::before { left: -6px; }
.binding-workbench .binding-code::after { right: -6px; }
.binding-workbench .binding-code.pending { border-color: #d7dfe7; background: rgba(255,255,255,.72); }
.binding-workbench .binding-code strong { font-size: 23px; letter-spacing: .3em; }
.install-support { margin-top: 11px; display: grid; gap: 8px; }
.client-source-button { width: 100%; min-height: 60px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; color: #34445d; background: #fff; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; text-align: left; cursor: pointer; }
.client-source-button:hover { border-color: #b9c6d2; background: #fbfcfd; }
.client-download-mark { width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--navy-900); display: grid; place-items: center; font: 900 16px/1 var(--utility); }
.client-source-button > span:nth-child(2) { display: grid; gap: 3px; }
.client-source-button strong { font-size: 10px; }
.client-source-button small { color: #8793a3; font-size: 8px; }
.client-source-button b { padding: 7px 10px; border-radius: 8px; color: #40516a; background: #eef2f6; font-size: 9px; }
.install-support .new-classroom-panel { margin: 0; background: #fff; }
.install-support .new-classroom-panel summary { min-height: 46px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.install-support .new-classroom-panel summary::marker { color: #8995a5; }
.install-support .new-classroom-panel summary span { color: #718095; font-weight: 600; }
.install-support .new-classroom-panel summary b { color: var(--orange); font-size: 9px; }
.install-modal .modal-footnote { text-align: center; }

@media (max-width: 560px) {
  .install-modal { padding: 29px 17px 22px; }
  .install-route { margin: 20px 0 17px; }
  .install-route li { grid-template-columns: 28px 1fr; gap: 6px; }
  .install-route li:not(:first-child) { padding-left: 5px; background: linear-gradient(90deg, transparent 0, #fff 5px); }
  .install-route li > span { width: 28px; height: 28px; }
  .install-route::before { top: 14px; }
  .install-route small { display: none; }
  .install-route strong { font-size: 9px; }
  .binding-workbench { padding: 15px; }
  .binding-action-row { grid-template-columns: 1fr; }
  .protection-fields { grid-template-columns: 1fr; }
  .binding-workbench .binding-code strong { font-size: 19px; letter-spacing: .22em; }
}