/* ============================================================
   Study Plan — Design System
   Inspired by Notion (warm minimal) + Linear (precise hierarchy)
   ============================================================ */

/* --- Design Tokens --- */
:root {
  /* Surface palette — warm, paper-like */
  --canvas:        #faf9f7;
  --surface:       #f3f1ed;
  --surface-soft:  #f7f6f3;
  --surface-raised:#ffffff;
  --hairline:      #e8e5df;
  --hairline-soft: #edebe6;
  --hairline-strong:#d4d0c8;

  /* Ink palette — warm grays */
  --ink:           #1a1a1a;
  --ink-secondary: #37352f;
  --ink-tertiary:  #78756e;
  --ink-muted:     #a09b93;
  --ink-faint:     #c8c3ba;

  /* Accent — muted teal, not the usual blue */
  --accent:        #2a7f6e;
  --accent-hover:  #236b5c;
  --accent-soft:   #e6f2ee;
  --accent-text:   #1d5c4f;

  /* Subject tints — pastel, Notion-style */
  --tint-tcm:      #fef7e6;
  --tint-tcm-text: #7a5c1e;
  --tint-eng:      #e8f0fe;
  --tint-eng-text: #1e4a8a;
  --tint-pol:      #f5e6f0;
  --tint-pol-text: #6e2a50;
  --tint-skill:    #e6f2ee;
  --tint-skill-text:#1d5c4f;
  --tint-quiz:     #fde8e8;
  --tint-quiz-text:#8a2a2a;

  /* Semantic */
  --success:       #2d8a4e;
  --success-soft:  #e6f5ec;
  --warning:       #c47d15;
  --warning-soft:  #fef5e0;
  --error:         #c43030;
  --error-soft:    #fde8e8;

  /* Typography */
  --font-display:  "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
  --font-body:     "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:     "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radius */
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 10px;
  --r-xl: 14px; --r-pill: 9999px;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
}

/* --- Utility --- */
.serif { font-family: var(--font-display); }
.mono  { font-family: var(--font-mono); }

/* --- Shared Card --- */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline-soft);
  letter-spacing: -0.02em;
}

/* --- Subject Badge --- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.badge-tcm   { background: var(--tint-tcm);   color: var(--tint-tcm-text); }
.badge-eng   { background: var(--tint-eng);   color: var(--tint-eng-text); }
.badge-pol   { background: var(--tint-pol);   color: var(--tint-pol-text); }
.badge-skill { background: var(--tint-skill);  color: var(--tint-skill-text); }
.badge-quiz  { background: var(--tint-quiz);   color: var(--tint-quiz-text); }

/* --- Checkbox (custom) --- */
.task-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--hairline-soft);
  transition: opacity 0.2s;
}
.task-check:last-child { border-bottom: none; }
.task-check:hover { opacity: 0.85; }

.task-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
  margin-top: 2px;
  transition: all 0.15s;
}
.task-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.task-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.task-check.done .task-label {
  text-decoration: line-through;
  color: var(--ink-muted);
}

.task-label {
  flex: 1;
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.task-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.3;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled {
  background: var(--ink-faint);
  color: var(--ink-muted);
  cursor: not-allowed;
}
.btn-primary.done {
  background: var(--success);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: var(--ink-secondary);
  border: 1px solid var(--hairline-strong);
}
.btn-secondary:hover { background: var(--surface); }
.btn-ghost {
  background: transparent;
  color: var(--ink-tertiary);
  padding: 6px 12px;
}
.btn-ghost:hover { color: var(--ink); background: var(--surface); }

/* --- Text Input / Textarea --- */
.input, .textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color 0.15s;
}
.input:focus, .textarea:focus {
  border-color: var(--accent);
}
.textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.5;
}

/* ============================================================
   MAIN.HTML — Entry Page
   ============================================================ */

/* Gate overlay */
.gate {
  position: fixed;
  inset: 0;
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s, visibility 0.4s;
}
.gate.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.gate-inner {
  text-align: center;
  max-width: 360px;
  padding: var(--sp-8);
}
.gate-inner h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.03em;
}
.gate-inner .gate-sub {
  font-size: 14px;
  color: var(--ink-tertiary);
  margin-bottom: var(--sp-8);
}
.gate-inner .input {
  text-align: center;
  margin-bottom: var(--sp-4);
}
.gate-error {
  font-size: 13px;
  color: var(--error);
  margin-top: var(--sp-3);
  opacity: 0;
  transition: opacity 0.2s;
}
.gate-error.show { opacity: 1; }

/* Top bar (post-login) */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
.topbar.show { opacity: 1; visibility: visible; }
.topbar-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Content frame */
.frame {
  width: 100vw;
  height: 100vh;
  padding-top: 48px;
  opacity: 0;
  transition: opacity 0.4s 0.2s;
}
.frame.show { opacity: 1; }
.frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 48px);
  text-align: center;
  padding: var(--sp-8);
}
.empty-state h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-secondary);
  margin-bottom: var(--sp-3);
}
.empty-state p {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 320px;
}

