:root {
  --ink: #050a13;
  --deep: #081321;
  --panel: #0d1d30;
  --panel-raised: #132843;
  --line: #223a56;
  --azure: #72a8ff;
  --azure-strong: #4e89f7;
  --mint: #8ce8c6;
  --paper: #f7f9fc;
  --muted: #8d9bb0;
  --danger: #ff7f7a;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--ink); color: var(--paper); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, .file-drop:focus-within { outline: 3px solid color-mix(in srgb, var(--azure) 60%, transparent); outline-offset: 3px; }
.app-shell { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; background: var(--ink); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 22px; background: color-mix(in srgb, var(--ink) 94%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.05); }
.wordmark { display: inline-flex; gap: 11px; align-items: center; color: var(--paper); text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -.04em; }
.brand-mark { position: relative; display: block; width: 28px; height: 22px; transform: skew(-16deg); }
.brand-mark i { position: absolute; left: 0; width: 28px; height: 5px; border-radius: 9px; background: var(--azure); }
.brand-mark i:nth-child(1) { top: 0; }.brand-mark i:nth-child(2) { top: 8px; opacity: .8; }.brand-mark i:nth-child(3) { top: 16px; opacity: .6; }
.icon-button { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:14px; background:var(--panel); cursor:pointer; }
.icon-button svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.8; }
.is-hidden { display: none !important; }
main { padding: 22px 20px calc(116px + var(--safe-bottom)); }
.view { display: none; animation: reveal .24s ease-out; }
.view.is-active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
.hero { display:flex; align-items:flex-end; justify-content:space-between; min-height:190px; padding: 27px 0 30px; }
.welcome, .page-heading p { margin: 0 0 10px; color: var(--muted); font-size: 15px; font-weight: 600; }
.hero h1, .page-heading h1 { margin:0; max-width:490px; font-size:clamp(34px, 9vw, 54px); line-height:1.04; letter-spacing:-.055em; }
.hero h1 span { color: var(--azure); white-space: nowrap; }
.hero-token { flex:none; position:relative; display:grid; place-items:center; width:78px; height:104px; margin-left:16px; border:1px solid #315784; border-radius:19px 19px 25px 25px; background:var(--panel-raised); transform:rotate(6deg); box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.hero-token::before { content:""; position:absolute; top:12px; width:12px; height:12px; border-radius:50%; background:var(--ink); border:1px solid var(--line); }
.hero-token span { margin-top:9px; font-size:32px; font-weight:800; }.hero-token small { position:absolute; bottom:11px; color:var(--mint); font-weight:800; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:8px 0 18px; }
.section-heading.compact { margin-top:30px; }
.section-heading h2, .panel h2 { margin:0 0 4px; font-size:20px; letter-spacing:-.025em; }.section-heading p, .panel p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.refresh-button { border:0; background:transparent; color:var(--azure); font-size:13px; font-weight:700; cursor:pointer; }
.product-list, .order-list, .deposit-list, .stock-list { display:grid; gap:12px; }
.product-card { position:relative; display:grid; grid-template-columns: 1fr auto; align-items:center; min-height:136px; overflow:hidden; padding:22px 20px 22px 24px; border:1px solid var(--line); border-radius:24px; background:var(--panel); }
.product-card::after { content:""; position:absolute; right:94px; inset-block:-8px; border-left:1px dashed #38516b; }
.product-brand { display:flex; align-items:center; gap:9px; margin-bottom:18px; font-weight:800; font-size:14px; }
.z-dot { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; background:var(--azure); color:var(--ink); font-weight:900; }
.product-value { margin:0; font-size:31px; line-height:1; font-weight:800; letter-spacing:-.05em; }.product-meta { margin:7px 0 0; color:var(--muted); font-size:12px; }
.product-action { position:relative; z-index:1; width:75px; text-align:center; }.product-action strong { display:block; color:var(--mint); font-size:15px; }.product-action small { color:var(--muted); font-size:10px; }
.buy-button { width:52px; height:42px; margin-top:12px; border:0; border-radius:14px; background:var(--azure-strong); font-size:20px; cursor:pointer; box-shadow:0 8px 25px rgba(78,137,247,.25); }
.buy-button:disabled { opacity:.35; cursor:not-allowed; }
.empty-state { padding:42px 24px; border:1px dashed var(--line); border-radius:22px; text-align:center; color:var(--muted); }.empty-state strong { display:block; margin-bottom:5px; color:var(--paper); }
.skeleton-card { height:136px; border-radius:24px; background:linear-gradient(100deg,var(--panel) 30%,var(--panel-raised) 50%,var(--panel) 70%); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position-x:-200%; } }
.page-heading { padding:28px 0 26px; }.page-heading.centered { text-align:center; }.page-heading h1 { font-size:38px; }
.order-card, .deposit-row, .stock-row { padding:18px; border:1px solid var(--line); border-radius:19px; background:var(--panel); }
.order-top, .deposit-row, .stock-row { display:flex; justify-content:space-between; align-items:center; gap:14px; }.order-top strong { font-size:20px; }.order-top time, .deposit-row small { color:var(--muted); font-size:12px; }
.code-box { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:13px 14px; border-radius:13px; background:var(--deep); color:var(--mint); font-size:13px; font-weight:700; letter-spacing:.03em; overflow:hidden; }.code-box span { overflow:hidden; text-overflow:ellipsis; }.copy-button { flex:none; border:0; border-radius:9px; padding:7px 10px; background:var(--panel-raised); color:var(--azure); font-size:11px; font-weight:700; cursor:pointer; }
.balance-card { padding:33px 25px; border-radius:28px; background:var(--azure-strong); color:#fff; box-shadow:0 22px 60px rgba(20,82,184,.23); }.balance-card p { margin:0 0 10px; opacity:.75; }.balance-card h1 { margin:0; font-size:46px; letter-spacing:-.055em; }.balance-card h1 small { font-size:16px; letter-spacing:0; }.rate-pill { display:inline-block; margin-top:22px; padding:8px 11px; border-radius:10px; background:rgba(3,20,50,.25); font-size:11px; }
.panel { margin-top:16px; padding:22px; border:1px solid var(--line); border-radius:23px; background:var(--panel); }.panel > p { margin-bottom:20px; }
.amount-pills { display:flex; gap:8px; margin-bottom:16px; }.amount-pills button { flex:1; padding:11px 5px; border:1px solid var(--line); border-radius:12px; background:var(--deep); cursor:pointer; }.amount-pills button.is-selected { border-color:var(--azure); background:#142e50; color:var(--azure); }
label { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:700; }.amount-field { display:flex; align-items:center; border:1px solid var(--line); border-radius:15px; background:var(--deep); }.amount-field:focus-within { border-color:var(--azure); }.amount-field input { width:100%; padding:15px; border:0; outline:0; background:transparent; color:var(--paper); font-size:18px; }.amount-field span { padding-right:15px; color:var(--muted); font-size:12px; font-weight:700; }
.primary-button, .secondary-button { width:100%; margin-top:14px; padding:15px 18px; border:0; border-radius:15px; background:var(--azure-strong); font-weight:800; cursor:pointer; }.secondary-button { border:1px solid var(--line); background:var(--panel-raised); }.secondary-button:disabled { opacity:.4; }
.payment-address { margin-top:18px; }.payment-address .code-box { margin-top:0; }.payment-address .code-box span { overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }.payment-warning { margin:12px 2px 0; color:var(--muted); font-size:11px; line-height:1.5; }.exact-payment-amount { margin:18px 0 8px; color:var(--mint); font-size:clamp(25px,8vw,36px); font-weight:800; letter-spacing:-.04em; overflow-wrap:anywhere; text-align:center; }.exact-payment-amount small { color:var(--muted); font-size:12px; letter-spacing:.04em; }.payment-countdown { color:var(--azure); font-size:13px; font-weight:800; text-align:center; }.payment-copy-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.payment-copy-grid .secondary-button { min-width:0; padding-inline:8px; }.payment-options { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }.payment-options summary { color:var(--muted); cursor:pointer; font-size:13px; font-weight:700; }.wallet-link { display:block; text-align:center; text-decoration:none; }.is-disabled { opacity:.4; pointer-events:none; }
.deposit-row strong, .stock-row strong { display:block; }.deposit-row span, .stock-row span { color:var(--muted); font-size:12px; }.status { flex:none; padding:7px 9px; border-radius:9px; background:#2c2830; color:#ffd18a !important; font-weight:700; }.status.confirmed { background:#15372f; color:var(--mint) !important; }
.support-illustration { position:relative; display:grid; place-items:center; width:116px; height:116px; margin:62px auto 12px; border:1px solid #315784; border-radius:38% 62% 54% 46% / 50% 40% 60% 50%; background:var(--panel-raised); transform:rotate(-5deg); }.support-illustration span { transform:rotate(5deg); color:var(--azure); font-size:54px; font-weight:800; }.support-copy { max-width:430px; margin:0 auto 28px; color:var(--muted); text-align:center; line-height:1.65; }
.file-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:118px; padding:18px; border:1px dashed #3b5777; border-radius:16px; background:var(--deep); color:var(--azure); text-align:center; cursor:pointer; }.file-drop small { margin-top:7px; color:var(--muted); font-weight:500; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }.csv-summary { margin-top:14px; padding:14px; border-radius:14px; background:var(--deep); font-size:13px; }.csv-summary ul { margin:9px 0 0; padding-left:20px; color:var(--danger); }
code { color:var(--mint); }
.bottom-nav { position:fixed; z-index:30; left:50%; bottom:0; transform:translateX(-50%); display:grid; grid-template-columns:repeat(4,1fr); width:min(100%,760px); padding:10px 8px calc(9px + var(--safe-bottom)); border-top:1px solid var(--line); background:rgba(10,25,42,.96); backdrop-filter:blur(18px); }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; padding:7px 3px; border:0; background:transparent; color:#75869b; font-size:10px; font-weight:700; cursor:pointer; }.nav-item svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.nav-item.is-active { color:var(--azure); }.wallet-disc { display:grid; place-items:center; width:42px; height:31px; margin-top:-2px; border-radius:13px; background:var(--panel-raised); }.balance-nav.is-active .wallet-disc { background:var(--azure-strong); color:white; }
.modal { width:min(calc(100% - 28px),440px); max-height:82vh; margin:auto auto 18px; padding:0; overflow:auto; border:1px solid var(--line); border-radius:26px; background:var(--panel); color:var(--paper); box-shadow:0 25px 90px #000; }.modal::backdrop { background:rgba(0,4,10,.75); backdrop-filter:blur(5px); }.modal-inner { padding:25px; }.modal-inner h2 { margin:0 0 8px; font-size:25px; }.modal-inner p { color:var(--muted); line-height:1.55; }.modal-actions { display:flex; gap:9px; margin-top:20px; }.modal-actions button { margin-top:0; }.text-button { width:100%; padding:14px; border:0; background:transparent; color:var(--muted); cursor:pointer; }.qr-image { display:block; width:min(100%,280px); margin:18px auto; border-radius:18px; }.delivered-code { padding:17px; border:1px dashed var(--mint); border-radius:15px; color:var(--mint); font-weight:800; text-align:center; word-break:break-all; }
.toast { position:fixed; z-index:60; left:50%; bottom:calc(102px + var(--safe-bottom)); transform:translate(-50%,20px); width:max-content; max-width:calc(100% - 36px); padding:12px 16px; border-radius:13px; background:var(--paper); color:var(--ink); font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:.2s; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (min-width:620px) { main { padding-inline:36px; }.product-list { grid-template-columns:repeat(2,1fr); }.product-card { grid-template-columns:1fr; }.product-card::after { display:none; }.product-action { width:auto; display:flex; align-items:center; justify-content:space-between; margin-top:18px; text-align:left; }.buy-button { margin:0; }.modal { margin:auto; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }