:root {
  color-scheme: dark;
  --bg: #030714;
  --bg-2: #08112b;
  --panel: rgba(13, 26, 63, .66);
  --panel-2: #0b1636;
  --blue: #2b6cff;
  --cyan: #18b5ff;
  --ink: #f4f7ff;
  --muted: #93a4cc;
  --line: rgba(120, 160, 255, .16);
  --green: #40e0a0;
  --red: #ff7b8a;
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--bg); font: 400 15px/1.6 Manrope, system-ui, sans-serif; overflow-x: hidden; }
body.modal-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
h1, h2, h3, h4, strong, b { font-family: Sora, system-ui, sans-serif; letter-spacing: -.035em; }
h1, h2, h3, p { margin-top: 0; }
.hidden { display: none !important; }
.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.gradient-text { color: transparent; background: linear-gradient(90deg, #73a3ff, var(--cyan)); -webkit-background-clip: text; background-clip: text; }
.ambient { position: fixed; z-index: -1; width: 540px; height: 540px; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; }
.ambient-a { top: -280px; left: 14%; background: #286bff; }
.ambient-b { top: 55%; right: -420px; background: #15aafa; }

/* Marketing navigation and hero */
.site-nav { position: fixed; z-index: 30; top: 14px; left: 50%; transform: translateX(-50%); width: min(1120px, calc(100% - 28px)); min-height: 66px; display: flex; align-items: center; gap: 28px; padding: 9px 12px 9px 20px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7, 16, 42, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 14px 50px rgba(0,0,0,.16); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 16px Sora, sans-serif; white-space: nowrap; }
.brand-mark { width: 29px; height: 27px; color: white; flex: none; }
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; color: var(--muted); font-size: 13px; }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: white; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.btn { min-height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 600 13px Sora, sans-serif; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: white; background: linear-gradient(180deg, #3d7bff, #1f55d6); border-color: #5b8fff; box-shadow: 0 10px 35px -15px #2b6cff; }
.btn-primary:hover { box-shadow: 0 0 0 5px rgba(43,108,255,.15), 0 13px 38px -12px #2b6cff; }
.btn-ghost { background: rgba(255,255,255,.035); color: var(--ink); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-large { min-height: 53px; padding: 14px 26px; font-size: 14px; }
.btn-small { min-height: 35px; padding: 7px 13px; font-size: 11px; }
.btn-full { width: 100%; }
.btn-white { background: #fff; color: #0a1739; border-color: white; }
.btn-outline-light { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.26); color: #fff; }
.hero { position: relative; padding-top: 165px; text-align: center; isolation: isolate; }
.hero-grid { position: absolute; z-index: -1; inset: 65px -15vw auto; height: 670px; background-image: linear-gradient(rgba(120,160,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,255,.08) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse 55% 55% at 50% 36%, #000, transparent 100%); opacity: .45; }
.hero::before { content: ""; position: absolute; z-index: -1; top: -30px; left: 50%; width: 850px; height: 580px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(43,108,255,.28), transparent 67%); }
.eyebrow, .section-kicker, .feature-number { color: #88a7eb; font: 600 10px Sora, sans-serif; letter-spacing: .15em; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid rgba(100,150,255,.2); border-radius: 999px; background: rgba(12,26,65,.56); }
.pulse-dot, .secure-indicator i, .balance-live i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.hero h1 { max-width: 890px; margin: 27px auto 19px; font-size: clamp(42px, 7.4vw, 83px); line-height: 1.04; font-weight: 800; }
.hero-copy { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 17px; line-height: 1.8; }
.hero-actions { margin-top: 29px; display: flex; gap: 11px; align-items: center; justify-content: center; flex-wrap: wrap; }
.preview-wrap { position: relative; margin: 90px auto 0; max-width: 1000px; padding: 0 24px; }
.dashboard-preview { display: grid; grid-template-columns: 185px 1fr; min-height: 390px; overflow: hidden; border: 1px solid rgba(118,159,255,.25); border-bottom: 0; border-radius: 23px 23px 0 0; text-align: left; background: linear-gradient(180deg, #0c1739, #060c20); box-shadow: 0 -25px 100px -30px rgba(43,108,255,.48); }
.preview-sidebar { display: flex; flex-direction: column; padding: 22px 14px; border-right: 1px solid var(--line); color: #93a4cc; font-size: 11px; }
.preview-brand { display: flex; align-items: center; gap: 8px; margin: 0 0 22px 7px; color: white; font: 700 14px Sora, sans-serif; }
.mini-mark { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: white; background: linear-gradient(145deg, #4387ff, #183ea4); font: 800 14px Sora, sans-serif; }
.preview-link { padding: 10px 11px; margin: 2px 0; border-radius: 9px; }
.preview-link span { width: 21px; display: inline-block; color: #a4c1ff; }
.preview-link.active { color: white; background: rgba(43,108,255,.22); }
.preview-bottom { margin-top: auto; padding: 10px; color: #51658f; font: 600 8px Sora, sans-serif; letter-spacing: .1em; }
.preview-content { padding: 24px; }
.preview-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; }
.muted-label { color: #7f96c7; font: 600 9px Sora, sans-serif; letter-spacing: .13em; }
.preview-top h3 { font-size: 20px; margin: 5px 0 0; }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); color: #a7c4ff; background: rgba(43,108,255,.18); font: 700 10px Sora; }
.preview-metrics { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; }
.metric-card { min-height: 104px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.035); }
.metric-card small { display: block; color: #8ea1cb; font-size: 10px; }
.metric-card strong { display: block; margin: 8px 0 3px; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric-main { background: radial-gradient(ellipse at 90% 90%, rgba(43,108,255,.23), transparent 65%), rgba(255,255,255,.035); }
.metric-note, .metric-positive { color: #758bb9; font-size: 9px; }
.metric-positive { color: var(--green); }
.preview-table { margin-top: 17px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.table-heading { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 11px; }
.table-heading span { color: #82b9ff; }
.preview-row { min-height: 46px; display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(120,160,255,.1); font-size: 10px; }
.transaction-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; }
.transaction-icon.in { color: var(--green); background: rgba(64,224,160,.11); }
.transaction-icon.out { color: #83b9ff; background: rgba(43,108,255,.13); }
.transaction-name { flex: 1; display: flex; flex-direction: column; line-height: 1.5; }
.transaction-name small { color: #7588b1; font-size: 9px; }
.amount-positive { color: var(--green); font: 600 10px Sora; }
.amount-neutral { color: #e5ebff; font: 600 10px Sora; }
.status-pill { padding: 3px 8px; border-radius: 99px; color: #54e6ac; background: rgba(64,224,160,.12); font-size: 8px; white-space: nowrap; }
.float-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid rgba(142,181,255,.46); border-radius: 16px; background: linear-gradient(145deg, rgba(35,76,174,.96), rgba(7,22,69,.98)); box-shadow: 0 23px 50px -25px #000, 0 0 34px -12px rgba(43,108,255,.9); animation: float 6s ease-in-out infinite; }
.float-chip b, .float-chip small { display: block; text-align: left; }
.float-chip b { font: 600 10px Sora; }
.float-chip small { color: #aac3ff; font-size: 8px; }
.chip-icon, .chip-check { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.15); font: 800 16px Sora; }
.chip-check { color: #43ecad; }
.chip-one { left: -13px; top: -31px; }
.chip-two { right: -12px; top: 90px; animation-delay: -2.5s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
.trust-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 33px 0 20px; border-bottom: 1px solid var(--line); }
.trust-strip > div { display: flex; align-items: center; justify-content: center; gap: 11px; }
.trust-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); color: #92b5ff; background: rgba(255,255,255,.04); font-size: 17px; }
.trust-strip b, .trust-strip small { display: block; }
.trust-strip b { font: 600 11px Sora; }
.trust-strip small { color: var(--muted); font-size: 9px; }

/* Marketing sections */
.section { padding-top: 115px; padding-bottom: 35px; }
.section-intro { max-width: 700px; margin-bottom: 39px; }
.section-intro h2 { margin: 12px 0 15px; font-size: clamp(34px, 5vw, 55px); line-height: 1.12; }
.section-intro p { max-width: 510px; margin: 0; color: var(--muted); }
.centered { margin-inline: auto; text-align: center; }
.centered p { margin-inline: auto; }
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
.feature-card { min-height: 275px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; grid-column: span 2; padding: 27px; border: 1px solid var(--line); border-radius: 23px; background: var(--panel); transition: transform .25s, border-color .25s; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(105,158,255,.44); }
.feature-large { grid-column: span 4; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; background: radial-gradient(ellipse at 80% 0, rgba(43,108,255,.25), transparent 60%), var(--panel); }
.feature-wide { grid-column: span 6; min-height: 210px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; }
.feature-card h3 { margin: 11px 0 8px; font-size: 20px; }
.feature-card p { margin: 0; max-width: 440px; color: var(--muted); font-size: 13px; }
.feature-number { margin-bottom: 9px; font-size: 9px; }
.feature-symbol { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: auto; border-radius: 15px; border: 1px solid rgba(107,160,255,.2); color: #91bbff; background: rgba(43,108,255,.14); font-size: 23px; }
.feature-visual { min-height: 160px; display: flex; flex-direction: column; justify-content: center; padding: 20px; border: 1px solid rgba(135,177,255,.3); border-radius: 17px; background: linear-gradient(145deg, rgba(33,87,211,.53), rgba(8,24,73,.9)); box-shadow: 0 16px 40px -27px #000; }
.visual-label { color: #b4ceff; font: 600 9px Sora; letter-spacing: .12em; }
.visual-balance strong { margin: 8px 0; font-size: 29px; font-variant-numeric: tabular-nums; }
.visual-line { width: 100%; height: 1px; margin: 5px 0 10px; background: rgba(255,255,255,.18); }
.visual-caption { color: #aac3f5; font-size: 9px; }
.history-visual { display: flex; flex-direction: column; gap: 7px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(4,12,34,.55); }
.history-visual > div { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid rgba(120,160,255,.1); font-size: 10px; }
.history-visual > div:last-child { border-bottom: 0; }
.history-visual b { margin-left: auto; color: var(--green); font-size: 10px; }
.history-dot { width: 7px; height: 7px; border-radius: 50%; }
.history-dot.green { background: var(--green); }
.history-dot.blue { background: #5b99ff; }
.brand-section { margin-top: 105px; padding: 90px 0; background: radial-gradient(ellipse at 25% 50%, rgba(43,108,255,.24), transparent 35%), linear-gradient(180deg, transparent, rgba(6,15,40,.7), transparent); }
.brand-section-inner { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 65px; }
.brand-orbit { position: relative; width: min(310px, 70vw); aspect-ratio: 1; margin: auto; display: grid; place-items: center; }
.orbit { position: absolute; inset: 0; border: 1px dashed rgba(121,177,255,.31); border-radius: 50%; animation: spin 34s linear infinite; }
.orbit-two { inset: 26px; border-style: solid; border-color: rgba(24,181,255,.19); animation-duration: 50s; animation-direction: reverse; }
.orbit-core { width: 125px; height: 125px; display: grid; place-items: center; border: 1px solid rgba(140,190,255,.5); border-radius: 35px; background: linear-gradient(145deg, #347eff, #0a286d); box-shadow: 0 0 85px rgba(24,181,255,.31), inset 0 1px rgba(255,255,255,.35); }
.orbit-core svg { width: 80px; }
@keyframes spin { to { transform: rotate(360deg); } }
.brand-section-copy h2 { max-width: 570px; margin: 13px 0; font-size: clamp(31px, 4.5vw, 53px); line-height: 1.12; }
.brand-section-copy p { max-width: 510px; color: var(--muted); line-height: 1.8; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.step-card { min-height: 180px; padding: 25px; border: 1px solid var(--line); border-radius: 21px; background: var(--panel); }
.step-card > span { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 12px; background: linear-gradient(145deg, #3d7bff, #1b4fd0); font: 700 12px Sora; }
.step-card h3 { margin: 0 0 8px; font-size: 17px; }
.step-card p { margin: 0; color: var(--muted); font-size: 12px; }
.final-cta { padding-top: 105px; padding-bottom: 100px; }
.final-card { overflow: hidden; position: relative; padding: 75px 25px; text-align: center; border: 1px solid rgba(90,150,255,.4); border-radius: 32px; background: radial-gradient(ellipse at 50% 0, rgba(43,108,255,.47), transparent 67%), #050c24; }
.final-card::after { content: "M"; position: absolute; right: -8px; bottom: -145px; color: rgba(255,255,255,.025); font: 800 330px Sora; pointer-events: none; }
.final-card h2 { position: relative; margin: 15px auto; font-size: clamp(31px, 5vw, 52px); line-height: 1.12; }
.final-card p { position: relative; max-width: 500px; margin: 0 auto 26px; color: var(--muted); }
.final-card .btn { position: relative; z-index: 1; }

/* Application shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 245px 1fr; }
.app-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 27px 17px 17px; border-right: 1px solid var(--line); background: rgba(5,13,34,.86); }
.sidebar-brand { padding: 0 10px 27px; font-size: 14px; }
.sidebar-brand .brand-mark { width: 25px; }
.sidebar-label { padding: 8px 12px; color: #6179a8; font: 600 9px Sora; letter-spacing: .12em; }
.side-link { width: 100%; display: flex; align-items: center; gap: 12px; margin: 2px 0; padding: 11px 13px; border: 1px solid transparent; border-radius: 11px; color: #9baccf; background: transparent; text-align: left; font-size: 12px; transition: all .2s; }
.side-link span { width: 19px; display: inline-flex; justify-content: center; color: #91b8ff; font-size: 15px; }
.side-link:hover { color: white; background: rgba(255,255,255,.045); }
.side-link.active { color: white; border-color: rgba(75,130,255,.19); background: rgba(43,108,255,.17); }
.sidebar-label-gap { margin-top: 22px; }
.sidebar-spacer { flex: 1; }
.sidebar-profile { display: flex; align-items: center; gap: 9px; padding: 13px 5px 2px; border-top: 1px solid var(--line); }
.profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 12px; color: #c8dcff; background: linear-gradient(145deg, #397dff, #142f7a); font: 700 10px Sora; }
.sidebar-profile > span:nth-child(2) { min-width: 0; flex: 1; }
.sidebar-profile b, .sidebar-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile b { font: 600 10px Sora; }
.sidebar-profile small { color: #8295be; font-size: 9px; }
.icon-button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.03); }
.app-main { min-width: 0; padding: 33px clamp(20px,4vw,55px) 60px; }
.app-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
.app-topbar h1 { margin: 5px 0 0; font-size: 28px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.secure-indicator { display: inline-flex; align-items: center; gap: 8px; color: #9eafd2; font-size: 10px; }
.secure-indicator i { width: 6px; height: 6px; }
.mobile-menu { display: none; }
.welcome-banner { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; min-height: 150px; padding: 26px 31px; border: 1px solid rgba(92,150,255,.25); border-radius: 20px; background: radial-gradient(ellipse at 87% 20%, rgba(43,108,255,.3), transparent 44%), linear-gradient(110deg, #0c1b49, #08132f); }
.welcome-banner h2 { margin: 7px 0 5px; font-size: 24px; }
.welcome-banner p { max-width: 480px; margin: 0; color: #9daed4; font-size: 12px; }
.banner-mark { color: rgba(255,255,255,.08); font: 800 110px/.8 Sora; transform: rotate(-7deg); }
.wallet-balance-card { margin-top: 16px; padding: 24px 27px; border: 1px solid rgba(106,166,255,.32); border-radius: 20px; background: radial-gradient(ellipse at 85% 100%, rgba(24,181,255,.18), transparent 45%), linear-gradient(135deg, #1246a9, #0a1f62 72%, #091944); box-shadow: 0 17px 60px -37px rgba(43,108,255,.8); }
.balance-card-top { display: flex; justify-content: space-between; align-items: center; color: #c3d7ff; font-size: 11px; }
.balance-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; color: #c1f4df; background: rgba(64,224,160,.12); font-size: 9px; }
.balance-live i { width: 5px; height: 5px; }
.balance-amount { margin: 5px 0 15px; font: 700 clamp(32px,5vw,43px) Sora; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.balance-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.balance-actions .btn { min-height: 37px; padding: 8px 15px; font-size: 10px; }
.summary-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin: 15px 0; }
.summary-cards article { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.summary-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; font-size: 15px; }
.summary-icon.blue { color: #a7c8ff; background: rgba(43,108,255,.17); }
.summary-icon.cyan { color: #7be2ff; background: rgba(24,181,255,.14); }
.summary-icon.violet { color: #c6b1ff; background: rgba(130,90,255,.15); }
.summary-cards small, .summary-cards b { display: block; }
.summary-cards small { color: var(--muted); font-size: 9px; }
.summary-cards b { margin-top: 2px; font: 600 12px Sora; }
.content-card { margin-top: 15px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }
.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.card-heading h3, .content-card > h3, .form-card h3, .result-card h3 { margin: 0 0 4px; font-size: 17px; }
.card-heading p, .content-card > p, .form-card > p, .result-card > p { margin: 0; color: var(--muted); font-size: 11px; }
.text-button { border: 0; padding: 4px 0; color: #8ec5ff; background: transparent; font-size: 10px; white-space: nowrap; }
.transaction-list { display: flex; flex-direction: column; }
.transaction-item { min-height: 61px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(120,160,255,.1); }
.transaction-item:first-child { border-top: 0; }
.transaction-item .transaction-icon { width: 34px; height: 34px; flex: none; border-radius: 11px; font-size: 15px; }
.transaction-meta { min-width: 0; flex: 1; }
.transaction-meta b, .transaction-meta small { display: block; }
.transaction-meta b { font: 600 11px Sora; }
.transaction-meta small { margin-top: 2px; color: #7e92bb; font-size: 9px; }
.transaction-value { text-align: right; white-space: nowrap; }
.transaction-value b, .transaction-value small { display: block; }
.transaction-value b { font: 600 11px Sora; font-variant-numeric: tabular-nums; }
.transaction-value small { margin-top: 3px; color: #8395ba; font-size: 8px; }
.empty-state { padding: 30px 15px; color: #8194bd; text-align: center; font-size: 11px; }
.form-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); gap: 15px; align-items: start; }
.form-card, .result-card, .side-info { padding: 27px; }
.form-card > p { margin-bottom: 22px; }
.form-card form { margin-top: 22px; }
.form-card label, .auth-form label, .admin-settings-grid label { display: block; margin: 14px 0 6px; color: #b5c5e5; font-size: 10px; font-weight: 600; }
.form-card input, .auth-form input, .admin-settings-grid input, .search-input { width: 100%; min-height: 45px; padding: 11px 13px; border: 1px solid rgba(120,160,255,.22); border-radius: 11px; color: white; background: rgba(2,8,25,.56); outline: none; font-size: 12px; }
.form-card input::placeholder, .auth-form input::placeholder, .search-input::placeholder { color: #60749d; }
.form-card input:focus, .auth-form input:focus, .admin-settings-grid input:focus, .search-input:focus { border-color: rgba(86,151,255,.8); box-shadow: 0 0 0 3px rgba(43,108,255,.1); }
.money-input { display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid rgba(120,160,255,.22); border-radius: 11px; background: rgba(2,8,25,.56); }
.money-input span { color: #8fa5d1; font: 600 12px Sora; }
.money-input input { border: 0; background: transparent; padding-inline: 0; font: 700 22px Sora; }
.money-input input:focus { box-shadow: none; }
.quick-values { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 18px; }
.quick-values button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 99px; color: #a7c1f6; background: rgba(255,255,255,.035); font-size: 9px; }
.quick-values button:hover { border-color: #5c92ff; background: rgba(43,108,255,.15); }
.form-card .btn-full { margin-top: 18px; }
.form-note { margin-top: 12px; color: #7185b0; font-size: 9px; }
.result-card { border-color: rgba(65,221,162,.24); }
.result-status { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 15px; color: #77e9b9; font-size: 10px; }
.result-status span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(64,224,160,.13); }
.qr-image { width: 185px; height: 185px; display: block; object-fit: contain; margin: 16px auto; padding: 9px; border-radius: 12px; background: white; }
.copy-field { margin-top: 15px; }
.copy-field textarea { width: 100%; padding: 12px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; color: #bdd0f5; background: rgba(2,8,25,.65); font-size: 10px; overflow-wrap: anywhere; }
.result-amount { margin: 14px 0; color: #c2d7ff; font: 600 20px Sora; text-align: center; }
.notice-box { display: flex; gap: 10px; margin: 18px 0; padding: 12px; border: 1px solid rgba(116,160,255,.18); border-radius: 11px; color: #a1b6df; background: rgba(43,108,255,.08); }
.notice-box p { margin: 0; font-size: 9px; }
.side-info { min-height: 190px; }
.side-info h3 { margin: 15px 0 8px; font-size: 17px; }
.side-info p { color: var(--muted); font-size: 11px; }
.muted-paragraph { margin: 0 0 20px !important; }
.fee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.fee-grid > div { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.fee-grid small, .fee-grid b { display: block; }
.fee-grid small { color: var(--muted); font-size: 10px; }
.fee-grid b { margin-top: 6px; font: 600 13px Sora; }

/* Admin */
.admin-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.admin-kpi { padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.admin-kpi small, .admin-kpi b { display: block; }
.admin-kpi small { color: var(--muted); font-size: 9px; }
.admin-kpi b { margin-top: 5px; font: 700 19px Sora; font-variant-numeric: tabular-nums; }
.admin-settings-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px 14px; }
.admin-settings-grid label { margin-top: 8px; }
.admin-settings-grid input[type=number] { display: block; margin-top: 5px; }
.admin-toggle { display: flex !important; align-items: center; gap: 8px; }
.admin-toggle input, .check-row input { width: 15px; height: 15px; min-height: 0; accent-color: var(--blue); }
.admin-settings-grid .btn { align-self: end; margin-top: 16px; }
.search-input { max-width: 245px; min-height: 37px; padding: 8px 11px; font-size: 10px; }
.admin-user { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(120,160,255,.1); }
.admin-user > span:first-child { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; background: rgba(43,108,255,.16); color: #a8c8ff; font: 700 10px Sora; }
.admin-user-main { min-width: 0; flex: 1; }
.admin-user-main b, .admin-user-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-main b { font: 600 10px Sora; }
.admin-user-main small { color: #8397c1; font-size: 9px; }
.admin-user button { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; background: rgba(255,255,255,.04); font-size: 9px; }
.admin-user button.blocked { color: #ff9ba8; }

/* Auth modals */
.modal-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 18px; overflow-y: auto; background: rgba(0,4,16,.78); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); }
.auth-modal { position: relative; width: min(455px,100%); max-height: calc(100vh - 36px); overflow-y: auto; padding: 30px; border: 1px solid rgba(116,163,255,.26); border-radius: 24px; background: radial-gradient(ellipse at 90% 0, rgba(43,108,255,.16), transparent 52%), #09132f; box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.modal-close { position: absolute; top: 17px; right: 17px; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 10px; color: #aab9d9; background: rgba(255,255,255,.04); font-size: 20px; line-height: 1; }
.auth-brand { margin-bottom: 25px; font-size: 14px; }
.auth-brand .brand-mark { width: 24px; height: 23px; }
.auth-heading { margin-bottom: 18px; }
.auth-heading h2 { margin: 6px 0; font-size: 25px; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.google-button { width: 100%; min-height: 45px; display: flex; justify-content: center; align-items: center; gap: 11px; border: 1px solid rgba(130,165,230,.25); border-radius: 11px; color: #f3f6ff; background: rgba(255,255,255,.04); font: 600 11px Sora; }
.google-button:hover { background: rgba(255,255,255,.08); }
.google-g { color: #fff; font: 800 17px Arial; text-shadow: 1px 1px #4285f4, -1px -1px #34a853; }
.divider-label { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #6f83af; font-size: 9px; }
.divider-label::before, .divider-label::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.auth-form label { margin-top: 12px; }
.auth-form input { min-height: 43px; }
.auth-form .btn { margin-top: 17px; }
.auth-switch { margin: 16px 0 0; color: #8397c1; text-align: center; font-size: 10px; }
.auth-switch button { border: 0; padding: 0; color: #89bfff; background: none; font-weight: 700; }
.form-two { display: grid; grid-template-columns: 1.5fr .7fr; gap: 10px; }
.form-two label { margin-top: 0; }
.form-two input { width: 100%; }
.check-row { display: flex !important; align-items: flex-start; gap: 9px; margin: 13px 0 0 !important; color: #91a5cf !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1.55; }
.check-row input { margin: 2px 0 0; flex: none; }
.check-row a { color: #91bdff; text-decoration: underline; }
.auth-footnote { margin-top: 19px; padding-top: 14px; border-top: 1px solid var(--line); color: #667ca7; text-align: center; font-size: 9px; }
.verify-notice { padding: 18px 0 5px; text-align: center; }
.verify-icon { width: 55px; height: 55px; display: grid; place-items: center; margin: 0 auto 14px; border: 1px solid rgba(68,224,163,.24); border-radius: 18px; color: #72e5b7; background: rgba(64,224,160,.1); font-size: 23px; }
.verify-notice h3 { margin-bottom: 7px; font-size: 19px; }
.verify-notice p { color: var(--muted); font-size: 11px; }
.profile-modal { width: min(440px,100%); }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: min(390px, calc(100% - 44px)); padding: 13px 17px; border: 1px solid rgba(120,160,255,.3); border-radius: 13px; color: white; background: #10234f; box-shadow: 0 15px 45px rgba(0,0,0,.4); font-size: 11px; }
.toast.error { border-color: rgba(255,123,138,.4); background: #401c37; }

/* Responsive */
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .feature-card { grid-column: span 3; }
  .feature-large { grid-column: span 6; }
  .feature-wide { grid-column: span 6; }
  .brand-section-inner { gap: 35px; }
  .admin-kpis { grid-template-columns: repeat(2,1fr); }
  .app-shell { grid-template-columns: 210px 1fr; }
}
@media (max-width: 680px) {
  .wrap { width: min(100% - 32px, 1160px); }
  .site-nav { top: 8px; min-height: 58px; padding: 7px 8px 7px 13px; }
  .site-nav .brand { font-size: 13px; }
  .site-nav .brand-mark { width: 24px; }
  .nav-actions .btn { min-height: 37px; padding: 8px 12px; font-size: 10px; }
  .nav-actions .btn-ghost { display: none; }
  .hero { padding-top: 135px; }
  .hero h1 { font-size: clamp(38px, 11vw, 57px); }
  .hero-copy { font-size: 14px; }
  .hero-actions .btn { width: 100%; }
  .preview-wrap { margin-top: 73px; padding: 0; }
  .dashboard-preview { grid-template-columns: 1fr; border-radius: 18px 18px 0 0; }
  .preview-sidebar { display: none; }
  .preview-content { padding: 16px; }
  .preview-top h3 { font-size: 16px; }
  .preview-metrics { grid-template-columns: 1fr 1fr; }
  .metric-main { grid-column: span 2; }
  .metric-card { min-height: 83px; padding: 12px; }
  .metric-card strong { font-size: 15px; }
  .preview-row { gap: 7px; }
  .preview-row .status-pill { display: none; }
  .float-chip { padding: 8px 10px; border-radius: 12px; }
  .float-chip b { font-size: 8px; }
  .float-chip small { font-size: 7px; }
  .chip-icon, .chip-check { width: 24px; height: 24px; }
  .chip-one { left: -5px; top: -28px; }
  .chip-two { right: -5px; top: 76px; }
  .trust-strip { grid-template-columns: 1fr 1fr; gap: 15px 7px; padding-top: 23px; }
  .trust-strip > div { justify-content: flex-start; }
  .trust-icon { width: 31px; height: 31px; flex: none; }
  .trust-strip b { font-size: 9px; }
  .trust-strip small { font-size: 8px; }
  .section { padding-top: 78px; }
  .section-intro h2 { font-size: 37px; }
  .feature-card, .feature-large, .feature-wide { grid-column: span 6; }
  .feature-large { grid-template-columns: 1fr; }
  .feature-visual { min-height: 135px; }
  .feature-wide { grid-template-columns: 1fr; }
  .brand-section { margin-top: 55px; padding: 65px 0; }
  .brand-section-inner { grid-template-columns: 1fr; text-align: center; }
  .brand-section-copy h2, .brand-section-copy p { margin-inline: auto; }
  .brand-orbit { width: 230px; }
  .orbit-core { width: 97px; height: 97px; border-radius: 28px; }
  .orbit-core svg { width: 62px; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 0; }
  .step-card > span { margin-bottom: 13px; }
  .final-cta { padding-top: 75px; padding-bottom: 60px; }
  .final-card { padding: 55px 18px; }
  .app-shell { display: block; }
  .app-sidebar { position: fixed; z-index: 35; top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: auto; display: block; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-right: 0; background: rgba(5,13,34,.96); }
  .sidebar-brand, .sidebar-label, .sidebar-spacer, .sidebar-profile { display: none; }
  #adminNav { display: contents; }
  .sidebar-label-gap { display: none; }
  .app-sidebar .side-link { width: auto; min-width: 0; display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 7px 9px; border: 0; border-radius: 10px; font-size: 8px; }
  .app-sidebar .side-link span { font-size: 15px; }
  .app-main { padding: 23px 15px calc(95px + env(safe-area-inset-bottom)); }
  .app-topbar { margin-bottom: 16px; }
  .app-topbar h1 { font-size: 22px; }
  .secure-indicator { font-size: 8px; }
  .welcome-banner { min-height: 126px; padding: 20px; }
  .welcome-banner h2 { font-size: 19px; }
  .welcome-banner p { font-size: 10px; max-width: 260px; }
  .banner-mark { font-size: 66px; }
  .wallet-balance-card { padding: 20px; }
  .summary-cards { grid-template-columns: 1fr; gap: 8px; }
  .summary-cards article { padding: 11px 13px; }
  .content-card { padding: 17px; }
  .card-heading { align-items: flex-start; }
  .card-heading h3 { font-size: 14px; }
  .transaction-item { gap: 8px; }
  .transaction-value b { font-size: 9px; }
  .transaction-meta b { font-size: 10px; }
  .form-layout { grid-template-columns: 1fr; }
  .form-card, .result-card, .side-info { padding: 19px; }
  .fee-grid { grid-template-columns: 1fr; }
  .admin-kpis { gap: 8px; }
  .admin-kpi { padding: 12px; }
  .admin-kpi b { font-size: 16px; }
  .admin-settings-grid { grid-template-columns: 1fr; }
  .admin-settings-grid .btn { width: 100%; }
  .search-input { max-width: 140px; }
  .admin-user { gap: 7px; }
  .admin-user button { padding: 5px 7px; font-size: 8px; }
  .modal-backdrop { padding: 10px; align-items: end; }
  .auth-modal { max-height: calc(100vh - 20px); padding: 23px 20px; border-radius: 22px 22px 15px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.tx-check-button { display: inline-flex; margin-top: 4px; padding: 3px 7px; border: 1px solid rgba(120,160,255,.2); border-radius: 7px; color: #9cc5ff; background: rgba(43,108,255,.1); font-size: 8px; }
.tx-check-button:hover { border-color: rgba(120,160,255,.55); background: rgba(43,108,255,.18); }
.tx-check-button:disabled { opacity: .55; cursor: wait; }

/* Developer API */
.developer-api-intro{align-items:center}
.developer-api-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:16px;margin-bottom:16px}
.developer-api-create-card,.developer-api-guide-card,.developer-api-keys-card{min-width:0}
.developer-api-create-card .account-form{max-width:560px}
.developer-api-create-card .account-form select{width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);color:var(--ink);padding:11px 13px}
.developer-api-create-card .account-form select option{color:#111}
.developer-api-secret{display:grid;gap:10px;margin-top:18px;padding:15px;border:1px solid rgba(64,224,160,.3);border-radius:14px;background:rgba(64,224,160,.055)}
.developer-api-secret b{font:650 13px Sora,sans-serif}
.developer-api-secret p{margin:4px 0 0;color:var(--muted);font-size:11px}
.developer-api-secret code{display:block;padding:12px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.24);color:#dce9ff;font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;user-select:all}
.developer-api-steps{display:grid;gap:13px;margin:0;padding:0;list-style:none;counter-reset:api-step}
.developer-api-steps li{display:grid;gap:3px;grid-template-columns:27px 1fr;counter-increment:api-step}
.developer-api-steps li:before{content:counter(api-step);grid-row:span 2;display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line);border-radius:8px;color:#a8c3ff;background:rgba(43,108,255,.12);font:700 10px Sora}
.developer-api-steps b{font:650 12px Sora,sans-serif}
.developer-api-steps span{color:var(--muted);font-size:11px}
.developer-api-steps code{color:#c2d9ff}
.developer-api-base{display:grid;gap:5px;margin:18px 0 12px;padding:12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025)}
.developer-api-base small{color:var(--muted);font-size:10px}
.developer-api-base code{color:#c6dcff;font-size:11px;overflow-wrap:anywhere}
.developer-api-keys-card{margin-bottom:14px}
.developer-api-key-row{padding:15px 0;border-bottom:1px solid var(--line)}
.developer-api-key-row:last-child{border-bottom:0;padding-bottom:0}
.developer-api-key-main{display:grid;gap:8px;min-width:0}
.developer-api-key-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.developer-api-key-heading>b{font:650 13px Sora,sans-serif}
.developer-api-badge,.developer-api-state{display:inline-flex;align-items:center;width:max-content;border:1px solid var(--line);border-radius:999px;padding:3px 8px;color:var(--muted);font-size:9px;font-weight:800}
.developer-api-badge.is-live{color:#f5c78d;border-color:rgba(245,199,141,.25);background:rgba(245,199,141,.06)}
.developer-api-badge.is-test{color:#a8c3ff;border-color:rgba(130,168,255,.25);background:rgba(130,168,255,.06)}
.developer-api-state.is-ready{color:#8fe0bd;border-color:rgba(64,224,160,.22)}
.developer-api-state.is-revoked{color:#ff9ca7;border-color:rgba(255,123,138,.23)}
.developer-api-key-main>code{color:#c7d9ff;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}
.developer-api-key-main>small{color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.developer-api-webhook-url{overflow-wrap:anywhere}
.developer-api-row-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.developer-api-row-actions button{min-height:32px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.035);color:var(--ink);font-size:10px;font-weight:650}
.developer-api-row-actions button:hover{background:rgba(255,255,255,.08)}
.developer-api-row-actions button.danger{color:#ff9ca7;border-color:rgba(255,123,138,.22)}
.developer-api-security-note{margin:12px 2px;color:var(--muted);font-size:11px;line-height:1.7}
@media(max-width:760px){.developer-api-grid{grid-template-columns:1fr}.developer-api-intro{align-items:flex-start;flex-direction:column}}