@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-display:swap;src:url(/vendor/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-display:swap;src:url(/vendor/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-display:swap;src:url(/vendor/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url(/vendor/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url(/vendor/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}

:root{
  --navy:#151A30;--navy-2:#1F2644;--side-text:#C6CEE6;--side-muted:#9AA6C8;
  --ink:#1E3050;--muted:#52627E;--blue:#3470C8;--blue-strong:#1F5BFF;--cyan:#35AFFF;
  --peach:#FFD8B5;--bg:#F0F6FF;--line:#DCE8F7;--tint:#E3EEFF;
  --ok:#0E7A52;--ok-bg:#E3F6EE;--orange:#E8893A;--bad:#B42318;--bad-bg:#FDECEA;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:14px/1.5 var(--font);background:var(--bg);color:var(--ink)}
h1,h2,p{margin:0}
button,input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--blue-strong);outline-offset:2px}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--muted)}
.error{color:var(--bad);min-height:1.3em;font-size:13px}
.spacer{flex:1}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 20px;border:0;border-radius:999px;font-weight:700;cursor:pointer;text-decoration:none;font-size:14px}
.btn.sm{height:36px;padding:0 16px}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:#2A5FAE}
.btn.peach{background:var(--peach);color:var(--ink)}
.btn.peach:hover{background:#FFCB9C}
.btn.sec{background:var(--tint);color:var(--ink);height:36px;padding:0 16px}
.btn.sec:hover{background:var(--line)}
.btn.ghost{background:transparent;color:var(--muted);height:36px;padding:0 12px;font-weight:600}
.btn.ghost:hover{color:var(--ink);background:var(--tint)}

/* inputs */
label{display:grid;gap:6px;font-weight:600;font-size:13px;color:var(--muted)}
input,textarea{padding:0 14px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:500}
input:focus,textarea:focus{border-color:var(--blue)}
textarea{height:auto;padding:12px 14px}

/* login */
#login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--bg)}
.login-card{width:100%;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;display:grid;gap:16px;box-shadow:0 12px 40px rgba(21,26,48,.08)}
.login-logo{justify-self:center}
.login-card h1{text-align:center;font-size:22px;font-weight:800;letter-spacing:.02em}
.login-card h1 span{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--muted);margin-top:2px}
.lead{text-align:center;color:var(--muted)}

/* app shell */
#app{display:flex;flex-wrap:wrap;min-height:100vh}
#sidebar{flex:1 0 248px;max-width:272px;background:var(--navy);color:var(--side-text);padding:24px 16px;display:flex;flex-direction:column;gap:24px}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px}
.brand strong{display:block;color:#fff;font-weight:800;font-size:17px;letter-spacing:.02em;line-height:1.15}
.brand small{display:block;font-size:11px;letter-spacing:.08em;color:var(--side-muted)}
.search{display:flex;align-items:center;gap:8px;background:var(--navy-2);border-radius:12px;padding:0 12px;height:40px;color:var(--side-muted)}
.search input{background:transparent;border:0;height:40px;padding:0;color:#fff;width:100%;outline:none}
.search input::placeholder{color:var(--side-muted)}
.search:focus-within{outline:2px solid var(--blue-strong)}
#nav{display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--side-text);font-weight:500;cursor:pointer;text-align:left}
.nav-item:hover{background:var(--navy-2);color:#fff}
.nav-item.active{background:var(--blue);color:#fff;font-weight:700}
.soon{display:flex;flex-direction:column;gap:4px}
.soon-title{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--side-muted);padding:0 12px 6px}
.nav-soon{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;color:var(--side-muted)}
.server-card{margin-top:auto;background:var(--navy-2);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.server-card small{color:var(--side-muted);font-size:12px}
.server-card strong{color:#fff}
.server-card span{font-size:12px;overflow-wrap:anywhere}

#content{flex:999 1 560px;min-width:0;padding:24px 32px 40px;display:flex;flex-direction:column;gap:24px}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.titles{flex:1 1 220px;display:flex;flex-direction:column;gap:2px}
.crumbs-top{font-size:13px;color:var(--muted)}
.crumbs-top i{font-style:normal;color:#7C8CA8}
.titles h1{font-size:26px;font-weight:800;letter-spacing:-.01em}
.pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600}
.pill.plain{background:#fff;border:1px solid var(--line);color:var(--muted);font-weight:500}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.ok i{width:8px;height:8px;border-radius:999px;background:var(--ok)}
.pill.warn{background:#FFEBD9;color:#8A4308}
.pill.warn i{width:8px;height:8px;border-radius:999px;background:#8A4308}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px}
.card h2{font-size:17px;font-weight:700}
.view{display:flex;flex-direction:column;gap:24px}
.cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.col-main{flex:3 1 480px;min-width:0;display:flex;flex-direction:column;gap:24px}
.col-side{flex:2 1 340px;min-width:0;gap:20px}
.stats3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px;min-width:0}
.stat b{display:block;font-size:28px;font-weight:800;line-height:1.1;overflow:hidden;text-overflow:ellipsis}
.stat span{font-size:13px;color:var(--muted)}
.stat b#user{font-size:20px;line-height:1.4}
.stat>div{min-width:0}
.stat-ic{width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-ic.blue{background:var(--tint);color:var(--blue-strong)}
.stat-ic.cyan{background:#DDF3FF;color:#0F6FA8}
.stat-ic.peachic{background:#FFEBD9;color:#A3510F}

.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.action{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-weight:600;cursor:pointer;text-align:left}
.action:hover{border-color:var(--blue);background:var(--bg)}
.action i{margin-left:auto;font-style:normal;color:#7C8CA8}
.act-ic{width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--blue-strong);display:inline-flex;align-items:center;justify-content:center}

.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.services li{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg);border-radius:12px;font-weight:600}
.services li span:first-child{flex:1}
.badge{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.badge.active{background:var(--ok-bg);color:var(--ok)}
.badge.inactive,.badge.failed{background:var(--bad-bg);color:var(--bad)}
.badge.unknown{background:var(--tint);color:var(--muted)}

/* gauges */
.gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center}
.gauge{display:flex;flex-direction:column;align-items:center;gap:8px}
.gauge small{font-size:12px;font-weight:600;color:var(--muted)}
.ring{position:relative;width:88px;height:88px}
.ring svg{width:88px;height:88px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring .trk{stroke:var(--tint)}
.ring .val{stroke-linecap:round;stroke-dasharray:0 226.2;transition:stroke-dasharray .5s}
.ring .blue{stroke:var(--blue-strong)}.ring .cyan{stroke:var(--cyan)}.ring .orange{stroke:var(--orange)}
.ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.info{margin:0;display:flex;flex-direction:column}
.info div{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--tint)}
.info dt{flex:0 0 120px;color:var(--muted)}
.info dd{margin:0;font-weight:600;overflow-wrap:anywhere}

/* files */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs{font-weight:600}
.crumbs a{color:var(--blue);cursor:pointer}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--muted);margin:0 6px}
.table-wrap{overflow-x:auto}
table.files{width:100%;border-collapse:collapse}
.files th{text-align:left;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.04em;padding:8px 10px}
.files td{padding:10px;border-top:1px solid var(--tint);vertical-align:middle}
.files .num{text-align:right;white-space:nowrap}
.files a{color:var(--ink);cursor:pointer;font-weight:500}
.files a.dir{color:var(--blue);font-weight:700}
.files a:hover{text-decoration:underline}
.files .act{white-space:nowrap;text-align:right}
.files .act button{height:30px;padding:0 12px;font-size:12px;margin-left:4px}
textarea#editor-text{width:100%;min-height:360px;font:13px/1.5 ui-monospace,Consolas,monospace;resize:vertical}

/* terminal + account */
form.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
form.inline input{width:200px}
form.stack{display:grid;gap:14px}
.narrow{max-width:440px}
#term{height:480px;background:#0B1020;border-radius:12px;padding:8px}

@media(max-width:900px){
  #sidebar{flex:1 1 100%;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px 16px;gap:8px 16px}
  .search,.soon,.server-card{display:none}
  #nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .nav-item{height:40px}
  #content{padding:20px 16px 32px}
  .gauges{gap:4px}
}