/* TickCoreTech Signal Grid v1
   A TCT-only presentation layer. It intentionally changes no application
   behavior, permissions, routes, data flow, or background-service controls. */

body[data-ui-theme="signal-grid"] {
    --sg-canvas: #f4f5f7;
    --sg-surface: #ffffff;
    --sg-surface-soft: #f8f9fb;
    --sg-surface-hover: #f0f2f5;
    --sg-ink: #191b20;
    --sg-ink-soft: #555d6a;
    --sg-ink-faint: #747d8b;
    --sg-line: #e2e5ea;
    --sg-line-strong: #cbd0d8;
    --sg-rail: #14161b;
    --sg-rail-soft: #1c1f26;
    --sg-rail-line: #292d35;
    --sg-rail-text: #f4f5f7;
    --sg-rail-muted: #969eaa;
    --sg-accent: #4860cf;
    --sg-accent-hover: #3d53bd;
    --sg-accent-soft: #edf0ff;
    --sg-positive: #087a52;
    --sg-positive-soft: #e5f5ee;
    --sg-warning: #9a5700;
    --sg-warning-soft: #fff1dc;
    --sg-critical: #b42318;
    --sg-critical-soft: #ffebe9;
    --sg-info: #1769aa;
    --sg-info-soft: #e8f3fb;
    --sg-series-a: #3856c8;
    --sg-series-b: #007d79;
    --sg-series-c: #b45f06;
    --sg-focus: #3154dc;
    --sg-radius: 8px;
    --sg-shadow: 0 1px 2px rgba(20, 22, 27, 0.04), 0 10px 30px rgba(20, 22, 27, 0.04);
    color: var(--sg-ink);
    background: var(--sg-canvas);
    font-family: Inter, "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body[data-ui-theme="signal-grid"] button,
body[data-ui-theme="signal-grid"] input,
body[data-ui-theme="signal-grid"] select,
body[data-ui-theme="signal-grid"] textarea {
    font-family: inherit;
}

body[data-ui-theme="signal-grid"] :where(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(49, 84, 220, 0.28);
    outline-offset: 2px;
}

/* Portal entry: the same component language, with role labels carrying context. */
body[data-ui-theme="signal-grid"] #login-screen {
    --portal-accent: var(--sg-accent);
    --portal-deep: var(--sg-rail);
    --portal-soft: var(--sg-accent-soft);
    background:
        linear-gradient(rgba(244, 245, 247, 0.92), rgba(244, 245, 247, 0.98)),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(72, 96, 207, 0.08) 39px 40px),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(72, 96, 207, 0.08) 39px 40px);
}

body[data-ui-theme="signal-grid"] #login-screen .login-shell {
    border-color: var(--sg-line-strong);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(20, 22, 27, 0.14);
}

body[data-ui-theme="signal-grid"] #login-screen .login-brand-panel {
    background:
        radial-gradient(circle at 72% 20%, rgba(93, 113, 221, 0.2), transparent 28%),
        var(--sg-rail);
}

body[data-ui-theme="signal-grid"] #login-screen .login-brand-panel::before {
    inset: 0;
    height: auto;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 40px 40px;
    box-shadow: none;
    transform: none;
}

body[data-ui-theme="signal-grid"] #login-screen .login-brand-mark,
body[data-ui-theme="signal-grid"] #main-screen .brand-mark {
    border: 1px solid #3b404a;
    border-radius: 7px;
    color: #dce1ff;
    background: #252a43;
    box-shadow: inset 0 -2px 0 #8496ff;
}

body[data-ui-theme="signal-grid"] #login-screen .login-portal-label {
    color: #b9c3ff;
    letter-spacing: 0.1em;
}

body[data-ui-theme="signal-grid"] #login-screen .login-brand-copy h1 {
    font-weight: 660;
    letter-spacing: -0.035em;
}

body[data-ui-theme="signal-grid"] #login-screen .login-signal-grid span {
    border-color: #3b404a;
    border-radius: 6px;
    color: #c4cad3;
    background: rgba(255, 255, 255, 0.025);
}

