#app { min-height: 100dvh; }
.app-shell { min-height: 100dvh; padding: 0 max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.page { width: min(100%, 1240px); margin: 0 auto; }
.topbar, .studio-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 900; letter-spacing: -.035em; }
.brand-logo { height: 28px; width: auto; max-width: min(42vw, 180px); }
.brand-logo--login { height: 42px; max-width: min(80vw, 260px); }
.studio-badge { padding-left: .65rem; border-left: 1px solid #555; color: #eee; font-size: .73rem; letter-spacing: .15em; font-weight: 800; }
.studio-brand { display: inline-flex; align-items: center; gap: .65rem; min-width: 0; }
.login-page { min-height: 100dvh; display: grid; align-items: center; padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); background: linear-gradient(180deg, rgba(0,0,0,.35), #080808), radial-gradient(circle at 50% 0%, #3d070b, transparent 48%), var(--bg); }
.login-card { width: min(100%, 450px); margin: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(12,12,12,.94); padding: clamp(1.6rem, 6vw, 3rem); box-shadow: var(--shadow); }
.login-card > .brand-logo--login { margin-bottom: clamp(2rem, 8vh, 3.5rem); }
.brand--login { margin-bottom: clamp(3rem, 10vh, 5.5rem); }
.login-copy { margin-bottom: 1.6rem; }
.login-copy h1 { font-size: clamp(2rem, 8vw, 3rem); }
.stack { display: grid; gap: 1rem; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.loading-page { min-height: 70dvh; display: grid; place-items: center; color: var(--muted); }
.spinner { width: 38px; height: 38px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 760px) { .app-shell { padding-inline: 2.5rem; } }
@media (min-width: 980px) {
  .app-shell { padding-bottom: 2rem; }
  .page { padding-bottom: 3rem; }
}