/* ══════════════════════════════════════════════════════════════
   AD-GENIE  ·  MYSTIC GENIE DESIGN SYSTEM  ·  docs/styles.css
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg-base:       #05010F;
  --bg-subtle:     #0C0720;
  --bg-surface:    #110D2C;
  --bg-elevated:   #1A1440;
  --bg-card:       rgba(17,13,44,0.88);
  --border:        rgba(139,92,246,0.18);
  --border-strong: rgba(251,191,36,0.35);
  --border-glow:   rgba(139,92,246,0.45);
  --fg-base:       #EDE9FE;
  --fg-subtle:     #A78BFA;
  --fg-muted:      #5B4D8C;
  --fg-inv:        #05010F;
  --gold:          #FBBF24;
  --gold-sub:      rgba(251,191,36,0.12);
  --teal:          #14B8A6;
  --teal-sub:      rgba(20,184,166,0.12);
  --magic:         #8B5CF6;
  --magic-sub:     rgba(139,92,246,0.15);
  --success:       #10B981;
  --error:         #EF4444;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg-base);color:var(--fg-base);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,.wordmark{font-family:'Cinzel',Georgia,serif;letter-spacing:0.02em;}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.page{max-width:1080px;margin:0 auto;padding:32px 24px 80px;position:relative;z-index:1;}
.page-narrow{max-width:660px;margin:0 auto;padding:32px 24px 80px;position:relative;z-index:1;}

/* ── Animations ── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulseGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(180deg)}}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes shimmerSlide{to{transform:translateX(200%)}}
@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes smokeRise{0%{opacity:0;transform:translateY(0) scaleX(1)}30%{opacity:.5}100%{opacity:0;transform:translateY(-28px) scaleX(1.5)}}
@keyframes orbAnim{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-20px)}66%{transform:translate(-15px,15px)}}

.ag-float{animation:float 3.5s ease-in-out infinite;}
.ag-pulse{animation:pulseGlow 2s ease-in-out infinite;}
.ag-fade-in{animation:fadeInUp 300ms ease both;}

/* ── Gradient text ── */
.gradient-text{
  background:linear-gradient(135deg,#FBBF24 0%,#A78BFA 45%,#14B8A6 80%,#FBBF24 100%);
  background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradientShift 4s ease infinite;
}

/* ── Ambient orbs ── */
.orb-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.orb{position:absolute;border-radius:50%;filter:blur(60px);}
.orb-1{width:600px;height:600px;top:-150px;left:-100px;background:radial-gradient(circle,rgba(139,92,246,.15) 0%,transparent 70%);animation:orbAnim 12s ease-in-out infinite;opacity:.7;}
.orb-2{width:420px;height:420px;bottom:-100px;right:-80px;background:radial-gradient(circle,rgba(20,184,166,.12) 0%,transparent 70%);animation:orbAnim 16s ease-in-out 5s infinite;opacity:.7;}

/* ══ NAV ══ */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(12,7,32,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 24px rgba(0,0,0,.5);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}

.wordmark{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;}
.lamp-smoke{animation:smokeRise 2.4s ease-out infinite;transform-origin:bottom center;}
.lamp-flame{animation:pulseGlow 1.4s ease-in-out infinite;}

.nav-links{display:flex;gap:4px;}
.nav-links a{font-size:13px;font-weight:500;color:var(--fg-muted);padding:7px 13px;border-radius:8px;transition:all 150ms;}
.nav-links a:hover{color:var(--fg-base);background:rgba(139,92,246,.08);}
.nav-links a.active{color:var(--magic);background:var(--magic-sub);border:1px solid rgba(139,92,246,.22);}

/* Preview banner */
.preview-banner{
  text-align:center;font-size:12px;padding:8px 16px;
  color:var(--teal);background:rgba(20,184,166,.07);
  border-bottom:1px solid rgba(20,184,166,.2);
}

/* ══ HERO ══ */
.hero{position:relative;z-index:1;text-align:center;padding:100px 24px 80px;}
.hero-lamp{margin:0 auto 28px;display:inline-block;}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 18px;border-radius:999px;margin-bottom:22px;
  background:var(--magic-sub);border:1px solid var(--border-glow);
  font-size:11px;font-weight:700;color:var(--magic);
  text-transform:uppercase;letter-spacing:.08em;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--magic);animation:pulseGlow 1.5s ease-in-out infinite;}
