:root {
  --ink:#102a43; --muted:#627d98; --line:#d9e2ec; --paper:#f5f7fa; --card:#fff;
  --accent:#f97316; --accent-dark:#c2410c; --mint:#dff7ec; --blue:#e6f0ff;
  --nav-h:72px; --shadow:0 8px 26px rgba(16,42,67,.07);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; border:0; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
h1,h2,h3,p { margin:0; } h1 { font-size:clamp(19px,4vw,28px); line-height:1.12; letter-spacing:-.035em; } h2 { letter-spacing:-.03em; line-height:1.18; } h3 { font-size:18px; }
.eyebrow { color:#829ab1; font-size:10px; font-weight:850; letter-spacing:.15em; }
.muted { color:var(--muted); } .small { font-size:13px; }
.hidden { display:none !important; }

.topbar { padding:14px max(16px,calc((100vw - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--ink); color:white; position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:var(--accent); color:white; font-weight:900; font-size:18px; }
.topbar .eyebrow { color:#9fb3c8; }
.desktop-nav { display:none; gap:4px; }
.desktop-nav button { padding:9px 12px; border-radius:9px; background:transparent; color:#bcccdc; font-weight:750; }
.desktop-nav button[aria-current="page"] { background:rgba(255,255,255,.12); color:white; }

main { width:min(1120px,calc(100% - 24px)); margin:18px auto calc(var(--nav-h) + 28px); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.auth-panel { max-width:420px; margin:48px auto; }
.auth-intro { margin-bottom:22px; } .auth-intro h2 { margin-top:4px; }
.tabs { display:flex; gap:4px; background:var(--paper); padding:4px; border-radius:10px; margin-bottom:20px; }
.tab { flex:1; padding:10px; color:var(--muted); border-radius:7px; background:transparent; }
.tab.active { background:white; color:var(--ink); box-shadow:0 1px 4px rgba(16,42,67,.12); font-weight:800; }
label { display:grid; gap:6px; font-weight:700; color:var(--ink); margin:13px 0; }
input,textarea,select { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; color:var(--ink); background:white; outline:none; }
input:focus,textarea:focus,select:focus { border-color:#7aa7d9; box-shadow:0 0 0 3px #e6f0ff; }

.primary,.secondary { border-radius:10px; padding:11px 14px; font-weight:850; }
.primary { width:100%; background:var(--accent); color:#fff; } .primary:hover { background:var(--accent-dark); }
.primary.compact { width:auto; }
.secondary { background:var(--blue); color:#1e40af; }
.link-button { color:var(--accent-dark); background:none; font-weight:850; padding:4px; }
.close { background:none; font-size:26px; color:var(--muted); }
.danger-button { width:100%; border-radius:10px; padding:11px; background:#fff1f2; color:#be123c; font-weight:800; }

.mobile-page-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:4px 2px 16px; }
.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#dbeafe; color:#1d4ed8; font-weight:900; }
.avatar.large { width:56px; height:56px; font-size:20px; flex:0 0 auto; }
.section-copy { margin:4px 2px 18px; max-width:680px; }
.section-copy h2 { font-size:clamp(26px,5vw,36px); margin:4px 0 6px; }
.section-copy p { color:var(--muted); }
.section-head,.today-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }

.today-hero { background:linear-gradient(135deg,#fff7ed 0%,#fff 70%); border-color:#fed7aa; }
.today-hero h2 { font-size:clamp(28px,6vw,46px); margin:12px 0 7px; max-width:850px; }
.today-hero > .muted { margin-bottom:18px; }
.pill { display:inline-flex; align-items:center; background:var(--mint); color:#087443; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:850; white-space:nowrap; }

.quick-panel { margin-top:14px; }
.quick-presets { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:14px; }
.quick-presets button,.filter-row button { background:#edf2f7; color:#486581; border-radius:10px; padding:10px 8px; font-weight:800; }
.quick-presets button.active,.filter-row button.active { background:var(--ink); color:white; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.stack { display:grid; gap:10px; margin-top:14px; }
.item { border:1px solid var(--line); border-radius:11px; padding:12px; background:white; }
.item strong { display:block; line-height:1.35; } .item small { color:var(--muted); }
.item .item-action { float:right; color:var(--accent-dark); background:none; font-size:12px; font-weight:850; padding:2px; }
.empty-state { padding:18px 12px; border:1px dashed var(--line); border-radius:11px; color:var(--muted); text-align:center; }
.week-list { display:grid; gap:12px; margin-top:14px; }
.week-group { border-top:1px solid var(--line); padding-top:10px; } .week-group:first-child { border-top:0; padding-top:0; }
.week-group-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13px; font-weight:850; }
.week-chip { color:var(--muted); font-size:12px; }
.week-event { display:flex; gap:9px; align-items:flex-start; padding:7px 0; }
.week-time { width:44px; flex:0 0 auto; color:var(--accent-dark); font-weight:850; font-size:12px; padding-top:2px; }
.week-event-main { flex:1; min-width:0; } .week-event-main strong { display:block; }
.week-event-main small { color:var(--muted); } .week-event button { background:none; color:#94a3b8; padding:1px 4px; font-size:12px; }

.domain-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.domain-card { position:relative; overflow:hidden; }
.domain-card::after { content:""; position:absolute; width:100px; height:100px; border-radius:50%; right:-40px; top:-40px; background:#eff6ff; }
.domain-card.ielts::after { background:#fff7ed; }
.domain-card h3 { font-size:24px; margin:6px 0 4px; position:relative; z-index:1; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
.metric { background:var(--paper); border-radius:10px; padding:9px; }
.metric b { display:block; font-size:18px; } .metric span { color:var(--muted); font-size:11px; }
.progress-track { height:8px; border-radius:999px; background:#e9eff5; overflow:hidden; margin:10px 0 6px; }
.progress-bar { height:100%; background:var(--accent); border-radius:inherit; min-width:0; }
.domain-card.ck1 .progress-bar { background:#2563eb; }
.card-cta { width:100%; margin-top:12px; border-radius:10px; padding:10px; background:#f1f5f9; color:var(--ink); font-weight:850; }
.info-card { margin-top:14px; } .flow-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0; }
.flow-row span { background:var(--paper); border-radius:999px; padding:6px 10px; font-weight:750; }
.filter-row { display:flex; gap:8px; margin-bottom:12px; overflow-x:auto; padding-bottom:2px; }
.filter-row button { min-width:80px; }
.review-stack .item { padding:14px; }
.reveal-button { width:100%; margin-top:10px; border-radius:8px; padding:9px; background:#eff6ff; color:#1d4ed8; font-weight:800; }
.review-answer { margin-top:8px; padding:9px 10px; background:#f8fafc; border-radius:8px; color:#486581; }
.review-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:10px; }
.review-buttons button { float:none; background:#f1f5f9; color:#334e68; border-radius:8px; padding:8px; font-size:12px; }
.review-buttons button[data-quality="2"] { color:#b42318; background:#fff1f2; }
.review-buttons button[data-quality="5"] { color:#087443; background:#ecfdf5; }
.legend { display:flex; flex-wrap:wrap; gap:16px; margin:14px 0; }
.legend span { display:flex; gap:7px; align-items:center; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-new { background:#94a3b8; } .dot-learning { background:#f97316; } .dot-mastered { background:#16a34a; }
.profile-card { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.divider { height:1px; background:var(--line); margin:18px 0; }

.bottom-nav { position:fixed; z-index:30; left:0; right:0; bottom:0; min-height:var(--nav-h); padding:6px 8px max(6px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,1fr); background:rgba(255,255,255,.96); border-top:1px solid var(--line); backdrop-filter:blur(14px); }
.bottom-nav button { position:relative; display:grid; place-items:center; align-content:center; gap:2px; background:transparent; color:#829ab1; font-size:11px; font-weight:750; min-width:0; border-radius:10px; }
.bottom-nav button[aria-current="page"] { color:var(--accent-dark); background:#fff7ed; }
.nav-icon { font-size:17px; line-height:1; }
.bottom-nav button[data-count]:not([data-count=""])::after { content:attr(data-count); position:absolute; top:2px; right:20%; min-width:16px; height:16px; padding:0 4px; display:grid; place-items:center; border-radius:999px; background:#ef4444; color:white; font-size:9px; font-weight:900; }

.error { color:#b42318; min-height:20px; margin-top:10px; }
.toast { position:fixed; z-index:60; bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,20px); opacity:0; background:var(--ink); color:white; padding:10px 14px; border-radius:10px; transition:.2s; pointer-events:none; max-width:calc(100% - 28px); text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
dialog { border:0; border-radius:16px; width:min(420px,calc(100% - 24px)); padding:22px; box-shadow:0 24px 80px rgba(16,42,67,.28); }
dialog::backdrop { background:rgba(16,42,67,.45); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

@media (min-width:820px) {
  .desktop-nav { display:flex; }
  .mobile-page-head { display:none; }
  .bottom-nav { display:none; }
  main { margin-bottom:50px; }
  .app-shell { padding-top:8px; }
  .view { animation:fade .15s ease-out; }
  .toast { bottom:20px; }
}
@media (max-width:819px) {
  .topbar { padding:12px 14px; }
  .topbar h1 { font-size:18px; }
  main { width:calc(100% - 20px); margin-top:12px; }
  .two-col,.domain-grid { grid-template-columns:1fr; }
  .quick-presets { grid-template-columns:repeat(4,1fr); }
  .quick-presets .wide { grid-column:span 4; }
  .primary.compact { width:100%; }
  .today-hero h2 { font-size:31px; }
  .panel { padding:15px; border-radius:14px; }
}
@keyframes fade { from { opacity:.55; transform:translateY(3px); } to { opacity:1; transform:none; } }