/* ========================================================================== 
   EtheraFX — unified 2026 product interface
   Final cascade layer for the public site, account workspace, terminals and
   operations surface. This file intentionally owns theme parity.
   ========================================================================== */

:root,
[data-theme="light"] {
    color-scheme: light;
    --efx-bg: #f5f6fa;
    --efx-bg-elevated: #ffffff;
    --efx-surface: rgba(255, 255, 255, 0.88);
    --efx-surface-solid: #ffffff;
    --efx-surface-soft: #f0f2f8;
    --efx-surface-hover: #e9ecf5;
    --efx-text: #121526;
    --efx-heading: #090c19;
    --efx-muted: #687086;
    --efx-muted-2: #9299aa;
    --efx-border: rgba(25, 29, 52, 0.11);
    --efx-border-strong: rgba(25, 29, 52, 0.19);
    --efx-violet: #6d5efc;
    --efx-violet-strong: #5546e7;
    --efx-violet-soft: rgba(109, 94, 252, 0.11);
    --efx-cyan: #13bdf5;
    --efx-cyan-soft: rgba(19, 189, 245, 0.11);
    --efx-lime: #bafc4d;
    --efx-lime-soft: rgba(158, 225, 48, 0.14);
    --efx-green: #0e9f71;
    --efx-green-soft: rgba(14, 159, 113, 0.11);
    --efx-red: #e24966;
    --efx-red-soft: rgba(226, 73, 102, 0.11);
    --efx-warning: #be7415;
    --efx-warning-soft: rgba(190, 116, 21, 0.11);
    --efx-shadow-sm: 0 10px 30px rgba(25, 29, 52, 0.07);
    --efx-shadow-md: 0 22px 64px rgba(25, 29, 52, 0.11);
    --efx-shadow-lg: 0 36px 100px rgba(25, 29, 52, 0.16);
    --efx-grid: rgba(109, 94, 252, 0.055);

    --color-bg: var(--efx-bg);
    --color-bg-soft: var(--efx-surface-soft);
    --color-surface: var(--efx-surface-solid);
    --color-surface-elevated: var(--efx-surface-solid);
    --color-surface-muted: var(--efx-surface-soft);
    --color-text: var(--efx-text);
    --color-heading: var(--efx-heading);
    --color-muted: var(--efx-muted);
    --color-muted-2: var(--efx-muted-2);
    --color-border: var(--efx-border);
    --color-border-strong: var(--efx-border-strong);
    --color-primary: var(--efx-violet);
    --color-primary-dark: var(--efx-violet-strong);
    --color-primary-deep: #29236b;
    --color-primary-soft: var(--efx-violet-soft);
    --color-primary-tint: var(--efx-violet-soft);
    --color-success: var(--efx-green);
    --color-success-soft: var(--efx-green-soft);
    --color-danger: var(--efx-red);
    --color-danger-soft: var(--efx-red-soft);
    --color-warning: var(--efx-warning);
    --color-warning-soft: var(--efx-warning-soft);
    --color-info: var(--efx-cyan);
    --color-info-soft: var(--efx-cyan-soft);
    --bg: var(--efx-bg);
    --bg-soft: var(--efx-surface-soft);
    --panel: var(--efx-surface-solid);
    --panel-strong: var(--efx-surface-solid);
    --panel-raised: var(--efx-surface-solid);
    --text: var(--efx-text);
    --muted: var(--efx-muted);
    --muted-2: var(--efx-muted-2);
    --line: var(--efx-border);
    --line-soft: var(--efx-surface-soft);
    --accent: var(--efx-violet);
    --accent-strong: var(--efx-violet-strong);
    --accent-soft: var(--efx-violet-soft);
    --success: var(--efx-green);
    --danger: var(--efx-red);
    --info: var(--efx-cyan);
    --amber: var(--efx-warning);
    --shadow: var(--efx-shadow-sm);
    --shadow-card: var(--efx-shadow-sm);
    --shadow-soft: var(--efx-shadow-sm);
    --shadow-raise: var(--efx-shadow-md);
    --gradient-primary: linear-gradient(135deg, #7769ff, #5748e9);
    --gradient-primary-hover: linear-gradient(135deg, #8477ff, #6556f3);
    --gradient-deep: linear-gradient(145deg, #11152d, #23205f 60%, #164a70);
    --ring-focus: 0 0 0 4px rgba(109, 94, 252, 0.18);
}

[data-theme="dark"] {
    color-scheme: dark;
    --efx-bg: #060813;
    --efx-bg-elevated: #090c18;
    --efx-surface: rgba(13, 17, 32, 0.88);
    --efx-surface-solid: #0d1120;
    --efx-surface-soft: #12172a;
    --efx-surface-hover: #191f35;
    --efx-text: #eef1fb;
    --efx-heading: #fafbff;
    --efx-muted: #939cb5;
    --efx-muted-2: #68738f;
    --efx-border: rgba(181, 193, 224, 0.12);
    --efx-border-strong: rgba(181, 193, 224, 0.22);
    --efx-violet: #8276ff;
    --efx-violet-strong: #a49cff;
    --efx-violet-soft: rgba(130, 118, 255, 0.14);
    --efx-cyan: #24c7ff;
    --efx-cyan-soft: rgba(36, 199, 255, 0.13);
    --efx-lime: #bafc4d;
    --efx-lime-soft: rgba(186, 252, 77, 0.11);
    --efx-green: #50deb0;
    --efx-green-soft: rgba(80, 222, 176, 0.13);
    --efx-red: #ff7189;
    --efx-red-soft: rgba(255, 113, 137, 0.13);
    --efx-warning: #f2bd65;
    --efx-warning-soft: rgba(242, 189, 101, 0.12);
    --efx-shadow-sm: 0 12px 34px rgba(0, 0, 0, 0.25);
    --efx-shadow-md: 0 24px 70px rgba(0, 0, 0, 0.37);
    --efx-shadow-lg: 0 38px 110px rgba(0, 0, 0, 0.52);
    --efx-grid: rgba(130, 118, 255, 0.055);

    --color-bg: var(--efx-bg);
    --color-bg-soft: var(--efx-surface-soft);
    --color-surface: var(--efx-surface-solid);
    --color-surface-elevated: #151a2d;
    --color-surface-muted: var(--efx-surface-soft);
    --color-text: var(--efx-text);
    --color-heading: var(--efx-heading);
    --color-muted: var(--efx-muted);
    --color-muted-2: var(--efx-muted-2);
    --color-border: var(--efx-border);
    --color-border-strong: var(--efx-border-strong);
    --color-primary: var(--efx-violet);
    --color-primary-dark: var(--efx-violet-strong);
    --color-primary-deep: #c2bdff;
    --color-primary-soft: var(--efx-violet-soft);
    --color-primary-tint: var(--efx-violet-soft);
    --color-success: var(--efx-green);
    --color-success-soft: var(--efx-green-soft);
    --color-danger: var(--efx-red);
    --color-danger-soft: var(--efx-red-soft);
    --color-warning: var(--efx-warning);
    --color-warning-soft: var(--efx-warning-soft);
    --color-info: var(--efx-cyan);
    --color-info-soft: var(--efx-cyan-soft);
    --bg: var(--efx-bg);
    --bg-soft: var(--efx-surface-soft);
    --panel: var(--efx-surface-solid);
    --panel-strong: #151a2d;
    --panel-raised: #151a2d;
    --text: var(--efx-text);
    --muted: var(--efx-muted);
    --muted-2: var(--efx-muted-2);
    --line: var(--efx-border);
    --line-soft: var(--efx-surface-soft);
    --accent: var(--efx-violet);
    --accent-strong: var(--efx-violet-strong);
    --accent-soft: var(--efx-violet-soft);
    --success: var(--efx-green);
    --danger: var(--efx-red);
    --info: var(--efx-cyan);
    --amber: var(--efx-warning);
    --shadow: var(--efx-shadow-sm);
    --shadow-card: var(--efx-shadow-sm);
    --shadow-soft: var(--efx-shadow-sm);
    --shadow-raise: var(--efx-shadow-md);
    --gradient-primary: linear-gradient(135deg, #8d82ff, #6758f2);
    --gradient-primary-hover: linear-gradient(135deg, #9a90ff, #7465ff);
    --gradient-deep: linear-gradient(145deg, #0a0d1b, #1a174a 62%, #103b5a);
    --ring-focus: 0 0 0 4px rgba(130, 118, 255, 0.22);
}

html,
body {
    background-color: var(--efx-bg);
}

body {
    background:
        radial-gradient(900px 580px at 94% -12%, var(--efx-violet-soft), transparent 66%),
        radial-gradient(760px 500px at -10% 8%, var(--efx-cyan-soft), transparent 68%),
        linear-gradient(var(--efx-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--efx-grid) 1px, transparent 1px),
        var(--efx-bg);
    background-size: auto, auto, 72px 72px, 72px 72px, auto;
    background-attachment: fixed;
    color: var(--efx-text);
}

h1,
h2,
h3,
h4 {
    color: var(--efx-heading);
}

p {
    color: var(--efx-muted);
}

/* Chrome ---------------------------------------------------------------- */
.site-header {
    padding: 12px 14px 0;
}

.navbar {
    width: min(1480px, 100%);
    min-height: 72px;
    padding: 9px 10px 9px 14px;
    border: 1px solid var(--efx-border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--efx-surface-solid) 84%, transparent);
    box-shadow: var(--efx-shadow-sm);
    backdrop-filter: blur(24px) saturate(150%);
}

.brand {
    flex: 0 0 auto;
}

.brand-logo-wrap {
    width: 176px;
    height: 48px;
    padding: 6px 10px;
    border: 1px solid var(--efx-border);
    border-radius: 13px;
    background: #ffffff;
}

.brand-logo {
    object-fit: contain;
}

.nav-link,
.nav-dropdown-trigger {
    min-height: 43px;
    border-radius: 11px;
    color: var(--efx-muted);
}

.nav-link:hover,
.nav-link.is-active,
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.is-active {
    border-color: var(--efx-border);
    background: var(--efx-violet-soft);
    color: var(--efx-heading);
    box-shadow: none;
}

.nav-link.is-active,
.nav-dropdown-trigger.is-active {
    box-shadow: inset 0 -2px 0 var(--efx-violet);
}

.nav-dropdown-menu,
.notification-menu {
    border-color: var(--efx-border);
    background: var(--efx-surface-solid);
    box-shadow: var(--efx-shadow-md);
}

.nav-menu-link {
    color: var(--efx-muted);
}

.nav-menu-link:hover,
.nav-menu-link.is-active {
    background: var(--efx-violet-soft);
    color: var(--efx-heading);
}

.theme-toggle,
.language-select,
.language-selector select,
.mobile-nav-toggle {
    border-color: var(--efx-border);
    background: var(--efx-surface-soft);
    color: var(--efx-heading);
}

.theme-toggle:hover,
.mobile-nav-toggle:hover {
    border-color: var(--efx-border-strong);
    background: var(--efx-surface-hover);
}

.page-shell {
    width: min(1360px, calc(100% - 40px));
}

.card {
    border-color: var(--efx-border);
    background: var(--efx-surface-solid);
    box-shadow: var(--efx-shadow-sm);
}

.button-primary,
.btn-primary {
    border-color: transparent;
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(109, 94, 252, 0.22);
}

.button-primary:hover,
.btn-primary:hover {
    border-color: transparent;
    background: var(--gradient-primary-hover);
    color: #ffffff;
    box-shadow: 0 16px 36px rgba(109, 94, 252, 0.28);
}

.button-secondary,
.btn-secondary {
    border-color: var(--efx-border-strong);
    background: var(--efx-surface-soft);
    color: var(--efx-heading);
}

.button-secondary:hover,
.btn-secondary:hover {
    border-color: var(--efx-violet);
    background: var(--efx-violet-soft);
    color: var(--efx-heading);
}

input,
select,
textarea,
.page-shell input,
.page-shell select,
.page-shell textarea {
    border-color: var(--efx-border-strong);
    background: var(--efx-surface-soft);
    color: var(--efx-text);
}

input:focus,
select:focus,
textarea:focus,
.page-shell input:focus,
.page-shell select:focus,
.page-shell textarea:focus {
    border-color: var(--efx-violet);
    background: var(--efx-surface-solid);
    box-shadow: var(--ring-focus);
}

.site-footer {
    border-top-color: var(--efx-border);
    color: var(--efx-muted);
}

/* Landing --------------------------------------------------------------- */
body:has(.landing-hero) .page-shell {
    width: min(1480px, calc(100% - 40px));
}

.landing-hero {
    min-height: 760px;
    border-color: var(--efx-border);
    background:
        radial-gradient(760px 600px at 84% 38%, rgba(19, 189, 245, 0.18), transparent 64%),
        radial-gradient(620px 460px at 16% 100%, rgba(109, 94, 252, 0.16), transparent 67%),
        linear-gradient(150deg, #ffffff 0%, #f3f1ff 52%, #ebfaff 100%);
    box-shadow: var(--efx-shadow-lg);
    color: var(--efx-text);
}

[data-theme="dark"] .landing-hero {
    border-color: var(--efx-border);
    background:
        radial-gradient(780px 620px at 86% 38%, rgba(36, 199, 255, 0.15), transparent 64%),
        radial-gradient(620px 480px at 15% 105%, rgba(130, 118, 255, 0.18), transparent 68%),
        linear-gradient(150deg, #090c19 0%, #0f1325 52%, #11172a 100%);
}

.landing-hero::before {
    background-image:
        linear-gradient(var(--efx-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--efx-grid) 1px, transparent 1px);
    opacity: 0.72;
}

.landing-hero::after {
    border-color: rgba(109, 94, 252, 0.22);
    box-shadow: 0 0 0 72px rgba(109, 94, 252, 0.035), 0 0 0 144px rgba(19, 189, 245, 0.025);
}

.landing-hero-copy .eyebrow {
    color: var(--efx-violet-strong);
}

.signal-dot {
    background: var(--efx-cyan);
    box-shadow: 0 0 0 6px var(--efx-cyan-soft), 0 0 24px rgba(19, 189, 245, 0.6);
}

.landing-hero-copy h1 {
    max-width: 760px;
    color: var(--efx-heading);
    font-size: clamp(3.8rem, 6.7vw, 7.2rem);
}

.landing-hero-lead,
.landing-hero-copy > p {
    color: var(--efx-muted);
}

.landing-hero-actions .button-secondary {
    border-color: var(--efx-border-strong);
    background: var(--efx-surface);
    color: var(--efx-heading);
}

.landing-hero-actions .button-secondary:hover {
    border-color: var(--efx-violet);
    background: var(--efx-violet-soft);
}

.landing-hero-products span {
    border-color: var(--efx-border);
    background: var(--efx-surface);
    color: var(--efx-muted);
}

.landing-market-visual {
    border-color: rgba(181, 193, 224, 0.18);
    background: rgba(8, 11, 22, 0.94);
    box-shadow: 0 38px 100px rgba(25, 29, 52, 0.30), inset 0 1px 0 rgba(255,255,255,0.07);
}

[data-theme="dark"] .landing-market-visual {
    box-shadow: 0 38px 100px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.07);
}

.market-visual-chart {
    background:
        linear-gradient(rgba(130,118,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(130,118,255,0.08) 1px, transparent 1px),
        #080b16;
    background-size: 44px 44px;
}

.chart-glow {
    border-top-color: var(--efx-cyan);
    filter: drop-shadow(0 0 14px rgba(36,199,255,0.52));
}

.chart-glow::after {
    background: linear-gradient(180deg, rgba(36,199,255,0.18), transparent 76%);
}

.chart-bars span {
    background: linear-gradient(180deg, rgba(36,199,255,0.8), rgba(36,199,255,0.06));
}

.chart-bars span:nth-child(3n + 2) {
    background: linear-gradient(180deg, rgba(130,118,255,0.82), rgba(130,118,255,0.06));
}

.landing-market-rail,
.landing-proof-stats,
.landing-card,
.landing-card.card,
.market-card,
.account-tier-card,
.account-tier-card.card,
.testimonial-card,
.testimonial-card.card,
.landing-contact-section {
    border-color: var(--efx-border);
    background: var(--efx-surface-solid);
    color: var(--efx-text);
}

.landing-market-rail,
.landing-proof-stats,
.landing-card,
.market-card,
.account-tier-card,
.testimonial-card,
.landing-contact-section {
    box-shadow: var(--efx-shadow-sm);
}

.landing-card:hover,
.landing-card.card:hover,
.market-card:hover,
.account-tier-card:hover {
    border-color: rgba(109, 94, 252, 0.32);
    background: var(--efx-bg-elevated);
    box-shadow: var(--efx-shadow-md);
}

.landing-section-heading h2,
.landing-platform-showcase h2,
.landing-contact-section h2,
.landing-pro-cta h2,
.landing-card h3,
.account-tier-card h3,
.testimonial-card > p,
.market-card > div:nth-child(2) > span {
    color: var(--efx-heading);
}

.landing-platform-showcase {
    border: 1px solid var(--efx-border);
    background:
        radial-gradient(600px 480px at 92% 8%, rgba(19,189,245,0.16), transparent 68%),
        radial-gradient(520px 420px at 22% 110%, rgba(109,94,252,0.15), transparent 70%),
        linear-gradient(145deg, #ffffff, #f1f2ff 58%, #edfaff);
    box-shadow: var(--efx-shadow-lg);
    color: var(--efx-text);
}

[data-theme="dark"] .landing-platform-showcase {
    background:
        radial-gradient(600px 480px at 92% 8%, rgba(36,199,255,0.14), transparent 68%),
        radial-gradient(520px 420px at 22% 110%, rgba(130,118,255,0.16), transparent 70%),
        linear-gradient(145deg, #090c19, #101528 58%, #111b2d);
}

.landing-showcase-copy .eyebrow {
    color: var(--efx-violet-strong);
}

.landing-platform-showcase h2 {
    color: var(--efx-heading);
}

.landing-showcase-copy > p:not(.eyebrow) {
    color: var(--efx-muted);
}

.landing-terminal-preview {
    border-color: rgba(181,193,224,0.16);
    background: #080b16;
}

.terminal-preview-tabs b {
    background: rgba(36,199,255,0.12);
    color: var(--efx-cyan);
}

.preview-line {
    border-top-color: var(--efx-cyan);
    background: linear-gradient(180deg, rgba(36,199,255,0.13), transparent 85%);
}

.account-tier-card.is-featured {
    border-color: transparent;
    background:
        radial-gradient(300px 220px at 100% 0%, rgba(36,199,255,0.22), transparent 70%),
        linear-gradient(145deg, #171432, #2c226d);
}

.account-tier-card.is-featured .button-secondary {
    border-color: transparent;
    background: #ffffff;
    color: #241d5f;
}

.testimonial-mark {
    color: var(--efx-violet);
}

.landing-contact-note {
    background: var(--efx-surface-soft);
}

.landing-pro-cta,
.landing-pro-cta.card {
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(620px 360px at 84% 110%, rgba(36,199,255,0.25), transparent 70%),
        radial-gradient(430px 300px at 20% 0%, rgba(130,118,255,0.28), transparent 72%),
        #0b0e1c;
}

.landing-pro-cta .eyebrow {
    color: var(--efx-cyan);
}

.landing-pro-cta h2 {
    color: #ffffff;
}

/* Dashboard and account surfaces ---------------------------------------- */
.dashboard-hero,
.compact-hero.dashboard-hero {
    border: 1px solid var(--efx-border);
    background:
        radial-gradient(600px 340px at 86% 16%, rgba(19,189,245,0.18), transparent 66%),
        radial-gradient(500px 300px at 18% 120%, rgba(109,94,252,0.16), transparent 70%),
        linear-gradient(145deg, #ffffff, #f0f1ff 64%, #effaff);
    box-shadow: var(--efx-shadow-md);
    color: var(--efx-text);
}

[data-theme="dark"] .dashboard-hero,
[data-theme="dark"] .compact-hero.dashboard-hero {
    background:
        radial-gradient(600px 340px at 86% 16%, rgba(36,199,255,0.14), transparent 66%),
        radial-gradient(500px 300px at 18% 120%, rgba(130,118,255,0.17), transparent 70%),
        linear-gradient(145deg, #0b0e1b, #11162a 64%, #111c30);
}

.dashboard-hero .eyebrow {
    color: var(--efx-violet-strong);
}

.dashboard-hero h1 {
    color: var(--efx-heading);
}

.dashboard-hero p:not(.eyebrow) {
    color: var(--efx-muted);
}

.equity-tile {
    border-color: var(--efx-border);
    background: var(--efx-surface);
}

.equity-tile strong {
    color: var(--efx-heading);
}

.metric-card,
.quick-actions,
.dashboard-notifications,
.dashboard-grid > .card,
.stacked-panels > .card {
    border-color: var(--efx-border);
    background: var(--efx-surface-solid);
    box-shadow: var(--efx-shadow-sm);
}

.metric-card::before {
    background: var(--efx-cyan);
}

.metric-card:nth-child(3n + 2)::before { background: var(--efx-violet); }
.metric-card:nth-child(3n)::before { background: var(--efx-lime); }

.table-wrap,
.mini-table-wrap {
    border-color: var(--efx-border);
    background: var(--efx-surface-soft);
}

table th,
table td {
    border-bottom-color: var(--efx-border);
}

table th {
    color: var(--efx-muted);
}

table td {
    color: var(--efx-text);
}

table tbody tr:hover {
    background: var(--efx-violet-soft);
}

/* Trading terminal: true light and dark parity -------------------------- */
body:has(.terminal-wide) {
    background:
        radial-gradient(900px 540px at 88% -12%, var(--efx-violet-soft), transparent 66%),
        radial-gradient(700px 460px at -8% 10%, var(--efx-cyan-soft), transparent 68%),
        var(--efx-bg) !important;
    color: var(--efx-text);
}

body:has(.terminal-wide) .navbar {
    border-color: var(--efx-border);
    background: color-mix(in srgb, var(--efx-surface-solid) 88%, transparent);
    box-shadow: var(--efx-shadow-sm);
}

body:has(.terminal-wide) .brand,
body:has(.terminal-wide) .nav-link:hover,
body:has(.terminal-wide) .nav-link.is-active,
body:has(.terminal-wide) .nav-dropdown-trigger:hover,
body:has(.terminal-wide) .nav-dropdown-trigger.is-active {
    color: var(--efx-heading);
}

body:has(.terminal-wide) .nav-link,
body:has(.terminal-wide) .nav-dropdown-trigger,
body:has(.terminal-wide) .nav-menu-link {
    color: var(--efx-muted);
}

body:has(.terminal-wide) .nav-link:hover,
body:has(.terminal-wide) .nav-link.is-active,
body:has(.terminal-wide) .nav-dropdown-trigger:hover,
body:has(.terminal-wide) .nav-dropdown-trigger.is-active,
body:has(.terminal-wide) .nav-menu-link:hover,
body:has(.terminal-wide) .nav-menu-link.is-active {
    border-color: var(--efx-border);
    background: var(--efx-violet-soft);
    color: var(--efx-heading);
}

body:has(.terminal-wide) .nav-dropdown-menu,
body:has(.terminal-wide) .notification-menu {
    border-color: var(--efx-border);
    background: var(--efx-surface-solid);
}

body:has(.terminal-wide) .theme-toggle,
body:has(.terminal-wide) .mobile-nav-toggle {
    border-color: var(--efx-border);
    background: var(--efx-surface-soft);
    color: var(--efx-heading);
}

.page-shell:has(.terminal-wide) {
    width: min(1660px, calc(100% - 30px));
    padding-top: 18px;
}

.terminal-wide {
    left: auto;
    width: 100%;
    max-width: none;
    transform: none;
    color: var(--efx-text);
    --terminal-bg: var(--efx-bg);
    --terminal-surface: var(--efx-surface-solid);
    --terminal-surface-soft: var(--efx-surface-soft);
    --terminal-surface-elevated: var(--efx-bg-elevated);
    --terminal-text: var(--efx-text);
    --terminal-muted: var(--efx-muted);
    --terminal-border: var(--efx-border);
    --terminal-border-strong: var(--efx-border-strong);
    --terminal-grid: var(--efx-grid);
    --terminal-chart-bg: #fbfcff;
    --terminal-chart-grid: rgba(109,94,252,0.10);
    --terminal-accent: var(--efx-violet);
    --terminal-accent-strong: var(--efx-violet-strong);
    --terminal-accent-soft: var(--efx-violet-soft);
    --terminal-buy: var(--efx-green);
    --terminal-buy-strong: var(--efx-green);
    --terminal-buy-soft: var(--efx-green-soft);
    --terminal-sell: var(--efx-red);
    --terminal-sell-strong: var(--efx-red);
    --terminal-sell-soft: var(--efx-red-soft);
    --terminal-warning: var(--efx-warning);
    --terminal-warning-soft: var(--efx-warning-soft);
    --terminal-danger: var(--efx-red);
    --terminal-shadow: var(--efx-shadow-sm);
}

[data-theme="dark"] .terminal-wide {
    --terminal-chart-bg: #080b16;
    --terminal-chart-grid: rgba(112,128,174,0.13);
}

.terminal-workspace-nav {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(560px, 1.6fr) minmax(150px, 0.45fr);
    gap: 18px;
    min-height: 86px;
    margin-bottom: 10px;
    padding: 12px 14px;
    align-items: center;
    border: 1px solid var(--terminal-border);
    border-radius: 20px;
    background:
        radial-gradient(380px 140px at 72% 0%, var(--efx-cyan-soft), transparent 72%),
        var(--terminal-surface);
    box-shadow: var(--terminal-shadow);
}

.terminal-workspace-title {
    display: grid;
    gap: 4px;
    padding-left: 4px;
}

.terminal-workspace-title span {
    color: var(--terminal-muted);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.terminal-workspace-title strong {
    color: var(--terminal-text);
    font-size: 1.22rem;
    letter-spacing: -0.035em;
}

.terminal-market-routes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.terminal-market-route {
    display: flex;
    min-width: 0;
    min-height: 54px;
    padding: 9px 11px;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--terminal-border);
    border-radius: 12px;
    background: var(--terminal-surface-soft);
    color: var(--terminal-muted);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.terminal-market-route:hover {
    border-color: var(--terminal-border-strong);
    background: var(--efx-surface-hover);
    color: var(--terminal-text);
    transform: translateY(-2px);
}

.terminal-market-route.is-active {
    border-color: rgba(109,94,252,0.40);
    background: var(--terminal-accent-soft);
    color: var(--terminal-accent-strong);
    box-shadow: inset 0 -2px 0 var(--terminal-accent);
}

.terminal-market-route small {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    place-items: center;
    border-radius: 7px;
    background: var(--terminal-surface);
    color: var(--terminal-muted);
    font-size: 0.58rem;
    font-weight: 850;
}

.terminal-market-route.is-active small {
    background: var(--terminal-accent);
    color: #ffffff;
}

.terminal-market-route span {
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-workspace-status {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--terminal-border);
    border-radius: 12px;
    background: var(--terminal-surface-soft);
}

.terminal-workspace-status > i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--terminal-buy);
    box-shadow: 0 0 0 5px var(--terminal-buy-soft), 0 0 18px var(--terminal-buy);
}

.terminal-workspace-status > span {
    display: grid;
    gap: 2px;
}

.terminal-workspace-status small {
    color: var(--terminal-muted);
    font-size: 0.58rem;
    font-weight: 750;
}

.terminal-workspace-status strong {
    color: var(--terminal-text);
    font-size: 0.72rem;
}

.terminal-wide .terminal-market-header,
.terminal-wide .terminal-panel,
.terminal-wide .chart-panel,
.terminal-wide .order-form-panel,
.terminal-wide .depth-panel,
.terminal-wide .bottom-panel {
    border-color: var(--terminal-border);
    border-radius: 18px;
    background: var(--terminal-surface);
    color: var(--terminal-text);
    box-shadow: var(--terminal-shadow);
}

.terminal-wide .terminal-market-header::before {
    display: none;
}

.terminal-wide .terminal-market-header {
    grid-template-columns: minmax(240px, 0.66fr) minmax(620px, 1.65fr) minmax(190px, 0.55fr);
    min-height: 112px;
    margin-bottom: 10px;
    padding: 13px;
    overflow: visible;
}

.terminal-wide .market-pair-block {
    grid-column: auto;
    padding: 4px 8px 4px 4px;
}

.terminal-wide .ticker-strip {
    grid-column: auto;
    gap: 7px;
}

.terminal-wide .market-clarity-stack,
.terminal-wide .demo-pill {
    grid-column: auto;
    justify-self: end;
    margin: 0;
}

.terminal-wide .ticker-strip > div {
    min-height: 72px;
    padding: 12px;
    border: 1px solid var(--terminal-border);
    border-radius: 13px;
    background: var(--terminal-surface-soft);
}

.terminal-wide .ticker-strip > div:first-child {
    background:
        radial-gradient(180px 100px at 100% 0%, var(--efx-cyan-soft), transparent 70%),
        var(--terminal-surface-soft);
}

.terminal-wide .ticker-main strong {
    color: var(--terminal-text);
    font-size: 1.55rem;
    letter-spacing: -0.05em;
}

.terminal-wide .terminal-label {
    color: var(--terminal-muted);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.terminal-wide .pair-search-current,
.terminal-wide .terminal-select,
.terminal-wide .compact-select,
.terminal-wide .spot-order-form input,
.terminal-wide .spot-order-form select,
.terminal-wide .chart-menu-panel select,
.terminal-wide .pair-search-input,
.terminal-wide .mobile-control-select {
    border-color: var(--terminal-border-strong);
    border-radius: 10px;
    background: var(--terminal-surface-soft);
    color: var(--terminal-text);
}

.terminal-wide .pair-search-current:hover,
.terminal-wide .terminal-select:hover,
.terminal-wide .spot-order-form input:hover,
.terminal-wide .spot-order-form select:hover {
    border-color: var(--terminal-accent);
    background: var(--terminal-surface);
}

.terminal-wide .pair-search-current:focus,
.terminal-wide .terminal-select:focus,
.terminal-wide .spot-order-form input:focus,
.terminal-wide .spot-order-form select:focus,
.terminal-wide .pair-search-input:focus {
    border-color: var(--terminal-accent);
    box-shadow: 0 0 0 3px var(--terminal-accent-soft);
}

.terminal-wide .pair-search-panel,
.terminal-wide .chart-menu-panel,
.terminal-wide .ohlc-tooltip,
.terminal-wide .chart-floating-tooltip,
.terminal-wide .terminal-toast {
    border-color: var(--terminal-border);
    border-radius: 14px;
    background: var(--terminal-surface-elevated);
    color: var(--terminal-text);
    box-shadow: var(--efx-shadow-md);
}

.terminal-wide .source-pill,
.terminal-wide .live-status-pill,
.terminal-wide .utc-clock,
.terminal-wide .forex-count-pill,
.terminal-wide .status-pill,
.terminal-wide .ff-status-badge {
    border: 1px solid var(--terminal-border);
    border-radius: 999px;
    background: var(--terminal-accent-soft);
    color: var(--terminal-accent-strong);
}

.terminal-wide .demo-pill {
    border-color: transparent;
    background: var(--terminal-accent);
    color: #ffffff;
}

.terminal-wide .terminal-safety-line,
.terminal-wide + .terminal-safety-line {
    margin: 0 12px 10px;
    border: 1px solid rgba(190,116,21,0.2);
    border-radius: 11px;
    background: var(--terminal-warning-soft);
    color: var(--terminal-warning);
}

.terminal-wide > .alert {
    margin: 0 0 10px;
    border-radius: 12px;
}

.terminal-grid {
    grid-template-columns: 330px minmax(560px, 1fr) 380px;
    grid-template-areas:
        "depth chart form"
        "bottom bottom form";
    gap: 10px;
}

.terminal-wide .terminal-panel {
    min-width: 0;
    overflow: hidden;
}

.terminal-wide .chart-panel,
.terminal-wide .depth-panel,
.terminal-wide .order-form-panel {
    min-height: 680px;
}

.terminal-wide .bottom-panel {
    min-height: 240px;
}

.terminal-wide .order-form-panel {
    padding: 14px;
    background:
        radial-gradient(360px 180px at 50% 0%, var(--efx-violet-soft), transparent 72%),
        var(--terminal-surface);
}

.terminal-wide .panel-topbar,
.terminal-wide .chart-control-row,
.terminal-wide .chart-bottom-row,
.terminal-wide .book-view-row,
.terminal-wide .book-header,
.terminal-wide .book-ratio-footer {
    min-height: 50px;
    border-color: var(--terminal-border);
    background: var(--terminal-surface-soft);
}

.terminal-wide .panel-topbar {
    padding: 8px 11px;
}

.terminal-wide .terminal-tab,
.terminal-wide .timeframe-button,
.terminal-wide .chip,
.terminal-wide .range-button,
.terminal-wide .tool-button,
.terminal-wide .book-view-button,
.terminal-wide .order-type-button,
.terminal-wide .percent-button,
.terminal-wide .icon-button,
.terminal-wide .side-button,
.terminal-wide .chart-reset-button,
.terminal-wide .mini-action-button,
.terminal-wide .chart-menu summary,
.terminal-wide .terminal-mobile-tab {
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--terminal-muted);
}

.terminal-wide .terminal-tab:hover,
.terminal-wide .timeframe-button:hover,
.terminal-wide .chip:hover,
.terminal-wide .range-button:hover,
.terminal-wide .tool-button:hover,
.terminal-wide .book-view-button:hover,
.terminal-wide .order-type-button:hover,
.terminal-wide .percent-button:hover,
.terminal-wide .icon-button:hover,
.terminal-wide .side-button:hover,
.terminal-wide .chart-reset-button:hover,
.terminal-wide .chart-menu summary:hover {
    border-color: var(--terminal-border);
    background: var(--efx-surface-hover);
    color: var(--terminal-text);
}

.terminal-wide .terminal-tab.is-active,
.terminal-wide .timeframe-button.is-active,
.terminal-wide .chip.is-active,
.terminal-wide .range-button.is-active,
.terminal-wide .tool-button.is-active,
.terminal-wide .book-view-button.is-active,
.terminal-wide .order-type-button.is-active,
.terminal-wide .terminal-mobile-tab.is-active,
.terminal-wide .compact-segmented .side-button.is-active {
    border-color: rgba(109,94,252,0.24);
    background: var(--terminal-accent-soft);
    color: var(--terminal-accent-strong) !important;
}

.terminal-wide .chart-workspace,
.terminal-wide .terminal-chart-canvas,
.terminal-wide .depth-chart-canvas,
.terminal-wide .depth-mini-canvas {
    background: var(--terminal-chart-bg);
}

.terminal-wide .left-toolbar {
    border-right-color: var(--terminal-border);
    background: var(--terminal-surface-soft);
}

.terminal-wide .overview-grid > div,
.terminal-wide .analysis-placeholder,
.terminal-wide .estimate-box,
.terminal-wide .tpsl-fields,
.terminal-wide .forex-rate-detail div,
.terminal-wide .ff-summary-card {
    border-color: var(--terminal-border);
    border-radius: 11px;
    background: var(--terminal-surface-soft);
}

.terminal-wide .estimate-box {
    overflow: hidden;
    padding: 0;
}

.terminal-wide .estimate-box > div {
    padding: 10px 11px;
    border-bottom: 1px solid var(--terminal-border);
}

.terminal-wide .estimate-box > div:last-child {
    border-bottom: 0;
}

.terminal-wide .orderbook-table,
.terminal-wide .recent-trades {
    padding: 11px 12px;
}

.terminal-wide .book-header,
.terminal-wide .book-row,
.terminal-wide .trade-row {
    min-height: 28px;
}

.terminal-wide .book-row,
.terminal-wide .trade-row {
    border-radius: 6px;
    color: var(--terminal-text);
}

.terminal-wide .spread-line {
    border-color: var(--terminal-border);
    color: var(--terminal-accent-strong);
}

.terminal-wide .terminal-table th,
.terminal-wide .orderbook-table th,
.terminal-wide .futures-table th,
.terminal-wide .mini-table-wrap th {
    border-bottom-color: var(--terminal-border);
    background: transparent;
    color: var(--terminal-muted);
}

.terminal-wide .terminal-table td,
.terminal-wide .orderbook-table td,
.terminal-wide .futures-table td,
.terminal-wide .mini-table-wrap td {
    border-bottom-color: var(--terminal-border);
    color: var(--terminal-text);
}

.terminal-wide .terminal-table tbody tr:hover,
.terminal-wide .book-row:hover,
.terminal-wide .trade-row:hover,
.terminal-wide .feed-item:hover,
.terminal-wide .pair-search-option:hover,
.terminal-wide .pair-search-option.is-active {
    background: var(--terminal-accent-soft);
}

.terminal-wide .segmented {
    padding: 4px;
    border: 1px solid var(--terminal-border);
    border-radius: 12px;
    background: var(--terminal-surface-soft);
}

.terminal-wide .side-button {
    min-height: 42px;
    border-radius: 9px;
    background: transparent;
}

.terminal-wide .side-button.buy.is-active {
    border-color: var(--terminal-buy);
    background: var(--terminal-buy-soft);
    color: var(--terminal-buy-strong) !important;
}

.terminal-wide .side-button.sell.is-active {
    border-color: var(--terminal-sell);
    background: var(--terminal-sell-soft);
    color: var(--terminal-sell-strong) !important;
}

.terminal-wide .submit-order-button {
    min-height: 50px;
    border: 0;
    border-radius: 11px;
    font-weight: 850;
}

.terminal-wide .submit-order-button.buy,
.terminal-wide .submit-order-button.buy:hover,
.terminal-wide .submit-order-button.buy:focus,
.terminal-wide .submit-order-button.buy:disabled {
    background: linear-gradient(135deg, #5ce0b4, #25b983);
    color: #061710 !important;
}

.terminal-wide .submit-order-button.sell,
.terminal-wide .submit-order-button.sell:hover,
.terminal-wide .submit-order-button.sell:focus,
.terminal-wide .submit-order-button.sell:disabled {
    background: linear-gradient(135deg, #ff8da0, #e6536d);
    color: #28070d !important;
}

.terminal-wide .price-up,
.terminal-wide .is-positive,
.terminal-wide .bid,
.terminal-wide .buy {
    color: var(--terminal-buy-strong) !important;
}

.terminal-wide .price-down,
.terminal-wide .is-negative,
.terminal-wide .ask,
.terminal-wide .sell {
    color: var(--terminal-sell-strong) !important;
}

.terminal-wide .book-row.bid .book-depth { background: var(--terminal-buy); }
.terminal-wide .book-row.ask .book-depth { background: var(--terminal-sell); }

.terminal-wide .terminal-mobile-tabs {
    border-color: var(--terminal-border);
    border-radius: 13px;
    background: var(--terminal-surface);
}

.terminal-wide .ff-summary {
    gap: 8px;
    margin-bottom: 10px;
}

.terminal-wide .ff-summary-card {
    min-height: 82px;
    padding: 13px;
}

.terminal-wide .forex-pair-button {
    border-color: var(--terminal-border);
    background: var(--terminal-surface-soft);
    color: var(--terminal-text);
}

.terminal-wide .forex-pair-button:hover,
.terminal-wide .forex-pair-button.is-active {
    border-color: var(--terminal-accent);
    background: var(--terminal-accent-soft);
}

/* Admin brand parity ----------------------------------------------------- */
.admin-brand-mark {
    display: grid;
    overflow: hidden;
    place-items: center;
    border-color: var(--efx-border);
    background: #ffffff;
}

.admin-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Responsive terminal and public surfaces ------------------------------- */
@media (max-width: 1380px) {
    .terminal-workspace-nav {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .terminal-workspace-status {
        display: none;
    }

    .terminal-wide .terminal-market-header {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .terminal-wide .market-clarity-stack,
    .terminal-wide .demo-pill {
        grid-column: 1 / -1;
        justify-self: start;
        margin-left: 4px;
    }

    .terminal-grid {
        grid-template-columns: 300px minmax(500px, 1fr) 350px;
    }
}

@media (max-width: 1180px) {
    .brand-logo-wrap {
        width: 158px;
    }

    .terminal-workspace-nav {
        grid-template-columns: 1fr;
    }

    .terminal-market-routes {
        width: 100%;
    }

    .terminal-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
        grid-template-areas:
            "chart form"
            "depth form"
            "bottom bottom";
    }

    .terminal-wide .depth-panel {
        min-height: 540px;
    }
}

@media (max-width: 900px) {
    .terminal-market-routes {
        display: flex;
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .terminal-market-route {
        min-width: 150px;
    }

    .terminal-wide .terminal-market-header {
        grid-template-columns: 1fr;
    }

    .terminal-wide .ticker-strip,
    .terminal-wide .futures-ticker-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terminal-wide .market-clarity-stack,
    .terminal-wide .demo-pill {
        grid-column: auto;
    }

    .terminal-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "chart"
            "depth"
            "form"
            "bottom";
    }

    .terminal-wide .chart-panel,
    .terminal-wide .depth-panel,
    .terminal-wide .order-form-panel {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .site-header {
        padding: 8px 8px 0;
    }

    .brand-logo-wrap {
        width: 138px;
        height: 44px;
        padding: 6px 8px;
    }

    .page-shell,
    body:has(.landing-hero) .page-shell,
    body:has(.dashboard-hero) .page-shell,
    .page-shell:has(.terminal-wide) {
        width: calc(100% - 20px);
    }

    .landing-hero {
        min-height: 0;
    }

    .landing-hero-copy h1 {
        font-size: clamp(3.1rem, 15vw, 5rem);
    }

    .terminal-workspace-nav {
        padding: 12px;
        border-radius: 15px;
    }

    .terminal-workspace-title strong {
        font-size: 1.05rem;
    }

    .terminal-wide .terminal-market-header,
    .terminal-wide .terminal-panel {
        border-radius: 14px;
    }

    .terminal-wide .terminal-market-header {
        min-height: 0;
        padding: 11px;
    }
}

@media (max-width: 520px) {
    .brand-logo-wrap {
        width: 122px;
    }

    .terminal-wide .ticker-strip,
    .terminal-wide .futures-ticker-strip {
        grid-template-columns: 1fr 1fr;
    }

    .terminal-wide .ticker-strip > div {
        min-height: 64px;
    }

    .terminal-market-route {
        min-width: 132px;
    }

    .terminal-market-route small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .terminal-market-route {
        transition: none;
    }
}

/* ========================================================================== 
   EtheraFX workspace refinement — compact, balanced and theme-safe
   ========================================================================== */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--efx-heading);
}

.brand-logo-wrap {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 4px;
    place-items: center;
    border-radius: 12px;
    background: #ffffff;
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-wordmark {
    color: var(--efx-heading);
    font-size: 1.18rem;
    font-weight: 780;
    letter-spacing: -0.055em;
    line-height: 1;
    white-space: nowrap;
}

.brand-wordmark > span {
    color: var(--efx-cyan);
}

[data-theme="dark"] .brand-wordmark {
    color: #f8faff;
}

body:has(.terminal-wide) {
    background: var(--efx-bg) !important;
}

body:has(.terminal-wide) .site-header {
    position: sticky;
    z-index: 80;
    top: 0;
    padding: 8px 12px 0;
    background: color-mix(in srgb, var(--efx-bg) 84%, transparent);
    backdrop-filter: blur(18px);
}

body:has(.terminal-wide) .navbar {
    width: min(1660px, 100%);
    min-height: 62px;
    padding: 7px 9px 7px 12px;
    border-radius: 15px;
    box-shadow: none;
}

body:has(.terminal-wide) .site-footer {
    display: none;
}

.page-shell:has(.terminal-wide) {
    padding-top: 10px;
    padding-bottom: 24px;
}

.terminal-wide {
    font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.terminal-workspace-nav {
    grid-template-columns: minmax(150px, auto) minmax(520px, 1fr) auto;
    gap: 14px;
    min-height: 62px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: var(--terminal-surface);
    box-shadow: none;
}

.terminal-workspace-title {
    gap: 1px;
    padding-left: 2px;
}

.terminal-workspace-title span {
    font-size: 0.57rem;
    font-weight: 650;
    letter-spacing: 0.09em;
}

.terminal-workspace-title strong {
    font-size: 1rem;
    font-weight: 720;
    letter-spacing: -0.025em;
}

.terminal-market-routes {
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--terminal-border);
    border-radius: 10px;
    background: var(--terminal-surface-soft);
}

.terminal-market-route {
    min-height: 38px;
    padding: 7px 12px;
    justify-content: center;
    border-color: transparent;
    border-radius: 7px;
    background: transparent;
}

.terminal-market-route:hover {
    border-color: transparent;
    background: var(--efx-surface-hover);
    transform: none;
}

.terminal-market-route.is-active {
    border-color: var(--terminal-border);
    background: var(--terminal-surface);
    color: var(--terminal-text);
    box-shadow: 0 1px 5px rgba(17, 24, 39, 0.08), inset 0 -2px 0 var(--terminal-accent);
}

.terminal-market-route small {
    display: none;
}

.terminal-market-route span {
    font-size: 0.74rem;
    font-weight: 650;
}

.terminal-workspace-status {
    gap: 8px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.terminal-workspace-status > i {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 4px var(--terminal-buy-soft);
}

.terminal-workspace-status small {
    font-size: 0.54rem;
}

.terminal-workspace-status strong {
    font-size: 0.68rem;
}

.terminal-wide .terminal-market-header,
.terminal-wide .terminal-panel,
.terminal-wide .chart-panel,
.terminal-wide .order-form-panel,
.terminal-wide .depth-panel,
.terminal-wide .bottom-panel {
    border-radius: 13px;
    box-shadow: none;
}

.terminal-wide .terminal-market-header {
    grid-template-columns: minmax(210px, 0.58fr) minmax(0, 2fr) minmax(130px, auto);
    gap: 0;
    min-height: 88px;
    margin-bottom: 8px;
    padding: 8px 10px;
    align-items: stretch;
    overflow: hidden;
}

.terminal-wide .market-pair-block {
    display: grid;
    align-content: center;
    padding: 4px 14px 4px 4px;
    border-right: 1px solid var(--terminal-border);
}

.terminal-wide .pair-search-current {
    min-height: 56px;
    padding: 7px 9px;
    border-color: transparent;
    background: transparent;
}

.terminal-wide .pair-search-current:hover {
    border-color: var(--terminal-border);
    background: var(--terminal-surface-soft);
}

.terminal-wide .pair-search-current > span {
    font-size: 1.04rem;
    font-weight: 720;
    letter-spacing: -0.025em;
}

.terminal-wide .pair-search-current small {
    font-size: 0.66rem;
}

.terminal-wide .ticker-strip,
.terminal-wide .futures-ticker-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(88px, 1fr));
    gap: 0;
    min-width: 0;
    padding: 5px 0;
    align-items: stretch;
}

.terminal-wide .futures-ticker-strip {
    grid-template-columns: repeat(6, minmax(82px, 1fr));
}

.terminal-wide[data-forex-futures-terminal] .futures-ticker-strip {
    grid-template-columns: repeat(5, minmax(88px, 1fr));
}

.terminal-wide .ticker-strip > div {
    display: grid;
    min-width: 0;
    min-height: 0;
    padding: 8px 12px;
    align-content: center;
    gap: 4px;
    border: 0;
    border-left: 1px solid var(--terminal-border);
    border-radius: 0;
    background: transparent;
}

.terminal-wide .ticker-strip > div:first-child {
    border-left: 0;
    background: transparent;
}

.terminal-wide .ticker-strip strong {
    overflow: hidden;
    color: var(--terminal-text);
    font-size: 0.9rem;
    font-weight: 680;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-wide .ticker-main strong {
    font-size: 1.34rem;
    font-weight: 740;
}

.terminal-wide .terminal-label {
    font-size: 0.58rem;
    font-weight: 650;
    letter-spacing: 0.055em;
}

.terminal-wide .market-clarity-stack,
.terminal-wide .demo-pill {
    display: flex;
    grid-column: auto;
    max-width: 180px;
    padding-left: 10px;
    align-content: center;
    align-items: flex-start;
    align-self: center;
    justify-self: stretch;
    flex-direction: column;
    gap: 5px;
}

.terminal-wide .source-pill,
.terminal-wide .live-status-pill,
.terminal-wide .ff-status-badge {
    max-width: 100%;
    padding: 4px 7px;
    overflow: hidden;
    border-color: transparent;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-wide .terminal-safety-line,
.terminal-wide + .terminal-safety-line,
.terminal-wide > .alert {
    margin-bottom: 8px;
    border-radius: 9px;
}

.terminal-wide .terminal-grid {
    grid-template-columns: 280px minmax(520px, 1fr) 330px;
    grid-template-areas:
        "depth chart form"
        "bottom bottom bottom";
    gap: 8px;
    align-items: start;
}

.terminal-wide .chart-panel,
.terminal-wide .depth-panel,
.terminal-wide .order-form-panel {
    min-height: 660px;
}

.terminal-wide .depth-panel {
    --book-panel-height: 660px;
}

.terminal-wide .order-form-panel {
    height: 660px;
    min-height: 660px;
    padding: 12px;
    overflow-y: auto;
    background: var(--terminal-surface);
}

.terminal-wide .bottom-panel {
    min-height: 210px;
}

.terminal-wide .panel-topbar,
.terminal-wide .chart-control-row,
.terminal-wide .chart-bottom-row,
.terminal-wide .book-view-row,
.terminal-wide .book-header,
.terminal-wide .book-ratio-footer {
    min-height: 42px;
    background: color-mix(in srgb, var(--terminal-surface-soft) 72%, transparent);
}

.terminal-wide .panel-topbar {
    padding: 6px 8px;
}

.terminal-wide .chart-panel > .panel-topbar {
    display: flex;
    min-height: 46px;
    padding: 5px 8px;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
}

.terminal-wide .chart-selector-group,
.terminal-wide .chart-selector-group .timeframe-row,
.terminal-wide .chart-control-group,
.terminal-wide .chart-type-row,
.terminal-wide .chart-modes,
.terminal-wide .tab-row {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.terminal-wide .chart-selector-group {
    flex: 0 0 auto;
    gap: 6px;
}

.terminal-wide .chart-control-row {
    display: flex;
    min-height: 42px;
    padding: 4px 8px;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
}

.terminal-wide .chart-panel > .panel-topbar,
.terminal-wide .chart-control-row,
.terminal-wide .terminal-market-routes,
.terminal-wide .ticker-strip,
.terminal-wide .ff-summary {
    scrollbar-width: none;
}

.terminal-wide .chart-panel > .panel-topbar::-webkit-scrollbar,
.terminal-wide .chart-control-row::-webkit-scrollbar,
.terminal-wide .terminal-market-routes::-webkit-scrollbar,
.terminal-wide .ticker-strip::-webkit-scrollbar,
.terminal-wide .ff-summary::-webkit-scrollbar {
    display: none;
}

.terminal-wide .terminal-tab,
.terminal-wide .timeframe-button,
.terminal-wide .chip,
.terminal-wide .range-button,
.terminal-wide .tool-button,
.terminal-wide .book-view-button,
.terminal-wide .order-type-button,
.terminal-wide .percent-button,
.terminal-wide .icon-button,
.terminal-wide .side-button,
.terminal-wide .chart-reset-button,
.terminal-wide .mini-action-button,
.terminal-wide .chart-menu summary,
.terminal-wide .terminal-mobile-tab {
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.69rem;
    font-weight: 620;
}

.terminal-wide .terminal-tab.is-active,
.terminal-wide .timeframe-button.is-active,
.terminal-wide .chip.is-active,
.terminal-wide .range-button.is-active,
.terminal-wide .tool-button.is-active,
.terminal-wide .book-view-button.is-active,
.terminal-wide .order-type-button.is-active,
.terminal-wide .terminal-mobile-tab.is-active,
.terminal-wide .compact-segmented .side-button.is-active {
    border-color: transparent;
    background: var(--terminal-accent-soft);
    box-shadow: inset 0 -2px 0 var(--terminal-accent);
}

.terminal-wide .chart-workspace {
    min-height: 552px;
}

.terminal-wide .chart-views,
.terminal-wide .chart-view {
    min-height: 552px;
}

.terminal-wide .ohlc-tooltip,
.terminal-wide .chart-floating-tooltip {
    max-width: calc(100% - 28px);
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--terminal-surface) 88%, transparent);
    box-shadow: none;
    font-size: 0.64rem;
}

.terminal-wide .orderbook-table,
.terminal-wide .recent-trades {
    padding: 7px 9px;
}

.terminal-wide .book-header,
.terminal-wide .book-row,
.terminal-wide .trade-row {
    min-height: 25px;
}

.terminal-wide .book-row,
.terminal-wide .trade-row {
    border-radius: 3px;
    font-size: 0.68rem;
}

.terminal-wide .segmented {
    padding: 3px;
    border-radius: 9px;
}

.terminal-wide .side-button {
    min-height: 38px;
    border-radius: 6px;
    font-size: 0.78rem;
}

.terminal-wide .spot-order-form,
.terminal-wide .futures-order-form {
    gap: 10px;
}

.terminal-wide .form-row {
    gap: 5px;
}

.terminal-wide .form-row > span,
.terminal-wide .spot-order-form label > span {
    font-size: 0.66rem;
    font-weight: 620;
}

.terminal-wide .pair-search-current,
.terminal-wide .terminal-select,
.terminal-wide .compact-select,
.terminal-wide .spot-order-form input,
.terminal-wide .spot-order-form select,
.terminal-wide .chart-menu-panel select,
.terminal-wide .pair-search-input,
.terminal-wide .mobile-control-select {
    border-radius: 7px;
}

.terminal-wide .spot-order-form input,
.terminal-wide .spot-order-form select,
.terminal-wide .terminal-select {
    min-height: 40px;
}

.terminal-wide .estimate-box,
.terminal-wide .tpsl-fields,
.terminal-wide .forex-rate-detail div {
    border-radius: 8px;
}

.terminal-wide .submit-order-button {
    min-height: 46px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 720;
}

.terminal-wide .ff-summary {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid var(--terminal-border);
    border-radius: 13px;
    background: var(--terminal-surface);
}

.terminal-wide .ff-summary-card {
    min-height: 68px;
    padding: 10px 12px;
    border: 0;
    border-right: 1px solid var(--terminal-border);
    border-radius: 0;
    background: transparent;
}

.terminal-wide .ff-summary-card:last-child {
    border-right: 0;
}

.terminal-wide .ff-summary-card strong {
    color: var(--terminal-text);
    font-size: 0.9rem;
    font-weight: 690;
}

[data-theme="light"] .terminal-wide {
    --terminal-surface: #ffffff;
    --terminal-surface-soft: #f6f7fa;
    --terminal-surface-elevated: #ffffff;
    --terminal-border: #e1e4eb;
    --terminal-border-strong: #cfd4df;
    --terminal-chart-bg: #fbfcfe;
}

[data-theme="dark"] .terminal-wide {
    --terminal-surface: #0d1320;
    --terminal-surface-soft: #121a2a;
    --terminal-surface-elevated: #151e30;
    --terminal-border: #222d42;
    --terminal-border-strong: #34425d;
    --terminal-chart-bg: #080c15;
}

@media (max-width: 1380px) {
    .terminal-wide .left-toolbar {
        display: none;
    }

    .terminal-wide .chart-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1240px) {
    .terminal-workspace-nav {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .terminal-workspace-status {
        display: none;
    }

    .terminal-wide .terminal-market-header {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .terminal-wide .market-clarity-stack,
    .terminal-wide .demo-pill {
        display: none;
    }

    .terminal-wide .terminal-grid {
        grid-template-columns: 270px minmax(470px, 1fr) 320px;
    }
}

@media (max-width: 1100px) {
    .terminal-wide .terminal-grid {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
        grid-template-areas:
            "chart form"
            "depth depth"
            "bottom bottom";
    }

    .terminal-wide .depth-panel {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .terminal-workspace-nav {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .terminal-market-routes {
        display: flex;
        padding-bottom: 3px;
        overflow-x: auto;
    }

    .terminal-market-route {
        min-width: 128px;
    }

    .terminal-wide .terminal-market-header {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .terminal-wide .ticker-strip,
    .terminal-wide .futures-ticker-strip,
    .terminal-wide[data-forex-futures-terminal] .futures-ticker-strip {
        display: flex;
        overflow-x: auto;
    }

    .terminal-wide .ticker-strip > div {
        min-width: 112px;
    }

    .terminal-wide .terminal-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "chart"
            "depth"
            "form"
            "bottom";
    }

    .terminal-wide .chart-panel,
    .terminal-wide .depth-panel,
    .terminal-wide .order-form-panel {
        height: auto;
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .brand {
        gap: 7px;
    }

    .brand-logo-wrap {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        padding: 3px;
        border-radius: 10px;
    }

    .brand-wordmark {
        font-size: 1rem;
    }

    body:has(.terminal-wide) .site-header {
        padding: 6px 6px 0;
    }

    body:has(.terminal-wide) .navbar {
        min-height: 54px;
        border-radius: 12px;
    }

    .page-shell:has(.terminal-wide) {
        width: calc(100% - 12px);
        padding-top: 6px;
    }

    .terminal-workspace-nav {
        padding: 8px;
        border-radius: 11px;
    }

    .terminal-workspace-title span {
        display: none;
    }

    .terminal-wide .terminal-market-header {
        grid-template-columns: 1fr;
        padding: 8px;
        border-radius: 11px;
    }

    .terminal-wide .market-pair-block {
        padding: 0 0 7px;
        border-right: 0;
        border-bottom: 1px solid var(--terminal-border);
    }

    .terminal-wide .ticker-strip {
        padding-top: 4px;
    }

    .terminal-wide .ticker-strip > div:first-child {
        border-left: 0;
    }

    .terminal-wide .terminal-panel,
    .terminal-wide .ff-summary {
        border-radius: 11px;
    }

    .terminal-wide .ff-summary {
        display: flex;
        overflow-x: auto;
    }

    .terminal-wide .ff-summary-card {
        min-width: 145px;
    }

    .terminal-wide .chart-workspace,
    .terminal-wide .chart-views,
    .terminal-wide .chart-view {
        min-height: 430px;
    }
}