/* ==========================================================================
   BANDGATE — Visual Refresh & Cathoven-style Polish
   --------------------------------------------------------------------------
   Drop-in overlay. Add AFTER your existing style.css / inline styles:

     <link rel="stylesheet" href="/bandgate-refresh.css">

   Works across index.html, app.html, onboarding.html, dashboard.html.
   No JS changes, no ID/class renames — purely visual upgrade.
   ========================================================================== */

/* ---------- 1. Modern font + premium palette ---------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Cathoven-ish violet/indigo accent layered onto your blue brand */
  --bg-refresh:        #f6f5ff;
  --violet-50:         #f5f3ff;
  --violet-100:        #ede9fe;
  --violet-500:        #7c3aed;
  --violet-600:        #6d28d9;
  --violet-700:        #5b21b6;
  --indigo-500:        #6366f1;
  --indigo-600:        #4f46e5;
  --grad-premium:      linear-gradient(135deg,#7c3aed 0%, #6366f1 55%, #4f46e5 100%);
  --grad-premium-soft: linear-gradient(135deg, rgba(124,58,237,.08), rgba(99,102,241,.08));
  --grad-ask:          linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%);

  --shadow-premium:    0 18px 50px -22px rgba(99,102,241,.55);
  --shadow-soft:       0 10px 30px -18px rgba(15,23,42,.25);
  --shadow-card:       0 1px 0 rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.18);

  --font-modern:       'Plus Jakarta Sans','Source Sans 3', system-ui, sans-serif;
  --font-display-mod:  'Instrument Serif','Libre Baskerville', Georgia, serif;
}

[data-theme="dark"] {
  --bg-refresh: #0b0d18;
  --shadow-premium: 0 18px 50px -22px rgba(124,58,237,.7);
}

