/* ── WebP 转换工具页面专属样式（适配 AeroCore CSS 变量） ── */

.wc-hero {
    text-align: center;
    padding: 32px 24px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    margin-bottom: 14px;
}
.wc-hero h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--color-text, #222);
}
.wc-hero p {
    font-size: 14px;
    color: var(--color-text-secondary, #999);
    margin: 0;
}

.wc-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 24px 32px;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .wc-card { padding: 18px 16px; }
}

.wc-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08));
    color: var(--color-text, #222);
}
.wc-section-title::before {
    content: '';
    width: 4px;
    height: 17px;
    background: var(--theme-color, #409EFF);
    border-radius: 2px;
    flex-shrink: 0;
}

/* 上传区域 */
.wc-upload-area {
    border: 2px dashed var(--color-border, #ddd);
    border-radius: var(--border-radius, 8px);
    padding: 48px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s, background .25s;
    background: var(--bg-body, #f7f8fa);
    user-select: none;
}
.wc-upload-area:hover,
.wc-upload-area.drag-over {
    border-color: var(--theme-color, #409EFF);
    background: rgba(64,158,255,.05);
}
.wc-upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    color: var(--theme-color, #409EFF);
    opacity: .75;
    display: block;
}
.wc-upload-area p {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text, #555);
}
.wc-upload-hint {
    font-size: 13px;
    color: var(--color-text-secondary, #aaa);
    margin: 0 !important;
}
#wc-file-input { display: none; }

/* 控制区网格 */
.wc-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 16px;
    padding: 18px;
    background: var(--bg-body, #f7f8fa);
    border-radius: var(--border-radius, 8px);
    margin-bottom: 0;
}
@media (max-width: 720px) {
    .wc-controls-grid { grid-template-columns: 1fr 1fr; }
    .wc-control-group--quality { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .wc-controls-grid { grid-template-columns: 1fr; }
    .wc-control-group--quality { grid-column: auto; }
}
.wc-control-group { display: flex; flex-direction: column; gap: 8px; }
.wc-ctrl-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #333);
    display: flex;
    align-items: center;
    gap: 6px;
}
.wc-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--border-radius-sm, 4px);
    border: 1px solid var(--color-border, #ddd);
    background: var(--bg-card, #fff);
    color: var(--color-text, #333);
    font-size: 14px;
    cursor: pointer;
    outline: none;
    transition: border-color .2s;
}
.wc-select:focus { border-color: var(--theme-color, #409EFF); }
.wc-control-group--quality input[type=range] {
    width: 100%;
    accent-color: var(--theme-color, #409EFF);
    cursor: pointer;
}

/* 自定义尺寸输入 */
.wc-custom-size {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 18px;
    background: var(--bg-body, #f7f8fa);
    border-radius: var(--border-radius, 8px);
}
.wc-input-number {
    width: 140px;
    padding: 7px 10px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--border-radius-sm, 4px);
    background: var(--bg-card, #fff);
    color: var(--color-text, #333);
    font-size: 14px;
    outline: none;
}
.wc-input-number:focus { border-color: var(--theme-color, #409EFF); }

/* 质量徽章 */
.wc-quality-badge {
    min-width: 44px;
    height: 26px;
    background: var(--theme-color, #409EFF);
    color: #fff;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

/* 按钮 */
.wc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 22px;
    border-radius: var(--border-radius-sm, 4px);
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
    line-height: 1;
    text-decoration: none;
}
.wc-btn:hover   { opacity: .85; }
.wc-btn:active  { transform: scale(.97); }
.wc-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.wc-btn-primary  { background: var(--theme-color, #409EFF); color: #fff; }
.wc-btn-success  { background: var(--theme-color, #409EFF); color: #fff; }

/* 状态提示 */
.wc-status {
    padding: 10px 14px;
    border-radius: var(--border-radius-sm, 4px);
    font-size: 14px;
    margin-bottom: 14px;
    display: none;
}
.wc-status.is-success {
    background: rgba(64,158,255,.1);
    color: var(--theme-color, #409EFF);
    border: 1px solid rgba(64,158,255,.25);
    display: block;
}
.wc-status.is-error {
    background: rgba(231,76,60,.1);
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,.2);
    display: block;
}

/* 预览双栏 */
.wc-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}
@media (max-width: 580px) {
    .wc-preview-grid { grid-template-columns: 1fr; }
}
.wc-preview-box {
    border: 1px solid var(--color-border, rgba(0,0,0,0.08));
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
}
.wc-preview-box__head {
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #888);
    background: var(--bg-card);
    border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.06));
}
.wc-preview-box__img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 12px;
    /* 棋盘格背景，便于观察透明通道 */
    background: repeating-conic-gradient(#e2e2e2 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}
.wc-preview-box__img img {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.wc-preview-box__foot {
    padding: 9px 13px;
    background: var(--bg-card);
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.06));
    font-size: 13px;
    color: var(--color-text-secondary, #888);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wc-preview-box__foot .size {
    font-weight: 600;
    color: var(--color-text, #444);
}
.wc-save-badge {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.wc-save-badge.saving { background: rgba(39,174,96,.12); color: #27ae60; }
.wc-save-badge.worse  { background: rgba(231,76,60,.10); color: #e74c3c; }

/* 说明区 */
.wc-info {
    margin-top: 6px;
    padding: 12px 16px;
    border-radius: var(--border-radius, 8px);
    background: rgba(64,158,255,.05);
    border: 1px solid rgba(64,158,255,.15);
    font-size: 13px;
    color: var(--color-text-secondary, #888);
    line-height: 1.9;
}
.wc-info strong { color: var(--theme-color, #409EFF); }

.wc-hidden { display: none !important; }

/* ── 手机端响应式 ── */
@media (max-width: 480px) {
    .wc-hero { padding: 22px 16px; }
    .wc-hero h1 { font-size: 20px; }
    .wc-upload-area { padding: 32px 14px; }
    .wc-quality-row { gap: 8px; }
    .wc-btn { width: 100%; justify-content: center; }
    .wc-preview-box__foot { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── 暗色模式（AeroCore 使用 html[data-theme="dark"]） ── */
html[data-theme="dark"] .wc-hero h1 { color: #e8eaed; }
html[data-theme="dark"] .wc-hero p { color: #888; }
html[data-theme="dark"] .wc-upload-area {
    background: #1e1e1e;
    border-color: #3a3a3a;
}
html[data-theme="dark"] .wc-upload-area:hover,
html[data-theme="dark"] .wc-upload-area.drag-over {
    border-color: var(--theme-color, #409EFF);
    background: rgba(64,158,255,.08);
}
html[data-theme="dark"] .wc-upload-area p { color: #c8cdd2; }
html[data-theme="dark"] .wc-upload-hint { color: #666; }
html[data-theme="dark"] .wc-section-title {
    color: #c8cdd2;
    border-bottom-color: #2e2e2e;
}
html[data-theme="dark"] .wc-ctrl-label { color: #c8cdd2; }
html[data-theme="dark"] .wc-controls-grid { background: #1a1a1a; }
html[data-theme="dark"] .wc-custom-size { background: #1a1a1a; }
html[data-theme="dark"] .wc-select {
    background: #252525;
    border-color: #3a3a3a;
    color: #c8cdd2;
}
html[data-theme="dark"] .wc-input-number {
    background: #252525;
    border-color: #3a3a3a;
    color: #c8cdd2;
}
html[data-theme="dark"] .wc-status.is-success {
    background: rgba(64,158,255,.12);
    border-color: rgba(64,158,255,.3);
}
html[data-theme="dark"] .wc-status.is-error {
    background: rgba(231,76,60,.15);
    border-color: rgba(231,76,60,.3);
}
html[data-theme="dark"] .wc-preview-box { border-color: #2e2e2e; }
html[data-theme="dark"] .wc-preview-box__head {
    background: #1a1a1a;
    border-bottom-color: #2e2e2e;
    color: #888;
}
html[data-theme="dark"] .wc-preview-box__img {
    background: repeating-conic-gradient(#2a2a2a 0% 25%, #1e1e1e 0% 50%) 0 0 / 16px 16px;
}
html[data-theme="dark"] .wc-preview-box__foot {
    background: #1a1a1a;
    border-top-color: #2e2e2e;
    color: #777;
}
html[data-theme="dark"] .wc-preview-box__foot .size { color: #c8cdd2; }
html[data-theme="dark"] .wc-save-badge.saving { background: rgba(39,174,96,.18); }
html[data-theme="dark"] .wc-save-badge.worse  { background: rgba(231,76,60,.15); }
html[data-theme="dark"] .wc-info {
    background: rgba(64,158,255,.07);
    border-color: rgba(64,158,255,.2);
    color: #888;
}