@font-face { font-family: Geist; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2-variations'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations'); } :root { /* ── new dark design system (source of truth) ── */ /* surface scale: near-black → raised cards/borders */ --bg-0: #070809; --bg-1: #0b0c0f; --bg-2: #111317; --bg-3: #171a20; --bg-4: #1f232b; --bg-5: #2a2f38; /* foreground: primary / secondary / muted */ --fg-1: #f4f3ee; --fg-2: #b4b5b0; --fg-3: #6f716e; /* ink-on-surface base: borders/overlays/hairlines use rgb(var(--ink-rgb)/α) so a single per-theme flip re-tints every hairline at once */ --ink-rgb: 244 243 238; /* borders expressed as ink-on-surface alpha */ --border-1: rgb(var(--ink-rgb) / 7%); --border-2: rgb(var(--ink-rgb) / 12%); --border-3: rgb(var(--ink-rgb) / 22%); /* lime accent ramp + dark ink for text on accent */ --accent-1: #c7f284; --accent-2: #b8e875; --accent-3: #a0d45a; --accent-ink: #0b1505; /* semantic */ --info: #7fb7f2; --danger: #f0716d; --success: #6fe07a; --warning: #e8b86b; /* translucent status tints (for pills / row highlights on dark) */ --success-tint: rgb(111 224 122 / 14%); --success-tint-strong: rgb(111 224 122 / 22%); --danger-tint: rgb(240 113 109 / 14%); --danger-tint-strong: rgb(240 113 109 / 22%); --warning-tint: rgb(232 184 107 / 14%); /* status borders (used by action buttons / banners) */ --success-border: rgb(111 224 122 / 30%); --danger-border: rgb(240 113 109 / 30%); --warning-border: rgb(232 184 107 / 30%); /* type families */ --font-sans: 'Geist', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', 'SF Mono', menlo, monospace; /* radius scale: used by panels, cards, form fields, icon buttons. Pills (999px) and circles (50%) are NOT in this scale — they're semantically different shapes, not size variants. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* ── legacy semantic aliases: existing rules reference these names, so mapping them onto the new system re-themes the whole app via var() ── */ --bg: var(--bg-1); --panel: var(--bg-2); --surface: var(--bg-3); --soft: var(--bg-4); --panel-border: var(--border-2); --text: var(--fg-1); --muted: var(--fg-2); --accent: var(--accent-1); --accent-soft: rgb(199 242 132 / 12%); --button-primary-bg: var(--accent-1); --button-primary-bg-hover: var(--accent-2); --shadow: 0 10px 30px rgb(0 0 0 / 45%); } /* ── light theme: opt-in via (dark is default). Only the design tokens are overridden — every legacy alias references them through var(), so the whole UI re-themes from this one block. Palette mirrors the reference site's light mode (accent darkens to forest green, ink flips dark-on-light). ── */ :root[data-theme='light'] { --bg-0: #e8e4d8; --bg-1: #f2efe6; --bg-2: #fbf8f1; --bg-3: #fff; --bg-4: #ebe7dd; --bg-5: #ddd8c9; /* foreground */ --fg-1: #0f0e0c; --fg-2: #2d2a24; --fg-3: #605b52; /* ink-on-surface base + borders */ --ink-rgb: 15 14 12; --border-1: rgb(var(--ink-rgb) / 8%); --border-2: rgb(var(--ink-rgb) / 16%); --border-3: rgb(var(--ink-rgb) / 32%); /* accent */ --accent-1: #7cb342; --accent-2: #689f2e; --accent-3: #578f20; --accent-ink: #fff; /* semantic */ --info: #3f7bc4; --danger: #d14545; --success: #3fa851; --warning: #c99c45; /* status tints */ --success-tint: rgb(63 168 81 / 12%); --success-tint-strong: rgb(63 168 81 / 20%); --danger-tint: rgb(209 69 69 / 12%); --danger-tint-strong: rgb(209 69 69 / 20%); --warning-tint: rgb(201 156 69 / 14%); /* status borders */ --success-border: rgb(63 168 81 / 38%); --danger-border: rgb(209 69 69 / 38%); --warning-border: rgb(201 156 69 / 38%); /* legacy aliases that carried theme-specific raw values */ --accent-soft: rgb(124 179 66 / 16%); --shadow: 0 10px 30px rgb(15 14 12 / 10%); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font-sans); font-size: 14px; background: var(--bg-0); } button, input, select { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; } /* Consistent keyboard-focus ring for every interactive element. Uses :focus-visible so mouse clicks don't show it — only keyboard/AT navigation. Element-specific focus rules (e.g. inputs below) can still override. */ :focus-visible { border-color: var(--accent-1); outline: 0; box-shadow: inset 0 0 0 1px var(--accent-1); } .app-shell { max-width: 1240px; margin: 0 auto; padding: 22px 18px 32px; } /* ── shell layout: fixed left sidebar + scrolling main column ── */ .app-layout { display: grid; grid-template-columns: 204px minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 18px; height: 100vh; padding: 20px 16px; border-right: 1px solid var(--border-1); background: var(--bg-1); } .sidebar-brand { padding: 4px 8px 6px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .sidebar-footer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; } .sidebar-promo { position: relative; padding: 16px; border: 1px solid rgb(199 242 132 / 25%); border-radius: 14px; color: var(--fg-1); background: radial-gradient(circle at 50% 0%, rgb(199 242 132 / 18%), transparent 65%), linear-gradient(#14181e, #0a0b0e); text-align: center; text-decoration: none; overflow: hidden; cursor: pointer; transition: border-color 120ms ease; } .sidebar-promo:hover, .sidebar-promo:focus-visible { border-color: rgb(199 242 132 / 45%); } /* soft pulsing glow behind the orb (matches the reference) */ .sidebar-promo::before { content: ''; position: absolute; inset: 0; background: radial-gradient( circle at 50% 30%, rgb(199 242 132 / 12%), transparent 50% ); pointer-events: none; animation: promo-pulse 4s ease-in-out infinite; } /* the three-orb "image": overlapping glossy spheres, like the brand mark */ .sidebar-promo-orb { position: relative; z-index: 1; display: block; width: 56px; height: 56px; margin: 0 auto 10px; } .sidebar-promo-orb span { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #c9c9c9 70%); } .sidebar-promo-orb .a { top: 0; right: 0; width: 28px; height: 28px; } .sidebar-promo-orb .b { bottom: 0; left: 0; width: 24px; height: 24px; } .sidebar-promo-orb .c { right: 8px; bottom: 4px; width: 18px; height: 18px; } .sidebar-promo-title { position: relative; z-index: 1; display: block; font-size: 13px; font-weight: 600; } .sidebar-promo-sub { position: relative; z-index: 1; display: block; margin-top: 4px; color: var(--fg-3); font-size: 11px; } @keyframes promo-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .sidebar-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; } .sidebar-network { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 0.74rem; text-transform: capitalize; } .net-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; } .app-main { display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--border-1); background: var(--bg-0); } .topbar-price { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--border-1); border-radius: 999px; color: var(--fg-1); background: var(--panel); font-family: var(--font-mono); font-size: 12px; line-height: 1.4; user-select: none; white-space: nowrap; } .topbar-price strong { color: var(--success); font-weight: 700; letter-spacing: 0.04em; } .topbar-price-pair, .topbar-price-change { font-size: 12px; letter-spacing: 0.04em; } .topbar-price-change { margin-left: auto; color: var(--fg-3); } .topbar-price-change.is-up { color: var(--success); } .topbar-price-change.is-down { color: var(--danger); } .topbar-price.is-stale { opacity: 0.68; } .topbar-actions { flex-wrap: nowrap; } /* Brand in the topbar is mobile-only (desktop shows it in the sidebar). The `.topbar` prefix raises specificity above `.brand-link`'s inline-flex so the hide actually wins on desktop. */ .topbar .topbar-brand { display: none; } .content { display: flex; flex-direction: column; padding: 14px 24px; } /* mobile shell (sidebar → bottom tab bar) lives at the very end of the file — see the @media block after the sidebar-nav rules. */ .header-panel, .nav-panel, .workspace-panel { border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow); } .header-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; } .nav-panel { display: flex; gap: 10px; margin-top: 14px; padding: 10px 18px; } .workspace-panel { margin-top: 20px; padding: 18px; } .app-disclaimer { margin-top: 22px; padding: 0 4px; color: rgb(var(--ink-rgb) / 38%); font-size: 0.7rem; line-height: 1.55; text-align: center; } .app-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 0.75rem; } .footer-label { text-transform: uppercase; letter-spacing: 0.04em; } .theme-toggle-button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border-2); border-radius: 8px; color: var(--muted); background: var(--surface); cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; } .theme-toggle-button:hover, .theme-toggle-button:focus-visible { color: var(--text); border-color: var(--border-3); background: var(--bg-4); } .theme-toggle-button svg { width: 15px; height: 15px; } /* the topbar copy of the toggle only appears on mobile (where the sidebar footer — which holds the desktop toggle — is replaced by the bottom bar) */ .theme-toggle-topbar { display: none; } .footer-commit { padding: 0.18rem 0.4rem; border: 1px solid rgb(var(--ink-rgb) / 10%); color: var(--text); background: rgb(var(--ink-rgb) / 6%); font-family: var(--font-mono); font-size: 0.76rem; } .header-actions { display: flex; align-items: center; gap: 10px; } .wallet-box { display: flex; align-items: center; gap: 8px; } .copy-button-wrap { position: relative; display: inline-flex; } .brand { font-family: var(--font-sans); font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700; letter-spacing: -0.03em; } .brand-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; cursor: pointer; } .brand-logo { display: block; width: auto; height: clamp(1.4rem, 3vw, 1.8rem); } .brand-tagline { margin-top: 5px; color: rgb(var(--ink-rgb) / 55%); font-size: 0.78rem; line-height: 1.3; } .network-select, .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-1); border-radius: 12px; color: var(--fg-1); background: var(--surface); font-family: var(--font-sans); font-size: 14px; transition: border-color 120ms ease; } .network-select, .field input:not([type='range']), .address-display { min-height: 42px; } /* compact network selector in the topbar — keep it slim so it doesn't dominate */ .network-select { width: 132px; min-height: 32px; padding: 6px 10px; font-size: 13px; } .language-select-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } .language-select-wrap::after { content: ''; position: absolute; top: 50%; right: 13px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--fg-3); pointer-events: none; transform: translateY(-65%) rotate(45deg); } .language-select-flag { position: absolute; left: 10px; z-index: 1; font-size: 13px; line-height: 1; pointer-events: none; } .language-select { appearance: none; width: auto; min-width: 106px; height: 30px; padding: 4px 30px 4px 31px; border: 1px solid var(--border-1); border-radius: 999px; color: var(--fg-1); background: var(--panel); font-family: var(--font-sans); font-size: 12px; line-height: 1.2; cursor: pointer; } .language-select:hover, .language-select:focus-visible { border-color: var(--border-3); outline: 0; } .field input::placeholder, .field select::placeholder, .field textarea::placeholder { color: var(--fg-3); } .field input.is-error, .field select.is-error, .field textarea.is-error { border-color: var(--danger-border); color: var(--danger); background: var(--danger-tint); } .subtle-text, .panel-caption, .balance-meta { color: var(--muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wallet-status { max-width: 140px; color: var(--muted); font-size: 0.85rem; text-align: right; line-height: 1.4; } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border-1); border-radius: 8px; color: var(--fg-3); background: var(--surface); cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; } .icon-button svg { width: 14px; height: 14px; } .icon-button:hover, .icon-button:focus-visible { color: var(--fg-1); border-color: var(--border-2); background: var(--bg-4); } .copy-tooltip { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; padding: 0.35rem 0.5rem; border: 1px solid var(--panel-border); color: var(--accent-ink); background: var(--accent); font-size: 0.75rem; line-height: 1; white-space: nowrap; box-shadow: var(--shadow); } .wallet-button, .primary-button, .secondary-button, .tab-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; cursor: pointer; user-select: none; -webkit-user-select: none; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease; } .btn-icon { flex-shrink: 0; width: 14px; height: 14px; } .wallet-button, .primary-button { padding: 8px 16px; border-radius: 999px; color: var(--accent-ink); background: var(--button-primary-bg); font-size: 13px; font-weight: 600; } .wallet-action-button { justify-content: center; } .secondary-button { padding: 7px 14px; border: 1px solid var(--border-1); border-radius: 999px; color: var(--fg-1); background: var(--bg-2); font-size: 13px; } .wallet-button:disabled, .primary-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: 0.55; } .tab-button { display: inline-flex; align-items: center; gap: 7px; padding: 0.65rem 0.85rem; border-radius: 0; color: var(--muted); background: var(--surface); border-color: var(--panel-border); text-decoration: none; } .nav-panel .tab-button { border-radius: 20px; padding: 0 15px 0 10px; min-height: 36px; color: var(--text); font-weight: 700; } .nav-panel .tab-button .btn-icon { width: 16px; height: 16px; } .profile-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .profile-indicator.red { background: var(--danger); } .profile-indicator.green { background: var(--success); } .profile-indicator.yellow { background: var(--warning); animation: profile-pulse 1.5s ease-in-out infinite; } @keyframes profile-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .tab-button.is-active { color: var(--text); background: var(--accent-soft); } .tab-button.is-disabled { color: var(--muted); background: var(--bg-3); border-color: rgb(var(--ink-rgb) / 10%); cursor: not-allowed; opacity: 0.65; } .wallet-button:hover, .primary-button:hover { background: var(--button-primary-bg-hover); } .tab-button:hover { background: var(--bg-4); } .panel { padding: 18px; border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow); } .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .panel-header h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-sans); font-size: 1rem; } .panel-header h2 .btn-icon { width: 18px; height: 18px; color: var(--muted); } .loan-title-icons { display: inline-flex; align-items: center; gap: 6px; } .panel-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .title-with-badge { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .status-badge { display: inline-flex; align-items: center; padding: 0.18rem 0.48rem; border-radius: 999px; font-size: 0.72rem; line-height: 1; white-space: nowrap; } .status-badge.is-paused { color: var(--warning); background: var(--warning-tint); } .panel-lead { margin: 12px 0 0; max-width: 62ch; color: var(--muted); line-height: 1.45; font-size: 0.9rem; } /* per-page header (eyebrow + large title + subtitle), mirrors the reference */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .page-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .page-title { margin: 10px 0 12px; font-size: clamp(26px, 4.5vw, 40px); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; } .page-title .accent { color: var(--accent); } .page-sub { max-width: 620px; margin: 0; color: var(--fg-3); font-size: 15px; line-height: 1.5; } /* ── pill button system (mirrors the reference .btn/.btn-accent/.btn-ghost) ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; font-family: var(--font-sans); font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .btn-accent { padding: 8px 16px; color: var(--accent-ink); background: var(--accent-1); font-size: 13px; font-weight: 600; } .btn-accent:hover, .btn-accent:focus-visible { background: var(--accent-2); } .btn-ghost { padding: 7px 14px; border: 1px solid var(--border-1); color: var(--fg-1); background: var(--bg-2); font-size: 13px; } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--border-2); background: var(--bg-3); } .btn:disabled { cursor: not-allowed; opacity: 0.55; } .btn-lg { height: 48px; padding: 12px 22px; font-size: 15px; } /* ── /home overrides: title + sub run full-width so the three stat cards below have room to breathe; everywhere else the default 620px constraint on .page-sub still applies. */ .page-header-home .page-header-text { width: 100%; } .page-header-home .page-sub { max-width: 720px; } .home-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; } .home-hero-copy { min-width: 0; text-align: left; } .home-hero-copy .page-sub { margin-right: 0; margin-left: 0; } .home-launch-calc { width: 100%; margin: 0; padding: 24px; border: 1px solid var(--border-1); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgb(199 242 132 / 7%), transparent 36%), var(--panel, #0e0e10); } .home-launch-calc-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .home-launch-calc-head h2 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: 0; line-height: 1.12; } .home-launch-calc-head p { margin: 7px 0 0; color: var(--fg-2); font-size: 14px; max-width: 460px; } .home-launch-calc-badge { align-self: flex-start; padding: 6px 10px; border-radius: 999px; color: var(--accent-1); background: rgb(199 242 132 / 13%); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .home-launch-calc-assets { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 2px; } .home-launch-calc-asset { border: 1px solid var(--border-1); border-radius: 8px; padding: 8px 14px; color: var(--fg-2); background: var(--bg-1); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; } .home-launch-calc-asset.is-active { border-color: var(--accent-1); color: var(--accent-1); background: rgb(199 242 132 / 9%); } .home-launch-calc-body { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(280px, 0.96fr); gap: 18px; align-items: start; } .home-launch-calc-controls { display: grid; gap: 18px; } .home-launch-calc-field { display: grid; gap: 10px; } .home-launch-calc-duration { margin-bottom: 0; } .home-launch-calc-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--fg-2); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .home-launch-calc-limit { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; } .home-launch-calc-input-wrap { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border-1); border-radius: 12px; background: var(--bg-1); } .home-launch-calc-input-wrap input { width: 100%; min-width: 0; padding: 15px 16px; border: 0; outline: none; color: var(--text); background: transparent; font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: 0; } .home-launch-calc-unit { padding: 0 16px; border-left: 1px solid var(--border-1); color: var(--fg-2); font-family: var(--font-mono); font-weight: 700; } .home-launch-calc-range { width: 100%; accent-color: var(--accent-1); cursor: pointer; } .home-launch-calc-scale { display: flex; justify-content: space-between; gap: 12px; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; line-height: 1.2; } .home-launch-calc-scale span:last-child { text-align: right; } .home-launch-calc-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; } .home-launch-calc-result { display: grid; align-content: start; gap: 8px; min-height: 96px; padding: 16px; border: 1px solid var(--border-1); border-radius: 12px; background: var(--bg-1); } .home-launch-calc-result > span { color: var(--fg-2); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .home-launch-calc-result strong { font-family: var(--font-mono); font-size: 20px; font-weight: 650; letter-spacing: 0; text-align: left; } .home-launch-calc-result small { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; line-height: 1.35; } .home-launch-calc-result.is-main { border-color: rgb(199 242 132 / 34%); background: rgb(199 242 132 / 10%); } .home-launch-calc-result.is-main span { color: var(--accent-1); } .home-launch-calc-result.is-cost strong { color: var(--accent-1); } .home-launch-calc-deposit { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border: 1px solid rgb(199 242 132 / 26%); border-radius: 12px; background: rgb(199 242 132 / 7%); } .home-launch-calc-deposit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .home-launch-calc-deposit-head span, .home-launch-calc-deposit-grid span { color: var(--fg-2); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .home-launch-calc-deposit-head strong { color: var(--accent-1); font-family: var(--font-mono); font-size: 22px; font-weight: 700; text-align: right; white-space: nowrap; } .home-launch-calc-deposit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .home-launch-calc-deposit-grid > div { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border-1); border-radius: 10px; background: rgb(var(--ink-rgb) / 3%); } .home-launch-calc-deposit-grid strong { color: var(--fg-1); font-family: var(--font-mono); font-size: 15px; font-weight: 650; } .home-launch-calc-deposit-grid small, .home-launch-calc-deposit p { color: var(--fg-3); font-size: 12px; line-height: 1.4; } .home-launch-calc-deposit p { margin: 0; } .home-launch-calc-details { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--border-1); border-radius: 12px; background: rgb(var(--ink-rgb) / 3%); } .home-launch-calc-details h3 { margin: 0 0 2px; color: var(--fg-1); font-size: 13px; font-weight: 700; letter-spacing: 0; } .home-launch-calc-detail-group { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border-1); } .home-launch-calc-detail-group > span { color: var(--fg-3); font-size: 11.5px; line-height: 1.3; } .home-launch-calc-detail-group > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; color: var(--fg-2); font-size: 12px; line-height: 1.35; } .home-launch-calc-detail-group strong { color: var(--fg-1); font-family: var(--font-mono); font-size: 12px; font-weight: 650; text-align: right; white-space: nowrap; } .home-launch-calc-note { margin: 14px 0 18px; color: var(--fg-3); font-size: 12px; line-height: 1.45; } .home-launch-calc-cta { min-width: 164px; justify-content: center; } @media (width <= 520px) { .home-launch-calc { padding: 18px; } .home-launch-calc-body { grid-template-columns: 1fr; } .home-launch-calc-results { grid-template-columns: 1fr; } .home-launch-calc-deposit-head { display: grid; gap: 5px; } .home-launch-calc-deposit-head strong { text-align: left; } .home-launch-calc-deposit-grid { grid-template-columns: 1fr; } .home-launch-calc-head { display: grid; } .home-launch-calc-label { align-items: flex-start; flex-direction: column; gap: 4px; } .home-launch-calc-input-wrap input { font-size: 25px; } .home-launch-calc-result { display: grid; gap: 6px; } .home-launch-calc-result strong { text-align: left; } .home-launch-calc-detail-group > div { align-items: flex-start; flex-direction: column; gap: 2px; } .home-launch-calc-detail-group strong { text-align: left; } } :root[data-theme='light'] .home-launch-calc { background: radial-gradient(circle at 100% 0%, rgb(124 179 66 / 8%), transparent 36%), var(--bg-2); box-shadow: 0 1px 3px rgb(15 14 12 / 4%); } :root[data-theme='light'] .home-launch-calc-badge, :root[data-theme='light'] .home-launch-calc-result.is-main > span { color: var(--accent-3); } :root[data-theme='light'] .home-launch-calc-badge { background: rgb(124 179 66 / 14%); } :root[data-theme='light'] .home-launch-calc-range { accent-color: var(--accent-3); } /* ── /home: three stat cards (rounded slabs mirroring the panel aesthetic used elsewhere on the page). 1/3 each on desktop; stacks to a single column on mobile. Polled every 2s by the route. */ .home-stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; } .home-stat-card { padding: 24px; border: 1px solid var(--border-1); border-radius: 18px; background: var(--panel, #0e0e10); } .home-stat-label { margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .home-stat-value { font-family: var(--font-mono); font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); } .home-stat-value.is-accent { color: var(--accent-1); } .home-stat-sub { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); } @media (width <= 720px) { .home-stat-cards { grid-template-columns: 1fr; } } /* light-theme tweaks: warm surface + accent ramp, mirrors the rest of the page-level cards under `:root[data-theme='light']`. */ :root[data-theme='light'] .home-stat-card { background: var(--bg-2); box-shadow: 0 1px 3px rgb(15 14 12 / 4%); } :root[data-theme='light'] .home-stat-value.is-accent { color: var(--accent-3); } .home-howto-section { margin-top: 30px; } .home-howto-section h2 { margin: 0 0 20px; font-size: clamp(28px, 4vw, 46px); font-weight: 650; letter-spacing: 0; } .home-howto-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; } .home-howto-card { display: flex; flex-direction: column; min-height: 340px; padding: 26px; border: 1px solid var(--border-1); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgb(199 242 132 / 5%), transparent 38%), var(--panel, #0e0e10); } .home-howto-index { margin-bottom: 34px; color: var(--accent-1); font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: 0.08em; } .home-howto-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 30px; border-radius: 14px; color: var(--accent-1); background: rgb(199 242 132 / 12%); } .home-howto-icon svg { width: 30px; height: 30px; } .home-howto-card h3 { margin: 0 0 14px; font-size: 23px; font-weight: 650; letter-spacing: 0; line-height: 1.18; } .home-howto-card p { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.55; } .home-howto-chip { align-self: flex-start; margin-top: auto; padding: 7px 11px; border: 1px solid var(--border-1); border-radius: 8px; color: var(--fg-3); background: rgb(255 255 255 / 2%); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; } @media (width <= 980px) { .home-howto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width <= 760px) { .home-howto-grid { grid-template-columns: 1fr; } .home-howto-card { min-height: 0; } } :root[data-theme='light'] .home-howto-card { background: radial-gradient(circle at 100% 0%, rgb(124 179 66 / 7%), transparent 38%), var(--bg-2); box-shadow: 0 1px 3px rgb(15 14 12 / 4%); } :root[data-theme='light'] .home-howto-index, :root[data-theme='light'] .home-howto-icon { color: var(--accent-3); } :root[data-theme='light'] .home-howto-icon { background: rgb(124 179 66 / 12%); } :root[data-theme='light'] .home-howto-chip { background: var(--bg-3); } :root[data-theme='light'] .btn-ghost { border-color: var(--border-1); background: var(--bg-3); } .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; } .loan-action-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; } .loan-action-button.is-repay { border-color: var(--success-border); background: var(--success-tint); color: var(--success); } .loan-action-button.is-liquidate { border-color: var(--danger-border); background: var(--danger-tint); color: var(--danger); } .loan-action-button.is-repay:hover:not(:disabled), .loan-action-button.is-repay:focus-visible:not(:disabled) { background: var(--success-tint-strong); } .loan-action-button.is-liquidate:hover:not(:disabled), .loan-action-button.is-liquidate:focus-visible:not(:disabled) { background: var(--danger-tint-strong); } .pagination-row { align-items: center; justify-content: space-between; } .registration-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; } /* compact rounded action button inside info banners — sized close to the text line rather than the full-height form button (reference uses pill buttons) */ .registration-banner .primary-button { min-height: 0; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; } .registration-banner-copy { min-width: 0; } .registration-detail { margin-top: 4px; font-size: 0.82rem; line-height: 1.45; } .registration-transaction { margin-top: 10px; } .registration-signature { display: inline-block; margin-left: 8px; font-family: var(--font-mono); font-size: 0.78rem; word-break: break-all; } .panel-message { margin: 14px 0; padding: 10px 16px; border: 1px solid transparent; border-radius: 24px; } .panel-message + .panel-message { margin-top: -8px; } .dismissible-message { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .dismissible-message > div { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; max-height: 15em; overflow-y: auto; } .panel-message.is-error { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-border); } .panel-message.is-success { color: var(--success); background: var(--success-tint); border-color: var(--success-border); } .panel-message.is-warning { color: var(--warning); background: var(--warning-tint); border-color: var(--warning-border); } .panel-message.is-loading { color: var(--warning); background: var(--warning-tint); border-color: var(--warning-border); } .panel-message-subtle { margin-top: 6px; font-size: 0.88rem; opacity: 0.8; } .transaction-notice { margin-top: 14px; padding: 12px 18px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-md); background: var(--surface); } .transaction-notice-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .transaction-notice-meta { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .transaction-notice-copy { display: grid; gap: 4px; min-width: 0; } .transaction-notice-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .transaction-notice-signature { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.45; } .transaction-notice-link { color: var(--text); text-decoration: none; cursor: pointer; } .transaction-notice-link:hover, .transaction-notice-link:focus-visible { color: var(--accent-1); text-decoration: underline; } .transaction-notice-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; border-radius: 999px; flex: 0 0 auto; font-size: 0.9rem; line-height: 1; } .transaction-notice-icon.is-pending { color: var(--muted); background: rgb(var(--ink-rgb) / 6%); } .transaction-notice-icon.is-success { color: var(--success); background: var(--success-tint); } .transaction-notice-icon.is-error { color: var(--danger); background: var(--danger-tint); } .transaction-spinner { width: 0.78rem; height: 0.78rem; border: 2px solid rgb(var(--ink-rgb) / 18%); border-top-color: rgb(var(--ink-rgb) / 62%); border-radius: 999px; animation: transaction-spin 0.9s linear infinite; } .transaction-notice-close { padding: 0; border: 0; color: #8f8a81; font-size: 1rem; line-height: 1; background: transparent; cursor: pointer; } .transaction-notice-close:hover, .transaction-notice-close:focus-visible { color: var(--text); } .transaction-notice-trace { margin-top: 12px; padding: 10px 12px; color: var(--danger); background: var(--danger-tint); overflow: auto; } .transaction-notice-trace pre { margin: 0; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } @keyframes transaction-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .launch-config-detail { color: var(--muted); font-size: 0.9rem; } .launch-config-status { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; font-size: 0.9rem; line-height: 1; } .launch-config-status.is-active { color: var(--success); background: var(--success-tint); } .launch-config-status.is-paused { color: var(--danger); background: var(--danger-tint); } .launch-config-note { margin-top: 12px; } .address-inline { overflow-wrap: anywhere; } .debug-address-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .debug-address-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: start; } .debug-address-label { color: var(--muted); font-size: 0.8rem; } .debug-address-value { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.8rem; } .empty-state.compact { margin-top: 8px; padding: 10px 12px; } .message-close { padding: 0; border: 0; color: currentcolor; font-size: 1rem; line-height: 1; background: transparent; cursor: pointer; } .balance-list { margin-top: 18px; } .wallet-balance-panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .wallet-balance-pane { display: flex; flex-direction: column; min-width: 0; max-height: 400px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-md); background: var(--surface); } .wallet-balance-pane-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid rgb(var(--ink-rgb) / 8%); } .wallet-balance-pane-header > div { width: 100%; min-width: 0; } .wallet-balance-pane-header h2 { margin: 0; font-size: 1rem; } .wallet-address-meta, .token-address-meta { max-width: 100%; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.25; letter-spacing: 0; } .wallet-address-meta { margin-top: 10px; } .wallet-address-row { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; margin-top: 10px; } .wallet-address-action { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 6px; } .wallet-address-action svg { width: 12px; height: 12px; } .wallet-address-full { display: block; flex: 1 1 auto; min-width: 0; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; } .balance-list.is-pane-list { flex: 1 1 auto; min-height: 0; margin-top: 0; overflow: auto; } .pane-message { padding: 14px; color: var(--muted); } .vault-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .launch-list { display: grid; gap: 14px; margin-top: 18px; } .profile-account-section { margin-top: 18px; } .profile-account-row { align-items: flex-start; } .profile-account-value { display: flex; align-items: center; gap: 8px; min-width: 0; } .profile-referral-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .profile-referral-row > span { flex: 0 0 auto; font-weight: 600; } .profile-referral-value { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } .profile-referral-link { display: block; min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .profile-referral-placeholder { min-width: 0; color: var(--fg-2); text-align: right; } .settings-address-value { max-width: min(360px, 48vw); overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .settings-address-value.is-error { color: var(--danger); } .service-wallet-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; flex-shrink: 0; } .service-wallet-status-icon.is-success { color: var(--success); } .service-wallet-status-icon.is-error { color: var(--danger); } .address-value-with-link { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; } .explorer-link-button { text-decoration: none; } .vault-card { display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-md); color: var(--text); text-decoration: none; background: var(--surface); } .vault-card:hover { background: var(--bg-4); } .vault-card-header { min-width: 0; font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.45; } .loan-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .loan-card-identity { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; } .pretruncated-address { display: inline-block; min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; font-family: var(--font-sans); } .loan-card-address { flex: 1 1 auto; } .pool-card-header { display: flex; align-items: center; gap: 10px; } .pool-card-title { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .token-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } .token-icon svg, .token-icon img { width: 100%; height: 100%; display: block; object-fit: contain; } .token-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; color: inherit; text-decoration: none; } .token-icon-placeholder { border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 38%), transparent 42%), rgb(var(--ink-rgb) / 24%); } .platform-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; font-family: var(--font-sans); font-size: 0.58rem; font-weight: 700; line-height: 1; text-transform: uppercase; } .platform-icon.is-pumpfun { overflow: hidden; background: transparent; } .platform-icon img { display: block; width: 100%; height: 100%; object-fit: cover; } .platform-icon.is-unknown { background: rgb(var(--ink-rgb) / 24%); } .loan-card-created-at { color: var(--muted); font-size: 0.78rem; font-weight: 400; text-align: right; white-space: nowrap; flex-shrink: 0; } .vault-card-address { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vault-card-meta, .vault-card-meta-row { min-width: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; } .vault-card-header strong, .vault-card-meta, .vault-card-meta-row, .middle-ellipsis { display: block; min-width: 0; } .vault-card-meta-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 12px; } .vault-card-address-value { display: flex; justify-content: flex-end; min-width: 0; text-align: right; } /* Preset card header: "ID. addr...addr" on the left, launch-config name on the right. The address text is a single pre-truncated string, not separate head/tail spans. Keep it inside its flex cell so it never paints over the config label. */ .preset-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .preset-card-identity { display: inline-flex; align-items: center; flex: 1 1 auto; gap: 8px; min-width: 0; } .preset-card-address { flex: 1 1 auto; } .preset-card-config { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } .middle-ellipsis { display: flex; align-items: baseline; min-width: 0; max-width: 100%; white-space: nowrap; } .middle-ellipsis-head { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .middle-ellipsis-tail { flex: 0 0 auto; white-space: nowrap; } .vault-card-divider { height: 1px; margin: 2px 0 4px; background: rgb(var(--ink-rgb) / 10%); } .vault-card-grid, .vault-detail-grid { display: grid; gap: 10px; align-items: start; } .vault-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; color: var(--text); font-size: 0.82rem; } .vault-card-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; min-width: 0; } .vault-card-metric-label { min-width: 0; color: var(--muted); } .vault-card-metric-value { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .vault-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; } .balance-row, .status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .balance-row { padding: 14px 0; border-top: 1px solid rgb(var(--ink-rgb) / 8%); } .is-pane-list .balance-row { display: block; padding: 12px 14px; } .is-pane-list .balance-row:first-child { border-top: 0; } .balance-main-line { display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: center; gap: 10px; min-width: 0; } .balance-label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; } .balance-left-cell, .balance-right-cell { display: flex; align-items: center; min-width: 0; } .balance-left-cell { justify-content: space-between; gap: 10px; } .balance-right-cell { justify-content: space-between; gap: 8px; width: 230px; } .balance-value { min-width: 0; font-family: var(--font-mono); text-align: right; white-space: nowrap; } .balance-value-whole { font-size: 0.92rem; font-weight: 600; } .balance-value-fraction { color: var(--muted); font-size: 0.72rem; } .balance-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; min-width: 0; } .balance-actions-left { justify-content: flex-start; } .balance-actions-right { margin-left: auto; } .balance-send-button { flex: 0 0 auto; min-height: 32px; padding: 0.45rem 0.8rem; white-space: nowrap; } .balance-drain-button { color: #d92d20; } .balance-transfer-button { width: 32px; height: 32px; min-width: 32px; font-weight: 700; } .field.is-readonly input, .field input[readonly] { cursor: not-allowed; opacity: 0.72; } .modal-card .action-row > .secondary-button, .modal-card .action-row > .primary-button { min-height: 38px; } .send-amount-range.range-field input[type='range']::-webkit-slider-runnable-track { background: linear-gradient( to right, #c7f284 0%, #c7f284 var(--range-fill-pct, 0%), var(--border-1) var(--range-fill-pct, 0%), var(--border-1) 100% ); } .send-amount-range.range-field input[type='range']::-moz-range-track { background: linear-gradient( to right, #c7f284 0%, #c7f284 var(--range-fill-pct, 0%), var(--border-1) var(--range-fill-pct, 0%), var(--border-1) 100% ); } .empty-state, .status-card, .tx-card { margin-top: 18px; padding: 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid rgb(var(--ink-rgb) / 8%); } .loan-ticks-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .status-card { display: grid; gap: 12px; } .loan-identity-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; min-width: 0; } .loan-identity-row > span { min-width: 0; } .loan-identity-value { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; width: 100%; max-width: 100%; } .loan-identity-value .address-value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; text-align: right; } .loan-identity-value .icon-button { min-width: 30px; } .tx-card { display: grid; gap: 8px; } .tx-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tx-label, .address-field-label, .field span { color: var(--fg-3); font-size: 12px; font-weight: 500; } .tx-signature, .address-display, .address-value { font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.45; word-break: break-all; } .modal-backdrop { position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 60%); } .modal-shell { position: fixed; inset: 0; z-index: 21; display: grid; place-items: center; overflow-y: auto; padding: 18px; -webkit-overflow-scrolling: touch; } /* Top tier for modals that must sit ABOVE a page-level modal that opened them — e.g. the txPipeline ActionPlan confirmation triggered from inside the profile "Send Asset" dialog. Without this the confirmation (rendered high in application.hbs) loses the same-z-index stacking race to the page modal that comes later in the DOM and renders behind it. */ .modal-backdrop.is-top { z-index: 40; } .modal-shell.is-top { z-index: 41; } .modal-card { width: min(100%, 520px); max-height: calc(100dvh - 36px); overflow-y: auto; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow); } .bundle-confirm-body { display: grid; gap: 10px; } .metadata-modal-card { width: min(100%, 760px); } .metadata-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .metadata-form-column { display: grid; gap: 10px; align-content: start; } .wallet-picker-card { width: min(100%, 420px); } .wallet-picker-card .panel-header { margin-bottom: 0; } .wallet-picker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .wallet-picker-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; text-align: left; font: inherit; color: inherit; } .wallet-picker-item:hover { background: rgb(var(--ink-rgb) / 4%); } .wallet-picker-icon { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; object-fit: contain; background: rgb(var(--ink-rgb) / 4%); } .wallet-picker-icon-placeholder { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 700; } .wallet-picker-icon-placeholder.is-phantom { background: #ab9ff2; } .wallet-picker-icon-placeholder.is-solflare { background: linear-gradient(135deg, #ff8f1f, #9945ff); } .wallet-picker-icon-placeholder.is-generic { background: var(--bg-4); color: var(--fg-2); } .wallet-picker-name { font-weight: 500; } .trade-token-input-form { display: grid; gap: 12px; max-width: 640px; margin-top: 18px; } .trade-token-link { display: inline-flex; align-items: center; border: none; background: none; padding: 0 4px; font: inherit; color: inherit; text-decoration: underline dotted; cursor: pointer; } .trade-token-link:hover { color: var(--button-primary-bg-hover); } .trade-tab-bar { display: flex; gap: 6px; margin: 18px 0 14px; border-bottom: 1px solid var(--panel-border); } .trade-tab-bar .tab-button { border-radius: 0; border-width: 0 0 2px 0; border-style: solid; border-color: transparent; background: transparent; } .trade-tab-bar .tab-button.is-active { border-bottom-color: var(--text); } .trade-form-section { display: grid; gap: 14px; } .trade-balance-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .trade-balance { display: grid; gap: 2px; } .trade-balance-label { font-size: 0.78rem; color: var(--muted); } .trade-form { display: grid; gap: 12px; max-width: 640px; } .trade-settings-panel { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: var(--panel); max-width: 420px; } .trade-graduation-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0; } .trade-slippage-display { display: inline-flex; align-items: center; gap: 6px; margin: 0; } .trade-slippage-edit { border: none; background: none; padding: 0; font: inherit; color: var(--button-primary-bg-hover); cursor: pointer; text-decoration: underline dotted; } .metadata-form-inline { display: contents; } .metadata-form-card { display: grid; gap: 14px; } .metadata-ai-row { justify-content: flex-start; margin-top: 0; } .metadata-image-progress { display: flex; align-items: center; gap: 8px; } .metadata-image-progress progress { flex: 1; height: 8px; } .metadata-image-preview-wrap { display: flex; justify-content: flex-start; } .metadata-image-preview { width: 50%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); background: rgb(var(--ink-rgb) / 4%); } .metadata-image-placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.85rem; } @media (max-width: 640px) { .metadata-form-grid { grid-template-columns: 1fr; } .metadata-image-preview { width: 100%; } } .bundle-confirm-summary { display: grid; gap: 6px; } .profile-tools-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgb(var(--ink-rgb) / 10%); } .pool-detail-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .pool-detail-layout--redesign { grid-template-columns: minmax(0, 1fr); gap: 22px; } .position-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgb(var(--ink-rgb) / 10%); } .pool-detail-layout .position-section, .pool-detail-layout .pool-info-section { margin-top: 18px; padding-top: 0; border-top: 0; } .pool-detail-layout .position-section { order: 1; } .pool-detail-layout .pool-info-section { order: 2; } .pool-detail-layout--redesign .pool-info-section, .pool-detail-layout--redesign .position-section { order: initial; margin-top: 0; } .pool-utilization-card { display: grid; gap: 16px; margin-top: 18px; padding: 16px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-md); background: var(--surface); } .pool-overview-grid { display: grid; grid-template-columns: 1.3fr minmax(260px, 1fr) 0.9fr; gap: 14px; align-items: stretch; } .pool-overview-token, .pool-overview-util, .pool-overview-yield, .pool-histogram-card, .pool-ladder-card, .pool-available-card, .pool-position-card, .pool-position-empty { min-width: 0; padding: 14px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-sm); background: var(--bg-3); } .pool-overview-token, .pool-overview-util, .pool-overview-yield { display: grid; align-content: center; gap: 6px; } .pool-overview-token span, .pool-overview-util span, .pool-overview-yield span, .pool-card-title-row small, .pool-position-card span, .pool-position-empty span { color: var(--muted); font-size: 0.76rem; } .pool-overview-token strong, .pool-overview-util strong, .pool-overview-yield strong { overflow: hidden; color: var(--text); font-family: var(--font-mono); font-size: 1.2rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .pool-overview-token small, .pool-overview-util small, .pool-overview-yield small { overflow: hidden; color: var(--fg-3); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; } .pool-overview-util > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pool-overview-meter { height: 8px; overflow: hidden; border-radius: 999px; background: var(--bg-4); } .pool-overview-meter > i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #c7f284, #8fc63a); } .pool-analytics-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr); gap: 14px; } .pool-card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .pool-card-title-row > span { color: var(--text); font-size: 0.86rem; font-weight: 600; } .pool-ladder { display: grid; gap: 9px; } .pool-ladder-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(110px, auto); gap: 10px; align-items: center; } .pool-ladder-yield, .pool-ladder-meta, .pool-position-card strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .pool-ladder-yield { color: var(--accent-1); font-size: 0.78rem; font-weight: 700; } .pool-ladder-bar { display: block; height: 18px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: 6px; background: linear-gradient(90deg, #c7f284, #8fc63a); } .pool-ladder-bar.is-level-1 { width: 18%; } .pool-ladder-bar.is-level-2 { width: 26%; } .pool-ladder-bar.is-level-3 { width: 34%; } .pool-ladder-bar.is-level-4 { width: 42%; } .pool-ladder-bar.is-level-5 { width: 50%; } .pool-ladder-bar.is-level-6 { width: 60%; } .pool-ladder-bar.is-level-7 { width: 70%; } .pool-ladder-bar.is-level-8 { width: 80%; } .pool-ladder-bar.is-level-9 { width: 90%; } .pool-ladder-bar.is-level-10 { width: 100%; } .pool-ladder-meta { overflow: hidden; color: var(--muted); font-size: 0.72rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .pool-ladder-meta strong { color: var(--text); } .pool-available-bar { display: flex; height: 12px; overflow: hidden; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: 999px; background: var(--bg-4); } .pool-available-bar > i { display: block; height: 100%; } .pool-available-free { background: linear-gradient(90deg, #c7f284, #8fc63a); } .pool-available-borrowed { background: repeating-linear-gradient( 45deg, rgb(var(--ink-rgb) / 14%), rgb(var(--ink-rgb) / 14%) 4px, transparent 4px, transparent 8px ); } .pool-available-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 0.76rem; } .pool-available-legend span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .pool-available-legend i { width: 10px; height: 8px; border-radius: 2px; } .pool-available-legend i.is-free { background: #c7f284; } .pool-available-legend i.is-borrowed { background: rgb(var(--ink-rgb) / 22%); } .pool-available-legend strong { overflow: hidden; color: var(--text); font-family: var(--font-mono); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .pool-utilization-summary { margin: 0; color: var(--muted); font-size: 0.84rem; } .pool-utilization-value { display: grid; justify-items: end; gap: 2px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } .pool-utilization-value strong { color: var(--text); font-size: 1.28rem; line-height: 1; } .pool-utilization-value span { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .pool-utilization-stats, .pool-utilization-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .pool-utilization-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pool-utilization-stats > div, .pool-utilization-highlights > div { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-sm); background: var(--bg-3); } .pool-utilization-stats span, .pool-utilization-highlights span, .pool-utilization-highlights small { color: var(--muted); font-size: 0.76rem; } .pool-utilization-stats strong, .pool-utilization-highlights strong { min-width: 0; overflow: hidden; font-family: var(--font-mono); font-size: 0.92rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .pool-utilization-highlights strong { font-size: 1.08rem; } .pool-utilization-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(2px, 1fr)); align-items: end; gap: 3px; height: 116px; padding: 12px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-sm); background: linear-gradient(to top, rgb(var(--ink-rgb) / 6%) 1px, transparent 1px) 0 0 / 100% 25%, var(--bg-3); } .pool-utilization-bar { min-width: 2px; height: 8%; border-radius: 2px 2px 0 0; background: rgb(var(--ink-rgb) / 12%); } .pool-utilization-bar.is-idle { background: rgb(199 242 132 / 42%); } .pool-utilization-bar.is-active { background: #c7f284; } .pool-utilization-bar.is-warm { background: #e8b931; } .pool-utilization-bar.is-hot { background: #ef6f4f; } .pool-utilization-bar.is-level-1 { height: 10%; } .pool-utilization-bar.is-level-2 { height: 20%; } .pool-utilization-bar.is-level-3 { height: 30%; } .pool-utilization-bar.is-level-4 { height: 40%; } .pool-utilization-bar.is-level-5 { height: 50%; } .pool-utilization-bar.is-level-6 { height: 60%; } .pool-utilization-bar.is-level-7 { height: 70%; } .pool-utilization-bar.is-level-8 { height: 80%; } .pool-utilization-bar.is-level-9 { height: 90%; } .pool-utilization-bar.is-level-10 { height: 100%; } .pool-utilization-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: -8px; color: var(--muted); font-size: 0.72rem; } .pool-utilization-empty { margin-top: 0; } .pool-position-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; } .pool-position-card { display: grid; gap: 13px; color: var(--text); text-decoration: none; transition: border-color 140ms ease, background-color 140ms ease; } .pool-position-card:hover, .pool-position-card:focus-visible, .pool-position-card.is-active { border-color: rgb(199 242 132 / 55%); background: var(--bg-4); } .pool-position-card-top, .pool-position-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pool-position-card-top strong { display: block; color: var(--accent-1); font-size: 1.28rem; } .pool-position-card em { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--border-1); border-radius: 999px; color: var(--muted); font-size: 0.72rem; font-style: normal; } .pool-position-card em.is-free { color: var(--success); border-color: var(--success-border); background: var(--success-tint); } .pool-position-card em.is-busy { color: #e8b931; border-color: rgb(232 185 49 / 28%); background: rgb(232 185 49 / 8%); } .pool-position-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pool-position-card-grid > div { min-width: 0; } .pool-position-card-grid strong, .pool-position-card-foot strong { display: block; overflow: hidden; color: var(--text); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; } .pool-position-empty { display: grid; justify-items: center; gap: 6px; margin-top: 14px; padding: 24px; border-style: dashed; text-align: center; } .pool-position-empty strong { color: var(--text); } .pool-action-panel { display: grid; gap: 14px; margin-top: 14px; padding: 16px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-md); background: var(--surface); } .pool-action-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .pool-action-head > div { display: grid; gap: 4px; min-width: 0; } .pool-action-head span, .pool-action-field label, .pool-position-details span, .pool-action-metrics span { color: var(--muted); font-size: 0.76rem; } .pool-action-head strong { color: var(--text); font-size: 1rem; } .pool-action-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr); gap: 14px; } .pool-action-field { display: grid; gap: 8px; min-width: 0; } .pool-action-field.is-wide { grid-column: span 2; } .pool-action-field > strong { color: var(--accent-1); font-family: var(--font-mono); font-size: 1.2rem; } .pool-action-field input:not([type='range']) { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text); background: var(--bg-3); font: inherit; } .pool-action-amount { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 12px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--bg-3); } .pool-action-amount input { flex: 1; min-width: 0; padding: 11px 0 !important; border: 0 !important; background: transparent !important; font-family: var(--font-mono) !important; font-size: 1.15rem !important; font-weight: 700; } .pool-action-amount span { flex: 0 0 auto; color: var(--muted); font-family: var(--font-mono); } .pool-action-metrics, .pool-position-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pool-position-details { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .pool-action-metrics > div, .pool-position-details > div { display: grid; gap: 5px; min-width: 0; padding: 12px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-sm); background: var(--bg-3); } .pool-action-metrics strong, .pool-position-details strong { overflow: hidden; color: var(--text); font-family: var(--font-mono); font-size: 0.88rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .pool-selected-actions { display: flex; flex-wrap: wrap; gap: 9px; } .pool-action-submit { justify-self: start; min-width: 180px; } .pool-withdraw-redesign { display: grid; gap: 14px; } .launch-form-section { margin-top: 24px; padding-top: 0; border-top: 0; } .preset-section-title { margin: 0 0 14px; font-size: 0.92rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .preset-group { margin-top: 18px; padding: 16px; border: 1px solid rgb(var(--ink-rgb) / 10%); border-radius: 8px; background: var(--surface); } .preset-group > .preset-section-title { margin-top: 0; } .preset-group + .preset-group { margin-top: 14px; } .preset-group > .address-field-list { margin-top: 0; } .preset-group > .preset-fields { margin-top: 0; } .preset-mint-field { display: flex; align-items: center; gap: 8px; } .preset-mint-field > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .preset-key-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .preset-mint-actions { display: flex; gap: 8px; flex-wrap: wrap; } .preset-mint-actions > .secondary-button { flex: 1; min-width: 0; } .preset-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .preset-icon-button > svg { width: 14px; height: 14px; flex-shrink: 0; } .preset-key-icon { width: 16px; height: 16px; } .preset-key-icon.is-present { color: var(--success); } .preset-key-icon.is-missing { color: var(--muted); } .preset-fields { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; } .preset-fields > li { flex: 1 1 240px; min-width: 0; max-width: 100%; } .preset-field-spacer { display: none; } @media (min-width: 560px) { .preset-field-spacer { display: block; } } .position-paginator { display: flex; gap: 10px; margin-top: 18px; padding-bottom: 4px; overflow-x: auto; } .position-pill { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 0.6rem 0.8rem; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface); text-decoration: none; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .position-pill:hover, .position-pill:focus-visible { border-color: var(--accent-1); background: var(--bg-4); color: var(--text); } .position-pill.is-active { color: var(--text); background: var(--accent-soft); } .position-form-card { display: grid; gap: 14px; margin-top: 18px; padding: 16px; border: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: var(--radius-md); background: var(--surface); } .position-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .position-form-grid--liquidity { grid-template-columns: repeat(6, minmax(0, 1fr)); } .position-form-grid--liquidity > .field { grid-column: span 3; } .position-form-grid--liquidity > .position-rate-field { grid-column: span 2; } .position-form-column { display: grid; align-content: start; align-items: start; grid-auto-rows: min-content; gap: 14px; min-width: 0; } .position-subtabs { display: flex; gap: 10px; padding-bottom: 4px; overflow-x: auto; } .position-subtab { flex: 0 0 auto; padding: 0.55rem 0.8rem; border: 1px solid var(--panel-border); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface); cursor: pointer; } .position-subtab.is-active { color: var(--text); background: var(--accent-soft); } .position-subtab:hover, .position-subtab:focus-visible { border-color: var(--accent-1); color: var(--text); } .range-field input[type='range'] { display: block; width: 100%; height: 24px; padding: 0; border: 0; appearance: none; background: transparent; cursor: pointer; box-sizing: border-box; } .range-field input[type='range']::-webkit-slider-runnable-track { width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--bg-4); box-shadow: 0 0 0 1px var(--border-1) inset; } .range-field input[type='range']::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -6px; border: 0; border-radius: 999px; appearance: none; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 50%), 0 0 0 4px rgb(255 255 255 / 4%); cursor: pointer; transition: transform 100ms ease; } .range-field input[type='range']:hover::-webkit-slider-thumb, .range-field input[type='range']:active::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 2px 12px rgb(199 242 132 / 40%), 0 0 0 4px rgb(199 242 132 / 12%); } .range-field input[type='range']::-moz-range-track { width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--bg-4); box-shadow: 0 0 0 1px var(--border-1) inset; } .range-field input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 50%), 0 0 0 4px rgb(255 255 255 / 4%); cursor: pointer; transition: transform 100ms ease; } .range-field input[type='range']:hover::-moz-range-thumb, .range-field input[type='range']:active::-moz-range-thumb { transform: scale(1.1); } .range-field input[type='range']::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); } .range-field input[type='range']:disabled::-webkit-slider-thumb, .range-field input[type='range']:disabled::-moz-range-thumb { cursor: not-allowed; opacity: 0.6; } .slider-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; color: var(--muted); font-size: 0.78rem; } .pool-withdraw-summary { display: grid; gap: 4px; margin: -4px 0 6px; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; } .pool-withdraw-summary strong { color: var(--fg-1); font-weight: 600; } .range-field input[type='range'].pool-withdraw-shares-range::-webkit-slider-runnable-track { background: linear-gradient( 90deg, #c7f284 var(--range-fill-pct, 0%), var(--border-2) var(--range-fill-pct, 0%), var(--border-2) var(--range-limit-pct, 100%), rgb(240 113 109 / 28%) var(--range-limit-pct, 100%) ); } .range-field input[type='range'].pool-withdraw-shares-range::-moz-range-track { background: linear-gradient( 90deg, #c7f284 var(--range-fill-pct, 0%), var(--border-2) var(--range-fill-pct, 0%), var(--border-2) var(--range-limit-pct, 100%), rgb(240 113 109 / 28%) var(--range-limit-pct, 100%) ); } .profile-tools, .protocol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .configuration-main { min-width: 0; } .configuration-main > .status-card:first-child, .configuration-main > .empty-state:first-child { margin-top: 0; } .configuration-sidebar { align-self: start; } .address-field-list { display: grid; gap: 12px; margin-top: 18px; align-items: start; } .configuration-main .address-field-list { margin-top: 0; } .address-field-list.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .address-field { display: grid; align-content: start; gap: 6px; } .address-field-label { text-transform: uppercase; letter-spacing: 0.06em; } .address-display { padding: 12px 14px; border: 1px solid var(--border-1); border-radius: 12px; color: var(--fg-1); background: var(--surface); } .mints-actions-cell, .queue-actions-cell { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; } .address-display-inline { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; } .address-display-inline > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .address-display-inline > a, .address-display-inline > .icon-button { margin-left: auto; flex-shrink: 0; } .field { display: grid; align-content: start; align-items: start; gap: 6px; } .field > span, .address-field-label { min-height: 16px; line-height: 1.2; } .configuration-main .address-field { position: relative; min-height: 42px; } .configuration-main .address-field-label { position: absolute; top: 8px; right: 10px; min-height: 0; color: var(--muted); font-size: 0.45rem; line-height: 1; text-align: right; } .configuration-main .address-display { display: flex; align-items: center; gap: 6px; min-height: 42px; } .configuration-sidebar .address-display { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .configuration-sidebar .address-display > span:first-child { min-width: 0; overflow-wrap: anywhere; } .launch-config-section { margin-top: 18px; } .launch-config-root > .panel-header { margin-bottom: 0; } .launch-config-section .panel-header { margin-bottom: 12px; } .launch-config-section .address-field-list { margin-top: 0; } .launch-config-section .address-display { display: flex; align-items: center; gap: 8px; min-height: 44px; } .field input:not([type='range']) { margin: 0; line-height: 1.2; } .field input[type='range'] { margin: 0; } .readonly-input { cursor: not-allowed; color: var(--muted); background: var(--bg-3) !important; } .network-select:focus-visible, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent-1); outline: 2px solid var(--accent-1); outline-offset: 1px; } @media (width <= 1200px) { .balance-main-line { grid-template-columns: minmax(0, 1fr) 130px; width: 100%; } .balance-right-cell { width: 130px; } .balance-send-button { justify-content: center; width: 32px; min-width: 32px; padding: 0; } .balance-send-button .button-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); } } @media (width <= 720px) { .app-shell { padding: 18px 14px 28px; } .header-panel, .header-actions { flex-direction: column; align-items: stretch; } .wallet-status { max-width: none; text-align: left; } .network-select { width: 100%; } .balance-row, .status-row { flex-direction: column; align-items: flex-start; } .loan-identity-value { width: 100%; justify-content: flex-end; } .loan-identity-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; } .vault-card-grid, .vault-detail-grid, .pool-detail-layout, .loan-ticks-list, .position-form-grid, .address-field-list.two-columns, .wallet-balance-panes, .profile-tools, .protocol-grid { grid-template-columns: 1fr; } .pool-utilization-stats, .pool-utilization-highlights { grid-template-columns: 1fr; } .pool-overview-grid, .pool-analytics-grid, .pool-position-card-grid, .pool-action-grid, .pool-action-metrics, .pool-position-details { grid-template-columns: 1fr; } .pool-action-field.is-wide { grid-column: auto; } .pool-action-head { align-items: stretch; flex-direction: column; } .pool-ladder-row { grid-template-columns: 52px minmax(0, 1fr); } .pool-ladder-meta { grid-column: 2; text-align: left; } .pool-available-legend, .pool-position-card-top, .pool-position-card-foot { align-items: flex-start; flex-direction: column; } .position-form-grid--liquidity > .field, .position-form-grid--liquidity > .position-rate-field { grid-column: auto; } .pool-utilization-chart { gap: 2px; height: 92px; padding: 10px; } /* Nav panel: labels disappear on narrow screens so 6 icon pills fit in one row without overflowing. The SVG icon is visible-only content; text nodes are hidden via font-size 0 so accessible name is preserved via the label text inside the link — screen readers still announce it. */ .nav-panel { gap: 6px; padding: 10px 12px; justify-content: space-between; flex-wrap: nowrap; } .nav-panel .tab-button { flex: 1 1 0; gap: 0; padding: 0; min-width: 0; font-size: 0; justify-content: center; } .nav-panel .tab-button .btn-icon { width: 18px; height: 18px; } } @media (width <= 1024px) { .vault-list { grid-template-columns: 1fr; } } .setting-hint { font-size: 0.75rem; margin-top: 8px; } .surplus-split-badge { margin-bottom: 12px; } .inline-link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: 0.75rem; word-break: break-all; text-align: left; } .bundle-wallets-table-wrap { overflow-x: auto; } .bundle-wallets-table { width: 100%; border-collapse: collapse; font-size: 0.7rem; } .bundle-wallets-table th, .bundle-wallets-table td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--panel-border); } .bundle-wallets-table th { font-weight: 600; color: var(--muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; } /* Three-column layout (Address, Receive, Status+Action). table-layout:fixed makes column widths fully predictable regardless of content, so status label changes never reflow neighbouring cells. Address column takes half the table width (since base58 keys are long), while Receive and the Status+Action column each take a quarter. */ .alts-table { table-layout: fixed; } .alts-table th, .alts-table td { white-space: nowrap; } .alts-table th:first-child, .alts-table td:first-child { width: 50%; } .alts-table th:nth-child(2), .alts-table td:nth-child(2), .alts-table th:last-child, .alts-table td:last-child { width: 25%; } .alts-table th:first-child, .alts-table td:first-child, .alts-table th:nth-child(2), .alts-table td:nth-child(2) { text-align: left; } /* Last column holds the action button and the status label side-by-side and is right-aligned so both cell content and the column header hug the table's right edge. */ .alts-table th:last-child, .alts-table td:last-child { text-align: right; } .alts-action-cell-inner { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; } .alts-status-label { color: var(--muted); } .check-passed-banner { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0; padding: 12px 16px; background: var(--success-tint); color: var(--success); border: 1px solid var(--success-border); border-radius: 4px; text-align: center; } .check-passed-banner svg { width: 16px; height: 16px; flex-shrink: 0; } .readiness-issue { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .readiness-issue-text { flex: 1; } .copy-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--panel); padding: 8px 16px; border-radius: 4px; font-size: 0.8rem; z-index: 10000; box-shadow: 0 4px 12px rgb(0 0 0 / 15%); animation: copy-toast-fade 0.2s ease-out; } @keyframes copy-toast-fade { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } .address-copy-btn { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; font-family: var(--font-mono); } .address-copy-btn:hover { opacity: 0.7; } .bundle-wallets-table .bundle-row-funded td { background: var(--success-tint); } .bundle-wallets-table .bundle-row-low td { background: var(--danger-tint); } .bundle-wallets-table .address-cell { font-family: var(--font-mono); font-size: 0.7rem; white-space: nowrap; } .address-cell-inner { display: inline-flex; align-items: center; gap: 4px; } /* Warm-up status dot — left of an address cell. Green = on-chain account * exists (warmed up), gray hollow = not yet created. Used to flag which * bundle wallets still need `bundle_warmup_0`. */ .warmup-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; flex-shrink: 0; } .warmup-dot.is-warm { background: #4ade80; } .warmup-dot.is-cold { background: transparent; border: 1px solid var(--muted); } .address-explorer-link { display: inline-flex; align-items: center; color: var(--muted); opacity: 0.7; } .address-explorer-link:hover { opacity: 1; } .address-explorer-link svg { width: 12px; height: 12px; } .runtime-alt-row { display: flex; gap: 8px; align-items: center; } .runtime-alt-row input { flex: 1; min-width: 0; } .runtime-alt-row button { flex-shrink: 0; } .toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--bg-4); cursor: pointer; transition: background-color 120ms ease; } .toggle-slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--fg-1); transition: transform 120ms ease, background-color 120ms ease; } .toggle-switch input:checked + .toggle-slider { background: var(--accent-1); } .toggle-switch input:checked + .toggle-slider::before { background: var(--accent-ink); transform: translateX(16px); } .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--accent-1); outline-offset: 2px; } /* ── Experimental: "Use Service Wallet as Main" mode ────────────────── * Dual-address header (rendered only when serviceWalletAsMainActive), * Profile-page banner, and the acknowledge modal that gates opt-in. * Existing single-address header is untouched — flag OFF stays * byte-identical with pre-feature UI (§0.1). */ .wallet-box-dual { flex-direction: column; align-items: flex-end; gap: 2px; } .wallet-box-line { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .wallet-box-tag { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; } .wallet-box-secondary .wallet-status { font-size: 0.78rem; opacity: 0.8; } .service-wallet-acknowledge-card { max-width: 540px; } .service-wallet-acknowledge-body { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 4px; } .service-wallet-acknowledge-check { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; font-size: 0.92rem; cursor: pointer; } .service-wallet-acknowledge-check input[type='checkbox'] { margin-top: 3px; flex-shrink: 0; } .cost-preview-card { max-width: 520px; } .cost-preview-body { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 4px; } .cost-preview-section { display: flex; flex-direction: column; gap: 4px; } .cost-preview-section-title { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .cost-preview-total { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; } .cost-preview-detail { color: var(--muted); font-size: 0.82rem; } .cost-preview-deficit strong { color: var(--button-primary-bg-hover, #b58900); } /* Sidebar nav-item appearance. Kept at the end of the file so these higher-specificity `.sidebar-nav .tab-button` selectors come after every base `.tab-button` / `.btn-icon` rule (avoids no-descending-specificity). */ .sidebar-nav .tab-button { position: relative; width: 100%; justify-content: flex-start; gap: 10px; padding: 10px 12px; border: 0; border-radius: 8px; color: var(--fg-3); background: transparent; font-weight: 500; } /* hover changes only the label colour (no fill) — matches the reference dark sidebar; the light theme adds a subtle fill (see light override below). */ .sidebar-nav .tab-button:hover { color: var(--fg-1); } /* active item: accent-coloured label (lime on dark, forest green on light) plus a short rounded lime accent bar with a soft glow on the left — mirrors the reference (bar stays accent-1 in both themes). */ .sidebar-nav .tab-button.is-active { color: var(--accent-1); background: transparent; } .sidebar-nav .tab-button.is-active::before { content: ''; position: absolute; top: 50%; left: 0; width: 3px; height: 18px; border-radius: 2px; background: var(--accent-1); box-shadow: 0 0 12px var(--accent-1); transform: translateY(-50%); } .sidebar-nav .tab-button.is-disabled { color: var(--fg-3); background: transparent; opacity: 0.45; } .sidebar-nav .tab-button .btn-icon { width: 16px; height: 16px; } /* In the new layout the page outlet sits directly on the background like the reference — drop the card chrome the workspace panel used to carry. Kept at end of file so these `.content > …` selectors follow the base rules they override (avoids no-descending-specificity). */ .content > .workspace-panel { margin: 14px 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; } .content > .app-footer { margin-top: 20px; } /* ── light-theme readability tweaks ────────────────────────────────────── The semantic colours are tuned bright for the dark theme; on the light palette banner text needs darkening, and stark-white form fields read as harsh against the warm surfaces. Scoped to light so dark is untouched. */ :root[data-theme='light'] .panel-message.is-warning { color: #8a6116; } :root[data-theme='light'] .panel-message.is-error { color: #b02a1f; } :root[data-theme='light'] .panel-message.is-success { color: #1f7a3c; } /* recessed cream form fields (instead of stark white) with a clearer border so the field is unmistakable against the warm card surface */ :root[data-theme='light'] .field input:not([type='range']), :root[data-theme='light'] .field select, :root[data-theme='light'] .field textarea, :root[data-theme='light'] .network-select, :root[data-theme='light'] .address-display { border-color: var(--border-2); background: var(--bg-1); } /* nav labels: darker idle + forest-green active on the light palette (the dark accent/fg-3 would be too faint), matching the reference's light sidebar */ :root[data-theme='light'] .sidebar-nav .tab-button { color: var(--fg-2); } :root[data-theme='light'] .sidebar-nav .tab-button.is-active { color: var(--accent-3); } /* light theme adds a soft fill on hover (the reference does this only here) */ :root[data-theme='light'] .sidebar-nav .tab-button:hover { background: var(--bg-4); } /* promo card on the light palette: warm gradient instead of the dark slab */ :root[data-theme='light'] .sidebar-promo { border-color: var(--border-1); background: linear-gradient(135deg, var(--bg-2), var(--bg-4)); } /* ── connected-wallet pills in the topbar (mirrors the reference) ────────── single wallet → one rounded pill: green status dot + mono address + the existing copy/explorer actions. Mode B dual wallet → one pill split into two labelled segments: FUNDED-BY (green dot) and ACTING-AS / service (blue dot, info-coloured label). Scoped to .topbar-actions so other wallet UI is untouched. Kept at end of file so these override the base .wallet-* rules. */ .topbar-actions .wallet-box { align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid var(--border-1); border-radius: 999px; background: var(--panel); font-family: var(--font-mono); } /* when disconnected the template still renders an empty .wallet-box — keep it (and its status dot) out of the layout so no stray pill appears */ .topbar-actions .wallet-box:not(:has(.wallet-status)) { display: none; } .topbar-actions .wallet-box:not(.wallet-box-dual)::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 4px var(--success-tint); flex-shrink: 0; } .topbar-actions .wallet-status { max-width: none; color: var(--fg-1); font-family: var(--font-mono); font-size: 12px; /* Geist Mono renders consecutive dots ("Moon...RfCD") tightly enough to collide with the leading chars — a touch of tracking separates them */ letter-spacing: 0.04em; text-align: left; white-space: nowrap; opacity: 1; } .topbar-actions .wallet-box-dual { flex-direction: row; align-items: center; gap: 14px; background: var(--surface); } .topbar-actions .wallet-box-line { position: relative; gap: 5px; padding-left: 13px; } .topbar-actions .wallet-box-line::before { content: ''; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); } .topbar-actions .wallet-box-secondary::before { background: var(--success); } .topbar-actions .wallet-box-primary::before { background: var(--info); } .topbar-actions .wallet-box-tag { font-family: var(--font-sans); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); } .topbar-actions .wallet-box-primary .wallet-box-tag { color: var(--info); } .topbar-actions .wallet-box .icon-button { width: 22px; height: 22px; border: 0; color: var(--fg-3); background: transparent; } .topbar-actions .wallet-box .icon-button:hover { color: var(--fg-1); background: transparent; } /* connected-wallet pill is now a dropdown trigger */ .wallet-menu { position: relative; } .wallet-trigger { cursor: pointer; text-align: left; transition: border-color 120ms ease; } .wallet-trigger:hover, .wallet-trigger[aria-expanded='true'] { border-color: var(--border-3); } .wallet-caret { width: 12px; height: 12px; margin-left: 2px; color: var(--fg-3); flex-shrink: 0; transition: transform 120ms ease; } .wallet-trigger[aria-expanded='true'] .wallet-caret { transform: rotate(180deg); } /* transparent full-screen catcher so a click anywhere closes the menu */ .wallet-menu-backdrop { position: fixed; inset: 0; z-index: 30; padding: 0; border: 0; background: transparent; cursor: default; } .wallet-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 31; display: flex; flex-direction: column; min-width: 210px; padding: 6px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); } .wallet-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--fg-1); background: transparent; font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; } .wallet-dropdown-item:hover, .wallet-dropdown-item:focus-visible { background: var(--bg-3); } .wallet-dropdown-item.is-danger { color: var(--danger); } .wallet-dropdown-item.is-danger:hover, .wallet-dropdown-item.is-danger:focus-visible { background: var(--danger-tint); } .wallet-dropdown-section { padding: 8px 10px 2px; color: var(--fg-3); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .wallet-dropdown-divider { height: 1px; margin: 6px 4px; background: var(--border-1); } /* Connect button: compact rounded pill, sized like the address pill */ .wallet-button-compact { min-height: 0; padding: 7px 16px; border-radius: 999px; } .topbar-actions .wallet-button-compact { min-height: 26px; padding: 5px 10px; font-size: 11px; line-height: 1; } .topbar-actions .wallet-button-compact .btn-icon { width: 12px; height: 12px; } .topbar-actions .wallet-box { min-height: 26px; gap: 5px; padding: 3px 6px 3px 9px; } .topbar-actions .wallet-box:not(.wallet-box-dual)::before { width: 6px; height: 6px; box-shadow: 0 0 0 3px var(--success-tint); } .topbar-actions .wallet-status { max-width: 86px; overflow: hidden; font-size: 10.5px; letter-spacing: 0.02em; text-overflow: ellipsis; } .topbar-actions .wallet-caret { width: 9px; height: 9px; margin-left: 0; } .topbar-actions .wallet-box-dual { gap: 7px; } .topbar-actions .wallet-box-tag { font-size: 7.5px; } .topbar-actions .wallet-dropdown { min-width: 180px; } .topbar-actions .wallet-dropdown-item { padding: 7px 9px; font-size: 12px; } .pool-page-compact { width: min(100%, 1040px); padding-bottom: 48px; } .pool-compact-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .pool-compact-head h1 { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--fg-1); font-size: 19px; font-weight: 700; letter-spacing: 0; } .pool-compact-head h1 svg { width: 20px; height: 20px; color: var(--accent-1); } .pool-currency-switch { display: inline-flex; margin-left: auto; padding: 3px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-3); } .pool-currency-switch a { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--fg-3); font: 700 12px/1 var(--font-mono); padding: 7px 16px; text-decoration: none; } .pool-currency-switch a.is-active { background: var(--accent-1); color: #0a0c0f; } .pool-token-icon { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 78% auto; } .pool-token-icon.is-lg { width: 26px; height: 26px; flex-basis: 26px; background-size: 72% auto; } .pool-token-icon.is-sol { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 397 311' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='360.879' y1='351.455' x2='141.213' y2='-69.293' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FFA3'/%3E%3Cstop offset='1' stop-color='%23DC1FFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M64.6 237.9c2.4-2.4 5.7-3.8 9.2-3.8h316.1c5.8 0 8.7 7 4.6 11.1l-62.5 62.5c-2.4 2.4-5.7 3.8-9.2 3.8H6.7c-5.8 0-8.7-7-4.6-11.1l62.5-62.5Zm0-234.1C67 1.4 70.3 0 73.8 0h316.1c5.8 0 8.7 7 4.6 11.1L332 73.6c-2.4 2.4-5.7 3.8-9.2 3.8H6.7c-5.8 0-8.7-7-4.6-11.1L64.6 3.8Zm267.4 113c-2.4-2.4-5.7-3.8-9.2-3.8H6.7c-5.8 0-8.7 7-4.6 11.1l62.5 62.5c2.4 2.4 5.7 3.8 9.2 3.8h316.1c5.8 0 8.7-7 4.6-11.1L332 116.8Z' fill='url(%23a)'/%3E%3C/svg%3E"); border-radius: 3px; background-color: transparent; background-size: contain; } .pool-token-icon.is-lg.is-sol { width: 30px; height: 24px; flex-basis: 30px; background-size: contain; } .pool-currency-switch .pool-token-icon.is-sol { width: 16px; height: 13px; flex-basis: 16px; } .pool-token-icon.is-usdc { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 2000 2000' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1000' cy='1000' r='1000' fill='%232775CA'/%3E%3Cpath d='M1275 1158c0-146-88-196-264-217-126-17-151-50-151-109s42-96 126-96c75 0 117 25 138 88 4 13 17 21 30 21h67c17 0 29-13 29-29v-4c-17-92-92-163-188-171v-100c0-17-13-29-34-33h-63c-17 0-29 13-33 33v96c-126 17-205 100-205 205 0 138 84 192 260 213 117 21 155 46 155 113s-59 113-138 113c-109 0-146-46-159-109-4-17-17-25-30-25h-71c-17 0-29 13-29 29v4c17 105 84 180 222 201v100c0 17 13 29 34 33h63c17 0 29-13 33-33v-100c126-21 213-109 213-226Z' fill='%23fff'/%3E%3Cpath d='M785 1605c-326-117-494-477-377-803 63-176 201-314 377-377 17-8 25-21 25-42v-59c0-17-8-29-25-33-4 0-13 0-17 4-397 126-616 548-490 945 75 234 255 414 490 490 17 8 34 0 38-17 4-4 4-8 4-17v-59c0-13-13-29-25-34Zm447-1310c-17-8-34 0-38 17-4 4-4 8-4 17v59c0 17 13 34 25 42 326 117 494 477 377 803-63 176-201 314-377 377-17 8-25 21-25 42v59c0 17 8 29 25 33 4 0 13 0 17-4 397-126 616-548 490-945-75-239-260-418-490-500Z' fill='%23fff'/%3E%3C/svg%3E"); background-color: #2775ca; background-size: contain; } .pool-compact-overview, .pool-compact-ladder, .pool-position-compact-card { border: 1px solid var(--border-1); border-radius: 14px; background: var(--surface); } .pool-compact-overview { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; align-items: center; margin-bottom: 16px; padding: 18px 20px; } .pool-asset-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .pool-asset-cell strong, .pool-frontier-cell strong { display: block; color: var(--fg-1); font: 700 15px/1.2 var(--font-mono); } .pool-asset-cell div > span, .pool-frontier-cell span, .pool-util-cell small, .pool-frontier-cell small { display: block; margin-top: 4px; color: var(--fg-3); font-size: 11px; line-height: 1.35; } .pool-mini-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--fg-3); font-size: 11px; } .pool-mini-row strong { color: var(--fg-1); font-family: var(--font-mono); } .pool-util-cell { text-align: right; } .pool-util-cell small { white-space: nowrap; } .pool-compact-meter { height: 8px; overflow: hidden; border-radius: 6px; background: var(--bg-3); } .pool-compact-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-1), #8fc63a); } .pool-frontier-cell { min-width: 0; text-align: right; } .pool-frontier-cell > span { margin: 0 0 6px; color: var(--fg-3); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; } .pool-compact-ladder { margin-bottom: 18px; padding: 16px 20px; } .pool-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .pool-section-title h2 { margin: 0; color: var(--fg-1); font-size: 14px; font-weight: 600; letter-spacing: 0; } .pool-section-title > span { color: var(--fg-3); font: 500 11.5px/1.3 var(--font-mono); text-align: right; } .pool-section-title b { color: var(--accent-1); font-weight: 700; } .pool-yield-ladder { display: flex; flex-direction: column; gap: 9px; } .pool-yield-row { display: grid; grid-template-columns: 92px minmax(120px, 1fr) minmax(0, 220px); gap: 12px; align-items: center; min-width: 0; } .pool-yield-row > strong { min-width: 0; color: var(--accent-1); font: 700 10.5px/1 var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pool-yield-track { position: relative; height: 22px; min-width: 0; } .pool-yield-track i { position: absolute; inset: 0 auto 0 0; min-width: 26px; max-width: 100%; border: 1px solid var(--border-1); border-radius: 6px; background: var(--bg-3); } .pool-yield-track em { position: absolute; inset: 1px auto 1px 1px; display: block; min-width: 2px; max-width: calc(100% - 2px); border-radius: 5px; background: linear-gradient(90deg, var(--accent-1), #8fc63a); } .pool-yield-row > span { min-width: 0; color: var(--fg-3); font: 500 11px/1.2 var(--font-mono); overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .pool-yield-row > span b { color: var(--fg-1); font-weight: 600; } @media (width <= 720px) { .pool-yield-row { grid-template-columns: 86px minmax(120px, 1fr); row-gap: 5px; } .pool-yield-row > span { grid-column: 2; text-align: left; } } .pool-liquidation-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-1); color: var(--fg-3); font-size: 11.5px; line-height: 1.5; } .pool-liquidation-note b { color: var(--success); } .pool-positions-compact { margin-top: 22px; } .pool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; cursor: pointer; font-family: var(--font-sans); font-weight: 700; line-height: 1; text-decoration: none; } .pool-btn-primary { min-height: 38px; background: var(--accent-1); color: #0a0c0f; font-size: 13.5px; padding: 11px 18px; } .pool-btn-primary:hover { filter: brightness(1.06); } .pool-btn:disabled { cursor: not-allowed; filter: grayscale(0.7); opacity: 0.5; } .pool-btn svg { width: 15px; height: 15px; } .pool-btn.is-full { width: 100%; min-height: 46px; } .pool-btn-ghost { min-height: 34px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--bg-4); color: var(--fg-1); font-size: 12.5px; font-weight: 600; padding: 9px 14px; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 3%); } .pool-btn-ghost:hover { border-color: var(--border-3); background: var(--bg-3); } .pool-btn-sm { min-height: 30px; border-radius: 8px; font-size: 12px; padding: 8px 13px; } .pool-position-list { display: flex; flex-direction: column; gap: 12px; } .pool-position-compact-card { padding: 16px 18px; } .pool-position-main { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .pool-position-earned { margin-right: auto; } .pool-position-earned span, .pool-position-metrics span { display: block; margin-bottom: 5px; color: var(--fg-3); font-size: 10px; letter-spacing: 0.5px; line-height: 1; text-transform: uppercase; } .pool-position-earned strong { color: var(--accent-1); font: 700 22px/1.1 var(--font-mono); } .pool-position-earned small { color: var(--fg-3); font-size: 13px; } .pool-position-main em { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-1); border-radius: 20px; background: var(--bg-3); color: var(--fg-3); font-size: 11.5px; font-style: normal; line-height: 1; padding: 6px 11px; white-space: nowrap; } .pool-position-main em::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); } .pool-position-main em.is-free::before { background: var(--success); } .pool-position-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; } .pool-position-metrics > div { min-width: 0; text-align: left; } .pool-position-metrics strong { color: var(--fg-1); font: 600 14px/1.25 var(--font-mono); } .pool-position-metrics > div:first-child strong { color: var(--accent-1); } .pool-position-actions { display: flex; flex-wrap: wrap; gap: 9px; } .pool-modal-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 6, 9, 0.66); backdrop-filter: blur(3px); } .pool-compact-modal { width: min(100%, 440px); max-height: min(760px, calc(100vh - 40px)); overflow: auto; border: 1px solid var(--border-1); border-radius: 16px; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); padding: 22px; } .pool-compact-modal header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .pool-compact-modal h3 { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--fg-1); font-size: 16px; font-weight: 700; } .pool-compact-modal h3 svg { width: 17px; height: 17px; } .pool-compact-modal header button { margin-left: auto; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; font-size: 22px; line-height: 1; } .pool-modal-sub { margin: 0 0 18px; color: var(--fg-3); font-size: 12.5px; line-height: 1.45; } .pool-modal-field { margin-bottom: 16px; } .pool-modal-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: var(--fg-3); font-size: 12.5px; } .pool-modal-field label > span, .pool-modal-field label > b { text-align: right; } .pool-modal-field label b { color: var(--accent-1); font: 700 16px/1 var(--font-mono); } .pool-modal-field label span { color: var(--fg-3); font: 500 11.5px/1 var(--font-mono); } .pool-modal-field input[type='range'] { accent-color: var(--accent-1); width: 100%; height: 4px; border-radius: 4px; background: var(--border-2); outline: 0; } .pool-amount-range { margin-top: 13px; } .pool-modal-field input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--border-2); } .pool-modal-field input[type='range']::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--accent-1); box-shadow: 0 0 0 4px rgb(199 242 132 / 15%); } .pool-modal-field input[type='range']::-moz-range-track { height: 4px; border-radius: 4px; background: var(--border-2); } .pool-modal-field input[type='range']::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--accent-1); box-shadow: 0 0 0 4px rgb(199 242 132 / 15%); } .pool-modal-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--fg-3); font: 500 10.5px/1 var(--font-mono); } .pool-modal-ends span:last-child { text-align: right; } .pool-transaction-status, .pool-usage-callout, .pool-liquidation-callout { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; border: 1px solid var(--border-1); border-radius: 12px; background: var(--bg-3); color: var(--fg-3); padding: 11px 13px; font-size: 12px; line-height: 1.45; } .pool-usage-callout, .pool-liquidation-callout { display: block; } .pool-usage-callout { margin-top: -4px; padding: 10px 12px; } .pool-transaction-status strong, .pool-usage-callout strong, .pool-liquidation-callout strong { display: block; color: var(--fg-1); font-size: 12.5px; font-weight: 700; } .pool-transaction-status span, .pool-usage-callout span, .pool-liquidation-callout span { display: block; margin-top: 2px; } .pool-usage-meter { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--border-2); } .pool-usage-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent-1); } .pool-transaction-status button { margin-left: auto; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; font-size: 18px; line-height: 1; } .pool-transaction-dot { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 5px; border-radius: 50%; background: var(--fg-3); } .pool-transaction-status.is-pending .pool-transaction-dot { background: var(--accent-1); box-shadow: 0 0 0 4px rgb(199 242 132 / 12%); } .pool-transaction-status.is-success, .pool-usage-callout.is-very-high, .pool-usage-callout.is-high, .pool-liquidation-callout { border-color: var(--success-border); background: var(--success-tint); } .pool-usage-callout.is-very-high .pool-usage-meter i, .pool-usage-callout.is-high .pool-usage-meter i { background: var(--success); } .pool-transaction-status.is-success .pool-transaction-dot { background: var(--success); } .pool-transaction-status.is-error, .pool-usage-callout.is-low, .pool-usage-callout.is-rare { border-color: var(--danger-border); background: var(--danger-tint); } .pool-usage-callout.is-low .pool-usage-meter i, .pool-usage-callout.is-rare .pool-usage-meter i { background: var(--danger); } .pool-transaction-status.is-error .pool-transaction-dot { background: var(--danger); } .pool-usage-callout.is-medium { border-color: var(--warning-border); background: var(--warning-tint); } .pool-usage-callout.is-medium .pool-usage-meter i { background: var(--warning); } .pool-amount-input { display: flex; align-items: center; border: 1px solid var(--border-1); border-radius: 11px; background: var(--bg-3); padding: 12px 14px; } .pool-amount-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg-1); font: 700 20px/1 var(--font-mono); } .pool-amount-input span { color: var(--fg-3); font: 600 14px/1 var(--font-mono); } .pool-amount-input button { margin-left: 8px; border: 1px solid var(--border-1); border-radius: 7px; background: transparent; color: var(--fg-3); cursor: pointer; font: 600 11px/1 var(--font-mono); padding: 5px 10px; } .pool-amount-input button:hover { border-color: var(--accent-1); color: var(--accent-1); } .pool-modal-estimate { display: grid; gap: 10px; margin-bottom: 16px; border: 1px solid var(--border-1); border-radius: 12px; background: var(--bg-3); color: var(--fg-3); font-size: 12.5px; line-height: 1.45; padding: 14px; } .pool-modal-estimate.is-warning { border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 9%, var(--bg-3)); } .pool-modal-estimate > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pool-modal-estimate strong { color: var(--fg-1); font: 700 14px/1.2 var(--font-mono); text-align: right; } .pool-modal-estimate strong.is-big { color: var(--accent-1); font-size: 18px; } .pool-modal-estimate small { color: var(--fg-3); } .pool-modal-actions { display: flex; gap: 10px; margin-top: 6px; } .pool-modal-actions > * { flex: 1; } .pool-check-row { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; color: var(--fg-3); font-size: 12px; line-height: 1.4; } @media (max-width: 780px) { .pool-compact-overview { grid-template-columns: 1fr; } .pool-section-title { align-items: flex-start; flex-direction: column; } .pool-yield-row { grid-template-columns: 58px 1fr; } .pool-yield-row > span { grid-column: 1 / -1; text-align: left; } .pool-position-metrics { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pool-page-compact { width: 100%; } .pool-position-main, .pool-position-actions, .pool-modal-actions { align-items: stretch; flex-direction: column; } .pool-position-main em { width: fit-content; } .pool-position-actions button { width: 100%; } } /* Section refresh icon button (spins while loading). Used in section/subtitle headers across all top-level and sub-pages (dashboard "Protocol stats", pool "LP Positions", launches/loans/pools/presets list headers, etc.). Kept at end of file so these higher-specificity selectors follow the base svg/icon rules (avoids no-descending-specificity); ordered by ascending specificity. */ .section-refresh { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border-1); border-radius: 8px; color: var(--fg-3); background: transparent; cursor: pointer; flex-shrink: 0; transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; } .section-refresh:disabled { cursor: not-allowed; } .section-refresh:focus-visible { color: var(--fg-1); border-color: var(--border-2); background: var(--bg-3); } .section-refresh:hover:not(:disabled) { color: var(--fg-1); border-color: var(--border-2); background: var(--bg-3); } .section-refresh svg { width: 14px; height: 14px; } .section-refresh.is-spinning svg { animation: transaction-spin 0.8s linear infinite; } /* Flex wrapper for "subtitle row" headings on sub-pages: an `

` (or similar) on the left + a refresh icon button on the right. Reset the h3's bottom margin since the wrapper owns spacing now. / .section-subtitle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .section-subtitle > .preset-section-title, .section-subtitle > h2, .section-subtitle > h3 { margin: 0; } / Secondary-button ghost hover/focus — kept at end of file so they sit after the shared :disabled rule and the .preset-mint-actions override (avoids no-descending-specificity). / .secondary-button:focus-visible { border-color: var(--border-2); background: var(--bg-3); } .secondary-button:hover:not(:disabled) { border-color: var(--border-2); background: var(--bg-3); } / ── "Latest launches" token table on the dashboard (mirrors the reference) ── / .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; } .section-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .token-table-wrap { overflow: auto hidden; border: 1px solid var(--border-1); border-radius: 16px; background: #0e0e10; } .token-table { width: 100%; min-width: 520px; border-collapse: collapse; } .token-table-wrap .token-table th { padding: 13px 16px; border-bottom: 1px solid var(--border-1); color: var(--fg-3); background: #0b0c0e; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; white-space: nowrap; } .token-table th.num { text-align: right; } .token-table-wrap .token-table td { padding: 14px 16px; border-bottom: 1px solid rgb(255 255 255 / 3%); vertical-align: middle; } .token-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .token-table tr:last-child td { border-bottom: 0; } .token-table tbody tr:hover td { background: rgb(255 255 255 / 2%); } .token-cell { display: flex; align-items: center; gap: 12px; min-width: 0; } .token-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #000; font-size: 14px; font-weight: 600; flex-shrink: 0; object-fit: cover; } .token-meta { min-width: 0; } .token-symbol { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; / Geist Mono squeezes consecutive dots in shortAddress ("Moon...RfCD") too tightly — add a touch of tracking so the ellipsis stays readable / letter-spacing: 0.04em; white-space: nowrap; } .token-name { margin-top: 2px; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; } .token-launchpad { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; color: var(--fg-2); background: var(--bg-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; } .token-table .qbtn { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid rgb(199 242 132 / 25%); border-radius: 6px; color: var(--accent-1); background: rgb(199 242 132 / 12%); font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; } .token-table .qbtn:hover, .token-table .qbtn:focus-visible { background: rgb(199 242 132 / 20%); } .token-table-empty { padding: 28px 16px; color: var(--fg-3); font-size: 13px; text-align: center; } .delta-up { color: var(--success); } .delta-down { color: var(--danger); } / deterministic token-avatar palette (selected via avatarClass in controller) / .avatar-c1 { background: #6fe07a; } .avatar-c2 { background: #c7f284; } .avatar-c3 { background: #7fb7f2; } .avatar-c4 { background: #c792ea; } .avatar-c5 { background: #e8b86b; } .avatar-c6 { background: #f0716d; } :root[data-theme='light'] .token-table-wrap { border-color: var(--border-1); background: var(--bg-2); box-shadow: 0 1px 3px rgb(15 14 12 / 4%); } :root[data-theme='light'] .token-table th { border-bottom-color: var(--border-1); color: var(--fg-2); background: var(--bg-4); } :root[data-theme='light'] .token-table td { border-bottom-color: var(--border-1); } :root[data-theme='light'] .token-table tbody tr:hover td { background: rgb(15 14 12 / 2%); } :root[data-theme='light'] .token-table .qbtn { border-color: rgb(124 179 66 / 25%); color: var(--accent-3); background: rgb(124 179 66 / 10%); } :root[data-theme='light'] .token-table .qbtn:hover, :root[data-theme='light'] .token-table .qbtn:focus-visible { background: rgb(124 179 66 / 18%); } / ── Wizard landing + simple page ────────────────────────────────────────── Two-card chooser on /wizard (Simple enabled, Bundle "coming soon"). The gated state replaces the chooser with a full-page disabled banner pointing the user back to /profile to flip Mode B / JITO / network. / .wizard-gate { display: flex; gap: 18px; align-items: flex-start; margin-top: 24px; } .wizard-gate-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-3); color: var(--fg-3); flex-shrink: 0; } .wizard-gate-body h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; } .wizard-gate-body p { margin: 0 0 16px; color: var(--fg-2); line-height: 1.5; } .wizard-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; } .wizard-choice-card { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: linear-gradient(135deg, #0e0e10 0%, #0b0c0f 100%); color: inherit; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; } .wizard-choice-card.is-active:hover { border-color: var(--accent-1); transform: translateY(-2px); } .wizard-choice-card.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .wizard-choice-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-1); } .wizard-choice-card.is-disabled .wizard-choice-eyebrow { color: var(--fg-3); } .wizard-choice-title { margin: 12px 0 14px; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; } .wizard-choice-desc { margin: 0 0 24px; color: var(--fg-2); font-size: 14px; line-height: 1.5; flex: 1; } .wizard-choice-cta { font-size: 15px; font-weight: 600; color: var(--accent-1); } .wizard-choice-cta.is-muted { color: var(--fg-3); } .wizard-recovery { display: grid; gap: 12px; } .wizard-expert { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-1); } .wizard-expert > button { justify-self: start; } .wizard-expert-body { border-left: 2px solid var(--warning); padding: 10px 14px; background: rgb(var(--ink-rgb) / 3%); border-radius: var(--radius-sm); } .wizard-expert-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; cursor: pointer; align-items: start; } .wizard-expert-row > input[type='checkbox'] { margin-top: 4px; } .wizard-expert-title { font-weight: 600; margin-bottom: 4px; } .wizard-recovery code { font-family: var(--font-mono); font-size: 12px; } .wizard-mint-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; } / Two-column wizard form: Token Information (left) + Financial (right). Stacks on narrow viewports so the inline metadata constructor on the left doesn't compete with the amount slider on the right. / .wizard-form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; } .wizard-form-col { min-width: 0; } / Token Information header: title + "Generate Using AI" grouped on the left, Expert Mode toggle pushed to the right by the panel-header's space-between. / .wizard-section-head { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } / Compact "Generate Using AI" pill sized to the header line — wand icon (same glyph as the Wizard nav tab) sits to the right of the text. The `.wizard-section-head` ancestor only raises specificity so the icon override doesn't trip no-descending-specificity against the nav rules. / .wizard-ai-button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 16px; font-size: 10px; color: #fff; background: #8b00ff; border: none; border-radius: 999px; cursor: pointer; } .wizard-ai-button:disabled { opacity: 0.6; cursor: default; } .wizard-section-head .wizard-ai-button .btn-icon { width: 12px; height: 12px; } / Expert Mode toggle in the Financial / Token Information block headers — reuses the Profile `.toggle-switch` slider with a leading caption. / .wizard-expert-toggle { display: inline-flex; align-items: center; gap: 8px; } .wizard-expert-label { font-size: 12px; font-weight: 500; color: var(--fg-3); } / Slider-backed range inputs (You Borrow, Loan Interval): the title label is overlaid on the left of the input (vertically centered) and the value is right-aligned in the accent green. The loan interval's human rendering ("2 days", "1 week 3 hours") rides along as a dim sublabel beside the title so it doesn't collide with the right-aligned value. / .wizard-range-input-wrap { position: relative; } .wizard-range-input-wrap .wizard-range-label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: baseline; gap: 8px; pointer-events: none; font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; } .wizard-range-input-wrap .wizard-range-sublabel { color: var(--muted); font-weight: 400; } / Unit/ticker part of the label ("(WSOL)", "(hrs)") stays gray while the name ("You Borrow", "Loan Interval") is white. / .wizard-range-input-wrap .wizard-range-unit { color: var(--fg-3); font-weight: 400; } .wizard-range-input-wrap .wizard-range-input { text-align: right; color: #c7f284; font-weight: 700; font-size: 18px; } / Monospace the min/max range numbers under the wizard sliders. / .wizard-form-col .slider-legend { font-family: var(--font-mono); } / Liquidation timeout entered as hours / minutes / seconds (the raw seconds value is slider-driven and not shown directly). / .wizard-timeout-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } / Buy-split graduation notice: error variant (loan can't cap the curve). / .wizard-buysplit-error { color: var(--danger); } .wizard-field-error { color: var(--danger); } / Buy-split (preset mode): execution-wallet buy on the left, bundle total on the right, with the slider distributing the loan between them. / .wizard-distribution { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wizard-distribution-right { text-align: right; } .wizard-timeout-parts .wizard-timeout-part-input { text-align: center; color: #c7f284; font-weight: 700; font-size: 18px; } :root[data-theme='light'] .wizard-range-input-wrap .wizard-range-label { color: var(--fg-1); } / White input titles on the wizard form. Targets only the caption (first child span) of each field so slider legends and dim hints keep their own styling. Light theme falls back to the primary fg so the titles stay readable on a light background. / .wizard-form-col .field > span:first-child { color: #fff; } :root[data-theme='light'] .wizard-form-col .field > span:first-child { color: var(--fg-1); } / Wizard sliders — two-tone track split at the thumb (green left, gray right; monolithic, no border) + a double-circle thumb (green core, dark separator ring, thin green outer ring). The split point is driven by `--range-fill-pct`, set per-input by the `range-fill` modifier. / .wizard-form-col .range-field input[type='range']::-webkit-slider-runnable-track { background: linear-gradient( 90deg, #c7f284 var(--range-fill-pct, 0%), var(--border-1) var(--range-fill-pct, 0%) ); box-shadow: none; } .wizard-form-col .range-field input[type='range']::-moz-range-track { background: linear-gradient( 90deg, #c7f284 var(--range-fill-pct, 0%), var(--border-1) var(--range-fill-pct, 0%) ); box-shadow: none; } .wizard-form-col .range-field input[type='range']::-webkit-slider-thumb { box-sizing: border-box; width: 16px; height: 16px; margin-top: -4px; background: #c7f284; border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px #c7f284; } .wizard-form-col .range-field input[type='range']::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; background: #c7f284; border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px #c7f284; } .wizard-form-col .range-field input[type='range']:hover::-webkit-slider-thumb, .wizard-form-col .range-field input[type='range']:active::-webkit-slider-thumb { box-shadow: 0 0 0 1px #c7f284, 0 2px 10px rgb(199 242 132 / 35%); } .wizard-form-col .range-field input[type='range']:hover::-moz-range-thumb, .wizard-form-col .range-field input[type='range']:active::-moz-range-thumb { box-shadow: 0 0 0 1px #c7f284, 0 2px 10px rgb(199 242 132 / 35%); } @media (width <= 960px) { .wizard-form-cols { grid-template-columns: 1fr; } } / Wizard launchpad pick — two pads side-by-side, replaces the legacy launch_configuration