/* ---------------------------------------------------------------- Tokens */
:root {
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --brand-soft: #eef2ff;
  --gold: #f59e0b;
  --gold-2: #f97316;
  --success: #10b981;
  --danger: #ef4444;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --shadow-lg: 0 20px 50px rgba(79, 70, 229, .18);
  --grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  --grad-gold: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);

  --bs-primary: var(--brand);
  --bs-primary-rgb: 79, 70, 229;
  --bs-body-font-family: Vazirmatn, system-ui, sans-serif;
  --bs-body-color: var(--ink);
  --bs-border-radius: var(--radius-sm);
}

body {
  background: var(--bg);
  font-family: Vazirmatn, system-ui, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: var(--brand); text-decoration: none; }
.text-muted { color: var(--muted) !important; }
.fw-black, .fw-bold, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600 !important; }
.fw-semibold, b, strong { font-weight: 500 !important; }
.num { font-feature-settings: "tnum"; }

/* ---------------------------------------------------------------- Navbar */
.app-nav {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.app-nav .navbar-brand { font-weight: 500; display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; background: var(--grad);
  display: grid; place-items: center; color: #fff; font-size: 1.1rem;
}
.app-nav .nav-link { color: var(--muted); font-weight: 500; border-radius: 10px; padding: .45rem .8rem !important; }
.app-nav .nav-link:hover, .app-nav .nav-link.active { color: var(--brand); background: var(--brand-soft); }
.wallet-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 500; font-size: .9rem;
}
.sub-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-weight: 500; font-size: .9rem;
}

