.register-container{
max-width:520px;
}

.name-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.password-meter{
display:flex;
gap:4px;
margin-top:12px;
}

.meter-section{
flex:1;
height:4px;
border-radius:50px;
background:#e5e5e5;
transition:.3s;
}

.meter-section.active{
background:#FFD700;
}

.meter-section.active.weak { background-color: #ff4d4d; }
.meter-section.active.medium { background-color: #ffa500; }
.meter-section.active.strong { background-color: #9acd32; }
.meter-section.active.very-strong { background-color: #008000; }

.field-wrap select,
.field-wrap textarea{
width:100%;
padding:13px 14px 13px 42px;
border:1.5px solid var(--border);
border-radius:4px;
background:white;
font-size:.9rem;
}

.field-wrap select:focus,
.field-wrap textarea:focus{
border-color:var(--black);
box-shadow:0 0 0 3px rgba(10,10,10,.06);
}

@media(max-width:768px){

.register-container{
max-width:100%;
}

.name-grid{
grid-template-columns:1fr;
}
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
--black: #0a0a0a;
--gold: #FFD700;
--gold-dim: #c9a800;
--white: #ffffff;
--off-white: #f7f6f2;
--muted: #888;
--border: #e0ddd6;
--error: #d94f3d;
}

html, body {
height: 100%;
font-family: 'DM Sans', sans-serif;
background: var(--off-white);
overflow: hidden;
}

/* ─── Layout ─────────────────────────────────────── */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;
}

/* ─── Left Panel ─────────────────────────────────── */
.left-panel {
background: var(--black);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
}

/* Hexagon pattern background */
.hex-bg {
position: absolute;
inset: 0;
opacity: 0.07;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath fill='%23FFD700' d='M42 0l42 24v48L42 96 0 72V24z'/%3E%3C/svg%3E");
background-size: 48px 56px;
animation: drift 30s linear infinite;
}
@keyframes drift {
from { background-position: 0 0; }
to   { background-position: 48px 112px; }
}

/* Gold accent ring */
.accent-ring {
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
border: 1px solid rgba(255,215,0,0.12);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: pulse 6s ease-in-out infinite;
}
.accent-ring:nth-child(2) { width: 360px; height: 360px; animation-delay: -2s; border-color: rgba(255,215,0,0.08); }
.accent-ring:nth-child(3) { width: 220px; height: 220px; animation-delay: -4s; border-color: rgba(255,215,0,0.15); }
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
50%       { transform: translate(-50%, -50%) scale(1.05); opacity: 0.6; }
}

/* Top wordmark */
.left-wordmark {
position: relative;
z-index: 2;
}
.left-wordmark .brand-badge {
display: inline-flex;
align-items: center;
gap: 10px;
}
.hex-icon {
width: 36px; height: 36px;
background: var(--gold);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
animation: spin-hex 12s linear infinite;
}
@keyframes spin-hex {
from { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
}
.hex-icon::after {
content: 'H';
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 16px;
color: var(--black);
}
.brand-name {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 1.1rem;
color: var(--white);
letter-spacing: 0.04em;
}

/* Center hero text */
.left-hero {
position: relative;
z-index: 2;
}
.left-hero .eyebrow {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.left-hero .eyebrow::before {
content: '';
display: block;
width: 30px; height: 1px;
background: var(--gold);
}
.left-hero h2 {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: clamp(2.2rem, 3.5vw, 3rem);
color: var(--white);
line-height: 1.1;
letter-spacing: -0.02em;
}
.left-hero h2 span {
color: var(--gold);
}
.left-hero p {
margin-top: 1.5rem;
font-size: 0.9rem;
color: rgba(255,255,255,0.45);
line-height: 1.7;
max-width: 320px;
}

/* Bottom stats */
.left-footer {
position: relative;
z-index: 2;
display: flex;
gap: 2.5rem;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 2rem;
}
.stat-item { }
.stat-num {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 1.4rem;
color: var(--gold);
}
.stat-label {
font-size: 0.72rem;
color: rgba(255,255,255,0.35);
letter-spacing: 0.05em;
text-transform: uppercase;
margin-top: 2px;
}

/* ─── Right Panel ─────────────────────────────────── */
.right-panel {
background: var(--off-white);
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 2.5rem;
position: relative;
overflow: hidden;
}

.right-panel::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 350px; height: 350px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,215,0,0.06) 0%, transparent 70%);
pointer-events: none;
}

.form-container {
width: 100%;
max-width: 400px;
animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(24px); }
to   { opacity: 1; transform: translateY(0); }
}

.form-header {
margin-bottom: 2.5rem;
}
.form-header .tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-dim);
background: rgba(255,215,0,0.1);
padding: 4px 10px;
border-radius: 2px;
margin-bottom: 1rem;
}
.form-header h1 {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 2.2rem;
color: var(--black);
letter-spacing: -0.03em;
line-height: 1.1;
}
.form-header p {
margin-top: 0.75rem;
font-size: 0.875rem;
color: var(--muted);
}
.form-header a {
color: var(--black);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}

/* Fields */
.field-group {
margin-bottom: 1.25rem;
}
.field-label {
display: block;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--black);
margin-bottom: 0.5rem;
}
.field-label .req { color: var(--error); }

.field-wrap {
position: relative;
}
.field-wrap .field-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
font-size: 1rem;
pointer-events: none;
transition: color 0.2s;
}
.field-wrap input {
width: 100%;
padding: 13px 14px 13px 42px;
border: 1.5px solid var(--border);
border-radius: 4px;
background: var(--white);
font-family: 'DM Sans', sans-serif;
font-size: 0.9rem;
color: var(--black);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.field-wrap input:focus {
border-color: var(--black);
box-shadow: 0 0 0 3px rgba(10,10,10,0.06);
}
.field-wrap input:focus + .field-icon,
.field-wrap input:focus ~ .field-icon {
color: var(--black);
}

.pw-toggle {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--muted);
font-size: 1rem;
padding: 0;
transition: color 0.2s;
z-index: 2;
}
.pw-toggle:hover { color: var(--black); }

/* Inline icon order fix */
.field-wrap input { padding-right: 42px; }

/* Options row */
.options-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.75rem;
margin-top: -0.25rem;
}
.custom-check {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.82rem;
color: var(--muted);
user-select: none;
}
.custom-check input[type="checkbox"] {
appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--border);
border-radius: 3px;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
background: var(--white);
}
.custom-check input[type="checkbox"]:checked {
background: var(--black);
border-color: var(--black);
}
.custom-check input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px; top: 1px;
width: 5px; height: 9px;
border: 2px solid var(--white);
border-top: none; border-left: none;
transform: rotate(45deg);
}
.forgot-link {
font-size: 0.82rem;
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
}
.forgot-link:hover { color: var(--black); }

/* Submit button */
.btn-submit {
width: 100%;
padding: 15px;
background: var(--black);
color: var(--white);
border: none;
border-radius: 4px;
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, letter-spacing 0.3s, transform 0.15s;
display: flex; align-items: center; justify-content: center; gap: 8px;
position: relative;
overflow: hidden;
}
.btn-submit::before {
content: '';
position: absolute;
inset: 0;
background: var(--gold);
transform: translateX(-101%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-submit:hover::before { transform: translateX(0); }
.btn-submit:hover { color: var(--black); letter-spacing: 0.1em; }
.btn-submit span { position: relative; z-index: 1; }
.btn-submit i { position: relative; z-index: 1; transition: transform 0.3s; }
.btn-submit:hover i { transform: translateX(4px); }
.btn-submit:active { transform: scale(0.98); }
    .btn-submit:disabled {
background: #d1d1d1 !important;
color: #999 !important;
cursor: not-allowed;
letter-spacing: 0.06em !important;
transform: none !important;
}
.btn-submit:disabled::before {
display: none;
}
.btn-submit:disabled i {
transform: none !important;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
background-image: none;
}



/* Alerts */
.alert-box {
padding: 10px 14px;
border-radius: 4px;
font-size: 0.82rem;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid;
}
.alert-box.error {
background: rgba(217,79,61,0.08);
border-color: rgba(217,79,61,0.2);
color: var(--error);
}
.alert-box.success {
background: rgba(40,167,69,0.08);
border-color: rgba(40,167,69,0.2);
color: #1e7e34;
}
.alert-close {
margin-left: auto;
background: none; border: none;
cursor: pointer; color: inherit;
opacity: 0.6; font-size: 0.9rem; padding: 0;
}
.alert-close:hover { opacity: 1; }

/* ─── Modal ───────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
z-index: 999;
display: none;
align-items: center;
justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
background: var(--white);
border-radius: 6px;
width: 100%; max-width: 420px;
margin: 1rem;
overflow: hidden;
animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(20px) scale(0.97); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head {
background: var(--black);
padding: 1.25rem 1.5rem;
display: flex; align-items: center; justify-content: space-between;
}
.modal-head h3 {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 1rem;
color: var(--white);
letter-spacing: 0.04em;
}
.modal-close-btn {
background: none; border: none;
color: rgba(255,255,255,0.5);
font-size: 1.1rem;
cursor: pointer; padding: 0;
transition: color 0.2s;
}
.modal-close-btn:hover { color: var(--white); }
.modal-body-area {
padding: 1.75rem 1.5rem;
}
.modal-body-area p {
font-size: 0.85rem;
color: var(--muted);
margin-bottom: 1.25rem;
line-height: 1.6;
}
.modal-foot {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border);
display: flex; gap: 0.75rem; justify-content: flex-end;
}
.btn-ghost {
padding: 9px 18px;
background: none;
border: 1.5px solid var(--border);
border-radius: 4px;
font-family: 'DM Sans', sans-serif;
font-size: 0.85rem;
cursor: pointer;
color: var(--muted);
transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--black); color: var(--black); }
.btn-solid {
padding: 9px 20px;
background: var(--black);
color: var(--white);
border: 1.5px solid var(--black);
border-radius: 4px;
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s;
}
.btn-solid:hover { background: #222; }

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
html, body { overflow: auto; }
.split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
}
.left-panel {
    padding: 2rem;
    min-height: 260px;
}
.left-hero h2 { font-size: 1.8rem; }
.left-footer { display: none; }
.right-panel {
    padding: 2.5rem 1.5rem;
    align-items: flex-start;
}
}


.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none;
}

.form-control.is-valid, .was-validated .form-control:valid {
    background-image: none;
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    box-shadow: none;
}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    box-shadow: none;
}