:root {
  color-scheme: dark;
  --bg: #071217;
  --surface: #0d1b22;
  --surface-2: #12252e;
  --surface-3: #172e39;
  --border: #29414d;
  --border-strong: #3a5966;
  --text: #eef7f8;
  --muted: #91a8b2;
  --cyan: #22d3c5;
  --blue: #58a6ff;
  --amber: #f2b84b;
  --green: #27c68a;
  --red: #ff6377;
  --purple: #a989ff;
  --shadow: 0 16px 45px rgba(0, 0, 0, 0.24);
  font-family: Tahoma, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0;
}

button, input { font: inherit; letter-spacing: 0; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.offline-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  padding: 7px 16px;
  background: var(--amber);
  color: #1f1807;
  text-align: center;
  font-weight: 700;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(43, 76, 88, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 76, 88, 0.12) 1px, transparent 1px);
  background-size: 44px 44px;
}

.login-shell {
  width: min(460px, 100%);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: rgba(13, 27, 34, 0.97);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 28px 24px;
  border-bottom: 1px solid var(--border);
}

.brand-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 211, 197, 0.5);
  border-radius: 7px;
  background: #0b3033;
  color: var(--cyan);
}

.brand-mark svg { width: 32px; height: 32px; stroke-width: 1.8; }
.brand-mark.small { width: 38px; height: 38px; flex-basis: 38px; }
.brand-mark.small svg { width: 22px; height: 22px; }
.eyebrow { margin: 0 0 2px; color: var(--cyan); font-size: 11px; font-weight: 700; }
.login-brand h1 { margin: 0; font-size: 26px; line-height: 1.3; }
.login-brand p:last-child { margin: 4px 0 0; color: var(--muted); }

.login-form { display: grid; gap: 9px; padding: 26px 28px 24px; }
.login-form label { color: #c8d8dd; font-size: 12px; font-weight: 700; margin-top: 4px; }

.input-wrap { position: relative; }
.input-wrap > svg {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.input-wrap input,
.calculator-inputs input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: #08151b;
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.input-wrap input { padding: 9px 42px 9px 44px; direction: ltr; text-align: left; }
.input-wrap input:focus, .calculator-inputs input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12); outline: none; }
.field-action { position: absolute !important; top: 4px; left: 4px; }
.form-error { margin: 2px 0; color: #ff9baa; font-size: 12px; }

.login-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 28px;
  border-top: 1px solid var(--border);
  background: #09171d;
  color: var(--muted);
  font-size: 11px;
}

.login-foot span { display: inline-flex; align-items: center; gap: 6px; }
.login-foot svg { width: 14px; height: 14px; color: var(--green); }

.button,
.icon-button {
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}