/* ---------------------------------------------------------------- Buttons */
.btn { border-radius: 12px; font-weight: 500; padding: .6rem 1.1rem; }
.btn-sm { padding: .4rem .8rem; border-radius: 10px; }
.btn-lg { padding: .8rem 1.5rem; border-radius: 14px; }
.btn-brand {
  background: var(--grad); color: #fff; border: 0;
  box-shadow: 0 6px 18px rgba(79, 70, 229, .28); transition: transform .15s, box-shadow .15s;
}
.btn-brand:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(79, 70, 229, .35); }
.btn-gold { background: var(--grad-gold); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(249, 115, 22, .3); }
.btn-gold:hover { color: #fff; filter: brightness(1.05); }
.btn-soft { background: var(--brand-soft); color: var(--brand); border: 0; }
.btn-soft:hover { background: #e0e7ff; color: var(--brand); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: #fff; border-color: #cbd5e1; }

/* ---------------------------------------------------------------- Surfaces */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel-body { padding: 1.5rem; }
.section-title { font-weight: 500; font-size: 1.15rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.section-title i { color: var(--brand); }

.form-control, .form-select {
  border-radius: 12px; border-color: var(--line); padding: .65rem .9rem; background-color: #fbfcfe;
}
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); }
.form-label { font-weight: 500; font-size: .9rem; }

.alert { border: 0; border-radius: 14px; box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative; overflow: hidden; border-radius: 28px; color: #fff;
  background: var(--grad); padding: 3rem 2rem; margin-bottom: 2rem;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1);
}
.hero::before { width: 380px; height: 380px; top: -160px; left: -80px; }
.hero::after { width: 240px; height: 240px; bottom: -120px; right: 10%; }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-weight: 500; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.hero p { opacity: .9; font-size: 1.05rem; }
.hero-search { background: #fff; border-radius: 16px; padding: .4rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.hero-search .form-control, .hero-search .form-select { border: 0; background: transparent; box-shadow: none; }
.hero-steps { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-step {
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .2);
  padding: .45rem .9rem; border-radius: 999px; font-size: .9rem; display: flex; gap: .4rem; align-items: center;
}

/* ---------------------------------------------------------------- Books */
.book-card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden; height: 100%;
  border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column; color: var(--ink);
}
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--ink); }
.book-cover { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.book-cover-ph {
  aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.2rem; color: #fff; font-weight: 500; font-size: 1.15rem; position: relative;
}
.book-cover-ph i { position: absolute; top: 1rem; left: 1rem; font-size: 1.6rem; opacity: .6; }
.book-cover-ph small { font-weight: 400; opacity: .8; font-size: .8rem; }
.cover-0 { background: linear-gradient(160deg, #6366f1, #312e81); }
.cover-1 { background: linear-gradient(160deg, #ec4899, #7c2d12); }
.cover-2 { background: linear-gradient(160deg, #14b8a6, #134e4a); }
.cover-3 { background: linear-gradient(160deg, #f59e0b, #7c2d12); }
.book-card .meta { padding: 1rem 1.1rem 1.2rem; }
.book-card h6 { font-weight: 500; margin-bottom: .25rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 500;
  padding: .25rem .6rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand);
}
.chip-success { background: #d1fae5; color: #047857; }
.chip-gold { background: #fef3c7; color: #b45309; }
.chip-muted { background: #f1f5f9; color: var(--muted); }
.chip-danger { background: #fee2e2; color: #b91c1c; }

.detail-cover { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }

/* Stepper */
.stepper { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .75rem; }
.stepper li { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; border-radius: 14px; background: #f8fafc; }
.stepper .dot {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: #e2e8f0; color: var(--muted); font-weight: 500;
}
.stepper li.done { background: #ecfdf5; }
.stepper li.done .dot { background: var(--success); color: #fff; }
.stepper li.current { background: var(--brand-soft); outline: 2px solid rgba(79, 70, 229, .25); }
.stepper li.current .dot { background: var(--grad); color: #fff; }

/* Reader */
.reader { white-space: pre-wrap; line-height: 2.3; font-size: 1.12rem; max-width: 760px; margin: 0 auto; }
.reader-progress { position: fixed; top: 0; right: 0; height: 3px; background: var(--grad); z-index: 2000; width: 0; }

/* ---------------------------------------------------------------- Plans */
.plan-card {
  background: var(--surface); border-radius: 22px; border: 1px solid var(--line); padding: 2rem 1.6rem;
  height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow); position: relative;
  transition: transform .2s;
}
.plan-card:hover { transform: translateY(-4px); }
.plan-card.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); }
.plan-badge {
  position: absolute; top: -13px; right: 50%; transform: translateX(50%);
  background: var(--grad); color: #fff; font-size: .75rem; font-weight: 500; padding: .3rem .9rem; border-radius: 999px;
}
.plan-price { font-size: 2.3rem; font-weight: 500; margin: .8rem 0 .2rem; }
.plan-features { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; flex: 1; }
.plan-features li { padding: .35rem 0; color: var(--muted); }
.plan-features i { color: var(--success); margin-left: .4rem; }

/* ---------------------------------------------------------------- Stats */
.stat {
  border-radius: var(--radius); padding: 1.3rem 1.4rem; color: #fff; height: 100%;
  position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); top: -50px; left: -40px;
}
.stat .label { opacity: .85; font-size: .85rem; }
.stat .value { font-size: 1.6rem; font-weight: 500; margin: .3rem 0 .8rem; }
.stat i.bg-icon { position: absolute; bottom: .6rem; left: 1rem; font-size: 2.6rem; opacity: .25; }
.stat-brand { background: var(--grad); }
.stat-green { background: linear-gradient(135deg, #10b981, #047857); }
.stat-gold { background: var(--grad-gold); }
.stat-slate { background: linear-gradient(135deg, #64748b, #334155); }
.stat .btn { background: rgba(255, 255, 255, .2); color: #fff; border: 0; position: relative; z-index: 1; }
.stat .btn:hover { background: rgba(255, 255, 255, .3); }

.kpi { text-align: center; padding: 1.2rem; }
.kpi .label { color: var(--muted); font-size: .85rem; }
.kpi .value { font-size: 1.5rem; font-weight: 500; }

/* ---------------------------------------------------------------- Tables */
.table-modern { margin: 0; }
.table-modern th {
  font-size: .78rem; font-weight: 500; color: var(--muted); background: #f8fafc;
  border-bottom: 1px solid var(--line); padding: .8rem 1rem; white-space: nowrap;
}
.table-modern td { padding: .85rem 1rem; vertical-align: middle; border-color: #f1f5f9; }
.table-modern tr:last-child td { border-bottom: 0; }
.table-modern tbody tr:hover td { background: #fafbff; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem !important; }
.amount-pos { color: #059669; font-weight: 500; }
.amount-neg { color: #dc2626; font-weight: 500; }

/* ---------------------------------------------------------------- Quiz */
.quiz-progress { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.quiz-progress > div { height: 100%; background: var(--grad); width: 0; transition: width .3s; }
.q-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.q-num {
  width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand);
  display: inline-grid; place-items: center; font-weight: 500; margin-left: .5rem; font-size: .9rem;
}
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin-top: 1rem; }
.option {
  display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--line); background: #fbfcfe; transition: all .15s; margin: 0;
}
.option:hover { border-color: #c7d2fe; background: #fff; }
.option input { accent-color: var(--brand); width: 18px; height: 18px; }
.option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 500; }

/* Score ring */
.score-ring {
  --p: 0; width: 190px; height: 190px; border-radius: 50%; margin: 0 auto 1.2rem;
  background: conic-gradient(var(--ring, var(--brand)) calc(var(--p) * 1%), #e2e8f0 0);
  display: grid; place-items: center;
}
.score-ring > div {
  width: 156px; height: 156px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center;
}
.score-ring .score { font-size: 2.6rem; font-weight: 500; line-height: 1; }
.score-ring .of { color: var(--muted); font-size: .9rem; }

/* ---------------------------------------------------------------- Lottery */
.prize-hero {
  border-radius: 28px; padding: 2.4rem 2rem; color: #fff; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 20% 20%, #fbbf24 0, transparent 40%),
              radial-gradient(circle at 80% 80%, #ec4899 0, transparent 45%),
              linear-gradient(135deg, #f97316, #db2777);
}
.prize-hero .amount { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 500; }
.prize-hero .trophy { font-size: 3.5rem; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .2)); }
.prize-hero.dark { background: radial-gradient(circle at 15% 20%, #7c3aed 0, transparent 45%), linear-gradient(135deg, #1e1b4b, #312e81); }

.split-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
.split-bar .winner { background: var(--grad-gold); }
.split-bar .site { background: #94a3b8; }

.countdown { display: flex; gap: .6rem; justify-content: center; direction: ltr; }
.countdown div {
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 14px; padding: .6rem .9rem; min-width: 70px;
}
.countdown b { display: block; font-size: 1.6rem; font-weight: 500; }
.countdown span { font-size: .75rem; opacity: .85; }

.ticket {
  display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-radius: 14px;
  background: #fff; border: 1px dashed #cbd5e1;
}
.ticket.win { border: 2px solid var(--gold); background: #fffbeb; }

.lottery-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow); height: 100%; display: flex; flex-direction: column; gap: .8rem; transition: transform .2s; color: var(--ink); }
.lottery-card:hover { transform: translateY(-3px); color: var(--ink); }

/* Draw animation overlay */
.draw-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .85); z-index: 3000;
  display: none; place-items: center; color: #fff; text-align: center;
}
.draw-overlay.show { display: grid; }
.draw-name { font-size: clamp(1.8rem, 6vw, 3.2rem); font-weight: 500; min-height: 4rem; }
.draw-spinner { font-size: 4rem; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Auth */
.auth-wrap { max-width: 980px; margin: 1rem auto; }
.auth-side {
  background: var(--grad); color: #fff; border-radius: var(--radius) 0 0 var(--radius);
  padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; height: 100%;
}
[dir="rtl"] .auth-side { border-radius: 0 var(--radius) var(--radius) 0; }
.auth-side li { margin-bottom: .7rem; }

/* ---------------------------------------------------------------- Footer */
.app-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; color: var(--muted); font-size: .9rem; background: #fff; }

@media (max-width: 767px) {
  .hero { padding: 2rem 1.2rem; border-radius: 22px; }
  .auth-side { border-radius: var(--radius) var(--radius) 0 0 !important; }
}

/* ---------------------------------------------------------------- Report */
.rank { width: 28px; text-align: center; font-size: 1.2rem; flex-shrink: 0; }
.min-w-0 { min-width: 0; }

/* ---------------------------------------------------------------- Floating header & footer */
.nav-shell { position: sticky; top: 10px; z-index: 1030; padding-top: 10px; }
.app-nav {
  position: static; border: 1px solid var(--line); border-radius: 20px; padding: .5rem .25rem;
  background: rgba(255, 255, 255, .85); box-shadow: 0 8px 30px rgba(15, 23, 42, .08);
}
.app-nav .navbar-collapse { border-radius: 14px; }
.app-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  border: 1px solid var(--line); border-radius: 20px; padding: 1rem 1.25rem;
  background: #fff; box-shadow: 0 8px 30px rgba(15, 23, 42, .06); font-size: .85rem;
}

/* ---------------------------------------------------------------- Compact book cards */
.book-card { border-radius: 14px; }
.book-card .meta { padding: .6rem .7rem .75rem; }
.book-card h6 { font-size: .88rem; margin-bottom: .1rem; line-height: 1.6; }
.book-card .meta .small { font-size: .75rem; }
.book-cover-ph { padding: .7rem; font-size: .85rem; }
.book-cover-ph i { top: .6rem; left: .6rem; font-size: 1.1rem; }
.book-cover-ph small { font-size: .68rem; }
.book-card .chip { font-size: .65rem; padding: .15rem .45rem; }
.book-ribbon {
  position: absolute; top: .5rem; right: .5rem; z-index: 1; font-size: .65rem; padding: .2rem .5rem;
  border-radius: 999px; background: rgba(15, 23, 42, .65); color: #fff; backdrop-filter: blur(4px);
}
.book-card { position: relative; }
.book-card.expired { opacity: .6; }

/* ---------------------------------------------------------------- Book detail */
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.info-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.info-list li span:first-child { color: var(--muted); }
.prize-rows { display: grid; gap: .5rem; }
.prize-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 12px; background: #fffbeb; }
.prize-row .medal { font-size: 1.3rem; }
.prize-row .amt { margin-right: auto; font-weight: 500; }
.description { line-height: 2.1; white-space: pre-line; }

/* Podium */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: end; }
.podium .place { background: rgba(255, 255, 255, .15); border-radius: 16px; padding: 1rem .5rem; text-align: center; }
.podium .place.p1 { order: 2; padding-top: 1.6rem; background: rgba(255, 255, 255, .25); }
.podium .place.p2 { order: 1; }
.podium .place.p3 { order: 3; }
.podium .medal { font-size: 2rem; }
.podium .name { font-size: 1.05rem; margin: .3rem 0; word-break: break-word; }

/* ---------------------------------------------------------------- Mobile */
@media (max-width: 991px) {
  .app-nav .navbar-collapse { padding: .5rem; }
  .app-nav .navbar-nav { margin: .5rem 0; }
}
@media (max-width: 575px) {
  main.container { padding-top: 1rem !important; }
  .nav-shell { top: 6px; padding-top: 6px; }
  .app-nav { border-radius: 16px; }
  .navbar-brand { font-size: 1rem; }
  .brand-mark { width: 30px; height: 30px; font-size: .95rem; }
  .hero { padding: 1.5rem 1rem; margin-bottom: 1.25rem; }
  .hero h1 { font-size: 1.4rem; }
  .hero p { font-size: .9rem; }
  .hero-steps { display: none; }
  .hero-search { flex-wrap: wrap; }
  .hero-search > div { flex-basis: 100%; border-bottom: 1px solid var(--line); }
  .hero-search .form-select { max-width: none !important; flex: 1; min-width: 0; }
  .panel-body { padding: 1rem; }
  .stat { padding: 1rem; }
  .stat .value { font-size: 1.25rem; }
  .plan-card { padding: 1.5rem 1.1rem; }
  .plan-price { font-size: 1.8rem; }
  .prize-hero { padding: 1.6rem 1rem; border-radius: 20px; }
  .countdown div { min-width: 56px; padding: .45rem .5rem; }
  .countdown b { font-size: 1.2rem; }
  .score-ring { width: 160px; height: 160px; }
  .score-ring > div { width: 130px; height: 130px; }
  .app-footer { flex-direction: column; align-items: center; text-align: center; border-radius: 16px; }
  .btn-lg { padding: .65rem 1rem; font-size: 1rem; }
  .table-modern th, .table-modern td { padding: .6rem .7rem; font-size: .85rem; }
  .podium .medal { font-size: 1.5rem; }
  .podium .name { font-size: .9rem; }
}

.chip { white-space: nowrap; }
.lottery-card .book-cover-ph { font-size: .55rem; padding: .3rem; }
.lottery-card .book-cover-ph i, .lottery-card .book-cover-ph small { display: none; }

.nav-pills .nav-link { color: var(--muted); border-radius: 12px; }
.nav-pills .nav-link.active { background: var(--grad); color: #fff; }

/* ================================================================ v3 design layer */
:root {
  --bronze: #b4673a; --bronze-2: #e3a06b;
  --silver: #64748b; --silver-2: #cbd5e1;
  --gold-1: #d97706; --gold-3: #fde68a;
  --pink: #db2777;
}

/* Soft background blobs */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-blobs span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; }
.bg-blobs span:nth-child(1) { width: 420px; height: 420px; background: #c7d2fe; top: -120px; right: -120px; }
.bg-blobs span:nth-child(2) { width: 360px; height: 360px; background: #fbcfe8; bottom: -140px; left: -100px; }

/* Entrance animation */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .45s ease both; }
.row > .col:nth-child(2) .reveal, .h-scroll > :nth-child(2) { animation-delay: .04s; }
.row > .col:nth-child(3) .reveal, .h-scroll > :nth-child(3) { animation-delay: .08s; }
.row > .col:nth-child(4) .reveal, .h-scroll > :nth-child(4) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

.brand-mark.sm { width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; display: inline-grid; vertical-align: middle; }
.footer-links { display: flex; gap: 1rem; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--brand); }

/* Section heads */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }

/* Hero */
.hero-kicker {
  display: inline-flex; gap: .4rem; align-items: center; font-size: .8rem; padding: .3rem .8rem;
  border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25);
}
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.hero-stats div {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px;
  padding: 1rem .5rem; text-align: center; backdrop-filter: blur(6px);
}
.hero-stats b { display: block; font-size: 1.35rem; font-weight: 600; }
.hero-stats span { font-size: .75rem; opacity: .85; }

/* Points */
.points-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px;
  background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; font-size: .85rem; font-weight: 500;
}
.points-chip i { color: #f59e0b; }
.points-toast {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 2100;
  display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 18px;
  background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; box-shadow: 0 16px 40px rgba(249, 115, 22, .35);
  width: min(420px, calc(100% - 24px)); animation: toast-in .5s cubic-bezier(.2, 1.4, .4, 1) both;
  transition: opacity .4s, transform .4s;
}
.points-toast.hide { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }
.points-toast .star { font-size: 1.8rem; animation: spin-star 1.2s ease; }
.points-toast .title { font-weight: 500; }
.points-toast .sub { font-size: .75rem; opacity: .9; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 30px) scale(.9); } }
@keyframes spin-star { from { transform: rotate(-180deg) scale(.4); } }
.points-big .num { font-size: 1.5rem; font-weight: 600; color: #b45309; }

/* Tiers */
.tier-badge {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; padding: .2rem .65rem; border-radius: 999px;
  color: #fff; font-weight: 500;
}
.tier-badge.tier-bronze { background: linear-gradient(135deg, var(--bronze), var(--bronze-2)); }
.tier-badge.tier-silver { background: linear-gradient(135deg, var(--silver), #94a3b8); }
.tier-badge.tier-gold { background: linear-gradient(135deg, var(--gold-1), #fbbf24); }
.tier-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px transparent; }
.tier-ring.tier-bronze { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bronze-2); }
.tier-ring.tier-silver { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--silver-2); }
.tier-ring.tier-gold { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fbbf24; }

.tier-card { overflow: hidden; padding-top: 0 !important; }
.tier-head {
  display: flex; align-items: center; gap: .8rem; margin: 0 -1.6rem 1rem; padding: 1.3rem 1.6rem; color: #fff;
}
.tier-medal { font-size: 2.2rem; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .2)); }
.tier-bronze .tier-head { background: linear-gradient(135deg, var(--bronze), var(--bronze-2)); }
.tier-silver .tier-head { background: linear-gradient(135deg, #475569, #94a3b8); }
.tier-gold .tier-head { background: linear-gradient(135deg, #b45309, #fbbf24); }
.plan-card.tier-silver { border: 2px solid #94a3b8; }
.plan-card.tier-gold { border: 2px solid #fbbf24; box-shadow: 0 20px 50px rgba(245, 158, 11, .25); }
.plan-badge { z-index: 2; top: 10px !important; right: auto !important; left: 12px; transform: none !important; }
.plan-badge.gold { background: linear-gradient(135deg, #f59e0b, #f97316); }
.plan-features li.off { color: #cbd5e1; text-decoration: line-through; }
.plan-features li.off i { color: #cbd5e1; }
.compare td, .compare th { white-space: nowrap; }

.earn-tile { background: #fffbeb; border-radius: 16px; padding: 1.1rem; height: 100%; }
.earn-tile span { font-size: 1.8rem; display: block; }
.earn-tile b { display: block; margin: .3rem 0; }

/* Age groups */
.age-child { background: #fce7f3 !important; color: #be185d !important; }
.age-teen { background: #dbeafe !important; color: #1d4ed8 !important; }
.age-adult { background: #ede9fe !important; color: #6d28d9 !important; }
.age-all { background: #f1f5f9 !important; color: var(--muted) !important; }
.age-pills { display: flex; gap: .35rem; flex-wrap: wrap; }
.age-pills a {
  padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; color: var(--muted);
  background: #fff; border: 1px solid var(--line); transition: all .15s;
}
.age-pills a:hover { border-color: #c7d2fe; color: var(--brand); }
.age-pills a.active { background: var(--grad); color: #fff; border-color: transparent; }

.age-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.age-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .8rem .4rem;
  border: 2px solid var(--line); border-radius: 14px; cursor: pointer; text-align: center; transition: all .15s;
  background: #fbfcfe;
}
.age-card input { position: absolute; opacity: 0; }
.age-card .emoji { font-size: 1.6rem; }
.age-card .lbl { font-size: .75rem; color: var(--muted); }
.age-card:hover { border-color: #c7d2fe; }
.age-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.age-card:has(input:checked) .lbl { color: var(--brand); }
.age-card:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(79, 70, 229, .15); }

/* Book card extras */
.cover-wrap { position: relative; }
.crown {
  position: absolute; bottom: .4rem; left: .4rem; font-size: 1rem; background: rgba(255, 255, 255, .9);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow);
}
.unlocked-dot {
  position: absolute; bottom: .4rem; right: .4rem; width: 24px; height: 24px; border-radius: 50%;
  background: var(--success); color: #fff; display: grid; place-items: center; font-size: .7rem;
}
.book-card .cover-wrap .book-ribbon { top: .4rem; right: .4rem; }

/* Capacity bar */
.seat-bar { height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.seat-bar > div { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 999px; }

/* Horizontal scroller of open lotteries */
.h-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: .8rem; overflow-x: auto;
            padding-bottom: .4rem; scroll-snap-type: x mandatory; }
.h-scroll > * { scroll-snap-align: start; }
.mini-lottery {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1rem; color: var(--ink);
  box-shadow: var(--shadow); transition: transform .2s;
}
.mini-lottery:hover { transform: translateY(-3px); color: var(--ink); }
.mini-lottery .icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
                      background: #fef3c7; color: #d97706; flex-shrink: 0; }
.mini-lottery .prize { font-size: 1.2rem; font-weight: 600; color: var(--brand); }

/* Dashboard */
.profile-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.stat-pink { background: linear-gradient(135deg, #ec4899, #9d174d); }

@media (max-width: 575px) {
  .hero-stats b { font-size: 1.05rem; }
  .hero-stats div { padding: .7rem .3rem; }
  .age-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .age-pills a { white-space: nowrap; }
  .tier-head { margin: 0 -1.1rem 1rem; padding: 1.1rem; }
  .profile-head .points-big { width: 100%; text-align: right !important; }
  .stat .label { font-size: .75rem; }
}

/* ================================================================ v4 mobile pass */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }

/* Decorative cover for cards (title lives under the cover, not on it) */
.book-cover-ph.compact { align-items: center; justify-content: center; padding: 0; }
.book-cover-ph.compact .initial {
  font-size: 2.6rem; font-weight: 600; line-height: 1; opacity: .9;
  text-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.book-cover-ph.compact i { position: absolute; top: auto; bottom: .55rem; left: 50%; transform: translateX(-50%);
                           font-size: .9rem; opacity: .45; }
.book-cover-ph.compact::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .25), transparent 55%);
}
.lottery-card .book-cover-ph.compact .initial { font-size: 1.4rem; }
.lottery-card .book-cover-ph.compact i { display: none; }

/* Countdown reads right-to-left: days on the right */
.countdown { direction: rtl; }

/* Prize strip on the book page */
.prize-strip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px;
  background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; font-size: .9rem;
}
.prize-strip:hover { color: #78350f; }

/* Collapsible rules */
details.rules > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
details.rules > summary::-webkit-details-marker { display: none; }
details.rules .chev { margin-right: auto; transition: transform .2s; font-size: .9rem; }
details.rules[open] .chev { transform: rotate(180deg); }

@media (max-width: 767px) {
  .bg-blobs { display: none; }  /* heavy blur filters; also looked like a stray band on phones */

  /* Tables become stacked cards */
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: .75rem 1rem; border-bottom: 1px solid #f1f5f9; }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { border: 0 !important; padding: .15rem 0 !important; background: none !important; }
  .table-stack td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
  .table-stack td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .78rem; flex-shrink: 0; }
  .table-stack td.stack-title { padding-bottom: .4rem !important; }
  .table-stack td.empty { text-align: center; }

  /* Compact stat rows (wallet) */
  .stat-row .stat { padding: .8rem .7rem; border-radius: 16px; }
  .stat-row .stat .label { font-size: .7rem; }
  .stat-row .stat .value { font-size: 1rem; margin: .2rem 0 0; }
  .stat-row .stat .unit { display: none; }
  .stat-row .stat .bg-icon { display: none; }

  /* Earn tiles: three small tiles in a row */
  .earn-row .earn-tile { padding: .7rem .4rem; }
  .earn-row .earn-tile span { font-size: 1.3rem; }
  .earn-row .earn-tile b { font-size: .8rem; }
  .earn-row .earn-tile .small { font-size: .68rem; }

  .detail-cover .book-cover-ph { font-size: .9rem; }
  h1.h3 { font-size: 1.3rem; }
  .section-title { font-size: 1.02rem; }
}

.h-scroll { scrollbar-width: none; }
.h-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  .table-stack td[data-label] { justify-content: flex-start; gap: .5rem; }
  .table-stack td[data-label]::before { margin-inline-end: auto; }
}

/* Mobile nav */
.nav-toggle {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  display: grid; place-items: center; font-size: 1.4rem; color: var(--ink); transition: background .15s;
}
.nav-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, .2); }
.nav-toggle[aria-expanded="true"] { background: var(--brand-soft); color: var(--brand); }
.mobile-account { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .4rem; }
.mobile-account > a, .mobile-account button {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; border-radius: 10px;
  color: var(--ink); background: none; border: 0; text-align: right; font: inherit;
}
.mobile-account > a:hover, .mobile-account button:hover { background: #f8fafc; }
.mobile-account i { color: var(--muted); }

/* Lottery participants grouped by place */
.rank-group + .rank-group { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--line); }
.rank-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.rank-head .medal { font-size: 1.5rem; }

/* Reading page media */
.audio-box { background: var(--brand-soft); border-radius: 16px; padding: 1rem; }
.book-images { display: grid; gap: 1rem; }
.book-images figure { margin: 0; }
.book-images img { width: 100%; border-radius: 14px; box-shadow: var(--shadow); }
.book-images figcaption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: .4rem; }
.more-winners { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; font-size: .8rem; }
.more-winners span { background: rgba(255, 255, 255, .18); border-radius: 999px; padding: .25rem .7rem; }

/* ================================================================ Staff panel */
.panel-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.panel-tabs a {
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: .88rem;
}
.panel-tabs a.active, .panel-tabs a:hover { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

.qb-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.qb-card { margin-bottom: .8rem; overflow: hidden; }
.qb-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: #f8fafc; border-bottom: 1px solid var(--line); }
.qb-handle { cursor: grab; color: var(--muted); font-size: 1.2rem; touch-action: none; }
.qb-body { padding: .9rem; }
.qb-choices { display: grid; gap: .4rem; }
.qb-choice { display: flex; align-items: center; gap: .55rem; }
.qb-choice input[type=radio] { width: 1.25rem; height: 1.25rem; flex-shrink: 0; cursor: pointer; }
.qb-choice:has(input[type=radio]:checked) .form-control { border-color: var(--success); background: #ecfdf5; }
.sortable-ghost { opacity: .4; }
.qb-savebar {
  position: sticky; bottom: 12px; z-index: 20; margin-top: 1rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-radius: 18px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}

/* Panel pages */
.todo {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 14px;
  background: #f8fafc; color: var(--ink); border: 1px solid transparent;
}
.todo:hover { color: var(--ink); border-color: var(--line); }
.todo > i { color: var(--muted); font-size: 1.1rem; }
.todo.warn { background: #fffbeb; border-color: #fde68a; }
.todo.warn > i { color: #d97706; }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.img-tile { display: flex; flex-direction: column; gap: .3rem; cursor: pointer; }
.img-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.iban-box { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border-radius: 12px; background: #f8fafc; font-size: .9rem; flex-wrap: wrap; }
.w-actions, .lot-actions { min-width: min(100%, 340px); }
.prize-preview { padding: .7rem .9rem; border-radius: 12px; background: #fffbeb; font-size: .9rem; }
.dropzone {
  display: block; text-align: center; padding: 2.2rem 1rem; border: 2px dashed #c7d2fe; border-radius: 18px;
  background: var(--brand-soft); color: var(--brand); cursor: pointer; transition: all .15s;
}
.dropzone.over, .dropzone:hover { background: #e0e7ff; border-color: var(--brand); }
@media (max-width: 575px) { .w-actions, .lot-actions { width: 100%; } .panel-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .3rem; } .panel-tabs a { white-space: nowrap; } }

/* ================================================================ Referrals, levels, tickets, filters */
.ref-code { font-size: 2rem; letter-spacing: .25em; font-weight: 600; color: var(--brand);
            background: var(--brand-soft); border-radius: 14px; padding: .4rem .8rem; display: inline-block; }
.level-badge {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; font-size: 1.5rem; font-weight: 600;
}
.level-badge.alt { background: var(--grad); }
.level-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.level-bar > div { height: 100%; background: linear-gradient(90deg, #f59e0b, #f97316); border-radius: 999px; }
.my-rank { display: flex; align-items: center; gap: 1rem; border: 2px solid #fde68a; background: #fffbeb; }
.rank-big { font-size: 2rem; font-weight: 600; color: #b45309; min-width: 70px; text-align: center; }
.lb-row { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid #f1f5f9; }
.lb-row:last-child { border-bottom: 0; }
.lb-row.me { background: var(--brand-soft); }
.lb-rank { width: 30px; text-align: center; color: var(--muted); }

.filter-bar { display: grid; gap: .6rem; }
.cat-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .88rem; }
.cat-crumbs a { color: var(--muted); }
.cat-crumbs a.active { color: var(--brand); font-weight: 500; }
.cat-children, .media-pills { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: none; }
.cat-children a, .media-pills a {
  white-space: nowrap; padding: .3rem .75rem; border-radius: 999px; font-size: .8rem;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.cat-children a:hover, .media-pills a:hover { border-color: #c7d2fe; color: var(--brand); }
.media-pills a.active { background: var(--grad); color: #fff; border-color: transparent; }

.video-box { border-radius: 16px; overflow: hidden; background: #000; }

.event-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
              color: var(--ink); box-shadow: var(--shadow); transition: transform .2s; height: 100%; }
.event-card:hover { transform: translateY(-3px); color: var(--ink); }
.event-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.event-img.ph { display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 2.5rem; }
.ticket-card { overflow: hidden; }
.ticket-head { background: var(--grad); color: #fff; padding: 1.2rem 1.4rem; }
.ticket-qr { text-align: center; font-size: 1.8rem; letter-spacing: .3em; padding: 1rem; border: 2px dashed var(--line); border-radius: 14px; }
.cat-node { display: flex; align-items: center; gap: .5rem; padding: .35rem 0 .35rem 0; padding-right: calc(var(--depth) * 1.4rem); border-bottom: 1px dashed #f1f5f9; }
.cat-node i { color: var(--muted); }
.help-card ol, .help-card ul { padding-right: 1.1rem; margin: 0; line-height: 2.1; }
@media (max-width: 575px) { .ref-code { font-size: 1.5rem; } }
.app-nav .nav-link { white-space: nowrap; }
.ticket-count { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.tc-box { text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: .8rem .4rem; background: #f8fafc; }
.tc-big { font-size: 1.9rem; line-height: 1.2; }
.stage { text-align: center; background: linear-gradient(180deg, #e0e7ff, #fff); border-radius: 50% 50% 10px 10px / 30px 30px 10px 10px;
         padding: .5rem; color: var(--brand); font-size: .85rem; margin-bottom: 1rem; }
.seat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: .35rem; max-height: 340px; overflow-y: auto; padding: .2rem; }
.seat { position: relative; margin: 0; cursor: pointer; }
.seat input { position: absolute; opacity: 0; pointer-events: none; }
.seat span { display: grid; place-items: center; height: 34px; border-radius: 8px 8px 4px 4px; font-size: .78rem;
             background: #e2e8f0; color: var(--ink); transition: all .12s; user-select: none; }
.seat:hover span { background: #c7d2fe; }
.seat:has(input:checked) span { background: var(--grad); color: #fff; }
.seat.taken { cursor: not-allowed; }
.seat.taken span { background: #fecaca; color: #b91c1c; text-decoration: line-through; }
.seat-legend { display: flex; gap: 1rem; justify-content: center; margin-top: .6rem; }
.seat-legend .lg { display: inline-block; width: 14px; height: 12px; border-radius: 3px; vertical-align: middle; margin-left: .25rem; }
.lg.free { background: #e2e8f0; } .lg.picked { background: var(--brand); } .lg.taken { background: #fecaca; }
@media (max-width: 575px) { .seat-grid { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); } .seat span { height: 30px; font-size: .72rem; } }

/* ================================================================ v5: Claude Design look (flat, calm, floating chrome) */
:root {
  --brand: #1D4ED8; --brand-2: #1D4ED8; --brand-soft: #E8EEFD;
  --gold: #B45309; --gold-2: #B45309; --success: #047857; --danger: #B42318;
  --ink: #101828; --muted: #5B6474; --line: #E4E7EC; --bg: #F4F5F7; --surface: #FFFFFF;
  --radius: 20px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .10);
  --float: 0 10px 30px rgba(16, 24, 40, .10);
  --grad: #1D4ED8; --grad-gold: #B45309;
  --bs-primary-rgb: 29, 78, 216;
}
body { background: var(--bg); font-size: 15px; line-height: 1.75; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .fw-bold { font-weight: 700 !important; }
.bg-blobs { display: none; }

/* Floating header: a card with space around it, never glued to the edge */
.nav-shell { top: 12px; padding-top: 12px; }
.app-nav { background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 20px;
           box-shadow: var(--float); padding: .55rem .4rem; }
.brand-mark { background: var(--brand); border-radius: 11px; }
.app-nav .navbar-brand { font-weight: 700; }
.app-nav .nav-link { color: #344054; font-weight: 400; }
.app-nav .nav-link:hover, .app-nav .nav-link.active { color: var(--brand); background: var(--brand-soft); font-weight: 500; }
.wallet-chip { background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; }
.points-chip { background: #FEF3E2; color: #92400E; border-radius: 12px; }
.points-chip i { color: #B45309; }
.avatar { background: var(--brand-soft); color: var(--brand); font-weight: 700; }

/* Floating footer */
.app-footer { border-radius: 20px; box-shadow: var(--float); padding: 1.1rem 1.4rem; }

/* Floating bottom bar (phones) */
.tabbar { display: none; }
@media (max-width: 991px) {
  .tabbar {
    position: fixed; z-index: 1040; bottom: 12px; left: 12px; right: 12px;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 12px 36px rgba(16, 24, 40, .16);
    padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px) / 2);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
              min-height: 52px; border-radius: 16px; color: var(--muted); font-size: .7rem; }
  .tabbar a i { font-size: 1.25rem; line-height: 1; }
  .tabbar a.active { color: var(--brand); background: var(--brand-soft); font-weight: 700; }
  body { padding-bottom: 96px; }
  .points-toast { bottom: 92px; }
}

/* Buttons: solid, no glow */
.btn { border-radius: 14px; }
.btn-brand { background: var(--brand); box-shadow: none; }
.btn-brand:hover { background: #1E40AF; transform: none; box-shadow: none; }
.btn-gold { background: #B45309; box-shadow: none; }
.btn-gold:hover { background: #92400E; filter: none; }
.btn-soft { background: var(--brand-soft); color: var(--brand); }
.btn-soft:hover { background: #D7E2FC; }
.btn-ghost { background: #fff; border-color: var(--line); }

/* Surfaces */
.panel { border-radius: var(--radius); box-shadow: var(--shadow); }
.section-title { font-weight: 700; }
.section-title i { color: var(--brand); }
.form-control, .form-select { border-radius: 14px; border-color: #D0D5DD; background-color: #fff; min-height: 48px; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 4px rgba(29, 78, 216, .12); }
.alert { border-radius: 16px; box-shadow: none; border: 1px solid var(--line); }

/* Hero: a calm white card */
.hero { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 24px; }
.hero::before, .hero::after { display: none; }
.hero h1 { font-weight: 700; line-height: 1.4; }
.hero p { color: var(--muted); opacity: 1; }
.hero-kicker { background: #FEF3E2; border: 0; color: #92400E; font-weight: 500; }
.hero-search { background: var(--bg); border: 1px solid var(--line); box-shadow: none; }
.hero-step { background: var(--bg); border-color: var(--line); color: var(--ink); }
.hero-stats div { background: var(--bg); border-color: var(--line); backdrop-filter: none; }
.hero-stats span { color: var(--muted); opacity: 1; }
.hero-stats div:nth-child(3) b { color: #B45309; }

/* Covers: flat colors */
.cover-0 { background: #1D4ED8; } .cover-1 { background: #0F766E; }
.cover-2 { background: #9A3412; } .cover-3 { background: #6D28D9; }
.book-cover-ph.compact::after { display: none; }
.book-cover-ph.compact .initial { text-shadow: none; }
.book-card { border-radius: 16px; box-shadow: none; }
.book-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* Chips & pills */
.chip-gold { background: #FEF3E2; color: #92400E; }
.chip-success { background: #E7F6EF; color: #047857; }
.chip-danger { background: #FDECEC; color: #B42318; }
.chip-muted { background: #F2F4F7; color: #344054; }
.age-pills a.active, .media-pills a.active, .nav-pills .nav-link.active { background: #101828; color: #fff; }
.prize-strip { background: #FEF3E2; }
.seat-bar { background: #EEF0F3; }
.seat-bar > div { background: var(--brand); }
.level-bar > div { background: var(--brand); }
.level-badge { background: var(--brand); }
.level-badge.alt { background: #E7F6EF; color: #047857; }
.stepper li.current .dot { background: var(--brand); }
.mini-lottery { box-shadow: none; }
.mini-lottery .icon { background: #FEF3E2; color: #B45309; }
.mini-lottery .prize { color: #B45309; }

/* Stat cards: dark for the main number, white for the rest */
.stat { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line); box-shadow: none; }
.stat::after { display: none; }
.stat .label { color: var(--muted); opacity: 1; }
.stat i.bg-icon { color: var(--line); opacity: 1; }
.stat .btn { background: var(--brand-soft); color: var(--brand); }
.stat .btn:hover { background: #D7E2FC; }
.stat-brand { background: #101828 !important; color: #fff !important; border-color: #101828; }
.stat-brand .label { color: #D0D5DD; }
.stat-brand i.bg-icon { color: rgba(255, 255, 255, .12); }
.stat-brand .btn { background: rgba(255, 255, 255, .14); color: #fff; }
.stat-gold .value { color: #B45309; }
.stat-green .value { color: #047857; }

/* Dark prize panels instead of colorful gradients */
.prize-hero, .prize-hero.dark { background: #101828; }
.split-bar .winner { background: #B45309; }
.points-toast { background: #101828; box-shadow: var(--float); }
.ticket-head, .event-img.ph, .auth-side { background: var(--brand); }
.seat:has(input:checked) span { background: var(--brand); }
.stage { background: #EEF2FF; }
.quiz-progress > div, .reader-progress { background: var(--brand); }

/* ================================================================ kx: components from the Claude Design canvas */
.cover-4 { background: #155E75; } .cover-5 { background: #854D0E; }
.kx-wrap { display: flex; flex-direction: column; gap: 2rem; }
.kx-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; }
.kx-card.tight { padding: 1rem 1.1rem; }
.kx-dark { background: #101828; color: #fff; border-radius: 24px; padding: 2rem 2.25rem; }
.kx-dark .muted { color: #D0D5DD; }
.kx-muted { color: var(--muted); }
.kx-h1 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.35; margin: 0; }
.kx-h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.kx-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kx-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; padding: .25rem .8rem; border-radius: 999px;
           background: #F2F4F7; color: #344054; white-space: nowrap; }
.kx-pill.blue { background: var(--brand-soft); color: var(--brand); }
.kx-pill.amber { background: #FEF3E2; color: #92400E; }
.kx-pill.green { background: #E7F6EF; color: #047857; }
.kx-pill.red { background: #FDECEC; color: #B42318; }
.kx-pill.line { background: #fff; border: 1px solid var(--line); }
.kx-amount { font-weight: 700; color: #B45309; }
.kx-bar { height: 6px; background: #EEF0F3; border-radius: 999px; overflow: hidden; }
.kx-bar > div { height: 100%; background: var(--brand); border-radius: 999px; }
.kx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: 0 1.4rem;
          border-radius: 14px; font-weight: 500; border: 0; background: var(--brand); color: #fff; text-decoration: none; font: inherit; cursor: pointer; }
.kx-btn:hover { background: #1E40AF; color: #fff; }
.kx-btn.dark { background: #101828; } .kx-btn.dark:hover { background: #000; }
.kx-btn.amber { background: #B45309; } .kx-btn.amber:hover { background: #92400E; }
.kx-btn.ghost { background: #fff; color: #344054; border: 1px solid var(--line); }
.kx-btn.ghost:hover { border-color: #C7D7FE; color: var(--brand); }
.kx-btn.soft { background: var(--brand-soft); color: var(--brand); }
.kx-btn.block { width: 100%; }
.kx-btn[disabled], .kx-btn.disabled { background: #E4E7EC; color: #667085; pointer-events: none; }

/* Hero */
.kx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center;
           background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 3rem; }
.kx-hero p { color: var(--muted); font-size: 1.05rem; max-width: 470px; margin: 0; }
.kx-search { display: flex; gap: .5rem; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 6px; }
.kx-search label { flex: 1; display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; color: var(--muted); margin: 0; }
.kx-search input, .kx-search select { border: 0; background: transparent; font: inherit; outline: none; color: var(--ink); min-width: 0; }
.kx-search input { flex: 1; height: 44px; }
.kx-search select { max-width: 160px; border-right: 1px solid var(--line); padding: 0 .5rem; }
.kx-stats { display: flex; gap: 2rem; }
.kx-stats b { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.3; }
.kx-stats span { font-size: .8rem; color: var(--muted); }
.kx-stack { position: relative; height: 360px; }
.kx-stack .bk { position: absolute; border-radius: 14px; padding: 18px; box-sizing: border-box; color: #fff; display: flex; flex-direction: column;
                justify-content: flex-end; font-weight: 700; overflow: hidden; }
.kx-stack .bk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kx-stack .bk span { position: relative; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.kx-stack .b1 { top: 40px; left: 6%; width: 190px; height: 270px; transform: rotate(-8deg); }
.kx-stack .b2 { top: 15px; left: 32%; width: 215px; height: 305px; z-index: 2; box-shadow: 0 24px 48px rgba(16, 24, 40, .18); font-size: 1.3rem; }
.kx-stack .b3 { top: 55px; left: 60%; width: 185px; height: 265px; transform: rotate(7deg); }
.kx-stack .float { position: absolute; bottom: 0; left: 35%; z-index: 3; background: #fff; border: 1px solid var(--line); border-radius: 16px;
                   padding: 10px 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 12px 32px rgba(16, 24, 40, .10); }
.kx-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 1.15rem; }
.kx-ico.amber { background: #FEF3E2; color: #B45309; } .kx-ico.blue { background: var(--brand-soft); color: var(--brand); }
.kx-ico.green { background: #E7F6EF; color: #047857; } .kx-ico.gray { background: #F2F4F7; color: #344054; }

/* Lottery mini cards */
.kx-lots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

/* Active lotteries on the home page: a horizontal, touch-scrollable rail. */
.kx-lottery-strip {
  display: flex; gap: .85rem; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 10px;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.kx-lottery-strip .kx-lot { flex: 0 0 310px; min-height: 120px; scroll-snap-align: start; }
.kx-lottery-strip .kx-lot:hover { transform: translateY(-2px); }
@media (max-width: 767px) {
  .kx-lottery-strip { margin: 0 -12px; padding: 3px 12px 8px; scrollbar-width: none; }
  .kx-lottery-strip .kx-lot { flex-basis: 270px; width: 270px; }
}

.kx-lot { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem; display: flex; flex-direction: column;
          gap: .85rem; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.kx-lot:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kx-thumb { width: 44px; height: 58px; border-radius: 8px; flex: none; overflow: hidden; }
.kx-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Filters */
.kx-seg { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--line); padding: 4px; border-radius: 12px; flex-wrap: wrap; }
.kx-seg a { padding: .45rem 1rem; border-radius: 9px; font-size: .9rem; color: #344054; }
.kx-seg a.active { background: #101828; color: #fff; }
.kx-chips { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.kx-chips a { padding: .45rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: #344054; font-size: .88rem; white-space: nowrap; }
.kx-chips a:hover { border-color: #C7D7FE; color: var(--brand); }
.kx-chips a.active { background: var(--brand-soft); border-color: transparent; color: var(--brand); font-weight: 500; }
.kx-chips .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 .25rem; }

/* Book grid + card */
.kx-books { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.kx-book { display: flex; flex-direction: column; gap: .6rem; color: var(--ink); }
.kx-book:hover { color: var(--ink); }
.kx-book.expired { opacity: .55; }
.kx-cover { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; padding: 14px; box-sizing: border-box; color: #fff;
            display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s, box-shadow .15s; }
.kx-book:hover .kx-cover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(16, 24, 40, .16); }
.kx-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kx-cover .tag { position: relative; align-self: flex-start; font-size: .72rem; background: rgba(0, 0, 0, .28); padding: 2px 10px; border-radius: 999px; }
.kx-cover .ttl { position: relative; }
.kx-cover .ttl small { display: block; font-size: .75rem; opacity: .85; }
.kx-cover .ttl b { display: block; font-size: 1.05rem; line-height: 1.45; }
.kx-cover.has-img .ttl { display: none; }
.kx-cover .ok { position: absolute; bottom: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%; background: #047857;
                display: grid; place-items: center; font-size: .75rem; }
.kx-book .meta { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.kx-book .meta b { font-size: .95rem; }
.kx-book .meta span { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.kx-book .name { font-size: .88rem; font-weight: 500; line-height: 1.5; margin-top: -.2rem; }

/* Steps, rows, prizes */
.kx-steps { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.kx-steps li { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid #EEF0F3; }
.kx-steps li:last-child { border-bottom: 0; }
.kx-steps .n { width: 32px; height: 32px; border-radius: 50%; background: #EEF0F3; color: var(--muted); display: grid; place-items: center; font-weight: 700; flex: none; }
.kx-steps li.on .n { background: var(--brand); color: #fff; }
.kx-steps li.done .n { background: #047857; color: #fff; }
.kx-steps small { display: block; color: var(--muted); font-size: .82rem; }
.kx-medal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none;
            background: #F6EBE3; color: #9A3412; }
.kx-medal.m1 { background: #FEF3E2; color: #B45309; } .kx-medal.m2 { background: #EEF0F3; color: #344054; }
.kx-prize { display: flex; align-items: center; gap: 10px; padding: .45rem 0; }
.kx-prize .t { flex: 1; } .kx-prize .t small { color: var(--muted); }
.kx-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid #EEF0F3; font-size: .92rem; }
.kx-rows > div:last-child { border-bottom: 0; }
.kx-rows > div > span:first-child { color: var(--muted); }
.kx-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.kx-count div { background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 12px 14px; min-width: 60px; }
.kx-count b { display: block; font-size: 1.7rem; line-height: 1.2; }
.kx-count span { font-size: .75rem; color: #D0D5DD; }
.kx-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.kx-table th { background: #F9FAFB; color: var(--muted); font-weight: 500; text-align: right; padding: 12px 16px; }
.kx-table td { padding: 12px 16px; border-top: 1px solid #EEF0F3; }
.kx-table tr.me td { background: var(--brand-soft); }
.kx-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.kx-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kx-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kx-side { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; align-items: start; }
.kx-big { font-size: 1.9rem; font-weight: 700; line-height: 1.3; }

@media (max-width: 1199px) {
  .kx-books { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kx-lots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .kx-hero { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.25rem; }
  .kx-stack { display: none; }
  .kx-side, .kx-grid-2 { grid-template-columns: 1fr; }
  .kx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .kx-wrap { gap: 1.4rem; }
  .kx-books { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .kx-cover { padding: 10px; border-radius: 12px; }
  .kx-cover .ttl b { font-size: .8rem; } .kx-cover .ttl small, .kx-cover .tag { display: none; }
  .kx-book .meta { flex-direction: column; align-items: flex-start; gap: 0; }
  .kx-lots { display: flex; overflow-x: auto; margin: 0 -12px; padding: 0 12px 4px; scrollbar-width: none; }
  .kx-lot { flex: none; width: 230px; }
  .kx-stats { gap: .5rem; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
  .kx-stats > div { background: var(--bg); border-radius: 12px; padding: .5rem; }
  .kx-stats b { font-size: 1.1rem; }
  .kx-search { flex-wrap: wrap; }
  .kx-search label { flex-basis: 100%; }
  .kx-search select { flex: 1; max-width: none; border: 0; }
  .kx-chips, .kx-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .kx-dark { padding: 1.25rem; border-radius: 20px; }
  .kx-grid-3 { grid-template-columns: 1fr; }
  .kx-card { padding: 1.1rem; border-radius: 18px; }
  .kx-count b { font-size: 1.25rem; } .kx-count div { padding: 8px; min-width: 0; }
  .kx-table th, .kx-table td { padding: 10px; font-size: .85rem; }
}
.bd-top { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 2.25rem; align-items: start; }
.bd-cover { box-shadow: 0 30px 60px rgba(16, 24, 40, .18); border-radius: 20px; padding: 24px; }
.bd-cover .ttl b { font-size: 1.7rem; } .bd-cover .ttl small { font-size: .95rem; }
@media (max-width: 1199px) { .bd-top { grid-template-columns: 240px minmax(0, 1fr); } .bd-top > aside { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .bd-top { grid-template-columns: 1fr; gap: 1rem; }
  .bd-cover { width: 150px; padding: 14px; border-radius: 14px; }
  .bd-cover .ttl b { font-size: 1rem; } .bd-cover .ttl small { display: block; font-size: .7rem; }
}
.lt-hero { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.lt-cover { width: 110px; flex: none; padding: 12px; }
.lt-cover .ttl b { font-size: .9rem; }
@media (max-width: 767px) { .lt-hero { gap: 1rem; } .lt-cover { width: 64px; padding: 6px; } .lt-cover .ttl { display: none; } .lt-hero .kx-count { width: 100%; } }
.ev-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.ev-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ev-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ev-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-img .ev-date { position: absolute; top: 12px; right: 12px; background: #fff; color: var(--ink); border-radius: 12px; padding: 4px 12px; text-align: center; line-height: 1.3; }
.ev-img .ev-date b { display: block; font-size: 1.2rem; } .ev-img .ev-date span { font-size: .72rem; }
.ev-img .tag { position: absolute; bottom: 12px; right: 12px; font-size: .75rem; color: #fff; background: rgba(0, 0, 0, .35); padding: 2px 10px; border-radius: 999px; }
.seat-grid { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); max-height: none; gap: 8px; }
.seat span { height: 40px; border-radius: 10px 10px 6px 6px; background: #EEF0F3; border: 1px solid #D0D5DD; }
.seat.taken span { background: #FDECEC; border-color: #F4B5B0; color: #B42318; }
.seat:has(input:checked) span { border-color: var(--brand); font-weight: 700; }
.seat:has(input:disabled):not(.taken) { cursor: default; }
.lg.free { background: #EEF0F3; border: 1px solid #D0D5DD; } .lg.picked { background: var(--brand); } .lg.taken { background: #FDECEC; border: 1px solid #F4B5B0; }
.stage { background: #EEF2FF; color: var(--brand); border-radius: 999px 999px 12px 12px; padding: 8px; font-weight: 500; margin: 0; }
@media (min-width: 992px) { .ev-aside { position: sticky; top: 110px; } }
@media (max-width: 767px) { .seat-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; } .seat span { height: 36px; font-size: .72rem; } }
.tk-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 230px; }
.tk-main { padding: 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.tk-stub { border-right: 2px dashed #D0D5DD; background: #F9FAFB; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; }
.tk-code { font-size: 1.6rem; font-weight: 700; letter-spacing: .2em; }
.tk-seat { width: 54px; height: 54px; border-radius: 14px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; }
.tk-row:hover { background: var(--bg); }
@media (max-width: 767px) { .tk-card { grid-template-columns: 1fr; } .tk-main { padding: 1.25rem; } .tk-stub { border-right: 0; border-top: 2px dashed #D0D5DD; } .tk-seat { width: 46px; height: 46px; font-size: 1.1rem; } }
.tx-list { display: flex; flex-direction: column; }
.tx { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #EEF0F3; }
.tx:last-child { border-bottom: 0; }
.amount-pos { color: #047857; } .amount-neg { color: #B42318; }
@media (max-width: 767px) { .wl-top { grid-template-columns: 1fr 1fr; } .wl-top > :first-child { grid-column: 1 / -1; } }
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.lb-podium .p1 { order: 2; padding: 1.75rem 1rem; border-radius: 20px; } .lb-podium .p2 { order: 1; } .lb-podium .p3 { order: 3; }
@media (max-width: 767px) { .lb-podium { gap: .5rem; } .lb-podium .kx-card, .lb-podium .p1 { padding: .9rem .4rem; } }
.auth-wrap { max-width: 1040px; margin: 0 auto; border-radius: 28px !important; box-shadow: 0 30px 60px rgba(16, 24, 40, .08); }
.auth-side { background: #101828 !important; color: #fff; padding: 3rem; height: 100%; border-radius: 0 !important; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bg); padding: 4px; border-radius: 14px; }
.auth-tabs a { text-align: center; padding: .6rem; border-radius: 11px; color: var(--muted); }
.auth-tabs a.active { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.age-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 767px) { .auth-side { padding: 1.5rem; } .auth-side ul, .auth-side > div:last-child { display: none !important; } }
.rd-body { padding: 2.5rem; }
.rd-body .reader { font-size: 19px; line-height: 2.2; color: #1D2939; white-space: pre-line; max-width: 720px; margin: 0 auto; }
@media (min-width: 992px) { .rd-aside { position: sticky; top: 110px; } }
@media (max-width: 991px) { .rd-aside { order: -1; } .rd-aside > :first-child { display: none !important; } }
@media (max-width: 767px) { .rd-body { padding: 1.25rem; } .rd-body .reader { font-size: 17px; } }
.qz-head { position: sticky; top: 100px; z-index: 10; }
.qz-dots { display: flex; gap: 6px; }
.qz-dots a { flex: 1; height: 8px; border-radius: 999px; background: #E4E7EC; }
.qz-dots a.done { background: var(--brand); }
.qz-q { scroll-margin-top: 230px; }
.qz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qz-opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; border-radius: 16px;
          border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1.02rem; margin: 0; transition: border-color .12s, background .12s; }
.qz-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qz-opt .l { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .8rem; background: var(--bg); color: #344054; flex: none; }
.qz-opt:hover { border-color: #C7D7FE; }
.qz-opt:has(input:checked) { border: 2px solid var(--brand); background: var(--brand-soft); padding: 9px 15px; }
.qz-opt:has(input:checked) .l { background: var(--brand); color: #fff; }
.qz-opt:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(29, 78, 216, .15); }
.rs-ring { width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center;
           background: conic-gradient(var(--c) calc(var(--p) * 1%), #EEF0F3 0); }
.rs-ring > div { width: 136px; height: 136px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.rs-ring b { font-size: 2.6rem; } .rs-ring span { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
@media (max-width: 767px) { .qz-options { grid-template-columns: 1fr; } .qz-head { top: 80px; } }

/* ================================================================ v6: livelier background + new bits */
body {
  background-color: #EDF1FB;
  background-image:
    radial-gradient(1100px 620px at 105% -10%, #CFDBFF 0%, rgba(207, 219, 255, 0) 60%),
    radial-gradient(800px 520px at -15% 35%, #E6DAFF 0%, rgba(230, 218, 255, 0) 60%),
    radial-gradient(900px 560px at 50% 115%, #FFE2C7 0%, rgba(255, 226, 199, 0) 60%);
  background-attachment: fixed;
}
.kx-card, .kx-lot, .ev-card, .kx-hero, .tk-card { box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(29, 78, 216, .06); border-color: rgba(228, 231, 236, .9); }
.app-nav, .app-footer, .tabbar { border-color: rgba(228, 231, 236, .9); }

.kx-hero .hl { color: #B45309; }
.hero-ticket { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 16px; background: #fff;
               border: 1px solid #C7D7FE; box-shadow: 0 6px 18px rgba(29, 78, 216, .12); color: var(--ink); line-height: 1.25; }
.hero-ticket:hover { color: var(--brand); border-color: var(--brand); }
.hero-ticket .kx-ico { width: 36px; height: 36px; border-radius: 10px; }
.hero-ticket b { display: block; } .hero-ticket small { display: block; font-size: .72rem; color: var(--muted); }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.hero-points li { background: var(--brand-soft); color: var(--brand); border-radius: 12px; padding: .4rem .8rem; font-size: .92rem; }
.hero-points b { font-size: 1.05rem; }
.hero-note { display: flex; align-items: center; gap: .5rem; background: #FEF3E2; color: #92400E; border-radius: 14px; padding: .6rem .9rem; font-size: .95rem; }

.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.side-300 { grid-template-columns: minmax(0, 1fr) 300px; }
.g-3-fixed { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 991px) { .g-1-2, .g-2-1, .side-300 { grid-template-columns: 1fr; } }

.ref-code-big { font-size: 2rem; letter-spacing: .12em; overflow-wrap: anywhere; }
.ref-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 12px; border: 1px solid #EEF0F3; border-radius: 16px; flex-wrap: wrap; }
.ref-stats { display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 6px; text-align: center; }
.ref-stats div { background: var(--bg); border-radius: 12px; padding: 6px 8px; }
.ref-stats div.pts { background: #FEF3E2; color: #92400E; }
.ref-stats b { display: block; font-size: 1.05rem; line-height: 1.3; }
.ref-stats span { font-size: .72rem; color: var(--muted); }
.ref-stats .pts span { color: #92400E; }
@media (max-width: 767px) { .ref-row > div:first-child { width: 100%; } .ref-stats { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ref-code-big { font-size: 1.6rem; } }

.pay-box { border: 2px solid #C7D7FE !important; }

.chat-box { height: 52vh; min-height: 320px; overflow-y: auto; background: var(--bg); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.chat-msg { max-width: 78%; display: flex; flex-direction: column; gap: 2px; }
.chat-msg .bubble { padding: .6rem .9rem; border-radius: 16px; line-height: 1.8; white-space: pre-line; word-break: break-word; }
.chat-msg .meta { font-size: .7rem; color: var(--muted); }
.chat-msg.mine { align-self: flex-start; } .chat-msg.mine .bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.theirs { align-self: flex-end; text-align: left; } .chat-msg.theirs .bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; text-align: right; }
.chat-form { display: flex; gap: .5rem; align-items: flex-end; }
.chat-form textarea { resize: none; }
.tabbar a { position: relative; }
.tab-dot { position: absolute; top: 8px; left: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: #B42318; }
@media (max-width: 767px) { .chat-msg { max-width: 90%; } .chat-box { height: 55vh; } }

.otp-input { text-align: center; font-size: 1.6rem; letter-spacing: .6rem; font-weight: 700; }

.qb-img { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: .5rem; }
.qz-img { display: block; max-width: 100%; max-height: 360px; margin: 0 auto 1rem; border-radius: 14px; border: 1px solid var(--line); object-fit: contain; }