:root { 
    --bg-dark: #09090b; --panel-bg: #121212; --border: #27272a; 
    --primary: #8b5cf6; --warning: #f59e0b; --danger: #ef4444; --success: #10b981; 
    --text-main: #e4e4e7; --text-muted: #a1a1aa; 
}
body { background-color: var(--bg-dark); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; font-size: 13px; margin: 0; }
header { height: 60px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; background: var(--panel-bg); flex-shrink: 0; justify-content: space-between; }
.brand { font-weight: 700; font-size: 18px; color: #fff; } .brand span { color: var(--primary); }
.workspace { display: flex; flex: 1; overflow: hidden; }

/* Panels */
.panel-left { width: 320px; background: var(--panel-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 15px; overflow-y: auto; }
.panel-center { flex: 1; background: var(--bg-dark); padding: 20px; overflow-y: auto; position: relative; }
.panel-right { width: 360px; background: var(--panel-bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }

/* Components */
.section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.input-dark, .select-dark { background: #18181b; border: 1px solid var(--border); color: #fff; padding: 8px 12px; border-radius: 6px; width: 100%; font-size: 12px; }
.input-dark:focus, .select-dark:focus { outline: none; border-color: var(--primary); }

/* Buttons */
.btn-studio { width: 100%; padding: 10px; border-radius: 6px; border: none; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; color: #fff; }
.btn-primary { background: var(--primary); } .btn-secondary { background: #27272a; border: 1px solid #333; }
.btn-danger { background: var(--danger); } .btn-warning { background: var(--warning); color: #000; }
.btn-success-custom { background-color: #1a8b54; color: #fff; border: none; padding: 10px; border-radius: 6px; font-weight: 600; transition: 0.2s; }
.btn-success-custom:hover { background-color: #146c43; color: #fff; }

/* Upload Zone */
.upload-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 20px; text-align: center; color: var(--text-muted); cursor: pointer; transition: 0.2s; background: #18181b; margin-bottom: 15px; }
.upload-zone:hover { border-color: var(--primary); background: rgba(139, 92, 246, 0.05); }

/* Sliders */
input[type=range] { width: 100%; accent-color: var(--primary); height: 4px; background: #333; border-radius: 2px; }
.range-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }

/* Session Stats */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 15px; }
.stat-item { background: #18181b; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
.stat-item span { color: #fff; font-weight: bold; font-size: 13px; }

/* Grid */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.grid-item { aspect-ratio: 1; background: #18181b; border-radius: 8px; border: 2px solid transparent; overflow: hidden; position: relative; cursor: pointer; }
.grid-item.active { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2); }
.grid-item.error { border-color: var(--danger); }
.grid-item img { width: 100%; height: 100%; object-fit: contain; background-color: #ffffff; }
.status-badge { position: absolute; top: 5px; right: 5px; font-size: 9px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,0.8); color: #fff; font-weight: bold; border: 1px solid rgba(255,255,255,0.2); pointer-events: none; }

/* Thumbnail Hover Buttons */
.delete-btn, .regen-btn { position: absolute; top: 5px; color: #fff; border: none; border-radius: 4px; padding: 4px 7px; font-size: 11px; cursor: pointer; z-index: 10; opacity: 0; transition: 0.2s; }
.delete-btn { left: 5px; background: rgba(239, 68, 68, 0.9); }
.regen-btn { left: 32px; background: rgba(59, 130, 246, 0.9); }
.grid-item:hover .delete-btn, .grid-item:hover .regen-btn { opacity: 1; }
.delete-btn:hover { background: #ef4444; transform: scale(1.05); }
.regen-btn:hover { background: #3b82f6; transform: scale(1.05); }

/* Badge Colors */
.st-pending { color: #ccc; } .st-analyzing { color: #3b82f6; } .st-success { color: #10b981; } .st-error { color: #ef4444; }

/* Inspector */
.inspector-preview { width: 100%; height: 200px; background: #ffffff; object-fit: contain; border-bottom: 1px solid var(--border); }
.inspector-content { padding: 15px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.meta-field { background: #18181b; border: 1px solid var(--border); padding: 8px; border-radius: 4px; font-size: 11px; color: #ccc; width: 100%; resize: vertical; }

/* Modals & Utils */
.modal-content-dark { background: #18181b; color: #e4e4e7; border: 1px solid var(--border); }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.hidden { display: none !important; }