:root {
  --bg: #0f172a; --bg-2: #1e293b; --bg-3: #334155;
  --text: #f1f5f9; --text-dim: #94a3b8; --border: #334155;
  --accent: #8b5cf6; --success: #10b981; --warn: #f59e0b; --danger: #ef4444;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 13px; min-height: 100vh; }
.hidden { display: none !important; }

/* Login */
.screen { min-height: 100vh; display: flex; flex-direction: column; }
#login-screen { align-items: center; justify-content: center; }
.login-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: min(380px, 90vw); display: flex; flex-direction: column; gap: 12px; }
.login-box .logo { font-size: 20px; font-weight: 800; color: var(--accent); text-align: center; }
.login-box .subtitle { text-align: center; color: var(--text-dim); margin-bottom: 12px; font-size: 12px; }
.login-box input { background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; color: var(--text); font-size: 13px; }
.login-box button { background: var(--accent); color: #fff; border: 0; padding: 10px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.login-box .err { color: var(--danger); font-size: 12px; min-height: 16px; }

/* App */
.header { background: var(--bg-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 16px; height: 52px; }
.logo { font-weight: 800; color: var(--accent); font-size: 14px; }
.chip { background: rgba(139, 92, 246, .15); color: #c4b5fd; padding: 3px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; border: 1px solid rgba(139, 92, 246, .3); }
.tabs { display: flex; margin-left: auto; gap: 4px; }
.tab { padding: 8px 14px; cursor: pointer; color: var(--text-dim); font-size: 12px; font-weight: 500; border-bottom: 2px solid transparent; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.logout { background: var(--bg-3); border: 0; color: var(--text); padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 11px; }
.logout:hover { background: var(--danger); color: #fff; }

.main { padding: 24px; max-width: 1200px; margin: 0 auto; width: 100%; }
.pane { display: none; }
.pane.active { display: block; }
.pane h2 { font-size: 16px; margin-bottom: 14px; }
.hint { color: var(--text-dim); font-size: 12px; margin-bottom: 12px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.form-grid label { display: flex; flex-direction: column; font-size: 11px; text-transform: uppercase; color: var(--text-dim); gap: 4px; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea, .pane > label > input, textarea#bulk-json {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; color: var(--text); font-size: 13px; font-family: inherit;
}
textarea#bulk-json { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; margin-bottom: 10px; }
.pane > label { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; margin-bottom: 12px; font-size: 12px; color: var(--text-dim); }
.pane > label input { min-width: 200px; }

button { background: var(--bg-3); color: var(--text); border: 0; padding: 8px 14px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
button:hover { background: var(--accent); color: #fff; }
button.primary { background: var(--accent); color: #fff; }

.result { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 12px; font-family: ui-monospace, monospace; font-size: 11px; margin-top: 12px; white-space: pre-wrap; max-height: 200px; overflow: auto; }
.result.ok { border-color: var(--success); }
.result.err { border-color: var(--danger); }

.scenario-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.scenario-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.scenario-card h3 { font-size: 14px; margin-bottom: 6px; color: var(--accent); }
.scenario-card .desc { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; line-height: 1.4; }
.scenario-card .meta { font-size: 10px; color: var(--text-dim); margin-bottom: 10px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
.data-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-dim); font-size: 10px; text-transform: uppercase; }
.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.data-table .empty { text-align: center; color: var(--text-dim); padding: 30px; }
.data-table .badge { padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.badge-running { background: rgba(245,158,11,.2); color: #fcd34d; }
.badge-completed { background: rgba(16,185,129,.2); color: #6ee7b7; }
.badge-stopped { background: rgba(148,163,184,.2); color: #cbd5e1; }
.badge-p1 { background: rgba(239,68,68,.2); color: #fca5a5; }
.badge-p2 { background: rgba(245,158,11,.2); color: #fcd34d; }
.badge-p3 { background: rgba(59,130,246,.2); color: #93c5fd; }
.badge-p4 { background: rgba(148,163,184,.2); color: #cbd5e1; }