/* ============================================================
   QuickPlay88 — playful 3D / candy design system
   Original showcase UI. No third-party brand assets.
   ============================================================ */

:root {
  /* Candy palette */
  --pink:      #ff4d8d;
  --pink-deep: #e01f6b;
  --purple:    #7c4dff;
  --purple-deep:#5b2fe0;
  --mint:      #2de1c2;
  --sky:       #4db8ff;
  --sun:       #ffd24d;
  --orange:    #ff8a3d;

  /* Surfaces */
  --bg-1:      #f3ecff;
  --bg-2:      #ffe9f4;
  --card:      #ffffff;
  --card-soft: #fbf7ff;
  --ink:       #2a2250;
  --ink-soft:  #6c6490;
  --line:      #ece6fb;

  /* Effects */
  --shadow-sm: 0 4px 12px rgba(80,40,160,.10);
  --shadow-md: 0 10px 24px rgba(80,40,160,.16);
  --shadow-lg: 0 18px 44px rgba(80,40,160,.22);
  --ring:      0 0 0 4px rgba(124,77,255,.18);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --gold-1: #ffe68a;
  --gold-2: #ffbf3d;
  --gold-3: #ff9a1f;

  --font: "Baloo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  /* Ambient backdrop for desktop; phone shell sits on top */
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--bg-2), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, #e7f3ff, transparent 55%),
    linear-gradient(160deg, var(--bg-1), #eaf6ff);
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow-x: hidden;
}

/* ------------------------------------------------------------
   Phone shell
   ------------------------------------------------------------ */
.app {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  background: linear-gradient(180deg, #fff 0%, #fdfbff 40%, #f7f1ff 100%);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 480px) {
  .app { margin: 18px 0; min-height: calc(100vh - 36px); border-radius: 34px; }
}

/* ------------------------------------------------------------
   Top bar
   ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: .3px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(160deg, var(--sun), var(--orange));
  display: grid; place-items: center;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 4px 10px rgba(255,138,61,.5);
  font-weight: 900; color: #7a2b00; font-size: 17px;
  transform: rotate(-6deg);
}
.brand b { font-size: 18px; }
.brand span { opacity: .85; font-weight: 700; }

.coin-pill {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  padding: 7px 12px 7px 8px;
  border-radius: var(--r-pill);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.coin { width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-1), var(--gold-2) 55%, var(--gold-3));
  box-shadow: inset 0 -2px 0 rgba(140,70,0,.35), 0 2px 5px rgba(255,160,0,.5);
  display: grid; place-items: center; font-size: 12px; color: #8a4b00; font-weight: 900;
}
.icon-btn {
  width: 38px; height: 38px; border: none; border-radius: 12px;
  background: rgba(255,255,255,.18); color: #fff; cursor: pointer;
  display: grid; place-items: center; position: relative;
}
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px;
  background: var(--sun); border-radius: 50%; box-shadow: 0 0 0 2px rgba(124,77,255,.6); }

/* ------------------------------------------------------------
   Screen / scroll area
   ------------------------------------------------------------ */
.screens { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 92px; }
.screen { display: none; padding: 16px 16px 8px; animation: pop .35s cubic-bezier(.2,.9,.3,1.3); }
.screen.active { display: block; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.section-title { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
.section-title h2 { font-size: 17px; font-weight: 800; }
.section-title a { font-size: 13px; color: var(--purple); font-weight: 700; text-decoration: none; }

/* ------------------------------------------------------------
   Hero banner
   ------------------------------------------------------------ */
.hero {
  border-radius: var(--r-lg);
  padding: 20px;
  color: #fff;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--sky), var(--purple) 70%, var(--pink));
  box-shadow: var(--shadow-md);
}
.hero h1 { font-size: 22px; line-height: 1.15; margin-bottom: 6px; text-shadow: 0 2px 6px rgba(0,0,0,.18); }
.hero p { opacity: .9; font-weight: 600; font-size: 13.5px; max-width: 72%; }
.hero .blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; }
.hero .blob.a { width: 120px; height: 120px; right: -24px; top: -30px; background: var(--sun); }
.hero .blob.b { width: 90px; height: 90px; right: 40px; bottom: -40px; background: var(--mint); }
.hero .cta {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--purple-deep); font-weight: 800;
  padding: 10px 16px; border-radius: var(--r-pill); border: none; cursor: pointer;
  box-shadow: 0 6px 0 rgba(0,0,0,.12); transition: transform .12s, box-shadow .12s;
}
.hero .cta:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }

