/* ==========================================================================
   像素工坊 · 工具工作区外壳  workspace.css  v20261029d
   卡片态（页面里）→ 工作区态（铺满视口，iframe 装工具）
   配色沿用 ds- 设计系统：砖红 #cc3333 / ink #1f2937 / border #eee4e4
   ========================================================================== */

/* -------------------------------------------------------------- 卡片态
   注意：.sw-card 只是一层透明容器，不再自带白底/边框/阴影。
   白卡由页面的 .ds-card-section 提供，虚线框由 .sw-drop 提供 —— 和
   image-compressor 的层级一致（白卡 → 虚线上传框 → 工具）。
   -------------------------------------------------------------------------- */

.sw-card {
    position: relative;
    border-radius: 16px;
}

.sw-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 460px;
    padding: 40px 24px;
    border: 2px dashed #ecd6d4;
    border-radius: 16px;
    background: #fdfafa;
    text-align: center;
    transition: border-color .18s ease, background-color .18s ease;
}

.sw-card.is-over .sw-drop {
    border-color: #cc3333;
    background: #fdf4f3;
}

.sw-card.is-loading .sw-drop {
    opacity: .55;
    pointer-events: none;
}

.sw-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 4px;
    border-radius: 18px;
    background: #fdeeed;
    color: #cc3333;
    font-size: 26px;
}

.sw-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
    color: #1f2937;
    letter-spacing: -.2px;
}

.sw-desc {
    max-width: 460px;
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: #667085;
}

.sw-desc b {
    color: #1f2937;
    font-weight: 600;
}

.sw-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.sw-card .sw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.sw-card .sw-btn-primary {
    background: #cc3333;
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(204, 51, 51, .85);
}

.sw-card .sw-btn-primary:hover {
    background: #b82d2d;
    transform: translateY(-1px);
    color: #fff;
}

.sw-card .sw-btn-ghost {
    background: #f7f3f3;
    color: #1f2937;
    border: 1px solid #eee4e4;
}

.sw-card .sw-btn-ghost:hover {
    background: #f1eaea;
    color: #1f2937;
}

.sw-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: #8a8f9a;
}

.sw-meta li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.sw-meta li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d8b3b1;
}

.sw-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #a2a7b0;
}

/* 拖拽悬停时的整卡提示（挂 .sw-card，藏了 drop 也照样能提示） */
.sw-card.is-over::after {
    content: "松开鼠标，立刻打开工作区";
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(253, 244, 243, .95);
    color: #cc3333;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
}

/* ------------------------------------------------- 退出后的预览态
   处理过内容再退出工作区，卡片换成最后编辑结果的截图，
   和 image-compressor 退出后的表现一致。
   -------------------------------------------------------------------------- */

.sw-shot {
    display: none;
    position: relative;
    min-height: 460px;
    overflow: hidden;
    border: 1px solid #eee4e4;
    border-radius: 16px;
    background: #f7f4f3;
    cursor: pointer;
}

.sw-card.has-shot .sw-shot {
    display: block;
}

.sw-card.has-shot .sw-drop {
    display: none;
}

/* 背景用同一张图放大模糊，填满左右留白，主体完整显示 */
.sw-shot::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: 0;
    background-image: var(--shot-bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(20px) saturate(.9);
    opacity: .55;
    transform: scale(1.04);
}

.sw-shot img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 460px;
    object-fit: contain;
    background: transparent;
}

.sw-shot-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(24, 28, 38, .58);
    color: #fff;
    opacity: 0;
    transition: opacity .18s ease;
}

.sw-shot-mask span {
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* 抓不到截图时的状态卡（在线 PS 这类非 canvas 工具）：浅色，和页面一个体系 */
.sw-shot.is-empty {
    border-color: #e3e9f4;
    background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f3f6fb 52%, #e7edf7 100%);
}

.sw-shot.is-empty::before {
    display: none;
}

.sw-shot.is-empty img {
    display: none;
}

.sw-shot-empty {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #7c8698;
    font-size: 13px;
}

.sw-shot.is-empty .sw-shot-empty {
    display: flex;
}

.sw-empty-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 6px;
    border-radius: 15px;
    background: #001e36;
    color: #31a8ff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.5px;
    box-shadow: 0 14px 28px -14px rgba(0, 30, 54, .55);
}

.sw-shot-empty b {
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
}

.sw-shot-mask i {
    font-size: 22px;
}

.sw-shot:hover .sw-shot-mask {
    opacity: 1;
}

.sw-shot-clear {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(24, 28, 38, .55);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s ease, background-color .18s ease;
}

