:root {
  --bg:#f5f8fa; --card:#fff; --ink:#454b52; --mute:#718096; --line:#e6e7e8; --title:#5b687b;
  --active:#1c64f2; --waiting:#e3a008; --completed:#48bb78; --failed:#f56565; --delayed:#9061f9;
  --card-shadow:0 1px 1px 0 rgba(60,75,100,.14),0 2px 1px -1px rgba(60,75,100,.12),0 1px 3px 0 rgba(60,75,100,.2);
}
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { font-family:Ubuntu,sans-serif; font-size:16px; font-weight:400; line-height:1.3; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-synthesis:none; }
button, input, select { font-family:inherit; }
h1,h2,h3,h4 { font-weight:500; }
.hidden { display:none !important; }
a { color:inherit; text-decoration:none; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
button { font-size:inherit; cursor:pointer; }

.app { display:flex; height:100vh; }
.side { width:260px; flex:none; background:linear-gradient(180deg,#28303e,#202732 80%,#181d25); box-shadow:4px 0 8px 3px rgba(38,46,60,.1); color:#d5d9dc; display:flex; flex-direction:column; position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:.3em; height:80px; padding:0 18px; font-size:1.728rem; font-weight:400; background:#303a4b; border-bottom:1px solid rgba(0,0,0,.4); box-shadow:0 2px 5px 0 rgba(0,0,0,.1); color:#f5f8fa; flex:none; }
.brand img { width:46px; height:46px; object-fit:contain; }
.side-label { padding:1.5rem 1rem 0; font-size:.833rem; font-weight:400; color:#828e97; }
.filter { margin:.5rem 0 0; padding:1rem; position:relative; }
.filter svg { position:absolute; left:1.9rem; top:50%; transform:translateY(-50%); width:1rem; height:1rem; color:#828e97; }
.filter input { width:100%; height:2.5rem; padding:0 1rem 0 2.1rem; border-radius:9999px; border:2px solid rgba(0,0,0,.4); background:hsla(0,0%,100%,.1); color:#f5f8fa; font-size:1rem; outline:none; }
.filter input::placeholder { color:#828e97; }
nav { flex:1; overflow:auto; padding:0; }
nav a { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-left:3px solid transparent; font-size:1rem; font-weight:400; color:inherit; }
nav a:hover { background:hsla(0,0%,100%,.05); border-left-color:#3d5a5c; }
nav a.sel { background:hsla(0,0%,100%,.1); border-left-color:#4abec7; }
nav .n { font-size:12px; border-radius:10px; padding:1px 8px; color:#fff; }
.side-foot { padding:.6rem; text-align:center; font-size:.833rem; color:#828e97; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:auto; }
.top { position:relative; flex:none; height:80px; background:#fff; border-bottom:1px solid #e6e7e8; display:flex; align-items:center; justify-content:space-between; padding:0 2rem; }
.top h1 { margin:0; font-size:1.2rem; font-weight:400; color:#718096; }
.icons { display:flex; gap:6px; }
.icon-btn { border:0; background:none; color:#66748a; padding:.65em; border-radius:.28571429rem; display:flex; }
.icon-btn:hover { background:#e2e8f0; }
.aws-panel { position:absolute; right:24px; top:58px; z-index:20; width:340px; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px rgba(20,30,50,.15); padding:12px 16px; font-size:13px; }
.aws-panel .q { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); }
.aws-panel .q:last-child { border:0; }
.view { padding:0 2rem 40px; max-width:1500px; width:100%; }

/* usage panel (always visible) */
.usage { position:sticky; top:0; z-index:10; margin:1rem 2rem 0; background:#fff; border-radius:.25rem; box-shadow:var(--card-shadow); padding:14px 18px; display:grid; grid-template-columns:repeat(3,1fr) auto; gap:22px; align-items:center; }
.meter .lab { display:flex; justify-content:space-between; font-size:.85rem; font-weight:400; color:var(--mute); }
.meter .pct { font-size:1.45rem; font-weight:400; color:var(--ink); line-height:1.15; }
.bar-track { position:relative; height:8px; border-radius:4px; background:#e6e9ee; margin:6px 0 4px; }
.bar-fill { height:100%; border-radius:4px; background:var(--completed); }
.bar-fill.hot { background:var(--waiting); } .bar-fill.crit { background:var(--failed); }
.bar-tick { position:absolute; top:-3px; width:2px; height:14px; background:#94a3b8; }
.meter .sub { font-size:12px; color:var(--mute); }
.state { text-align:right; min-width:190px; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:3px 10px; border-radius:12px; background:#e7f7ee; color:#1e7a45; }
.chip i { width:8px; height:8px; border-radius:50%; background:currentColor; }
.chip.paused { background:#fff3d6; color:#9a6a00; }
.state .sub { font-size:12px; color:var(--mute); margin:4px 0 6px; }
.notice { margin:12px 24px 0; padding:9px 14px; border-radius:6px; background:#fff3d6; color:#7a5300; font-size:13px; }

.btn { border:1px solid #cbd5e0; background:#fff; border-radius:4px; padding:6px 14px; color:var(--ink); }
.btn:hover { background:#f1f5f9; }
.btn.primary { background:var(--active); border-color:var(--active); color:#fff; }
.btn.primary:hover { background:#2f6fd6; }
.btn.danger { color:#c53030; }
.btn.sm { padding:3px 10px; font-size:13px; }

/* overview */
.legend { display:flex; gap:2rem; padding:2rem .25rem 2rem; font-size:1.1rem; font-weight:400; text-transform:uppercase; }
.legend i, .dot { display:inline-block; width:.5rem; height:.5rem; border-radius:50%; margin-right:.5rem; vertical-align:middle; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:2rem; }
.qcard { display:block; background:var(--card); border-radius:.25rem; padding:1rem; box-shadow:var(--card-shadow); cursor:pointer; }
.qcard:hover { box-shadow:0 1px 1px 0 rgba(60,75,100,.2),0 3px 6px -1px rgba(60,75,100,.2),0 3px 8px 0 rgba(60,75,100,.22); }
.qcard h3 { margin:.15rem 0 1.25rem; font-size:1rem; font-weight:400; color:#454b52; }
.row { display:flex; align-items:center; gap:1rem; }
.bar { flex:1; height:1rem; border-radius:9999px; background:#e5e7eb; display:flex; overflow:hidden; }
.bar span { display:flex; align-items:center; justify-content:center; color:#fff; font-size:.75rem; line-height:1; min-width:0; }
.jobs { font-size:1.0625rem; font-weight:400; white-space:nowrap; }
.section-title { margin:34px 0 12px; font-size:15px; text-transform:uppercase; color:var(--mute); letter-spacing:.04em; }

/* queue page */
.tabs { display:flex; align-items:center; border-bottom:2px solid #e0e7eb; margin-top:1.5rem; margin-bottom:0; }
.tabs a { padding:.55em 1em; font-size:1rem; font-weight:400; text-transform:uppercase; display:flex; align-items:center; border-bottom:2px solid transparent; margin-bottom:-2px; color:rgba(0,0,0,.87); }
.tabs a.on { border-bottom-color:#1b1c1d; color:rgba(0,0,0,.95); }
.badge { font-size:.833rem; background:#a0aec0; border-radius:500rem; padding:.25em .75em; color:#fff; margin:-.5em 0 -.5em .5rem; line-height:1.25; }
.tabs .sp { flex:1; }
.kebab { position:relative; }
.menu { position:absolute; right:0; top:2.6rem; z-index:15; background:#fff; border:1px solid rgba(34,36,38,.15); border-radius:.28571429rem; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); min-width:190px; padding:.25rem 0; }
.menu button { display:block; width:100%; text-align:left; background:none; border:0; padding:.5rem 1rem; font-size:.875rem; color:rgba(0,0,0,.87); }
.menu button:hover { background:#e2e8f0; color:rgba(0,0,0,.95); }
.actions { display:flex; gap:.25rem; padding:1rem .25rem .25rem; }
.act { display:flex; align-items:center; gap:.5em; background:none; border:0; border-radius:.28571429rem; color:inherit; font-size:.9rem; font-weight:400; padding:.65em .93em; }
.act:hover { background:#e2e8f0; }
.job { background:#fff; border-radius:.25rem; box-shadow:var(--card-shadow); margin:2rem 0 0; padding:1rem; display:grid; grid-template-columns:200px 1fr 120px; gap:.5rem 1.5rem; }
.job .id { font-size:1.44rem; font-weight:300; color:#cbd5e0; line-height:1; text-align:right; padding-right:1rem; margin-bottom:1.25rem; }
.timeline { grid-row:span 3; font-size:.833rem; font-weight:300; color:#a0aec0; text-align:right; padding:0 0 0 0; }
.timeline b { display:block; font-weight:400; font-size:1.1rem; color:#718096; }
.timeline .gap { margin:1.25rem 1rem 1.25rem 0; color:#a0aec0; font-size:.833rem; }
.jhead { display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap; }
.jhead .name { font-size:1.44rem; font-weight:300; line-height:1.15; color:#4a5568; word-break:break-all; }
.jhead .att { font-size:1rem; font-weight:300; color:#a0aec0; margin-left:-.5rem; }
.jhead a { font-size:13px; color:var(--active); }
.jtabs { display:flex; gap:.25em; margin-top:1rem; }
.jtabs button { border:0; background:none; padding:.65em .93em; border-radius:.28571429rem; color:inherit; font-size:.9rem; font-weight:400; }
.jtabs button.on { background:#cbd5e0; }
.jbody { font:13.5px/1.55 Menlo,Monaco,Consolas,'Courier New',monospace; -webkit-font-smoothing:auto; padding:14px 6px; overflow:auto; max-height:260px; white-space:pre-wrap; word-break:break-word; }
.jbody .err { color:#c0152e; } .jbody .path { color:#6b7280; } .jbody .k { color:#0b7a75; }
.jright { grid-row:span 3; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.ico-row { display:flex; gap:14px; }
.ico { border:0; background:none; color:#66748a; padding:.4rem; border-radius:.28571429rem; display:flex; }
.ico:hover { background:#e2e8f0; color:#2d3748; }
.ico svg { width:24px; height:24px; }
.ring { position:relative; width:80px; height:80px; }
.ring svg { width:80px; height:80px; transform:rotate(-90deg); stroke-width:6; }
.ring span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:300; color:#a0aec0; }
.pager { display:flex; gap:10px; justify-content:center; align-items:center; padding:12px; color:var(--mute); }
.empty { text-align:center; color:var(--mute); padding:60px 0; font-size:1.2rem; font-weight:300; }

/* settings */
.cardbox { background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.12); padding:22px 26px; margin:22px 0; }
.cardbox h3 { margin:0 0 4px; font-weight:500; font-size:18px; }
.cardbox p { margin:0 0 16px; color:var(--mute); font-size:14px; }
.fld { display:grid; grid-template-columns:260px 1fr; gap:14px; align-items:center; padding:9px 0; border-top:1px solid #f0f3f7; }
.fld label { font-size:15px; } .fld small { display:block; color:var(--mute); font-size:12px; }
.fld input[type=number], .fld input[type=password] { width:200px; padding:7px 10px; border:1px solid #cbd5e0; border-radius:4px; font:inherit; }
.fld input[type=checkbox] { width:18px; height:18px; }
.save-row { margin-top:14px; display:flex; gap:12px; align-items:center; }

.modal { position:fixed; inset:0; background:rgba(17,24,39,.5); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:50; animation:fade .15s ease-out; }
.dialog { background:#fff; border-radius:10px; padding:26px 28px 22px; width:min(440px,92vw); box-shadow:0 24px 60px rgba(15,23,42,.35); animation:pop .18s cubic-bezier(.2,.9,.3,1.2); }
.dialog h3 { margin:0 0 6px; font-size:1.2rem; font-weight:500; color:#2d3748; }
.dialog p { margin:0 0 20px; color:var(--mute); font-size:.95rem; font-weight:300; line-height:1.5; }
.dialog label { display:block; font-size:.85rem; color:var(--mute); margin-top:12px; }
.dialog select, .dialog input { font-size:1rem; padding:8px 10px; border:1px solid #cbd5e0; border-radius:6px; width:100%; margin:4px 0 6px; background:#fff; }
.dialog select:focus, .dialog input:focus { outline:2px solid #bfd4f7; border-color:var(--active); }
.dialog .btns { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.dialog.confirm { text-align:center; padding-top:30px; }
.dialog.confirm .ic { width:54px; height:54px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:#fdecec; color:#e04848; }
.dialog.confirm .ic svg { width:26px; height:26px; }
.dialog.confirm .ic.info { background:#e8f0fe; color:var(--active); }
.dialog.confirm .btns { justify-content:center; }
.dialog.confirm .btn { min-width:110px; padding:9px 18px; border-radius:6px; font-weight:500; }
.btn.red { background:#e04848; border-color:#e04848; color:#fff; }
.btn.red:hover { background:#c93a3a; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:none; } }
.login { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:60; }
.login-card { background:#fff; border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.12); padding:30px 34px; width:340px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.login-card img { width:56px; } .login-card h2 { margin:0 0 6px; font-weight:500; font-size:19px; }
.login-card input { width:100%; padding:10px 12px; border:1px solid #cbd5e0; border-radius:4px; font:inherit; }
.login-card .btn { width:100%; padding:9px; } .login-err { color:#c53030; font-size:13px; min-height:18px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#2d3748; color:#fff; padding:10px 18px; border-radius:6px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:80; }
.toast.on { opacity:1; }

@media (max-width: 900px) {
  .side { display:none; }
  .usage { grid-template-columns:1fr; } .state { text-align:left; }
  .job { grid-template-columns:1fr; } .timeline { grid-row:auto; border:0; text-align:left; } .jright { grid-row:auto; flex-direction:row; }
  .fld { grid-template-columns:1fr; }
}

.filter input:focus { border-color:#4abec7; }

nav a + a { border-top:1px solid #3a4145; }

.bar span + span { border-left:2px solid #fff; }

.tabs a:hover { border-bottom-color:#7a8085; }

.act svg { width:1.25em; height:1.25em; }

.tl { position:relative; padding:0 1rem 0 0; border-right:2px solid #e2e8f0; border-image:linear-gradient(180deg,#fff,#e2e8f0 10%,#e2e8f0 90%,#fff) 1 100%; }

.tl .pt { position:relative; padding:.5rem 1rem .5rem 0; margin-right:-1rem; }

.tl .pt::after { content:''; position:absolute; right:-.4rem; top:50%; transform:translateY(-50%); width:.5rem; height:.5rem; border-radius:50%; background:#cbd5e0; border:3px solid #fff; box-sizing:content-box; }

.jtabs button:hover { background:#e2e8f0; }

/* highlight.js "github" palette (Bull dashboard) */
.hl-k { color:#458; font-weight:500; } .hl-s { color:#d14; } .hl-n { color:teal; }
.hl-err { color:#d73a49; } .hl-dim { color:#aaa; }
.jbody { max-height:330px; padding:.5rem; }
.jbody::-webkit-scrollbar { width:.5rem; } .jbody::-webkit-scrollbar-track { background:hsla(0,0%,100%,.2); padding:2px; }
.jbody::-webkit-scrollbar-thumb { background-color:#cbd5e0; border-radius:4px; }
.jbody.logs { font-family:Ubuntu,sans-serif; font-size:.95rem; white-space:normal; }
.jbody ol { margin:0; padding-left:1.5rem; } .jbody ol li { padding-left:1rem; margin:.25rem 0; }
.jbody ol li::marker { color:#a0aec0; }
a.id:hover { color:#a0aec0; }
.detail-head { display:flex; align-items:center; justify-content:space-between; margin:1.5rem 0 1rem; }
.back { display:flex; padding:.4rem; border-radius:.28571429rem; color:#747f8d; }
.back:hover { background:#e2e8f0; } .back svg { width:28px; height:28px; }
.detail-head .status { font-size:1.1rem; color:#454b52; }
.detail-head + .job { margin-top:0; }

.env-badge { margin-left:.5rem; padding:.1rem .5rem; border-radius:4px; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:#fff; }
.env-badge:empty { display:none; }
.env-badge.prod { background:#c0392b; }
.env-badge.nonprod { background:#2e8b57; }

.jbody { background:#f6f8fa; border:1px solid #e5eaee; border-radius:6px; padding:14px 16px; margin-top:.75rem; font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; }
.jbody .hl-k { color:#24292f; font-weight:600; } .jbody .hl-s { color:#0a6b4f; } .jbody .hl-n { color:#0550ae; }

.nav-group { display:flex; align-items:center; gap:.5rem; padding:.9rem .75rem .3rem; } .nav-group small { color:#a0aec0; font-size:.75rem; }
.env-badge { text-transform:uppercase; } .env-badge.nonprod { background:#2e8b57; } .env-badge.prod { background:#c0392b; }
.stack-h { margin:1.6rem 0 .2rem; font-size:1rem; font-weight:500; display:flex; align-items:center; gap:.6rem; } .pz { color:#c0392b; font-size:.8rem; font-weight:400; }
.qline { display:flex; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:#828e97; margin:.2rem 0 .6rem; }
.meter .split { margin-top:.35rem; font-size:.75rem; color:#828e97; display:flex; gap:.9rem; flex-wrap:wrap; } .meter .split .env-badge { margin:0 .25rem 0 0; font-size:.62rem; padding:.05rem .4rem; }
.state .stk { display:flex; align-items:center; justify-content:flex-end; gap:.6rem; margin-bottom:.35rem; } .state .stk .env-badge { margin:0 .2rem 0 0; font-size:.62rem; }
.aws-panel .q.grp { font-weight:500; padding-top:.5rem; }