/* HYUNWOO UI POLISH V14
   Extracted from late app.css patches so app.css stops being the dumping ground.
   Loaded after app.css and before ox-player.css.
   Keep non-OX frame/bottom-tab/Q&A/leaderboard polish here. */

/* V14 extracted from app.css: global frame lock */
/* HYUNWOO GLOBAL FRAME LOCK: same platform, same content width */
    :root {
      --global-frame-mobile: 560px;
      --global-frame-tablet: 760px;
      --global-frame-desktop: 1120px;
      --global-frame-mobile-gutter: 24px;
      --global-frame-tablet-gutter: 40px;
      --global-frame-desktop-gutter: 56px;
    }

    .app,
    body.study-home-active .app,
    body.feature-page-active .app,
    body.exam-tab-active .app,
    body.profile-tab-active .app,
    body.hall-tab-active .app,
    body.dedicated-ox-player .app {
      width: min(var(--global-frame-mobile), calc(100vw - var(--global-frame-mobile-gutter))) !important;
      max-width: min(var(--global-frame-mobile), calc(100vw - var(--global-frame-mobile-gutter))) !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    @media (min-width: 701px) and (max-width: 900px) {
      .app,
      body.study-home-active .app,
      body.feature-page-active .app,
      body.exam-tab-active .app,
      body.profile-tab-active .app,
      body.hall-tab-active .app,
      body.dedicated-ox-player .app {
        width: min(var(--global-frame-tablet), calc(100vw - var(--global-frame-tablet-gutter))) !important;
        max-width: min(var(--global-frame-tablet), calc(100vw - var(--global-frame-tablet-gutter))) !important;
      }
    }

    @media (min-width: 901px) {
      .app,
      body.study-home-active .app,
      body.feature-page-active .app,
      body.exam-tab-active .app,
      body.profile-tab-active .app,
      body.hall-tab-active .app,
      body.dedicated-ox-player .app {
        width: min(var(--global-frame-desktop), calc(100vw - var(--global-frame-desktop-gutter))) !important;
        max-width: min(var(--global-frame-desktop), calc(100vw - var(--global-frame-desktop-gutter))) !important;
      }
    }


/* V14 extracted from app.css: bottom tabbar final polish */
/* HYUNWOO PATCH 2026-07-01: requested final layout and route fixes */
    :root {
      --hy-bottom-tab-final-h: 66px;
      --hy-ox-desktop-choice-bottom: 10px;
      --hy-ox-desktop-choice-h: 78px;
      --hy-ox-standard-question-h: clamp(214px, 34vh, 330px);
    }

    /* 하단바: 텍스트가 잘리지 않도록 최종 폭/높이/텍스트 렌더링 보정 */
    .bottom-tabbar,
    body.exam-tab-active .bottom-tabbar,
    body.dedicated-ox-player .bottom-tabbar,
    body.player-active .bottom-tabbar,
    body.solving-active .bottom-tabbar,
    body.ox-player-active .bottom-tabbar {
      width: min(620px, calc(100vw - 16px)) !important;
      min-height: var(--hy-bottom-tab-final-h) !important;
      padding: 7px !important;
      overflow: visible !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .bottom-tabbar::before {
      top: 7px !important;
      left: 7px !important;
      width: calc((100% - 14px) / 4) !important;
      height: calc(100% - 14px) !important;
    }

    .bottom-tab-btn {
      min-width: 0 !important;
      min-height: 50px !important;
      padding: 0 5px !important;
      gap: 5px !important;
      font-size: 12.4px !important;
      line-height: 1 !important;
      white-space: nowrap !important;
      overflow: visible !important;
    }

    .bottom-tab-btn svg {
      width: 17px !important;
      height: 17px !important;
      flex: 0 0 17px !important;
    }

    .bottom-tab-btn span {
      display: inline-block !important;
      min-width: 0 !important;
      max-width: none !important;
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: nowrap !important;
      word-break: keep-all !important;
      line-height: 1.08 !important;
      padding-top: 1px !important;
    }

    /* HYUNWOO V7: OX peek/dock interaction moved to ox-player.css + ox-runtime.js. */


/* V14 extracted from app.css: qna item final layout */
/* Q&A: 날짜 chip을 질문 제목 옆이 아니라 상단 메타줄 우측에 안정적으로 배치 */
    body.feature-page-active [data-feature-panel="qna"] .qna-item {
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-areas:
        "meta foot"
        "question foot" !important;
      align-items: center !important;
      gap: 6px 12px !important;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-item-top {
      grid-area: meta !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 6px !important;
      min-width: 0 !important;
      width: 100% !important;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-question {
      grid-area: question !important;
      min-width: 0 !important;
      text-align: left !important;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-item-foot {
      grid-area: foot !important;
      align-self: stretch !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    body.feature-page-active [data-feature-panel="qna"] .qna-time {
      margin-left: auto !important;
      order: 99 !important;
      flex: 0 0 auto !important;
      transform: none !important;
    }

    @media (max-width: 520px) {
      body.feature-page-active [data-feature-panel="qna"] .qna-item {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
          "meta"
          "question"
          "foot" !important;
      }

      body.feature-page-active [data-feature-panel="qna"] .qna-item-foot {
        justify-content: flex-end !important;
      }
    }


/* V14 extracted from app.css: leaderboard streak smoke polish */
.leaderboard-best-streak[class*="streak-"] {
      position: relative !important;
      isolation: isolate !important;
      overflow: visible !important;
    }

    .leaderboard-best-streak[class*="streak-"] .leaderboard-score-smoke {
      display: block !important;
      position: absolute !important;
      inset: calc(-10px - var(--streak-extra, 0px)) calc(-14px - var(--streak-extra, 0px)) !important;
      z-index: 0 !important;
      border-radius: 999px !important;
      background:
        radial-gradient(circle at 26% 48%, rgba(var(--streak-rgb, 99,102,241), .28), transparent 34%),
        radial-gradient(circle at 70% 42%, rgba(var(--streak-rgb, 99,102,241), .20), transparent 38%),
        radial-gradient(circle at 48% 72%, rgba(var(--streak-rgb, 99,102,241), .16), transparent 42%) !important;
      filter: blur(9px) saturate(1.12) !important;
      opacity: .48 !important;
      pointer-events: none !important;
      transform-origin: 50% 50% !important;
      animation: streakInkDrift 18s linear infinite !important;
    }

    .leaderboard-best-streak[class*="streak-"] .leaderboard-score-smoke.secondary {
      inset: calc(-6px - var(--streak-extra, 0px)) calc(-10px - var(--streak-extra, 0px)) !important;
      opacity: .34 !important;
      animation-duration: 24s !important;
      animation-direction: reverse !important;
    }

    .leaderboard-best-streak[class*="streak-"] .leaderboard-score-label {
      position: relative !important;
      z-index: 2 !important;
    }

    .leaderboard-best-streak.streak-5 { --streak-rgb: 56, 189, 248; }
    .leaderboard-best-streak.streak-10 { --streak-rgb: 34, 197, 94; }
    .leaderboard-best-streak.streak-15 { --streak-rgb: 20, 184, 166; }
    .leaderboard-best-streak.streak-20 { --streak-rgb: 59, 130, 246; }
    .leaderboard-best-streak.streak-25 { --streak-rgb: 124, 58, 237; }
    .leaderboard-best-streak.streak-30 { --streak-rgb: 22, 163, 74; }
    .leaderboard-best-streak.streak-35 { --streak-rgb: 236, 72, 153; }
    .leaderboard-best-streak.streak-40 { --streak-rgb: 168, 85, 247; }

    .leaderboard-best-streak.streak-30 .leaderboard-score-smoke {
      background:
        radial-gradient(circle at 24% 50%, rgba(34,197,94,.24), transparent 34%),
        radial-gradient(circle at 56% 38%, rgba(34,197,94,.18), transparent 34%),
        radial-gradient(circle at 72% 60%, rgba(234,179,8,.18), transparent 30%),
        radial-gradient(circle at 44% 76%, rgba(250,204,21,.12), transparent 36%) !important;
    }

    .leaderboard-best-streak.streak-35 .leaderboard-score-smoke,
    .leaderboard-best-streak.streak-40 .leaderboard-score-smoke {
      background:
        radial-gradient(circle at 18% 45%, rgba(125,211,252,.24), transparent 34%),
        radial-gradient(circle at 38% 36%, rgba(196,181,253,.22), transparent 35%),
        radial-gradient(circle at 58% 62%, rgba(244,114,182,.20), transparent 34%),
        radial-gradient(circle at 76% 46%, rgba(167,243,208,.18), transparent 38%),
        radial-gradient(circle at 46% 78%, rgba(254,240,138,.14), transparent 40%) !important;
      filter: blur(10px) saturate(1.22) !important;
      opacity: .52 !important;
    }

/* HYUNWOO V21: home quick-launch 2x2 compact grid.
   The previous mobile override forced four shortcuts into a vertical stack.
   Keep them as a compact 2x2 block on every platform. */
html body #appRoot .quick-launch-grid[data-study-home],
html body #appRoot .quick-launch-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}

html body #appRoot .quick-launch-btn {
  min-height: 82px !important;
  height: auto !important;
  padding: 11px 12px !important;
  border-radius: 18px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "icon title"
    "icon sub" !important;
  justify-items: start !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  text-align: left !important;
}

html body #appRoot .quick-launch-icon {
  grid-area: icon !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
  font-size: 16px !important;
}

html body #appRoot .quick-launch-title {
  grid-area: title !important;
  width: 100% !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #appRoot .quick-launch-sub {
  grid-area: sub !important;
  width: 100% !important;
  font-size: 10px !important;
  line-height: 1.18 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (min-width: 901px) {
  html body #appRoot .quick-launch-grid[data-study-home],
  html body #appRoot .quick-launch-grid {
    max-width: 720px !important;
  }
}

@media (max-width: 390px) {
  html body #appRoot .quick-launch-btn {
    min-height: 76px !important;
    padding: 10px 10px !important;
    column-gap: 8px !important;
  }
  html body #appRoot .quick-launch-icon {
    width: 32px !important;
    height: 32px !important;
  }
  html body #appRoot .quick-launch-title { font-size: 12.5px !important; }
  html body #appRoot .quick-launch-sub { font-size: 9.5px !important; }
}

/* HYUNWOO V23: leaderboard best-streak ink smoke.
   Smoke is clipped inside the score/card background layer and never sits above text. */
.leaderboard-best-streak {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  min-height: 30px !important;
  --smoke-a: 139, 92, 246;
  --smoke-b: 59, 130, 246;
  --smoke-c: 20, 184, 166;
  --smoke-opacity: .18;
  --smoke-blur: 14px;
  --smoke-scale: 1;
  --smoke-extra: 0px;
  --smoke-wobble: 1;
}

.leaderboard-best-streak .leaderboard-score-label,
.leaderboard-best-streak strong,
.leaderboard-best-streak b {
  position: relative !important;
  z-index: 2 !important;
}

.leaderboard-best-streak .leaderboard-score-label {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

.leaderboard-best-streak strong {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

.leaderboard-score-smoke {
  position: absolute !important;
  inset: calc(-10px - var(--smoke-extra)) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: var(--smoke-opacity) !important;
  filter: blur(var(--smoke-blur)) saturate(1.15) !important;
  transform-origin: 50% 50% !important;
  border-radius: 42% 58% 49% 51% !important;
  background:
    radial-gradient(circle at 18% 35%, rgba(var(--smoke-a), .62), transparent 34%),
    radial-gradient(circle at 72% 25%, rgba(var(--smoke-b), .48), transparent 32%),
    radial-gradient(circle at 56% 78%, rgba(var(--smoke-c), .42), transparent 38%),
    radial-gradient(circle at 34% 68%, rgba(255, 255, 255, .25), transparent 26%) !important;
  animation: inkSmokeDrift calc(9s / var(--smoke-wobble)) linear infinite !important;
}

.leaderboard-score-smoke.secondary {
  inset: calc(-14px - var(--smoke-extra)) !important;
  opacity: calc(var(--smoke-opacity) * .72) !important;
  filter: blur(calc(var(--smoke-blur) + 5px)) saturate(1.22) !important;
  background:
    radial-gradient(circle at 68% 38%, rgba(var(--smoke-c), .52), transparent 36%),
    radial-gradient(circle at 30% 24%, rgba(var(--smoke-b), .38), transparent 34%),
    radial-gradient(circle at 44% 82%, rgba(var(--smoke-a), .36), transparent 42%) !important;
  animation:
    inkSmokeDriftReverse calc(13s / var(--smoke-wobble)) linear infinite,
    inkSmokeWaver calc(5.8s / var(--smoke-wobble)) ease-in-out infinite !important;
}

.leaderboard-best-streak.streak-5 {
  --smoke-a: 167, 139, 250;
  --smoke-b: 196, 181, 253;
  --smoke-c: 129, 140, 248;
  --smoke-opacity: .12;
  --smoke-scale: .96;
}
.leaderboard-best-streak.streak-10 {
  --smoke-a: 139, 92, 246;
  --smoke-b: 96, 165, 250;
  --smoke-c: 165, 180, 252;
  --smoke-opacity: .14;
  --smoke-scale: .98;
}
.leaderboard-best-streak.streak-15 {
  --smoke-a: 59, 130, 246;
  --smoke-b: 45, 212, 191;
  --smoke-c: 125, 211, 252;
  --smoke-opacity: .16;
  --smoke-scale: 1;
}
.leaderboard-best-streak.streak-20 {
  --smoke-a: 45, 212, 191;
  --smoke-b: 52, 211, 153;
  --smoke-c: 34, 197, 94;
  --smoke-opacity: .18;
  --smoke-scale: 1.03;
}
.leaderboard-best-streak.streak-25 {
  --smoke-a: 52, 211, 153;
  --smoke-b: 132, 204, 22;
  --smoke-c: 20, 184, 166;
  --smoke-opacity: .20;
  --smoke-scale: 1.06;
}
.leaderboard-best-streak.streak-30 {
  --smoke-a: 34, 197, 94;
  --smoke-b: 74, 222, 128;
  --smoke-c: 250, 204, 21;
  --smoke-opacity: .22;
  --smoke-scale: 1.09;
}
.leaderboard-best-streak.streak-35 {
  --smoke-a: 34, 197, 94;
  --smoke-b: 250, 204, 21;
  --smoke-c: 56, 189, 248;
  --smoke-opacity: .24;
  --smoke-scale: 1.12;
}
.leaderboard-best-streak.streak-40 {
  --smoke-a: 125, 211, 252;
  --smoke-b: 251, 207, 232;
  --smoke-c: 196, 181, 253;
  --smoke-opacity: .27;
  --smoke-scale: 1.15;
}

.leaderboard-best-streak.streak-40 .leaderboard-score-smoke {
  background:
    radial-gradient(circle at 16% 35%, rgba(125, 211, 252, .55), transparent 34%),
    radial-gradient(circle at 38% 24%, rgba(167, 243, 208, .50), transparent 32%),
    radial-gradient(circle at 64% 30%, rgba(251, 207, 232, .54), transparent 36%),
    radial-gradient(circle at 78% 72%, rgba(196, 181, 253, .52), transparent 38%),
    radial-gradient(circle at 34% 78%, rgba(254, 240, 138, .34), transparent 30%) !important;
}

.leaderboard-card.leaderboard-rank-smoke-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.leaderboard-card.leaderboard-rank-smoke-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .18 !important;
  filter: blur(18px) saturate(1.12) !important;
  background:
    radial-gradient(circle at 18% 28%, rgba(125, 211, 252, .46), transparent 32%),
    radial-gradient(circle at 70% 24%, rgba(196, 181, 253, .38), transparent 34%),
    radial-gradient(circle at 52% 84%, rgba(167, 243, 208, .28), transparent 38%) !important;
  animation: inkSmokeDrift 18s linear infinite !important;
}

.leaderboard-card.leaderboard-rank-smoke-card > * {
  position: relative !important;
  z-index: 2 !important;
}

/* HYUNWOO V23: leaderboard streak text smoke, matching exam streak text. */
.leaderboard-best-streak .streak-text {
  position: relative !important;
  z-index: 2 !important;
  color: #0f172a !important;
  font-weight: 850 !important;
}

.leaderboard-best-streak .streak-text::before {
  content: "" !important;
  position: absolute !important;
  inset: -6px -10px !important;
  z-index: -1 !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  filter: blur(10px) !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 20% 40%, rgba(var(--smoke-a), .34), transparent 38%),
    radial-gradient(circle at 75% 55%, rgba(var(--smoke-b), .28), transparent 42%) !important;
  animation: textSmokeWaver 8s linear infinite !important;
}

.leaderboard-best-streak.streak-5 .streak-text { color: #5b5f7a !important; }
.leaderboard-best-streak.streak-10 .streak-text { color: #4f46e5 !important; }
.leaderboard-best-streak.streak-15 .streak-text { color: #2563eb !important; }
.leaderboard-best-streak.streak-20 .streak-text { color: #0f766e !important; font-weight: 900 !important; }
.leaderboard-best-streak.streak-25 .streak-text { color: #15803d !important; font-weight: 920 !important; }
.leaderboard-best-streak.streak-30 .streak-text { color: #166534 !important; font-weight: 930 !important; }
.leaderboard-best-streak.streak-35 .streak-text { color: #0f766e !important; font-weight: 940 !important; }
.leaderboard-best-streak.streak-40 .streak-text {
  color: transparent !important;
  font-weight: 950 !important;
  background: linear-gradient(105deg, #7dd3fc, #a7f3d0, #fbcfe8, #c4b5fd, #fde68a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.leaderboard-best-streak.streak-20 .streak-text::before,
.leaderboard-best-streak.streak-25 .streak-text::before,
.leaderboard-best-streak.streak-30 .streak-text::before,
.leaderboard-best-streak.streak-35 .streak-text::before,
.leaderboard-best-streak.streak-40 .streak-text::before {
  opacity: .55 !important;
}


/* HYUNWOO V25: apply the same smoke/text animation to current-streak badges in leaderboard. */
.leaderboard-current-streak {
  background: rgba(255, 255, 255, .54) !important;
  border: 1px solid rgba(226, 232, 240, .78) !important;
}

.leaderboard-current-streak .leaderboard-score-label {
  color: #64748b !important;
}

/* HYUNWOO V26 ALIGNMENT POLISH
   - Pure layout/alignment pass only.
   - No Supabase/state/cycle behavior changes.
   - Tightens vertical centering, row rhythm, and button text alignment across tabs. */
html body #appRoot *,
html body .name-gate * {
  box-sizing: border-box;
}

html body #appRoot .topbar,
html body #appRoot .user-area,
html body #appRoot .brand,
html body #appRoot .daily-title-row,
html body #appRoot .section-head,
html body #appRoot .mini-card-actions,
html body #appRoot .gate-actions,
html body #appRoot .today-task-card,
html body #appRoot .bottom-tabbar,
html body #appRoot .feature-topbar,
html body #appRoot .leaderboard-card,
html body #appRoot .leaderboard-score,
html body #appRoot .leaderboard-meta,
html body #appRoot .leaderboard-filter-row,
html body #appRoot .qna-card-head,
html body #appRoot .passage-card-head {
  align-items: center !important;
}

html body #appRoot button,
html body #appRoot .soft-btn,
html body #appRoot .logout-btn,
html body #appRoot .settings-btn,
html body #appRoot .user-pill,
html body #appRoot .feature-back-btn,
html body #appRoot .feature-filter-btn,
html body #appRoot .today-task-btn,
html body #appRoot .bottom-tab-btn,
html body .name-gate button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.1 !important;
  vertical-align: middle !important;
}

html body #appRoot .user-pill,
html body #appRoot .logout-btn,
html body #appRoot .settings-btn {
  height: 38px !important;
  min-height: 38px !important;
}

html body #appRoot .settings-btn svg,
html body #appRoot .bottom-tab-btn svg,
html body #appRoot .feature-back-btn svg,
html body #appRoot .feature-filter-btn svg {
  display: block !important;
  flex: 0 0 auto !important;
  transform: none !important;
  transform-origin: center !important;
}

html body #appRoot .bottom-tabbar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
}

html body #appRoot .bottom-tab-btn {
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 8px !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

html body #appRoot .bottom-tab-btn span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  transform: translateY(.5px) !important;
}

html body #appRoot .quick-launch-grid[data-study-home],
html body #appRoot .quick-launch-grid {
  align-items: stretch !important;
}

html body #appRoot .quick-launch-btn {
  align-content: center !important;
  justify-content: start !important;
  place-items: center start !important;
}

html body #appRoot .quick-launch-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  justify-self: center !important;
  line-height: 1 !important;
}

html body #appRoot .quick-launch-title,
html body #appRoot .quick-launch-sub {
  align-self: end !important;
  display: block !important;
  min-width: 0 !important;
}

