:root {
    color-scheme: light;
    --background: #f4f6f8;
    --panel: #ffffff;
    --border: #d8dee6;
    --text: #17212b;
    --muted: #667384;
    --accent: #19734a;
    --accent-hover: #125c3a;
    --focus: #2563eb;
    --danger: #c43d4b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }

button {
    border: 1px solid transparent;
    border-radius: .45rem;
    padding: .7rem 1rem;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

button:hover:not(:disabled) { background: var(--accent-hover); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(37, 99, 235, .28); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .48; }

.login-page { display: grid; place-items: center; padding: 1rem; }

.login-panel {
    width: min(100%, 23rem);
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--panel);
    box-shadow: 0 8px 24px rgba(23, 33, 43, .08);
}

.login-panel h1 { margin: .15rem 0 1.5rem; }
.eyebrow { margin: 0; color: var(--accent); font-size: .8rem; text-transform: uppercase; }
form { display: grid; gap: .6rem; }
label { margin-top: .35rem; font-size: .9rem; }

input, select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: .45rem;
    padding: .7rem .8rem;
    background: #fff;
    color: var(--text);
}

.warning { margin-bottom: .7rem !important; color: #8a5a00 !important; font-weight: 700; }
.form-message { min-height: 1.3rem; margin: .25rem 0; color: #b4232f; font-size: .9rem; }
.orders-message { margin-top: .65rem !important; }
.order-select { width: auto; accent-color: var(--accent); }
.order-select:disabled { cursor: not-allowed; opacity: .6; }
.cancel-order-button { padding: .35rem .6rem; font-size: .82rem; }
.open-orders-controls { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .65rem 1rem; margin-bottom: .65rem; }
.cancel-all-controls { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: .65rem; }
.open-orders-controls .cancel-all-controls { margin-bottom: 0; }
.cancel-all-controls div { display: flex; align-items: center; gap: .4rem; }
.cancel-all-button { padding: .4rem .65rem; font-size: .82rem; }
.strategy-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.strategy-form { display: grid; grid-template-columns: repeat(5, minmax(8rem, 1fr)); gap: .65rem; margin-bottom: .8rem; }
.strategy-form label { margin: 0; }
.strategy-form button { align-self: end; }
.market-context { display: flex; align-items: end; gap: 1rem; }
.market-context h2 { align-self: center; margin-right: auto; }
.market-context label { min-width: 12rem; margin: 0; }
.strategy-action { padding: .35rem .55rem; margin-right: .3rem; font-size: .8rem; }
.operation-form { grid-template-columns: repeat(4, minmax(10rem, 1fr)); margin-bottom: .8rem; }
.operation-form label { margin: 0; }
.operation-form button { align-self: end; }
.check { display: flex; align-items: center; gap: .5rem; }
.check input { width: auto; }
output { display: block; min-height: 2.7rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: .45rem; background: #f8fafc; }
.quote-box { margin: .5rem 0; color: var(--muted); }
.withdrawal-unknown { padding: .8rem; border: 2px solid #b7791f; color: #7a4d00 !important; background: #fff8e6; font-weight: 800; white-space: pre-line; }
.status-unknown, .status-manual { color: #8a5a00; font-weight: 800; }
.status-success { color: var(--accent); }

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem max(1rem, calc((100vw - 96rem) / 2));
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 1px 4px rgba(23, 33, 43, .05);
}

.brand { color: var(--text); font-size: 1.15rem; font-weight: 750; text-decoration: none; }
.account { display: flex; align-items: center; gap: .8rem; }
.username { color: var(--muted); }
.danger { padding: .5rem .8rem; background: var(--danger); color: white; }
.last-update, .loading, .empty { color: var(--muted); }
.status-grid, .books-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.exchange-card { padding: .8rem; border: 1px solid var(--border); border-radius: .45rem; }
.exchange-card strong { display: block; margin-bottom: .35rem; }
.error { color: #b4232f; }
.online { color: var(--accent); }
.table-scroll { max-width: 100%; overflow-x: auto; }
.history-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.history-heading h2 { margin: 0; }
.history-tabs, .history-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0; }
.history-tabs button, .history-filters button { padding: .4rem .65rem; background: #f8fafc; color: #334155; }
.history-tabs button.active, .history-filters button.active { border-color: var(--accent); background: #eaf7f0; color: #176b45; }
.history-action { margin-right: .3rem; padding: .3rem .45rem; font-size: .78rem; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; white-space: nowrap; }
th, td { padding: .48rem .55rem; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-size: .82rem; background: #f8fafc; }
tbody tr:hover { background: #f8fafc; }
.book-columns { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.book-columns h3 { margin: .35rem 0; font-size: .9rem; }
.book-price { padding: .15rem .25rem; border-radius: .25rem; background: transparent; font-weight: 750; font-variant-numeric: tabular-nums; }
.book-price:hover { text-decoration: underline; }
.order-book-table.bid .book-price { color: #176b45; }
.order-book-table.ask .book-price { color: #a8323e; }
.order-book-table.bid .book-price:hover { background: #eaf7f0; }
.order-book-table.ask .book-price:hover { background: #fff0f1; }
.sell-form-compact { gap: .5rem; }
.sell-row { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.sell-row-context { min-height: 2rem; }
.sell-row-context h2 { margin: 0; }
.sell-exchange { color: var(--muted); font-size: .88rem; font-weight: 700; text-transform: uppercase; }
.sell-available { margin-left: auto !important; padding: .45rem .65rem; border-radius: .45rem; background: #f3f6f9; color: var(--text) !important; font-variant-numeric: tabular-nums; }
.sell-row label { flex: 0 0 6.5rem; margin: 0; }
.sell-row input { width: min(18rem, 100%); }
.sell-row-action { justify-content: space-between; }
.selected-book-level { padding: .45rem .65rem; border-left: 3px solid var(--accent); background: #f3f8f5; color: var(--muted); font-size: .88rem; }
.quantity-actions { display: grid; grid-template-columns: repeat(4, minmax(3.2rem, auto)); gap: .35rem; }
.quantity-percent { min-width: 0; padding: .48rem .35rem; border-color: var(--border); background: #f8fafc; color: #334155; font-size: .84rem; }
.quantity-percent:hover:not(:disabled) { border-color: #aab5c2; background: #eef2f6; }

.dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: min(96rem, 100%);
    margin: 0 auto;
    padding: 1rem;
}

.panel { min-height: 9rem; padding: 1.15rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--panel); box-shadow: 0 2px 8px rgba(23, 33, 43, .045); }
.panel-wide { grid-column: 1 / -1; min-height: auto; }
.panel h2 { margin: 0 0 .7rem; font-size: 1rem; }
.panel p { margin: 0; color: var(--muted); }

@media (max-width: 40rem) {
    .dashboard { grid-template-columns: 1fr; }
    .panel-wide { grid-column: auto; }
    .login-panel { padding: 1.4rem; }
    .app-header, .account { align-items: flex-start; flex-wrap: wrap; }
    .status-grid, .books-grid { grid-template-columns: 1fr; }
    .strategy-form { grid-template-columns: 1fr; }
    .operation-form { grid-template-columns: 1fr; }
    .market-context { align-items: stretch; flex-direction: column; }
    .book-columns { grid-template-columns: 1fr; }
    .sell-row { align-items: stretch; flex-direction: column; gap: .35rem; }
    .sell-row-context { align-items: flex-start; }
    .sell-available { margin-left: 0 !important; }
    .sell-row label { flex-basis: auto; }
    .sell-row input { width: 100%; max-width: none; }
    .sell-row-action button { width: 100%; }
    .quantity-actions { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Task 26: compact workstation; Task 26.1: readable terminal typography */
.app-header { min-height: 42px; padding: 4px 10px; box-shadow: none; font-size: 14px; }
.app-header .brand { font-size: 15px; }
.app-header nav { display: flex; align-self: stretch; }
.app-header nav a { display: grid; place-items: center; padding: 0 12px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.app-header nav a.active { border-color: var(--focus); color: var(--text); font-weight: 700; }
.app-header button { padding: 4px 8px; border-radius: 2px; font-size: 13px; }
.market-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-height: 40px; padding: 3px 10px; border-bottom: 1px solid var(--border); background: white; font-size: 14px; font-variant-numeric: tabular-nums; }
.market-bar label { display: flex; align-items: center; gap: 5px; margin: 0; }
.market-bar select { width: auto; min-width: 105px; padding: 3px 6px; border-radius: 2px; font-size: 14px; }
.market-status { margin-left: auto; font-weight: 700; }.market-status.partial { color: #8a5a00; }
.panels-control { position: relative; }.panels-control > button { padding: 4px 8px; border-radius: 2px; font-size: 13px; }
.panels-menu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; min-width: 170px; padding: 7px; border: 1px solid var(--border); background: white; box-shadow: 0 3px 10px rgba(23,33,43,.12); }
.panels-menu label { display: block; margin: 0; padding: 3px; white-space: nowrap; font-size: 13px; }.panels-menu input { width: auto; margin-right: 5px; }.panels-menu button { width: 100%; margin-top: 5px; padding: 4px; }
.trading-workspace { display: grid; grid-template-columns: minmax(300px, 22%) 1fr; gap: 3px; width: 100%; padding: 3px 8px 8px; }
.tools-column, .main-column { display: grid; align-content: start; gap: 3px; min-width: 0; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(250px, 1fr); gap: 3px; }
.lower-grid.single-panel { grid-template-columns: minmax(0, 1fr); }
.terminal-panel { min-width: 0; padding: 7px 8px; border: 1px solid var(--border); border-radius: 2px; background: white; font-size: 13px; }
.terminal-panel h2, .page-shell h2 { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .045em; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; }.panel-heading h2 { margin-bottom: 0; }
.panel-heading[data-collapse-panel] { position: relative; min-height: 22px; cursor: pointer; user-select: none; }
.panel-heading[data-collapse-panel] > :not(.panel-collapse) { position: relative; z-index: 1; }
.panel-collapse { position: absolute; z-index: 0; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.panel-collapse:hover:not(:disabled) { background: transparent; color: inherit; }
.panel-collapse:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.collapse-indicator { flex: 0 0 auto; color: var(--muted); font-size: 14px; }
.terminal-panel.is-collapsed { padding-block: 6px; }
.terminal-panel.is-collapsed > .panel-content { display: none; }
.panel-hide { flex: 0 0 auto; padding: 0 5px; border: 1px solid var(--border); border-radius: 2px; background: #f8fafc; color: var(--muted); font-size: 14px; line-height: 20px; }
.terminal-panel th, .terminal-panel td { padding: 4px 6px; text-align: right; font-size: 13px; line-height: 1.25; }
.terminal-panel th { font-size: 12px; }
.terminal-panel th:first-child, .terminal-panel td:first-child { text-align: left; }
.sell-form-compact { gap: 5px; font-size: 13px; }.sell-form-compact input { padding: 6px 7px; border-radius: 2px; font-size: 14px; }
.sell-row-context { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.selected-book-level, .quantity-percent { font-size: 13px; }
.sell-button { padding: 7px; background: var(--danger); font-size: 14px; }.sell-button:hover:not(:disabled) { background: #a8323e; }
.history-action, .terminal-panel .history-heading button, .terminal-panel .history-tabs button, .terminal-panel .history-filters button { font-size: 13px; }
.panel-controls { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.terminal-panel .header-compact { padding: 2px 6px; border-radius: 2px; line-height: 18px; }
.history-heading .history-collapse-control { position: static; width: auto; padding: 1px 6px; border: 1px solid var(--border); background: #f8fafc; line-height: 18px; }
.order-book-scroll, #my-trades .table-scroll { max-height: 310px; overflow: auto; }
#my-trades { min-height: 0; max-height: 100%; overflow: hidden; } #my-trades-content { max-height: 310px; overflow: auto; }
.chart-heading { justify-content: flex-start; }.chart-heading h2 { margin-right: auto; }.chart-container { width: 100%; height: 260px; margin-top: 6px; }.chart-message { min-height: 18px; margin: 2px 0 0; color: var(--muted); }
.refresh-interval-label { display: flex; align-items: center; gap: 4px; margin: 0; white-space: nowrap; color: var(--muted); font-size: 13px; }
.refresh-interval-label select { width: auto; padding: 3px 5px; font-size: 13px; }
.auto-refresh-status { color: var(--muted); font-size: 13px; }
.chart-intervals { display: flex; gap: 2px; }.chart-intervals button { padding: 2px 6px; border: 1px solid var(--border); border-radius: 2px; background: #f8fafc; color: var(--muted); font-size: 13px; }.chart-intervals button.active { border-color: var(--accent); background: #eaf7f0; color: var(--accent); }
.chart-ranges { display: flex; justify-content: center; gap: 2px; padding-top: 3px; border-top: 1px solid #edf0f3; }
.chart-ranges button { padding: 1px 7px; border: 0; border-radius: 2px; background: transparent; color: var(--muted); font-size: 12px; line-height: 18px; }
.chart-ranges button.active { background: #eaf7f0; color: var(--accent); font-weight: 700; }
.order-book-mirror { table-layout: fixed; }.order-book-mirror th:nth-child(n+4), .order-book-mirror td:nth-child(n+4) { text-align: left; }
.order-book-mirror th, .order-book-mirror td { padding-block: 3px; line-height: 1; }
.depth-cell { position: relative; background-repeat: no-repeat; }
.depth-bid { background-image: linear-gradient(to left, rgba(25,115,74,.11) var(--depth), transparent var(--depth)); }
.depth-ask { background-image: linear-gradient(to right, rgba(196,61,75,.11) var(--depth), transparent var(--depth)); }
.depth-cell .book-price { position: relative; z-index: 1; border: 0; color: inherit; }
.order-book-mirror .book-price { font-size: 14px; }
.depth-bid .book-price { color: #176b45; }.depth-ask .book-price { color: #a8323e; }
.page-shell { width: min(1200px, 100%); margin: auto; padding: 12px; font-size: 14px; }.page-shell h1 { margin: 0 0 10px; font-size: 18px; }
.page-shell .panel { margin-bottom: 6px; border-radius: 3px; box-shadow: none; }.page-title { display:flex; justify-content:space-between; align-items:center; }
.page-shell label, .page-shell input, .page-shell select, .page-shell output { font-size: 14px; }
.page-shell button { font-size: 13px; }
.page-shell th, .page-shell td { font-size: 13px; line-height: 1.3; }
.strategy-context { display:grid; grid-template-columns: repeat(2,minmax(160px,240px)); gap:8px; margin-bottom:8px; }
@media (max-width: 52rem) { .trading-workspace { grid-template-columns: 1fr; }.lower-grid { grid-template-columns: 1fr; }.market-status { margin-left: 0; }.app-header { flex-wrap: wrap; }.account { margin-left:auto; } }
@media (max-width: 32rem) { .last-update { display:none; }.app-header nav { order:3; width:100%; }.app-header nav a { flex:1; padding:6px; }.market-bar { gap:5px 10px; }.order-book-mirror { min-width:520px; } }