:root {
  color-scheme: dark;
  --bg-1: #0e141b;
  --bg-2: #181f26;
  --panel: #202934;
  --line: #3a4959;
  --text: #f1f3f8;
  --muted: #9fa5ad;
  --subtle: #bfc4ca;
  --blue: #3a83fe;
  --blue-dark: #17489b;
  --green: #08783c;
  --danger: #f25b65;
  --player: #0b5484;
  --tie: #256906;
  --banker: #6f0a39;
  font-family: Poppins, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #070b0f; color: var(--text); }
body { display: flex; justify-content: center; overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #78adff; outline-offset: 2px; }
.hidden { display: none !important; }

.loading-screen {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 35%, #172638, #0e141b 58%); color: var(--subtle); text-align: center;
}
.loading-mark { display: flex; justify-content: center; gap: 7px; }
.loading-mark span { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); animation: loading 900ms infinite alternate ease-in-out; }
.loading-mark span:nth-child(2) { animation-delay: 150ms; }
.loading-mark span:nth-child(3) { animation-delay: 300ms; }
@keyframes loading { to { transform: translateY(-10px); opacity: .45; } }

.app-shell {
  position: relative; width: min(100vw, 375px); min-height: 100dvh; overflow: hidden;
  background: var(--bg-2); box-shadow: 0 0 60px #000; opacity: 1; transition: opacity 220ms ease;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
.app-shell.is-loading { opacity: 0; }
.topbar {
  height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-1); position: relative; z-index: 20;
}
.brand-button { border: 0; padding: 0; background: transparent; font-weight: 650; font-size: 16px; letter-spacing: -.25px; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.icon-button, .balance-pill {
  height: 32px; border: 1px solid var(--line); border-radius: 8px; background: rgba(40,48,57,.6);
  box-shadow: inset 0 0 3px rgba(64,90,119,.6); display: inline-flex; align-items: center; justify-content: center;
}
.icon-button { width: 32px; padding: 5px; }
.icon-button img { width: 21px; height: 21px; object-fit: contain; }
.balance-pill { min-width: 88px; padding: 0 9px; gap: 5px; font-size: 14px; font-weight: 650; }
.coin { border-radius: 50%; color: #fff; background: #ff8a00; border: 2px dashed #fff; display: inline-grid; place-items: center; }
.coin-small { width: 20px; height: 20px; font-size: 10px; }

.primary, .secondary {
  border-radius: 8px; min-height: 48px; border: 1px solid var(--line); font-weight: 600; cursor: pointer;
}
.primary { border-color: #4c8bf6; background: linear-gradient(#3a83fe, #17489b); box-shadow: inset 0 1px rgba(255,255,255,.23); }
.primary:active:not(:disabled) { transform: translateY(1px); filter: brightness(.92); }
.primary:disabled { opacity: .45; color: var(--subtle); cursor: default; }
.primary.compact { min-height: 32px; padding: 0 16px; font-size: 12px; }
.secondary { background: rgba(40,48,57,.68); color: var(--subtle); }
.secondary:disabled { color: #66717c; cursor: default; }

.table-section {
  position: relative; height: 322px; overflow: hidden;
  background: #076a36 url('/assets/table-felt.png') center top / 100% 314px no-repeat;
  isolation: isolate;
}
.felt-noise {
  display: none;
}
.card-shoe {
  position: absolute; z-index: 7; top: 0; left: 142px; width: 88px; height: 54px;
  overflow: hidden;
}
.shoe-card {
  position: absolute; width: 52px; height: 72.82px;
  border-radius: 2px; background: #fff url('/assets/card-back-figma.png') center / cover;
  box-shadow: 0 1px 3.534px rgba(23,23,23,.32);
}
.shoe-card:nth-child(1) { left:25px; top:-31px; }
.shoe-card:nth-child(2) { left:24px; top:-32px; }
.shoe-card:nth-child(3) { left:23px; top:-33px; }
.shoe-card:nth-child(4) { left:22px; top:-34px; }
.shoe-card:nth-child(5) { left:21px; top:-35px; }
.shoe-card:nth-child(6) { left:20px; top:-36px; }
.shoe-card:nth-child(7) { left:19px; top:-37px; }
.shoe-card:nth-child(8) { left:18px; top:-38px; }
.shoe-card:nth-child(9) { left:17px; top:-39px; }
.shoe-card:nth-child(10) { left:16px; top:-40px; }
.shoe-card:nth-child(11) { left:15px; top:-41px; }
.shoe-card:nth-child(12) { left:14px; top:-42px; }
.table-hud { position: absolute; top: 12px; left: 0; width: 100%; display: flex; justify-content: center; gap: 114px; }
.hud-pill { min-width: 45px; height: 24px; padding: 2px 8px; border-radius: 6px; background: rgba(7,61,27,.68); display: grid; place-items: center; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.deal-area { position: absolute; top: 96px; left: 0; right: 0; height: 107px; }
.hand-zone { position: absolute; top: 0; width: 120px; height: 107px; text-align: center; transition: 300ms ease; }
.hand-zone[data-side="PLAYER"] { left: 25px; }
.hand-zone[data-side="BANKER"] { right: 24px; }
.hand-zone::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 89px; background: rgba(3,78,41,.44); border-radius: 8px; box-shadow: inset 0 0 28px rgba(0,0,0,.08); transition: 260ms ease; }
.hand-zone.winner::before { background: linear-gradient(180deg, rgba(44,131,255,.86), rgba(23,72,155,.72)); box-shadow: 0 0 0 1px #61a0ff, 0 6px 24px rgba(26,91,210,.4); }
.hand-zone strong { position: absolute; top: 85px; left: 0; right: 0; font-size: 16px; line-height: 21.2px; }
.cards { position: absolute; z-index: 3; left: 8px; top: 0; width: 104.8px; height: 72.8px; }
.playing-card {
  position: absolute; width: 52px; height: 72.8px; border-radius: 3px; background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); overflow: hidden; transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.playing-card:nth-child(1) { left: 0; z-index: 1; }.playing-card:nth-child(2) { left: 16px; z-index: 2; }
.playing-card.third { left: 42.4px; top: -.4px; z-index: 3; transform: rotate(-90deg); }
.card-sprite { background-image: url('/assets/card-sheet.png'); background-repeat: no-repeat; background-size: 959.03px 444.83px; }
.card-sprite.rank-a { background-position-x: -49.03px; }
.card-sprite.rank-2 { background-position-x: -112.17px; }
.card-sprite.rank-3 { background-position-x: -175.31px; }
.card-sprite.rank-4 { background-position-x: -239.20px; }
.card-sprite.rank-5 { background-position-x: -303.09px; }
.card-sprite.rank-6 { background-position-x: -366.29px; }
.card-sprite.rank-7 { background-position-x: -429.49px; }
.card-sprite.rank-8 { background-position-x: -491.89px; }
.card-sprite.rank-9 { background-position-x: -554.17px; }
.card-sprite.rank-10 { background-position-x: -616.57px; }
.card-sprite.rank-j { background-position-x: -678.97px; }
.card-sprite.rank-q { background-position-x: -740.63px; }
.card-sprite.rank-k { background-position-x: -803.06px; }
.card-sprite.suit-clubs { background-position-y: -46.06px; }
.card-sprite.suit-spades { background-position-y: -133.71px; }
.card-sprite.suit-hearts { background-position-y: -220.63px; }
.card-sprite.suit-diamonds { background-position-y: -308.29px; }
.score-board { position: absolute; z-index: 6; left: 144px; top: 21px; display: flex; gap: 13px; pointer-events: none; }
.score-pill { width: 38px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: rgba(57,57,57,.4); backdrop-filter: blur(10px); font-size: 14px; line-height: 18px; font-weight: 600; }
.score-pill.winner { border: 1px solid #4c8bf6; background: linear-gradient(#3a83fe,#17489b 121.43%); }
.me-marker { position: absolute; z-index: 5; left: 50%; top: 241px; width: 36px; height: 57px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.me-dot { width: 36px; height: 36px; flex: 0 0 36px; background: url('/assets/me-marker.svg') center / 36px 36px no-repeat; mix-blend-mode: multiply; }
.me-marker small { font-size: 12px; line-height: 18px; font-weight: 500; }
.me-chip { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; padding: 0; border-radius: 50%; background: #fff; color: #b96000; border: 4px dashed #f58a00; display: grid; place-items: center; font-size: 11px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.table-rail {
  position: absolute; z-index: 4; left: 0; top: 260px; width: 100%; height: 62px;
  background: url('/assets/table-rail.png') center / 100% 62px no-repeat;
  -webkit-mask: url('/assets/table-rail-wood.svg') center top / 100% 59.74px no-repeat;
  mask: url('/assets/table-rail-wood.svg') center top / 100% 59.74px no-repeat;
}
.flying-layer { position: absolute; inset: 0; z-index: 12; pointer-events: none; perspective: 900px; }
.flying-card {
  position: absolute; width: 52px; height: 72.8px; left: calc(50% - 26px); top: -25px;
  border-radius: 3px; background: #fff; transform-style: preserve-3d; isolation: isolate; will-change: transform;
}
.flying-card .face {
  position: absolute; inset: 0; border-radius: 3px; overflow: hidden; background-color: #fff;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,.5); will-change: transform;
}
.flying-card .back { background: #fff url('/assets/card-back-figma.png') center / cover; transform: rotateY(0deg) translateZ(.1px); }
.flying-card .front { background-color: #fff; transform: rotateY(180deg) translateZ(.1px); }

.betting-panel { height: 328px; background: var(--bg-2); }
.bet-zones { position: relative; z-index: 5; height: 164px; }
.bet-zone { position: absolute; top: 0; bottom: 0; width: 32.8%; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 9px; overflow: visible; }
.bet-zone::before { content: ""; position: absolute; left: 0; width: 100%; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.player-bet { left: 0; }.player-bet::before { top: -35px; height: 198.5px; background-image: url('/assets/bet-player.svg?v=3'); }
.tie-bet { left: 33.6%; }.tie-bet::before { top: 0; height: 163.3px; background-image: url('/assets/bet-tie.svg?v=3'); }
.banker-bet { right: 0; }.banker-bet::before { top: -35.5px; height: 198.5px; background-image: url('/assets/bet-banker.svg?v=3'); transform: scaleX(-1); transform-origin: center; }
.bet-zone strong { position: absolute; z-index: 1; top: 76px; margin: 0; font-size: 20px; line-height: 30px; }.bet-zone small { position: absolute; z-index: 1; top: 112px; font-size: 12px; line-height: 18px; opacity: .9; }
.bet-zone:active:not(:disabled) { filter: brightness(1.24); }
.bet-zone:disabled { opacity: 1; }
.bet-zone:disabled strong, .bet-zone:disabled small { opacity: .68; }
.placed-chip { position: absolute; z-index: 2; top: 28px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #b96000; border: 4px dashed #f58a00; font-size: 11px; font-weight: 700; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.chip-tray-wrap { height: 94px; padding: 10px 8px 14px; display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; }
.chip-tray { display: flex; align-items: center; gap: 12px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; background: #101820; border-block: 1px solid var(--line); scroll-behavior: smooth; }
.chip-tray::-webkit-scrollbar { display: none; }
.tray-arrow { border: 1px solid var(--line); background: #344354; color: var(--muted); font-size: 30px; }.tray-arrow:first-child { border-radius: 8px 0 0 8px; }.tray-arrow:last-child { border-radius: 0 8px 8px 0; }
.chip { position: relative; flex: 0 0 42px; height: 50px; border: 0; background: transparent; border-radius: 50%; padding: 0; display: grid; place-items: center; }
.chip img { position: relative; z-index: 1; width: 38px; height: 38px; display: block; }
.chip > span { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.chip[data-chip="5"] > span { color: #2f6822; }
.chip[data-chip="10"] > span { color: #0b7180; }
.chip[data-chip="50"] > span { color: #0b5484; }
.chip[data-chip="100"] > span { color: #8a5a00; }
.chip[data-chip="500"] > span { color: #3b29a6; }
.chip[data-chip="1000"] > span { color: #752f80; }
.chip[data-chip="5000"] > span { color: #922425; }
.chip[data-chip="10000"] > span { color: #b1095a; }
.chip::before { content: ""; position: absolute; z-index: 0; width: 46px; height: 46px; border-radius: 50%; border: 2px solid transparent; background: transparent; transition: border-color 160ms ease, background-color 160ms ease; }
.chip.selected::before { border-color: #3a83fe; background: rgba(58,131,254,.2); }
.bet-actions { height: 70px; display: grid; grid-template-columns: 1fr 1.7fr 1fr; gap: 2px; }.bet-actions button { border-radius: 0; height: 60px; }

.result-panel { min-height: 328px; background: var(--bg-1); padding: 20px 14px 30px; display: flex; flex-direction: column; gap: 36px; }
.result-card { min-height: 190px; border: 1px solid var(--blue); border-radius: 12px; background: linear-gradient(160deg,rgba(15,108,193,.3),rgba(14,100,180,.09)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; animation: result-in 420ms both ease-out; }
.result-label { position: absolute; align-self: flex-start; margin: -147px 0 0 13px; font-weight: 600; font-size: 14px; }.result-card strong { color: var(--blue); font-size: 18px; }.result-card p { margin: 0; font-weight: 600; }.continue-button { width: 100%; }
@keyframes result-in { from { transform: translateY(14px); opacity: 0; } }
.connection-banner { position: absolute; z-index: 80; top: 52px; left: 50%; transform: translateX(-50%); background: #80313a; border: 1px solid #f25b65; border-radius: 999px; padding: 7px 13px; font-size: 12px; }

.subpage { position: absolute; inset: 0; z-index: 50; min-height: 100dvh; background: var(--bg-1); overflow-y: auto; animation: slide-page 240ms ease-out; }
@keyframes slide-page { from { transform: translateX(34px); opacity: 0; } }
.subpage-header { position: sticky; top: 0; z-index: 3; height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; background: rgba(14,20,27,.96); border-bottom: 1px solid #25313d; backdrop-filter: blur(16px); }
.subpage-header h1 { margin: 0; font-size: 17px; text-align: center; }.back-button { height: 48px; border: 0; background: transparent; color: var(--blue); font-size: 34px; }
.page-content { padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
.wallet-hero { min-height: 204px; padding: 24px; border: 1px solid #36506b; border-radius: 16px; background: radial-gradient(circle at 80% 0,#234777,transparent 46%), linear-gradient(145deg,#172b40,#101b27); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.wallet-hero small { color: var(--subtle); }.wallet-hero strong { margin-top: 8px; font-size: 34px; }.wallet-hero strong em { font-style: normal; font-size: 14px; color: var(--subtle); }.wallet-hero p { margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.virtual-badge { margin-bottom: 18px; padding: 4px 8px; border: 1px solid #4e7195; border-radius: 999px; color: #91b9df; font-size: 9px; letter-spacing: .14em; }
.stat-grid { margin: 14px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.stat-grid div { padding: 16px; background: var(--bg-2); border: 1px solid #2d3945; border-radius: 12px; }.stat-grid small { display: block; color: var(--muted); }.stat-grid strong { display: block; margin-top: 8px; }
.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.asset-transactions { width:100%; min-height:52px; margin:0 0 18px; padding:0 16px; border:1px solid #2c3946; border-radius:12px; background:var(--bg-2); display:flex; align-items:center; justify-content:space-between; color:var(--text); font-size:14px; }.asset-transactions img { width:18px; height:18px; transform:rotate(180deg); }
.ledger-list { display:flex; flex-direction:column; }.ledger-row { min-height:86px; padding:14px 2px; border-bottom:1px solid #27333f; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }.ledger-row > div { display:flex; flex-direction:column; gap:4px; min-width:0; }.ledger-row > div:last-child { text-align:right; align-items:flex-end; }.ledger-row b { font-size:13px; text-transform:capitalize; }.ledger-row small,.ledger-row time,.ledger-row span { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.ledger-row strong { font-size:15px; }.ledger-row strong.positive { color:#07dda5; }.ledger-row strong.negative { color:#ff6b79; }
.list-row { width: 100%; min-height: 70px; margin-bottom: 10px; padding: 14px 16px; border: 1px solid #2c3946; border-radius: 12px; background: var(--bg-2); color: var(--text); display: flex; align-items: center; justify-content: space-between; text-decoration: none; text-align: left; }.list-row span { display: flex; flex-direction: column; gap: 5px; }.list-row b { font-size: 15px; }.list-row small { color: var(--muted); }.list-row i { color: var(--muted); font-size: 23px; font-style: normal; }
.record-list { display: flex; flex-direction: column; gap: 10px; }.empty-state { min-height: 330px; display: grid; place-content: center; text-align: center; color: var(--muted); }.empty-state b { color: var(--text); margin-bottom: 7px; }.record-card { padding: 16px; border: 1px solid #2c3946; background: var(--bg-2); border-radius: 12px; }.record-card header { display: flex; justify-content: space-between; }.record-card header b { font-size: 14px; }.record-card header span { color: #73a9ff; font-size: 12px; }.record-card dl { margin: 13px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.record-card dt { color: var(--muted); font-size: 11px; }.record-card dd { margin: 2px 0 0; font-size: 13px; }
.order-reason { margin:12px 0 0; padding:10px 12px; border-radius:8px; background:#17212c; color:var(--muted); font-size:12px; line-height:1.45; }.order-reason b { display:block; margin-bottom:2px; color:var(--text); }
.form-page { display: flex; flex-direction: column; gap: 18px; }.form-page label { display: flex; flex-direction: column; gap: 8px; color: var(--subtle); font-size: 13px; }.form-page input, .field-button, .address-field { width: 100%; height: 54px; border: 1px solid #364554; border-radius: 10px; background: var(--bg-2); color: white; padding: 0 14px; text-align: left; }.form-page input::placeholder { color: #68737e; }.field-button, .address-field { display: flex; align-items: center; justify-content: space-between; }.field-button small { margin-left: 6px; color: var(--muted); }.field-button i, .address-field i { color: var(--blue); font-style: normal; }.address-field code { overflow: hidden; text-overflow: ellipsis; color: #d6dfeb; }
.notice-card { padding: 14px; border: 1px solid #34587a; border-radius: 10px; background: #12253a; color: #8dc2ff; }.notice-card p { margin: 5px 0 0; color: #90a5bb; font-size: 12px; }
.qr-card { width: 128px; height: 128px; margin: -4px auto 0; padding: 12px; border-radius: 12px; background: white; }.qr-card span { display: block; width: 100%; height: 100%; background: repeating-conic-gradient(#101820 0 25%,#fff 0 50%) 0 0/18px 18px; border: 8px solid #fff; outline: 7px dotted #101820; outline-offset: -14px; }
.upload-field input { position: absolute; opacity: 0; pointer-events: none; }.upload-field b { min-height: 76px; border: 1px dashed #46596a; border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-weight: 500; }.form-submit { margin-top: 6px; width: 100%; }
.fee-card { border: 1px solid #2e3b48; border-radius: 10px; overflow: hidden; }.fee-card p { margin: 0; padding: 12px 14px; display: flex; justify-content: space-between; color: var(--muted); border-bottom: 1px solid #2b3742; font-size: 13px; }.fee-card p:last-child { border: 0; }.fee-card b { color: var(--text); }.fee-card .receive { background: #15243a; color: var(--text); }
.settings-list { padding-top: 28px; }.language-list button { width: 100%; height: 62px; padding: 0 16px; border: 0; border-bottom: 1px solid #27333f; background: transparent; display: flex; align-items: center; justify-content: space-between; }.language-list i { color: var(--blue); visibility: hidden; }.language-list button.selected i { visibility: visible; }
.rule-editor { display: flex; flex-direction: column; gap: 12px; }.rule-row { padding: 14px; border: 1px solid #2f3c49; border-radius: 12px; background: var(--bg-2); }.rule-row header { display: flex; justify-content: space-between; margin-bottom: 12px; }.rule-row header small { color: var(--muted); }.rule-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }.rule-fields label { font-size: 10px; }.rule-fields input { height: 44px; padding: 0 8px; }
.rules-copy h2 { margin: 26px 0 7px; font-size: 16px; }.rules-copy p { color: var(--muted); line-height: 1.65; font-size: 14px; }

/* Figma subpages */
.subpage { background: var(--bg-2); }
.subpage-header {
  height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0;
  grid-template-columns: 24px minmax(0,1fr) 24px; gap: 8px; background: var(--bg-2); border-bottom: 0;
}
.subpage-header h1 { text-align: left; font-size: 16px; line-height: 24px; }
.back-button, .header-icon { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.back-button img { width: 24px; height: 24px; }.header-icon img { width: 18px; height: 22px; }
.page-content { padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }
.outline-primary { min-height: 50px; border: 2px solid var(--blue); border-radius: 12px; background: transparent; color: white; font-weight: 600; }

.asset-page { padding-top: 16px; }
.asset-card { position: relative; height: 230px; overflow: hidden; border-radius: 12px; background: linear-gradient(99deg,rgba(50,117,230,.2),rgba(50,117,230,.108)); }
.asset-card::before, .asset-card::after { content:""; position:absolute; width:160px; height:120px; border-radius:50%; background:radial-gradient(circle,#245bad55,transparent 70%); }
.asset-card::before { left:-55px; top:25px; }.asset-card::after { right:-55px; top:-70px; }
.asset-card section { position: relative; z-index: 1; height: 115px; padding: 14px 16px; }
.asset-card section + section { border-top: 1px solid #ffffff10; }
.asset-card section > b { font-size: 14px; }.asset-card section p { margin: 21px 0 0; display:flex; align-items:center; gap:10px; }
.asset-card section p img { width:32px; height:32px; }.asset-card section p strong { font-size:16px; }.asset-card section p span { margin-left:auto; color:var(--muted); font-size:16px; }
.asset-locked { position:absolute; z-index:2; right:16px; top:96px; color:var(--muted); font-weight:500; }.asset-locked b { color:var(--text); }
.wallet-actions { grid-template-columns:150px 150px; justify-content:center; gap:24px; margin:22px 0 34px; }.wallet-actions button { height:50px; }
.asset-note { height:190px; padding:14px 15px; border:1px solid #283039; border-radius:12px; }
.asset-note > b { font-size:14px; }.asset-note div { height:48px; display:flex; align-items:center; gap:7px; border-bottom:1px solid #283039; }
.asset-note div img:first-child { width:24px; height:24px; }.asset-note div img:nth-of-type(2) { width:24px; height:24px; margin-left:8px; }
.asset-note div strong, .asset-note div span { font-size:14px; }.asset-note p { margin:15px 0 0; color:#7f8692; font-size:14px; line-height:20px; }

.history-page { padding-top:12px; }.history-head, .order-history-head { display:grid; color:#7f8692; font-size:12px; }
.history-head { grid-template-columns:1fr 1fr; }.history-head span:last-child { text-align:right; }
.history-row { min-height:79px; padding:14px 0; border-bottom:1px solid #202933; display:grid; grid-template-columns:1fr 1fr; }
.history-row div { display:flex; flex-direction:column; gap:7px; }.history-row div:last-child { align-items:flex-end; }
.history-side { font-size:13px; font-weight:500; }.history-side.player { color:#3a83fe; }.history-side.tie { color:#54d932; }.history-side.banker { color:#ff2670; }
.history-amount { display:flex; align-items:center; gap:7px; font-size:13px; }.history-amount img { width:20px; height:20px; }
.history-result { font-size:13px; }.history-result.win { color:#45e32e; }.history-result.loss { color:#9fa5ad; }.history-result.push { color:#ffb64d; }
.history-time { color:#bfc4ca; font-size:12px; }
.history-list { display:flex; flex-direction:column; gap:12px; }
.load-more { width:100%;height:46px;margin:14px 0 4px;border:1px solid #38516b;border-radius:10px;background:#162331;color:#8ebcff;font-size:13px;font-weight:700; }.load-more:disabled { opacity:.55;cursor:wait; }
.round-history-card { padding:14px; border:1px solid #2b3540; border-radius:12px; background:#20272f; }
.round-history-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.round-history-card > header div { display:flex; flex-direction:column; gap:4px; }.round-history-card > header small { color:var(--muted); font-size:11px; }
.round-history-card > header strong { font-size:14px; }.round-history-card .round-outcome { color:var(--blue); text-align:right; }
.history-hands { margin:14px 0; padding:12px 0; border-block:1px solid #303a45; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.history-hand { display:flex; flex-direction:column; gap:8px; }.history-hand:last-child { align-items:flex-end; }.history-hand b { font-size:12px; color:var(--subtle); }
.history-cards { display:flex; gap:4px; }.history-mini-card { min-width:26px; height:36px; padding:3px; border-radius:4px; background:#f7f7f7; color:#101317; display:flex; flex-direction:column; justify-content:space-between; font-size:10px; font-weight:800; line-height:1; box-shadow:0 2px 4px #0006; }.history-mini-card.red { color:#c9252d; }.history-mini-card.third { transform:rotate(90deg); margin:0 5px; }
.history-bets { display:flex; flex-wrap:wrap; gap:6px; }.history-bet-pill { padding:5px 8px; border-radius:999px; background:#16202a; color:var(--subtle); font-size:11px; }.history-bet-pill.player { border:1px solid #176ca5; }.history-bet-pill.tie { border:1px solid #3a8b20; }.history-bet-pill.banker { border:1px solid #a7245c; }
.history-totals { margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.history-totals div { display:flex; flex-direction:column; gap:3px; }.history-totals small { color:var(--muted); font-size:10px; }.history-totals b { font-size:12px; }.history-totals .positive { color:#07dda5; }.history-totals .negative { color:#ff6b79; }
.history-meta { margin-top:11px; color:#77828e; font-size:9px; overflow-wrap:anywhere; }.history-mini-card i { font-style:normal; }

.transaction-page { padding-top:16px; gap:0; }
.transaction-page > label { gap:12px; margin-bottom:16px; color:var(--text); font-size:14px; font-weight:600; }
.amount-field { position:relative; height:50px; }.amount-field input { height:50px; padding:0 52px 0 16px; border:0; background:#283039; font-size:16px; font-weight:600; }
.amount-field img { position:absolute; right:16px; top:13px; width:24px; height:24px; }
.inline-rate { min-height:24px; margin:-2px 0 20px; display:flex; align-items:center; justify-content:flex-end; gap:4px; color:var(--muted); font-size:14px; }
.inline-rate img { width:24px; height:24px; }
.currency-picker { width:100%; height:60px; padding:0 16px; border:1px solid #283039; border-radius:12px; background:transparent; display:flex; align-items:center; justify-content:space-between; }
.currency-picker span { display:flex; align-items:center; gap:14px; }.currency-picker span img { width:32px; height:32px; }.currency-picker > img { width:8px; height:14px; transform:rotate(180deg); }
.deposit-qr { margin:10px auto 26px; display:flex; flex-direction:column; align-items:center; gap:16px; }.deposit-qr img { width:169px; height:169px; }.deposit-qr b { font-size:20px; }
.deposit-address { width:100%; min-height:80px; padding:14px 16px 14px 18px; border:1px solid #283039; border-radius:12px; background:transparent; display:flex; align-items:center; gap:12px; text-align:left; }
.deposit-address code { flex:1; color:var(--text); white-space:normal; overflow-wrap:anywhere; font:600 14px/20px inherit; }.deposit-address img { width:26px; height:26px; }
.proof-field { position:relative; }.proof-field input { position:absolute; opacity:0; pointer-events:none; }.proof-field > b { min-height:100px; display:grid; grid-template-columns:100px 1fr; align-items:center; gap:24px; color:#b0b0b0; font-size:14px; line-height:20px; font-weight:600; }
.proof-field > b::before { content:""; position:absolute; width:98px; height:98px; border:1px solid #283039; border-radius:12px; }
.proof-field img { position:relative; z-index:1; width:44px; height:44px; margin-left:28px; }.proof-field b span { padding-right:8px; }
.transaction-page .form-submit { height:50px; min-height:50px; border-radius:12px; font-size:16px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.withdrawal-page .market-rate { margin:-4px 0 20px 16px; color:var(--muted); font-size:14px; }
.receive-field { height:60px; padding:0 12px 0 22px; border:1px solid #283039; border-radius:12px; display:flex; align-items:center; justify-content:space-between; }.receive-field strong { font-size:16px; }.receive-field img { width:32px; height:32px; }
.fee-summary { margin:-2px 0 22px 16px; color:var(--muted); }.fee-summary p { margin:0 0 8px; font-size:14px; }.fee-summary b { font-weight:500; }
.withdrawal-page textarea { height:100px; resize:none; padding:18px; border:1px solid #283039; border-radius:12px; background:transparent; color:white; font:600 14px/20px inherit; }
.withdrawal-page textarea::placeholder { color:#909090; }

.currency-list { padding:23px; display:flex; flex-direction:column; gap:10px; }.currency-list button { height:60px; padding:0 20px; border:0; border-radius:10px; background:#283039; display:flex; align-items:center; gap:20px; font-size:16px; }
.currency-list button img { width:32px; height:32px; }.currency-list button.selected { background:#41556d; box-shadow:inset 0 0 0 1px #2864c9; }
.order-history-page { padding-top:12px; }.order-history-head { grid-template-columns:112px 1fr 104px; padding-bottom:10px; border-bottom:1px solid #202933; }.order-history-head span:last-child { text-align:right; }
.order-history-row { width:100%; min-height:50px; padding:0; display:grid; grid-template-columns:112px 1fr 104px; align-items:center; border:0; border-bottom:1px solid #202933; background:transparent; text-align:left; font-size:13px; }.order-history-row > span:first-child { display:flex; align-items:center; gap:8px; }.order-history-row img { width:22px; height:22px; }.order-history-row time { color:var(--text); }.order-status { text-align:right; }.order-status.pending { color:#3a83fe; }.order-status.completed { color:#07dda5; }.order-status.failed { color:#ff416c; }
.record-card { width:100%; color:var(--text); text-align:left; }
.order-detail-page { display:flex; flex-direction:column; gap:16px; }.order-detail-hero { min-height:150px; padding:20px; border-radius:14px; background:linear-gradient(145deg,#183252,#17212c); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; }.order-detail-hero small { color:var(--muted); }.order-detail-hero strong { font-size:28px; }.order-detail-hero span { padding:4px 9px; border-radius:999px; background:#21456d; color:#8fc1ff; font-size:11px; }
.order-detail-fields { margin:0; padding:4px 16px; border:1px solid #2b3540; border-radius:12px; }.order-detail-fields div { min-height:48px; display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:12px; border-bottom:1px solid #2b3540; }.order-detail-fields div:last-child { border:0; }.order-detail-fields dt { color:var(--muted); font-size:12px; }.order-detail-fields dd { margin:0; text-align:right; overflow-wrap:anywhere; font-size:12px; }.order-detail-reason { margin:0; padding:13px; border-radius:10px; background:#351d25; color:#ffbdcb; font-size:12px; line-height:1.5; }

.settings-list { padding:8px 16px 0; display:flex; flex-direction:column; gap:20px; }.settings-row { width:100%; height:52px; padding:0 16px; border:0; border-radius:12px; background:#20272f; display:flex; align-items:center; justify-content:space-between; font-size:14px; }.settings-row img { width:18px; height:18px; transform:rotate(180deg); }
.owner-form { padding-top:12px; gap:20px; }.rule-editor { gap:14px; }.rule-row { position:relative; padding:16px 10px 22px; border:0; border-radius:12px; background:#20272f; }
.rule-row header { margin:0 6px 14px; }.rule-row header small { color:var(--muted); }.rule-fields { grid-template-columns:1fr 28px 1fr; gap:8px; }.rule-fields label { gap:8px; font-size:14px; }.rule-fields label:nth-child(2)::before { content:"To"; position:absolute; left:50%; margin-top:43px; transform:translateX(-50%); color:var(--text); font-size:14px; }.rule-fields label:nth-child(2) { grid-column:3; }.rule-fields label:nth-child(3) { grid-column:1 / -1; }
.rule-fields input { height:60px; border:1px solid #283039; background:#20272f; font-size:20px; }.rule-fields label:nth-child(3) { margin-top:4px; }.rule-fields label:nth-child(3)::after { content:"%"; position:absolute; right:28px; margin-top:44px; color:white; font-size:20px; }
.rule-remove { position:absolute; right:14px; top:12px; border:0; background:transparent; color:#f25b65; font-size:12px; }.add-rule { width:100%; }.owner-form .form-submit { height:50px; }
.limit-card { padding:15px 16px 5px; border-radius:12px; background:#20272f; }.limit-card > b { display:block; margin-bottom:10px; font-size:14px; }.limit-card label { height:48px; margin:0; display:grid; grid-template-columns:1fr 90px 18px 20px; align-items:center; gap:10px; border-bottom:1px solid #283039; }.limit-card label:last-child { border-bottom:0; }.limit-card label span { color:var(--subtle); }.limit-card input { height:36px; padding:0; border:0; background:transparent; text-align:right; }.limit-card img { width:16px; height:16px; }.limit-card img:last-child { width:20px; height:20px; }
.language-list { padding:23px; display:flex; flex-direction:column; gap:20px; }.language-list button { height:60px; padding:0 17px; border:0; border-radius:10px; background:#283039; font-size:16px; }.language-list button.selected { background:#41556d; box-shadow:inset 0 0 0 1px #2864c9; }.language-list i { display:none; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: max(26px, calc(14px + env(safe-area-inset-bottom))); transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 999px; background: #f1f3f8; color: #17202a; box-shadow: 0 8px 30px #0009; font-size: 13px; white-space: nowrap; animation: toast-in 220ms ease-out; }
@keyframes toast-in { from { transform: translate(-50%,10px); opacity: 0; } }

@media (min-width: 431px) {
  .app-shell { min-height: 700px; margin-block: 24px; border-radius: 20px; }
  .subpage { border-radius: 20px; }
}
@media (max-height: 650px) {
  .table-section { height: 294px; }.betting-panel { height: 306px; }.bet-zones { height: 146px; }.chip-tray-wrap { height: 88px; }
  .deal-area { top: 78px; }.me-marker { top: 221px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}