body[data-ui-theme="signal-grid"] #login-screen .login-market-lines span {
    background: #8496ff;
    box-shadow: none;
}

body[data-ui-theme="signal-grid"] #login-screen .login-access-panel {
    background: var(--sg-surface);
}

body[data-ui-theme="signal-grid"] #login-screen .login-access-heading > p {
    color: var(--sg-accent);
    letter-spacing: 0.1em;
}

body[data-ui-theme="signal-grid"] #login-screen .login-access-heading h2 {
    color: var(--sg-ink);
    font-weight: 660;
    letter-spacing: -0.025em;
}

body[data-ui-theme="signal-grid"] #login-screen .login-access-heading span,
body[data-ui-theme="signal-grid"] #login-screen .login-access-footer {
    color: var(--sg-ink-faint);
}

body[data-ui-theme="signal-grid"] #login-screen .login-access-panel label {
    color: var(--sg-ink-soft);
}

body[data-ui-theme="signal-grid"] #login-screen .login-access-panel input {
    border-color: var(--sg-line-strong);
    border-radius: 7px;
    color: var(--sg-ink);
}

body[data-ui-theme="signal-grid"] #login-screen .login-access-panel input:focus {
    border-color: var(--sg-focus);
    outline-color: rgba(49, 84, 220, 0.2);
}

body[data-ui-theme="signal-grid"] #login-screen .login-access-panel .btn-primary {
    border-color: #384fbf;
    border-radius: 7px;
    background: var(--sg-accent);
}

body[data-ui-theme="signal-grid"] #login-screen .login-access-panel .btn-primary:hover,
body[data-ui-theme="signal-grid"] #login-screen .login-access-panel .btn-primary:focus-visible {
    border-color: var(--sg-accent-hover);
    background: var(--sg-accent-hover);
}

/* Application shell and calm hierarchy. */
body[data-ui-theme="signal-grid"] #main-screen,
body[data-ui-theme="signal-grid"] #main-screen .main-container,
body[data-ui-theme="signal-grid"] #main-screen .content {
    background: var(--sg-canvas);
}

body[data-ui-theme="signal-grid"] #main-screen .header {
    border-bottom: 1px solid var(--sg-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body[data-ui-theme="signal-grid"] #main-screen .header-brand h1 {
    color: var(--sg-ink);
    font-size: 16px;
    font-weight: 680;
    letter-spacing: -0.02em;
}

body[data-ui-theme="signal-grid"] #main-screen .header-brand div > span,
body[data-ui-theme="signal-grid"] #main-screen .mobile-page-context span {
    color: var(--sg-ink-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body[data-ui-theme="signal-grid"] #main-screen .header-search {
    border-color: var(--sg-line);
    border-radius: 7px;
    background: var(--sg-surface-soft);
}

body[data-ui-theme="signal-grid"] #main-screen .header-search:focus-within {
    border-color: var(--sg-focus);
    box-shadow: 0 0 0 3px rgba(49, 84, 220, 0.16);
}

body[data-ui-theme="signal-grid"] #main-screen .header-signal {
    border: 1px solid #cae7dc;
    background: var(--sg-positive-soft);
}

body[data-ui-theme="signal-grid"] #main-screen .header-signal span {
    background: var(--sg-positive);
}

body[data-ui-theme="signal-grid"] #main-screen .user-avatar {
    color: #dce1ff;
    background: #343c68;
}

body[data-ui-theme="signal-grid"] #main-screen .icon-button {
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--sg-ink-soft);
}

body[data-ui-theme="signal-grid"] #main-screen .icon-button:hover {
    border-color: var(--sg-line);
    color: var(--sg-ink);
    background: var(--sg-surface-hover);
}

body[data-ui-theme="signal-grid"] #main-screen .sidebar {
    border-right-color: var(--sg-rail-line);
    color: var(--sg-rail-text);
    background: var(--sg-rail);
    scrollbar-color: #3c424d var(--sg-rail);
}

