/* ==========================================================================
   resizer.css —— 图片缩放器专用样式（templates/{lang}/resize.twig）
   只放 Tailwind 表达不了的东西：range 滑块外观、舞台光标、<dialog> 动效、
   忙碌遮罩。其余布局全部用 Tailwind 类（组件类见 resources/css/site.css）。
   深色工作区配色：底 #0b1220 / 面板 #111827 / 分隔 rgba(255,255,255,.06) / 强调 #3b82f6
   ========================================================================== */

.rp-root { --rp-brand: #3b82f6; --rp-brand-soft: rgba(59,130,246,.35); --rp-track: #1f2937; }

/* ── 滑块 ─────────────────────────────────────────────────────────────── */
.rp-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--rp-track);
    outline: none;
    cursor: pointer;
}
.rp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--rp-brand);
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    transition: transform .1s;
}
.rp-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.rp-range::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--rp-brand);
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.rp-range:focus-visible { outline: none; }
.rp-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--rp-brand-soft); }
.rp-range:disabled { opacity: .4; cursor: not-allowed; }
/* 质量滑块：左“更小的文件”→ 右“更好的画质” */
.rp-range-quality { background: linear-gradient(90deg, #f59e0b, #3b82f6 60%, #10b981); }

/* ── 舞台 ─────────────────────────────────────────────────────────────── */
.rp-stage { touch-action: none; }
.rp-stage canvas { image-rendering: auto; }
/* 处理中：舞台略微变淡，提示等待 */
.rp-root.rp-busy .rp-stage { opacity: .7; transition: opacity .2s; }
.rp-root.rp-busy .rp-stage-wrap::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(11,18,32,.25);
    pointer-events: none;
}

/* 舞台里的小旋转动画（读取 / 计算中） */
.rp-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.2);
    border-top-color: var(--rp-brand);
    border-radius: 50%;
    animation: rpSpin .8s linear infinite;
}
@keyframes rpSpin { to { transform: rotate(360deg); } }

/* 数字输入框去掉浏览器的上下箭头，界面更干净（键盘 ↑↓ 仍可用） */
.rp-field[type="number"] { -moz-appearance: textfield; }
.rp-field[type="number"]::-webkit-outer-spin-button,
.rp-field[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 背景色小色块（透明 → JPG 时用） */
.rp-swatch {
    width: 26px; height: 26px;
    border-radius: 7px;
    border: 2px solid rgba(255,255,255,.14);
    cursor: pointer;
}
.rp-swatch:hover { border-color: rgba(255,255,255,.4); }
.rp-swatch.is-active { border-color: var(--rp-brand); box-shadow: 0 0 0 2px var(--rp-brand-soft); }
.rp-swatch-custom { position: relative; overflow: hidden; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); }
.rp-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* ── 对话框 ───────────────────────────────────────────────────────────── */
.rp-dialog {
    padding: 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: #111827;
    color: #e2e8f0;
    box-shadow: 0 40px 100px -20px rgba(0,0,0,.7);
    max-height: calc(100vh - 2rem);
    overflow: auto;
}
.rp-dialog::backdrop { background: rgba(2, 6, 23, .7); backdrop-filter: blur(4px); }
.rp-dialog[open] { animation: rpDialogIn .18s ease-out; }
@keyframes rpDialogIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* 下载完成提示 */
.rp-toast { opacity: 0; }
.rp-toast.is-on { opacity: 1; }

/* ── “?” 帮助图标 + 气泡（说明文字不占版面；悬停 / 键盘聚焦 / 点击（触屏）显示） ─── */
.rp-help {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.05);
    color: #94a3b8;
    font-size: 10px; font-weight: 700; line-height: 1;
    vertical-align: middle;
    cursor: help;
    flex-shrink: 0;
}
.rp-help:hover, .rp-help:focus-visible, .rp-help.is-open { color: #fff; border-color: var(--rp-brand); background: rgba(59,130,246,.25); outline: none; }
/* 气泡隐藏时必须 display:none —— visibility:hidden 的绝对定位元素仍会撑出页面宽度，
   右栏的 “?” 曾因此让页面出现横向滚动条（2026-09-21） */
.rp-help::after {
    content: attr(data-tip);
    display: none;
    position: absolute; left: calc(-8px + var(--tip-shift, 0px)); top: calc(100% + 8px);
    width: 264px; max-width: calc(100vw - 32px);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
    background: #1f2937;
    color: #e2e8f0;
    font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: 0;
    white-space: normal;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    pointer-events: none;
    z-index: 40;
}
.rp-help::before {
    content: "";
    display: none;
    position: absolute; left: 3px; top: calc(100% + 3px);
    border: 5px solid transparent; border-bottom-color: #1f2937;
    z-index: 41;
}
.rp-help:hover::after, .rp-help:focus-visible::after, .rp-help.is-open::after,
.rp-help:hover::before, .rp-help:focus-visible::before, .rp-help.is-open::before { display: block; animation: rpTipIn .12s ease; }
@keyframes rpTipIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* 放不下时整体平移（--tip-shift 由 resizer.js 在显示前按视口宽度算出），小箭头始终留在图标下方 */

/* ── 品质预览对话框：两块可滚动的看图区（同步滚动） ───────────────────── */
.rp-pv-pane {
    height: 58vh; min-height: 220px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    overscroll-behavior: contain;
    cursor: grab;
}
.rp-pv-pane canvas, .rp-pv-pane img { display: block; max-width: none; }
.rp-pv-pane.is-pixel canvas, .rp-pv-pane.is-pixel img { image-rendering: pixelated; image-rendering: crisp-edges; }
@media (max-width: 767px) { .rp-pv-pane { height: 34vh; } }

/* ── 浅色主题（html[data-theme="light"]）：手写样式的颜色覆盖；Tailwind 组件类的覆盖在 site.css ── */
[data-theme="light"] .rp-root { --rp-track: #e2e8f0; }
[data-theme="light"] .rp-checker {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
}
[data-theme="light"] .rp-range::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(15,23,42,.3); }
[data-theme="light"] .rp-range::-moz-range-thumb { box-shadow: 0 1px 3px rgba(15,23,42,.3); }
[data-theme="light"] .rp-spinner { border-color: rgba(15,23,42,.12); border-top-color: var(--rp-brand); }
[data-theme="light"] .rp-root.rp-busy .rp-stage-wrap::after { background: rgba(255,255,255,.35); }
[data-theme="light"] .rp-swatch { border-color: rgba(15,23,42,.15); }
[data-theme="light"] .rp-dialog { background: #fff; border-color: #e2e8f0; color: #334155; box-shadow: 0 40px 100px -20px rgba(15,23,42,.35); }
[data-theme="light"] .rp-dialog::backdrop { background: rgba(15,23,42,.45); }
[data-theme="light"] .rp-help { border-color: #cbd5e1; background: #f8fafc; color: #64748b; }
[data-theme="light"] .rp-help:hover, [data-theme="light"] .rp-help:focus-visible, [data-theme="light"] .rp-help.is-open { color: #fff; border-color: var(--rp-brand); background: var(--rp-brand); }
[data-theme="light"] .rp-pv-pane { border-color: #e2e8f0; }