/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: #f0f2f5;
    color: #1a1a2e;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* ===== Navbar ===== */
.navbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    position: relative;
}
.navbar-inner .logo {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
}
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}
.logo-icon { font-size: 28px; }
.logo-text { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.logo-sub { font-weight: 400; opacity: 0.85; margin-left: 2px; font-size: 15px; }

.nav-tabs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    font-family: inherit;
}
.nav-tab:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.nav-tab.active {
    background: rgba(255, 255, 255, 0.95);
    color: #667eea;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* 各tab不同active底色 */
.nav-tab[data-tab="ocr"].active {
    background: linear-gradient(135deg, #FF6B6B, #EE5A6F);
    color: #fff;
    box-shadow: 0 2px 10px rgba(255, 107, 107, 0.4);
}
.nav-tab[data-tab="watermark"].active {
    background: linear-gradient(135deg, #FF9500, #FF6B00);
    color: #fff;
    box-shadow: 0 2px 10px rgba(255, 149, 0, 0.4);
}
.nav-tab[data-tab="addwatermark"].active {
    background: linear-gradient(135deg, #00C9A7, #00B894);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 201, 167, 0.4);
}
.nav-tab[data-tab="editor"].active {
    background: linear-gradient(135deg, #7C4DFF, #E040FB);
    color: #fff;
    box-shadow: 0 2px 10px rgba(124, 77, 255, 0.4);
}
.nav-tab[data-tab="idphoto"].active {
    background: linear-gradient(135deg, #FD746C, #FF9068);
    color: #fff;
    box-shadow: 0 2px 10px rgba(253, 116, 108, 0.4);
}
.nav-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.nav-tab.disabled:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255,255,255,0.8); }
.tab-svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ===== Main Layout ===== */
.main {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
    width: 100%;
}

.panel { display: none; animation: fadeIn 0.3s ease; }
.panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.panel-title h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.panel-title p {
    font-size: 14px;
    color: #666;
}

.quota-badge {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(245, 87, 108, 0.3);
}
.quota-badge strong { font-size: 16px; }

/* ===== Two-Column Layout ===== */
.panel-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.left-area, .right-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Upload Zone ===== */
.upload-zone {
    background: #fff;
    border: 2px dashed #d0d5dd;
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: #667eea;
    background: #f8f7ff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.upload-zone.dragover { transform: scale(1.01); }
.upload-zone.hidden { display: none; }
.upload-icon { color: #667eea; margin-bottom: 12px; }
.upload-icon svg { width: 64px; height: 64px; }
.upload-text { font-size: 15px; color: #444; margin-bottom: 8px; }
.upload-link { color: #667eea; font-weight: 600; text-decoration: underline; cursor: pointer; }
.upload-hint { font-size: 12px; color: #999; }
.file-input { display: none; }

.folder-btn {
    margin-top: 12px;
    background: #f0f0ff;
    color: #667eea;
    border: 1px solid #667eea;
    font-size: 13px;
    font-family: inherit;
}
.folder-tip {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
}

/* ===== Preview ===== */
.preview-box {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.preview-box.hidden { display: none; }
.preview-img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    background: #f8f8f8;
}
.preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.preview-info { font-size: 12px; color: #999; }

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    background: #f0f0f0;
    color: #333;
}
.btn:hover { background: #e0e0e0; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.45); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-lg {
    padding: 12px 28px;
    font-size: 16px;
    border-radius: 12px;
}
.btn-lg svg { width: 20px; height: 20px; }

.btn-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.35);
}
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(17, 153, 142, 0.45); }

/* ===== Action Bar ===== */
.action-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.status {
    font-size: 14px;
    color: #667eea;
    font-weight: 500;
}
.status.error { color: #e74c3c; }
.status.processing { color: #f39c12; }

/* ===== Result Area ===== */
.result-area {
    background: #fff;
    border-radius: 16px;
    min-height: 200px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #bbb;
}
.empty-state svg { width: 80px; height: 80px; margin-bottom: 16px; }
.empty-state p { font-size: 14px; margin-bottom: 4px; }
.empty-state p strong { color: #667eea; }
.empty-sub { font-size: 12px !important; color: #ccc !important; }

/* ===== OCR Result ===== */
.ocr-result-content { padding: 20px; }
.ocr-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ocr-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #888;
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 12px;
}
.ocr-meta-item strong { color: #667eea; }
.ocr-text-box {
    position: relative;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}
.ocr-text-box pre {
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    font-family: inherit;
    margin: 0;
}
.ocr-textarea {
    width: 100%;
    min-height: 300px;
    border: none;
    background: transparent;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    font-family: inherit;
    resize: vertical;
    outline: none;
}
.ocr-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    user-select: none;
}
.ocr-check input { accent-color: #FF6B6B; cursor: pointer; }
.upload-zone.dragover,
.preview-box.dragover {
    border-color: #FF6B6B;
    background: rgba(255,107,107,.05);
}
.ocr-lang-input {
    width: 72px;
    padding: 5px 10px;
    font-size: 13px;
    border: 1.5px solid #d9d9d9;
    border-radius: 6px;
    outline: none;
    vertical-align: middle;
    transition: border-color .2s, box-shadow .2s;
    margin-left: 2px;
}
.ocr-lang-input:focus {
    border-color: #FF6B6B;
    box-shadow: 0 0 0 2px rgba(255,107,107,.15);
}

/* 排版模式 */
.ocr-layout-box {
    position: relative;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    min-height: 200px;
}
.ocr-layout-box .ocr-line {
    position: absolute;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    white-space: nowrap;
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.15s;
}
.ocr-layout-box .ocr-line:hover {
    background: rgba(255, 149, 0, 0.08);
    outline: 1px dashed #FF9500;
}
.ocr-layout-box .ocr-line:focus {
    background: rgba(255, 149, 0, 0.12);
    outline: 2px solid #FF9500;
}

/* 翻译后的原文标记 */
.ocr-translated .ocr-original {
    color: #999;
    font-size: 12px;
    display: block;
    margin-top: 2px;
}

.ocr-copy-bar {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.ocr-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* ===== Watermark Result ===== */
.wm-batch-done {
    text-align: center;
    padding: 32px 16px;
    color: #333;
}
.wm-batch-done svg { margin-bottom: 12px; }
.wm-batch-done p { font-size: 16px; margin: 0; }
.wm-batch-done strong { color: #11998e; font-size: 20px; }
.wm-result-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.wm-result-item {
    text-align: center;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
}
.wm-result-item img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 6px;
    background: #f5f5f5;
    border: 1px solid #eee;
    margin: 4px;
}
.wm-result-item .wm-result-name {
    font-size: 12px;
    color: #666;
    margin: 8px 0;
    word-break: break-all;
}
.wm-compare {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
}
.wm-compare-item {
    text-align: center;
    max-width: 320px;
}
.wm-compare-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #666;
}
.wm-compare-label.before { color: #e74c3c; }
.wm-compare-label.after { color: #11998e; }
.wm-compare img {
    width: 280px;
    height: 280px;
    object-fit: contain;
    border-radius: 8px;
    background: #f5f5f5;
    border: 1px solid #eee;
}
.wm-download-bar {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

/* ===== Toast ===== */
.toast-container {
    position: fixed;
    top: 72px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast {
    background: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    font-size: 14px;
    animation: toastIn 0.3s ease;
    max-width: 360px;
    border-left: 4px solid #667eea;
}
.toast.success { border-left-color: #11998e; }
.toast.error { border-left-color: #e74c3c; }
.toast.leaving { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100px); } }

/* ===== Loading Spinner ===== */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Footer ===== */
.footer {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .panel-body {
        grid-template-columns: 1fr;
    }
    .navbar-inner {
        flex-direction: column;
        height: auto;
        padding: 12px 16px;
        gap: 10px;
    }
    .main { padding: 16px; }
    .wm-compare { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .nav-tab { padding: 6px 10px; font-size: 13px; }
    .nav-tab .tab-text { display: none; }
    .panel-title h1 { font-size: 20px; }
    .upload-zone { padding: 32px 16px; min-height: 200px; }
}

/* ===== 全局隐藏 ===== */
.hidden { display: none !important; }

/* ===== Modal ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    animation: fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }
.modal {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: modalIn 0.3s ease;
    overflow: hidden;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}
.modal-header h2 { font-size: 18px; font-weight: 700; text-align: center; }
/* 支付弹窗标题栏 */
.pay-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom: none;
    padding: 18px 24px;
}
.pay-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.pay-header .modal-close {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.modal-close { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.modal-close {
    width: 32px; height: 32px;
    border: none; background: #f5f5f5;
    border-radius: 50%; font-size: 20px;
    cursor: pointer; color: #666;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.modal-close:hover { background: #eee; color: #333; }
.modal-body { padding: 20px 24px; }
.pay-desc { font-size: 13px; color: #666; margin-bottom: 14px; line-height: 1.5; }
.pay-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.pay-modal { max-width: 640px; }
.pay-modal-body {
    display: flex;
    padding: 20px;
    min-height: 320px;
    gap: 20px;
}
.pay-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.pay-right {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #eee;
    padding-left: 20px;
    text-align: center;
}
/* QR扫码模式：单列居中 */
.pay-modal-body.qr-mode {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.pay-modal-body.qr-mode .pay-right {
    width: 100%;
    max-width: 300px;
    border-left: none;
    padding-left: 0;
}
.pay-modal-body.qr-mode .pay-qr-tip {
    font-size: 14px;
    white-space: nowrap;
}
.pay-right canvas,
.pay-right img.qr-img {
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    margin: 0 auto;
    display: block;
}
.pay-right .pay-qr-tip,
.pay-right .pay-qr-amount,
.pay-right .pay-qr-status {
    width: 100%;
    text-align: center;
}
.pay-right .pay-qr-amount { margin-top: 10px; }
.pay-right .pay-qr-status { margin-top: 6px; }
.pay-plan {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.pay-plan:hover { border-color: #667eea; }
.pay-plan.selected { border-color: #667eea; background: #f0f0ff; }
.pay-plan.popular { border-color: #667eea; }
.pay-plan.selected.popular { background: #ededff; }
.pay-plan-tag {
    position: absolute;
    top: -10px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff; font-size: 11px; font-weight: 600;
    padding: 2px 10px; border-radius: 10px;
}
.pay-plan-price { font-size: 24px; font-weight: 800; color: #667eea; margin-bottom: 4px; }
.pay-plan-label { font-size: 12px; color: #888; }
.pay-methods {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.pay-method {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}
.pay-method input { accent-color: #667eea; }
.pay-submit {
    width: 100%;
    justify-content: center;
    font-size: 16px;
    padding: 14px;
}

/* ===== Scrollbar ===== */
.ocr-text-box::-webkit-scrollbar { width: 6px; }
.ocr-text-box::-webkit-scrollbar-track { background: transparent; }
.ocr-text-box::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.ocr-text-box::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* ===== File List ===== */
.file-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}
.file-list-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 1;
}
.file-list-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.file-list-item .file-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-list-item .file-done {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #11998e;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.file-list-item.done .file-done { display: flex; }
.file-list-item.processing { opacity: 0.6; }
.file-list-item.error::after {
    content: '✕';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231,76,60,0.5);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

/* ===== Batch Progress ===== */
.batch-progress { margin-bottom: 16px; }
.batch-progress.hidden { display: none; }
.progress-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.progress-text {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
    text-align: center;
}

/* ===== Pay Info Card ===== */
.pay-info-card {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
.pay-info-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #eee;
}
.pay-info-row:last-child { border-bottom: none; }
.pay-info-row strong { color: #333; }
.pay-info-row.free-row strong { color: #11998e; }
.pay-info-row.total-row {
    border-top: 2px solid #667eea;
    border-bottom: none;
    margin-top: 4px;
    padding-top: 10px;
    font-size: 15px;
}
.pay-info-row.total-row strong {
    color: #667eea;
    font-size: 18px;
}

/* ===== 扫码支付区域 ===== */
.pay-qr-tip {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    text-align: center;
}
.pay-qr-amount {
    font-size: 16px;
    color: #333;
    margin-top: 10px;
    text-align: center;
}
.pay-qr-amount strong {
    color: #667eea;
    font-size: 20px;
}
.pay-qr-status {
    font-size: 13px;
    color: #999;
    margin-top: 8px;
    min-height: 20px;
    text-align: center;
}
.pay-qr-status.success {
    color: #07C160;
    font-weight: 500;
}
.pay-qr-actions {
    margin-top: 12px;
    text-align: center;
}

/* ================================================================
   加水印模块样式
   ================================================================ */

/* 免费标签 */
.free-badge {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(17, 153, 142, 0.3);
}

/* Canvas预览 */
.aw-canvas-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.aw-canvas-box.hidden { display: none; }
.aw-canvas {
    flex: 1;
    max-height: 450px;
    object-fit: contain;
    border-radius: 12px;
    background: #f5f5f5;
    border: 1px solid #e9ecef;
    display: block;
    cursor: grab;
}
.aw-canvas:active { cursor: grabbing; }

/* 翻页箭头 */
.aw-nav-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.85);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.aw-nav-btn:hover { background: rgba(102, 126, 234, 1); transform: scale(1.1); }
.aw-nav-btn:active { transform: scale(0.95); }
.aw-nav-btn.hidden { display: none; }
.aw-drag-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    color: #888;
    margin-bottom: 8px;
    padding: 6px 0;
}
.aw-drag-hint svg { color: #aaa; }

/* Canvas下方工具栏 */
.aw-canvas-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 0 2px;
}
.aw-canvas-bar.hidden { display: none; }
.aw-canvas-info {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #555;
    background: #f0f2f5;
    padding: 4px 14px;
    border-radius: 20px;
}

/* 重新选择按钮 */
#aw-change-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 10px rgba(102,126,234,0.3);
}
#aw-change-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(102,126,234,0.4);
}
#aw-change-btn:active {
    transform: translateY(0);
}

/* 水印类型切换 */
.aw-type-switch {
    display: flex;
    gap: 12px;
}
.aw-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    transition: all 0.2s;
}
.aw-type-btn input { display: none; }
.aw-type-btn:hover { border-color: #667eea; color: #667eea; }
.aw-type-btn.active {
    border-color: #667eea;
    background: #f0f0ff;
    color: #667eea;
    font-weight: 600;
}

/* 设置面板 */
.aw-settings {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.aw-section.hidden { display: none; }

/* 字段 */
.aw-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aw-field > label {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}
.aw-field > label strong { color: #667eea; }

.aw-field-row {
    display: flex;
    gap: 12px;
}
.aw-font-indicator {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: #e67e22;
    font-weight: 500;
}
.aw-font-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #e67e22;
    border-top-color: transparent;
    border-radius: 50%;
    animation: awFontSpin 0.7s linear infinite;
}
@keyframes awFontSpin {
    to { transform: rotate(360deg); }
}
.aw-field.flex1 { flex: 1; }

.aw-input {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    outline: none;
}
.aw-input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }

.aw-select {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    cursor: pointer;
    outline: none;
}
.aw-select:focus { border-color: #667eea; }

.aw-input-sm {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    outline: none;
}
.aw-input-sm:focus { border-color: #667eea; }

/* 滑块 */
.aw-range {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.aw-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 2px 6px rgba(102,126,234,0.3);
    cursor: pointer;
    transition: transform 0.15s;
}
.aw-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.aw-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    cursor: pointer;
}

/* 颜色选择器 */
.aw-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.aw-color-input {
    width: 36px;
    height: 36px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
}
.aw-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.aw-color-input::-webkit-color-swatch { border: none; border-radius: 5px; }

.aw-check-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
}
.aw-check-label input { accent-color: #667eea; }

/* 上传字体按钮 */
.aw-upload-font-btn {
    background: #f0f0ff;
    color: #667eea;
    border: 1px solid #667eea;
}

/* Logo上传 */
.aw-logo-upload {
    border: 2px dashed #d0d5dd;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    transition: all 0.2s;
}
.aw-logo-upload:hover {
    border-color: #667eea;
    background: #f8f7ff;
}
.aw-logo-upload.hidden { display: none; }
.upload-icon-sm svg { width: 40px; height: 40px; color: #667eea; }

.aw-logo-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 10px;
}
.aw-logo-preview.hidden { display: none; }
.aw-logo-preview img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #fff;
}

/* 模式切换 */
.aw-mode-switch {
    display: flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}
.aw-mode-btn {
    flex: 1;
    text-align: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
    font-weight: 500;
}
.aw-mode-btn:hover { color: #333; }
.aw-mode-btn.active {
    background: #fff;
    color: #667eea;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 间距 */
.aw-spacing-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

/* 九宫格位置选择器（已弃用，改为Canvas拖拽定位） */

/* 位置提示 */
.aw-position-hint {
    font-size: 12px;
    color: #888;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 1.5;
}
.aw-position-hint strong { color: #667eea; }

/* 加水印结果 */
.aw-result-content { padding: 20px; }
.aw-result-content .wm-compare img {
    width: 240px;
    height: 240px;
}

/* ================================================================
   图片编辑模块样式
   ================================================================ */

/* 设置面板 */
.ed-settings {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 区块 */
.ed-section {
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.ed-section:last-child { border-bottom: none; padding-bottom: 0; }
.ed-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

/* 裁剪比例按钮组 */
.ed-ratio-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ed-ratio-btn {
    padding: 6px 14px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    transition: all 0.2s;
    font-family: inherit;
}
.ed-ratio-btn input { display: none; }
.ed-ratio-btn:hover { border-color: #667eea; color: #667eea; }
.ed-ratio-btn.active {
    border-color: #667eea;
    background: #f0f0ff;
    color: #667eea;
    font-weight: 600;
}

/* 提示文字 */
.ed-hint {
    font-size: 12px;
    color: #888;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 1.5;
    margin-top: 8px;
}
.ed-hint strong { color: #667eea; }

/* Canvas预览（复用aw-canvas样式 + 编辑器专用） */
.ed-canvas-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ed-canvas-box.hidden { display: none; }
.ed-canvas {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    background: #f5f5f5;
    border: 1px solid #e9ecef;
    display: block;
    cursor: crosshair;
}

/* Canvas下方工具栏 */
.ed-canvas-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 0 2px;
}
.ed-canvas-bar.hidden { display: none; }
.ed-canvas-info {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #555;
    background: #f0f2f5;
    padding: 4px 14px;
    border-radius: 20px;
}

/* 编辑器重新选择按钮 */
#ed-change-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 10px rgba(102,126,234,0.3);
}
#ed-change-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(102,126,234,0.4); }
#ed-change-btn:active { transform: translateY(0); }

/* 重置调整按钮 */
#ed-reset-adjust {
    background: #f0f0ff;
    color: #667eea;
    border: 1px solid #667eea;
}

/* 编辑器结果 */
.ed-result-content { padding: 20px; }
.ed-result-content .wm-compare img {
    width: 240px;
    height: 240px;
}

/* ================================================================
   证件照模块样式
   ================================================================ */

/* 设置面板 */
.idp-settings {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.idp-section {
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.idp-section:last-child { border-bottom: none; padding-bottom: 0; }
.idp-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

/* 模板网格 */
.idp-tpl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.idp-tpl-card {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.idp-tpl-card:hover { border-color: #FD746C; }
.idp-tpl-card.active {
    border-color: #FD746C;
    background: #fff5f3;
    box-shadow: 0 2px 8px rgba(253,116,108,0.15);
}
.idp-tpl-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}
.idp-tpl-card.active .idp-tpl-name { color: #FD746C; }
.idp-tpl-size {
    font-size: 11px;
    color: #999;
}
.idp-tpl-use {
    font-size: 11px;
    color: #bbb;
    margin-top: 2px;
    line-height: 1.4;
}

/* 背景色选择 */
.idp-bg-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.idp-bg-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #e9ecef;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.idp-bg-btn:hover { transform: scale(1.1); }
.idp-bg-btn.active {
    border-color: #FD746C;
    box-shadow: 0 0 0 3px rgba(253,116,108,0.25);
    transform: scale(1.1);
}
.idp-bg-btn.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.idp-bg-btn[data-bg="white"] { background: #fff; }
.idp-bg-btn[data-bg="white"].active::after { color: #333; text-shadow: none; }
.idp-bg-btn[data-bg="blue"] { background: #438ECB; }
.idp-bg-btn[data-bg="red"] { background: #DC3232; }
.idp-bg-label {
    font-size: 13px;
    color: #666;
}

/* 提示信息 */
.idp-tips {
    font-size: 12px;
    color: #e67e22;
    background: #fef9e7;
    border: 1px solid #f9e79f;
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1.5;
    display: none;
}
.idp-tips.show { display: block; }

/* 预览 */
.idp-preview-box {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.idp-preview-box.hidden { display: none; }
.idp-preview-img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    background: #f8f8f8;
}

/* 结果区 */
.idp-result-content {
    padding: 20px;
    text-align: center;
}
.idp-result-content img {
    max-width: 200px;
    max-height: 280px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.idp-result-meta {
    margin-top: 12px;
    font-size: 13px;
    color: #666;
}
.idp-result-meta strong { color: #FD746C; }

/* 下载区 */
.idp-download-area {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.idp-download-area.hidden { display: none; }
.idp-dl-row {
    display: flex;
    gap: 10px;
}
.idp-paper-row {
    display: flex;
    gap: 8px;
}
.idp-paper-btn {
    padding: 5px 14px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    transition: all 0.2s;
}
.idp-paper-btn input { display: none; }
.idp-paper-btn.active {
    border-color: #11998e;
    background: #e6fff9;
    color: #11998e;
    font-weight: 600;
}
.idp-dl-info {
    font-size: 12px;
    color: #888;
    text-align: center;
}