:root {
  --bg: #0b1730;
  --panel: #122343;
  --text: #e8eefc;
  --muted: #98a6c8;
  --running: #1ea672;
  --holding: #c4a629;
  --stopped: #5f6d8e;
  --locked: #b9691c;
  --error: #bb3948;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--text); }
.app-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #091225; position: sticky; top: 0; z-index: 5; gap: 10px; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-icon { width: 42px; height: 42px; border-radius: 10px; }
h1 { margin: 0; font-size: 20px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.toggle { font-size: 13px; color: var(--muted); }
.tabs { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; }
.tab, button, .download-link { background: #213965; color: var(--text); border: none; border-radius: 10px; padding: 10px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.tab.active, .filter-btn.active { background: #375a96; }
.tab-panel { display: none; padding: 0 16px 16px; }
.tab-panel.active { display: block; }
.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.pill, .card { background: var(--panel); border-radius: 14px; padding: 12px; }
.pill-key { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.pill-val { font-weight: bold; }
.slot-card { margin-bottom: 12px; border-left: 6px solid var(--stopped); }
.slot-running { border-left-color: var(--running); }
.slot-holding { border-left-color: var(--holding); }
.slot-stopped { border-left-color: var(--stopped); }
.slot-locked { border-left-color: var(--locked); }
.slot-error { border-left-color: var(--error); }
.row { padding: 4px 0; }
.subtle { color: var(--muted); font-size: 13px; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.controls.compact { margin-top: 0; }
.danger { background: #8f2232; }
.list { display: grid; gap: 8px; }
.list-item { background: rgba(255,255,255,0.04); padding: 10px; border-radius: 10px; word-break: break-word; }
.pin-panel { margin-top: 8px; }
input, textarea { margin-top: 6px; width: 100%; padding: 12px; border-radius: 10px; border: none; }
.market-runtime, #systemStatus { margin-bottom: 12px; }
.market-grid, .detail-grid, .signal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.market-item { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px; }
.market-item.compact { padding: 8px; }
.market-label { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.market-value { font-weight: bold; word-break: break-word; }
.countdown-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.countdown-card { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px; }
.panel-grid { display: grid; gap: 12px; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 12px; margin-right: 6px; margin-bottom: 6px; }
.badge.ok { background: rgba(30,166,114,0.25); }
.badge.warn { background: rgba(196,166,41,0.25); }
.badge.err { background: rgba(187,57,72,0.3); }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.modal.hidden { display: none; }
.modal-card { width: min(720px, 100%); max-height: 85vh; overflow: auto; background: #10213e; border-radius: 16px; padding: 14px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.slot-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.small { font-size: 12px; color: var(--muted); }
.line-label { color: var(--muted); display: inline-block; min-width: 112px; }
.line-value { font-weight: bold; word-break: break-word; }
.subtle-row { opacity: 0.9; }
.timeline-wrap { margin-top: 8px; }
.timeline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; margin-bottom: 8px; }
.download-link { justify-content: center; }
@media (min-width: 768px) {
  main { max-width: 980px; margin: 0 auto; }
  .panel-grid { grid-template-columns: repeat(2, 1fr); }
}