/* ═══════════════════════════════════════════════════════════════════════
   GetJustly — Auth UI
   Apple-grade petite design: compact, precise, refined
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ── Nuke every Frappe chrome on login ── */
body[data-path="login"] .navbar,
body[data-path="login"] .web-navbar,
body[data-path="login"] nav.navbar,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .page-header,
body[data-path="login"] .page-footer,
body[data-path="login"] .web-footer,
body[data-path="login"] footer.web-footer,
body[data-path="login"] .footer-info,
body[data-path="login"] .footer-links,
body[data-path="login"] .footer-logo-extension,
body[data-path="login"] .page-header-actions-block,
body[data-path="login"] .web-sidebar,
body[data-path="login"] .banner-image {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-path="login"] .centered.splash {
    background: #080808 !important;
}
body[data-path="login"] .centered.splash img {
    opacity: 0.4;
    filter: brightness(0) invert(1);
}

body[data-path="login"] .page-content-wrapper,
body[data-path="login"] .page_content,
body[data-path="login"] main {
    background: #080808 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}
body[data-path="login"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
    background: #080808 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════
   ROOT — Two-panel, full bleed
   ═══════════════════════════════════════════ */
.gj-login-root {
    display: flex;
    min-height: 100vh;
    background: #080808;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    color: rgba(255,255,255,0.75);
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════
   SECTION VISIBILITY
   No !important — Frappe jQuery controls via
   inline display:block/none
   ═══════════════════════════════════════════ */
.gj-login-form-wrapper section.for-login      { display: block; }
.gj-login-form-wrapper section.for-email-login,
.gj-login-form-wrapper section.for-signup,
.gj-login-form-wrapper section.for-forgot,
.gj-login-form-wrapper section.for-login-with-email-link { display: none; }

/* ═══════════════════════════════════════════
   LEFT PANEL — Brand & Marketing
   Deep angular light — crumpled silk aesthetic
   ═══════════════════════════════════════════ */
.gj-login-left {
    display: none;
    width: 46%;
    position: relative;
    overflow: hidden;
    background:
        /* Primary angular fold — dramatic light sweep */
        conic-gradient(
            from 215deg at 75% 25%,
            transparent 0deg,
            rgba(255,255,255,0.04) 25deg,
            rgba(255,255,255,0.10) 55deg,
            rgba(255,255,255,0.14) 80deg,
            rgba(255,255,255,0.08) 110deg,
            rgba(255,255,255,0.02) 140deg,
            transparent 180deg,
            transparent 360deg
        ),
        /* Secondary fold — subtler, offset angle */
        conic-gradient(
            from 160deg at 30% 60%,
            transparent 0deg,
            rgba(255,255,255,0.02) 30deg,
            rgba(255,255,255,0.05) 70deg,
            rgba(255,255,255,0.03) 100deg,
            transparent 140deg,
            transparent 360deg
        ),
        /* Wide light wash — top right glow */
        radial-gradient(
            ellipse 120% 80% at 90% 15%,
            rgba(255,255,255,0.06) 0%,
            rgba(255,255,255,0.025) 35%,
            transparent 70%
        ),
        /* Bottom ambient — depth fill */
        radial-gradient(
            ellipse 100% 60% at 10% 95%,
            rgba(255,255,255,0.02) 0%,
            transparent 50%
        ),
        /* Center void — dark core for contrast */
        radial-gradient(
            ellipse at 50% 50%,
            transparent 0%,
            rgba(0,0,0,0.15) 100%
        ),
        #050505;
    min-width: 0;
}
/* Noise texture overlay for physical surface feel */
.gj-login-left::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}
.gj-login-accent-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.25;
}
.gj-login-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 5%,
        rgba(255,255,255,0.06) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.06) 75%,
        transparent 95%
    );
    z-index: 3;
}
.gj-login-left-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 36px 40px;
    height: 100%;
}

