/* ==========================================================
   JARRY — Design System (style.css)
   Tokens · Base · Layout · Components · States · Dark Mode
   ========================================================== */

:root {
  /* Brand */
  --color-primary: #6366F1;
  --color-primary-hover: #4F46E5;
  --color-primary-soft: #EEF2FF;

  /* Semantic (Memory System) */
  --color-success: #10B981;
  --color-success-soft: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-soft: #FEF3C7;
  --color-danger: #EF4444;
  --color-danger-soft: #FEE2E2;

  /* Surface */
  --bg-body: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-muted: #F1F5F9;
  --border-color: #E2E8F0;
  --text-main: #0F172A;
  --text-muted: #64748B;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

  /* Spacing */
  --space-1: .25rem; --space-2: .5rem; --space-3: 1rem;
  --space-4: 1.5rem; --space-5: 2rem;

  /* Layout */
  --sidebar-w: 260px;
  --topbar-h: 64px;

  /* Typography */
  --font-base: 'Noto Sans Thai', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Bootstrap overrides */
  --bs-primary: #6366F1;
  --bs-primary-rgb: 99, 102, 241;
  --bs-body-font-family: var(--font-base);
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-main);
  --bs-border-color: var(--border-color);
  --bs-link-color: var(--color-primary);
}

[data-theme="dark"] {
  --color-primary: #818CF8;
  --color-primary-hover: #A5B4FC;
  --color-primary-soft: rgba(129, 140, 248, .15);
  --color-success-soft: rgba(16, 185, 129, .18);
  --color-warning-soft: rgba(245, 158, 11, .18);
  --color-danger-soft: rgba(239, 68, 68, .18);
  --bg-body: #0B1120;
  --bg-surface: #151E32;
  --bg-muted: #1E293B;
  --border-color: #26334D;
  --text-main: #E2E8F0;
  --text-muted: #94A3B8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-main);
  --bs-border-color: var(--border-color);
  --bs-link-color: var(--color-primary);
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--text-muted);
  color-scheme: dark;
}

/* ---------- Base ---------- */
/* กันหน้ากระตุก/ขยับเมื่อแถบเลื่อนโผล่-หายระหว่างโหลดเนื้อหา */
html { scrollbar-gutter: stable; }
.sidebar-nav { scrollbar-gutter: stable; }
body { font-family: var(--font-base); background: var(--bg-body); color: var(--text-main); -webkit-font-smoothing: antialiased; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
.text-muted, .text-secondary { color: var(--text-muted) !important; }
.text-body { color: var(--text-main) !important; }
h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: -.01em; }
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.page-subtitle { color: var(--text-muted); margin: 0; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
#pageNavigationProgress { position: fixed; inset: 0 auto auto 0; width: 0; height: 3px; background: var(--color-primary); opacity: 0; z-index: 2000; transition: width .2s ease, opacity .2s ease; }
#pageNavigationProgress.active { width: 85%; opacity: 1; }

/* ---------- App Layout ---------- */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--bg-surface); border-right: 1px solid var(--border-color);
  display: flex; flex-direction: column; z-index: 1040;
  transition: transform .25s ease;
}
.sidebar-brand { height: var(--topbar-h); display: flex; align-items: center; gap: .6rem; padding: 0 1.25rem; font-weight: 800; font-size: 1.35rem; color: var(--text-main); }
.sidebar-brand .logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #fff; display: grid; place-items: center; font-size: 1.1rem; }
.sidebar-nav { padding: .75rem; flex: 1; overflow-y: auto; }
.sidebar-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: .75rem .75rem .35rem; }
.sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; transition: background .15s, color .15s; }
.sidebar-link i { font-size: 1.15rem; }
.sidebar-link:hover { background: var(--bg-muted); color: var(--text-main); }
.sidebar-link.active { background: var(--color-primary-soft); color: var(--color-primary); }
.sidebar-link .badge { margin-left: auto; }
.sidebar-footer { padding: 1rem; border-top: 1px solid var(--border-color); }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1035; }

.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.app-topbar { height: var(--topbar-h); background: var(--bg-surface); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1030; }
.app-content { padding: 1.5rem; flex: 1; max-width: 1280px; width: 100%; margin: 0 auto; }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); display: inline-grid; place-items: center; font-size: 1.2rem; position: relative; transition: background .15s; }
.icon-btn:hover { background: var(--bg-muted); color: var(--text-main); }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-danger); border: 2px solid var(--bg-surface); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366F1, #EC4899); color: #fff; display: inline-grid; place-items: center; font-weight: 600; font-size: .9rem; }

