/* ═══════════════════════════════════════════════════
   auth.css — light theme for login / register / setup
   v=20260529-01
   ═══════════════════════════════════════════════════ */

body.auth-light {
    --au-bg:       #f5f5f7;
    --au-card:     #ffffff;
    --au-border:   #e2e2e7;
    --au-text:     #111111;
    --au-muted:    #6b6b76;
    --au-green:    #1b6b3a;
    --au-green-h:  #155730;
    --au-green-bg: #e8f4ee;
    --au-red:      #c0392b;
    --au-red-bg:   #fdecea;
    --au-input-bg: #f5f5f7;
    --au-shadow:   0 2px 12px rgba(0,0,0,.08);
    --au-radius:   16px;
    --au-font:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html:has(body.auth-light) { background: var(--au-bg) !important; }

body.auth-light {
    background: var(--au-bg) !important;
    color: var(--au-text) !important;
    font-family: var(--au-font);
}

/* ── Auth shell / container ── */
body.auth-light .auth-flow-shell {
    background: var(--au-bg) !important;
    min-height: 100vh;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 80px 16px 40px !important;
}

body.auth-light .auth-flow-container {
    width: 100% !important;
    max-width: 440px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* ── Auth card (glass-panel override) ── */
body.auth-light .auth-card,
body.auth-light .glass-panel.auth-card {
    background: var(--au-card) !important;
    border: 1px solid var(--au-border) !important;
    border-radius: var(--au-radius) !important;
    box-shadow: var(--au-shadow) !important;
    backdrop-filter: none !important;
    padding: 36px 32px !important;
    display: grid;
    gap: 12px !important;
    color: var(--au-text) !important;
    animation: authCardEnter .42s cubic-bezier(.22,1,.36,1) both;
    transform-origin: 50% 16px;
}

body.auth-light .auth-card > * {
    animation: authItemEnter .34s cubic-bezier(.22,1,.36,1) both;
    animation-delay: calc(var(--auth-item-index, 0) * 34ms);
}

body.auth-light .auth-card > :nth-child(1) { --auth-item-index: 1; }
body.auth-light .auth-card > :nth-child(2) { --auth-item-index: 2; }
body.auth-light .auth-card > :nth-child(3) { --auth-item-index: 3; }
body.auth-light .auth-card > :nth-child(4) { --auth-item-index: 4; }
body.auth-light .auth-card > :nth-child(5) { --auth-item-index: 5; }
body.auth-light .auth-card > :nth-child(6) { --auth-item-index: 6; }
body.auth-light .auth-card > :nth-child(7) { --auth-item-index: 7; }
body.auth-light .auth-card > :nth-child(8) { --auth-item-index: 8; }
body.auth-light .auth-card > :nth-child(9) { --auth-item-index: 9; }
body.auth-light .auth-card > :nth-child(10) { --auth-item-index: 10; }

body.auth-light .auth-card-secondary {
    animation-delay: 80ms;
}

/* Eyebrow */
body.auth-light .auth-card .eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--au-green) !important;
    -webkit-text-fill-color: var(--au-green) !important;
    background: none !important;
}

/* Title */
body.auth-light .auth-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--au-text) !important;
    -webkit-text-fill-color: var(--au-text) !important;
    background: none !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px;
}

body.auth-light .auth-title-medium {
    font-size: 22px !important;
}

/* Subtitle */
body.auth-light .auth-subtitle,
body.auth-light .auth-step-copy,
body.auth-light .auth-card .muted {
    color: var(--au-muted) !important;
    -webkit-text-fill-color: var(--au-muted) !important;
    background: none !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.5;
}

body.auth-light .auth-card strong {
    color: var(--au-text) !important;
    -webkit-text-fill-color: var(--au-text) !important;
}

/* ── Form inputs ── */
body.auth-light .auth-field-group {
    position: relative;
    display: grid !important;
    gap: 4px !important;
}

body.auth-light .auth-field-icon {
    position: absolute;
    left: 13px;
    top: 13px;
    width: 16px;
    height: 16px;
    color: var(--au-muted);
    opacity: .62;
    pointer-events: none;
    z-index: 1;
}

body.auth-light .auth-field-group input,
body.auth-light .auth-card input[type="text"],
body.auth-light .auth-card input[type="email"],
body.auth-light .auth-card input[type="password"],
body.auth-light .auth-card input[type="number"],
body.auth-light .auth-code-input {
    background: var(--au-input-bg) !important;
    border: 1px solid var(--au-border) !important;
    border-radius: 10px !important;
    color: var(--au-text) !important;
    -webkit-text-fill-color: var(--au-text) !important;
    font-size: 15px !important;
    padding: 11px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color .16s, box-shadow .16s, background .16s, transform .16s !important;
    caret-color: var(--au-green) !important;
}