.hero h1{font-size:50px;font-weight:700;line-height:1.15;margin-bottom:18px;}
.hero p{font-size:17px;color:var(--fg-subtle);max-width:560px;margin:0 auto 34px;line-height:1.7;}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:36px;}
.trust-bar{display:flex;align-items:center;justify-content:center;gap:18px;font-size:13px;color:var(--fg-muted);}
.trust-bar .dot{width:3px;height:3px;border-radius:50%;background:var(--fg-muted);}
.trust-item{display:flex;align-items:center;gap:6px;}

/* ══ BUTTONS ══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 28px;border-radius:12px;
  font-weight:700;font-size:14px;cursor:pointer;border:none;
  transition:all 200ms;position:relative;overflow:hidden;
  white-space:nowrap;text-decoration:none;font-family:'Inter',sans-serif;
}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translateX(-200%);pointer-events:none;border-radius:inherit;}
.btn:hover::after{animation:shimmerSlide 550ms ease-out forwards;}

.btn-gold{background:linear-gradient(135deg,#FBBF24 0%,#D97706 100%);color:#05010F;box-shadow:0 0 20px rgba(251,191,36,.25),inset 0 1px 0 rgba(255,255,255,.25);}
.btn-gold:hover{background:linear-gradient(135deg,#FCD34D 0%,#F59E0B 100%);box-shadow:0 0 36px rgba(251,191,36,.45);transform:translateY(-1px);}

.btn-magic{background:linear-gradient(135deg,#8B5CF6 0%,#6D28D9 100%);color:#fff;box-shadow:0 0 20px rgba(139,92,246,.3),inset 0 1px 0 rgba(255,255,255,.1);border:1px solid rgba(139,92,246,.4);}
.btn-magic:hover{background:linear-gradient(135deg,#9C6DF7 0%,#7C3AED 100%);box-shadow:0 0 32px rgba(139,92,246,.5);transform:translateY(-1px);}

.btn-teal{background:rgba(20,184,166,.15);color:var(--teal);border:1px solid rgba(20,184,166,.35);}
.btn-teal:hover{background:rgba(20,184,166,.25);box-shadow:0 0 16px rgba(20,184,166,.2);}

.btn-ghost{background:transparent;color:var(--fg-base);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--border-glow);background:rgba(139,92,246,.07);}

.btn-sm{height:36px;padding:0 18px;font-size:13px;border-radius:9px;}
.btn-full{width:100%;}

/* ══ SECTIONS ══ */
section{position:relative;z-index:1;padding:72px 24px;}
.section-label{text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;}
section h2{font-size:28px;font-weight:600;text-align:center;margin-bottom:44px;}

/* Feature cards */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.feature-card{
  background:var(--bg-card);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:18px;padding:24px;
  transition:all 250ms;
}
.feature-card:hover{border-color:rgba(139,92,246,.4);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.5);}
.feature-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:22px;border:1px solid var(--border);}
.feature-card h3{font-size:15px;font-weight:600;margin-bottom:8px;font-family:'Inter',sans-serif;}
.feature-card p{font-size:13px;color:var(--fg-subtle);line-height:1.6;}

/* Retailers */
.retailers-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:56px 24px;}
.retailer-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.retailer-pill{
  display:flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--border);
  font-size:13px;font-weight:600;transition:all 200ms;backdrop-filter:blur(8px);
}
.retailer-pill:hover{border-color:var(--border-strong);transform:scale(1.05);}
.retailer-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* Stack pills */
.stack-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.stack-pill{
  font-size:12px;font-weight:500;color:var(--fg-subtle);
  border:1px solid var(--border);border-radius:999px;padding:7px 16px;
  background:rgba(139,92,246,.05);transition:all 150ms;
}
.stack-pill:hover{color:var(--magic);border-color:var(--border-glow);}

