:root {
    color-scheme: dark;
    font: 15px/1.6 system-ui,sans-serif;
    color: #eaf0fa;
    background: #0b121c
}

* {
    box-sizing: border-box
}

body {
    margin: 0
}

main {
    max-width: 900px;
    margin: 48px auto;
    padding: 0 24px
}

header, .device, .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

h1 {
    font-size: 30px;
    line-height: 1.2;
    margin: 8px 0
}

h2 {
    font-size: 19px;
    margin-top: 0
}

p {
    margin: 8px 0
}

.brand {
    color: #5aaaff;
    font-weight: 700
}

section {
    padding: 24px;
    margin: 20px 0;
    background: #16212e;
    border: 1px solid #293b50;
    border-radius: 12px
}

.muted, footer, header p {
    color: #9eafc4
}

.badge {
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 12px;
    background: #24405a;
    color: #a9d9ff
}

.actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 20px 0
}

button, input {
    font: inherit;
    border: 1px solid #3c526b;
    border-radius: 6px;
    padding: 9px 16px;
    color: inherit;
    background: #223247
}

button {
    cursor: pointer
}

    button:hover {
        background: #2c4561
    }

.primary {
    background: #147dea;
    border-color: #147dea
}

.upgrade {
    display: flex;
    align-items: end;
    gap: 14px;
    margin: 20px 0
}

    .upgrade input {
        display: block;
        width: 100px
    }

.device {
    padding: 16px 0;
    border-bottom: 1px solid #2c3c50
}

.notice {
    padding: 16px;
    background: #213b53;
    border-radius: 8px
}

a {
    color: #7abcff
}

footer {
    font-size: 13px;
    margin: 32px 0
}

@media(max-width:550px) {
    main {
        margin: 24px auto
    }

    header, .device {
        align-items: start
    }

    section {
        padding: 18px
    }

    .upgrade {
        flex-wrap: wrap
    }
}

.signin {
    max-width: 560px
}

    .signin header {
        display: block
    }

    .signin section {
        background: linear-gradient(145deg,#111d30,#16212e)
    }

.credentials {
    display: grid;
    gap: 16px;
    margin: 24px 0
}

    .credentials label {
        display: grid;
        gap: 6px
    }

    .credentials input {
        width: 100%
    }

.google {
    width: 100%;
    background: #223247
}

.signin nav {
    display: grid;
    gap: 12px
}

.validation {
    color: #ffb0b0
}

.signin .brand {
    font-size: 28px
}
/* Account access uses the same light workspace palette as the dashboard. */
body.access-page {
    color-scheme: light;
    color: #293b58;
    background: radial-gradient(ellipse at 80% 0%,#e5edff,transparent 65%),#f6f7fa;
    min-height: 100vh
}

.access-page .signin {
    max-width: 520px;
    margin: 48px auto;
    padding: 0 24px
}

.access-page .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #273b5c;
    font-size: 25px;
    text-decoration: none;
    letter-spacing: -.04em
}

    .access-page .brand img {
        object-fit: contain
    }

.access-page header h1 {
    font-size: 32px;
    letter-spacing: -.04em;
    margin: 24px 0 12px
}

.access-page header p {
    font-size: 14px;
    color: #64738b;
    max-width: 420px
}

.access-page .signin-card {
    padding: 30px;
    margin: 26px 0 0;
    background: linear-gradient(145deg,#fff,#f8faff);
    border: 1px solid #d9e2f1;
    border-radius: 24px;
    box-shadow: 0 12px 36px #29497808
}

.access-page h2 {
    font-size: 23px;
    letter-spacing: -.03em;
    margin-bottom: 24px
}

.access-page button {
    min-height: 46px;
    border: 1px solid #d2ddec;
    border-radius: 12px;
    background: #f0f4fa;
    color: #314765;
    font-weight: 600;
    font-size: 14px
}

    .access-page button:hover {
        background: #e6edf8
    }

.access-page .google {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background: #fff
}

.google-symbol {
    font-size: 20px;
    font-weight: 700;
    color: #4285f4
}

.access-page .primary {
    background: #2864f4;
    border-color: #2864f4;
    color: #fff;
    box-shadow: 0 4px 14px #2864f41a
}

    .access-page .primary:hover {
        background: #1f54d8
    }

.access-page input {
    min-height: 46px;
    background: #fff;
    color: #293b58;
    border: 1px solid #cdd9e9;
    border-radius: 10px;
    padding: 10px 12px
}

    .access-page input:focus-visible, .access-page button:focus-visible, .access-page a:focus-visible, .access-page summary:focus-visible {
        outline: 3px solid #8bb3ff;
        outline-offset: 3px
    }

.access-page .credentials {
    margin: 20px 0;
    gap: 18px
}

.access-page label {
    font-size: 13px;
    font-weight: 600;
    gap: 8px
}

.access-page a {
    color: #245fce
}

.access-page nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px
}

.signin-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 24px 0 0;
    color: #7b879b;
    font-size: 11px
}

    .signin-divider:before, .signin-divider:after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e0e6f0
    }

