:root{
  --rose-50:#fff1f4; --rose-100:#ffe4ea; --rose-200:#fecdd6; --rose-300:#fda4af; --rose-400:#fb7185; --rose-500:#f43f5e;
  --lav-50:#f5f3ff; --lav-200:#ddd6fe; --lav-400:#a78bfa; --lav-500:#8b5cf6;
  --mint-50:#ecfeff; --mint-200:#a7f3d0; --mint-400:#34d399; --mint-500:#10b981;
  --sky-50:#eff6ff; --sky-200:#bae6fd; --sky-400:#38bdf8; --sky-500:#0ea5e9;
  --peach-50:#fff7ed; --peach-200:#fed7aa; --peach-400:#fb923c; --peach-500:#f97316;

  --ink:#46364a; --ink-soft:#6b556f; --ink-mute:#8f7a93; --white:#fff; --shadow: 0 8px 20px rgba(70,54,74,.12);

  --bg: var(--rose-50); --accent: var(--rose-400); --accent-strong: var(--rose-500); --card: #ffffff;
}

body{ margin:0; color:var(--ink); background:var(--bg); font-family:"Quicksand", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", sans-serif; }
.font-quicksand{ font-family:"Quicksand", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.font-noto{ font-family:"Noto Sans SC", "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

.theme-rose{ --bg: var(--rose-50); --accent: var(--rose-400); --accent-strong: var(--rose-500); }
.theme-lavender{ --bg: var(--lav-50); --accent: var(--lav-400); --accent-strong: var(--lav-500); }
.theme-mint{ --bg: var(--mint-50); --accent: var(--mint-400); --accent-strong: var(--mint-500); }
.theme-sky{ --bg: var(--sky-50); --accent: var(--sky-400); --accent-strong: var(--sky-500); }
.theme-peach{ --bg: var(--peach-50); --accent: var(--peach-400); --accent-strong: var(--peach-500); }

.app-header{ position:sticky; top:0; backdrop-filter:saturate(1.2) blur(6px); background:color-mix(in oklab, var(--bg) 80%, white); border-bottom:1px solid #eee; z-index:5; }
.brand{ display:flex; align-items:center; gap:14px; padding:18px 22px 10px; }
.brand .logo{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--card); box-shadow:var(--shadow); font-size:24px; }
.brand h1{ font-size:20px; margin:0 0 2px; letter-spacing:.2px; }
.brand .subtitle{ margin:0; color:var(--ink-mute); font-size:13px; }

.tabs{ display:flex; gap:8px; padding:8px 16px 16px; flex-wrap:wrap; }
.tab{ appearance:none; border:1px solid color-mix(in oklab, var(--accent), black 10%); background:color-mix(in oklab, var(--accent), white 88%); color:var(--ink); padding:8px 12px; border-radius:999px; font-weight:600; cursor:pointer; }
.tab.active{ background:var(--accent); color:var(--white); border-color:var(--accent-strong); box-shadow:0 6px 14px color-mix(in oklab, var(--accent), black 15% / 30%); }

main{ padding:22px; max-width:1100px; margin:0 auto; }
.sheet{ display:none; }
.sheet.visible{ display:block; animation:fade .24s ease-out; }
@keyframes fade{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }

.sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:6px 0 14px; }
.sheet-head h2{ margin:0; font-size:22px; }

.search{ display:flex; align-items:center; gap:8px; border:1px solid #eadfea; background:var(--white); padding:8px 10px; border-radius:12px; box-shadow:var(--shadow); }
.search input{ border:none; outline:none; font-size:14px; min-width:260px; }

.legend{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.2px; }
.badge.soft{ background:color-mix(in oklab, var(--accent), white 80%); color:var(--ink-soft); border:1px solid color-mix(in oklab, var(--accent), black 10%); }
.badge.hsk{ background:linear-gradient(120deg, color-mix(in oklab, var(--accent), white 70%), white); }
.badge.topic{ background:linear-gradient(120deg, color-mix(in oklab, var(--accent), white 60%), white); }
.badge.status-new{ background:#fff0f5; }
.badge.status-review{ background:#eef9ff; }
.badge.status-mastered{ background:#edfff6; }

.table-wrap{ overflow:auto; background:var(--white); border-radius:16px; box-shadow:var(--shadow); border:1px solid #f0e8f3; }
.cute-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:980px; }
.cute-table thead th{ position:sticky; top:0; background:color-mix(in oklab, var(--white), var(--bg) 12%); text-align:left; padding:12px; font-size:13px; border-bottom:1px solid #f0e8f3; }
.cute-table tbody td{ padding:12px; font-size:14px; border-bottom:1px dashed #f4eefa; vertical-align:top; }
.cute-table tbody tr:hover{ background:color-mix(in oklab, var(--bg), white 80%); }
.cute-table tbody tr .hanzi{ font-family:"Noto Sans SC", system-ui; font-size:20px; }

.hint{ font-size:12px; color:var(--ink-mute); margin:10px 6px; }
.muted{ color:var(--ink-mute); }

.due-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.due-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--white); padding:12px; border-radius:12px; border:1px solid #f0e8f3; box-shadow:var(--shadow); }
.tag{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid #f0e8f3; background:color-mix(in oklab, var(--accent), white 85%); }

.flash-area{ display:grid; justify-items:center; gap:14px; }
.flash-card{ width:320px; height:200px; perspective:1000px; cursor:pointer; }
.flash-card .side{ position:relative; width:100%; height:100%; border-radius:16px; border:1px solid #f0e8f3; background:var(--white); box-shadow:var(--shadow); display:grid; place-items:center; transition:transform .5s; backface-visibility:hidden; }
.flash-card .front{ position:absolute; inset:0; padding:18px; }
.flash-card .back{ position:absolute; inset:0; padding:18px; transform:rotateY(180deg); }
.flash-card.flipped .front{ transform:rotateY(180deg); }
.flash-card.flipped .back{ transform:rotateY(360deg); }
.flash-card .hanzi{ font-family:"Noto Sans SC", system-ui; font-size:68px; line-height:1; }
.flash-card .pinyin{ margin-top:6px; font-size:18px; color:var(--ink-soft); }
.flash-card .meaning{ font-size:20px; font-weight:700; }
.flash-card .example{ margin-top:6px; color:var(--ink-soft); }

.soft-btn, .primary-btn{ appearance:none; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; border:1px solid transparent; }
.soft-btn{ background:color-mix(in oklab, var(--accent), white 85%); border-color:color-mix(in oklab, var(--accent), black 10%); }
.primary-btn{ background:var(--accent); color:var(--white); box-shadow:0 8px 16px color-mix(in oklab, var(--accent), black 20% / 28%); }

.stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.stat-card{ background:var(--white); border:1px solid #f0e8f3; border-radius:16px; padding:16px; box-shadow:var(--shadow); text-align:center; }
.stat-num{ font-size:28px; font-weight:800; color:var(--accent-strong); }
.stat-label{ font-size:12px; color:var(--ink-mute); }

.mini-bars{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; margin-top:12px; }
.mini-bar{ background:var(--white); border:1px solid #f0e8f3; border-radius:12px; padding:10px; box-shadow:var(--shadow); }
.mini-bar .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mini-bar .bar{ height:8px; width:100%; background:#f6f0f9; border-radius:999px; overflow:hidden; margin-top:8px; }
.mini-bar .bar > span{ display:block; height:100%; background:var(--accent); width:0%; transition:width .4s ease; }

.settings-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.setting{ background:var(--white); border:1px solid #f0e8f3; border-radius:12px; padding:12px; box-shadow:var(--shadow); display:grid; gap:8px; }
.setting select{ padding:8px 10px; border-radius:10px; border:1px solid #e9dff0; }

.app-footer{ text-align:center; color:var(--ink-mute); font-size:12px; padding:24px; }

/* Edit panel */
.edit-panel{ background:transparent; }
.word-form{ margin-top:10px; background:var(--white); border:1px solid #f0e8f3; border-radius:16px; padding:12px; box-shadow:var(--shadow); }
.word-form .grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; }
.word-form label{ display:grid; gap:6px; font-size:12px; color:var(--ink-soft); }
.word-form input{ padding:8px 10px; border-radius:10px; border:1px solid #e9dff0; font-size:14px; }
.row-actions{ display:flex; gap:10px; align-items:center; margin-top:12px; }