/* Apply the modern body font without breaking your serif headings */
body {
  font-family: var(--font-modern) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings get the editorial serif you already use, but a fresher cut */
h1, h2, h3,
.hero-headline, .section-title,
.onb-heading, .auth-heading,
.score-overall, .stat-big,
.plan-price, .price-amount,
.passage-title, .suggestions-title,
.section-header h1, .progress-section h2,
.hero-banner h1, .nav-logo, .nav-brand {
  font-family: var(--font-display-mod) !important;
  letter-spacing: -0.01em;
}

/* ---------- 2. Practice hub action cards (dashboard) ---------- */
/* Matches screenshot 3: clean white card, soft tinted icon tile, full-width gradient CTA */

.action-card {
  text-align: left !important;
  padding: 22px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
[data-theme="dark"] .action-card {
  background: #161a2c !important;
  border-color: rgba(255,255,255,.06) !important;
}
.action-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px -24px rgba(99,102,241,.35) !important;
  border-color: rgba(124,58,237,.25) !important;
}
.action-card .action-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: var(--violet-100) !important;
  color: var(--violet-600) !important;
  margin: 0 0 14px 0 !important;
  font-size: 1.4rem !important;
}
.action-card .action-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-bottom: 4px !important;
}
[data-theme="dark"] .action-card .action-title { color: #eef0f8 !important; }
.action-card .action-desc {
  font-size: .85rem !important;
  color: #6b7280 !important;
  margin-bottom: 16px !important;
}
/* Convert the round arrow into a full-width gradient CTA */
.action-card .action-arrow {
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  background: var(--grad-premium) !important;
  color: #fff !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 8px 20px -10px rgba(99,102,241,.6) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.action-card .action-arrow::before {
  content: 'Start →';
}
.action-card .action-arrow * { display: none !important; }
.action-card:hover .action-arrow {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px -10px rgba(99,102,241,.7) !important;
  background: var(--grad-premium) !important;
}

/* ---------- 3. Score header — Cathoven-style ---------- */
.score-header-card {
  background: #fff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(15,23,42,.05) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 24px 26px !important;
}
[data-theme="dark"] .score-header-card {
  background: #161a2c !important;
  border-color: rgba(255,255,255,.06) !important;
}
.score-overall {
  font-size: 3.4rem !important;
  font-weight: 400 !important;
  background: var(--grad-premium);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.score-label {
  font-size: .68rem !important;
  letter-spacing: 1.2px !important;
  color: #94a3b8 !important;
}
.score-chip.cefr {
  background: var(--violet-100) !important;
  color: var(--violet-700) !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
}
[data-theme="dark"] .score-chip.cefr {
  background: rgba(124,58,237,.2) !important;
  color: #c4b5fd !important;
}
.score-chip.words {
  background: #eef2ff !important;
  color: var(--indigo-600) !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
}

/* ---------- 4. Criterion accordion — soft tinted, Cathoven-style ---------- */
.criterion-card {
  background: #faf9ff !important;
  border: 1px solid rgba(124,58,237,.1) !important;
  border-radius: 14px !important;
  transition: all .2s ease !important;
}
[data-theme="dark"] .criterion-card {
  background: #1a1f3a !important;
  border-color: rgba(124,58,237,.25) !important;
}
.criterion-card:hover {
  border-color: rgba(124,58,237,.3) !important;
  box-shadow: 0 8px 22px -14px rgba(124,58,237,.4) !important;
}
.criterion-card.open {
  background: #f5f3ff !important;
  border-color: var(--violet-500) !important;
}
[data-theme="dark"] .criterion-card.open {
  background: #221a4a !important;
}
.criterion-header { padding: 18px 22px !important; }
.criterion-title {
  font-size: .95rem !important;
  color: var(--violet-700) !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .criterion-title { color: #c4b5fd !important; }
.criterion-dot {
  width: 10px !important;
  height: 10px !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.6);
}
.criterion-chevron { color: var(--violet-500) !important; }

/* ---------- 5. Premium-style locked overlay (paywall) ---------- */
.locked-section {
  border-radius: 18px !important;
  overflow: hidden;
  margin: 16px 0 !important;
}
.locked-blur { filter: blur(6px) !important; opacity: .35 !important; }
.locked-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.95) 40%) !important;
  backdrop-filter: blur(6px);
  padding: 40px 24px !important;
  gap: 14px !important;
}
[data-theme="dark"] .locked-overlay {
  background: linear-gradient(180deg, rgba(14,17,23,.4) 0%, rgba(14,17,23,.95) 40%) !important;
}
.locked-icon {
  width: 64px !important;
  height: 64px !important;
  background: var(--grad-premium) !important;
  font-size: 1.6rem !important;
  box-shadow: 0 12px 28px -10px rgba(124,58,237,.6) !important;
}
.locked-title {
  font-family: var(--font-display-mod) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}
.locked-sub { font-size: .88rem !important; max-width: 320px !important; }
.btn-locked-upgrade {
  background: var(--grad-premium) !important;
  padding: 13px 32px !important;
  font-size: .92rem !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 28px -10px rgba(124,58,237,.55) !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}
.btn-locked-upgrade:hover { transform: translateY(-2px) !important; }

/* ---------- 6. "Ask Bandie" + primary CTAs get premium gradient ---------- */
.btn-primary,
#writing-submit,
#speaking-submit {
  background: var(--grad-ask) !important;
  box-shadow: 0 10px 24px -10px rgba(124,58,237,.55) !important;
  border-radius: 99px !important;
  padding: 13px 28px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}
.btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(124,58,237,.7) !important; }

/* Floating "Ask in your own language!" pill (optional — appears if you add it) */
.ask-pill {
  position: fixed; right: 20px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 99px;
  background: var(--grad-ask); color: #fff; font-weight: 700;
  border: none; cursor: pointer;
  box-shadow: 0 18px 40px -12px rgba(124,58,237,.55);
  z-index: 90;
}
.ask-pill:hover { transform: translateY(-2px); }

/* ---------- 7. Hero / landing polish (index.html) ---------- */
.hero-eyebrow {
  background: var(--violet-100) !important;
  color: var(--violet-700) !important;
  border-color: rgba(124,58,237,.25) !important;
}
.hero-headline span,
.section-label {
  background: var(--grad-premium);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-primary-lg, .btn-nav-cta {
  background: var(--grad-premium) !important;
  box-shadow: var(--shadow-premium) !important;
}

/* ---------- 8. Hero banner on dashboard ---------- */
.hero-banner {
  background: var(--grad-premium) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-premium) !important;
}

