.canopy-auth {
    --auth-ink: #233d30;
    --auth-muted: #676b60;
    --auth-paper: #fffcf6;
    padding: 22px 24px 26px;
    color: var(--auth-ink);
    background:
        radial-gradient(ellipse at 5% 25%, #dce6d44d, transparent 45%),
        radial-gradient(ellipse at 100% 100%, #e7d7ba55, transparent 45%),
        #f6f3eb;
}
.auth-card-3d {
    position: relative;
    max-width: 1080px;
    margin: auto;
    transform-style: preserve-3d;
    will-change: transform;
    animation: auth-arrive .65s ease-out both;
}
.auth-card-3d::before {
    content: '';
    position: absolute;
    inset: 18px -14px -18px 16px;
    z-index: 0;
    border-radius: 26px;
    background: linear-gradient(145deg, #d8dccb, #b5bfa8 55%, #8d9a82);
    box-shadow: 24px 34px 48px #263d2d30;
    transform: translateZ(-48px);
    pointer-events: none;
}
.auth-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    min-height: 560px;
    border: 1px solid #dfdfd0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--auth-paper);
    box-shadow: 0 24px 64px -28px #233d303b, 0 2px 5px #233d3005;
    transform: perspective(1200px) rotateX(.7deg) rotateY(-1.2deg) translateZ(24px);
    transform-style: preserve-3d;
}
.auth-garden {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: radial-gradient(ellipse at 85% 0%, #435b43, transparent 65%), #213e30;
    color: #faf3e5;
    padding: 26px 30px 18px;
}
.auth-contours { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #e6d8ac; stroke-width: .65; opacity: .14; z-index: -1; pointer-events: none; }
.auth-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: #d5dfc8; }
.auth-small-star { font-size: 23px; line-height: 1; color: #d9bc7c; }
.auth-garden-title { margin: 14px 0 0; font: 400 34px/1.08 'Cormorant Garamond', Georgia, serif; letter-spacing: -.025em; }
.auth-garden-title em { color: #e3cb94; font-weight: 400; }
.auth-photo-wrap { position: relative; width: min(100% - 38px, 245px); margin: 16px auto 14px; transform-style: preserve-3d; will-change: transform; }
.auth-photo-wrap::before { content: ''; position: absolute; inset: 11px -9px -10px 14px; z-index: 0; border-radius: 180px 180px 10px 10px; background: linear-gradient(145deg, #182f24, #496044); border: 1px solid #d9bc7c22; box-shadow: 18px 24px 34px #07170f42; transform: translateZ(-42px); }
.auth-photo-arch { position: relative; overflow: hidden; aspect-ratio: .81; border-radius: 180px 180px 7px 7px; background: #e9dfcd; box-shadow: 0 20px 45px #0c231b52, inset 0 0 0 1px #fff4; z-index: 1; transform: translateZ(32px) rotateY(-5deg) rotateX(1.5deg); transform-style: preserve-3d; }
.auth-photo-arch img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.auth-garden:hover .auth-photo-arch img { transform: scale(1.025); }
.auth-arch-outline { position: absolute; inset: -10px 10px 10px -10px; border: 1px solid #ddc78e60; border-radius: 190px 190px 9px 9px; pointer-events: none; transform: translateZ(46px); }
.auth-garden-tag { position: absolute; bottom: 24px; left: -32px; z-index: 2; display: flex; align-items: center; gap: 10px; background: #fffcf4; color: #344534; border: 1px solid #ede6d5; padding: 14px 18px; border-radius: 9px; box-shadow: 0 14px 30px #10291d38; transform: rotate(-3deg) translateZ(58px); }
.auth-garden-tag > svg { width: 26px; height: 26px; stroke-width: 1.3; color: #737f55; }
.auth-garden-tag span { font-size: 11px; line-height: 1.65; }
.auth-garden-tag strong { font-weight: 500; }
.auth-seal { position: absolute; right: -37px; top: 43%; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; background: #dfc492; color: #294532; border: 1px solid #eed7a9; border-radius: 50%; outline: 1px dashed #68704b80; outline-offset: -6px; box-shadow: 0 15px 28px #19332748; transform: rotate(11deg) translateZ(72px); }
.auth-seal span { font-size: 9px; text-transform: uppercase; letter-spacing: .15em; }
.auth-seal em { font: italic 37px/.95 'Cormorant Garamond', Georgia, serif; }
.auth-seal svg { width: 44px; height: 16px; margin-top: 4px; stroke: currentColor; stroke-width: 1; }
.auth-photo-caption { display: flex; flex-direction: column; gap: 5px; text-align: center; color: #d9e0cf; font-size: 10px; line-height: 1.5; }
.auth-photo-caption span:first-child { font: italic 18px 'Cormorant Garamond', Georgia, serif; color: #f1e8cf; }
.auth-welcome { display: flex; align-items: center; padding: 30px 42px; position: relative; isolation: isolate; transform: translateZ(22px); transform-style: preserve-3d; }
.auth-welcome::before { content: ''; position: absolute; width: 110px; height: 110px; top: -60px; right: -50px; border: 1px solid #e8e0cf; border-radius: 50%; pointer-events: none; transform: translateZ(-8px); }
.auth-welcome::after { content: ''; position: absolute; inset: 18px 30px; z-index: -1; border-radius: 22px; background: linear-gradient(145deg, #fffefa, #f5f1e8); box-shadow: 14px 20px 34px #52614617, inset 0 1px 0 #ffffff; transform: translateZ(-18px); pointer-events: none; }
.auth-welcome-inner { position: relative; z-index: 1; width: 100%; max-width: 500px; margin: auto; transform-style: preserve-3d; }
.auth-section-label { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: #68735e; transform: translateZ(30px); }
.auth-section-icon { display: flex; }
.auth-section-icon svg { width: 19px; height: 19px; stroke-width: 1.4; }
.auth-section-line { flex: 1; height: 1px; background: #e2e3d7; margin-left: 6px; }
.auth-welcome h1 { margin: 18px 0 12px; font: 500 clamp(42px, 4vw, 56px)/.98 'Cormorant Garamond', Georgia, serif; letter-spacing: -.035em; color: #233d30; transform: translateZ(42px); text-shadow: 0 9px 18px #233d3012; }
.auth-welcome h1 em { font-weight: 400; color: #7c8960; }
.auth-intro { font-size: 16px; line-height: 1.75; color: var(--auth-muted); max-width: 360px; transform: translateZ(26px); }
.auth-signin { margin-top: 22px; transform: translateZ(36px); transform-style: preserve-3d; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 54px; width: 100%; padding: 12px 18px; border: 1px solid #cdd3c4; border-radius: 9px; background: #fff; color: #293a2e; font-size: 16px; font-weight: 500; box-shadow: 0 3px 0 #e6e9df, 0 12px 24px #52614614; transform: translateZ(30px); transition: background .2s, border-color .2s, box-shadow .2s; }
.auth-google:hover { background: #f4f7ef; border-color: #6b805b; box-shadow: 0 3px 0 #c6d1bb, 0 6px 20px #304a2a0a; }
.auth-google:disabled { cursor: not-allowed; color: #72796a; background: #f8f8f2; box-shadow: none; border-color: #d9dece; }
.auth-google-mark { width: 21px; height: 21px; flex-shrink: 0; }
.auth-google .auth-google-arrow { width: 17px; height: 17px; color: #7b866e; margin-left: auto; }
.auth-signin-note { margin-top: 10px; font-size: 12px; line-height: 1.65; text-align: center; color: #73766d; }
.auth-unavailable { display: flex; gap: 10px; align-items: start; margin-top: 10px; padding: 9px 10px; border: 1px solid #d9decc; border-radius: 10px; background: #f0f3e9; font-size: 12px; line-height: 1.6; color: #4e5d47; box-shadow: 0 9px 18px #52614612; transform: translateZ(24px); }
.auth-unavailable svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.auth-unavailable a { text-decoration: underline; text-underline-offset: 3px; }
.auth-benefits { margin-top: 22px; border-top: 1px solid #e8e6db; padding-top: 18px; transform: translateZ(28px); transform-style: preserve-3d; }
.auth-benefits-label { color: #7c7d70; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; text-align: center; }
.auth-benefit-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.auth-benefit-grid > div { text-align: center; transform: translateZ(22px); }
.auth-benefit-grid span { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto 7px; border-radius: 11px; background: #edf0e4; color: #62744e; box-shadow: 0 7px 14px #52614616; transition: background .2s; }
.auth-benefit-grid > div:nth-child(2) span { background: #f2e9da; color: #9b7548; }
.auth-benefit-grid > div:nth-child(3) span { background: #eee9df; color: #8c7359; }
.auth-benefit-grid svg { width: 19px; height: 19px; stroke-width: 1.4; }
.auth-benefit-grid strong { display: block; font-size: 11px; line-height: 1.5; font-weight: 400; color: #58614f; }
.auth-legal { margin-top: 18px; font-size: 11px; line-height: 1.7; text-align: center; color: #7c7b70; transform: translateZ(18px); }
.auth-legal a { color: #59694d; text-decoration: underline; text-underline-offset: 3px; }
.auth-legal-break { display: none; }
.auth-bottom-links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; border-top: 1px solid #e8e6db; margin-top: 14px; padding-top: 8px; transform: translateZ(20px); }
.auth-bottom-links a { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; color: #6a6e60; font-size: 12px; }
.auth-bottom-links a:hover { color: #9b583b; text-decoration: underline; text-underline-offset: 4px; }
.auth-bottom-links svg { width: 13px; height: 13px; }
.auth-closing { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; color: #85866e; font: italic 19px 'Cormorant Garamond', Georgia, serif; }
.auth-closing > span { width: 35px; height: 1px; background: #c9ccb8; }
.auth-closing svg { height: 16px; width: 16px; stroke-width: 1.3; }
.auth-admin-form { display: grid; gap: 15px; margin-top: 20px; transform: translateZ(34px); transform-style: preserve-3d; }
.auth-field label { display: block; color: #48543f; font-size: 13px; font-weight: 500; margin-bottom: 7px; }
.auth-field-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-field-heading a { font-size: 12px; color: #737e60; text-decoration: underline; text-underline-offset: 3px; }
.auth-input { display: block; width: 100%; min-height: 48px; padding: 11px 15px; border: 1px solid #d9ddce; border-radius: 8px; color: #233d30; background: #fffefb; font-family: inherit; font-size: 16px; box-shadow: 0 8px 18px #5261460f; transition: border-color .2s, box-shadow .2s; }
.auth-input::placeholder { color: #929785; font-size: 14px; }
.auth-input:focus { border-color: #72835d; box-shadow: 0 0 0 3px #72835d12; }
.auth-input[aria-invalid="true"] { border-color: #b6634d; }
.auth-password-wrap { position: relative; }
.auth-password-wrap .auth-input { padding-right: 50px; }
.auth-password-toggle { position: absolute; right: 3px; top: 3px; min-width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; border-radius: 6px; color: #6c795d; }
.auth-password-toggle:hover { background: #edf0e4; }
.auth-password-toggle svg { width: 21px; height: 21px; }
.auth-field-error { margin-top: 5px; color: #a33e2c; font-size: 12px; }
.auth-remember { display: flex; gap: 9px; align-items: center; min-height: 30px; cursor: pointer; color: #6a715f; font-size: 13px; }
.auth-remember input { width: 16px; height: 16px; accent-color: #314c36; }
.auth-admin-submit { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 20px; border-radius: 8px; color: #fbf7ed; background: #2c4935; font-size: 15px; font-weight: 500; box-shadow: 0 3px 0 #1c3323, 0 14px 24px #1c33232a; transform: translateZ(28px); transition: background .2s; }
.auth-admin-submit:hover { background: #3d5d41; }
.auth-admin-submit svg { width: 18px; height: 18px; }
.auth-admin-note { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 14px; color: #747966; font-size: 11px; }
.auth-admin-note svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (min-width: 901px) {
    .canopy-auth:not(.canopy-auth--admin) .auth-welcome-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(165px, .85fr);
        column-gap: 24px;
        align-items: start;
    }
    .canopy-auth:not(.canopy-auth--admin) .auth-section-label,
    .canopy-auth:not(.canopy-auth--admin) #auth-title,
    .canopy-auth:not(.canopy-auth--admin) .auth-intro,
    .canopy-auth:not(.canopy-auth--admin) .auth-legal,
    .canopy-auth:not(.canopy-auth--admin) .auth-bottom-links { grid-column: 1 / -1; }
    .canopy-auth:not(.canopy-auth--admin) .auth-benefits {
        margin-top: 22px;
        padding: 0 0 0 20px;
        border-top: 0;
        border-left: 1px solid #e8e6db;
    }
    .canopy-auth:not(.canopy-auth--admin) .auth-benefits-label { text-align: left; }
    .canopy-auth:not(.canopy-auth--admin) .auth-benefit-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
    .canopy-auth:not(.canopy-auth--admin) .auth-benefit-grid > div { display: flex; align-items: center; gap: 10px; text-align: left; }
    .canopy-auth:not(.canopy-auth--admin) .auth-benefit-grid span { flex-shrink: 0; margin: 0; }
    .canopy-auth:not(.canopy-auth--admin) .auth-benefit-grid strong { line-height: 1.45; }
    .canopy-auth--admin .auth-admin-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .canopy-auth--admin .auth-remember,
    .canopy-auth--admin .auth-admin-submit { grid-column: 1 / -1; }
}
.canopy-auth :is(a,button,input):focus-visible { outline: 3px solid #b58c48; outline-offset: 4px; }
@keyframes auth-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 701px) and (max-height: 850px) {
    .canopy-auth { padding-top: 10px; padding-bottom: 10px; }
    .auth-shell { min-height: 500px; }
    .auth-garden { padding: 22px 28px 14px; }
    .auth-garden-title { margin-top: 10px; font-size: 30px; }
    .auth-photo-wrap { width: min(100% - 38px, 205px); margin: 12px auto 10px; }
    .auth-photo-caption { gap: 3px; font-size: 9px; }
    .auth-photo-caption span:first-child { font-size: 17px; }
    .auth-welcome { padding: 22px 38px; }
    .auth-welcome h1 { margin: 14px 0 10px; font-size: 50px; }
    .auth-intro { line-height: 1.65; }
    .auth-signin { margin-top: 18px; }
    .auth-unavailable { margin-top: 8px; padding: 7px 9px; }
    .auth-benefits { margin-top: 18px; }
    .auth-legal { margin-top: 12px; }
    .auth-bottom-links { margin-top: 10px; }
    .auth-closing { display: none; }
}
@media (min-width: 1500px) {
    .canopy-auth { padding-top: 38px; padding-bottom: 40px; }
}
@media (max-width: 1000px) {
    .auth-shell { grid-template-columns: .95fr 1.05fr; }
    .auth-garden { padding: 26px 24px 20px; }
    .auth-welcome { padding: 32px 28px; }
    .auth-garden-title { font-size: 32px; }
    .auth-seal { width: 80px; height: 80px; right: -26px; }
    .auth-seal em { font-size: 31px; }
    .auth-garden-tag { left: -15px; padding: 12px; }
}
@media (max-width: 700px) {
    .canopy-auth { padding: 10px 14px 20px; }
    .auth-card-3d::before { inset: 8px -5px -8px 8px; border-radius: 20px; transform: translateZ(-22px); }
    .auth-shell { grid-template-columns: 1fr; min-height: 0; border-radius: 16px; transform: perspective(900px) rotateX(.4deg) rotateY(-.8deg) translateZ(12px); }
    .auth-garden { min-height: 132px; padding: 18px 20px; justify-content: center; }
    .auth-garden-heading { max-width: 64%; }
    .auth-eyebrow { font-size: 8px; letter-spacing: .09em; gap: 5px; }
    .auth-small-star { font-size: 17px; }
    .auth-garden-title { font-size: 26px; line-height: 1.06; margin-top: 10px; }
    .auth-photo-wrap { position: absolute; right: 16px; top: 12px; bottom: 12px; margin: 0; width: 88px; }
    .auth-photo-wrap::before { inset: 4px -4px -4px 6px; transform: translateZ(-18px); }
    .auth-photo-arch { height: 100%; aspect-ratio: auto; transform: translateZ(14px) rotateY(-3deg); }
    .auth-photo-arch img { object-position: 50% 55%; }
    .auth-arch-outline { inset: -5px 5px 5px -5px; }
    .auth-seal, .auth-garden-tag, .auth-photo-caption { display: none; }
    .auth-contours { opacity: .1; }
    .auth-welcome { padding: 24px 22px 16px; }
    .auth-welcome-inner { max-width: 420px; }
    .auth-welcome h1 { font-size: 40px; margin: 14px 0 10px; }
    .auth-intro { font-size: 14px; line-height: 1.65; }
    .auth-signin { margin-top: 18px; }
    .auth-google { min-height: 52px; font-size: 14px; padding: 12px 15px; }
    .auth-benefits { margin-top: 18px; padding-top: 14px; }
    .auth-benefit-grid { gap: 8px; margin-top: 12px; }
    .auth-benefit-grid strong { font-size: 10px; }
    .auth-legal { margin-top: 14px; }
    .auth-closing { font-size: 16px; margin-top: 14px; }
    .auth-bottom-links { gap: 5px 12px; margin-top: 10px; }
    .canopy-auth--admin .auth-garden { min-height: 110px; }
    .canopy-auth--admin .auth-photo-wrap { width: 70px; }
}
@media (max-width: 370px) {
    .canopy-auth { padding-left: 10px; padding-right: 10px; }
    .auth-garden { padding-left: 18px; }
    .auth-garden-title { font-size: 24px; }
    .auth-eyebrow { max-width: 140px; }
    .auth-welcome { padding: 22px 18px 14px; }
    .auth-welcome h1 { font-size: 37px; }
    .auth-google { gap: 8px; padding: 11px 12px; font-size: 13px; }
    .auth-benefit-grid { grid-template-columns: 1fr; }
    .auth-benefit-grid > div { display: flex; align-items: center; gap: 9px; text-align: left; }
    .auth-benefit-grid span { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-card-3d { animation: none; }
    .canopy-auth *, .canopy-auth *::before { transition: none !important; }
    .auth-garden:hover .auth-photo-arch img { transform: none; }
}