/* ------------------------------------------------------------
   Daily spin wheel
   ------------------------------------------------------------ */
.spin-card {
  margin-top: 16px; background: var(--card); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--shadow-sm); text-align: center;
}
.wheel-wrap { position: relative; width: 240px; height: 240px; margin: 8px auto 4px; }
.wheel {
  width: 100%; height: 100%; border-radius: 50%;
  border: 8px solid #fff;
  box-shadow: var(--shadow-md), inset 0 0 0 6px rgba(124,77,255,.12);
  transition: transform 4.6s cubic-bezier(.12,.72,.14,1);
  background:
    conic-gradient(
      var(--pink)    0deg 45deg,
      var(--sun)     45deg 90deg,
      var(--mint)    90deg 135deg,
      var(--sky)     135deg 180deg,
      var(--purple)  180deg 225deg,
      var(--orange)  225deg 270deg,
      var(--pink-deep) 270deg 315deg,
      var(--gold-2)  315deg 360deg
    );
}
.wheel-labels { position: absolute; inset: 0; pointer-events: none; }
.wheel-labels span {
  position: absolute; left: 50%; top: 50%; color: #fff; font-weight: 900; font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  transform-origin: 0 0;
}
.wheel-hub {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%,-50%);
  background: radial-gradient(circle at 35% 30%, #fff, #eadcff);
  border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--purple-deep);
  box-shadow: var(--shadow-sm); font-size: 12px;
}
.wheel-pointer {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 20px solid var(--pink-deep); z-index: 5; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.btn-spin {
  margin-top: 6px; width: 100%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: #fff; font-weight: 900; font-size: 16px; padding: 14px; border-radius: var(--r-md);
  box-shadow: 0 7px 0 var(--pink-deep); transition: transform .12s, box-shadow .12s;
}
.btn-spin:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--pink-deep); }
.btn-spin:disabled { filter: grayscale(.4) opacity(.7); box-shadow: 0 7px 0 #b9b2d6; cursor: default; }

/* ------------------------------------------------------------
   Game grid
   ------------------------------------------------------------ */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid.triple { grid-template-columns: repeat(3, 1fr); }
.game {
  position: relative; border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  aspect-ratio: 1 / 1.06; color: #fff; padding: 12px 13px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 6px 0 rgba(42,34,80,.16), var(--shadow-sm); transition: transform .14s;
  isolation: isolate;
}
.game:active { transform: translateY(3px) scale(.98); }
.game:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.game::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--g, linear-gradient(135deg, var(--purple), var(--pink))); }
/* soft light behind the icon, and a darker foot so the title stays legible */
.game::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 55% at 32% 30%, rgba(255,255,255,.34), transparent 70%),
    linear-gradient(180deg, transparent 52%, rgba(30,10,60,.28)); }
