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

    /* ── Design tokens — overridden by custom colour theme ── */
    

    html, body {
      height: 100%;
      min-height: 100%;
      background: var(--p0);
      align-items: flex-start;
      justify-content: center;
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      overflow-y: auto;
      max-width: 100%;
    }

    /* Rich animated background — the "scene" glass blurs against */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 15% 10%,  color-mix(in srgb, var(--p5), transparent 25%) 0%, transparent 65%),
        radial-gradient(ellipse 55% 50% at 85% 90%,  color-mix(in srgb, var(--p4), transparent 35%) 0%, transparent 65%),
        radial-gradient(ellipse 45% 40% at 75% 20%,  color-mix(in srgb, var(--acc), transparent 88%) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at 30% 80%,  color-mix(in srgb, var(--p5), transparent 50%) 0%, transparent 60%),
        radial-gradient(ellipse 30% 30% at 55% 50%,  color-mix(in srgb, var(--p4), transparent 70%) 0%, transparent 55%);
      animation: bgPulse 9s ease-in-out infinite alternate;
      pointer-events: none;
      z-index: 0;
    }
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 40% 35% at 90% 30%, color-mix(in srgb, var(--acc), transparent 93%) 0%, transparent 55%),
        radial-gradient(ellipse 35% 30% at 10% 70%, color-mix(in srgb, var(--p5), transparent 60%)  0%, transparent 55%);
      animation: bgPulse2 12s ease-in-out infinite alternate;
      pointer-events: none;
      z-index: 0;
    }

    @keyframes bgPulse  { 0% { opacity:0.75; transform:scale(1);    } 100% { opacity:1;    transform:scale(1.06); } }
    @keyframes bgPulse2 { 0% { opacity:1;    transform:scale(1.04); } 100% { opacity:0.7;  transform:scale(1);    } }

    /* ══════════════════════════════════════════════
       PREMIUM ANIMATIONS
    ══════════════════════════════════════════════ */

    /* ── Screen entrance ── */
    @keyframes screenIn {
      from { opacity: 0; transform: translateY(12px) scale(0.99); }
      to   { opacity: 1; transform: translateY(0)    scale(1);    }
    }
    .screen.active {
      animation: screenIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* ── Card stagger entrance ── */
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .screen.active .card {
      animation: cardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .screen.active .card:nth-child(1) { animation-delay: 0.05s; }
    .screen.active .card:nth-child(2) { animation-delay: 0.10s; }
    .screen.active .card:nth-child(3) { animation-delay: 0.15s; }
    .screen.active .card:nth-child(4) { animation-delay: 0.20s; }
    .screen.active .card:nth-child(5) { animation-delay: 0.25s; }

    /* ── Setup header entrance ── */
    @keyframes headerIn {
      from { opacity: 0; transform: translateY(-10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .screen.active .setup-header {
      animation: headerIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: 0.02s;
    }

    /* ── Question card fade-in ── */
    @keyframes qCardPop {
      0%   { opacity: 0; transform: translateY(5px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .q-card-anim {
      animation: qCardPop 0.22s ease-out both;
    }

    /* ── Question expression number fade-in ── */
    @keyframes exprPop {
      0%   { opacity: 0; transform: scale(0.96); }
      100% { opacity: 1; transform: scale(1); }
    }
    .expr-anim {
      animation: exprPop 0.2s ease-out both;
      animation-delay: 0.06s;
    }

    /* ── Answer input entrance ── */
    @keyframes inputIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .ans-zone-anim {
      animation: inputIn 0.2s ease-out both;
      animation-delay: 0.1s;
    }

    /* ── Pick buttons stagger ── */
    @keyframes pickIn {
      from { opacity: 0; transform: scale(0.97); }
      to   { opacity: 1; transform: scale(1); }
    }
    .pick-btn-anim {
      animation: pickIn 0.18s ease-out both;
    }

    /* ── Correct answer flash ── */
    @keyframes correctFlash {
      0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--acc), transparent 20%); }
      50%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--acc), transparent 80%); }
      100% { box-shadow: 0 0 20px color-mix(in srgb, var(--acc), transparent 70%); }
    }
    .ans-input.correct { animation: correctFlash 0.4s ease-out forwards; }

    /* ── Wrong answer shake ── */
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      20%  { transform: translateX(-6px); }
      40%  { transform: translateX(6px); }
      60%  { transform: translateX(-4px); }
      80%  { transform: translateX(4px); }
    }
    .shake { animation: shake 0.35s ease-out; }

    /* ── Feedback box slide-in ── */
    @keyframes fbIn {
      from { opacity: 0; transform: translateY(-6px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)    scale(1); }
    }
    .fb-box { animation: none; }
    .fb-box.visible { opacity: 1; pointer-events: auto; animation: fbIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }

    /* ── Score pill bump on correct ── */
    @keyframes pillBump {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.07); }
      100% { transform: scale(1); }
    }
    .pill-bump { animation: pillBump 0.3s ease-out; }

    /* ── Progress bar fill smooth ── */
    .prog-fill { transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

    /* ── Results screen entrance ── */
    @keyframes bigNumIn {
      from { opacity: 0; transform: scale(0.5); }
      to   { opacity: 1; transform: scale(1); }
    }
    .big-pct-anim {
      animation: bigNumIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      animation-delay: 0.1s;
    }
    @keyframes statIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .stat-c { animation: statIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .stat-c:nth-child(1) { animation-delay: 0.15s; }
    .stat-c:nth-child(2) { animation-delay: 0.22s; }
    .stat-c:nth-child(3) { animation-delay: 0.29s; }

    /* ── Button press feel ── */
    .check-btn, .again-btn, #s-setup .start-btn, .next-btn, .home-btn {
      transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .check-btn:active:not(:disabled),
    .again-btn:active,
    #s-setup .start-btn:active,
    .next-btn:active,
    .home-btn:active {
      transform: scale(0.96);
    }

    /* ── Toggle slide feel ── */
    .tslider::before { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s; }

    /* ── Type/timer btn tap ── */
    .type-btn, .timer-opt {
      transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .type-btn:active, .timer-opt:active { transform: scale(0.94); }

    /* ── Lives pop ── */
    @keyframes lifeOut {
      0%   { transform: scale(1); opacity: 1; }
      50%  { transform: scale(1.4); opacity: 0.6; }
      100% { transform: scale(0); opacity: 0; }
    }
    .life-lost { animation: lifeOut 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

    /* ── Shimmer on cards (very subtle) ── */
    @keyframes shimmer {
      0%   { background-position: -200% center; }
      100% { background-position:  200% center; }
    }

    /* ── Glowing border pulse on q-card ── */
    @keyframes borderPulse {
      0%, 100% { border-color: color-mix(in srgb, var(--acc), transparent 85%); }
      50%       { border-color: color-mix(in srgb, var(--acc), transparent 65%); }
    }
    .q-card { animation: borderPulse 3s ease-in-out infinite; }

    /* ── Pick btn hover lift ── */
    .pick-btn { transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
    .pick-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); }
    .pick-btn:active:not(:disabled) { transform: scale(0.97); }

    /* ── num-inp focus glow ── */
    .num-inp { transition: border-color 0.2s, box-shadow 0.2s; }
    .num-inp:focus { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc), transparent 85%); }


    .page-wrap, .app { position: relative; z-index: 1; }

    /* ── Page wrapper ── */
    .page-wrap {
      background: transparent;
      min-height: 100dvh;
      height: auto;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: 0;
    }

    /* ── Main app card ── */
    .app {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  height: auto;
  display: flex;
  flex-direction: column;

  border-radius: 20px;
  position: relative;
  overflow: hidden;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--p4), transparent 92%) 0%,
    color-mix(in srgb, var(--p0), transparent 65%) 60%,
    color-mix(in srgb, var(--p1), transparent 72%) 100%
  );

  border: 1px solid color-mix(in srgb, var(--acc), transparent 88%);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.8),
    0 0 60px color-mix(in srgb, var(--p4), transparent 88%),
    inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 92%),
    inset 0 0 40px color-mix(in srgb, var(--p4), transparent 92%);

  padding: 16px;
}

/* Glowing top edge — the signature effect */
.app::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--acc), transparent 50%) 30%,
    color-mix(in srgb, var(--acc), transparent 20%) 50%,
    color-mix(in srgb, var(--acc), transparent 50%) 70%,
    transparent
  );
  border-radius: 50%;
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 2;
}

.app::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--p4), transparent 90%);
  pointer-events: none;
  z-index: 1;
}

.setup-header {
  border-radius: 20px;
  margin: 0;
  width: 100%;
  padding: clamp(20px, 5vw, 32px);
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--p5), transparent 55%) 0%,
    color-mix(in srgb, var(--p3), transparent 45%) 50%,
    color-mix(in srgb, var(--p1), transparent 40%) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--acc), transparent 82%);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.6),
    0 0 40px color-mix(in srgb, var(--p4), transparent 80%),
    inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 75%),
    inset 0 0 80px color-mix(in srgb, var(--p4), transparent 85%);
}

/* Glowing lime top edge on header */
.setup-header::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--acc), transparent 40%) 25%,
    var(--acc) 50%,
    color-mix(in srgb, var(--acc), transparent 40%) 75%,
    transparent
  );
  filter: blur(0.3px);
  pointer-events: none;
}

/* Inner bloom */
.setup-header::after {
  content: "";
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 120px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--acc), transparent 88%) 0%, transparent 70%);
  pointer-events: none;
}

    /* On wider screens: show card with margins */
    @media (min-width: 600px) {
      html, body { overflow-y: auto; height: auto; }
      .page-wrap {
        height: auto;
        min-height: 100dvh;
        padding: 32px 20px;
        align-items: flex-start;
      }
      .app {
        height: auto;
        min-height: unset;
        border-radius: 20px;
        max-width: 100%;
      }
    }

    @media (min-width: 900px) {
      .page-wrap { align-items: center; min-height: 100vh; padding: 40px 20px; }
      .app { width: 100%; max-width: 100%; min-height: unset; }
    }

    .screen {
  display: none;
  flex-direction: column;
  gap: 16px;
}
    #s-setup {
      padding-bottom: clamp(96px, 22vw, 120px);
    }
    .screen.active { display: flex; }

    /* ════════════════════════════════════
       SETUP SCREEN
    ════════════════════════════════════ */
    
    .setup-header h1 {
      font-size: clamp(22px, 6vw, 34px);
      font-weight: 700;
      color: #eff8e2;
      margin-bottom: 6px;
      letter-spacing: -0.5px;
      line-height: 1.2;
    }
    .setup-header p {
      /* golden ratio: title / 1.618 → clamped proportionally */
      font-size: clamp(13.6px, 3.7vw, 21px);
      color: rgba(239,248,226,0.65);
      font-weight: 400;
    }

    .setup-body {
  margin: 0;
  width: 100%;
  padding: clamp(16px, 4vw, 24px);

  border-radius: 20px;
  background: color-mix(in srgb, var(--p0), transparent 82%);

  backdrop-filter: blur(16px);

  border: 1px solid color-mix(in srgb, var(--acc), transparent 92%);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.7),
    inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 96%);

  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
    .card {
      background: color-mix(in srgb, var(--p5), transparent 78%);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border-radius: clamp(10px, 3vw, 16px);
      padding: clamp(10px, 3.5vw, 20px);
      margin-bottom: clamp(8px, 2.5vw, 14px);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 88%);
      box-shadow:
        0 4px 24px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 96%);
      position: relative;
      overflow: hidden;
    }
    .card::before {
      content: '';
      position: absolute;
      top: 0; left: 15%; right: 15%;
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc), transparent 60%), transparent);
      pointer-events: none;
    }
    .card-title {
      font-size: clamp(10px, 2.5vw, 11px);
      font-weight: 600;
      color: rgba(239,248,226,0.4);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: clamp(8px, 2.5vw, 12px);
    }

    .field-row {
      display: flex;
      align-items: center;
      gap: clamp(6px, 2vw, 10px);
      margin-bottom: clamp(6px, 2vw, 12px);
      flex-wrap: nowrap;
    }
    .field-row:last-child { margin-bottom: 0; }
    .field-label {
      font-size: clamp(13px, 3.5vw, 15px);
      color: #eff8e2;
      flex: 1;
      min-width: 100px;
    }

    .num-inp {
      width: clamp(64px, 18vw, 80px);
      padding: clamp(6px, 2vw, 9px) 10px;
      font-size: clamp(13px, 3.5vw, 15px);
      border: 1.5px solid rgba(255,255,255,0.2);
      border-radius: 10px;
      background: color-mix(in srgb, var(--p0), transparent 20%);
      color: #eff8e2;
      text-align: center;
      outline: none;
      font-family: 'Inter', sans-serif;
      -moz-appearance: textfield;
    }
    .num-inp::-webkit-inner-spin-button,
    .num-inp::-webkit-outer-spin-button { -webkit-appearance: none; }
    .num-inp:focus { border-color: #eff8e2; }

    .type-row { display: flex; gap: clamp(6px, 2vw, 8px); }
    .type-btn {
      flex: 1;
      min-width: 0;
      padding: clamp(9px, 2.5vw, 11px) 4px;
      border: 1.5px solid rgba(239,248,226,0.2);
      border-radius: 10px;
      background: transparent;
      color: rgba(239,248,226,0.45);
      font-size: clamp(11px, 2.8vw, 14px);
      cursor: pointer;
      transition: all 0.18s;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      overflow: hidden;
    }
    .type-btn.active { border-color: var(--acc); background: color-mix(in srgb, var(--acc), transparent 88%); color: var(--acc); box-shadow: 0 0 10px color-mix(in srgb, var(--acc), transparent 80%), inset 0 0 8px color-mix(in srgb, var(--acc), transparent 95%); }

    .tog-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: clamp(7px, 2vw, 12px) 0;
      border-bottom: 1px solid rgba(239,248,226,0.1);
    }
    .tog-row:last-child { border-bottom: none; padding-bottom: 0; }
    .tog-label {
      font-size: clamp(13px, 3.5vw, 15px);
      color: #eff8e2;
      flex: 1;
      font-weight: 400;
    }
    .tog-sub {
      font-size: clamp(10px, 2.5vw, 11px);
      color: rgba(239,248,226,0.35);
      display: block;
      margin-top: 2px;
    }

    /* Toggle — fixed size, never shrinks */
    .toggle { position: relative; width: 50px; height: 27px; flex-shrink: 0; cursor: pointer; }
    .toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .tslider {
      position: absolute; inset: 0;
      background: var(--p1);
      border-radius: 14px;
      transition: background 0.2s;
      border: 1.5px solid rgba(239,248,226,0.25);
    }
    .tslider::before {
      content: '';
      position: absolute;
      width: 19px; height: 19px;
      left: 3px; top: 3px;
      background: #eff8e2;
      border-radius: 50%;
      transition: transform 0.2s, background 0.2s;
    }
    .toggle input:checked + .tslider { background: var(--p4); border-color: var(--acc); box-shadow: 0 0 10px color-mix(in srgb, var(--p4), transparent 50%), 0 0 4px color-mix(in srgb, var(--acc), transparent 70%); }
    .toggle input:checked + .tslider::before { transform: translateX(23px); background: var(--acc-hi); }

    .setup-reveal {
      overflow: hidden;
      contain: layout paint;
    }
    .setup-reveal.open {
      animation: setupRevealIn 0.2s cubic-bezier(0.22,1,0.36,1) both;
    }
    .setup-reveal.closing {
      animation: setupRevealOut 0.18s ease both;
    }
    @keyframes setupRevealIn {
      from { max-height: 0; opacity: 0; transform: translateY(-5px); }
      to { max-height: 220px; opacity: 1; transform: translateY(0); }
    }
    @keyframes setupRevealOut {
      from { max-height: 220px; opacity: 1; transform: translateY(0); }
      to { max-height: 0; opacity: 0; transform: translateY(-5px); }
    }

    @media (max-width: 560px) {
      .setup-reveal.open {
        animation-name: setupRevealMobileIn;
        animation-duration: 0.24s;
        animation-timing-function: cubic-bezier(0.22,1,0.36,1);
      }
      .setup-reveal.closing {
        animation-name: setupRevealMobileOut;
        animation-duration: 0.2s;
        animation-timing-function: cubic-bezier(0.4,0,0.2,1);
      }
      @keyframes setupRevealMobileIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
      }
      @keyframes setupRevealMobileOut {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(-5px); }
      }
    }

    #s-setup .start-btn {
      margin: 4px clamp(12px, 4vw, 20px) clamp(12px, 4vw, 20px);
      padding: clamp(12px, 3.2vw, 16px);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 70%);
      border-radius: 14px;
      background: linear-gradient(135deg, var(--p5), var(--p4));
      color: #eff8e2;
      font-size: clamp(14px, 3.8vw, 17px);
      font-weight: 600;
      cursor: pointer;
      width: calc(100% - clamp(24px, 8vw, 40px));
      letter-spacing: 0.01em;
      transition: all 0.2s;
      font-family: 'Inter', sans-serif;
      flex-shrink: 0;
      box-shadow:
        0 0 20px color-mix(in srgb, var(--p4), transparent 60%),
        0 4px 12px rgba(0,0,0,0.4),
        inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 85%);
    }
    #s-setup .start-btn:hover {
      box-shadow:
        0 0 30px color-mix(in srgb, var(--p4), transparent 40%),
        0 0 12px color-mix(in srgb, var(--acc), transparent 80%),
        0 4px 16px rgba(0,0,0,0.4),
        inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 80%);
      border-color: color-mix(in srgb, var(--acc), transparent 50%);
      transform: translateY(-1px);
    }

    /* iPhone safe area — home bar */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      @media (max-width: 599px) {
        #s-setup .start-btn {
          margin-bottom: calc(clamp(12px, 4vw, 20px) + env(safe-area-inset-bottom));
        }
      }
    }

    /* ════════════════════════════════════
       TEST SCREEN
    ════════════════════════════════════ */
    .test-top {
      background: linear-gradient(145deg, color-mix(in srgb, var(--p4), transparent 50%) 0%, color-mix(in srgb, var(--p1), transparent 3%) 100%);
      padding: clamp(14px, 4vw, 22px) clamp(14px, 5vw, 24px) clamp(12px, 3.5vw, 18px);
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      position: relative;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border-bottom: 1px solid color-mix(in srgb, var(--acc), transparent 85%);
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 88%), 0 0 30px color-mix(in srgb, var(--p4), transparent 85%);
    }
    .back-btn {
      width: clamp(32px, 8vw, 38px);
      height: clamp(32px, 8vw, 38px);
      border-radius: 10px;
      background: var(--p2);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .back-btn svg {
      width: clamp(16px, 4vw, 20px);
      height: clamp(16px, 4vw, 20px);
      stroke: #eff8e2;
      fill: none;
      color: #eff8e2;
    }
    .top-meta { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
    .q-pill {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: clamp(5px, 1.5vw, 7px) clamp(10px, 3vw, 15px);
      font-size: clamp(11px, 3vw, 14px);
      color: rgba(239,248,226,0.9);
      font-weight: 500;
      white-space: nowrap;
    }
    .q-pill span { color: #eff8e2; font-weight: 600; }
    .score-pill {
      background: color-mix(in srgb, var(--acc), transparent 85%);
      border-radius: 20px;
      padding: clamp(5px, 1.5vw, 7px) clamp(10px, 3vw, 15px);
      font-size: clamp(11px, 3vw, 14px);
      color: var(--acc-hi);
      font-weight: 600;
      border: 1px solid color-mix(in srgb, var(--acc-hi), transparent 50%);
      white-space: nowrap;
    }

  
    .prog-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  overflow: hidden;
}
    .prog-fill { height: 100%; background: linear-gradient(90deg,var(--p6),var(--acc)); border-radius: 2px; transition: width 0.35s; }
.prog-wrap {
  margin-top: 18px;   /* spacing inside header */
}
    .q-card-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: clamp(4px, 1.5vw, 8px);
}

.q-card-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.q-timer-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.timer-arc-svg {
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
  flex-shrink: 0;
  display: block;
}

.timer-arc-bg {
  fill: none;
  stroke: rgba(239,248,226,0.07);
  stroke-width: 3.5;
}

.timer-arc-fill {
  fill: none;
  stroke: var(--acc);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 0;
  opacity: 0.35;
  transition: stroke-dashoffset 0.15s linear, stroke 0.6s ease;
}

.q-chip-label {
  font-size: 10px;
  color: rgba(239,248,226,0.3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Timer seconds text label — centered inside the arc ── */
.timer-secs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(239,248,226,0.5);
  letter-spacing: 0.01em;
  line-height: 1;
  pointer-events: none;
  transition: color 0.6s ease;
}

/* ── Urgent state: ≤3 seconds ── */
@keyframes timerPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.88; }
}

