/* =========================
   ROOT / RESET
========================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: Arial, sans-serif;
    background: var(--bg-primary, #f7f5f2);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   OUTER CONTAINER
========================= */
.auth-outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 460px;
    padding: 2rem 1rem;
}

/* =========================
   BRAND
========================= */
.auth-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-primary, #2b2825);
    margin-bottom: 1.75rem;
}

.auth-brand i { font-size: 22px; color: var(--accent-primary, #3a6ea5); }

/* =========================
   NOTICE BANNER
========================= */
.auth-notice {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
}

.auth-notice i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

.auth-notice-text { font-size: .82rem; color: var(--text-primary); line-height: 1.5; }
.auth-notice-text strong { display: block; margin-bottom: 2px; }

.auth-notice-info {
    background:var(--info-bg);
    border: 1px solid var(--accent-primary, #3a6ea5);
}
.auth-notice-info i,
.auth-notice-info strong { color: var(--accent-primary, #3a6ea5); }

.auth-notice-warning {
    background: rgba(217, 154, 43, .12);
    border: 1px solid var(--warning, #d99a2b);
}
.auth-notice-warning i,
.auth-notice-warning strong { color: var(--warning, #d99a2b); }

/* =========================
   CARD WRAPPER
========================= */
.auth-wrapper {
    background: var(--bg-secondary, #efebe4);
    border: 1px solid var(--border-color, #d6cdc1);
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    box-shadow: 0 4px 24px var(--shadow, rgba(43,40,37,0.08));
}

/* =========================
   HEADER
========================= */
.auth-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color, #d6cdc1);
}

.auth-icon-ring {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--accent-primary, #3a6ea5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-icon-ring i { font-size: 24px; color: #fff; }

.auth-hd h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #2b2825);
    margin-bottom: 3px;
}

.auth-hd p { font-size: .8rem; color: var(--text-secondary, #6f6a62); }

/* =========================
   SECTION LABEL
========================= */
.auth-section-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--accent-primary, #3a6ea5);
    text-transform: uppercase;
    letter-spacing: .09em;
    margin: 1.25rem 0 .85rem;
    padding-left: .6rem;
    border-left: 3px solid var(--accent-primary, #3a6ea5);
}

/* =========================
   ALERTS
========================= */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .88rem;
    margin-bottom: 1rem;
}

.auth-alert ul { margin: 0; padding-left: 1rem; }

.auth-alert-success {
    background:var(--success-light);
    color: var(--success, #4f9c6c);
    border: 1px solid var(--success, #4f9c6c);
}

.auth-alert-danger {
    background:var(--danger-light);
    color: var(--danger, #c75450);
    border: 1px solid var(--danger, #c75450);
}

/* =========================
   FIELDS
========================= */
.auth-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: 1rem;
}

.auth-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary, #6f6a62);
    display: flex;
    align-items: center;
    gap: 6px;
}

.auth-field label i { font-size: 14px; color: var(--accent-primary, #3a6ea5); }

.auth-field input {
    width: 100%;
    padding: .72rem .85rem;
    border: 1px solid var(--border-color, #d6cdc1);
    border-radius: 8px;
    background: var(--input-field, #F5F5F5);
    color: var(--text-primary, #2b2825);
    font-size: .93rem;
    outline: none;
    transition: .2s ease;
    box-sizing: border-box;
}

.auth-field input:focus {
    border-color: var(--accent-primary, #3a6ea5);
    box-shadow: 0 0 0 3px rgba(58, 110, 165, .12);
}

.auth-field input::placeholder {
    color: var(--text-secondary, #6f6a62);
    opacity: .45;
}

.auth-field-error {
    font-size: .78rem;
    color: var(--danger, #c75450);
}

/* =========================
   PASSWORD TOGGLE
========================= */
.auth-pw-wrap { position: relative; }
.auth-pw-wrap input { padding-right: 2.6rem; }

.auth-pw-toggle {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #6f6a62);
    font-size: 17px;
    padding: 0;
    line-height: 1;
}

/* =========================
   STRENGTH BAR
========================= */
.auth-strength-row { display: flex; gap: 4px; margin-top: 7px; }

.auth-strength-seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color, #d6cdc1);
    transition: background .3s;
}

.auth-strength-hint {
    font-size: .75rem;
    color: var(--text-secondary, #6f6a62);
    margin-top: 5px;
}

/* =========================
   RULES CHECKLIST
========================= */
.auth-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 12px;
    margin-top: 8px;
}

.auth-rule {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    color: var(--text-secondary, #6f6a62);
    transition: .2s;
}

.auth-rule i { font-size: 13px; color: var(--border-color, #d6cdc1); }
.auth-rule.pass { color: var(--success, #4f9c6c); }
.auth-rule.pass i { color: var(--success, #4f9c6c); }

/* =========================
   MATCH HINT
========================= */
.auth-match-hint {
    font-size: .76rem;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary, #6f6a62);
}

.auth-match-hint i { font-size: 13px; }

/* =========================
   FOOTER / BUTTONS
========================= */
.auth-footer {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color, #d6cdc1);
}

.auth-btn-primary {
    padding: .72rem 1.4rem;
    border: none;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    background: var(--accent-primary, #3a6ea5);
    color: #fff;
    width: 100%;
    justify-content: center;
}

.auth-btn-primary:hover { background: var(--accent-hover, #2f5a87); transform: translateY(-1px); }
.auth-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.auth-btn-ghost {
    padding: .72rem 1.4rem;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    background: transparent;
    color: var(--text-secondary, #6f6a62);
    border: 1px solid var(--border-color, #d6cdc1);
}

.auth-btn-ghost:hover { background: var(--bg-tertiary, #e2dcd2); }

/* login page: full width single button */
.auth-footer.single .auth-btn-primary { width: 100%; justify-content: center; }

/* =========================
   LINKS ROW
========================= */
.auth-links {
    margin-top: 1.25rem;
    text-align: center;
}

.auth-links a {
    font-size: .82rem;
    color: var(--accent-primary, #3a6ea5);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.auth-links a:hover { text-decoration: underline; }

/* =========================
   CONTACT BOX
========================= */
.auth-contact-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg-tertiary, #e2dcd2);
    border: 1px solid var(--border-color, #d6cdc1);
    border-radius: 10px;
    padding: .85rem 1rem;
    margin-top: 1.25rem;
}

.auth-contact-box i { font-size: 18px; color: var(--text-secondary, #6f6a62); flex-shrink: 0; margin-top: 1px; }
.auth-contact-box p { font-size: .82rem; color: var(--text-secondary, #6f6a62); line-height: 1.5; margin: 0; }