1/* Chart Skill — Base Dark Theme */
2* { margin: 0; padding: 0; box-sizing: border-box; }
3 
4body {
5  background: #0f1117;
6  color: #e1e4ea;
7  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
8  padding: 20px;
9  min-height: 100vh;
10}
11 
12.toolbar {
13  display: flex;
14  justify-content: space-between;
15  align-items: center;
16  margin-bottom: 20px;
17  padding: 0 4px;
18}
19 
20.toolbar h1 {
21  font-size: 1.3rem;
22  font-weight: 600;
23  color: #f0f2f5;
24}
25 
26.toolbar .subtitle {
27  font-size: 0.85rem;
28  color: #6b7280;
29  margin-top: 2px;
30}
31 
32.actions {
33  display: flex;
34  gap: 8px;
35}
36 
37.actions button {
38  background: #1e2130;
39  border: 1px solid #2d3148;
40  color: #c8cdd6;
41  padding: 6px 14px;
42  border-radius: 6px;
43  cursor: pointer;
44  font-size: 0.82rem;
45  transition: all 0.2s;
46}
47 
48.actions button:hover {
49  background: #282d42;
50  border-color: #5d8fff;
51  color: #fff;
52}
53 
54.actions button:active {
55  transform: scale(0.97);
56}
57 
58.actions .btn-link {
59  background: #1e2130;
60  border: 1px solid #2d3148;
61  color: #c8cdd6;
62  padding: 6px 14px;
63  border-radius: 6px;
64  font-size: 0.82rem;
65  text-decoration: none;
66  display: inline-flex;
67  align-items: center;
68}
69 
70.actions .btn-link:hover {
71  background: #282d42;
72  border-color: #5d8fff;
73  color: #fff;
74}
75 
76.actions button.success {
77  background: #1a3a2a;
78  border-color: #34d399;
79  color: #34d399;
80}
81 
82#chart-area {
83  background: #1a1d27;
84  border-radius: 12px;
85  padding: 20px;
86  border: 1px solid #2d3148;
87}
88 
89/* Grid layouts for multi-chart */
90.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
91.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
92.grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
93.full-width { grid-column: 1 / -1; }
94 
95.chart-box {
96  background: #12141c;
97  border-radius: 8px;
98  padding: 12px;
99  border: 1px solid #1e2236;
100}
101 
102.chart-box .chart-title {
103  font-size: 0.85rem;
104  color: #9ca3af;
105  margin-bottom: 8px;
106  padding-left: 4px;
107}
108 
109/* Summary cards (KPIs) */
110.kpi-row {
111  display: flex;
112  gap: 16px;
113  margin-bottom: 20px;
114}
115 
116.kpi-card {
117  flex: 1;
118  background: #1a1d27;
119  border-radius: 10px;
120  padding: 16px 20px;
121  border: 1px solid #2d3148;
122}
123 
124.kpi-card .label {
125  font-size: 0.75rem;
126  color: #6b7280;
127  text-transform: uppercase;
128  letter-spacing: 0.5px;
129}
130 
131.kpi-card .value {
132  font-size: 1.5rem;
133  font-weight: 700;
134  color: #f0f2f5;
135  margin-top: 4px;
136}
137 
138.kpi-card .change {
139  font-size: 0.8rem;
140  margin-top: 2px;
141}
142 
143.kpi-card .change.up { color: #34d399; }
144.kpi-card .change.down { color: #ef4444; }
145 
146/* Responsive */
147@media (max-width: 768px) {
148  .grid-2, .grid-3, .grid-2x2 { grid-template-columns: 1fr; }
149  .kpi-row { flex-direction: column; }
150}
151 
152/* Toast notification */
153.toast {
154  position: fixed;
155  bottom: 24px;
156  right: 24px;
157  background: #1e2130;
158  color: #e1e4ea;
159  padding: 10px 20px;
160  border-radius: 8px;
161  border: 1px solid #2d3148;
162  font-size: 0.85rem;
163  opacity: 0;
164  transform: translateY(10px);
165  transition: all 0.3s;
166  z-index: 1000;
167  pointer-events: none;
168}
169 
170.toast.show {
171  opacity: 1;
172  transform: translateY(0);
173}
174