.q-timer-chip.urgent {
  animation: timerPulse 1s ease-in-out infinite;
}

.q-timer-chip.urgent .timer-arc-fill {
  stroke: #e05555;
  opacity: 0.55;
}

.q-timer-chip.urgent .timer-secs {
  color: #e05555;
}

/* stopwatch now uses .q-timer-chip */

.stopwatch-num {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--acc), transparent 30%);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

    .q-card {
      margin: 0 clamp(12px, 4vw, 20px) clamp(10px, 3vw, 16px);
      background: color-mix(in srgb, var(--p5), transparent 80%);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-radius: clamp(14px, 4vw, 20px);
      padding: clamp(10px, 2.5vw, 14px) clamp(10px, 2.5vw, 14px) clamp(16px, 5vw, 24px);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 85%);
      box-shadow:
            0 8px 32px rgba(0,0,0,0.4),
        0 0 24px color-mix(in srgb, var(--p4), transparent 88%),
        inset 0 1px 0 rgba(255,255,255,0.08),
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
    .q-card::before {
      content: '';
      position: absolute;
      top: 0; left: 20%; right: 20%;
      height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc), transparent 45%), transparent);
      pointer-events: none;
    }
    .q-badge {
      display: inline-block;
      font-size: 10px;
      padding: 3px 9px;
      border-radius: 20px;
      font-weight: 600;
      margin-bottom: 0;
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }
    .badge-sq { background: rgba(239,248,226,0.1); color: #eff8e2; border: 1px solid rgba(239,248,226,0.3); }
    .badge-cu { background: color-mix(in srgb, var(--acc), transparent 85%); color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc), transparent 60%); }
    .q-number {
      font-size: clamp(10px, 2.5vw, 12px);
      color: rgba(239,248,226,0.35);
      font-weight: 400;
      white-space: nowrap;
    }
    .q-expr {
      font-size: clamp(30px, 9vw, 44px);
      font-weight: 700;
      color: #eff8e2;
      text-align: center;
      margin: clamp(8px, 2.5vw, 12px) 0 clamp(4px, 1.5vw, 8px);
    }
    .q-sub {
      font-size: clamp(11px, 3vw, 14px);
      color: rgba(239,248,226,0.35);
      text-align: center;
      font-weight: 400;
    }

    .ans-zone {
      padding: 0 clamp(12px, 4vw, 20px) 10px;
      flex-shrink: 0;
    }
    .ans-row {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px; /* ADD THIS */
}
    .ans-input {
      flex: 1;
 min-width: 0; /* 🔥 critical fix */
      padding: clamp(11px, 3.5vw, 15px);
      font-size: clamp(17px, 5vw, 22px);
      font-weight: 600;
      border: 2px solid rgba(239,248,226,0.2);
      border-radius: clamp(10px, 3vw, 13px);
      background: color-mix(in srgb, var(--p4), transparent 75%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      color: #eff8e2;
      text-align: center;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      font-family: 'Inter', sans-serif;
      -moz-appearance: textfield;
      min-width: 0;
    }
    .ans-input::-webkit-inner-spin-button,
    .ans-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .ans-input:focus { border-color: var(--p6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p4), transparent 70%), 0 0 16px color-mix(in srgb, var(--p4), transparent 75%); }
    /* Correct — green glow, accent colour */
    .ans-input.correct {
      border-color: var(--acc);
      background: color-mix(in srgb, var(--acc), transparent 90%);
      color: var(--acc);
      box-shadow: 0 0 18px color-mix(in srgb, var(--acc), transparent 72%),
                  0 0 0 3px color-mix(in srgb, var(--acc), transparent 88%);
    }
    /* Wrong — red tint, user answer stays readable */
    .ans-input.wrong {
      border-color: #e05555;
      background: color-mix(in srgb, #e05555, transparent 88%);
      color: #ff8080;
    }

    /* ── Input wrapper — needed for ✔ icon overlay ── */
    .ans-input-wrap {
      flex: 1;
      min-width: 0;
      position: relative;
      display: flex;
      align-items: center;
    }
    .ans-input-wrap .ans-input { width: 100%; }

    /* ✔ icon — fades in on correct */
    .ans-input-wrap::after {
      content: '✔';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%) scale(0.6);
      font-size: 16px;
      color: var(--acc);
      opacity: 0;
      transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
      pointer-events: none;
    }
    .ans-input-wrap.show-correct::after {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    /* ── Answer caption — hidden, replaced by inline split view ── */
    .ans-caption { display: none; }

    /* ── Split-view inside the input wrapper when wrong ── */
    .ans-input-wrap.split-wrong {
      overflow: hidden;
    }
    .ans-input-wrap.split-wrong .ans-input {
      /* The actual input is hidden; we show the split overlay instead */
      opacity: 0;
      pointer-events: none;
    }
    /* Overlay that shows wrong | correct split */
    .ans-split-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      border-radius: inherit;
      overflow: hidden;
      pointer-events: none;
    }
    .ans-split-overlay .split-wrong-val {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ff8080;
      font-size: clamp(16px, 4.5vw, 20px);
      font-weight: 700;
      transform: translateX(-100%);
      animation: splitSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      padding: 0 8px;
      min-width: 0;
    }
    .ans-split-overlay .split-sep {
      width: 1.5px;
      align-self: stretch;
      background: rgba(239,248,226,0.2);
      flex-shrink: 0;
      transform: scaleY(0);
      animation: splitSepIn 0.2s 0.18s ease forwards;
    }
    .ans-split-overlay .split-correct-val {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--acc);
      font-size: clamp(16px, 4.5vw, 20px);
      font-weight: 700;
      opacity: 0;
      animation: splitCorrectIn 0.28s 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      padding: 0 8px;
      min-width: 0;
    }
    @keyframes splitSlideIn {
      from { transform: translateX(-100%); opacity: 0; }
      to   { transform: translateX(0);    opacity: 1; }
    }
    @keyframes splitSepIn {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }
    @keyframes splitCorrectIn {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .check-btn {
      padding: clamp(11px, 3.5vw, 15px);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 75%);
      border-radius: clamp(10px, 3vw, 13px);
      background: linear-gradient(135deg, var(--p5), var(--p4));
      color: #eff8e2;
      font-size: clamp(13px, 3.5vw, 16px);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: 'Inter', sans-serif;
      width: 100%;
      display: block;
      box-shadow: 0 0 16px color-mix(in srgb, var(--p4), transparent 65%), inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 90%);
    }
    .check-btn.is-next {
      background: transparent;
      border-color: rgba(239,248,226,0.2);
      box-shadow: none;
      font-weight: 500;
    }
    .check-btn.is-next:hover { background: var(--p2); }
    .check-btn:hover:not(:disabled) {
      box-shadow: 0 0 24px rgba(87,50,128,0.55), 0 0 8px color-mix(in srgb, var(--acc), transparent 85%);
      border-color: color-mix(in srgb, var(--acc), transparent 60%);
    }
    .check-btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; }

    .action-wrap {
      position: relative;
      margin: 0 clamp(12px, 4vw, 20px) clamp(14px, 4vw, 20px);
    }
    .fb-box {
      position: absolute;
      bottom: calc(100% + 6px);
      left: 0; right: 0;
      padding: clamp(10px, 3vw, 13px) clamp(12px, 4vw, 18px);
      border-radius: 12px;
      font-size: clamp(12px, 3.2vw, 15px);
      font-weight: 500;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
      z-index: 10;
    }
    .fb-ok { background: color-mix(in srgb, var(--acc), transparent 88%); color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc), transparent 60%); }
    .fb-no { background: color-mix(in srgb, #ff7070, transparent 75%); color: #ff5555; border: 2px solid color-mix(in srgb, #ff7070, transparent 40%); font-weight: 700; }

    .next-btn { display: none; }

    /* ════════════════════════════════════
       RESULTS SCREEN
    ════════════════════════════════════ */
    .res-title {
      font-size: clamp(15px, 4.5vw, 20px);
      font-weight: 700;
      color: #eff8e2;
      flex: 1;
    }
    .score-circle {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: clamp(20px, 6vw, 32px) 0 clamp(14px, 4vw, 22px);
      flex-shrink: 0;
    }
    .big-pct {
      font-size: clamp(44px, 13vw, 62px);
      font-weight: 700;
      color: var(--acc);
      letter-spacing: -1px;
      text-shadow:
        0 0 20px color-mix(in srgb, var(--acc), transparent 30%),
        0 0 60px color-mix(in srgb, var(--acc), transparent 70%),
        0 0 100px color-mix(in srgb, var(--acc), transparent 85%);
    }
    .big-sub {
      font-size: clamp(12px, 3.2vw, 15px);
      color: rgba(239,248,226,0.4);
      margin-top: 4px;
      font-weight: 400;
    }
    /* ── Results Bento Grid ── */
    .res-bento {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: clamp(7px,2vw,10px);
      margin: 0 clamp(12px,4vw,20px) clamp(10px,3vw,14px);
      flex-shrink: 0;
    }
    /* Best % and Best Streak — each a half-width card */
    .pb-c {
      background: var(--p2);
      border-radius: 14px;
      padding: clamp(12px,3.5vw,16px) clamp(10px,3vw,14px);
      text-align: center;
      border: 1px solid rgba(239,248,226,0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 16px rgba(0,0,0,0.3);
    }
    .pb-v { font-size: clamp(18px,5vw,22px); font-weight: 800; color: #eff8e2; line-height: 1; }
    .pb-l { font-size: 10px; color: rgba(239,248,226,0.35); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.08em; }
    .pb-new { color: var(--acc); text-shadow: 0 0 12px color-mix(in srgb, var(--acc), transparent 50%); }

    /* XP card — spans full width */
    .pb-xp-card {
      grid-column: 1 / -1;
      background: var(--p2);
      border-radius: 14px;
      padding: clamp(10px,3vw,14px) clamp(12px,4vw,16px);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 88%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 16px rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .pb-xp-left { display: flex; align-items: baseline; gap: 6px; }
    .pb-xp-val { font-size: clamp(18px,5vw,22px); font-weight: 800; color: var(--acc); line-height: 1; }
    .pb-xp-lbl { font-size: 10px; color: rgba(239,248,226,0.35); text-transform: uppercase; letter-spacing: 0.08em; }
    .pb-xp-bar-wrap { flex: 1; max-width: 140px; }
    .pb-xp-bar-bg { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--p4), transparent 60%); overflow: hidden; }
    .pb-xp-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--acc-lo),var(--acc)); transition: width 0.5s cubic-bezier(0.22,1,0.36,1); width: 0%; }

    /* Correct / Wrong — single card with divider */
    .res-cw-card {
      grid-column: 1 / -1;
      background: color-mix(in srgb, var(--p5), transparent 78%);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--acc), transparent 90%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 16px rgba(0,0,0,0.3);
      display: flex;
      align-items: stretch;
    }
    .res-cw-half {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: clamp(12px,3.5vw,16px) 8px;
    }
    .res-cw-divider {
      width: 1px;
      background: rgba(239,248,226,0.1);
      margin: 12px 0;
      flex-shrink: 0;
    }
    .res-cw-val { font-size: clamp(22px,6vw,28px); font-weight: 800; line-height: 1; }
    .res-cw-lbl { font-size: 10px; color: rgba(239,248,226,0.4); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.08em; }
    .res-cw-ok { color: var(--acc); }
    .res-cw-no { color: #ff6b6b; }

    /* hide old stat-row and stat-c */
    .stat-row { display: none !important; }

    /* ── Timed-mode stat row cards ── */
    #timedStatRow .stat-c {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: var(--p2);
      border-radius: 12px;
      padding: clamp(10px, 3vw, 14px) 8px;
      border: 1px solid rgba(239,248,226,0.1);
      text-align: center;
    }
    .stat-v {
      font-size: clamp(22px, 6vw, 28px);
      font-weight: 800;
      line-height: 1;
      color: #eff8e2;
    }
    .stat-l {
      font-size: 10px;
      color: rgba(239,248,226,0.4);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-top: 2px;
    }
    .sv-ok { color: var(--acc); }
    .sv-no { color: #ff6b6b; }

    .review-wrap {
      margin: 0 clamp(12px, 4vw, 20px) clamp(10px, 3vw, 14px);
      background: color-mix(in srgb, var(--p4), transparent 80%);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--acc), transparent 90%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 8px 32px rgba(0,0,0,0.35);
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .review-head {
      padding: 9px clamp(12px, 4vw, 16px);
      font-size: 10px;
      font-weight: 700;
      color: rgba(239,248,226,0.35);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      border-bottom: 1px solid rgba(239,248,226,0.08);
      flex-shrink: 0;
    }
    /* No inner scroll — let the page scroll naturally */
    .review-scroll { overflow: visible; }
    .history-empty {
      padding: 14px;
      text-align: center;
      color: rgba(239,248,226,0.25);
      font-size: 12px;
    }
    .review-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px clamp(12px, 4vw, 16px);
      border-bottom: 1px solid rgba(239,248,226,0.07);
      gap: 8px;
    }
    .review-item:last-child { border-bottom: none; }
    .ri-q { font-size: 13px; color: rgba(239,248,226,0.55); flex-shrink: 0; }
    .ri-a { font-size: 12px; font-weight: 600; text-align: right; }
    .ri-ok { color: var(--acc); }
    .ri-no { color: #ff6b6b; }

    .res-btns {
      display: flex;
      gap: clamp(8px, 2.5vw, 12px);
      padding: clamp(12px,3.5vw,16px) clamp(12px, 4vw, 20px) clamp(16px, 5vw, 26px);
      flex-shrink: 0;
    }
    .again-btn {
      flex: 1;
      padding: clamp(12px, 3.5vw, 16px);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 75%);
      border-radius: 12px;
      background: linear-gradient(135deg, var(--p5), var(--p4));
      color: #eff8e2;
      font-size: clamp(13px, 3.5vw, 16px);
      font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.2s;
      box-shadow: 0 0 16px color-mix(in srgb, var(--p4), transparent 65%), inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 90%);
    }
    .again-btn:hover {
      box-shadow: 0 0 28px rgba(87,50,128,0.55), 0 0 8px color-mix(in srgb, var(--acc), transparent 85%);
      border-color: color-mix(in srgb, var(--acc), transparent 60%);
    }
    .home-btn {
      padding: clamp(12px, 3.5vw, 16px) clamp(14px, 4vw, 22px);
      border: 1.5px solid rgba(239,248,226,0.2);
      border-radius: 12px;
      background: transparent;
      color: #eff8e2;
      font-size: clamp(13px, 3.5vw, 15px);
      font-weight: 500;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: background 0.15s;
    }
    .home-btn:hover { background: var(--p2); }


    /* ════════════════════════════════════
       PICK MODE (multiple choice)
    ════════════════════════════════════ */
    .pick-zone {
  flex: 1;
  display: flex;
  align-items: stretch;   /* was center ❌ */
  justify-content: stretch;
}

.pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
    .pick-btn {
      padding: clamp(14px, 4vw, 20px) clamp(10px, 3vw, 16px);
      border: 1.5px solid color-mix(in srgb, var(--acc), transparent 85%);
      border-radius: clamp(10px, 3vw, 14px);
      background: color-mix(in srgb, var(--p5), transparent 80%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      color: #eff8e2;
      font-size: clamp(18px, 5.5vw, 26px);
      font-weight: 700;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.18s;
      text-align: center;
      width: 100%;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 95%);
    }
    .pick-btn:hover:not(:disabled) {
      border-color: color-mix(in srgb, var(--acc), transparent 60%);
      background: linear-gradient(145deg, color-mix(in srgb, var(--p4), transparent 60%), rgba(45,10,61,0.9));
      box-shadow: 0 0 16px color-mix(in srgb, var(--p4), transparent 60%);
    }
    .pick-btn.selected {
      border-color: color-mix(in srgb, var(--acc), transparent 45%);
      background: color-mix(in srgb, var(--acc), transparent 88%);
      box-shadow: 0 0 16px color-mix(in srgb, var(--acc), transparent 78%);
    }
    .pick-btn.correct {
      border-color: var(--acc);
      background: color-mix(in srgb, var(--acc), transparent 88%);
      color: var(--acc);
      box-shadow: 0 0 20px color-mix(in srgb, var(--acc), transparent 70%);
    }
    .pick-btn.wrong {
      border-color: #e05555;
      background: color-mix(in srgb, #e05555, transparent 82%);
      color: #ff8080;
      box-shadow: 0 0 14px color-mix(in srgb, #e05555, transparent 75%);
    }
    .pick-btn.reveal {
      border-color: color-mix(in srgb, var(--acc), transparent 55%);
      background: color-mix(in srgb, var(--acc), transparent 91%);
      color: color-mix(in srgb, var(--acc), transparent 25%);
      box-shadow: 0 0 14px color-mix(in srgb, var(--acc), transparent 82%);
    }


    .pick-btn:disabled { cursor: default; }
    .pick-icon {
      display: none;
    }

input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: var(--p1);
  color: #eff8e2;

  border: 1px solid rgba(239,248,226,0.2);
  border-radius: 8px;

  padding: 8px;
  font-family: 'Inter', sans-serif;
}

/* ───────── SELECT BASE ───────── */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 10px 12px;

  border-radius: 12px;
  border: 1px solid rgba(239,248,226,0.2);

  background: var(--p1);
  color: #eff8e2;

  font-family: 'Inter', sans-serif;
  font-size: 14px;

  cursor: pointer;

  /* subtle glow instead of blue */
  transition: border 0.2s, box-shadow 0.2s;
}