body[data-ui-theme="signal-grid"] #main-screen .nav-section,
body[data-ui-theme="signal-grid"] #main-screen .nav-section-body {
    background: transparent;
}

body[data-ui-theme="signal-grid"] #main-screen .nav-section-toggle {
    border-bottom-color: var(--sg-rail-line);
    color: #b8bec8;
    background: var(--sg-rail);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0.035em;
}

body[data-ui-theme="signal-grid"] #main-screen .nav-section-toggle:hover,
body[data-ui-theme="signal-grid"] #main-screen .nav-section-toggle:focus-visible {
    color: #ffffff;
    background: var(--sg-rail-soft);
}

body[data-ui-theme="signal-grid"] #main-screen .nav-section-icon {
    border-color: #333842;
    color: #929aa7;
    background: #20232a;
}

body[data-ui-theme="signal-grid"] #main-screen .nav-section:not(.is-collapsed) .nav-section-icon {
    border-color: #4a5270;
    color: #bfc8ff;
    background: #252a43;
}

body[data-ui-theme="signal-grid"] #main-screen .nav-btn {
    margin: 2px 9px;
    padding-left: 10px;
    border-radius: 6px;
    color: #aeb5c0;
    font-size: 12px;
}

body[data-ui-theme="signal-grid"] #main-screen .nav-btn::before {
    color: #7f8794;
}

body[data-ui-theme="signal-grid"] #main-screen .nav-btn:hover {
    color: #ffffff;
    background: var(--sg-rail-soft);
}

body[data-ui-theme="signal-grid"] #main-screen .nav-btn.active {
    color: #ffffff;
    background: #272b34;
    box-shadow: inset 2px 0 #8496ff;
}

body[data-ui-theme="signal-grid"] #main-screen .nav-btn.active::before {
    color: #bfc8ff;
}

body[data-ui-theme="signal-grid"] #broker-select-container select {
    border-color: #3a404a;
    color: #e5e7eb;
    background: #1c1f26;
}

body[data-ui-theme="signal-grid"] #main-screen .content {
    padding: 28px 28px 60px;
}

body[data-ui-theme="signal-grid"] #main-screen .view > h2,
body[data-ui-theme="signal-grid"] #main-screen .workspace-heading h2,
body[data-ui-theme="signal-grid"] #main-screen .agent-page-header h2,
body[data-ui-theme="signal-grid"] #main-screen .execution-routing-heading h2 {
    color: var(--sg-ink);
    font-size: clamp(24px, 2.1vw, 32px);
    font-weight: 660;
    letter-spacing: -0.035em;
    line-height: 1.14;
}

body[data-ui-theme="signal-grid"] #main-screen :where(.info-text, .empty-state, small) {
    color: var(--sg-ink-faint);
}

/* Controls and task surfaces. */
body[data-ui-theme="signal-grid"] #main-screen .btn {
    border-radius: 7px;
    font-size: 12px;
    font-weight: 650;
}

body[data-ui-theme="signal-grid"] #main-screen .btn-primary,
body[data-ui-theme="signal-grid"] #main-screen .period-btn.active {
    border-color: #384fbf;
    background: var(--sg-accent);
    box-shadow: 0 1px 1px rgba(22, 31, 89, 0.15);
}

body[data-ui-theme="signal-grid"] #main-screen .btn-primary:hover {
    border-color: var(--sg-accent-hover);
    background: var(--sg-accent-hover);
}

body[data-ui-theme="signal-grid"] #main-screen .btn-secondary,
body[data-ui-theme="signal-grid"] #main-screen .period-btn {
    border-color: var(--sg-line-strong);
    color: var(--sg-ink-soft);
    background: var(--sg-surface);
}

body[data-ui-theme="signal-grid"] #main-screen .btn-secondary:hover,
body[data-ui-theme="signal-grid"] #main-screen .period-btn:hover {
    border-color: #adb7c5;
    color: var(--sg-ink);
    background: var(--sg-surface-hover);
}

body[data-ui-theme="signal-grid"] #main-screen input:not([type="checkbox"]):not([type="radio"]),
body[data-ui-theme="signal-grid"] #main-screen select,
body[data-ui-theme="signal-grid"] #main-screen textarea,
body[data-ui-theme="signal-grid"] .modal input:not([type="checkbox"]):not([type="radio"]),
body[data-ui-theme="signal-grid"] .modal select,
body[data-ui-theme="signal-grid"] .modal textarea {
    border-color: var(--sg-line-strong);
    border-radius: 7px;
    color: var(--sg-ink);
    background-color: var(--sg-surface);
}

body[data-ui-theme="signal-grid"] #main-screen input:focus,
body[data-ui-theme="signal-grid"] #main-screen select:focus,
body[data-ui-theme="signal-grid"] #main-screen textarea:focus {
    border-color: var(--sg-focus) !important;
    box-shadow: 0 0 0 3px rgba(49, 84, 220, 0.16);
}

body[data-ui-theme="signal-grid"] #main-screen :where(
    .card,
    .filter-bar,
    .risk-profile-controls,
    .account-analysis-profile-controls,
    .risk-dashboard-panel,
    .broker-auto-sync-panel,
    .report-health-matrix-head,
    .account-analysis-selection,
    .account-analysis-coverage,
    .server-check-item,
    .broker-capacity-item,
    .broker-status-card,
    .broker-stat,
    .risk-metric,
    .spread-control-panel
) {
    border-color: var(--sg-line);
    border-radius: var(--sg-radius);
    background: var(--sg-surface);
    box-shadow: var(--sg-shadow);
}

body[data-ui-theme="signal-grid"] #main-screen :where(
    .card,
    .risk-dashboard-panel,
    .server-check-item,
    .risk-metric
):hover {
    border-color: var(--sg-line-strong);
    box-shadow: 0 1px 2px rgba(20, 22, 27, 0.06), 0 14px 34px rgba(20, 22, 27, 0.07);
}

body[data-ui-theme="signal-grid"] #main-screen :where(.tabs, .workspace-tabs, .price-feed-tabs) {
    border-bottom-color: var(--sg-line);
}

body[data-ui-theme="signal-grid"] #main-screen :where(.tab-btn, .workspace-tabs button) {
    color: var(--sg-ink-soft);
}

body[data-ui-theme="signal-grid"] #main-screen :where(.tab-btn, .workspace-tabs button):hover {
    color: var(--sg-ink);
    background: var(--sg-surface-soft);
}

body[data-ui-theme="signal-grid"] #main-screen :where(.tab-btn.active, .workspace-tabs button.active) {
    border-color: var(--sg-accent);
    color: var(--sg-accent);
    background: transparent;
}

body[data-ui-theme="signal-grid"] #main-screen :where(.workspace-disclosure, .broker-workspace-band, .bridge-account-band) {
    border-color: var(--sg-line);
}

body[data-ui-theme="signal-grid"] #main-screen details > summary {
    color: var(--sg-ink-soft);
}

body[data-ui-theme="signal-grid"] #main-screen details[open] > summary {
    color: var(--sg-ink);
}

/* Dense data: restrained separators, tabular numerals, and text-backed status. */
body[data-ui-theme="signal-grid"] #main-screen table {
    border-color: var(--sg-line);
    color: var(--sg-ink-soft);
    font-variant-numeric: tabular-nums;
}

body[data-ui-theme="signal-grid"] #main-screen :where(th, td) {
    border-color: var(--sg-line);
}

body[data-ui-theme="signal-grid"] #main-screen thead th {
    color: var(--sg-ink-faint);
    background: var(--sg-surface-soft);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0.025em;
}

body[data-ui-theme="signal-grid"] #main-screen tbody tr:hover {
    background: #fafbfc;
}

body[data-ui-theme="signal-grid"] #main-screen tbody th {
    color: var(--sg-ink);
}

body[data-ui-theme="signal-grid"] #main-screen :where(
    .broker-status-badge,
    .bridge-finance-status,
    .status-badge,
    .status-pill
) {
    border-radius: 999px;
    font-weight: 700;
}

body[data-ui-theme="signal-grid"] #main-screen :where(.status-ok, .bridge-finance-success, .status-success) {
    color: var(--sg-positive);
    background: var(--sg-positive-soft);
}

body[data-ui-theme="signal-grid"] #main-screen :where(.status-warning, .bridge-finance-warning) {
    color: var(--sg-warning);
    background: var(--sg-warning-soft);
}

body[data-ui-theme="signal-grid"] #main-screen :where(.status-danger, .bridge-finance-danger, .status-error) {
    color: var(--sg-critical);
    background: var(--sg-critical-soft);
}

body[data-ui-theme="signal-grid"] #main-screen :where(.status-info, .feed-state) {
    color: var(--sg-info);
    background: var(--sg-info-soft);
}

body[data-ui-theme="signal-grid"] #main-screen .broker-sync-table tr[data-sync-tone="danger"] > th {
    border-left-color: var(--sg-critical);
}

body[data-ui-theme="signal-grid"] #main-screen .broker-sync-table tr[data-sync-tone="warning"] > th {
    border-left-color: var(--sg-warning);
}

body[data-ui-theme="signal-grid"] #main-screen svg text {
    font-family: inherit;
}

body[data-ui-theme="signal-grid"] #main-screen :where(.chart-gridline, .chart-gridlines line, .grid-line) {
    stroke: var(--sg-line);
}

body[data-ui-theme="signal-grid"] #main-screen :where(.chart-axis-label, .chart-axis-labels text, .axis-label) {
    fill: var(--sg-ink-faint);
}

body[data-ui-theme="signal-grid"] .modal-overlay {
    background: rgba(20, 22, 27, 0.52);
    backdrop-filter: blur(3px);
}

body[data-ui-theme="signal-grid"] .modal {
    border: 1px solid var(--sg-line-strong);
    border-radius: 10px;
    color: var(--sg-ink);
    background: var(--sg-surface);
    box-shadow: 0 24px 70px rgba(20, 22, 27, 0.2);
}

body[data-ui-theme="signal-grid"] .modal-header {
    border-bottom-color: var(--sg-line);
}

@media (max-width: 900px) {
    body[data-ui-theme="signal-grid"] #main-screen .sidebar {
        box-shadow: 18px 0 48px rgba(20, 22, 27, 0.28);
    }

    body[data-ui-theme="signal-grid"] #main-screen .mobile-drawer-header {
        color: var(--sg-rail-text);
        border-bottom-color: var(--sg-rail-line);
        background: var(--sg-rail);
    }

    body[data-ui-theme="signal-grid"] #main-screen .mobile-drawer-close {
        color: var(--sg-rail-text);
    }
}

@media (max-width: 760px) {
    body[data-ui-theme="signal-grid"] #main-screen .header {
        background: rgba(255, 255, 255, 0.97);
    }

    body[data-ui-theme="signal-grid"] #main-screen .content {
        padding-right: 14px;
        padding-left: 14px;
    }

    body[data-ui-theme="signal-grid"] #main-screen .mobile-context-nav,
    body[data-ui-theme="signal-grid"] #main-screen .mobile-tabbar {
        border-color: var(--sg-line);
        background: rgba(255, 255, 255, 0.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-ui-theme="signal-grid"] *,
    body[data-ui-theme="signal-grid"] *::before,
    body[data-ui-theme="signal-grid"] *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    body[data-ui-theme="signal-grid"] #main-screen .nav-btn.active {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    body[data-ui-theme="signal-grid"] #main-screen :where(
        .broker-status-badge,
        .bridge-finance-status,
        .status-badge,
        .status-pill
    ) {
        border: 1px solid currentColor;
    }
}