.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4)}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.stack-sm{display:flex;flex-direction:column;gap:var(--sp-2)}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.center{text-align:center}

/* top bar */
.topbar{position:sticky;top:0;z-index:var(--z-topbar);height:var(--topbar-h);
  background:linear-gradient(180deg,rgba(31,25,21,.92),rgba(20,16,14,.86));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-border);box-shadow:var(--hl)}
.topbar .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.brand{display:flex;align-items:center;gap:var(--sp-3);color:var(--c-text)}
.brand:hover{text-decoration:none}
.brand-mark{height:40px;width:auto}
.brand-word{height:22px;width:auto}
.topbar-actions{display:flex;align-items:center;gap:var(--sp-2)}

/* app shell (post-login pages) */
.app-main{padding-block:var(--sp-6) var(--sp-8)}
.page-head{margin-bottom:var(--sp-5)}
.page-head p{color:var(--c-text-muted);margin:0}
.grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* auth pages (login / forced password change) */
.auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.auth-top{display:flex;justify-content:flex-end;padding:var(--sp-4)}
.auth-body{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-4) var(--sp-4) var(--sp-7)}
.auth-card{width:100%;max-width:var(--container-narrow)}
.auth-logo{display:flex;justify-content:center;margin-bottom:var(--sp-5)}
.auth-logo img{width:min(260px,72vw);height:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.5))}
.auth-title{text-align:center;margin-bottom:var(--sp-1)}
.auth-sub{text-align:center;color:var(--c-text-muted);margin-bottom:var(--sp-5)}
.auth-foot{text-align:center;color:var(--c-text-faint);font-size:var(--fs-sm);padding:var(--sp-4)}

@media (max-width:520px){
  .auth-body{align-items:flex-start;padding-top:0}
  .container{padding-inline:var(--sp-3)}
}

@media (max-width:560px){.brand-word{display:none}}