/* ═══════════════════════════════════════════════════
   KoSay Premium Game Top-Up
   Theme: Deep Black · Warm Gold · Soft Lavender Purple
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Gold ── */
  --g0: #FFF3D4;
  --g1: #E8C97A;
  --g2: #C8A050;
  --g3: #A07830;
  --g4: #6B4E10;
  --gold-grad: linear-gradient(135deg, #F0D484 0%, #E8C97A 40%, #C8A050 100%);
  --gold-text: linear-gradient(135deg, #F0D484, #C8A050);

  /* ── Light Purple / Soft Lavender ── */
  --p1: #DDD0FF;   /* lightest lavender */
  --p2: #C4B5FD;   /* soft lavender (main) */
  --p3: #A78BFA;   /* medium purple */
  --p4: #7C3AED;   /* deep purple */
  --purple:      #C4B5FD;
  --purple-mid:  #A78BFA;
  --purple-deep: #7C3AED;
  --purple-grad: linear-gradient(135deg, #DDD0FF 0%, #C4B5FD 50%, #A78BFA 100%);
  --purple-text: linear-gradient(135deg, #DDD0FF, #A78BFA);
  --purple-d:    rgba(196,181,253, 0.10);
  --purple-glow: rgba(167,139,250, 0.20);

  /* ── Surfaces — pure black with violet soul ── */
  --bg:     #07070E;
  --surf-1: #0C0C1A;
  --surf-2: #101020;
  --surf-3: #161628;
  --surf-4: #1C1C32;

  /* ── Borders — purple-tinted ── */
  --bdr:   rgba(196,181,253, 0.08);
  --bdr-h: rgba(196,181,253, 0.22);
  --bdr-s: rgba(196,181,253, 0.40);
  /* gold borders for gold elements */
  --bdr-g:  rgba(200,160,80, 0.18);
  --bdr-gh: rgba(200,160,80, 0.38);

  /* ── Text ── */
  --t1: #F2EEF8;
  --t2: #9890A8;
  --t3: #52496A;

  /* ── Utility ── */
  --green: #22C55E;

  /* ── Radii ── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  0.22s;

  --font:    'Inter', sans-serif;
  --font-hd: 'Cinzel', serif;
  --font-mm: 'Noto Sans Myanmar', sans-serif;

  --app-w:  480px;
  --hdr-h:  58px;
  --bar-h:  68px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--t1);
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit;}
input{font-family:inherit;border:none;outline:none;background:none;color:inherit;}

/* ── App Shell ── */
.app-shell{
  position:relative;
  width:100%;
  max-width:var(--app-w);
  height:100vh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  background:var(--surf-1);
  overflow:hidden;
  border-left:1px solid var(--bdr);
  border-right:1px solid var(--bdr);
}

/* ambient glow — purple + gold blend */
body::before{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 25% 20%,
      rgba(167,139,250,.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 75% 75%,
      rgba(200,160,80,.05) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
}

/* ══════════ HEADER ══════════ */
.header{
  flex-shrink:0;
  height:var(--hdr-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  background:rgba(7,7,14,.88);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bdr);
  position:relative;
  z-index:10;
}

/* two-tone shimmer line under header: gold center → purple edges */
.header::after{
  content:'';
  position:absolute;
  bottom:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,
    rgba(196,181,253,.3) 0%,
    #C8A050 30%,
    #E8C97A 50%,
    #C8A050 70%,
    rgba(196,181,253,.3) 100%);
  opacity:.7;
}

.header-logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-mark{
  width:34px;height:34px;
  border-radius:10px;
  background:var(--gold-grad);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-hd);
  font-size:1rem;font-weight:900;
  color:#2A1800;
  letter-spacing:0;
  box-shadow:0 2px 14px rgba(200,160,80,.4);
}

.logo-text{
  font-family:var(--font-hd);
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:2px;
  color:var(--t1);
}
.logo-text em{
  font-style:normal;
  background:var(--gold-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.header-actions{display:flex;align-items:center;gap:8px;}

.hdr-btn{
  display:flex;align-items:center;gap:7px;
  padding:7px 13px;
  background:var(--surf-3);
  border:1px solid var(--bdr);
  border-radius:50px;
  font-size:.78rem;font-weight:600;
  color:var(--g1);
  transition:var(--dur) var(--ease);
}
.hdr-btn:hover{border-color:var(--bdr-gh);background:var(--surf-4);}

.hdr-icon{
  position:relative;
  width:34px;height:34px;
  background:var(--surf-3);
  border:1px solid var(--bdr);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;color:var(--t2);
  transition:var(--dur) var(--ease);
}
.hdr-icon:hover{color:var(--p2);border-color:var(--bdr-h);}

.dot-red{
  position:absolute;top:6px;right:6px;
  width:6px;height:6px;
  background:#EF4444;border-radius:50%;
  border:1.5px solid var(--surf-1);
}

/* ══════════ SCROLL AREA ══════════ */
.main-scroll{
  flex:1;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:0 0 8px;
  scrollbar-width:thin;
  scrollbar-color:var(--bdr) transparent;
}
.main-scroll::-webkit-scrollbar{width:2px;}
.main-scroll::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px;}

/* ══════════ GREETING CARD ══════════ */
.greeting-card{
  margin:14px 14px 0;
  padding:22px 20px;
  /* deep purple-black gradient for card bg */
  background:linear-gradient(135deg, #130D2C 0%, #0E0D20 45%, #1A0E30 100%);
  border:1px solid rgba(196,181,253,.18);
  border-radius:var(--r-xl);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}

/* soft purple dot grid */
.greeting-card::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle, rgba(196,181,253,.09) 1px, transparent 1px);
  background-size:22px 22px;
  pointer-events:none;
}

/* top-right purple glow */
.greeting-card::after{
  content:'';
  position:absolute;
  top:-50px;right:-50px;
  width:180px;height:180px;
  background:radial-gradient(circle, rgba(167,139,250,.22) 0%, transparent 70%);
  pointer-events:none;
}

/* decorative corner brackets — purple */
.card-corner{
  position:absolute;
  width:18px;height:18px;
  border-color:var(--p3);
  border-style:solid;
  opacity:.45;
}
.card-corner.tl{top:10px;left:10px;border-width:2px 0 0 2px;border-radius:4px 0 0 0;}
.card-corner.br{bottom:10px;right:10px;border-width:0 2px 2px 0;border-radius:0 0 4px 0;}

.greeting-left{position:relative;z-index:1;}

.greet-hello{
  font-family:var(--font-mm);
  font-size:.78rem;color:var(--p2);
  margin-bottom:6px;letter-spacing:.5px;
}

.greet-title{
  font-family:var(--font-hd);
  font-size:1.25rem;font-weight:700;
  line-height:1.25;letter-spacing:1px;
  color:var(--t1);
}
.greet-title span{
  background:var(--gold-text);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.greet-sub{
  font-family:var(--font-mm);
  font-size:.72rem;color:var(--p3);
  margin-top:8px;letter-spacing:2px;
  opacity:.7;
}

/* concentric ring badge — purple rings, gold core */
.greeting-right{position:relative;z-index:1;}
.greet-badge-wrap{position:relative;width:70px;height:70px;display:flex;align-items:center;justify-content:center;}

.greet-circle{
  position:absolute;border-radius:50%;border:1px solid;
  animation:ring-spin 8s linear infinite;
}
.greet-circle.outer{
  width:68px;height:68px;
  border-color:rgba(196,181,253,.25);
  animation-direction:normal;
}
.greet-circle.mid{
  width:50px;height:50px;
  border-color:rgba(167,139,250,.40);
  animation-direction:reverse;
  animation-duration:5s;
}
.greet-circle.inner{
  width:34px;height:34px;
  background:var(--gold-grad);
  border-color:var(--g1);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:#2A1800;
  box-shadow:0 0 22px rgba(200,160,80,.45), 0 0 40px rgba(167,139,250,.2);
  animation:none;
}

@keyframes ring-spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* ══════════ STATS ROW ══════════ */
.stats-row{
  display:flex;
  align-items:center;
  margin:10px 14px 0;
  padding:14px 18px;
  background:var(--surf-2);
  border:1px solid var(--bdr);
  border-radius:var(--r);
}

.stat-chip{
  flex:1;
  display:flex;align-items:center;gap:10px;
  justify-content:center;
}

.stat-chip:nth-child(1) i{font-size:1rem;color:var(--p2);}
.stat-chip:nth-child(3) i{font-size:1rem;color:var(--g2);}
.stat-chip:nth-child(5) i{font-size:1rem;color:var(--p3);}

.stat-chip div{display:flex;flex-direction:column;}
.stat-chip strong{font-size:.88rem;font-weight:700;color:var(--t1);line-height:1.1;}
.stat-chip span{font-size:.66rem;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;}

.stat-divider{width:1px;height:30px;background:var(--bdr);flex-shrink:0;}

/* ══════════ SECTION LABEL ══════════ */
.section-label{
  display:flex;align-items:center;gap:8px;
  margin:18px 14px 10px;
  font-size:.72rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--t3);
}
.section-label::after{
  content:'';flex:1;height:1px;background:var(--bdr);
}

.label-hot{color:var(--g1);letter-spacing:.5px;font-size:.72rem;}
.label-hot i{font-size:.68rem;color:#F97316;}

/* ══════════ ACTION TILES ══════════ */
.action-tiles{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin:0 14px;
}

.tile{
  display:flex;align-items:center;gap:12px;
  padding:16px 14px;
  border-radius:var(--r);
  border:1px solid var(--bdr);
  transition:var(--dur) var(--ease);
  position:relative;overflow:hidden;
}
.tile:active{transform:scale(.98);}

/* gold top-up tile */
.tile-topup{
  background:linear-gradient(135deg,
    rgba(200,160,80,.15) 0%,
    rgba(200,160,80,.04) 100%);
  border-color:var(--bdr-g);
}
.tile-topup:hover{
  background:linear-gradient(135deg,
    rgba(200,160,80,.24) 0%,
    rgba(200,160,80,.08) 100%);
  border-color:var(--bdr-gh);
  box-shadow:0 4px 22px rgba(200,160,80,.14);
}

/* purple history tile */
.tile-history{
  background:linear-gradient(135deg,
    rgba(196,181,253,.12) 0%,
    rgba(167,139,250,.03) 100%);
  border-color:rgba(196,181,253,.18);
}
.tile-history:hover{
  background:linear-gradient(135deg,
    rgba(196,181,253,.20) 0%,
    rgba(167,139,250,.06) 100%);
  border-color:var(--bdr-h);
  box-shadow:0 4px 22px rgba(167,139,250,.12);
}

.tile-icon{
  width:40px;height:40px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}
.tile-topup .tile-icon{
  background:var(--gold-grad);color:#2A1800;
  box-shadow:0 2px 12px rgba(200,160,80,.35);
}
.tile-history .tile-icon{
  background:linear-gradient(135deg, rgba(196,181,253,.18), rgba(167,139,250,.08));
  border:1px solid rgba(196,181,253,.30);
  color:var(--p2);
  box-shadow:0 2px 10px rgba(167,139,250,.15);
}

.tile-body{flex:1;display:flex;flex-direction:column;gap:2px;}
.tile-name{font-size:.82rem;font-weight:700;color:var(--t1);}
.tile-hint{
  font-family:var(--font-mm);
  font-size:.68rem;color:var(--t3);
}

.tile-arrow{
  width:26px;height:26px;
  background:rgba(255,255,255,.04);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:var(--t3);
  flex-shrink:0;
}
.tile-topup:hover .tile-arrow{color:var(--g2);}
.tile-history:hover .tile-arrow{color:var(--p2);}

/* ══════════ TICKER ══════════ */
.ticker-bar{
  display:flex;align-items:center;gap:10px;
  margin:14px 14px 0;
  padding:10px 14px;
  background:var(--surf-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  overflow:hidden;
}

.ticker-tag{
  flex-shrink:0;
  width:24px;height:24px;
  background:rgba(196,181,253,.10);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;color:var(--p2);
}

.ticker-content{flex:1;overflow:hidden;}

.ticker-track{
  display:inline-flex;align-items:center;gap:16px;
  white-space:nowrap;
  font-family:var(--font-mm);
  font-size:.73rem;color:var(--t2);
  animation:ticker 22s linear infinite;
}
.ticker-track .sep{color:var(--p3);opacity:.4;}

@keyframes ticker{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ══════════ SEARCH ══════════ */
.search-row{margin:12px 14px 0;}

.search-field{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  background:var(--surf-2);
  border:1px solid var(--bdr);
  border-radius:var(--r);
  transition:var(--dur) var(--ease);
}
.search-field:focus-within{
  border-color:rgba(196,181,253,.35);
  background:var(--surf-3);
  box-shadow:0 0 0 3px rgba(167,139,250,.08);
}

.search-field i{color:var(--t3);font-size:.82rem;flex-shrink:0;}

.search-field input{
  flex:1;font-size:.85rem;color:var(--t1);
}
.search-field input::placeholder{color:var(--t3);}

.clear-x{
  width:22px;height:22px;border-radius:50%;
  background:var(--surf-4);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;color:var(--t3);
  flex-shrink:0;
  transition:var(--dur) var(--ease);
}
.clear-x:hover{color:var(--p2);}

/* ══════════ CATEGORY PILLS ══════════ */
.cat-pills{
  display:flex;gap:8px;
  padding:10px 14px 0;
  overflow-x:auto;scrollbar-width:none;
}
.cat-pills::-webkit-scrollbar{display:none;}

.pill{
  padding:7px 16px;
  background:var(--surf-2);
  border:1px solid var(--bdr);
  border-radius:50px;
  font-size:.76rem;font-weight:600;
  color:var(--t2);
  white-space:nowrap;flex-shrink:0;
  transition:var(--dur) var(--ease);
  font-family:var(--font-mm);
}
/* active pill — gold gradient */
.pill.active{
  background:var(--gold-grad);
  border-color:var(--g1);
  color:#2A1800;
  box-shadow:0 2px 12px rgba(200,160,80,.25);
}
.pill:hover:not(.active){
  border-color:rgba(196,181,253,.30);
  color:var(--p2);
}

/* ══════════ FEATURED CARDS (horizontal scroll) ══════════ */
.featured-scroll{
  display:flex;gap:12px;
  padding:0 14px;
  overflow-x:auto;scrollbar-width:none;
}
.featured-scroll::-webkit-scrollbar{display:none;}

.featured-card{
  flex-shrink:0;
  width:150px;
  border-radius:var(--r-lg);
  border:1px solid var(--bdr);
  padding:16px 14px;
  position:relative;overflow:hidden;
  cursor:pointer;
  transition:var(--dur) var(--ease);
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:160px;
}
.featured-card:hover{transform:translateY(-4px);border-color:var(--bdr-h);}

.fc-bg{
  position:absolute;inset:0;border-radius:var(--r-lg);
}
.fc-bg-mlbb   {background:linear-gradient(145deg,#0D1A50,#1540A0);}
.fc-bg-ff     {background:linear-gradient(145deg,#5C0015,#AA1533);}
/* genshin — deep purple */
.fc-bg-genshin{background:linear-gradient(145deg,#200A4A,#5E1FAA);}
/* valorant — dark purple-red */
.fc-bg-valorant{background:linear-gradient(145deg,#2A0040,#7B0080);}

.fc-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.80) 0%, transparent 60%);
  border-radius:var(--r-lg);
}

.fc-badge{
  position:absolute;top:10px;left:10px;
  padding:3px 8px;
  background:rgba(200,160,80,.92);
  border-radius:4px;
  font-size:.58rem;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  color:#2A1800;
}

.fc-icon{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-62%);
  font-size:1.8rem;
  color:rgba(255,255,255,.20);
  pointer-events:none;
}

.fc-info{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:2px;
  margin-bottom:4px;
}
.fc-info strong{font-size:.8rem;font-weight:700;color:#fff;line-height:1.2;}
.fc-info span{font-size:.66rem;color:rgba(255,255,255,.50);}

.fc-price{
  position:relative;z-index:1;
  font-size:.68rem;font-weight:700;
  color:var(--g1);
}

/* ══════════ PRODUCTS LIST ══════════ */
.prod-list{
  margin:0 14px;
  border:1px solid var(--bdr);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surf-2);
}

.prod-count{
  margin-left:6px;
  padding:2px 9px;
  background:var(--surf-3);
  border:1px solid var(--bdr);
  border-radius:50px;
  font-size:.68rem;color:var(--t3);
  font-weight:600;
}

.prod-row{
  display:flex;align-items:center;gap:13px;
  padding:13px 16px;
  border-bottom:1px solid rgba(196,181,253,.04);
  transition:var(--dur) var(--ease);
  position:relative;
}
.prod-row:last-child{border-bottom:none;}
.prod-row:hover{background:var(--surf-3);}

/* two-tone left accent: gold → purple */
.prod-row::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom, var(--g2), var(--p3));
  opacity:0;transition:var(--dur) var(--ease);
}
.prod-row:hover::before{opacity:1;}

/* product icons */
.prod-icon{
  width:44px;height:44px;
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.pi-mlbb    {background:linear-gradient(135deg,#0D2060,#1565C0);color:#90CAF9;}
.pi-ff      {background:linear-gradient(135deg,#6B0000,#B71C1C);color:#FFCDD2;}
.pi-pubg    {background:linear-gradient(135deg,#3E2800,#78550A);color:#FFE082;}
.pi-genshin {background:linear-gradient(135deg,#200A4A,#5E1FAA);color:#DDD0FF;}
.pi-hok     {background:linear-gradient(135deg,#5C0000,#960026);color:#FCE4EC;}
.pi-valorant{background:linear-gradient(135deg,#2A0040,#7B0080);color:#DDD0FF;}
.pi-lol     {background:linear-gradient(135deg,#003322,#00574B);color:#A7FFEB;}
.pi-gplay   {background:linear-gradient(135deg,#0A2E00,#2E7D32);color:#CCFF90;}

.prod-mid{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}

.prod-name{
  font-size:.84rem;font-weight:700;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prod-desc{
  font-size:.72rem;color:var(--t3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.prod-end{
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;
}

.prod-sold{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.68rem;font-weight:700;
  color:var(--p2);
  padding:2px 7px;
  background:rgba(196,181,253,.08);
  border:1px solid rgba(196,181,253,.16);
  border-radius:50px;
}
.prod-sold i{font-size:.55rem;color:#F97316;}

.prod-chev{
  font-size:.6rem;color:var(--t3);
  width:20px;height:20px;
  background:var(--surf-4);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:var(--dur) var(--ease);
}
.prod-row:hover .prod-chev{color:var(--p2);background:rgba(196,181,253,.10);}

/* ══════════ EMPTY ══════════ */
.empty-msg{
  text-align:center;padding:40px 20px;color:var(--t3);
  margin:0 14px;
}
.empty-msg i{font-size:2.5rem;margin-bottom:12px;display:block;opacity:.4;}
.empty-msg p{font-family:var(--font-mm);font-size:.88rem;}

/* ══════════ PAYMENT BLOCK ══════════ */
.pay-block{
  margin:14px 14px 0;
  padding:16px;
  background:var(--surf-2);
  border:1px solid var(--bdr);
  border-radius:var(--r);
}
.pay-title{
  font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--t3);margin-bottom:12px;font-weight:600;
}
.pay-pills{display:flex;flex-wrap:wrap;gap:8px;}
.pay-pills span{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  background:var(--surf-3);
  border:1px solid var(--bdr);
  border-radius:var(--r-xs);
  font-size:.74rem;font-weight:600;color:var(--t2);
  transition:var(--dur) var(--ease);
}
.pay-pills span i{color:var(--g2);font-size:.8rem;}
.pay-pills span:hover{border-color:rgba(196,181,253,.28);color:var(--p2);}

/* ══════════ SOCIALS ══════════ */
.socials-row{
  display:flex;justify-content:center;gap:12px;
  margin:12px 14px 0;
}
.soc-btn{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;
  border:1px solid var(--bdr);
  transition:var(--dur) var(--ease);
}
.soc-btn:hover{transform:translateY(-3px);}

.s-fb{background:rgba(24,119,242,.10);color:#1877F2;border-color:rgba(24,119,242,.22);}
.s-tg{background:rgba(0,136,204,.10);color:#0088CC;border-color:rgba(0,136,204,.22);}
.s-vb{background:rgba(115,74,159,.10);color:#734A9F;border-color:rgba(115,74,159,.22);}
.s-tt{background:rgba(255,0,80,.08);color:#FF0050;border-color:rgba(255,0,80,.20);}

.s-fb:hover{background:rgba(24,119,242,.20);}
.s-tg:hover{background:rgba(0,136,204,.20);}
.s-vb:hover{background:rgba(115,74,159,.20);}
.s-tt:hover{background:rgba(255,0,80,.15);}

/* ══════════ FOOTER COPY ══════════ */
.foot-copy{
  text-align:center;
  margin-top:14px;
  font-size:.7rem;color:var(--t3);
  padding:0 14px;
}

/* ══════════ BOTTOM BAR ══════════ */
.bottom-bar{
  flex-shrink:0;
  height:var(--bar-h);
  display:flex;align-items:center;justify-content:space-around;
  padding:0 6px 4px;
  background:rgba(7,7,14,.94);
  backdrop-filter:blur(24px);
  border-top:1px solid var(--bdr);
  position:relative;z-index:10;
}

/* two-tone shimmer top line */
.bottom-bar::before{
  content:'';
  position:absolute;top:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,
    rgba(196,181,253,.3) 0%,
    #C8A050 30%,
    #E8C97A 50%,
    #C8A050 70%,
    rgba(196,181,253,.3) 100%);
  opacity:.55;
}

.bb-tab{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 12px;
  border-radius:var(--r-sm);
  font-size:.6rem;font-weight:600;letter-spacing:.3px;
  color:var(--t3);
  transition:var(--dur) var(--ease);
  min-width:56px;
}
.bb-tab i{font-size:1.05rem;}
.bb-tab:hover{color:var(--p2);}
.bb-tab.active{color:var(--g1);}
.bb-tab.active i{filter:drop-shadow(0 0 6px rgba(200,160,80,.45));}

.bb-center{color:var(--t3);}
.bb-center span{font-size:.6rem;}

.bb-fab{
  width:44px;height:44px;
  /* gold → purple gradient FAB */
  background:linear-gradient(135deg, #E8C97A 0%, #C8A050 50%, #9B6CF0 100%);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#1A0A30;font-size:1rem;
  box-shadow:0 4px 18px rgba(167,139,250,.35), 0 2px 10px rgba(200,160,80,.3);
  margin-bottom:2px;
  margin-top:-8px;
  transition:var(--dur) var(--ease);
}
.bb-center:hover .bb-fab{
  transform:scale(1.08);
  box-shadow:0 6px 26px rgba(167,139,250,.5), 0 4px 16px rgba(200,160,80,.4);
}

/* ══════════ ANIMATIONS ══════════ */
.prod-row{animation:slideUp .35s var(--ease) both;}
.prod-row:nth-child(1){animation-delay:.04s;}
.prod-row:nth-child(2){animation-delay:.08s;}
.prod-row:nth-child(3){animation-delay:.12s;}
.prod-row:nth-child(4){animation-delay:.16s;}
.prod-row:nth-child(5){animation-delay:.20s;}
.prod-row:nth-child(6){animation-delay:.24s;}
.prod-row:nth-child(7){animation-delay:.28s;}
.prod-row:nth-child(8){animation-delay:.32s;}

@keyframes slideUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:360px){
  .action-tiles{grid-template-columns:1fr;}
  .greet-title{font-size:1.05rem;}
  .featured-card{width:130px;min-height:140px;}
}