:root {
  color-scheme: dark;
  --bg: #000000;
  --panel: #090909;
  --panel-soft: #0f0f0f;
  --text: #ffffff;
  --muted: #a7a7a7;
  --line: #2a2a2a;
  --buy: #ffffff;
  --sell: #767676;
  --hold: #b3b3b3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container { flex: 1; padding: 22px; }

.dashboard {
  width: min(1400px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line);
  padding: 22px;
  background: var(--panel);
}

h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 20px; letter-spacing: 0.01em; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: #d7d7d7; }

.subtitle { color: var(--muted); margin: 8px 0 0; font-size: 13px; }

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.status-line { display: flex; align-items: center; gap: 10px; }
.status-label { color: var(--muted); font-size: 12px; }

.system-state { font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); }
.system-state.idle { color: #a9a9a9; }
.system-state.running { color: #ffffff; border-color: #8b8b8b; }
.system-state.paused { color: #cecece; border-color: #5c5c5c; }
.system-state.error { color: #7f7f7f; border-color: #4f4f4f; }

.status-dots { color: var(--muted); letter-spacing: 3px; animation: pulse 1s ease-in-out infinite; }

.layout-grid { display: grid; grid-template-columns: 0.95fr 1.1fr 0.95fr; gap: 14px; }

.panel {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  padding: 16px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-note { margin: 0; color: var(--muted); font-size: 12px; }
.button-group { margin-top: 12px; display: grid; gap: 10px; }

button {
  width: 100%;
  border-radius: 0;
  border: 1px solid var(--line);
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  background: #ffffff;
  color: #000000;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
button:hover { opacity: 0.88; }
.secondary { background: #111111; color: var(--text); }

.status { min-height: 28px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.status.error { color: #8d8d8d; }
.status.success { color: #ffffff; }

.decision-title { margin: 6px 0 4px; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; }
.decision-display { margin: 0 0 10px; font-size: clamp(40px, 4.2vw, 64px); font-weight: 700; line-height: 1; }
.decision-display.buy { color: var(--buy); }
.decision-display.sell { color: var(--sell); }
.decision-display.hold { color: var(--hold); }
.decision-update { animation: fadeInSoft 0.22s ease; }

.row { margin: 10px 0; border-top: 1px solid #1a1a1a; padding-top: 9px; color: #dfdfdf; font-size: 12px; line-height: 1.5; }
.row strong { color: #f2f2f2; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 8px; }
.row-reasoning { min-height: 66px; }
.row-contract, .row-state { background: #0b0b0b; padding: 10px; border: 1px solid #1f1f1f; margin: 8px 0; }
.agent-section {
  border-top: 1px solid #1a1a1a;
  margin-top: 8px;
  padding-top: 10px;
}

.agent-block {
  border: 1px solid #242424;
  background: #0a0a0a;
  padding: 10px;
  margin: 8px 0;
}

.agent-name {
  margin: 0 0 8px;
  font-size: 12px;
  color: #f5f5f5;
  letter-spacing: 0.04em;
}

.agent-line {
  margin: 6px 0;
  font-size: 11px;
  color: #d0d0d0;
  line-height: 1.45;
}

.agent-line strong {
  color: #f2f2f2;
}

.final-section {
  border-top: 1px solid #1a1a1a;
  margin-top: 10px;
  padding-top: 8px;
}

.history-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.history-subtitle { color: var(--muted); margin: 8px 0 12px; font-size: 12px; }
.history-list { display: grid; gap: 0; max-height: 610px; overflow: auto; padding-right: 4px; }
.history-item { border-bottom: 1px solid #1a1a1a; padding: 10px 8px; min-height: 106px; background: #060606; opacity: 0; transform: translateY(3px); animation: historyIn 0.22s ease forwards; }
.history-item.newest { background: #0c0c0c; border-left: 2px solid #f0f0f0; padding-left: 10px; }
.history-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.badge { font-weight: 700; font-size: 12px; letter-spacing: 0.04em; }
.badge.buy { color: var(--buy); }
.badge.sell { color: var(--sell); }
.badge.hold { color: var(--hold); }
.time { color: var(--muted); font-size: 11px; }
.history-text { margin: 6px 0; color: #e2e2e2; font-size: 11px; line-height: 1.4; min-height: 30px; }
.history-meta { margin: 3px 0; color: var(--muted); font-size: 11px; }
.history-empty { color: var(--muted); padding: 10px; border: 1px dashed var(--line); }

.hidden { display: none; }

.app-footer { border-top: 1px solid var(--line); background: #050505; padding: 12px 22px 14px; }
.footer-link { width: min(1400px, 100%); margin: 0 auto; display: inline-flex; align-items: center; gap: 8px; color: #d3d3d3; text-decoration: none; font-size: 12px; transition: opacity 0.18s ease; }
.footer-link:hover { opacity: 0.82; text-decoration: underline; }
.x-icon { display: inline-flex; width: 14px; height: 14px; color: #f2f2f2; }
.x-icon svg { width: 100%; height: 100%; display: block; }

@keyframes pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes fadeInSoft { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@keyframes historyIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1080px) {
  .layout-grid { grid-template-columns: 1fr; }
  .panel { min-height: 0; }
  .app-footer { padding: 12px 16px 14px; }
}