/* The portal: the brand canvas, a login card and module tiles (app.py). */
main.portal { max-width: 1120px; margin: 0 auto; }
.tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 10px; color: var(--text); min-height: 170px; }
.tile:hover { text-decoration: none; border-color: #C5CDD8; box-shadow: 0 1px 2px rgb(0 25 70 / 0.06), 0 10px 28px rgb(0 25 70 / 0.08); }
.tile-head { display: flex; align-items: center; gap: 10px; }
.tile-head h2 { flex: 1; }
.tile-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.tile .go { margin-left: auto; color: var(--link); font-weight: 500; }
.ver { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; }
.pill { font-size: 12px; border-radius: 10px; padding: 1px 9px; white-space: nowrap; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--bad { background: var(--bad-bg); color: var(--bad); }
.pill--off { background: var(--off-bg); color: var(--off); }
.appbar .ver { margin-right: 4px; }
.login { display: grid; place-items: start center; padding: 12vh 16px 48px; }
.login-card { width: 100%; max-width: 400px; display: grid; gap: 12px; }
.login-card h1 { margin-bottom: 2px; }
.login-card p { margin: 0; }
.login-card label { font-weight: 600; color: var(--zn-01); margin-top: 6px; }
.login-card input[type="password"] { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-s); color: var(--text); background: var(--surface); }
.login-card input[type="password"]:focus { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px rgb(0 120 175 / 0.15); }
.login-card .btn { justify-content: center; margin-top: 4px; }
@media (max-width: 640px) { main { padding: 20px 16px 48px; } .appbar { padding: 0 16px; } }