:root{
	--bg:#f3f7fc;
	--surface:#ffffff;
	--surface-2:#f7fbff;
	--ink:#102038;
	--muted:#52627a;
	--line:#d7e2f0;
	--brand:#0a66c2;
	--brand-strong:#084f97;
	--danger:#cb3a31;
	--success:#2f9b5f;
	--radius:14px;
	--shadow:0 10px 35px rgba(16,32,56,.08);
}

*{box-sizing:border-box}

body{
	margin:0;
	min-height:100vh;
	font-family:'Manrope','Segoe UI',sans-serif;
	color:var(--ink);
	background:
		radial-gradient(circle at 5% 10%,rgba(10,102,194,.08),transparent 30%),
		radial-gradient(circle at 95% 90%,rgba(47,155,95,.09),transparent 24%),
		var(--bg);
}

.hidden{display:none!important}

.auth-shell{
	min-height:100vh;
	display:grid;
	place-items:center;
	padding:24px;
}

.auth-card{
	width:min(520px,100%);
	background:#000000;
	border:1px solid var(--line);
	box-shadow:var(--shadow);
	border-radius:20px;
	padding:28px;
}

.auth-card h1{margin:0 0 8px}
.auth-card p{margin:0 0 16px;color:var(--muted)}

.brand-lockup{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:6px 0;
}

.brand-logo{
	width:100%;
	height:auto;
	max-width:360px;
	display:block;
}

.auth-brand{margin-bottom:8px}

.auth-tabs{
	display:grid;
	grid-template-columns:1fr 1fr;
	background:var(--surface-2);
	border:1px solid var(--line);
	border-radius:12px;
	padding:4px;
	gap:4px;
	margin-bottom:12px;
}

.tab-btn{
	background:transparent;
	color:var(--muted);
	border:0;
	border-radius:10px;
	padding:10px 12px;
	font-weight:700;
}

.tab-btn.active{
	background:var(--brand);
	color:#fff;
}

.auth-message{
	min-height:20px;
	font-size:14px;
	margin-bottom:8px;
}

.auth-message.error{color:var(--danger)}
.auth-message.ok{color:var(--success)}

.auth-form{display:grid;gap:10px}

.app-shell{
	display:flex;
	min-height:100vh;
}

.sidebar{
	width:285px;
	background:#0f253d;
	color:#e7f1ff;
	padding:22px;
	border-right:1px solid rgba(255,255,255,.08);
}

.sidebar h1{margin:0 0 8px;font-size:24px}
.sidebar p{margin:0 0 16px;color:#bfd7f5;font-size:14px}

.sidebar-brand{
	justify-content:flex-start;
	margin-bottom:12px;
	padding:2px 0 6px;
}

.sidebar-brand .brand-logo{
	max-width:210px;
}

.brand-logo-compact{
	max-height:58px;
}

.main{
	flex:1;
	padding:24px;
	overflow:auto;
}

.header,.dashboard-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:12px;
}

.header-brand{
	display:flex;
	align-items:center;
	gap:10px;
}

.header-logo{
	max-width:170px;
}

.header-brand h2{margin:0}

.timeline-header{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:14px;
	margin-bottom:12px;
}

.timeline-header h2{margin:0}

.stats-card,.insight-box,.trade-card,.monthly-chart-wrap,.monthly-table-wrap{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:16px;
	margin-bottom:14px;
}

.stats-card h3,.insight-box h3{margin:0 0 6px;font-size:14px;color:var(--muted)}
.stats-card p,.insight-box p{margin:0;font-size:16px;font-weight:800}

.green{border-left:4px solid var(--success)}
.red{border-left:4px solid var(--danger)}

button{
	background:var(--brand);
	color:#fff;
	border:0;
	border-radius:10px;
	padding:11px 14px;
	font-weight:700;
	cursor:pointer;
	transition:background .2s ease,transform .2s ease;
}

button:hover{background:var(--brand-strong);transform:translateY(-1px)}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}

.secondary-btn{
	background:#e7eef7;
	color:#1f3550;
	border:1px solid #c9d9ec;
}

