1:root {
2 --color-primary: #6366f1;
3 --color-surface: #1e1e2e;
4 --color-text: #cdd6f4;
5 --sidebar-width: 260px;
6 --radius: 8px;
7 --gap: 1.5rem;
8}
9
10.dashboard {
11 display: grid;
12 grid-template-columns: var(--sidebar-width) 1fr;
13 grid-template-rows: 64px 1fr;
14 min-height: 100vh;
15 background: var(--color-surface);
16 color: var(--color-text);
17}
18
19.dashboard__sidebar {
20 grid-row: 1 / -1;
21 padding: var(--gap);
22 border-right: 1px solid rgba(255, 255, 255, 0.08);
23 display: flex;
24 flex-direction: column;
25 gap: 0.5rem;
26}
27
28.dashboard__main {
29 display: grid;
30 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
31 gap: var(--gap);
32 padding: var(--gap);
33 align-content: start;
34}
35
36.card {
37 background: rgba(255, 255, 255, 0.05);
38 border-radius: var(--radius);
39 padding: 1.25rem;
40 transition: transform 0.2s ease, box-shadow 0.2s ease;
41}
42
43.card:hover {
44 transform: translateY(-2px);
45 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
46}
47
48@media (max-width: 768px) {
49 .dashboard {
50 grid-template-columns: 1fr;
51 }
52 .dashboard__sidebar {
53 grid-row: auto;
54 border-right: none;
55 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
56 }
57}