@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

    :root {
      --sand: #FBF3E4;
      --card: #FFFDF8;
      --marigold: #E8862E;
      --marigold-deep: #CC6A14;
      --turmeric: #F4B740;
      --teal: #0E7C7B;
      --teal-deep: #0A5F5E;
      --ink: #4A2C1A;
      --heading: #6B2D1A;
      --soft: #9A7B62;
      --green: #3F9D4E;
      --red: #C0492F;
      --line: #EADCC4;
      --fs: 1;
      --shadow-rgb: 74, 44, 26;
      --bar-bg: #CC6A14;
      --bar-fg: #FFFFFF;
      --bar-chip: rgba(255, 255, 255, .22);
    }

    /* ===== THEME: OCEAN (blue) ===== */
    html[data-theme="ocean"] {
      --sand: #EAF2FB;
      --card: #FFFFFF;
      --marigold: #2F7BE0;
      --marigold-deep: #1D5FC2;
      --turmeric: #4FA3E8;
      --teal: #1E5FC4;
      --teal-deep: #123E85;
      --ink: #1B2A41;
      --heading: #123E85;
      --soft: #5C7594;
      --green: #2E9C4E;
      --red: #D0463A;
      --line: #CBDCF2;
      --shadow-rgb: 18, 62, 133;
      --bar-bg: #123E85;
      --bar-fg: #FFFFFF;
      --bar-chip: rgba(255, 255, 255, .20);
    }

    /* ===== THEME: DUSK (dark) ===== */
    html[data-theme="dusk"] {
      --sand: #171512;
      --card: #221E19;
      --marigold: #E8862E;
      --marigold-deep: #CC6A14;
      --turmeric: #F4B740;
      --teal: #26B3AC;
      --teal-deep: #1B8C86;
      --ink: #EFE6D8;
      --heading: #F4B740;
      --soft: #B6A78F;
      --green: #5FCB74;
      --red: #EF6A56;
      --line: #3A342B;
      --shadow-rgb: 0, 0, 0;
      --bar-bg: #0E0C09;
      --bar-fg: #F4B740;
      --bar-chip: rgba(244, 183, 64, .14);
    }

    html[data-theme="dusk"] body {
      background: radial-gradient(circle at 20% 0%, #241f18 0%, transparent 45%), radial-gradient(circle at 90% 100%, #1a2422 0%, transparent 40%), var(--sand);
    }

    html[data-theme="ocean"] body {
      background: radial-gradient(circle at 20% 0%, #dbe9fb 0%, transparent 45%), radial-gradient(circle at 90% 100%, #e6eefb 0%, transparent 40%), var(--sand);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent
    }

    img {
      max-width: 100%;
    }

    html,
    body {
      height: 100%
    }

    body {
      font-family: 'Noto Sans', sans-serif;
      background: radial-gradient(circle at 20% 0%, #FCEBD0 0%, transparent 45%), radial-gradient(circle at 90% 100%, #EAF5F4 0%, transparent 40%), var(--sand);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      min-height: 100dvh;
      margin: 0;
      padding: 0;
    }

    .phone {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      max-height: 100dvh;
      background: var(--sand);
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
    }

    @media (min-width: 480px) {
      body {
        padding: 16px;
      }

      .phone {
        max-width: 412px;
        height: min(880px, 95vh);
        border-radius: 34px;
        box-shadow: 0 30px 70px -20px rgba(74, 44, 26, .45);
        border: 8px solid #2a1a10;
      }
    }

    .screen {
      flex: 1;
      overflow: hidden;
      display: none;
      flex-direction: column;
      animation: fade .35s ease;
      min-height: 0
    }

    .screen.active {
      display: flex;
      flex-direction: column;
      height: 100%;
      max-height: 100%;
    }

    @keyframes fade {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .topbar {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 30;
      background: var(--bar-bg);
      border-bottom: none;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .15)
    }

    .topbar h2 {
      color: var(--bar-fg) !important
    }

    .topbar .back,
    .topbar .home-btn,
    .topbar .ab-btn,
    .topbar .timer,
    .topbar .tanpura-toggle-btn {
      background: var(--bar-chip) !important;
      color: var(--bar-fg) !important;
      box-shadow: none !important;
      border-color: transparent !important
    }

    .topbar .timer.low {
      background: var(--red) !important
    }

    .topbar .topbar-star-btn {
      background: transparent !important;
      color: rgba(255, 255, 255, .7) !important
    }

    .topbar .topbar-star-btn.starred {
      color: #F4B740 !important
    }

    .topbar .left-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-start
    }

    .topbar .right-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-end
    }

    .back {
      border: none;
      background: #fff;
      color: var(--heading);
      width: 38px;
      height: 38px;
      border-radius: 12px;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 2px 0 var(--line);
      display: grid;
      place-items: center;
      font-weight: 700
    }

    .topbar h2 {
      font-family: 'Baloo 2';
      font-size: 18px;
      color: var(--heading);
      font-weight: 700;
      text-align: center;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .timer {
      font-family: 'Baloo 2';
      font-size: 14px;
      font-weight: 800;
      color: var(--marigold-deep);
      background: #FCE9D0;
      padding: 7px 13px;
      border-radius: 999px;
      white-space: nowrap
    }

    .timer.low {
      color: #fff;
      background: var(--red);
      animation: pulse 1s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .6
      }
    }

    .body {
      padding: 6px 20px 26px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow-y: auto;
      flex: 1;
      min-height: 0;
      -webkit-overflow-scrolling: touch
    }

    .hero {
      padding: 30px 22px 8px;
      text-align: center;
    }

    .hero-avatar-wrap {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin: 0 auto 8px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--marigold), var(--teal-deep));
      border: 3.5px solid var(--teal-deep);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
      overflow: hidden;
    }

    .hero-avatar-fallback {
      font-size: 38px;
      line-height: 1;
    }

    .hero-avatar {
      width: 90px;
      height: 90px;
      max-width: 90px;
      max-height: 90px;
      border-radius: 50%;
      object-fit: cover;
      border: 3.5px solid var(--teal-deep);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
      margin: 0 auto 8px;
      display: block;
    }

    .hero-avatar-wrap .hero-avatar {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      border: none;
      box-shadow: none;
      margin: 0;
    }

    .brand {
      font-family: 'Baloo 2';
      font-weight: 800;
      font-size: 30px;
      color: var(--heading);
      margin-top: 6px;
      letter-spacing: .3px
    }

    .tag {
      color: var(--soft);
      font-size: 14px;
      margin-top: 2px
    }

    .list-label {
      font-family: 'Baloo 2';
      font-weight: 700;
      color: var(--heading);
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 6px 2px 0
    }

    .card {
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 18px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      cursor: pointer;
      box-shadow: 0 4px 0 var(--line);
      transition: transform .12s, box-shadow .12s;
      text-align: left;
      width: 100%;
      font-family: inherit;
      color: inherit
    }

    .card:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 var(--line)
    }

    .card .leaf {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--turmeric), var(--marigold));
      color: #fff;
      font-family: 'Baloo 2';
      font-weight: 800;
      font-size: 18px
    }

    .card .meta {
      flex: 1
    }

    .card .meta b {
      font-family: 'Baloo 2';
      font-size: 16px;
      color: var(--heading);
      font-weight: 700;
      display: block
    }

    .card .meta span {
      font-size: 12.5px;
      color: var(--soft)
    }

    .card .go {
      color: var(--marigold);
      font-size: 20px;
      font-weight: 800
    }

    .card.locked {
      opacity: .55;
      cursor: default;
      box-shadow: none
    }

    .card.locked .leaf {
      background: #D9C7AC
    }

    .card.locked .go {
      color: var(--soft);
      font-size: 13px;
      font-weight: 700
    }

    .card.mastered {
      background-color: #EBF7EC !important;
      border-color: #B2D9B6 !important;
      box-shadow: 0 4px 0 #B2D9B6 !important;
    }

    .card.mastered:active {
      box-shadow: 0 1px 0 #B2D9B6 !important;
    }

    .card.mastered .meta b {
      color: #1E6B27 !important;
    }

    .card.mastered .go {
      color: #2E9C3C !important;
    }

    .card.mastered .leaf {
      background: linear-gradient(135deg, #74C97E, #2E9C3C) !important;
    }

    .swipe-wrap {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      flex-shrink: 0;
    }

    .swipe-bg {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      background: var(--red, #EF4444);
      display: flex;
      align-items: center;
      padding-left: 20px;
      border-radius: 18px;
      cursor: pointer;
      z-index: 1;
    }

    .swipe-btn {
      color: #fff;
      font-family: 'Baloo 2';
      font-weight: 700;
      font-size: 16px;
    }

    .swipe-card {
      position: relative;
      transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 2;
      margin-bottom: 0 !important;
    }

    .swipe-card.is-swiping {
      transition: none;
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      box-sizing: border-box;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal {
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 20px;
      padding: 24px 22px;
      width: 100%;
      max-width: 340px;
      box-sizing: border-box;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      transform: translateY(20px);
      transition: transform 0.2s;
      text-align: center;
    }

    .overlay.active .modal {
      transform: translateY(0);
    }

    .verse {
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 20px;
      padding: 24px 20px;
      text-align: center;
      box-shadow: 0 6px 0 var(--line);
      position: relative
    }

    .verse::before {
      content: "\275D";
      position: absolute;
      top: 6px;
      left: 14px;
      color: var(--turmeric);
      font-size: 34px;
      opacity: .45
    }

    .verse .line {
      font-size: 19px;
      line-height: 1.95;
      color: var(--heading);
      font-weight: 600
    }

    .hl-word {
      background: #FCE0B0;
      color: #B5560F;
      padding: 1px 9px;
      border-radius: 8px;
      font-weight: 700
    }

    .blankpill {
      background: var(--turmeric);
      color: #fff;
      padding: 1px 16px;
      border-radius: 8px;
      font-weight: 700;
      margin: 0 2px
    }

    .blankpill.filled {
      background: var(--teal);
      color: #fff
    }

    .audio-wrap {
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 18px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 4px 0 var(--line)
    }

    .audio-row {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .play {
      border: none;
      cursor: pointer;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--marigold), var(--marigold-deep));
      color: #fff;
      font-size: 22px;
      display: grid;
      place-items: center;
      box-shadow: 0 4px 12px -2px rgba(204, 106, 20, .6)
    }

    .play:active {
      transform: scale(.94)
    }

    .audio-info {
      flex: 1
    }

    .audio-info b {
      font-family: 'Baloo 2';
      color: var(--heading);
      font-size: 15px;
      display: block
    }

    .audio-info span {
      font-size: 12.5px;
      color: var(--soft)
    }

    .counter {
      display: flex;
      gap: 9px;
      justify-content: center;
      align-items: center;
      margin-top: 2px
    }

    .dot {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--line);
      transition: .3s
    }

    .dot.on {
      background: var(--teal);
      transform: scale(1.1)
    }

    .upload-hint {
      font-size: 11.5px;
      color: var(--soft);
      text-align: center;
      border-top: 1px dashed var(--line);
      padding-top: 10px
    }

    .upload-hint label {
      color: var(--teal-deep);
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer
    }

    .wordcard {
      background: var(--card);
      border: 2px solid var(--line);
      border-radius: 18px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 3px 0 var(--line)
    }

    .wordcard .sa {
      font-weight: 700;
      color: var(--teal-deep);
      font-size: 16px
    }

    .wordcard .arrow {
      color: var(--turmeric);
      font-weight: 800
    }

    .wordcard .en {
      color: var(--ink);
      font-size: 14px;
      flex: 1;
      text-align: right
    }

    .transbox {
      background: linear-gradient(135deg, color-mix(in srgb, var(--turmeric) 14%, var(--card)), color-mix(in srgb, var(--turmeric) 26%, var(--card)));
      border: 1.5px solid var(--turmeric);
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 4px 0 color-mix(in srgb, var(--turmeric) 45%, var(--card))
    }

    .transbox .lbl {
      font-family: 'Baloo 2';
      font-weight: 700;
      color: var(--marigold-deep);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 6px
    }

    .transbox p {
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--heading)
    }

    .q-prompt {
      font-family: 'Baloo 2';
      font-size: 19px;
      color: var(--heading);
      font-weight: 700;
      text-align: center;
      line-height: 1.4
    }

    .q-prompt .hl {
      color: var(--teal-deep)
    }

    .options {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .opt {
      background: var(--card);
      border: 2px solid var(--line);
      border-radius: 15px;
      padding: 15px 18px;
      font-family: inherit;
      font-size: 15.5px;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      font-weight: 500;
      box-shadow: 0 4px 0 var(--line);
      transition: transform .1s, box-shadow .1s
    }

    .opt:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 var(--line)
    }

    .opt.correct {
      background: #E7F6E9;
      border-color: var(--green);
      color: var(--green);
      font-weight: 700
    }

    .opt.wrong {
      background: #FBEAE6;
      border-color: var(--red);
      color: var(--red);
      font-weight: 700
    }

    .opt:disabled {
      cursor: default
    }

    .progress-q {
      display: flex;
      gap: 5px;
      justify-content: center;
      flex-wrap: wrap
    }

    .pq {
      height: 6px;
      flex: 1;
      min-width: 14px;
      max-width: 34px;
      border-radius: 6px;
      background: var(--line)
    }

    .pq.done {
      background: var(--teal)
    }

    .pq.now {
      background: var(--turmeric)
    }

    .qcount {
      text-align: center;
      font-family: 'Baloo 2';
      font-weight: 700;
      color: var(--soft);
      font-size: 13px
    }

    .foot {
      padding: 12px 20px max(14px, env(safe-area-inset-bottom, 14px));
      flex-shrink: 0;
      background: linear-gradient(to top, var(--sand) 70%, transparent);
      position: relative;
      z-index: 10;
    }

    .btn {
      width: 100%;
      border: none;
      border-radius: 16px;
      padding: 16px;
      font-family: 'Baloo 2';
      font-weight: 700;
      font-size: 17px;
      cursor: pointer;
      color: #fff;
      background: linear-gradient(135deg, var(--marigold), var(--marigold-deep));
      box-shadow: 0 5px 0 var(--marigold-deep);
      transition: transform .1s, box-shadow .1s
    }

    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 1px 0 var(--marigold-deep)
    }

    .btn.teal {
      background: linear-gradient(135deg, var(--teal), var(--teal-deep));
      box-shadow: 0 5px 0 var(--teal-deep)
    }

    .btn.teal:active {
      box-shadow: 0 1px 0 var(--teal-deep)
    }

    .btn.ghost {
      background: #fff;
      color: var(--heading);
      box-shadow: 0 4px 0 var(--line)
    }

    .btn:disabled {
      opacity: .4;
      box-shadow: 0 5px 0 var(--marigold-deep);
      cursor: default
    }

    /* Guided Recitation Styles */
    .recite-line {
      font-size: 19px;
      line-height: 1.95;
      color: var(--heading);
      font-weight: 600;
      text-align: center;
      transition: transform 0.3s;
    }

    .recite-line.active {
      transform: scale(1.02);
    }

    .word-span {
      display: inline-block;
      opacity: 0.28;
      color: var(--soft);
      font-weight: 600;
      padding: 2px 5px;
      margin: 0 1px;
      border-radius: 6px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Recite screen: words start fully hidden so they can be revealed one by one */
    .recite-line .word-span {
      opacity: 0;
      transform: translateY(4px);
    }

    .word-span.word-active {
      opacity: 1 !important;
      color: #0d9488 !important;
      font-weight: 800 !important;
      background: rgba(13, 148, 136, 0.16) !important;
      transform: scale(1.1) translateY(0) !important;
      box-shadow: 0 2px 10px rgba(13, 148, 136, 0.25);
    }

    .word-span.word-passed {
      opacity: 1 !important;
      color: var(--heading) !important;
      font-weight: 700 !important;
      background: transparent !important;
      transform: translateY(0) !important;
    }

    .tanpura-toggle-btn {
      background: rgba(13, 148, 136, 0.12);
      border: 1px solid rgba(13, 148, 136, 0.3);
      color: var(--teal-deep);
      border-radius: 999px;
      padding: 7px 16px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 4px;
      transition: all 0.2s;
    }

    .tanpura-toggle-btn.off {
      opacity: 0.55;
      background: var(--sand);
      border-color: var(--line);
      color: var(--soft);
    }

    /* Mastered Verse Box Overrides */
    .verse.mastered {
      background-color: #EBF7EC !important;
      border-color: #B2D9B6 !important;
      box-shadow: 0 6px 0 #B2D9B6 !important;
    }

    .verse.mastered .line {
      color: #1E6B27 !important;
    }

    /* Star Options Styles */
    .star-btn {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      padding: 6px;
      color: #D3D3D3;
      transition: transform 0.12s, color 0.12s;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      margin-left: 4px;
    }

    .star-btn.starred {
      color: #F4B740;
      text-shadow: 0 0 2px rgba(244, 183, 64, 0.4);
    }

    .star-btn:active {
      transform: scale(1.25);
    }

    .topbar-star-btn {
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      padding: 6px;
      color: var(--soft);
      transition: transform 0.12s, color 0.12s;
      margin-left: auto;
      margin-right: 6px;
    }

    .topbar-star-btn.starred {
      color: #F4B740;
    }

    .topbar-star-btn:active {
      transform: scale(1.2);
    }

    /* Quiz Spacious Overrides */
    .q-prompt {
      margin: 22px 0 18px 0 !important;
      line-height: 1.45 !important;
    }

    .options {
      gap: 16px !important;
      margin-top: 14px !important;
      margin-bottom: 26px !important;
    }

    #quiz-verse {
      margin-bottom: 20px !important;
    }

    #quiz-progress {
      margin-bottom: 18px !important;
    }

    .qcount {
      margin-bottom: 10px !important;
    }

    /* Scripture Dropdown Group Styles */
    .group-header {
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 18px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      margin-top: 12px;
      box-shadow: 0 4px 0 var(--line);
      transition: background-color 0.2s, transform 0.1s;
    }

    .group-header:active {
      background-color: #FAF4E8;
      transform: translateY(2px);
    }

    .group-badge {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--turmeric), var(--marigold));
      color: #fff;
      font-family: 'Baloo 2';
      font-weight: 800;
      font-size: 14px;
      display: grid;
      place-items: center;
    }

    .group-title {
      font-family: 'Baloo 2';
      font-weight: 800;
      color: var(--heading);
      font-size: 15.5px;
      flex: 1;
    }

    .group-arrow {
      color: var(--marigold);
      font-size: 15px;
      font-weight: 800;
    }

    .group-content {
      display: none;
      flex-direction: column;
      gap: 12px;
      margin-top: 10px;
      margin-bottom: 6px;
    }

    .group-content.open {
      display: flex;
    }

    .master-check {
      color: var(--green);
      font-weight: 800;
      margin-left: 6px;
      font-size: 16px;
    }

    /* App Intro Audio Guide Card */
    .intro-guide-card {
      background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 10%, var(--card)), color-mix(in srgb, var(--teal) 4%, var(--card)));
      border: 1.5px solid color-mix(in srgb, var(--teal) 35%, var(--card));
      border-radius: 20px;
      padding: 16px;
      box-shadow: 0 4px 0 color-mix(in srgb, var(--teal) 45%, var(--card));
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 6px;
      margin-bottom: 6px;
    }

    .intro-guide-header {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .intro-icon {
      font-size: 24px;
    }

    .intro-meta {
      flex: 1;
    }

    .intro-meta b {
      font-family: 'Baloo 2';
      color: var(--teal-deep);
      font-size: 15px;
      display: block;
    }

    .intro-meta span {
      font-size: 12px;
      color: var(--soft);
    }

    .intro-play-btn {
      border: none;
      cursor: pointer;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--teal), var(--teal-deep));
      color: #fff;
      font-size: 14px;
      display: grid;
      place-items: center;
      box-shadow: 0 3px 6px rgba(14, 124, 123, .25);
      transition: transform 0.1s;
    }

    .intro-play-btn:active {
      transform: scale(0.94);
    }

    .intro-progress-bar {
      height: 6px;
      background: color-mix(in srgb, var(--teal) 25%, var(--card));
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .intro-progress-fill {
      height: 100%;
      width: 0%;
      background: var(--teal);
      transition: width 0.15s linear;
    }

    .recite-guide-card {
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 20px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 4px 0 var(--line);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .guide-instruction {
      font-family: 'Baloo 2';
      font-size: 20px;
      font-weight: 800;
      color: var(--heading);
    }

    .guide-rounds {
      display: flex;
      gap: 12px;
      justify-content: center;
      align-items: center;
    }

    .dot-pip {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid var(--line);
      background: transparent;
      transition: all 0.3s;
    }

    .dot-pip.on {
      border-color: var(--teal);
      background: var(--teal);
      transform: scale(1.1);
    }

    .recite-ctrl {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 6px;
    }

    .done-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 30px;
      gap: 8px;
      overflow-y: auto;
      min-height: 0
    }

    .burst {
      font-size: 64px;
      animation: pop .5s ease
    }

    @keyframes pop {
      0% {
        transform: scale(0)
      }

      70% {
        transform: scale(1.2)
      }

      100% {
        transform: scale(1)
      }
    }

    .done-wrap h1 {
      font-family: 'Baloo 2';
      font-size: 28px;
      color: var(--heading);
      font-weight: 800
    }

    .done-wrap p {
      color: var(--soft);
      font-size: 15px;
      max-width: 260px
    }

    .stars {
      font-size: 34px;
      letter-spacing: 6px;
      margin: 4px 0
    }

    .chips {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center
    }

    .chip {
      font-family: 'Baloo 2';
      background: #E3F1F0;
      color: var(--teal-deep);
      font-weight: 700;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 14px
    }

    .chip.warm {
      background: #FCE9D0;
      color: var(--marigold-deep)
    }

    .done-foot {
      padding: 0 30px 34px;
      width: 100%
    }

    .intro-note {
      font-size: 12px;
      color: var(--soft);
      text-align: center;
      padding: 0 24px 14px
    }

    /* Stage progress bar on home */
    .stage-bar {
      display: flex;
      gap: 4px;
      padding: 0 2px;
      margin-top: 6px
    }

    .stage-pip {
      flex: 1;
      height: 5px;
      border-radius: 5px;
      background: var(--line)
    }

    .stage-pip.done {
      background: var(--teal)
    }

    .stage-pip.active {
      background: var(--turmeric)
    }

    /* Section divider */
    .section-title {
      font-family: 'Baloo 2';
      font-size: 12px;
      font-weight: 700;
      color: var(--soft);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      text-align: center;
      padding: 4px 0
    }

    /* Bottom audio controller styles */
    .audio-controller-foot {
      background: var(--card);
      border-top: 1.5px solid var(--line);
      padding: 10px 16px max(12px, env(safe-area-inset-bottom, 12px));
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
      flex-shrink: 0;
      position: relative;
      z-index: 10;
    }

    .progress-container {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin-bottom: 8px;
    }

    .time-label {
      font-family: 'Baloo 2';
      font-size: 12px;
      font-weight: 700;
      color: var(--soft);
      min-width: 32px;
      text-align: center;
    }

    .seek-slider {
      flex: 1;
      height: 6px;
      border-radius: 6px;
      background: var(--line);
      outline: none;
      -webkit-appearance: none;
      cursor: pointer;
    }

    .seek-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--marigold);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      transition: transform 0.1s;
    }

    .seek-slider::-webkit-slider-thumb:active {
      transform: scale(1.3);
    }

    .intro-slider::-webkit-slider-thumb {
      background: var(--teal);
    }

    .control-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
    }

    .control-play-btn {
      border: none;
      cursor: pointer;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--marigold), var(--marigold-deep));
      color: #fff;
      font-size: 18px;
      display: grid;
      place-items: center;
      box-shadow: 0 3px 8px -2px rgba(204, 106, 20, .4);
      flex-shrink: 0;
      transition: transform 0.1s;
    }

    .control-play-btn:active {
      transform: scale(0.94);
    }

    .ctrl-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-start;
      overflow: hidden;
    }

    .ctrl-title {
      font-family: 'Baloo 2';
      font-size: 11px;
      font-weight: 700;
      color: var(--soft);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }

    .mini-counter {
      margin-top: 0;
      gap: 6px;
    }

    .mini-counter .dot {
      width: 9px;
      height: 9px;
    }

    .btn-next-compact {
      width: auto !important;
      padding: 10px 22px !important;
      border-radius: 14px !important;
      font-size: 15px !important;
      box-shadow: 0 3px 0 var(--marigold-deep) !important;
      height: 42px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .btn-next-compact:active {
      transform: translateY(2px) !important;
      box-shadow: 0 1px 0 var(--marigold-deep) !important;
    }

    .upload-hint-card {
      background: var(--card);
      border: 1.5px dashed var(--line);
      border-radius: 14px;
      padding: 10px 14px;
      text-align: center;
      font-size: 12px;
      color: var(--soft);
      margin-top: 10px;
    }

    .upload-hint-card label {
      color: var(--teal-deep);
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer;
    }

    .lang-select {
      font-family: 'Baloo 2';
      font-size: 13px;
      font-weight: 700;
      color: var(--teal-deep);
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 8px;
      padding: 4px 8px;
      outline: none;
      cursor: pointer;
    }

    .home-btn {
      border: none;
      background: transparent;
      color: var(--soft);
      font-size: 20px;
      cursor: pointer;
      transition: transform 0.1s;
      margin-right: 4px;
      display: grid;
      place-items: center;
    }

    .home-btn:active {
      transform: scale(0.9);
    }

    /* Compact Intro Guide */
    .compact-intro {
      background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 10%, var(--card)), color-mix(in srgb, var(--teal) 4%, var(--card)));
      border: 1.5px solid color-mix(in srgb, var(--teal) 35%, var(--card));
      border-radius: 16px;
      padding: 10px 14px;
      box-shadow: 0 3px 0 color-mix(in srgb, var(--teal) 45%, var(--card));
      margin-bottom: 12px;
      transition: all 0.3s ease;
    }

    .compact-intro-main {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .compact-play-btn {
      border: none;
      cursor: pointer;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--teal), var(--teal-deep));
      color: #fff;
      font-size: 14px;
      display: grid;
      place-items: center;
      box-shadow: 0 3px 6px rgba(14, 124, 123, .25);
      flex-shrink: 0;
      transition: transform 0.1s;
    }

    .compact-play-btn:active {
      transform: scale(0.94);
    }

    .compact-title {
      font-family: 'Baloo 2';
      font-weight: 800;
      color: var(--teal-deep);
      font-size: 16px;
      flex: 1;
      letter-spacing: 0.5px;
    }

    .info-circle-btn {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--teal) 25%, var(--card));
      color: var(--teal-deep);
      border: none;
      font-weight: 800;
      font-size: 13px;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .info-circle-btn:active {
      transform: scale(0.9);
      background: color-mix(in srgb, var(--teal) 45%, var(--card));
    }

    .compact-intro-details {
      border-top: 1px dashed color-mix(in srgb, var(--teal) 45%, var(--card));
      margin-top: 10px;
      padding-top: 10px;
      animation: fadeInDown 0.3s ease forwards;
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-5px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .compact-subtitle {
      font-family: 'Baloo 2';
      font-weight: 700;
      color: var(--heading);
      font-size: 14px;
      margin-bottom: 2px;
    }

    .compact-desc {
      font-size: 12px;
      color: var(--soft);
      margin-bottom: 8px;
    }

    .lang-quick-wrap {
      position: relative;
      display: inline-flex
    }

    .lang-popover {
      position: absolute;
      top: calc(100% + 12px);
      right: -5px;
      background: var(--card);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      display: none;
      flex-direction: column;
      min-width: 120px;
      z-index: 100;
      animation: popoverFade 0.2s ease;
    }

    .lang-popover.active {
      display: flex;
    }

    .lang-popover::before {
      content: '';
      position: absolute;
      top: -5px;
      width: 12px;
      height: 12px;
      background: var(--card);
      transform: rotate(45deg);
      box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
    }

    .lang-popover.centered {
      right: -41px;
    }

    .lang-popover.centered::before {
      right: 54px;
    }

    .lang-popover.right-aligned {
      right: -5px;
    }

    .lang-popover.right-aligned::before {
      right: 18px;
    }

    .lang-popover button {
      background: transparent;
      border: none;
      padding: 10px 16px;
      font-size: 15px;
      color: var(--heading);
      text-align: center;
      font-family: 'Noto Sans', sans-serif;
      cursor: pointer;
      position: relative;
      z-index: 2;
      transition: background 0.1s;
    }

    .lang-popover button:first-of-type {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }

    .lang-popover button:last-of-type {
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
    }

    .lang-popover button:active {
      background: var(--sand);
    }

    .lang-popover .divider {
      height: 1px;
      background: var(--line);
      width: 100%;
    }

    @keyframes popoverFade {
      from {
        opacity: 0;
        transform: translateY(-5px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    #bs-subjects-container,
    #bv-subjects-container {
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    /* ===== FONT SIZE SCALING (reading text only) ===== */
    .verse .line {
      font-size: calc(19px * var(--fs));
      line-height: 1.95
    }

    .q-prompt {
      font-size: calc(19px * var(--fs))
    }

    .opt {
      font-size: calc(15.5px * var(--fs))
    }

    .transbox p {
      font-size: calc(15.5px * var(--fs))
    }

    .wordcard .sa {
      font-size: calc(16px * var(--fs))
    }

    .wordcard .en {
      font-size: calc(14px * var(--fs))
    }

    .recite-line {
      font-size: calc(19px * var(--fs));
      line-height: 1.95
    }

    .card .meta b {
      font-size: calc(16px * var(--fs))
    }

    .card .meta span {
      font-size: calc(12.5px * var(--fs))
    }

    /* ===== UNIFIED APP BAR (always on top) ===== */
    .appbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 40;
      background: var(--bar-bg);
      box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
    }

    .appbar .ab-side {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 38px
    }

    .appbar .ab-side.right {
      margin-left: auto;
      justify-content: flex-end
    }

    .appbar .ab-title {
      flex: 1;
      text-align: center;
      font-family: 'Baloo 2';
      font-weight: 800;
      font-size: 16px;
      color: var(--bar-fg);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px
    }

    .appbar .ab-title img {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, .5)
    }

    .ab-btn {
      border: none;
      background: var(--bar-chip);
      color: var(--bar-fg);
      width: 36px;
      height: 36px;
      border-radius: 11px;
      font-size: 16px;
      cursor: pointer;
      box-shadow: none;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      transition: transform .1s
    }

    .ab-btn:active {
      transform: scale(.92)
    }

    .ab-dots {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 1px;
      line-height: 0;
      padding-bottom: 6px
    }

    /* ===== SETTINGS SHEET (3-dot menu) ===== */
    .sheet-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 1000;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }

    .sheet-overlay.active {
      opacity: 1;
      pointer-events: auto
    }

    .sheet {
      width: 100%;
      max-width: 412px;
      background: var(--card);
      border-radius: 22px 22px 0 0;
      padding: 10px 20px 26px;
      box-shadow: 0 -10px 30px rgba(0, 0, 0, .15);
      transform: translateY(16px);
      transition: transform .22s ease;
      max-height: 82vh;
      overflow-y: auto;
    }

    .sheet-overlay.active .sheet {
      transform: translateY(0)
    }

    .sheet-handle {
      width: 40px;
      height: 5px;
      background: var(--line);
      border-radius: 6px;
      margin: 4px auto 14px
    }

    .sheet-sec {
      margin-bottom: 20px
    }

    .sheet-sec:last-child {
      margin-bottom: 4px
    }

    .sheet-label {
      font-family: 'Baloo 2';
      font-weight: 700;
      color: var(--soft);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 10px
    }

    .sheet-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .seg-btn {
      flex: 1;
      min-width: 64px;
      background: var(--sand);
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 10px 8px;
      font-family: 'Baloo 2';
      font-weight: 700;
      color: var(--ink);
      cursor: pointer;
      text-align: center;
      transition: all .15s
    }

    .seg-btn.on {
      background: var(--teal);
      border-color: var(--teal-deep);
      color: #fff
    }

    .fs-btn {
      font-family: 'Baloo 2';
      font-weight: 800
    }

    .theme-swatch {
      flex: 1;
      min-width: 90px;
      border-radius: 14px;
      border: 2px solid var(--line);
      cursor: pointer;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: var(--sand);
      transition: all .15s
    }

    .theme-swatch.on {
      border-color: var(--teal-deep);
      box-shadow: 0 0 0 2px rgba(14, 124, 123, .25)
    }

    .theme-dot-row {
      display: flex;
      gap: 3px
    }

    .theme-dot {
      width: 10px;
      height: 16px;
      border-radius: 3px
    }

    .theme-swatch span {
      font-family: 'Baloo 2';
      font-weight: 700;
      font-size: 12.5px;
      color: var(--ink)
    }

    .sheet-link {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      background: var(--sand);
      border: 1.5px solid var(--line);
      border-radius: 14px;
      padding: 13px 14px;
      font-family: 'Baloo 2';
      font-weight: 700;
      color: var(--heading);
      font-size: 14.5px;
      cursor: pointer;
      margin-bottom: 10px;
      text-align: left
    }

    .sheet-link:last-child {
      margin-bottom: 0
    }

    .sheet-link .ic {
      font-size: 17px
    }

    .sheet-close {
      width: 100%;
      margin-top: 6px
    }

    .fs-slider-row {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .fs-tick {
      font-family: 'Baloo 2';
      font-weight: 800;
      color: var(--soft);
      flex-shrink: 0
    }

    .fs-tick-sm {
      font-size: 13px
    }

    .fs-tick-lg {
      font-size: 24px
    }

    .fs-slider {
      flex: 1;
      height: 6px;
      border-radius: 6px;
      background: var(--line);
      outline: none;
      -webkit-appearance: none;
      cursor: pointer
    }

    .fs-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--teal);
      border: 3px solid var(--card);
      box-shadow: 0 1px 5px rgba(0, 0, 0, .3)
    }

    .fs-preview {
      margin-top: 12px;
      text-align: center;
      font-family: 'Baloo 2';
      font-weight: 700;
      color: var(--heading);
      background: var(--sand);
      border-radius: 12px;
      padding: 10px;
      font-size: calc(15px * var(--fs));
      transition: font-size .1s
    }

    /* ===== PER-VERSE SLOKA LANGUAGE TOGGLE ===== */
    .sloka-lang-toggle {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 2px 0 4px
    }

    .slt-btn {
      font-family: 'Baloo 2';
      font-weight: 700;
      font-size: 13px;
      padding: 6px 18px;
      border-radius: 999px;
      border: 1.5px solid var(--line);
      background: var(--card);
      color: var(--ink);
      cursor: pointer;
      transition: all .15s
    }

    .slt-btn.on {
      background: var(--teal);
      border-color: var(--teal-deep);
      color: #fff
    }

    /* ===== COLLAPSIBLE WORD-BY-WORD ===== */
    .wbw-toggle {
      width: 100%;
      background: var(--sand);
      border: 1.5px dashed var(--line);
      border-radius: 12px;
      padding: 11px;
      font-family: 'Baloo 2';
      font-weight: 700;
      font-size: 14px;
      color: var(--heading);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 2px
    }

    .wbw-toggle .wbw-icon {
      transition: transform .2s ease;
      display: inline-block
    }

    .wbw-toggle.open .wbw-icon {
      transform: rotate(180deg)
    }

    #word-list-wrap {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease
    }

    #word-list-wrap.wbw-open {
      max-height: 3000px;
      opacity: 1;
      margin-top: 4px
    }

