*{box-sizing:border-box}
:root{--bg:#f3f5f9;--panel:#fff;--panel2:#f7f9fc;--text:#172033;--muted:#667085;--line:#e4e8f0;--pri:#2563eb;--pri2:#1d4ed8;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--sh:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05);--r:12px;--logbg:#0b1220;color-scheme:light}
@media(prefers-color-scheme:dark){:root[data-theme=auto]{--bg:#0f1420;--panel:#171d2b;--panel2:#1c2333;--text:#e6e9f2;--muted:#9aa4b8;--line:#2a3347;--pri:#4f8cff;--pri2:#6aa0ff;--sh:0 1px 3px rgba(0,0,0,.4);--logbg:#080c14;color-scheme:dark}}
:root[data-theme=dark]{--bg:#0f1420;--panel:#171d2b;--panel2:#1c2333;--text:#e6e9f2;--muted:#9aa4b8;--line:#2a3347;--pri:#4f8cff;--pri2:#6aa0ff;--sh:0 1px 3px rgba(0,0,0,.4);--logbg:#080c14;color-scheme:dark}
body{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column}
a{color:var(--pri)}
header{display:flex;align-items:center;gap:8px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--sh);flex-wrap:wrap;z-index:5}
.brand{display:flex;align-items:center;gap:10px}.brand b{display:block;font-size:15px}.brand small{color:var(--muted);font-size:11px}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px}
.sp{flex:1}.muted{color:var(--muted);font-size:12px}
#live{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
#live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:p 1.6s infinite}
@keyframes p{50%{opacity:.25}}
#layout{display:flex;flex:1;min-height:0}
aside{width:272px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}
aside input{margin:12px;width:calc(100% - 24px)}
#plist{overflow:auto;flex:1;padding:0 8px 12px}
.sec-t{font-size:10px;letter-spacing:.08em;color:var(--muted);padding:12px 10px 4px;font-weight:700}
.pi{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;border-radius:10px;margin-bottom:2px}
.pi:hover{background:var(--panel2)}.pi.on{background:color-mix(in srgb,var(--pri) 14%,transparent)}
.pi img,.av,.ico{width:34px;height:34px;border-radius:50%;flex:none;background:var(--line);display:inline-flex;align-items:center;justify-content:center}
.pi>div{flex:1;min-width:0}.pn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps{font-size:11px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--line)}.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.run{font-size:12px;animation:p 1s infinite}
.b{font-size:11px;padding:2px 8px;border-radius:99px;color:#fff;font-weight:700;display:inline-block}.red{background:var(--bad)}.org{background:var(--warn)}
main{flex:1;overflow:auto;padding:20px 24px}
.empty{padding:70px 20px;text-align:center;color:var(--muted);font-size:15px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.cc{background:var(--panel);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);border-top:3px solid var(--pri)}
.cc b{font-size:22px;display:block;letter-spacing:-.02em}.cc span{font-size:12px;color:var(--muted)}
.card{background:var(--panel);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;box-shadow:var(--sh)}
h2{margin:0;font-size:20px}h3{margin:0 0 10px;font-size:15px}
.note{background:color-mix(in srgb,var(--pri) 10%,transparent);border:1px solid color-mix(in srgb,var(--pri) 30%,transparent);padding:9px 12px;border-radius:10px;margin-bottom:12px;font-size:13px}
.warnbox{background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.lnk{color:var(--pri);cursor:pointer;font-weight:600}.lnk:hover{text-decoration:underline}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin-bottom:14px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
th{background:var(--panel2);cursor:pointer;white-space:nowrap;user-select:none;color:var(--muted);font-size:12px;position:sticky;top:0}
tr:last-child td{border-bottom:0}
tr[data-open]{cursor:pointer}tr[data-open]:hover td{background:var(--panel2)}
td img.th{width:42px;height:42px;object-fit:cover;border-radius:8px;vertical-align:middle}
.ph{display:flex;align-items:center;gap:14px;margin-bottom:14px}.ph img{width:52px;height:52px;border-radius:50%}
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line);overflow:auto}
button{background:var(--pri);color:#fff;border:0;border-radius:9px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap}
button:hover{filter:brightness(1.08)}button:active{transform:translateY(1px)}
button.sec{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
button.sec.on{border-color:var(--ok);color:var(--ok)}
button.danger{background:var(--bad)}button:disabled{opacity:.45;cursor:not-allowed;filter:none}
button.sm{padding:4px 10px;font-size:12px}
.tab{background:transparent;color:var(--muted);border:0;border-bottom:2px solid transparent;border-radius:0;padding:10px 14px}
.tab:hover{color:var(--text);filter:none}.tab.on{color:var(--pri);border-bottom-color:var(--pri);background:transparent}
select,input,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--text);outline:0}
select:focus,input:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 20%,transparent)}
main input:not([type=checkbox]):not([type=radio]):not(.inl),main select,main textarea,dialog input:not([type=checkbox]),dialog textarea{width:100%;margin:4px 0}
input.inl{width:auto!important;display:inline-block;margin:0 4px!important}
label{display:block;font-weight:600;margin:10px 0;flex:1;font-size:13px}
.chk{display:flex;align-items:center;gap:8px;font-weight:400;flex-wrap:wrap}.chk input{width:auto!important;margin:0!important}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.alert{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);padding:10px 14px;border-radius:10px;margin-bottom:12px;font-weight:600}
.warn{color:var(--warn);margin:6px 0}.ok{color:var(--ok)}
#drop{border:2px dashed var(--line);border-radius:var(--r);padding:30px;text-align:center;cursor:pointer;background:var(--panel2);color:var(--muted);transition:.15s}
#drop:hover,#drop.over{background:color-mix(in srgb,var(--pri) 10%,transparent);border-color:var(--pri);color:var(--text)}
#thumbs{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0;max-height:140px;overflow:auto}
#thumbs img{width:46px;height:46px;object-fit:cover;border-radius:7px}
#prevTbl{max-height:340px;overflow:auto;margin-top:8px}
.chartbox{background:var(--panel);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;box-shadow:var(--sh)}
.ct{display:flex;justify-content:space-between;font-weight:600;margin-bottom:6px}.ct span{font-weight:400;color:var(--muted);font-size:12px}
.chartbox svg{width:100%;height:150px;display:block}
progress{width:100%;height:10px;border-radius:99px;overflow:hidden;appearance:none;margin-top:8px}
progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:linear-gradient(90deg,var(--pri),#7c3aed)}
#log,#clog,#jlog{background:var(--logbg);color:#8df0a8;padding:12px;border-radius:10px;height:200px;overflow:auto;white-space:pre-wrap;font-size:12px;margin-top:8px}
dialog{border:0;border-radius:16px;width:600px;max-width:95vw;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.35);background:var(--panel);color:var(--text)}
dialog::backdrop{background:rgba(5,10,20,.55);backdrop-filter:blur(2px)}
.actions{display:flex;gap:10px;margin:12px 0;flex-wrap:wrap;align-items:center}
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:99}
.toast{background:var(--panel);color:var(--text);border-left:4px solid var(--warn);padding:11px 16px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:380px;animation:in .2s;transition:.4s}
.toast.ok{border-color:var(--ok)}.toast.err{border-color:var(--bad)}.toast.info{border-color:var(--pri)}.toast.out{opacity:0;transform:translateX(20px)}
@keyframes in{from{opacity:0;transform:translateX(20px)}}

