@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #09090b; --surface: #18181b; --surface2: #27272a;
  --surface3: #3f3f46; --border: #27272a; --border-hover: #3f3f46;
  --text: #fafafa; --text-2: #a1a1aa; --text-3: #71717a;
  --brand: #8b5cf6; --brand-dim: rgba(139,92,246,0.12);
  --green: #22c55e; --green-dim: rgba(34,197,94,0.1);
  --red: #ef4444; --red-dim: rgba(239,68,68,0.1);
  --amber: #eab308; --amber-dim: rgba(234,179,8,0.1);
  --cyan: #06b6d4; --cyan-dim: rgba(6,182,212,0.1);
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --r: 8px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }

.shell { max-width: 1060px; margin: 0 auto; padding: 28px 24px 80px; }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.topbar-left { display: flex; align-items: center; gap: 12px; }
.logo { width: 36px; height: 36px; background: var(--brand); border-radius: 10px; display: grid; place-items: center; font-size: 18px; }
.topbar h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; }
.topbar h1 em { font-style: normal; color: var(--brand); }
.ver { font-size: 11px; color: var(--text-3); background: var(--surface2); padding: 2px 8px; border-radius: 4px; font-weight: 500; }

.nav { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.nav-btn { background: none; border: none; color: var(--text-3); font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; position: relative; }
.nav-btn:hover { color: var(--text-2); }
.nav-btn.on { color: var(--text); border-bottom-color: var(--brand); }
.nav-badge { font-size: 10px; background: var(--brand); color: #fff; padding: 1px 6px; border-radius: 10px; margin-left: 6px; font-weight: 600; }
.nav-badge.live { background: var(--green); }
.pane { display: none; } .pane.on { display: block; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); margin-bottom: 5px; letter-spacing: .3px; }
.field input, .field textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); font-family: var(--mono); font-size: 13px; padding: 9px 12px; outline: none; transition: border-color .15s; }
.field input:focus, .field textarea:focus { border-color: var(--brand); }
.field textarea { resize: vertical; min-height: 56px; }
.field .hint { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.tip { background: var(--brand-dim); border: 1px solid rgba(139,92,246,0.18); border-radius: var(--r); padding: 12px 16px; margin-bottom: 18px; font-size: 12px; line-height: 1.6; color: var(--text-2); }
.tip code { background: var(--surface2); padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 11px; color: var(--text); }
.tip strong { color: var(--text); }

.preview { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--text-3); max-height: 180px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; margin-bottom: 16px; display: none; }
.preview.vis { display: block; }

.b { font-family: var(--sans); font-size: 13px; font-weight: 600; border: none; border-radius: 6px; padding: 8px 16px; cursor: pointer; transition: .12s; display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.b:disabled { opacity: .35; cursor: not-allowed; }
.b-brand { background: var(--brand); color: #fff; }
.b-brand:hover:not(:disabled) { filter: brightness(1.12); }
.b-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.b-ghost:hover:not(:disabled) { border-color: var(--border-hover); color: var(--text); }
.b-green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,0.2); }
.b-amber { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(234,179,8,0.2); }
.b-red { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.15); }
.b-cyan { background: var(--cyan-dim); color: var(--cyan); border: 1px solid rgba(6,182,212,0.2); }
.b-xs { font-size: 11px; padding: 5px 10px; border-radius: 5px; }

