:root{
  --base:#1e1e2e; --mantle:#181825; --crust:#11111b;
  --surface0:#313244; --surface1:#45475a; --surface2:#585b70;
  --text:#cdd6f4; --subtext1:#bac2de; --subtext0:#a6adc8;
  --green:#a6e3a1; --red:#f38ba8; --yellow:#f9e2af; --mauve:#cba6f7; --blue:#89b4fa; --peach:#fab387;
  --font-ui:'Inter',-apple-system,system-ui,sans-serif; --font-mono:'JetBrains Mono','Consolas',monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--base); color:var(--text); font-family:var(--font-ui); min-height:100vh; display:flex;}

.sidebar{width:220px; background:var(--mantle); padding:24px 16px; display:flex; flex-direction:column; gap:4px; border-right:1px solid var(--surface0); flex-shrink:0;}
.brand{font-weight:700; font-size:15px; letter-spacing:.3px; color:var(--mauve); margin-bottom:24px; padding:0 8px;}
.brand span{color:var(--subtext0); font-weight:400; display:block; font-size:11px; margin-top:2px;}
.nav-item{padding:9px 12px; border-radius:8px; font-size:13.5px; color:var(--subtext1); cursor:pointer; display:flex; align-items:center; gap:10px; text-decoration:none;}
.nav-item.active{background:var(--surface0); color:var(--text); font-weight:600;}
.nav-item:hover:not(.active){background:var(--crust);}
.sidebar-footer{margin-top:auto; padding:0 8px; font-size:12px; color:var(--subtext0);}
.sidebar-footer a{color:var(--subtext1); text-decoration:none;}
.sidebar-footer a:hover{color:var(--text);}

.main{flex:1; padding:28px 36px; max-width:1400px;}
h1{font-size:21px; font-weight:700;}
.subtitle{color:var(--subtext0); font-size:13px; margin-top:4px; margin-bottom:22px;}
.top-row{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px;}

.btn-primary{background:var(--mauve); color:var(--crust); border:none; padding:10px 18px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font-ui);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent; border:1px solid var(--surface1); color:var(--subtext1); padding:9px 16px; border-radius:8px; font-size:13px; cursor:pointer; font-family:var(--font-ui);}
.btn-trigger{background:var(--mauve); color:var(--crust); border:none; padding:7px 14px; border-radius:7px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:var(--font-ui); white-space:nowrap;}
.btn-trigger:hover{filter:brightness(1.08);}
.btn-trigger.loading{opacity:.6; cursor:wait;}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px;}
.stat-card{background:var(--mantle); border:1px solid var(--surface0); border-radius:12px; padding:16px 18px;}
.stat-label{font-size:11.5px; color:var(--subtext0); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;}
.stat-value{font-family:var(--font-mono); font-size:26px; font-weight:600;}
.stat-value.green{color:var(--green);} .stat-value.red{color:var(--red);} .stat-value.yellow{color:var(--yellow);}

.table-wrap{background:var(--mantle); border:1px solid var(--surface0); border-radius:12px; overflow:hidden;}
table{width:100%; border-collapse:collapse;}
thead th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--subtext0); padding:12px 16px; border-bottom:1px solid var(--surface0); font-weight:600;}
tbody tr{border-bottom:1px solid var(--surface0); transition:background .12s;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--crust);}
td{padding:13px 16px; font-size:13.5px; vertical-align:middle;}

.pulse-dot{width:9px; height:9px; border-radius:50%; display:inline-block; position:relative; flex-shrink:0;}
.pulse-dot.online{background:var(--green); animation:pulse 2s infinite;}
.pulse-dot.offline{background:var(--surface2);}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(166,227,161,.55);}
  70%{box-shadow:0 0 0 8px rgba(166,227,161,0);}
  100%{box-shadow:0 0 0 0 rgba(166,227,161,0);}
}

.badge{font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:5px;}
.badge.success{background:rgba(166,227,161,.13); color:var(--green);}
.badge.failed{background:rgba(243,139,168,.13); color:var(--red);}
.badge.running{background:rgba(249,226,175,.13); color:var(--yellow);}

.filters{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.filters select, .filters input, .search{
  background:var(--surface0); border:1px solid var(--surface1); color:var(--text);
  padding:8px 12px; border-radius:8px; font-size:13px; font-family:var(--font-ui);
}
.pill{padding:7px 13px; border-radius:20px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--surface1); color:var(--subtext1);}
.pill.active-all{background:var(--surface0); color:var(--text); border-color:var(--surface0);}
.pill.active-success{background:rgba(166,227,161,.15); color:var(--green); border-color:transparent;}
.pill.active-failed{background:rgba(243,139,168,.15); color:var(--red); border-color:transparent;}

.mono{font-family:var(--font-mono); font-size:12px; color:var(--subtext1);}

.overlay{position:fixed; inset:0; background:rgba(17,17,27,.7); display:none; align-items:center; justify-content:center; z-index:10;}
.overlay.open{display:flex;}
.modal{background:var(--mantle); border:1px solid var(--surface0); border-radius:14px; width:440px; padding:24px;}
.modal h3{font-size:16px; margin-bottom:18px;}
.field{margin-bottom:14px;}
.field label{font-size:12px; color:var(--subtext0); display:block; margin-bottom:6px;}
.field input, .field select{width:100%; background:var(--surface0); border:1px solid var(--surface1); color:var(--text); padding:9px 12px; border-radius:8px; font-size:13px; font-family:var(--font-ui);}
.field-row{display:flex; gap:12px;}
.field-row .field{flex:1;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

.login-wrap{margin:auto; background:var(--mantle); border:1px solid var(--surface0); border-radius:14px; padding:36px; width:340px;}
.login-wrap h1{margin-bottom:6px;}
.login-wrap .field{margin-top:16px;}
.error-text{color:var(--red); font-size:12.5px; margin-top:10px;}