/* CTA section */
.cta-section{text-align:center;}
.cta-box{
  max-width:600px;margin:0 auto;
  background:var(--bg-card);backdrop-filter:blur(12px);
  border:1px solid var(--border-glow);border-radius:24px;
  padding:60px 40px;
  box-shadow:0 0 60px rgba(139,92,246,.15),0 8px 40px rgba(0,0,0,.5);
  position:relative;overflow:hidden;
}
.cta-box::before{content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--magic),var(--gold),transparent);}
.cta-box h2{font-size:30px;margin-bottom:14px;}
.cta-box p{color:var(--fg-subtle);margin-bottom:28px;font-size:15px;}

/* ══ CARDS ══ */
.card{
  background:var(--bg-card);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:18px;padding:22px;
  position:relative;overflow:hidden;
}
.card+.card{margin-top:16px;}

/* ══ PAGE HEADER ══ */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.page-header h1{font-size:24px;font-weight:600;}
.page-sub{font-size:13px;color:var(--fg-subtle);margin-top:4px;}
.back-link{font-size:13px;color:var(--magic);display:inline-block;margin-bottom:16px;}
.back-link:hover{text-decoration:underline;}

/* ══ OFFERS ══ */
.search-wrap{position:relative;margin-bottom:16px;}
.search-input{
  width:100%;height:44px;padding:0 14px 0 42px;
  border-radius:12px;background:rgba(17,13,44,.8);
  border:1px solid var(--border);color:var(--fg-base);
  font-size:14px;font-family:'Inter',sans-serif;
  outline:none;transition:border 150ms;
}
.search-input:focus{border-color:var(--border-glow);}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--fg-muted);pointer-events:none;font-size:16px;}

.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.chip{
  font-size:12px;font-weight:600;padding:6px 16px;
  border-radius:999px;border:1px solid var(--border);
  color:var(--fg-subtle);cursor:pointer;background:transparent;
  font-family:'Inter',sans-serif;outline:none;
  transition:all 150ms;
}
.chip:hover{color:var(--fg-base);border-color:var(--border-glow);}
.chip.active{background:var(--magic-sub);color:var(--magic);border-color:rgba(139,92,246,.4);}

.tab-row{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--border);}
.tab{
  /* Reset ALL browser button defaults */
  -webkit-appearance:none;appearance:none;
  background:transparent;border:none;border-radius:0;
  padding:0;margin:0;box-shadow:none;
  /* Layout */
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;
  font-size:14px;font-weight:600;color:var(--fg-muted);
  font-family:'Inter',sans-serif;
  cursor:pointer;user-select:none;outline:none;
  /* Bottom-only indicator via box-shadow (avoids border-model issues) */
  box-shadow:inset 0 -2px 0 transparent;
  margin-bottom:-1px;
  transition:color 150ms,box-shadow 150ms;
}
.tab:hover{color:var(--fg-base);}
.tab.active{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold);}
/* Ensure active on Favourites tab uses gold underline */
.tab.tab-fav.active{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold);border-bottom-color:var(--gold);}

.offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.offer-card{
  display:block;background:var(--bg-card);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:18px;padding:18px;
  transition:all 200ms;position:relative;overflow:hidden;
}
.offer-card::before{
  content:'';position:absolute;top:0;left:16px;right:16px;height:2px;
  background:var(--card-accent,linear-gradient(90deg,transparent,#8B5CF6,transparent));
  border-radius:0 0 4px 4px;opacity:.5;transition:opacity 200ms;
}
.offer-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.4);box-shadow:0 8px 40px rgba(0,0,0,.5);}
.offer-card:hover::before{opacity:1;}

