:root {
  --red: #c0392b;
  --red-dark: #962d22;
  --ink: #222;
  --muted: #6b7280;
  --bg: #f4f2ee;
  --panel: #ffffff;
  --border: #e5e1da;
  --pinyin-color: #2b6cb0;
  --meaning-color: #22863a;
  /* Mau theo thanh dieu tren nen trang (khop backend/ankitool/constants/pinyin.py) */
  --tone-1: #C62828;
  --tone-2: #2E7D32;
  --tone-3: #1565C0;
  --tone-4: #7B1FA2;
  --tone-5: #616161;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.hidden { display: none !important; }

/* Chu/pinyin to mau theo thanh dieu */
.tone-1 { color: var(--tone-1); }
.tone-2 { color: var(--tone-2); }
.tone-3 { color: var(--tone-3); }
.tone-4 { color: var(--tone-4); }
.tone-5 { color: var(--tone-5); }

/* ---------- Layout ---------- */
.layout {
  max-width: 1180px;
  margin: 24px auto;
  padding: 0 24px 60px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 22px 24px;
}
.panel h2 {
  margin: 0 0 14px;
  font-size: 17px;
}