* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Microsoft JhengHei",
        Arial,
        sans-serif;

    background:
        #f4f7fb;

    color:
        #172033;
}


.hero {
    background:
        linear-gradient(
            120deg,
            #101b38,
            #1748c7
        );

    color:
        white;

    padding:
        34px 24px;
}


.hero-inner {
    max-width:
        1200px;

    margin:
        0 auto;
}


.hero h1 {
    margin:
        0 0 8px 0;

    font-size:
        30px;
}


.hero p {
    margin:
        0;

    opacity:
        0.85;
}


.main {
    max-width:
        1200px;

    margin:
        28px auto;

    padding:
        0 18px;
}


.tool-card {
    background:
        white;

    border-radius:
        20px;

    padding:
        24px;

    box-shadow:
        0 8px 28px
        rgba(
            0,
            0,
            0,
            0.06
        );
}


.mode-tabs {
    display:
        flex;

    gap:
        12px;

    margin-bottom:
        18px;
}


.mode-tab {
    border:
        1px solid #d7deea;

    background:
        #f8fafc;

    border-radius:
        12px;

    padding:
        12px 22px;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;
}


.mode-tab.active {
    background:
        #163d9b;

    color:
        white;

    border-color:
        #163d9b;
}


.options-panel {
    background:
        #f7f9fd;

    border:
        1px solid #e1e7f0;

    border-radius:
        14px;

    padding:
        16px;

    margin-bottom:
        22px;
}


.checkbox-option {
    display:
        flex;

    gap:
        12px;

    align-items:
        flex-start;

    cursor:
        pointer;
}


.checkbox-option input {
    margin-top:
        4px;

    width:
        18px;

    height:
        18px;
}


.checkbox-option span {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.checkbox-option small {
    color:
        #667085;
}


.checkbox-option.compact span {
    display:
        block;
}


.signature-title {
    font-weight:
        700;

    margin-bottom:
        12px;
}


.radio-option {
    display:
        block;

    margin:
        10px 0;
}


.upload-area {
    margin-bottom:
        26px;
}


.upload-box {
    min-height:
        150px;

    border:
        2px dashed #b8c2d3;

    border-radius:
        16px;

    background:
        #fafcff;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    cursor:
        pointer;

    transition:
        0.2s ease;
}


.upload-box:hover {
    border-color:
        #1748c7;

    background:
        #f5f8ff;
}


.upload-icon {
    width:
        46px;

    height:
        46px;

    border-radius:
        50%;

    background:
        #1748c7;

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        28px;

    margin-bottom:
        10px;
}


.upload-title {
    font-size:
        18px;

    font-weight:
        700;
}


.upload-desc {
    text-align:
        center;

    font-size:
        13px;

    color:
        #718096;

    margin-top:
        6px;

    line-height:
        1.5;
}


.file-info {
    margin-top:
        12px;

    padding:
        10px 12px;

    background:
        #f3f6fb;

    border-radius:
        10px;

    color:
        #475467;
}


.process-btn {
    width:
        100%;

    margin-top:
        14px;

    padding:
        14px;

    border:
        none;

    border-radius:
        12px;

    background:
        #1748c7;

    color:
        white;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;
}


.process-btn:disabled {
    background:
        #aab4c4;

    cursor:
        not-allowed;
}


.status {
    margin-top:
        12px;

    padding:
        12px;

    border-radius:
        10px;
}


.status.loading,
.status.info {
    background:
        #eef4ff;

    color:
        #1748c7;
}


.status.success {
    background:
        #ecfdf3;

    color:
        #027a48;
}


.status.error {
    background:
        #fef3f2;

    color:
        #b42318;
}


.preview-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;
}


.preview-card {
    border:
        1px solid #e2e7ef;

    border-radius:
        16px;

    padding:
        14px;

    background:
        white;
}


.preview-title {
    font-weight:
        700;

    margin-bottom:
        10px;
}


.preview-box {
    width:
        100%;

    min-height:
        420px;

    border-radius:
        12px;

    overflow:
        hidden;

    background:
        #f3f4f6;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


.preview-box img {
    display:
        none;

    width:
        100%;

    height:
        100%;

    max-height:
        560px;

    object-fit:
        contain;
}


.preview-empty {
    color:
        #98a2b3;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


.checkerboard {
    background-color:
        #ffffff;

    background-image:
        linear-gradient(
            45deg,
            #e2e6ec 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            #e2e6ec 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            #e2e6ec 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            #e2e6ec 75%
        );

    background-size:
        24px 24px;

    background-position:
        0 0,
        0 12px,
        12px -12px,
        -12px 0;
}


.result-meta {
    margin-top:
        12px;

    color:
        #475467;
}


.download-btn {
    display:
        inline-block;

    margin-top:
        12px;

    padding:
        11px 16px;

    border-radius:
        10px;

    background:
        #111827;

    color:
        white;

    text-decoration:
        none;

    font-weight:
        700;
}


.hidden {
    display:
        none !important;
}


@media (
    max-width: 800px
) {

    .preview-grid {
        grid-template-columns:
            1fr;
    }

    .preview-box {
        min-height:
            300px;
    }

    .mode-tabs {
        flex-direction:
            column;
    }

}