/* =====================================================================
   WALLET UI v2 — giao diện app ví hiện đại (không áp dụng cho admin)
   Nền sáng sạch, thẻ số dư gradient đỏ–tím, nhiều khoảng trống, icon đồng bộ.
   Hai chế độ: sáng (mặc định) và tối. Cookie "mix" cũ được coi là sáng.
   ===================================================================== */
:root, html[data-theme] {
  --bg: #f4f4f8; --surface: #ffffff; --surface2: #f6f6fa; --ink: #17171c; --mute: #6b6b78; --line: #e8e8ef; --line2: #d6d6e0;
  --brand: #16161a; --brand2: #4a4a55; --grad: linear-gradient(120deg, #16161a 0%, #2c2c34 55%, #4a4a55 100%);
  --tint: #ececf1; --ok: #12a150; --bad: #e5484d;
  --shadow-sm: 0 1px 2px rgba(23,23,28,.05); --shadow-md: 0 1px 2px rgba(23,23,28,.04), 0 10px 28px rgba(23,23,28,.07);
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  /* tương thích tên biến cũ */
  --m-bg: var(--bg); --m-surface: var(--surface); --m-surface2: var(--surface2); --m-ink: var(--ink); --m-mute: var(--mute); --m-line: var(--line); --m-line2: var(--line2);
  --m-inv-bg: var(--ink); --m-inv-ink: var(--surface); --m-shadow: var(--shadow-md);
}
html[data-theme="dark"] {
  --bg: #0e0e12; --surface: #17171d; --surface2: #1f1f27; --ink: #f4f4f8; --mute: #a0a0ae; --line: #2a2a34; --line2: #3a3a46; --tint: rgba(255,255,255,.09); --brand: #f4f4f8; --brand2: #c9c9d3; --grad: linear-gradient(120deg, #3a3a46 0%, #2a2a34 55%, #1f1f27 100%);
  --shadow-sm: none; --shadow-md: 0 10px 30px rgba(0,0,0,.45);
}
html, body { background: var(--bg) !important; color: var(--ink); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; -webkit-font-smoothing: antialiased; }
html { background-image: none !important; animation: none !important; }
body { background-image: none !important; }
body::before, body::after, .ambient, .ambient-orb, .orbit, .floating-spark, .mini-spark, .feature-decoration, .ltn-money-particle, .petal, .petal-small, .blossom-layer { display: none !important; }
.dashboard-layout, .main-content { background: transparent !important; }
::selection { background: var(--ink); color: var(--surface); }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.02em; text-shadow: none !important; }
p, small, li { text-shadow: none; }
a { -webkit-tap-highlight-color: transparent; }

/* ---------- Thanh bên (menu) ---------- */
.sidebar { background: var(--surface) !important; border-right: 1px solid var(--line) !important; box-shadow: none !important; padding: 22px 14px !important; }
.sidebar-brand, .mobile-brand { color: var(--ink) !important; font-weight: 800; letter-spacing: -.03em; }
.sidebar-brand > span:last-child > span, .mobile-brand > span:last-child > span { color: var(--brand) !important; }
.brand-mark { border-radius: 11px !important; overflow: hidden; box-shadow: none !important; background: transparent !important; }
.sidebar-wallet { background: var(--grad) !important; border: 0 !important; border-radius: var(--r-md) !important; padding: 14px 16px !important; box-shadow: 0 10px 22px rgba(0,0,0,.28) !important; }
.sidebar-wallet > span { color: rgba(255,255,255,.8) !important; font-weight: 700; letter-spacing: .06em; }
.sidebar-wallet strong { color: #fff !important; font-size: 24px !important; letter-spacing: -.02em; }
.sidebar-wallet *::before { display: none; }
.nav-link, .nav-sub-link { position: relative; color: var(--mute) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; font-weight: 600; transition: background .15s, color .15s; }
.nav-link:hover, .nav-sub-link:hover { background: var(--surface2) !important; color: var(--ink) !important; }
.nav-link > span:first-child { background: var(--surface2) !important; border: 0 !important; border-radius: 10px !important; color: var(--mute) !important; }
.nav-link svg { color: inherit !important; }
.nav-link.is-active, .nav-sub-link.is-active { background: var(--tint) !important; color: var(--brand) !important; font-weight: 800; box-shadow: none !important; }
.nav-link.is-active > span:first-child { background: var(--grad) !important; color: #fff !important; }
.nav-link.is-active svg, .nav-link.is-active .nav-group-caret { color: #fff !important; }
.nav-link.is-active::before, .nav-sub-link.is-active::before { content: ""; position: absolute; left: -14px; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: var(--grad); }
.nav-sub-link.is-active svg, .nav-sub-link.is-active * { color: var(--brand) !important; }
.nav-link.is-active *:not(svg):not(path):not(span:first-child) { color: var(--brand) !important; }
.nav-sub { border-left-color: var(--line) !important; }

/* ---------- Thanh trên điện thoại + tab bar ---------- */
.mobile-topbar { background: color-mix(in srgb, var(--surface) 92%, transparent) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) !important; box-shadow: none !important; }
.mobile-menu-btn, .mobile-logout, .mobile-balance { background: var(--surface2) !important; border: 0 !important; color: var(--ink) !important; border-radius: 12px !important; box-shadow: none !important; }
.mobile-balance strong { color: var(--brand) !important; }
.mono-tabbar { display: none; }
@media (max-width: 720px) {
  .mono-tabbar { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px;
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-md); }
  .mono-tabbar a, .mono-tabbar label { display: grid; justify-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 16px; color: var(--mute); font-size: 10.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .18s, color .18s; -webkit-tap-highlight-color: transparent; }
  .mono-tabbar svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .mono-tabbar a.is-active { background: var(--tint); color: var(--brand); }
  body.has-mono-tabbar { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .mono-theme-toggle { bottom: calc(96px + env(safe-area-inset-bottom)) !important; left: auto !important; right: 14px; }
  .ltn-atmosphere-dock { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- Khung nội dung & tiêu đề ---------- */
.main-content { padding-top: 28px !important; }
.content-section { margin: 0 0 28px !important; }
.top-bar h1, #welcome-title, .main-content > header h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.section-eyebrow, .eyebrow { color: var(--brand) !important; font-weight: 800 !important; letter-spacing: .1em !important; font-size: 11px !important; text-transform: uppercase; background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; }
.panel-heading, .section-heading { color: var(--ink) !important; font-weight: 800; }
.panel-heading::after, .section-heading::after { display: none !important; }

/* ---------- Thẻ (card) ---------- */
.panel, .empty-card, .task-card, .shortcut-card, .stat-card, .wd-tile, .feature-card, .step-card, .faq-item, .hero-glass, .auth-card, .cta-card, .signin-prompt, .sys-announce-card, .pet-arena-card, .ltn-rule-box, .ltn-rule-mini-card, .ltn-ref-stat-card, .ltn-promo-perk-card, .ltn-lb-prize-card, .leaderboard-mini-panel, .wallet-section, .bw-chart-panel, .ltn-loading-card, .ltn-gift-rule-item, .legal-card {
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-md) !important; color: var(--ink) !important; backdrop-filter: none !important;
}
.panel .panel, .wallet-section .panel, .bw-chart, .bw-stats, .rows-list, .ltn-rule-mini-card, .ltn-gift-rule-item { background: var(--surface2) !important; box-shadow: none !important; }
.wallet-section { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.task-card, .shortcut-card, .feature-card, .step-card, .wd-tile { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.task-card:hover, .shortcut-card:hover, .feature-card:hover, .step-card:hover, .wd-tile:hover { transform: translateY(-3px); border-color: var(--line2) !important; box-shadow: 0 2px 4px rgba(23,23,28,.05), 0 16px 34px rgba(23,23,28,.1) !important; }
p, small, li, .muted { color: var(--mute); }
strong, .tk-name { color: var(--ink); }

/* ---------- Tổng quan: thẻ số dư lớn kiểu app ví ---------- */
.welcome-card { background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 0 0 4px !important; }
.welcome-card h2 { font-size: clamp(22px, 2.6vw, 28px) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; background: none !important; margin: 4px 0 2px !important; }
.welcome-card p { color: var(--mute) !important; font-size: 13px !important; }
.welcome-orb { display: none !important; }
.stats-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; margin-top: 16px !important; }
.stats-grid .stat-card { position: relative; padding: 18px 20px !important; }
.stat-card > span { color: var(--mute) !important; font-size: 11px !important; font-weight: 800; letter-spacing: .08em; }
.stat-card strong { color: var(--ink) !important; font-size: clamp(24px, 2.4vw, 32px) !important; letter-spacing: -.03em; display: block; margin: 6px 0 2px; }
.stat-card small { color: var(--mute) !important; }
.stat-card::after { display: none !important; }
.stat-card-balance { grid-column: 1 / -1; background: var(--grad) !important; border: 0 !important; box-shadow: 0 18px 40px rgba(0,0,0,.32) !important; padding: 26px 28px !important; overflow: hidden; }
.stat-card-balance::before { content: ""; position: absolute; right: -60px; top: -70px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.14); pointer-events: none; }
.stat-card-balance::after { display: block !important; content: ""; position: absolute; right: 70px; bottom: -90px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.1); }
.stat-card-balance > * { position: relative; z-index: 1; }
.stat-card-balance > span, .stat-card-balance small { color: rgba(255,255,255,.85) !important; }
.stat-card-balance strong { color: #fff !important; font-size: clamp(34px, 4.4vw, 52px) !important; }
.overview-shortcuts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
.shortcut-card { padding: 16px 18px !important; align-items: center; }
.shortcut-card > span:first-child { background: var(--tint) !important; color: var(--brand) !important; border-radius: 14px !important; border: 0 !important; width: 44px; height: 44px; display: grid; place-items: center; }
.shortcut-card svg { color: inherit; }
.shortcut-card strong { color: var(--ink) !important; font-weight: 800; }

/* ---------- Thẻ nhiệm vụ ---------- */
.task-card { padding: 20px !important; }
.tk-head { display: flex; align-items: center; gap: 12px; }
.tk-icon { background: var(--tint) !important; color: var(--brand) !important; border: 0 !important; border-radius: 14px !important; width: 44px; height: 44px; display: grid; place-items: center; box-shadow: none !important; }
.tk-icon svg { color: var(--brand) !important; stroke: var(--brand) !important; }
.tk-rows { list-style: none; margin: 14px 0 16px; padding: 0; }
.tk-rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.tk-rows li:last-child { border-bottom: 0; }
.tk-rows li strong { font-weight: 800; }
.tk-progress { height: 6px; border-radius: 6px; background: var(--surface2); overflow: hidden; margin: 2px 0 12px; }
.tk-progress i { display: block; height: 100%; border-radius: 6px; background: var(--grad); transition: width .5s ease; }
.ltn-task-boost-pill, .ltn-boost-status { background: var(--tint) !important; color: var(--brand) !important; border: 0 !important; font-weight: 800; border-radius: 999px !important; }

/* ---------- Nút ---------- */
.primary-button, .task-card button, .bw-submit, .ltn-promo-submit, .wd-confirm, .swal2-confirm, .primary-link, #tl-open, .login-button, .checkin-btn, .claim-btn {
  background: var(--grad) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.28) !important; text-shadow: none !important;
  position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease;
}
.primary-button:hover, .task-card button:hover, .bw-submit:hover, .primary-link:hover, .login-button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.4) !important; }
.primary-button:active, .task-card button:active { transform: scale(.97); }
.primary-button:disabled, .task-card button:disabled { opacity: .5; transform: none; box-shadow: none !important; }
.secondary-link, .text-button, .logout-button, .admin-open, .swal2-cancel { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line2) !important; border-radius: 14px !important; box-shadow: none !important; font-weight: 700; }
.ltn-boost-discord-btn, #boost-invite { background: #5865f2 !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; }

