/* --- 1. 核心样式 --- */
        :root {
            --sidebar-width: 187px;
            --primary: #111827;
            --primary-soft: #eef2f6;
            --primary-hover: #000000;
            --text: #191c1e;
            --muted: #5c6270;
            --bg: #f7f9fb;
            --panel-bg: #ffffff;
            --border: #cfd6de;
            --input-bg: #ffffff;
            --surface-soft: #f8fafc;
            --surface-muted: #f2f4f6;
            --shadow: 0 2px 8px rgba(19, 27, 46, .025);
        }
        :root[data-theme="dark"] {
            color-scheme: dark;
            --primary: #f2f5f8;
            --primary-soft: #242a33;
            --primary-hover: #ffffff;
            --text: #f2f5f8;
            --muted: #9ca6b4;
            --bg: #0f1319;
            --panel-bg: #151a22;
            --border: #303a48;
            --input-bg: #1b222d;
            --surface-soft: #1b222d;
            --surface-muted: #222b38;
            --shadow: 0 2px 8px rgba(0, 0, 0, .18);
        }
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: Inter, "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif; outline: none; -webkit-tap-highlight-color: transparent; }
        body { background: var(--bg); color: var(--text); height: 100vh; display: flex; overflow: hidden; }

        /* --- 2. 布局结构 --- */
        .app { display: flex; width: 100%; height: 100%; }
        .sidebar { width: var(--sidebar-width); flex:0 0 var(--sidebar-width); background: var(--panel-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; box-shadow:none; z-index: 2; }
        .nav-item { min-height:46px; padding: 11px 15px; cursor: pointer; color: var(--muted); display: flex; gap:9px; align-items: center; transition:background 120ms ease, color 120ms ease, border-color 120ms ease; border-right: 2px solid transparent; white-space:nowrap; font-size:.72rem; }
        .nav-item:hover { background: var(--surface-soft); color: var(--text); }
        .nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; border-right-color: var(--primary); }
        .nav-item svg { width:18px; height:18px; flex:0 0 auto; fill:currentColor; }
        .tool-glyph { width:18px; height:18px; flex:0 0 auto; display:grid; place-items:center; color:currentColor; font-size:17px; font-weight:800; line-height:1; }
        .tool-glyph svg { width:18px; height:18px; fill:currentColor; }
        .nav-copy { min-width:0; display:grid; gap:2px; line-height:1.05; }
        .nav-copy small { color:var(--muted); font-size:.58rem; font-weight:500; letter-spacing:.01em; }
        .nav-item.active .nav-copy small { color:currentColor; opacity:.68; }
        .sidebar-brand { min-height:76px; padding:17px 15px 14px; border-bottom:1px solid var(--border); }
        .sidebar-brand strong { display:block; color:var(--text); font-size:1.12rem; line-height:1.2; letter-spacing:-.02em; }
        .sidebar-brand span { display:block; margin-top:5px; color:var(--muted); font-size:.62rem; line-height:1.25; }
        .sidebar-brand .feedback-link { display:block; margin-top:6px; color:var(--muted); font-size:.56rem; line-height:1.2; text-decoration:none; white-space:nowrap; }
        .sidebar-brand .feedback-link:hover { color:var(--primary); text-decoration:underline; }
        .sidebar-footer { margin-top:auto; padding:10px 12px 12px; display:grid; gap:10px; border-top:1px solid var(--border); }
        .ad-card { position:relative; height:117px; padding:12px; overflow:hidden; border:0; border-radius:8px; background:linear-gradient(145deg,#111827 0%,#263449 72%,#334155 100%); box-shadow:0 8px 20px rgba(15,23,42,.16); color:#fff; }
        .ad-card::before { content:""; position:absolute; width:82px; height:82px; right:-30px; top:-35px; border-radius:50%; background:rgba(96,165,250,.2); }
        .ad-card::after { content:""; position:absolute; width:54px; height:54px; right:13px; bottom:-37px; border:10px solid rgba(255,255,255,.06); border-radius:50%; }
        .ad-card strong, .ad-card span { display:block; }
        .ad-card .ad-eyebrow { position:relative; z-index:1; width:max-content; margin-bottom:6px; padding:2px 6px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#bfdbfe; font-size:.56rem; font-weight:800; letter-spacing:.1em; }
        .ad-card strong { position:relative; z-index:1; margin-bottom:3px; font-size:.92rem; color:#fff; }
        .ad-card .ad-copy { position:relative; z-index:1; margin-bottom:7px; color:#cbd5e1; font-size:.65rem; line-height:1.25; white-space:normal; }
        .ad-card a { position:relative; z-index:1; display:inline-flex; align-items:center; gap:4px; color:#93c5fd; font-size:.66rem; font-weight:700; overflow-wrap:anywhere; text-decoration:none; }
        .ad-card a:hover { color:#fff; }
        .footer-preferences { width:100%; display:flex; align-items:center; justify-content:flex-end; gap:6px; }
        .theme-control { position:relative; display:grid; }
        .theme-control::before { content:"UI 明暗风格调整"; position:absolute; right:0; bottom:calc(100% + 7px); width:max-content; padding:6px 8px; border-radius:4px; background:#111827; color:#fff; font-size:.68rem; line-height:1; box-shadow:0 6px 18px rgba(15,23,42,.2); opacity:0; visibility:hidden; transform:translateY(3px); transition:opacity 120ms ease, transform 120ms ease, visibility 120ms ease; pointer-events:none; z-index:20; }
        html[lang="en"] .theme-control::before { content:"Light / dark theme"; }
        .theme-control:hover::before, .theme-control:focus-within::before { opacity:1; visibility:visible; transform:translateY(0); }
        .theme-options { display:grid; grid-template-columns:repeat(2,28px); gap:3px; width:max-content; height:28px; padding:2px; border:1px solid var(--border); border-radius:6px; background:var(--surface-soft); }
        .theme-option { width:28px; height:22px; min-height:0; padding:0; border:0; border-radius:4px; color:var(--muted); background:transparent; cursor:pointer; font-size:0; }
        .theme-option::before { font-size:.76rem; line-height:1; }
        .theme-option[data-theme-option="light"]::before { content:"☀"; }
        .theme-option[data-theme-option="dark"]::before { content:"☾"; }
        .theme-option.active { color:var(--primary); background:var(--panel-bg); box-shadow:0 1px 5px rgba(15,23,42,.12); font-weight:700; }
        .language-options { display:grid; grid-template-columns:repeat(2,28px); gap:3px; width:max-content; height:28px; margin-right:auto; padding:2px; border:1px solid var(--border); border-radius:6px; background:var(--surface-soft); }
        .language-option { width:28px; height:22px; min-height:0; padding:0; border:0; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; font-size:.7rem; font-weight:500; }
        .language-option.active { color:var(--primary); background:var(--panel-bg); box-shadow:0 1px 5px rgba(15,23,42,.12); font-weight:500; }
        html[lang="en"] .ad-card strong { font-size:.82rem; }
        html[lang="en"] .ad-card .ad-copy { font-size:.58rem; }
        html[lang="en"] .ad-card a { display:flex; max-width:100%; font-size:.58rem; line-height:1.15; word-break:break-all; }

        .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
        .mobile-header, .mobile-menu, .mobile-home { display:none; }
        .scroll-area { flex: 1; min-height:0; overflow-y: auto; padding: 20px; }
        .scroll-area.embed-mode { padding:0; overflow:hidden; }
        .tool-page { display: none; max-width: 1000px; margin: 0 auto; padding-bottom: 100px; }
        .tool-page.active { display: block; }
        .puzzle-tabs { display:flex; gap:0; margin:0; padding:0; width:100%; border-bottom:1px solid var(--border); background:transparent; }
        .puzzle-tab { position:relative; bottom:-1px; min-height:38px; padding:8px 16px; border:1px solid transparent; border-radius:0; background:transparent; color:var(--muted); cursor:pointer; font-size:.86rem; font-weight:650; }
        .puzzle-tab.active { background:var(--panel-bg); color:var(--primary); border-color:var(--border); border-bottom-color:var(--panel-bg); box-shadow:none; }
        .puzzle-panel > .card { border-top:0; border-radius:0; }
        .puzzle-panel { display:none; }
        .puzzle-panel.active { display:block; }
        #tool-collage, #tool-resize, #tool-convert, #tool-video-frames, #tool-lasso { max-width:1200px; }
        .puzzle-workspace { display:grid; grid-template-columns:minmax(320px, .72fr) minmax(0, 1.28fr); gap:18px; align-items:start; }
        .puzzle-controls-column, .puzzle-result-column { min-width:0; }
        .puzzle-source-card { padding-bottom:14px; }
        .puzzle-source-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
        .puzzle-source-head strong { color:var(--text); }
        .puzzle-source-card .staging-area { margin:8px 0 0; }
        .puzzle-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-bottom:10px; }
        .puzzle-result-head span { color:var(--muted); font-size:.86rem; font-weight:650; }
        .puzzle-output { display:none; }
        .puzzle-output.active { display:block; }
        .puzzle-result-column .canvas-wrapper { min-height:520px; max-height:calc(100vh - 125px); }
        #collage-ratio { width:150px; }
        .puzzle-layout-label { margin-top:16px; }
        .tool-page > .card > h2:first-child { display:none; }
        .mobile-nav-item svg { width:16px; height:16px; margin-right:6px; vertical-align:-3px; fill:currentColor; }
        .mobile-nav-item .tool-glyph { display:inline-grid; margin-right:6px; vertical-align:-4px; }
        .mobile-nav-item .tool-glyph svg { margin-right:0; vertical-align:0; }
        .mobile-tool-icon svg { width:17px; height:17px; fill:currentColor; }
        .card { background: var(--panel-bg); border-radius: 6px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--border); box-shadow: var(--shadow); }
        h2 { margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 10px; font-size: 1.2rem; color: var(--text); }

        /* --- 3. 组件样式 --- */
        .btn { min-height: 36px; padding: 7px 14px; border-radius: 4px; border:none; cursor: pointer; color: white; display: inline-flex; align-items: center; justify-content:center; gap:5px; font-size: 0.86rem; font-weight:700; letter-spacing:.03em; transition:background 120ms ease, border-color 120ms ease, color 120ms ease; text-decoration:none; }
        .btn:disabled { opacity: 0.5; cursor: wait; }
        .btn:hover { filter: brightness(1.03); }
        .btn-primary { background: var(--primary); }
        .btn-success { background: #111827; }
        .btn-danger { background: #b42318; }
        .btn-outline { border: 1px solid var(--border); background: var(--panel-bg); color: var(--text); }
        .btn-outline:hover { border-color: var(--primary); color: var(--primary); }
        .btn-outline.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); font-weight: 650; }
        input[type="number"], input[type="text"], select {
            background: var(--input-bg); color: var(--text); border: 1px solid var(--border); padding: 9px 10px;
            border-radius: 4px; transition: border-color 120ms ease; font-size: .9rem;
        }
        input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
        .field-label { display:block; margin-bottom:6px; font-size:.85rem; color:var(--muted); font-weight:600; }
        .hint { color:var(--muted); font-size:.82rem; line-height:1.55; }
        .status { margin-top:12px; padding:10px 12px; border-radius:8px; background:var(--surface-soft); color:var(--muted); font-size:.86rem; display:none; }
        .status.show { display:block; }
        .status.error { color:#b91c1c; background:#fef2f2; }
        .status.success { color:#047857; background:#ecfdf5; }
        
        /* 缩略图区 */
        .staging-area { 
            display: flex; gap: 10px; overflow-x: auto; margin-bottom: 20px; padding: 5px 0; 
            align-items: center; min-height: 84px;
        }
        .staging-item { 
            width: 70px; height: 70px; flex-shrink: 0; border-radius: 8px; position: relative; overflow: hidden; 
            border: 2px solid #d7e0eb; background: #eef2f7;
        }
        .staging-item img { width: 100%; height: 100%; object-fit: cover; }
        .staging-del { 
            position: absolute; top:0; right:0; background:rgba(0,0,0,0.7); color:white; 
            width:20px; height:20px; border:none; cursor:pointer; font-size:14px; line-height:18px;
        }
        
        /* 添加按钮 */
        .add-btn-small {
            width: 70px; height: 70px; flex-shrink: 0; border: 2px dashed #6b7280; border-radius: 8px;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            color: #94a3b8; font-size: 30px; position: relative; transition: 0.2s;
            background: var(--surface-soft);
        }
        .add-btn-small:hover { border-color: var(--primary); color: var(--primary); background: rgba(37, 99, 235, 0.1); }
        .add-btn-small input { position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor: pointer; }

        .collage-style-row { display:grid; grid-template-columns:auto minmax(70px, 1fr) auto 42px; gap:10px; align-items:center; margin-top:20px; }
        .collage-style-row label { font-size:.9rem; white-space:nowrap; }
        #collage-gap { width:100%; min-width:0; }
        #collage-bg-color { width:42px; min-width:42px; height:30px; padding:2px; border:1px solid var(--border); border-radius:4px; background:var(--input-bg); cursor:pointer; }
        #collage-bg-color::-webkit-color-swatch-wrapper { padding:0; }
        #collage-bg-color::-webkit-color-swatch { border:0; border-radius:2px; }
        #collage-bg-color::-moz-color-swatch { border:0; border-radius:2px; }

        /* 上传大框 (用于格式转换等) */
        .upload-large {
            border: 2px dashed var(--border); border-radius: 6px; padding: 32px; text-align: center; 
            background: var(--surface-soft); position: relative; cursor: pointer; color: var(--muted); margin-bottom: 20px; transition:.2s;
        }
        .upload-large:hover { border-color: var(--primary); color: var(--primary); }
        .upload-large input { position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor: pointer; }

        /* 素材类工具使用同一套左右工作区、拖放区与控件面板 */
        .media-workspace { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:16px; align-items:start; }
        .media-source-column, .media-controls-column { min-width:0; }
        .media-dropzone { height:400px; min-height:400px; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
        .media-dropzone p { margin:2px 0; }
        .media-drop-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:8px; border-radius:14px; background:var(--primary-soft); color:var(--primary); }
        .media-drop-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
        .media-controls-column { display:grid; align-content:start; gap:14px; padding:16px; border:1px solid var(--border); border-radius:6px; background:var(--surface-soft); }
        .media-controls-column .tool-row { align-items:stretch; flex-direction:column; gap:12px; }
        .media-controls-column .btn, .media-controls-column select { width:100%; }
        .media-panel-title { margin:0; color:var(--text); font-size:.92rem; font-weight:750; }
        .media-file-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:10px 12px; border:1px solid var(--border); border-radius:6px; background:#f8fafc; }
        .media-file-info { min-width:0; }
        .media-file-info strong, .media-file-info span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

        /* 比例选择器 */
        .ratio-list { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 20px; padding-bottom:5px; }
        .ratio-btn { 
            border: 1px solid #cbd5e1; background: #fff; color: var(--muted); padding: 6px 11px; 
            border-radius: 6px; cursor: pointer; white-space: nowrap; font-size: 0.85rem;
        }
        .ratio-btn.active { border-color: var(--primary); color: var(--primary); background: rgba(37,99,235,0.1); font-weight: bold; }

        /* 动态模板图标 */
        .template-grid { display:grid; grid-template-columns:repeat(auto-fill, 44px); gap:6px; margin-bottom:16px; }
        .tpl-btn {
            width:44px; height:44px; border:1px solid #d7e0eb; border-radius:6px; background:#fff;
            cursor:pointer; padding:4px; display:grid; place-items:center;
        }
        .tpl-btn.active { border-color: var(--primary); background: rgba(37, 99, 235, 0.1); box-shadow: 0 0 0 1px var(--primary); }
        .template-icon-frame { display:block; flex:0 0 auto; }
        .template-icon-frame > .icon-box { width:100%; height:100%; }
        .icon-box { width: 100%; height: 100%; display: flex; gap: 2px; pointer-events: none; border-radius: 2px; overflow: hidden; }
        .ib-block { background: #94a3b8; flex: 1; min-width: 0; min-height: 0; }
        .tpl-btn.active .ib-block { background: var(--primary); }
        .l-col { flex-direction: column; }
        .l-row { flex-direction: row; }

        /* 画布 */
        .canvas-wrapper {
            background-color:#eef2f7;
            background-image: linear-gradient(45deg, #dce3eb 25%, transparent 25%), linear-gradient(-45deg, #dce3eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dce3eb 75%), linear-gradient(-45deg, transparent 75%, #dce3eb 75%);
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            background-size: 20px 20px; border: 1px solid var(--border); border-radius: 4px; padding: 20px;
            display: flex; justify-content: center; align-items: center; overflow: auto; min-height: 200px;
        }
        canvas, .preview-img { box-shadow: 0 5px 20px rgba(15,23,42,.18); max-width: 100%; max-height: 60vh; width: auto; height: auto; object-fit: contain; }
        #collage-canvas { cursor:grab; touch-action:none; user-select:none; }
        #collage-canvas.dragging { cursor:grabbing; }
        .original-size canvas, .original-size .preview-img { max-width: none; max-height: none; }
        #resize-canvas { cursor: grab; touch-action: none; user-select:none; }
        #resize-canvas.dragging { cursor: grabbing; }
        #resize-canvas.color-picking { cursor: crosshair; }
        #resize-dropzone.loaded { height:auto; min-height:400px; padding:0; border:0; cursor:default; overflow:visible; background:transparent; }
        #resize-dropzone.loaded #resize-empty-state, #resize-dropzone.loaded > #resize-input { display:none; }
        .resize-crop-stage { display:none; width:100%; min-height:400px; flex-direction:column; align-items:stretch; justify-content:flex-start; position:relative; padding:0; }
        #resize-dropzone.loaded .resize-crop-stage { display:flex; }
        .resize-workspace { grid-template-columns:minmax(0, 1fr) 300px; }
        .resize-preview-column #resize-dropzone { display:flex; align-items:center; justify-content:center; }
        .resize-canvas-shell { height:400px; min-height:400px; padding:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--border); border-radius:6px; background:var(--surface-soft); }
        .resize-preview-column, .resize-controls-column { min-width:0; }
        .resize-controls-column .tool-row { align-items:stretch; flex-direction:column; }
        .resize-controls-column .dimension-fields { width:100%; }
        .resize-controls-column .dimension-fields > div { flex:1; }
        .resize-controls-column .dimension-fields input { width:100%; }
        .resize-controls-column .btn { width:100%; }
        .resize-controls-column select, .resize-controls-column #resize-quality { width:100% !important; }
        .resize-crop-stage #resize-canvas { max-height:368px; }
        .resize-stage-bar { position:static; width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.06); text-align:left; }
        .resize-stage-info { min-width:0; }
        .resize-stage-info strong, .resize-stage-info span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .resize-stage-actions { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
        .resize-background-toggle { display:none; }
        .resize-background-toggle.show { display:inline-flex; }
        .resize-color-popover { display:none; position:fixed; z-index:1000; width:min(430px, calc(100vw - 24px)); padding:12px; border:1px solid #cbd5e1; border-radius:12px; background:#fff; box-shadow:0 16px 45px rgba(15,23,42,.28); text-align:left; color:var(--text); }
        .resize-color-popover.open { display:block; }
        .resize-color-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
        .resize-color-head strong { font-size:.95rem; }
        #resize-color-field { display:block; width:100%; height:220px; max-height:none; border:1px solid #94a3b8; border-radius:7px; box-shadow:none; cursor:crosshair; touch-action:none; }
        .resize-color-controls { display:flex; align-items:center; gap:12px; margin-top:12px; }
        .resize-color-preview { width:48px; height:48px; flex:0 0 auto; border:2px solid #d1d5db; border-radius:50%; background:#fff; }
        #resize-color-hue { flex:1; min-width:0; height:18px; padding:0; border:0; border-radius:999px; background:linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red); appearance:none; -webkit-appearance:none; }
        #resize-color-hue::-webkit-slider-runnable-track { height:18px; border-radius:999px; background:transparent; }
        #resize-color-hue::-webkit-slider-thumb { width:24px; height:24px; margin-top:-3px; border:3px solid #fff; border-radius:50%; background:transparent; box-shadow:0 0 0 1px #64748b, 0 1px 4px rgba(15,23,42,.35); appearance:none; -webkit-appearance:none; }
        #resize-color-hue::-moz-range-track { height:18px; border-radius:999px; background:transparent; }
        #resize-color-hue::-moz-range-thumb { width:20px; height:20px; border:3px solid #fff; border-radius:50%; background:transparent; box-shadow:0 0 0 1px #64748b; }
        .resize-rgb-fields { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:12px; }
        .resize-rgb-fields label { display:grid; gap:5px; text-align:center; font-size:.8rem; color:var(--muted); }
        .resize-rgb-fields input { width:100%; text-align:center; }
        .resize-color-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
        #resize-color-hex { color:var(--muted); font-size:.86rem; font-variant-numeric:tabular-nums; }
        .dimension-fields { display:flex; align-items:flex-end; gap:8px; }
        .dimension-fields input { width:112px; }
        .dimension-separator { color:var(--muted); padding-bottom:9px; }
        .tool-row { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
        .tool-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
        .file-summary { display:flex; align-items:center; gap:12px; margin-top:-8px; margin-bottom:18px; padding:12px; border:1px solid var(--border); background:#f8fafc; border-radius:10px; }
        .file-summary img { width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
        .file-summary strong { display:block; max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .convert-file-list { display:grid; gap:8px; margin:-8px 0 18px; }
        .convert-file-item { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; }
        .convert-file-item img { width:44px; height:44px; object-fit:cover; border-radius:7px; border:1px solid var(--border); }
        .convert-file-item strong, .convert-file-item span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .quality-control { display:flex; align-items:center; gap:9px; min-width:230px; }
        .quality-control input { width:170px; }
        .quality-control output { min-width:42px; color:var(--primary); font-weight:700; font-variant-numeric:tabular-nums; }
        .convert-result-toolbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin-bottom:12px; }
        .convert-page-nav { display:flex; align-items:center; justify-content:center; gap:8px; }
        .convert-result-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
        #convert-page-indicator { min-width:70px; text-align:center; color:var(--muted); font-size:.86rem; font-variant-numeric:tabular-nums; }
        #convert-result-meta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:650; }
        .convert-workspace { grid-template-columns:minmax(0,1fr) 300px; }
        .convert-preview-column, .convert-controls-column { min-width:0; }
        .convert-preview-column #convert-dropzone { display:flex; flex-direction:column; justify-content:center; }
        .convert-controls-column .tool-row { align-items:stretch; flex-direction:column; }
        .convert-controls-column select, .convert-controls-column .btn { width:100%; }
        .convert-controls-column .quality-control { width:100%; min-width:0; }
        .convert-controls-column .quality-control input { flex:1; width:auto; min-width:0; }
        .video-frames-workspace { display:block; }
        .video-workspace-grid { grid-template-columns:minmax(0,1fr) 300px; }
        .video-source-column, .video-output-column { min-width:0; }
        .video-source-column:not(.loaded) .video-preview-shell, .video-source-column:not(.loaded) .video-file-bar { display:none; }
        .video-source-column.loaded #video-frames-dropzone { display:none; }
        #video-frames-dropzone { display:flex; flex-direction:column; justify-content:center; }
        .video-output-column .video-trim-panel { margin-top:0; }
        .video-preview-shell { display:flex; align-items:center; justify-content:center; height:400px; padding:0; border-radius:6px; background:#000; overflow:hidden; }
        .video-preview-shell video { display:block; width:auto; height:100%; max-width:100%; object-fit:contain; background:#000; }
        .video-file-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; }
        .video-file-info { min-width:0; }
        .video-file-info strong, .video-file-info span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .video-trim-panel { margin-top:18px; padding:14px 16px 12px; border:1px solid var(--border); border-radius:12px; background:#f8fafc; }
        .video-trim-labels { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:.84rem; font-variant-numeric:tabular-nums; }
        .video-trim-labels strong { color:var(--text); font-size:12px; }
        .video-trim-slider { position:relative; height:38px; margin:6px 0 2px; }
        .video-trim-base, .video-trim-selection { position:absolute; top:16px; height:7px; border-radius:999px; pointer-events:none; }
        .video-trim-base { left:0; right:0; background:#cbd5e1; }
        .video-trim-selection { left:0; width:100%; background:var(--primary); }
        .video-trim-slider input[type="range"] { position:absolute; inset:0; width:100%; height:38px; margin:0; padding:0; appearance:none; -webkit-appearance:none; background:transparent; pointer-events:none; }
        .video-trim-slider input[type="range"]::-webkit-slider-runnable-track { height:7px; background:transparent; }
        .video-trim-slider input[type="range"]::-webkit-slider-thumb { width:20px; height:20px; margin-top:-6.5px; border:3px solid #fff; border-radius:50%; background:var(--primary); box-shadow:0 1px 6px rgba(15,23,42,.3); appearance:none; -webkit-appearance:none; pointer-events:auto; cursor:ew-resize; }
        .video-trim-slider input[type="range"]::-moz-range-track { height:7px; background:transparent; }
        .video-trim-slider input[type="range"]::-moz-range-thumb { width:16px; height:16px; border:3px solid #fff; border-radius:50%; background:var(--primary); box-shadow:0 1px 6px rgba(15,23,42,.3); pointer-events:auto; cursor:ew-resize; }
        .video-frames-result { display:none; margin-top:20px; }
        .video-frames-result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
        #video-frames-result-meta { color:var(--muted); font-size:.86rem; }
        .lasso-workspace { grid-template-columns:minmax(0, 1fr) 300px; }
        .lasso-preview-column, .lasso-controls-column { min-width:0; }
        .lasso-preview-column:not(.loaded) .lasso-preview-toolbar,
        .lasso-preview-column:not(.loaded) .lasso-canvas-wrapper,
        .lasso-preview-column:not(.loaded) .lasso-file-bar { display:none; }
        .lasso-preview-column.loaded #lasso-dropzone { display:none; }
        .lasso-file-group, .lasso-actions { display:flex; align-items:center; gap:8px; min-width:0; }
        .lasso-file-group { align-items:stretch; flex-direction:column; }
        .lasso-actions { align-items:stretch; flex-direction:column; }
        .lasso-preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
        .lasso-preview-toolbar { flex-wrap:wrap; gap:8px; }
        .lasso-tool-switch { display:flex; flex:1 0 100%; flex-wrap:wrap; gap:6px; }
        .lasso-tool-switch .btn { padding:6px 10px; }
        html[data-ui="shell"] .lasso-tool-switch button[aria-pressed="true"] { color:var(--ui-text); background:var(--ui-selected); border-color:var(--ui-focus); box-shadow:inset 0 -2px var(--ui-focus); }
        #lasso-wrapper { overflow:auto; touch-action:none; overscroll-behavior:contain; }
        #lasso-wrapper[data-lasso-tool="pan"], #lasso-wrapper[data-lasso-tool="pan"] #lasso-canvas { cursor:grab; }
        #lasso-wrapper.panning, #lasso-wrapper.panning #lasso-canvas { cursor:grabbing; }
        .lasso-history-actions { display:flex; align-items:center; gap:8px; }
        .lasso-history-button { width:36px !important; height:36px; min-height:36px; padding:0; display:grid; place-items:center; border-radius:50%; }
        .lasso-history-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
        .lasso-controls-column .btn { width:100%; }
        .lasso-file-name { max-width:100%; overflow:hidden; color:var(--text); font-size:.84rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
        .lasso-invert { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:.82rem; white-space:nowrap; }
        .lasso-invert input { margin:0; accent-color:var(--primary); }
        .lasso-canvas-wrapper { width:100%; height:400px; min-height:0; align-items:flex-start; justify-content:flex-start; overflow:hidden; background:#9ca3af; background-image:none; }
        .lasso-stage { position:relative; width:max-content; height:max-content; flex:0 0 auto; }
        #lasso-canvas { display:block; max-width:none; max-height:none; touch-action:none; cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M6 7c4-5 14-4 16 3 2 8-8 13-15 9-5-3-4-9-1-12Z' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M7 19c-1 3-3 4-5 3' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 2 22, crosshair; }
        #magnifier { position:absolute; z-index:5; width:100px; height:100px; display:none; overflow:hidden; border:2px solid #fff; border-radius:50%; pointer-events:none; box-shadow:0 4px 16px rgba(15,23,42,.35); background:#9ca3af; }
        #magnifier-canvas { display:block; width:100%; height:100%; max-width:none; max-height:none; box-shadow:none; }
        .lasso-zoom { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:0; flex:1; }
        .lasso-zoom input { flex:1; width:30%; min-width:0; accent-color:var(--primary); }
        .lasso-zoom output { min-width:48px; color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
        .lasso-download { margin-top:8px; }
        .stitch-direction { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
        .stitch-direction-button { min-height:42px; border:1px solid var(--border); border-radius:6px; background:var(--panel-bg); color:var(--muted); cursor:pointer; font-weight:650; }
        .stitch-direction-button.active { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
        .pdf-download { width:120px; margin-top:14px; }
        .staging-item, .add-btn-small, .ratio-btn, .tpl-btn, .resize-stage-bar, .resize-color-popover,
        .file-summary, .convert-file-item, .video-file-bar, .video-trim-panel, .media-file-bar { border-radius:6px; }
        .embedded-tool-page { max-width:none; height:100%; padding-bottom:0; }
        .embedded-tool-frame { display:block; width:100%; height:100%; min-height:680px; border:1px solid var(--border); border-radius:6px; background:var(--bg); box-shadow:var(--shadow); }
        .scroll-area.embed-mode .embedded-tool-page { width:100%; height:100%; margin:0; }
        .scroll-area.embed-mode .embedded-tool-frame { min-height:0; border:0; border-radius:0; box-shadow:none; }
        :root[data-theme="dark"] .btn-outline,
        :root[data-theme="dark"] .ratio-btn,
        :root[data-theme="dark"] .tpl-btn,
        :root[data-theme="dark"] .resize-stage-bar,
        :root[data-theme="dark"] .resize-color-popover { background:var(--panel-bg); color:var(--muted); border-color:var(--border); }
        :root[data-theme="dark"] .file-summary,
        :root[data-theme="dark"] .convert-file-item,
        :root[data-theme="dark"] .video-file-bar,
        :root[data-theme="dark"] .video-trim-panel,
        :root[data-theme="dark"] .media-file-bar { background:var(--surface-soft); }
        :root[data-theme="dark"] .btn-primary,
        :root[data-theme="dark"] .btn-success { color:#111827; }
        :root[data-theme="dark"] .canvas-wrapper { background-color:#1e293b; background-image:linear-gradient(45deg,#334155 25%,transparent 25%),linear-gradient(-45deg,#334155 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#334155 75%),linear-gradient(-45deg,transparent 75%,#334155 75%); }
        :root[data-theme="dark"] .lasso-canvas-wrapper { background:#4b5563; background-image:none; }

        @media (max-width: 900px) {
          :where(html[data-phone="true"]) {
            .sidebar { display: none; }
            .mobile-header { display:flex !important; position:relative; z-index:60; padding:10px 12px; background:var(--panel-bg); border-bottom:1px solid var(--border); align-items:center; justify-content:space-between; gap:12px; box-shadow:0 3px 14px rgba(15,23,42,.06); }
            .mobile-header-title { min-width:0; cursor:pointer; }
            .mobile-header-title strong { display:block; color:var(--text); font-size:1rem; line-height:1.15; }
            .mobile-header-title span { display:block; margin-top:3px; color:var(--muted); font-size:.62rem; line-height:1.2; }
            .mobile-header-title .mobile-feedback { display:block; max-width:155px; margin-top:3px; overflow:hidden; color:var(--muted); font-size:.52rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
            #page-title { display:none; }
            .mobile-header.home-mode #mobile-menu-toggle { display:none; }
            .mobile-menu { display:none; position:absolute; top:calc(100% + 7px); right:12px; width:min(280px, calc(100vw - 24px)); max-height:calc(100vh - 76px); overflow-y:auto; padding:7px; border:1px solid var(--border); border-radius:6px; background:var(--panel-bg); box-shadow:0 8px 24px rgba(19,27,46,.12); }
            .mobile-menu.open { display:grid; gap:3px; }
            .mobile-nav-item { width:100%; padding:11px 12px; border:0; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; text-align:left; font-size:.9rem; }
            .mobile-nav-item:hover { background:var(--surface-soft); color:var(--text); }
            .mobile-nav-item.active { background:var(--primary-soft); color:var(--primary); font-weight:650; }
            .mobile-nav-item small { display:block; margin:3px 0 0 22px; color:var(--muted); font-size:.62rem; font-weight:500; }
            .mobile-home-link { border-bottom:1px solid var(--border); margin-bottom:3px; }
            .main.mobile-home-active .scroll-area { display:none; }
            .main.mobile-home-active .mobile-home { display:block; flex:1; min-height:0; overflow-y:auto; padding:22px 14px 28px; }
            .mobile-home-head { margin-bottom:18px; }
            .mobile-home-head h1 { margin:0; color:var(--text); font-size:1.32rem; letter-spacing:-.02em; }
            .mobile-home-head p { margin:6px 0 0; color:var(--muted); font-size:.76rem; }
            .mobile-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
            .mobile-tool-card { min-width:0; min-height:94px; padding:12px 5px 9px; border:1px solid var(--border); border-radius:8px; background:var(--panel-bg); color:var(--text); box-shadow:var(--shadow); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; }
            .mobile-tool-card:active { background:var(--primary-soft); border-color:var(--primary); }
            .mobile-tool-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:7px; background:var(--primary-soft); color:var(--primary); font-size:1rem; font-weight:800; }
            .mobile-tool-card > span:not(.mobile-tool-icon) { font-size:.72rem; font-weight:700; line-height:1.15; }
            .mobile-tool-card small { min-height:1em; color:var(--muted); font-size:.54rem; line-height:1; }
            .scroll-area { padding:12px; }
            .card { padding:16px; }
            .puzzle-workspace, .media-workspace, .resize-workspace, .convert-workspace, .video-workspace-grid, .lasso-workspace { grid-template-columns:1fr; gap:12px; }
            .puzzle-result-column .canvas-wrapper { min-height:280px; max-height:none; }
            .resize-preview-column #resize-dropzone { height:auto; min-height:240px; }
            #resize-dropzone.loaded, .resize-crop-stage { min-height:240px; }
            .resize-canvas-shell { height:240px; min-height:240px; padding:10px; }
            .resize-crop-stage #resize-canvas { max-height:220px; }
            .resize-stage-bar { align-items:stretch; flex-direction:column; }
            .resize-stage-info { width:100%; }
            .resize-stage-info span { max-width:100%; }
            .resize-stage-actions { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; flex-shrink:1; }
            .resize-stage-actions .btn { width:100%; min-width:0; padding:7px 8px; font-size:.8rem; }
            .dimension-fields { width:100%; }
            .dimension-fields > div { flex:1; }
            .dimension-fields input { width:100%; }
            .quality-control { min-width:0; width:100%; }
            .quality-control input { flex:1; min-width:120px; }
            .convert-result-toolbar { grid-template-columns:1fr; }
            .convert-result-actions { justify-content:stretch; }
            .convert-result-actions .btn { flex:1; }
            #convert-result-meta { text-align:center; }
            .video-preview-shell { min-height:200px; padding:8px; }
            .video-preview-shell { height:230px; padding:0; }
            .resize-controls-column .tool-row { align-items:stretch; flex-direction:column; }
            .resize-controls-column .btn { width:100%; }
            .resize-controls-column select, .resize-controls-column #resize-quality { width:100% !important; }
            .media-dropzone { height:auto; min-height:260px; }
            .media-controls-column { padding:14px; }
            .lasso-canvas-wrapper { height:360px; }
            .lasso-controls-column { grid-template-columns:1fr; }
            .lasso-controls-column > .media-panel-title, .video-output-column > .media-panel-title { display:none; }
            .lasso-actions { display:grid; grid-template-columns:repeat(2,minmax(0,110px)); gap:8px; }
            .lasso-actions .lasso-invert { grid-column:1/-1; grid-row:1; }
            .video-output-column > .tool-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:10px; }
            .video-output-column #video-frames-count { width:100% !important; min-width:0; }
            .video-output-column #video-frames-generate { width:100%; min-width:0; padding-inline:6px; }
            .video-output-column #video-frames-save { grid-column:1/-1; }
            .collage-style-row { grid-template-columns:auto minmax(0,1fr) auto 36px; gap:8px; }
            .collage-style-row #collage-gap { max-width:173.39px; }
            .video-file-bar { align-items:flex-end; }
            .video-file-info span { max-width:200px; }
            .video-frames-result-head { align-items:flex-start; flex-direction:column; }
            .mobile-menu-footer { display:grid; gap:9px; margin-top:5px; padding:10px 5px 4px; border-top:1px solid var(--border); }
            .mobile-contact { color:var(--muted); font-size:.75rem; }
            .mobile-contact a { color:var(--primary); text-decoration:none; }
            .embedded-tool-page { height:100%; }
            .embedded-tool-frame { min-height:0; border-radius:0; }
          }
        }
        .nav-new { color:#dc2626; font-size:10px; font-weight:600; margin-left:5px; flex-shrink:0; }
        .resize-stage-bar { order:-1; margin-top:0; margin-bottom:14px; justify-content:flex-start; flex-wrap:wrap; }
        .resize-stage-actions { justify-content:flex-start; flex-wrap:wrap; }
        .resize-mode-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; margin-top:12px; }
        #resize-background-toggle { align-items:center; gap:8px; }
        .resize-background-swatch { width:28px; height:28px; flex-shrink:0; border:1px solid var(--border); background:#ffffff; }
        #video-source-column, #lasso-source-column { display:flex; flex-direction:column; }
        #video-source-column .video-file-bar, #lasso-source-column .lasso-file-bar { order:-1; margin-top:0; margin-bottom:12px; }