/* Collapsed sidebar (desktop): icon rail */
@media (min-width: 992px) {
  .app-sidebar, .app-main { transition: width .2s ease, margin-left .2s ease; }
  .sidebar-collapsed { --sidebar-w: 76px; }
  .sidebar-collapsed .sidebar-text, .sidebar-collapsed .sidebar-label, .sidebar-collapsed .sidebar-link .badge { display: none; }
  .sidebar-collapsed .sidebar-brand { padding: 0; justify-content: center; }
  .sidebar-collapsed .sidebar-link { justify-content: center; padding: .7rem 0; }
  .sidebar-collapsed .sidebar-nav { padding: .75rem .6rem; }
  .sidebar-collapsed .sidebar-footer { display: none; }
}

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .app-sidebar.open ~ .sidebar-backdrop { display: block; }
  .app-main { margin-left: 0; }
  .app-content { padding: 1rem; }
  .app-topbar { padding: 0 1rem; }
}

/* ---------- Components ---------- */
.card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-hover { transition: box-shadow .15s, border-color .15s; }
.card-hover:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.card-header { background: transparent; border-bottom: 1px solid var(--border-color); font-weight: 600; }

.btn { border-radius: var(--radius-sm); font-weight: 500; transition: none; }
.btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-hover); --bs-btn-hover-border-color: var(--color-primary-hover); --bs-btn-active-bg: var(--color-primary-hover); --bs-btn-active-border-color: var(--color-primary-hover); --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary); }
.btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); --bs-btn-active-bg: var(--color-primary); }
.btn-soft { background: var(--color-primary-soft); color: var(--color-primary); border: 0; }
.btn-soft:hover { background: var(--color-primary); color: #fff; }
.btn.loading { pointer-events: none; opacity: .75; }
.btn.loading .spinner-border { display: inline-block !important; }

.form-control, .form-select { border-radius: var(--radius-sm); background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-main); padding: .6rem .85rem; }
.form-control[type="file"]::file-selector-button { color: var(--text-main); background-color: var(--bg-muted); border-inline-end: 1px solid var(--border-color); }
.form-control[type="file"]:hover::file-selector-button { color: var(--color-primary); background-color: var(--color-primary-soft); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--bg-muted); color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); border-color: var(--border-color); opacity: 1; cursor: not-allowed; }
.form-control:disabled::selection { background: transparent; }
.form-control::placeholder { color: var(--text-muted); opacity: .7; }
.form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 .2rem rgba(99,102,241,.2); background-color: var(--bg-surface); color: var(--text-main); }
.form-label { font-weight: 500; font-size: .9rem; }
.input-group-text { background: var(--bg-muted); border-color: var(--border-color); color: var(--text-muted); }
.invalid-feedback { font-size: .82rem; }
.shake { animation: shake .4s; }
@keyframes shake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }

.modal-content { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.modal-header, .modal-footer { border-color: var(--border-color); }
.modal-backdrop { --bs-backdrop-bg: #334155; --bs-backdrop-opacity: .36; }
[data-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #020617; --bs-backdrop-opacity: .65; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
.dropdown-menu { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .5rem; }
.dropdown-item { border-radius: var(--radius-sm); color: var(--text-main); padding: .5rem .75rem; }
.dropdown-item:hover { background: var(--bg-muted); color: var(--text-main); }
.dropdown-divider { border-color: var(--border-color); }
.nav-pills .nav-link { color: var(--text-muted); border-radius: var(--radius-sm); font-weight: 500; }
.nav-pills .nav-link.active { background: var(--color-primary); color: #fff; }
.pagination { --bs-pagination-bg: var(--bg-surface); --bs-pagination-border-color: var(--border-color); --bs-pagination-color: var(--text-main); --bs-pagination-active-bg: var(--color-primary); --bs-pagination-active-border-color: var(--color-primary); --bs-pagination-hover-bg: var(--bg-muted); --bs-pagination-disabled-bg: var(--bg-muted); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-main); --bs-table-border-color: var(--border-color); }
.progress { background: var(--bg-muted); border-radius: 99px; height: 8px; }
.progress-bar { background: var(--color-primary); border-radius: 99px; }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }

/* Badges */
.badge-soft { font-weight: 500; border-radius: 99px; padding: .35em .75em; }
.badge-soft-primary { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-soft-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-soft-warning { background: var(--color-warning-soft); color: #B45309; }
.badge-soft-danger  { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-soft-muted   { background: var(--bg-muted); color: var(--text-muted); }
[data-theme="dark"] .badge-soft-warning { color: var(--color-warning); }

/* Stat cards */
.stat-card { padding: 1.25rem; display: flex; align-items: center; gap: 1rem; }
.stat-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 1.5rem; flex-shrink: 0; }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--text-muted); font-size: .85rem; }
.bg-primary-soft { background: var(--color-primary-soft); color: var(--color-primary); }
.bg-success-soft { background: var(--color-success-soft); color: var(--color-success); }
.bg-warning-soft { background: var(--color-warning-soft); color: var(--color-warning); }
.bg-danger-soft  { background: var(--color-danger-soft); color: var(--color-danger); }

/* Memory level */
.mem-dots { display: inline-flex; gap: 3px; }
.mem-dots span { width: 18px; height: 6px; border-radius: 99px; background: var(--border-color); }
.mem-dots.lv-low span.on  { background: var(--color-danger); }
.mem-dots.lv-mid span.on  { background: var(--color-warning); }
.mem-dots.lv-high span.on { background: var(--color-success); }
.lv-bar-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; font-size: .9rem; }
.lv-bar-row .lv-name { width: 120px; color: var(--text-muted); }
.lv-bar-row .progress { flex: 1; }
.lv-bar-row .lv-count { width: 32px; text-align: right; font-weight: 600; }

/* Word card */
.word-card { padding: 1.25rem; height: 100%; display: flex; flex-direction: column; cursor: pointer; }
.word-card .word-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.word-card .phonetic { color: var(--text-muted); font-size: .9rem; }
.word-card .meaning { margin: .5rem 0 1rem; flex: 1; }
.word-card .card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .75rem; border-top: 1px dashed var(--border-color); font-size: .8rem; color: var(--text-muted); }
.word-card.mastered { border-color: var(--color-success); }
.btn-speak { border: 0; background: var(--bg-muted); color: var(--text-muted); width: 32px; height: 32px; border-radius: 50%; }
.btn-speak:hover { background: var(--color-primary-soft); color: var(--color-primary); }

/* Category */
.cat-card { padding: 1.25rem; text-align: center; position: relative; }
.cat-icon { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto .75rem; color: #fff; }
.cat-actions { position: absolute; top: .5rem; right: .5rem; opacity: 0; visibility: hidden; pointer-events: none; }
.cat-card:hover .cat-actions, .cat-card:focus-within .cat-actions { opacity: 1; visibility: visible; pointer-events: auto; }
@media (hover: none) { .cat-actions { opacity: 1; visibility: visible; pointer-events: auto; } }

/* Empty / Skeleton */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 3.5rem; color: var(--border-color); display: block; margin-bottom: .75rem; }
.empty-state h5 { color: var(--text-main); }
.skeleton { background: linear-gradient(90deg, var(--bg-muted) 25%, var(--border-color) 50%, var(--bg-muted) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-line { height: 14px; margin-bottom: .6rem; }
.skeleton-box { height: 90px; }

/* Auth */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-hero { background: linear-gradient(135deg, #4F46E5, #8B5CF6 60%, #EC4899); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.auth-hero h1 { font-size: 2.4rem; font-weight: 800; }
.auth-hero ul { list-style: none; padding: 0; margin-top: 2rem; }
.auth-hero li { margin-bottom: 1rem; display: flex; gap: .75rem; align-items: center; }
.auth-hero li i { background: rgba(255,255,255,.2); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--bg-body); }
.auth-card { width: 100%; max-width: 420px; padding: 2rem; }
@media (max-width: 767.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { display: none; } }

/* Quiz */
.quiz-wrap { max-width: 720px; margin: 0 auto; }
.quiz-question { padding: 2.5rem 1.5rem; text-align: center; }
.quiz-question .q-word { font-size: 2.6rem; font-weight: 800; }
.quiz-option { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; padding: .9rem 1.1rem; border: 2px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); border-radius: var(--radius-md); font-weight: 500; transition: none; }
.quiz-option:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.quiz-option .key { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-muted); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
.quiz-option.correct { border-color: var(--color-success); background: var(--color-success-soft); }
.quiz-option.wrong { border-color: var(--color-danger); background: var(--color-danger-soft); }
.quiz-option:disabled { cursor: default; }
.quiz-feedback { border-radius: var(--radius-md); padding: 1rem 1.25rem; }
.quiz-feedback.ok { background: var(--color-success-soft); color: var(--color-success); }
.quiz-feedback.no { background: var(--color-danger-soft); color: var(--color-danger); }

/* Result */
.score-ring { width: 160px; height: 160px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: conic-gradient(var(--color-primary) calc(var(--pct) * 1%), var(--bg-muted) 0); position: relative; }
.score-ring::before { content: ''; position: absolute; inset: 12px; background: var(--bg-surface); border-radius: 50%; }
.score-ring span { position: relative; font-size: 2.2rem; font-weight: 800; }
.level-change { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; }
.level-change.up { color: var(--color-success); }
.level-change.down { color: var(--color-danger); }

/* Toggle theme cards (settings) */
.theme-option { cursor: pointer; padding: 1rem; border: 2px solid var(--border-color); border-radius: var(--radius-md); text-align: center; transition: border-color .15s; }
.theme-option.active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.theme-option i { font-size: 1.8rem; }

/* SweetAlert2 custom */
.swal2-popup { background: var(--bg-surface) !important; color: var(--text-main) !important; border-radius: var(--radius-lg) !important; font-family: var(--font-base) !important; }
.swal2-title, .swal2-html-container { color: var(--text-main) !important; }
.swal2-styled.swal2-confirm { border-radius: var(--radius-sm) !important; }
.swal2-styled.swal2-cancel { border-radius: var(--radius-sm) !important; }

/* Utilities */
.cursor-pointer { cursor: pointer; }
.fw-800 { font-weight: 800; }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ซ่อนปุ่มแสดงรหัสผ่านของเบราว์เซอร์ (Edge/IE) เพื่อไม่ให้ซ้ำกับปุ่มตาของเว็บ */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-webkit-credentials-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; }

/* รูปแบบคำ + คำอธิบายวิธีใช้ */
.form-card { background: var(--bg-muted); border: 1px solid transparent; transition: border-color .15s ease; }
.form-card.active { border-color: var(--color-primary); }
.form-caption { min-height: 2.6em; line-height: 1.3; }
.form-guide-panel { background: var(--bg-muted); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); padding: .9rem 1rem; }
.form-guide-hint { background: var(--bg-muted); border-radius: var(--radius-sm); padding: .5rem .75rem; }
.example-lines { white-space: pre-line; }