/* focus state (replaces blue) */
select:focus {
  outline: none;
  border-color: var(--p6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--p4), transparent 65%);
}

/* ───────── CUSTOM SELECT ───────── */
.custom-select {
  position: relative;
  width: 100%;
  font-family: 'Inter', sans-serif;
}

.select-trigger {
  padding: 8px 10px;              /* smaller */
  border-radius: 10px;            /* slightly tighter */
  border: 1px solid rgba(239,248,226,0.2);
  background: var(--p1);
  color: #eff8e2;
  cursor: pointer;
  position: relative;
  font-size: 13px;                /* smaller text */
  line-height: 1.2;
}

/* arrow */
.select-trigger::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #eff8e2;
}

/* dropdown */
.select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;

  background: var(--p1);
  border-radius: 14px;
  border: 1px solid rgba(239,248,226,0.15);

  box-shadow: 0 10px 30px rgba(0,0,0,0.6);

  overflow: hidden;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 10;
}

.custom-select.open .select-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* options */
.select-option {
  padding: 10px 12px;
  color: #eff8e2;
  cursor: pointer;
  transition: background 0.15s;
}

.select-option:hover {
  background: var(--p2);
}

.select-option.active {
  background: color-mix(in srgb, var(--acc), transparent 85%);
  color: var(--acc);
}

#s-results
.setup-body {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

* {
  -webkit-tap-highlight-color: transparent;
}

.custom-keyboard {
  margin-top: auto;   /* lock to bottom */
  display: none;
  width: 100%;
}
.top-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.kb-key {
  padding: 16px;
  font-size: 20px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid rgba(239,248,226,0.2);
  background: var(--p2);
  color: #eff8e2;
  cursor: pointer;
  transition: transform 0.08s ease-out, background 0.08s ease-out, border-color 0.08s ease-out;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.kb-key:active,
.kb-key.kb-pressed {
  transform: scale(0.94);
  background: color-mix(in srgb, var(--p4), transparent 30%);
  border-color: color-mix(in srgb, var(--acc), transparent 70%);
  transition: transform 0.05s ease-out, background 0.05s ease-out, border-color 0.05s ease-out;
}

.kb-del {
  color: var(--p7);
}

.kb-enter {
  background: var(--p4);
  color: #eff8e2;
}

/* .page-wrap height is set in the main block above */




    /* ════════════════════════════════════
       STREAK
    ════════════════════════════════════ */
    .streak-pill {
      background: color-mix(in srgb, var(--acc), transparent 82%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 65%);
      border-radius: 20px;
      padding: clamp(5px,1.5vw,7px) clamp(10px,3vw,15px);
      font-size: clamp(11px,3vw,14px);
      color: var(--acc);
      font-weight: 600;
      white-space: nowrap;
      display: none;
    }
    .streak-pill.active { display: block; }

    /* ════════════════════════════════════
       LIVES
    ════════════════════════════════════ */
    .lives-pill {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 20px;
      padding: clamp(5px,1.5vw,7px) clamp(10px,3vw,15px);
      font-size: clamp(11px,3vw,14px);
      color: #eff8e2;
      font-weight: 600;
      white-space: nowrap;
      letter-spacing: 0.05em;
    }

    /* ════════════════════════════════════
       GAME OVER screen
    ════════════════════════════════════ */
    .gameover-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex: 1;
      padding: 32px 20px;
    }
    .gameover-icon { font-size: 64px; line-height: 1; }
    .gameover-title {
      font-size: clamp(26px,7vw,36px);
      font-weight: 700;
      color: #eff8e2;
      letter-spacing: -0.5px;
    }
    .gameover-sub {
      font-size: clamp(13px,3.5vw,16px);
      color: rgba(239,248,226,0.45);
      text-align: center;
    }
    .gameover-score {
      font-size: clamp(44px,13vw,62px);
      font-weight: 700;
      color: var(--acc);
      text-shadow: 0 0 40px color-mix(in srgb, var(--acc), transparent 50%);
      letter-spacing: -1px;
    }

    /* range label */
    .bento-range-lbl {
      font-size: 13px;
      color: rgba(239,248,226,0.4);
      white-space: nowrap;
    }
    /* full-width questions input inside bento cell */
    .bento-q-inp {
      width: 100% !important;
      font-size: clamp(22px, 6vw, 28px) !important;
      font-weight: 700 !important;
      text-align: center;
      padding: clamp(10px, 3vw, 14px) !important;
    }

    /* ════════════════════════════════════
       DIFFICULTY PRESETS
    ════════════════════════════════════ */
    .diff-row { display: flex; gap: clamp(6px,2vw,8px); margin-bottom: clamp(8px,2.5vw,12px); }
    .diff-btn {
      flex: 1;
      min-width: 0;
      padding: clamp(7px,2vw,10px) 4px;
      border: 1.5px solid rgba(239,248,226,0.2);
      border-radius: 10px;
      background: transparent;
      color: rgba(239,248,226,0.45);
      font-size: clamp(11px,2.8vw,13px);
      cursor: pointer;
      transition: all 0.18s;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .diff-btn.active { border-color: var(--acc); background: color-mix(in srgb, var(--acc), transparent 85%); color: var(--acc); }

    /* ════════════════════════════════════
       REVERSE MODE
    ════════════════════════════════════ */
    .badge-rev { background: color-mix(in srgb, var(--p7), transparent 85%); color: var(--p7); border: 1px solid color-mix(in srgb, var(--p7), transparent 65%); }

    /* ════════════════════════════════════
       FOCUS MODE — number chips
    ════════════════════════════════════ */
    .focus-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .focus-chip {
      padding: 5px 11px;
      border-radius: 8px;
      border: 1.5px solid rgba(239,248,226,0.2);
      background: transparent;
      color: rgba(239,248,226,0.5);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      font-family: 'Inter', sans-serif;
    }
    .focus-chip.selected {
      border-color: var(--acc);
      background: color-mix(in srgb, var(--acc), transparent 85%);
      color: var(--acc);
    }
    .focus-all-btn {
      padding: 5px 11px;
      border-radius: 8px;
      border: 1.5px solid rgba(239,248,226,0.15);
      background: transparent;
      color: rgba(239,248,226,0.3);
      font-size: 12px;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.15s;
    }
    .focus-all-btn:hover { border-color: rgba(239,248,226,0.3); color: rgba(239,248,226,0.5); }

    /* ════════════════════════════════════
       RESULTS — personal bests + chart
    ════════════════════════════════════ */
    .pb-row { display: none !important; }
    .pb-c {
      background: var(--p2);
      border-radius: 12px;
      padding: clamp(10px,3vw,14px);
      text-align: center;
      border: 1px solid rgba(239,248,226,0.1);
    }
    .pb-v { font-size: clamp(16px,4.5vw,20px); font-weight: 700; color: #eff8e2; }
    .pb-l { font-size: clamp(10px,2.5vw,11px); color: rgba(239,248,226,0.35); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.06em; }
    .pb-new { color: var(--acc); text-shadow: 0 0 12px color-mix(in srgb, var(--acc), transparent 50%); }

    .chart-wrap {
      margin: 0 clamp(12px,4vw,20px) clamp(10px,3vw,14px);
      background: var(--p2);
      border-radius: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(239,248,226,0.1);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .chart-title {
      font-size: clamp(10px,2.5vw,11px);
      font-weight: 600;
      color: rgba(239,248,226,0.35);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }
    /* Compact inline row per type */
    .chart-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .chart-row-label {
      font-size: 11px;
      font-weight: 600;
      color: rgba(239,248,226,0.45);
      width: 50px;
      flex-shrink: 0;
    }
    .chart-row-bar-bg {
      flex: 1;
      height: 7px;
      border-radius: 99px;
      background: rgba(239,248,226,0.08);
      overflow: hidden;
      position: relative;
    }
    .chart-row-bar-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(239,248,226,0.12) calc(50% - 0.5px), rgba(239,248,226,0.12) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(90deg, rgba(239,248,226,0.10) 1px, transparent 1px),
        linear-gradient(270deg, rgba(239,248,226,0.10) 1px, transparent 1px);
      pointer-events: none;
      z-index: 0;
    }
    .chart-row-bar-fill {
      height: 100%;
      border-radius: 99px;
      transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
      width: 0%;
      position: relative;
      z-index: 1;
    }
    .chart-row-bar-fill.sq { background: color-mix(in srgb, var(--p7), transparent 30%); }
    .chart-row-bar-fill.cu { background: color-mix(in srgb, var(--acc), transparent 25%); }
    .chart-row-pct {
      font-size: 12px;
      font-weight: 700;
      color: #eff8e2;
      width: 34px;
      text-align: right;
      flex-shrink: 0;
    }
    .chart-axis {
      display: grid;
      grid-template-columns: 50px 1fr 34px;
      gap: 8px;
      margin-top: -2px;
      align-items: center;
    }
    .chart-axis-scale {
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      font-weight: 700;
      line-height: 1;
      color: rgba(239,248,226,0.28);
    }
    /* keep old selectors harmless */
    .chart-vals, .chart-bars, .chart-col, .chart-bar, .chart-bar-sq, .chart-bar-cu, .chart-lbl { display: none !important; }
    .chart-val { font-size: 12px; font-weight: 600; color: #eff8e2; }

    /* ════════════════════════════════════
       WEAKNESS SECTION
    ════════════════════════════════════ */
    .weakness-item { display: none; }
    .wi-n, .wi-bar-wrap, .wi-bar, .wi-pct { display: none; }

    /* ════════════════════════════════════
       CONFETTI
    ════════════════════════════════════ */
    .confetti-piece {
      position: fixed;
      width: 8px; height: 8px;
      border-radius: 2px;
      pointer-events: none;
      z-index: 9999;
      animation: confettiFall linear forwards;
    }
    @keyframes confettiFall {
      0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
      100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }

    /* ════════════════════════════════════
       KEYBOARD HINTS
    ════════════════════════════════════ */
    .kb-hint {
      font-size: 11px;
      color: rgba(239,248,226,0.2);
      text-align: center;
      padding: 4px 0 2px;
    }
    @media (pointer: coarse) { .kb-hint { display: none; } }

    /* ════════════════════════════════════
       SPACED REPETITION badge
    ════════════════════════════════════ */
    .retry-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--p4), transparent 70%);
      color: var(--acc-hi);
      border: 1px solid color-mix(in srgb, var(--p5), transparent 50%);
      margin-left: 6px;
      vertical-align: middle;
      letter-spacing: 0.04em;
    }

    /* ════════════════════════════════════
       BENTO GRID LAYOUT
    ════════════════════════════════════ */
    .bento-grid {
      display: grid;
      grid-template-columns: 5fr 4fr;
      grid-template-rows: auto;
      gap: 12px;
      padding: clamp(10px,3vw,16px);
      overflow-y: auto;
      overflow-x: hidden;
      flex: 1;
      min-height: 0;
      width: 100%;
      max-width: 100%;
    }
    .bento-cell.tall { grid-row: span 2; }

    /* full-width cells */
    .bento-cell { 
      background: var(--p2);
      border-radius: 16px;
      border: 1px solid rgba(239,248,226,0.1);
      padding: clamp(12px,3.5vw,18px);
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
      overflow: visible;
    }
    .bento-cell.wide { grid-column: 1 / -1; }
    .bento-cell.accent {
      background: color-mix(in srgb, var(--p4), transparent 88%);
      border-color: color-mix(in srgb, var(--p4), transparent 75%);
    }
    .bento-cell.green {
      background: rgba(173,168,182,0.1);
      border-color: rgba(173,168,182,0.2);
    }

    .bento-label {
      font-size: clamp(9px,2.2vw,10px);
      font-weight: 700;
      color: rgba(239,248,226,0.35);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* range row inside bento */
    .bento-range-row {
      display: flex;
      align-items: flex-end;
      gap: 8px;
    }
    .bento-range-col {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      min-width: 0;
    }
    .bento-range-col .bento-range-lbl { margin-bottom: 0; }
    .bento-range-row .num-inp { width: 100%; min-width: 0; }
    .bento-range-sep {
      color: rgba(239,248,226,0.3);
      font-size: 13px;
      padding-bottom: 10px;
    }

    /* toggle row inside bento — compact */
    .bento-tog {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .bento-tog-label {
      font-size: clamp(12px,3.2vw,14px);
      color: #eff8e2;
      font-weight: 400;
      flex: 1;
    }
    .bento-tog-sub {
      font-size: 10px;
      color: rgba(239,248,226,0.3);
      display: block;
      margin-top: 1px;
    }

    /* start button full width at bottom */
    .bento-start {
      position: fixed;
      left: 50%;
      bottom: clamp(14px,3.5vw,18px);
      transform: translateX(-50%);
      z-index: 1000;
      margin: 0;
      padding: clamp(14px,3.5vw,18px);
      border: none;
      border-radius: 16px;
      background: var(--acc);
      color: var(--p1); /* important for contrast */
      font-size: clamp(15px,4vw,18px);
      font-weight: 700;
      cursor: pointer;
      width: min(calc(100% - clamp(34px,7.5vw,56px)), 394px);
      letter-spacing: 0.01em;
      transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
      font-family: 'Inter', sans-serif;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      white-space: nowrap;
    }
    #s-setup > .bento-start {
      display: none !important;
    }
    #floatingStartBtn {
      display: none;
    }
    body[data-active-screen="s-setup"] #floatingStartBtn {
      display: flex;
    }
    .bento-start { box-shadow: 0 8px 24px color-mix(in srgb, var(--acc), transparent 70%); }
    .bento-start:hover { opacity: 0.92; box-shadow: 0 12px 32px color-mix(in srgb, var(--acc), transparent 60%); }
    .bento-start:active { transform: translateX(-50%) scale(0.98); }
    .bento-start-icon {
      width: 16px;
      height: 16px;
      border-radius: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .bento-start-icon svg {
      width: 15px;
      height: 15px;
      display: block;
      overflow: visible;
    }

    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      @media (max-width: 599px) {
        .bento-start {
          bottom: calc(clamp(10px,3vw,16px) + env(safe-area-inset-bottom));
        }
      }
    }

    /* ── Timer mini grid ── */
    .timer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .timer-opt {
      padding: 8px 4px;
      border-radius: 10px;
      border: 1.5px solid rgba(239,248,226,0.15);
      background: var(--p1);
      color: rgba(239,248,226,0.5);
      font-size: clamp(11px,2.8vw,12px);
      font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
      text-align: center;
      min-width: 0;
      overflow: hidden;
    }
    .timer-opt:hover { border-color: rgba(239,248,226,0.3); color: rgba(239,248,226,0.7); }
    .timer-opt.active { border-color: var(--acc); background: color-mix(in srgb, var(--acc), transparent 88%); color: var(--acc); box-shadow: 0 0 10px color-mix(in srgb, var(--acc), transparent 80%), inset 0 0 8px color-mix(in srgb, var(--acc), transparent 95%); }

    /* ════════════════════════════════════
       MOBILE FIXES
    ════════════════════════════════════ */
    @media (max-width: 480px) {
      .bento-grid {
        grid-template-columns: 1fr;
      }
      .bento-cell.wide {
        grid-column: 1;
      }
      .bento-cell.tall {
        grid-row: span 1;
      }
    }

    @media (max-width: 360px) {
      .q-pill, .score-pill, .streak-pill, .lives-pill {
        font-size: 10px;
        padding: 4px 8px;
      }
      .custom-keyboard {
        padding-bottom: env(safe-area-inset-bottom, 8px);
      }
      .kb-key {
        padding: 12px;
        font-size: 17px;
      }
    }

    .review-wrap {
      overflow: visible;
    }

    .setup-header h1,
    .setup-header p,
    .res-title {
      position: relative;
      z-index: 1;
    }
    /* ── Collapsible history ── */
    .history-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: clamp(10px,3vw,14px) clamp(12px,4vw,18px);
      cursor: pointer;
      user-select: none;
    }
    .history-toggle-label {
      font-size: clamp(10px,2.5vw,12px);
      font-weight: 600;
      color: rgba(239,248,226,0.35);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }
    .history-toggle-arrow {
      font-size: 12px;
      color: rgba(239,248,226,0.35);
      transition: transform 0.25s;
    }
    .history-toggle-arrow.open { transform: rotate(180deg); }
    .history-collapsible {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .history-collapsible.open { max-height: 400px; }

    /* ── Export button ── */
    .export-btn {
      padding: clamp(12px,3.5vw,16px) clamp(10px,3vw,16px);
      border: 1.5px solid rgba(239,248,226,0.2);
      border-radius: 12px;
      background: transparent;
      color: #eff8e2;
      font-size: clamp(12px,3vw,14px);
      font-weight: 500;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .export-btn:hover { background: rgba(239,248,226,0.08); }
    .erase-btn {
      background: none;
      border: none;
      color: rgba(239,248,226,0.2);
      font-size: 11px;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      transition: color 0.2s, background 0.2s;
      letter-spacing: 0.04em;
      display: block;
      margin: -8px auto 4px;
      text-align: center;
    }
    .erase-btn:hover { color: #ff6b6b; background: rgba(255,107,107,0.08); }

    .tables-select-btn {
      padding: 4px 10px;
      border-radius: 7px;
      border: 1.5px solid rgba(239,248,226,0.2);
      background: transparent;
      color: rgba(239,248,226,0.5);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.15s;
    }
    .tables-select-btn:hover { border-color: rgba(239,248,226,0.4); color: rgba(239,248,226,0.8); }

    .mult2d-note {
      font-size: 11px;
      color: rgba(239,248,226,0.35);
      margin-top: 8px;
      line-height: 1.45;
    }
    .mult2d-section { margin-top: 8px; }

    /* ══════════════════════════════════════
       CUSTOM SCROLLBARS — match UI palette
    ══════════════════════════════════════ */

    /* Firefox */
    * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--acc), transparent 75%) transparent; }

    /* WebKit (Chrome, Safari, Edge) */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--acc), transparent 80%);
      border-radius: 99px;
      transition: background 0.2s;
    }
    ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--acc), transparent 55%); }
    ::-webkit-scrollbar-corner { background: transparent; }

    /* Scrollable review lists — slightly more visible */
    .review-scroll::-webkit-scrollbar { width: 3px; }
    .review-scroll::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--acc), transparent 82%);
      border-radius: 99px;
    }
    .review-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--acc), transparent 60%); }

    /* ════════════════════════════════════════════════
       WELCOME SCREEN
    ════════════════════════════════════════════════ */
    #s-welcome {
      min-height: 0;
      justify-content: center;
      align-items: center;
      padding: 32px 24px;
      gap: 0;
    }
    .welcome-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      width: 100%;
      max-width: 420px;
      margin: auto;
    }
    .welcome-icon {
      font-size: 52px;
      margin-bottom: 28px;
      filter: drop-shadow(0 0 20px color-mix(in srgb, var(--acc), transparent 60%));
    }
    .welcome-heading {
      font-size: clamp(30px, 7vw, 46px);
      font-weight: 800;
      color: #eff8e2;
      text-align: center;
      letter-spacing: -1px;
      line-height: 1.15;
      margin-bottom: 12px;
    }
    .welcome-heading span {
      background: linear-gradient(135deg, var(--acc), var(--acc-lo));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .welcome-quote {
      font-size: clamp(13px, 3.2vw, 15px);
      color: rgba(239,248,226,0.45);
      text-align: center;
      font-style: italic;
      line-height: 1.5;
      max-width: 320px;
      margin: 0 auto 36px;
    }
    .welcome-input-wrap {
      width: 100%;
      position: relative;
      margin-bottom: 14px;
    }
    .welcome-input {
      width: 100%;
      padding: 18px 20px;
      border-radius: 16px;
      border: 1.5px solid color-mix(in srgb, var(--acc), transparent 75%);
      background: color-mix(in srgb, var(--p4), transparent 85%);
      backdrop-filter: blur(10px);
      color: #eff8e2;
      font-size: clamp(15px, 3.5vw, 17px);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      text-align: center;
    }
    .welcome-input::placeholder {
      color: rgba(239,248,226,0.3);
      font-style: italic;
    }
    .welcome-input:focus {
      border-color: color-mix(in srgb, var(--acc), transparent 40%);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc), transparent 90%), 0 0 30px color-mix(in srgb, var(--acc), transparent 92%);
    }
    .welcome-btn {
      width: 100%;
      padding: 17px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(135deg, var(--acc-lo), var(--acc-vlo));
      color: #eff8e2;
      font-size: clamp(15px, 3.5vw, 17px);
      font-weight: 700;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.3px;
      transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 4px 20px rgba(123,168,50,0.3);
    }
    .welcome-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(123,168,50,0.4); }
    .welcome-btn:active { transform: scale(0.97); }
    .welcome-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
    .welcome-signin-btn {
      margin-top: 12px;
      border: 0;
      background: transparent;
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 800;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      opacity: 0.82;
      transition: color 0.16s ease, opacity 0.16s ease, transform 0.14s ease;
    }
    .welcome-signin-btn:hover { color: var(--acc); opacity: 1; }
    .welcome-signin-btn:active { transform: scale(0.98); }

    /* ════════════════════════════════════════════════
       DASHBOARD SCREEN
    ════════════════════════════════════════════════ */
    #s-dashboard {
      gap: 14px;
    }
    .dash-header {
      border-radius: 20px;
      padding: clamp(20px, 5vw, 28px);
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, color-mix(in srgb, var(--p5), transparent 50%) 0%, color-mix(in srgb, var(--p3), transparent 40%) 100%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 82%);
      box-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 80%);
    }
    .dash-header::before {
      content: '';
      position: absolute;
      top: 0; left: 8%; right: 8%; height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc), transparent 20%) 50%, transparent);
    }
    .dash-greeting {
      font-size: clamp(11px, 2.5vw, 13px);
      font-weight: 600;
      color: rgba(239,248,226,0.45);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }
    .dash-name {
      font-size: clamp(24px, 6vw, 36px);
      font-weight: 800;
      color: #eff8e2;
      letter-spacing: -0.5px;
      line-height: 1.15;
    }
    .dash-name span { color: var(--acc); }
    .dash-tagline {
      font-size: clamp(12px, 2.8vw, 14px);
      color: rgba(239,248,226,0.4);
      margin-top: 6px;
    }
    .dash-header-actions {
      display: flex;
      gap: 8px;
      margin-top: 16px;
    }
    .dash-start-btn {
      flex: 1;
      padding: 13px 16px;
      border-radius: 12px;
      border: none;
      background: var(--acc);
      color: var(--btn-txt);
      font-size: clamp(13px,3vw,15px);
      font-weight: 700;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 4px 20px color-mix(in srgb, var(--acc), transparent 55%);
    }
    .dash-start-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
    .dash-start-btn:active { transform: scale(0.97); filter: brightness(0.95); }
    .dash-profile-btn {
      padding: 13px 14px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--acc), transparent 80%);
      background: color-mix(in srgb, var(--p4), transparent 80%);
      color: rgba(239,248,226,0.6);
      font-size: 15px;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.18s;
    }
    .dash-profile-btn:hover { border-color: color-mix(in srgb, var(--acc), transparent 60%); color: #eff8e2; }

    /* Today stats row */
    .dash-today {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .dash-stat {
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 90%);
      border-radius: 14px;
      padding: 14px 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
      overflow: hidden;
    }
    .dash-today .dash-stat:nth-child(2) {
      background: color-mix(in srgb, var(--acc), transparent 93%);
      border-color: color-mix(in srgb, var(--acc), transparent 78%);
    }
    .dash-stat-icon {
      font-size: 16px;
      line-height: 1;
      margin-bottom: 10px;
      opacity: 0.75;
    }
    .dash-stat-val {
      font-size: clamp(26px, 6vw, 38px);
      font-weight: 900;
      color: var(--acc);
      line-height: 1;
      margin-bottom: 4px;
    }
    .dash-stat-lbl {
      font-size: clamp(9px, 2vw, 10px);
      font-weight: 700;
      color: rgba(239,248,226,0.38);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }
    .dash-stat-sub {
      font-size: clamp(9px, 2vw, 10px);
      font-weight: 500;
      color: rgba(239,248,226,0.25);
      margin-top: 6px;
    }

    /* Recent sessions */
    .dash-section-title {
      font-size: clamp(10px,2.2vw,11px);
      font-weight: 700;
      color: rgba(239,248,226,0.35);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .dash-section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: color-mix(in srgb, var(--acc), transparent 91%);
    }
    .dash-recent {
      background: color-mix(in srgb, var(--p2), transparent 50%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 90%);
      border-radius: 16px;
      overflow: hidden;
      max-height: 420px;
      transition: max-height 0.34s cubic-bezier(0.22,1,0.36,1);
      contain: layout paint;
    }
    .dash-recent.collapsed { max-height: 48px; }
    .dash-recent.is-animating {
      will-change: max-height;
    }
    .dash-recent.is-animating .dash-session {
      will-change: opacity, transform;
    }
    .dash-session {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid color-mix(in srgb, var(--acc), transparent 93%);
      gap: 10px;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
    }
    .dash-recent:not(.collapsed) .dash-session:nth-child(2) { transition-delay: 0.03s; }
    .dash-recent:not(.collapsed) .dash-session:nth-child(3) { transition-delay: 0.055s; }
    .dash-recent:not(.collapsed) .dash-session:nth-child(4) { transition-delay: 0.08s; }
    .dash-recent:not(.collapsed) .dash-session:nth-child(5) { transition-delay: 0.105s; }
    .dash-recent.collapsed .dash-session:nth-child(n+2) {
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition-delay: 0s;
    }
    .dash-recent.collapsed .dash-session:first-child {
      min-height: 48px;
      padding-top: 0;
      padding-bottom: 0;
      align-items: center;
    }
    .dash-recent.collapsed .dash-empty {
      min-height: 48px;
      padding-top: 0;
      padding-bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dash-session:last-child { border-bottom: none; }
    .dash-session-date {
      font-size: 12px;
      color: rgba(239,248,226,0.4);
      flex-shrink: 0;
    }
    .dash-session-score {
      font-size: 13px;
      font-weight: 700;
      color: #eff8e2;
    }
    .dash-session-pct {
      font-size: 13px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px;
      flex-shrink: 0;
    }
    .dash-session-pct.good { background: rgba(123,168,50,0.2); color: var(--acc); }
    .dash-session-pct.bad  { background: color-mix(in srgb, var(--p4), transparent 70%);  color: rgba(239,248,226,0.5); }
    .dash-empty {
      padding: 28px 16px;
      text-align: center;
      color: rgba(239,248,226,0.3);
      font-size: 13px;
    }
    .dash-value-pulse {
      animation: dashValuePulse 0.34s cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes dashValuePulse {
      0% { opacity: 0.72; transform: translateY(2px) scale(0.99); filter: brightness(1); }
      55% { opacity: 1; transform: translateY(0) scale(1.025); filter: brightness(1.12); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
    }

    /* ── Weekly + Daily Goal side-by-side row ── */
    .week-goal-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: stretch;
    }
    /* When weekly summary is collapsed, cards naturally align */

    /* ── Daily Goal Card ── */
    .daily-goal-card {
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 85%);
      border-radius: 16px;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-sizing: border-box;
      min-width: 0;
      contain: layout paint;
    }
    .daily-goal-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .daily-goal-label {
      font-size: clamp(12px,2.8vw,13px);
      font-weight: 700;
      color: rgba(239,248,226,0.7);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .daily-goal-count {
      font-size: clamp(14px,3vw,16px);
      font-weight: 800;
      color: var(--acc);
    }
    @property --goal-deg {
      syntax: '<angle>';
      inherits: true;
      initial-value: 0deg;
    }
    .daily-goal-gauge {
      --goal-deg: 0deg;
      position: relative;
      width: min(156px, 100%);
      margin: 2px auto 6px;
      padding: 4px 4px 8px;
      display: grid;
      place-items: center;
      isolation: isolate;
      box-sizing: border-box;
    }
    .daily-goal-gauge-track {
      position: relative;
      width: 100%;
      aspect-ratio: 2 / 1;
      overflow: hidden;
    }
    .daily-goal-gauge-track::before {
      content: none;
    }
    .daily-goal-gauge-track::after {
      content: none;
    }
    .daily-goal-gauge-svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .daily-goal-gauge-bg,
    .daily-goal-gauge-progress {
      fill: none;
      stroke-linecap: round;
      stroke-width: 9;
    }
    .daily-goal-gauge-bg {
      stroke: color-mix(in srgb, var(--border), transparent 28%);
    }
    .daily-goal-gauge-progress {
      stroke: var(--acc);
      stroke-dasharray: var(--goal-dash, 0) 100;
      filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--acc), transparent 88%));
      transition: stroke-dasharray 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.2s ease;
    }
    .daily-goal-gauge.zero .daily-goal-gauge-progress {
      opacity: 0;
      filter: none;
    }
    .daily-goal-gauge .daily-goal-bar-fill {
      display: none;
    }
    .daily-goal-gauge .daily-goal-count {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      text-align: center;
      line-height: 1;
      color: var(--text-primary);
      font-size: clamp(16px, 2.8vw, 20px);
      letter-spacing: 0;
      white-space: nowrap;
      z-index: 1;
    }
    .daily-goal-gauge .goal-count-unit {
      display: none;
    }
    .daily-goal-bar-bg {
      height: 8px;
      border-radius: 99px;
      background: color-mix(in srgb, var(--p4), transparent 65%);
      overflow: hidden;
    }
    .daily-goal-bar-fill {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--acc-lo), var(--acc));
      transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
      min-width: 0;
    }
    .daily-goal-bar-fill.done {
      background: linear-gradient(90deg, var(--acc), var(--acc-hi));
    }
    .daily-goal-gauge.done .daily-goal-gauge-progress,
    .daily-goal-gauge:has(.daily-goal-bar-fill.done) .daily-goal-gauge-progress {
      filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--acc), transparent 86%));
    }
    .daily-goal-status {
      min-height: 26px;
      width: 100%;
      margin-top: auto;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      background: color-mix(in srgb, var(--surface-soft, var(--p2)), transparent 72%);
      border: 1px solid color-mix(in srgb, var(--border), transparent 35%);
      border-radius: 999px;
      color: var(--text-secondary);
      text-align: center;
      box-sizing: border-box;
    }
    .daily-goal-status-main {
      display: none;
    }
    .daily-goal-status-sub {
      color: var(--text-secondary);
      font-size: clamp(10px, 2.2vw, 11px);
      font-weight: 500;
      line-height: 1.2;
      opacity: 0.62;
    }
    .daily-goal-done-badge {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: color-mix(in srgb, var(--acc), transparent 84%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 70%);
      border-radius: 10px;
      min-height: 42px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 700;
      color: var(--acc);
      text-align: center;
      box-sizing: border-box;
    }
    .daily-goal-done-badge.show {
      display: flex;
      padding-top: 7px;
      padding-bottom: 7px;
      animation: goalBadgeIn 0.22s cubic-bezier(0.22,1,0.36,1) both;
    }
    .daily-goal-gauge.done + .daily-goal-status,
    .daily-goal-card:has(.goal-edit-row.open) .daily-goal-status,
    .daily-goal-card:has(.goal-edit-row.closing) .daily-goal-status,
    .daily-goal-card:has(.goal-edit-row.open) .daily-goal-done-badge,
    .daily-goal-card:has(.goal-edit-row.closing) .daily-goal-done-badge {
      display: none;
    }
    @keyframes goalBadgeIn {
      from { opacity: 0; transform: translateY(-4px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .goal-edit-row {
      display: none;
      align-items: center;
      gap: 8px;
      margin-top: 0;
      overflow: hidden;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      padding: 0;
      contain: layout paint;
    }
    .goal-edit-row.open,
    .goal-edit-row.closing { display: flex; }
    .goal-edit-row.open {
      animation: revealRowIn 0.2s cubic-bezier(0.22,1,0.36,1) both;
    }
    .goal-edit-row.closing {
      animation: revealRowOut 0.18s ease both;
      will-change: max-height, opacity, transform;
    }
    @keyframes revealRowIn {
      from { max-height: 0; opacity: 0; transform: translateY(-4px); }
      to { max-height: 48px; opacity: 1; transform: translateY(0); }
    }
    @keyframes revealRowOut {
      from {
      max-height: 48px;
      opacity: 1;
      transform: translateY(0);
      }
      to { max-height: 0; opacity: 0; transform: translateY(-4px); }
    }
    .goal-edit-input {
      flex: 1;
      min-width: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      border-radius: 9px;
      border: 1.5px solid color-mix(in srgb, var(--acc), transparent 75%);
      background: color-mix(in srgb, var(--p4), transparent 85%);
      color: #eff8e2;
      font-size: 13px;
      font-family: 'Inter', sans-serif;
      outline: none;
    }
    .goal-edit-input:focus { border-color: var(--acc); }
    .goal-edit-save {
      flex: 0 0 auto;
      box-sizing: border-box;
      padding: 8px 14px;
      border-radius: 9px;
      border: none;
      background: var(--acc-lo);
      color: #eff8e2;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
    }
    .goal-edit-btn {
      background: none;
      border: none;
      color: color-mix(in srgb, var(--acc), transparent 55%);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      padding: 2px 4px;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .goal-edit-btn:hover { color: var(--acc); }

    @media (max-width: 560px) {
      .daily-goal-card {
        padding: 15px 14px;
        gap: 9px;
      }

      .daily-goal-top {
        gap: 8px;
      }

      .daily-goal-count {
        overflow-wrap: anywhere;
      }

      .daily-goal-gauge {
        width: min(142px, 100%);
        padding-bottom: 10px;
      }

      .daily-goal-gauge .daily-goal-count {
        font-size: clamp(15px, 4.1vw, 18px);
        bottom: 11px;
      }

      .goal-edit-row {
        flex-wrap: wrap;
        gap: 7px;
      }

      .goal-edit-row.open {
        animation-name: revealGoalEditMobileIn;
        animation-duration: 0.24s;
        animation-timing-function: cubic-bezier(0.22,1,0.36,1);
      }

      .goal-edit-row.closing {
        animation-name: revealGoalEditMobileOut;
        animation-duration: 0.2s;
        animation-timing-function: cubic-bezier(0.4,0,0.2,1);
      }

      .goal-edit-input {
        flex: 1 1 100%;
      }

      .goal-edit-save {
        width: 100%;
        padding: 9px 12px;
      }

      .goal-edit-btn {
        font-size: 12px;
        font-weight: 800;
        padding: 3px 5px;
      }

      @keyframes revealGoalEditMobileIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes revealGoalEditMobileOut {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(-4px); }
      }
    }

    @media (max-width: 560px) {
      .dash-recent {
        transition: none;
      }
      .dash-session {
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.22,1,0.36,1);
      }
      .dash-recent.is-animating {
        will-change: auto;
      }
      .dash-recent.is-animating .dash-session {
        will-change: opacity, transform;
      }
    }

    /* ── Improvement / Motivation Banner ── */
    .improve-banner {
      display: none;
      border-radius: 14px;
      padding: 14px 16px;
      align-items: center;
      gap: 12px;
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 82%);
      animation: fbIn 0.35s cubic-bezier(0.22,1,0.36,1) both;
    }
    .improve-banner.show { display: flex; }
    .improve-banner-icon {
      font-size: 26px;
      flex-shrink: 0;
      line-height: 1;
    }
    .improve-banner-text { flex: 1; }
    .improve-banner-title {
      font-size: clamp(13px,3vw,14px);
      font-weight: 700;
      color: var(--acc);
      line-height: 1.3;
    }
    .improve-banner-sub {
      font-size: clamp(11px,2.5vw,12px);
      color: rgba(239,248,226,0.45);
      margin-top: 2px;
    }



    /* ── Milestone Toast ── */
    @keyframes milestoneIn {
      0%   { opacity: 0; transform: translateX(-50%) translateY(-16px); }
      100% { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    @keyframes milestoneOut {
      0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    }
    #milestoneToast {
      position: fixed;
      top: max(16px, env(safe-area-inset-top, 16px));
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      width: min(calc(100vw - 32px), 340px);
      background: linear-gradient(135deg, color-mix(in srgb, var(--p5), transparent 2%) 0%, color-mix(in srgb, var(--p0), transparent 1%) 100%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 70%);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px color-mix(in srgb, var(--acc), transparent 94%);
      padding: 12px 14px;
      display: none;
      align-items: center;
      gap: 10px;
      pointer-events: auto;
      cursor: grab;
      touch-action: pan-y;
      user-select: none;
      will-change: transform, opacity;
    }
    #milestoneToast.show {
      display: flex;
      animation: milestoneIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    #milestoneToast.hide {
      animation: milestoneOut 0.25s ease-in both;
    }
    @keyframes toastSwipeLeft {
      to { opacity: 0; transform: translateX(calc(-50% - 120px)); }
    }
    @keyframes toastSwipeRight {
      to { opacity: 0; transform: translateX(calc(-50% + 120px)); }
    }
    #milestoneToast.swipe-left  { animation: toastSwipeLeft  0.22s cubic-bezier(0.4, 0, 1, 1) both; }
    #milestoneToast.swipe-right { animation: toastSwipeRight 0.22s cubic-bezier(0.4, 0, 1, 1) both; }
    .milestone-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
    .milestone-text { flex: 1; min-width: 0; }
    .milestone-label {
      font-size: 9px;
      font-weight: 700;
      color: color-mix(in srgb, var(--acc), transparent 45%);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 2px;
    }
    .milestone-title {
      font-size: 13px;
      font-weight: 800;
      color: #eff8e2;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .milestone-sub {
      font-size: 11px;
      color: rgba(239,248,226,0.45);
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ═════════════════wi ════════════════════════════
       NEW FEATURES CSS
    ══════════════════════════════════════════════ */

    /* 1. Level-Up Modal */
    #levelUpModal {
      position: fixed; inset: 0; z-index: 10000;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(12px) saturate(0.6);
      -webkit-backdrop-filter: blur(12px) saturate(0.6);
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s ease;
    }
    #levelUpModal.show { opacity: 1; pointer-events: auto; }

    /* Particles that radiate outward behind the card */
    .levelup-particles {
      position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
    }
    .lup-particle {
      position: absolute;
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--acc);
      opacity: 0;
      animation: lupParticle 1.4s ease-out both;
    }
    @keyframes lupParticle {
      0%   { opacity: 1; transform: translate(0,0) scale(1); }
      100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
    }

    /* Card entrance — rises from below like something surfacing */
    @keyframes levelUpRise {
      0%   { opacity:0; transform: translateY(48px) scale(0.93); }
      55%  { opacity:1; transform: translateY(-6px) scale(1.01); }
      75%  { transform: translateY(2px) scale(0.995); }
      100% { transform: translateY(0) scale(1); }
    }
    /* Glow halo behind card pulses once */
    @keyframes haloFlare {
      0%   { opacity:0; transform: scale(0.6); }
      30%  { opacity:1; }
      100% { opacity:0; transform: scale(2.2); }
    }

    .levelup-halo {
      position: absolute;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, color-mix(in srgb, var(--acc), transparent 40%) 0%, transparent 70%);
      animation: haloFlare 1.1s cubic-bezier(0.22,1,0.36,1) both;
      animation-delay: 0.1s;
      pointer-events: none;
    }

    .levelup-card {
      position: relative;
      width: calc(100vw - 48px);
      max-width: 340px;
      background:
        linear-gradient(160deg,
          color-mix(in srgb, var(--p4), transparent 18%) 0%,
          color-mix(in srgb, var(--p1), transparent 0%) 50%,
          color-mix(in srgb, var(--p0), transparent 0%) 100%);
      border-radius: 28px;
      padding: 0;
      overflow: hidden;
      animation: levelUpRise 0.7s cubic-bezier(0.22,1,0.36,1) both;
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--acc), transparent 60%),
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 32px 80px rgba(0,0,0,0.9),
        0 0 80px color-mix(in srgb, var(--acc), transparent 82%),
        0 0 160px color-mix(in srgb, var(--p4), transparent 70%);
    }

    /* Top accent band — intense bright stripe */
    .levelup-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--acc), transparent 30%) 20%,
        var(--acc) 50%,
        color-mix(in srgb, var(--acc), transparent 30%) 80%,
        transparent 100%);
      filter: blur(0.4px);
    }

    /* Subtle inner vignette */
    .levelup-card::after {
      content: '';
      position: absolute; inset: 0; border-radius: inherit;
      background: radial-gradient(ellipse 80% 60% at 50% 0%,
        color-mix(in srgb, var(--acc), transparent 92%) 0%,
        transparent 70%);
      pointer-events: none;
    }

    /* Top section: icon + level number */
    .levelup-hero {
      position: relative;
      padding: 36px 32px 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    /* Emblem — the icon sits inside a metallic ring */
    .levelup-emblem {
      position: relative;
      width: 88px; height: 88px;
      margin-bottom: 20px;
    }
    .levelup-emblem-ring {
      position: absolute; inset: 0;
      border-radius: 50%;
      background: conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--acc), transparent 20%),
        color-mix(in srgb, var(--acc-lo), transparent 5%),
        var(--acc),
        color-mix(in srgb, var(--acc-lo), transparent 5%),
        color-mix(in srgb, var(--acc), transparent 20%)
      );
      padding: 3px;
      box-shadow:
        0 0 28px color-mix(in srgb, var(--acc), transparent 35%),
        inset 0 0 12px rgba(0,0,0,0.6);
      animation: ringRotate 8s linear infinite;
    }
    @keyframes ringRotate {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .levelup-emblem-inner {
      position: absolute; inset: 3px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, var(--p4), var(--p1));
      display: flex; align-items: center; justify-content: center;
      font-size: 38px;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
    }

    @keyframes levelNumIn {
      0%   { opacity:0; transform: scale(0.5) translateY(8px); filter: blur(4px); }
      60%  { transform: scale(1.06); filter: blur(0); }
      100% { opacity:1; transform: scale(1); }
    }
    .levelup-label {
      font-size: 9px; font-weight: 800; letter-spacing: 0.22em;
      color: color-mix(in srgb, var(--acc), transparent 25%);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .levelup-level {
      font-size: 52px; font-weight: 900; line-height: 1;
      letter-spacing: -2px;
      color: var(--acc);
      text-shadow:
        0 0 20px color-mix(in srgb, var(--acc), transparent 30%),
        0 2px 0 color-mix(in srgb, var(--acc-lo), transparent 20%);
      animation: levelNumIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
      animation-delay: 0.2s;
    }
    .levelup-title {
      font-size: 22px; font-weight: 800;
      color: #eff8e2;
      letter-spacing: -0.4px;
      margin-top: 4px;
      text-shadow: 0 1px 20px rgba(0,0,0,0.5);
    }

    /* Divider */
    .levelup-divider {
      height: 1px;
      margin: 0 24px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc), transparent 65%) 50%, transparent);
    }

    /* Bottom section: story + bar + button */
    .levelup-body {
      padding: 20px 28px 28px;
      display: flex; flex-direction: column; align-items: center; gap: 16px;
    }

    .levelup-story {
      font-size: 15px; font-weight: 600; font-style: italic;
      color: rgba(239,248,226,0.7);
      text-align: center; line-height: 1.5;
      letter-spacing: 0.01em;
    }
    .levelup-story .from-title { color: rgba(239,248,226,0.35); }
    .levelup-story .to-title {
      color: var(--acc);
      text-shadow: 0 0 16px color-mix(in srgb, var(--acc), transparent 40%);
      font-style: normal;
    }

    .levelup-sub {
      font-size: 11px; font-weight: 600;
      color: rgba(239,248,226,0.3);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-align: center;
      margin-top: -6px;
    }

    /* XP bar — thicker, more prominent */
    .levelup-bar-wrap {
      width: 100%;
      background: rgba(255,255,255,0.06);
      border-radius: 99px;
      height: 6px;
      overflow: hidden;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    }
    .levelup-bar-fill {
      height: 100%; border-radius: 99px; width: 0%;
      background: linear-gradient(90deg, var(--acc-lo), var(--acc), color-mix(in srgb, var(--acc-hi), transparent 10%));
      box-shadow: 0 0 8px color-mix(in srgb, var(--acc), transparent 40%);
      transition: width 1s cubic-bezier(0.22,1,0.36,1);
    }

    /* Continue button — solid, authoritative */
    .levelup-dismiss {
      width: 100%;
      padding: 15px 32px;
      border-radius: 14px;
      border: none;
      background: var(--acc);
      color: var(--p1);
      font-size: 14px; font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.15s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 4px 20px color-mix(in srgb, var(--acc), transparent 50%);
    }
    .levelup-dismiss:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 8px 28px color-mix(in srgb, var(--acc), transparent 35%);
    }
    .levelup-dismiss:active { transform: scale(0.97); }

    html[data-theme="minimal"] #levelUpModal { backdrop-filter: none; }
    html[data-theme="minimal"] .levelup-card { background: var(--surf); box-shadow: none; border: 1px solid color-mix(in srgb, var(--acc), transparent 75%); }
    html[data-theme="minimal"] .levelup-card::before, html[data-theme="minimal"] .levelup-card::after { display:none; }
    html[data-theme="minimal"] .levelup-level { text-shadow: none; }
    html[data-theme="minimal"] .levelup-emblem-ring { animation: none; }

    /* ── Dashboard level number pop-in on level-up ── */
    @keyframes dashLevelPop {
      0%   { transform: scale(1);    color: var(--acc); }
      25%  { transform: scale(1.45); color: #fff;       filter: drop-shadow(0 0 12px var(--acc)); }
      55%  { transform: scale(0.92);                    filter: none; }
      80%  { transform: scale(1.1);  color: var(--acc); }
      100% { transform: scale(1);    color: var(--acc); }
    }
    .dash-xp-level.levelup-pop {
      animation: dashLevelPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    /* XP bar flash on level-up */
    @keyframes xpBarFlash {
      0%,100% { opacity: 1; }
      40%     { opacity: 0.3; background: #fff; }
    }
    .dash-xp-bar-fill.levelup-flash {
      animation: xpBarFlash 0.5s ease-out both;
    }

    /* 2. XP float animation (replaces inline xp-float if any) */
    .xp-float {
      position: fixed; z-index: 9998; font-size: 15px; font-weight: 800;
      pointer-events: none; white-space: nowrap;
      animation: xpFloatUp 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes xpFloatUp {
      0%   { opacity:1; transform: translateY(0) scale(1); }
      60%  { opacity:1; transform: translateY(-28px) scale(1.05); }
      100% { opacity:0; transform: translateY(-52px) scale(0.9); }
    }
    .xp-mult-badge { display:inline-block; font-size:10px; font-weight:800; background:var(--acc); color:var(--btn-txt); border-radius:99px; padding:1px 5px; margin-left:4px; vertical-align:middle; }

    /* 3. Session summary card */
    .session-summary-card {
      display: none;
      width: 100%;
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 80%);
      border-radius: 16px; padding: 11px 14px;
      flex-direction: row; flex-wrap: wrap; gap: 7px 12px; align-items: center;
      animation: fbIn 0.35s cubic-bezier(0.22,1,0.36,1) both;
    }
    .session-summary-card.show { display: flex; }
    .session-summary-card.dismiss-right {
      animation: sessionSummarySwipeRight 0.28s cubic-bezier(0.4,0,1,1) both;
    }
    @keyframes sessionSummarySwipeRight {
      0% { opacity: 1; transform: translateX(0) scale(1); }
      100% { opacity: 0; transform: translateX(42px) scale(0.98); }
    }
    .session-summary-header { display:flex; width:100%; align-items:center; gap:8px; }
    .session-summary-title { display:block; font-size:clamp(10px,2.3vw,11px); line-height:1.15; font-weight:700; letter-spacing:0.02em; text-transform:none; color:rgba(239,248,226,0.58); }
    .session-summary-close { display:inline-flex; align-items:center; justify-content:center; min-width:0; height:auto; border-radius:0; background:transparent; border:0; color:color-mix(in srgb, var(--text-secondary), transparent 10%); cursor:pointer; font-size:11px; font-weight:700; padding:2px 0 2px 8px; line-height:1; font-family:'Inter',sans-serif; flex-shrink:0; margin-left:auto; opacity:0.82; transition:opacity 0.18s ease, color 0.18s ease, transform 0.12s ease; }
    .session-summary-close:hover { opacity:1; color:var(--acc); }
    .session-summary-close:active { transform:scale(0.97); }
    .session-summary-row { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
    .session-summary-score { font-size:clamp(27px,6.4vw,36px); font-weight:900; color:var(--acc); line-height:0.95; flex-shrink:0; letter-spacing:-0.02em; }
    .session-summary-meta { flex:1; min-width:0; }
    .session-summary-label { font-size:clamp(12px,3vw,13px); font-weight:800; color:#eff8e2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .session-summary-sub { font-size:clamp(10px,2.5vw,11px); color:rgba(239,248,226,0.42); margin-top:3px; }
    .session-summary-xp-row { display:flex; align-items:center; gap:7px; flex-shrink:0; }
    .session-summary-xp { font-size:12px; font-weight:800; color:var(--acc); background:color-mix(in srgb, var(--acc), transparent 86%); border:1px solid color-mix(in srgb, var(--acc), transparent 68%); border-radius:99px; padding:4px 10px; line-height:1; }
    .session-summary-streak { font-size:11px; font-weight:700; color:rgba(239,248,226,0.5); background:color-mix(in srgb, var(--p4), transparent 70%); border-radius:99px; padding:2px 8px; }
    html[data-theme="minimal"] .session-summary-card { background: var(--surf); box-shadow: none; }

    /* 4. Streak warning */
    .streak-warning {
      display: none; align-items: center; gap: 12px;
      background: color-mix(in srgb, #ff8c42, transparent 85%);
      border: 1px solid color-mix(in srgb, #ff8c42, transparent 60%);
      border-radius: 14px; padding: 13px 16px;
      animation: fbIn 0.35s cubic-bezier(0.22,1,0.36,1) both;
    }
    .streak-warning.show { display: flex; }
    .streak-warning-icon { font-size:24px; flex-shrink:0; }
    .streak-warning-text { flex:1; }
    .streak-warning-title { font-size:clamp(12px,3vw,13px); font-weight:700; color:#ffe0c0; }
    .streak-warning-sub { font-size:clamp(10px,2.5vw,11px); color:rgba(255,224,192,0.6); margin-top:2px; }
    html[data-theme="minimal"] .streak-warning { background: color-mix(in srgb, var(--surf), #ff8c42 18%); box-shadow: none; }

    /* 5. Weekly summary card */
    .weekly-summary-card {
      display: none;
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 85%);
      border-radius: 16px; padding: 16px 18px;
      flex-direction: column; gap: 10px;
      animation: fbIn 0.35s cubic-bezier(0.22,1,0.36,1) both;
    }
    .weekly-summary-card.show { display: flex; }
    .weekly-summary-title { font-size:clamp(12px,2.8vw,13px); font-weight:700; color:rgba(239,248,226,0.7); cursor:default; display:flex; align-items:center; user-select:none; }
    .weekly-chevron { display: none; }
    .weekly-summary-body { display:flex; flex-direction:column; gap:8px; }
    .weekly-summary-body.open { display:flex; }
    .weekly-summary-stats { display:grid; grid-template-columns:1fr; gap:6px; }
    .weekly-stat { text-align:left; background:color-mix(in srgb, var(--p4), transparent 75%); border-radius:10px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; }
    .weekly-stat-val { font-size:clamp(15px,3.5vw,18px); font-weight:800; color:var(--acc); line-height:1; }
    .weekly-stat-lbl { font-size:9px; font-weight:700; color:rgba(239,248,226,0.35); text-transform:uppercase; letter-spacing:0.06em; margin-top:0; }
    .weekly-sparkline { display:flex; align-items:flex-end; gap:5px; height:110px; margin-top:8px; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 20px 18px 16px; box-sizing: border-box; }
    .sparkline-day { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; flex:1; }
    .sparkline-bar { width:100%; border-radius:3px 3px 0 0; background:color-mix(in srgb, var(--acc), transparent 60%); min-height:3px; }
    .sparkline-bar.today { background:var(--acc); }
    .sparkline-label { font-size:8px; font-weight:600; color:rgba(239,248,226,0.3); text-transform:uppercase; }
    html[data-theme="minimal"] .weekly-summary-card { background: var(--surf); box-shadow: none; }
    html[data-theme="minimal"] .weekly-stat { background: var(--surf-d); }

    /* 6. Answer Hint */
    .hint-btn {
      background: color-mix(in srgb, var(--p4), transparent 50%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 80%);
      border-radius: clamp(10px, 3vw, 13px);
      color: rgba(239,248,226,0.55);
      font-size: clamp(11px, 3vw, 13px);
      font-weight: 700;
      padding: clamp(11px, 3.5vw, 15px) clamp(10px, 3vw, 14px);
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.18s;
      white-space: nowrap;
      flex-shrink: 0;
      line-height: 1;
    }
    .hint-btn:hover:not(:disabled) { color:var(--acc); border-color:color-mix(in srgb, var(--acc), transparent 55%); background: color-mix(in srgb, var(--p4), transparent 30%); }
    .hint-btn:disabled { opacity:0.35; cursor:default; font-size: clamp(10px, 2.5vw, 11px); padding: clamp(11px, 3.5vw, 15px) clamp(7px, 2.5vw, 10px); }
    .hint-reveal { display:none; font-size:12px; font-weight:600; color:rgba(239,248,226,0.6); text-align:center; padding: 8px 16px; margin: 6px 0 0; background: color-mix(in srgb, var(--p3), transparent 55%); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--acc), transparent 82%); letter-spacing:0.02em; line-height: 1.4; flex-shrink: 0; }
    .hint-reveal.show { display:block; animation: hintRevealIn 0.18s cubic-bezier(0.22,1,0.36,1) both; }
    @keyframes hintRevealIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    html[data-theme="minimal"] .hint-btn { background: var(--surf-d); box-shadow: none; }

    /* ── Milestones Section on Profile ── */
    .milestones-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 10px;
    }
    .milestone-badge {
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 90%);
      border-radius: 14px;
      padding: 14px 12px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      opacity: 0.35;
      filter: grayscale(0.6);
      transition: all 0.25s;
    }
    .milestone-badge.unlocked {
      opacity: 1;
      filter: none;
      border-color: color-mix(in srgb, var(--acc), transparent 70%);
      background: color-mix(in srgb, var(--p3), transparent 30%);
    }
    .milestone-badge-icon { font-size: 26px; line-height: 1; }
    .milestone-badge-name {
      font-size: 11px;
      font-weight: 700;
      color: rgba(239,248,226,0.5);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .milestone-badge.unlocked .milestone-badge-name { color: var(--acc); }
    .milestone-badge-val {
      font-size: 10px;
      color: rgba(239,248,226,0.3);
    }
    .milestone-badge.unlocked .milestone-badge-val { color: rgba(239,248,226,0.5); }

    /* ══════════════════════════════════════════════
       NEW: XP + LEVEL PILL
    ══════════════════════════════════════════════ */
    .xp-pill {
      display: none;
      background: linear-gradient(135deg, color-mix(in srgb, var(--p4), transparent 30%), color-mix(in srgb, var(--p3), transparent 20%));
      border: 1px solid color-mix(in srgb, var(--acc), transparent 75%);
      border-radius: 20px;
      padding: 4px 10px;
      font-size: clamp(10px,2.2vw,12px);
      font-weight: 700;
      color: var(--acc);
      white-space: nowrap;
      cursor: default;
    }
    .xp-pill.active { display: block; }

    /* XP Float animation */
    @keyframes xpFloat {
      0%   { opacity: 1; transform: translateY(0) scale(1); }
      80%  { opacity: 0.8; transform: translateY(-28px) scale(1.1); }
      100% { opacity: 0; transform: translateY(-40px) scale(0.9); }
    }
    .xp-float {
      position: absolute;
      pointer-events: none;
      font-size: 13px;
      font-weight: 800;
      color: var(--acc);
      text-shadow: 0 0 10px color-mix(in srgb, var(--acc), transparent 40%);
      animation: xpFloat 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      z-index: 100;
      white-space: nowrap;
    }

    /* ── Day Streak Pulse (dashboard pill) ── */
    @keyframes streakPulse {
      0%   { box-shadow: 0 0 0 0 rgba(255,150,30,0.5); transform: scale(1); }
      50%  { box-shadow: 0 0 0 8px rgba(255,150,30,0); transform: scale(1.06); }
      100% { box-shadow: 0 0 0 0 rgba(255,150,30,0); transform: scale(1); }
    }
    .streak-pulse { animation: streakPulse 0.6s ease-out; }

    /* ── NEW BEST glow on results pb row ── */
    .pb-new-best {
      color: var(--acc) !important;
      text-shadow: 0 0 12px color-mix(in srgb, var(--acc), transparent 30%), 0 0 30px color-mix(in srgb, var(--acc), transparent 70%);
      position: relative;
    }
    .pb-new-label {
      display: inline-block;
      background: linear-gradient(135deg, var(--acc-lo), var(--acc));
      color: var(--p0);
      font-size: 9px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 6px;
      letter-spacing: 0.06em;
      margin-left: 4px;
      vertical-align: middle;
      text-shadow: none;
    }

    /* ── Session Feedback Nudge (above results buttons) ── */
    .session-nudge {
      display: none;
      border-radius: 12px;
      padding: 12px 16px;
      align-items: center;
      gap: 10px;
      background: color-mix(in srgb, var(--p2), transparent 30%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 85%);
      font-size: clamp(12px,2.8vw,13px);
      color: rgba(239,248,226,0.75);
      font-weight: 500;
      margin: 8px clamp(12px,4vw,20px) 0;
    }
    .session-nudge.show { display: flex; }
    .session-nudge-icon { font-size: 20px; flex-shrink: 0; }

    /* ── Daily Challenge Floating Pin Card ── */

    @keyframes dcSlideIn {
      0%   { transform: translateY(-50%) translateX(100%); }
      55%  { transform: translateY(-50%) translateX(calc(100% - 60px)); }
      72%  { transform: translateY(-50%) translateX(calc(100% - 44px)); }
      85%  { transform: translateY(-50%) translateX(calc(100% - 56px)); }
      93%  { transform: translateY(-50%) translateX(calc(100% - 50px)); }
      100% { transform: translateY(-50%) translateX(calc(100% - 52px)); }
    }
    .daily-challenge-btn.dc-bounce {
      animation: dcSlideIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .daily-challenge-btn {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%) translateX(calc(100% - 52px));
      z-index: 200;
      opacity: 0;
      pointer-events: none;

      width: 236px;
      min-height: 68px;
      padding: 10px 12px 10px 64px;
      border-radius: 14px 0 0 14px;
      border: 1px solid color-mix(in srgb, var(--p4), transparent 55%);
      border-right: none;

      background: color-mix(in srgb, var(--p0), transparent 3%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);

      color: #eff8e2;
      font-family: 'Inter', sans-serif;
      cursor: pointer;

      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      overflow: visible;

      box-shadow:
        -6px 0 32px rgba(0,0,0,0.49),
        -2px 0 14px color-mix(in srgb, var(--p4), transparent 76%);

      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 0.22s ease,
                  box-shadow 0.25s ease,
                  border-color 0.2s;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* The date box — frosted glass when retracted, solid when open */
    .dc-tab {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 52px;
      background: color-mix(in srgb, var(--p3), transparent 55%);
      backdrop-filter: blur(14px) saturate(1.6);
      -webkit-backdrop-filter: blur(14px) saturate(1.6);
      border-right: 1px solid color-mix(in srgb, var(--p5), transparent 65%);
      border-radius: 14px 0 0 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      pointer-events: none;
      transition: background 0.25s ease, backdrop-filter 0.25s ease;
    }
    /* Solid when expanded */
    .daily-challenge-btn:hover .dc-tab,
    .daily-challenge-btn.dc-open .dc-tab {
      background: color-mix(in srgb, var(--p2), transparent 5%);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-right-color: color-mix(in srgb, var(--p4), transparent 50%);
    }
    .dc-tab-day {
      font-size: 20px;
      font-weight: 700;
      color: var(--acc);
      line-height: 1;
    }
    .dc-tab-mon {
      font-size: 9px;
      font-weight: 600;
      color: color-mix(in srgb, var(--acc), transparent 30%);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .dc-tab-pull { display: none; }

    /* Chevron hint */
    .dc-chevron {
      font-size: 16px;
      font-weight: 700;
      color: color-mix(in srgb, var(--acc), transparent 25%);
      line-height: 1;
      margin-top: 6px;
      animation: dcChevronPulse 2s ease-in-out infinite;
    }
    @keyframes dcChevronPulse {
      0%, 100% { opacity: 0.4; transform: translateX(0); }
      50%       { opacity: 1;   transform: translateX(-3px); }
    }
    /* Hide chevron while card is open */
    .daily-challenge-btn:hover .dc-chevron,
    .daily-challenge-btn.dc-open .dc-chevron { opacity: 0; }

    /* Periodic nudge — peeks left every ~8s */
    @keyframes dcNudge {
      0%, 100% { transform: translateY(-50%) translateX(calc(100% - 52px)); }
      3%        { transform: translateY(-50%) translateX(calc(100% - 68px)); }
      6%        { transform: translateY(-50%) translateX(calc(100% - 52px)); }
    }
    .daily-challenge-btn.dc-nudge {
      animation: dcNudge 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* Hover: slide fully open */
    .daily-challenge-btn:hover,
    .daily-challenge-btn:focus-visible {
      transform: translateY(-50%) translateX(0);
      border-color: color-mix(in srgb, var(--p4), transparent 20%);
      box-shadow:
        -8px 0 40px rgba(0,0,0,0.525),
        -2px 0 20px color-mix(in srgb, var(--p4), transparent 65%),
        0 0 20px color-mix(in srgb, var(--acc), transparent 96%);
      outline: none;
    }

    .daily-challenge-btn:active { transform: translateY(-50%) translateX(0) scale(0.98); }
    .daily-challenge-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .daily-challenge-btn:disabled:hover { transform: translateY(-50%) translateX(calc(100% - 52px)); }

    .daily-challenge-left { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
    .daily-challenge-icon { display: none; }
    .daily-challenge-info { width: 100%; }
    .daily-challenge-title { font-size: 12px; font-weight: 700; color: #eff8e2; text-align: left; white-space: nowrap; line-height: 1.2; }
    .daily-challenge-sub { font-size: 10px; color: rgba(239,248,226,0.45); text-align: left; margin-top: 1px; white-space: nowrap; }
    .daily-challenge-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 3px 9px;
      border-radius: 20px;
      margin-top: 6px;
      display: block;
      width: fit-content;
      white-space: nowrap;
    }
    .daily-challenge-badge.avail { background: color-mix(in srgb, var(--p2), transparent 10%); color: var(--acc); border: 1px solid color-mix(in srgb, var(--p4), transparent 30%); }
    .daily-challenge-badge.done  { background: color-mix(in srgb, var(--p1), transparent 20%); color: rgba(239,248,226,0.35); border: 1px solid color-mix(in srgb, var(--p4), transparent 65%); }

    /* Mobile: tap-to-open */
    @media (max-width: 599px) {
      .daily-challenge-btn {
        transform: translateY(-50%) translateX(calc(100% - 52px));
      }
      .daily-challenge-btn:hover:not(.dc-open) {
        transform: translateY(-50%) translateX(calc(100% - 52px));
        border-color: color-mix(in srgb, var(--p4), transparent 55%);
        box-shadow: -6px 0 32px rgba(0,0,0,0.49), -2px 0 14px color-mix(in srgb, var(--p4), transparent 76%);
      }
      .daily-challenge-btn.dc-open {
        transform: translateY(-50%) translateX(0) !important;
        border-color: color-mix(in srgb, var(--p4), transparent 20%) !important;
        box-shadow: -8px 0 40px rgba(0,0,0,0.525), -2px 0 20px color-mix(in srgb, var(--p4), transparent 65%) !important;
      }
      .daily-challenge-btn:active { transform: translateY(-50%) translateX(0) scale(0.98) !important; }
    }

    /* ── Weakness Practice Button ── */
    .weakness-practice-btn {
      width: 100%;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255,140,80,0.2);
      background: rgba(40,10,30,0.7);
      color: rgba(239,248,226,0.8);
      font-size: clamp(12px,2.8vw,13px);
      font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
    }
    .weakness-practice-btn:hover { border-color: rgba(255,140,80,0.4); }
    .weakness-practice-btn:active { transform: scale(0.97); }
    .weakness-practice-btn .wp-left { display:flex; align-items:center; gap:8px; }
    .weakness-practice-btn .wp-count { font-size:10px; background: rgba(255,100,50,0.15); color: rgba(255,180,100,0.8); border-radius:20px; padding:2px 8px; border:1px solid rgba(255,140,80,0.2); }

    /* ── Unlimited mode toggle ── */
    .unlimited-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }
    .unlimited-tog-label {
      font-size: 12px;
      font-weight: 600;
      color: rgba(239,248,226,0.5);
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .unlimited-tog-label input[type=checkbox] { display: none; }
    .unlimited-tog-pill {
      width: 34px; height: 18px;
      border-radius: 99px;
      background: color-mix(in srgb, var(--p4), transparent 60%);
      border: 1px solid rgba(239,248,226,0.15);
      position: relative;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .unlimited-tog-pill::after {
      content: '';
      position: absolute;
      top: 2px; left: 2px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: rgba(239,248,226,0.4);
      transition: transform 0.2s, background 0.2s;
    }
    .unlimited-tog-label input:checked + .unlimited-tog-pill {
      background: color-mix(in srgb, var(--acc), transparent 70%);
      border-color: color-mix(in srgb, var(--acc), transparent 60%);
    }
    .unlimited-tog-label input:checked + .unlimited-tog-pill::after {
      transform: translateX(16px);
      background: var(--acc);
    }
    .qcount-dimmed { opacity: 0.3; pointer-events: none; }

    /* End Session floating button */
    #endSessionBtn {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      z-index: 999;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(30,5,50,0.95);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 70%);
      border-radius: 99px;
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 700;
      color: #eff8e2;
      cursor: pointer;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      backdrop-filter: blur(12px);
      font-family: 'Inter', sans-serif;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.16s ease, box-shadow 0.16s ease;
    }
    #endSessionBtn.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    #endSessionBtn:active { transform: translateX(-50%) translateY(0) scale(0.96); }

    /* XP display in dashboard stats area */
    .dash-xp-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
      background: color-mix(in srgb, var(--p2), transparent 50%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 90%);
      border-radius: 14px;
      padding: 10px 16px;
    }
    .dash-xp-top { display: none; }
    .dash-xp-left { display: flex; align-items: center; gap: 12px; }
    .dash-xp-level {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--acc), transparent 88%);
      border: 3px solid color-mix(in srgb, var(--acc), transparent 56%);
      box-shadow: 0 0 8px color-mix(in srgb, var(--acc), transparent 88%);
      font-size: 15px; font-weight: 900; color: var(--acc);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: border-radius 0.2s ease, clip-path 0.2s ease, box-shadow 0.2s ease;
    }
    .dash-xp-level.xp-shape-beginner {
      border-radius: 50%;
      clip-path: none;
    }
    .dash-xp-level.xp-shape-apprentice {
      border-radius: 13px;
      clip-path: none;
    }
    .dash-xp-level.xp-shape-student {
      border-radius: 18px;
      clip-path: none;
    }
    .dash-xp-level.xp-shape-practitioner {
      border-radius: 10px;
      clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
    }
    .dash-xp-level.xp-shape-skilled {
      border-radius: 10px;
      clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
    }
    .dash-xp-level.xp-shape-advanced {
      border-radius: 8px;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
    .dash-xp-level.xp-shape-expert {
      border-radius: 10px;
      clip-path: polygon(18% 4%, 82% 4%, 96% 28%, 84% 82%, 50% 100%, 16% 82%, 4% 28%);
    }
    .dash-xp-level.xp-shape-master {
      border-radius: 8px;
      clip-path: polygon(14% 0, 86% 0, 100% 30%, 84% 84%, 50% 100%, 16% 84%, 0 30%);
    }
    .dash-xp-level.xp-shape-grandmaster {
      border-radius: 8px;
      clip-path: polygon(50% 0, 88% 12%, 100% 42%, 86% 82%, 50% 100%, 14% 82%, 0 42%, 12% 12%);
    }
    .dash-xp-level.xp-shape-legend {
      border-radius: 8px;
      clip-path: polygon(50% 0, 62% 26%, 90% 12%, 78% 40%, 100% 50%, 78% 60%, 90% 88%, 62% 74%, 50% 100%, 38% 74%, 10% 88%, 22% 60%, 0 50%, 22% 40%, 10% 12%, 38% 26%);
      box-shadow: 0 0 10px color-mix(in srgb, var(--acc), transparent 84%);
    }
    .dash-xp-info {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(92px, 34%);
      grid-template-rows: auto auto;
      column-gap: 18px;
      row-gap: 3px;
      align-items: center;
      flex: 1;
      min-width: 0;
    }
    .dash-xp-title { grid-column: 1; grid-row: 1; font-size: 14px; font-weight: 750; color: rgba(239,248,226,0.85); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dash-xp-sub   { grid-column: 1; grid-row: 2; font-size: 11px; color: rgba(239,248,226,0.35); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dash-xp-bar-wrap { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: 132px; margin: 0 0 0 auto; justify-self: end; }
    .dash-xp-bar-bg { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--p4), transparent 60%); overflow: hidden; }
    .dash-xp-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acc-lo), var(--acc)); transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }

    @media (max-width: 380px) {
      .dash-xp-row {
        gap: 12px;
        padding: 9px 14px;
      }
      .dash-xp-level {
        width: 44px;
        height: 44px;
        font-size: 13px;
      }
      .dash-xp-info {
        grid-template-columns: minmax(0, 1fr) minmax(76px, 30%);
        column-gap: 12px;
      }
      .dash-xp-bar-wrap {
        max-width: 98px;
      }
    }

    /* Profile edit panel */
    .dash-profile-panel {
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 85%);
      border-radius: 16px;
      padding: 16px;
      display: none;
      flex-direction: column;
      gap: 10px;
    }
    .dash-profile-panel.open { display: flex; }
    .profile-input {
      width: 100%;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1.5px solid color-mix(in srgb, var(--acc), transparent 80%);
      background: color-mix(in srgb, var(--p4), transparent 88%);
      color: #eff8e2;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      outline: none;
      transition: border-color 0.2s;
    }
    .profile-input:focus { border-color: color-mix(in srgb, var(--acc), transparent 50%); }
    .profile-save-btn {
      padding: 10px 16px;
      border-radius: 10px;
      border: none;
      background: rgba(123,168,50,0.25);
      color: var(--acc);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      border: 1px solid rgba(123,168,50,0.3);
      transition: background 0.15s;
    }
    .profile-save-btn:hover { background: rgba(123,168,50,0.4); }

    /* ════════════════════════════════════
       PRACTICE MODE — hide all progression UI
    ════════════════════════════════════ */
    html[data-practice="1"] .dash-xp-row,
    html[data-practice="1"] .streak-warning,
    html[data-practice="1"] #sessionSummaryCard .session-summary-xp-row,
    html[data-practice="1"] #improveBanner,
    html[data-practice="1"] #milestoneToast,
    html[data-practice="1"] #levelUpModal,
    html[data-practice="1"] #dailyChallengeBtn,
    html[data-practice="1"] .pb-xp-card,
    html[data-practice="1"] #hintBtn,
    html[data-practice="1"] .xp-float { display: none !important; }

    /* Practice mode toggle card in profile */
    .practice-mode-card {
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 85%);
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .practice-mode-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .practice-mode-title {
      font-size: 14px;
      font-weight: 700;
      color: #eff8e2;
    }
    .practice-mode-sub {
      font-size: 11px;
      color: rgba(239,248,226,0.4);
      margin-top: 3px;
      line-height: 1.4;
    }
    .practice-mode-active-badge {
      display: none;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--acc);
      background: color-mix(in srgb, var(--acc), transparent 88%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 70%);
      border-radius: 99px;
      padding: 3px 10px;
      width: fit-content;
    }
    html[data-practice="1"] .practice-mode-active-badge { display: block; }

    /* ════════════════════════════════════════════════
       PROFILE SCREEN
    ════════════════════════════════════════════════ */
    #s-profile { gap: 14px; }

    .profile-header {
      border-radius: 20px;
      padding: clamp(20px,5vw,28px);
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, color-mix(in srgb, var(--p4), transparent 50%) 0%, color-mix(in srgb, var(--p2), transparent 30%) 100%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 82%);
      box-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 1px 0 color-mix(in srgb, var(--acc), transparent 80%);
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .profile-header::before {
      content: '';
      position: absolute;
      top: 0; left: 8%; right: 8%; height: 1px;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc), transparent 20%) 50%, transparent);
    }
    .profile-avatar-wrap {
      position: relative;
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      background: transparent;
    }
    .profile-avatar {
      width: 64px; height: 64px;
      border-radius: 50%;
      overflow: hidden;
      padding: 0;
      appearance: none;
      -webkit-appearance: none;
      background-color: color-mix(in srgb, var(--acc), var(--p4) 34%);
      background-image: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; font-weight: 800; color: #eff8e2;
      flex-shrink: 0;
      border: 2px solid color-mix(in srgb, var(--acc), transparent 70%);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-origin: border-box;
      background-clip: border-box;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      line-height: 1;
    }
    .profile-avatar:empty {
      border-color: transparent;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc), transparent 70%);
    }
    .profile-avatar-edit-btn {
      position: absolute;
      right: -2px;
      bottom: -2px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      overflow: hidden;
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid color-mix(in srgb, var(--acc), transparent 62%);
      background: color-mix(in srgb, var(--surface-raised, var(--p4)), transparent 8%);
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      box-shadow: 0 6px 14px rgba(0,0,0,0.24);
    }
    .profile-avatar-edit-btn svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .profile-photo-menu {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 200;
      display: none;
      min-width: 132px;
      padding: 6px;
      border-radius: 13px;
      background: color-mix(in srgb, var(--surface-raised, var(--p4)), transparent 4%);
      border: 1px solid color-mix(in srgb, var(--border-strong), transparent 22%);
      box-shadow: var(--shadow-card);
    }
    .profile-photo-menu.open {
      display: flex;
      flex-direction: column;
      gap: 2px;
      animation: menuIn 0.14s ease both;
    }
    .profile-photo-menu button {
      border: 0;
      background: transparent;
      color: var(--text-primary);
      border-radius: 9px;
      padding: 8px 10px;
      text-align: left;
      font-size: 12px;
      font-weight: 700;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
    }
    .profile-photo-menu button:hover {
      background: color-mix(in srgb, var(--acc), transparent 88%);
    }
    .profile-photo-menu button.danger {
      color: var(--err);
    }
    @keyframes menuIn {
      from { opacity: 0; transform: translateY(-4px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .photo-viewer-modal {
      position: fixed;
      inset: 0;
      z-index: 260;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 22px;
    }
    .photo-viewer-modal.open {
      display: flex;
    }
    .photo-viewer-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.62);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .photo-viewer-card {
      position: relative;
      width: min(86vw, 420px);
      aspect-ratio: 1;
      border-radius: 22px;
      background: color-mix(in srgb, var(--surface-raised, var(--p4)), transparent 8%);
      border: 1px solid color-mix(in srgb, var(--border-strong), transparent 18%);
      box-shadow: var(--shadow-card);
      overflow: hidden;
      animation: menuIn 0.16s ease both;
    }
    .photo-viewer-card img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: color-mix(in srgb, var(--p0), transparent 8%);
    }
    .photo-viewer-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--border-strong), transparent 20%);
      background: color-mix(in srgb, var(--surface-raised, var(--p4)), transparent 8%);
      color: var(--text-primary);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      z-index: 1;
    }
    .photo-crop-modal {
      position: fixed;
      inset: 0;
      z-index: 270;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .photo-crop-modal.open { display: flex; }
    .photo-crop-backdrop {
      position: absolute;
      inset: 0;
      background: color-mix(in srgb, var(--p0), transparent 18%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .photo-crop-card {
      position: relative;
      width: min(92vw, 420px);
      max-height: min(92vh, 720px);
      overflow: auto;
      border-radius: 22px;
      padding: 20px;
      background: color-mix(in srgb, var(--surface-raised, var(--p4)), transparent 5%);
      border: 1px solid color-mix(in srgb, var(--border-strong), transparent 18%);
      box-shadow: var(--shadow-card);
      animation: menuIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .photo-crop-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--border-strong), transparent 25%);
      background: color-mix(in srgb, var(--surface-raised, var(--p4)), transparent 8%);
      color: var(--text-primary);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }
    .photo-crop-head {
      padding-right: 34px;
      margin-bottom: 16px;
    }
    .photo-crop-head h2 {
      margin: 0;
      color: var(--text-primary);
      font-size: 22px;
      line-height: 1.1;
      letter-spacing: 0;
    }
    .photo-crop-head p {
      margin: 7px 0 0;
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.4;
    }
    .photo-crop-stage {
      width: min(72vw, 300px);
      height: min(72vw, 300px);
      max-width: 300px;
      max-height: 300px;
      margin: 0 auto 16px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--inp), transparent 12%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 72%);
      box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--p0), transparent 96%), 0 12px 32px color-mix(in srgb, var(--shadow, var(--p0)), transparent 55%);
      overflow: hidden;
      touch-action: none;
      cursor: grab;
    }
    .photo-crop-stage:active { cursor: grabbing; }
    .photo-crop-circle {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      border-radius: inherit;
    }
    .photo-crop-circle img {
      position: absolute;
      left: 50%;
      top: 50%;
      max-width: none;
      user-select: none;
      pointer-events: none;
      transform-origin: center;
      will-change: transform;
    }
    .photo-crop-controls {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px 12px;
      align-items: center;
      margin-top: 4px;
    }
    .photo-crop-controls label {
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .photo-crop-controls input[type="range"] {
      width: 100%;
      accent-color: var(--acc);
    }
    .photo-crop-reset {
      grid-column: 1 / -1;
      justify-self: start;
      border: 0;
      background: transparent;
      color: var(--acc);
      padding: 2px 0;
      font-size: 12px;
      font-weight: 800;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
    }
    .photo-crop-status {
      min-height: 18px;
      margin-top: 8px;
      color: var(--text-secondary);
      font-size: 12px;
      line-height: 1.35;
    }
    .photo-crop-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 8px;
    }
    .photo-crop-actions button {
      min-height: 44px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 800;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      text-align: center;
    }
    .photo-crop-cancel {
      border: 1px solid color-mix(in srgb, var(--border-strong), transparent 28%);
      background: color-mix(in srgb, var(--surface-raised, var(--p4)), transparent 18%);
      color: var(--text-primary);
    }
    .photo-crop-save {
      border: 1px solid color-mix(in srgb, var(--acc), transparent 38%);
      background: var(--acc);
      color: var(--btn-txt);
      box-shadow: 0 10px 28px color-mix(in srgb, var(--acc), transparent 72%);
    }
    .photo-crop-save:disabled {
      opacity: 0.65;
      cursor: wait;
    }
    @media (max-width: 420px) {
      .photo-crop-card {
        padding: 18px;
      }
      .photo-crop-actions {
        grid-template-columns: 1fr;
      }
    }
    .profile-header-info { flex: 1; min-width: 0; }
    .profile-header-name {
      font-size: clamp(20px,5vw,28px);
      font-weight: 800; color: #eff8e2;
      letter-spacing: -0.5px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .profile-header-since {
      font-size: 12px; color: rgba(239,248,226,0.4);
      margin-top: 3px;
    }
    .profile-photo-btn {
      margin-top: 8px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--acc);
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      opacity: 0.9;
    }
    .profile-photo-btn:hover { opacity: 1; }
    .profile-photo-remove-btn {
      display: block;
      margin-top: 5px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      opacity: 0.72;
    }
    .profile-photo-remove-btn[hidden] { display: none; }
    .profile-photo-remove-btn:hover {
      color: var(--err);
      opacity: 1;
    }
    .profile-header-edit {
      padding: 9px 14px;
      border-radius: 10px;
      border: 1px solid color-mix(in srgb, var(--acc), transparent 80%);
      background: color-mix(in srgb, var(--p4), transparent 80%);
      color: rgba(239,248,226,0.7);
      font-size: 13px; font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
      flex-shrink: 0;
    }
    .profile-header-edit:hover { border-color: color-mix(in srgb, var(--acc), transparent 50%); color: #eff8e2; }

    /* inline name editor */
    .profile-name-edit {
      display: none;
      gap: 8px;
      align-items: center;
      overflow: hidden;
      contain: layout paint;
    }
    .profile-name-edit.open,
    .profile-name-edit.closing { display: flex; }
    .profile-name-edit.open {
      animation: revealRowIn 0.2s cubic-bezier(0.22,1,0.36,1) both;
    }
    .profile-name-edit.closing {
      animation: revealRowOut 0.18s ease both;
      will-change: max-height, opacity, transform;
    }
    .profile-name-edit input {
      flex: 1;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1.5px solid color-mix(in srgb, var(--acc), transparent 70%);
      background: color-mix(in srgb, var(--inp), transparent 12%);
      color: var(--text-primary);
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      outline: none;
    }
    .profile-name-edit input::placeholder { color: var(--text-muted); }
    .profile-name-edit input:focus {
      border-color: var(--acc);
      box-shadow: var(--focus-ring);
    }
    .profile-name-edit button {
      padding: 10px 14px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--acc), transparent 84%);
      color: var(--acc);
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      border: 1px solid color-mix(in srgb, var(--acc), transparent 72%);
    }
    .profile-name-edit button:hover {
      background: color-mix(in srgb, var(--acc), transparent 76%);
      border-color: color-mix(in srgb, var(--acc), transparent 58%);
    }

    /* Stat grid */
    .profile-stats-grid {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 10px;
    }
    .profile-stat-card {
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 90%);
      border-radius: 16px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .profile-stat-icon { font-size: 20px; margin-bottom: 2px; }
    .profile-stat-val {
      font-size: clamp(22px,5.5vw,30px);
      font-weight: 800;
      color: var(--acc);
      line-height: 1;
    }
    .profile-stat-lbl {
      font-size: 11px;
      font-weight: 600;
      color: rgba(239,248,226,0.35);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    /* Accuracy bar */
    .profile-acc-bar-wrap {
      background: color-mix(in srgb, var(--p2), transparent 40%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 90%);
      border-radius: 16px;
      padding: 16px 14px;
    }
    .profile-acc-row {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 8px;
    }
    .profile-acc-label { font-size: 12px; color: rgba(239,248,226,0.5); font-weight: 600; }
    .profile-acc-val   { font-size: 18px; font-weight: 800; color: var(--acc); }
    .profile-bar-bg {
      height: 8px; border-radius: 99px;
      background: color-mix(in srgb, var(--p4), transparent 70%);
      overflow: hidden;
    }
    .profile-bar-fill {
      height: 100%; border-radius: 99px;
      background: linear-gradient(90deg, var(--acc-lo), var(--acc));
      transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
    }

    /* Recent sessions on profile */
    .profile-sessions {
      background: color-mix(in srgb, var(--p2), transparent 50%);
      border: 1px solid color-mix(in srgb, var(--acc), transparent 90%);
      border-radius: 16px;
      overflow: hidden;
    }

    /* Danger zone */
    .profile-danger {
      background: color-mix(in srgb, var(--p2), transparent 60%);
      border: 1px solid rgba(202,60,37,0.2);
      border-radius: 16px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .profile-danger-label { font-size: 13px; color: rgba(239,248,226,0.5); }
    .profile-danger-btn {
      padding: 8px 14px;
      border-radius: 8px;
      border: 1px solid rgba(202,60,37,0.4);
      background: rgba(202,60,37,0.12);
      color: rgba(202,60,37,0.8);
      font-size: 12px; font-weight: 700;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .profile-danger-btn:hover { background: rgba(202,60,37,0.25); color: #ff6b4a; }

    .profile-version {
      margin-top: 4px;
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      opacity: 0.72;
      letter-spacing: 0;
    }
    /* ════════════════════════════════════
       TIMED MODE DURATION SLIDER
    ════════════════════════════════════ */
    .timed-slider-wrap {
      display: none;
      flex-direction: column;
      gap: 10px;
      margin-top: 6px;
    }
    .timed-slider-wrap.visible { display: flex; }
    .timed-slider-labels {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .timed-slider-label {
      font-size: 11px;
      color: rgba(239,248,226,0.35);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }
    .timed-slider-val {
      font-size: 19px;
      font-weight: 800;
      color: var(--acc);
      text-shadow: 0 0 16px color-mix(in srgb, var(--acc), transparent 60%);
      letter-spacing: -0.5px;
    }
    .timed-range {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 7px;
      background: color-mix(in srgb, var(--p0), var(--surf) 42%);
      border: 1px solid color-mix(in srgb, var(--border-strong), transparent 18%);
      border-radius: 99px;
      outline: none;
      cursor: pointer;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.22), 0 1px 0 color-mix(in srgb, var(--p7), transparent 78%);
    }
    .timed-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--acc);
      border: 2px solid var(--acc-vlo);
      box-shadow: 0 0 10px color-mix(in srgb, var(--acc), transparent 40%);
      cursor: pointer;
      margin-top: -8px;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .timed-range::-webkit-slider-thumb:hover {
      transform: scale(1.2);
      box-shadow: 0 0 18px color-mix(in srgb, var(--acc), transparent 20%);
    }
    .timed-range::-webkit-slider-runnable-track {
      height: 7px; border-radius: 99px;
    }
    .timed-range::-moz-range-thumb {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--acc);
      border: 2px solid var(--acc-vlo);
      box-shadow: 0 0 10px color-mix(in srgb, var(--acc), transparent 40%);
      cursor: pointer;
    }
    .timed-range-ticks {
      display: flex;
      justify-content: space-between;
      padding: 0 4px;
    }
    .timed-tick {
      font-size: 10px;
      color: rgba(239,248,226,0.25);
      font-weight: 600;
      flex: 1;
      text-align: center;
    }
    .timed-tick.active-tick { color: var(--acc); }

    /* ════════════════════════════════════
       TIMED MODE — IN-QUIZ COUNTDOWN BAR
    ════════════════════════════════════ */
    .timed-mode-bar {
      display: none;
      flex-direction: column;
      gap: 6px;
      padding: 10px 16px 12px;
      background: rgba(50,10,75,0.4);
      border-bottom: 1px solid color-mix(in srgb, var(--acc), transparent 88%);
      flex-shrink: 0;
    }
    .timed-mode-bar, .timed-mode-bar.visible { display: none !important; }
    .timed-mode-bar-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .timed-mode-label {
      font-size: 11px;
      font-weight: 600;
      color: rgba(239,248,226,0.4);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .timed-mode-qcount {
      font-size: 12px;
      font-weight: 600;
      color: rgba(239,248,226,0.5);
    }
    .timed-mode-countdown {
      font-size: 24px;
      font-weight: 800;
      color: var(--acc);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.5px;
      text-shadow: 0 0 20px color-mix(in srgb, var(--acc), transparent 60%);
      transition: color 0.3s;
    }
    .timed-mode-countdown.urgent { color: #ff7070; text-shadow: 0 0 20px rgba(255,112,112,0.5); }
    .timed-mode-track {
      height: 8px;
      background: rgba(239,248,226,0.1);
      border-radius: 99px;
      overflow: hidden;
    }
    .timed-mode-fill {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--acc), var(--acc-lo));
      transition: width 0.1s linear;
    }
    .timed-mode-fill.urgent { background: linear-gradient(90deg, #ff7070, #cc4444); }

    /* ════════════════════════════════════
       TIMED RESULTS
    ════════════════════════════════════ */
    .timed-result-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: clamp(18px,5vw,28px) 0 clamp(10px,3vw,16px);
      flex-shrink: 0;
    }
    .timed-result-label {
      font-size: 12px;
      font-weight: 600;
      color: rgba(239,248,226,0.4);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .timed-result-num {
      font-size: clamp(52px, 15vw, 72px);
      font-weight: 800;
      color: var(--acc);
      letter-spacing: -2px;
      line-height: 1;
      text-shadow: 0 0 30px color-mix(in srgb, var(--acc), transparent 40%), 0 0 80px color-mix(in srgb, var(--acc), transparent 80%);
    }
    .timed-result-sub {
      font-size: clamp(13px, 3.2vw, 15px);
      color: rgba(239,248,226,0.45);
      margin-top: 2px;
    }
    .timed-stat-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(8px, 2.5vw, 12px);
      margin: 0 clamp(12px,4vw,20px) clamp(12px,3.5vw,18px);
      flex-shrink: 0;
    }
    @keyframes timedNumIn {
      from { opacity:0; transform: scale(0.4) translateY(12px); }
      to   { opacity:1; transform: scale(1) translateY(0); }
    }
    .timed-result-num { animation: timedNumIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: 0.1s; }

  /* ══════════════════════════════════════════════
     THEME: MINIMAL
     Fully flat — solid colours, no blur, no glow, no transparency
  ═════════════════════════════════════════════h   */

  /* 0. Rebalanced colour palette — dark-purple surfaces, lime accent */
  html[data-theme="minimal"] {
    --surf:   var(--p2);   /* #2d0a3d — dark card surface (was medium #573280) */
    --surf-d: var(--p1);   /* #23022e — deeper secondary surface */
    --hov:    var(--p3);   /* #3d0a57 — hover highlight */
    --bar-bg: var(--p1);   /* #23022e — progress bar troughs */
  }

  /* 1. Kill every backdrop-filter site-wide */
  html[data-theme="minimal"] * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 2. Remove animated background blobs */
  html[data-theme="minimal"] body::before,
  html[data-theme="minimal"] body::after { display: none; }

  /* 3. App shell */
  html[data-theme="minimal"] .app {
    background: var(--app-bg);
    box-shadow: none;
    border-color: color-mix(in srgb, var(--acc), transparent 85%);
  }
  html[data-theme="minimal"] .app::before,
  html[data-theme="minimal"] .app::after { display: none; }

  /* 4. Setup header / dash header / profile header — solid surface */
  html[data-theme="minimal"] .setup-header,
  html[data-theme="minimal"] .dash-header,
  html[data-theme="minimal"] .profile-header {
    background: var(--surf);
    box-shadow: none;
    border-color: color-mix(in srgb, var(--acc), transparent 88%);
  }
  html[data-theme="minimal"] .setup-header::before,
  html[data-theme="minimal"] .setup-header::after,
  html[data-theme="minimal"] .dash-header::before,
  html[data-theme="minimal"] .profile-header::before { display: none; }

  /* 5. Setup body */
  html[data-theme="minimal"] .setup-body {
    background: var(--surf-d);
    box-shadow: none;
  }

  /* 6. Cards */
  html[data-theme="minimal"] .card,
  html[data-theme="minimal"] .q-card,
  html[data-theme="minimal"] .res-cw-card,
  html[data-theme="minimal"] .review-wrap,
  html[data-theme="minimal"] .daily-goal-card,
  html[data-theme="minimal"] .profile-stat-card,
  html[data-theme="minimal"] .pb-c,
  html[data-theme="minimal"] .pb-xp-card {
    background: var(--surf);
    box-shadow: none;
  }
  html[data-theme="minimal"] .q-timer-chip {
    background: none;
    box-shadow: none;
  }
  html[data-theme="minimal"] #timedStatRow .stat-c {
    background: var(--surf);
    border-color: rgba(25, 25, 25, 0.12);
}

.auth-account-card {
  background: color-mix(in srgb, var(--p2), transparent 48%);
  border: 1px solid color-mix(in srgb, var(--acc), transparent 88%);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.auth-account-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--acc), transparent 78%);
}

