/*
 * auth-ui.css — același aspect ca pagina de login (auth/login.php), pentru
 * paginile de recuperare a parolei (forgot-password.php, reset-password-success.php).
 * Culorile, cardul, câmpurile și butoanele sunt copiate din login.php,
 * ca toate paginile de autentificare să arate la fel.
 */
:root[data-theme="dark"]{
    --bg: #0d1017; --panel: #161a23; --panel-2: #1b1f2a;
    --text: #eef0f4; --text-dim: #9aa1b0;
    --accent: #5b8def; --accent-soft: rgba(91, 141, 239, .14); --accent-strong: #7aa4f5;
    --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16);
    --danger: #ef7b7b; --success: #6fcf97; --warning: #f3c265;
    --blob-1: rgba(91, 141, 239, .40); --blob-2: rgba(140, 120, 245, .30); --blob-3: rgba(70, 170, 235, .25);
    --shadow: 0 50px 100px -35px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
    --bg: #f4f6fb; --panel: #ffffff; --panel-2: #f7f9fc;
    --text: #1b1e27; --text-dim: #6b7280;
    --accent: #2f6fed; --accent-soft: rgba(47, 111, 237, .09); --accent-strong: #1f56c9;
    --border: rgba(20,20,30,.08); --border-strong: rgba(20,20,30,.14);
    --danger: #c8433f; --success: #1f9d5c; --warning: #b9791a;
    --blob-1: rgba(47, 111, 237, .22); --blob-2: rgba(140, 120, 245, .18); --blob-3: rgba(70, 170, 235, .16);
    --shadow: 0 40px 90px -40px rgba(30,40,60,.22);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
    margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--text); padding: 24px; position: relative; overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "SF Pro Text", Roboto, Helvetica, Arial, sans-serif;
    transition: background-color .4s ease, color .4s ease; -webkit-font-smoothing: antialiased;
}

.ambient{ position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient span{ position: absolute; border-radius: 50%; filter: blur(90px); animation: drift 22s ease-in-out infinite; }
.ambient span:nth-child(1){ width: 480px; height: 480px; left: -120px; top: -140px; background: var(--blob-1); }
.ambient span:nth-child(2){ width: 420px; height: 420px; right: -100px; top: 10%; background: var(--blob-2); animation-delay: -7s; }
.ambient span:nth-child(3){ width: 380px; height: 380px; left: 20%; bottom: -160px; background: var(--blob-3); animation-delay: -14s; }
@keyframes drift{ 0%, 100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(30px,-20px) scale(1.08); } }

.theme-toggle{
    position: fixed; top: 28px; right: 28px; display: flex; align-items: center; gap: 6px; padding: 5px;
    border-radius: 999px; background: var(--panel); border: 1px solid var(--border); z-index: 10;
}
.theme-toggle button{
    appearance: none; border: none; background: transparent; width: 34px; height: 34px; border-radius: 999px;
    display: grid; place-items: center; color: var(--text-dim); cursor: pointer; transition: background .25s ease, color .25s ease;
}
.theme-toggle button[aria-pressed="true"]{ background: var(--accent-soft); color: var(--accent); }
.theme-toggle svg{ width: 16px; height: 16px; }

.wrap{
    position: relative; z-index: 1; width: 100%; max-width: 980px; display: grid; grid-template-columns: 1.05fr .95fr;
    background: var(--panel); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow); overflow: hidden;
}
.form-side{ padding: 64px; }

.back-link{
    display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dim);
    text-decoration: none; margin-bottom: 30px; transition: color .2s ease;
}
.back-link:hover{ color: var(--accent); }
.back-link svg{ width: 16px; height: 16px; }

.eyebrow{ font-size: 13px; font-weight: 500; color: var(--accent); margin-bottom: 18px; letter-spacing: .01em; }
h1{ font-weight: 600; font-size: 32px; letter-spacing: -.015em; margin: 0 0 10px; }
.sub{ color: var(--text-dim); font-size: 15px; line-height: 1.55; margin: 0 0 36px; }
.sub b{ color: var(--text); font-weight: 600; }

