1:root {
  2  --bg-color: #121212;
  3  --text-color: #ffffff;
  4  --sidebar-bg: #1e1e1e;
  5  --nav-active: #0a84ff;
  6}
  7
  8[data-theme="light"] {
  9  --bg-color: #ffffff;
 10  --text-color: #333333;
 11  --sidebar-bg: #f0f0f0;
 12  --nav-active: #007aff;
 13}
 14
 15body {
 16  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
 17    Ubuntu, Cantarell, sans-serif;
 18  margin: 0;
 19  padding: 0;
 20  background-color: var(--bg-color);
 21  color: var(--text-color);
 22  transition: background-color 0.3s, color 0.3s;
 23}
 24
 25html:not([data-theme]) body {
 26  display: none;
 27}
 28
 29
 30.loading {
 31  transition: none;
 32}
 33
 34.container {
 35  display: flex;
 36  min-height: 100vh;
 37}
 38
 39.content {
 40  flex: 1;
 41  padding: 20px;
 42  padding-bottom: 80px; /* Space for mobile nav */
 43}
 44
 45/* Navigation styles */
 46nav {
 47  background-color: var(--sidebar-bg);
 48  transition: background-color 0.3s;
 49}
 50
 51.nav-link {
 52  display: flex;
 53  align-items: center;
 54  padding: 12px 16px;
 55  text-decoration: none;
 56  color: var(--text-color);
 57}
 58
 59.nav-link.active {
 60  color: var(--nav-active);
 61}
 62
 63.nav-icon {
 64  margin-right: 8px;
 65  font-size: 1.2em;
 66}
 67
 68/* Theme toggle */
 69.theme-toggle {
 70  position: fixed;
 71  top: 20px;
 72  right: 20px;
 73  background: none;
 74  border: none;
 75  cursor: pointer;
 76  font-size: 1.5em;
 77  color: var(--text-color);
 78}
 79
 80/* Mobile navigation (bottom) */
 81@media (max-width: 768px) {
 82  .sidebar {
 83    position: fixed;
 84    bottom: 0;
 85    left: 0;
 86    right: 0;
 87    height: 60px;
 88    display: flex;
 89    justify-content: space-around;
 90    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
 91    z-index: 1000;
 92  }
 93
 94  .nav-link {
 95    flex-direction: column;
 96    font-size: 0.8em;
 97    padding: 8px 0;
 98  }
 99
100  .nav-icon {
101    margin-right: 0;
102    margin-bottom: 4px;
103  }
104}
105
106/* Desktop navigation (sidebar) */
107@media (min-width: 769px) {
108  .sidebar {
109    width: 220px;
110    min-height: 100vh;
111    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
112  }
113
114  .nav-link {
115    padding: 12px 24px;
116  }
117}