.secondary-btn:hover{background:#dce8f6}

.danger-btn{
	color:var(--danger);
	border-color:#efc1bd;
	background:#fff4f3;
}

.danger-btn:hover{background:#ffe7e4}

input,textarea,select{
	width:100%;
	padding:11px 12px;
	border:1px solid #c9d9ec;
	border-radius:10px;
	background:#fff;
	color:var(--ink);
	font:inherit;
}

input:focus,textarea:focus,select:focus{
	outline:2px solid rgba(10,102,194,.18);
	border-color:var(--brand);
}

.field-help{
	margin:2px 0 4px;
	font-size:12px;
	color:var(--muted);
}

.field-label{
	display:block;
	margin:0 0 8px;
	font-size:13px;
	font-weight:700;
	color:var(--ink);
}

.trade-form-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:12px;
	align-items:start;
}

.field-group{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.form-section{
	margin-top:10px;
	padding:16px;
	border:1px solid var(--line);
	border-radius:14px;
	background:var(--surface);
}

.form-section h3{
	margin:0 0 12px;
	font-size:18px;
	color:var(--ink);
}

.mistake-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:10px;
	margin-bottom:14px;
}

.mistake-chip{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 14px;
	border:1px solid var(--line);
	border-radius:14px;
	background:var(--surface-2);
	color:var(--ink);
	font-weight:600;
	cursor:pointer;
	transition:all .2s ease;
}

.mistake-chip input{
	width:18px;
	height:18px;
	margin:0;
	accent-color:var(--brand);
	flex:0 0 auto;
}

.mistake-chip:has(input:checked){
	border-color:#8ab2e6;
	background:#eaf3ff;
	box-shadow:0 0 0 1px rgba(10,102,194,.08) inset;
}

.mistake-chip span{
	line-height:1.2;
}

.insights,.monthly-kpis{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:14px;
}

.dashboard{margin-top:16px}

.filter-bar{
	display:grid;
	grid-template-columns:repeat(4,minmax(140px,1fr)) auto auto;
	gap:10px;
	width:100%;
	max-width:940px;
}

.trade-card-head{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:12px;
	margin-bottom:8px;
}

.trade-card-head h3{margin:0}

.trade-actions{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}

.trade-action-btn{
	padding:8px 10px;
	font-size:12px;
}

.monthly-bars{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
	gap:10px;
	min-height:180px;
	align-items:end;
}

.heatmap-header{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:12px;
	margin-bottom:14px;
}

.heatmap-header h3{margin:0 0 4px}

.heatmap-header p{
	margin:0;
	color:var(--muted);
	font-size:13px;
}

.heatmap-range{
	font-size:13px;
	font-weight:700;
	color:var(--muted);
	white-space:nowrap;
}

.performance-heatmap{
	overflow-x:auto;
	padding-bottom:8px;
}

.heatmap-board{
	display:grid;
	grid-template-columns:40px 1fr;
	gap:10px;
	min-width:780px;
}

.heatmap-day-labels{
	display:grid;
	grid-template-rows:20px repeat(7,12px);
	gap:4px;
	font-size:11px;
	color:var(--muted);
	align-items:center;
}

.heatmap-day-labels span{
	height:12px;
	line-height:12px;
}

.heatmap-chart{
	display:grid;
	grid-template-rows:20px auto;
	gap:8px;
}

.heatmap-month-labels{
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:12px;
	gap:4px;
	font-size:11px;
	color:var(--muted);
}

.heatmap-month-marker{
	grid-row:1;
	white-space:nowrap;
	font-weight:700;
}

.heatmap-weeks{
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:12px;
	gap:4px;
}

.heatmap-week{
	display:grid;
	grid-template-rows:repeat(7,12px);
	gap:4px;
}

.heatmap-cell{
	width:12px;
	height:12px;
	border-radius:3px;
	background:#edf2f8;
	border:1px solid rgba(255,255,255,.85);
}

.heatmap-cell.level-0{background:#edf2f8}
.heatmap-cell.level-1.positive{background:#cdeed8}
.heatmap-cell.level-2.positive{background:#88d3a2}
.heatmap-cell.level-3.positive{background:#4bbd79}
.heatmap-cell.level-4.positive{background:#238b55}
.heatmap-cell.level-1.negative{background:#f7d8d5}
.heatmap-cell.level-2.negative{background:#f0a7a1}
.heatmap-cell.level-3.negative{background:#e26c65}
.heatmap-cell.level-4.negative{background:#cb3a31}
.heatmap-cell-muted{opacity:.35}

.heatmap-legend{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	gap:6px;
	margin-top:12px;
	font-size:12px;
	color:var(--muted);
}

.legend-swatch{
	width:12px;
	height:12px;
	border-radius:3px;
	border:1px solid rgba(255,255,255,.8);
}

.legend-swatch.level-0{background:#edf2f8}
.legend-swatch.level-1{background:#cdeed8}
.legend-swatch.level-2{background:#88d3a2}
.legend-swatch.level-3{background:#4bbd79}
.legend-swatch.level-4{background:#238b55}

.bar-item{
	background:var(--surface-2);
	border:1px solid var(--line);
	border-radius:12px;
	padding:10px;
}

.bar-label{font-size:12px;color:var(--muted);margin-bottom:8px}

.bar-track{
	height:90px;
	border-radius:8px;
	background:#dfeaf7;
	display:flex;
	align-items:flex-end;
	overflow:hidden;
}

.bar-fill{width:100%;transition:height .25s ease}
.bar-fill.win{background:linear-gradient(180deg,#61c58c,#2f9b5f)}
.bar-fill.loss{background:linear-gradient(180deg,#ef8a84,#cb3a31)}

.bar-value{margin-top:8px;font-weight:800}
.pnl-positive{color:var(--success);font-weight:800}
.pnl-negative{color:var(--danger);font-weight:800}

.monthly-table table{width:100%;border-collapse:collapse}
.monthly-table th,.monthly-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.monthly-table th{font-size:13px;color:var(--muted)}

.trade-card.win{border-left:4px solid var(--success)}
.trade-card.loss{border-left:4px solid var(--danger)}

.empty-state{
	background:var(--surface-2);
	color:var(--muted);
	border:1px dashed #b9cce4;
	border-radius:12px;
	padding:14px;
}

.empty-state-rich h3{
	margin:0 0 8px;
	color:var(--ink);
}

.empty-state-rich p{
	margin:0 0 14px;
	line-height:1.5;
}

.empty-state-actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.pagination{
	display:flex;
	gap:10px;
	align-items:center;
	justify-content:flex-end;
	margin-top:12px;
}

#pageInfo{font-weight:700;color:var(--muted)}

.modal{
	display:none;
	position:fixed;
	inset:0;
	background:rgba(10,20,34,.48);
	padding:20px;
}

.modal-content{
	width:min(860px,100%);
	margin:3% auto;
	background:var(--surface);
	border:1px solid var(--line);
	box-shadow:var(--shadow);
	border-radius:16px;
	padding:18px;
	max-height:90vh;
	overflow:auto;
}

.close{float:right;font-size:24px;cursor:pointer;color:#6e8097}

.heatmap-tooltip{
	position:fixed;
	z-index:20;
	pointer-events:none;
	max-width:260px;
}

.tooltip-card{
	background:#102038;
	color:#f7fbff;
	padding:12px 14px;
	border-radius:12px;
	box-shadow:0 16px 34px rgba(16,32,56,.22);
	border:1px solid rgba(255,255,255,.08);
}

.tooltip-card h4{
	margin:0 0 8px;
	font-size:14px;
}

.tooltip-card p{
	margin:5px 0;
	font-size:13px;
	line-height:1.35;
}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#bfd1e8;border-radius:10px}

@media (max-width:980px){
	.app-shell{flex-direction:column}
	.sidebar{width:100%}
	.main{padding:16px}
	.filter-bar{grid-template-columns:repeat(2,minmax(140px,1fr))}
	.header-brand{flex-direction:column;align-items:flex-start;gap:6px}
}

@media (max-width:700px){
	.header{flex-direction:column;align-items:flex-start;gap:10px}
	.timeline-header{flex-direction:column}
	.pagination{justify-content:space-between}
	.heatmap-header{flex-direction:column}
	.heatmap-range{white-space:normal}
	.performance-heatmap{margin-right:-4px}
	.filter-bar{grid-template-columns:1fr}
	.trade-card-head{flex-direction:column}
	.mistake-grid{grid-template-columns:1fr}
	.trade-form-grid{grid-template-columns:1fr}
	.empty-state-actions{flex-direction:column}
}