html body #appRoot .quick-launch-sub {
  align-self: start !important;
}

html body #appRoot .leaderboard-card {
  display: flex !important;
  gap: 12px !important;
}

html body #appRoot .leaderboard-card-content {
  min-width: 0 !important;
}

html body #appRoot .leaderboard-person,
html body #appRoot .leaderboard-score-label,
html body #appRoot .leaderboard-best-streak strong,
html body #appRoot .leaderboard-best-streak b {
  line-height: 1 !important;
}

html body #appRoot .leaderboard-best-streak,
html body #appRoot .leaderboard-current-streak {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  min-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body #appRoot .leaderboard-score {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  line-height: 1 !important;
}

html body #appRoot .leaderboard-score > span:not(.leaderboard-best-streak) {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  line-height: 1 !important;
}

html body #appRoot .toast,
html body #appRoot .toast.show {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

@media (max-width: 720px) {
  html body #appRoot .topbar {
    align-items: flex-start !important;
  }

  html body #appRoot .user-area {
    align-items: center !important;
    justify-content: flex-end !important;
  }

  html body #appRoot .bottom-tabbar {
    height: 64px !important;
    min-height: 64px !important;
    padding: 7px 8px !important;
  }

  html body #appRoot .bottom-tab-btn {
    height: 48px !important;
    padding: 0 6px !important;
  }

  html body #appRoot .leaderboard-card {
    align-items: flex-start !important;
  }
}

