:root {
    --bg: #0d0e16;
    --surface: #171926;
    --surface2: #1e2133;
    --border: #2a2d40;

    --text: #f1f2f7;
    --dim: #9396ad;

    --accent: #ff3d71;
    --accent2: #7c5cff;
}


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


body {

    min-height:100vh;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,61,113,.25), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(124,92,255,.25), transparent 40%),
        var(--bg);

    color:var(--text);

    font-family:
        Inter,
        Segoe UI,
        sans-serif;

    padding:25px;

}



/* ================= Modal ================= */


.modal {

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(8px);

    z-index:10;

}



.modal-box {

    width:min(900px,95%);

    background:var(--surface);

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

    border-radius:22px;

    padding:35px;

}



.modal-box h2 {

    font-size:28px;

    margin-bottom:8px;

}


.subtitle {

    color:var(--dim);

    margin-bottom:30px;

}



/* Setup layout */


.setup-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}



.image-upload-card,
.topics-card {

    background:var(--surface2);

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

    border-radius:20px;

    padding:22px;

}



.image-upload-card > label,
.topics-card label {

    display:block;

    color:var(--dim);

    margin-bottom:10px;

}



/* Drop zone */


.drop-zone {

    height:320px;

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

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.2s;

    color:var(--dim);

}



.drop-zone.dragover {

    border-color:var(--accent);

    background:rgba(255,61,113,.1);

}



.upload-content {

    text-align:center;

}



.upload-icon {

    font-size:42px;

    margin-bottom:15px;

}



.upload-content span {

    display:block;

    margin:10px;

}



.upload-btn {

    display:inline-block;

    background:var(--accent);

    color:white;

    padding:10px 20px;

    border-radius:12px;

    cursor:pointer;

}



.drop-zone img {

    max-width:90%;

    max-height:220px;

    border-radius:14px;

}



/* Inputs */


.field {

    margin-bottom:18px;

}



.field textarea {

    width:100%;

    height:110px;

}



textarea {

    background:var(--surface);

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

    border-radius:16px;

    padding:18px;

    color:var(--text);

    font-size:16px;

    line-height:1.7;

    resize:vertical;

    outline:none;

}



textarea:focus {

    border-color:var(--accent);

    box-shadow:
    0 0 0 4px rgba(255,61,113,.15);

}



/* Buttons */


button {

    border:none;

    background:var(--accent);

    color:white;

    padding:13px 25px;

    border-radius:12px;

    font-size:16px;

    cursor:pointer;

    transition:.2s;

}



button:hover {

    transform:translateY(-2px);

    filter:brightness(1.1);

}



.modal-box > button {

    width:100%;

    margin-top:25px;

    height:50px;

}





/* ================= Main ================= */


.container {

    max-width:1100px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:25px;

}



/* Counters */


.topbar {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

}



.counter {

    background:rgba(23,25,38,.85);

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

    border-radius:18px;

    padding:18px;

    text-align:center;

}



.counter span {

    color:var(--dim);

    display:block;

    font-size:.9rem;

}



.counter strong {

    display:block;

    margin-top:8px;

    font-size:2rem;

    color:var(--accent);

}





/* Tasks */


.task {

    background:rgba(23,25,38,.85);

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

    border-radius:20px;

    padding:25px;

}



.task h2 {

    margin-bottom:15px;

}



.topic {

    background:var(--surface2);

    border-radius:12px;

    padding:15px;

    margin-bottom:20px;

}



/* Task 1 */


.task1-layout {

    display:grid;

    grid-template-columns:40% 60%;

    gap:20px;

}



.image-box {

    background:var(--surface2);

    border-radius:16px;

    overflow:hidden;

    min-height:350px;

    display:flex;

    justify-content:center;

    align-items:center;

}



.image-box img {

    width:100%;

    height:100%;

    object-fit:contain;

}



#taskImage {

    display:none;

}



.task1-layout textarea {

    min-height:350px;

}



/* Task 2 */


.essay2 {

    width:100%;

    min-height:400px;

}



/* Buttons */


.buttons {

    display:flex;

    justify-content:center;

    gap:15px;

}





/* Responsive */


@media(max-width:800px){


    .setup-grid {

        grid-template-columns:1fr;

    }


    .topbar {

        grid-template-columns:1fr 1fr;

    }


    .task1-layout {

        grid-template-columns:1fr;

    }


}



@media(max-width:500px){


    body {

        padding:12px;

    }


    .topbar {

        grid-template-columns:1fr;

    }


    .modal-box {

        padding:20px;

    }


}