/* =========================================================================
   1. 設計權杖（CSS Variables）
   ========================================================================= */
:root {
  --nb-yellow: #F5C842;      /* 主色：蜜蜂黃 */
  --nb-yellow-dark: #E0B12E; /* 蜜蜂黃深階（hover） */
  --nb-blue: #4A90D9;        /* ⚠️ 舊輔色：天藍 —— 已停用 ✗（用戶要求統一黃色 ✓）*/
  --nb-blue-dark: #3A78BA;   /* ⚠️ 同上，已停用 ✗ */
  --nb-bg: #FFFDF5;          /* 背景：淡黃 */
  --nb-white: #FFFFFF;       /* 卡片白 */
  --nb-green: #4CAF50;       /* 正確綠 */
  --nb-red: #E74C3C;         /* 錯誤紅 */
  --nb-text: #2C3E50;        /* 文字主色 */
  --nb-text-soft: #7F8C8D;   /* 文字輔色 */
  --nb-line: #EDE6D6;        /* 邊線 */
  --nb-shadow: 0 4px 16px rgba(44, 62, 80, 0.08);
  --nb-shadow-lg: 0 10px 30px rgba(44, 62, 80, 0.12);
  --nb-radius: 18px;
  --nb-radius-sm: 12px;
  --nb-nav-h: 66px;          /* 手機底部導航高度 */
  --nb-rail-w: 240px;        /* 電腦側邊導航寬度 */
}

/* =========================================================================
   2. 基礎重設（Reset）
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans TC', 'Jost', system-ui, -apple-system, sans-serif;
  background: var(--nb-bg);
  color: var(--nb-text);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0 0 12px; line-height: 1.3; font-weight: 700; }
p { margin: 0 0 12px; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 16px; }
/* 英文與數字使用 Jost */
.nb-num, .nb-en { font-family: 'Jost', 'Noto Sans TC', sans-serif; }

/* 「X Honey」數值：主題黃（深階，白底可讀）＋粗體 */
.nb-balance__num {
  font-family: 'Jost', 'Noto Sans TC', sans-serif;
  color: var(--nb-yellow-dark);
  font-weight: 700;
}
[hidden] { display: none !important; }

/* =========================================================================
   3. 通用元件（BEM）
   ========================================================================= */
.nb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  font-size: 16px; font-weight: 700; line-height: 1;
  background: var(--nb-line); color: var(--nb-text);
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
  min-height: 46px;
}
/* ⭐ 3D 按鈕統一：所有 variant 都有 box-shadow，顏色由 --btn-shadow 控制
   （box-shadow 唔影響排版 → 換上陰影後行高、彈窗高度全部不變 ✓）*/
