/* --- 1. GLOBAL VARIABLES & RESET --- */
	:root {
		--bg-body: #050505; 
		--bg-surface: #0a0a0a; 
		--bg-card: #111111;
		--border: #27272a; 
		--border-hover: #3f3f46;
		--text-main: #ffffff; 
		--text-dim: #71717a; 
		--accent: #ffffff;
		--font-main: 'Plus Jakarta Sans', sans-serif;
		--nav-width: 260px; 
		--rail-width: 320px; /* Slightly wider for the grid */
		--glass: rgba(24, 24, 27, 0.7);
		--blur: blur(24px);
		--radius-card: 16px;
		--radius-bar: 20px;
	}

	/* --- GLOBAL SCROLLBAR STYLE --- */
	::-webkit-scrollbar {
		width: 6px;
	}
	::-webkit-scrollbar-track {
		background: #1a1a1a;
		border-radius: 3px;
	}
	::-webkit-scrollbar-thumb {
		background: #3f3f46;
		border-radius: 3px;
	}
	::-webkit-scrollbar-thumb:hover {
		background: #52525b;
	}


	* { box-sizing: border-box; outline: none; -webkit-font-smoothing: antialiased; }

	html, body {
		margin: 0; padding: 0;
		width: 100vw; height: 100dvh;
		overflow: hidden;
		background: var(--bg-body); 
		color: var(--text-main); 
		font-family: var(--font-main);
		font-size: 14px; letter-spacing: -0.01em;
	}

	/* 2. GLOBAL ROW LAYOUT */
	.app-shell {
		display: flex;
		flex-direction: row;
		width: 100%; height: 100%;
	}


	.app-view {
		display: none; /* JS overrides this */
		flex: 1; min-width: 0; height: 100%;
		background: var(--bg-body);
	}
	.app-view[style*="display: flex"], .app-view[style*="display: block"] {
		display: flex !important;
	}



	#viewSmartStudio {
		flex-direction: column; /* Smart studio stacks vertically */
	}

	.app-main {
		flex: 1;                /* Take remaining height in .app-view */
		display: flex;
		flex-direction: column; /* Stack header and viewport vertically */
		min-height: 0;          /* Allow shrinking below content height */
	}

	/* --- 2. LEFT NAVIGATION SIDEBAR --- */
	.nav-shell { flex: 0 0 var(--nav-width); height: 100%; background: var(--bg-body); border-right: 1px solid var(--border); z-index: 50; display: flex; flex-direction: column; padding: 24px; }


	.brand-header { 
		display: flex; align-items: center; gap: 12px; font-weight: 800; 
		font-size: 16px; color: white; margin-bottom: 32px; letter-spacing: -0.02em;
	}
	.brand-icon { 
		width: 28px; height: 28px; background: white; color: black; 
		border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 800; 
	}

	.nav-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 32px; }

	.nav-item { 
		display: flex; align-items: center; gap: 12px; padding: 10px 12px; 
		border-radius: 8px; color: var(--text-dim); cursor: pointer; 
		transition: 0.2s; font-weight: 600; font-size: 16px;
	}
	.nav-item:hover, .nav-item.active { background: var(--bg-surface); color: white; }
	.nav-item i { font-size: 16px; }

	.nav-label { 
		font-size: 10px; font-weight: 800; color: #333; 
		text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.05em; padding-left: 12px;
	}

	.nav-item-tool {
		display: flex; align-items: center; gap: 12px; padding: 10px 12px;
		color: var(--text-dim); font-size: 14px; font-weight: 500; cursor: pointer;
		transition: 0.2s; border-radius: 8px;
	}
	.nav-item-tool:hover { color: white; background: rgba(255,255,255,0.03); }


	.nav-footer { margin-top: auto; }
	.user-badge { 
		display: flex; align-items: center; gap: 10px; padding: 12px; 
		background: var(--bg-surface); border-radius: 12px; border: 1px solid var(--border);
		cursor: pointer;
	}
	.avatar { 
		width: 28px; height: 28px; background: #222; border-radius: 50%; 
		display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #888;
	}
	.user-info { display: flex; flex-direction: column; gap: 2px; }
	.user-name { font-size: 14px; font-weight: 700; color: white; }
	.user-status { font-size: 10px; color: #666; display: flex; align-items: center; gap: 4px; }
	.status-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; }

	/* --- 3. MAIN WORKBENCH --- */

	.result-grid {
		flex: 1;
		width: 100%; 
		display: flex; align-items: flex-start; justify-content: center;
		flex-wrap: wrap; gap: 20px;
		padding: 40px; 
		z-index: 0;
	}

	.result-img-box {
		flex-grow: 1; background: #000; overflow: hidden;
		display: flex; align-items: center; justify-content: center;
		cursor: zoom-in; position: relative;
	}

	.result-img-box img {
		width: 100%; height: 100%; object-fit: cover;
		transition: opacity 0.3s;
	}

	.result-footer {
		height: 64px; padding: 0 8px; background: #111;
		border-top: 1px solid #222;
		display: flex; justify-content: space-between; align-items: center;
	}

	.result-meta {
		font-size: 10px; font-weight: 700; color: #52525b; text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.card-actions { 
		display: flex; align-items: center; gap: 2px;

	}

	.card-btn {
		background: transparent; border: none; color: #e4e4e7;
		display: flex; align-items: center; gap: 6px;
		font-size: 11px; font-weight: 600;
		padding: 6px 8px; border-radius: 14px;
		cursor: pointer; transition: 0.2s;
	}

	.card-btn:hover { background: #222; }
	.card-btn i { font-size: 14px; color: #a1a1aa; }
	.card-btn:hover i { color: white; }

	/* Divider Line */
	.action-divider {
		width: 1px; height: 16px; background: #333; margin: 0 4px;
	}

	/* Neon Green Save Button */
	.card-btn.save-btn { color: #4ade80; }
	.card-btn.save-btn i { color: #4ade80; }
	.card-btn.save-btn:hover { background: rgba(74, 222, 128, 0.1); }

	@keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }



	.result-card {
		width: 360px; height: 440px; 
		background: #0f0f0f; border: 1px solid #27272a;
		border-radius: 12px; display: flex; flex-direction: column;
		overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.6);
		transition: transform 0.2s, border-color 0.2s;
		animation: fadeIn 0.4s ease-out forwards;
	}

	.result-card:hover {
		transform: translateY(-4px); border-color: #52525b;
	}

	/* --- 4. ENGINE WRAPPER (Center Stage) --- */

	/* --- CONFIG CARDS --- */
	.config-row {
		display: flex; gap: 12px; width: 100%; padding: 0px 50px 10px; align-items: center; justify-content: center;
	}

	.config-card {
		flex: 1; height: 72px; min-width: 160px;
		background: var(--bg-card); border: 1px solid var(--border);
		border-radius: 14px; cursor: pointer; transition: all 0.2s ease;
		display: flex; align-items: center; padding: 0 16px; gap: 12px;
		position: relative; overflow: hidden;
	}

	/* Reference Card (Mini) - FIX for Viewport Issue */
	.ref-card-mini {
		width: 72px; height: 72px; flex-shrink: 0;
		background: #111; border: 1px solid #333; border-radius: 12px;
		position: relative; overflow: hidden; cursor: default;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
	}
	.ref-card-img {
		width: 100%; height: 100%; object-fit: cover; opacity: 0.6;
	}
	.ref-remove {
		position: absolute; top: 4px; right: 4px;
		width: 16px; height: 16px; background: rgba(0,0,0,0.8);
		color: white; border-radius: 50%; font-size: 10px;
		display: flex; align-items: center; justify-content: center;
		cursor: pointer; z-index: 10;
	}
	.ref-label {
		position: absolute; bottom: 0; width: 100%;
		font-size: 8px; font-weight: 800; color: white;
		text-align: center; background: rgba(0,0,0,0.8); padding: 2px 0;
		text-transform: uppercase; pointer-events: none;
	}

	.config-add-btn {
		width: 40px; height: 40px; flex-shrink: 0;
		border: 1px dashed var(--border-hover); border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		color: var(--text-dim); font-size: 16px; cursor: pointer;
		transition: 0.2s; position: relative;
		background: transparent;
	}
	.config-add-btn:hover {
		border-color: var(--text-main); color: var(--text-main); background: rgba(255,255,255,0.05);
	}

	#cardProduct { border-style: dashed; border-color: #333; }
	.config-card:hover, .config-card.active { 
		background: #1a1a1a; border-color: var(--border-hover); 
		transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	}
	.config-card.active { border-color: #fff; }

	.card-icon-box {
		width: 32px; height: 32px; background: #222; 
		border-radius: 8px; display: flex; align-items: center; justify-content: center;
		color: #fff; font-size: 16px; flex-shrink: 0; z-index: 2;
	}

	.card-details {
		display: flex; flex-direction: column; gap: 2px; flex-grow: 1; z-index: 2; overflow: hidden;
	}
	.card-label { font-size: 9px; font-weight: 800; color: #555; letter-spacing: 0.5px; text-transform: uppercase;}
	.card-value { font-size: 12px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	.card-bg-preview {
		position: absolute; top: 0; left: 0; width: 100%; height: 100%;
		object-fit: cover; opacity: 0.6; z-index: 1; transition: 0.2s;
	}

	/* --- COMMAND BAR --- */
	.command-bar-unified {
		background: var(--glass); 
		backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
		border: 1px solid var(--border); border-radius: var(--radius-bar);
		width: 100%; box-shadow: 0 40px 80px rgba(0,0,0,0.8);
		display: flex; flex-direction: column; overflow: visible;
	}
	.cmd-top { 
		padding: 20px 24px; /* Balanced padding */
		height: auto; min-height: 100px; 
		display: flex; align-items: flex-start; /* Aligns to top */
		gap: 12px; 
	}
	.cmd-input {
		width: 100%; background: transparent; border: none;
		font-family: var(--font-main); font-size: 15px; font-weight: 500;
		resize: none; line-height: 1.5;
		color: white; height: auto; min-height: 100%; 
		padding: 0; /* Remove padding to let flexbox align it */
		overflow: hidden; display: flex; align-items: center; /* Flex align */
	}
	.cmd-input:focus { outline: none; }
	.cmd-input::placeholder { color: #52525b; }
	.cmd-divider { height: 1px; background: #222; width: 95%; margin: auto; }
	.cmd-bottom { padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; height: 85px; }
	.cmd-controls-left { display: flex; align-items: center; gap: 8px; height: 100%; }

	.mode-toggle { background: #111; border: 1px solid #27272a; border-radius: 8px; padding: 3px; display: flex; gap: 2px; }
	.mode-opt { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #666; cursor: pointer; transition: 0.2s; user-select: none; }
	.mode-opt.active { background: #27272a; color: white; }
	.v-sep { width: 1px; height: 16px; background: #27272a; margin: 0 8px; }

	.cmd-pill {
		margin: 0 6px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #a1a1aa;
		cursor: pointer; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; transition: 0.2s; position: relative;
	}
	.cmd-pill:hover { background: #1a1a1a; color: white; }
	.cmd-pill.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

	.float-menu {
		position: absolute; bottom: 130%; left: 0; background: #111; border: 1px solid #333;
		border-radius: 12px; padding: 6px; display: none; flex-direction: column; gap: 2px;
		min-width: 140px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); z-index: 9999 !important;
	}
	.float-menu.right-aligned { left: auto; right: 0; bottom: 120%; width: 180px; }
	.float-menu.open { display: flex; animation: slideUp 0.15s ease-out; }

	.menu-header { font-size: 10px; font-weight: 800; color: #555; text-transform: uppercase; padding: 8px 12px 4px 12px; border-bottom: 1px solid #222; margin-bottom: 4px; }
	.menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; font-size: 13px; color: #ccc; cursor: pointer; }
	.menu-item:hover { background: #222; color: white; }

	.cmd-actions-right { display: flex; align-items: center; gap: 16px; }
	.cost-tag { font-size: 11px; font-weight: 600; color: #52525b; }
	.render-btn {
		background: white; color: black; border: none; height: 36px; padding: 0 20px;
		border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
		cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s;
	}
	.render-btn:hover { background: #e4e4e7; transform: translateY(-1px); }

	/* --- 5. RIGHT SIDEBAR --- */
	.toolbox-shell { flex: 0 0 var(--rail-width); height: 100%; background: var(--bg-body); border-left: 1px solid var(--border); z-index: 50; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; padding-bottom: 120px; }
	.panel-header { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
	.panel-title { font-size: 14px; font-weight: 800; color: white; }

	.studio-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }

	/* Vibe Cards (Right Panel) */
	.vibe-card {
		height: 80px; border-radius: 12px; border: 2px solid transparent;
		overflow: hidden; position: relative; cursor: pointer; transition: 0.2s;
		background: #111; margin: 10px 0;
	}
	.vibe-card:hover { transform: scale(1.02); border-color: rgba(255,255,255,0.2); }
	.vibe-card.selected { border-color: white; box-shadow: 0 0 15px rgba(255,255,255,0.1); }
	.vibe-content {
		position: absolute; bottom: 0; left: 0; width: 100%; padding: 12px;
		background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
	}
	.vibe-name { font-weight: 800; font-size: 13px; color: white; margin-bottom: 2px; }
	.vibe-cat { font-size: 9px; font-weight: 700; color: #888; text-transform: uppercase; }

	/* Character Grid (Right Panel) */
	.grid-scroll-container {
		max-height: 50vh; /* Adjust this value as needed (e.g., 50vh, 45vh) */
		overflow-y: auto;
		padding: 2px; /* Add a little space around the grid */
	}


	.char-grid { 
		display: grid; 
		grid-template-columns: repeat(3, 1fr); 
		gap: 8px; /* We can use a slightly larger gap now */
	}

	.char-thumb-card {
		/* REMOVE aspect-ratio */
		height: 80px; /* SET a fixed height for each card */
		background: #222; 
		border-radius: 8px;
		border: 2px solid transparent; 
		cursor: pointer; 
		position: relative;
		overflow: hidden; 
		display: flex; 
		align-items: center; 
		justify-content: center;
	}

	.char-thumb-card.selected { border-color: #3b82f6; background: #1e3a8a; }
	.char-thumb-card i { font-size: 24px; color: #555; }
	.char-thumb-card.selected i { color: white; }
	.char-thumb-label {
		position: absolute; bottom: 4px; left: 4px;
		font-size: 9px; font-weight: 700; color: white; text-shadow: 0 1px 2px black;
	}
	.action-select-container { margin-top: 16px; padding-top: 16px; border-top: 1px solid #333; }
	.action-select {
		width: 100%; background: #111; border: 1px solid #333;
		color: white; padding: 8px; border-radius: 6px; font-size: 12px; margin-top: 8px;
	}

	/* History List (Right Panel) */
	.history-list { display: flex; flex-direction: column; gap: 12px; }
	.history-item {
		display: flex; gap: 10px; padding: 10px; background: #111; 
		border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: 0.2s;
	}
	.history-item:hover { border-color: #333; background: #161616; }
	.hist-thumb { width: 48px; height: 48px; background: #222; border-radius: 8px; object-fit: cover; }
	.hist-info { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
	.hist-prompt { font-size: 12px; color: #ccc; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.hist-meta { font-size: 10px; color: #666; }

	/* --- CENTER HERO VIEWER --- */
	.hero-viewer {
		width: 100%; height: 100%; 
		display: flex; flex-direction: column;
		align-items: center; justify-content: center; 
		padding: 100px 40px 140px 40px; /* Padding to avoid Top Cards & Bottom Bar */
		pointer-events: auto; /* Re-enable clicks */
	}
	.hero-main-img {
		max-width: 100%; max-height: 100%; 
		object-fit: contain; 
		border-radius: 8px; 
		box-shadow: 0 0 50px rgba(0,0,0,0.5);
	}

	.hero-toolbar {
		margin-top: 16px;
		background: #111; border: 1px solid #333;
		padding: 8px 16px; border-radius: 30px;
		display: flex; gap: 16px; pointer-events: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
		animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
	.toolbar-btn {
		background: transparent; border: none; color: white;
		font-size: 13px; font-weight: 600; cursor: pointer;
		display: flex; align-items: center; gap: 6px; padding: 4px 8px;
		border-radius: 6px; transition: 0.2s;
	}
	.toolbar-btn:hover { background: #333; }
	.toolbar-btn.primary { color: #4ade80; }

	/* Home State Placeholder */
	.home-placeholder {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		height: 100%; color: #333; gap: 16px;
	}
	.home-icon { font-size: 48px; opacity: 0.5; }
	.home-text { font-size: 14px; font-weight: 600; }

	/* --- MODAL --- */
	@keyframes slideUp { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

	.modal-overlay { 
		position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 999; 
		display: none; align-items: center; justify-content: center; backdrop-filter: blur(10px);
	}
	.modal-overlay.open { display: flex; }
	.modal-box { 
		background: #111; border: 1px solid #333; padding: 24px; border-radius: 20px; width: 400px; position: relative;
	}
	.modal-title { color: white; font-weight: 800; margin-bottom: 16px; font-size: 16px; }
	.modal-input { width: 100%; background: #222; border: 1px solid #333; color: white; padding: 10px; border-radius: 8px; margin-top: 8px; }
	.modal-btn { width: 100%; background: white; border: none; padding: 12px; border-radius: 8px; font-weight: 800; margin-top: 16px; cursor: pointer; }
	.close-btn { position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 18px; color: #666; }

	#clearHistoryBtn {
		background: none;
		border: 1px solid #3f3f46;
		color: #a1a1aa;
		padding: 4px 10px;
		border-radius: 6px;
		font-size: 11px;
		font-weight: 700;
		cursor: pointer;
	}
	#clearHistoryBtn:hover { background: #1a1a1a; color: white; }

	/* --- TIER 2.5 UI: Visual Selector Styles --- */
	.selector-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		margin-top: 8px;
	}
	.thumb-btn {
		aspect-ratio: 1;
		background: #1a1a1a;
		border: 1px solid #333;
		border-radius: 6px;
		color: #888;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 4px;
		transition: all 0.2s;
	}
	.thumb-btn:hover {
		background: #27272a;
		color: white;
		border-color: #555;
	}
	.thumb-btn.selected {
		background: #3b82f6;
		border-color: #60a5fa;
		color: white;
	}
	.thumb-btn i {
		font-size: 16px;
	}
	.thumb-btn-label {
		font-size: 8px;
		font-weight: 600;
		text-align: center;
		line-height: 1.1;
		padding: 0 2px;
	}

	/* --- TIER 3 UI: Scene Browser Styles --- */
	.scene-grid {
		display: grid;
		grid-template-columns: 1fr 1fr; /* Two columns */
		gap: 10px;
	}

	.scene-card {
		aspect-ratio: 4 / 3;
		border-radius: 10px;
		border: 2px solid transparent;
		overflow: hidden;
		position: relative;
		cursor: pointer;
		transition: all 0.2s ease-out;
		background-size: cover;
		background-position: center;
	}

	.scene-card:hover {
		transform: scale(1.03);
		border-color: #777;
	}

	.scene-card.selected {
		border-color: white;
		box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
	}

	.scene-card-label {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;7
		padding: 8px 10px;
		background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
		color: white;
		font-size: 12px;
		font-weight: 700;
		Padding: 8px;
	}

	/* --- TIER 3 UI: Scene Editor (Ingredient List) --- */
	.scene-editor-header {
		margin-bottom: 16px;
	}
	.scene-editor-back-btn {
		background: none;
		border: none;
		color: #888;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		margin-bottom: 12px;
		padding: 4px;
	}
	.scene-editor-back-btn:hover { color: white; }

	.component-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.component-chip {
		background: #1f1f22;
		border: 1px solid #333;
		border-radius: 10px;
		padding: 10px 14px;
		position: relative; /* For dropdown positioning */
	}
	.component-label {
		font-size: 9px;
		font-weight: 700;
		color: #777;
		text-transform: uppercase;
		margin-bottom: 4px;
	}
	.component-value {
		color: white;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
	}
	.component-value.editable:hover {
		color: #818cf8; /* A nice purple for hover */
	}
	.component-value.not-editable {
		color: #666;
		cursor: not-allowed;
		font-style: italic;
	}

	/* Custom Details Text Box */
	.custom-details-input {
		width: 100%;
		background: #1a1a1a;
		border: 1px solid #333;
		border-radius: 8px;
		color: white;
		font-family: var(--font-main);
		font-size: 12px;
		padding: 10px;
		margin-top: 4px;
		resize: vertical;
	}

	/* Dropdown Menu for Components */
	.component-dropdown {
		position: absolute;
		background: #222;
		border: 1px solid #444;
		border-radius: 8px;
		padding: 6px;
		z-index: 1000;
		margin-top: 8px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.5);
		max-height: 200px;
		overflow-y: auto;
	}
	.dropdown-item {
		padding: 8px 12px;
		font-size: 12px;
		border-radius: 6px;
		cursor: pointer;
	}
	.dropdown-item:hover { background: #333; }
	.dropdown-item.selected { background: #4f46e5; font-weight: 700; }

	/* --- TIER 3 UI: Component Picker Panel --- */
	.component-picker {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.picker-search {
		width: 100%;
		background: #1a1a1a;
		border: 1px solid #333;
		border-radius: 8px;
		color: white;
		padding: 10px;
		font-size: 13px;
		margin-bottom: 16px;
	}
	.picker-list {
		flex-grow: 1;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	.picker-item {
		padding: 12px 16px;
		border-radius: 8px;
		cursor: pointer;
		transition: background 0.2s;
	}
	.picker-item:hover {
		background: #27272a;
	}
	.picker-item.selected {
		background: #3b82f6;
		font-weight: 700;
	}
	.picker-item-name {
		font-size: 13px;
		font-weight: 600;
		color: white;
	}
	.picker-item-desc {
		font-size: 11px;
		color: #888;
		margin-top: 2px;
	}

	/* Help Box Style */
	.scene-editor-help {
		background: linear-gradient(145deg, #1a1a1a 0%, #1f1f1f 100%);
		border: 1px solid #2a2a2a;
		border-radius: 14px;
		padding: 16px;
		margin-bottom: 20px;
		position: relative;
		box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5);
	}

	.scene-editor-help b { 
		color: #e4e4e7; 
	}

	.scene-editor-help i { 
		color: #818cf8; 
		font-style: normal;
	}

	.help-dismiss-btn {
		position: absolute;
		top: 12px;
		right: 12px;
		background: rgba(255,255,255,0.05);
		border: 1px solid #333;
		border-radius: 6px;
		color: #888;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		font-size: 12px;
		transition: 0.2s;
	}

	.help-dismiss-btn:hover {
		background: rgba(255,255,255,0.1);
		color: white;
		border-color: #555;
	}

	/* TIER 3 UI: Edit Scene Button */
	.edit-scene-btn {
		width: 40px; 
		height: 40px; 
		flex-shrink: 0;
		border: 1px solid var(--border-hover);
		border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		color: var(--text-dim); font-size: 16px; cursor: pointer;
		transition: 0.2s;
		background: var(--bg-surface);
		margin-left: -20px; /* Overlap slightly */
		z-index: 2;
	}
	.edit-scene-btn:hover {
		background: #333;
		color: white;
	}


	/* Success/Error Toasts */
	.toast-notification {
		position: fixed;
		bottom: 30px;
		right: 30px;
		background: #1a1a1a;
		border: 1px solid #333;
		border-radius: 10px;
		padding: 12px 20px;
		display: flex;
		align-items: center;
		gap: 12px;
		color: white;
		font-size: 13px;
		font-weight: 500;
		z-index: 999999;
		animation: slideInRight 0.3s ease;
		box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	}

	.toast-notification.success {
		border-left: 4px solid #4ade80;
	}

	.toast-notification.error {
		border-left: 4px solid #ef4444;
	}

	.toast-notification.info {
		border-left: 4px solid #3b82f6;
	}

	.toast-notification i {
		font-size: 18px;
	}

	.toast-notification.success i {
		color: #4ade80;
	}

	.toast-notification.error i {
		color: #ef4444;
	}

	.toast-notification.info i {
		color: #3b82f6;
	}

	@keyframes slideInRight {
		from {
			opacity: 0;
			transform: translateX(30px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* Subtle highlight for Edit Scene button when a preset is selected */
	.edit-scene-btn.highlight {
		animation: subtlePulse 2s infinite ease-in-out;
		border-color: #3b82f6;
		color: #3b82f6;
	}

	.edit-scene-btn.highlight:hover {
		background: rgba(59, 130, 246, 0.5);
		color: white;
	}

	@keyframes subtlePulse {
		0% {
			box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3);
		}
		70% {
			box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
		}
		100% {
			box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
		}
	}

	.edit-scene-btn {
		#width: auto;
		padding: 0 16px;
		gap: 8px;
		border-radius: 40px;
	}

	.edit-scene-btn .edit-scene-text {
		font-size: 12px;
		font-weight: 600;
		white-space: nowrap;
	}

	.edit-scene-btn.highlight .edit-scene-text {
		display: inline;
	}


	/* Prompt hint styling */
	.prompt-hint {
		position: absolute;
		right: 16px;
		top: 15px;
		background: rgba(59, 130, 246, 0.1);
		border-radius: 20px;
		padding: 4px 12px;
		font-size: 11px;
		color: #3b82f6;
		display: flex;
		align-items: center;
		gap: 6px;
		pointer-events: none;
		border: 1px solid rgba(59, 130, 246, 0.2);
		backdrop-filter: blur(4px);
		z-index: 5;
		transition: opacity 0.2s;
	}

	.prompt-hint i {
		font-size: 12px;
	}

	/* When textarea is focused, dim the hint */
	.prompt-hint.override {
		background: rgba(245, 158, 11, 0.1);
		border-color: rgba(245, 158, 11, 0.3);
		color: #f59e0b;
	}
	.prompt-hint {
		transition: all 0.2s ease; /* Smooth transition between states */
	}

	/* Ensure textarea has proper padding so text doesn't go under hint */
	.cmd-input {
		padding-right: 140px !important; /* Make room for the hint */
	}


	/* Pose Category Styles */
	.pose-categories-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		margin-bottom: 16px;
	}

	.pose-category-btn {
		background: #1a1a1a;
		border: 1px solid #333;
		border-radius: 10px;
		padding: 12px 8px;
		text-align: center;
		cursor: pointer;
		transition: all 0.2s;
	}

	.pose-category-btn:hover {
		background: #27272a;
		border-color: #555;
		transform: translateY(-2px);
	}

	.pose-category-btn i {
		font-size: 20px;
		color: #888;
		margin-bottom: 4px;
	}

	.pose-category-btn div {
		font-size: 11px;
		font-weight: 600;
		color: #ccc;
	}

	/* Current Pose Display */
	.current-pose-display {
		background: #0f0f0f;
		border: 1px solid #333;
		border-radius: 12px;
		padding: 16px;
		margin-top: 16px;
		animation: slideUp 0.3s ease;
	}

	/* Pose Detail Modal */
	.pose-detail-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.8);
		backdrop-filter: blur(8px);
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: fadeIn 0.2s ease;
	}

	.pose-detail-modal {
		background: #111;
		border: 1px solid #333;
		border-radius: 20px;
		width: 90%;
		max-width: 800px;
		max-height: 80vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	@keyframes scaleIn {
		from {
			opacity: 0;
			transform: scale(0.9);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	/* Camera Thumb Grid */
	.camera-thumb-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		margin-top: 12px;
	}

	.camera-thumb {
		aspect-ratio: 1;
		background: #1a1a1a;
		border: 2px solid transparent;
		border-radius: 10px;
		padding: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.camera-thumb:hover {
		background: #27272a;
		border-color: #555;
		transform: translateY(-2px);
	}

	.camera-thumb.selected {
		border-color: #818cf8;
		background: #2a2a35;
	}

	.camera-thumb i {
		font-size: 24px;
		color: #888;
	}

	.camera-thumb.selected i {
		color: #818cf8;
	}

	.camera-thumb-name {
		font-size: 10px;
		font-weight: 700;
		color: #ccc;
		text-align: center;
	}

	.camera-thumb-desc {
		font-size: 8px;
		color: #666;
		text-align: center;
	}


	/* Smart Studio */
	/* Header */
	.ss-header {
		height: 70px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;
		border-bottom: 1px solid rgba(255,255,255,0.05); background: transparent; flex-shrink: 0;
	}
	.ss-brand { color: white; font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 10px; }
	.ss-brand i { color: #ffffff; font-size: 20px; }
	.ss-close-btn {
		background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
		color: #aaa; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
		cursor: pointer; transition: 0.2s;
	}
	.ss-close-btn:hover { background: rgba(255,255,255,0.1); color: white; }

	/* Viewport (Center Stage) */
	.ss-viewport {
		flex: 1; 
		display: flex; 
		flex-direction: column; 
		position: relative;
		overflow: hidden; /* FIX: Changed from 'auto'. Stops the page from expanding. */
		background-color: var(--bg-body);
		background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
		background-size: 24px 24px;
	}
	.ss-ambient-glow {
		position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
		width: 600px; height: 600px; background: radial-gradient(circle, rgb(152 152 152 / 15%) 0%, transparent 60%);
		z-index: -1; pointer-events: none;
	}

	.ss-hero-text {
		text-align: center; margin-bottom: 40px; pointer-events: none; transition: opacity 0.3s;  text-align: center; margin-top: 50px;
	}

	#magicHeroText.ss-hero-text  {
		margin-top: 10px;
	}

	.ss-hero-text h1 {
		font-size: 48px; font-weight: 800; color: white; margin: 0; letter-spacing: -0.03em;
	}
	.ss-hero-text p {
		font-size: 14px; color: #888; margin: 8px 0 0 0; font-weight: 500;
	}

	.ss-upload-ring {
		width: 320px; height: 320px; border-radius: 24px; 
		background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
		border: 1px solid rgba(255,255,255,0.05);
		backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		cursor: pointer; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
		box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
		position: relative; overflow: hidden; margin: 0 auto;
	}
	/* The glowing hover state */
	.ss-upload-ring::before {
		content: ''; position: absolute; inset: 0;
		background: radial-gradient(circle at 50% 0%, rgba(200, 200, 200, 0.15), transparent 70%);
		opacity: 0; transition: opacity 0.4s;
	}
	.ss-upload-ring:hover { 
		transform: translateY(-5px) scale(1.02); 
		border-color: rgba(250, 250, 250, 0.3);
		box-shadow: 0 40px 80px rgba(0,0,0,0.8), 0 0 40px rgba(129, 140, 248, 0.1);
	}
	.ss-upload-ring:hover::before { opacity: 1; }
	/* Drag Active State */
	.ss-upload-ring.drag-over {
		border-color: #818cf8; background: rgba(99, 102, 241, 0.1);
		transform: scale(1.05);
	}
	.ss-upload-ring i { font-size: 42px; color: #666; margin-bottom: 20px; transition: 0.3s; z-index: 2; }
	.ss-upload-ring:hover i { color: #ffffff; transform: translateY(-5px); }
	.ss-upload-title { color: white; font-size: 15px; font-weight: 700; z-index: 2; letter-spacing: 0.5px; }
	.ss-upload-sub { color: #666; font-size: 11px; margin-top: 6px; z-index: 2; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; }

	.ss-preview-container {
		margin: 100px auto; /* Force Center */
		position: relative; max-width: 400px; max-height: 50vh;
		border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.8);
		z-index: 10; /* Lower than the dock */
	}
	.ss-hero-img { width: 100%; height: 100%; object-fit: contain; display: block; }
	.ss-scan-line {
		position: absolute; top: 0; left: 0; width: 100%; height: 2px;
		background: #818cf8; box-shadow: 0 0 20px #818cf8, 0 0 40px #818cf8;
		animation: scan 2s infinite ease-in-out; opacity: 0; transition: opacity 0.3s;
	}
	@keyframes scan { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }

	/* Preset Suggestions Grid */
	.ss-presets-container {
		flex: 1; /* FIX: Removed the invalid '#' symbol so it takes up space */
		display: none; /* JS Toggles this */
		flex-direction: row; 
		gap: 20px;
		padding: 20px 40px;
		min-height: 0; /* FIX: Forces flex children to calculate height correctly */
		overflow: hidden; /* FIX: Prevents container from blowing up */
	}
	/* Left Sidebar */
	.ss-bucket-sidebar {
		width: 280px; flex-shrink: 0; 
		display: flex; flex-direction: column; gap: 16px;
		border-right: 1px solid rgba(255,255,255,0.05);
		padding: 10px;
	}
	.ss-bucket-img-box {
		width: 100%; aspect-ratio: 1; background: #000; border-radius: 12px; 
		position: relative; border: 1px solid #222; overflow: hidden;
	}
	.ss-bucket-img-label {
		position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.8); 
		color: white; font-size: 9px; font-weight: 800; padding: 4px 8px; border-radius: 4px;
	}
	.ss-ai-detected-vertical { display: flex; flex-direction: column; gap: 8px; }
	.ai-label { color: #818cf8; font-size: 10px; font-weight: 800; text-transform: uppercase; }

	.ss-bucket-header-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px;}
	.ss-bucket-list {
		flex-grow: 1; overflow-y: auto; border: 1px dashed #333; border-radius: 8px; 
		padding: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 300px;
	}
	.ss-bucket-item {
		background: #111; border: 1px solid #333; color: #ccc; font-size: 11px; font-weight: 600;
		padding: 8px 12px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center;
	}
	.ss-bucket-item i { cursor: pointer; color: #888; }
	.ss-bucket-item i:hover { color: #ef4444; }

	.ss-render-multi-btn { width: 100%; }

	/* Right Panel */
	.ss-library-panel {
		flex: 1; min-width: 0;
		display: flex; flex-direction: column;
		min-height: 0; /* CRITICAL: Stop the parent from expanding past screen */
		overflow: hidden; /* Hides outer */
	}

	.ss-render-multi-btn {
		background: linear-gradient(180deg, #f9f9f9, #e1e1e1); color: black;
		border: none; padding: 10px 24px; border-radius: 8px; font-size: 13px; font-weight: 800;
		cursor: pointer; transition: 0.2s; box-shadow: 0 10px 20px rgba(150, 150, 150, 0.3);
	}
	.ss-render-multi-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
	.ss-render-multi-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(210, 210, 210, 0.5); }

	/* --- Perfect 1:1 Thumbnail Grid --- */
	.ss-presets-grid {
		flex: 1;                      /* Take remaining space in .ss-library-panel */
		max-height: 70dvh;                /* Allow shrinking below content height */
		overflow-y: auto;              /* Enable vertical scroll when needed */
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		grid-auto-rows: max-content;
		align-content: start;
		gap: 16px;
		padding-bottom: 150px;         /* Space for the fixed dock */
		padding-right: 8px;
		/* Remove height, max-height, and any flex override */
	}

	.ss-preset-card {
		width: 100%;
		background: #111; border: 1px solid #ffffff; border-radius: 12px; overflow: hidden;
		cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); position: relative;
		display: flex; flex-direction: column;
	}

	.ss-preset-card:hover { border-color: #555; transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }

	/* Animation when clicked */
	.ss-preset-card.sucked-in {
		transform: scale(0.8) translateX(-50px);
		opacity: 0;
		pointer-events: none;
	}

	.ss-preset-card.selected { border-color: #ffffff; box-shadow: 0 0 0 2px rgba(129,140,248,0.4), 0 15px 30px rgba(0,0,0,0.5); }

	/* Force aspect ratio here! */
	.ss-preset-thumb { 
		aspect-ratio: 16 / 9; /* Wide and short */
		width: 100%; background: #222; position: relative; overflow: hidden;
	}

	.ss-preset-thumb img {
		width: 100%; height: 100%; object-fit: cover;
	}

	.ss-preset-check {
		position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
		background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.4); border-radius: 50%;
		display: flex; align-items: center; justify-content: center; color: transparent; transition: 0.2s;
		backdrop-filter: blur(4px);
	}
	.ss-preset-card.selected .ss-preset-check { background: #ffffff; border-color: #e4e4e7; color: black; }
	.ss-preset-info { padding: 14px 12px; background: #0a0a0a; border-top: 1px solid #222; flex-grow: 1; }
	.ss-preset-name { color: white; font-weight: 700; font-size: 13px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.ss-preset-cat { color: #666; font-size: 9px; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; }

	/* Floating Bottom Dock (Hidden by Default) */
	.ss-dock-wrapper {
		position: fixed; 
		bottom: 0; left: 15%; right: 0;
		padding: 20px;
		z-index: 1000;
		transform: translateY(100%); /* Hidden initially */
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.ss-dock-wrapper.revealed {
		transform: translateY(0); /* Slides up when product uploaded */
	}

	/* Pulsing effect to draw attention */
	@keyframes attentionPulse {
		0% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.8); border-color: #818cf8; }
		70% { box-shadow: 0 0 0 20px rgba(129, 140, 248, 0); border-color: var(--border); }
		100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); border-color: var(--border); }
	}
	.attention-pulse {
		animation: attentionPulse 1.5s ease-out 1; /* Runs once cleanly */
	}

	.ss-dock {
		width: 100%; max-width: 1080px; margin: 0 auto;
		background: rgba(15, 15, 15, 0.95);
		backdrop-filter: blur(20px);
		border: 1px solid var(--border);
		border-radius: 24px;
		box-shadow: 0 10px 40px rgba(0,0,0,0.8);
	}

	.ss-dock-blur {
		position: absolute; inset: 0; background: var(--glass);
		backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); z-index: 1;
		border-radius: var(--radius-bar); overflow: hidden;
	}
	.ss-dock-content {
		position: relative; z-index: 2; display: flex; flex-direction: column; 
		padding: 16px 24px; gap: 16px;
	}
	.ss-dock-row {
		display: flex; justify-content: center; align-items: center; width: 100%;
	}

	.ss-toggle.active { background: #222; color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }

	.ss-char-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; max-width: 250px; margin: 0 10px; }
	.ss-char-scroll::-webkit-scrollbar { height: 4px; }
	.ss-char-avatar { 
		width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: #222;
		background-size: cover; background-position: center; border: 2px solid transparent;
		cursor: pointer; transition: 0.2s; opacity: 0.6;
	}
	.ss-char-avatar:hover { opacity: 1; transform: translateY(-2px); }
	.ss-char-avatar.active { border-color: #818cf8; opacity: 1; box-shadow: 0 0 15px rgba(129,140,248,0.4); }
	.upload-avatar { display: flex; align-items: center; justify-content: center; border: 1px dashed #555; background: transparent; }
	.upload-avatar i { color: #888; font-size: 16px; }

	.ss-select {
		background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 10px 16px;
		border-radius: 8px; font-size: 13px; font-weight: 500; font-family: var(--font-main);
		cursor: pointer; outline: none; appearance: none; min-width: 140px;
	}
	.ss-select:disabled { opacity: 0.3; cursor: not-allowed; }

	.ss-generate-btn {
		background: linear-gradient(135deg, #efefef, #dfdfdf); color: black; border: none;
		padding: 0 30px; height: 44px; border-radius: 30px; font-size: 14px; font-weight: 800;
		cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px;
		box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3); opacity: 0.5; pointer-events: none;
	}
	.ss-generate-btn.ready { opacity: 1; pointer-events: auto; }
	.ss-generate-btn.ready:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(79, 70, 229, 0.5); }

	/* --- PHASE 3C: GALLERY VIEW STYLES --- */
	.ss-gallery-container {
		flex: 1; /* FIX: Added so it fills the viewport */
		display: none; 
		flex-direction: column;
		padding: 20px 40px;
		overflow: hidden; /* FIX: Hides outer overflow */
		min-height: 0; /* FIX: Forces flex children to calculate height */
	}

	.ss-gallery-grid {
		flex: 1;
		max-height: 70dvh;
		overflow-y: auto;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		grid-auto-rows: max-content;
		align-content: start;
		gap: 20px;
		padding:0 20px;
		padding-bottom: 150px;
		/* Remove fixed height */
	}

	.ss-gallery-card {
		aspect-ratio: 1; background: #0a0a0a; border: 1px solid #27272a;
		border-radius: 12px; overflow: hidden; position: relative;
		box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	}

	.ss-gallery-img {
		width: 100%; height: 100%; object-fit: cover; display: block;
	}

	.ss-gallery-loader {
		position: absolute; inset: 0; display: flex; flex-direction: column;
		align-items: center; justify-content: center; background: rgba(10,10,10,0.8);
		color: ffffff; font-size: 12px; font-weight: 600; gap: 10px;
	}

	/* Hover Overlay & Actions */
	.ss-card-overlay {
		position: absolute; inset: 0; background: rgba(0,0,0,0.7);
		backdrop-filter: blur(4px); display: flex; flex-direction: column;
		align-items: center; justify-content: center; gap: 12px;
		opacity: 0; transition: opacity 0.2s;
	}
	.ss-gallery-card:hover .ss-card-overlay { opacity: 1; }

	.ss-action-row { display: flex; gap: 8px; }

	.ss-action-btn {
		background: #222; border: 1px solid #444; color: black;
		width: 40px; height: 40px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		cursor: pointer; transition: 0.2s; font-size: 18px;
	}
	.ss-action-btn:hover { background: #ffffff; border-color: #ffffff; transform: scale(1.1); }

	.ss-finetune-btn {
		background: linear-gradient(135deg, #e5e5e9, #d6d6d9); border: none;
		color: black; padding: 10px 20px; border-radius: 20px; font-size: 12px;
		font-weight: 800; cursor: pointer; transition: 0.2s; display: flex;
		align-items: center; gap: 6px; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
	}
	.ss-finetune-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(210, 210, 210, 0.6); }

	.ss-card-label {
		position: absolute; bottom: 0; left: 0; width: 100%;
		padding: 10px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
		color: white; font-size: 11px; font-weight: 700; pointer-events: none;
	}

	/* --- AI Detected Editable Bar --- */
	.ss-ai-detected-bar {
		border-radius: 12px;
		padding: 10px 16px;
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 24px;
	}
	.ss-detected-input {
		background: transparent;
		border: 1px solid rgba(255,255,255,0.05);
		color: white;
		font-size: 14px;
		font-weight: 700;
		font-family: var(--font-main);
		padding: 4px 8px;
		border-radius: 6px;
		outline: none;
		transition: 0.2s;
		flex-grow: 1;
		max-width: 300px;
	}
	.ss-detected-input:focus, .ss-detected-input:hover {
		border-color: #818cf8;
		background: rgba(0,0,0,0.5);
	}
	.ss-detected-select {
		background: rgba(0,0,0,0.5);
		border: 1px solid rgba(255,255,255,0.05);
		color: white;
		font-size: 12px;
		font-weight: 600;
		padding: 6px 10px;
		border-radius: 6px;
		outline: none;
		cursor: pointer;
		transition: 0.2s;
	}
	.ss-detected-select:hover { border-color: #818cf8; }

	/* --- Smart Studio UI Polish --- */
	.ss-remove-img-btn {
		position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.7);
		color: #e4e4e7; border: 1px solid #3f3f46; width: 36px; height: 36px; 
		border-radius: 10px; cursor: pointer; display: flex; align-items: center; 
		justify-content: center; z-index: 10; transition: 0.2s; font-size: 16px;
	}
	.ss-remove-img-btn:hover { background: #ef4444; border-color: #ef4444; color: white; transform: scale(1.05); }
	.select-icon {
		position: absolute; right: 14px; top: 50%; transform: translateY(-50%); 
		color: #888; pointer-events: none; font-size: 14px;
	}

	/* --- Smart Studio Command Bar & Elements --- */

	/* --- Advanced Editor: Preset Search & Favorites --- */
	.preset-search-container { 
		position: sticky; top: -24px; background: var(--bg-body); 
		z-index: 20; padding-bottom: 12px; margin-bottom: 12px; 
		border-bottom: 1px solid var(--border); 
		
	}
	.preset-cat-scroll { 
		display: flex; gap: 6px; overflow-x: auto; 
		margin-top: 10px; padding-bottom: 4px; flex-wrap: wrap;
	}
	.preset-cat-scroll::-webkit-scrollbar { height: 0px; } /* hide scrollbar for sleekness */
	.preset-cat-pill { 
		padding: 6px 12px; background: #111; border: 1px solid #333; 
		border-radius: 20px; font-size: 10px; cursor: pointer; 
		white-space: nowrap; color: #888; font-weight: 700; transition: 0.2s;
	}
	.preset-cat-pill:hover { background: #222; color: white; }
	.preset-cat-pill.active { background: white; color: black; border-color: white; }

	.scene-card-fav { 
		position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; 
		background: rgba(0,0,0,0.6); border-radius: 50%; display: flex; 
		align-items: center; justify-content: center; color: #888; 
		cursor: pointer; transition: 0.2s; z-index: 5; border: 1px solid transparent; 
	}
	.scene-card-fav:hover { color: white; background: rgba(0,0,0,0.8); border-color: #555; transform: scale(1.1); }
	.scene-card-fav.active { color: #fbbf24; background: rgba(0,0,0,0.8); }

	/* --- PHASE 3: MAGIC CANVAS WORKSPACE --- */
	.magic-workspace {
		flex-grow: 1; display: flex; flex-direction: column; align-items: center; 
		padding: 40px; overflow-y: auto; z-index: 1;
		background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
		background-size: 24px 24px;
	}

	.magic-content-wrapper {
		width: 100%; max-width: 900px; display: flex; flex-direction: column; 
		align-items: center; justify-content: center; margin:auto; flex-grow: 1;
	}

	/* Ensure all modals pop over the new views */
	.modal-overlay { z-index: 4000 !important; }

	/* Premium Upload Ring */
	.magic-upload-ring {
		width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.02);
		border: 1px solid rgba(255,255,255,0.15); display: flex; flex-direction: column; 
		align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s;
		position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.5);
		margin-bottom: 40px;
	}
	.magic-upload-ring:hover { 
		border-color: #ffffff; background: rgba(255,255,255,0.05); 
		transform: scale(1.05); box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 40px rgba(255,255,255,0.1);
	}

	.magic-dynamic-area {
		width: 100%; display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px;
	}

	/* Command Bar Style Inputs */
	.magic-sleek-input {
		width: 100%; background: var(--glass); border: 1px solid var(--border);
		backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
		color: white; padding: 16px 20px; border-radius: 16px; font-size: 14px; 
		font-weight: 500; font-family: var(--font-main); outline: none; transition: 0.2s;
		box-shadow: 0 20px 40px rgba(0,0,0,0.5);
	}
	.magic-sleek-input:focus { border-color: #ffffff; background: rgba(20,20,20,0.8); }
	.magic-sleek-input::placeholder { color: #666; }

	.magic-action-row {
		display: flex; justify-content: space-between; align-items: center; 
		width: 100%; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.05);
	}

	/* Highlight state for Left Nav */
	.nav-item-tool.magic-active {
		background: rgba(255, 255, 255, 0.1) !important;
		color: white; border-left: 2px solid white; border-radius: 0 8px 8px 0;
	}

	/* Magic Gallery Override */
	#magicGallery .result-card {
		animation: fadeIn 0.4s ease-out forwards;
		box-shadow: 0 30px 60px rgba(0,0,0,0.8);
	}

	/* Magic Gallery Specific Fixes */
	#magicGallery {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
		gap: 30px !important;
		width: 100% !important;
		max-width: 1200px !important;
		padding-bottom: 80px !important;
	}

	#magicGallery .result-card {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
	}

	/* THE SPLIT LOGIC (Canvas vs Dock) */
	/* We use a strict Flex Column. Canvas takes all space (flex 1). Dock is rigid (flex 0). */
	.view-center-stage {
		flex: 1; min-width: 0; height: 100%;
		display: flex; flex-direction: column;
		position: relative;
		background: radial-gradient(circle at 50% 30%, #111 0%, #050505 60%);
	}

	/* Top: Scrolling Canvas */
	.app-canvas {
		flex: 1 1 0%;
		overflow-y: auto; overflow-x: hidden;
		padding: 40px 20px;
		-webkit-overflow-scrolling: touch;
	}

	/* Bottom: Static Dock */
	.app-dock {
		flex: 0 0 auto;
		width: 100%;
		padding: 0 24px 24px 24px;
		z-index: 100;
	}

	/* Command Bar Container */
	.engine-wrapper, .command-bar-unified {
		width: 100%; max-width: 900px; margin: 0 auto;
		display: flex; flex-direction: column;
		background: rgba(10, 10, 10, 0.95);
		backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
		border: 1px solid var(--border);
		border-radius: 20px;
		box-shadow: 0 20px 50px rgba(0,0,0,0.8);
		padding: 16px;
	}

	.cmd-top { display: flex; padding: 0 8px 12px 8px; flex-shrink: 0; }
	.cmd-input { height: 60px; min-height: 60px; border: none; background: transparent; color: white; width: 100%; outline: none; resize: none; font-family: var(--font-main); font-size: 14px; font-weight: 500; }
	.cmd-bottom { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; border-top: 1px solid #222; align-items: center; justify-content: space-between; flex-shrink: 0; }

	.ae-nav-toggle {display: none}
	.loader-overlay, #magicLoaderOverlay { z-index: 90 !important; }

	/*Save Toast Animation*/
	@keyframes slideOutRight {
		from {
			opacity: 1;
			transform: translateX(0);
		}
		to {
			opacity: 0;
			transform: translateX(30px);
		}
	}


	/* ========================================================================== */
	/*   GUIDER (FLOATING AI AGENT) STYLES                                        */
	/* ========================================================================== */
	/* --- GUIDER 3.0: PREMIUM CHAT UI --- */
	#guiderWidget { 
		position: fixed; 
		bottom: 24px; 
		left: 24px; /* Default left for all */
		z-index: 9000; 
		display: flex; 
		flex-direction: column; 
		align-items: flex-start; /* Align content to the left */
		gap: 16px; 
	}


	.guider-window { 
		width: 400px; height: 600px; max-height: 70vh; 
		background: #09090b; border: 1px solid #27272a; border-radius: 20px; 
		box-shadow: 0 40px 100px rgba(0,0,0,0.9); 
		display: none; flex-direction: column; overflow: hidden; 
		animation: guiderPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.guider-window.open { display: flex; }

	
	/* Floating Trigger Button */
	.guider-trigger { 
		height: 44px; 
		width: auto; 
		background: #ffffff; 
		color: #000000; 
		border-radius: 22px; 
		display: flex; align-items: center; justify-content: center; 
		font-size: 18px; 
		cursor: pointer; 
		box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
		transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		padding: 0 16px;
		gap: 8px;
		overflow: hidden;
	}

	.guider-trigger .trigger-label {
		white-space: nowrap;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: -0.01em;
	}

	.guider-trigger:hover { 
		transform: translateY(-2px) scale(1.02);
		box-shadow: 0 15px 40px rgba(255,255,255,0.2);
	}

	.guider-trigger.active { 
		background: #27272a; 
		color: white; 
	}
	
	/* --- DESKTOP SPECIFIC OVERRIDES --- */
	@media (min-width: 1025px) {
		#guiderWidget {
			/* Sidebar is 260px + 24px padding = 284px */
			left: 284px; 
			bottom: 32px;
		}
		
		.guider-window {
			transform-origin: bottom left; /* Pop up from the left */
		}
	}
	
	/* --- TABLET/MOBILE SPECIFIC --- */
	@media (max-width: 1024px) {
		#guiderWidget {
			#left: auto;
			#right: 16px; /* Back to right on tablets to avoid blocking nav icons */
			bottom: 10px; /* Lift above command bar */
			align-items: flex-end;
		}
		
		.guider-trigger {
			height: 35px;
			padding: 10px;
		}
		
		.guider-window {
			width: calc(100vw - 32px);
			transform-origin: bottom right;
		}
	}


	@keyframes guiderPulse {
		0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); transform: scale(1); }
		5% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); transform: scale(1.05); }
		10% { transform: scale(1); }
		100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
	}

    @keyframes guiderPop {
		from { opacity: 0; transform: scale(0.95) translateY(20px); }
		to { opacity: 1; transform: scale(1) translateY(0); }
	}

	/* Header */
	.guider-header { 
		padding: 18px 24px; background: rgba(20, 20, 25, 0.98); 
		border-bottom: 1px solid #27272a; display: flex; justify-content: space-between; align-items: center; 
	}

	/* Chat Area */
	.guider-chat { 
		flex: 1; overflow-y: auto; padding: 24px; 
		display: flex; flex-direction: column; gap: 20px; 
		background: radial-gradient(circle at 50% 10%, #1a1a1a 0%, #09090b 40%);
	}

	/* Chat Row Layout */
	.chat-row { display: flex; gap: 12px; align-items: flex-start; max-width: 100%; }
	.chat-row.user { flex-direction: row-reverse; }

	/* Avatars */
	.chat-avatar {
		width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
		display: flex; align-items: center; justify-content: center; font-size: 14px;
	}
	.chat-row.ai .chat-avatar { background: linear-gradient(135deg, #818cf8, #6366f1); color: white; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); }
	.chat-row.user .chat-avatar { background: #27272a; color: #a1a1aa; border: 1px solid #3f3f46; font-weight: 700; font-size: 10px; }

	/* Bubbles */
	.jarvis-msg { 
		padding: 14px 18px; border-radius: 16px; font-size: 13.5px; line-height: 1.6; 
		position: relative; word-wrap: break-word; max-width: 85%;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	.chat-row.ai .jarvis-msg { 
		background: #18181b; color: #e4e4e7; border: 1px solid #27272a; 
		border-top-left-radius: 4px; 
	}
	.chat-row.user .jarvis-msg { 
		background: #2563eb; color: white; border: 1px solid #3b82f6; 
		border-top-right-radius: 4px; 
	}

	/* Rendered HTML inside bubbles */
	.jarvis-msg b { color: white; font-weight: 700; }
	.jarvis-msg a { color: #818cf8; text-decoration: underline; }
	.chat-row.user .jarvis-msg a { color: white; }

	/* Suggestions */
	.guider-suggestions {
		display: flex; gap: 8px; padding: 12px 20px; background: #0c0c0e; border-top: 1px solid #27272a; overflow-x: auto;
	}
	.guider-suggestions::-webkit-scrollbar { display: none; }
	.g-pill {
		background: #18181b; border: 1px solid #333; color: #a1a1aa; font-size: 11px; font-weight: 600;
		padding: 8px 14px; border-radius: 20px; cursor: pointer; white-space: nowrap; 
		display: flex; align-items: center; gap: 6px; transition: 0.2s;
	}
	.g-pill:hover { background: #27272a; color: white; border-color: #555; }
	.g-pill i { color: #818cf8; font-size: 14px; }

	/* Input Area */
	.guider-input-area { 
		padding: 16px 20px; background: #09090b; border-top: 1px solid #27272a; 
		display: flex; align-items: flex-end; gap: 10px; 
	}
	#guiderInput { 
		flex: 1; background: #121214; border: 1px solid #27272a; color: white; 
		padding: 12px 16px; border-radius: 12px; font-size: 13px; outline: none; 
		resize: none; max-height: 120px; font-family: inherit; line-height: 1.5;
		transition: border-color 0.2s;
	}
	#guiderInput:focus { border-color: #818cf8; background: #18181b; }

	/* Buttons */
	#guiderSendBtn { 
		width: 44px; height: 44px; border-radius: 12px; cursor: pointer; 
		display: flex; align-items: center; justify-content: center; flex-shrink: 0;
		background: white; border: none; color: black; font-size: 18px; 
		transition: 0.2s; box-shadow: 0 4px 12px rgba(255,255,255,0.1);
	}
	#guiderSendBtn:hover { transform: scale(1.05); background: #e4e4e7; }

	#guiderAttachBtn {
		width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
		display: flex; align-items: center; justify-content: center; flex-shrink: 0;
		background: transparent; border: 1px solid #27272a; color: #a1a1aa; font-size: 18px;
		transition: 0.2s;
	}
	#guiderAttachBtn:hover { color: white; border-color: #555; background: #1a1a1a; }

	#variantPicker {
		animation: slideUp 0.2s ease-out;
	}

	
	/* ========================================================================== */
	/*   EDUCATIONAL EMPTY STATES                                                 */
	/* ========================================================================== */

	/* 1. Smart Studio Flow */
	.ss-onboarding-flow {
		display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px;
		opacity: 0.6;
	}
	.flow-step {
		display: flex; flex-direction: column; align-items: center; gap: 12px;
	}
	.step-icon {
		width: 48px; height: 48px; border-radius: 12px; border: 1px solid #333;
		display: flex; align-items: center; justify-content: center; font-size: 20px; color: #666;
		background: rgba(255,255,255,0.02);
	}
	.flow-step span {
		font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.5px;
	}
	.flow-line {
		width: 60px; height: 1px; background: #333; margin-bottom: 24px;
	}

	/* 2. Magic Tools Cards */
	.magic-onboarding-grid {
		display: flex; gap: 12px; margin-top: 32px; justify-content: center;
		opacity: 0.5; /* Muted by default */
		transition: opacity 0.3s;
	}
	.magic-onboarding-grid:hover { opacity: 1; /* Brighten on hover */ }

	.magic-card-guide {
		width: 120px; padding: 16px 12px; 
		background: transparent; /* No background */
		border: 1px solid #333; /* Very subtle border */
		border-radius: 12px; text-align: center;
		display: flex; flex-direction: column; align-items: center; gap: 6px;
		cursor: default; /* Not a button */
	}
	.magic-card-guide i { font-size: 20px; margin-bottom: 4px; opacity: 0.8; }
	.magic-card-guide h4 { margin: 0; color: #ccc; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
	.magic-card-guide span { font-size: 10px; color: #999; line-height: 1.3; }
	.magic-card-guide:hover { transform: translateY(-5px); border-color: #3f3f46; }


	/* 3. Advanced Editor Blueprint */
	.adv-empty-state {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		height: 100%; text-align: center; opacity: 0.5; pointer-events: none;
	}
	.adv-empty-state h2 { font-size: 24px; color: white; margin: 0 0 8px 0; }
	.adv-empty-state p { font-size: 14px; color: #888; margin: 0 0 32px 0; }
	.adv-tips { display: flex; gap: 24px; }
	.adv-tips span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #666; font-weight: 600; }
	.adv-tips i { color: #4ade80; }

	/* Mobile Adjustments */
	@media (max-width: 768px) {
		.flow-line { width: 30px; }
		.magic-onboarding-grid { flex-direction: column; max-width: 70%; margin: 0 auto; margin-top: 25px;}
		.magic-card-guide { width: 100%; flex-direction: row; text-align: left; }
		.magic-card-guide i { margin-bottom: 0; margin-right: 12px; }
	}

	/* --- INLINE VIDEO BUTTON STYLES --- */
	.inline-video-btn {
		background: rgba(129, 140, 248, 0.1); border: 1px solid rgba(129, 140, 248, 0.3);
		color: #818cf8; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
		display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: 0.2s; margin-top: 16px;
		pointer-events: auto !important; /* FIX: Overrides parent pointer-events: none */
		z-index: 10;
	}
	.inline-video-btn:hover { background: rgba(129, 140, 248, 0.2); color: white; transform: translateY(-2px); }
	.inline-video-btn i { font-size: 16px; }

	/* --- PURE GALLERY STYLES (INSPIRATION LAB) --- */
	#inspirationGrid {
		display: grid !important;
		/* Creates a masonry-style responsive grid of squares */
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
		gap: 20px;
		width: 100%;
		margin-top: 30px; 
		padding-bottom: 80px;
	}

	.lab-gallery-card {
		aspect-ratio: 1; /* Perfect squares */
		background: #111; 
		border: 1px solid #27272a; 
		border-radius: 12px; 
		overflow: hidden;
		cursor: zoom-in; /* Tells the user they can click to view */
		position: relative;
		transition: transform 0.2s, border-color 0.2s;
	}

	.lab-gallery-card:hover { 
		transform: translateY(-4px); 
		border-color: #555; 
		box-shadow: 0 15px 30px rgba(0,0,0,0.5); 
	}

	.lab-gallery-card img {
		width: 100%; 
		height: 100%; 
		object-fit: cover; 
		
		/* 1. HARDWARE ACCELERATION */
		transform: translateZ(0); /* Forces GPU rendering */
		will-change: transform;   /* Tells browser "I will only animate the transform, nothing else" */
		
		/* 2. PERFORMANCE TWEAKS */
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		backface-visibility: hidden; /* Stops anti-aliasing flicker on scroll */
	}

	.lab-gallery-card:hover img {
		transform: scale(1.05); /* Slight zoom effect on hover */
	}

	/* --- PURE IMAGE LIGHTBOX STYLES --- */
	.lightbox-overlay {
		position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9);
		z-index: 100000; /* Sit above absolutely everything */
		display: none; align-items: center; justify-content: center;
		cursor: zoom-out; /* Suggests clicking will close it */
		backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	}
	.lightbox-overlay.open { 
		display: flex; 
		animation: fadeIn 0.2s ease-out; 
	}
	#lightboxImage {
		max-width: 90vw; max-height: 90vh; 
		border-radius: 8px;
		box-shadow: 0 20px 60px rgba(0,0,0,0.8);
		cursor: default; /* Cursor changes over the image itself */
	}
	.lightbox-close {
		position: absolute; top: 20px; right: 30px; color: white;
		font-size: 24px; font-weight: bold; cursor: pointer; opacity: 0.6; transition: 0.2s;
	}
	.lightbox-close:hover { opacity: 1; transform: scale(1.1); }
	
	#updateAppBadge {
    animation: pulseBadge 2s infinite;
    padding: 8px 12px !important;
    border-radius: 6px;
    background: rgba(74, 222, 128, 0.1) !important;
}

	@keyframes pulseBadge {
		0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
		70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
		100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
	}
	
	/* --- PREMIUM ENGINE STATUS BAR --- */
	.engine-status-bar {
		border-top: 1px solid rgba(255, 255, 255, 0.03);
		margin-top: 4px;
		padding: 10px 20px;
		min-height: 36px;
		display: flex;
		align-items: center;
	}

	.status-content {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 11px;
		letter-spacing: 0.02em;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.status-label {
		text-transform: uppercase;
		font-weight: 800;
		font-size: 9px;
		padding: 2px 6px;
		border-radius: 4px;
		margin-right: 4px;
	}

	/* Flash Theme */
	.status-flash .status-label { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
	.status-flash { color: #a1a1aa; }

	/* Pro Theme */
	.status-pro .status-label { background: rgba(129, 140, 248, 0.1); color: #818cf8; }
	.status-pro { color: #e4e4e7; }

	.status-content b { color: white; font-weight: 700; }



	/* ========================================================================== */
	/*   TABLET & MOBILE OVERRIDES (Base Tablet Logic < 1024px)                   */
	/* ========================================================================== */
	@media (max-width: 1024px) {
		
		/* 1. HARDWARE LOCK */
		html, body {
			position: fixed !important; inset: 0 !important;
			width: 100vw !important; height: 100% !important;
		}

		/* 2. DOCK SAFE AREA & PADDING */
		.app-dock {
			padding: 0 12px 16px 12px !important; /* Fallback */
			padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)) 12px !important;
		}
		
		.app-canvas { padding-top: 70px !important; }

		/* 3. DOCK INTERNAL ADJUSTMENTS */
		.engine-wrapper, .command-bar-unified { 
			padding: 12px !important; 
			border-radius: 24px !important; 
		}
		
		.cmd-bottom { 
			padding: 12px 6px !important; 
			gap: 8px !important; 
		}
		
		/* Horizontal Scroll for Cards */
		.config-row {
			display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
			padding-bottom: 12px !important; gap: 8px !important; padding-top: 12px !important;
			scrollbar-width: none; -ms-overflow-style: none;
		}
		.config-row::-webkit-scrollbar { display: none !important; }
		.config-card { min-width: 130px !important; flex-shrink: 0 !important; }

		/* 4. SIDEBARS BECOME SLIDING DRAWERS */
		.nav-shell, .toolbox-shell {
			position: fixed !important; top: 0; bottom: 0;
			height: 100% !important; z-index: 9999 !important;
			transition: transform 0.3s ease;
		}
		.nav-shell { left: 0; width: 280px !important; transform: translateX(-100%); }
		.toolbox-shell { right: 0; width: 340px !important; max-width: 85vw !important; transform: translateX(100%); box-shadow: -20px 0 50px rgba(0,0,0,0.8); }

		body.nav-open .nav-shell { transform: translateX(0); }
		body.panel-open .toolbox-shell { transform: translateX(0); }

		/* 5. NAV TOGGLE BUTTON */
		.ae-nav-toggle {
			display: flex !important; align-items: center; justify-content: center;
			position: fixed !important; top: 16px !important; left: 16px !important; z-index: 1000 !important;
			width: 40px; height: 40px; border-radius: 8px; color: white; cursor: pointer;
			background: #111; border: 1px solid #333;
		}

	   /* 6. EDITOR MODAL FIX (Strict Vertical Split) */
		.editor-shell {
			width: 100vw !important; height: 100dvh !important;
			max-width: 100% !important; border-radius: 0 !important; border: none !important;
			flex-direction: column !important; /* Stack Vertical */
			overflow: hidden !important; /* Prevent body scroll */
		}

		/* TOP HALF: IMAGE (Fixed 55% Height) */
		.editor-canvas-stage {
			height: 55dvh !important;
			width: 100% !important;
			flex: none !important; /* Stop growing */
			border-bottom: 1px solid var(--border); 
			padding: 20px !important;
			position: relative;
		}

		.editor-img { 
			width: 100% !important; 
			height: 100% !important; 
			object-fit: contain; 
		}

		/* Save button floats inside the image area */
		.editor-canvas-save-btn {
			position: absolute !important;
			bottom: 12px !important; right: 12px !important;
			font-size: 11px !important; padding: 6px 12px !important;
			z-index: 10;
		}

		/* BOTTOM HALF: CHAT (Fixed 45% Height) */
		.editor-sidebar {
			height: 45dvh !important;
			width: 100% !important; 
			flex: none !important; /* Stop shrinking */
			border-left: none !important; 
			display: flex !important; 
			flex-direction: column !important;
			background: #111 !important;
		}

		/* Header stays fixed at top of chat section */
		.sidebar-header { 
			flex-shrink: 0 !important;
			height: 44px !important;
			background: #1a1a1a !important; 
			border-top: 1px solid rgba(255,255,255,0.1); 
			border-bottom: 1px solid #222; 
		}
		
		/* Make close button easy to hit */
		.close-editor-btn {
			width: 44px !important; height: 100% !important;
			background: transparent !important; color: #888 !important; font-size: 18px !important;
		}

		/* CHAT HISTORY (Scrolls internally) */
		.chat-stream { 
			flex: 1 1 0% !important; /* Take remaining space */
			overflow-y: auto !important; /* Enable Scroll */
			padding: 16px !important; 
			gap: 12px !important; 
			min-height: 0 !important; /* Crucial for scrolling */
		}

		/* INPUT AREA (Fixed at bottom) */
		.chat-input-area {
			flex-shrink: 0 !important;
			padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px !important;
			background: #111 !important;
			border-top: 1px solid #222 !important;
		}
		
		.prompt-hint {right: 32px; top: auto; }
	}

	/* Tooltip Fix */
	.bg-tooltip {
		position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%) translateY(5px);
		background: #2a2a2a; color: #e4e4e7; padding: 8px 12px; border-radius: 8px;
		font-size: 11px; white-space: nowrap; pointer-events: none; font-weight: 500;
		opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 200;
		border: 1px solid #3f3f46; box-shadow: 0 10px 20px rgba(0,0,0,0.5);
	}
	#cardBackground:hover .bg-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

	/* ========================================================================== */
	/*   TABLET OPTIMIZATIONS FOR SMART STUDIO (768px - 1280px)                  */
	/* ========================================================================== */
	@media (max-width: 1280px) and (min-width: 768px) {
		
		/* Adjust header padding */
		.ss-header {
			padding: 0 20px;
			height: 60px;
		}
		
		/* Reduce hero text size */
		.ss-hero-text h1 {
			font-size: 36px;
		}
		
		.ss-hero-text p {
			font-size: 12px;
		}
		
		/* Upload ring smaller */
		.ss-upload-ring {
			width: 260px;
			height: 260px;
		}
		
		/* Preview container smaller */
		.ss-preview-container {
			max-width: 300px;
			max-height: 40vh;
			margin: 60px auto;
		}
		
		/* Presets container: stack on portrait, side-by-side on landscape */
		.ss-presets-container {
			flex-direction: column;  /* Stack by default (portrait) */
			padding: 16px 20px;
			gap: 16px;
		}
		
		/* For landscape, revert to row if enough width */
		@media (min-width: 1024px) and (max-width: 1280px) and (orientation: landscape) {
			.ss-presets-container {
				flex-direction: row;
			}
		}
		
		/* Left sidebar adjustments */
		.ss-bucket-sidebar {
			width: 100%;          /* Full width when stacked */
			border-right: none;
			border-bottom: 1px solid rgba(255,255,255,0.05);
			padding-bottom: 16px;
		}
		
		/* In landscape, fix width again */
		@media (min-width: 1024px) and (max-width: 1280px) and (orientation: landscape) {
			.ss-bucket-sidebar {
				width: 260px;
				border-right: 1px solid rgba(255,255,255,0.05);
				border-bottom: none;
			}
		}
		
		/* Bucket list max-height adjust */
		.ss-bucket-list {
			max-height: 200px;
		}
		
		/* Library panel takes remaining space */
		.ss-library-panel {
			min-height: 0;
			flex: 1;
		}
		
		/* Presets grid: adjust columns */
		.ss-presets-grid {
			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
			padding-bottom: 120px;   /* Less space for dock */
		}
		
		/* Gallery container padding */
		.ss-gallery-container {
			padding: 16px 20px;
		}
		
		/* Gallery grid */
		.ss-gallery-grid {
			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
			padding-bottom: 120px;
		}
		
		/* Dock wrapper padding */
		.ss-dock-wrapper {
			padding: 10px;
			left: 0;
		}
		
		/* Dock content padding */
		.ss-dock-content {
			padding: 12px 16px;
			gap: 12px;
		}
		
		/* Dock rows: wrap on smaller screens */
		.ss-dock-row {
			flex-wrap: wrap;
			gap: 8px;
		}
		
		/* Subject toggle pills */
		.mode-toggle .mode-opt {
			padding: 4px 10px;
			font-size: 11px;
		}
		
		/* Character scroll max-width */
		.ss-char-scroll {
			max-width: 180px;
		}
		
		/* Hide the second row completely if no model selected */
		#ssModelRow {
			margin-top: 8px;
			padding-top: 8px;
		}
		
		/* Reduce button sizes */
		.render-btn, .ss-close-btn {
			padding: 6px 12px;
			font-size: 11px;
		}
		
		/* Adjust cost label */
		#ssCostLabel {
			font-size: 9px;
		}
		
		/* Ensure the dock doesn't cover content on short screens */
		.ss-gallery-grid,
		.ss-presets-grid {
			padding-bottom: 140px;
		}
		
		/* Fine-tune the gallery header */
		.ss-presets-header {
			padding-bottom: 16px;
			margin-bottom: 16px;
		}
		
		.ss-presets-header h3 {
			font-size: 18px;
		}
		
		.ss-presets-header p {
			font-size: 12px;
		}
	}


	/* ========================================================================== */
	/*   TABLET SPECIFIC REFINEMENTS                                              */
	/* ========================================================================== */
	@media (max-width: 1024px) {
		
		/* 1. KILL BLUR FOR PERFORMANCE (Fixes Goal 5) */
		/* Tablets struggle with heavy backdrop-filters. Make backgrounds opaque. */
		.engine-wrapper, .command-bar-unified, .ss-dock, .guider-window, .guider-header {
			backdrop-filter: none !important;
			-webkit-backdrop-filter: none !important;
			background: #111111 !important; 
		}
		.ss-dock-blur { display: none !important; } /* Kill extra blur layer */

		/* 2. ACADEMY MODAL SCROLL & TAB FIX (Fixes Goals 6 & 7) */
		.academy-sidebar {
			flex-direction: row !important;
			flex-wrap: wrap !important; /* Allow tabs to wrap to next line */
			overflow-x: visible !important;
			height: auto !important;
			gap: 8px !important;
			padding: 8px !important;
		}
		.tut-tab {
			flex: 1 1 auto; /* Tabs grow to fill space */
			text-align: center;
			white-space: nowrap;
			padding: 10px 14px;
		}
		.academy-content-wrapper {
			overflow-y: auto !important; /* Ensure the right side scrolls cleanly */
		}
	}

	/* ========================================================================== */
	/*   SMALL TABLET & LARGE PHONE FIXES (Specifically <= 620px)                 */
	/*   Targets: Amazon Fire HD 8.9 (612px), Fire HD 7 (532px)                   */
	/* ========================================================================== */
	@media (max-width: 660px) {
		
	.render-btn { padding: 0 6px; gap: 2px; font-size:10px; height:28px; line-height:0.9; }

	.engine-wrapper, .command-bar-unified { padding: 12px 4px !important; }

	.cmd-bottom {
		padding: 12px 3px !important; gap: 1px !important; flex-wrap: wrap !important;
	}

	.cmd-controls-left { gap: 2px; flex-wrap: wrap; }

	.cmd-pill { margin: 0 3px; padding: 6px 4px; }

	.mode-opt { padding: 4px 6px !important; }

	.cmd-actions-right { gap: 8px; }

	.v-sep { margin: 0 4px; }

	.cost-tag { font-size: 8px !important; color: #888 !important; }

	.ss-dock-wrapper {left:0;}

	.ss-dock-content { padding: 16px 6px !important; gap: 2px !important;}

	.product-dock-inner {gap: 2px !important; }

	button#ssGenerateBtn.render-btn.ready { padding: 0 5px !important; }

	.model-dock1-inner {gap: 6px  !important;}

	.model-dock2-inner { gap: 2px !important;}

	.action-button { display: flex;gap: 8px; margin-left: 8px;flex-direction: row;flex-wrap: wrap;}

	.card-btn {margin-right: 0px !important; gap:2px; padding: 6px 2px;}

	#magicGenerateBtn {height: 32px; font-size: 11px; gap: 2px; padding: 0 2px;}

	.ss-presets-container {padding: 20px !important;}\

	.ss-bucket-list {max-height:190;}

	.ss-bucket-sidebar {width:220;}


	}





	/* ========================================================================== */
	/*   MASTER SCREEN BLOCKER (Phones, Short Landscape, Surface Pros)            */
	/* ========================================================================== */
	#small-tablet-blocker {
		display: none; /* Hidden by default */
		position: fixed; inset: 0; z-index: 99999;
		background: #050505; color: white;
		flex-direction: column; align-items: center; justify-content: center;
		text-align: center; padding: 40px; font-family: 'Plus Jakarta Sans', sans-serif;
	}
	
	/* BYPASS: If running as an installed PWA, hide the blocker regardless of resolution */
	@media all and (display-mode: standalone) {
		#small-tablet-blocker { display: none !important; }
	}

	#small-tablet-blocker i { font-size: 64px; color: #818cf8; margin-bottom: 24px; }
	#small-tablet-blocker h2 { font-size: 28px; font-weight: 800; margin: 0 0 12px 0; letter-spacing: -0.02em; }
	#small-tablet-blocker p { font-size: 16px; color: #888; line-height: 1.6; max-width: 400px; margin: 8px 0; }
	#small-tablet-blocker .resolution-details { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; padding: 16px 24px; margin: 24px 0; font-family: monospace; font-size: 18px; color: #818cf8; letter-spacing: 1px; }
	#small-tablet-blocker .hint { color: #666; font-size: 13px; margin-top: 24px; border-top: 1px solid #222; padding-top: 24px; max-width: 350px; }
	#small-tablet-blocker .hint i { font-size: 14px; margin-right: 6px; color: #f59e0b; }

	/* 1. BLOCK PURE MOBILE PHONES (Width under 500px) */
	@media (max-width: 500px) {
		#small-tablet-blocker { display: flex !important; }
		.app-shell, #viewSmartStudio, #viewAdvancedEditor, #viewMagicCanvas { display: none !important; }
	}

	/* 2. BLOCK SHORT LANDSCAPE (Catches your 732x587 device) */
	/* If the screen is exceptionally short, the UI physically cannot fit. */
	@media (max-height: 590px) and (display-mode: browser) {
		#small-tablet-blocker { display: flex !important; }
		.app-shell, #viewSmartStudio, #viewAdvancedEditor, #viewMagicCanvas { display: none !important; }
	}

	/* 3. BLOCK SURFACE PROS / WEIRD SCALING BUGS */
	@media (min-width: 900px) and (max-width: 1100px) and (display-mode: browser) {
		@media (max-height: 800px) {
			#small-tablet-blocker { display: flex !important; }
			.app-shell, #viewSmartStudio, #viewAdvancedEditor, #viewMagicCanvas { display: none !important; }
		}
		@media (min-resolution: 150dpi) {
			#small-tablet-blocker { display: flex !important; }
			.app-shell, #viewSmartStudio, #viewAdvancedEditor, #viewMagicCanvas { display: none !important; }
		}
	}

	/* 4. BLOCK 4:3 ASPECT RATIOS IN THE DANGER ZONE */
	@media (min-width: 900px) and (max-width: 1100px) and (max-aspect-ratio: 4/3) {
		#small-tablet-blocker { display: flex !important; }
		.app-shell, #viewSmartStudio, #viewAdvancedEditor, #viewMagicCanvas { display: none !important; }
	}