/* ========================================================================
   VIDHWAAN AI Writer
   Version : 1.0.0
   Global Production Build
   ======================================================================== */

/* ========================================================================
   RESET
   ======================================================================== */

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

html{
    font-size:16px;
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img,
picture,
svg{
    display:block;
    max-width:100%;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
    border:none;
    background:none;
}

input,
select,
textarea{
    outline:none;
}

a{
    color:inherit;
    text-decoration:none;
}

ul,
ol{
    list-style:none;
}

/* ========================================================================
   DESIGN TOKENS
   ======================================================================== */

:root{

    /* Brand */

    --vw-primary:#111827;
    --vw-primary-hover:#1f2937;

    --vw-accent:#2563eb;
    --vw-accent-hover:#1d4ed8;

    /* Status */

    --vw-success:#16a34a;


    /* Background */

    --vw-bg:#f8fafc;
    --vw-surface:#ffffff;

    /* Borders */

    --vw-border:#e5e7eb;

    /* Typography */

    --vw-text:#111827;
    --vw-text-soft:#6b7280;

    /* Radius */

    --vw-radius-sm:8px;
    --vw-radius-md:12px;
    --vw-radius-lg:18px;


    /* Shadows */


    --vw-shadow-sm:
        0 1px 2px rgba(0,0,0,.05);

    --vw-shadow-lg:
        0 16px 40px rgba(0,0,0,.10);

    /* Layout */

    --vw-container:1280px;

    /* Spacing */

    --vw-space-1:4px;
    --vw-space-2:8px;
    --vw-space-3:12px;
    --vw-space-4:16px;
    --vw-space-5:24px;
    --vw-space-6:32px;
    --vw-space-7:48px;
    --vw-space-8:64px;

    /* Animation */

    --vw-speed:.18s;
}

/* ========================================================================
   BASE
   ======================================================================== */

body{

    background:var(--vw-bg);

    color:var(--vw-text);

    line-height:1.6;
}

#vw-app{

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

/* ========================================================================
   TYPOGRAPHY
   ======================================================================== */

h1{

    font-size:2rem;

    font-weight:700;

    line-height:1.2;

}

h2{

    font-size:1.4rem;

    font-weight:600;

    line-height:1.3;

}

h3{

    font-size:1.1rem;

    font-weight:600;

}

p{

    color:var(--vw-text-soft);

}

strong{

    font-weight:600;

}

/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

.vw-skip-link{

    position:absolute;

    left:-9999px;

}

.vw-skip-link:focus{

    left:20px;
    top:20px;

    z-index:9999;

    background:#000;

    color:#fff;

    padding:12px 20px;

    border-radius:10px;

}

.vw-noscript{

    background:#fff3cd;

    color:#664d03;

    padding:16px;

    text-align:center;

    font-weight:600;

}

/* ========================================================================
   APP LAYOUT
   ======================================================================== */

#vw-main{

    flex:1;

    width:min(100%,var(--vw-container));

    margin-inline:auto;

    padding:var(--vw-space-6);

    display:grid;

    gap:var(--vw-space-6);

}

.vw-card{

    background:var(--vw-surface);

    border:1px solid var(--vw-border);

    border-radius:var(--vw-radius-lg);

    box-shadow:var(--vw-shadow-sm);

    padding:20px;

}

/* ========================================================================
   HEADER
   ======================================================================== */

#vw-header{

    background:var(--vw-surface);

    border-bottom:1px solid var(--vw-border);

}

.vw-header-container{

    width:min(100%,var(--vw-container));

    margin-inline:auto;

    padding:20px 32px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:32px;

}

.vw-brand{

    display:flex;

    align-items:center;

    gap:16px;

}

#vw-logo{

    width:48px;

    height:48px;

    flex-shrink:0;

}

.vw-brand-text{

    display:flex;

    flex-direction:column;

    gap:4px;

}

#vw-app-title{

    font-size:1.75rem;

}

#vw-app-tagline{

    font-size:.95rem;

}

#vw-header-status{

    display:flex;

    gap:24px;

    align-items:center;

    flex-wrap:wrap;

}

