:root {

    --bg:
        #f5f6f8;

    --card:
        #ffffff;

    --border:
        #e2e5e9;

    --text:
        #20242a;

    --muted:
        #737b86;

    --primary:
        #3478f6;

    --primary-dark:
        #2864d4;

    --success:
        #20a464;

    --success-bg:
        #edf9f3;

    --warning:
        #d98a00;

    --warning-bg:
        #fff8e8;

    --danger:
        #d64545;

    --danger-bg:
        #fff0f0;

    --panel:
        #f7f8fa;

    --shadow:
        0 2px 10px rgba(0, 0, 0, 0.05);

}


* {
    box-sizing: border-box;
}


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


body {

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Microsoft YaHei",
        "PingFang SC",
        Arial,
        sans-serif;

    font-size:
        14px;

}


button,
input,
a {
    font-family:
        inherit;
}


button {
    cursor:
        pointer;
}


button:disabled {
    cursor:
        not-allowed;
}


/* ============================================================
   页面
   ============================================================ */
.earser-max-content {
    margin-left: 240px;
    min-height: 100vh;
}
.earser-max-page {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
    padding: 32px 0 60px;
}


/* ============================================================
   Header
   ============================================================ */

.earser-max-header {

    margin-bottom:
        20px;

}


.earser-max-header h1 {

    margin:
        0 0 6px;

    font-size:
        28px;

    line-height:
        1.35;

}


.earser-max-subtitle {

    margin:
        0 0 8px;

    color:
        var(--muted);

    font-size:
        15px;

}


.earser-max-privacy {

    margin:
        0;

    color:
        var(--success);

    font-size:
        13px;

}


/* ============================================================
   Card
   ============================================================ */

.earser-max-card {

    margin-bottom:
        16px;

    padding:
        18px;

    background:
        var(--card);

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

    border-radius:
        12px;

    box-shadow:
        var(--shadow);

}


.card-title {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        14px;

    font-size:
        16px;

    font-weight:
        600;

}


.card-title-status {

    color:
        var(--muted);

    font-size:
        13px;

    font-weight:
        400;

}


.capability-list {

    display:
        grid;

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

    gap:
        12px;

}


.capability-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        13px;

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

    border-radius:
        8px;

    background:
        var(--panel);

}


.capability-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        22px;

    height:
        22px;

    flex:
        0 0 22px;

    border-radius:
        50%;

    font-weight:
        700;

    font-size:
        13px;

}


.capability-item.checking
.capability-icon {

    color:
        #777;

    background:
        #e6e8eb;

}


.capability-item.passed {

    border-color:
        #bce6d0;

    background:
        var(--success-bg);

}


.capability-item.passed
.capability-icon {

    color:
        #fff;

    background:
        var(--success);

}


.capability-item.failed {

    border-color:
        #f0d39b;

    background:
        var(--warning-bg);

}


.capability-item.failed
.capability-icon {

    color:
        #fff;

    background:
        var(--warning);

}


.capability-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.capability-text strong {

    font-size:
        14px;

}


.capability-text span {

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.5;

}


.speed-estimate {

    margin-top:
        12px;

    padding:
        10px 12px;

    border-radius:
        7px;

    background:
        #f1f5ff;

    color:
        #3563ad;

    font-size:
        13px;

}


.model-cache-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        24px;

    height:
        24px;

    border-radius:
        50%;

    font-weight:
        700;

}


.model-cache-icon.checking {

    background:
        #e6e8eb;

    color:
        #777;

}


.model-cache-icon.passed {

    background:
        var(--success);

    color:
        #fff;

}


.model-cache-icon.failed {

    background:
        var(--warning);

    color:
        #fff;

}


.model-cache-message {

    margin-bottom:
        6px;

    font-size:
        14px;

    line-height:
        1.6;

}


.model-cache-detail {

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.6;

}


.model-progress-wrap {

    margin-top:
        12px;

}


.model-progress-track {

    height:
        8px;

    overflow:
        hidden;

    background:
        #e8ebef;

    border-radius:
        4px;

}


.model-progress-bar {

    width:
        0;

    height:
        100%;

    background:
        var(--primary);

    transition:
        width 0.15s ease;

}


.model-progress-text {

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        12px;

    font-variant-numeric:
        tabular-nums;

}


/* ============================================================
   Workspace
   ============================================================ */

.workspace-title {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        15px;

}


.workspace-title strong {

    display:
        block;

    margin-bottom:
        3px;

}


.workspace-tip {

    color:
        var(--muted);

    font-size:
        12px;

}


.image-info {

    color:
        var(--muted);

    font-size:
        12px;

    font-variant-numeric:
        tabular-nums;

}


.workspace {

    display:
        grid;

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

    gap:
        18px;

}


.image-panel {

    min-width:
        0;

}


.panel-title {

    margin-bottom:
        8px;

    color:
        var(--muted);

    font-size:
        13px;

}


.canvas-wrap {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        #eef0f3;

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

    border-radius:
        8px;

}


.canvas-wrap canvas {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

}


#image-canvas {

    z-index:
        1;

}


#mask-canvas {

    z-index:
        2;

    cursor:
        crosshair;

    touch-action:
        none;

}


.result-wrap {

    background:
        #f0f1f3;

}

