:root {
      --bg-color: #f0f4f8;
      --text-color: #333;
      --card-color: #fff;
      --button-color: #000080;
      --button-hover: #007bff;
    }

    body.dark {
      --bg-color: #1e1e1e;
      --text-color: #f0f0f0;
      --card-color: #2a2a2a;
      --button-color: #007bff;
      --button-hover: #0056b3;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      margin: 0;
      padding: 0;
    }

    .dashboard {
      max-width: 700px;
      margin: 40px auto;
      padding: 20px;
      background-color: var(--card-color);
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    h1, h2 {
      margin-top: 0;
    }

    .study-hours, .tasks, .chart-container {
      margin-top: 30px;
    }

    button {
      padding: 8px 12px;
      background-color: var(--button-color);
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }

    button:hover {
      background-color: var(--button-hover);
    }

    input[type="text"] {
      padding: 8px;
      width: 70%;
      margin-top: 10px;
    }

    input[type="color"] {
      margin-left: 10px;
    }

    #task-list {
      list-style-type: none;
      padding: 0;
    }

    #task-list li {
      margin: 8px 0;
    }

    .chart-container {
      margin-top: 40px;
    }