/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Accessibility floor ──
1) iOS Safari auto-zooms inputs whose font-size < 16px — annoying jump.
Force every editable field to 16px so the page never zooms.
2) Set body baseline to 16px so unstyled text has a sane default. */
input, textarea, select { font-size: 16px !important; }
body { font-size: 16px; }
/* ── Utility classes ── */
.pos-rel { position: relative; }
.flex-1 { flex: 1; }
/* ── Unified empty-state component (D17) ── */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; }
.empty-state .es-icon { width: 64px; height: 64px; border-radius: 16px; background: #242424; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 16px; opacity: 0.7; }
.empty-state .es-title { font-size: 15px; font-weight: 600; color: #ccc; margin-bottom: 6px; letter-spacing: -0.01em; }
.empty-state .es-desc { font-size: 13px; color: #AAA; line-height: 1.6; margin-bottom: 18px; max-width: 240px; }
.empty-state .es-cta { height: 38px; padding: 0 22px; background: #fff; border: none; border-radius: 12px; color: #000; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: -0.01em; }
body.light-mode .empty-state .es-icon { background: #F0F0F0 !important; }
body.light-mode .empty-state .es-title { color: #1A1A1A !important; }
body.light-mode .empty-state .es-desc { color: #777 !important; }
body.light-mode .empty-state .es-cta { background: #1A1A1A !important; color: #fff !important; }
/* ── Theme tokens (use var(--xxx) for new code; existing !important rules stay until migrated) ── */
:root {
--bg-page: #161616;
--bg-card: #202020;
--bg-elevated: #242424;
--text-primary: #EFEFEF;
--text-muted: #B0B0B0;
--text-faint: #999999;
--border: #333333;
--border-strong: #333333;
}
body.light-mode {
--bg-page: #F2F2F2;
--bg-card: #FFFFFF;
--bg-elevated: #F8F8F8;
--text-primary: #1A1A1A; /* 16:1 on white, AAA */
--text-muted: #5A5A5A; /* 7:1 on white, 5.6:1 on #EBE — solid AA */
--text-faint: #888888; /* 5.6:1 on white — was #BBB (1.9:1, invisible) */
--border: #D8D8D8;
--border-strong: #C0C0C0;
}
body {
background: #1E1E1E; min-height: 100vh;
font-family: 'DM Sans', sans-serif;
display: flex; flex-direction: column; align-items: center;
padding: 32px 16px 48px;
user-select: none;
}
/* ── Top nav ── */
.proto-nav {
display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
margin-bottom: 24px; max-width: 760px;
}
.nav-btn {
padding: 5px 12px; border-radius: 20px;
background: #242424; border: 1px solid #333333;
color: #AAA; font-size: 12px; font-weight: 600;
cursor: pointer; font-family: 'DM Sans', sans-serif;
transition: all 0.2s; letter-spacing: 0.04em;
white-space: nowrap;
}
.nav-btn:hover { border-color: #999; color: #ccc; }
.nav-btn.active { background: #fff; color: #000; border-color: #EFEFEF; }
/* ── Phone shell ── */
.phone-shell {
position: relative;
width: 375px; height: 812px;
}
.phone-frame {
position: absolute; inset: 0;
border-radius: 54px;
box-shadow: 0 0 0 1.5px #333333, 0 0 0 10px #0F0F0F, 0 0 0 11.5px #282828, 0 40px 120px rgba(0,0,0,0.9);
pointer-events: none; z-index: 100;
}
.screen-area {
position: absolute; inset: 0;
border-radius: 54px; overflow: hidden;
background: #161616;
}
/* On narrow viewports (real phones / small windows), the fixed 375x812
phone-shell overflows the viewport and the bezel/box-shadow no longer
lines up with the screen-area — drop the bezel and let the screen fill
the viewport so everything stays aligned. */
@media (max-width: 420px) {
body { padding: 0; min-height: 100vh; }
.proto-nav { display: none; }
.phone-shell {
width: 100vw; height: 100vh;
border-radius: 0;
}
.phone-frame { display: none; }
.screen-area, .page { border-radius: 0; }
.notch { display: none; }
}
/* ── Page container ── */
.page {
position: absolute; inset: 0;
display: none; flex-direction: column;
background: #161616;
border-radius: 54px;
overflow: hidden;
}
.page.active { display: flex; }
/* ── Notch ── */
.notch {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 120px; height: 34px; background: inherit;
border-radius: 0 0 20px 20px; z-index: 50;
}
.home-indicator {
position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
width: 134px; height: 5px; background: #282828; border-radius: 3px; z-index: 50;
}
/* ── Shared components ── */
.back-btn {
width: 34px; height: 34px; background: #202020;
border: 1.5px solid #333333; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: border-color 0.2s; flex-shrink: 0;
}
.back-btn:hover { border-color: #888; }
/* Unified per-page nav: home-style logo (no box) used as a clickable
element. Sits next to .back-btn when both are needed; appears alone
when back would just go home anyway. */
.nav-logo-injected {
display: inline-flex; align-items: center; gap: 8px;
background: none; border: none; padding: 0; margin: 0;
cursor: pointer; transition: opacity 0.2s; color: #EFEFEF;
font-family: 'DM Sans', sans-serif; line-height: 1; height: 34px;
}
.nav-logo-injected:hover { opacity: 0.7; }
/* When sitting next to a back-btn, pull tight against it (overrides parent gap) */
.back-btn + .nav-logo-injected,
.scan-back + .nav-logo-injected { margin-left: -4px; }
/* Language picker indicator — checkmark, not a dot. Hidden when inactive,
shown when active. Uses mask so we can color it via CSS. */
.lang-check {
width: 18px; height: 18px; flex-shrink: 0;
display: inline-block; opacity: 0; transition: opacity 0.2s;
background-color: #EFEFEF;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.lang-check.checked { opacity: 1; }
body.light-mode .lang-check { background-color: #1A1A1A; }
.nav-logo-injected .logo-btn-name {
font-size: 16px; font-weight: 700; color: #EFEFEF; letter-spacing: -0.03em;
}
body.light-mode .nav-logo-injected,
body.light-mode .nav-logo-injected .logo-btn-name { color: #1A1A1A !important; }
/* ── Company brief modal ──────────────────────────────────── */
.brief-overlay { z-index: 700 !important; }
.brief-card {
width: 340px !important;
max-height: 80vh;
background: #202020 !important;
border: 1px solid #333333 !important;
border-radius: 22px !important;
padding: 0 !important;
overflow: hidden;
display: flex; flex-direction: column;
font-family: 'DM Sans', 'Noto Sans TC', 'PingFang TC', sans-serif;
box-shadow: 0 20px 48px rgba(0,0,0,0.6);
}
.brief-head {
padding: 18px 20px 14px;
border-bottom: 1px solid #1F1F1F;
background: linear-gradient(180deg, #242424 0%, #202020 100%);
flex-shrink: 0;
}
.brief-h-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.brief-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
color: #6B8EC4; background: rgba(107,142,196,0.1);
border: 1px solid rgba(107,142,196,0.25);
border-radius: 7px; padding: 4px 9px; text-transform: uppercase;
}
.brief-pill::before {
content: '✦'; font-size: 12px;
}
.brief-close {
width: 28px; height: 28px; border-radius: 50%;
background: #2C2C2C; border: none; color: #888;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.brief-close:hover { background: #333; color: #EFEFEF; }
.brief-company { font-size: 17px; font-weight: 700; color: #EFEFEF; letter-spacing: -0.02em; line-height: 1.3; }
.brief-low-conf { font-size: 13px; color: #F5C842; margin-top: 6px; }
.brief-loading { padding: 32px 20px; text-align: center; }
.brief-loading-text { font-size: 13px; color: #888; margin-top: 14px; }
.brief-error { padding: 32px 20px; text-align: center; color: #E05555; font-size: 15px; line-height: 1.6; }
.brief-body { padding: 14px 20px 20px; overflow-y: auto; }
.brief-body::-webkit-scrollbar { display: none; }
.brief-section { margin-bottom: 16px; }
.brief-section:last-child { margin-bottom: 0; }
.brief-h {
font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
color: #999; text-transform: uppercase; margin-bottom: 6px;
}
.brief-p { font-size: 14px; color: #ccc; line-height: 1.65; }
.brief-headline {
background: rgba(107,142,196,0.06);
border: 1px solid rgba(107,142,196,0.2);
border-radius: 12px;
padding: 12px 14px;
font-size: 15px; font-weight: 600;
color: #EFEFEF; line-height: 1.55;
}
.brief-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brief-fact { background: #0D0D0D; border: 1px solid #1F1F1F; border-radius: 10px; padding: 8px 10px; }
.brief-fact-label { font-size: 11px; color: #999; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.brief-fact-value { font-size: 13px; color: #EFEFEF; font-weight: 600; line-height: 1.3; }
.brief-news {
border-left: 2px solid #6B8EC4;
padding: 6px 0 8px 12px;
margin-bottom: 10px;
}
.brief-news:last-child { margin-bottom: 0; }
.brief-news-date { font-size: 12px; font-weight: 700; color: #6B8EC4; letter-spacing: 0.08em; margin-bottom: 3px; }
.brief-news-title { font-size: 14px; color: #EFEFEF; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.brief-news-why { font-size: 13px; color: #888; line-height: 1.5; }
.brief-talk { padding-left: 18px; margin: 0; }
.brief-talk li { font-size: 13px; color: #ccc; line-height: 1.7; margin-bottom: 4px; }
/* Light mode */
body.light-mode .brief-card { background: #FFFFFF !important; border-color: #E0E0E0 !important; }
body.light-mode .brief-head { background: linear-gradient(180deg, #FAFAFA, #FFFFFF) !important; border-bottom-color: #EEEEEE; }
body.light-mode .brief-company { color: #1A1A1A; }
body.light-mode .brief-h { color: #888; }
body.light-mode .brief-p { color: #333; }
body.light-mode .brief-fact { background: #F5F5F5; border-color: #E5E5E5; }
body.light-mode .brief-fact-value { color: #1A1A1A; }
body.light-mode .brief-news-title { color: #1A1A1A; }
body.light-mode .brief-talk li { color: #333; }
body.light-mode .brief-close { background: #EEEEEE !important; color: #555 !important; }
/* .brief-headline used to render as #EFEFEF (white) on light blue tint = invisible */
body.light-mode .brief-headline { color: #1A1A1A !important; background: rgba(107,142,196,0.08) !important; border-color: rgba(107,142,196,0.3) !important; }
body.light-mode .brief-news-why { color: #666 !important; }
body.light-mode .brief-fact-label { color: #777 !important; }
body.light-mode .brief-loading-text { color: #666 !important; }
/* Editable scan-result fields — inline so user can fix OCR misreads */
.scan-edit-input {
width: 100%;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
padding: 4px 8px;
color: #EFEFEF;
font-family: 'DM Sans', 'Noto Sans TC', 'PingFang TC', sans-serif;
outline: none;
transition: border-color 0.15s, background 0.15s;
}
.scan-edit-input::placeholder { color: #888; }
.scan-edit-input:hover { border-color: #333333; background: rgba(255,255,255,0.02); }
.scan-edit-input:focus { border-color: #6BAF7A; background: rgba(107,175,122,0.06); }
/* Scan-result is overlaid on the camera page (always dark like Apple Camera).
So even in light mode, keep input text light — don't flip to dark on dark bg. */
body.light-mode .scan-edit-input { color: #EFEFEF; }
body.light-mode .scan-edit-input::placeholder { color: #888; }
body.light-mode .scan-edit-input:hover { border-color: #333; background: rgba(255,255,255,0.02); }
body.light-mode .scan-edit-input:focus { border-color: #6BAF7A; background: rgba(107,175,122,0.06); }
/* "了解這間公司" trigger button shown in scan-result */
.brief-trigger {
width: 100%; height: 40px; margin-top: 10px; margin-bottom: 4px;
background: rgba(107,142,196,0.1); color: #6B8EC4;
border: 1px solid rgba(107,142,196,0.25); border-radius: 12px;
font-family: 'DM Sans','Noto Sans TC',sans-serif;
font-size: 14px; font-weight: 700; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 6px;
transition: background 0.15s;
}
.brief-trigger:hover { background: rgba(107,142,196,0.18); }
.brief-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
body.light-mode .brief-trigger {
background: rgba(107,142,196,0.12) !important;
color: #4A6FA6 !important;
border-color: rgba(107,142,196,0.4) !important;
}
/* ── Duplicate-contact modal ──────────────────────────────── */
.dup-overlay { z-index: 800 !important; } /* sits above scan-result overlay */
.dup-card {
width: 320px !important;
background: #202020 !important;
border: 1px solid #333333 !important;
border-radius: 22px !important;
padding: 22px 20px 18px !important;
font-family: 'DM Sans', 'Noto Sans TC', 'PingFang TC', sans-serif;
box-shadow: 0 20px 48px rgba(0,0,0,0.6);
}
.dup-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
color: #F5C842;
background: rgba(245,200,66,0.08);
border: 1px solid rgba(245,200,66,0.22);
border-radius: 7px; padding: 4px 9px;
margin: 0 auto 12px; text-transform: uppercase;
}
.dup-pill::before {
content: ''; width: 5px; height: 5px; border-radius: 50%; background: #F5C842;
}
.dup-card .dup-q {
font-size: 16px; font-weight: 700; color: #EFEFEF;
text-align: center; letter-spacing: -0.02em;
margin-bottom: 4px;
}
.dup-card .dup-reason {
font-size: 13px; color: #888; text-align: center;
margin-bottom: 16px; line-height: 1.5;
}
.dup-compare {
display: flex; gap: 8px; align-items: stretch;
margin-bottom: 16px;
}
.dup-side {
flex: 1; min-width: 0;
background: #0E0E0E;
border: 1px solid #2C2C2C;
border-radius: 12px;
padding: 12px 10px 10px;
text-align: center;
}
.dup-side-tag {
font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
margin-bottom: 8px; text-transform: uppercase;
}
.dup-side.left { border-color: rgba(107,175,122,0.25); }
.dup-side.left .dup-side-tag { color: #6BAF7A; }
.dup-side.right { border-color: rgba(107,142,196,0.25); }
.dup-side.right .dup-side-tag { color: #6B8EC4; }
.dup-side .dup-avatar {
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 700;
margin: 0 auto 8px;
}
.dup-side.left .dup-avatar { background: rgba(107,175,122,0.14); border: 1.5px solid rgba(107,175,122,0.45); color: #6BAF7A; }
.dup-side.right .dup-avatar { background: rgba(107,142,196,0.14); border: 1.5px solid rgba(107,142,196,0.45); color: #6B8EC4; }
.dup-side .dup-name {
font-size: 13px; font-weight: 700; color: #EFEFEF;
line-height: 1.3; word-break: break-word;
}
.dup-side .dup-sub {
font-size: 12px; color: #AAA; margin-top: 3px;
line-height: 1.4; word-break: break-word;
}
.dup-arrow {
width: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
color: #999;
}
/* Buttons */
.dup-btn-row { display: flex; gap: 8px; }
.dup-btn {
flex: 1; height: 44px; border-radius: 12px; cursor: pointer;
font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.dup-btn:active { transform: scale(0.97); }
.dup-btn.primary { background: #fff; color: #000; border: none; }
.dup-btn.primary:hover { background: #f0f0f0; }
.dup-btn.secondary { background: #282828; color: #ccc; border: 1px solid #2E2E2E; }
.dup-btn.secondary:hover { border-color: #888; color: #EFEFEF; }
.dup-btn.cancel {
background: none; border: none; color: #999; font-weight: 500;
font-size: 13px; height: 32px; margin-top: 8px; width: 100%;
}
.dup-btn.cancel:hover { color: #888; }
/* Step 2 action cards */
.dup-action {
display: block; text-align: left; padding: 14px 16px;
border-radius: 12px; cursor: pointer; width: 100%;
font-family: inherit; transition: transform 0.1s, border-color 0.15s;
margin-bottom: 8px;
}
.dup-action:active { transform: scale(0.99); }
.dup-action.merge { background: #fff; color: #000; border: none; }
.dup-action.merge:hover { background: #f5f5f5; }
.dup-action.over { background: #242424; color: #EFEFEF; border: 1px solid #333333; }
.dup-action.over:hover { border-color: #888; }
.dup-action .a-title { font-size: 15px; font-weight: 700; display: block; margin-bottom: 3px; }
.dup-action .a-rec {
font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
color: #22C55E; margin-left: 6px; vertical-align: 1px;
}
.dup-action .a-desc {
font-size: 13px; font-weight: 400; line-height: 1.5; display: block;
}
.dup-action.merge .a-desc { color: #999; }
.dup-action.over .a-desc { color: #888; }
/* Light mode */
body.light-mode .dup-card {
background: #FFFFFF !important;
border-color: #E0E0E0 !important;
}
body.light-mode .dup-card .dup-q { color: #1A1A1A; }
body.light-mode .dup-card .dup-reason { color: #666; }
body.light-mode .dup-side { background: #F8F8F8; border-color: #E5E5E5; }
body.light-mode .dup-side .dup-name { color: #1A1A1A; }
body.light-mode .dup-btn.primary { background: #1A1A1A !important; color: #fff !important; }
body.light-mode .dup-btn.secondary { background: #F0F0F0 !important; color: #555 !important; border-color: #DDD !important; }
body.light-mode .dup-action.merge { background: #1A1A1A !important; color: #fff !important; }
body.light-mode .dup-action.merge .a-desc { color: #ccc !important; }
body.light-mode .dup-action.over { background: #F5F5F5 !important; color: #1A1A1A !important; border-color: #DDD !important; }
body.light-mode .dup-action.over .a-desc { color: #666 !important; }
/* Premium subscription status card — CHAMPAGNE identity, mode-agnostic.
Same light-gold palette in dark and light mode (like a real LinkedIn
Premium / Tinder Gold card). Uses CSS variables so we can tweak the
palette in one spot. */
.prem-status-card {
--prem-bg-1: #F5EBD3;
--prem-bg-2: #EADBB1;
--prem-edge: #C4A05A;
--prem-ink-1: #2A1F0A; /* numbers */
--prem-ink-2: #5B4520; /* labels */
--prem-ink-3: #8A6F3A; /* meta */
--prem-divider: rgba(91, 69, 32, 0.18);
--prem-pill-bg: rgba(91, 69, 32, 0.10);
position: relative;
background: linear-gradient(135deg, var(--prem-bg-1) 0%, var(--prem-bg-2) 100%);
border: 1px solid var(--prem-edge);
border-radius: 18px;
padding: 22px;
margin-bottom: 20px;
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 6px 22px rgba(180, 140, 60, 0.18);
}
.prem-status-glow {
position: absolute; right: -50px; top: -70px;
width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, transparent 60%);
pointer-events: none;
}
/* Lock the same palette in light mode (don't adapt to page bg) */
body.light-mode .prem-status-card {
background: linear-gradient(135deg, var(--prem-bg-1) 0%, var(--prem-bg-2) 100%) !important;
border-color: var(--prem-edge) !important;
}
/* Override every inline color used in the card to the champagne palette */
.prem-status-card [style*="color:#fff"] { color: var(--prem-ink-1) !important; }
.prem-status-card [style*="color:#888"] { color: var(--prem-ink-3) !important; }
.prem-status-card [style*="color:#777"] { color: var(--prem-ink-2) !important; }
.prem-status-card [style*="background:#1F1A12"] { background: var(--prem-divider) !important; }
.prem-status-card [style*="border-top:1px solid #1F1A12"] { border-top-color: var(--prem-divider) !important; }
.prem-status-card .premium-name { color: var(--prem-ink-1) !important; }
/* ACTIVE pill — re-tinted to brown-on-cream */
.prem-status-card [style*="color:#E8C97A"] { color: var(--prem-ink-2) !important; }
.prem-status-card [style*="background:rgba(232,201,122,0.1)"] { background: var(--prem-pill-bg) !important; }
.prem-status-card [style*="border:1px solid rgba(232,201,122,0.25)"] { border-color: var(--prem-edge) !important; }
.prem-status-card [stroke="#777"] { stroke: var(--prem-ink-2) !important; }
body.light-mode .prem-status-card [style*="color:#fff"] { color: var(--prem-ink-1) !important; }
body.light-mode .prem-status-card [style*="color:#888"] { color: var(--prem-ink-3) !important; }
body.light-mode .prem-status-card [style*="color:#777"] { color: var(--prem-ink-2) !important; }
/* Cancel-subscription flow — light mode parity */
body.light-mode #cancelStep1,
body.light-mode #cancelStep2,
body.light-mode #cancelStep3,
body.light-mode #cancelStep4 { background: #EBEBEB !important; }
body.light-mode #cancelOverlay [style*="color:#fff"] { color: #1A1A1A !important; }
body.light-mode #cancelOverlay [style*="color:#666"] { color: #777 !important; }
body.light-mode #cancelOverlay [style*="color:#555"] { color: #888 !important; }
body.light-mode #cancelOverlay [style*="color:#444"] { color: #999 !important; }
body.light-mode #cancelOverlay [style*="color:#888"] { color: #888 !important; }
body.light-mode #cancelOverlay [style*="color:#333"] { color: #999 !important; }
/* Reason / pause / continue cards — flip dark surfaces to white */
body.light-mode #cancelOverlay [style*="background:#111"] { background: #FFFFFF !important; border-color: #E0E0E0 !important; }
body.light-mode #cancelOverlay [style*="background:#161616"] { background: #F5F5F5 !important; }
body.light-mode #cancelOverlay [style*="background:#1A1A1A"] { background: #F5F5F5 !important; }
body.light-mode #cancelOverlay [style*="border:1px solid #1E1E1E"] { border-color: #E0E0E0 !important; }
body.light-mode #cancelOverlay [style*="border:1px solid #2A2A2A"] { border-color: #D0D0D0 !important; }
/* "What you'll lose" red warning cards — soften red for light bg */
body.light-mode #cancelOverlay [style*="background:#1A0808"] { background: #FFF0F0 !important; border-color: #F5C8C8 !important; }
body.light-mode #cancelOverlay [style*="border:1px solid #2A1010"] { border-color: #F5C8C8 !important; }
body.light-mode #cancelOverlay [style*="color:#E05555"] { color: #C04040 !important; }
body.light-mode #cancelOverlay [style*="color:#883333"] { color: #B57070 !important; }
/* Discount offer card — re-apply champagne palette so it matches the
premium status card (don't flip to white-on-dark) */
body.light-mode #cancelOverlay [style*="background:linear-gradient(135deg,#1A140A,#2A1E0A)"] {
background: linear-gradient(135deg, #F5EBD3 0%, #EADBB1 100%) !important;
border-color: #C4A05A !important;
}
body.light-mode #cancelOverlay [style*="background:linear-gradient(135deg,#1A140A,#2A1E0A)"] [style*="color:#fff"] { color: #2A1F0A !important; }
body.light-mode #cancelOverlay [style*="background:linear-gradient(135deg,#1A140A,#2A1E0A)"] [style*="color:#888"] { color: #5B4520 !important; }
body.light-mode #cancelOverlay [style*="background:linear-gradient(135deg,#1A140A,#2A1E0A)"] [style*="color:#555"] { color: #8A6F3A !important; }
body.light-mode #cancelOverlay [style*="background:linear-gradient(135deg,#1A140A,#2A1E0A)"] [style*="color:#E8C97A"] { color: #5B4520 !important; }
body.light-mode #cancelOverlay [style*="background:#E8C97A11"] { background: rgba(91, 69, 32, 0.08) !important; }
.scroll-body { flex: 1; overflow-y: auto; scrollbar-width: none; }
.scroll-body::-webkit-scrollbar { display: none; }
.section-label {
font-size: 11px; font-weight: 600; color: #888;
letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 10px;
}
/* contact row with swipe */
.swipe-wrapper { position: relative; overflow: hidden; border-bottom: 1px solid #1E1E1E; }
.sw-actions-left {
position: absolute; top: 0; left: 0; bottom: 0;
display: flex; min-width: 240px;
}
.sw-star { background: #1A1A10; }
.sw-star span { color: #F5C842; }
.sw-actions-right {
position: absolute; top: 0; right: 0; bottom: 0;
display: flex; min-width: 160px;
}
.sw-action {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; padding: 0 22px; cursor: pointer; min-width: 80px;
}
.sw-action span { font-size: 12px; font-weight: 600; }
.sw-share { background: #1A2A1E; } .sw-share span { color: #6BAF7A; }
.sw-folder { background: #1A1E2A; } .sw-folder span { color: #6B8EC4; }
.sw-hide { background: #282828; } .sw-hide span { color: #888; }
.sw-delete { background: #2A0F0F; } .sw-delete span { color: #E05555; }
.contact-row {
position: relative; z-index: 2;
display: flex; align-items: center; gap: 12px;
padding: 13px 20px; background: #161616;
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
touch-action: pan-y;
}
.contact-row.no-t { transition: none; }
.c-avatar {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.c-info { flex: 1; min-width: 0; }
.c-name { font-size: 15px; font-weight: 600; color: #EFEFEF; }
.c-role { font-size: 12px; color: #999; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-time { font-size: 11px; color: #888; flex-shrink: 0; }
.c-chevron { color: #333333; flex-shrink: 0; }
/* toast */
.toast-el {
position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
background: #fff; color: #000; font-size: 13px; font-weight: 600;
padding: 8px 18px; border-radius: 20px; white-space: nowrap; z-index: 200;
opacity: 0; pointer-events: none;
transition: opacity 0.3s, transform 0.3s;
}
.toast-el.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }
/* ════════════════════════════════════════
SPLASH
════════════════════════════════════════ */
#splash {
background: #161616;
align-items: center; justify-content: center;
}
#splash .notch { background: #161616; }
.splash-glow {
position: absolute; width: 400px; height: 400px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.035) 0%, transparent 65%);
top: 50%; left: 50%; transform: translate(-50%,-58%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:0.7;transform:translate(-50%,-58%) scale(1)}50%{opacity:1;transform:translate(-50%,-58%) scale(1.08)} }
.splash-content { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.splash-logo { margin-bottom: 26px; animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both 0.15s; }
.circle-l { stroke-dasharray:151;stroke-dashoffset:151;animation:draw 0.65s cubic-bezier(0.4,0,0.2,1) forwards 0.35s; }
.circle-r { stroke-dasharray:151;stroke-dashoffset:151;animation:draw 0.65s cubic-bezier(0.4,0,0.2,1) forwards 0.5s; }
.center-dot { opacity:0;transform-origin:44px 32px;transform:scale(0);animation:dotPop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards 0.9s; }
@keyframes draw{to{stroke-dashoffset:0}} @keyframes dotPop{to{opacity:1;transform:scale(1)}}
.splash-words { opacity:0;animation:fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards 0.75s; display:flex;flex-direction:column;align-items:center;gap:8px; }
.splash-name { color:#EFEFEF;font-size:32px;font-weight:700;letter-spacing:-0.04em;line-height:1; }
.splash-slogan { color:#888;font-size:13px;letter-spacing:0.18em;text-transform:uppercase; }
.splash-loader { position:absolute;bottom:72px;left:50%;transform:translateX(-50%);opacity:0;animation:fadeIn 0.5s forwards 1.2s; }
.loader-track { width:48px;height:2px;background:#282828;border-radius:2px;overflow:hidden; }
.loader-fill { height:100%;background:#fff;width:0%;animation:load 1.8s cubic-bezier(0.4,0,0.2,1) forwards 1.4s; }
@keyframes load{0%{width:0%}60%{width:70%}100%{width:100%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{to{opacity:1}}
/* ════════════════════════════════════════
ONBOARDING
════════════════════════════════════════ */
#onboarding { background: #161616; }
#onboarding .notch { background: #161616; }
.ob-skip { position:absolute;top:52px;right:24px;color:#888;font-size:13px;font-weight:500;cursor:pointer;z-index:20; }
.ob-track { display:flex;width:400%;height:100%;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);touch-action:pan-y; }
.ob-slide { width:375px;height:812px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 32px 140px;position:relative; }
.ob-illus { width:240px;height:240px;margin-bottom:48px;position:relative;flex-shrink:0; }
.ob-num { font-size:12px;color:#888;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:16px;align-self:flex-start; }
.ob-title { font-size:22px;font-weight:600;color:#EFEFEF;letter-spacing:-0.02em;line-height:1.25;margin-bottom:14px;align-self:flex-start; }
.ob-title em { font-style:normal;color:#888; }
.ob-desc { font-size:15px;color:#999;line-height:1.6;align-self:flex-start; }
.ob-bottom { position:absolute;bottom:0;left:0;right:0;padding:0 32px 40px;display:flex;flex-direction:column;align-items:center;gap:20px;z-index:10; }
.ob-dots { display:flex;gap:6px;align-items:center; }
.ob-dot { width:6px;height:6px;border-radius:50%;background:#333333;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer; }
.ob-dot.active { width:20px;border-radius:3px;background:#fff; }
.ob-start { width:100%;height:54px;background:#fff;color:#000;border:none;border-radius:16px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;cursor:pointer;opacity:0;transform:translateY(20px);transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1),transform 0.4s;pointer-events:none; }
.ob-start.visible { opacity:1;transform:translateY(0);pointer-events:auto; }
/* scan illus */
.scan-scene { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.scan-frame-box { width:180px;height:110px;position:relative; }
.sf-corner { position:absolute;width:22px;height:22px; }
.sf-corner.tl{top:0;left:0;border-top:2.5px solid #fff;border-left:2.5px solid #fff;border-radius:4px 0 0 0}
.sf-corner.tr{top:0;right:0;border-top:2.5px solid #fff;border-right:2.5px solid #fff;border-radius:0 4px 0 0}
.sf-corner.bl{bottom:0;left:0;border-bottom:2.5px solid #fff;border-left:2.5px solid #fff;border-radius:0 0 0 4px}
.sf-corner.br{bottom:0;right:0;border-bottom:2.5px solid #fff;border-right:2.5px solid #fff;border-radius:0 0 4px 0}
.sf-card { position:absolute;inset:14px;background:#242424;border-radius:8px;border:1px solid #333333;display:flex;flex-direction:column;justify-content:center;padding:10px 14px;gap:5px; }
.sf-line { height:6px;border-radius:3px;background:#333; }
.sf-scan { position:absolute;left:14px;right:14px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent);animation:scanSw 2s ease-in-out infinite; }
@keyframes scanSw{0%{top:20px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:90px;opacity:0}}
.sf-badge { position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);background:#fff;color:#000;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;white-space:nowrap;animation:badgePop 2.5s ease-in-out infinite; }
@keyframes badgePop{0%,35%{opacity:0;transform:translateX(-50%) translateY(4px) scale(0.9)}55%,85%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(4px) scale(0.9)}}
/* tap phones illus */
.phones-scene { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.iphone-ob { background:#1C1C1E;border-radius:22px;border:1.5px solid #3A3A3C;position:absolute;width:72px;height:138px;top:50%;box-shadow:0 6px 28px rgba(0,0,0,0.6);z-index:1; }
.iphone-ob::after{content:'';position:absolute;right:-3px;top:36px;width:3px;height:22px;background:#3A3A3C;border-radius:0 2px 2px 0}
.iphone-ob::before{content:'';position:absolute;left:-3px;top:28px;width:3px;height:14px;background:#3A3A3C;border-radius:2px 0 0 2px;box-shadow:0 20px 0 #3A3A3C}
.iph-screen{position:absolute;inset:3px;background:#161616;border-radius:20px}
.iph-di{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:32px;height:10px;background:#000;border-radius:6px;z-index:2}
.iph-left { transform:translateY(-50%) rotate(90deg); animation:iphL 2.8s ease-in-out infinite; }
.iph-right { transform:translateY(-50%) rotate(-90deg); animation:iphR 2.8s ease-in-out infinite; }
@keyframes iphL{0%,100%{left:6px}50%{left:51px}} @keyframes iphR{0%,100%{right:6px}50%{right:51px}}
.loop-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;z-index:10}
.loop-icon{animation:loopT 2.8s ease-in-out infinite}
@keyframes loopT{0%{opacity:1;transform:scale(1) rotate(0deg)}35%{opacity:1;transform:scale(1) rotate(120deg)}45%{opacity:0;transform:scale(0.2) rotate(160deg)}72%{opacity:0}88%{opacity:1;transform:scale(1) rotate(360deg)}100%{opacity:1;transform:scale(1) rotate(360deg)}}
/* cards illus */
.cards-wrap{position:absolute;inset:0;overflow:hidden}
.card-item{position:absolute;background:#242424;border:1px solid #333333;border-radius:12px;padding:10px 14px;width:150px}
.ci-name{color:#EFEFEF;font-size:13px;font-weight:600;margin-bottom:3px}.ci-role{color:#999;font-size:11px}.ci-tag{display:inline-block;margin-top:6px;background:#222;color:#888;font-size:11px;padding:2px 8px;border-radius:20px}
.ci1{top:20px;left:20px;animation:flt 3s ease-in-out infinite}.ci2{top:80px;right:10px;animation:flt 3s ease-in-out infinite 0.5s}.ci3{bottom:40px;left:30px;animation:flt 3s ease-in-out infinite 1s}.ci4{bottom:100px;right:5px;animation:flt 3s ease-in-out infinite 1.5s}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ai-badge2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:#000;font-size:12px;font-weight:700;padding:6px 16px;border-radius:20px;letter-spacing:0.05em;animation:bP 2s ease-in-out infinite;white-space:nowrap}
@keyframes bP{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.05)}}
/* notif illus */
.notif-wrap2{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.notif-card2{width:200px;background:#242424;border:1px solid #333333;border-radius:14px;padding:12px 14px;animation:slN 3s ease-in-out infinite}
.notif-card2:nth-child(2){animation-delay:0.4s}.notif-card2:nth-child(3){animation-delay:0.8s}
@keyframes slN{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.nt{display:flex;align-items:center;gap:8px;margin-bottom:6px}.nt-icon{width:22px;height:22px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.nt-app{color:#999;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase}.nt-time{color:#888;font-size:11px;margin-left:auto}
.nt-title{color:#EFEFEF;font-size:12px;font-weight:600;margin-bottom:2px}.nt-body{color:#999;font-size:11px;line-height:1.4}
/* ════════════════════════════════════════
LOGIN / REGISTER
════════════════════════════════════════ */
.auth-screen { flex:1;display:flex;flex-direction:column;padding:64px 32px 40px;overflow-y:auto;scrollbar-width:none; }
.auth-screen::-webkit-scrollbar{display:none}
.logo-row{display:flex;align-items:center;gap:10px;margin-bottom:36px;margin-top:8px}
.logo-name{font-size:17px;font-weight:700;color:#EFEFEF;letter-spacing:-0.03em}
.auth-heading{font-size:24px;font-weight:600;color:#EFEFEF;letter-spacing:-0.03em;line-height:1.2;margin-bottom:24px}
.input-group{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.input-wrap{position:relative}
.input-wrap input{width:100%;height:52px;background:#1E1E1E;border:1.5px solid #333333;border-radius:14px;color:#EFEFEF;font-family:'DM Sans',sans-serif;font-size:15px;padding:0 48px 0 16px;outline:none;transition:border-color 0.2s;-webkit-appearance:none}
.input-wrap input::placeholder{color:#888}
.input-wrap input:focus{border-color:#EFEFEF}
.input-label{position:absolute;top:-9px;left:12px;font-size:12px;font-weight:600;color:#999;letter-spacing:0.08em;text-transform:uppercase;background:#161616;padding:0 4px;pointer-events:none}
.eye-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#888;display:flex;align-items:center;padding:4px;transition:color 0.2s}
.btn-primary{width:100%;height:52px;background:#fff;color:#000;border:none;border-radius:14px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;cursor:pointer;margin-bottom:16px;transition:background 0.15s;box-sizing:border-box;align-self:stretch;flex-shrink:0;display:block}
.btn-primary:active{background:#ddd}
.sub-links{display:flex;justify-content:space-between;margin-bottom:24px}
.sub-link-btn{font-size:13px;color:#888;cursor:pointer;background:none;border:none;font-family:'DM Sans',sans-serif;font-weight:500}
.sub-link-btn.bright{color:#EFEFEF;font-weight:600}
.divider{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.div-line{flex:1;height:1px;background:#282828}
.div-text{font-size:13px;color:#888;font-weight:500;letter-spacing:0.1em;text-transform:uppercase}
.social-row{display:flex;gap:10px}
.btn-social{flex:1;height:52px;background:#111;border:1.5px solid #333333;border-radius:14px;color:#EFEFEF;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background 0.15s,border-color 0.15s}
.btn-social:hover{background:#242424;border-color:#3A3A3A}
/* ════════════════════════════════════════
HOME
════════════════════════════════════════ */
/* #home background: handled by .page rule + light-mode override */
#home .notch { background: #0A0A0A; }
.home-topbar{padding:48px 24px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.logo-btn{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;transition:opacity 0.2s}
.logo-btn:hover{opacity:0.7}
.logo-btn-name{font-size:15px;font-weight:700;color:#EFEFEF;letter-spacing:-0.03em}
.settings-btn{width:36px;height:36px;background:#202020;border:1.5px solid #333333;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color 0.2s}
.settings-btn:hover{border-color:#888}
.home-scroll{flex:1;overflow-y:auto;scrollbar-width:none;padding:20px 24px 120px}
.home-scroll::-webkit-scrollbar{display:none}
.greeting{margin-bottom:20px}
.greeting-text{font-size:18px;font-weight:600;color:#EFEFEF;letter-spacing:-0.02em;line-height:1.3}
.greeting-sub{font-size:13px;color:#888;margin-top:4px}
.my-card{width:100%;height:56px;background:#111;border-radius:14px;border:1px solid #333333;position:relative;overflow:hidden;cursor:pointer;margin-bottom:16px;transition:border-color 0.2s, height 0.35s cubic-bezier(0.4,0,0.2,1)}
.my-card.expanded{height:140px}
.my-card:hover{border-color:#3A3A3A}
.mc-collapsed{position:absolute;inset:0;display:flex;align-items:center;padding:0 14px;gap:10px;pointer-events:none}
.mc-collapsed-avatar{width:32px;height:32px;border-radius:50%;background:#242424;border:1.5px solid #333333;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#888;flex-shrink:0;overflow:hidden}
.mc-collapsed-info{flex:1;min-width:0}
.mc-collapsed-name{font-size:15px;font-weight:600;color:#EFEFEF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-collapsed-role{font-size:12px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-edit-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:#242424;border:1px solid #333333;border-radius:8px;padding:5px 10px;font-size:12px;color:#AAA;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s;white-space:nowrap;z-index:2}
.mc-edit-btn:hover{border-color:#999;color:#EFEFEF}
.my-card .mc-expanded{opacity:0;pointer-events:none;transition:opacity 0.2s}
.my-card.expanded .mc-expanded{opacity:1;pointer-events:auto}
.my-card.expanded .mc-collapsed{opacity:0}
.my-card:hover{border-color:#888}
.mc-name{position:absolute;top:18px;left:18px;font-size:16px;font-weight:700;color:#EFEFEF;letter-spacing:-0.02em}
.mc-title{position:absolute;top:38px;left:18px;font-size:11px;color:#AAA}
.mc-company{position:absolute;top:52px;left:18px;font-size:11px;color:#999}
.mc-divider{position:absolute;top:74px;left:18px;right:18px;height:1px;background:#282828}
.mc-email{position:absolute;top:84px;left:18px;font-size:11px;color:#888}
.mc-phone{position:absolute;top:98px;left:18px;font-size:11px;color:#888}
.mc-edit{position:absolute;top:14px;right:14px;background:#242424;border:1px solid #333333;border-radius:8px;padding:4px 10px;font-size:11px;color:#AAA;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s}
.mc-edit:hover{border-color:#999;color:#EFEFEF}
.section-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.see-all{font-size:12px;color:#888;cursor:pointer;transition:color 0.2s}
.see-all:hover{color:#888}
.followup-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.fi-item{display:flex;align-items:center;gap:12px;background:#111;border:1px solid #282828;border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color 0.2s}
.fi-item:hover{border-color:#888}
.fi-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.fi-info{flex:1;min-width:0}
.fi-name{font-size:15px;font-weight:600;color:#EFEFEF}
.fi-reason{font-size:12px;color:#999;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-act{background:#242424;border:1px solid #333333;border-radius:8px;padding:5px 10px;font-size:11px;color:#888;font-weight:600;white-space:nowrap;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s;flex-shrink:0}
.fi-act:hover{border-color:#999;color:#EFEFEF}
.ai-badge-pill{display:inline-flex;align-items:center;gap:5px;background:#fff;color:#000;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;letter-spacing:0.05em}
.bottom-actions{position:absolute;bottom:0;left:0;right:0;padding:12px 24px 36px;background:linear-gradient(180deg,transparent 0%,#161616 25%);display:flex;gap:12px;z-index:20}
.action-btn{flex:1;height:54px;border-radius:16px;border:none;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform 0.15s,background 0.15s;letter-spacing:-0.01em}
.action-btn:active{transform:scale(0.97)}
.btn-exchange{background:#fff;color:#000}
.btn-exchange:hover{background:#eee}
/* Dark-mode default: button bg is white, so logo strokes/dot must be DARK
to remain visible (the SVG inline attributes set them to white, which
would be invisible against the white button). */
.btn-exchange [data-ring]{stroke:#000 !important}
.btn-exchange [data-dot]{fill:#000 !important}
.btn-scan-home{background:#fff;color:#000}
.btn-scan-home:hover{background:#eee}
/* ════════════════════════════════════════
SETTINGS (in drawer)
════════════════════════════════════════ */
.drawer-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);z-index:40;opacity:0;pointer-events:none;transition:opacity 0.3s;border-radius:54px}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:absolute;top:0;right:0;width:240px;height:100%;background:#0F0F0F;border-left:1px solid #282828;border-radius:0 54px 54px 0;z-index:50;transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;padding:56px 0 40px}
.drawer.open{transform:translateX(0)}
.drawer-header{padding:0 24px 24px;border-bottom:1px solid #242424;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.drawer-logo-name{font-size:15px;font-weight:700;color:#EFEFEF;letter-spacing:-0.03em}
.drawer-item{display:flex;align-items:center;gap:12px;padding:14px 24px;cursor:pointer;transition:background 0.15s}
.drawer-item:hover{background:#202020}
.d-icon{width:32px;height:32px;background:#242424;border:1px solid #333333;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.d-label{font-size:15px;font-weight:500;color:#ccc}
.drawer-divider{height:1px;background:#242424;margin:8px 24px}
.drawer-logout{margin-top:auto;padding:14px 24px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background 0.15s}
.drawer-logout:hover{background:#1A0A0A}
.drawer-logout span{font-size:15px;font-weight:500;color:#E05555}
/* ════════════════════════════════════════
WALLET
════════════════════════════════════════ */
/* #wallet background: handled by .page rule + light-mode override */
.wallet-topbar{padding:48px 20px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.wallet-title-row{display:flex;align-items:center;gap:8px}
.wallet-title{font-size:15px;font-weight:700;color:#EFEFEF;letter-spacing:-0.03em}
.wallet-actions{display:flex;gap:8px}
.edit-btn-sm{height:34px;padding:0 14px;background:#202020;border:1.5px solid #333333;border-radius:10px;color:#888;font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s}
.edit-btn-sm:hover{border-color:#888;color:#EFEFEF}
.edit-btn-sm.active{border-color:#EFEFEF;color:#EFEFEF;background:#242424}
.search-wrap{padding:0 20px 14px;flex-shrink:0}
.search-inner{position:relative}
.search-inner input{width:100%;height:44px;background:#1E1E1E;border:1.5px solid #333333;border-radius:12px;color:#EFEFEF;font-family:'DM Sans',sans-serif;font-size:15px;padding:0 16px 0 40px;outline:none;transition:border-color 0.2s;-webkit-appearance:none}
.search-inner input::placeholder{color:#888}
.search-inner input:focus{border-color:#999}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#888}
.wallet-scroll{flex:1;overflow-y:auto;scrollbar-width:none;padding:8px 20px 32px}
.wallet-scroll::-webkit-scrollbar{display:none}
.section-header2{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;margin-top:20px}
.section-sub{font-size:11px;color:#888}
.folder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:4px}
.folder-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;position:relative;touch-action:none}
.folder-item:hover{opacity:0.8}
.folder-box{width:88px;height:88px;border-radius:22px;background:#1E1E1E;border:1.5px solid #2C2C2C;display:flex;align-items:center;justify-content:center;transition:border-color 0.15s;position:relative}
.folder-item:hover .folder-box{border-color:#383838}
.folder-item.drop-target .folder-box{border-color:#EFEFEF;background:#282828;transform:scale(1.06)}
.folder-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;background:#fff;color:#000;font-size:11px;font-weight:700;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.folder-name{font-size:12px;font-weight:500;color:#AAA;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}
.folder-grid.edit-mode .folder-item:not(.add-btn){animation:wiggle 0.4s ease-in-out infinite alternate}
@keyframes wiggle{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
.delete-badge{position:absolute;top:-6px;left:-6px;z-index:5;width:20px;height:20px;background:#E05555;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:16px;color:#EFEFEF;font-weight:300;line-height:1;cursor:pointer}
.folder-grid.edit-mode .delete-badge{display:flex}
.folder-item.add-btn .folder-box{border-style:dashed;border-color:#333333}
.folder-item.add-btn:hover .folder-box{border-color:#999}
.folder-item.add-btn .folder-name{color:#888}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ai-folder{background:#111;border:1px solid #282828;border-radius:14px;padding:14px 10px;cursor:pointer;transition:border-color 0.2s;display:flex;flex-direction:column;gap:6px;min-height:88px;justify-content:center}
.ai-folder:hover{border-color:#888}
.ai-folder-name{font-size:12px;font-weight:600;color:#888}
.ai-folder-count{font-size:11px;color:#888}
/* ════════════════════════════════════════
SETTINGS PAGE
════════════════════════════════════════ */
/* #settings background: handled by .page rule + light-mode override */
.settings-topbar{padding:48px 20px 12px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.settings-title{font-size:16px;font-weight:700;color:#EFEFEF;letter-spacing:-0.02em}
.settings-scroll{flex:1;overflow-y:auto;scrollbar-width:none;padding:0 20px 40px}
.settings-scroll::-webkit-scrollbar{display:none}
.profile-card{background:#111;border:1px solid #282828;border-radius:18px;padding:18px 16px;display:flex;align-items:center;gap:14px;margin-bottom:24px;cursor:pointer;transition:border-color 0.2s}
.profile-card:hover{border-color:#888}
.profile-avatar-s{width:52px;height:52px;border-radius:50%;background:#1A2A1E;color:#6BAF7A;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;border:2px solid #333333}
.profile-info-s{flex:1;min-width:0}
.profile-name-s{font-size:16px;font-weight:700;color:#EFEFEF;letter-spacing:-0.02em}
.profile-email-s{font-size:13px;color:#999;margin-top:2px}
.profile-edit-s{background:#242424;border:1.5px solid #333333;border-radius:9px;padding:6px 14px;font-size:13px;font-weight:600;color:#888;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s}
.profile-edit-s:hover{border-color:#999;color:#EFEFEF}
.s-section{margin-bottom:20px}
.s-section-label{font-size:11px;font-weight:600;color:#888;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:8px;padding-left:4px}
.setting-block{background:#111;border:1px solid #282828;border-radius:16px;overflow:hidden}
.setting-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #202020;cursor:pointer;transition:background 0.15s}
.setting-row:last-child{border-bottom:none}
.setting-row:hover{background:#202020}
.setting-row.danger:hover{background:#1A0A0A}
.row-icon{width:30px;height:30px;border-radius:8px;background:#242424;border:1px solid #2C2C2C;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.row-icon.di{background:#1A0808;border-color:#2A1010}
.row-content{flex:1;min-width:0}
.row-label{font-size:15px;font-weight:500;color:#ccc}
.row-label.danger{color:#E05555}
.row-sub-s{font-size:12px;color:#888;margin-top:1px}
.row-right-s{display:flex;align-items:center;gap:8px;flex-shrink:0}
.row-value-s{font-size:13px;color:#888}
.row-chev{color:#333333}
.toggle{width:38px;height:22px;border-radius:11px;background:#333333;position:relative;cursor:pointer;transition:background 0.25s;flex-shrink:0}
.toggle.on{background:#fff}
.toggle-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#555;transition:transform 0.25s,background 0.25s}
.toggle.on .toggle-knob{transform:translateX(16px);background:#000}
.version-txt{text-align:center;font-size:12px;color:#333333;margin-top:12px;letter-spacing:0.08em}
/* ════════════════════════════════════════
EXCHANGE PAGE
════════════════════════════════════════ */
#exchange { background: #050505; }
.carousel-wrap{position:absolute;left:0;right:0;top:50%;transform:translateY(-55%);height:230px;z-index:10;transition:top 0.52s cubic-bezier(0.4,0,0.2,1),transform 0.52s;overflow:hidden;touch-action:pan-y;}
.carousel-wrap.activated{top:96px;transform:translateY(0) scale(0.92)}
.carousel-track{position:absolute;top:0;left:0;height:185px;display:flex;align-items:center}
.card-slot{flex-shrink:0;width:300px;height:185px;padding:0 10px;display:flex;align-items:center;justify-content:center;pointer-events:auto}
.biz-card{width:100%;height:100%;border-radius:20px;position:relative;overflow:hidden;cursor:pointer;box-shadow:0 16px 48px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.07);transform:scale(0.91);filter:brightness(0.45);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1),filter 0.32s,box-shadow 0.32s}
.card-slot.active .biz-card{transform:scale(1);filter:brightness(1);box-shadow:0 24px 64px rgba(0,0,0,0.85),0 0 0 1px rgba(255,255,255,0.1)}
.bc0{background:linear-gradient(135deg,#1C1C1C 0%,#0D0D0D 100%)}
.bc1{background:linear-gradient(135deg,#0D1828 0%,#080D14 100%)}
.bc2{background:linear-gradient(135deg,#1A0D0D 0%,#0D0808 100%)}
.bc-inner{padding:20px;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.bc-top{display:flex;justify-content:space-between;align-items:flex-start}
.bc-name{font-size:16px;font-weight:700;color:#EFEFEF;letter-spacing:-0.03em}
.bc-role{font-size:12px;color:rgba(255,255,255,0.4);margin-top:3px}
.bc-logo{width:28px;height:20px;opacity:0.55}
.bc-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.bc-email{font-size:11px;color:rgba(255,255,255,0.3)}
.bc-company{font-size:13px;font-weight:600;color:rgba(255,255,255,0.5);letter-spacing:0.06em}
.ex-dots{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:0;align-items:center;z-index:20;bottom:204px;transition:bottom 0.45s cubic-bezier(0.4,0,0.2,1)}
.ex-dots.activated{bottom:40px}
.ex-dot{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ex-dot-inner{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.22);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);pointer-events:none}
.ex-dot.active .ex-dot-inner{background:#fff;width:18px;border-radius:3px}
.ex-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:178px;font-size:13px;color:rgba(255,255,255,0.22);white-space:nowrap;z-index:20;transition:opacity 0.3s}
.ex-hint.hidden{opacity:0;pointer-events:none}
.ex-panel{position:absolute;left:0;right:0;bottom:0;height:62%;display:flex;flex-direction:column;align-items:center;padding:24px 32px 56px;z-index:5;opacity:0;pointer-events:none;transform:translateY(32px);transition:opacity 0.42s cubic-bezier(0.4,0,0.2,1),transform 0.42s}
.ex-panel.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.mode-toggle{display:flex;gap:5px;margin-bottom:32px;background:rgba(255,255,255,0.05);border-radius:12px;padding:4px}
.mode-btn{padding:7px 22px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;color:rgba(255,255,255,0.35);border:none;background:none;font-family:'DM Sans',sans-serif;letter-spacing:0.04em;transition:all 0.22s}
.mode-btn.active{background:#fff;color:#000}
.nfc-wrap2{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.nfc-rings2{position:relative;width:130px;height:130px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.nfc-ring2{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,0.12);animation:ringE 2.4s ease-out infinite}
.nfc-ring2:nth-child(1){width:38px;height:38px;animation-delay:0s}
.nfc-ring2:nth-child(2){width:66px;height:66px;animation-delay:0.45s}
.nfc-ring2:nth-child(3){width:96px;height:96px;animation-delay:0.9s}
.nfc-ring2:nth-child(4){width:124px;height:124px;animation-delay:1.35s}
@keyframes ringE{0%{opacity:0.55;transform:scale(0.82)}70%{opacity:0.12;transform:scale(1)}100%{opacity:0}}
.nfc-center2{width:34px;height:34px;border-radius:50%;background:#fff;z-index:2;display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(255,255,255,0.18)}
.qr-wrap2{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center}
.qr-wrap2.visible{display:flex}
.nfc-wrap2.hidden{display:none}
.qr-box2{width:150px;height:150px;background:#fff;border-radius:14px;padding:12px;display:grid;grid-template-columns:repeat(7,1fr);gap:2.5px}
.qr-cell2{border-radius:1.5px}
.wait-txt{font-size:15px;font-weight:500;color:rgba(255,255,255,0.35);margin-top:22px;letter-spacing:0.02em}
.wait-dots span{animation:blink2 1.5s ease-in-out infinite}
.wait-dots span:nth-child(2){animation-delay:0.2s}
.wait-dots span:nth-child(3){animation-delay:0.4s}
@keyframes blink2{0%,80%,100%{opacity:0.2}40%{opacity:1}}
.dismiss-hint{font-size:12px;color:rgba(255,255,255,0.13);margin-top:20px;letter-spacing:0.05em}
.ex-state-label{position:absolute;top:58px;left:50%;transform:translateX(-50%);font-size:15px;font-weight:600;color:rgba(255,255,255,0.45);letter-spacing:0.02em;z-index:30;white-space:nowrap;transition:opacity 0.3s}
/* ════════════════════════════════════════
SCAN PAGE
════════════════════════════════════════ */
#scan { background: #000; }
.scan-camera-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(255,255,255,0.015) 0%,transparent 50%),radial-gradient(ellipse at 70% 60%,rgba(255,255,255,0.01) 0%,transparent 40%),#080808;z-index:0}
.scan-topbar{position:relative;z-index:10;padding:52px 20px 0;display:flex;align-items:center;gap:12px}
.scan-back{width:36px;height:36px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s;flex-shrink:0}
.scan-back:hover{background:rgba(255,255,255,0.14)}
.scan-title-txt{font-size:16px;font-weight:600;color:#EFEFEF;letter-spacing:-0.02em}
.scan-sub-txt{font-size:12px;color:rgba(255,255,255,0.35);margin-top:1px}
.scan-area2{position:relative;z-index:5;flex:1;display:flex;align-items:center;justify-content:center}
.scan-frame-w{position:relative;width:300px;height:175px}
.sc-corner{position:absolute;width:28px;height:28px}
.sc-corner.tl{top:0;left:0;border-top:3px solid #fff;border-left:3px solid #fff;border-radius:6px 0 0 0}
.sc-corner.tr{top:0;right:0;border-top:3px solid #fff;border-right:3px solid #fff;border-radius:0 6px 0 0}
.sc-corner.bl{bottom:0;left:0;border-bottom:3px solid #fff;border-left:3px solid #fff;border-radius:0 0 0 6px}
.sc-corner.br{bottom:0;right:0;border-bottom:3px solid #fff;border-right:3px solid #fff;border-radius:0 0 6px 0}
.sc-frame-b{position:absolute;inset:0;border:1px solid rgba(255,255,255,0.08);border-radius:4px;pointer-events:none}
/* Scan-line animation removed — caused a "play arrow" look during permission prompt. */
.sc-line{display:none}
/* iOS Safari shows a native ▶ play button on