.game .emoji { position: absolute; top: 14px; left: 12px; }
.game .emoji svg, .game .emoji img { width: 62px; height: 62px; display: block; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(40,10,70,.3)); }
/* Section headings inside the lobby grid. */
.grid-head { grid-column: 1 / -1; font-size: 17px; font-weight: 800; margin: 10px 2px -2px; display: flex; align-items: baseline; gap: 8px; }
.grid-head:first-child { margin-top: 0; }
.grid-head small { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.game h3 { font-size: 16px; font-weight: 800; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.game small { font-weight: 700; opacity: .92; font-size: 12px; line-height: 1.25; }
.game .tag {
  position: absolute; top: 11px; right: 11px; font-size: 10.5px; font-weight: 800;
  background: rgba(255,255,255,.92); color: var(--pink-deep); padding: 2px 9px; border-radius: var(--r-pill);
}

/* ------------------------------------------------------------
   Mission list
   ------------------------------------------------------------ */
.mission {
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm);
}
.mission .ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  font-size: 22px; flex: none; background: var(--card-soft); box-shadow: inset 0 0 0 1px var(--line); }
.mission .body { flex: 1; min-width: 0; }
.mission .body .row { display: flex; justify-content: space-between; align-items: baseline; }
.mission .body h4 { font-size: 14px; font-weight: 800; }
.mission .body .reward { font-size: 12px; font-weight: 800; color: var(--orange); white-space: nowrap; }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin-top: 7px; }
.bar > i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--mint), var(--sky)); }
.mission small { color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.btn-claim {
  border: none; cursor: pointer; font-weight: 800; font-size: 12px; padding: 9px 14px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--mint), var(--sky)); color: #063b49; box-shadow: 0 4px 0 #1f9fb8;
  transition: transform .1s, box-shadow .1s; white-space: nowrap;
}
.btn-claim:active { transform: translateY(3px); box-shadow: 0 1px 0 #1f9fb8; }
.btn-claim:disabled { background: #e7e2f4; color: #a79fc4; box-shadow: 0 4px 0 #cfc8e6; cursor: default; }

/* ------------------------------------------------------------
   VIP card
   ------------------------------------------------------------ */
.vip {
  border-radius: var(--r-lg); padding: 18px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #3a2a66, #6b3fa0 60%, var(--pink));
  box-shadow: var(--shadow-md);
}
.vip .shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%); }
.vip .row { display: flex; align-items: center; gap: 10px; position: relative; }
.vip .badge { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(160deg, var(--gold-1), var(--gold-3)); box-shadow: inset 0 -3px 0 rgba(120,60,0,.3); }
.vip h3 { font-size: 18px; }
.vip small { opacity: .85; font-weight: 600; }
.vip .bar { background: rgba(255,255,255,.2); margin-top: 14px; }
.vip .bar > i { background: linear-gradient(90deg, var(--gold-1), var(--gold-3)); }
.vip .meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; font-weight: 700; opacity: .92; }

/* ------------------------------------------------------------
   Leaderboard
   ------------------------------------------------------------ */
.lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--card);
  border-radius: var(--r-md); margin-bottom: 9px; box-shadow: var(--shadow-sm); }
.lb-row .rank { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 900; font-size: 13px; background: var(--card-soft); color: var(--ink-soft); flex: none; }
.lb-row.top1 .rank { background: linear-gradient(160deg, var(--gold-1), var(--gold-3)); color: #6a3800; }
.lb-row.top2 .rank { background: linear-gradient(160deg, #e7edf5, #b9c6d6); color: #44546a; }
.lb-row.top3 .rank { background: linear-gradient(160deg, #ffd9a8, #e39a4d); color: #6a3800; }
.lb-row .av { width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--sky), var(--purple)); display: grid; place-items: center; color: #fff; font-weight: 800; }
.lb-row .nm { flex: 1; font-weight: 700; font-size: 14px; }
.lb-row .pts { font-weight: 800; color: var(--orange); font-size: 13px; }

/* ------------------------------------------------------------
   Profile
   ------------------------------------------------------------ */
.profile-head { text-align: center; padding: 10px 0 4px; }
.profile-head .av { width: 86px; height: 86px; margin: 0 auto 10px; border-radius: 28px;
  background: linear-gradient(135deg, var(--sun), var(--pink)); display: grid; place-items: center;
  font-size: 40px; box-shadow: var(--shadow-md); transform: rotate(-4deg); }
.profile-head h2 { font-size: 20px; }
.profile-head p { color: var(--ink-soft); font-weight: 600; font-size: 13px; }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 16px 0; }
.stat { background: var(--card); border-radius: var(--r-md); padding: 14px 8px; text-align: center; box-shadow: var(--shadow-sm); }
.stat b { display: block; font-size: 19px; color: var(--purple-deep); }
.stat small { color: var(--ink-soft); font-weight: 600; font-size: 11px; }
.menu { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.menu button { width: 100%; border: none; background: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 12px; padding: 15px 16px; font-size: 14px; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--line); }
.menu button:last-child { border-bottom: none; }
.menu button .mi { font-size: 18px; }
.menu button .chev { margin-left: auto; color: var(--ink-soft); }

/* ------------------------------------------------------------
   Bottom nav
   ------------------------------------------------------------ */
.nav {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 20px rgba(80,40,160,.08);
}
.nav button { border: none; background: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: var(--ink-soft); font-weight: 700; font-size: 11px; }
.nav button .ni { width: 26px; height: 26px; display: grid; place-items: center; transition: transform .15s; }
.nav button .ni svg { width: 23px; height: 23px; display: block; }
.nav button.active { color: var(--purple-deep); }
.nav button.active .ni { transform: translateY(-2px) scale(1.18); }

/* ------------------------------------------------------------
   Auth overlay (DEMO — honest, non-impersonating)
   ------------------------------------------------------------ */
.auth {
  position: absolute; inset: 0; z-index: 60; display: none; flex-direction: column;
  background: linear-gradient(170deg, var(--purple), var(--pink));
  color: #fff; padding: 26px 22px; overflow-y: auto;
}
.auth.active { display: flex; animation: pop .3s ease; }
.demo-banner {
  background: rgba(0,0,0,.28); border: 1px dashed rgba(255,255,255,.5); border-radius: 12px;
  padding: 9px 12px; font-size: 12px; font-weight: 700; margin-bottom: 18px; line-height: 1.35;
}
.auth .logo-lg { width: 64px; height: 64px; border-radius: 20px; margin: 10px auto 12px;
  background: linear-gradient(160deg, var(--sun), var(--orange)); display: grid; place-items: center;
  font-weight: 900; color: #7a2b00; font-size: 30px; transform: rotate(-6deg); box-shadow: var(--shadow-md); }
.auth h1 { text-align: center; font-size: 24px; }
.auth .sub { text-align: center; opacity: .88; font-weight: 600; margin-bottom: 20px; font-size: 13.5px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; opacity: .92; }
.field input {
  width: 100%; border: none; border-radius: 14px; padding: 14px 15px; font-size: 15px; font-family: inherit;
  background: rgba(255,255,255,.95); color: var(--ink); box-shadow: inset 0 0 0 2px transparent;
}
.field input:focus { outline: none; box-shadow: var(--ring); }
.field.otp { display: flex; gap: 8px; }
.field.otp input { text-align: center; letter-spacing: 2px; }
.field.otp button {
  flex: none; border: none; cursor: pointer; border-radius: 14px; padding: 0 14px; font-weight: 800; font-family: inherit;
  background: var(--sun); color: #6a3800; white-space: nowrap;
}
.btn-primary {
  width: 100%; border: none; cursor: pointer; font-family: inherit; font-weight: 900; font-size: 16px;
  padding: 15px; border-radius: 16px; color: var(--purple-deep); background: #fff;
  box-shadow: 0 7px 0 rgba(0,0,0,.18); transition: transform .12s, box-shadow .12s; margin-top: 6px;
}
.btn-primary:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.auth .switch { text-align: center; margin-top: 18px; font-weight: 600; font-size: 13.5px; opacity: .95; }
.auth .switch a { color: var(--sun); font-weight: 800; text-decoration: none; cursor: pointer; }
.form-msg { min-height: 18px; margin-top: 10px; font-size: 13px; font-weight: 700; text-align: center; }
.form-msg.err { color: #ffe0e0; }
.form-msg.ok  { color: #d6fff0; }
.auth .skip { position: absolute; top: 18px; right: 18px; color: #fff; opacity: .85; font-weight: 700;
  background: rgba(0,0,0,.2); border: none; cursor: pointer; padding: 7px 13px; border-radius: var(--r-pill); font-family: inherit; }

/* ------------------------------------------------------------
   Toast + floating coins + confetti
   ------------------------------------------------------------ */
#toast-wrap { position: absolute; top: 70px; left: 0; right: 0; z-index: 96; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: var(--ink); color: #fff; font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-md); animation: toast-in .4s cubic-bezier(.2,.9,.3,1.3); max-width: 86%; text-align: center; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.9); } to { opacity: 1; transform: none; } }
.float-coin { position: absolute; z-index: 94; pointer-events: none; animation: fly 1s ease forwards; }
.float-coin svg { width: 28px; height: 28px; display: block; }
@keyframes fly { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-120px) scale(1.5); } }
#confetti { position: absolute; inset: 0; z-index: 92; pointer-events: none; }

/* Reward modal */
.modal-back { position: absolute; inset: 0; z-index: 90; background: rgba(42,34,80,.55); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-back.active { display: flex; animation: pop .25s ease; }
.modal { background: #fff; border-radius: var(--r-lg); padding: 26px 22px; text-align: center; width: 100%; max-width: 320px; box-shadow: var(--shadow-lg); }
.modal .big { display: flex; justify-content: center; animation: bounce .7s ease infinite alternate; }
.modal .big svg { width: 78px; height: 78px; display: block; filter: drop-shadow(0 6px 10px rgba(255,150,0,.35)); }
@keyframes bounce { to { transform: translateY(-8px); } }
.modal h2 { font-size: 22px; margin: 6px 0 4px; }
.modal p { color: var(--ink-soft); font-weight: 600; margin-bottom: 18px; }
.modal .amount { font-size: 30px; font-weight: 900; color: var(--orange); margin-bottom: 18px; }

.reveal { animation: pop .5s cubic-bezier(.2,.9,.3,1.3) both; }

/* ------------------------------------------------------------
   Wallet screen + ledger
   ------------------------------------------------------------ */
.wallet-hero {
  border-radius: var(--r-lg); padding: 22px 20px; color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: var(--shadow-md); margin-top: 4px;
}
.wallet-hero small { opacity: .85; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; font-size: 11px; }
.wallet-balance { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 40px; font-weight: 900; margin: 6px 0 16px; }
.coin.big { width: 34px; height: 34px; font-size: 18px; }
.wallet-actions { display: flex; gap: 10px; }
.wbtn {
  flex: 1; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 14px;
  padding: 13px; border-radius: var(--r-md); color: var(--purple-deep); background: #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,.14); transition: transform .12s, box-shadow .12s;
}
.wbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.14); }
.wbtn.ghost { background: rgba(255,255,255,.18); color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.18); }

.led-row { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 9px; box-shadow: var(--shadow-sm); }
.led-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 18px; flex: none; }
.led-ic.c { background: rgba(45,225,194,.18); color: #0f9b86; }
.led-ic.d { background: rgba(255,77,141,.16); color: var(--pink-deep); }
.led-body { flex: 1; min-width: 0; }
.led-body b { display: block; font-size: 14px; font-weight: 800; }
.led-body small { color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.led-amt { font-weight: 900; font-size: 15px; white-space: nowrap; }
.led-amt.c { color: #0f9b86; }
.led-amt.d { color: var(--pink-deep); }

.fineprint { color: var(--ink-soft); font-size: 11.5px; font-weight: 600; text-align: center; margin: 14px 2px 4px; line-height: 1.5; }