3121 lines
62 KiB
CSS
3121 lines
62 KiB
CSS
@import '@bytelyst/design-tokens/generated/tokens.css';
|
|
@import 'tailwindcss';
|
|
|
|
@source './**/*.{ts,tsx}';
|
|
@source '../../../learning_ai_common_plat/packages/ui/src/**/*.{ts,tsx}';
|
|
|
|
:root {
|
|
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
color-scheme: light;
|
|
color: #111827;
|
|
background-color: #f7f9fc;
|
|
--background: #f7f9fc;
|
|
--foreground: #0f172a;
|
|
--card: #ffffff;
|
|
--card-elevated: #fcfdff;
|
|
--input: #ffffff;
|
|
--muted: #eef3f8;
|
|
--muted-foreground: #64748b;
|
|
--border: rgba(15, 23, 42, 0.10);
|
|
--border-strong: rgba(15, 23, 42, 0.18);
|
|
--primary: #0f172a;
|
|
--primary-foreground: #f8fafc;
|
|
--accent: #2563eb;
|
|
--accent-soft: rgba(37, 99, 235, 0.10);
|
|
--ring: #2563eb;
|
|
--ring-soft: rgba(37, 99, 235, 0.18);
|
|
--destructive: #dc2626;
|
|
--sidebar: rgba(255, 255, 255, 0.94);
|
|
--sidebar-active: rgba(37, 99, 235, 0.12);
|
|
--header: rgba(255, 255, 255, 0.88);
|
|
--card-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
|
|
--hero-gradient: linear-gradient(135deg, #eef6ff 0%, #ffffff 48%, #edfdf4 100%);
|
|
--bl-accent: var(--accent);
|
|
--bl-accent-muted: var(--accent-soft);
|
|
--bl-accent-foreground: var(--primary-foreground);
|
|
--bl-bg-canvas: var(--background);
|
|
--bl-bg-elevated: var(--card-elevated);
|
|
--bl-surface-card: var(--card);
|
|
--bl-surface-muted: var(--muted);
|
|
--bl-text-primary: var(--foreground);
|
|
--bl-text-secondary: var(--muted-foreground);
|
|
--bl-text-tertiary: color-mix(in oklab, var(--muted-foreground) 76%, var(--background));
|
|
--bl-border: var(--border);
|
|
--bl-success: var(--ml-success);
|
|
--bl-success-muted: color-mix(in oklab, var(--bl-success) 12%, var(--background));
|
|
--bl-warning: var(--ml-warning);
|
|
--bl-warning-muted: color-mix(in oklab, var(--bl-warning) 14%, var(--background));
|
|
--bl-danger: var(--destructive);
|
|
--bl-danger-muted: color-mix(in oklab, var(--bl-danger) 12%, var(--background));
|
|
--bl-info: var(--accent);
|
|
--bl-info-muted: var(--accent-soft);
|
|
--bl-info-strong: #3b82f6;
|
|
--bl-attention: #06b6d4;
|
|
--bl-emphasis: #a855f7;
|
|
--bl-surface-strong: color-mix(in oklab, var(--card) 88%, var(--foreground));
|
|
--bl-surface-overlay: color-mix(in oklab, var(--background) 90%, var(--foreground));
|
|
--bl-surface-highlight: color-mix(in oklab, var(--card-elevated) 86%, var(--foreground));
|
|
--bl-border-subtle: color-mix(in oklab, var(--border) 62%, transparent);
|
|
--bl-border-soft: color-mix(in oklab, var(--border-strong) 50%, transparent);
|
|
--bl-text-quiet: color-mix(in oklab, var(--muted-foreground) 82%, var(--background));
|
|
--bl-text-faint: color-mix(in oklab, var(--muted-foreground) 58%, var(--background));
|
|
--bl-focus-ring: var(--ring);
|
|
--bl-focus-ring-muted: var(--ring-soft);
|
|
--bl-radius-control: 0.5rem;
|
|
--bl-radius-surface: 0.75rem;
|
|
--bl-radius-card: 0.875rem;
|
|
--bl-input: var(--input);
|
|
--bl-border-strong: var(--border-strong);
|
|
--trading-shell-sidebar-width: 76px;
|
|
--trading-shell-tablet-sidebar-width: 88px;
|
|
--trading-shell-right-panel-width: 308px;
|
|
--trading-shell-bottom-nav-height: 72px;
|
|
--trading-assistant-bottom: 24px;
|
|
--trading-assistant-right: 24px;
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
color: #e5edf7;
|
|
background-color: #111827;
|
|
--background: #111827;
|
|
--foreground: #e5edf7;
|
|
--card: #182131;
|
|
--card-elevated: #1d2838;
|
|
--input: #121b2a;
|
|
--muted: #223044;
|
|
--muted-foreground: #94a3b8;
|
|
--border: rgba(148, 163, 184, 0.14);
|
|
--border-strong: rgba(148, 163, 184, 0.24);
|
|
--primary: #f8fafc;
|
|
--primary-foreground: #0f172a;
|
|
--accent: #60a5fa;
|
|
--accent-soft: rgba(96, 165, 250, 0.14);
|
|
--ring: #60a5fa;
|
|
--ring-soft: rgba(96, 165, 250, 0.2);
|
|
--destructive: #f87171;
|
|
--sidebar: rgba(18, 27, 42, 0.94);
|
|
--sidebar-active: rgba(96, 165, 250, 0.16);
|
|
--header: rgba(18, 27, 42, 0.84);
|
|
--card-shadow: 0 28px 70px rgba(2, 6, 23, 0.32);
|
|
--hero-gradient: linear-gradient(135deg, rgba(96, 165, 250, 0.16) 0%, rgba(24, 33, 49, 0.96) 52%, rgba(52, 211, 153, 0.12) 100%);
|
|
--bl-input: color-mix(in oklab, var(--input) 92%, black);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
#root {
|
|
width: 100%;
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.pulse-green {
|
|
animation: pulse 2s infinite ease-in-out;
|
|
}
|
|
|
|
.product-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--bl-radius-control);
|
|
font-family: inherit;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
|
|
}
|
|
|
|
.product-button:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px var(--bl-focus-ring-muted);
|
|
}
|
|
|
|
.product-button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.product-button-sm {
|
|
min-height: 36px;
|
|
padding: 0 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.product-button-md {
|
|
min-height: 40px;
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.product-button-lg {
|
|
min-height: 44px;
|
|
padding: 0 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.product-button-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
}
|
|
|
|
.product-button-primary {
|
|
background: var(--bl-accent);
|
|
color: var(--bl-accent-foreground);
|
|
box-shadow: var(--bl-shadow-sm);
|
|
}
|
|
|
|
.product-button-primary:hover {
|
|
filter: brightness(1.06);
|
|
}
|
|
|
|
.product-button-secondary {
|
|
border-color: var(--bl-border);
|
|
background: var(--bl-surface-card);
|
|
color: var(--bl-text-primary);
|
|
}
|
|
|
|
.product-button-secondary:hover {
|
|
border-color: var(--bl-border-strong);
|
|
background: var(--bl-surface-highlight);
|
|
}
|
|
|
|
.product-button-outline {
|
|
border-color: var(--bl-border);
|
|
background: transparent;
|
|
color: var(--bl-text-primary);
|
|
}
|
|
|
|
.product-button-outline:hover {
|
|
border-color: var(--bl-accent);
|
|
background: var(--bl-accent-muted);
|
|
}
|
|
|
|
.product-button-ghost {
|
|
background: transparent;
|
|
color: var(--bl-text-secondary);
|
|
}
|
|
|
|
.product-button-ghost:hover {
|
|
background: var(--bl-surface-muted);
|
|
color: var(--bl-text-primary);
|
|
}
|
|
|
|
.product-button-subtle {
|
|
background: var(--bl-surface-muted);
|
|
color: var(--bl-text-primary);
|
|
}
|
|
|
|
.product-button-subtle:hover {
|
|
background: var(--bl-surface-highlight);
|
|
}
|
|
|
|
.product-button-destructive {
|
|
background: var(--bl-danger);
|
|
color: var(--bl-danger-foreground);
|
|
}
|
|
|
|
.product-button-link {
|
|
min-height: auto;
|
|
padding: 0;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
color: var(--bl-accent);
|
|
text-decoration: underline;
|
|
text-underline-offset: 4px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|
|
}
|
|
|
|
.app-runtime {
|
|
min-height: 100vh;
|
|
background: var(--background);
|
|
}
|
|
|
|
.dashboard-shell {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
background:
|
|
linear-gradient(180deg, color-mix(in oklab, var(--background) 92%, var(--card)) 0%, var(--background) 34%),
|
|
var(--background);
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
.dashboard-main {
|
|
margin-left: var(--trading-shell-sidebar-width);
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-content-row {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 32px 32px 40px;
|
|
min-width: 0;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
width: var(--trading-shell-right-panel-width);
|
|
min-width: var(--trading-shell-right-panel-width);
|
|
max-width: var(--trading-shell-right-panel-width);
|
|
}
|
|
|
|
.trading-sidebar {
|
|
width: var(--trading-shell-sidebar-width);
|
|
min-height: 100vh;
|
|
background: var(--sidebar);
|
|
border-right: 1px solid var(--border);
|
|
backdrop-filter: blur(18px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 18px;
|
|
padding-bottom: 20px;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.trading-sidebar-logo {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
margin-bottom: 24px;
|
|
flex-shrink: 0;
|
|
border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border));
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, var(--bl-success)));
|
|
color: var(--primary-foreground);
|
|
box-shadow: 0 12px 30px color-mix(in oklab, var(--accent) 26%, transparent);
|
|
}
|
|
|
|
.page-section-grid {
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.tab-strip {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 24px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.tab-button {
|
|
padding: 10px 14px;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
margin-bottom: -1px;
|
|
transition: all 0.15s;
|
|
font-family: inherit;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.tab-button:hover {
|
|
color: var(--foreground);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.tab-button[data-active="true"] {
|
|
color: var(--accent);
|
|
border-bottom-color: var(--accent);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hero-surface {
|
|
background: var(--hero-gradient);
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.route-fallback,
|
|
.route-empty-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 320px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--bl-radius-card);
|
|
background: var(--card);
|
|
color: var(--foreground);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.route-fallback-inline {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
min-height: min(420px, calc(100vh - 180px));
|
|
gap: 18px;
|
|
padding: 24px;
|
|
background: color-mix(in oklab, var(--card) 92%, var(--background));
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.route-fallback-status {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.route-fallback-spinner {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--accent);
|
|
border-radius: 999px;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
.route-fallback-preview {
|
|
display: grid;
|
|
gap: 12px;
|
|
width: min(560px, 100%);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.route-fallback-title {
|
|
width: 46%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.route-fallback-card {
|
|
min-height: 92px;
|
|
}
|
|
|
|
.route-fallback-card-short {
|
|
min-height: 64px;
|
|
width: 78%;
|
|
}
|
|
|
|
.route-empty-state {
|
|
min-height: 420px;
|
|
flex-direction: column;
|
|
padding: 56px 32px;
|
|
text-align: center;
|
|
background: var(--hero-gradient);
|
|
}
|
|
|
|
.route-empty-eyebrow {
|
|
color: var(--accent);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.route-empty-state h1 {
|
|
margin: 10px 0 8px;
|
|
font-size: 34px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.route-empty-state p {
|
|
max-width: 520px;
|
|
margin: 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.route-empty-action {
|
|
margin-top: 24px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ux-page-stack {
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.ux-surface {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--bl-radius-card);
|
|
background: var(--card);
|
|
box-shadow: 0 16px 44px rgba(2, 6, 23, 0.12);
|
|
}
|
|
|
|
.ux-section {
|
|
display: grid;
|
|
gap: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--bl-radius-card);
|
|
background: var(--card-elevated);
|
|
padding: 20px;
|
|
}
|
|
|
|
.ux-section-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ux-section-title {
|
|
margin: 0;
|
|
color: var(--foreground);
|
|
font-size: 15px;
|
|
font-weight: 750;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.ux-section-copy,
|
|
.ux-helper-text {
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.ux-field-stack {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.settings-config-stack {
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.settings-access-panel,
|
|
.settings-loading-state,
|
|
.settings-action-panel,
|
|
.settings-control-panel,
|
|
.settings-info-footer {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--bl-radius-card);
|
|
background: var(--card);
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.settings-access-panel {
|
|
border-color: color-mix(in oklab, var(--bl-danger) 26%, var(--border));
|
|
background: color-mix(in oklab, var(--bl-danger) 8%, var(--card));
|
|
padding: 28px;
|
|
}
|
|
|
|
.settings-access-panel h2 {
|
|
margin: 8px 0 0;
|
|
color: var(--foreground);
|
|
font-size: 22px;
|
|
font-weight: 780;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.settings-access-panel p:not(.settings-panel-eyebrow) {
|
|
margin: 10px 0 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.settings-panel-eyebrow {
|
|
margin: 0;
|
|
color: var(--bl-danger);
|
|
font-size: 11px;
|
|
font-weight: 850;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.settings-loading-state {
|
|
min-height: 260px;
|
|
display: grid;
|
|
place-items: center;
|
|
align-content: center;
|
|
gap: 14px;
|
|
color: var(--muted-foreground);
|
|
text-align: center;
|
|
}
|
|
|
|
.settings-loading-state p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.settings-loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid var(--border);
|
|
border-top-color: var(--accent);
|
|
border-radius: 999px;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
.settings-feedback {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.settings-feedback--success {
|
|
border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
|
|
background: color-mix(in oklab, var(--bl-success) 10%, var(--card));
|
|
color: var(--bl-success);
|
|
}
|
|
|
|
.settings-feedback--error {
|
|
border-color: color-mix(in oklab, var(--bl-danger) 28%, var(--border));
|
|
background: color-mix(in oklab, var(--bl-danger) 10%, var(--card));
|
|
color: var(--bl-danger);
|
|
}
|
|
|
|
.settings-feedback-icon {
|
|
display: grid;
|
|
width: 40px;
|
|
height: 40px;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
background: color-mix(in oklab, currentColor 12%, transparent);
|
|
}
|
|
|
|
.settings-feedback span {
|
|
display: block;
|
|
color: var(--foreground);
|
|
font-size: 14px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.settings-feedback p {
|
|
margin: 4px 0 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.settings-action-panel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding: 24px;
|
|
}
|
|
|
|
.settings-action-heading {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.settings-action-icon,
|
|
.settings-info-icon {
|
|
display: grid;
|
|
width: 52px;
|
|
height: 52px;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
|
|
border-radius: 16px;
|
|
background: color-mix(in oklab, var(--accent) 10%, var(--card));
|
|
color: var(--accent);
|
|
}
|
|
|
|
.settings-action-heading h2,
|
|
.settings-control-header h3,
|
|
.settings-info-content h5 {
|
|
margin: 0;
|
|
color: var(--foreground);
|
|
font-weight: 760;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.settings-action-heading h2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.settings-action-heading p,
|
|
.settings-control-header p,
|
|
.settings-info-content p {
|
|
margin: 6px 0 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.settings-action-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.settings-control-panel {
|
|
display: grid;
|
|
gap: 18px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.settings-control-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.settings-control-header h3,
|
|
.settings-info-content h5 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.settings-toggle-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.settings-toggle-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
background: var(--card-elevated);
|
|
padding: 16px;
|
|
}
|
|
|
|
.settings-toggle-card > span {
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-toggle-card span span {
|
|
display: block;
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.settings-toggle-card small {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.settings-info-footer {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 24px;
|
|
}
|
|
|
|
.settings-info-watermark {
|
|
position: absolute;
|
|
top: -34px;
|
|
right: 18px;
|
|
opacity: 0.05;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.settings-info-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
}
|
|
|
|
.settings-info-content strong {
|
|
color: var(--foreground);
|
|
font-weight: 760;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.settings-action-panel,
|
|
.settings-control-header,
|
|
.settings-info-content {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.settings-action-controls {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.settings-action-controls .product-button {
|
|
width: 100%;
|
|
}
|
|
|
|
.settings-toggle-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.admin-console {
|
|
width: min(100%, 1120px);
|
|
margin: 0 auto;
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.admin-console-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
|
|
.admin-console-brand {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.admin-console-icon {
|
|
display: grid;
|
|
width: 44px;
|
|
height: 44px;
|
|
flex: 0 0 auto;
|
|
place-items: center;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.admin-console-brand h2 {
|
|
margin: 0;
|
|
color: var(--foreground);
|
|
font-size: 20px;
|
|
font-weight: 760;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.admin-console-brand p {
|
|
margin: 5px 0 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.admin-status-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.admin-status-pill {
|
|
display: inline-flex;
|
|
min-height: 34px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-radius: 999px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.admin-subnav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
border-radius: 16px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.admin-subnav-button {
|
|
gap: 8px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.admin-subnav-button[data-active='true'] {
|
|
background: var(--card);
|
|
color: var(--foreground);
|
|
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.admin-control-button {
|
|
width: 100%;
|
|
gap: 8px;
|
|
}
|
|
|
|
.admin-control-button--pause:not(:disabled) {
|
|
border-color: color-mix(in oklab, var(--bl-warning) 28%, var(--border));
|
|
background: color-mix(in oklab, var(--bl-warning) 10%, transparent);
|
|
color: var(--bl-warning);
|
|
}
|
|
|
|
.admin-control-button--resume:not(:disabled) {
|
|
border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
|
|
background: color-mix(in oklab, var(--bl-success) 10%, transparent);
|
|
color: var(--bl-success);
|
|
}
|
|
|
|
.home-chart-segment {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: color-mix(in oklab, var(--card) 76%, transparent);
|
|
padding: 3px;
|
|
}
|
|
|
|
.home-chart-toggle {
|
|
min-height: 28px;
|
|
border-radius: 9px;
|
|
padding: 0 9px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 680;
|
|
}
|
|
|
|
.home-chart-toggle[data-active='true'] {
|
|
background: var(--accent-soft);
|
|
color: var(--primary);
|
|
box-shadow: 0 6px 16px color-mix(in oklab, var(--primary) 12%, transparent);
|
|
}
|
|
|
|
.home-chart-toggle--pill {
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 720;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.admin-console-header {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.admin-status-row {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.admin-subnav {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.admin-subnav-button {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
.ux-field-label {
|
|
color: var(--muted-foreground);
|
|
font-size: 11px;
|
|
font-weight: 750;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ux-empty-state {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: 180px;
|
|
border: 1px dashed var(--border-strong);
|
|
border-radius: var(--bl-radius-card);
|
|
background: color-mix(in oklab, var(--muted) 34%, transparent);
|
|
color: var(--muted-foreground);
|
|
text-align: center;
|
|
}
|
|
|
|
.ux-empty-state strong {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
color: var(--foreground);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.ux-alert {
|
|
border: 1px solid color-mix(in oklab, var(--destructive) 40%, var(--border));
|
|
border-radius: var(--bl-radius-card);
|
|
background: color-mix(in oklab, var(--destructive) 10%, var(--card));
|
|
color: var(--destructive);
|
|
padding: 14px 16px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ux-data-grid {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--bl-radius-card);
|
|
background: var(--card);
|
|
box-shadow: 0 16px 44px rgba(2, 6, 23, 0.10);
|
|
}
|
|
|
|
.ux-data-grid-header,
|
|
.ux-data-grid-row {
|
|
min-width: 820px;
|
|
}
|
|
|
|
.ux-data-grid-header {
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--muted);
|
|
}
|
|
|
|
.ux-data-grid-row {
|
|
border-bottom: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.ux-data-grid-row:hover {
|
|
background: color-mix(in oklab, var(--accent) 8%, transparent);
|
|
}
|
|
|
|
.ux-data-grid-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.ux-data-grid-head {
|
|
color: var(--muted-foreground);
|
|
font-size: 11px;
|
|
font-weight: 750;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
user-select: none;
|
|
}
|
|
|
|
.ux-data-grid-cell {
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--foreground);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.section-description {
|
|
font-size: 13px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.pill-group {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
padding: 4px;
|
|
width: fit-content;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.stat-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
background: var(--card-elevated);
|
|
color: var(--muted-foreground);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.stat-chip[data-tone="success"] {
|
|
color: #16a34a;
|
|
}
|
|
|
|
.stat-chip[data-tone="danger"] {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.trading-sidebar-nav {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.trading-sidebar-link {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
min-height: 62px;
|
|
border-left: 3px solid transparent;
|
|
color: var(--muted-foreground);
|
|
text-decoration: none;
|
|
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.trading-sidebar-link:hover {
|
|
background: color-mix(in oklab, var(--sidebar-active) 58%, transparent);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.trading-sidebar-link.is-active {
|
|
border-left-color: var(--accent);
|
|
background: var(--sidebar-active);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.trading-sidebar-link span {
|
|
font-size: 10px;
|
|
font-weight: 650;
|
|
letter-spacing: 0.01em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.trading-sidebar-avatar {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
flex-shrink: 0;
|
|
border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border));
|
|
border-radius: 999px;
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.trading-sidebar-avatar-status {
|
|
position: absolute;
|
|
right: 1px;
|
|
bottom: 1px;
|
|
width: 9px;
|
|
height: 9px;
|
|
border: 2px solid var(--card);
|
|
border-radius: 999px;
|
|
background: var(--bl-success);
|
|
}
|
|
|
|
.product-tabs {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 24px;
|
|
overflow-x: auto;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.product-tab {
|
|
margin-bottom: -1px;
|
|
border-radius: 10px 10px 0 0;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
|
|
.product-tab[data-active="true"] {
|
|
border-bottom-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.right-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
border-left: 1px solid var(--border);
|
|
background: color-mix(in oklab, var(--card) 94%, var(--background));
|
|
}
|
|
|
|
.right-panel-block {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.right-panel-section {
|
|
padding: 16px 16px 12px;
|
|
}
|
|
|
|
.right-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 10px;
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.right-panel-news-header {
|
|
padding: 12px 16px 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.right-panel-metric {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.right-panel-metric-value {
|
|
color: var(--foreground);
|
|
font-size: 22px;
|
|
font-weight: 750;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.right-panel-metric-change {
|
|
margin-top: 3px;
|
|
color: var(--bl-danger);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.right-panel-metric-change[data-positive="true"] {
|
|
color: var(--bl-success);
|
|
}
|
|
|
|
.right-panel-table-head,
|
|
.right-panel-table-row {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1.2fr 1fr 1.2fr;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
|
|
.right-panel-table-head {
|
|
margin-bottom: 4px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.right-panel-table-head span {
|
|
color: var(--muted-foreground);
|
|
font-size: 10px;
|
|
font-weight: 750;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.right-panel-table-row {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.right-panel-empty {
|
|
padding: 18px 14px;
|
|
border: 1px dashed var(--border);
|
|
border-radius: var(--bl-radius-card);
|
|
background: var(--card-elevated);
|
|
color: var(--muted-foreground);
|
|
text-align: center;
|
|
}
|
|
|
|
.right-panel-empty div {
|
|
color: var(--foreground);
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.right-panel-empty p {
|
|
margin: 4px 0 0;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.right-panel-news-card {
|
|
display: flex;
|
|
gap: 10px;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
text-decoration: none;
|
|
transition: background-color 0.12s ease;
|
|
}
|
|
|
|
.right-panel-news-card:hover {
|
|
background: var(--muted);
|
|
}
|
|
|
|
.right-panel-error {
|
|
padding: 12px 16px;
|
|
color: var(--bl-danger);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.strategy-workspace {
|
|
display: grid;
|
|
gap: 28px;
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.strategy-workspace-header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--bl-radius-card);
|
|
background: var(--card);
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.strategy-workspace-eyebrow {
|
|
margin-bottom: 8px;
|
|
color: var(--accent);
|
|
font-size: 11px;
|
|
font-weight: 750;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.strategy-workspace-header h2 {
|
|
margin: 0;
|
|
color: var(--foreground);
|
|
font-size: 28px;
|
|
font-weight: 750;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.strategy-workspace-header p {
|
|
max-width: 640px;
|
|
margin: 8px 0 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.strategy-workspace-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.strategy-connection-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 38px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--bl-radius-control);
|
|
background: var(--muted);
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.strategy-connection-pill[data-connected="true"] {
|
|
border-color: color-mix(in oklab, var(--bl-success) 35%, var(--border));
|
|
background: var(--bl-success-muted);
|
|
color: var(--bl-success);
|
|
}
|
|
|
|
.home-empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: min(60vh, 560px);
|
|
gap: 16px;
|
|
padding: 32px 16px;
|
|
color: var(--muted-foreground);
|
|
text-align: center;
|
|
}
|
|
|
|
.home-empty-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 64px;
|
|
height: 64px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
background: var(--card);
|
|
color: var(--accent);
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.home-empty-title {
|
|
color: var(--foreground);
|
|
font-size: 20px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.home-empty-copy {
|
|
max-width: 380px;
|
|
color: var(--muted-foreground);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.home-empty-hint {
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.home-empty-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.dashboard-shell {
|
|
padding-bottom: 68px;
|
|
}
|
|
|
|
.dashboard-main {
|
|
margin-left: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-content-row {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 16px 14px 24px;
|
|
}
|
|
|
|
.trading-header {
|
|
height: auto !important;
|
|
min-height: 56px;
|
|
padding: 10px 14px !important;
|
|
gap: 10px !important;
|
|
}
|
|
|
|
.trading-header-search {
|
|
width: min(100%, 280px) !important;
|
|
flex: 1 1 180px;
|
|
}
|
|
|
|
.trading-header-indices {
|
|
display: none !important;
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
display: none !important;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
width: 100%;
|
|
min-height: 64px;
|
|
height: 64px;
|
|
top: auto;
|
|
right: 0;
|
|
bottom: 0;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
padding: 0 8px;
|
|
border-right: 0;
|
|
border-top: 1px solid var(--border);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.trading-sidebar-logo,
|
|
.trading-sidebar-avatar {
|
|
display: none !important;
|
|
}
|
|
|
|
.trading-sidebar-nav {
|
|
flex: 0 1 auto;
|
|
flex-direction: row;
|
|
width: auto;
|
|
max-width: 100%;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
}
|
|
|
|
.trading-sidebar-link {
|
|
width: 68px;
|
|
min-width: 68px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.entries-tab-nav {
|
|
width: 100%;
|
|
scroll-snap-type: x proximity;
|
|
}
|
|
|
|
.entries-tab-nav button {
|
|
min-width: max-content;
|
|
scroll-snap-align: start;
|
|
padding-left: 10px !important;
|
|
padding-right: 10px !important;
|
|
}
|
|
|
|
.entries-tab-nav svg {
|
|
display: none;
|
|
}
|
|
|
|
.ux-section-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ux-section-header > button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Product shell v2: intentionally more spacious, lighter, and less "developer dashboard". */
|
|
.dashboard-shell {
|
|
background:
|
|
linear-gradient(180deg, color-mix(in oklab, var(--background) 72%, var(--accent-soft)) 0%, var(--background) 42%),
|
|
var(--background);
|
|
}
|
|
|
|
.dashboard-main {
|
|
margin-left: 248px;
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 36px clamp(24px, 3vw, 44px) 56px;
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
width: 340px;
|
|
min-width: 340px;
|
|
max-width: 340px;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
width: 248px;
|
|
align-items: stretch;
|
|
padding: 20px 14px;
|
|
background: var(--sidebar);
|
|
box-shadow: 18px 0 50px rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.trading-sidebar-logo {
|
|
width: auto;
|
|
height: 56px;
|
|
margin: 0 4px 22px;
|
|
padding: 0 14px;
|
|
justify-content: flex-start;
|
|
gap: 12px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, var(--foreground), color-mix(in oklab, var(--accent) 76%, var(--foreground)));
|
|
}
|
|
|
|
.trading-sidebar-brand {
|
|
display: grid;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.trading-sidebar-brand strong {
|
|
color: var(--primary-foreground);
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.trading-sidebar-brand span {
|
|
color: color-mix(in oklab, var(--primary-foreground) 78%, transparent);
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
line-height: 1;
|
|
}
|
|
|
|
.trading-sidebar-nav {
|
|
align-items: stretch;
|
|
gap: 4px;
|
|
}
|
|
|
|
.trading-sidebar-link {
|
|
width: auto;
|
|
min-height: 44px;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
gap: 12px;
|
|
padding: 0 12px;
|
|
border-left: 0;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.trading-sidebar-link.is-active {
|
|
border-left-color: transparent;
|
|
background: var(--sidebar-active);
|
|
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
|
|
}
|
|
|
|
.trading-sidebar-link span {
|
|
font-size: 13px;
|
|
font-weight: 720;
|
|
}
|
|
|
|
.trading-sidebar-avatar {
|
|
width: auto;
|
|
height: 44px;
|
|
margin: 16px 4px 0;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.trading-header {
|
|
height: 72px !important;
|
|
margin: 16px 16px 0;
|
|
padding: 0 18px !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 18px;
|
|
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.07);
|
|
}
|
|
|
|
.trading-header-search {
|
|
width: min(42vw, 460px) !important;
|
|
}
|
|
|
|
.trading-header-search input {
|
|
min-height: 44px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.right-panel {
|
|
margin: 16px 16px 16px 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
background: color-mix(in oklab, var(--card) 96%, var(--background));
|
|
box-shadow: 0 16px 44px rgba(15, 23, 42, 0.07);
|
|
}
|
|
|
|
.right-panel-block {
|
|
border-bottom-color: color-mix(in oklab, var(--border) 72%, transparent);
|
|
}
|
|
|
|
.right-panel-section {
|
|
padding: 20px;
|
|
}
|
|
|
|
.right-panel-news-header {
|
|
padding: 18px 20px 8px;
|
|
}
|
|
|
|
.right-panel-empty {
|
|
background: color-mix(in oklab, var(--muted) 68%, var(--card));
|
|
}
|
|
|
|
.ux-page-stack {
|
|
gap: 28px;
|
|
}
|
|
|
|
.ux-section,
|
|
.ux-data-grid,
|
|
.ux-surface,
|
|
.entries-tab-nav,
|
|
.hero-surface {
|
|
border-radius: 18px;
|
|
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
|
|
}
|
|
|
|
.entry-card {
|
|
display: flex;
|
|
height: 100%;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--bl-radius-card);
|
|
background: var(--card);
|
|
padding: 20px;
|
|
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
|
|
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
|
|
}
|
|
|
|
.entry-card:hover {
|
|
border-color: var(--border-strong);
|
|
box-shadow: var(--card-shadow);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.entry-mode-pill,
|
|
.entry-state-pill {
|
|
display: inline-flex;
|
|
min-height: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
padding: 0 10px;
|
|
font-size: 11px;
|
|
font-weight: 760;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.entry-mode-pill.is-real {
|
|
border-color: color-mix(in oklab, var(--bl-info) 28%, var(--border));
|
|
background: var(--bl-info-muted);
|
|
color: var(--bl-info);
|
|
}
|
|
|
|
.entry-mode-pill.is-paper {
|
|
border-color: color-mix(in oklab, var(--bl-emphasis) 24%, var(--border));
|
|
background: color-mix(in oklab, var(--bl-emphasis) 10%, var(--card));
|
|
color: color-mix(in oklab, var(--bl-emphasis) 72%, var(--foreground));
|
|
}
|
|
|
|
.entry-state-pill {
|
|
background: color-mix(in oklab, var(--muted) 64%, var(--card));
|
|
color: var(--muted-foreground);
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.entry-state-pill.state-locked,
|
|
.entry-state-pill.state-confirmed {
|
|
border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
|
|
background: var(--bl-success-muted);
|
|
color: var(--bl-success);
|
|
}
|
|
|
|
.entry-state-pill.state-blocked,
|
|
.entry-state-pill.state-orphan {
|
|
border-color: color-mix(in oklab, var(--bl-danger) 28%, var(--border));
|
|
background: var(--bl-danger-muted);
|
|
color: var(--bl-danger);
|
|
}
|
|
|
|
.entry-state-pill.state-submitted {
|
|
border-color: color-mix(in oklab, var(--bl-warning) 28%, var(--border));
|
|
background: var(--bl-warning-muted);
|
|
color: color-mix(in oklab, var(--bl-warning) 76%, var(--foreground));
|
|
}
|
|
|
|
.watchlist-feedback {
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 12px 14px;
|
|
font-size: 13px;
|
|
font-weight: 680;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.watchlist-feedback.is-success {
|
|
border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
|
|
background: var(--bl-success-muted);
|
|
color: var(--bl-success);
|
|
}
|
|
|
|
.watchlist-feedback.is-error {
|
|
border-color: color-mix(in oklab, var(--bl-danger) 28%, var(--border));
|
|
background: var(--bl-danger-muted);
|
|
color: var(--bl-danger);
|
|
}
|
|
|
|
.product-tabs {
|
|
gap: 8px;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
padding: 5px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
background: var(--card);
|
|
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.product-tab,
|
|
.product-tab[data-active="true"] {
|
|
margin-bottom: 0;
|
|
border: 0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.product-tab[data-active="true"] {
|
|
background: var(--accent);
|
|
color: var(--primary-foreground);
|
|
}
|
|
|
|
.home-command-center {
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.home-hero-panel {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
|
|
gap: clamp(24px, 4vw, 52px);
|
|
min-height: min(70vh, 680px);
|
|
align-items: center;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
border-radius: 24px;
|
|
background: var(--hero-gradient);
|
|
padding: clamp(28px, 5vw, 64px);
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.home-hero-copy {
|
|
min-width: 0;
|
|
}
|
|
|
|
.home-hero-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 18px;
|
|
color: var(--accent);
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.home-hero-panel h1 {
|
|
max-width: 720px;
|
|
margin: 0;
|
|
color: var(--foreground);
|
|
font-size: clamp(38px, 5vw, 68px);
|
|
font-weight: 820;
|
|
letter-spacing: 0;
|
|
line-height: 0.98;
|
|
}
|
|
|
|
.home-hero-panel p {
|
|
max-width: 620px;
|
|
margin: 22px 0 0;
|
|
color: var(--muted-foreground);
|
|
font-size: clamp(15px, 1.4vw, 18px);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.home-hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.home-hero-hint {
|
|
margin-top: 14px;
|
|
color: var(--muted-foreground);
|
|
font-size: 12px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.home-market-preview {
|
|
min-width: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: 22px;
|
|
background: color-mix(in oklab, var(--card) 88%, var(--background));
|
|
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
|
|
}
|
|
|
|
.home-preview-toolbar {
|
|
display: flex;
|
|
gap: 7px;
|
|
padding: 16px 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.home-preview-toolbar span {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 999px;
|
|
background: var(--border-strong);
|
|
}
|
|
|
|
.home-preview-chart {
|
|
padding: 28px 24px 16px;
|
|
}
|
|
|
|
.home-preview-chart svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.home-preview-area {
|
|
fill: color-mix(in oklab, var(--accent) 16%, transparent);
|
|
}
|
|
|
|
.home-preview-line {
|
|
fill: none;
|
|
stroke: var(--accent);
|
|
stroke-width: 7;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.home-preview-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
padding: 0 18px 18px;
|
|
}
|
|
|
|
.home-preview-stats div {
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
background: var(--card);
|
|
padding: 14px;
|
|
}
|
|
|
|
.home-preview-stats span {
|
|
display: block;
|
|
color: var(--muted-foreground);
|
|
font-size: 11px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.home-preview-stats strong {
|
|
display: block;
|
|
margin-top: 6px;
|
|
color: var(--foreground);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.home-action-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.home-action-card {
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
background: var(--card);
|
|
padding: 20px;
|
|
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
|
|
}
|
|
|
|
.home-action-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
margin-bottom: 18px;
|
|
border-radius: 12px;
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.home-action-card h2 {
|
|
margin: 0;
|
|
color: var(--foreground);
|
|
font-size: 16px;
|
|
font-weight: 780;
|
|
}
|
|
|
|
.home-action-card p {
|
|
margin: 8px 0 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.critical-alert-banner {
|
|
position: relative;
|
|
z-index: 80;
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 44px;
|
|
max-width: none;
|
|
margin: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
border: 0;
|
|
border-bottom: 1px solid color-mix(in oklab, var(--destructive) 26%, var(--border));
|
|
background: color-mix(in oklab, var(--card) 88%, var(--destructive));
|
|
color: var(--destructive);
|
|
padding: 9px 18px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
letter-spacing: 0.04em;
|
|
text-transform: none;
|
|
}
|
|
|
|
.critical-alert-banner:hover {
|
|
background: color-mix(in oklab, var(--card) 82%, var(--destructive));
|
|
color: var(--destructive);
|
|
}
|
|
|
|
.trade-plans-page > .grid {
|
|
align-items: start;
|
|
}
|
|
|
|
.trade-plans-page form {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.trade-plans-page form > section,
|
|
.trade-plans-page form > label {
|
|
display: grid;
|
|
gap: 16px;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 18px !important;
|
|
background: color-mix(in oklab, var(--card-elevated) 74%, var(--card)) !important;
|
|
padding: 20px !important;
|
|
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.trade-plans-page form > section > div:first-child,
|
|
.trade-plans-page form > label > span:first-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.trade-plans-page form section .text-sm.font-bold,
|
|
.trade-plans-page form section p.text-sm.font-bold {
|
|
color: var(--foreground);
|
|
font-size: 14px;
|
|
font-weight: 780;
|
|
}
|
|
|
|
.trade-plans-page form input,
|
|
.trade-plans-page form select,
|
|
.trade-plans-page form textarea {
|
|
width: 100%;
|
|
min-height: 40px;
|
|
border-color: var(--border) !important;
|
|
border-radius: 12px !important;
|
|
background: var(--input) !important;
|
|
color: var(--foreground) !important;
|
|
padding-inline: 12px !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.trade-plans-page form textarea {
|
|
min-height: 88px;
|
|
padding-block: 10px !important;
|
|
}
|
|
|
|
.trade-plans-page form select {
|
|
appearance: auto;
|
|
}
|
|
|
|
.trade-plans-page form input:focus,
|
|
.trade-plans-page form select:focus,
|
|
.trade-plans-page form textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent) !important;
|
|
box-shadow: 0 0 0 3px var(--ring-soft) !important;
|
|
}
|
|
|
|
.trade-plans-page form button {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.trade-plans-page form button:has(.text-sm.font-bold) {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 16px !important;
|
|
background: var(--card) !important;
|
|
padding: 18px !important;
|
|
color: var(--foreground) !important;
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
|
|
white-space: normal;
|
|
}
|
|
|
|
.trade-plans-page form button:has(.text-sm.font-bold):hover {
|
|
border-color: color-mix(in oklab, var(--accent) 48%, var(--border)) !important;
|
|
background: color-mix(in oklab, var(--accent-soft) 54%, var(--card)) !important;
|
|
}
|
|
|
|
.trade-plans-page .sticky {
|
|
border-radius: 18px !important;
|
|
}
|
|
|
|
.saved-setups-panel {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.saved-setups-header {
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border);
|
|
background: linear-gradient(180deg, var(--card), color-mix(in oklab, var(--card-elevated) 72%, var(--card)));
|
|
padding: 18px 20px;
|
|
}
|
|
|
|
.saved-setups-header h2 {
|
|
font-size: 18px;
|
|
font-weight: 820;
|
|
}
|
|
|
|
.saved-setups-header p {
|
|
margin-top: 4px;
|
|
max-width: 620px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.saved-setups-count {
|
|
display: inline-grid;
|
|
min-width: 34px;
|
|
height: 34px;
|
|
place-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: var(--muted);
|
|
color: var(--foreground);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.saved-setups-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.saved-setup-card {
|
|
display: grid;
|
|
gap: 12px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 16px !important;
|
|
background: var(--card) !important;
|
|
padding: 16px !important;
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.saved-setup-topline {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 14px;
|
|
align-items: start;
|
|
}
|
|
|
|
.saved-setup-title-block {
|
|
min-width: 0;
|
|
}
|
|
|
|
.saved-setup-asset-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.saved-setup-asset-row h3 {
|
|
margin: 0;
|
|
color: var(--foreground);
|
|
font-size: 18px !important;
|
|
font-weight: 850;
|
|
letter-spacing: 0 !important;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.saved-setup-side {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 22px;
|
|
border-radius: 999px;
|
|
padding: 0 8px;
|
|
font-size: 10px;
|
|
font-weight: 850;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.saved-setup-title-block p {
|
|
max-width: 760px;
|
|
margin: 8px 0 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 13px !important;
|
|
line-height: 1.55 !important;
|
|
}
|
|
|
|
.saved-setup-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.saved-setup-action {
|
|
min-height: 34px !important;
|
|
border-radius: 10px !important;
|
|
padding-inline: 11px !important;
|
|
font-size: 11px !important;
|
|
font-weight: 780 !important;
|
|
letter-spacing: 0.04em !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
.saved-setup-meta-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.saved-setup-meta-grid span,
|
|
.saved-setup-meta-grid button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
min-height: 24px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 999px;
|
|
background: color-mix(in oklab, var(--muted) 54%, var(--card)) !important;
|
|
color: var(--muted-foreground);
|
|
padding: 0 8px;
|
|
font-size: 10px;
|
|
font-weight: 750;
|
|
letter-spacing: 0.08em;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.saved-setup-id-chip,
|
|
.saved-setup-updated {
|
|
text-transform: none !important;
|
|
letter-spacing: 0 !important;
|
|
}
|
|
|
|
.saved-setup-timeline {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(72px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.saved-setup-step {
|
|
display: grid;
|
|
min-height: 32px;
|
|
place-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px !important;
|
|
padding: 0 8px !important;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
font-weight: 760;
|
|
line-height: 1;
|
|
}
|
|
|
|
.saved-setup-next-action {
|
|
border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
|
|
border-radius: 14px !important;
|
|
background: color-mix(in oklab, var(--accent-soft) 34%, var(--card)) !important;
|
|
color: var(--muted-foreground);
|
|
padding: 10px 12px;
|
|
font-size: 13px !important;
|
|
line-height: 1.55 !important;
|
|
}
|
|
|
|
.saved-setup-card > .mt-4.rounded-2xl.border:has(.mb-3) {
|
|
background: color-mix(in oklab, var(--muted) 62%, var(--card)) !important;
|
|
}
|
|
|
|
.markets-opportunity-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.markets-opportunity-grid > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.screener-filter-card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.screener-filter-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 1fr) minmax(150px, 180px);
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.screener-search-field {
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
.screener-search-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 10px;
|
|
color: var(--muted-foreground);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.screener-search-input {
|
|
padding-left: 32px !important;
|
|
}
|
|
|
|
.screener-filter-row input,
|
|
.screener-filter-row select {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.screener-cap-select {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.screener-sector-row {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.screener-sector-chip {
|
|
min-height: 32px !important;
|
|
border-radius: 999px !important;
|
|
padding: 0 12px !important;
|
|
font-size: 11px !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
.screener-sector-chip[data-active="true"] {
|
|
border-color: var(--accent) !important;
|
|
background: var(--accent-soft) !important;
|
|
color: var(--accent) !important;
|
|
}
|
|
|
|
.screener-more-select {
|
|
width: 150px;
|
|
border-radius: 999px !important;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.screener-more-select[data-active="true"] {
|
|
border-color: var(--accent) !important;
|
|
background: var(--accent-soft) !important;
|
|
color: var(--accent) !important;
|
|
}
|
|
|
|
.screener-results-grid {
|
|
display: grid;
|
|
grid-template-columns: 100px minmax(220px, 1fr) 90px 90px 110px 80px 110px;
|
|
align-items: center;
|
|
gap: 0;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.screener-sort-button {
|
|
justify-content: flex-start !important;
|
|
min-height: 28px !important;
|
|
padding: 0 !important;
|
|
border: 0 !important;
|
|
background: transparent !important;
|
|
color: var(--muted-foreground) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.screener-sort-icon {
|
|
margin-left: 4px;
|
|
color: var(--muted-foreground);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.screener-sort-icon[data-active="true"] {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.screener-symbol-cell,
|
|
.screener-price-cell {
|
|
color: var(--foreground);
|
|
font-weight: 750;
|
|
}
|
|
|
|
.screener-change-cell {
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.screener-change-cell.is-positive {
|
|
color: var(--bl-success);
|
|
}
|
|
|
|
.screener-change-cell.is-negative {
|
|
color: var(--bl-danger);
|
|
}
|
|
|
|
.screener-results-summary {
|
|
margin-top: 8px;
|
|
color: var(--muted-foreground);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.positions-tab,
|
|
.history-tab {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.positions-tab .tab-header,
|
|
.history-tab > div:first-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.positions-tab .tab-header h2,
|
|
.positions-tab h3,
|
|
.history-tab h2,
|
|
.history-tab h3 {
|
|
color: var(--foreground) !important;
|
|
letter-spacing: 0 !important;
|
|
}
|
|
|
|
.positions-tab .tab-header p,
|
|
.history-tab p,
|
|
.positions-tab .text-gray-400,
|
|
.positions-tab .text-gray-500,
|
|
.history-tab .text-gray-400,
|
|
.history-tab .text-gray-500 {
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
.positions-tab > header {
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
background: var(--card);
|
|
padding: 20px;
|
|
box-shadow: 0 14px 38px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.positions-tab > header > .flex {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
border-bottom-color: var(--border) !important;
|
|
}
|
|
|
|
.positions-tab .rounded-xl.border {
|
|
border-color: var(--border) !important;
|
|
background: color-mix(in oklab, var(--bl-warning-muted) 42%, var(--card)) !important;
|
|
color: color-mix(in oklab, var(--bl-warning) 72%, var(--foreground)) !important;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.positions-section,
|
|
.orders-section,
|
|
.history-tab {
|
|
min-width: 0;
|
|
}
|
|
|
|
.positions-tab section,
|
|
.positions-tab header,
|
|
.history-tab section {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.positions-section > .flex,
|
|
.orders-section > .flex {
|
|
min-width: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.positions-tab .table-container,
|
|
.history-tab .table-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow-x: auto !important;
|
|
border-color: var(--border) !important;
|
|
background: var(--card) !important;
|
|
box-shadow: 0 14px 38px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.positions-tab .pro-table,
|
|
.history-tab .pro-table {
|
|
min-width: 980px;
|
|
color: var(--foreground);
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.positions-tab .pro-table thead tr,
|
|
.history-tab .pro-table thead tr {
|
|
background: var(--muted) !important;
|
|
}
|
|
|
|
.positions-tab .pro-table th,
|
|
.history-tab .pro-table th {
|
|
color: var(--muted-foreground) !important;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.positions-tab .pro-table td,
|
|
.history-tab .pro-table td {
|
|
color: var(--foreground);
|
|
border-color: var(--border) !important;
|
|
}
|
|
|
|
.positions-tab .pro-table td > span[class*="px-"],
|
|
.history-tab .pro-table td > span[class*="px-"] {
|
|
display: inline-flex;
|
|
min-height: 24px;
|
|
align-items: center;
|
|
border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border)) !important;
|
|
border-radius: 999px !important;
|
|
background: color-mix(in oklab, var(--accent-soft) 38%, var(--card)) !important;
|
|
color: var(--foreground) !important;
|
|
padding: 0 8px !important;
|
|
font-size: 10px !important;
|
|
font-weight: 800 !important;
|
|
letter-spacing: 0 !important;
|
|
text-transform: none !important;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.positions-tab .pro-table tbody tr,
|
|
.history-tab .pro-table tbody tr {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.positions-tab .pro-table tbody tr:hover,
|
|
.history-tab .pro-table tbody tr:hover {
|
|
background: color-mix(in oklab, var(--accent-soft) 35%, transparent) !important;
|
|
}
|
|
|
|
.positions-tab .text-white,
|
|
.positions-tab .text-gray-200,
|
|
.positions-tab .text-gray-300,
|
|
.history-tab .text-white,
|
|
.history-tab .text-gray-200,
|
|
.history-tab .text-gray-300 {
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
.positions-tab .text-zinc-400,
|
|
.positions-tab .text-zinc-500,
|
|
.positions-tab .text-zinc-600,
|
|
.positions-tab .text-zinc-700,
|
|
.history-tab .text-zinc-400,
|
|
.history-tab .text-zinc-500,
|
|
.history-tab .text-zinc-600,
|
|
.history-tab .text-zinc-700 {
|
|
color: var(--muted-foreground) !important;
|
|
}
|
|
|
|
.truth-pill,
|
|
.portfolio-row-action {
|
|
display: inline-flex;
|
|
min-height: 26px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: color-mix(in oklab, var(--muted) 60%, var(--card));
|
|
color: var(--muted-foreground);
|
|
padding: 0 10px;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.truth-pill.reconciled {
|
|
border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
|
|
background: var(--bl-success-muted);
|
|
color: var(--bl-success);
|
|
}
|
|
|
|
.truth-pill.exchange {
|
|
border-color: color-mix(in oklab, var(--bl-info) 28%, var(--border));
|
|
background: var(--bl-info-muted);
|
|
color: var(--bl-info);
|
|
}
|
|
|
|
.truth-pill.db,
|
|
.truth-pill.unknown {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.portfolio-row-action {
|
|
min-height: 30px !important;
|
|
border-radius: 999px !important;
|
|
padding-inline: 10px !important;
|
|
font-size: 10px !important;
|
|
font-weight: 800 !important;
|
|
text-transform: none !important;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.positions-tab > header {
|
|
padding: 18px;
|
|
}
|
|
|
|
.positions-tab .tab-header p {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.positions-tab .rounded-xl.border {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.positions-section > .flex,
|
|
.orders-section > .flex {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.positions-tab .pro-table,
|
|
.history-tab .pro-table {
|
|
min-width: 900px;
|
|
}
|
|
}
|
|
|
|
/* Tablet should keep the side navigation. Only true phone widths use footer nav. */
|
|
@media (min-width: 561px) and (max-width: 1023px) {
|
|
.dashboard-shell {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.dashboard-main {
|
|
margin-left: 88px;
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 24px 20px 36px;
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
display: none !important;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
top: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 88px;
|
|
height: auto;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 16px 8px;
|
|
border-top: 0;
|
|
border-right: 1px solid var(--border);
|
|
overflow-x: visible;
|
|
}
|
|
|
|
.trading-sidebar-logo {
|
|
display: grid !important;
|
|
width: 52px;
|
|
height: 52px;
|
|
margin: 0 0 18px;
|
|
padding: 0;
|
|
}
|
|
|
|
.trading-sidebar-avatar {
|
|
display: grid !important;
|
|
width: 44px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.trading-sidebar-nav {
|
|
flex: 1;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.trading-sidebar-link {
|
|
width: 68px;
|
|
min-width: 68px;
|
|
min-height: 58px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 0;
|
|
}
|
|
|
|
.trading-sidebar-link span {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.trading-header {
|
|
margin: 12px 12px 0;
|
|
}
|
|
|
|
.trading-header-search {
|
|
width: min(100%, 330px) !important;
|
|
}
|
|
|
|
.trading-header-indices {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Final chrome overrides: keep navigation, alerts, content, and assistant from colliding. */
|
|
@media (max-width: 1279px) {
|
|
.dashboard-main {
|
|
margin-left: var(--trading-shell-tablet-sidebar-width);
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
--trading-shell-right-panel-width: 300px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 561px) and (max-width: 1023px) {
|
|
.dashboard-shell {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.dashboard-main {
|
|
margin-left: var(--trading-shell-tablet-sidebar-width);
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 24px 20px 36px;
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
display: none !important;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
top: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: var(--trading-shell-tablet-sidebar-width);
|
|
height: auto;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 16px 8px;
|
|
border-top: 0;
|
|
border-right: 1px solid var(--border);
|
|
overflow-x: visible;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
:root {
|
|
--trading-assistant-bottom: calc(var(--trading-shell-bottom-nav-height) + 18px);
|
|
--trading-assistant-right: 16px;
|
|
}
|
|
|
|
.critical-alert-banner {
|
|
min-height: 52px;
|
|
padding: 8px 16px;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.dashboard-shell {
|
|
padding-bottom: var(--trading-shell-bottom-nav-height);
|
|
}
|
|
|
|
.dashboard-main {
|
|
margin-left: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 18px 16px calc(var(--trading-shell-bottom-nav-height) + 28px);
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
display: none !important;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
width: 100%;
|
|
min-height: var(--trading-shell-bottom-nav-height);
|
|
height: var(--trading-shell-bottom-nav-height);
|
|
top: auto;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
padding: 0 max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-right));
|
|
border-right: 0;
|
|
border-top: 1px solid var(--border);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.trading-sidebar-nav {
|
|
flex: 0 1 auto;
|
|
flex-direction: row;
|
|
width: auto;
|
|
max-width: 100%;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
}
|
|
|
|
.trading-sidebar-link {
|
|
width: 68px;
|
|
min-width: 68px;
|
|
}
|
|
}
|
|
|
|
/* Central shell sizing shared by the final breakpoint rules below. */
|
|
@media (max-width: 1279px) {
|
|
.dashboard-main {
|
|
margin-left: var(--trading-shell-tablet-sidebar-width);
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
--trading-shell-right-panel-width: 300px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 561px) and (max-width: 1023px) {
|
|
.dashboard-shell {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.dashboard-main {
|
|
margin-left: var(--trading-shell-tablet-sidebar-width);
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 24px 20px 36px;
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
display: none !important;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
top: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: var(--trading-shell-tablet-sidebar-width);
|
|
height: auto;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 16px 8px;
|
|
border-top: 0;
|
|
border-right: 1px solid var(--border);
|
|
overflow-x: visible;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
:root {
|
|
--trading-assistant-bottom: calc(var(--trading-shell-bottom-nav-height) + 18px);
|
|
--trading-assistant-right: 16px;
|
|
}
|
|
|
|
.critical-alert-banner {
|
|
min-height: 52px;
|
|
padding: 8px 16px;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.dashboard-shell {
|
|
padding-bottom: var(--trading-shell-bottom-nav-height);
|
|
}
|
|
|
|
.dashboard-main {
|
|
margin-left: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 18px 16px calc(var(--trading-shell-bottom-nav-height) + 28px);
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
display: none !important;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
width: 100%;
|
|
min-height: var(--trading-shell-bottom-nav-height);
|
|
height: var(--trading-shell-bottom-nav-height);
|
|
top: auto;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
padding: 0 max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-right));
|
|
border-right: 0;
|
|
border-top: 1px solid var(--border);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.trading-sidebar-nav {
|
|
flex: 0 1 auto;
|
|
flex-direction: row;
|
|
width: auto;
|
|
max-width: 100%;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
}
|
|
|
|
.trading-sidebar-link {
|
|
width: 68px;
|
|
min-width: 68px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.markets-opportunity-grid,
|
|
.screener-filter-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1279px) {
|
|
.dashboard-main {
|
|
margin-left: 88px;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
width: 88px;
|
|
align-items: center;
|
|
padding-inline: 8px;
|
|
}
|
|
|
|
.trading-sidebar-logo {
|
|
width: 52px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.trading-sidebar-brand {
|
|
display: none;
|
|
}
|
|
|
|
.trading-sidebar-link {
|
|
width: 68px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 0;
|
|
}
|
|
|
|
.trading-sidebar-link span {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.trading-sidebar-avatar {
|
|
width: 44px;
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
width: 300px;
|
|
min-width: 300px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.home-hero-panel {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.dashboard-main {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 20px 16px 28px;
|
|
}
|
|
|
|
.trading-header {
|
|
margin: 10px 10px 0;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
width: 100%;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.trading-sidebar-link {
|
|
width: 68px;
|
|
min-width: 68px;
|
|
}
|
|
|
|
.home-hero-panel {
|
|
min-height: auto;
|
|
padding: 28px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.home-action-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.home-hero-panel {
|
|
padding: 22px;
|
|
}
|
|
|
|
.home-market-preview {
|
|
display: none;
|
|
}
|
|
|
|
.home-action-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 561px) and (max-width: 1023px) {
|
|
.dashboard-shell {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.dashboard-main {
|
|
margin-left: 88px;
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 24px 20px 36px;
|
|
}
|
|
|
|
.dashboard-right-panel {
|
|
display: none !important;
|
|
}
|
|
|
|
.trading-sidebar {
|
|
top: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 88px;
|
|
height: auto;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 16px 8px;
|
|
border-top: 0;
|
|
border-right: 1px solid var(--border);
|
|
overflow-x: visible;
|
|
}
|
|
|
|
.trading-sidebar-logo {
|
|
display: grid !important;
|
|
width: 52px;
|
|
height: 52px;
|
|
margin: 0 0 18px;
|
|
padding: 0;
|
|
}
|
|
|
|
.trading-sidebar-avatar {
|
|
display: grid !important;
|
|
width: 44px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.trading-sidebar-nav {
|
|
flex: 1;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
.trading-sidebar-link {
|
|
width: 68px;
|
|
min-width: 68px;
|
|
min-height: 58px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 0;
|
|
}
|
|
|
|
.trading-sidebar-link span {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.trading-header {
|
|
margin: 12px 12px 0;
|
|
}
|
|
|
|
.trading-header-search {
|
|
width: min(100%, 330px) !important;
|
|
}
|
|
|
|
.trading-header-indices {
|
|
display: none !important;
|
|
}
|
|
}
|