.converter-intro { max-width: 970px; }
.converter-intro h1 span { color: var(--accent); font-style: italic; font-weight: 520; }
.converter-layout { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(310px,.58fr); gap:18px; align-items:start; }
.converter-workspace,.converter-sidebar { display:grid; gap:18px; }
.converter-sidebar { position:sticky; top:18px; }
.converter-card,.converter-preview,.converter-summary { border:1px solid var(--line); border-radius:var(--radius); background:rgba(16,23,19,.9); box-shadow:var(--shadow); }
.converter-card,.converter-preview,.converter-summary { padding:clamp(20px,3vw,32px); }
.converter-upload { padding:clamp(16px,3vw,26px); }
.converter-drop { min-height:245px; display:grid; place-items:center; padding:28px; text-align:center; cursor:pointer; }
.converter-drop.is-dragging { border-color:rgba(198,223,136,.72); background:rgba(198,223,136,.065); }
.converter-drop.is-disabled { pointer-events:none; opacity:.62; }
.converter-drop strong,.converter-drop span,.converter-drop small { display:block; }
.converter-drop > span > span { color:var(--muted); margin-top:7px; }
.converter-drop small { color:var(--soft); margin-top:7px; }
.converter-drop .drop-visual svg { width:50px; fill:none; stroke:currentColor; stroke-width:1.35; }
.upload-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:18px; }
.upload-actions button { min-height:42px; padding:0 15px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(255,255,255,.035); color:var(--text); cursor:pointer; font-weight:760; }
.upload-actions button:hover { border-color:rgba(198,223,136,.46); }
.card-heading,.preview-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.card-heading h2,.preview-heading h2,.converter-summary h2 { margin:7px 0 0; font-size:clamp(1.45rem,3vw,2.15rem); letter-spacing:-.035em; }
.settings-section { margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.settings-section:first-of-type { margin-top:20px; padding-top:0; border-top:0; }
.settings-section h3 { margin:0 0 13px; font-size:.88rem; letter-spacing:.02em; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.settings-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.settings-grid.three > #dimension-fields { grid-column:span 2; }
.field-group { display:block; color:#d7ded9; font-size:.82rem; font-weight:720; }
.field-group input[type="text"],.field-group input[type="number"],.field-group select { width:100%; margin-top:8px; }
.field-help { display:block; margin-top:7px; color:var(--soft); font-size:.72rem; font-weight:400; line-height:1.45; }
.quality-control { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:11px; margin-top:8px; min-height:50px; padding:0 13px; border:1px solid var(--line-strong); border-radius:12px; background:#0b100d; }
.quality-control input { width:100%; accent-color:var(--accent-deep); }
.quality-control output { min-width:58px; color:var(--accent); text-align:right; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.78rem; }
.color-control { display:flex; align-items:center; gap:10px; margin-top:8px; min-height:50px; padding:0 12px; border:1px solid var(--line-strong); border-radius:12px; background:#0b100d; }
.color-control input { width:32px; height:32px; padding:0; border:0; background:none; }
.color-control span { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.78rem; }
.setting-toggles { display:grid; gap:10px; margin-top:15px; }
.setting-toggles label { display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); cursor:pointer; }
.setting-toggles input { margin-top:4px; accent-color:var(--accent-deep); }
.setting-toggles strong,.setting-toggles small { display:block; }
.setting-toggles strong { font-size:.88rem; }
.setting-toggles small { margin-top:3px; color:var(--muted); font-size:.76rem; font-weight:400; }
.format-note { margin:10px 0 0; color:var(--soft); font-size:.76rem; }
.converter-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.converter-actions button { flex:1 1 160px; }
.batch-progress { margin-top:16px; }
.batch-progress-track { height:7px; overflow:hidden; border-radius:999px; background:#080b09; }
.batch-progress-track span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent-deep),var(--accent)); transition:width .18s ease; }
.batch-progress p { margin:8px 0 0; color:var(--muted); font-size:.76rem; }
.queue-heading { align-items:center; }
.queue-count,#preview-badge { padding:.45rem .7rem; border-radius:999px; background:rgba(198,223,136,.08); color:var(--accent); font-size:.72rem; font-weight:800; }
.converter-list { display:grid; gap:11px; margin-top:20px; }
.converter-item { width:100%; display:grid; grid-template-columns:68px minmax(0,1fr) auto auto; gap:13px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.022); color:var(--text); text-align:left; cursor:pointer; }
.converter-item:hover,.converter-item.is-selected { border-color:rgba(198,223,136,.4); background:rgba(198,223,136,.045); }
.converter-thumb { width:68px; height:56px; object-fit:cover; border-radius:10px; background:#080b09; }
.converter-thumb-placeholder { display:grid; place-items:center; border:1px solid var(--line); color:var(--soft); font-size:1.35rem; }
.converter-copy { min-width:0; }
.converter-copy strong,.converter-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.converter-copy strong { font-size:.87rem; }
.converter-copy span { margin-top:4px; color:var(--muted); font-size:.74rem; }
.converter-status { padding:.38rem .58rem; border-radius:999px; background:rgba(255,255,255,.05); color:var(--muted); font-size:.68rem; font-weight:800; }
.status-processing,.status-inspecting { color:var(--warning); background:rgba(239,211,141,.08); }
.status-done { color:var(--success); background:rgba(169,220,145,.08); }
.status-error { color:var(--danger); background:rgba(255,155,143,.08); }
.item-actions { display:flex; justify-content:flex-end; gap:5px; }
.item-actions .item-button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--muted); text-decoration:none; cursor:pointer; font-size:1rem; }
.item-actions .item-button:hover { background:rgba(255,255,255,.07); color:var(--text); }
.converter-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; border-color:rgba(169,220,145,.25); background:linear-gradient(145deg,rgba(169,220,145,.07),rgba(16,23,19,.9)); }
.summary-copy p:not(.tool-format) { margin:9px 0 0; color:var(--muted); }
.summary-stats { display:flex; gap:18px; }
.summary-stats div { min-width:88px; padding-left:14px; border-left:1px solid var(--line); }
.summary-stats strong,.summary-stats span { display:block; }
.summary-stats strong { font-size:1.02rem; }
.summary-stats span { color:var(--muted); font-size:.71rem; }
.summary-buttons { display:flex; flex-wrap:wrap; gap:9px; grid-column:1/-1; }
.summary-buttons button { flex:1 1 180px; }
.compare-stage { position:relative; min-height:315px; margin-top:20px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:repeating-conic-gradient(rgba(255,255,255,.04) 0 25%,transparent 0 50%) 50%/22px 22px; }
.compare-stage > img,.after-layer,.after-layer img { width:100%; height:100%; object-fit:contain; }
.compare-stage > img { position:absolute; inset:0; }
.after-layer { position:absolute; inset:0; overflow:hidden; clip-path:inset(0 0 0 50%); }
.after-layer img { position:absolute; inset:0; }
.compare-divider { position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent); transform:translateX(-1px); pointer-events:none; }
.compare-divider span { position:absolute; top:50%; left:50%; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#11170f; transform:translate(-50%,-50%); font-weight:900; }
.preview-placeholder { min-height:315px; display:grid; place-content:center; justify-items:center; padding:30px; color:var(--soft); text-align:center; }
.preview-placeholder svg { width:58px; fill:none; stroke:currentColor; stroke-width:1.4; }
.preview-placeholder p { margin:14px 0 0; }
.compare-slider { width:100%; margin-top:14px; accent-color:var(--accent-deep); }
.preview-labels { display:flex; justify-content:space-between; color:var(--soft); font-size:.72rem; }
.preview-details { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.preview-details p { margin:0; color:var(--muted); font-size:.82rem; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.detail-grid div { padding:10px; border-radius:12px; background:rgba(255,255,255,.025); }
.detail-grid strong,.detail-grid span { display:block; }
.detail-grid strong { font-size:.82rem; }
.detail-grid span { color:var(--muted); font-size:.69rem; }
.limit-list { margin:14px 0 0; padding-left:18px; color:var(--muted); font-size:.79rem; line-height:1.7; }
@media (max-width:980px) { .converter-layout { grid-template-columns:1fr; } .converter-sidebar { position:static; grid-template-columns:1fr 1fr; } .converter-preview { grid-column:1/-1; } }
@media (max-width:720px) { .card-heading,.preview-heading { flex-direction:column; } .settings-grid,.settings-grid.three,.converter-sidebar { grid-template-columns:1fr; } .settings-grid.three > #dimension-fields { grid-column:auto; } .converter-item { grid-template-columns:58px minmax(0,1fr); } .converter-thumb { width:58px; height:52px; } .converter-status,.converter-item .item-actions { grid-column:2; justify-self:start; } .converter-summary { grid-template-columns:1fr; } .summary-stats { flex-wrap:wrap; } .compare-stage,.preview-placeholder { min-height:250px; } }