/* =============================================
       BASE RESET & VARIABLES
    ============================================= */
    *,:before,:after{box-sizing:border-box;margin:0;padding:0}
    :root{
        --teal:#097F7F;--teal-dark:#014d4d;--teal-light:#e0f4f4;
        --coral:#ff6f61;--coral-dark:#e85d50;
        --slate:#f8fafc;--border:#e2e8f0;
        --text:#0f172a;--muted:#64748b;
        --shadow:0 4px 24px rgba(9,127,127,.10);
        --radius:14px;--radius-lg:20px;
    }
    body{font-family:'Poppins',sans-serif;background:#f0f7f7}

    /* =============================================
       PAGE WRAPPER & LAYOUT
    ============================================= */
    .signup-page-wrapper-admin{min-height:100vh;display:flex;align-items:stretch}
    .signup-inner-wrapper{display:flex;width:100%;min-height:100vh}

    /* LEFT HERO PANEL */
    .signup-hero-panel{
        flex:0 0 42%;width:42%;
        background:linear-gradient(160deg,#0a6b6b 0%,#097F7F 40%,#014d4d 100%);
        display:flex;flex-direction:column;justify-content:space-between;
        padding:3rem 3rem;position:relative;overflow:hidden;
    }
    .signup-hero-panel::before{
        content:'';position:absolute;top:-80px;right:-80px;
        width:340px;height:340px;border-radius:50%;
        background:rgba(255,255,255,.06);pointer-events:none;
    }
    .signup-hero-panel::after{
        content:'';position:absolute;bottom:-60px;left:-60px;
        width:260px;height:260px;border-radius:50%;
        background:rgba(255,255,255,.05);pointer-events:none;
    }
    .hero-logo img{height:40px}
    .hero-logo{background:#fff;display:inline-flex;padding:8px 16px;border-radius:12px;margin-bottom:2rem}
    .hero-title{font-size:2.1rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:1rem}
    .hero-title .accent{color:#7ef0f0}
    .hero-subtitle{color:rgba(255,255,255,.82);font-size:.95rem;line-height:1.65;margin-bottom:2rem}
    .hero-features{list-style:none;display:flex;flex-direction:column;gap:.2rem;margin-bottom:0}
    .hero-features li{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.9);font-size:.85rem}
    .hero-features li i{color:#7ef0f0;font-size:1.1rem;flex-shrink:0}
    .hero-illustration{width:100%;max-width:340px;margin:0 auto;display:block;opacity:.85}
    .hero-footer{color:rgba(255,255,255,.6);font-size:.78rem;text-align:center}
    .hero-footer a{color:#7ef0f0;text-decoration:none;font-weight:600}

    /* RIGHT FORM PANEL */
    .signup-form-panel{
        flex:1;display:flex;flex-direction:column;
        justify-content:center;padding:3rem 4rem;background:#fff;overflow-y:auto;
    }
    .form-card-inner{width:100%;max-width:520px;margin:0 auto}

    /* =============================================
       MAIN STEPPER (top 3 steps)
    ============================================= */
    .main-stepper{display:flex;align-items:center;margin-bottom:2.5rem}
    .mstep{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
    .mstep-circle{
        width:36px;height:36px;border-radius:50%;border:2px solid var(--border);
        background:#f1f5f9;color:var(--muted);font-weight:700;font-size:.82rem;
        display:flex;align-items:center;justify-content:center;
        transition:all .3s;
    }
    .mstep-label{font-size:.68rem;font-weight:600;color:var(--muted);margin-top:.4rem;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
    .mstep.active .mstep-circle{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border-color:var(--teal);box-shadow:0 4px 12px rgba(9,127,127,.25)}
    .mstep.active .mstep-label{color:var(--teal-dark);font-weight:700}
    .mstep.done .mstep-circle{background:var(--teal);color:#fff;border-color:var(--teal)}
    .mstep.done .mstep-label{color:var(--teal)}
    .mstep-line{flex:1;height:2px;background:var(--border);margin:0 6px;margin-top:-18px;transition:background .3s}
    .mstep-line.done{background:var(--teal)}

    /* =============================================
       FORM ELEMENTS
    ============================================= */
    .step-header{margin-bottom:1.5rem}
    .step-header h2{font-size:1.45rem;font-weight:700;color:var(--coral);margin-bottom:.3rem}
    .step-header p{font-size:.85rem;color:var(--muted)}
    .fgroup{margin-bottom:0.5rem}
    .fgroup label{display:block;font-size:.78rem;font-weight:600;color:#334155;margin-bottom:.35rem}
    .input-wrap{position:relative;display:flex;align-items:center}
    .input-wrap .fi{position:absolute;left:12px;color:var(--muted);font-size:1rem;pointer-events:none}
    .input-wrap input,.input-wrap select,.input-wrap textarea{
        width:100%;height:42px;padding:0 .9rem 0 2.4rem;
        border:1.5px solid var(--border);border-radius:var(--radius);
        background:var(--slate);font-size:.86rem;color:var(--text);
        font-family:'Poppins',sans-serif;transition:all .2s;outline:none;
    }
    .input-wrap textarea{height:auto;min-height:72px;padding:.65rem .9rem .65rem 2.4rem;resize:none}
    .input-wrap input:focus,.input-wrap select:focus,.input-wrap textarea:focus{
        border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(9,127,127,.09)
    }
    .input-wrap .eye-btn{position:absolute;right:10px;background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;padding:4px}
    .input-wrap.no-icon input,.input-wrap.no-icon select,.input-wrap.no-icon textarea{padding-left:.9rem}
    .ferr{font-size:.73rem;color:#ef4444;margin-top:.25rem;display:block;min-height:16px}
    .input-error{border-color:#ef4444!important;background:#fff5f5!important}
    .row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
    .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem}
    .profile-uploader{display:flex;flex-direction:column;align-items:center;margin:.25rem 0 0.8rem}
    .profile-avatar{
        width:92px;height:92px;
        position:relative;overflow:hidden;
        display:flex;align-items:center;justify-content:center;
        cursor:pointer;transition:all .2s;outline:none;
        padding: 10px;
    }
    .profile-avatar img:hover{border-color:var(--teal);box-shadow:0 6px 18px rgba(9,127,127,.18);transform:translateY(-1px)}
    .profile-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
    .profile-plus{
        position:absolute;right:3px;bottom:5px;
        width:25px;height:25px;border-radius:50%;
        background:linear-gradient(135deg,var(--teal),var(--teal-dark));
        border:2px solid #fff;color:#fff;
        display:flex;align-items:center;justify-content:center;
        font-size:1.05rem;
    }
    .profile-uploading{
        position:absolute;inset:0;
        background:rgba(255,255,255,.72);
        display:flex;align-items:center;justify-content:center;
        color:var(--teal-dark);font-size:1.6rem;
    }
    .profile-help{margin-top:.45rem;font-size:.75rem;color:var(--muted);text-align:center}

    /* =============================================
       BUTTONS
    ============================================= */
    .btn-primary{
        width:100%;height:44px;border:none;border-radius:var(--radius);
        background:linear-gradient(135deg,var(--teal),var(--teal-dark));
        color:#fff;font-weight:600;font-size:.9rem;cursor:pointer;
        transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem;
        font-family:'Poppins',sans-serif;
    }
    .btn-primary:hover{box-shadow:0 6px 18px rgba(9,127,127,.28);transform:translateY(-1px)}
    .btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
    .btn-outline{
        height:44px;padding:0 1.2rem;border:1.5px solid var(--border);border-radius:var(--radius);
        background:#fff;color:var(--muted);font-weight:600;font-size:.88rem;cursor:pointer;
        transition:all .2s;display:flex;align-items:center;gap:.4rem;font-family:'Poppins',sans-serif;
    }
    .btn-outline:hover{background:#f1f5f9;color:var(--text)}
    .btn-coral{
        height:44px;padding:0 1.4rem;border:none;border-radius:var(--radius);
        background:linear-gradient(135deg,var(--coral),var(--coral-dark));
        color:#fff;font-weight:600;font-size:.88rem;cursor:pointer;
        transition:all .2s;font-family:'Poppins',sans-serif;
    }
    .btn-coral:hover{box-shadow:0 6px 18px rgba(255,111,97,.3);transform:translateY(-1px)}
    .btn-row{display:flex;gap:.75rem;margin-top:1rem}
    .btn-row .btn-outline{flex:0 0 auto}
    .btn-row .btn-primary{flex:1}

    /* =============================================
       OTP INPUT
    ============================================= */
    .otp-inputs{display:flex;gap:.75rem;justify-content:center;margin:1.5rem 0}
    .otp-inputs input{
        width:52px;height:56px;text-align:center;font-size:1.4rem;font-weight:700;
        border:2px solid var(--border);border-radius:12px;background:var(--slate);
        color:var(--text);transition:all .2s;outline:none;font-family:'Poppins',sans-serif;
    }
    .otp-inputs input:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(9,127,127,.1)}
    .otp-resend{text-align:center;font-size:.82rem;color:var(--muted)}
    .otp-resend button{background:none;border:none;color:var(--teal);font-weight:600;cursor:pointer;font-size:.82rem;font-family:'Poppins',sans-serif}
    .otp-resend button:disabled{color:var(--muted);cursor:not-allowed}
    .otp-info{background:var(--teal-light);border-radius:10px;padding:.75rem 1rem;font-size:.82rem;color:var(--teal-dark);text-align:center;margin-bottom:1rem}
    .otp-info span{font-weight:600}

    /* reCAPTCHA centering */
    .recaptcha-wrap{display:flex;justify-content:center;margin:1rem 0}
    .g-recaptcha{transform:scale(.92);transform-origin:center}

    /* =============================================
       CHECKBOX
    ============================================= */
    .check-group{display:flex;align-items:flex-start;gap:.55rem;font-size:.8rem;color:var(--muted);cursor:pointer}
    .check-group input{accent-color:var(--teal);margin-top:.15rem;cursor:pointer}
    .check-group a{color:var(--teal);font-weight:600;text-decoration:none}

    /* =============================================
       MODAL BASE
    ============================================= */
    .su-overlay{
        position:fixed;inset:0;background:rgba(0,0,0,.5);
        backdrop-filter:blur(4px);z-index:9000;
        display:flex;align-items:center;justify-content:center;padding:1rem;
        opacity:0;pointer-events:none;transition:opacity .3s;
    }
    .su-overlay.show{opacity:1;pointer-events:all}
    .su-modal{
        background:#fff;border-radius:var(--radius-lg);
        box-shadow:0 24px 80px rgba(0,0,0,.2);
        width:100%;max-width:680px;max-height:90vh;overflow-y:auto;
        transform:translateY(20px) scale(.97);transition:all .3s;
    }
    .su-overlay.show .su-modal{transform:translateY(0) scale(1)}
    .su-modal-header{
        padding:1.5rem 1.75rem 1.25rem;border-bottom:1px solid var(--border);
        display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
        position:sticky;top:0;background:#fff;z-index:2;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    }
    .progress-link{
        width: 100%;
        padding-top:10px;
        padding-bottom: 10px;
    }
    .su-modal-header h3{font-size:1.15rem;font-weight:700;color:var(--teal-dark)}
    .su-modal-header p{font-size:.82rem;color:var(--muted);margin-top:.2rem}
    .su-modal-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:1.25rem;padding:2px;line-height:1;flex-shrink:0}
    .su-modal-close:hover{color:var(--text)}
    .su-modal-body{padding:1.5rem 1.75rem}
    .su-modal-footer{
        padding:1.25rem 1.75rem;border-top:1px solid var(--border);
        display:flex;gap:.75rem;justify-content:flex-end;
        position:sticky;bottom:0;background:#fff;z-index:2;
    }

    /* =============================================
       SETUP MODE POPUP (Automatic / Manual)
    ============================================= */
    .setup-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
    .setup-option{
        border:2px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.25rem;
        cursor:pointer;transition:all .25s;text-align:center;position:relative;
    }
    .setup-option:hover{border-color:var(--teal);box-shadow:0 4px 20px rgba(9,127,127,.12)}
    .setup-option.selected{border-color:var(--teal);background:var(--teal-light)}
    .setup-option .so-icon{
        width:56px;height:56px;border-radius:50%;margin:0 auto 1rem;
        display:flex;align-items:center;justify-content:center;font-size:1.6rem;
    }
    .setup-option.auto .so-icon{background:linear-gradient(135deg,#e0f4f4,#b2e8e8);color:var(--teal)}
    .setup-option.manual .so-icon{background:linear-gradient(135deg,#fff0ee,#ffd5d0);color:var(--coral)}
    .setup-option h4{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.5rem}
    .setup-option p{font-size:.8rem;color:var(--muted);line-height:1.5}
    .setup-option .recommended-badge{
        position:absolute;top:-10px;right:12px;
        background:linear-gradient(135deg,var(--teal),var(--teal-dark));
        color:#fff;font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:20px;
        text-transform:uppercase;letter-spacing:.5px;
    }

    /* =============================================
       INDUSTRY GRID (Auto mode)
    ============================================= */
    .industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1rem 0}
    .industry-card{
        border:2px solid var(--border);border-radius:var(--radius);padding:1rem .75rem;
        cursor:pointer;transition:all .25s;text-align:center;
    }
    .industry-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 16px rgba(9,127,127,.1)}
    .industry-card.selected{border-color:var(--teal);background:var(--teal-light)}
    .industry-card .ic-icon{font-size:1.8rem;margin-bottom:.4rem}
    .industry-card .ic-name{font-size:.8rem;font-weight:600;color:var(--text)}

    /* =============================================
       AUTO PROGRESS STEPS
    ============================================= */
    .auto-progress-list{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}
    .apl-item{
        display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;
        border-radius:12px;background:var(--slate);border:1px solid var(--border);
        transition:all .3s;
    }
    .apl-item.done{background:#e6faf6;border-color:#6be3cc}
    .apl-item.active{background:#e0f4f4;border-color:var(--teal);box-shadow:0 2px 10px rgba(9,127,127,.12)}
    .apl-item.pending{opacity:.55}
    .apl-icon{
        width:36px;height:36px;border-radius:50%;flex-shrink:0;
        display:flex;align-items:center;justify-content:center;font-size:1rem;
    }
    .apl-item.done .apl-icon{background:#6be3cc;color:#fff}
    .apl-item.active .apl-icon{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff}
    .apl-item.pending .apl-icon{background:var(--border);color:var(--muted)}
    .apl-text strong{font-size:.88rem;color:var(--text);display:block}
    .apl-text span{font-size:.76rem;color:var(--muted)}
    .apl-badge{margin-left:auto;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:20px}
    .apl-item.done .apl-badge{background:#d0faf0;color:#0a7a5c}
    .apl-item.active .apl-badge{background:var(--teal-light);color:var(--teal-dark)}
    .apl-item.pending .apl-badge{background:var(--border);color:var(--muted)}

    /* =============================================
       MANUAL TAGS (add multiple items)
    ============================================= */
    .tags-container{
        display:flex;flex-wrap:wrap;gap:.4rem;min-height:42px;
        border:1.5px solid var(--border);border-radius:var(--radius);
        padding:.5rem;background:var(--slate);cursor:text;
        transition:border-color .2s;
    }
    .tags-container:focus-within{border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(9,127,127,.09)}
    .tag-item{
        display:flex;align-items:center;gap:.3rem;
        background:linear-gradient(135deg,var(--teal-light),#c6f0ee);
        color:var(--teal-dark);font-size:.78rem;font-weight:600;
        padding:3px 10px;border-radius:20px;
    }
    .tag-item button{background:none;border:none;cursor:pointer;color:var(--teal-dark);font-size:.8rem;line-height:1;padding:0}
    .tag-input{border:none;outline:none;background:transparent;font-size:.85rem;font-family:'Poppins',sans-serif;min-width:120px;flex:1}

    /* =============================================
       LEAVE FORM CARDS
    ============================================= */
    .leave-card-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}
    .leave-card{
        border:1.5px solid var(--border);border-radius:var(--radius);
        padding:1.1rem 1.2rem;background:var(--slate);position:relative;
    }
    .leave-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
    .leave-card-header span{font-size:.82rem;font-weight:700;color:var(--teal-dark);background:var(--teal-light);padding:3px 10px;border-radius:20px}
    .leave-card-header button{background:none;border:none;cursor:pointer;color:#ef4444;font-size:1rem}
    .leave-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.6rem}
    .leave-checks{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
    .leave-check{display:flex;align-items:center;gap:.4rem;font-size:.79rem;color:var(--muted);cursor:pointer}
    .leave-check input{accent-color:var(--teal);cursor:pointer}
    .leave-check strong{color:var(--text)}
    .leave-select{
        width:100%;height:38px;padding:0 .75rem;
        border:1.5px solid var(--border);border-radius:10px;
        background:var(--slate);font-size:.82rem;color:var(--text);
        font-family:'Poppins',sans-serif;outline:none;cursor:pointer;
    }
    .leave-select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(9,127,127,.09)}
    .leave-input{
        width:100%;height:38px;padding:0 .75rem;
        border:1.5px solid var(--border);border-radius:10px;
        background:var(--slate);font-size:.82rem;color:var(--text);
        font-family:'Poppins',sans-serif;outline:none;
    }
    .leave-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(9,127,127,.09)}
    .add-more-btn{
        width:100%;height:40px;border:2px dashed var(--border);border-radius:var(--radius);
        background:transparent;cursor:pointer;color:var(--muted);font-size:.85rem;
        font-weight:600;font-family:'Poppins',sans-serif;transition:all .2s;
        display:flex;align-items:center;justify-content:center;gap:.4rem;
    }
    .add-more-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light)}

    /* =============================================
       MANUAL POPUP STEPPER
    ============================================= */
    .popup-steps{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;gap:0}
    .ps-item{display:flex;flex-direction:column;align-items:center}
    .ps-circle{
        width:30px;height:30px;border-radius:50%;border:2px solid var(--border);
        background:var(--slate);color:var(--muted);font-size:.75rem;font-weight:700;
        display:flex;align-items:center;justify-content:center;transition:all .25s;
    }
    .ps-label{font-size:.62rem;color:var(--muted);margin-top:.3rem;font-weight:600;text-transform:uppercase}
    .ps-line{width:48px;height:2px;background:var(--border);margin-bottom:16px;transition:background .25s}
    .ps-item.active .ps-circle{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border-color:var(--teal)}
    .ps-item.active .ps-label{color:var(--teal-dark);font-weight:700}
    .ps-item.done .ps-circle{background:var(--teal);color:#fff;border-color:var(--teal)}
    .ps-item.done .ps-label{color:var(--teal)}
    .ps-line.done{background:var(--teal)}

    /* =============================================
       SUCCESS STATE
    ============================================= */
    .success-wrap{text-align:center;padding:2rem 1rem}
    .success-wrap .success-icon{
        width:80px;height:80px;border-radius:50%;margin:0 auto 1.25rem;
        background:linear-gradient(135deg,#d0faf0,#6be3cc);
        display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:#0a7a5c;
    }
    .success-wrap h3{font-size:1.4rem;font-weight:700;color:var(--teal-dark);margin-bottom:.5rem}
    .success-wrap p{font-size:.88rem;color:var(--muted);line-height:1.6}

    /* =============================================
       RESPONSIVE
    ============================================= */
    @media(max-width:991px){
        .signup-hero-panel{flex:0 0 38%;width:38%;padding:2rem}
        .signup-form-panel{padding:2.5rem 2rem}
        .hero-title{font-size:1.7rem}
    }
    @media(max-width:767px){
        .signup-inner-wrapper{flex-direction:column}
        .signup-hero-panel{flex:none;width:100%;padding:2rem 1.5rem;min-height:auto}
        .hero-illustration{max-width:180px}
        .signup-form-panel{padding:2rem 1.25rem}
        .industry-grid{grid-template-columns:repeat(2,1fr)}
        .setup-options{grid-template-columns:1fr}
        .row2,.row3,.leave-row{grid-template-columns:1fr}
    }
    .empty-header-space-signup{min-height:0!important;padding:0!important}