/* v40 UI polish: refine the dashboard + practice toward the reference mockups.
   Additive only — colors / shadows / radius / spacing / states, no structural change. */
:root {
  --u-blue: #1f6bff;
  --u-blue-d: #2563eb;
  --u-indigo: #4f46e5;
  --u-cyan: #06b6d4;
  --u-ink: #0f172a;
  --u-muted: #64748b;
  --u-line: #e6ebf3;
  --u-soft: #f4f7fc;
  --u-card-sh: 0 10px 30px rgba(31, 107, 255, .08), 0 2px 6px rgba(15, 23, 42, .04);
  --u-card-sh-hover: 0 18px 44px rgba(31, 107, 255, .16), 0 4px 10px rgba(15, 23, 42, .06);
}

/* ---- cards: unify the soft, rounded, elevated look ---- */
.home-main-card, .home-side-card, .level-card, .today-card, .sync-card,
.level-pending-card, .home-recent-list, .home-streak-card, .today-plan-card {
  border-radius: 18px !important;
  border: 1px solid var(--u-line) !important;
  box-shadow: var(--u-card-sh);
  transition: box-shadow .2s ease, transform .2s ease;
}
.home-main-card, .home-side-card { background: #fff; }

/* ---- JLPT level cards ---- */
.level-select-card {
  border-radius: 18px !important;
  border: 1.5px solid var(--u-line) !important;
  box-shadow: var(--u-card-sh);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
  position: relative;
}
.level-select-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--u-blue), var(--u-cyan));
  opacity: 0; transition: opacity .18s ease;
}
.level-select-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--u-card-sh-hover);
  border-color: rgba(31, 107, 255, .35) !important;
}
.level-select-card:hover::before { opacity: 1; }
.level-select-card.selected {
  border-color: var(--u-blue) !important;
  box-shadow: 0 0 0 3px rgba(31, 107, 255, .14), var(--u-card-sh-hover);
}
.level-select-card.selected::before { opacity: 1; }
.level-select-card b { font-weight: 800; letter-spacing: .01em; }

/* ---- quick-start action buttons (语法/词汇/阅读/听力/模拟) ---- */
.quick-start-home button {
  border-radius: 16px !important;
  border: 1px solid var(--u-line) !important;
  background: linear-gradient(180deg, #fff, #fbfdff) !important;
  box-shadow: 0 4px 14px rgba(31, 107, 255, .06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.quick-start-home button:hover {
  transform: translateY(-2px);
  border-color: rgba(31, 107, 255, .4) !important;
  box-shadow: var(--u-card-sh-hover);
}
.quick-start-home button b { color: var(--u-ink); }

/* ---- today / plan progress bar ---- */
.home-plan-bar, .week-progress-bar, .plan-progress {
  background: #e9eef7 !important; border-radius: 999px !important; overflow: hidden;
}
.home-plan-bar > span, .home-plan-bar > i {
  background: linear-gradient(90deg, var(--u-blue), var(--u-cyan)) !important;
  border-radius: 999px !important;
}
.today-plan-card {
  background: linear-gradient(135deg, #eef4ff 0%, #f6fbff 100%) !important;
  border-color: rgba(31, 107, 255, .18) !important;
}

/* ---- stat rows / streak ---- */
.home-stat-row { border-bottom: 1px dashed var(--u-line); }
.home-stat-row b { color: var(--u-blue-d); font-weight: 800; }
.home-streak-days span, .home-streak-day {
  border-radius: 10px !important;
}

/* ---- top level nav pills ---- */
.home-level-nav a, .home-level-nav button {
  border-radius: 999px !important;
  transition: background .15s ease, color .15s ease;
}
.home-level-nav a:hover, .home-level-nav button:hover {
  background: rgba(31, 107, 255, .1) !important; color: var(--u-blue-d) !important;
}

/* ---- sidebar nav active state ---- */
.nav-item { border-radius: 12px !important; transition: background .15s ease; }
.nav-item.active {
  background: linear-gradient(135deg, rgba(31,107,255,.12), rgba(6,182,212,.1)) !important;
  box-shadow: inset 0 0 0 1px rgba(31, 107, 255, .25);
}

/* ---- headings ---- */
.home-heading h2, .home-dashboard h2 { letter-spacing: .01em; }
.home-primary, .ghost-btn {
  border-radius: 12px !important;
}
.home-primary {
  background: linear-gradient(135deg, var(--u-blue), var(--u-blue-d)) !important;
  box-shadow: 0 8px 22px rgba(31, 107, 255, .28) !important; border: none !important;
}
.home-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ===== practice: question options ===== */
.option-btn {
  border-radius: 14px !important;
  border: 1.5px solid var(--u-line) !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}
.option-btn:not([disabled]):hover {
  border-color: rgba(31, 107, 255, .5) !important;
  box-shadow: 0 6px 18px rgba(31, 107, 255, .12);
  transform: translateY(-1px);
}
.option-index {
  border-radius: 10px !important; font-weight: 800;
}
.option-btn.selected { border-color: var(--u-blue) !important; background: rgba(31,107,255,.05) !important; }
.option-btn.selected .option-index {
  background: linear-gradient(135deg, var(--u-blue), var(--u-indigo)) !important; color: #fff !important;
}
.option-btn.correct {
  border-color: #16a34a !important; background: rgba(22, 163, 74, .07) !important;
}
.option-btn.correct .option-index { background: #16a34a !important; color: #fff !important; }
.option-btn.wrong {
  border-color: #dc2626 !important; background: rgba(220, 38, 38, .06) !important;
}
.option-btn.wrong .option-index { background: #dc2626 !important; color: #fff !important; }