.auth-account-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-account-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.auth-account-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}

.auth-sync-pill {
  display: none;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc), transparent 72%);
  background: color-mix(in srgb, var(--acc), transparent 88%);
  color: var(--acc);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--acc), transparent 86%);
}

.auth-sync-pill.show {
  display: inline-flex;
  animation: pillFadeIn 0.18s ease both;
}

.auth-sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 color-mix(in srgb, currentColor, transparent 56%);
  animation: syncDotPulse 0.9s ease-in-out infinite;
}

@keyframes pillFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes syncDotPulse {
  0%, 100% { transform: scale(0.82); opacity: 0.65; }
  50% { transform: scale(1); opacity: 1; }
}

.auth-account-status,
.auth-account-email {
  font-size: 12px;
  color: var(--text-secondary);
  transition: color 0.16s ease, opacity 0.18s ease, transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

.auth-account-email {
  color: var(--acc);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(56vw, 340px);
}

.auth-account-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

.auth-account-card.auth-state-changing .auth-account-status,
.auth-account-card.auth-state-changing .auth-account-email,
.auth-account-card.auth-state-changing .auth-account-actions {
  animation: authStateFade 0.22s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes authStateFade {
  from { opacity: 0.55; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-account-btn,
.auth-account-logout,
.auth-submit,
.auth-mode-toggle,
.auth-modal-close,
.sync-notice-primary,
.sync-notice-secondary,
.pwa-install-primary,
.pwa-install-secondary,
.reset-modal-close,
.reset-cancel-btn,
.reset-confirm-btn {
  font-family: 'Inter', sans-serif;
}

.auth-account-btn,
.auth-submit,
.sync-notice-primary,
.pwa-install-primary,
.reset-confirm-btn {
  border: 1px solid color-mix(in srgb, var(--acc), transparent 68%);
  border-radius: 12px;
  background: var(--acc);
  color: var(--btn-txt);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--acc), transparent 78%);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.auth-account-btn {
  padding: 10px 14px;
  white-space: nowrap;
}

.auth-account-btn:hover,
.auth-submit:hover,
.sync-notice-primary:hover,
.pwa-install-primary:hover,
.reset-confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--acc), transparent 70%);
}