.sw-shot:hover .sw-shot-clear {
    opacity: 1;
}

.sw-shot-clear:hover {
    background: #cc3333;
}

/* -------------------------------------------------------- 工作区态

   顶栏是一条悬浮胶囊，不占屏幕像素；iframe 铺满整个视口。
   -------------------------------------------------------------------------- */

.sw-layer {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: none;
    background: #fbf8f7;
    overscroll-behavior: contain;
}

.sw-layer.is-open {
    display: block;
}

html.sw-locked,
html.sw-locked body {
    overflow: hidden !important;
}

.sw-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fbf8f7;
}

.sw-bar {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 42px;
    padding: 0 6px 0 2px;
    border: 1px solid #ece3e2;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 30px -8px rgba(31, 41, 55, .32), 0 2px 6px rgba(31, 41, 55, .06);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    touch-action: none;
}

/* 顶栏会挡住工具自己的菜单时（在线 PS），改到底部居中 */
.sw-layer[data-bar="bottom"] .sw-bar {
    top: auto;
    bottom: 16px;
}

/* 拖动握把 */
.sw-bar-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 100%;
    border-radius: 999px;
    color: #c2c7cf;
    font-size: 12px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.sw-bar-grip:hover {
    background: #f7f3f3;
    color: #8a8f9a;
}

.sw-bar.is-drag .sw-bar-grip {
    cursor: grabbing;
    background: #f7f3f3;
    color: #cc3333;
}

/* 全屏按钮：只有 data-sw-fs="1" 的卡片才显示 */
.sw-bar .sw-bar-fs {
    display: none;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #667085;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.sw-layer[data-fs="1"] .sw-bar .sw-bar-fs {
    display: inline-flex;
}

.sw-bar .sw-bar-fs:hover {
    background: #f2f6fb;
    color: #2b6cb0;
}

.sw-layer[data-theme="dark"] .sw-bar .sw-bar-fs {
    color: #98a0b0;
}

.sw-layer[data-theme="dark"] .sw-bar .sw-bar-fs:hover {
    background: rgba(255, 255, 255, .06);
    color: #e04747;
}

/* 顶栏淡出：进入时全亮，鼠标离开 2.5 秒后淡到 34%，移回顶栏即恢复 */
.sw-bar {
    transition: opacity .3s ease, background .18s ease;
}

.sw-layer[data-dim="1"].bar-idle .sw-bar {
    opacity: .34;
}

.sw-layer[data-dim="1"] .sw-bar:hover,
.sw-layer[data-dim="1"] .sw-bar:focus-within,
.sw-layer[data-dim="1"] .sw-bar.is-drag {
    opacity: 1;
}

/* 淡出状态下仍要能点中，但外观更轻 */
.sw-layer.bar-idle .sw-bar .sw-bar-exit {
    box-shadow: none;
}

/* 预览图铺满模式（深色舞台类工具，两边不留底色） */
.sw-shot[data-fit="cover"] img {
    object-fit: cover;
}

.sw-shot[data-fit="cover"]::before {
    opacity: .3;
}

.sw-bar .sw-bar-exit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: #cc3333;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.sw-bar .sw-bar-exit:hover {
    background: #b82d2d;
}

/* 首次加载工具的过渡 */
.sw-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fbf8f7;
    color: #667085;
    font-size: 13.5px;
}

.sw-spin {
    width: 22px;
    height: 22px;
    border: 2px solid #f0d6d4;
    border-top-color: #cc3333;
    border-radius: 50%;
    animation: sw-spin .7s linear infinite;
}

@keyframes sw-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------- 深色工具（flytext）
   只影响这个工具的工作区与卡片，其他工具走默认浅色。
   -------------------------------------------------------------------------- */

.sw-layer[data-theme="dark"] {
    background: #14161c;
}

.sw-layer[data-theme="dark"] .sw-frame {
    background: #14161c;
}

.sw-layer[data-theme="dark"] .sw-loading {
    background: #14161c;
    color: #98a0b0;
}

.sw-layer[data-theme="dark"] .sw-bar {
    border-color: #333a4a;
    background: rgba(28, 31, 40, .92);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .8);
}

.sw-layer[data-theme="dark"] .sw-bar-grip {
    color: #6b7385;
}

.sw-layer[data-theme="dark"] .sw-bar-grip:hover {
    background: rgba(255, 255, 255, .06);
    color: #98a0b0;
}

.sw-layer[data-theme="dark"] .sw-bar.is-drag .sw-bar-grip {
    background: rgba(255, 255, 255, .08);
    color: #e04747;
}