body.auth-light .auth-card.auth-card-primary .auth-field-group .auth-field-icon ~ input {
    padding-left: 40px !important;
}

body.auth-light .auth-field-group input:focus,
body.auth-light .auth-card input:focus {
    border-color: var(--au-green) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px var(--au-green-bg) !important;
    transform: translateY(-1px);
}

body.auth-light .auth-field-group input::placeholder,
body.auth-light .auth-card input::placeholder {
    color: var(--au-muted) !important;
}

/* Field errors */
body.auth-light .auth-field-error {
    color: var(--au-red) !important;
    -webkit-text-fill-color: var(--au-red) !important;
    font-size: 12px !important;
    min-height: 0 !important;
    transform-origin: left top;
}

body.auth-light .auth-field-group.has-error input,
body.auth-light .au-field.has-error input,
body.auth-light .au-field.has-error .au-input-wrap input {
    border-color: rgba(192,57,43,.55) !important;
    box-shadow: 0 0 0 3px rgba(192,57,43,.08) !important;
}

body.auth-light .auth-field-group.has-error .auth-field-error,
body.auth-light .au-field.has-error .au-field-error {
    animation: authErrorPop .22s cubic-bezier(.22,1,.36,1) both;
}

body.auth-light .auth-field-status {
    font-size: 12px !important;
    min-height: 0 !important;
}

body.auth-light .auth-field-success {
    color: var(--au-green) !important;
    -webkit-text-fill-color: var(--au-green) !important;
    font-size: 13px !important;
    background: var(--au-green-bg) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
}

/* ── Buttons ── */
body.auth-light .auth-card .btn {
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-height: unset !important;
    border: none !important;
    transition: background .16s, opacity .16s, transform .16s, box-shadow .16s !important;
}

body.auth-light .auth-card .btn .auth-btn-icon {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    vertical-align: -3px;
    transition: transform .16s ease;
}

body.auth-light .auth-card .btn:hover .auth-btn-icon {
    transform: translateX(2px);
}

body.auth-light .auth-card .btn-primary {
    background: var(--au-green) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body.auth-light .auth-card .btn-primary:hover {
    background: var(--au-green-h) !important;
    box-shadow: 0 10px 22px rgba(27,107,58,.16) !important;
    transform: translateY(-1px);
}
body.auth-light .auth-card .btn:active {
    transform: translateY(0) scale(.99);
}
body.auth-light .auth-card .btn-primary:disabled { opacity: .55 !important; cursor: default !important; }

body.auth-light .auth-card .btn-secondary {
    background: var(--au-input-bg) !important;
    color: var(--au-text) !important;
    -webkit-text-fill-color: var(--au-text) !important;
    border: 1px solid var(--au-border) !important;
}
body.auth-light .auth-card .btn-secondary:hover {
    background: var(--au-green-bg) !important;
    border-color: var(--au-green) !important;
    color: var(--au-green) !important;
    -webkit-text-fill-color: var(--au-green) !important;
    transform: translateY(-1px);
}

body.auth-light .auth-card .btn.is-loading,
body.auth-light .au-submit-btn.is-loading {
    position: relative;
    overflow: hidden;
}

body.auth-light .auth-card .btn.is-loading::after,
body.auth-light .au-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transform: translateX(-100%);
    animation: authButtonSweep 1s ease-in-out infinite;
}

/* ── Flash messages ── */
body.auth-light .auth-flash {
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    animation: authFlashIn .26s cubic-bezier(.22,1,.36,1) both;
}

/* Flash state classes — dark theme defaults */
.auth-flash.auth-flash-success {
    background: rgba(60, 208, 122, 0.16);
    color: #b4ffd1;
}
.auth-flash.auth-flash-error {
    background: rgba(255, 92, 122, 0.16);
    color: #ffc3d0;
}

/* Light theme overrides */
body.auth-light .auth-flash.auth-flash-success {
    background: var(--au-green-bg) !important;
    color: var(--au-green) !important;
    border: 1px solid rgba(27,107,58,.2) !important;
}
body.auth-light .auth-flash.auth-flash-error {
    background: var(--au-red-bg) !important;
    color: var(--au-red) !important;
    border: 1px solid rgba(192,57,43,.2) !important;
}

/* ── Links ── */
body.auth-light .auth-inline-link {
    color: var(--au-green) !important;
    -webkit-text-fill-color: var(--au-green) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
body.auth-light .auth-inline-link:hover { text-decoration: underline !important; }

body.auth-light .auth-link-row {
    font-size: 13px !important;
    color: var(--au-muted) !important;
    -webkit-text-fill-color: var(--au-muted) !important;
    text-align: center !important;
    background: none !important;
}

/* ── Step eyebrow ── */
body.auth-light .auth-step-eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--au-green) !important;
    -webkit-text-fill-color: var(--au-green) !important;
}

