:root{
  --navy:#0b2541; --navy-lift:#16335a; --pink:#ec7c82; --rose:#c85a61;
  --ink:#17202c; --muted:#5f6b7a; --line:#dfe4ea; --bg:#f6f7f9; --card:#fff;
  --ok:#1d7a4d; --warn:#9a6a12; --bad:#a32d2d;
  --radius:8px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.6 "Hanken Grotesk",system-ui,-apple-system,sans-serif;
}
a{color:var(--navy-lift)}

.topbar{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  background:var(--navy); color:#fff; padding:.85rem 1.5rem;
}
.wordmark{
  font-family:"League Spartan",sans-serif; font-weight:600; font-size:1.15rem;
  color:var(--pink); text-decoration:none; letter-spacing:.01em;
}
.wordmark span{color:#fff; font-weight:600}
.topbar nav{display:flex; gap:1.1rem; margin-right:auto; flex-wrap:wrap}
.topbar nav a{color:#cdd7e4; text-decoration:none; font-size:.93rem}
.topbar nav a:hover,.topbar nav a.on{color:#fff}
.signout{display:flex; align-items:center; gap:.75rem}
.who{color:#cdd7e4; font-size:.87rem}
.signout button{
  background:transparent; border:1px solid #39506f;
  color:#cdd7e4; padding:.3rem .7rem; border-radius:var(--radius);
  font:inherit; font-size:.85rem; cursor:pointer;
}
.signout button:hover{color:#fff; border-color:#6b8199}

main{max-width:1100px; margin:0 auto; padding:1.75rem 1.5rem 3rem}
h1{font-size:1.5rem; font-weight:600; margin:0 0 1.25rem}
h2{font-size:1.1rem; font-weight:600; margin:2rem 0 .75rem}

.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.25rem; margin-bottom:1.25rem}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin-bottom:1.5rem}
.stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.15rem}
.stat b{display:block; font-size:1.9rem; font-weight:600; line-height:1.1; color:var(--navy)}
.stat span{font-size:.85rem; color:var(--muted)}

table{width:100%; border-collapse:collapse; background:var(--card)}
table th,table td{text-align:left; padding:.62rem .8rem; border-bottom:1px solid var(--line); font-size:.9rem}
table th{font-weight:600; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em}
table tr:last-child td{border-bottom:0}
.table-wrap{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:1.25rem}

.pill{display:inline-block; padding:.13rem .55rem; border-radius:99px; font-size:.76rem; font-weight:500}
.pill-live{background:#e6f4ec; color:var(--ok)}
.pill-staged{background:#eef1f6; color:var(--navy-lift)}
.pill-unassigned{background:#f4f0e6; color:var(--warn)}
.pill-suspended,.pill-decommissioned{background:#f7ecec; color:var(--bad)}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.4rem}
.dot-on{background:var(--ok)} .dot-off{background:var(--bad)}

form.stack{display:grid; gap:.9rem; max-width:34rem}
form.row{display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap}
label{display:block; font-size:.85rem; font-weight:500; margin-bottom:.25rem; color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  width:100%; padding:.5rem .65rem; border:1px solid var(--line); border-radius:var(--radius);
  font:inherit; font-size:.92rem; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pink); outline-offset:0; border-color:var(--pink)}
textarea{min-height:5rem; resize:vertical}

button.primary,a.primary{
  background:var(--pink); color:#fff; border:0; padding:.55rem 1.1rem;
  border-radius:var(--radius); font:inherit; font-weight:500; cursor:pointer; text-decoration:none; display:inline-block;
}
button.primary:hover,a.primary:hover{background:var(--rose)}
button.ghost{
  background:#fff; color:var(--navy); border:1px solid var(--line);
  padding:.45rem .85rem; border-radius:var(--radius); font:inherit; font-size:.88rem; cursor:pointer;
}
button.ghost:hover{border-color:var(--navy-lift)}
button.danger{background:#fff; color:var(--bad); border:1px solid #e6c4c4; padding:.45rem .85rem; border-radius:var(--radius); font:inherit; font-size:.88rem; cursor:pointer}

.flash{padding:.7rem 1rem; border-radius:var(--radius); margin-bottom:1.25rem; font-size:.92rem}
.flash-ok{background:#e6f4ec; color:var(--ok)}
.flash-error{background:#f7ecec; color:var(--bad)}
.flash-warn{background:#f4f0e6; color:var(--warn)}

.muted{color:var(--muted); font-size:.87rem}
.token{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; background:#f2f4f7; padding:.7rem .85rem; border-radius:var(--radius); word-break:break-all; border:1px solid var(--line)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem}

footer{max-width:1100px; margin:0 auto; padding:0 1.5rem 2.5rem; color:var(--muted); font-size:.8rem}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy); padding:1.5rem}
.login-card{background:#fff; border-radius:14px; padding:2rem; width:100%; max-width:23rem}
.login-card .wordmark{display:block; margin-bottom:1.5rem; font-size:1.3rem}