:root {
    --red:      #F63049;
    --crimson:  #D02752;
    --burgundy: #8A244B;
    --navy:     #111F35;
    --red-lt:   #fff0f2;
    --border:   rgba(208,39,82,.14);
    --muted:    #7a8799;
    --text:     #111F35;
    --bg:       #f5f7ff;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);min-height:100vh;}

.auth-wrap{}

.auth-box{width:100%;max-width:600px;padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0px 20px 0px #0000001f;background:white;margin:20px auto;}

.auth-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter-spacing:-.04em;color:var(--text);margin-bottom:6px;text-align:center;}
.auth-sub{color:var(--muted);font-size:.9rem;margin-bottom:28px; text-align:center;}
.auth-sub a{color:var(--crimson);text-decoration:none;font-weight:600;}
.auth-sub a:hover{text-decoration:underline;}

.field{margin-bottom:18px;}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:6px;}
.field input{width:100%;padding:11px 14px;background:white;border:1.5px solid var(--border);border-radius:9px;font-family:'DM Sans',sans-serif;font-size:.9rem;color:var(--text);transition:border-color .2s,box-shadow .2s;outline:none;}
.field input:focus{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(208,39,82,.08);}

.password-wrap{position:relative;}
.password-wrap input{padding-right:44px;}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;padding:4px;transition:color .2s;}
.pw-toggle:hover{color:var(--crimson);}

.field-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.field-actions label{font-size:.82rem;font-weight:600;color:var(--text);}
.field-actions a{font-size:.78rem;color:var(--crimson);text-decoration:none;font-weight:500;}
.field-actions a:hover{text-decoration:underline;}

.remember-row{display:flex;align-items:center;gap:8px;margin-bottom:22px;}
.remember-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--crimson);cursor:pointer;}
.remember-row label{font-size:.84rem;color:var(--muted);cursor:pointer;}

.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted);font-size:.8rem;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}

.register-cta{background:var(--red-lt);border:1.5px solid rgba(246,48,73,.15);border-radius:12px;padding:16px;text-align:center;margin-top:20px;}
.register-cta p{font-size:.87rem;color:var(--muted);margin-bottom:8px;}
.register-cta a{display:inline-block;background:linear-gradient(135deg,var(--red),var(--burgundy));color:white;text-decoration:none;padding:9px 24px;border-radius:8px;font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;transition:all .2s;box-shadow:0 4px 12px rgba(208,39,82,.2);}
.register-cta a:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(208,39,82,.3);}

