:root {
  --ink: #132435;
  --ink-soft: #536877;
  --muted: #80919b;
  --blue: #2377c9;
  --blue-deep: #175ca2;
  --aqua: #1aa9ab;
  --mint: #dbf3ec;
  --sky: #e7f2ff;
  --paper: rgba(255, 255, 255, 0.58);
  --paper-strong: rgba(255, 255, 255, 0.76);
  --line: rgba(255, 255, 255, 0.76);
  --shadow: 0 16px 42px rgba(42, 85, 105, 0.12), 0 2px 7px rgba(32, 70, 84, 0.05);
  --radius-xl: 30px;
  --radius-lg: 23px;
  --radius-md: 17px;
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: #dcecf1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  position: relative;
  isolation: isolate;
  width: min(100%, 470px);
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(246, 251, 251, 0.91), rgba(226, 241, 246, 0.9) 48%, rgba(236, 245, 241, 0.94)),
    #e4f1f2;
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.36), transparent 33%, rgba(255,255,255,.2));
}

.ambient {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .82;
}

.ambient-a {
  width: 380px;
  height: 380px;
  top: -140px;
  right: -170px;
  background: radial-gradient(circle at 35% 35%, rgba(137, 215, 248, .72), rgba(137, 215, 248, 0) 70%);
}

.ambient-b {
  width: 340px;
  height: 340px;
  top: 330px;
  left: -220px;
  background: radial-gradient(circle at 55% 42%, rgba(154, 235, 213, .7), rgba(154, 235, 213, 0) 68%);
}

.ambient-c {
  width: 260px;
  height: 260px;
  right: -130px;
  bottom: 70px;
  background: radial-gradient(circle, rgba(185, 189, 255, .42), rgba(185, 189, 255, 0) 68%);
}

.noise {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.app-header {
  position: relative;
  z-index: 2;
  min-height: 82px;
  padding: calc(15px + env(safe-area-inset-top)) 22px 8px;
}

.app-main {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 168px);
  padding: 0 18px calc(112px + var(--safe-bottom));
  animation: page-in .34s ease both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.glass-panel,
.glass-card {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.39));
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(24px) saturate(138%);
  backdrop-filter: blur(24px) saturate(138%);
}

.glass-panel { border-radius: 26px; }
.glass-card { border-radius: var(--radius-lg); }

.app-header-inner,
.header-title-row,
.page-title-row,
.profile-top,
.card-heading,
.list-row,
.message-row,
.section-heading,
.hero-meta,
.practice-top,
.practice-actions,
.option-row,
.profile-menu-row {
  display: flex;
  align-items: center;
}

.app-header-inner { justify-content: space-between; }

.settings-header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; min-height: 38px; }
.settings-header-side { display: grid; place-items: center; }
.settings-header-title { text-align: center; }
.settings-header-title strong, .settings-header-title small { display: block; }
.settings-header-title strong { color: var(--ink); font-size: 15px; letter-spacing: -.02em; }
.settings-header-title small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.02em;
}