.access-page .validation-summary-valid {
    display: none
}

.access-page .validation {
    font-size: 13px;
    color: #a13242;
    background: #fff1f2;
    border-radius: 10px
}

    .access-page .validation ul {
        padding: 12px 16px 12px 30px;
        margin: 0 0 20px
    }

.access-page .notice {
    background: #edf3ff;
    border: 1px solid #d8e5fa;
    color: #355785;
    font-size: 13px;
    margin-bottom: 20px
}

.access-page .muted {
    color: #64738b;
    font-size: 12px
}

.verification-help {
    flex-basis: 100%;
    border-top: 1px solid #e0e6f0;
    padding-top: 17px;
    margin-top: 6px
}

    .verification-help summary {
        cursor: pointer;
        color: #64738b;
        font-size: 12px
    }

    .verification-help > p {
        margin-top: 12px
    }

    .verification-help .credentials {
        margin-bottom: 0
    }

.signin-reassurance {
    margin-top: 25px;
    padding: 18px;
    background: #edf2fa;
    border: 1px solid #dce5f3;
    border-radius: 14px
}

    .signin-reassurance h3 {
        font-size: 13px;
        margin: 0;
        color: #345886
    }

    .signin-reassurance p {
        font-size: 12px;
        color: #64738b;
        margin: 7px 0 0
    }

.access-page footer {
    text-align: center;
    color: #7b879b;
    font-size: 11px;
    margin: 24px 0
}

@media(max-width:550px) {
    .access-page .signin {
        margin: 26px auto;
        padding: 0 20px
    }

    .access-page header h1 {
        font-size: 28px
    }

    .access-page .signin-card {
        padding: 24px;
        border-radius: 20px
    }
}
/* Creative access shell: original video illustration paired with a focused light form. */
.access-page .signin-creative {
    display: grid;
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
    gap: 0;
    max-width: 1000px;
    padding: 0;
    margin: 48px auto 24px;
    background: #fff;
    border: 1px solid #dce4f1;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 65px #2949780d
}

.access-page .access-story {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 36px;
    background: radial-gradient(ellipse at 105% 80%,#3577f2,transparent 65%),linear-gradient(145deg,#1c2e50,#254d95);
    color: #fff
}

.access-story:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 440px;
    height: 440px;
    border: 1px solid #bdd5ff20;
    border-radius: 50%;
    left: -230px;
    top: 130px;
    box-shadow: 0 0 0 42px #bad4ff05,0 0 0 84px #bad4ff04
}

.access-page .access-story .brand {
    color: #fff;
    font-size: 24px
}

.access-story .brand img {
    background: #eef4ff;
    padding: 4px;
    width: 36px;
    height: 40px;
    border-radius: 9px
}

.access-page .access-story .access-kicker {
    color: #bed4fa;
    font-size: 9px;
    letter-spacing: .16em;
    font-weight: 600;
    margin-top: 44px
}

.access-kicker:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffb16e;
    margin-right: 9px;
    vertical-align: middle
}

.access-page .access-story h1 {
    font-size: 43px;
    line-height: 1.12;
    letter-spacing: -.05em;
    margin: 14px 0 16px
}

.access-page .access-story p {
    color: #d0def4;
    max-width: 330px
}

.access-art {
    margin: 18px -16px 8px
}

    .access-art svg {
        display: block;
        width: 100%;
        height: auto
    }

.access-story-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #c2d8ff30
}

    .access-story-note > span {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff10;
        border: 1px solid #ffffff20;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        color: #ffd0a0;
        font-size: 24px;
        flex-shrink: 0
    }

.access-page .access-story-note p {
    font-size: 12px;
    margin: 0;
    line-height: 1.7
}

.access-story-note strong {
    color: #fff;
    font-weight: 500
}

