:root {
  --bg: #090b14; --surface: #151a2a; --surface-2: #1b2236;
  --line: rgba(175,185,255,.13); --strong: rgba(137,126,255,.45);
  --violet: #6558ef; --blue: #269ee9; --text: #f4f5ff;
  --dim: #a1a8bf; --faint: #6f7891; --gold: #ffca4a;
  --ok: #49d89b; --warn: #ffca68; --bad: #ff758d; --tabs: 72px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 15px/1.42 "Avenir Next", "Segoe UI Variable", "SF Pro Display", sans-serif; overscroll-behavior-y: none; }
body { min-width: 280px; padding-bottom: calc(var(--tabs) + 18px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; background: radial-gradient(circle at 82% 4%, rgba(90,72,232,.24), transparent 26rem), linear-gradient(180deg,#0d101c,#080a12); }
button, input { font: inherit; }
.atmosphere { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(118deg,transparent 0 54%,rgba(117,100,255,.055) 54.2% 56%,transparent 56.2%),linear-gradient(62deg,transparent 0 71%,rgba(50,143,255,.04) 71.2% 73%,transparent 73.2%); mask-image: linear-gradient(#000,transparent 78%); }
.top, main, .tabs { position: relative; z-index: 1; }
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top,0px)) 17px 10px; background: linear-gradient(180deg,rgba(9,11,20,.97),rgba(9,11,20,.68),transparent); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0; border: 0; color: var(--text); background: none; text-align: left; cursor: pointer; }
.brand img { width: 38px; height: 38px; flex: none; border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 1px rgba(173,169,255,.2),0 8px 24px rgba(54,37,170,.32); }
.brand b,.brand small { display: block; }.brand b { font-size: 15px; line-height: 1.1; }.brand small { margin-top: 3px; color: var(--faint); font-size: 9px; letter-spacing: 1px; }
.balance-chip { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 99px; color: var(--text); background: rgba(25,31,49,.92); font-weight: 800; cursor: pointer; }
.star { color: var(--gold); font-style: normal; filter: drop-shadow(0 0 6px rgba(255,202,74,.3)); }
main { width: 100%; max-width: 560px; margin: 0 auto; padding: 5px 16px 24px; }
.view { animation: enter .3s cubic-bezier(.2,.8,.2,1) both; } @keyframes enter { from { opacity: 0; transform: translateY(7px); } }
.heading { margin: 7px 0 16px; }.heading>span { color: #8b82ff; font-size: 10px; font-weight: 850; letter-spacing: 1.6px; }.heading h1 { margin: 3px 0 0; font-size: clamp(25px,7vw,32px); line-height: 1.08; letter-spacing: -.8px; }.heading p { margin: 7px 0 0; color: var(--dim); }
.hero { position: relative; min-height: 142px; margin-bottom: 21px; overflow: hidden; border: 1px solid rgba(145,137,255,.25); border-radius: 24px; background: linear-gradient(135deg,rgba(41,35,128,.94),rgba(24,28,69,.97) 52%,rgba(18,41,76,.96)); box-shadow: 0 18px 50px -28px rgba(66,62,255,.95); }
.hero::before { content:""; position:absolute; inset:-60% 43% -60% -14%; transform:rotate(24deg); background:linear-gradient(90deg,transparent,rgba(145,134,255,.22),transparent); }
.hero>div { position: relative; z-index: 1; padding: 19px 0 17px 19px; }.hero small { display:block; margin-bottom:8px; color:#aaa5ff; font-size:9px; font-weight:850; letter-spacing:1.5px; }.hero strong { display:block; font-size:21px; line-height:1.12; letter-spacing:-.4px; }.hero p { margin:10px 0 0; color:#a9b4d3; font-size:12px; }
.hero img { position:absolute; top:-15px; right:-8px; width:168px; height:168px; object-fit:cover; opacity:.96; mask-image:linear-gradient(90deg,transparent 1%,#000 36%); }
.field { display:block; margin-top:17px; }.field-title { display:block; margin:0 0 8px; color:#c9ccdc; font-size:13px; font-weight:750; }.block-title { margin-top:19px; }
.input-wrap { display:flex; align-items:center; min-height:51px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:rgba(24,30,47,.9); transition:.18s; }.input-wrap:focus-within { border-color:rgba(119,107,255,.72); background:rgba(29,35,56,.99); box-shadow:0 0 0 3px rgba(87,72,232,.13); }
.input-wrap i { width:45px; flex:none; color:#7f8aa9; font-style:normal; font-size:17px; font-weight:850; text-align:center; }.input-wrap i.star { color:var(--gold); font-size:15px; }
.input-wrap input { min-width:0; flex:1; padding:14px 8px 14px 0; border:0; outline:0; color:var(--text); background:transparent; }.input-wrap input::placeholder { color:#69738c; }.input-wrap input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
.input-wrap button { flex:none; margin-right:8px; padding:7px 12px; border:0; border-radius:99px; color:#ececff; background:rgba(87,72,232,.36); font-size:12px; font-weight:800; cursor:pointer; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:9px; }.pill { min-width:0; padding:10px 3px; border:1px solid var(--line); border-radius:12px; color:#d8daea; background:rgba(24,30,47,.75); cursor:pointer; transition:.15s; }.pill:active { transform:scale(.96); }.pill.is-active { border-color:rgba(115,104,255,.75); color:#fff; background:rgba(87,72,232,.29); }.pill-amount { display:block; font-size:13px; font-weight:850; white-space:nowrap; }.pill-amount::after { content:" ★"; color:var(--gold); }.pill-price { display:none; }
.quote { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:9px; padding:11px 14px; border:1px solid rgba(74,154,255,.22); border-radius:12px; color:var(--dim); background:rgba(24,64,104,.34); font-size:13px; }.quote-price { color:var(--text); font-size:17px; font-weight:850; }
.payment { margin-top:21px; }.payment-card { display:flex; align-items:center; gap:10px; min-height:59px; padding:10px 12px; border:1px solid rgba(46,167,255,.5); border-radius:17px; background:linear-gradient(135deg,rgba(24,64,104,.88),rgba(28,40,75,.9)); }.payment-card i { display:grid; width:35px; height:35px; flex:none; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#22c5cb,#217bca); font-style:normal; font-weight:900; }.payment-card span { flex:1; }.payment-card b,.payment-card small { display:block; }.payment-card b { font-size:13px; }.payment-card small { margin-top:2px; color:#929bb4; font-size:10px; }.payment-card em { display:grid; width:20px; height:20px; place-items:center; border-radius:50%; color:#101827; background:#4bc9eb; font-size:11px; font-style:normal; font-weight:900; }
.purchase-error { min-height:18px; margin:10px 2px 0; color:var(--bad); font-size:12.5px; }.buy-button,.secondary-button { width:100%; border:0; color:#fff; cursor:pointer; transition:.15s; }.buy-button { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:0 18px; border-radius:16px; background:linear-gradient(100deg,#4235c9,#6356f4 55%,#289be7); box-shadow:0 14px 34px -18px rgba(71,103,255,.95); font-weight:850; }.buy-button:disabled { opacity:.38; cursor:default; box-shadow:none; }.buy-button:not(:disabled):active,.secondary-button:active { transform:scale(.985); }.buy-button>b { font-size:21px; }.agreement { margin:10px 15px 0; color:var(--faint); font-size:10.5px; text-align:center; }
.cards { display:flex; flex-direction:column; gap:9px; }.card { display:flex; align-items:center; justify-content:space-between; gap:13px; min-height:67px; padding:13px 15px; border:1px solid var(--line); border-radius:17px; color:var(--text); background:rgba(24,30,47,.88); text-align:left; cursor:pointer; }.card.is-active { border-color:rgba(115,104,255,.72); background:linear-gradient(110deg,rgba(87,72,232,.27),rgba(24,42,74,.9)); }.card-term,.card-note { display:block; }.card-term { font-size:16px; font-weight:800; }.card-note { margin-top:3px; color:var(--faint); font-size:11.5px; }.card-price { font-size:16px; font-weight:850; white-space:nowrap; }.badge { margin-left:7px; padding:3px 6px; border-radius:7px; color:#dfe6ff; background:rgba(46,167,255,.22); font-size:8px; letter-spacing:.8px; vertical-align:2px; }
.panel,.row { border:1px solid var(--line); border-radius:17px; background:rgba(24,30,47,.9); }.panel { padding:16px; }.subtitle { margin:26px 0 10px; font-size:17px; }.muted { margin:0 0 14px; color:var(--dim); }.muted b { color:var(--text); }.stat-row { display:flex; justify-content:space-between; gap:8px; }.stat-row.tight { margin:4px 0 14px; }.stat { min-width:0; flex:1; text-align:center; }.stat b,.stat span { display:block; }.stat b { overflow:hidden; font-size:16px; font-weight:850; text-overflow:ellipsis; }.stat span { margin-top:2px; color:var(--faint); font-size:10.5px; }
.secondary-button { min-height:49px; margin-top:11px; border-radius:14px; background:rgba(87,72,232,.78); font-weight:800; }.secondary-button.ghost { border:1px solid var(--line); background:rgba(87,72,232,.12); }.copy { width:100%; margin-bottom:2px; padding:11px 12px; overflow:hidden; border:1px dashed var(--strong); border-radius:12px; color:var(--dim); background:rgba(7,9,18,.45); font-size:11px; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.list { display:flex; flex-direction:column; gap:9px; }.row { padding:14px; }.row-top,.row-meta { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }.row-what,.row-price { font-weight:750; }.row-price { white-space:nowrap; }.row-meta { margin-top:5px; color:var(--faint); font-size:11.5px; }.status { font-weight:750; }.status.completed { color:var(--ok); }.status.paid,.status.processing,.status.new,.status.manual { color:var(--warn); }.status.refunded,.status.cancelled { color:var(--bad); }.empty { padding:34px 16px; color:var(--faint); text-align:center; }
.tabs { position:fixed; right:max(10px,calc((100vw - 540px)/2)); bottom:calc(8px + env(safe-area-inset-bottom,0px)); left:max(10px,calc((100vw - 540px)/2)); z-index:12; display:grid; grid-template-columns:repeat(4,1fr); height:var(--tabs); padding:6px; border:1px solid rgba(155,165,209,.13); border-radius:24px; background:rgba(16,21,34,.95); box-shadow:0 18px 44px rgba(0,0,0,.42); backdrop-filter:blur(20px); }.tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; border-radius:18px; color:#747e98; background:none; font-size:10px; cursor:pointer; }.tab svg { width:19px; height:19px; fill:currentColor; }.tab i { height:20px; font-size:19px; line-height:19px; }.tab.is-active { color:#b9c7ff; background:linear-gradient(145deg,rgba(87,72,232,.32),rgba(46,167,255,.16)); }.tab.is-active i { color:var(--gold); }
.sheet-wrap { position:fixed; inset:0; z-index:30; display:flex; align-items:flex-end; }.sheet-back { position:absolute; inset:0; width:100%; border:0; background:rgba(3,4,10,.78); backdrop-filter:blur(5px); }.sheet { position:relative; width:100%; max-height:88vh; padding:9px 18px calc(23px + env(safe-area-inset-bottom,0px)); overflow-y:auto; border:1px solid var(--strong); border-bottom:0; border-radius:24px 24px 0 0; background:linear-gradient(180deg,#1a2032,#0c0f1a 90%); animation:rise .25s cubic-bezier(.2,.8,.2,1); } @keyframes rise { from { transform:translateY(100%); } }.sheet-grip { width:40px; height:4px; margin:3px auto 15px; border-radius:99px; background:#454d69; }.sheet h2 { margin:0 0 8px; font-size:20px; }.sheet .btn { display:block; width:100%; margin-top:11px; padding:14px; border:0; border-radius:14px; color:#fff; background:linear-gradient(100deg,#4235c9,#6356f4,#289be7); font-weight:800; }.sheet .btn-ghost { border:1px solid var(--line); background:rgba(87,72,232,.12); }.note { margin:12px 0 0; padding:11px 13px; border:1px solid rgba(255,201,104,.2); border-radius:12px; color:var(--warn); background:rgba(255,201,104,.06); font-size:12px; }.error { min-height:18px; margin-top:9px; color:var(--bad); font-size:12.5px; }
.skeleton { display:flex; flex-direction:column; gap:11px; padding-top:12px; }.sk { height:54px; border-radius:17px; background:linear-gradient(90deg,#151a2a 20%,#222a40 48%,#151a2a 76%); background-size:220% 100%; animation:shine 1.25s linear infinite; }.sk-hero { height:142px; border-radius:24px; } @keyframes shine { to { background-position:-220% 0; } }
@media(max-width:350px){main{padding-left:12px;padding-right:12px}.top{padding-left:13px;padding-right:13px}.hero img{right:-25px}.hero strong{font-size:19px}.grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}