:root {
    color-scheme: dark;
    --bg: #08080a;
    --panel: #0f0f12;
    --panel-2: #18181d;
    --line: #28282f;
    --line-strong: #41414b;
    --text: #f7f6f2;
    --muted: #96969f;
    --blue: #bdbbff;
    --blue-soft: rgba(189, 187, 255, 0.13);
    --green: #4fd69b;
    --green-soft: rgba(79, 214, 155, 0.12);
    --red: #ff6d7b;
    --red-soft: rgba(255, 109, 123, 0.12);
    --amber: #ffb454;
    --chrome: #070708;
    --inspector: #0b0b0e;
    --hover: #151519;
    --toast: #19191e;
    --sticky: rgba(11, 11, 14, 0.98);
    --brand-orange: #fc4c02;
    --brand-magenta: #ef2cc1;
    --brand-periwinkle: #bdbbff;
    --brand-mint: #c8f6f9;
    --font-ui: "Segoe UI Variable", Inter, "Segoe UI", Arial, sans-serif;
    --font-data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --radius: 4px;
    font-family: var(--font-ui);
    color: var(--text);
    background: var(--bg);
}

:root[data-theme="dark-alt"] {
    --bg: #060909;
    --panel: #0d1212;
    --panel-2: #151c1c;
    --line: #273238;
    --line-strong: #405151;
    --text: #f5f8f6;
    --muted: #92a09c;
    --blue: #c8f6f9;
    --blue-soft: rgba(200, 246, 249, 0.12);
    --chrome: #050808;
    --inspector: #091010;
    --hover: #121919;
    --sticky: rgba(9, 16, 16, 0.98);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f5f7;
    --panel: #ffffff;
    --panel-2: #eceef2;
    --line: #d9dbe1;
    --line-strong: #b7bbc5;
    --text: #17171b;
    --muted: #696b74;
    --blue: #5650b8;
    --blue-soft: rgba(86, 80, 184, 0.1);
    --green: #087f54;
    --green-soft: rgba(8, 127, 84, 0.09);
    --red: #c53e50;
    --red-soft: rgba(197, 62, 80, 0.09);
    --amber: #9a6100;
    --chrome: #ffffff;
    --inspector: #f8f9fb;
    --hover: #f0f1f4;
    --toast: #ffffff;
    --sticky: rgba(248, 249, 251, 0.98);
}

* {
    box-sizing: border-box;
    letter-spacing: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
}

body,
button,
input,
select {
    font: inherit;
    font-family: var(--font-ui);
}

button,
input,
select,
summary {
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

button,
input,
select {
    color: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand-periwinkle);
    outline-offset: 2px;
}

strong,
span,
em,
small,
label {
    min-width: 0;
}

em {
    font-style: normal;
}

.app-root,
.spreadex-app {
    width: 100%;
    height: 100dvh;
}

.spreadex-app {
    display: grid;
    grid-template-rows: 56px minmax(0, 1fr);
    background: var(--bg);
}

.app-header {
    z-index: 20;
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    border-bottom: 1px solid var(--line);
    background: var(--chrome);
}

.brand {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-right: 1px solid var(--line);
}
.brand,
.brand * {
    user-select: none;
    -webkit-user-select: none;
}

.brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    color: var(--text);
    font-size: 18px;
    font-weight: 760;
    line-height: 1;
}

.brand-wordmark em {
    color: var(--brand-mint);
}

.brand-signal {
    width: 25px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-orange), var(--brand-magenta), var(--brand-periwinkle));
    box-shadow: none;
}

.header-context {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 0 18px;
}

.header-context strong {
    font-size: 14px;
    font-weight: 690;
}

.header-context span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.connection-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 64px;
    height: 30px;
    margin-right: 0;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--muted);
    background: transparent;
    font: 700 10px/1 var(--font-data);
}

