/* ===== Collapsible Section ===== */
.section { border-bottom:1px solid var(--border); }
.section-header { display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer; user-select:none; transition:background .15s; }
.section-header:hover { background:var(--bg-hover); }
.section-header .sec-icon { font-size:14px; width:20px; text-align:center; }
.section-header .sec-title { font-size:12px; font-weight:600; color:var(--text); flex:1; }
.section-header .sec-arrow { color:var(--text-dim); font-size:10px; transition:transform .2s; }
.section.open .sec-arrow { transform:rotate(90deg); }
.section-body { padding:0 14px 14px; display:none; }
.section.open .section-body { display:block; }

/* ===== Left Panel ===== */
/* Left panel mode toggle */
.lp-mode { padding:10px 14px; border-bottom:1px solid var(--border); }

/* Left panel prompt library */
.panel-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.panel-card .card-title { font-size:12px; font-weight:600; color:var(--text); padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.config-card { flex:1; }
.config-card-body { padding:12px 14px; overflow-y:auto; flex:1; }
.history-card { flex:1; min-height:0; }
.lp-prompt-lib { flex:1; display:flex; flex-direction:column; min-height:0; }
.lp-pl-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; }
.lp-pl-title { font-size:12px; font-weight:600; color:var(--text); }
.lp-pl-actions { display:flex; gap:6px; }
.lp-pl-action-btn { width:30px; height:30px; border-radius:6px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.lp-pl-action-btn:hover { color:var(--green); }
.lp-pl-search { padding:0 14px 8px; }
.lp-pl-search input { width:100%; padding:8px 12px; font-size:11px; background:var(--bg-deep); border:1px solid var(--border); border-radius:6px; color:var(--text); outline:none; transition:border .15s; }
.lp-pl-search input:focus { border-color:var(--green); }
.lp-pl-category { padding:0 14px 8px; }
.lp-pl-category-bar { display:flex; gap:6px; align-items:center; }
.lp-pl-category select { width:90px; padding:7px 10px; font-size:11px; background:var(--bg-deep); border:1px solid var(--border); border-radius:6px; color:var(--text); outline:none; cursor:pointer; transition:all .15s; }
.lp-pl-category select.has-selection { border-color:var(--green); color:var(--green); }
.lp-pl-category select.has-selection:focus { box-shadow:0 0 0 2px rgba(34,197,94,0.15); }
.lp-pl-cat-actions { display:flex; gap:4px; flex-shrink:0; }
.lp-pl-cat-actions .pl-cat-action-btn { width:30px; height:30px; border-radius:6px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.lp-pl-cat-actions .pl-cat-action-btn:hover { color:var(--green); transform:scale(1.05); }
.lp-pl-cat-actions .pl-cat-action-btn-del:hover { color:var(--red); background:rgba(239,68,68,0.1); }
.lp-pl-cat-actions .pl-cat-action-btn.fav-active { color:var(--warn); background:rgba(234,179,8,0.15); }
.lp-pl-tabs { display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 8px; }
.lp-pl-tab { padding:4px 10px; font-size:10px; border-radius:4px; background:var(--bg-deep); color:var(--text-muted); cursor:pointer; transition:all .15s; border:1px solid var(--border); white-space:nowrap; }
.lp-pl-tab:hover { border-color:var(--border-light); }
.lp-pl-tab.active { background:var(--green); color:#fff; border-color:var(--green); }
.lp-pl-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:0 14px 8px; }
.lp-pl-item { padding:12px; font-size:11px; color:var(--text); background:var(--bg-deep); border-radius:var(--radius-sm); cursor:pointer; transition:all .15s; border:1px solid transparent; position:relative; display:flex; flex-direction:column; gap:6px; }
.lp-pl-item:hover { border-color:var(--border); background:var(--bg-hover); }
.lp-pl-item.lp-pl-item-selected { border-color:var(--green); background:rgba(34,197,94,0.08); }
.lp-pl-item .pl-item-content { -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.5; }
.lp-pl-item .pl-item-meta { display:flex; gap:8px; align-items:center; font-size:10px; color:var(--text-muted); margin-top:auto; padding-top:4px; }
.lp-pl-item .pl-item-meta .pl-item-cat { color:var(--green); }
.lp-pl-item .pl-item-meta .pl-item-fav { color:var(--warn); }
.lp-pl-item .pl-item-fav-inline { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:none; background:transparent; color:var(--warn); cursor:pointer; font-size:13px; transition:all .15s; }
.lp-pl-item .pl-item-fav-inline:hover { transform:scale(1.3); }
.lp-pl-empty { text-align:center; padding:16px; color:var(--text-dim); font-size:11px; }
.lp-pl-footer { display:flex; gap:8px; padding:10px 14px; justify-content:center; border-top:1px solid var(--border); }
.lp-pl-footer button { padding:5px 12px; font-size:10px; border-radius:4px; }
/* Mode toggle (shared) */
.mode-toggle { display:flex; gap:0; background:var(--bg-deep); border-radius:var(--radius-sm); padding:3px; border:1px solid var(--border); }
.mode-btn { flex:1; padding:7px 10px; text-align:center; font-size:11px; font-weight:600; color:var(--text-muted); border-radius:5px; transition:all .2s; }
.mode-btn.active { background:var(--green); color:#fff; box-shadow:0 1px 4px rgba(34,197,94,0.3); }

/* Upload */
.upload-zone { border:2px dashed var(--border); border-radius:var(--radius-sm); padding:16px 10px; text-align:center; cursor:pointer; transition:all .2s; }
.upload-zone:hover, .upload-zone.drag-over { border-color:var(--green); background:var(--green-bg); }
.upload-zone.has-image { border-style:solid; border-color:var(--green); padding:0; overflow:hidden; }
.upload-zone.has-image img { width:100%; height:100px; object-fit:cover; display:block; }
.upload-zone .icon { font-size:22px; margin-bottom:4px; }
.upload-zone .hint { font-size:10px; color:var(--text-muted); }
.upload-zone input[type=file] { display:none; }

/* Thumb strip */
.thumb-strip { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.thumb-strip .thumb {
  width:60px; height:60px; border-radius:var(--radius-sm); overflow:hidden; position:relative;
  border:2px solid var(--border); cursor:pointer; transition:border-color .15s, opacity .15s, transform .15s, box-shadow .15s;
}
.thumb-strip .thumb:hover { border-color:var(--green); box-shadow:0 2px 10px rgba(0,0,0,0.4); }
.thumb-strip .thumb:active { cursor:grabbing; }
.thumb-strip .thumb.dragging { opacity:0.35; transform:scale(0.9); }
.thumb-strip .thumb.drag-over-left { border-left:3px solid var(--green); }
.thumb-strip .thumb.drag-over-right { border-right:3px solid var(--green); }
.thumb-strip .thumb img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.thumb-strip .thumb .idx-badge {
  position:absolute; top:2px; left:2px; min-width:14px; height:14px; border-radius:7px;
  background:rgba(0,0,0,0.7); color:#fff; font-size:8px; font-weight:600;
  display:flex; align-items:center; justify-content:center; padding:0 3px; pointer-events:none;
}
.thumb-strip .thumb .btn-group {
  position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;
}
.thumb-strip .thumb .btn-group button {
  position:absolute; width:14px; height:14px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:8px;
  opacity:0; transition:opacity .2s, transform .15s; pointer-events:auto;
  backdrop-filter:blur(4px);
}
.thumb-strip .thumb:hover .btn-group button { opacity:1; }
.thumb-strip .thumb .btn-group button:hover { transform:scale(1.15); }
.thumb-strip .thumb .btn-group .size-btn { top:2px; right:2px; background:rgba(0,0,0,0.6); color:#fff; font-size:8px; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.thumb-strip .thumb .btn-group .zoom-btn { top:2px; left:2px; background:rgba(255,255,255,0.25); color:#fff; font-size:8px; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.thumb-strip .thumb .btn-group .rm-btn { bottom:2px; right:2px; background:rgba(239,68,68,0.85); color:#fff; font-size:9px; font-weight:600; box-shadow:0 1px 3px rgba(239,68,68,0.4); }
.thumb-strip .thumb .btn-group .drag-btn { bottom:2px; left:2px; background:rgba(255,255,255,0.2); color:#fff; font-size:9px; box-shadow:0 1px 3px rgba(0,0,0,0.2); cursor:grab; }
.thumb-strip .thumb .btn-group .drag-btn:active { cursor:grabbing; }
.thumb-strip .add-btn {
  width:60px; height:60px; border:1px dashed var(--border); border-radius:var(--radius-sm);
  background:transparent; color:var(--text-muted); cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.thumb-strip .add-btn:hover { border-color:var(--green); color:var(--green); }

/* URL input */
.url-row { display:flex; gap:6px; margin-top:8px; align-items:center; }
.url-row input { flex:1; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-deep); color:var(--text); font-size:11px; outline:none; transition:border .15s; }
.url-row input:focus { border-color:var(--green); }
.url-row .icon-btn { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-deep); color:var(--text-muted); cursor:pointer; font-size:13px; transition:all .15s; }
.url-row .icon-btn:hover { border-color:var(--text-muted); color:var(--text); }

/* Compress inline switch */
.compress-inline-switch { display:flex; align-items:center; gap:4px; cursor:pointer; user-select:none; }
.compress-inline-label { font-size:10px; color:var(--text-muted); transition:color .15s; }
.compress-inline-switch input { opacity:0; width:0; height:0; }
.compress-inline-slider { width:28px; height:14px; border-radius:7px; background:var(--border); position:relative; transition:background .25s; }
.compress-inline-slider::after {
  content:''; position:absolute; left:2px; top:2px; width:10px; height:10px; border-radius:50%;
  background:#fff; transition:transform .25s;
}
.compress-inline-switch input:checked + .compress-inline-slider { background:var(--green); }
.compress-inline-switch input:checked + .compress-inline-slider::after { transform:translateX(14px); }
.compress-inline-switch input:checked ~ .compress-inline-label,
.compress-inline-switch:has(input:checked) .compress-inline-label { color:var(--green); }

/* Ratio grid */
.ratio-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.res-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.size-card { padding:8px 4px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-deep); cursor:pointer; text-align:center; transition:all .15s; font-size:11px; }
.size-card:hover { border-color:var(--border-light); background:var(--bg-hover); }
.size-card.active { border-color:var(--green); background:var(--green-bg); color:var(--green); }
.size-card.waiting { border-color:var(--accent); background:var(--bg-deep); border-style:dashed; opacity:0.85; }
.size-card .dim { font-weight:700; color:var(--text); }
.size-card .tag { font-size:9px; color:var(--text-muted); margin-top:1px; }
.size-card.active .dim { color:var(--green); }
.size-card .icon { font-size:12px; margin-bottom:1px; }

/* Size preview */
.size-preview { display:flex; flex-direction:column; gap:4px; padding:8px 12px; background:var(--bg-deep); border:1px solid var(--border); border-radius:var(--radius-sm); margin-top:6px; font-size:10px; }
.size-preview .sp-main { display:flex; align-items:center; gap:8px; }
.size-preview .ratio-label { color:#fff; font-weight:700; padding:2px 6px; background:#22c55e; border-radius:4px; font-size:10px; }
.size-preview .dimensions { color:var(--text); font-weight:700; font-size:14px; }
.size-preview .pixel-total { color:var(--text-muted); font-size:10px; }
.size-preview .sp-checks { display:flex; gap:12px; flex-wrap:wrap; }
.size-preview .sp-checks-row { display:flex; gap:12px; }
.size-preview .sp-check { font-size:10px; white-space:nowrap; }
.size-preview .sp-check.pass { color:var(--green); }
.size-preview .sp-check.fail { color:var(--red); }

/* Quality grid */
.quality-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.q-card { padding:8px 4px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-deep); cursor:pointer; text-align:center; transition:all .15s; }
.q-card:hover { border-color:var(--border-light); }
.q-card.active { border-color:var(--green); background:var(--green-bg); }
.q-card .q-label { font-weight:600; font-size:11px; color:var(--text); }
.q-card .q-speed { font-size:9px; color:var(--text-muted); margin-top:1px; }
.q-card.active .q-label { color:var(--green); }

/* Compress Level Grid */
.compress-level-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.cl-card { padding:6px 4px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-deep); cursor:pointer; text-align:center; transition:all .15s; }
.cl-card:hover { border-color:var(--border-light); }
.cl-card.active { border-color:var(--blue); background:var(--blue-bg); }
.cl-card .cl-label { font-weight:600; font-size:10px; color:var(--text); }
.cl-card .cl-desc { font-size:8px; color:var(--text-muted); margin-top:1px; }
.cl-card.active .cl-label { color:var(--blue); }

/* Select */
select.sel { width:100%; padding:7px 10px; background:var(--bg-deep); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:11px; outline:none; cursor:pointer; }
select.sel:focus { border-color:var(--green); }

/* Theme toggle */
.theme-toggle-btn { width:32px; height:32px; border:1px solid var(--border); border-radius:6px; background:var(--bg-deep); color:var(--text-muted); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.theme-toggle-btn:hover { border-color:var(--warn); color:var(--warn); background:var(--bg-hover); }

/* Textarea */