<?php /* Shared styling for the standalone auth cards (forgot / reset password). */ ?>
<style>
    body { margin: 0; min-height: 100vh; background: var(--pp-app-bg, #f4f6fb); color: var(--pp-text, #1e293b);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
    .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 14px; }
    .auth-card { width: 100%; max-width: 420px; background: var(--pp-surface, #fff);
        border: 1px solid var(--pp-border, #e6e9f0); border-radius: 16px; padding: 30px 28px;
        box-shadow: 0 20px 50px rgba(2, 6, 23, .14); }
    .auth-head { text-align: center; margin-bottom: 20px; }
    .auth-mark { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center;
        justify-content: center; font-size: 21px; color: #fff; margin-bottom: 12px;
        background: linear-gradient(135deg, var(--pp-accent, #4f46e5), color-mix(in srgb, var(--pp-accent, #6366f1) 55%, #7c3aed)); }
    .auth-head h1 { margin: 0 0 5px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--pp-text); }
    .auth-head p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pp-text-muted, #64748b); }

    .auth-label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--pp-text); }
    .auth-card .form-control { background: var(--pp-input-bg, #fff); color: var(--pp-text);
        border-color: var(--pp-border, #e2e8f0); border-radius: 9px; padding: .55rem .75rem; font-size: 14px; }
    .auth-card .form-control:focus { border-color: var(--pp-accent, #6366f1);
        box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--pp-accent, #6366f1) 22%, transparent); }
    .auth-card .form-control::placeholder { color: var(--pp-text-muted); }
    .auth-hint { font-size: 11.5px; color: var(--pp-text-muted); margin-top: 5px; }

    .auth-otp { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; font-weight: 700;
        letter-spacing: 8px; text-align: center; }

    .auth-btn { width: 100%; border: 0; border-radius: 9px; padding: 11px 14px; font-size: 14px; font-weight: 700;
        cursor: pointer; color: var(--pp-accent-contrast, #fff); background: var(--pp-accent, #4f46e5); transition: .15s; }
    .auth-btn:hover { filter: brightness(1.07); }

    .auth-msg { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; border-radius: 10px;
        font-size: 12.5px; line-height: 1.55; margin-bottom: 16px; color: var(--pp-text); border: 1px solid transparent; }
    .auth-msg i { font-size: 15px; margin-top: 1px; }
    .auth-msg.err { background: color-mix(in srgb, #ef4444 12%, var(--pp-surface));
        border-color: color-mix(in srgb, #ef4444 28%, transparent); }
    .auth-msg.err i { color: #ef4444; }
    .auth-msg.ok { background: color-mix(in srgb, #10b981 12%, var(--pp-surface));
        border-color: color-mix(in srgb, #10b981 28%, transparent); }
    .auth-msg.ok i { color: #10b981; }

    .auth-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
        margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pp-border, #eef1f6); }
    .auth-foot a { font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--pp-accent, #4f46e5); }
    .auth-foot a:hover { text-decoration: underline; }
</style>
