/* Biz QuantScreen - Professional finance theme (moomoo style) */
:root {
    --bg-primary: #f7f8fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f2f3f6;
    --border: #e6e8ed;
    --border-light: #f0f1f5;
    --text-primary: #1a1d2e;
    --text-secondary: #4a4f6a;
    --text-muted: #8b90a5;
    --accent-primary: #6366f1;
    --accent-primary-hover: #4f46e5;
    --accent-primary-light: rgba(99, 102, 241, 0.08);
    --accent-blue: #3b82f6;
    --accent-green: #00b894;
    --accent-red: #e74c3c;
    --accent-yellow: #f59e0b;
    --accent-purple: #8b5cf6;
    --nav-bg: #1e2235;
    --nav-text: rgba(255,255,255,0.88);
    --nav-text-muted: rgba(255,255,255,0.55);
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 4px 6px rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.06);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* ── Header (dark nav bar) ── */
.top-bar {
    background: linear-gradient(135deg, #1e2235 0%, #252940 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 32px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.12);
    backdrop-filter: blur(12px);
}

.top-bar .logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.6px;
    text-shadow: 0 2px 8px rgba(99,102,241,0.2);
    transition: transform var(--transition-fast);
}

.top-bar .logo:hover {
    transform: translateY(-1px);
}

.top-bar .logo span {
    color: var(--accent-primary);
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.market-pills { display: flex; gap: 6px; }

/* ── Market dropdown (replaces pills on factor screen page) ── */
.market-selector { display: inline-flex; align-items: center; }

.market-dropdown {
    padding: 7px 32px 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: var(--nav-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M5 6L0 0h10z' opacity='0.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 9px;
    transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
    backdrop-filter: blur(8px);
    min-width: 140px;
}

.market-dropdown:hover {
    border-color: var(--accent-primary);
    background-color: rgba(99,102,241,0.10);
    box-shadow: 0 2px 8px rgba(99,102,241,0.18);
}

.market-dropdown:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.25);
}

.market-dropdown option {
    background: #1a1a2e;
    color: #f5f5f7;
}

.market-pill {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: var(--nav-text);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    backdrop-filter: blur(8px);
}

.market-pill:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(99,102,241,0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}

.market-pill.active {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    font-weight: 600;
}

/* ── Main layout ── */
.main-container { max-width: 1400px; margin: 0 auto; padding: 24px 32px; }

/* ── Controls panel ── */
.controls-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition-base);
}

.controls-panel:hover {
    box-shadow: var(--shadow-lg);
}

.control-group { display: flex; flex-direction: column; gap: 6px; }

.control-group label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.control-group select,
.control-group input[type="number"] {
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 9px 12px;
    font-size: 0.9rem;
    min-width: 140px;
    outline: none;
    transition: all var(--transition-base);
    font-weight: 500;
}

.control-group select:hover,
.control-group input[type="number"]:hover {
    border-color: #d0d2d8;
}

.control-group select:focus,
.control-group input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
    background: #fff;
}

.btn-screen {
    padding: 10px 36px;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 2px 8px rgba(99,102,241,0.2);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.btn-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.btn-screen:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.35);
}

.btn-screen:hover::before {
    opacity: 1;
}

.btn-screen:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}

.btn-screen:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: #ccc;
}

.btn-outline {
    padding: 8px 20px;
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-outline:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.12);
}

.top-bar .btn-outline {
    color: var(--nav-text-muted);
    border-color: rgba(255,255,255,0.2);
    padding: 4px 12px;
    font-size: 0.8rem;
}

.top-bar .btn-outline:hover { color: var(--accent-primary); border-color: var(--accent-primary); }

.filters-toggle {
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    transition: all var(--transition-base);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
}

.filters-toggle:hover {
    color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.advanced-filters {
    width: 100%;
    display: none;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    margin-top: 8px;
}

.advanced-filters.show {
    display: flex;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Stats bar ── */
.stats-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.stat-chip {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    font-weight: 500;
}

.stat-chip:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
    border-color: var(--accent-primary);
}

.stat-chip strong {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ── Loading ── */
.loading-overlay { display: none; text-align: center; padding: 60px 20px; }
.loading-overlay.show { display: block; }

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(99,102,241,0.1);
    border-top-color: var(--accent-primary);
    border-right-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin: 0 auto 20px;
    box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Results table ── */
.results-container {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.results-container.show {
    display: block;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.results-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.results-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.results-container table { width: 100% !important; border-collapse: collapse; }

.results-container thead th {
    background: var(--bg-primary) !important;
    color: var(--text-muted) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 14px 16px !important;
    border-bottom: 2px solid var(--border) !important;
    white-space: nowrap;
}

.results-container tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-weight: 500;
}

.results-container tbody tr {
    transition: all var(--transition-fast);
    cursor: pointer;
}

.results-container tbody tr:hover {
    background: var(--bg-hover) !important;
    box-shadow: inset 3px 0 0 var(--accent-primary);
}

.results-container tbody tr:active {
    background: #e8eaef !important;
}

.ticker-cell {
    font-weight: 700;
    color: var(--accent-blue) !important;
    letter-spacing: -0.01em;
}

/* Global clickable stock ticker link */
.stock-link {
    color: var(--accent-blue);
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    transition: all var(--transition-base);
    border-bottom: 1px solid transparent;
}

.stock-link:hover {
    text-decoration: underline;
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.pct-positive {
    color: var(--accent-green) !important;
    font-weight: 600;
}

.pct-negative {
    color: var(--accent-red) !important;
    font-weight: 600;
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input {
    background: var(--bg-primary) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 7px 14px !important;
    margin-left: 8px;
    outline: none;
    transition: all var(--transition-base) !important;
    font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label {
    color: var(--text-secondary) !important;
    font-size: 0.85rem !important;
}

.dataTables_wrapper .dataTables_length select {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px 8px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
    border: 1.5px solid var(--border) !important;
    background: var(--bg-secondary) !important;
    border-radius: 7px !important;
    margin: 0 3px !important;
    padding: 5px 12px !important;
    transition: all var(--transition-base) !important;
    font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25) !important;
    font-weight: 600 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(99,102,241,0.12) !important;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { opacity: 0.4; }

/* ── Full-page detail overlay ── */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    left: var(--sn-offset, 0px); /* 避让左侧导航栏（fixed 元素不吃 body padding） */
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(2px);
    z-index: 200;
}

.modal-backdrop.show { display: block; }

.detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: var(--sn-offset, 0px); /* 避让左侧导航栏 */
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 201;
    overflow-y: auto;
    transform: translateY(30px);
    opacity: 0;
    transition: transform var(--transition-slow), opacity var(--transition-slow), left .2s ease;
}

.detail-modal.show {
    display: block;
    transform: translateY(0);
    opacity: 1;
    animation: slideUpModal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUpModal {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-header {
    padding: 16px 32px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 10;
    box-shadow: var(--shadow-sm);
}

.detail-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    font-weight: 300;
}

.detail-close:hover {
    background: var(--accent-red);
    color: #fff;
    border-color: var(--accent-red);
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 4px 12px rgba(231,76,60,0.3);
}

.detail-title .ticker-big {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.detail-title .company-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.detail-body {
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 32px;
}

/* Score banner cards */
.score-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.score-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.score-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-blue) 100%);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.score-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--accent-primary);
}

.score-card:hover::before {
    transform: scaleX(1);
}

.score-card .score-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 700;
}

.score-card .score-value {
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.score-card .score-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

/* Metrics grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 28px;
}

@media (min-width: 1200px) {
    .metrics-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 480px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.metric-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
    border-color: var(--accent-primary);
}

.metric-card .metric-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 700;
}

.metric-card .metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Chart container - LARGE */
.chart-section { margin-bottom: 28px; }

.chart-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.chart-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.chart-wrapper:hover {
    box-shadow: var(--shadow);
}

#price-chart {
    width: 100% !important;
    height: 520px !important;
}

/* F-Score details */
.f-score-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.f-score-tag {
    padding: 6px 14px;
    border-radius: 18px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1.5px solid;
    transition: all var(--transition-base);
}

.f-score-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Company description */
.company-desc {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 24px;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-secondary);
    max-height: 250px;
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
    font-weight: 500;
}

.company-desc::-webkit-scrollbar {
    width: 8px;
}

.company-desc::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

.company-desc::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
    transition: background var(--transition-base);
}

.company-desc::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* Tags */
.tag-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.tag {
    padding: 6px 14px;
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
    transition: all var(--transition-base);
}

.tag:hover {
    transform: translateY(-1px);
    border-color: var(--accent-primary);
    box-shadow: 0 2px 6px rgba(99,102,241,0.12);
}

/* Two-column layout for detail */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.detail-full { grid-column: 1 / -1; }

/* ── Language toggle ── */
.lang-toggle {
    display: flex;
    gap: 4px;
    margin-left: 16px;
    flex-shrink: 0;
}

.lang-select {
    padding: 5px 28px 5px 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: var(--nav-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    font-weight: 500;
    backdrop-filter: blur(4px);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.lang-select:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.lang-select option {
    background: #1c1e26;
    color: #eee;
}

.lang-btn {
    padding: 5px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: var(--nav-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all var(--transition-base);
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.lang-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(99,102,241,0.1);
    transform: translateY(-1px);
}

.lang-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25);
    font-weight: 600;
}

/* ── Watchlist section ── */
.watchlist-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 24px;
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.watchlist-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.watchlist-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.watchlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 20px 24px;
}

.watchlist-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px;
    position: relative;
    transition: all var(--transition-base);
}

.watchlist-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--accent-primary);
}

.watchlist-card .wl-ticker {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.watchlist-card .wl-name {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watchlist-card .wl-prices {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 0.82rem;
}

.watchlist-card .wl-prices .wl-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.watchlist-card .wl-prices .wl-val {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.watchlist-pnl {
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.watchlist-pnl.positive {
    background: rgba(0,184,148,0.12);
    color: var(--accent-green);
    border: 1px solid rgba(0,184,148,0.2);
}

.watchlist-pnl.negative {
    background: rgba(231,76,60,0.12);
    color: var(--accent-red);
    border: 1px solid rgba(231,76,60,0.2);
}

.watchlist-pnl.neutral {
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.watchlist-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    background: linear-gradient(180deg, transparent 0%, rgba(99,102,241,0.02) 100%);
}

.remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    line-height: 1;
    opacity: 0.6;
}

.remove-btn:hover {
    background: var(--accent-red);
    color: #fff;
    border-color: var(--accent-red);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(231,76,60,0.3);
    opacity: 1;
}

.refresh-btn {
    padding: 7px 18px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.refresh-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.12);
}

.refresh-btn:active {
    transform: translateY(0);
}

/* Add-to-watchlist button in table and modal */
.add-to-watchlist {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--accent-blue);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    line-height: 1;
    padding: 0;
}

.add-to-watchlist:hover {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}

.add-to-watchlist.added {
    background: var(--accent-green);
    color: #fff;
    border-color: var(--accent-green);
    cursor: default;
    box-shadow: 0 2px 8px rgba(0,184,148,0.25);
}

.add-to-watchlist.added:hover {
    transform: none;
}

.btn-add-compare {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--accent-blue);
    background: transparent;
    color: var(--accent-blue);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn-add-compare:hover {
    background: var(--accent-blue);
    color: #fff;
}

.btn-add-compare.added {
    background: var(--accent-green);
    color: #fff;
    border-color: var(--accent-green);
    cursor: default;
}

/* Detail header buttons group */
.detail-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Hamburger button — hidden on desktop ── */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .menu-toggle { display: block; }

    .top-bar { padding: 8px 16px; height: auto; position: relative; }
    .top-bar-left { flex: 1; }

    .top-bar-right {
        flex-wrap: nowrap;
        gap: 0;
        align-items: center;
    }

    .main-nav, .lang-toggle, .auth-area {
        display: none !important;
    }

    .top-bar-right.open .main-nav,
    .top-bar-right.open .lang-toggle,
    .top-bar-right.open .auth-area {
        display: flex !important;
    }

    .top-bar-right.open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--nav-bg);
        padding: 12px 16px;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    .top-bar-right.open .main-nav {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .top-bar-right.open .nav-link {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        width: 100%;
    }

    .top-bar-right.open .lang-toggle,
    .top-bar-right.open .auth-area {
        padding: 12px 16px;
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .main-container { padding: 16px; }
    .controls-panel { padding: 16px; }
    .detail-body { padding: 16px; }
    .detail-grid { grid-template-columns: 1fr; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    #price-chart { height: 280px !important; }
    .watchlist-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Top bar layout for navigation ── */
.top-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.main-nav {
    display: flex;
    gap: 4px;
}

.nav-link {
    padding: 7px 16px;
    border-radius: 7px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--nav-text);
    text-decoration: none;
    transition: all var(--transition-base);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

.nav-link.active {
    color: var(--accent-primary);
    font-weight: 600;
    background: rgba(99,102,241,0.15);
    box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}

.auth-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-username {
    font-size: 0.85rem;
    color: var(--nav-text);
    font-weight: 500;
}

.btn-sm {
    padding: 4px 12px !important;
    font-size: 0.8rem !important;
}

/* ── Flash messages ── */
.flash-messages {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 32px;
}

.flash-msg {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-weight: 500;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flash-success {
    background: rgba(0,184,148,0.1);
    color: var(--accent-green);
    border-color: var(--accent-green);
    box-shadow: 0 2px 8px rgba(0,184,148,0.12);
}

.flash-error {
    background: rgba(231,76,60,0.1);
    color: var(--accent-red);
    border-color: var(--accent-red);
    box-shadow: 0 2px 8px rgba(231,76,60,0.12);
}

.flash-warning {
    background: rgba(245,158,11,0.1);
    color: var(--accent-yellow);
    border-color: var(--accent-yellow);
    box-shadow: 0 2px 8px rgba(245,158,11,0.12);
}

.flash-info {
    background: rgba(59,130,246,0.1);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow: 0 2px 8px rgba(59,130,246,0.12);
}

/* ── Auth pages ── */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60px);
    padding: 40px 20px;
    background: radial-gradient(circle at top right, rgba(99,102,241,0.03) 0%, transparent 50%),
                radial-gradient(circle at bottom left, rgba(59,130,246,0.03) 0%, transparent 50%);
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 48px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-xl);
    position: relative;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-blue) 100%);
    border-radius: var(--radius) var(--radius) 0 0;
}

.auth-card h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 32px;
    text-align: center;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.auth-error {
    background: rgba(239,68,68,0.1);
    color: var(--accent-red);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    margin-bottom: 16px;
    border: 1px solid rgba(239,68,68,0.2);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    outline: none;
    transition: all var(--transition-base);
}

.form-group input:hover {
    border-color: #d0d2d8;
}

.form-group input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
    background: #fff;
}

.auth-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.auth-link a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-base);
}

.auth-link a:hover {
    border-bottom-color: var(--accent-blue);
}

/* ── Admin tabs ── */
.admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}

.admin-tab {
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-base);
}

.admin-tab:hover {
    color: var(--accent-primary);
}

.admin-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* ── Admin ── */
.admin-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-section h3 {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    background: var(--bg-primary);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.admin-table td {
    padding: 12px 16px;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-light);
}

.btn-approve {
    padding: 6px 18px;
    background: linear-gradient(135deg, #00b894 0%, #00d2a0 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 8px;
    transition: all var(--transition-base);
    box-shadow: 0 2px 6px rgba(0,184,148,0.2);
}

.btn-approve:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,184,148,0.3);
}

.btn-approve:active {
    transform: translateY(0);
}

.btn-reject {
    padding: 6px 18px;
    background: linear-gradient(135deg, #e74c3c 0%, #ec5b4e 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 2px 6px rgba(231,76,60,0.2);
}

.btn-reject:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231,76,60,0.3);
}

.btn-reject:active {
    transform: translateY(0);
}

/* ── Pending notice ── */
.pending-notice {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    border-left: 4px solid var(--accent-yellow);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-top: 24px;
    text-align: center;
    color: var(--accent-yellow);
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(245,158,11,0.1);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dashboard ── */
.dash-loading {
    text-align: center;
    padding: 80px 20px;
}

.dash-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.summary-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(99,102,241,0.05) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
}

.summary-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--accent-primary);
}

.summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-weight: 700;
}

.summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.summary-sub {
    font-size: 0.9rem;
    margin-top: 6px;
    font-weight: 600;
}

.pnl-card.pnl-positive .summary-value,
.pnl-card.pnl-positive .summary-sub { color: var(--accent-green); }

.pnl-card.pnl-negative .summary-value,
.pnl-card.pnl-negative .summary-sub { color: var(--accent-red); }

.dash-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.dash-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition-base);
}

.dash-chart-card:hover {
    box-shadow: var(--shadow-lg);
}

.dash-chart-card h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.dash-chart-card.full-width { grid-column: 1 / -1; }

.dash-trend { margin-bottom: 24px; }

.dash-holdings {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.dash-empty {
    text-align: center;
    padding: 100px 20px;
    color: var(--text-muted);
    font-size: 1.05rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.dash-empty a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-base);
}

.dash-empty a:hover {
    border-bottom-color: var(--accent-blue);
}

/* ── Logo as link ── */
a.logo {
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

a.logo span { color: var(--accent-primary); font-weight: 700; }

/* ── Community ── */
.comm-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    max-width: 400px;
}

.comm-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.comm-section-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.comm-section-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.comm-section-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.comm-hot-table {
    width: 100%;
    border-collapse: collapse;
}

.comm-hot-table th {
    background: var(--bg-primary);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.comm-hot-table td {
    padding: 10px 16px;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border-light);
}

.comm-hot-table .rank-cell {
    font-weight: 700;
    color: var(--accent-blue);
    width: 50px;
    text-align: center;
}

.comm-hot-table .ticker-cell {
    font-weight: 700;
    color: var(--accent-blue);
}

.comm-hot-table .holders-cell {
    font-weight: 600;
    color: var(--accent-purple);
}

.comm-user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
    padding: 20px 24px;
}

.comm-user-card.expanded {
    grid-column: 1 / -1;
}

.comm-user-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: all var(--transition-base);
}

.comm-user-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--accent-primary);
}

.comm-user-card .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Community Card Summary (new design) ── */
.comm-card-summary {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: background var(--transition-base);
}

.comm-card-summary:hover {
    background: var(--bg-hover);
}

.comm-card-left {
    flex: 1;
    min-width: 0;
}

.comm-card-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.comm-portfolio-return {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.comm-portfolio-return.positive {
    color: var(--accent-green);
}

.comm-portfolio-return.negative {
    color: var(--accent-red);
}

.comm-days-label {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 8px;
}

.comm-top-holdings {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.comm-top-holding {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
}

.comm-top-ticker {
    font-weight: 600;
    color: var(--accent-blue);
    min-width: 50px;
}

.comm-top-name {
    color: var(--text-muted);
    font-size: 0.75rem;
    min-width: 60px;
}

.comm-top-pct {
    color: var(--text-secondary);
    font-size: 0.75rem;
    min-width: 40px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-top-ret {
    font-weight: 600;
    font-size: 0.8rem;
}

.comm-top-ret.positive {
    color: var(--accent-green);
}

.comm-top-ret.negative {
    color: var(--accent-red);
}

.comm-card-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ── Donut Chart ── */
.comm-donut-wrap {
    position: relative;
    width: 68px;
    height: 68px;
}

.comm-donut {
    width: 68px;
    height: 68px;
    border-radius: 50%;
}

.comm-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.comm-donut-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-primary);
}

.comm-avatar-initials {
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-weight: 700;
    user-select: none;
    border: 2px solid var(--bg-primary);
}

.comm-toggle-icon {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform var(--transition-base);
}

.comm-user-card.expanded .comm-toggle-icon {
    transform: rotate(180deg);
}

.comm-user-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.comm-loading-state {
    padding: 40px 20px;
    text-align: center;
}

.comm-loading-state .loading-text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── Community Pagination ── */
.comm-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px;
    flex-wrap: wrap;
}

.page-btn {
    padding: 7px 14px;
    border: 1.5px solid var(--border);
    background: var(--bg-secondary);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.page-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.page-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.page-info {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 12px;
}

.comm-username {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.comm-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
}

.comm-items-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.comm-items-table th {
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
}

.comm-items-table td {
    padding: 8px 12px;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

.comm-items-table td:nth-child(2) {
    white-space: normal;
    min-width: 120px;
    max-width: 220px;
}

.comm-items-table .ticker-cell {
    font-weight: 700;
    color: var(--accent-blue);
}
.positive { color: var(--accent-green); }
.negative { color: var(--accent-red); }

.market-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.market-tag.usa {
    background: rgba(59,130,246,0.12);
    color: var(--accent-blue);
    border: 1px solid rgba(59,130,246,0.2);
}

.market-tag.hkex {
    background: rgba(231,76,60,0.12);
    color: var(--accent-red);
    border: 1px solid rgba(231,76,60,0.2);
}

.market-tag.tse {
    background: rgba(0,184,148,0.12);
    color: var(--accent-green);
    border: 1px solid rgba(0,184,148,0.2);
}

/* ── Contact banner (manual page) ── */
.contact-banner {
    background: linear-gradient(135deg, rgba(99,102,241,0.02) 0%, rgba(59,130,246,0.02) 100%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.contact-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(40%, -40%);
}

.contact-intro h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--accent-primary);
    letter-spacing: -0.02em;
}

.contact-intro p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 20px;
    font-weight: 500;
}

.contact-qr-row {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.contact-qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.contact-qr-img {
    width: 140px;
    height: 140px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    object-fit: contain;
    background: #fff;
    padding: 6px;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.contact-qr-img:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
    border-color: var(--accent-primary);
}

.contact-qr-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

@media (max-width: 768px) {
    .dash-summary { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .dash-charts { grid-template-columns: 1fr; }
    .comm-user-grid { grid-template-columns: 1fr; }
    .contact-qr-row { gap: 20px; justify-content: center; }
    .contact-qr-img { width: 110px; height: 110px; }
    .auth-card { padding: 32px 24px; }
    .summary-card { padding: 20px; }
    .score-card { padding: 16px; }
    .top-bar { height: auto; min-height: 56px; }
}

/* ── Japanese language compact nav ── */
body[data-lang="ja"] .nav-link {
    padding: 6px 10px;
    font-size: 0.78rem;
}

body[data-lang="ja"] .main-nav {
    gap: 2px;
}

body[data-lang="ja"] .market-pill {
    padding: 4px 10px;
    font-size: 0.78rem;
}

/* ── Chart period selector ── */
.chart-period-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.chart-period-btn {
    padding: 6px 16px;
    border-radius: 18px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.chart-period-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-light);
    transform: translateY(-1px);
}

.chart-period-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}

/* ── Tier stars ── */
.tier-stars {
    color: #f59e0b;
    font-size: 0.75rem;
    margin-left: 4px;
    letter-spacing: 1px;
}

/* ── Score badges (buy score + sell signal) ── */
.score-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    text-align: center;
    min-width: 36px;
}
.score-high { background: rgba(0,184,148,0.15); color: var(--accent-green); }
.score-mid { background: rgba(245,158,11,0.15); color: var(--accent-yellow); }
.score-low { background: rgba(231,76,60,0.15); color: var(--accent-red); }
.signal-safe { background: rgba(0,184,148,0.15); color: var(--accent-green); }
.signal-warn { background: rgba(245,158,11,0.15); color: var(--accent-yellow); }
.signal-danger { background: rgba(231,76,60,0.15); color: var(--accent-red); }

/* ── Proof images ── */
.proof-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 1px solid var(--border);
    transition: transform 0.15s;
}
.proof-thumb:hover { transform: scale(1.1); }

.proof-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
}
.proof-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
}

/* ── Publish button ── */
.publish-btn {
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid var(--accent-blue);
    background: rgba(59,130,246,0.08);
    color: var(--accent-blue);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.publish-btn:hover { background: rgba(59,130,246,0.15); }
.publish-btn.published {
    border-color: var(--accent-green);
    color: var(--accent-green);
    background: rgba(0,184,148,0.08);
    cursor: default;
}

/* ══ Search & Compare ══ */
.search-container {
    margin-bottom: 16px;
}

.search-box {
    display: flex;
    gap: 8px;
    max-width: 480px;
}

.search-input {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    outline: none;
    transition: all var(--transition-base);
}

.search-input:hover {
    border-color: #d0d2d8;
}

.search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
    background: #fff;
}

.search-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Compare section */
.compare-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.compare-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.compare-header h3 {
    font-size: 1rem;
    font-weight: 700;
}

.compare-actions {
    display: flex;
    gap: 8px;
}

.compare-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px;
}

.compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.82rem;
    transition: all var(--transition-base);
}

.compare-chip:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 6px rgba(99,102,241,0.12);
}

.chip-ticker {
    font-weight: 700;
    color: var(--accent-blue);
}

.chip-name {
    color: var(--text-muted);
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-remove {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(231,76,60,0.1);
    color: var(--accent-red);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    padding: 0;
    line-height: 1;
}

.chip-remove:hover {
    background: var(--accent-red);
    color: #fff;
}

.compare-table-wrap {
    overflow-x: auto;
    padding: 0 24px 24px;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 500px;
}

.compare-table th {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 2px solid var(--border);
    background: var(--bg-primary);
}

.compare-th-ticker {
    font-weight: 700;
    color: var(--accent-blue);
    font-size: 0.95rem;
}

.compare-th-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.compare-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.compare-metric-label {
    text-align: left !important;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.compare-table tbody tr:hover {
    background: var(--bg-hover);
}

/* Mobile responsive for search & compare */
@media (max-width: 768px) {
    .search-box {
        max-width: 100%;
    }
    .compare-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .compare-chips {
        padding: 12px 16px;
    }
    .compare-table-wrap {
        padding: 0 16px 16px;
    }
}

/* ══════════════════════════════════════════
   Settings Page (需求1)
   ══════════════════════════════════════════ */

.settings-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 32px;
}

.settings-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-card h3 {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.settings-card-body {
    padding: 24px;
}

.settings-info-table {
    width: 100%;
    border-collapse: collapse;
}

.settings-info-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
}

.settings-info-table td:first-child {
    font-weight: 600;
    color: var(--text-muted);
    width: 120px;
    font-size: 0.85rem;
}

.settings-info-table td:last-child {
    font-weight: 500;
    color: var(--text-primary);
}

.settings-info-table tr:last-child td {
    border-bottom: none;
}

.settings-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: -8px;
    margin-bottom: 16px;
    font-style: italic;
}

.settings-form-error {
    color: var(--accent-red);
    font-size: 0.85rem;
    font-weight: 500;
    min-height: 20px;
    margin-bottom: 8px;
}

.settings-form-success {
    color: var(--accent-green);
    font-size: 0.85rem;
    font-weight: 500;
    min-height: 20px;
    margin-bottom: 8px;
}

.settings-form-actions {
    display: flex;
    justify-content: flex-end;
}

/* Auth username link in nav */
a.auth-username {
    font-size: 0.85rem;
    color: var(--nav-text);
    font-weight: 500;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 7px;
    transition: all var(--transition-base);
}

a.auth-username:hover {
    color: var(--accent-primary);
    background: rgba(99,102,241,0.15);
}

@media (max-width: 768px) {
    .settings-container {
        padding: 16px;
    }
    .settings-card-body {
        padding: 16px;
    }
    .settings-form-actions {
        justify-content: stretch;
    }
    .settings-form-actions .btn-screen {
        width: 100%;
    }
    .settings-info-table td:first-child {
        width: 80px;
    }
}

/* ══════════════════════════════════════════
   Filter Presets (需求5)
   ══════════════════════════════════════════ */

.filter-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
    width: 100%;
}

.preset-btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.preset-btn small {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-muted);
    display: block;
}

.preset-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-light);
    transform: translateY(-1px);
}

.preset-btn:hover small {
    color: var(--accent-primary);
}

.preset-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}

.preset-btn.active small {
    color: rgba(255,255,255,0.8);
}

.preset-btn.custom {
    opacity: 0.7;
    font-style: italic;
}

.preset-btn.active.custom {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-secondary);
    box-shadow: none;
    opacity: 1;
}

/* Param highlight animation for preset switch */
@keyframes paramHighlight {
    0% { background: var(--accent-primary-light); }
    100% { background: transparent; }
}

.control-group input.changed {
    animation: paramHighlight 600ms ease-out;
}

@media (max-width: 768px) {
    .preset-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    .preset-btn small {
        display: none;
    }
}

/* ══════════════════════════════════════════
   Dashboard Enhancements (需求6)
   ══════════════════════════════════════════ */

/* Editable investment card */
.summary-card-editable .investment-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.editable-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    width: 100%;
    text-align: left;
    outline: none;
    transition: all var(--transition-base);
    font-variant-numeric: tabular-nums;
    padding: 2px 0;
}

.editable-input:hover {
    border-bottom-color: var(--border);
}

.editable-input:focus {
    border-bottom-color: var(--accent-primary);
}

.editable-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.9rem;
}

.investment-save-btn {
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.investment-save-btn:hover {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,184,148,0.3);
}

.dash-chart-card .chart-wrapper {
    overflow: hidden;
}

/* Category cell in holdings table */
.category-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.category-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-tag.uncategorized {
    color: var(--text-muted);
    font-style: italic;
}

.category-edit-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    cursor: pointer;
    transition: color var(--transition-base);
    padding: 2px;
    line-height: 1;
}

.category-edit-btn:hover {
    color: var(--accent-primary);
}

/* Category dropdown */
.category-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 140px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.category-dropdown.show {
    display: block;
    animation: slideDown 200ms ease-out;
}

.category-dropdown.drop-up {
    top: auto;
    bottom: 100%;
    animation: none;
}

.category-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background var(--transition-fast);
    word-break: break-word;
    display: flex;
    align-items: center;
}

.category-option:hover {
    background: var(--bg-hover);
}

.category-option.new-category {
    color: var(--accent-blue);
    font-weight: 600;
    border-top: 1px solid var(--border-light);
}

/* ── Category action buttons ── */
.cat-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.category-option:hover .cat-actions {
    opacity: 1;
}

.cat-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--text-muted);
    line-height: 1;
}

.cat-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.cat-action-btn.cat-del:hover {
    color: var(--accent-red);
}

/* Responsive: dashboard enhancements */
@media (max-width: 768px) {
    .dash-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-charts {
        grid-template-columns: 1fr;
    }
    .editable-input {
        font-size: 1.2rem;
    }
    .category-dropdown {
        min-width: 120px;
    }
    .category-tag {
        max-width: 80px;
    }
    .category-cell {
        flex-wrap: wrap;
    }
    .comm-donut-wrap {
        width: 64px;
        height: 64px;
    }
    .comm-donut {
        width: 64px;
        height: 64px;
    }
    .comm-donut-avatar {
        width: 36px;
        height: 36px;
    }
    .comm-avatar-initials {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 16px !important;
    }
    .comm-card-summary {
        padding: 14px 16px;
        gap: 12px;
    }
    .comm-portfolio-return {
        font-size: 1.1rem;
    }
}

/* ── Avatar Settings ── */
.avatar-settings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.avatar-preview {
    width: 80px;
    height: 80px;
}

.avatar-preview .comm-donut-avatar,
.avatar-preview .comm-avatar-initials {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    font-size: 36px !important;
}

.avatar-upload-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.avatar-upload-btn {
    cursor: pointer;
    display: inline-block;
}

/* ── Watchlist Tabs ── */
.wl-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
}
.wl-tab {
    padding: 8px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s;
}
.wl-tab:hover {
    color: var(--text);
}
.wl-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

/* Followed card simplified */
.watchlist-card-followed {
    background: var(--bg-card);
    border: 1px dashed var(--border);
}
.wl-follow-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-top: 4px;
}

/* Follow button in results table */
.follow-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    vertical-align: middle;
    margin-right: 4px;
}
.follow-btn:hover {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
}
.follow-btn.followed {
    background: var(--accent-yellow);
    color: #fff;
    border-color: var(--accent-yellow);
}

/* ── Dashboard Group Tabs ── */
.group-tabs {
    display: flex;
    gap: 8px;
    padding: 8px 0 16px;
    flex-wrap: wrap;
}
.group-tab {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.group-tab:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.group-tab.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.group-tab-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 4px;
    align-self: center;
}

/* Action buttons container in results table */
.action-btns {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

/* ── Category Cards (sub-tabs) ── */
.category-cards-wrap {
    padding: 0 0 12px;
    overflow: hidden;
}
.category-cards-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.category-cards-scroll::-webkit-scrollbar {
    height: 4px;
}
.category-cards-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}
.cat-card {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.cat-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(59,108,245,0.1);
}
.cat-card.active {
    border-color: var(--accent-primary);
    background: rgba(59,108,245,0.06);
}
.cat-card-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}
.cat-card-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}
.cat-card.active .cat-card-count {
    background: var(--accent-primary);
    color: #fff;
}
.cat-card-add {
    border-style: dashed;
    color: var(--text-muted);
}
.cat-card-add .cat-card-name {
    color: var(--text-muted);
}
/* Group tab add button */
.group-tab-add {
    border-style: dashed;
    font-size: 16px;
    padding: 6px 12px;
}

/* Group tag (reuses category-cell pattern) */
.group-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-tag.uncategorized {
    color: var(--text-muted);
    font-style: italic;
}
.ccy-tag {
    display: inline-block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: 3px;
    vertical-align: middle;
}

/* Group tab inline actions */
.group-tab-actions {
    display: inline-flex;
    gap: 2px;
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.15s;
}
.group-tab:hover .group-tab-actions {
    opacity: 1;
}
.group-tab-action {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 0 2px;
    line-height: 1;
}
.group-tab-action:hover {
    color: var(--accent-primary);
}
.group-tab-del:hover {
    color: var(--accent-red);
}

/* Category checkbox option */
.cat-checkbox-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.cat-checkbox-option input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* ── Broker badge ── */
.broker-badge {
    display: inline-block;
    background: var(--accent-green);
    color: #fff;
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.comm-account-meta {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.comm-account-meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ── Quant chart page ────────────────────── */
.chart-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    background: var(--bg-primary);
}

.chart-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-wrap: wrap;
}

.chart-ticker-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.chart-select,
.chart-input {
    padding: 6px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.chart-input { width: 160px; }

.chart-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
}

.chart-btn-primary {
    background: var(--accent-primary, #ff7a00);
    color: #fff;
    border-color: transparent;
}

.chart-btn:hover { opacity: 0.9; }

.chart-periods {
    display: flex;
    gap: 2px;
    align-items: center;
}

.chart-period {
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    border-right: none;
}

.chart-period:first-child { border-radius: 4px 0 0 4px; }
.chart-period:last-child { border-radius: 0 4px 4px 0; border-right: 1px solid var(--border); }

.chart-period.active {
    background: var(--accent-primary, #ff7a00);
    color: #fff;
    border-color: transparent;
}

.chart-period-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 6px;
}

.chart-indicators {
    display: flex;
    gap: 8px;
}

.chart-ind-menu {
    position: relative;
    font-size: 0.85rem;
}

.chart-ind-menu > summary {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.chart-ind-menu > summary::-webkit-details-marker { display: none; }

.chart-ind-menu[open] > summary { background: var(--bg-tertiary, #f3f4f6); }

.chart-ind-menu[open] {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
}

.chart-ind-menu[open] > label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    min-width: 100px;
    z-index: 10;
}

.chart-ind-menu[open] > label:first-of-type { border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: none; }
.chart-ind-menu[open] > label:last-of-type { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.chart-ind-menu[open] > label:not(:last-of-type):not(:first-of-type) { border-bottom: none; }

.chart-ind-menu[open] > label:nth-of-type(2) { top: calc(100% + 2px + 31px); }
.chart-ind-menu[open] > label:nth-of-type(3) { top: calc(100% + 2px + 62px); }
.chart-ind-menu[open] > label:nth-of-type(4) { top: calc(100% + 2px + 93px); }
.chart-ind-menu[open] > label:nth-of-type(5) { top: calc(100% + 2px + 124px); }

.chart-meta {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

#chart-container {
    flex: 1;
    width: 100%;
    min-height: 400px;
}

.chart-live-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
}
.chart-live-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }

.chart-live-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e5e7eb;
    color: #6b7280;
}
.chart-live-badge.live {
    background: #10b981;
    color: #fff;
    animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.chart-source-badge {
    font-size: 0.75rem;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-secondary);
}

/* ── Backtest page ──────────────────────────────────── */
.backtest-page {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    height: calc(100vh - 80px);
    padding: 12px;
    background: var(--bg-primary);
}

.bt-left {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    overflow-y: auto;
}
.bt-left h3 { margin: 0 0 12px; font-size: 1rem; }
.bt-left hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

.bt-field { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.bt-field label { font-size: 0.8rem; color: var(--text-secondary); }
.bt-input {
    padding: 6px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.bt-strat-mode { display: flex; gap: 12px; font-size: 0.85rem; }
.bt-strat-mode label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--text-primary); }

.bt-panel { margin-top: 8px; }
.bt-code-editor {
    width: 100%;
    font-family: Menlo, Monaco, monospace;
    font-size: 0.8rem;
    padding: 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: #1e1e1e;
    color: #e5e7eb;
    box-sizing: border-box;
}
.bt-code-hint { font-size: 0.75rem; color: var(--text-secondary); margin: 6px 0 0; }

.bt-buttons { display: flex; gap: 8px; margin-top: 12px; }
.bt-buttons button { flex: 1; }

.bt-status {
    margin-top: 12px;
    padding: 8px 10px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    min-height: 32px;
}
.bt-status.error { background: #fdecea; color: #b00020; }
.bt-status.success { background: #e7f5e9; color: #1d6b2b; }
.bt-status.info { background: #eef2ff; color: #3730a3; }

.bt-right { display: flex; flex-direction: column; gap: 12px; overflow: hidden; }

.bt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.bt-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.bt-stat-card .lbl { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 4px; }
.bt-stat-card .val { font-size: 1.1rem; font-weight: 600; }
.bt-stat-card.pos .val { color: #10b981; }
.bt-stat-card.neg .val { color: #ef4444; }

.bt-charts { display: grid; grid-template-rows: 1.4fr 1fr; gap: 8px; flex: 1; min-height: 300px; }
.bt-chart-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-height: 180px;
    overflow: hidden;          /* clip klinecharts canvas overflow */
    position: relative;        /* establish stacking context */
}

.bt-trades { max-height: 200px; overflow-y: auto; background: var(--bg-card,#fff); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; position: relative; z-index: 2; }
.bt-trades h4 { margin: 0 0 8px; font-size: 0.9rem; }
#bt-trades-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
#bt-trades-table th, #bt-trades-table td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--border); }
#bt-trades-table th { font-weight: 600; color: var(--text-secondary); }
#bt-trades-table td.pos { color: #10b981; }
#bt-trades-table td.neg { color: #ef4444; }

/* ── Manual page sidebar layout ────────────────────── */
.manual-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px;
    align-items: start;
}

.manual-sidebar {
    position: sticky;
    top: 76px;                    /* below top-bar */
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 14px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.manual-toc-toggle {
    display: none;                /* visible only in mobile */
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.manual-toc { display: flex; flex-direction: column; gap: 2px; }
.manual-toc a {
    display: block;
    padding: 6px 10px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    border-radius: 5px;
    border-left: 2px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.manual-toc a:hover {
    color: var(--text-primary);
    background: rgba(100,150,255,0.06);
}
.manual-toc a.active {
    color: var(--accent-blue, #4a90e2);
    background: rgba(74,144,226,0.10);
    border-left-color: var(--accent-blue, #4a90e2);
    font-weight: 600;
}
.manual-toc a.manual-toc-highlight {
    color: var(--accent-green);
    font-weight: 600;
}
.manual-toc-divider {
    display: block;
    margin: 10px 8px 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.manual-content {
    min-width: 0;                 /* allow inner content to shrink */
    max-width: 940px;
}

.manual-content h2 {
    scroll-margin-top: 80px;      /* anchor jump compensates top-bar */
}

@media (max-width: 768px) {
    .manual-layout {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .manual-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 12px;
    }
    .manual-toc-toggle { display: block; margin-bottom: 8px; }
    .manual-toc { display: none; }
    .manual-sidebar.toc-open .manual-toc { display: flex; }
}

.btn-open-chart {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--accent-orange, #ff7a00);
    background: transparent;
    color: var(--accent-orange, #ff7a00);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}
.btn-open-chart:hover {
    background: var(--accent-orange, #ff7a00);
    color: #fff;
}

/* Next/Prev stock navigation button in detail header */
.btn-next-stock {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--accent-blue, #5b8def);
    background: transparent;
    color: var(--accent-blue, #5b8def);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}
.btn-next-stock:hover {
    background: var(--accent-blue, #5b8def);
    color: #fff;
}

/* ── Backtest advanced config ─────────────────── */
.bt-advanced { margin-top: 12px; }
.bt-advanced > summary {
    cursor: pointer;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    user-select: none;
}
.bt-advanced[open] > summary { background: var(--bg-tertiary, #f3f4f6); margin-bottom: 8px; }
.bt-hint { color: var(--text-muted); font-size: 0.7rem; font-weight: normal; }

/* ── Trade monitor page ─────────────────────────── */
.monitor-page { max-width: 1280px; margin: 0 auto; padding: 18px 16px; }
.monitor-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.monitor-header h2 { margin: 0; font-size: 1.1rem; }
.monitor-status-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.monitor-badge { padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; }
.monitor-banner { padding: 10px 14px; background: #fff7e6; color: #7c2d12; border-radius: 6px; font-size: 0.85rem; margin-bottom: 16px; border-left: 4px solid #f59e0b; }
.monitor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.monitor-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px; overflow-x: auto; }
.monitor-section-wide { grid-column: 1 / -1; }
.monitor-section h3 { margin: 0 0 10px; font-size: 0.95rem; }
.monitor-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.monitor-table th, .monitor-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.monitor-table th { font-weight: 600; color: var(--text-muted); }
.monitor-table td.pos { color: #10b981; }
.monitor-table td.neg { color: #ef4444; }
@media (max-width: 900px) { .monitor-grid { grid-template-columns: 1fr; } }

/* ── Walk-forward section ───────────────────────── */
.bt-wf-section {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.bt-wf-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.bt-wf-checkbox-label input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; }
.bt-wf-options { margin-top: 10px; }

.bt-wf-results { margin-bottom: 16px; }
.bt-wf-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.bt-wf-block h4 { font-size: 0.9rem; font-weight: 600; margin: 0 0 6px; }
.bt-wf-period { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 8px; }
.bt-wf-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-wf-stats .bt-stat-card { flex: 1 1 calc(50% - 6px); min-width: 90px; }
.bt-wf-overfit-banner {
    padding: 10px 14px;
    background: #fff7e6;
    color: #7c2d12;
    border-radius: 6px;
    font-size: 0.85rem;
    border-left: 4px solid #f59e0b;
}
@media (max-width: 700px) { .bt-wf-panels { grid-template-columns: 1fr; } }

/* ── Grid search panel ──────────────────────────── */
.bt-grid-params-list .bt-grid-param-row input { font-family: monospace; }
.bt-grid-results { margin-bottom: 16px; }
.bt-grid-results h4 { font-size: 0.9rem; font-weight: 600; margin: 0 0 8px; }
.bt-grid-table-wrap { overflow-x: auto; }
.bt-grid-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.bt-grid-table th, .bt-grid-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.bt-grid-table th { font-weight: 600; color: var(--text-muted); }
.bt-grid-table td.pos { color: #10b981; }
.bt-grid-table td.neg { color: #ef4444; }
.bt-grid-params-cell { font-family: monospace; font-size: 0.78rem; }
.bt-grid-apply { padding: 3px 10px; font-size: 0.75rem; }

/* ── Heatmap ─────────────────────────────────────────── */
.bt-heatmap-wrap { margin-top: 16px; }
.bt-heatmap { border-collapse: collapse; font-size: 0.78rem; }
.bt-heatmap th { padding: 4px 8px; background: #1e2736; color: #9ca3af; font-weight: 600; }
.bt-heatmap-cell {
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    cursor: default;
    min-width: 52px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: opacity 0.1s;
}
.bt-heatmap-cell:hover { opacity: 0.82; }

/* ── Monte Carlo results ─────────────────────────────── */
.bt-mc-results { margin-top: 20px; }
.bt-mc-interpretation {
    margin: 10px 0;
    font-size: 0.85rem;
    color: #9ca3af;
    line-height: 1.5;
}
#bt-mc-canvas { background: #111827; border-radius: 6px; display: block; }

/* ── Rolling walk-forward results ────────────────────── */
.bt-rwf-results { margin-top: 16px; }
.bt-rwf-table-wrap { overflow-x: auto; margin-top: 12px; }
#bt-rwf-table td, #bt-rwf-table th { padding: 6px 10px; font-size: 0.78rem; }
#bt-rwf-table td:last-child { text-align: center; font-size: 1rem; }

/* ── Manual Trading (Phase 2) ─────────────────────────── */
.chart-btn-trade {
    background: var(--accent-blue, #3b82f6);
    color: #fff;
    border-color: #2563eb;
}
.chart-btn-trade:hover {
    background: #2563eb;
    border-color: #1d4ed8;
}
#trade-modal {
    animation: fadeInModal 150ms ease;
}
@keyframes fadeInModal {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#trade-modal > div {
    animation: slideUpModal 180ms ease;
}
@keyframes slideUpModal {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}


/* ── AI Analysis modal ─────────────────────────────── */
.btn-ai-analysis {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid #8b5cf6;
    background: transparent;
    color: #8b5cf6;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}
.btn-ai-analysis:hover {
    background: #8b5cf6;
    color: #fff;
}

.ai-modal-card {
    background: var(--bg-card,#fff);
    border-radius: 12px;
    padding: 0;
    width: 90%;
    max-width: 760px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px rgba(0,0,0,.3);
    overflow: hidden;
}
.ai-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #fff;
}
.ai-modal-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 600; }
.ai-modal-ticker {
    background: rgba(255,255,255,0.2);
    padding: 3px 10px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9rem;
}
.ai-modal-actions { display: flex; gap: 8px; }
.ai-modal-actions .chart-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    padding: 4px 10px;
}
.ai-modal-actions .chart-btn:hover { background: rgba(255,255,255,0.3); }

.ai-modal-status {
    padding: 8px 22px;
    background: var(--bg-secondary,#f9fafb);
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    display: flex;
    gap: 10px;
    align-items: center;
}
.ai-status-text { font-weight: 500; color: var(--text-primary); }
.ai-status-text.ai-status-error { color: #b00020; }
.ai-status-meta { color: var(--text-muted); font-size: 0.8rem; }

.ai-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    line-height: 1.6;
    font-size: 0.92rem;
}
.ai-modal-body h2 { font-size: 1.1rem; margin: 16px 0 8px; color: #6366f1; }
.ai-modal-body h3 { font-size: 1rem; margin: 14px 0 6px; color: #6366f1; border-left: 3px solid #8b5cf6; padding-left: 8px; }
.ai-modal-body h4 { font-size: 0.95rem; margin: 12px 0 4px; }
.ai-modal-body p { margin: 6px 0; }
.ai-modal-body ul { margin: 4px 0; padding-left: 24px; }
.ai-modal-body li { margin: 2px 0; }
.ai-modal-body code {
    background: rgba(139,92,246,0.1);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
}
.ai-md-code {
    background: #1e1e1e;
    color: #e5e7eb;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.8rem;
    overflow-x: auto;
    margin: 8px 0;
}
.ai-modal-footer {
    padding: 10px 22px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary,#f9fafb);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
}
.ai-modal-disclaimer { color: var(--text-muted); }
#ai-modal-score b { font-size: 0.95rem; }

.ai-loading-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 40px;
}
.ai-loading-dots span {
    width: 10px; height: 10px;
    background: #8b5cf6;
    border-radius: 50%;
    animation: ai-dot-pulse 1.4s infinite ease-in-out;
}
.ai-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-dot-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

.monitor-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 12px; }
.monitor-section-header h3 { margin: 0; }

/* ── AI Analysis follow-up chat ─────────────────────── */
.ai-followup-section {
    border-top: 1px solid var(--border);
    background: var(--bg-secondary, #f9fafb);
    padding: 12px 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 40vh;
}
.ai-chat-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 28vh;
    padding-right: 4px;
}
.ai-chat-bubble {
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 88%;
    font-size: 0.88rem;
    line-height: 1.55;
    word-wrap: break-word;
}
.ai-chat-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.ai-chat-assistant {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--border);
    border-bottom-left-radius: 3px;
}
.ai-chat-assistant h3, .ai-chat-assistant h4 { font-size: 0.92rem; margin: 8px 0 4px; color: #6366f1; }
.ai-chat-assistant p { margin: 4px 0; }
.ai-chat-assistant ul { margin: 4px 0; padding-left: 22px; }
.ai-chat-assistant code { background: rgba(139,92,246,0.1); padding: 1px 5px; border-radius: 3px; }
.ai-chat-error { color: #b00020; font-style: italic; }
.ai-chat-form {
    display: flex;
    gap: 8px;
}
.ai-chat-form input {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: #fff;
    color: var(--text-primary);
}
.ai-chat-form input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}
.ai-chat-form input:disabled { background: var(--bg-secondary); color: var(--text-muted); }
.ai-chat-form button {
    padding: 8px 18px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
}
.ai-chat-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-chat-form button:hover:not(:disabled) { opacity: 0.92; }

/* ═══════════════════════════════════════════════
   Moomoo Incremental Sync — admin data page
   ═══════════════════════════════════════════════ */
.market-moomoo-sync {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f9fafb;
    padding: 12px 16px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.moomoo-sync-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.moomoo-sync-header h4 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Status badge */
.moomoo-sync-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--border);
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}

.moomoo-sync-status-badge.supported {
    background: rgba(0, 184, 148, 0.12);
    color: var(--accent-green);
}

.moomoo-sync-status-badge.running {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    animation: moomoo-pulse 1.4s ease-in-out infinite;
}

@keyframes moomoo-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.moomoo-sync-status-badge.unsupported {
    background: rgba(139, 144, 165, 0.12);
    color: var(--text-muted);
}

.moomoo-sync-status-badge.error {
    background: rgba(231, 76, 60, 0.12);
    color: var(--accent-red);
}

/* Controls row */
.moomoo-sync-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.moomoo-force-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.moomoo-force-label input[type="checkbox"] {
    accent-color: var(--accent-blue);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Progress bar */
.moomoo-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.moomoo-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.moomoo-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-green), #00cec9);
    border-radius: 4px;
    transition: width 300ms ease;
}

.moomoo-progress-text {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* Meta line */
.moomoo-sync-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* btn-outline style (reuse if already defined, otherwise define here) */
.btn-outline {
    padding: 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--accent-red);
    color: var(--accent-red);
    background: rgba(231, 76, 60, 0.06);
}

.btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════
   Claude Code panel — backtest page
   ═══════════════════════════════════════════════ */
.btai-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    width: 52px; height: 52px; border-radius: 50%;
    border: none; cursor: pointer; font-size: 1.5rem; line-height: 1;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff; box-shadow: 0 6px 20px rgba(79,70,229,.38);
    transition: transform .18s, box-shadow .18s;
}
.btai-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px rgba(79,70,229,.5); }

.btai-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 94vw;
    z-index: 950; display: flex; flex-direction: column;
    background: var(--bg-card, #fff);
    border-left: 1px solid var(--border, #e5e7eb);
    box-shadow: -8px 0 32px rgba(0,0,0,.13);
    transform: translateX(102%); transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.btai-drawer.open { transform: translateX(0); }

.btai-header {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 13px 16px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.btai-title { font-weight: 600; font-size: .96rem; }
.btai-header-actions { margin-left: auto; display: flex; gap: 4px; }
.btai-icon-btn {
    border: 1px solid var(--border, #e5e7eb); background: transparent;
    border-radius: 6px; width: 26px; height: 26px; cursor: pointer;
    color: var(--text-secondary, #555); font-size: .95rem; line-height: 1;
}
.btai-icon-btn:hover { background: rgba(0,0,0,.05); }

.btai-mode { font-size: .72rem; padding: 2px 8px; border-radius: 999px; font-weight: 600;
    background: rgba(139,144,165,.15); color: var(--text-muted, #8b90a5); }
.btai-mode.full    { background: rgba(16,185,129,.14); color: #059669; }
.btai-mode.sandbox { background: rgba(245,158,11,.16); color: #b45309; }
.btai-mode.err     { background: rgba(239,68,68,.14);  color: #dc2626; }

.btai-model {
    border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
    padding: 3px 24px 3px 8px; font-size: .76rem; font-weight: 500; cursor: pointer;
    color: var(--text-secondary, #444); background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' fill='none' stroke='%238b90a5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 6px center; background-size: 11px;
    -webkit-appearance: none; appearance: none;
}
.btai-model-wrap { min-width: 142px; height: 32px; padding-left: 9px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border,#e5e7eb); border-radius: 9px; background: #f5f5f5; color: #8a8a8a; font-size: 9px; font-weight: 700; }
.btai-model-wrap .btai-model { min-width: 0; flex: 1; height: 30px; padding-left: 2px; border: 0; background-color: transparent; color: #333; font-size: 11px; font-weight: 650; }
.btai-model:hover { border-color: #a5b4fc; }
.btai-model:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.13); }

.btai-log { flex: 1; overflow-y: auto; padding: 14px 16px; font-size: .87rem; line-height: 1.62; }
.btai-empty { color: var(--text-muted, #9aa0b4); font-size: .82rem; text-align: center; padding: 30px 10px; }
.btai-empty code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }

.btai-msg { margin-bottom: 13px; }
.btai-user {
    background: rgba(79,70,229,.09); border-left: 3px solid #6366f1;
    padding: 8px 11px; border-radius: 0 8px 8px 0; white-space: pre-wrap; word-break: break-word;
}
.btai-assistant { word-break: break-word; }
.btai-assistant p { margin: 0 0 8px; }
.btai-assistant h4, .btai-assistant h5 { margin: 12px 0 6px; font-size: .92rem; }
.btai-assistant ul { margin: 6px 0 8px; padding-left: 20px; }
.btai-assistant code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .84em; }

.btai-code { margin: 9px 0; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; overflow: hidden; }
.btai-code-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 5px 10px; background: rgba(0,0,0,.045);
    font-size: .71rem; color: var(--text-muted, #8b90a5); font-family: ui-monospace, monospace;
}
.btai-code pre {
    margin: 0; padding: 10px; overflow-x: auto; background: #0f1117; color: #e6e6e6;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .78rem; line-height: 1.5;
}
.btai-apply {
    border: none; border-radius: 5px; padding: 3px 9px; cursor: pointer;
    background: #6366f1; color: #fff; font-size: .7rem; font-weight: 600;
}
.btai-apply:hover { background: #4f46e5; }

.btai-tool {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 7px 0 3px; padding: 5px 10px; border-radius: 6px;
    background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.16);
}
.btai-tool-name { font-size: .77rem; font-weight: 600; color: #4f46e5; white-space: nowrap; }
.btai-tool-arg {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .72rem;
    color: var(--text-secondary, #555); word-break: break-all; background: none;
}
.btai-tool-result { margin: 0 0 8px 8px; }
.btai-tool-result pre {
    margin: 0; padding: 6px 9px; max-height: 190px; overflow: auto;
    background: rgba(0,0,0,.04); border-left: 2px solid rgba(99,102,241,.3); border-radius: 0 5px 5px 0;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .72rem;
    color: var(--text-secondary, #555); white-space: pre-wrap; word-break: break-word;
}
.btai-tool-result.err pre { border-left-color: #ef4444; color: #b91c1c; background: rgba(239,68,68,.05); }
.btai-err { color: #dc2626; }

.btai-dots { display: inline-flex; gap: 4px; }
.btai-dots span {
    width: 6px; height: 6px; border-radius: 50%; background: #a5b4fc;
    animation: btai-bounce 1.3s infinite ease-in-out;
}
.btai-dots span:nth-child(2) { animation-delay: .18s; }
.btai-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes btai-bounce { 0%,60%,100% { opacity:.35; transform: translateY(0); } 30% { opacity:1; transform: translateY(-4px); } }

.btai-form { border-top: 1px solid var(--border, #e5e7eb); padding: 10px 14px 12px; }
.btai-form textarea {
    width: 100%; resize: vertical; min-height: 58px;
    border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 8px 10px;
    font-family: inherit; font-size: .86rem; line-height: 1.5; box-sizing: border-box;
    background: var(--bg-input, #fff); color: var(--text-primary, #111);
}
.btai-form textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.13); }
.btai-form-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.btai-hint { font-size: .73rem; color: var(--text-muted, #9aa0b4); flex: 1; }
.btai-send {
    border: none; border-radius: 7px; padding: 7px 18px; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff;
    font-size: .84rem; font-weight: 600;
}
.btai-send:hover:not(:disabled) { opacity: .9; }
.btai-send:disabled { opacity: .45; cursor: not-allowed; }

@media (prefers-color-scheme: dark) {
    .btai-drawer { background: #171923; }
    .btai-tool-result pre { background: rgba(255,255,255,.05); }
    .btai-assistant code, .btai-empty code { background: rgba(255,255,255,.1); }
    .btai-code-bar { background: rgba(255,255,255,.06); }
}

@media (max-width: 640px) {
    .btai-drawer { width: 100vw; }
    .btai-fab { right: 14px; bottom: 14px; }
}

/* Per-user feature toggle buttons (admin users page) */
.feat-toggle {
    padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: .78rem;
    border: 1px solid var(--border, #d6dae2); background: transparent;
    color: var(--text-muted, #8b90a5); transition: all .15s;
}
.feat-toggle:hover { border-color: var(--accent-blue, #4a7dff); }
.feat-toggle.on {
    background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.4);
    color: var(--accent-green, #10b981); font-weight: 600;
}

/* Floating CLI — history list */
.btai-hist-title { font-size: .78rem; font-weight: 600; color: var(--text-muted, #8b90a5); margin-bottom: 10px; }
.btai-hist-item {
    padding: 9px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
    margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s;
}
.btai-hist-item:hover { border-color: #6366f1; background: rgba(99,102,241,.05); }
.btai-hist-t { font-size: .85rem; font-weight: 500; margin-bottom: 2px; word-break: break-all; }
.btai-hist-m { font-size: .72rem; color: var(--text-muted, #9aa0b4); font-family: ui-monospace, monospace; }

/* Floating CLI — role labels + attachment chips */
.btai-msg-wrap { margin-bottom: 14px; }
.btai-role { font-size: .72rem; font-weight: 700; margin-bottom: 4px; letter-spacing: .02em; }
.btai-role-user { color: #6366f1; }
.btai-role-ai   { color: var(--accent-green, #10b981); }
.btai-msg-wrap .btai-msg { margin-bottom: 0; }
.btai-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.btai-attachments:empty { display: none; }
.btai-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-size: .76rem;
    background: rgba(99,102,241,.09); border: 1px solid rgba(99,102,241,.25);
    color: var(--text-secondary, #444);
}
.btai-chip-x { cursor: pointer; color: var(--text-muted, #999); font-weight: 700; }
.btai-chip-x:hover { color: #ef4444; }

/* Extended-session live price badge (chart header) */
.chart-ext-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 999px; font-size: .8rem;
    background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.3);
    color: var(--text-secondary, #444); margin-left: 8px; white-space: nowrap;
}
.chart-ext-badge .ext-vol { font-size: .72rem; color: var(--text-muted, #999); }

/* Legal disclaimers — small, present, not screaming */
.btai-disclaimer, .screen-disclaimer, .bt-disclaimer, .community-disclaimer {
    font-size: .72rem; color: var(--text-muted, #9aa0b4);
    margin: 6px 0 8px; line-height: 1.5;
}
.btai-disclaimer { margin: 4px 0 6px; }

/* Multi moomoo account manager (admin/opend) */
.mm-accounts { border:1px solid var(--border,#e5e7eb); border-radius:8px; padding:14px 16px; margin:14px 0 20px; }
.mm-acc-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.mm-acc-hint { font-size:.75rem; color:var(--text-muted,#9aa0b4); }
.mm-acc-list { display:flex; flex-direction:column; gap:6px; }
.mm-acc-empty { font-size:.83rem; color:var(--text-muted,#9aa0b4); padding:8px 0; }
.mm-acc-row { display:flex; align-items:center; gap:10px; padding:8px 11px; cursor:pointer;
  border:1px solid var(--border,#e5e7eb); border-radius:7px; font-size:.85rem; flex-wrap:wrap; }
.mm-acc-row:hover { border-color:#6366f1; }
.mm-acc-row.sel { border-color:#6366f1; background:rgba(99,102,241,.07); }
.mm-acc-dot { width:8px; height:8px; border-radius:50%; background:var(--text-muted,#c3c8d4); flex:none; }
.mm-acc-dot.on { background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18); }
.mm-acc-name { font-weight:600; }
.mm-acc-meta { font-size:.73rem; color:var(--text-muted,#9aa0b4); font-family:ui-monospace,monospace; }
.mm-acc-stage { font-size:.73rem; color:var(--text-muted,#9aa0b4); margin-left:auto; }
.mm-acc-stage.on { color:#10b981; font-weight:600; }
.mm-acc-def { font-size:.7rem; padding:1px 7px; border-radius:999px; background:rgba(99,102,241,.13); color:#4f46e5; }
.mm-mini { font-size:.72rem; padding:2px 8px; border-radius:5px; cursor:pointer;
  border:1px solid var(--border,#e5e7eb); background:transparent; color:var(--text-secondary,#555); }
.mm-mini:hover { border-color:#6366f1; }
.mm-mini.danger:hover { border-color:#ef4444; color:#ef4444; }
.mm-acc-add { display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.mm-acc-add input { padding:6px 10px; border:1px solid var(--border,#e5e7eb); border-radius:6px;
  font-size:.83rem; background:var(--bg-input,#fff); color:var(--text-primary,#111); }

/* Logo mark (navbar + favicon shares the SVG) */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-mark { flex: none; border-radius: 7px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* AI drawer drag-to-resize handle */
.btai-resizer {
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    cursor: ew-resize; z-index: 5; touch-action: none;
}
.btai-resizer:hover, .btai-resizer:active { background: rgba(99,102,241,.25); }

/* Chart ticker search history chips */
.chart-history { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chart-history:empty { display: none; }
.chart-hist-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px; cursor: pointer; font-size: .78rem;
    border: 1px solid var(--border, #dfe3ea); color: var(--text-secondary, #555);
    background: var(--bg-card, #fff); transition: border-color .15s;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.chart-hist-chip:hover { border-color: #f97316; color: #f97316; }
.chart-hist-chip b { font-weight: 600; font-size: .68rem; opacity: .65; }
.chart-hist-x { font-style: normal; color: var(--text-muted, #aab); padding: 0 2px; }
.chart-hist-x:hover { color: #ef4444; }

/* ---- Dashboard paper trading section ---- */
.paper-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 10px;
    background: var(--accent-blue, #3b82f6);
    color: #fff;
    vertical-align: middle;
}
.paper-trade-link {
    font-size: 13px;
    color: var(--accent-blue, #3b82f6);
    text-decoration: none;
}
.paper-trade-link:hover { text-decoration: underline; }
.paper-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
}
.paper-summary b { color: var(--text-primary, #e2e8f0); }
.paper-empty {
    padding: 20px 0;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
}
#paper-table tbody tr, #holdings-table tbody tr { cursor: pointer; }
.paper-header-actions { display: flex; gap: 14px; align-items: center; }
.paper-reset-btn {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
}
.paper-reset-btn:hover { color: var(--accent-red, #ef4444); border-color: var(--accent-red, #ef4444); }
.paper-cancel-btn {
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.paper-cancel-btn:hover { color: var(--accent-red, #ef4444); border-color: var(--accent-red, #ef4444); }
.paper-orders-wrap { margin-top: 18px; }
.paper-orders-wrap h4 { margin-bottom: 8px; font-size: 14px; }
.paper-disclaimer {
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-muted, #64748b);
}
.paper-strategy-wrap { margin-top: 18px; }
.paper-strategy-wrap h4 { margin-bottom: 8px; font-size: 14px; }
.mon-code-link {
    color: var(--accent-blue, #3b82f6);
    text-decoration: none;
    font-weight: 600;
}
.mon-code-link:hover { text-decoration: underline; }

/* ---- Google-Finance-style chart sidebar ---- */
.chart-page-flex { flex-direction: row !important; position: relative; }
.chart-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chart-sidebar {
    width: 264px;
    flex-shrink: 0;
    border-right: 1px solid var(--border, #e6e8ed);
    background: var(--bg-card, #fff);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.chart-sidebar-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 8px;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 2;
}
.chart-sidebar-title { font-weight: 700; font-size: 16px; flex: 1; }
.cl-icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary, #5f6368);
    padding: 2px 6px;
    border-radius: 6px;
}
.cl-icon-btn:hover { background: var(--bg-secondary, #f1f3f4); }
/* ── 未审核用户提示页 ── */
.pending-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); padding: 24px; }
.pending-card {
    max-width: 460px; width: 100%; padding: 40px 36px; text-align: center;
    background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb);
    border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.06);
}
.pending-icon { font-size: 40px; margin-bottom: 12px; }
.pending-card h1 { margin: 0 0 12px; font-size: 20px; }
.pending-card p { margin: 0 0 10px; color: var(--text-secondary, #555); font-size: 13px; line-height: 1.8; }
.pending-hint { color: var(--text-muted, #999); }
.pending-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.pending-btn {
    padding: 9px 22px; border-radius: 10px; font-size: 13px; font-weight: 600;
    background: #111; color: #fff; text-decoration: none;
}
.pending-btn-ghost { background: transparent; color: var(--text-secondary, #555); border: 1px solid var(--border, #ddd); }

#cl-refresh svg { display: block; }
.cl-q-sess {
    font-style: normal; font-size: 9px; font-weight: 700; margin-right: 4px;
    padding: 0 4px; border-radius: 5px; vertical-align: 1px;
    background: rgba(99,102,241,.12); color: #6366f1;
}
#cl-refresh.cl-spinning svg { animation: clSpin .7s linear infinite; }
@keyframes clSpin { to { transform: rotate(360deg); } }
.cl-show-btn {
    position: absolute;
    left: 0;
    top: 200px;
    z-index: 20;
    border: 1px solid rgba(59,130,246,.35);
    border-left: none;
    background: rgba(59,130,246,.12);
    color: var(--accent-blue, #3b82f6);
    font-size: 15px;
    font-weight: 700;
    padding: 14px 8px;
    cursor: pointer;
    border-radius: 0 10px 10px 0;
    box-shadow: 1px 1px 6px rgba(0,0,0,.08);
}
.cl-show-btn:hover { background: rgba(59,130,246,.22); }
.cl-section { border-top: 1px solid var(--border, #eee); padding: 4px 0; }
.cl-section-head {
    display: flex;
    align-items: center;
    padding: 8px 14px 4px;
    gap: 2px;
    cursor: pointer;
    user-select: none;
}
.cl-section-name { flex: 1; font-weight: 600; font-size: 14px; }
.cl-section-head .cl-del-list { visibility: hidden; }
.cl-section-head:hover .cl-del-list { visibility: visible; }
.cl-empty { padding: 8px 16px 12px; font-size: 12.5px; color: var(--text-muted, #80868b); }
.cl-item {
    display: flex;
    align-items: center;
    padding: 8px 10px 8px 16px;
    cursor: pointer;
    gap: 8px;
}
.cl-item:hover { background: var(--bg-secondary, #f8f9fa); }
.cl-item-main { flex: 1; min-width: 0; }
.cl-item-ticker { display: block; font-weight: 600; font-size: 13.5px; }
.cl-item-name {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted, #80868b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-item-quote { text-align: right; font-size: 12.5px; }
.cl-q-price { display: block; font-weight: 600; }
.cl-q-chg { display: block; font-size: 11.5px; }
.cl-item-x {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted, #999);
    visibility: hidden;
    font-size: 14px;
}
.cl-item:hover .cl-item-x { visibility: visible; }
.cl-item-x:hover { color: var(--accent-red, #ef4444); }
.cl-add-box {
    display: flex;
    gap: 6px;
    padding: 6px 14px;
    align-items: center;
}
.cl-add-market { padding: 5px 6px; border-radius: 6px; border: 1px solid var(--border, #ddd); font-size: 12px; }
.cl-add-wrap { position: relative; flex: 1; }
.cl-add-input {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border, #ddd);
    font-size: 12.5px;
    box-sizing: border-box;
}
.cl-add-ok { padding: 5px 10px; font-size: 12px; }
.cl-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 30;
    max-height: 240px;
    overflow-y: auto;
}
.cl-suggest-row { padding: 7px 10px; cursor: pointer; font-size: 12.5px; display: flex; gap: 6px; }
.cl-suggest-row span { color: var(--text-muted, #80868b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-suggest-row:hover { background: var(--bg-secondary, #f1f3f4); }

/* star + picker popover (图2 style) */
.cl-star { font-size: 16px; padding: 6px 10px; }
.cl-star-on { color: #f59e0b; }
.cl-star-pop {
    position: absolute;
    top: 100%;
    margin-top: 6px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    padding: 14px;
    z-index: 60;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cl-pop-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.cl-pop-btn {
    border: 1px solid var(--border, #ddd);
    background: var(--bg-card, #fff);
    border-radius: 18px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
}
.cl-pop-btn:hover { background: var(--bg-secondary, #f1f3f4); }
.cl-pop-done { background: var(--accent-blue, #3b82f6); color: #fff; border-color: transparent; }
.cl-pop-done:hover { background: #2563eb; }
.chart-ticker-group { position: relative; }

/* search history dropdown */
.chart-input-wrap { position: relative; display: inline-block; }
.chart-hist-dd {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin-top: 4px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
}
.chart-hist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}
.chart-hist-row:hover { background: var(--bg-secondary, #f1f3f4); }
.chart-hist-row b { margin-right: 6px; color: var(--text-muted, #80868b); font-weight: 600; }
.chart-hist-row .chart-hist-x { color: var(--text-muted, #999); font-style: normal; padding: 0 4px; }
.chart-hist-row .chart-hist-x:hover { color: var(--accent-red, #ef4444); }
.chart-hist-none { padding: 10px 12px; font-size: 12.5px; color: var(--text-muted, #80868b); }

/* trade form favorites dropdown */
.trade-fav-dd {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    z-index: 1300;
    max-height: 260px;
    overflow-y: auto;
}
.trade-fav-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; }
.trade-fav-row:hover { background: var(--bg-secondary, #f1f3f4); }
.trade-fav-row span { flex: 1; color: var(--text-muted, #80868b); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.trade-fav-row i { font-style: normal; font-size: 11px; color: var(--text-muted, #999); }

@media (max-width: 900px) {
    .chart-sidebar { position: absolute; z-index: 40; height: 100%; box-shadow: 4px 0 20px rgba(0,0,0,.15); }
}

/* ---- shared symbol suggest dropdown ---- */
.sym-suggest-dd {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 340px;
    margin-top: 4px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
    z-index: 1400;
    max-height: 320px;
    overflow-y: auto;
}
.sym-suggest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
}
.sym-suggest-row:hover { background: var(--bg-secondary, #f1f3f4); }
.sym-suggest-row.active { background: #f1f1ef; }
.sym-suggest-label {
    padding: 9px 12px 6px;
    border-bottom: 1px solid #ececea;
    color: #969699;
    font-size: 10px;
    font-weight: 650;
}
.sym-s-main { min-width: 0; }
.sym-s-main b { display: block; font-size: 13.5px; }
.sym-s-main span {
    display: block;
    color: var(--text-muted, #80868b);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.sym-s-side { text-align: right; flex-shrink: 0; }
.sym-s-side i { display: block; font-style: normal; font-size: 10.5px; color: var(--text-muted, #999); }
.sym-s-side em { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; }
.wb-ticker-field .sym-suggest-dd { width: 100%; max-width: none; box-shadow: 0 9px 24px rgba(0,0,0,.09); }

/* ---- user color preference: red-up (CN/JP) flips gain/loss colors ---- */
body.clr-red-up .pct-positive { color: var(--accent-red, #ef4444) !important; }
body.clr-red-up .pct-negative { color: var(--accent-green, #10b981) !important; }
.clrpref-option { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 14px; }
.clrpref-demo i { font-style: normal; font-weight: 700; margin-left: 4px; }
.settings-hint { font-size: 12.5px; color: var(--text-muted, #80868b); margin-bottom: 8px; }

/* ---- AI analysis right drawer (non-blocking, pushes content) ---- */
.ai-side-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: var(--aiside-w, 440px); max-width: 94vw;
    z-index: 940; display: flex; flex-direction: column;
    background: var(--bg-card, #fff);
    border-left: 1px solid var(--border, #e5e7eb);
    box-shadow: -8px 0 32px rgba(0,0,0,.13);
    transform: translateX(102%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.ai-side-drawer.open { transform: translateX(0); }
.ai-side-drawer .ai-modal-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.ai-side-drawer .ai-modal-header { padding: 12px 16px; border-bottom: 1px solid var(--border, #e5e7eb); }
.ai-side-drawer .ai-modal-footer { padding: 10px 16px; border-top: 1px solid var(--border, #e5e7eb); }

/* page content shrinks instead of being covered */
body { transition: margin-right .26s cubic-bezier(.4,0,.2,1); }
body.aiside-open { margin-right: var(--aiside-w, 440px); }
body.btai-open { margin-right: var(--btai-w, 460px); }
@media (max-width: 768px) {
    body.aiside-open, body.btai-open { margin-right: 0; }  /* 手机上叠加显示 */
}

/* choice card */
.ai-choice-card { padding: 28px 8px; display: flex; flex-direction: column; gap: 14px; }
.ai-choice-title { font-weight: 700; font-size: 15px; }
.ai-choice-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    text-align: left; padding: 14px 16px; cursor: pointer;
    border: 1px solid var(--border, #dfe3ea); border-radius: 12px;
    background: var(--bg-card, #fff); font-size: 13px;
}
.ai-choice-btn span { color: var(--text-muted, #80868b); font-size: 12px; line-height: 1.5; }
.ai-choice-btn:hover { border-color: var(--accent-blue, #3b82f6); }
.ai-choice-primary { border-color: var(--accent-blue, #3b82f6); box-shadow: 0 0 0 1px var(--accent-blue, #3b82f6) inset; }
.ai-choice-hint { font-size: 11.5px; color: var(--text-muted, #9aa0a6); }
.mon-signal-badge {
    display: inline-block; margin-left: 8px; min-width: 18px; padding: 1px 6px;
    background: #ef4444; color: #fff; border-radius: 9px;
    font-size: 11px; text-align: center; vertical-align: middle;
}
.mon-sig-unread { background: rgba(59,130,246,.06); }
.mon-sig-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #3b82f6; margin-right: 6px; vertical-align: middle;
}
.chart-signal-wrap { position: relative; }
.chart-signal-panel {
    position: absolute; top: 100%; left: 0; margin-top: 6px;
    width: 380px; max-width: min(92vw, 420px);
    max-height: 70vh; overflow-y: auto;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ddd); border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 14px; z-index: 60;
    display: flex; flex-direction: column; gap: 10px;
}
.sig-panel-title { font-weight: 700; font-size: 13.5px; }
.sig-sym { font-weight: 400; color: var(--text-muted, #80868b); font-size: 12px; }
.sig-form { display: flex; gap: 6px; }
.sig-form select { flex: 1; min-width: 0; padding: 6px; border-radius: 6px; border: 1px solid var(--border, #ddd); font-size: 12.5px; }
.sig-form input { width: 76px; padding: 6px; border-radius: 6px; border: 1px solid var(--border, #ddd); font-size: 12.5px; }
.sig-hint { font-size: 11.5px; color: var(--text-muted, #9aa0a6); line-height: 1.5; }
.sig-msg { font-size: 12px; color: var(--accent-green, #10b981); min-height: 14px; }
.sig-running-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; min-width: 0; }
.sig-running-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sig-running-row i { font-style: normal; color: var(--text-muted, #999); font-size: 11px; flex-shrink: 0; }
.sig-running-row .sig-stop-btn {
    margin-left: auto; font-size: 11.5px; padding: 2px 10px;
    white-space: nowrap; flex-shrink: 0;
}
.sig-feed { border-top: 1px solid var(--border, #eee); padding-top: 8px; max-height: 220px; overflow-y: auto; }
.sig-feed-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.sig-feed-empty { font-size: 12px; color: var(--text-muted, #9aa0a6); }
.sig-feed-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 0; flex-wrap: wrap; }
.sig-feed-time { color: var(--text-muted, #80868b); font-size: 11px; }
.sig-feed-reason { color: var(--text-muted, #80868b); flex-basis: 100%; padding-left: 2px; font-size: 11px; }
.sig-qk-btn {
    margin-left: auto; padding: 3px 12px; border-radius: 14px; border: none;
    cursor: pointer; font-size: 12px; font-weight: 600; color: #fff;
}
.sig-qk-buy { background: var(--accent-green, #10b981); }
.sig-qk-sell { background: var(--accent-red, #ef4444); }
.sig-qk-toast { background: var(--accent-blue, #3b82f6); margin-left: 10px; }
.btai-strategy-save {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; padding: 10px 12px;
    border: 1px dashed var(--accent-blue, #3b82f6); border-radius: 10px;
    font-size: 12.5px;
}
.btai-save-btn {
    border: none; background: var(--accent-blue, #3b82f6); color: #fff;
    border-radius: 14px; padding: 5px 14px; cursor: pointer; font-size: 12.5px;
}
.btai-save-msg { font-size: 12px; color: var(--accent-green, #10b981); }
.cl-show-label {
    display: block;
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    letter-spacing: 2px;
}
.btai-send-stop { background: var(--accent-red, #ef4444) !important; }
.btai-quick { padding: 0 0 8px; }
.btai-quick-card {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    width: 100%; text-align: left; cursor: pointer;
    padding: 10px 14px; font-size: 13px;
    border: 1px solid var(--accent-blue, #3b82f6); border-radius: 12px;
    background: rgba(59,130,246,.07); color: inherit;
}
.btai-quick-card:hover { background: rgba(59,130,246,.14); }
.btai-quick-card b { font-size: 13.5px; }
.btai-quick-card span { color: var(--accent-blue, #3b82f6); font-weight: 600; }
.btai-quick-card i {
    font-style: normal; font-size: 11.5px;
    color: var(--text-muted, #80868b); flex-basis: 100%;
}
.btai-chips {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin-bottom: 14px;
}
.btai-chip {
    padding: 6px 14px; font-size: 12.5px; cursor: pointer;
    border: 1px solid var(--accent-blue, #3b82f6); border-radius: 16px;
    background: rgba(59,130,246,.07); color: inherit; white-space: nowrap;
}
.btai-chip:hover { background: rgba(59,130,246,.16); }
.btai-chip #btai-quant-sym { color: var(--accent-blue, #3b82f6); font-weight: 600; }
.bk-row { display: flex; gap: 8px; margin-top: 8px; }
.bk-row input { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border, #ddd); font-size: 13px; }

/* ---- permission notice banner ---- */
.perm-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 18px; font-size: 13px;
    background: rgba(245,158,11,.12);
    border-bottom: 1px solid rgba(245,158,11,.4);
    color: var(--text-primary, #333);
}
.perm-banner b { color: #b45309; }
.perm-banner-link { margin-left: auto; color: var(--accent-blue, #3b82f6); text-decoration: none; white-space: nowrap; }
.perm-banner-x { border: none; background: none; cursor: pointer; font-size: 16px; color: var(--text-muted, #999); }
.nav-gear { font-size: 16px; text-decoration: none; color: var(--text-secondary, #aab); padding: 2px 4px; }
.nav-gear:hover { color: var(--accent-orange, #f97316); }

/* ---- signal feed cards ---- */
.sig-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border, #e3e6ec);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-secondary, #fafbfc);
}
.sig-card-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sig-card-left .sig-feed-reason { flex-basis: auto; padding-left: 0; }
.sig-card-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sig-card-action { font-size: 15px; font-weight: 800; letter-spacing: 1px; }
.sig-card-mid .sig-feed-price { font-size: 12px; color: var(--text-secondary, #555); }
.sig-card-right { display: flex; justify-content: flex-end; }
.sig-card-right .sig-qk-btn { margin-left: 0; }
.mon-signals-pager { margin-top: 8px; font-size: 12.5px; color: var(--text-muted, #888); display: flex; align-items: center; gap: 8px; }
.mon-signals-pager .chart-btn { padding: 2px 10px; font-size: 12px; }
.mon-sigpnl-note { font-weight: 400; font-size: 11.5px; color: var(--text-muted, #999); margin-left: 10px; }

/* ---- usage notice board (every page load) ---- */
.notice-board {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(15,18,28,.62);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.notice-card {
    background: var(--bg-card, #fff);
    border-radius: 16px;
    max-width: 560px; width: 100%;
    max-height: 86vh; overflow-y: auto;
    padding: 26px 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.notice-card h3 { margin: 0 0 14px; font-size: 17px; color: #b45309; }
.notice-list { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.notice-list li { font-size: 13.5px; line-height: 1.65; }
.notice-confirm {
    width: 100%; padding: 12px;
    border: none; border-radius: 10px; cursor: pointer;
    background: var(--accent-blue, #3b82f6); color: #fff;
    font-size: 14.5px; font-weight: 600;
}
.notice-confirm:hover { background: #2563eb; }
.site-disclaimer {
    padding: 10px 18px;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-muted, #8a8f9c);
    border-top: 1px solid var(--border, #e6e8ed);
    background: var(--bg-secondary, #fafbfc);
}
.site-disclaimer a { color: var(--accent-blue, #3b82f6); text-decoration: none; margin-left: 8px; }
.site-disclaimer a:hover { text-decoration: underline; }
.btai-score-line {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border, #e3e6ec);
    border-radius: 10px;
    background: var(--bg-secondary, #fafbfc);
    font-size: 13.5px;
}
.bt-stat-card .val { overflow-wrap: anywhere; line-height: 1.35; }
.bt-stat-card.long-val .val { font-size: .8rem; letter-spacing: 0; }
.mon-strat-tag {
    background: rgba(59,130,246,.14); color: var(--accent-blue, #3b82f6);
    border-radius: 8px; padding: 1px 6px; font-size: 11px; font-weight: 600;
}
.bt-golive-pop {
    position: fixed; bottom: 90px; left: calc(20px + var(--sn-offset, 0px)); z-index: 900;
    width: 340px; max-width: 92vw;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #ddd); border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
    padding: 16px; display: flex; flex-direction: column; gap: 10px;
}

/* ── 对话工作台（/workbench）── */
.wb-wrap {
    display: grid; grid-template-columns: 300px 1fr; gap: 18px;
    max-width: 1280px; margin: 0 auto; padding: 20px 16px;
    align-items: start;
}
.wb-skills h3 { margin: 0 0 4px; font-size: 1.02rem; }
.wb-skills-hint { font-size: .78rem; color: var(--text-muted, #888); margin: 0 0 12px; }
.wb-card {
    border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
    padding: 13px 14px; margin-bottom: 10px; cursor: pointer;
    background: var(--bg-card, #fff);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.wb-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99,102,241,.12);
}
.wb-card-title { font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.wb-card-desc { font-size: .8rem; color: var(--text-secondary, #555); line-height: 1.5; }
.wb-card-steps { margin: 8px 0 0; padding-left: 18px; font-size: .76rem; color: var(--text-muted, #888); }
.wb-card-steps li { margin: 2px 0; }

/* 抽屉在工作台页转为内嵌主体 */
body.wb-page .btai-fab { display: none; }
body.wb-page .wb-chat .btai-drawer {
    position: static; transform: none; width: auto; max-width: none;
    height: calc(100vh - 175px); min-height: 540px;
    border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
body.wb-page .wb-chat .btai-resizer,
body.wb-page .wb-chat #btai-close { display: none; }

@media (max-width: 860px) {
    .wb-wrap { grid-template-columns: 1fr; }
    .wb-skills { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
    .wb-skills h3, .wb-skills-hint { display: none; }
    .wb-card { min-width: 230px; flex-shrink: 0; margin-bottom: 0; }
    body.wb-page .wb-chat .btai-drawer { height: calc(100vh - 300px); min-height: 440px; }
}

/* ── 移动端底部导航 ── */
.bottom-nav { display: none; }
@media (max-width: 860px) {
    .bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
        background: var(--bg-card, #fff);
        border-top: 1px solid var(--border, #e5e7eb);
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
        backdrop-filter: blur(10px);
    }
    .bn-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        font-size: .68rem; color: var(--text-muted, #888); text-decoration: none;
    }
    .bn-item:hover, .bn-item:active { color: var(--accent-primary); }
    .bn-ico { font-size: 1.15rem; line-height: 1; }
    body { padding-bottom: 64px; }
    .site-disclaimer { margin-bottom: 56px; }
}

/* ── 左侧可收缩导航 ── */
.side-nav { display: none; }
@media (min-width: 861px) {
    body.has-sidenav { --sn-offset: 232px; padding-left: var(--sn-offset); }
    body.has-sidenav.sn-collapsed { --sn-offset: 68px; }
    .side-nav {
        display: flex; flex-direction: column;
        position: fixed; left: 0; top: 0; bottom: 0; width: 232px; z-index: 960;
        background: var(--bg-card, #fff);
        border-right: 1px solid var(--border, #e5e7eb);
        transition: width .2s ease;
        overflow: hidden;
    }
    body.sn-collapsed .side-nav { width: 68px; }
    .sn-brand {
        display: flex; align-items: center; gap: 10px;
        padding: 16px 14px 14px; text-decoration: none; color: inherit;
        border-bottom: 1px solid var(--border, #e5e7eb);
        white-space: nowrap;
    }
    .sn-brand-txt { line-height: 1.25; font-size: .95rem; }
    .sn-brand-txt b { color: var(--accent-primary); }
    .sn-brand-txt small { display: block; font-size: .68rem; color: var(--text-muted, #888); }
    body.sn-collapsed .sn-brand-txt { display: none; }
    .sn-items { flex: 1; overflow-y: auto; padding: 10px 8px; }
    .sn-item {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 12px; margin-bottom: 2px; border-radius: 9px;
        color: var(--text-secondary, #555); text-decoration: none;
        font-size: .88rem; white-space: nowrap;
        border: none; background: none; width: 100%; cursor: pointer; text-align: left;
    }
    .sn-item i { font-style: normal; width: 20px; text-align: center; flex-shrink: 0; }
    .sn-item:hover { background: rgba(99,102,241,.07); color: var(--accent-primary); }
    .sn-item.active { background: #17192b; color: #fff; font-weight: 600; }
    body.sn-collapsed .sn-item span { display: none; }
    .sn-footer { padding: 8px; border-top: 1px solid var(--border, #e5e7eb); }
    /* 顶栏保留（市场切换/语言/账号），主导航链接由侧栏接管 */
    body.has-sidenav .main-nav { display: none; }
    body.has-sidenav .menu-toggle { display: none; }
}

/* ── 营销落地页 ── */
.ld-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 40px; }
.ld-hero { text-align: center; padding: 72px 0 56px; }
.ld-badge {
    display: inline-block; font-size: .75rem; padding: 4px 14px; border-radius: 999px;
    border: 1px solid rgba(99,102,241,.35); color: var(--accent-primary);
    background: rgba(99,102,241,.07); margin-bottom: 18px;
}
.ld-hero h1 { font-size: 2.5rem; line-height: 1.25; margin: 0 0 14px; letter-spacing: .01em; }
.ld-sub { font-size: 1.02rem; color: var(--text-secondary, #555); max-width: 640px; margin: 0 auto 26px; line-height: 1.7; }
.ld-cta { display: flex; gap: 12px; justify-content: center; }
.ld-btn-primary {
    display: inline-block; padding: 11px 30px; border-radius: 10px; font-weight: 600;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%); color: #fff; text-decoration: none;
    box-shadow: 0 4px 18px rgba(99,102,241,.3);
}
.ld-btn-primary:hover { transform: translateY(-1px); }
.ld-btn-ghost {
    display: inline-block; padding: 11px 30px; border-radius: 10px; font-weight: 600;
    border: 1px solid var(--border, #d6d9e0); color: var(--text-primary, #222); text-decoration: none;
}
.ld-section { padding: 40px 0; text-align: center; }
.ld-section h2 { font-size: 1.5rem; margin: 0 0 26px; }
.ld-alt { border-top: 1px solid var(--border, #eceef2); border-bottom: 1px solid var(--border, #eceef2); }
.ld-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; }
.ld-step {
    border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 18px;
    display: flex; flex-direction: column; gap: 8px; background: var(--bg-card, #fff);
}
.ld-step i { font-style: normal; font-size: 1.5rem; }
.ld-step b { font-size: .95rem; }
.ld-step span { font-size: .8rem; color: var(--text-secondary, #555); line-height: 1.6; }
.ld-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.ld-grid3 { grid-template-columns: repeat(3, 1fr); }
.ld-card {
    border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 18px;
    background: var(--bg-card, #fff); display: flex; flex-direction: column; gap: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.ld-card:hover { border-color: var(--accent-primary); box-shadow: 0 4px 18px rgba(99,102,241,.1); }
.ld-card b { font-size: .95rem; }
.ld-card span { font-size: .8rem; color: var(--text-secondary, #555); line-height: 1.6; }
.ld-final { padding-bottom: 20px; }
.ld-final p { color: var(--text-secondary, #555); margin: 0 0 20px; }
.ld-legal { font-size: .74rem; color: var(--text-muted, #999); text-align: center; margin-top: 30px; line-height: 1.7; }
@media (max-width: 860px) {
    .ld-hero h1 { font-size: 1.7rem; }
    .ld-steps, .ld-grid, .ld-grid3 { grid-template-columns: 1fr; }
}

/* 工作台空状态卡片网格（对话区中央） */
.wb2-wrap { max-width: 1080px; margin: 0 auto; padding: 16px; }
.wb-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; padding: 14px;
}
@media (max-width: 1000px) { .wb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wb-grid { grid-template-columns: 1fr; } }

/* 侧栏接管顶栏内容：桌面端隐藏顶栏（仅带市场切换球的筛选页保留） */
@media (min-width: 861px) {
    body.has-sidenav .top-bar:not(:has(.market-pills)) { display: none; }
    body.has-sidenav .top-bar:has(.market-pills) .logo,
    body.has-sidenav .top-bar:has(.market-pills) .lang-toggle,
    body.has-sidenav .top-bar:has(.market-pills) .auth-area { display: none; }
    .sn-lang-row { cursor: default; }
    .sn-lang {
        border: 1px solid var(--border, #e5e7eb); background: transparent;
        color: inherit; border-radius: 8px; padding: 4px 8px; font-size: .82rem;
        cursor: pointer; flex: 1;
    }
    .sn-stars { font-style: normal; color: #f59e0b; font-size: .78rem; }
    .sn-user span { overflow: hidden; text-overflow: ellipsis; }
    body.sn-collapsed .sn-lang { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   QUBE-inspired application shell + conversational workbench
   Keeps the existing Flask/AI behavior and replaces only the UI layer.
   ═══════════════════════════════════════════════════════════════ */
.sn-section-label {
    padding: 12px 12px 6px;
    color: #a1a1aa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sn-conversations { padding: 4px 4px 8px; border-bottom: 1px solid #ececec; margin-bottom: 4px; }
.sn-new-chat {
    width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px dashed #d8d8d8; border-radius: 11px; background: #fff; color: #2b2b2b;
    font: 600 13px/1 inherit; cursor: pointer; transition: background .16s, border-color .16s;
}
.sn-new-chat:hover { background: #f7f7f7; border-color: #a8a8a8; }
.sn-new-chat span { font-size: 18px; font-weight: 400; line-height: 1; }
.sn-chat-row {
    width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer;
    color: #262626; text-align: left;
}
.sn-chat-row:hover, .sn-chat-row.active { background: #ededed; }
.sn-chat-title { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 650; }
.sn-chat-row small { color: #9b9b9b; font-size: 10.5px; }
.sn-compute { color: #3f3f46; }
.sn-compute b { color: #111; font-weight: 700; }
.sn-avatar {
    width: 25px !important; height: 25px; display: grid; place-items: center; border-radius: 8px;
    color: #fff; background: #111; font-size: 11px; font-weight: 750;
}
.sn-user span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.sn-user span b { font-size: 12px; }
.sn-menu-group { margin: 1px 0; }
.sn-group-toggle { position: relative; }
.sn-group-toggle .sn-chevron {
    width: auto; margin-left: auto; color: #a1a1aa; font-size: 12px; font-weight: 500;
    transform: rotate(-90deg); transition: transform .18s ease;
}
.sn-menu-group.open .sn-chevron { transform: rotate(0); }
.sn-group-items {
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none;
    transition: max-height .22s ease, opacity .16s ease, visibility 0s linear .22s;
}
.sn-menu-group.open .sn-group-items {
    max-height: 150px; opacity: 1; visibility: visible; pointer-events: auto;
    transition-delay: 0s;
}
.sn-group-items .sn-item { padding-left: 20px; color: #6f6f76; }
.sn-group-items .sn-item::before {
    content: ''; width: 1px; align-self: stretch; margin: -7px 0 -7px -8px;
    background: #ececec;
}
.sn-account { margin-top: 4px; padding-top: 7px; border-top: 1px solid #ededed; }
.sn-account-toggle {
    width: 100%; min-height: 50px; padding: 6px 8px; border: 0; border-radius: 11px;
    display: flex; align-items: center; gap: 9px; background: transparent; color: #303036;
    text-align: left; cursor: pointer;
}
.sn-account-toggle:hover, .sn-account.open .sn-account-toggle { background: #f4f4f4; }
.sn-account-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sn-account-name { min-width: 0; display: flex; align-items: center; gap: 5px; line-height: 1; }
.sn-account-name b { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.sn-account-name .sn-stars { overflow: hidden; max-width: 48px; text-overflow: clip; white-space: nowrap; font-size: 8px; }
.sn-account-copy small { color: #8b8b91; font-size: 10px; line-height: 1; }
.sn-account-copy small b { color: #252525; font-size: inherit; }
.sn-account-chevron {
    color: #9a9a9f; font-size: 11px; font-weight: 500; transform: rotate(180deg);
    transition: transform .18s ease;
}
.sn-account.open .sn-account-chevron { transform: rotate(0); }
.sn-account-menu {
    position: absolute; left: calc(100% + 11px); bottom: 0; width: 248px; display: none;
    padding: 10px; box-sizing: border-box; border: 1px solid #dedede; border-radius: 17px;
    background: rgba(255,255,255,.98); box-shadow: 0 18px 48px rgba(0,0,0,.16);
    backdrop-filter: blur(16px);
}
.sn-account.open .sn-account-menu { display: block; animation: sn-pop-in .15s ease-out; }
.sn-account-menu::before { content: '账号与偏好'; display: block; padding: 3px 9px 9px; color: #999; font-size: 9px; font-weight: 750; letter-spacing: .1em; }
.sn-account-menu .sn-item { min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
@keyframes sn-pop-in { from { opacity: 0; transform: translateX(-5px) scale(.98); } to { opacity: 1; transform: none; } }

.wb2-wrap { box-sizing: border-box; }
.wb-conversation-pane, .wb-artifact-pane {
    min-width: 0; min-height: 0; overflow: hidden; background: #fff;
    border: 1px solid #e5e5e5; border-radius: 15px;
}
.wb-conversation-pane { display: flex; flex-direction: column; }
.wb-conversation-head {
    height: 54px; flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 0 10px 0 12px; border-bottom: 1px solid #ececec; background: rgba(255,255,255,.94);
}
.wb-product-chip {
    display: inline-flex; min-width: 0; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
    border-radius: 11px; border: 1px solid #e4e4e4; background: #fafafa; color: #242424;
}
.wb-product-chip > span { width: 7px; height: 7px; border-radius: 50%; background: #111; box-shadow: 0 0 0 4px #ededed; }
.wb-product-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.wb-product-chip em { font-style: normal; color: #888; font-size: 10.5px; }
.wb-head-actions { display: flex; gap: 7px; }
.wb-head-actions button {
    width: 34px; height: 34px; border: 1px solid #e3e3e3; border-radius: 11px; background: #fff;
    color: #575757; cursor: pointer; font-size: 15px;
}
.wb-head-actions button:hover, .wb-head-actions button.active { color: #111; background: #f2f2f2; }
.wb-chat { min-height: 0; flex: 1; }
.wb-access-notice { margin: 16px; padding: 14px 16px !important; border-radius: 12px; }

.wb-artifact-pane { display: flex; flex-direction: column; transition: width .24s, opacity .18s; }
.wb-artifact-head {
    min-height: 72px; padding: 14px 18px; display: flex; align-items: flex-start; justify-content: space-between;
    border-bottom: 1px solid #ededed;
}
.wb-artifact-head > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.wb-artifact-head strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-artifact-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #111; color: #fff; }
.wb-artifact-type { padding: 3px 9px; border: 1px solid #dedede; border-radius: 999px; color: #666; font-size: 10.5px; }
.wb-artifact-tabs {
    margin: 12px 16px 0; padding: 3px; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 3px; border-radius: 11px; background: #f3f3f3;
}
.wb-artifact-tabs button {
    height: 31px; border: 0; border-radius: 9px; background: transparent; color: #777;
    font: 600 11.5px/1 inherit; cursor: pointer;
}
.wb-artifact-tabs button.active { color: #fff; background: #111; box-shadow: 0 1px 2px rgba(0,0,0,.16); }
.wb-artifact-body { flex: 1; overflow: auto; padding: 20px 16px; }
.wb-artifact-empty { padding: 34px 24px 28px; text-align: center; border: 1px dashed #dedede; border-radius: 14px; background: #fcfcfc; }
.wb-empty-orbit {
    width: 48px; height: 48px; margin: 0 auto 14px; display: grid; place-items: center;
    border: 1px solid #d9d9d9; border-radius: 15px; color: #fff; background: #111; font-size: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.wb-artifact-empty.has-draft { border-style: solid; border-color: #b9e7d4; background: #f7fcfa; }
.wb-artifact-empty.has-draft .wb-empty-orbit { background: #15966b; border-color: #15966b; }
.wb-artifact-empty h3 { margin: 0 0 7px; font-size: 15px; }
.wb-artifact-empty p { max-width: 340px; margin: 0 auto; color: #858585; font-size: 12px; line-height: 1.65; }
.wb-flow-card { margin-top: 14px; padding: 15px; border: 1px solid #e8e8e8; border-radius: 14px; background: #fff; }
.wb-flow-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wb-flow-head b { font-size: 12.5px; }
.wb-flow-head span { padding: 3px 8px; border-radius: 999px; background: #f2f2f2; color: #888; font-size: 10px; }
.wb-flow-card ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.wb-flow-card li { position: relative; display: flex; align-items: center; gap: 10px; }
.wb-flow-card li:not(:last-child)::after { content: ''; position: absolute; left: 12px; top: 27px; width: 1px; height: 14px; background: #dedede; }
.wb-flow-card li i { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #f1f1f1; color: #666; font: 700 10px/1 inherit; }
.wb-flow-card li div { display: flex; flex-direction: column; gap: 1px; }
.wb-flow-card li b { font-size: 11.5px; }
.wb-flow-card li small { color: #969696; font-size: 10.5px; }

/* AI panel becomes a calm, native workbench conversation surface. */
body.wb-page .btai-fab { display: none; }
body.wb-page .wb-chat .btai-drawer {
    position: static; width: 100% !important; max-width: none; height: 100%; min-height: 0;
    transform: none; border: 0; border-radius: 0; box-shadow: none; background: #fff;
}
body.wb-page .wb-chat .btai-resizer,
body.wb-page .wb-chat #btai-close { display: none; }
body.wb-page .btai-header { min-height: 48px; padding: 8px 16px; border-bottom: 1px solid #efefef; flex-wrap: nowrap; }
.btai-agent-mark { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: 9px; background: #111; color: #fff; }
.btai-title { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; }
.btai-title small { color: #9a9a9a; font-size: 9.5px; font-weight: 500; }
body.wb-page .btai-mode { margin-left: 3px; background: #f2f2f2; color: #666; }
body.wb-page .btai-header-actions { gap: 6px; }
body.wb-page .btai-icon-btn { border-color: #e6e6e6; border-radius: 9px; background: #fff; }
body.wb-page .btai-log { padding: 28px clamp(22px, 7%, 78px) 20px; font-size: 13px; line-height: 1.72; background: #fff; }
body.wb-page .btai-empty { max-width: 540px; margin: 3vh auto 2px; padding: 18px 10px 10px; color: #777; font-size: 12.5px; line-height: 1.65; }
body.wb-page .btai-empty::before { content: '你好，我是你的量化策略助手'; display: block; margin-bottom: 7px; color: #171717; font-size: 20px; font-weight: 720; letter-spacing: -.03em; }
.wb-symbol-bar {
    position: relative; z-index: 8; min-height: 60px; padding: 9px 14px; display: grid;
    grid-template-columns: minmax(150px, 1fr) 104px minmax(210px, 1.25fr) auto;
    align-items: end; gap: 9px; border-bottom: 1px solid #ededed; background: #fbfbfb;
}
.wb-symbol-copy { align-self: center; display: flex; flex-direction: column; gap: 2px; }
.wb-symbol-copy span { color: #202020; font-size: 12px; font-weight: 750; }
.wb-symbol-copy small { color: #999; font-size: 9.5px; }
.wb-market-field, .wb-ticker-field { position: relative; display: flex; flex-direction: column; gap: 3px; }
.wb-market-field > span, .wb-ticker-field > span { color: #8b8b8b; font-size: 8.5px; font-weight: 650; }
.wb-symbol-bar select, .wb-symbol-bar input {
    width: 100%; height: 32px; box-sizing: border-box; padding: 0 10px; border: 1px solid #dedede;
    border-radius: 9px; outline: 0; background: #fff; color: #2c2c2c; font: 500 11px/1 inherit;
}
.wb-symbol-bar input { padding-left: 29px; }
.wb-ticker-field::after { content: '⌕'; position: absolute; left: 10px; bottom: 8px; color: #777; font-size: 14px; line-height: 1; }
.wb-symbol-bar select:focus, .wb-symbol-bar input:focus { border-color: #9b9b9b; box-shadow: 0 0 0 3px rgba(0,0,0,.045); }
.wb-symbol-state { height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 9px; background: #eee; color: #888; font-size: 9.5px; white-space: nowrap; }
.wb-symbol-state i { width: 6px; height: 6px; border-radius: 50%; background: #aaa; }
.wb-symbol-state.ready { background: #e8f8f1; color: #127a58; }
.wb-symbol-state.ready i { background: #15a773; box-shadow: 0 0 0 3px rgba(21,167,115,.12); }
.wb-symbol-error { position: absolute; right: 14px; bottom: -17px; color: #d33d3d; font-size: 9px; }
.wb-symbol-bar.needs-symbol { z-index: 12; background: #fff7f7; animation: wb-symbol-shake .28s ease-in-out 2; }
.wb-symbol-bar.needs-symbol input { border-color: #e36363; box-shadow: 0 0 0 3px rgba(227,99,99,.1); }
@keyframes wb-symbol-shake { 0%,100%{transform:translateX(0)} 35%{transform:translateX(-3px)} 70%{transform:translateX(3px)} }
body.wb-page .btai-chips { gap: 7px; margin-bottom: 12px; }
body.wb-page .btai-chip {
    padding: 6px 12px; border-color: #dedede; border-radius: 999px;
    background: #fafafa; color: #555; font-size: 11px;
}
body.wb-page .btai-chip:hover { border-color: #bdbdbd; background: #f1f1f1; color: #111; }
body.wb-page .btai-chip #btai-quant-sym { color: #333; }
body.wb-page .wb-card-catalog { max-width: 760px; margin: 0 auto; padding: 8px 0 28px; }
body.wb-page .wb-card-section { margin: 16px 0 21px; }
body.wb-page .wb-section-head { margin: 0 2px 9px; display: flex; align-items: center; gap: 7px; }
body.wb-page .wb-section-head > span { width: 6px; height: 6px; border-radius: 50%; background: #1bafe6; }
body.wb-page .wb-section-head > span.purple { background: #9a79ff; }
body.wb-page .wb-section-head > span.green { background: #31b67b; }
body.wb-page .wb-section-head > span.orange { background: #f59f45; }
body.wb-page .wb-section-head b { color: #242424; font-size: 12px; }
body.wb-page .wb-section-head small { color: #929292; font-size: 10px; }
body.wb-page .wb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; }
body.wb-page .wb-card {
    position: relative; width: 100%; min-height: 88px; margin: 0; padding: 13px 54px 13px 13px;
    display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; text-align: left;
    border: 1px solid #e3e3e3; border-radius: 14px; background: #fff; color: inherit; cursor: pointer;
    box-shadow: 0 1px 1px rgba(0,0,0,.025); transform: none; font-family: inherit;
}
body.wb-page .wb-card:hover { border-color: #bcbcbc; background: #fafafa; box-shadow: 0 7px 24px rgba(0,0,0,.06); transform: translateY(-1px); }
body.wb-page .wb-card:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
body.wb-page .wb-card.running { border-color: #191919; background: #f5f5f5; transform: scale(.985); }
body.wb-page .wb-card > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #f3f3f3; color: #555; font: 600 17px/1 inherit; }
body.wb-page .wb-card > div { min-width: 0; }
body.wb-page .wb-card strong { display: block; margin-bottom: 5px; color: #202020; font-size: 12.5px; line-height: 1.2; }
body.wb-page .wb-card p { margin: 0; color: #777; font-size: 10.5px; line-height: 1.45; }
body.wb-page .wb-card > em { position: absolute; right: 12px; top: 12px; padding: 3px 6px; border-radius: 999px; background: #eaf7ff; color: #1598d0; font: 600 8.5px/1 inherit; font-style: normal; }
body.wb-page .wb-card-section:nth-child(2) .wb-card > em { background: #f2edff; color: #8061dc; }
body.wb-page .wb-card-section:nth-child(3) .wb-card > em { background: #fff3e4; color: #c8751e; }
body.wb-page .wb-card-section:nth-child(4) .wb-card > em { background: #eaf8f1; color: #288a62; }
body.wb-page .btai-msg-wrap { max-width: 720px; margin: 0 auto 20px; }
body.wb-page .btai-role { color: #8c8c8c; font-size: 10.5px; }
body.wb-page .btai-user { margin-left: auto; max-width: 82%; padding: 12px 14px; border: 1px solid #e6e6e6; border-left-width: 1px; border-radius: 13px; background: #f7f7f7; }
body.wb-page .btai-assistant { color: #292929; }
body.wb-page .btai-tool { border-color: #e4e4e4; border-radius: 10px; background: #f7f7f7; }
body.wb-page .btai-tool-name { color: #222; }
body.wb-page .btai-code { border-color: #dedede; border-radius: 12px; }
body.wb-page .btai-strategy-save { border-color: #bdbdbd; border-style: solid; border-radius: 12px; background: #fafafa; }
body.wb-page .btai-save-btn, body.wb-page .btai-apply { background: #111; }
body.wb-page .btai-form { margin: 0 12px 12px; padding: 0; border: 1px solid #dedede; border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
body.wb-page .btai-form textarea { min-height: 60px; max-height: 150px; resize: none; padding: 13px 14px 7px; border: 0; border-radius: 16px 16px 0 0; background: transparent; font-size: 12.5px; }
body.wb-page .btai-form textarea:focus { border: 0; box-shadow: none; }
body.wb-page .btai-disclaimer { display: none; }
body.wb-page .btai-form-row { min-height: 42px; margin: 0; padding: 4px 7px 7px 9px; }
body.wb-page .btai-model-wrap { min-width: 155px; }
body.wb-page .btai-model { max-width: 132px; height: 30px; border: 0; border-radius: 9px; background-color: transparent; color: #444; }
body.wb-page .btai-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.wb-page .btai-send { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #111; font-size: 18px; line-height: 1; }
body.wb-page .btai-send-stop { width: auto; padding: 0 11px; border-radius: 10px; font-size: 11px; }
body.wb-page .site-disclaimer { display: none; }

@media (min-width: 861px) {
    body.has-sidenav { --sn-offset: 224px; padding-left: var(--sn-offset); }
    body.has-sidenav.sn-collapsed { --sn-offset: 76px; }
    .side-nav {
        left: 8px; top: 8px; bottom: 8px; width: 208px; border: 1px solid #e5e5e5;
        border-radius: 15px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.035); overflow: visible;
    }
    .sn-account { position: relative; }
    body.sn-collapsed .side-nav { width: 60px; }
    .sn-brand { padding: 13px 12px 12px; border-bottom-color: #ededed; }
    .sn-brand svg { width: 28px; height: 28px; }
    .sn-brand-txt { color: #18181b; font-size: 13px; }
    .sn-brand-txt b { color: #18181b; }
    .sn-brand-txt small { margin-top: 2px; color: #999; font-size: 9.5px; }
    .sn-items { padding: 8px 7px; }
    .sn-item { min-height: 36px; margin-bottom: 1px; padding: 7px 9px; border-radius: 9px; color: #52525b; font-size: 12px; }
    .sn-item:hover { color: #18181b; background: #f2f2f2; }
    .sn-item.active { color: #fff; background: #111; }
    .sn-footer { padding: 7px; border-top-color: #ededed; }
    body.sn-collapsed .sn-group-items,
    body.sn-collapsed .sn-group-toggle .sn-chevron,
    body.sn-collapsed .sn-account-copy,
    body.sn-collapsed .sn-account-chevron,
    body.sn-collapsed .sn-account-menu { display: none; }
    body.sn-collapsed .sn-account { border-top-color: transparent; }
    body.sn-collapsed .sn-account-toggle { justify-content: center; padding-left: 0; padding-right: 0; }
    body.wb-page { height: 100vh; overflow: hidden; padding-bottom: 0; background: #f3f3f3; }
    body.wb-page .top-bar { display: none !important; }
    body.wb-page.btai-open { margin-right: 0; }
    body.wb-page .wb2-wrap {
        width: 100%; max-width: none; height: 100vh; margin: 0; padding: 8px 8px 8px 0;
        display: grid; grid-template-columns: minmax(530px, 1fr) minmax(360px, 41%); gap: 8px;
    }
    body.wb-page.wb-artifact-collapsed .wb2-wrap { grid-template-columns: minmax(0, 1fr) 0; }
    body.wb-page.wb-artifact-collapsed .wb-artifact-pane { opacity: 0; pointer-events: none; border: 0; }
    body.sn-collapsed .sn-conversations, body.sn-collapsed .sn-section-label { display: none; }
}

@media (max-width: 1100px) and (min-width: 861px) {
    body.wb-page .wb2-wrap { grid-template-columns: minmax(470px, 1fr) 340px; }
    body.wb-page .wb-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    body.wb-page { height: 100dvh; overflow: hidden; padding-bottom: 60px; background: #f5f5f5; }
    body.wb-page .top-bar { position: static; display: flex; height: 48px; min-height: 48px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e7e7e7; box-shadow: none; }
    body.wb-page .top-bar .logo { color: #18181b; font-size: 15px; text-shadow: none; }
    body.wb-page .top-bar .logo span { color: #18181b; background: none; -webkit-text-fill-color: currentColor; }
    body.wb-page .top-bar-right { position: static; display: flex; border: 0; box-shadow: none; background: transparent; }
    body.wb-page .top-bar-right .main-nav, body.wb-page .top-bar-right .lang-toggle, body.wb-page .top-bar-right .auth-area { display: none !important; }
    body.wb-page .menu-toggle { display: block; color: #222; }
    body.wb-page .wb2-wrap { width: 100%; max-width: none; height: calc(100dvh - 108px); margin: 0; padding: 0; display: block; }
    .wb-conversation-pane { height: 100%; border: 0; border-radius: 0; }
    .wb-conversation-head { height: 43px; padding: 0 8px; }
    .wb-product-chip { height: 29px; max-width: calc(100vw - 92px); padding: 0 10px; }
    .wb-artifact-pane { display: none; }
    body.wb-artifact-mobile-open .wb-artifact-pane {
        position: fixed; z-index: 955; inset: 48px 0 60px; display: flex;
        border: 0; border-radius: 0; background: #fff;
    }
    body.wb-page .btai-header { min-height: 42px; padding: 6px 10px; }
    body.wb-page .btai-title small { display: none; }
    body.wb-page .btai-log { padding: 16px 14px; }
    body.wb-page .btai-empty { margin-top: 0; }
    body.wb-page .btai-empty::before { font-size: 17px; }
    body.wb-page .wb-grid { grid-template-columns: 1fr; padding-bottom: 18px; }
    body.wb-page .wb-card { min-height: 0; }
    .wb-symbol-bar { min-height: 108px; padding: 8px 10px 11px; grid-template-columns: 92px 1fr; align-items: end; }
    .wb-symbol-copy { grid-column: 1 / -1; }
    .wb-symbol-state { display: none; }
    .wb-symbol-error { right: 10px; bottom: -14px; }
    body.wb-page .btai-form { margin: 0 8px 8px; }
    body.wb-page .btai-form textarea { min-height: 49px; }
    body.wb-page .bottom-nav { height: 60px; box-sizing: border-box; padding-top: 7px; background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════
   Simulation dashboard — compact account-first information design
   ═══════════════════════════════════════════════════════════════ */
body.dashboard-page { background: #f3f3f3; }

/* Strategy library — templates + saved versions + parameter-only backtest studio */
body.strategy-library-page { background: #f4f4f2; }
body.factor-library-page { background: #f4f4f2; }
body.factor-library-page .main-container { width: min(1460px, calc(100% - 32px)); max-width: none; margin: 0 auto; padding: 24px 0 55px; }
.factor-page-head { min-height: 86px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.factor-page-head > div:first-child > span { color: #999; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.factor-page-head h1 { margin: 4px 0 2px; color: #1d1d1f; font-size: 29px; letter-spacing: -.04em; }
.factor-page-head p { margin: 0; color: #7a7a7a; font-size: 12px; }
.factor-flow { height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 8px; border: 1px solid #dedede; border-radius: 10px; background: #fff; color: #777; font-size: 9px; }
.factor-flow b { color: #444; }.factor-flow i { color: #bbb; font-style: normal; }
body.factor-library-page .controls-panel { padding: 16px; display: flex; align-items: flex-end; gap: 12px; border: 1px solid #dfdfdd; border-radius: 16px; background: #fff; box-shadow: none; }
body.factor-library-page .control-group label { margin-bottom: 5px; color: #777; font-size: 10px; font-weight: 650; }
body.factor-library-page .control-group select, body.factor-library-page .control-group input { height: 42px; box-sizing: border-box; border-color: #dedede; border-radius: 10px; background-color: #fafafa; color: #252525; font-size: 12px; }
body.factor-library-page .factor-market-group select { min-width: 190px; }
body.factor-library-page .btn-screen { height: 42px; min-width: 105px; border-radius: 10px; background: #111; box-shadow: none; }
body.factor-library-page .filters-toggle { min-height: 42px; display: inline-flex; align-items: center; color: #666; font-size: 11px; }
body.factor-library-page .advanced-filters { width: 100%; margin-top: 4px; padding: 14px; border: 1px solid #e6e6e6; border-radius: 12px; background: #fafafa; }
body.factor-library-page .search-container, body.factor-library-page .compare-section, body.factor-library-page .results-container, body.factor-library-page .watchlist-section { border: 1px solid #dfdfdd; border-radius: 16px; background: #fff; box-shadow: none; }
body.factor-library-page .search-container { margin-top: 12px; padding: 12px; }
body.factor-library-page .search-input { border-color: #dedede; border-radius: 10px; background: #fafafa; }
@media (max-width: 860px) { .factor-page-head { align-items: flex-start; }.factor-flow { display: none; } body.factor-library-page .controls-panel { align-items: stretch; }.factor-market-group { width: 100%; }.factor-market-group select { width: 100%; } }
.sl-page { width: min(1560px, 100%); margin: 0 auto; padding: 28px 24px 60px; box-sizing: border-box; color: #1d1d1f; }
.sl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.sl-kicker { color: #8b8b8b; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.sl-head h1 { margin: 4px 0 3px; font-size: 30px; letter-spacing: -.04em; }
.sl-head p { margin: 0; color: #777; font-size: 13px; }
.sl-primary, .sl-secondary { height: 40px; padding: 0 17px; border-radius: 11px; font: 700 12px/1 inherit; cursor: pointer; }
.sl-primary { border: 1px solid #111; background: #111; color: #fff; }
.sl-primary:hover { background: #2a2a2a; }
.sl-primary:disabled { opacity: .5; cursor: wait; }
.sl-secondary { border: 1px solid #d8d8d8; background: #fff; color: #333; }
.sl-toolbar { min-height: 58px; padding: 8px; display: flex; align-items: center; gap: 12px; border: 1px solid #e0e0de; border-radius: 16px; background: #fff; }
.sl-search { width: 250px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fafafa; }
.sl-search span { color: #777; font-size: 18px; }
.sl-search input { width: 100%; border: 0; outline: 0; background: transparent; font: 12px inherit; }
.sl-filters { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: #f2f2f2; }
.sl-filters button { height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: #777; font: 650 11px inherit; cursor: pointer; }
.sl-filters button.active { background: #111; color: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.13); }
.sl-count { margin-left: auto; padding-right: 8px; color: #999; font-size: 11px; }
.sl-layout { margin-top: 14px; display: grid; grid-template-columns: minmax(390px, .8fr) minmax(520px, 1.2fr); gap: 14px; align-items: start; }
.sl-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sl-card { min-height: 190px; padding: 17px; display: flex; flex-direction: column; border: 1px solid #e1e1df; border-radius: 15px; background: #fff; cursor: pointer; transition: border .16s, transform .16s, box-shadow .16s; }
.sl-card:hover, .sl-card.selected { border-color: #999; box-shadow: 0 8px 26px rgba(0,0,0,.07); transform: translateY(-1px); }
.sl-card.selected { outline: 2px solid #111; outline-offset: -2px; }
.sl-card-top { display: flex; align-items: center; justify-content: space-between; }
.sl-card-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #111; color: #fff; }
.sl-card-badge { padding: 4px 8px; border-radius: 999px; background: #f1f1f1; color: #666; font-size: 9px; font-weight: 700; }
.sl-card-badge.mine { background: #eaf7f1; color: #34745b; }
.sl-card h2 { margin: 16px 0 7px; font-size: 15px; }
.sl-card p { flex: 1; margin: 0; color: #777; font-size: 11px; line-height: 1.65; }
.sl-card footer { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; color: #a0a0a0; font-size: 10px; }
.sl-card footer button { border: 0; background: transparent; color: #222; font: 700 10px inherit; cursor: pointer; }
.sl-studio { position: sticky; top: 14px; min-height: 500px; max-height: calc(100vh - 28px); overflow: auto; border: 1px solid #dededc; border-radius: 17px; background: #fff; }
.sl-studio-empty { min-height: 500px; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.sl-studio-empty[hidden], .sl-studio-body[hidden], .sl-report[hidden] { display: none !important; }
.sl-studio-empty > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: #111; color: #fff; font-size: 18px; }
.sl-studio-empty h2 { margin: 14px 0 6px; font-size: 17px; }
.sl-studio-empty p { max-width: 360px; margin: 0; color: #888; font-size: 12px; line-height: 1.6; }
.sl-studio-body { padding: 20px; }
.sl-detail-head { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.sl-detail-kind { color: #777; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.sl-detail-head h2 { margin: 5px 0 4px; font-size: 20px; }
.sl-detail-head p { max-width: 520px; margin: 0; color: #858585; font-size: 11px; line-height: 1.55; }
.sl-version { align-self: flex-start; min-width: 74px; height: 34px; border: 1px solid #ddd; border-radius: 9px; background: #fafafa; padding: 0 9px; }
.sl-section-title { margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; }
.sl-section-title > span { color: #aaa; font-size: 9px; letter-spacing: .08em; }
.sl-section-title small { margin-left: auto; color: #999; font-size: 9px; font-weight: 500; }
.sl-form-grid, .sl-param-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.sl-form-grid label, .sl-param-grid label { position: relative; display: flex; flex-direction: column; gap: 5px; color: #777; font-size: 9px; font-weight: 650; }
.sl-form-grid input, .sl-form-grid select, .sl-param-grid input { width: 100%; height: 38px; padding: 0 10px; box-sizing: border-box; border: 1px solid #dedede; border-radius: 9px; background: #fafafa; color: #222; font: 12px inherit; outline: 0; }
.sl-form-grid input:focus, .sl-form-grid select:focus, .sl-param-grid input:focus { border-color: #777; background: #fff; }
.sl-param-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-param-grid label small { color: #aaa; font-size: 8px; font-weight: 500; }
.sl-param-empty { color: #999; font-size: 11px; }
.sl-risk { margin-top: 17px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.sl-risk summary { padding: 13px 0; display: flex; justify-content: space-between; color: #555; font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.sl-risk summary span { color: #999; font-weight: 500; }
.sl-risk .sl-form-grid { padding: 0 0 14px; }
.sl-actions { min-height: 58px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.sl-actions #sl-message { margin-right: auto; color: #b45309; font-size: 10px; }
.sl-report { margin: 4px -4px -4px; padding: 18px; border: 1px solid #e0e0e0; border-radius: 15px; background: #fafafa; }
.sl-report > header { display: flex; justify-content: space-between; align-items: flex-start; }
.sl-report-status { color: #27845f; font-size: 9px; font-weight: 750; }
.sl-report h3 { margin: 4px 0 0; font-size: 15px; }
.sl-report > header > span { color: #999; font-size: 9px; }
.sl-metrics { margin: 14px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sl-metrics div { min-height: 49px; padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fff; }
.sl-metrics span { color: #888; font-size: 9px; }
.sl-metrics b { font-size: 15px; font-weight: 650; }.sl-metrics b.up { color: #139567; }.sl-metrics b.down { color: #d14b4b; }
.sl-chart-wrap { height: 230px; padding: 8px; border: 1px solid #e5e5e5; border-radius: 12px; background: #fff; }
.sl-trades-head { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; }.sl-trades-head h3 { margin: 0; font-size: 12px; }.sl-trades-head span { color: #999; font-size: 9px; }
.sl-trades { margin-top: 7px; border: 1px solid #e5e5e5; border-radius: 10px; overflow: hidden; background: #fff; }
.sl-trades > div { min-height: 34px; padding: 0 10px; display: grid; grid-template-columns: 70px 1fr 80px 60px; align-items: center; border-bottom: 1px solid #eee; font-size: 9px; }.sl-trades > div:last-child { border-bottom: 0; }
.sl-trades b.buy { color: #139567; }.sl-trades b.sell { color: #d14b4b; }.sl-trades p { padding: 12px; color: #999; font-size: 10px; }
.sl-no-result { grid-column: 1/-1; padding: 50px; border: 1px dashed #ddd; border-radius: 14px; color: #999; text-align: center; font-size: 12px; }
@media (max-width: 1180px) { .sl-layout { grid-template-columns: 360px minmax(0,1fr); }.sl-catalog { grid-template-columns: 1fr; }.sl-form-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 860px) { .sl-page { padding: 16px 12px 80px; }.sl-head { align-items: flex-start; }.sl-head h1 { font-size: 24px; }.sl-toolbar { flex-wrap: wrap; }.sl-search { width: 100%; }.sl-filters { width: 100%; overflow-x: auto; }.sl-count { display: none; }.sl-layout { grid-template-columns: 1fr; }.sl-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); }.sl-studio { position: static; max-height: none; }.sl-param-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .sl-catalog { grid-template-columns: 1fr; }.sl-head .sl-primary { display: none; }.sl-form-grid, .sl-param-grid { grid-template-columns: 1fr 1fr; }.sl-studio-body { padding: 15px; } }

/* Public homepage — product-led introduction */
body.landing-page { background: #f5f5f2; color: #181818; }
body.landing-page .top-bar { background: rgba(245,245,242,.9); color: #171717; border-bottom: 1px solid #dededb; box-shadow: none; backdrop-filter: blur(18px); }
body.landing-page .logo { color: #171717; text-shadow: none; } body.landing-page .logo span { color: #171717; background: none; -webkit-text-fill-color: currentColor; }
body.landing-page .site-disclaimer { display: none; }
.home-v2 { overflow: hidden; }
.home-v2 .home-section { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 105px 0; }
.home-hero { min-height: calc(100vh - 62px); padding: 72px max(34px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; box-sizing: border-box; }
.home-eyebrow, .home-section header > span, .home-loop-copy > span, .home-final > span, .home-templates header > div > span { color: #8b8b85; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.home-hero h1 { margin: 16px 0 20px; font-size: clamp(48px,5.7vw,82px); line-height: .98; letter-spacing: -.065em; }
.home-hero h1 em { color: #8f8f89; font-style: normal; }
.home-hero-copy > p { max-width: 610px; margin: 0; color: #666; font-size: 16px; line-height: 1.8; }
.home-actions { margin-top: 31px; display: flex; gap: 10px; }
.home-btn { min-height: 46px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 13px; font-weight: 750; text-decoration: none; }
.home-btn.dark { background: #111; color: #fff; }.home-btn.light { border: 1px solid #d8d8d5; background: #fff; color: #222; }
.home-proof { margin-top: 43px; display: flex; flex-wrap: wrap; gap: 22px; color: #8c8c87; font-size: 10px; }
.home-proof span { display: flex; align-items: baseline; gap: 5px; }.home-proof b { color: #222; font-size: 17px; }
.home-product-demo { padding: 12px; border: 1px solid #d9d9d5; border-radius: 24px; background: #ecece8; box-shadow: 0 26px 70px rgba(0,0,0,.12); transform: rotate(1deg); }
.home-product-demo > div { border: 1px solid #e1e1df; background: #fff; }
.home-demo-bar { height: 50px; padding: 0 14px; display: flex; align-items: center; gap: 9px; border-radius: 14px 14px 8px 8px; }.home-demo-bar i { width: 8px; height: 8px; border-radius: 50%; background: #111; }.home-demo-bar span { font-size: 11px; font-weight: 700; }.home-demo-bar b { margin-left: auto; color: #398267; font-size: 9px; }
.home-demo-chat { margin-top: 7px; padding: 15px; display: flex; gap: 10px; border-radius: 8px; }.home-demo-ai { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #111; color: #fff; }.home-demo-chat small { color: #888; font-size: 8px; }.home-demo-chat p { margin: 4px 0 0; font-size: 11px; line-height: 1.55; }
.home-demo-tool, .home-demo-report { margin-top: 7px; padding: 15px; border-radius: 8px; }
.home-demo-tool header, .home-demo-report header { display: flex; justify-content: space-between; align-items: center; }.home-demo-tool header div { display: flex; flex-direction: column; gap: 3px; }.home-demo-tool header span { color: #999; font-size: 8px; }.home-demo-tool header b { font-size: 12px; }.home-demo-tool button { height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: #111; color: #fff; font-size: 9px; }
.home-demo-params { margin-top: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.home-demo-params span { padding: 10px; display: flex; flex-direction: column; gap: 4px; border-radius: 8px; background: #f4f4f2; color: #999; font-size: 8px; }.home-demo-params b { color: #222; font-size: 13px; }
.home-demo-report header b { font-size: 12px; }.home-demo-report header span { color: #31916d; font-size: 8px; }.home-demo-metrics { margin-top: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.home-demo-metrics span { display: flex; flex-direction: column; gap: 4px; color: #999; font-size: 8px; }.home-demo-metrics b { color: #222; font-size: 9px; }
.home-spark { position: relative; height: 95px; margin-top: 11px; overflow: hidden; border-radius: 8px; background: repeating-linear-gradient(to bottom,#f7f7f6 0,#f7f7f6 23px,#e8e8e5 24px); }.home-spark i { position: absolute; left: 5%; right: 5%; top: 50%; height: 2px; background: #111; transform: rotate(-5deg); box-shadow: 50px -9px 0 #111,110px 4px 0 #111,180px -15px 0 #111; }
.home-templates { border-top: 1px solid #dcdcd8; }.home-section > header, .home-templates > header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }.home-section h2 { margin: 8px 0 8px; font-size: clamp(31px,4vw,52px); letter-spacing: -.05em; }.home-section header p { max-width: 620px; margin: 0; color: #777; font-size: 13px; line-height: 1.7; }.home-section header a { color: #222; font-size: 12px; font-weight: 750; text-decoration: none; }
.home-template-grid { margin-top: 38px; display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }.home-template-grid article { min-height: 250px; padding: 24px; display: flex; flex-direction: column; border: 1px solid #dcdcd9; border-radius: 18px; background: #fff; }.home-template-grid article > span { color: #8a8a85; font-size: 9px; }.home-template-grid h3 { margin: 33px 0 10px; font-size: 21px; }.home-template-grid p { flex: 1; margin: 0; color: #757570; font-size: 12px; line-height: 1.75; }.home-template-grid footer { display: flex; justify-content: space-between; color: #999; font-size: 9px; }.home-template-grid footer i { color: #222; font-style: normal; font-weight: 700; }
.home-loop { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }.home-loop-copy > p { margin: 0 0 28px; color: #777; font-size: 14px; line-height: 1.8; }.home-loop-steps { border-top: 1px solid #cececa; }.home-loop-steps article { min-height: 100px; padding: 20px 6px; display: grid; grid-template-columns: 60px 1fr; align-items: center; border-bottom: 1px solid #cececa; }.home-loop-steps article > b { color: #aaa; font-size: 10px; }.home-loop-steps h3 { margin: 0 0 6px; font-size: 17px; }.home-loop-steps p { margin: 0; color: #777; font-size: 11px; }
.home-capabilities { border-top: 1px solid #dcdcd8; }.home-cap-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #d8d8d4; border-radius: 20px; overflow: hidden; }.home-cap-grid article { min-height: 185px; padding: 24px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid #dededb; border-bottom: 1px solid #dededb; background: rgba(255,255,255,.55); }.home-cap-grid article:nth-child(3n) { border-right: 0; }.home-cap-grid article:nth-child(n+4) { border-bottom: 0; }.home-cap-grid i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #111; color: #fff; font-style: normal; }.home-cap-grid b { margin-top: 7px; font-size: 14px; }.home-cap-grid p { margin: 0; color: #777; font-size: 11px; line-height: 1.65; }
.home-personas { border-top: 1px solid #dcdcd8; }.home-personas > div { margin-top: 36px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.home-personas article { min-height: 155px; padding: 23px; border-radius: 17px; background: #deded9; }.home-personas article:nth-child(2) { background: #222; color: #fff; }.home-personas b { font-size: 17px; }.home-personas p { margin: 35px 0 0; color: #777; font-size: 11px; line-height: 1.7; }.home-personas article:nth-child(2) p { color: #aaa; }
.home-final { min-height: 420px; padding: 80px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #111; color: #fff; text-align: center; }.home-final h2 { margin: 12px 0; font-size: clamp(36px,5vw,64px); letter-spacing: -.055em; }.home-final p { margin: 0 0 28px; color: #929292; font-size: 12px; }
@media (max-width: 900px) { .home-hero { min-height: auto; grid-template-columns: 1fr; padding: 70px 24px; }.home-product-demo { transform: none; }.home-loop { grid-template-columns: 1fr; gap: 55px; }.home-cap-grid { grid-template-columns: repeat(2,1fr); }.home-cap-grid article:nth-child(3n) { border-right: 1px solid #dededb; }.home-cap-grid article:nth-child(2n) { border-right: 0; }.home-cap-grid article:nth-child(n+4) { border-bottom: 1px solid #dededb; }.home-cap-grid article:nth-child(n+5) { border-bottom: 0; } }
@media (max-width: 640px) { .home-v2 .home-section { width: calc(100% - 28px); padding: 70px 0; }.home-hero { padding: 60px 16px; }.home-hero h1 { font-size: 47px; }.home-proof { gap: 12px; }.home-template-grid, .home-personas > div, .home-cap-grid { grid-template-columns: 1fr; }.home-section > header, .home-templates > header { align-items: flex-start; flex-direction: column; }.home-cap-grid article { border-right: 0 !important; border-bottom: 1px solid #dededb !important; }.home-cap-grid article:last-child { border-bottom: 0 !important; }.home-demo-metrics { grid-template-columns: 1fr; }.home-spark { height: 70px; } }

/* Public homepage v3 — original warm fintech palette and interactive product story */
body.landing-page { --rh-ink:#163b3a; --rh-ink-2:#245452; --rh-mint:#dff3e9; --rh-mint-2:#bfe6d8; --rh-coral:#f47c5b; --rh-coral-soft:#ffe2d7; --rh-indigo:#5965d8; --rh-cream:#f7f4ea; --rh-paper:#fffdf8; background:var(--rh-cream); color:var(--rh-ink); }
body.landing-page .top-bar { background:rgba(247,244,234,.9); color:var(--rh-ink); border-bottom:1px solid rgba(22,59,58,.12); backdrop-filter:blur(18px); }
body.landing-page .logo, body.landing-page .logo span { color:var(--rh-ink); }
body.landing-page .brand-cube rect { fill:var(--rh-ink); }
body.landing-page .nav-link { color:#55706e; }
body.landing-page .nav-link:hover { color:var(--rh-ink); background:rgba(22,59,58,.06); }
body.landing-page .btn-outline { border-color:rgba(22,59,58,.22); color:var(--rh-ink); background:rgba(255,255,255,.35); }
body.landing-page .auth-area .btn-outline:last-child { border-color:var(--rh-ink); background:var(--rh-ink); color:#fff; }
body.relay-modal-open { overflow:hidden !important; }
.relay-home { overflow:hidden; background:radial-gradient(circle at 10% 4%,rgba(223,243,233,.9),transparent 28%),radial-gradient(circle at 93% 12%,rgba(255,226,215,.72),transparent 26%),var(--rh-cream); }
.relay-section { width:min(1240px,calc(100% - 48px)); margin:0 auto; padding:110px 0; }
.relay-hero { position:relative; min-height:calc(100vh - 62px); padding:72px max(34px,calc((100vw - 1240px)/2)); display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:72px; box-sizing:border-box; }
.relay-hero::before { content:""; position:absolute; width:170px; height:170px; left:-75px; bottom:5%; border:1px solid rgba(89,101,216,.28); border-radius:50%; box-shadow:0 0 0 30px rgba(89,101,216,.035),0 0 0 65px rgba(89,101,216,.025); }
.relay-kicker { display:inline-flex; align-items:center; gap:8px; color:#46726e; font-size:11px; font-weight:800; letter-spacing:.08em; }
.relay-kicker i { width:8px; height:8px; border-radius:50%; background:var(--rh-coral); box-shadow:0 0 0 5px rgba(244,124,91,.13); }
.relay-hero h1 { margin:20px 0 24px; color:var(--rh-ink); font-size:clamp(48px,5.5vw,78px); line-height:1.03; letter-spacing:-.065em; }
.relay-hero h1 em { color:var(--rh-indigo); font-style:normal; }
.relay-hero-copy > p { max-width:580px; margin:0; color:#5e7471; font-size:16px; line-height:1.85; }
.relay-hero-actions { margin-top:30px; display:flex; flex-wrap:wrap; gap:10px; }
.relay-btn { min-height:48px; padding:0 21px; display:inline-flex; align-items:center; justify-content:center; gap:16px; border:1px solid transparent; border-radius:14px; font-size:13px; font-weight:760; text-decoration:none; transition:transform .18s,box-shadow .18s,background .18s; }
.relay-btn:hover { transform:translateY(-2px); }
.relay-btn-primary { background:var(--rh-ink); color:#fff; box-shadow:0 12px 28px rgba(22,59,58,.16); }
.relay-btn-primary:hover { background:#235452; box-shadow:0 16px 34px rgba(22,59,58,.22); }
.relay-btn-quiet { border-color:rgba(22,59,58,.16); background:rgba(255,253,248,.7); color:var(--rh-ink); }
.relay-trust-row { margin-top:42px; display:flex; gap:32px; }
.relay-trust-row span { display:flex; flex-direction:column; gap:3px; }
.relay-trust-row b { color:var(--rh-ink); font-size:19px; letter-spacing:-.04em; }
.relay-trust-row small { color:#75908d; font-size:10px; }
.relay-hero-visual { position:relative; }
.relay-image-frame { position:relative; padding:10px; overflow:hidden; border:1px solid rgba(22,59,58,.13); border-radius:34px; background:rgba(255,255,255,.54); box-shadow:0 34px 80px rgba(48,76,70,.16); transform:rotate(1.2deg); }
.relay-image-frame::after { content:""; position:absolute; inset:10px; border-radius:25px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); pointer-events:none; }
.relay-image-frame img { width:100%; min-height:430px; display:block; object-fit:cover; border-radius:25px; }
.relay-float-card { position:absolute; z-index:2; display:flex; align-items:center; border:1px solid rgba(22,59,58,.11); background:rgba(255,253,248,.92); box-shadow:0 18px 42px rgba(35,70,65,.16); backdrop-filter:blur(15px); }
.relay-float-ai { left:-36px; bottom:54px; min-width:205px; padding:13px; gap:11px; border-radius:16px; }
.relay-float-ai > i { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--rh-indigo); color:#fff; font-style:normal; }
.relay-float-card span { display:flex; flex-direction:column; gap:3px; }.relay-float-card b { font-size:11px; }.relay-float-card small { color:#78908d; font-size:9px; }
.relay-float-run { right:-24px; top:40px; padding:12px 14px; gap:18px; border-radius:15px; }
.relay-float-run > i { padding:5px 9px; border-radius:999px; background:var(--rh-mint); color:#16806c; font:700 8px/1 inherit; }
.relay-marquee { overflow:hidden; border-top:1px solid rgba(22,59,58,.1); border-bottom:1px solid rgba(22,59,58,.1); background:rgba(255,253,248,.55); }
.relay-marquee > div { min-height:66px; display:flex; align-items:center; justify-content:center; gap:34px; white-space:nowrap; color:#55706e; font-size:11px; font-weight:730; letter-spacing:.04em; }.relay-marquee i { color:var(--rh-coral); font-style:normal; }
.relay-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:48px; margin-bottom:42px; }
.relay-section-head > div > span,.relay-journey-copy > span,.relay-deploy > div > span,.relay-final > span,.relay-contact-modal header span { color:var(--rh-coral); font-size:10px; font-weight:850; letter-spacing:.16em; }
.relay-section-head h2,.relay-journey h2,.relay-deploy h2 { margin:8px 0 0; font-size:clamp(33px,4vw,54px); line-height:1.08; letter-spacing:-.055em; }
.relay-section-head > p { max-width:510px; margin:0; color:#6a807d; font-size:13px; line-height:1.75; }
.relay-lab-shell { display:grid; grid-template-columns:220px minmax(360px,1fr) minmax(330px,.9fr); min-height:500px; overflow:hidden; border:1px solid rgba(22,59,58,.13); border-radius:28px; background:var(--rh-paper); box-shadow:0 25px 65px rgba(44,76,71,.1); }
.relay-lab-steps { padding:18px 12px; display:flex; flex-direction:column; border-right:1px solid rgba(22,59,58,.09); background:#eef6ef; }
.relay-lab-steps > button { width:100%; min-height:68px; padding:11px 12px; display:flex; align-items:center; gap:12px; border:0; border-radius:13px; background:transparent; color:#62807c; text-align:left; cursor:pointer; }
.relay-lab-steps > button:hover { background:rgba(255,255,255,.58); }.relay-lab-steps > button.active { background:var(--rh-ink); color:#fff; box-shadow:0 10px 22px rgba(22,59,58,.17); }
.relay-lab-steps button > b { font-size:9px; opacity:.65; }.relay-lab-steps button > span { display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:750; }.relay-lab-steps button small { color:inherit; font-size:8px; font-weight:500; opacity:.68; }
.relay-lab-note { margin:auto 4px 4px; padding:12px; display:flex; gap:8px; border-radius:12px; background:rgba(255,255,255,.6); color:#6e8784; }.relay-lab-note i { width:18px; height:18px; display:grid; place-items:center; flex:none; border:1px solid rgba(22,59,58,.17); border-radius:50%; font:700 9px/1 inherit; }.relay-lab-note p { margin:0; font-size:8px; line-height:1.55; }
.relay-lab-main { padding:25px; border-right:1px solid rgba(22,59,58,.09); }
.relay-lab-title { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid rgba(22,59,58,.08); }.relay-lab-title > div { display:flex; flex-direction:column; gap:4px; }.relay-lab-title span { font-size:15px; font-weight:780; }.relay-lab-title b { color:#77908d; font-size:9px; }.relay-lab-title > small { padding:5px 8px; border-radius:999px; background:var(--rh-coral-soft); color:#c05d42; font-size:8px; font-weight:800; }
.relay-demo-form { margin-top:22px; display:grid; grid-template-columns:.68fr 1fr; gap:14px; }.relay-demo-form label { display:flex; flex-direction:column; gap:6px; color:#58726f; font-size:9px; font-weight:700; }.relay-demo-form label.wide { grid-column:auto; }.relay-demo-form input,.relay-demo-form select { width:100%; height:46px; padding:0 13px; box-sizing:border-box; border:1px solid rgba(22,59,58,.14); border-radius:12px; background:#fbfaf5; color:var(--rh-ink); font:600 11px/1 inherit; outline:0; }.relay-demo-form input:focus,.relay-demo-form select:focus { border-color:var(--rh-indigo); box-shadow:0 0 0 3px rgba(89,101,216,.09); }.relay-demo-form input.invalid { border-color:var(--rh-coral); box-shadow:0 0 0 3px rgba(244,124,91,.12); }
.relay-risk-control { margin-top:20px; padding:16px; border-radius:14px; background:#f0f5f0; }.relay-risk-control > div:first-child { display:flex; justify-content:space-between; color:#5f7976; font-size:9px; }.relay-risk-control b { color:var(--rh-indigo); }.relay-risk-control input { width:100%; accent-color:var(--rh-indigo); }.relay-risk-scale { display:flex; justify-content:space-between; color:#8ba09d; font-size:8px; }
.relay-demo-actions { margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:14px; }.relay-demo-actions > span { color:#7b918e; font-size:9px; }.relay-demo-actions button { min-height:42px; padding:0 17px; border:0; border-radius:12px; background:var(--rh-indigo); color:#fff; font:750 10px/1 inherit; box-shadow:0 10px 22px rgba(89,101,216,.2); cursor:pointer; }.relay-demo-actions button:disabled { opacity:.6; cursor:wait; }
.relay-demo-report { padding:25px; background:#173e3c; color:#fff; }.relay-demo-report > header { display:flex; align-items:flex-start; justify-content:space-between; }.relay-demo-report header div { display:flex; flex-direction:column; gap:5px; }.relay-demo-report header span { color:#9bc1bb; font-size:9px; }.relay-demo-report header b { font-size:15px; }.relay-demo-report header i { padding:5px 8px; border-radius:999px; background:rgba(223,243,233,.12); color:#b9e7d7; font:700 8px/1 inherit; }
.relay-report-chart { position:relative; height:155px; margin:25px 0 19px; overflow:hidden; border-radius:13px; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 31px,rgba(255,255,255,.1) 32px); }.relay-report-chart svg { width:100%; height:130px; }.relay-report-chart path.area { fill:url(#relayChartFill); }.relay-report-chart path.line { fill:none; stroke:#72d7bc; stroke-width:3; vector-effect:non-scaling-stroke; }.relay-report-chart > span { position:absolute; left:12px; bottom:8px; color:#8cafaa; font-size:8px; }
.relay-report-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.relay-report-metrics span { padding:11px; display:flex; flex-direction:column; gap:5px; border:1px solid rgba(255,255,255,.09); border-radius:11px; background:rgba(255,255,255,.05); color:#9fbdb9; font-size:8px; }.relay-report-metrics b { color:#fff; font-size:13px; }.relay-demo-report > p { margin:18px 0; color:#9fb9b5; font-size:9px; line-height:1.6; }.relay-demo-report > a { color:#9be4d1; font-size:9px; font-weight:750; text-decoration:none; }
.relay-bento { border-top:1px solid rgba(22,59,58,.1); }.relay-bento-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:12px; }.relay-bento-grid article { min-height:310px; padding:29px; overflow:hidden; border:1px solid rgba(22,59,58,.1); border-radius:23px; box-sizing:border-box; }.relay-card-tag { color:#738d89; font-size:9px; font-weight:850; letter-spacing:.13em; }.relay-bento-grid h3 { margin:22px 0 11px; font-size:27px; line-height:1.18; letter-spacing:-.04em; }.relay-bento-grid p { max-width:590px; margin:0; color:#607875; font-size:11px; line-height:1.75; }
.relay-bento-ai { background:linear-gradient(135deg,#dff3e9,#f1f8ee); }.relay-mini-chat { width:78%; margin:28px 0 0 auto; display:flex; flex-direction:column; gap:7px; }.relay-mini-chat span,.relay-mini-chat b { padding:12px 14px; border-radius:14px; font-size:9px; }.relay-mini-chat span { align-self:flex-end; background:#fff; color:#5f7774; box-shadow:0 8px 24px rgba(36,84,82,.08); }.relay-mini-chat b { align-self:flex-start; background:var(--rh-ink); color:#fff; }
.relay-bento-factor { position:relative; background:#fff6ee; }.relay-dot-map { position:absolute; right:-20px; bottom:-24px; width:230px; display:grid; grid-template-columns:repeat(8,1fr); gap:9px; transform:rotate(-8deg); }.relay-dot-map i { width:8px; height:8px; border-radius:50%; background:var(--rh-coral); opacity:.2; }.relay-dot-map i:nth-child(3n),.relay-dot-map i:nth-child(7n) { opacity:.75; transform:scale(1.5); }
.relay-bento-report { background:#eef0ff; }.relay-bento-report > div { margin-top:45px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.relay-bento-report > div span { padding:14px; display:flex; flex-direction:column; gap:6px; border-radius:13px; background:rgba(255,255,255,.62); color:#7c83ad; font-size:8px; }.relay-bento-report > div b { color:#37418c; font-size:11px; }
.relay-bento-paper { background:var(--rh-paper); }.relay-paper-row { margin-top:55px; padding:15px; display:flex; justify-content:space-between; border:1px solid rgba(22,59,58,.1); border-radius:13px; color:#58726f; font-size:9px; }.relay-paper-row span { display:flex; align-items:center; gap:8px; }.relay-paper-row span i { width:7px; height:7px; border-radius:50%; background:#31b091; box-shadow:0 0 0 5px rgba(49,176,145,.12); }.relay-paper-row b { color:#16806c; }
.relay-journey { display:grid; grid-template-columns:.82fr 1.18fr; gap:100px; align-items:center; border-top:1px solid rgba(22,59,58,.1); }.relay-journey-copy > p { margin:20px 0 28px; color:#657d79; font-size:13px; line-height:1.8; }.relay-journey ol { margin:0; padding:0; list-style:none; border-top:1px solid rgba(22,59,58,.14); }.relay-journey li { min-height:104px; padding:18px 4px; display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:12px; border-bottom:1px solid rgba(22,59,58,.14); }.relay-journey li > b { color:var(--rh-coral); font-size:10px; }.relay-journey h3 { margin:0 0 6px; font-size:17px; }.relay-journey li p { margin:0; color:#718783; font-size:10px; }.relay-journey li > i { padding:6px 9px; border-radius:999px; background:var(--rh-mint); color:#287064; font:700 8px/1 inherit; }
.relay-deploy { position:relative; padding:75px; display:grid; grid-template-columns:1.2fr .8fr; gap:70px; overflow:hidden; border-radius:34px; background:var(--rh-indigo); color:#fff; box-sizing:border-box; }.relay-deploy::after { content:""; position:absolute; width:360px; height:360px; right:-170px; top:-170px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025); }.relay-deploy > div > span { color:#ffd1c4; }.relay-deploy p { margin:22px 0; max-width:650px; color:#d9dcff; font-size:12px; line-height:1.75; }.relay-deploy-pills { display:flex; flex-wrap:wrap; gap:7px; }.relay-deploy-pills span { padding:7px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#edf0ff; font-size:8px; }.relay-deploy aside { position:relative; z-index:1; padding:25px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid rgba(255,255,255,.15); border-radius:20px; background:rgba(255,255,255,.09); backdrop-filter:blur(12px); }.relay-deploy aside small { color:#c9cdf7; font-size:9px; }.relay-deploy aside b { margin:26px 0; font-size:18px; line-height:1.45; }.relay-deploy aside button { min-height:43px; padding:0 15px; border:0; border-radius:12px; background:var(--rh-coral); color:#fff; font:750 10px/1 inherit; cursor:pointer; }.relay-deploy aside p { margin:auto 0 0; padding-top:22px; color:#c4c9f1; font-size:8px; }
.relay-final { min-height:470px; padding:100px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.relay-final > span { color:var(--rh-coral); font-size:10px; font-weight:850; letter-spacing:.16em; }.relay-final h2 { margin:12px 0; font-size:clamp(42px,6vw,76px); letter-spacing:-.065em; }.relay-final p { margin:0 0 28px; color:#6c827f; font-size:12px; }.relay-final > div { display:flex; gap:9px; }
.relay-contact-modal { position:fixed; inset:0; z-index:1200; display:none; place-items:center; padding:20px; }.relay-contact-modal.open { display:grid; }.relay-contact-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(10,35,33,.56); backdrop-filter:blur(7px); cursor:pointer; }.relay-contact-modal > section { position:relative; width:min(590px,100%); padding:26px; border-radius:25px; background:var(--rh-paper); box-shadow:0 30px 90px rgba(9,35,32,.3); }.relay-contact-modal header { display:flex; justify-content:space-between; }.relay-contact-modal h2 { margin:5px 0 0; font-size:27px; }.relay-contact-modal header > button { width:36px; height:36px; border:1px solid rgba(22,59,58,.12); border-radius:11px; background:#fff; color:var(--rh-ink); font-size:20px; cursor:pointer; }.relay-contact-modal > section > p { color:#667d79; font-size:11px; line-height:1.7; }.relay-contact-modal section > div { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.relay-contact-modal figure { margin:0; padding:11px; border:1px solid rgba(22,59,58,.1); border-radius:14px; background:#f7f7f1; text-align:center; }.relay-contact-modal figure img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:9px; }.relay-contact-modal figcaption { margin-top:7px; font-size:9px; font-weight:700; }.relay-contact-modal section > small { display:block; margin-top:15px; color:#8a9a97; font-size:8px; }
@media (max-width:1050px) { .relay-hero { grid-template-columns:1fr; min-height:auto; padding-top:90px; }.relay-hero-copy { max-width:760px; }.relay-hero-visual { max-width:850px; }.relay-lab-shell { grid-template-columns:175px 1fr; }.relay-demo-report { grid-column:1/-1; }.relay-lab-main { border-right:0; }.relay-bento-grid { grid-template-columns:1fr 1fr; }.relay-journey { gap:50px; }.relay-deploy { padding:54px; gap:40px; } }
@media (max-width:760px) { .relay-section { width:calc(100% - 28px); padding:76px 0; }.relay-hero { padding:66px 16px; gap:48px; }.relay-hero h1 { font-size:48px; }.relay-image-frame img { min-height:300px; }.relay-float-run { right:-7px; }.relay-float-ai { left:-5px; bottom:20px; }.relay-marquee > div { width:max-content; justify-content:flex-start; padding:0 18px; gap:20px; }.relay-section-head { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:28px; }.relay-lab-shell { grid-template-columns:1fr; overflow:visible; }.relay-lab-steps { padding:8px; display:grid; grid-template-columns:repeat(3,1fr); border-right:0; border-bottom:1px solid rgba(22,59,58,.09); }.relay-lab-steps > button { min-height:58px; padding:8px; gap:7px; }.relay-lab-steps button small,.relay-lab-note { display:none; }.relay-lab-main { padding:20px; }.relay-demo-form { grid-template-columns:1fr; }.relay-demo-actions { align-items:stretch; flex-direction:column; }.relay-demo-actions button { width:100%; }.relay-demo-report { padding:20px; }.relay-bento-grid { grid-template-columns:1fr; }.relay-bento-grid article { min-height:285px; }.relay-journey { grid-template-columns:1fr; gap:45px; }.relay-deploy { width:calc(100% - 28px); padding:35px 24px; grid-template-columns:1fr; gap:30px; }.relay-deploy h2 { font-size:38px; }.relay-final { min-height:390px; }.relay-contact-modal section > div { gap:6px; }.relay-contact-modal > section { padding:20px; } }
@media (max-width:480px) { .relay-hero h1 { font-size:42px; }.relay-trust-row { gap:18px; }.relay-float-card { display:none; }.relay-image-frame { border-radius:22px; }.relay-image-frame img { min-height:230px; border-radius:15px; }.relay-lab-steps button > b { display:none; }.relay-report-metrics,.relay-bento-report > div { grid-template-columns:1fr 1fr; }.relay-contact-modal figcaption { font-size:8px; } }

/* Simulation order desk */
body.trade-page { background: #f4f4f2; }
.trade-page-shell { width: min(1240px, calc(100% - 34px)); margin: 0 auto; padding: 26px 0 60px; }
.trade-page-head { min-height: 78px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.trade-page-head span { color: #999; font-size: 9px; font-weight: 800; letter-spacing: .16em; }.trade-page-head h1 { margin: 4px 0 2px; font-size: 29px; letter-spacing: -.04em; }.trade-page-head p { margin: 0; color: #777; font-size: 11px; }.trade-page-head a { height: 36px; padding: 0 13px; display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 10px; background: #fff; color: #333; font-size: 10px; font-weight: 700; text-decoration: none; }
.trade-head-actions { display: flex; gap: 7px; }.trade-head-actions button { height: 36px; padding: 0 13px; border: 1px solid #111; border-radius: 10px; background: #111; color: #fff; font: 700 10px/1 inherit; cursor: pointer; }
.trade-columns { display: grid; grid-template-columns: minmax(360px,.78fr) minmax(470px,1.22fr); gap: 13px; align-items: start; }
.trade-manual-pane, .trade-strategy-pane { margin: 0 !important; padding: 18px !important; border: 1px solid #dededc !important; border-radius: 16px !important; background: #fff !important; }
.trade-card-head { margin-bottom: 15px; display: flex; align-items: baseline; justify-content: space-between; }.trade-card-head span { font-size: 16px; font-weight: 750; }.trade-card-head small { color: #999; font-size: 9px; }
.trade-mode-switch { padding: 3px; border: 0 !important; border-radius: 10px !important; background: #f0f0ee; }.trade-mode-switch button { height: 34px; padding: 0 !important; border-radius: 8px; font-size: 10px !important; }.trade-mode-switch .trade-mode-active { background: #111 !important; color: #fff !important; }
.trade-order-card { padding: 0 !important; border: 0 !important; border-radius: 0 !important; gap: 11px !important; }
.trade-order-card label, .trade-order-card > div { font-size: 10px !important; }.trade-order-card input, .trade-order-card select { min-height: 39px; box-sizing: border-box; border-color: #dedede !important; border-radius: 9px !important; background: #fafafa; font-size: 11px !important; }
.trade-order-card button { min-height: 36px; font-size: 10px !important; }.trade-page #trade-submit-btn { min-height: 42px; border-radius: 10px !important; background: #111 !important; font-size: 11px !important; }
.trade-strategy-pane > h3 { font-size: 16px !important; }.trade-strategy-pane > p { max-width: 680px; line-height: 1.6; }.trade-strategy-pane .bt-input { min-height: 38px; border-color: #dedede; border-radius: 9px; background: #fafafa; color: #222; }
.trade-strategy-pane button { border-radius: 9px; }.trade-strategy-pane table { font-size: 10px; }
@media (max-width: 1000px) { .trade-columns { grid-template-columns: 1fr; }.trade-manual-pane { max-width: none; }.trade-page-shell { width: min(760px,calc(100% - 28px)); } }

/* n8n-style visual automation builder */
body.automation-page { background: #f4f4f2; }
.automation-shell { max-width: 1500px !important; padding: 24px 18px 60px !important; }
.wf-builder-card { margin-top: 22px; border: 1px solid #dcdcd9; border-radius: 18px; overflow: hidden; background: #fff; }
.wf-builder-head { min-height: 86px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e5e5e3; }
.wf-builder-head h3 { margin: 3px 0; color: #222; font-size: 18px; }.wf-builder-head p { margin: 0; color: #858585; font-size: 10px; }.wf-beta { color: #27845f; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.wf-builder-head > div:last-child { display: flex; gap: 7px; }.wf-ghost, .wf-run { height: 36px; padding: 0 12px; border-radius: 9px; font: 700 10px/1 inherit; cursor: pointer; }.wf-ghost { border: 1px solid #ddd; background: #fff; color: #555; }.wf-run { border: 1px solid #111; background: #111; color: #fff; }.wf-run:disabled { opacity: .5; cursor: wait; }
.wf-builder-layout { height: 570px; display: grid; grid-template-columns: 190px minmax(500px,1fr) 230px; }
.wf-palette { padding: 14px 11px; border-right: 1px solid #e5e5e3; background: #fafafa; overflow-y: auto; }.wf-palette > strong { display: block; color: #333; font-size: 11px; }.wf-palette > small { display: block; margin: 3px 0 12px; color: #aaa; font-size: 8px; }.wf-palette > button { width: 100%; min-height: 53px; margin-bottom: 6px; padding: 7px 9px; display: flex; align-items: center; gap: 9px; border: 1px solid #e0e0de; border-radius: 10px; background: #fff; color: #333; text-align: left; cursor: grab; }.wf-palette > button:hover { border-color: #999; box-shadow: 0 4px 15px rgba(0,0,0,.05); }.wf-palette > button > i { width: 27px; height: 27px; display: grid; place-items: center; flex: none; border-radius: 8px; background: #111; color: #fff; font-style: normal; }.wf-palette > button > span { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; }.wf-palette > button small { color: #999; font-size: 8px; font-weight: 500; }
.wf-canvas-wrap { min-width: 0; display: flex; flex-direction: column; background: #f5f5f3; }.wf-canvas-toolbar { height: 39px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #e2e2df; background: #fff; color: #666; font-size: 9px; }.wf-canvas-toolbar span { display: flex; align-items: center; gap: 6px; }.wf-canvas-toolbar span i { width: 6px; height: 6px; border-radius: 50%; background: #46a77c; }.wf-canvas-toolbar b { margin-left: auto; color: #999; font-weight: 600; }.wf-canvas-toolbar button { border: 0; background: transparent; color: #888; font-size: 9px; cursor: pointer; }
.wf-canvas { position: relative; flex: 1; min-height: 0; overflow: auto; background-color: #f6f6f4; background-image: radial-gradient(#d5d5d1 .7px, transparent .7px); background-size: 18px 18px; }.wf-canvas > svg { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }.wf-edge { fill: none; stroke: #9b9b95; stroke-width: 1.5; stroke-dasharray: 4 3; }
.wf-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: #999; pointer-events: none; }.wf-empty[hidden] { display: none; }.wf-empty b { color: #777; font-size: 12px; }.wf-empty span { margin-top: 5px; font-size: 9px; }
.wf-node { position: absolute; z-index: 2; width: 158px; height: 76px; padding: 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #d8d8d5; border-radius: 11px; background: #fff; color: #333; text-align: left; cursor: grab; box-shadow: 0 5px 15px rgba(0,0,0,.05); touch-action: none; }.wf-node.selected { border-color: #111; box-shadow: 0 0 0 2px rgba(0,0,0,.08),0 8px 20px rgba(0,0,0,.08); }.wf-node > i { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: 8px; background: #111; color: #fff; font-style: normal; }.wf-node > span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }.wf-node > span b { font-size: 10px; }.wf-node > span small { overflow: hidden; color: #999; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }.wf-node > em { position: absolute; right: -5px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #888; }.wf-node.running { border-color: #d7972c; animation: wf-pulse 1s infinite; }.wf-node.done { border-color: #3c9a72; }.wf-node.error { border-color: #d45c5c; }.wf-node.done > em { background: #3c9a72; }.wf-node.error > em { background: #d45c5c; }@keyframes wf-pulse { 50% { box-shadow: 0 0 0 5px rgba(215,151,44,.12); } }
.wf-runlog { max-height: 120px; overflow-y: auto; padding: 8px 11px; border-top: 1px solid #dededb; background: #171717; color: #bbb; font: 8px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }.wf-runlog div.ok { color: #72d4aa; }.wf-runlog div.warn { color: #e5bf72; }.wf-runlog div.error { color: #ef8585; }
.wf-config { padding: 14px; border-left: 1px solid #e5e5e3; background: #fff; overflow-y: auto; }.wf-config-empty { min-height: 300px; display: grid; place-content: center; justify-items: center; text-align: center; }.wf-config-empty > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f0f0ee; }.wf-config-empty b { margin-top: 10px; font-size: 11px; }.wf-config-empty p { max-width: 160px; margin: 5px 0; color: #999; font-size: 8px; line-height: 1.5; }.wf-config > header { display: flex; align-items: center; gap: 8px; padding-bottom: 13px; border-bottom: 1px solid #eee; }.wf-config > header > i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; background: #111; color: #fff; font-style: normal; }.wf-config > header > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.wf-config > header b { font-size: 11px; }.wf-config > header small { color: #999; font-size: 7px; }.wf-config > header button { margin-left: auto; border: 0; background: transparent; color: #999; font-size: 18px; cursor: pointer; }.wf-config-fields { padding-top: 12px; display: grid; gap: 10px; }.wf-config-fields label { display: grid; gap: 4px; color: #777; font-size: 8px; font-weight: 650; }.wf-config-fields input, .wf-config-fields select { width: 100%; height: 35px; padding: 0 8px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; color: #222; font-size: 9px; }
@media (max-width: 1100px) { .wf-builder-layout { grid-template-columns: 160px minmax(450px,1fr) 210px; }.wf-palette > button > span small { display: none; } }
@media (max-width: 860px) { .automation-shell { padding: 14px 10px 75px !important; }.wf-builder-head { align-items: flex-start; flex-direction: column; }.wf-builder-layout { height: auto; grid-template-columns: 1fr; }.wf-palette { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; border-right: 0; border-bottom: 1px solid #ddd; }.wf-palette > strong,.wf-palette > small { grid-column: 1/-1; }.wf-palette > button { margin: 0; }.wf-canvas { height: 380px; flex: none; }.wf-config { min-height: 220px; border-left: 0; border-top: 1px solid #ddd; } }

/* Professional infinite workflow canvas */
.wf-builder-layout{height:720px;grid-template-columns:205px minmax(520px,1fr) 300px}.wf-palette{padding:15px 12px}.wf-palette>em{display:block;margin:14px 4px 7px;color:#999;font-size:7px;font-style:normal;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.wf-palette>button{min-height:58px}.wf-palette>button>i{width:30px;height:30px}.wf-palette>button>span{font-size:10px}.wf-palette>button small{font-size:7px}
.wf-canvas-toolbar{height:44px;padding:0 12px}.wf-canvas-toolbar>b{margin-left:0}.wf-zoom-tools{margin-left:auto;display:flex;align-items:center;border:1px solid #e1e1de;border-radius:8px;overflow:hidden;background:#fafafa}.wf-zoom-tools button{height:26px;min-width:28px;padding:0 7px;border:0;border-right:1px solid #e5e5e2;background:transparent;color:#555;font-size:9px;cursor:pointer}.wf-zoom-tools button:last-child{border-right:0}.wf-zoom-tools button:hover{background:#ececea;color:#111}#wf-zoom-value{min-width:46px;font-variant-numeric:tabular-nums}
.wf-canvas{position:relative;overflow:hidden;cursor:grab;background-color:#f7f7f5;background-image:radial-gradient(#d1d1cc .75px,transparent .75px);background-size:var(--wf-grid-size,20px) var(--wf-grid-size,20px);background-position:var(--wf-grid-x,0) var(--wf-grid-y,0);user-select:none;touch-action:none}.wf-canvas.panning{cursor:grabbing}.wf-scene{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0;will-change:transform}.wf-scene>#wf-node-layer{position:absolute;inset:0}.wf-scene>#wf-edges{position:absolute;left:0;top:0;width:1px;height:1px;z-index:1;overflow:visible;pointer-events:none}.wf-edge{stroke:#92928d;stroke-width:1.7;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}.wf-edge.branch-true{stroke:#2f9770}.wf-edge.branch-false{stroke:#b07171}.wf-edge-label{font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;fill:#2f9770}.wf-edge-label.false{fill:#b07171}
.wf-empty{inset:auto;left:0;top:0;width:1px;height:1px;min-width:340px;min-height:120px;transform:translate(-170px,-60px)}.wf-empty b{font-size:13px}.wf-empty span{font-size:8px;white-space:nowrap}
.wf-node{width:188px;height:88px;padding:13px 14px;gap:10px;border-radius:14px;cursor:grab;overflow:visible}.wf-node:active{cursor:grabbing}.wf-node>i{width:36px;height:36px;border-radius:10px}.wf-node>span b{font-size:11px}.wf-node>span small{max-width:118px;font-size:7px}.wf-node>mark{position:absolute;left:14px;top:-8px;padding:3px 6px;border:1px solid #dededb;border-radius:99px;background:#fff;color:#999;font-size:6px;font-weight:750}.wf-node.skipped{opacity:.5;border-style:dashed}.wf-node.skipped>i{background:#888}.wf-node.running{z-index:5}.wf-node.done{box-shadow:0 5px 18px rgba(40,145,103,.08)}
.wf-port{position:absolute;z-index:5;width:14px;height:14px;padding:0;border:2px solid #fff;border-radius:50%;background:#858580;box-shadow:0 0 0 1px rgba(0,0,0,.08);cursor:pointer;transition:transform .15s,background .15s}.wf-port:hover{transform:scale(1.35);background:#111}.wf-port-in{left:-7px;top:37px;cursor:default}.wf-port-out{right:-7px;top:37px}.wf-port-out>span{position:absolute;left:18px;top:50%;padding:3px 5px;border-radius:5px;background:#171717;color:#fff;font-size:7px;font-weight:800;opacity:0;pointer-events:none;transform:translateY(-50%);white-space:nowrap}.wf-port-out:hover>span{opacity:1}.wf-node .wf-port-out.true{top:19px;background:#2f9770}.wf-node .wf-port-out.false{top:58px;background:#b07171}.wf-node .wf-port-out.true>span,.wf-node .wf-port-out.false>span{left:17px}.wf-node.done .wf-port-out{background:#3c9a72}
.wf-minimap{position:absolute;right:12px;bottom:12px;width:150px;height:90px;border:1px solid rgba(0,0,0,.12);border-radius:9px;background:rgba(255,255,255,.88);box-shadow:0 7px 22px rgba(0,0,0,.08);backdrop-filter:blur(8px);overflow:hidden;pointer-events:none}.wf-minimap svg{width:100%;height:100%}.wf-minimap rect{fill:#9b9b96}.wf-minimap rect.selected{fill:#202020}.wf-minimap rect.viewport{fill:rgba(47,151,112,.08);stroke:#2f9770;stroke-width:4;vector-effect:non-scaling-stroke}.wf-minimap>span{position:absolute;left:6px;bottom:4px;color:#999;font-size:5px;font-weight:800;letter-spacing:.12em}
.wf-canvas-help{position:absolute;left:12px;bottom:12px;padding:6px 8px;border:1px solid rgba(0,0,0,.08);border-radius:7px;background:rgba(255,255,255,.82);color:#92928d;font-size:7px;pointer-events:none;backdrop-filter:blur(5px)}
.wf-append-menu{position:absolute;z-index:30;width:278px;max-height:370px;padding:11px;border:1px solid #d8d8d5;border-radius:14px;background:#fff;box-shadow:0 20px 55px rgba(0,0,0,.16);overflow:auto}.wf-append-menu[hidden]{display:none}.wf-append-menu header{display:flex;align-items:center;justify-content:space-between}.wf-append-menu header b{font-size:11px}.wf-append-menu header button{width:25px;height:25px;border:0;border-radius:7px;background:#f1f1ef;color:#777;cursor:pointer}.wf-append-menu>p{margin:3px 0 9px;color:#999;font-size:7px}.wf-append-menu>div{display:grid;grid-template-columns:1fr 1fr;gap:5px}.wf-append-menu [data-append-type]{min-height:54px;padding:7px;display:flex;align-items:center;gap:7px;border:1px solid #e4e4e1;border-radius:9px;background:#fff;color:#333;text-align:left;cursor:pointer}.wf-append-menu [data-append-type]:hover{border-color:#777;background:#f7f7f5}.wf-append-menu [data-append-type]>i{width:27px;height:27px;display:grid;place-items:center;flex:none;border-radius:7px;background:#171717;color:#fff;font-style:normal}.wf-append-menu [data-append-type]>span{min-width:0;display:flex;flex-direction:column;gap:2px}.wf-append-menu [data-append-type] b{font-size:8px}.wf-append-menu [data-append-type] small{overflow:hidden;color:#999;font-size:6px;text-overflow:ellipsis;white-space:nowrap}
.wf-config{padding:15px}.wf-config>header{position:sticky;top:-15px;z-index:2;margin:-15px -15px 0;padding:15px;background:#fff}.wf-config-fields{gap:13px}.wf-config-section{padding:0;border:0}.wf-config-section+section{padding-top:13px;border-top:1px solid #ececea}.wf-config-section h4{margin:0 0 10px;color:#999;font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.wf-config-section label{margin-bottom:9px}.wf-config-fields input,.wf-config-fields select,.wf-config-fields textarea{width:100%;box-sizing:border-box;border:1px solid #dededb;border-radius:8px;background:#fafafa;color:#222;font-size:9px}.wf-config-fields input,.wf-config-fields select{height:35px;padding:0 8px}.wf-config-fields textarea{min-height:90px;padding:8px;resize:vertical;font-family:inherit;line-height:1.5}.wf-config-fields .wf-check{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid #e4e4e1;border-radius:8px;background:#fafafa}.wf-config-fields .wf-check input{width:15px;height:15px}.wf-config-note{margin:0;padding:8px;border-radius:7px;background:#f3f3f1;color:#888;font-size:7px;line-height:1.5}
@media(max-width:1200px){.wf-builder-layout{grid-template-columns:175px minmax(470px,1fr) 260px}.wf-palette>button small{display:none}}@media(max-width:860px){.wf-builder-layout{height:auto;grid-template-columns:1fr}.wf-palette{display:grid;grid-template-columns:repeat(3,1fr)}.wf-palette>em{grid-column:1/-1}.wf-canvas{height:500px}.wf-minimap{width:110px;height:70px}.wf-config{max-height:480px}.wf-zoom-tools{margin-left:0}.wf-canvas-toolbar{flex-wrap:wrap;height:auto;min-height:48px;padding:7px}}
body.dashboard-page #dashboard-app {
    width: 100%; max-width: 1440px; margin: 0 auto; padding: 14px 16px 28px;
    display: flex; flex-direction: column; box-sizing: border-box;
}
.dash-page-head {
    order: 0; min-height: 70px; display: flex; align-items: center; justify-content: space-between;
    gap: 18px; padding: 8px 4px 14px;
}
.dash-page-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-page-icon {
    width: 38px; height: 38px; display: grid; place-items: center; flex: none;
    border-radius: 12px; background: #111; color: #fff; font-size: 13px;
    box-shadow: 0 5px 14px rgba(0,0,0,.12);
}
.dash-title-row { display: flex; align-items: center; gap: 9px; }
.dash-title-row h1 { margin: 0; color: #171717; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.dash-live-dot {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
    border: 1px solid #dfe9e4; border-radius: 999px; background: #f5faf7;
    color: #39705a; font-size: 10px; font-weight: 650;
}
.dash-live-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #39a476; }
.dash-page-title p { margin: 3px 0 0; color: #8a8a8a; font-size: 11px; }
.dash-page-actions { display: flex; align-items: center; gap: 8px; }
.dash-ghost-btn, .dash-primary-btn {
    height: 34px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 13px; border-radius: 10px; font: 650 11.5px/1 inherit; text-decoration: none; cursor: pointer;
}
.dash-ghost-btn { border: 1px solid #dedede; background: #fff; color: #555; }
.dash-ghost-btn:hover { background: #f7f7f7; color: #111; }
.dash-primary-btn { border: 1px solid #111; background: #111; color: #fff; }
.dash-primary-btn:hover { background: #2b2b2b; }
.dash-view-tabs {
    order: 1; display: flex; align-items: center; gap: 3px; margin-bottom: 12px; padding: 4px;
    border: 1px solid #e2e2e2; border-radius: 12px; background: #fff; overflow-x: auto;
}
.dash-view-tabs a {
    min-width: 88px; height: 31px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; color: #777; font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.dash-view-tabs a:hover { color: #111; background: #f4f4f4; }
.dash-view-tabs a.active { color: #fff; background: #111; }
body.dashboard-page .dash-loading { order: 2; padding: 70px 20px; }
body.dashboard-page .dash-summary {
    order: 2; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px;
}
body.dashboard-page .summary-card {
    min-width: 0; min-height: 104px; padding: 15px 16px; border-color: #e2e2e2;
    border-radius: 13px; box-shadow: none; background: #fff;
}
body.dashboard-page .summary-card::after { display: none; }
body.dashboard-page .summary-card:hover { border-color: #c9c9c9; box-shadow: 0 6px 20px rgba(0,0,0,.045); transform: none; }
body.dashboard-page .summary-label {
    margin-bottom: 10px; color: #888; font-size: 10px; font-weight: 600;
    letter-spacing: .02em; text-transform: none;
}
body.dashboard-page .summary-value { color: #1f1f1f; font-size: 20px; font-weight: 720; letter-spacing: -.025em; }
body.dashboard-page .summary-sub { margin-top: 3px; font-size: 11px; }
body.dashboard-page .editable-input { font-size: 18px; }
body.dashboard-page .investment-save-btn { width: 28px; height: 28px; border-width: 1px; }
body.dashboard-page .investment-save-btn:hover { background: #111; border-color: #111; box-shadow: none; transform: none; }

.dash-section-heading { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 9px; }
.dash-section-heading h2 { margin: 0; color: #202020; font-size: 14px; }
.dash-section-heading p { margin: 2px 0 0; color: #999; font-size: 10.5px; }
.dash-analysis-heading { order: 4; }
body.dashboard-page #dash-paper { order: 3; }
body.dashboard-page #dash-charts { order: 5; }
body.dashboard-page #dash-charts-row2 { order: 6; }
body.dashboard-page #dash-trend { order: 7; }
body.dashboard-page #dash-holdings { order: 8; }
body.dashboard-page #dash-empty { order: 9; }
body.dashboard-page .dash-charts { gap: 8px; margin-bottom: 8px; }
body.dashboard-page .dash-trend { margin-bottom: 8px; }
body.dashboard-page .dash-chart-card {
    padding: 15px; border-color: #e2e2e2; border-radius: 13px; box-shadow: none;
}
body.dashboard-page .dash-chart-card:hover { box-shadow: none; }
body.dashboard-page .dash-chart-card h4 { margin: 0 0 10px; font-size: 12px; }
body.dashboard-page .dash-chart-card .chart-wrapper { max-height: 270px; }

body.dashboard-page .dash-holdings {
    margin-bottom: 10px; border-color: #e2e2e2; border-radius: 14px; box-shadow: none; background: #fff;
}
body.dashboard-page #dash-paper { overflow: hidden; }
.paper-results-header {
    min-height: 66px; padding: 12px 15px !important; display: flex; align-items: center !important;
    border-bottom: 1px solid #ededed;
}
.paper-title-wrap { display: flex; align-items: center; gap: 10px; }
.paper-title-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #111; color: #fff; font-size: 13px; }
.paper-title-wrap h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: #202020; font-size: 14px; }
.paper-title-wrap p { margin: 3px 0 0; color: #999; font-size: 10px; }
body.dashboard-page .paper-badge { padding: 2px 7px; border-radius: 999px; background: #f1f1f1; color: #666; font-size: 9px; }
body.dashboard-page .paper-header-actions { gap: 7px; }
body.dashboard-page .paper-reset-btn, body.dashboard-page .paper-trade-link {
    height: 30px; display: inline-flex; align-items: center; padding: 0 11px;
    border: 1px solid #dedede; border-radius: 9px; background: #fff;
    color: #555; font-size: 10.5px; font-weight: 600; text-decoration: none;
}
body.dashboard-page .paper-reset-btn:hover { border-color: #d7aaaa; color: #b44343; }
body.dashboard-page .paper-trade-link { border-color: #111; background: #111; color: #fff; }
body.dashboard-page .paper-trade-link:hover { text-decoration: none; background: #292929; }
body.dashboard-page .paper-summary {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    margin: 0; padding: 12px 14px; border-bottom: 1px solid #ededed; background: #fafafa;
}
body.dashboard-page .paper-summary:empty { display: none; }
.paper-account-card { padding: 12px 13px; border: 1px solid #e4e4e4; border-radius: 12px; background: #fff; }
.paper-account-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.paper-account-head span { color: #333; font-size: 11px; font-weight: 700; }
.paper-account-head i { padding: 2px 6px; border-radius: 999px; background: #f2f2f2; color: #888; font: normal 9px/1.4 inherit; }
.paper-account-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.paper-account-metrics > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.paper-account-metrics small { color: #999; font-size: 9.5px; }
.paper-account-metrics b { overflow: hidden; color: #222; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.paper-account-metrics em { color: #aaa; font: normal 9px/1.2 inherit; }
body.dashboard-page .paper-empty {
    min-height: 190px; margin: 0; padding: 28px 20px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 0; background: #fff; text-align: center;
}
.paper-empty-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 11px; background: #f1f1f1; color: #555; font-size: 17px; }
body.dashboard-page .paper-empty b { color: #333; font-size: 13px; }
body.dashboard-page .paper-empty small { color: #999; font-size: 10.5px; }
body.dashboard-page .paper-empty a { margin-top: 4px; padding: 7px 12px; border-radius: 8px; background: #111; color: #fff; font-size: 10.5px; text-decoration: none; }
body.dashboard-page .paper-orders-wrap, body.dashboard-page .paper-strategy-wrap { margin: 0; padding: 14px; border-top: 1px solid #ededed; }
body.dashboard-page .paper-orders-wrap h4, body.dashboard-page .paper-strategy-wrap h4 { margin: 0 0 10px; font-size: 12px; }
body.dashboard-page .paper-disclaimer { margin: 0; padding: 9px 14px; border-top: 1px solid #ededed; background: #fafafa; color: #999; font-size: 9.5px; }
body.dashboard-page #paper-table, body.dashboard-page #paper-orders-table,
body.dashboard-page #paper-strategy-table, body.dashboard-page #holdings-table { border-collapse: collapse; font-size: 11px; }
body.dashboard-page #paper-table th, body.dashboard-page #paper-orders-table th,
body.dashboard-page #paper-strategy-table th, body.dashboard-page #holdings-table th {
    padding: 9px 11px; border-bottom: 1px solid #e9e9e9; background: #fafafa;
    color: #888; font-size: 9.5px; font-weight: 650; text-align: left; white-space: nowrap;
}
body.dashboard-page #paper-table td, body.dashboard-page #paper-orders-table td,
body.dashboard-page #paper-strategy-table td, body.dashboard-page #holdings-table td {
    padding: 10px 11px; border-bottom: 1px solid #f0f0f0; color: #444; white-space: nowrap;
}
body.dashboard-page #paper-table tbody tr:hover, body.dashboard-page #holdings-table tbody tr:hover { background: #fafafa; }
body.dashboard-page .dash-empty { padding: 42px 20px; border: 1px dashed #dedede; border-radius: 13px; box-shadow: none; background: #fafafa; font-size: 11px; }
body.dashboard-page .btai-fab { width: 44px; height: 44px; border-radius: 14px; background: #111; box-shadow: 0 7px 20px rgba(0,0,0,.2); font-size: 18px; }

@media (min-width: 861px) {
    body.dashboard-page .top-bar { display: none !important; }
}
@media (max-width: 1100px) and (min-width: 769px) {
    body.dashboard-page .dash-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    body.dashboard-page { padding-bottom: 60px; }
    body.dashboard-page .top-bar { position: static; display: flex; height: 48px; min-height: 48px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e7e7e7; box-shadow: none; }
    body.dashboard-page .top-bar .logo { color: #18181b; font-size: 15px; text-shadow: none; }
    body.dashboard-page .top-bar .logo span { color: #18181b; background: none; -webkit-text-fill-color: currentColor; }
    body.dashboard-page .top-bar-right { position: static; display: flex; border: 0; box-shadow: none; background: transparent; }
    body.dashboard-page .top-bar-right .main-nav, body.dashboard-page .top-bar-right .lang-toggle, body.dashboard-page .top-bar-right .auth-area { display: none !important; }
    body.dashboard-page .menu-toggle { display: block; color: #222; }
    body.dashboard-page #dashboard-app { padding: 8px 10px 22px; }
    .dash-page-head { min-height: 58px; padding: 5px 2px 9px; }
    .dash-page-icon { width: 34px; height: 34px; }
    .dash-title-row h1 { font-size: 17px; }
    .dash-page-title p { display: none; }
    .dash-page-actions .dash-ghost-btn { display: none; }
    .dash-primary-btn { height: 32px; padding: 0 10px; font-size: 10.5px; }
    .dash-view-tabs { margin-bottom: 8px; }
    .dash-view-tabs a { min-width: 78px; }
    body.dashboard-page .dash-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    body.dashboard-page .summary-card { min-height: 86px; padding: 12px; }
    body.dashboard-page #investment-card { grid-column: span 2; }
    body.dashboard-page .summary-value { font-size: 17px; }
    body.dashboard-page .dash-charts { grid-template-columns: 1fr; }
    .paper-results-header { align-items: flex-start !important; gap: 10px; }
    .paper-title-wrap p { display: none; }
    body.dashboard-page .paper-header-actions { margin-left: auto; }
    body.dashboard-page .paper-reset-btn { display: none; }
    body.dashboard-page .paper-summary { grid-template-columns: 1fr; padding: 9px; }
    .paper-account-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
    body.dashboard-page .paper-empty { min-height: 170px; }
    body.dashboard-page .dash-holdings { overflow-x: auto; }
    body.dashboard-page .btai-fab { bottom: 74px; }
}

/* ── AI strategy tool + direct backtest workflow ───────────── */
.btai-strategy-save {
    display: block; margin: 14px 0 8px; padding: 0; overflow: hidden;
    border: 1px solid #dcdcdc; border-radius: 14px; background: #fff; font-size: 12px;
}
.btai-strategy-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px 8px; }
.btai-strategy-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: none; border-radius: 9px; background: #111; color: #fff; font-size: 13px; }
.btai-strategy-head > div { min-width: 0; }
.btai-strategy-head small { display: block; color: #929292; font-size: 9.5px; line-height: 1.3; }
.btai-strategy-head h4 { margin: 2px 0 0 !important; overflow: hidden; color: #222; font-size: 13.5px !important; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.btai-strategy-head em { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #f0f0f0; color: #666; font: normal 9px/1.4 inherit; }
.btai-strategy-meta { margin: 0 !important; padding: 0 14px 9px; color: #777; font-size: 10.5px; }
.btai-param-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 11px; }
.btai-param-chip { padding: 4px 7px; border: 1px solid #e5e5e5; border-radius: 7px; background: #fafafa; color: #777; font-size: 9.5px; }
.btai-param-chip b { color: #333; font-weight: 650; }
.btai-strategy-actions { min-height: 39px; padding: 6px 10px 7px 14px; display: flex; align-items: center; gap: 9px; border-top: 1px solid #ededed; background: #fafafa; }
.btai-strategy-actions .btai-save-msg { flex: 1; color: #929292; font-size: 9.5px; }
.btai-save-secondary { order: 2; padding: 6px 10px !important; border: 1px solid #d8d8d8 !important; border-radius: 8px !important; background: #fff !important; color: #444 !important; font-size: 10px !important; }
.btai-strategy-save.is-saved .btai-save-secondary { color: #16805b !important; border-color: #b9dfd1 !important; }
.btai-bt-row { border-top: 1px solid #e5e5e5; background: #fff; }
.btai-bt-label { padding: 11px 14px 8px; display: flex; align-items: center; justify-content: space-between; }
.btai-bt-label b { color: #2a2a2a; font-size: 11.5px; }
.btai-bt-label span { color: #999; font-size: 9.5px; }
.btai-bt-fields { display: grid; grid-template-columns: .72fr 1.35fr 1fr .9fr; gap: 7px; padding: 0 14px 11px; }
.btai-bt-fields label { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.btai-bt-fields label > span { color: #999; font-size: 9px; }
.btai-bt-fields .bt-input { width: 100%; height: 31px; box-sizing: border-box; padding: 0 7px; border: 1px solid #dedede; border-radius: 8px; background: #fff; color: #333; font: 500 10.5px/1 inherit; outline: none; }
.btai-bt-fields .bt-input:focus { border-color: #999; box-shadow: 0 0 0 2px rgba(0,0,0,.04); }
.btai-bt-footer { min-height: 45px; padding: 7px 9px 8px 14px; display: flex; align-items: center; gap: 10px; border-top: 1px solid #ededed; background: #fafafa; }
.btai-bt-msg { flex: 1; color: #888; font-size: 9.5px; }
.btai-bt-run { min-width: 112px; padding: 8px 12px !important; border-radius: 9px !important; background: #111 !important; color: #fff !important; font-size: 10.5px !important; }
.btai-bt-run:disabled { cursor: wait; opacity: .65; }
.btai-strategy-save.is-running { border-color: #bdbdbd; box-shadow: 0 0 0 3px rgba(0,0,0,.035); }
.btai-strategy-save.is-complete { border-color: #bcdccc; }
.btai-backtest-report { padding: 12px 14px 14px; border-top: 1px solid #e1eee8; background: #f8fbfa; }
.btai-report-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.btai-report-head div { display: flex; flex-direction: column; }
.btai-report-head small { color: #358264; font-size: 9px; }
.btai-report-head b { color: #222; font-size: 11px; }
.btai-report-head em { color: #777; font: normal 9px/1.4 inherit; }
.btai-report-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.btai-report-metrics > div { padding: 8px; border: 1px solid #e2ebe7; border-radius: 9px; background: #fff; }
.btai-report-metrics span { display: block; margin-bottom: 3px; color: #999; font-size: 8.5px; }
.btai-report-metrics b { color: #222; font-size: 11.5px; }

/* Right-side strategy artifact and full report. */
.wb-artifact-panel { display: none; }
.wb-artifact-panel.active { display: block; }
.wb-flow-card li.done i { background: #dff3e9; color: #17825c; }
.wb-flow-card li.done b { color: #26684f; }
.wb-flow-card li.running i { background: #111; color: #fff; animation: wb-pulse 1.2s ease-in-out infinite; }
.wb-flow-card li.running b { color: #111; }
@keyframes wb-pulse { 50% { box-shadow: 0 0 0 5px rgba(0,0,0,.06); } }
.wb-strategy-summary { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid #e2e2e2; border-radius: 13px; background: #fafafa; }
.wb-strategy-mark { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: #111; color: #fff; }
.wb-strategy-summary small { color: #999; font-size: 9px; }
.wb-strategy-summary h3 { margin: 2px 0 0; color: #222; font-size: 14px; }
.wb-strategy-block { margin-top: 12px; overflow: hidden; border: 1px solid #e4e4e4; border-radius: 12px; background: #fff; }
.wb-block-title { padding: 9px 11px; border-bottom: 1px solid #ededed; background: #fafafa; color: #555; font-size: 10.5px; font-weight: 700; }
.wb-strategy-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 5px 11px; }
.wb-strategy-params > div { padding: 8px 4px; border-bottom: 1px solid #f0f0f0; }
.wb-strategy-params small { display: block; color: #999; font-size: 9px; }
.wb-strategy-params b { display: block; margin-top: 2px; overflow: hidden; color: #333; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.wb-strategy-params > span { grid-column: 1/-1; padding: 14px 3px; color: #999; font-size: 10.5px; }
.wb-strategy-block pre { max-height: 360px; margin: 0; padding: 13px; overflow: auto; background: #fbfbfb; color: #303030; font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.wb-report-state { min-height: 155px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px dashed #dedede; border-radius: 13px; background: #fcfcfc; }
.wb-report-state > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #f0f0f0; color: #555; }
.wb-report-state > div { display: flex; flex-direction: column; gap: 2px; }
.wb-report-state b { color: #333; font-size: 12px; }
.wb-report-state small { max-width: 235px; color: #999; font-size: 9.5px; line-height: 1.5; }
.wb-report-state.running > span { background: #111; color: #fff; animation: wb-pulse 1.2s ease-in-out infinite; }
.wb-report-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.wb-report-title small { color: #888; font-size: 9.5px; }
.wb-report-title h3 { margin: 2px 0 0; color: #222; font-size: 15px; }
.wb-report-title > span { padding: 3px 8px; border-radius: 999px; background: #e4f4ec; color: #237b59; font-size: 9px; }
.wb-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wb-report-grid > div { padding: 10px; border: 1px solid #e4e4e4; border-radius: 11px; background: #fff; }
.wb-report-grid small { display: block; margin-bottom: 4px; color: #999; font-size: 9px; }
.wb-report-grid b { color: #222; font-size: 13px; font-variant-numeric: tabular-nums; }
.wb-report-chart, .wb-report-trades { margin-top: 11px; overflow: hidden; border: 1px solid #e4e4e4; border-radius: 12px; background: #fff; }
.wb-report-chart { height: 235px; }
.wb-report-chart canvas { width: 100% !important; height: 195px !important; padding: 5px 7px 7px; box-sizing: border-box; }
.wb-trade-row { min-height: 47px; padding: 7px 10px; display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 8px; border-bottom: 1px solid #f0f0f0; }
.wb-trade-row:last-child { border-bottom: 0; }
.wb-trade-row > span { min-width: 0; display: flex; flex-direction: column; }
.wb-trade-row small { color: #999; font-size: 8.5px; }
.wb-trade-row b { overflow: hidden; color: #444; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.wb-trade-row em { font: normal 700 10px/1 inherit; }
.wb-trade-row em.positive { color: #17825c; }
.wb-trade-row em.negative { color: #c24a4a; }
.wb-no-trades { padding: 22px; color: #999; font-size: 10px; text-align: center; }

@media (max-width: 640px) {
    .btai-bt-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .btai-report-metrics { grid-template-columns: repeat(2, 1fr); }
    .wb-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   Unified product skin — quiet monochrome, fine borders, no color branding
   ═══════════════════════════════════════════════════════════════ */
:root {
    --bg-primary: #f5f5f3;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f4f4f4;
    --border: #dfdfdc;
    --border-light: #ececea;
    --text-primary: #1d1d1f;
    --text-secondary: #555558;
    --text-muted: #919194;
    --accent-primary: #111111;
    --accent-primary-hover: #2a2a2a;
    --accent-primary-light: rgba(0,0,0,.055);
    --accent-blue: #303033;
    --accent-purple: #555558;
    --nav-bg: #ffffff;
    --nav-text: #252527;
    --nav-text-muted: #858589;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.025);
    --shadow: 0 2px 10px rgba(0,0,0,.035);
    --shadow-lg: 0 7px 24px rgba(0,0,0,.055);
}
body { background: var(--bg-primary); color: var(--text-primary); }
.top-bar {
    background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border);
    box-shadow: none; backdrop-filter: blur(14px);
}
.top-bar .logo, .top-bar .logo span { color: #171719; text-shadow: none; background: none; -webkit-text-fill-color: currentColor; }
.brand-cube { filter: none; }
.top-bar .nav-link, .auth-username, .nav-gear { color: #555558; }
.top-bar .nav-link:hover, .top-bar .nav-link.active { color: #111; background: #f1f1f1; }
.side-nav { background: #fff; border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,.03); }
.sn-brand-txt, .sn-brand-txt b { color: #18181a !important; }
.sn-brand-txt small, .sn-section-label { color: #999 !important; }
.sn-item { color: #57575b; }
.sn-item > i, .sn-group-toggle > i, .sn-lang-row > i {
    width: 22px; min-width: 22px; display: inline-grid; place-items: center;
    color: #4b4b4e; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px;
    font-style: normal; filter: grayscale(1);
}
.sn-item:hover { color: #171719; background: #f3f3f3; }
.sn-item.active { color: #fff; background: #111; box-shadow: none; }
.sn-item.active > i { color: #fff; }
.sn-account-menu { border-color: #ddd; box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.sn-stars, .tier-stars { color: #5f5f62 !important; letter-spacing: .08em; }

.admin-membership-form { display: grid; gap: 6px; min-width: 150px; }
.admin-membership-select {
    width: 100%; padding: 8px 30px 8px 10px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--bg-primary);
    color: var(--text-primary); font-weight: 650; cursor: pointer;
}
.admin-membership-meta { color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.admin-membership-meta b { color: var(--accent-green, #16856a); font-weight: 700; }
.bottom-nav { background: #fff; border-top: 1px solid var(--border); box-shadow: none; }
.bn-ico { color: #444; filter: grayscale(1); }

/* Global components use black for actions; colour is reserved for market state. */
.btn-screen, .chart-btn-primary, .btn-primary, button.primary,
.btai-send, .btai-save-btn, .btai-apply {
    background: #111 !important; border-color: #111 !important; color: #fff !important;
    box-shadow: none !important;
}
.btn-screen:hover, .chart-btn-primary:hover, .btn-primary:hover { background: #292929 !important; transform: none; }
.controls-panel, .search-container, .results-container, .watchlist-section,
.compare-section, .monitor-section, .trade-manual-pane, .trade-strategy-pane,
.dashboard-card, .sl-card, .strategy-card {
    border-color: var(--border) !important; box-shadow: none !important; background: #fff !important;
}
input, select, textarea, .bt-input { border-color: #dededb !important; box-shadow: none; }
input:focus, select:focus, textarea:focus, .bt-input:focus {
    border-color: #969699 !important; box-shadow: 0 0 0 3px rgba(0,0,0,.045) !important;
}
.market-pill.active { background: #111; border-color: #111; box-shadow: none; }
.market-pill:hover { border-color: #888; color: #222; background: rgba(0,0,0,.04); box-shadow: none; transform: none; }

/* Order page */
.trade-page-shell { width: min(1320px, calc(100% - 36px)); }
.trade-page-head h1 { color: #19191b; font-size: 30px; font-weight: 730; }
.trade-page-head > div:first-child > span { color: #aaa; }
.trade-head-actions button, .trade-page-head a { background: #fff !important; color: #333 !important; border: 1px solid #ddd !important; box-shadow: none !important; }
.trade-manual-pane, .trade-strategy-pane { border-radius: 16px !important; }
.trade-mode-switch { background: #f1f1f1; border-color: #e4e4e4 !important; }
.trade-page .trade-mode-btn, .trade-page .trade-side-btn, .trade-page [id^="trade-otype-"] { background: transparent !important; color: #666 !important; }
.trade-page .trade-mode-active, .trade-page .trade-side-active, .trade-page .trade-otype-active {
    background: #111 !important; color: #fff !important;
}
#se-start { background: #111 !important; color: #fff !important; border-color: #111 !important; }
#trade-submit-btn { background: #111 !important; color: #fff !important; border-radius: 10px !important; }
#trade-unlock-section { background: #fafafa !important; border-color: #d9d9d6 !important; }
#trade-unlocked-bar { background: #f5f8f6 !important; border-color: #b8c8c0 !important; }

/* Monitor becomes a light audit console instead of a colourful status board. */
.monitor-page { width: min(1560px, calc(100% - 34px)); max-width: none; padding: 26px 0 60px; }
.monitor-header { min-height: 54px; align-items: flex-start; }
.monitor-header h2 { color: #1c1c1e; font-size: 25px; letter-spacing: -.03em; }
.monitor-status-bar { gap: 7px; }
.monitor-badge { border: 1px solid #e0e0de; border-radius: 999px !important; background: #f5f5f5 !important; color: #555 !important; }
.monitor-banner { border: 1px solid #e5e5e2 !important; border-left: 3px solid #777 !important; background: #fafafa !important; color: #555 !important; }
.monitor-grid { gap: 12px; }
.monitor-section { padding: 17px; border-radius: 15px; }
.monitor-section-header h3, .monitor-section > h3 { color: #222; font-size: 14px; }
.monitor-section-header p { margin: 3px 0 0; color: #969699; font-size: 10px; }
.monitor-record-note { padding: 4px 8px; border-radius: 999px; background: #f1f1f1; color: #777; font-size: 9px; white-space: nowrap; }
.monitor-table th { color: #89898d; font-size: 10px; font-weight: 650; background: #fafafa; }
.monitor-table td { color: #4b4b4e; font-size: 10.5px; }
.monitor-table tr:hover td { background: #fafafa; }
.monitor-table code { padding: 2px 5px; border-radius: 5px; background: #f2f2f2; color: #555; font-size: 9px; }
.monitor-empty-cell { padding: 27px !important; color: #999 !important; text-align: center; }
.mon-mode, .mon-event, .mon-run-status { padding: 3px 7px; border-radius: 999px; background: #f0f0f0; color: #555; font-size: 9px; white-space: nowrap; }
.mon-mode-real { background: #fbeeee; color: #9b3a3a; }
.mon-mode-paper { background: #f1f1f1; color: #444; }
.mon-mode-alert { background: #f6f4ee; color: #746a51; }
.mon-event-start, .mon-event-order, .mon-event-fill { background: #edf5f1; color: #34705a; }
.mon-event-stop, .mon-event-reject, .mon-run-status.warn { background: #f8eeee; color: #9b4848; }
.mon-run-status.ok { background: #f0f0f0; color: #555; }
.mon-code-link { color: #252527 !important; text-decoration-color: #bbb !important; }
#mon-kill-trip { background: #fff !important; color: #b74343 !important; border-color: #e2aaaa !important; }
#mon-bulk-delete, #mon-signals-clear { background: #fff !important; color: #a44242 !important; border-color: #e2b6b6 !important; }
.mon-start-btn { background: #fff !important; color: #333 !important; border-color: #bbb !important; }
.mon-stop-btn { background: #fff !important; color: #8d4444 !important; border-color: #d8b0b0 !important; }
#mon-modal-submit { background: #111 !important; color: #fff !important; border-color: #111 !important; }

/* Remove decorative gradients from the main product surfaces. */
.hero, .landing-hero, .stat-card, .metric-card, .score-card { box-shadow: none !important; }
[class*="gradient"] { background-image: none !important; }

/* Floating AI uses the same monochrome language as the product shell. */
.btai-fab,
body.dashboard-page .btai-fab {
    right: 20px; bottom: 20px;
    width: 46px; height: 46px; padding: 0;
    display: grid; place-items: center;
    border: 1px solid #202020; border-radius: 14px;
    background: #111 !important; color: #fff;
    box-shadow: 0 7px 20px rgba(0,0,0,.16);
    font: 650 19px/1 ui-sans-serif, system-ui, sans-serif;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.btai-fab:hover,
body.dashboard-page .btai-fab:hover {
    background: #282828 !important;
    box-shadow: 0 9px 24px rgba(0,0,0,.2);
    transform: translateY(-1px);
}
.btai-fab:focus-visible {
    outline: 3px solid rgba(0,0,0,.14);
    outline-offset: 3px;
}

.btai-drawer {
    background: #fff !important;
    border-left: 1px solid #dededb;
    box-shadow: -10px 0 30px rgba(0,0,0,.08);
}
.btai-header { padding: 12px 14px; flex-wrap: nowrap; background: #fff; border-color: #e7e7e4; }
.btai-agent-mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: #111; color: #fff; font-size: 14px;
}
.btai-title { color: #222; font-size: 13px; font-weight: 700; }
.btai-title small { margin-top: 2px; color: #9a9a9a; font-size: 9.5px; font-weight: 500; }
.btai-icon-btn {
    border-color: #e1e1df; border-radius: 9px;
    background: #fff; color: #555; box-shadow: none;
}
.btai-icon-btn:hover { border-color: #c7c7c4; background: #f5f5f3; color: #111; }
.btai-mode, .btai-mode.full, .btai-mode.sandbox {
    background: #f1f1ef; color: #69696c;
}
.btai-mode.err { background: #f8eeee; color: #984747; }
.btai-log { background: #fff; }
.btai-empty { color: #838386; }
.btai-chip { filter: grayscale(1); }
.btai-user {
    border-left-color: #333;
    background: #f2f2f0;
    color: #29292b;
}
.btai-tool { border-color: #dededb; background: #f7f7f5; }
.btai-tool-name { color: #333; }
.btai-tool-result pre { border-left-color: #aaa; background: #f6f6f4; }
.btai-dots span { background: #777; }
.btai-form { border-color: #e5e5e2; background: #fff; }
.btai-form textarea { border-color: #dededb; border-radius: 11px; background: #fff; }
.btai-form textarea:focus { border-color: #969699; box-shadow: 0 0 0 3px rgba(0,0,0,.045); }
.btai-model-wrap { border-color: #dededb; background: #f5f5f3; }
.btai-model:focus { border-color: #969699; box-shadow: none; }
.btai-send { border-radius: 10px; background: #111 !important; box-shadow: none; }
.btai-send:hover:not(:disabled) { background: #292929 !important; opacity: 1; }

@media (max-width: 640px) {
    .btai-fab,
    body.dashboard-page .btai-fab { right: 14px; bottom: 74px; width: 44px; height: 44px; border-radius: 13px; }
}

/* ── User-selectable application themes ─────────────────────── */
.ui-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.ui-theme-option { position:relative; padding:12px; display:flex; flex-direction:column; gap:5px; border:1px solid var(--border,#ddd); border-radius:14px; background:var(--bg-card,#fff); cursor:pointer; transition:border-color .18s,box-shadow .18s,transform .18s; }
.ui-theme-option:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(25,50,47,.08); }
.ui-theme-option.selected { border-color:var(--accent-primary,#111); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-primary,#111) 12%,transparent); }
.ui-theme-option input { position:absolute; opacity:0; pointer-events:none; }
.ui-theme-option strong { margin-top:4px; color:var(--text-primary,#222); font-size:12px; }.ui-theme-option small { color:var(--text-muted,#888); font-size:9px; }
.ui-theme-preview { position:relative; height:76px; display:block; overflow:hidden; border-radius:10px; background:#f2f2f2; }
.ui-theme-preview::before { content:""; position:absolute; left:0; top:0; bottom:0; width:24%; background:#fff; border-right:1px solid rgba(0,0,0,.08); }
.ui-theme-preview i,.ui-theme-preview b,.ui-theme-preview em { position:absolute; display:block; border-radius:5px; }
.ui-theme-preview i { left:30%; right:6%; top:10px; height:10px; }.ui-theme-preview b { left:30%; width:30%; top:28px; bottom:10px; }.ui-theme-preview em { left:63%; right:6%; top:28px; bottom:10px; }
.ui-theme-preview.mint { background:#f7f4ea; }.ui-theme-preview.mint::before { background:#eef7f1; }.ui-theme-preview.mint i { background:#173e3c; }.ui-theme-preview.mint b { background:#dff3e9; }.ui-theme-preview.mint em { background:#ffe2d7; }
.ui-theme-preview.classic { background:#f4f4f2; }.ui-theme-preview.classic::before { background:#fff; }.ui-theme-preview.classic i { background:#111; }.ui-theme-preview.classic b { background:#dededb; }.ui-theme-preview.classic em { background:#fff; border:1px solid #ddd; }
.ui-theme-preview.indigo { background:#f0f2fa; }.ui-theme-preview.indigo::before { background:#f8f9ff; }.ui-theme-preview.indigo i { background:#3f4cb8; }.ui-theme-preview.indigo b { background:#dfe4ff; }.ui-theme-preview.indigo em { background:#d9f0ea; }

body.theme-mint:not(.landing-page) { --accent-primary:#245f59; --accent-hover:#174641; --accent-light:#dff3e9; --bg-page:#f5f3ea; --bg-card:#fffdf8; --bg-secondary:#eef5ef; --border:#d8e3dc; --text-primary:#173d3a; --text-secondary:#58736f; --text-muted:#839895; background:#f5f3ea; color:#173d3a; }
body.theme-mint:not(.landing-page) .side-nav { background:#f8fbf6; border-color:#d8e3dc; }
body.theme-mint:not(.landing-page) .brand-cube rect { fill:#173e3c; }
body.theme-mint:not(.landing-page) .sn-brand-txt,body.theme-mint:not(.landing-page) .sn-brand-txt b { color:#173e3c; }
body.theme-mint:not(.landing-page) .sn-item { color:#4d6965; }
body.theme-mint:not(.landing-page) .sn-item:hover { color:#173e3c; background:#e5f1e9; }
body.theme-mint:not(.landing-page) .sn-item.active { color:#fff; background:#173e3c; box-shadow:0 7px 18px rgba(23,62,60,.14); }
body.theme-mint:not(.landing-page) .sn-section-label { color:#8aa09c; }
body.theme-mint:not(.landing-page) .sn-account-toggle { background:#edf5ef; }
body.theme-mint:not(.landing-page) .main-container,body.theme-mint:not(.landing-page) .dashboard-container,body.theme-mint:not(.landing-page) .settings-container,body.theme-mint:not(.landing-page) .trade-page-shell,body.theme-mint:not(.landing-page) .automation-shell { color:#173d3a; }
body.theme-mint:not(.landing-page) .controls-panel,body.theme-mint:not(.landing-page) .watchlist-section,body.theme-mint:not(.landing-page) .settings-card,body.theme-mint:not(.landing-page) .dash-card,body.theme-mint:not(.landing-page) .dash-chart-card,body.theme-mint:not(.landing-page) .dash-holdings,body.theme-mint:not(.landing-page) .trade-manual-pane,body.theme-mint:not(.landing-page) .trade-strategy-pane,body.theme-mint:not(.landing-page) .wf-builder-card,body.theme-mint:not(.landing-page) .sl-studio,body.theme-mint:not(.landing-page) .sl-card { background:#fffdf8 !important; border-color:#d8e3dc !important; }
body.theme-mint:not(.landing-page) input,body.theme-mint:not(.landing-page) select,body.theme-mint:not(.landing-page) textarea { border-color:#d6e1db; background:#fbfaf4; color:#173d3a; }
body.theme-mint:not(.landing-page) input:focus,body.theme-mint:not(.landing-page) select:focus,body.theme-mint:not(.landing-page) textarea:focus { border-color:#4b8c82; box-shadow:0 0 0 3px rgba(75,140,130,.1); }
body.theme-mint:not(.landing-page) .btn-screen,body.theme-mint:not(.landing-page) .sl-primary,body.theme-mint:not(.landing-page) .btai-send,body.theme-mint:not(.landing-page) .btai-save-btn,body.theme-mint:not(.landing-page) .btai-apply,body.theme-mint:not(.landing-page) .wf-run,body.theme-mint.trade-page #trade-submit-btn { border-color:#173e3c !important; background:#173e3c !important; color:#fff !important; }
body.theme-mint:not(.landing-page) .factor-flow,body.theme-mint:not(.landing-page) .paper-title-icon,body.theme-mint:not(.landing-page) .wf-palette>button>i { background:#e7f3eb; color:#245f59; }
body.theme-mint:not(.landing-page) .btai-fab { background:#5965d8 !important; box-shadow:0 12px 30px rgba(89,101,216,.22) !important; }

body.theme-classic:not(.landing-page) { --accent-primary:#111; --accent-hover:#292929; --accent-light:#eee; --bg-page:#f4f4f2; --bg-card:#fff; --bg-secondary:#f5f5f3; --border:#dfdfdc; --text-primary:#202020; --text-secondary:#616161; --text-muted:#929292; background:#f4f4f2; color:#202020; }
body.theme-classic:not(.landing-page) .side-nav { background:#fff; }.theme-classic .sn-item.active { background:#111; color:#fff; }

body.theme-indigo:not(.landing-page) { --accent-primary:#4653c5; --accent-hover:#3440a5; --accent-light:#e4e7ff; --bg-page:#f0f2f8; --bg-card:#fbfcff; --bg-secondary:#e9edf8; --border:#d9deee; --text-primary:#242b50; --text-secondary:#626b8c; --text-muted:#8c94ad; background:#f0f2f8; color:#242b50; }
body.theme-indigo:not(.landing-page) .side-nav { background:#f8f9ff; border-color:#d9deee; }
body.theme-indigo:not(.landing-page) .brand-cube rect { fill:#4653c5; }
body.theme-indigo:not(.landing-page) .sn-brand-txt,body.theme-indigo:not(.landing-page) .sn-brand-txt b { color:#303a8a; }
body.theme-indigo:not(.landing-page) .sn-item:hover { color:#3440a5; background:#e8ebfb; }
body.theme-indigo:not(.landing-page) .sn-item.active { background:#4653c5; color:#fff; box-shadow:0 7px 18px rgba(70,83,197,.17); }
body.theme-indigo:not(.landing-page) .controls-panel,body.theme-indigo:not(.landing-page) .settings-card,body.theme-indigo:not(.landing-page) .dash-card,body.theme-indigo:not(.landing-page) .dash-chart-card,body.theme-indigo:not(.landing-page) .dash-holdings,body.theme-indigo:not(.landing-page) .trade-manual-pane,body.theme-indigo:not(.landing-page) .trade-strategy-pane,body.theme-indigo:not(.landing-page) .wf-builder-card,body.theme-indigo:not(.landing-page) .sl-studio,body.theme-indigo:not(.landing-page) .sl-card { background:#fbfcff !important; border-color:#d9deee !important; }
body.theme-indigo:not(.landing-page) .btn-screen,body.theme-indigo:not(.landing-page) .sl-primary,body.theme-indigo:not(.landing-page) .btai-send,body.theme-indigo:not(.landing-page) .wf-run,body.theme-indigo.trade-page #trade-submit-btn { border-color:#4653c5 !important; background:#4653c5 !important; color:#fff !important; }

/* The marketing homepage remains full width after login. */
body.landing-page .side-nav,body.landing-page .bottom-nav,body.landing-page .btai-fab { display:none !important; }
@media (min-width:861px) { body.landing-page.has-sidenav { padding-left:0; } body.landing-page.has-sidenav .top-bar:not(:has(.market-pills)) { display:flex; } }
@media (max-width:720px) { .ui-theme-grid { grid-template-columns:1fr; } }

/* ── Token center ─────────────────────────────────────────── */
.token-store-page { background:var(--bg-page,#f5f3ea); }
.token-store { width:min(1120px,calc(100% - 44px)); margin:0 auto; padding:44px 0 80px; color:var(--text-primary,#173d3a); }
.token-hero { min-height:245px; padding:34px 38px; display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:center; gap:48px; border:1px solid var(--border,#d8e3dc); border-radius:26px; background:var(--bg-card,#fffdf8); box-shadow:0 18px 55px rgba(28,58,54,.07); }
.token-hero>div>span,.token-section-head span,.token-contact header span { color:var(--accent-primary,#245f59); font-size:10px; font-weight:850; letter-spacing:.16em; }
.token-hero h1 { margin:9px 0 13px; font-size:42px; line-height:1; letter-spacing:-.045em; }
.token-hero>div>p { max-width:580px; margin:0; color:var(--text-secondary,#58736f); font-size:13px; line-height:1.8; }
.token-balance { padding:23px; border-radius:20px; background:var(--accent-primary,#173e3c); color:#fff; }
.token-balance>small { color:rgba(255,255,255,.68); font-size:10px; }
.token-balance>strong { display:block; margin:6px 0 19px; font-size:40px; letter-spacing:-.04em; }.token-balance>strong em { font-size:12px; font-style:normal; font-weight:650; letter-spacing:0; }
.token-balance>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.token-balance>div span { padding:9px 10px; border-radius:10px; background:rgba(255,255,255,.1); }.token-balance>div b,.token-balance>div i { display:block; }.token-balance>div b { font-size:15px; }.token-balance>div i { margin-top:2px; color:rgba(255,255,255,.62); font-size:8px; font-style:normal; }.token-balance>p { margin:12px 0 0; color:rgba(255,255,255,.58); font-size:8px; }
.token-plans { padding:56px 0 30px; }.token-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }.token-section-head h2,.token-how h2 { margin:7px 0 0; font-size:26px; letter-spacing:-.025em; }.token-section-head>p { max-width:420px; margin:0; color:var(--text-muted,#839895); font-size:11px; text-align:right; }
.token-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.token-plan { position:relative; min-height:355px; padding:25px; display:flex; flex-direction:column; border:1px solid var(--border,#d8e3dc); border-radius:20px; background:var(--bg-card,#fffdf8); transition:transform .18s,box-shadow .18s,border-color .18s; }.token-plan:hover { transform:translateY(-3px); box-shadow:0 17px 38px rgba(25,55,51,.08); }.token-plan.featured { border-color:var(--accent-primary,#245f59); box-shadow:inset 0 4px 0 var(--accent-primary,#245f59); }.token-plan-mark { color:var(--text-muted,#839895); font:750 9px/1 inherit; letter-spacing:.12em; }.token-plan-badge { position:absolute; right:18px; top:17px; padding:5px 8px; border-radius:999px; background:var(--accent-light,#dff3e9); color:var(--accent-primary,#245f59); font-size:8px; font-weight:800; }.token-plan h3 { margin:24px 0 5px; font-size:18px; }.token-plan>p { min-height:36px; margin:0; color:var(--text-muted,#839895); font-size:10px; line-height:1.6; }.token-plan>strong { margin:24px 0 20px; font-size:36px; letter-spacing:-.035em; }.token-plan>strong em { font-size:11px; font-style:normal; letter-spacing:0; }.token-plan ul { margin:0 0 23px; padding:0; display:grid; gap:9px; list-style:none; }.token-plan li { color:var(--text-secondary,#58736f); font-size:10px; }.token-plan li::before { content:'✓'; margin-right:8px; color:var(--accent-primary,#245f59); font-weight:850; }.token-plan-choose { width:100%; min-height:40px; margin-top:auto; border:1px solid var(--accent-primary,#245f59); border-radius:11px; background:transparent; color:var(--accent-primary,#245f59); font-size:11px; font-weight:750; cursor:pointer; }.token-plan.featured .token-plan-choose,.token-plan-choose:hover { background:var(--accent-primary,#245f59); color:#fff; }
.token-how { margin-top:26px; padding:30px; border:1px solid var(--border,#d8e3dc); border-radius:22px; background:var(--bg-card,#fffdf8); }.token-how>div { margin-top:25px; display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }.token-how article { position:relative; padding-left:45px; }.token-how article:not(:last-child)::after { content:'→'; position:absolute; right:-16px; top:6px; color:var(--text-muted,#839895); }.token-how article>i { position:absolute; left:0; top:0; width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:var(--accent-light,#dff3e9); color:var(--accent-primary,#245f59); font:750 11px/1 inherit; }.token-how h3 { margin:2px 0 6px; font-size:12px; }.token-how p { margin:0; color:var(--text-muted,#839895); font-size:9px; line-height:1.6; }
.token-contact { position:fixed; inset:0; z-index:1300; display:none; place-items:center; padding:20px; }.token-contact.open { display:grid; }.token-contact-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(8,25,24,.56); backdrop-filter:blur(6px); }.token-contact>section { position:relative; width:min(590px,100%); padding:26px; border-radius:24px; background:var(--bg-card,#fffdf8); box-shadow:0 30px 90px rgba(8,30,27,.3); }.token-contact header { display:flex; justify-content:space-between; }.token-contact h2 { margin:6px 0 0; font-size:25px; }.token-contact-close { width:35px; height:35px; border:1px solid var(--border,#ddd); border-radius:10px; background:transparent; color:inherit; font-size:19px; cursor:pointer; }.token-contact>section>p { color:var(--text-secondary,#58736f); font-size:10px; line-height:1.7; }.token-selected { margin:14px 0; padding:11px 13px; display:flex; justify-content:space-between; border-radius:11px; background:var(--bg-secondary,#eef5ef); font-size:10px; }.token-selected span { color:var(--text-muted,#839895); }.token-contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.token-contact figure { margin:0; padding:9px; border:1px solid var(--border,#ddd); border-radius:13px; text-align:center; }.token-contact figure img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }.token-contact figcaption { margin-top:6px; font-size:9px; font-weight:700; }.token-contact>section>small { display:block; margin-top:14px; color:var(--text-muted,#839895); font-size:8px; line-height:1.6; }
@media (max-width:800px) { .token-store { width:calc(100% - 24px); padding:22px 0 70px; }.token-hero { padding:25px; grid-template-columns:1fr; gap:24px; }.token-plan-grid { grid-template-columns:1fr; }.token-plan { min-height:320px; }.token-section-head { align-items:flex-start; flex-direction:column; }.token-section-head>p { text-align:left; }.token-how>div { grid-template-columns:1fr; }.token-how article:not(:last-child)::after { display:none; }.token-contact-grid { gap:6px; } }

/* ── Billing wallet & membership ─────────────────────────── */
.billing-center{width:min(1180px,calc(100% - 44px));margin:0 auto;padding:36px 0 80px;color:var(--text-primary,#173d3a)}
.billing-head{padding:30px 34px;display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:center;gap:42px;border:1px solid var(--border,#d8e3dc);border-radius:24px;background:var(--bg-card,#fffdf8);box-shadow:0 16px 45px rgba(24,52,49,.06)}
.billing-kicker{color:var(--accent-primary,#245f59);font-size:10px;font-weight:850;letter-spacing:.16em}.billing-head h1{margin:9px 0 10px;font-size:39px;letter-spacing:-.045em}.billing-head>div>p{max-width:620px;margin:0;color:var(--text-secondary,#58736f);font-size:13px;line-height:1.75}
.wallet-card{padding:22px 24px;border-radius:19px;background:var(--accent-primary,#173e3c);color:#fff}.wallet-card small{font-size:10px;color:rgba(255,255,255,.65)}.wallet-card>strong{display:block;margin:5px 0 17px;font-size:42px;letter-spacing:-.04em}.wallet-card>div{display:flex;align-items:center;justify-content:space-between}.wallet-card>div span{font-size:12px;font-weight:750}.wallet-card>div em{padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.13);font-size:8px;font-style:normal;text-transform:uppercase}.wallet-card>p{margin:10px 0 0;color:rgba(255,255,255,.58);font-size:8px}
.billing-alert{margin-top:15px;padding:12px 15px;display:flex;gap:10px;border:1px solid var(--border,#ddd);border-radius:12px;background:var(--bg-card,#fff);color:var(--text-secondary,#666);font-size:10px}.billing-alert.success{border-color:#b9dfcd;background:#eaf6ef;color:#17633e}.billing-alert.warning{border-color:#e9d9b8;background:#fff8e8;color:#7d5a15}
.billing-tabs{margin:28px 0 18px;padding:5px;display:inline-flex;gap:3px;border:1px solid var(--border,#ddd);border-radius:13px;background:var(--bg-secondary,#eef5ef)}.billing-tabs button{min-width:120px;padding:10px 16px;border:0;border-radius:9px;background:transparent;color:var(--text-secondary,#666);font-size:11px;font-weight:700;cursor:pointer}.billing-tabs button.active{background:var(--bg-card,#fff);color:var(--text-primary,#222);box-shadow:0 3px 10px rgba(20,40,37,.08)}
.billing-panel{display:none;padding:28px;border:1px solid var(--border,#ddd);border-radius:22px;background:var(--bg-card,#fff)}.billing-panel.active{display:block}.billing-section-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.billing-section-title h2{margin:0 0 6px;font-size:23px}.billing-section-title p{margin:0;color:var(--text-muted,#888);font-size:10px}.billing-section-title>span{padding:5px 9px;border-radius:99px;background:var(--accent-light,#e3f2ea);color:var(--accent-primary,#245f59);font-size:8px;font-weight:800}
.billing-section-actions{display:flex;align-items:center;gap:8px}.billing-section-actions span,.billing-section-actions button{padding:6px 9px;border:1px solid var(--border,#ddd);border-radius:9px;background:var(--bg-secondary,#f3f3f1);color:var(--text-secondary,#666);font-size:8px;font-weight:750}.billing-section-actions button{cursor:pointer}
.topup-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.topup-card{position:relative;min-height:260px;padding:22px;display:flex;flex-direction:column;border:1px solid var(--border,#ddd);border-radius:17px;background:var(--bg-card,#fff);overflow:hidden}.topup-card>i{position:absolute;right:0;top:0;padding:6px 10px;border-radius:0 0 0 12px;background:var(--accent-light,#e3f2ea);color:var(--accent-primary,#245f59);font-size:8px;font-style:normal;font-weight:800}.topup-card>small{color:var(--text-muted,#999);font-size:8px;letter-spacing:.14em}.topup-card h3{margin:21px 0 3px;font-size:30px}.topup-card>p{margin:0;color:var(--text-secondary,#666);font-size:10px}.topup-card>p b{color:var(--accent-primary,#245f59)}.topup-card>strong{margin:25px 0 18px;font-size:20px}.topup-card button,.member-card button{min-height:39px;margin-top:auto;border:1px solid var(--accent-primary,#245f59);border-radius:10px;background:var(--accent-primary,#245f59);color:#fff;font-size:10px;font-weight:800;cursor:pointer}.topup-card button:disabled,.member-card button:disabled{border-color:var(--border,#ddd);background:var(--bg-secondary,#eee);color:var(--text-muted,#888);cursor:not-allowed}
.member-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.member-card{min-height:390px;padding:20px;display:flex;flex-direction:column;border:1px solid var(--border,#ddd);border-radius:17px;background:var(--bg-card,#fff)}.member-card.featured{border-color:var(--accent-primary,#245f59);box-shadow:inset 0 3px 0 var(--accent-primary,#245f59)}.member-card.current{background:color-mix(in srgb,var(--accent-light,#e3f2ea) 35%,var(--bg-card,#fff))}.member-card>div{display:flex;justify-content:space-between}.member-card>div i{color:var(--text-muted,#999);font-size:8px;font-style:normal}.member-card>div b{padding:4px 6px;border-radius:99px;background:var(--accent-light,#e3f2ea);color:var(--accent-primary,#245f59);font-size:7px}.member-card h3{margin:20px 0 9px;font-size:16px}.member-price{margin:0;font-size:22px;font-weight:800}.member-price em{font-size:9px;font-style:normal;font-weight:600;color:var(--text-muted,#888)}.member-card>strong{margin-top:13px;color:var(--accent-primary,#245f59);font-size:9px}.member-card ul{margin:23px 0;padding:16px 0 0;border-top:1px solid var(--border,#ddd);display:grid;gap:10px;list-style:none}.member-card li{font-size:9px;color:var(--text-secondary,#666)}.member-card li:before{content:'✓';margin-right:7px;color:var(--accent-primary,#245f59);font-weight:850}.billing-safety{margin:18px 0 0;padding:12px 14px;border-radius:10px;background:var(--bg-secondary,#f3f3f1);color:var(--text-secondary,#666);font-size:9px}
.ledger-table-wrap{overflow:auto}.ledger-table{width:100%;border-collapse:collapse;font-size:10px}.ledger-table th,.ledger-table td{padding:12px 10px;border-bottom:1px solid var(--border,#ddd);text-align:left;white-space:nowrap}.ledger-table th{color:var(--text-muted,#888);font-size:8px}.ledger-type{padding:4px 7px;border-radius:99px;background:var(--bg-secondary,#eee)}.income{color:#188454!important}.expense{color:#cc4050!important}.billing-empty{padding:45px!important;text-align:center!important;color:var(--text-muted,#999)}
.service-price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.service-price-grid article{padding:18px;border:1px solid var(--border,#ddd);border-radius:13px;background:var(--bg-secondary,#f5f5f3)}.service-price-grid span,.service-price-grid b{display:block}.service-price-grid span{color:var(--text-secondary,#666);font-size:9px}.service-price-grid b{margin-top:8px;font-size:14px}.billing-toast{position:fixed;left:50%;bottom:28px;z-index:1500;max-width:480px;padding:12px 18px;border-radius:11px;background:#171717;color:#fff;font-size:11px;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.2s}.billing-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.member-grid{grid-template-columns:repeat(3,1fr)}.topup-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.billing-center{width:calc(100% - 24px);padding-top:18px}.billing-head{padding:22px;grid-template-columns:1fr;gap:20px}.billing-tabs{width:100%;overflow:auto}.billing-tabs button{min-width:105px}.billing-panel{padding:18px}.topup-grid,.member-grid,.service-price-grid{grid-template-columns:1fr}.billing-section-title{align-items:flex-start;flex-direction:column}.member-card{min-height:340px}}

/* ── 落地页：定价与关于板块 ── */
.ld-plan-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; text-align: left; }
.ld-plan {
    border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 16px 14px;
    background: var(--bg-card, #fff); display: flex; flex-direction: column; gap: 6px;
}
.ld-plan.hot { border-color: var(--accent-primary); box-shadow: 0 6px 22px rgba(99,102,241,.14); }
.ld-plan-stars { color: #f59e0b; font-size: .78rem; letter-spacing: 1px; }
.ld-plan h3 { margin: 0; font-size: .95rem; }
.ld-plan-price { font-size: 1.15rem; }
.ld-plan-price em { font-size: .72rem; color: var(--text-muted, #888); font-style: normal; }
.ld-plan p { margin: 0; font-size: .78rem; color: var(--text-secondary, #555); }
.ld-plan-perk { font-size: .72rem !important; color: var(--accent-primary) !important; line-height: 1.5; }
.ld-price-strip {
    display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
    margin: 18px auto 14px; font-size: .82rem; color: var(--text-secondary, #555);
}
.ld-price-strip em { font-style: normal; font-weight: 600; color: var(--text-primary, #222); margin-right: 4px; }
.ld-price-strip i { font-style: normal; font-size: .72rem; color: var(--text-muted, #999); }
.ld-center { text-align: center; }
.ld-about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: left; }
.ld-about-grid article {
    border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 18px;
    background: var(--bg-card, #fff); display: flex; flex-direction: column; gap: 8px;
}
.ld-about-grid i { font-style: normal; font-size: 1.3rem; }
.ld-about-grid b { font-size: .95rem; }
.ld-about-grid p { margin: 0; font-size: .8rem; color: var(--text-secondary, #555); line-height: 1.7; }
.ld-link {
    border: none; background: none; color: var(--accent-primary); cursor: pointer;
    font-size: .82rem; padding: 0; text-align: left; font-weight: 600;
}
@media (max-width: 900px) {
    .ld-plan-row { grid-template-columns: repeat(2, 1fr); }
    .ld-about-grid { grid-template-columns: 1fr; }
}

/* 计费页：AI 按模型明码标价 */
.ai-model-prices { display: flex; flex-direction: column; gap: 3px; margin-top: 8px;
    font-size: .74rem; color: var(--text-secondary, #555); }
.ai-model-prices em { font-style: normal; display: flex; gap: 6px; align-items: baseline; }
.ai-model-prices em b { color: var(--accent-primary); }
.ai-model-prices em i { font-style: normal; color: var(--text-muted, #999); font-size: .68rem; }