.header-tools { display: flex; align-items: center; gap: 7px; padding-right: 14px; }
.header-command { position: relative; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius); color: var(--muted); background: transparent; font: 700 10px/1 var(--font-data); }
.header-command:hover,
.header-command.is-active { border-color: var(--line); color: var(--text); background: var(--panel); }
.header-command b { min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 8px; color: #09100d; background: var(--green); font-size: 8px; }

.connection-state > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.connection-state.is-live { color: var(--green); }
.connection-state.is-sync { color: var(--amber); }
.connection-state.is-error { color: var(--red); }

.app-body {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
}

.primary-nav {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 10px;
    border-right: 1px solid var(--line);
    background: var(--chrome);
}

.nav-item {
    width: 100%;
    height: 42px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--muted);
    background: transparent;
    text-align: left;
    font-size: 12px;
    font-weight: 560;
}

.nav-item:hover {
    color: var(--text);
    border-color: var(--line);
    background: var(--panel);
}

.nav-item.is-active {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--blue-soft);
    box-shadow: inset 3px 0 0 var(--brand-periwinkle);
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: currentColor;
    font: 700 17px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.workspace {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: var(--bg);
}

.app-message {
    position: fixed;
    z-index: 100;
    right: 14px;
    bottom: 14px;
    max-width: min(440px, calc(100vw - 28px));
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px 9px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--toast);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.42);
    font-size: 13px;
    pointer-events: none;
}

.app-message.is-error {
    border-color: rgba(255, 93, 104, 0.6);
}

.app-message span {
    flex: 1;
}

.app-message button,
.icon-button,
.back-button,
.favorite-button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    color: var(--muted);
    background: transparent;
}

.app-message button { pointer-events: auto; }

.app-message button:hover,
.icon-button:hover,
.back-button:hover,
.favorite-button:hover {
    color: var(--text);
    background: var(--panel-2);
}

