/* ================================================================ bitFlyer Mobile-First Clone — style.css Breakpoints: base = mobile (<480px), sm ≥480px, md ≥768px, lg ≥1024px ================================================================ */ /* ── Reset & base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } :root { /* Colors */ --bg-0: #080a10; --bg-1: #0d0f17; --bg-2: #131620; --bg-3: #1a1d2a; --bg-card: #10131c; --border: #1e2230; --border-2: #252a3a; --text-1: #f0f2f7; --text-2: #c8cdd8; --text-3: #9ca3af; --text-muted: #4b5563; --text-dim: #374151; --green: #22c55e; --green-bg: #14532d; --red: #ef4444; --red-bg: #7f1d1d; --blue: #3b82f6; --amber: #fbbf24; /* Nav heights — used for sticky offsets. The top safe-area inset is folded in so the sticky ticker/section-nav still line up directly under the header once it grows to clear a status bar / notch in the installed PWA. env() resolves to 0px in a normal browser tab, so this is a no-op there rather than a standalone-only special case. */ --header-h: calc(52px + env(safe-area-inset-top, 0px)); --ticker-h: 38px; /* Spacing */ --pad-xs: 4px; --pad-sm: 8px; --pad-md: 12px; --pad-lg: 16px; /* Type */ --font: 'Inter', system-ui, -apple-system, sans-serif; --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; } html { height: 100%; overscroll-behavior: none; /* Chrome colour, not page colour, and deliberately different from . In an iOS home-screen app the system reserves the status-bar and home-indicator strips and paints them itself with the canvas background — the page never gets to draw there, so no amount of .bottom-nav styling can reach it. Taking the canvas background from and matching it to the header/nav (--bg-2) makes those strips continue the app's chrome instead of showing the darker page background, so the nav reads as running to the physical bottom edge. is pinned over the whole viewport with its own --bg-0, so this is only ever visible in those reserved strips (and behind an overscroll bounce). */ background: var(--bg-2); } body { font-family: var(--font); font-size: 13px; background: var(--bg-0); color: var(--text-2); overscroll-behavior: none; display: flex; flex-direction: column; /* The shell is pinned to the visual viewport rather than sized with viewport units. 100vh/100dvh and -webkit-fill-available all disagree with each other inside an iOS home-screen app: with a translucent status bar the web view is full-screen, but -webkit-fill-available reports the height *minus* the status bar, so the column came up short and the bottom nav floated well above the screen edge. Anchoring all four sides sidesteps the whole question — the box is whatever the viewport currently is, and it re-resolves for free when Android's URL bar slides away or the keyboard opens. Nothing scrolls itself (every scrollable region is an inner container), so taking it out of flow costs nothing. Fixed positioning here does NOT become the containing block for the modals — only transform/filter/perspective do that — so they stay anchored to the viewport as before. The bottom safe-area inset deliberately lives on .bottom-nav, not here: as padding on it shrinks the column and leaves a strip of page background under the nav instead of letting the bar reach the physical bottom edge like a native tab bar. */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; } /* ================================================================ ICON SPRITE — sized/colored via the parent's font-size/color ================================================================ */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex-shrink: 0; } /* Prevent accidental text-selection / callout menu when tapping or long-pressing repeatedly-tapped pill/tab controls on mobile */ .pair-btn, .coin-chip, .bs-tab, .ot-btn, .tf-btn, .ob-view-btn, .trade-filter-btn, .snav-item, .bnav-item, .pct-btn, .qa-btn, .settings-item, .kyc-doc-option, .kyc-upload-slot, .submit-btn, .auth-btn, .modal-submit, .toggle-slider, .deposit-sim-btn { user-select: none; -webkit-user-select: none; } /* ================================================================ SCROLLBAR ================================================================ */ ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; } /* ================================================================ TOP HEADER ================================================================ */ .header { background: var(--bg-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; /* Top padding clears the status bar when installed; box-sizing is border-box, so the usable header content stays its nominal height. */ padding: env(safe-area-inset-top, 0px) var(--pad-md) 0; height: var(--header-h); flex-shrink: 0; gap: 10px; position: sticky; top: 0; z-index: 100; } .logo { font-size: 17px; font-weight: 800; color: var(--text-1); letter-spacing: -0.5px; flex-shrink: 0; } .logo span { color: var(--blue); } .pair-btn { display: flex; align-items: center; gap: 6px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 10px; cursor: pointer; touch-action: manipulation; } .pair-btn:active { background: var(--border-2); } .pair-name { font-size: 13px; font-weight: 700; color: var(--text-1); } .pair-arrow { font-size: 10px; color: var(--text-muted); } /* Header price (mobile only) */ .header-price-block { margin-left: auto; text-align: right; } .header-price { font-size: 16px; font-weight: 700; color: var(--green); line-height: 1.2; } .header-change { font-size: 10px; color: var(--green); } /* Hamburger / menu icon */ .menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; } .menu-btn span { display: block; height: 2px; background: var(--text-3); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; } /* ================================================================ TICKER STRIP (scrollable stats bar) ================================================================ */ .ticker-strip { background: var(--bg-1); border-bottom: 1px solid var(--border); display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 var(--pad-md); gap: 20px; flex-shrink: 0; height: var(--ticker-h); align-items: center; position: sticky; top: var(--header-h); z-index: 99; } .ticker-strip::-webkit-scrollbar { display: none; } .ticker-stat { display: flex; flex-direction: column; flex-shrink: 0; } .ticker-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; } .ticker-value { font-size: 11px; color: var(--text-3); font-weight: 500; white-space: nowrap; } /* ================================================================ SECTION NAV (tabs: Chart / Book / Trade / Orders) ================================================================ */ .section-nav { background: var(--bg-1); border-bottom: 1px solid var(--border); display: flex; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; position: sticky; top: calc(var(--header-h) + var(--ticker-h)); z-index: 99; } .section-nav::-webkit-scrollbar { display: none; } .snav-item { flex-shrink: 0; padding: 10px 16px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; touch-action: manipulation; white-space: nowrap; } .snav-item.active { color: var(--blue); border-bottom-color: var(--blue); } .snav-item:active { background: rgba(255,255,255,0.05); } /* ================================================================ MAIN CONTENT — mobile single-column stack, desktop grid ================================================================ */ .main { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Each tab "page" hidden by default */ .tab-page { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .tab-page.active { display: flex; } /* ================================================================ PANEL SHARED ================================================================ */ .panel-title { font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; padding: 6px var(--pad-md); background: var(--bg-card); border-bottom: 1px solid var(--border); flex-shrink: 0; } /* ================================================================ CHART PAGE ================================================================ */ .chart-page-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .chart-timeframes { display: flex; gap: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } .chart-timeframes::-webkit-scrollbar { display: none; } .tf-btn { padding: 8px 14px; font-size: 11px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; flex-shrink: 0; touch-action: manipulation; transition: color 0.15s; } .tf-btn.active { color: var(--blue); border-bottom-color: var(--blue); } .tf-btn:active { background: rgba(255,255,255,0.05); } /* Candle/Line toggle, pinned to the end of the same scrollable toolbar row as the timeframe pills — matches bitFlyer's real chart toolbar layout (timeframes + chart-type control together on one strip). */ .chart-type-toggle { display: flex; gap: 2px; margin-left: auto; padding: 4px 8px; flex-shrink: 0; align-self: center; } .ct-btn { padding: 4px 10px; font-size: 10px; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid var(--border-2); cursor: pointer; touch-action: manipulation; transition: color 0.15s, background-color 0.15s, border-color 0.15s; } .ct-btn:first-child { border-radius: 6px 0 0 6px; border-right: none; } .ct-btn:last-child { border-radius: 0 6px 6px 0; } .ct-btn.active { color: #fff; background: var(--blue); border-color: var(--blue); } /* Moving-average legend, overlaid top-left of the price chart itself (TradingView/Binance-style) rather than a separate legend row that would eat into the chart's own height. */ .chart-ma-legend { position: absolute; top: 6px; left: 10px; z-index: 2; display: flex; gap: 10px; font-size: 9px; font-weight: 600; pointer-events: none; } .ma-tag b { font-weight: 700; margin-left: 3px; } .chart-area { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; background: var(--bg-0); } .price-chart-wrap { flex: 1 1 auto; min-height: 0; position: relative; } .volume-chart-wrap { flex: 0 0 56px; min-height: 0; position: relative; border-top: 1px solid var(--border); } .chart-area canvas { width: 100% !important; height: 100% !important; display: block; } /* Stats row below chart */ .chart-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); flex-shrink: 0; } .chart-stat-cell { background: var(--bg-card); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .cs-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .cs-value { font-size: 11px; font-weight: 600; color: var(--text-2); } .cs-value.up { color: var(--green); } .cs-value.down { color: var(--red); } /* ================================================================ ORDER BOOK PAGE ================================================================ */ .ob-controls { display: flex; gap: var(--pad-sm); padding: var(--pad-sm) var(--pad-md); background: var(--bg-card); border-bottom: 1px solid var(--border); flex-shrink: 0; align-items: center; } .ob-view-btn { padding: 4px 10px; font-size: 10px; font-weight: 500; background: var(--bg-3); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border-2); touch-action: manipulation; } .ob-view-btn.active { border-color: var(--blue); color: var(--blue); } .ob-view-btn:active { background: var(--bg-3); } .ob-precision { margin-left: auto; font-size: 10px; color: var(--text-muted); } /* The precision picker sits inline in a compact toolbar, not a full modal field — override the custom-select trigger's default full-width button styling down to the same small pill the native with a button that opens this same bottom-sheet picker (see enhanceCustomSelect() in app.js), so every dropdown in the app shares one on-brand interaction instead of each OS's native it replaces was never positioned either, which is why the icon painted on top before. */ .cs-native { display: none !important; } .cs-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #0d0f17; border: 1px solid #252a3a; border-radius: 8px; padding: 12px 14px; color: #f0f2f7; font-size: 14px; font-family: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color 0.15s; } .cs-trigger:active, .cs-trigger.cs-open { border-color: #3b82f6; } .cs-trigger.has-icon { padding-left: 42px; } .cs-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-trigger-placeholder .cs-trigger-label { color: #374151; } .cs-trigger-chevron { width: 16px; height: 16px; color: #6b7280; flex-shrink: 0; transition: transform 0.2s; } .cs-trigger.cs-open .cs-trigger-chevron { transform: rotate(180deg); } .cs-trigger.cs-disabled { opacity: 0.5; pointer-events: none; } .cs-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px var(--pad-lg); border-bottom: 1px solid var(--border); cursor: pointer; touch-action: manipulation; } .cs-item:active { background: var(--bg-3); } .cs-item-label { font-size: 14px; color: var(--text-1); } .cs-item.selected .cs-item-label { color: var(--blue); font-weight: 600; } .cs-item-check { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; visibility: hidden; } .cs-item.selected .cs-item-check { visibility: visible; } .cs-drawer-empty { padding: 28px var(--pad-lg); text-align: center; font-size: 12px; color: var(--text-muted); } /* ================================================================ TOAST NOTIFICATION ================================================================ */ .toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 10px 18px; font-size: 12px; color: var(--text-1); z-index: 300; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; /* wrap instead of nowrap — dynamic messages (e.g. insufficient-balance amounts) can be longer than the screen is wide */ max-width: min(340px, calc(100vw - 32px)); white-space: normal; text-align: center; line-height: 1.4; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ================================================================ DESKTOP BREAKPOINT — md (≥768px) two-column layout ================================================================ */ @media (min-width: 768px) { :root { --header-h: calc(48px + env(safe-area-inset-top, 0px)); } body { font-size: 12px; } /* height comes from --header-h above — no override needed here */ /* Hide mobile bottom nav on desktop */ .bottom-nav { display: none; } /* Top section-nav becomes persistent */ .section-nav { display: flex; } .snav-item { padding: 10px 20px; } /* Main switches to 2-column: book | chart+order */ .main { flex-direction: row; overflow: hidden; flex: 1; } /* All tab pages visible at once in desktop grid */ .tab-page { display: flex !important; overflow: hidden; } /* Book column */ #page-book { width: 240px; flex-shrink: 0; border-right: 1px solid var(--border); flex-direction: column; } /* Chart takes remaining space */ #page-chart { flex: 1; min-width: 0; } /* Trade form becomes right column */ #page-trade { width: 220px; flex-shrink: 0; border-left: 1px solid var(--border); overflow-y: auto; } /* Trades panel merges below chart */ #page-trades { display: none !important; /* merged into chart page on desktop */ } .trade-page { padding: var(--pad-md); gap: 10px; } .submit-btn { padding: 11px; font-size: 13px; } .bs-tab { padding: 8px; font-size: 12px; } .input-wrap { height: 36px; } .input-wrap input { font-size: 12px; } .pct-btn { padding: 5px 0; } /* No bottom-nav on desktop, so the toast shouldn't float 90px up with nothing beneath it */ .toast { bottom: 24px; } } /* ================================================================ DESKTOP BREAKPOINT — lg (≥1024px) three-column layout ================================================================ */ @media (min-width: 1024px) { #page-book { width: 230px; } #page-trade { width: 230px; } /* Show inline trades at bottom of chart area */ .inline-trades { display: flex !important; flex-direction: column; height: 150px; flex-shrink: 0; border-top: 1px solid var(--border); overflow: hidden; } } /* Hide desktop-only elements on mobile */ .desktop-only { display: none; } @media (min-width: 768px) { .desktop-only { display: flex; } .mobile-only { display: none !important; } } /* ================================================================ ACCOUNT PAGE ================================================================ */ .account-guest { display: flex; flex-direction: column; align-items: center; padding: 48px 24px 32px; gap: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; } .guest-logo { font-size: 28px; font-weight: 800; color: #f0f2f7; letter-spacing: -1px; } .guest-logo span { color: #3b82f6; } .guest-sub { font-size: 13px; color: #6b7280; text-align: center; max-width: 280px; line-height: 1.5; } .auth-btn { width: 100%; max-width: 320px; padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 700; border: none; cursor: pointer; transition: filter 0.15s; flex-shrink: 0; } .auth-btn:active { filter: brightness(0.9); } .auth-btn.primary { background: #3b82f6; color: #fff; } .auth-btn.secondary { background: transparent; color: #3b82f6; border: 1.5px solid #3b82f6; } .guest-features { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 14px; margin-top: 10px; flex-shrink: 0; } .guest-feature { display: flex; align-items: center; gap: 14px; } .gf-icon { font-size: 22px; } .gf-title { font-size: 13px; font-weight: 600; color: #c8cdd8; } .gf-desc { font-size: 11px; color: #6b7280; margin-top: 2px; } /* logged in dashboard — this is the critical fix: must scroll independently within the tab-page's bounded height */ .account-dashboard { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 0; /* extra bottom padding so the last settings item clears the iOS home-indicator / safe area and isn't flush to the edge */ padding-bottom: calc(var(--pad-lg) + env(safe-area-inset-bottom)); } .profile-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #131620; border-bottom: 1px solid #1e2230; flex-shrink: 0; } /* A tappable badge (see openAvatarPicker() in app.js) showing one of the illustrated avatar SVGs — background color is set per-avatar in JS. The chrome here (ring + drop shadow + glossy highlight) stays the same regardless of which avatar/color is picked. */ .profile-avatar { width: 64px; height: 64px; border-radius: 50%; border: none; padding: 0; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 0; /* establishes its own stacking context so ::after's negative z-index below stays contained instead of escaping behind sibling elements in .profile-bar */ overflow: hidden; box-shadow: 0 0 0 3px rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.35); touch-action: manipulation; } .profile-avatar:active { filter: brightness(0.92); } .profile-avatar::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%); pointer-events: none; } #profile-avatar-icon { width: 64px; height: 64px; } /* Uploaded photo sits on top of the illustrated avatar; whichever is in use is toggled in applyProfilePhoto(). object-fit keeps a non-square photo from stretching inside the circular badge. */ #profile-avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Monogram fallback — the default for a new account, and the same treatment most exchange apps use before a photo is set. Sized off the badge so it scales with it rather than being hard-coded twice. */ .avatar-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; letter-spacing: 0.5px; color: #fff; border-radius: 50%; user-select: none; } /* Preview swatch inside the picker grid uses the same rules at a smaller size. */ .avatar-option .avatar-initials { font-size: 20px; position: static; } /* Small camera chip — makes "you can change this" discoverable without a text label. Sits above the photo but inside the badge's clip. */ .avatar-cam-badge { position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); border: 2px solid #131620; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: none; } .avatar-cam-badge svg { width: 10px; height: 10px; } /* The badge would otherwise be clipped by the circular overflow:hidden on .profile-avatar, so let it show while the photo stays clipped. */ .profile-avatar { overflow: visible; } .profile-avatar > #profile-avatar-icon, .profile-avatar > #profile-avatar-photo { border-radius: 50%; } .profile-avatar::after { border-radius: 50%; } /* Upload / remove rows at the top of the avatar picker */ .photo-upload-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; text-align: left; margin-bottom: 8px; touch-action: manipulation; } .photo-upload-row:active { background: var(--bg-3); } .pur-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(59,130,246,0.14); color: #60a5fa; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pur-icon svg { width: 16px; height: 16px; } .photo-upload-row.danger .pur-icon { background: rgba(206,79,79,0.14); color: var(--red); } .pur-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pur-title { font-size: 13px; font-weight: 700; color: var(--text-1); } .pur-sub { font-size: 11px; color: var(--text-3); } /* "or choose an avatar" rule */ .avatar-picker-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .avatar-picker-divider::before, .avatar-picker-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Avatar picker modal — a simple 3-across grid of tappable badges, matching the same "colored circle + white icon" chrome as the profile badge itself so the picker previews look exactly like the result. */ .avatar-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .avatar-option { aspect-ratio: 1; width: 100%; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; z-index: 0; overflow: hidden; touch-action: manipulation; box-shadow: 0 0 0 3px rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.35); } .avatar-option::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%); pointer-events: none; } .avatar-option .icon { width: 100%; height: 100%; } .avatar-option.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.35), 0 4px 12px rgba(0,0,0,0.35); } .avatar-option:active { filter: brightness(0.92); } .profile-name { font-size: 14px; font-weight: 700; color: #f0f2f7; } .profile-email { font-size: 11px; color: #6b7280; margin-top: 2px; } .profile-badges { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .profile-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px; } .profile-badge-vip { display: inline-flex; align-items: center; line-height: 0; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.4)); } .vip-shield-icon { width: 19px; height: 21px; } .profile-badge.unverified { background: var(--bg-3); color: var(--text-muted); border: 1px solid var(--border-2); } .profile-badge.verified { background: #14532d; color: #53c27c; } .logout-btn { margin-left: auto; padding: 6px 12px; font-size: 11px; font-weight: 600; background: transparent; border: 1px solid #374151; border-radius: 6px; color: #9ca3af; cursor: pointer; flex-shrink: 0; } .logout-btn:active { background: #1a1d2a; } /* "Complete your account" onboarding checklist — 2FA -> bank -> AI Trading Desk -> deposit, in that order (see initSetupChecklist() in app.js). Deliberately calm/professional chrome (unlike the loud promo banners elsewhere) — a credible-sounding official onboarding flow is its own, quieter kind of trust-building red flag. */ .setup-checklist { margin: 14px 14px 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; flex-shrink: 0; } .sc-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; } .sc-title { font-size: 14px; font-weight: 700; color: var(--text-1); } .sc-subtitle { font-size: 11px; color: var(--text-3); margin-top: 2px; font-weight: 600; } .sc-dismiss { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-3); cursor: pointer; flex-shrink: 0; } .sc-dismiss svg { width: 13px; height: 13px; } .sc-progress-track { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 4px; } .sc-progress-fill { height: 100%; background: var(--blue); border-radius: 999px; transition: width 0.3s ease; } .sc-items { display: flex; flex-direction: column; margin-top: 8px; } .sc-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-radius: 8px; cursor: pointer; } .sc-item:not(:last-child) { border-bottom: 1px solid var(--border); } .sc-item:hover { background: rgba(255,255,255,0.03); } /* Icon badge — shows the feature icon by default; swaps to a green checkmark once that step is verified done (see initSetupChecklist()). */ .sc-item-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s ease; } .sc-item-icon svg { width: 17px; height: 17px; color: var(--text-2); } .sc-icon-done { display: none; } .sc-item.done .sc-icon-feature { display: none; } .sc-item.done .sc-icon-done { display: block; } .sc-item.done .sc-item-icon { background: var(--green); } .sc-item.done .sc-item-icon svg { color: #fff; } .sc-item-body { flex: 1; min-width: 0; } .sc-item-eyebrow { font-size: 9.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1px; } .sc-item.done .sc-item-eyebrow { color: var(--green); } .sc-item-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .sc-item-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; } .sc-item.done .sc-item-title { color: var(--text-2); } /* Only the first not-yet-done item gets this — a quiet nudge toward what to do next, the same convention polished onboarding checklists (Chime/Wealthfront-style "getting started" cards) use. */ .sc-item-next { display: none; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #60a5fa; background: rgba(59,130,246,0.14); border: 1px solid rgba(59,130,246,0.35); padding: 3px 8px; border-radius: 999px; flex-shrink: 0; } .sc-item.next-step .sc-item-next { display: inline-flex; } .sc-item-chevron { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; transform: rotate(-90deg); } .total-balance-card { background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%); margin: 14px; border-radius: 12px; padding: 20px; flex-shrink: 0; } .tb-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tb-label { font-size: 11px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.5px; } .tb-amount { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -1px; } .tb-change { font-size: 12px; } .tb-change.up { color: #86efac; } .tb-change.down { color: #fca5a5; } .currency-toggle { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 9px; cursor: pointer; flex-shrink: 0; } .currency-toggle:active { background: rgba(255,255,255,0.28); } /* Balance amount + its visibility toggle sit on their own row, eye button right beside the figure — a small frosted-glass circle, not a bordered chip, the way Nigerian fintech apps (PalmPay/Kuda/PocketApp-style balance cards) place the show/hide control directly next to the number rather than up in the header. */ .tb-amount-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; } .tb-eye-btn { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.16); border: none; color: #fff; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, transform 0.15s ease; } .tb-eye-btn:active { background: rgba(255,255,255,0.32); transform: scale(0.92); } .tb-eye-btn svg { width: 16px; height: 16px; } .wallet-section { padding: 0 14px 8px; flex-shrink: 0; } .wallet-section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 8px; } .ws-title { font-size: 13px; font-weight: 700; color: #f0f2f7; } .ws-edit-btn { font-size: 11px; font-weight: 600; color: #3b82f6; background: none; border: none; cursor: pointer; padding: 4px 8px; } .wallet-list, .wallet-edit-list { display: flex; flex-direction: column; gap: 8px; } .wallet-edit-section-title { font-size: 12px; font-weight: 700; color: #9ca3af; margin-bottom: 8px; } .wallet-edit-divider { border: none; border-top: 1px solid #1e2230; margin: 18px 0; } /* Add-a-coin search results — no own scroll/max-height, same reasoning as .faq-list: the outer .modal is the only scroll container. */ .coin-search-results { display: flex; flex-direction: column; gap: 8px; } .coin-search-item { background: #10131c; border: 1px solid #1e2230; border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; } .coin-search-icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .coin-search-item .ws-edit-btn { border: 1px solid #1e2230; border-radius: 8px; flex-shrink: 0; } /* Press-and-drag handle for reordering wallet rows inside Manage Wallets. touch-action:none is scoped to just this small handle (not the row or the list) so grabbing it to drag doesn't also fight the modal's own scroll — the broader touch-action rules that caused real scroll bugs elsewhere in this app were the mistake of applying it too widely, not of using it at all. */ .wallet-drag-handle { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 16px; letter-spacing: -2px; cursor: grab; touch-action: none; user-select: none; } .wallet-item.dragging { cursor: grabbing; z-index: 5; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.35); border-color: #3b82f6; } .wallet-item { background: #10131c; border: 1px solid #1e2230; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; } .wallet-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .wallet-info { flex: 1; min-width: 0; } .wallet-name { font-size: 13px; font-weight: 600; color: #f0f2f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wallet-addr { font-size: 10px; color: #4b5563; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wallet-right { text-align: right; flex-shrink: 0; } .wallet-amount { font-size: 13px; font-weight: 700; color: #f0f2f7; } .wallet-jpy { font-size: 10px; color: #6b7280; margin-top: 2px; } .wallet-fix-icon-btn { font-size: 10px; font-weight: 600; color: #3b82f6; background: none; border: none; cursor: pointer; padding: 2px 0; margin-top: 2px; } .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 14px 14px; flex-shrink: 0; } .qa-btn { background: #10131c; border: 1px solid #1e2230; border-radius: 10px; padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; touch-action: manipulation; } .qa-btn:active { background: #1a1d2a; } .qa-icon { font-size: 20px; } .qa-label { font-size: 10px; color: #9ca3af; font-weight: 500; } .settings-list { margin: 0 14px 24px; background: #10131c; border: 1px solid #1e2230; border-radius: 10px; overflow: hidden; flex-shrink: 0; } .settings-item { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid #1a1d2a; cursor: pointer; touch-action: manipulation; } .settings-item:last-child { border-bottom: none; } .settings-item:active { background: #1a1d2a; } .si-icon { font-size: 18px; width: 24px; text-align: center; } .si-label { font-size: 13px; color: #c8cdd8; flex: 1; } .si-arrow { font-size: 18px; color: #374151; } .si-notify-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; } /* Small pill on the "Install app" row — the same quiet accent the promo banners use, so it draws a glance without shouting. */ .si-install-badge { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #60a5fa; background: rgba(59,130,246,0.14); border-radius: 999px; padding: 3px 8px; flex-shrink: 0; } /* ================================================================ MODALS (login, signup, edit wallet) ================================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 200; display: none; } .modal-overlay.open { display: block; } .modal { position: fixed; bottom: 0; left: 0; right: 0; background: #131620; border-radius: 20px 20px 0 0; z-index: 201; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); display: none; flex-direction: column; gap: 14px; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Swiping past the top/bottom of the modal's own scroll range would otherwise chain the leftover scroll delta to whatever's behind it (the page rubber-bands into view for a moment, then springs back). `contain` stops that chaining at the modal's edge — the modal can still bounce internally, but the page underneath never moves. */ overscroll-behavior: contain; } .modal.open { display: flex; } /* On larger screens, center modals */ @media (min-width: 480px) { .modal { top: 50%; left: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%); border-radius: 16px; width: 100%; max-width: 420px; max-height: 90vh; } } .modal-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .modal-logo { font-size: 20px; font-weight: 800; color: #f0f2f7; } .modal-logo span { color: #3b82f6; } .modal-close { background: #1a1d2a; border: none; color: #9ca3af; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal-title { font-size: 18px; font-weight: 700; color: #f0f2f7; } .modal-title-group { display: flex; flex-direction: column; gap: 3px; } .support-meta-row { display: flex; align-items: center; gap: 6px; } .support-ticket-badge { font-size: 10.5px; font-weight: 600; color: #6b7280; font-family: 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.3px; } .support-status-badge { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } .support-status-badge.open { background: rgba(59,130,246,0.14); color: #60a5fa; } .support-status-badge.awaiting { background: rgba(245,158,11,0.16); color: #fbbf24; } .support-status-badge.resolved { background: rgba(107,114,128,0.18); color: #9ca3af; } .support-agent-badge { font-size: 11px; color: var(--text-muted); } .modal-field { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; } .modal-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; } .modal-field-hint { font-size: 10px; color: #6b7280; line-height: 1.5; margin-top: 2px; } .modal-input-wrap { position: relative; } .modal-input { width: 100%; /* Flex items default to min-width:auto (their content's min-content size), not 0 — native inputs like type="date" have a fixed intrinsic width (MM/DD/YYYY segments + calendar icon) that some browsers won't shrink below, which overrides width:100% and pushes the field past its container's right edge. min-width:0 lets width:100% actually win. */ min-width: 0; background: #0d0f17; border: 1px solid #252a3a; border-radius: 8px; padding: 12px 14px; color: #f0f2f7; /* 16px avoids iOS Safari's zoom-on-focus (anything under 16px triggers it) */ font-size: 16px; font-family: inherit; outline: none; transition: border-color 0.15s; } .modal-input:focus { border-color: #3b82f6; } .modal-input::placeholder { color: #374151; } .modal-input:disabled { color: #6b7280; cursor: not-allowed; opacity: 0.7; } /* Native number-input spinner clashes with the custom dark styling */ .modal-input[type="number"]::-webkit-inner-spin-button, .modal-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .modal-input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Safari renders a date input's internal segments as their own flex box that ignores width:100% entirely unless the native appearance is dropped — min-width:0 above isn't enough on its own for this one. */ .modal-input[type="date"] { -webkit-appearance: none; appearance: none; max-width: 100%; overflow: hidden; line-height: 1.25; } .modal-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 16px; user-select: none; } /* Leading icon inside a login/signup field — sits on top of the input, pointer-events:none so it never blocks focusing/typing or opening a