/* Logo */
.gj-login-logo { flex-shrink: 0; overflow: visible; display: inline-flex; }
.gj-login-logo img {
    height: 24px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gj-login-logo img:hover { opacity: 0.70; }

/* Marketing block */
.gj-login-marketing {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gj-login-marketing-inner { max-width: 320px; }

.gj-login-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    transition: border-color 0.5s;
}
.gj-login-icon-badge:hover { border-color: rgba(255,255,255,0.10); }
.gj-login-icon-badge svg {
    width: 18px;
    height: 18px;
    color: rgba(255,255,255,0.35);
}

.gj-login-headline {
    font-size: 26px;
    font-weight: 300;
    color: rgba(255,255,255,0.88);
    line-height: 1.18;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
}
.gj-login-headline span { color: rgba(255,255,255,0.30); }

.gj-login-subtitle {
    font-size: 12.5px;
    color: rgba(255,255,255,0.28);
    line-height: 1.65;
    margin-bottom: 36px;
    max-width: 260px;
    font-weight: 400;
}

/* Pills */
.gj-login-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 40px;
}
.gj-login-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.018);
    border: 1px solid rgba(255,255,255,0.04);
    transition: all 0.3s;
}
.gj-login-pill:hover { border-color: rgba(255,255,255,0.08); }
.gj-login-pill svg {
    width: 11px;
    height: 11px;
    color: rgba(255,255,255,0.28);
}
.gj-login-pill span {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Stats */
.gj-login-stats { display: flex; gap: 24px; }
.gj-login-stat-value {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255,255,255,0.78);
    letter-spacing: -0.025em;
}
.gj-login-stat-label {
    font-size: 9px;
    color: rgba(255,255,255,0.22);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1px;
    font-weight: 500;
}

/* Left footer */
.gj-login-left-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gj-login-left-footer span {
    font-size: 9px;
    color: rgba(255,255,255,0.16);
    font-weight: 400;
}

/* ═══════════════════════════════════════════
   RIGHT PANEL — Form area
   ═══════════════════════════════════════════ */
.gj-login-right {
    width: 100%;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    position: relative;
}
.gj-login-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 15%, rgba(255,255,255,0.012), transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(255,255,255,0.006), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Mobile header */
.gj-login-mobile-header {
    display: block;
    position: relative;
    z-index: 10;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.gj-login-mobile-header img {
    height: 20px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.50;
}

/* Form centering */
.gj-login-form-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    position: relative;
    z-index: 10;
    overflow-y: auto;
}
.gj-login-form-wrapper {
    width: 100%;
    max-width: 340px;
}

/* ═══════════════════════════════════════════
   HEADINGS — Thin, refined
   ═══════════════════════════════════════════ */
.gj-page-card-head { margin-bottom: 22px; }
.gj-page-card-head h4 {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.3;
}
.gj-page-card-head p {
    font-size: 12px;
    color: rgba(255,255,255,0.28);
    margin-top: 5px;
    margin-bottom: 0;
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* ═══════════════════════════════════════════
   FORM CHROME — Reset Frappe card styles
   ═══════════════════════════════════════════ */
.gj-login-form-wrapper .page-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
.gj-login-form-wrapper .page-card-body { padding: 0 !important; }
.gj-login-form-wrapper .page-card-actions {
    padding: 0 !important;
    margin-top: 14px;
}
.gj-login-form-wrapper .form-signin { margin: 0; padding: 0; }

/* ═══════════════════════════════════════════
   FORM FIELDS — Petite, precise
   ═══════════════════════════════════════════ */
.gj-login-form-wrapper .form-group { margin-bottom: 12px; }

.gj-login-form-wrapper .form-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255,255,255,0.25);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

.gj-login-form-wrapper .form-control {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.82) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12) !important;
    transition: border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.gj-login-form-wrapper .form-control::placeholder {
    color: rgba(255,255,255,0.18) !important;
    font-weight: 400;
}
.gj-login-form-wrapper .form-control:focus {
    border-color: rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.045) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08),
                0 0 0 3px rgba(255,255,255,0.025) !important;
}

/* Input with icon */
.gj-login-form-wrapper .form-control.has-icon {
    padding-left: 36px;
}

/* Hide number input spinners */
.gj-login-form-wrapper input[type="number"]::-webkit-inner-spin-button,
.gj-login-form-wrapper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.gj-login-form-wrapper input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ── Field icon — bulletproof vertical centering ── */
.gj-field-icon {
    position: absolute !important;
    left: 13px !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: auto 0 !important;
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    color: rgba(255,255,255,0.20) !important;
    pointer-events: none !important;
    transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
    overflow: hidden !important;
    transform: none !important;
}
/* Catch-all for SVGs in field wrappers */
.gj-login-form-wrapper .email-field > svg,
.gj-login-form-wrapper .password-field > svg:not(.toggle-password svg) {
    position: absolute !important;
    left: 13px !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: auto 0 !important;
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    color: rgba(255,255,255,0.20) !important;
    pointer-events: none !important;
    z-index: 2;
    transform: none !important;
}

.email-field,
.password-field {
    position: relative;
    height: 40px;
}
.email-field:focus-within .gj-field-icon,
.password-field:focus-within .gj-field-icon,
.email-field:focus-within > svg,
.password-field:focus-within > svg:first-child {
    color: rgba(255,255,255,0.40) !important;
}

/* Password field — icon left, toggle right */
.gj-login-form-wrapper .password-field .form-control {
    padding-left: 36px;
    padding-right: 40px;
}

/* Password toggle — stretches full height, flex centers icon */
.gj-login-form-wrapper .toggle-password {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    width: auto;
    cursor: pointer;
    color: rgba(255,255,255,0.20) !important;
    transition: color 0.25s;
    z-index: 2;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0 !important; /* Hide Frappe's injected Show/Hide text */
    line-height: 0 !important;
}
.gj-login-form-wrapper .toggle-password svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    flex-shrink: 0;
    display: block;
}
.gj-login-form-wrapper .toggle-password:hover {
    color: rgba(255,255,255,0.42) !important;
}

/* ═══════════════════════════════════════════
   BUTTONS — Apple tactile, premium feel
   ═══════════════════════════════════════════ */
.gj-login-form-wrapper .btn-primary,
.gj-login-form-wrapper .btn-login,
.gj-login-form-wrapper .btn-signup,
.gj-login-form-wrapper .btn-forgot,
.gj-login-form-wrapper .btn-login-with-email-link {
    width: 100%;
    height: 40px;
    background: rgba(255,255,255,0.90) !important;
    color: #0a0a0a !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10) !important;
    text-shadow: none !important;
    letter-spacing: -0.01em;
}
.gj-login-form-wrapper .btn-primary:hover,
.gj-login-form-wrapper .btn-login:hover,
.gj-login-form-wrapper .btn-signup:hover,
.gj-login-form-wrapper .btn-forgot:hover,
.gj-login-form-wrapper .btn-login-with-email-link:hover {
    background: rgba(255,255,255,0.97) !important;
    color: #0a0a0a !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,255,255,0.06),
               0 1px 3px rgba(0,0,0,0.15) !important;
}
.gj-login-form-wrapper .btn-primary:active,
.gj-login-form-wrapper .btn-login:active,
.gj-login-form-wrapper .btn-signup:active {
    background: rgba(255,255,255,0.82) !important;
    color: #0a0a0a !important;
    transform: translateY(0) scale(0.995);
    box-shadow: 0 1px 2px rgba(0,0,0,0.10) !important;
}
.gj-login-form-wrapper .btn-primary:focus,
.gj-login-form-wrapper .btn-login:focus,
.gj-login-form-wrapper .btn-signup:focus {
    outline: none !important;
    color: #0a0a0a !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08),
               0 1px 2px rgba(0,0,0,0.12) !important;
}
.gj-login-form-wrapper .btn-primary svg {
    width: 13px;
    height: 13px;
    stroke: #0a0a0a;
}
.gj-login-form-wrapper .btn-primary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.gj-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(10,10,10,0.15);
    border-top-color: #0a0a0a;
    border-radius: 50%;
    animation: gj-spin 0.6s linear infinite;
}
@keyframes gj-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════
   FORGOT-PASSWORD LINK
   ═══════════════════════════════════════════ */