/* ============================================================
   DAILY PAGE — Shared Layout
   ============================================================ */

.daily-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-12);
}

/* Date header */
.date-header {
  margin-bottom: var(--sp-6);
}
.date-header h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.date-header .date-sub {
  font-size: 14px;
  color: var(--ink-tertiary);
  margin-top: var(--sp-1);
}
.date-header .date-sub span {
  margin-right: var(--sp-3);
}
.date-header .date-sub .countdown {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-weight: 500;
}

/* ============================================================
   TIMEBLOCK — 时段进度
   ============================================================ */

.timeblock-list { list-style: none; }

.timeblock-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline-soft);
  transition: background 0.15s;
}
.timeblock-item:last-child { border-bottom: none; }
.timeblock-item:hover { background: var(--surface-soft); margin: 0 calc(var(--sp-4) * -1); padding-left: var(--sp-4); padding-right: var(--sp-4); border-radius: var(--r-md); }

/* 时间标签 */
.timeblock-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-tertiary);
  min-width: 105px;
  padding-top: 3px;
  line-height: 1.4;
  white-space: nowrap;
}

/* 内容区 */
.timeblock-body { flex: 1; }
.timeblock-body .tb-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.4;
}
.timeblock-body .tb-detail {
  font-size: 12px;
  color: var(--ink-muted);
}

/* 状态标签 */
.timeblock-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  min-width: 36px;
  text-align: center;
  margin-top: 3px;
}
.timeblock-status.pending {
  color: var(--ink-muted);
  background: var(--surface);
}
.timeblock-status.active {
  color: var(--accent-text);
  background: var(--accent-soft);
  animation: pulse 2s infinite;
}
.timeblock-status.done-ok {
  color: var(--success);
  background: var(--success-soft);
}
.timeblock-status.done-late {
  color: var(--warning);
  background: var(--warning-soft);
}
.timeblock-status.missed {
  color: var(--error);
  background: var(--error-soft);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 超时勾选框变黄 */
.timeblock-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
  margin-top: 3px;
  transition: all 0.15s;
}
.timeblock-item input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.timeblock-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* 超时状态：勾选框变黄 */
.timeblock-item.late input[type="checkbox"]:checked {
  background: var(--warning);
  border-color: var(--warning);
}
.timeblock-item.late input[type="checkbox"]:checked::after {
  border-color: #fff;
}

/* 已过时段整行淡化 */
.timeblock-item.past-not-done {
  opacity: 0.5;
}
.timeblock-item.past-not-done .tb-title {
  color: var(--ink-muted);
}

/* 锁定的勾选框（已缓存，不可更改） */
.timeblock-item input[type="checkbox"].locked {
  cursor: default;
  opacity: 1;
}
.timeblock-item input[type="checkbox"].locked:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.timeblock-item.late input[type="checkbox"].locked:checked {
  background: var(--warning);
  border-color: var(--warning);
}

/* 仅展示的任务项（无勾选框） */
.task-display {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline-soft);
  cursor: default;
}
.task-display:last-child { border-bottom: none; }
.task-display:hover { opacity: 0.85; }
.task-display .task-title {
  flex: 1;
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.5;
}
.task-display .task-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* 重新做题按钮 */
.btn-retry {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-tertiary);
  background: transparent;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-retry:hover {
  color: var(--ink);
  border-color: var(--ink-tertiary);
  background: var(--surface);
}

/* 锁定提示 */
.lock-hint {
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: var(--sp-2);
  font-style: italic;
}

/* ============================================================
   SCHEDULE LIST (replaces table)
   ============================================================ */
.schedule-list { list-style: none; }
.schedule-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline-soft);
  align-items: flex-start;
}
.schedule-item:last-child { border-bottom: none; }
.schedule-time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-tertiary);
  min-width: 100px;
  padding-top: 2px;
  line-height: 1.4;
}
.schedule-body { flex: 1; }
.schedule-body .task-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.schedule-body .task-detail {
  font-size: 13px;
  color: var(--ink-muted);
}

/* ============================================================
   QUIZ — Multi-type questions
   ============================================================ */

