/* ============================================================
   MICO360 Finance - shared shell for the signed-out pages
   (sign in, forgot password, reset password).

   Kept in one file on purpose: these styles used to live inline in
   login.html, which meant every new auth page copied them and then
   drifted. Page-specific decoration (for example the dashboard
   preview on the sign-in page) stays in that page.
   ============================================================ */

.auth{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}
@media(max-width:1040px){.auth{grid-template-columns:1fr}}

/* ---------------- brand side ---------------- */
.brandside{
  position:relative;overflow:hidden;isolation:isolate;
  background:#111117;color:#fff;padding:46px 54px;
  /* Centre the lockup as one group with capped gaps. space-between used to fling the
     logo, headline and footer to the extremes, opening large voids on a tall window
     and leaving the content looking stranded in the corner. */
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(26px,4.5vh,58px);
}
/* keep the content column from hugging the left edge on a very wide panel */
.brandside > *{width:100%;max-width:720px;margin-inline:auto}
html[data-theme="dark"] .brandside{background:#0B0B0F}
.brandside::before{               /* fine dot grid */
  content:"";position:absolute;inset:0;z-index:-3;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.brandside::after{                /* warm brand wash from the lower right */
  content:"";position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(circle at 112% 96%, rgba(139,27,27,.75), transparent 55%),
    radial-gradient(circle at -10% -8%, rgba(139,27,27,.28), transparent 45%);
}
.rings{position:absolute;right:-210px;top:-190px;z-index:-2;pointer-events:none;opacity:.85}
.rings span{position:absolute;border-radius:50%;display:block}
.rings .r1{width:600px;height:600px;border:1px solid rgba(255,255,255,.08)}
.rings .r2{width:440px;height:440px;left:80px;top:80px;border:2px solid rgba(139,27,27,.55)}
.rings .r3{width:280px;height:280px;left:160px;top:160px;border:1px solid rgba(255,255,255,.06)}

.b-top{display:flex;align-items:center;gap:14px}
.logo-plate{background:#fff;border-radius:13px;padding:11px 16px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.logo-plate img{height:36px;display:block}
.b-top .wordmark{font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.02em;color:#fff}
.b-top .wordmark span{display:block;font-family:var(--font-body);font-weight:500;font-size:11.5px;color:#8f8f9a;letter-spacing:.06em;text-transform:uppercase}

.b-mid{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
@media(max-width:1280px){.b-mid{grid-template-columns:1fr}.preview{display:none}}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#EBA9A9;background:rgba(139,27,27,.3);
  border:1px solid rgba(235,169,169,.28);border-radius:999px;padding:6px 13px;margin-bottom:20px;
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:#EBA9A9;display:block}
.b-mid h2{color:#fff;font-size:34px;line-height:1.14;letter-spacing:-.02em;max-width:11ch}
.b-mid h2 em{font-style:normal;color:#E39191}
.b-mid .lead{color:#a8a8b4;font-size:14.5px;line-height:1.65;margin-top:16px;max-width:44ch}

ul.feat{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:11px}
ul.feat li{display:flex;gap:11px;align-items:center;color:#dcdce2;font-size:13.5px}
ul.feat .tick{width:22px;height:22px;border-radius:7px;background:rgba(139,27,27,.9);
  display:grid;place-items:center;flex:none;font-size:11px;color:#fff}

.b-foot{display:flex;flex-direction:column;gap:16px}
.stats{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.09);padding-top:18px}
.stats .s b{display:block;font-family:var(--font-head);font-size:15px;color:#fff}
.stats .s span{font-size:11px;color:#84848f}
.b-foot .copy{font-size:11px;color:#6e6e79}

/* ---------------- form side ---------------- */
.formside{display:grid;place-items:center;padding:40px 24px;background:var(--bg)}
.formcard{width:100%;max-width:412px}
.mobile-brand{display:none;align-items:center;gap:11px;justify-content:center;margin-bottom:24px}
.mobile-brand img{height:38px;background:#fff;border-radius:10px;padding:5px;border:1px solid var(--line)}
.mobile-brand .wordmark{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--ink)}
.mobile-brand .wordmark span{display:block;font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:1040px){.brandside{display:none}.mobile-brand{display:flex}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px 32px;box-shadow:var(--shadow-lg)}
@media(max-width:480px){.panel{padding:26px 20px;border-radius:14px}}
.panel h1{font-size:23px;letter-spacing:-.01em}
.panel .sub{color:var(--muted);font-size:13.5px;margin-top:5px;margin-bottom:22px}

.in-wrap{position:relative;display:flex;align-items:center}
.in-wrap .ic{position:absolute;left:13px;font-size:14px;color:var(--muted);pointer-events:none;line-height:1}
.in-wrap .input{padding-left:39px}
.in-wrap .input.has-peek{padding-right:66px}
.peek{position:absolute;right:7px;background:none;border:none;cursor:pointer;font-family:inherit;
  color:var(--muted);font-size:11.5px;font-weight:700;padding:6px 9px;border-radius:7px;letter-spacing:.02em}
.peek:hover{color:var(--maroon-fg);background:var(--maroon-tint-2)}
.caps{display:none;align-items:center;gap:6px;font-size:11.5px;color:var(--warning);font-weight:700;margin-top:2px}
.caps.on{display:flex}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* a checkbox whose label carries a second, quieter helper line (e.g. the SMS fallback note).
   The shared .checkbox centres a single-line label; .stack top-aligns the box so a two-line
   label reads cleanly instead of the box floating against the middle of the wrap. */
.checkbox.stack{align-items:flex-start;line-height:1.4}
.checkbox.stack input{margin-top:2px}
.checkbox.stack .ct{display:flex;flex-direction:column;gap:2px}
.checkbox.stack .ct .sub{color:var(--muted);font-size:11.5px;line-height:1.45}
.foot-note{text-align:center;font-size:12.5px;color:var(--muted);line-height:1.6}
.legal{text-align:center;font-size:11.5px;margin-top:16px;color:var(--muted)}
.legal a{color:var(--muted)}
.legal a:hover{color:var(--maroon-fg)}

/* steps shown on the brand side of the recovery pages */
.steps{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:24px}
.steps li{display:flex;gap:13px;align-items:flex-start;color:#dcdce2;font-size:13.5px;line-height:1.5}
.steps .n{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  font-family:var(--font-head);font-weight:800;font-size:11px;color:#fff}
.steps li b{color:#fff;font-weight:700}
.steps li span{display:block;color:#9a9aa6;font-size:12.5px;margin-top:2px}

/* password strength meter (reset page) */
.meter{display:flex;gap:5px;margin-top:9px}
.meter i{height:4px;flex:1;border-radius:999px;background:var(--line-2);display:block;transition:background .2s}
.meter.s1 i:nth-child(1){background:var(--danger)}
.meter.s2 i:nth-child(-n+2){background:var(--warning)}
.meter.s3 i:nth-child(-n+3){background:#3F9E6A}
.meter.s4 i{background:var(--success)}
.meter-note{font-size:11.5px;color:var(--muted);margin-top:6px}

/* Touch targets on the sign-in flow (measured at 375x812).
   "Forgot password?" was 106x19 and the local sign-in helper buttons 110x26.
   Vertical padding on an inline link grows the hit box without moving the row. */
@media(max-width:640px),(pointer:coarse){
  .row-between a{padding-block:15px}
  .foot-note a,.legal a{padding-block:15px}
  .panel button:not(.btn):not(.peek),
  .formcard button:not(.btn):not(.peek){min-height:44px;padding:6px 12px}
}

/* entrance polish */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.b-mid,.b-foot,.formcard{animation:riseIn .5s cubic-bezier(.2,.7,.3,1) both}
.b-foot{animation-delay:.08s}.formcard{animation-delay:.06s}
@media(prefers-reduced-motion:reduce){.b-mid,.b-foot,.formcard{animation:none}}