.field{ margin-bottom: 24px; }
.field label{ display: block; font-size: 13.5px; font-weight: 500; color: var(--text-dim); margin-bottom: 10px; }
.input-shell{
    position: relative; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 13px;
    background: var(--panel-2); transition: border-color .2s ease, box-shadow .2s ease;
}
.input-shell:hover{ border-color: var(--border-strong); }
.input-shell:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input-shell.is-ok{ border-color: color-mix(in srgb, var(--success) 60%, transparent); }
.input-shell.is-bad{ border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.input-shell > svg{ width: 18px; height: 18px; margin-left: 16px; color: var(--text-dim); flex-shrink: 0; }
.input-shell input{
    width: 100%; border: none; background: transparent; outline: none; padding: 15px 16px;
    font-size: 15px; color: var(--text); font-family: inherit;
}
.input-shell input[readonly]{ color: var(--text-dim); }
.input-shell input::placeholder{ color: var(--text-dim); opacity: .65; }
.toggle-pass{
    appearance: none; border: none; background: transparent; color: var(--text-dim); cursor: pointer;
    display: grid; place-items: center; padding: 0 14px; flex-shrink: 0; transition: color .2s ease;
}
.toggle-pass:hover{ color: var(--text); }
.toggle-pass svg{ width: 17px; height: 17px; }

/* Indicator de putere a parolei */
.strength{ display: flex; gap: 6px; margin-top: 10px; }
.strength span{ flex: 1; height: 4px; border-radius: 4px; background: var(--border-strong); transition: background .25s ease; }
.strength[data-level="1"] span:nth-child(-n+1){ background: var(--danger); }
.strength[data-level="2"] span:nth-child(-n+2){ background: var(--warning); }
.strength[data-level="3"] span:nth-child(-n+3){ background: var(--accent); }
.strength[data-level="4"] span{ background: var(--success); }
.rules{ list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 12.5px; color: var(--text-dim); }
.rules li{ display: flex; align-items: center; gap: 7px; }
.rules li::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; transition: background .2s ease; }
.rules li.ok{ color: var(--text); }
.rules li.ok::before{ background: var(--success); }
.hint-line{ font-size: 12.5px; margin-top: 8px; min-height: 18px; color: var(--text-dim); }
.hint-line.ok{ color: var(--success); }
.hint-line.bad{ color: var(--danger); }

.submit-btn{
    position: relative; width: 100%; border: none; border-radius: 13px; padding: 16px; margin-top: 6px;
    font-size: 15px; font-weight: 600; letter-spacing: -.005em; background: var(--accent); color: #fff; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.submit-btn:hover{ filter: brightness(1.08); box-shadow: 0 14px 30px -14px var(--accent); }
.submit-btn:active{ transform: translateY(1px); }
.submit-btn[disabled]{ opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }
.submit-btn .spinner{ display: none; }
.submit-btn.is-loading .label{ visibility: hidden; }
.submit-btn.is-loading .spinner{ display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; }
.spinner-ring{ width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.ghost-btn{
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px;
    border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 13px;
    padding: 14px; font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .2s ease;
}
.ghost-btn:hover{ border-color: var(--border-strong); }

.error-msg, .info-msg{
    display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45;
    border-radius: 12px; padding: 13px 15px; margin-bottom: 26px;
}
.error-msg{ color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent); }
.info-msg{ color: var(--text-dim); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.error-msg svg, .info-msg svg{ width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; }

/* Ecran de confirmare (email trimis / parolă schimbată / link expirat) */
.state{ text-align: left; }
.state-icon{
    width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 26px;
    background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success);
    animation: pop .45s cubic-bezier(.2,.9,.3,1.3);
}
.state-icon.warn{ background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.state-icon svg{ width: 28px; height: 28px; }
@keyframes pop{ from{ transform: scale(.6); opacity: 0; } to{ transform: none; opacity: 1; } }
.steps{ margin: 0 0 30px; padding: 0; list-style: none; counter-reset: s; }
.steps li b{ color: var(--text); font-weight: 600; }
.steps li{ counter-increment: s; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-bottom: 12px; }
.steps li::before{
    content: counter(s); flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent);
}

/* Partea din dreapta (ca la login) */
.signature-side{
    position: relative; background: var(--panel-2); border-left: 1px solid var(--border);
    display: flex; flex-direction: column; justify-content: center; padding: 48px; overflow: hidden;
}
.signature-side::before{
    content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -120px; bottom: -130px;
    background: radial-gradient(circle, var(--accent-soft), transparent 70%); opacity: .5;
}
.signature-copy{ position: relative; }
.signature-copy p.tag{ font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.signature-copy h2{ font-weight: 500; font-size: 23px; line-height: 1.4; letter-spacing: -.01em; margin: 0; color: var(--text); max-width: 20ch; }
.signature-copy .meta{ margin-top: 22px; font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.signature-copy .meta .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

@media (max-width: 780px){
    .wrap{ grid-template-columns: 1fr; }
    .signature-side{ display: none; }
    .form-side{ padding: 44px 26px; }
    .theme-toggle{ top: 14px; right: 14px; }
    body{ padding: 72px 14px 24px; align-items: flex-start; }
    h1{ font-size: 27px; }
    .rules{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){ .ambient span, .state-icon{ animation: none; } }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }