:root {
  --bg: #f2f2f7;
  --secondary-bg: #ffffff;
  --text: #1c1c1e;
  --hint: #8e8e93;
  --link: #007aff;
  --button: #007aff;
  --button-text: #ffffff;
  --border: rgba(0,0,0,0.08);
  --shadow: 0 2px 10px rgba(0,0,0,0.06);
  /* رنگ‌های استاندارد خودِ انکی برای وضعیت کارت: آبی=جدید، قرمز=یادگیری، سبز=مرور */
  --anki-new: #2f7dd1;
  --anki-learning: #e0473e;
  --anki-review: #2fa84f;
  /* رمپ آبی ترتیبی (sequential) برای تقویمِ روند مرور، از رمپ استاندارد dataviz */
  --cal-0: var(--border);
  --cal-1: #cde2fb;
  --cal-2: #86b6ef;
  --cal-3: #3987e5;
  --cal-4: #0d366b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f10;
    --secondary-bg: #1c1c1e;
    --text: #f5f5f7;
    --hint: #8e8e93;
    --link: #4dabf7;
    --button: #4dabf7;
    --button-text: #0f0f10;
    --border: rgba(255,255,255,0.08);
    --shadow: 0 2px 10px rgba(0,0,0,0.3);
    --anki-new: #5b9bd9;
    --anki-learning: #ff6b62;
    --anki-review: #4cc26e;
    /* روی زمینه‌ی تیره برعکس می‌شه: پله‌ی روشن‌تر = فعالیت بیشتر، تا از پس‌زمینه بیرون بزنه */
    --cal-0: var(--border);
    --cal-1: #184f95;
    --cal-2: #256abf;
    --cal-3: #3987e5;
    --cal-4: #86b6ef;
  }
}

* { box-sizing: border-box; }

/* هر المانی که hidden داره باید همیشه واقعاً مخفی بمونه، حتی اگه یه‌جای دیگه display روش ست شده باشه */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Vazirmatn, Tahoma, sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body { padding-bottom: 24px; }

.view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 32px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  padding-top: 8px;
}

.topbar h1 {
  font-size: 20px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-pill {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--hint);
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
}

/* --- ردیف گزینه‌های بالای خونه --- */

.option-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.option-tile {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--secondary-bg);
  border: none;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 10px;
  cursor: pointer;
  color: var(--text);
}

.option-tile-icon { font-size: 22px; }
.option-tile-label { font-size: 13px; font-weight: 700; }

.option-tile-primary {
  background: var(--button);
  color: var(--button-text);
}

.option-tile-badge {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}

/* --- تقویمِ روند مرور (heatmap، مثل خودِ انکی) ---
   این بخش عمداً «تخت» و بدون سایه‌ست (برخلاف کارت‌های قابل‌لمس) چون خودش
   قابل لمس نیست، فقط اطلاعاته - سایه/برجستگی یعنی «رو من بزن». */

.calendar-section {
  margin-top: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hint);
}

.calendar-streak { color: var(--text); }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 10px;
}

.cal-nav-btn {
  background: none;
  border: none;
  color: var(--link);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 10px;
}

.cal-month-label {
  font-size: 14px;
  font-weight: 700;
  min-width: 110px;
  text-align: center;
}

.cal-weekday-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}

.cal-weekday-header span {
  text-align: center;
  font-size: 9px;
  line-height: 1.3;
  overflow-wrap: break-word;
  padding: 0 1px;
  color: var(--hint);
}

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-day-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: var(--cal-0);
  color: var(--text);
}

