/* ============================================================ NEONBET · Account view (designer account.css, SPA-integrated) ------------------------------------------------------------ The supplied account.css, scoped under #nb-account and reduced to the shipped sections only: Account header, sidebar nav (Profile / Verification / Logout), Profile (read-only), Verification (disabled KYC). The supplied Bonuses / Favorites / Sessions / limits / self-exclusion / toggle / stat-grid CSS is intentionally NOT ported (those sections don't ship). Below the design block: the SPA integration layer — view visibility (body.acct-open, same model as body.cp-open / body.gd-open) and a scoped .container primitive (there is no global .container in the live cascade). ============================================================ */ /* ---- View visibility (in-flow sibling of #nb-home / #nb-games / #nb-game) ---- */ #nb-account { display: none; } body.acct-open #nb-account { display: block; } body.acct-open #nb-home, body.acct-open #nb-games, body.acct-open #nb-game { display: none !important; } /* Content panels & Game Details take precedence over Account when opened. */ body.cp-open #nb-account, body.gd-open #nb-account { display: none !important; } /* Scoped site-grid primitive (every view defines its own copy). */ #nb-account .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); } @media (min-width: 768px) { #nb-account .container { padding: 0 var(--space-8); } } /* ---- Header card ---- */ #nb-account .acct-header { position: relative; margin: var(--space-8) 0 var(--space-6); padding: var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); background: radial-gradient(800px 300px at 90% 10%, rgba(139,92,255,0.18), transparent 60%), radial-gradient(600px 300px at 10% 90%, rgba(0,229,255,0.10), transparent 60%), var(--bg-surface); display: grid; gap: var(--space-5); grid-template-columns: 1fr; } @media (min-width: 760px) { #nb-account .acct-header { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6); } } #nb-account .acct-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--grad-primary); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--text-inverse); box-shadow: 0 0 24px rgba(255,46,147,0.40); } #nb-account .acct-id .name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); margin: 0; text-transform: uppercase; letter-spacing: 0.03em; } #nb-account .acct-id .email { color: var(--text-secondary); font-size: var(--text-sm); margin: 4px 0 0; display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } #nb-account .acct-id .unverified { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; border-radius: var(--radius-pill); color: var(--warning); background: rgba(255,181,71,0.10); border: 1px solid rgba(255,181,71,0.30); } #nb-account .tier-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: linear-gradient(135deg, rgba(232,194,106,0.18), rgba(255,46,147,0.10)); border: 1px solid rgba(232,194,106,0.35); color: var(--gold-premium); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); } #nb-account .tier-badge .lbl { color: var(--text-secondary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.02em; } #nb-account .tier-badge svg { width: 16px; height: 16px; color: var(--gold-premium); } /* ---- Layout: sidebar + main ---- */ #nb-account .acct-shell { display: grid; gap: var(--space-6); grid-template-columns: 1fr; padding-bottom: var(--space-20); } @media (min-width: 1024px) { #nb-account .acct-shell { grid-template-columns: 240px 1fr; gap: var(--space-8); } } /* ---- Sidebar nav (desktop) ---- */ #nb-account .acct-nav { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3); align-self: start; position: sticky; top: calc(var(--nav-height) + var(--space-4)); } #nb-account .acct-nav-link { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; min-height: 44px; text-align: left; cursor: pointer; background: transparent; border: 1px solid transparent; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } #nb-account .acct-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; } #nb-account .acct-nav-link:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); } #nb-account .acct-nav-link:focus-visible { outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(0,229,255,0.35); } #nb-account .acct-nav-link[aria-current="true"] { background: rgba(0,229,255,0.06); color: var(--neon-cyan); box-shadow: 0 0 0 1px var(--neon-cyan) inset; } #nb-account .acct-nav-link.logout { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); color: var(--danger); } #nb-account .acct-nav-link.logout:hover { background: rgba(255,84,112,0.08); color: var(--danger); } @media (max-width: 1023px) { #nb-account .acct-nav { position: static; padding: 0; background: transparent; border: none; border-radius: 0; overflow-x: auto; margin: 0 calc(var(--space-5) * -1); padding: 0 var(--space-5); scrollbar-width: none; } #nb-account .acct-nav::-webkit-scrollbar { display: none; } #nb-account .acct-nav-inner { display: flex; gap: var(--space-2); padding-bottom: var(--space-3); } #nb-account .acct-nav-link { flex-shrink: 0; width: auto; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--bg-surface); border: 1px solid var(--border-subtle); } #nb-account .acct-nav-link[aria-current="true"] { background: rgba(0,229,255,0.10); box-shadow: none; } #nb-account .acct-nav-link.logout { margin-top: 0; padding-top: var(--space-2); border-top: none; } } /* ---- Section panels ---- */ #nb-account .acct-section { display: none; } #nb-account .acct-section.is-active { display: block; } #nb-account .acct-section h2 { margin: 0 0 var(--space-1); font-size: var(--text-2xl); } #nb-account .acct-section .section-lead { color: var(--text-secondary); margin: 0 0 var(--space-5); } #nb-account .panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-4); } #nb-account .panel h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); } #nb-account .panel .panel-lead { color: var(--text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-4); } /* Read-only note */ #nb-account .acct-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--text-sm); } #nb-account .acct-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); margin-top: 1px; } /* ---- Form grid (read-only) ---- */ #nb-account .form-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 640px) { #nb-account .form-grid { grid-template-columns: 1fr 1fr; } #nb-account .form-grid .full { grid-column: 1 / -1; } } #nb-account .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #nb-account .field label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-secondary); } #nb-account .input { height: 44px; width: 100%; padding: 0 var(--space-4); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-base); } #nb-account .input[readonly] { color: var(--text-secondary); cursor: default; } #nb-account .input[readonly]:focus { outline: none; border-color: var(--border-subtle); box-shadow: none; } /* ---- KYC zones (disabled / unavailable) ---- */ #nb-account .kyc-banner { display: flex; gap: var(--space-3); padding: var(--space-4); background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(139,92,255,0.06)); border: 1px solid rgba(0,229,255,0.25); border-radius: var(--radius-md); margin-bottom: var(--space-4); } #nb-account .kyc-banner svg { width: 22px; height: 22px; color: var(--neon-cyan); flex-shrink: 0; } #nb-account .kyc-banner h4 { margin: 0 0 4px; font-size: var(--text-base); } #nb-account .kyc-banner p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); } #nb-account .kyc-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 700px) { #nb-account .kyc-grid { grid-template-columns: repeat(3, 1fr); } } #nb-account .kyc-zone { position: relative; border: 2px dashed var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); } #nb-account .kyc-zone .icon-wrap { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.04); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); } #nb-account .kyc-zone .icon-wrap svg { width: 22px; height: 22px; } #nb-account .kyc-zone h4 { margin: 0; font-size: var(--text-base); } #nb-account .kyc-zone p { font-size: var(--text-xs); color: var(--text-muted); margin: 0; } #nb-account .kyc-zone .kyc-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; border-radius: var(--radius-pill); } /* Disabled/unavailable — no hover, muted, non-interactive. */ #nb-account .kyc-zone.is-disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } #nb-account .kyc-zone.is-disabled .kyc-status { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border-subtle); } /* ---- KYC live wiring: sr-only + loader (page-scoped copies) ---- */ #nb-account .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; } #nb-account .gv-loader { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border-subtle); border-top-color: var(--neon-cyan); animation: gv-spin 0.9s linear infinite; } @media (prefers-reduced-motion: reduce) { #nb-account .gv-loader { animation: none; } } /* Loading / load-error states */ #nb-account .kyc-loading { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 120px; color: var(--text-secondary); font-size: var(--text-sm); } #nb-account .kyc-load-error { color: var(--text-secondary); margin: 0 0 var(--space-4); } #nb-account .kyc-retry-row { margin: 0 0 var(--space-4); } /* Required / optional tag next to a document name */ #nb-account .kyc-req { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--radius-pill); color: var(--warning); background: rgba(255,181,71,0.10); border: 1px solid rgba(255,181,71,0.30); } #nb-account .kyc-req.kyc-opt { color: var(--text-muted); background: rgba(255,255,255,0.04); border-color: var(--border-subtle); } /* Status pill variants (default = neutral/not-started) */ #nb-account .kyc-zone .kyc-status { background: rgba(255,255,255,0.05); color: var(--text-secondary); border: 1px solid var(--border-subtle); } #nb-account .kyc-status.is-pending { color: var(--warning); background: rgba(255,181,71,0.10); border-color: rgba(255,181,71,0.30); } #nb-account .kyc-status.is-approved { color: var(--success); background: rgba(61,220,151,0.10); border-color: rgba(61,220,151,0.30); } #nb-account .kyc-status.is-rejected, #nb-account .kyc-status.is-reupload { color: var(--danger); background: rgba(255,84,112,0.10); border-color: rgba(255,84,112,0.30); } /* Card border accents reflect resolved status; solid (not dashed) once acted on */ #nb-account .kyc-zone.is-pending { border-style: solid; border-color: rgba(255,181,71,0.35); } #nb-account .kyc-zone.is-approved { border-style: solid; border-color: rgba(61,220,151,0.40); } #nb-account .kyc-zone.is-rejected, #nb-account .kyc-zone.is-reupload { border-style: solid; border-color: rgba(255,84,112,0.40); } /* Rejection reason / submitted-file meta / per-card error (player-safe text only) */ #nb-account .kyc-reason { font-size: var(--text-xs); color: var(--danger); margin: 0; max-width: 100%; } #nb-account .kyc-file { font-size: var(--text-xs); color: var(--text-secondary); margin: 0; max-width: 100%; word-break: break-word; } #nb-account .kyc-err { font-size: var(--text-xs); color: var(--danger); margin: 0; max-width: 100%; } /* Upload trigger (a