:root{
  --bg:#020706;
  --card:#07110f;
  --card2:#0b1714;
  --line:rgba(73,255,170,.18);
  --text:#f1fff8;
  --muted:#9bb9ad;
  --emerald:#00d083;
  --emerald2:#10f5a3;
  --danger:#ff5b6e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(16,245,163,.16), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(0,208,131,.11), transparent 24%),
    linear-gradient(145deg,#010302,#06110e 55%,#020706);
}
body:before{
  content:"";
  position:fixed; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at center,black,transparent 75%);
  pointer-events:none;
}
.shell{min-height:100%;display:flex;align-items:center;justify-content:center;padding:38px 20px 70px}
.hero-card{
  width:min(1120px,100%);
  padding:34px;
  border:1px solid var(--line);
  border-radius:32px;
  background:linear-gradient(145deg,rgba(7,17,15,.94),rgba(2,7,6,.9));
  box-shadow:0 30px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(16px);
}
.brand-row{display:flex;gap:18px;align-items:center;margin-bottom:26px}
.logo-wrap{
  width:82px;height:82px;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(16,245,163,.18),rgba(0,0,0,.25));
  border:1px solid rgba(16,245,163,.28);
  box-shadow:0 0 34px rgba(0,208,131,.18);
}
.logo-wrap img{width:64px;height:64px;border-radius:18px;object-fit:cover}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--emerald2);font-size:12px;margin:0 0 5px;font-weight:700}
h1{font-size:clamp(32px,5vw,58px);line-height:1;margin:0;letter-spacing:-.04em}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;margin:26px 0}
.login-panel,.status-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:24px;
}
h2{margin:0 0 8px;font-size:22px}.muted{color:var(--muted);line-height:1.55}.small{font-size:14px;margin-top:22px}
form{display:grid;gap:14px;margin-top:20px}
label{display:grid;gap:7px;font-weight:700;color:#dffbed;font-size:14px}
input{
  width:100%;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 15px;
  background:rgba(0,0,0,.28);color:var(--text);outline:none;font-size:15px;
}
input:focus{border-color:rgba(16,245,163,.65);box-shadow:0 0 0 4px rgba(16,245,163,.08)}
button{
  border:0;border-radius:16px;padding:15px 18px;background:linear-gradient(135deg,var(--emerald),var(--emerald2));
  color:#02100b;font-weight:900;cursor:pointer;box-shadow:0 14px 30px rgba(0,208,131,.2);font-size:15px;
}
button:hover{filter:brightness(1.06)}.message{min-height:22px;color:var(--muted);font-weight:700}
.status-line{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);color:#daf8ec;font-weight:700}
.status-line span{width:10px;height:10px;border-radius:999px;background:var(--emerald2);box-shadow:0 0 18px var(--emerald2)}
.status-line.ok span{background:var(--emerald2);box-shadow:0 0 18px var(--emerald2)}.status-line.ok{color:#daf8ec}
.status-line.pending span{background:#ffd166;box-shadow:0 0 18px #ffd166}.status-line.pending{color:#ffe8ae}
.status-line.error span{background:var(--danger);box-shadow:0 0 18px var(--danger)}.status-line.error{color:#ffc7cf}
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.modules article{
  min-height:92px;border-radius:20px;border:1px solid rgba(16,245,163,.15);
  background:linear-gradient(145deg,rgba(16,245,163,.09),rgba(0,0,0,.24));
  display:flex;align-items:flex-end;padding:18px;font-weight:900;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
footer{position:fixed;right:22px;bottom:16px;color:#c7ffdf;font-weight:800;text-shadow:0 0 18px rgba(0,208,131,.5);font-size:13px}
@media(max-width:820px){.grid{grid-template-columns:1fr}.modules{grid-template-columns:repeat(2,1fr)}.hero-card{padding:22px}.brand-row{align-items:flex-start}.logo-wrap{width:68px;height:68px}.logo-wrap img{width:52px;height:52px}}