:root {
  color-scheme: dark;
  --bg: #07090f;
  --surface: rgba(18, 22, 34, .78);
  --surface-strong: #151a27;
  --surface-soft: rgba(35, 42, 61, .66);
  --line: rgba(255, 255, 255, .1);
  --line-gold: rgba(225, 181, 61, .35);
  --text: #f8f9fc;
  --muted: #9da7ba;
  --gold: #d7ad36;
  --gold-bright: #ffe29a;
  --gold-dark: #876312;
  --violet: #9d8cff;
  --cyan: #66d9ff;
  --green: #64e5a2;
  --danger: #ff7187;
  --shadow: 0 22px 60px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 12% -8%, rgba(204, 157, 42, .2), transparent 32%), radial-gradient(circle at 100% 15%, rgba(86, 95, 211, .16), transparent 31%), var(--bg);
  color: var(--text);
  font-family: Vazir, Tahoma, Arial, sans-serif;
}
body::before, body::after { content: ''; position: fixed; z-index: -1; width: 280px; height: 280px; border-radius: 50%; filter: blur(90px); opacity: .28; pointer-events: none; }
body::before { top: 18%; right: -130px; background: #6256c8; }
body::after { bottom: 6%; left: -140px; background: #b38218; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.shell { width: min(760px, 100%); min-height: 100vh; margin: auto; padding: 18px 14px 108px; }
.loading { padding-top: 38vh; color: var(--gold-bright); text-align: center; font-size: 13px; }
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.topbar { display: flex; align-items: center; gap: 10px; min-height: 58px; margin-bottom: 18px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 224, 128, .38); border-radius: 15px; color: var(--gold-bright); background: linear-gradient(145deg, rgba(244, 197, 75, .25), rgba(107, 73, 7, .2)); box-shadow: 0 10px 35px rgba(215, 173, 54, .18), inset 0 1px rgba(255, 255, 255, .15); }
.top-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(255, 224, 128, .45); border-radius: 14px; color: #1d1607; font-weight: 900; background: linear-gradient(135deg, #ffe398, #aa7915); box-shadow: 0 8px 25px rgba(212, 165, 33, .22); }
.top-user h1 { margin: 0 0 2px; font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.top-user small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.top-actions { display: flex; gap: 7px; margin-inline-start: auto; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(27, 32, 47, .72); cursor: pointer; transition: .2s ease; }
.icon-btn:hover, .icon-btn:focus-visible { color: var(--gold-bright); border-color: var(--line-gold); background: rgba(55, 49, 29, .76); transform: translateY(-2px); }
.icon-btn.small { width: 30px; height: 30px; border-radius: 9px; }
.role-pill, .tag, .chance-pill, .rank { display: inline-flex; align-items: center; gap: 4px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 999px; padding: 4px 9px; color: var(--muted); background: rgba(255, 255, 255, .06); font-size: 10px; white-space: nowrap; }
.role-pill { margin-right: 4px; padding: 2px 7px; color: var(--gold-bright); border-color: var(--line-gold); background: rgba(217, 175, 54, .1); }
.tab { display: none; animation: rise .35s ease both; }
.tab.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hero, .card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: linear-gradient(145deg, rgba(24, 29, 44, .9), rgba(12, 15, 24, .82)); box-shadow: var(--shadow); }
.card { margin: 12px 0; padding: 17px; }
.balance-card { padding: 21px; border-color: rgba(235, 195, 84, .32); background: radial-gradient(circle at 90% 0, rgba(221, 177, 44, .2), transparent 38%), linear-gradient(145deg, #292514, #11141f 72%); }
.hero-glow { position: absolute; top: -68px; left: -38px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 224, 120, .15); filter: blur(16px); pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: var(--gold-bright); font-size: 12px; }
.balance-line { display: flex; align-items: baseline; gap: 8px; margin: 11px 0 6px; }
.balance-line strong { color: #fff3c9; font-size: clamp(27px, 7vw, 38px); font-weight: 900; letter-spacing: -1px; text-shadow: 0 4px 24px rgba(240, 197, 76, .25); }
.balance-line span { color: var(--gold); font-size: 10px; font-weight: 800; }
.balance-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 10px 15px; border: 1px solid transparent; border-radius: 13px; color: var(--text); background: rgba(61, 69, 91, .72); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(0, 0, 0, .22); }
.btn.gold { color: #211806; font-weight: 900; border-color: rgba(255, 232, 154, .42); background: linear-gradient(135deg, #ffe49a, #b88417); box-shadow: 0 9px 24px rgba(207, 157, 29, .2); }
.btn.ghost { border-color: var(--line); color: #e1e6f3; background: rgba(255, 255, 255, .06); }
.btn.success { color: #071a11; border-color: rgba(133, 255, 196, .3); background: linear-gradient(135deg, #87f1b6, #2eaa72); }
.btn.danger { background: linear-gradient(135deg, #ff8395, #b72e4b); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 12px 0; }
.metric { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 13px 7px 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(25, 31, 47, .66); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.metric strong { font-size: 19px; color: #fff; line-height: 1.1; }
.metric small, .card-heading small, .task-top small, .history-row small { color: var(--muted); font-size: 10px; }
.icon-badge { display: inline-grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.icon-badge.amber { color: #ffd978; background: rgba(217, 164, 31, .16); }
.icon-badge.violet { color: #c0b6ff; background: rgba(120, 99, 255, .17); }
.icon-badge.cyan { color: var(--cyan); background: rgba(47, 183, 230, .15); }
.icon-badge.green { color: var(--green); background: rgba(54, 196, 127, .15); }
.icon-badge.blue { color: #8fc8ff; background: rgba(65, 139, 226, .16); }
.card-heading, .section-heading, .task-top { display: flex; align-items: center; gap: 10px; }
.card-heading h3, .section-heading h2, .task-top h3 { margin: 0; font-size: 14px; }
.card-heading small, .section-heading p { display: block; margin: 3px 0 0; }
.section-heading { margin: 18px 4px 10px; }
.section-heading h2 { color: var(--gold-bright); font-size: 20px; }
.section-heading p { color: var(--muted); font-size: 11px; }
.section-heading .chance-pill { margin-inline-start: auto; color: var(--gold-bright); border-color: var(--line-gold); background: rgba(217, 173, 54, .1); }
.cyan-pill { color: var(--cyan) !important; border-color: rgba(102, 217, 255, .3) !important; background: rgba(53, 181, 218, .1) !important; }
.referral-card { background: linear-gradient(145deg, rgba(26, 39, 45, .88), rgba(13, 20, 29, .82)); }
.rank { margin-inline-start: auto; color: var(--gold-bright); border-color: var(--line-gold); }
.referral-link { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 14px; padding: 10px 11px; border: 1px dashed rgba(112, 223, 170, .3); border-radius: 13px; color: #b8f8d5; background: rgba(83, 205, 145, .08); direction: ltr; }
.referral-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.referral-link .icon-btn { margin-inline-start: auto; color: var(--green); }
.channel-row, .history-row { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; }
.channel-row:first-of-type { margin-top: 13px; }
.tag.ok, .status-approved, .status-paid { color: var(--green); border-color: rgba(100, 229, 162, .3); background: rgba(100, 229, 162, .1); }
.status-pending { color: var(--gold-bright); border-color: var(--line-gold); background: rgba(217, 173, 54, .1); }
.status-rejected, .danger-tag { color: var(--danger); border-color: rgba(255, 113, 135, .3); background: rgba(255, 113, 135, .1); }
.form-card label { display: block; margin: 5px 0 6px; color: #e6eaf4; font-size: 12px; }
.input, .input-wrap { width: 100%; border: 1px solid var(--line); border-radius: 13px; color: #fff; background: rgba(4, 7, 13, .56); }
.input { display: block; margin: 6px 0 11px; padding: 12px 13px; outline: none; }
.input:focus { border-color: rgba(224, 182, 59, .7); box-shadow: 0 0 0 3px rgba(224, 182, 59, .1); }
.input-wrap { display: flex; align-items: center; margin: 6px 0 4px; padding-left: 13px; }
.input-wrap .input { margin: 0; border: 0; background: transparent; box-shadow: none; }
.input-wrap span { color: var(--gold); font-size: 10px; white-space: nowrap; }
.hint, .game-note { display: block; color: var(--muted); font-size: 10px; }
.hint { margin: -2px 0 15px; }
.game-card { padding: 19px 16px 17px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(217, 173, 54, .12), transparent 43%), linear-gradient(145deg, rgba(25, 30, 47, .9), rgba(12, 15, 24, .88)); }
.game-note { margin: 2px 0 14px; }
.result-box { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-top: 12px; color: #e9edfa; text-align: right; }
.result-box strong, .result-box small { display: block; }
.result-box strong { font-size: 13px; }
.result-box small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.result-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: var(--gold-bright); background: rgba(217, 173, 54, .16); }
.result-icon.cyan { color: var(--cyan); background: rgba(102, 217, 255, .13); }
.loading-inline { padding: 24px 8px; color: var(--muted); text-align: center; font-size: 11px; }
.empty { padding: 24px 8px; color: var(--muted); text-align: center; font-size: 12px; }
.coming-card { padding: 43px 20px; text-align: center; }
.coming-icon { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 17px; border: 1px solid rgba(157, 140, 255, .3); border-radius: 28px; color: var(--violet); background: rgba(120, 99, 255, .13); box-shadow: 0 0 45px rgba(120, 99, 255, .18); }
.coming-card h3 { margin: 0; font-size: 18px; }
.coming-card p { margin: 8px auto 15px; max-width: 320px; color: var(--muted); font-size: 12px; line-height: 2; }
.task-card { padding: 15px; }
.task-top { align-items: flex-start; }
.task-top > div { flex: 1; min-width: 0; }
.task-top strong { color: var(--gold-bright); font-size: 12px; white-space: nowrap; }
.task-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--green); background: rgba(100, 229, 162, .12); }
.task-card p { margin: 11px 0 13px; line-height: 1.9; }
.nav { position: fixed; right: 50%; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); width: min(760px, 100%); padding: 9px 9px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 21px 21px 0 0; background: rgba(9, 12, 20, .86); box-shadow: 0 -18px 46px rgba(0, 0, 0, .27); backdrop-filter: blur(20px); transform: translateX(50%); }
.nav button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 3px 2px; border: 0; color: #778199; background: transparent; cursor: pointer; font-size: 10px; transition: .2s ease; }
.nav button span { display: grid; place-items: center; width: 38px; height: 28px; border-radius: 11px; }
.nav button.active, .nav button:hover { color: var(--gold-bright); }
.nav button.active span { background: rgba(217, 173, 54, .14); box-shadow: inset 0 0 0 1px rgba(217, 173, 54, .2); }
.toast { position: fixed; top: 15px; right: 50%; z-index: 50; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 28px); padding: 11px 15px; border: 1px solid var(--line-gold); border-radius: 14px; color: #fff2c8; background: rgba(25, 24, 18, .94); box-shadow: 0 15px 36px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transform: translate(50%, -14px); transition: .25s ease; font-size: 11px; }
.toast.show { opacity: 1; transform: translate(50%, 0); }
.toast.error { color: #ffd0d8; border-color: rgba(255,113,135,.45); background: rgba(45,17,26,.95); }
.toast.success { color: #c8ffdf; border-color: rgba(100,229,162,.4); background: rgba(12,40,29,.95); }

/* Animated prize wheel */
.wheel-stage { position: relative; display: grid; place-items: center; min-height: 312px; padding-top: 13px; }
.wheel { position: relative; width: min(286px, 78vw); aspect-ratio: 1; border: 9px solid #a87918; border-radius: 50%; background: var(--wheel-gradient); box-shadow: 0 0 0 5px rgba(255, 226, 140, .08), 0 0 0 12px rgba(18, 19, 28, .85), 0 22px 40px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.24); transform: rotate(var(--rotation, 0deg)); transition: transform 5s cubic-bezier(.12,.78,.16,1); }
.wheel::before { content: ''; position: absolute; inset: 7px; border: 1px dashed rgba(255, 240, 183, .58); border-radius: 50%; box-shadow: inset 0 0 0 12px rgba(0,0,0,.08); }
.wheel::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.18) 0 .7deg, transparent .7deg calc(360deg / var(--wheel-segments))); mix-blend-mode: screen; pointer-events: none; }
.wheel.spinning { animation: wheelGlow 1s ease-in-out infinite alternate; }
@keyframes wheelGlow { from { box-shadow: 0 0 0 5px rgba(255,226,140,.08), 0 0 0 12px rgba(18,19,28,.85), 0 22px 40px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.24); } to { box-shadow: 0 0 0 5px rgba(255,226,140,.35), 0 0 0 12px rgba(18,19,28,.85), 0 0 46px rgba(226,176,46,.44), inset 0 0 0 2px rgba(255,255,255,.4); } }
.wheel-label { position: absolute; top: 50%; left: 50%; width: 72px; overflow: hidden; color: #fff6d2; font-size: 10px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-95px) rotate(var(--counter-angle)); text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.wheel-pointer { position: absolute; top: 2px; z-index: 3; display: grid; place-items: center; width: 39px; height: 45px; border: 1px solid rgba(255,233,152,.5); border-radius: 12px 12px 16px 16px; color: #211706; background: linear-gradient(#ffe9a8, #be8c21); box-shadow: 0 7px 15px rgba(0,0,0,.36); transform: rotate(90deg); }
.wheel-pointer .icon { transform: rotate(90deg); }
.wheel-hub { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 68px; height: 68px; border: 5px solid #eac65d; border-radius: 50%; color: #fff1b3; background: radial-gradient(circle at 35% 28%, #fff1af, #bc861b 34%, #543c0a 100%); box-shadow: 0 5px 14px rgba(0,0,0,.4), inset 0 0 0 4px rgba(33,24,7,.55); transform: translate(-50%, -50%); }

/* 3D dice */
.dice-stage { display: flex; justify-content: center; gap: 56px; min-height: 198px; padding: 25px 0 12px; perspective: 850px; }
.die-wrap { display: grid; place-items: center; width: 105px; height: 105px; perspective: 650px; }
.dice-cube { position: relative; width: 84px; height: 84px; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg); transition: transform .85s cubic-bezier(.2,.8,.2,1); }
.dice-cube.rolling { animation: diceRoll 1s linear infinite; }
@keyframes diceRoll { 0% { transform: rotateX(0) rotateY(0) rotateZ(0); } 35% { transform: rotateX(160deg) rotateY(210deg) rotateZ(50deg) translateY(-10px); } 70% { transform: rotateX(320deg) rotateY(410deg) rotateZ(130deg) translateY(6px); } 100% { transform: rotateX(520deg) rotateY(580deg) rotateZ(220deg); } }
.cube-face { position: absolute; display: block; width: 84px; height: 84px; border: 2px solid rgba(255, 229, 143, .62); border-radius: 17px; background: linear-gradient(145deg, #fff1bb, #c79121 72%, #79540e); box-shadow: inset 0 0 0 5px rgba(75, 47, 4, .15); backface-visibility: hidden; }
.cube-face.front { transform: translateZ(42px); }
.cube-face.back { transform: rotateY(180deg) translateZ(42px); }
.cube-face.right { transform: rotateY(90deg) translateZ(42px); }
.cube-face.left { transform: rotateY(-90deg) translateZ(42px); }
.cube-face.top { transform: rotateX(90deg) translateZ(42px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(42px); }
.pips { position: absolute; inset: 12px; }
.pip { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #342305; box-shadow: inset 2px 2px 3px rgba(255,246,189,.27), 0 2px 3px rgba(0,0,0,.28); transform: translate(-50%, -50%); }
.pip.tl { top: 18%; left: 18%; }.pip.tr { top: 18%; left: 82%; }.pip.ml { top: 50%; left: 18%; }.pip.mr { top: 50%; left: 82%; }.pip.bl { top: 82%; left: 18%; }.pip.br { top: 82%; left: 82%; }.pip.c { top: 50%; left: 50%; }

.history-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-row strong, .history-row small { display: block; }
.history-row strong { color: #e9ecf8; font-size: 12px; }
.history-row small { margin-top: 3px; }
.admin-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.admin-stat { padding: 12px 8px; border: 1px solid var(--line); border-radius: 15px; text-align: center; background: rgba(25,31,47,.66); }
.admin-stat span, .admin-stat strong, .admin-stat small { display: block; }
.admin-stat span { color: var(--gold-bright); }.admin-stat strong { margin-top: 7px; font-size: 16px; }.admin-stat small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.admin-panel { padding: 13px; }.admin-panel .actions { margin: 0 0 12px; }.admin-panel .btn { min-height: 37px; padding: 8px 10px; font-size: 11px; }
.admin-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); }.admin-tabs .btn { min-height:34px; padding:7px 9px; font-size:10px; }.admin-form-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; align-items:center; margin-bottom:12px; }.admin-form-row .input { margin:0; }.admin-form-row .btn { min-height:40px; }.admin-subtitle { display:flex; align-items:center; justify-content:space-between; margin:15px 0 8px; color:var(--gold-bright); font-size:12px; font-weight:800; }.admin-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.admin-detail-grid .admin-stat { min-height:67px; }.admin-detail-grid .admin-stat strong { color:var(--gold-bright); }.table td small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.settings-form { padding-top: 2px; }.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }.settings-grid label { display: block; color: #e6eaf4; font-size: 11px; }.settings-grid .input { margin: 5px 0 2px; }.full-setting { grid-column: 1 / -1; }.settings-note { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid rgba(102, 217, 255, .18); border-radius: 12px; color: #b4eaff; background: rgba(102, 217, 255, .07); font-size: 10px; line-height: 1.8; }
.table-wrap { overflow-x: auto; }.table { width: 100%; border-collapse: collapse; font-size: 11px; }.table th, .table td { padding: 10px 7px; border-bottom: 1px solid rgba(255,255,255,.07); text-align: right; white-space: nowrap; }.table th { color: var(--muted); font-weight: 500; }
.mini-btn { display: inline-grid; place-items: center; width: 27px; height: 27px; margin: 0 2px; border: 0; border-radius: 8px; color: #08150f; cursor: pointer; }.mini-btn.success { background: var(--green); }.mini-btn.danger { color: #fff; background: var(--danger); }
.settlement-panel{margin-bottom:12px;padding:12px;border:1px solid rgba(240,185,78,.18);border-radius:14px;background:rgba(8,8,8,.62)}.settlement-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.settlement-head h3{margin:0;font-size:13px;color:var(--gold-bright)}.settlement-head .input{width:auto;min-width:145px;margin:0}.settlement-form{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(150px,1fr) minmax(220px,1.5fr);gap:8px;align-items:center}.settlement-form .input{margin:0}.settlement-form textarea{resize:vertical}.settlement-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}.settlement-actions .btn{flex:1}.settlement-table input[type=checkbox]{width:17px;height:17px;accent-color:var(--gold)}.status-violation{color:#ffd68a!important;background:rgba(118,40,22,.65)!important;border-color:rgba(255,150,90,.4)!important}@media(max-width:720px){.settlement-form{grid-template-columns:1fr}.settlement-actions{grid-column:auto}.settlement-head{align-items:stretch;flex-direction:column}.settlement-head .input{width:100%}}
.error-state { margin-top: 25vh; }.error-icon { display: grid; place-items: center; width: 67px; height: 67px; margin: 0 auto 14px; border-radius: 22px; color: var(--danger); background: rgba(255,113,135,.1); }

@media (max-width: 420px) {
  .shell { padding-inline: 11px; }
  .balance-card { padding: 18px; }
  .balance-line strong { font-size: 26px; }
  .btn { padding-inline: 12px; font-size: 11px; }
  .dice-stage { gap: 29px; }
  .die-wrap { transform: scale(.88); }
  .wheel-label { width: 61px; font-size: 9px; }
  .settings-grid { grid-template-columns: 1fr; }.full-setting { grid-column: auto; }.admin-form-row,.admin-detail-grid { grid-template-columns:1fr 1fr; }.admin-form-row .btn { grid-column:1 / -1; }
}

/* =========================================================
   Visual Experience Patch 1.3 — Neon Royale
   ========================================================= */
:root {
  --bg: #070711;
  --surface: rgba(17, 17, 36, .82);
  --surface-strong: #15152d;
  --surface-soft: rgba(35, 34, 67, .72);
  --line: rgba(255, 255, 255, .105);
  --line-gold: rgba(251, 199, 99, .42);
  --text: #fbf9ff;
  --muted: #a7a6bd;
  --gold: #f0b94e;
  --gold-bright: #ffe6a6;
  --gold-dark: #8e5910;
  --violet: #a47dff;
  --cyan: #5fe7ff;
  --green: #63edb1;
  --danger: #ff6684;
  --shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

html { background: #070711; }
body {
  background:
    radial-gradient(circle at 8% -5%, rgba(140, 91, 255, .19), transparent 29%),
    radial-gradient(circle at 96% 17%, rgba(255, 185, 64, .15), transparent 28%),
    linear-gradient(180deg, #080814 0%, #06060e 68%, #090817 100%);
  font-size: 16px;
}
body::before { top: 9%; right: -130px; background: #7d4dff; animation: ambientFloat 11s ease-in-out infinite alternate; }
body::after { bottom: 4%; left: -140px; background: #d88c13; animation: ambientFloat 14s ease-in-out -4s infinite alternate-reverse; }
@keyframes ambientFloat { to { transform: translate3d(22px, 42px, 0) scale(1.18); opacity: .4; } }

.shell { width: min(720px, 100%); padding: 14px 14px 132px; isolation: isolate; }
.ambient-orb { position: fixed; z-index: -1; width: 190px; height: 190px; border-radius: 50%; opacity: .18; filter: blur(72px); pointer-events: none; }
.ambient-one { top: 36%; left: -105px; background: var(--cyan); }
.ambient-two { top: 62%; right: -115px; background: var(--violet); }

.topbar {
  position: sticky; top: 8px; z-index: 8; min-height: 66px; margin-bottom: 22px; padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 22px;
  background: rgba(12, 12, 26, .74); box-shadow: 0 14px 38px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.brand-mark { width: 46px; height: 46px; border-radius: 16px; color: #2b1700; background: linear-gradient(145deg, #fff0b9, #e5a72f 58%, #9b5b09); box-shadow: 0 10px 30px rgba(242, 178, 55, .3), inset 0 1px rgba(255,255,255,.72); transform: rotate(-3deg); }
.top-user { flex: 1; }
.avatar { width: 43px; height: 43px; border-color: rgba(167,122,255,.55); color: #fff; background: linear-gradient(145deg, #b691ff, #5e36be); box-shadow: 0 10px 28px rgba(115,70,213,.3), inset 0 1px rgba(255,255,255,.27); }
.top-user h1 { font-size: 16px; }
.top-user small { max-width: min(42vw, 260px); font-size: 12px; }
.icon-btn { width: 41px; height: 41px; border-radius: 14px; background: rgba(255,255,255,.055); transition: transform .22s ease, color .22s ease, border-color .22s ease, background .22s ease; }
.icon-btn:active { transform: scale(.92); }

.tab { transform-origin: 50% 16%; }
.tab.active { animation: tabEnter .48s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tabEnter { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

.hero, .card { border-radius: 27px; border-color: rgba(255,255,255,.105); background: linear-gradient(145deg, rgba(28,28,55,.9), rgba(11,11,25,.92)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.055); }
.card { margin: 14px 0; padding: 19px; }
.balance-card { padding: 24px; border-color: rgba(249,197,92,.38); background: radial-gradient(circle at 85% 5%, rgba(246,188,65,.22), transparent 37%), radial-gradient(circle at 10% 100%, rgba(126,78,236,.17), transparent 40%), #151426; overflow: hidden; }
.balance-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(112deg, transparent 25%, rgba(255,255,255,.055) 46%, transparent 65%); transform: translateX(85%); animation: cardSheen 6s ease-in-out infinite; pointer-events: none; }
@keyframes cardSheen { 0%,58% { transform: translateX(85%); } 82%,100% { transform: translateX(-85%); } }
.hero-glow { width: 210px; height: 210px; background: rgba(255,207,100,.19); }
.eyebrow { font-size: 13px; font-weight: 700; }
.balance-line { margin: 14px 0 8px; }
.balance-line strong { font-size: clamp(30px, 8vw, 42px); }
.balance-meta { gap: 8px 18px; font-size: 12px; }
.btn { min-height: 47px; padding: 11px 17px; border-radius: 16px; font-size: 13px; font-weight: 700; transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .22s ease, opacity .22s ease; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(1px) scale(.975); }
.btn.gold { color: #281600; background: linear-gradient(135deg, #fff0b0 0%, #f2b33b 48%, #c67813 100%); box-shadow: 0 12px 32px rgba(223,147,27,.27), inset 0 1px rgba(255,255,255,.65); }
.btn.ghost { background: rgba(255,255,255,.065); }

.metrics { gap: 10px; margin: 14px 0; }
.metric { position: relative; gap: 7px; padding: 16px 7px 14px; border-radius: 21px; background: rgba(21,21,43,.74); overflow: hidden; transition: transform .22s ease, border-color .22s ease; }
.metric::after { content: ''; position: absolute; inset-inline: 22%; bottom: -1px; height: 2px; border-radius: 99px; background: var(--violet); opacity: .65; box-shadow: 0 0 12px currentColor; }
.metric:nth-child(2)::after { background: var(--gold); }
.metric:nth-child(3)::after { background: var(--cyan); }
.metric:active { transform: scale(.96); }
.metric strong { font-size: 21px; }
.metric small, .card-heading small, .task-top small, .history-row small { font-size: 12px; }
.icon-badge { width: 39px; height: 39px; border-radius: 14px; }
.section-heading { margin: 23px 4px 14px; }
.section-heading h2 { font-size: 23px; letter-spacing: -.5px; }
.section-heading p { font-size: 13px; }
.card-heading h3, .task-top h3 { font-size: 15px; }
.role-pill, .tag, .chance-pill, .rank { padding: 5px 10px; font-size: 11px; }
.chance-pill { min-height: 31px; font-weight: 800; box-shadow: 0 0 22px rgba(240,185,78,.1); }
.cyan-pill { box-shadow: 0 0 22px rgba(95,231,255,.12); }
.referral-link { min-height: 48px; border-style: solid; font-size: 12px; }
.referral-link span { font-size: 12px; }
.channel-row, .history-row { padding: 13px 0; font-size: 13px; }
.input, .input-wrap { min-height: 49px; border-radius: 15px; background: rgba(5,5,14,.56); }
.input { font-size: 14px; }
.form-card label { font-size: 14px; }
.hint, .game-note { font-size: 12px; }

.game-card { border-color: rgba(255,255,255,.12); background: radial-gradient(circle at 50% 0, rgba(150,98,255,.13), transparent 42%), linear-gradient(160deg, rgba(24,24,51,.96), rgba(8,8,20,.96)); }
.wheel-card { border-color: rgba(243,190,79,.24); }
.game-cta { position: relative; min-height: 54px; overflow: hidden; }
.game-cta::after { content: ''; position: absolute; top: -40%; left: -20%; width: 24%; height: 180%; background: rgba(255,255,255,.36); filter: blur(8px); transform: skewX(-22deg); animation: ctaSweep 3.8s ease-in-out infinite; }
@keyframes ctaSweep { 0%,48% { left: -25%; opacity: 0; } 60% { opacity: .9; } 84%,100% { left: 115%; opacity: 0; } }
.result-box { min-height: 54px; border-radius: 17px; font-size: 14px; }
.result-box:not(:empty) { padding: 10px 13px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.045); }
.result-box strong { font-size: 14px; }
.result-box small { font-size: 12px; }
.prize-reveal { animation: prizeReveal .6s cubic-bezier(.16,1.25,.35,1) both; }
@keyframes prizeReveal { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }

/* Polished prize wheel */
.wheel-stage { min-height: 338px; padding-top: 20px; }
.wheel-stage::before { content: ''; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(244,188,72,.18), transparent 64%); filter: blur(18px); animation: wheelAura 3s ease-in-out infinite alternate; }
@keyframes wheelAura { to { transform: scale(1.08); opacity: .65; } }
.wheel { width: min(300px, 80vw); border-width: 10px; border-color: #d69727; box-shadow: 0 0 0 5px rgba(255,234,168,.11), 0 0 0 13px #121125, 0 24px 55px rgba(0,0,0,.48), 0 0 48px rgba(225,150,31,.18), inset 0 0 0 2px rgba(255,255,255,.32); }
.wheel.spinning + .wheel-hub, .wheel.spinning { animation: wheelGlow .72s ease-in-out infinite alternate; }
.wheel-pointer { top: 5px; width: 42px; height: 50px; animation: pointerBounce 1.35s ease-in-out infinite; }
@keyframes pointerBounce { 50% { transform: rotate(90deg) translateX(4px); } }
.wheel-label { font-size: 11px; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-101px) rotate(var(--counter-angle)); }

/* Live dice arena */
.dice-card { padding: 16px; border-color: rgba(95,231,255,.2); overflow: hidden; }
.dice-kicker { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 6px 12px; border: 1px solid rgba(99,237,177,.18); border-radius: 99px; color: #b9f8dc; background: rgba(50,183,126,.08); font-size: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(99,237,177,.09), 0 0 13px var(--green); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .45; transform: scale(.72); } }
.dice-arena { position: relative; min-height: 286px; margin: 12px 0 8px; border: 1px solid rgba(104,217,255,.1); border-radius: 24px; background: radial-gradient(ellipse at 50% 36%, rgba(99,80,211,.28), transparent 43%), linear-gradient(180deg, rgba(12,13,35,.92), rgba(8,8,20,.66)); box-shadow: inset 0 -30px 55px rgba(66,31,117,.12); overflow: hidden; perspective: 1000px; }
.dice-arena::before { content: ''; position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(120,111,213,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(120,111,213,.12) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, transparent, #000 70%); }
.arena-rays { position: absolute; top: -75px; left: 50%; width: 330px; height: 290px; background: conic-gradient(from 168deg at 50% 0, transparent 0 5deg, rgba(109,224,255,.1) 7deg 14deg, transparent 16deg 26deg, rgba(169,117,255,.12) 29deg 35deg, transparent 38deg 360deg); transform: translateX(-50%); animation: raysDrift 8s ease-in-out infinite alternate; }
@keyframes raysDrift { to { transform: translateX(-50%) rotate(7deg) scale(1.08); } }
.dice-stage { position: relative; z-index: 2; align-items: center; gap: clamp(31px, 10vw, 68px); min-height: 228px; padding: 45px 0 10px; perspective: 950px; }
.die-pod { position: relative; display: grid; place-items: center; width: 112px; height: 132px; transform-style: preserve-3d; }
.die-wrap { position: relative; z-index: 2; width: 106px; height: 106px; }
.die-shadow { position: absolute; z-index: 1; bottom: 1px; width: 82px; height: 23px; border-radius: 50%; background: rgba(0,0,0,.54); filter: blur(9px); transform: scale(.82); transition: transform .3s ease, opacity .3s ease; }
.dice-cube { width: 88px; height: 88px; transition: transform 1s cubic-bezier(.18,.75,.2,1); }
.cube-face { width: 88px; height: 88px; border: 1px solid rgba(255,255,255,.62); border-radius: 20px; background: linear-gradient(145deg, #ffffff 0%, #ebecff 46%, #aaa6d8 100%); box-shadow: inset 0 0 0 4px rgba(67,53,126,.08), inset -8px -9px 18px rgba(67,52,128,.13), 0 0 24px rgba(119,193,255,.15); }
.cube-face.front { transform: translateZ(44px); }.cube-face.back { transform: rotateY(180deg) translateZ(44px); }.cube-face.right { transform: rotateY(90deg) translateZ(44px); }.cube-face.left { transform: rotateY(-90deg) translateZ(44px); }.cube-face.top { transform: rotateX(90deg) translateZ(44px); }.cube-face.bottom { transform: rotateX(-90deg) translateZ(44px); }
.pip { width: 14px; height: 14px; background: #51438c; box-shadow: inset 2px 2px 3px rgba(255,255,255,.3), 0 2px 4px rgba(34,20,78,.28), 0 0 8px rgba(105,76,208,.18); }
.dice-cube.rolling { animation: diceRollOne 1.18s linear infinite; }
.die-pod:nth-child(2) .dice-cube.rolling { animation-name: diceRollTwo; animation-duration: 1.06s; }
@keyframes diceRollOne { 0% { transform: rotateX(0) rotateY(0) rotateZ(0); } 23% { transform: translate3d(12px,-32px,25px) rotateX(150deg) rotateY(110deg) rotateZ(30deg); } 52% { transform: translate3d(-9px,-52px,36px) rotateX(330deg) rotateY(280deg) rotateZ(115deg); } 78% { transform: translate3d(8px,-18px,12px) rotateX(510deg) rotateY(460deg) rotateZ(190deg); } 100% { transform: rotateX(720deg) rotateY(680deg) rotateZ(270deg); } }
@keyframes diceRollTwo { 0% { transform: rotateX(0) rotateY(0) rotateZ(0); } 24% { transform: translate3d(-13px,-45px,30px) rotateX(-130deg) rotateY(190deg) rotateZ(-45deg); } 55% { transform: translate3d(10px,-28px,28px) rotateX(-320deg) rotateY(390deg) rotateZ(-135deg); } 82% { transform: translate3d(-6px,-52px,18px) rotateX(-540deg) rotateY(580deg) rotateZ(-210deg); } 100% { transform: rotateX(-720deg) rotateY(760deg) rotateZ(-290deg); } }
.dice-arena.rolling .die-pod { animation: podBounce .42s ease-in-out infinite alternate; }
.dice-arena.rolling .die-pod:nth-child(2) { animation-delay: -.2s; }
.dice-arena.rolling .die-shadow { opacity: .36; transform: scale(1.15); animation: shadowPulse .42s ease-in-out infinite alternate; }
@keyframes podBounce { to { transform: translateY(-10px); } }
@keyframes shadowPulse { to { transform: scale(.62); opacity: .16; } }
.arena-floor { position: absolute; z-index: 1; right: 10%; bottom: 11px; left: 10%; height: 74px; border: 1px solid rgba(104,209,255,.13); border-radius: 50%; background: radial-gradient(ellipse, rgba(93,70,190,.18), rgba(7,7,18,.15) 65%, transparent 69%); transform: rotateX(67deg); box-shadow: 0 0 42px rgba(85,64,174,.18); }
.spark-particle { position: absolute; z-index: 4; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); opacity: 0; }
.p1 { top: 32%; left: 16%; }.p2 { top: 23%; right: 18%; background: var(--gold); }.p3 { bottom: 28%; left: 27%; background: var(--violet); }.p4 { bottom: 36%; right: 25%; background: var(--green); }
.dice-arena.rolling .spark-particle { animation: sparkFly .8s ease-out infinite; }
.dice-arena.rolling .p2 { animation-delay: -.21s; }.dice-arena.rolling .p3 { animation-delay: -.46s; }.dice-arena.rolling .p4 { animation-delay: -.63s; }
@keyframes sparkFly { 0% { opacity: 0; transform: translateY(20px) scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-45px) scale(1.35); } }
.dice-arena.settled { animation: arenaHit .55s ease-out; }
@keyframes arenaHit { 0% { box-shadow: inset 0 0 0 rgba(95,231,255,0); } 28% { box-shadow: inset 0 0 60px rgba(95,231,255,.18), 0 0 28px rgba(95,231,255,.12); } 100% { box-shadow: inset 0 0 0 rgba(95,231,255,0); } }
.dice-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 3px 13px; color: var(--muted); font-size: 12px; text-align: right; }
.dice-status > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.dice-sum { display: grid; place-items: center; min-width: 42px; height: 32px; padding: 0 10px; border: 1px solid rgba(95,231,255,.22); border-radius: 11px; color: #d4f8ff; background: rgba(72,190,219,.09); font-size: 16px; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.dice-cta { display: grid; grid-template-columns: 28px auto; grid-template-rows: 22px 17px; column-gap: 8px; min-height: 66px; text-align: right; }
.dice-cta > .icon { grid-row: 1 / 3; align-self: center; }
.dice-cta b { align-self: end; font-size: 15px; }
.dice-cta small { align-self: start; opacity: .72; font-size: 11px; font-weight: 500; }
.dice-cta.is-rolling .icon { animation: iconSpin .8s linear infinite; }
@keyframes iconSpin { to { transform: rotate(-360deg); } }
.dice-result.won { border-color: rgba(99,237,177,.26); color: #e5fff3; background: rgba(50,183,126,.08); box-shadow: 0 0 30px rgba(68,221,156,.08); }

/* Floating game navigation */
.nav { right: 50%; bottom: max(9px, env(safe-area-inset-bottom)); grid-template-columns: repeat(6, 1fr); width: min(698px, calc(100% - 20px)); min-height: 76px; padding: 7px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: rgba(12,11,27,.87); box-shadow: 0 19px 60px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(25px) saturate(155%); -webkit-backdrop-filter: blur(25px) saturate(155%); }
.nav button { position: relative; justify-content: center; gap: 5px; min-height: 60px; padding: 4px 2px; border-radius: 17px; color: #77768e; font-size: 10px; transition: color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease; }
.nav button em { max-width: 100%; overflow: hidden; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.nav button span { width: 39px; height: 31px; border-radius: 12px; transition: transform .3s cubic-bezier(.2,.9,.25,1.3), color .25s ease, background .25s ease, box-shadow .25s ease; }
.nav button::after { content: ''; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(0); transition: .25s ease; box-shadow: 0 0 9px currentColor; }
.nav button.active { color: #ffe1a0; background: rgba(255,255,255,.035); }
.nav button.active span { color: #2c1700; background: linear-gradient(145deg, #ffe6a2, #d69123); box-shadow: 0 7px 18px rgba(223,145,28,.28), inset 0 1px rgba(255,255,255,.6); transform: translateY(-3px); }
.nav button.active::after { opacity: 1; transform: scale(1); }
.nav button.nav-primary span { color: #c9f8ff; border: 1px solid rgba(95,231,255,.16); background: rgba(95,231,255,.08); }
.nav button.nav-primary.active span { color: #07161c; border-color: rgba(211,251,255,.62); background: linear-gradient(145deg, #c4fbff, #4ed3ef); box-shadow: 0 8px 24px rgba(65,205,234,.28); }
.nav button:active { transform: scale(.92); }
.toast { top: 17px; min-height: 46px; border-radius: 17px; font-size: 13px; backdrop-filter: blur(18px); }

.task-card { transition: transform .22s ease, border-color .22s ease; }
.task-card:hover { transform: translateY(-2px); border-color: rgba(99,237,177,.21); }
.coming-icon { animation: comingFloat 3s ease-in-out infinite; }
@keyframes comingFloat { 50% { transform: translateY(-8px) rotate(3deg); } }

@media (max-width: 420px) {
  .shell { padding-inline: 10px; padding-bottom: 126px; }
  .topbar { top: 6px; padding: 8px; }
  .brand-mark { display: none; }
  .top-user h1 { font-size: 15px; }
  .top-user small { max-width: 36vw; }
  .balance-card { padding: 21px; }
  .balance-line strong { font-size: 28px; }
  .metric { padding-inline: 4px; }
  .metric strong { font-size: 18px; }
  .metric small { font-size: 10px; }
  .section-heading h2 { font-size: 21px; }
  .section-heading p { font-size: 12px; }
  .dice-card { padding: 12px; }
  .dice-arena { min-height: 258px; }
  .dice-stage { gap: 13px; min-height: 210px; padding-top: 38px; }
  .die-pod { width: 102px; }
  .die-wrap { transform: scale(.88); }
  .nav { width: calc(100% - 14px); min-height: 72px; padding-inline: 4px; border-radius: 22px; }
  .nav button { min-height: 57px; font-size: 9px; }
  .nav button span { width: 34px; height: 29px; }
  .wheel-label { width: 63px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   Performance + Black Gold UI Patch 1.4
   ========================================================= */
:root {
  --bg: #070707;
  --surface: #11100d;
  --surface-strong: #17140d;
  --surface-soft: #211b0e;
  --line: rgba(255, 220, 125, .14);
  --line-gold: rgba(240, 185, 78, .46);
  --text: #fffaf0;
  --muted: #b7ab92;
  --gold: #d7a83b;
  --gold-bright: #ffe3a0;
  --gold-dark: #8c6417;
  --violet: #d7a83b;
  --cyan: #e3b94f;
  --green: #e3b94f;
  --danger: #e26b62;
}
body { background: radial-gradient(circle at 8% -5%, rgba(207, 151, 34, .16), transparent 29%), radial-gradient(circle at 96% 17%, rgba(129, 87, 18, .12), transparent 28%), #070707; }
body::before, body::after, .ambient-orb { animation: none !important; filter: blur(52px); opacity: .14; }
.ambient-one, .ambient-two { display: none; }
.topbar, .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(13, 12, 9, .97); }
.topbar { box-shadow: 0 10px 28px rgba(0,0,0,.32), inset 0 1px rgba(255,224,128,.05); }
.avatar { overflow: hidden; color: #2a1a03; background: linear-gradient(145deg, #ffe8a5, #a96f12); border-color: rgba(255,224,128,.56); }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-mark { transform: none; }
.hero, .card, .metric, .admin-module-card { contain: layout paint style; }
.tab.active { animation: none; }
.balance-card::before, .game-cta::after, .wheel-stage::before, .arena-rays, .coming-icon, .live-dot { animation: none !important; }
.game-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; }
.dice-cta { display: flex; min-height: 58px; gap: 9px; text-align: center; }
.dice-cta b { font-size: 15px; }
.wheel, .dice-cube { will-change: transform; }
.wheel.spinning { animation: none; }
.icon-badge.violet, .icon-badge.cyan, .icon-badge.green, .icon-badge.blue, .coming-icon { color: var(--gold-bright); border-color: rgba(240,185,78,.25); background: rgba(215,168,59,.12); box-shadow: none; }
.metric::after { background: var(--gold) !important; box-shadow: 0 0 12px rgba(240,185,78,.45); }
.tag.ok, .status-approved, .status-paid { color: var(--gold-bright); border-color: rgba(240,185,78,.3); background: rgba(215,168,59,.1); }
.referral-link { border-color: rgba(240,185,78,.32); color: var(--gold-bright); background: rgba(215,168,59,.08); }
.referral-link .icon-btn { color: var(--gold-bright); }
.task-icon { color: var(--gold-bright); background: rgba(215,168,59,.12); }
.dice-card, .game-card { border-color: rgba(240,185,78,.22); background: radial-gradient(circle at 50% 0, rgba(215,168,59,.10), transparent 42%), linear-gradient(160deg, rgba(28,24,14,.96), rgba(8,8,7,.96)); }
.cube-face { border-color: rgba(255,229,143,.64); background: linear-gradient(145deg, #fff0b5 0%, #d59b25 54%, #76500d 100%); box-shadow: inset 0 0 0 4px rgba(75,47,4,.14), 0 0 20px rgba(215,168,59,.12); }
.pip { background: #342305; box-shadow: inset 2px 2px 3px rgba(255,246,189,.27), 0 2px 3px rgba(0,0,0,.28); }
.dice-kicker { color: var(--gold-bright); border-color: rgba(240,185,78,.22); background: rgba(215,168,59,.08); }
.dice-sum { color: var(--gold-bright); border-color: rgba(240,185,78,.32); background: rgba(215,168,59,.09); }
.nav button.nav-primary span, .nav button.nav-primary.active span { color: #2a1a03; border-color: rgba(255,231,160,.6); background: linear-gradient(145deg, #ffe6a2, #d69123); box-shadow: 0 8px 24px rgba(223,145,28,.28); }
.admin-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.admin-module-card { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 78px; padding: 12px; border: 1px solid rgba(240,185,78,.18); border-radius: 17px; color: var(--text); background: linear-gradient(145deg, rgba(32,27,16,.94), rgba(16,14,9,.96)); text-align: right; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.admin-module-card:hover, .admin-module-card:focus-visible { border-color: var(--line-gold); background: linear-gradient(145deg, rgba(48,38,18,.98), rgba(18,15,9,.98)); transform: translateY(-2px); outline: none; }
.admin-module-card > span:nth-child(2) { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.admin-module-card b { font-size: 13px; }
.admin-module-card small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.admin-module-card i { color: var(--gold); }
.admin-module-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid rgba(240,185,78,.25); border-radius: 13px; color: var(--gold-bright); background: rgba(215,168,59,.12); }
.admin-panel { margin-top: 10px; }
@media (max-width: 420px) { .admin-module-grid { grid-template-columns: 1fr; } .admin-module-card { min-height: 70px; } }

/* Absolute final palette guard: older visual rules above intentionally remain
   for compatibility, but no purple/cyan/green surface is allowed to leak into
   the rendered Mini App. */
body::before { background: #8c6417 !important; }
body::after { background: #8c6417 !important; }
body { background: radial-gradient(circle at 8% -5%, rgba(207,151,34,.16), transparent 29%), radial-gradient(circle at 96% 17%, rgba(129,87,18,.12), transparent 28%), #070707 !important; }
.game-card, .dice-card { background: radial-gradient(circle at 50% 0, rgba(215,168,59,.10), transparent 42%), linear-gradient(160deg, #1c180e, #080807) !important; }
.dice-arena { border-color: rgba(240,185,78,.18) !important; background: radial-gradient(ellipse at 50% 36%, rgba(215,168,59,.15), transparent 43%), linear-gradient(180deg, #15120b, #080807) !important; box-shadow: inset 0 -30px 55px rgba(125,88,18,.12) !important; }
.dice-arena::before { opacity: .18 !important; background-image: linear-gradient(rgba(240,185,78,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(240,185,78,.12) 1px, transparent 1px) !important; }
.arena-rays { background: conic-gradient(from 168deg at 50% 0, transparent 0 5deg, rgba(240,185,78,.12) 7deg 14deg, transparent 16deg 26deg, rgba(240,185,78,.10) 29deg 35deg, transparent 38deg 360deg) !important; }
.arena-floor { border-color: rgba(240,185,78,.16) !important; background: radial-gradient(ellipse, rgba(180,126,24,.20), rgba(7,7,7,.15) 65%, transparent 69%) !important; box-shadow: 0 0 42px rgba(180,126,24,.18) !important; }
.spark-particle, .p1, .p2, .p3, .p4 { background: var(--gold) !important; box-shadow: 0 0 14px var(--gold) !important; }
.cube-face { background: linear-gradient(145deg, #fff0b5 0%, #d59b25 54%, #76500d 100%) !important; box-shadow: inset 0 0 0 4px rgba(75,47,4,.14), 0 0 20px rgba(215,168,59,.12) !important; }
.pip { background: #342305 !important; box-shadow: inset 2px 2px 3px rgba(255,246,189,.27), 0 2px 3px rgba(0,0,0,.28) !important; }
.dice-kicker, .dice-sum, .cyan-pill, .result-icon.cyan { color: var(--gold-bright) !important; border-color: rgba(240,185,78,.32) !important; background: rgba(215,168,59,.09) !important; }
.dice-result.won { border-color: rgba(240,185,78,.3) !important; color: var(--gold-bright) !important; background: rgba(215,168,59,.08) !important; box-shadow: 0 0 30px rgba(215,168,59,.10) !important; }
.settings-note { border-color: rgba(240,185,78,.24) !important; color: var(--gold-bright) !important; background: rgba(215,168,59,.08) !important; }
.toast.success { color: var(--gold-bright) !important; border-color: rgba(240,185,78,.4) !important; background: rgba(35,27,10,.96) !important; }

/* Configurable tab hero cards */
.tab-banner { position: relative; display: flex; align-items: flex-end; min-height: 118px; margin: 0 0 14px; overflow: hidden; border: 1px solid rgba(240,185,78,.28); border-radius: 22px; background: linear-gradient(135deg, #2b210d, #0d0c08 76%); box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px rgba(255,231,160,.14); isolation: isolate; }
.tab-banner.has-image { background: #131008; }
.tab-banner > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tab-banner-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,7,7,.94) 0%, rgba(7,7,7,.55) 48%, rgba(7,7,7,.18) 100%), linear-gradient(0deg, rgba(7,7,7,.8), transparent 65%); }
.tab-banner.is-placeholder::before { content: ''; position: absolute; top: -50px; left: -28px; width: 180px; height: 180px; border-radius: 50%; background: rgba(240,185,78,.14); filter: blur(24px); }
.tab-banner-content { display: flex; align-items: center; gap: 10px; width: 100%; padding: 17px 18px; }
.tab-banner-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid rgba(255,227,160,.42); border-radius: 13px; color: #2b1c04; background: linear-gradient(145deg, #ffe9a7, #c98b1c); box-shadow: 0 7px 20px rgba(218,153,30,.22); }
.tab-banner-content > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.tab-banner-content b { color: #fff1bd; font-size: 16px; }
.tab-banner-content small { color: #d3bd8c; font-size: 11px; }
.tab-banner.image-error { background: linear-gradient(135deg, #2b210d, #0d0c08 76%); }
.tab-images-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.tab-image-field { display: flex; flex-direction: column; gap: 5px; color: var(--gold-bright); font-size: 12px; }
.tab-image-field > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tab-image-field .input { margin: 0; direction: ltr; text-align: left; font-size: 11px; }
.tab-image-field small { color: var(--muted); font-size: 9px; }
@media (max-width: 420px) { .tab-banner { min-height: 104px; border-radius: 19px; } .tab-banner-content { padding: 14px; } .tab-banner-content b { font-size: 14px; } .tab-images-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Black + Gold / Custom Background / Card Tasks Patch 1.8
   This block intentionally comes last so legacy theme rules cannot leak.
   ========================================================= */
:root {
  --bg: #050505 !important;
  --surface: #11100c !important;
  --surface-strong: #17130a !important;
  --surface-soft: #211a0b !important;
  --line: rgba(240, 185, 78, .18) !important;
  --line-gold: rgba(240, 185, 78, .52) !important;
  --text: #fffaf0 !important;
  --muted: #b9aa8b !important;
  --gold: #d7a83b !important;
  --gold-bright: #ffe3a0 !important;
  --gold-dark: #8c6417 !important;
  --violet: #d7a83b !important;
  --cyan: #d7a83b !important;
  --green: #d7a83b !important;
  --danger: #b88725 !important;
  --app-bg-image: none;
}
html { background: #050505 !important; }
body {
  background-color: #050505 !important;
  background-image: radial-gradient(circle at 8% -5%, rgba(207,151,34,.14), transparent 29%), radial-gradient(circle at 96% 17%, rgba(129,87,18,.09), transparent 28%), linear-gradient(180deg,#080806 0%,#050505 72%,#090704 100%) !important;
  background-attachment: fixed !important;
}
body.has-custom-background {
  background-image: linear-gradient(rgba(3,3,3,.72), rgba(3,3,3,.78)), var(--app-bg-image), linear-gradient(180deg,#090806,#050505) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
body::before, body::after { background: #8c6417 !important; opacity: .09 !important; }

.hero, .card, .metric, .admin-stat, .admin-panel, .form-card, .task-card, .channel-card, .referral-card, .coming-card, .history-row,
.game-card, .dice-card, .dice-arena, .admin-module-card {
  color: var(--text) !important;
  border-color: rgba(240,185,78,.22) !important;
  background: linear-gradient(145deg, rgba(27,22,13,.97), rgba(8,8,7,.98)) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.32), inset 0 1px rgba(255,227,160,.05) !important;
}
.balance-card { background: radial-gradient(circle at 85% 5%, rgba(240,185,78,.18), transparent 37%), linear-gradient(145deg,#29200e,#0b0a07 74%) !important; }
.referral-card { background: linear-gradient(145deg,#241c0d,#0b0a07 82%) !important; }
.input, .input-wrap, select.input, textarea.input { color: var(--text) !important; border-color: rgba(240,185,78,.2) !important; background: rgba(3,3,3,.74) !important; }
.btn.ghost { color: var(--gold-bright) !important; border-color: rgba(240,185,78,.28) !important; background: rgba(215,168,59,.08) !important; }
.btn.success, .mini-btn.success { color: #241802 !important; border-color: rgba(255,227,160,.4) !important; background: linear-gradient(135deg,#ffe7a2,#c88b1b) !important; }
.btn.danger, .mini-btn.danger, .error-icon, .toast.error { color: var(--gold-bright) !important; border-color: rgba(240,185,78,.34) !important; background: rgba(62,43,10,.88) !important; }
.icon-badge.violet, .icon-badge.cyan, .icon-badge.green, .icon-badge.blue, .coming-icon, .task-icon,
.dice-kicker, .dice-sum, .result-icon.cyan, .cyan-pill { color: var(--gold-bright) !important; border-color: rgba(240,185,78,.28) !important; background: rgba(215,168,59,.12) !important; box-shadow: none !important; }
.tag.ok, .status-approved, .status-paid, .status-pending, .status-rejected, .danger-tag { color: var(--gold-bright) !important; border-color: rgba(240,185,78,.3) !important; background: rgba(215,168,59,.1) !important; }
.nav { border-color: rgba(240,185,78,.22) !important; background: rgba(9,8,6,.97) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav button, .nav button.nav-primary span, .nav button.nav-primary.active span { color: var(--gold-bright) !important; border-color: rgba(240,185,78,.26) !important; background: transparent !important; box-shadow: none !important; }
.nav button.active span, .nav button.nav-primary.active span { color: #271900 !important; border-color: rgba(255,231,160,.62) !important; background: linear-gradient(145deg,#ffe6a2,#d69123) !important; box-shadow: 0 8px 24px rgba(223,145,28,.25) !important; }
.task-card { padding: 16px !important; }
#tasksList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#tasksList > .empty { grid-column: 1 / -1; }
.task-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.task-title { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.task-title h3 { margin: 0; overflow: hidden; color: #fff1bd; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.task-title small { color: var(--muted); font-size: 10px; }
.task-reward { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(240,185,78,.3); border-radius: 10px; color: var(--gold-bright); background: rgba(215,168,59,.1); font-size: 10px; font-weight: 800; }
.task-description { min-height: 38px; margin: 13px 0 !important; color: var(--muted); font-size: 11px; line-height: 1.8; }
.task-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 11px; border-top: 1px solid rgba(240,185,78,.12); }
.task-footer .btn { min-height: 36px; padding: 8px 10px; font-size: 10px; }
.task-status { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; }
.task-card.is-claimed { border-color: rgba(240,185,78,.32) !important; }
.task-card.is-locked { border-color: rgba(255,255,255,.08) !important; }
.task-card.is-locked .task-icon, .task-card.is-locked .task-reward { filter: grayscale(1); opacity: .62; }
.task-stage-notice { margin: -2px 0 12px !important; padding: 8px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 10px; }
.task-stage-notice .icon { margin-inline-end: 4px; vertical-align: middle; }
.task-card:hover { border-color: rgba(240,185,78,.52) !important; transform: translateY(-2px); }
.background-setting-card { margin: 12px 0; padding: 13px; border: 1px solid rgba(240,185,78,.22); border-radius: 16px; background: linear-gradient(145deg,rgba(37,29,13,.9),rgba(13,11,7,.94)); }
.background-setting-card .hint { margin: 8px 0 0; }
.background-image-input { direction: ltr; text-align: left; }
@media (max-width: 560px) { #tasksList { grid-template-columns: 1fr; } }

.balance-dual { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin: 11px 0 6px; }
.balance-dual .balance-line { min-width: 0; margin: 0; padding: 10px 11px; border: 1px solid rgba(240,185,78,.2); border-radius: 14px; background: rgba(6,6,5,.5); }
.balance-dual .balance-line strong { display: block; overflow: hidden; font-size: clamp(18px,5vw,29px); text-overflow: ellipsis; white-space: nowrap; }
.balance-dual .balance-line span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.balance-dual .balance-usd { border-color: rgba(255,226,138,.32); background: rgba(215,168,59,.08); }
.balance-dual .balance-usd strong { color: var(--gold-bright); }
@media (max-width: 360px) { .balance-dual { grid-template-columns: 1fr; } }

/* Administration and activity forms */
[hidden]{display:none!important}
.settings-form label{display:flex;flex-direction:column;gap:8px;line-height:1.8}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}
.settings-grid .input{width:100%;min-width:0;box-sizing:border-box}
.task-footer{flex-wrap:wrap;gap:10px}
.task-footer .btn{text-decoration:none;text-align:center;min-height:44px}
#taskEditor{margin-bottom:26px}
#adminSub .hint{line-height:1.9}
@media(max-width:600px){.settings-grid{grid-template-columns:1fr}.task-footer .btn{flex:1 1 140px}.admin-form-row>.input{min-width:0;width:100%}}

/* Stable front-facing dice avoid backface/GPU culling in Telegram WebViews. */
.dice-cube.stable-die {transform-style:flat;transform:none;transition:none;will-change:auto;display:block;border:2px solid #e5bb58;border-radius:19px;background:linear-gradient(145deg,#fff0b5,#d59b25 60%,#76500d);box-shadow:inset 0 0 0 4px #4b2f0424,4px 7px 0 #694806,0 10px 24px #0008;opacity:1;visibility:visible;backface-visibility:visible}
.dice-cube.stable-die.rolling,.die-pod:nth-child(2) .dice-cube.stable-die.rolling {animation:stableDiceShake .36s ease-in-out infinite alternate}
@keyframes stableDiceShake {from{transform:translateY(-9px) rotate(-12deg)}to{transform:translateY(4px) rotate(12deg)}}
.dice-stage,.die-wrap {perspective:none}
.dice-arena.rolling .die-pod {animation:none}
.help-card p,.wheel-shop p,.payment-box p {line-height:1.95;font-size:13px;overflow-wrap:anywhere}
.help-card h3,.wheel-shop h3 {margin-bottom:12px}
.wheel-shop {border:2px solid #d4af37;background:linear-gradient(150deg,#29200d,#110f0b);margin-top:22px}
.shop-packages {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}
.package-card {display:flex;flex-direction:column;gap:9px;padding:16px 5px;border:1px solid #cda43e;border-radius:12px;background:#302613;color:#ffebae;cursor:pointer;font-family:inherit}
.package-card strong {font-size:13px}.package-card span {font-weight:800;font-size:18px}.package-card small {font-size:10px}
.package-card:disabled{opacity:.55;cursor:default}.payment-box{margin:18px 0;padding:16px;border:1px solid #cda43e;border-radius:12px;background:#100e08}
.payment-box label {display:block;margin-top:14px}.payment-warning{color:#ffe099;background:#493913;padding:12px;border-radius:8px}
.copy-field {font-family:monospace;user-select:all;unicode-bidi:plaintext;min-width:0;width:100%}
.order-row {display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;padding:12px;margin:6px 0;border:1px solid #6c582f;border-radius:9px;background:#1c180f;color:#f9eac9;font-family:inherit;text-align:right}
.reward-list>div {display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #5d4a28;font-size:13px}
.top-user {min-width:0}.top-actions{flex-shrink:0}.top-user h1 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:380px){.top-actions{gap:3px}.top-actions .icon-btn{width:30px;height:34px}.brand-mark{display:none}.package-card strong{font-size:11px}.package-card span{font-size:16px}}
@media(prefers-reduced-motion:reduce){.dice-cube.stable-die.rolling,.die-pod:nth-child(2) .dice-cube.stable-die.rolling{animation:none}}