:root { 
        --primary: #0f74bd; 
        --primary-hover: #4dabf7;
        --bg: #050505; 
        --text: #ffffff; 
        --border: rgba(255, 255, 255, 0.1);
        --font: 'Space Grotesk', sans-serif;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
    
    body { 
        font-family: var(--font); 
        background-color: var(--bg); 
        color: var(--text); 
        height: 100vh;
        overflow: hidden;
        display: flex;
    }

    #canvas-container {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        z-index: 0; opacity: 0.3; pointer-events: none;
    }

    .split-container {
        display: flex; width: 100%; height: 100%; z-index: 1;
    }
    
    .visual-side {
        width: 45%; 
        height: 100%; 
        position: relative; 
        background: linear-gradient(135deg, #050505 0%, #0f74bd 100%); 
        overflow: hidden; 
        transition: width 0.5s ease;
    }
    .visual-img {
        width: 100%; height: 100%; object-fit: cover; opacity: 0.6;
        transition: opacity 0.5s ease;
    }
    .visual-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to right, #050505, transparent, rgba(5,5,5,0.8));
        pointer-events: none;
    }
    
    .bubble-split {
        position: absolute; top: 0; right: -1px; width: 120px; height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 1000' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100,0 C20,300 80,700 0,1000 H100 Z' fill='%23050505'/%3E%3C/svg%3E");
        background-size: 100% 100%; z-index: 2;
    }

    .auth-side {
        width: 55%; height: 100%; background-color: var(--bg);
        display: flex; flex-direction: column; align-items: center;
        position: relative; overflow-y: auto; padding: 80px 40px; 
    }

    .auth-container { width: 100%; max-width: 500px; position: relative; margin: auto 0; }

    h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; }
    h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; }
    p.muted { color: #888; font-size: 0.9rem; line-height: 1.5; }
    
    .input-group { 
        display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; width: 100%;
    }
    .input-group > div { width: 100%; }
    
    label { display: block; font-size: 0.8rem; color: #aaa; margin-bottom: 6px; font-weight: 500; }

    input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], input[type="number"], select {
        width: 100%; padding: 16px 20px;
        background: #000000; border: 1px solid #333; border-radius: 20px;
        color: #fff; font-family: var(--font); font-size: 1rem !important;
        transition: 0.3s; appearance: none; box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }
    input:focus, select:focus { 
        border-color: var(--primary); background: #050505; 
        box-shadow: 0 0 0 4px rgba(15, 116, 189, 0.15);
    }

    .select-wrapper { position: relative; width: 100%; }
    .select-arrow {
        position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
        color: #666; pointer-events: none; font-size: 0.9rem;
    }

    .select-wrapper select { display: none !important; }
    .custom-select-container { position: relative; width: 100%; user-select: none; }
    .custom-select-trigger {
        position: relative; display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 16px 20px; background: #000000; border: 1px solid #333;
        border-radius: 20x; color: #fff; font-family: var(--font); font-size: 1rem;
        cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }
    .custom-select-container.open .custom-select-trigger {
        border-color: var(--primary); border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    }
    .custom-options {
        position: absolute; top: 100%; left: 0; right: 0; background: #000000;
        border: 1px solid var(--primary); border-top: none;
        border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
        z-index: 100; opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(-10px); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        max-height: 250px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .custom-select-container.open .custom-options {
        opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0);
    }
    .custom-option {
        padding: 14px 24px; color: #aaa; cursor: pointer; transition: all 0.2s; border-top: 1px solid #111;
    }
    .custom-option:hover { background: rgba(15, 116, 189, 0.1); color: #fff; padding-left: 30px; }
    .custom-option.selected { color: var(--primary); background: rgba(15, 116, 189, 0.05); }
    .custom-arrow { font-size: 0.8rem; color: var(--primary); transition: transform 0.3s; }
    .custom-select-container.open .custom-arrow { transform: rotate(180deg); }

    .digit-wrapper {
        display: flex; gap: 6px; position: relative; margin-bottom: 20px;
        cursor: text; overflow-x: auto; padding-bottom: 5px;
        scrollbar-width: none;
    }
    .digit-wrapper::-webkit-scrollbar { display: none; }
    .digit-real-input {
        position: absolute; top: 0; left: 0; min-width: 100%; width: 100%; height: 100%;
        opacity: 0; z-index: 10; cursor: text; color: transparent; background: transparent; border: none; font-size: 1px;
    }
    .digit-box {
        flex: 0 0 40px; height: 50px; background: rgba(255,255,255,0.03);
        border: 1px solid var(--border); border-radius: 20px;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 1.1rem; transition: 0.2s; pointer-events: none;
    }
    .digit-wrapper:focus-within .digit-box.active {
        border-color: var(--primary); box-shadow: 0 0 0 2px rgba(15,116,189,0.2);
    }
    .digit-box.filled { background: rgba(255,255,255,0.08); border-color: #444; }

    .file-drop {
        display: block; border: 2px dashed #333; border-radius: 20px; padding: 25px;
        text-align: center; background: rgba(255,255,255,0.01); cursor: pointer;
        transition: 0.3s; margin-bottom: 15px; position: relative;
    }
    .file-drop:hover { border-color: var(--primary); background: rgba(255,255,255,0.03); }
    .file-drop.locked { border-style: solid; border-color: #10b981; pointer-events: none; background: rgba(16, 185, 129, 0.05); }
    .file-input-safe { display: none; }

    .button {
        width: 100%; padding: 16px; background: var(--primary);
        color: white; border: none; border-radius: 20px;
        font-family: var(--font); font-size: 1rem; font-weight: 600;
        cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px;
        display: flex; align-items: center; justify-content: center; gap: 10px;
    }
    .button:hover { background: var(--primary-hover); transform: translateY(-1px); }
    .button:disabled { background: #333; color: #666; cursor: not-allowed; }
    .auth-btn {
        padding: 14px; background: transparent; border: 1px solid var(--border); border-radius: 20px;
        color: #ccc; cursor: pointer; transition: 0.3s; width: 100%;
    }
    .auth-btn:hover { border-color: #fff; color: #fff; }

    .google-btn {
        width: 100%; height: 54px; padding: 0; background: transparent;
        border: 1px solid var(--border); border-radius: 20px; color: white;
        display: flex; align-items: center; justify-content: center; gap: 12px;
        cursor: pointer; margin-top: 20px; position: relative; overflow: hidden;
        will-change: gap, background-color; transition: background-color 0.3s ease;
    }
    .google-btn:hover { background: rgba(255,255,255,0.05); }
    .google-btn svg { flex-shrink: 0; display: block; margin: 0; will-change: transform; }
    .google-text {
        display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden;
        height: 100%; will-change: width, opacity; transform-origin: right center;
    }
    .google-text span {
        display: inline-block; min-width: 4px; font-size: 0.9rem; letter-spacing: 1px; font-weight: 600;
        will-change: width, opacity, margin, padding;
    }

    .steps-indicator { display: flex; justify-content: space-between; margin-bottom: 40px; position: relative; width: 100%; }
    .steps-line { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #222; z-index: 0; }
    .step-node {
        width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 2px solid #333; color: #666;
        display: flex; justify-content: center; align-items: center; font-weight: 700; position: relative; z-index: 1; transition: 0.3s;
    }
    .step-node.active, .step-node.completed { background: var(--primary); border-color: var(--primary); color: white; }

    .wizard-section { display: none; animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
    .wizard-section.active { display: block; }
    .section-title { font-size: 1.1rem; font-weight: 600; margin: 30px 0 15px; border-bottom: 1px solid #222; padding-bottom: 10px; color: #fff; }

    .password-wrapper { position: relative; width: 100%; }
    .eye-icon { position: absolute; right: 15px; top: 20px; cursor: pointer; color: #666; z-index: 2; }

    .notification {
        position: fixed; bottom: 30px; right: 30px; background: rgba(15, 15, 15, 0.95);
        backdrop-filter: blur(10px); padding: 16px 24px; border-radius: 20px; border: 1px solid var(--border);
        font-size: 0.9rem; transform: translateY(100px); opacity: 0; z-index: 9999;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5); border-left: none !important; 
    }

    .loading-dots { display: flex; justify-content: center; align-items: center; gap: 6px; }
    .loading-dots span { width: 8px; height: 8px; background-color: #fff; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
    .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
    .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
    @keyframes bounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }
    @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    .modal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.9); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.3s; }
    .modal.open { opacity: 1; pointer-events: auto; }
    .modal-content { background: #111; border: 1px solid var(--border); border-radius: 20px; padding: 40px; width: 90%; max-width: 480px; text-align: center; position: relative; }

    @media(max-width: 900px) {
        .visual-side { display: none; }
        .auth-side { width: 100%; padding: 60px 20px; }
        .input-group { grid-template-columns: 1fr; gap: 0; }
    }

    .select-wrapper select { display: none !important; }
    
    .custom-select-container { 
        position: relative; 
        width: 100%; 
        user-select: none; 
    }
    
    .custom-select-trigger {
        position: relative; 
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        width: 100%; 
        padding: 16px 20px; 
        background: #000000; 
        border: 1px solid #333;
        border-radius: 20px; 
        color: #fff; 
        font-family: var(--font); 
        font-size: 1rem;
        cursor: pointer; 
        transition: all 0.3s ease; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }
    
    .custom-select-container.open .custom-select-trigger {
        border-color: var(--primary); 
        box-shadow: 0 0 0 4px rgba(15, 116, 189, 0.15);
        background: #050505;
    }
    
    .custom-options {
        position: absolute; 
        top: calc(100% + 8px); 
        left: 0; 
        right: 0; 
        background: #0a0a0a;
        border: 1px solid #333; 
        border-radius: 20px; 
        z-index: 100; 
        opacity: 0; 
        visibility: hidden; 
        pointer-events: none;
        transform: translateY(-10px); 
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        max-height: 250px; 
        overflow-y: auto; 
        overflow-x: hidden; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    }
    
    .custom-select-container.open .custom-options {
        opacity: 1; 
        visibility: visible; 
        pointer-events: all; 
        transform: translateY(0);
    }
    
    .custom-option {
        padding: 14px 24px; 
        color: #aaa; 
        cursor: pointer; 
        transition: all 0.2s; 
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    
    .custom-option:last-child {
        border-bottom: none;
    }
    
    .custom-option:hover { 
        background: rgba(15, 116, 189, 0.1); 
        color: #fff; 
        padding-left: 30px; 
    }
    
    .custom-option.selected { 
        color: var(--primary); 
        background: rgba(15, 116, 189, 0.05); 
    }
    
    .custom-arrow { 
        font-size: 0.8rem; 
        color: var(--primary); 
        transition: transform 0.3s; 
    }
    
    .custom-select-container.open .custom-arrow { 
        transform: rotate(180deg); 
    }
    input,
    select,
    textarea,
    .custom-select-trigger,
    .custom-option,
    .digit-box {
        font-size: 1rem !important;
    }

    ::placeholder {
        font-size: 1rem !important;
    }
    #forgot-modal .auth-btn {
    border: 1px solid #ffffff !important;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px;
    }
    #forgot-modal .auth-btn:hover {
    background: #ffffff;
    color: #050505; 
    transform: translateY(-1px);
    }
    @media (max-width: 900px) {
    .notification {
        left: 0;
        right: 0;
        margin: 0 auto;
        width: max-content;
        max-width: 90%;
        bottom: 20px;
    }
    }
    @media (max-height: 900px), (max-width: 1024px) {
    .auth-side {
        padding: 40px 20px;

        overflow-y: auto; 

        display: block; 
    }

    .auth-container {
        margin: 0 auto; 
        padding-bottom: 40px; 
        }
    }

    .modal {
        overflow-y: auto;
        align-items: flex-start; 
        padding: 40px 0;
    }

    .modal-content {
        margin: auto; 
        max-height: none; 
    }

    @media screen and (max-width: 1180px), screen and (max-height: 800px) {
        .auth-side {
            display: block !important; 
            overflow-y: auto !important;
            height: 100vh;
            padding: 40px 20px 100px 20px;
        }

        .auth-container {
            margin: 0 auto !important; 
            height: auto !important;
            position: static !important;
        }
    }
    .step-node {
    cursor: pointer;
    transition: 0.3s;
    }

    .step-node:not(.active):hover {
        background: rgba(43, 43, 43, 1);
    }
    .custom-options {
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    }
    .custom-options {
    top: 100%; 
    margin-top: 0;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: #333 transparent;
    }

    ::-webkit-scrollbar {
        width: 8px; 
        height: 8px; 
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #333;
        border-radius: 20px;
        border: 2px solid transparent; 
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

    .digit-wrapper::-webkit-scrollbar {
        height: 4px;
    }

    .digit-box.active {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(15, 116, 189, 0.2);
        position: relative;
    }

    .digit-box.active::after {
        content: '';
        position: absolute;
        width: 2px;
        height: 24px;
        background: #fff;
        animation: blink 1s step-end infinite;
    }

    .digit-box.filled.active::after {
        display: none; 
    }

    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }

    .digit-box.active::after {
        content: '';
        display: none; 
    }

    .digit-wrapper:focus-within .digit-box.active::after {
        display: block;
        position: absolute;
        width: 2px;
        height: 24px;
        background: #fff;
        animation: blink 1s step-end infinite;
    }

    .digit-box.active {
        border-color: var(--border);
        box-shadow: none;
    }

    .digit-wrapper:focus-within .digit-box.active {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(15, 116, 189, 0.2);
    }

    .radio-card {
        flex: 1; padding: 12px; 
        background: #000; border: 1px solid #333; border-radius: 12px;
        color: #888; font-size: 0.9rem; font-weight: 600; cursor: pointer;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        transition: 0.2s;
    }
    .radio-card:hover { background: #111; color: #ccc; }
    .radio-card.selected { 
        background: rgba(15, 116, 189, 0.1); 
        border-color: var(--primary); 
        color: var(--primary); 
    }

    #reg-fields {
        overflow: hidden; 
        transition: none; 
    }
    
    #reg-fields .input-group:first-child {
        margin-top: 5px;
    }

    input[type="checkbox"] {
        appearance: none; -webkit-appearance: none;
        width: 22px; height: 22px;
        background: #111; border: 1px solid #333; border-radius: 6px;
        cursor: pointer; position: relative; transition: 0.2s;
        flex-shrink: 0; 
    }
    input[type="checkbox"]:checked {
        background: var(--primary); border-color: var(--primary);
    }
    input[type="checkbox"]:checked::after {
        content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
        color: white; font-size: 14px;
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    }
    input[type="checkbox"]:hover { border-color: #666; }