/* ---------- 9. Stat cards lift ---------- */
.stat-card {
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: var(--shadow-card) !important;
}
.stat-card .value {
  background: var(--grad-premium);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 10. Plan/pricing — make Pro pop ---------- */
.pricing-card.featured,
.price-card.popular {
  border: 2px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad-premium) border-box !important;
  box-shadow: var(--shadow-premium) !important;
}
[data-theme="dark"] .pricing-card.featured,
[data-theme="dark"] .price-card.popular {
  background:
    linear-gradient(#161a2c, #161a2c) padding-box,
    var(--grad-premium) border-box !important;
}
.plan-badge, .popular-badge {
  background: var(--grad-premium) !important;
  border: none !important;
}

/* ---------- 11. Auth + onboarding cards feel airier ---------- */
.auth-card, .onb-container {
  border-radius: 22px !important;
  box-shadow: 0 30px 70px -30px rgba(99,102,241,.35) !important;
  border: 1px solid rgba(124,58,237,.08) !important;
}
.auth-card .logo span,
.auth-brand .accent {
  background: var(--grad-premium);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#onb-progress-fill { background: var(--grad-premium) !important; }
.onb-chip.selected {
  background: var(--grad-premium) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px -10px rgba(124,58,237,.5);
}

/* ---------- 12. Subtle page tint so things feel less flat ---------- */
.content, body {
  background: var(--bg-refresh);
}
[data-theme="dark"] .content,
[data-theme="dark"] body {
  background: #0b0d18;
}

/* ---------- 13. Sub-tabs (Vocabulary / Grammar style) ---------- */
.sub-tab.active {
  background: var(--grad-premium) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px -10px rgba(124,58,237,.5) !important;
}

/* Daily tip banner */
.dash-tip{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:16px;
  background:linear-gradient(135deg,#fff7e6,#fffdf7);border:1px solid #f1e4c4;
  margin:20px 0 16px;box-shadow:0 2px 8px rgba(180,140,40,.05)}
.dash-tip-icon{font-size:28px;flex-shrink:0}
.dash-tip-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#a07a1a;font-weight:700}
.dash-tip-text{margin:4px 0 0;font-family:'Libre Baskerville',serif;font-size:15px;line-height:1.5;color:#2a2a2a}
.dash-tip-refresh{margin-left:auto;background:#fff;border:1px solid #e6d8b3;width:36px;height:36px;
  border-radius:50%;cursor:pointer;font-size:16px;transition:transform .4s;flex-shrink:0}
.dash-tip-refresh:hover{transform:rotate(180deg);background:#fff7e6}

/* Goal strip */
.dash-goals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.goal-item{background:#fff;border:1px solid #ececec;border-radius:14px;padding:16px;text-align:center}
.goal-num{font-size:26px;font-weight:700;color:#1a1a1a;font-family:'Source Sans 3',sans-serif;line-height:1}
.goal-label{font-size:11px;color:#777;margin-top:6px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.goal-cta{display:flex;align-items:center;justify-content:center}
.goal-btn{background:#1a1a1a;color:#fff;border:none;border-radius:10px;padding:10px 18px;
  font-weight:600;cursor:pointer;font-size:13px;transition:opacity .2s}
.goal-btn:hover{opacity:.85}

@media(max-width:768px){.dash-goals{grid-template-columns:1fr 1fr}}

/* Lucide icon defaults */
[data-lucide]{
  width:1em; height:1em;
  stroke-width:2;
  vertical-align:-0.15em;
  display:inline-block;
  flex-shrink:0;
}
/* Bigger icons in feature/onboarding cards */
.dash-card-emoji [data-lucide],
.bg-onboard-emoji [data-lucide],
.feature-icon [data-lucide]{
  width:2em; height:2em;
  stroke-width:1.75;
}
/* Icons inside buttons / nav get a small gap */
button [data-lucide], a [data-lucide]{
  margin-right:6px;
}


/* ---------- End ---------- */