/* ==========================================================================
   convert.css —— 转换器专用样式（templates/{lang}/convert.twig）
   只放 Tailwind 表达不了的东西：range 滑块外观、预览视口（缩放 / 平移 / 对比分割线）、
   进度条动效、提示条。其余布局全部用 Tailwind 类（组件类见 resources/css/site.css）。
   深色工作区配色：底 #0b1220 / 面板 #111827 / 分隔 rgba(255,255,255,.06) / 强调 #8b5cf6
   ========================================================================== */

.vz-root { --vz-brand: #8b5cf6; --vz-brand-soft: rgba(139,92,246,.35); --vz-track: #1f2937; }

/* ── 滑块 ─────────────────────────────────────────────────────────────── */
.vz-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--vz-track);
    outline: none;
    cursor: pointer;
}
.vz-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--vz-brand);
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    transition: transform .1s;
}
.vz-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.vz-range::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--vz-brand);
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.vz-range:focus-visible { outline: none; }
.vz-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--vz-brand-soft); }
.vz-range:disabled { opacity: .4; cursor: not-allowed; }
/* 黑白阈值滑块：黑 → 白 底色 */
.vz-range-threshold { background: linear-gradient(90deg, #000, #fff); }

/* 颜色输入：只显示色块 */
.vz-color {
    -webkit-appearance: none; appearance: none;
    width: 36px; height: 36px; padding: 0;
    border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
    background: transparent; cursor: pointer;
}
.vz-color::-webkit-color-swatch-wrapper { padding: 2px; }
.vz-color::-webkit-color-swatch { border: none; border-radius: 7px; }
.vz-color::-moz-color-swatch { border: none; border-radius: 7px; }

/* ── 预览视口 ─────────────────────────────────────────────────────────── */
.vz-viewport {
    position: relative;
    overflow: hidden;
    height: min(72vh, 760px);
    min-height: 360px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.vz-viewport.is-panning { cursor: grabbing; }
.vz-viewport[data-bg="white"] { background: #fff; }
.vz-viewport[data-bg="dark"]  { background: #0b1220; }
.vz-viewport[data-bg="checker"] {
    background-color: #2b3646;
    background-image:
        linear-gradient(45deg, #3d4a5e 25%, transparent 25%),
        linear-gradient(-45deg, #3d4a5e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #3d4a5e 75%),
        linear-gradient(-45deg, transparent 75%, #3d4a5e 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
/* 内容层：原图与 SVG 叠在同一个 transform 容器里，尺寸 = 原图像素 */
.vz-stage {
    position: absolute; left: 0; top: 0;
    transform-origin: 0 0;
    will-change: transform;
}
.vz-stage > * { position: absolute; left: 0; top: 0; display: block; }
.vz-stage img { image-rendering: auto; }
.vz-stage.is-pixel img { image-rendering: pixelated; }
.vz-stage svg { width: 100%; height: 100%; overflow: visible; }
/* 视图模式：original / split / svg */
.vz-viewport[data-view="original"] .vz-layer-svg { visibility: hidden; }
.vz-viewport[data-view="svg"] .vz-layer-original { visibility: hidden; }
/* 对比分割线（split 模式） */
.vz-divider {
    position: absolute; top: 0; bottom: 0; width: 0;
    border-left: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.35);
    cursor: ew-resize;
    display: none;
    z-index: 3;
}
.vz-divider::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border-radius: 50%; background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1220' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");
    background-size: 20px; background-position: center; background-repeat: no-repeat;
}
.vz-divider-label {
    position: absolute; top: 10px; padding: 2px 8px; border-radius: 6px;
    font: 600 10px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .08em; text-transform: uppercase;
    background: rgba(11,18,32,.75); color: #e2e8f0; white-space: nowrap;
}
.vz-divider-label.is-left { right: 10px; }
.vz-divider-label.is-right { left: 10px; }
.vz-viewport[data-view="split"] .vz-divider { display: block; }

/* 处理中：SVG 层稍微变淡 + 顶部细进度条 */
.vz-progress { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--vz-brand); z-index: 4; transition: width .15s ease; opacity: 0; }
.vz-root.vz-busy .vz-progress { opacity: 1; }
.vz-root.vz-busy .vz-layer-svg { opacity: .55; transition: opacity .15s; }
.vz-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--vz-brand); animation: vzSpin .8s linear infinite; }
@keyframes vzSpin { to { transform: rotate(360deg); } }

/* 空状态的示例缩略图 */
.vz-sample { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; background: #fff; transition: transform .12s, border-color .12s; }
.vz-sample:hover { transform: translateY(-2px); border-color: var(--vz-brand); }
.vz-sample img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8px; }

/* 提示条（convert.js §10） */
.vz-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
    max-width: min(92vw, 520px); padding: 10px 16px; border-radius: 12px;
    background: #161f31; color: #e2e8f0; border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
    font-size: 13px; line-height: 1.45; opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s; z-index: 60;
}
.vz-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.vz-toast.is-error { border-color: rgba(244,63,94,.5); }
.vz-toast button { margin-left: 12px; font-weight: 600; color: #c4b5fd; }

/* 键盘快捷键提示 */
.vz-kbd { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); border-radius: 4px; padding: 0 5px; font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #94a3b8; }