/* ---------- Flashcards ---------- */
.flashcard { perspective: 1200px; cursor: pointer; outline: none; }
.flashcard:focus-visible .flashcard-inner { box-shadow: 0 0 0 .2rem rgba(99,102,241,.35); }
.flashcard-inner { position: relative; min-height: 320px; transition: transform .45s ease; transform-style: preserve-3d; border-radius: var(--radius-lg); }
.flashcard.is-flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow-y: auto; }
.flashcard-back { transform: rotateY(180deg); }
.fc-main { font-size: 2.4rem; font-weight: 800; word-break: break-word; }
.fc-main-sm { font-size: 1.5rem; line-height: 1.5; }
.fc-meaning { font-size: 1.15rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .flashcard-inner { transition: none; } }

/* ---- Review tabs / daily goal / hard words ---- */
.review-tabs .nav-link { border-radius: 999px; font-weight: 600; color: var(--text-main); }
.review-tabs .nav-link.active { background: var(--color-primary, #6366f1); color: #fff; }
.day-bars { display: flex; align-items: flex-end; gap: .5rem; height: 90px; }
.day-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: .75rem; color: var(--text-muted); }
.day-bar .bar { width: 100%; max-width: 28px; min-height: 4px; border-radius: 6px 6px 2px 2px; background: var(--color-primary, #6366f1); opacity: .85; }
.day-bar.empty .bar { background: var(--border-color); opacity: 1; }
.day-bar.today .bar { opacity: 1; }
.day-bar .n { font-weight: 600; color: var(--text-main); }
.hard-word-row { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-bottom: 1px dashed var(--border-color); }
.hard-word-row:last-child { border-bottom: 0; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-head span { text-align: center; font-size: .75rem; color: var(--text-muted); }
.cal-cell { height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: .85rem; background: var(--bg-muted); }
.cal-blank { background: transparent; }
.cal-some { background: rgba(99, 102, 241, .35); }
.cal-goal { background: var(--color-primary, #6366f1); color: #fff; font-weight: 600; }
.cal-today { outline: 2px solid var(--text-main); outline-offset: -2px; }
.cal-legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }

@media (max-width: 575.98px) { .cal-grid { gap: 4px; } .cal-cell { height: 40px; font-size: .8rem; } }

/* ---------- Recovery codes ---------- */
.recovery-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.recovery-list li { margin: 0; }
.recovery-code { display: block; text-align: center; padding: .55rem .5rem; border-radius: .5rem; background: var(--bg-muted); border: 1px solid var(--border-color); color: var(--text-main); font-size: 1rem; letter-spacing: .06em; user-select: all; }