/* ==========================================================================
   Deskbox Control — design system
   ========================================================================== */
:root{
  --bg:#070a0f;
  --bg-glow-1:rgba(79,140,255,.10);
  --bg-glow-2:rgba(46,204,113,.06);
  --panel:rgba(19,25,34,.72);
  --panel-solid:#131922;
  --panel-hi:rgba(28,36,48,.85);
  --line:rgba(255,255,255,.07);
  --line-hi:rgba(255,255,255,.13);
  --txt:#eaf1fa; --muted:#8496ad; --dim:#5a6b81;
  --up:#22d97a; --down:#ff5470; --warn:#ffb020; --info:#4facfe; --accent:#5b8cff;
  --crit:#ff2d6f; --violet:#a479ff;
  --grad-accent:linear-gradient(135deg,#5b8cff 0%,#a479ff 100%);
  --grad-up:linear-gradient(135deg,#22d97a 0%,#4facfe 100%);
  --grad-down:linear-gradient(135deg,#ff5470 0%,#ff9068 100%);
  --r:14px; --r-sm:9px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 8px 32px rgba(0,0,0,.4);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 12% -8%, var(--bg-glow-1), transparent 60%),
    radial-gradient(700px 420px at 88% 4%, var(--bg-glow-2), transparent 60%);
  background-attachment:fixed;
}
a{color:var(--accent);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:#8fb0ff}
h1,h2,h3{margin:0 0 .55rem;font-weight:660;letter-spacing:-.02em}
h1{font-size:1.5rem} h2{font-size:1.02rem} h3{font-size:.92rem}
::selection{background:rgba(91,140,255,.3)}

/* scrollbars */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:9px}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}

/* ------------------------------------------------------------- layout */
.layout{display:flex;min-height:100vh}
.side{
  width:236px;flex:0 0 236px;padding:20px 14px;position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,rgba(19,25,34,.9),rgba(11,15,21,.9));
  border-right:1px solid var(--line);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;overflow-y:auto;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.02rem;
  padding:2px 10px 20px;color:#fff;letter-spacing:-.02em}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--up);
  box-shadow:0 0 0 0 rgba(34,217,122,.6);animation:ring 2.6s infinite}
@keyframes ring{
  0%{box-shadow:0 0 0 0 rgba(34,217,122,.55)}
  70%{box-shadow:0 0 0 9px rgba(34,217,122,0)}
  100%{box-shadow:0 0 0 0 rgba(34,217,122,0)}
}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:10px;color:var(--muted);font-weight:530;font-size:.885rem;
  position:relative;transition:all .2s var(--ease)
}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.nav a.on{background:rgba(91,140,255,.13);color:#fff}
.nav a.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--grad-accent)}
.nav .badge{background:var(--grad-down);color:#fff;border-radius:20px;padding:1px 7px;
  font-size:.68rem;font-weight:700;box-shadow:0 2px 8px rgba(255,84,112,.35)}
.side .foot{margin-top:auto;padding:14px 12px 4px;font-size:.73rem;color:var(--dim);
  border-top:1px solid var(--line)}
.main{flex:1;min-width:0;padding:26px 30px 70px;animation:fadeUp .4s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:20px;flex-wrap:wrap}
.topbar .meta{color:var(--dim);font-size:.82rem;margin-top:2px}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--up);
  margin-right:5px;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* -------------------------------------------------------------- cards */
.grid{display:grid;gap:15px}
.g4{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  backdrop-filter:blur(16px);box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease)
}
.card:hover{border-color:var(--line-hi)}
.card.tight{padding:15px 16px}
.card h2,.card h3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card .sub{color:var(--dim);font-size:.76rem;font-weight:450}
.card.accent::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad-accent);opacity:.7}

