:root {
      --bg: #f8f9fa;
      --card-bg: #ffffff;
      --text: #212529;
      --muted: #6c757d;
      --border: #dee2e6;
      --primary: #0d6efd;
      --success: #198754;
      --success-bg: #e8f5e9;
      --radius: 6px;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.5;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 900px;
      margin: 0 auto;
    }

    h1, h2, h3 { margin-top: 0; }

    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 20px;
      margin-bottom: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Filters Layout */
    .filters-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }

    .filter-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .filter-group label {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
    }

    select {
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background-color: white;
      font-size: 0.95rem;
    }

    /* Progress Bars */
    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .progress-bar-bg {
      background-color: #e9ecef;
      height: 12px;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .progress-bar-fill {
      background-color: var(--success);
      height: 100%;
      width: 0%;
      transition: width 0.3s ease;
    }

    /* Chapter Progress Details */
    .chapter-progress-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .chapter-item {
      font-size: 0.9rem;
    }

    .chapter-item .progress-bar-bg {
      height: 6px;
      margin-bottom: 0;
      margin-top: 4px;
    }

    /* Question Cards */
    .question-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color 0.2s;
    }

    .question-card.completed {
      border-left: 5px solid var(--success);
      background-color: var(--success-bg);
    }

    .question-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .question-meta {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .badge {
      background: #e9ecef;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 0.85rem;
    }

    .topics-list {
      margin: 8px 0;
      padding-left: 20px;
    }

    .topic-item {
      margin-bottom: 4px;
    }

    .btn {
      padding: 6px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background-color: white;
      cursor: pointer;
      font-weight: 600;
      align-self: flex-start;
      transition: all 0.2s;
    }

    .btn-completed {
      background-color: var(--success);
      color: white;
      border-color: var(--success);
    }