/* HYUNWOO V27 LEADERBOARD CONTRAST POLISH
   40+ streak keeps pastel smoke/text, but gets enough edge contrast to remain readable. */
html body #appRoot .leaderboard-best-streak.streak-40 .streak-text,
html body #appRoot .leaderboard-current-streak.streak-40 .streak-text {
  filter:
    drop-shadow(0 1px 0 rgba(15, 23, 42, .18))
    drop-shadow(0 0 8px rgba(15, 23, 42, .10)) !important;
}

html body #appRoot .leaderboard-best-streak.streak-40 strong.streak-text,
html body #appRoot .leaderboard-current-streak.streak-40 strong.streak-text {
  filter:
    drop-shadow(0 1px 0 rgba(15, 23, 42, .25))
    drop-shadow(0 0 10px rgba(15, 23, 42, .12)) !important;
}

html body #appRoot .leaderboard-best-streak.streak-40 .leaderboard-score-label.streak-text,
html body #appRoot .leaderboard-current-streak.streak-40 .leaderboard-score-label.streak-text {
  filter:
    drop-shadow(0 1px 0 rgba(15, 23, 42, .16))
    drop-shadow(0 0 6px rgba(15, 23, 42, .08)) !important;
}

html body #appRoot .leaderboard-best-streak[class*="streak-"] strong.streak-text,
html body #appRoot .leaderboard-current-streak[class*="streak-"] strong.streak-text {
  letter-spacing: -.02em !important;
}

/* HYUNWOO V28 SHORTCUT / RECORD / HEADER POLISH
   - Fixes shortcut feature pages, record tab safe spacing, and mobile header banner scale.
   - CSS-only polish pass. No Supabase/state/cycle behavior changes. */
@media (max-width: 720px) {
  html body #appRoot .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px 12px !important;
    padding: 2px 2px 8px !important;
    margin: 0 0 14px !important;
  }

  html body #appRoot .brand {
    min-width: 0 !important;
    gap: 2px !important;
  }

  html body #appRoot .brand h1 {
    font-size: clamp(21px, 5.4vw, 24px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
  }

  html body #appRoot .brand span,
  html body #appRoot .brand p {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    color: #64748b !important;
    font-weight: 800 !important;
    margin: 3px 0 0 !important;
    white-space: nowrap !important;
  }

  html body #appRoot .user-area {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    margin-top: 6px !important;
  }

  html body #appRoot .user-pill,
  html body #appRoot .logout-btn,
  html body #appRoot .settings-btn {
    height: 34px !important;
    min-height: 34px !important;
  }

  html body #appRoot .user-pill,
  html body #appRoot .logout-btn {
    padding-inline: 12px !important;
    font-size: 12px !important;
  }

  html body #appRoot .settings-btn {
    width: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
    border-radius: 13px !important;
  }

  html body #appRoot .settings-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  html body.study-home-active #appRoot .home-daily-label,
  html body.study-home-active #appRoot .section-label:first-of-type {
    margin-top: 16px !important;
  }
}

/* V28: feature nav should be visible and compact when a quick-launch page is open. */
html body.feature-page-active #appRoot .study-feature-nav:not(.hidden) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 8px 0 12px !important;
  padding: 10px !important;
  border: 1px solid rgba(226, 232, 240, .92) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05) !important;
}

html body.feature-page-active #appRoot .study-feature-title {
  min-width: 0 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.feature-page-active #appRoot .feature-switcher {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body.feature-page-active #appRoot .feature-switch-btn {
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 8px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

html body.feature-page-active #appRoot .study-home-btn {
  min-width: 78px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

/* V28: review cards/pills should not float over the copy on mobile. */
html body.feature-page-active #appRoot [data-feature-panel="review"] .review-mode-grid,
html body.feature-page-active #appRoot .review-mode-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

html body.feature-page-active #appRoot [data-feature-panel="review"] .review-mission-stats,
html body.feature-page-active #appRoot .review-mission-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
  align-items: stretch !important;
}

html body.feature-page-active #appRoot [data-feature-panel="review"] .review-mission-stats > div,
html body.feature-page-active #appRoot .review-mission-stats > div {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 10px 8px !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
}

html body.feature-page-active #appRoot [data-feature-panel="review"] .review-mission-stats span,
html body.feature-page-active #appRoot .review-mission-stats span {
  font-size: 10.5px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

html body.feature-page-active #appRoot [data-feature-panel="review"] .review-mission-stats strong,
html body.feature-page-active #appRoot .review-mission-stats strong {
  font-size: 18px !important;
  line-height: 1 !important;
}

html body.feature-page-active #appRoot [data-feature-panel="review"] .review-mode-card,
html body.feature-page-active #appRoot .review-mode-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "title action"
    "copy action" !important;
  align-items: center !important;
  gap: 5px 12px !important;
  min-height: 96px !important;
  padding: 18px 18px !important;
  text-align: left !important;
}

html body.feature-page-active #appRoot [data-feature-panel="review"] .review-mode-title,
html body.feature-page-active #appRoot .review-mode-title {
  grid-area: title !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

html body.feature-page-active #appRoot [data-feature-panel="review"] .review-count-pill,
html body.feature-page-active #appRoot .review-count-pill {
  position: static !important;
  grid-area: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  min-width: 30px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

html body.feature-page-active #appRoot [data-feature-panel="review"] .review-mode-copy,
html body.feature-page-active #appRoot .review-mode-copy {
  grid-area: copy !important;
  margin: 0 !important;
  max-width: 100% !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
}

html body.feature-page-active #appRoot [data-feature-panel="review"] .review-mode-action,
html body.feature-page-active #appRoot .review-mode-action {
  grid-area: action !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: 82px !important;
  height: 42px !important;
  padding: 0 13px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* V28: passage card mobile layout. Thinker/count must not collide with excerpt. */
html body.feature-page-active #appRoot [data-feature-panel="passage"] .passage-library-grid,
html body.feature-page-active #appRoot .passage-library-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .passage-library-card,
html body.feature-page-active #appRoot .passage-library-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 9px !important;
  min-height: 96px !important;
  padding: 17px 18px !important;
  text-align: left !important;
  align-items: start !important;
  justify-content: stretch !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .passage-library-card::before,
html body.feature-page-active #appRoot .passage-library-card::before {
  margin-bottom: 2px !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .passage-card-head,
html body.feature-page-active #appRoot .passage-card-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .passage-thinker,
html body.feature-page-active #appRoot .passage-thinker {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 64% !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .passage-library-meta,
html body.feature-page-active #appRoot .passage-library-meta {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .passage-excerpt,
html body.feature-page-active #appRoot .passage-excerpt {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.42 !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
}

/* V28: Q&A mobile rows need true 3-line structure, not compressed inline collision. */
html body.feature-page-active #appRoot [data-feature-panel="qna"] .qna-item,
html body.feature-page-active #appRoot .qna-item {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "meta"
    "question"
    "foot" !important;
  gap: 8px !important;
  min-height: 88px !important;
  padding: 14px 15px !important;
  align-items: start !important;
  text-align: left !important;
}

html body.feature-page-active #appRoot [data-feature-panel="qna"] .qna-item-top,
html body.feature-page-active #appRoot .qna-item-top {
  grid-area: meta !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
}

html body.feature-page-active #appRoot [data-feature-panel="qna"] .qna-question,
html body.feature-page-active #appRoot .qna-question {
  grid-area: question !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.feature-page-active #appRoot [data-feature-panel="qna"] .qna-item-foot,
html body.feature-page-active #appRoot .qna-item-foot {
  grid-area: foot !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #64748b !important;
}

html body.feature-page-active #appRoot [data-feature-panel="qna"] .qna-status,
html body.feature-page-active #appRoot [data-feature-panel="qna"] .qna-mine-badge,
html body.feature-page-active #appRoot [data-feature-panel="qna"] .qna-time,
html body.feature-page-active #appRoot .qna-status,
html body.feature-page-active #appRoot .qna-mine-badge,
html body.feature-page-active #appRoot .qna-time {
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Record tab: reserve one bottom-tabbar clearance only. */
html body.profile-tab-active {
  padding-bottom: 0 !important;
}

html body.profile-tab-active #appRoot,
html body.profile-tab-active .app {
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.profile-tab-active #appRoot .profile-tab-card:last-of-type,
html body.profile-tab-active #appRoot .profile-recent-card {
  margin-bottom: 0 !important;
}

html body.profile-tab-active #appRoot > .footer {
  display: none !important;
}

/* HYUNWOO V28.1: undo legacy hidden visibility on feature nav and keep mobile header left-aligned. */
html body.feature-page-active #appRoot .topbar,
html body.study-home-active #appRoot .topbar,
html body.profile-tab-active #appRoot .topbar,
html body.hall-tab-active #appRoot .topbar {
  text-align: left !important;
}

html body #appRoot .brand {
  align-items: flex-start !important;
  justify-self: start !important;
  text-align: left !important;
}

html body #appRoot .brand h1,
html body #appRoot .brand span,
html body #appRoot .brand p {
  text-align: left !important;
}

html body.feature-page-active #appRoot .study-feature-nav,
html body.feature-page-active #appRoot .study-feature-nav * {
  visibility: visible !important;
  opacity: 1 !important;
}

html body.feature-page-active #appRoot .study-feature-nav.hidden {
  display: none !important;
  visibility: hidden !important;
}

html body.feature-page-active #appRoot .study-feature-nav .study-home-btn,
html body.feature-page-active #appRoot .study-feature-nav .study-feature-title,
html body.feature-page-active #appRoot .study-feature-nav .feature-switch-btn {
  color: #0f172a !important;
  text-indent: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 720px) {
  html body.feature-page-active #appRoot .study-feature-nav:not(.hidden) {
    margin-top: 6px !important;
    margin-bottom: 12px !important;
  }
}

/* HYUNWOO V29 GENERAL POLISH
   - Desktop quick-launch returns to a balanced 4-card row.
   - Leaderboard smoke/text variables now mirror the exam streak orb instead of collapsing into one blue tone. */
@media (min-width: 901px) {
  html body #appRoot .quick-launch-grid[data-study-home],
  html body #appRoot .quick-launch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: none !important;
    gap: 12px !important;
  }

  html body #appRoot .quick-launch-btn {
    min-height: 112px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    padding: 18px 16px !important;
  }

  html body #appRoot .quick-launch-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
  }

  html body #appRoot .quick-launch-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  html body #appRoot .quick-launch-title {
    font-size: 15px !important;
  }

  html body #appRoot .quick-launch-sub {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
}

