/* ============================================================
   图片打码工具 · 专属样式
   依赖：../../style.css（官网全局样式，导航/页脚桌面端样式由其决定）
   ============================================================ */

/* ---------- 页头 ---------- */
.tool-header { padding: 140px 0 48px; }
.tool-badges {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px;
}
.tool-badge {
    font-size: 12px; font-weight: 600; color: var(--primary);
    background: var(--primary-light); padding: 5px 14px; border-radius: 100px;
}

/* ---------- 工具主体 ---------- */
.tool-main { padding: 0 0 40px; }

/* ---------- 上传区 ---------- */
.upload-zone { padding: 24px 0 8px; }
.upload-card {
    border: 2px dashed rgba(26, 110, 255, 0.35);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    padding: 56px 32px;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
}
.upload-card:hover, .upload-card.dragover {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-hover);
}
.upload-icon {
    width: 72px; height: 72px; margin: 0 auto 20px;
    background: var(--primary-light); border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
}
.upload-icon svg { width: 36px; height: 36px; color: var(--primary); }
.upload-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.upload-card p { font-size: 13px; color: var(--text-light); margin-bottom: 24px; }
.upload-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.privacy-note {
    margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; color: var(--text-light); flex-wrap: wrap; text-align: center;
}
.privacy-note svg { color: var(--success); flex-shrink: 0; }

/* 按钮（复用官网变量） */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 10px; font-size: 14px; font-weight: 600;
    text-decoration: none; transition: var(--transition); cursor: pointer; border: none; font-family: inherit;
}
.btn-primary {
    background: var(--primary-gradient); color: white;
    box-shadow: 0 6px 18px rgba(26, 110, 255, 0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26, 110, 255, 0.4); }
.btn-secondary {
    background: white; color: var(--text); border: 1.5px solid var(--border);
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-sm { padding: 9px 16px; font-size: 13px; border-radius: 8px; }

/* ---------- 编辑器 ---------- */
.editor { padding: 24px 0 8px; }

.toolbar {
    display: flex; flex-wrap: wrap; gap: 14px 22px;
    background: white; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px 20px; margin-bottom: 16px;
    box-shadow: var(--shadow);
    position: sticky; top: 80px; z-index: 100;
}
.tool-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tool-group-label {
    font-size: 12px; font-weight: 700; color: var(--text-light);
    flex-shrink: 0; letter-spacing: 0.5px;
}

/* 打码方式按钮 */
.mode-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.mode-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--border);
    background: white; font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); cursor: pointer; transition: var(--transition);
}
.mode-btn svg { width: 15px; height: 15px; }
.mode-btn:hover { border-color: var(--primary); color: var(--primary); }
.mode-btn.active {
    background: var(--primary-gradient); color: white; border-color: transparent;
    box-shadow: 0 4px 12px rgba(26, 110, 255, 0.3);
}

/* 笔刷 */
.brush-control { display: flex; align-items: center; gap: 8px; }
.brush-control input[type="range"] {
    width: 110px; accent-color: var(--primary); cursor: pointer;
}
.brush-value {
    min-width: 34px; text-align: center; font-size: 12px; font-weight: 700;
    color: var(--primary); background: var(--primary-light); border-radius: 6px; padding: 3px 6px;
}

/* 颜色 */
.color-control { display: flex; align-items: center; gap: 6px; }
.color-control input[type="color"] {
    width: 34px; height: 34px; border: 1.5px solid var(--border); border-radius: 8px;
    background: white; cursor: pointer; padding: 2px;
}
.color-preset {
    width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--border);
    cursor: pointer; transition: var(--transition);
}
.color-preset:hover { transform: scale(1.15); border-color: var(--primary); }

