:root{font-family:Inter,system-ui,Arial,sans-serif;color:#20354a;background:#f5f8fb}
*{box-sizing:border-box}
body{margin:0}
.page{max-width:1100px;padding:30px 24px;margin:auto}
header,.brand{display:flex;align-items:center}
header{justify-content:space-between;border-bottom:1px solid #e0e7ee;padding-bottom:24px}
.brand{gap:13px}
.brand-icon{display:grid;place-items:center;width:48px;height:48px;background:#154568;border-radius:12px;color:#fff;font-size:24px;font-weight:800}
.brand strong{display:block;font-size:18px}
.brand small{color:#8493a2;font-size:12px}
.logout{background:white;border:1px solid #dce4eb;padding:10px 15px;border-radius:10px;cursor:pointer}
.welcome{margin:45px 0 26px}
.welcome span{font-size:11px;font-weight:800;letter-spacing:2px;color:#497693}
.welcome h1{margin:10px 0;font-size:29px}
.welcome p{color:#82909e;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.tile{background:#fff;border:1px solid #e2e9f0;border-radius:16px;padding:24px;min-height:175px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:17px;transition:.2s}
a.tile:hover{border-color:#8cacbf;transform:translateY(-3px);box-shadow:0 12px 22px #24476215}
.tile.off{opacity:.55}
.tile .symbol{display:grid;place-items:center;width:43px;height:43px;background:#eaf2f7;border-radius:11px;color:#245b80;font-size:24px}
.tile strong{display:block;font-size:16px}
.tile small{display:block;margin-top:5px;color:#8896a4;font-size:12px}
footer{text-align:center;margin-top:85px;font-size:12px;color:#9aabba}
.overlay{position:fixed;inset:0;background:#f5f8fbed;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:20px}
.overlay[hidden]{display:none}
.login{background:#fff;max-width:400px;width:100%;border:1px solid #e0e8ef;border-radius:20px;padding:32px;box-shadow:0 25px 70px #1f40501a}
.lock{display:grid;place-items:center;width:54px;height:54px;background:#eaf2f7;color:#245b80;border-radius:14px;font-size:30px}
.login h2{margin:22px 0 8px}
.login p{font-size:13px;color:#8393a1;line-height:1.6}
.login label{display:block;font-size:12px;font-weight:700;margin:20px 0 9px}
.login input{width:100%;padding:14px;border-radius:10px;border:1px solid #cbd7e1;font:inherit}
.login button{width:100%;padding:14px;margin-top:10px;background:#154568;border:0;color:white;border-radius:10px;font-weight:700;cursor:pointer}
.login button:disabled{opacity:.6;cursor:wait}
.login .error{color:#b52b45;min-height:18px}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.grid{grid-template-columns:1fr}.page{padding:20px 16px}.welcome{margin:28px 0}.tile{min-height:130px}}

.symbol svg{
  width:24px;
  height:24px;
  stroke:currentColor;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Compact systems-only layout */
.top-actions{
  display:flex;
  justify-content:flex-end;
  margin-bottom:20px;
}
.page{
  padding-top:28px;
}