html body #appRoot .leaderboard-best-streak,
html body #appRoot .leaderboard-current-streak {
  overflow: hidden !important;
  --smoke-a: 139, 92, 246;
  --smoke-b: 59, 130, 246;
  --smoke-c: 20, 184, 166;
  --smoke-opacity: .18;
  --smoke-blur: 14px;
  --smoke-scale: 1;
  --smoke-extra: 0px;
  --smoke-wobble: 1;
}

html body #appRoot .leaderboard-best-streak .leaderboard-score-smoke,
html body #appRoot .leaderboard-current-streak .leaderboard-score-smoke {
  background:
    radial-gradient(circle at 18% 35%, rgba(var(--smoke-a), .62), transparent 34%),
    radial-gradient(circle at 72% 25%, rgba(var(--smoke-b), .48), transparent 32%),
    radial-gradient(circle at 56% 78%, rgba(var(--smoke-c), .42), transparent 38%),
    radial-gradient(circle at 34% 68%, rgba(255, 255, 255, .25), transparent 26%) !important;
  opacity: var(--smoke-opacity) !important;
  filter: blur(var(--smoke-blur)) saturate(1.15) !important;
  animation: inkSmokeDrift calc(9s / var(--smoke-wobble)) linear infinite !important;
}

html body #appRoot .leaderboard-best-streak .leaderboard-score-smoke.secondary,
html body #appRoot .leaderboard-current-streak .leaderboard-score-smoke.secondary {
  background:
    radial-gradient(circle at 68% 38%, rgba(var(--smoke-c), .52), transparent 36%),
    radial-gradient(circle at 30% 24%, rgba(var(--smoke-b), .38), transparent 34%),
    radial-gradient(circle at 44% 82%, rgba(var(--smoke-a), .36), transparent 42%) !important;
  opacity: calc(var(--smoke-opacity) * .72) !important;
  filter: blur(calc(var(--smoke-blur) + 5px)) saturate(1.22) !important;
  animation:
    inkSmokeDriftReverse calc(13s / var(--smoke-wobble)) linear infinite,
    inkSmokeWaver calc(5.8s / var(--smoke-wobble)) ease-in-out infinite !important;
}

html body #appRoot .leaderboard-best-streak.streak-5,
html body #appRoot .leaderboard-current-streak.streak-5 {
  --smoke-a: 167, 139, 250;
  --smoke-b: 196, 181, 253;
  --smoke-c: 129, 140, 248;
  --smoke-opacity: .12;
  --smoke-scale: .96;
}
html body #appRoot .leaderboard-best-streak.streak-10,
html body #appRoot .leaderboard-current-streak.streak-10 {
  --smoke-a: 139, 92, 246;
  --smoke-b: 96, 165, 250;
  --smoke-c: 165, 180, 252;
  --smoke-opacity: .14;
  --smoke-scale: .98;
}
html body #appRoot .leaderboard-best-streak.streak-15,
html body #appRoot .leaderboard-current-streak.streak-15 {
  --smoke-a: 59, 130, 246;
  --smoke-b: 45, 212, 191;
  --smoke-c: 125, 211, 252;
  --smoke-opacity: .16;
  --smoke-scale: 1;
}
html body #appRoot .leaderboard-best-streak.streak-20,
html body #appRoot .leaderboard-current-streak.streak-20 {
  --smoke-a: 45, 212, 191;
  --smoke-b: 52, 211, 153;
  --smoke-c: 34, 197, 94;
  --smoke-opacity: .18;
  --smoke-scale: 1.03;
}
html body #appRoot .leaderboard-best-streak.streak-25,
html body #appRoot .leaderboard-current-streak.streak-25 {
  --smoke-a: 52, 211, 153;
  --smoke-b: 132, 204, 22;
  --smoke-c: 20, 184, 166;
  --smoke-opacity: .20;
  --smoke-scale: 1.06;
}
html body #appRoot .leaderboard-best-streak.streak-30,
html body #appRoot .leaderboard-current-streak.streak-30 {
  --smoke-a: 34, 197, 94;
  --smoke-b: 74, 222, 128;
  --smoke-c: 250, 204, 21;
  --smoke-opacity: .22;
  --smoke-scale: 1.09;
}
html body #appRoot .leaderboard-best-streak.streak-35,
html body #appRoot .leaderboard-current-streak.streak-35 {
  --smoke-a: 34, 197, 94;
  --smoke-b: 250, 204, 21;
  --smoke-c: 56, 189, 248;
  --smoke-opacity: .24;
  --smoke-scale: 1.12;
}
html body #appRoot .leaderboard-best-streak.streak-40,
html body #appRoot .leaderboard-current-streak.streak-40 {
  --smoke-a: 125, 211, 252;
  --smoke-b: 251, 207, 232;
  --smoke-c: 196, 181, 253;
  --smoke-opacity: .27;
  --smoke-scale: 1.15;
}

html body #appRoot .leaderboard-best-streak.streak-40 .leaderboard-score-smoke,
html body #appRoot .leaderboard-current-streak.streak-40 .leaderboard-score-smoke {
  background:
    radial-gradient(circle at 16% 35%, rgba(125, 211, 252, .55), transparent 34%),
    radial-gradient(circle at 38% 24%, rgba(167, 243, 208, .50), transparent 32%),
    radial-gradient(circle at 64% 30%, rgba(251, 207, 232, .54), transparent 36%),
    radial-gradient(circle at 78% 72%, rgba(196, 181, 253, .52), transparent 38%),
    radial-gradient(circle at 34% 78%, rgba(254, 240, 138, .34), transparent 30%) !important;
}

html body #appRoot .leaderboard-current-streak .streak-text {
  position: relative !important;
  z-index: 2 !important;
  color: #0f172a !important;
  font-weight: 850 !important;
}

html body #appRoot .leaderboard-current-streak .streak-text::before {
  content: "" !important;
  position: absolute !important;
  inset: -6px -10px !important;
  z-index: -1 !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  filter: blur(10px) !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 20% 40%, rgba(var(--smoke-a), .34), transparent 38%),
    radial-gradient(circle at 75% 55%, rgba(var(--smoke-b), .28), transparent 42%) !important;
  animation: textSmokeWaver 8s linear infinite !important;
}

html body #appRoot .leaderboard-current-streak.streak-5 .streak-text { color: #5b5f7a !important; }
html body #appRoot .leaderboard-current-streak.streak-10 .streak-text { color: #4f46e5 !important; }
html body #appRoot .leaderboard-current-streak.streak-15 .streak-text { color: #2563eb !important; }
html body #appRoot .leaderboard-current-streak.streak-20 .streak-text { color: #0f766e !important; font-weight: 900 !important; }
html body #appRoot .leaderboard-current-streak.streak-25 .streak-text { color: #15803d !important; font-weight: 920 !important; }
html body #appRoot .leaderboard-current-streak.streak-30 .streak-text { color: #166534 !important; font-weight: 930 !important; }
html body #appRoot .leaderboard-current-streak.streak-35 .streak-text { color: #0f766e !important; font-weight: 940 !important; }
html body #appRoot .leaderboard-current-streak.streak-40 .streak-text {
  color: transparent !important;
  font-weight: 950 !important;
  background: linear-gradient(105deg, #7dd3fc, #a7f3d0, #fbcfe8, #c4b5fd, #fde68a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
html body #appRoot .leaderboard-current-streak.streak-20 .streak-text::before,
html body #appRoot .leaderboard-current-streak.streak-25 .streak-text::before,
html body #appRoot .leaderboard-current-streak.streak-30 .streak-text::before,
html body #appRoot .leaderboard-current-streak.streak-35 .streak-text::before,
html body #appRoot .leaderboard-current-streak.streak-40 .streak-text::before {
  opacity: .55 !important;
}

/* HYUNWOO V29.3: align Hall score badges and smoke with the exam streak orb layer. */
html body #appRoot .leaderboard-daily-correct,
html body #appRoot .leaderboard-best-streak,
html body #appRoot .leaderboard-current-streak {
  display: inline-grid !important;
  grid-template-columns: minmax(48px, max-content) max-content !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 6px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