/* offer-top is now a 3-column row: store | badges | heart */
.offer-top{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.offer-store{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;flex:1;min-width:0;white-space:nowrap;}
.offer-badges{display:flex;gap:6px;align-items:center;flex-shrink:0;}
/* heart sits at the end of offer-top, no absolute positioning needed */
.heart-btn{flex-shrink:0;}
.discount-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--gold-sub);color:var(--gold);
  border:1px solid rgba(251,191,36,.3);
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;
}
.type-badge{font-size:10px;font-weight:600;padding:3px 9px;border-radius:8px;border:1px solid;}
.type-badge.online{background:var(--teal-sub);color:var(--teal);border-color:rgba(20,184,166,.25);}
.type-badge.offline{background:var(--magic-sub);color:var(--fg-subtle);border-color:rgba(139,92,246,.25);}
.offer-headline{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--fg-base);line-height:1.4;}
.offer-bottom{display:flex;justify-content:space-between;font-size:12px;align-items:center;}
.offer-category{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:500;background:rgba(139,92,246,.08);color:var(--fg-subtle);border:1px solid rgba(139,92,246,.12);}
.offer-expiry{color:var(--fg-muted);}

/* ══ OFFER DETAIL ══ */
.coupon-block{
  background:rgba(17,13,44,.8);border:1px dashed rgba(251,191,36,.4);
  border-radius:16px;padding:28px;text-align:center;position:relative;overflow:hidden;
}
.coupon-block::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(251,191,36,.05) 0%,transparent 70%);pointer-events:none;}
.coupon-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-muted);}
.coupon-code{font-family:'JetBrains Mono','Courier New',monospace;font-size:26px;font-weight:600;color:var(--gold);letter-spacing:.14em;margin:14px 0 22px;text-shadow:0 0 20px rgba(251,191,36,.4);}

.poster-placeholder{
  aspect-ratio:1/1;max-width:240px;margin:0 auto 18px;
  border:2px solid rgba(139,92,246,.4);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-elevated);position:relative;overflow:hidden;
  box-shadow:0 0 32px rgba(139,92,246,.2);
}

.hashtag-pill{
  display:inline-block;padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:600;cursor:pointer;transition:transform 150ms;
}
.hashtag-pill:hover{transform:scale(1.06);}
.hashtag-pill.teal{background:var(--teal-sub);color:var(--teal);border:1px solid rgba(20,184,166,.25);}
.hashtag-pill.magic{background:var(--magic-sub);color:var(--fg-subtle);border:1px solid rgba(139,92,246,.25);}

/* ══ DASHBOARD ══ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.kpi-card{
  background:var(--bg-card);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:16px;padding:18px;
  transition:all 200ms;
}
.kpi-card:hover{border-color:rgba(139,92,246,.35);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.4);}
.kpi-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:16px;font-style:normal;}
.kpi-icon.gold{background:var(--gold-sub);border:1px solid rgba(251,191,36,.2);}
.kpi-icon.teal{background:var(--teal-sub);border:1px solid rgba(20,184,166,.2);}
.kpi-icon.magic{background:var(--magic-sub);border:1px solid rgba(139,92,246,.2);}
.kpi-value{font-size:22px;font-weight:700;margin-bottom:3px;line-height:1.2;}
.kpi-value.gold{color:var(--gold);}
.kpi-value.teal{color:var(--teal);}
.kpi-value.magic{color:var(--magic);}
.kpi-label{font-size:11px;color:var(--fg-muted);font-weight:500;}

.activity-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);}
.activity-row:last-child{border-bottom:none;}
.activity-label{font-size:14px;}
.activity-amount{color:var(--success);font-weight:700;font-size:14px;}
.activity-time{color:var(--fg-muted);font-size:12px;}

/* ══ PROFILE ══ */
.avatar{width:80px;height:80px;border-radius:50%;background:var(--bg-elevated);border:2px solid var(--magic);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 0 20px rgba(139,92,246,.4);}
.field-label{display:block;font-size:11px;font-weight:600;color:var(--fg-subtle);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;}
.field-input{width:100%;height:42px;padding:0 14px;border-radius:10px;background:rgba(5,1,15,.6);border:1px solid var(--border);color:var(--fg-base);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border 150ms;}
.field-input:focus{border-color:var(--border-glow);}
.field-input[readonly]{opacity:.5;}

