/* ================================
   Copyright by Svenska365
   style.css
   ================================ */

   @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

   /* ── CSS Variables (matching reference) ── */
   :root {
       --bg-color: #b3e5fc;
       --sidebar-bg: #e8f8ff;
       --card-bg: #ffffff;
       --primary-green: #4caf50;
       --primary-blue: #1565c0;
       --accent-blue: #1d72ff;
       --text-main: #1a2a3a;
       --text-muted: #4a6070;
       --shadow: 0 4px 12px rgba(0,0,0,0.1);
       --border-radius: 16px;
       --card-border: 1px solid rgba(255,255,255,0.6);
   }
   
   /* ── Reset ── */
   * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
   
   body {
       font-family: 'Nunito', sans-serif;
       background: linear-gradient(145deg, #b3e5fc 0%, #81d4fa 50%, #a5d8f0 100%);
       min-height: 100vh;
       color: var(--text-main);
   }
   
   /* ════════════════════════════════
      TITLE BANNER
      ════════════════════════════════ */
   .title {
       background: linear-gradient(135deg, #0d47a1 0%, #1565c0 40%, #1976d2 100%);
       padding: 28px 40px;
       text-align: center;
       box-shadow: 0 4px 20px rgba(13,71,161,0.35);
   }
   
   .title h1 {
       color: #ffffff;
       font-size: 2.1rem;
       font-weight: 900;
       letter-spacing: -0.3px;
       text-shadow: 0 2px 8px rgba(0,0,0,0.2);
   }
   
   /* ════════════════════════════════
      WORKSPACE LAYOUT
      ════════════════════════════════ */
   .workspace-container {
       display: flex;
       flex-direction: row;
       gap: 24px;
       padding: 28px 32px;
       max-width: 1200px;
       margin: 0 auto;
       align-items: flex-start;
   }
   
   /* ════════════════════════════════
      SIDEBAR
      ════════════════════════════════ */
   .topics-sidebar {
       min-width: 220px;
       width: 240px;
       background: rgba(255,255,255,0.85);
       backdrop-filter: blur(10px);
       border-radius: var(--border-radius);
       padding: 22px 18px;
       box-shadow: 0 6px 24px rgba(21,101,192,0.13);
       border: var(--card-border);
       flex-shrink: 0;
   }
   
   .topics-sidebar h2 {
       font-size: 1.1rem;
       font-weight: 800;
       color: var(--text-main);
       margin-bottom: 16px;
       padding-bottom: 10px;
       border-bottom: 2px solid #ddeef8;
   }
   
   .topic-list {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   
   .topic-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border-radius: 10px;
       cursor: pointer;
       font-size: 0.95rem;
       font-weight: 600;
       color: var(--text-main);
       transition: background 0.18s, color 0.18s;
   }
   
   .topic-item:hover {
       background: #d6eef9;
       color: var(--primary-blue);
   }
   
   .topic-item.active {
       background: #d6eef9;
       color: var(--primary-blue);
   }
   
   .topic-item input[type="checkbox"] {
       accent-color: var(--primary-blue);
       width: 16px;
       height: 16px;
       cursor: pointer;
       flex-shrink: 0;
   }
   
   .topic-item span {
       flex: 1;
       user-select: none;
   }
   
   /* ════════════════════════════════
      MAIN TEST AREA
      ════════════════════════════════ */
   .tests-display-area {
       flex: 1;
       min-width: 0;
   }
   
   .tests-display-area > h2 {
       font-size: 1.35rem;
       font-weight: 800;
       color: var(--text-main);
       margin-bottom: 4px;
   }
   
   .tests-display-area > h3#panel-title {
       font-size: 1rem;
       font-weight: 600;
       color: var(--text-muted);
       margin-bottom: 0;
       font-style: normal;
   }
   
   /* ── Panel area wrapper ── */
   .panel-area {
       display: flex;
       flex-direction: column;
       gap: 12px;
       margin-top: 16px;
   }
   
   /* ════════════════════════════════
      PANEL CARD & PRACTICE AREA
      ════════════════════════════════ */
   .panel-card {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }
   
   .practice-area {
       background: rgba(255,255,255,0.92);
       border-radius: var(--border-radius);
       box-shadow: 0 3px 14px rgba(21,101,192,0.10);
       border: var(--card-border);
       overflow: hidden;
       transition: box-shadow 0.2s;
   }
   
   .practice-area:hover {
       box-shadow: 0 6px 24px rgba(21,101,192,0.18);
   }
   
   /* ── Accordion Header ── */
   .practice-title {
       display: flex;
       align-items: center;
       gap: 14px;
       padding: 16px 20px;
       cursor: pointer;
       user-select: none;
       transition: background 0.15s ease;
   }
   
   .practice-title:hover {
       background: #f0f8ff;
   }
   
   .card-icon-img {
       width: 2.4rem;
       height: 2.4rem;
       object-fit: contain;
       border-radius: 50%;
       flex-shrink: 0;
   }
   
   .card-text {
       flex: 1;
       font-size: 1rem;
       font-weight: 700;
       color: var(--text-main);
   }
   
   .card-arrow {
       font-size: 0.85rem;
       color: var(--text-muted);
       font-weight: 700;
       min-width: 20px;
       text-align: center;
       transition: color 0.2s;
   }
   
   .practice-title:hover .card-arrow {
       color: var(--primary-blue);
   }
   
   /* ── Button Container (expanded) ── */
   .button-container {
       padding: 14px 20px 20px;
       background: #f4fbff;
       border-top: 1px solid #ddeef8;
       display: flex;
       gap: 12px;
       flex-wrap: wrap;
   }
   
   .button-container.hide {
       display: none;
   }
   
   /* ── Quiz Buttons ── */
   .quiz-btn {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 10px 22px;
       background: #ffffff;
       color: var(--primary-blue);
       border: 2px solid var(--primary-blue);
       border-radius: 50px;
       font-size: 0.95rem;
       font-weight: 700;
       font-family: 'Nunito', sans-serif;
       cursor: pointer;
       transition: all 0.18s ease;
       white-space: nowrap;
       box-shadow: 0 2px 6px rgba(21,101,192,0.08);
   }
   
   .quiz-btn:hover {
       background: var(--primary-blue);
       color: #ffffff;
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(21,101,192,0.28);
   }
   
   .quiz-btn:active {
       transform: translateY(0);
   }
   
   .quiz-btn .icon {
       font-size: 1.1rem;
       line-height: 1;
   }
   
   /* ── Hide utility ── */
   .hide {
       display: none !important;
       visibility: hidden !important;
   }
   
   /* ════════════════════════════════
      QUIZ CONTAINER
      ════════════════════════════════ */
   #quiz-container {
       background: rgba(255,255,255,0.92);
       border-radius: var(--border-radius);
       box-shadow: 0 3px 14px rgba(21,101,192,0.10);
       border: var(--card-border);
       overflow: visible;
       width: 100%;
       margin-top: 16px;
       padding: 0;
   }
   
   .bild-quiz {
       padding: 0;
       width: 100%;
   }
   
   /* ── Back-to-topics button (sits above the header while a quiz is running) ── */
   .bild-quiz__back {
       display: block;
       width: 100%;
       text-align: left;
       padding: 14px 22px;
       background: #eaf6ff;
       color: var(--primary-blue);
       font-size: 0.95rem;
       font-weight: 800;
       font-family: 'Nunito', sans-serif;
       border: none;
       border-bottom: 1px solid #cfe6f5;
       border-radius: var(--border-radius) var(--border-radius) 0 0;
       cursor: pointer;
       transition: background 0.15s;
   }
   
   .bild-quiz__back:hover {
       background: #dceefb;
   }
   
   .bild-quiz__back:active {
       background: #cfe6f5;
   }
   
   /* ── Quiz Header Bar ── */
   .bild-quiz__header {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 10px 22px;
       background: linear-gradient(90deg, #dceefb 0%, #cfe8f7 100%);
       border-bottom: 1px solid #b5d4ee;
       font-size: 0.9rem;
       font-weight: 700;
       color: var(--text-main);
       box-shadow: 0 2px 8px rgba(21,101,192,0.08);
   }
   
   /* When the back button is present, it owns the top rounded corners instead */
   .bild-quiz__back + .bild-quiz__header {
       border-radius: 0;
   }
   
   .bild-quiz__count {
       color: var(--text-main);
       font-weight: 700;
   }
   
   .bild-quiz__title {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-blue);
    font-family: 'Nunito', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
   
   .bild-quiz__score {
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 4px;
   }
   
   .bild-quiz__score.correct  { color: #2e7d32; }
   .bild-quiz__score.incorrect { color: #c62828; }
   
   /* ── Quiz Image ── */
   .bild-quiz__image-wrap {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 28px 20px 20px;
       background: linear-gradient(160deg, #ffffff 60%, #eaf5fd 100%);
       min-height: 160px;
   }
   
   .bild-quiz__image-wrap img#bq-image {
       max-width: 280px;
       max-height: 220px;
       width: auto;
       height: auto;
       object-fit: contain;
       border-radius: 12px;
       display: block;
   }
   
   /* ── Normal quiz — question-only wrap (no image/audio) ── */
   .normal-quiz__question-wrap {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 40px 24px 8px;
       min-height: 120px;
   }
   
   .normal-quiz__question-wrap .bild-quiz__question {
       font-size: 1.6rem;
       padding: 0;
   }
   
   /* ── Question text ── */
   .bild-quiz__question {
       text-align: center;
       font-size: 1.3rem;
       font-weight: 800;
       color: var(--text-main);
       padding: 0 24px 4px;
       font-family: 'Nunito', sans-serif;
       letter-spacing: -0.2px;
   }
   
   /* ── Quiz Options Grid ── */
   .bild-quiz__options {
       display: flex;
       flex-direction: row;
       gap: 16px;
       flex-wrap: wrap;
       justify-content: center;
       padding: 16px 24px 20px;
       width: 100%;
   }
   
   .bild-quiz__option {
       padding: 10px 28px;
       border-radius: 12px;
       font-size: 1.1rem;
       font-weight: 700;
       font-family: 'Nunito', sans-serif;
       cursor: pointer;
       border: 2px solid #d0e8f5;
       background: #ffffff;
       color: var(--text-main);
       transition: transform 0.15s, background 0.15s, border-color 0.15s;
       box-shadow: 0 2px 6px rgba(21,101,192,0.07);
       min-width: 120px;
       text-align: center;
   }
   
   .bild-quiz__option:hover:not(:disabled) {
       transform: scale(1.06);
       background: #e3f2fd;
       border-color: #90caf9;
   }
   
   .bild-quiz__option.correct {
       background: #e8f5e9;
       border-color: #a5d6a7;
       color: #2e7d32;
   }
   
   .bild-quiz__option.incorrect {
       background: #fce4ec;
       border-color: #f48fb1;
       color: #c62828;
   }
   
   .bild-quiz__option:disabled {
       cursor: default;
       transform: none;
   }
   
   /* ── Feedback ── */
   .bild-quiz__feedback {
       display: block;
       margin: 0 24px 14px;
       padding: 12px 18px;
       border-radius: 10px;
       font-size: 1rem;
       font-weight: 700;
       font-family: 'Nunito', sans-serif;
       text-align: center;
   }
   
   .bild-quiz__feedback.hide { display: none !important; }
   
   .bild-quiz__feedback.correct {
       background: #e8f5e9;
       color: #2e7d32;
       border: 1px solid #a5d6a7;
   }
   
   .bild-quiz__feedback.incorrect {
       background: #fce4ec;
       color: #c62828;
       border: 1px solid #f48fb1;
   }
   
   /* ── Next Button ── */
   .bild-quiz__next {
       display: block;
       margin: 0 24px 22px auto;
       padding: 9px 26px;
       background: linear-gradient(90deg, #1d72ff 0%, #1565c0 100%);
       color: #ffffff;
       border: none;
       border-radius: 50px;
       font-size: 0.88rem;
       font-weight: 800;
       font-family: 'Nunito', sans-serif;
       cursor: pointer;
       transition: filter 0.2s, transform 0.15s;
       letter-spacing: 0.8px;
       text-transform: uppercase;
       box-shadow: 0 3px 10px rgba(29,114,255,0.3);
   }
   
   .bild-quiz__next.hide { display: none !important; }
   
   .bild-quiz__next:hover {
       filter: brightness(1.1);
       transform: translateY(-1px);
   }
   
   .bild-quiz__next:active { transform: translateY(0); }
   
   .bild-quiz__error {
       padding: 30px;
       text-align: center;
       color: #c62828;
       font-weight: 700;
       font-family: 'Nunito', sans-serif;
   }
   
   /* ════════════════════════════════
      LISTEN QUIZ — CUSTOM AUDIO PLAYER
      ════════════════════════════════ */
   .listen-quiz__audio-wrap {
       padding: 32px 24px;
       min-height: 120px;
   }
   
   .listen-quiz__player {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: 14px;
       background: #f0f8ff;
       border: 1.5px solid #cde4f5;
       border-radius: 50px;
       padding: 10px 20px 10px 12px;
       width: 100%;
       max-width: 420px;
       box-shadow: 0 2px 10px rgba(21,101,192,0.08);
   }
   
   /* ── Play / Pause button ── */
   .listen-quiz__play-btn {
       width: 38px;
       height: 38px;
       flex-shrink: 0;
       border-radius: 50%;
       border: 2px solid var(--primary-blue);
       background: #ffffff;
       color: var(--primary-blue);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform 0.15s, background 0.15s;
       box-shadow: 0 2px 8px rgba(21,101,192,0.15);
       padding: 0;
   }
   
   .listen-quiz__play-btn:hover  { background: #e3f2fd; transform: scale(1.08); }
   .listen-quiz__play-btn:active { transform: scale(0.95); }
   
   .listen-quiz__play-btn svg { display: block; }
   
   /* ── Track / progress bar ── */
   .listen-quiz__track {
       flex: 1;
       display: flex;
       align-items: center;
   }
   
   .listen-quiz__progress-bar {
       position: relative;
       width: 100%;
       height: 4px;
       background: #c5dff0;
       border-radius: 50px;
       cursor: pointer;
   }
   
   .listen-quiz__progress-fill {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
       width: 0%;
       background: var(--primary-blue);
       border-radius: 50px;
       transition: width 0.1s linear;
       pointer-events: none;
   }
   
   .listen-quiz__progress-dot {
       position: absolute;
       top: 50%;
       left: 0%;
       transform: translate(-50%, -50%);
       width: 12px;
       height: 12px;
       background: var(--primary-blue);
       border-radius: 50%;
       border: 2px solid #fff;
       box-shadow: 0 1px 4px rgba(21,101,192,0.3);
       pointer-events: none;
       transition: left 0.1s linear;
   }
   
   /* ════════════════════════════════
      RESULT / SCORE CARD
      ════════════════════════════════ */
   .bild-quiz--result {
       padding: 28px 28px 32px;
   }
   
   .score-card {
       background: #f4fbff;
       border-radius: 14px;
       padding: 36px 32px 28px;
       text-align: center;
       border: 1px solid #d4eaf8;
       margin-bottom: 24px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0;
   }
   
   .score-emoji {
       font-size: 3rem;
       line-height: 1;
       margin-bottom: 12px;
   }
   
   .score-title {
       font-size: 1.5rem;
       font-weight: 900;
       color: var(--text-main);
       margin-bottom: 8px;
   }
   
   .score-subtitle {
       font-size: 0.92rem;
       font-weight: 600;
       color: var(--text-muted);
       margin-bottom: 24px;
   }
   
   /* ── Stats Grid ── */
   .score-stats {
       display: flex;
       flex-direction: row;
       gap: 12px;
       flex-wrap: wrap;
       justify-content: center;
       width: 100%;
       margin-bottom: 20px;
   }
   
   .score-stat {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 4px;
       padding: 14px 20px;
       border-radius: 14px;
       min-width: 80px;
       box-shadow: 0 2px 8px rgba(21,101,192,0.08);
   }
   
   .score-stat--total   { background: #e3f2fd; border: 1px solid #b0d4f0; }
   .score-stat--correct { background: #e8f5e9; border: 1px solid #a5d6a7; }
   .score-stat--wrong   { background: #fce4ec; border: 1px solid #f48fb1; }
   .score-stat--pct     { background: linear-gradient(135deg, #e8f0fe, #dceefb); border: 1px solid #b0c4f5; }
   
   .score-stat__num {
       display: block;
       font-size: 1.8rem;
       font-weight: 900;
       color: var(--text-main);
       line-height: 1;
       margin-bottom: 2px;
   }
   
   .score-stat--correct .score-stat__num { color: #2e7d32; }
   .score-stat--wrong   .score-stat__num { color: #c62828; }
   .score-stat--pct     .score-stat__num { color: var(--primary-blue); }
   
   .score-stat__label {
       display: block;
       font-size: 0.78rem;
       font-weight: 700;
       color: var(--text-muted);
       text-transform: uppercase;
       letter-spacing: 0.3px;
   }
   
   /* ── Progress Bar ── */
   .score-bar-wrap {
       width: 100%;
       max-width: 320px;
       height: 12px;
       background: #ddeef8;
       border-radius: 50px;
       overflow: hidden;
   }
   
   .score-bar-fill {
       height: 100%;
       background: linear-gradient(90deg, #4caf50, #1d72ff);
       border-radius: 50px;
       transition: width 0.8s ease;
   }
   
   /* ── Result Buttons ── */
   .bild-quiz--result .bild-quiz__next {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       margin: 0;
       padding: 10px 26px;
   }
   
   /* ════════════════════════════════
      RESPONSIVE
      ════════════════════════════════ */
   @media (max-width: 768px) {
       .workspace-container {
           flex-direction: column;
           padding: 16px;
       }
   
       .topics-sidebar { width: 100%; }
   
       .topic-list {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           gap: 6px;
       }
   
       .title h1 { font-size: 1.4rem; }
   
       .score-stats { gap: 8px; }
   
       .bild-quiz__options {
           flex-direction: column;
           align-items: stretch;
       }
   
       .bild-quiz__option { min-width: unset; width: 100%; }
   }
   
   @media (max-width: 480px) {
       .topic-list { grid-template-columns: 1fr; }
       .score-stat { padding: 10px 14px; min-width: 64px; }
   }