.button:active, .icon-button:active { transform: translateY(1px); }
.button:disabled, .icon-button:disabled { cursor: not-allowed; opacity: 0.48; }
.button { min-height: 42px; padding: 8px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
.button svg { width: 17px; height: 17px; }
.button.wide { width: 100%; margin-top: 10px; }
.button.primary { background: #118e83; border-color: #21b9ac; color: #fff; }
.button.primary:hover { background: #16a094; }
.button.secondary { background: #172a34; border-color: var(--border-strong); color: #d9e6e9; }
.button.secondary:hover { background: #213944; }

.icon-button {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  background: #12242d;
  border-color: var(--border);
  color: #cbe0e4;
}

.icon-button:hover { background: #19333d; border-color: var(--border-strong); color: #fff; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button.danger-quiet:hover { color: var(--red); border-color: rgba(255, 99, 119, 0.5); }

.app-view { min-height: 100vh; }

.app-bar {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border);
  background: #08151b;
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.app-identity > div:last-child { min-width: 0; display: grid; }
.app-identity strong { font-size: 16px; white-space: nowrap; }
.app-identity span { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-state { display: inline-flex; align-items: center; gap: 7px; color: #c9d8dc; font-size: 12px; white-space: nowrap; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(242, 184, 75, 0.14); }
.state-dot.online { background: var(--green); box-shadow: 0 0 0 3px rgba(39, 198, 138, 0.14); }
.state-dot.error { background: var(--red); box-shadow: 0 0 0 3px rgba(255, 99, 119, 0.14); }
.mode-badge { padding: 2px 7px; border: 1px solid rgba(88, 166, 255, 0.4); border-radius: 4px; color: #9dcbff; background: rgba(88, 166, 255, 0.08); }
.app-actions { display: flex; justify-content: flex-end; gap: 7px; }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--border);
  background: var(--border);
  overflow-x: auto;
}

.metric { min-height: 70px; padding: 11px 14px; display: grid; align-content: center; gap: 3px; background: var(--surface); }
.metric span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.metric strong { font-size: 18px; line-height: 1.25; white-space: nowrap; }
.metric.accent strong { color: var(--cyan); }
.metric.positive strong { color: var(--green); }

.dashboard {
  width: min(1900px, 100%);
  margin: 0 auto;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(360px, 0.75fr);
  gap: 12px;
  align-items: start;
}

.panel { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); overflow: hidden; }
.panel-toolbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.panel-toolbar h2 { margin: 0; font-size: 16px; line-height: 1.3; }
.panel-toolbar h2 small { margin-right: 7px; color: var(--muted); font-size: 12px; font-weight: 500; }
.segmented { display: inline-grid; grid-template-columns: repeat(4, 42px); border: 1px solid var(--border-strong); border-radius: 5px; overflow: hidden; direction: rtl; }
.segmented button { height: 34px; padding: 0; border: 0; border-left: 1px solid var(--border); background: #0a171d; color: var(--muted); cursor: pointer; }
.segmented button:last-child { border-left: 0; }
.segmented button.active { background: #20506a; color: #fff; }

.chart-meta { min-height: 32px; display: flex; align-items: center; gap: 9px; padding: 5px 14px; border-bottom: 1px solid rgba(41, 65, 77, 0.65); color: var(--muted); font-size: 10px; }
.signal-pill { padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border); }
.signal-pill.positive { color: var(--green); border-color: rgba(39, 198, 138, 0.4); }
.signal-pill.negative { color: var(--red); border-color: rgba(255, 99, 119, 0.4); }
.legend-line { width: 16px; height: 2px; display: inline-block; }
.legend-line.cyan { background: var(--cyan); }
.legend-line.amber { background: var(--amber); }

.chart-wrap { position: relative; width: 100%; height: 340px; min-height: 260px; background: #08151b; }
#market-chart { display: block; width: 100%; height: 100%; }
.empty-overlay { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; pointer-events: none; }
.watchlist-header { min-height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.watchlist-header h3, .reason-block h3, .position-calculator h3 { margin: 0; font-size: 12px; }
.watchlist-header span { color: var(--muted); font-size: 10px; }

.table-scroll { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 9px 12px; text-align: right; border-bottom: 1px solid rgba(41, 65, 77, 0.58); }
th { position: sticky; top: 0; z-index: 1; background: #10212a; color: #9fb5be; font-size: 10px; font-weight: 700; }
td { color: #dce8eb; font-size: 11px; }
tbody tr { transition: background-color 120ms ease; }
tbody tr:hover { background: rgba(88, 166, 255, 0.055); }
.compact-table { max-height: 255px; }
.market-row { cursor: pointer; }
.market-row.selected { background: rgba(34, 211, 197, 0.09); box-shadow: inset -3px 0 var(--cyan); }
.value-positive { color: var(--green); }
.value-negative { color: var(--red); }
.table-empty { height: 80px; color: var(--muted); text-align: center; }

.proposal-panel { min-height: 734px; }
.proposal-empty { min-height: 600px; padding: 40px 25px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; color: var(--muted); }
.proposal-empty > svg { width: 44px; height: 44px; color: var(--cyan); opacity: 0.75; }
.proposal-empty strong { color: var(--text); }
.proposal-empty span { max-width: 330px; font-size: 12px; }
#proposal-content { padding: 14px; }

.proposal-headline { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.proposal-headline > div:first-child { display: grid; gap: 4px; }
.proposal-headline strong { font-size: 22px; direction: ltr; text-align: right; }
.market-type { width: fit-content; padding: 2px 7px; border-radius: 3px; background: rgba(34, 211, 197, 0.1); color: var(--cyan); font-size: 10px; font-weight: 700; }
.confidence-ring { width: 70px; height: 58px; display: grid; place-items: center; align-content: center; border-right: 3px solid var(--cyan); background: #0a171d; }
.confidence-ring strong { font-size: 19px; color: var(--cyan); line-height: 1.1; }
.confidence-ring span { color: var(--muted); font-size: 9px; }

.price-levels { margin: 13px 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.price-levels div { min-height: 59px; padding: 8px 10px; display: grid; align-content: center; gap: 1px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.price-levels div:nth-child(2n) { border-left: 0; }
.price-levels div:nth-last-child(-n+2) { border-bottom: 0; }
.price-levels span { color: var(--muted); font-size: 9px; }
.price-levels strong { direction: ltr; text-align: right; font-size: 13px; }
.price-levels .risk strong { color: var(--red); }
.price-levels .reward strong { color: var(--green); }

.proposal-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.proposal-facts span { min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px; border: 1px solid var(--border); background: #0a171d; color: var(--muted); font-size: 9px; text-align: center; }
.proposal-facts svg { width: 14px; height: 14px; color: var(--blue); flex: 0 0 auto; }
.proposal-facts b { color: var(--text); }

.reason-block { padding: 13px 0 10px; border-bottom: 1px solid var(--border); }
.reason-block ul { margin: 8px 0 0; padding: 0 18px 0 0; color: #c5d6db; font-size: 10px; }
.reason-block li::marker { color: var(--cyan); }
.frame-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 10px 0; }
.frame-cell { min-width: 0; padding: 7px 5px; border: 1px solid var(--border); background: #0a171d; text-align: center; }
.frame-cell span { display: block; color: var(--muted); font-size: 9px; }
.frame-cell strong { display: block; margin: 2px 0; overflow: hidden; color: #dce9ec; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.frame-cell small { color: var(--blue); font-size: 8px; }

.position-calculator { padding: 11px; border: 1px solid var(--border); border-radius: 5px; background: #09171d; }
.calculator-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calculator-title span { color: var(--amber); font-size: 9px; }
.calculator-inputs { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 7px; }
.calculator-inputs label { color: var(--muted); font-size: 9px; }
.calculator-inputs input { min-height: 34px; margin-top: 3px; padding: 5px 8px; direction: ltr; text-align: left; }
.size-output { margin-top: 8px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 8px; }
.size-output span { grid-row: span 2; color: var(--muted); font-size: 9px; }
.size-output strong { color: var(--cyan); font-size: 14px; direction: ltr; text-align: right; }
.size-output small { color: var(--muted); font-size: 9px; direction: ltr; text-align: right; }
.proposal-actions { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 8px; margin-top: 11px; }
.supervision-note { margin: 10px 0 0; display: flex; align-items: flex-start; gap: 5px; color: var(--muted); font-size: 9px; }
.supervision-note svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; }

.records-panel { grid-column: 1 / -1; min-height: 260px; }
.records-tabs { height: 47px; display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.records-tabs button { min-width: 130px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; }
.records-tabs button.active { color: #fff; background: #172b35; box-shadow: inset 0 -2px var(--blue); }
.records-tabs svg { width: 16px; height: 16px; }
.records-table { max-height: 320px; }
.activity-list { max-height: 320px; overflow: auto; padding: 6px 14px; }
.activity-item { min-height: 42px; display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid rgba(41, 65, 77, 0.55); }
.activity-item time { color: var(--muted); font-size: 9px; direction: ltr; }
.activity-item strong { font-size: 11px; }
.activity-item span { color: var(--muted); font-size: 9px; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 68px; padding: 2px 7px; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); font-size: 9px; }
.status-badge.active, .status-badge.tracking { color: var(--cyan); border-color: rgba(34, 211, 197, 0.35); }
.status-badge.closed_win { color: var(--green); border-color: rgba(39, 198, 138, 0.35); }
.status-badge.closed_loss { color: var(--red); border-color: rgba(255, 99, 119, 0.35); }

.app-footer { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); color: var(--muted); font-size: 9px; }
.toast-region { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 1200; display: grid; gap: 8px; pointer-events: none; }
.toast { width: min(360px, calc(100vw - 28px)); padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: 5px; background: #10242c; box-shadow: var(--shadow); color: #edf7f8; font-size: 11px; animation: toast-in 180ms ease-out; }
.toast.error { border-color: rgba(255, 99, 119, 0.6); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.spin svg { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .dashboard { grid-template-columns: minmax(0, 1fr); }
  .proposal-panel { min-height: 0; }
  .proposal-empty { min-height: 270px; }
  .records-panel { grid-column: 1; }
}

@media (max-width: 760px) {
  body { font-size: 13px; }
  .app-bar { grid-template-columns: 1fr auto; gap: 8px; padding: 8px 10px; }
  .service-state { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; min-height: 25px; border-top: 1px solid var(--border); padding-top: 6px; }
  .app-actions { gap: 5px; }
  .app-actions .icon-button { width: 35px; height: 35px; }
  .app-identity strong { font-size: 14px; }
  .metric-strip { grid-template-columns: repeat(6, minmax(132px, 1fr)); }
  .metric { min-height: 62px; padding: 8px 11px; }
  .metric strong { font-size: 15px; }
  .dashboard { padding: 7px; gap: 7px; }
  .panel-toolbar { padding: 9px 10px; }
  .panel-toolbar h2 { font-size: 14px; }
  .panel-toolbar h2 small { display: block; margin: 3px 0 0; }
  .chart-wrap { height: 255px; min-height: 220px; }
  .chart-meta { overflow-x: auto; white-space: nowrap; }
  .compact-table { max-height: 280px; }
  th, td { padding: 8px 10px; }
  .proposal-panel { min-height: 0; }
  #proposal-content { padding: 11px; }
  .frame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proposal-facts { grid-template-columns: 1fr; }
  .proposal-facts span { min-height: 34px; justify-content: flex-start; padding: 5px 9px; }
  .activity-item { grid-template-columns: 88px 1fr; gap: 7px; }
  .activity-item span { display: none; }
  .app-footer { align-items: flex-start; flex-direction: column; gap: 2px; }
}

@media (max-width: 430px) {
  .login-view { padding: 14px; }
  .login-brand, .login-form { padding-right: 19px; padding-left: 19px; }
  .login-brand h1 { font-size: 22px; }
  .brand-mark { width: 50px; height: 50px; flex-basis: 50px; }
  .login-foot { padding-right: 19px; padding-left: 19px; }
  .app-identity .brand-mark { display: none; }
  .segmented { grid-template-columns: repeat(4, 37px); }
  .price-levels { grid-template-columns: 1fr; }
  .price-levels div { border-left: 0; border-bottom: 1px solid var(--border) !important; }
  .price-levels div:last-child { border-bottom: 0 !important; }
  .calculator-inputs { grid-template-columns: 1fr; }
  .proposal-actions { grid-template-columns: 1fr; }
  .records-tabs button { min-width: 50%; }
}

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