/* ==========================================================================
   1. STYLE.CSS (SEU CÓDIGO ORIGINAL - INTOCADO NA BASE)
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
	--workspace-bg: #0a0a0a;
	--surface-bg: #141414;
	--color-bg-page: #0a0a0a;
	--surface-alt: #1a1a1a;
	--border-color: #1a1a1a;
	--border-hover: #10b981;
	--text-primary: #e0e0e0;
	--text-secondary: #9ca3af;
	--text-tertiary: #6b7280;
	--accent: #10b981;
	--accent-soft: rgba(16, 185, 129, 0.15);
	--accent-hover: #34d399;
	--danger: #ef4444;
	--color-primary-500: #10b981;
	
	/* Espaçamento */
	--radius-md: 6px;
	--radius-sm: 4px;
	--shadow-hover: 0 4px 12px rgba(16, 185, 129, 0.2);
	--space-xs: 3px;
	--space-sm: 6px;
	--space-md: 8px;
	--space-lg: 10px;
	--space-xl: 12px;

	/* Tipografia */
	--font-xs: 9px;
	--font-sm: 10px;
	--font-md: 11px;
	--font-lg: 12px;
	--font-xl: 16px;

	/* Pesos */
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
}

body {
	font-family: 'Inter', sans-serif;
	background: var(--workspace-bg);
	color: var(--text-primary);
	height: 100vh;
	overflow: hidden;
	font-size: var(--font-md);
	line-height: 1.4;
}

/* HEADER */
.app-header {
	background: var(--surface-bg);
	border-bottom: 1px solid var(--border-color);
	padding: 6px 12px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header-left { display: flex; align-items: center; gap: 6px; }
.header-left i { color: var(--accent); font-size: 14px; }
.header-title { font-size: var(--font-xl); font-weight: var(--font-semibold); color: var(--accent); margin: 0; }

.header-center { flex: 1; max-width: 280px; margin: 0 20px; }
.search-container { position: relative; width: 100%; }
.search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-tertiary); font-size: var(--font-sm); }
.search-input {
	width: 100%; background: var(--color-bg-page); border: 1px solid var(--border-color);
	color: var(--text-primary); padding: 6px 12px 6px 28px; border-radius: var(--radius-sm);
	font-size: var(--font-sm); transition: all 0.2s ease-out; font-family: 'Inter', sans-serif;
}
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1); }

.header-right { display: flex; align-items: center; gap: 6px; }
.back-button, .theme-toggle, .user-menu {
	background: var(--color-bg-page); border: 1px solid var(--border-color); color: var(--text-primary);
	padding: 6px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-sm);
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: all 0.2s;
}
.back-button:hover, .theme-toggle:hover, .user-menu:hover {
	border-color: var(--accent); color: var(--accent); transform: translateY(-1px);
}

/* GRID LAYOUT */
.app-main {
	height: calc(100vh - 48px);
	padding: var(--space-md);
	display: grid;
	grid-template-columns: 260px 260px minmax(0, 1fr);
	gap: var(--space-md);
	background: var(--workspace-bg);
}

/* PAINEIS */
.left-panel, .center-panel, .right-panel { display: flex; flex-direction: column; gap: var(--space-md); overflow: hidden; height: 100%; }
.left-scroll, .center-scroll { flex: 1; overflow-y: auto; padding-right: var(--space-xs); }

.panel-card, .info-card, .right-card {
	background: var(--surface-bg); border-radius: var(--radius-md); border: 1px solid var(--border-color);
}
.panel-card { padding: var(--space-md) var(--space-lg) var(--space-sm); }
.info-card { padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md); } /* Margem inferior para separar cards no scroll */
.right-card { padding: var(--space-md) var(--space-lg); height: 100%; display: flex; flex-direction: column; gap: var(--space-sm); }

.section-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.section-header i { color: var(--accent); font-size: var(--font-lg); }
.section-title { font-size: var(--font-lg); font-weight: var(--font-semibold); color: var(--accent); }

