/* 主题变量与安全区域默认值。 / Theme variables and safe-area defaults. */
:root {
  --bg1: #a7c7ff;
  --bg2: #f6b6d6;
  --bg3: #ffe3a3;
  --body-base: #f8fbff;
  --ink: #1c2230;
  --ink-soft: #545f75;
  --glass: rgba(255,255,255,0.42);
  --glass-strong: rgba(255,255,255,0.62);
  --glass-border: rgba(255,255,255,0.65);
  --shadow: rgba(30,40,80,0.18);
  --input-bg: rgba(255,255,255,0.35);
  --output-bg: rgba(255,255,255,0.28);
  --red: #c1443a;
  --gold: #b8862c;
  --main-color: #c1443a;
  --secondary-color: #b8862c;
  --button-primary-bg: #c1443a;
  --button-primary-border: #c1443a;
  --button-primary-text: #ffffff;
  --button-ghost-bg: rgba(255,255,255,0.42);
  --button-ghost-text: #545f75;
  --button-pressed-bg: #3f607a;
  --button-pressed-border: #3f607a;
  --button-pressed-text: #ffffff;
  --focus-color: #c1443a;
  --status-ok: #3d8a63;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

/* 系统深色主题的兼容默认值。 / Compatibility defaults for system dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg1: #2a3a6b; --bg2: #5a2a55; --bg3: #4a3a1a;
    --ink: #f1ecdf; --ink-soft: #b7ae9b;
    --glass: rgba(30,28,24,0.42);
    --glass-strong: rgba(35,32,27,0.6);
    --glass-border: rgba(255,255,255,0.14);
    --shadow: rgba(0,0,0,0.5);
    --red: #e08b78; --gold: #e0b969;
  }
}
:root[data-theme="dark"] {
  --bg1: #2a3a6b; --bg2: #5a2a55; --bg3: #4a3a1a;
  --ink: #f1ecdf; --ink-soft: #b7ae9b;
  --glass: rgba(30,28,24,0.42);
  --glass-strong: rgba(35,32,27,0.6);
  --glass-border: rgba(255,255,255,0.14);
  --shadow: rgba(0,0,0,0.5);
  --red: #e08b78; --gold: #e0b969;
}

/* 页面背景使用多层渐变，并支持设备安全区。 / Use layered gradients and support device safe areas. */
html { scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at 15% 20%, var(--bg1) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, var(--bg2) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, var(--bg3) 0%, transparent 55%),
    var(--body-base);
  background-color: var(--body-base);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-color: #14131a; }
}
:root[data-theme="dark"] body { background-color: #14131a; }

/* 主内容容器保持窄幅，方便阅读和移动端适配。 / Keep the content column narrow for readability and mobile layout. */
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 20px 90px; }

/* 顶部标题与控制区域。 / Header title and control area. */
.plate { text-align: center; margin-bottom: 28px; }
.top-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.plate .drawer {
  display: inline-block;
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 6px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 18px var(--shadow);
}
.lang-toggle {
  display: inline-flex;
  gap: 6px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 4px;
}
.lang-toggle .ghost {
  padding: 6px 10px;
  border-radius: 999px;
}
.lang-toggle .ghost.active {
  background: var(--button-pressed-bg);
  color: var(--button-pressed-text);
  border-color: var(--button-pressed-border);
  box-shadow: 0 2px 8px rgba(63,96,122,0.32);
}
h1 {
  font-family: "Source Serif 4", serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3rem);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.title-typing {
  display: block;
  width: min(100%, 420px);
  margin: 0 auto 8px;
  padding: 0 4px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  caret-color: transparent !important;
  text-align: center;
  font-family: "Source Serif 4", serif;
  font-size: clamp(2.1rem, 6vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  user-select: text;
  cursor: default;
}
.tagline-typing {
  display: block;
  width: min(100%, 340px);
  margin: 0 auto 8px;
  padding: 0 4px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  caret-color: transparent !important;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 0.98rem;
  line-height: 1.5;
  user-select: text;
  cursor: default;
}
.typing-text { display: inline; }
.typing-caret {
  display: none;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--main-color);
  pointer-events: none;
  user-select: none;
  transform: translateY(1px);
  animation: typing-caret-blink 0.9s steps(1, end) infinite;
}
.tagline-typing .typing-caret { background: var(--secondary-color); }
.typing-caret.active { display: inline-block; }
@keyframes typing-caret-blink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
.plate p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.sync-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.sync-status { font-size: 0.78rem; color: var(--ink-soft); }
.sync-status[data-tone="ok"] { color: var(--status-ok); }
.sync-status[data-tone="err"] { color: var(--red); }
.sync-status[data-tone="busy"] { color: var(--gold); }
button.small { padding: 7px 14px; font-size: 0.78rem; }
.subject-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.subject-settings input {
  width: 140px;
  padding: 7px 10px;
  font-size: 0.78rem;
}
.settings { padding: 22px; margin-bottom: 30px; }
.settings .hint { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; }
.account-panel { padding: 22px; margin-bottom: 24px; }
.account-panel .hint { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.account-panel input { margin-bottom: 10px; }
.account-panel .actions { flex-wrap: wrap; }
#accountSession, #adminActions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#accountSession[hidden], #adminActions[hidden], #accountForm[hidden], #accountPanel[hidden], #publicMistake[hidden] { display: none !important; }
#accountIdentity { color: var(--ink-soft); font-size: 0.86rem; }
#adminActions { margin-top: 14px; }
.public-toggle.active { background: var(--button-pressed-bg); color: var(--button-pressed-text); border-color: var(--button-pressed-border); }
.public-toggle:disabled { opacity: 0.55; cursor: not-allowed; }
.danger {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--red) 60%, var(--glass-border));
  border-radius: 999px;
  padding: 9px 16px;
  color: #fff;
  background: var(--red);
  cursor: pointer;
}
.danger:hover { filter: brightness(1.08); }
.card-admin-delete { margin: 14px 0 0 10px; }