.quiz-block {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.quiz-block:last-child { border-bottom: none; }

.quiz-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.quiz-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.quiz-type {
  font-size: 12px;
  color: var(--ink-muted);
}
.quiz-text {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
}

/* Choice options */
.choice-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.choice-item {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-secondary);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.choice-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.choice-item.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 500;
}
.choice-item.correct {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}
.choice-item.wrong {
  border-color: var(--error);
  background: var(--error-soft);
  color: var(--error);
}
.choice-marker {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  transition: all 0.15s;
}
.choice-item.selected .choice-marker {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.choice-item.correct .choice-marker {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.choice-item.wrong .choice-marker {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

/* Multi-select choice markers (square) */
.choice-item[data-multi="true"] .choice-marker { border-radius: var(--r-sm); }

/* Fill-in-the-blank */
.fill-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color 0.15s;
}
.fill-input:focus { border-color: var(--accent); }

/* Short answer */
.answer-area {
  width: 100%;
  min-height: 100px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.15s;
}
.answer-area:focus { border-color: var(--accent); }

/* Matching pairs */
.match-container {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: var(--sp-2);
  align-items: center;
}
.match-item {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink-secondary);
  text-align: center;
}
.match-arrow {
  text-align: center;
  color: var(--ink-faint);
  font-size: 18px;
}
.match-select {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  outline: none;
  cursor: pointer;
}
.match-select:focus { border-color: var(--accent); }

/* True/False */
.tf-group {
  display: flex;
  gap: var(--sp-3);
}
.tf-btn {
  flex: 1;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-secondary);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.tf-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.tf-btn.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 500;
}
.tf-btn.correct { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.tf-btn.wrong   { border-color: var(--error);   background: var(--error-soft);   color: var(--error); }

/* ============================================================
   REWARD
   ============================================================ */
.reward-card {
  display: none;
  text-align: center;
  padding: var(--sp-8);
  background: var(--tint-tcm);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
}
.reward-card.show { display: block; }
.reward-card .reward-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--tint-tcm-text);
  margin-bottom: var(--sp-2);
}
.reward-card .reward-msg {
  font-size: 14px;
  color: var(--ink-tertiary);
  line-height: 1.6;
}

/* ============================================================
   STAMP SYSTEM — 印章与奖励卡
   ============================================================ */

/* 印章余额栏 */
.stamp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
  font-size: 13px;
}
.stamp-balance {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.stamp-icon {
  font-size: 18px;
  line-height: 1;
}
.stamp-count {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.stamp-label {
  color: var(--ink-tertiary);
  font-size: 12px;
}
.stamp-rules {
  color: var(--ink-muted);
  font-size: 11px;
  text-align: right;
  line-height: 1.5;
}

/* 今日卡片使用提示 */
.card-usage {
  padding: var(--sp-3) var(--sp-4);
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  font-size: 13px;
  color: var(--warning);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.card-usage .card-emoji {
  font-size: 16px;
}
.card-usage-none {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  font-size: 12px;
  color: var(--ink-muted);
}

/* 奖励卡兑换表 */
.stamp-exchange {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.stamp-card {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.5;
  transition: all 0.15s;
}
.stamp-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.stamp-card .sc-emoji {
  font-size: 16px;
  margin-right: var(--sp-1);
}
.stamp-card .sc-name {
  font-weight: 600;
  color: var(--ink);
}
.stamp-card .sc-cost {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ============================================================
   ANSWER REVEAL & SELF-SCORING
   ============================================================ */

/* Reference answer (shown after grading) */
.ref-answer {
  display: none;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.6;
}
.ref-answer.show { display: block; }
.ref-answer::before {
  content: '参考答案：';
  font-weight: 600;
  color: var(--accent-text);
  display: block;
  margin-bottom: var(--sp-1);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Result indicator on each question */
.quiz-result {
  display: none;
  margin-top: var(--sp-2);
  font-size: 13px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.quiz-result.show { display: inline-block; }
.quiz-result.pass {
  color: var(--success);
  background: var(--success-soft);
}
.quiz-result.fail {
  color: var(--error);
  background: var(--error-soft);
}
.quiz-result.manual {
  color: var(--warning);
  background: var(--warning-soft);
}

/* Self-scoring for subjective questions */
.self-score {
  display: none;
  margin-top: var(--sp-3);
  align-items: center;
  gap: var(--sp-3);
}
.self-score.show { display: flex; }
.self-score label {
  font-size: 13px;
  color: var(--ink-tertiary);
}
.self-score select {
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  outline: none;
  cursor: pointer;
}

/* Score summary card */
.score-summary {
  display: none;
  text-align: center;
  padding: var(--sp-6);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}
.score-summary.show { display: block; }
.score-summary .score-big {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.score-summary .score-label {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: var(--sp-2);
}
.score-summary .score-detail {
  font-size: 13px;
  color: var(--ink-tertiary);
  margin-top: var(--sp-3);
}

/* Sync hint */
.sync-hint {
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: var(--sp-3);
  line-height: 1.6;
  font-style: italic;
}

/* ============================================================
   SUBMIT SECTION (revamped)
   ============================================================ */
.submit-area {
  padding-top: var(--sp-4);
}
.submit-area .submit-note {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}
.submit-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .daily-page { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
  .date-header h1 { font-size: 26px; }
  .schedule-item { flex-direction: column; gap: var(--sp-1); }
  .schedule-time { min-width: auto; }
  .gate-inner h1 { font-size: 24px; }
  .match-container { grid-template-columns: 1fr 30px 1fr; }
  .score-summary .score-big { font-size: 36px; }
}