:root{
  --bg:#0b1016; --surface:#131b24; --surface2:#1a2632; --border:#243342;
  --text:#e6edf3; --dim:#8ba0b0; --accent:#39d0c4; --accent2:#0e7c86;
  --ok:#4ade80; --warn:#fbbf24; --err:#fb7185;
  --mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:root[data-theme="light"]{
  --bg:#f4f7fa; --surface:#ffffff; --surface2:#eef2f6; --border:#d7e0e8;
  --text:#0f2231; --dim:#55697b; --accent:#0d7c86; --accent2:#0b6b74;
  --ok:#15803d; --warn:#b45309; --err:#be123c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px}
a{color:var(--accent)}
button{font-family:inherit;cursor:pointer}
.dim{color:var(--dim)}
.mono{font-family:var(--mono)}
.tabnum{font-variant-numeric:tabular-nums}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:32px;width:340px;max-width:100%}
.login-card h1{margin:0 0 4px;font-size:1.3rem}
.login-card .eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}

/* shell */
header.top{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10}
header.top .brand{font-weight:700;letter-spacing:-.01em}
header.top .brand b{color:var(--accent)}
nav.tabs{display:flex;gap:4px;margin-left:8px}
nav.tabs button{background:none;border:none;color:var(--dim);padding:8px 14px;border-radius:8px;font-size:.9rem;font-weight:500}
nav.tabs button.active{background:var(--surface2);color:var(--accent)}
nav.tabs button:hover{color:var(--text)}
header.top .spacer{flex:1}
header.top .logout{background:var(--surface2);border:1px solid var(--border);color:var(--dim);border-radius:8px;padding:6px 12px}
header.top .theme-toggle{background:var(--surface2);border:1px solid var(--border);color:var(--dim);border-radius:8px;width:36px;height:34px;font-size:1rem;cursor:pointer}
header.top .theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
main{max-width:1100px;margin:0 auto;padding:22px 20px 60px}

/* controls */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input[type=text],input[type=password],input[type=search],select{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:9px 12px;font-size:.92rem;font-family:inherit}
input:focus,select:focus{outline:2px solid var(--accent2);outline-offset:1px}
.btn{background:var(--accent2);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-weight:600}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn.sm{padding:5px 10px;font-size:.82rem}
.btn.danger{background:none;border:1px solid var(--err);color:var(--err)}
.grow{flex:1;min-width:200px}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;margin-top:16px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
th{background:var(--surface2);color:var(--dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0}
tr:last-child td{border-bottom:none}
td.wrap{white-space:normal;max-width:420px}
td .title{font-weight:600}
td .ref{font-family:var(--mono);font-size:.78rem;color:var(--dim)}

/* progress */
.bar{height:8px;border-radius:5px;background:var(--surface2);overflow:hidden;min-width:120px}
.bar > i{display:block;height:100%;background:var(--accent);transition:width .3s}
.bar.indet > i{width:35%;animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{margin-left:-35%}100%{margin-left:100%}}

.badge{font-family:var(--mono);font-size:.68rem;padding:2px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.05em}
.badge.running{background:#0e7c8622;color:var(--accent)}
.badge.done{background:#4ade8022;color:var(--ok)}
.badge.error{background:#fb718522;color:var(--err)}
.badge.cancelled{background:#8ba0b022;color:var(--dim)}

h2{font-size:1.15rem;margin:4px 0 2px}
.sub{color:var(--dim);margin:0 0 14px;font-size:.9rem}
.empty{color:var(--dim);padding:40px;text-align:center}
.toast{position:fixed;bottom:20px;right:20px;background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--accent);padding:12px 16px;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.4);max-width:360px}
.toast.err{border-left-color:var(--err)}
.filepanel{background:var(--surface2);border-top:1px solid var(--border);padding:10px 14px;font-family:var(--mono);font-size:.8rem;color:var(--dim)}
.crumbs{font-family:var(--mono);font-size:.82rem;margin:12px 0}
.crumbs a{cursor:pointer}

/* viewer modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:min(1040px,96vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
.modal-close{background:var(--surface2);border:1px solid var(--border);color:var(--dim);border-radius:8px;width:32px;height:32px;font-size:1rem}
.modal-close:hover{color:var(--err);border-color:var(--err)}
.modal-body{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.entrylist{display:flex;gap:6px;flex-wrap:wrap}
.entry{background:var(--surface2);border:1px solid var(--border);color:var(--dim);border-radius:8px;padding:6px 12px;font-size:.82rem;cursor:pointer}
.entry.active{border-color:var(--accent);color:var(--accent)}
.entry:hover{color:var(--text)}
.preview table td{max-width:260px;overflow:hidden;text-overflow:ellipsis}