/* ============================================================================
   AIPA — Auth pages (dark glass UI: wrap content in .auth-wrap)
   Light login/register use base.css + login.css only; do not set :root here.
   ============================================================================ */

html{-webkit-font-smoothing:antialiased}

a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;border:none;background:none}
input,select,textarea{font:inherit;color:inherit}

.auth-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(circle at center,black 30%,transparent 85%);
  opacity:.18;
}

.auth-wrap{
  --bg:            #07101b;
  --surface:       rgba(10,20,35,0.82);
  --border:        rgba(126,192,255,0.13);
  --border-hi:     rgba(126,192,255,0.26);
  --text:          #edf4ff;
  --muted:         #b4c4df;
  --accent:        #7ec0ff;
  --accent-strong: #56a7ff;
  --accent-soft:   rgba(126,192,255,0.13);
  --accent-glow:   rgba(86,167,255,0.22);
  --danger:        #ff6b6b;
  --radius:        16px;

  position:relative;z-index:1;
  box-sizing:border-box;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:40px 20px 60px;
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,Roboto,'Helvetica Neue',sans-serif;
  color:var(--text);
  background:radial-gradient(circle at 20% 0%,rgba(76,138,255,.13),transparent 38%),
             radial-gradient(circle at 85% 8%,rgba(0,199,255,.09),transparent 30%),
             linear-gradient(180deg,#07101b 0%,#091320 50%,#07101a 100%);
  overflow-x:hidden;
}

.auth-brand{
  display:flex;align-items:center;gap:10px;margin-bottom:36px;
  font-size:1.125rem;font-weight:700;color:var(--text);
}
.auth-logo{height:30px;width:auto}

.auth-card{
  width:100%;max-width:520px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  padding:36px 40px;
  backdrop-filter:blur(18px);
  box-shadow:0 32px 80px rgba(0,0,0,.4);
}

.auth-header{margin-bottom:28px;text-align:center}
.auth-header h1{font-size:1.625rem;font-weight:800;margin-bottom:8px}
.auth-header p{font-size:.9rem;color:var(--muted);line-height:1.6}

/* Type selector */
.type-selector{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.type-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 10px;border-radius:12px;
  border:1px solid var(--border);color:var(--muted);
  transition:all .2s;text-align:center;
}
.type-btn svg{color:var(--muted);transition:color .2s}
.type-btn span{font-size:.875rem;font-weight:600;display:block}
.type-btn small{font-size:.72rem;color:var(--muted);display:block}
.type-btn:hover{border-color:var(--border-hi);color:var(--text)}
.type-btn.active{
  border-color:var(--accent);color:var(--text);
  background:var(--accent-soft);
}
.type-btn.active svg{color:var(--accent)}

/* Fields */
.fields-divider{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  color:var(--accent);text-transform:uppercase;
  margin:20px 0 14px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.field-group{margin-bottom:14px}
.field-group label{
  display:block;font-size:.8125rem;font-weight:500;
  color:var(--muted);margin-bottom:6px;
}
.field-group label .req{color:var(--accent);font-size:.75rem}

.field-group input,
.field-group select{
  display:block;width:100%;
  padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);font-size:.9rem;
  transition:border-color .18s,box-shadow .18s;
  outline:none;
}
.field-group input:focus,
.field-group select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field-group input::placeholder{color:var(--muted);opacity:.6}
.field-group select option{background:#0c1626;color:var(--text)}

.input-eye{position:relative}
.input-eye input{padding-right:40px}
.eye-btn{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);padding:4px;
  transition:color .18s;
}
.eye-btn:hover{color:var(--text)}

.company-fields{
  background:rgba(126,192,255,.04);
  border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;margin-bottom:14px;
}

/* Submit */
.btn-submit{
  display:block;width:100%;
  padding:13px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent-strong),#4DB8CC);
  color:#fff;font-size:.9375rem;font-weight:700;
  box-shadow:0 4px 20px var(--accent-glow);
  transition:all .2s;margin-top:8px;
}
.btn-submit:hover{transform:translateY(-1px);box-shadow:0 8px 28px var(--accent-glow)}
.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}

.form-error{
  background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.3);
  color:#ff8f8f;border-radius:10px;padding:10px 14px;
  font-size:.875rem;margin-bottom:12px;
}

.auth-switch{text-align:center;font-size:.875rem;color:var(--muted);margin-top:18px}
.auth-switch a{color:var(--accent);font-weight:600;margin-left:4px}
.auth-switch a:hover{text-decoration:underline}

@media(max-width:520px){
  .auth-card{padding:28px 22px;border-radius:18px}
  .form-row{grid-template-columns:1fr}
}

/* ── Shared with login/register (light theme pages) ─────────────────────── */
.login-field--pwd .pwd-wrap {
  position: relative;
}
.login-field--pwd .pwd-wrap > input {
  padding-right: 40px;
  width: 100%;
  box-sizing: border-box;
}
.pwd-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-3, #9ca3af);
  padding: 4px;
  line-height: 0;
  border-radius: 4px;
}
.pwd-toggle:hover {
  color: var(--text-2, #6b7280);
}
.pwd-toggle:focus-visible {
  outline: 2px solid var(--primary, #0b92b5);
  outline-offset: 2px;
}
.pwd-toggle svg {
  display: block;
}

.auth-forgot-wrap {
  margin: -4px 0 14px;
  text-align: right;
}
.auth-forgot-link {
  font-size: 0.78rem;
  color: var(--primary, #0b92b5);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.auth-forgot-link:hover {
  text-decoration: underline;
}
.auth-forgot-msg {
  display: none;
  font-size: 0.72rem;
  color: var(--text-2, #6b7280);
  line-height: 1.45;
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--bg, #f7f8fa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  text-align: left;
}
.auth-forgot-msg.show {
  display: block;
}

.login-flash-success {
  display: none;
  padding: 8px 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius-sm, 6px);
  color: #065f46;
  font-size: 0.78rem;
  margin-bottom: 12px;
}
.login-flash-success.show {
  display: block;
}

.register-terms {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 18px;
  font-size: 0.72rem;
  color: var(--text-2, #6b7280);
  line-height: 1.45;
  cursor: pointer;
}
.register-terms input[type="checkbox"] {
  margin: 0;
  accent-color: var(--primary, #0b92b5);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  align-self: center;
}
.register-terms > span {
  flex: 1;
  min-width: 0;
}
.register-terms a {
  color: var(--primary, #0b92b5);
  font-weight: 600;
  text-decoration: underline;
}
.register-terms a:hover {
  color: var(--navy, #01224a);
}