:root {
  --ops-bg: #071019;
  --ops-panel: #0d1924;
  --ops-panel-2: #122230;
  --ops-line: rgba(150, 185, 210, .16);
  --ops-text: #edf6fb;
  --ops-muted: #8da7b8;
  --ops-cyan: #53d5dc;
  --ops-blue: #4d8ef7;
  --ops-green: #5bd49a;
  --ops-amber: #f5ba5c;
  --ops-red: #ff6f7d;
}

.main { max-width: none; padding: 0; }
.ops-shell { min-height: 100vh; padding: 42px; color: var(--ops-text); background: radial-gradient(circle at 85% 0, #12364a 0, transparent 35%), var(--ops-bg); }
.ops-header, .ops-toolbar, .ops-header-actions, .ops-login-row, .ops-meta-row, .ops-action-row { display: flex; align-items: center; }
.ops-header { justify-content: space-between; gap: 30px; margin: 0 auto 28px; max-width: 1600px; }
.ops-header h1 { margin: 3px 0 8px; font-size: clamp(2.2rem, 4vw, 4.5rem); letter-spacing: -.05em; }
.ops-header p, .ops-login p { color: var(--ops-muted); max-width: 720px; }
.ops-eyebrow { margin: 0; color: var(--ops-cyan) !important; font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
.ops-header-actions { gap: 10px; }
.ops-connection { padding: 8px 12px; border: 1px solid var(--ops-line); border-radius: 999px; color: var(--ops-muted); font-size: .78rem; }
.ops-connection.live { color: var(--ops-green); border-color: rgba(91,212,154,.4); }
.ops-button { border: 0; border-radius: 8px; padding: 10px 15px; color: #061018; background: var(--ops-cyan); font-weight: 800; cursor: pointer; }
.ops-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ops-button:disabled { opacity: .45; cursor: wait; transform: none; }
.ops-button-secondary { color: white; background: var(--ops-blue); }
.ops-button-ghost { color: var(--ops-muted); border: 1px solid var(--ops-line); background: transparent; }
.ops-button-danger { color: white; background: #b43e4d; }

.ops-login { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: 920px; margin: 8vh auto; padding: 38px; border: 1px solid var(--ops-line); border-radius: 16px; background: rgba(13,25,36,.92); box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.ops-login h2 { margin: 5px 0; font-size: 2rem; }
.ops-login form { align-self: center; }
.ops-login label { display: block; margin-bottom: 8px; color: var(--ops-muted); font-size: .82rem; }
.ops-login-row { gap: 10px; }
.ops-login input, .ops-filters input, .ops-filters select { width: 100%; border: 1px solid var(--ops-line); border-radius: 8px; padding: 11px 13px; color: white; background: #08131d; }
.ops-error { color: var(--ops-red) !important; }

.ops-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1600px; margin: 0 auto 18px; }
.ops-metrics article { padding: 18px 20px; border: 1px solid var(--ops-line); border-radius: 12px; background: linear-gradient(145deg, rgba(18,34,48,.95), rgba(10,22,32,.95)); }
.ops-metrics span { color: var(--ops-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; }
.ops-metrics strong { display: block; margin-top: 6px; font-size: 2rem; }

.ops-workspace { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(360px, .75fr); gap: 18px; max-width: 1600px; margin: auto; }
.ops-list-panel, .ops-detail { min-height: 620px; border: 1px solid var(--ops-line); border-radius: 14px; background: rgba(13,25,36,.94); overflow: hidden; }
.ops-toolbar { justify-content: space-between; gap: 20px; padding: 22px; border-bottom: 1px solid var(--ops-line); }
.ops-toolbar h2 { margin: 2px 0 0; }
.ops-filters { display: grid; grid-template-columns: minmax(220px, 1fr) 150px; gap: 10px; min-width: min(480px, 55%); }
.ops-table-wrap { overflow-x: auto; }
.ops-table { width: 100%; border-collapse: collapse; }
.ops-table th { padding: 13px 16px; color: var(--ops-muted); background: #09141e; font-size: .7rem; text-align: left; text-transform: uppercase; letter-spacing: .09em; }
.ops-table td { padding: 15px 16px; border-top: 1px solid var(--ops-line); vertical-align: middle; }
.ops-table tbody tr { cursor: pointer; }
.ops-table tbody tr:hover, .ops-table tbody tr.selected { background: rgba(83,213,220,.07); }
.ops-job-title { max-width: 390px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-job-id { margin-top: 4px; color: var(--ops-muted); font: .68rem ui-monospace, monospace; }
.ops-badge { display: inline-block; padding: 5px 8px; border-radius: 999px; font-size: .69rem; font-weight: 800; background: rgba(77,142,247,.16); color: #8db8ff; }
.ops-badge.completed { color: var(--ops-green); background: rgba(91,212,154,.12); }
.ops-badge.failed { color: var(--ops-red); background: rgba(255,111,125,.12); }
.ops-badge.cancelled { color: var(--ops-muted); background: rgba(141,167,184,.12); }
.ops-progress { width: 100px; height: 6px; border-radius: 99px; background: #071019; overflow: hidden; }
.ops-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--ops-blue), var(--ops-cyan)); }
.ops-empty, .ops-detail-placeholder { padding: 60px 20px; color: var(--ops-muted); text-align: center; }
.ops-detail-placeholder span { font-size: 2rem; color: var(--ops-cyan); }

.ops-detail-content { padding: 24px; }
.ops-detail h2 { margin: 5px 0 8px; font-size: 1.55rem; line-height: 1.15; }
.ops-detail-sub { color: var(--ops-muted); font: .72rem ui-monospace, monospace; overflow-wrap: anywhere; }
.ops-stage { margin: 20px 0; padding: 15px; border: 1px solid var(--ops-line); border-radius: 10px; background: var(--ops-panel-2); }
.ops-meta { display: grid; gap: 1px; margin: 18px 0; border: 1px solid var(--ops-line); border-radius: 10px; overflow: hidden; background: var(--ops-line); }
.ops-meta-row { justify-content: space-between; gap: 15px; padding: 10px 12px; background: var(--ops-panel); }
.ops-meta-row span { color: var(--ops-muted); font-size: .76rem; }
.ops-meta-row strong { font-size: .8rem; text-align: right; overflow-wrap: anywhere; }
.ops-detail video { width: 100%; border-radius: 10px; background: black; }
.ops-action-row { flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.ops-section-title { margin: 24px 0 10px; font-size: .75rem; letter-spacing: .12em; color: var(--ops-cyan); }
.ops-script { max-height: 160px; padding: 12px; overflow: auto; color: #c1d2dc; border-radius: 8px; background: #08131d; font-size: .78rem; white-space: pre-wrap; }
.ops-scenes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ops-scene { border: 1px solid var(--ops-line); border-radius: 8px; overflow: hidden; background: #08131d; }
.ops-scene img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.ops-scene p { margin: 8px; color: var(--ops-muted); font-size: .68rem; }
.ops-alert { padding: 11px; border-left: 3px solid var(--ops-red); color: #ffd5d9; background: rgba(255,111,125,.08); font-size: .78rem; }
.ops-toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 380px; padding: 13px 16px; border-radius: 9px; color: white; background: #1b3445; box-shadow: 0 10px 40px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s; }
.ops-toast.show { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .ops-shell { padding: 24px; }
  .ops-workspace { grid-template-columns: 1fr; }
  .ops-detail { min-height: 300px; }
}
@media (max-width: 700px) {
  .ops-shell { padding: 18px 12px; }
  .ops-header, .ops-login { grid-template-columns: 1fr; display: grid; }
  .ops-header-actions { flex-wrap: wrap; }
  .ops-metrics { grid-template-columns: repeat(2, 1fr); }
  .ops-toolbar { align-items: stretch; flex-direction: column; }
  .ops-filters { min-width: 0; grid-template-columns: 1fr; }
  .ops-scenes { grid-template-columns: 1fr; }
}