.sw-card[data-sw-theme="dark"] {
    border-radius: 16px;
}

.sw-card[data-sw-theme="dark"] .sw-drop {
    border-color: #333a4a;
    background: #171a21;
}

.sw-card[data-sw-theme="dark"] .sw-icon {
    background: rgba(204, 51, 51, .16);
    color: #e04747;
}

.sw-card[data-sw-theme="dark"] .sw-title {
    color: #eceff5;
}

.sw-card[data-sw-theme="dark"] .sw-desc {
    color: #98a0b0;
}

.sw-card[data-sw-theme="dark"] .sw-desc b {
    color: #eceff5;
}

.sw-card[data-sw-theme="dark"] .sw-btn-ghost {
    border-color: #323848;
    background: #232733;
    color: #eceff5;
}

.sw-card[data-sw-theme="dark"] .sw-btn-ghost:hover {
    background: #2b3040;
    color: #fff;
}

.sw-card[data-sw-theme="dark"] .sw-meta {
    color: #7c8494;
}

.sw-card[data-sw-theme="dark"] .sw-meta li::before {
    background: #5a4350;
}

.sw-card[data-sw-theme="dark"] .sw-hint {
    color: #7c8494;
}

.sw-card[data-sw-theme="dark"] .sw-shot {
    border-color: #2a2f3d;
    background: #14161c;
}

.sw-card[data-sw-theme="dark"] .sw-shot img {
    background: #14161c;
}
/* 深色工具（flytext）的预览：舞台本身就是横的，用 cover 填满，不留黑边 */
.sw-card[data-sw-theme="dark"] .sw-shot img {
    object-fit: cover;
    object-position: center;
}

.sw-card[data-sw-theme="dark"].is-over::after {
    background: rgba(29, 21, 25, .95);
    color: #e04747;
}

/* ------------------------------------------------------------ 响应式 */

@media (max-width: 782px) {
    .sw-drop {
        min-height: 340px;
        padding: 28px 16px;
        gap: 10px;
    }

    .sw-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        font-size: 22px;
    }

    .sw-title {
        font-size: 16.5px;
    }

    .sw-desc {
        font-size: 13px;
    }

    .sw-card .sw-btn {
        height: 40px;
        padding: 0 16px;
        font-size: 13px;
    }

    .sw-meta {
        gap: 4px 12px;
        font-size: 11.5px;
    }

    .sw-shot,
    .sw-shot img {
        min-height: 340px;
        height: 340px;
    }

    .sw-bar {
        top: 8px;
        height: 38px;
    }

    .sw-bar-grip {
        width: 24px;
    }

    .sw-bar .sw-bar-exit {
        height: 30px;
        padding: 0 12px;
        font-size: 12px;
    }

    .sw-shot,
    .sw-shot img {
        min-height: 320px;
        height: 320px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sw-drop,
    .sw-card .sw-btn,
    .sw-bar,
    .sw-shot-mask {
        transition: none;
    }
}
/* ==========================================================================
   像素工坊 · 在线 PDF 转扫描件页面
   设计语言与 /tools/seal-generator/、/tools/image-compressor/ 共用：
   砖红主色、白卡、细边框、大字重标题。整份可直接 <link> 引用。
   作用域全部在 .ds-page 内，不污染主题。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 变量与基础
   -------------------------------------------------------------------------- */
.ds-page {
    --ds-red: #cc3333;
    --ds-red-dark: #a61f1f;
    --ds-red-soft: #fff1f1;
    --ds-blue: #3b82f6;
    --ds-blue-soft: #eff6ff;
    --ds-green: #10b981;
    --ds-green-soft: #ecfdf5;
    --ds-orange: #f59e0b;
    --ds-orange-soft: #fffbeb;
    --ds-purple: #8b5cf6;
    --ds-purple-soft: #f5f3ff;
    --ds-ink: #1f2937;
    --ds-muted: #667085;
    --ds-border: #eee4e4;
    --ds-card: #ffffff;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: var(--ds-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
.ds-page * { box-sizing: border-box; }
.wpb_raw_code:has(.ds-page) { margin-bottom: 0; }
.ds-page a, .ds-page button { -webkit-tap-highlight-color: transparent; }
.ds-page [id^="ds-"],
.ds-page [id="pdf-scanner-tool"],
.ds-page [id="pdf-scanner-hero"] { scroll-margin-top: 96px; }
.ds-page h1, .ds-page h2, .ds-page h3, .ds-page h4 { color: var(--ds-ink); }
.ds-page p { margin: 0; }

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.ds-hero { padding: 64px 0 44px; }
.ds-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 40px;
    align-items: center;
}
.ds-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(204, 51, 51, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--ds-red-dark);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}
.ds-eyebrow i { color: var(--ds-red); font-size: 13px; }

