:root {
  --bg: #030a17;
  --panel: #0c1629;
  --panel2: #111d34;
  --text: #f7f9ff;
  --muted: #8293b5;
  --line: rgba(157, 179, 221, .17);
  --cyan: #2f7cff;
  --blue: #286fff;
  --purple: #6e75ff;
  --green: #36d49a;
  --orange: #ffad4d;
  --red: #ff4d43;
}

body { background: radial-gradient(circle at 50% -8%, #102347 0, transparent 42%), var(--bg); }
.ambient-one { background: var(--blue); opacity: .1; }
.ambient-two { background: #153e9e; opacity: .1; }
.topbar { height: 82px; }
.brand { gap: 11px; font-size: 18px; }
.brand-logo { width: 42px; height: 42px; object-fit: contain; }
.balance-pill { gap: 8px; background: #111d34; padding: 10px 14px; font-size: 12px; font-weight: 600; }
.balance-pill svg { width: 16px; fill: var(--red); }
.hero { padding: 42px 0 28px; }
.hero h1 { font-size: clamp(38px, 11vw, 52px); line-height: 1.12; letter-spacing: -.05em; }
.hero p { margin-top: 17px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.upload-card { height: 355px; border: 1.5px dashed #347dff; background: radial-gradient(circle at 50% 48%, rgba(35, 89, 195, .18), rgba(18, 37, 72, .08) 58%, rgba(8, 19, 39, .18)); border-radius: 24px; }
.upload-card.dragging { border-color: #72a5ff; background-color: rgba(35, 105, 255, .1); transform: scale(.995); }
.upload-card::before { width: 240px; height: 240px; background: #1b5bd51c; filter: blur(36px); }
.upload-visual { width: 94px; height: 94px; margin-bottom: 25px; border: 1.5px dashed #347dff; border-radius: 50%; }
.upload-visual::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: linear-gradient(145deg, #2668dc, #10317e); border: 1px solid #377fff; box-shadow: 0 12px 32px #0a3dab70; }
.upload-visual svg { position: relative; z-index: 1; width: 36px; stroke: #fff; stroke-width: 1.8; }
.upload-card strong { font-size: 18px; }
.upload-card > span.upload-subtitle { margin-top: 7px; color: #6480b4; font-size: 13px; }
.choose-button { margin-top: 22px; min-width: 155px; text-align: center; background: linear-gradient(135deg, #2375ff, #1951d4); border: 1px solid #3a83ff; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 13px; box-shadow: 0 12px 28px #1355db45; }
.upload-card > span#uploadHint { margin-top: 18px; color: #7d8dab; font-size: 10px; }
.trust-row { padding: 19px 0; color: #7e8eab; }
.trust-row svg { color: #8da2c9; }
.bottom-nav { background: rgba(5, 13, 28, .92); }
.bottom-nav button.active { color: var(--blue); }
.primary-button { background: linear-gradient(135deg, #2f7cff, #1957d8); color: #fff; box-shadow: 0 13px 35px #1762e838; }
.secondary-button, .icon-button { background: #111d34; }
.summary-icon { background: #2f7cff18; }
.pulse-ring { border-color: #2f7cff35; box-shadow: 0 0 0 16px #2f7cff08, 0 0 0 32px #2f7cff04; }
.scanner-core { background: radial-gradient(circle at 40% 35%, #193e83, #0c172c); box-shadow: inset 0 0 25px #2f7cff22, 0 0 35px #2f7cff18; }

@media (max-height: 760px) {
  .hero { padding-top: 18px; }
  .upload-card { height: 300px; }
}