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

:root {
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  --transition: 0.18s ease;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  background: #f0ebe3;
  color: #2d2a26;
  font-size: 15px;
  line-height: 1.6;
}

#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
#bg-canvas svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-shell {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0 0.25rem;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-icon svg path { stroke: #5a4fcf; }
.logo-text {
  font-size: 17px;
  font-weight: 600;
  color: #2d2a26;
  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.date-chip {
  font-size: 12px;
  font-weight: 500;
  color: #5a4fcf;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 4px 12px;
}
.streak-dots { display: flex; gap: 5px; align-items: center; }
.home-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  color: #5a4fcf;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.home-btn:hover  { background: rgba(255,255,255,0.85); transform: scale(1.1); }
.home-btn:active { transform: scale(0.95); }
.sdot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1.5px solid rgba(255,255,255,0.5);
  transition: background var(--transition);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
}
.sdot.done { background: #5a4fcf; border-color: #5a4fcf; color: #fff; }
.sdot.today { border-color: rgba(255,255,255,0.9); color: rgba(255,255,255,0.9); }

.app-nav { display: flex; gap: 6px; margin-bottom: 1rem; }
.nav-btn {
  padding: 7px 20px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: rgba(255,255,255,0.45);
  color: #5a5040;
  backdrop-filter: blur(8px);
  transition: background var(--transition), color var(--transition);
}
.nav-btn.active { background: white; color: #5a4fcf; }

.card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.375rem;
  margin-bottom: 1rem;
}

/* ── Topic goal card ── */
.goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a4fcf;
}
.ghost-btn {
  font-size: 12px;
  color: #8a8070;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background var(--transition);
}
.ghost-btn:hover { background: white; }
.goal-text {
  font-size: 15px;
  font-weight: 500;
  color: #2d2a26;
  line-height: 1.6;
}

/* ── Grammar focus card ── */
.grammar-card {
  background: rgba(90,79,207,0.08);
  border: 1px solid rgba(90,79,207,0.2);
}
.grammar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.grammar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a4fcf;
}
.grammar-name {
  font-size: 14px;
  font-weight: 600;
  color: #3a3080;
  background: rgba(90,79,207,0.12);
  border-radius: 999px;
  padding: 3px 12px;
}
.grammar-chinese {
  font-size: 13px;
  color: #8a80c0;
}
.grammar-instruction {
  font-size: 14px;
  color: #3a3060;
  line-height: 1.65;
  margin-bottom: 12px;
}
.grammar-example {
  background: rgba(255,255,255,0.65);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.example-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a4fcf;
}
.example-text {
  font-size: 14px;
  color: #2d2a26;
  line-height: 1.65;
  font-style: italic;
}

/* ── Fire Person ── */
.fp-card {
  background: linear-gradient(135deg, #fffaf4, #fff4e0);
  border: 1.5px solid rgba(255,140,0,0.22);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  overflow: visible;
}
.fp-char {
  flex-shrink: 0;
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: scale(var(--fp-scale, 1));
  transform-origin: center bottom;
  transition: transform 0.8s ease;
}
.fp-img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  border-radius: 18px;
  animation: fp-float 2.7s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(180,88,10,0.18));
  transform-origin: center bottom;
  transition: filter 0.6s ease, opacity 0.6s ease;
  will-change: transform, filter;
}

