/**
 * 工具页统一配色 — 对齐 www/style.css 全站蓝青主题
 * 须在内联 <style> 之后加载
 */

body.has-tool-header {
    --primary: #0066cc;
    --primary-dark: #0052a3;
    --secondary: #00d4ff;
    --text-dark: #1a1a1a;
    --text-light: #666;
    --bg-light: #f8f9fa;
    --border: #e0e0e0;
    --success: #10b981;
    --error: #ef4444;
    /* 兼容 A3 等页面的 --accent 变量 */
    --accent: var(--primary);
    --accent-dark: var(--primary-dark);
    --accent-light: #e7f3ff;
    --accent-muted: #0052a3;
    --tool-info-bg: #e7f3ff;
    --tool-info-text: #0052a3;
    --tool-upload-hover: #f0f4ff;
    --tool-upload-drag: #e8f0ff;
    --tool-shadow: rgba(0, 102, 204, 0.12);
}

body.has-tool-header {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: var(--text-dark);
}

/* 卡片页渐变标题区 */
body.has-tool-header .container > .header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #fff !important;
}

/* 独立页 .page-title */
body.has-tool-header .page-title {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.has-tool-header .info-box {
    background: var(--tool-info-bg) !important;
    border-left-color: var(--primary) !important;
    color: var(--tool-info-text) !important;
}

body.has-tool-header .upload-area {
    border-color: var(--primary) !important;
    background: var(--bg-light) !important;
}

body.has-tool-header .upload-area:hover {
    border-color: var(--primary-dark) !important;
    background: var(--tool-upload-hover) !important;
}

body.has-tool-header .upload-area.dragover {
    border-color: var(--primary-dark) !important;
    background: var(--tool-upload-drag) !important;
}

body.has-tool-header .btn-primary,
body.has-tool-header button.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.has-tool-header .btn-primary:hover:not(:disabled),
body.has-tool-header button.btn-primary:hover:not(:disabled) {
    box-shadow: 0 10px 20px var(--tool-shadow) !important;
}

body.has-tool-header .btn-secondary,
body.has-tool-header button.btn-secondary {
    color: var(--primary) !important;
    border-color: var(--border) !important;
}

body.has-tool-header .btn-secondary:hover:not(:disabled) {
    background: var(--tool-upload-hover) !important;
    border-color: rgba(0, 102, 204, 0.25) !important;
}

body.has-tool-header .progress-fill {
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
}

body.has-tool-header .tab-btn.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

body.has-tool-header .tab-btn:hover {
    color: var(--primary) !important;
}

body.has-tool-header .range-group input:focus,
body.has-tool-header input[type="text"]:focus,
body.has-tool-header input[type="number"]:focus,
body.has-tool-header select:focus,
body.has-tool-header textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12) !important;
    outline: none;
}

body.has-tool-header .file-item:hover {
    background: var(--tool-upload-hover) !important;
    box-shadow: 0 2px 8px var(--tool-shadow) !important;
}

body.has-tool-header .container {
    border-color: rgba(0, 102, 204, 0.08);
}

body.has-tool-header .status-chip {
    border-color: var(--border);
}

body.has-tool-header a:not(.tool-site-logo):not(.btn) {
    color: var(--primary);
}

body.has-tool-header .logo {
    color: var(--primary) !important;
}

body.has-tool-header nav a:hover {
    color: var(--primary) !important;
}

body.has-tool-header .feature-tag,
body.has-tool-header .tech-tag {
    color: var(--primary) !important;
    background: rgba(0, 102, 204, 0.1) !important;
}

body.has-tool-header .tool-icon-wrap,
body.has-tool-header .tool-icon-box {
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.09), rgba(0, 212, 255, 0.12)) !important;
    border-color: rgba(0, 102, 204, 0.12) !important;
}

/* 图片压缩等页的内嵌导航 — 与全站一致 */
body.has-tool-header > header:not(.tool-site-header) .logo {
    color: var(--primary) !important;
}

body.has-tool-header footer {
    background: var(--bg-light) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-light) !important;
}

@media (max-width: 768px) {
    body.has-tool-header {
        background: #f4f6f8 !important;
    }
}