/* pages.css — Styles shared across all auth/page files */

.page-body {  
 background: var(--clr-bg);  
 min-height: 100dvh;  
 display: flex;  
 flex-direction: column;  
}  
.page-topbar {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 padding: var(--space-3) var(--space-6);  
 background: var(--clr-surface);  
 border-bottom: 1px solid var(--clr-border);  
 position: sticky;  
 top: 0;  
 z-index: 100;  
}  
.back-link {  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-2);  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 transition: color var(--transition-fast);  
}  
.back-link:hover { color: var(--clr-gold); }  
.topbar-partner {  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
}  
.topbar-partner strong { color: var(--clr-gold); }

/* Auth split layout */  
.auth-page { flex: 1; display: flex; }  
.auth-split {  
 display: grid;  
 grid-template-columns: 420px 1fr;  
 min-height: calc(100dvh - 48px);  
 width: 100%;  
}

/* Left panel */  
.auth-panel-left {  
 background: var(--clr-bg-2);  
 border-right: 1px solid var(--clr-border);  
 overflow: hidden;  
 position: relative;  
}  
.auth-panel-inner {  
 padding: var(--space-10) var(--space-8);  
 display: flex;  
 flex-direction: column;  
 height: 100%;  
}  
.auth-panel-inner img { margin-bottom: var(--space-8); }  
.auth-panel-title {  
 font-size: clamp(1.5rem, 2.5vw, 2.2rem);  
 font-family: var(--font-heading);  
 font-weight: 800;  
 line-height: 1.2;  
 margin-bottom: var(--space-4);  
}  
.auth-panel-desc {  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 line-height: 1.7;  
 margin-bottom: var(--space-6);  
}  
.auth-benefits {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
 margin-bottom: var(--space-8);  
}  
.auth-benefits li {  
 display: flex;  
 align-items: center;  
 gap: var(--space-3);  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
}  
.auth-benefits i { color: var(--clr-green); flex-shrink: 0; }  
.auth-panel-img {  
 margin-top: auto;  
 border-radius: var(--radius-lg);  
 overflow: hidden;  
 border: 1px solid var(--clr-border);  
}  
.auth-panel-img img {  
 width: 100%;  
 height: 200px;  
 object-fit: cover;  
 opacity: 0.7;  
}

/* Right panel */  
.auth-panel-right {  
 display: flex;  
 align-items: flex-start;  
 justify-content: center;  
 padding: var(--space-12) var(--space-8);  
 overflow-y: auto;  
}  
.auth-form-container {  
 width: 100%;  
 max-width: 560px;  
}

/* Centered single card layout */  
.auth-centered {  
 align-items: center;  
 justify-content: center;  
 padding: var(--space-8) var(--space-4);  
}  
.auth-card {  
 width: 100%;  
 max-width: 480px;  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-xl);  
 padding: var(--space-10);  
}  
.auth-logo {  
 display: flex;  
 justify-content: center;  
 margin-bottom: var(--space-8);  
}  
.auth-header {  
 text-align: center;  
 margin-bottom: var(--space-8);  
}  
.auth-header h1, .auth-header h2 {  
 font-size: var(--text-2xl);  
 margin-bottom: var(--space-2);  
}  
.auth-header p {  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
}  
.auth-icon-circle {  
 width: 64px;  
 height: 64px;  
 border-radius: 50%;  
 background: var(--clr-gold-glow);  
 border: 1px solid rgba(201,168,76,0.25);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-2xl);  
 color: var(--clr-gold);  
 margin: 0 auto var(--space-5);  
}  
.auth-divider {  
 display: flex;  
 align-items: center;  
 gap: var(--space-4);  
 margin: var(--space-6) 0;  
 color: var(--clr-text-3);  
 font-size: var(--text-xs);  
}  
.auth-divider::before,  
.auth-divider::after {  
 content: '';  
 flex: 1;  
 height: 1px;  
 background: var(--clr-border);  
}  
.auth-switch-link {  
 text-align: center;  
 font-size: var(--text-sm);  
 color: var(--clr-text-3);  
 margin-top: var(--space-5);  
}  
.auth-switch-link a { color: var(--clr-gold); font-weight: 600; }  
.auth-switch-links {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-4);  
}  
.auth-security-note {  
 display: flex;  
 align-items: flex-start;  
 gap: var(--space-2);  
 margin-top: var(--space-5);  
 padding: var(--space-3) var(--space-4);  
 background: var(--clr-bg);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
 line-height: 1.5;  
}  
.auth-security-note i { color: var(--clr-green); flex-shrink: 0; margin-top: 1px; }

