@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  --bg: #F7F8FA;
  --surface: #ffffff;
  --surface-soft: #f8fafb;
  --text: #111827;
  --muted: #64748B;
  --line: #E2E8F0;
  --line-strong: #c9d1da;
  --primary: #075985;
  --primary-dark: #104867;
  --primary-soft: #eaf4fa;
  --success: #147a4a;
  --success-soft: #eaf7f0;
  --danger: #b4232f;
  --danger-dark: #861b24;
  --danger-soft: #fff0f1;
  --warning-soft: #fff8e7;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.6; font-size: 14px; }
button, input, select { font: inherit; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; right: 10px; z-index: 100; padding: 9px 14px; border-radius: 8px; background: var(--text); color: #fff; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

button {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 650;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(24, 95, 141, .2); outline-offset: 2px; }
button.secondary { background: #fff; color: var(--primary); border-color: #8db1c8; }
button.secondary:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary-dark); }
button:disabled { opacity: .5; cursor: not-allowed; }
.small-button { min-height: 34px; padding: 5px 10px; font-size: .82rem; }
.ghost-danger { background: #fff; color: var(--danger); border-color: #e2a6ac; }
.ghost-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }

input, select { width: 100%; min-height: 44px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); }
input:hover, select:hover { border-color: #9aa8b7; }
input:focus, select:focus { border-color: var(--primary); }
input:read-only, input:disabled, select:disabled { background: #f1f4f6; color: #6d7781; }
label { display: block; margin: 13px 0 6px; font-size: .9rem; font-weight: 600; color: #374451; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 1.25rem; }
h2 { margin-bottom: 0; font-size: 1.18rem; }
h3 { font-size: 1rem; }

.page { width: min(100% - 32px, 1180px); margin: 18px auto 48px; }
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 4px 18px rgba(30, 48, 64, .045); }
.section { margin-top: 16px; padding: 20px; }
.login-wrap { min-height: calc(100vh - 36px); display: grid; place-items: center; }
.login-card { width: min(100%, 430px); padding: 26px; }
.login-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--primary-dark); font-weight: 800; }
.login-card h1 { margin-bottom: 4px; font-size: 1.45rem; }
.login-lead { margin-bottom: 22px; color: var(--muted); font-size: .88rem; }
.captcha-box { min-height: 96px; margin-top: 18px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--surface-soft); }
.captcha-box img { max-width: 100%; max-height: 82px; }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.97); box-shadow: 0 5px 18px rgba(30,48,64,.06); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { margin: 0; line-height: 1.2; }
.brand small { color: var(--muted); font-size: .74rem; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 800; direction: ltr; }
.topbar-meta { display: flex; align-items: center; gap: 12px; }
#market-time { direction: rtl; font-variant-numeric: tabular-nums; font-weight: 700; color: #334454; }
.status-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 10px 2px 0; }
.connection-status { margin: 0; padding: 5px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .78rem; border: 1px solid var(--line); }
.connection-status[data-status="connected"] { border-color: #9bcbb4; background: var(--success-soft); color: var(--success); }
.connection-status[data-status="connecting"], .connection-status[data-status="reconnecting"] { border-color: #e5cd8c; background: var(--warning-soft); color: #725318; }
.connection-status[data-status="disconnected"], .connection-status[data-status="unauthorized"] { border-color: #efbec3; background: var(--danger-soft); color: var(--danger); }
.quick-nav { display: flex; flex-wrap: wrap; gap: 5px; }
.quick-nav a { padding: 5px 10px; border-radius: 7px; color: #465565; text-decoration: none; font-size: .8rem; }
.quick-nav a:hover { background: var(--primary-soft); color: var(--primary-dark); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.eyebrow { display: block; margin-bottom: 2px; color: var(--primary); font-size: .72rem; font-weight: 750; }
.status-badge, .count-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.section-hint { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.message { min-height: 22px; margin: 9px 0; color: var(--danger); font-size: .88rem; }
.message.success { color: var(--success); }
.muted { margin: 5px 0 0; color: var(--muted); }
.timer { min-height: 24px; margin: 10px 0 0; color: var(--muted); }
.actions { display: flex; align-items: center; gap: 9px; margin-top: 16px; }
.actions button { flex: 1; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.summary-grid div { padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.summary-grid dt { color: var(--muted); font-size: .8rem; }
.summary-grid dd { margin: 4px 0 0; font-size: 1rem; font-weight: 800; }

.scheduler-card { border-top: 4px solid var(--primary); }
.safety-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 10px 13px; border: 1px solid #e5cd8c; border-radius: 8px; background: var(--warning-soft); color: #624713; font-size: .84rem; }
.safety-note strong { white-space: nowrap; }
.scheduler-help { margin: 12px 0 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.scheduler-help summary { padding: 10px 12px; cursor: pointer; font-weight: 700; }
.scheduler-help ol { margin: 0; padding: 0 34px 12px 16px; color: #485665; font-size: .86rem; }
.scheduler-help li { margin: 5px 0; }
.step-title { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; color: #293745; }
.step-title > span { display: none; }
.scheduler-clock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.scheduler-clock div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.scheduler-clock dt { color: var(--muted); font-size: .76rem; }
.scheduler-clock dd { margin: 3px 0 0; direction: ltr; text-align: right; font-size: .86rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.scheduler-clock-primary { margin-bottom: 10px; }
.scheduler-clock-primary div:first-child { border-color: #a9c8dc; background: var(--primary-soft); }
.technical-details { margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.technical-details summary { width: fit-content; padding: 5px 0 10px; color: var(--primary); cursor: pointer; font-size: .82rem; font-weight: 700; }
.technical-details .scheduler-clock { padding-bottom: 12px; }
.scheduler-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.scheduler-controls label { margin-top: 0; }
.compact-actions { justify-content: flex-start; margin-top: 10px; }
.compact-actions button { flex: 0 1 auto; }

.scheduler-groups-head { align-items: flex-end; margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--line); }
.scheduler-groups-head .step-title { margin-bottom: 0; }
.group-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.quick-order-grid { display: grid; grid-template-columns: 1.35fr 1fr .75fr .8fr 1fr 1fr 1fr; align-items: end; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.field { margin: 0; }
.field > span { display: block; margin-bottom: 5px; font-size: .76rem; color: var(--muted); }
.input-suffix { display: flex; align-items: stretch; }
.input-suffix input { border-radius: 0 8px 8px 0; }
.input-suffix span { display: grid; place-items: center; padding: 0 9px; border: 1px solid var(--line-strong); border-right: 0; border-radius: 8px 0 0 8px; background: #eef2f5; color: var(--muted); direction: ltr; }
.add-order-button { min-height: 44px; }
.instrument-info { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.instrument-info span { padding: 8px 10px; background: #fff; color: var(--muted); font-size: .77rem; }
.instrument-info strong { display: block; margin-top: 2px; color: var(--text); font-size: .86rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 9px; border-bottom: 1px solid #e7ebef; text-align: right; white-space: nowrap; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 1; background: #f3f6f8; color: #52606e; font-size: .76rem; font-weight: 750; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbfd; }
.scheduler-row-ready { background: #edf7fc; box-shadow: inset -3px 0 var(--primary); }
.order-list-wrap { margin-top: 8px; }
.order-list-wrap input, .order-list-wrap select { min-width: 96px; min-height: 36px; padding: 5px 7px; }
.order-list-wrap td:last-child { min-width: 175px; }
.row-actions { display: flex; gap: 5px; align-items: center; }
.empty-state { padding: 24px !important; text-align: center; color: var(--muted); }
.status-chip { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #eef2f5; color: #53606d; font-size: .74rem; font-weight: 700; }
.status-chip.ready, .status-chip.sent { background: var(--success-soft); color: var(--success); }
.status-chip.failed, .status-chip.expired { background: var(--danger-soft); color: var(--danger); }
.status-cell.ready, .status-cell.armed, .status-cell.running { color: var(--primary); font-weight: 700; }
.status-cell.completed { color: var(--success); font-weight: 700; }
.status-cell.cancelled { color: var(--muted); }

.scheduler-next { display: grid; grid-template-columns: 1.2fr 1fr 1.5fr 1fr; gap: 8px; align-items: center; margin-top: 13px; padding: 12px; border: 1px solid #8db1c8; border-radius: 9px; background: var(--primary-soft); }
.scheduler-next b { direction: ltr; font-variant-numeric: tabular-nums; }
.scheduler-actions { flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.scheduler-actions button { flex: 1 1 145px; }
.send-now { background: var(--danger); border-color: var(--danger); }
.send-now:hover:not(:disabled) { background: var(--danger-dark); border-color: var(--danger-dark); }
.live-arm { background: #fff; border-color: var(--danger); color: var(--danger); }
.scheduler-api-response { max-width: 280px; white-space: normal; }
.scheduler-api-response details { width: 100%; }
.scheduler-api-response summary { cursor: pointer; color: var(--primary); font-weight: 700; }
.scheduler-api-response pre { max-height: 260px; margin: 7px 0; padding: 9px; overflow: auto; border-radius: 7px; background: #17202a; color: #e9f0f5; font: 11px/1.65 Consolas, monospace; direction: ltr; text-align: left; white-space: pre-wrap; }

.market-workspace { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 16px; align-items: start; }
.market-workspace > .section { height: 100%; }

.inline-form { display: flex; align-items: stretch; gap: 8px; margin-top: 13px; }
.inline-form input { flex: 1; }
.search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.symbol-button, .result-button { min-height: auto; padding: 0; border: 0; background: transparent; color: var(--primary); text-align: right; }
.symbol-button:hover:not(:disabled), .result-button:hover:not(:disabled) { background: transparent; color: var(--primary-dark); text-decoration: underline; }
.result-title { display: block; font-weight: 800; }
.result-name, .result-isin { display: block; margin-top: 2px; color: var(--muted); }
.result-isin { direction: ltr; text-align: right; }
.result-actions, .portfolio-actions { display: flex; align-items: center; gap: 5px; }
.result-actions button, .portfolio-actions button { min-height: 32px; padding: 4px 10px; }
.portfolio-actions button:first-child, .result-actions button:first-child { background: var(--success); border-color: var(--success); }
.portfolio-actions button:last-child, .result-actions button:last-child { background: var(--danger); border-color: var(--danger); }
.positive { color: var(--success); font-weight: 700; }
.negative { color: var(--danger); font-weight: 700; }
.neutral { color: var(--muted); }

.realtime-card h3 { margin: 16px 0 0; }
.market-depth { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.market-depth h3 { margin: 0 0 6px; font-size: 13px; }
.compact-table-wrap { max-height: 190px; }
.market-depth th, .market-depth td { padding: 5px 6px; white-space: nowrap; text-align: center; }
.depth-price { min-height: auto; padding: 2px 4px; border: 0; background: transparent; font: inherit; font-weight: 700; }
.depth-price.buy-depth { color: var(--buy); }
.depth-price.sell-depth { color: var(--sell); }
.depth-price:hover:not(:disabled), .depth-price:focus-visible { background: var(--background); text-decoration: underline; }
.nav-row { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.nav-row strong { font-size: 1.3rem; }
.quote-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.price-limits { display: flex; gap: 24px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.quote-grid > div { padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.quote-grid span, .quote-grid strong, .quote-grid small { display: block; }
.quote-grid strong { margin-top: 5px; font-size: 1.2rem; }
.quote-grid small { margin: 4px 0 9px; color: var(--muted); }
.quote-grid button { width: 100%; }
.trades-grid { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.trades-grid > * { margin: 0; padding: 9px; background: #fff; }
.trades-grid span b, .trades-grid span small { display: block; }
.trades-grid small { margin-top: 4px; color: var(--muted); }

fieldset { margin: 14px 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.radio-label { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 22px; }
.radio-label input { width: auto; min-height: auto; }
.order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.order-quote-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.order-quote-summary span { padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); font-size: .78rem; }


/* Workspace layout */
.page { width: min(100% - 24px, 1720px); margin: 12px auto 24px; }
.card { border: 0; border-radius: 0; box-shadow: none; }
.section { padding: 12px; margin: 0; }
h1, h2, h3 { font-size: 16px; }
.topbar { position: static; height: 56px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); box-shadow: none; }
.brand-mark, .brand small { display: none; }
.brand h1 { font-size: 16px; }
.topbar-meta { gap: 16px; font-size: 12px; }
.connection-status, .connection-status[data-status] { background: none; border: 0; padding: 0; }
.connection-status::before { content: "●"; margin-inline-end: 6px; }
.account-summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.account-summary .section-head { grid-column: 2; grid-row: 1; }
.account-summary h2 { display: none; }
.account-summary .summary-grid { grid-column: 1; grid-row: 1; margin: 0; gap: 24px; }
.summary-grid div { border: 0; border-radius: 0; background: none; padding: 0; }
.summary-grid dd { font-size: 17px; font-variant-numeric: tabular-nums; }
#account-message { grid-column: 1 / -1; margin: 0; }
.message:empty { min-height: 0; margin: 0; }
#search-section { padding: 8px 16px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#search-section h2 { font-size: 13px; display: flex; gap: 8px; align-items: center; }
#search-section .section-hint { display: none; }
#search-section .inline-form { flex: 1; margin: 0; }
#search-message, #search-results { flex-basis: 100%; }
.search-results { max-height: 220px; overflow: auto; }
kbd { font: 11px monospace; direction: ltr; color: var(--muted); }
.terminal-grid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(360px, 1fr) minmax(360px, 34%); background: var(--surface); align-items: start; }
.terminal-grid > * { min-width: 0; }
.realtime-card { grid-column: 1; grid-row: 1; }
.order-card { grid-column: 2; grid-row: 1; border-inline: 1px solid var(--line); background: #fcfdff; }
#portfolio-section { grid-column: 3; grid-row: 1; }
.terminal-grid:not(:has(.order-card:not([hidden]))) #portfolio-section { grid-column: 2 / 4; }
.table-wrap { border: 0; border-radius: 0; overflow: auto; max-height: 540px; }
th, td { padding: 8px; border-bottom: 1px solid #eef0f3; font-size: 12px; }
th { background: #fafbfc; color: var(--muted); }
td:not(:first-child) { font-variant-numeric: tabular-nums; }
.portfolio-actions button, .result-actions button { min-height: 28px; padding: 4px 8px; font-size: 12px; }
.portfolio-actions button:first-child, .portfolio-actions button:last-child { background: transparent; color: var(--primary); border: 1px solid var(--line); }
.portfolio-actions button:hover { background: var(--primary-soft); }
.empty-state { padding: 16px !important; }
.last-price { margin: 12px 0; }
.last-price span, .last-price strong { display: block; }
.last-price span { color: var(--muted); font-size: 12px; }
.last-price strong { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.realtime-card h3 { margin: 12px 0 0; font-size: 18px; }
.nav-row { padding: 8px 0; gap: 8px; flex-wrap: wrap; }
.nav-row strong { font-size: 18px; }
.nav-row .muted { font-size: 11px; }
.price-limits { border: 0; padding: 8px 0; margin: 0; gap: 16px; background: none; font-size: 12px; }
.price-limits strong { display: block; font-size: 16px; }
.quote-head { flex-wrap: wrap; gap: 4px; font-size: 11px; }
.quote-grid { gap: 12px; margin-top: 8px; }
.quote-grid > div { border: 0; padding: 0; }
.quote-grid strong { font-size: 17px; }
.quote-grid button { min-height: 28px; font-size: 11px; padding: 4px; }
.trades-grid { border: 0; border-radius: 0; grid-template-columns: 56px 1fr 1fr; background: #f3f4f6; font-size: 12px; }
.trades-grid > * { padding: 8px 4px; }
.order-card fieldset { display: flex; border: 0; background: #f0f2f5; padding: 4px; margin: 8px 0; gap: 4px; }
.order-card legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.order-card .radio-label { flex: 1; margin: 0; justify-content: center; min-height: 40px; padding: 8px; border-radius: 4px; cursor: pointer; }
.radio-label:has(input[value="buy"]:checked) { background: #dcfce7; color: #166534; font-weight: 800; }
.radio-label:has(input[value="sell"]:checked) { background: #fee2e2; color: #991b1b; font-weight: 800; }
.radio-label input { accent-color: currentColor; }
.order-quote-summary { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0; }
.order-quote-summary span { padding: 0; border: 0; background: none; font-size: 11px; }
.order-quote-summary strong { font-weight: 600; }
#order-mode-description { font-size: 11px; min-height: 32px; margin: 4px 0; }
.order-fields { grid-template-columns: 1fr; gap: 0; }
.order-fields label { margin: 8px 0 4px; font-size: 13px; }
.order-fields input { min-height: 52px; text-align: center; direction: ltr; font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; }
.order-fields input[aria-invalid="true"] { border-color: #d97706; background: #fffbeb; }
.price-helpers, .volume-helpers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.price-helpers button, .volume-helpers button { flex: 1; min-height: 28px; padding: 4px; font-size: 11px; white-space: nowrap; }
.volume-helpers { direction: ltr; }
.entry-summary { border-top: 1px solid var(--line); padding-top: 8px; margin: 12px 0 4px; font-size: 12px; }
.order-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 0; }
.order-total span { font-size: 11px; color: var(--muted); }
.order-total strong { font-size: 18px; font-variant-numeric: tabular-nums; }
#submit-order { width: 100%; min-height: 44px; background: #15803d; border-color: #15803d; }
.order-card:has(input[value="sell"]:checked) #submit-order { background: #dc2626; border-color: #dc2626; }
.entry-header-actions { display: flex; gap: 4px; }
.entry-header-actions button { font-size: 11px; min-height: 28px; padding: 4px 8px; }
.entry-shortcut { font-size: 10px; text-align: center; color: var(--muted); margin: 4px 0; }
.order-method-help { font-size: 11px; margin-top: 4px; color: var(--muted); }
.order-method-help summary { cursor: pointer; }
.order-card label { font-size: 12px; margin: 8px 0 4px; }
#order-isin { font-size: 11px; margin: 0; }
#portfolio-section .section-head small { font-size: 11px; font-weight: 400; }
#orders-section:has(.empty-state) thead { display: none; }
.numeric-skeleton { color: transparent !important; background: #edf0f3; border-radius: 4px; min-width: 64px; }
.number-editor { position: relative; }
.number-editor output { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; }
.number-editor:not(:focus-within) input { color: transparent; }
.number-editor:focus-within output { visibility: hidden; }
@media (min-width: 1051px) {
  .terminal-grid { max-height: max(560px, calc(100dvh - 300px)); overflow: hidden; }
  .terminal-grid > .section { max-height: max(560px, calc(100dvh - 300px)); overflow-y: auto; }
  .order-card #submit-order { position: sticky; bottom: 0; z-index: 2; }
}
.timing-link { background: none; border: 0; color: var(--primary); min-height: 28px; font-size: 12px; }
.inline-validation { font-size: 12px; color: #92400e; }
.side-buy { background: #dcfce7; color: #166534; }
.side-sell { background: #fee2e2; color: #991b1b; }
.orders-panel, .scheduler-disclosure { border: 0; border-top: 1px solid var(--line); background: var(--surface); }
.orders-panel > summary, .scheduler-disclosure > summary { padding: 12px 16px; cursor: pointer; font-weight: 700; }
.orders-panel > .section-head { padding: 0 16px 8px; font-size: 12px; }
.orders-panel .message { margin-inline: 16px; }
.orders-panel .table-wrap { max-height: 220px; padding: 0 8px; }
.scheduler-disclosure > summary span { color: var(--muted); font-size: 12px; margin-inline-start: 12px; font-weight: 400; }
.scheduler-card { border: 0; }
.scheduler-actions, .quick-order-grid, .scheduler-clock div { border: 0; border-radius: 4px; }
.step-title { margin: 16px 0 8px; font-size: 14px; }
.step-title > span { display: none; }
.status-badge, .count-badge { border-radius: 4px; font-size: 11px; padding: 4px 8px; }
.order-toast { position: fixed; bottom: 16px; left: 16px; z-index: 50; max-width: min(440px, calc(100vw - 32px)); padding: 12px 16px; background: #f0fdf4; color: #14532d; border: 1px solid #86b99a; border-radius: 4px; }
summary:focus-visible, .table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.login-card { border: 1px solid var(--line); border-radius: 8px; padding: 32px; }
@media (max-width: 1050px) {
 .terminal-grid { grid-template-columns: minmax(280px, 1fr) minmax(360px, 440px); }
 #portfolio-section, .terminal-grid:not(:has(.order-card:not([hidden]))) #portfolio-section { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); }
 .scheduler-controls, .quick-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .instrument-info { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
 .page { width: 100%; margin: 0; }
 #dashboard-view { display: flex; flex-direction: column; }
 .topbar { order: 0; padding: 8px 12px; }
 .topbar-meta { gap: 8px; font-size: 10px; }
 .brand h1 { font-size: 13px; }
 .connection-status { font-size: 10px; }
 #search-section { order: 1; }
 .terminal-grid { display: contents; }
 .realtime-card { order: 2; }
 .order-card { order: 3; border: 0; border-top: 1px solid var(--line); }
 .account-summary { order: 4; }
 #portfolio-section { order: 5; }
 .orders-panel { order: 6; }
 .scheduler-disclosure { order: 7; }
 .summary-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
 .account-summary .summary-grid { gap: 8px; }
 .summary-grid dd { font-size: 15px; }
 #search-section h2 { display: none; }
 .section { padding: 12px; }
 .scheduler-clock, .scheduler-controls, .quick-order-grid, .scheduler-next { grid-template-columns: 1fr; }
 .safety-note, .scheduler-groups-head { flex-direction: column; align-items: flex-start; }
 .safety-note strong { white-space: normal; }
 .instrument-info { grid-template-columns: 1fr 1fr; }
 .actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Final interaction and density refinements */
button, input, select { transition: background-color 150ms, border-color 150ms; }
input:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.portfolio-actions { min-height: 40px; }
#portfolio-section td:not(:first-child):not(:last-child) { font-family: "Vazirmatn", monospace; font-weight: 650; font-variant-numeric: tabular-nums; }
#portfolio-section table { table-layout: fixed; min-width: 420px; }
#portfolio-section th, #portfolio-section td { padding: 4px; font-size: 12px; }
#portfolio-section th { white-space: normal; }
#portfolio-section th:first-child { width: 12%; }
#portfolio-section th:nth-child(2) { width: 10%; }
#portfolio-section th:nth-child(3), #portfolio-section th:nth-child(4) { width: 13%; }
#portfolio-section th:nth-child(5), #portfolio-section th:nth-child(6) { width: 19%; }
#portfolio-section th:last-child { width: 14%; }
#portfolio-section .portfolio-actions { flex-direction: column; gap: 4px; min-height: 0; }
#portfolio-section .portfolio-actions button { padding: 0 4px; min-height: 24px; font-size: 12px; }
.positive { color: #15803d; }
.negative { color: #dc2626; }
.order-card .price-helpers button { border-color: transparent; background: transparent; color: var(--muted); }
.order-card .price-helpers button:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.trades-grid { color: var(--muted); font-size: 11px; }
.trades-grid b { color: #475569; font-weight: 600; }
.inline-confirmation { padding: 12px; border-inline-start: 3px solid #15803d; background: #f0fdf4; }
.inline-confirmation h3 { font-size: 14px; margin: 0 0 8px; }
#confirmation-summary { white-space: pre-line; font-size: 14px; line-height: 1.8; margin-bottom: 12px; }
.confirmation-actions { display: flex; gap: 8px; }
.confirmation-actions button { flex: 1; }
#confirm-order { background: #15803d; border-color: #15803d; }
.order-card:has(input[value="sell"]:checked) .inline-confirmation { background: #fff1f2; border-color: #dc2626; }
.order-card:has(input[value="sell"]:checked) #confirm-order { background: #dc2626; border-color: #dc2626; }
.scheduler-disclosure > summary { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Exit Rules workspace: compact risk controls, not a dashboard of cards. */
.risk-workspace { border-top: 1px solid var(--line); background: var(--surface); padding: 16px; }
.risk-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.risk-header h2, .risk-monitor h3, .risk-editor h3 { margin: 0; }
.risk-health { display: flex; flex-wrap: wrap; gap: 20px; padding: 8px 0; color: var(--muted); font-size: 12px; }
.risk-health strong { color: var(--text); margin-inline-start: 4px; }
.risk-warning { margin: 10px 0 0; padding: 8px 10px; border-inline-start: 3px solid #d97706; background: #fffbeb; color: #854d0e; font-size: 12px; }
.risk-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); border-top: 1px solid var(--line); }
.risk-editor { padding: 14px 0 0 16px; border-inline-end: 1px solid var(--line); }
.risk-monitor { min-width: 0; padding: 14px 16px 0 0; }
.risk-editor-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.risk-editor-head label { width: 145px; margin: 0; }
.risk-editor-head input { min-height: 36px; }
.risk-rule-option { display: grid; grid-template-columns: 20px minmax(110px, 1fr) 140px; align-items: center; gap: 8px; min-height: 58px; margin: 0; padding: 8px 0; border-bottom: 1px solid #eef1f4; }
.risk-rule-option > input[type="checkbox"] { width: 17px; min-height: 17px; margin: 0; accent-color: var(--primary); }
.risk-rule-option > span:nth-child(2) { display: flex; flex-direction: column; }
.risk-rule-option small, .rule-detail { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.risk-rule-option input[type="number"] { min-height: 36px; }
.suffix-input { position: relative; }
.suffix-input b { position: absolute; left: 9px; top: 8px; color: var(--muted); }
.risk-execution-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; align-items: center; padding: 10px 0; }
.risk-execution-row label { margin: 0; }
.risk-execution-row select, .risk-execution-row input { min-height: 38px; }
.risk-execution-row input { grid-column: 2; }
#review-risk-rules { width: 100%; }
.risk-table { min-width: 610px; }
.risk-table th, .risk-table td { padding: 7px 8px; }
.risk-table td:first-child, .risk-table td:nth-child(2) { font-weight: 650; }
.rule-status { font-size: 11px; }
.status-active { color: #166534; }
.status-triggered, .status-ready { color: #a14f08; }
.status-submitted { color: var(--primary); }
.status-completed { color: #166534; }
.status-failed { color: var(--danger); }
.status-cancelled, .status-expired { color: var(--muted); }
.status-needs_attention { color: #a14f08; }
.danger-outline { color: var(--danger) !important; border-color: #e7b2b7 !important; }
.compact-button { min-height: 28px; padding: 3px 8px; font-size: 11px; }
.risk-ready-list { display: grid; gap: 8px; margin: 8px 0; }
.risk-ready { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-inline-start: 3px solid #d97706; background: #fffbeb; }
.risk-ready > div:first-child { display: flex; flex-direction: column; }
.risk-ready > div:first-child span { color: var(--muted); font-size: 11px; }
.risk-ready dl { display: flex; gap: 18px; margin: 0; }
.risk-ready dl div { display: flex; flex-direction: column; }
.risk-ready dt { color: var(--muted); font-size: 10px; }
.risk-ready dd { margin: 0; font-weight: 750; }
.sell-button { background: #dc2626; border-color: #dc2626; white-space: nowrap; }
.sell-button:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.portfolio-actions .risk-action { font-size: 10px !important; }
@media (max-width: 680px) {
  #submit-order { position: sticky; bottom: 8px; z-index: 5; }
  .inline-confirmation { scroll-margin-block: 12px; }
  .risk-workspace { order: 6; padding: 12px; }
  .orders-panel { order: 7; }
  .scheduler-disclosure { order: 8; }
  .risk-layout { grid-template-columns: 1fr; }
  .risk-editor { padding: 12px 0; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .risk-monitor { padding: 12px 0 0; }
  .risk-rule-option { grid-template-columns: 20px 1fr 120px; }
  .risk-ready { grid-template-columns: 1fr; }
}
@media (min-width: 681px) and (max-width: 1050px) {
  .risk-layout { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { button, input, select { transition: none; } }

/* Multi-workspace application shell --------------------------------------- */
#dashboard-view { min-height: calc(100dvh - 24px); background: var(--surface); }
.topbar { position: sticky; top: 0; z-index: 30; }
.topbar-quick { display: flex; align-items: center; gap: 14px; padding-inline-end: 14px; border-inline-end: 1px solid var(--line); }
.top-buying-power { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.top-buying-power small { color: var(--muted); }
.top-buying-power strong { font-size: 13px; }
.top-search { min-height: 32px; padding: 4px 10px; border-color: var(--line); background: var(--surface); color: var(--text); font-size: 12px; }
.top-search:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text); }
.top-search kbd { margin-inline-start: 8px; }
.app-shell { display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: calc(100dvh - 80px); }
.app-navigation { border-inline-end: 1px solid var(--line); background: #fbfcfd; }
.navigation-list { position: sticky; top: 57px; display: grid; gap: 3px; padding: 12px 8px; }
.navigation-list a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: 6px; color: #475569; text-decoration: none; font-size: 13px; }
.navigation-list a > span { width: 20px; color: #718096; text-align: center; font: 16px/1 sans-serif; }
.navigation-list a:hover { background: #f0f4f7; color: var(--text); }
.navigation-list a.active { background: #e9f2f8; color: var(--primary); box-shadow: inset -3px 0 var(--primary); }
.navigation-list a.active > span { color: var(--primary); }
.app-workspace { min-width: 0; background: var(--surface); }
.workspace-page { min-width: 0; animation: workspace-appear 100ms ease-out; }
@keyframes workspace-appear { from { opacity: .75; } to { opacity: 1; } }
.workspace-header { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.workspace-header h2 { margin: 0; font-size: 17px; }
.workspace-header p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }

/* Overview */
.workspace-page[data-page="/overview"] .account-summary { border-top: 0; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1px solid var(--line); }
.overview-region { min-height: 220px; padding: 16px; border-inline-end: 1px solid var(--line); }
.overview-region:nth-child(2) { border-inline-end: 0; }
.region-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.region-head h3 { margin: 0; font-size: 14px; }
.text-action { min-height: 28px; padding: 2px 4px; border: 0; background: transparent; color: var(--primary); font-size: 11px; }
.text-action:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary-dark); }
.overview-list { display: grid; }
.overview-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 7px 0; border: 0; border-bottom: 1px solid #eef1f4; border-radius: 0; background: transparent; color: var(--text); text-align: right; }
button.overview-row:hover:not(:disabled) { background: #fafcfd; color: var(--primary); }
.overview-row span { color: var(--muted); font-size: 12px; }
.overview-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.overview-actions button { min-height: 36px; }

/* Trade workspace */
.workspace-page[data-page="/trade"] #search-section { min-height: 60px; }
.trade-workspace-grid { display: grid; grid-template-columns: minmax(420px, 1.2fr) minmax(360px, .8fr); align-items: start; border-bottom: 1px solid var(--line); }
.trade-workspace-grid > .section { min-width: 0; max-height: calc(100dvh - 225px); overflow-y: auto; }
.trade-workspace-grid .realtime-card { border-inline-end: 1px solid var(--line); }
.trade-workspace-grid .order-card { border-inline: 0; background: #fcfdff; }
.quote-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 10px 0; background: var(--line); }
.quote-stat-grid div { padding: 7px 8px; background: var(--surface); }
.quote-stat-grid dt { color: var(--muted); font-size: 10px; }
.quote-stat-grid dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.trade-orders-preview { padding: 12px 16px; }
.trade-orders-preview .overview-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }

/* Dedicated data pages */
.workspace-page[data-page="/portfolio"] #portfolio-section,
.workspace-page[data-page="/orders"] #orders-section,
.workspace-page[data-page="/scheduler"] .scheduler-disclosure,
.workspace-page[data-page="/risk"] #risk-panel { margin: 0; border-top: 0; }
.workspace-page[data-page="/portfolio"] #portfolio-section { padding: 12px 16px; }
.workspace-page[data-page="/portfolio"] #portfolio-section .table-wrap { max-height: calc(100dvh - 170px); }
.workspace-page[data-page="/portfolio"] #portfolio-section table { min-width: 850px; table-layout: auto; }
.workspace-page[data-page="/portfolio"] #portfolio-section th,
.workspace-page[data-page="/portfolio"] #portfolio-section td { height: 42px; padding: 6px 9px; }
.workspace-page[data-page="/portfolio"] #portfolio-section .portfolio-actions { flex-direction: row; }
.workspace-page[data-page="/orders"] .orders-panel > summary,
.workspace-page[data-page="/scheduler"] .scheduler-disclosure > summary { display: none; }
.workspace-page[data-page="/orders"] .orders-panel > .section-head { padding: 12px 16px; }
.workspace-page[data-page="/orders"] .orders-panel .table-wrap { max-height: calc(100dvh - 180px); padding: 0 16px; }
.workspace-page[data-page="/scheduler"] .scheduler-card { padding: 16px; }
.workspace-page[data-page="/risk"] .risk-workspace { padding: 16px; }
.risk-position-selector { display: grid; grid-template-columns: auto minmax(220px, 360px) 1fr; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.risk-position-selector label { margin: 0; }
.risk-position-selector select { min-height: 38px; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 64px minmax(0, 1fr); }
  .navigation-list a { justify-content: center; padding: 8px 4px; }
  .navigation-list a b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .navigation-list a.active { box-shadow: inset -3px 0 var(--primary); }
  .trade-workspace-grid { grid-template-columns: minmax(330px, 1fr) minmax(330px, .82fr); }
  .top-buying-power { display: none; }
}

@media (max-width: 680px) {
  body { padding-bottom: 62px; }
  #dashboard-view { display: block; min-height: 100dvh; }
  .topbar { position: sticky; top: 0; height: 52px; }
  .topbar-quick { padding: 0; border: 0; }
  .top-search { width: 34px; padding: 0; overflow: hidden; color: transparent; }
  .top-search::before { content: "⌕"; display: grid; place-items: center; color: var(--text); font-size: 19px; }
  .top-search kbd { display: none; }
  #market-time { display: none; }
  .app-shell { display: block; min-height: auto; }
  .app-navigation { position: fixed; inset: auto 0 0; z-index: 40; border: 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.98); }
  .navigation-list { position: static; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 4px; }
  .navigation-list a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 3px 1px; font-size: 9px; }
  .navigation-list a b { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
  .navigation-list a.active { box-shadow: inset 0 -3px var(--primary); }
  .workspace-header { min-height: 54px; padding: 8px 12px; }
  .workspace-header p { display: none; }
  .overview-grid { grid-template-columns: 1fr; }
  .overview-region { min-height: 0; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .overview-actions { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; }
  .overview-actions button:first-child { grid-column: 1 / -1; }
  .trade-workspace-grid { display: flex; flex-direction: column; }
  .trade-workspace-grid > .section { width: 100%; max-height: none; overflow: visible; }
  .trade-workspace-grid .order-card { order: 1; border-bottom: 1px solid var(--line); }
  .trade-workspace-grid .realtime-card { order: 2; border-inline-end: 0; }
  .trade-orders-preview { padding: 12px; }
  .trade-orders-preview .overview-list { grid-template-columns: 1fr; }
  .quote-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .risk-position-selector { grid-template-columns: 1fr; padding: 10px 12px; }
  .workspace-page[data-page="/portfolio"] #portfolio-section .table-wrap,
  .workspace-page[data-page="/orders"] .orders-panel .table-wrap { max-height: none; }
  .workspace-page[data-page="/scheduler"] .scheduler-card,
  .workspace-page[data-page="/risk"] .risk-workspace { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) { .workspace-page { animation: none; } }