/* TG007new Build 0162 — Authentication & Account Management modernization.
 * Shared header/navigation/footer and hero geometry remain globally authoritative.
 */

body.tg-auth-modern {
    --tg-auth-surface: var(--tg007-surface);
    --tg-auth-panel: #ffffff;
    --tg-auth-cool: #f2f5f6;
    --tg-auth-line: #d8dddf;
    --tg-auth-line-soft: #e6e8e7;
    --tg-auth-text: #17212a;
    --tg-auth-muted: #66747e;
    --tg-auth-blue: #2f7fae;
    --tg-auth-blue-dark: #24688f;
    --tg-auth-blue-soft: #edf5f8;
    --tg-auth-danger: #963c46;
    --tg-auth-danger-bg: #fff4f4;
    --tg-auth-success: #257653;
    color: var(--tg-auth-text);
}

.tg-auth-preview {
    position: relative;
    z-index: 1000;
    padding: .48rem 1rem;
    background: #245d47;
    color: #f5fff9;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
}

.tg-auth-modern-main {
    background: var(--tg-auth-surface);
}

.tg-auth-context-label,
.tg-auth-panel-head > span {
    color: var(--tg-auth-blue-dark);
    font: 700 .72rem/1.2 Inter, sans-serif;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.tg-auth-workspace {
    padding: clamp(2.35rem, 5vw, 4.25rem) 0 clamp(3rem, 6vw, 5rem);
    background: var(--tg-auth-surface);
}

.tg-auth-workspace-grid {
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.22fr);
    gap: clamp(2.2rem, 5vw, 5.5rem);
    align-items: start;
}

.tg-auth-context {
    padding-top: .25rem;
}

.tg-auth-context h2 {
    max-width: 420px;
    margin: .45rem 0 .7rem;
    color: #1a242d;
    font: 700 clamp(1.8rem, 3vw, 2.45rem)/1.02 "Space Grotesk", Inter, sans-serif;
    letter-spacing: -.035em;
}

.tg-auth-context > p {
    max-width: 440px;
    margin: 0;
    color: #66747e;
    font-size: .98rem;
    line-height: 1.58;
}

.tg-auth-context-list {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tg-auth-line);
}

.tg-auth-context-list li {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 1rem;
    padding: .82rem 0;
    border-bottom: 1px solid var(--tg-auth-line-soft);
}

.tg-auth-context-list strong {
    color: #21303a;
    font-size: .91rem;
}

.tg-auth-context-list span {
    color: #697781;
    font-size: .87rem;
    line-height: 1.45;
}

.tg-auth-trust {
    display: flex;
    gap: .72rem;
    align-items: flex-start;
    margin-top: 1.35rem;
    color: #5f6d77;
}

.tg-auth-trust-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: .38rem;
    border-radius: 50%;
    background: #38b773;
    box-shadow: 0 0 0 3px rgba(56, 183, 115, .09);
}

.tg-auth-trust strong,
.tg-auth-trust small {
    display: block;
}

.tg-auth-trust strong {
    color: #35444e;
    font-size: .83rem;
}

.tg-auth-trust small {
    margin-top: .12rem;
    color: #78858d;
    font-size: .76rem;
    line-height: 1.42;
}

.tg-auth-panel {
    position: relative;
    padding: clamp(1.65rem, 3vw, 2.4rem);
    border: 1px solid #d7dcde;
    border-top: 3px solid var(--tg-auth-blue);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 45px rgba(33, 48, 59, .07);
}

.tg-auth-panel-head {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tg-auth-line-soft);
}

.tg-auth-panel-head h2 {
    margin: .3rem 0 0;
    color: #17212a;
    font: 700 clamp(1.55rem, 2.6vw, 2rem)/1.08 "Space Grotesk", Inter, sans-serif;
    letter-spacing: -.025em;
}

.tg-auth-copy {
    margin: 0 0 1.15rem;
    color: #66747e;
    line-height: 1.58;
}

.tg-auth-form {
    display: grid;
    gap: 1rem;
}

.tg-auth-field,
.tg-auth-form > label:not(.tg-auth-check) {
    display: block;
    margin: 0;
}

.tg-auth-field > span:first-child,
.tg-auth-form > label:not(.tg-auth-check) > span:first-child {
    display: block;
    margin-bottom: .42rem;
    color: #273640;
    font-size: .88rem;
    font-weight: 700;
}

