:root {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #222;
    background: #f7f8fb;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

header {
    margin-bottom: 12px
}

h1 {
    margin: 0 0 6px 0;
    font-size: 1.4rem
}

main {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start
}

@media (max-width:820px) {
    main {
        grid-template-columns: 1fr
    }
}

.editor {
    display: flex;
    flex-direction: column
}

textarea {
    width: 100%;
    min-height: 320px;
    height: calc(100vh - 200px);
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    resize: vertical;
    font-size: 1rem;
    background: #fff;
    line-height: 1.6
}

.controls {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

button {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #cfd6e3;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
}

.flag {
    padding: 1px 2px;
    border-radius: 6px;
    border: 1px solid #cfd6e3;
    background: #fff;
    cursor: pointer
    
}

button:hover {
    /* 按钮鼠标悬停颜色 */
    background: #f0f4ff30;
}

/* 模式选择样式 */
.mode select {
    margin-top: 6px;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid #d6dbe8;
    background: #fff
}

.detected {
    display: block;
    margin-top: 6px;
    color: #2b6cb0;
    font-weight: 600;
    font-size: 0.9rem
}

/* 竖屏优化：表单与面板堆叠，textarea 更高 */
@media (orientation: portrait),
(max-width:820px) {
    main {
        grid-template-columns: 1fr;
        gap: 12px
    }

    textarea {
        min-height: 150px;
        height: calc(100vh - 480px);
    }

    .controls {
        flex-direction: column;
        align-items: stretch
    }

    .controls button {
        width: 100%
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .mode {
        grid-column: 1 / -1
    }
}

.stats {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e6e9f2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.stat {
    display: flex;
    flex-direction: column;
    padding: 6px
}

.label {
    font-size: .85rem;
    color: #666
}

.stat span:last-child {
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: 4px
}

footer {
    margin-top: 18px;
    color: #888;
    font-size: .85rem
}