/* ════════════════════════════════════════════════════════════════
 * LEGACY — DO NOT EXTEND.
 * The canonical design system is public/css/design-system.css,
 * documented at docs/UI_REFERENCE.html (viewable at /ui-reference).
 * This file is preserved only so already-built pages keep working.
 * When a page is touched, prefer restyling it via the /restyle
 * skill to drop the dependency on this file.
 * ════════════════════════════════════════════════════════════════ */

/* Kilto unified auth (login, forgot, reset) — light theme */
:root{
  --bg:#fafafa; --bg2:#f4f4f5; --sf:#ffffff; --bd:#e4e4e7; --bl:#f9fafb;
  --tx:#09090b; --t2:#52525b; --t3:#71717a; --t4:#a1a1aa;
  --br:#2563EB; --brl:#eff6ff; --brd:#1e40af;
  --ok:#10b981; --okl:#ecfdf5;
  --wn:#f59e0b; --wnl:#fffbeb;
  --er:#ef4444; --erl:#fef2f2;
  --fs-xs:11px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,sans-serif;
  background:var(--bg); color:var(--tx);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(37,99,235,.06), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(139,92,246,.05), transparent 38%);
  pointer-events:none; z-index:0;
}
body::after{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
  background-size:48px 48px; background-position:-1px -1px;
  pointer-events:none; z-index:0;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}
[x-cloak]{display:none!important}

.auth-wrapper{ width:100%; max-width:400px; position:relative; z-index:1; }
.logo-area{text-align:center;margin-bottom:32px}
.logo-area img{ height:48px; width:auto; object-fit:contain; }
.logo-mark{display:inline-flex;align-items:center;gap:9px}
.logo-mark-icon{
  width:42px;height:42px;display:block;
}
.logo-mark-icon img{width:100%;height:100%;display:block}
.logo-mark-text{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:24px;
  color:var(--tx);letter-spacing:-.04em;line-height:1;
}

.auth-card{
  background:var(--sf); border:1px solid var(--bd); border-radius:14px;
  padding:34px 32px 28px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.04);
}
.auth-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-sm);color:var(--t3);
  font-weight:500;margin-bottom:18px;
  padding:0;background:transparent;border:0;cursor:pointer;
  font-family:inherit;transition:.12s;text-decoration:none;
}
.auth-back:hover{color:var(--tx)}
.auth-back i{font-size:10px}
.auth-title{
  font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;
  color:var(--tx);letter-spacing:-.02em;line-height:1.2;
}
.auth-subtitle{
  font-size:var(--fs-sm);color:var(--t3);
  margin-top:6px;margin-bottom:22px;line-height:1.55;
}

.alert{
  padding:11px 14px;border-radius:9px;
  font-size:var(--fs-sm);margin-bottom:18px;
  display:flex;align-items:flex-start;gap:9px;line-height:1.5;
}
.alert i{font-size:13px;margin-top:1px;flex-shrink:0}
.alert-success{background:var(--okl);border:1px solid rgba(16,185,129,.22);color:#047857}
.alert-error{background:var(--erl);border:1px solid rgba(239,68,68,.22);color:#b91c1c}
.alert-info{background:var(--brl);border:1px solid rgba(37,99,235,.22);color:var(--brd)}
.alert-warning{background:var(--wnl);border:1px solid rgba(245,158,11,.25);color:#92400e}
.alert ul{list-style:none;margin:0;padding:0}
.alert li+li{margin-top:3px}
.alert strong{font-weight:700}

.form-group{margin-bottom:14px}
.form-label{
  display:block;font-size:var(--fs-xs);font-weight:700;color:var(--t2);
  margin-bottom:6px;letter-spacing:.02em;text-transform:uppercase;
}
.form-input-wrap{position:relative}
.form-input{
  width:100%;padding:11px 14px 11px 38px;
  background:var(--sf);border:1px solid var(--bd);border-radius:9px;
  color:var(--tx);font-family:sans-serif;
  font-size:var(--fs-md);font-weight:500;outline:none;
  transition:border-color .14s, box-shadow .14s;
}
.form-input::placeholder{color:var(--t4);font-weight:400}
.form-input:hover{border-color:var(--t4)}
.form-input:focus{border-color:var(--br);box-shadow:0 0 0 3px var(--brl)}
.form-input.has-error{border-color:var(--er);box-shadow:0 0 0 3px var(--erl)}
.form-input[type="password"]{padding-right:42px}
.form-input-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--t3);font-size:13px;pointer-events:none;transition:color .14s;
}
.form-input-wrap:focus-within .form-input-icon{color:var(--br)}
.password-toggle{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--t3);font-size:13px;
  cursor:pointer;padding:5px;border-radius:5px;transition:.12s;
}
.password-toggle:hover{color:var(--tx);background:var(--bl)}

.field-error{
  display:flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);color:var(--er);
  margin-top:6px;font-weight:500;
}
.field-error i{font-size:9px}
.field-hint{
  font-size:var(--fs-xs);color:var(--t3);
  margin-top:6px;font-weight:500;line-height:1.5;
}

.form-row{
  display:flex;align-items:center;justify-content:space-between;
  margin:10px 0 22px;
}
.remember-label{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-sm);color:var(--t2);
  cursor:pointer;user-select:none;font-weight:500;
}
.remember-checkbox{
  position:relative;width:16px;height:16px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.remember-checkbox input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.remember-box{
  width:16px;height:16px;border:1.5px solid var(--bd);border-radius:5px;
  background:var(--sf);display:flex;align-items:center;justify-content:center;
  font-size:9px;color:transparent;transition:.12s;
}
.remember-checkbox input:checked + .remember-box{background:var(--br);border-color:var(--br);color:#fff}
.remember-checkbox input:focus-visible + .remember-box{box-shadow:0 0 0 3px var(--brl)}

.link-btn{
  display:inline;font-size:var(--fs-sm);
  color:var(--br);text-decoration:none;font-weight:600;
  background:transparent;border:0;padding:0;cursor:pointer;
  font-family:inherit;transition:color .12s;
}
.link-btn:hover{color:var(--brd);text-decoration:underline}

.submit-btn{
  width:100%;padding:12px;
  background:var(--tx);border:0;border-radius:9px;
  color:#fff;font-family:sans-serif;
  font-size:var(--fs-md);font-weight:700;cursor:pointer;
  transition:.14s;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;
  text-decoration:none;
}
.submit-btn:hover:not(:disabled){
  opacity:.9;transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(9,9,11,.18);
}
.submit-btn:active{transform:translateY(0)}
.submit-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brl)}
.submit-btn:disabled{opacity:.55;cursor:not-allowed}
.submit-btn i{font-size:11px;transition:transform .14s}
.submit-btn:hover:not(:disabled) i.fa-arrow-right{transform:translateX(2px)}

.secondary-btn{
  width:100%;padding:11px;
  background:var(--sf);border:1px solid var(--bd);border-radius:9px;
  color:var(--tx);font-family:sans-serif;
  font-size:var(--fs-md);font-weight:600;cursor:pointer;
  transition:.14s;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;
  margin-top:8px;text-decoration:none;
}
.secondary-btn:hover:not(:disabled){background:var(--bl);border-color:var(--t4)}
.secondary-btn:disabled{opacity:.6;cursor:not-allowed}

.auth-footer{
  text-align:center;margin-top:18px;
  font-size:var(--fs-xs);color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  gap:5px;font-weight:500;
}
.auth-footer i{font-size:10px;color:var(--ok)}

.powered-by{
  text-align:center;margin-top:24px;
  font-size:var(--fs-xs);color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  gap:6px;font-weight:500;
}
.powered-by-mark{
  width:14px;height:14px;border-radius:4px;background:#09090b;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-family:Outfit;font-weight:800;font-size:9px;letter-spacing:-.02em;
}

.success-icon{
  width:60px;height:60px;border-radius:50%;
  background:var(--okl);color:var(--ok);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin:0 auto 18px;position:relative;
}
.success-icon::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--okl);opacity:.6;
}

.centered-state{text-align:center}
.centered-state .auth-title,.centered-state .auth-subtitle{text-align:center}
.email-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;background:var(--bl);border:1px solid var(--bd);
  border-radius:7px;font-size:var(--fs-sm);font-weight:600;
  color:var(--tx);font-family:'Outfit',sans-serif;margin-top:8px;
}
.email-pill i{color:var(--t3);font-size:11px}

/* Password strength meter */
.pw-meter{display:flex;gap:4px;margin-top:8px}
.pw-meter-bar{flex:1;height:4px;border-radius:2px;background:var(--bg2);transition:background .2s}
.pw-meter-bar.active.weak{background:var(--er)}
.pw-meter-bar.active.medium{background:var(--wn)}
.pw-meter-bar.active.strong{background:var(--ok)}
.pw-meter-label{display:flex;justify-content:space-between;align-items:center;margin-top:7px;font-size:var(--fs-xs)}
.pw-meter-label-text{color:var(--t3);font-weight:500}
.pw-meter-label-status{font-weight:700}
.pw-meter-label-status.weak{color:var(--er)}
.pw-meter-label-status.medium{color:var(--wn)}
.pw-meter-label-status.strong{color:var(--ok)}

.pw-rules{
  display:flex;flex-direction:column;gap:4px;
  margin-top:10px;padding:10px 12px;
  background:var(--bl);border-radius:8px;
}
.pw-rule{
  display:flex;align-items:center;gap:7px;
  font-size:var(--fs-xs);color:var(--t3);font-weight:500;
  transition:color .15s;
}
.pw-rule.met{color:var(--ok)}
.pw-rule i{font-size:10px;flex-shrink:0;width:12px}
.pw-rule.met i{color:var(--ok)}
.pw-rule:not(.met) i{color:var(--t4)}

@media (max-width:480px){
  body{padding:18px}
  .auth-card{padding:26px 22px 22px;border-radius:12px}
  .logo-area{margin-bottom:24px}
  .auth-title{font-size:20px}
}