/* Registration steps */  
.reg-steps {  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 gap: 0;  
 margin-bottom: var(--space-8);  
}  
.reg-step {  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 gap: var(--space-2);  
}  
.step-num {  
 width: 32px;  
 height: 32px;  
 border-radius: 50%;  
 background: var(--clr-surface-2);  
 border: 2px solid var(--clr-border);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-sm);  
 font-weight: 700;  
 color: var(--clr-text-3);  
 transition: all var(--transition-base);  
}  
.reg-step.active .step-num {  
 background: var(--clr-gold);  
 border-color: var(--clr-gold);  
 color: #000;  
}  
.step-label {  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
 white-space: nowrap;  
}  
.reg-step.active .step-label { color: var(--clr-gold); font-weight: 600; }  
.step-line {  
 flex: 1;  
 height: 2px;  
 background: var(--clr-border);  
 min-width: 40px;  
 margin: 0 var(--space-2);  
 margin-bottom: 20px;  
}  
.reg-step-panel { width: 100%; }

/* Wallet connection */  
.wallet-status-card {  
 background: var(--clr-bg);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 padding: var(--space-6);  
 text-align: center;  
 margin-bottom: var(--space-5);  
}  
.wsc-disconnected, .wsc-connected,  
.w3l-state {  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 gap: var(--space-3);  
}  
.wsc-connected { flex-direction: row; text-align: left; }  
.wsc-icon {  
 width: 56px;  
 height: 56px;  
 border-radius: 50%;  
 background: var(--clr-surface);  
 border: 1px solid var(--clr-border);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-2xl);  
 color: var(--clr-text-3);  
 flex-shrink: 0;  
}  
.wsc-icon.connected { color: var(--clr-green); border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.1); }  
.wsc-icon.verified { color: var(--clr-gold); border-color: rgba(201,168,76,0.3); background: var(--clr-gold-glow); }  
.wsc-info { flex: 1; }  

/* continuing from .wsc-address */  
.wsc-address {  
 display: block;  
 font-family: var(--font-mono);  
 font-size: var(--text-sm);  
 color: var(--clr-white);  
 font-weight: 600;  
}  
.wsc-network {  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
}  
.wsc-disconnected p,  
.w3l-state p {  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 margin: 0;  
}

/* Wallet connect button grid */  
.wallet-btn-grid {  
 display: grid;  
 grid-template-columns: 1fr 1fr 1fr;  
 gap: var(--space-3);  
 margin-bottom: var(--space-5);  
}  
.wallet-connect-btn {  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 justify-content: center;  
 gap: var(--space-2);  
 padding: var(--space-4) var(--space-3);  
 background: var(--clr-bg);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-lg);  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-text-2);  
 cursor: pointer;  
 transition: all var(--transition-base);  
 font-family: var(--font-body);  
}  
.wallet-connect-btn:hover {  
 border-color: rgba(201,168,76,0.35);  
 background: var(--clr-gold-glow);  
 color: var(--clr-white);  
 transform: translateY(-2px);  
}  
.wallet-connect-btn:disabled {  
 opacity: 0.5;  
 cursor: not-allowed;  
 transform: none;  
}  
.wallet-connect-btn img {  
 width: 32px;  
 height: 32px;  
 border-radius: 8px;  
}  
.wallet-icon-text {  
 width: 32px;  
 height: 32px;  
 border-radius: 8px;  
 background: var(--clr-blue-dim);  
 border: 1px solid var(--clr-border);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: var(--text-xs);  
 font-weight: 800;  
 color: var(--clr-blue);  
}

/* Network warning */  
.network-warning {  
 display: flex;  
 align-items: center;  
 gap: var(--space-3);  
 padding: var(--space-3) var(--space-4);  
 background: rgba(239,68,68,0.08);  
 border: 1px solid rgba(239,68,68,0.2);  
 border-radius: var(--radius-md);  
 font-size: var(--text-sm);  
 color: var(--clr-red);  
 margin-bottom: var(--space-4);  
 flex-wrap: wrap;  
}  
.network-warning i { flex-shrink: 0; }

/* Connected wallet badge */  
.connected-wallet-badge {  
 display: inline-flex;  
 align-items: center;  
 gap: var(--space-2);  
 padding: var(--space-2) var(--space-4);  
 background: rgba(34,197,94,0.08);  
 border: 1px solid rgba(34,197,94,0.2);  
 border-radius: 100px;  
 font-size: var(--text-xs);  
 font-weight: 600;  
 color: var(--clr-green);  
 margin-bottom: var(--space-5);  
}  
.connected-wallet-badge i { font-size: var(--text-sm); }

/* Step actions */  
.step-actions {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
 margin-top: var(--space-6);  
}  
.step-actions .btn-ghost { align-self: flex-start; }  
.skip-wallet-note {  
 text-align: center;  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
 margin: 0;  
}  
.text-btn {  
 background: none;  
 border: none;  
 color: var(--clr-gold);  
 font-size: var(--text-xs);  
 font-weight: 600;  
 cursor: pointer;  
 text-decoration: underline;  
 font-family: var(--font-body);  
}  
.text-btn:hover { color: var(--clr-gold-light); }  
.flex-1 { flex: 1; }

/* Web3 login actions */  
.w3l-actions {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
 margin-bottom: var(--space-5);  
}

/* Agreements block */  
.agreements {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-1);  
 margin-bottom: var(--space-5);  
 padding: var(--space-4);  
 background: var(--clr-bg);  
 border: 1px solid var(--clr-border);  
 border-radius: var(--radius-md);  
}

/* Success state */  
.success-state {  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 text-align: center;  
 gap: var(--space-4);  
 padding: var(--space-4) 0;  
}  
.success-icon {  
 font-size: 4rem;  
 color: var(--clr-gold);  
 line-height: 1;  
}  
.success-state h2 { font-size: var(--text-2xl); }  
.success-state p { font-size: var(--text-sm); color: var(--clr-text-2); max-width: 340px; }  
.success-actions {  
 display: flex;  
 flex-direction: column;  
 gap: var(--space-3);  
 width: 100%;  
 margin-top: var(--space-4);  
}

/* Input with icon */  
.input-icon-wrap {  
 position: relative;  
}  
.input-icon-left {  
 position: absolute;  
 left: var(--space-4);  
 top: 50%;  
 transform: translateY(-50%);  
 color: var(--clr-text-3);  
 font-size: var(--text-sm);  
 pointer-events: none;  
 z-index: 1;  
}  
.has-icon-left {  
 padding-left: 2.6rem !important;  
}  
.toggle-pw {  
 position: absolute;  
 right: var(--space-3);  
 top: 50%;  
 transform: translateY(-50%);  
 color: var(--clr-text-3);  
 font-size: var(--text-base);  
 transition: color var(--transition-fast);  
 background: none;  
 border: none;  
 cursor: pointer;  
 padding: var(--space-1);  
}  
.toggle-pw:hover { color: var(--clr-gold); }

/* Field hint */  
.field-hint {  
 font-size: var(--text-xs);  
 color: var(--clr-text-3);  
 line-height: 1.4;  
}

/* Form options row */  
.form-options {  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 margin-bottom: var(--space-5);  
 flex-wrap: wrap;  
 gap: var(--space-3);  
}  
.remember-me {  
 display: flex;  
 align-items: center;  
 gap: var(--space-2);  
 font-size: var(--text-sm);  
 color: var(--clr-text-2);  
 cursor: pointer;  
}  
.remember-me input { accent-color: var(--clr-gold); cursor: pointer; }  
.forgot-link {  
 font-size: var(--text-sm);  
 color: var(--clr-gold);  
 font-weight: 600;  
 transition: color var(--transition-fast);  
}  
.forgot-link:hover { color: var(--clr-gold-light); }

/* Responsive pages */  
@media (max-width: 1023px) {  
 .auth-split { grid-template-columns: 1fr; }  
 .auth-panel-left { display: none; }  
 .auth-panel-right {  
 padding: var(--space-8) var(--space-4);  
 justify-content: center;  
 }  
 .auth-form-container { max-width: 560px; }  
}  
@media (max-width: 600px) {  
 .auth-card { padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); }  
 .wallet-btn-grid { grid-template-columns: 1fr; }  
 .reg-steps { gap: var(--space-1); }  
 .step-label { display: none; }  
 .step-line { min-width: 20px; }  
 .form-row-2 { grid-template-columns: 1fr; }  
 .page-topbar { padding: var(--space-3) var(--space-4); }  
 .topbar-partner { display: none; }  
}