:root { color-scheme: light; }

body.account-access {
    --ax-ink: #0b1526;
    --ax-blue: #2563eb;
    --ax-cyan: #0ea5e9;
    --ax-mint: #14b8a6;
    --ax-muted: #5b6b83;
    --ax-line: #dfe7f3;
    background: #eef4fb url('/images/cloud-infrastructure-v3.png') right center/cover no-repeat fixed;
    color: var(--ax-ink);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.account-access::before,
body.account-access::after {
    position: fixed; z-index: 1; content: ""; pointer-events: none;
    border-radius: 50%; filter: blur(84px); opacity: .55;
}
body.account-access::before { top: -170px; left: -150px; width: 470px; height: 470px; background: radial-gradient(circle, rgba(37, 99, 235, .55), rgba(37, 99, 235, 0) 70%); }
body.account-access::after { right: -190px; bottom: -210px; width: 580px; height: 580px; background: radial-gradient(circle, rgba(14, 165, 233, .48), rgba(20, 184, 166, 0) 70%); }

body.account-access a { color: var(--ax-blue); }
body.account-access a:hover { text-decoration: none; }

.access-nav {
    min-height: 70px; padding: 12px 5%;
    background: rgba(255, 255, 255, .8);
    border-bottom: 1px solid rgba(214, 226, 241, .92);
    box-shadow: 0 14px 34px -30px rgba(11, 21, 38, .9);
}
.access-brand {
    display: inline-flex; align-items: center; gap: 9px; min-width: 0;
    padding: 7px 15px 7px 8px; border: 1px solid var(--ax-line); border-radius: 999px;
    background: #fff; color: var(--ax-ink) !important;
    font-size: 18px; font-weight: 800; letter-spacing: -.01em;
    box-shadow: 0 14px 28px -24px rgba(11, 21, 38, .95);
    transition: transform .18s ease, box-shadow .18s ease;
}
.access-brand:hover { transform: translateY(-1px); box-shadow: 0 18px 32px -24px rgba(11, 21, 38, 1); text-decoration: none; }
.access-brand img { height: 27px; max-width: 148px; }
.access-nav-actions { display: flex; align-items: center; gap: 10px; }
.access-nav-actions a { white-space: nowrap; }
.access-nav-link,
.access-nav-actions>a:last-child {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px;
    border: 1px solid var(--ax-line); border-radius: 999px;
    background: #fff; color: #123258; font-size: 12px; font-weight: 700;
    box-shadow: 0 14px 28px -24px rgba(11, 21, 38, .95);
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.access-nav-link span { color: var(--ax-cyan); }
.access-nav-actions>a.access-nav-cta {
    background: linear-gradient(135deg, var(--ax-blue), var(--ax-cyan));
    border-color: transparent; color: #fff;
    box-shadow: 0 16px 30px -20px rgba(37, 99, 235, 1);
}
.access-nav-actions>a.access-nav-cta:hover {
    background: linear-gradient(135deg, var(--ax-blue), var(--ax-cyan));
    border-color: transparent; color: #fff; filter: saturate(1.12);
}
.access-nav-link:hover,
.access-nav-actions>a:last-child:hover {
    background: var(--ax-blue); border-color: var(--ax-blue); color: #fff; transform: translateY(-1px);
}
.access-nav-link:hover span,
.access-nav-actions>a:last-child:hover span { color: #fff; }

.access-main::before {
    width: 100%; border-right: 0;
    background: linear-gradient(100deg, #fff 0%, #f8faff 34%, rgba(246, 250, 255, .9) 50%, rgba(246, 250, 255, .5) 68%, rgba(246, 250, 255, 0) 88%);
}

.access-content {
    position: relative; z-index: 1; overflow: hidden;
    max-width: 520px; padding: 34px 36px 32px;
    border: 1px solid rgba(226, 235, 247, .95); border-top: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fdfeff 100%);
    box-shadow: 0 44px 84px -58px rgba(11, 21, 38, .95), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.access-content::before {
    position: absolute; inset: 0 0 auto 0; height: 5px; content: "";
    background: linear-gradient(90deg, var(--ax-blue), var(--ax-cyan) 55%, var(--ax-mint));
}
.account-access-register .access-content { max-width: 700px; }

.access-emblem {
    width: 46px; height: 46px; margin-bottom: 18px;
    border: 0; border-radius: 14px; color: #fff; font-size: 19px;
    background: linear-gradient(135deg, var(--ax-blue), var(--ax-cyan));
    box-shadow: 0 18px 32px -18px rgba(37, 99, 235, .95);
}
.access-label {
    padding: 5px 12px; border: 1px solid rgba(37, 99, 235, .18); border-radius: 999px;
    background: rgba(37, 99, 235, .08); color: #1d4ed8;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.access-heading { margin-bottom: 26px; }
.access-content h1 { margin: 14px 0 6px; color: var(--ax-ink); font-size: 31px; font-weight: 800; letter-spacing: -.02em; }
.access-heading p { color: var(--ax-muted); font-size: 13.5px; }

.access-content label { color: #33445e; font-size: 12px; font-weight: 700; }
.access-form { gap: 18px; }
.access-form-grid { gap: 16px; }

.access-content input:not([type=checkbox]):not([type=hidden]),
.access-content select {
    height: 48px; border: 1px solid #dde6f2; border-radius: 12px;
    padding-left: 42px; color: #0e1c30; background: #f8fafd;
    font-size: 14px;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.access-content input::placeholder { color: #93a3bd; }
.access-content input:not([type=checkbox]):not([type=hidden]):focus,
.access-content select:focus {
    outline: none; border-color: var(--ax-blue); background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}
.access-input>i:first-child { left: 15px; color: #8296b3; font-size: 14px; width: 17px; }
.access-password input { padding-right: 50px !important; }
.access-password button { width: 46px; height: 46px; border-radius: 0 12px 12px 0; color: #8296b3; }
.access-password button:hover { color: var(--ax-blue); background: rgba(37, 99, 235, .09); }
.access-country img { left: 14px; }
.access-country select { padding-left: 46px; }
.access-content input[type=checkbox] {
    width: 17px; height: 17px; margin-top: 2px;
    border: 1px solid #c3d0e4; border-radius: 5px; accent-color: var(--ax-blue);
}

.access-options { color: var(--ax-muted); font-size: 12.5px; }
.access-options label { color: var(--ax-muted); font-size: 12.5px; font-weight: 600; }
.access-options a { color: var(--ax-blue); font-weight: 700; }
.access-options a:hover { opacity: .78; }

.access-content .access-submit,
.access-content button[type=submit] {
    min-height: 52px; gap: 10px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, var(--ax-blue), var(--ax-cyan));
    color: #fff !important; font-size: 14.5px; font-weight: 800; letter-spacing: .01em;
    box-shadow: 0 24px 42px -24px rgba(37, 99, 235, 1);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.access-content .access-submit:hover,
.access-content button[type=submit]:hover {
    transform: translateY(-2px); filter: saturate(1.12);
    box-shadow: 0 30px 50px -24px rgba(37, 99, 235, 1);
}
.access-content .access-submit:active,
.access-content button[type=submit]:active { transform: translateY(0); }

.access-terms {
    display: flex !important; align-items: flex-start; gap: 10px;
    margin: 2px 0 0 !important; padding: 13px 15px;
    border: 1px solid #e3ebf7; border-radius: 12px;
    background: #f7f9fd; color: #48566e; font-size: 11.5px !important; line-height: 1.6;
}
.access-terms a { color: var(--ax-blue); font-weight: 700; }
.access-terms a:hover { opacity: .78; }

.access-switch {
    margin-top: 22px; padding-top: 20px; border-top: 1px solid #eef2f8;
    color: var(--ax-muted); font-size: 12.5px;
}
.access-switch a { color: var(--ax-blue); font-weight: 800; }
.access-switch a:hover { opacity: .78; }

.access-status {
    padding: 12px 14px; border: 1px solid rgba(16, 185, 129, .3); border-radius: 12px;
    background: linear-gradient(135deg, #ecfdf5, #e0f7f4); color: #047857; font-weight: 600;
}
.access-content ul.text-red-600 { color: #dc2626; font-size: 11.5px; font-weight: 600; }

.access-visual-panel {
    max-width: 478px; padding: 28px;
    border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .82));
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 44px 84px -54px rgba(11, 21, 38, .95);
}
.access-visual-label {
    padding: 6px 13px; border: 1px solid rgba(37, 99, 235, .18); border-radius: 999px;
    background: rgba(37, 99, 235, .08); color: #1d4ed8;
    font-size: 10.5px; letter-spacing: .06em;
}
.access-visual-panel h2 { margin: 14px 0 8px; color: var(--ax-ink); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.access-visual-panel p { color: var(--ax-muted); font-size: 13.5px; }
.access-visual-points { gap: 9px; margin-top: 20px; }
.access-visual-points span {
    min-height: 36px; padding: 0 13px; border: 1px solid #e3ebf7; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: #33445e; font-size: 11.5px; font-weight: 700;
    box-shadow: 0 14px 26px -24px rgba(11, 21, 38, .95);
}
.access-visual-stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.access-visual-stats span {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 13px;
    border: 1px dashed rgba(37, 99, 235, .3); border-radius: 12px;
    background: rgba(247, 250, 255, .8); color: var(--ax-muted); font-size: 11px; font-weight: 600;
}
.access-visual-stats b { color: #123258; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

.access-footer {
    padding: 20px; border-top: 0;
    background: linear-gradient(180deg, #0b1526, #0f1d36);
    color: rgba(203, 213, 225, .72); font-size: 11.5px;
}
.access-footer span { color: rgba(203, 213, 225, .62); }
.access-footer a { color: #cbd5e1; font-weight: 600; }
.access-footer a:hover { color: #7dd3fc; }

.account-access :focus-visible { outline: 3px solid var(--ax-blue); outline-offset: 3px; }

@media (max-width: 1050px) {
    .access-main::before { background: linear-gradient(160deg, #ffffff 0%, #f6faff 52%, #eef6fb 100%); }
}
@media (max-width: 700px) {
    body.account-access::before, body.account-access::after { filter: blur(64px); opacity: .4; }
    .access-nav { min-height: 62px; padding: 10px 14px; }
    .access-brand { padding: 6px 13px 6px 7px; font-size: 16px; }
    .access-brand img { height: 24px; max-width: 130px; }
    .access-nav-actions { gap: 8px; }
    .access-nav-actions a { min-height: 36px; padding: 0 12px; font-size: 11.5px; }
    .access-main { padding: 26px 14px; }
    .access-content, .account-access-register .access-content { padding: 26px 20px 24px; border-radius: 16px; }
    .access-content h1 { font-size: 26px; letter-spacing: -.01em; }
    .access-emblem { width: 42px; height: 42px; border-radius: 13px; }
    .access-terms { padding: 12px 13px; }
}
@media (prefers-reduced-motion: no-preference) {
    .access-content::before { animation: ax-rail .6s ease-out both; }
    @keyframes ax-rail { from { transform: scaleX(.15); opacity: 0; } to { transform: none; opacity: 1; } }
}