/* ===== PearCMS — экраны авторизации (вход / регистрация) | LIGHT =====
 * Парный к auth.css. Большинство стилей опирается на CSS-переменные из
 * pearcms-light.css (--space-*, --fg-*, --line, --pear*, --leaf*), поэтому
 * этот файл идентичен dark-версии — отличия только в нескольких хардкод-
 * цветах (ошибки, подсказки, индикатор силы пароля), чтобы они оставались
 * читаемыми на бумажном фоне.
 */
body{ min-height:100vh; display:flex; flex-direction:column }
.auth{ flex:1; display:grid; grid-template-columns:1fr 1fr; min-height:100vh }
@media (max-width:900px){ .auth{ grid-template-columns:1fr } }

/* левая колонка — форма */
.auth-form-col{ display:flex; flex-direction:column; padding:28px clamp(20px,5vw,64px); position:relative; z-index:2 }
.auth-top{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.auth-back{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--fg-mute); transition:color .15s }
.auth-back:hover{ color:var(--fg) }
.auth-body{ flex:1; display:flex; flex-direction:column; justify-content:center; max-width:430px; width:100%; margin:0 auto; padding:40px 0 }
.auth-body h1{ font-family:var(--f-display); font-weight:600; font-size:30px; letter-spacing:-.02em; margin:0 0 6px }
.auth-body .sub{ color:var(--fg-dim); font-size:15px; margin:0 0 28px }

.auth-field{ margin-bottom:16px }
.auth-field label{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--fg-mute); display:block; margin-bottom:7px }
.auth-input{ position:relative }
.auth-input input,
.auth-input textarea,
.auth-input select{
    width:100%;
    background:var(--space-2);
    border:1px solid var(--line-2);
    border-radius:11px;
    padding:13px 15px;
    color:var(--fg);
    font:inherit;
    font-size:15px;
    transition:border-color .15s, box-shadow .15s;
}
.auth-input textarea{
    min-height:120px;
    resize:vertical;
    line-height:1.5;
    font-family:inherit;
}
.auth-input input::placeholder,
.auth-input textarea::placeholder{ color:var(--fg-mute) }
.auth-input input:focus,
.auth-input textarea:focus,
.auth-input select:focus{
    outline:none;
    border-color:var(--pear-deep);
    box-shadow:0 0 0 3px rgba(168,134,28,.18);
}
/* error: на бумаге используем насыщенный кирпичный, не оранжевый */
.auth-field.err .auth-input input,
.auth-field.err .auth-input textarea{ border-color:#a6402a }
.auth-field .hint{ font-size:12px; color:#a6402a; margin-top:6px; display:none }
.auth-field.err .hint{ display:block }
.field-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:460px){ .field-2{ grid-template-columns:1fr } }
.pw-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--fg-mute) }
.pw-toggle:hover{ color:var(--accent) }