.brand-symbol {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: white;
  border-radius: 11px;
  background: linear-gradient(150deg, #45c8d4, #256ac1);
  box-shadow: 0 5px 14px rgba(35, 119, 201, .25), inset 0 1px 0 rgba(255,255,255,.7);
}

.brand-symbol .icon { width: 18px; height: 18px; }

.header-actions { display: flex; gap: 9px; }
.profile-header-actions { gap: 7px; }
.theme-toggle-button { color: #2d789c; background: linear-gradient(145deg, rgba(224,247,247,.82), rgba(226,237,255,.72)); }
.theme-toggle-button .icon { width: 18px; height: 18px; }

.icon-button,
.circle-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(255,255,255,.43);
  box-shadow: 0 5px 14px rgba(40, 83, 99, .08);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform .18s ease, background .18s ease;
}

.icon-button:active,
.circle-button:active,
.quick-action:active,
.primary-button:active,
.tabbar-item:active { transform: scale(.96); }
.icon-button:hover, .circle-button:hover { background: rgba(255,255,255,.7); }

.icon { display: inline-grid; flex: 0 0 auto; width: 20px; height: 20px; place-items: center; color: inherit; }
.icon svg { display: block; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
button .icon { pointer-events: none; }

.eyebrow {
  margin: 13px 0 7px;
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 31px; line-height: 1.12; letter-spacing: -.055em; }
h2 { font-size: 23px; line-height: 1.18; letter-spacing: -.04em; }
h3 { font-size: 16px; line-height: 1.25; letter-spacing: -.02em; }
.subtle { color: var(--ink-soft); }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.welcome-line { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.welcome-copy { min-width: 0; }
.welcome-copy p { margin-top: 9px; color: var(--ink-soft); font-size: 14px; }

.avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 17px;
  background: linear-gradient(145deg, #55c8d0, #3f79c5 65%, #5b5ec2);
  box-shadow: 0 8px 18px rgba(52, 115, 155, .2);
}

.section { margin-top: 28px; }
.section-heading { justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.section-heading h2 { font-size: 19px; }
.section-heading a,
.text-button { color: var(--blue-deep); font-size: 12px; font-weight: 730; text-decoration: none; border: 0; background: none; cursor: pointer; }

.home-start-card { margin-top: 26px; }
.data-empty { display: flex; flex-direction: column; align-items: center; padding: 28px 20px; color: var(--muted); text-align: center; border: 1px dashed rgba(110,153,164,.28); border-radius: 21px; background: rgba(255,255,255,.35); }
.data-empty .empty-icon { display: grid; width: 40px; height: 40px; place-items: center; color: #477f95; border-radius: 14px; background: #dceff4; }
.data-empty .empty-icon .icon { width: 19px; height: 19px; }
.data-empty strong { margin-top: 12px; color: var(--ink-soft); font-size: 14px; }
.data-empty p { max-width: 260px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.data-empty .primary-button { min-width: 140px; margin-top: 15px; }

.continue-card {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 193px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding: 22px 20px 20px 22px;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 90% 15%, rgba(176,249,255,.44), transparent 33%),
    radial-gradient(circle at -5% 115%, rgba(124,197,255,.38), transparent 42%),
    linear-gradient(140deg, #163d6c, #147eaf 58%, #35b9b0);
  box-shadow: 0 20px 38px rgba(28, 94, 122, .23), inset 0 1px 0 rgba(255,255,255,.35);
}

.continue-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -93px;
  bottom: -124px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(255,255,255,.07), 0 0 0 34px rgba(255,255,255,.04);
}

.continue-copy { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.card-kicker { margin-bottom: 9px; color: rgba(225, 249, 255, .78); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.continue-copy h2 { max-width: none; font-size: 22px; color: #fff; }
.continue-copy p { margin-top: 8px; color: rgba(232, 249, 255, .78); font-size: 12px; }
.continue-button { display: inline-flex; align-items: center; gap: 5px; margin-top: 17px; padding: 9px 12px; color: #134b70; font-size: 12px; font-weight: 780; border: 0; border-radius: 999px; background: rgba(255,255,255,.9); cursor: pointer; box-shadow: 0 5px 14px rgba(3, 62, 105, .18); }
.continue-button .icon { width: 13px; height: 13px; }

.progress-orb {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  width: 93px;
  height: 93px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#fff 0 72%, rgba(255,255,255,.19) 72% 100%);
  box-shadow: 0 6px 18px rgba(2, 61, 95, .17), inset 0 1px 0 rgba(255,255,255,.6);
}

.progress-orb::before { content: ""; width: 75px; height: 75px; border-radius: 50%; background: rgba(25, 123, 157, .88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.progress-value { position: absolute; text-align: center; }
.progress-value strong { display: block; font-size: 22px; letter-spacing: -.05em; }
.progress-value span { display: block; margin-top: 1px; color: rgba(232, 250, 255, .74); font-size: 9px; }

.metric-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.metric { padding: 13px 8px 12px; text-align: center; border-radius: 18px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.63); box-shadow: 0 7px 18px rgba(54, 91, 103, .045); }
.metric strong { display: block; color: var(--ink); font-size: 18px; letter-spacing: -.04em; }
.metric span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.quick-action { min-width: 0; padding: 12px 5px 11px; color: var(--ink); text-align: center; border: 1px solid rgba(255,255,255,.73); border-radius: 19px; background: rgba(255,255,255,.45); box-shadow: 0 9px 17px rgba(54, 91, 103, .06); cursor: pointer; transition: transform .18s ease, background .18s ease; }
.quick-action:hover { background: rgba(255,255,255,.68); }
.quick-action .quick-icon { display: grid; width: 32px; height: 32px; margin: 0 auto 8px; place-items: center; color: var(--blue-deep); border-radius: 12px; background: linear-gradient(145deg, rgba(220,244,252,.95), rgba(196,233,231,.65)); }
.quick-action:nth-child(2) .quick-icon { color: #b35d2c; background: linear-gradient(145deg, #fff0dc, #fce0bd); }
.quick-action:nth-child(3) .quick-icon { color: #547a4b; background: linear-gradient(145deg, #e3f5db, #ccead6); }
.quick-action:nth-child(4) .quick-icon { color: #7554aa; background: linear-gradient(145deg, #f0e8ff, #ddd4ff); }
.quick-action .icon { width: 17px; height: 17px; }
.quick-action span:last-child { display: block; overflow: hidden; font-size: 11px; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }

.route-card { display: flex; align-items: center; gap: 13px; padding: 15px 14px; border-radius: 19px; background: rgba(255,255,255,.44); border: 1px solid rgba(255,255,255,.68); box-shadow: 0 10px 23px rgba(54,91,103,.055); }
.route-icon { display: grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; color: var(--blue-deep); border-radius: 14px; background: linear-gradient(145deg, #e1f5fa, #cbebea); }
.route-icon .icon { width: 19px; height: 19px; }
.route-card-copy { min-width: 0; flex: 1; }
.route-card-copy strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.route-card-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.route-card .chevron { color: #91a9b1; }
.route-card + .route-card { margin-top: 9px; }

.page-title-row { justify-content: space-between; gap: 14px; padding-top: 15px; }
.page-title-row h1 { font-size: 30px; }
.title-actions { display: flex; gap: 8px; }

.theme-mode-options { display: flex; gap: 7px; margin-top: 11px; }
.theme-mode-option { flex: 1; min-height: 33px; padding: 7px 8px; color: var(--muted); font-size: 10px; font-weight: 750; border: 1px solid rgba(126,161,171,.2); border-radius: 11px; background: rgba(255,255,255,.34); cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.theme-mode-option:active { transform: scale(.97); }
.theme-mode-option.is-active { color: var(--blue-deep); border-color: rgba(66,163,184,.34); background: linear-gradient(135deg, rgba(221,247,245,.94), rgba(222,235,255,.86)); box-shadow: 0 5px 11px rgba(50,121,144,.1); }

.settings-page { padding-top: 10px; padding-bottom: 20px; }
.settings-page-intro { padding: 4px 4px 0; }
.settings-page-intro h1 { margin-top: 5px; font-size: 27px; letter-spacing: -.045em; }
.settings-page-intro p { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.search-bar { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: 21px; padding: 0 14px; border: 1px solid rgba(255,255,255,.75); border-radius: 17px; background: rgba(255,255,255,.52); box-shadow: 0 9px 22px rgba(52,94,112,.06); }
.search-bar .icon { color: #78919d; width: 18px; height: 18px; }
.search-bar input { width: 100%; min-width: 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 13px; }
.search-bar input::placeholder { color: #91a2a8; }

.segmented { display: flex; gap: 5px; margin: 20px 0 18px; padding: 4px; border-radius: 14px; background: rgba(166,198,205,.22); }
.segment { flex: 1; height: 31px; color: var(--ink-soft); font-size: 11px; font-weight: 700; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.segment.is-active { color: var(--ink); background: rgba(255,255,255,.75); box-shadow: 0 4px 10px rgba(52,94,112,.08); }

.study-hero { position: relative; overflow: hidden; padding: 19px 19px 18px; color: #fff; border-radius: var(--radius-lg); background: linear-gradient(136deg, rgba(31,97,151,.98), rgba(34,159,176,.9)); box-shadow: 0 17px 30px rgba(28,98,126,.2); }
.study-hero::after { content: ""; position: absolute; right: -30px; bottom: -50px; width: 170px; height: 170px; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; box-shadow: 0 0 0 15px rgba(255,255,255,.07), 0 0 0 32px rgba(255,255,255,.05); }
.study-hero h2 { position: relative; z-index: 1; font-size: 20px; }
.study-hero p { position: relative; z-index: 1; max-width: 270px; margin-top: 7px; color: rgba(238,250,255,.78); font-size: 12px; line-height: 1.55; }
.hero-meta { position: relative; z-index: 1; gap: 13px; margin-top: 17px; color: rgba(238,250,255,.83); font-size: 11px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hero-meta .icon { width: 14px; height: 14px; }

.role-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 18px 0 2px; padding: 5px; border: 1px solid rgba(255,255,255,.62); border-radius: 18px; background: rgba(166,198,205,.2); }
.role-switch-button { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 7px 12px; color: var(--ink-soft); text-align: left; border: 0; border-radius: 13px; background: transparent; cursor: pointer; }
.role-switch-button span { font-size: 13px; font-weight: 800; }
.role-switch-button small { color: var(--muted); font-size: 10px; }
.role-switch-button.is-active { color: var(--ink); background: rgba(255,255,255,.76); box-shadow: 0 5px 12px rgba(52,94,112,.08); }
.role-switch-button.is-active small { color: #5c8190; }

.subject-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.subject-card { position: relative; min-height: 116px; padding: 15px; overflow: hidden; text-align: left; cursor: pointer; border: 1px solid rgba(255,255,255,.76); border-radius: 21px; background: rgba(255,255,255,.49); box-shadow: 0 9px 19px rgba(54,91,103,.055); transition: transform .18s ease, background .18s ease; }
.subject-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.7); }
.subject-card::after { content: ""; position: absolute; right: -20px; bottom: -34px; width: 100px; height: 100px; border: 1px solid rgba(60,145,177,.12); border-radius: 50%; box-shadow: 0 0 0 10px rgba(60,145,177,.04); }
.subject-card .subject-symbol { display: grid; width: 30px; height: 30px; place-items: center; color: #2c7ea5; border-radius: 11px; background: #d9f0f1; }
.subject-card:nth-child(2) .subject-symbol { color: #9b6834; background: #f7e8d2; }
.subject-card:nth-child(3) .subject-symbol { color: #5e8b55; background: #e0f1db; }
.subject-card:nth-child(4) .subject-symbol { color: #8065af; background: #eee5fa; }
.subject-card .icon { width: 16px; height: 16px; }
.subject-card .subject-role { position: relative; z-index: 1; display: block; margin-top: 10px; color: #5c8190; font-size: 10px; font-weight: 760; }
.subject-card strong { display: block; position: relative; z-index: 1; margin-top: 12px; font-size: 13px; }
.subject-card small { display: block; position: relative; z-index: 1; margin-top: 5px; color: var(--muted); font-size: 10px; }
.category-card { min-height: 151px; }
.category-card strong { margin-top: 9px; }
.category-entry { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--blue-deep); font-size: 10px; font-weight: 800; }
.category-entry .icon { width: 13px; height: 13px; }

.empty-state { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 28px 20px; color: var(--muted); text-align: center; border: 1px dashed rgba(110,153,164,.28); border-radius: 21px; background: rgba(255,255,255,.35); }
.empty-state strong { color: var(--ink-soft); font-size: 13px; }
.empty-state span:last-child { max-width: 230px; font-size: 11px; line-height: 1.55; }
.empty-icon { display: grid; width: 34px; height: 34px; place-items: center; color: #477f95; border-radius: 12px; background: #dceff4; }
.empty-icon .icon { width: 17px; height: 17px; }

.question-list { overflow: hidden; border-radius: 21px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.69); box-shadow: 0 9px 19px rgba(54,91,103,.05); }
.question-row { display: flex; align-items: start; gap: 11px; padding: 14px 14px; cursor: pointer; transition: background .18s ease; }
.question-row + .question-row { border-top: 1px solid rgba(114,156,166,.14); }
.question-row:hover { background: rgba(255,255,255,.45); }
.question-index { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; color: var(--blue-deep); font-size: 10px; font-weight: 800; border-radius: 9px; background: #dceff7; }
.question-copy { min-width: 0; flex: 1; }
.question-copy strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.55; }
.question-copy span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.question-row > .icon { flex: 0 0 auto; margin-top: 4px; color: #91a8b0; width: 16px; height: 16px; }

.circle-banner { display: flex; align-items: center; justify-content: space-between; min-height: 151px; gap: 10px; padding: 20px; overflow: hidden; color: #fff; border-radius: var(--radius-xl); background: linear-gradient(140deg, #254b79, #287da2 58%, #49b9aa); box-shadow: 0 17px 30px rgba(28,98,126,.2); }
.circle-banner-copy { max-width: 235px; }
.circle-banner h2 { color: #fff; font-size: 23px; }
.circle-banner p { margin-top: 9px; color: rgba(238,250,255,.78); font-size: 12px; line-height: 1.55; }
.orbit-art { position: relative; flex: 0 0 auto; width: 115px; height: 115px; }
.orbit-art::before, .orbit-art::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; transform: rotate(28deg) scaleX(1.6); }
.orbit-art::after { inset: 22px; transform: rotate(-34deg) scaleX(1.55); }
.orbit-core { position: absolute; top: 35px; left: 37px; display: grid; width: 42px; height: 42px; place-items: center; color: #2c7791; border-radius: 50%; background: rgba(237,255,253,.92); box-shadow: 0 0 0 10px rgba(220,255,255,.11), 0 9px 17px rgba(0,44,86,.17); }
.orbit-core .icon { width: 20px; height: 20px; }
.feed-card { padding: 16px; border-radius: 21px; background: rgba(255,255,255,.47); border: 1px solid rgba(255,255,255,.73); box-shadow: 0 9px 19px rgba(54,91,103,.05); }
.feed-card + .feed-card { margin-top: 10px; }
.feed-head { display: flex; align-items: center; gap: 10px; }
.feed-avatar { display: grid; width: 33px; height: 33px; place-items: center; color: #fff; font-size: 11px; font-weight: 800; border-radius: 12px; background: linear-gradient(145deg, #e49f61, #a9628a); }
.feed-avatar.green { background: linear-gradient(145deg, #64bd9b, #4e7f9e); }
.feed-avatar.purple { background: linear-gradient(145deg, #a18ae1, #557cba); }
.feed-user { flex: 1; }
.feed-user strong { display: block; font-size: 12px; }
.feed-user small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.feed-card > p { margin: 13px 0 14px 43px; color: #405864; font-size: 13px; line-height: 1.65; }
.feed-actions { display: flex; gap: 17px; margin-left: 43px; color: #7a929a; font-size: 10px; }
.feed-actions span { display: inline-flex; align-items: center; gap: 4px; }
.feed-actions .icon { width: 14px; height: 14px; }
.feed-action { display: inline-flex; align-items: center; gap: 4px; padding: 0; color: inherit; border: 0; background: transparent; cursor: pointer; }
.feed-action:hover { color: var(--blue); }
.detail-card { margin-top: 18px; }
.comment-list { overflow: hidden; border-radius: 19px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.7); }
.comment-row { display: flex; gap: 10px; padding: 13px; }
.comment-row + .comment-row { border-top: 1px solid rgba(114,156,166,.14); }
.comment-copy { min-width: 0; flex: 1; }
.comment-copy strong { display: block; font-size: 11px; }
.comment-copy p { margin-top: 5px; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.comment-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.comment-compose { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.comment-compose input, .composer-card textarea { flex: 1; min-width: 0; padding: 11px 12px; color: var(--ink); border: 1px solid rgba(134,175,183,.3); border-radius: 14px; outline: none; background: rgba(255,255,255,.62); }
.composer-card { padding: 15px; border-radius: 22px; }
.composer-card textarea { display: block; width: 100%; min-height: 145px; resize: vertical; line-height: 1.6; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.compact-button { min-height: 36px; padding: 0 12px; }
.search-submit-row { display: flex; justify-content: flex-end; margin-top: 11px; }
.chat-detail-list { min-height: 240px; padding: 12px; border-radius: 22px; background: rgba(255,255,255,.39); border: 1px solid rgba(255,255,255,.68); }
.chat-bubble-row { display: flex; justify-content: flex-start; margin: 7px 0; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble { max-width: 78%; padding: 10px 12px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; border-radius: 15px 15px 15px 5px; background: rgba(255,255,255,.75); }
.chat-bubble-row.mine .chat-bubble { color: #fff; border-radius: 15px 15px 5px 15px; background: linear-gradient(145deg, #287fc8, #3bb4b1); }
.chat-bubble small { display: block; margin-top: 4px; color: rgba(83,104,119,.65); font-size: 9px; }
.chat-bubble-row.mine .chat-bubble small { color: rgba(255,255,255,.72); }

.unread-dot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; vertical-align: middle; border-radius: 50%; background: #e46b5f; box-shadow: 0 0 0 3px rgba(228,107,95,.12); }
.live-status { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; padding: 4px 7px; color: #3b7d83; font-size: 9px; font-weight: 720; border-radius: 999px; background: rgba(224,247,242,.7); }
.live-status .icon { width: 10px; height: 10px; }
.source-status { display: inline-flex; align-items: center; gap: 4px; color: #5a8588; font-size: 10px; font-weight: 720; }
.source-status .icon { width: 12px; height: 12px; }
.message-list { overflow: hidden; border-radius: 22px; background: rgba(255,255,255,.43); border: 1px solid rgba(255,255,255,.71); box-shadow: 0 9px 19px rgba(54,91,103,.05); }
.auth-empty { display: flex; flex-direction: column; align-items: center; padding: 30px 18px 28px; text-align: center; }
.auth-empty-icon { display: grid; width: 46px; height: 46px; place-items: center; color: #4d8191; border-radius: 16px; background: #dff1f1; }
.auth-empty-icon .icon { width: 22px; height: 22px; }
.auth-empty strong { margin-top: 13px; font-size: 14px; }
.auth-empty p { max-width: 230px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.auth-empty .primary-button { width: 170px; margin-top: 16px; }
.practice-empty { padding-top: 18px; }
.message-row { align-items: flex-start; gap: 12px; padding: 15px; cursor: pointer; }
.message-row + .message-row { border-top: 1px solid rgba(114,156,166,.14); }
.message-avatar { position: relative; display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; color: #fff; font-size: 13px; font-weight: 800; border-radius: 16px; background: linear-gradient(145deg, #49bfc4, #4776bf); }
.message-avatar.orange { background: linear-gradient(145deg, #efb66d, #c76d67); }
.message-avatar.purple { background: linear-gradient(145deg, #aa8de7, #6378ba); }
.message-avatar.gray { background: linear-gradient(145deg, #9dadb7, #6e839a); }
.message-avatar .online { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid #f2f8f7; border-radius: 50%; background: #50ba85; }
.message-copy { min-width: 0; flex: 1; }
.message-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.message-line strong { font-size: 13px; }
.message-line time { flex: 0 0 auto; color: #9aa9ae; font-size: 10px; }
.message-copy p { overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; color: #fff; font-size: 9px; font-weight: 800; border-radius: 999px; background: #e27263; }

.profile-top { align-items: flex-start; gap: 13px; padding: 18px; border-radius: 25px; }
.profile-top .avatar { width: 57px; height: 57px; border-radius: 20px; font-size: 17px; }
.profile-copy { min-width: 0; flex: 1; padding-top: 2px; }
.profile-copy h2 { font-size: 20px; }
.profile-copy p { margin-top: 6px; color: var(--muted); font-size: 11px; }
.profile-copy .identity { display: inline-flex; align-items: center; gap: 4px; margin-top: 11px; padding: 5px 8px; color: #2b7390; font-size: 10px; font-weight: 750; border-radius: 999px; background: #dcf0f0; }
.profile-copy .identity .icon { width: 12px; height: 12px; }
.profile-progress { flex: 0 0 auto; text-align: right; }
.profile-progress strong { display: block; color: var(--blue-deep); font-size: 19px; }
.profile-progress span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 9px; }
.profile-stat { padding: 13px 6px; text-align: center; border-radius: 17px; background: rgba(255,255,255,.43); border: 1px solid rgba(255,255,255,.69); }
.profile-stat strong { display: block; font-size: 17px; letter-spacing: -.04em; }
.profile-stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.progress-summary { padding: 15px; border-radius: 21px; }
.progress-summary .section-heading { margin-bottom: 11px; }
.progress-summary-note { margin-top: 11px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.learning-hero { margin-top: 18px; }
.learning-question-list .question-row { width: 100%; text-align: left; border: 0; }
.report-stats { margin-top: 18px; }
.report-row { cursor: default; }
.exam-result-card { margin-top: 18px; padding: 24px 18px; text-align: center; border-radius: 26px; }
.exam-result-card h1 { margin-top: 8px; font-size: 25px; }
.exam-result-card > p { margin-top: 9px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.exam-score { display: grid; width: 128px; height: 128px; margin: 22px auto 18px; place-content: center; border-radius: 50%; background: linear-gradient(145deg, #287fc8, #3cb7b0); color: #fff; box-shadow: 0 14px 28px rgba(39,128,176,.2); }
.exam-score strong { font-size: 31px; letter-spacing: -.05em; }
.exam-score span { margin-top: 3px; color: rgba(255,255,255,.78); font-size: 10px; }
.membership-card { position: relative; overflow: hidden; margin-top: 17px; padding: 18px; color: #fff; border-radius: 22px; background: linear-gradient(135deg, #1b375f, #3a5f9c 55%, #5b7bc1); box-shadow: 0 15px 27px rgba(47,73,128,.2); }
.membership-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -50px; top: -70px; border: 1px solid rgba(255,255,255,.21); border-radius: 50%; box-shadow: 0 0 0 12px rgba(255,255,255,.05), 0 0 0 25px rgba(255,255,255,.04); }
.membership-card .member-label { display: inline-flex; align-items: center; gap: 5px; position: relative; z-index: 1; color: #ffeeb7; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.membership-card .member-label .icon { width: 13px; height: 13px; }
.membership-card h3 { position: relative; z-index: 1; margin-top: 10px; color: #fff; font-size: 17px; }
.membership-card p { position: relative; z-index: 1; margin-top: 6px; color: rgba(235,244,255,.7); font-size: 11px; }
.membership-card button { position: absolute; z-index: 1; right: 16px; bottom: 16px; padding: 7px 10px; color: #193b65; font-size: 10px; font-weight: 800; border: 0; border-radius: 999px; background: #f5e5b6; cursor: pointer; }
.profile-menu { overflow: hidden; margin-top: 17px; border-radius: 21px; background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 9px 19px rgba(54,91,103,.05); }
.profile-menu-row { gap: 12px; padding: 15px; cursor: pointer; transition: background .18s ease; }
.profile-menu-row + .profile-menu-row { border-top: 1px solid rgba(114,156,166,.14); }
.profile-menu-row:hover { background: rgba(255,255,255,.45); }
.menu-icon { display: grid; width: 31px; height: 31px; place-items: center; color: var(--blue-deep); border-radius: 11px; background: #e1f2f6; }
.profile-menu-row:nth-child(2) .menu-icon { color: #9b6834; background: #f7e8d2; }
.profile-menu-row:nth-child(3) .menu-icon { color: #5e8b55; background: #e0f1db; }
.profile-menu-row:nth-child(4) .menu-icon { color: #8065af; background: #eee5fa; }
.menu-icon .icon { width: 16px; height: 16px; }
.profile-menu-row strong { flex: 1; font-size: 12px; }
.profile-menu-row > .icon { color: #9aaeb4; width: 16px; height: 16px; }

.settings-title .text-button { display: inline-flex; align-items: center; gap: 5px; }
.settings-title .text-button .icon { width: 15px; height: 15px; }
.settings-hero { display: flex; align-items: center; gap: 13px; margin-top: 16px; padding: 17px; border-radius: 24px; }
.settings-hero-icon { display: grid; flex: 0 0 auto; width: 46px; height: 46px; place-items: center; color: #287ca8; border: 1px solid rgba(255,255,255,.82); border-radius: 16px; background: linear-gradient(145deg, rgba(220,248,248,.9), rgba(222,235,255,.84)); box-shadow: inset 0 1px 0 rgba(255,255,255,.82); }
.settings-hero-icon .icon { width: 24px; height: 24px; }
.settings-hero h2 { font-size: 17px; }
.settings-hero p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.settings-section { margin-top: 18px; }
.settings-section-label { margin: 0 0 8px 4px; color: var(--blue-deep); font-size: 10px; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }
.settings-card { overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 21px; background: rgba(255,255,255,.46); box-shadow: 0 9px 19px rgba(54,91,103,.05); }
.settings-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 14px; color: var(--ink); }
.settings-row + .settings-row { border-top: 1px solid rgba(114,156,166,.14); }
.settings-row-button { text-align: left; border: 0; background: transparent; cursor: pointer; transition: background .18s ease; }
.settings-row-button:hover { background: rgba(255,255,255,.42); }
.settings-row-column { align-items: flex-start; }
.settings-icon { display: grid; flex: 0 0 auto; width: 33px; height: 33px; place-items: center; color: #4c85a0; border-radius: 12px; background: #e0f2f4; }
.settings-icon .icon { width: 17px; height: 17px; }
.settings-icon-aqua { color: #398a9a; background: #e0f4ef; }
.settings-icon-green { color: #5c8d63; background: #e4f2dc; }
.settings-icon-purple { color: #7a66a5; background: #eee8fb; }
.settings-copy { min-width: 0; flex: 1; }
.settings-copy strong { display: block; font-size: 12px; line-height: 1.3; }
.settings-copy > span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.settings-copy small { display: block; margin-top: 4px; color: #9b7c60; font-size: 9px; line-height: 1.4; }
.settings-toggle { position: relative; display: block; flex: 0 0 auto; width: 43px; height: 26px; padding: 3px; border-radius: 99px; background: #bdcbd0; box-shadow: inset 0 1px 2px rgba(43,76,87,.14); transition: background .2s ease; }
.settings-toggle::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(31,70,84,.18); transition: transform .2s ease; }
.settings-toggle.is-on { background: linear-gradient(135deg, #36bcae, #2780c4); }
.settings-toggle.is-on::after { transform: translateX(17px); }
.settings-chevron { display: grid; flex: 0 0 auto; place-items: center; color: #9aaeb4; }
.settings-chevron .icon { width: 16px; height: 16px; }
.font-size-options { display: flex; gap: 7px; margin-top: 11px; }
.font-size-option { flex: 1; min-height: 34px; color: var(--ink-soft); font-size: 11px; font-weight: 760; border: 1px solid rgba(134,175,183,.28); border-radius: 11px; background: rgba(255,255,255,.52); cursor: pointer; }
.font-size-option.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #287fc7, #35adae); box-shadow: 0 5px 12px rgba(42,124,160,.17); }
.settings-version { color: #91a4aa; font-size: 10px; }
.settings-about { margin: 10px 4px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

.practice-view { padding-top: 8px; }
.practice-top { justify-content: space-between; gap: 10px; }
.practice-top-copy { min-width: 0; }
.practice-top-copy h1 { font-size: 23px; }
.practice-top-copy p { margin-top: 6px; color: var(--muted); font-size: 11px; }
.practice-progress { color: var(--blue-deep); font-size: 12px; font-weight: 780; }
.practice-progress span { color: var(--muted); font-weight: 600; }
.practice-header-left { display: inline-flex; align-items: center; gap: 7px; }
.practice-settings-button { color: #287e9d; background: rgba(226,247,245,.8); }
.practice-mode-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: #287b9b; font-size: 10px; font-weight: 780; border: 1px solid rgba(91,177,188,.22); border-radius: 999px; background: rgba(225,246,246,.75); }
.practice-mode-badge.is-study { color: #547c9c; border-color: rgba(111,142,192,.22); background: rgba(234,239,254,.77); }
.practice-mode-badge .icon { width: 12px; height: 12px; }
.thin-progress { height: 5px; margin-top: 18px; overflow: hidden; border-radius: 99px; background: rgba(117,166,180,.18); }
.thin-progress i { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2879c8, #46c0bb); }
.question-paper { margin-top: 16px; padding: 20px 17px 18px; touch-action: pan-y; border-radius: 25px; background: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.86); box-shadow: 0 13px 28px rgba(54,91,103,.09); }
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.question-meta .type { padding: 5px 8px; color: #2d7691; font-weight: 750; border-radius: 999px; background: #dceff1; }
.question-meta .icon-button { width: 31px; height: 31px; color: #77909b; box-shadow: none; }
.question-stem { margin-top: 20px; color: var(--ink); font-size: 19px; font-weight: 700; line-height: 1.56; letter-spacing: -.03em; }
.question-ask { display: block; margin-top: 15px; padding-top: 14px; color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.56; border-top: 1px solid rgba(114,156,166,.17); }
.question-inline-image { display: block; width: 100%; max-height: 360px; margin: 12px auto 4px; object-fit: contain; border-radius: 13px; background: rgba(226,241,245,.58); cursor: zoom-in; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.image-preview-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(9, 24, 36, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: sheet-in .18s ease both; }
.image-preview-panel { position: relative; display: flex; align-items: center; justify-content: center; width: min(100%, 470px); height: min(86vh, 760px); }
.image-preview-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.35); user-select: none; -webkit-user-drag: none; }
.image-preview-close { position: absolute; z-index: 1; top: -10px; right: -4px; color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(13,38,53,.58); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
body.image-preview-open { overflow: hidden; }
.question-note { margin-top: 8px; color: var(--muted); font-size: 11px; }
.options { margin-top: 20px; }
.option-row { width: 100%; gap: 10px; min-height: 53px; padding: 11px 12px; text-align: left; cursor: pointer; border: 1px solid rgba(138,173,181,.25); border-radius: 16px; background: rgba(255,255,255,.4); transition: .18s ease; }
.option-row + .option-row { margin-top: 9px; }
.option-row:hover { border-color: rgba(39,125,182,.42); background: rgba(235,249,252,.68); }
.option-letter { display: grid; flex: 0 0 auto; width: 27px; height: 27px; place-items: center; color: var(--ink-soft); font-size: 11px; font-weight: 800; border: 1px solid rgba(129,160,169,.32); border-radius: 9px; background: rgba(255,255,255,.55); }
.option-row p { color: #344e5a; font-size: 12px; line-height: 1.45; }
.option-row .question-inline-image { max-height: 180px; margin: 7px 0 2px; }
.option-row.is-selected { border-color: #58b9c4; background: linear-gradient(135deg, rgba(225,249,248,.95), rgba(224,241,255,.78)); box-shadow: 0 6px 15px rgba(52,144,166,.1); }
.option-row.is-selected .option-letter { color: #fff; border-color: transparent; background: linear-gradient(145deg, #2399a7, #357bc3); }
.option-row.is-correct { border-color: #5cbf8a; background: #e4f6e9; }
.option-row.is-correct .option-letter { color: #fff; border-color: transparent; background: #53b77c; }
.option-row.is-wrong { border-color: #e68c7d; background: #fff0ec; }
.option-row.is-wrong .option-letter { color: #fff; border-color: transparent; background: #dc796c; }
.option-row.is-study-option { cursor: default; }
.option-row.is-study-option:hover { border-color: #5cbf8a; background: #e4f6e9; }
.answer-explain { margin-top: 15px; padding: 13px 14px; color: #426452; font-size: 11px; line-height: 1.6; border: 1px solid #c9e7d0; border-radius: 15px; background: #eff9ef; }
.answer-explain strong { display: block; margin-bottom: 4px; color: #38704c; }
.answer-explain.is-study { border-color: rgba(107,166,204,.28); background: linear-gradient(135deg, #edf8f3, #eef5ff); }
.answer-explain .question-inline-image { max-height: 300px; margin-top: 10px; }
.practice-actions { justify-content: space-between; gap: 10px; margin-top: 16px; }
.practice-navigation { display: grid; grid-template-columns: .88fr 1.22fr; gap: 10px; margin-top: 16px; }
.practice-navigation .secondary-button, .practice-navigation .primary-button { width: 100%; }
.practice-navigation button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.secondary-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 45px; padding: 0 16px; font-size: 12px; font-weight: 760; border-radius: 15px; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.secondary-button { flex: 0 0 auto; color: var(--ink-soft); border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.53); }
.primary-button { flex: 1; color: #fff; border: 1px solid rgba(255,255,255,.45); background: linear-gradient(135deg, #2475c3, #29a8ac); box-shadow: 0 9px 17px rgba(42,124,160,.2); }
.secondary-button .icon, .primary-button .icon { width: 16px; height: 16px; }
.practice-footnote { margin-top: 18px; color: #8aa0a6; font-size: 10px; text-align: center; }

.bank-version-list, .catalog-list { display: grid; gap: 10px; }
.bank-version-card { display: flex; align-items: center; gap: 11px; width: 100%; padding: 14px; text-align: left; color: var(--ink); border: 1px solid rgba(255,255,255,.75); border-radius: 19px; background: rgba(255,255,255,.48); box-shadow: 0 8px 18px rgba(54,91,103,.05); cursor: pointer; }
.bank-version-card:hover, .question-row:hover { background: rgba(255,255,255,.72); }
.bank-version-icon, .catalog-hero-icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; color: var(--blue-deep); border-radius: 13px; background: linear-gradient(145deg, #e2f5f4, #e4ecff); }
.bank-version-icon .icon, .catalog-hero-icon .icon { width: 19px; height: 19px; }
.bank-version-copy { min-width: 0; flex: 1; }
.bank-version-copy strong, .bank-version-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-version-copy strong { font-size: 12px; }
.bank-version-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.catalog-hero { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 16px; border-radius: 22px; }
.catalog-hero > div:not(.catalog-hero-icon) { min-width: 0; flex: 1; }
.catalog-hero strong { font-size: 13px; }
.catalog-hero p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.catalog-total { display: grid; flex: 0 0 auto; color: var(--blue-deep); font-size: 21px; font-weight: 800; text-align: right; }
.catalog-total small { margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 650; }
.catalog-filter-row { display: flex; gap: 7px; margin-top: 14px; overflow-x: auto; padding-bottom: 2px; }
.catalog-filter-row .compact-button { white-space: nowrap; }
.catalog-filter-row .is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #277dc5, #35adae); }
.catalog-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.catalog-mode-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; color: var(--muted); text-align: left; border: 1px solid rgba(255,255,255,.75); border-radius: 17px; background: rgba(255,255,255,.42); box-shadow: 0 6px 15px rgba(54,91,103,.035); cursor: pointer; transition: .2s ease; }
.catalog-mode-card > span:nth-child(2) { min-width: 0; flex: 1; }
.catalog-mode-card strong, .catalog-mode-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-mode-card strong { color: var(--ink-soft); font-size: 11px; }
.catalog-mode-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.catalog-mode-card > .icon { flex: 0 0 auto; width: 13px; color: #a5b6bb; }
.catalog-mode-card.is-active { color: var(--blue-deep); border-color: rgba(89,181,189,.35); background: linear-gradient(135deg, rgba(231,250,247,.88), rgba(235,242,255,.72)); box-shadow: 0 8px 17px rgba(54,128,145,.08), inset 0 1px 0 rgba(255,255,255,.95); }
.catalog-mode-card.is-active strong { color: var(--blue-deep); }
.catalog-mode-icon { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; color: #3b92a0; border-radius: 10px; background: rgba(255,255,255,.7); }
.catalog-mode-icon .icon { width: 15px; height: 15px; }
.catalog-knowledge-list-wrap { display: grid; gap: 9px; }
.catalog-knowledge-group { padding: 13px 14px 7px; border-radius: 20px; background: rgba(255,255,255,.48); }
.catalog-knowledge-head { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; }
.catalog-knowledge-head > div { min-width: 0; flex: 1; }
.catalog-knowledge-head strong, .catalog-knowledge-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-knowledge-head strong { color: var(--ink); font-size: 12px; }
.catalog-knowledge-head small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.catalog-knowledge-list { margin-top: 0; border-top: 1px solid rgba(114,156,166,.13); }
.catalog-knowledge-list .knowledge-row { min-height: 38px; }
.chapter-subtitle { margin: 9px 0 3px; color: #70939c; font-size: 9px; font-weight: 760; letter-spacing: .03em; }
.question-path { max-width: 230px; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.catalog-chapter { padding: 15px; border: 1px solid rgba(255,255,255,.73); border-radius: 21px; background: rgba(255,255,255,.47); box-shadow: 0 8px 18px rgba(54,91,103,.04); }
.catalog-chapter + .catalog-chapter { margin-top: 10px; }
.catalog-chapter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-chapter-head h3 { margin-top: 3px; font-size: 15px; }
.catalog-chapter-head p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.knowledge-list { margin-top: 13px; padding-top: 9px; border-top: 1px solid rgba(114,156,166,.14); }
.knowledge-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; color: var(--muted); font-size: 10px; }
.knowledge-row strong { color: var(--ink-soft); font-weight: 760; }
.local-question-row .question-copy strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.local-question-row .question-copy span { margin-top: 4px; }
.pager-row { display: flex; justify-content: center; gap: 9px; margin-top: 14px; }
.pager-row button:disabled { opacity: .42; cursor: not-allowed; }
.practice-top-right { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; }
.practice-top-right .practice-progress { line-height: 1; }
.question-tool-actions { display: flex; gap: 7px; margin-top: 13px; padding: 7px; border: 1px solid rgba(255,255,255,.7); border-radius: 15px; background: rgba(238,248,250,.54); }
.question-tool { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1; min-height: 31px; color: var(--muted); font-size: 10px; font-weight: 720; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.question-tool .icon { width: 15px; height: 15px; }
.question-tool.is-active { color: var(--blue-deep); background: rgba(255,255,255,.7); box-shadow: 0 4px 10px rgba(48,105,126,.08); }
.question-meta .icon-button.is-active { color: #287bb7; background: #e0f2f5; }
.question-note-editor { margin-top: 12px; padding: 11px; border: 1px solid #bcdede; border-radius: 15px; background: rgba(233,250,248,.7); }
.question-note-editor textarea { display: block; width: 100%; min-height: 82px; padding: 10px; color: var(--ink); font-size: 11px; line-height: 1.55; border: 1px solid rgba(114,166,172,.28); border-radius: 11px; outline: none; resize: vertical; background: rgba(255,255,255,.7); }
.question-note-editor > div { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }
.question-comments { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(114,156,166,.15); }
.question-comments h3 { font-size: 13px; }
.question-comment-list { display: grid; gap: 10px; margin-top: 10px; }
.question-comment-row { display: flex; align-items: flex-start; gap: 8px; }
.question-comment-row > div:last-child { min-width: 0; flex: 1; }
.question-comment-row strong { font-size: 10px; }
.question-comment-row p { margin-top: 3px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.question-comment-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.answer-sheet-backdrop { position: fixed; z-index: 16; inset: 0; background: rgba(17,38,52,.26); backdrop-filter: blur(5px); }
.answer-sheet-panel { position: fixed; z-index: 17; right: max(13px, calc((100vw - 470px) / 2 + 13px)); bottom: calc(83px + var(--safe-bottom)); left: max(13px, calc((100vw - 470px) / 2 + 13px)); max-height: min(70vh, 520px); padding: 17px; overflow-y: auto; border-radius: 25px; animation: sheet-in .22s ease both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.answer-sheet-panel h2 { font-size: 17px; }
.answer-sheet-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 12px; }
.answer-sheet-stat { padding: 9px 4px 8px; text-align: center; border: 1px solid rgba(255,255,255,.72); border-radius: 13px; background: rgba(255,255,255,.44); }
.answer-sheet-stat strong, .answer-sheet-stat span { display: block; }
.answer-sheet-stat strong { color: var(--ink); font-size: 16px; line-height: 1.05; }
.answer-sheet-stat span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.answer-sheet-legend { display: flex; gap: 12px; margin: 13px 0; color: var(--muted); font-size: 10px; }
.answer-sheet-legend span { display: inline-flex; align-items: center; gap: 5px; }
.answer-sheet-legend i { display: block; width: 9px; height: 9px; border: 1px solid rgba(138,173,181,.35); border-radius: 3px; background: rgba(255,255,255,.62); }
.answer-sheet-legend i.is-correct { border-color: #5cbf8a; background: #e4f6e9; }
.answer-sheet-legend i.is-wrong { border-color: #e68c7d; background: #fff0ec; }
.answer-sheet-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.answer-sheet-item { position: relative; display: grid; min-height: 46px; place-items: center; color: var(--ink-soft); font-size: 11px; font-weight: 760; border: 1px solid rgba(138,173,181,.25); border-radius: 12px; background: rgba(255,255,255,.52); cursor: pointer; }
.answer-sheet-item small { color: var(--muted); font-size: 8px; font-weight: 700; }
.answer-sheet-item.is-current { outline: 2px solid rgba(39,125,182,.6); outline-offset: 1px; }
.answer-sheet-item.is-correct { border-color: #5cbf8a; background: #e4f6e9; }
.answer-sheet-item.is-wrong { border-color: #e68c7d; background: #fff0ec; }
.practice-settings-backdrop { position: fixed; z-index: 30; inset: 0; background: rgba(17,38,52,.3); backdrop-filter: blur(6px); }
.practice-settings-sheet { position: fixed; z-index: 31; right: max(13px, calc((100vw - 470px) / 2 + 13px)); bottom: calc(12px + var(--safe-bottom)); left: max(13px, calc((100vw - 470px) / 2 + 13px)); max-height: min(77vh, 590px); padding: 17px; overflow-y: auto; border-radius: 25px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(232,247,247,.88)); box-shadow: 0 20px 48px rgba(25,63,79,.22); animation: sheet-in .22s ease both; }
.practice-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.practice-settings-heading h2 { margin-top: 3px; font-size: 18px; }
.practice-setting-group { margin-top: 16px; }
.practice-setting-label { display: block; margin: 0 2px 8px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .05em; }
.practice-mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.practice-mode-choice { min-height: 75px; padding: 12px; color: var(--ink-soft); text-align: left; border: 1px solid rgba(129,170,181,.24); border-radius: 16px; background: rgba(255,255,255,.52); cursor: pointer; transition: .18s ease; }
.practice-mode-choice strong, .practice-mode-choice small { display: block; }
.practice-mode-choice strong { font-size: 13px; }
.practice-mode-choice small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.practice-mode-choice.is-active { color: #176da6; border-color: rgba(54,148,183,.5); background: linear-gradient(135deg, rgba(225,247,245,.94), rgba(226,239,255,.85)); box-shadow: inset 0 1px rgba(255,255,255,.9), 0 7px 15px rgba(46,127,155,.1); }
.practice-mode-choice.is-active small { color: #4a879d; }
.practice-auto-next { width: 100%; border-radius: 16px; }
.practice-settings-note, .practice-gesture-hint { margin: 16px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.practice-gesture-hint { margin-top: 15px; color: #6f929a; text-align: center; }
.practice-dialog-backdrop { position: fixed; z-index: 40; inset: 0; background: rgba(17,38,52,.34); backdrop-filter: blur(7px); }
.practice-dialog { position: fixed; z-index: 41; right: max(15px, calc((100vw - 470px) / 2 + 15px)); bottom: calc(16px + var(--safe-bottom)); left: max(15px, calc((100vw - 470px) / 2 + 15px)); padding: 19px; border-radius: 25px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,247,247,.9)); box-shadow: 0 22px 52px rgba(20,56,74,.28); animation: sheet-in .22s ease both; }
.practice-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.practice-dialog-heading h2 { margin-top: 3px; font-size: 19px; }
.practice-dialog > p { margin: 12px 2px 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.practice-dialog-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 9px; margin-top: 19px; }
.practice-dialog-actions .secondary-button, .practice-dialog-actions .primary-button, .random-practice-start { width: 100%; }
.random-count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 17px; }
.random-count-choice { min-height: 64px; padding: 8px; color: var(--ink-soft); border: 1px solid rgba(113,156,169,.2); border-radius: 15px; background: rgba(255,255,255,.55); cursor: pointer; }
.random-count-choice strong, .random-count-choice small { display: block; }
.random-count-choice strong { color: var(--ink); font-size: 15px; }
.random-count-choice small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.random-count-choice.is-active { color: #176da6; border-color: rgba(42,139,183,.54); background: linear-gradient(135deg, rgba(224,246,245,.96), rgba(227,238,255,.88)); box-shadow: inset 0 1px rgba(255,255,255,.85), 0 7px 15px rgba(44,124,153,.1); }
.random-count-choice.is-active strong { color: #176da6; }
.random-practice-start { margin-top: 14px; }
.report-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.report-action-grid .secondary-button:last-child { grid-column: 1 / -1; }
.record-score { flex: 0 0 auto; color: var(--blue-deep); font-size: 11px; font-weight: 800; }
.record-detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 17px; }
.record-detail-hero strong { font-size: 14px; }
.record-detail-hero p { margin-top: 5px; color: var(--muted); font-size: 10px; }
.status-dot { display: block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #c9d7da; }
.status-dot.is-correct { background: #57b77d; }
.status-dot.is-wrong { background: #dc796c; }

/* Refined iOS-style surface pass: quieter contrast, stronger hierarchy, less
   decorative chrome. These selectors belong to the rebuilt home and catalog
   flows and intentionally override the earlier exploratory styling above. */
.home-date {
  margin-bottom: 7px;
  color: #6f8995;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .02em;
}
.welcome-copy h1 { font-size: 30px; }
.home-start-card { margin-top: 21px; }
.continue-card {
  min-height: 176px;
  margin-top: 0;
  padding: 21px 19px 20px 20px;
  color: var(--ink);
  border-color: rgba(255,255,255,.86);
  background:
    radial-gradient(circle at 90% 8%, rgba(178, 236, 248, .5), transparent 32%),
    radial-gradient(circle at 5% 110%, rgba(192, 238, 222, .48), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(230,246,247,.66) 58%, rgba(226,240,255,.7));
  box-shadow: 0 18px 34px rgba(47, 99, 118, .13), inset 0 1px 0 rgba(255,255,255,.95);
}
.continue-card::after {
  right: -82px;
  bottom: -126px;
  border-color: rgba(75, 158, 181, .16);
  box-shadow: 0 0 0 16px rgba(75,158,181,.055), 0 0 0 34px rgba(75,158,181,.035);
}
.card-kicker { color: #4b94a4; letter-spacing: .06em; }
.continue-copy h2 { max-width: 220px; color: var(--ink); font-size: 21px; }
.continue-copy p { max-width: 240px; color: var(--ink-soft); line-height: 1.45; }
.continue-button {
  margin-top: 15px;
  color: #fff;
  background: linear-gradient(135deg, #2a86c5, #2baaa9);
  box-shadow: 0 7px 15px rgba(42, 128, 165, .18);
}
.hero-navigation {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  place-items: center;
  color: #368ba2;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(210,239,244,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 9px 20px rgba(74,132,148,.09);
}
.hero-navigation::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(87, 165, 182, .16);
  border-radius: 18px;
}
.hero-navigation .icon { position: relative; width: 30px; height: 30px; }
.metric-strip { margin-top: 10px; }
.metric { padding: 12px 7px 11px; background: rgba(255,255,255,.52); }
.metric strong { font-size: 17px; }
.quick-action { padding-top: 13px; background: rgba(255,255,255,.52); }
.quick-action .quick-icon { width: 30px; height: 30px; margin-bottom: 7px; }
.logbook-entry {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 14px;
  color: var(--ink);
  text-align: left;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 19px;
  background: rgba(255,255,255,.48);
  box-shadow: 0 9px 19px rgba(54,91,103,.05);
  cursor: pointer;
}
.logbook-symbol {
  display: grid;
  flex: 0 0 auto;
  width: 37px;
  height: 37px;
  place-items: center;
  color: #3c8d9b;
  border-radius: 13px;
  background: linear-gradient(145deg, #e0f5f2, #e5effc);
}
.logbook-symbol .icon { width: 18px; height: 18px; }
.logbook-entry > span:nth-child(2) { min-width: 0; flex: 1; }
.logbook-entry strong, .logbook-entry small { display: block; }
.logbook-entry strong { font-size: 12px; }
.logbook-entry small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.logbook-entry > .icon { flex: 0 0 auto; width: 16px; color: #9aadb4; }
.library-intro { margin-top: 12px; color: var(--ink-soft); font-size: 12px; }
.library-badge {
  align-self: flex-end;
  padding: 6px 9px;
  color: #3b8297;
  font-size: 10px;
  font-weight: 760;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  background: rgba(232,248,247,.72);
}
.catalog-overview {
  margin-top: 16px;
  padding: 17px;
  border-radius: 23px;
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(230,246,245,.48));
}
.catalog-overline { color: #4c94a2; font-size: 10px; font-weight: 760; }
.catalog-overview-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; }
.catalog-overview-line strong { color: var(--ink); font-size: 25px; letter-spacing: -.05em; }
.catalog-overview-line strong small { margin-left: 4px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: 0; }
.catalog-overview-line > span { color: var(--muted); font-size: 11px; }
.catalog-overview .thin-progress { margin-top: 13px; }
.catalog-overview .primary-button { min-height: 40px; margin-top: 14px; }
.catalog-list { gap: 9px; }
.catalog-chapter {
  padding: 0;
  overflow: hidden;
  border-color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.5);
  box-shadow: 0 7px 16px rgba(54,91,103,.045);
}
.catalog-chapter summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 13px 14px;
  list-style: none;
  cursor: pointer;
}
.catalog-chapter summary::-webkit-details-marker { display: none; }
.catalog-chapter summary > .icon { flex: 0 0 auto; width: 16px; color: #99adb4; transition: transform .2s ease; }
.catalog-chapter[open] summary > .icon { transform: rotate(90deg); }
.chapter-number {
  display: grid;
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  place-items: center;
  color: #3d8a98;
  font-size: 10px;
  font-weight: 820;
  border-radius: 12px;
  background: linear-gradient(145deg, #e2f5f3, #e5effc);
}
.chapter-copy { min-width: 0; flex: 1; }
.chapter-copy strong, .chapter-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-copy strong { color: var(--ink); font-size: 13px; }
.chapter-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.chapter-content { padding: 0 14px 13px 60px; border-top: 1px solid rgba(114,156,166,.14); }
.chapter-content > .text-button { display: inline-flex; align-items: center; gap: 5px; margin: 11px 0 4px; font-size: 11px; }
.chapter-content > .text-button .icon { width: 14px; height: 14px; }
.chapter-content .knowledge-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 37px;
  padding: 8px 0;
  color: var(--ink-soft);
  text-align: left;
  font-size: 11px;
  border: 0;
  border-top: 1px solid rgba(114,156,166,.11);
  background: transparent;
  cursor: pointer;
}
.chapter-content .knowledge-row span { min-width: 0; flex: 1; }
.chapter-content .knowledge-row small { color: var(--muted); font-size: 9px; }
.chapter-content .knowledge-row .icon { flex: 0 0 auto; width: 14px; color: #a3b4ba; }
.chapter-content .knowledge-row:hover { color: var(--blue-deep); }
.catalog-caption { margin: 11px 3px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.catalog-filter-row .compact-button { min-height: 35px; padding: 0 12px; font-size: 10px; }
.catalog-filter-row .compact-button.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #287fc5, #32a9ab); }
.practice-top-right .secondary-button { min-height: 32px; padding: 0 10px; font-size: 10px; }
.question-paper { background: rgba(255,255,255,.72); box-shadow: 0 14px 30px rgba(54,91,103,.08); }
.answer-sheet-panel { background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(233,247,247,.83)); }

.login-title { margin-bottom: 16px; }
.login-hero { display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: 23px; background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(226,247,246,.55)); }
.login-hero-orb { display: grid; flex: 0 0 auto; width: 45px; height: 45px; place-items: center; color: #23829b; border: 1px solid rgba(255,255,255,.86); border-radius: 16px; background: linear-gradient(145deg, rgba(220,249,246,.92), rgba(233,239,252,.88)); box-shadow: 0 8px 18px rgba(65,137,157,.12), inset 0 1px 0 rgba(255,255,255,.9); }
.login-hero-orb .icon { width: 22px; height: 22px; }
.login-hero strong { display: block; color: var(--ink); font-size: 14px; letter-spacing: -.02em; }
.login-hero p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.login-mode-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin: 15px 0 10px; padding: 5px; border: 1px solid rgba(255,255,255,.75); border-radius: 16px; background: rgba(223,241,242,.46); }
.login-mode-button { min-height: 35px; padding: 0 3px; color: var(--muted); font-size: 10px; font-weight: 760; border: 0; border-radius: 12px; background: transparent; cursor: pointer; transition: .2s ease; }
.login-mode-button.is-active { color: var(--blue-deep); background: rgba(255,255,255,.88); box-shadow: 0 5px 12px rgba(64,118,132,.09), inset 0 1px 0 rgba(255,255,255,.9); }
.login-card { padding: 17px; border-radius: 23px; }
.login-field { display: block; margin-top: 12px; }
.login-field:first-child { margin-top: 0; }
.login-field > span { display: block; margin: 0 0 6px 2px; color: var(--ink-soft); font-size: 10px; font-weight: 760; }
.login-field input { width: 100%; min-height: 45px; padding: 0 13px; color: var(--ink); font-size: 13px; border: 1px solid rgba(134,175,183,.28); border-radius: 14px; outline: none; background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.64); }
.login-field input::placeholder { color: #aab8bc; }
.login-field input:focus { border-color: rgba(40,137,180,.56); box-shadow: 0 0 0 3px rgba(61,168,191,.11), inset 0 1px 0 rgba(255,255,255,.8); }
.login-field input[readonly] { color: var(--muted); background: rgba(234,243,245,.52); }
.login-agreement { display: flex; align-items: center; gap: 8px; margin: 16px 1px 14px; color: var(--muted); font-size: 10px; line-height: 1.4; cursor: pointer; }
.login-agreement input { width: 15px; height: 15px; margin: 0; accent-color: #2b9da7; }
.login-submit { width: 100%; min-height: 46px; }
.login-status { margin: 11px 2px 0; color: #b06949; font-size: 10px; line-height: 1.5; }
.login-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 13px 2px 0; color: var(--muted); font-size: 10px; }
.login-footer .text-button { font-size: 10px; }
.danger-text { color: #b06949; }

body[data-font-size="small"] .question-stem { font-size: 17px; }
body[data-font-size="small"] .question-ask { font-size: 16px; }
body[data-font-size="small"] .option-row p { font-size: 11px; }
body[data-font-size="standard"] .question-stem { font-size: 19px; }
body[data-font-size="standard"] .question-ask { font-size: 18px; }
body[data-font-size="standard"] .option-row p { font-size: 12px; }
body[data-font-size="large"] .question-stem { font-size: 23px; }
body[data-font-size="large"] .question-ask { font-size: 22px; }
body[data-font-size="large"] .option-row p { font-size: 14px; }
body[data-font-size="max"] .question-stem { font-size: 27px; line-height: 1.62; }
body[data-font-size="max"] .question-ask { font-size: 26px; line-height: 1.62; }
body[data-font-size="max"] .option-row p { font-size: 16px; line-height: 1.55; }
body.in-settings .app-main { padding-bottom: calc(28px + var(--safe-bottom)); }

.tabbar { position: fixed; z-index: 10; right: max(12px, calc((100vw - 470px) / 2 + 12px)); bottom: max(11px, env(safe-area-inset-bottom)); left: max(12px, calc((100vw - 470px) / 2 + 12px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 8px 7px 7px; border-radius: 23px; background: rgba(246, 253, 253, .65); box-shadow: 0 13px 35px rgba(36, 73, 91, .18), inset 0 1px 0 rgba(255,255,255,.9); }
.tabbar[hidden] { display: none; }
.tabbar-item { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 4px; padding: 5px 2px 4px; color: #8a9ca2; font-size: 10px; font-weight: 660; border: 0; border-radius: 16px; background: transparent; cursor: pointer; transition: .2s ease; }
.tabbar-item .tabbar-icon { display: grid; width: 27px; height: 24px; place-items: center; border-radius: 10px; transition: .2s ease; }
.tabbar-item .icon { width: 17px; height: 17px; }
.tabbar-item.is-active { color: var(--blue-deep); }
.tabbar-item.is-active .tabbar-icon { color: #fff; background: linear-gradient(145deg, #2882ce, #32b2b4); box-shadow: 0 5px 12px rgba(35,120,187,.2); }
.has-badge::after { content: ""; position: absolute; top: 3px; left: calc(50% + 6px); width: 6px; height: 6px; border: 2px solid rgba(246,253,253,.85); border-radius: 50%; background: #e36f63; }

.toast { position: fixed; z-index: 20; right: 50%; bottom: calc(95px + var(--safe-bottom)); max-width: calc(100% - 40px); padding: 10px 14px; color: #fff; font-size: 12px; opacity: 0; pointer-events: none; border-radius: 13px; background: rgba(19,36,53,.86); box-shadow: 0 8px 22px rgba(0,0,0,.16); transform: translate(50%, 12px); transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(50%, 0); }

/* Older Android WebView builds struggle with several simultaneous backdrop
   filters. The APK marks its document with android-test so the same glass
   surfaces remain translucent without blocking the render thread. */
html.android-test .glass-panel,
html.android-test .glass-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(235,249,249,.82));
}
html.android-test .icon-button,
html.android-test .circle-button,
html.android-test .tabbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(246,253,253,.9);
}
html.android-test .answer-sheet-backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.android-test .noise { display: none; }
html.android-test .ambient { display: none; }
html.android-test .app-main { animation: none; }
html.android-test .icon-button,
html.android-test .circle-button,
html.android-test .quick-action,
html.android-test .subject-card,
html.android-test .question-row,
html.android-test .settings-row-button,
html.android-test .option-row,
html.android-test .primary-button,
html.android-test .tabbar-item,
html.android-test .toast { transition: none; }

@media (min-width: 471px) {
  body { padding: 18px 0; background: #cfe3e9; }
  .app-shell { min-height: calc(100svh - 36px); border-radius: 34px; box-shadow: 0 24px 70px rgba(33,72,91,.16); }
  .tabbar { bottom: max(24px, env(safe-area-inset-bottom)); }
}

@media (max-width: 350px) {
  .app-main { padding-right: 14px; padding-left: 14px; }
  .continue-card { padding-left: 17px; }
  .progress-orb { width: 81px; height: 81px; }
  .progress-orb::before { width: 65px; height: 65px; }
  .quick-action { padding-right: 2px; padding-left: 2px; }
  .quick-action span:last-child { font-size: 10px; }
}

/* 航迹视觉重构：内容是主角，玻璃只留给导航和关键控件。 */
:root {
  --ink: #172434;
  --ink-soft: #5f7180;
  --muted: #8b9ba5;
  --blue: #1678c5;
  --blue-deep: #0d5fa6;
  --aqua: #16a6a1;
  --line: rgba(103, 132, 148, .16);
  --shadow: 0 10px 24px rgba(35, 67, 83, .07);
  --radius-xl: 26px;
  --radius-lg: 19px;
  --radius-md: 14px;
}

body { background: #dfe9ee; }
.app-shell {
  background:
    radial-gradient(circle at 100% 0, rgba(207, 239, 246, .62), transparent 34%),
    radial-gradient(circle at 0 42%, rgba(224, 243, 237, .58), transparent 35%),
    #f5f8fa;
}
.app-shell::before { background: linear-gradient(180deg, rgba(255,255,255,.6), transparent 38%); }
.ambient { opacity: .22; filter: blur(18px); }
.noise { display: none; }
.app-header { min-height: 76px; padding: calc(13px + env(safe-area-inset-top)) 21px 6px; }
.app-main { min-height: calc(100svh - 150px); padding: 0 20px calc(104px + var(--safe-bottom)); }
.app-header-inner { min-height: 42px; }
.brand-mark { gap: 8px; color: var(--ink); font-size: 18px; font-weight: 780; letter-spacing: -.045em; }
.brand-logo { display: block; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(20, 112, 164, .15)); }
.brand-symbol { display: none; }
.live-status { margin-left: 3px; padding: 4px 7px; color: #31827f; font-size: 9px; font-weight: 730; border: 0; background: rgba(217, 241, 235, .72); }
.live-status .icon { width: 10px; height: 10px; }
.welcome-line { margin-top: 19px; }
.home-date { margin-bottom: 8px; color: #7b8d99; font-size: 11px; font-weight: 680; }
.welcome-copy h1 { font-size: 34px; letter-spacing: -.065em; }
.welcome-copy p { margin-top: 10px; color: #6f818c; font-size: 13px; }
.eyebrow { margin: 11px 0 7px; color: #1777b4; font-size: 10px; letter-spacing: .13em; }
.section { margin-top: 26px; }
.section-heading { margin-bottom: 10px; }
.section-heading h2 { color: var(--ink); font-size: 18px; letter-spacing: -.04em; }

.home-start-card { margin-top: 20px; }
.continue-card {
  min-height: 156px;
  padding: 20px 18px 18px 20px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 24px;
  background:
    radial-gradient(circle at 91% 8%, rgba(180, 235, 244, .72), transparent 32%),
    linear-gradient(138deg, rgba(255,255,255,.9), rgba(232,247,247,.72) 62%, rgba(227,238,253,.74));
  box-shadow: 0 14px 30px rgba(54, 99, 117, .095), inset 0 1px 0 rgba(255,255,255,.98);
}
.continue-card::after { right: -90px; bottom: -136px; opacity: .55; }
.card-kicker { color: #25859b; font-size: 10px; letter-spacing: .07em; }
.continue-copy h2 { max-width: 220px; color: var(--ink); font-size: 20px; }
.continue-copy p { max-width: 230px; color: var(--ink-soft); font-size: 11px; line-height: 1.48; }
.continue-button { margin-top: 14px; padding: 8px 11px; color: #fff; font-size: 11px; background: linear-gradient(135deg, #167bc5, #16a7aa); box-shadow: 0 6px 14px rgba(28, 126, 168, .18); }
.hero-navigation { width: 64px; height: 64px; border-radius: 21px; opacity: .78; }
.hero-navigation::before { inset: 8px; border-radius: 16px; }
.hero-navigation .icon { width: 27px; height: 27px; }

.metric-strip { gap: 0; margin-top: 17px; padding: 13px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric { padding: 2px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric strong { color: var(--ink); font-size: 18px; }
.metric span { margin-top: 3px; color: #8798a2; font-size: 10px; }

.quick-grid { grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick-action { display: flex; align-items: center; gap: 10px; min-height: 59px; padding: 11px 4px; text-align: left; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.quick-action:nth-child(even) { border-left: 1px solid var(--line); padding-left: 12px; }
.quick-action:nth-child(n+3) { border-top: 1px solid var(--line); }
.quick-action:hover { background: rgba(255,255,255,.32); }
.quick-action .quick-icon { flex: 0 0 auto; width: 31px; height: 31px; margin: 0; border-radius: 11px; }
.quick-action span:last-child { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.logbook-entry { padding: 14px 2px; border: 0; border-radius: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; box-shadow: none; }
.logbook-symbol { width: 34px; height: 34px; border-radius: 11px; }

.page-title-row { padding-top: 12px; }
.page-title-row h1 { font-size: 32px; }
.library-intro { margin-top: 10px; color: var(--ink-soft); font-size: 12px; }
.library-badge { padding: 5px 8px; color: #397c91; border: 1px solid rgba(76, 157, 170, .2); background: rgba(222, 245, 242, .62); }
.search-bar { height: 44px; margin-top: 18px; border: 1px solid rgba(103,132,148,.15); border-radius: 14px; background: rgba(255,255,255,.64); box-shadow: 0 7px 18px rgba(47,91,108,.045); }
.role-switch { margin: 16px 0 1px; padding: 3px; border: 1px solid rgba(103,132,148,.12); border-radius: 15px; background: rgba(215,229,234,.42); }
.role-switch-button { min-height: 38px; padding: 6px 11px; border-radius: 11px; }
.role-switch-button.is-active { background: rgba(255,255,255,.82); box-shadow: 0 4px 10px rgba(52,94,112,.06); }
.subject-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.subject-card { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; align-items: center; min-height: 66px; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.subject-card:hover { transform: none; background: rgba(255,255,255,.26); }
.subject-card::after { display: none; }
.subject-card .subject-symbol { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 10px; }
.subject-card .subject-role { grid-column: 2; grid-row: 1; margin: 0 0 2px 10px; color: #7d939f; font-size: 9px; }
.subject-card strong { grid-column: 2; grid-row: 2; margin: 0 0 0 10px; font-size: 13px; }
.subject-card small { grid-column: 3; grid-row: 1 / span 2; margin: 0 17px 0 10px; font-size: 10px; text-align: right; }
.subject-card .category-entry { grid-column: 4; grid-row: 1 / span 2; color: #a0afb5; }
.subject-card .category-entry .icon { width: 15px; }
.bank-version-list, .catalog-list { gap: 0; border-top: 1px solid var(--line); }
.bank-version-card { padding: 13px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.bank-version-card:hover, .question-row:hover { background: rgba(255,255,255,.28); }
.catalog-hero, .catalog-overview, .catalog-knowledge-group, .catalog-chapter, .progress-summary, .profile-top, .settings-hero { border: 1px solid rgba(103,132,148,.12); background: rgba(255,255,255,.58); box-shadow: var(--shadow); }
.catalog-hero { border-radius: 18px; }
.catalog-chapter { padding: 13px 2px; border-right: 0; border-left: 0; border-radius: 0; background: transparent; box-shadow: none; }
.catalog-chapter + .catalog-chapter { margin-top: 0; }

.profile-top { padding: 13px 0 15px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.profile-stats { gap: 0; margin-top: 12px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-stat { padding: 2px 6px; border: 0; border-radius: 0; background: transparent; }
.profile-stat + .profile-stat { border-left: 1px solid var(--line); }
.profile-menu { margin-top: 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.profile-menu-row { min-height: 57px; padding: 12px 2px; }
.profile-menu-row + .profile-menu-row { border-top: 1px solid var(--line); }
.profile-menu-row:hover { background: rgba(255,255,255,.28); }
.menu-icon { width: 30px; height: 30px; border-radius: 10px; }
.progress-summary { padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.learning-hero { margin-top: 14px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.settings-page-intro h1 { font-size: 30px; }
.settings-section { margin-top: 22px; }
.settings-section-label { margin-left: 2px; color: #728793; font-size: 9px; letter-spacing: .1em; }
.settings-card { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.settings-row { min-height: 61px; padding: 12px 2px; }
.settings-row + .settings-row { border-top: 1px solid var(--line); }
.settings-row-button:hover { background: rgba(255,255,255,.28); }
.settings-icon { width: 31px; height: 31px; border-radius: 10px; }

.tabbar { right: max(16px, calc((100vw - 470px) / 2 + 16px)); bottom: max(12px, env(safe-area-inset-bottom)); left: max(16px, calc((100vw - 470px) / 2 + 16px)); padding: 6px 6px 5px; border: 1px solid rgba(255,255,255,.86); border-radius: 21px; background: rgba(249,253,254,.68); box-shadow: 0 12px 30px rgba(42,76,91,.14), inset 0 1px 0 rgba(255,255,255,.96); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); }
.tabbar-item { gap: 3px; padding: 5px 2px 3px; color: #84959e; font-size: 10px; }
.tabbar-item .tabbar-icon { width: 29px; height: 23px; border-radius: 9px; }
.tabbar-item.is-active .tabbar-icon { background: rgba(20, 121, 190, .92); box-shadow: 0 5px 12px rgba(35,120,187,.16); }

html.android-test .tabbar { background: rgba(249,253,254,.95); }
html.android-test .continue-card { background: linear-gradient(138deg, rgba(255,255,255,.96), rgba(232,247,247,.92) 62%, rgba(227,238,253,.92)); }

/* 账号资料与学习天梯：保持内容优先的轻量层级，不再引入大面积卡片。 */
.avatar, .profile-avatar-picker { overflow: hidden; padding: 0; cursor: pointer; }
.avatar img, .profile-edit-avatar img, .leaderboard-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-top .avatar { border: 0; }
.profile-edit-panel { margin-top: 18px; padding: 21px 18px 19px; border: 1px solid rgba(103,132,148,.14); border-radius: 21px; background: rgba(255,255,255,.58); box-shadow: var(--shadow); }
.profile-avatar-picker { position: relative; display: block; width: 82px; height: 82px; margin: 0 auto; border: 0; border-radius: 28px; background: transparent; }
.profile-edit-avatar { display: grid; width: 82px; height: 82px; place-items: center; color: #fff; font-size: 24px; font-weight: 800; border: 3px solid rgba(255,255,255,.86); border-radius: 28px; background: linear-gradient(145deg, #55c8d0, #3f79c5 65%, #5b5ec2); box-shadow: 0 10px 22px rgba(52,115,155,.18); }
.profile-avatar-camera { position: absolute; right: -2px; bottom: -2px; display: grid; width: 27px; height: 27px; place-items: center; color: #fff; border: 2px solid #f5f8fa; border-radius: 50%; background: #247fc0; }
.profile-avatar-camera .icon { width: 14px; height: 14px; }
.profile-avatar-hint { margin-top: 10px; color: var(--muted); font-size: 10px; text-align: center; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Icon system: one quiet, rounded stroke language across navigation, tools,
   settings and empty states. The colored tiles stay subtle so the glyphs do
   not compete with the learning content. */
.icon svg { vector-effect: non-scaling-stroke; }
.tabbar-item .icon,
.quick-icon .icon,
.subject-symbol .icon,
.bank-version-icon .icon,
.catalog-mode-icon .icon,
.settings-icon .icon,
.menu-icon .icon,
.route-icon .icon,
.logbook-symbol .icon { stroke-width: 1.9; }
.icon-button .icon,
.question-tool .icon,
.text-button .icon,
.primary-button .icon,
.secondary-button .icon { stroke-width: 1.85; }
.quick-icon,
.subject-symbol,
.bank-version-icon,
.catalog-mode-icon,
.settings-icon,
.menu-icon,
.route-icon,
.logbook-symbol,
.empty-icon { border: 1px solid rgba(255,255,255,.64); box-shadow: inset 0 1px 0 rgba(255,255,255,.62); }
.tabbar-item.is-active .tabbar-icon { border: 1px solid rgba(255,255,255,.26); }
.account-field { display: block; margin-top: 18px; }
.account-field > span { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.account-field input { display: block; width: 100%; min-height: 45px; padding: 0 13px; color: var(--ink); font-size: 13px; border: 1px solid rgba(103,132,148,.18); border-radius: 13px; outline: 0; background: rgba(255,255,255,.72); }
.account-field input:focus { border-color: rgba(38,132,184,.52); box-shadow: 0 0 0 3px rgba(38,132,184,.1); }
.profile-save-button { width: 100%; margin-top: 21px; }
.form-status { margin-top: 11px; color: #b15f51; font-size: 11px; line-height: 1.5; text-align: center; }
.form-intro { color: var(--muted); font-size: 11px; line-height: 1.55; }
.profile-security-link { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 13px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-security-link > span:nth-child(2) { min-width: 0; flex: 1; }
.profile-security-link strong, .profile-security-link small { display: block; }
.profile-security-link strong { color: var(--ink); font-size: 12px; }
.profile-security-link small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.profile-security-link .text-button { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.profile-security-link .text-button .icon { width: 14px; height: 14px; }
.password-panel { padding-top: 17px; }
.leaderboard-intro { margin-top: 10px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.leaderboard-periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 17px; padding: 4px; border-radius: 14px; background: rgba(194,215,222,.38); }
.leaderboard-period { min-height: 34px; color: var(--muted); font-size: 11px; font-weight: 750; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.leaderboard-period.is-active { color: var(--blue-deep); background: rgba(255,255,255,.86); box-shadow: 0 4px 10px rgba(52,94,112,.08); }
.leaderboard-me { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 13px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.leaderboard-me-icon { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; color: #ad7a27; border-radius: 12px; background: #fff0ca; }
.leaderboard-me-icon .icon { width: 18px; height: 18px; }
.leaderboard-me > span:nth-child(2) { min-width: 0; flex: 1; }
.leaderboard-me small, .leaderboard-me strong { display: block; }
.leaderboard-me small { color: var(--muted); font-size: 10px; }
.leaderboard-me strong { margin-top: 3px; color: var(--ink); font-size: 20px; letter-spacing: -.04em; }
.leaderboard-me strong em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 650; letter-spacing: 0; }
.leaderboard-my-rank { flex: 0 0 auto; color: var(--blue-deep); font-size: 11px; font-weight: 800; }
.leaderboard-list { border-top: 1px solid var(--line); }
.leaderboard-row { display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.leaderboard-row.is-me { margin: 0 -5px; padding-right: 7px; padding-left: 7px; border-radius: 12px; background: rgba(224,245,244,.54); }
.leaderboard-rank { flex: 0 0 auto; width: 25px; color: #82949d; font-size: 12px; font-weight: 850; text-align: center; }
.rank-1 .leaderboard-rank { color: #c3912f; }
.rank-2 .leaderboard-rank { color: #798b9d; }
.rank-3 .leaderboard-rank { color: #ad7556; }
.leaderboard-avatar { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; overflow: hidden; color: #fff; font-size: 12px; font-weight: 800; border: 1px solid rgba(255,255,255,.8); border-radius: 13px; background: linear-gradient(145deg, #55c8d0, #467fc4); }
.leaderboard-copy { min-width: 0; flex: 1; }
.leaderboard-copy strong, .leaderboard-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-copy strong { color: var(--ink); font-size: 12px; }
.leaderboard-copy small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.leaderboard-count { flex: 0 0 auto; color: var(--blue-deep); font-size: 17px; letter-spacing: -.04em; text-align: right; }
.leaderboard-count small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: 0; }
.leaderboard-empty { display: flex; flex-direction: column; align-items: center; padding: 28px 12px; color: var(--muted); text-align: center; }
.leaderboard-empty .empty-icon { display: grid; width: 40px; height: 40px; place-items: center; color: #477f95; border-radius: 14px; background: #dceff4; }
.leaderboard-empty .empty-icon .icon { width: 19px; height: 19px; }
.leaderboard-empty strong { margin-top: 11px; color: var(--ink-soft); font-size: 13px; }
.leaderboard-empty span:last-child { margin-top: 6px; font-size: 10px; }
.leaderboard-status { margin-top: 12px; color: #b15f51; font-size: 10px; text-align: center; }

/* 题库入口分类：用轻量层级说明“先刷什么”，避免用户面对无意义的本地题库编号。 */
.bank-learning-guide { margin-top: 16px; padding: 15px; border: 1px solid rgba(255,255,255,.78); border-radius: 22px; background: linear-gradient(145deg, rgba(239,251,249,.78), rgba(241,245,255,.72)); box-shadow: 0 9px 20px rgba(54,91,103,.05); }
.bank-learning-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bank-learning-guide-head h2 { margin-top: 5px; font-size: 16px; }
.bank-learning-arrow { color: var(--blue-deep); font-size: 10px; font-weight: 800; white-space: nowrap; }
.bank-learning-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.bank-learning-step { min-width: 0; padding: 10px; border-radius: 15px; background: rgba(255,255,255,.62); }
.bank-learning-step > span { display: block; color: #6c9aa4; font-size: 9px; font-weight: 800; }
.bank-learning-step strong { display: block; margin-top: 5px; font-size: 11px; }
.bank-learning-step small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.bank-family-pill { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 5px; padding: 3px 7px; color: #2d7280; font-size: 9px; font-weight: 800; border-radius: 999px; background: #e0f4f2; }
.bank-family-pill.is-main { color: #1c6b78; background: #d9f1ed; }
.bank-family-pill.is-sprint { color: #886625; background: #fff0ce; }
.bank-family-pill.is-topic { color: #5369a1; background: #e9edff; }
@media (max-width: 360px) {
  .bank-learning-guide-grid { gap: 5px; }
  .bank-learning-step { padding: 8px; }
  .bank-learning-step small { font-size: 8px; }
}

/* Feedback center */
.feedback-intro { display: flex; align-items: flex-start; gap: 14px; padding: 18px; margin-bottom: 16px; }
.feedback-intro-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; color: var(--blue-deep); border: 1px solid rgba(40, 142, 177, .14); border-radius: 14px; background: rgba(226, 248, 249, .86); }
.feedback-intro-icon .icon { width: 20px; height: 20px; }
.feedback-intro strong { display: block; color: var(--ink); font-size: 16px; }
.feedback-intro p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.feedback-form { gap: 14px; }
.feedback-form textarea, .admin-feedback-card textarea { min-height: 126px; resize: vertical; }
.feedback-form select, .feedback-form textarea, .feedback-form input, .admin-feedback-card textarea { width: 100%; color: var(--ink); font: inherit; border: 1px solid rgba(57, 118, 145, .16); border-radius: 15px; outline: 0; background: rgba(255, 255, 255, .7); box-sizing: border-box; }
.feedback-form select, .feedback-form input, .admin-feedback-card textarea { min-height: 46px; padding: 11px 13px; }
.feedback-form textarea, .admin-feedback-card textarea { padding: 12px 13px; line-height: 1.65; }
.feedback-form select:focus, .feedback-form textarea:focus, .feedback-form input:focus, .admin-feedback-card textarea:focus { border-color: rgba(31, 143, 178, .58); box-shadow: 0 0 0 3px rgba(31, 143, 178, .1); }
.feedback-history-section { margin-top: 24px; }
.feedback-history, .admin-feedback-list { display: grid; gap: 12px; }
.feedback-card, .admin-feedback-card { padding: 16px; border: 1px solid rgba(69, 127, 148, .12); border-radius: 20px; background: rgba(255, 255, 255, .62); box-shadow: 0 8px 24px rgba(46, 101, 121, .05); }
.feedback-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.feedback-category, .feedback-status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 760; }
.feedback-category { color: var(--blue-deep); background: rgba(222, 246, 248, .88); }
.feedback-status { color: #9a6c24; background: rgba(255, 240, 206, .86); }
.feedback-status.is-replied { color: #267b66; background: rgba(220, 246, 235, .9); }
.feedback-card > strong, .admin-feedback-card > strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.45; }
.feedback-card > p, .admin-feedback-card > p { margin: 8px 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.feedback-card > small, .admin-feedback-meta { color: var(--muted); font-size: 11px; }
.feedback-reply { margin-top: 13px; padding: 12px 13px; border-left: 3px solid rgba(40, 151, 169, .52); border-radius: 0 13px 13px 0; background: rgba(226, 248, 247, .72); }
.feedback-reply > span { color: var(--blue-deep); font-size: 11px; font-weight: 760; }
.feedback-reply p { margin: 5px 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.feedback-reply small { color: var(--muted); font-size: 10px; }
.feedback-empty, .feedback-loading { padding: 25px 15px; color: var(--muted); text-align: center; font-size: 13px; }
.admin-feedback-meta { margin: 10px 0 12px; }
.admin-feedback-card textarea { display: block; min-height: 88px; margin-top: 12px; }
.admin-feedback-card .compact-button { margin-top: 10px; }

/* 章节与刷题体验：提高中文阅读密度，保留轻量玻璃层，不让卡片抢走题目。 */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

html { font-size: 16px; }
body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.52;
  letter-spacing: -.008em;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font-family: var(--font-ui); }
h1, h2, h3, strong { font-family: var(--font-display); }
.page-title-row h1 { font-size: 34px; line-height: 1.16; letter-spacing: -.055em; }
.section-heading h2 { font-size: 19px; line-height: 1.3; }
.library-intro, .catalog-caption, .question-path { font-size: 12px; line-height: 1.58; }
.subject-card strong { font-size: 14px; }
.subject-card small, .bank-version-copy small { font-size: 11px; }
.bank-version-copy strong { font-size: 14px; }

.catalog-chapter summary { min-height: 78px; padding: 15px 14px; }
.chapter-number { width: 38px; height: 38px; font-size: 11px; border-radius: 13px; }
.chapter-copy strong { font-size: 16px; line-height: 1.35; }
.chapter-copy small { margin-top: 5px; font-size: 11px; line-height: 1.4; }
.chapter-content { padding: 0 14px 15px 66px; }
.chapter-subtitle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 13px 0 4px; color: #5d8793; font-size: 11px; font-weight: 780; }
.chapter-subtitle small { color: var(--muted); font-size: 10px; font-weight: 600; }
.chapter-practice-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; margin-top: 12px; padding: 9px 11px; color: var(--blue-deep); text-align: left; border: 1px solid rgba(61,157,169,.2); border-radius: 14px; background: linear-gradient(135deg, rgba(229,249,245,.8), rgba(231,240,255,.7)); cursor: pointer; }
.chapter-practice-button span { min-width: 0; }
.chapter-practice-button strong, .chapter-practice-button small { display: block; }
.chapter-practice-button strong { font-size: 12px; }
.chapter-practice-button small { margin-top: 2px; color: #6b8790; font-size: 10px; font-weight: 500; }
.chapter-practice-button > .icon { flex: 0 0 auto; width: 16px; }
.chapter-content .knowledge-row, .catalog-knowledge-list .knowledge-row { min-height: 54px; gap: 9px; padding: 9px 0; }
.knowledge-index { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; color: #5e8e99; font-size: 10px; font-weight: 800; border-radius: 8px; background: rgba(224,243,242,.8); }
.knowledge-copy { min-width: 0; flex: 1; }
.knowledge-copy strong, .knowledge-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-copy strong { color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.knowledge-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.chapter-content .knowledge-row .icon, .catalog-knowledge-list .knowledge-row .icon { width: 16px; }
.catalog-knowledge-group { padding: 15px 15px 8px; }
.catalog-knowledge-head strong { font-size: 15px; }
.catalog-knowledge-head small { font-size: 10px; }

.question-list { border-radius: 20px; background: rgba(255,255,255,.34); }
.local-question-row { min-height: 86px; align-items: center; gap: 12px; padding: 13px 13px; }
.local-question-row + .local-question-row { border-top-color: rgba(114,156,166,.13); }
.local-question-row .question-index { width: 31px; height: 31px; font-size: 11px; border-radius: 10px; }
.local-question-row .question-copy strong { margin-top: 6px; color: var(--ink); font-size: 14px; line-height: 1.48; }
.local-question-meta { display: flex !important; align-items: center; gap: 6px; margin-top: 0 !important; }
.question-type-chip, .question-status { display: inline-flex !important; align-items: center; width: fit-content; margin-top: 0 !important; padding: 3px 7px; font-size: 10px !important; line-height: 1.2; border-radius: 999px; }
.question-type-chip { color: #337d91; background: #e2f3f2; }
.question-status { color: #84969e; background: rgba(228,236,239,.72); }
.question-status.is-correct { color: #39835b; background: #e3f5e8; }
.question-status.is-wrong { color: #b15f51; background: #ffebe6; }
.question-status.is-answered { color: #52799a; background: #e7effa; }
.question-status.is-unanswered { color: #87989e; background: #edf1f2; }

.practice-top-copy h1 { font-size: 25px; line-height: 1.25; }
.practice-top-copy p { font-size: 12px; line-height: 1.45; }
.practice-top-right { gap: 8px; }
.practice-top-right .practice-answer-sheet-inline { min-height: 35px; padding: 0 12px; font-size: 11px; color: var(--blue-deep); border-color: rgba(65,150,169,.22); background: rgba(233,249,247,.75); }
.practice-top-right .practice-answer-sheet-inline .icon { width: 15px; height: 15px; }
.practice-settings-button { color: var(--blue-deep); background: rgba(229,248,246,.82); }
.app-header { position: relative; z-index: 12; pointer-events: auto; }
.practice-settings-button {
  position: relative;
  z-index: 2;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  gap: 0;
  pointer-events: auto;
  touch-action: manipulation;
}
.practice-settings-button .icon { width: 19px; height: 19px; }
.practice-exam-countdown { display: inline-flex; align-items: center; gap: 5px; color: #b4694c; font-size: 10px; font-weight: 720; }
.practice-exam-countdown strong { color: #9c523a; font-size: 12px; letter-spacing: .02em; }
.question-paper { margin-top: 18px; padding: 22px 18px 20px; border-radius: 24px; background: rgba(255,255,255,.77); box-shadow: 0 12px 27px rgba(54,91,103,.07); }
.question-meta { font-size: 11px; }
.question-meta .type { padding: 6px 9px; }
.question-stem { margin-top: 21px; font-size: 20px; line-height: 1.62; letter-spacing: -.035em; }
.question-ask { font-size: 19px; }
.question-note { font-size: 12px; line-height: 1.55; }
.options { margin-top: 22px; }
.option-row { min-height: 58px; gap: 11px; padding: 12px 13px; border-radius: 15px; }
.option-row + .option-row { margin-top: 10px; }
.option-letter { width: 29px; height: 29px; font-size: 12px; border-radius: 9px; }
.option-row p { font-size: 14px; line-height: 1.55; }
.answer-explain { font-size: 12px; line-height: 1.68; }
.practice-footnote { font-size: 11px; line-height: 1.55; }

body[data-font-size="small"] .question-stem { font-size: 18px; }
body[data-font-size="small"] .question-ask { font-size: 17px; }
body[data-font-size="small"] .option-row p { font-size: 13px; }
body[data-font-size="standard"] .question-stem { font-size: 20px; }
body[data-font-size="standard"] .question-ask { font-size: 19px; }
body[data-font-size="standard"] .option-row p { font-size: 14px; }
body[data-font-size="large"] .question-stem { font-size: 24px; }
body[data-font-size="large"] .question-ask { font-size: 23px; }
body[data-font-size="large"] .option-row p { font-size: 16px; }
body[data-font-size="max"] .question-stem { font-size: 28px; line-height: 1.62; }
body[data-font-size="max"] .question-ask { font-size: 27px; line-height: 1.62; }
body[data-font-size="max"] .option-row p { font-size: 18px; line-height: 1.58; }

@media (max-width: 360px) {
  .page-title-row h1 { font-size: 31px; }
  .chapter-copy strong { font-size: 15px; }
  .local-question-row .question-copy strong { font-size: 13px; }
  .question-stem { font-size: 19px; }
}

/* 题目列表：让它像可读的 iOS 列表，而不是浏览器默认按钮堆叠。 */
.question-list-page { padding-top: 8px; }
.question-list-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; margin-top: 6px; }
.question-list-heading { min-width: 0; }
.question-list-heading .eyebrow { margin-top: 0; }
.question-list-heading h1 { max-width: none; color: var(--ink); font-size: clamp(25px, 7.2vw, 30px); line-height: 1.17; letter-spacing: -.06em; overflow-wrap: anywhere; }
.question-list-heading .question-path { max-width: none; margin-top: 8px; color: #80939d; font-size: 11px; line-height: 1.45; white-space: nowrap; }
.question-list-back { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 55px; min-height: 37px; margin-top: 25px; padding: 0 9px; color: var(--blue-deep); font-size: 11px; font-weight: 760; white-space: nowrap; border: 1px solid rgba(38,128,177,.16); border-radius: 999px; background: rgba(232,248,249,.76); box-shadow: 0 5px 12px rgba(48,105,126,.06); cursor: pointer; }
.question-list-back .icon { width: 15px; height: 15px; }
.question-list-toolbar { margin-top: 18px; padding: 4px; overflow: hidden; border: 1px solid rgba(103,132,148,.1); border-radius: 16px; background: rgba(221,235,239,.32); }
.question-list-toolbar .catalog-filter-row { margin-top: 0; padding: 0; }
.question-list-toolbar .compact-button { min-height: 34px; padding: 0 11px; color: #627782; border-color: transparent; background: transparent; box-shadow: none; }
.question-list-toolbar .compact-button.is-active { color: #fff; background: linear-gradient(135deg, #197dbd, #22a8a6); box-shadow: 0 5px 12px rgba(28,125,167,.16); }
.question-list-section { margin-top: 22px; }
.question-list-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.question-list-summary > div { display: inline-flex; align-items: baseline; gap: 5px; }
.question-list-summary strong { color: var(--ink); font-size: 23px; letter-spacing: -.05em; }
.question-list-summary span { color: #82939c; font-size: 12px; }
.question-list-page-count { white-space: nowrap; }
.question-list { overflow: hidden; border: 1px solid rgba(134,164,174,.16); border-radius: 22px; background: rgba(255,255,255,.54); box-shadow: 0 8px 20px rgba(51,84,99,.045); }
button.question-row { display: flex; width: 100%; min-width: 0; margin: 0; color: var(--ink); text-align: left; appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; }
button.question-row:focus-visible { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px rgba(36,126,188,.48); }
.local-question-row { min-height: 79px; gap: 12px; padding: 14px 15px; }
.local-question-row + .local-question-row { border-top: 1px solid rgba(119,151,163,.14); }
.local-question-row:hover { background: rgba(238,249,250,.55); }
.local-question-row:active { background: rgba(225,243,247,.8); }
.local-question-row .question-index { width: 32px; height: 32px; color: #1475ad; font-size: 11px; border: 1px solid rgba(81,174,199,.14); border-radius: 11px; background: linear-gradient(145deg, #e2f7fa, #d9edff); }
.local-question-row .question-copy { min-width: 0; }
.local-question-row .question-copy strong { margin-top: 7px; color: #1b2c3a; font-size: 14px; font-weight: 670; line-height: 1.48; }
.local-question-row > .icon { width: 15px; color: #9aadb4; }
.question-list-page .pager-row { margin-bottom: 8px; }
@media (max-width: 360px) {
  .question-list-header { gap: 9px; }
  .question-list-heading h1 { font-size: 24px; }
  .question-list-back { min-width: 51px; padding: 0 7px; }
  .local-question-row { padding-right: 11px; padding-left: 11px; }
  .local-question-row .question-copy strong { font-size: 13px; }
}

/* 固定底部导航下方预留完整滚动空间，避免首页快捷入口被盖住。
   这里按导航栏的真实高度再多留一段手指操作空间，避免小屏设备上
   页面已经到达滚动底部时，快捷入口仍被玻璃导航覆盖。 */
.app-main { padding-bottom: calc(194px + var(--safe-bottom)); }
body.in-practice .app-main,
body.in-settings .app-main { padding-bottom: calc(28px + var(--safe-bottom)); }

.home-page { padding-bottom: 20px; }
.home-bottom-safe-space { height: 30px; }

.practice-top-right .practice-submit-exam-button {
  min-height: 35px;
  padding: 0 12px;
  color: #fff;
  font-size: 11px;
  border: 0;
  background: linear-gradient(135deg, #0d73b6, #1aa6a5);
  box-shadow: 0 7px 15px rgba(28, 126, 171, .2);
}
.practice-top-right .practice-submit-exam-button .icon { width: 14px; height: 14px; }
.exam-submit-dialog .practice-dialog-actions .primary-button { white-space: nowrap; }
.practice-answer-sheet-setting { margin-top: 12px; }
.practice-answer-sheet-setting .settings-row { width: 100%; border-radius: 16px; }

.bank-version-card.is-locked { color: #82939b; background: rgba(233,239,241,.42); }
.bank-version-card.is-locked .bank-version-icon { color: #8d9ca3; background: rgba(225,233,236,.8); }
.bank-version-card.is-locked .bank-version-copy strong { color: #6f828c; }
.bank-access-badge { flex: 0 0 auto; padding: 4px 7px; color: #8d6c39; font-size: 9px; font-weight: 800; border: 1px solid rgba(178,145,83,.2); border-radius: 999px; background: rgba(255,243,205,.7); }
.membership-card.is-locked { background: linear-gradient(135deg, #526b7e, #7e929d); box-shadow: 0 15px 27px rgba(61,84,99,.15); }
.membership-card.is-locked .member-label { color: #e9f2f5; }
.membership-card.is-locked p { color: rgba(242,248,250,.78); }

/* 夜间模式：以深海蓝黑为底，保留航迹的蓝绿识别色。
   所有暗色都集中在这一层，避免组件各自“变黑”后出现黑底黑字或刺眼纯白。 */
body.night-mode {
  color-scheme: dark;
  --ink: #edf5f8;
  --ink-soft: #b8cbd4;
  --muted: #8299a6;
  --blue: #72c2f4;
  --blue-deep: #8bcfff;
  --aqua: #63d2cb;
  --line: rgba(157, 198, 212, .16);
  --shadow: 0 14px 32px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .16);
  --night-bg: #09131d;
  --night-surface: #14222e;
  --night-surface-soft: #101c27;
  --night-surface-raised: #1b2c39;
  --night-border: rgba(160, 201, 215, .17);
  background: var(--night-bg);
}

html.night-mode,
html.night-mode body {
  background: var(--night-bg);
}

body.night-mode .app-shell {
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(28, 103, 143, .30), transparent 36%),
    radial-gradient(circle at 0 47%, rgba(24, 105, 95, .20), transparent 38%),
    linear-gradient(160deg, #10202d 0%, #0a151f 53%, #101e27 100%);
}

body.night-mode .app-shell::before {
  background: linear-gradient(180deg, rgba(132, 207, 225, .085), transparent 38%, rgba(67, 184, 174, .045));
}

body.night-mode .ambient { opacity: .20; filter: blur(22px); }
body.night-mode .ambient-a { background: radial-gradient(circle, rgba(69, 176, 226, .26), transparent 70%); }
body.night-mode .ambient-b { background: radial-gradient(circle, rgba(67, 205, 165, .19), transparent 70%); }
body.night-mode .ambient-c { background: radial-gradient(circle, rgba(135, 126, 235, .15), transparent 70%); }

body.night-mode .app-header { background: rgba(8, 17, 27, .28); }
body.night-mode .app-header-inner,
body.night-mode .page-title-row h1,
body.night-mode .section-heading h2,
body.night-mode .question-list-heading h1,
body.night-mode .question-list-summary strong,
body.night-mode .settings-copy strong,
body.night-mode .profile-copy .identity,
body.night-mode .profile-security-link strong,
body.night-mode .leaderboard-me strong,
body.night-mode .leaderboard-copy strong,
body.night-mode .feedback-intro strong,
body.night-mode .feedback-card > strong,
body.night-mode .admin-feedback-card > strong {
  color: var(--ink);
}

body.night-mode .eyebrow,
body.night-mode .section-heading a,
body.night-mode .text-button,
body.night-mode .catalog-overline,
body.night-mode .catalog-caption,
body.night-mode .question-list-back,
body.night-mode .question-list-summary span,
body.night-mode .leaderboard-my-rank {
  color: var(--blue-deep);
}

body.night-mode .glass-panel,
body.night-mode .glass-card,
body.night-mode .metric,
body.night-mode .logbook-entry,
body.night-mode .route-card,
body.night-mode .question-list,
body.night-mode .message-list,
body.night-mode .chat-detail-list,
body.night-mode .profile-menu,
body.night-mode .settings-card,
body.night-mode .feedback-card,
body.night-mode .admin-feedback-card,
body.night-mode .profile-edit-panel,
body.night-mode .catalog-overview,
body.night-mode .catalog-knowledge-group,
body.night-mode .question-paper,
body.night-mode .answer-sheet-panel,
body.night-mode .practice-settings-sheet,
body.night-mode .practice-dialog {
  color: var(--ink-soft);
  border-color: var(--night-border);
  background: linear-gradient(135deg, rgba(28, 46, 60, .86), rgba(15, 28, 39, .82));
  box-shadow: var(--shadow);
}

body.night-mode .glass-card::before,
body.night-mode .glass-panel::before {
  background: linear-gradient(135deg, rgba(179, 231, 239, .08), transparent 43%);
}

body.night-mode .icon-button,
body.night-mode .circle-button {
  color: #b6cbd4;
  border-color: rgba(158, 198, 212, .19);
  background: rgba(29, 47, 59, .78);
  box-shadow: 0 6px 15px rgba(0, 0, 0, .16);
}
body.night-mode .theme-toggle-button { color: #f3d58d; border-color: rgba(225, 190, 108, .24); background: linear-gradient(145deg, #40351f, #263d4b); }
body.night-mode .theme-mode-option { color: #9bb0bb; border-color: rgba(146, 193, 207, .18); background: #182c39; }
body.night-mode .theme-mode-option.is-active { color: #062233; border-color: transparent; background: linear-gradient(135deg, #70c4ed, #59d0c6); }

body.night-mode .icon-button:hover,
body.night-mode .circle-button:hover,
body.night-mode .icon-button:focus-visible,
body.night-mode .circle-button:focus-visible {
  color: #eaf7fa;
  border-color: rgba(121, 205, 222, .42);
  background: rgba(45, 69, 82, .88);
}

body.night-mode .data-empty,
body.night-mode .empty-state {
  color: var(--ink-soft);
  border-color: var(--night-border);
  background: rgba(18, 32, 44, .72);
}

body.night-mode .empty-icon,
body.night-mode .feedback-intro-icon,
body.night-mode .leaderboard-empty .empty-icon {
  color: #91dbe0;
  border-color: rgba(102, 208, 218, .20);
  background: #173942;
}

body.night-mode .continue-card {
  border-color: rgba(113, 201, 230, .25);
  background:
    radial-gradient(circle at 85% 18%, rgba(64, 164, 218, .28), transparent 33%),
    linear-gradient(135deg, #133c58, #122c43 56%, #143b43);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .27);
}

body.night-mode .continue-copy h2 { color: #f0f8fb; }
body.night-mode .continue-copy p { color: #b9d4de; }
body.night-mode .card-kicker { color: #8bd8d6; }
body.night-mode .continue-button {
  color: #062437;
  background: #b8edf0;
  box-shadow: 0 8px 17px rgba(0, 0, 0, .20);
}

body.night-mode .hero-navigation {
  color: #94d9de;
  border-color: rgba(108, 205, 215, .19);
  background: linear-gradient(135deg, rgba(24, 56, 65, .86), rgba(20, 40, 57, .76));
}

body.night-mode .metric-strip,
body.night-mode .profile-stats,
body.night-mode .profile-security-link,
body.night-mode .leaderboard-me,
body.night-mode .leaderboard-list {
  border-color: var(--line);
}

body.night-mode .metric span,
body.night-mode .logbook-entry small,
body.night-mode .profile-progress span,
body.night-mode .leaderboard-copy small,
body.night-mode .leaderboard-count small,
body.night-mode .feedback-card > small,
body.night-mode .admin-feedback-meta,
body.night-mode .feedback-empty,
body.night-mode .feedback-loading {
  color: var(--muted);
}

body.night-mode .quick-action { color: var(--ink-soft); }
body.night-mode .quick-action:nth-child(1) .quick-icon { color: #8dceff; background: #173650; }
body.night-mode .quick-action:nth-child(2) .quick-icon { color: #ffd18e; background: #49341f; }
body.night-mode .quick-action:nth-child(3) .quick-icon { color: #a6dfbb; background: #1c4034; }
body.night-mode .quick-action:nth-child(4) .quick-icon { color: #d2baff; background: #352951; }
body.night-mode .logbook-symbol { color: #8bd9db; border-color: rgba(103, 204, 209, .18); background: #173b42; }

body.night-mode .source-status,
body.night-mode .live-status,
body.night-mode .library-badge,
body.night-mode .bank-family-pill,
body.night-mode .chapter-number,
body.night-mode .knowledge-index {
  color: #9bdade;
  border-color: rgba(102, 205, 210, .20);
  background: #173b43;
}

body.night-mode .bank-learning-guide {
  border-color: rgba(131, 207, 219, .18);
  background: linear-gradient(145deg, rgba(22, 57, 62, .85), rgba(23, 43, 61, .82));
  box-shadow: 0 12px 25px rgba(0, 0, 0, .20);
}
body.night-mode .bank-learning-step { background: rgba(31, 58, 70, .72); }
body.night-mode .bank-learning-step > span { color: #8bcfd3; }
body.night-mode .bank-family-pill.is-main { color: #8fdad0; background: #1c4543; }
body.night-mode .bank-family-pill.is-sprint { color: #ffd18b; background: #48391f; }
body.night-mode .bank-family-pill.is-topic { color: #c2b8ff; background: #342f55; }

body.night-mode .catalog-hero,
body.night-mode .catalog-chapter {
  border-color: var(--night-border);
  background: rgba(18, 34, 46, .72);
}
body.night-mode .catalog-chapter summary:hover,
body.night-mode .catalog-chapter summary:focus-visible { background: rgba(47, 73, 87, .42); }
body.night-mode .chapter-copy small,
body.night-mode .chapter-subtitle small,
body.night-mode .chapter-practice-button small,
body.night-mode .knowledge-copy small { color: var(--muted); }
body.night-mode .chapter-subtitle { color: #8bd6d4; }
body.night-mode .chapter-content .knowledge-row + .knowledge-row,
body.night-mode .catalog-knowledge-list .knowledge-row + .knowledge-row { border-top-color: var(--line); }
body.night-mode .chapter-practice-button {
  color: #9bdfdc;
  border-color: rgba(90, 201, 196, .25);
  background: linear-gradient(135deg, rgba(26, 67, 67, .86), rgba(25, 49, 70, .82));
}
body.night-mode .knowledge-index { color: #9ddce3; background: #1c3e4c; }
body.night-mode .knowledge-copy strong { color: #c2d3da; }

body.night-mode .question-list { background: rgba(18, 33, 45, .78); }
body.night-mode .local-question-row + .local-question-row { border-top-color: var(--line); }
body.night-mode .local-question-row:hover { background: rgba(46, 72, 84, .42); }
body.night-mode .local-question-row:active { background: rgba(55, 87, 98, .56); }
body.night-mode .local-question-row .question-index {
  color: #9bd9ff;
  border-color: rgba(107, 199, 232, .20);
  background: linear-gradient(145deg, #1c4359, #20374e);
}
body.night-mode .local-question-row .question-copy strong { color: #e1edf1; }
body.night-mode .local-question-row > .icon { color: #86a2af; }
body.night-mode .question-type-chip { color: #8bd9d5; background: #194044; }
body.night-mode .question-status { color: #9aadb7; background: #253640; }
body.night-mode .question-status.is-correct { color: #9addae; background: #1b4034; }
body.night-mode .question-status.is-wrong { color: #f0a79d; background: #4b2b2c; }
body.night-mode .question-status.is-answered { color: #a9d1f0; background: #213b53; }
body.night-mode .question-status.is-unanswered { color: #91a6af; background: #24323a; }

body.night-mode .question-list-back {
  border-color: rgba(111, 196, 219, .23);
  background: rgba(22, 57, 70, .78);
  box-shadow: 0 7px 15px rgba(0, 0, 0, .18);
}
body.night-mode .question-list-toolbar {
  border-color: var(--night-border);
  background: rgba(21, 40, 51, .72);
}
body.night-mode .question-list-toolbar .compact-button { color: #9babb3; }
body.night-mode .question-list-toolbar .compact-button.is-active {
  color: #062437;
  background: linear-gradient(135deg, #70c5ed, #61d0c7);
}

body.night-mode .practice-mode-badge { color: #8ddbd9; border-color: rgba(101, 205, 201, .23); background: #183d42; }
body.night-mode .practice-mode-badge.is-study { color: #b9caf8; border-color: rgba(145, 157, 228, .23); background: #2b3152; }
body.night-mode .practice-top-copy p { color: var(--muted); }
body.night-mode .practice-top-right .practice-answer-sheet-inline,
body.night-mode .practice-settings-button {
  color: #9dd9e2;
  border-color: rgba(104, 202, 219, .24);
  background: rgba(22, 60, 72, .78);
}
body.night-mode .practice-exam-countdown { color: #ffc68d; }
body.night-mode .practice-exam-countdown strong { color: #ffd19a; }
body.night-mode .thin-progress { background: rgba(154, 191, 201, .16); }
body.night-mode .thin-progress i { background: linear-gradient(90deg, #4aa8e6, #55c9b7); }
body.night-mode .question-paper { background: linear-gradient(145deg, rgba(28, 46, 60, .91), rgba(16, 29, 40, .86)); }
body.night-mode .question-meta { color: #9aadb5; }
body.night-mode .question-meta .type { color: #9bdce0; border-color: rgba(105, 207, 211, .20); background: #1a4146; }
body.night-mode .question-stem { color: #f1f7f9; }
body.night-mode .question-ask { color: #f1f7f9; border-top-color: rgba(154,196,208,.18); }
body.night-mode .question-note { color: var(--muted); }

body.night-mode .option-row {
  color: #c6d6dc;
  border-color: rgba(147, 192, 207, .19);
  background: rgba(23, 40, 52, .80);
}
body.night-mode .option-row:hover,
body.night-mode .option-row:focus-visible { border-color: rgba(111, 207, 224, .48); background: rgba(34, 61, 74, .88); }
body.night-mode .option-row p { color: #c9d8dd; }
body.night-mode .option-letter { color: #b5cbd5; border-color: rgba(126, 190, 211, .18); background: #203846; }
body.night-mode .option-row.is-selected { color: #c5f0ed; border-color: #4db4bb; background: linear-gradient(135deg, #17465b, #194845); }
body.night-mode .option-row.is-selected .option-letter { color: #c6f5f1; background: #246a73; }
body.night-mode .option-row.is-correct { color: #c8efd3; border-color: #5ab98b; background: #183e35; }
body.night-mode .option-row.is-correct .option-letter { color: #d0f3da; background: #2d7658; }
body.night-mode .option-row.is-wrong { color: #ffd2cb; border-color: #d87c73; background: #4a292c; }
body.night-mode .option-row.is-wrong .option-letter { color: #ffe1da; background: #8e4a49; }
body.night-mode .answer-explain { color: #b8dec8; border-color: #2a6b59; background: #14332f; }
body.night-mode .answer-explain strong { color: #8fd1a5; }
body.night-mode .answer-explain.is-study { color: #c0d3e6; border-color: #355f83; background: linear-gradient(135deg, #18333b, #1c3047); }
body.night-mode .answer-explain.is-study strong { color: #a9d6f5; }
body.night-mode .practice-footnote { color: #8199a6; }

body.night-mode .secondary-button {
  color: #c1d2d9;
  border-color: rgba(150, 195, 209, .21);
  background: #1b2d3a;
  box-shadow: 0 7px 15px rgba(0, 0, 0, .15);
}
body.night-mode .secondary-button:hover,
body.night-mode .secondary-button:focus-visible { color: #eff8fa; border-color: rgba(113, 208, 222, .44); background: #294452; }
body.night-mode .primary-button {
  color: #062233;
  border-color: rgba(145, 232, 224, .25);
  background: linear-gradient(135deg, #70c4ed, #59d0c6);
  box-shadow: 0 9px 18px rgba(0, 0, 0, .22);
}
body.night-mode .primary-button:hover,
body.night-mode .primary-button:focus-visible { background: linear-gradient(135deg, #8bd2f4, #75ded4); }
body.night-mode .practice-top-right .practice-submit-exam-button { color: #062233; background: linear-gradient(135deg, #70c4ed, #59d0c6); }

body.night-mode .settings-section-label { color: #8dcbd0; }
body.night-mode .settings-row { color: var(--ink-soft); }
body.night-mode .settings-row + .settings-row { border-top-color: var(--line); }
body.night-mode .settings-row-button:hover,
body.night-mode .settings-row-button:focus-visible { background: rgba(55, 81, 93, .38); }
body.night-mode .settings-icon {
  color: #9bd8f0;
  border-color: rgba(114, 200, 228, .18);
  background: #193b4d;
}
body.night-mode .settings-icon-aqua { color: #89ded1; border-color: rgba(102, 210, 195, .18); background: #193f3f; }
body.night-mode .settings-icon-green { color: #a9dfb2; border-color: rgba(113, 205, 139, .18); background: #1c3e32; }
body.night-mode .settings-icon-purple { color: #d1baff; border-color: rgba(178, 151, 244, .18); background: #352b50; }
body.night-mode .settings-icon-night { color: #f1d48a; border-color: rgba(225, 186, 94, .18); background: #44391f; }
body.night-mode .settings-chevron { color: #819aa7; }
body.night-mode .settings-copy span,
body.night-mode .settings-copy small,
body.night-mode .settings-version { color: var(--muted); }
body.night-mode .settings-toggle { background: #344955; box-shadow: inset 0 0 0 1px rgba(151, 194, 206, .13); }
body.night-mode .settings-toggle::after { background: #e5f0f3; box-shadow: 0 2px 6px rgba(0, 0, 0, .30); }
body.night-mode .settings-toggle.is-on { background: linear-gradient(135deg, #45aee2, #47bfae); }
body.night-mode .font-size-option { color: #b9cdd5; border-color: rgba(146, 193, 207, .18); background: #182c39; }
body.night-mode .font-size-option.is-active { color: #062233; border-color: transparent; background: linear-gradient(135deg, #70c4ed, #59d0c6); }

body.night-mode .profile-copy .identity { background: #193f44; }
body.night-mode .profile-progress strong,
body.night-mode .leaderboard-count { color: #8fceff; }
body.night-mode .profile-stat { border-color: var(--line); background: rgba(20, 39, 51, .62); }
body.night-mode .profile-stat strong { color: #e1edf1; }
body.night-mode .profile-menu-item { color: #c4d5da; border-top-color: var(--line); }
body.night-mode .profile-menu-item:hover { background: rgba(52, 79, 91, .38); }
body.night-mode .menu-icon { color: #9bd8f4; border-color: rgba(111, 199, 228, .18); background: #193b4d; }
body.night-mode .profile-menu-item:nth-child(2) .menu-icon { color: #9cddb3; background: #1d3f33; }
body.night-mode .profile-menu-item:nth-child(3) .menu-icon { color: #ffd48d; background: #49381f; }
body.night-mode .profile-menu-item:nth-child(4) .menu-icon { color: #d0b9ff; background: #352b50; }

body.night-mode .leaderboard-periods { background: #142b38; }
body.night-mode .leaderboard-period { color: #879da7; }
body.night-mode .leaderboard-period.is-active { color: #a4d9ff; background: #294454; box-shadow: 0 5px 12px rgba(0, 0, 0, .22); }
body.night-mode .leaderboard-me-icon { color: #ffd17c; background: #493a21; }
body.night-mode .leaderboard-row { border-bottom-color: var(--line); }
body.night-mode .leaderboard-row.is-me { background: rgba(34, 91, 86, .38); }
body.night-mode .leaderboard-rank { color: #91a5ae; }
body.night-mode .rank-1 .leaderboard-rank { color: #e0b55d; }
body.night-mode .rank-2 .leaderboard-rank { color: #b2c3d2; }
body.night-mode .rank-3 .leaderboard-rank { color: #d49573; }
body.night-mode .leaderboard-avatar { border-color: rgba(206, 235, 241, .30); }

body.night-mode .feedback-form select,
body.night-mode .feedback-form textarea,
body.night-mode .feedback-form input,
body.night-mode .admin-feedback-card textarea,
body.night-mode .account-field input,
body.night-mode .login-field input,
body.night-mode .search-bar input,
body.night-mode .comment-compose input,
body.night-mode .composer-card textarea,
body.night-mode .question-note-editor textarea {
  color: var(--ink);
  border-color: rgba(147, 193, 207, .20);
  background: #152735;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .16);
  color-scheme: dark;
}
body.night-mode input::placeholder,
body.night-mode textarea::placeholder { color: #718894; opacity: 1; }
body.night-mode .feedback-form select:focus,
body.night-mode .feedback-form textarea:focus,
body.night-mode .feedback-form input:focus,
body.night-mode .admin-feedback-card textarea:focus,
body.night-mode .account-field input:focus,
body.night-mode .login-field input:focus,
body.night-mode .search-bar input:focus,
body.night-mode .comment-compose input:focus,
body.night-mode .composer-card textarea:focus,
body.night-mode .question-note-editor textarea:focus {
  border-color: rgba(113, 204, 232, .62);
  box-shadow: 0 0 0 3px rgba(79, 177, 216, .14), inset 0 1px 2px rgba(0, 0, 0, .16);
}
body.night-mode .feedback-category { color: #9ddce0; background: #1b4147; }
body.night-mode .feedback-status { color: #ffd08d; background: #493a22; }
body.night-mode .feedback-status.is-replied { color: #a5e0bc; background: #1d4436; }
body.night-mode .feedback-reply { border-left-color: #4cb5a2; background: #163732; }
body.night-mode .feedback-reply > span { color: #8fdbd0; }
body.night-mode .feedback-reply p { color: #bdd6d2; }
body.night-mode .feedback-reply small { color: var(--muted); }

body.night-mode .practice-dialog-backdrop,
body.night-mode .answer-sheet-backdrop,
body.night-mode .image-preview-backdrop { background: rgba(1, 7, 13, .76); }
body.night-mode .practice-dialog,
body.night-mode .practice-settings-sheet { color: var(--ink-soft); }
body.night-mode .practice-dialog h2,
body.night-mode .practice-settings-sheet h2 { color: var(--ink); }
body.night-mode .practice-setting-label { color: #8ed3d4; }
body.night-mode .practice-mode-choice,
body.night-mode .random-count-choice {
  color: #c0d2d9;
  border-color: rgba(145, 191, 206, .20);
  background: #172b38;
}
body.night-mode .practice-mode-choice strong,
body.night-mode .random-count-choice strong { color: #e1edf1; }
body.night-mode .practice-mode-choice small { color: var(--muted); }
body.night-mode .practice-mode-choice.is-active,
body.night-mode .random-count-choice.is-active {
  color: #b9f0ed;
  border-color: #4db4b8;
  background: linear-gradient(135deg, #174a58, #1a4a46);
}
body.night-mode .practice-mode-choice.is-active strong,
body.night-mode .random-count-choice.is-active strong { color: #d0f6f1; }
body.night-mode .practice-settings-note,
body.night-mode .practice-footnote { color: var(--muted); }
body.night-mode .answer-sheet-panel { background: linear-gradient(145deg, #1d3442, #11232f); }
body.night-mode .answer-sheet-head h2 { color: var(--ink); }
body.night-mode .answer-sheet-stat { color: #a9c1cb; border-color: var(--line); background: rgba(19, 40, 52, .72); }
body.night-mode .answer-sheet-item { color: #bdcfd6; border-color: rgba(143, 191, 204, .20); background: #172b38; }
body.night-mode .answer-sheet-item.is-current { color: #bdeff1; border-color: #52bbc1; background: #20515b; }
body.night-mode .answer-sheet-item.is-correct { color: #bcecc9; border-color: #4b9e79; background: #1a4136; }
body.night-mode .answer-sheet-item.is-wrong { color: #ffd0ca; border-color: #b96968; background: #45282d; }
body.night-mode .answer-sheet-legend i { border-color: rgba(143, 191, 204, .28); background: #1d3440; }
body.night-mode .answer-sheet-legend i.is-correct { border-color: #4b9e79; background: #1a4136; }
body.night-mode .answer-sheet-legend i.is-wrong { border-color: #b96968; background: #45282d; }

body.night-mode .tabbar {
  border-color: rgba(148, 198, 213, .18);
  background: rgba(17, 31, 42, .88);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(205, 236, 241, .05);
}
body.night-mode .tabbar-item { color: #8198a4; }
body.night-mode .tabbar-item.is-active { color: #9ad7ff; }
body.night-mode .tabbar-item.is-active .tabbar-icon { color: #062334; background: linear-gradient(145deg, #73c9f0, #62d1c5); }
body.night-mode .has-badge::after { border-color: rgba(17, 31, 42, .95); }
body.night-mode .toast { color: #e9f5f7; border-color: rgba(157, 208, 219, .18); background: rgba(27, 46, 58, .94); box-shadow: 0 10px 24px rgba(0, 0, 0, .30); }

body.night-mode .bank-version-card.is-locked { color: #8ea2ac; border-color: rgba(142, 178, 191, .15); background: rgba(27, 42, 52, .62); }
body.night-mode .bank-version-card.is-locked .bank-version-icon { color: #95aab4; background: #263943; }
body.night-mode .bank-version-card.is-locked .bank-version-copy strong { color: #aabcc4; }
body.night-mode .bank-access-badge { color: #ffd38e; border-color: rgba(219, 179, 94, .23); background: #49391f; }
body.night-mode .membership-card.is-locked { background: linear-gradient(135deg, #293f4e, #3d5560); box-shadow: 0 15px 27px rgba(0, 0, 0, .23); }
body.night-mode .membership-card.is-locked .member-label { color: #dcebee; }
body.night-mode .membership-card.is-locked p { color: rgba(230, 241, 244, .76); }

body.night-mode .image-preview { background: #02070b; }
body.night-mode .image-preview-close { color: #e7f5f7; border-color: rgba(201, 235, 239, .22); background: rgba(27, 47, 59, .86); }

/* 入口、筛选与历史内容也使用同一套表面层，避免从首页进入后突然回到浅色组件。 */
body.night-mode .search-bar,
body.night-mode .segmented,
body.night-mode .role-switch,
body.night-mode .question-tool-actions,
body.night-mode .catalog-mode-card,
body.night-mode .feed-card,
body.night-mode .comment-list,
body.night-mode .auth-empty,
body.night-mode .exam-record-list,
body.night-mode .exam-result-card {
  border-color: var(--night-border);
  background: rgba(18, 34, 46, .76);
  box-shadow: var(--shadow);
}
body.night-mode .search-bar .icon { color: #8da9b5; }
body.night-mode .search-bar input::placeholder { color: #718894; }
body.night-mode .segment,
body.night-mode .role-switch-button,
body.night-mode .catalog-mode-card { color: #b5c9d1; }
body.night-mode .segment.is-active,
body.night-mode .role-switch-button.is-active,
body.night-mode .catalog-mode-card.is-active {
  color: #bceaf0;
  border-color: rgba(99, 202, 209, .30);
  background: linear-gradient(135deg, #1d4b55, #213c55);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
body.night-mode .role-switch-button small,
body.night-mode .catalog-mode-card small,
body.night-mode .catalog-mode-card > .icon { color: var(--muted); }
body.night-mode .role-switch-button.is-active small,
body.night-mode .catalog-mode-card.is-active strong { color: #b4e6ef; }
body.night-mode .study-hero,
body.night-mode .circle-banner { background: linear-gradient(140deg, #173e61, #1b6979 58%, #287b76); box-shadow: 0 17px 30px rgba(0, 0, 0, .25); }
body.night-mode .subject-card {
  color: var(--ink);
  border-color: var(--night-border);
  background: rgba(24, 43, 55, .80);
  box-shadow: var(--shadow);
}
body.night-mode .subject-card:hover { background: rgba(35, 60, 72, .90); }
body.night-mode .subject-card .subject-symbol { color: #9bd9f4; background: #1c4052; }
body.night-mode .subject-card:nth-child(2) .subject-symbol { color: #ffd194; background: #4a361f; }
body.night-mode .subject-card:nth-child(3) .subject-symbol { color: #a9dfb5; background: #1c4134; }
body.night-mode .subject-card:nth-child(4) .subject-symbol { color: #d0b8ff; background: #352b50; }
body.night-mode .subject-card .subject-role { color: #8ed0d2; }
body.night-mode .subject-card small { color: var(--muted); }
body.night-mode .route-card { background: rgba(24, 43, 55, .80); }
body.night-mode .route-icon { color: #9bdcf1; background: linear-gradient(145deg, #1c4355, #213d55); }
body.night-mode .route-card .chevron { color: #829da9; }
body.night-mode .catalog-mode-icon { color: #9bd8da; background: #1b4146; }
body.night-mode .catalog-mode-card.is-active .catalog-mode-icon { color: #c3f1ed; background: #28656b; }
body.night-mode .catalog-mode-card.is-active { box-shadow: 0 7px 15px rgba(0, 0, 0, .18); }
body.night-mode .catalog-filter-row .is-active { color: #062233; background: linear-gradient(135deg, #70c4ed, #59d0c6); box-shadow: 0 7px 15px rgba(0, 0, 0, .18); }
body.night-mode .bank-version-card {
  color: var(--ink-soft);
  border-color: var(--night-border);
  background: rgba(24, 43, 55, .80);
}
body.night-mode .bank-version-card:hover { background: rgba(35, 60, 72, .90); }
body.night-mode .bank-version-icon,
body.night-mode .catalog-hero-icon,
body.night-mode .settings-hero-icon { color: #9bd9f1; border-color: rgba(113, 201, 227, .18); background: linear-gradient(145deg, #1b4052, #223a55); box-shadow: inset 0 1px 0 rgba(209, 240, 245, .08); }
body.night-mode .bank-version-copy strong { color: #d9e9ed; }
body.night-mode .bank-version-copy small { color: var(--muted); }
body.night-mode .question-tool-actions { background: rgba(20, 42, 53, .76); }
body.night-mode .question-tool { color: #91a9b3; }
body.night-mode .question-tool:hover,
body.night-mode .question-tool.is-active { color: #a8e0e3; background: #244854; box-shadow: 0 4px 10px rgba(0, 0, 0, .17); }
body.night-mode .question-meta .icon-button.is-active { color: #b6eaf0; background: #1f5360; }
body.night-mode .question-note-editor { border-color: rgba(99, 199, 193, .27); background: #173a3a; }
body.night-mode .question-comment-row { border-top-color: var(--line); }
body.night-mode .question-comment-row p { color: #c0d1d8; }
body.night-mode .feed-card > p { color: #c0d1d8; }
body.night-mode .chat-detail-list { background: rgba(16, 31, 42, .82); }
body.night-mode .chat-bubble { color: #c2d2d8; background: #203541; }
body.night-mode .chat-bubble-row.mine .chat-bubble { color: #f0fbfc; background: linear-gradient(145deg, #247bb5, #2b9796); }
body.night-mode .chat-bubble small { color: rgba(183, 208, 215, .72); }
body.night-mode .message-avatar .online { border-color: #142631; }
body.night-mode .auth-empty-icon { color: #9bd9e3; background: #1b4149; }
body.night-mode .message-line time { color: #8399a4; }
body.night-mode .message-unread { color: #fff; background: #c9675d; }
body.night-mode .exam-score { box-shadow: 0 14px 28px rgba(0, 0, 0, .25); }
body.night-mode .exam-score span { color: rgba(240, 252, 255, .78); }
body.night-mode .membership-card button { color: #173756; background: #f2dc9e; }
body.night-mode .profile-avatar-camera { color: #082638; background: #a8e7ea; }

@media (min-width: 471px) {
  body.night-mode { background: #071018; }
  body.night-mode .app-shell { border-color: rgba(145, 196, 210, .16); }
}