:root{
  --navy:#101828;
  --navy-2:#1d2939;
  --ink:#172033;
  --muted:#667085;
  --muted-2:#98a2b3;
  --page:#f6f8fc;
  --surface:#ffffff;
  --line:#e5e9f0;
  --line-strong:#d7dfea;
  --primary:#2764e7;
  --primary-dark:#194fbf;
  --accent:#fb8b24;
  --green:#138a5b;
  --red:#d92d20;
  --amber:#b54708;
  --shadow:0 10px 26px rgba(16,24,40,.055);
  --radius:16px;
}

*{box-sizing:border-box}
html{background:var(--page)}
body{margin:0;color:var(--ink);background:var(--page);font:14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}
.shell{min-height:100vh;display:grid;grid-template-columns:264px minmax(0,1fr)}

aside{
  min-height:100vh;
  padding:26px 15px 18px;
  color:#cbd5e1;
  background:
    radial-gradient(circle at 5% 105%,rgba(52,95,241,.3),transparent 30%),
    linear-gradient(180deg,#101828 0%,#111b2c 56%,#0b1220 100%);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}
aside:after{content:"";position:absolute;inset:auto -45px -90px auto;width:180px;height:180px;border:1px solid rgba(255,255,255,.07);border-radius:50%;pointer-events:none}
.brand{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 10px 39px;
  color:#fff;
  text-decoration:none;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:17px;
  letter-spacing:-.025em;
}
.brand span,.mark{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:10px;
  color:#fff;
  font:800 12px/1 Inter,ui-sans-serif,sans-serif;
  letter-spacing:-.05em;
  background:linear-gradient(135deg,#fb9b2f,#ed6a2c);
  box-shadow:0 8px 18px rgba(237,106,44,.28);
}
nav{position:relative;z-index:1;display:grid;gap:5px}
nav a{
  position:relative;
  display:flex;
  align-items:center;
  min-height:43px;
  padding:10px 12px 10px 15px;
  border-radius:10px;
  color:#aab7ca;
  text-decoration:none;
  font-weight:600;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
nav a:before{content:"";width:6px;height:6px;margin-right:12px;border-radius:50%;background:#61708a;transition:background .18s ease,box-shadow .18s ease}
nav a:hover{color:#fff;background:rgba(255,255,255,.06);transform:translateX(2px)}
nav a.active{color:#fff;background:linear-gradient(90deg,rgba(60,105,235,.33),rgba(60,105,235,.12));box-shadow:inset 0 0 0 1px rgba(120,149,255,.12)}
nav a.active:before{background:#7ea2ff;box-shadow:0 0 0 4px rgba(92,132,255,.16)}
.side-foot{position:relative;z-index:1;margin-top:auto;padding:18px 11px 0;border-top:1px solid rgba(255,255,255,.09);color:#8d9ab0;font-size:11px;letter-spacing:.02em}
.side-foot form{margin-top:6px}
.side-foot button{padding:0;border:0;background:none;color:#d8e1ef;font:600 12px inherit;cursor:pointer}
.side-foot button:hover{color:#fff}

main{width:100%;max-width:1700px;margin:0 auto;padding:0 44px 54px}
header{height:74px;display:flex;justify-content:flex-end;align-items:center;border-bottom:1px solid var(--line)}
.live{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;font-weight:600}
.live i{display:block;width:7px;height:7px;border-radius:50%;background:#22b573;box-shadow:0 0 0 5px rgba(34,181,115,.12)}

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  min-height:236px;
  margin:30px 0 22px;
  padding:38px 40px;
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(circle at 90% 17%,rgba(103,139,255,.42),transparent 23%),
    radial-gradient(circle at 80% 105%,rgba(251,139,36,.24),transparent 29%),
    linear-gradient(120deg,#152343 0%,#182f65 53%,#244bb3 130%);
  box-shadow:0 16px 32px rgba(29,52,119,.17);
}
.hero:after{content:"";position:absolute;z-index:-1;right:11%;top:-90px;width:285px;height:285px;border:1px solid rgba(255,255,255,.11);border-radius:50%;box-shadow:0 0 0 36px rgba(255,255,255,.035),0 0 0 72px rgba(255,255,255,.02)}
.hero .eyebrow{color:#bcd0ff}
.hero h1,.page-head h1{margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:36px;line-height:1.15;letter-spacing:-.052em}
.hero h1{max-width:590px}
.hero p,.page-head p{max-width:670px;margin:11px 0 0;color:var(--muted);font-size:14px}
.hero p{color:#c2cce1}
.eyebrow{display:block;margin-bottom:8px;color:var(--primary);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.actions{display:flex;align-items:center;gap:10px;white-space:nowrap}
.actions form{margin:0}
.button{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 14px;
  border:1px solid transparent;
  border-radius:9px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.button:hover{transform:translateY(-1px)}
.primary{color:#fff;background:var(--primary);box-shadow:0 6px 12px rgba(39,100,231,.22)}
.primary:hover{background:var(--primary-dark);box-shadow:0 8px 16px rgba(39,100,231,.27)}
.hero .primary{background:#fff;color:#1b3f91;box-shadow:none}
.hero .primary:hover{background:#eff4ff}
.secondary{color:#fff;background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.secondary:hover{background:rgba(255,255,255,.19)}
.small{min-height:32px;padding:7px 10px;color:#344054;background:#f7f9fc;border-color:var(--line-strong);font-size:12px}
.small:hover{background:#fff;border-color:#b9c5d7}
.ghost{color:var(--muted);background:transparent}
.danger-button{color:#fff;background:var(--red);box-shadow:0 5px 11px rgba(217,45,32,.18)}

.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;margin-bottom:25px}
.metrics div,.panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.metrics div{position:relative;min-height:118px;padding:18px 18px 16px;border-radius:var(--radius);overflow:hidden}
.metrics div:before{content:"";position:absolute;top:0;left:18px;right:18px;height:3px;border-radius:0 0 4px 4px;background:#bdc8d8}
.metrics div:nth-child(1):before{background:#4f78ee}.metrics div:nth-child(2):before{background:#22a06b}.metrics div:nth-child(3):before{background:#f79009}.metrics div:nth-child(4):before{background:#6e59e6}.metrics div:nth-child(5):before{background:#e05252}
.metrics span{display:block;margin-top:8px;color:var(--muted);font-size:12px;font-weight:600}
.metrics strong{display:block;margin-top:4px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:30px;line-height:1.15;letter-spacing:-.055em}

.panel{margin:18px 0;padding:24px;border-radius:var(--radius)}
.compact{padding:14px 16px}
.title-row,.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:19px}
.title-row h2,.form-panel h2{margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:19px;line-height:1.2;letter-spacing:-.035em}
.title-row a{color:var(--primary);font-size:13px;font-weight:700;text-decoration:none}
.title-row a:hover{text-decoration:underline}
.page-head{padding:36px 0 13px}
.page-head h1{font-size:32px}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-grid label,.login-card label{display:block;color:#344054;font-size:12px;font-weight:700}
.form-grid input,.form-grid textarea,.form-grid select,.filters input,.filters select,.danger input,.login-card input{
  display:block;
  width:100%;
  min-height:42px;
  margin-top:7px;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:9px;
  outline:0;
  color:var(--ink);
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus,.filters input:focus,.filters select:focus,.danger input:focus,.login-card input:focus{border-color:#6f95f4;box-shadow:0 0 0 4px rgba(39,100,231,.12)}
.form-grid textarea{resize:vertical;line-height:1.5}
.wide{grid-column:1/-1}
.muted{color:var(--muted);font-weight:500}
.form-note{margin:0;padding:12px 13px;border:1px solid #dce7ff;border-radius:10px;color:#38517f;background:#f3f6ff;font-size:12px}

.filters{display:flex;align-items:center;gap:9px}
.filters input{min-width:300px;margin:0}.filters select{width:178px;margin:0}.filters .button{flex:0 0 auto}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table{width:100%;min-width:980px;border-collapse:collapse;font-size:13px}
th{padding:12px 14px;color:#667085;background:#f8f9fc;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;letter-spacing:.045em;text-align:left;text-transform:uppercase;white-space:nowrap}
th,td{padding:14px;vertical-align:top;border-bottom:1px solid #edf0f4}
tbody tr{transition:background .13s ease}tbody tr:hover{background:#fbfcff}tbody tr:last-child td{border-bottom:0}
td strong,td small{display:block}td strong{font-weight:700;color:#27334a}td small{max-width:235px;margin-top:4px;overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis}
.domain-select,.domain-select-all{display:inline-flex;gap:10px;cursor:pointer}.domain-select{align-items:flex-start}.domain-select-all{align-items:center;color:#667085;font-size:11px;font-weight:800;letter-spacing:.045em;text-transform:uppercase}.domain-select input,.domain-select-all input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--primary);cursor:pointer}.domain-select input{margin:3px 0 0}.domain-select-all input{margin:0}.domain-select span{min-width:0}
.row-actions{vertical-align:middle!important;text-align:right}.row-delete-form{display:inline}.row-delete-button{min-height:32px;padding:6px 11px;border:1px solid #e4a79f;border-radius:8px;color:#b42318;background:#fff;font-size:11px;font-weight:800;cursor:pointer;transition:.16s ease}.row-delete-button:hover{border-color:#d92d20;color:#fff;background:#d92d20;box-shadow:0 5px 11px rgba(217,45,32,.16)}
.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:10px!important}
.group-labels{display:inline-block!important;width:max-content;max-width:100%;margin-top:7px!important;padding:3px 7px;border:1px solid #d9e3ff;border-radius:999px;color:#3f5fa8!important;background:#f2f5ff;font-size:10px!important;font-weight:700!important;line-height:1.2}
.group-select-form{min-width:168px}.group-select{width:100%;min-height:34px;margin:0;padding:6px 29px 6px 10px;border:1px solid #d5dce8;border-radius:8px;color:#344054;background:#fff;font-size:12px;font-weight:700;cursor:pointer}.group-select:hover,.group-select:focus{border-color:#8ba9f8;box-shadow:0 0 0 3px rgba(73,117,250,.1);outline:0}.group-select:disabled{cursor:not-allowed;color:#98a2b3;background:#f8fafc}
.confirm-dialog{width:min(420px,calc(100vw - 34px));padding:0;border:0;border-radius:16px;box-shadow:0 24px 65px rgba(16,24,40,.28);color:#1d2939}.confirm-dialog::backdrop{background:rgba(16,24,40,.48);backdrop-filter:blur(2px)}.confirm-dialog-body{padding:25px}.confirm-kicker{display:inline-flex;margin-bottom:11px;padding:4px 8px;border-radius:999px;color:#3156b5;background:#eef3ff;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.danger-kicker{color:#b42318;background:#fff0ee}.confirm-dialog h3{margin:0 0 8px;font-size:20px;letter-spacing:-.025em}.confirm-dialog p{margin:0;color:#667085;line-height:1.55}.confirm-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:23px}.confirm-actions button{min-height:36px;padding:7px 13px;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer}.confirm-cancel{border:1px solid #d5dce8;color:#475467;background:#fff}.confirm-accept{border:1px solid #3156b5;color:#fff;background:#3156b5}.confirm-delete{border:1px solid #d92d20;color:#fff;background:#d92d20}
.status{display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.1;white-space:nowrap;background:#f0f2f5;color:#667085}
.status:before{content:"";width:5px;height:5px;margin-right:5px;border-radius:50%;background:currentColor;opacity:.75}
.status.active,.status.succeeded{color:#087443;background:#eaf9f0}.status.pending,.status.initializing,.status.running,.status.warning,.status.completed_with_errors{color:#a35a00;background:#fff6df}.status.failed{color:#b42318;background:#ffebe9}
.danger{display:flex;justify-content:flex-end;gap:9px;padding-top:15px}.danger input{width:230px;margin:0}
.accounts,.jobs{display:grid;gap:11px}
.account{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--line);border-radius:11px;background:#fbfcff}
.account strong{font-weight:700}.account small{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.group-rows{display:grid;gap:11px}.group-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--line);border-radius:11px;background:#fbfcff}.group-row strong{font-weight:700}.group-row small{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.job{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}
.job summary{display:flex;justify-content:space-between;gap:15px;padding:16px;list-style:none;cursor:pointer}.job summary::-webkit-details-marker{display:none}.job summary:hover{background:#fbfcff}.job summary div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.job summary small,.job summary time{color:var(--muted);font-size:12px}
.job-details{padding:14px;border-top:1px solid var(--line);overflow:auto;background:#fcfdff}.small-table{min-width:620px}
.empty{padding:38px!important;color:var(--muted);text-align:center}
.notice{margin-top:20px;padding:11px 13px;border:1px solid #b8ebce;border-radius:10px;color:#087443;background:#ecfdf3;font-weight:600}.notice.error{color:#b42318;background:#fff2f0;border-color:#fecdc7}
.expiry{color:var(--red);font-weight:800}

.login-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:22px;
  background:
    radial-gradient(circle at 15% 20%,rgba(73,117,250,.32),transparent 27%),
    radial-gradient(circle at 85% 82%,rgba(251,139,36,.24),transparent 28%),
    linear-gradient(140deg,#10182a,#172d62 54%,#1c4694);
}
.login-card{width:min(100%,438px);padding:36px;border:1px solid rgba(255,255,255,.78);border-radius:21px;background:rgba(255,255,255,.96);box-shadow:0 24px 65px rgba(4,12,35,.32)}
.login-card .mark{width:43px;height:43px;margin-bottom:28px;border-radius:13px;font-size:13px}.login-card h1{margin:0 0 8px;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:28px;line-height:1.2;letter-spacing:-.05em}.login-card p{margin:0 0 25px;color:var(--muted)}.login-card form{display:grid;gap:17px}.login-card .button{width:100%;margin-top:2px}

@media(max-width:1140px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics div:nth-child(4),.metrics div:nth-child(5){min-height:100px}.hero{padding:31px}.hero h1{font-size:32px}}
@media(max-width:920px){.shell{grid-template-columns:1fr}aside{position:static;min-height:0;height:auto;flex-direction:row;align-items:center;padding:13px 20px}.brand{padding:0}nav{display:flex;margin-left:auto}nav a{min-height:34px;padding:7px 10px;font-size:12px}nav a:before{display:none}.side-foot{display:none}main{padding:0 22px 40px}.hero{margin-top:22px}}
@media(max-width:670px){main{padding:0 15px 30px}header{height:58px}.live{font-size:11px}.hero,.page-head{display:block}.hero{min-height:0;padding:28px 23px;border-radius:18px}.hero h1,.page-head h1{font-size:29px}.actions{margin-top:21px;white-space:normal;flex-wrap:wrap}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metrics div{min-height:99px;padding:14px}.metrics div:last-child{grid-column:span 2}.panel{padding:17px;border-radius:13px}.compact{padding:13px}.filters{display:grid}.filters input,.filters select{width:100%;min-width:0}.form-grid{grid-template-columns:1fr}.danger{display:grid}.danger input{width:100%}.title-row{align-items:flex-start}.job summary{display:block}.job summary time{display:block;margin-top:8px}.login-card{padding:29px 24px}}
