/* ============================================================================ AlgoTrader — design system A professional, modern SaaS UI. Dark is the default; light is applied via [data-theme="light"] on . All colour, type, spacing and elevation are token-driven so the two themes stay perfectly in sync. ========================================================================== */ :root { /* Surfaces */ --bg: #0a0d14; --surface: #10141d; --surface-2: #161b26; --surface-3: #1c2330; --border: #222a38; --border-2: #2c3543; /* Text */ --text: #eef1f6; --text-2: #aeb8c8; --muted: #78839a; /* Brand + semantic */ --primary: #3b82f6; --primary-2: #60a5fa; --primary-contrast: #ffffff; --primary-soft: rgba(59, 130, 246, .16); --primary-border: rgba(59, 130, 246, .40); --pos: #22c07d; --neg: #f4586b; --warn: #f2b23e; --info: #4b8bf5; --pos-soft: rgba(34, 192, 125, .14); --neg-soft: rgba(244, 88, 107, .14); --warn-soft: rgba(242, 178, 62, .14); --info-soft: rgba(75, 139, 245, .14); /* Radius */ --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30); --shadow: 0 6px 20px rgba(0, 0, 0, .38); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .48); --sidebar-w: 250px; color-scheme: dark; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: var(--font); } :root[data-theme="light"] { --bg: #f4f6fb; --surface: #ffffff; --surface-2: #f4f6fa; --surface-3: #eaeef5; --border: #e5e9f1; --border-2: #d5dce8; --text: #0e1626; --text-2: #47526a; --muted: #8a94a8; --primary: #2563eb; --primary-2: #1d4ed8; --primary-soft: rgba(37, 99, 235, .10); --primary-border: rgba(37, 99, 235, .30); --pos: #0f9d63; --neg: #e23b57; --warn: #c6890f; --info: #2f6fe0; --pos-soft: rgba(15, 157, 99, .12); --neg-soft: rgba(226, 59, 87, .12); --warn-soft: rgba(198, 137, 15, .14); --info-soft: rgba(47, 111, 224, .12); --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --shadow: 0 6px 20px rgba(16, 24, 40, .10); --shadow-lg: 0 18px 44px rgba(16, 24, 40, .16); color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, .card, .sidebar, .topbar, .rec, .chip, .toast, input, select, textarea, .btn, .iconbtn { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } a { color: var(--primary-2); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { margin: 0; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; } /* Inline icons */ .ic { width: 20px; height: 20px; flex: none; display: block; } .ic-sm { width: 16px; height: 16px; } /* Form controls */ input, select, textarea { font-family: inherit; font-size: 14px; width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px; } :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: #fff; } input::placeholder, textarea::placeholder { color: var(--muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } input[type="checkbox"] { width: auto; accent-color: var(--primary); } label.f, .auth-card label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin: 12px 0 6px; } /* ---------- Auth ---------- */ .auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 500px at 50% -10%, var(--primary-soft), transparent 70%), var(--bg); } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .auth-brand .name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .auth-card h1 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 4px; } .auth-card .sub { color: var(--muted); margin: 0 0 20px; font-size: 13px; } .demo-hint { margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center; } /* ---------- Layout ---------- */ .layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; } .brand-logo { width: 30px; height: 30px; flex: none; } .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; } .nav a { color: var(--text-2); padding: 9px 11px; border-radius: var(--r-sm); display: flex; align-items: center; gap: 11px; font-weight: 500; font-size: 13.5px; position: relative; } .nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav a .ic { color: var(--muted); } .nav a:hover .ic { color: var(--text-2); } .nav a.active { background: var(--primary-soft); color: var(--text); font-weight: 600; } .nav a.active .ic { color: var(--primary-2); } .nav a.active::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); } .sidebar-foot { border-top: 1px solid var(--border); margin-top: 8px; padding: 12px 8px 4px; font-size: 12.5px; color: var(--muted); line-height: 1.9; } .sidebar-foot a { color: var(--text-2); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .sidebar-foot a:hover { color: var(--text); text-decoration: none; } .main { display: flex; flex-direction: column; min-width: 0; } /* ---------- Topbar ---------- */ .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; min-height: 60px; } .topbar .pagetitle { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .topbar .spacer { flex: 1; } .pv { text-align: right; padding-left: 6px; } .pv .lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .pv .val { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; } .dot.live { background: var(--pos); box-shadow: 0 0 0 3px var(--pos-soft); } .content { padding: 24px; max-width: 1440px; width: 100%; } /* Icon buttons */ .iconbtn { background: transparent; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-sm); width: 38px; height: 38px; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .iconbtn:hover { background: var(--surface-2); color: var(--text); } .hamburger { display: none; } /* Floating theme toggle (login screen only). Hidden in-app via body.app-shell. */ .theme-toggle { position: fixed; left: 20px; bottom: 20px; z-index: 30; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; } .theme-toggle:hover { color: var(--text); } body.app-shell .theme-toggle { display: none; } .backdrop { display: none; position: fixed; inset: 0; background: rgba(3, 6, 12, .55); z-index: 40; backdrop-filter: blur(2px); } /* ---------- Automation pill + kill switch ---------- */ .pill { padding: 5px 11px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; border: 1px solid var(--border-2); display: inline-flex; align-items: center; gap: 6px; letter-spacing: .02em; } .pill .ic { width: 13px; height: 13px; } .pill.advisor { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); background: var(--info-soft); } .pill.semi_auto { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); } .pill.full_auto { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); background: var(--pos-soft); } .kill { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); padding: 8px 13px; border-radius: var(--r-sm); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; } .kill:hover { border-color: var(--neg); color: var(--neg); } .kill:not(.off) { background: var(--neg); border-color: var(--neg); color: #fff; box-shadow: 0 0 0 3px var(--neg-soft); } /* ---------- Cards / grid ---------- */ .grid { display: grid; gap: 16px; } .cols-4 { grid-template-columns: repeat(4, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); } .card h3 { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 14px; } .card h4 { font-size: 13.5px; font-weight: 600; color: var(--text); } .stat .big { font-size: 27px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat .sub { font-size: 12px; color: var(--muted); margin-top: 5px; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; margin: 0 -18px -18px; padding: 0 4px; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 13px; } thead th { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; font-weight: 600; position: sticky; top: 0; background: var(--surface); } tbody tr { transition: background .12s ease; } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: none; } .num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Semantic text ---------- */ .up { color: var(--pos); } .down { color: var(--neg); } .muted { color: var(--muted); } /* ---------- Buttons ---------- */ .btn { background: var(--primary); color: var(--primary-contrast); border: 1px solid transparent; padding: 9px 15px; border-radius: var(--r-sm); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-shadow: var(--shadow-sm); } .btn:hover { background: var(--primary-2); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn.sm { padding: 6px 11px; font-size: 12.5px; } .btn.ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); box-shadow: none; } .btn.ghost:hover { background: var(--surface-3); border-color: var(--border-2); } .btn.buy { background: var(--pos); color: #05130c; } .btn.buy:hover { background: color-mix(in srgb, var(--pos) 88%, #fff); } .btn.sell, .btn.danger { background: var(--neg); color: #fff; } .btn.sell:hover, .btn.danger:hover { background: color-mix(in srgb, var(--neg) 88%, #000); } .btn.icon-only { padding: 6px; width: 30px; height: 30px; } /* ---------- Badges ---------- */ .badge { padding: 3px 9px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; } .badge.filled { background: var(--pos-soft); color: var(--pos); } .badge.pending { background: var(--warn-soft); color: var(--warn); } .badge.rejected, .badge.cancelled { background: var(--neg-soft); color: var(--neg); } .badge.open { background: var(--info-soft); color: var(--info); } /* ---------- Misc layout helpers ---------- */ .row { display: flex; gap: 10px; align-items: center; } .row.wrap { flex-wrap: wrap; } .spacer { flex: 1; } .section-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 14px; } hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; } /* Recommendation card */ .rec { border: 1px solid var(--border); border-radius: var(--r); padding: 15px; margin-bottom: 12px; background: var(--surface-2); } .rec:last-child { margin-bottom: 0; } .rec .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; } .rec .sym { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .conf { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .meter { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; margin: 8px 0; } .meter > span { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--primary), var(--primary-2)); } /* Chips */ .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; } .chip { background: var(--surface-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--r-full); font-size: 11.5px; color: var(--text-2); font-weight: 500; } /* Chat */ .chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow-y: auto; padding: 4px; } .msg { padding: 11px 15px; border-radius: var(--r-lg); max-width: 82%; white-space: pre-wrap; line-height: 1.55; font-size: 13.5px; } .msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; } .msg.assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } /* Empty / disclaimer / unread */ .empty { color: var(--muted); text-align: center; padding: 34px 16px; font-size: 13.5px; } .disclaimer { font-size: 11.5px; color: var(--muted); text-align: center; padding: 14px 6px 2px; } .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); display: inline-block; } /* ---------- Toasts ---------- */ #toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 100; } .toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); padding: 13px 16px; border-radius: var(--r); box-shadow: var(--shadow-lg); min-width: 260px; max-width: 340px; animation: slidein .22s ease; } .toast.exit { border-left-color: var(--warn); } .toast.order { border-left-color: var(--pos); } .toast .t { font-weight: 600; font-size: 13px; } .toast .b { font-size: 12.5px; color: var(--muted); margin-top: 3px; } @keyframes slidein { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } svg.spark { display: block; overflow: visible; } /* ============================================================================ Dashboard v2 components (matches the product spec) ========================================================================== */ /* Brand with subtitle */ .brand { flex-direction: row; align-items: center; } .brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand .brand-text .name { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; } .brand .brand-text .sub { font-size: 11px; color: var(--muted); font-weight: 500; } /* Sectioned nav */ .nav-section { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 14px 12px 6px; } .nav-section:first-child { padding-top: 4px; } /* Sidebar user footer */ .user-foot { border-top: 1px solid var(--border); margin: 8px -12px 0; padding: 12px; display: flex; align-items: center; gap: 10px; } .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); } .user-foot .u-name { font-size: 13px; font-weight: 600; } .user-foot .u-sub { font-size: 11px; color: var(--muted); } .user-foot .logout { margin-left: auto; color: var(--muted); display: inline-flex; } .user-foot .logout:hover { color: var(--neg); } /* Topbar search + subtitle */ .topbar .titles { display: flex; flex-direction: column; } .topbar .subtitle { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-top: 1px; } .search { position: relative; width: 300px; max-width: 34vw; } .search input { padding: 9px 12px 9px 36px; background: var(--surface-2); border-radius: var(--r-sm); font-size: 13px; } .search .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-family: inherit; font-size: 10.5px; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; } /* Stat card with icon */ .stat { position: relative; } .stat .stat-hd { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; } .stat .stat-ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary); } .stat .stat-ico.pos { background: var(--pos-soft); color: var(--pos); } .stat .stat-ico.neg { background: var(--neg-soft); color: var(--neg); } .stat .stat-ico .ic { width: 18px; height: 18px; } /* Segmented control */ .segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px; gap: 2px; } .segmented button { background: transparent; border: none; color: var(--muted); font-weight: 600; font-size: 12px; padding: 5px 12px; border-radius: 6px; } .segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } :root[data-theme="light"] .segmented button.active { background: #fff; } /* Dashboard two-column masonry */ .dash-2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; } .dash-2 .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (max-width: 900px) { .dash-2 { grid-template-columns: 1fr; } } /* Card header row */ .card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card-hd h3 { margin: 0; } .card-hd .sub { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 500; } .link-btn { background: none; border: none; color: var(--primary); font-weight: 600; font-size: 12.5px; padding: 0; } .link-btn:hover { text-decoration: underline; } /* Equity area chart */ .equity-val { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .area-chart { width: 100%; display: block; } .area-chart .axis { fill: var(--muted); font-size: 10px; } /* Recommendation rows (v2) */ .rec-list { display: flex; flex-direction: column; } .rec-row { padding: 16px 0; border-top: 1px solid var(--border); } .rec-row:first-child { border-top: none; padding-top: 2px; } .rec-row .rec-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .rec-row .rec-sym { font-size: 14px; font-weight: 700; } .rec-row .rec-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .rec-row .rec-bar { width: 90px; height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .rec-row .rec-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; } .rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; } .rec-grid .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; } .rec-grid .v { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .rec-row .why { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; } /* Colored chips (signals) */ .chip.pos { background: var(--pos-soft); color: var(--pos); border-color: transparent; } .chip.neg { background: var(--neg-soft); color: var(--neg); border-color: transparent; } .confidence-pill { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 2px 9px; } .outlook-big { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } /* Movers with arrow */ .mv-chg { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; font-variant-numeric: tabular-nums; } .mv-chg .ic { width: 14px; height: 14px; } /* Execution log */ .exec-log { display: flex; flex-direction: column; } .exec-item { display: flex; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border); align-items: center; } .exec-item:first-child { border-top: none; } .exec-item .ex-t { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 40px; flex: none; } .exec-item .ex-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .exec-item .ex-line { font-size: 12.5px; line-height: 1.4; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .exec-item .ex-sym { font-weight: 600; } .exec-item .ex-sub { font-size: 11px; } .exec-item .badge { flex: none; } .badge.new { background: var(--info-soft); color: var(--info); } .badge.filled { background: var(--pos-soft); color: var(--pos); } /* ============================================================================ Responsive ========================================================================== */ /* Card grids reflow as width shrinks. */ @media (max-width: 1080px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .cols-4, .cols-3, .cols-2 { grid-template-columns: 1fr; } } /* Tablet: collapse the sidebar to an icon rail. */ @media (min-width: 769px) and (max-width: 1040px) { :root { --sidebar-w: 68px; } .brand .name, .nav a span:not(.ic), .sidebar-foot { display: none; } .brand { justify-content: center; } .nav a { justify-content: center; padding: 10px; } .nav a.active::before { left: -4px; } } /* Mobile: off-canvas drawer + hamburger. */ @media (max-width: 768px) { .layout { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: 264px; z-index: 50; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); } body.nav-open .sidebar { transform: none; } body.nav-open .backdrop { display: block; } .hamburger { display: inline-flex; } .topbar { padding: 10px 14px; gap: 8px; flex-wrap: wrap; } .topbar .pagetitle, .topbar .titles .pagetitle { font-size: 16px; } .content { padding: 16px; } .search { display: none; } } /* Phones: drop the least-critical topbar items so nothing overflows. */ @media (max-width: 640px) { .rec-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { #autopill, .pv.pv-portfolio { display: none; } .kill span.lbl { display: none; } .topbar .subtitle { display: none; } } /* Tablet icon-rail: hide section labels + brand/user text. */ @media (min-width: 769px) and (max-width: 1040px) { .nav-section, .brand .brand-text, .user-foot .u-name, .user-foot .u-sub { display: none; } .user-foot { justify-content: center; } } /* Pre-market cues (dashboard) */ .pm-cues{display:flex;flex-direction:column;font-size:12.5px} .pm-cues .pm-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border)} .pm-cues .pm-row:first-child{border-top:none} .pm-cues .pm-lbl{flex:none;min-width:96px;font-size:10.5px;font-weight:700;letter-spacing:.4px; text-transform:uppercase;color:var(--muted);padding-top:3px} .pm-cues .pm-items{display:flex;flex-wrap:wrap;gap:6px} .pm-cues .pm-chip{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full); padding:2px 9px;white-space:nowrap} .pm-cues .pm-row b{color:var(--muted);font-weight:600;margin-right:6px;font-size:11px;text-transform:uppercase;letter-spacing:.03em} /* AI chart-read box */ .chartread{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2,rgba(127,127,127,.05))} .chartread .cr-narr{font-size:13px;line-height:1.6;margin-top:6px} .chartread img{max-width:100%;border-radius:8px;margin-top:10px;border:1px solid var(--border)} /* Trading Agent panel */ .agent-card h3{margin-bottom:10px} .agent-head{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:12px} .agent-dot{width:9px;height:9px;border-radius:50%;display:inline-block} .agent-dot.on{background:var(--pos);box-shadow:0 0 0 3px color-mix(in srgb,var(--pos) 25%,transparent);animation:agentpulse 1.8s infinite} .agent-dot.off{background:var(--muted)} @keyframes agentpulse{0%,100%{opacity:1}50%{opacity:.4}} .agent-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px} .agent-cell .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)} .agent-cell .v{font-size:14px;font-weight:600;margin-top:2px} .agent-warn{margin-top:12px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg);font-size:12.5px;font-weight:600} /* AI Assistant (rich) */ .ai-wrap{display:flex;flex-direction:column;height:calc(100vh - 150px);min-height:460px} .ai-quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} .ai-chip{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;transition:.15s} .ai-chip:hover{border-color:var(--primary);color:var(--primary)} .ai-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:4px 2px} .ai-msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.55;white-space:pre-wrap} .ai-msg.user{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px} .ai-msg.assistant{align-self:flex-start;background:var(--surface-2,rgba(127,127,127,.08));border:1px solid var(--border);border-bottom-left-radius:4px} .ai-msg .tool-tag{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px} .ai-data{margin-top:8px;overflow-x:auto} .ai-data table{width:100%;border-collapse:collapse;font-size:12px} .ai-data th,.ai-data td{text-align:left;padding:4px 8px;border-bottom:1px solid var(--border);white-space:nowrap} .ai-data th{color:var(--muted);font-weight:600} .ai-inrow{display:flex;gap:8px;margin-top:12px} .ai-inrow input{flex:1} .ai-msg.assistant.thinking{opacity:.6} /* AI research cards */ .ai-research{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:8px} .ai-research+.ai-research{margin-top:8px} .rc-head{display:flex;align-items:center;gap:8px;font-size:14px} .rc-verdict{font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;text-transform:uppercase} .rc-verdict.strongbuy{background:color-mix(in srgb,var(--pos) 22%,transparent);color:var(--pos)} .rc-verdict.buy{background:color-mix(in srgb,var(--pos) 15%,transparent);color:var(--pos)} .rc-verdict.hold{background:color-mix(in srgb,var(--muted) 20%,transparent);color:var(--muted)} .rc-verdict.avoid{background:color-mix(in srgb,var(--neg) 18%,transparent);color:var(--neg)} .rc-conv{margin-left:auto;font-weight:700;font-size:13px} .rc-factors{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px} .rc-factors .chip{font-size:11px;padding:2px 8px} .rc-plan{margin-top:8px;font-size:12px;color:var(--muted);border-top:1px solid var(--border);padding-top:6px} /* Inline tags for order/position side + product horizon (buy/sell, intraday/delivery) */ .tag{display:inline-block;padding:2px 8px;border-radius:var(--r-full);font-size:11px;font-weight:700; letter-spacing:.2px;line-height:1.5;white-space:nowrap} .tag.t-buy{background:var(--pos-soft);color:var(--pos)} .tag.t-sell{background:var(--neg-soft);color:var(--neg)} .tag.t-intraday{background:var(--info-soft);color:var(--info)} .tag.t-delivery{background:var(--primary-soft);color:var(--primary)}