body {
      margin: 0;
      font-family: 'Inter', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
      background: #f8fafc;
    }

    /* layout flex container */
    .box {
  opacity: 0.95;
    }
    .layout {
      display: grid;
      grid-template-columns: 260px 1fr 280px;
       width: 100%;
    }

    /* ========= LEFT SIDEBAR ========= */
    .sidebar {
      width: 280px;
      background: #ffffff;
      border-right: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      overflow: visible;;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
      transition: all 0.2s;
       position: sticky;
        top: 0;
        height: 100vh;
    }

    /* brand area */
    .brand {
      padding: 24px 20px 16px 20px;
      border-bottom: 1px solid #eef2ff;
      margin-bottom: 20px;
    }
    .brand h2 {
      font-size: 1.8rem;
      font-weight: 700;
      background: linear-gradient(135deg, #1e40af, #2563eb);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      letter-spacing: -0.3px;
    }
    .brand p {
      font-size: 0.75rem;
      color: #5b6e8c;
      margin-top: 6px;
    }

    /* user card inside sidebar */
    .user-card {
      background: #f1f5f9;
      margin: 0 16px 20px 16px;
      padding: 14px 16px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid #e2edff;
    }
    .avatar {
      width: 44px;
      height: 44px;
      background: linear-gradient(145deg, #2563eb, #1e40af);
      border-radius: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      font-size: 1.2rem;
      box-shadow: 0 6px 10px rgba(37,99,235,0.2);
    }
    .user-info h4 {
      font-size: 0.95rem;
      font-weight: 600;
      color: #0f172a;
    }
    .user-info span {
      font-size: 0.7rem;
      color: #3b7cbf;
      background: #dbeafe;
      padding: 2px 8px;
      border-radius: 20px;
    }

    /* navigation menu */
    .nav-menu {
      flex: 1;
      padding: 0 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .nav-link {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      border-radius: 14px;
      font-weight: 500;
      color: #2c3e66;
      transition: all 0.2s ease;
      cursor: pointer;
      background: transparent;
      border: none;
      width: 100%;
      text-align: left;
      font-size: 0.95rem;
    }
    .nav-link i {
      font-style: normal;
      font-weight: 500;
      font-size: 1.2rem;
    }
    .nav-link:hover {
      background: #eef2ff;
      color: #1e40af;
    }
    .nav-link.active {
      background: #dbeafe;
      color: #1e40af;
      border-left: 3px solid #2563eb;
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.05);
      font-weight: 600;
    }
    .stats-mini {
      margin: 20px 16px 24px 16px;
      background: #f8fafd;
      border-radius: 20px;
      padding: 16px;
      border: 1px solid #e0edff;
    }
    .stats-mini p {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #4b6a9b;
      margin-bottom: 12px;
    }
    .progress-bar-bg {
      background: #e2e8f0;
      border-radius: 30px;
      height: 8px;
      width: 100%;
      overflow: hidden;
    }
    .progress-fill {
      width: 68%;
      height: 8px;
      background: #2563eb;
      border-radius: 30px;
    }
    .stat-numbers {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
    }
    .stat-numbers div {
      font-size: 0.85rem;
      font-weight: 600;
      color: #0f2b4d;
    }

    /* ========= MAIN CONTENT ========= */
    .main {
      flex: 1;
      padding: 28px 32px;
       overflow: visible;
      background: #fafcff;
    }

    .main h1 {
      font-size: 1.9rem;
      font-weight: 700;
      color: #0f2b4d;
      margin-bottom: 0.25rem;
    }

    .subhead {
      color: #5b6e8c;
      margin-bottom: 28px;
      border-left: 3px solid #2563eb;
      padding-left: 14px;
      font-weight: 400;
    }

    .blue-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eff6ff;
  border-radius: 14px;
  padding: 14px 18px;
  border-left: 4px solid #2563eb;
}

/* FIX TEXT */
.blue-box .subhead {
  margin: 0;
  font-size: 16px;
  color: #475569;
   border-left: none;
}

    /* tabs */
    .tabs {
      display: flex;
      gap: 12px;
      margin: 20px 0 24px;
      flex-wrap: wrap;
      
    }
    .tab {
      padding: 10px 24px;
      border-radius: 40px;
      border: 1px solid #cbd5e1;
      background: white;
      color: #2c3e66;
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .tab.active {
      background: #1e40af;
      color: white;
      border-color: #2563eb;
      box-shadow: 0 6px 12px -8px rgba(30,58,138,0.3);
    }

    /* dynamic groups (no hardcoded year accordions) */
    .dynamic-group {
      margin-bottom: 32px;
      border-radius: 20px;
      background: white;
      border: 1px solid #e2edff;
      overflow: hidden;
    }
    .group-header {
      padding: 18px 24px;
      background: #ffffff;
      font-weight: 700;
      font-size: 1.2rem;
      color: #1e40af;
      border-bottom: 1px solid #eef2ff;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .group-header span:first-child {
      background: #dbeafe;
      padding: 6px 14px;
      border-radius: 40px;
      font-size: 0.8rem;
    }
    .tests-dynamic-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 20px;
      padding: 24px;
    }

    /* card styles for dynamic tests */
    .test-card {
      background: #fefefe;
      padding: 18px;
      border-radius: 20px;
      border: 1px solid #e0edff;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .test-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 20px rgba(0,0,0,0.05);
    }
    .test-name {
      font-weight: 800;
      font-size: 1.05rem;
      color: #0f2b4d;
      letter-spacing: -0.2px;
    }
    .test-meta {
      display: flex;
      gap: 16px;
      font-size: 0.7rem;
      color: #5b6e8c;
      border-top: 1px solid #eef2ff;
      padding-top: 8px;
      margin-top: 4px;
    }
    .test-card button {
      width: 100%;
      margin-top: 6px;
      padding: 10px 12px;
      border-radius: 40px;
      border: none;
      background: #2563eb;
      color: white;
      font-weight: 600;
      cursor: pointer;
      font-size: 0.85rem;
      transition: 0.15s;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .test-card button:hover {
      background: #1e40af;
      transform: translateY(-1px);
    }

    .loading-message, .empty-message {
      text-align: center;
      padding: 48px 20px;
      background: white;
      border-radius: 28px;
      color: #4b6a9b;
      font-weight: 500;
    }

    /* right panel */
    .right {
        position: sticky;
        top: 0;
      width: 280px;
      background: #ffffff;
      border-left: 1px solid #e2e8f0;
      padding: 24px 20px;
       overflow: visible;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .box {
      padding: 18px;
      border-radius: 24px;
      transition: all 0.2s;
    }
    .purple {
      background: #ede9fe;
      border: 1px solid #c4b5fd;
      color: #4c1d95;
    }
    .green {
      background: #d1fae5;
      border: 1px solid #a7f3d0;
      color: #065f46;
    }
    .yellow {
      background: #fef3c7;
      border: 1px solid #fde68a;
      color: #92400e;
    }
    .box h4 {
      font-size: 1rem;
      margin-bottom: 12px;
      font-weight: 700;
    }
    .box p, .box li {
      cursor: pointer;
      margin: 8px 0;
      font-size: 0.85rem;
      font-weight: 500;
      transition: 0.1s;
    }
    .box p:hover, .box li:hover {
      text-decoration: underline;
      opacity: 0.8;
      transform: translateX(2px);
    }
    ul {
      padding-left: 18px;
    }
    li {
      margin: 8px 0;
    }

   /* ================= MOBILE FIX ================= */
@media (max-width: 780px) {

  /* REMOVE GRID → STACK LAYOUT */
  .layout {
    display: block;
    width: 100%;
  }

  /* SIDEBAR FIX */
  .sidebar {
    width: 100%;
    position: relative;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
  }

  /* OPTIONAL: HIDE SIDEBAR (UNCOMMENT IF YOU WANT CLEAN UI) */
  /* .sidebar {
    display: none;
  } */

  /* MAIN CONTENT */
  .main {
    width: 100%;
    padding: 16px;
  }

  /* RIGHT PANEL FIX */
  .right {
    width: 100%;
    position: relative;
    border-left: none;
    border-top: 1px solid #e2e8f0;
  }

  /* GRID CARDS → SINGLE COLUMN */
  .tests-dynamic-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  /* TEST CARD IMPROVEMENT */
  .test-card {
    padding: 14px;
    border-radius: 16px;
  }

  .test-name {
    font-size: 1rem;
  }

  .test-meta {
    font-size: 0.75rem;
    gap: 10px;
  }

  .test-card button {
    padding: 10px;
    font-size: 0.85rem;
  }

  /* TABS SCROLLABLE */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .tab {
    flex: 0 0 auto;
    font-size: 0.8rem;
    padding: 8px 16px;
  }

  /* GROUP HEADER */
  .group-header {
    font-size: 1rem;
    padding: 14px 16px;
  }

  /* BLUE INFO BOX */
  .blue-box {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

}