/* ============================================================
   Auth surface — login.php + signup.php
   ------------------------------------------------------------
   Loaded AFTER cyber.css and BEFORE chadow-theme.css.

   EVERY rule here is scoped under `.cyber-auth-page`, which only
   login.php and signup.php use. cyber.css is loaded by ~13 other
   pages (chadow, usage, chat, subscribe, workspace, landing…), so
   scoping keeps this restyle off every one of them.

   Two sections:
     1. Layout + a11y polish — applies in both themes.
     2. Light theme — `html.theme-light` only, so dark is untouched.
   ============================================================ */


/* ============================================================
   1. Layout + a11y polish (both themes)
   ============================================================ */

/* Card width. Login stays compact; signup opts into the wider
   two-column card via .auth-wide so its 7 fields don't stack into
   a 1170px-tall scroll. */
.cyber-auth-page .cyber-auth-container {
    max-width: 440px;
}

.cyber-auth-page.auth-wide .cyber-auth-container {
    max-width: 620px;
}

/* Paired field rows. Collapses to a single column on small screens,
   where side-by-side inputs get too narrow to type into. */
.cyber-auth-page .auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

@media (max-width: 640px) {
    .cyber-auth-page .auth-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* --- Header hierarchy ---------------------------------------
   The wordmark and the page title were both gradient-filled, so
   they fought for the same focal point. Demote the wordmark to a
   quiet letterspaced label and let the title carry the gradient. */
.cyber-auth-page .cyber-logo-text {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cyber-auth-page .cyber-auth-header a {
    text-decoration: none;
}

.cyber-auth-page .cyber-auth-header a:hover .cyber-logo-text {
    color: var(--neon-cyan);
}

.cyber-auth-page .cyber-auth-title {
    margin-top: 0.35rem;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.cyber-auth-page .cyber-auth-subtitle {
    font-size: 0.95rem;
}

/* --- Touch targets ------------------------------------------
   Measured 18x18 (checkbox) and 23x23 (reveal toggle) — both well
   under the 44px minimum. Grow the control and the hit area
   without changing the visual weight of the row. */
.cyber-auth-page .cyber-checkbox {
    min-height: 44px;
    gap: 0.65rem;
}

.cyber-auth-page .cyber-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    cursor: pointer;
}

.cyber-auth-page .cyber-password-toggle {
    width: 44px;
    height: 44px;
    right: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

/* Keep the revealed-password text clear of the toggle. */
.cyber-auth-page .cyber-password-toggle + input,
.cyber-auth-page input[type="password"].cyber-input,
.cyber-auth-page input[type="text"]#password.cyber-input,
.cyber-auth-page input[type="text"]#confirmpassword.cyber-input {
    padding-right: 3.25rem;
}

/* --- Placeholder contrast -----------------------------------
   --text-muted (#6e7681) measured 3.77:1 on the input fill, under
   the 4.5:1 floor. --text-secondary measures 5.72:1. */
.cyber-auth-page .cyber-input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

/* --- Focus visibility ---------------------------------------
   Keyboard focus needs a ring that survives on both themes. */
.cyber-auth-page a:focus-visible,
.cyber-auth-page button:focus-visible,
.cyber-auth-page input:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 2px;
}

/* --- Rhythm --------------------------------------------------
   Even spacing between field groups regardless of whether a
   validation slot (password strength, phone check) sits under a
   given field. */
.cyber-auth-page .cyber-form-group {
    margin-bottom: 1.1rem;
}

.cyber-auth-page .cyber-auth-header {
    margin-bottom: 1.75rem;
}

/* --- "Continue with Google" ----------------------------------
   Google's branding guidance wants its own logo on a neutral
   surface, so this deliberately does NOT take the neon gradient
   of the primary button — it reads as a secondary path. */
.cyber-auth-page .btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.8rem 1.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: #e6edf3;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.cyber-auth-page .btn-google:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.32);
}

/* The logo keeps its official four colours in both themes. */
.cyber-auth-page .btn-google-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/* Breathing room before the "Already have an account?" footer, which
   carries an inline margin-top:0 we can't override from here. */
.cyber-auth-page .btn-google {
    margin-bottom: 1.25rem;
}

.cyber-auth-page .btn-google-terms {
    margin: -0.5rem 0 1.25rem;
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
    color: var(--text-secondary);
}

/* Theme toggle — fixed opposite the "Back to Home" link. */
.cyber-auth-page .chadow-theme-toggle {
    position: fixed;
    top: 1.75rem;
    right: 1.75rem;
    z-index: 100;
}

@media (max-width: 480px) {
    .cyber-auth-page .chadow-theme-toggle {
        top: 0.85rem;
        right: 0.85rem;
    }
}


/* ============================================================
   2. Light theme — html.theme-light only
   ============================================================ */

html.theme-light .cyber-auth-page {
    background: #eef1f7;
}

/* The neon radial wash reads as dirty smudges on a light page —
   swap it for a soft tint at much lower intensity. */
html.theme-light .cyber-auth-page .cyber-hero-bg {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(10, 151, 184, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(124, 58, 237, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 60% 85%, rgba(209, 15, 158, 0.06) 0%, transparent 55%);
}

html.theme-light .cyber-auth-page .cyber-auth-container {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.10);
    backdrop-filter: none;
}

/* Cyan/magenta at full saturation is illegible on white. Darken the
   ramp so the gradient survives the theme flip. */
html.theme-light .cyber-auth-page .cyber-auth-title {
    background: linear-gradient(135deg, #0a97b8 0%, #7c3aed 55%, #d10f9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.theme-light .cyber-auth-page .cyber-logo-text {
    color: #64748b;
}

html.theme-light .cyber-auth-page .cyber-auth-header a:hover .cyber-logo-text {
    color: #0a97b8;
}

html.theme-light .cyber-auth-page .cyber-auth-subtitle {
    color: #475569;
}

html.theme-light .cyber-auth-page .cyber-form-label {
    color: #475569;
}

html.theme-light .cyber-auth-page .cyber-input {
    background: #eef1f6;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f1729;
}

/* #64748b measured 4.20:1 on the #eef1f6 fill — under the 4.5 floor.
   This darker slate clears it while staying lighter than the label. */
html.theme-light .cyber-auth-page .cyber-input::placeholder {
    color: #566173;
    opacity: 1;
}

html.theme-light .cyber-auth-page .cyber-input:focus {
    border-color: #0a97b8;
    box-shadow: 0 0 0 3px rgba(10, 151, 184, 0.15);
}

html.theme-light .cyber-auth-page .cyber-password-toggle {
    color: #64748b;
}

html.theme-light .cyber-auth-page .cyber-password-toggle:hover {
    color: #0a97b8;
}

html.theme-light .cyber-auth-page .cyber-checkbox span {
    color: #475569;
}

html.theme-light .cyber-auth-page .cyber-checkbox input[type="checkbox"] {
    accent-color: #0a97b8;
}

html.theme-light .cyber-auth-page .cyber-link,
html.theme-light .cyber-auth-page .cyber-auth-footer a {
    color: #2563eb;
}

html.theme-light .cyber-auth-page .cyber-auth-footer p {
    color: #475569;
}

html.theme-light .cyber-auth-page .cyber-auth-divider {
    color: #64748b;
}

html.theme-light .cyber-auth-page .cyber-auth-divider::before,
html.theme-light .cyber-auth-page .cyber-auth-divider::after {
    background: rgba(15, 23, 42, 0.12);
}

html.theme-light .cyber-auth-page .cyber-auth-footer {
    border-top-color: rgba(15, 23, 42, 0.10);
}

html.theme-light .cyber-auth-page .back-to-home {
    color: #475569;
}

html.theme-light .cyber-auth-page .back-to-home:hover {
    color: #0a97b8;
}

/* Primary button keeps its brand gradient; only the label needs to
   stay dark enough to read against it. */
html.theme-light .cyber-auth-page .cyber-btn-primary {
    color: #06121a;
}

/* Google button — white surface with a hairline border, per Google's
   light-theme guidance. */
html.theme-light .cyber-auth-page .btn-google {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.20);
    color: #1f2328;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

html.theme-light .cyber-auth-page .btn-google:hover {
    background: #f6f8fc;
    border-color: rgba(15, 23, 42, 0.32);
}

html.theme-light .cyber-auth-page .btn-google-terms {
    color: #475569;
}

/* Alerts */
html.theme-light .cyber-auth-page .cyber-alert-error {
    background: rgba(225, 29, 72, 0.08);
    border-color: rgba(225, 29, 72, 0.35);
    color: #b3123b;
}

html.theme-light .cyber-auth-page .cyber-alert-success {
    background: rgba(15, 157, 107, 0.10);
    border-color: rgba(15, 157, 107, 0.35);
    color: #0b7d55;
}

/* Inline-styled blocks in signup.php need !important to win over
   the style attribute: the terms box and the trial-invite banner. */
html.theme-light .cyber-auth-page .terms-wrapper .cyber-checkbox {
    background: rgba(10, 151, 184, 0.07) !important;
    border-color: rgba(10, 151, 184, 0.28) !important;
}

html.theme-light .cyber-auth-page .auth-invite-note {
    background: rgba(124, 58, 237, 0.08) !important;
    border-color: rgba(124, 58, 237, 0.30) !important;
}

html.theme-light .cyber-auth-page .auth-invite-note > div > div {
    color: #0f1729 !important;
}

/* Phone country-code widget (intl-tel-input).
   signup.php styles these inline with !important, so these selectors
   carry !important AND more specificity — among !important
   declarations specificity is compared before source order, which is
   what lets a stylesheet loaded earlier still win. */
html.theme-light .cyber-auth-page .iti__flag-container,
html.theme-light .cyber-auth-page .iti__selected-flag {
    background-color: #e6eaf2 !important;
}

html.theme-light .cyber-auth-page .iti__selected-flag {
    border-right: 1px solid rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .cyber-auth-page .iti__selected-flag:hover,
html.theme-light .cyber-auth-page .iti__selected-flag:focus {
    background-color: #dbe2ee !important;
}

html.theme-light .cyber-auth-page .iti__selected-dial-code {
    color: #0f1729;
}

html.theme-light .cyber-auth-page .iti__arrow {
    border-top-color: #475569;
}

html.theme-light .cyber-auth-page .iti__arrow--up {
    border-bottom-color: #475569;
}

html.theme-light .cyber-auth-page .iti__country-list {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #0f1729;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16);
}

html.theme-light .cyber-auth-page .iti__country:hover {
    background-color: rgba(15, 23, 42, 0.05);
}

html.theme-light .cyber-auth-page .iti__country.iti__highlight {
    background-color: rgba(10, 151, 184, 0.10);
}

html.theme-light .cyber-auth-page .iti__country-name {
    color: #0f1729;
}

html.theme-light .cyber-auth-page .iti__dial-code {
    color: #64748b;
}

html.theme-light .cyber-auth-page .iti__search-input {
    background-color: #eef1f6;
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #0f1729;
}

html.theme-light .cyber-auth-page .iti__divider {
    border-bottom-color: rgba(15, 23, 42, 0.12);
}

/* Password-strength / validation hints */
html.theme-light .cyber-auth-page .password-strength,
html.theme-light .cyber-auth-page .password-match-msg,
html.theme-light .cyber-auth-page .phone-validation-msg {
    color: #475569;
}