:root{--bg-primary: #0f172a;--bg-secondary: #152238;--bg-surface: rgba(30, 41, 59, .92);--bg-highlight: rgba(99, 102, 241, .12);--border: rgba(148, 163, 184, .22);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent: #4f46e5;--accent-light: #818cf8;--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--shadow: 0 30px 80px rgba(2, 6, 23, .45)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:radial-gradient(circle at top right,rgba(99,102,241,.28),transparent 30%),radial-gradient(circle at bottom left,rgba(34,197,94,.16),transparent 24%),var(--bg-primary);color:var(--text-primary)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.sidebar{border-right:1px solid var(--border);background:#0f172abf;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:24px 20px;position:sticky;top:0;height:100vh}.brand{padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#4f46e566,#1e293bcc);margin-bottom:24px;box-shadow:var(--shadow)}.brand small,.muted{color:var(--text-secondary)}.nav-grid{display:grid;gap:10px}.nav-link{padding:12px 14px;border-radius:14px;color:var(--text-secondary);border:1px solid transparent;display:flex;align-items:center;justify-content:space-between}.nav-link.active,.nav-link:hover{color:var(--text-primary);border-color:var(--border);background:#6366f11f}.main-panel{padding:28px}.page-header{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:20px}.page-grid,.cards-grid{display:grid;gap:16px}.cards-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.cards-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.cards-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{border:1px solid var(--border);border-radius:22px;background:var(--bg-surface);box-shadow:var(--shadow);padding:20px}.card h3,.card h4,.card p{margin-top:0}.inset-card{padding:16px;box-shadow:none}.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px;color:var(--text-secondary);border:1px solid var(--border)}.badge.success{color:#86efac}.badge.warning{color:#fcd34d}.badge.danger{color:#fca5a5}.hero-card{padding:26px;background:linear-gradient(145deg,#4f46e552,#0f172ae0)}.form-grid{display:grid;gap:12px}.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:#0f172ab3;color:var(--text-primary)}.button-row{display:flex;flex-wrap:wrap;gap:10px}.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.stack-sm{display:grid;gap:12px}.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card audio{width:100%}.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.btn{border:1px solid transparent;border-radius:14px;padding:12px 16px;background:#334155b8;color:var(--text-primary)}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-light))}.btn.ghost{border-color:var(--border);background:transparent}.stat-value{font-size:32px;font-weight:700}.practice-hero{display:grid;gap:12px}.hanzi{font-size:clamp(40px,8vw,76px);line-height:1.05;margin:0}.pinyin{font-size:clamp(24px,4vw,40px);color:#c4b5fd;margin:0}.translation{font-size:18px;color:var(--text-secondary)}.table-list{display:grid;gap:10px}.table-row{display:grid;gap:10px;padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:#0f172a59}.compact-grid .table-row{min-height:100%}.callout{padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:#4f46e51f}.callout.success{border-color:#22c55e59;background:#22c55e1f}.callout.warning{border-color:#f59e0b59;background:#f59e0b1f}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-panel{width:min(480px,100%)}@media(max-width:960px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border)}.cards-grid.three,.cards-grid.four,.cards-grid.two,.filter-grid,.result-grid{grid-template-columns:1fr}.main-panel{padding:20px}}