:root {
  --bg:#e7eeea;
  --surface:#fbf8f2;
  --panel:#fffdfa;
  --soft:#f1f1ef;
  --green:#007c5d;
  --mint:#76d3a4;
  --lime:#a8f900;
  --ink:#07110e;
  --muted:#696d6b;
  --line:#07110e;
  --danger:#c93838;
  --positive:#00a33f;
  --shadow:2px 3px 0 #07110e;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#111613; --surface:#1c211e; --panel:#242a26; --soft:#313733;
  --ink:#fbf8f2; --muted:#aeb6b1; --line:#fbf8f2; --shadow:2px 3px 0 #06100c;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { min-height:100dvh; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid color-mix(in srgb,var(--lime) 72%,white); outline-offset:3px; }
[hidden] { display:none!important; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.device-shell { width:min(100%,420px); min-height:100dvh; margin:0 auto; background:var(--surface); position:relative; overflow:hidden; padding-bottom:98px; }
.screen { display:none; min-height:calc(100dvh - 98px); padding:max(12px,env(safe-area-inset-top)) 24px 30px; }
.screen.is-active { display:block; animation:screen-in .28s var(--ease); }
@keyframes screen-in { from { opacity:0; transform:translateY(8px); } }
.app-header { min-height:56px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; margin-bottom:10px; }
.app-header h1 { margin:0; font-size:17px; text-align:center; font-weight:820; letter-spacing:-.01em; }
.brand-lockup { justify-self:center; display:flex; gap:8px; align-items:center; color:inherit; text-decoration:none; font-weight:850; font-size:16px; letter-spacing:-.02em; }
.brand-lockup img { width:26px; height:26px; }
.round-icon { position:relative; width:40px; height:40px; border:0; padding:8px; background:transparent; border-radius:50%; display:grid; place-items:center; }
.round-icon svg,.outline-row svg,.drawer-row svg,.field-row svg,.payment-method-chip>svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.round-icon.bordered { width:34px; height:34px; border:1.5px solid var(--line); padding:5px; }
.notification-dot { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--green); top:5px; right:5px; box-shadow:0 0 0 2px var(--surface); }
.wallet-intro { display:flex; align-items:center; justify-content:space-between; margin:3px 2px 14px; }
.wallet-intro p { margin:0; color:var(--muted); font-size:12px; }
.wallet-intro span,.section-kicker,.eyebrow { color:var(--green); font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.wallet-intro span { border:1px solid var(--green); border-radius:999px; padding:4px 8px; letter-spacing:.08em; }
.wallet-modules { display:grid; gap:14px; }
.wallet-module { border:1.7px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); overflow:hidden; }
.module-heading { width:100%; min-height:45px; border:0; background:transparent; display:flex; align-items:center; justify-content:space-between; padding:0 12px; font-size:16px; }
.caret { width:10px; height:10px; border-top:1.8px solid; border-left:1.8px solid; transform:rotate(45deg) translateY(4px); transition:transform .42s var(--ease); }
.wallet-module:not(.is-open) .caret { transform:rotate(225deg) translateY(0); }
.module-content { display:grid; grid-template-rows:1fr; transition:grid-template-rows .46s var(--ease),opacity .3s var(--ease); opacity:1; }
.wallet-module:not(.is-open) .module-content { grid-template-rows:0fr; opacity:0; }
.module-content-inner { min-height:0; overflow:hidden; padding:0 10px 13px; }
.empty-payment-slot { width:100%; min-height:145px; border:0; border-radius:12px; background:var(--soft); display:grid; place-content:center; justify-items:center; gap:9px; }
.empty-payment-slot span { width:42px; height:42px; border-radius:50%; background:var(--panel); display:grid; place-items:center; font-size:29px; line-height:1; }
.empty-payment-slot small { color:var(--muted); font-size:12px; }
.bank-empty-slot { min-height:116px; }
.linked-payment { display:grid; justify-items:center; gap:10px; }
.payment-card-image { display:block; width:min(100%,300px); height:auto; border-radius:12px; }
.image-button { border:0; background:transparent; padding:0; border-radius:12px; }
.pill-action { min-height:38px; border:1.5px solid var(--line); border-radius:999px; background:var(--green); color:#fff; padding:7px 18px; display:flex; gap:8px; align-items:center; font-weight:780; }
.pill-action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.supported-copy { text-align:center; color:var(--muted); font-size:11px; margin-top:11px; display:grid; gap:7px; }
.brand-logo-strip { display:flex; align-items:center; justify-content:center; gap:7px; min-height:24px; overflow:hidden; }
.brand-logo-strip img { max-width:37px; max-height:18px; width:auto; height:auto; object-fit:contain; }
.brand-logo-strip img:nth-child(6) { max-width:46px; }
.bottom-nav { position:fixed; z-index:25; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(calc(100% - 48px),372px); height:64px; border:1.7px solid var(--line); border-radius:34px; background:var(--panel); box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 82px 1fr; align-items:center; padding:0 18px; }
.nav-item { border:0; background:transparent; display:grid; justify-items:center; gap:2px; font-size:12px; font-weight:850; }
.nav-item svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; }
.nav-item.is-active { color:var(--green); }
.qr-nav { border:0; background:transparent; height:70px; transform:translateY(-3px); }
.qr-nav span { width:58px; height:58px; border-radius:50%; background:var(--lime); border:1.7px solid var(--line); box-shadow:0 0 0 6px var(--panel),0 0 0 7.5px var(--line); display:grid; place-items:center; }
.qr-nav svg { width:31px; height:31px; fill:none; stroke:#07110e; stroke-width:1.8; }
.section-kicker { margin:20px 0 8px; }
.outline-row { width:100%; min-height:62px; border:1.7px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); padding:10px 12px; display:flex; align-items:center; justify-content:space-between; text-align:left; margin-bottom:13px; }
.outline-row span { display:grid; gap:4px; }
.outline-row small { color:var(--muted); }
.outline-row.compact { min-height:64px; }
.message-list { display:grid; gap:12px; padding-top:8px; }
.message-card { position:relative; width:100%; border:1.5px solid var(--line); border-radius:12px; box-shadow:var(--shadow); background:var(--panel); padding:14px 10px; text-align:left; display:grid; grid-template-columns:43px 1fr 20px; gap:10px; align-items:start; }
.message-card.is-unread::after { content:""; position:absolute; right:11px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--green); }
.message-card>span:nth-child(2) { display:grid; gap:4px; }
.message-card p { color:var(--muted); margin:3px 0 0; font-size:12px; line-height:1.42; }
.message-card small { color:var(--muted); font-size:10px; }
.message-card>svg { width:18px; height:18px; fill:none; stroke:currentColor; align-self:center; }
.message-icon { width:42px; height:42px; border-radius:12px; background:var(--soft); display:grid; place-items:center; font-weight:900; color:var(--green); }
.message-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; }
.message-detail { margin-top:28px; border:1.7px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); padding:22px; }
.message-detail-tag { display:inline-block; color:var(--green); border:1px solid var(--green); border-radius:999px; padding:5px 8px; font-size:10px; font-weight:900; letter-spacing:.1em; }
.message-detail h2 { font-size:25px; margin:20px 0 7px; letter-spacing:-.025em; }
.message-detail time { color:var(--muted); font-size:12px; }
.message-divider { height:1px; background:color-mix(in srgb,var(--line) 18%,transparent); margin:20px 0; }
.message-detail p { min-height:190px; margin:0; color:var(--muted); line-height:1.65; }
.activation-copy { text-align:center; margin:38px auto 36px; max-width:355px; }
.activation-copy h2 { margin:8px 0 10px; font-size:24px; letter-spacing:-.025em; }
.activation-copy>p:last-child { color:var(--muted); line-height:1.45; margin:0; }
.toggle-row { min-height:61px; border:1.7px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); padding:0 12px; display:flex; align-items:center; gap:12px; }
.apple-badge { background:#171918; color:#fff; border-radius:4px; padding:6px 8px; font-weight:800; }
.apple-badge.large { display:inline-block; font-size:22px; padding:12px 15px; }
.toggle-row strong { flex:1; }
.switch { width:52px; height:28px; border:1.5px solid var(--line); border-radius:999px; background:var(--panel); padding:2px; }
.switch span { display:block; width:21px; height:21px; border-radius:50%; background:var(--line); transition:transform .35s var(--ease); }
.switch.is-on { background:var(--green); }
.switch.is-on span { transform:translateX(24px); background:#fff; }
.bank-copy { margin:28px auto 24px; }
.bank-form { min-height:calc(100dvh - 250px); display:flex; flex-direction:column; gap:11px; }
.bank-form>p:first-child { font-size:13px; margin:0 0 -2px; }
.field-row { width:100%; min-height:51px; border:1.6px solid var(--line); border-radius:12px; box-shadow:var(--shadow); background:var(--panel); display:grid; grid-template-columns:92px 1fr 34px; align-items:center; padding:0 11px; text-align:left; }
.field-row input { min-width:0; width:100%; border:0; outline:0; background:transparent; height:47px; }
.field-row input::placeholder { color:#a7aaa8; }
.field-row i { width:20px; height:20px; border:1.5px solid #b6bbb8; color:#b6bbb8; border-radius:50%; display:grid; place-items:center; font-size:11px; font-style:normal; }
.field-icon { border:0; background:transparent; padding:5px; }
.field-button strong { color:var(--muted); font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.form-hint { color:var(--muted); font-size:10px!important; line-height:1.4; margin:2px 0 0!important; }
.form-error { color:var(--danger); font-size:12px!important; font-weight:750; margin:0!important; }
.wide-button { min-height:53px; border:1.6px solid var(--line); border-radius:12px; font-weight:850; font-size:16px; box-shadow:var(--shadow); padding:0 14px; }
.wide-button.pale { background:var(--mint); color:#07110e; }
.wide-button.dark { background:var(--green); color:#fff; }
.wide-button.danger { background:var(--danger); color:#fff; }
.bank-form>.wide-button { margin-top:auto; }
.success-screen { text-align:center; padding-top:80px; }
.success-art { width:min(100%,270px); height:auto; }
.success-screen h1 { font-size:21px; line-height:1.4; margin:28px 0 0; }
.success-actions { position:absolute; left:22px; right:22px; bottom:42px; display:grid; gap:13px; }
.success-actions>span { justify-self:center; background:var(--panel); padding:7px 10px; }
.manage-card { display:grid; gap:14px; margin-top:28px; }
.manage-card img { width:100%; border-radius:12px; }
.manage-card>div { border:1.5px solid var(--line); border-radius:12px; background:var(--panel); padding:13px; display:flex; justify-content:space-between; }
.bottom-actions { position:absolute; left:24px; right:24px; bottom:40px; display:grid; gap:15px; }
.bottom-actions p { margin:0; color:var(--muted); font-size:12px; text-align:center; line-height:1.5; }
.activity-filters { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:9px 0 14px; }
.activity-filters label { display:grid; gap:5px; color:var(--muted); font-size:10px; }
.activity-filters select { height:42px; border:1.5px solid var(--line); border-radius:12px; background:var(--panel); padding:0 10px; }
.activity-list { display:grid; gap:10px; }
.activity-row { border:1.4px solid color-mix(in srgb,var(--line) 35%,transparent); border-radius:12px; background:var(--soft); display:grid; grid-template-columns:44px 1fr auto; gap:11px; align-items:center; padding:12px; }
.activity-row div { display:grid; gap:3px; }
.activity-row small { color:var(--muted); font-size:10px; }
.activity-row div b { color:var(--positive); font-size:10px; }
.activity-row em { font-style:normal; font-weight:850; font-size:12px; }
.activity-row em.positive { color:var(--positive); }
.activity-mark { width:42px; height:42px; border-radius:12px; background:var(--panel); display:grid; place-items:center; font-weight:900; }
.activity-mark svg { width:22px; height:22px; fill:none; stroke:currentColor; }
.activity-mark.image-mark { border-radius:50%; }
.list-empty { text-align:center; color:var(--muted); padding:50px 10px; }
.profile-summary { min-height:78px; display:flex; align-items:center; gap:13px; padding:10px; margin-bottom:13px; border:1.5px solid var(--line); border-radius:12px; background:var(--panel); }
.avatar { width:52px; height:52px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-weight:900; background-size:cover; background-position:center; }
.profile-summary>span:nth-child(2) { display:grid; gap:4px; }
.profile-summary small { color:var(--muted); }
.social-links { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.social-links button { border:1px solid var(--line); border-radius:9px; background:var(--panel); padding:9px 2px; font-size:10px; }
.security-score { display:flex; justify-content:space-between; align-items:center; background:var(--green); color:#fff; padding:20px; border-radius:12px; margin:20px 0; box-shadow:var(--shadow); }
.security-score span { display:grid; }
.security-score strong { font-size:34px; }
.settings-list { border:1.5px solid var(--line); border-radius:12px; overflow:hidden; }
.settings-list button { width:100%; min-height:58px; border:0; background:var(--panel); display:flex; justify-content:space-between; align-items:center; padding:0 14px; }
.settings-list button+button { border-top:1px solid color-mix(in srgb,var(--line) 18%,transparent); }
.settings-list b { color:var(--green); font-size:12px; }
.preference-block { margin-bottom:20px; }
.preference-block h2 { font-size:15px; margin:0 0 8px; }
.segment { display:grid; grid-template-columns:repeat(2,1fr); gap:5px; background:var(--soft); border-radius:12px; padding:4px; }
.segment.three { grid-template-columns:repeat(3,1fr); }
.segment button { min-height:42px; border:0; border-radius:9px; background:transparent; font-weight:800; }
.segment button.is-active { background:var(--panel); box-shadow:0 1px 5px #0002; color:var(--green); }
.legal-card { border:1.5px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); padding:20px; line-height:1.58; }
.legal-card h2 { font-size:23px; line-height:1.2; margin:8px 0; }
.legal-card h3 { font-size:14px; margin:20px 0 4px; }
.legal-card p { color:var(--muted); font-size:12px; }
.legal-card .legal-date { font-size:10px; }
.legal-card .wide-button { width:100%; margin-top:18px; }
.tutorial-hero { text-align:center; margin:25px 0; }
.tutorial-hero h2 { margin:8px 0; font-size:25px; }
.tutorial-hero>p:last-child { color:var(--muted); margin:0; }
.tutorial-list { display:grid; gap:18px; }
.tutorial-step { display:grid; grid-template-columns:34px 1fr; gap:10px; }
.tutorial-step>span { width:32px; height:32px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-weight:900; box-shadow:0 2px 0 var(--line); }
.tutorial-step>div { border:1.5px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); padding:11px; overflow:hidden; }
.tutorial-step img { width:100%; border-radius:10px; margin-bottom:10px; display:block; }
.tutorial-step h3 { margin:0 0 5px; font-size:16px; }
.tutorial-step p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.secure-warning-screen { background:var(--green); padding:20px; min-height:100dvh; }
.warning-panel { min-height:calc(100dvh - 40px); border-radius:18px; background:var(--panel); color:var(--ink); padding:34px 24px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.warning-panel>img { width:55px; }
.warning-panel h1 { font-size:27px; margin:9px 0 20px; }
.warning-icon { width:80px; height:80px; padding:18px; border-radius:50%; background:#fff0d2; fill:none; stroke:#db8818; stroke-width:1.8; margin:5px 0 18px; }
.warning-panel>p:not(.eyebrow) { color:var(--muted); line-height:1.55; }
.warning-panel ul { width:100%; text-align:left; color:var(--muted); line-height:1.8; font-size:12px; padding-left:24px; }
.warning-panel .wide-button { width:100%; margin-top:auto; }
.text-button { border:0; background:transparent; padding:16px; font-weight:750; }
.pin-copy { text-align:center; margin:48px 0 24px; }
.pin-copy h2 { font-size:24px; margin:8px 0; }
.pin-copy>p:last-child { color:var(--muted); }
.pin-dots { display:flex; justify-content:center; gap:15px; margin:30px 0 50px; }
.pin-dots i { width:14px; height:14px; border:1.7px solid var(--line); border-radius:50%; }
.pin-dots i.is-filled { background:var(--green); border-color:var(--green); }
.pin-pad { display:grid; grid-template-columns:repeat(3,72px); justify-content:center; gap:12px 24px; }
.pin-pad button { width:72px; height:58px; border:1.5px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 2px 0 var(--line); font-size:20px; font-weight:800; }
.payment-code-screen { background:var(--green); min-height:100dvh; color:#fff; }
.payment-code-screen .round-icon { color:#fff; }
.payment-code-screen .bordered { border-color:#fff; }
.code-timer { display:flex; justify-content:center; gap:8px; align-items:center; font-size:12px; margin:7px 0 12px; }
.code-timer strong { background:#fff; color:#07110e; padding:4px 8px; border-radius:999px; }
.pay-code-card { background:#fff; color:#07110e; border:1.7px solid #07110e; border-radius:16px; box-shadow:2px 3px 0 #07110e; padding:20px; text-align:center; }
.pay-code-card>svg { width:100%; height:80px; display:block; }
.dynamic-qr { width:210px; height:210px; padding:9px; margin:0 auto; background:#fff; }
.dynamic-qr table { border-collapse:collapse; width:100%; height:100%; }
.dynamic-qr td { padding:0; }
.code-divider { display:flex; align-items:center; gap:10px; color:#828886; margin:12px 0; font-size:9px; font-weight:900; }
.code-divider::before,.code-divider::after { content:""; height:1px; background:#d9ddda; flex:1; }
.pay-code-card>small { display:block; color:#69706c; margin-top:8px; }
.payment-method-chip { width:100%; min-height:62px; border:1.5px solid #07110e; border-radius:12px; background:#fff; color:#07110e; box-shadow:2px 3px 0 #07110e; margin-top:15px; padding:8px 12px; display:grid; grid-template-columns:48px 1fr 22px; gap:9px; align-items:center; text-align:left; }
.payment-method-chip img { max-width:45px; max-height:28px; }
.payment-method-chip span { display:grid; gap:3px; }
.payment-method-chip small { color:#69706c; }
.security-note { display:flex; justify-content:center; align-items:center; gap:7px; font-size:11px; }
.security-note svg { width:16px; height:16px; fill:none; stroke:currentColor; }
.profile-drawer,.modal-layer,.camera-layer { position:fixed; z-index:80; top:0; bottom:0; left:50%; width:min(100vw,420px); transform:translateX(-50%); display:grid; place-items:center; overflow:hidden; }
.drawer-backdrop,.modal-backdrop { position:absolute; inset:0; border:0; background:#07110e66; backdrop-filter:blur(2px); }
.drawer-panel { position:absolute; inset:0 0 0 auto; width:min(82%,320px); background:var(--panel); border-radius:24px 0 0 24px; padding:28px 16px 20px; display:flex; flex-direction:column; gap:10px; box-shadow:-14px 0 30px #0002; animation:drawer-in .38s var(--ease); }
@keyframes drawer-in { from { transform:translateX(100%); } }
.drawer-brand { display:flex; gap:10px; align-items:center; margin:4px 4px 18px; }
.drawer-brand img { width:38px; }
.drawer-brand span { display:grid; }
.drawer-brand small { color:var(--muted); }
.drawer-account { border:0; background:transparent; min-height:47px; display:flex; align-items:center; gap:10px; text-align:left; overflow:hidden; }
.drawer-account strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawer-account svg { width:23px; height:23px; fill:none; stroke:currentColor; }
.drawer-row { min-height:51px; border:0; border-radius:12px; background:var(--soft); display:flex; align-items:center; justify-content:space-between; padding:0 12px; text-align:left; }
.drawer-close-edge { position:absolute; left:-19px; top:50%; width:38px; height:38px; border:1.5px solid var(--line); background:var(--panel); border-radius:50%; padding:7px; }
.drawer-close-edge svg { width:22px; height:22px; fill:none; stroke:currentColor; }
.sign-out { margin-top:auto; min-height:53px; border:1.5px solid var(--line); border-radius:12px; background:var(--green); color:#fff; font-weight:850; box-shadow:var(--shadow); }
.dialog-card { position:relative; z-index:1; width:min(calc(100% - 32px),388px); max-height:90dvh; overflow:auto; background:var(--panel); border:1.5px solid var(--line); border-radius:22px; padding:60px 18px 18px; text-align:center; box-shadow:0 16px 45px #0003; }
.dialog-close { position:absolute; top:15px; left:15px; }
.dialog-card h2,.bottom-sheet h2 { font-size:21px; margin:10px 0; }
.dialog-card p,.bottom-sheet p { color:var(--muted); line-height:1.5; }
.dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.sheet-layer { align-items:end; }
.bottom-sheet { position:relative; z-index:1; width:100%; max-height:88dvh; overflow:auto; background:var(--panel); border:1.5px solid var(--line); border-bottom:0; border-radius:24px 24px 0 0; padding:58px 20px max(22px,env(safe-area-inset-bottom)); text-align:center; animation:sheet-in .42s var(--ease); }
@keyframes sheet-in { from { transform:translateY(100%); } }
.sheet-handle { position:absolute; width:42px; height:5px; border-radius:999px; background:color-mix(in srgb,var(--line) 22%,transparent); top:10px; left:50%; transform:translateX(-50%); }
.agreement-link { width:100%; min-height:52px; border:1.5px solid var(--line); border-radius:12px; background:var(--soft); display:flex; align-items:center; justify-content:space-between; padding:0 12px; color:var(--green); font-weight:750; }
.agreement-link svg { width:20px; height:20px; fill:none; stroke:currentColor; }
.apple-account { border:1.5px solid var(--line); border-radius:12px; min-height:55px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; margin:18px 0; }
.card-type-list,.payment-picker [data-payment-options] { display:grid; gap:10px; text-align:left; }
.card-type-option,.payment-option { width:100%; min-height:58px; border:1.5px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 2px 0 var(--line); display:grid; grid-template-columns:62px 1fr 24px; align-items:center; gap:10px; padding:7px 12px; }
.card-type-option img,.payment-option img { max-width:55px; max-height:32px; }
.radio-dot { width:20px; height:20px; border:1.5px solid var(--line); border-radius:50%; }
.card-type-option.is-selected .radio-dot,.payment-option.is-selected .radio-dot { border:5px solid var(--green); }
.status-sheet { padding-top:38px; }
.declined-icon { width:70px; height:70px; border-radius:50%; background:#ffe1df; color:var(--danger); display:grid; place-items:center; margin:0 auto; }
.declined-icon svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.8; }
.status-sheet .wide-button { width:100%; margin-top:18px; }
.receive-qr { margin:16px auto; border:1px solid var(--line); }
.receive-id { display:grid; grid-template-columns:1fr auto; text-align:left; gap:3px 10px; border:1px solid var(--line); border-radius:12px; padding:10px; margin:10px 0; }
.receive-id small,.receive-id strong { grid-column:1; }
.receive-id button { grid-column:2; grid-row:1/3; border:0; background:transparent; color:var(--green); font-weight:850; }
.info-dialog { text-align:left; }
.info-dialog ul { color:var(--muted); line-height:1.7; }
.profile-form-lite { display:grid; gap:10px; margin:18px 0; }
.profile-form-lite label { display:grid; gap:5px; font-size:12px; font-weight:700; }
.profile-form-lite input { height:46px; border:1.5px solid var(--line); border-radius:10px; background:var(--panel); padding:0 11px; }
.qr-result-dialog pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--soft); padding:12px; border-radius:10px; text-align:left; max-height:130px; overflow:auto; }
.result-badge { display:inline-block; background:var(--lime); color:#07110e; padding:5px 10px; border-radius:999px; font-weight:850; }
.camera-layer { z-index:90; background:#07110e; color:#fff; }
.camera-panel { width:100%; height:100%; display:flex; flex-direction:column; padding:18px 16px 25px; }
.camera-panel header { display:flex; justify-content:space-between; align-items:center; }
.camera-panel h2 { margin:3px 0; }
.camera-close { color:#fff; }
.camera-view { position:relative; flex:1; min-height:360px; margin:18px 0; border-radius:20px; overflow:hidden; background:linear-gradient(135deg,#26322c,#070807); }
.camera-view video { width:100%; height:100%; object-fit:cover; }
.scan-frame { position:absolute; width:235px; height:235px; left:50%; top:45%; transform:translate(-50%,-50%); border:3px solid var(--lime); border-radius:24px; box-shadow:0 0 0 999px #0005; }
.camera-flash { position:absolute; top:15px; right:15px; background:#0008; color:#fff; }
.camera-flash.is-on { background:var(--lime); color:#07110e; }
.camera-view p { position:absolute; left:18px; right:18px; bottom:18px; text-align:center; font-size:12px; }
.camera-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.camera-actions button { min-height:58px; border:1px solid #fff; border-radius:12px; background:#fff1; color:#fff; display:flex; justify-content:center; align-items:center; gap:8px; }
.camera-actions svg { width:22px; height:22px; fill:none; stroke:currentColor; }
.mock-scan { align-self:center; margin-top:12px; border:0; background:transparent; color:#afb6b1; text-decoration:underline; }
.toast { position:fixed; z-index:120; left:50%; bottom:105px; transform:translate(-50%,16px); opacity:0; pointer-events:none; background:var(--panel); color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--shadow); border-radius:12px; padding:10px 14px; font-size:12px; transition:.28s var(--ease); max-width:min(90vw,380px); text-align:center; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (min-width:421px) {
  .device-shell { min-height:calc(100dvh - 20px); margin:10px auto; border-radius:22px; box-shadow:0 18px 55px #0002; }
  .screen { min-height:calc(100dvh - 118px); }
  .profile-drawer,.modal-layer,.camera-layer { top:10px; bottom:10px; border-radius:22px; }
  .bottom-sheet { border-bottom:1.5px solid var(--line); border-radius:24px; margin-bottom:0; }
}
@media (max-width:360px) {
  .screen { padding-inline:16px; }
  .bottom-nav { width:calc(100% - 30px); }
  .dialog-actions { gap:8px; }
  .field-row { grid-template-columns:82px 1fr 30px; }
  .pin-pad { grid-template-columns:repeat(3,65px); gap:10px 18px; }
  .pin-pad button { width:65px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }