/* ==========================================================================
   ZeoFit - Design Tokens
   Theme: "Glass & Iron" - cold steel-blue glass over a graphite forge,
   with an ember-orange accent for energy/intensity.
   Fonts: Outfit (display) + Plus Jakarta Sans (body)
   ========================================================================== */
:root{
  --bg-0:#0a0e13;
  --bg-1:#0d121a;
  --bg-2:#111826;
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.09);
  --glass-brd:rgba(255,255,255,.12);
  --glass-brd-soft:rgba(255,255,255,.07);

  --ember:#ff6b35;
  --ember-soft:rgba(255,107,53,.16);
  --steel:#4da8da;
  --steel-soft:rgba(77,168,218,.16);

  --text:#f5f7fa;
  --text-dim:#c7cdd6;
  --muted:#8a93a1;

  --ok:#3ddc84;
  --ok-soft:rgba(61,220,132,.15);
  --warn:#ffc24b;
  --warn-soft:rgba(255,194,75,.15);
  --bad:#ff5470;
  --bad-soft:rgba(255,84,112,.15);

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-deep:0 24px 60px rgba(0,0,0,.5);
  --shadow-soft:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{
  margin:0; padding:0; background:var(--bg-0);
  overflow-x:hidden; scrollbar-color:rgba(255,255,255,.18) var(--bg-0);
}
body{margin:0;padding:0; overflow-x:hidden;}
body{
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,107,53,.14), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(77,168,218,.16), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(77,168,218,.08), transparent 50%),
    linear-gradient(165deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{font-family:'Outfit',sans-serif; font-weight:700; letter-spacing:-.01em; margin:0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--ember); color:#0a0e13;}
:focus-visible{outline:2px solid var(--steel); outline-offset:2px; border-radius:6px;}
.svg-icon{
  width:1em; height:1em; display:inline-block; vertical-align:-.15em;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Layout helpers ---------- */
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.grid{display:grid; gap:20px;}
.flex{display:flex;}
.between{justify-content:space-between;}
.center{align-items:center;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.muted{color:var(--muted);}
.text-dim{color:var(--text-dim);}
.text-center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}

/* ---------- Glass primitives ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.glass-card{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius-md);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  padding:22px;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease, border-color .2s ease;
}
.glass-card.hover:hover{transform:translateY(-3px); border-color:var(--glass-strong);}
.glass-strong{background:var(--glass-strong); border:1px solid var(--glass-brd);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:12px; border:none; cursor:pointer;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:14.5px;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn.is-loading{opacity:.72; pointer-events:none; transform:none;}
.btn-primary{background:linear-gradient(90deg,var(--ember),#ff8a5c); color:#0a0e13; box-shadow:0 8px 24px rgba(255,107,53,.3);}
.btn-steel{background:linear-gradient(90deg,var(--steel),#6cc6f5); color:#06121c; box-shadow:0 8px 24px rgba(77,168,218,.3);}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--glass-brd);}
.btn-danger{background:rgba(255,84,112,.15); color:#ffb3c0; border:1px solid rgba(255,84,112,.35);}
.btn-sm{padding:8px 14px; font-size:13px; border-radius:9px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

/* ---------- Forms ---------- */
label{display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; font-weight:500;}
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.045); color:var(--text); font-size:14px; font-family:inherit;
}
input::placeholder, textarea::placeholder{color:var(--muted);}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--steel); background:rgba(255,255,255,.07);}
textarea{resize:vertical; min-height:90px;}
.form-row{display:flex; gap:14px; flex-wrap:wrap;}
.form-row > div{flex:1; min-width:160px;}
select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10'><path d='M1 1l6 6 6-6' stroke='%238a93a1' stroke-width='1.6' fill='none'/></svg>"); background-repeat:no-repeat; background-position:right 14px center;}

/* ---------- Badges & status pills ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:99px; font-size:12px; font-weight:600;}
.badge-ok{background:var(--ok-soft); color:var(--ok);}
.badge-warn{background:var(--warn-soft); color:var(--warn);}
.badge-bad{background:var(--bad-soft); color:var(--bad);}
.badge-steel{background:var(--steel-soft); color:var(--steel);}
.badge-ember{background:var(--ember-soft); color:var(--ember);}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--glass-brd);}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:560px;}
table th{text-align:left; padding:14px 16px; color:var(--muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; background:rgba(255,255,255,.04); border-bottom:1px solid var(--glass-brd);}
table td{padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:middle;}
table tr:last-child td{border-bottom:none;}
table tr:hover td{background:rgba(255,255,255,.03);}

/* ---------- Avatar ---------- */
.avatar{width:42px; height:42px; border-radius:12px; object-fit:cover; background:var(--glass-strong); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Outfit',sans-serif; color:var(--steel);}

/* ---------- Stat ring (signature element) ---------- */
.stat-ring{position:relative; width:88px; height:88px;}
.stat-ring svg{transform:rotate(-90deg);}
.stat-ring circle{fill:none; stroke-width:8;}
.stat-ring .track{stroke:rgba(255,255,255,.08);}
.stat-ring .fill{stroke:var(--ember); stroke-linecap:round; transition:stroke-dashoffset 1s ease;}
.stat-ring .val{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-weight:700; font-size:18px;}

/* ---------- Alerts / flash ---------- */
.alert{padding:13px 16px; border-radius:12px; font-size:14px; margin-bottom:18px; border:1px solid transparent;}
.alert-success{background:var(--ok-soft); color:#a9f2c9; border-color:rgba(61,220,132,.35);}
.alert-error{background:var(--bad-soft); color:#ffb3c0; border-color:rgba(255,84,112,.35);}
.alert-info{background:var(--steel-soft); color:#bfe4f7; border-color:rgba(77,168,218,.35);}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--bg-0);}
::-webkit-scrollbar-corner{background:var(--bg-0);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}

/* ---------- Utility ---------- */
.hidden{display:none !important;}
@media (max-width:768px){
  .hide-mobile{display:none !important;}
  .container{padding:0 16px;}
}