.vw-status-item{

    display:flex;

    flex-direction:column;

    gap:2px;

}

.vw-status-label{

    font-size:.75rem;

    color:var(--vw-text-soft);

    text-transform:uppercase;

    letter-spacing:.05em;

}

/* ========================================================================
   FOOTER
   ======================================================================== */

#vw-footer{

    margin-top:auto;

    border-top:1px solid var(--vw-border);

    background:var(--vw-surface);

}

.vw-footer-container{

    width:min(100%,var(--vw-container));

    margin-inline:auto;

    padding:24px 32px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;

}

.vw-footer-brand{

    display:flex;

    align-items:center;

    gap:12px;

}

#vw-version{

    color:var(--vw-text-soft);

    font-size:.9rem;

}

.vw-footer-copyright{

    color:var(--vw-text-soft);

    font-size:.9rem;

}


/* ========================================================================
   GENERATOR
   ======================================================================== */

#vw-generator-form{

    display:flex;

    flex-direction:column;

    gap:var(--vw-space-6);

}

.vw-form-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:var(--vw-space-5);

}

.vw-field{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.vw-field label{

    font-size:.95rem;

    font-weight:600;

    color:var(--vw-text);

}

.vw-field input,
.vw-field select,
.vw-field textarea{

    width:100%;

    min-height:52px;

    padding:0 16px;

    border:1px solid var(--vw-border);

    border-radius:var(--vw-radius-md);

    background:var(--vw-surface);

    color:var(--vw-text);

    transition:
        border-color var(--vw-speed),
        box-shadow var(--vw-speed),
        background var(--vw-speed);

}

.vw-field textarea{

    min-height:140px;

    padding:16px;

    resize:vertical;

}



.vw-field input:focus,
.vw-field select:focus,
.vw-field textarea:focus{

    border-color:var(--vw-accent);

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.vw-password-field{

    display:flex;

    align-items:center;

    border:1px solid var(--vw-border);

    border-radius:var(--vw-radius-md);

    overflow:hidden;

    background:var(--vw-surface);

}

.vw-password-field input{

    border:none;

    box-shadow:none;

    flex:1;

}

#vw-toggle-id{

    width:56px;

    height:52px;

    display:grid;

    place-items:center;

    border-left:1px solid var(--vw-border);

    transition:background var(--vw-speed);

}

#vw-toggle-id:hover{

    background:#f3f4f6;

}

details#vw-advanced{

    border:1px solid var(--vw-border);

    border-radius:var(--vw-radius-md);

    padding:20px;

}

details#vw-advanced summary{

    cursor:pointer;

    font-weight:600;

    user-select:none;

    margin-bottom:20px;

}

.vw-actions{

    display:flex;

    justify-content:flex-end;

}

button{

    transition:
        background var(--vw-speed),
        color var(--vw-speed),
        border-color var(--vw-speed),
        transform var(--vw-speed);

}

button:active{

    transform:scale(.98);

}

#vw-generate-btn{

    min-width:220px;

    min-height:54px;

    padding:0 28px;

    background:var(--vw-primary);

    color:#fff;

    border-radius:var(--vw-radius-md);

    font-weight:700;

}

#vw-generate-btn:hover{

    background:var(--vw-primary-hover);

}

#vw-generate-btn:focus-visible{

    outline:none;

    box-shadow:0 0 0 4px rgba(17,24,39,.15);

}



/* =========================================================
   COLLAPSIBLE GENERATOR
   ========================================================= */


.vw-collapsible-card details{

    width:100%;

}


.vw-collapsible-card summary{

    cursor:pointer;

    list-style:none;

    margin-bottom:24px;

}


.vw-collapsible-card summary::-webkit-details-marker{

    display:none;

}


.vw-collapsible-card summary h2{

    display:flex;

    align-items:center;

    gap:10px;

}


.vw-collapsible-card summary h2::before{

    content:"▼";

    font-size:14px;

    transition:.2s ease;

}



.vw-collapsible-card details:not([open])
summary h2::before{

    content:"▶";

}












/* ========================================================================
   OUTPUT
   ======================================================================== */

#vw-output-card{

    display:flex;

    flex-direction:column;

    gap:24px;

}

#vw-output-placeholder{

    min-height:320px;

    display:grid;

    place-items:center;

    text-align:center;

    border:2px dashed var(--vw-border);

    border-radius:var(--vw-radius-lg);

    background:#fafafa;

}

.vw-empty-state{

    padding:48px;

}

.vw-empty-state h3{

    margin-bottom:12px;

}



.vw-output-actions{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.vw-output-actions button{

    min-height:48px;

    padding:0 20px;

    border-radius:var(--vw-radius-md);

    background:var(--vw-primary);

    color:#fff;

}

.vw-output-meta{

    display:flex;

    gap:24px;

    color:var(--vw-text-soft);

    font-size:.9rem;

    flex-wrap:wrap;

}

/* ========================================================================
   LOADING
   ======================================================================== */

#vw-loading{

    position:fixed;

    inset:0;

    display:grid;

    place-items:center;

    background:rgba(255,255,255,.75);

    z-index:9998;

}

#vw-loading[hidden]{

    display:none;

}

/* ========================================================================
   TOAST
   ======================================================================== */

#vw-toast{

    position:fixed;

    right:24px;

    bottom:24px;

    max-width:360px;

    padding:16px 20px;

    border-radius:var(--vw-radius-md);

    background:#111827;

    color:#fff;

    box-shadow:var(--vw-shadow-lg);

    z-index:9999;

}

#vw-toast[hidden]{

    display:none;

}

/* ========================================================================
   MODALS
   ======================================================================== */

.vw-modal{

    position:fixed;

    top:0;

    left:0;

    right:0;

    bottom:0;


    display:flex;

    align-items:center;

    justify-content:center;


    background:rgba(0,0,0,.45);


    z-index:9997;


    padding:16px;


    overflow:hidden;


    overscroll-behavior:none;

}

.vw-modal[hidden]{

    display:none;

}



/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width:900px){

    .vw-form-grid{

        grid-template-columns:1fr;

    }

    .vw-header-container{

        flex-direction:column;

        align-items:flex-start;

    }

    .vw-footer-container{

        flex-direction:column;

        align-items:flex-start;

    }

    #vw-main{

        padding:12px;

    }

}

@media (max-width:640px){


    .vw-output-actions{

        display:flex;

        flex-direction:row;

        flex-wrap:nowrap;

        gap:8px;

        width:100%;

    }



    .vw-output-actions button{

        flex:1;

        width:auto;

        min-width:0;

        padding:0 10px;

        font-size:14px;

        white-space:nowrap;

    }


}



/* ========================================================================
   PRINT
   ======================================================================== */

@media print{

    #vw-header,
    #vw-footer,
    #vw-loading,
    #vw-toast,
    .vw-output-actions,
    .vw-actions{

        display:none !important;

    }

    body{

        background:#fff;

    }

    #vw-main{

        width:100%;

        padding:0;

    }

}



/* ========================================================================
   VIDHWAAN AI - UNIVERSAL MODAL CARD FIX
   ======================================================================== */


.vw-modal-card{

    width:min(100%,520px);

    background:#ffffff;

    color:var(--vw-text);

    border-radius:var(--vw-radius-lg);

    padding:32px;

    display:flex;

    flex-direction:column;

    gap:20px;

    box-shadow:var(--vw-shadow-lg);

    position:relative;



}



.vw-modal-card h2{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:var(--vw-text);

}



.vw-modal-card p{

    margin:0;

    color:var(--vw-text-soft);

    line-height:1.5;

}



.vw-modal-card input{

    width:100%;

    padding:14px 16px;

    border:1px solid var(--vw-border);

    border-radius:12px;

    font-size:16px;

}



.vw-modal-card input:focus{

    border-color:var(--vw-primary);

}



.vw-modal-actions{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}



.vw-modal-actions button{

    flex:1;

    min-height:44px;

    padding:12px 18px;



    border-radius:12px;

   

    font-size:15px;

    font-weight:600;

}



#vw-save-api-btn,
#vw-payment-btn{

    background:var(--vw-primary);

    color:#ffffff;

}



#vw-api-link-btn,
#vw-payment-cancel-btn{

    background:#f3f4f6;

    color:var(--vw-text);

}



/* Hide all elements with the HTML hidden attribute */

[hidden]{

    display:none !important;

}





/* ==========================================================================
   EDITABLE AI OUTPUT AREA
   Premium Reading Experience
   ========================================================================== */


#vw-output{

    width:100%;

    max-width:100%;

    min-height:420px;

    padding:24px;

    background:#ffffff;

    border:none;

    border-radius:20px;

    box-shadow:
        0 2px 12px rgba(0,0,0,.05);

    outline:none;

    overflow-wrap:break-word;

    word-break:normal;

    white-space:pre-wrap;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size:19px;

    font-weight:400;

    line-height:1.75;

    letter-spacing:0;

    color:#222222;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}



#vw-output:focus{

    border-color:#cbd5e1;

}



#vw-output[contenteditable="true"]{

    cursor:text;

}



#vw-output[contenteditable="true"]:empty:before{

    content:

    "Your generated content will appear here...";


    color:

    var(--vw-text-soft);


    pointer-events:none;

}



#vw-output>*:first-child{

    margin-top:0;

}



#vw-output>*:last-child{

    margin-bottom:0;

}



#vw-output p{

    margin:0 0 22px;

    color:#222222;

    font-size:inherit;

    line-height:1.8;

}

#vw-output .vw-paragraph{

    margin:0 0 20px;

    color:#1f2937;

    line-height:1.8;

}



#vw-output h1{

    margin:

    34px 0 18px;


    font-size:2rem;


    font-weight:750;


    line-height:1.25;


    color:var(--vw-text);

}



#vw-output h2{

    margin:

    28px 0 14px;


    font-size:1.5rem;


    font-weight:700;


    line-height:1.35;


    color:var(--vw-text);

}



#vw-output h3{

    margin:

     22px 0 12px;


    font-size:1.2rem;


    font-weight:700;


    line-height:1.4;


    color:var(--vw-text);

}



#vw-output ul,
#vw-output ol{

    margin:

    0 0 20px 24px;


    padding:0;

}



#vw-output li{

    margin-bottom:12px;

    line-height:1.8;

}



#vw-output blockquote{

    margin:

    24px 0;


    padding:

    14px 18px;


    border-left:

    4px solid #2563eb;


    background:#f8fafc;


    border-radius:8px;


    color:#374151;


    font-style:italic;

}



#vw-output hr{

    margin:

    32px 0;


    border:none;


    border-top:

    1px solid var(--vw-border);

}



#vw-output table{

    width:100%;


    border-collapse:collapse;


    margin:

    24px 0;

}



#vw-output th,
#vw-output td{

    border:

    1px solid var(--vw-border);


    padding:

    12px 14px;


    text-align:left;

}



#vw-output th{

    background:#f8fafc;

    font-weight:700;

}



#vw-output img{

    display:block;

    max-width:100%;

    margin:24px auto;

    border-radius:14px;

}



#vw-output a{

    color:#2563eb;

    text-decoration:underline;

}



#vw-output strong{

    font-weight:700;

    color:var(--vw-text);

}



#vw-output em{

    font-style:italic;

}



#vw-output::selection{

    background:#dbeafe;

    color:#111827;

}



/* ==========================================================================
   MOBILE READING EXPERIENCE
   ========================================================================== */


@media(max-width:768px){


    #vw-output{

        min-height:300px;

        width:100%;

        max-width:100%;

        padding:12px 10px;

        font-size:19px;

        line-height:1.75;

        border-radius:16px;

    }



    #vw-output p{

        margin-bottom:18px;

    }

    #vw-output .vw-paragraph{

        margin-bottom:12px;

    }



    #vw-output h1{

        font-size:1.55rem;

        margin:

        24px 0 14px;

    }



    #vw-output h2{

        font-size:1.3rem;

        margin:

        22px 0 12px;

    }



    #vw-output h3{

        font-size:1.12rem;

        margin:

        18px 0 10px;

    }



    #vw-output ul,
    #vw-output ol{

        margin-left:18px;

        margin-bottom:16px;

    }



    #vw-output li{

        margin-bottom:8px;

    }



    #vw-output blockquote{

        margin:

        18px 0;


        padding:

        12px 14px;

    }



    #vw-output table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }


}





/* =========================================================
   PWA Install Floating Button
   ========================================================= */


.vw-install-btn{

    position:fixed;

    right:20px;

    bottom:20px;

    z-index:9999;


    padding:14px 20px;




    border-radius:999px;


    background:#111827;

    color:white;


    font-size:15px;

    font-weight:600;


 


    box-shadow:
    0 4px 12px rgba(0,0,0,.18);


 

}



.vw-install-btn:hover{

    transform:translateY(-3px);

}



.vw-install-btn:active{

    transform:scale(.96);

}



@media(max-width:768px){


    .vw-install-btn{

        right:16px;

        bottom:16px;

        width:auto;

        max-width:calc(100vw - 32px);

        font-size:14px;

    }

}


/* =========================================================
   MOBILE PAYMENT MODAL FIX
   Android PWA / Razorpay compatibility
   ========================================================= */


@media(max-width:640px){


    .vw-modal{

        padding:8px;

        align-items:flex-end;

    }



    .vw-modal-card{

        width:100%;

        max-width:none;

        border-radius:20px 20px 0 0;

        padding:24px;

        animation:none;

    }



    .vw-modal-actions{

        flex-direction:column;

        width:100%;

    }



    .vw-modal-actions button{

        width:100%;

    }


}


/* =========================================================
   Payment Cleanup
   ========================================================= */

body.vw-payment-open{

    overflow:hidden;

    touch-action:none;

}



/* =========================================================
   EDITOR TOOLBAR - PREMIUM
   ========================================================= */


.vw-editor-tools{

    margin:16px 0;

    border:1px solid var(--vw-border);

    border-radius:16px;

    background:var(--vw-surface);

    overflow:hidden;

}



.vw-editor-tools summary{

    padding:12px 16px;

    cursor:pointer;

    font-weight:700;

    color:var(--vw-text);

    user-select:none;

    list-style:none;

}



.vw-editor-tools summary::-webkit-details-marker{

    display:none;

}



.vw-editor-tools summary::before{

    content:"＋";

    margin-right:8px;

    font-weight:700;

}



.vw-editor-tools[open] summary::before{

    content:"−";

}




.vw-editor-toolbar{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    width:100%;

    overflow:hidden;

    padding:12px 16px 16px;

    border-top:1px solid var(--vw-border);

}


.vw-editor-toolbar::-webkit-scrollbar{

    display:none;

}




.vw-editor-tools{

    position:relative;

    z-index:20;

}


.vw-editor-toolbar button{

    min-width:42px;

    height:40px;

    padding:0 12px;

    border-radius:10px;

    border:1px solid var(--vw-border);

    background:#fff;

    color:var(--vw-text);

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:transform .15s ease,
               background .15s ease;

}



.vw-editor-toolbar button:hover{

    background:#f3f4f6;

}



.vw-editor-toolbar button:active{

    transform:scale(.96);

}



.vw-editor-toolbar button.active{

    background:var(--vw-primary);

    color:#fff;

    border-color:var(--vw-primary);

}



.vw-editor-toolbar input[type="color"]{

    width:42px;

    height:40px;

    padding:3px;

    border-radius:10px;

    border:1px solid var(--vw-border);

    cursor:pointer;

    background:#fff;

}




/* Mobile */

@media(max-width:600px){

    .vw-editor-tools{

        width:100%;

        max-width:100%;

        overflow:hidden;

    }


    .vw-editor-toolbar{

        gap:6px;

        padding:10px;

        width:100%;

        flex-wrap:wrap;

    }


    .vw-editor-toolbar button,
    .vw-editor-toolbar input[type="color"]{

        width:38px;

        min-width:38px;

        height:38px;

        padding:0;

        flex-shrink:0;

    }

}