/* --- Base Layout & Typography --- */
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 24px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f4f7f9; 
      color: #1f2937;
      user-select: none;
    }

    /* --- Top Right User Nav --- */
    .top-bar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 16px;
    }

    .user-menu {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 30px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      border: 1px solid #e5e7eb;
    }

    .welcome-text {
      font-size: 0.95rem;
      color: #4b5563;
    }

    .welcome-text strong {
      color: #111827;
    }

    /* Edit Button (Icon) */
    .edit-btn {
      background: transparent;
      border: 1px solid #d1d5db;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #6b7280;
      transition: all 0.2s ease;
    }

    .edit-btn:hover {
      background: #f3f4f6;
      color: #1f2937;
      border-color: #9ca3af;
    }

    /* Logout Button (Red) */
    .logout-btn {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .logout-btn:hover {
      background: #fee2e2;
      border-color: #f87171;
    }

    /* --- Header Section --- */
    .page-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .page-header h1 {
      font-size: 2.5rem;
      font-weight: 800;
      margin: 0 0 8px 0;
      color: #111827;
      letter-spacing: -0.5px;
    }

    .page-header p {
      font-size: 1.1rem;
      color: #9ca3af; 
      margin: 0;
      font-weight: 500;
    }

    /* --- Main Container --- */
    .dashboard-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* --- Unlock Code Section --- */
    .unlock-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 32px;
      margin-bottom: 48px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      text-align: center;
    }

    .unlock-card h2 {
      font-size: 1.4rem;
      color: #111827;
      margin: 0 0 8px 0;
    }

    .unlock-card p {
      color: #6b7280;
      font-size: 0.95rem;
      margin: 0 0 24px 0;
    }

    .unlock-form {
      display: flex;
      justify-content: center;
      gap: 16px;
      max-width: 800px;
      margin: 0 auto;
      flex-wrap: wrap; /* Allows wrapping on smaller screens */
    }

    .unlock-input {
      padding: 14px 16px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 1rem;
      outline: none;
      transition: all 0.2s ease;
      background-color: #f9fafb;
    }

    .unlock-input.email {
      flex: 2;
      min-width: 250px;
    }

    .unlock-input.code {
      flex: 1;
      min-width: 150px;
    }

    .unlock-input:focus {
      border-color: #6366f1; /* Indigo focus ring */
      background-color: #ffffff;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    .unlock-btn {
      background: #111827;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 14px 28px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.1s ease;
      white-space: nowrap;
    }

    .unlock-btn:hover {
      background: #374151;
      transform: translateY(-1px);
    }

    .unlock-btn:active {
      transform: translateY(1px);
    }

    /* --- Grid Layout --- */
    .quiz-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr); 
      gap: 24px;
    }

    /* --- Square Card Styling --- */
    /* --- Square Card Styling --- */
    .quiz-card {
      position: relative;
      background: #ffffff;
      border-radius: 16px;
      aspect-ratio: 1 / 1; 
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 10px 15px rgba(0, 0, 0, 0.02);
      border: 1px solid #e5e7eb;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
      overflow: hidden; 
      
      /* Setup for split design */
      display: flex;
      flex-direction: column;
      padding: 0; /* Remove padding so the top image touches the corners */
    }

    .quiz-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      border-color: #d1d5db;
    }

    /* --- NEW: Top 1/3 Image Strip --- */
    .card-cover {
      width: 100%;
      flex: 0 0 33.33%; /* Forces exactly 1/3 of the height */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-bottom: 1px solid #f3f4f6; /* Subtle divider between image and text */
    }

    /* --- NEW: Bottom Text Container --- */
    .card-content-panel {
      width: 100%;
      flex-grow: 1; /* Takes up the remaining 2/3, OR 100% if there is no image */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 24px;
      box-sizing: border-box;
      background: #ffffff;
    }

    .mcq-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      background-color: #ea580c; /* Matches your brand orange */
      color: #ffffff;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25);
      z-index: 2;
    }

    /* --- Card Content --- */
    .quiz-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1f2937;
      margin: 0 0 16px 0;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* --- Quiz Card Note --- */
    .quiz-note {
        font-size: 0.85rem;
        color: #6b7280; /* Subtle grey */
        margin: 4px 0 12px 0; /* Space it nicely between title and meta */
        line-height: 1.4;
        
        /* Optional: Truncate to max 1 line so cards stay the same height */
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .quiz-meta {
      font-size: 0.9rem;
      color: #6b7280;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .meta-line {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .separator {
      color: #d1d5db;
      font-size: 0.8rem;
    }

    /* --- Status Badges --- */
    .status-badge {
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: 600;
      font-size: 0.85rem;
      margin-top: 4px;
    }

    .status-not-attempted {
      background-color: #f3f4f6;
      color: #4b5563;
      border: 1px solid #e5e7eb;
    }

    .status-pending {
      background-color: #fef3c7; 
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .status-completed-high {
      background-color: #d1fae5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }

    .status-completed-mid {
      background-color: #dbeafe;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    /* --- Rename Modal Styles --- */
    .modal-overlay {
      display: none; 
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(17, 24, 39, 0.6); 
      z-index: 1000; 
      justify-content: center; align-items: center;
      backdrop-filter: blur(2px);
    }
    .modal-box {
      background: #ffffff; padding: 28px; border-radius: 16px; 
      width: 90%; max-width: 400px; 
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      transform: translateY(-20px);
      animation: modalSlide 0.3s forwards ease-out;
    }
    /* --- Sleek Auth Toggle --- */
    .toggle-link {
      display: inline-block;
      margin-top: 20px;
      font-size: 0.95rem;
      color: #d38638;
      text-decoration: none;
      border-bottom: 1px dashed #d6a684;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .toggle-link:hover {
      color: #111827;
      border-color: #111827;
    }

    @keyframes modalSlide { to { transform: translateY(0); } }
    
    .modal-box h3 { margin: 0 0 8px 0; font-size: 1.3rem; color: #111827; }
    .modal-box p { margin: 0 0 20px 0; font-size: 0.9rem; color: #6b7280; }
    .modal-box input { 
      width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; 
      border-radius: 8px; margin-bottom: 24px; font-size: 1rem; outline: none;
    }
    .modal-box input:focus { border-color: #111827; }
    
    .modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
    .modal-actions button { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: 0.95rem; }
    .btn-cancel { background: #f3f4f6; color: #4b5563; }
    .btn-cancel:hover { background: #e5e7eb; }
    .btn-save { background: #111827; color: #ffffff; }
    .btn-save:hover { background: #374151; }

    .consent-text {
      display: block;
      margin-top: 28px;
      font-size: 0.8rem;
      color: #5b6d8b; /* Light grey */
      line-height: 1.4;
    }

    /* --- Locked Card --- */
    .locked-card {
        cursor: no-drop !important;
        background: #f8fafc;
        border: 1px dashed #cbd5e1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 240px; /* Adjust to match your normal card height */
        box-shadow: none !important;
        transition: none !important;
    }
    .locked-card:hover {
        transform: none !important;
    }
    .lock-icon-large {
        font-size: 3rem;
        margin-bottom: 12px;
        opacity: 0.4;
        filter: grayscale(100%);
    }
    .locked-card .quiz-title {
        color: #94a3b8; /* Muted grey text */
        margin: 0;
        padding: 0 16px;
    }

    /* Responsive Safety for Top Bar & Form */
    /* --- Tablet Responsiveness (Scales 4 columns down to 2) --- */
    @media (max-width: 1024px) {
      .quiz-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }

    /* --- Comprehensive Mobile Responsiveness --- */
    @media (max-width: 768px) {
      /* Reclaim screen space */
      body {
        padding: 12px;
      }

      /* Center and stack the top user navigation */
      .top-bar {
        justify-content: center;
        margin-bottom: 24px;
      }

      .user-menu {
        width: 100%;
        justify-content: space-between; /* Spreads out name and buttons */
        padding: 10px 16px;
      }

      /* Scale down header titles */
      .page-header {
        margin-bottom: 24px;
      }
      
      .page-header h1 {
        font-size: 1.8rem; /* Scaled down from 2.5rem */
      }
      
      .page-header p {
        font-size: 0.95rem;
      }

      /* Compact Unlock Card */
      .unlock-card {
        padding: 20px 16px;
        margin-bottom: 32px;
      }

      .unlock-card h2 {
        font-size: 1.25rem;
      }

      .unlock-form {
        flex-direction: column;
        gap: 12px;
      }

      .unlock-input.email, 
      .unlock-input.code, 
      .unlock-btn {
        width: 100%;
        flex: unset;
        box-sizing: border-box; /* Crucial to prevent overflow */
      }

      /* Quiz Grid: Stack into 1 column */
      .quiz-grid {
        grid-template-columns: 1fr; 
        gap: 16px;
      }

      .quiz-card {
        aspect-ratio: auto; /* Prevents the card from becoming a giant square */
        min-height: auto;
        padding: 0 !important; /* CRITICAL: Ensures the image touches the edges */
      }

      .card-cover {
        flex: none; /* Overrides the 33% desktop height */
        height: 120px; /* Gives a perfectly sized image strip for phones */
      }

      .card-content-panel {
        padding: 16px 12px; /* Tighter text padding for small screens */
      }

      .quiz-title {
        font-size: 1.15rem;
        margin-bottom: 12px;
      }

      .status-badge {
        font-size: 0.8rem;
        padding: 4px 10px;
      }

      /* Compact Modal */
      .modal-box {
        width: 95%;
        padding: 20px 16px;
      }

      .modal-box h3 {
        font-size: 1.2rem;
      }

      /* Stack modal buttons for easier thumb-tapping */
      .modal-actions {
        flex-direction: column-reverse; /* Puts primary save button on top */
        gap: 10px;
      }

      .modal-actions button {
        width: 100%;
        padding: 12px;
      }
    }