.result-image {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    display: block;
}


.canvas-placeholder {

    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #9299a3;

    font-size:
        13px;

    pointer-events:
        none;

}

.tool-controls {

    margin-top:
        18px;

    padding-top:
        18px;

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

}


.control-row {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-bottom:
        12px;

}


.control-row:last-child {

    margin-bottom:
        0;

}


.upload-button,
.download-button,
.small-button,
.tool-controls button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        0 15px;

    border:
        1px solid #d8dce2;

    border-radius:
        7px;

    background:
        #fff;

    color:
        var(--text);

    text-decoration:
        none;

    font-size:
        13px;

}


.upload-button {

    background:
        var(--primary);

    border-color:
        var(--primary);

    color:
        #fff;

}


.upload-button:hover {

    background:
        var(--primary-dark);

}


.tool-controls button:hover:not(:disabled) {

    background:
        #f4f5f7;

}


.tool-controls button:disabled {

    opacity:
        0.45;

}


.brush-control {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--muted);

    font-size:
        13px;

}


.brush-control input {

    width:
        180px;

}


.range-value {

    display:
        inline-block;

    min-width:
        30px;

    color:
        var(--text);

    font-variant-numeric:
        tabular-nums;

}


.action-row {

    margin-top:
        5px;

}


.run-button {

    min-width:
        130px;

    border-color:
        var(--primary) !important;

    background:
        var(--primary) !important;

    color:
        #fff !important;

    font-weight:
        600;

}


.run-button:hover:not(:disabled) {

    background:
        var(--primary-dark) !important;

}


.download-button {

    border-color:
        #a7d7bc;

    background:
        var(--success-bg);

    color:
        var(--success);

}


.inference-status {

    margin-top:
        18px;

    padding:
        12px;

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

    border-radius:
        8px;

    background:
        var(--panel);

}


.status-line {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        22px;

}


.status-indicator {

    width:
        9px;

    height:
        9px;

    flex:
        0 0 9px;

    border-radius:
        50%;

    background:
        #9ba1aa;

}


.status-indicator.ready {

    background:
        var(--success);

}


.status-indicator.running {

    background:
        var(--primary);

    animation:
        statusPulse 1s infinite;

}


.status-indicator.success {

    background:
        var(--success);

}


.status-indicator.error {

    background:
        var(--danger);

}


@keyframes statusPulse {

    0% {
        opacity:
            0.35;
    }

    50% {
        opacity:
            1;
    }

    100% {
        opacity:
            0.35;
    }

}


.progress-track {

    height:
        8px;

    margin-top:
        10px;

    overflow:
        hidden;

    background:
        #e4e7eb;

    border-radius:
        4px;

}


.progress-bar {

    width:
        0;

    height:
        100%;

    background:
        var(--primary);

    transition:
        width 0.15s ease;

}


.progress-detail {

    min-height:
        18px;

    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        12px;

    font-variant-numeric:
        tabular-nums;

}


.test-card {

    background:
        #fafbfc;

}


.small-button {

    min-height:
        30px;

    padding:
        0 10px;

    font-size:
        12px;

}


.debug-summary {

    padding:
        10px;

    overflow:
        hidden;

    background:
        #f0f2f5;

    border-radius:
        6px;

    color:
        #4e5661;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:
        11px;

    line-height:
        1.5;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


.debug-log {

    max-height:
        400px;

    margin:
        10px 0 0;

    padding:
        12px;

    overflow:
        auto;

    background:
        #171a1f;

    border-radius:
        7px;

    color:
        #d9e2ef;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:
        11px;

    line-height:
        1.55;

    white-space:
        pre;

}


.explanation-card h2 {

    margin:
        0 0 16px;

    font-size:
        18px;

}


.benefit-list {

    display:
        grid;

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

    gap:
        14px;

}


.benefit-item {

    display:
        flex;

    gap:
        10px;

}


.benefit-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        22px;

    height:
        22px;

    flex:
        0 0 22px;

    border-radius:
        50%;

    background:
        var(--success-bg);

    color:
        var(--success);

    font-weight:
        700;

}


.benefit-item strong {

    display:
        block;

    margin-bottom:
        5px;

}


.benefit-item p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.6;

}


.technical-note {

    margin-top:
        18px;

    padding:
        12px;

    border-radius:
        7px;

    background:
        var(--warning-bg);

    color:
        #765817;

    font-size:
        12px;

    line-height:
        1.6;

}


.hidden {

    display:
        none !important;

}


@media (
    max-width: 800px
) {

    .earser-max-page {

        width:
            calc(
                100% - 20px
            );

        padding-top:
            20px;

    }


    .earser-max-header h1 {

        font-size:
            23px;

    }


    .capability-list {

        grid-template-columns:
            1fr;

    }


    .workspace {

        grid-template-columns:
            1fr;

    }


    .benefit-list {

        grid-template-columns:
            1fr;

    }


    .brush-control {

        width:
            100%;

    }


    .brush-control input {

        flex:
            1;

        width:
            auto;

    }

}


@media (
    max-width: 480px
) {

    .earser-max-card {

        padding:
            14px;

    }


    .control-row {

        align-items:
            stretch;

    }


    .upload-button,
    .tool-controls button,
    .download-button {

        flex:
            1;

    }

}