.nb-btn {
  --btn-shadow: var(--nb-line);
  box-shadow: 0 4px 0 var(--btn-shadow);
}
.nb-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-shadow); }
.nb-btn:disabled,
.nb-btn--off { box-shadow: none; transform: none; }
.nb-btn:disabled { opacity: .5; cursor: not-allowed; }
.nb-btn--primary { --btn-shadow: var(--nb-yellow-dark); background: var(--nb-yellow); color: #4A3B00; }
.nb-btn--primary:hover:not(:disabled) { background: var(--nb-yellow-dark); }
/* ⚠️ 沿用 class 名但改黃色 ✓（字改深色以免黃底睇唔清 ✗✓）*/
.nb-btn--blue { --btn-shadow: var(--nb-yellow-dark); background: var(--nb-yellow); color: #4A3B00; }
/* 商店「換上」按鈕：綠色（配合已購買嘅綠框）*/
.nb-btn--green { --btn-shadow: #43A047; background: var(--nb-green); color: #fff; }
.nb-btn--green:hover:not(:disabled) { background: #43A047; }
.nb-btn--blue:hover:not(:disabled) { background: var(--nb-yellow-dark); }
.nb-btn--ghost { --btn-shadow: var(--nb-line); background: transparent; border: 2px solid var(--nb-line); }
.nb-btn--ghost:hover:not(:disabled) { border-color: var(--nb-yellow); color: var(--nb-yellow-dark); }
.nb-btn--danger { --btn-shadow: #EFC4BE; background: #FDECEA; color: var(--nb-red); }
.nb-btn--block { width: 100%; }
.nb-btn--off { opacity: .5; box-shadow: none; }
.nb-btn--sm { padding: 8px 14px; font-size: 14px; min-height: 36px; }

.nb-card {
  background: var(--nb-white); border-radius: var(--nb-radius);
  padding: 20px; box-shadow: var(--nb-shadow); margin-bottom: 16px;
}
.nb-card__title { font-size: 20px; font-weight: 700; color: var(--nb-text); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.nb-card__hint { font-size: 14px; color: var(--nb-text-soft); margin: 0; }

.nb-field { margin-bottom: 14px; }
.nb-field__label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--nb-text); }
.nb-field__input {
  width: 100%; padding: 12px 14px; border: 2px solid var(--nb-line);
  border-radius: var(--nb-radius-sm); background: #FFFEFB; color: var(--nb-text);
  transition: border-color .2s ease; font-size: 16px;
}
/* 注意：必須用 background-color（不可用 background 簡寫），
   否則會將 select 嘅自製箭嘴 background-image 重設為 none */
.nb-field__input:focus { outline: none; border-color: var(--nb-yellow); background-color: #fff; }

/* select：關閉瀏覽器原生箭嘴，改用自製 chevron，令箭嘴與右邊框保持 15px 距離 */
/* 筆記 Badge（年級｜科目 ✓）*/
.nb-notebadges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nb-notebadge {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 4px 10px; border-radius: 999px;
  background: #FFF8E1; color: #8A6D00; border: 1px solid var(--nb-yellow);
}

/* textarea：重用 .nb-field__input，加可拖高 + 行高 */
.nb-textarea {
  resize: vertical;
  min-height: 220px;
  line-height: 1.7;
  white-space: pre-wrap;
  font-family: inherit;
  /* ⭐ v2.7.0 修正：單獨用 .nb-textarea（冇配 .nb-field__input）時會跌返瀏覽器預設 ~20 字元寬 ✗
     → 一定要自己聲明全寬 + box-sizing ✓ */
  width: 100%;
  box-sizing: border-box;
  display: block;
}

select.nb-field__input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232C3E50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px 16px;
}
/* 年級選擇用按鈕（修改年級彈窗），與練習頁科目卡同樣式 */
.nb-grade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.nb-grade-grid .nb-subject { font-size: 16px; font-weight: 700; padding: 14px 6px; }
.nb-field__note { font-size: 13px; color: var(--nb-text-soft); margin-top: 6px; }
.nb-readonly {
  padding: 12px 14px; border: 2px dashed var(--nb-line); border-radius: var(--nb-radius-sm);
  background: #FBF9F3; color: var(--nb-text-soft); font-weight: 700; font-size: 16px;
}

.nb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 500;
  background: #fff; border: 2px solid var(--nb-line); color: var(--nb-text-soft);
  transition: all .18s ease;
}
.nb-chip--on { background: var(--nb-yellow); border-color: var(--nb-yellow); color: #4A3B00; font-weight: 700; }
.nb-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.nb-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nb-muted { color: var(--nb-text-soft); font-size: 14px; }
.nb-center { text-align: center; }
.nb-spacer { flex: 1; }
.nb-hidden { display: none !important; }

/* 提示訊息（Toast） */
.nb-toast {
  position: fixed; left: 50%; bottom: calc(var(--nb-nav-h) + 18px);
  transform: translateX(-50%) translateY(20px);
  width: max-content; max-width: min(520px, calc(100vw - 32px));
  background: var(--nb-text); color: #fff; padding: 13px 20px; border-radius: 16px;
  font-size: 15px; font-weight: 500; z-index: 9999; opacity: 0; pointer-events: none;
  transition: all .25s ease; text-align: center; box-shadow: var(--nb-shadow-lg);
  line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
}
/* 持續顯示（唔會自動關閉），要靠右邊嘅關閉按鈕收起 */
.nb-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.nb-toast--ok { background: var(--nb-green); }
.nb-toast--err { background: var(--nb-red); }
.nb-toast__msg { flex: 1 1 auto; min-width: 0; white-space: pre-line; }
/* 關閉按鈕：只喺「持續顯示」（sticky）嘅提示出現；
   自動隱藏嘅提示唔需要，因為佢會自己消失。 */
.nb-toast__close {
  position: relative;
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px;
  display: none;                              /* 預設隱藏 */
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 50%;
  cursor: pointer; padding: 0; transition: background .18s ease, transform .18s ease;
}
.nb-toast--sticky .nb-toast__close { display: inline-flex; }
/* 有 × 時右邊留白縮窄：20 | 文字 | 10(gap) | 24(×) | 12 → 視覺左右平衡 */
.nb-toast--sticky { padding-right: 12px; }
/* 偽元素擴大觸控範圍至約 44×44（流動裝置建議下限），視覺尺寸保持 24px */
.nb-toast__close::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
.nb-toast__close:hover { background: rgba(255,255,255,.34); transform: scale(1.08); }
.nb-toast__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =========================================================================
   4. 登入頁
   ========================================================================= */
.nb-auth {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 28px 20px 40px;
}
.nb-auth__brand { text-align: center; margin-bottom: 8px; }
.nb-auth__bee { display: block; width: 132px; height: 132px; object-fit: contain; margin: 0 auto 6px; }
.nb-auth__logo { font-size: 34px; font-weight: 700; letter-spacing: -.5px; }
.nb-auth__logo em { font-style: normal; color: var(--nb-yellow); }
.nb-auth__tagline { font-family: 'Jost', sans-serif; font-weight: 600; color: var(--nb-text-soft); letter-spacing: 1px; font-size: 15px; }
.nb-auth__box { width: 100%; max-width: 420px; margin-top: 18px; }
.nb-auth__tabs { display: flex; background: var(--nb-line); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.nb-auth__tab { flex: 1; padding: 10px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--nb-text-soft); transition: all .2s ease; }
.nb-auth__tab--on { background: #fff; color: var(--nb-text); box-shadow: var(--nb-shadow); }
.nb-auth__declaration {
  font-size: 13px; color: var(--nb-text-soft); background: #FFF9E6;
  border-left: 3px solid var(--nb-yellow); padding: 10px 12px; border-radius: 8px; margin-top: 4px;
}
.nb-auth__guest { margin-top: 20px; }

/* =========================================================================
   5. 主框架（側邊 / 底部導航）
   ========================================================================= */
.nb-app { min-height: 100vh; }
.nb-main { padding: 20px 16px calc(var(--nb-nav-h) + 28px); }
.nb-page__head { margin-bottom: 18px; }
.nb-page__title { font-size: 26px; margin-bottom: 4px; }
.nb-page__sub { color: var(--nb-text-soft); font-size: 15px; margin: 0; }

.nb-nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--nb-nav-h);
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--nb-line); display: flex; z-index: 500;
  padding-bottom: env(safe-area-inset-bottom);
}
.nb-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 11px; font-weight: 500; color: var(--nb-text-soft); transition: color .18s ease;
}
.nb-nav__item svg { width: 23px; height: 23px; }
.nb-nav__item--on { color: var(--nb-yellow-dark); font-weight: 700; }
.nb-nav__item:active { transform: scale(.94); }

/* ⭐ 手機版 Nav：跟 demo/spelling-bee.html 樣式 ✓（用戶指定 ✓）
   ✗ 唔做浮起 ✗ → 貼底 ✓ border: 0 ✓ 上面兩角 26px ✓ 下面兩角 0 ✓
   ⚠️ 必須排喺 base rule【之後】✗ 否則被覆蓋 ✗
   ⚠️ 唔可以用 --nb-card ✗（未定義 ✗）要用實色 #FFFFFF ✓ */
@media (max-width: 767px) {
  :root { --nb-nav-h: 72px; }
  .nb-nav {
    left: 0; right: 0; bottom: 0; height: auto;
    background: #FFFFFF;
    border: 0;
    border-radius: 26px 26px 0px 0px;
    box-shadow: 0 -6px 22px rgba(44, 62, 80, .12);
    gap: 4px;
    padding: 10px
             calc(10px + env(safe-area-inset-right))
             calc(10px + env(safe-area-inset-bottom))
             calc(10px + env(safe-area-inset-left));
  }
  .nb-nav__item {
    flex: 1; gap: 5px; padding: 10px 4px 8px; border-radius: 20px;
    font-size: 12px; font-weight: 700; color: #5B6470;
    transition: background .18s ease, color .18s ease;
  }
  .nb-nav__item svg { width: 24px; height: 24px; color: #5B6470; }
  /* ⭐ 選中：黃底圓角塊 ✓（跟 demo ✓） */
  .nb-nav__item--on { background: var(--nb-yellow); color: #2C3E50; }
  .nb-nav__item--on svg { color: #2C3E50; }
  .nb-nav__item:active { transform: none; }
  .nb-main { padding-bottom: calc(var(--nb-nav-h) + 34px); }
}

@media (min-width: 768px) {
  .nb-nav { top: 0; right: auto; height: auto; width: 76px; flex-direction: column;
            border-top: none; border-right: 1px solid var(--nb-line); padding: 18px 0; gap: 6px; }
  .nb-nav__item { flex: 0 0 auto; width: 60px; height: 62px; }
  .nb-main { margin-left: 76px; padding: 26px 24px 40px; }
  .nb-toast { bottom: 24px; }
  /* ⚠️ Toast 一律置中（用戶指定 ✗ 唔要補償側邊欄 ✗）*/
}
/* 電腦：完整側邊欄 */
@media (min-width: 1025px) {
  .nb-nav { width: var(--nb-rail-w); align-items: stretch; padding: 24px 16px; }
  .nb-nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; margin-bottom: 22px; padding-left: 8px; }
  .nb-nav__item { flex-direction: row; justify-content: flex-start; gap: 12px; width: 100%;
                  height: 48px; font-size: 15px; padding-left: 16px; border-radius: 12px; }
  .nb-nav__item--on { background: #FFF8E1; }
  .nb-main { margin-left: var(--nb-rail-w); padding: 34px 40px 60px; }
  /* ⚠️ Toast 一律置中（用戶指定 ✗ 唔要補償側邊欄 ✗）*/
}
.nb-nav__logo { display: block; height: 34px; width: auto; }
.nb-nav__brand { display: none; }
@media (min-width: 1025px) { .nb-nav__brand { display: flex; } }

/* =========================================================================
   6. 練習分頁
   ========================================================================= */
/* ⭐ 科目卡：方格型式 ✓（手機 2 科 / 電腦 3 科 ✓）*/
.nb-subjects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);       /* ⭐ 手機每行 2 科 ✓ */
  gap: 10px; padding: 4px 0 12px;
}
@media (min-width: 620px) {
  .nb-subjects { grid-template-columns: repeat(3, 1fr); gap: 12px; }   /* ⭐ 電腦每行 3 科 ✓ */
}

.nb-subject {
  position: relative;
  background: #fff; border: 2px solid var(--nb-line);
  border-radius: var(--nb-radius);
  padding: 18px 14px; min-height: 88px; min-width: 0;
  text-align: left; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  transition: border-color .18s ease, background .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.nb-subject__name { font-size: 18px; font-weight: 700; display: block; }
.nb-subject__meta { display: block; font-size: 11px; line-height: 1.3; color: var(--nb-text-soft); margin-top: 2px; }

/* ⭐ 右下角科目圖示（淺黃 ✓）*/
.nb-subject__ico {
  position: absolute;
  width: 75px; height: 75px;         /* ⭐ 用戶指定 ✓ */
  right: -16px; bottom: -10px;       /* ⭐ 溢出右下角 ✓（由 overflow:hidden 裁 ✓）*/
  color: #FFF2CD;                    /* ⭐ 用戶指定 ✓ */
  opacity: 1; pointer-events: none;
  transition: color .18s ease, transform .18s ease;
}
.nb-subject__ico svg { width: 100%; height: 100%; display: block; }

/* ⚠️ 平時【冇】選中效果 ✗ —— 只有 mouse hover 才顯示 ✓（用戶指定 ✓）*/
@media (hover: hover) {
  .nb-subject:hover {
    border-color: var(--nb-yellow);
    background: #FFFBF0;
    box-shadow: var(--nb-shadow);
    transform: translateY(-2px);
  }
  .nb-subject:hover .nb-subject__ico { color: #FFE9A6; transform: scale(1.04); }
}
.nb-subject:active { transform: translateY(0); }
.nb-subject:focus-visible { outline: 3px solid var(--nb-yellow-dark); outline-offset: 2px; }

/* ⭐ 已選中（⚠️ 只在 Popup 開住時套用 ✓）*/
.nb-subject--on { border-color: var(--nb-yellow); background: #FFFBF0; box-shadow: var(--nb-shadow); }
.nb-subject--on .nb-subject__ico { color: #FFE9A6; }

.nb-subject--off { opacity: .5; }

@media (min-width: 620px) {
  .nb-subject { padding: 22px 16px; min-height: 104px; }
  .nb-subject__name { font-size: 20px; }
  .nb-subject__meta { font-size: 12px; }
  /* ⚠️ 圖示固定 75px ✗（用戶指定 ✓）唔加大 ✓ */
}

.nb-modes { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .nb-modes { grid-template-columns: 1fr 1fr 1fr; gap: 12px; } }
.nb-mode {
  background: #fff; border: 2px solid var(--nb-line); border-radius: var(--nb-radius);
  padding: 16px; text-align: left; transition: all .2s ease; display: flex; gap: 12px;
}
.nb-mode--on { border-color: var(--nb-yellow); background: #FFF9E6; box-shadow: var(--nb-shadow); }
.nb-mode--off { opacity: .5; cursor: not-allowed; }
.nb-mode__icon { flex: 0 0 42px; height: 42px; border-radius: 12px; background: #FFF8E1; display: flex; align-items: center; justify-content: center; }
.nb-mode__icon svg { width: 22px; height: 22px; }
.nb-mode__name { font-size: 16px; font-weight: 700; }
.nb-mode__desc { font-size: 13px; color: var(--nb-text-soft); line-height: 1.45; }

/* =========================================================================
   7. 測驗畫面（全螢幕覆蓋）
   ========================================================================= */
.nb-quiz { position: fixed; inset: 0; background: var(--nb-bg); z-index: 800; overflow-y: auto; }
.nb-quiz__inner { max-width: 1000px; margin: 0 auto; padding: 16px 16px 40px; min-height: 100vh; display: flex; flex-direction: column; }
.nb-quiz__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nb-quiz__close { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--nb-shadow); flex: 0 0 38px; }
.nb-quiz__count { font-weight: 700; font-family: 'Jost', sans-serif; }
.nb-quiz__score { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 700; font-family: 'Jost', sans-serif; }
.nb-quiz__bar { height: 8px; background: var(--nb-line); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.nb-quiz__bar-fill { height: 100%; width: 0; background: var(--nb-yellow); border-radius: 999px; transition: width .3s ease; }
.nb-quiz__bar-fill--time { background: var(--nb-yellow-dark); /* ⚠️ 深黃 ✓ 同普通 bar 區分 ✓ */ }

.nb-question { background: #fff; border-radius: var(--nb-radius); padding: 22px; box-shadow: var(--nb-shadow); margin-bottom: 16px; }
.nb-question__tag { display: inline-block; font-size: 12px; font-weight: 700; background: #FFF8E1; color: #8A6D00; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.nb-question__text { font-size: 25px; font-weight: 500; line-height: 1.55; margin: 0; }

.nb-options { display: flex; flex-direction: column; gap: 10px; }
.nb-option {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 2px solid var(--nb-line); border-radius: var(--nb-radius-sm);
  padding: 14px 16px; font-size: 16px; transition: all .18s ease;
}
.nb-option:active { transform: scale(.985); }
.nb-option__key {
  flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--nb-line);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Jost', sans-serif; font-weight: 700; font-size: 18px;
}
.nb-option__text { font-size: 20px; line-height: 1.5; }
.nb-option--ok { border-color: var(--nb-green); background: #EDF9EE; }
.nb-option--ok .nb-option__key { background: var(--nb-green); color: #fff; }
.nb-option--no { border-color: var(--nb-red); background: #FDECEA; }
.nb-option--no .nb-option__key { background: var(--nb-red); color: #fff; }
.nb-option--dim { opacity: .55; }

.nb-feedback { margin-top: 14px; padding: 14px 16px; border-radius: var(--nb-radius-sm); font-size: 15px; }
.nb-feedback--ok { background: #EDF9EE; border-left: 4px solid var(--nb-green); }
.nb-feedback--no { background: #FDECEA; border-left: 4px solid var(--nb-red); }
.nb-feedback__head { font-weight: 700; margin-bottom: 4px; }
.nb-feedback__body { color: var(--nb-text); line-height: 1.6; }

/* 結算畫面 */
.nb-result { background: #fff; border-radius: var(--nb-radius); padding: 26px 22px; box-shadow: var(--nb-shadow); text-align: center; }
.nb-result__bee { display: block; width: 118px; height: 118px; object-fit: contain; margin: 0 auto 10px; }
/* ⭐ 完成頁蜜蜂：統一用 bounceIn ✓（唔用 rotate ✗）*/
.nb-result__bee--bounce { animation: nbBounceIn .85s cubic-bezier(.28,.84,.42,1) both; }
@keyframes nbBounceIn {
  0%   { opacity: 0; transform: scale(.3) translateY(22px); }
  45%  { opacity: 1; transform: scale(1.12) translateY(-10px); }
  70%  { transform: scale(.95) translateY(3px); }
  88%  { transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.nb-result__stats { display: flex; justify-content: center; gap: 17px; margin: 18px 0; flex-wrap: wrap; }
.nb-result__stat { text-align: center; }
.nb-result__num { font-family: 'Jost', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.1; }
.nb-result__label { font-size: 12.5px; color: var(--nb-text-soft); }
/* ⚠️ 超窄機安全網（≤340px：iPhone SE 1 代 / iPhone 5 等 ✗）
   → 26px/gap17 需要 255px ✗ 但 320px 機只有 244px ✗ 會逼秒數落第二行 ✗
   ⚠️ media query 必須排喺 base rule 之後 ✗ */
@media (max-width: 340px) {
  .nb-result__stats { gap: 13px; }
  .nb-result__num { font-size: 23px; }
  .nb-result__label { font-size: 11.5px; }
}

/* =========================================================================
   8. 我的 / 統計
   ========================================================================= */
.nb-hive-hero { background: linear-gradient(160deg, #FFF8E1, #FFFFFF); border-radius: var(--nb-radius); padding: 24px 20px; box-shadow: var(--nb-shadow); text-align: center; margin-bottom: 16px; }
/* 蜜蜂舞台（裝飾對位用）：所有裝飾以 % 相對此方框定位 */
:root { --nb-bee-size: 148px; }

/* 外層預留框：150% 蜜蜂尺寸 —— 背景飾品（w:150）會剛好填滿，
   唔會溢出蓋住下面嘅等級文字 */
.nb-bee-wrap {
  width: calc(var(--nb-bee-size) * 1.5);
  height: calc(var(--nb-bee-size) * 1.5);
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
}

/* 蜜蜂框：所有裝飾嘅 x/y/w 都以此為基準（%），唔可以改尺寸 */
.nb-bee-stage { position: relative; width: var(--nb-bee-size); height: var(--nb-bee-size); }
.nb-bee-stage__bee { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; z-index: 5; }
/* 蜜蜂 + 穿戴裝飾放喺同一浮動群組，一齊上下移動；背景／特殊留在地面 */
.nb-bee-stage__float { position: absolute; inset: 0; z-index: 5; }
.nb-decor { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.nb-decor--background { z-index: 1; }
.nb-decor--special    { z-index: 2; }
.nb-decor--glasses    { z-index: 6; }
.nb-decor--emotion    { z-index: 7; }
.nb-decor--prop       { z-index: 8; }
.nb-hive-balance {
  font-size: 18px; color: var(--nb-text-soft); margin-top: 6px;
  /* ⭐ flex + align-items:center ✓ 圖標同文字精準垂直置中 ✓ */
  display: flex; align-items: center; justify-content: center; gap: 0px;
}

/* 裝飾商店 */
/* 提高優先次序，避免被 .nb-modal__card 嘅 max-width: 420px 蓋過 */
.nb-modal__card.nb-shop {
  width: 100%; max-width: 600px; overflow-y: auto;
  /* ⭐ 固定高度 = 剛好見到「3 行 + 半行」（第 4 行露一半，暗示可向下滾）。
     計算（實測每行 195.5px、行距 10px、head+tabs+padding = 158px）：
       格網可視 = 3.5 × (195.5 + 10) − 10 = 709.25
       + head/tabs 158 + grid margin-top 20 + padding 22 = 200
       ─────────────────────────────────────────────────────────
       總計                                             = 909.25 → 微調實測後 875px
       （實測校正：867px 只得 3.46 行 → +8px = 875px 得 3.50 行）
     用 height（唔係 min-height）→ 分類有幾件都唔會改變彈窗高度 ✓
     max-height 只係細螢幕保護。大分類靠內部滾動。 */
  height: 875px;
  max-height: calc(100vh - 32px);
  /* ⚠️ 本身唔滾動 —— 交俾內層 .nb-shop__scroll，
     令關閉按鈕（absolute 相對本卡片）永遠固定右上角 ✓ */
  padding: 0;
  overflow: hidden;
}

/* ⭐ 真正嘅滾動容器（head/tabs 嘅 sticky 亦以此為基準）*/
.nb-shop__scroll {
  height: 100%;
  overflow-y: auto;
  padding: 0 20px calc(22px + env(safe-area-inset-bottom));
  scrollbar-width: none; -ms-overflow-style: none;
}
.nb-shop__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.nb-shop::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ⭐ 滾動時鎖定：head + tabs 用 position: sticky
   負 margin 令白色底橫向撑滿（抵銷 .nb-shop 嘅 20px padding）*/
/* ⚠️⚠️ head + tabs 已合併為【單一 sticky 容器 ✗✓】
   原因：以前 tabs 用硬編碼 top: 94.5px ✗ ——
        一旦 head 實際高度唔係 94.5px ✗ → 就出現 1px 透明縫隙 ✗
        （scroll 時會望到底層內容 ✗✓）
   而家只有 head 一個 sticky ✓ → 永遠冇縫隙 ✓✓ */
.nb-shop__head {
  display: block;
  position: sticky; top: 0; z-index: 7;
  padding: 22px 20px 0;           /* ⚠️ 底部 0：由 tabs 自己帶下內距 ✓ */
  margin: 0 -20px;                /* ⚠️ 唔再需要 -1px 重疊 ✓ */
  background: #fff;
}
.nb-shop__head .nb-modal__title { margin-bottom: 4px; }
.nb-shop__balance {
  font-size: 18px; color: var(--nb-text-soft); white-space: nowrap;
  display: flex; align-items: center; gap: 0px;
}
/* tabs 貼喺 head 下面（top = head 實際高度 95.5px = 上內距 22 + 內容 59.5 + 下內距 14）*/
.nb-shop__tabs {
  display: flex; gap: 8px; overflow-x: auto;
  /* ⚠️ 唔再 sticky ✗ top ✗ z-index ✗ —— 已喺 head 內 ✓ 跟住一齊固定 ✓✓ */
  padding: 12px 0 10px;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid var(--nb-line);
  /* 隱藏橫向 scrollbar（仍可左右滑）*/
  scrollbar-width: none; -ms-overflow-style: none;
}
.nb-shop__tabs::-webkit-scrollbar { height: 0; width: 0; display: none; }
.nb-shop__tab { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700;
                background: #fff; border: 2px solid var(--nb-line); color: var(--nb-text-soft); }
.nb-shop__tab--on { background: var(--nb-yellow); border-color: var(--nb-yellow); color: #4A3B00; }
.nb-shop__grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  /* 每行固定自然高度（唔會被撐高）；min-height 令彈窗高度固定，切換分類唔會時大時細 */
  grid-auto-rows: minmax(170px, auto); min-height: 0; align-content: start; }
.nb-shop__item { position: relative; background: #FFFEFB; border: 2px solid var(--nb-line); border-radius: var(--nb-radius-sm); padding: 12px 8px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.nb-shop__action { margin-top: auto; width: 100%; }
.nb-shop__action .nb-btn { width: 100%; }
.nb-shop__item--owned { border-color: var(--nb-green); background: #EDF9EF; }
/* ⭐ 使用中：主黃色底（三個狀態中最突出）*/
.nb-shop__item--on {
  background: var(--nb-yellow);
  border-color: var(--nb-yellow-dark);
}
/* 使用中嘅「換下」按鈕：白底（喺黃底上最清楚）*/
.nb-shop__item--on .nb-btn--ghost {
  --btn-shadow: var(--nb-yellow-dark);   /* 黃底上用深黃陰影 */
  background: #fff;
  border-color: #fff;
  color: var(--nb-text);
}
/* ⭐ hover 只轉淺黃底（保留白底按鈕嘅乾淨感）
   ⚠️ 必須覆蓋 .nb-btn--ghost:hover 嘅藍框藍字 ✗ */
.nb-shop__item--on .nb-btn--ghost:hover:not(:disabled) {
  background: #FFF8E1;
  border-color: #FFF8E1;
  color: var(--nb-text);
}
/* 「使用中」徽章（右上角）*/
.nb-shop__badge--on {
  position: absolute; top: 5px; right: 5px; z-index: 3;
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  background: #fff; color: var(--nb-yellow-dark);
  font-size: 11px; font-weight: 800; line-height: 1.5; letter-spacing: .3px;
  box-shadow: 0 1px 3px rgba(44, 62, 80, .2);
  pointer-events: none;
}
.nb-shop__thumb { height: 90px; display: flex; align-items: center; justify-content: center; }
.nb-shop__thumb img { max-width: 100%; max-height: 90px; object-fit: contain; }
.nb-shop__name { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
/* 價格徽章：左上角、小字、蜜糖色（唔佔一行） */
.nb-shop__price {
  position: absolute; top: 5px; left: 5px; z-index: 2;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 10px 1px 4px; border-radius: 999px;
  background: #FFF6DC; border: 1px solid #F2DFA0;
  font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--nb-yellow-dark); line-height: 1.35; pointer-events: none;
}
/* ⭐ 蜂蜜圖標 ✓（⚠️ SVG inline 要 vertical-align ✗ 唔係會偏上 ✗✓）*/
/* ⚠️ 預設 11px ✓（價格徽章用）；餘額大圖標由 inline style="width:20px" 覆蓋 ✓✓ */
.nb-honeyicon {
  width: 11px; height: 11px; flex: 0 0 auto;
  color: var(--nb-yellow-dark);
  vertical-align: middle;   /* ⚠️ 冇呢句 inline SVG 會貼基線 → 偏上 ✗ */
  display: inline-block;
}

/* 背景飾品：放大 1.5 倍並加圓角 */
.nb-decor--background { border-radius: 24px; }
@media (min-width: 620px) {
  .nb-shop__grid { grid-template-columns: repeat(3, 1fr); }
}

.nb-shop__empty { grid-column: 1 / -1; text-align: center; color: var(--nb-text-soft); font-size: 14px; padding: 18px 0; }
.nb-hive-hero__name { font-size: 20px; font-weight: 700; margin-top: 6px; }
.nb-hive-hero__level { font-family: 'Jost', sans-serif; font-size: 22px; font-weight: 700; }
.nb-honeybar { height: 14px; background: var(--nb-line); border-radius: 999px; overflow: hidden; margin: 12px auto 6px; max-width: 360px; }
.nb-honeybar__fill { height: 100%; background: linear-gradient(90deg, var(--nb-yellow), #FFD97A); border-radius: 999px; transition: width .5s ease; }

/* 個人資料列（暱稱 / 年級） */
/* ⭐ padding 跟 .nb-card 一致 ✓（20px）
   ⚠️ 原本係 4px 20px ✗ —— 嗰時冇 title ✓ 靠 row 嘅 14px padding 撐
      加咗「個人資料」title 之後 top 只有 4px → title 貼頂 ✗ */
.nb-profile { padding: 20px; }
.nb-profile__row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--nb-line); }
.nb-profile__row:first-of-type { padding-top: 0; }
.nb-profile__row:last-of-type { border-bottom: none; padding-bottom: 0; }
.nb-profile__info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.nb-profile__label { flex: 0 0 44px; font-size: 14px; color: var(--nb-text-soft); }
.nb-profile__value { font-size: 17px; font-weight: 700; }
.nb-profile__value--email { font-size: 15px; font-weight: 500; word-break: break-all; color: var(--nb-text-soft); }
.nb-profile__edit {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFF8E1; color: var(--nb-yellow-dark); transition: all .18s ease;
}
.nb-profile__edit svg { width: 17px; height: 17px; }
.nb-profile__edit:hover:not(:disabled) { background: var(--nb-yellow); color: #4A3B00; }
.nb-profile__edit:active:not(:disabled) { transform: scale(.92); }
.nb-profile__edit--off { background: var(--nb-line); color: #B6BCC0; cursor: not-allowed; }
.nb-profile__hint { font-size: 12px; color: var(--nb-text-soft); margin: 10px 0 0; }

/* 彈出修改視窗（手機：底部上滑；桌面：置中對話框） */
.nb-modal { position: fixed; inset: 0; z-index: 1500; display: flex; justify-content: center; padding: 16px;
  /* safe center：內容比視窗高時改為靠上，唔會被裁走 */
  align-items: safe center; overflow-y: auto; }
.nb-modal__backdrop { position: absolute; inset: 0; background: rgba(44, 62, 80, .45); animation: nbFade .2s ease; }
.nb-modal__card {
  position: relative; width: 100%; max-width: 420px; background: #fff;
  border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(44, 62, 80, .2); animation: nbSlideUp .26s cubic-bezier(.2, .8, .3, 1);
}
.nb-modal__card { position: relative; border-radius: 22px; }
.nb-modal__close { position: absolute; top: 12px; right: 12px; z-index: 20; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(44, 62, 80, .07); color: var(--nb-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nb-modal__close svg { width: 20px; height: 20px; }
.nb-modal__close:active { transform: scale(.92); }
.nb-modal__title { font-size: 20px; font-weight: 700; color: var(--nb-text); margin-bottom: 16px; }
.nb-modal__actions { display: flex; gap: 10px; margin-top: 18px; }
.nb-modal__actions .nb-btn { flex: 1; }
@keyframes nbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nbSlideUp { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

.nb-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .nb-stats { grid-template-columns: repeat(4, 1fr); } }
.nb-stat { background: #fff; border-radius: var(--nb-radius-sm); padding: 14px; text-align: center; box-shadow: var(--nb-shadow); }
.nb-stat__num { font-family: 'Jost', sans-serif; font-size: 24px; font-weight: 700; }
.nb-stat__label { font-size: 12px; color: var(--nb-text-soft); }

.nb-subjbar { margin-bottom: 12px; }
.nb-subjbar__top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 5px; }
.nb-subjbar__track { height: 10px; background: var(--nb-line); border-radius: 999px; overflow: hidden; }
.nb-subjbar__fill { height: 100%; background: var(--nb-yellow); border-radius: 999px; transition: width .4s ease; }

.nb-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px) { .nb-badges { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .nb-badges { grid-template-columns: repeat(5, 1fr); } }
.nb-badge {
  background: #fff; border: 2px solid var(--nb-line);
  border-radius: var(--nb-radius-sm); padding: 14px 10px 12px;
  text-align: center; opacity: .5; transition: all .2s ease;
}
/* ⭐ v2.6.0 → v2.6.1：獎勵徽章改成【底部 pill】✓（用戶指定方案 B ✓）
   ⚠️ 唔再絕對定位 ✗ —— 舊做法令徽章「浮」喺左上角 ✗ 同卡片脫節 ✗ 望落亂 ✗
   → 改為入返卡片流程：獎盃 → 名 → 條件 → 金額 ✓ 由上到下 ✓ 整齊 ✓
   設計語言仍然跟 .nb-shop__price（圓角 pill + 蜂蜜色 ✓）*/
.nb-badge__honey {
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 7px;
  padding: 2px 11px 2px 6px; border-radius: 999px;   /* ⚠️ 冇 border ✗ 故 padding +1px 補位 ✓ */
  background: #F4F5F7;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 700;
  color: #9AA5AD; line-height: 1.4; pointer-events: none;
}
/* 已解鎖 → 蜜糖黃 ✓ */
.nb-badge--on .nb-badge__honey {
  background: var(--nb-yellow);
  color: #3B2F00;
}
.nb-badge__honey .nb-honeyicon { width: 11px; height: 11px; }
.nb-badge--on { opacity: 1; border-color: var(--nb-yellow); background: #FFFBF0; box-shadow: var(--nb-shadow); }
.nb-badge__icon { width: 40px; height: 40px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nb-line); }
.nb-badge--on .nb-badge__icon { background: var(--nb-yellow); }
.nb-badge__icon svg { width: 22px; height: 22px; }
.nb-badge__name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.nb-badge__cond { font-size: 11px; color: var(--nb-text-soft); margin-top: 2px; line-height: 1.3; }

.nb-record { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--nb-line); font-size: 14px; }
.nb-record:last-child { border-bottom: none; }
.nb-record__badge { flex: 0 0 40px; height: 40px; border-radius: 12px; background: #FFF8E1; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Jost', sans-serif; }
.nb-record__main { flex: 1; min-width: 0; }
.nb-record__title { font-weight: 500; }
.nb-record__meta { font-size: 12px; color: var(--nb-text-soft); }
.nb-record__honey { font-weight: 700; font-family: 'Jost', sans-serif; color: var(--nb-yellow-dark); }

/* =========================================================================
   9. 題庫頁
   ========================================================================= */
.nb-note { background: #fff; border-radius: var(--nb-radius-sm); padding: 14px; box-shadow: var(--nb-shadow); margin-bottom: 10px; display: flex; gap: 12px; align-items: flex-start; }
.nb-note__main { flex: 1; min-width: 0; }
.nb-note__title { font-weight: 700; font-size: 15px; }
.nb-note__meta { font-size: 12px; color: var(--nb-text-soft); }
.nb-note--pick { border: 2px solid var(--nb-yellow); background: #FFF9E6; }

.nb-drop { border: 2px dashed var(--nb-line); border-radius: var(--nb-radius); padding: 24px 16px; text-align: center; background: #FFFEFB; transition: all .2s ease; }
.nb-drop--over { border-color: var(--nb-yellow); background: #FFFBF0; }

.nb-log { background: #2C3E50; color: #E8F0F7; border-radius: var(--nb-radius-sm); padding: 12px 14px; font-size: 13px; line-height: 1.6; max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }

/* -------------------------------------------------------------------------
   ⭐ v2.7.0 Pro 鎖：非 Pro 用戶遮蓋【整頁】✓
   用法：#libraryLock（鎖卡）+ #libraryBody 加 .nb-lockbody（內容變灰不可互動）
   ⚠️ 只係 UX ✗ 真正防線係 DB（RLS + user_tier）✗
   ------------------------------------------------------------------------- */
.nb-lock {
  border-radius: var(--nb-radius);
  border: 2px dashed var(--nb-line);
  padding: 44px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(45deg, #FFFBF0 0 12px, #FFF7E3 12px 24px);
}
.nb-lock__card { max-width: 340px; }
.nb-lock__ico {
  display: inline-flex; width: 52px; height: 52px;
  color: var(--nb-yellow-dark);            /* ⚠️ 黃底要深字／深黃 icon ✗ 唔用白 ✗ */
  margin-bottom: 10px;
}
.nb-lock__ico svg { width: 100%; height: 100%; }
.nb-lock__title { font-size: 20px; font-weight: 700; margin: 0 0 8px; color: var(--nb-text); }
.nb-lock__desc  { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--nb-text); }
.nb-lock__note  { font-size: 13px; margin: 0; color: var(--nb-text-soft); }

/* 鎖住時內容變灰 + 不可互動 ✓（內容仍然存在，只係睇唔清、點唔到 ✓）*/
.nb-lockbody { filter: grayscale(.55); opacity: .34; pointer-events: none; user-select: none; }

/* -------------------------------------------------------------------------
   ⭐ v2.7.0 已生成題目列表（瀏覽／編輯／刪除 ✓）
   ------------------------------------------------------------------------- */
.nb-qitem {
  background: #fff; border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius-sm); padding: 14px; margin-bottom: 10px;
}
.nb-qitem__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nb-qitem__no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: #FFF4D6; color: var(--nb-yellow-dark); font-size: 13px; font-weight: 700;
}
.nb-qitem__diff { font-size: 12px; color: var(--nb-text-soft); }
.nb-qitem__text { font-size: 15px; font-weight: 700; margin-bottom: 8px; line-height: 1.5; }
.nb-qitem__ops { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--nb-text); }
.nb-qitem__op--ans { font-weight: 700; color: #2E7D32; }      /* 正確答案：綠色（同考試對答案慣例一致 ✓）*/
.nb-qitem__exp { font-size: 13px; color: var(--nb-text-soft); margin-top: 8px; line-height: 1.6; }

/* 就地編輯 */
.nb-qedit__row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nb-qedit__key {
  display: flex; align-items: center; gap: 4px;
  min-width: 48px; font-weight: 700; cursor: pointer;
}

/* ⭐ v2.7.0 未開放嘅 chip（40／60 題預告 ✓）*/
.nb-chip--off,
.nb-chip:disabled {
  opacity: .42; cursor: not-allowed;
  border-style: dashed;
}
.nb-chip:disabled:hover { border-color: var(--nb-line); }

/* -------------------------------------------------------------------------
   ⭐ v2.7.0 筆記卡 grid（筆記本樣 ✓）
   電腦 ≥1025px 3 欄 ／ 平板 641–1024px 2 欄 ／ 手機 ≤640px 1 欄 ✓
   ------------------------------------------------------------------------- */
.nb-notegrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1024px) { .nb-notegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .nb-notegrid { grid-template-columns: 1fr; } }

.nb-notecard {
  background: #fff;
  border: 1px solid var(--nb-line);
  border-top: 3px solid var(--nb-yellow);      /* 筆記本封面感 ✓ */
  border-radius: var(--nb-radius-sm);
  padding: 16px 16px 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 132px;
  box-shadow: var(--nb-shadow);
}
.nb-notecard__title { font-size: 15px; font-weight: 700; line-height: 1.45; word-break: break-word; }
.nb-notecard__meta { font-size: 12px; color: var(--nb-text-soft); }
.nb-notecard__qcount { font-size: 12px; color: var(--nb-yellow-dark); font-weight: 700; }
.nb-notecard__foot { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.nb-notecard__foot .nb-btn { flex: 1; justify-content: center; }

.nb-bee { display: inline-block; line-height: 0; }
.nb-bee--fly { animation: nbFloat 2.6s ease-in-out infinite; }
.nb-bee--spin { animation: nbSpin 1s ease-in-out; }
.nb-bee--tilt { animation: nbTilt .7s ease-in-out; }
@keyframes nbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* 尊重系統「減少動態」設定；同時避免動畫被暫停時留下位移 */
@media (prefers-reduced-motion: reduce) {
  .nb-bee--fly, .nb-modal__card { animation: none; }
}
@keyframes nbSpin  { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes nbTilt  { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 70% { transform: rotate(10deg); } }

/* 載入遮罩 */
.nb-loading { position: fixed; inset: 0; background: rgba(255,253,245,.88); z-index: 1200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.nb-loading__logo { display: block; width: 92px; height: 92px; object-fit: contain; animation: nbFloat 2.6s ease-in-out infinite; }
.nb-loading__text { font-weight: 700; color: var(--nb-text); }

/* ==========================================================================
   手機版：測驗字體縮小（≤619px）
   原因：長題目在手機上會把「下一題」按鈕推到畫面以下。
   桌面版（≥620px）維持原本大小，故此段只放在 max-width 查詢內。
   ========================================================================== */
@media (max-width: 619px) {
  /* 題目：25px → 20px（長題目每行更省位） */
  .nb-question__text { font-size: 20px; }

  /* 題目標籤（科目 · 難度）：手機版隱藏，騰出約 25px 高度 */
  .nb-question__tag { display: none; }

  /* 選項：內距 14px 16px → 10px 12px；左右保留 12px 免 A/B/C/D 圓圈貼邊 */
  .nb-option { padding: 10px 12px; }
  /* ⚠️ .nb-option__text 保持 20px（原本大小）：改細會因 align-items:flex-start 而貼頂偏移 */
  .nb-option__key { font-size: 14px; }
}

/* ==========================================================================
   題目反饋（P1-F）
   ========================================================================== */
/* 測驗頂部資訊列：反饋按鈕 */
.nb-quiz__feedback {
  flex: 0 0 auto; padding: 6px 14px; border: 1px solid var(--nb-line); border-radius: 999px;
  background: #fff; color: var(--nb-text); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.nb-quiz__feedback:hover { background: #FFF8E1; border-color: var(--nb-yellow-dark); }
.nb-quiz__feedback:active { transform: scale(.97); }

/* 反饋原因格 */
.nb-feedback-reasons {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 6px 0 14px;
}
.nb-reason {
  padding: 10px 8px; border: 2px solid var(--nb-line); border-radius: var(--nb-radius-sm);
  background: #fff; color: var(--nb-text); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.nb-reason:hover { border-color: var(--nb-yellow); }
.nb-reason--on { border-color: var(--nb-yellow); background: #FFF8E1; }

/* 補充說明 */
#feedbackDetail { width: 100%; resize: vertical; font-family: inherit; line-height: 1.5; }

/* ==========================================================================
   Honey 流水帳（歷史紀錄）
   ========================================================================== */
.nb-txbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.nb-txbar__sum { display: flex; gap: 8px; flex-wrap: wrap; }
.nb-txsum {
  font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  font-family: 'Jost', 'Noto Sans TC', sans-serif;
}
.nb-txsum--in  { background: #FFF8E1; color: var(--nb-yellow-dark); }
.nb-txsum--out { background: #FDECEA; color: #C0392B; }

.nb-chips { display: flex; gap: 6px; }
.nb-chip {
  padding: 5px 13px; border: 1.5px solid var(--nb-line); border-radius: 999px;
  background: #fff; color: var(--nb-muted); font-family: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.nb-chip:hover { border-color: var(--nb-yellow); }
.nb-chip--on { border-color: var(--nb-yellow); background: #FFF8E1; color: var(--nb-text); }

/* 流水帳列：圖示 + 內容 + 金額 */
.nb-record__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #F7F3E8; color: var(--nb-muted);
}
.nb-record__icon svg { width: 19px; height: 19px; }
.nb-record--bonus .nb-record__icon    { background: #FFF8E1; color: var(--nb-yellow-dark); }
.nb-record--purchase .nb-record__icon { background: #FDECEA; color: #C0392B; }
/* ⭐ v2.6.0：解鎖成就 ✓（同 bonus 區分：用淺琥珀 ✓）*/
.nb-record--achievement .nb-record__icon { background: #FFF3D6; color: #B8860B; }

.nb-record__honey--out { color: #C0392B; }

/* 蜜蜂日記分頁 */
.nb-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--nb-line);
}
.nb-pager:empty { display: none; }
.nb-pager__info { font-size: 13px; color: var(--nb-muted); font-weight: 600; }
.nb-pagebtn {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--nb-line);
  background: #fff; color: var(--nb-text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, background .18s ease;
}
/* SVG 箭嘴：靠 flex 置中，唔受字型基準線影響 */
.nb-pagebtn svg { width: 18px; height: 18px; display: block; }
.nb-pagebtn:hover:not(:disabled) { border-color: var(--nb-yellow); background: #FFF8E1; }
.nb-pagebtn:disabled { opacity: .35; cursor: not-allowed; }

/* ============================================================================
   筆記 Markdown 渲染樣式（.nb-md）
   by renderNoteMarkdown()；內容已先 escapeHtml ✓
   ============================================================================ */
.nb-md { font-size: 15.5px; line-height: 1.75; color: var(--nb-text); word-break: break-word; }
.nb-md > :first-child { margin-top: 0; }
.nb-md > :last-child { margin-bottom: 0; }

.nb-md h1 { font-size: 20px; font-weight: 800; margin: 22px 0 10px; padding-bottom: 6px;
            border-bottom: 2px solid var(--nb-yellow); }
.nb-md h2 { font-size: 18px; font-weight: 800; margin: 20px 0 8px; color: #4A3B00;
            background: #FFF8E1; border-left: 5px solid var(--nb-yellow);
            padding: 7px 12px; border-radius: 6px; }
.nb-md h3 { font-size: 16px; font-weight: 700; margin: 16px 0 6px; color: var(--nb-yellow-dark); }
.nb-md h4 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; }

.nb-md p { margin: 8px 0; }
.nb-md ul, .nb-md ol { margin: 8px 0; padding-left: 24px; }
.nb-md li { margin: 4px 0; }
.nb-md li::marker { color: var(--nb-yellow-dark); font-weight: 700; }

.nb-md hr { border: 0; border-top: 1px dashed var(--nb-line); margin: 18px 0; }

.nb-md blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid var(--nb-yellow);
                    background: #FFFBF0; border-radius: 0 6px 6px 0; color: var(--nb-text-soft); }

.nb-md code { background: #F1EFE8; padding: 2px 6px; border-radius: 4px;
              font-size: 14px; font-family: ui-monospace, Menlo, monospace; }

/* 表格：可橫向滾動（窄螢幕唔會爆版 ✓）*/
.nb-md table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14.5px; display: block; overflow-x: auto; }
.nb-md th, .nb-md td { border: 1px solid var(--nb-line); padding: 7px 10px; text-align: left; }
.nb-md th { background: #FFF8E1; font-weight: 700; white-space: nowrap; }
.nb-md tr:nth-child(even) td { background: #FCFBF7; }

.nb-note-view__meta { font-size: 13px; color: var(--nb-text-soft); margin-bottom: 3px; }
.nb-note-view__title { font-size: 20px; font-weight: 700; margin-bottom: 14px; }

/* 筆記上載進度條（loading overlay 內 ✓）*/
.nb-uprog { width: min(320px, 74vw); margin-top: 16px; }
.nb-uprog__bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
}
.nb-uprog__fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--nb-yellow), #F5A623);
  transition: width 0.9s ease-out;
}
.nb-uprog__meta {
  margin-top: 8px; font-size: 12.5px; color: var(--nb-text-soft);
  text-align: center; line-height: 1.5;
}

/* ── 筆記編輯：label 16px + 「AI 整理」按鈕（內容 label 最右 ✓）───────── */
.nb-field__label--edit { font-size: 16px; }

.nb-field__labelrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.nb-field__labelrow .nb-field__label { margin-bottom: 0; }

.nb-aibtn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; padding: 5px 12px;
  background: #FFF8E1; border-color: var(--nb-yellow); color: #8A6D00;
  flex: none;
}
.nb-aibtn:hover:not(:disabled) { background: var(--nb-yellow); color: #4A3B00; }
.nb-aibtn:disabled { opacity: .65; }
.nb-aibtn__icon { font-size: 12px; line-height: 1; }
.nb-quiz__llm {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #FFF9E6; border: 1px solid #F2DFA0; color: var(--nb-yellow-dark, #E0B12E);
  cursor: help; transition: background .15s, border-color .15s;
}
.nb-quiz__llm:hover, .nb-quiz__llm:focus-visible {
  background: #FFF3D0; border-color: var(--nb-yellow, #F5C842); outline: none;
}
/* ⭐ AI 整理時嘅提示（令用戶知要等 ✓）*/
.nb-loading__hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--nb-muted); }
.nb-loading__text { text-align: center; line-height: 1.6; }
/* ⭐ 自製 tooltip（native title 有 ~1 秒延遲 ✗ → 150ms ✓）*/
.nb-quiz__llm { position: relative; }
.nb-llm-tip {
  /* ⚠️ 用 fixed ✗ 唔用 absolute ✗✓
     原因：.nb-quiz 有 overflow-y:auto ✗ → absolute 會被裁切 ✗✓ */
  position: fixed; top: 0; left: 0;
  width: 250px; max-width: calc(100vw - 24px); padding: 11px 13px; box-sizing: border-box;
  background: #FFFBF0;                                   /* ⭐ 淺黃底 ✓ */
  color: #2C3E50; border-radius: 10px;
  border: 1px solid #F0DFA8;                             /* 黃邊 ✓ */
  font-size: 12.5px; line-height: 1.7; text-align: left;
  box-shadow: 0 6px 20px rgba(224,177,46,.20);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 30; pointer-events: none;
  word-break: break-all;         /* ⚠️ 長模型名要斷行 ✓ */
}
.nb-llm-tip::after {
  content: ''; position: absolute; bottom: 100%; right: var(--llm-tip-arrow, 12px);
  border: 7px solid transparent; border-bottom-color: #F0DFA8;   /* 箭嘴外框（黃 ✓）*/
}
.nb-llm-tip::before {
  content: ''; position: absolute; bottom: 100%; right: calc(var(--llm-tip-arrow, 12px) + 1px);
  border: 6px solid transparent; border-bottom-color: #FFFBF0;   /* 箭嘴內填（淺黃 ✓）*/
  z-index: 1;
}
.nb-quiz__llm--tip .nb-llm-tip { opacity: 1; visibility: visible; }
.nb-llm-tip b { display: block; margin-bottom: 5px; color: #E0B12E; font-size: 12px; }
.nb-llm-tip b::before { content: '✦ '; }
.nb-llm-tip__row { display: flex; gap: 7px; font-size: 12px; align-items: baseline; }
.nb-llm-tip__row em { flex: 0 0 44px; font-style: normal; color: #A89870; }
.nb-llm-tip__row > :last-child { flex: 1 1 auto; min-width: 0; }

/* ══════════════════════════════════════════════════════════════
   📒 記錄（錯題本）
   ⚠️ 用 nb-wrong__ 而唔係 nb-record__ ✗ —— 後者已被「蜜蜂日記」佔用 ✓
   ══════════════════════════════════════════════════════════════ */

.nb-wrong__sum {
  display: flex; gap: 26px; justify-content: center;
  padding: 4px 0 16px; margin-bottom: 14px;
  border-bottom: 1px solid var(--nb-line, #EFEFEF);
}
.nb-wrong__stat { text-align: center; }
.nb-wrong__n {
  font-family: 'Jost', sans-serif; font-size: 30px; font-weight: 700;
  line-height: 1.1; color: var(--nb-yellow-dark);
}
.nb-wrong__l { font-size: 12.5px; color: var(--nb-text-soft); margin-top: 2px; }

.nb-wrong__bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.nb-wrong__subj { width: auto; min-width: 130px; max-width: 220px; }

.nb-wrong__item {
  border: 1px solid var(--nb-line, #EFEFEF); border-radius: var(--nb-radius, 12px);
  padding: 14px 15px; margin-bottom: 10px; background: #fff;
  transition: box-shadow .15s, border-color .15s;
}
.nb-wrong__item:hover { border-color: var(--nb-yellow); box-shadow: 0 3px 12px rgba(224,177,46,.12); }
.nb-wrong__q {
  font-size: 15px; font-weight: 600; line-height: 1.55;
  color: var(--nb-text, #2C3E50); margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* ⭐ 按鈕 + 錯次數同一行 ✓ */
.nb-wrong__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ⚠️ 字體同 .nb-btn--sm 一致（14px ✓）*/
.nb-wrong__bad {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  background: #FDECEA; color: #B3261E;
}

.nb-wrong__empty { text-align: center; padding: 30px 10px; color: var(--nb-text-soft); font-size: 14px; }
.nb-wrong__foot { margin-top: 16px; }

@media (max-width: 560px) {
  .nb-wrong__bar { flex-direction: column; align-items: stretch; }
  .nb-wrong__subj { max-width: none; width: 100%; }
  .nb-wrong__n { font-size: 25px; }
}

/* =========================================================================
   v2.0 — 連續登入 / 每日獎勵 / 排行榜 / 科目表現
   ⚠️ 全部 class 用 nb-v2* prefix ✗（避免撞名 ✓）
   ========================================================================= */

/* ---- 通用卡片 ---- */
.nb-v2slot { margin-bottom: 16px; }
.nb-v2card { position: relative; }
.nb-v2card__head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
}
.nb-v2card__title { font-size: 20px; font-weight: 700; color: var(--nb-text); }
.nb-v2card__hint {
  font-size: 13px; line-height: 1.55; color: var(--nb-text-soft);
  margin: 8px 0 0;
}

/* ---- 連續登入 ---- */
.nb-v2streak { display: flex; align-items: baseline; gap: 5px; }
.nb-v2streak__n {
  font-size: 40px; font-weight: 800; line-height: 1;
  color: var(--nb-yellow-dark); letter-spacing: -1px;
}
.nb-v2streak__u { font-size: 16px; font-weight: 700; color: var(--nb-text); }
.nb-v2streak__b { font-size: 13px; color: var(--nb-text-soft); margin-left: 6px; }

/* ---- 每日獎勵 7 日格 ---- */
.nb-v2week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px; margin: 12px 0 14px;
}
.nb-v2week__d {
  border: 1.5px solid var(--nb-line); border-radius: 12px;
  padding: 9px 2px; text-align: center; background: #fff;   /* ⭐ lbl 大咗 → 平衡高度 ✓ */
}
.nb-v2week__lbl { font-size: 16px; font-weight: 700; color: var(--nb-text-soft); }   /* ⭐ 用戶指定：電腦版 16px ✓ */
.nb-v2week__amt { font-size: 12px; font-weight: 700; color: var(--nb-text); margin-top: 3px; }
.nb-v2week__d--past { background: #FAFAF7; opacity: .62; }
.nb-v2week__d--today {
  border-color: var(--nb-yellow); background: #FFF9E6;
  box-shadow: var(--nb-shadow);
}
.nb-v2week__d--today .nb-v2week__lbl { color: var(--nb-yellow-dark); }

/* ---- 科目表現 bar ---- */
.nb-v2bar + .nb-v2bar { margin-top: 13px; }
.nb-v2bar__top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 6px;
}
.nb-v2bar__name { font-size: 14px; font-weight: 700; color: var(--nb-text); }
.nb-v2bar__val { font-size: 13px; font-weight: 700; color: var(--nb-text); }
.nb-v2bar__val i { font-style: normal; font-weight: 500; color: var(--nb-text-soft); font-size: 12px; }
.nb-v2bar__track {
  height: 9px; border-radius: 999px; background: #F2EFE6; overflow: hidden;
}
.nb-v2bar__fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.nb-v2bar__fill--high { background: var(--nb-green); }
.nb-v2bar__fill--mid  { background: var(--nb-yellow); }
.nb-v2bar__fill--low  { background: #E8A33D; }

/* ---- 練習頁頂唔條 ---- */
.nb-v2strip {
  display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.nb-v2strip__item {
  flex: 1 1 0; min-width: 130px;
  display: flex; align-items: center; gap: 8px;
  background: var(--nb-white); border: 1.5px solid var(--nb-line);
  border-radius: var(--nb-radius-sm); padding: 10px 13px;
  box-shadow: var(--nb-shadow);
}
.nb-v2strip__ico { width: 19px; height: 19px; color: var(--nb-yellow-dark); flex: 0 0 auto; }
.nb-v2strip__ico svg { width: 100%; height: 100%; }
.nb-v2strip__txt { font-size: 13px; color: var(--nb-text-soft); }
.nb-v2strip__txt b { color: var(--nb-text); font-size: 15px; }

/* ---- 排行榜 ---- */
.nb-v2board__bar {
  margin-bottom: 12px;
  display: flex; gap: 8px; flex-wrap: wrap;   /* ⭐ v2.5.12：兩個 select 並排 ✓ */
}
.nb-v2board__sel { max-width: 200px; flex: 1 1 auto; min-width: 0; }
.nb-v2rank__row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 4px; border-bottom: 1px solid var(--nb-line);
}
.nb-v2rank__row:last-child { border-bottom: 0; }
.nb-v2rank__row--top1 { background: #FFFBF0; border-radius: 12px; }
.nb-v2rank__row--top2 { background: #FCFCFA; border-radius: 12px; }
.nb-v2rank__row--top3 { background: #FDFAF5; border-radius: 12px; }
.nb-v2rank__medal { font-size: 22px; width: 30px; text-align: center; flex: 0 0 auto; }
.nb-v2rank__num {
  width: 30px; text-align: center; flex: 0 0 auto;
  font-size: 14px; font-weight: 700; color: var(--nb-text-soft);
}
.nb-v2rank__av {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: #FFF9E6; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--nb-line);
}
/* ⭐ 蜜蜂圖 80% ✓（唔貼邊 → 顯示完整蜜蜂 ✓ 用戶指定 ✓）*/
.nb-v2rank__av > img { width: 80%; height: 80%; object-fit: contain; }
.nb-v2rank__av-fb {
  width: 100%; height: 100%; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--nb-yellow-dark);
}
.nb-v2rank__main { flex: 1 1 auto; min-width: 0; }
.nb-v2rank__name {
  font-size: 15px; font-weight: 700; color: var(--nb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-v2rank__meta { font-size: 12px; color: var(--nb-text-soft); margin-top: 2px; }
.nb-v2rank__score {
  flex: 0 0 auto; text-align: right;
  font-size: 18px; font-weight: 800; color: var(--nb-yellow-dark);
  line-height: 1.1;
}
.nb-v2rank__score i {
  display: block; font-style: normal; font-size: 11px;
  font-weight: 500; color: var(--nb-text-soft);
}

/* ---- 手機版 ---- */
@media (max-width: 640px) {
  .nb-v2streak__n { font-size: 34px; }
  .nb-v2week { gap: 4px; }
  .nb-v2week__d { padding: 6px 1px; border-radius: 10px; }
  /* ⚠️ 原本 lbl + amt 共用一條 ✗ → 拆開先改得 ✓ */
  .nb-v2week__lbl { font-size: 14px; }
  .nb-v2week__amt { font-size: 11px; }
  .nb-v2strip__item { min-width: 0; padding: 9px 11px; }
  .nb-v2rank__score { font-size: 16px; }
}

/* =========================================================================
   v2.0 — 今日挑戰卡（練習頁最頂，全寬 ✓）
   ========================================================================= */

/* ⭐ 今日任務卡：主黃色底（深褐字 ✓ 對比足夠 ✓）*/
.nb-v2mission {
  padding: 18px;
  background: linear-gradient(160deg, #F7CE4E 0%, #EFBC33 55%, #E8B02A 100%);
  border: none;
  box-shadow: 0 6px 20px rgba(224, 177, 46, .28);
  color: #1F2933;              /* ⭐ 卡內所有文字統一黑 ✓ */
}
.nb-v2mission--all {
  background: linear-gradient(160deg, #F9D863 0%, #F0C13A 55%, #E8B02A 100%);
}

.nb-v2mission__head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 8px;
}
/* ⚠️ 深色字 ✓（白色喺黃底上對比不足 ✗）*/
.nb-v2mission__title { font-size: 20px; font-weight: 700; color: #1F2933; }
/* ⭐ badge / time 共用同一組外觀 ✓（高度、字級、內距完全一致 ✓）*/
.nb-v2mission__badge,
.nb-v2mission__time {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; color: #1F2933;
  background: rgba(255, 255, 255, .66);
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.3;
  white-space: nowrap;
}
.nb-v2mission__badge { gap: 0; }
.nb-v2mission__time {
  margin-left: auto;          /* ⭐ 同 head 同一行、置右 ✓ */
  gap: 5px;                   /* ⚠️ icon 同文字間距 ✓ */
}

/* ⭐「賺取 🍯 N」—— 統一 15px + 同一顏色 ✓ */
/* ⭐ 右上角：剩餘時間 / 已完成 ✓（底色同 badge 一致 ✓）*/

.nb-v2mission__time-ico { width: 13px; height: 13px; display: inline-flex; flex: 0 0 auto; }
.nb-v2mission__time-ico svg { width: 100%; height: 100%; display: block; }
.nb-v2mission__time--done { background: #3A2E00; color: #FFFFFF; }  /* ⚠️ 完成 → 反色 ✓ */

.nb-v2mission__reward {
  display: flex; align-items: center; gap: 5px;
  font-size: 15px; color: #1F2933; margin-bottom: 12px;
}
.nb-v2mission__reward-n { font-size: 15px; font-weight: 700; color: #1F2933; }

/* ⭐ bar 下方：當前任務名稱 ✓ */
.nb-v2mission__task {
  font-size: 15px; font-weight: 400; color: #1F2933;
  line-height: 1.4; text-align: left;
  margin: -5px 0 12px;
}
.nb-v2mission__task b { font-weight: 700; }
.nb-v2mission__task--done { font-weight: 700; }

/* ⭐ 一條過嘅進度條 + 右邊「N / 3」狀態 ✓（參考圖設計 ✓）*/
.nb-v2mission__bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.nb-v2mission__track {
  flex: 1 1 auto; height: 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .48);
  overflow: hidden;
}
.nb-v2mission__fill {
  height: 100%; border-radius: 999px;
  background: #FFFFFF;
  transition: width .4s ease;
}
.nb-v2mission__count {
  flex: 0 0 auto; font-size: 15px; font-weight: 700;
  color: #1F2933; white-space: nowrap;
}

/* ⚠️ 黃底上面嘅按鈕要反色 ✗（原本黃色會隱形 ✓）*/
/* ⭐ 白底 + 深褐字（對比最高 ✓）*/
.nb-v2mission .nb-btn--primary {
  background: #FFFFFF;
  color: #1F2933;                 /* ⭐ 同卡內文字一致黑 ✓ */
  box-shadow: 0 3px 0 rgba(58, 46, 0, .16);
}
.nb-v2mission .nb-btn--primary:hover:not(:disabled) { background: #FFFDF5; }

/* ⭐ 全部完成嘅文字提示 ✓ */
/* ⭐ 科目進度 badges（全部 6 科 ✓ 已做顯眼 / 未做淺色 ✓）*/
.nb-v2mission__subjs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: -4px 0 12px;
}
.nb-v2mission__subj {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700;
  border-radius: 999px; padding: 4px 12px;
  border: 0;                              /* ⭐ 用戶指定：border 0 ✓ */
  /* ⚠️ 未做：更淡 + 更透明 → 同已做拉開對比 ✓ */
  color: rgba(31, 41, 51, .26);
  background: rgba(255, 255, 255, .18);
  /* ⭐ v2.5.12：改成 <button> ✓ 點一下去做該科題目 ✓ */
  font-family: inherit; line-height: 1.4;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.nb-v2mission__subj:hover {
  background: rgba(255, 255, 255, .46);
  color: rgba(31, 41, 51, .62);
}
.nb-v2mission__subj:active { transform: scale(.94); }
.nb-v2mission__subj:focus-visible {
  outline: 2px solid rgba(58, 46, 0, .45); outline-offset: 2px;
}
.nb-v2mission__subj--on:hover { background: rgba(255, 255, 255, .92); }
/* ⭐ 已做：實白底 + 深色字 ✓（唔用黑底 ✓ 冇 tick ✓ 靠對比區分 ✓）*/
.nb-v2mission__subj--on {
  color: #1F2933;
  background: #FFFFFFBA;                 /* ⭐ 用戶指定（半透明白 ✓ alpha BA = 73%）*/
  box-shadow: 0 1px 3px rgba(58, 46, 0, .16);
}

/* ⚠️ .nb-v2mission__earned 已刪 ✗（2026-10-15 用戶指定：卡內唔顯示「已賺取 N Honey」✗
   金額改由每個任務完成時嘅 showToast 顯示 ✓） */

.nb-v2mission__done {
  margin-top: 2px; padding: 11px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .66);
  color: #1F2933; font-size: 14px; font-weight: 700;
  text-align: center;
}

@media (max-width: 640px) {
  .nb-v2mission { padding: 15px; }
  /* ⚠️ 今日任務標題唔縮細 ✗ —— 跟 .nb-card__title 一致（20px ✓）*/
  .nb-v2mission__reward, .nb-v2mission__reward-n { font-size: 14px; }
  .nb-v2mission__task { font-size: 14px; }
  .nb-v2mission__subj { font-size: 12px; padding: 3px 10px; }
  .nb-v2mission__subjs { gap: 5px; }
    .nb-v2mission__badge, .nb-v2mission__time { font-size: 11px; padding: 2px 8px; }
  .nb-v2mission__time-ico { width: 12px; height: 12px; }
  /* ⚠️ 里程碑已移除 ✗（改一條過 bar ✓）*/
}

/* ══════════════════════════════════════════════
   ⭐ 練習設定 Popup（點科目彈出 ✓）
   ══════════════════════════════════════════════ */
.nb-modal__card.nb-setup {
  max-width: 560px;
  width: 100%;
  max-height: none;                 /* ⭐ 唔滾動 ✓ 一次顯示全部 ✓ */
  display: flex; flex-direction: column;
  padding: 24px 22px 20px;
}
.nb-setup__title { margin-bottom: 18px; font-size: 22px; }
/* ⚠️ .nb-setup__sub 已刪 ✗（用戶要求唔顯示年級 ✓）*/
.nb-setup__body {
  flex: 0 1 auto;
  overflow: visible;                /* ⭐ 唔滾動 ✓ */
}
.nb-setup__sec { margin-bottom: 20px; }
.nb-setup__sec:last-child { margin-bottom: 4px; }
.nb-setup__lbl {
  font-size: 20px; font-weight: 700; color: #1F2933;   /* ⭐ 跟 card title 一致 ✓ */
  margin-bottom: 10px;
}
/* ⚠️ Popup 內題型 / 來源卡改垂直排列 ✗（唔夠闊 ✓）*/
/* ⭐ Popup 內題型 / 來源：3 格並排 ✓ */
.nb-modes--grid3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.nb-modes--grid3 .nb-mode { width: 100%; min-width: 0; }

/* ⭐ 4 個題型（含串字模式）→ 2×2 排 ✓ 好過 3+1 突一個出嚟 ✗ */
.nb-modes--grid2 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.nb-modes--grid2 .nb-mode { width: 100%; min-width: 0; }

.nb-mode--tile {
  flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 14px 8px;
}
.nb-mode__icon-lg {
  width: 46px; height: 46px; border-radius: 13px; background: #FFF8E1;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.nb-mode__icon-lg svg { width: 25px; height: 25px; }
.nb-mode--tile .nb-mode__name { font-size: 18px; font-weight: 700; line-height: 1.25; }
.nb-mode--tile .nb-mode__desc { font-size: 14px; line-height: 1.4; color: var(--nb-text-soft); }

@media (max-width: 640px) {
  .nb-modal__card.nb-setup { padding: 18px 16px 14px; }
  .nb-setup__lbl { font-size: 18px; }
  .nb-setup__title { font-size: 19px; margin-bottom: 14px; }
  .nb-modes--grid3 { gap: 7px; }
  .nb-mode--tile { padding: 11px 5px; gap: 6px; }
  .nb-mode--tile .nb-mode__name { font-size: 16px; }
  .nb-mode--tile .nb-mode__desc { font-size: 12.5px; }
  .nb-mode__icon-lg { width: 40px; height: 40px; }
  .nb-mode__icon-lg svg { width: 22px; height: 22px; }
}

/* ══════════════════════════════════════════════
   ⭐ 排行榜：領獎台（頭 3 名 ✓）
   ⚠️ 標準排法：2 號左、1 號中（最高）、3 號右 ✓
   ══════════════════════════════════════════════ */
/* ⭐ 領獎台：黃底色 + 圓角 ✓（突出頭 3 名 ✓）*/
.nb-v2podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 8px;
  padding: 22px 14px 0;              /* ⭐ 底座貼底 ✓（用戶指定 ✓）*/
  margin-bottom: 22px;
  background: linear-gradient(180deg, #FFF8E0 0%, #FFEDB4 100%);
  border: 1px solid #F6E4A8;
  border-radius: 22px;               /* ⭐ 四角圓 ✓（底座由 overflow 裁 ✓）*/
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(224, 177, 46, .14);
}
.nb-v2pod {
  flex: 1 1 0; min-width: 0; max-width: 176px;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-align: center;
}
.nb-v2pod__medal { width: 25px; height: 25px; display: flex; color: #C9CED6; }   /* ⭐ ×1.15 ✓ */
.nb-v2pod--r1 .nb-v2pod__medal { color: #E0B12E; width: 30px; height: 30px; }   /* ⭐ ×1.15 ✓ */
.nb-v2pod--r3 .nb-v2pod__medal { color: #D8A16A; }
.nb-v2pod__medal svg { width: 100%; height: 100%; }

/* ⭐ 領獎台頭像容器（圓形 ✓ 內含迷你蜜蜂 ✓）*/
.nb-v2pod__av {
  width: 99px; height: 99px; border-radius: 50%; overflow: hidden;   /* ⭐ v2.5.13：×1.15 ✓ */
  background: #FFFFFF; border: 2.5px solid #F6E4A8; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(224, 177, 46, .18);
}
.nb-v2pod--r1 .nb-v2pod__av {
  width: 122px; height: 122px; border-color: #F5C842; border-width: 3px;   /* ⭐ ×1.15 ✓ */
  box-shadow: 0 3px 14px rgba(224, 177, 46, .32);
}

.nb-v2pod__name {
  font-size: 16px; font-weight: 700; color: var(--nb-text);   /* ⭐ ×1.15 ✓ */
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-v2pod--r1 .nb-v2pod__name { font-size: 17px; }   /* ⭐ ×1.15 ✓ */
.nb-v2pod__score {
  font-size: 16px; font-weight: 800; color: var(--nb-text);   /* ⭐ ×1.15 ✓ */
}
.nb-v2pod__score i {
  display: block; font-style: normal; font-size: 13px;
  font-weight: 500; color: var(--nb-text-soft); margin-top: 1px;
}

/* ⭐ 底座（唔等高 ✓）*/
.nb-v2pod__base {
  width: 100%; margin-top: 4px;
  border-radius: 12px 12px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #3B2F00;
}
.nb-v2pod__base span { font-size: 28px; }   /* ⭐ ×1.15 ✓ */
.nb-v2pod--r1 .nb-v2pod__base {
  height: 101px; background: linear-gradient(180deg, #FFE9A6 0%, #F5C842 100%);   /* ⭐ ×1.15 ✓ */
}
.nb-v2pod--r2 .nb-v2pod__base {
  height: 71px; background: linear-gradient(180deg, #EEF1F5 0%, #C9CED6 100%);   /* ⭐ ×1.15 ✓ */
  color: #46505C;
}
.nb-v2pod--r3 .nb-v2pod__base {
  height: 55px; background: linear-gradient(180deg, #F5DFC6 0%, #D8A16A 100%);   /* ⭐ ×1.15 ✓ */
  color: #5A3A18;
}
.nb-v2pod--r2 .nb-v2pod__base span,
.nb-v2pod--r3 .nb-v2pod__base span { font-size: 23px; }   /* ⭐ ×1.15 ✓ */

/* ⭐ 迷你蜜蜂（表情 + 全套裝飾 ✓ 重用 .nb-bee-stage 分層 ✓）*/
.nb-v2minibee {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
/* ⚠️ 基礎：蜜蜂佔容器 80%（列表頭像 .nb-v2rank__av 用 ✓）*/
.nb-v2minibee .nb-bee-stage {
  width: 80%;
  height: 80%;
}
/* ⭐ 領獎台：蜜蜂佔圓圈 65% ✓（2026-10-11 用戶指定 ✓）
   理由：背景飾品 w = 150%（蜜蜂框嘅 150%）✗
     → 80% 時：蜜蜂 85px → 背景 127px > 圓圈 106px ✗ 被裁走 ✗
     → 65% 時：蜜蜂 69px → 背景 103px < 圓圈 106px ✓ 睇得晒 ✓
   🔴 必須用【百分比】✗ 唔可以用 var(--nb-bee-size) ✗
     原因：--nb-bee-size 係 JS 傳入嘅 inline 固定值（106/86px ✗）
           但圓圈喺手機 media query 縮到 88/70px ✗ → 比例會變 78~80% ✗
           用 % 自動跟圓圈縮放 ✓ 桌面手機都係 65% ✓ */
.nb-v2pod__av .nb-v2minibee .nb-bee-stage {
  /* ⭐ v2.5.14：65% × 1.15 = 74.75% ✓
     → 蜜蜂本體 + 所有飾品（相對 stage 嘅 %）一齊放大 15% ✓
     實測：62.4% of 圓圈 → 71.8% ✓ */
  width: 74.75%;
  height: 74.75%;
}
/* ⚠️ 背景圓角交由容器裁 ✗（容器係圓形 ✓）*/
.nb-v2minibee .nb-decor--background { border-radius: 0; }
/* ⚠️ 迷你版唔要浮動動畫 ✗（30 隻一齊郁會卡 ✓）*/
.nb-v2minibee .nb-bee-stage__float { animation: none; }

.nb-v2rank--rest { margin-top: 4px; }

@media (max-width: 640px) {
  .nb-v2podium { gap: 7px; padding: 18px 10px 0; border-radius: 18px; }
  /* ⭐ v2.5.13：全部 ×1.15 ✓ */
  .nb-v2pod__av { width: 80px; height: 80px; border-width: 2px; }
  .nb-v2pod--r1 .nb-v2pod__av { width: 101px; height: 101px; border-width: 2.5px; }
  .nb-v2pod__name { font-size: 13px; }
  .nb-v2pod--r1 .nb-v2pod__name { font-size: 15px; }
  .nb-v2pod__score { font-size: 14px; }
  .nb-v2pod--r1 .nb-v2pod__base { height: 80px; }
  .nb-v2pod--r2 .nb-v2pod__base { height: 57px; }
  .nb-v2pod--r3 .nb-v2pod__base { height: 46px; }
  .nb-v2pod__base span { font-size: 23px; }
  .nb-v2pod--r2 .nb-v2pod__base span,
  .nb-v2pod--r3 .nb-v2pod__base span { font-size: 19px; }
}

/* ⭐ Popup 開始掣（只有一個 ✓ 佔滿闊度 ✓）*/
.nb-setup__actions { margin-top: 18px; }
.nb-setup__actions .nb-btn { flex: 1; padding: 14px; font-size: 17px; }

/* ⭐ Popup「難度」chip 加大 ✓
   ⚠️ 只限 .nb-chip-group ✓（= #difficultyChips ✓）
      蜜蜂日記 filter 用 .nb-chips ✗ → 唔受影響 ✓
   ⚠️ 兩處 .nb-chip 定義（L144 / L729）→ 呢條要放最後先贏 ✓ */
.nb-chip-group .nb-chip {
  font-size: 17px;                        /* 15 → 17px ✓ */
  padding: 9px 18px;                      /* 5px 13px → 9px 18px ✓ */
  font-weight: 600;
}

@media (max-width: 640px) {
  .nb-chip-group .nb-chip { font-size: 15px; padding: 8px 15px; }
}

/* ══════════════════════════════════════════════
   ⭐ 串字遊戲卡（練習頁獨立卡 ✗ 唔喺科目 Popup 內 ✗）
   位置：選擇科目 之後 ✗ 每日獎勵 之前 ✓
   設計（跟參考圖 ✓）：黃色漸變底 + 左邊標題／描述 + 右邊白色圓形播放掣
   ⚠️ 冇「立即開始」文字按鈕 ✗ 整張卡 ＋ 圓圈都可點 ✓（用戶指定 ✓）
   ⚠️ 黃底深字鐵律 ✓ 唔可以用白字 ✗
   ══════════════════════════════════════════════ */
.nb-spellcard {
  background: linear-gradient(135deg, #FFF8DC 0%, #FBE9A8 55%, #F7DC86 100%);
  border: 0;
  box-shadow: 0 8px 20px rgba(224, 177, 46, .20);
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
  transition: transform .15s ease;
}
.nb-spellcard:active { transform: scale(.985); }
.nb-spellcard__body { flex: 1; min-width: 0; }
.nb-spellcard__title {
  margin: 0 0 7px; font-size: 20px; font-weight: 700;
  color: var(--nb-text); letter-spacing: .01em;
}
.nb-spellcard__desc {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: #4A5568;
}
/* 右邊白色圓形播放掣 ✓ */
.nb-spellcard__go {
  width: 58px; height: 58px; flex: 0 0 auto; border-radius: 50%;
  background: #FFFFFF; color: #1F2933;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(224, 177, 46, .26);
}
.nb-spellcard__go svg { width: 38px; height: 38px; margin-left: 0px; }

/* ── Popup 內嘅玩法列表 ── */
.nb-howto {
  margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.85; color: var(--nb-text);
}
.nb-howto li { margin-bottom: 2px; }
.nb-howto li::marker { color: var(--nb-yellow-dark); font-weight: 800; }
.nb-howto__note {
  margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--nb-soft); text-align: center;
}

/* ── 手機版 ── */
@media (max-width: 400px) {
  .nb-spellcard { gap: 12px; }
  /* ⚠️ 標題唔縮細 ✗ —— 跟 .nb-card__title 一致（20px ✓） */
  .nb-spellcard__desc { font-size: 14px; }
  .nb-spellcard__go { width: 52px; height: 52px; }
  .nb-spellcard__go svg { width: 34px; height: 34px; margin-left: 0px; }
}

/* ══════════════════════════════════════════════
   ⭐ 串字模式（Spelling Bee）— 玩法 2
   聽發音 → 揀字母串字 ｜ 全站黃色系 ✓ 零 emoji ✓
   ⚠️ 聽音卡用【淺黃色】✗ 唔用藍紫漸變 ✗（用戶指定 ✓）
   ══════════════════════════════════════════════ */
.nb-spell { padding: 4px 0 8px; }

/* ── 聽音卡（淺黃漸變 ✓）── */
.nb-spell__audio {
  border-radius: var(--nb-radius); padding: 28px 18px 20px; text-align: center;
  background: linear-gradient(160deg, #FFF6DA 0%, #FDEBBE 100%);
  border: 1px solid #F5DFA0;
  box-shadow: var(--nb-shadow);
  position: relative;   /* ⚠️ 提示圖標要 absolute 定位 ✓ */
}
.nb-spell__play {
  width: 104px; height: 104px; border-radius: 50%; border: 0; cursor: pointer;
  margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#F8D46A, #F0BE3C); color: #3A2E00;
  box-shadow: 0 8px 20px rgba(224, 177, 46, .45);
  transition: transform .12s ease;
}
.nb-spell__play:active { transform: scale(.94); }
.nb-spell__play svg { width: 46px; height: 46px; }

/* ⭐ Lottie 喇叭動畫（img/sound.json ✓ 全黑 ✓ 用戶指定 ✓）
   ⚠️ Lottie 載入成功 → 收起 SVG fallback ✓（.nb-spell__play--anim ✓）
   ⚠️ 大小：65% ✓（用戶指定 2026-10-15：原本 100% 太大 ✗）*/
.nb-spell__playFallback { display: flex; align-items: center; justify-content: center; }
.nb-spell__playAnim { display: none; width: 65%; height: 65%; align-items: center; justify-content: center; }
.nb-spell__playAnim svg { display: block; width: 100% !important; height: 100% !important; }
.nb-spell__play--anim .nb-spell__playFallback { display: none; }
.nb-spell__play--anim .nb-spell__playAnim { display: flex; }
/* ⭐ 播放中脈衝（唔用 emoji ✗ 用 CSS 動畫 ✓）*/
.nb-spell__play--on { animation: nbSpellPulse 1s ease-in-out infinite; }
@keyframes nbSpellPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.nb-spell__hint { margin: 0; font-size: 17px; font-weight: 700; color: var(--nb-text); }

/* ── 空格格（⭐ 必須【一行過】✗ 唔可以拆行 ✗ —— 用戶指定 ✓）── */
.nb-spell__slots {
  margin-top: 16px; background: var(--nb-card); border: 1px solid var(--nb-line);
  border-radius: var(--nb-radius); padding: 18px 10px;
  display: flex; gap: var(--slot-gap, 10px);
  flex-wrap: nowrap;              /* ⭐ 鐵律：唔准拆行 ✗ */
  justify-content: center; align-items: center;
  box-shadow: var(--nb-shadow);
}
.nb-spell__slot {
  flex: 1 1 0;                    /* ⭐ 自動平分該行 ✓ 幾多個字母都一行放得落 ✓ */
  min-width: 0; max-width: 56px;  /* 短字唔會拉得太闊 ✓ */
  height: var(--slot-h, 60px);
  border-radius: 14px;
  border: 2px solid var(--nb-line); background: #FFFDF7;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--slot-fs, 26px); font-weight: 700; font-family: inherit;
  text-transform: uppercase; color: var(--nb-text);
  cursor: pointer; padding: 0; transition: all .15s ease;
}
.nb-spell__slot--active { border-color: var(--nb-yellow); background: #FFF9E6; box-shadow: 0 0 0 3px rgba(245, 200, 66, .25); }
.nb-spell__slot--ok { border-color: var(--nb-green); background: #EDF9EF; color: #2E7D32; }
.nb-spell__slot--bad { border-color: var(--nb-red); background: #FDECEA; color: #C0392B; }

/* ── 字母 tile ── */
.nb-spell__tiles {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 20px; padding-bottom: 4px;
}
.nb-spell__tile {
  width: 60px; height: 60px; border-radius: 16px; border: 0; cursor: pointer;
  background: linear-gradient(#F8D46A, #F0BE3C); color: #3A2E00;
  font-size: 26px; font-weight: 800; font-family: inherit; text-transform: uppercase;
  box-shadow: 0 4px 0 #D9A82A;
  transition: transform .1s ease, opacity .15s ease;
}
.nb-spell__tile:active { transform: translateY(2px); box-shadow: 0 2px 0 #D9A82A; }
.nb-spell__tile--used { opacity: .28; pointer-events: none; box-shadow: none; transform: none; }

/* ── 重置（一直顯示 ✓ 用戶指定 ✓）── */
.nb-spell__resetwrap { text-align: center; margin-top: 14px; min-height: 20px; }
.nb-spell__reset {
  border: 0; background: transparent; color: var(--nb-soft);
  font-size: 13px; font-family: inherit; text-decoration: underline; cursor: pointer;
}

/* ── Sticky 檢查按鈕 ── */
.nb-spell__foot {
  position: sticky; bottom: 0; margin-top: 18px; padding: 16px 0 14px;
  /* ⚠️ 要背景漸變 ✗ 否則會遮住下面嘅 tile ✗ */
  background: linear-gradient(transparent, var(--nb-bg) 42%);
}
.nb-spell__check {
  width: 100%; border: 0; border-radius: 20px; padding: 18px; cursor: pointer;
  background: #FCEBB6; color: var(--nb-text);
  font-size: 18px; font-weight: 800; font-family: inherit;
  box-shadow: var(--nb-shadow-lg);
  transition: background .15s ease, transform .1s ease;
}
.nb-spell__check:active { transform: scale(.99); }
.nb-spell__check--on { background: var(--nb-yellow); }
.nb-spell__check:disabled { opacity: .55; cursor: not-allowed; }

/* ── 提示圖標（聽音卡右上角 ✓）── */
.nb-spell__ask {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid #EBCE7E; background: rgba(255, 255, 255, .85);
  color: var(--nb-yellow-dark); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.nb-spell__ask svg { width: 19px; height: 19px; }
.nb-spell__ask:active { transform: scale(.92); }
.nb-spell__ask:disabled { opacity: .45; cursor: not-allowed; }

/* ── 提示彈出（中文意思 + 第一個字母 ✓）── */
.nb-spell__askbox {
  position: absolute; top: 52px; right: 12px; z-index: 5;
  min-width: 168px; max-width: calc(100% - 24px);
  background: #FFFFFF; border: 1.5px solid #F0D48C; border-radius: 14px;
  padding: 10px 14px; box-shadow: 0 10px 26px rgba(224, 177, 46, .28);
  text-align: left;
}
.nb-spell__askrow { display: flex; align-items: baseline; gap: 10px; }
.nb-spell__askrow + .nb-spell__askrow { margin-top: 6px; }
.nb-spell__askk { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--nb-yellow-dark); }
.nb-spell__askv { font-size: 15px; font-weight: 700; color: var(--nb-text); }
.nb-spell__askv--mono { letter-spacing: .12em; }

/* ── 答對時嘅 +Honey 提示 ── */
.nb-spell__gain {
  display: inline-block; margin-left: 6px; padding: 1px 9px;
  border-radius: 999px; background: #FFF3C4; border: 1px solid #F0D48C;
  font-size: 12.5px; font-weight: 800; color: #8A6D00;
}

/* ── 答錯後鎖死（唔可以重做 ✗ 用戶指定 ✓）── */
.nb-spell__tile--lock { opacity: .35; pointer-events: none; box-shadow: none; transform: none; }
.nb-spell__reset--off { opacity: .4; pointer-events: none; text-decoration: none; }

/* ── Popup 玩法一行（✗ 唔列點 ✗ 用戶指定 ✓）── */
.nb-howto__line {
  margin: 0; font-size: 15px; line-height: 1.7; color: var(--nb-text);
}

/* ── 手機版（375px 起 ✓）── */
@media (max-width: 400px) {
  .nb-spell__slots { padding: 16px 8px; }
  .nb-spell__tile { width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
  .nb-spell__tiles { gap: 8px; }
  .nb-spell__play { width: 88px; height: 88px; }
  .nb-spell__play svg { width: 38px; height: 38px; }
  .nb-spell__ask { width: 32px; height: 32px; top: 10px; right: 10px; }
  .nb-spell__askbox { top: 48px; right: 10px; }
}