.tg-auth-field-line {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.tg-auth-field-line > span {
    color: #273640;
    font-size: .88rem;
    font-weight: 700;
}

.tg-auth-field-line > a {
    color: var(--tg-auth-blue-dark);
    font-size: .78rem;
    font-weight: 600;
}

.tg-auth-form input[type="text"],
.tg-auth-form input[type="email"],
.tg-auth-form input[type="password"] {
    width: 100%;
    min-height: 48px;
    border: 1px solid #cbd2d6;
    border-radius: 3px;
    outline: 0;
    background: #ffffff;
    color: #16212a;
    padding: .72rem .82rem;
    font: 500 .96rem/1.25 Inter, sans-serif;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.tg-auth-form input[type="text"]:hover,
.tg-auth-form input[type="email"]:hover,
.tg-auth-form input[type="password"]:hover {
    border-color: #aebbc2;
}

.tg-auth-form input[type="text"]:focus,
.tg-auth-form input[type="email"]:focus,
.tg-auth-form input[type="password"]:focus {
    border-color: #5d99bb;
    box-shadow: 0 0 0 3px rgba(47, 127, 174, .12);
    background: #fff;
}

.tg-auth-form label > small {
    display: block;
    margin-top: .36rem;
    color: #77848d;
    font-size: .76rem;
}

.tg-auth-check {
    display: flex;
    align-items: flex-start;
    gap: .62rem;
    margin: .15rem 0 .1rem;
    color: #56656f;
    cursor: pointer;
}

.tg-auth-check input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: .16rem;
    accent-color: var(--tg-auth-blue);
}

.tg-auth-check span,
.tg-auth-check strong,
.tg-auth-check small {
    display: block;
}

.tg-auth-check strong {
    color: #34434d;
    font-size: .84rem;
}

.tg-auth-check small {
    margin-top: .08rem;
    color: #7a868e;
    font-size: .74rem;
    line-height: 1.35;
}

.tg-auth-primary {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tg-auth-blue-dark);
    border-radius: 3px;
    background: var(--tg-auth-blue);
    color: #fff;
    padding: .74rem 1rem;
    font: 700 .9rem/1 Inter, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.tg-auth-primary:link,
.tg-auth-primary:visited {
    color: #fff;
}

.tg-auth-primary:hover,
.tg-auth-primary:focus-visible {
    border-color: #1f5f84;
    background: var(--tg-auth-blue-dark);
    color: #fff;
    text-decoration: none;
}

.tg-auth-primary:active {
    transform: translateY(1px);
}

.tg-auth-button-link {
    width: 100%;
}

.tg-auth-alert {
    margin-bottom: 1rem;
    border: 1px solid #d8dddf;
    border-left-width: 3px;
    padding: .82rem .95rem;
    background: #f6f7f6;
    color: #46555f;
    font-size: .87rem;
    line-height: 1.5;
}

.tg-auth-alert-danger {
    border-color: #d9a9ad;
    border-left-color: var(--tg-auth-danger);
    background: var(--tg-auth-danger-bg);
    color: #74323a;
}

.tg-auth-alert-success {
    border-color: #a9d1bf;
    border-left-color: var(--tg-auth-success);
    background: #f1faf6;
    color: #2d674f;
}

.tg-auth-alert-info {
    border-color: #b6cfdd;
    border-left-color: var(--tg-auth-blue);
    background: #f2f8fb;
    color: #385e74;
}

.tg-auth-links {
    display: grid;
    gap: .45rem;
    margin-top: 1rem;
    color: #71808a;
    font-size: .82rem;
}

.tg-auth-links a,
.tg-auth-policy-links a,
.tg-auth-join a {
    color: var(--tg-auth-blue-dark);
}

.tg-auth-links-compact {
    margin-top: .85rem;
    text-align: center;
}

.tg-auth-join {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tg-auth-line-soft);
}

.tg-auth-join div > strong,
.tg-auth-join div > span {
    display: block;
}

.tg-auth-join div > strong {
    color: #2a3943;
    font-size: .86rem;
}

.tg-auth-join div > span {
    margin-top: .12rem;
    color: #74818a;
    font-size: .76rem;
}