/* ---------- Ô nhập ---------- */
input, select, textarea { background: var(--surface2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; }
input:focus, select:focus, textarea:focus { outline: none !important; background: var(--surface) !important; border-color: var(--brand) !important; box-shadow: 0 0 0 4px rgba(0,0,0,.14) !important; }
::placeholder { color: var(--mute) !important; opacity: .8; }

/* ---------- Banner Booster, dialog, swal ---------- */
.ltn-boost-banner, .ltn-boost-banner.is-duck-style, .ltn-boost-banner.is-booster { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-md) !important; border-radius: var(--r-lg) !important; }
.ltn-boost-banner::before, .ltn-boost-banner::after { display: none !important; }
.ltn-boost-title { color: var(--ink) !important; } .ltn-boost-sub { color: var(--mute) !important; }
.swal2-popup { background: var(--surface) !important; color: var(--ink) !important; border-radius: 22px !important; box-shadow: var(--shadow-md) !important; }
.swal2-title, .swal2-html-container { color: var(--ink) !important; }
.tl-dialog { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 24px !important; box-shadow: 0 30px 80px rgba(0,0,0,.35) !important; }
.tl-dialog::backdrop { background: rgba(10,10,20,.55) !important; backdrop-filter: blur(5px); }
#tl-bar, .tl-bar > span, progress, .bar-fill, [class*="progress-bar"] { background: var(--grad) !important; }

