/* ============================================================
   Reset & Base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--bg-0:       #111111;
	--bg-1:       #1a1a1a;
	--bg-2:       #1e1e1e;
	--bg-3:       #252525;
	--bg-4:       #2d2d2d;
	--border:     #2f2f2f;
	--border-2:   #3a3a3a;
	--text-1:     #e0e0e0;
	--text-2:     #aaaaaa;
	--text-3:     #666666;
	--accent:     #1a9e5c;
	--accent-dim: #155f3a;
	--danger:     #d94040;
	--info:       #007acc;
	--titlebar-h: 36px;
	--toolbar-h:  34px;
	--statusbar-h:20px;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background: var(--bg-1);
	color: var(--text-2);
	overflow: hidden;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ============================================================
   Titlebar
   ============================================================ */
.app-titlebar {
	height: var(--titlebar-h);
	background: var(--bg-0);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	user-select: none;
}
.app-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-1);
	letter-spacing: 0.4px;
}

/* ============================================================
   Toolbar
   ============================================================ */
.app-toolbar {
	height: var(--toolbar-h);
	background: var(--bg-2);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	padding: 0 10px;
	gap: 2px;
	flex-shrink: 0;
}
.toolbar-group  { display: flex; align-items: center; gap: 2px; }
.toolbar-sep    { width: 1px; height: 18px; background: var(--border-2); margin: 0 6px; }
.toolbar-spacer { flex: 1; }

.tbtn {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 4px;
	cursor: pointer;
	color: var(--text-2);
	font-size: 11px;
	white-space: nowrap;
	user-select: none;
	transition: background 0.12s, color 0.12s;
}
.tbtn:hover  { background: var(--bg-4); color: var(--text-1); }
.tbtn:active { background: var(--border-2); }
.tbtn i { font-size: 11px; opacity: 0.75; }

.tbtn-run {
	background: rgba(26,158,92,0.15);
	color: var(--accent);
	border: 1px solid rgba(26,158,92,0.3);
}
.tbtn-run:hover { background: rgba(26,158,92,0.25); color: var(--accent); }

/* ============================================================
   Main Split Pane
   ============================================================ */
.app-main {
	display: flex;
	flex: 1;
	overflow: hidden;
}

/* ============================================================
   Editor Pane
   ============================================================ */
.editor-pane {
	width: 38%;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--border);
	background: var(--bg-2);
	overflow: hidden;
}
.editor-body {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* CodeMirror dark overrides */
.CodeMirror {
	height: 100% !important;
	flex: 1 1 auto;
	background: var(--bg-2) !important;
	color: #abb2bf !important;
	font-family: 'Consolas', 'Monaco', monospace !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
	border: none !important;
}
.CodeMirror-gutters {
	background: var(--bg-2) !important;
	border-right: 1px solid var(--border) !important;
}
.CodeMirror-linenumber  { color: var(--text-3) !important; }
.CodeMirror-cursor      { border-left-color: var(--accent) !important; }
.CodeMirror-selected    { background: rgba(26,158,92,0.18) !important; }
.CodeMirror-scroll      { overflow-x: auto !important; }

.editor-footer {
	height: 22px;
	background: var(--accent);
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-size: 10px;
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	justify-content: flex-end;
	flex-shrink: 0;
	transition: background 0.12s;
}
.editor-footer:hover { background: var(--accent-dim); }

/* ============================================================
   Pane Resizer
   ============================================================ */
.pane-resizer {
	width: 4px;
	background: var(--border);
	cursor: col-resize;
	flex-shrink: 0;
	transition: background 0.15s;
}
.pane-resizer:hover,
.pane-resizer.dragging { background: var(--accent); }

/* ============================================================
   Result Pane
   ============================================================ */
.result-pane {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--bg-1);
	overflow: hidden;
	min-width: 200px;
}

/* Tab bar */
.result-tabs {
	display: flex;
	align-items: center;
	height: 32px;
	background: var(--bg-3);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}
.rtab {
	padding: 0 16px;
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 11px;
	color: var(--text-3);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	user-select: none;
	white-space: nowrap;
	transition: color 0.12s;
}
.rtab:hover  { color: var(--text-2); }
.rtab.active { color: var(--text-1); border-bottom-color: var(--accent); background: var(--bg-2); }

/* Panels */
.result-panels {
	flex: 1;
	overflow: hidden;
	position: relative;
}
.rpanel        { display: none; width: 100%; height: 100%; }
.rpanel.active { display: flex; flex-direction: column; }
#result-iframe { flex: 1; border: none; width: 100%; height: 100%; }

/* ============================================================
   Trading Stats
   ============================================================ */
.stats-wrap {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	padding: 10px;
	gap: 8px;
	overflow: auto;
}
.stat-box {
	background: var(--bg-3);
	border: 1px solid var(--border-2);
	border-radius: 6px;
	padding: 10px 14px;
	min-width: 130px;
}
.stat-box-label {
	font-size: 10px;
	color: var(--text-3);
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.stat-box-value { font-size: 18px; font-weight: bold; color: var(--text-1); }
.stat-box-value.positive { color: var(--accent); }
.stat-box-value.negative { color: var(--danger); }

/* ============================================================
   Trading History
   ============================================================ */
.hist-wrap { flex: 1; overflow: auto; }
.trading-history { border-collapse: collapse; width: 100%; font-size: 11px; }
.trading-history th {
	background: var(--bg-3);
	color: var(--text-3);
	padding: 5px 9px;
	text-align: right;
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	font-weight: 500;
	white-space: nowrap;
}
.trading-history th:first-child,
.trading-history td:first-child { text-align: center; }
.trading-history td {
	padding: 4px 9px;
	text-align: right;
	border-bottom: 1px solid var(--border);
	color: var(--text-2);
	white-space: nowrap;
}
.trading-history tbody tr:hover td { background: var(--bg-3); }
.td-buy      { color: var(--accent) !important; font-weight: 600; }
.td-sell     { color: var(--danger) !important; font-weight: 600; }
.td-positive { color: var(--accent) !important; }
.td-negative { color: var(--danger) !important; }

/* ============================================================
   Status Bar
   ============================================================ */
.app-statusbar {
	height: var(--statusbar-h);
	background: var(--info);
	display: flex;
	align-items: center;
	padding: 0 10px;
	font-size: 10px;
	color: rgba(255,255,255,0.9);
	gap: 12px;
	flex-shrink: 0;
	user-select: none;
}
.statusbar-spacer { flex: 1; }

/* ============================================================
   Dropdown Menu (dark)
   ============================================================ */
.dropdown-wrap {
	position: fixed;
	background: var(--bg-3);
	border: 1px solid var(--border-2);
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.5);
	min-width: 180px;
	padding: 4px 0;
	z-index: 9999;
	font-size: 12px;
}
.dropdown-item {
	padding: 7px 14px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--text-2);
	user-select: none;
}
.dropdown-item:hover { background: var(--bg-4); color: var(--text-1); }
.dropdown-divider    { border-top: 1px solid var(--border); margin: 4px 0; }
.dropdown-arrow      { color: var(--text-3); font-size: 13px; }
.dropdown-sub {
	position: fixed;
	background: var(--bg-3);
	border: 1px solid var(--border-2);
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.5);
	min-width: 160px;
	padding: 4px 0;
	z-index: 10000;
	font-size: 12px;
}