:root {
  --bg: #F8FAFC;
  --bg-soft: #F1F5F9;
  --surface: #FFFFFF;

  --ink: #0F172A;
  --ink-soft: #334155;
  --ink-muted: #64748B;
  --ink-dim: #94A3B8;

  --brand: #2563EB;
  --brand-deep: #1D4ED8;
  --brand-soft: #DBEAFE;
  --brand-tint: #EFF6FF;

  --success: #10B981;
  --success-soft: #D1FAE5;
  --success-tint: #ECFDF5;

  --danger: #DC2626;
  --danger-tint: #FEF2F2;
  --danger-soft: #FECACA;

  --orange: #EA580C;
  --orange-tint: #FFF7ED;
  --orange-soft: #FED7AA;

  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 30px 60px -15px rgba(15, 23, 42, 0.2), 0 10px 25px -8px rgba(37, 99, 235, 0.1);
}

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

html, body { height: 100%; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ─── Layout ─── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

nav {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
}

.logo-mark {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-radius: 8px; position: relative;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.logo-mark::after {
  content: ''; position: absolute; inset: 7px;
  background: white; border-radius: 3px;
}

.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links button {
  background: transparent; border: none; cursor: pointer; font: inherit;
  padding: 8px 14px; border-radius: 8px; color: var(--ink-soft); font-weight: 500;
}
.nav-links button:hover { background: var(--bg-soft); color: var(--ink); }
.nav-links button.active { background: var(--brand-tint); color: var(--brand-deep); font-weight: 600; }

main { padding: 32px 0 80px; }

/* ─── Buttons ─── */
.btn {
  font-family: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: all .15s ease; letter-spacing: -0.005em; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--brand); color: white;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-deep); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.btn-ghost {
  background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--ink-muted); background: var(--bg-soft); }
.btn-danger {
  background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger-soft);
}
.btn-danger:hover:not(:disabled) { background: var(--danger); color: white; }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-sm { padding: 6px 10px; font-size: 13px; }

/* ─── Forms ─── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.input, .textarea, .select {
  font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.textarea { min-height: 160px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }

/* ─── Cards ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
}
.card + .card { margin-top: 16px; }
.card-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; }
.card-subtitle { font-size: 13px; color: var(--ink-muted); margin-top: -8px; margin-bottom: 16px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.stat-label { font-size: 12px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; color: var(--ink); }
.stat-value small { font-size: 14px; color: var(--ink-muted); font-weight: 500; margin-left: 6px; }

/* ─── Table ─── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-weight: 600; color: var(--ink-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.table tr:hover td { background: var(--bg-soft); }
.table .actions { white-space: nowrap; text-align: right; }
.table .actions .btn + .btn { margin-left: 6px; }

/* ─── Badges ─── */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.badge-new     { background: var(--bg-soft); color: var(--ink-soft); }
.badge-learning{ background: var(--orange-tint); color: var(--orange); }
.badge-learned { background: var(--success-tint); color: var(--success); }
.badge-tutor   { background: var(--brand-tint); color: var(--brand-deep); }
.badge-student { background: var(--bg-soft); color: var(--ink-soft); }
.badge-leech   { background: var(--danger-tint); color: var(--danger); }

/* ─── Inline alerts (форма с предупреждением) ─── */
.inline-alert {
  padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--border-strong);
}
.inline-alert-warn {
  background: var(--orange-tint); color: var(--ink);
  border-color: var(--orange-soft);
}
.inline-alert-warn strong { color: var(--orange); }
.inline-alert-info {
  background: var(--brand-tint); color: var(--ink);
  border-color: var(--brand-soft);
}
.inline-alert-info strong { color: var(--brand-deep); }
.inline-alert u { text-decoration: underline; text-decoration-color: var(--brand); }

/* ─── Таблица bulk preview — строка-дубль ─── */
.table tr.row-duplicate td {
  background: var(--bg-soft);
  opacity: .55;
}
.table tr.row-duplicate:hover td { background: var(--bg-soft); opacity: .75; }

/* ─── Training card ─── */
.train-wrap {
  max-width: 640px; margin: 40px auto; text-align: center;
}
.train-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 48px 32px; box-shadow: var(--shadow-md);
}
.train-prompt {
  font-size: 44px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--ink);
}
.train-context { color: var(--ink-muted); font-style: italic; margin-bottom: 28px; font-size: 15px; min-height: 22px; }
.train-input {
  width: 100%; max-width: 420px; padding: 14px 16px; text-align: center;
  font-size: 20px; border-radius: 12px; border: 2px solid var(--border-strong);
  background: var(--surface); color: var(--ink); font-family: inherit;
}
.train-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
.train-feedback {
  margin-top: 24px; padding: 16px; border-radius: 12px; font-weight: 600;
}
.train-feedback.correct { background: var(--success-tint); color: var(--success); }
.train-feedback.typo    { background: var(--orange-tint); color: var(--orange); }
.train-feedback.wrong   { background: var(--danger-tint); color: var(--danger); }
.train-meta { margin-top: 8px; font-size: 13px; color: var(--ink-muted); font-weight: 500; }

