.page-header { max-width:900px; }
.container { max-width:900px; margin:0 auto; padding:24px 20px; }
.nav-bar { display:flex; align-items:center; gap:8px; }
.nav-bar a { padding:5px 12px; border-radius:8px; background:var(--bg-nested); color:var(--text-muted); font-size:12px; text-decoration:none; border:1px solid var(--border); transition:all 0.2s; white-space:nowrap; }
.nav-bar a:hover { border-color:var(--accent); color:var(--accent); }

/* Tabs */
.mode-tabs { display:flex; gap:0; margin-bottom:16px; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.mode-tab { flex:1; padding:10px 8px; border:none; background:transparent; color:var(--text-muted); font-size:13px; font-weight:500; cursor:pointer; transition:all 0.2s; text-align:center; }
.mode-tab:hover { background:var(--bg-hover); }
.mode-tab.active { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }

/* Upload */
.upload-area { padding:24px; color:var(--text-muted); font-size:14px; }
.upload-area img { max-width:100%; max-height:200px; object-fit:contain; border-radius:8px; }
.upload-area .preview-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; border-radius:8px; opacity:0; transition:opacity 0.2s; color:#fff; font-size:13px; }
.upload-area:hover .preview-overlay { opacity:1; }

/* Dual upload */
.dual-upload { display:flex; gap:16px; }
.dual-upload > div { flex:1; }
.dual-upload label { font-size:13px; color:var(--text-muted); margin-bottom:6px; display:block; }
.target-grid { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0; }
.target-thumb { position:relative; width:80px; height:80px; border-radius:8px; overflow:hidden; }
.target-thumb img { width:100%; height:100%; object-fit:cover; }
.target-thumb .del-btn { position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; }
.target-add { width:80px; height:80px; border:2px dashed var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:24px; color:var(--text-dim); transition:border-color 0.2s; }
.target-add:hover { border-color:var(--accent); color:var(--accent); }

/* Params */
.params-section { background:var(--bg-card); border-radius:12px; padding:16px; margin-top:16px; }
.param-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.param-row label { font-size:13px; color:var(--text-muted); min-width:100px; }
.param-row input[type=range] { flex:1; }
.param-row span { font-size:13px; color:var(--text-secondary); min-width:36px; text-align:right; }
.mode-field { transition:opacity 0.2s; }

/* Generate */
.generate-bar { display:flex; align-items:center; gap:16px; margin-top:16px; }
.btn-generate { padding:12px 32px; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border:none; border-radius:10px; font-size:15px; cursor:pointer; transition:opacity 0.2s; }
.btn-generate:hover { opacity:0.9; }
.btn-generate:disabled { opacity:0.5; cursor:not-allowed; }
.cost-hint { font-size:13px; color:var(--text-muted); }
.progress-section { margin-top:12px; }

/* History */
.history-section { background:var(--bg-card); border-radius:16px; padding:24px; margin-top:24px; }
.clear-btn { background:transparent; color:#e74c3c; border:1px solid #e74c3c; padding:6px 16px; border-radius:8px; font-size:13px; cursor:pointer; }

/* Doorway presets */
.doorway-presets-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.doorway-presets-bar .dp-label { font-size:13px; color:var(--text-muted); }
.doorway-presets-bar .dp-chips { display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.dp-chip { padding:4px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg-card); color:var(--text-secondary); cursor:pointer; font-size:13px; transition:all 0.2s; }
.dp-chip:hover { border-color:var(--accent); color:var(--accent); }
.dp-chip.active { border-color:var(--accent); color:var(--accent); background:rgba(102,126,234,0.12); }

@media (max-width:768px) {
  .page-header { padding:10px 16px; }
  .container { padding:16px; }
  .dual-upload { flex-direction:column; gap:10px; }
}