/* ======================================================================
 *  old-photo-colorize.css · 老照片上色
 *  视觉：奶油纸 + 陶土红 + 复古色卡；画布像冲印室台面，色板像颜料盒
 *  作用域：.tsk.opc（前缀 opc-）
 * ====================================================================== */

.tsk.opc {
    --tsk-bg: #faf4ea;
    --tsk-bg-2: #f0e6d6;
    --tsk-card: #fffdf8;
    --tsk-card-2: #f9f2e4;
    --tsk-ink: #2b241e;
    --tsk-sub: #6a5b4c;
    --tsk-faint: #9b8b78;
    --tsk-line: #e9ddc9;
    --tsk-line-2: #f3ead9;
    --tsk-brand: #b35c44;
    --tsk-brand-2: #8a4433;
    --tsk-brand-soft: #f7e7e1;
    --tsk-brand-ink: #9a4c37;
    --tsk-accent: #3f7a6a;
    --tsk-ok: #3f7a55;
    --tsk-ok-soft: #e7f1e9;
    --tsk-warn: #a5741c;
    --tsk-warn-soft: #fbf1db;
    --tsk-bad: #ad3f35;
    --tsk-bad-soft: #f9e7e4;
    --tsk-shadow-sm: 0 1px 2px rgba(43, 36, 30, .05), 0 7px 18px rgba(43, 36, 30, .05);
    --tsk-shadow: 0 2px 8px rgba(43, 36, 30, .08), 0 22px 46px rgba(43, 36, 30, .1);
    background:
        radial-gradient(640px 300px at 102% -8%, rgba(179, 92, 68, .10), transparent 62%),
        radial-gradient(460px 220px at -6% 12%, rgba(63, 122, 106, .07), transparent 60%),
        linear-gradient(180deg, #fcf6ec 0%, #f6eee0 100%);
}

:root[data-theme="dark"] .tsk.opc {
    --tsk-bg: #15120e;
    --tsk-bg-2: #1d1914;
    --tsk-card: #221d17;
    --tsk-card-2: #2a241c;
    --tsk-ink: #f3e9db;
    --tsk-sub: #c0af99;
    --tsk-faint: #8e7f6b;
    --tsk-line: #3b3227;
    --tsk-line-2: #2e271f;
    --tsk-brand: #e08a6c;
    --tsk-brand-2: #f0aa90;
    --tsk-brand-soft: rgba(224, 138, 108, .14);
    --tsk-brand-ink: #efae95;
    --tsk-accent: #7fc2ae;
    --tsk-ok: #8fd0ac;
    --tsk-ok-soft: rgba(143, 208, 172, .13);
    --tsk-warn: #e7c172;
    --tsk-warn-soft: rgba(231, 193, 114, .13);
    --tsk-bad: #f0978a;
    --tsk-bad-soft: rgba(240, 151, 138, .13);
    --tsk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 7px 18px rgba(0, 0, 0, .3);
    --tsk-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 22px 46px rgba(0, 0, 0, .42);
    background: #15120e;
}

/* ---------- 1. 首屏等高栅格 ---------- */
.opc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 394px;
    gap: 30px;
    padding: 30px 0 24px;
    align-items: stretch;
}
.opc-hero-l {
    display: flex;
    flex-direction: column;
}
.opc-hero-l > .tsk-hs {
    flex: 1 1 auto;
}
@media (max-width: 900px) {
    .opc-hero {
        grid-template-columns: 1fr;
    }
}
.opc-hero-r {
    min-width: 0;
}

/* ---------- 2. 首屏文字 ---------- */
.opc .tsk-kicker {
    background: #f7e7e1;
    color: #9a4c37;
}
.opc .tsk-h1 b {
    color: var(--tsk-brand-ink);
}
.opc .tsk-lead b {
    color: var(--tsk-brand-ink);
}
.opc .tsk-chips span {
    background: #fffdf8;
    border-color: #e9ddc9;
}