.tg-auth-join > a {
    flex: 0 0 auto;
    border: 1px solid #c4ced3;
    border-radius: 3px;
    padding: .52rem .7rem;
    background: #fbfcfc;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

.tg-auth-join > a:hover,
.tg-auth-join > a:focus-visible {
    border-color: #7da8bf;
    background: var(--tg-auth-blue-soft);
    text-decoration: none;
}

.tg-auth-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.35rem;
    padding-top: .9rem;
    border-top: 1px solid var(--tg-auth-line-soft);
    color: #89939a;
    font-size: .72rem;
}

@media (max-width: 980px) {
    .tg-auth-workspace-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 1.15fr);
        gap: 2rem;
    }
}

@media (max-width: 760px) {
    .tg-auth-workspace {
        padding-block: 2rem 3rem;
    }

    .tg-auth-workspace-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .tg-auth-context {
        order: 2;
        padding-top: 0;
    }

    .tg-auth-panel {
        order: 1;
        padding: 1.3rem;
    }

    .tg-auth-context-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 0;
        gap: .6rem;
    }

    .tg-auth-context-list li {
        display: block;
        padding: .7rem;
        border: 1px solid var(--tg-auth-line-soft);
    }

    .tg-auth-context-list span {
        display: block;
        margin-top: .18rem;
    }
}

@media (max-width: 560px) {
    .tg-auth-context-list {
        grid-template-columns: 1fr;
    }

    .tg-auth-join {
        align-items: stretch;
        flex-direction: column;
    }

    .tg-auth-join > a {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tg-auth-primary,
    .tg-auth-form input {
        transition: none;
    }
}


/* Build 0162 — the body fully inherits the global modern outer background.
 * Only the authentication content canvas remains an off-white reading surface. */
body.tg-auth-modern .tg-auth-modern-main,
body.tg-auth-modern .tg-auth-workspace {
    background-color: var(--tg007-surface);
}

body.tg-auth-modern .tg-auth-workspace {
    background-image: none;
}


/* Build 0162 visual alignment and registration abuse-defense presentation. */
.tg-auth-panel {
    border-radius: var(--tg007-radius);
    border-top-width: 1px;
    box-shadow: var(--tg007-card-shadow);
}

.tg-auth-form input[type="text"],
.tg-auth-form input[type="email"],
.tg-auth-form input[type="password"],
.tg-auth-primary,
.tg-auth-button-link,
.tg-auth-join > a,
.tg-auth-alert {
    border-radius: .7rem;
}

.tg-auth-primary:disabled {
    opacity: .58;
    cursor: not-allowed;
    transform: none;
}

.tg-auth-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.tg-auth-turnstile {
    min-height: 65px;
    overflow-x: auto;
}


/* Build 0175 — registration safety, abuse-control and accessibility polish. */
.tg-auth-field {
    display: grid;
    gap: .42rem;
}

.tg-auth-field > label {
    color: #273640;
    font-size: .88rem;
    font-weight: 700;
}

.tg-auth-field > small {
    color: #77848d;
    font-size: .76rem;
    line-height: 1.45;
}

.tg-auth-password-control {
    position: relative;
}

.tg-auth-password-control input[type="password"],
.tg-auth-password-control input[type="text"] {
    padding-right: 4.8rem;
}

.tg-auth-password-toggle {
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    min-width: 3.7rem;
    min-height: 34px;
    border: 1px solid #c4ced3;
    border-radius: .55rem;
    background: #f7f9fa;
    color: var(--tg-auth-blue-dark);
    padding: .35rem .55rem;
    font: 700 .76rem/1 Inter, sans-serif;
    cursor: pointer;
}

.tg-auth-password-toggle:hover,
.tg-auth-password-toggle:focus-visible {
    border-color: #7da8bf;
    background: var(--tg-auth-blue-soft);
    outline: none;
}

.tg-auth-message-actions {
    display: grid;
    gap: .65rem;
}

.tg-auth-secondary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #c4ced3;
    border-radius: .7rem;
    background: #fbfcfc;
    color: var(--tg-auth-blue-dark);
    padding: .7rem 1rem;
    font: 700 .86rem/1 Inter, sans-serif;
    text-decoration: none;
}

.tg-auth-secondary:hover,
.tg-auth-secondary:focus-visible {
    border-color: #7da8bf;
    background: var(--tg-auth-blue-soft);
    color: var(--tg-auth-blue-dark);
    text-decoration: none;
}

@media (max-width: 560px) {
    .tg-auth-password-toggle {
        min-width: 3.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tg-auth-password-toggle,
    .tg-auth-secondary {
        transition: none;
    }
}