/* индикатор силы пароля — затемнённая шкала под бумагу */
.pw-meter{ display:flex; gap:5px; margin-top:9px }
.pw-meter i{ flex:1; height:4px; border-radius:2px; background:var(--line); transition:background .2s }
.pw-meter.s1 i:nth-child(1){ background:#a6402a }
.pw-meter.s2 i:nth-child(-n+2){ background:#c87432 }
.pw-meter.s3 i:nth-child(-n+3){ background:var(--pear-deep) }
.pw-meter.s4 i{ background:var(--leaf-deep) }
.pw-label{ font-size:12px; color:var(--fg-mute); margin-top:6px }

.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 22px; font-size:13.5px }
.remember{ display:inline-flex; align-items:center; gap:8px; color:var(--fg-dim); cursor:pointer }
.remember input{ width:auto; accent-color:var(--pear-deep) }
.auth-row a{ color:var(--accent); transition:color .15s }
.auth-row a:hover{ color:var(--pear-deep) }

.consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--fg-mute); margin:2px 0 20px }
.consent input{ width:auto; margin-top:2px; accent-color:var(--pear-deep) }
.consent a{ color:var(--accent) }
.auth-field.err + .consent{ }
.consent.err{ color:#a6402a }

.auth-submit{ width:100%; justify-content:center; font-size:15px; padding:15px }

.divider{ display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--fg-mute); font-size:12px; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.1em }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--line) }
.sso{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.sso a{ display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; border:1px solid var(--line-2); border-radius:11px; font-size:14px; color:var(--fg-dim); transition:border-color .15s, color .15s }
.sso a:hover{ border-color:var(--pear-deep); color:var(--fg) }

.auth-foot{ margin-top:26px; text-align:center; font-size:14px; color:var(--fg-dim) }
.auth-foot a{ color:var(--accent); font-weight:500 }

/* success */
.auth-success{ display:none; text-align:center; padding:18px 0 }
.auth-success.show{ display:block; animation:reveal-in .4s ease both }
.auth-success .as-ic{ width:64px; height:64px; border-radius:50%; background:var(--space-3); border:1px solid var(--leaf-deep); display:grid; place-items:center; color:var(--leaf-deep); margin:0 auto 18px }
.auth-success h3{ font-family:var(--f-display); font-weight:600; font-size:22px; margin:0 0 8px }
.auth-success p{ color:var(--fg-dim); font-size:14px; margin:0 0 22px }

/* правая колонка — бренд (жёлто-голубой градиент, скруглённая карточка) */
.auth-brand-col{
    position:relative;
    overflow:hidden;
    margin:24px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:15px;
    box-shadow:0 18px 40px -16px rgba(90,80,30,.30);
    display:flex; flex-direction:column; justify-content:center;
    padding:48px clamp(28px,4vw,72px);
    background:linear-gradient(135deg, #e6d24a, #a6b2d3);
}
@media (max-width:900px){ .auth-brand-col{ display:none } }
.auth-brand-col .ab-glow{ position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.30), transparent 70%); pointer-events:none }
.auth-brand-col .ab-glow.two{ right:auto; left:-160px; top:auto; bottom:-160px; background:radial-gradient(circle, rgba(28,29,23,.10), transparent 70%) }
.auth-brand-col .ab-inner{ position:relative; z-index:2; max-width:430px }
.ab-eyebrow{ font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(28,29,23,.7); display:inline-flex; align-items:center; gap:9px; margin-bottom:18px }
.ab-eyebrow::before{ content:""; width:26px; height:1px; background:rgba(28,29,23,.45) }
.auth-brand-col h2{ font-family:var(--f-display); font-weight:600; font-size:clamp(28px,3vw,38px); line-height:1.1; letter-spacing:-.02em; margin:0 0 18px; color:#1c1d17 }
.auth-brand-col h2 em{ font-style:normal; color:#1c1d17; background:none; -webkit-background-clip:initial; background-clip:initial }
.ab-list{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:14px }
.ab-list li{ display:flex; gap:12px; align-items:flex-start; color:rgba(28,29,23,.82); font-size:15px }
.ab-list li svg{ color:#436b1f; flex-shrink:0; margin-top:3px }
.ab-quote{ margin-top:34px; padding:18px 20px; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:rgba(255,255,255,.55); backdrop-filter:blur(4px) }
.ab-quote p{ margin:0 0 12px; color:rgba(28,29,23,.82); font-size:14px; line-height:1.6 }
.ab-quote .by{ display:flex; align-items:center; gap:11px }
.ab-quote .by .av{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.65); border:1px solid rgba(0,0,0,.10); display:grid; place-items:center; color:#a8861c; font-family:var(--f-display); font-weight:600; font-size:14px }
.ab-quote .by b{ font-size:13px; font-weight:600; display:block; color:#1c1d17 }
.ab-quote .by span{ font-size:12px; color:rgba(28,29,23,.55) }

.auth-copy{ font-family:var(--f-mono); font-size:12px; color:var(--fg-mute) }