body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
      background-attachment: fixed;
    }

    /* Glassmorphism effects */
    .glass {
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(148, 163, 184, 0.1);
    }

    .glass-strong {
      background: rgba(15, 23, 42, 0.8);
      backdrop-filter: blur(24px);
      border: 1px solid rgba(148, 163, 184, 0.15);
    }

    /* Smooth transitions */
    * {
      transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    }

    /* Header styling */
    header {
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(148, 163, 184, 0.1);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    }

    /* Button styles */
    .btn {
      background: rgba(51, 65, 85, 0.4);
      border: 1px solid rgba(148, 163, 184, 0.15);
      border-radius: 0.75rem;
      padding: 0.5rem 1rem;
      color: #cbd5e1;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn:hover {
      background: rgba(71, 85, 105, 0.6);
      border-color: rgba(148, 163, 184, 0.25);
      transform: translateY(-1px);
    }

    .btn:active {
      transform: translateY(0);
    }

    /* Tab buttons */
    [role="tab"] {
      padding: 0.5rem 1.25rem;
      color: #94a3b8;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    [role="tab"]:hover {
      color: #cbd5e1;
      background: rgba(51, 65, 85, 0.3);
    }

    [role="tab"][aria-selected="true"] {
      color: #f1f5f9;
      font-weight: 600;
      background: rgba(59, 130, 246, 0.2);
    }

    /* Calendar grid */
    .cal-cell {
      background: rgba(15, 23, 42, 0.5);
      border: 1px solid rgba(148, 163, 184, 0.08);
      border-radius: 1rem;
      padding: 0.75rem;
      display: flex;
      flex-direction: column;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .cal-cell::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.05), transparent 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .cal-cell:hover {
      border-color: rgba(148, 163, 184, 0.2);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .cal-cell:hover::before {
      opacity: 1;
    }

    .cal-cell.ring-1 {
      border-color: rgba(56, 189, 248, 0.5);
      box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3), 0 4px 16px rgba(56, 189, 248, 0.1);
    }

    .cal-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.75rem;
      color: #94a3b8;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .cal-list {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
      overflow: hidden;
    }

    /* Event cards */
    .event {
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%);
      border-left: 3px solid;
      border-radius: 0.625rem;
      padding: 0.2rem 0.625rem;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .event:hover {
      transform: translateX(2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .event .row1 {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
    }

    .event .title {
      font-weight: 600;
      font-size: 0.75rem;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }

    .event .time {
      font-size: 0.625rem;
      opacity: 0.75;
      white-space: nowrap;
      margin-left: auto;
    }

    .event .meta {
      font-size: 0.625rem;
      opacity: 0.7;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .more {
      font-size: 0.625rem;
      color: #64748b;
      padding: 0.25rem 0.5rem;
      text-align: center;
    }

    /* Category colors */
    .cat-bg { border-color: #f97316; }
    .cat-tcg { border-color: #ec4899; }
    .cat-releasebg { border-color: #10b981; }
    .cat-releasetcg { border-color: #06b6d4; }
    .cat-warhammer { border-color: #8b5cf6; }
    .cat-gundam { border-color: #3b82f6; }
    .cat-pokemon { border-color: #3b82f6; }
    .cat-riftbound { border-color: #c43bf6; }
    .cat-yugioh { border-color: #7c3aed; }
    .cat-mtg { border-color: #059669; }
    .cat-fab { border-color: #b45309; }
    .cat-onepiece { border-color: #db2777; }
    .cat-bgnight { border-color: #0ea5e9; }
    .cat-other { border-color: #64748b; }

    /* List view */
    #listContainer .row {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 1rem;
      align-items: center;
      background: rgba(15, 23, 42, 0.5);
      border: 1px solid rgba(148, 163, 184, 0.08);
      border-radius: 1rem;
      padding: 1rem;
      transition: all 0.2s ease;
    }

    #listContainer .row:hover {
      border-color: rgba(148, 163, 184, 0.2);
      transform: translateX(4px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    #listContainer .date {
      font-weight: 600;
      font-size: 0.875rem;
      color: #cbd5e1;
      text-align: right;
    }

    #listContainer .left {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
      min-width: 0;
    }

    #listContainer .pill {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.625rem;
      border-radius: 9999px;
      font-size: 0.625rem;
      font-weight: 600;
      border: 1px solid;
      width: fit-content;
    }

    #listContainer .title {
      font-weight: 600;
      font-size: 0.9375rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #listContainer .meta {
      font-size: 0.8125rem;
      color: #94a3b8;
    }

    /* Pill colors */
    .pill.cat-bg { color: #fdba74; border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.1); }
    .pill.cat-tcg { color: #f9a8d4; border-color: rgba(236, 72, 153, 0.3); background: rgba(236, 72, 153, 0.1); }
    .pill.cat-releasebg { color: #6ee7b7; border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.1); }
    .pill.cat-releasetcg { color: #67e8f9; border-color: rgba(6, 182, 212, 0.3); background: rgba(6, 182, 212, 0.1); }
    .pill.cat-warhammer { color: #c4b5fd; border-color: rgba(139, 92, 246, 0.3); background: rgba(139, 92, 246, 0.1); }
    .pill.cat-gundam { color: #93c5fd; border-color: rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.1); }
    .pill.cat-pokemon { color: #93c5fd; border-color: rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.1); }
    .pill.cat-riftbound { color: #e7acfc; border-color: rgba(59, 130, 246, 0.3); background: rgba(59, 130, 246, 0.1); }
    .pill.cat-yugioh { color: #d8b4fe; border-color: rgba(124, 58, 237, 0.3); background: rgba(124, 58, 237, 0.1); }
    .pill.cat-mtg { color: #6ee7b7; border-color: rgba(5, 150, 105, 0.3); background: rgba(5, 150, 105, 0.1); }
    .pill.cat-fab { color: #fdba74; border-color: rgba(180, 83, 9, 0.3); background: rgba(180, 83, 9, 0.1); }
    .pill.cat-onepiece { color: #fda4af; border-color: rgba(219, 39, 119, 0.3); background: rgba(219, 39, 119, 0.1); }
    .pill.cat-bgnight { color: #a5f3fc; border-color: rgba(14, 165, 233, 0.3); background: rgba(14, 165, 233, 0.1); }
    .pill.cat-other { color: #cbd5e1; border-color: rgba(100, 116, 139, 0.3); background: rgba(100, 116, 139, 0.1); }

    /* Checkbox styling */
    input[type="checkbox"] {
      accent-color: #3b82f6;
      cursor: pointer;
    }

    /* Scrollbar styling */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.3);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.3);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(148, 163, 184, 0.5);
    }

    /* Responsive */
    @media (max-width: 800px) {
      #listContainer .row {
        grid-template-columns: 64px 1fr;
        gap: 0.75rem;
        padding: 0.75rem;
      }
      
      .cal-cell {
        padding: 0.5rem;
      }
      
      .event .title {
        max-width: 70%;
      }
    }
    /* Mobile: vertical scroll layout, days auto-height */
@media (max-width: 800px) {
  .btn {
    border: 1px solid white;
    padding: 0.5rem 1rem;
    color: white;
    font-weight: 500;
  }
  #monthSelector{
      position: absolute;
      top: 94vh;
      width: 100vw;
      left: 0;
      display: flex;
      gap: 1rem;
      justify-content: center;
      height: fit-content;
  }
  #nextBtn::before{
    content: "volgende maand "
  }
  #prevBtn::after{
    content: " vorige maand";
  }
  /* Hide weekday header row */
  #calendarSection > .grid.text-center {
    display: none;
  }

  /* Make the days list scroll vertically */
  #grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(98vh - 120px); /* adjust for your header height */
    padding: 0.75rem;
  }

  /* Each day becomes a full-width card, auto height */
  .cal-cell {
    width: 100%;
    height: auto;                /* let it expand naturally */
    min-height: unset;           /* remove any min-height from desktop calc */
    flex: 0 0 auto;              /* prevent stretching */
    border-radius: 1rem;
    padding: 1rem;
  }

  /* Ensure the event list can grow fully */
  .cal-list {
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  /* Slightly larger text for mobile readability */
  .cal-top {
    font-size: 0.875rem;
  }

  /* Prevent cell height calculation JS from forcing fixed height */
  :root {
    --cell-h: auto !important;
  }
  .view_selector{ display: none!important}
}