:root{
  --bg:#090c11;
  --panel:#0f1319;
  --panel2:#111720;
  --panel3:#0b0f14;
  --line:#1d2530;
  --line2:#283240;
  --text:#f4f7fb;
  --muted:#8791a0;
  --faint:#5f6874;
  --blue:#5b8cff;
  --blue2:#76a1ff;
  --green:#41d38a;
  --red:#ff6e7d;
  --yellow:#ffd166;
  --shadow:0 18px 60px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{
  margin:0;
  background:
    radial-gradient(900px 420px at 70% -10%,rgba(91,140,255,.09),transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit}
button,a{transition:.16s ease}
.shell{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}

/* Sidebar */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:228px;
  display:flex;flex-direction:column;
  background:#0b0f14;
  border-right:1px solid var(--line);
  padding:24px 18px 18px;
  z-index:30;
}
.side-brand{display:flex;align-items:center;gap:12px;padding:0 6px 24px}
.brand-box{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(145deg,#5b8cff,#426fe0);
  display:grid;place-items:center;
  font-weight:900;font-size:12px;letter-spacing:.04em;color:white;
  box-shadow:0 7px 22px rgba(91,140,255,.22);
}
.brand-box.big{width:52px;height:52px;border-radius:13px;font-size:15px;margin-bottom:28px}
.brand-title{font-size:13px;font-weight:800;letter-spacing:.04em}
.brand-sub{font-size:11px;color:var(--faint);margin-top:2px}
.side-nav{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.nav-item{
  height:42px;border-radius:9px;padding:0 12px;
  display:flex;align-items:center;gap:11px;
  color:#7f8996;text-decoration:none;font-size:12px;font-weight:650;
}
.nav-item.active{color:#eaf0f8;background:#121924;border:1px solid #202a38}
.nav-item:hover{background:#10161e;color:#dce3eb}
.nav-icon{width:18px;text-align:center;color:#647080;font-size:15px}
.muted-link{cursor:default}
.side-bottom{margin-top:auto}
.server-mini{
  display:flex;gap:10px;align-items:flex-start;
  padding:13px;border:1px solid var(--line);border-radius:11px;background:#0d1218;
}
.status-dot,.pulse,.lock-dot,.terminal-dot{
  width:8px;height:8px;border-radius:999px;background:var(--green);
  box-shadow:0 0 0 4px rgba(65,211,138,.07);
}
.server-mini strong{display:block;font-size:11px}
.server-mini small{display:block;margin-top:3px;color:var(--faint);font-size:9px}
.logout-btn{
  width:100%;height:38px;margin-top:9px;border:0;background:transparent;color:#697381;cursor:pointer;font-size:11px;
}
.logout-btn:hover{color:white}

/* Main */
.main{
  grid-column:2;
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:38px 42px 52px;
}
.page-head{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-bottom:28px}
.kicker{
  color:var(--blue2);font-size:9px;font-weight:800;letter-spacing:.16em;margin-bottom:8px;
}
.page-head h1,.login-left h1{margin:0;font-size:30px;line-height:1.1;letter-spacing:-.045em}
.page-head p,.login-left p{margin:8px 0 0;color:var(--muted);font-size:12px}
.head-status{
  min-width:170px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:rgba(15,19,25,.8);
  display:flex;align-items:center;gap:11px;
}
.head-status strong{display:block;font-size:11px}
.head-status small{display:block;margin-top:2px;color:var(--faint);font-size:9px}

/* Metrics */
.metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;
}
.metric{
  min-height:126px;padding:18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#111720,#0f141b);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.metric-label{font-size:10px;color:#7e8996;margin-bottom:14px}
.metric-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.metric-row strong{font-size:30px;line-height:1;font-weight:750;letter-spacing:-.04em}
.metric-pill{
  padding:5px 7px;border:1px solid #26354d;background:#111a27;color:#7fa4f5;border-radius:999px;font-size:8px;font-weight:700;
}
.metric-icon{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:900;
}
.metric-icon.good{background:rgba(65,211,138,.08);color:var(--green);border:1px solid rgba(65,211,138,.16)}
.metric-icon.bad{background:rgba(255,110,125,.08);color:var(--red);border:1px solid rgba(255,110,125,.16)}
.metric-foot{margin-top:14px;color:var(--faint);font-size:9px}
.mono-time{font-family:"SFMono-Regular",Consolas,monospace!important;font-size:23px!important;letter-spacing:-.03em!important}

/* Cards */
.card{
  border:1px solid var(--line);border-radius:13px;background:rgba(15,19,25,.92);box-shadow:var(--shadow);
}
.create-card{padding:22px;margin-bottom:14px}
.activity-card{padding:22px 22px 18px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.section-label{font-size:9px;font-weight:800;letter-spacing:.14em;color:#6f7b8a;margin-bottom:7px}
.card-head h2{margin:0;font-size:18px;letter-spacing:-.025em}
.card-head p{margin:5px 0 0;color:var(--muted);font-size:11px}
.state-badge{
  border-radius:999px;padding:7px 10px;border:1px solid var(--line2);background:#0d1218;
  color:#75808e;font:700 9px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.1em;
}
.state-badge.running{color:#a7efd0;border-color:#214b37;background:#0e1d16}
.state-badge.failed{color:#ff9ba6;border-color:#4b262d;background:#211216}

/* Form */
.create-form{display:grid;grid-template-columns:150px minmax(0,1fr) 130px;gap:10px;align-items:end}
.field label{display:block;margin-bottom:7px;color:#8993a1;font-size:10px;font-weight:650}
input,select{
  width:100%;height:46px;padding:0 13px;border:1px solid #28313d;border-radius:9px;
  background:#0b0f14;color:#eef3f8;outline:none;
}
input::placeholder{color:#4b5561}
input:focus,select:focus{border-color:#3d5681;box-shadow:0 0 0 3px rgba(91,140,255,.08)}
.btn{
  min-height:42px;border-radius:9px;border:1px solid transparent;padding:0 15px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;text-decoration:none;font-weight:750;font-size:11px;
}
.btn-primary{height:46px;background:var(--blue);color:white}
.btn-primary:hover{background:#6895ff;transform:translateY(-1px)}
.btn-primary:disabled{opacity:.42;cursor:not-allowed;transform:none}
.arrow{font-size:15px}
.btn-secondary{background:#151b23;border-color:#2a3440;color:#cbd3dc}
.btn-secondary:hover{background:#1a222c}
.btn-danger{background:#241419;border-color:#4a252d;color:#ff929f}
.btn-danger:hover{background:#2d171d}
.form-message{min-height:16px;margin-top:11px;color:#697582;font-size:10px}

/* Activity */
.activity-head{margin-bottom:17px}
.actions{display:flex;gap:8px}
.progress-line{margin-bottom:14px}
.progress-meta{display:flex;justify-content:space-between;margin-bottom:7px;color:#65717f;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.track{height:5px;background:#090c10;border-radius:999px;overflow:hidden}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),#7aa5ff);border-radius:999px;transition:width .3s}
.terminal{
  border:1px solid #1b222c;border-radius:10px;background:#070a0e;overflow:hidden;
}
.terminal-top{
  height:38px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #171d25;background:#0b0f14;
}
.terminal-left{display:flex;align-items:center;gap:8px;color:#65717e;font:10px/1 "SFMono-Regular",Consolas,monospace}
.terminal-dot{width:6px;height:6px;box-shadow:none}
.live-label{color:#557061;font:700 8px/1 "SFMono-Regular",Consolas,monospace;letter-spacing:.12em}
pre{
  margin:0;min-height:390px;max-height:560px;overflow:auto;padding:18px;
  color:#d7e0e9;background:#070a0e;
  font:11.5px/1.7 "SFMono-Regular",Consolas,"Liberation Mono",monospace;
  white-space:pre-wrap;word-break:break-word;scrollbar-width:thin;scrollbar-color:#26303b transparent;
}
.disabled{pointer-events:none;opacity:.35}
footer{display:flex;justify-content:space-between;padding:17px 2px 0;color:#3e4854;font-size:9px}

/* Login */
.login-page{min-height:100vh;display:grid;place-items:center;padding:28px}
.login-shell{
  width:min(820px,100%);display:grid;grid-template-columns:1fr 360px;gap:70px;align-items:center;
}
.login-left h1{font-size:40px}
.login-left p{font-size:13px}
.login-panel{
  border:1px solid var(--line);border-radius:13px;background:#0f141b;padding:24px;box-shadow:var(--shadow);
}
.login-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.login-top h2{margin:0;font-size:18px}
.login-top p{margin:4px 0 0;color:var(--muted);font-size:10px}
.lock-dot{background:var(--blue);box-shadow:0 0 0 4px rgba(91,140,255,.08)}
.login-panel label{display:block;margin-bottom:7px;color:#8993a1;font-size:10px}
.login-button{width:100%;margin-top:11px}
.error-box{margin-bottom:14px;padding:10px 11px;border-radius:8px;background:#241419;border:1px solid #4a252d;color:#ff929f;font-size:10px}

/* Responsive */
@media(max-width:960px){
  .shell{grid-template-columns:82px minmax(0,1fr)}
  .sidebar{width:82px;padding:22px 12px}
  .side-brand{justify-content:center;padding:0 0 22px}
  .side-brand>div:last-child,.nav-item span:last-child,.server-mini div,.logout-btn{display:none}
  .nav-item{justify-content:center;padding:0}
  .nav-icon{font-size:16px}
  .server-mini{justify-content:center;padding:14px 0}
  .main{grid-column:2;padding:28px 24px 44px}
}
@media(max-width:760px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .create-form{grid-template-columns:1fr}
  .login-shell{grid-template-columns:1fr;max-width:390px}
  .login-left{display:none}
}
@media(max-width:560px){
  .shell{display:block}
  .sidebar{display:none}
  .main{grid-column:auto;padding:22px 14px 36px}
  .page-head{align-items:flex-start}
  .head-status{display:none}
  .page-head h1{font-size:25px}
  .metrics{gap:9px}
  .metric{min-height:112px;padding:15px}
  .metric-row strong{font-size:26px}
  .card{border-radius:11px}
  .create-card,.activity-card{padding:16px}
  .activity-head{flex-direction:column}
  .actions{width:100%}
  .actions>*{flex:1}
  pre{min-height:340px}
}