.auth-account-btn:disabled,
.auth-submit:disabled {
  cursor: default;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.auth-account-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-strong), transparent 15%);
  background: color-mix(in srgb, var(--surf-d), transparent 35%);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  transform: translateY(3px);
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22,1,0.36,1), max-width 0.2s cubic-bezier(0.22,1,0.36,1), padding-left 0.2s ease, padding-right 0.2s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease, visibility 0s linear 0.18s;
}

.auth-account-logout:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--acc), transparent 74%);
}

.auth-account-card.logged-in .auth-account-logout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  max-width: 92px;
  padding-left: 12px;
  padding-right: 12px;
  transform: translateY(0);
  transition-delay: 0s;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.auth-modal.open,
.auth-modal.closing {
  display: flex;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--p0), transparent 18%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.auth-modal-card {
  width: min(100%, 420px);
  position: relative;
  z-index: 1;
  border-radius: 20px;
  padding: clamp(20px, 5vw, 26px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surf), transparent 10%), color-mix(in srgb, var(--p1), transparent 18%));
  border: 1px solid color-mix(in srgb, var(--acc), transparent 78%);
  box-shadow: var(--shadow-app);
  overflow: hidden;
}

.auth-modal.open .auth-modal-backdrop,
.reset-modal.open .reset-modal-backdrop,
.conflict-modal.open .conflict-modal-backdrop {
  animation: modalBackdropIn 0.18s ease both;
}

