:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --sidebar: #f2f3f7;
  --line: #e9eaf0;
  --ink: #252630;
  --muted: #777b8b;
  --accent: #6d6af8;
  --accent-strong: #5c57ed;
  --accent-soft: #efefff;
  --sky: #dff4ff;
  --mint: #e8f8ef;
  --peach: #fff1e6;
  --shadow: 0 14px 45px rgba(64, 68, 93, .10);
  --radius: 22px;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display:none !important; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); overflow: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(109,106,248,.28); outline-offset: 2px; }

.app-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr) 292px; height: 100vh; overflow: hidden; }
.sidebar { background: var(--sidebar); border-right: 1px solid var(--line); padding: 20px 14px 18px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.brand-row { display: flex; gap: 10px; align-items: center; padding: 0 8px; }
.brand-mark { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, #6d6af8, #9393ff); color: white; box-shadow: 0 7px 18px rgba(109,106,248,.28); font-size: 20px; }
.brand-name { font-size: 17px; font-weight: 760; letter-spacing: .04em; }
.brand-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.new-btn { width: 100%; border: 0; background: #fff; border-radius: 14px; padding: 12px 14px; text-align: left; font-weight: 650; cursor: pointer; box-shadow: 0 3px 14px rgba(64,68,93,.05); }
.new-btn span { color: var(--accent); font-size: 19px; margin-right: 8px; }
.side-section { min-height: 0; flex: 1; overflow: hidden; }
.side-title { padding: 0 10px 8px; font-size: 12px; color: #9a9dac; font-weight: 650; }
.article-list { display: flex; flex-direction: column; gap: 5px; max-height: 100%; overflow-y: auto; }
.article-item { border: 0; background: transparent; border-radius: 12px; width: 100%; padding: 10px 10px; display: flex; gap: 9px; align-items: flex-start; cursor: pointer; text-align: left; }
.article-item:hover { background: rgba(255,255,255,.7); }
.article-item.active { background: #fff; box-shadow: 0 3px 13px rgba(57,61,88,.05); }
.article-glyph { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.article-copy { min-width: 0; }
.article-name { display: block; font-size: 13px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-tag { display: block; color: #a0a3b0; font-size: 10px; margin-top: 3px; }
.upload-btn { border: 1px dashed #d8d9e4; border-radius: 14px; background: rgba(255,255,255,.55); display: flex; gap: 10px; align-items: center; padding: 11px 12px; cursor: pointer; text-align: left; }
.upload-btn:hover { border-color: #b7b7ef; background: white; }
.upload-btn strong { display:block; font-size: 12px; }
.upload-btn small { display:block; font-size: 10px; color: #999dac; margin-top: 2px; }
.upload-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--mint); color: #3c9f70; font-weight: bold; }
.side-note { font-size: 10px; line-height: 1.45; color: #858999; display: flex; gap: 8px; padding: 0 8px; }
.side-note small { color:#adb0bb; }
.shield { color:#64a987; }
.admin-dashboard-btn { min-height:58px; border:1px solid #d9d8f0; border-radius:14px; background:#edecff; color:#4f4bb6; display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; text-align:left; }
.admin-dashboard-btn:hover { border-color:#bcbaf0; background:#e5e3ff; }
.admin-dashboard-btn > span:first-child { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#fff; font-size:17px; }
.admin-dashboard-btn strong,.admin-dashboard-btn small { display:block; }
.admin-dashboard-btn strong { font-size:12px; }
.admin-dashboard-btn small { margin-top:2px; color:#7773bd; font-size:9px; }

.records-sidebar { min-width:0; height:100vh; border-left:1px solid var(--line); background:#fafafd; padding:20px 16px 16px; display:flex; flex-direction:column; overflow:hidden; }
.records-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:0 4px 14px; }
.records-head-actions { display:flex; align-items:center; gap:7px; }
.records-eyebrow { color:var(--accent); font-size:9px; line-height:1; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.records-head h2 { margin:6px 0 0; font-size:17px; line-height:1.25; }
.records-export-btn { min-height:44px; border:1px solid #d8d7ec; border-radius:12px; background:#f3f2ff; color:#5d59c7; padding:8px 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; font-size:10px; font-weight:750; white-space:nowrap; transition:border-color .2s, background .2s, color .2s, transform .2s; }
.records-export-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.records-export-btn:hover:not(:disabled) { border-color:#b9b7ef; background:#e9e7ff; color:#4e49bd; transform:translateY(-1px); }
.records-export-btn:disabled { opacity:.45; cursor:default; }
.records-export-btn:focus-visible { outline:3px solid rgba(109,106,248,.28); outline-offset:2px; }
.records-close { display:none; width:40px; height:40px; border:0; border-radius:12px; background:#f0f0f5; color:#777b89; cursor:pointer; font-size:21px; }
.records-context { border:1px solid #e8e8f0; border-radius:14px; background:white; padding:11px 12px; margin-bottom:12px; }
.records-context span { display:block; color:#9a9dac; font-size:9px; margin-bottom:4px; }
.records-context strong { display:block; font-size:11px; line-height:1.45; max-height:34px; overflow:hidden; }
.records-summary { color:#898c9a; font-size:10px; font-weight:650; padding:0 4px 8px; }
.records-list { min-height:0; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:0 3px 10px 0; }
.record-item { width:100%; min-height:82px; border:1px solid #e9e9f0; border-radius:15px; background:white; padding:8px; display:flex; align-items:stretch; gap:5px; text-align:left; transition:border-color .2s, box-shadow .2s, background .2s; }
.record-item:hover { border-color:#cfcef2; box-shadow:0 7px 22px rgba(63,66,91,.07); }
.record-item.active { border-color:#bbb9f4; background:#f8f7ff; box-shadow:0 6px 20px rgba(88,84,195,.09); }
.record-open { min-width:0; flex:1; border:0; border-radius:10px; background:transparent; padding:3px; display:flex; align-items:flex-start; gap:10px; text-align:left; cursor:pointer; }
.record-open:hover { background:rgba(109,106,248,.045); }
.record-avatar { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(145deg,#ecebff,#ddeeff); color:#5b58bf; font-size:13px; font-weight:800; }
.record-content { display:block; min-width:0; flex:1; }
.record-top { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.record-top strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.record-status { flex:0 0 auto; border-radius:999px; padding:3px 6px; font-size:8px; font-weight:750; }
.record-status.complete { color:#287954; background:#e8f7ef; }
.record-status.ongoing { color:#6d61b8; background:#efedff; }
.record-meta,.record-action { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.record-meta { color:#9a9dab; font-size:9px; margin-top:5px; }
.record-action { color:#6864cf; font-size:9px; font-weight:650; margin-top:5px; }
.records-empty { min-height:190px; border:1px dashed #dcdde7; border-radius:16px; background:rgba(255,255,255,.7); padding:24px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.records-empty strong { font-size:12px; }
.records-empty span { color:#9295a3; font-size:10px; line-height:1.6; margin:7px 0 13px; }
.records-empty-btn { min-height:40px; border:0; border-radius:11px; padding:8px 12px; background:var(--accent); color:white; cursor:pointer; font-size:10px; font-weight:700; }
.records-footnote { flex:0 0 auto; border-top:1px solid #ececf2; padding:11px 4px 0; color:#a1a4b0; font-size:9px; line-height:1.55; }

.main-panel { background: var(--panel); min-width: 0; height: 100vh; overflow: hidden; position: relative; display: grid; grid-template-rows: 58px minmax(0,1fr) auto; }
.topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; padding: 0 24px; border-bottom: 1px solid #f1f1f4; background: rgba(255,255,255,.92); z-index: 10; }
.article-heading { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; }
.article-heading span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #69c895; box-shadow: 0 0 0 4px #effaf4; }
.progress-wrap { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #8b8e9b; }
.progress-track { width: 96px; height: 5px; border-radius: 999px; background: #eeeef4; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #8180fa, #6763ef); transition: width .4s ease; }
.icon-btn { display:none; border:0; background:transparent; cursor:pointer; }
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:0; }
.student-badge { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:6px 10px; border-radius:999px; background:#f3f2ff; color:#5552aa; font-size:10px; font-weight:700; }
.records-toggle { display:none; min-height:36px; border:1px solid #dedeea; background:white; border-radius:11px; padding:7px 10px; font-size:11px; font-weight:650; cursor:pointer; }
.user-menu-btn { min-height:40px; max-width:190px; border:1px solid #e4e4ec; border-radius:12px; background:#fff; padding:5px 8px 5px 10px; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; text-align:left; cursor:pointer; }
.user-menu-btn span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:750; }
.user-menu-btn small { grid-row:2; color:#9194a1; font-size:8px; }
.user-menu-btn b { grid-column:2; grid-row:1 / span 2; align-self:center; color:#6d6af8; font-size:9px; }

.auth-screen { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(420px,.8fr); background:#f6f7fb; }
.auth-intro { position:relative; min-height:100vh; overflow:hidden; padding:48px clamp(42px,7vw,108px); display:flex; flex-direction:column; justify-content:space-between; color:#fff; background:linear-gradient(145deg,#322f78 0%,#5854c7 54%,#7774ed 100%); }
.auth-intro::before,.auth-intro::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.14); }
.auth-intro::before { width:520px; height:520px; right:-170px; top:-170px; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.02); }
.auth-intro::after { width:260px; height:260px; left:-120px; bottom:80px; background:rgba(146,220,255,.08); }
.auth-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; font-size:22px; font-weight:800; letter-spacing:.08em; }
.auth-brand span { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.17); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.auth-copy { position:relative; z-index:1; max-width:660px; }
.auth-copy .eyebrow { color:#c8e8ff; font-size:12px; }
.auth-copy h1 { margin:16px 0 20px; font-size:clamp(38px,5vw,66px); line-height:1.16; letter-spacing:-.04em; }
.auth-copy p { max-width:570px; margin:0; color:rgba(255,255,255,.77); font-size:16px; line-height:1.9; }
.auth-features { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:9px; }
.auth-features span { border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.08); padding:8px 13px; font-size:11px; }
.auth-panel { padding:40px; display:grid; place-items:center; }
.auth-card { width:min(430px,100%); border:1px solid #e7e7ef; border-radius:26px; background:#fff; box-shadow:0 24px 70px rgba(48,50,78,.12); padding:28px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; border-radius:13px; background:#f2f2f7; padding:4px; }
.auth-tabs button { min-height:42px; border:0; border-radius:10px; background:transparent; color:#777a88; cursor:pointer; font-size:12px; font-weight:700; }
.auth-tabs button.active { background:#fff; color:#4f4bb6; box-shadow:0 3px 12px rgba(55,58,84,.08); }
.auth-form { margin-top:26px; }
.auth-form h2 { margin:0; font-size:26px; }
.auth-form > div > p { margin:7px 0 22px; color:#7c7f8d; font-size:12px; }
.auth-form label { display:block; margin-top:14px; color:#444651; font-size:11px; font-weight:700; }
.auth-form input { width:100%; min-height:48px; margin-top:7px; border:1px solid #dddde7; border-radius:12px; padding:0 13px; outline:0; font-size:14px; }
.auth-form input:focus { border-color:#aaa7ef; box-shadow:0 0 0 4px rgba(109,106,248,.1); }
.auth-submit { width:100%; min-height:48px; margin-top:22px; border:0; border-radius:13px; background:#6460e8; color:#fff; cursor:pointer; font-weight:750; box-shadow:0 9px 24px rgba(80,75,195,.2); }
.auth-submit:hover { background:#554fd8; }
.auth-submit:disabled { opacity:.6; cursor:wait; }
.auth-status { min-height:20px; margin-top:11px; color:#747787; text-align:center; font-size:10px; }
.auth-status.error { color:#b64e49; }

.admin-dialog { width:min(1180px,calc(100% - 32px)); height:min(860px,calc(100vh - 32px)); border:0; border-radius:24px; padding:0; background:#f7f7fb; box-shadow:0 30px 100px rgba(29,31,51,.3); overflow:hidden; }
.admin-dialog::backdrop { background:rgba(30,31,45,.45); backdrop-filter:blur(4px); }
.admin-shell { height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr); }
.admin-head { position:relative; padding:24px 30px 18px; border-bottom:1px solid #e9e9f0; background:#fff; }
.admin-head h2 { margin:6px 0 3px; font-size:25px; }
.admin-head p { margin:0; color:#8a8d9a; font-size:11px; }
.admin-tabs { display:flex; gap:6px; padding:10px 30px; border-bottom:1px solid #e9e9f0; background:#fff; }
.admin-tabs button { min-height:40px; border:0; border-radius:10px; background:transparent; color:#747786; padding:8px 16px; cursor:pointer; font-size:12px; font-weight:700; }
.admin-tabs button.active { background:#eeedff; color:#5752c8; }
.admin-content { min-height:0; overflow-y:auto; padding:24px 30px 32px; }
.admin-panel { max-width:1080px; margin:0 auto; }
.summary-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.summary-card { min-height:120px; border:1px solid #e7e7ef; border-radius:18px; background:#fff; padding:18px; display:flex; flex-direction:column; }
.summary-card span { color:#777a89; font-size:11px; }
.summary-card strong { margin:7px 0 3px; color:#3e3a9f; font-size:32px; }
.summary-card small { color:#a1a4af; font-size:9px; }
.admin-section-head { margin:26px 0 14px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.admin-section-head h3 { margin:0 0 5px; font-size:17px; }
.admin-section-head p { margin:0; color:#898c99; font-size:10px; }
.chart-legend { display:flex; gap:10px; color:#7c7f8d; font-size:9px; }
.chart-legend span::before { content:""; display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:2px; background:#7470eb; }
.chart-legend .max::before { background:#4fb68a; }.chart-legend .min::before { background:#e9a65c; }
.analytics-list { border:1px solid #e6e6ee; border-radius:18px; background:#fff; overflow:hidden; }
.analytics-row { min-height:94px; padding:14px 18px; display:grid; grid-template-columns:190px minmax(0,1fr); gap:22px; align-items:center; border-bottom:1px solid #eeeef3; }
.analytics-row:last-child { border-bottom:0; }
.analytics-title { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; }
.analytics-title > span { grid-row:1 / span 2; color:#aaa8d9; font-size:11px; font-weight:800; }
.analytics-title strong { font-size:12px; }.analytics-title small { margin-top:4px; color:#a0a3af; font-size:8px; }
.metric-chart { display:grid; gap:6px; }
.metric { display:grid; grid-template-columns:30px minmax(80px,1fr) 34px; align-items:center; gap:8px; font-size:9px; }
.metric > span { color:#8d909e; }.metric > strong { font-size:10px; text-align:right; }
.metric i { height:6px; border-radius:99px; background:#efeff3; overflow:hidden; }
.metric b { display:block; height:100%; border-radius:inherit; background:#7470eb; }
.metric.max b { background:#4fb68a; }.metric.min b { background:#e9a65c; }
.group-standards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.group-standard { border:1px solid #e5e5ed; border-radius:14px; background:#fff; padding:13px; display:grid; grid-template-columns:auto 1fr; gap:3px 8px; }
.group-standard span { grid-row:1 / span 2; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#efefff; color:#5e59cc; font-size:9px; font-weight:800; }
.group-standard strong { font-size:10px; }.group-standard small { color:#999ca8; font-size:8px; }
.standard-grid { margin-top:12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.standard-card { border:1px solid #e5e5ed; border-radius:15px; background:#fff; padding:14px; }
.standard-card h4 { margin:0 0 9px; font-size:12px; }.standard-card p { margin:4px 0; color:#626572; font-size:9px; }.standard-card small { display:block; margin-top:9px; color:#999ca9; font-size:8px; line-height:1.5; }
.people-table-wrap { border:1px solid #e4e4ec; border-radius:16px; background:#fff; overflow:auto; }
.people-table { width:100%; border-collapse:collapse; min-width:680px; }
.people-table th,.people-table td { padding:12px 14px; border-bottom:1px solid #eeeef3; text-align:left; font-size:10px; }
.people-table th { position:sticky; top:0; background:#f7f7fb; color:#7a7d8a; font-weight:750; }
.people-table tr:last-child td { border-bottom:0; }
.table-action { min-height:34px; border:1px solid #d8d7ec; border-radius:9px; background:#f3f2ff; color:#5753bf; padding:5px 10px; cursor:pointer; font-size:9px; font-weight:700; }
.admin-loading { padding:42px; color:#848795; text-align:center; font-size:11px; }.admin-loading.error { color:#b64e49; }

.chat-scroll { height:100%; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scroll-behavior:smooth; }
.chat-scroll::-webkit-scrollbar,.records-list::-webkit-scrollbar { width:8px; }
.chat-scroll::-webkit-scrollbar-thumb,.records-list::-webkit-scrollbar-thumb { background:#d9dae5; border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
.chat-column { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding-top: 36px; padding-bottom:16px; }
.welcome-card { display: grid; grid-template-columns: 98px 1fr; gap: 25px; align-items: center; padding: 22px 26px 28px; margin-bottom: 22px; background: linear-gradient(135deg, #fbfbff 0%, #f7fbff 55%, #fbfffb 100%); border: 1px solid #eeeeF6; border-radius: 26px; overflow: hidden; position: relative; }
.welcome-card::after { content:""; width: 140px; height: 140px; border-radius: 50%; background:#f2efff; position:absolute; right:-45px; top:-64px; opacity:.7; }
.planet { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 7%, #b8b7ff 8% 20%, #7f7af6 52%, #5f59dd 100%); box-shadow: inset -12px -9px 25px rgba(61,54,159,.18), 0 12px 30px rgba(89,83,220,.18); display:grid; place-items:center; color:#fff; font-size:24px; transform:rotate(-9deg); }
.planet::after { content:""; position:absolute; width:112px; height:28px; border:3px solid #d2d2ff; border-radius:50%; transform:rotate(-17deg); }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.18; margin: 7px 0 10px; letter-spacing: -.02em; }
.welcome-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.messages { display: flex; flex-direction: column; gap: 20px; }
.message-row { display:flex; width:100%; }
.assistant-row { align-items:flex-start; gap:10px; }
.avatar { flex:0 0 32px; width:32px; height:32px; border-radius:11px; display:grid; place-items:center; background:var(--accent); color:white; box-shadow:0 5px 16px rgba(109,106,248,.2); font-size:14px; }
.message-content { max-width: min(680px, calc(100% - 44px)); }
.speaker { font-size:10px; color:#9a9dac; margin:0 0 5px 4px; }
.bubble { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.75; }
.assistant-bubble { background:#f7f7fa; border-radius: 7px 18px 18px 18px; padding: 12px 15px; border:1px solid #f0f0f4; }
.user-row { justify-content:flex-end; }
.user-bubble { max-width:min(620px, 82%); background: var(--accent-soft); color:#35334f; border-radius:18px 7px 18px 18px; padding:11px 15px; }
.question-badge { display:inline-flex; align-items:center; gap:6px; color:var(--accent); background:#f0efff; border-radius:999px; padding:3px 8px; font-size:10px; font-weight:700; margin-bottom:6px; }
.feedback-note { display:inline-flex; align-items:center; gap:5px; width:max-content; color:#257252; background:#eaf8f1; border:1px solid #cfeede; padding:3px 8px; border-radius:999px; font-size:9px; font-weight:700; margin-bottom:7px; }
.scaffold-note { display:block; color:#9a7b38; background:#fff9e8; border:1px solid #f8eac0; padding:3px 8px; width:max-content; border-radius:999px; font-size:9px; margin-bottom:7px; }
.article-card { margin-top:10px; border:1px solid #ececf2; border-radius:20px; background:#fff; overflow:hidden; box-shadow:0 7px 24px rgba(76,80,105,.06); }
.article-card-head { padding:15px 18px 12px; background:linear-gradient(90deg,#f4f3ff,#f6fbff); border-bottom:1px solid #eeeeF4; }
.article-card-head span { display:block; font-size:10px; color:#888c9b; }
.article-card-head strong { display:block; margin-top:3px; font-size:16px; }
.article-body { padding:17px 20px 18px; max-height:420px; overflow:auto; }
.article-body p { margin:0 0 13px; font-family:"Songti SC","STSong",serif; font-size:15px; line-height:1.95; color:#30313a; }
.article-body p:last-child { margin-bottom:0; }
.para-no { display:inline-block; min-width:24px; color:#8a87d8; font-family:var(--font, sans-serif); font-size:11px; }
.typing { display:inline-flex; align-items:center; gap:4px; padding:13px 16px; background:#f7f7fa; border-radius:7px 18px 18px 18px; }
.typing i { width:5px; height:5px; background:#aaaeba; border-radius:50%; animation:bounce 1.1s infinite; }
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

.composer-zone { width:min(820px,calc(100% - 40px)); margin:0 auto; padding: 10px 0 18px; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 24%); z-index:9; }
.quick-actions { display:flex; gap:7px; margin:0 0 8px 4px; min-height:0; }
.quick-chip { border:1px solid #e6e6ef; background:white; color:#666a79; border-radius:999px; font-size:11px; padding:6px 10px; cursor:pointer; box-shadow:0 3px 10px rgba(65,68,91,.04); }
.quick-chip:hover { border-color:#cfcff2; color:var(--accent); }
.composer { min-height:58px; border:1px solid #e4e4eb; border-radius:20px; box-shadow:0 8px 28px rgba(58,61,83,.10); display:flex; align-items:flex-end; gap:10px; padding:10px 10px 10px 16px; background:#fff; }
.composer:focus-within { border-color:#c8c6fa; box-shadow:0 9px 30px rgba(79,75,180,.12); }
.composer textarea { flex:1; border:0; outline:0; resize:none; min-height:36px; max-height:120px; padding:8px 0 4px; line-height:1.5; font-size:14px; color:var(--ink); background:transparent; }
.composer textarea::placeholder { color:#b0b2bd; }
.composer-input-modes { display:flex; align-items:center; gap:9px; min-width:0; }
.composer-input-modes > span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.photo-answer-btn,.voice-answer-btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #d8d6f4; border-radius:10px; background:#f8f7ff; color:#5b57ce; padding:7px 10px; font:inherit; font-weight:700; cursor:pointer; }
.photo-answer-btn:hover,.voice-answer-btn:hover { border-color:#aaa6ec; background:#f1f0ff; }
.photo-answer-btn:focus-visible,.voice-answer-btn:focus-visible { outline:3px solid rgba(99,94,224,.2); outline-offset:2px; }
.photo-answer-btn:disabled,.voice-answer-btn:disabled { opacity:.5; cursor:default; }
.voice-answer-btn.is-recording { border-color:#e05d6f; background:#fff1f3; color:#b52f45; }
.voice-answer-btn.is-recording i { animation:voice-pulse 1.15s ease-in-out infinite; }
.voice-answer-btn.is-recognizing { cursor:wait; }
.voice-answer-status { display:flex; align-items:flex-start; gap:7px; min-height:24px; margin-top:7px; border-radius:9px; background:#f4f3ff; color:#5f5bba; padding:6px 9px; font-size:10px; line-height:1.5; }
.voice-answer-status[hidden] { display:none; }
.voice-answer-status::before { content:'\F49E'; flex:0 0 auto; font-family:'bootstrap-icons'; font-size:12px; }
.voice-answer-status.recording { background:#fff1f3; color:#a93045; }
.voice-answer-status.warning { background:#fff8e9; color:#8a642b; }
.voice-answer-status.success { background:#eef9f3; color:#357759; }
@keyframes voice-pulse { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.18); opacity:.62; } }
.send-btn { flex:0 0 38px; width:38px; height:38px; border:0; border-radius:13px; background:var(--accent); color:white; cursor:pointer; font-size:18px; transition:transform .15s, background .15s; }
.send-btn:hover { background:var(--accent-strong); transform:translateY(-1px); }
.send-btn:disabled { background:#cccdda; cursor:default; transform:none; }
.composer-tip { text-align:center; color:#b2b4bd; font-size:9px; margin-top:6px; }
.bottom-spacer { height: 24px; }

.report-card { margin:26px 0 8px 42px; background:#fff; border:1px solid #e8e8ef; border-radius:24px; box-shadow:var(--shadow); overflow:hidden; }
.report-hero { padding:24px 26px; background:linear-gradient(135deg,#f0efff,#f5fbff 54%,#f2fbf5); position:relative; }
.report-kicker { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.12em; }
.report-hero h2 { margin:6px 0 8px; font-size:24px; }
.report-hero p { margin:0; color:#6f7382; font-size:13px; line-height:1.7; max-width:650px; }
.report-body { padding:22px 26px 26px; }
.report-section { margin-top:24px; }
.report-section:first-child { margin-top:0; }
.report-section h3 { font-size:14px; margin:0 0 12px; }
.indicator-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.indicator-card { border:1px solid #eeeeF3; border-radius:14px; padding:12px 13px; background:#fcfcfd; }
.indicator-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.indicator-name { font-size:12px; font-weight:650; }
.indicator-score { font-size:16px; font-weight:800; color:#4f4bd4; }
.indicator-score.na { color:#a7a9b3; font-size:12px; font-weight:600; }
.indicator-bar { height:5px; border-radius:999px; background:#ececf2; margin:9px 0 7px; overflow:hidden; }
.indicator-fill { height:100%; border-radius:inherit; background:linear-gradient(90deg,#8a88fb,#6b67ef); }
.indicator-meta { display:flex; justify-content:space-between; gap:10px; color:#9b9eaa; font-size:9px; }
.review { color:#b47d27; }
.report-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.note-box { border-radius:16px; padding:14px 15px; min-height:100%; }
.note-box.good { background:#eef9f3; }
.note-box.next { background:#fff7ea; }
.note-box h4 { margin:0 0 8px; font-size:12px; }
.note-box ul, .recommend-list { margin:0; padding-left:18px; }
.note-box li, .recommend-list li { margin:6px 0; color:#5f6370; font-size:12px; line-height:1.6; }
.encourage { margin-top:18px; border-radius:16px; padding:15px 16px; background:#f2f1ff; color:#514f78; font-size:13px; line-height:1.7; }
.report-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:18px; margin-top:18px; border-top:1px solid #eeeeF2; color:#9a9daa; font-size:9px; }
.report-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.print-btn { border:1px solid #dedee8; background:white; border-radius:10px; padding:7px 10px; font-size:10px; cursor:pointer; }
.save-pdf-btn { border:0; background:var(--accent); color:white; border-radius:10px; padding:8px 12px; font-size:10px; font-weight:700; cursor:pointer; }
.print-btn:disabled,.save-pdf-btn:disabled { cursor:wait; opacity:.6; }

.upload-dialog { border:0; padding:0; background:transparent; width:min(520px,calc(100% - 30px)); overflow:visible; }
.upload-dialog::backdrop { background:rgba(32,34,48,.35); backdrop-filter:blur(3px); }
.dialog-card { position:relative; border-radius:24px; background:white; box-shadow:0 24px 80px rgba(37,39,60,.25); padding:26px; }
.close-btn { position:absolute; right:15px; top:13px; width:30px; height:30px; border:0; border-radius:50%; background:#f3f3f6; cursor:pointer; color:#858895; font-size:20px; }
.dialog-icon { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#eef8f3; color:#3e9d73; font-size:22px; }
.dialog-card h2 { margin:13px 0 6px; font-size:22px; }
.dialog-card > p { margin:0 0 20px; color:#7c7f8d; font-size:12px; line-height:1.65; }
.field-label { display:flex; justify-content:space-between; font-size:11px; font-weight:650; margin-bottom:7px; }
.field-label span { color:#aaaeba; font-weight:400; }
.text-field { width:100%; border:1px solid #e2e3e9; border-radius:12px; padding:10px 12px; outline:0; margin-bottom:12px; }
.text-field:focus { border-color:#bdbbf5; }
.file-drop { border:1.5px dashed #d6d7e0; min-height:130px; border-radius:17px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; padding:18px; text-align:center; }
.file-drop:hover { border-color:#aaa9ed; background:#fbfbff; }
.file-drop input { display:none; }
.file-drop-icon { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#f0efff; color:var(--accent); font-size:20px; margin-bottom:8px; }
.file-drop strong { font-size:12px; }
.file-drop small { color:#a0a3ae; font-size:10px; margin-top:4px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.ghost-btn,.primary-btn { border-radius:11px; padding:9px 14px; border:0; cursor:pointer; font-size:12px; }
.ghost-btn { background:#f3f3f6; }
.primary-btn { background:var(--accent); color:white; }
.primary-btn:disabled { opacity:.55; cursor:default; }
.upload-status { min-height:18px; font-size:10px; margin-top:9px; color:#777b89; }
.upload-status.error { color:#c05c57; }
.handwriting-dialog { width:min(860px,calc(100% - 30px)); }
.handwriting-card { max-height:min(840px,calc(100vh - 32px)); overflow:auto; }
.handwriting-dialog-icon { background:#f0efff; color:var(--accent); }
.handwriting-layout { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(320px,1.2fr); gap:18px; align-items:start; }
.handwriting-preview { margin:0; border:1px solid #e5e5ed; border-radius:16px; background:#f7f7fa; overflow:hidden; }
.handwriting-preview img { display:block; width:100%; height:330px; object-fit:contain; background:#f1f2f6; }
.handwriting-preview figcaption { display:flex; align-items:flex-start; gap:7px; padding:10px 12px; border-top:1px solid #e5e5ed; color:#777b89; font-size:10px; line-height:1.5; }
.handwriting-preview figcaption i { color:#4d9c76; font-size:13px; }
.handwriting-review { min-width:0; }
.handwriting-metric-hint { display:grid; gap:5px; margin-bottom:12px; border:1px solid #deddf7; border-radius:13px; background:#f7f6ff; padding:10px 12px; }
.handwriting-metric-hint strong { display:flex; align-items:center; gap:6px; color:#5853cc; font-size:11px; }
.handwriting-metric-hint span { color:#4c5060; font-size:11px; line-height:1.55; }
.handwriting-metric-hint small { color:#77748f; font-size:10px; }
.handwriting-review > label { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:7px; color:#303340; font-size:11px; font-weight:750; }
.handwriting-review > label span { color:#9699a6; font-size:10px; font-weight:500; }
.handwriting-review textarea { width:100%; min-height:208px; resize:vertical; border:1px solid #dcdce6; border-radius:14px; padding:12px 13px; outline:0; color:#2f3240; background:white; font:inherit; font-size:13px; line-height:1.75; }
.handwriting-review textarea:focus { border-color:#aaa7ed; box-shadow:0 0 0 3px rgba(99,94,224,.09); }
.handwriting-review textarea:disabled { background:#f6f6f8; color:#999ca8; }
.handwriting-text-meta { min-height:24px; display:flex; justify-content:space-between; gap:12px; padding-top:7px; color:#777b89; font-size:10px; }
.handwriting-text-meta strong { flex:0 0 auto; color:#676a78; }
.handwriting-text-meta .recognition-success { color:#397d5d; }
.handwriting-text-meta .recognition-warning,.handwriting-text-meta .outside-recommendation { color:#a66c22; }
.handwriting-uncertain { border-radius:10px; background:#fff7e9; color:#8f642f; padding:8px 10px; font-size:10px; line-height:1.5; }
.handwriting-card .dialog-actions { margin-top:19px; }
.handwriting-card .dialog-actions button { min-height:42px; }
.handwriting-answer-badge { display:inline-flex; align-items:center; gap:5px; margin-bottom:7px; border-radius:999px; background:rgba(255,255,255,.72); color:#635ed2; padding:3px 7px; font-size:9px; font-weight:750; }
.speech-answer-badge { display:inline-flex; align-items:center; gap:5px; margin-bottom:7px; border-radius:999px; background:rgba(255,255,255,.72); color:#397d5d; padding:3px 7px; font-size:9px; font-weight:750; }
.handwriting-answer-copy { display:block; white-space:pre-wrap; }
.export-dialog { width:min(590px,calc(100% - 30px)); }
.export-dialog .dialog-card { max-height:min(720px,calc(100vh - 36px)); display:flex; flex-direction:column; overflow:hidden; }
.export-dialog-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.export-toolbar { flex:0 0 auto; min-height:46px; border:1px solid #e5e5ed; border-radius:13px; background:#fafafd; padding:8px 11px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.export-select-all { min-height:28px; display:flex; align-items:center; gap:9px; color:#444754; font-size:11px; font-weight:700; cursor:pointer; }
.export-select-all input,.export-option input { width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; }
.export-toolbar > span { flex:0 0 auto; color:#777a8a; font-size:10px; font-weight:650; }
.export-list { min-height:120px; max-height:340px; overflow-y:auto; margin-top:10px; padding-right:3px; display:flex; flex-direction:column; gap:7px; }
.export-option { min-height:66px; border:1px solid #e7e7ee; border-radius:14px; background:#fff; padding:9px 11px; display:flex; align-items:center; gap:10px; cursor:pointer; transition:border-color .2s, background .2s, box-shadow .2s; }
.export-option:hover { border-color:#c9c7ef; background:#fbfaff; }
.export-option.selected { border-color:#bbb9f4; background:#f7f6ff; box-shadow:0 4px 14px rgba(88,84,195,.07); }
.export-option-content { min-width:0; flex:1; display:block; }
.export-option-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.export-option-top strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.export-submit-btn { min-width:128px; }
.export-dialog .ghost-btn,.export-dialog .primary-btn { min-height:44px; }
.export-dialog button:focus-visible,.export-option:focus-within { outline:3px solid rgba(109,106,248,.22); outline-offset:2px; }
.backdrop { display:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media (max-width: 1100px) {
  .auth-screen { grid-template-columns:1fr 440px; }
  .auth-intro { padding:42px; }
  .group-standards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .app-shell { grid-template-columns:244px minmax(0,1fr); }
  .backdrop { position:fixed; inset:0; z-index:25; background:rgba(35,37,50,.25); }
  .backdrop.show { display:block; }
  .records-toggle { display:inline-flex; align-items:center; }
  .records-sidebar { position:fixed; inset:0 0 0 auto; width:min(320px,calc(100% - 32px)); z-index:30; transform:translateX(105%); transition:transform .25s ease; box-shadow:-20px 0 50px rgba(40,42,62,.15); }
  .records-sidebar.open { transform:translateX(0); }
  .records-close { display:grid; place-items:center; }
}

@media (max-width: 720px) {
  .handwriting-card { padding:22px 17px 17px; }
  .handwriting-layout { grid-template-columns:1fr; }
  .handwriting-preview img { height:220px; }
  .handwriting-review textarea { min-height:180px; }
  .handwriting-card .dialog-actions { display:grid; grid-template-columns:1fr 1.45fr; }
}

@media (max-width: 760px) {
  .auth-screen { display:block; min-height:100vh; overflow:auto; }
  .auth-intro { min-height:300px; padding:28px 24px; gap:50px; }
  .auth-copy h1 { font-size:34px; }
  .auth-copy p { font-size:13px; }
  .auth-features { display:none; }
  .auth-panel { padding:20px 14px 32px; }
  .auth-card { margin-top:-44px; position:relative; z-index:2; padding:22px 18px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:260px; z-index:30; transform:translateX(-105%); transition:transform .25s ease; box-shadow:20px 0 50px rgba(40,42,62,.15); }
  .sidebar.open { transform:translateX(0); }
  .backdrop { position:fixed; inset:0; z-index:25; background:rgba(35,37,50,.25); }
  .backdrop.show { display:block; }
  .topbar { grid-template-columns:auto minmax(0,1fr) auto; padding:0 14px; gap:10px; }
  .menu-btn { display:block; }
  .topbar-actions { gap:6px; }
  .student-badge { display:none; }
  .user-menu-btn { max-width:90px; padding:4px 7px; }
  .user-menu-btn small,.user-menu-btn b { display:none; }
  .records-toggle { min-height:34px; padding:6px 8px; }
  .progress-track { width:54px; }
  .progress-wrap { gap:6px; }
  .chat-column,.composer-zone { width:calc(100% - 24px); }
  .chat-column { padding-top:20px; }
  .welcome-card { grid-template-columns:62px 1fr; padding:18px; gap:14px; }
  .planet { width:58px;height:58px;font-size:16px; }
  .planet::after { width:73px;height:18px;border-width:2px; }
  h1 { font-size:23px; }
  .report-card { margin-left:0; }
  .indicator-grid,.report-columns { grid-template-columns:1fr; }
  .message-content { max-width:calc(100% - 42px); }
  .export-dialog .dialog-card { padding:22px 18px 18px; }
  .export-toolbar { align-items:flex-start; flex-direction:column; gap:5px; }
  .export-list { max-height:42vh; }
  .export-option { padding:9px; }
  .admin-dialog { width:100%; height:100%; max-width:none; max-height:none; border-radius:0; }
  .admin-head { padding:20px 18px 15px; }.admin-head h2 { font-size:21px; }
  .admin-tabs { padding:8px 14px; overflow-x:auto; }.admin-tabs button { white-space:nowrap; }
  .admin-content { padding:18px 14px 26px; }
  .summary-cards { grid-template-columns:1fr; }
  .summary-card { min-height:92px; }
  .analytics-row { grid-template-columns:1fr; gap:10px; }
  .group-standards,.standard-grid { grid-template-columns:1fr; }
  .admin-section-head { align-items:flex-start; flex-direction:column; }
}

@media print {
  body { overflow:visible; background:white; }
  .sidebar,.records-sidebar,.topbar,.composer-zone,.welcome-card,.messages { display:none !important; }
  .app-shell,.main-panel { display:block; height:auto; }
  .chat-scroll { overflow:visible; }
  .chat-column { width:100%; padding:0; }
  .report-card { margin:0; box-shadow:none; border:0; }
  .print-btn { display:none; }
}