/* =====================================================================
 * GRADIFY ecosystem AUTH pages (TK-6) — shared design for the
 * Activate-account / Forgot / Reset screens. Same locked ecosystem
 * language as the login concept (tokens, dark glass card, green CTA),
 * authored cleanly here from the locked design's computed specs.
 * Self-contained: defines its own tokens, so any view using the
 * gd_auth layout renders correctly.
 * ===================================================================== */

:root {
    --ink: #060912;
    --bg: #0A0E1A;
    --bg-card: #0E1426;
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.14);
    --fg: #F4EFE3;
    --fg-soft: rgba(244, 239, 227, 0.78);
    --fg-muted: rgba(244, 239, 227, 0.50);
    --fg-faint: rgba(244, 239, 227, 0.32);
    --gradify: #7AC043;
    --gradify-glow: rgba(122, 192, 67, 0.55);
    --gradify-ink: #0C140A;
    --family: #FF6F4D;
    --school: #6BA0F5;
    --community: #4DD4B3;
    --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --serif: "Instrument Serif", "Times New Roman", serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--ink);
    color: var(--fg);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
input, button { font: inherit; }

/* deep-space field behind the card */
.gd-auth-field {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(640px 480px at 84% 6%, rgba(122, 192, 67, 0.12), transparent 60%),
        radial-gradient(520px 420px at 6% 0%, rgba(255, 111, 77, 0.06), transparent 58%),
        radial-gradient(640px 560px at 50% 116%, rgba(77, 212, 179, 0.07), transparent 62%),
        var(--ink);
}
.gd-auth-field::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 3px 3px; opacity: 0.6;
}

/* centered column — plain block/scroll flow (iOS-safe, no 100vh centering trap) */
.gd-auth-wrap {
    position: relative; z-index: 1;
    width: 100%; max-width: 440px; margin: 0 auto;
    padding:
        calc(env(safe-area-inset-top) + 40px)
        max(20px, env(safe-area-inset-right))
        calc(env(safe-area-inset-bottom) + 48px)
        max(20px, env(safe-area-inset-left));
}

/* top bar — wordmark + back link */
.gd-auth-top {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 22px;
}
.gd-auth-wordmark {
    font-family: var(--serif); font-size: 24px; letter-spacing: 0.01em;
    color: var(--fg); line-height: 1; display: inline-flex; align-items: center; gap: 9px;
}
.gd-auth-wordmark .spark {
    width: 9px; height: 9px; border-radius: 50%; background: var(--gradify);
    box-shadow: 0 0 12px var(--gradify-glow);
}
.gd-auth-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-muted); white-space: nowrap;
    transition: color .2s;
}
.gd-auth-back:hover { color: var(--fg); }

/* the glass card */
.gd-auth-card {
    position: relative; width: 100%; overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--line-strong);
    background:
        radial-gradient(380px 220px at 86% -12%, rgba(122, 192, 67, 0.12), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.016)),
        #0E1426;
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    padding: 2.5rem;
}
@media (max-width: 460px) { .gd-auth-card { padding: 26px 22px; } }

.gd-auth-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--gradify); margin: 0 0 14px;
}
.gd-auth-eyebrow .lock { width: 15px; height: 15px; }

.gd-auth-h1 {
    font-family: var(--serif); font-weight: 400; font-size: 32px;
    line-height: 1.06; letter-spacing: -0.02em; color: var(--fg);
    text-align: center; margin: 0 0 6px;
}
.gd-auth-h1 em { font-style: italic; color: var(--gradify); }
.gd-auth-sub {
    font-size: 14px; line-height: 1.5; color: var(--fg-muted);
    text-align: center; margin: 0 0 22px;
}

/* segmented method picker */
.gd-auth-seg {
    display: flex; gap: 4px; padding: 4px;
    background: rgba(6, 9, 18, 0.6); border: 1px solid var(--line);
    border-radius: 12px; margin: 0 0 16px;
}
.gd-auth-seg button {
    flex: 1 1 0; padding: 9px 10px; border: none; border-radius: 9px;
    cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600;
    background: transparent; color: var(--fg-muted);
    transition: background .15s, color .15s;
}
.gd-auth-seg button[aria-selected="true"] {
    background: var(--gradify); color: var(--gradify-ink);
    box-shadow: 0 8px 22px -12px var(--gradify-glow);
}

/* fields */
.gd-auth-group { margin: 0 0 14px; }
.gd-auth-label {
    display: block; font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted);
    margin: 0 0 7px;
}
.gd-auth-input {
    width: 100%; height: 50px; padding: 0 16px;
    background: rgba(6, 9, 18, 0.6); border: 1px solid var(--line-strong);
    border-radius: 12px; font-size: 16px; color: var(--fg);
    outline: none; transition: border-color .2s, box-shadow .25s, background .2s;
}
.gd-auth-input::placeholder { color: var(--fg-faint); }
.gd-auth-input:focus {
    border-color: var(--gradify);
    box-shadow: 0 0 0 3px rgba(122, 192, 67, 0.16);
    background: rgba(6, 9, 18, 0.8);
}
.gd-auth-input--code { text-align: center; letter-spacing: 0.5em; font-weight: 600; }

/* password show/hide toggle (reset-password screen) */
.gd-auth-pwwrap { position: relative; }
.gd-auth-pw {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    border: none; background: transparent; cursor: pointer;
    color: var(--fg-muted); font-family: var(--mono); font-size: 11px;
    font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 8px;
}
.gd-auth-pw:hover { color: var(--fg); }

.gd-auth-help {
    font-size: 12px; line-height: 1.45; color: var(--fg-muted);
    margin: 7px 2px 0; display: flex; align-items: flex-start; gap: 6px;
}

.gd-auth-btn {
    width: 100%; height: 50px; margin-top: 6px;
    background: var(--gradify); color: var(--gradify-ink);
    border: none; border-radius: 12px;
    font-size: 15px; font-weight: 600; font-family: var(--sans);
    cursor: pointer; transition: filter .2s, transform .12s;
    box-shadow: 0 16px 40px -16px var(--gradify-glow);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.gd-auth-btn:hover { filter: brightness(1.04); }
.gd-auth-btn:active { transform: translateY(1px); }

.gd-auth-fine {
    font-size: 11.5px; line-height: 1.5; color: var(--fg-muted);
    text-align: center; margin: 14px 4px 0;
}
.gd-auth-foot {
    text-align: center; font-size: 13.5px; color: var(--fg-muted);
    margin: 18px 0 0;
}
.gd-auth-link { color: var(--gradify); font-weight: 500; }
.gd-auth-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* CakePHP Auth flash, themed */
#flashMessage, .message, .alert {
    margin: 0 0 16px; padding: 11px 14px; border-radius: 12px;
    font: 500 13px/1.45 var(--sans);
    background: rgba(255, 111, 77, 0.12); border: 1px solid rgba(255, 111, 77, 0.40);
    color: #ffd9cf; list-style: none;
}
#flashMessage.success, .message.success, .alert.success {
    background: rgba(122, 192, 67, 0.12); border-color: rgba(122, 192, 67, 0.45); color: #d9f0c3;
}
.alert .close, .alert .closebtn { float: right; cursor: pointer; opacity: .7; background: none; border: none; color: inherit; }