.cal-day-cell.cal-1 { background: var(--cal-1); color: #0b0b0b; }
.cal-day-cell.cal-2 { background: var(--cal-2); color: #0b0b0b; }
.cal-day-cell.cal-3 { background: var(--cal-3); color: #fff; }
.cal-day-cell.cal-4 { background: var(--cal-4); color: #fff; }

.cal-day-cell.cal-today {
  box-shadow: 0 0 0 2px var(--link) inset;
  font-weight: 700;
}

.cal-day-empty { background: none; }

.deck-list, .card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deck-item, .card-item {
  background: var(--secondary-bg);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.deck-item .deck-name {
  font-size: 16px;
  font-weight: 600;
}

.deck-item .deck-meta {
  font-size: 12px;
  color: var(--hint);
  margin-top: 2px;
}

.deck-counts {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.deck-counts .n-new { color: var(--anki-new); }
.deck-counts .n-learning { color: var(--anki-learning); }
.deck-counts .n-review { color: var(--anki-review); }
.deck-counts .n-zero { opacity: 0.3; }

/* شورونِ آبی روی هر ردیفِ قابل‌لمس (دسته، کارت تو مرورگر) - نشونه‌ی «این دکمه‌ست، بزن روش» */
.row-chevron {
  flex-shrink: 0;
  color: var(--link);
  font-size: 15px;
  font-weight: 700;
}

/* --- پنل مطالعه‌ی بالای صفحه‌ی دسته --- */

.study-panel {
  background: var(--secondary-bg);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 20px;
}

.count-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 14px;
}

.count-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.count-num {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.count-pill label {
  font-size: 11px;
  color: var(--hint);
}

.count-new-num { color: var(--anki-new); }
.count-learning-num { color: var(--anki-learning); }
.count-review-num { color: var(--anki-review); }

.btn-study { width: 100%; }

/* --- لیست کارت‌ها، دقیقاً مثل مرورگر کارتِ خودِ انکی: ردیف‌های ساده --- */

.browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 0 2px;
}

.browser-header span {
  font-size: 13px;
  font-weight: 700;
  color: var(--hint);
}

.browser-header-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.browser-add-btn {
  background: none;
  border: none;
  color: var(--link);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
  white-space: nowrap;
}

.browser-list {
  background: var(--secondary-bg);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.browser-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.browser-row:last-child { border-bottom: none; }

.browser-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.browser-front {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-due {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--hint);
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--hint);
  text-align: center;
}

.empty-emoji { font-size: 42px; }

.btn {
  border: none;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn:disabled { opacity: 0.4; cursor: default; }

.btn-primary { background: var(--button); color: var(--button-text); }
.btn-secondary { background: var(--secondary-bg); color: var(--text); border: 1px solid var(--border); }

.text-danger-btn {
  margin-top: 24px;
  background: none;
  border: none;
  color: #ff453a;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
}

/* --- مرور --- */

.review-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 20px;
}

.review-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.review-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--link);
  transition: width .25s ease;
}

#progress-text {
  font-size: 12px;
  color: var(--hint);
  flex-shrink: 0;
}

.flip-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  min-height: 260px;
}

.flip-card {
  width: 100%;
  max-width: 420px;
  height: min(65vh, 520px);
  cursor: pointer;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .5s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  background: var(--secondary-bg);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.flip-back {
  transform: rotateY(180deg);
}

.card-text {
  font-size: 19px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.card-text img {
  max-width: 100%;
  max-height: min(55vh, 440px);
  border-radius: 10px;
  margin: 6px 0;
}

.card-text audio {
  width: 100%;
  margin: 6px 0;
}

.review-hint {
  text-align: center;
  color: var(--hint);
  font-size: 13px;
  margin: 14px 0;
}

.rate-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.rate-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  line-height: 1.6;
}

.rate-interval {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}

.rate-again { background: #ff453a; }
.rate-hard { background: #ff9f0a; }
.rate-good { background: #34c759; }
.rate-easy { background: #0a84ff; }

.done-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.done-emoji { font-size: 56px; }
.done-screen h2 { margin: 0; }
.done-screen p { color: var(--hint); margin: 0 0 14px; }
.done-screen .btn { width: 100%; max-width: 300px; }

/* --- مودال --- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.modal {
  width: 100%;
  max-width: 480px;
  background: var(--secondary-bg);
  border-radius: 18px 18px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
}

.modal h3 { margin: 0 0 14px; font-size: 16px; }

.modal-field { margin-bottom: 12px; }

.modal-field label {
  display: block;
  font-size: 12px;
  color: var(--hint);
  margin-bottom: 6px;
}

.modal-field textarea {
  width: 100%;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 10px;
  font-size: 15px;
  font-family: inherit;
}

.media-attach-btn {
  margin-top: 6px;
  background: none;
  border: none;
  color: var(--link);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px;
}

.modal-hint {
  font-size: 12px;
  color: var(--hint);
  line-height: 1.6;
  margin: 0 0 12px;
}

.modal-field input[type="file"] {
  width: 100%;
  font-size: 13px;
  color: var(--hint);
}

.modal .text-danger-btn {
  display: block;
  width: 100%;
  margin: 2px 0 12px;
  text-align: center;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.modal-actions .btn { flex: 1; }

.toast {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  background: var(--text);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 100;
  box-shadow: var(--shadow);
}