.alert{border-radius:10px;padding:12px 16px;font-size:.85rem;line-height:1.5;margin-bottom:20px;}
.alert-error{background:#fff0f2;border:1.5px solid rgba(246,48,73,.25);color:var(--crimson);}
.alert-success{background:#f0fdf4;border:1.5px solid #bbf7d0;color:#15803d;}
.alert-warning{background:#fffbeb;border:1.5px solid #fde68a;color:#92400e;}
.alert-info{background:#eff6ff;border:1.5px solid #bfdbfe;color:#1e40af;}

.unverified-box{background:#fff0f2;border:1.5px solid rgba(246,48,73,.2);border-radius:12px;padding:16px;margin-bottom:20px;display:none;}
.unverified-box p{font-size:.84rem;color:var(--crimson);line-height:1.5;margin-bottom:10px;}
.btn-resend{background:white;border:1.5px solid var(--border);color:var(--crimson);padding:7px 16px;border-radius:7px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif;}
.btn-resend:hover{background:var(--red-lt);}

@media(max-width:768px){.auth-wrap{grid-template-columns:1fr;}.auth-left{display:none;}.auth-right{padding:40px 24px;}}

.nav-logo {
  font-family: 'system-ui', sans-serif; font-weight: 800; font-size: 2.5rem;
  letter-spacing: -.05em; text-decoration: none; color: var(--text);
  display: flex; align-items: center; gap: 9px;justify-content: center;
}

.logo-mark {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #f63049, #8a244b);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: white;
}

.logo-cv { color: var(--red); }


.auth-sub { color: var(--muted); font-size: .9rem; margin-bottom: 32px; text-align:center;}
.auth-sub a { color: var(--crimson); text-decoration: none; font-weight: 600; }
.auth-sub a:hover { text-decoration: underline; }

/* Form */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field input.error { border-color: var(--red); }
.field input.success { border-color: #16a34a; }

.field-hint { font-size: .74rem; color: var(--muted); margin-top: 5px; }
.field-hint.error-text { color: var(--red); }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px; }
.pw-toggle {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 1rem; padding: 4px;
    transition: color .2s;
}
.pw-toggle:hover { color: var(--crimson); }

/* Password strength */
.pw-strength { margin-top: 8px; }
.pw-strength-bar {
    height: 4px; border-radius: 100px;
    background: #e5e7eb; overflow: hidden; margin-bottom: 4px;
}
.pw-strength-fill {
    height: 100%; border-radius: 100px;
    transition: width .3s, background .3s;
    width: 0%;
}
.pw-strength-label { font-size: .72rem; color: var(--muted); }

/* Username availability */
.username-status {
    display: flex; align-items: center; gap: 6px;
    font-size: .74rem; margin-top: 5px;
}
.status-checking { color: var(--muted); }
.status-available { color: #16a34a; }
.status-taken { color: var(--red); }

/* Checkbox */
.check-field {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 22px;
}
.check-field input[type=checkbox] {
    width: 17px; height: 17px; flex-shrink: 0;
    margin-top: 2px; accent-color: var(--crimson); cursor: pointer;
}
.check-label { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.check-label a { color: var(--crimson); text-decoration: none; }
.check-label a:hover { text-decoration: underline; }

/* Submit button */
.btn-submit {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, var(--red), var(--burgundy));
    color: white; border: none; border-radius: 10px;
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem;
    cursor: pointer; transition: all .25s;
    box-shadow: 0 4px 16px rgba(208,39,82,.25);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(208,39,82,.38); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-loading::after {
    content: '';
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* Verify step */
.verify-box { text-align: center; }
.verify-icon svg{ width:60px;height:60px;}
.verify-box h2 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--text); margin-bottom: 8px; }
.verify-box p { color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
.verify-email { color: var(--crimson); font-weight: 600; }

.btn-ghost {
    background: white; border: 1.5px solid var(--border);
    color: var(--text); padding: 11px 24px;
    border-radius: 9px; font-family: 'DM Sans', sans-serif;
    font-weight: 500; font-size: .9rem; cursor: pointer;
    transition: all .2s;
}
.btn-ghost:hover { border-color: var(--crimson); color: var(--crimson); }

.divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; color: var(--muted); font-size: .8rem;
}
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }

@media (max-width: 768px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-left { display: none; }
    .auth-right { padding: 40px 24px; }
}

.password-wrap{position:relative;}
.password-wrap input{padding-right:44px;}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;padding:4px;transition:color .2s;}
.pw-toggle:hover{color:var(--crimson);}
.field input{width:100%;padding:11px 14px;background:white;border:1.5px solid var(--border);border-radius:9px;font-family:'DM Sans',sans-serif;font-size:.9rem;color:var(--text);transition:border-color .2s,box-shadow .2s;outline:none;}
.field input:focus{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(208,39,82,.08);}
.pw-strength{margin-top:8px;}
.pw-strength-bar{height:4px;border-radius:100px;background:#e5e7eb;overflow:hidden;margin-bottom:4px;}
.pw-strength-fill{height:100%;border-radius:100px;transition:width .3s,background .3s;width:0%;}
.pw-strength-label{font-size:.72rem;color:var(--muted);}

.invalid-box{text-align:center;}
.invalid-icon{font-size:2.5rem;margin-bottom:12px;}
.back{text-align:center;margin-top:20px;font-size:.84rem;color:var(--muted);}
.back a{color:var(--crimson);text-decoration:none;font-weight:600;}

.alert{border-radius:10px;padding:12px 16px;font-size:.85rem;line-height:1.5;margin-bottom:20px;display:none;}
.alert.show{display:block;}
.alert-error{background:#fff0f2;border:1.5px solid rgba(246,48,73,.25);color:var(--crimson);}
.alert-success{background:#f0fdf4;border:1.5px solid #bbf7d0;color:#15803d;}
.back{text-align:center;margin-top:20px;font-size:.84rem;color:var(--muted);}
.back a{color:var(--crimson);text-decoration:none;font-weight:600;}
.success-box{text-align:center;display:none;}
.success-icon{font-size:3rem;margin-bottom:16px;}
.success-box h3{font-family:'Syne',sans-serif;font-weight:800;font-size:1.3rem;color:var(--text);margin-bottom:8px;}
.success-box p{color:var(--muted);font-size:.9rem;line-height:1.7;}