.gj-login-form-wrapper .forgot-password-message {
    text-align: right;
    margin: -2px 0 0 0;
}
.gj-login-form-wrapper .forgot-password-message a {
    font-size: 11px;
    color: rgba(255,255,255,0.32) !important;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.gj-login-form-wrapper .forgot-password-message a:hover {
    color: rgba(255,255,255,0.60) !important;
}

/* ═══════════════════════════════════════════
   SOCIAL LOGIN
   ═══════════════════════════════════════════ */
.gj-login-form-wrapper .login-divider {
    position: relative;
    text-align: center;
    margin: 14px 0 !important;
    font-size: 9px !important;
    color: rgba(255,255,255,0.14) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.gj-login-form-wrapper .login-divider::before,
.gj-login-form-wrapper .login-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: rgba(255,255,255,0.035);
}
.gj-login-form-wrapper .login-divider::before { left: 0; }
.gj-login-form-wrapper .login-divider::after { right: 0; }

.gj-login-form-wrapper .social-login-buttons {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.gj-login-form-wrapper .btn-login-option {
    height: 32px !important;
    padding: 0 14px !important;
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
    font-size: 10.5px !important;
    color: rgba(255,255,255,0.40) !important;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 500;
}
.gj-login-form-wrapper .btn-login-option:hover {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* ═══════════════════════════════════════════
   SIGN-UP / SIGN-IN toggle links
   ═══════════════════════════════════════════ */
.gj-login-form-wrapper .sign-up-message {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    font-weight: 400;
    letter-spacing: -0.005em;
}
.gj-login-form-wrapper .sign-up-message a {
    color: rgba(255,255,255,0.88) !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding-bottom: 1px;
}
.gj-login-form-wrapper .sign-up-message a:hover {
    color: #fff !important;
    border-color: rgba(255,255,255,0.45);
}
.gj-login-form-wrapper a { text-decoration: none; }

/* ═══════════════════════════════════════════
   ACCOUNT TYPE SELECTOR — Compact cards
   ═══════════════════════════════════════════ */
.gj-account-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.gj-type-card {
    position: relative;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    text-align: left;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
    width: 100%;
    color: inherit;
    font-family: inherit;
}
.gj-type-card:hover {
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.08);
}
.gj-type-card.selected {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}
.gj-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255,255,255,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gj-type-icon svg {
    width: 13px !important;
    height: 13px !important;
    max-width: 13px !important;
    max-height: 13px !important;
    color: rgba(255,255,255,0.28);
    transition: color 0.25s;
}
.gj-type-card.selected .gj-type-icon {
    background: rgba(255,255,255,0.88);
}
.gj-type-card.selected .gj-type-icon svg {
    color: #0a0a0a;
}
.gj-type-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.60);
    letter-spacing: -0.01em;
}
.gj-type-desc {
    font-size: 9.5px;
    color: rgba(255,255,255,0.20);
    margin-top: 1px;
    font-weight: 400;
}

/* ═══════════════════════════════════════════
   TERMS CHECKBOX — Apple-grade alignment
   Uses <label> as parent for clickable area
   ═══════════════════════════════════════════ */
.gj-terms-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 6px;
    cursor: pointer;
}
.gj-checkbox-wrapper {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}
.gj-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    z-index: 3;
}
.gj-checkbox-box {
    display: block;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    background: rgba(255,255,255,0.04) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-sizing: border-box;
}
.gj-checkbox-box:hover {
    border-color: rgba(255,255,255,0.22) !important;
}
.gj-checkbox-input:checked + .gj-checkbox-box {
    background: rgba(255,255,255,0.90) !important;
    border-color: rgba(255,255,255,0.90) !important;
}
.gj-checkbox-box.checked {
    background: rgba(255,255,255,0.90) !important;
    border-color: rgba(255,255,255,0.90) !important;
}
.gj-checkbox-tick {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    color: #0a0a0a;
    opacity: 0;
    pointer-events: none !important;
    transition: opacity 0.15s;
    overflow: hidden !important;
}
.gj-checkbox-input:checked ~ .gj-checkbox-tick,
.gj-checkbox-box.checked ~ .gj-checkbox-tick { opacity: 1; }
.gj-terms-label {
    font-size: 11.5px;
    color: rgba(255,255,255,0.30);
    line-height: 1;
    cursor: pointer;
    font-weight: 400;
    letter-spacing: -0.005em;
    user-select: none;
}
.gj-terms-label a {
    color: rgba(255,255,255,0.45) !important;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}
.gj-terms-label a:hover { color: rgba(255,255,255,0.65) !important; }

/* ═══════════════════════════════════════════
   SIGNUP ERROR
   ═══════════════════════════════════════════ */
.gj-signup-error {
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(244,63,94,0.04);
    border-left: 2px solid rgba(244,63,94,0.18);
    font-size: 11px;
    color: rgba(244,63,94,0.65);
    margin-top: 10px;
    font-weight: 400;
}

/* ═══════════════════════════════════════════
   STEP INDICATOR
   ═══════════════════════════════════════════ */
.gj-step-indicator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin-bottom: 18px !important;
}
.gj-step {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    background: rgba(255,255,255,0.03) !important;
    color: rgba(255,255,255,0.20) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gj-step.active {
    background: rgba(255,255,255,0.88) !important;
    color: #0a0a0a !important;
    border-color: rgba(255,255,255,0.88) !important;
}
.gj-step.completed {
    background: rgba(255,255,255,0.88) !important;
    color: #0a0a0a !important;
    border-color: rgba(255,255,255,0.88) !important;
}
.gj-step.completed svg {
    stroke: #0a0a0a !important;
}
.gj-step-line {
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,0.04);
    margin: 0 3px;
    transition: background 0.3s;
}
.gj-step-line.completed {
    background: rgba(255,255,255,0.25);
}

/* ═══════════════════════════════════════════
   SIGNUP SUCCESS — Step 2
   ═══════════════════════════════════════════ */
.gj-signup-success {
    text-align: center;
    padding: 16px 0;
}
.gj-success-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gj-success-icon svg {
    width: 15px;
    height: 15px;
    color: rgba(255,255,255,0.35);
}
.gj-signup-success h4 {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255,255,255,0.88);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.gj-signup-success p {
    font-size: 11px;
    color: rgba(255,255,255,0.30);
    margin: 0 0 4px;
    font-weight: 400;
}
.gj-signup-success strong {
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}
.gj-success-subtitle {
    font-size: 10.5px !important;
    color: rgba(255,255,255,0.20) !important;
    margin-bottom: 16px !important;
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.gj-login-footer {
    position: relative;
    z-index: 10;
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,0.025);
}
.gj-login-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.gj-login-footer-links a {
    font-size: 9px;
    color: rgba(255,255,255,0.16);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gj-login-footer-links a:hover { color: rgba(255,255,255,0.30); }

/* ═══════════════════════════════════════════
   STATUS INDICATORS
   ═══════════════════════════════════════════ */
.gj-login-form-wrapper .indicator { display: none !important; }
.gj-login-form-wrapper .login-content .indicator.blue,
.gj-login-form-wrapper .login-content .indicator.red,
.gj-login-form-wrapper .login-content .indicator.green,
.gj-login-form-wrapper .login-content .indicator.yellow,
.gj-login-form-wrapper .login-content .indicator.orange {
    display: block !important;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    margin-bottom: 10px;
    border: none;
    font-weight: 400;
}
.gj-login-form-wrapper .indicator.red {
    background: rgba(244,63,94,0.04) !important;
    color: rgba(244,63,94,0.65) !important;
    border-left: 2px solid rgba(244,63,94,0.18) !important;
}
.gj-login-form-wrapper .indicator.green {
    background: rgba(34,197,94,0.04) !important;
    color: rgba(34,197,94,0.65) !important;
    border-left: 2px solid rgba(34,197,94,0.18) !important;
}
.gj-login-form-wrapper .indicator.blue {
    background: rgba(59,130,246,0.04) !important;
    color: rgba(59,130,246,0.65) !important;
    border-left: 2px solid rgba(59,130,246,0.18) !important;
}

/* ═══════════════════════════════════════════
   SHAKE ANIMATION
   ═══════════════════════════════════════════ */
@keyframes gj-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.gj-login-form-wrapper .form-signin.invalid {
    animation: gj-shake 0.35s ease;
}

/* ═══════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════ */
.gj-login-form-wrapper .text-muted { color: rgba(255,255,255,0.22) !important; }
.gj-login-form-wrapper .login-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.gj-login-form-wrapper .login-button-wrapper { margin: 0; }
.gj-login-form-wrapper .social-logins { margin-top: 0; }

/* ═══════════════════════════════════════════
   ROLE INFO BOX — Contextual tip
   ═══════════════════════════════════════════ */
.gj-role-info {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 12px;
}
.gj-role-info p {
    font-size: 10.5px;
    color: rgba(255,255,255,0.35);
    margin: 0;
    line-height: 1.55;
    font-weight: 400;
}

/* ═══════════════════════════════════════════
   TYPE CARD CHECK INDICATOR
   ═══════════════════════════════════════════ */
.gj-type-check {
    position: absolute;
    top: 7px;
    right: 7px;
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gj-type-check svg {
    width: 10px !important;
    height: 10px !important;
    color: rgba(255,255,255,0.50);
}
.gj-type-card.selected .gj-type-check {
    opacity: 1;
    transform: scale(1);
}

/* ═══════════════════════════════════════════
   COUNTRY SELECTOR — Premium searchable dropdown
   ═══════════════════════════════════════════ */
.gj-country-selector {
    position: relative;
}
.gj-country-trigger {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.82);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
.gj-country-trigger:hover {
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.12);
}
.gj-country-display {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    overflow: hidden;
}
.gj-country-display svg {
    flex-shrink: 0;
    color: rgba(255,255,255,0.20);
}
.gj-country-chevron {
    flex-shrink: 0;
    color: rgba(255,255,255,0.20) !important;
    transition: transform 0.2s !important;
    width: 12px !important;
    height: 12px !important;
}
.gj-country-chevron.open { transform: rotate(180deg); }

/* Dropdown */
.gj-country-dropdown {
    position: absolute;
    z-index: 100;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #111111;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
    overflow: hidden;
    animation: gj-dropdown-in 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes gj-dropdown-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Search */
.gj-country-search-wrap {
    padding: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    position: relative;
}
.gj-country-search-wrap svg {
    position: absolute;
    left: 15px;
    top: 16px;
    width: 12px !important;
    height: 12px !important;
    color: rgba(255,255,255,0.18);
    pointer-events: none;
    transform: none;
}
.gj-country-search {
    width: 100%;
    height: 32px;
    padding: 0 8px 0 28px;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    border-radius: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.72) !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Inter', -apple-system, sans-serif;
    transition: border-color 0.2s;
}
.gj-country-search:focus {
    border-color: rgba(255,255,255,0.10) !important;
    background: rgba(255,255,255,0.03) !important;
}
.gj-country-search::placeholder { color: rgba(255,255,255,0.16); }

/* List */
.gj-country-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 3px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.gj-country-list::-webkit-scrollbar { width: 4px; }
.gj-country-list::-webkit-scrollbar-track { background: transparent; }
.gj-country-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
}

/* Item */
.gj-country-item {
    width: 100%;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    text-align: left;
}
.gj-country-item:hover { background: rgba(255,255,255,0.035); }
.gj-country-item.selected { background: rgba(255,255,255,0.05); }
.gj-country-flag {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.gj-country-name {
    font-size: 11px;
    color: rgba(255,255,255,0.60);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gj-country-phone {
    font-size: 10px;
    color: rgba(255,255,255,0.20);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.gj-country-divider {
    height: 1px;
    margin: 3px 8px;
    background: rgba(255,255,255,0.035);
}
.gj-country-empty {
    padding: 16px;
    text-align: center;
    font-size: 10.5px;
    color: rgba(255,255,255,0.18);
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Desktop 1024+
   ═══════════════════════════════════════════ */
@media (min-width: 1024px) {
    .gj-login-left { display: flex; }
    .gj-login-right { width: 54%; }
    .gj-login-mobile-header { display: none; }
    .gj-login-form-area { padding: 48px 56px; }
}