#imsg{white-space:pre-wrap}
body.login{display:flex;align-items:center;justify-content:center;height:100vh}
.lbox{background:var(--panel);padding:30px;border-radius:16px;box-shadow:var(--sh);width:360px;max-width:92vw;display:flex;flex-direction:column;gap:12px}
.lbox .logo{width:48px;height:48px;font-size:16px}.lbox h2{margin:0}
a.btn{display:inline-block;padding:8px 14px;border-radius:9px;font-weight:600;text-decoration:none;color:var(--text)}
.chip{font-size:12px;padding:3px 10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line)}
.chip.ok{color:var(--ok);border-color:var(--ok)}.chip.warn{color:var(--warn);border-color:var(--warn)}.chip.bad{color:var(--bad);border-color:var(--bad)}
.st{font-size:11px;padding:2px 8px;border-radius:99px;font-weight:700;background:var(--line)}
.st.pending{background:#fde68a;color:#713f12}.st.working{background:#bfdbfe;color:#1e3a8a}.st.done{background:#bbf7d0;color:#14532d}.st.failed{background:#fecaca;color:#7f1d1d}.st.cancelled,.st.skipped{background:var(--line);color:var(--muted)}
code,.code{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;display:block;font:12px/1.5 ui-monospace,Consolas,monospace;word-break:break-all;margin:6px 0}
.upl{display:flex;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}.upl span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#diagOut .note{margin-top:10px}

/* Clean, compact responsive interface refresh */
:root{--bg:#f5f7fb;--panel:#fff;--panel2:#f8fafc;--text:#182230;--muted:#687588;--line:#e6ebf2;--pri:#2563eb;--pri2:#1d4ed8;--r:14px;--sh:0 4px 18px rgba(15,23,42,.045);--logbg:#101827}
body{min-height:100vh;height:auto;background:var(--bg);font-size:14px;letter-spacing:.005em}
header{position:sticky;top:0;padding:12px 22px;gap:9px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(15,23,42,.035)}
.brand{gap:12px}.brand b{font-size:16px;letter-spacing:-.02em}.brand small{display:block;margin-top:2px}
.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#1877f2,#0756c9);box-shadow:0 5px 12px rgba(24,119,242,.2)}
#layout{min-height:0;max-width:1680px;width:100%;margin:0 auto}
aside{width:260px;background:#fbfcfe;border-right:1px solid var(--line)}
aside input{margin:16px 14px 12px;width:calc(100% - 28px)!important;background:#fff}
#plist{padding:0 10px 16px}.sec-t{padding:18px 12px 8px;letter-spacing:.1em}
.pi{padding:10px 12px;border-radius:11px;margin:3px 0;transition:background .15s,transform .15s}.pi:hover{transform:translateX(2px)}.pi.on{background:#eaf2ff;color:#164eaa}.pi img,.av,.ico{width:38px;height:38px;border-radius:12px;object-fit:cover}
main{padding:28px clamp(16px,3vw,38px);max-width:1440px;margin:0 auto;width:100%}
.page-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 0 20px}.page-intro h2{font-size:25px;letter-spacing:-.04em}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--pri);margin-bottom:6px}.page-intro p{margin:5px 0 0}
.cards{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:20px}
.cc{border:1px solid var(--line);border-top:0;border-radius:14px;padding:17px 18px;box-shadow:0 3px 14px rgba(15,23,42,.035);position:relative;overflow:hidden}.cc:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pri);opacity:.75}.cc b{font-size:25px;letter-spacing:-.045em}.cc span{display:block;margin-top:5px;font-size:12px}
.card,.chartbox{border:1px solid var(--line);border-radius:15px;padding:20px 21px;box-shadow:0 3px 14px rgba(15,23,42,.035);margin-bottom:16px}
h2{letter-spacing:-.025em}h3{font-size:15px;letter-spacing:-.01em;margin-bottom:14px}
.tabs{gap:5px;margin:10px 0 20px;padding-bottom:2px}.tab{padding:11px 15px;font-weight:650}.tab.on{background:#eaf2ff;border-radius:9px 9px 7px 7px}
button{border-radius:10px;padding:9px 15px;font-weight:650;box-shadow:none}button.sec{background:#fff}button.danger{background:#dc3545}button.sm{border-radius:8px}
select,input,textarea{border-radius:10px;background:#fff;padding:10px 12px}main input:not([type=checkbox]):not([type=radio]):not(.inl),main select,main textarea,dialog input:not([type=checkbox]),dialog textarea{max-width:100%}
label{margin:12px 0;font-size:13px}.chk{line-height:1.55}.row{gap:14px}
.ph{background:#fff;border:1px solid var(--line);padding:15px 17px;border-radius:14px;box-shadow:var(--sh);margin-bottom:18px}.ph img{width:48px;height:48px;object-fit:cover;border-radius:13px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh);margin-bottom:14px}
table{border-radius:0;box-shadow:none;margin:0;min-width:760px}th,td{padding:12px 14px}th{background:#f8fafc;font-weight:700}tbody tr:hover td{background:#f8fbff}
.helper-line{margin:12px 2px}.note{border-radius:12px;padding:12px 14px}.alert{border-radius:12px}
#drop{border-radius:14px;padding:38px 20px;background:#f8fbff;border-color:#cbd8eb}#drop:hover,#drop.over{background:#edf5ff}
#log,#clog,#jlog{border-radius:12px}
dialog{border-radius:18px;padding:24px}
#toasts{right:18px;bottom:18px}
@media(max-width:900px){header{padding:10px 12px}header .sp{display:none}#layout{display:block}aside{width:100%;height:auto;border-right:0;border-bottom:1px solid var(--line)}aside input{margin:10px 12px}#plist{display:flex;gap:6px;overflow:auto;padding:0 12px 10px;max-height:84px}.sec-t{display:none}.pi{min-width:150px;max-width:190px;margin:0}.pi .ps{white-space:nowrap}main{padding:18px 14px}.page-intro h2{font-size:22px}}
@media(max-width:560px){header{gap:6px}header .brand{width:100%;margin-bottom:2px}header button,header .btn,header select{font-size:12px;padding:7px 9px}#cronst{font-size:10px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cc{padding:13px}.cc b{font-size:21px}.page-intro{align-items:flex-start}.page-intro h2{font-size:21px}.page-intro>button{padding:8px 10px;font-size:12px}.ph{flex-wrap:wrap}.ph .sp{display:none}.tabs{margin-top:12px}.tab{padding:9px 11px;font-size:12px}.card{padding:16px}.row{display:block}.row>*{width:100%}.lbox{padding:24px}}