body.auth-light .auth-step-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--au-text) !important;
    -webkit-text-fill-color: var(--au-text) !important;
    background: none !important;
    margin: 0 !important;
}

/* ── Auth code input (6-digit) ── */
body.auth-light .auth-code-input {
    text-align: center !important;
    font-size: 22px !important;
    letter-spacing: 6px !important;
    font-weight: 700 !important;
}

/* ── Setup-username page (bare .glass-panel without auth-card class) ── */
body.auth-light .page-shell > .container > .glass-panel {
    background: var(--au-card) !important;
    border: 1px solid var(--au-border) !important;
    border-radius: var(--au-radius) !important;
    box-shadow: var(--au-shadow) !important;
    backdrop-filter: none !important;
    color: var(--au-text) !important;
}

body.auth-light .page-shell > .container > .glass-panel h1 {
    color: var(--au-text) !important;
    -webkit-text-fill-color: var(--au-text) !important;
    background: none !important;
}

body.auth-light .page-shell > .container > .glass-panel input {
    background: var(--au-input-bg) !important;
    border: 1px solid var(--au-border) !important;
    border-radius: 10px !important;
    color: var(--au-text) !important;
    -webkit-text-fill-color: var(--au-text) !important;
    padding: 11px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
}

body.auth-light .page-shell > .container > .glass-panel input:focus {
    border-color: var(--au-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--au-green-bg) !important;
}

/* username-status color fix (JS sets inline color) */
body.auth-light #username-status {
    color: var(--au-muted) !important;
    -webkit-text-fill-color: var(--au-muted) !important;
}
body.auth-light #username-status[style*="#ff8ea3"],
body.auth-light #username-status[style*="ff8ea3"] {
    color: var(--au-red) !important;
    -webkit-text-fill-color: var(--au-red) !important;
}

body.auth-light .page-shell > .container > .glass-panel .btn-primary {
    background: var(--au-green) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 100% !important;
    min-height: unset !important;
    cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════
   auth.css — NEW REGISTER / LOGIN redesign
   v=20260529-02
   ═══════════════════════════════════════════════════ */

/* ── Card header ── */
body.auth-light .au-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
    text-align: center;
}

body.auth-light .au-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--au-text);
    -webkit-text-fill-color: var(--au-text);
    background: none;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.4px;
}

body.auth-light .au-subtitle {
    font-size: 14px;
    color: var(--au-muted);
    -webkit-text-fill-color: var(--au-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── Google button ── */
body.auth-light .au-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: #fff;
    border: 1px solid var(--au-border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--au-text);
    -webkit-text-fill-color: var(--au-text);
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, transform 0.16s;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
body.auth-light .au-google-btn:hover {
    background: var(--au-input-bg);
    border-color: #bbb;
    box-shadow: 0 2px 8px rgba(0,0,0,.09);
    transform: translateY(-1px);
}

/* ── OR divider ── */
body.auth-light .au-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--au-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    -webkit-text-fill-color: var(--au-muted);
}
body.auth-light .au-divider::before,
body.auth-light .au-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--au-border);
}

/* ── Field ── */
body.auth-light .au-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

body.auth-light .au-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--au-text);
    -webkit-text-fill-color: var(--au-text);
}

/* Input wrapper with icon */
body.auth-light .au-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

body.auth-light .au-field-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--au-muted);
    pointer-events: none;
    flex-shrink: 0;
    opacity: 0.55;
    z-index: 1;
}

body.auth-light .au-input-wrap input {
    width: 100%;
    background: var(--au-input-bg);
    border: 1px solid var(--au-border);
    border-radius: 10px;
    color: var(--au-text);
    -webkit-text-fill-color: var(--au-text);
    font-size: 14px;
    padding: 11px 14px 11px 44px !important;
    box-sizing: border-box;
    outline: none;
    transition: border-color .16s, box-shadow .16s, background .16s, transform .16s;
    caret-color: var(--au-green);
}
/* Перекрывает glass-panel catch-all (0,4,2) своей более высокой специфичностью */
body.auth-light .auth-card .au-field .au-input-wrap input {
    padding: 11px 14px 11px 44px !important;
}
body.auth-light .au-input-wrap input:focus {
    border-color: var(--au-green);
    background: #fff;
    box-shadow: 0 0 0 3px var(--au-green-bg);
    transform: translateY(-1px);
}
body.auth-light .au-input-wrap input::placeholder {
    color: var(--au-muted);
    -webkit-text-fill-color: var(--au-muted);
}

/* Eye toggle */
body.auth-light .au-eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--au-muted);
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity .15s;
}
body.auth-light .au-eye-btn svg {
    width: 16px;
    height: 16px;
}
body.auth-light .au-eye-btn:hover { opacity: 1; }

body.auth-light .auth-card .au-field .au-input-wrap:has(.au-eye-btn) input {
    padding-right: 44px !important;
}