.activity-drawer { position: fixed; z-index: 90; top: 56px; right: 0; bottom: 0; width: min(390px, calc(100vw - 24px)); overflow: auto; border-left: 1px solid var(--line-strong); background: var(--inspector); box-shadow: -20px 0 56px rgba(0,0,0,.44); }
.activity-scrim { position: fixed; z-index: 80; inset: 56px 0 0; border: 0; background: rgba(0,0,0,.52); }
.activity-drawer > header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 13px; border-bottom: 1px solid var(--line); }
.activity-drawer > header > div { display: grid; gap: 4px; }
.activity-drawer > header span { color: var(--muted); font-size: 8px; font-weight: 700; }
.activity-drawer > header strong { font-size: 14px; }
.activity-health { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.activity-health > div { min-height: 48px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 8px; padding: 8px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.activity-health span { color: var(--muted); font-size: 9px; }
.activity-health strong { grid-row: 2; font-size: 10px; }
.activity-health i { grid-column: 2; grid-row: 1 / 3; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.activity-health .is-healthy i { background: var(--green); }
.activity-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.activity-actions button,
.quiet-command { min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--panel); font-size: 10px; }
.activity-actions button:hover,
.quiet-command:hover { color: var(--text); border-color: var(--line-strong); }
.activity-settings { border-bottom: 1px solid var(--line); }
.activity-settings summary { min-height: 36px; display: flex; align-items: center; padding: 0 11px; color: var(--muted); cursor: pointer; font-size: 10px; }
.activity-settings label { min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-top: 1px solid rgba(36,40,50,.6); font-size: 10px; }
.activity-settings input { accent-color: var(--green); }
.theme-setting { min-height: 44px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; padding: 5px 11px; border-top: 1px solid var(--line); font-size: 10px; }
.theme-setting > div { display: flex; justify-content: flex-end; gap: 3px; }
.theme-setting button { min-height: 27px; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--panel); font-size: 9px; }
.theme-setting button.is-active { color: var(--text); border-color: var(--line-strong); background: var(--panel-2); }
.activity-events > header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid var(--line); }
.activity-events > header strong { font-size: 11px; }
.activity-events > header button { border: 0; color: var(--muted); background: transparent; font-size: 9px; }
.activity-events article { min-height: 54px; display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: start; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.activity-events article > i { width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: var(--blue); }
.activity-events article > i.is-success { background: var(--green); }
.activity-events article > i.is-error { background: var(--red); }
.activity-events article > div { display: grid; gap: 4px; }
.activity-events article strong { font-size: 10px; line-height: 1.35; }
.activity-events article span,
.activity-events article time { color: var(--muted); font-size: 9px; line-height: 1.4; }

/* Market */
.market-module,
.exchanges-module,
.portfolio-module,
.orders-module,
.analytics-module {
    min-height: 100%;
    padding: 14px;
}

/* Analytics */
.analytics-module { min-height: 100%; padding: 14px; }
.analytics-heading { align-items: center; }
.analytics-summary { max-width: 1180px; display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto 10px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.analytics-summary > div { min-height: 58px; display: grid; align-content: center; gap: 6px; padding: 10px 12px; border-right: 1px solid var(--line); background: var(--panel); }
.analytics-summary > div:last-child { border-right: 0; }
.analytics-summary span { color: var(--muted); font-size: 9px; }
.analytics-summary strong { font: 650 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.analytics-trend { max-width: 1180px; margin: 0 auto 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.analytics-trend > header,
.analytics-table > header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid var(--line); }
.analytics-trend > header strong,
.analytics-table > header strong { font-size: 11px; }
.analytics-trend > header span,
.analytics-table > header span { color: var(--muted); font-size: 9px; }
.analytics-trend > div { height: 92px; display: flex; align-items: end; gap: 2px; padding: 10px 11px; }
.analytics-trend i { flex: 1; min-width: 2px; height: var(--bar); max-height: 100%; background: var(--blue); opacity: .65; }
.analytics-trend i:hover { opacity: 1; }
.analytics-grid { max-width: 1180px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 auto; }
.analytics-table { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.analytics-table-head,
.analytics-table-row { min-height: 34px; display: grid; grid-template-columns: minmax(0,1fr) 76px 88px; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.analytics-table-head { min-height: 27px; color: var(--muted); background: var(--panel-2); font-size: 8px; }
.analytics-table-head span:not(:first-child) { text-align: right; }
.analytics-table-row > span { display: grid; gap: 3px; }
.analytics-table-row strong { font-size: 10px; }
.analytics-table-row em,
.analytics-table-row small { color: var(--muted); font-size: 8px; }
.analytics-table-row b { color: var(--green); text-align: right; font: 650 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.analytics-table-row small { text-align: right; }
.analytics-rank-row { min-height: 38px; display: grid; grid-template-columns: minmax(0,1fr) auto 70px; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.analytics-rank-row strong { font-size: 10px; }
.analytics-rank-row span { color: var(--muted); font-size: 8px; }
.analytics-rank-row b { color: var(--green); text-align: right; font: 650 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }

.market-module { height: 100%; display: grid; grid-template-rows: 50px minmax(0, 1fr); padding: 0; overflow: hidden; }
.market-toolbar { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.market-toolbar label { display: grid; grid-template-columns: auto minmax(100px, 1fr); align-items: center; gap: 7px; }
.market-toolbar select { height: 32px; padding: 0 26px 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: 12px; }
.market-price { margin-left: auto; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 8px; text-align: right; }
.market-price span,
.market-price em { color: var(--muted); font-size: 9px; }
.market-price strong { font: 650 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.market-price em { grid-column: 1 / -1; }
.market-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(420px, 1fr) 350px; }
.market-data { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(380px,1fr) 220px; }
.market-book { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.market-book > header { position: sticky; z-index: 2; top: 0; height: 40px; display: grid; grid-template-columns: minmax(110px,1fr) 1fr 1fr 1fr; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 10px; text-align: right; }
.market-book > header > div { display: flex; align-items: baseline; gap: 8px; text-align: left; }
.market-book > header strong { color: var(--text); font-size: 12px; }
.market-book.is-stale .market-levels,
.market-book.is-stale .market-mid,
.market-book.is-error .market-levels,
.market-book.is-error .market-mid { opacity: .42; }
.market-flow { min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--line); background: #0b0d11; }
.market-flow > header { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border-bottom: 1px solid var(--line); }
.market-flow > header div { display: grid; gap: 2px; }
.market-flow > header strong { font-size: 11px; }
.market-flow > header span,
.market-flow > header em { color: var(--muted); font-size: 8px; }
.market-flow > header em.is-connected { color: var(--green); }
.trade-clusters { padding: 5px 7px; border-bottom: 1px solid var(--line); }
.trade-clusters > div { height: 22px; display: grid; grid-template-columns: 64px minmax(30px,1fr) 45px; align-items: center; gap: 5px; font: 600 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.trade-clusters span { color: var(--text); }
.trade-clusters em { color: var(--muted); text-align: right; }
.trade-clusters i { position: relative; height: 4px; overflow: hidden; background: var(--green); opacity: .68; }
.trade-clusters i::after { content: ''; position: absolute; inset: 0 0 0 auto; width: var(--sell); background: var(--red); }
.trade-tape { max-height: calc(100vh - 255px); overflow: hidden; padding: 4px 7px; }
.trade-tape > div { height: 23px; display: grid; grid-template-columns: 49px minmax(70px,1fr) 45px; align-items: center; gap: 5px; font: 600 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.trade-tape time { color: var(--muted); }
.trade-tape strong { color: var(--green); text-align: right; }
.trade-tape .is-sell strong { color: var(--red); }
.trade-tape span { color: var(--muted); text-align: right; }
.trade-tape p { margin: 16px 4px; color: var(--muted); font-size: 9px; }
.market-level { position: relative; width: 100%; min-height: 27px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 10px; padding: 0 14px 0 min(34%, 210px); border: 0; color: var(--muted); background: transparent; text-align: right; font: 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: hidden; }
.market-level::before { content: ""; position: absolute; inset: 0 0 0 auto; width: var(--depth); opacity: 0.11; }
.market-level.is-ask::before { background: var(--red); }
.market-level.is-bid::before { background: var(--green); }
.market-level.is-ask > span:first-child { color: var(--red); }
.market-level.is-bid > span:first-child { color: var(--green); }
.market-level:hover { background: rgba(255,255,255,0.025); }
.market-mid { min-height: 44px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 0 14px; border-block: 1px solid var(--line); background: var(--panel); }
.market-mid span { color: var(--muted); font-size: 9px; }
.market-mid strong { color: var(--muted); font: 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.market-mid em { font: 700 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.order-ticket { min-width: 0; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 12px; border-left: 1px solid var(--line); background: var(--inspector); }
.order-ticket > header { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; }
.order-ticket > header span { color: var(--muted); font-size: 10px; }
.order-ticket > header strong { text-align: right; font-size: 11px; }
.order-ticket > header em { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.order-ticket > header em.is-live { color: var(--green); }
.order-ticket > header em.is-missing,
.order-ticket > header em.is-waiting { color: var(--amber); }
.side-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.side-switch button { height: 36px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--panel); font-weight: 700; }
.side-switch .is-buy.is-active { color: var(--green); border-color: rgba(36,201,133,.45); background: var(--green-soft); }
.side-switch .is-sell.is-active { color: var(--red); border-color: rgba(255,93,104,.45); background: var(--red-soft); }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; }
.ticket-amount { display: grid; gap: 5px; }
.ticket-amount label { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 8px; }
.ticket-amount input { width: 100%; text-align: right; }
.ticket-amount > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.limit-price { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; padding-left: 8px; }
.limit-price input { width: 100%; text-align: right; }
.limit-price button { align-self: stretch; border: 0; border-left: 1px solid var(--line); color: var(--blue); background: transparent; font-size: 10px; }
.trade-settings { border: 1px solid var(--line); border-radius: var(--radius); }
.trade-settings > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 8px 8px; }
.trade-settings label { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; padding-left: 6px; }
.trade-settings input,
.trade-settings select { width: 100%; text-align: right; }
.risk-summary { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.risk-summary > div { display: grid; gap: 4px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.risk-summary strong { font: 650 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ticket-protection { min-width: 0; min-height: 38px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: transparent; text-align: left; }
.ticket-protection:hover { border-color: var(--line-strong); background: var(--panel-2); }
.ticket-protection span { color: var(--muted); font-size: 9px; }
.ticket-protection strong { overflow: hidden; text-align: right; white-space: nowrap; text-overflow: ellipsis; font: 650 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ticket-protection em { color: var(--muted); font-size: 16px; }
.ticket-position { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(10,132,255,.38); border-radius: var(--radius); overflow: hidden; background: var(--blue-soft); }
.ticket-position > div { display: grid; gap: 4px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticket-position span { color: var(--muted); font-size: 9px; }
.ticket-position strong { font: 650 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ticket-position strong.is-buy { color: var(--green); }
.ticket-position strong.is-sell { color: var(--red); }
.ticket-warning { margin: 0; color: var(--amber); font-size: 10px; line-height: 1.4; }
.ticket-primary.is-buy { background: #147a53; }
.ticket-primary.is-sell { background: #a93c45; }
.ticket-primary.is-close { background: #a93c45; }

/* Exchanges */
.section-heading { max-width: 1180px; min-height: 54px; display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 0 auto 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.section-heading > div { display: grid; gap: 5px; }
.section-heading span { color: var(--muted); font-size: 9px; font-weight: 700; }
.section-heading strong { font-size: 20px; }
.section-heading em { color: var(--muted); font-size: 10px; }
.exchanges-layout { max-width: 1180px; min-height: 520px; display: grid; grid-template-columns: minmax(360px, 1fr) 390px; gap: 12px; margin: 0 auto; }
.exchange-list { display: grid; align-content: start; gap: 4px; }
.exchange-row { min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--radius); color: inherit; background: transparent; text-align: left; }
.exchange-row:hover,
.exchange-row.is-selected { border-color: var(--line); background: var(--panel); }
.exchange-row.is-selected { box-shadow: inset 2px 0 0 var(--blue); }
.exchange-monogram { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel-2); font: 750 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.exchange-row > span:nth-child(2) { display: grid; gap: 4px; }
.exchange-row strong { font-size: 12px; }
.exchange-row em { color: var(--muted); font-size: 9px; }
.exchange-state { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.exchange-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.exchange-state.is-ready { color: var(--green); }
.exchange-state.is-error { color: var(--red); }
.exchange-state.is-waiting { color: var(--amber); }
.connection-panel { min-height: 320px; align-self: start; display: grid; align-content: start; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.connection-panel > header { display: grid; gap: 5px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.connection-panel > header span { color: var(--muted); font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.connection-panel > header strong { font-size: 17px; }
.connection-panel > header em { color: var(--muted); font-size: 10px; line-height: 1.5; }
.credential-form { display: grid; gap: 8px; }
.credential-form label { display: grid; gap: 5px; }
.credential-form input { width: 100%; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius); outline: 0; background: var(--bg); }
.credential-form .connection-primary { margin-top: 4px; }
.connection-note { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.connection-facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); }
.connection-facts > div { display: grid; gap: 5px; padding: 10px; }
.connection-facts > div + div { border-left: 1px solid var(--line); }
.connection-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.connection-facts > div:nth-child(3) { border-left: 0; }
.danger-link { min-height: 32px; border: 0; color: var(--red); background: transparent; font-size: 11px; }
.disconnect-confirm { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 5px; padding: 7px 8px; border: 1px solid rgba(255,93,104,.4); border-radius: var(--radius); background: var(--red-soft); }
.disconnect-confirm span { font-size: 10px; }
.disconnect-confirm button { min-height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--panel); font-size: 10px; }
.disconnect-confirm button:first-of-type { color: var(--red); }

/* Portfolio and orders */
.portfolio-summary { max-width: 1180px; display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto 10px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.portfolio-summary > div { display: grid; gap: 5px; padding: 11px; border-right: 1px solid var(--line); background: var(--panel); }
.portfolio-summary strong { font: 650 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.portfolio-performance { max-width: 1180px; display: grid; grid-template-columns: repeat(3,1fr); margin: -1px auto 10px; border: 1px solid var(--line); border-top: 0; background: var(--panel); }
.portfolio-performance > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 9px 11px; border-right: 1px solid var(--line); }
.portfolio-performance > div:last-child { border-right: 0; }
.portfolio-performance span,
.portfolio-performance em { color: var(--muted); font-size: 8px; }
.portfolio-performance strong { text-align: right; font: 650 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.portfolio-performance em { grid-column: 1 / -1; }
.balance-strip { max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); margin: 0 auto 10px; border-block: 1px solid var(--line); }
.balance-strip > div { display: grid; gap: 4px; padding: 10px; border-right: 1px solid var(--line); }
.balance-strip span { color: var(--muted); font-size: 9px; }
.balance-strip strong { font: 650 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.balance-strip em { color: var(--muted); font-size: 9px; }
.inline-empty { max-width: 1180px; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 auto 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 10px; }
.portfolio-content,
.orders-layout { max-width: 1180px; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 10px; margin: 0 auto; }
.position-list,
.active-orders,
.execution-history,
.risk-settings { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.position-list > header,
.active-orders > header,
.execution-history > header { min-height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid var(--line); }
.position-list > header strong,
.active-orders > header strong,
.execution-history > header strong { font-size: 12px; }
.position-row { min-height: 63px; display: grid; grid-template-columns: minmax(130px,1.4fr) repeat(3,minmax(80px,1fr)) auto; align-items: center; gap: 9px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.position-row > div { display: grid; gap: 4px; }
.position-row > div:first-child { grid-template-columns: auto auto; justify-content: start; align-items: center; }
.position-row > div:first-child em { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.position-row > div:first-child span,
.order-item > div:first-child span { padding: 2px 4px; border-radius: 3px; font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.position-row .is-buy,
.order-item .is-buy { color: var(--green); background: var(--green-soft); }
.position-row .is-sell,
.order-item .is-sell { color: var(--red); background: var(--red-soft); }
.position-row .is-hedge { color: var(--blue); background: var(--blue-soft); }
.position-row strong { font: 650 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.position-actions { display: flex !important; gap: 5px !important; }
.position-actions button { min-height: 30px; padding: 0 8px; }
.position-protection { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3, minmax(100px, 1fr)) auto auto auto !important; align-items: end; gap: 7px !important; padding-top: 7px; border-top: 1px solid var(--line); }
.position-protection label { display: grid; grid-template-columns: 1fr auto; gap: 3px 5px; align-items: center; }
.position-protection label span { grid-column: 1 / -1; }
.position-protection input[type="number"] { width: 100%; min-height: 30px; }
.position-protection .toggle-field { display: flex; align-items: center; min-height: 30px; }
.position-view-state { justify-self: end; padding: 4px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.is-positive { color: var(--green); }
.is-negative { color: var(--red); }
.section-empty.is-compact { min-height: 180px; }
.risk-settings summary strong { color: var(--text); font-size: 10px; }
.risk-settings > p { margin: 0; padding: 0 11px 12px; color: var(--muted); font-size: 10px; }
.risk-form { display: grid; gap: 7px; padding: 0 10px 10px; }
.risk-form label { display: grid; grid-template-columns: minmax(0,1fr) 90px auto; gap: 6px; padding-left: 8px; }
.risk-form input { width: 100%; text-align: right; }
.risk-form .toggle-field { border: 0; display: flex; justify-content: flex-start; background: transparent; }
.risk-form .toggle-field input { width: auto; }
.orders-layout { grid-template-columns: minmax(320px,.9fr) minmax(420px,1.1fr); }
.order-item { min-height: 61px; display: grid; grid-template-columns: minmax(130px,1fr) minmax(110px,.7fr) auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.order-item > div { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 4px 7px; }
.order-item > div em { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.order-item > div:nth-child(2) { justify-items: start; }
.order-item strong { font: 650 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.order-state { color: var(--amber); font-size: 9px; }
.order-state.is-filled { color: var(--green); }
.order-state.is-partially_filled,
.order-state.is-partially_filled_cancelled,
.order-state.is-awaiting_hedge { color: var(--amber); }
.order-state.is-reconciliation_required,
.order-state.is-failed { color: var(--red); }
.active-orders > header .order-cancel-all { min-height: 26px; margin-left: auto; padding: 0 8px; border: 1px solid rgba(255, 69, 58, .42); border-radius: var(--radius); color: var(--red); background: transparent; font-size: 10px; }
.active-orders > header > span { margin-left: 7px; margin-right: 7px; }
.order-item > .order-cancel { width: 28px; min-width: 28px; padding: 0; color: var(--red); font-size: 17px; line-height: 1; }
.order-actions { display: flex !important; gap: 5px !important; }
.order-actions > button { min-height: 28px; padding: 0 8px; }
.order-actions > .order-cancel { width: 28px; min-width: 28px; padding: 0; color: var(--red); font-size: 17px; line-height: 1; }
.order-amend { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(160px, 1fr) auto auto !important; gap: 6px !important; padding-top: 6px; border-top: 1px solid var(--line); }
.order-amend label { display: flex; align-items: center; gap: 8px; }
.order-amend input { width: 100%; min-height: 30px; }
.execution-item { min-height: 55px; display: grid; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.execution-item > span { color: var(--muted); font-size: 9px; }
.execution-item.is-filled > span { color: var(--green); }
.execution-item.is-rejected > span { color: var(--red); }
.execution-item > div { display: grid; gap: 4px; }
.execution-item strong { font-size: 10px; }
.execution-item em,
.execution-item time { color: var(--muted); font-size: 9px; }
.empty-line { min-height: 80px; display: grid; place-items: center; color: var(--muted); font-size: 10px; }
.order-events { border-top: 1px solid var(--line); }
.order-events > header { min-height: 32px; display: flex; align-items: center; padding: 0 10px; color: var(--muted); font-size: 9px; }
.history-filters { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 5px; border-bottom: 1px solid var(--line); }
.history-filters button { min-height: 27px; border: 1px solid transparent; border-radius: 4px; color: var(--muted); background: transparent; font-size: 9px; }
.history-filters button:hover,
.history-filters button.is-active { border-color: var(--line); color: var(--text); background: var(--panel-2); }
.trade-history-row { min-height: 58px; display: grid; grid-template-columns: minmax(120px,1fr) minmax(120px,1fr) 78px auto; align-items: center; gap: 9px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.trade-history-row > div { display: grid; gap: 4px; }
.trade-history-row span,
.trade-history-row time { color: var(--muted); font-size: 8px; }
.trade-history-row strong { font: 650 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.trade-history-row time { text-align: right; }

@media (max-width: 1100px) {
    .market-layout { grid-template-columns: minmax(380px,1fr) 330px; }
}

@media (max-width: 760px) {
    .spreadex-app { grid-template-rows: 48px minmax(0, 1fr); }
    .app-header { grid-template-columns: auto minmax(0,1fr) auto; }
    .brand { padding: 0 12px; border-right: 0; }
    .brand-wordmark { font-size: 15px; }
    .brand-signal { display: none; }
    .header-context { padding: 0 4px; }
    .header-context strong { font-size: 11px; }
    .header-context span { display: none; }
    .header-tools { gap: 2px; padding-right: 6px; }
    .header-command { width: 25px; height: 26px; }
    .connection-state { min-width: 54px; height: 26px; padding: 0 7px; }
    .activity-drawer { top: 48px; bottom: 57px; width: min(390px,100vw); }
    .activity-scrim { inset: 48px 0 57px; }
    .app-body { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) 57px; }
    .primary-nav { z-index: 30; grid-row: 2; display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; padding: 3px max(3px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(3px, env(safe-area-inset-left)); border-top: 1px solid var(--line-strong); border-right: 0; }
    .nav-item { height: 49px; grid-template-columns: 1fr; grid-template-rows: 24px auto; justify-items: center; gap: 0; padding: 2px; text-align: center; font-size: 9px; }
    .nav-item.is-active { color: var(--text); border-color: transparent; border-top-color: var(--brand-periwinkle); background: var(--blue-soft); box-shadow: none; }
    .nav-icon { width: 22px; height: 22px; font-size: 15px; }
    .workspace { grid-row: 1; }
    .app-message { right: 8px; bottom: 65px; max-width: calc(100vw - 16px); }

    .market-module { grid-template-rows: auto minmax(0,1fr); overflow: auto; }
    .market-toolbar { flex-wrap: wrap; }
    .market-toolbar label { flex: 1; grid-template-columns: 1fr; gap: 3px; }
    .market-toolbar select { min-width: 0; width: 100%; }
    .market-price { flex: 1 0 100%; grid-template-columns: 1fr auto auto; text-align: left; }
    .market-price em { grid-column: auto; text-align: right; }
    .market-layout { display: block; }
    .market-data { display: block; }
    .market-book { min-height: 430px; max-height: 58vh; }
    .market-book > header { grid-template-columns: minmax(90px,1fr) repeat(3,1fr); padding: 0 7px; gap: 5px; }
    .market-level { padding: 0 7px 0 25%; gap: 5px; }
    .order-ticket { border-top: 1px solid var(--line); border-left: 0; overflow: visible; }
    .market-flow { max-height: 250px; border-top: 1px solid var(--line); border-left: 0; }
    .trade-clusters { display: none; }
    .trade-tape { max-height: 205px; overflow: hidden; }

    .market-module,
    .exchanges-module,
    .portfolio-module,
    .orders-module,
    .analytics-module { padding: 8px; }
    .market-module { padding: 0; }
    .section-heading { min-height: 48px; margin-bottom: 8px; }
    .section-heading strong { font-size: 16px; }
    .section-heading em { display: none; }
    .exchanges-layout,
    .portfolio-content,
    .orders-layout { min-height: 0; grid-template-columns: 1fr; }
    .connection-panel { min-height: 0; }
    .portfolio-summary { grid-template-columns: 1fr 1fr; }
    .portfolio-performance { grid-template-columns: 1fr; }
    .portfolio-performance > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .analytics-summary { grid-template-columns: 1fr 1fr; }
    .analytics-summary > div:nth-child(2) { border-right: 0; }
    .analytics-summary > div { border-bottom: 1px solid var(--line); }
    .analytics-grid { grid-template-columns: 1fr; }
    .portfolio-summary > div:nth-child(2) { border-right: 0; }
    .portfolio-summary > div { border-bottom: 1px solid var(--line); }
    .balance-strip { grid-template-columns: 1fr 1fr; overflow-x: auto; }
    .position-row { grid-template-columns: 1fr 1fr auto; }
    .position-row > div:nth-child(3),
    .position-row > div:nth-child(4) { display: none; }
    .position-protection { grid-template-columns: 1fr 1fr !important; }
    .order-item { grid-template-columns: 1fr auto auto; }
    .order-item > div:nth-child(2) { display: none; }
    .trade-history-row { grid-template-columns: minmax(0,1fr) 74px auto; }
    .trade-history-row > div:nth-child(2) { display: none; }
}

@media (max-width: 380px) {
    .nav-item { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}