/* --------------------------------------------------------- stat tiles */
.stat{display:flex;flex-direction:column;gap:5px}
.stat .n{font-size:2rem;font-weight:700;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.stat .l{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.n.up{color:var(--up)} .n.down{color:var(--down)} .n.warn{color:var(--warn)} .n.info{color:var(--info)}
.tile{position:relative}
.tile .ico{position:absolute;top:0;right:0;font-size:1.15rem;opacity:.22}
.flash{animation:flash .8s var(--ease)}
@keyframes flash{0%{background:rgba(91,140,255,.16)}100%{background:transparent}}

/* ------------------------------------------------------------ meters */
.meter{height:5px;background:rgba(0,0,0,.45);border-radius:5px;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;border-radius:5px;background:var(--grad-up);
  transition:width .7s var(--ease),background .3s}
.meter i.w{background:linear-gradient(135deg,#ffb020,#ff8a3d)}
.meter i.d{background:var(--grad-down)}

/* ------------------------------------------------------------- pills */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:.7rem;font-weight:680;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;border:1px solid transparent;transition:all .2s var(--ease)}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
  box-shadow:0 0 6px currentColor}
.pill.up{background:rgba(34,217,122,.12);color:var(--up);border-color:rgba(34,217,122,.25)}
.pill.up::before{animation:blink 2s infinite}
.pill.down{background:rgba(255,84,112,.13);color:var(--down);border-color:rgba(255,84,112,.28)}
.pill.down::before{animation:blink 1s infinite}
.pill.degraded{background:rgba(255,176,32,.13);color:var(--warn);border-color:rgba(255,176,32,.28)}
.pill.unknown,.pill.paused{background:rgba(132,150,173,.1);color:var(--muted);border-color:var(--line)}
.pill.critical{background:rgba(255,45,111,.14);color:var(--crit);border-color:rgba(255,45,111,.3)}
.pill.error{background:rgba(255,84,112,.13);color:var(--down);border-color:rgba(255,84,112,.28)}
.pill.warning{background:rgba(255,176,32,.13);color:var(--warn);border-color:rgba(255,176,32,.28)}
.pill.info,.pill.notice{background:rgba(79,172,254,.12);color:var(--info);border-color:rgba(79,172,254,.26)}
.pill.success{background:rgba(34,217,122,.12);color:var(--up);border-color:rgba(34,217,122,.25)}
.pill.running{background:rgba(79,172,254,.12);color:var(--info);border-color:rgba(79,172,254,.26)}
.pill.running::before{animation:blink 1s infinite}
.pill.failed{background:rgba(255,84,112,.13);color:var(--down);border-color:rgba(255,84,112,.28)}

/* ------------------------------------------------------------ tables */
table{width:100%;border-collapse:collapse;font-size:.865rem}
th{text-align:left;color:var(--muted);font-weight:640;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.07em;padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .18s var(--ease)}
tbody tr:hover{background:rgba(255,255,255,.035)}
.tw{overflow-x:auto;margin:0 -4px;padding:0 4px}
.num{font-variant-numeric:tabular-nums;text-align:right}
code,.mono{font-family:var(--mono);font-size:.82em}

/* ------------------------------------------------------------- forms */
label{display:block;margin-bottom:5px;color:var(--muted);font-size:.78rem;font-weight:620;
  text-transform:uppercase;letter-spacing:.04em}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]),
select,textarea{
  width:100%;background:rgba(0,0,0,.32);border:1px solid var(--line);color:var(--txt);
  padding:10px 12px;border-radius:var(--r-sm);font:inherit;font-size:.885rem;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]):hover,
select:hover,textarea:hover{border-color:var(--line-hi)}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]):focus,
select:focus,textarea:focus{outline:0;border-color:var(--accent);
  background:rgba(0,0,0,.45);box-shadow:0 0 0 3px rgba(91,140,255,.16)}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden])::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden])[readonly]{color:var(--muted);cursor:pointer}
/* native select arrow */
select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238496ad' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;padding-right:34px}
select option{background:#131922;color:var(--txt)}
/* date/number spinners and autofill */
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]):-webkit-autofill{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px #10161f inset;
  caret-color:var(--txt)}
