:root{
      --bg: #f6f7ff;
      --card: #ffffff;
      --text: #0f172a;
      --muted: rgba(15,23,42,.72);
      --border: rgba(15,23,42,.12);
      --primary: #111827;
      --accent: #111827;
      --shadow: 0 18px 50px rgba(2,6,23,.12);
      --radius: 18px;
      --na-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
      /* Standalone “forside-ramme” */
      --frameHeight: 920px;
      --frameWidth: 420px;
      --frameRadius: 22px;
    }

    body{
      margin:0;
      font-family: var(--na-font);
      background: radial-gradient(1400px 420px at 50% 0%, rgba(0,0,0,.04), transparent), var(--bg);
      color: var(--text);
    }

    /* Standalone-only blocks should not show in embeds */
    .belowHint{ display: none; }

    /* Standalone: match forside-wrapper (telefonramme + hint under) */
    body.standaloneMode{
      background: transparent;
      padding-top: 16px;
      padding-bottom: 18px;
    }
    body.standaloneMode .phoneFrame{
      width: min(860px, 96vw);
      height: var(--frameHeight);
      max-height: var(--frameHeight);
      margin: 0 auto 10px auto; /* litt luft under ramma */
      overflow: auto; /* scroll inne i ramma (som iframe på forsiden) */
      border-radius: var(--frameRadius);
      box-shadow: var(--shadow);
      border: 1px solid rgba(15,23,42,.12);
      background: #fff;
    }
    /* Standalone: opt-out av intern scroll i ramma (bruk ?plain=1 eller ?frame=0). */
    body.standaloneMode.plainScroll .phoneFrame{
      height: auto;
      max-height: none;
      overflow: visible;
    }
    body.standaloneMode #quizbox{
      width: 100%;
      margin: 0;
      border-radius: 0;
      box-shadow: none;
      border: 0;
    }
    /* Standalone-ramma er smal (420px), men viewport kan være bred.
       Tving derfor “mobil” layout inne i ramma, slik som i iframe på forsiden. */
    body.standaloneMode #quizbox .row{ flex-direction: column; }
    /* Embed: tving “stacked” layout ved brede containere (Elementor) via ?stack=1 */
    body.stackMode #quizbox #startPanel .row{ flex-direction: column; }
    body.stackMode #quizbox #startPanel #carouselArea{
      width: min(560px, 100%);
      margin-left: auto;
      margin-right: auto;
      position: relative;
    }
    body.stackMode.demoMode #quizbox #startPanel #carouselArea .thumbWrap{
      width: min(560px, 100%) !important;
      margin-left: auto;
      margin-right: auto;
    }
    body.stackMode #quizbox .thumbCaption{
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
    }
    /* Karusell: midtstill bildet og hold pilene tett på bildet (ikke på ramme-kantene) */
    body.standaloneMode #quizbox #startPanel #carouselArea{
      width: min(520px, 100%);
      margin-left: auto;
      margin-right: auto;
      position: relative; /* piler posisjoneres mot denne boksen */
    }
    /* I demo-modus er thumbWrap hardkodet til 320px via viewport-media. I standalone (bred viewport)
       må vi derfor overstyre og midtstille/skalere karusellen eksplisitt. */
    body.standaloneMode.demoMode #quizbox #startPanel #carouselArea{
      width: min(560px, 100%);
      margin-left: auto;
      margin-right: auto;
    }
    body.standaloneMode.demoMode #quizbox #startPanel #carouselArea .thumbWrap{
      width: min(560px, 100%) !important;
      margin-left: auto;
      margin-right: auto;
    }
    body.standaloneMode.demoMode #quizbox #startPanel #carouselArea .carouselArrow{
      /* sørg for at pilene ligger tett på selve bildet */
      left: 8px;
      right: 8px;
    }
    body.standaloneMode.demoMode #quizbox #startPanel #carouselArea .carouselPrev{ left: 8px; right: auto; }
    body.standaloneMode.demoMode #quizbox #startPanel #carouselArea .carouselNext{ right: 8px; left: auto; }
    body.standaloneMode #quizbox .thumbWrap{
      width: 100%;
    }
    body.standaloneMode #quizbox .frontHeadline{
      width: 100%;
    }
    body.standaloneMode #quizbox .thumbCaption{
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
    }
    body.standaloneMode .belowHint{
      display: block;
      width: min(860px, 96vw);
      margin: 10px auto 0 auto;
      padding-bottom: 26px; /* litt mer luft under linjen */
      font-family: var(--na-font);
      font-size: 12px;
      color: rgba(15,23,42,.70);
      text-align: center;
    }
    body.standaloneMode .belowHint a{
      color: inherit;
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    #quizbox #loadingSub{
      white-space: pre-line;
    }

    #quizbox{
      width: min(980px, 96vw);
      margin: 18px auto;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    /* Mobil: litt luft på sidene slik at boksen ikke går helt ut i kanten */
    @media (max-width: 520px){
      body{
        padding-left: 10px;
        padding-right: 10px;
      }
      #quizbox{
        width: 100%;
        margin: 14px auto;
      }
    }

    /* Shield against external theme CSS (Elementor/WordPress) */
    #quizbox, #quizbox *{
      box-sizing: border-box;
    }
    #quizbox{
      color: var(--text) !important;
      background: var(--card) !important;
    }
    #quizbox a, #quizbox a:visited{
      color: inherit;
    }
    #quizbox .naWordmark{
      color: #000 !important;
      -webkit-text-fill-color: #000 !important; /* Safari/iOS theme overrides */
    }

    #quizbox h3{
      margin: 0;
      padding: 14px 14px 10px;
      text-align:center;
      font-weight: 1000;
      letter-spacing: -0.02em;
      font-size: 28px;
      background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,0)) !important;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
    }
    #quizbox .homeTitleLink{
      text-decoration: none;
      display: inline-block;
      cursor: pointer;
      border-radius: 12px;
    }
    #quizbox .homeTitleLink:focus-visible{
      outline: 3px solid rgba(99,102,241,.55);
      outline-offset: 4px;
    }
    #quizbox h3 .sub{
      display:block;
      margin-top: 4px;
      font-size: 12px;
      letter-spacing: .6px;
      text-transform: uppercase;
      opacity: .72;
      font-weight: 900;
      color: rgba(15,23,42,.70) !important;
      -webkit-text-fill-color: rgba(15,23,42,.70) !important;
    }

    .panel{ padding: 16px; }
    .hidden{ display:none !important; }

    .center{ text-align:center; }
    .small{ font-size: 13px; color: var(--muted); }

    #quizbox .eternalBox{
      margin: 26px auto 0 auto;
      max-width: 720px;
      text-align: center;
      padding: 14px 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(99,102,241,.06);
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      font-size: 13px;
      line-height: 1.45;
      position: relative;
    }
    /* Skillelinje + litt luft over boksen */
    #quizbox .eternalBox::before{
      content:"";
      position:absolute;
      left: 10px;
      right: 10px;
      top: -14px;
      height: 1px;
      background: rgba(15,23,42,.14);
    }
    #quizbox .eternalTitle{
      font-weight: 1000;
      font-size: 15px;
      margin: 0 0 4px 0;
      letter-spacing: -.01em;
    }
    #quizbox .eternalText{
      margin: 0 auto;
      max-width: 660px;
      color: rgba(15,23,42,.80) !important;
      -webkit-text-fill-color: rgba(15,23,42,.80) !important;
      font-weight: 800;
    }

    .card{
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px;
      background: rgba(255,255,255,.95);
    }

    .row{ display:flex; gap: 14px; }
    .col{ flex:1; min-width:0; }
    @media (max-width: 760px){
      .row{ flex-direction: column; }
    }

    #quizbox .thumbWrap{
      width: 220px;
      aspect-ratio: 1/1;
      border-radius: 16px;
      overflow:hidden;
      position: relative;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.03);
      flex: 0 0 auto;
    }
    /* Demo: ekte nyhetsbilder er ofte brede – vis dem i bred ramme */
    body.demoMode #quizbox .thumbWrap{
      width: 320px !important;
      aspect-ratio: 16 / 9 !important;
      border-radius: 16px;
    }
    #quizbox #questionPanel .qThumbWrap{
      width: min(520px, 100%);
      margin-left: auto;
      margin-right: auto;
    }
    body.demoMode #quizbox #questionPanel .qThumbWrap{
      width: min(620px, 100%) !important;
      aspect-ratio: 16 / 9 !important;
    }
    @media (max-width: 760px){
      #quizbox .thumbWrap{
        width: min(360px, 100%);
        margin-left: auto;
        margin-right: auto;
      }
    }
    @media (max-width: 760px){
      body.demoMode #quizbox .thumbWrap{
        width: min(420px, 100%) !important;
        aspect-ratio: 16 / 9 !important;
      }
    }
    /* Ekstern CSS kan overstyre img-height på mobil; derfor ekstra spesifisitet */
    #quizbox .thumbWrap img{
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      min-width: 100% !important;
      min-height: 100% !important;
      object-fit: cover !important;
      display:block !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      opacity: 1;
      transition: opacity .18s ease;
    }

    #quizbox .thumbLink{
      display:block;
      width:100%;
      height:100%;
      text-decoration:none;
      color: inherit;
    }

    #quizbox .thumbCol{
      flex: 0 0 auto;
    }
    #quizbox .frontHeadline{
      width: min(720px, 100%);
      margin: 0 auto 10px auto;
      text-align: center;
      max-width: 100%;
      box-sizing: border-box;
      padding: 0 6px;
    }
    body.demoMode #quizbox .frontHeadline{ width: min(720px, 100%); }
    @media (max-width: 760px){
      #quizbox .frontHeadline{
        width: min(420px, 100%);
      }
    }
    #quizbox .frontHeadline a{
      display:block;
      max-width: 100%;
      text-decoration: none !important;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      font-weight: 1000;
      letter-spacing: -.02em;
      line-height: 1.05;
      font-size: 34px;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none !important;
      -webkit-hyphens: none !important;
      -ms-hyphens: none !important;
    }
    @media (max-width: 520px){
      #quizbox .frontHeadline a{ font-size: 26px; line-height: 1.08; }
    }
    @media (max-width: 380px){
      #quizbox .frontHeadline a{ font-size: 22px; line-height: 1.1; }
    }
    #quizbox .thumbCaption{
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted) !important;
      -webkit-text-fill-color: var(--muted) !important;
      font-weight: 500;
      line-height: 1.35;
      text-align: center;
      max-width: 320px;
    }
    #quizbox .thumbCaption strong{
      font-weight: 950;
    }

    /* Frontpage demo: karusell/loop + stor rund startknapp + pitchtekst */
    body.demoMode #quizbox #startPanel .summaryTitle,
    body.demoMode #quizbox #startPanel #articleSummary,
    body.demoMode #quizbox #startPanel #articleSummaryMeta,
    body.demoMode #quizbox #startPanel #safetyBox,
    body.demoMode #quizbox #startPanel .readMoreRow,
    body.demoMode #quizbox #startPanel .col .articleTitle,
    body.demoMode #quizbox #startPanel #qGenRow{
      display:none !important;
    }
    body.demoMode #quizbox #startPanel .btnRow{
      justify-content:center;
    }
    body.demoMode #quizbox #anotherBtn{
      display:none !important;
    }
    body.demoMode #quizbox #startBtn{
      width: 112px !important;
      height: 112px !important;
      padding: 0 !important;
      border-radius: 999px !important;
      background: #0b0f19 !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      border: 2px solid rgba(255,255,255,.12) !important;
      box-shadow: 0 18px 44px rgba(2,6,23,.25);
      font-weight: 1000 !important;
      font-size: 20px !important;
      letter-spacing: .2px;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1 !important;
    }
    body.demoMode #quizbox #startBtn:active{
      transform: translateY(1px);
    }
    #quizbox .frontPitch{
      margin-top: 14px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.02);
      text-align: center;
    }
    #quizbox .frontPitchTitle{
      font-weight: 1000;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      letter-spacing: -.01em;
      font-size: 14px;
    }
    #quizbox .frontPitchText{
      margin-top: 6px;
      font-size: 13px;
      color: rgba(15,23,42,.78) !important;
      -webkit-text-fill-color: rgba(15,23,42,.78) !important;
      font-weight: 850;
      line-height: 1.45;
    }

    /* Karusell-piler (kun i demo) */
    #quizbox .carouselArrow{
      display: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.92);
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      cursor: pointer;
      z-index: 5;
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
      align-items: center;
      justify-content: center;
      padding: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }
    #quizbox .carouselArrow:hover{ background: rgba(255,255,255,.98); }
    #quizbox .carouselArrow:active{ transform: translateY(-50%) scale(0.96); }
    body.demoMode #quizbox #startPanel .thumbCol .carouselArrow{
      display: flex !important;
    }
    body.demoMode #quizbox #startPanel .thumbCol{ position: relative; }
    #quizbox .carouselPrev{ left: 8px; }
    #quizbox .carouselNext{ right: 8px; }

    /* Enkel venteanimasjon mens thumbnail laster */
    @keyframes thumbSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
    @keyframes thumbShimmer {
      0% { background-position: -220px 0; }
      100% { background-position: 220px 0; }
    }
    #quizbox .thumbWrap.isLoading::after,
    #quizbox .newsOnlyThumb.isLoading::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 40%,
        rgba(255,255,255,0) 80%);
      background-size: 220px 100%;
      animation: thumbShimmer 900ms ease-in-out infinite;
      pointer-events:none;
    }
    #quizbox .thumbWrap.isLoading::before,
    #quizbox .newsOnlyThumb.isLoading::before{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 3px solid rgba(15,23,42,.14);
      border-top-color: rgba(15,23,42,.55);
      animation: thumbSpin 900ms linear infinite;
      z-index: 2;
      pointer-events:none;
    }
    #quizbox .thumbWrap.isLoading img,
    #quizbox .newsOnlyThumb.isLoading img{
      opacity: 0;
    }

    #quizbox .endThumbWrap{
      margin: 10px auto 0 auto;
      width: min(520px, 100%);
      aspect-ratio: 16 / 9;
      border-radius: 16px;
      overflow:hidden;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.03);
      position: relative;
    }
    #quizbox .endThumbWrap img{
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display:block !important;
    }
    #quizbox .endThumbWrap.isLoading::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 40%,
        rgba(255,255,255,0) 80%);
      background-size: 220px 100%;
      animation: thumbShimmer 900ms ease-in-out infinite;
      pointer-events:none;
    }
    #quizbox .endThumbWrap.isLoading::before{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 3px solid rgba(15,23,42,.14);
      border-top-color: rgba(15,23,42,.55);
      animation: thumbSpin 900ms linear infinite;
      z-index: 2;
      pointer-events:none;
    }
    #quizbox .endThumbWrap.isLoading img{ opacity: 0; }
    #quizbox .endThumbText{ margin-top: 8px; font-weight: 500; }
    #quizbox .endThumbText strong{ font-weight: 950; }

    .sourcePill{
      display:inline-block;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .3px;
      color: rgba(0,0,0,.75);
      background: rgba(255,255,255,.8);
    }
    .sourcePill a{ color: inherit; text-decoration:none; }

    /* Midtstill kilde-pill (matcher ellers midtstilt layout) */
    #quizbox .sourcePill{
      display: table;
      margin: 0 auto;
      text-align: center;
    }
    #quizbox .sourcePill a{
      display:block;
      text-align:center;
    }

    .articleTitle{
      margin: 10px 0 8px 0;
      font-size: 18px;
      font-weight: 1000;
      letter-spacing: -.01em;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .articleTitle a{ color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.18); }

    #quizbox .summaryTitle{
      margin: 12px 0 10px 0;
      font-size: 12px;
      font-weight: 1000;
      letter-spacing: .6px;
      text-transform: uppercase;
      opacity: .85;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(15,23,42,.86) !important;
      -webkit-text-fill-color: rgba(15,23,42,.86) !important;
    }
    #quizbox .summaryTitle::before{
      content:"";
      font-size: 11px;
      font-weight: 1000;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.12);
      background: rgba(0,0,0,.05);
      color: rgba(15,23,42,.86) !important;
      -webkit-text-fill-color: rgba(15,23,42,.86) !important;
      display:none;
    }

    #quizbox .articleSummary{ color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; font-size: 14px; line-height: 1.58; }
    .summaryP{ margin: 0 0 10px 0; }
    .summaryP:last-child{ margin-bottom: 0; }

    #quizbox .summaryMeta{ margin-top: 8px; font-size: 12px; color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; }

    /* Skille og luft mellom sammendrag og selve KvIzen (spørsmål) */
    #quizbox #qSummaryWrap{
      margin-top: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    #quizbox #qText{
      margin-top: 12px;
    }

    .readMoreRow{ margin-top: 10px; text-align:left; }
    .readMoreRow a{
      display:inline-block;
      font-weight: 1000;
      letter-spacing: .4px;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.14);
      background: rgba(0,0,0,.05);
      color: var(--text);
      text-decoration:none;
    }
    .readMoreNote{ margin-top: 6px; font-size: 12px; color: var(--muted); }

    #quizbox .safetyBox{
      margin-top: 10px;
      border: 1px solid rgba(239,68,68,.28);
      background: rgba(239,68,68,.07);
      border-radius: 14px;
      padding: 10px 12px;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
    }
    #quizbox .safetyTitle{
      font-weight: 1000;
      letter-spacing: -.01em;
      margin-bottom: 2px;
    }
    #quizbox .safetyText{
      font-size: 13px;
      color: rgba(15,23,42,.80) !important;
      -webkit-text-fill-color: rgba(15,23,42,.80) !important;
      line-height: 1.35;
    }

    .btnRow{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; justify-content:center; }
    /* Shield buttons against external theme CSS */
    #quizbox .btn,
    .modalBackdrop .btn{
      appearance:none;
      border: 1px solid rgba(0,0,0,.14) !important;
      background: #fff !important;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      padding: 10px 14px;
      border-radius: 12px;
      font-weight: 950;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      line-height: 1;
      transition: transform .08s ease, filter .2s ease;
    }
    #quizbox .btn:hover,
    .modalBackdrop .btn:hover{ transform: translateY(-1px); }
    #quizbox .btn:disabled,
    .modalBackdrop .btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
    #quizbox .btn.primary,
    .modalBackdrop .btn.primary{
      background: #111827 !important;
      border-color: rgba(17,24,39,.35) !important;
      color:#fff !important;
      -webkit-text-fill-color: #fff !important;
    }
    #quizbox .btn.danger,
    .modalBackdrop .btn.danger{
      background: rgba(239,68,68,.10) !important;
      border-color: rgba(239,68,68,.35) !important;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
    }
    #quizbox .btn.danger:hover,
    .modalBackdrop .btn.danger:hover{
      background: rgba(220,38,38,.18) !important;
      border-color: rgba(239,68,68,.75) !important;
    }
    #quizbox .btn.danger.small,
    .modalBackdrop .btn.danger.small{
      padding: 8px 10px;
      border-radius: 12px;
      font-size: 13px;
    }

    .qaArea{
      margin-top: 14px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.02);
      text-align:center;
    }
    .qHeader{ display:flex; justify-content:space-between; gap: 10px; margin-bottom: 10px; font-weight: 900; }
    .qText{ font-size: 18px; font-weight: 1000; margin: 0 0 12px 0; }
    .qTextRow{
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .qTextRow .qText{ margin: 0; }
    .choices{ display:flex; flex-direction:column; gap: 10px; align-items:center; }
    .choiceRow{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    /* Shield choice buttons against external theme CSS */
    #quizbox .choiceBtn{
      width: fit-content;
      max-width: min(720px, 100%);
      padding: 12px 14px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.14) !important;
      background: #fff !important;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      font-weight: 900;
      font-size: 16px;
      cursor:pointer;
      overflow-wrap:anywhere;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
      min-height: 44px; /* stabil vertikal sentering */
    }
    #quizbox .choiceSpeakBtn,
    #quizbox .speakMiniBtn{
      appearance: none;
      border: 1px solid rgba(0,0,0,.14) !important;
      background: #fff !important;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      border-radius: 999px;
      min-width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: 900;
    }
    #quizbox .choiceSpeakBtn:disabled,
    #quizbox .speakMiniBtn:disabled{
      opacity: .55;
      cursor: not-allowed;
    }
    #quizbox .qGenInline{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    #quizbox .qGenSpinner{
      width: 13px;
      height: 13px;
      border-radius: 50%;
      border: 2px solid rgba(15,23,42,.20);
      border-top-color: rgba(15,23,42,.85);
      animation: kvirSpin .7s linear infinite;
      flex: 0 0 auto;
    }
    #quizbox .qGenSpinner.hidden{ display:none !important; }
    #quizbox #beginRow #beginBtnSpinner{
      margin-left: -4px; /* litt tettere på knappen */
      margin-right: 2px;
      transform: translateY(1px);
    }
    .summaryTtsRow{
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .summaryTtsRow input[type="range"]{
      width: min(240px, 58vw);
      accent-color: #111827;
    }
    .summaryTtsHint{
      font-size: 11px;
      color: rgba(15,23,42,.65);
      font-weight: 900;
      min-width: 42px;
      text-align: right;
    }
    #quizbox .choiceBtn:disabled{ opacity: 1; cursor:not-allowed; }
    #quizbox .choiceBtn.correct{
      background: rgba(34,197,94,.16) !important;
      border-color: rgba(34,197,94,.35) !important;
    }
    #quizbox .choiceBtn.wrong{
      background: rgba(239,68,68,.12) !important;
      border-color: rgba(239,68,68,.28) !important;
    }

    .explain{ margin-top: 12px; font-size: 14px; color: rgba(0,0,0,.75); font-weight: 800; text-align:center; }

    /* Letter loaders (match Nettavisen-feel) */
    .naWordmark{
      font-family: var(--na-font);
      font-weight: 950;
      letter-spacing: -0.02em;
      line-height: 1;
      color: #000;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    .naLoader{ margin-top: 6px; }
    .naLine1{ font-size: 44px; }
    .naLine2{ font-size: 34px; margin-top: 10px; opacity: .92; }
    .naChar{
      display:inline-block;
      animation: naWave 1.05s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes naWave{
      0%,100%{ transform: translateY(0); opacity: .86; }
      50%{ transform: translateY(-5px); opacity: 1; }
    }

    #quizbox .newsOnlyThumb{
      width: 140px;
      height: auto;
      aspect-ratio: 1 / 1;
      margin: 12px auto 0;
      border-radius: 14px;
      overflow:hidden;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.03);
      position: relative;
    }
    body.demoMode #quizbox .newsOnlyThumb{
      width: 200px !important;
      aspect-ratio: 16 / 9 !important;
      border-radius: 14px;
    }

    /* Sent, hard override i demo for å vinne mot evt. tema/inline-stiler */
    body.demoMode #quizbox #startPanel .thumbWrap{
      aspect-ratio: 16 / 9 !important;
    }
    #quizbox .newsOnlyThumb img{
      width:100% !important;
      height:100% !important;
      max-width: 100% !important;
      min-width: 100% !important;
      min-height: 100% !important;
      object-fit:cover !important;
      display:block !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      opacity: 1;
      transition: opacity .18s ease;
    }
    /* Unngå samme bilde to steder: skjul mini-bildet når vi “lager spørsmål…” */
    #quizbox #qGenRow .newsOnlyThumb{ display:none !important; }

    /* nk-bildene er kvadratiske og kan ha “innebygd” luft; zoom litt inn så ramma ikke ser for stor ut */
    #quizbox img[data-news-decor="1"]{
      transform: scale(1.12);
      transform-origin: center center;
    }
    /* Demo: ikke zoom inn ekte artikkelbilder */
    body.demoMode #quizbox img[data-news-decor="1"]{
      transform: none !important;
    }

    /* Pilot splash */
    .pilotSplash{
      position: fixed; inset: 0;
      background: radial-gradient(900px 420px at 50% 0%, rgba(0,0,0,.10), rgba(0,0,0,.70));
      display:flex; align-items:center; justify-content:center;
      z-index: 99999;
      padding: 16px;
    }
    .pilotSplash.hidden{ display:none; }
    .pilotCard{
      width: min(560px, 92vw);
      background: rgba(255,255,255,.94);
      border-radius: 18px;
      padding: 18px 18px 14px;
      box-shadow: 0 30px 90px rgba(0,0,0,.25);
      text-align:center;
      max-height: calc(100dvh - 32px);
      overflow: auto;
    }
    /* Buttons in pilot splash live outside #quizbox, so shield them too */
    .pilotSplash .btnRow{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; justify-content:center; }
    .pilotSplash .btn{
      appearance:none;
      border: 1px solid rgba(0,0,0,.14) !important;
      background: #fff !important;
      color: rgba(15,23,42,1) !important;
      -webkit-text-fill-color: rgba(15,23,42,1) !important;
      padding: 10px 14px;
      border-radius: 12px;
      font-weight: 950;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      line-height: 1;
      text-decoration: none !important;
      transition: transform .08s ease, filter .2s ease;
    }
    .pilotSplash .btn:hover{ transform: translateY(-1px); }
    .pilotSplash .btn.primary{
      background: #111827 !important;
      border-color: rgba(17,24,39,.35) !important;
      color:#fff !important;
      -webkit-text-fill-color: #fff !important;
    }
    .pilotKicker{
      display:inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.10);
      color: rgba(0,0,0,.85);
      font: 900 12px/1 var(--na-font);
      letter-spacing: .6px;
      text-transform: uppercase;
    }
    .pilotTitle{ font-size: 44px; margin-top: 10px; }
    .pilotSub{ font-size: 28px; margin-top: 6px; opacity: .92; }
    .pilotBody{ margin-top: 10px; font-size: 13px; color: rgba(0,0,0,.70); font-weight: 800; line-height: 1.35; }
    .pilotHint{ margin-top: 12px; font: 900 13px/1 var(--na-font); color: rgba(0,0,0,.62); }

    /* Bonus mode toggle */
    #quizbox .toggleRow{
      margin-top: 14px;
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.02);
      text-align: left;
    }
    #quizbox .toggleRow label{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      cursor:pointer;
    }
    #quizbox .toggleRow input[type="checkbox"]{
      transform: translateY(2px);
      width: 18px;
      height: 18px;
      accent-color: #111827;
    }
    #quizbox .toggleTitle{
      font-weight: 1000;
      letter-spacing: -.01em;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
    }
    #quizbox .toggleText{
      margin-top: 4px;
      font-size: 13px;
      color: var(--muted) !important;
      -webkit-text-fill-color: var(--muted) !important;
      font-weight: 800;
      line-height: 1.35;
    }

    /* Badges (Nettavisen-pilot) */
    #quizbox .topMetaRow{
      display:flex;
      gap: 8px;
      justify-content:center;
      align-items:center;
      padding: 10px 14px 12px;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      background: #fff !important;
      border-bottom: 1px solid var(--border);
    }
    #quizbox .topMetaRowExtra{
      display: flex;
      gap: 8px;
      align-items: center;
      flex: 0 0 auto;
    }
    @media (max-width: 520px){
      #quizbox .topMetaRow{
        flex-wrap: wrap;
      }
      #quizbox .topMetaRowExtra{
        flex-basis: 100%;
        justify-content: center;
        padding-top: 4px;
      }
    }
    #quizbox .topMetaPill{
      flex: 0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border) !important;
      background: rgba(0,0,0,.03) !important;
      color: rgba(15,23,42,.80) !important;
      -webkit-text-fill-color: rgba(15,23,42,.80) !important;
      font-weight: 950;
      font-size: 12px;
      letter-spacing: .3px;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
    }
    #quizbox .topMetaPill strong{
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
    }
    #quizbox .kvirFlowerPill{
      position: relative;
      padding: 6px 12px;
      min-width: 54px;
      --kvirBg: rgba(0,0,0,.03);
      background: var(--kvirBg) !important;
    }
    /* Farge-skala (byttes hver ~50 poeng) */
    #quizbox .kvirFlowerPill.kvirTier0{ --kvirBg: rgba(0,0,0,.03); }
    #quizbox .kvirFlowerPill.kvirTier1{ --kvirBg: rgba(34,197,94,.18); }
    #quizbox .kvirFlowerPill.kvirTier2{ --kvirBg: rgba(59,130,246,.18); }
    #quizbox .kvirFlowerPill.kvirTier3{ --kvirBg: rgba(168,85,247,.18); }
    #quizbox .kvirFlowerPill.kvirTier4{ --kvirBg: rgba(245,158,11,.20); }
    #quizbox .kvirFlowerPill.kvirTier5{ --kvirBg: rgba(244,63,94,.18); }
    #quizbox .kvirFlowerPill.kvirTier6{ --kvirBg: rgba(17,24,39,.12); }
    #quizbox .kvirFlowerIcon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1;
      margin-right: 8px;
      opacity: .92;
      transform: translateY(1px);
      flex: 0 0 auto;
    }
    #quizbox .kvirFlowerPoints{
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      padding: 3px 7px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.14);
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(6px);
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      font-weight: 1000;
      line-height: 1;
    }
    #quizbox .kvirFlowerPill.isDisabled{
      opacity: .55;
      cursor: not-allowed;
    }

    /* Feed/kategorier (ikonrekke) */
    #quizbox .feedIconRow{
      display:flex;
      gap: 8px;
      justify-content:center;
      align-items:center;
      padding: 10px 14px 6px;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      background: #fff !important;
      border-bottom: 0;
    }
    #quizbox .feedActionRow{
      display:flex;
      gap: 8px;
      justify-content:center;
      align-items:center;
      padding: 0 14px 12px;
      background: #fff !important;
      border-bottom: 1px solid var(--border);
    }
    #quizbox .feedIconBtn{
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 2px solid rgba(15,23,42,.22);
      background: rgba(0,0,0,.02);
      color: rgba(15,23,42,.80);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor: pointer;
      user-select:none;
      font-size: 18px;
      line-height: 1;
      transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
    }
    #quizbox .feedIconBtn:hover{ transform: translateY(-1px); }
    #quizbox .feedIconBtn:active{ transform: translateY(0px); }
    #quizbox .feedIconBtn.isActive{
      border-color: rgba(29,78,216,.55);
      background: rgba(29,78,216,.10);
    }
    #quizbox .feedRefreshBtn{
      width: auto;
      min-width: 66px;
      padding: 0 12px;
      font-size: 16px;
      font-weight: 1000;
      letter-spacing: .2px;
    }
    #quizbox .feedActionBtn{
      width: auto;
      min-width: 86px;
      padding: 0 12px;
      font-size: 15px;
      font-weight: 1000;
      letter-spacing: .2px;
    }
    #quizbox .feedRefreshBtn.isLoading{
      opacity: .72;
      cursor: progress;
      pointer-events: none;
      animation: feedRefreshSpin 900ms linear infinite;
    }
    @keyframes feedRefreshSpin{
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Bytt kategori-modal: midtstill innhold */
    #quizbox #feedSwitchModal .modalTitle,
    #quizbox #feedSwitchModal .modalBody,
    #feedSwitchModal .modalTitle,
    #feedSwitchModal .modalBody{
      text-align: center;
    }
    #quizbox #feedSwitchModal #feedSwitchTagRow,
    #feedSwitchModal #feedSwitchTagRow{
      text-align: left;
    }
    #quizbox #feedSwitchModal #feedSwitchTagInput,
    #feedSwitchModal #feedSwitchTagInput{
      text-align: center;
      font-size: 16px;
      font-weight: 900;
    }

    /* MEO/ROA */
    #quizbox .gmoRow{
      display:flex;
      gap: 8px;
      justify-content:center;
      align-items:center;
      padding: 10px 14px 12px;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      background: #fff !important;
      border-bottom: 1px solid var(--border);
    }
    #quizbox #startPanel .gmoRow{
      background: transparent !important;
      border-bottom: 0;
      padding: 8px 0 6px;
      justify-content: flex-start;
    }
    #quizbox .gmoPill{
      flex: 0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 2px solid rgba(15,23,42,.22) !important;
      background: rgba(0,0,0,.02) !important;
      color: rgba(15,23,42,.86) !important;
      -webkit-text-fill-color: rgba(15,23,42,.86) !important;
      font-weight: 1000;
      font-size: 12px;
      letter-spacing: .8px;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      flex-direction: column;
      line-height: 1.05;
      gap: 2px;
    }
    #quizbox .gmoPillMain{
      font-size: 12px;
      letter-spacing: .9px;
      font-weight: 1100;
    }
    #quizbox .gmoPillPoints{
      font-size: 11px;
      letter-spacing: 0;
      font-weight: 950;
      color: rgba(15,23,42,.72) !important;
      -webkit-text-fill-color: rgba(15,23,42,.72) !important;
      margin-top: 1px;
    }
    #quizbox .gmoPill:hover{ transform: translateY(-1px); }
    #quizbox .gmoPill:active{ transform: translateY(0px); }
    #quizbox .gmoPill.isDisabled{
      opacity: .55;
      cursor: not-allowed;
    }
    #quizbox .gmoMeta{
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      margin-top: 10px;
      color: rgba(15,23,42,.72);
      font-size: 12px;
      font-weight: 850;
      text-align:center;
    }
    #quizbox .gmoCounter{
      display:inline-flex;
      align-items:center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.02);
    }
    #quizbox .gmoCounter.isOver{
      border-color: rgba(244,63,94,.35);
      background: rgba(244,63,94,.08);
    }
    #quizbox #feedSwitchModal .modalHeader,
    #feedSwitchModal .modalHeader{
      justify-content: center;
    }
    #quizbox #feedSwitchModal .modalHeader > div,
    #feedSwitchModal .modalHeader > div{
      width: 100%;
    }
    #quizbox #feedSwitchModal .modalTitle,
    #feedSwitchModal .modalTitle{
      width: 100%;
    }

    #quizbox .modalBackdrop,
    #badgeModal.modalBackdrop,
    #kvirulereModal.modalBackdrop,
    #feedSwitchModal.modalBackdrop,
    #gmoModal.modalBackdrop{
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 16px;
      padding-top: max(16px, env(safe-area-inset-top));
      padding-right: max(16px, env(safe-area-inset-right));
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      padding-left: max(16px, env(safe-area-inset-left));
      background: rgba(2,6,23,.55);
      z-index: 100000;
      overflow: hidden;
    }
    #quizbox .modalBackdrop.hidden,
    #badgeModal.modalBackdrop.hidden,
    #kvirulereModal.modalBackdrop.hidden,
    #feedSwitchModal.modalBackdrop.hidden,
    #gmoModal.modalBackdrop.hidden{ display:none !important; }
    #quizbox .modalCard,
    #badgeModal .modalCard,
    #kvirulereModal .modalCard,
    #feedSwitchModal .modalCard,
    #gmoModal .modalCard{
      width: min(680px, 94vw);
      background: #fff !important;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      border-radius: 18px;
      border: 1px solid rgba(0,0,0,.10);
      box-shadow: 0 30px 90px rgba(0,0,0,.25);
      padding: 14px;
      max-height: min(calc(100vh - 32px), 820px);
      max-height: min(calc(100dvh - 32px), 820px);
      overflow: auto;
    }

    /* Feed switch is blocking; keep actions visible even if modal scrolls */
    #feedSwitchModal .modalCard{
      display: flex;
      flex-direction: column;
    }
    #feedSwitchModal .btnRow{
      margin-top: auto !important;
      padding-top: 14px;
      padding-bottom: 2px;
      position: sticky;
      bottom: 0;
      background: #fff;
      box-shadow: 0 -18px 34px rgba(255,255,255,.92);
    }
    #quizbox .inlineViewerRow{
      margin-top: 10px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #quizbox .inlineViewerRow .btn.small{
      padding: 8px 10px;
      border-radius: 999px;
      font-weight: 950;
    }
    #quizbox .inlineViewerRow .btn.small.isOn{
      background: rgba(29,78,216,.10) !important;
      border-color: rgba(29,78,216,.22) !important;
      color: rgba(29,78,216,.98) !important;
      -webkit-text-fill-color: rgba(29,78,216,.98) !important;
    }
    #quizbox .inlineViewerWrap{
      margin-top: 10px;
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }
    #quizbox .inlineViewerWrap.hidden{ display:none !important; }
    #quizbox .inlineViewerFrame{
      width: 100%;
      height: min(42vh, 420px);
      border: 0;
      background: #fff;
    }
    #quizbox .inlineSummaryWrap{
      margin-top: 10px;
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(15,23,42,.02);
    }
    #quizbox .inlineSummaryWrap.hidden{ display:none !important; }
    #quizbox .inlineSummaryBox{
      max-height: min(42vh, 420px);
      overflow: auto;
      padding: 10px 12px;
      color: rgba(15,23,42,.86);
      -webkit-text-fill-color: rgba(15,23,42,.86);
      font-weight: 820;
    }
    #quizbox .inlineHelpNote{
      padding: 0 10px 10px;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 850;
      color: rgba(15,23,42,.70);
      text-align:center;
    }
    #quizbox .modalHeader,
    #badgeModal .modalHeader,
    #kvirulereModal .modalHeader,
    #feedSwitchModal .modalHeader,
    #gmoModal .modalHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      position: sticky;
      top: 0;
      z-index: 2;
      background: #fff;
      padding-top: 2px;
    }
    #quizbox .modalTitle,
    #badgeModal .modalTitle,
    #kvirulereModal .modalTitle,
    #feedSwitchModal .modalTitle,
    #gmoModal .modalTitle{
      font-weight: 1000;
      font-size: 16px;
      letter-spacing: -.01em;
    }
    #quizbox .modalBody,
    #badgeModal .modalBody,
    #kvirulereModal .modalBody,
    #feedSwitchModal .modalBody,
    #gmoModal .modalBody{
      margin-top: 10px;
      font-size: 13px;
      color: rgba(15,23,42,.78) !important;
      -webkit-text-fill-color: rgba(15,23,42,.78) !important;
      line-height: 1.45;
      font-weight: 800;
    }
    #quizbox .badgeBig{
      margin-top: 12px;
      display:flex;
      align-items:center;
      gap: 12px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.02);
    }
    #quizbox .badgeIcon{
      width: 52px;
      height: 52px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,.10);
      background: #fff;
      font-size: 28px;
    }
    #quizbox .badgeName{
      font-weight: 1000;
      font-size: 14px;
    }
    #quizbox .modalClose,
    #badgeModal .modalClose,
    #kvirulereModal .modalClose,
    #feedSwitchModal .modalClose,
    #gmoModal .modalClose{
      appearance:none;
      border: 1px solid var(--border) !important;
      background: #fff !important;
      color: var(--text) !important;
      -webkit-text-fill-color: var(--text) !important;
      border-radius: 12px !important;
      padding: 8px 10px !important;
      font-weight: 950 !important;
      font-size: 13px !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1 !important;
      text-decoration: none !important;
      box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
    }
    #quizbox .kvirIntro{
      margin-top: 10px;
      font-size: 13px;
      line-height: 1.45;
      color: rgba(15,23,42,.82);
      font-weight: 820;
    }
    #quizbox .kvirChat{
      margin-top: 10px;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px;
      min-height: 140px;
      max-height: 300px;
      overflow: auto;
      background: rgba(15,23,42,.02);
    }
    #quizbox .kvirMsg{
      margin: 0 0 8px 0;
      padding: 8px 10px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.4;
      font-weight: 820;
      white-space: pre-wrap;
    }
    #quizbox .kvirMsg.user{
      background: #e7f0ff;
      border: 1px solid #c9dcff;
    }
    #quizbox .kvirMsg.assistant{
      background: #f6f7f9;
      border: 1px solid #dbe1ea;
    }
    #quizbox .kvirMsg.assistant.isScoreLine{
      background: rgba(29,78,216,.08);
      border-color: rgba(29,78,216,.25);
      color: rgba(29,78,216,.98);
      -webkit-text-fill-color: rgba(29,78,216,.98);
      font-size: 15px;
      font-weight: 1000;
      text-align: center;
      letter-spacing: .2px;
    }
    #quizbox .kvirMsgInner{
      display:flex;
      gap: 8px;
      align-items:flex-start;
    }
    #quizbox .kvirMsgText{
      flex: 1 1 auto;
      white-space: pre-wrap;
    }
    #quizbox .kvirMsgActions{
      flex: 0 0 auto;
      display:flex;
      align-items:flex-start;
      gap: 6px;
    }
    #quizbox .speakMiniBtn.isLoading{
      opacity: .75;
      cursor: progress;
      position: relative;
    }
    #quizbox .speakMiniBtn.isLoading::after{
      content: '';
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid rgba(15,23,42,.20);
      border-top-color: rgba(15,23,42,.85);
      animation: kvirSpin .7s linear infinite;
      position:absolute;
      inset: 0;
      margin: auto;
    }
    #quizbox .speakMiniBtn.isLoading{
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
    }
    #quizbox .speakMiniBtn.isPlaying{
      background: rgba(29,78,216,.10) !important;
      border-color: rgba(29,78,216,.35) !important;
    }
    #quizbox .kvirScore{
      margin-top: 10px;
      border: 1px solid #cfe6d5;
      border-radius: 10px;
      padding: 10px;
      background: #eefaf0;
      color: #14391f;
      font-size: 13px;
      line-height: 1.4;
      font-weight: 900;
    }
    #quizbox #gmoScoreBox{
      font-size: 15px;
      font-weight: 1000;
      border-color: rgba(29,78,216,.25);
      background: rgba(29,78,216,.08);
      color: rgba(29,78,216,.98);
      -webkit-text-fill-color: rgba(29,78,216,.98);
      text-align:center;
    }
    #quizbox .kvirComposer{
      margin-top: 10px;
      display: grid;
      gap: 8px;
    }
    #quizbox .kvirComposer textarea{
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      font-size: 14px;
      line-height: 1.4;
      background: #fff;
      color: var(--text);
      resize: vertical;
      min-height: 70px;
    }
    #quizbox .kvirAudioRow{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    #quizbox .kvirRecStatus{
      font-size: 12px;
      font-weight: 900;
      color: rgba(15,23,42,.72);
    }
    #quizbox .kvirRecStatus.isBusy{
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    #quizbox .kvirRecStatus.isBusy::before{
      content:"";
      width: 13px;
      height: 13px;
      border-radius: 50%;
      border: 2px solid rgba(15,23,42,.20);
      border-top-color: rgba(15,23,42,.85);
      animation: kvirSpin .7s linear infinite;
      flex: 0 0 auto;
    }
    #quizbox .kvirRecPreview{ width: 100%; }
    #quizbox .kvirRecPreview.hidden{ display:none !important; }
    #quizbox .kvirTyping{
      margin: 2px 0 8px 0;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px dashed #cdd6e3;
      background: #f9fbff;
      color: rgba(15,23,42,.78);
      font-size: 12px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    #quizbox .kvirSpinnerMini{
      width: 13px;
      height: 13px;
      border-radius: 50%;
      border: 2px solid rgba(15,23,42,.20);
      border-top-color: rgba(15,23,42,.85);
      animation: kvirSpin .7s linear infinite;
      flex: 0 0 auto;
    }
    @keyframes kvirSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    #quizbox .ttsSpinner{
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid rgba(15,23,42,.20);
      border-top-color: rgba(15,23,42,.85);
      animation: kvirSpin .7s linear infinite;
      flex: 0 0 auto;
    }
    #quizbox .ttsSpinner.hidden{ display: none !important; }
    /* Busy overlay: support both inside and outside #quizbox (we may move it to <body> for iOS/Safari). */
    #busyOverlay.busyOverlay,
    #quizbox .busyOverlay{
      position: fixed;
      inset: 0;
      z-index: 100000;
      background: rgba(15,23,42,.45);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      backdrop-filter: blur(3px);
    }
    #busyOverlay.busyOverlay.hidden,
    #quizbox .busyOverlay.hidden{ display:none !important; }
    #busyOverlay .busyCard,
    #quizbox .busyCard{
      width: min(420px, 92vw);
      border-radius: 16px;
      border: 1px solid var(--border);
      background: #fff !important;
      color: var(--text) !important;
      text-align: center;
      padding: 18px 16px;
      box-shadow: 0 24px 70px rgba(0,0,0,.28);
      max-height: calc(100dvh - 32px);
      overflow: auto;
    }
    #busyOverlay .busySpinner,
    #quizbox .busySpinner{
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 4px solid rgba(0,0,0,.14);
      border-top-color: #111827;
      border-right-color: #374151;
      margin: 0 auto 12px auto;
      animation: busySpin 900ms linear infinite;
    }
    #busyOverlay .busyTitle,
    #quizbox .busyTitle{
      font-size: 16px;
      font-weight: 1000;
      margin: 0 0 6px 0;
    }
    #busyOverlay .busyText,
    #quizbox .busyText{
      margin: 0;
      color: var(--muted) !important;
      -webkit-text-fill-color: var(--muted) !important;
      font-size: 14px;
      line-height: 1.4;
      font-weight: 800;
    }
    @keyframes busySpin{
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }