.website-builder{

    max-width:1000px;

    margin:auto;

    padding:120px 20px;

    text-align:center;
}

#website-prompt{

    width:100%;

    height:150px;

    padding:15px;

    border-radius:15px;

    margin:20px 0;
}

#website-type{

    width:100%;

    padding:15px;

    border-radius:15px;

    margin-bottom:20px;
}

#generate-btn{

    width:100%;

    padding:15px;

    border:none;

    border-radius:15px;

    cursor:pointer;
}

#generated-code{

    width:100%;

    height:400px;

    margin-top:20px;
}

.tabs{
    display:flex;
    gap:8px;
    margin:20px 0;
}

.tab-btn{
    padding:12px 20px;
    border:none;
    border-radius:10px 10px 0 0;
    background:#1f2937;
    color:white;
    cursor:pointer;
    font-weight:600;
    transition:0.3s;
}

.tab-btn:hover{
    transform:translateY(-2px);
}

.tab-btn.active{
    background:#3b82f6;
}

.code-section{
    position:relative;
}

.copy-btn{
    position:absolute;
    top:10px;
    right:10px;
    border:none;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
    background:#3b82f6;
    color:white;
    z-index:10;
}

#html-code,
#css-code,
#js-code{
    width:100%;
    height:600px;
    padding:50px 15px 15px;
    resize:none;
    border-radius:0 10px 10px 10px;
    font-family:monospace;
    font-size:14px;
}

.preview-controls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:20px;
}

#run-btn{
    padding:12px 25px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
}

#preview-container{
    display:none;
    margin-top:20px;
}

#preview-frame{
    width:100%;
    height:700px;
    border:none;
    border-radius:10px;
    background:white;
}

.toggle-switch{
    display:flex;
    align-items:center;
    gap:12px;
}

.toggle-switch input{
    display:none;
}

.slider{
    position:relative;
    width:70px;
    height:36px;
    background:#333;
    border-radius:50px;
    cursor:pointer;
}

.slider::before{
    content:"";
    position:absolute;
    width:28px;
    height:28px;
    background:white;
    border-radius:50%;
    top:4px;
    left:4px;
    transition:0.3s;
}

#view-toggle:checked + .slider::before{
    transform:translateX(34px);
}

.toggle-text{
    font-weight:600;
}

#ai-provider{
    width:100%;
    padding:15px;
    border-radius:15px;
    margin-bottom:20px;
}

.view-switch{
    display:flex;
    justify-content:center;
    margin-top:20px;
}

.view-btn{
    padding:12px 25px;
    border:none;
    cursor:pointer;
    background:#1f2937;
    color:white;
}

.active-view{
    background:#3b82f6;
}