:root {
  color-scheme:light;
  --canvas:#f3f4f5;
  --rail:#eef3f8;
  --paper:#fff;
  --ink:#1c242d;
  --muted:#526071;
  --line:#e0e6ee;
  --blue:#1458bd;
  --blue-dark:#124795;
  --blue-pale:#edf5ff;
  --green:#136b46;
  --green-pale:#e9f7ef;
  --amber:#80521b;
  --amber-pale:#fff3df;
  --red:#8b343d;
  --red-pale:#faebef;
  --shadow:0 4px 16px #1e334010;
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after { box-sizing:border-box }
body { margin:0; color:var(--ink); background:var(--canvas) }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,[tabindex="-1"]:focus-visible { outline:3px solid #4384dc; outline-offset:3px }
h1,h2,p,dl,dd { margin:0 }
svg { width:19px; height:19px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
[hidden] { display:none !important }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip { position:fixed; top:8px; left:8px; z-index:2; transform:translateY(-200%); background:var(--paper); padding:8px 12px; color:var(--blue) }
.skip:focus { transform:none }
.frame { display:grid; grid-template-columns:206px minmax(0,1fr); min-height:100vh }
.rail { position:sticky; top:0; height:100vh; height:100dvh; display:flex; flex-direction:column; gap:27px; background:var(--rail); border-right:1px solid white; padding:20px 12px }
.brand { display:flex; align-items:center; gap:9px; padding-inline:5px; font-size:16px; font-weight:750; letter-spacing:-.025em; white-space:nowrap }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; background:#dceaff; color:var(--blue); border-radius:9px; flex:none }
.rail-label { color:var(--muted); font-size:12px; font-weight:650; padding:0 11px 6px }
.nav-item { display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:7px 11px; border:1px solid transparent; border-radius:99px; background:transparent; text-align:left; font-size:14px }
.nav-item[aria-current] { background:#f8fbff; border-color:white; box-shadow:0 3px 9px #243b5110; font-weight:700 }
.nav-item:hover { background:white }
.nav-item svg { width:18px; height:18px }
.rail-foot { margin-top:auto; background:#f8fbff; border:1px solid white; border-radius:14px; padding:9px 11px; color:var(--muted); font-size:12px }
.mode { display:inline-flex; align-items:center; gap:7px; color:var(--blue-dark); font-size:12px; font-weight:690; white-space:nowrap }
.dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none }
.content { min-width:0 }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:60px; padding:8px clamp(14px,2vw,28px); border-bottom:1px solid #eaedf0; background:var(--paper) }
.topbar-title { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:740; letter-spacing:-.02em }
.topbar-title svg { color:var(--muted); width:18px; height:18px }
.access { display:flex; align-items:center; gap:14px }
main { max-width:1920px; margin:auto; padding:16px clamp(14px,2vw,28px) 30px }
.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:10px 12px; border:1px solid #ecf0f2; border-radius:20px; background:var(--paper); box-shadow:var(--shadow) }
.run-controls { display:flex; align-items:center; flex-wrap:wrap; gap:6px; width:100%; padding-bottom:9px; border-bottom:1px solid var(--line) }
.run-status { display:inline-flex; align-items:center; gap:6px; margin-left:4px; padding:5px 9px; border-radius:99px; color:var(--muted); background:var(--canvas); font-size:12px; font-weight:700 }
.run-status[data-mode="running"] { color:var(--green); background:var(--green-pale) }
.run-status[data-mode="paused"] { color:var(--amber); background:var(--amber-pale) }
.run-hint { margin-bottom:12px; color:var(--muted); font-size:13px }
.controls { display:flex; align-items:center; flex:1 1 300px; gap:8px }
.search { position:relative; display:flex; align-items:center; flex:1; max-width:330px; min-width:0 }
.search svg { position:absolute; left:11px; color:var(--muted); pointer-events:none; width:16px; height:16px }
input,select,textarea { min-height:38px; background:#f9fafc; border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:13px }
input[type=search] { width:100%; padding-left:34px }
input::placeholder { color:var(--muted); opacity:1 }
.btn { display:inline-flex; min-height:38px; align-items:center; justify-content:center; gap:7px; padding:7px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); font-size:13px; font-weight:680 }
.btn:hover { background:var(--blue-pale); border-color:#cbdcf4 }
.btn svg { width:16px; height:16px }
.btn.primary { background:var(--blue); border-color:var(--blue); color:white }
.btn.primary:hover { background:var(--blue-dark) }
.btn:disabled { cursor:default; color:#657384; background:#f4f6f8; border-color:var(--line) }
.settings-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); align-items:start; gap:14px; max-width:1180px }
.settings-card { min-width:0; padding:20px; border:1px solid #ecf0f2; border-radius:20px; background:var(--paper); box-shadow:var(--shadow) }
.settings-card h2 { margin-bottom:4px; font-size:19px; letter-spacing:-.02em }
.connection-card { grid-column:1 / -1 }
.connection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.connection-form { display:grid; align-content:start; gap:8px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:12px }
.connection-form .btn { justify-self:start }
.connection-form .settings-note { margin:0 }
@media(max-width:800px) { .connection-grid { grid-template-columns:minmax(0,1fr) } }
.settings-note { margin-bottom:14px; color:var(--muted); font-size:13px }
.settings-form { display:grid; gap:10px }
.settings-field { display:grid; gap:4px; font-size:13px; font-weight:650 }
.settings-field input,.settings-field textarea,.settings-field select { width:100%; min-width:0; font-weight:400 }
.settings-field textarea { min-height:112px; resize:vertical }
.settings-field [aria-invalid="true"] { border-color:var(--red) }
.settings-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px }
.file-picker { position:relative; display:inline-flex; max-width:100% }
.file-picker:focus-within .btn { outline:3px solid #4384dc; outline-offset:3px }
.file-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer }
.settings-status { color:var(--muted); font-size:13px; min-height:1.4em; overflow-wrap:anywhere }
.settings-status.error { color:var(--red) }
.settings-status[data-result="ok"] { color:var(--green) }
.key-check-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; align-items:end }
.key-check-row .settings-status { grid-column:1 / -1 }
.key-check-row .settings-status:empty { display:none }
.import-feedback { padding:9px 11px; border-radius:10px; background:var(--blue-pale); font-size:13px }
.import-feedback ul { margin:5px 0 0; padding-left:19px; overflow-wrap:anywhere }
.saved-list { margin-top:15px; padding-top:12px; border-top:1px solid var(--line) }
.saved-list h3 { margin:0 0 6px; font-size:14px }
.saved-list ul { margin:0; padding:0; max-height:220px; overflow:auto; list-style:none }
.saved-list li { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px solid var(--line) }
.saved-list code { font-size:12px; overflow-wrap:anywhere }
.saved-list .btn { flex:none }
.batch-results { max-height:360px; overflow:auto; border:1px solid var(--line); border-radius:10px; background:#f9fafc }
.batch-results ul { margin:0; padding:0; list-style:none }
.batch-results li { display:grid; gap:3px; padding:8px 10px; font-size:13px; overflow-wrap:anywhere }
.batch-results li + li { border-top:1px solid var(--line) }
.batch-results code { color:var(--muted) }
.batch-results [data-result="ok"] strong { color:var(--green) }
.batch-results [data-result="error"] strong { color:var(--red) }
@media(max-width:1070px) { .settings-layout { grid-template-columns:minmax(0,1fr) } }
.queue-summary { display:flex; align-items:center; flex-wrap:wrap; gap:7px 12px; margin:12px 0; min-height:35px }
.metrics { display:flex; flex-wrap:wrap; gap:6px }
.metric { display:flex; align-items:center; gap:6px; min-height:32px; background:transparent; border:1px solid transparent; border-radius:99px; padding:4px 8px; text-align:left; color:var(--muted); font-size:12px; font-weight:650 }
.metric:hover,.metric[aria-pressed="true"] { border-color:#d0dff4; background:var(--blue-pale); color:var(--blue-dark) }
.metric strong { color:var(--ink); font-variant-numeric:tabular-nums }
.count { margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap }
.queue { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; gap:12px; padding:0; margin:0; list-style:none }
.queue li { min-width:0 }
.task { display:flex; flex-direction:column; width:100%; height:100%; min-height:257px; gap:15px; text-align:left; padding:17px 15px 13px; border:1px solid #edf0f2; border-radius:22px; background:var(--paper); box-shadow:var(--shadow) }
.task:hover,.task[aria-expanded="true"] { border-color:#a8c7f1; box-shadow:0 5px 18px #184c8120 }
.task-title { display:flex; align-items:flex-start; gap:8px; font-size:15px; font-weight:750; line-height:1.32; letter-spacing:-.018em; overflow-wrap:anywhere }
.task-title svg { width:17px; height:17px; color:#687789 }
.task-rows { display:grid; width:100%; gap:11px }
.task-row { display:grid; grid-template-columns:19px minmax(0,1fr); gap:8px; align-items:center; color:var(--ink); font-size:13px }
.task-row svg { width:16px; height:16px; color:#69798a }
.task-row .badge { justify-self:start }
.task-id { color:var(--blue); font-weight:700 }
.task-footer { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:auto; padding-top:8px; color:var(--blue); font-size:12px; font-weight:700 }
.more { color:#687789; font-size:19px; line-height:1 }
.card-timer { color:var(--amber); font-weight:680; font-variant-numeric:tabular-nums }
.card-timer.expired { color:var(--red) }
.badge { display:inline-flex; align-items:center; gap:5px; max-width:100%; border-radius:99px; background:#eef1f5; color:#475463; padding:4px 7px; font-size:11px; line-height:1.25; font-weight:700 }
.badge.review { background:var(--amber-pale); color:var(--amber) }
.badge.waiting { background:var(--blue-pale); color:var(--blue-dark) }
.badge.done { background:var(--green-pale); color:var(--green) }
.badge.returned { background:var(--red-pale); color:var(--red) }
.empty { padding:30px 16px; text-align:center; background:var(--paper); border-radius:20px; color:var(--muted); font-size:14px }
.empty strong { display:block; color:var(--ink); margin-bottom:4px; font-size:16px }
.empty .btn { margin-top:10px }
dialog { width:min(430px,calc(100% - 28px)); border:1px solid var(--line); border-radius:20px; color:var(--ink); background:var(--paper); padding:20px; box-shadow:0 12px 40px #172e4940 }
dialog::backdrop { background:#1e35464d }
dialog h2 { font-size:22px; line-height:1.25; letter-spacing:-.027em }
#dialog p { margin:7px 0 14px; color:var(--muted); font-size:14px }
.dialog-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end }
.drawer { position:fixed; inset:0 0 0 auto; width:min(470px,100%); max-width:100%; height:100vh; height:100dvh; max-height:100%; margin:0; padding:17px 19px; border-radius:20px 0 0 20px; overflow:auto }
.drawer-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:13px; margin-bottom:15px; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:690 }
.details-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:14px }
.eyebrow { color:var(--blue); font-size:12px; font-weight:750; margin-bottom:3px }
.timer,.notice { padding:9px 11px; margin-bottom:12px; border:1px solid #ebd7b4; border-radius:11px; background:#fff7e9; color:#704208 }
.timer { display:flex; justify-content:space-between; align-items:center; gap:10px }
.timer-label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:680 }
.timer svg { width:16px; height:16px }
.timer strong { white-space:nowrap; font-variant-numeric:tabular-nums }
.timer.expired,.notice.returned { background:var(--red-pale); border-color:#efd4da; color:var(--red) }
.notice { font-size:13px; background:var(--blue-pale); border-color:#dbe9fb; color:var(--blue-dark) }
.notice.done { background:var(--green-pale); border-color:#d6ebde; color:var(--green) }
.data { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-bottom:12px }
.data > div { padding:9px; min-width:0 }
.data > div:nth-child(even) { border-left:1px solid var(--line) }
.data > div:nth-child(n+3) { border-top:1px solid var(--line) }
.data dt { font-size:12px; color:var(--muted) }
.data dd { font-size:14px; font-weight:670; overflow-wrap:anywhere }
.data dd.with-copy { display:flex; align-items:center; gap:6px }
.copy { display:inline-grid; place-items:center; flex:none; width:36px; height:34px; border:0; border-radius:7px; background:var(--blue-pale); color:var(--blue) }
.copy:hover { background:#dceaff }
.copy svg { width:16px; height:16px }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px }
.history { border-top:1px solid var(--line); margin-top:14px; padding-top:9px }
.history summary { color:var(--muted); cursor:pointer; font-size:13px; font-weight:700 }
.history ol { display:grid; gap:6px; margin:7px 0 0; padding-left:19px; color:var(--muted); font-size:13px }
.history time { margin-left:4px; font-variant-numeric:tabular-nums }
.toast { position:fixed; bottom:15px; right:15px; z-index:2; max-width:calc(100% - 30px); background:#24364f; color:white; border-radius:10px; padding:9px 12px; font-size:13px; box-shadow:var(--shadow) }
noscript { display:block; padding:14px; text-align:center; background:var(--amber-pale); color:var(--amber) }
@media(max-width:1210px) { .queue { grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media(max-width:1020px) {
  .frame { grid-template-columns:164px minmax(0,1fr) }
  .rail { padding-inline:8px }
  .queue { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media(max-width:760px) {
  .frame { display:block }
  .rail { position:static; height:auto; flex-direction:row; justify-content:space-between; align-items:center; padding:8px 12px; gap:5px }
  .rail-label,.rail-foot { display:none }
  .rail nav { display:flex; flex-wrap:wrap; justify-content:flex-end }
  .rail .nav-item svg { display:none }
  .rail #help svg { display:block }
  .rail #help span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  .nav-item { width:auto; min-height:44px; font-size:12px; padding:6px 8px }
  .topbar { min-height:48px }
  .queue { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
  .task { padding:12px 10px 10px; min-height:210px; gap:11px; border-radius:16px }
  .task-rows { gap:8px }
  .task-row { gap:5px }
  .btn,input,select { min-height:44px }
  .copy { width:44px; height:44px }
  .history summary { min-height:44px; padding-block:11px }
}
@media(max-width:410px) {
  main,.topbar { padding-inline:9px }
  .topbar-title svg { display:none }
  .access { gap:6px }
  .access .btn { padding-inline:6px }
  .toolbar { padding:8px }
  .controls { flex-wrap:wrap }
  .search { flex:1 1 145px }
  .task-title { font-size:14px; gap:4px }
  .task-row { font-size:12px }
  .drawer { border-radius:0 }
  .settings-card { padding:13px }
  .rail .brand { font-size:14px; gap:5px }
  .rail .brand-mark { width:28px; height:28px }
}
a.nav-item { color:inherit; text-decoration:none }
h1,h2,h3 { margin-top:0 }
.login-wrap { max-width:440px; margin:9vh auto 0 }
.login-wrap h1 { margin:16px 0 }
.narrow { max-width:720px }
.admin-section + .admin-section { margin-top:14px }
.admin-section h2 { margin-bottom:12px }
.connection-form h3 { margin-bottom:0 }
.connection-form p { min-height:1.45em }
.operator-form { align-items:end }
.table-wrap { overflow:auto; margin-top:12px }
table { width:100%; border-collapse:collapse; text-align:left; font-size:14px }
td,th { padding:9px 7px; border-bottom:1px solid var(--line); white-space:nowrap }
td:last-child { white-space:normal }
.feedback,.messages li { padding:9px 11px; border-radius:9px; background:var(--blue-pale); margin:8px 0 }
.messages { padding:0; list-style:none }
.feedback.error,.messages .error { background:var(--red-pale); color:var(--red) }
.messages .success { background:var(--green-pale); color:var(--green) }
.task-caption { color:var(--muted); font-size:13px; display:grid; gap:8px }
.drawer h2 { margin-bottom:5px }
.drawer .timer { margin-top:9px }
.drawer .actions { margin-top:12px }
#task-actions:empty { display:none }
@media(max-width:760px) {
  .rail { flex-wrap:wrap }
  .rail nav { justify-content:flex-start }
  .rail .nav-item[aria-current] { display:flex }
}