@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 { outline: 2px solid var(--accent-1); outline-offset: 2px; } .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-search { display: inline-flex; align-items: center; gap: 8px; width: min(360px, 42%); padding: 8px 12px; border: 1px solid var(--border-2); border-radius: 10px; color: var(--fg-3); background: var(--bg-2); font-size: 0.85rem; cursor: not-allowed; user-select: none; } .topbar-search svg { width: 14px; height: 14px; flex-shrink: 0; } .topbar-search kbd { margin-left: auto; padding: 1px 6px; border: 1px solid var(--border-2); border-radius: 5px; font-family: var(--font-mono); font-size: 0.72rem; } .topbar-actions { flex-wrap: nowrap; } .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; } .field input::placeholder, .field select::placeholder, .field textarea::placeholder { color: var(--fg-3); } .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); } .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; } /* ── dashboard hero: CTA card (left) + Protocol stats card (right) ── */ .dash-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; margin-bottom: 20px; } .dash-hero-cta { position: relative; overflow: hidden; padding: 40px; border: 1px solid var(--border-1); border-radius: 16px; background: linear-gradient(135deg, #0e0e10 0%, #0b0c0f 100%); } .dash-hero-title { margin: 0 0 20px; font-size: clamp(26px, 4.5vw, 40px); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; } .dash-hero-title .accent { color: var(--accent-1); } .dash-hero-desc { max-width: 480px; margin: 0 0 28px; color: var(--fg-2); font-size: 16px; line-height: 1.5; } .dash-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .dash-hero-stats { padding: 28px; border: 1px solid var(--border-1); border-radius: 16px; background: #0e0e10; } .dash-stats-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .dash-hero-stats h3 { margin: 0; color: var(--fg-3); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .dash-stat-list { display: flex; flex-direction: column; gap: 18px; } .dash-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .dash-stat-label { color: var(--fg-2); font-size: 13px; } .dash-stat-val { font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .dash-stat-val.accent { color: var(--accent); } @media (width <= 960px) { .dash-hero { grid-template-columns: 1fr; } .dash-hero-cta { padding: 28px; } } /* light theme: warm surfaces instead of the dark slabs */ :root[data-theme='light'] .dash-hero-cta { background: linear-gradient(135deg, var(--bg-2), var(--bg-4)); } :root[data-theme='light'] .dash-hero-title .accent { color: var(--accent-2); } :root[data-theme='light'] .dash-hero-stats { background: var(--bg-2); box-shadow: 0 1px 3px rgb(15 14 12 / 4%); } :root[data-theme='light'] .dash-stat-val.accent { color: var(--accent-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; } .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-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(--info); text-decoration: none; cursor: pointer; } .transaction-notice-link:hover, .transaction-notice-link:focus-visible { color: #a9d0f8; } .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; } .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; } .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; } .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; } .loan-card-header .vault-card-address { display: inline-block; min-width: 0; } .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; } .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%); } .balance-label, .balance-value { font-weight: 600; } .balance-actions { display: flex; align-items: center; gap: 12px; } .balance-send-button { min-height: 32px; padding: 0.45rem 0.8rem; } .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; } .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; padding: 18px; } .modal-card { width: min(100%, 520px); 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; } .pools-footnote { margin-top: 14px; font-style: italic; } .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-block; } .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-copy-to-ipfs { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); cursor: pointer; } .metadata-copy-to-ipfs input[type='checkbox'] { width: auto; min-height: 0; padding: 0; margin: 0; border: none; background: none; cursor: pointer; } .metadata-copy-to-ipfs input[type='checkbox'][disabled] { cursor: not-allowed; } .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%); } .position-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgb(var(--ink-rgb) / 10%); } .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: rgb(var(--ink-rgb) / 18%); 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-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); } .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; } .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 <= 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; } .vault-card-grid, .vault-detail-grid, .loan-ticks-list, .position-form-grid, .address-field-list.two-columns, .profile-tools, .protocol-grid { grid-template-columns: 1fr; } /* 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-main-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; } /* The banner is a flex row; without these, the button gets squeezed by the long warning copy and the label "Return to normal mode" wraps one word per line because `secondary-button` has no whitespace-nowrap guard. Pin the button to its content width on the right edge. */ .service-wallet-main-banner > button { flex-shrink: 0; white-space: nowrap; } .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; } /* 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: 900px; 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-warning { margin-top: 18px; } .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; } / Start-confirm modal: same modal-card scaffold, slightly tighter copy. / .wizard-confirm-card { width: min(100%, 560px); } .wizard-confirm-body { display: grid; gap: 12px; } / Progress modal: blocking, two-column body (left=status, right=log). Wider than the default modal-card to fit the activity log. / .wizard-progress-card { width: min(100%, 920px); max-height: min(100%, 720px); display: grid; grid-template-rows: auto 1fr auto; } .wizard-progress-body { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 18px; align-items: stretch; min-height: 0; } .wizard-progress-status { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: var(--surface-1, var(--panel)); } .wizard-progress-phase { font-weight: 600; font-size: 15px; } .wizard-progress-message { font-size: 13px; color: var(--ink-muted, inherit); word-break: break-word; } .wizard-progress-loan { display: grid; gap: 4px; margin-top: 6px; } .wizard-progress-loan code { font-family: var(--font-mono); font-size: 12px; word-break: break-all; } .wizard-progress-error { margin: 6px 0 0; } .wizard-progress-log { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-height: 0; } .wizard-progress-log-title { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 13px; } .wizard-progress-log-list { overflow-y: auto; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--panel-border); border-radius: var(--radius-md); background: var(--surface-1, var(--panel)); max-height: 420px; } .wizard-progress-log-entry { display: grid; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid rgb(var(--ink-rgb, 0 0 0) / 8%); } .wizard-progress-log-entry:last-child { border-bottom: none; padding-bottom: 0; } .wizard-progress-log-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .wizard-progress-log-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted, inherit); flex-shrink: 0; } .wizard-progress-log-message { font-size: 13px; word-break: break-word; } .wizard-progress-log-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; / Default browser blue is unreadable on the dark log surface — pin to the modal's main text color so signatures sit cleanly above the panel, then promote to the lime accent on hover for affordance. / color: var(--text); text-decoration: none; word-break: break-all; } .wizard-progress-log-link:hover { color: var(--accent-1); text-decoration: underline; } .wizard-progress-actions { margin-top: 4px; } / Backdrop locks while the run is active so a stray click can't dismiss the modal mid-flow. Visual cue: cursor stays default instead of the pointer that the .modal-backdrop