/* ─── Rating panel (3 кнопки самооценки) ─── */
.rating-panel { margin-top: 22px; }
.rating-hint {
  font-size: 13px; color: var(--ink-muted); margin-bottom: 12px; font-weight: 500;
}
.rating-buttons {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.rate-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  font-family: inherit; color: var(--ink); transition: transform .1s, box-shadow .15s;
}
.rate-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rate-btn:active { transform: translateY(0); }
.rate-btn .rate-label { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.rate-btn .rate-kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; padding: 2px 8px; border-radius: 6px;
  background: var(--bg-soft); color: var(--ink-muted);
}
.rate-btn .rate-note { font-size: 12px; color: var(--ink-muted); font-weight: 500; }

.rate-btn.rate-again { border-color: var(--danger-soft); }
.rate-btn.rate-again:hover { background: var(--danger-tint); border-color: var(--danger); }
.rate-btn.rate-again .rate-label { color: var(--danger); }

.rate-btn.rate-good { border-color: var(--brand-soft); }
.rate-btn.rate-good:hover { background: var(--brand-tint); border-color: var(--brand); }
.rate-btn.rate-good .rate-label { color: var(--brand-deep); }

.rate-btn.rate-easy { border-color: var(--success-soft); }
.rate-btn.rate-easy:hover { background: var(--success-tint); border-color: var(--success); }
.rate-btn.rate-easy .rate-label { color: var(--success); }

.train-progress {
  display: flex; justify-content: center; gap: 6px; margin-bottom: 24px;
  font-size: 13px; color: var(--ink-muted);
}

/* ─── Heat-strip (14 дней, слева направо) ─── */
.heat-strip {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 6px;
}
.heat-cell {
  padding: 10px 4px 12px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  transition: transform .12s ease, box-shadow .12s ease;
  min-width: 0;
}
.heat-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.heat-cell .dow {
  font-size: 11px; color: var(--ink-muted); font-weight: 600;
  text-transform: lowercase; letter-spacing: .04em;
}
.heat-cell .date { font-size: 13px; color: var(--ink); font-weight: 700; margin-top: 3px; }
.heat-cell .cnt  { font-size: 12px; color: var(--ink-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

.heat-cell.l0 { background: var(--bg-soft); }
.heat-cell.l1 { background: var(--brand-tint); border-color: var(--brand-soft); }
.heat-cell.l2 { background: var(--brand-soft); border-color: #93C5FD; }
.heat-cell.l3 { background: #60A5FA; border-color: #60A5FA; }
.heat-cell.l3 .dow, .heat-cell.l3 .date, .heat-cell.l3 .cnt { color: white; }
.heat-cell.l4 { background: var(--brand-deep); border-color: var(--brand-deep); }
.heat-cell.l4 .dow, .heat-cell.l4 .date, .heat-cell.l4 .cnt { color: white; }

@media (max-width: 720px) {
  .heat-strip { grid-template-columns: repeat(7, 1fr); }
}

.chart { width: 100%; height: 180px; }
.chart polyline { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { fill: url(#gradient); opacity: .3; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--ink-dim); font-size: 10px; }

/* ─── Login ─── */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 40px 32px; box-shadow: var(--shadow-lg);
}
.login-card h1 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 6px; }
.login-card p  { color: var(--ink-muted); font-size: 14px; margin-bottom: 24px; }
.login-card .field + .field { margin-top: 14px; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 20px; }
.login-error { color: var(--danger); font-size: 13px; margin-top: 12px; text-align: center; min-height: 18px; }

/* ─── Toolbar ─── */
.toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 20px;
}
.toolbar .spacer { flex: 1; }

.empty-state {
  text-align: center; padding: 60px 24px;
  color: var(--ink-muted);
}
.empty-state h2 { color: var(--ink); font-size: 22px; margin-bottom: 8px; letter-spacing: -0.01em; }
.empty-state p  { margin-bottom: 20px; }

/* ─── Tabs inside content ─── */
.seg { display: inline-flex; background: var(--bg-soft); border-radius: 10px; padding: 4px; gap: 2px; }
.seg button {
  background: transparent; border: none; cursor: pointer; font: inherit;
  padding: 6px 14px; border-radius: 8px; font-weight: 600; color: var(--ink-muted); font-size: 13px;
}
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.hint { font-size: 13px; color: var(--ink-muted); }
.hint code { background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* ─── Toasts ─── */
.toast-stack { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  background: var(--ink); color: white; padding: 10px 16px; border-radius: 10px;
  box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500;
  animation: toastIn .2s ease;
}
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ─── Misc ─── */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }

.muted { color: var(--ink-muted); }
.small { font-size: 13px; }
.center { text-align: center; }

[x-cloak] { display: none !important; }

@media (max-width: 720px) {
  .train-prompt { font-size: 32px; }
  .toolbar { gap: 8px; }
  .card { padding: 18px; }
}