html body #appRoot .leaderboard-daily-correct {
  background: rgba(248, 250, 252, .86) !important;
  border: 1px solid rgba(226, 232, 240, .94) !important;
  box-shadow: none !important;
}

html body #appRoot .leaderboard-daily-correct .leaderboard-score-label,
html body #appRoot .leaderboard-daily-correct strong {
  position: relative !important;
  z-index: 2 !important;
}

html body #appRoot .leaderboard-daily-correct .leaderboard-score-label {
  justify-self: start !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  color: #475569 !important;
}

html body #appRoot .leaderboard-daily-correct strong {
  justify-self: end !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: -.02em !important;
  color: #0f172a !important;
}

html body #appRoot .leaderboard-best-streak .leaderboard-score-label,
html body #appRoot .leaderboard-current-streak .leaderboard-score-label {
  justify-self: start !important;
  text-align: left !important;
}

html body #appRoot .leaderboard-best-streak strong,
html body #appRoot .leaderboard-current-streak strong,
html body #appRoot .leaderboard-best-streak b,
html body #appRoot .leaderboard-current-streak b {
  justify-self: end !important;
  text-align: right !important;
}

html body #appRoot .leaderboard-best-streak[class*="streak-"] .leaderboard-score-smoke,
html body #appRoot .leaderboard-current-streak[class*="streak-"] .leaderboard-score-smoke {
  inset: calc(-10px - var(--smoke-extra)) !important;
  z-index: 0 !important;
  opacity: var(--smoke-opacity) !important;
  filter: blur(var(--smoke-blur)) saturate(1.15) !important;
  border-radius: 42% 58% 49% 51% !important;
  background:
    radial-gradient(circle at 18% 35%, rgba(var(--smoke-a), .62), transparent 34%),
    radial-gradient(circle at 72% 25%, rgba(var(--smoke-b), .48), transparent 32%),
    radial-gradient(circle at 56% 78%, rgba(var(--smoke-c), .42), transparent 38%),
    radial-gradient(circle at 34% 68%, rgba(255, 255, 255, .25), transparent 26%) !important;
  animation: inkSmokeDrift calc(9s / var(--smoke-wobble)) linear infinite !important;
}

html body #appRoot .leaderboard-best-streak[class*="streak-"] .leaderboard-score-smoke.secondary,
html body #appRoot .leaderboard-current-streak[class*="streak-"] .leaderboard-score-smoke.secondary {
  inset: calc(-14px - var(--smoke-extra)) !important;
  opacity: calc(var(--smoke-opacity) * .72) !important;
  filter: blur(calc(var(--smoke-blur) + 5px)) saturate(1.22) !important;
  background:
    radial-gradient(circle at 68% 38%, rgba(var(--smoke-c), .52), transparent 36%),
    radial-gradient(circle at 30% 24%, rgba(var(--smoke-b), .38), transparent 34%),
    radial-gradient(circle at 44% 82%, rgba(var(--smoke-a), .36), transparent 42%) !important;
  animation:
    inkSmokeDriftReverse calc(13s / var(--smoke-wobble)) linear infinite,
    inkSmokeWaver calc(5.8s / var(--smoke-wobble)) ease-in-out infinite !important;
}


/* HYUNWOO V30 MOBILE REVIEW + RECORD GAP FIX
   - Force today's review feature page to use mobile proportions even when legacy rules win.
   - Remove the accidental top air above the first record/stat card. */
@media (max-width: 720px) {
  html body #appRoot [data-feature-panel="review"]:not(.hidden) .card-inner {
    padding: 16px !important;
  }

  html body #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #appRoot [data-feature-panel="review"]:not(.hidden) .review-mission-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body #appRoot [data-feature-panel="review"]:not(.hidden) .review-mission-stats > div {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 10px 11px !important;
    border-radius: 15px !important;
  }

  html body #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "copy"
      "action" !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 15px !important;
    border-radius: 18px !important;
  }

  html body #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-title {
    grid-area: title !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  html body #appRoot [data-feature-panel="review"]:not(.hidden) .review-count-pill {
    position: static !important;
    transform: none !important;
    height: 23px !important;
    min-width: 28px !important;
    padding: 0 8px !important;
    margin: 0 !important;
  }

  html body #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-copy {
    grid-area: copy !important;
    font-size: 12.5px !important;
    line-height: 1.42 !important;
    max-width: 100% !important;
  }

  html body #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-action {
    grid-area: action !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    margin-top: 2px !important;
  }
}

html body.profile-tab-active #appRoot .topbar {
  margin-bottom: 10px !important;
}

html body.profile-tab-active #appRoot .profile-tab-card.home-archive-card,
html body.profile-tab-active #appRoot .profile-tab-card:first-of-type {
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  html body.profile-tab-active #appRoot .topbar {
    margin-bottom: 8px !important;
    padding-bottom: 4px !important;
  }

  html body.profile-tab-active #appRoot .profile-tab-card.home-archive-card,
  html body.profile-tab-active #appRoot .profile-tab-card:first-of-type {
    margin-top: 0 !important;
  }

  html body.profile-tab-active #appRoot .profile-tab-card.home-archive-card .card-inner {
    padding-top: 18px !important;
  }
}


/* HYUNWOO V30.2 MOBILE REVIEW + PROFILE GAP HARD LOCK
   - Hard-stop legacy desktop/nowrap review rows on mobile.
   - Profile tab should not reserve invisible study-home space above stats. */
@media (max-width: 720px) {
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden),
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .card-inner,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-grid,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-board,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-list,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .section-head,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .section-title,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .section-desc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mission-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mission-stats > div,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "copy"
      "action" !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 15px !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-title,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-copy,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-action {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
    text-align: left !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-title {
    grid-area: title !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-copy {
    grid-area: copy !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-mode-action {
    grid-area: action !important;
    justify-self: stretch !important;
    display: inline-flex !important;
    justify-content: center !important;
    text-align: center !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-board {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 4px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-head strong,
  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-head span {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "meta"
      "question" !important;
    gap: 7px !important;
    padding: 11px 12px !important;
    align-items: start !important;
    text-align: left !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-meta {
    grid-area: meta !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-meta span {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  html body.feature-page-active #appRoot [data-feature-panel="review"]:not(.hidden) .review-preview-question {
    grid-area: question !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: keep-all !important;
    line-height: 1.45 !important;
  }
}

/* Profile tab hard reset: hidden study blocks must not reserve vertical air. */
html body.profile-tab-active #appRoot [data-study-home],
html body.profile-tab-active #appRoot [data-feature-panel],
html body.profile-tab-active #appRoot .study-feature-nav,
html body.profile-tab-active #appRoot .dashboard-grid[data-study-home],
html body.profile-tab-active #appRoot .today-task-card,
html body.profile-tab-active #appRoot .study-storage-card,
html body.profile-tab-active #appRoot .study-hero-card,
html body.profile-tab-active #appRoot .home-daily-label,
html body.profile-tab-active #appRoot .home-shortcut-label,
html body.profile-tab-active #appRoot .home-storage-label,
html body.profile-tab-active #appRoot .quick-launch-grid {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.profile-tab-active #appRoot {
  gap: 10px !important;
  align-content: start !important;
}

html body.profile-tab-active #appRoot .topbar {
  order: 0 !important;
  margin-bottom: 8px !important;
}

html body.profile-tab-active #appRoot .profile-tab-card.home-archive-card {
  order: 1 !important;
  display: block !important;
  margin-top: 0 !important;
}

html body.profile-tab-active #appRoot .profile-tab-card.profile-recent-card {
  order: 2 !important;
  display: block !important;
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  html body.profile-tab-active #appRoot {
    padding-top: 0 !important;
  }

  html body.profile-tab-active #appRoot .profile-tab-card.home-archive-card {
    margin-top: 0 !important;
  }
}


/* HYUNWOO V31 COPY TRIM */
html body #appRoot .feature-command-copy,
html body #appRoot .settings-head p,
html body #appRoot .settings-row div > span,
html body #appRoot .quick-launch-sub:empty,
html body #appRoot .section-label > span:empty {
  display: none !important;
}

/* HYUNWOO V31 HEADER COMPACT
   Keep account controls in the banner's top-right corner instead of a second row. */
html body #appRoot .topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 8px 12px !important;
}