/* 统一玻璃面板效果。 / Shared glass-panel styling. */
.glass {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: 0 8px 32px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.35);
}

/* 视图和科目筛选按钮。 / View and subject filter buttons. */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 30px; }
.view-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 12px; }
.tab {
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.tab.active { background: var(--button-pressed-bg); color: var(--button-pressed-text); border-color: var(--button-pressed-border); }

.slip { padding: 26px; margin-bottom: 34px; }
.slip-label {
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 16px;
  color: var(--main-color);
}
.agent-panel .hint {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}
.agent-actions { margin-top: 0; }
.agent-output {
  min-height: 130px;
  margin-top: 14px;
  background: var(--output-bg);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.6;
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
input, textarea {
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.93rem;
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--ink);
  padding: 11px 14px;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 0.8; }
input:focus, textarea:focus { border-color: var(--red); }
textarea { resize: vertical; min-height: 60px; margin-bottom: 12px; }
.actions { display: flex; gap: 10px; margin-top: 8px; }
/* 主要按钮、普通按钮和按下状态。 / Primary, ghost, and pressed button states. */
button.primary, button.ghost {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
}
button.primary {
  background: var(--button-primary-bg); color: var(--button-primary-text); border: 1px solid var(--button-primary-border);
  box-shadow: 0 6px 18px var(--shadow);
}
button.primary:hover { filter: brightness(1.08); }
button.ghost { background: var(--button-ghost-bg); backdrop-filter: blur(14px); color: var(--button-ghost-text); border: 1px solid var(--glass-border); }
button.ghost:hover { color: var(--ink); }
button.primary:active, button.ghost:active, .tab:active {
  background: var(--button-pressed-bg);
  color: var(--button-pressed-text);
  border-color: var(--button-pressed-border);
}
button:focus-visible, input:focus-visible, textarea:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--focus-color); outline-offset: 2px;
}
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* 单条错题卡片及其状态信息。 / Individual mistake cards and their status details. */
.card {
  position: relative;
  padding: 22px 48px 22px 24px;
  margin-bottom: 18px;
  border-radius: 24px;
}
.card::before {
  content: "";
  position: absolute;
  left: 12px; top: 22px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--tab-color, var(--gold));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tab-color, var(--gold)) 25%, transparent);
}
.card h2 {
  font-family: "Source Serif 4", serif;
  font-size: 1.12rem;
  margin: 0 0 4px;
  padding-left: 22px;
}
.card .meta {
  padding-left: 22px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.issue-receipt {
  padding-left: 22px;
  margin: -6px 0 12px;
  font-size: 0.75rem;
}
.issue-receipt a { color: var(--red); text-decoration: none; }
.issue-receipt a:hover { text-decoration: underline; }
.issue-receipt.pending { color: var(--ink-soft); }
.card p.q {
  padding-left: 22px;
  margin: 0 0 14px;
  white-space: pre-wrap;
  font-size: 0.93rem;
  line-height: 1.6;
}
.card .answer {
  margin-left: 22px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 16px;
  font-size: 0.9rem;
  white-space: pre-wrap;
  line-height: 1.55;
}
.card .answer strong { font-family: "Source Serif 4", serif; }
.learned {
  margin: 14px 0 0 22px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  color: var(--ink-soft);
  cursor: pointer;
  font: 600 0.78rem "Inter", sans-serif;
}
.learned:hover, .learned.active { background: var(--gold); color: #fff; }
.remove {
  position: absolute;
  right: 14px; top: 16px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--ink-soft);
  font-size: 1rem; cursor: pointer;
  line-height: 1;
  width: 28px; height: 28px;
  border-radius: 50%;
}
.remove:hover { color: var(--red); }

.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 54px 20px;
  font-family: "Source Serif 4", serif;
  font-style: italic;
  border-radius: 24px;
}
.count { text-align: center; color: var(--ink-soft); font-size: 0.78rem; margin: -20px 0 24px; letter-spacing: 0.06em; }

/* 打印时隐藏交互控件并移除玻璃效果。 / Hide interactive controls and glass effects when printing. */
@media print {
  body { background: white; }
  .slip, .tabs, .remove { display: none; }
  .glass, .card { backdrop-filter: none; background: white; box-shadow: none; border-color: #ccc; }
}
/* 固定在安全区域内的圆形主题按钮。 / Circular theme button fixed inside the safe area. */
.theme-toggle {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  z-index: 10;
}