/* Specific Flashcards page styling */
    .subject-item {
      cursor: pointer;
      transition: var(--transition-smooth);
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      margin-bottom: 10px;
    }

    .subject-item:hover {
      background: var(--glass-bg-hover);
      transform: translateX(4px);
      border-color: rgba(255, 255, 255, 0.15);
    }

    .flashcard-item {
      border-left: 4px solid var(--primary-indigo);
      background: rgba(255, 255, 255, 0.02);
      transition: var(--transition-smooth);
    }

    .flashcard-item:hover {
      background: rgba(255, 255, 255, 0.05);
      border-left-width: 6px;
    }

    /* SRS 3D Flip Card Styles */
    .srs-deck-container {
      perspective: 1000px;
      width: 100%;
      height: 240px;
      margin: 0 auto;
    }

    .srs-flip-card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
    }

    .srs-flip-card.is-flipped {
      transform: rotateY(180deg);
    }

    .srs-card-front,
    .srs-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border-radius: 16px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .srs-card-front {
      background: rgba(124, 58, 237, 0.05);
      border-top: 1px solid rgba(124, 58, 237, 0.2);
      border-left: 1px solid rgba(124, 58, 237, 0.2);
    }

    .srs-card-back {
      background: rgba(20, 184, 166, 0.05);
      border-top: 1px solid rgba(20, 184, 166, 0.2);
      border-left: 1px solid rgba(20, 184, 166, 0.2);
      transform: rotateY(180deg);
    }