.auth-modal.open .auth-modal-card,
.reset-modal.open .reset-modal-card,
.conflict-modal.open .conflict-modal-card {
  animation: modalCardIn 0.22s cubic-bezier(0.22,1,0.36,1) both;
}

.auth-modal.closing .auth-modal-backdrop,
.reset-modal.closing .reset-modal-backdrop,
.conflict-modal.closing .conflict-modal-backdrop {
  animation: modalBackdropOut 0.18s ease both;
}

.auth-modal.closing .auth-modal-card,
.reset-modal.closing .reset-modal-card,
.conflict-modal.closing .conflict-modal-card {
  animation: modalCardOut 0.18s ease both;
}

@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes modalCardOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(0.985); }
}

@media (max-width: 560px) {
  .profile-name-edit.open {
    animation-name: revealProfileEditMobileIn;
    animation-duration: 0.24s;
    animation-timing-function: cubic-bezier(0.22,1,0.36,1);
  }
  .profile-name-edit.closing {
    animation-name: revealProfileEditMobileOut;
    animation-duration: 0.2s;
    animation-timing-function: cubic-bezier(0.4,0,0.2,1);
  }
  @keyframes revealProfileEditMobileIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes revealProfileEditMobileOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
  }

  .auth-modal-card,
  .reset-modal-card,
  .conflict-modal-card {
    contain: layout paint;
    transform: translateZ(0);
  }
  .auth-modal.open .auth-modal-card,
  .auth-modal.closing .auth-modal-card,
  .reset-modal.open .reset-modal-card,
  .reset-modal.closing .reset-modal-card,
  .conflict-modal.open .conflict-modal-card,
  .conflict-modal.closing .conflict-modal-card {
    will-change: opacity, transform;
  }
  .auth-modal.open .auth-modal-backdrop,
  .reset-modal.open .reset-modal-backdrop,
  .conflict-modal.open .conflict-modal-backdrop,
  .auth-modal.closing .auth-modal-backdrop,
  .reset-modal.closing .reset-modal-backdrop,
  .conflict-modal.closing .conflict-modal-backdrop {
    animation: none;
  }
}