.toggle-row{display:flex;gap:10px;flex-wrap:wrap;}
.toggle-pill{padding:8px 20px;border-radius:10px;font-size:13px;font-weight:600;border:1px solid var(--border);color:var(--fg-muted);transition:all 150ms;}
.toggle-pill:hover{color:var(--fg-base);border-color:var(--border-glow);}
.toggle-pill.on{background:var(--magic-sub);color:var(--magic);border-color:rgba(139,92,246,.4);}

/* ══ FOOTER ══ */
footer{position:relative;z-index:1;text-align:center;padding:44px 24px;border-top:1px solid var(--border);color:var(--fg-muted);font-size:13px;line-height:1.8;}
.footer-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;}
.footer-brand{font-family:'Cinzel',serif;font-size:15px;color:var(--fg-subtle);}
footer a{color:var(--teal);}
footer a:hover{text-decoration:underline;}

/* ══ RESPONSIVE ══ */
@media(max-width:760px){
  .features{grid-template-columns:1fr;}
  .offer-grid{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:32px;}
  .nav-links a{padding:6px 9px;font-size:12px;}
}

/* ══════════════════════════════════════════════════════════════
   HEART / FAVOURITE BUTTON
   ══════════════════════════════════════════════════════════════ */
.heart-btn {
  /* Inline — lives inside .offer-top flex row, NOT absolutely positioned */
  position: static;
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  -webkit-appearance: none; appearance: none;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.2);
  cursor: pointer; outline: none;
  transition: all 150ms;
}
.heart-btn:hover { transform: scale(1.12); }
.heart-btn:active { transform: scale(0.92); }
.heart-btn svg { width: 15px; height: 15px; transition: all 150ms; display:block; }

/* Unsaved state */
.heart-btn .heart-icon { color: #5B4D8C; fill: none; stroke: #5B4D8C; stroke-width: 1.8; }

/* Saved state */
.heart-btn.saved {
  background: rgba(251,191,36,0.18);
  border-color: rgba(251,191,36,0.4);
  box-shadow: 0 0 12px rgba(251,191,36,0.25);
}
.heart-btn.saved .heart-icon {
  fill: #FBBF24; stroke: #FBBF24; stroke-width: 0;
  filter: drop-shadow(0 0 4px rgba(251,191,36,0.6));
}

/* Card saved state — gold border */
.offer-card.saved {
  border-color: rgba(251,191,36,0.3) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 14px rgba(251,191,36,0.08);
}
.offer-card.saved:hover {
  border-color: rgba(251,191,36,0.55) !important;
}

/* ── Favourites tab styling ── */
.tab.tab-fav { display: flex; align-items: center; gap: 6px; }
.tab.tab-fav.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab.tab-fav .fav-heart {
  width: 13px; height: 13px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  transition: all 150ms;
}
/* When active: filled gold heart */
.tab.tab-fav.active .fav-heart path {
  fill: var(--gold); stroke: var(--gold); stroke-width: 0;
  filter: drop-shadow(0 0 3px rgba(251,191,36,.5));
}
.fav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1;
  background: rgba(139,92,246,0.2); color: var(--fg-subtle);
  border: 1px solid rgba(139,92,246,0.3); transition: all 150ms;
}
.tab.tab-fav.active .fav-count {
  background: rgba(251,191,36,0.25); color: var(--gold);
  border-color: rgba(251,191,36,0.4);
}

/* ── Favourites empty state ── */
.fav-empty {
  grid-column: 1 / -1; text-align: center; padding: 60px 24px;
}
.fav-empty-icon {
  width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.2);
}
.fav-empty-icon svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
.fav-empty h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.fav-empty p  { font-size: 13px; color: var(--fg-muted); }
.fav-empty p svg { display: inline; vertical-align: text-bottom; width: 13px; height: 13px; fill: none; }
.fav-empty p svg path { stroke: var(--fg-muted); stroke-width: 1.8; fill: none; }