/* ========== TIGRAN.CLOUD STATUS — minimal industrial dark UI ========== */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

:root{
  --bg:#0a0a0a;
  --bg-2:#111;
  --bg-3:#161616;
  --ink:#f4f4f4;
  --ink-dim:#8a8a8a;
  --ink-faint:#5a5a5a;
  --accent:#ff3c00;
  --ok:#3ddc97;
  --warn:#ffb000;
  --crit:#ff3c00;
  --idle:#5a5a5a;
  --line:#1f1f1f;
  --line-bright:#2a2a2a;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; height:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Oswald',sans-serif;
  font-weight:400;
  letter-spacing:.02em;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  position:relative;
  overflow-x:hidden;
}

/* grid background, identical aesthetic to landing */
body::before{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:80px 80px;
  opacity:.35;
  pointer-events:none;
  z-index:0;
}
body::after{
  content:""; position:fixed; inset:0;
  background:radial-gradient(ellipse at 50% 25%,transparent 0%,var(--bg) 75%);
  pointer-events:none; z-index:0;
}
.noise{
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events:none; z-index:1; mix-blend-mode:overlay;
}

/* ---------- header ---------- */
header{
  position:relative; z-index:2;
  padding:clamp(14px,2.8vw,22px) clamp(20px,4vw,40px);
  padding-top:calc(clamp(14px,2.8vw,22px) + var(--safe-t));
  display:flex; justify-content:space-between; align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.brand{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(18px,3vw,24px);
  letter-spacing:.18em;
  color:var(--ink);
  display:flex; align-items:center; gap:14px;
  text-decoration:none;
}
.brand-sep{ color:var(--ink-faint); margin:0 .15em; }
.brand .dot{
  width:12px; height:12px;
  background:var(--idle);
  display:inline-block;
  transform:rotate(45deg);
  flex-shrink:0;
  transition:background .4s ease, box-shadow .4s ease;
}
.brand .dot[data-state="ok"]      { background:var(--ok);   box-shadow:0 0 18px var(--ok); }
.brand .dot[data-state="warn"]    { background:var(--warn); box-shadow:0 0 18px var(--warn); }
.brand .dot[data-state="crit"]    { background:var(--crit); box-shadow:0 0 18px var(--crit); animation:pulse 1.6s ease-in-out infinite; }
.brand .dot[data-state="loading"] { background:var(--idle); box-shadow:none; animation:pulse 1.2s ease-in-out infinite; }

.meta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--ink-dim);
  letter-spacing:.08em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.meta-sep{ color:var(--ink-faint); }

/* ---------- main / blocks ---------- */
main{
  position:relative; z-index:2;
  flex:1;
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:clamp(20px,4vw,36px) clamp(16px,4vw,32px) clamp(40px,6vw,60px);
  display:grid;
  gap:clamp(20px,3vw,32px);
}
.block{
  border:1px solid var(--line-bright);
  background:var(--bg-2);
  padding:clamp(16px,2.5vw,24px);
  position:relative;
}
.block::before{
  /* subtle corner ticks for industrial feel */
  content:""; position:absolute; top:-1px; left:-1px;
  width:10px; height:10px;
  border-top:1px solid var(--ink-dim);
  border-left:1px solid var(--ink-dim);
  pointer-events:none;
}
.block::after{
  content:""; position:absolute; bottom:-1px; right:-1px;
  width:10px; height:10px;
  border-bottom:1px solid var(--ink-dim);
  border-right:1px solid var(--ink-dim);
  pointer-events:none;
}
h2{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:clamp(12px,2vw,18px);
  padding-bottom:10px;
  border-bottom:1px dashed var(--line-bright);
}

/* ---------- rows (services, infra, containers) ---------- */
.rows{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.row{
  display:grid;
  grid-template-columns:14px 1fr auto auto;
  align-items:center;
  gap:14px;
  padding:10px 6px;
  border-bottom:1px solid transparent;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  transition:background .2s ease;
}
.row:hover{ background:var(--bg-3); }
.row .led{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--idle);
  flex-shrink:0;
}
.row .led[data-state="ok"]   { background:var(--ok);   box-shadow:0 0 8px rgba(61,220,151,.6); }
.row .led[data-state="warn"] { background:var(--warn); box-shadow:0 0 8px rgba(255,176,0,.6); }
.row .led[data-state="crit"] { background:var(--crit); box-shadow:0 0 8px rgba(255,60,0,.7); }

.row .name{
  color:var(--ink);
  display:flex; flex-direction:column; gap:2px;
  min-width:0;
}
.row .name .sub{
  font-size:11px; color:var(--ink-dim);
  text-transform:lowercase;
  letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row .badges{
  display:flex; gap:6px; align-items:center;
  flex-wrap:wrap; justify-content:flex-end;
}
.badge{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--line-bright);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  white-space:nowrap;
}
.badge.ok{ color:var(--ok); border-color:rgba(61,220,151,.3); }
.badge.warn{ color:var(--warn); border-color:rgba(255,176,0,.3); }
.badge.crit{ color:var(--crit); border-color:rgba(255,60,0,.3); }
.badge.muted{ color:var(--ink-faint); }
.row .lat{
  font-size:11px;
  color:var(--ink-dim);
  text-align:right;
  min-width:48px;
}

.rows.compact .row{
  grid-template-columns:1fr auto auto;
  padding:8px 6px;
}

/* ---------- backup block ---------- */
.kv{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px;
}
.kv .item{
  display:flex; flex-direction:column; gap:4px;
  font-family:'JetBrains Mono',monospace;
}
.kv .item .k{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.kv .item .v{
  font-size:16px; color:var(--ink); font-weight:500;
}
.kv .item .v.ok   { color:var(--ok); }
.kv .item .v.warn { color:var(--warn); }
.kv .item .v.crit { color:var(--crit); }

/* ---------- resource bars ---------- */
.bars{ display:flex; flex-direction:column; gap:14px; }
.bar{
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:14px;
  align-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
}
.bar .lbl{
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
}
.bar .track{
  height:8px;
  background:var(--bg-3);
  border:1px solid var(--line-bright);
  position:relative;
  overflow:hidden;
}
.bar .fill{
  position:absolute; inset:0 auto 0 0;
  background:var(--ok);
  transition:width .6s ease, background .4s ease;
}
.bar .fill.warn{ background:var(--warn); }
.bar .fill.crit{ background:var(--crit); }
.bar .val{
  color:var(--ink);
  white-space:nowrap;
  text-align:right;
  font-size:12px;
  min-width:120px;
}

/* ---------- footer ---------- */
footer{
  position:relative; z-index:2;
  padding:14px clamp(20px,4vw,40px);
  padding-bottom:calc(14px + var(--safe-b));
  border-top:1px solid var(--line);
  background:rgba(10,10,10,.6);
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--ink-faint);
  letter-spacing:.12em;
  text-transform:uppercase;
  display:flex; justify-content:center; gap:10px;
}
footer a{ color:var(--ink-dim); text-decoration:none; }
footer a:hover{ color:var(--accent); }

/* ---------- animations ---------- */
@keyframes pulse{
  0%,100%{ opacity:1; transform:rotate(45deg) scale(1); }
  50%   { opacity:.4; transform:rotate(45deg) scale(.85); }
}
.brand .dot[data-state="loading"]{ transform:rotate(45deg); }

/* ---------- responsive ---------- */
@media (max-width:600px){
  body::before{ background-size:48px 48px; }
  header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .meta{ font-size:10px; }
  .row{ grid-template-columns:14px 1fr auto; gap:10px; }
  .row .lat{ display:none; }
  .bar{ grid-template-columns:70px 1fr; }
  .bar .val{ grid-column:1 / -1; text-align:left; min-width:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}