.auth-modal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc), transparent 25%), transparent);
}

.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-strong), transparent 20%);
  background: color-mix(in srgb, var(--surf-d), transparent 35%);
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.auth-modal-close:hover,
.reset-modal-close:hover,
.conflict-modal-close:hover {
  transform: translateY(-1px);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--acc), transparent 72%);
}

.auth-modal-head {
  padding-right: 34px;
  margin-bottom: 18px;
}

.auth-modal-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acc);
  margin-bottom: 6px;
}

.auth-modal-head h2 {
  margin: 0;
  font-size: clamp(24px, 6vw, 32px);
  color: var(--text-primary);
  line-height: 1.1;
}

.auth-modal-head p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.auth-form,
.auth-logged-in {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.auth-field input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--acc), transparent 78%);
  background: color-mix(in srgb, var(--inp), transparent 16%);
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  outline: none;
}

.auth-field input:focus {
  border-color: var(--acc);
  box-shadow: var(--focus-ring);
}

.auth-submit {
  padding: 13px 16px;
  margin-top: 4px;
}

.auth-mode-toggle {
  border: none;
  background: transparent;
  color: var(--acc);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px;
}

.auth-status {
  min-height: 18px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  transition: color 0.16s ease, opacity 0.16s ease;
}

.auth-status.error {
  color: var(--err);
}

.auth-logged-in {
  display: none;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--acc), transparent 86%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surf-d), transparent 42%);
  animation: statusFadeIn 0.18s ease both;
}

.auth-modal.is-logged-in .auth-form {
  display: none;
}

.auth-modal.is-logged-in .auth-logged-in {
  display: flex;
}

.auth-user-email {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.auth-user-state {
  color: var(--acc);
  font-size: 13px;
  font-weight: 700;
}

.sync-notice {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  transform: translateX(-50%) translateY(18px);
  z-index: 2500;
  width: min(calc(100vw - 28px), 520px);
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surf), transparent 10%), color-mix(in srgb, var(--p1), transparent 18%));
  border: 1px solid color-mix(in srgb, var(--acc), transparent 78%);
  box-shadow: var(--shadow-app);
}

.sync-notice.show {
  display: flex;
  transform: translateX(-50%) translateY(0);
  animation: noticeSlideIn 0.26s cubic-bezier(0.22,1,0.36,1) both;
}

.pwa-install-notice {
  position: fixed;
  left: 50%;
  bottom: max(96px, calc(env(safe-area-inset-bottom, 18px) + 78px));
  transform: translateX(-50%) translateY(18px);
  z-index: 2450;
  width: min(calc(100vw - 28px), 520px);
  display: none;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surf), transparent 10%), color-mix(in srgb, var(--p1), transparent 18%));
  border: 1px solid color-mix(in srgb, var(--acc), transparent 78%);
  box-shadow: var(--shadow-app);
}

.pwa-install-notice.show {
  display: flex;
  transform: translateX(-50%) translateY(0);
  animation: noticeSlideIn 0.26s cubic-bezier(0.22,1,0.36,1) both;
}

.sync-notice.show:has(~ .pwa-install-notice.show) {
  bottom: max(108px, calc(env(safe-area-inset-bottom, 18px) + 90px));
}

@keyframes noticeSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.99); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes statusFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.sync-notice-copy,
.pwa-install-copy {
  min-width: 0;
  flex: 1;
}

.sync-notice-title,
.pwa-install-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.sync-notice-body,
.pwa-install-body {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.sync-notice-actions,
.pwa-install-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.sync-notice-primary,
.sync-notice-secondary,
.pwa-install-primary,
.pwa-install-secondary {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.sync-notice-secondary,
.pwa-install-secondary,
.reset-cancel-btn {
  border: 1px solid color-mix(in srgb, var(--border-strong), transparent 15%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surf-d), transparent 35%);
  color: var(--text-secondary);
}

.sync-notice-secondary:hover,
.pwa-install-secondary:hover,
.reset-cancel-btn:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--acc), transparent 70%);
}

.auth-account-btn:active,
.auth-account-logout:active,
.auth-submit:active,
.auth-mode-toggle:active,
.auth-modal-close:active,
.sync-notice-primary:active,
.sync-notice-secondary:active,
.pwa-install-primary:active,
.pwa-install-secondary:active,
.reset-modal-close:active,
.conflict-modal-close:active,
.conflict-cancel-btn:active,
.conflict-account-btn:active,
.conflict-device-btn:active,
.conflict-replace-btn:active,
.reset-cancel-btn:active,
.reset-confirm-btn:active,
.profile-header-edit:active,
.profile-photo-btn:active,
.profile-danger-btn:active,
.profile-name-edit button:active,
.theme-opt-btn:active,
.diff-btn:active,
.type-btn:active,
.timer-opt:active {
  transform: scale(0.98);
}

.reset-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.conflict-modal {
  position: fixed;
  inset: 0;
  z-index: 3150;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.reset-modal.open,
.reset-modal.closing,
.conflict-modal.open,
.conflict-modal.closing {
  display: flex;
}

.reset-modal-backdrop,
.conflict-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--p0), transparent 18%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.reset-modal-card,
.conflict-modal-card {
  width: min(100%, 440px);
  position: relative;
  z-index: 1;
  border-radius: 20px;
  padding: clamp(20px, 5vw, 26px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surf), transparent 10%), color-mix(in srgb, var(--p1), transparent 18%));
  border: 1px solid color-mix(in srgb, var(--err), transparent 70%);
  box-shadow: var(--shadow-app);
  overflow: hidden;
}

.conflict-modal-card {
  border-color: color-mix(in srgb, var(--acc), transparent 72%);
}

.conflict-modal-card.warning {
  border-color: color-mix(in srgb, var(--err), transparent 70%);
}

.reset-modal-card::before,
.conflict-modal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--err), transparent 35%), transparent);
}

.conflict-modal-card::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc), transparent 35%), transparent);
}

.conflict-modal-card.warning::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--err), transparent 35%), transparent);
}

.reset-modal-close,
.conflict-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-strong), transparent 20%);
  background: color-mix(in srgb, var(--surf-d), transparent 35%);
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.reset-modal-head,
.conflict-modal-head {
  padding-right: 34px;
  margin-bottom: 18px;
}

.reset-modal-kicker,
.conflict-modal-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--err);
  margin-bottom: 6px;
}

.conflict-modal-kicker {
  color: var(--acc);
}

.conflict-modal-card.warning .conflict-modal-kicker {
  color: var(--err);
}

.reset-modal-head h2,
.conflict-modal-head h2 {
  margin: 0;
  font-size: clamp(24px, 6vw, 32px);
  color: var(--text-primary);
  line-height: 1.1;
}

.reset-modal-head p,
.conflict-modal-head p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.conflict-compare {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}

.conflict-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.conflict-compare-card {
  border: 1px solid color-mix(in srgb, var(--border-strong), transparent 30%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surf-d), transparent 42%);
  padding: 12px;
  min-width: 0;
}

.conflict-compare-label {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 8px;
}

.conflict-compare-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.conflict-compare-row + .conflict-compare-row {
  margin-top: 6px;
}

.conflict-compare-row strong {
  color: var(--text-primary);
  font-weight: 800;
  text-align: right;
}

.conflict-diff-note,
.conflict-recommendation {
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.35;
}

.conflict-diff-note {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surf-d), transparent 55%);
  border: 1px solid color-mix(in srgb, var(--border-strong), transparent 45%);
}

.conflict-recommendation {
  color: var(--acc);
  background: color-mix(in srgb, var(--acc), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--acc), transparent 74%);
  font-weight: 900;
}

.reset-modal-actions,
.conflict-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.reset-cancel-btn,
.reset-confirm-btn,
.conflict-cancel-btn,
.conflict-account-btn,
.conflict-device-btn,
.conflict-replace-btn {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.conflict-cancel-btn,
.conflict-account-btn,
.conflict-device-btn,
.conflict-replace-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  line-height: 1.2;
}

.conflict-account-btn,
.conflict-device-btn {
  flex: 1 1 0;
  min-width: min(100%, 168px);
  min-height: 66px;
  justify-content: center;
  order: 1;
}

.conflict-cancel-btn {
  flex: 0 0 100%;
  min-height: 44px;
  justify-content: center;
  order: 2;
}

.conflict-cancel-btn small,
.conflict-account-btn small,
.conflict-device-btn small {
  color: currentColor;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0.72;
}

.reset-confirm-btn,
.conflict-account-btn {
  background: var(--err);
  border-color: color-mix(in srgb, var(--err), transparent 35%);
  color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--err), transparent 78%);
}

.conflict-account-btn {
  background: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc), transparent 58%);
  color: var(--btn-txt);
  border-radius: 12px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--acc), transparent 78%);
}

.conflict-device-btn,
.conflict-replace-btn {
  border: 1px solid color-mix(in srgb, var(--err), transparent 58%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--err), transparent 86%);
  color: var(--err);
}

.conflict-cancel-btn {
  border: 1px solid color-mix(in srgb, var(--border-strong), transparent 15%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surf-d), transparent 35%);
  color: var(--text-secondary);
}

.conflict-cancel-btn:hover,
.conflict-device-btn:hover,
.conflict-replace-btn:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--acc), transparent 70%);
}

.conflict-action-primary {
  background: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc), transparent 58%);
  color: var(--btn-txt);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--acc), transparent 78%);
}

.conflict-action-secondary {
  background: color-mix(in srgb, var(--surf-d), transparent 35%);
  border: 1px solid color-mix(in srgb, var(--border-strong), transparent 15%);
  color: var(--text-primary);
  box-shadow: none;
}

.conflict-action-secondary.conflict-action-destructive {
  background: color-mix(in srgb, var(--err), transparent 90%);
  border-color: color-mix(in srgb, var(--err), transparent 62%);
  color: var(--err);
}

.conflict-action-tertiary {
  background: transparent;
  border-color: color-mix(in srgb, var(--border-strong), transparent 45%);
  color: var(--text-secondary);
  box-shadow: none;
  opacity: 0.86;
}

.conflict-action-tertiary small {
  display: none;
}

#replaceAccountModal .conflict-modal-actions {
  flex-wrap: nowrap;
}

#replaceAccountModal .conflict-cancel-btn,
#replaceAccountModal .conflict-replace-btn {
  flex: 1 1 0;
  min-height: 48px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#replaceAccountModal .conflict-cancel-btn {
  order: 1;
}

#replaceAccountModal .conflict-replace-btn {
  order: 2;
  background: var(--acc);
  border-color: color-mix(in srgb, var(--acc), transparent 58%);
  color: var(--btn-txt);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--acc), transparent 78%);
}

.profile-stat-card,
.profile-danger,
.practice-mode-card {
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.profile-stat-card:hover,
.practice-mode-card:hover {
  transform: translateY(-1px);
}

html[data-theme="minimal"] .auth-account-card,
html[data-theme="minimal"] .auth-modal-card,
html[data-theme="minimal"] .auth-logged-in,
html[data-theme="minimal"] .sync-notice,
html[data-theme="minimal"] .pwa-install-notice,
html[data-theme="minimal"] .reset-modal-card,
html[data-theme="minimal"] .conflict-modal-card {
  box-shadow: none;
}

html[data-theme="minimal"] .auth-modal-backdrop,
html[data-theme="minimal"] .reset-modal-backdrop,
html[data-theme="minimal"] .conflict-modal-backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.theme-ui-refreshing .auth-account-card,
html.theme-ui-refreshing .auth-modal-card,
html.theme-ui-refreshing .sync-notice,
html.theme-ui-refreshing .pwa-install-notice,
html.theme-ui-refreshing .reset-modal-card,
html.theme-ui-refreshing .conflict-modal-card,
html.theme-ui-refreshing .profile-header,
html.theme-ui-refreshing .profile-stat-card,
html.theme-ui-refreshing .card {
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  body::before,
  body::after,
  .q-card,
  .levelup-emblem-ring,
  .dc-chevron {
    animation: none !important;
  }

  .auth-modal.open .auth-modal-card,
  .auth-modal.closing .auth-modal-card,
  .reset-modal.open .reset-modal-card,
  .reset-modal.closing .reset-modal-card,
  .conflict-modal.open .conflict-modal-card,
  .conflict-modal.closing .conflict-modal-card,
  .auth-sync-pill.show,
  .sync-notice.show,
  .pwa-install-notice.show,
  .screen.active,
  .screen.active .card {
    transform: none !important;
  }

  .auth-sync-dot {
    animation: none !important;
  }
}

@media (max-width: 560px) {
  .auth-account-card {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-account-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .auth-account-btn,
  .auth-account-logout {
    width: 100%;
  }

  .auth-account-card.logged-in .auth-account-logout {
    max-width: none;
  }

  .sync-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .sync-notice.show:has(~ .pwa-install-notice.show) {
    bottom: max(198px, calc(env(safe-area-inset-bottom, 18px) + 186px));
  }

  .pwa-install-notice {
    bottom: max(112px, calc(env(safe-area-inset-bottom, 18px) + 104px));
    align-items: stretch;
    flex-direction: column;
  }

  .sync-notice-actions,
  .pwa-install-actions,
  .reset-modal-actions,
  .conflict-modal-actions {
    flex-direction: column-reverse;
  }

  .conflict-modal-actions {
    flex-direction: row;
  }

  #replaceAccountModal .conflict-modal-actions {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .conflict-compare-grid {
    grid-template-columns: 1fr;
  }

  .sync-notice-primary,
  .sync-notice-secondary,
  .pwa-install-primary,
  .pwa-install-secondary,
  .reset-cancel-btn,
  .reset-confirm-btn,
  .conflict-cancel-btn,
  .conflict-account-btn,
  .conflict-device-btn,
  .conflict-replace-btn {
    width: 100%;
  }

  .auth-account-btn,
  .auth-account-logout {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}