:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202728;
  background: #fafbfc;
  font-synthesis: none;
  color-scheme: light;
  letter-spacing: 0;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button[hidden] { display: none; }
.site-header { min-height: 96px; padding: 24px 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #24332e; text-decoration: none; font-size: 21px; font-weight: 650; }
.brand-symbol { width: 38px; height: 38px; background: #e5efe9; border-radius: 8px; display: grid; place-items: center; }
.brand-symbol img { opacity: .75; }
.header-label { color: #697578; font-size: 13px; }
.access-main { display: grid; place-items: center; padding: 40px 24px 80px; }
.access-form { width: min(100%, 400px); }
.access-symbol { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid #d9e3de; background: #edf3ef; border-radius: 8px; }
.access-symbol img { opacity: .75; }
.eyebrow { font-size: 12px; font-weight: 650; color: #68756f; margin: 0 0 10px; }
h1 { font-size: 32px; line-height: 1.2; font-weight: 650; margin: 0; overflow-wrap: anywhere; }
.project-path { margin: 12px 0 34px; font-size: 14px; color: #758081; overflow-wrap: anywhere; }
.password-label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 10px; }
.password-control { position: relative; display: flex; align-items: center; min-height: 50px; border: 1px solid #c4cdce; border-radius: 6px; background: #fff; transition: border-color 120ms, box-shadow 120ms; }
.password-control:focus-within { border-color: #2c6d56; box-shadow: 0 0 0 3px #e1ede7; }
.password-control.has-error { border-color: #bd5c52; }
.password-control input { width: 100%; min-width: 0; height: 48px; padding: 0 54px 0 14px; border: 0; outline: 0; border-radius: 6px; background: transparent; font-size: 16px; color: #202728; }
.visibility-button { display: grid; place-items: center; position: absolute; right: 5px; top: 5px; width: 38px; height: 38px; background: transparent; border: 0; border-radius: 4px; opacity: .6; }
.visibility-button:hover { background: #f0f3f2; opacity: 1; }
.remember-choice { display: flex; align-items: center; gap: 8px; margin: 18px 0 26px; width: fit-content; font-size: 14px; color: #566164; cursor: pointer; }
.remember-choice input { width: 16px; height: 16px; margin: 0; accent-color: #285f4d; }
.submit-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 20px; border: 1px solid #255a48; border-radius: 6px; background: #285f4d; color: #fff; font-size: 15px; font-weight: 600; transition: background 120ms; }
.submit-button:hover { background: #204c3e; }
.submit-button:disabled { opacity: .75; cursor: progress; }
.submit-icon { filter: invert(1); }
.submit-button[aria-busy="true"] .submit-icon { display: none; }
.submit-button[aria-busy="true"]::after { content: ""; width: 17px; height: 17px; border: 2px solid #ffffff66; border-top-color: #fff; border-radius: 50%; animation: turn 700ms linear infinite; }
.back-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 26px auto 0; color: #657171; font-size: 14px; text-decoration: none; min-height: 32px; }
.back-link:hover { color: #24332e; text-decoration: underline; text-underline-offset: 4px; }
.back-link img { opacity: .55; }
.form-error { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; margin: -10px 0 24px; border: 1px solid #ead1cd; border-radius: 6px; color: #893f36; background: #fcf3f1; font-size: 14px; line-height: 1.5; }
.form-error img { flex: 0 0 auto; margin-top: 2px; opacity: .65; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 24px 48px; border-top: 1px solid #e8ecec; font-size: 12px; color: #7d8788; }
:focus-visible { outline: 2px solid #2c6d56; outline-offset: 4px; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .site-header { min-height: 82px; padding: 20px 24px; }
  .header-label { font-size: 12px; }
  .access-main { padding: 36px 24px 60px; }
  .site-footer { padding: 22px 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }