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

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

/* ── 滑块 ─────────────────────────────────────────────────────────────── */
.ie-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--ie-track);
    outline: none;
    cursor: pointer;
}
.ie-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ie-brand);
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    transition: transform .1s;
}
.ie-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.ie-range::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ie-brand);
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.ie-range:focus-visible { outline: none; }
.ie-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ie-brand-soft); }

/* RGBA 四条滑块底色 */
.ie-range-r { background: linear-gradient(90deg, #000, #f00); }
.ie-range-g { background: linear-gradient(90deg, #000, #0f0); }
.ie-range-b { background: linear-gradient(90deg, #000, #00f); }
.ie-range-a {
    background:
        linear-gradient(90deg, rgba(255,255,255,0), #fff),
        repeating-conic-gradient(#3d4a5e 0 25%, #2b3646 0 50%) 0 0 / 8px 8px;
}

/* ── 色板 ─────────────────────────────────────────────────────────────── */
.ie-swatch {
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}
.ie-swatch:hover { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

/* 画布背景切换按钮 */
.ie-bg-swatch {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,.12);
    cursor: pointer;
}
.ie-bg-swatch:hover { border-color: rgba(255,255,255,.35); }
.ie-bg-swatch.is-active { border-color: var(--ie-brand); box-shadow: 0 0 0 2px var(--ie-brand-soft); }
/* 自定义色块：左边色块（选色前显示色轮，选色后由内联 background 覆盖）+ 右边下拉箭头 */
.ie-bg-custom { width: auto; padding: 0 3px 0 2px; display: inline-flex; align-items: center; gap: 3px; background: rgba(255,255,255,.04); }
.ie-bg-custom-fill { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); }
.ie-bg-custom svg { width: 12px; height: 12px; color: #94a3b8; flex-shrink: 0; }
.ie-bg-custom:hover svg { color: #e2e8f0; }

/* ── 画布 ─────────────────────────────────────────────────────────────── */
.ie-stage { touch-action: none; }
.ie-stage canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.ie-stage[data-cursor="crosshair"]  { cursor: crosshair; }
.ie-stage[data-cursor="text"]       { cursor: text; }
.ie-stage[data-cursor="copy"]       { cursor: copy; }
.ie-stage[data-cursor="cell"]       { cursor: cell; }
.ie-stage[data-cursor="none"]       { cursor: none; }
.ie-stage[data-cursor="default"]    { cursor: default; }

/* 尺寸卡片里的缩略图：小尺寸放大显示，保持像素锐利 */
.ie-thumb { image-rendering: pixelated; image-rendering: crisp-edges; }

/* 服务端处理中：画布略微变淡，提示等待 */
.ie-root.ie-busy .ie-stage { opacity: .7; transition: opacity .2s; }

/* ── 对话框 ───────────────────────────────────────────────────────────── */
.ie-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;
}
.ie-dialog::backdrop { background: rgba(2, 6, 23, .7); backdrop-filter: blur(4px); }
.ie-dialog[open] { animation: ieDialogIn .18s ease-out; }
@keyframes ieDialogIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* 导出对话框里的代码标签页 */
.ie-tab {
    padding: .45rem .8rem;
    font-size: .75rem;
    font-weight: 500;
    color: #94a3b8;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s;
}
.ie-tab:hover { color: #e2e8f0; }
.ie-tab.is-active { color: #93c5fd; border-color: var(--ie-brand); }
.ie-tabpanel { background: #0b1220; border: 1px solid rgba(255,255,255,.06); }

/* ── 预览：Windows 场景 ──────────────────────────────────────────────── */
.ie-preview-card { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; background: #0b1220; }
.ie-preview-card h4 { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; padding: .55rem .9rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.ie-preview-card canvas { image-rendering: auto; }
.ie-win-wallpaper { background: radial-gradient(120% 120% at 20% 10%, #3b82f6 0%, #1e3a8a 60%, #0f172a 100%); }
.ie-win-taskbar   { background: #202020; }
.ie-win-titlebar  { background: #f3f3f3; border-bottom: 1px solid #e5e7eb; color: #1f2937; }
.ie-win-explorer  { background: #fff; color: #1f2937; }
.ie-win-start     { background: #eef2f8; color: #1f2937; }