.jobs { display: flex; flex-direction: column; gap: 10px; }
.jc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color .15s; }
.jc:hover { border-color: var(--border-hover); }
.jc-top { padding: 14px 18px 0; display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.jc-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.jc-url { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
.jc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.jc-time { font-size: 11px; color: var(--text-3); font-family: var(--mono); }

.badge { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 10px; text-transform: uppercase; letter-spacing: .5px; }
.badge-idle { background: var(--surface2); color: var(--text-3); }
.badge-running { background: var(--green-dim); color: var(--green); }
.badge-stopping { background: var(--amber-dim); color: var(--amber); }
.badge-stopped { background: var(--amber-dim); color: var(--amber); }
.badge-done { background: var(--cyan-dim); color: var(--cyan); }
.badge-failed { background: var(--red-dim); color: var(--red); }

.jc-stats { display: flex; gap: 18px; padding: 10px 18px; }
.jc-s { font-size: 12px; color: var(--text-3); }
.jc-s b { color: var(--text); font-weight: 600; }

.jc-bar { height: 3px; background: var(--surface2); }
.jc-bar-fill { height: 100%; background: var(--brand); transition: width .4s ease; }
.jc-bar-fill.done { background: var(--cyan); }
.jc-bar-fill.fail { background: var(--red); }

.jc-actions { display: flex; gap: 6px; padding: 10px 18px 14px; flex-wrap: wrap; align-items: center; }
.jc-actions .sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

/* ─── Multi-URL tag ─── */
.multi-tag { display: inline-block; font-size: 11px; color: var(--brand); background: var(--brand-dim); border: 1px solid rgba(139,92,246,0.2); border-radius: 5px; padding: 3px 10px; margin: 8px 18px 0; font-weight: 500; }

/* ─── Batch Preview Table ─── */
.batch-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 16px; max-height: 260px; overflow-y: auto; }
.b-preview-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.b-preview-head span { font-size: 12px; font-weight: 600; color: var(--brand); }
.b-table { width: 100%; border-collapse: collapse; }
.b-table th { text-align: left; font-size: 11px; color: var(--text-3); font-weight: 500; padding: 6px 14px; border-bottom: 1px solid var(--border); }
.b-table td { font-size: 11px; font-family: var(--mono); color: var(--text-2); padding: 5px 14px; border-bottom: 1px solid rgba(39,39,42,0.5); }
.b-table tr:last-child td { border-bottom: none; }
.b-table td:first-child { color: var(--brand); font-weight: 600; width: 40px; }

/* ─── Enricher section ─── */
.e-section { border-top: 1px solid var(--border); padding: 10px 18px 14px; background: rgba(139,92,246,0.02); }
.e-stats { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.e-stat { font-size: 12px; color: var(--text-3); }
.e-stat b { color: var(--text); font-weight: 600; }
.enriched-count b { color: var(--green); }
.e-badge { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: .4px; margin-left: auto; }
.e-badge-idle { background: var(--surface2); color: var(--text-3); }
.e-badge-running { background: var(--green-dim); color: var(--green); }
.e-badge-stopping { background: var(--amber-dim); color: var(--amber); }
.e-badge-stopped { background: var(--amber-dim); color: var(--amber); }
.e-badge-done { background: var(--cyan-dim); color: var(--cyan); }
.e-badge-failed { background: var(--red-dim); color: var(--red); }
.e-bar { height: 2px; background: var(--surface2); border-radius: 1px; margin-bottom: 10px; }
.e-bar-fill { height: 100%; background: var(--brand); border-radius: 1px; transition: width .4s ease; }
.e-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.e-label { font-size: 11px; font-weight: 600; color: var(--text-3); margin-bottom: 8px; letter-spacing: .3px; text-transform: uppercase; }
.e-section + .e-section { border-top: 1px solid var(--border); }
.b-brand-sm { background: var(--brand-dim); color: var(--brand); border: 1px solid rgba(139,92,246,0.2); }
.b-brand-sm:hover { background: rgba(139,92,246,0.18); }

/* ─── Modals ─── */
.modal-bg { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); justify-content: center; align-items: center; padding: 24px; }
.modal-bg.on { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 860px; max-height: 82vh; display: flex; flex-direction: column; }
.modal-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { font-size: 14px; font-weight: 600; }
.modal-body { flex: 1; overflow-y: auto; padding: 14px 20px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; white-space: pre-wrap; color: var(--text-2); }

.set-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.empty { text-align: center; padding: 60px 20px; color: var(--text-3); }
.empty .ic { font-size: 40px; margin-bottom: 10px; opacity: .5; }
.empty p { font-size: 13px; }

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.dot-live { background: var(--green); animation: blink 1.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }

.collapse-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-3); font-size: 12px; padding: 7px 12px; cursor: pointer; width: 100%; text-align: left; display: flex; justify-content: space-between; transition: .15s; margin-bottom: 14px; }
.collapse-btn:hover { border-color: var(--border-hover); color: var(--text-2); }
.collapse-box { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.collapse-box.open { max-height: 300px; }

@media (max-width: 640px) { .row3 { grid-template-columns: 1fr; } .jc-stats { flex-wrap: wrap; gap: 10px; } }