/* =========================
   CNQ Apps — Sign-in Styles
   ========================= */

:root{
  --text:#0f172a;
  --muted:#64748b;
  --accent:#794AFF;
  --border:rgba(15,23,42,.12);
  --card:#ffffff;
  --ghost:#fafafa;

  --color-indigo-50:#EEF2FF;
  --color-purple-50:#FAF5FF;

  --shadow-lg:0 20px 60px rgba(2,6,23,.12);
  --radius-xl:20px; --radius-lg:14px; --radius-md:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:15px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
}

/* Background */
.auth-bg{
  --tw-gradient-from: var(--color-indigo-50);
  --tw-gradient-via:  #ffffff;
  --tw-gradient-to:   var(--color-purple-50);
  background: linear-gradient(135deg, var(--tw-gradient-from), var(--tw-gradient-via) 40%, var(--tw-gradient-to));
  min-height: 100%;
  display:grid;
  place-items:center;
  padding: 24px;
}

.auth-wrap{width:100%; max-width: 420px}

/* Card */
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 22px 22px 24px;
}

.card-header{margin-bottom: 12px}
.brand{display:flex; gap:12px; align-items:center}
.brand-badge{
  width:36px; height:36px;
  border-radius:12px;
  display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(121,74,255,.25);
  overflow:hidden;
}
.brand-badge img{
  width:100%; height:100%;
  display:block; object-fit:cover; border-radius:inherit;
}
.brand-title{margin:0; font-size:20px; font-weight:700}
.hint{margin:2px 0 0; color:var(--muted)}

/* Alerts */
.alert{
  background:#fff3f3; border:1px solid #ffd5d5; color:#9b1c1c;
  padding:10px 12px; border-radius:12px; margin: 10px 0 6px;
  font-size: 14px;
}
.alert-line + .alert-line{ margin-top:4px }

/* Form */
.form{display:grid; gap:14px; margin-top:8px}

.field{display:grid; gap:8px}
.label{font-weight:600}
.field input[type="email"],
.field input[type="password"],
.field input[type="text"]{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  outline:none; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus{
  border-color: color-mix(in oklab, var(--accent) 50%, #7c90ff);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.field-hint{color:#b42318; font-size:12px; min-height:14px}

.row{display:flex; gap:10px; align-items:center}
.row.between{justify-content:space-between}
.checkbox{display:flex; gap:8px; align-items:center}

/* Buttons/links */
.primary-btn{
  background: var(--accent); color:#fff; font-weight:700; border:0; border-radius:12px;
  padding:12px 14px; cursor:pointer;
  box-shadow: 0 10px 30px color-mix(in oklab, var(--accent) 24%, transparent);
}
.primary-btn:hover{ filter: brightness(0.97) }

.link{
  color: color-mix(in oklab, var(--accent) 60%, #5a67d8);
  text-decoration: none; font-weight:600;
}
.link:hover{text-decoration: underline}

/* Divider */
.or{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:10px;
  color:var(--muted); font-size:12px;
  margin: 6px 0 2px;
}
.or::before,.or::after{content:''; height:1px; background:var(--border)}

/* OAuth */
.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid var(--border); background:#fff; border-radius:12px; padding:10px 14px;
  text-decoration:none; color:inherit; font-weight:700;
}
.oauth-btn .g{display:block}
.oauth-btn.google:hover{background:#fafafa}

.muted{color:var(--muted)} .small{font-size:13px}

/* =========================
   Emoji Eye Toggle (🐵 / 🙈)
   ========================= */
.pwd-wrap{
  position: relative;
  display: flex;
  align-items: center;
}

/* add right padding so text doesn't go under the button */
.pwd-wrap input[type="password"],
.pwd-wrap input[type="text"]{
  padding-right: 44px;
}

/* eye button inside the input */
.pwd-wrap .eye{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--ghost);
  cursor:pointer;
  padding:0;
  line-height:1;
}

/* emoji visuals */
.pwd-wrap .eye::before{
  content:"🐵";
  display:block;
  text-align:center;
  font-size:16px;
  line-height:28px;
}
.pwd-wrap .eye.on::before{
  content:"🙈";
}

/* focus state */
.pwd-wrap .eye:focus{
  outline:none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* hover */
.pwd-wrap .eye:hover{ filter: brightness(0.98); }