/* ── Field messages ── */
body.auth-light .au-field-error {
    font-size: 12px;
    color: var(--au-red);
    -webkit-text-fill-color: var(--au-red);
    min-height: 0;
    transform-origin: left top;
}
body.auth-light .au-field-status {
    font-size: 12px;
    min-height: 0;
}
body.auth-light .au-status-ok  { color: var(--au-green); -webkit-text-fill-color: var(--au-green); }
body.auth-light .au-status-err { color: var(--au-red);   -webkit-text-fill-color: var(--au-red); }
body.auth-light .au-status-muted { color: var(--au-muted); -webkit-text-fill-color: var(--au-muted); }

/* ── Terms checkbox ── */
body.auth-light .au-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
body.auth-light .au-checkbox-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
body.auth-light .au-checkbox-box {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--au-border);
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: border-color .15s, background .15s;
}
body.auth-light .au-checkbox-row input:checked + .au-checkbox-box {
    background: var(--au-green);
    border-color: var(--au-green);
}
body.auth-light .au-checkbox-row input:checked + .au-checkbox-box::after {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
    display: block;
}
body.auth-light .au-checkbox-label {
    font-size: 13px;
    color: var(--au-muted);
    -webkit-text-fill-color: var(--au-muted);
    line-height: 1.5;
}

/* ── Submit button ── */
body.auth-light .au-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    background: var(--au-green);
    color: #fff;
    -webkit-text-fill-color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s, opacity .16s, transform .16s, box-shadow .16s;
    margin-top: 2px;
}
body.auth-light .au-submit-btn .au-btn-icon {
    width: 16px;
    height: 16px;
    transition: transform .16s ease;
}
body.auth-light .au-submit-btn:hover .au-btn-icon {
    transform: translateX(2px);
}
body.auth-light .au-submit-btn:hover {
    background: var(--au-green-h);
    box-shadow: 0 10px 22px rgba(27,107,58,.16);
    transform: translateY(-1px);
}
body.auth-light .au-submit-btn:active {
    transform: translateY(0) scale(.99);
}
body.auth-light .au-submit-btn:disabled { opacity: .5; cursor: default; }

/* ── Success banner ── */
body.auth-light .au-success-msg {
    background: var(--au-green-bg);
    color: var(--au-green);
    -webkit-text-fill-color: var(--au-green);
    border: 1px solid rgba(27,107,58,.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    animation: authFlashIn .26s cubic-bezier(.22,1,.36,1) both;
}

/* ── Bottom links ── */
body.auth-light .au-link-row {
    font-size: 13px;
    color: var(--au-muted);
    -webkit-text-fill-color: var(--au-muted);
    text-align: center;
}
body.auth-light .au-link {
    color: var(--au-green);
    -webkit-text-fill-color: var(--au-green);
    text-decoration: none;
}
body.auth-light .au-link:hover { text-decoration: underline; }
body.auth-light .au-link-bold {
    font-weight: 700;
}

/* ── 6-digit code input ── */
body.auth-light .au-code-input {
    width: 100%;
    text-align: center;
    font-size: 24px;
    letter-spacing: 8px;
    font-weight: 700;
    background: var(--au-input-bg);
    border: 1px solid var(--au-border);
    border-radius: 10px;
    color: var(--au-text);
    -webkit-text-fill-color: var(--au-text);
    padding: 14px;
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    caret-color: var(--au-green);
}
body.auth-light .au-code-input:focus {
    border-color: var(--au-green);
    background: #fff;
    box-shadow: 0 0 0 3px var(--au-green-bg);
}

/* ── Desktop centering ── */
@media (min-width: 769px) {
    body.auth-light .auth-flow-shell {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 16px 60px;
    }
    body.auth-light .auth-flow-container {
        max-width: 460px;
    }
    body.auth-light .auth-card {
        padding: 40px 36px !important;
        gap: 14px !important;
    }
}

@keyframes authCardEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.975);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes authItemEnter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authErrorPop {
    from {
        opacity: 0;
        transform: translateY(-3px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes authFlashIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authButtonSweep {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-light .auth-card,
    body.auth-light .auth-card > *,
    body.auth-light .auth-flash,
    body.auth-light .auth-field-group.has-error .auth-field-error,
    body.auth-light .au-field.has-error .au-field-error,
    body.auth-light .au-success-msg,
    body.auth-light .auth-card .btn.is-loading::after,
    body.auth-light .au-submit-btn.is-loading::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Registration remains visibly unavailable until the complete form is valid. */
body.auth-light #register-btn:disabled:not(.is-loading) {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    -webkit-text-fill-color: #6b7280 !important;
    border-color: #e5e7eb !important;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none;
}
body.auth-light #register-btn:disabled .au-btn-icon { transform: none; }