/* SVG element base styles */
.fp-outer {
  fill: #FF7700;
  transition: fill 0.5s;
}
.fp-belly {
  fill: #FFE080;
  transition: fill 0.5s;
}
.fp-eye  { fill: #1a0800; }
.fp-shine { fill: rgba(255,255,255,0.88); }
.fp-happy {
  fill: none;
  stroke: #1a0800;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.fp-sad {
  fill: none;
  stroke: #1a0800;
  stroke-width: 2.5;
  stroke-linecap: round;
  display: none;
}
.fp-foot {
  fill: #FF6000;
  transition: fill 0.5s;
}
.fp-coil {
  fill: none;
  stroke: rgba(0,0,0,0.35);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ── STATE: blazing ── */
.fp-char.blazing .fp-img   {
  --fp-bob-y: -7px;
  --fp-bob-scale: 1.04;
  animation: fp-float 1.9s ease-in-out infinite, fp-glow 1.7s ease-in-out infinite;
}
.fp-char.blazing .fp-outer { fill: #FF9900; }
.fp-char.blazing .fp-belly { fill: #FFF0A0; }
.fp-char.blazing .fp-foot  { fill: #FF7700; }
.fp-char.blazing .fp-rays  { animation: fp-ray-pulse 1.6s ease-in-out infinite; }
@keyframes fp-glow {
  0%,100% { filter: drop-shadow(0 0 8px rgba(255,200,0,0.5)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255,220,0,0.95)); }
}
@keyframes fp-ray-pulse {
  0%,100% { opacity: 0.5; }
  50%      { opacity: 1.0; }
}

/* ── STATE: healthy ── */
.fp-char.healthy .fp-img   {
  --fp-bob-y: -6px;
  --fp-bob-scale: 1.03;
  filter: drop-shadow(0 0 9px rgba(255,150,0,0.42));
}
.fp-char.healthy .fp-outer { fill: #FF7700; }
.fp-char.healthy .fp-belly { fill: #FFE080; }
.fp-char.healthy .fp-foot  { fill: #FF6000; }

/* ── STATE: warm ── */
.fp-char.warm .fp-img   {
  --fp-bob-y: -5px;
  --fp-bob-scale: 1.025;
  filter: drop-shadow(0 0 6px rgba(220,110,0,0.28));
}
.fp-char.warm .fp-outer { fill: #EE6600; }
.fp-char.warm .fp-belly { fill: #FFD070; }
.fp-char.warm .fp-foot  { fill: #DD5500; }

/* ── STATE: weak ── */
.fp-char.weak .fp-img   {
  --fp-bob-y: -3px;
  --fp-bob-scale: 1.01;
  filter: saturate(0.85) brightness(0.96);
  animation: fp-float 3.6s ease-in-out infinite;
}
.fp-char.weak .fp-outer { fill: #CC4400; }
.fp-char.weak .fp-belly { fill: #FFBB60; }
.fp-char.weak .fp-foot  { fill: #BB3300; }
.fp-char.weak .fp-happy { display: none; }
.fp-char.weak .fp-sad   { display: inline; }

/* ── STATE: dying ── */
.fp-char.dying .fp-img   {
  filter: saturate(0.7) brightness(0.88);
  animation: fp-shake 2.6s ease-in-out infinite;
}
.fp-char.dying .fp-outer { fill: #993300; }
.fp-char.dying .fp-belly { fill: #EE9950; }
.fp-char.dying .fp-foot  { fill: #882200; }
.fp-char.dying .fp-eye   { fill: #3a1500; }
.fp-char.dying .fp-happy { display: none; }
.fp-char.dying .fp-sad   { display: inline; }

/* ── STATE: out ── */
.fp-char.out .fp-img   { filter: grayscale(0.95) saturate(0.35) brightness(0.92); opacity: 0.52; animation: none; }
.fp-char.out .fp-outer { fill: #aaa; }
.fp-char.out .fp-belly { fill: #ccc; }
.fp-char.out .fp-foot  { fill: #999; }
.fp-char.out .fp-eye   { fill: #555; }
.fp-char.out .fp-shine { fill: rgba(255,255,255,0.35); }
.fp-char.out .fp-happy { display: none; }
.fp-char.out .fp-sad   { display: inline; stroke: #555; }
.fp-char.out .fp-coil  { stroke: rgba(0,0,0,0.2); }

/* Feed animation */
.fp-char.feeding .fp-img { animation: fp-feed 0.85s ease forwards !important; }
@keyframes fp-feed {
  0%   { transform: scale(1)    rotate(0deg); }
  25%  { transform: scale(1.28) rotate(7deg); }
  55%  { transform: scale(0.92) rotate(-5deg); }
  80%  { transform: scale(1.08) rotate(3deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* Core animations */
@keyframes fp-float {
  0%,100% { transform: translateY(0) rotate(-1.3deg) scale(1); }
  50%      { transform: translateY(var(--fp-bob-y, -5px)) rotate(1.4deg) scale(var(--fp-bob-scale, 1.025)); }
}
@keyframes fp-shake {
  0%,100% { transform: translateY(0) rotate(-1deg) scale(0.98); }
  30%      { transform: translateY(-2px) rotate(-3.5deg) scale(0.99); }
  65%      { transform: translateY(-1px) rotate(3deg) scale(0.98); }
}

/* Info panel */
.fp-info { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.fp-name-row { font-size: 13px; font-weight: 700; color: #cc5500; display: flex; align-items: center; gap: 6px; }
#fp-streak-badge { font-size: 12px; color: #ff8c00; }
.fp-bar-track { height: 7px; background: rgba(255,140,0,0.15); border-radius: 999px; overflow: hidden; }
.fp-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(to right,#FF5500,#FFD700); transition: width 1.2s ease; }
.fp-status-msg { font-size: 13px; font-weight: 600; color: #8a5030; }
.fp-sub-msg { font-size: 11px; color: #b07850; }

/* ── Grammar action buttons ── */
.grammar-actions {
  display: flex;
  gap: 10px;
  margin-top: -8px;
  margin-bottom: 4px;
}
.grammar-action-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(90,79,207,0.35);
  background: rgba(90,79,207,0.07);
  color: #5a4fcf;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.grammar-action-btn:hover {
  background: rgba(90,79,207,0.16);
  border-color: #5a4fcf;
}

/* ── Grammar modal ── */
.grammar-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}
.grammar-modal-box {
  background: #fff;
  border-radius: 0 0 20px 20px;
  width: 100%;
  max-width: 600px;
  max-height: 82vh;
  overflow-y: auto;
  padding: 24px 20px 36px;
  position: relative;
}
.grammar-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(0,0,0,0.07);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  color: #555;
}
.gm-title {
  font-size: 17px;
  font-weight: 700;
  color: #3a3080;
  margin-bottom: 16px;
  padding-right: 36px;
}
.gm-chinese {
  font-size: 13px;
  font-weight: 500;
  color: #8a80c0;
  margin-left: 6px;
}
.gm-content h3 { font-size: 14px; color: #5a4fcf; margin: 14px 0 6px; }
.gm-content p { font-size: 14px; color: #3a3828; line-height: 1.7; margin-bottom: 8px; }
.gm-content ul { padding-left: 18px; margin-bottom: 8px; }
.gm-content li { font-size: 14px; color: #3a3828; line-height: 1.7; margin-bottom: 4px; }
.gm-content div.example {
  background: rgba(90,79,207,0.07);
  border-left: 3px solid #5a4fcf;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: #3a3060;
  margin: 6px 0;
  font-style: italic;
}

/* ── Quiz styles ── */
.quiz-item { margin-bottom: 20px; }
.quiz-q { font-size: 14px; color: #2d2a26; line-height: 1.6; margin-bottom: 10px; }
.quiz-num { font-weight: 700; color: #5a4fcf; }
.quiz-options { display: flex; flex-direction: column; gap: 7px; }
.quiz-opt {
  text-align: left;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1.5px solid #e0ddd8;
  background: #fafaf8;
  font-size: 14px;
  color: #3a3828;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.quiz-opt:hover:not(:disabled) { border-color: #5a4fcf; background: rgba(90,79,207,0.06); }
.quiz-opt.correct { background: #e8f5e9; border-color: #4a8a6a; color: #2d6a4a; }
.quiz-opt.wrong { background: #fdecea; border-color: #c05040; color: #c05040; }
.quiz-fill { display: flex; gap: 8px; }
.quiz-input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid #e0ddd8;
  font-size: 14px;
  outline: none;
}
.quiz-input:focus { border-color: #5a4fcf; }
.quiz-submit-btn {
  padding: 9px 16px;
  border-radius: 10px;
  border: none;
  background: #5a4fcf;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.quiz-submit-btn:disabled { opacity: 0.5; cursor: default; }
.quiz-feedback { margin-top: 8px; font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.correct-fb { color: #2d6a4a; background: #e8f5e9; }
.wrong-fb { color: #c05040; background: #fdecea; }

/* ── Write card ── */
.write-card { padding: 0; overflow: hidden; }
.write-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 1.375rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.toolbar-label { font-size: 13px; font-weight: 600; color: #8a8070; }
.word-count { font-size: 12px; color: #aaa; }
.word-count strong { color: #5a4fcf; }

#diary-input {
  width: 100%;
  min-height: 220px;
  border: none;
  outline: none;
  background: transparent;
  padding: 1rem 1.375rem;
  font-size: 15px;
  line-height: 1.85;
  color: #2d2a26;
  resize: none;
  font-family: inherit;
}
#diary-input::placeholder { color: #c0b8a8; }

/* ── Actions ── */
.action-row { display: flex; gap: 10px; margin-bottom: 1rem; }
.btn-ghost {
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  color: #8a8070;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-ghost:hover { background: white; }
.btn-primary {
  flex: 1;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: none;
  background: #5a4fcf;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Feedback card ── */
.feedback-tabs {
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  margin: -1.25rem -1.375rem 1rem;
  padding: 0 0.5rem;
}
.ftab {
  flex: 1;
  padding: 10px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  color: #aaa;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.ftab.active { color: #5a4fcf; border-bottom-color: #5a4fcf; font-weight: 600; }
.feedback-body { min-height: 80px; font-size: 14px; line-height: 1.75; }

/* Score pills */
.score-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.score-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(90,79,207,0.08);
  border-radius: var(--radius-md);
  padding: 12px 4px;
}
.score-pill-focus {
  background: rgba(90,79,207,0.18);
  border: 1px solid rgba(90,79,207,0.25);
}
.score-num { font-size: 24px; font-weight: 700; color: #5a4fcf; line-height: 1; }
.score-lbl { font-size: 9px; color: #8a8070; margin-top: 4px; text-align: center; }
.score-summary {
  font-size: 14px;
  color: #5a5040;
  line-height: 1.7;
  background: rgba(90,79,207,0.06);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

/* Grammar focus feedback */
.grammar-feedback-box {
  background: rgba(90,79,207,0.07);
  border-left: 3px solid #7f77dd;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
  font-size: 14px;
  color: #3a3060;
  line-height: 1.7;
}
.gfb-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a4fcf;
  margin-bottom: 8px;
}
.gfb-instances {
  background: rgba(90,79,207,0.06);
  border: 1px solid rgba(90,79,207,0.18);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.gfb-instances-label {
  font-size: 11px;
  font-weight: 700;
  color: #5a4fcf;
  margin-bottom: 7px;
}
.gfb-instance {
  font-size: 13px;
  color: #3a3060;
  font-style: italic;
  padding: 4px 0;
  border-bottom: 1px solid rgba(90,79,207,0.1);
  line-height: 1.6;
}
.gfb-instance:last-child { border-bottom: none; }
.gfb-none {
  font-size: 13px;
  color: #a09080;
  font-style: italic;
  padding: 8px 12px;
}

/* Corrections */
.correction-item {
  margin-bottom: 10px;
  padding: 10px 14px;
  border-left: 3px solid #a99ef5;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(90,79,207,0.06);
  font-size: 14px;
  color: #3d3a50;
  line-height: 1.65;
}

/* Improved */
.improved-text {
  background: rgba(80,180,140,0.09);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 14px;
  color: #2d4a3e;
  line-height: 1.85;
}

/* Tips */
.tip-item {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #3a3828;
  line-height: 1.65;
}
.tip-icon { color: #5a4fcf; font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* Loading */
.loading-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aaa;
  font-size: 14px;
  padding: 1rem 0;
}
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #a99ef5;
  animation: bounce 1s infinite;
}
.dot:nth-child(2) { animation-delay: 0.15s; }
.dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%,80%,100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

/* History */
.history-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.history-title {
  font-size: 20px;
  font-weight: 700;
  color: #3a3828;
}
.history-subtitle {
  font-size: 13px;
  color: #8a8070;
  margin-top: 3px;
  line-height: 1.5;
}
.history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.history-action-btn {
  border: 1px solid rgba(110,100,80,0.18);
  background: rgba(255,255,255,0.68);
  color: #5a5040;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.history-action-btn:hover { background: rgba(255,255,255,0.92); border-color: rgba(90,79,207,0.22); }
.history-action-btn.primary {
  color: #fff;
  background: #5a4fcf;
  border-color: #5a4fcf;
}
.history-action-btn.primary:hover { background: #4c42b7; }
.history-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.history-download-note {
  background: rgba(90,79,207,0.08);
  border: 1px solid rgba(90,79,207,0.12);
  border-radius: 12px;
  color: #5a4fcf;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.history-date-group { margin-bottom: 14px; }
.history-date-heading {
  color: #8a8070;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 12px 2px 8px;
}
.history-older-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px dashed rgba(110,100,80,0.22);
  background: rgba(255,255,255,0.48);
  color: #6a604f;
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  margin: 10px 0 14px;
}
.history-older-toggle:hover { background: rgba(255,255,255,0.78); }
.history-item {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background var(--transition);
}
.history-item:hover { background: rgba(255,255,255,0.9); }
.history-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.history-entry-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.history-select {
  width: 16px;
  height: 16px;
  accent-color: #5a4fcf;
  cursor: pointer;
  flex: 0 0 auto;
}
.history-date { font-size: 12px; color: #8a8070; font-weight: 600; }
.history-score-badge {
  font-size: 12px;
  font-weight: 700;
  color: #5a4fcf;
  background: rgba(90,79,207,0.1);
  border-radius: 999px;
  padding: 2px 10px;
}
.history-original-badge {
  font-size: 10px;
  font-weight: 600;
  color: #b06000;
  background: rgba(255,160,0,0.13);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 5px;
  vertical-align: middle;
}
.history-revised-badge {
  font-size: 10px;
  font-weight: 600;
  color: #4a7a50;
  background: rgba(60,160,80,0.12);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 5px;
  vertical-align: middle;
}
.history-topic {
  font-size: 12px;
  color: #5a7a5a;
  margin-bottom: 3px;
  line-height: 1.5;
}
.history-grammar {
  font-size: 12px;
  color: #8a80c0;
  margin-bottom: 4px;
  font-weight: 600;
}
.history-preview {
  font-size: 13px;
  color: #5a5040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-empty {
  text-align: center;
  color: #aaa;
  font-size: 14px;
  padding: 3rem 0;
}

.hidden { display: none !important; }

@media (max-width: 480px) {
  .score-row, .hf-score-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .score-lbl { font-size: 9px; }
  .score-num { font-size: 20px; }
  .ftab { font-size: 11px; }
  .history-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .history-actions {
    justify-content: flex-start;
  }
  .history-action-btn {
    flex: 1 1 auto;
  }
}
/* History detail */
.history-chevron { font-size: 11px; color: #aaa; }
.history-delete-btn {
  background: none;
  border: none;
  color: #c08070;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
}
.history-delete-btn:hover {
  opacity: 1;
  background: rgba(200,80,60,0.1);
  color: #c04030;
}
.history-detail { margin-top: 12px; border-top: 1px solid rgba(0,0,0,0.07); padding-top: 12px; }
.history-full-text { font-size: 14px; color: #3a3828; line-height: 1.8; margin-bottom: 12px; white-space: pre-wrap; }
.history-feedback { margin-top: 12px; }
.hf-score-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.hf-score-pill { display: flex; flex-direction: column; align-items: center; background: rgba(90,79,207,0.08); border-radius: 10px; padding: 8px 4px; }
.hf-focus { background: rgba(90,79,207,0.18); }
.hf-num { font-size: 20px; font-weight: 700; color: #5a4fcf; line-height: 1; }
.hf-lbl { font-size: 10px; color: #8a8070; margin-top: 3px; }
.hf-summary { font-size: 13px; color: #5a5040; background: rgba(90,79,207,0.06); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; line-height: 1.65; }
.hf-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5a4fcf; margin: 10px 0 6px; }
.hf-grammar-feedback { font-size: 13px; color: #3a3060; background: rgba(90,79,207,0.07); border-left: 3px solid #7f77dd; border-radius: 0 10px 10px 0; padding: 8px 12px; line-height: 1.65; margin-bottom: 6px; }
.hf-correction { font-size: 13px; color: #3d3a50; background: rgba(90,79,207,0.06); border-left: 3px solid #a99ef5; border-radius: 0 10px 10px 0; padding: 8px 12px; margin-bottom: 6px; line-height: 1.6; }
.hf-improved { font-size: 13px; color: #2d4a3e; background: rgba(80,180,140,0.09); border-radius: 10px; padding: 10px 12px; line-height: 1.8; margin-bottom: 6px; }
.hf-tip { font-size: 13px; color: #3a3828; padding: 4px 0; line-height: 1.6; }