/* LISTA DE ELEMENTOS */
.elements-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.element-item {
	background: var(--surface-bg); border-radius: var(--radius-sm); border: 1px solid transparent;
	padding: var(--space-sm) var(--space-md); cursor: pointer; display: flex; align-items: center;
	gap: var(--space-sm); transition: all 0.2s ease-out;
}
.element-item:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.element-item.active { border-color: var(--accent); box-shadow: var(--shadow-hover); background: var(--accent-soft); }
.element-number { font-size: var(--font-xs); color: var(--text-tertiary); min-width: 20px; font-weight: var(--font-medium); }
.element-symbol { font-weight: var(--font-bold); font-size: var(--font-md); color: var(--accent); min-width: 32px; }
.element-name { font-size: var(--font-sm); color: var(--text-secondary); flex: 1; font-weight: var(--font-medium); }
.element-item.active .element-name { color: #fff; }

/* INFO GRID */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.info-slot { display: flex; flex-direction: column; gap: 2px; }
.info-slot-label { font-size: var(--font-xs); color: var(--text-secondary); margin-bottom: 1px; font-weight: var(--font-medium); }
.info-slot-value { font-size: var(--font-sm); color: var(--accent); font-weight: var(--font-semibold); }

/* TABS */
.tabs-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: var(--space-sm); }
.tab-buttons { display: flex; gap: var(--space-xs); }
.tab-btn {
	border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent;
	color: var(--text-secondary); padding: 6px 10px; font-size: var(--font-md); font-weight: var(--font-medium);
	cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-sm); transition: all 0.2s;
}
.tab-btn:hover { color: var(--accent); border-color: var(--border-color); }
.tab-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* SCROLLBARS */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--surface-alt); border-radius: 2px; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ==========================================================================
   2. EXTENSÕES DO SIMULADOR (USANDO VARIÁVEIS DO TEMA)
   ========================================================================== */

/* Botões de Partículas (Adaptado para usar .control-btn do molde) */
.particle-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.control-btn {
	padding: var(--space-xs) var(--space-md);
	border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-primary);
	border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-sm); font-weight: var(--font-medium);
	transition: all 0.2s ease-out; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
	width: 100%; /* Preencher o grid */
}
.control-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-1px); }

/* Cores de feedback específicas para partículas */
.btn-p:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,0.1); }
.btn-n:hover { border-color: #3b82f6; color: #3b82f6; background: rgba(59,130,246,0.1); }
.btn-e:hover { border-color: var(--accent); color: var(--accent); background: rgba(16,185,129,0.1); }

/* Sliders (Estilo customizado para combinar com o Workspace) */
.slider-container { margin-bottom: var(--space-lg); }
.slider-header { display: flex; justify-content: space-between; font-size: var(--font-xs); color: var(--text-secondary); margin-bottom: 4px; font-weight: var(--font-medium); }

input[type=range] {
	width: 100%; height: 4px; background: var(--surface-alt); border-radius: 2px;
	-webkit-appearance: none; outline: none; cursor: pointer; border: 1px solid var(--border-color);
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none; width: 12px; height: 12px;
	background: var(--accent); border-radius: 50%; 
	border: 2px solid var(--surface-bg); box-shadow: 0 0 0 1px var(--border-color);
	transition: transform 0.1s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); border-color: var(--accent); }

/* Barra de Estabilidade */
.stability-track {
	height: 4px; background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
	border-radius: 2px; position: relative; margin-top: 4px;
}
.stability-marker {
	position: absolute; top: -3px; width: 4px; height: 10px; background: #fff;
	border-radius: 2px; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/* Containers de Visualização */
.canvas-3d-container {
	flex: 1; min-height: 0; position: relative;
	border-radius: var(--radius-sm); border: 1px solid var(--border-color);
	background: var(--surface-alt); overflow: hidden;
}

.view-layer {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	display: none; z-index: 1;
}
.view-layer.active { display: flex; z-index: 10; flex-direction: column; }
canvas { display: block; width: 100%; height: 100%; outline: none; }

/* Responsividade herdada */
@media (max-width: 1366px) {
	.app-main { grid-template-columns: 240px 240px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm); }
}