.access-page .signin-creative .signin-card {
    margin: 0;
    padding: 48px 38px 34px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(145deg,#fff,#f9fbff);
    align-self: stretch;
    min-width: 0
}

.access-form-kicker {
    color: #72829c;
    font-size: 9px;
    letter-spacing: .13em;
    font-weight: 600;
    margin: 0 0 11px
}

.access-page .signin-creative h2 {
    font-size: 25px;
    margin-bottom: 27px
}

.access-page .signin-creative footer {
    grid-column: 1/-1;
    background: #f6f8fc;
    border-top: 1px solid #e4eaf3;
    margin: 0;
    padding: 16px 24px
}

.access-page .signin-creative .signin-reassurance {
    background: #f0f4fb;
    border: 0;
    border-left: 3px solid #9abcf4;
    border-radius: 0 12px 12px 0;
    padding: 15px 17px
}

@media(max-width:1040px) {
    .access-page .signin-creative {
        margin: 32px 24px;
        max-width: none
    }

    .access-page .access-story {
        padding: 30px
    }

        .access-page .access-story h1 {
            font-size: 38px
        }

    .access-page .signin-creative .signin-card {
        padding: 38px 30px
    }
}

@media(max-width:760px) {
    .access-page .signin-creative {
        display: block;
        max-width: 520px;
        margin: 24px auto
    }

    .access-page .access-story {
        padding: 26px 28px
    }

        .access-page .access-story .access-kicker {
            margin-top: 25px
        }

        .access-page .access-story h1 {
            font-size: 34px;
            margin: 12px 0
        }

    .access-art, .access-story-note {
        display: none
    }

    .access-page .signin-creative .signin-card {
        padding: 30px 28px
    }

    .access-page .access-story p {
        max-width: none
    }
}

@media(max-width:560px) {
    .access-page .signin-creative {
        margin: 16px;
        border-radius: 22px
    }

        .access-page .access-story, .access-page .signin-creative .signin-card {
            padding: 26px 23px
        }

            .access-page .access-story h1 {
                font-size: 32px
            }
}
/* Quiet creative detail: keep authentication visually primary. */
.access-page .access-story {
    background: radial-gradient(ellipse at 100% 100%,#315a9a55,transparent 65%),#243b60
}

.access-story:before {
    border-color: #bdd5ff10;
    box-shadow: 0 0 0 42px #bad4ff02,0 0 0 84px #bad4ff02
}

.access-art.access-art-light {
    width: 100%;
    max-width: 280px;
    margin: 28px 0;
    color: #ccddf6;
    align-self: flex-start
}

.access-page .access-story h1 {
    font-size: 38px
}

.access-page .access-story .access-kicker {
    margin-top: 34px
}

@media(max-width:760px) {
    .access-art.access-art-light {
        display: none
    }

    .access-page .access-story h1 {
        font-size: 32px
    }

    .access-page .access-story .access-kicker {
        margin-top: 25px
    }
}

/* Prevent card margins collapsing outside the light body canvas. */
body.access-page {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}
.access-page .signin-creative {
    width: min(1000px, calc(100% - 48px));
    flex-shrink: 0;
    margin: 24px auto;
}
@media (max-width: 760px) {
    .access-page .signin-creative {
        width: min(520px, calc(100% - 32px));
        margin: 16px auto;
    }
}
@media (min-width: 761px) and (max-height: 800px) {
    .access-page .signin-creative {
        margin: 16px auto;
    }
    .access-page .signin-creative .signin-card {
        padding: 26px 38px;
    }
    .access-page .signin-creative h2 {
        margin-bottom: 20px;
    }
    .access-page .signin-creative .credentials {
        gap: 12px;
        margin: 16px 0;
    }
    .access-page .signin-creative .signin-reassurance {
        margin-top: 18px;
        padding: 12px 15px;
    }
    .access-page .signin-creative footer {
        padding: 10px 24px;
    }
}
/* A visible next step replaces the form after requesting verification. */
.verification-next{padding:22px;background:#eaf2ff;border:1px solid #aac7f5;border-radius:16px;color:#234574}
.verification-envelope{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:16px;border-radius:14px;background:#fff;color:#2864db}
.verification-envelope svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.verification-next h3{font-size:17px;line-height:1.4;margin:0 0 12px}
.verification-next p{font-size:14px;line-height:1.65;margin:10px 0 0;color:#314e78}
.verification-address{display:block;overflow-wrap:anywhere;color:#173e79;margin-top:4px}
.verification-steps{padding-left:23px;margin:23px 0;color:#405574;font-size:14px}
.verification-steps li{padding-left:5px;margin:10px 0}
.verification-steps li::marker{color:#2864db;font-weight:700}
.access-page .verification-signin{display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:12px 18px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:600;color:#fff}
.access-page .verification-signin:hover{background:#1f54d8}
.verification-troubleshooting{margin-top:22px}
.verification-troubleshooting summary{font-size:14px;color:#355c97;font-weight:600}
.access-page .verification-troubleshooting .muted{font-size:13px;line-height:1.65}
.verification-change{display:inline-block;font-size:13px;margin-top:18px;text-decoration:underline;text-underline-offset:3px}
.access-page .notice{border-left:4px solid #4778cf;color:#234574;font-size:14px;font-weight:500}
/* Softer canvas: blue-gray depth without returning to a dark theme. */
body.access-page {
    background:
        radial-gradient(ellipse at 85% 5%, #b8cbee66, transparent 60%),
        radial-gradient(ellipse at 5% 95%, #e4c9b51c, transparent 55%),
        #dce3ed;
}