/* 说明条 */
.opc-honest {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid var(--tsk-line);
    border-left: 3px solid var(--tsk-accent);
    border-radius: 6px;
    background: var(--tsk-card);
    font-size: 12px;
    line-height: 1.7;
}
.opc-honest b {
    flex: 0 0 62px;
    color: var(--tsk-accent);
}
.opc-honest span {
    color: var(--tsk-sub);
}

/* ---------- 3. 上色工作台 ---------- */
.opc-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--tsk-card);
    border: 1px solid var(--tsk-line);
    border-radius: 14px;
    box-shadow: var(--tsk-shadow);
    overflow: hidden;
}
.opc-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 17px;
    background: linear-gradient(120deg, #8a4433, #b35c44);
    color: #fff;
}
.opc-panel-hd b {
    font-size: 13.5px;
}
.opc-panel-hd i {
    font: 700 9.5px/1 var(--tsk-num);
    letter-spacing: .14em;
    opacity: .85;
}
.opc-panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
    flex: 1 1 auto;
}

/* 拖拽区 */
.opc-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 19px 14px 17px;
    border: 1px dashed #d3bd9f;
    border-radius: 8px;
    background:
        radial-gradient(circle at 18% 22%, rgba(179, 92, 68, .1) 0 3px, transparent 3px),
        radial-gradient(circle at 82% 76%, rgba(63, 122, 106, .1) 0 3px, transparent 3px),
        var(--tsk-card-2);
    cursor: pointer;
    text-align: center;
    transition: border-color .16s, background .16s;
}
.opc-drop:hover,
.opc-drop.over {
    border-color: var(--tsk-brand);
    background-color: #fdf0ec;
}
.opc-drop-ic {
    font-size: 24px;
    line-height: 1;
}
.opc-drop b {
    font-size: 13px;
}
.opc-drop small {
    font-size: 10.5px;
    color: var(--tsk-faint);
    line-height: 1.55;
}

/* 文件信息 */
.opc-meta {
    display: grid;
    grid-template-columns: 1.3fr .9fr .9fr;
    gap: 6px;
}
.opc-meta div {
    padding: 7px 9px;
    border: 1px solid var(--tsk-line);
    border-radius: 6px;
    background: var(--tsk-card-2);
    min-width: 0;
}
.opc-meta span {
    display: block;
    font-size: 10px;
    color: var(--tsk-faint);
}
.opc-meta b {
    display: block;
    margin-top: 2px;
    font: 700 11px/1.5 var(--tsk-num);
    color: var(--tsk-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 色板 */
.opc-field > label,
.opc-lab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 800;
    color: var(--tsk-sub);
}
.opc-field label b {
    font: 800 12px/1 var(--tsk-num);
    color: var(--tsk-brand-ink);
}
.opc-palettes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.opc-palettes button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: 1.5px solid var(--tsk-line);
    border-radius: 7px;
    background: var(--tsk-card-2);
    cursor: pointer;
    transition: .15s;
}
.opc-palettes button i {
    width: 26px;
    height: 16px;
    border-radius: 3px;
    flex: 0 0 auto;
    display: block;
}
.opc-palettes button b {
    font-size: 11.5px;
    color: var(--tsk-sub);
}
.opc-palettes button.on {
    border-color: var(--tsk-brand);
    background: var(--tsk-brand-soft);
}
.opc-palettes button.on b {
    color: var(--tsk-brand-ink);
}

/* 滑杆 */
.opc-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.opc-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, #e7cdb9, var(--tsk-brand));
    outline: none;
}
.opc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--tsk-brand);
    cursor: pointer;
}
.opc-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--tsk-brand);
    cursor: pointer;
}

/* 颜色 */
.opc-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.opc-colors button {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: 2px solid transparent;
    background: var(--sw);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
    transition: transform .12s, border-color .12s;
}
.opc-colors button:hover {
    transform: translateY(-1px);
}
.opc-colors button.on {
    border-color: var(--tsk-ink);
}
.opc-color-custom {
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px dashed var(--tsk-line);
    border-radius: 5px;
    display: grid;
    place-items: center;
    cursor: pointer;
    overflow: hidden;
}
.opc-color-custom input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.opc-color-custom span {
    font-size: 14px;
    color: var(--tsk-faint);
    pointer-events: none;
}

/* 工具 */
.opc-tools {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.opc-tool {
    padding: 6px 4px;
    border: 1px solid var(--tsk-line);
    border-radius: 6px;
    background: var(--tsk-card-2);
    color: var(--tsk-sub);
    font-size: 11px;
    cursor: pointer;
}
.opc-tool.on {
    background: var(--tsk-brand);
    border-color: var(--tsk-brand);
    color: #fff;
}
.opc-tool:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.opc-err {
    padding: 8px 11px;
    border: 1px solid rgba(173, 63, 53, .26);
    border-radius: 6px;
    background: var(--tsk-bad-soft);
    color: var(--tsk-bad);
    font-size: 11.5px;
    line-height: 1.65;
}
.opc-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}
.opc-acts .tsk-btn-main {
    flex: 1 1 100%;
}
.opc-ghost {
    flex: 1 1 0;
    padding: 7px 8px;
    font-size: 11.5px;
}
.opc-foot {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--tsk-faint);
    text-align: center;
}

/* ---------- 4. 画布工作室 ---------- */
.opc-studio {
    margin: 4px 0 24px;
    padding: 16px 18px 18px;
    border: 1px solid var(--tsk-line);
    border-radius: 14px;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
}
.opc-studio-hd {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--tsk-line-2);
}
.opc-studio-hd b {
    display: block;
    font-size: 13px;
}
.opc-studio-hd span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--tsk-faint);
}
.opc-studio-tags {
    display: flex;
    gap: 5px;
    margin-left: auto;
}
.opc-tag {
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--tsk-line-2);
    color: var(--tsk-sub);
    font-size: 10.5px;
}
.opc-tag.on {
    background: var(--tsk-brand-soft);
    color: var(--tsk-brand-ink);
}
.opc-canvas-wrap {
    position: relative;
    margin-top: 12px;
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 12px;
    border-radius: 10px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, .04) 25%, transparent 25%) 0 0 / 18px 18px,
        linear-gradient(-45deg, rgba(255, 255, 255, .04) 25%, transparent 25%) 0 9px / 18px 18px,
        #17130f;
    overflow: hidden;
}
.opc-canvas-wrap canvas {
    display: block;
    max-width: 100%;
    max-height: 66vh;
    cursor: crosshair;
    touch-action: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.opc-cursor {
    position: absolute;
    border: 1.5px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 3;
}
.opc-rawbadge {
    position: absolute;
    right: 14px;
    top: 14px;
    padding: 3px 9px;
    border-radius: 3px;
    background: rgba(43, 36, 30, .85);
    color: #fff;
    font-size: 10.5px;
}
.opc-tip {
    margin-top: 9px;
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--tsk-faint);
}

/* ---------- 5. 自动 / 手工 ---------- */
.opc-sec-sub {
    margin-left: auto;
    font-size: 12px;
    color: var(--tsk-faint);
}
.opc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.opc-split-card {
    padding: 17px 18px;
    border: 1px solid var(--tsk-line);
    border-radius: 10px;
    background: var(--tsk-card);
    box-shadow: var(--tsk-shadow-sm);
}
.opc-split-card b {
    font-size: 13.5px;
}
.opc-split-card p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.76;
    color: var(--tsk-sub);
}
.opc-swatches {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}
.opc-swatches span {
    flex: 1 1 0;
    height: 34px;
    border-radius: 6px;
    position: relative;
}
.opc-swatches span i {
    position: absolute;
    inset: auto 0 3px 0;
    text-align: center;
    font-style: normal;
    font-size: 9.5px;
    color: rgba(0, 0, 0, .55);
}
.opc-brush-demo {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 12px;
    height: 34px;
}
.opc-brush-demo i {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tsk-brand-soft);
    border: 1.5px solid var(--tsk-brand);
}
.opc-brush-demo i:nth-child(2) { width: 18px; height: 18px; opacity: .8; }
.opc-brush-demo i:nth-child(3) { background: #c98b6b; border-color: #a9765a; }
.opc-brush-demo i:nth-child(4) { background: #7b95a8; border-color: #5f7688; }
.opc-brush-demo i:nth-child(5) { background: #8fa17a; border-color: #6e8259; }

/* ---------- 6. 对比表 ---------- */
.opc-compare {
    display: grid;
    gap: 1px;
    border: 1px solid var(--tsk-line);
    border-radius: 9px;
    background: var(--tsk-line);
    overflow: hidden;
}
.opc-compare-row {
    display: grid;
    grid-template-columns: 140px 160px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 15px;
    background: var(--tsk-card);
    font-size: 12px;
    line-height: 1.7;
}
.opc-compare-name {
    font-weight: 800;
    color: var(--tsk-ink);
}
.opc-compare-use {
    color: var(--tsk-brand-ink);
}
.opc-compare-note {
    color: var(--tsk-sub);
}

/* ---------- 7. 技巧与场景 ---------- */
.opc-tips {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 8px;
}
.opc-tips li {
    padding: 12px 14px;
    border: 1px solid var(--tsk-line);
    border-radius: 8px;
    background: var(--tsk-card);
    font-size: 12px;
    line-height: 1.72;
}
.opc-tips b {
    display: block;
    margin-bottom: 2px;
    font-size: 12.5px;
}
.opc-tips span {
    color: var(--tsk-sub);
}
.opc-scenes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
    gap: 9px;
}
.opc-scene {
    padding: 14px 15px;
    border: 1px solid var(--tsk-line);
    border-top: 3px solid var(--tsk-accent);
    border-radius: 8px;
    background: var(--tsk-card);
}
.opc-scene b {
    font-size: 12.5px;
}
.opc-scene p {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.72;
    color: var(--tsk-sub);
}

/* ---------- 8. 响应式 ---------- */
@media (max-width: 900px) {
    .opc-hero {
        gap: 20px;
    }
    .opc-panel {
        height: auto;
    }
    .opc-split {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .opc-meta,
    .opc-row2 {
        grid-template-columns: 1fr 1fr;
    }
    .opc-tools {
        grid-template-columns: 1fr 1fr;
    }
    .opc-compare-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .opc-tips,
    .opc-scenes {
        grid-template-columns: 1fr;
    }
    .opc-canvas-wrap canvas {
        max-height: 48vh;
    }
}

/* ---------- 9. 深色微调 ---------- */
:root[data-theme="dark"] .opc-drop {
    background:
        radial-gradient(circle at 18% 22%, rgba(224, 138, 108, .09) 0 3px, transparent 3px),
        radial-gradient(circle at 82% 76%, rgba(127, 194, 174, .09) 0 3px, transparent 3px),
        #2a241c;
    border-color: #4a3d2f;
}
:root[data-theme="dark"] .opc-drop:hover,
:root[data-theme="dark"] .opc-drop.over {
    background-color: #33281f;
}
:root[data-theme="dark"] .opc-canvas-wrap {
    background:
        linear-gradient(45deg, rgba(255, 255, 255, .035) 25%, transparent 25%) 0 0 / 18px 18px,
        linear-gradient(-45deg, rgba(255, 255, 255, .035) 25%, transparent 25%) 0 9px / 18px 18px,
        #0b0907;
}
:root[data-theme="dark"] .opc-tool.on {
    color: #15120e;
}
:root[data-theme="dark"] .opc-swatches span i {
    color: rgba(255, 255, 255, .6);
}

/* ---------- 10. 打印与动效 ---------- */
@media print {
    .opc-panel,
    .opc-tools,
    .opc-studio-tags {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .opc-colors button:hover {
        transform: none;
    }
}