/* 编辑/视图按钮 */
.edit-btns, .view-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.icon-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--border);
    background: white; font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); cursor: pointer; transition: var(--transition);
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.export-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 画布区 ---------- */
.canvas-stage {
    background: repeating-conic-gradient(#e9edf5 0% 25%, #f7f9fc 0% 50%) 0 0 / 20px 20px;
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: auto; max-height: 72vh;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 20px;
}
.canvas-wrap { position: relative; line-height: 0; touch-action: none; }
.canvas-wrap canvas { display: block; max-width: none; }
#redactCanvas { position: absolute; top: 0; left: 0; cursor: crosshair; }
.rect-preview {
    position: absolute; border: 1.5px dashed var(--primary);
    background: rgba(26, 110, 255, 0.12); pointer-events: none; z-index: 5;
}

/* ---------- 状态栏 ---------- */
.statusbar {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    margin-top: 12px; font-size: 12px; color: var(--text-light);
}
.statusbar span { white-space: nowrap; }
#zoomInfo { font-weight: 700; color: var(--primary); }
.statusbar-tip { white-space: normal !important; flex: 1; min-width: 200px; }

/* ---------- 使用说明 ---------- */
.howto-section { padding-bottom: 20px; }
.howto-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px;
}
.howto-card {
    background: white; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px 20px; text-align: center; transition: var(--transition);
}
.howto-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: rgba(26,110,255,0.2); }
.howto-num {
    width: 40px; height: 40px; margin: 0 auto 14px; border-radius: 50%;
    background: var(--primary-gradient); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 900; box-shadow: 0 6px 14px rgba(26,110,255,0.3);
}
.howto-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.howto-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* 警示横幅（与 drill.html 同款） */
.warning-banner {
    background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%);
    border: 1.5px solid rgba(220, 38, 38, 0.15);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: flex; align-items: flex-start; gap: 14px;
}
.warning-banner .warning-icon {
    width: 40px; height: 40px; background: var(--danger); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.warning-banner .warning-icon svg { width: 22px; height: 22px; color: white; }
.warning-banner h4 { font-size: 16px; font-weight: 700; color: var(--danger); margin-bottom: 6px; }
.warning-banner p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* ============================================================
   官网移动端适配代码块
   照抄官网首页内联 <style> 规则（仅适配，不重写桌面端样式）
   ============================================================ */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .howto-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* --- 导航汉堡菜单（照抄官网规则） --- */
    .nav-links {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 16px 24px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        gap: 4px;
        border-bottom: 1px solid var(--border);
    }
    .nav-links.active { display: flex; }
    .mobile-toggle { display: flex; }

    /* --- 页脚单列（照抄官网规则） --- */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }

    /* --- 工具页移动端 --- */
    .tool-header { padding: 112px 0 32px; }
    .tool-header p { font-size: 14px; padding: 0 8px; }
    .upload-card { padding: 36px 18px; }
    .upload-card h3 { font-size: 16px; }
    .upload-actions .btn { width: 100%; justify-content: center; }

    .toolbar {
        position: static; padding: 14px; gap: 12px;
        border-radius: 12px;
    }
    .tool-group { width: 100%; }
    .tool-group-label { width: 58px; }
    .mode-btns { flex: 1; }
    .mode-btn { flex: 1; justify-content: center; padding: 8px 4px; }
    .mode-btn span { display: none; }          /* 移动端仅图标，节省空间 */
    .mode-btn svg { width: 18px; height: 18px; }
    .brush-control input[type="range"] { flex: 1; width: auto; }
    .color-control { flex: 1; }
    .edit-btns .icon-btn, .view-btns .icon-btn { flex: 1; justify-content: center; }
    .icon-btn span { display: none; }
    .export-btns { width: 100%; }
    .export-btns .btn { flex: 1; justify-content: center; }

    .canvas-stage { padding: 10px; max-height: 60vh; }
    .statusbar-tip { display: none; }

    .howto-grid { grid-template-columns: 1fr; }
    .section { padding: 48px 0; }
    .warning-banner { flex-direction: column; gap: 12px; padding: 16px 20px; }
}

@media (max-width: 480px) {
    .mode-btn { padding: 8px 2px; }
    .tool-group-label { width: 52px; font-size: 11px; }
}