html body #appRoot .brand {
  grid-column: 1 !important;
  min-width: 0 !important;
}

html body #appRoot .user-area {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  margin-top: 0 !important;
}

html body #appRoot .user-pill {
  max-width: 128px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.exam-tab-active #appRoot .topbar,
html body.dedicated-ox-player #appRoot .topbar,
html body.ox-player-active #appRoot .topbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  html body #appRoot .topbar {
    padding: 0 2px 6px !important;
    margin-bottom: 10px !important;
    gap: 6px 8px !important;
  }

  html body #appRoot .brand h1 {
    font-size: clamp(20px, 5.1vw, 23px) !important;
  }

  html body #appRoot .brand span,
  html body #appRoot .brand p {
    font-size: 10.5px !important;
    margin-top: 2px !important;
  }

  html body #appRoot .user-area {
    gap: 5px !important;
  }

  html body #appRoot .user-pill,
  html body #appRoot .logout-btn,
  html body #appRoot .settings-btn {
    height: 30px !important;
    min-height: 30px !important;
  }

  html body #appRoot .user-pill,
  html body #appRoot .logout-btn {
    padding-inline: 8px !important;
    font-size: 11px !important;
  }

  html body #appRoot .user-pill {
    max-width: 74px !important;
  }

  html body #appRoot .settings-btn {
    width: 30px !important;
    min-width: 30px !important;
    flex-basis: 30px !important;
    border-radius: 11px !important;
  }

  html body #appRoot .settings-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* HYUNWOO V31.5 UI HIERARCHY + SVG LINE ICONS
   Layout/icon polish only. No Supabase/state/cycle behavior changes.
   Quick-launch now uses inline SVG line icons, matching the bottom tabbar visual language. */
:root {
  --hy-icon-stroke: #0f172a;
  --hy-icon-soft: rgba(15, 23, 42, .08);
  --hy-icon-line: rgba(15, 23, 42, .72);
  --hy-ui-card-border: rgba(226, 232, 240, .92);
}

html body #appRoot .daily-icon,
html body #appRoot .mini-icon,
html body #appRoot .quick-launch-icon,
html body #appRoot .title-icon {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 14px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.84)) !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html body #appRoot .daily-icon::before,
html body #appRoot .daily-icon::after,
html body #appRoot .mini-icon::before,
html body #appRoot .mini-icon::after,
html body #appRoot .quick-launch-icon::before,
html body #appRoot .quick-launch-icon::after,
html body #appRoot .title-icon::before,
html body #appRoot .title-icon::after {
  content: "" !important;
  position: absolute !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

/* OX mark: left circle + right cross, centered on a 34px grid. */
html body #appRoot .daily-icon::before {
  left: 7px !important;
  top: 10px !important;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid var(--hy-icon-stroke) !important;
  border-radius: 999px !important;
}
html body #appRoot .daily-icon::after {
  right: 7px !important;
  top: 9px !important;
  width: 12px !important;
  height: 12px !important;
  background:
    linear-gradient(45deg, transparent 42%, var(--hy-icon-stroke) 44% 56%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--hy-icon-stroke) 44% 56%, transparent 58%) !important;
}

/* Evaluation check icon. */
html body #appRoot .mini-icon::before {
  left: 9px !important;
  top: 8px !important;
  width: 16px !important;
  height: 18px !important;
  border-radius: 8px !important;
  border: 2px solid rgba(15,23,42,.74) !important;
}
html body #appRoot .mini-icon::after {
  left: 12px !important;
  top: 16px !important;
  width: 11px !important;
  height: 6px !important;
  border-left: 3px solid #2563eb !important;
  border-bottom: 3px solid #2563eb !important;
  transform: rotate(-45deg) !important;
  border-radius: 1px !important;
}

/* Quick launch icons: inline SVG line icons matching the bottom tabbar style.
   No glyphs/pseudo-shape icons here; keep the visual language thin and symmetric. */
html body #appRoot .quick-launch-icon {
  color: #64748b !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: rgba(248, 250, 252, .82) !important;
  border: 1px solid rgba(226, 232, 240, .96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html body #appRoot .quick-launch-icon::before,
html body #appRoot .quick-launch-icon::after {
  display: none !important;
}
html body #appRoot .quick-launch-icon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.05 !important;
  vector-effect: non-scaling-stroke !important;
  overflow: visible !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
  transform: none !important;
}
html body #appRoot .quick-launch-btn:hover .quick-launch-icon,
html body #appRoot .quick-launch-btn:focus-visible .quick-launch-icon {
  color: #0f172a !important;
  background: rgba(241,245,249,.94) !important;
  border-color: rgba(203,213,225,.96) !important;
}

/* Title icons: neutral line icons instead of noisy glyphs. */
html body #appRoot .title-icon::before {
  left: 9px !important;
  top: 9px !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--hy-icon-stroke) !important;
  border-radius: 8px !important;
}
html body #appRoot .title-icon::after {
  left: 15px !important;
  top: 15px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--hy-icon-stroke) !important;
}


/* HYUNWOO V31.8: Hall title icon uses the exact same trophy geometry as the bottom tabbar. */
html body #appRoot .title-icon.hall-title-icon {
  color: #64748b !important;
}
html body #appRoot .title-icon.hall-title-icon::before,
html body #appRoot .title-icon.hall-title-icon::after {
  display: none !important;
}
html body #appRoot .title-icon.hall-title-icon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.05 !important;
  vector-effect: non-scaling-stroke !important;
  overflow: visible !important;
  transform: none !important;
}



/* HYUNWOO V31.9: Today's OX uses concept 1, a compact single-color OX wordmark.
   Also force the review shortcut to be a pure clock with no pseudo-element residue. */
html body #appRoot .daily-icon.daily-icon-ox-text {
  color: inherit !important;
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.88)) !important;
  border-color: rgba(226,232,240,.96) !important;
}
html body #appRoot .daily-icon.daily-icon-ox-text::before,
html body #appRoot .daily-icon.daily-icon-ox-text::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body #appRoot .daily-icon.daily-icon-ox-text {
  color: #0f172a !important;
}
html body #appRoot .daily-icon.daily-icon-ox-text svg {
  display: block !important;
  width: 24px !important;
  height: 18px !important;
  overflow: visible !important;
  transform: none !important;
}
html body #appRoot .daily-icon.daily-icon-ox-text svg text {
  fill: currentColor !important;
}
html body #appRoot .quick-launch-icon.icon-review.icon-clock-only::before,
html body #appRoot .quick-launch-icon.icon-review.icon-clock-only::after,
html body #appRoot .quick-launch-btn[data-feature-target="review"] .quick-launch-icon::before,
html body #appRoot .quick-launch-btn[data-feature-target="review"] .quick-launch-icon::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body #appRoot .quick-launch-icon.icon-review.icon-clock-only svg {
  transform: none !important;
}
html body #appRoot .quick-launch-icon.icon-review.icon-clock-only svg * {
  fill: none !important;
  stroke: currentColor !important;
}
html body #appRoot .quick-launch-icon.icon-review.icon-clock-only svg path,
html body #appRoot .quick-launch-icon.icon-review.icon-clock-only svg circle {
  opacity: 1 !important;
}

/* Home hierarchy: primary tasks first, secondary shortcuts quieter. */
html body.study-home-active #appRoot .today-task-card {
  gap: 10px !important;
  margin-bottom: 12px !important;
}
html body.study-home-active #appRoot .today-task-btn {
  min-height: 72px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(203,213,225,.94) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.055) !important;
}
html body.study-home-active #appRoot .today-task-btn strong {
  font-size: 16px !important;
  letter-spacing: -.035em !important;
}
html body.study-home-active #appRoot .today-task-btn span {
  display: none !important;
}
html body.study-home-active #appRoot .quick-launch-grid {
  width: 100% !important;
  max-width: none !important;
  gap: 12px !important;
}
@media (min-width: 901px) {
  html body.study-home-active #appRoot .quick-launch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) {
  html body.study-home-active #appRoot .quick-launch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
html body.study-home-active #appRoot .quick-launch-btn {
  min-height: 68px !important;
  padding: 9px 10px !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: none !important;
}
html body.study-home-active #appRoot .quick-launch-sub {
  display: none !important;
}

