:root {
  --ink: #11262c;
  --muted: #66777c;
  --paper: #f4f6f1;
  --card: #ffffff;
  --line: #dfe6df;
  --teal: #0f766e;
  --teal-dark: #0b5954;
  --teal-pale: #dff3ef;
  --amber: #e99c3b;
  --coral: #dc6848;
  --navy: #18363d;
  --shadow: 0 18px 50px rgba(25, 54, 61, .09);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

body.auth-pending .shell, body.login-mode .shell { display: none; }
body.authenticated .login-screen { display: none; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 72% 24%, rgba(233,156,59,.18), transparent 24%), linear-gradient(135deg, #0d2a30, #17444a); }
.login-card { width: min(440px, 100%); padding: 38px; border-radius: 24px; background: rgba(255,255,255,.98); box-shadow: 0 30px 90px rgba(3,21,25,.28); }
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }
.login-brand strong { display: block; color: var(--navy); font-size: 17px; white-space: nowrap; }
.login-brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.login-card h1 { margin: 8px 0 10px; font-family: SimSun, serif; font-size: 32px; }
.login-card > p { margin: 0 0 26px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.login-card label { display: block; margin: 14px 0 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
.login-card input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; outline: none; }
.login-card input:focus { border-color: #75a99f; box-shadow: 0 0 0 3px rgba(15,118,110,.1); }
.login-card .primary-button { width: 100%; margin-top: 10px; }
.login-error { min-height: 24px; padding-top: 7px; color: #b44f38; font-size: 12px; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 252px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px 20px; background: #102f35; color: white; display: flex; flex-direction: column; z-index: 20; }
.brand { color: white; text-decoration: none; display: flex; gap: 12px; align-items: center; padding: 0 10px 28px; }
.brand-mark { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border-radius: 14px; background: var(--amber); color: #17353b; }
.brand-mark svg { width: 31px; height: 31px; overflow: visible; }
.brand-mark path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.brand-mark circle { fill: currentColor; stroke: var(--amber); stroke-width: 1.6; }
.brand strong { display: block; font-family: SimSun, serif; font-size: 13px; letter-spacing: 0; line-height: 1.35; white-space: nowrap; }
.brand small, .profile small, .sidebar-note small { display: block; margin-top: 3px; color: #9db4b7; font-size: 11px; }
nav { display: grid; gap: 5px; }
nav a { color: #b9cbcd; text-decoration: none; border-radius: 12px; padding: 12px 14px; display: flex; gap: 13px; align-items: center; font-size: 14px; transition: .2s ease; }
nav a > span:first-child { width: 22px; flex: 0 0 22px; text-align: center; font-size: 18px; }
nav a .nav-label { width: auto; text-align: left; font-size: 14px; }
nav a:hover { color: white; background: rgba(255,255,255,.06); }
nav a.active { color: white; background: #1a474c; box-shadow: inset 3px 0 var(--amber); }
.sidebar-note { margin-top: auto; padding: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); border-radius: 14px; display: flex; align-items: flex-start; gap: 10px; }
.sidebar-note strong { font-size: 12px; }
.live-dot { width: 8px; height: 8px; margin-top: 4px; background: #66d9a5; border-radius: 50%; box-shadow: 0 0 0 5px rgba(102,217,165,.12); }
.profile { margin-top: 15px; padding: 13px 8px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 10px; align-items: center; }
.avatar { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: #e9ede4; color: var(--teal-dark); font-weight: 800; }
.profile strong { font-size: 12px; }
.logout-button { margin-left: auto; border: 0; background: transparent; color: #9db4b7; font-size: 11px; cursor: pointer; }
.logout-button:hover { color: white; }

main { min-width: 0; }
.topbar { height: 76px; padding: 0 34px; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--line); background: rgba(248,249,245,.88); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 15; }
.crumb { white-space: nowrap; font-size: 13px; color: #7b888a; }
.crumb b { margin: 0 9px; color: #bdc7c4; }
.crumb strong { color: var(--ink); }
.global-search { position: relative; margin-left: auto; width: min(370px, 35vw); }
.global-search > span { position: absolute; left: 15px; top: 9px; color: #768587; font-size: 20px; }
.global-search input { width: 100%; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: white; padding: 0 16px 0 42px; outline: none; }
.global-search input:focus { border-color: #78aaa3; box-shadow: 0 0 0 3px rgba(15,118,110,.1); }
.search-results { display: none; position: absolute; top: 48px; left: 0; right: 0; max-height: 370px; overflow: auto; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; }
.search-results.open { display: block; }
.search-item { display: block; padding: 10px 11px; border-radius: 10px; cursor: pointer; }
.search-item:hover { background: var(--teal-pale); }
.search-item strong { display: block; font-size: 13px; }
.search-item small { color: var(--muted); font-size: 11px; }
.soft-button, .primary-button, .outline-button { border: 0; border-radius: 11px; cursor: pointer; font-weight: 700; transition: .2s ease; }
.soft-button { padding: 11px 16px; background: var(--teal-pale); color: var(--teal-dark); }
.soft-button:hover { transform: translateY(-1px); }
.primary-button { padding: 12px 19px; background: var(--teal); color: white; box-shadow: 0 8px 20px rgba(15,118,110,.18); }
.primary-button:hover { background: var(--teal-dark); transform: translateY(-1px); }
.primary-button:disabled { opacity: .5; cursor: default; transform: none; }
.outline-button { padding: 11px 17px; border: 1px solid var(--line); background: white; color: var(--ink); }
.outline-button:hover { border-color: #85aaa5; color: var(--teal); }
.menu-button { display: none; border: 0; background: transparent; font-size: 23px; }

.view { padding: 34px; max-width: 1540px; margin: auto; }
.loading-view { min-height: calc(100vh - 76px); display: grid; place-items: center; }
.loader { color: var(--muted); text-align: center; }
.loader span { display: inline-block; width: 32px; height: 32px; border: 3px solid #cfdcd8; border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.eyebrow { color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 25px; }
.page-heading h1 { margin: 7px 0 7px; font-family: SimSun, serif; font-size: clamp(28px, 3vw, 43px); font-weight: 800; letter-spacing: -.02em; }
.page-heading p { margin: 0; color: var(--muted); line-height: 1.7; max-width: 720px; }

.hero { min-height: 310px; border-radius: 27px; padding: 48px; overflow: hidden; position: relative; color: white; background: var(--navy); display: grid; grid-template-columns: 1.35fr .65fr; box-shadow: var(--shadow); }
.hero::before { content: "∀  ∃  ⊢  ≡"; position: absolute; right: -20px; top: 13px; font-family: Georgia, serif; font-size: 96px; color: rgba(255,255,255,.035); letter-spacing: .05em; transform: rotate(-8deg); }
.hero::after { content: ""; width: 340px; height: 340px; position: absolute; right: -90px; bottom: -210px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.02); }
.hero-content { position: relative; z-index: 1; }
.hero .eyebrow { color: #93d6cc; }
.hero h1 { font-family: SimSun, serif; margin: 13px 0 12px; font-size: clamp(36px, 5vw, 66px); letter-spacing: .02em; }
.hero p { color: #c1d2d4; max-width: 630px; line-height: 1.9; font-size: 15px; }
.hero-actions { margin-top: 26px; display: flex; gap: 12px; }
.hero .outline-button { background: transparent; border-color: rgba(255,255,255,.25); color: white; }
.hero-symbol { align-self: end; justify-self: end; position: relative; z-index: 1; font-family: Georgia, serif; font-size: 118px; line-height: 1; color: var(--amber); text-shadow: 0 20px 50px rgba(0,0,0,.18); }

.stats-grid { margin-top: -32px; position: relative; z-index: 2; padding: 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card { background: white; padding: 19px 21px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(19,50,56,.07); }
.stat-card small { color: var(--muted); }
.stat-card strong { display: block; margin-top: 6px; font-size: 27px; font-family: Georgia, serif; }
.stat-card strong em { color: var(--teal); font-size: 12px; font-family: inherit; font-style: normal; margin-left: 4px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 17px; }
.section-head h2 { margin: 0; font-family: SimSun, serif; font-size: 24px; }
.section-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.text-link { border: 0; background: transparent; color: var(--teal); font-weight: 700; cursor: pointer; }
.chapter-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 13px; }
.chapter-card { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 20px; cursor: pointer; transition: .22s ease; min-height: 175px; display: flex; flex-direction: column; }
.chapter-card:hover { transform: translateY(-4px); border-color: #9fc3bc; box-shadow: var(--shadow); }
.chapter-number { width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center; background: var(--teal-pale); color: var(--teal); font-family: Georgia, serif; font-weight: 800; }
.chapter-card h3 { font-size: 15px; line-height: 1.5; margin: 17px 0 9px; }
.chapter-card p { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
.chapter-meta { margin-top: auto; padding-top: 13px; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }

.two-column { display: grid; grid-template-columns: 270px 1fr; gap: 20px; }
.panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(22,47,53,.045); }
.chapter-list { padding: 10px; align-self: start; position: sticky; top: 96px; }
.chapter-tab { display: block; width: 100%; border: 0; background: transparent; text-align: left; padding: 13px; border-radius: 12px; cursor: pointer; color: var(--muted); }
.chapter-tab strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 4px; }
.chapter-tab.active { background: var(--teal-pale); color: var(--teal-dark); }
.chapter-tab.active strong { color: var(--teal-dark); }
.course-content { padding: 31px; min-height: 570px; }
.course-content h2 { margin: 0 0 8px; font-family: SimSun, serif; font-size: 28px; }
.course-intro { color: var(--muted); margin-bottom: 25px; line-height: 1.8; }
.requirements { background: #f8f6ed; border-left: 4px solid var(--amber); border-radius: 12px; padding: 17px 20px; margin-bottom: 25px; }
.requirements strong { display: block; margin-bottom: 7px; }
.requirements p { margin: 0; color: #6f6e65; line-height: 1.7; }
.knowledge-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.knowledge-row { padding: 15px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: .2s; }
.knowledge-row:hover { border-color: #8bb8b1; background: #fbfdfc; transform: translateX(2px); }
.level-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.level-1 { background: #2c9c8d; }
.level-2 { background: var(--amber); }
.level-3 { background: var(--coral); }
.knowledge-row strong { display: block; font-size: 13px; }
.knowledge-row small { color: var(--muted); font-size: 11px; }

.graph-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.graph-panel { min-height: calc(100vh - 185px); overflow: hidden; position: relative; }
.graph-toolbar { position: absolute; z-index: 4; top: 14px; left: 14px; right: 14px; display: flex; gap: 9px; pointer-events: none; }
.graph-toolbar > * { pointer-events: auto; }
.graph-toolbar select, .graph-toolbar input { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: rgba(255,255,255,.94); outline: none; }
.graph-toolbar input { width: 220px; }
.graph-toolbar .graph-fit { height: 40px; padding: 0 14px; background: rgba(255,255,255,.94); white-space: nowrap; }
#graph-canvas { width: 100%; height: calc(100vh - 185px); min-height: 560px; display: block; background: radial-gradient(circle at 50% 45%, #fff 0, #f8faf7 65%, #eef2ed 100%); }
.graph-side { padding: 12px 20px; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); align-items: center; gap: 0; }
.graph-side h3 { margin: 0 0 8px; }
.graph-side p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.legend { display: grid; gap: 11px; margin: 23px 0; }
.legend div { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.graph-side > .eyebrow, .graph-side > h3, .graph-side > p, .graph-side > .legend, .graph-side > .graph-hint { display: none; }
.graph-metric { display: flex; justify-content: space-between; padding: 5px 18px; border-right: 1px solid var(--line); font-size: 12px; }
.graph-metric:nth-last-of-type(1) { border-right: 0; }
.graph-metric strong { color: var(--teal); }
.graph-hint { margin-top: 18px; padding: 13px; border-radius: 11px; background: #f5f7f3; color: var(--muted); font-size: 11px; line-height: 1.7; }

.tutor-layout { display: grid; grid-template-columns: 1fr 300px; gap: 18px; }
.chat-panel { min-height: calc(100vh - 190px); display: flex; flex-direction: column; overflow: hidden; }
.chat-header { padding: 22px 25px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.assistant-avatar { width: 44px; height: 44px; border-radius: 14px; background: var(--teal); color: white; display: grid; place-items: center; font-family: Georgia, serif; font-size: 25px; }
.chat-header h3 { margin: 0 0 3px; }
.chat-header small { color: var(--muted); }
.messages { flex: 1; padding: 24px; overflow: auto; min-height: 390px; max-height: calc(100vh - 345px); }
.message { max-width: 78%; margin-bottom: 17px; display: flex; gap: 10px; align-items: flex-start; }
.message.user { margin-left: auto; flex-direction: row-reverse; }
.bubble { padding: 14px 16px; border-radius: 4px 15px 15px 15px; background: #eff4f1; white-space: pre-wrap; line-height: 1.75; font-size: 14px; }
.message.streaming .bubble::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--teal); animation: stream-caret .8s steps(1) infinite; }
@keyframes stream-caret { 50% { opacity: 0; } }
.message.user .bubble { background: var(--teal); color: white; border-radius: 15px 4px 15px 15px; }
.message-meta { margin-top: 7px; font-size: 10px; color: var(--muted); }
.source-chips { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }
.source-chip { border: 0; padding: 6px 9px; border-radius: 8px; background: white; color: var(--teal); border: 1px solid #cfe1dc; font-size: 10px; cursor: pointer; }
.chat-form { padding: 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.chat-form textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 48px; max-height: 110px; outline: none; }
.chat-form textarea:focus { border-color: #75a99f; }
.prompt-panel { padding: 23px; align-self: start; }
.prompt-panel h3 { margin-top: 0; }
.prompt-card { border: 1px solid var(--line); background: white; width: 100%; text-align: left; border-radius: 11px; padding: 12px; margin: 5px 0; cursor: pointer; color: var(--ink); line-height: 1.45; font-size: 12px; }
.prompt-card:hover { background: var(--teal-pale); border-color: #a5cbc5; }
.model-config-shortcut { width: 100%; margin-top: 12px; }
.scope-note { margin-top: 18px; padding: 13px; background: #f8f6ed; color: #716d5c; border-radius: 11px; font-size: 11px; line-height: 1.6; }

.model-settings-layout { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(420px, 1.15fr); gap: 18px; align-items: start; }
.model-config-card, .supported-models-card { padding: 27px; }
.model-status { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 22px; border-radius: 12px; background: #f4f5f2; }
.model-status > span { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #aab5b1; box-shadow: 0 0 0 5px rgba(170,181,177,.13); }
.model-status.configured { background: #e8f6ef; }
.model-status.configured > span { background: #31926f; box-shadow: 0 0 0 5px rgba(49,146,111,.13); }
.model-status strong, .model-status small { display: block; }
.model-status strong { font-size: 12px; }
.model-status small { margin-top: 4px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.model-config-card form > label:not(.test-option) { display: block; margin: 15px 0 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.model-config-card form > input { width: 100%; height: 45px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; outline: none; }
.model-config-card form > input:focus { border-color: #75a99f; box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
.test-option { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 10px; }
.test-option input { accent-color: var(--teal); }
.model-config-card form .primary-button { width: 100%; margin-top: 17px; }
.clear-model-config { width: 100%; margin-top: 10px; }
.key-security-note { margin-top: 20px; padding: 14px; border-radius: 12px; background: #f2f7f4; border: 1px solid #dbe9e3; }
.key-security-note strong { color: var(--teal-dark); font-size: 11px; }
.key-security-note p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.supported-models-card h2 { margin: 8px 0 20px; }
.provider-card { padding: 18px; margin-bottom: 13px; border: 1px solid var(--line); border-radius: 14px; }
.provider-card.recommended { border-color: #a9d2cb; background: #f7fbf9; }
.provider-card > div { display: flex; justify-content: space-between; align-items: center; }
.provider-card > div > span { padding: 4px 7px; border-radius: 7px; background: var(--teal-pale); color: var(--teal-dark); font-size: 9px; }
.provider-card p, .unsupported-note p { margin: 9px 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.provider-card code, .unsupported-note code { padding: 2px 5px; border-radius: 5px; background: #edf2ee; color: var(--teal-dark); font-size: 10px; }
.unsupported-note { padding: 15px; border-radius: 12px; background: #fbebe6; color: #8b4938; }
.unsupported-note p { color: #8b5b4e; margin-bottom: 0; }

.practice-shell { max-width: 900px; margin: auto; }
.practice-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.progress-track { height: 7px; background: #e1e7e1; border-radius: 10px; overflow: hidden; flex: 1; margin-right: 18px; }
.progress-track span { display: block; height: 100%; background: var(--teal); transition: width .3s; }
.question-card { padding: 38px; }
.question-meta { display: flex; gap: 8px; margin-bottom: 20px; }
.tag { padding: 6px 9px; border-radius: 8px; background: var(--teal-pale); color: var(--teal-dark); font-size: 11px; font-weight: 700; }
.tag.warm { background: #fbefdb; color: #9a5c0e; }
.question-card h2 { white-space: pre-line; line-height: 1.65; font-family: SimSun, serif; font-size: 22px; }
.options { display: grid; gap: 10px; margin: 25px 0; }
.option { border: 1px solid var(--line); background: white; border-radius: 13px; padding: 14px 16px; text-align: left; cursor: pointer; transition: .18s; }
.option:hover { border-color: #7eaca5; }
.option.selected { border-color: var(--teal); background: var(--teal-pale); }
.option.correct { border-color: #31926f; background: #e2f5eb; }
.option.wrong { border-color: var(--coral); background: #fbe8e3; }
.option span { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 10px; border-radius: 7px; background: #edf0ec; font-family: Georgia, serif; }
.feedback { display: none; margin: 20px 0; padding: 17px; border-radius: 12px; line-height: 1.7; font-size: 13px; }
.feedback.show { display: block; }
.feedback.good { background: #e8f6ef; color: #246b54; }
.feedback.bad { background: #fbebe6; color: #8b4938; }
.question-actions { display: flex; justify-content: space-between; align-items: center; }
.review-warning { color: var(--muted); font-size: 11px; }

.assignment-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 16px; }
.assignment-card { padding: 23px; }
.assignment-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.assignment-card h3 { margin: 18px 0 8px; }
.assignment-card p, .assignment-card small { color: var(--muted); font-size: 12px; }
.assignment-card .progress-track { margin: 22px 0 8px; }
.assignment-card .primary-button { width: 100%; margin-top: 20px; }
.status-dot { color: #9a5c0e; font-size: 11px; font-weight: 700; }
.status-dot::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--amber); }
.status-dot.done { color: #246b54; }
.status-dot.done::before { background: #31926f; }
.publisher-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; }
.publisher-form, .assignment-history { padding: 25px; align-self: start; }
.publisher-form > label, .field-heading label { display: block; margin: 16px 0 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.publisher-form > input, .publisher-form select, .publisher-form .tool-form-grid input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; background: white; outline: none; }
.publisher-form input:focus, .publisher-form select:focus { border-color: #75a99f; box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
.publisher-form .primary-button { width: 100%; margin-top: 20px; }
.fixed-question-count { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #f2f7f4; border: 1px solid #dbe9e3; }
.fixed-question-count strong { font: 800 25px Georgia, serif; color: var(--teal); }
.fixed-question-count span { color: var(--muted); font-size: 11px; }
.field-heading { display: flex; align-items: flex-end; justify-content: space-between; }
.student-picker { display: grid; gap: 8px; max-height: 240px; overflow: auto; }
.student-picker label { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.student-picker label:has(input:checked) { border-color: #86b6ae; background: var(--teal-pale); }
.student-picker input { accent-color: var(--teal); }
.student-picker strong, .student-picker small { display: block; }
.student-picker strong { font-size: 12px; }
.student-picker small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.assignment-history .section-head { margin-top: 0; }
.published-row { padding: 17px 0; border-bottom: 1px solid var(--line); }
.published-row:last-child { border-bottom: 0; }
.published-row > div:first-child { display: flex; justify-content: space-between; gap: 15px; }
.published-row strong, .published-row small { display: block; }
.published-row small { color: var(--muted); font-size: 11px; }
.target-progress { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.target-progress span { padding: 6px 8px; border-radius: 8px; background: #fbefdb; color: #8a5b20; font-size: 10px; }
.target-progress span.complete { background: #e2f5eb; color: #246b54; }

.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 18px; }
.report-card { padding: 22px; }
.report-card small { color: var(--muted); }
.report-card strong { display: block; font-size: 30px; margin-top: 8px; font-family: Georgia, serif; }
.report-columns { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.report-panel { padding: 25px; }
.report-panel h3 { margin-top: 0; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 42px; gap: 12px; align-items: center; margin: 14px 0; font-size: 12px; }
.bar { height: 9px; border-radius: 10px; background: #e5ebe5; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--teal); border-radius: inherit; }
.plan-step { position: relative; padding: 0 0 20px 36px; }
.plan-step::before { content: attr(data-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: white; display: grid; place-items: center; font-size: 11px; }
.plan-step::after { content: ""; position: absolute; left: 11px; top: 28px; bottom: 3px; border-left: 1px dashed #b7c9c4; }
.plan-step:last-child::after { display: none; }
.plan-step strong { display: block; font-size: 13px; }
.plan-step p { margin: 5px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.analytics-table-wrap { overflow: auto; }
.analytics-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.analytics-table th, .analytics-table td { padding: 15px 17px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; vertical-align: middle; }
.analytics-table th { background: #f5f8f5; color: var(--muted); font-size: 11px; }
.analytics-table td small { display: block; margin-top: 3px; color: var(--muted); }
.accuracy-badge { display: inline-block; padding: 5px 8px; border-radius: 8px; background: #edf1ed; color: var(--muted); }
.accuracy-badge.good { background: #e2f5eb; color: #246b54; }
.accuracy-badge.attention { background: #fbefdb; color: #8a5b20; }
.analytics-dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.analysis-card { padding: 23px; min-height: 270px; }
.analysis-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.analysis-card-head h3 { margin: 6px 0 0; font-size: 18px; }
.analysis-card-head > small { color: var(--muted); font-size: 10px; }
.overview-analysis { grid-column: span 4; }
.chapter-analysis { grid-column: span 8; }
.distribution-analysis { grid-column: span 4; }
.assignment-analysis { grid-column: span 8; }
.weak-analysis { grid-column: span 7; }
.insight-analysis { grid-column: span 5; background: linear-gradient(145deg, #14383e, #1b4a4e); color: white; }
.insight-analysis .eyebrow { color: #8bd1c6; }
.ring-group { min-height: 175px; display: flex; justify-content: center; align-items: center; gap: 20px; }
.metric-ring { --value: 0; width: 135px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--teal) calc(var(--value) * 1%), #e6ece8 0); position: relative; }
.metric-ring::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: white; }
.metric-ring.amber { background: conic-gradient(var(--amber) calc(var(--value) * 1%), #e6ece8 0); }
.metric-ring > div { position: relative; z-index: 1; text-align: center; }
.metric-ring strong, .metric-ring small { display: block; }
.metric-ring strong { font: 800 24px Georgia, serif; }
.metric-ring small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.analysis-bars { display: grid; gap: 16px; }
.analysis-bar-row { display: grid; grid-template-columns: minmax(100px, 170px) 1fr 45px 45px; gap: 11px; align-items: center; }
.analysis-bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.analysis-bar-row > div { height: 10px; border-radius: 10px; background: #e7ede9; overflow: hidden; }
.analysis-bar-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #62b8aa, var(--teal)); }
.analysis-bar-row strong { font: 700 12px Georgia, serif; }
.analysis-bar-row small { color: var(--muted); font-size: 9px; }
.distribution-chart { height: 190px; display: flex; align-items: stretch; justify-content: space-around; gap: 10px; border-bottom: 1px solid var(--line); }
.distribution-chart > div { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr 40px; text-align: center; }
.distribution-chart > div > span { min-height: 130px; display: flex; align-items: end; justify-content: center; position: relative; }
.distribution-chart i { display: block; width: min(42px, 68%); min-height: 4px; border-radius: 8px 8px 2px 2px; background: var(--teal); }
.distribution-chart i.tone-1 { background: #55a99d; }
.distribution-chart i.tone-2 { background: var(--amber); }
.distribution-chart i.tone-3 { background: #bac7c2; }
.distribution-chart b { position: absolute; top: 3px; font-size: 11px; }
.distribution-chart small { padding-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.chart-legend { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.chart-legend i, .chart-legend b { width: 10px; height: 5px; border-radius: 5px; background: var(--teal); }
.chart-legend b { margin-left: 5px; background: var(--amber); }
.assignment-analysis-row { display: grid; grid-template-columns: minmax(130px, 220px) 1fr 38px; gap: 13px; align-items: center; margin: 15px 0; }
.assignment-analysis-row strong, .assignment-analysis-row small { display: block; }
.assignment-analysis-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.assignment-analysis-row small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.dual-bars { display: grid; gap: 4px; }
.dual-bars i, .dual-bars b { z-index: 1; display: block; height: 7px; border-radius: 8px; background: var(--teal); }
.dual-bars b { background: var(--amber); }
.assignment-analysis-row em { font-style: normal; font-size: 10px; }
.weak-rank { display: grid; grid-template-columns: 25px minmax(120px, 190px) 1fr 65px; gap: 11px; align-items: center; margin: 14px 0; }
.weak-rank > span { width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; background: #fbefdb; color: #9a5c0e; font: 700 11px Georgia, serif; }
.weak-rank strong, .weak-rank small { display: block; }
.weak-rank strong { font-size: 11px; }
.weak-rank small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.weak-meter { height: 7px; border-radius: 8px; overflow: hidden; background: #f2e9e5; }
.weak-meter i { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
.weak-rank em { color: var(--coral); font-style: normal; font-size: 9px; }
.insight-list { display: grid; gap: 14px; }
.insight-list > div { display: grid; grid-template-columns: 25px 1fr; gap: 11px; align-items: start; }
.insight-list span { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; background: rgba(139,209,198,.16); color: #9cdfd5; font: 700 11px Georgia, serif; }
.insight-list p { margin: 2px 0 0; color: #c8d9da; font-size: 11px; line-height: 1.7; }
.chart-empty { min-height: 150px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.account-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 18px; align-items: start; }
.student-account-layout { grid-template-columns: minmax(320px, 520px); justify-content: center; }
.student-create-card, .password-card { padding: 27px; }
.student-create-card h3 { margin: 7px 0 20px; }
.student-create-card label, .password-card label { display: block; margin: 15px 0 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.student-create-card input, .password-card input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; outline: none; }
.student-create-card input:focus, .password-card input:focus { border-color: #75a99f; box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
.student-create-card form .primary-button, .password-card form .primary-button { width: 100%; margin-top: 20px; }
.account-identity { display: flex; gap: 12px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.account-identity .avatar { width: 44px; height: 44px; }
.account-identity strong, .account-identity small { display: block; }
.account-identity small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.student-manage-card { overflow: hidden; }
.student-manage-head { padding: 24px 25px 16px; }
.student-manage-head h2 { margin: 0; font-size: 21px; }
.student-manage-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.student-account-table { max-height: calc(100vh - 250px); overflow: auto; border-top: 1px solid var(--line); }
.student-account-table table { width: 100%; border-collapse: collapse; }
.student-account-table th, .student-account-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; }
.student-account-table th { position: sticky; top: 0; z-index: 1; background: #f5f8f5; color: var(--muted); }
.student-account-table code { padding: 4px 7px; border-radius: 6px; background: #f0f4f1; color: var(--teal-dark); }
.delete-student { border: 0; border-radius: 8px; padding: 6px 9px; background: #fbe8e3; color: #a44934; cursor: pointer; font-size: 10px; }
.delete-student:hover { background: #f6d6ce; }

.tools-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; }
.tool-control { padding: 25px; align-self: start; }
.tool-model-state { display: flex; align-items: center; gap: 9px; padding: 10px 12px; margin-top: 14px; border-radius: 10px; background: #f5f6f3; }
.tool-model-state > span { width: 8px; height: 8px; border-radius: 50%; background: #aab5b1; }
.tool-model-state.ready { background: #e8f6ef; }
.tool-model-state.ready > span { background: #31926f; }
.tool-model-state p { margin: 0; color: var(--muted); font-size: 10px; }
.tool-control label { display: block; margin: 18px 0 7px; color: var(--muted); font-size: 12px; }
.tool-control select, .tool-control input, .tool-control textarea { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; background: white; outline: none; }
.tool-control select, .tool-control input { height: 44px; }
.tool-control textarea { resize: vertical; line-height: 1.6; }
.tool-control select:focus, .tool-control input:focus, .tool-control textarea:focus { border-color: #75a99f; box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
.tool-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-control button { width: 100%; margin-top: 15px; }
.tool-output { padding: 30px; min-height: 570px; }
.tool-output pre { margin: 0; white-space: pre-wrap; font-family: inherit; line-height: 1.9; color: #3d5054; }
.profile-preview, .plan-profile { margin-top: 18px; padding: 14px; border-radius: 12px; background: #f2f7f4; border: 1px solid #dbe9e3; }
.profile-preview strong, .plan-profile strong { color: var(--teal-dark); font-size: 12px; }
.profile-preview span, .profile-preview p, .plan-profile p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.plan-editor-head { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.plan-editor-head h2 { margin: 13px 0 0; font-family: SimSun, serif; font-size: 27px; }
.plan-editor-head .tag + .tag { margin-left: 7px; }
.plan-editor-head small { color: var(--muted); white-space: nowrap; }
.tag.final-tag { background: #e2f5eb; color: #246b54; }
.plan-profile { margin: 18px 0; }
.editor-label, .revision-box > label { display: block; margin: 18px 0 8px; color: var(--ink); font-size: 12px; font-weight: 700; }
.lesson-plan-editor { width: 100%; min-height: 680px; resize: vertical; border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: #fbfcfa; color: #31484c; line-height: 1.8; font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif; outline: none; }
.lesson-plan-editor:focus { background: white; border-color: #75a99f; box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
.lesson-plan-editor[readonly] { background: #f4f6f3; color: #44585c; }
.revision-box { margin-top: 18px; padding: 18px; border-radius: 14px; background: #f8f6ed; border: 1px solid #ebe4cd; }
.revision-box > label { margin-top: 0; }
.revision-box textarea { width: 100%; resize: vertical; border: 1px solid #ded9c8; border-radius: 10px; padding: 11px 12px; line-height: 1.6; outline: none; }
.revision-box button { margin-top: 10px; }
.plan-actions, .plan-final-actions { margin-top: 18px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.plan-final-actions { justify-content: space-between; padding: 17px; border-radius: 13px; background: #e8f6ef; }
.plan-final-actions p { margin: 0; color: #246b54; font-size: 12px; }
.download-button { display: inline-block; text-decoration: none; white-space: nowrap; }

.empty-state { text-align: center; color: var(--muted); padding: 50px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(9,27,31,.55); backdrop-filter: blur(5px); padding: 20px; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(720px, 95vw); max-height: 85vh; overflow: auto; background: white; border-radius: 21px; padding: 32px; position: relative; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.modal-close { position: absolute; right: 18px; top: 16px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #edf1ed; cursor: pointer; font-size: 22px; }
.modal h2 { font-family: SimSun, serif; margin: 5px 45px 4px 0; font-size: 29px; }
.modal .subtitle { color: var(--muted); font-size: 12px; }
.modal-section { margin-top: 25px; }
.modal-section h4 { margin: 0 0 8px; color: var(--teal-dark); }
.modal-section p { margin: 0; line-height: 1.85; color: #44585c; }
.relation-list { display: flex; gap: 7px; flex-wrap: wrap; }
.relation-pill { padding: 8px 10px; border-radius: 9px; background: #f0f4f1; font-size: 11px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 80; padding: 13px 17px; border-radius: 11px; color: white; background: var(--navy); box-shadow: var(--shadow); transform: translateY(90px); opacity: 0; transition: .25s; }
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1100px) {
  .chapter-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid, .report-grid { grid-template-columns: repeat(2, 1fr); }
  .graph-layout, .tutor-layout { grid-template-columns: 1fr; }
  .graph-side, .prompt-panel { display: none; }
  .overview-analysis, .distribution-analysis { grid-column: span 5; }
  .chapter-analysis, .assignment-analysis { grid-column: span 7; }
  .weak-analysis, .insight-analysis { grid-column: span 6; }
}
@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -270px; width: 252px; transition: .25s; }
  .sidebar.open { left: 0; box-shadow: 20px 0 50px rgba(0,0,0,.2); }
  .menu-button { display: block; }
  .topbar { padding: 0 17px; gap: 10px; }
  .crumb, .soft-button { display: none; }
  .global-search { width: auto; flex: 1; }
  .view { padding: 20px 15px; }
  .hero { padding: 32px 25px; grid-template-columns: 1fr; }
  .hero-symbol { display: none; }
  .stats-grid { margin-top: 13px; padding: 0; }
  .chapter-grid { grid-template-columns: 1fr 1fr; }
  .two-column, .tools-layout, .report-columns, .publisher-layout, .account-layout, .model-settings-layout { grid-template-columns: 1fr; }
  .assignment-grid { grid-template-columns: 1fr 1fr; }
  .analysis-card { grid-column: 1 / -1; }
  .tool-control { position: static; }
  .chapter-list { position: static; display: flex; overflow-x: auto; }
  .chapter-tab { min-width: 190px; }
  .knowledge-list { grid-template-columns: 1fr; }
  .message { max-width: 92%; }
}
@media (max-width: 480px) {
  .stats-grid, .report-grid, .chapter-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .question-card { padding: 23px; }
  .tool-form-grid { grid-template-columns: 1fr; }
  .assignment-grid { grid-template-columns: 1fr; }
  .plan-editor-head, .plan-final-actions { flex-direction: column; }
  .lesson-plan-editor { min-height: 520px; padding: 15px; }
}