/* ===== PWA ENHANCEMENTS ===== */
.w2w-details summary::-webkit-details-marker {
  display: none;
}
.w2w-details[open] .w2w-icon {
  transform: rotate(180deg);
}

/* Offline Toast Notification */
.offline-toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--heading);
  color: #fff;
  padding: 13px 22px;
  border-radius: 16px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 99999;
  width: calc(100% - 44px);
  max-width: 370px;
  box-sizing: border-box;
  margin: 0 auto;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
}

.offline-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.offline-toast.online {
  background: var(--green, #2E9C4E);
}

/* Install PWA Banner */
.install-banner {
  background: linear-gradient(135deg, rgba(232, 134, 46, 0.14), rgba(14, 124, 123, 0.14));
  border: 1.5px dashed var(--marigold);
  border-radius: 16px;
  padding: 14px 16px;
  display: none;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  animation: fade 0.3s ease;
}

.install-banner.show {
  display: flex;
}

.install-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.install-banner-text {
  flex: 1;
}

.install-banner-text b {
  font-family: 'Baloo 2', sans-serif;
  font-size: 14.5px;
  color: var(--heading);
  display: block;
}

.install-banner-text span {
  font-size: 12px;
  color: var(--soft);
  display: block;
}

.install-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.install-banner-btn {
  background: var(--marigold);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Baloo 2', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--marigold-deep);
}

.install-banner-btn:active {
  transform: scale(0.96);
}

.install-banner-close {
  background: transparent;
  border: none;
  color: var(--soft);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}


/* PWA Install Modal & Badges */
.install-step-card {
  background: var(--sand);
  padding: 14px 15px;
  border-radius: 14px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.install-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.install-step-num {
  background: var(--card);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--marigold);
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* SVG Icon Utility Styles */
.timer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.timer-ic {
  display: inline-block;
  vertical-align: middle;
}

.home-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.go svg {
  display: block;
}

.topbar-star-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.star-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.stars {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.tanpura-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}