/* ============================================================
   Sign-in / activation / password-reset screens — "Yara · Login" design.
   Shared by staff and customers. Desktop: form panel + navy aside.
   Mobile (<1024px): navy hero with the form card overlapping it.
   ============================================================ */
:root{--au-navy:#0E2145;--au-ink:#14213D;--au-blue:#265CA6;--au-blue-h:#1D4A8A;--au-sky:#EAF1FB;--au-dot:#62B7F2;
  --au-pale:#C9D6EC;--au-soft:#F4F6FA;--au-line:#D9DEE8;--au-line-2:#E1E5EE;--au-mut:#5B6478;--au-text:#3E475C;
  --au-ok:#1F7A4D;--au-ok-bg:#E3F3EA;--au-ok-ink:#15573A;--au-warn:#8A4B08;--au-warn-bg:#FFF6E8;--au-err:#B42318;--au-err-bg:#FEECEB}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.au-body{font-family:Rubik,system-ui,sans-serif;color:var(--au-ink);background:#fff;-webkit-font-smoothing:antialiased}
.au-body a{color:var(--au-blue)}.au-body a:hover{color:var(--au-blue-h)}
.au-body button:focus-visible,.au-body a:focus-visible{outline:3px solid rgba(38,92,166,.45);outline-offset:2px}
.au-body h1,.au-body h2,.au-body p{margin:0}
.dots{background-image:radial-gradient(rgba(255,255,255,.09) 1.2px,transparent 1.2px);background-size:22px 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- frame ---------- */
.au{display:flex;min-height:100vh}
.au-main{width:600px;flex-shrink:0;padding:48px 96px 36px;display:flex;flex-direction:column;gap:22px}
.au--wide .au-main{width:640px;padding:40px 96px 32px}
.au-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.au-logo{display:block;line-height:0}
.au-logo img{height:44px;width:auto;display:block}
.au-tag{font-size:13px;font-weight:500;color:var(--au-blue);background:var(--au-sky);padding:6px 12px;border-radius:999px;white-space:nowrap}
.au-back{width:44px;height:44px;border-radius:12px;border:1px solid var(--au-line-2);display:inline-flex;align-items:center;justify-content:center;color:var(--au-ink)}
.au-hero{display:none}
.au-card{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:22px}
.au--wide .au-card{justify-content:flex-start;gap:16px}
.au-after{display:flex;flex-direction:column;gap:12px}
.au-foot{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--au-mut);border-top:1px solid #E6E9F0;padding-top:18px}
.au-foot a{color:var(--au-mut);text-decoration:none}
.au-aside{flex-grow:1;margin:16px;border-radius:28px;background-color:var(--au-navy);color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;overflow:hidden;position:relative}
.au-aside--center{justify-content:center}

/* ---------- type + fields ---------- */
.au-h1{font-size:34px;font-weight:700;letter-spacing:-.5px;color:var(--au-navy);line-height:1.2}
.au--wide .au-h1{font-size:30px}
.au-lead{font-size:16px;line-height:1.6;color:var(--au-mut)}
.au-head{display:flex;flex-direction:column;gap:8px}
.au-form{display:flex;flex-direction:column;gap:20px}
.au--wide .au-form{gap:16px}
.au-f{display:flex;flex-direction:column;gap:8px}
.au-f label,.au-lbl{font-size:14px;font-weight:600;color:var(--au-ink)}
.au-f-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.au-f-row a{font-size:14px;font-weight:500;text-decoration:none}
.au-in{position:relative}
.au-in .ic{position:absolute;right:16px;top:16px;color:#8A93A6;display:flex;pointer-events:none}
.au-input{width:100%;height:52px;border:1.5px solid var(--au-line);border-radius:12px;padding:0 16px;font:inherit;font-size:16px;color:var(--au-ink);background:#fff}
.au-in .ic~.au-input{padding-right:48px}
.au-input.pw{padding-left:56px}
.au-input:focus{outline:none;border-color:var(--au-blue);box-shadow:0 0 0 4px rgba(38,92,166,.16)}
.au-input[readonly]{background:var(--au-soft);border-color:var(--au-line-2);color:var(--au-text)}
.au-input.ok{border-color:var(--au-ok)}.au-input.bad{border-color:var(--au-err)}
.au-ltr{direction:ltr;text-align:right}
.au-eye{position:absolute;left:4px;top:4px;width:44px;height:44px;border:0;background:transparent;color:var(--au-mut);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.au-eye .off{display:none}.au-eye[aria-pressed="true"] .on{display:none}.au-eye[aria-pressed="true"] .off{display:flex}
.au-hint{font-size:12px;display:flex;align-items:center;gap:4px;color:var(--au-mut)}
.au-hint.ok{color:var(--au-ok)}.au-hint.err{color:var(--au-err)}
.au-btn{height:54px;border:0;border-radius:12px;background:var(--au-blue);color:#fff;font:inherit;font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 6px 16px rgba(38,92,166,.25);text-decoration:none;width:100%}
.au-btn:hover{background:var(--au-blue-h);color:#fff}
.au-btn:disabled{background:#9DB3D6;box-shadow:none;cursor:not-allowed}
.au-note{display:flex;gap:12px;align-items:flex-start;background:var(--au-soft);border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.6;color:var(--au-text)}
.au-note .ic{color:var(--au-blue);display:flex;padding-top:2px;flex-shrink:0}
.au-msg{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.55}
.au-msg .ic{display:flex;flex-shrink:0;padding-top:1px}
.au-msg.ok{background:var(--au-ok-bg);color:var(--au-ok-ink)}
.au-msg.err{background:var(--au-err-bg);color:var(--au-err)}
.au-msg.warn{background:var(--au-warn-bg);color:var(--au-warn)}
.au-msg a{color:inherit;font-weight:600}
.au-msg strong{font-weight:600;display:block}
.au-badge-ic{width:60px;height:60px;border-radius:18px;background:var(--au-sky);color:var(--au-blue);display:flex;align-items:center;justify-content:center}
.au-end{font-size:13px;color:var(--au-mut);margin-top:auto}
.mobile-only{display:none!important}
.au-end a{font-weight:500}

/* ---------- activation extras ---------- */
.au-steps{list-style:none;margin:4px 0 0;padding:0;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500}
.au-steps li{display:flex;align-items:center;gap:8px;color:#6B7487;white-space:nowrap}
.au-steps .n{width:24px;height:24px;border-radius:50%;border:1.5px solid #C9CFDB;display:flex;align-items:center;justify-content:center;font-size:12px}
.au-steps .done{color:var(--au-ok)}.au-steps .done .n{background:var(--au-ok-bg);border-color:var(--au-ok-bg)}
.au-steps .now{color:var(--au-blue)}.au-steps .now .n{background:var(--au-blue);border-color:var(--au-blue);color:#fff}
.au-steps .ln{flex-grow:1;height:2px;background:var(--au-line-2);border-radius:2px}
.au-steps .ln.on{background:var(--au-blue)}
.au-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.au-meter{display:flex;align-items:center;gap:10px;margin-top:2px}
.au-meter .bars{flex-grow:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.au-meter .bars span{height:5px;border-radius:3px;background:var(--au-line-2);transition:background .2s}
.au-meter b{font-size:12px;font-weight:600;min-width:52px}
.au-rules{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.au-rules li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--au-mut)}
.au-rules li span{width:18px;height:18px;border-radius:50%;background:#EEF1F6;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.au-rules li.ok{color:var(--au-ok)}.au-rules li.ok span{background:var(--au-ok-bg);color:var(--au-ok)}

/* ---------- navy aside content ---------- */
.au-kicker{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--au-pale)}
.au-kicker i{width:8px;height:8px;border-radius:50%;background:var(--au-dot)}
.au-claim{display:flex;flex-direction:column;gap:22px;max-width:560px}
.au-claim h2{font-size:52px;line-height:1.15;font-weight:700;letter-spacing:-1px}
.au-claim p{font-size:18px;line-height:1.7;color:var(--au-pale)}
.au-boards{display:flex;align-items:flex-end;gap:32px;border-bottom:2px solid rgba(255,255,255,.18)}
.au-bb{display:flex;flex-direction:column;align-items:center}
.au-bb .face{border-radius:10px;box-sizing:border-box}
.au-bb .legs{display:flex}
.au-bb .legs i{display:block;background:rgba(255,255,255,.28)}
.au-bb--1 .face{width:300px;height:160px;background:var(--au-blue);display:flex;flex-direction:column;justify-content:center;padding:24px;gap:6px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.au-bb--1 .face small{font-size:13px;color:#CFE0F7;font-weight:500}
.au-bb--1 .face b{font-size:28px;font-weight:700}
.au-bb--1 .legs{gap:150px}.au-bb--1 .legs i{width:6px;height:70px}
.au-bb--2 .face{width:180px;height:104px;border-radius:8px;border:2px dashed rgba(255,255,255,.35)}
.au-bb--2 .legs{gap:90px}.au-bb--2 .legs i{width:5px;height:54px;background:rgba(255,255,255,.2)}
.au-bb--3 .face{width:120px;height:70px;border-radius:6px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18)}
.au-bb--3 .legs i{width:5px;height:40px;background:rgba(255,255,255,.18)}
.au-client{background:#fff;color:var(--au-ink);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:20px;max-width:520px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.au-client .who{display:flex;align-items:center;gap:14px}
.au-mono{width:52px;height:52px;border-radius:14px;background:var(--au-sky);color:var(--au-blue);font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.au-client small,.au-hero-client small{font-size:13px;color:var(--au-mut);display:block}
.au-client b{font-size:20px;font-weight:700;color:var(--au-navy);display:block}
.au-exp{display:flex;align-items:center;gap:10px;background:var(--au-warn-bg);color:var(--au-warn);border-radius:10px;padding:10px 14px;font-size:14px}
.au-feats{display:flex;flex-direction:column;gap:18px;max-width:520px}
.au-feats h2{font-size:26px;font-weight:700}
.au-feat{display:flex;gap:14px;align-items:flex-start}
.au-feat .ic{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:rgba(255,255,255,.1);color:#9CCBF5;display:flex;align-items:center;justify-content:center}
.au-feat b{font-size:17px;font-weight:600;display:block}
.au-feat span{font-size:14px;color:var(--au-pale);display:block;margin-top:3px}

/* ---------- medium screens: tighter panel ---------- */
@media (max-width:1280px){
  .au-main,.au--wide .au-main{width:520px;padding:40px 56px 32px}
  .au-claim h2{font-size:42px}
  .au-bb--1 .face{width:240px;height:130px}.au-bb--1 .legs{gap:110px}
  .au-bb--3{display:none}
}

/* ---------- mobile ---------- */
@media (max-width:1023px){
  body.au-body{background:var(--au-soft)}
  .au{display:block}
  .au-main,.au--wide .au-main{width:100%;padding:0 0 8px;gap:0;min-height:100vh}
  .au-aside{display:none}
  .au-top{display:none}
  .au-hero{display:flex;flex-direction:column;gap:20px;background-color:var(--au-navy);color:#fff;padding:32px 24px 80px}
  .au-hero .au-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .au-hero .au-logo{background:#fff;border-radius:12px;padding:8px 12px}
  .au-hero .au-logo img{height:30px}
  .au-hero .au-tag{color:var(--au-pale);background:transparent;border:1px solid rgba(255,255,255,.22);font-size:12px;padding:5px 10px}
  .au-hero h1{font-size:28px;font-weight:700;color:#fff}
  .au-hero p{font-size:15px;color:var(--au-pale);margin-top:6px}
  .au-hero-client{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border-radius:14px;padding:12px 14px}
  .au-hero-client .au-mono{width:42px;height:42px;border-radius:12px;background:#fff;font-size:16px}
  .au-hero-client small{color:var(--au-pale);font-size:12px}
  .au-hero-client b{font-size:17px;font-weight:600;display:block}
  .au-card,.au--wide .au-card{margin:-56px 16px 0;background:#fff;border-radius:20px;padding:24px 20px;box-shadow:0 12px 32px rgba(14,33,69,.12);flex-grow:0;justify-content:flex-start;gap:18px;position:relative}
  .au-card .au-head.desk{display:none}
  .au-h1,.au--wide .au-h1{font-size:24px}
  .au-after{margin:16px 16px 0}
  .au-after .au-note{background:#fff;border:1px solid var(--au-line-2)}
  .au-end{margin:18px 16px 0;text-align:center}
  .au-foot{margin-top:auto;border:0;justify-content:center;text-align:center;padding:24px 24px 28px;font-size:12px;line-height:1.7}
  .au-2{grid-template-columns:minmax(0,1fr)}
  .mobile-only{display:flex!important}
  .au-rules{grid-template-columns:minmax(0,1fr)}
  .au-steps{font-size:12px;gap:8px}
  .au-steps .n{width:20px;height:20px;font-size:11px}
  /* plain variant (forgot / reset): white page, back button, no hero */
  .au--plain .au-main{background:#fff;padding:28px 24px}
  .au--plain .au-top{display:flex}
  .au--plain .au-hero{display:none}
  .au--plain .au-card{margin:20px 0 0;padding:0;box-shadow:none;border-radius:0}
  .au--plain .au-card .au-head.desk{display:flex}
  .au--plain .au-foot{padding:24px 0 0}
}
@media (prefers-reduced-motion:reduce){.au-meter .bars span{transition:none}}