:root,
html {
  --workplace-accent: #27766f;
  --workplace-accent-dark: #195a55;
  --workplace-accent-soft: #eaf6f3;
  --app-accent: var(--workplace-accent);
  --app-accent-rgb: 39, 118, 111;
  --app-accent-dark: var(--workplace-accent-dark);
  --app-accent-soft: var(--workplace-accent-soft);
  --app-focus-ring: rgb(39 118 111 / 20%);
  --podium-accent: var(--workplace-accent);
  --podium-accent-strong: var(--workplace-accent-dark);
  --podium-accent-soft: var(--workplace-accent-soft);
  --podium-primary: var(--workplace-accent);
  --podium-primary-dark: var(--workplace-accent-dark);
  --podium-primary-gradient: linear-gradient(135deg, #27766f 0%, #195a55 100%);
  --podium-primary-soft: var(--workplace-accent-soft);
  --bs-primary: #27766f;
  --bs-primary-rgb: 39, 118, 111;
  --bs-link-color: #195a55;
  --bs-link-hover-color: #103f3b;
}
.app-workspace { min-width: 0; padding: 2rem; }
.app-navigation { display: grid; gap: .35rem; padding: 1rem; }
.app-nav-link { align-items: center; border-radius: .75rem; color: inherit; display: flex; gap: .75rem; padding: .75rem 1rem; text-decoration: none; }
.app-nav-link:hover { background: color-mix(in srgb, var(--workplace-accent) 10%, white); color: var(--workplace-accent); }
.page-heading { margin-bottom: 1.5rem; }
.eyebrow { color: var(--workplace-accent); font-size: .8rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.summary-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.summary-card { background: white; border: 1px solid #dedde5; border-radius: 1rem; display: grid; gap: .5rem; padding: 1.25rem; }
.summary-card strong { font-size: 2rem; }
.workplace-auth-body {
  background:
    radial-gradient(circle at 18% 12%, rgb(39 118 111 / 14%), transparent 32rem),
    linear-gradient(145deg, #f8fbfa 0%, #eef5f3 100%);
}
.workplace-auth-body .auth-header { min-height: 96px; }
.workplace-auth-brand { gap: 14px; }
.workplace-auth-mark {
  display: grid !important;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgb(39 118 111 / 18%);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(25 90 85 / 12%);
}
.workplace-auth-mark svg { width: 25px; height: 25px; fill: none; stroke: var(--workplace-accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.workplace-auth-brand strong { font-size: 1.05rem; }
.workplace-auth-body .auth-main { padding-bottom: 72px; }
.workplace-auth-body .auth-card { box-sizing: border-box; width: min(100%, 520px); border-color: rgb(39 118 111 / 16%); box-shadow: 0 24px 70px rgb(25 90 85 / 13%); }
.workplace-auth-body .auth-eyebrow { color: var(--workplace-accent); }
.workplace-auth-body .auth-card-heading h1 { font-size: clamp(2rem, 5vw, 2.45rem); }
.workplace-auth-body .auth-form > div:not(.auth-form-options) { display: grid; gap: 7px; }
.workplace-auth-body .auth-form .form-label { margin: 0; color: #3d4947; font-size: .84rem; font-weight: 700; }
.workplace-auth-body .form-control:focus { border-color: var(--workplace-accent); box-shadow: 0 0 0 3px var(--app-focus-ring) !important; }
.workplace-auth-body .auth-primary-action { min-height: 50px; background: var(--podium-primary-gradient) !important; border-color: var(--workplace-accent-dark) !important; }
.workplace-auth-body .auth-microsoft-action { min-height: 50px; border-color: rgb(39 118 111 / 45%); color: var(--workplace-accent-dark); }
.workplace-auth-body .auth-microsoft-action:hover { border-color: var(--workplace-accent); background: var(--workplace-accent-soft); color: var(--workplace-accent-dark); }

@media (max-width: 575.98px) {
  .workplace-auth-body .auth-header { min-height: 76px; }
  .workplace-auth-mark { width: 38px; height: 38px; }
  .workplace-auth-body .auth-card { padding: 28px 22px; }
}