.ds-hero h1 {
    margin: 22px 0 18px;
    color: var(--ds-ink);
    font-size: 52px;
    line-height: 1.12;
    letter-spacing: -1.4px;
    font-weight: 850;
}
.ds-hero h1 span {
    display: block;
    margin-top: 10px;
    font-size: .58em;
    line-height: 1.28;
    letter-spacing: -.6px;
    background: linear-gradient(90deg, var(--ds-red), #e05252);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ds-hero-desc {
    max-width: 640px;
    margin: 0;
    color: var(--ds-muted);
    font-size: 16px;
    line-height: 1.78;
}
.ds-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.ds-hero-badges li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #f0e5e5;
    border-radius: 10px;
    background: rgba(255, 255, 255, .86);
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.ds-hero-badges i { color: var(--ds-red); font-size: 12px; }
.ds-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Hero 右侧：两张纸叠放示意（纯 CSS，不用图片） */
.ds-hero-side {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 30px 0;
}
.ds-paper-stack { position: relative; width: 300px; height: 300px; }
.ds-paper-card {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(31, 41, 55, .14);
}
.ds-paper-card--src {
    top: 8px;
    left: 8px;
    width: 210px;
    height: 272px;
    background: #fff;
    border: 1px solid #eee3e3;
    transform: rotate(-5deg);
}
.ds-paper-card--scan {
    right: 4px;
    bottom: 4px;
    width: 210px;
    height: 272px;
    background: linear-gradient(160deg, #fdf8ec, #f1e6cd);
    border: 1px solid #e6d9bd;
    transform: rotate(4deg);
    box-shadow: 0 24px 50px rgba(120, 82, 36, .22);
}
.ds-paper-lines { position: absolute; inset: 18px 16px auto; display: grid; gap: 8px; }
.ds-paper-lines i {
    display: block;
    height: 7px;
    border-radius: 3px;
    background: #e9e3e1;
}
.ds-paper-card--src .ds-paper-lines i:nth-child(1) { width: 52%; height: 11px; background: #cfc7c5; }
.ds-paper-card--src .ds-paper-lines i:nth-child(2) { width: 78%; }
.ds-paper-card--src .ds-paper-lines i:nth-child(4) { width: 62%; }
.ds-paper-card--scan .ds-paper-lines i {
    background: rgba(120, 96, 60, .26);
}
.ds-paper-card--scan .ds-paper-lines i:nth-child(1) { width: 52%; height: 11px; background: rgba(90, 68, 36, .45); }
.ds-paper-card--scan .ds-paper-lines i:nth-child(2) { width: 78%; }
.ds-paper-card--scan .ds-paper-lines i:nth-child(4) { width: 62%; }
.ds-paper-card--scan::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 12%, rgba(255, 255, 255, .5), transparent 55%),
        linear-gradient(90deg, rgba(120, 82, 36, .12), transparent 12%, transparent 88%, rgba(120, 82, 36, .12));
    pointer-events: none;
}
.ds-paper-tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}
.ds-paper-card--src .ds-paper-tag { background: #f3eeec; color: #8b807e; }
.ds-paper-card--scan .ds-paper-tag { background: rgba(166, 31, 31, .9); color: #fff; }
.ds-paper-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 30px rgba(78, 20, 20, .18);
    color: var(--ds-red-dark);
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    z-index: 3;
}
.ds-paper-badge i { font-size: 11px; }

/* --------------------------------------------------------------------------
   3. 按钮
   -------------------------------------------------------------------------- */
.ds-page .ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.ds-page .ds-btn:hover { transform: translateY(-1px); }
.ds-page .ds-btn i { font-size: 13px; }
.ds-btn-primary {
    background: linear-gradient(135deg, var(--ds-red), #e44949);
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(204, 51, 51, .22);
}
.ds-btn-primary:hover { background: linear-gradient(135deg, var(--ds-red-dark), var(--ds-red)); color: #fff !important; }
.ds-btn-ghost {
    border-color: rgba(204, 51, 51, .22);
    background: #fff;
    color: var(--ds-red-dark) !important;
}
.ds-btn-ghost:hover { background: var(--ds-red-soft); }
.ds-btn-soft {
    border-color: rgba(204, 51, 51, .16);
    background: var(--ds-red-soft);
    color: var(--ds-red-dark) !important;
}
.ds-btn-soft:hover { background: #ffe7e7; }

/* --------------------------------------------------------------------------
   4. 区段骨架
   -------------------------------------------------------------------------- */
.ds-page .ds-section { padding: 14px 0; }
.ds-card-section {
    padding: 34px 34px 30px;
    border: 1px solid #f1e8e6;
    border-radius: 26px;
    background: var(--ds-card);
    box-shadow: 0 18px 44px rgba(31, 41, 55, .05);
}
.ds-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}
.ds-section-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--ds-red);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ds-section-head h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -.4px;
    font-weight: 800;
}
.ds-section-head p {
    max-width: 780px;
    margin: 9px 0 0;
    color: var(--ds-muted);
    font-size: 14.5px;
    line-height: 1.7;
}
.ds-section-actions { display: flex; flex-shrink: 0; gap: 10px; }

/* --------------------------------------------------------------------------
   5. 工作区
   -------------------------------------------------------------------------- */
.ds-shell {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border: 1px solid #f0e6e4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 41, 55, .06);
}
.ds-shell #pscan-root { display: block; }
.ds-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: var(--ds-muted);
    font-size: 12.5px;
}
.ds-tips li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.ds-tips li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-red);
    flex: 0 0 auto;
}
.ds-tips b { color: var(--ds-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   6. 三步流程
   -------------------------------------------------------------------------- */
.ds-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: flow;
}
.ds-flow li {
    position: relative;
    margin: 0;
    padding: 22px 20px 20px;
    border: 1px solid #f2e9e7;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #fffdfd);
    counter-increment: flow;
}
.ds-flow li::after {
    content: counter(flow, decimal-leading-zero);
    position: absolute;
    top: 16px;
    right: 18px;
    color: #f3dede;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}
.ds-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--ds-red-soft);
    color: var(--ds-red);
    font-size: 16px;
}
.ds-flow h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.2px;
}
.ds-flow p {
    margin: 0;
    color: var(--ds-muted);
    font-size: 13.5px;
    line-height: 1.72;
}
.ds-flow b { color: var(--ds-ink); }