textarea{min-height:84px;font-family:var(--mono);font-size:.82rem;resize:vertical}
.field{margin-bottom:15px}
.row{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.check{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.check input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.check label{margin:0;color:var(--txt);font-size:.875rem;cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:500}
.hint{color:var(--dim);font-size:.75rem;margin-top:5px;line-height:1.45}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:17px;margin:0 0 16px;
  background:rgba(0,0,0,.14)}
legend{color:var(--txt);font-weight:650;padding:0 9px;font-size:.88rem}

/* ----------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);
  color:var(--txt);border:1px solid var(--line-hi);padding:9px 15px;border-radius:var(--r-sm);
  font:inherit;font-size:.845rem;font-weight:620;cursor:pointer;white-space:nowrap;
  transition:all .2s var(--ease)}
.btn:hover{background:rgba(255,255,255,.11);transform:translateY(-1px);color:var(--txt)}
.btn:active{transform:translateY(0)}
.btn.p{background:var(--grad-accent);border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(91,140,255,.28)}
.btn.p:hover{box-shadow:0 6px 20px rgba(91,140,255,.4);filter:brightness(1.08)}
.btn.d{background:rgba(255,84,112,.12);border-color:rgba(255,84,112,.3);color:var(--down)}
.btn.d:hover{background:rgba(255,84,112,.2)}
.btn.g{background:rgba(34,217,122,.12);border-color:rgba(34,217,122,.3);color:var(--up)}
.btn.g:hover{background:rgba(34,217,122,.2)}
.btn.s{padding:6px 11px;font-size:.775rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
form.inline{display:inline}

/* -------------------------------------------------------------- misc */
.empty{text-align:center;padding:44px 20px;color:var(--dim)}
.empty .big{font-size:2.4rem;margin-bottom:10px;opacity:.4}
.log{background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px;
  font-family:var(--mono);font-size:.78rem;white-space:pre-wrap;word-break:break-word;
  max-height:420px;overflow:auto;color:#b9cadd;line-height:1.55}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.855rem;margin:0}
.kv dt{color:var(--muted);font-weight:550} .kv dd{margin:0;word-break:break-word}
.alert{padding:13px 16px;border-radius:var(--r-sm);margin-bottom:15px;font-size:.87rem;
  border:1px solid transparent;backdrop-filter:blur(8px);animation:fadeUp .3s var(--ease)}
.alert.ok{background:rgba(34,217,122,.09);border-color:rgba(34,217,122,.28);color:#7ff0b3}
.alert.err{background:rgba(255,84,112,.09);border-color:rgba(255,84,112,.28);color:#ffa3b2}
.alert.warn{background:rgba(255,176,32,.09);border-color:rgba(255,176,32,.28);color:#ffd07a}
.alert.info{background:rgba(79,172,254,.09);border-color:rgba(79,172,254,.28);color:#9fd4ff}
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs a{padding:9px 15px;color:var(--muted);font-weight:620;font-size:.85rem;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s var(--ease)}
.tabs a.on{color:var(--txt);border-bottom-color:var(--accent)}
.tabs a:hover{color:var(--txt)}

/* ------------------------------------------------------- data charts */
.chart{width:100%;height:140px;display:block;overflow:visible}
.chart .grid-l{stroke:rgba(255,255,255,.05);stroke-width:1}
.chart .lbl{fill:var(--dim);font-size:9px;font-family:var(--mono)}
.chart path.line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart path.area{stroke:none;opacity:.18}
.chart circle.pt{transition:r .2s var(--ease)}

/* uptime bar strip */
.strip{display:flex;align-items:stretch;gap:2px;height:40px;margin:14px 0 6px}
.strip i{flex:1;min-width:2px;border-radius:2px;background:var(--up);opacity:.75;
  transition:opacity .2s var(--ease),transform .2s var(--ease);cursor:pointer;position:relative}
.strip i:hover{opacity:1;transform:scaleY(1.08)}
.strip i.bad{background:var(--down);opacity:.9}
.strip i.none{background:rgba(255,255,255,.07)}

/* donut ring */
.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.07)}
.ring .fg{transition:stroke-dashoffset 1s var(--ease)}
.ring-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.ring-wrap .mid{position:absolute;text-align:center;line-height:1.15}
.ring-wrap .mid b{display:block;font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.ring-wrap .mid s{display:block;font-size:.66rem;color:var(--muted);text-decoration:none;
  text-transform:uppercase;letter-spacing:.06em}

/* skeleton shimmer while first data loads */
.sk{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.04) 63%);
  background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:6px;color:transparent!important}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* toast */
#toast{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{background:var(--panel-solid);border:1px solid var(--line-hi);border-left:3px solid var(--accent);
  padding:12px 16px;border-radius:var(--r-sm);box-shadow:var(--shadow);font-size:.86rem;
  max-width:340px;animation:slideIn .3s var(--ease)}
.toast.up{border-left-color:var(--up)} .toast.down{border-left-color:var(--down)}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* -------------------------------------------------------------- login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:36px;backdrop-filter:blur(24px);box-shadow:var(--shadow);
  animation:fadeUp .45s var(--ease);position:relative;overflow:hidden}
.login::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad-accent)}
.login .brand{justify-content:center;font-size:1.2rem;padding-bottom:6px}
.login .tag{text-align:center;color:var(--dim);font-size:.8rem;margin-bottom:24px}
.login .btn{width:100%;justify-content:center;padding:12px}

@media(max-width:880px){
  .layout{flex-direction:column}
  .side{width:100%;height:auto;position:sticky;top:0;flex:none;flex-direction:row;
    flex-wrap:wrap;gap:6px;align-items:center;padding:11px 12px}
  .brand{padding:0 12px 0 4px}
  .nav{flex-direction:row;flex-wrap:wrap;gap:3px}
  .nav a{padding:6px 11px;font-size:.83rem}
  .nav a.on::before{display:none}
  .side .foot{display:none}
  .main{padding:18px 15px 60px}
  h1{font-size:1.28rem}
  .stat .n{font-size:1.7rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}