:root {
  --bg: #080b0f; --surface: #10151b; --surface-2: #151b22; --surface-3: #1b222a;
  --text: #f1f5f7; --muted: #86929d; --silver: #cbd3d9; --cyan: #62e9f5;
  --cyan-soft: rgba(98,233,245,.12); --line: rgba(203,211,217,.12); --danger: #ff7585;
  --radius: 20px; --shadow: 0 20px 50px rgba(0,0,0,.3);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); -webkit-tap-highlight-color: transparent; }
button, input, select { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient::before { content: ""; position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(98,233,245,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(98,233,245,.13) 1px,transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom,black,transparent 55%); }
.ambient span { position: absolute; width: 280px; height: 280px; border: 1px solid rgba(98,233,245,.07); border-radius: 50%; top: -130px; right: -90px; box-shadow: 0 0 80px rgba(98,233,245,.05), inset 0 0 80px rgba(98,233,245,.03); }
.ambient span:nth-child(2) { width: 180px; height: 180px; top: -80px; right: -40px; }
.ambient span:nth-child(3) { width: 5px; height: 5px; top: 88px; right: 53px; border: 0; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.app-shell { position: relative; width: min(100%, 560px); min-height: 100vh; margin: auto; padding: max(14px,env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)); }
.topbar { height: 52px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; background: transparent; text-align: start; }
.brand > span:last-child { display: grid; gap: 1px; }
.brand b { font-size: 15px; letter-spacing: .04em; }
.brand small { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .19em; }
.brand-core { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(98,233,245,.35); border-radius: 50%; box-shadow: inset 0 0 14px rgba(98,233,245,.1); }
.brand-core::before,.brand-core::after { content:""; position:absolute; inset:5px; border:1px solid var(--line); border-radius:50%; }
.brand-core::after { inset:11px; border-color: var(--cyan); box-shadow:0 0 8px var(--cyan); }
.brand-core i { width: 2px; height: 2px; border-radius:50%; background:white; }
.brand-core.small { width: 36px; height: 36px; flex: 0 0 auto; }
.top-actions,.network-state { display:flex; align-items:center; gap:9px; }
.network-state { padding: 7px 10px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.network-state i { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.icon-button { width:35px; height:35px; border-radius:50%; background:linear-gradient(145deg,#27313b,#13191f); border:1px solid var(--line); font-size:12px; font-weight:800; }
.screen { display:none; padding-top:24px; animation:screen-in .28s ease; }
.screen.is-active { display:block; }
@keyframes screen-in { from { opacity:0; transform:translateY(7px); } }
.eyebrow { margin:0 0 7px; color:var(--cyan); font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:29px; line-height:1.08; letter-spacing:-.035em; }
h2 { margin:0; font-size:18px; letter-spacing:-.02em; }
.welcome-row,.section-heading,.balance-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.auth-state { color:var(--muted); font-size:10px; padding:6px 9px; border-radius:99px; background:var(--surface); border:1px solid var(--line); }
.auth-state.ready { color:var(--cyan); }
.auth-state.error { color:var(--danger); }
.nano-panel { position:relative; overflow:hidden; border:1px solid rgba(203,211,217,.15); background:linear-gradient(145deg,rgba(25,33,41,.97),rgba(13,18,23,.97)); box-shadow:var(--shadow); }
.nano-panel::before { content:""; position:absolute; width:190px; height:190px; right:-85px; top:-95px; border:1px solid rgba(98,233,245,.15); border-radius:50%; box-shadow:inset 0 0 50px rgba(98,233,245,.06),0 0 50px rgba(98,233,245,.04); }
.nano-panel::after { content:""; position:absolute; width:4px; height:4px; right:44px; top:38px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.balance-card { margin-top:22px; padding:22px; border-radius:26px; }
.balance-head { color:var(--muted); font-size:12px; }
.asset-chip { color:var(--silver); border:1px solid var(--line); border-radius:99px; padding:5px 9px; font-size:9px; letter-spacing:.08em; }
.balance-value { position:relative; display:block; margin:13px 0 23px; font-size:40px; font-weight:630; letter-spacing:-.05em; }
.balance-value::after { content:" USDT"; color:var(--muted); font-size:12px; font-weight:500; letter-spacing:0; }
.balance-meta { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); padding-top:17px; }
.balance-meta span { display:grid; gap:5px; }
.balance-meta span + span { padding-inline-start:18px; border-inline-start:1px solid var(--line); }
.balance-meta small,.metric-grid small,.wallet-total small { color:var(--muted); font-size:10px; }
.balance-meta b { font-size:12px; }
.quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 29px; }
.quick-actions button { min-height:68px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 4px; border-radius:16px; background:var(--surface); border:1px solid var(--line); font-size:11px; }
.quick-actions i { display:grid; place-items:center; width:26px; height:26px; color:var(--cyan); background:var(--cyan-soft); border-radius:50%; font-style:normal; font-size:15px; }
.section-heading { margin:20px 0 12px; }
.section-heading button { color:var(--cyan); background:transparent; font-size:11px; }
.section-heading .eyebrow { margin-bottom:4px; }
.empty-state { min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; padding:25px; border:1px dashed rgba(203,211,217,.16); border-radius:var(--radius); color:var(--muted); text-align:center; }
.empty-state.compact { min-height:105px; flex-direction:row; text-align:start; justify-content:flex-start; }
.empty-state b { color:var(--silver); font-size:13px; }
.empty-state p { margin:5px 0 0; max-width:270px; font-size:11px; line-height:1.55; }
.orbital-icon { position:relative; width:37px; height:37px; flex:0 0 auto; border:1px solid rgba(98,233,245,.25); border-radius:50%; }
.orbital-icon::before { content:""; position:absolute; width:5px; height:5px; inset:15px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.orbital-icon::after { content:""; position:absolute; inset:6px -4px; border:1px solid var(--line); border-radius:50%; transform:rotate(45deg); }
.signal-card { margin-top:12px; display:flex; align-items:center; gap:12px; padding:14px; border-radius:15px; background:var(--surface); border:1px solid var(--line); }
.signal-mark { display:grid; place-items:center; width:34px; height:34px; color:var(--cyan); background:var(--cyan-soft); border-radius:10px; font-size:10px; font-weight:800; }
.signal-card div { flex:1; }
.signal-card b { font-size:11px; }.signal-card p { margin:3px 0 0; color:var(--muted); font-size:9px; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.page-heading { margin-bottom:23px; }
.page-heading > p:last-child { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.segment-control,.wallet-tabs { display:flex; gap:4px; padding:4px; margin-bottom:15px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.segment-control button,.wallet-tabs button { flex:1; padding:9px; border-radius:10px; color:var(--muted); background:transparent; font-size:11px; }
.segment-control button.is-active,.wallet-tabs button.is-active { color:var(--text); background:var(--surface-3); box-shadow:0 2px 9px rgba(0,0,0,.2); }
.package-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.package-card { position:relative; overflow:hidden; min-height:190px; padding:17px; border-radius:20px; color:var(--text); text-align:start; background:linear-gradient(145deg,var(--surface-2),#0e1318); border:1px solid var(--line); }
.package-card::after { content:""; position:absolute; width:90px; height:90px; right:-42px; bottom:-42px; border:1px solid rgba(98,233,245,.12); border-radius:50%; }
.package-card:hover { border-color:rgba(98,233,245,.38); }
.package-card .type { color:var(--muted); font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.package-card h2 { margin-top:16px; font-size:25px; }.package-card h2 small { color:var(--muted); font-size:11px; font-weight:500; }
.yield { display:block; margin:14px 0 4px; color:var(--cyan); font-size:23px; font-weight:650; }.yield small { font-size:9px; font-weight:500; text-transform:uppercase; }
.package-card p { color:var(--muted); font-size:9px; line-height:1.45; }
.package-card .arrow { position:absolute; right:15px; top:15px; color:var(--cyan); }
.risk-note { display:flex; gap:11px; margin-top:15px; padding:14px; color:var(--muted); background:rgba(255,196,90,.04); border:1px solid rgba(255,196,90,.13); border-radius:15px; }
.risk-note i { display:grid; place-items:center; width:20px; height:20px; flex:0 0 auto; border:1px solid #cba966; border-radius:50%; color:#cba966; font-style:normal; font-size:10px; }
.risk-note p { margin:0; font-size:9px; line-height:1.5; }.risk-note b,.risk-note span { display:block; }.risk-note b { color:var(--silver); margin-bottom:3px; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metric-grid article { min-height:108px; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; border:1px solid var(--line); background:var(--surface); border-radius:17px; }
.metric-grid b { margin-top:10px; font-size:22px; }.metric-grid span { color:var(--muted); font-size:9px; }
.allocation { margin-top:11px; padding:18px; border-radius:20px; }
.allocation-ring { display:grid; place-items:center; width:150px; height:150px; margin:20px auto 5px; border-radius:50%; background:conic-gradient(var(--cyan) 0deg,rgba(255,255,255,.06) 0); }
.allocation-ring::before { content:""; position:absolute; width:125px; height:125px; border-radius:50%; background:#12181e; }
.allocation-ring span { z-index:1; display:grid; text-align:center; }.allocation-ring b { font-size:25px; }.allocation-ring small { color:var(--muted); font-size:9px; }
.wallet-total { padding:22px; border-radius:22px; display:grid; gap:9px; }
.wallet-total b { font-size:31px; }.wallet-total b em { color:var(--muted); font-size:11px; font-style:normal; }.wallet-total > span { color:var(--muted); font-size:9px; }
.wallet-tabs { margin-top:17px; }
.wallet-pane { display:none; }.wallet-pane.is-active { display:block; }
.address-box,.referral-card div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.address-box span { display:grid; gap:7px; min-width:0; }.address-box small,.referral-card small { color:var(--muted); font-size:9px; }.address-box code,.referral-card code { overflow:hidden; text-overflow:ellipsis; font-size:10px; white-space:nowrap; }
.address-box button,.referral-card button { padding:7px 10px; border-radius:9px; color:var(--cyan); background:var(--cyan-soft); font-size:9px; }
.helper { margin:10px 4px; color:var(--muted); font-size:10px; line-height:1.5; }
.form-card { padding:18px; border-radius:18px; border:1px solid var(--line); background:var(--surface); }
label { display:grid; gap:8px; color:var(--silver); font-size:10px; }
label + label { margin-top:15px; }
input,select { width:100%; border:1px solid var(--line); border-radius:12px; background:#0b0f13; padding:13px; font-size:13px; outline:none; }
.input-unit { position:relative; }.input-unit b { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:10px; }.input-unit input { padding-inline-end:60px; }
.primary-button { width:100%; margin-top:18px; padding:14px; border-radius:13px; color:#031013; background:linear-gradient(135deg,#abf7fb,var(--cyan)); font-size:11px; font-weight:800; box-shadow:0 8px 24px rgba(98,233,245,.16); }
.referral-card { padding:18px; border-radius:20px; margin-bottom:11px; }.referral-card > small { display:block; margin-bottom:9px; }.referral-card div { padding:0; border:0; background:transparent; }
.profile-header { display:flex; align-items:center; gap:15px; margin:5px 0 26px; }
.profile-avatar { display:grid; place-items:center; width:61px; height:61px; flex:0 0 auto; border-radius:50%; color:var(--cyan); font-size:21px; background:linear-gradient(145deg,#26323c,#10151a); border:1px solid rgba(98,233,245,.25); box-shadow:inset 0 0 18px rgba(98,233,245,.07); }
.profile-header span { color:var(--muted); font-size:10px; }
.settings-list { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.settings-row { width:100%; min-height:58px; display:flex; align-items:center; justify-content:space-between; padding:12px 15px; background:transparent; border-bottom:1px solid var(--line); }
.settings-row:last-child { border-bottom:0; }.settings-row > span { display:flex; align-items:center; gap:11px; }.settings-row i { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; color:var(--cyan); background:var(--cyan-soft); font-style:normal; font-size:11px; }.settings-row b { font-size:11px; }.settings-row em { color:var(--muted); font-style:normal; }
.settings-row select { width:auto; padding:7px 28px 7px 9px; font-size:10px; }
.version-note { display:flex; align-items:center; gap:11px; margin-top:16px; padding:15px; border:1px solid var(--line); border-radius:17px; }.version-note p { display:grid; flex:1; margin:0; }.version-note b { font-size:11px; }.version-note small,.version-note em { color:var(--muted); font-size:9px; font-style:normal; }
.activity-list { display:grid; gap:8px; margin-top:12px; }
.activity-row { display:flex; align-items:center; gap:11px; padding:14px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.activity-icon { display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto; border-radius:10px; color:var(--cyan); background:var(--cyan-soft); font-weight:700; }
.activity-row div { display:grid; gap:4px; min-width:0; flex:1; }.activity-row b { font-size:11px; text-transform:capitalize; }.activity-row small { overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.activity-row strong { color:var(--silver); font-size:10px; white-space:nowrap; }
.admin-shell { width:min(calc(100% - 28px),900px); margin:0 auto; padding:20px 0 60px; }.admin-shell .topbar { margin-bottom:70px; }.admin-metrics { grid-template-columns:repeat(4,1fr); margin-bottom:12px; }.admin-control { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }.admin-control div { display:grid; gap:7px; }.admin-control small { color:var(--muted); font-size:9px; }.admin-control .primary-button { width:auto; margin:0; }.admin-shell > .form-card { margin-bottom:12px; }
.bottom-nav { position:fixed; z-index:20; bottom:max(10px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(calc(100% - 24px),536px); display:grid; grid-template-columns:repeat(5,1fr); padding:7px; border:1px solid rgba(203,211,217,.15); border-radius:20px; background:rgba(14,19,24,.92); box-shadow:0 15px 40px rgba(0,0,0,.45); backdrop-filter:blur(18px); }
.bottom-nav button { display:grid; place-items:center; gap:4px; min-height:49px; color:#69747e; background:transparent; font-size:8px; }
.bottom-nav i { font-size:19px; line-height:1; font-style:normal; }.bottom-nav button.is-active { color:var(--cyan); }.bottom-nav button.is-active i { text-shadow:0 0 12px rgba(98,233,245,.6); }
dialog { width:min(calc(100% - 24px),500px); max-height:calc(100vh - 24px); margin:auto auto max(12px,env(safe-area-inset-bottom)); padding:0; border:0; color:var(--text); background:transparent; }
dialog::backdrop { background:rgba(0,0,0,.75); backdrop-filter:blur(5px); }
.modal-card { position:relative; padding:24px 20px max(22px,env(safe-area-inset-bottom)); border:1px solid var(--line); border-radius:25px; background:#11171d; box-shadow:var(--shadow); }
.modal-handle { width:35px; height:3px; margin:-13px auto 20px; border-radius:9px; background:#39434c; }
.modal-close { position:absolute; right:16px; top:17px; width:28px; height:28px; border-radius:50%; color:var(--muted); background:var(--surface-3); font-size:18px; }
.modal-card h2 { font-size:24px; }.modal-copy { margin:8px 35px 21px 0; color:var(--muted); font-size:10px; line-height:1.5; }
.cycle-summary { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:15px; overflow:hidden; border-radius:12px; background:var(--line); }
.cycle-summary span { display:grid; gap:5px; padding:12px; background:var(--surface-2); }.cycle-summary small { color:var(--muted); font-size:8px; }.cycle-summary b { font-size:11px; }
.consent { grid-template-columns:auto 1fr; align-items:start; margin-top:15px; color:var(--muted); line-height:1.5; }.consent input { width:16px; height:16px; padding:0; accent-color:var(--cyan); }
.toast { position:fixed; z-index:50; left:50%; bottom:100px; max-width:calc(100% - 32px); transform:translate(-50%,20px); padding:11px 16px; border:1px solid var(--line); border-radius:99px; color:var(--silver); background:#1a2229; box-shadow:var(--shadow); opacity:0; pointer-events:none; font-size:10px; transition:.2s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
[dir="rtl"] .brand,[dir="rtl"] .package-card { text-align:right; }
[dir="rtl"] .input-unit b { right:auto; left:13px; }
@media (min-width:700px) { .app-shell { padding-inline:24px; }.package-grid { grid-template-columns:repeat(3,1fr); }.screen { padding-top:30px; } }
@media (max-width:350px) { .network-state span { display:none; }.quick-actions button { flex-direction:column; }.package-card { min-height:180px; padding:14px; } }
@media (max-width:650px) { .admin-metrics { grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }