/* =========================================
   Auth (Login/Signup) Styles
   ========================================= */
.auth-hero{padding:48px 0}
.auth-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
@media (max-width:900px){.auth-grid{grid-template-columns:1fr}}
.auth-copy h1{margin:0 0 8px}
.auth-highlights{margin:8px 0 0 18px}
.auth-highlights li{margin:6px 0}

.auth-card{max-width:460px;margin-left:auto;margin-right:0}
.field{display:block;margin:10px 0}
.lab{display:block;font-weight:700;margin-bottom:6px}
input[type=text],input[type=email],input[type=password]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{outline:2px solid var(--accent);outline-offset:2px}
.password-wrap{display:flex;gap:8px;align-items:center}
.password-wrap input{flex:1}
.btn.tiny{padding:6px 10px;border-radius:8px;font-size:12px}
.full{width:100%;justify-content:center}
.small{font-size:13px}
.row{display:flex;gap:12px}
.between{justify-content:space-between}
.align-center{align-items:center}
.chk{display:inline-flex;gap:8px;align-items:center}
.alert{background:#fff4f3;border:1px solid #ffd9d6;color:#8a160f;padding:10px 12px;border-radius:10px;margin:10px 0}

/* Password strength meter */
.pw-wrap{margin-top:6px}
.pw-strength{height:8px;background:#f1f1f3;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.pw-strength span{display:block;height:100%;width:0;transition:width .25s ease, background .25s ease}
.pw-hint{font-size:12px;color:var(--muted);margin-top:6px}
.pw-weak{background:#DA291C}
.pw-fair{background:#FF8C42}
.pw-good{background:#FFC72C}
.pw-strong{background:#2ECC71}

.field input{width:100%}

/* Select dropdowns */
.field select, select {
  display:block;
  width:100%;
  font: inherit;
  line-height:1.2;
  padding:12px 38px 12px 14px; /* leave room for chevron */
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  background-clip: padding-box; /* avoid iOS inner bevel */
  color:var(--ink);
  box-shadow:none;
  box-sizing:border-box;
  min-height:48px;
  font-size:16px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  -webkit-tap-highlight-color: transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
}
.field select:focus, select:focus {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Option text color */
select option { color: var(--ink); }

/* Select wrapper to match input styling exactly */
.select-wrap{position:relative;display:block}
.select-wrap select{
  display:block;width:100%;box-sizing:border-box;
  height:48px;min-height:48px;line-height:48px;
  padding:0 38px 0 14px;
  border:1px solid var(--line);border-radius:12px;
  background:#fff !important;color:var(--ink);
  font-size:16px;font:inherit;
  outline:none;box-shadow:none;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
}
.select-wrap::after{
  content:"";position:absolute;right:12px;top:50%;margin-top:-8px;width:16px;height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size:16px;background-repeat:no-repeat;pointer-events:none;
}

/* Remove iOS inner shadow on selects */
.select-wrap select::-ms-expand{display:none}