:root {

    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;

    --text: #111827;
    --muted: #64748b;

    --border: #e2e8f0;

    --primary: #e11d48;
    --primary-dark: #be123c;

    --success: #16a34a;
    --danger: #dc2626;

    --shadow:
        0 15px 40px rgba(15, 23, 42, 0.08);

}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {

    font-family:
        Inter,
        Arial,
        sans-serif;

    background: var(--bg);

    color: var(--text);
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


/* HEADER */

.header {

    height: 72px;

    padding:
        0 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        var(--surface);

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


.brand {

    display: flex;

    align-items: center;

    gap: 12px;
}


.brand-logo {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        var(--primary);

    color:
        white;

    font-weight: 800;
}


.brand h1 {

    margin: 0;

    font-size: 17px;
}


.brand p {

    margin:
        3px 0 0;

    font-size: 11px;

    color:
        var(--muted);
}


.theme-btn {

    width: 40px;
    height: 40px;

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

    border-radius: 9px;

    background:
        var(--surface);

    color:
        var(--text);
}


/* MAIN */

.main {

    width:
        min(1100px, calc(100% - 30px));

    margin:
        0 auto;

    padding:
        45px 0 60px;
}


.hero {

    text-align:
        center;

    margin-bottom:
        32px;
}


.hero h2 {

    margin:
        0 0 8px;

    font-size:
        clamp(28px, 5vw, 42px);
}


.hero p {

    margin: 0;

    color:
        var(--muted);
}


/* TOOLS */

.tools {

    display:
        grid;

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

    gap:
        10px;

    margin-bottom:
        25px;
}


.tool-card {

    min-height:
        115px;

    padding:
        15px 10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

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

    border-radius:
        12px;

    background:
        var(--surface);

    color:
        var(--text);

    transition:
        .2s;
}


.tool-card:hover {

    border-color:
        var(--primary);

    transform:
        translateY(-2px);
}


.tool-card.active {

    border-color:
        var(--primary);

    background:
        rgba(225, 29, 72, .05);

}


.tool-icon {

    font-size:
        24px;
}


.tool-card strong {

    font-size:
        12px;
}


.tool-card small {

    color:
        var(--muted);

    font-size:
        9px;

    text-align:
        center;
}


/* CONVERTER */

.converter {

    max-width:
        780px;

    margin:
        auto;

    padding:
        25px;

    background:
        var(--surface);

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

    border-radius:
        18px;

    box-shadow:
        var(--shadow);
}


/* DROP */

.drop-zone {

    min-height:
        285px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

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

    border-radius:
        15px;

    transition:
        .2s;
}


.drop-zone.dragging {

    border-color:
        var(--primary);

    background:
        rgba(225, 29, 72, .04);
}


.upload-symbol {

    width:
        65px;

    height:
        65px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        15px;

    border-radius:
        18px;

    background:
        rgba(225, 29, 72, .1);

    color:
        var(--primary);

    font-size:
        35px;

    font-weight:
        700;
}


.drop-zone h3 {

    margin:
        0 0 7px;

    font-size:
        20px;
}


.drop-zone p {

    margin:
        0 0 17px;

    color:
        var(--muted);

    font-size:
        13px;
}


.choose-btn {

    padding:
        11px 20px;

    border:
        0;

    border-radius:
        8px;

    background:
        var(--primary);

    color:
        white;

    font-weight:
        600;
}


.accepted {

    margin-top:
        13px;

    color:
        var(--muted);

    font-size:
        10px;
}


/* FILE */

.file-box {

    margin-top:
        15px;

    padding:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

    border-radius:
        10px;

    background:
        var(--surface-2);
}


.file-left {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.file-icon {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        10px;

    font-weight:
        800;
}


.file-left strong {

    display:
        block;

    max-width:
        450px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        13px;
}


.file-left span {

    display:
        block;

    margin-top:
        3px;

    font-size:
        10px;

    color:
        var(--muted);
}


.remove-btn {

    width:
        34px;

    height:
        34px;

    border:
        0;

    border-radius:
        7px;

    background:
        var(--surface);

    color:
        var(--danger);

    font-size:
        20px;
}


/* OPTIONS */

.options {

    margin-top:
        15px;
}


.option label {

    display:
        block;

    margin-bottom:
        7px;

    font-size:
        11px;

    color:
        var(--muted);
}


.format-display {

    padding:
        12px;

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

    border-radius:
        8px;

    background:
        var(--surface-2);

    font-weight:
        700;

    font-size:
        13px;
}


/* CONVERT */

.convert-btn {

    width:
        100%;

    height:
        48px;

    margin-top:
        18px;

    border:
        0;

    border-radius:
        9px;

    background:
        var(--primary);

    color:
        white;

    font-weight:
        700;

    font-size:
        14px;
}


.convert-btn:hover:not(:disabled) {

    background:
        var(--primary-dark);
}


.convert-btn:disabled {

    opacity:
        .45;

    cursor:
        not-allowed;
}


/* PROGRESS */

.progress-box {

    margin-top:
        22px;
}


.progress-top {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        8px;

    font-size:
        11px;

    color:
        var(--muted);
}


.progress-track {

    height:
        9px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        var(--border);
}


.progress-bar {

    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--primary);

    transition:
        width .3s;
}


/* RESULT */

.result-box {

    margin-top:
        22px;

    padding:
        25px;

    text-align:
        center;

    border:
        1px solid #bbf7d0;

    border-radius:
        12px;

    background:
        #f0fdf4;
}


.success-icon {

    width:
        45px;

    height:
        45px;

    margin:
        0 auto 10px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--success);

    color:
        white;

    font-weight:
        800;
}


.result-box h3 {

    margin:
        0 0 5px;
}


.result-box p {

    margin:
        0 0 15px;

    color:
        var(--muted);

    font-size:
        12px;
}


.download-btn {

    display:
        inline-flex;

    padding:
        11px 22px;

    border-radius:
        8px;

    background:
        var(--success);

    color:
        white;

    text-decoration:
        none;

    font-weight:
        700;

    font-size:
        13px;
}


/* ERROR */

.error-box {

    margin-top:
        20px;

    padding:
        15px;

    border:
        1px solid #fecaca;

    border-radius:
        9px;

    background:
        #fef2f2;

    color:
        var(--danger);

    font-size:
        12px;
}


.error-box p {

    margin:
        5px 0 0;
}


/* PRIVACY */

.privacy {

    max-width:
        780px;

    margin:
        20px auto 0;

    display:
        flex;

    gap:
        12px;

    padding:
        15px;

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

    border-radius:
        10px;

    background:
        var(--surface);

    color:
        var(--muted);

    font-size:
        11px;
}


.privacy p {

    margin:
        4px 0 0;

    line-height:
        1.5;
}


/* FOOTER */

.footer {

    padding:
        20px 30px;

    display:
        flex;

    justify-content:
        space-between;

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

    color:
        var(--muted);

    font-size:
        10px;
}


/* UTILITY */

.hidden {
    display:
        none !important;
}


/* DARK */

body.dark {

    --bg:
        #0b1120;

    --surface:
        #111827;

    --surface-2:
        #1e293b;

    --text:
        #f8fafc;

    --muted:
        #94a3b8;

    --border:
        #334155;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .tools {

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

    }

}


@media (max-width: 600px) {

    .header {

        padding:
            0 15px;

    }


    .main {

        width:
            calc(100% - 20px);

        padding-top:
            30px;

    }


    .tools {

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

    }


    .converter {

        padding:
            15px;

    }


    .file-left strong {

        max-width:
            190px;

    }


    .footer {

        padding:
            15px;

        flex-direction:
            column;

        gap:
            5px;

    }

}