:root{
  --night:#1C1326; --dusk:#2B1E3A; --dusk-2:#35264A; --ivory:#FBF3E6; --mist:#CDBFD9;
  --marigold:#F4A62A; --rani:#E0457B; --leaf:#7BC59A; --line:rgba(251,243,230,.14);
  --display:"Gloock", Georgia, serif; --body:"Hanken Grotesk", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{background:var(--night)}
body{color:var(--ivory);font:400 1rem/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--marigold);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
@media (max-width:520px){.wrap{padding:0 16px}}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0}
.brand{font:400 1.375rem/1 var(--display);text-decoration:none;white-space:nowrap}
.brand span{color:var(--marigold)}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.nav a,.linkbtn{background:none;border:0;padding:0;color:var(--mist);cursor:pointer;text-decoration:none;font-size:.9375rem}
.nav a:hover,.linkbtn:hover{color:var(--ivory)}
.pill{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.9375rem;white-space:nowrap}
.pill b{color:var(--marigold);font-weight:600}

/* type */
h1{font:400 clamp(2rem,4vw,3rem)/1.04 var(--display)}
h2{font:400 1.625rem/1.15 var(--display)}
h3{font:600 1.0625rem/1.3 var(--body)}
.muted{color:var(--mist)}
.small{font-size:.875rem}

/* controls */
.btn{display:inline-block;background:var(--marigold);color:var(--night);border:0;border-radius:999px;padding:14px 24px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover:not(:disabled){background:#FFB940}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:none;color:var(--ivory);border:1px solid var(--line)}
.btn.ghost:hover:not(:disabled){border-color:var(--marigold);background:none}
.btn.sm{padding:8px 14px;font-size:.875rem}
.btn.danger{background:none;color:#FFB3C9;border:1px solid rgba(224,69,123,.5)}
input[type=text],input[type=email],input[type=password],input[type=search],select{
  width:100%;padding:13px 14px;background:var(--dusk);border:1px solid var(--line);border-radius:12px}
input::placeholder{color:#9C8DAB}
label.field{display:block;margin:18px 0 7px;color:var(--mist);font-size:.9375rem}
.msg{min-height:1.4em;margin-top:12px;color:#FFB3C9}
.msg.ok{color:var(--leaf)}

/* surfaces */
.panel{background:var(--dusk);border:1px solid var(--line);border-radius:18px;padding:24px}
.banner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 18px;border-radius:12px;margin-bottom:18px}
.banner.rani{background:var(--rani);color:#fff}
.banner.rani button{background:#fff;color:var(--rani);border:0;border-radius:999px;padding:8px 14px;font-weight:600;cursor:pointer}
.banner.note{background:rgba(244,166,42,.12);border:1px solid rgba(244,166,42,.4)}

/* tables */
.table{width:100%;border-collapse:collapse;font-size:.9375rem}
.table th{text-align:left;font-weight:500;color:var(--mist);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:hover td{background:rgba(251,243,230,.03)}
.scroll{overflow-x:auto}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.8125rem;border:1px solid var(--line);white-space:nowrap}
.tag.done{color:var(--leaf);border-color:rgba(123,197,154,.45)}
.tag.failed{color:#FFB3C9;border-color:rgba(224,69,123,.5)}
.tag.running,.tag.queued{color:var(--marigold);border-color:rgba(244,166,42,.45)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ivory);color:var(--night);padding:12px 18px;border-radius:12px;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,.35);z-index:50}