/* Full-bleed canvas */
.auth-layout {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Blobs and grain */
.auth-canvas { position: relative; min-height: 0; }
.blob{ display:none; }
.grain{ position:absolute; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:soft-light;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAP0lEQVR4nO3QQQ0AAAgDINc/5y2g0cQJQ9QmT5r8r8kAAADg3v5nQAAAgP9nQAAAgP9nQAAAgP9nQAAAgP9nQAAAhm0B3r0kqT1A7/9AAAAAElFTkSuQmCC");
  background-size:128px 128px;
}

/* Poseidon's Realm background image with subtle drift */
.auth-layout::before {
    content: "";
    position: absolute;
    inset: -6%;
    background: url('/images/poseidons-realm.png') center/cover no-repeat;
    filter: saturate(1.12) contrast(1.02);
    transform: scale(1.02) translate3d(0,0,0);
    will-change: transform;
    animation: poseidonDrift 36s ease-in-out infinite;
    z-index: 0;
}

@keyframes poseidonDrift {
    0%   { transform: scale(1.02) translate3d(0%,   0%,   0); }
    25%  { transform: scale(1.00) translate3d(-1.2%, 0.8%, 0); }
    50%  { transform: scale(1.05) translate3d(1.5%, -1.1%, 0); }
    75%  { transform: scale(1.00) translate3d(-0.8%, 0.6%, 0); }
    100% { transform: scale(1.02) translate3d(0%,   0%,   0); }
}

.auth-container {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: calc(100vh - 0px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.auth-card {
    width: 100%;
    max-width: 520px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.84) 100%);
    backdrop-filter: saturate(1.2) blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 60px rgba(0,0,0,0.16);
    border-radius: 16px;
    padding: 28px 28px 32px;
}

.auth-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    gap: 8px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 24px;
    padding: 4px;
    margin: 4px auto 16px; /* center the pill group */
}

