/* Solvent Design Tokens — shared across all screens */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* Backgrounds — toned down one step (deeper black, less brightness) */ --bg-primary: #050505; --bg-secondary: #0C0C0C; --bg-tertiary: #141414; --bg-elevated: #1A1A1A; /* Borders — slightly dimmer to match */ --border-subtle: #161616; --border-default: #222222; --border-strong: #2E2E2E; /* Text — bumped one step brighter for readability on the toned-down dark backgrounds */ --text-primary: #FAFAFA; --text-secondary: #B0B0B0; --text-tertiary: #7C7C7C; --text-muted: #525252; /* Brand Accent (Solvent Cyan) */ --accent: #00E5C7; --accent-hover: #00C9AE; --accent-subtle: rgba(0, 229, 199, 0.1); --accent-glow: rgba(0, 229, 199, 0.32); /* Trading */ --green: #00D68F; --green-bg: rgba(0, 214, 143, 0.1); --red: #FF4D6D; --red-bg: rgba(255, 77, 109, 0.1); /* Status */ --warning: #FFB547; --warning-bg: rgba(255, 181, 71, 0.1); --info: #4A9EFF; --info-bg: rgba(74, 158, 255, 0.1); /* Typography */ --font-sans: 'Pretendard Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; /* Radius */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; /* Shadow */ --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.02) inset; --shadow-agent: 0 0 24px var(--accent-glow); } /* Light theme — applies when */ [data-theme="light"] { --bg-primary: #F7F8FA; --bg-secondary: #FFFFFF; --bg-tertiary: #F1F2F5; --bg-elevated: #FFFFFF; --border-subtle: #ECEDF0; --border-default: #DCDEE3; --border-strong: #C2C5CC; --text-primary: #0A0A0A; --text-secondary: #4A4F58; --text-tertiary: #7B8088; --text-muted: #A8ACB3; --accent: #00B89E; --accent-hover: #009A85; --accent-subtle: rgba(0, 184, 158, 0.10); --accent-glow: rgba(0, 184, 158, 0.22); --green: #00A576; --green-bg: rgba(0, 165, 118, 0.10); --red: #E03E5C; --red-bg: rgba(224, 62, 92, 0.10); --warning: #D99033; --warning-bg: rgba(217, 144, 51, 0.10); --info: #2D7BE0; --info-bg: rgba(45, 123, 224, 0.10); --shadow-sm: 0 1px 0 rgba(10, 10, 10, 0.04) inset; --shadow-agent: 0 0 16px rgba(0, 184, 158, 0.18); } /* Background gradient overlay — lighter blooms in light mode */ [data-theme="light"] body::before { background-image: radial-gradient(ellipse 800px 600px at 30% -20%, rgba(0, 184, 158, 0.07), transparent 60%), radial-gradient(ellipse 600px 400px at 90% 10%, rgba(45, 123, 224, 0.05), transparent 60%); } /* ========================================================================= LIGHT MODE — surface-level overrides for hardcoded dark values ========================================================================= */ /* Top nav: was rgba(10,10,10,0.85) — switch to translucent white */ [data-theme="light"] .topnav { background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid var(--border-default); } /* Modal/sheet shadows: heavy black shadow → softer slate */ [data-theme="light"] .modal, [data-theme="light"] .deposit-modal, [data-theme="light"] .wallet-modal, [data-theme="light"] .agent-prompt { box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08); } [data-theme="light"] .modal-backdrop, [data-theme="light"] .agent-prompt-backdrop { background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* User menu (avatar dropdown) — uses rgba(10,10,10,0.92) */ [data-theme="light"] .user-menu { background: rgba(255, 255, 255, 0.98); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06); border: 1px solid var(--border-default); } [data-theme="light"] .user-menu__header { background: var(--bg-tertiary); border-bottom: 1px solid var(--border-default); } /* Mobile menu sheet */ [data-theme="light"] .mobile-menu-sheet, [data-theme="light"] .mobile-menu-sheet__inner { background: var(--bg-secondary); box-shadow: -16px 0 40px rgba(15, 23, 42, 0.12); } [data-theme="light"] .mobile-menu-sheet__backdrop { background: rgba(15, 23, 42, 0.32); } /* Agent-chat panel: had `rgba(0,0,0,0.18)` accents */ [data-theme="light"] .agent-chat__header { background: linear-gradient(135deg, rgba(0, 184, 158, 0.08), rgba(45, 123, 224, 0.04)); border-bottom: 1px solid var(--border-default); } [data-theme="light"] .agent-chat__avatar { background: linear-gradient(135deg, rgba(0, 184, 158, 0.22), rgba(0, 184, 158, 0.10)); color: var(--accent); } [data-theme="light"] .agent-chat__messages { background: var(--bg-primary); } [data-theme="light"] .agent-chat__msg--agent { background: var(--bg-tertiary); color: var(--text-primary); } [data-theme="light"] .agent-chat__msg--user { background: var(--accent-subtle); color: var(--text-primary); } [data-theme="light"] .agent-chat__input-bar { background: var(--bg-secondary); border-top: 1px solid var(--border-default); } [data-theme="light"] .agent-chat__input { background: var(--bg-tertiary); border: 1px solid var(--border-default); color: var(--text-primary); } [data-theme="light"] .agent-chat__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } /* Kill switch — stays red but lighter shadow in light mode */ [data-theme="light"] .kill-switch { background: rgba(224, 62, 92, 0.10); border-color: rgba(224, 62, 92, 0.45); color: var(--red); box-shadow: 0 8px 24px rgba(224, 62, 92, 0.20), 0 2px 6px rgba(15, 23, 42, 0.06); } [data-theme="light"] .kill-switch:hover { background: var(--red); color: #fff; box-shadow: 0 10px 28px rgba(224, 62, 92, 0.32), 0 2px 8px rgba(15, 23, 42, 0.08); } /* Primary buttons: dark-mode `.btn-primary` is white → in light mode, dark text on dark bg */ [data-theme="light"] .btn-primary { background: var(--text-primary); color: var(--bg-primary); } [data-theme="light"] .btn-primary:hover { background: #2A2F36; } /* Card hovers and elevated surfaces */ [data-theme="light"] .card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } [data-theme="light"] .card:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); } /* Wallet pill — green dot still works */ [data-theme="light"] .topnav__wallet { background: var(--bg-tertiary); border-color: var(--border-default); } /* Theme toggle button */ [data-theme="light"] .theme-toggle { background: var(--bg-tertiary); border-color: var(--border-default); color: var(--text-secondary); } [data-theme="light"] .theme-toggle:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-strong); } /* Lang segmented — pills */ [data-theme="light"] .lang-seg { background: var(--bg-tertiary); border-color: var(--border-default); } [data-theme="light"] .lang-seg__opt { color: var(--text-tertiary); } [data-theme="light"] .lang-seg__opt.is-active { background: var(--bg-secondary); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } /* Deposit primary CTA: cyan glow stays, but text contrast tweak in light */ [data-theme="light"] .topnav__deposit { color: #002B23; } [data-theme="light"] .topnav__deposit .icon { color: #002B23; } /* Nav dropdown panel */ [data-theme="light"] .nav-dropdown__panel { background: var(--bg-secondary); border: 1px solid var(--border-default); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 4px 8px rgba(15, 23, 42, 0.06); } [data-theme="light"] .nav-dropdown__item:hover { background: var(--bg-tertiary); } /* Toast container */ [data-theme="light"] .toast { background: var(--bg-secondary); border: 1px solid var(--border-default); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16); } /* Form fields */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { color: var(--text-primary); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text-tertiary); } /* Tables — alternating rows */ [data-theme="light"] table tr:hover td { background: var(--bg-tertiary); } /* Badge / pill colors that were dark-tuned */ [data-theme="light"] .badge { background: var(--bg-tertiary); border-color: var(--border-default); } /* Status: keep accent colors visible */ [data-theme="light"] .pulse { box-shadow: 0 0 0 0 var(--accent); } /* Avatar gradient — keep warm but soften saturation slightly in light */ [data-theme="light"] .topnav__avatar { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10); } /* Native frames (iOS/Android device chrome) — usually fine, but the kill ribbon may need a touch */ [data-theme="light"] .native-kill-fab { box-shadow: 0 6px 20px rgba(224, 62, 92, 0.30); } /* Bottom tab bar (mobile) */ [data-theme="light"] .bottom-tab-bar { background: rgba(255, 255, 255, 0.92); border-top: 1px solid var(--border-default); backdrop-filter: blur(20px); } /* Floating gradient hero overlays */ [data-theme="light"] .hero-glow { background: radial-gradient(ellipse, rgba(0, 184, 158, 0.10), transparent 70%); } /* Old hardcoded #161616 hover on portfolio cell */ [data-theme="light"] .portfolio-cell:hover { background: var(--bg-tertiary) !important; } /* SVG chart backgrounds — gridlines */ [data-theme="light"] .chart-grid line { stroke: var(--border-default); } [data-theme="light"] .chart-axis text { fill: var(--text-tertiary); } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; background: none; border: none; color: inherit; outline: none; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } /* Subtle noise overlay on body */ body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(ellipse 800px 600px at 30% -20%, rgba(0, 229, 199, 0.04), transparent 60%), radial-gradient(ellipse 600px 400px at 90% 10%, rgba(74, 158, 255, 0.03), transparent 60%); pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } /* Typography utilities */ .text-xs { font-size: 11px; line-height: 1.5; } .text-sm { font-size: 13px; line-height: 1.5; } .text-base { font-size: 14px; line-height: 1.5; } .text-lg { font-size: 16px; line-height: 1.5; } .text-xl { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; } .text-2xl { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; letter-spacing: -0.015em; } .text-3xl { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.02em; } .text-4xl { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.025em; } .font-regular { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent); } .text-green { color: var(--green); } .text-red { color: var(--red); } .text-warning { color: var(--warning); } .uppercase { text-transform: uppercase; letter-spacing: 0.06em; } /* Top Nav */ .topnav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: rgba(5, 5, 5, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); height: 56px; } .topnav__logo { font-weight: 600; letter-spacing: -0.025em; font-size: 18px; color: var(--text-primary); display: flex; align-items: center; gap: 9px; line-height: 1; text-decoration: none; cursor: pointer; transition: opacity 140ms ease; } a.topnav__logo:hover { color: var(--text-primary); opacity: 0.92; } .topnav__logo .logo-mark { display: inline-flex; width: 22px; height: 22px; color: var(--accent); filter: drop-shadow(0 0 10px var(--accent-glow)); flex-shrink: 0; } .topnav__logo .logo-mark svg { width: 100%; height: 100%; display: block; } .topnav__logo .logo-wordmark { position: relative; top: 0.5px; } .topnav__logo:hover .logo-mark { filter: drop-shadow(0 0 14px var(--accent-glow)); } .topnav__menu { display: flex; gap: 4px; margin-left: 16px; flex: 1; } .topnav__menu a { padding: 8px 12px; color: var(--text-secondary); font-size: 13px; border-radius: var(--radius-sm); transition: color 150ms, background 150ms; } .topnav__menu a:hover { color: var(--text-primary); background: var(--bg-tertiary); } .topnav__menu a.active { color: var(--text-primary); background: var(--bg-tertiary); } /* Admin link — distinct red pill in topnav to signal operator-only */ .topnav__admin-link { color: var(--red) !important; font-weight: 600; border: 1px solid rgba(255, 77, 109, 0.32); border-radius: 999px; padding: 4px 10px !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.06em; margin-left: 4px; background: rgba(255, 77, 109, 0.06); } .topnav__admin-link:hover { background: rgba(255, 77, 109, 0.16) !important; border-color: var(--red); color: var(--red) !important; } .topnav__right { display: flex; align-items: center; gap: 12px; } .topnav__icon-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-secondary); position: relative; transition: background 150ms, color 150ms; } .topnav__icon-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); } .topnav__dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: var(--red); border-radius: 50%; box-shadow: 0 0 6px var(--red); } .topnav__wallet { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .topnav__wallet::before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 50%; } .topnav__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #FFB547, #FF4D6D); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #000; cursor: pointer; position: relative; transition: transform 120ms, box-shadow 120ms; } .topnav__avatar:hover { transform: scale(1.05); box-shadow: 0 0 0 2px var(--bg-tertiary); } .topnav__avatar.is-open { box-shadow: 0 0 0 2px var(--accent); } /* Hamburger button — only visible on mobile/tablet */ .topnav__hamburger { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: var(--bg-secondary); border: 2px solid var(--accent); border-radius: 12px; color: var(--accent); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 229, 199, 0.15), 0 0 0 2px rgba(0, 229, 199, 0.1); transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .topnav__hamburger:hover { background: var(--bg-tertiary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 229, 199, 0.30), 0 0 0 4px rgba(0, 229, 199, 0.20); } .topnav__hamburger:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 229, 199, 0.20), 0 0 0 2px rgba(0, 229, 199, 0.15); } .topnav__hamburger svg { width: 22px; height: 22px; stroke-width: 2.5; } /* Nav dropdown — hover-triggered submenu on a top-nav item (e.g. Trade) */ .nav-dropdown { position: relative; display: inline-flex; } .nav-dropdown__trigger { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; color: var(--text-secondary); font-size: 13px; border-radius: var(--radius-sm); background: transparent; border: 0; cursor: default; user-select: none; font-family: inherit; transition: color 150ms, background 150ms; } .nav-dropdown__trigger::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; opacity: 0.55; transition: transform 150ms, opacity 150ms; } .nav-dropdown:hover .nav-dropdown__trigger, .nav-dropdown:focus-within .nav-dropdown__trigger, .nav-dropdown__trigger.active { color: var(--text-primary); background: var(--bg-tertiary); } .nav-dropdown:hover .nav-dropdown__trigger::after, .nav-dropdown:focus-within .nav-dropdown__trigger::after { transform: rotate(-135deg) translate(-1px, 1px); opacity: 1; } /* invisible hover bridge so the menu doesn't disappear while cursor crosses the gap */ .nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; pointer-events: none; } .nav-dropdown:hover::after, .nav-dropdown:focus-within::after { pointer-events: auto; } .nav-dropdown__panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); padding: 6px; display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 150ms, transform 150ms; z-index: 200; } .nav-dropdown:hover .nav-dropdown__panel, .nav-dropdown:focus-within .nav-dropdown__panel { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-dropdown__item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: 13px; transition: background 120ms, color 120ms; } .nav-dropdown__item:hover { background: var(--bg-tertiary); color: var(--text-primary); } .nav-dropdown__item.active { background: var(--bg-tertiary); color: var(--text-primary); } .nav-dropdown__item.active .nav-dropdown__title { color: var(--accent); } .nav-dropdown__icon { width: 20px; flex-shrink: 0; text-align: center; font-size: 14px; line-height: 1.2; padding-top: 1px; } .nav-dropdown__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nav-dropdown__title { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-weight: 500; font-size: 13px; } .nav-dropdown__desc { color: var(--text-tertiary); font-size: 11px; line-height: 1.4; } .nav-dropdown__badge { font-size: 9px; padding: 2px 5px; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-tertiary); letter-spacing: 0.5px; font-weight: 600; text-transform: uppercase; } @media (max-width: 1023px) { .topnav__menu { display: none; } .topnav__hamburger { display: inline-flex; } } /* User menu dropdown (desktop avatar click) */ .user-menu { position: fixed; top: 56px; right: 12px; z-index: 65; min-width: 240px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px var(--border-subtle); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 160ms, transform 160ms, visibility 160ms; } .user-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .user-menu__header { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; } .user-menu__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #FFB547, #FF4D6D); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #000; flex-shrink: 0; } .user-menu__name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .user-menu__email { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); } .user-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 120ms, color 120ms; width: 100%; text-align: left; } .user-menu__item:hover { background: var(--bg-tertiary); color: var(--text-primary); } .user-menu__item-icon { width: 16px; flex-shrink: 0; text-align: center; opacity: 0.8; } .user-menu__divider { height: 1px; background: var(--border-subtle); margin: 4px 0; } .user-menu__item--danger { color: var(--red); } .user-menu__item--danger:hover { background: var(--red-bg); color: var(--red); } .user-menu__lang-pill { margin-left: auto; font-size: 10px; font-family: var(--font-mono); padding: 2px 6px; border-radius: 3px; background: var(--bg-tertiary); color: var(--text-tertiary); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; } /* Mobile slide-in menu sheet */ .mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 70; opacity: 0; visibility: hidden; transition: opacity 200ms, visibility 200ms; } .mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; } .mobile-menu-sheet { position: fixed; top: 0; right: 0; width: min(320px, 88vw); height: 100vh; background: var(--bg-elevated); border-left: 1px solid var(--border-default); z-index: 71; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; } .mobile-menu-sheet.is-open { transform: translateX(0); } .mobile-menu-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--border-subtle); } .mobile-menu-sheet__title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .mobile-menu-sheet__close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text-secondary); border-radius: var(--radius-sm); font-size: 18px; } .mobile-menu-sheet__close:hover { background: var(--bg-tertiary); color: var(--text-primary); } .mobile-menu-sheet__user { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border-subtle); } .mobile-menu-sheet__user-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #FFB547, #FF4D6D); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #000; } .mobile-menu-sheet__user-name { font-size: 14px; font-weight: 600; } .mobile-menu-sheet__user-email { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); } .mobile-menu-sheet__nav { padding: 8px; } .mobile-menu-sheet__nav-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; font-weight: 500; } .mobile-menu-sheet__nav-item:hover, .mobile-menu-sheet__nav-item.active { background: var(--bg-tertiary); color: var(--text-primary); } .mobile-menu-sheet__nav-item.active { color: var(--accent); } .mobile-menu-sheet__nav-item--sub { padding-left: 32px; font-size: 13px; color: var(--text-tertiary); } .mobile-menu-sheet__nav-item--sub:hover { color: var(--text-secondary); } .mobile-menu-sheet__nav-item-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.85; } .mobile-menu-sheet__section { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); padding: 12px 12px 6px; } .mobile-menu-sheet__foot { margin-top: auto; padding: 12px 16px 16px; border-top: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-tertiary); } /* Inline Eng/Kor segmented language toggle — lives in topnav__right */ .lang-seg { display: inline-flex; align-items: stretch; padding: 2px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: 7px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } .lang-seg__opt { appearance: none; background: transparent; border: 0; padding: 4px 9px; color: var(--text-tertiary); cursor: pointer; border-radius: 5px; transition: background 150ms, color 150ms; line-height: 1; } .lang-seg__opt:hover { color: var(--text-secondary); } .lang-seg__opt.is-active { background: var(--bg-elevated); color: #ffffff; box-shadow: 0 1px 0 rgba(0,0,0,0.4); } /* Topnav primary deposit CTA */ .topnav__deposit { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--accent); color: #000; border: 0; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; font-family: var(--font-sans); letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 0 16px var(--accent-glow); transition: background 150ms, box-shadow 150ms, transform 100ms; } /* Make sure click events bubble from icon SVG up to the button so event delegation reliably catches `[data-deposit-trigger]` etc. */ .topnav__deposit > *, .topnav__wallet-btn > *, .theme-toggle > *, .lang-seg__opt > * { pointer-events: none; } .topnav__deposit:hover { background: var(--accent-hover); box-shadow: 0 0 22px var(--accent-glow); } .topnav__deposit:active { transform: translateY(1px); } .topnav__deposit .icon { color: #000; } /* Topnav wallet selector — outline ghost */ .topnav__wallet-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: transparent; color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms; } .topnav__wallet-btn:hover { background: var(--bg-tertiary); border-color: var(--border-strong); } .topnav__wallet-btn .icon { color: var(--accent); } /* Theme toggle — sun/moon icon button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: background 150ms, color 150ms, border-color 150ms, transform 120ms; } .theme-toggle:hover { background: var(--bg-elevated); color: var(--accent); border-color: var(--border-default); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle .icon { color: inherit; } /* Tighter wallet pill to make room for new buttons */ .topnav__right .topnav__wallet { padding: 6px 8px; } @media (max-width: 1023px) { .topnav__deposit .topnav__btn-label, .topnav__wallet-btn .topnav__btn-label { display: none; } .topnav__deposit, .topnav__wallet-btn { padding: 7px 9px; } .lang-seg { font-size: 10px; } } @media (max-width: 767px) { /* Keep Deposit + Wallet + Theme as icon-only on mobile (hamburger covers Eng/Kor + nav). Override the generic .hide-mobile on these specific chrome buttons. */ .topnav__deposit.hide-mobile, .topnav__wallet-btn.hide-mobile, .theme-toggle.hide-mobile { display: inline-flex !important; } .topnav__deposit { padding: 7px 9px; } .topnav__wallet-btn { width: 34px; padding: 0; justify-content: center; } .topnav__wallet-btn .topnav__btn-label { display: none; } /* Lang seg stays hidden on mobile — accessible from the hamburger sheet. */ .lang-seg.hide-mobile { display: none !important; } /* Tighter gap on the cluster */ .topnav__right { gap: 8px; } } /* Solvent icon system — slab-geometric SVGs replacing all emoji chrome. .icon is a flex slot; data-icon name → SolventIcons.apply() injects the SVG. */ .icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1em; height: 1em; line-height: 1; } .icon svg, .icon .icon-svg { width: 100%; height: 100%; display: block; } .icon-sm { width: 14px; height: 14px; } .icon-md { width: 18px; height: 18px; } .icon-lg { width: 22px; height: 22px; } .icon-xl { width: 28px; height: 28px; } .icon-2xl { width: 40px; height: 40px; } /* Inline glyph that should align with text baseline */ .icon-inline { vertical-align: -0.16em; } /* Kill Switch — floats at bottom-right so it never collides with the top-nav avatar / hamburger / lang toggle */ .kill-switch { position: fixed; bottom: 24px; right: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--red-bg); border: 1px solid var(--red); color: var(--red); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(255, 77, 109, 0.18), 0 2px 8px rgba(0, 0, 0, 0.4); transition: background 150ms, color 150ms, transform 150ms, box-shadow 150ms; } .kill-switch:hover { background: var(--red); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(255, 77, 109, 0.28), 0 2px 8px rgba(0, 0, 0, 0.4); } .kill-switch__pulse { width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: pulse 2s ease-in-out infinite; } /* Lift above the mobile bottom tab bar (72px) on small screens */ @media (max-width: 767px) { .kill-switch { bottom: 88px; right: 16px; padding: 9px 14px; font-size: 11px; } body.has-mobile-tabs .kill-switch { bottom: 88px; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Card */ .card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 20px; transition: border-color 200ms ease, transform 200ms ease; } .card:hover { border-color: var(--border-default); } .card--hover-lift:hover { transform: translateY(-2px); } .card--agent { position: relative; overflow: hidden; } .card--agent:hover { border-color: rgba(0, 229, 199, 0.4); box-shadow: 0 0 32px rgba(0, 229, 199, 0.12); } .card--agent.is-selected { border-color: var(--accent); background: linear-gradient(180deg, rgba(0, 229, 199, 0.06), var(--bg-secondary)); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; font-size: 13px; font-weight: 500; border-radius: var(--radius-sm); transition: background 150ms, color 150ms, border-color 150ms, transform 100ms; white-space: nowrap; } .btn:active { transform: scale(0.98); } .btn-agent { background: var(--accent); color: #000; font-weight: 600; box-shadow: 0 0 24px var(--accent-glow); } .btn-agent:hover { background: var(--accent-hover); box-shadow: 0 0 32px var(--accent-glow); } .btn-primary { background: var(--text-primary); color: #000; font-weight: 600; } .btn-primary:hover { background: #E5E5E5; } .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-default); } .btn-secondary:hover { background: var(--bg-elevated); border-color: var(--border-strong); } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); } .btn-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-tertiary); } .btn-destructive { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); } .btn-destructive:hover { background: var(--red); color: #fff; } .btn-sm { padding: 6px 10px; font-size: 12px; } .btn-lg { padding: 12px 20px; font-size: 14px; } /* Badge */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 11px; font-weight: 500; border-radius: 4px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-subtle); white-space: nowrap; } .badge--success { background: var(--green-bg); color: var(--green); border-color: rgba(0, 214, 143, 0.3); } .badge--danger { background: var(--red-bg); color: var(--red); border-color: rgba(255, 77, 109, 0.3); } .badge--accent { background: var(--accent-subtle); color: var(--accent); border-color: rgba(0, 229, 199, 0.3); } .badge--warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(255, 181, 71, 0.3); } .badge--info { background: var(--info-bg); color: var(--info); border-color: rgba(74, 158, 255, 0.3); } .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px currentColor; } .status-dot--running { background: var(--green); color: var(--green); } .status-dot--paused { background: var(--text-tertiary); color: var(--text-tertiary); box-shadow: none; } .status-dot--scanning { background: var(--info); color: var(--info); animation: pulse 1.5s ease-in-out infinite; } /* Risk dots */ .risk-dots { display: inline-flex; gap: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; } .risk-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-default); } .risk-dots span.filled-low { background: var(--green); border-color: var(--green); } .risk-dots span.filled-mid { background: var(--warning); border-color: var(--warning); } .risk-dots span.filled-high { background: var(--red); border-color: var(--red); } /* Bottom Tab Bar (mobile) */ .bottom-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: none; grid-template-columns: repeat(5, 1fr); background: rgba(5, 5, 5, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border-subtle); padding-bottom: env(safe-area-inset-bottom); } .bottom-tab-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 0 10px; color: var(--text-tertiary); font-size: 10px; font-weight: 500; transition: color 150ms; } .bottom-tab-bar a.active { color: var(--accent); } .bottom-tab-bar a:hover { color: var(--text-primary); } .bottom-tab-bar svg { width: 22px; height: 22px; } @media (max-width: 767px) { .bottom-tab-bar { display: grid; } body.has-mobile-tabs { padding-bottom: 72px; } } /* Layout helpers */ .container { max-width: 1440px; margin: 0 auto; padding: 0 24px; } @media (max-width: 767px) { .container { padding: 0 16px; } } .section { padding: 24px 0; } .section + .section { border-top: 1px solid var(--border-subtle); } /* Form fields */ .field { display: block; width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; transition: border-color 150ms, background 150ms; } .field:focus { border-color: var(--accent); background: var(--bg-secondary); } .field--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .field-label { display: block; font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; font-weight: 500; } /* Slider */ .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--bg-elevated); border-radius: 2px; outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--accent); border-radius: 50%; cursor: pointer; box-shadow: 0 0 12px var(--accent-glow); } .slider::-moz-range-thumb { width: 16px; height: 16px; background: var(--accent); border-radius: 50%; border: none; cursor: pointer; } /* Tabs / Segmented */ .segmented { display: inline-flex; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 3px; gap: 2px; } .segmented button { padding: 6px 12px; border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--text-secondary); transition: background 150ms, color 150ms; } .segmented button.active { background: var(--bg-elevated); color: var(--text-primary); } .segmented button.active.is-agent { background: var(--accent-subtle); color: var(--accent); } /* Sparkline */ .sparkline { width: 100%; height: 40px; display: block; } /* Toast */ .toast-container { position: fixed; bottom: 88px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } @media (min-width: 768px) { .toast-container { bottom: 16px; } } .toast { background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-primary); padding: 10px 14px; border-radius: 6px; font-size: 13px; pointer-events: auto; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); animation: toastIn 180ms ease-out; min-width: 220px; max-width: 340px; } @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn 120ms; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 6px; max-width: 440px; width: 100%; padding: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); animation: modalIn 180ms ease-out; } @keyframes modalIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .modal__title { font-size: 16px; font-weight: 500; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); } .modal__body { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; line-height: 1.5; } .modal__actions { display: flex; gap: 8px; justify-content: flex-end; } /* Skeleton */ .skeleton { background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Utility */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .grid { display: grid; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .w-full { width: 100%; } .text-right { text-align: right; } .text-center { text-align: center; } .tabular { font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .divider { height: 1px; background: var(--border-subtle); } .divider-v { width: 1px; background: var(--border-subtle); align-self: stretch; } .hidden { display: none !important; } @media (max-width: 1023px) { .hide-tablet { display: none !important; } } @media (max-width: 767px) { .hide-mobile { display: none !important; } .show-mobile { display: block !important; } } @media (min-width: 768px) { .show-mobile { display: none !important; } } /* Market scope pill bar — clarifies Lock vs Spot vs Perp at top of market screens */ .market-scope { display: flex; align-items: stretch; gap: 8px; padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; } .market-scope::-webkit-scrollbar { display: none; } .market-scope__label { display: inline-flex; align-items: center; padding: 0 12px 0 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; border-right: 1px solid var(--border-subtle); } .market-scope__pill { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: background 150ms, color 150ms; border: 1px solid transparent; } .market-scope__pill:hover { background: var(--bg-tertiary); color: var(--text-primary); } .market-scope__pill.active { background: var(--accent-subtle); border-color: var(--accent); color: var(--text-primary); } .market-scope__pill-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .market-scope__pill.active .market-scope__pill-name { color: var(--accent); } .market-scope__pill-desc { font-size: 11px; color: var(--text-tertiary); } .market-scope__pill.is-soon { opacity: 0.55; cursor: default; } .market-scope__pill.is-soon:hover { background: transparent; color: var(--text-secondary); } .market-scope__badge { font-size: 9px; letter-spacing: 0.05em; padding: 2px 5px; border-radius: 3px; background: var(--bg-tertiary); color: var(--text-tertiary); text-transform: uppercase; } @media (max-width: 767px) { .market-scope__label { display: none; } .market-scope__pill-desc { display: none; } .market-scope__pill { padding: 8px 12px; } } /* ============================================================ Agent Prompt Sheet — Buy/Sell with Agent ============================================================ */ .agent-prompt-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 220; display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: fadeIn 150ms; } @media (min-width: 768px) { .agent-prompt-backdrop { align-items: center; padding: 24px; } } .agent-prompt { position: relative; background: var(--bg-elevated); border: 1px solid var(--border-default); border-bottom: none; border-radius: 20px 20px 0 0; width: 100%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 -24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,229,199,0.08); animation: sheetUp 280ms cubic-bezier(.22,1,.36,1); overflow: hidden; } @media (min-width: 768px) { .agent-prompt { border-radius: 16px; border-bottom: 1px solid var(--border-default); max-height: 88vh; animation: modalIn 240ms cubic-bezier(.22,1,.36,1); } } @keyframes sheetUp { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } } .agent-prompt__grip { display: block; width: 36px; height: 4px; background: var(--border-strong); border-radius: 999px; margin: 10px auto 0; } @media (min-width: 768px) { .agent-prompt__grip { display: none; } } .agent-prompt__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--border-subtle); position: relative; } .agent-prompt__head-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, rgba(0,229,199,0.16), rgba(0,229,199,0.04)); border: 1px solid rgba(0,229,199,0.28); display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 0 24px rgba(0,229,199,0.18); flex-shrink: 0; } .agent-prompt__head-text { flex: 1; min-width: 0; } .agent-prompt__head-title { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .agent-prompt__side-pill { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.05em; text-transform: uppercase; } .agent-prompt__side-pill.is-buy { background: var(--green-bg); color: var(--green); border: 1px solid rgba(0,214,143,0.28); } .agent-prompt__side-pill.is-sell { background: var(--red-bg); color: var(--red); border: 1px solid rgba(255,77,109,0.28); } .agent-prompt__head-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-tertiary); margin-top: 3px; font-family: var(--font-mono); } .agent-prompt__head-meta strong { color: var(--text-secondary); font-weight: 500; } .agent-prompt__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--text-tertiary); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 120ms; } .agent-prompt__close:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-default); } .agent-prompt__body { flex: 1; overflow-y: auto; padding: 18px 20px 8px; } .agent-prompt__label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .agent-prompt__label-hint { font-size: 10px; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-weight: 400; } .agent-prompt__textarea-wrap { position: relative; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-tertiary); transition: border-color 150ms, box-shadow 150ms; } .agent-prompt__textarea-wrap:focus-within { border-color: rgba(0,229,199,0.4); box-shadow: 0 0 0 3px rgba(0,229,199,0.10); } .agent-prompt__textarea { width: 100%; min-height: 96px; max-height: 220px; background: transparent; border: none; resize: vertical; padding: 14px 16px 36px; color: var(--text-primary); font-size: 14px; line-height: 1.55; font-family: inherit; outline: none; } .agent-prompt__textarea::placeholder { color: var(--text-muted); } .agent-prompt__counter { position: absolute; bottom: 8px; right: 12px; font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); pointer-events: none; } .agent-prompt__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .agent-prompt__chip { background: var(--bg-tertiary); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: all 120ms; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; } .agent-prompt__chip:hover { background: var(--bg-elevated); border-color: rgba(0,229,199,0.35); color: var(--text-primary); } .agent-prompt__chip-icon { opacity: 0.7; font-size: 11px; } .agent-prompt__constraints { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 540px) { .agent-prompt__constraints { grid-template-columns: 1fr; } } .agent-prompt__field { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; transition: border-color 120ms; } .agent-prompt__field:focus-within { border-color: rgba(0,229,199,0.35); } .agent-prompt__field-label { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; } .agent-prompt__field-input { background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 14px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding: 0; width: 100%; } .agent-prompt__field-input::placeholder { color: var(--text-muted); } select.agent-prompt__field-input { font-family: inherit; appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 16px; background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%); background-position: calc(100% - 8px) 8px, calc(100% - 4px) 8px; background-size: 4px 4px; background-repeat: no-repeat; } .agent-prompt__interpret { margin-top: 18px; background: linear-gradient(135deg, rgba(0,229,199,0.06), rgba(0,229,199,0.01)); border: 1px solid rgba(0,229,199,0.22); border-radius: 12px; padding: 14px 16px; position: relative; } .agent-prompt__interpret::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--accent); border-radius: 3px 0 0 3px; } .agent-prompt__interpret-head { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); font-weight: 600; margin-bottom: 8px; } .agent-prompt__interpret-body { font-size: 13px; line-height: 1.55; color: var(--text-primary); } .agent-prompt__interpret-body strong { color: var(--accent); font-weight: 600; } .agent-prompt__interpret-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--text-tertiary); } .agent-prompt__interpret-meta span { display: inline-flex; align-items: center; gap: 4px; } .agent-prompt__interpret-meta strong { color: var(--text-secondary); font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .agent-prompt__foot { display: flex; gap: 10px; align-items: center; padding: 14px 20px 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-secondary); } .agent-prompt__foot-note { flex: 1; font-size: 11px; color: var(--text-tertiary); line-height: 1.45; min-width: 0; } .agent-prompt__foot-actions { display: flex; gap: 8px; flex-shrink: 0; } .agent-prompt__foot .btn { white-space: nowrap; } @media (max-width: 540px) { .agent-prompt__foot { flex-direction: column; align-items: stretch; } .agent-prompt__foot-actions { width: 100%; } .agent-prompt__foot-actions .btn { flex: 1; } } /* ──────────────────────────────────────────────────────────────────── Agent Mode — inline chat panel (replaces trade forms in Agent Mode, keeps chart / orderbook / token list visible) ──────────────────────────────────────────────────────────────────── */ .agent-chat { background: linear-gradient(180deg, rgba(0, 229, 199, 0.04), var(--bg-secondary) 36%); border: 1px solid rgba(0, 229, 199, 0.22); border-radius: var(--radius); padding: 0; display: flex; flex-direction: column; min-height: 380px; position: relative; overflow: hidden; } .agent-chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); background: rgba(0, 0, 0, 0.18); } .agent-chat__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-subtle); border: 1px solid rgba(0, 229, 199, 0.4); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; box-shadow: 0 0 12px var(--accent-glow); } .agent-chat__head-title { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: baseline; gap: 8px; } .agent-chat__head-title small { font-size: 11px; font-weight: 400; color: var(--text-tertiary); } .agent-chat__head-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); padding: 4px 10px; border-radius: 999px; background: rgba(0, 214, 143, 0.10); border: 1px solid rgba(0, 214, 143, 0.25); color: var(--green); } .agent-chat__head-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); } .agent-chat__conversation { flex: 1; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 340px; } .agent-chat__msg { display: flex; gap: 10px; max-width: 92%; } .agent-chat__msg-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .agent-chat__msg-avatar.agent { background: var(--accent-subtle); color: var(--accent); border: 1px solid rgba(0, 229, 199, 0.3); } .agent-chat__msg-avatar.user { background: linear-gradient(135deg, #FFB547, #FF4D6D); color: #000; font-weight: 700; font-size: 12px; } .agent-chat__msg-body { flex: 1; min-width: 0; } .agent-chat__msg-name { font-size: 10px; color: var(--text-tertiary); margin-bottom: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; } .agent-chat__msg-text { background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13px; line-height: 1.55; color: var(--text-primary); } .agent-chat__msg-text em { color: var(--text-tertiary); font-style: normal; } .agent-chat__msg.user { align-self: flex-end; flex-direction: row-reverse; } .agent-chat__msg.user .agent-chat__msg-text { background: var(--accent-subtle); border-color: rgba(0, 229, 199, 0.3); } .agent-chat__msg.user .agent-chat__msg-name { text-align: right; } .agent-chat__confirm { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 8px; } .agent-chat__confirm-row { display: flex; justify-content: space-between; padding: 3px 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; } .agent-chat__confirm-row .label { color: var(--text-tertiary); font-family: var(--font-sans); } .agent-chat__confirm-row .value { color: var(--text-primary); } .agent-chat__confirm-note { font-size: 11px; color: var(--warning); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-subtle); } .agent-chat__confirm-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); } .agent-chat__suggestions { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 10px; } .agent-chat__chip { font-size: 11px; color: var(--text-secondary); background: var(--bg-tertiary); border: 1px solid var(--border-subtle); padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: border-color 120ms, color 120ms; } .agent-chat__chip:hover { color: var(--accent); border-color: var(--accent); } .agent-chat__input { display: flex; gap: 8px; align-items: center; padding: 12px 14px 14px; border-top: 1px solid var(--border-subtle); background: rgba(0, 0, 0, 0.20); } .agent-chat__input input { flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border-default); color: var(--text-primary); padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; transition: border-color 150ms, box-shadow 150ms; } .agent-chat__input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 229, 199, 0.12); } .agent-chat__send { flex-shrink: 0; min-width: 80px; } /* Agent Mode pill (mode-toggle 활성화 시) */ .mode-toggle button.active.is-agent, .segmented button.active.is-agent { background: var(--accent-subtle); color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } /* ----------------------------------------------------------------------- Orderbook depth-bar — density → blur gradient Strong saturation at the price edge, fading toward the center of the row. Applied to all three markets (Lock 03 / Spot 06 / Perp 10) — bars are absolutely positioned at right:0 and grow leftward via width%. -------------------------------------------------------------------------*/ .ob-row__bar, .ob-row__bar--bid, .ob-row.bid .ob-row__bar, .ob-row__bar.ask, .ob-row__bar.bid { filter: blur(0.45px); mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.96) 35%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.28) 92%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.96) 35%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.28) 92%, rgba(0,0,0,0) 100%); transition: width 220ms cubic-bezier(.25,.46,.45,.94); } /* Asks — red, dense at the right, blurred toward center */ .ob-row[data-side="ask"] .ob-row__bar, .ob-row.ask .ob-row__bar, .ob-row__bar.ask, .ob-row__bar:not(.ob-row__bar--bid):not(.bid) { background: linear-gradient(to left, rgba(255, 77, 109, 0.34) 0%, rgba(255, 77, 109, 0.26) 30%, rgba(255, 77, 109, 0.16) 65%, rgba(255, 77, 109, 0.06) 92%, rgba(255, 77, 109, 0) 100%); } /* Bids — green */ .ob-row[data-side="bid"] .ob-row__bar, .ob-row.bid .ob-row__bar, .ob-row__bar--bid, .ob-row__bar.bid { background: linear-gradient(to left, rgba(0, 214, 143, 0.34) 0%, rgba(0, 214, 143, 0.26) 30%, rgba(0, 214, 143, 0.16) 65%, rgba(0, 214, 143, 0.06) 92%, rgba(0, 214, 143, 0) 100%); } /* Hover — slight density boost so the row feels alive */ .ob-row:hover .ob-row__bar { filter: blur(0.25px) brightness(1.15); } /* Light theme — stronger alpha for readability on light surface */ [data-theme="light"] .ob-row[data-side="ask"] .ob-row__bar, [data-theme="light"] .ob-row.ask .ob-row__bar, [data-theme="light"] .ob-row__bar.ask, [data-theme="light"] .ob-row__bar:not(.ob-row__bar--bid):not(.bid) { background: linear-gradient(to left, rgba(224, 62, 92, 0.40) 0%, rgba(224, 62, 92, 0.30) 30%, rgba(224, 62, 92, 0.18) 65%, rgba(224, 62, 92, 0.06) 92%, rgba(224, 62, 92, 0) 100%); } [data-theme="light"] .ob-row[data-side="bid"] .ob-row__bar, [data-theme="light"] .ob-row.bid .ob-row__bar, [data-theme="light"] .ob-row__bar--bid, [data-theme="light"] .ob-row__bar.bid { background: linear-gradient(to left, rgba(0, 165, 118, 0.40) 0%, rgba(0, 165, 118, 0.30) 30%, rgba(0, 165, 118, 0.18) 65%, rgba(0, 165, 118, 0.06) 92%, rgba(0, 165, 118, 0) 100%); }