/* ---------- Icon đồng bộ, emoji xám ---------- */
.feature-icon, .prompt-icon, .ltn-rule-mini-icon, .ltn-ref-svg-badge, .ltn-promo-perk-svg { background: var(--tint) !important; color: var(--brand) !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important; }
.feature-icon svg, .prompt-icon svg { color: var(--brand) !important; stroke: var(--brand) !important; }
.float-chip > span, .ltn-rule-mini-icon, .pet-action-btn span { filter: grayscale(1); }
.pet-action-btn { background: var(--surface2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }

/* ---------- Bảng, huy hiệu trạng thái ---------- */
table { border-collapse: separate; border-spacing: 0; }
th { color: var(--mute) !important; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
td, th { border-color: var(--line) !important; }
.is-done, .is-green { color: var(--ok) !important; } .is-rejected { color: var(--bad) !important; }

/* ---------- Trang chủ / đăng nhập ---------- */
.topbar { background: color-mix(in srgb, var(--surface) 90%, transparent) !important; backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) !important; box-shadow: none !important; }
.top-nav a { color: var(--mute) !important; font-weight: 600; } .top-nav a:hover { color: var(--ink) !important; }
.brand, .brand-highlight { color: var(--ink) !important; } .brand-highlight { color: var(--brand) !important; }
.hero { padding-top: 56px; }
.hero h1 { color: var(--ink) !important; text-shadow: none !important; font-size: clamp(38px, 5.4vw, 70px) !important; letter-spacing: -.045em !important; line-height: 1 !important; }
.hero h1 span { background: var(--grad) !important; -webkit-background-clip: text !important; background-clip: text !important; display: inline-block; text-shadow: none !important; -webkit-text-fill-color: transparent; color: transparent !important; padding: 0; margin: 0; }
.hero-description, .hero-note, .section-heading p { color: var(--mute) !important; }
.status-pill, .glass-badge, .float-chip, .secure-stamp, .hero .eyebrow { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-sm) !important; border-radius: 999px !important; }
.hero-glass { background: var(--surface) !important; box-shadow: 0 30px 60px rgba(0,0,0,.16) !important; }
.discord-btn { background: #5865f2 !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 8px 20px rgba(88,101,242,.35) !important; }
.site-footer { background: var(--surface) !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
.sparkline i, .glass-bars i { background: var(--grad) !important; box-shadow: none !important; }
.step-number, .feature-index { background: transparent !important; color: var(--mute) !important; border: 0 !important; box-shadow: none !important; font-weight: 800; }

/* ---------- Nút đổi giao diện (sáng/tối) ---------- */
.mono-theme-toggle { position: fixed; z-index: 90; left: 14px; bottom: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line2) !important; box-shadow: var(--shadow-md); padding: 0; transition: transform .15s ease; }
.mono-theme-toggle:hover { transform: scale(1.08); }
.mono-theme-toggle svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .mono-theme-toggle .i-moon, html:not([data-theme="dark"]) .mono-theme-toggle .i-sun, .mono-theme-toggle .i-mix { display: none; }
body:has(#mobile-menu-toggle:checked) .mono-theme-toggle { display: none; }
.ltn-atmo-trigger { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line2) !important; box-shadow: var(--shadow-md) !important; }

/* ---------- Chuyển động nhẹ ---------- */
@keyframes w-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.content-section:not([hidden]) > *, .stats-grid > *, .task-grid > *, .overview-shortcuts > *, .feature-card, .step-card, .hero-copy > *, .hero-visual { animation: w-rise .5s cubic-bezier(.2,.8,.2,1) both; }
.stats-grid > *:nth-child(2), .task-grid > *:nth-child(2) { animation-delay: .05s; } .stats-grid > *:nth-child(3), .task-grid > *:nth-child(3) { animation-delay: .1s; } .stats-grid > *:nth-child(4), .task-grid > *:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat-card-balance { padding: 22px 20px !important; }
  .overview-shortcuts { grid-template-columns: 1fr !important; }
}
/* neutral accent: no red/purple */
html[data-theme="dark"] .primary-button, html[data-theme="dark"] .task-card button, html[data-theme="dark"] .bw-submit, html[data-theme="dark"] .primary-link, html[data-theme="dark"] .login-button { border: 1px solid var(--line2) !important; }
html[data-theme="dark"] .tk-progress i, html[data-theme="dark"] #tl-bar { background: #f4f4f8 !important; }
html[data-theme="dark"] .nav-link.is-active > span:first-child { background: #f4f4f8 !important; color: #17171d !important; }

/* ===== COLOR ACCENTS (blue / green / amber / teal) ===== */
:root { --c1:#2f6fed; --c2:#12a150; --c3:#e8960c; --c4:#0f9fa8; --c5:#6b7cff; }
html[data-theme="dark"] { --c1:#5b9bff; --c2:#3ccf7e; --c3:#ffb840; --c4:#35c9d3; --c5:#8f9cff; }
/* nav icons */
.nav-link > span:first-child { background: color-mix(in srgb, var(--c) 14%, transparent) !important; color: var(--c) !important; }
.nav-link > span:first-child svg { color: var(--c) !important; stroke: var(--c) !important; }
.nav-link:nth-of-type(5n+1), .nav-group:nth-of-type(5n+1) > .nav-link { --c: var(--c1); }
.nav-link:nth-of-type(5n+2), .nav-group:nth-of-type(5n+2) > .nav-link { --c: var(--c2); }
.nav-link:nth-of-type(5n+3), .nav-group:nth-of-type(5n+3) > .nav-link { --c: var(--c3); }
.nav-link:nth-of-type(5n+4), .nav-group:nth-of-type(5n+4) > .nav-link { --c: var(--c4); }
.nav-link:nth-of-type(5n+5), .nav-group:nth-of-type(5n+5) > .nav-link { --c: var(--c5); }
.nav-link.is-active > span:first-child { background: var(--c, var(--brand)) !important; color: #fff !important; }
.nav-link.is-active > span:first-child svg { color: #fff !important; stroke: #fff !important; }
/* cards: colored top edge + icon */
.stat-card:not(.stat-card-balance), .shortcut-card, .task-card, .feature-card, .step-card, .wd-tile { --c: var(--c1); border-top: 3px solid var(--c) !important; }
.stats-grid > :nth-child(2), .overview-shortcuts > :nth-child(3n+2), .task-grid > :nth-child(4n+2), .feature-card:nth-child(4n+2), .step-card:nth-child(4n+2), .wd-tile:nth-child(4n+2) { --c: var(--c3); }
.stats-grid > :nth-child(3), .overview-shortcuts > :nth-child(3n+3), .task-grid > :nth-child(4n+3), .feature-card:nth-child(4n+3), .step-card:nth-child(4n+3), .wd-tile:nth-child(4n+3) { --c: var(--c2); }
.task-grid > :nth-child(4n+4), .feature-card:nth-child(4n+4), .step-card:nth-child(4n+4), .wd-tile:nth-child(4n+4) { --c: var(--c4); }
.shortcut-card > span:first-child, .tk-icon, .feature-icon, .prompt-icon, .ltn-rule-mini-icon, .ltn-ref-svg-badge, .ltn-promo-perk-svg { background: color-mix(in srgb, var(--c, var(--c1)) 15%, transparent) !important; color: var(--c, var(--c1)) !important; }
.tk-icon svg, .feature-icon svg, .prompt-icon svg, .shortcut-card > span:first-child svg { color: var(--c, var(--c1)) !important; stroke: var(--c, var(--c1)) !important; }
.tk-progress i { background: var(--c, var(--c2)) !important; }
.task-card .tk-actions button, .task-card > button { background: var(--c) !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 30%, transparent) !important; }
.stat-card:not(.stat-card-balance) > :first-child { color: var(--c) !important; }
.mono-tabbar a:nth-child(1).is-active { color: var(--c1); } .mono-tabbar a:nth-child(2).is-active { color: var(--c3); } .mono-tabbar a:nth-child(3).is-active { color: var(--c2); } .mono-tabbar a:nth-child(4).is-active { color: var(--c4); }
.stat-card-balance { background: linear-gradient(120deg, #1d4fd8 0%, #2f6fed 55%, #0f9fa8 100%) !important; box-shadow: 0 18px 40px rgba(47,111,237,.3) !important; }
.sidebar-wallet { background: linear-gradient(120deg, #1d4fd8, #2f6fed 60%, #0f9fa8) !important; box-shadow: 0 10px 22px rgba(47,111,237,.28) !important; }

/* ===== icons only: undo card colors ===== */
.stat-card:not(.stat-card-balance), .shortcut-card, .task-card, .feature-card, .step-card, .wd-tile { border-top: 1px solid var(--line) !important; }
.tk-progress i { background: var(--brand) !important; }
html[data-theme="dark"] .tk-progress i { background: #f4f4f8 !important; }
.task-card .tk-actions button, .task-card > button { background: var(--grad) !important; box-shadow: 0 8px 20px rgba(0,0,0,.18) !important; }
.stat-card:not(.stat-card-balance) > :first-child { color: var(--mute) !important; }
.mono-tabbar a.is-active { color: var(--brand) !important; }
.stat-card-balance { background: var(--grad) !important; box-shadow: 0 18px 40px rgba(0,0,0,.25) !important; }
.sidebar-wallet { background: var(--grad) !important; box-shadow: 0 10px 22px rgba(0,0,0,.22) !important; }
.nav-link.is-active > span:first-child { background: var(--c, var(--brand)) !important; }

/* ===== WINTER icon palette: ice blue, frost cyan, pine green, silver-blue, glacier ===== */
:root { --c1:#2b8cff; --c2:#14a58a; --c3:#5aa9e6; --c4:#22b8cf; --c5:#4c6ef5; }
html[data-theme="dark"] { --c1:#6db6ff; --c2:#4fd8b4; --c3:#9ad0f5; --c4:#5ee0ee; --c5:#8aa2ff; }

/* ===== alternating colored ring around cards ===== */
.stat-card:not(.stat-card-balance), .shortcut-card, .task-card, .feature-card, .step-card, .wd-tile {
  border: 2px solid color-mix(in srgb, var(--c, var(--c1)) 55%, transparent) !important;
}
.panel, .bw-chart-panel, .wallet-section, .empty-card, .faq-item, .ltn-rule-box, .ltn-ref-stat-card, .ltn-promo-perk-card, .ltn-lb-prize-card, .ltn-gift-rule-item, .pet-arena-card, .legal-card, .cta-card, .signin-prompt, .leaderboard-mini-panel { --c: var(--c1); border: 2px solid color-mix(in srgb, var(--c) 45%, transparent) !important; }
.content-section > .panel:nth-of-type(4n+2), .bw-chart-panel:nth-of-type(4n+2), .faq-item:nth-child(4n+2), .ltn-ref-stat-card:nth-child(4n+2), .ltn-promo-perk-card:nth-child(4n+2), .ltn-gift-rule-item:nth-child(4n+2) { --c: var(--c2); }
.content-section > .panel:nth-of-type(4n+3), .bw-chart-panel:nth-of-type(4n+3), .faq-item:nth-child(4n+3), .ltn-ref-stat-card:nth-child(4n+3), .ltn-promo-perk-card:nth-child(4n+3), .ltn-gift-rule-item:nth-child(4n+3) { --c: var(--c4); }
.content-section > .panel:nth-of-type(4n+4), .bw-chart-panel:nth-of-type(4n+4), .faq-item:nth-child(4n+4), .ltn-ref-stat-card:nth-child(4n+4), .ltn-promo-perk-card:nth-child(4n+4), .ltn-gift-rule-item:nth-child(4n+4) { --c: var(--c5); }
.stats-grid > :nth-child(2), .overview-shortcuts > :nth-child(3n+2), .task-grid > :nth-child(4n+2) { --c: var(--c2); }
.stats-grid > :nth-child(3), .overview-shortcuts > :nth-child(3n+3), .task-grid > :nth-child(4n+3) { --c: var(--c4); }
.task-grid > :nth-child(4n+4) { --c: var(--c5); }
.bw-chart-panel:nth-child(even), .panel:nth-child(even) { --c: var(--c2) !important; }
.bw-chart-panel:nth-child(3n), .panel:nth-child(3n) { --c: var(--c4) !important; }

/* ===== STYLE v3 "Emerald flat" (ported from supplied style.css) ===== */
:root {
  --bg:#f8fafc; --surface:#fff; --surface2:#f8fafc; --ink:#0f172a; --mute:#64748b; --line:#e2e8f0; --line2:#cbd5e1;
  --brand:#10b981; --brand2:#059669; --grad:linear-gradient(135deg,#10b981 0%,#059669 100%); --tint:#ecfdf5;
  --c1:#2563eb; --c2:#10b981; --c3:#f59e0b; --c4:#0ea5e9; --c5:#ea580c;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.02); --shadow-md:0 4px 14px rgba(0,0,0,.05);
}
html[data-theme="dark"] {
  --bg:#0b1220; --surface:#111a2c; --surface2:#162033; --ink:#f1f5f9; --mute:#94a3b8; --line:#223049; --line2:#2d3f5e;
  --brand:#34d399; --brand2:#10b981; --grad:linear-gradient(135deg,#10b981 0%,#047857 100%); --tint:rgba(16,185,129,.14);
  --c1:#60a5fa; --c2:#34d399; --c3:#fbbf24; --c4:#38bdf8; --c5:#fb923c;
}
html, body { font-family: "Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important; }
::selection { background: #a7f3d0; color: #064e3b; }
/* flat neutral cards, soft border */
.stat-card:not(.stat-card-balance), .shortcut-card, .task-card, .feature-card, .step-card, .wd-tile,
.panel, .bw-chart-panel, .wallet-section, .empty-card, .faq-item, .ltn-rule-box, .ltn-ref-stat-card, .ltn-promo-perk-card, .ltn-lb-prize-card, .ltn-gift-rule-item, .pet-arena-card, .legal-card, .cta-card, .signin-prompt, .leaderboard-mini-panel, .auth-card {
  border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: var(--shadow-sm) !important;
}
.task-card:hover, .shortcut-card:hover { border-color: var(--line2) !important; box-shadow: var(--shadow-md) !important; }
/* nav active = soft green pill with border */
.nav-link.is-active, .nav-sub-link.is-active { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #a7f3d0 !important; box-shadow: 0 2px 8px rgba(16,185,129,.1) !important; border-radius: 12px !important; }
html[data-theme="dark"] .nav-link.is-active, html[data-theme="dark"] .nav-sub-link.is-active { background: rgba(16,185,129,.14) !important; color: #34d399 !important; border-color: rgba(52,211,153,.35) !important; }
.nav-link.is-active *:not(svg):not(path):not(span:first-child), .nav-sub-link.is-active svg, .nav-sub-link.is-active * { color: inherit !important; }
.nav-link.is-active::before, .nav-sub-link.is-active::before { display: none !important; }
.nav-link.is-active > span:first-child { background: var(--c, #10b981) !important; color: #fff !important; }
/* balance cards emerald */
.stat-card-balance { background: linear-gradient(135deg,#10b981 0%,#059669 100%) !important; box-shadow: 0 12px 28px rgba(16,185,129,.28) !important; border: 0 !important; }
.sidebar-wallet { background: linear-gradient(135deg,#10b981,#059669) !important; box-shadow: 0 8px 18px rgba(16,185,129,.25) !important; }
.stat-card-balance strong, .stat-card-balance [class*="value"], .stat-card-balance .stat-value { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; font-variant-numeric: tabular-nums; font-weight: 900 !important; }
/* buttons emerald solid */
.primary-button, .task-card button, .task-card .tk-actions button, .task-card > button, .bw-submit, .primary-link, .login-button {
  background: linear-gradient(135deg,#10b981,#059669) !important; box-shadow: 0 6px 16px rgba(16,185,129,.25) !important; border: 0 !important; color: #fff !important;
}
.primary-button:hover, .task-card button:hover, .bw-submit:hover, .primary-link:hover, .login-button:hover { box-shadow: 0 10px 22px rgba(16,185,129,.35) !important; }
.tk-progress i, #tl-bar, .tl-bar > span, progress, .bar-fill, [class*="progress-bar"] { background: #10b981 !important; }
html[data-theme="dark"] .tk-progress i, html[data-theme="dark"] #tl-bar { background: #34d399 !important; }
input:focus, select:focus, textarea:focus { border-color: #10b981 !important; box-shadow: 0 0 0 4px rgba(16,185,129,.14) !important; }
/* tab bar & accents */
.mono-tabbar a.is-active { background: #ecfdf5 !important; color: #059669 !important; }
html[data-theme="dark"] .mono-tabbar a.is-active { background: rgba(16,185,129,.14) !important; color: #34d399 !important; }
.section-eyebrow, .eyebrow, .brand-highlight, .sidebar-brand > span:last-child > span, .mobile-brand > span:last-child > span, .mobile-balance strong { color: #059669 !important; }
html[data-theme="dark"] .section-eyebrow, html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .brand-highlight { color: #34d399 !important; }
.ltn-task-boost-pill, .ltn-boost-status { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #a7f3d0 !important; }
/* hero heading */
.hero h1 span { background: linear-gradient(135deg,#10b981,#059669) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.hero-glass { box-shadow: 0 24px 50px rgba(16,185,129,.14) !important; }
.sparkline i, .glass-bars i { background: linear-gradient(180deg,#34d399,#10b981) !important; }

/* ---- v3 refinements to match supplied style more closely ---- */
html, body, .app-shell, .app-main, .main-content, main { background: #f1f5f9 !important; }
html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] main { background: var(--bg) !important; }
.sidebar { background: #fff !important; border-right: 1px solid #e2e8f0 !important; box-shadow: 2px 0 16px rgba(0,0,0,.02) !important; }
html[data-theme="dark"] .sidebar { background: var(--surface) !important; border-color: var(--line) !important; }
.stat-card-balance, .sidebar-wallet { background: linear-gradient(135deg,#064e3b 0%,#059669 45%,#10b981 100%) !important; border-radius: 22px !important; box-shadow: 0 14px 34px -6px rgba(16,185,129,.4), 0 0 0 1px rgba(255,255,255,.12) inset !important; }
.sidebar-wallet { border-radius: 16px !important; }
.panel, .bw-chart-panel, .wallet-section, .auth-card, .cta-card { border-radius: 20px !important; }
/* icon chips: soft bg + border like sc-emerald/sc-blue/... */
.shortcut-card > span:first-child, .tk-icon, .feature-icon, .prompt-icon, .ltn-rule-mini-icon, .ltn-ref-svg-badge, .ltn-promo-perk-svg {
  background: color-mix(in srgb, var(--c, var(--c2)) 12%, #fff) !important; border: 1px solid color-mix(in srgb, var(--c, var(--c2)) 30%, #fff) !important; border-radius: 13px !important;
}
html[data-theme="dark"] .shortcut-card > span:first-child, html[data-theme="dark"] .tk-icon, html[data-theme="dark"] .feature-icon { background: color-mix(in srgb, var(--c, var(--c2)) 16%, transparent) !important; border-color: color-mix(in srgb, var(--c, var(--c2)) 35%, transparent) !important; }
.nav-link > span:first-child { border: 1px solid color-mix(in srgb, var(--c) 28%, #fff) !important; }
.task-card .tk-rows > *, .stat-card:not(.stat-card-balance) { background: var(--surface) !important; }

/* ---- slate/emerald for leftover gray surfaces ---- */
html:not([data-theme="dark"]) :is(.panel, .bw-chart, .rows-list, .tk-progress, .pet-action-btn, .ltn-gift-rule-item, .ltn-rule-mini-card, input, textarea, select, .ltn-promo-header, .leaderboard-mini-row, .empty-cell, td) { background-color: #f8fafc !important; }
html:not([data-theme="dark"]) :is(.bw-detail, .duck-live-bar, .lbt, .lbt-item, .lbt-item-info, .bk-field, .bw-check, .bk-dialog, .bk-x, .bk-tile, .duck-ticker-time, .dd-btn, .dd-menu, .wd-summary, .wd-history-row, .tk-reload, .ltn-progress-pill, .ltn-checkin-card, .leaderboard-rank, .leaderboard-tasks, .leaderboard-income, .podium-rank, .withdraw-lock-icon, .pet-speech-bubble) { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; }
.ltn-quest-progressbar-track { background: #e2e8f0 !important; }
.ltn-checkin-main-btn { background: linear-gradient(135deg,#10b981,#059669) !important; color: #fff !important; border: 0 !important; }
.bw-submit:disabled, .bw-submit[disabled], .bw-submit.is-disabled, button.primary-button:disabled { background: #a7f3d0 !important; color: #047857 !important; box-shadow: none !important; opacity: 1 !important; }
.page-error { background: #fef2f2 !important; color: #b91c1c !important; }
html body #duck-btn-submit-bank, html body #duck-btn-submit-card, html body #duck-btn-submit-game, html body .duck-btn-submit, html body button[type="submit"].primary, html body .ltn-boost-btn, html body .bw-submit { background: linear-gradient(135deg,#10b981,#059669) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 16px rgba(16,185,129,.25) !important; }
html body #duck-btn-submit-bank:disabled, html body #duck-btn-submit-card:disabled, html body #duck-btn-submit-game:disabled, html body .bw-submit:disabled { background: #a7f3d0 !important; color: #047857 !important; box-shadow: none !important; opacity: 1 !important; }
html[data-theme="dark"] body #duck-btn-submit-bank:disabled, html[data-theme="dark"] body .bw-submit:disabled { background: rgba(16,185,129,.25) !important; color: #6ee7b7 !important; }
html, html body, html body .wallet-section, html body .content-section { --ft-accent:#10b981 !important; --ft-accent-2:#059669 !important; }
html body .wallet-section #duck-btn-submit-bank, html body .wallet-section #duck-btn-submit-card, html body .wallet-section #duck-btn-submit-game { background: linear-gradient(135deg,#10b981,#059669) !important; color:#fff !important; }
html body .wallet-section #duck-btn-submit-bank:disabled, html body .wallet-section #duck-btn-submit-card:disabled, html body .wallet-section #duck-btn-submit-game:disabled { background:#a7f3d0 !important; color:#047857 !important; }

/* ===== v4 NEO-BRUTAL (thick ink borders, hard shadows, terminal balance card) ===== */
:root { --nb-ink:#0f172a; --nb-sh:4px 4px 0 #0f172a; --bg:#f4f6fb; }
html[data-theme="dark"] { --nb-ink:#e2e8f0; --nb-sh:4px 4px 0 #000; }
html:not([data-theme="dark"]), html:not([data-theme="dark"]) body { background-color:#f4f6fb !important; background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px) !important; background-size: 26px 26px !important; }
.stat-card:not(.stat-card-balance), .shortcut-card, .task-card, .feature-card, .step-card, .wd-tile,
.panel, .bw-chart-panel, .wallet-section, .empty-card, .faq-item, .ltn-rule-box, .ltn-ref-stat-card, .ltn-promo-perk-card, .ltn-lb-prize-card, .ltn-gift-rule-item, .pet-arena-card, .legal-card, .cta-card, .signin-prompt, .leaderboard-mini-panel, .auth-card {
  border: 2.5px solid var(--nb-ink) !important; box-shadow: var(--nb-sh) !important; border-radius: 18px !important; background: var(--surface) !important;
}
.task-card:hover, .shortcut-card:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--nb-ink) !important; }
/* nested boxes inside panels: thinner ink border */
html:not([data-theme="dark"]) :is(.rows-list, .bw-detail, .wd-summary, .wd-history-row, .bk-tile, .bk-field, .lbt, .dd-btn, .ltn-checkin-card, .ltn-rule-mini-card, .leaderboard-mini-row, .duck-live-bar, input, textarea, select) { border: 2px solid var(--nb-ink) !important; }
/* balance = terminal window */
.stat-card-balance { background: var(--surface) !important; color: var(--nb-ink) !important; border: 2.5px solid var(--nb-ink) !important; box-shadow: var(--nb-sh) !important; border-radius: 18px !important; padding: 64px 28px 24px !important; position: relative; }
.stat-card-balance::after { display: none !important; }
.stat-card-balance::before { content: "lamtasknhanh.top/wallet/balance"; position: absolute; left: 0; right: 0; top: 0; height: 40px; background: #111827; color: #cbd5e1; font: 600 13px/40px ui-monospace,Menlo,Consolas,monospace; padding-left: 74px; border-bottom: 2.5px solid var(--nb-ink); border-radius: 15px 15px 0 0; background-image: radial-gradient(circle at 18px 20px,#ef4444 6px,transparent 7px), radial-gradient(circle at 40px 20px,#f59e0b 6px,transparent 7px), radial-gradient(circle at 62px 20px,#10b981 6px,transparent 7px); background-repeat: no-repeat; }
.stat-card-balance * { color: var(--nb-ink) !important; text-shadow: none !important; }
.stat-card-balance strong, .stat-card-balance [class*="value"] { color: var(--nb-ink) !important; font-size: clamp(36px,5vw,52px) !important; }
.stat-card-balance small, .stat-card-balance p, .stat-card-balance [class*="label"], .stat-card-balance [class*="hint"] { color: var(--mute) !important; }
.sidebar-wallet { background: var(--surface) !important; border: 2.5px solid var(--nb-ink) !important; box-shadow: 3px 3px 0 var(--nb-ink) !important; border-radius: 14px !important; }
.sidebar-wallet * { color: var(--nb-ink) !important; text-shadow: none !important; }
/* buttons */
html body .primary-button, html body .task-card button, html body .task-card .tk-actions button, html body .task-card > button, html body .bw-submit, html body .primary-link, html body .login-button,
html body #duck-btn-submit-bank, html body #duck-btn-submit-card, html body #duck-btn-submit-game, html body .wallet-section #duck-btn-submit-bank, html body .wallet-section #duck-btn-submit-card, html body .wallet-section #duck-btn-submit-game, html body .ltn-checkin-main-btn {
  background: #10b981 !important; color: #052e1b !important; border: 2.5px solid var(--nb-ink) !important; box-shadow: 3px 3px 0 var(--nb-ink) !important; border-radius: 12px !important; font-weight: 800 !important; text-shadow: none !important;
}
html body .primary-button:hover, html body .task-card button:hover, html body .bw-submit:hover:not(:disabled), html body .primary-link:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--nb-ink) !important; }
html body .primary-button:active, html body .task-card button:active, html body .bw-submit:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--nb-ink) !important; }
html body .bw-submit:disabled, html body #duck-btn-submit-bank:disabled, html body #duck-btn-submit-card:disabled, html body #duck-btn-submit-game:disabled, html body .wallet-section #duck-btn-submit-bank:disabled, html body .wallet-section #duck-btn-submit-card:disabled, html body .wallet-section #duck-btn-submit-game:disabled { background: #d1fae5 !important; color: #047857 !important; box-shadow: 3px 3px 0 #94a3b8 !important; border-color: #94a3b8 !important; }
/* pills / tags with ink border */
.ltn-task-boost-pill, .ltn-boost-status, .badge, [class*="status-pill"], .eyebrow-pill { border: 2px solid var(--nb-ink) !important; box-shadow: 2px 2px 0 var(--nb-ink) !important; font-weight: 800 !important; }
/* icon chips: bordered soft squares */
.shortcut-card > span:first-child, .tk-icon, .feature-icon, .prompt-icon, .ltn-rule-mini-icon, .ltn-ref-svg-badge, .ltn-promo-perk-svg { border: 2px solid color-mix(in srgb, var(--c, var(--c2)) 55%, #fff) !important; border-radius: 14px !important; }
/* sidebar & nav */
.sidebar { background: #fff !important; border-right: 2.5px solid var(--nb-ink) !important; box-shadow: none !important; }
html[data-theme="dark"] .sidebar { background: var(--surface) !important; }
.nav-link.is-active, .nav-sub-link.is-active { background: #d1fae5 !important; color: #064e3b !important; border: 2px solid var(--nb-ink) !important; box-shadow: 3px 3px 0 var(--nb-ink) !important; }
.mono-tabbar { border-top: 2.5px solid var(--nb-ink) !important; }
.mono-tabbar a.is-active { background: #d1fae5 !important; color: #064e3b !important; border: 2px solid var(--nb-ink); }
/* numbers mono */
.stat-card strong, .stat-value, [class*="amount"], .wd-amount, td:last-child { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; font-variant-numeric: tabular-nums; }
.tk-progress { border: 2px solid var(--nb-ink); height: 12px !important; border-radius: 8px !important; }
.mono-theme-toggle { border: 2.5px solid var(--nb-ink) !important; box-shadow: 3px 3px 0 var(--nb-ink) !important; }
html body .stat-card-balance { padding: 66px 28px 24px !important; }
html body .stat-card-balance::before { right: 0 !important; top: 0 !important; left: 0 !important; width: auto !important; height: 40px !important; border-radius: 15px 15px 0 0 !important; background-color: #111827 !important; z-index: 1; }
html body .sidebar-wallet > span, html body .sidebar-wallet strong { color: var(--nb-ink) !important; }
html body .sidebar-wallet > span { opacity: .7; }
html[data-theme="dark"] .stat-card-balance::before { border-bottom-color: #334155; }
html body .stats-grid > .stat-card-balance, html body .stat-card.stat-card-balance, html body article.stat-card-balance, html body div.stat-card-balance { padding-top: 66px !important; }
html body .stat-card-balance > :first-child { margin-top: 0 !important; }

/* ---- no inner chip behind icons: bare colored icons, aligned ---- */
html body .nav-link > span:first-child, html body .shortcut-card > span:first-child, html body .tk-icon, html body .feature-icon, html body .prompt-icon, html body .ltn-rule-mini-icon, html body .ltn-ref-svg-badge, html body .ltn-promo-perk-svg {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; width: 28px !important; height: 28px !important; min-width: 28px; display: inline-grid !important; place-items: center; padding: 0 !important;
}
html body .nav-link.is-active > span:first-child { background: transparent !important; color: var(--c, #059669) !important; }
html body .nav-link.is-active > span:first-child svg { color: var(--c, #059669) !important; stroke: var(--c, #059669) !important; }
html body .shortcut-card > span:first-child svg, html body .tk-icon svg, html body .feature-icon svg { width: 24px !important; height: 24px !important; }
html body .nav-link { gap: 12px !important; align-items: center !important; }
html body .shortcut-card, html body .tk-head { align-items: center !important; gap: 14px !important; }
html body .stat-card-balance, html body .stat-card-balance > *, html body .stat-card-balance span, html body .stat-card-balance div, html body .stat-card-balance strong { color: var(--nb-ink) !important; }
html body .stat-card-balance small, html body .stat-card-balance p { color: var(--mute) !important; }
html body .stat-card-balance { padding-top: 56px !important; row-gap: 6px; }

/* ---- remaining gray surfaces -> white/slate, selected = emerald ---- */
html body .wd-tile, html body .wd-tile span { background: #fff !important; color: var(--nb-ink) !important; }
html[data-theme="dark"] body .wd-tile, html[data-theme="dark"] body .wd-tile span { background: var(--surface) !important; }
html body .wd-tile { border: 2.5px solid var(--nb-ink) !important; box-shadow: 3px 3px 0 var(--nb-ink) !important; }
html body .wd-tile:has(input:checked), html body .wd-tile:has(input:checked) span { background: #d1fae5 !important; color: #064e3b !important; }
html body .wd-tile:has(input:checked) { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--nb-ink) !important; }
html:not([data-theme="dark"]) body :is(.duck-live-bar, .duck-ticker-time, .withdraw-lock-banner, .panel) { background: #f1f5f9 !important; }
html body .leaderboard-hero { background: #ecfdf5 !important; border: 2.5px solid var(--nb-ink) !important; box-shadow: var(--nb-sh) !important; }
html body .leaderboard-hero * { text-shadow: none !important; }
html body :is(.pet-level-pill) { background: #d1fae5 !important; color: #064e3b !important; border: 2px solid var(--nb-ink) !important; }
html body :is(.pet-exp-fill, .ltn-quest-progressbar-fill) { background: #10b981 !important; }
html body .ltn-milestone-reward { background: #fef3c7 !important; color: #92400e !important; border: 2px solid var(--nb-ink); }
html body .gift-icon { background: #d1fae5 !important; border: 2px solid var(--nb-ink) !important; }
html body .withdraw-lock-banner { border: 2.5px solid var(--nb-ink) !important; color: var(--nb-ink) !important; }

/* ===== v4 HOME LAYOUT: welcome + clock, terminal balance w/ sub-boxes, 2-col shortcuts ===== */
#overview { max-width: 980px; margin-inline: auto; }
#overview .welcome-card { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface) !important; border: 2.5px solid var(--nb-ink) !important; box-shadow: var(--nb-sh) !important; border-radius: 18px !important; padding: 18px 22px !important; margin-bottom: 20px; }
#overview .welcome-orb { display: none !important; }
#overview .welcome-card h2 { font-size: clamp(20px,2.6vw,28px) !important; margin: 2px 0 !important; }
#overview .welcome-card p { margin: 0 !important; }
.nb-clock { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 2.5px solid var(--nb-ink); border-radius: 14px; background: #ecfdf5; box-shadow: 3px 3px 0 var(--nb-ink); font-weight: 700; font-size: 13px; }
.nb-clock b { font: 800 18px ui-monospace,Menlo,Consolas,monospace; color: #059669; letter-spacing: .04em; }
.nb-dot { width: 10px; height: 10px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.25); }
.nb-balance-grid { grid-template-columns: 1fr !important; margin-bottom: 22px; }
html body .stat-card-balance { grid-template-columns: 1fr 1fr; align-items: start; }
html body .stat-card-balance > span, html body .stat-card-balance > strong, html body .stat-card-balance > small { grid-column: 1 / -1; }
.nb-subboxes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; padding-top: 18px; border-top: 2.5px dashed #cbd5e1; }
.nb-sub { border: 2.5px solid var(--nb-ink); border-radius: 14px; padding: 14px 16px; box-shadow: 3px 3px 0 var(--nb-ink); }
.nb-sub-a { background: #ecfdf5; } .nb-sub-b { background: #eff6ff; }
.nb-sub h4 { font-size: 13px; font-weight: 900; letter-spacing: .04em; margin: 0 0 10px; }
.nb-sub p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 0; font-size: 14px; }
.nb-sub p span { color: var(--mute) !important; }
.nb-sub b { font: 800 16px ui-monospace,Menlo,Consolas,monospace; }
.nb-sub-a b { color: #059669 !important; } .nb-sub-b b { color: #2563eb !important; }
.nb-sub em { font-style: normal; font-size: 12px; color: var(--mute); }
html[data-theme="dark"] .nb-sub-a { background: rgba(16,185,129,.12); } html[data-theme="dark"] .nb-sub-b { background: rgba(37,99,235,.14); } html[data-theme="dark"] .nb-clock { background: rgba(16,185,129,.12); }
#overview .overview-shortcuts { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; margin-top: 22px; }
#overview .shortcut-card { padding: 16px 18px !important; }
#overview .activity-chart-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .nb-subboxes, #overview .overview-shortcuts, #overview .activity-chart-grid { grid-template-columns: 1fr !important; } }

/* =====================================================================
   v5 "BENTO" — original design: cream canvas, pastel bento tiles,
   ink outlines with keycap (bottom) shadow, pill buttons, floating dock
   ===================================================================== */
:root {
  --bt-bg:#f4efe6; --bt-ink:#17181c; --bt-mute:#5d6070; --bt-white:#fff;
  --nb-ink:#17181c; --nb-sh:0 5px 0 #17181c;
  --c1:#3b82f6; --c2:#10b981; --c3:#f59e0b; --c4:#06b6d4; --c5:#fb7c3c;
  --bg:#f4efe6; --ink:#17181c; --mute:#5d6070; --line:#17181c; --line2:#17181c; --surface:#fff;
}
html[data-theme="dark"] {
  --bt-bg:#101113; --bt-ink:#f1f1f4; --bt-mute:#9a9cab; --bt-white:#1a1b1f;
  --nb-ink:#f1f1f4; --nb-sh:0 5px 0 #000;
  --c1:#60a5fa; --c2:#34d399; --c3:#fbbf24; --c4:#22d3ee; --c5:#fb923c;
  --bg:#101113; --ink:#f1f1f4; --mute:#9a9cab; --surface:#1a1b1f; --line:#32333a; --line2:#454650;
}
html body, html:not([data-theme="dark"]), html:not([data-theme="dark"]) body { background-color: var(--bt-bg) !important; background-image: none !important; color: var(--bt-ink); }
html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--bt-bg) !important; }
html body h1, html body h2, html body h3 { letter-spacing: -.03em; }
html body main h1 { font-size: clamp(30px,4vw,44px) !important; font-weight: 900 !important; }

/* ---- floating sidebar ---- */
html body .sidebar { margin: 14px 0 14px 14px !important; height: calc(100vh - 28px) !important; top: 14px !important; border: 2px solid var(--bt-ink) !important; border-radius: 28px !important; background: var(--bt-white) !important; box-shadow: var(--nb-sh) !important; overflow: auto; }
html body .nav-link { border-radius: 16px !important; font-weight: 700; border: 2px solid transparent !important; }
html body .nav-link:hover, html body .nav-sub-link:hover { background: color-mix(in srgb, var(--c, #888) 12%, transparent) !important; }
html body .nav-link.is-active, html body .nav-sub-link.is-active { background: var(--bt-ink) !important; color: var(--bt-bg) !important; border: 2px solid var(--bt-ink) !important; box-shadow: none !important; border-radius: 999px !important; }
html body .nav-link.is-active *:not(svg):not(path), html body .nav-sub-link.is-active * { color: var(--bt-bg) !important; }
html body .nav-link.is-active > span:first-child svg { color: var(--bt-bg) !important; stroke: var(--bt-bg) !important; }
html body .sidebar-wallet { background: #cdf2dd !important; border: 2px solid var(--bt-ink) !important; border-radius: 20px !important; box-shadow: 0 4px 0 var(--bt-ink) !important; }
html[data-theme="dark"] body .sidebar-wallet { background: #14532d !important; }
html body .sidebar-wallet *, html body .sidebar-wallet strong { color: var(--bt-ink) !important; }

/* ---- tiles: pastel bento cards ---- */
html body :is(.stat-card:not(.stat-card-balance), .shortcut-card, .task-card, .feature-card, .step-card, .wd-tile, .panel, .bw-chart-panel, .wallet-section, .empty-card, .faq-item, .ltn-rule-box, .ltn-ref-stat-card, .ltn-promo-perk-card, .ltn-lb-prize-card, .ltn-gift-rule-item, .pet-arena-card, .legal-card, .cta-card, .signin-prompt, .leaderboard-mini-panel, .auth-card, .welcome-card) {
  background: color-mix(in srgb, var(--c, var(--c1)) 15%, var(--bt-white)) !important;
  border: 2px solid var(--bt-ink) !important; border-radius: 26px !important; box-shadow: var(--nb-sh) !important;
}
html body .wallet-section, html body .wallet-section > .panel:first-child { --c: var(--c2); }
html body :is(.task-card, .shortcut-card, .stat-card):hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--bt-ink) !important; }
/* nested = white */
html body :is(.rows-list, .bw-detail, .wd-summary, .wd-history-row, .bk-tile, .bk-field, .lbt, .dd-btn, .dd-menu, .ltn-checkin-card, .ltn-rule-mini-card, .leaderboard-mini-row, .duck-live-bar, .bw-check, .tk-reload, .pet-action-btn, .duck-ticker-time) { background: var(--bt-white) !important; border: 2px solid var(--bt-ink) !important; border-radius: 18px !important; box-shadow: none !important; }
html body :is(input, textarea, select) { background: var(--bt-white) !important; border: 2px solid var(--bt-ink) !important; border-radius: 16px !important; color: var(--bt-ink) !important; }
html body :is(input, textarea, select):focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c2) 35%, transparent) !important; border-color: var(--bt-ink) !important; }
html body :is(.panel, .wallet-section) :is(.panel) { background: var(--bt-white) !important; box-shadow: none !important; border-radius: 20px !important; }
html body td, html body th { background: transparent !important; }
html body :is(.wd-tile, .wd-tile span) { background: var(--bt-white) !important; color: var(--bt-ink) !important; }
html body .wd-tile { box-shadow: 0 4px 0 var(--bt-ink) !important; border-radius: 18px !important; }
html body .wd-tile:has(input:checked), html body .wd-tile:has(input:checked) span { background: var(--bt-ink) !important; color: var(--bt-bg) !important; }

/* ---- welcome + balance ---- */
html body #overview .welcome-card { --c: var(--c3); }
html body .nb-clock { background: var(--bt-white); border: 2px solid var(--bt-ink); box-shadow: 0 3px 0 var(--bt-ink); border-radius: 999px; }
html body .stat-card-balance { background: var(--bt-white) !important; border-radius: 26px !important; box-shadow: var(--nb-sh) !important; }
html body .stat-card-balance::before { border-radius: 24px 24px 0 0 !important; border-bottom: 2px solid var(--bt-ink) !important; }
html body .nb-sub { border: 2px solid var(--bt-ink); box-shadow: 0 4px 0 var(--bt-ink); border-radius: 20px; }
html body .nb-sub-a { background: #cdf2dd; } html body .nb-sub-b { background: #cfe4ff; }
html[data-theme="dark"] body .nb-sub-a { background: #14532d; } html[data-theme="dark"] body .nb-sub-b { background: #1e3a8a; }

/* ---- buttons: ink pills ---- */
html body :is(.primary-button, .task-card button, .task-card .tk-actions button, .task-card > button, .bw-submit, .primary-link, .login-button, #duck-btn-submit-bank, #duck-btn-submit-card, #duck-btn-submit-game, .ltn-checkin-main-btn, .ltn-boost-btn),
html body .wallet-section :is(#duck-btn-submit-bank, #duck-btn-submit-card, #duck-btn-submit-game) {
  background: var(--bt-ink) !important; color: var(--bt-bg) !important; border: 2px solid var(--bt-ink) !important; border-radius: 999px !important; box-shadow: 0 4px 0 color-mix(in srgb, var(--c2) 80%, #000) !important; font-weight: 800 !important; letter-spacing: .01em;
}
html body :is(.primary-button, .task-card button, .bw-submit, .primary-link):hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in srgb, var(--c2) 80%, #000) !important; }
html body :is(.primary-button, .task-card button, .bw-submit, .primary-link):active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c2) 80%, #000) !important; }
html body :is(.bw-submit, #duck-btn-submit-bank, #duck-btn-submit-card, #duck-btn-submit-game):disabled, html body .wallet-section :is(#duck-btn-submit-bank, #duck-btn-submit-card, #duck-btn-submit-game):disabled { background: color-mix(in srgb, var(--bt-ink) 14%, var(--bt-white)) !important; color: var(--bt-mute) !important; border-color: color-mix(in srgb, var(--bt-ink) 35%, transparent) !important; box-shadow: none !important; }
html body .tk-progress { background: var(--bt-white) !important; border: 2px solid var(--bt-ink) !important; height: 14px !important; border-radius: 999px !important; }
html body .tk-progress i { background: var(--c, var(--c2)) !important; border-radius: 999px; }

/* ---- pills, tags ---- */
html body :is(.ltn-task-boost-pill, .ltn-boost-status, .badge, [class*="status-pill"]) { background: var(--bt-white) !important; color: var(--bt-ink) !important; border: 2px solid var(--bt-ink) !important; border-radius: 999px !important; box-shadow: none !important; }
html body :is(.section-eyebrow, .eyebrow) { background: var(--bt-ink) !important; color: var(--bt-bg) !important; display: inline-block; padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important; }

/* ---- floating dock on mobile ---- */
html body .mono-tabbar { left: 12px !important; right: 12px !important; bottom: 12px !important; border: 2px solid var(--bt-ink) !important; border-radius: 999px !important; background: var(--bt-white) !important; box-shadow: var(--nb-sh) !important; }
html body .mono-tabbar a.is-active { background: var(--bt-ink) !important; color: var(--bt-bg) !important; border: 0 !important; border-radius: 999px !important; }
html body .mobile-topbar { background: var(--bt-bg) !important; border-bottom: 0 !important; }
html body .mono-theme-toggle { background: var(--bt-white) !important; border: 2px solid var(--bt-ink) !important; box-shadow: 0 3px 0 var(--bt-ink) !important; }
html body .leaderboard-hero { background: #fdeeb3 !important; border: 2px solid var(--bt-ink) !important; border-radius: 26px !important; box-shadow: var(--nb-sh) !important; }
html body .withdraw-lock-banner { background: #fdeeb3 !important; border-radius: 18px !important; }
html body, html body :is(.app-shell, .app-main, .main-content, .dashboard-main, main, .content, .app-layout) { background: var(--bt-bg) !important; background-image: none !important; }
html body .task-card .tk-rows > *, html body .task-card .rows-list, html body .task-card .rows-list > * { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
html body .task-card .tk-rows > *, html body .task-card .rows-list > * { border-bottom: 2px dashed color-mix(in srgb, var(--bt-ink) 25%, transparent) !important; }
html body :is(.ltn-booster-banner, .booster-banner, .ltn-boost-card) { background: #fdeeb3 !important; border: 2px solid var(--bt-ink) !important; border-radius: 26px !important; box-shadow: var(--nb-sh) !important; }
html body .ltn-boost-banner { background: #fdeeb3 !important; border: 2px solid var(--bt-ink) !important; border-radius: 26px !important; box-shadow: var(--nb-sh) !important; margin-bottom: 20px; }
html[data-theme="dark"] body .ltn-boost-banner { background: #3f3410 !important; }
html body .ltn-boost-banner :is(button, a) { border-radius: 999px !important; border: 2px solid var(--bt-ink) !important; }
html body .wallet-section { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html body .wallet-section > .panel { margin-bottom: 20px; }
html body .wallet-section > .panel:nth-of-type(2) { --c: var(--c4); } html body .wallet-section > .panel:nth-of-type(3) { --c: var(--c3); }
html[data-theme="dark"] body .nb-sub-a b { color: #6ee7b7 !important; } html[data-theme="dark"] body .nb-sub-b b { color: #93c5fd !important; }
html[data-theme="dark"] body .nav-link.is-active { background: var(--bt-ink) !important; }
html[data-theme="dark"] body .nav-link.is-active > span:first-child { background: transparent !important; }
@media (max-width: 1023px) {
  html body .sidebar { margin: 0 !important; top: 0 !important; height: 100vh !important; border-radius: 0 28px 28px 0 !important; }
  html body .sidebar:not(.is-open):not(.open) { border: 0 !important; box-shadow: none !important; }
}

/* =====================================================================
   v6 BLACK — true-black bento. Dark is the default theme.
   ===================================================================== */
html[data-theme="dark"] {
  --bt-bg:#08080a; --bt-ink:#f5f5f7; --bt-mute:#8e8e99; --bt-white:#131316;
  --nb-ink:#f5f5f7; --nb-sh:0 0 0 transparent;
  --c1:#5aa9ff; --c2:#34d399; --c3:#fbbf24; --c4:#22d3ee; --c5:#fb923c;
  --bg:#08080a; --ink:#f5f5f7; --mute:#8e8e99; --surface:#131316; --line:#26262b; --line2:#34343b;
}
html[data-theme="dark"] body { --edge:#2a2a30; }
html[data-theme="dark"] body, html[data-theme="dark"] body :is(.app-shell,.app-main,.main-content,main,.content,.app-layout) { background: #08080a !important; }
/* cards: near-black tile, hairline colored edge, soft colored glow */
html[data-theme="dark"] body :is(.stat-card:not(.stat-card-balance), .shortcut-card, .task-card, .feature-card, .step-card, .wd-tile, .panel, .bw-chart-panel, .empty-card, .faq-item, .ltn-rule-box, .ltn-ref-stat-card, .ltn-promo-perk-card, .ltn-lb-prize-card, .ltn-gift-rule-item, .pet-arena-card, .legal-card, .cta-card, .signin-prompt, .leaderboard-mini-panel, .auth-card, .welcome-card, .ltn-boost-banner) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--c1)) 11%, #121215) 0%, #0f0f12 70%) !important;
  border: 1px solid color-mix(in srgb, var(--c, var(--c1)) 38%, #2a2a30) !important; border-radius: 22px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 14px 30px -18px color-mix(in srgb, var(--c, var(--c1)) 55%, transparent) !important;
}
html[data-theme="dark"] body :is(.task-card, .shortcut-card, .stat-card):hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c, var(--c1)) 70%, #333) !important; box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--c, var(--c1)) 70%, transparent) !important; }
html[data-theme="dark"] body .wallet-section { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html[data-theme="dark"] body :is(.panel, .wallet-section) :is(.panel) { background: #0d0d10 !important; border: 1px solid #24242a !important; box-shadow: none !important; }
/* nested */
html[data-theme="dark"] body :is(.rows-list, .bw-detail, .wd-summary, .wd-history-row, .bk-tile, .bk-field, .lbt, .dd-btn, .dd-menu, .ltn-checkin-card, .ltn-rule-mini-card, .leaderboard-mini-row, .duck-live-bar, .bw-check, .tk-reload, .pet-action-btn, .duck-ticker-time) { background: #0c0c0f !important; border: 1px solid #26262c !important; border-radius: 16px !important; color: var(--bt-ink); }
html[data-theme="dark"] body :is(input, textarea, select) { background: #0c0c0f !important; border: 1px solid #2c2c33 !important; border-radius: 14px !important; color: #f5f5f7 !important; }
html[data-theme="dark"] body :is(input, textarea, select):focus { border-color: var(--c2) !important; box-shadow: 0 0 0 3px rgba(52,211,153,.18) !important; }
html[data-theme="dark"] body :is(.wd-tile, .wd-tile span) { background: #0c0c0f !important; color: #f5f5f7 !important; }
html[data-theme="dark"] body .wd-tile { border: 1px solid #2c2c33 !important; border-radius: 14px !important; box-shadow: none !important; }
html[data-theme="dark"] body .wd-tile:has(input:checked), html[data-theme="dark"] body .wd-tile:has(input:checked) span { background: #f5f5f7 !important; color: #08080a !important; }
html[data-theme="dark"] body .task-card .tk-rows > *, html[data-theme="dark"] body .task-card .rows-list > * { border-bottom: 1px dashed #2a2a31 !important; }
/* sidebar */
html[data-theme="dark"] body .sidebar { background: #0d0d10 !important; border: 1px solid #25252b !important; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9) !important; }
html[data-theme="dark"] body .sidebar-wallet { background: linear-gradient(135deg,#064e3b,#0d0d10 80%) !important; border: 1px solid #1f6f56 !important; box-shadow: none !important; }
html[data-theme="dark"] body .sidebar-wallet * { color: #ecfdf5 !important; }
html[data-theme="dark"] body .nav-link.is-active, html[data-theme="dark"] body .nav-sub-link.is-active { background: #f5f5f7 !important; color: #08080a !important; border-color: #f5f5f7 !important; }
html[data-theme="dark"] body .nav-link.is-active *:not(svg):not(path), html[data-theme="dark"] body .nav-sub-link.is-active * { color: #08080a !important; }
html[data-theme="dark"] body .nav-link.is-active > span:first-child svg { color: #08080a !important; stroke: #08080a !important; }
html[data-theme="dark"] body .nav-link:hover, html[data-theme="dark"] body .nav-sub-link:hover { background: rgba(255,255,255,.06) !important; }
/* buttons: white pill */
html[data-theme="dark"] body :is(.primary-button, .task-card button, .task-card .tk-actions button, .task-card > button, .bw-submit, .primary-link, .login-button, #duck-btn-submit-bank, #duck-btn-submit-card, #duck-btn-submit-game, .ltn-checkin-main-btn, .ltn-boost-btn),
html[data-theme="dark"] body .wallet-section :is(#duck-btn-submit-bank, #duck-btn-submit-card, #duck-btn-submit-game) {
  background: #f5f5f7 !important; color: #08080a !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 6px 22px -6px color-mix(in srgb, var(--c, var(--c2)) 70%, transparent) !important; font-weight: 800 !important;
}
html[data-theme="dark"] body :is(.primary-button, .task-card button, .bw-submit, .primary-link):hover:not(:disabled) { background: #fff !important; box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--c, var(--c2)) 85%, transparent) !important; transform: translateY(-2px); }
html[data-theme="dark"] body :is(.bw-submit, #duck-btn-submit-bank, #duck-btn-submit-card, #duck-btn-submit-game):disabled, html[data-theme="dark"] body .wallet-section :is(#duck-btn-submit-bank, #duck-btn-submit-card, #duck-btn-submit-game):disabled { background: #1c1c21 !important; color: #6f6f7a !important; box-shadow: none !important; }
html[data-theme="dark"] body .tk-progress { background: #0c0c0f !important; border: 1px solid #2a2a31 !important; height: 10px !important; }
html[data-theme="dark"] body .tk-progress i { background: linear-gradient(90deg, var(--c, var(--c2)), color-mix(in srgb, var(--c, var(--c2)) 55%, #fff)) !important; }
html[data-theme="dark"] body :is(.ltn-task-boost-pill, .ltn-boost-status, .badge, [class*="status-pill"]) { background: rgba(255,255,255,.06) !important; color: #e9e9ee !important; border: 1px solid #34343b !important; }
html[data-theme="dark"] body :is(.section-eyebrow, .eyebrow) { background: rgba(52,211,153,.12) !important; color: #34d399 !important; border: 1px solid rgba(52,211,153,.35) !important; }
/* home */
html[data-theme="dark"] body .nb-clock { background: #0d0d10; border: 1px solid #2a2a31; box-shadow: none; }
html[data-theme="dark"] body .stat-card-balance { background: #0d0d10 !important; border: 1px solid #26262c !important; box-shadow: 0 30px 60px -30px rgba(52,211,153,.35) !important; border-radius: 22px !important; }
html[data-theme="dark"] body .stat-card-balance::before { background-color: #17171b !important; border-bottom: 1px solid #26262c !important; color: #9a9aa6; }
html[data-theme="dark"] body .nb-sub { border: 1px solid #2a2a31; box-shadow: none; border-radius: 16px; }
html[data-theme="dark"] body .nb-sub-a { background: linear-gradient(160deg, rgba(52,211,153,.16), #0d0d10 80%); }
html[data-theme="dark"] body .nb-sub-b { background: linear-gradient(160deg, rgba(90,169,255,.16), #0d0d10 80%); }
html[data-theme="dark"] body .nb-subboxes { border-top-color: #2a2a31; }
/* dock / toggles */
html[data-theme="dark"] body .mono-tabbar { background: rgba(19,19,22,.92) !important; border: 1px solid #2a2a31 !important; box-shadow: 0 16px 40px -10px #000 !important; backdrop-filter: blur(14px); }
html[data-theme="dark"] body .mono-tabbar a.is-active { background: #f5f5f7 !important; color: #08080a !important; }
html[data-theme="dark"] body .mono-theme-toggle { background: #131316 !important; border: 1px solid #2a2a31 !important; box-shadow: none !important; color: #f5f5f7; }
html[data-theme="dark"] body .leaderboard-hero, html[data-theme="dark"] body .withdraw-lock-banner { background: linear-gradient(135deg, rgba(251,191,36,.16), #0d0d10) !important; border: 1px solid rgba(251,191,36,.4) !important; box-shadow: none !important; }
html[data-theme="dark"] body .ltn-boost-banner { --c: var(--c3); }
html[data-theme="dark"] body h1, html[data-theme="dark"] body h2, html[data-theme="dark"] body h3 { color: #f5f5f7; }
html[data-theme="dark"] body :is(td, th) { background: transparent !important; color: #e4e4ea; }
html[data-theme="dark"] body :is(.leaderboard-rank, .leaderboard-tasks, .leaderboard-income, .podium-rank, .bw-chart, .withdraw-lock-icon, .pet-speech-bubble) { background: #0c0c0f !important; border-color: #26262c !important; }
html[data-theme="dark"] body #overview .welcome-card { border: 1px solid color-mix(in srgb, var(--c3) 40%, #2a2a30) !important; box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c3) 55%, transparent) !important; }
html[data-theme="dark"] body :is(.nav-link > span:first-child, .shortcut-card > span:first-child, .tk-icon, .feature-icon, .prompt-icon, .ltn-rule-mini-icon, .ltn-ref-svg-badge, .ltn-promo-perk-svg) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html[data-theme="dark"] body .nav-link.is-active > span:first-child { background: transparent !important; }

/* =====================================================================
   v7: theme toggle on top, heading cards, hatch / dashed "vân" patterns
   ===================================================================== */
@media (min-width: 1024px) {
  html body .mono-theme-toggle { top: 20px !important; right: 26px !important; bottom: auto !important; left: auto !important; width: 46px; height: 46px; }
}
/* --- canvas: dashed line grid --- */
html:not([data-theme="dark"]) body {
  background-color: #f4efe6 !important;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 7px, #f4efe6 7px 13px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(23,24,28,.10) 39px 40px) !important;
}
html[data-theme="dark"] body {
  background-color: #08080a !important;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 7px, #08080a 7px 13px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.06) 39px 40px) !important;
}
html body :is(.app-shell, .app-main, .main-content, .dashboard-main, main, .content, .app-layout) { background: transparent !important; }
html[data-theme="dark"] body :is(.app-shell, .app-main, .main-content, main, .content, .app-layout) { background: transparent !important; }

/* --- hatch ribbon on top of every card --- */
html:not([data-theme="dark"]) body :is(.stat-card:not(.stat-card-balance), .shortcut-card, .task-card, .feature-card, .step-card, .panel, .bw-chart-panel, .ltn-rule-box, .ltn-ref-stat-card, .ltn-promo-perk-card, .ltn-lb-prize-card, .ltn-gift-rule-item, .pet-arena-card, .legal-card, .cta-card, .welcome-card, .ltn-boost-banner, .section-heading, .empty-card) {
  background:
    color-mix(in srgb, var(--c, var(--c1)) 15%, #fff) !important;
}
html[data-theme="dark"] body :is(.stat-card:not(.stat-card-balance), .shortcut-card, .task-card, .feature-card, .step-card, .panel, .bw-chart-panel, .ltn-rule-box, .ltn-ref-stat-card, .ltn-promo-perk-card, .ltn-lb-prize-card, .ltn-gift-rule-item, .pet-arena-card, .legal-card, .cta-card, .welcome-card, .ltn-boost-banner, .section-heading, .empty-card) {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--c, var(--c1)) 11%, #121215) 0%, #0f0f12 70%) !important;
}
/* nested panels keep plain (no ribbon) */
html body :is(.panel, .wallet-section) .panel { background-image: none !important; }
html:not([data-theme="dark"]) body :is(.panel, .wallet-section) .panel { background: #fff !important; }
html[data-theme="dark"] body :is(.panel, .wallet-section) .panel { background: #0d0d10 !important; }
html body .task-card, html body .shortcut-card, html body .stat-card:not(.stat-card-balance) { padding-top: 22px !important; }

/* --- heading blocks become cards --- */
html body .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px !important; padding: 24px 22px 14px !important; border-radius: 22px !important; --c: var(--c2); border: 2px solid var(--bt-ink) !important; box-shadow: var(--nb-sh) !important; }
html[data-theme="dark"] body .section-heading { border: 1px solid color-mix(in srgb, var(--c) 40%, #2a2a30) !important; box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c) 55%, transparent) !important; }
html body .section-heading h2 { margin: 2px 0 !important; font-size: clamp(18px,2vw,24px) !important; }
html body .section-heading p { margin: 0 !important; }
html body .section-heading h2::before { content: none !important; }

/* --- dashed "vân" accents --- */
html body main h1 { padding-bottom: 12px; background: repeating-linear-gradient(90deg, var(--bt-ink) 0 10px, transparent 10px 18px) left bottom / min(100%, 260px) 3px no-repeat; margin-bottom: 18px !important; }
html body .panel-heading { padding-bottom: 12px; margin-bottom: 14px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--bt-ink) 35%, transparent) 0 8px, transparent 8px 14px) left bottom / 100% 2px no-repeat; border-bottom: 0 !important; }
html body .panel-heading::after { display: none !important; }
html body .panel-heading h3::before, html body .section-heading h2::after { display: none !important; }
html body .sidebar-brand { padding-bottom: 14px; }
html body .stat-card-balance::before { background-image: radial-gradient(circle at 18px 20px,#ef4444 6px,transparent 7px), radial-gradient(circle at 40px 20px,#f59e0b 6px,transparent 7px), radial-gradient(circle at 62px 20px,#10b981 6px,transparent 7px) !important; }
html body .nb-subboxes { border-top: 0 !important; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--bt-ink) 35%, transparent) 0 10px, transparent 10px 18px) top / 100% 2px no-repeat; padding-top: 22px !important; }
html body .task-card .tk-rows > * { border-bottom: 2px dashed color-mix(in srgb, var(--bt-ink) 22%, transparent) !important; }

/* =====================================================================
   v8 CONSOLIDATION — consistent tiles, ribbons only on top-level cards
   ===================================================================== */
/* sidebar: nav scrolls, user box pinned */
html body .sidebar { overflow: hidden !important; }
html body .sidebar > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
html body .sidebar > nav::-webkit-scrollbar { width: 6px; } html body .sidebar > nav::-webkit-scrollbar-thumb { background: rgba(128,128,128,.35); border-radius: 6px; }
html body .sidebar > .sidebar-brand-row, html body .sidebar > .sidebar-wallet, html body .sidebar > .sidebar-footer, html body .sidebar > :last-child { flex-shrink: 0; }

/* wallet pages: top-level panels are real tiles too */
html:not([data-theme="dark"]) body .wallet-section > .panel {
  background: color-mix(in srgb, var(--c) 15%, #fff) !important;
  border: 2px solid var(--bt-ink) !important; box-shadow: var(--nb-sh) !important; border-radius: 26px !important; padding-top: 24px;
}
html[data-theme="dark"] body .wallet-section > .panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 11%, #121215) 0%, #0f0f12 70%) !important;
  border: 1px solid color-mix(in srgb, var(--c) 38%, #2a2a30) !important; border-radius: 22px !important; padding-top: 24px;
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c) 55%, transparent) !important;
}
html body .wallet-section > .panel:nth-of-type(1) { --c: var(--c2); } html body .wallet-section > .panel:nth-of-type(2) { --c: var(--c1); }
html body .wallet-section > .panel:nth-of-type(3) { --c: var(--c3); } html body .wallet-section > .panel:nth-of-type(4) { --c: var(--c4); }

/* nested items: plain (no ribbon, no glow) */
html:not([data-theme="dark"]) body :is(.empty-card, .ltn-gift-rule-item, .ltn-rule-mini-card, .panel .ltn-ref-stat-card) { background: #fff !important; box-shadow: none !important; border-radius: 18px !important; border-width: 2px !important; }
html[data-theme="dark"] body :is(.empty-card, .ltn-gift-rule-item, .ltn-rule-mini-card, .panel .ltn-ref-stat-card) { background: #0c0c0f !important; box-shadow: none !important; border: 1px solid color-mix(in srgb, var(--c, var(--c1)) 30%, #26262c) !important; border-radius: 16px !important; }
/* small tiles: slim ribbon */
html body :is(.shortcut-card, .stat-card:not(.stat-card-balance)) { padding-top: 18px !important; }
html:not([data-theme="dark"]) body :is(.shortcut-card, .stat-card:not(.stat-card-balance)) {  }
html[data-theme="dark"] body :is(.shortcut-card, .stat-card:not(.stat-card-balance)) {  }

/* wallet pages: panels live in .wallet-main / .wallet-layout columns */
html:not([data-theme="dark"]) body :is(.wallet-main, .wallet-side, .wallet-col, .withdraw-col-right) > .panel {
  background: color-mix(in srgb, var(--c) 15%, #fff) !important;
  border: 2px solid var(--bt-ink) !important; box-shadow: var(--nb-sh) !important; border-radius: 26px !important; padding-top: 26px !important;
}
html[data-theme="dark"] body :is(.wallet-main, .wallet-side, .wallet-col, .withdraw-col-right) > .panel {
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 11%, #121215) 0%, #0f0f12 70%) !important;
  border: 1px solid color-mix(in srgb, var(--c) 38%, #2a2a30) !important; border-radius: 22px !important; padding-top: 26px !important;
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c) 55%, transparent) !important;
}
html body :is(.wallet-main, .wallet-side, .wallet-col, .withdraw-col-right) > .panel:nth-child(4n+1) { --c: var(--c2); }
html body :is(.wallet-main, .wallet-side, .wallet-col, .withdraw-col-right) > .panel:nth-child(4n+2) { --c: var(--c1); }
html body :is(.wallet-main, .wallet-side, .wallet-col, .withdraw-col-right) > .panel:nth-child(4n+3) { --c: var(--c3); }
html body :is(.wallet-main, .wallet-side, .wallet-col, .withdraw-col-right) > .panel:nth-child(4n+4) { --c: var(--c4); }
/* selected tile: force readable text on every child */
html[data-theme="dark"] body .wd-tile:has(input:checked) * { color: #08080a !important; }
html:not([data-theme="dark"]) body .wd-tile:has(input:checked) * { color: #f4efe6 !important; }
html body .wallet-main > .panel.bw-stats { --c: var(--c2) !important; }
html body .wallet-main > .panel.bw-chart-panel { --c: var(--c1) !important; }
html body .wallet-main > .panel.bw-form { --c: var(--c3) !important; }
html body .wallet-main > .panel:not(.bw-stats):not(.bw-chart-panel):not(.bw-form) { --c: var(--c4) !important; }
html:not([data-theme="dark"]) body .duck-live-bar { background: #fff !important; border: 2px solid var(--bt-ink) !important; }
html body main, html body .content-section { padding-bottom: 28px; }
html body .wallet-section { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html:not([data-theme="dark"]) body section.wallet-section.content-section, html[data-theme="dark"] body section.wallet-section.content-section { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; padding-top: 0 !important; }

/* active nav (PC): no filled pill — just strong ink text */
@media (min-width: 1024px) {
  html body .sidebar .nav-link.is-active, html body .sidebar .nav-sub-link.is-active,
  html[data-theme="dark"] body .sidebar .nav-link.is-active, html[data-theme="dark"] body .sidebar .nav-sub-link.is-active {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important; border-radius: 16px !important;
    color: var(--bt-ink) !important; font-weight: 900 !important;
  }
  html body .sidebar .nav-link.is-active *:not(svg):not(path), html body .sidebar .nav-sub-link.is-active *,
  html[data-theme="dark"] body .sidebar .nav-link.is-active *:not(svg):not(path), html[data-theme="dark"] body .sidebar .nav-sub-link.is-active * { color: var(--bt-ink) !important; }
  html body .sidebar .nav-link.is-active > span:first-child svg, html[data-theme="dark"] body .sidebar .nav-link.is-active > span:first-child svg { color: var(--c, var(--bt-ink)) !important; stroke: var(--c, var(--bt-ink)) !important; }
}

/* selected options: emerald tint + emerald edge, NEVER a black/white fill */
html body :is(.wd-tile:has(input:checked), .bk-item.is-current, .bk-field.is-selected, .lbt-item.is-selected, .q-chip.is-active, .q-chip.active, .q-chip.selected, .w-tab-btn.is-active, .w-tab-btn.active, .filter-btn.active, .filter-btn.is-active, .bank-chip.selected, .bank-chip.is-active, .denom-box.selected, .denom-box.is-selected, .telco-card-box.selected, .telco-card-box.is-selected, .vtab-item.active) {
  background: #d1fae5 !important; border: 2px solid #10b981 !important; color: #064e3b !important; box-shadow: 0 0 0 3px rgba(16,185,129,.18) !important; transform: none !important;
}
html body .wd-tile:has(input:checked) *, html:not([data-theme="dark"]) body .wd-tile:has(input:checked) *, html[data-theme="dark"] body .wd-tile:has(input:checked) * { background: transparent !important; color: #064e3b !important; }
html[data-theme="dark"] body :is(.wd-tile:has(input:checked), .bk-item.is-current, .bk-field.is-selected, .lbt-item.is-selected, .q-chip.is-active, .q-chip.active, .q-chip.selected, .w-tab-btn.is-active, .w-tab-btn.active, .filter-btn.active, .filter-btn.is-active, .bank-chip.selected, .bank-chip.is-active, .denom-box.selected, .denom-box.is-selected, .telco-card-box.selected, .telco-card-box.is-selected, .vtab-item.active) {
  background: rgba(16,185,129,.16) !important; border-color: #34d399 !important; color: #d1fae5 !important; box-shadow: 0 0 0 3px rgba(52,211,153,.14) !important;
}
html[data-theme="dark"] body .wd-tile:has(input:checked) *, html[data-theme="dark"] body .wd-tile:has(input:checked) strong { color: #d1fae5 !important; }