/* ============================================================
   LOGIN
   ============================================================ */
.login-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--elev-3); overflow: hidden; border: 1px solid var(--divider); border-top: 4px solid var(--primary); }
.login-brand { padding: var(--sp-8) var(--sp-8) var(--sp-4); text-align: center; }
.login-brand .mark { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto var(--sp-4); font-size: 22px; box-shadow: var(--elev-2); }
.login-form { padding: var(--sp-2) var(--sp-8) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
.login-form .forgot { align-self: flex-end; font-size: var(--fs-label); color: var(--on-surface-variant); text-decoration: underline; background: none; border: none; }

/* ============================================================
   DASHBOARD SPECIFICS
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.dash-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 1100px) {
  .dash-layout { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .shell { grid-template-columns: 72px 1fr; }
  .nav-rail-item span { display: none; }
}

.filter-select-wide select { min-width: 160px; }

/* Configurator split layout */
.config-split { display: grid; grid-template-columns: 380px 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .config-split { grid-template-columns: 1fr; } }

.help-grid, .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--sp-5); }