:root { color-scheme: light; }
.account-access {
    --access-ink: #1c3238; --access-muted: #5b7075; --access-accent: #08796b;
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    color: var(--access-ink); font: 14px/1.6 Inter, system-ui, sans-serif;
    background-color: #f5f9f8;
    background-image: linear-gradient(#dceae54d 1px, transparent 1px), linear-gradient(90deg, #dceae54d 1px, transparent 1px);
    background-size: 56px 56px;
}
.account-access * { box-sizing: border-box; letter-spacing: 0; }
.account-access a { color: var(--access-accent); text-decoration: none; }
.account-access a:hover { text-decoration: underline; }
.access-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 16px 5%; border-bottom: 1px solid #e0e9e5; background: #ffffffed; }
.access-brand { display: flex; align-items: center; gap: 11px; min-width: 0; font-size: 20px; font-weight: 700; color: var(--access-ink) !important; }
.access-brand span { overflow-wrap: anywhere; }
.access-brand img { object-fit: contain; object-position: left center; flex: none; width: auto; max-width: 176px; height: 36px; }
.access-brand:has(img) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.access-nav > a:last-child { flex: none; font-size: 13px; font-weight: 600; }
.access-main { flex: 1; display: grid; place-items: center; padding: 42px 24px; }
.access-content { position: relative; width: 100%; max-width: 456px; padding: 32px 36px; background: #fff; border: 1px solid #dce7e3; border-top: 3px solid #0d8877; border-radius: 8px; box-shadow: 0 12px 40px #214d3d08; }
.access-emblem { width: 40px; height: 40px; display: grid; place-items: center; color: #08796b; background: #e5f5ed; border-radius: 8px; font-size: 18px; margin-bottom: 22px; }
.access-heading { margin-bottom: 26px; }
.access-label { color: var(--access-accent); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.access-content h1 { font-size: 28px; line-height: 1.25; font-weight: 650; margin: 8px 0 10px; }
.access-heading p { color: var(--access-muted); margin: 0; font-size: 14px; }
.access-form { display: grid; gap: 18px; }
.access-content label { display: block; color: #334f54; font-size: 13px; font-weight: 550; margin-bottom: 7px; }
.access-content input:not([type=checkbox]):not([type=hidden]) { display: block; width: 100%; height: 46px; border: 1px solid #c9d9d4; border-radius: 6px; padding: 10px 13px; color: var(--access-ink); background: #fcfefd; font-size: 14px; box-shadow: none; }
.access-content input:focus { outline: 3px solid #d5eee5; outline-offset: 1px; border-color: var(--access-accent); }
.access-password { position: relative; }
.access-password input { padding-right: 48px !important; }
.access-password button { position: absolute; top: 1px; right: 1px; width: 44px; height: 44px; background: none; border: 0; border-radius: 5px; color: var(--access-muted); cursor: pointer; font-size: 16px; }
.access-password button:hover { color: var(--access-accent); background: #eff8f3; }
.access-content input[type=checkbox] { flex: none; width: 16px; height: 16px; margin: 3px 0 0; border: 1px solid #abc2ba; border-radius: 3px; accent-color: var(--access-accent); }
.access-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.access-options label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
.access-content .access-submit, .access-content button[type=submit] { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--access-accent); border-radius: 6px; background: var(--access-accent); color: #fff !important; font: 600 14px Inter, system-ui, sans-serif; text-transform: none; text-decoration: none; cursor: pointer; }
.access-content button[type=submit]:hover { background: #056354; }
.access-submit span { margin-left: auto; }
.access-terms { display: flex !important; gap: 10px; align-items: flex-start; font-size: 12px !important; line-height: 1.7; }
.access-switch { padding-top: 22px; border-top: 1px solid #e4ece8; margin: 26px 0 0; font-size: 13px; text-align: center; color: var(--access-muted); }
.access-switch a { font-weight: 600; }
.access-status { padding: 12px; margin-bottom: 20px; color: #087050; background: #eaf8f1; border-radius: 5px; }
.access-content ul.text-red-600 { color: #b8324e; font-size: 12px; margin-top: 7px; padding-left: 0; list-style: none; }
.access-content .text-sm { font-size: 13px; line-height: 1.7; }
.access-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; padding: 20px; font-size: 12px; color: var(--access-muted); }
.access-footer a { color: var(--access-muted); }
.access-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.account-access :focus-visible { outline: 3px solid #2868cf; outline-offset: 3px; }
@media(max-width: 480px) {
    .access-main { padding: 24px 16px; }
    .access-content { padding: 26px 22px; }
    .access-nav { min-height: 66px; padding: 14px 20px; }
    .access-brand { font-size: 17px; }
    .access-content h1 { font-size: 25px; }
    .access-content input:not([type=checkbox]):not([type=hidden]) { font-size: 16px; }
}
@media(prefers-reduced-motion: no-preference) {
    .access-content { animation: access-in .3s ease-out; }
    .access-submit { transition: background .18s; }
    @keyframes access-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}