/* --------------------------------------------------------------------------
   7. 功能卡片
   -------------------------------------------------------------------------- */
.ds-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.ds-feature {
    padding: 22px 20px;
    border: 1px solid #f2e9e7;
    border-radius: 18px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ds-feature:hover {
    transform: translateY(-2px);
    border-color: #ecd8d6;
    box-shadow: 0 16px 34px rgba(31, 41, 55, .07);
}
.ds-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 12px;
    font-size: 16px;
}
.ds-ico-red { background: var(--ds-red-soft); color: var(--ds-red); }
.ds-ico-blue { background: var(--ds-blue-soft); color: var(--ds-blue); }
.ds-ico-green { background: var(--ds-green-soft); color: #059669; }
.ds-ico-orange { background: var(--ds-orange-soft); color: #d97706; }
.ds-ico-purple { background: var(--ds-purple-soft); color: #7c3aed; }
.ds-feature h3 {
    margin: 0 0 8px;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.2px;
}
.ds-feature p {
    margin: 0;
    color: var(--ds-muted);
    font-size: 13.5px;
    line-height: 1.72;
}
.ds-feature-tag {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f7f1f0;
    color: #9a7c79;
    font-size: 11.5px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. 参数建议表
   -------------------------------------------------------------------------- */
.ds-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid #f2e9e7; }
.ds-table {
    width: 100%;
    min-width: 620px;
    margin: 0;
    border-collapse: collapse;
    background: #fff;
    font-size: 13.5px;
}
.ds-table th,
.ds-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f5eeec;
    text-align: left;
    vertical-align: top;
}
.ds-table thead th {
    background: #fdf9f8;
    color: #6b5b58;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover { background: #fffbfa; }
.ds-table b { font-weight: 800; }
.ds-table code {
    padding: 2px 6px;
    border-radius: 5px;
    background: #f6efee;
    color: #a04a4a;
    font-size: 12px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* --------------------------------------------------------------------------
   9. 提示 / 边界说明
   -------------------------------------------------------------------------- */
.ds-note {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid #f3e2c8;
    border-radius: 16px;
    background: #fffaf0;
}
.ds-note-icon {
    flex: 0 0 auto;
    color: #d97706;
    font-size: 18px;
    line-height: 1.4;
}
.ds-note h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.ds-note p { margin: 0; color: #7a6a55; font-size: 13.5px; line-height: 1.75; }
.ds-note p + p,
.ds-note ul + p,
.ds-note p + ul { margin-top: 9px; }
.ds-note ul { margin: 8px 0 0; padding-left: 18px; color: #7a6a55; font-size: 13.5px; line-height: 1.75; }
.ds-note li { margin: 0 0 4px; }

.ds-privacy {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.ds-privacy div {
    padding: 18px;
    border: 1px solid #eef0ea;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdf9, #fff);
}
.ds-privacy b { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 800; }
.ds-privacy p { margin: 0; color: var(--ds-muted); font-size: 13px; line-height: 1.7; }
.ds-privacy i { color: #16a34a; margin-right: 6px; }

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
.ds-faq { display: grid; gap: 10px; }
.ds-faq details {
    border: 1px solid #f2e9e7;
    border-radius: 14px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ds-faq details[open] {
    border-color: #e9d3d1;
    box-shadow: 0 12px 28px rgba(31, 41, 55, .06);
}
.ds-faq summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ds-ink);
    list-style: none;
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after {
    content: "+";
    margin-left: auto;
    color: #c3a9a6;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    transition: transform .18s ease;
}
.ds-faq details[open] summary::after { content: "−"; color: var(--ds-red); }
.ds-qa { padding: 0 18px 18px; }
.ds-qa p { margin: 0; color: var(--ds-muted); font-size: 13.5px; line-height: 1.8; }
.ds-qa p + p { margin-top: 8px; }
.ds-qa b { color: var(--ds-ink); }

/* --------------------------------------------------------------------------
   11. 相关工具
   -------------------------------------------------------------------------- */
.ds-related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.ds-related a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid #f2e9e7;
    border-radius: 16px;
    background: #fff;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ds-related a:hover {
    transform: translateY(-2px);
    border-color: #e9d3d1;
    box-shadow: 0 14px 30px rgba(31, 41, 55, .07);
}
.ds-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--ds-red-soft);
    color: var(--ds-red);
    font-size: 17px;
}
.ds-related b { display: block; color: var(--ds-ink); font-size: 14.5px; font-weight: 800; }
.ds-related span { color: var(--ds-muted); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   12. 长文排版（攻略 / 对比 / 说明类段落）
   裸的 h3 / p / ol 在页面里没有样式，长文段落统一包一层 .ds-prose
   -------------------------------------------------------------------------- */
.ds-prose {
    max-width: 880px;
}
.ds-prose > *:first-child {
    margin-top: 0;
}
.ds-prose h3 {
    margin: 32px 0 10px;
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: -.2px;
    font-weight: 800;
}
.ds-prose h3:first-child {
    margin-top: 0;
}
.ds-prose p {
    margin: 0 0 12px;
    color: var(--ds-muted);
    font-size: 14.5px;
    line-height: 1.85;
}
.ds-prose p:last-child {
    margin-bottom: 0;
}
.ds-prose b,
.ds-prose strong {
    color: var(--ds-ink);
    font-weight: 700;
}
.ds-prose ol,
.ds-prose ul {
    margin: 0 0 16px;
    padding-left: 22px;
    color: var(--ds-muted);
    font-size: 14.5px;
    line-height: 1.85;
}
.ds-prose li {
    margin: 0 0 9px;
}
.ds-prose li::marker {
    color: var(--ds-red);
    font-weight: 700;
}
.ds-prose li b {
    color: var(--ds-ink);
}
.ds-prose code {
    padding: 2px 6px;
    border-radius: 5px;
    background: #f7f3f2;
    color: var(--ds-red-dark);
    font-size: .92em;
}
.ds-prose .ds-table-wrap {
    margin: 18px 0 22px;
}
.ds-prose .ds-note {
    margin: 18px 0 0;
}
.ds-note + .ds-prose,
.ds-table-wrap + .ds-prose {
    margin-top: 24px;
}

/* --------------------------------------------------------------------------
   12b. 裸 h3 / p / ol 的长文排版
   不依赖 .ds-prose 包裹 —— 直接命中卡片里没有 class 的直接子元素，
   这样即使段落被复制粘贴时丢了外层 div，排版也不会塌。
   -------------------------------------------------------------------------- */
.ds-card-section > h3:not([class]) {
    margin: 30px 0 10px;
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: -.2px;
    font-weight: 800;
}
.ds-section-head + h3:not([class]) {
    margin-top: 2px;
}
.ds-card-section > p:not([class]) {
    margin: 0 0 12px;
    color: var(--ds-muted);
    font-size: 14.5px;
    line-height: 1.85;
}
.ds-card-section > p:not([class]):last-child {
    margin-bottom: 0;
}
.ds-card-section > p:not([class]) b {
    color: var(--ds-ink);
    font-weight: 700;
}
.ds-card-section > ul:not([class]),
.ds-card-section > ol:not([class]) {
    margin: 0 0 16px;
    padding-left: 22px;
    color: var(--ds-muted);
    font-size: 14.5px;
    line-height: 1.85;
}
.ds-card-section > ul:not([class]) li,
.ds-card-section > ol:not([class]) li {
    margin: 0 0 9px;
}
.ds-card-section > ul:not([class]) li::marker,
.ds-card-section > ol:not([class]) li::marker {
    color: var(--ds-red);
    font-weight: 700;
}
.ds-card-section > p:not([class]) code,
.ds-card-section > ul:not([class]) code,
.ds-card-section > ol:not([class]) code {
    padding: 2px 6px;
    border-radius: 5px;
    background: #f7f3f2;
    color: var(--ds-red-dark);
    font-size: .92em;
}
.ds-card-section > h3:not([class]) + p:not([class]) {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   13. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ds-hero-grid { grid-template-columns: 1fr; gap: 8px; }
    .ds-hero h1 { font-size: 38px; }
    .ds-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-privacy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-related { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
    .ds-hero { padding: 40px 0 26px; }
    .ds-hero h1 { font-size: 30px; letter-spacing: -.6px; }
    .ds-hero h1 span { font-size: .62em; }
    .ds-hero-desc { font-size: 15px; }
    .ds-hero-side { min-height: 260px; margin-top: 10px; }
    .ds-paper-stack { transform: scale(.82); }
    .ds-card-section { padding: 22px 18px 20px; border-radius: 20px; }
    .ds-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ds-section-head h2 { font-size: 22px; }
    .ds-flow,
    .ds-features,
    .ds-privacy { grid-template-columns: 1fr; }
    .ds-shell { padding: 8px; border-radius: 18px; }
    .ds-tips { gap: 8px 16px; }
    .ds-table th, .ds-table td { padding: 11px 12px; }
}

/* ==========================================================================
   photoshop-online 页面级样式（原先散落在 WPBakery 的 <style> 里，现在统一收在这里）
   ========================================================================== */

    /* page.css 里 .ds-hero h1 span 是「副标题」写法（block + 缩小字号），
       这里按 seal-generator / image-compressor 的做法改回行内高亮 */
    #ps-online-hero h1 span {
        display: inline;
        margin: 0;
        font-size: 1em;
        line-height: inherit;
        letter-spacing: inherit;
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        color: var(--ds-red);
    }
    #ps-online-hero { padding: 48px 0 36px; }
    @media (max-width: 1024px) {
        #ps-online-hero { padding: 34px 0 10px; }
    }

    /* 在线 PS 首屏视觉：一个深色编辑器窗口（纯 CSS + 图标字体，不用截图）
       层次：标题栏（Ps + 菜单 + 窗口点）→ 工具栏 / 画布 / 图层面板 → 状态栏 */
    .psd-hero {
        position: relative;
        width: 100%;
        max-width: 404px;
    }
    .psd-window {
        position: relative;
        height: 296px;
        border: 1px solid #34393f;
        border-radius: 12px;
        overflow: hidden;
        background: #2b2b2b;
        box-shadow: 0 34px 62px -38px rgba(0, 0, 0, .92),
                    0 2px 0 rgba(255, 255, 255, .05) inset;
        transform: rotate(-1.1deg);
    }

    /* 标题栏 */
    .psd-titlebar {
        display: flex;
        align-items: center;
        gap: 9px;
        height: 26px;
        padding: 0 9px;
        background: linear-gradient(#262626, #1e1e1e);
        border-bottom: 1px solid #3a3a3a;
    }
    .psd-app {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        border-radius: 4px;
        background: #001e36;
        color: #31a8ff;
        font-size: 8.5px;
        font-weight: 800;
        line-height: 1;
    }
    .psd-menu {
        display: flex;
        gap: 9px;
        overflow: hidden;
    }
    .psd-menu b {
        color: #a5a5a5;
        font-size: 9.5px;
        font-weight: 400;
        letter-spacing: .2px;
        white-space: nowrap;
    }
    .psd-dots {
        display: flex;
        gap: 5px;
        margin-left: auto;
        padding-left: 8px;
    }
    .psd-dots i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #5a5a5a;
    }

    .psd-body {
        display: flex;
        height: calc(100% - 26px);
    }

    /* 左侧工具栏 */
    .psd-tools {
        flex: 0 0 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding-top: 8px;
        background: #232323;
        border-right: 1px solid #3a3a3a;
    }
    .psd-tools i {
        font-size: 10.5px;
        color: #8e8e8e;
        line-height: 1;
    }
    .psd-tools i:first-child {
        color: #31a8ff;
    }

    /* 中间：文档标签 + 画布 + 状态栏 */
    .psd-main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .psd-tabbar {
        display: flex;
        align-items: flex-end;
        height: 21px;
        padding: 0 8px;
        background: #232323;
        border-bottom: 1px solid #3a3a3a;
    }
    .psd-tab {
        padding: 3px 10px 4px;
        border-radius: 3px 3px 0 0;
        background: #363636;
        color: #d2d2d2;
        font-size: 8.5px;
        letter-spacing: .2px;
        white-space: nowrap;
    }
    .psd-canvas {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 0;
        background: radial-gradient(circle at 50% 44%, #262626 0%, #171717 74%);
    }

    /* 画布中间的文档：一张正在处理的图 + 三条文字行 */
    .psd-doc {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 62%;
        height: 100%;
        padding: 7px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
    }
    .psd-photo {
        position: relative;
        flex: 1 1 auto;
        border-radius: 1px;
        background:
            radial-gradient(circle at 74% 26%, rgba(255, 236, 214, .92) 0%, rgba(255, 236, 214, 0) 34%),
            linear-gradient(155deg, #f7d9c4 0%, #e9a184 42%, #c2664f 72%, #7d3f34 100%);
    }
    /* 选区虚线框 */
    .psd-photo::after {
        content: "";
        position: absolute;
        inset: 6px;
        border: 1px dashed rgba(255, 255, 255, .82);
    }
    .psd-doc i {
        display: block;
        height: 4px;
        border-radius: 2px;
        background: #e6e1de;
    }
    .psd-doc i:nth-of-type(1) { width: 74%; }
    .psd-doc i:nth-of-type(2) { width: 56%; }
    .psd-doc i:nth-of-type(3) { width: 34%; background: rgba(204, 51, 51, .34); }

    .psd-status {
        display: flex;
        align-items: center;
        gap: 11px;
        height: 18px;
        padding: 0 9px;
        background: #1e1e1e;
        border-top: 1px solid #3a3a3a;
        color: #858585;
        font-size: 7.5px;
        letter-spacing: .2px;
    }
    .psd-status span:last-child {
        margin-left: auto;
    }

    /* 右侧图层面板 */
    .psd-side {
        flex: 0 0 78px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 7px 6px 6px;
        background: #232323;
        border-left: 1px solid #3a3a3a;
        overflow: hidden;
    }
    .psd-panel-head {
        padding-bottom: 5px;
        margin-bottom: 3px;
        border-bottom: 1px solid #3a3a3a;
        color: #9a9a9a;
        font-size: 8px;
        letter-spacing: .4px;
    }
    .psd-layer {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 3px 4px;
        border-radius: 3px;
    }
    .psd-layer.is-on {
        background: #3b3b3b;
        box-shadow: 0 0 0 1px #4a4a4a inset;
    }
    .psd-thumb {
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
        border-radius: 2px;
        background: linear-gradient(160deg, #f0f0f0, #c9c9c9);
    }
    .psd-thumb--1 { background: linear-gradient(150deg, #f7d9c4, #c2664f); }
    .psd-thumb--2 { background: linear-gradient(150deg, #9aa4b2, #5d6673); }
    .psd-thumb--3 { background: linear-gradient(150deg, #f2efec, #d6d0cb); }
    .psd-lname {
        overflow: hidden;
        color: #bcbcbc;
        font-size: 8px;
        line-height: 1.25;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .psd-panel-foot {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        padding-top: 6px;
        border-top: 1px solid #3a3a3a;
        color: #777;
        font-size: 8px;
    }

    /* 角标：压在窗口左下角外侧，像贴上去的标签 */
    .psd-hero .ds-paper-badge {
        top: auto;
        left: -8px;
        right: auto;
        bottom: -26px;
        padding: 8px 15px;
        font-size: 12px;
        transform: none;
    }

    @media (max-width: 1024px) {
        .psd-hero { max-width: 360px; }
        .psd-window { height: 262px; }
    }
    @media (max-width: 782px) {
        .psd-hero { max-width: 320px; }
        .psd-window { height: 228px; }
        .psd-side { flex-basis: 64px; }
        .psd-menu b:nth-child(n+6) { display: none; }
        .psd-dots { display: none; }
    }