/* Record tab: one big number, then tighter secondary cards. */
html body.profile-tab-active #appRoot .stats-grid {
  gap: 10px !important;
}
html body.profile-tab-active #appRoot .stat-card {
  min-height: 86px !important;
  padding: 13px !important;
}
html body.profile-tab-active #appRoot .stat-card:first-child {
  grid-column: 1 / -1 !important;
  min-height: 106px !important;
}

/* Admin mode must read as a different mode, not a student screen. */
body.admin-index-mode::before {
  content: "관리자 모드" !important;
  position: fixed !important;
  left: 50% !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  transform: translateX(-50%) !important;
  z-index: 240000 !important;
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
  color: #6d28d9 !important;
  background: rgba(250,245,255,.96) !important;
  border: 1px solid rgba(196,181,253,.95) !important;
  box-shadow: 0 12px 28px rgba(88,28,135,.14) !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  html body #appRoot .daily-icon,
  html body #appRoot .mini-icon,
  html body #appRoot .quick-launch-icon,
  html body #appRoot .title-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 13px !important;
  }
  html body.study-home-active #appRoot .today-task-btn {
    min-height: 64px !important;
  }
  html body.profile-tab-active #appRoot .stat-card {
    min-height: 78px !important;
    padding: 12px !important;
  }
  html body.profile-tab-active #appRoot .stat-card:first-child {
    min-height: 96px !important;
  }
}

/* HYUNWOO V31.6 MOBILE FRAME OVERFLOW GUARD
   Mobile-only frame correction. Keeps desktop/icon design untouched. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  html body #appRoot,
  html body #appRoot.app,
  html body .app {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: clip !important;
  }

  html body #appRoot .topbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    column-gap: 8px !important;
  }

  html body #appRoot .brand {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #appRoot .brand h1 {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(23px, 7vw, 29px) !important;
    line-height: 1.18 !important;
  }

  html body #appRoot .brand span {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
  }

  html body #appRoot .user-area {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 172px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }

  html body #appRoot .user-pill {
    max-width: 54px !important;
    padding-inline: 9px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body #appRoot .settings-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border-radius: 12px !important;
  }

  html body #appRoot .logout-btn {
    min-width: 68px !important;
    padding-inline: 10px !important;
  }

  html body #appRoot .card,
  html body #appRoot .mini-card,
  html body #appRoot .today-task-card,
  html body #appRoot .today-task-btn,
  html body #appRoot .storage-hub,
  html body #appRoot .storage-hub-grid,
  html body #appRoot .storage-hub-item,
  html body #appRoot .quick-launch-grid,
  html body #appRoot .quick-launch-btn {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.study-home-active #appRoot .today-task-btn {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  html body #appRoot .today-task-btn .circle-progress,
  html body #appRoot .circle-progress {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    --ring: 6px !important;
  }

  html body #appRoot .storage-hub-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  html body #appRoot .storage-hub-item .soft-btn {
    min-width: 58px !important;
    padding-inline: 12px !important;
  }

  html body #appRoot .bottom-tabbar {
    left: 50% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  html body #appRoot .bottom-tab-btn {
    min-width: 0 !important;
    padding-inline: 4px !important;
    font-size: 11px !important;
    gap: 3px !important;
  }
}

/* HYUNWOO V31.6B MOBILE TOPBAR BREATHING ROOM */
@media (max-width: 720px) {
  html body #appRoot .user-pill {
    display: none !important;
  }
  html body #appRoot .user-area {
    max-width: 116px !important;
  }
  html body #appRoot .brand h1 {
    font-size: clamp(25px, 7.4vw, 30px) !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* HYUNWOO V31.13 FEATURE FILTER MOBILE REVIEW FIX
   Shortcut feature pages: search and filter chips should not share one cramped row on mobile. */
@media (max-width: 720px) {
  html body.feature-page-active #appRoot .feature-toolbelt {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  html body.feature-page-active #appRoot .feature-toolbelt .feature-search {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.feature-page-active #appRoot .feature-toolbelt .feature-filter-row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 2px 3px !important;
    scrollbar-width: none !important;
  }

  html body.feature-page-active #appRoot .feature-toolbelt .feature-filter-row::-webkit-scrollbar {
    display: none !important;
  }

  html body.feature-page-active #appRoot .feature-toolbelt .feature-filter-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* Passage tab: search and thinker chips share one spacing owner. */
html body.feature-page-active #appRoot [data-feature-panel="passage"] .card-inner {
  gap: 8px !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .feature-toolbelt {
  margin-bottom: 0 !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .feature-filter-row {
  display: none !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .passage-panel {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body.feature-page-active #appRoot [data-feature-panel="passage"] .passage-chip-row {
  margin: 0 0 8px !important;
  padding: 0 2px 2px !important;
}


/* HYUNWOO V31.16 HOME COPY RESTORE
   바로가기 카드와 학습 보관함 왼쪽에 직접 적어둔 멘트를 다시 보이게 한다. */
html body.study-home-active #appRoot .quick-launch-btn {
  min-height: 68px !important;
  grid-template-columns: 36px minmax(0,1fr) !important;
  align-items: center !important;
  column-gap: 9px !important;
  row-gap: 2px !important;
}

html body.study-home-active #appRoot .quick-launch-title,
html body.study-home-active #appRoot .quick-launch-sub {
  grid-column: 2 !important;
  text-align: left !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body.study-home-active #appRoot .quick-launch-sub {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  margin-top: 2px !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #64748b !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

html body.study-home-active #appRoot .storage-hub-title,
html body.study-home-active #appRoot .storage-hub-stat {
  text-align: left !important;
}

html body.study-home-active #appRoot .storage-hub-title span:last-child {
  display: inline !important;
  margin-left: 6px !important;
  opacity: .55 !important;
}

/* HYUNWOO V31.60: distinct record-tab title icons.
   Visual-only. Keep the existing title-icon container size and current UI spacing. */
html body #appRoot .title-icon.profile-stats-title-icon,
html body #appRoot .title-icon.profile-recent-title-icon {
  color: #64748b !important;
}

html body #appRoot .title-icon.profile-stats-title-icon::before,
html body #appRoot .title-icon.profile-stats-title-icon::after,
html body #appRoot .title-icon.profile-recent-title-icon::before,
html body #appRoot .title-icon.profile-recent-title-icon::after {
  display: none !important;
}

html body #appRoot .title-icon.profile-stats-title-icon svg,
html body #appRoot .title-icon.profile-recent-title-icon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.05 !important;
  vector-effect: non-scaling-stroke !important;
  overflow: visible !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
  transform: none !important;
}

/* V31.71 icon primitives: SVG geometry owns visual centering, while every
   icon-only control keeps one shared layout axis across fonts and devices. */
html body .ui-close-icon,
html body .ui-remove-icon,
html body .topic-favorite-svg {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: center !important;
  pointer-events: none !important;
}

html body .ui-close-icon {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.35 !important;
}

html body .ui-remove-icon {
  width: 13px !important;
  height: 13px !important;
  stroke-width: 2.5 !important;
}

html body .topic-favorite-svg {
  width: 18px !important;
  height: 18px !important;
}

html body #appRoot .topic-favorite-btn.active .topic-favorite-svg {
  filter: drop-shadow(0 3px 5px rgba(245, 158, 11, .24)) !important;
}

html body .settings-close-btn,
html body .report-close-btn,
html body #appRoot .bookmark-simple-delete,
html body #appRoot .bookmark-folder-remove,
html body #appRoot .topic-favorite-btn {
  display: inline-grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  text-align: center !important;
}

html body #appRoot .bookmark-folder-remove {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
}

html body.feature-page-active #appRoot [data-feature-panel="topic"] .topic-course-top {
  padding-right: 36px !important;
}

html body.feature-page-active #appRoot [data-feature-panel="topic"] .topic-favorite-btn {
  top: 50% !important;
  right: 82px !important;
  width: 32px !important;
  height: 32px !important;
  transform: translateY(-50%) !important;
}

html body.feature-page-active #appRoot [data-feature-panel="topic"] .topic-favorite-btn:hover {
  transform: translateY(-50%) scale(1.08) !important;
}

html body.feature-page-active #appRoot [data-feature-panel="topic"] .topic-favorite-btn:active {
  transform: translateY(-50%) scale(.92) !important;
}