:root {
        --sky: #5bb8f5;
        --sky-light: #dff2ff;
        --sky-dark: #2e88cc;
        --sun: #fbbf24;
        --sun-light: #fef9e7;
        --sun-dark: #d97706;
        --grass: #34c97a;
        --grass-light: #d4f7e5;
        --grass-dark: #1a8f50;
        --rose: #f4637a;
        --rose-light: #fde8ec;
        --rose-dark: #c0364f;
        --purple: #a78bfa;
        --purple-light: #ede9fe;
        --white: #ffffff;
        --off-white: #f8fbff;
        --card-bg: #ffffff;
        --ink: #1e293b;
        --ink-mid: #475569;
        --ink-soft: #67717f;
        --border: #e2eaf4;
        --shadow-sm: 0 2px 8px rgba(91, 184, 245, 0.15);
        --shadow-md: 0 6px 24px rgba(91, 184, 245, 0.22);
        --shadow-lg: 0 12px 40px rgba(91, 184, 245, 0.28);
        --radius-xl: 28px;
        --radius-lg: 20px;
        --radius-md: 14px;
        --radius-sm: 10px;
        --radius-pill: 999px;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: "Nunito", sans-serif;
        background: #e8f4ff;
        color: var(--ink);
        min-height: 100vh;
        overflow-x: hidden;
        position: relative;
      }

      /* ── Decorative background ── */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        background:
          radial-gradient(
            ellipse 80% 50% at 10% 0%,
            #bde8ff 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse 60% 40% at 90% 100%,
            #c8f5dc 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse 50% 60% at 50% 50%,
            #fff8e7 0%,
            transparent 70%
          );
        pointer-events: none;
      }

      /* Floating shapes */
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
          radial-gradient(
            circle 12px at 8% 15%,
            rgba(251, 191, 36, 0.35) 100%,
            transparent 100%
          ),
          radial-gradient(
            circle 8px at 92% 10%,
            rgba(167, 139, 250, 0.35) 100%,
            transparent 100%
          ),
          radial-gradient(
            circle 18px at 95% 85%,
            rgba(52, 201, 122, 0.25) 100%,
            transparent 100%
          ),
          radial-gradient(
            circle 10px at 5% 80%,
            rgba(244, 99, 122, 0.25) 100%,
            transparent 100%
          ),
          radial-gradient(
            circle 6px at 50% 5%,
            rgba(91, 184, 245, 0.4) 100%,
            transparent 100%
          ),
          radial-gradient(
            circle 14px at 20% 95%,
            rgba(251, 191, 36, 0.3) 100%,
            transparent 100%
          ),
          radial-gradient(
            circle 9px at 80% 50%,
            rgba(167, 139, 250, 0.2) 100%,
            transparent 100%
          );
      }

      .app {
        position: relative;
        z-index: 1;
        max-width: 760px;
        margin: 0 auto;
        padding: 28px 18px 45px;
      }

      /* ── Header ── */
      .app-header {
        text-align: center;
        margin-bottom: 28px;
        animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      .app-header .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--sky-dark);
        background: var(--sky-light);
        border: 2px solid rgba(91, 184, 245, 0.3);
        padding: 4px 14px;
        border-radius: var(--radius-pill);
        margin-bottom: 10px;
      }
      .app-header h1 {
        font-family: "Baloo 2", cursive;
        font-size: clamp(28px, 6vw, 44px);
        font-weight: 800;
        color: var(--ink);
        line-height: 1.1;
        letter-spacing: -0.5px;
      }
      .app-header h1 .accent {
        color: var(--sky-dark);
      }

      /* ── Progress ── */
      .progress-wrap {
        margin-bottom: 24px;
        animation: slideDown 0.4s ease both;
        animation-delay: 0.1s;
      }
      .progress-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }
      .progress-meta span {
        font-size: 12px;
        font-weight: 700;
        color: var(--ink-mid);
      }
      .progress-meta .pct-badge {
        background: var(--sky);
        color: white;
        padding: 2px 10px;
        border-radius: var(--radius-pill);
        font-size: 11px;
        font-weight: 800;
      }
      .progress-track {
        background: rgba(255, 255, 255, 0.7);
        border-radius: var(--radius-pill);
        height: 14px;
        border: 2px solid rgba(91, 184, 245, 0.25);
        overflow: hidden;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
      }
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--sky) 0%, var(--grass) 100%);
        border-radius: var(--radius-pill);
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
      }
      .progress-fill::after {
        content: "⭐";
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        line-height: 1;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
      }

      /* ── Card ── */
      .card {
        background: var(--card-bg);
        border-radius: var(--radius-xl);
        padding: 32px 36px;
        margin-bottom: 18px;
        box-shadow: var(--shadow-md);
        border: 2.5px solid rgba(255, 255, 255, 0.9);
        animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
        position: relative;
        overflow: hidden;
      }
      .card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(
          90deg,
          var(--sky),
          var(--purple),
          var(--grass)
        );
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      }
      @keyframes cardIn {
        from {
          opacity: 0;
          transform: translateY(20px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      @keyframes popIn {
        from {
          opacity: 0;
          transform: scale(0.88);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ── Passage ── */
      .rubric-text {
        font-size: 13px;
        color: var(--ink-mid);
        font-weight: 700;
        margin-bottom: 18px;
        padding: 12px 16px 12px 20px;
        background: var(--sun-light);
        border-left: 5px solid var(--sun);
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
      }

      .slide-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: linear-gradient(135deg, var(--sky-light), #e8f7ff);
        color: var(--sky-dark);
        border: 2px solid rgba(91, 184, 245, 0.3);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 5px 14px;
        border-radius: var(--radius-pill);
        margin-bottom: 18px;
        padding-left: 30px !important;
        overflow: hidden;
        position: relative;
      }
      .slide-badge svg {
        width: 14px;
        height: 14px;
      }

      .audioDiv{
        cursor: pointer;
        background: var(--white);
        border-radius: 25%;
        padding: 5px 5px 2px;
        position: absolute;
        top: 0;
        left: 0;
      }

.audioDiv.activity_rubric {
    background: var(--rose-dark);
    position: relative;
    border-radius: var(--radius-pill);
    padding: 4px 15px 1px;
}

      .passage-text {
        font-size: 17px;
        line-height: 2;
        color: var(--ink);
        font-weight: 600;
      }

      .slide-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 28px;
        gap: 12px;
      }
      .slide-dots {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .slide-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--border);
        cursor: pointer;
        transition: all 0.2s;
      }
      .slide-dot.active {
        background: var(--sky);
        transform: scale(1.4);
        box-shadow: 0 0 0 3px rgba(91, 184, 245, 0.25);
      }

      /* ── Buttons ── */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 24px;
        border-radius: var(--radius-pill);
        font-family: "Nunito", sans-serif;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        border: none;
        transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
        letter-spacing: 0.01em;
        position: relative;
        text-decoration: none;
      }
      .btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
        filter: grayscale(0.3);
      }
      .btn:disabled.btn-ghost {
    opacity: 0;
}
      .btn:not(:disabled):active {
        transform: scale(0.95) !important;
      }

      .btn-primary {
        background: linear-gradient(
          135deg,
          var(--sky) 0%,
          var(--sky-dark) 100%
        );
        color: white;
        box-shadow:
          0 4px 0 var(--sky-dark),
          0 6px 16px rgba(91, 184, 245, 0.4);
      }
      .btn-primary:not(:disabled):hover {
        transform: translateY(-3px);
        box-shadow:
          0 7px 0 var(--sky-dark),
          0 10px 24px rgba(91, 184, 245, 0.45);
      }

      .btn-amber {
        background: linear-gradient(
          135deg,
          var(--sun) 0%,
          var(--sun-dark) 100%
        );
        color: white;
        box-shadow:
          0 4px 0 var(--sun-dark),
          0 6px 16px rgba(251, 191, 36, 0.4);
      }
      .btn-amber:not(:disabled):hover {
        transform: translateY(-3px);
        box-shadow:
          0 7px 0 var(--sun-dark),
          0 10px 24px rgba(251, 191, 36, 0.45);
      }

      .btn-sage {
        background: linear-gradient(
          135deg,
          var(--grass) 0%,
          var(--grass-dark) 100%
        );
        color: white;
        box-shadow:
          0 4px 0 var(--grass-dark),
          0 6px 16px rgba(52, 201, 122, 0.4);
      }
      .btn-sage:not(:disabled):hover {
        transform: translateY(-3px);
        box-shadow:
          0 7px 0 var(--grass-dark),
          0 10px 24px rgba(52, 201, 122, 0.45);
      }

      .btn-ghost {
        background: white;
        color: var(--ink-mid);
        border: 2.5px solid var(--border);
        box-shadow: 0 3px 0 var(--border);
      }
      .btn-ghost:not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 0 var(--border);
        border-color: var(--sky);
        color: var(--sky-dark);
      }

      .btn-rose {
        background: linear-gradient(135deg, #ff8fa3 0%, var(--rose-dark) 100%);
        color: white;
        box-shadow:
          0 4px 0 var(--rose-dark),
          0 6px 16px rgba(244, 99, 122, 0.35);
      }
      .btn-rose:not(:disabled):hover {
        transform: translateY(-3px);
        box-shadow:
          0 7px 0 var(--rose-dark),
          0 10px 24px rgba(244, 99, 122, 0.4);
      }

      /* ── Activity header ── */
      .activity-header {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 26px;
        padding-bottom: 20px;
        border-bottom: 2.5px dashed var(--border);
      }
      .activity-type-pill {
        flex-shrink: 0;
        padding: 5px 14px;
        border-radius: var(--radius-pill);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        border: 2px solid transparent;
      }
      .pill-mcq {
        background: var(--sky-light);
        color: var(--sky-dark);
        border-color: rgba(91, 184, 245, 0.3);
      }
      .pill-short {
        background: var(--sun-light);
        color: var(--sun-dark);
        border-color: rgba(251, 191, 36, 0.3);
      }
      .pill-long {
        background: var(--grass-light);
        color: var(--grass-dark);
        border-color: rgba(52, 201, 122, 0.3);
      }
      .activity-header h2 {
        font-family: "Baloo 2", cursive;
        font-size: 21px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.25;
      }

      /* ── Question block ── */
      .question-block {
        margin-bottom: 20px;
        padding: 20px 22px;
        border-radius: var(--radius-lg);
        background: var(--off-white);
        border: 2.5px solid var(--border);
        transition:
          border-color 0.25s,
          background 0.25s,
          box-shadow 0.25s;
        position: relative;
      }
      .question-block.correct {
        background: #f0fbf5;
        border-color: rgba(52, 201, 122, 0.5);
        box-shadow: 0 4px 16px rgba(52, 201, 122, 0.12);
      }
      .question-block.wrong {
        background: var(--rose-light);
        border-color: rgba(244, 99, 122, 0.4);
        box-shadow: 0 4px 16px rgba(244, 99, 122, 0.1);
      }
      .question-block.locked {
        opacity: 0.8;
      }

      .question-number {
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.15em;
        color: var(--ink-soft);
        text-transform: uppercase;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .q-num-bubble {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        background: var(--sky);
        color: white;
        border-radius: 50%;
        font-size: 11px;
        font-weight: 900;
        flex-shrink: 0;
      }
      .question-block.correct .q-num-bubble {
        background: var(--grass);
      }
      .question-block.wrong .q-num-bubble {
        background: var(--rose);
      }

      .question-text {
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.55;
        margin-bottom: 14px;
      }

      /* ── MCQ options ── */
      .options-list {
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
      .option-label {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: var(--radius-md);
        border: 2.5px solid var(--border);
        cursor: pointer;
        transition: all 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
        background: white;
        user-select: none;
        -webkit-user-select: none;
        font-weight: 700;
      }
      .option-label:hover:not(.disabled) {
        border-color: var(--sun);
        background: var(--sun-light);
        transform: translateX(4px);
        box-shadow: 0 3px 12px rgba(251, 191, 36, 0.2);
      }
      .option-label.selected {
        border-color: var(--sky);
        background: var(--sky-light);
        transform: translateX(4px);
        box-shadow: 0 3px 12px rgba(91, 184, 245, 0.25);
      }
      .option-label.correct-option {
        border-color: var(--grass);
        background: var(--grass-light);
        box-shadow: 0 3px 12px rgba(52, 201, 122, 0.2);
      }
      .option-label.wrong-option {
        border-color: var(--rose);
        background: var(--rose-light);
      }
      .option-label.disabled {
        cursor: not-allowed;
      }
      .option-label input[type="radio"] {
        display: none;
      }

      .option-key {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--border);
        border: 2px solid rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 900;
        color: var(--ink-mid);
        flex-shrink: 0;
        transition: all 0.18s;
        text-transform: uppercase;
      }
      .option-label.selected .option-key {
        background: var(--sky);
        color: white;
        border-color: var(--sky-dark);
      }
      .option-label.correct-option .option-key {
        background: var(--grass);
        color: white;
        border-color: var(--grass-dark);
      }
      .option-label.wrong-option .option-key {
        background: var(--rose);
        color: white;
        border-color: var(--rose-dark);
      }
      .option-text {
        font-size: 14px;
        color: var(--ink);
        line-height: 1.4;
        font-weight: 700;
      }

      /* ── Inputs ── */
      .answer-input {
        width: 100%;
        padding: 12px 16px;
        border-radius: var(--radius-md);
        border: 2.5px solid var(--border);
        background: white;
        font-family: "Nunito", sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        resize: vertical;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
        line-height: 1.6;
      }
      .answer-input:focus {
        outline: none;
        border-color: var(--sky);
        box-shadow: 0 0 0 4px rgba(91, 184, 245, 0.15);
      }
      .answer-input:disabled {
        background: var(--off-white);
        cursor: not-allowed;
      }
      .question-block.correct .answer-input {
        border-color: var(--grass);
        background: #f0fbf5;
      }
      .question-block.wrong .answer-input {
        border-color: var(--rose);
      }

      /* ── Fill-in-the-blank ── */
      .fill-sentence {
        font-size: 16px;
        font-weight: 700;
        line-height: 3.2;
        color: var(--ink);
      }
      .blank-input {
        display: inline-block;
        border: none;
        border-bottom: 4px solid var(--sun);
        background: rgba(251, 191, 36, 0.08);
        border-radius: 6px 6px 0 0;
        font-family: "Nunito", sans-serif;
        font-size: 15px;
        font-weight: 800;
        color: var(--sky-dark);
        width: 140px;
        padding: 4px 10px;
        text-align: center;
        outline: none;
        transition: all 0.2s;
        margin: 0 5px;
        vertical-align: middle;
      }
      .blank-input:focus {
        border-color: var(--sky);
        background: var(--sky-light);
        box-shadow: 0 2px 12px rgba(91, 184, 245, 0.2);
      }
      .blank-input.correct-blank {
        border-color: var(--grass);
        color: var(--grass-dark);
        background: var(--grass-light);
      }
      .blank-input.wrong-blank {
        border-color: var(--rose);
        color: var(--rose-dark);
        background: var(--rose-light);
      }
      .blank-input:disabled {
        cursor: not-allowed;
        opacity: 0.7;
      }

      /* ── Feedback ── */
      .feedback {
        margin-top: 12px;
        padding: 11px 16px;
        border-radius: var(--radius-md);
        font-size: 13px;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 10px;
        animation: bounceIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      @keyframes bounceIn {
        from {
          opacity: 0;
          transform: scale(0.8);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .feedback svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }
      .feedback-correct {
        background: var(--grass-light);
        color: var(--grass-dark);
        border: 2px solid rgba(52, 201, 122, 0.35);
      }
      .feedback-wrong {
        background: var(--rose-light);
        color: var(--rose-dark);
        border: 2px solid rgba(244, 99, 122, 0.3);
      }

      .attempt-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 10px;
        color: var(--ink-soft);
        background: white;
        border: 2px solid var(--border);
        padding: 2px 8px;
        border-radius: var(--radius-pill);
        font-weight: 800;
        margin-left: 6px;
      }

      /* ── Action bar ── */
      .action-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 28px;
        padding-top: 22px;
        border-top: 2.5px dashed var(--border);
      }
      .action-bar .spacer {
        flex: 1;
      }

      /* ── Score screen ── */
      .score-screen {
        text-align: center;
        padding: 26px 20px 26px;
      }

      .score-trophy {
        display: none !important;
        font-size: 64px;
        line-height: 1;
        margin-bottom: 4px;
        display: block;
        animation: trophyBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
      }
      @keyframes trophyBounce {
        from {
          opacity: 0;
          transform: scale(0.4) rotate(-15deg);
        }
        to {
          opacity: 1;
          transform: scale(1) rotate(0deg);
        }
      }

      .score-circle {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin: 0 auto 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .score-circle svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
      }
      .score-inner {
        position: relative;
        z-index: 1;
        text-align: center;
      }
      .score-number {
        font-family: "Baloo 2", cursive;
        font-size: 40px;
        font-weight: 800;
        color: var(--ink);
        line-height: 1;
      }
      .score-label {
        font-size: 11px;
        color: var(--ink-soft);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
      }

      .score-screen h2 {
        font-family: "Baloo 2", cursive;
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 8px;
      }
      .score-screen > p {
        font-size: 15px;
        font-weight: 600;
        color: var(--ink-mid);
        max-width: 320px;
        margin: 0 auto 12px;
        line-height: 1.6;
      }

      /* Stars row */
      .stars-row {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 12px;
        animation: slideDown 0.4s ease 0.3s both;
      }
      .star {
        font-size: 32px;
        animation: starPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      .star:nth-child(1) {
        animation-delay: 0.2s;
      }
      .star:nth-child(2) {
        animation-delay: 0.35s;
      }
      .star:nth-child(3) {
        animation-delay: 0.5s;
      }
      @keyframes starPop {
        from {
          opacity: 0;
          transform: scale(0) rotate(-30deg);
        }
        to {
          opacity: 1;
          transform: scale(1) rotate(0);
        }
      }

      .act-breakdown {
        width: 100%;
        max-width: 480px;
        margin: 0 auto 0;
        text-align: left;
      }
      .act-breakdown-title {
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink-soft);
        text-align: center;
        margin-bottom: 14px;
      }
      .act-row {
        margin-bottom: 14px;
      }
      .act-row-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
      }
      .act-pill {
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: var(--radius-pill);
        flex-shrink: 0;
        border: 2px solid transparent;
      }
      .act-row-title {
        font-size: 13px;
        color: var(--ink-mid);
        font-weight: 700;
      }
      .act-row-bar-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .act-bar-track {
        flex: 1;
        height: 10px;
        background: var(--border);
        border-radius: var(--radius-pill);
        overflow: hidden;
      }
      .act-bar-fill {
        height: 100%;
        border-radius: var(--radius-pill);
      }
      .act-frac {
        font-size: 13px;
        font-weight: 800;
        color: var(--ink);
        min-width: 34px;
        text-align: right;
      }

      .total-score-row {
        display: flex;
        justify-content: center;
        gap: 0;
        margin-top: 20px;
        background: var(--off-white);
        border: 2.5px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }
      .score-stat {
        flex: 1;
        text-align: center;
        padding: 10px 12px;
      }
      .score-stat:not(:last-child) {
        border-right: 2px solid var(--border);
      }
      .score-stat .val {
        font-family: "Baloo 2", cursive;
        font-size: 22px;
        font-weight: 800;
        color: var(--ink);
        line-height: 1;
      }
      .score-stat .lbl {
        font-size: 9px;
        font-weight: 800;
        color: var(--ink-soft);
        margin-top: 4px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      /* ── Loading ── */
      .loading-state {
        text-align: center;
        padding: 80px 20px;
        font-family: "Baloo 2", cursive;
        font-size: 22px;
        font-weight: 700;
        color: var(--sky-dark);
      }
      .spinner-wrap {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
      .spinner-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        animation: dotBounce 1s ease-in-out infinite;
      }
      .spinner-dot:nth-child(1) {
        background: var(--sky);
        animation-delay: 0s;
      }
      .spinner-dot:nth-child(2) {
        background: var(--grass);
        animation-delay: 0.15s;
      }
      .spinner-dot:nth-child(3) {
        background: var(--sun);
        animation-delay: 0.3s;
      }
      @keyframes dotBounce {
        0%,
        80%,
        100% {
          transform: scale(0.6);
          opacity: 0.5;
        }
        40% {
          transform: scale(1.2);
          opacity: 1;
        }
      }

      @media (max-width: 580px) {
        .card {
          padding: 22px 18px;
        }
        .action-bar {
          flex-direction: column;
          align-items: stretch;
        }
        .action-bar .btn {
          justify-content: center;
        }
        .action-bar .spacer {
          display: none;
        }
      }