/* Glass controls: presentation only; original layout and interaction IDs retained. */
:root {
  color-scheme: dark;
  --blue: #e6e8ed;
  --blue-dark: #ffffff;
  --text: #f2f3f4;
  --muted: #aeb0b6;
  --line: rgba(255, 255, 255, .095);
  --panel: #121315;
  --mint: #b3c7c0;
  --glass: linear-gradient(145deg, rgba(255,255,255,.135), rgba(255,255,255,.055));
  --glass-edge: rgba(255,255,255,.17);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.085), inset 0 -1px 0 rgba(0,0,0,.14), 0 5px 18px rgba(0,0,0,.14);
  --shadow: 0 8px 30px rgba(0,0,0,.2);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

body { background: #171819; }
.sidebar { background: #111214; }
.main-panel {
  background: radial-gradient(ellipse at 50% 37%, #232527 0, #191a1c 48%, #171819 85%);
}
.settings-panel { background: #1a1b1d; }
.topbar { background: rgba(23,24,25,.35); }
.composer-area { background: transparent; }

.brand, .page-title strong, .settings-heading h2, .welcome h1,
.question-card-heading strong { color: var(--text); }
.brand small, .page-title small, .sidebar-label, .empty-history,
.history-item, .history-item small, .sidebar-bottom, .sidebar-bottom small,
.eyebrow, .welcome-description, .welcome-features, .welcome-note,
.settings-section label, .field-note, .settings-note, .settings-note span,
.composer-disclaimer, .voice-button, .input-hint, .practice-mode,
.practice-mode small, .oral-task-intro, .timer-status, .oral-task-note,
.message-meta { color: var(--muted); }
.brand small { letter-spacing: 1.5px; }
.welcome h1 { font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; }
.welcome-symbol { color: #d8dce3; }
.welcome-description { font-size: 14px; }
.welcome .eyebrow { color: #aeb0b6; }
.welcome-features { color: #c1c3c9; }
.welcome-note { font-size: 11px; }
.empty-history { font-size: 12px; }
.sidebar-bottom { border-color: var(--line); }
.device-dot { background: #a5b8ae; }
.sidebar-label span { background: #282a2e; color: #bfc2c8; }
.brand-mark {
  background: linear-gradient(145deg, #4c4f54, #2b2d31);
  border: 1px solid var(--glass-edge);
  color: #f0f1f3;
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
}

/* Solid translucent fallback remains readable without backdrop-filter support. */
.new-session, .primary-button, .outline-button, .save-preferences,
.icon-button, .voice-button, .stop-button, .timer-actions button,
.practice-mode button.selected, .training-tip button {
  background: var(--glass);
  color: #f0f1f3;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.new-session:hover, .primary-button:hover, .outline-button:hover,
.save-preferences:hover, .icon-button:hover, .voice-button:hover,
.stop-button:hover, .timer-actions button:hover, .training-tip button:hover {
  background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.09));
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
button:disabled { opacity: .4; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid #d6e3f6;
  outline-offset: 4px;
}
.new-session { min-height: 46px; font-size: 13px; font-weight: 500; }
.primary-button { padding: 14px 24px; min-height: 48px; }
.start-button { gap: 25px; }
.icon-button { width: 40px; height: 40px; flex-shrink: 0; color: #d9dce3; }
.icon-button svg { width: 19px; height: 19px; }
/* Keep responsive drawer controls hidden until the original breakpoints. */
.mobile-menu, .settings-toggle, .close-settings { display: none; }
.topbar-actions { gap: 9px; }
.mode-badge, .mode-badge.model {
  background: rgba(255,255,255,.045);
  border-color: var(--line);
  color: #bec4ce;
  border-radius: 999px;
  font-size: 10px;
  padding: 6px 10px;
}
.mode-badge.model { color: #bfdfd0; }
.history-item { border: 1px solid transparent; border-radius: 14px; }
.history-item:hover { background: rgba(255,255,255,.035); }
.history-item.active {
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  border-color: var(--line);
  color: #eef0f4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.stage-nav { border-color: var(--line); gap: 10px; }
.stage-nav button { color: #b2b5bd; padding: 8px 10px; border-radius: 999px; }
.stage-nav button span {
  background: #242629;
  border-color: rgba(255,255,255,.14);
  color: #afb3bc;
}
.stage-nav button.current {
  color: #f4f5f6;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.stage-nav button.current span { background: #e1e4ea; border-color: #e1e4ea; color: #26282c; box-shadow: none; }
.stage-nav button.done { color: #c4cbc8; }
.stage-nav button.done span { background: #323a37; border-color: #48564e; color: #c9d9d1; }
.stage-nav i { background: #393c41; width: 17px; }

.settings-section h3 { color: #e4e6e9; font-size: 12px; }
.blue { background: #b8c9e4; }
.mint { background: #b3c7c0; }
.settings-section label { font-size: 11px; }
.settings-section select, .settings-section textarea {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.13);
  color: #e3e5e9;
  border-radius: 13px;
  font-size: 12px;
}
.settings-section select { min-height: 41px; padding: 10px 12px; }
.settings-section select option { background: #25272b; color: #e3e5e9; }
.settings-section textarea { padding: 11px 12px; }
.settings-section textarea::placeholder, .composer textarea::placeholder { color: #999da7; }
textarea:focus, select:focus { border-color: #a1aab9 !important; box-shadow: 0 0 0 3px #c4d1e00a; }
.field-note { font-size: 10px; line-height: 1.8; }
.outline-button { font-size: 12px; min-height: 43px; }
.save-preferences { font-size: 12px; min-height: 42px; }

.composer {
  background: linear-gradient(145deg, rgba(70,72,77,.62), rgba(48,50,55,.7));
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 29px;
  padding: 17px 19px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 25px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.composer:focus-within { border-color: rgba(255,255,255,.33); }
.composer textarea { color: #f0f1f3; font-size: 14px; }
.composer textarea:focus { box-shadow: none; }
.voice-button { padding: 8px 12px; min-height: 36px; font-size: 11px; gap: 6px; }
.voice-button svg { width: 17px; height: 18px; }
.voice-button.recording { color: #ffb5b5; border-color: #dc97976b; }
.send-button {
  width: 40px; height: 40px; border-radius: 50%;
  background: #e8eaed; color: #242529;
  border: 1px solid #ffffff50;
  box-shadow: inset 0 1px 0 #ffffff60, 0 3px 8px #00000015;
}
.send-button:not(:disabled) { background: #e8eaed; color: #242529; }
.send-button:not(:disabled):hover { background: #fff; }
.stop-button { padding: 8px 14px; min-height: 36px; }
.composer-disclaimer { color: #9297a1; }
.composer.listening { border-color: #b6c7dd; box-shadow: 0 0 0 3px #bdccdf14; }

.question-card, .oral-task { background: #222427; border-color: var(--line); border-radius: 18px; }
.question-content>p, .question-content p.question-paper-heading,
.question-content p.question-task-prompt, .question-requirements p { color: #d9dce2; }
.question-label, .question-tags span, .oral-task-heading>span {
  color: #c1cbd9; background: #30343b; border-radius: 999px;
}
.question-requirements, .question-hints { border-color: #ffffff17; }
.question-requirements strong, .question-hints summary,
.oral-task-heading h2 { color: #d1d7e1; }
.question-content p.source-note, .question-hints-content p { color: #a1a8b3; }
.question-hints-content a { color: #c9d8ee; border-color: #7e94b254; }
.practice-mode>div { background: #282b2f; border-radius: 999px; }
.practice-mode button { color: #adb5c2; border-radius: 999px; padding: 7px 12px; }
.reading-timer, .oral-task-scaffold { background: #2b2e33; border-radius: 14px; }
.timer-label, .oral-task-list, .oral-task-scaffold, .oral-task-scaffold strong { color: #b4bdcb; }
.reading-timer strong { color: #e2e6ee; }
.timer-actions button, .timer-actions button:first-child { color: #e1e5ec; border-color: var(--glass-edge); min-height: 34px; padding: 7px 12px; }
.training-tip { color: #b6bfce; }
.training-tip>span { color: #c8d1de; }
.training-tip button { color: #e1e5ec; padding: 8px 13px; }
.avatar { background: #353a42; color: #d9e2ee; border-radius: 50%; }
.bubble { background: #2d2f33; color: #e1e4e9; border-radius: 18px; }
.message.user .bubble { background: #414751; color: #f4f5f7; border-radius: 18px; box-shadow: none; }
.checks { background: #262a2f; border-color: #424954; }
.checks-label, .check-item { color: #bbc6d7; }
.pending .bubble span { color: #b3bbca; }
.pending .bubble b { background: #c2c9d4; }
.inline-notice { background: #383328; border-color: #655c46; color: #e1cfab; }
.inline-notice.error { background: #3b2c2e; border-color: #70484e; color: #e9bbc0; }
.settings-note { color: #a1a8b3; }
.toast { background: #34373cef; color: #f4f5f7; border: 1px solid var(--glass-edge); border-radius: 18px; backdrop-filter: blur(18px); }
.chat-scroll, .settings-panel { scrollbar-color: #42454c transparent; }
.drawer-overlay { background: #00000073; backdrop-filter: blur(5px); }

@media(max-width:1200px) {
  .stage-nav { gap: 5px; }
  .stage-nav button { padding: 8px 6px; font-size: 11px; }
  .stage-nav i { width: 10px; }
}
@media(max-width:1030px) {
  .settings-toggle, .close-settings { display: grid; }
  .settings-panel { box-shadow: -10px 0 35px #00000030; }
  .stage-nav { gap: 10px; }
}
@media(max-width:700px) {
  .mobile-menu { display: grid; }
  .topbar { padding: 0 12px; height: 78px; gap: 9px; }
  .topbar-actions { gap: 6px; }
  .icon-button { width: 36px; height: 36px; }
  .topbar-actions .mode-badge { display: none; }
  .page-title strong { font-size: 13px; }
  .page-title small { font-size: 9px; letter-spacing: 0; }
  .stage-nav { height: 80px; padding: 0 13px; gap: 3px; }
  .stage-nav button { flex-direction: column; gap: 5px; padding: 8px 9px; font-size: 10px; }
  .stage-nav button span { width: 20px; height: 20px; font-size: 9px; }
  .stage-nav i { width: 7px; }
  .welcome { margin-top: 7vh; }
  .welcome h1 { font-size: 28px; }
  .welcome-description { font-size: 12px; }
  .welcome-features { font-size: 10px; }
  .welcome-note { font-size: 10px; }
  .primary-button { min-height: 48px; font-size: 13px; }
  .composer { border-radius: 27px; padding: 15px 15px 11px; }
  .composer textarea { font-size: 13px; }
  .composer-bottom { margin-top: 7px; }
  .voice-button { min-height: 40px; padding: 8px 12px; }
  .send-button { height: 40px; width: 40px; }
  .question-card-heading { padding: 16px; }
  .bubble { border-radius: 18px; }
  .practice-mode button { padding: 7px 11px; }
  .timer-actions button, .timer-actions button:first-child { padding: 7px 10px; min-height: 38px; }
}
@media(prefers-reduced-transparency:reduce) {
  .new-session, .primary-button, .outline-button, .save-preferences,
  .icon-button, .voice-button, .stop-button, .timer-actions button,
  .practice-mode button.selected, .training-tip button, .stage-nav button.current { background: #383b40; backdrop-filter: none; }
  .composer { background: #303237; backdrop-filter: none; }
}