.auth-tabs .tab { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 18px; color: #4a5568; text-decoration: none; font-weight: 600; font-size: 13px; }

.auth-tabs .tab.active {
    background: #1b72bf;
    color: #fff;
}

.auth-header {
    text-align: center;
    margin-bottom: 18px;
}

.auth-header h1 { font-size: 24px; font-weight: 700; color: #1a202c; }

.auth-header p {
    color: #4a5568;
    font-size: 14px;
    margin-top: 6px;
}

.auth-header-svg {
    width: 44px;
    height: 44px;
    margin: 6px auto 12px;
}

/* Setup header and stepper to match comps */
.setup-header { display: flex; justify-content: space-between; align-items: flex-end; margin: 6px 0 8px; padding: 0 2px; }
.setup-title { font-weight: 600; color: #1a202c; font-size: 14px; }
.setup-caption { font-size: 12px; color: #718096; }
.setup-right { font-size: 12px; color: #718096; }

.stepper { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 8px 6px 16px; padding: 0 6px; }
.stepper::before { content: ""; position: absolute; top: 13px; left: calc(6px + 14px); right: calc(6px + 14px); height: 2px; background: #CBD5E0; }
.step { position: relative; display: grid; grid-auto-flow: row; justify-items: center; gap: 6px; color: #4a5568; font-size: 12px; z-index: 1; }
.step .num { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #CBD5E0; display: grid; place-items: center; font-weight: 700; background: #fff; }
.step.active .num { border-color: #1b72bf; background: #1b72bf; color: #fff; box-shadow: 0 2px 12px rgba(27,114,191,0.4); }
.step .label { font-size: 12px; color: #4a5568; }


.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ------------ CONSISTENT BOX SYSTEM (shared with sign-in) ------------ */
:root{
  --control-h: 46px;
  --radius: 10px;
  --border: #E4E7EE;
  --border-hover: #CBD2E1;
  --ring: rgba(27,114,191,.12);
  --blue: #1b72bf;
  --text: #111827;
  --placeholder: #98A2B3;
  --error: #B42318;
}
*{ box-sizing: border-box; }
input, select, textarea, button { font: inherit; color: inherit; }

.control,
select.select,
textarea.textarea {
  width:100%;
  height: var(--control-h);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: all .15s ease;
}
textarea.textarea { height: calc(var(--control-h) * 2); padding: 10px 12px; resize: vertical; }

.control:hover,
select.select:hover,
textarea.textarea:hover { border-color: var(--border-hover); }

.control:focus,
select.select:focus,
textarea.textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--ring);
}

.control::placeholder,
select.select:has(option[disabled]:checked),
textarea.textarea::placeholder { color: var(--placeholder); }

.is-invalid { border-color: var(--error) !important; box-shadow: 0 0 0 4px rgba(180,35,24,.10) !important; }
.help-error { color: var(--error); font-size: 12px; }

.checkbox { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; font: 400 13px/1.2 ui-sans-serif, system-ui; color:#475467; }
.checkbox__input{ position:absolute; opacity:0; pointer-events:none; }
.checkbox__box{ width:18px; height:18px; border-radius:6px; border:1px solid var(--border); background:#fff; display:grid; place-items:center; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.checkbox__check{ width:12px; height:12px; transform: scale(0); transition: transform .12s ease; background: no-repeat center/100% 100%; -webkit-mask: conic-gradient(from 135deg at 35% 65%, #000 0 90deg, transparent 0) left/70% 70%, linear-gradient(#000 0 0) center/65% 2px; mask: conic-gradient(from 135deg at 35% 65%, #000 0 90deg, transparent 0) left/70% 70%, linear-gradient(#000 0 0) center/65% 2px; background-color:#fff; }
.checkbox__input:focus + .checkbox__box { box-shadow: 0 0 0 4px var(--ring); border-color: var(--blue); }
.checkbox__input:checked + .checkbox__box { background: var(--blue); border-color: var(--blue); }
.checkbox__input:checked + .checkbox__box .checkbox__check { transform: scale(1); }

.form .control, .form .password-wrap, .form .checkbox { margin-top: 2px; }

.form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label { color: #4a5568; font-size: 12px; }

.form-group .hint {
    color: #718096;
    font-size: 12px;
}

.form-group input {
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.18);
    font-size: 16px;
    padding: 12px 16px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    height: 44px;
    transition: all 0.15s ease;
}

/* Override for password input to ensure consistent padding */
.password-input input {
    padding: 12px 45px 12px 16px !important;
}

/* Ensure form-group doesn't add extra styling to password wrapper */
.form-group .password-wrap {
    margin-top: 2px;
}

.form-group input:focus {
    border-color: #1b72bf;
    outline: none;
    box-shadow: 0 0 0 3px rgba(27,114,191,0.15);
}

.password-group-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.password-input { position: relative; display: flex; align-items: center; }
.password-input input { width: 100%; padding-right: 45px; }

.password-toggle { 
  color: #718096; 
  background: transparent; 
  border: none; 
  cursor: pointer; 
  position: absolute; 
  right: 12px;
  padding: 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  width: 35px;
  height: 35px;
}
.password-toggle:hover {
  background-color: rgba(113, 128, 150, 0.1);
  color: #4a5568;
}
.password-toggle svg {
  display: block;
}

/* Password Strength Meter */
.password-strength-container {
  margin-top: 8px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.password-strength-segments {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.strength-segment {
  flex: 1;
  height: 4px;
  background-color: #E5E7EB;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.segment-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: all 0.3s ease;
  background-color: transparent;
}

/* Strength levels - Individual segments */
.strength-segment.weak .segment-fill {
  width: 100%;
  background: linear-gradient(90deg, #EF4444, #DC2626);
}

.strength-segment.acceptable .segment-fill {
  width: 100%;
  background: linear-gradient(90deg, #22C55E, #16A34A);
}

.strength-segment.strong .segment-fill {
  width: 100%;
  background: linear-gradient(90deg, #22C55E, #16A34A);
}

.password-strength-text {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
  transition: color 0.3s ease;
}

.password-strength-text.weak {
  color: #DC2626;
}

.password-strength-text.acceptable {
  color: #16A34A;
}

.password-strength-text.strong {
  color: #16A34A;
}

/* Password Requirements */
.password-requirements {
  margin-top: 8px;
  padding: 12px;
  background-color: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  transition: opacity 0.3s ease;
}

.requirement-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
}

.requirement-item:last-child {
  margin-bottom: 0;
}

.requirement-icon {
  font-size: 14px;
  color: #9CA3AF;
  font-weight: bold;
  transition: color 0.3s ease;
}

.requirement-text {
  color: #6B7280;
  transition: color 0.3s ease;
}

/* Met requirements */
.requirement-item.met .requirement-icon {
  color: #16A34A;
}

.requirement-item.met .requirement-text {
  color: #16A34A;
}

.requirement-item.met .requirement-icon::before {
  content: "✓";
}

.button {
    padding: 14px 18px;
    border-radius: 10px;
    border: 0;
    background: #1b72bf;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.auth-submit.button { width: 100%; }

.button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.button:active { filter: brightness(0.95); transform: translateY(0); }
.button:disabled { opacity: .65; cursor: not-allowed; }

.auth-terms, .auth-links { text-align: center; margin-top: 8px; color: #4a5568; }
.auth-terms a, .auth-links a { color: #1a202c; font-weight: 600; }