/* 像素主题：设计变量与像素风细节 */
:root {
  --ink: #18234a;
  --ink-soft: #2c3a6b;
  --ink-line: #3b4a7d;
  --paper: #f1ede1;
  --card: #fffdf6;
  --line: #cfc7b2;
  --muted: #6b7392;
  --accent: #e8734a;
  --accent-2: #4a9d6e;
  --gold: #e8b84a;
  --danger: #c94f4f;
  --info: #3f7fbf;
  --shadow: 4px 4px 0 rgba(24, 35, 74, 0.16);
  --shadow-sm: 2px 2px 0 rgba(24, 35, 74, 0.14);
  /* 可点卡片悬停时用：比默认阴影更实一点，配合 1px 位移形成"被按起来"的感觉 */
  --shadow-lift: 5px 5px 0 rgba(24, 35, 74, 0.26);
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(24, 35, 74, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 35, 74, 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  line-height: 1.6;
}

.pixel-icon { flex: 0 0 auto; image-rendering: pixelated; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.title-pixel { color: var(--gold); display: inline-flex; margin-left: 8px; vertical-align: middle; }

.caret { color: var(--accent); animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* 硬阴影卡片 + 像素边框 */
.card, .stat-card, .wrong-card, .auth-box {
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
}

/* 按钮的“按下”手感 */
.btn, button {
  font-family: inherit;
  font-size: 0.92rem;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.05s steps(2, end), box-shadow 0.05s steps(2, end);
}

.btn:hover, button:hover { background: #fff8e8; }

.btn:active, button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.btn.primary, button.primary {
  background: var(--accent);
  color: #fff;
  border-color: #a8412a;
}

.btn.secondary, button.secondary { background: var(--gold); border-color: #a97f1c; }
.btn.ghost { background: transparent; }
.btn:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }

:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }

/* 徽章 */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border: 2px solid var(--ink);
  background: #f0ece0;
  white-space: nowrap;
}

.badge.ok { background: #d9f0e2; border-color: #2f6b4b; color: #23553b; }
.badge.warn { background: #ffe6d5; border-color: #b8562f; color: #90401f; }
.badge.info { background: #dbe9f8; border-color: #2f5f92; color: #23507d; }
.badge.muted { background: #e8e5da; border-color: #8a8674; color: #5e5c50; }

.subject-tag {
  display: inline-block;
  font-size: 0.78rem;
  padding: 1px 8px;
  border: 2px solid var(--ink-soft);
  background: #eef1f9;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* 品牌 */
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--ink-line);
  margin-bottom: 14px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--gold);
  border: 2px solid var(--ink);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.brand-mark-icon { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-name { font-weight: 700; letter-spacing: 0.04em; }
.brand-en { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; opacity: 0.85; }
.brand-text small { font-size: 0.68rem; opacity: 0.7; font-style: italic; }

/* 侧栏固定 250px，减掉内边距与图标后文字区只有约 168px。
   站名与英文名是「名字」，不能从中间断开（实测断成 "Little Learning / Lab"），
   所以强制单行、放不下就用省略号收尾；标语是句子，允许在词间断行，
   但用 text-wrap: balance 让两行长度接近，免得只剩 "up." 一个孤字。 */
.brand-name, .brand-en {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text small { overflow-wrap: normal; text-wrap: balance; }