:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1d212b; --line:#2a2f3a;
  --ink:#e8eaf0; --muted:#9aa3b2; --accent:#5b8cff; --accent2:#3f6fe0;
  --ok:#3ddc97; --warn:#ffb454; --err:#ff6b6b; --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em; font-weight:650; letter-spacing:-.01em}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:.3em 0}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---- app shell ---- */
.shell{display:flex; min-height:100vh}
.sidebar{
  width:236px; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 14px; position:sticky;
  top:0; height:100vh;
}
.brand a{font-size:1.35rem; font-weight:750; color:var(--ink); letter-spacing:-.02em}
.brand span{color:var(--accent)}
.tenant-switch{margin:18px 0 8px}
.tenant-switch label{display:block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin-bottom:4px}
.tenant-switch select{width:100%}
.sidebar nav{display:flex; flex-direction:column; gap:2px; margin-top:10px}
.sidebar nav a{
  color:var(--muted); padding:8px 10px; border-radius:8px; font-size:.92rem;
}
.sidebar nav a:hover{background:var(--panel2); color:var(--ink); text-decoration:none}
.sidebar nav a.active{background:var(--accent2); color:#fff}
.nav-sep{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin:14px 10px 4px}
.sidebar-user{margin-top:auto; border-top:1px solid var(--line); padding-top:12px}
.sidebar-user .who strong{display:block; font-size:.9rem}
.sidebar-user .who span{display:block; font-size:.74rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.logout{display:inline-block; margin-top:8px; font-size:.82rem; color:var(--muted)}
.content{flex:1; padding:30px 38px; max-width:1100px}

/* ---- generic ---- */
.page-head{display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:22px; gap:16px; flex-wrap:wrap}
.page-head .sub{color:var(--muted); font-size:.9rem}
.panel{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; margin-bottom:20px}
.panel h2{margin-bottom:14px}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.84rem}

.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px}
.stat .n{font-size:1.8rem; font-weight:700}
.stat .l{color:var(--muted); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.06em}

table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.06em; font-weight:600}
tr:last-child td{border-bottom:none}

.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:.74rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.badge.queued{background:#27324a; color:#9db8ff}
.badge.running{background:#3a3320; color:var(--warn)}
.badge.done{background:#173a2c; color:var(--ok)}
.badge.failed{background:#3a1f1f; color:var(--err)}
.badge.skipped{background:#2a2f3a; color:var(--muted)}
.badge.draft{background:#2a2f3a; color:var(--muted)}
.badge.active{background:#173a2c; color:var(--ok)}
.badge.disabled{background:#3a1f1f; color:var(--err)}

/* ---- forms ---- */
label{font-size:.82rem; color:var(--muted)}
input,select,textarea{
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:9px 11px; font-size:.92rem; font-family:inherit;
  width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent2);
  border-color:var(--accent2)}
textarea{resize:vertical; line-height:1.5}
textarea.code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.86rem}
.field{margin-bottom:12px}
.field label{display:block; margin-bottom:4px}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row .field{flex:1; min-width:160px}

.btn{display:inline-block; background:var(--accent2); color:#fff; border:none;
  border-radius:8px; padding:9px 16px; font-size:.9rem; font-weight:600;
  cursor:pointer; font-family:inherit}
.btn:hover{background:var(--accent); text-decoration:none}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn.ghost:hover{background:var(--panel2)}
.btn.danger{background:transparent; border:1px solid #5a2a2a; color:var(--err)}
.btn.danger:hover{background:#3a1f1f}
.btn.sm{padding:5px 11px; font-size:.8rem}
form.inline{display:inline}

.notice{padding:11px 14px; border-radius:8px; margin-bottom:16px; font-size:.9rem}
.notice.ok{background:#173a2c; color:var(--ok)}
.notice.err{background:#3a1f1f; color:var(--err)}
.notice.info{background:#27324a; color:#9db8ff}

.empty{color:var(--muted); padding:26px; text-align:center}

pre.payload{background:var(--panel2); border:1px solid var(--line);
  border-radius:8px; padding:14px; overflow:auto; font-size:.82rem; max-height:420px}

/* ---- landing / login ---- */
.bare{background:radial-gradient(900px 500px at 70% -10%,#1c2944,transparent),
  var(--bg); min-height:100vh}
.lp-nav{display:flex; justify-content:space-between; align-items:center;
  max-width:1080px; margin:0 auto; padding:22px 24px}
.lp-nav .brand a{font-size:1.4rem}
.hero{max-width:1080px; margin:0 auto; padding:60px 24px 40px; text-align:center}
.hero h1{font-size:2.9rem; line-height:1.1; margin-bottom:.3em}
.hero .lead{font-size:1.15rem; color:var(--muted); max-width:620px;
  margin:0 auto 28px}
.hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.features{max-width:1080px; margin:0 auto; padding:20px 24px 60px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.feature{background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px}
.feature h3{color:var(--accent)}
.lp-foot{border-top:1px solid var(--line); text-align:center; padding:26px;
  color:var(--muted); font-size:.9rem}
.auth-card{max-width:400px; margin:9vh auto; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:38px; text-align:center}
.auth-card h1{font-size:1.6rem}
.gbtn{display:inline-flex; align-items:center; gap:10px; background:#fff;
  color:#3c4043; border-radius:8px; padding:11px 20px; font-weight:600;
  font-size:.95rem; margin-top:18px}
.gbtn:hover{text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.4)}
.gbtn svg{width:18px; height:18px}
.code-list{list-style:none; padding:0; margin:0}
.code-list li{padding:7px 0; border-bottom:1px solid var(--line); font-size:.88rem}
.code-list li:last-child{border:none}