/* ==========================================================================
   FastFit — Page styles
   ========================================================================== */

/* ---------- Hero (สำรวจ) ---------- */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(600px 380px at 78% 30%, rgba(255,196,0,.22), transparent 60%),
    radial-gradient(500px 300px at 10% 110%, rgba(255,196,0,.12), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 26px); }
.hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 80px); align-items: center; padding-top: clamp(44px, 3.4vw, 60px); padding-bottom: clamp(44px, 3.4vw, 60px); min-height: 540px; }
.hero__greet { display: inline-flex; align-items: center; gap: 8px; color: #c8cdd6; font: 500 15px/1 var(--font-display); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); padding: 8px 12px; border-radius: 999px; }
.hero__greet .ic { color: var(--brand); width: 18px; height: 18px; }
.hero__title { font-size: clamp(34px, 4.4vw, 68px); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; margin-top: 18px; }
.hero__title em { font-style: normal; color: var(--brand); position: relative; white-space: nowrap; }
.hero__title em::after { content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em; background: rgba(255,196,0,.28); border-radius: 4px; z-index: -1; }
.hero__lead { color: #b9bfca; font-size: clamp(16px, 1.1vw, 18.5px); margin-top: 16px; max-width: 580px; }
.hero__stats { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }
.hero__stat b { display: block; font: 700 28px/1 var(--font-display); color: #fff; }
.hero__stat span { font-size: 13px; color: #8f97a4; }
.hero__cta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.18); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.08); }
.hero__map { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; width: 100%; max-width: clamp(380px, calc((100dvh - var(--header-h) - 230px) * .88), 580px); justify-self: end; }
.hero__map-tools { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; position: relative; z-index: 4; }   /* แถวของตัวเอง เหนือหุ่น (เดิมลอยทับศีรษะหุ่นด้านหลัง) */
.hero__map-cap { grid-column: 1 / -1; text-align: center; color: #8f97a4; font-size: 13.5px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.hero__map-cap .ic { width: 16px; height: 16px; color: var(--brand); }
.hero-chips { margin-top: -26px; position: relative; z-index: 3; }
.hero-chips .chip { box-shadow: var(--shadow-sm); }

/* ---------- หน้าแรกแบบเริ่มจากเป้าหมาย (index.php · explore.js) ---------- */
.hero--goal .hero__in { grid-template-columns: .85fr 1.15fr; min-height: 0; align-items: center; }
.hero--goal .hero__title { font-size: clamp(32px, 3.6vw, 58px); }
.hero__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; }
.hero__steps li { display: flex; align-items: center; gap: 8px; color: #c8cdd6; font: 500 14.5px/1.2 var(--font-display); }
.hero__steps b { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,196,0,.16); color: var(--brand); font-size: 13px; }
.goalpick { padding: 16px; border-radius: 26px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(6px); }
.goalpick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.goalpick__grid .goal-tile:nth-child(7) { grid-column: span 2; }
.goal-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 118px; padding: 14px; border-radius: 18px; text-align: left;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.08); color: #fff; transition: background .18s, border-color .18s, transform .12s; }
.goal-tile:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.goal-tile:active { transform: scale(.98); }
.goal-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.goal-tile__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,196,0,.14); color: var(--brand); }
.goal-tile__ic .ic { width: 22px; height: 22px; }
.goal-tile__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.goal-tile__txt b { font: 600 15.5px/1.2 var(--font-display); }
.goal-tile__txt small { font-size: 12.5px; line-height: 1.35; color: #9aa2ae; }
.goal-tile.is-on { background: var(--brand); border-color: var(--brand); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(255,196,0,.6); }
.goal-tile.is-on .goal-tile__ic { background: rgba(17,19,24,.12); color: var(--ink); }
.goal-tile.is-on .goal-tile__txt small { color: rgba(17,19,24,.72); }
.goal-tile.is-on::after { content: ''; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc400' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.goalpick__opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; margin-top: 14px; }
.goalpick__row { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.goalpick__lbl { display: inline-flex; align-items: center; gap: 6px; color: #aab1bd; font: 500 13px/1 var(--font-display); }
.goalpick__lbl .ic { width: 15px; height: 15px; color: var(--brand); }
.seg--fill { display: flex; width: 100%; }
.seg--fill > .seg__btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 8px; }
.seg--fill .seg__btn small { font-size: 12px; opacity: .8; }
.hero--goal .seg--fill .seg__btn { height: 38px; font-size: 13.5px; }
.goalpick__go { margin-top: 14px; }
.goalpick__go .ic { width: 18px; height: 18px; }
#ready, #smart { scroll-margin-top: calc(var(--header-h) + var(--safe-t) + 12px); }

/* ชุดฝึกพร้อมเล่น: อุปกรณ์ที่ต้องใช้ + กรณีไม่มีชุดที่ตรงตัวเลือก */
.prog__eq { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-2); font-size: 12.5px; }
.prog__eq > span { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); }
.prog__eq .ic { width: 16px; height: 16px; }
.prog__eq small { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; }
.prog__eq--none { color: #15803d; font-weight: 600; }
.prog__eq--none .ic { width: 18px; height: 18px; }
[data-theme="dark"] .prog__eq--none { color: #4ade80; }
.prog__goal { display: inline-flex; align-items: center; gap: 5px; }
.prog__goal .ic { width: 14px; height: 14px; }
.ready-empty { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 22px; border: 1.5px dashed var(--border-2); background: var(--surface); }
.ready-empty[hidden] { display: none; }
.ready-empty__ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--brand-soft); color: var(--brand-strong); }
.ready-empty__ic .ic { width: 24px; height: 24px; }
.ready-empty > div { flex: 1; min-width: 0; }
.ready-empty b { font: 600 16px/1.3 var(--font-display); }
.ready-empty p { margin: 4px 0 0; color: var(--text-3); font-size: 14px; }
.ready-empty .btn { flex: none; }
.prog-row[hidden] { display: none; }
.prog[hidden] { display: none; }
.prog-filter { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.prog-filter .chips { flex: 1 1 420px; min-width: 0; }
.prog-filter__noeq { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1.2 var(--font-display); color: var(--text-2); cursor: pointer; }
.prog-filter__noeq > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.prog-filter__noeq .ic { width: 17px; height: 17px; color: var(--brand-strong); }

/* สำรวจตามกล้ามเนื้อ (แผนที่กล้ามเนื้อย้ายจาก hero มาไว้ที่นี่) */
.musmap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(22px, 3vw, 40px); border-radius: 28px;
  background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.musmap::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 320px at 80% 30%, rgba(255,196,0,.18), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 26px); }
.musmap h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.1; }
.musmap h2 em { font-style: normal; color: var(--brand); }
.musmap p { color: #b9bfca; margin-top: 12px; max-width: 560px; }
.musmap .eyebrow { color: var(--brand); }
.musmap .btn--ghost { color: #fff; border-color: rgba(255,255,255,.18); }
.musmap .btn--ghost:hover { background: rgba(255,255,255,.08); }
.musmap .chips { flex-wrap: wrap; }
.musmap__map { justify-self: center; max-width: 520px; }
@media (max-width: 1199px) {
  .hero--goal .hero__in { grid-template-columns: 1fr; gap: 20px; }
  .hero--goal .hero__lead { max-width: 720px; }
}
@media (max-width: 1023px) {
  .musmap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero--goal .hero__in { padding-top: 22px; padding-bottom: 26px; gap: 16px; }
  .hero__steps { gap: 6px 12px; margin-top: 14px; }
  .hero__steps li { font-size: 13px; gap: 6px; }
  .hero__steps b { width: 22px; height: 22px; font-size: 12px; }
  .goalpick { padding: 10px; border-radius: 20px; }
  .goalpick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .goalpick__grid .goal-tile:nth-child(7) { grid-column: 1 / -1; }
  .goal-tile { min-height: 0; flex-direction: row; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 15px; }
  .goal-tile__ic { flex: none; width: 36px; height: 36px; border-radius: 11px; }
  .goal-tile__ic .ic { width: 20px; height: 20px; }
  .goal-tile__txt b { font-size: 14.5px; }
  .goal-tile__txt small { font-size: 11.5px; }
  .goal-tile.is-on::after { top: 6px; right: 6px; width: 16px; height: 16px; background-size: 10px; }
  .goalpick__opts { grid-template-columns: 1fr; margin-top: 12px; }
  .hero--goal .seg--fill .seg__btn { height: auto; min-height: 38px; padding: 5px 4px; font-size: 12.5px; line-height: 1.15; white-space: normal; text-align: center; }
  .ready-empty { flex-wrap: wrap; padding: 16px; }
  .ready-empty .btn { flex: 1 1 100%; }
  .musmap { padding: 20px 16px; border-radius: 22px; }
}
/* จอแคบมาก: ไอคอนอยู่บน ชื่อเป้าหมายเต็มบรรทัด (ไม่ตัดคำกลางชื่อ) · ช่องสุดท้ายเต็มแถวยังวางแนวนอน */
@media (max-width: 420px) {
  .goal-tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
  .goal-tile__ic { width: 30px; height: 30px; border-radius: 10px; }
  .goal-tile__ic .ic { width: 18px; height: 18px; }
  .goal-tile__txt b { font-size: 14px; }
  .goalpick__grid .goal-tile:nth-child(7) { flex-direction: row; align-items: center; gap: 10px; }
}

/* แบนเนอร์โฆษณา — สไลด์เลื่อนอัตโนมัติ (assets/js/core/promo.js · ตั้งค่าที่ admin/promos.php)
   กรอบจอคอม/แท็บเล็ต 4:1 (รูปแนะนำ 1920×480) · มือถือ ≤767px 2:1 (รูปแนะนำ 1080×540) */
.promo { --promo-dur: 5s; position: relative; }
.promo__stage { position: relative; }
.promo__viewport { position: relative; overflow: hidden; aspect-ratio: 4 / 1; border-radius: 24px; background: var(--surface-2); box-shadow: var(--shadow-sm); isolation: isolate;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.promo__track { display: flex; height: 100%; transition: transform .65s var(--ease); will-change: transform; }
.promo__track.no-anim { transition: none; }
.promo__slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; overflow: hidden; isolation: isolate; }
.promo__link, .promo__link picture { display: block; width: 100%; height: 100%; }
.promo__img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.promo__blur { display: none; }
.promo__tag { position: absolute; left: 14px; top: 12px; z-index: 2; padding: 5px 9px; border-radius: 8px; background: rgba(10, 11, 14, .55); color: #fff;
  font: 600 11.5px/1 var(--font-display); letter-spacing: .03em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.promo__arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: #111318; box-shadow: 0 4px 16px rgba(0, 0, 0, .22); opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s, background .15s; }
.promo__arrow--prev { left: 14px; }
.promo__arrow--next { right: 14px; }
.promo__arrow .ic { width: 22px; height: 22px; stroke-width: 2.2; }
.promo__stage:hover .promo__arrow, .promo__arrow:focus-visible { opacity: 1; transform: none; }
.promo__arrow:hover { background: #fff; }
.promo__arrow:active { transform: scale(.94); }
@media (hover: none) { .promo__arrow { display: none; } }
.promo__bar { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.promo__dots { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.promo__dot { height: 24px; padding: 0 3px; display: grid; place-items: center; }
.promo__dot span { position: relative; display: block; width: 8px; height: 8px; border-radius: 99px; background: var(--border-2); overflow: hidden; transition: width .35s var(--ease), background .2s; }
.promo__dot:hover span { background: var(--text-3); }
.promo__dot.is-on span { width: 34px; background: var(--border-2); }
.promo__dot i { position: absolute; inset: 0; border-radius: inherit; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.promo__dot.is-on i { animation: promoFill var(--promo-dur) linear forwards; }
.promo.is-paused .promo__dot.is-on i { animation-play-state: paused; }
.promo.is-static .promo__dot.is-on i, .promo.is-stopped .promo__dot.is-on i { animation: none; transform: none; }
@keyframes promoFill { to { transform: scaleX(1); } }
.promo__pause { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); transition: color .15s, background .15s; }
.promo__pause:hover { color: var(--text); background: var(--surface-2); }
.promo__pause .ic { width: 15px; height: 15px; }
.promo.is-static .promo__pause { display: none; }
@media (max-width: 767px) {
  .promo__viewport { border-radius: 18px; }
  .promo--m .promo__viewport { aspect-ratio: 2 / 1; }
  .promo--m .promo__slide--fit .promo__img { object-fit: contain; }
  .promo--m .promo__slide--fit .promo__blur { display: block; position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover;
    filter: blur(22px) brightness(.8) saturate(1.1); z-index: -1; }
  .promo__tag { left: 10px; top: 9px; padding: 4px 8px; font-size: 10.5px; }
}

/* ภาพรวม/ทางลัด */
.quick-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.today { position: relative; padding: 22px; border-radius: 22px; background: linear-gradient(135deg, var(--brand) 0%, var(--y-300) 100%); color: var(--ink); overflow: hidden; min-height: 190px; display: flex; flex-direction: column; }
.today::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.25); }
.today__label { font: 600 13px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; opacity: .75; display: flex; align-items: center; gap: 8px; }
.today__title { font: 700 26px/1.15 var(--font-display); margin-top: 10px; position: relative; z-index: 1; }
.today__meta { display: flex; gap: 14px; margin-top: 8px; font-size: 14px; font-weight: 500; opacity: .8; position: relative; z-index: 1; flex-wrap: wrap; }
.today__meta span { display: inline-flex; align-items: center; gap: 5px; }
.today__meta .ic { width: 16px; height: 16px; }
.today__actions { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; position: relative; z-index: 1; }
.today .btn--dark:hover { background: #000; }
.tile { padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; transition: transform .2s var(--ease), box-shadow .2s; min-height: 190px; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile__ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); }
[data-theme="dark"] .tile__ic { color: var(--brand); }
.tile__ic .ic { width: 25px; height: 25px; }
.tile__title { font: 600 18px/1.25 var(--font-display); }
.tile__text { color: var(--text-3); font-size: 14px; }
.tile__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font-display); color: var(--text-2); }
.tile--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.tile--dark .tile__text { color: #9aa2ae; }
.tile--dark .tile__ic { background: rgba(255,196,0,.14); color: var(--brand); }
.tile--dark .tile__go { color: var(--brand); }

/* Smart builder */
.smart { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; border-radius: 26px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.smart__intro { padding: 28px; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.smart__intro::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,196,0,.35), transparent 70%); }
.smart__intro h2 { font-size: 26px; margin-top: 8px; }
.smart__intro p { color: #9aa2ae; margin-top: 10px; }
.smart__form { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.smart__row { display: flex; flex-direction: column; gap: 8px; }
.smart__row > .label { display: flex; align-items: center; gap: 6px; }

/* Program cards */
.prog-row { --per: 5; }
@media (max-width: 1499px) { .prog-row { --per: 4; } }
@media (max-width: 1199px) { .prog-row { --per: 3; } }
@media (max-width: 899px) { .prog-row { --per: 2; --gap: 14px; } }
@media (max-width: 599px) { .prog-row { --per: 1; } }
.prog { scroll-snap-align: start; position: relative; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s; }
.prog:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.prog__cover { height: 118px; position: relative; padding: 16px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.prog__cover::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px); }
.prog__cover > * { position: relative; z-index: 1; }
.prog__goal { align-self: flex-start; }
.prog__name { font: 600 19px/1.2 var(--font-display); }
.prog__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.prog__desc { color: var(--text-3); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prog__meta { display: flex; gap: 12px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.prog__meta span { display: inline-flex; align-items: center; gap: 5px; }
.prog__meta .ic { width: 15px; height: 15px; color: var(--text-3); }
.prog__foot { margin-top: auto; display: flex; gap: 8px; }
.prog__foot .btn { flex: 1; }
.cover-sun { background: linear-gradient(135deg, #ffc400, #ff9f1c); color: var(--ink) !important; }
.cover-graphite { background: linear-gradient(135deg, #2b2f38, #0f1115); }
.cover-silver { background: linear-gradient(135deg, #9aa1ad, #5b6270); }
.cover-lime { background: linear-gradient(135deg, #a3e635, #4d7c0f); }
.cover-sky { background: linear-gradient(135deg, #38bdf8, #1d4ed8); }
.cover-rose { background: linear-gradient(135deg, #fb7185, #be123c); }
.cover-violet { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.cover-amber { background: linear-gradient(135deg, #ffb020, #c2410c); }

/* Home gym banner */
.gym-banner { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center; padding: 30px; border-radius: 28px; background: linear-gradient(120deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); overflow: hidden; }
.gym-banner h2 { font-size: clamp(22px, 2.6vw, 30px); }
.gym-banner p { color: var(--text-2); margin-top: 8px; }
.gym-banner__icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.gym-banner__icons span { aspect-ratio: 1; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); box-shadow: var(--shadow-xs); }
.gym-banner__icons span.on { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.gym-banner__icons .ic { width: 28px; height: 28px; stroke-width: 1.6; }

/* Category tiles */
/* 8 ประเภท: 8 คอลัมน์ · แท็บเล็ต 4 × 2 · มือถือ 2 × 4 (แถวเต็มทุกแถว) */
.cat-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.cat { padding: 16px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; transition: .2s var(--ease); }
.cat:hover { border-color: var(--brand); transform: translateY(-2px); }
.cat .ic { width: 26px; height: 26px; color: var(--brand-strong); }
[data-theme="dark"] .cat .ic { color: var(--brand); }
.cat b { font: 600 15px/1.2 var(--font-display); }
.cat span { font-size: 12.5px; color: var(--text-3); }

/* Exercise of the day */
.eotd { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 28px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.eotd .viewer { border-radius: 0; }
.eotd .viewer__stage { aspect-ratio: auto; height: 100%; min-height: 380px; }
.eotd__info { padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.eotd__name { font-size: 28px; }
.eotd__steps { counter-reset: s; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.eotd__steps li { counter-increment: s; display: flex; gap: 10px; color: var(--text-2); font-size: 14.5px; }
.eotd__steps li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-strong); display: grid; place-items: center; font: 600 13px/1 var(--font-display); }
[data-theme="dark"] .eotd__steps li::before { color: var(--brand); }

/* ---------- Anatomy page ---------- */
.anat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: start; padding-top: 8px; }
.anat__stage { position: sticky; top: calc(var(--header-h) + 16px); background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 18px; overflow: hidden; }
.anat__stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% 30%, var(--brand-soft), transparent 70%); opacity: .6; pointer-events: none; }
.anat__tools { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }
.anat__maps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px auto 0; position: relative; z-index: 1; }
.anat__maps.is-single { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
.anat__3d { position: relative; aspect-ratio: 1 / 1.15; margin: 12px auto 0; border-radius: 22px; overflow: hidden; }
.anat__3d .viewer { position: absolute; inset: 0; }
.anat__3d .viewer__stage { aspect-ratio: auto; height: 100%; }
/* จอใหญ่ (แผงหุ่น/ตัวดู 3D เป็น sticky): คอลัมน์กว้างขึ้นแล้วต้องไม่สูงเกินจอ — มือถือ/แท็บเล็ตใช้ความกว้างเต็มตามเดิม */
@media (min-width: 1024px) {
  .anat__maps { max-width: max(300px, calc((100dvh - var(--header-h) - 220px) / 1.1 + 10px)); }
  .anat__maps.is-single { max-width: max(220px, min(360px, calc((100dvh - var(--header-h) - 220px) / 2.2))); }
  .anat__3d { width: min(100%, max(320px, calc((100dvh - var(--header-h) - 220px) / 1.15))); }
  .exd__viewer .viewer__stage { max-height: max(380px, calc(100dvh - var(--header-h) - 120px)); }
  .equip-detail__visual .viewer__stage { max-height: max(360px, calc(100dvh - var(--header-h) - 120px)); }
}
.anat__legend { display: flex; gap: 14px; justify-content: center; font-size: 12.5px; color: var(--text-3); margin-top: 10px; position: relative; z-index: 1; flex-wrap: wrap; }
.anat__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.anat__panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.anat-card { padding: 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); }
.anat-card__top { display: flex; gap: 14px; align-items: flex-start; }
.anat-card__ic { width: 56px; height: 56px; border-radius: 18px; background: var(--brand); color: var(--ink); display: grid; place-items: center; flex: none; }
.anat-card__ic .ic { width: 28px; height: 28px; }
.anat-card__name { font-size: 26px; }
.anat-card__latin { color: var(--text-3); font-style: italic; font-size: 14px; margin-top: 3px; }
.anat-card__group { margin-top: 8px; }
.anat-card__desc { color: var(--text-2); margin-top: 16px; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.fact { padding: 14px; border-radius: 16px; background: var(--surface-2); }
.fact__h { display: flex; align-items: center; gap: 7px; font: 600 13.5px/1 var(--font-display); color: var(--text); margin-bottom: 7px; }
.fact__h .ic { width: 17px; height: 17px; color: var(--brand-strong); }
[data-theme="dark"] .fact__h .ic { color: var(--brand); }
.fact p { font-size: 13.5px; color: var(--text-2); }
.fact--wide { grid-column: 1 / -1; }
.fun-fact { margin-top: 12px; display: flex; gap: 10px; padding: 14px; border-radius: 16px; background: var(--brand-soft); color: var(--text); font-size: 14px; }
.fun-fact .ic { color: var(--brand-strong); width: 20px; height: 20px; flex: none; margin-top: 2px; }
.ladder { display: flex; flex-direction: column; gap: 18px; }
.ladder__lv { display: flex; flex-direction: column; gap: 10px; }
.ladder__head { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--font-display); }
.ladder__head .line { flex: 1; height: 1px; background: var(--border); }
.ladder__list { display: flex; flex-direction: column; gap: 8px; }
.ladder-item { display: flex; align-items: center; gap: 12px; padding: 8px; padding-right: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: border-color .15s, background .15s; }
.ladder-item:hover { border-color: var(--border-2); }
.ladder-item.is-picked { border-color: var(--brand); background: var(--brand-soft); }
.ladder-item__thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--stage-a), var(--stage-b)); flex: none; }
.ladder-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ladder-item__main { flex: 1; min-width: 0; }
.ladder-item__name { font: 500 15px/1.3 var(--font-display); }
.ladder-item__sub { font-size: 12.5px; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.pick-btn { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--border-2); display: grid; place-items: center; color: var(--text-3); flex: none; transition: .15s; }
.pick-btn:hover { border-color: var(--brand); color: var(--text); }
.is-picked .pick-btn { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.pick-btn .ic { width: 19px; height: 19px; stroke-width: 2.3; }
.pick-tray { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); animation: toastIn .3s var(--ease); }
.pick-tray__count { width: 30px; height: 30px; border-radius: 10px; background: var(--brand); color: var(--ink); display: grid; place-items: center; font: 700 14px/1 var(--font-display); }
.pick-tray__text { flex: 1; font-size: 14px; color: #c8cdd6; }
.muscle-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mg { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: .15s; text-align: left; }
.mg:hover { border-color: var(--brand); }
.mg.is-on { background: var(--brand-soft); border-color: var(--brand); }
.mg__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; }
.mg b { font: 500 14.5px/1.2 var(--font-display); display: block; }
.mg span { font-size: 12px; color: var(--text-3); }

/* ---------- Library ---------- */
.lib-top { position: sticky; top: var(--header-h); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 12px 0; margin-bottom: 8px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.lib-top.is-stuck { border-bottom-color: var(--border); }
.lib-search { display: flex; gap: 10px; }
.lib-search .input-icon { flex: 1; }
.lib-search .input { height: 50px; border-radius: 15px; font-size: 16px; background: var(--surface); }
.lib-filters { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.lib-filters .chips { flex: 1; min-width: 0; }
.lib-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 16px; flex-wrap: wrap; }
.lib-count { color: var(--text-2); font-size: 14.5px; }
.lib-count b { color: var(--text); font-family: var(--font-display); }
.lib-sort { display: flex; gap: 8px; align-items: center; }
.lib-sort .select { height: 40px; width: auto; font-size: 14px; border-radius: 12px; padding-right: 36px; }
.filter-group { margin-bottom: 20px; }
.filter-group h4 { font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.load-more { display: flex; justify-content: center; padding: 24px 0 8px; }
.owned-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; height: 40px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font: 500 14px/1 var(--font-display); white-space: nowrap; }
.owned-toggle .switch { transform: scale(.85); }

/* ประเภทการฝึก — ปุ่มลัดบนหน้าคลังท่า (ทั้งหมด · เวท/ยิม · โยคะ · แอโรบิค · คาร์ดิโอ · ยืดเหยียด) */
.lib-modes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 2px 0 4px; }
.lib-mode { --mc: var(--brand); display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 10px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-align: left; transition: border-color .18s, background .18s, box-shadow .18s, transform .12s; }
.lib-mode:hover { border-color: color-mix(in srgb, var(--mc) 60%, var(--border)); }
.lib-mode:active { transform: scale(.98); }
.lib-mode:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lib-mode__ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--mc) 16%, transparent); color: var(--mc); }
.lib-mode__ic .ic { width: 22px; height: 22px; }
.lib-mode__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.lib-mode__t b { font: 600 15.5px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-mode__t small { font-size: 12.5px; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.lib-mode.is-on { background: var(--brand); border-color: var(--brand); color: var(--ink); box-shadow: 0 10px 28px -14px rgba(255,196,0,.7); }
.lib-mode.is-on .lib-mode__ic { background: rgba(15,17,21,.12); color: var(--ink); }
.lib-mode.is-on .lib-mode__t small { color: rgba(15,17,21,.72); }
.lib-mode--all { --mc: var(--text-2); }
.lib-mode--yoga { --mc: #a78bfa; }
.lib-mode--aerobic { --mc: #fb7185; }
.lib-mode--cardio { --mc: #fb923c; }
.lib-mode--stretch { --mc: #34d399; }
[data-theme="light"] .lib-mode--gym { --mc: #c28e00; }
[data-theme="light"] .lib-mode--yoga { --mc: #7c3aed; }
[data-theme="light"] .lib-mode--aerobic { --mc: #e11d48; }
[data-theme="light"] .lib-mode--cardio { --mc: #ea580c; }
[data-theme="light"] .lib-mode--stretch { --mc: #059669; }

/* ทางลัดไปโปรแกรมพร้อมเล่นของประเภทที่เลือก */
.lib-cta { --mc: var(--brand); display: flex; align-items: center; gap: 14px; margin: 10px 0 0; padding: 12px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--mc) 35%, var(--border)); background: linear-gradient(115deg, color-mix(in srgb, var(--mc) 12%, var(--surface)), var(--surface) 70%); color: var(--text); transition: border-color .18s, box-shadow .18s; }
.lib-cta:hover { border-color: var(--mc); box-shadow: var(--shadow-sm); }
.lib-cta__ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--mc); color: #fff; }
.lib-cta__ic .ic { width: 22px; height: 22px; }
.lib-cta__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-cta__t b { font: 600 15px/1.3 var(--font-display); }
.lib-cta__t small { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.lib-cta__btn { flex: none; background: var(--mc); border-color: transparent; color: #fff; }
.lib-cta--gym .lib-cta__ic, .lib-cta--gym .lib-cta__btn { color: var(--ink); }
.lib-cta--yoga { --mc: #8b5cf6; }
.lib-cta--aerobic { --mc: #f43f5e; }
.lib-cta--cardio { --mc: #f97316; }
.lib-cta--stretch { --mc: #10b981; }
@media (max-width: 1199px) {
  .lib-mode { flex-direction: column; justify-content: center; gap: 5px; min-height: 0; padding: 9px 6px; border-radius: 16px; text-align: center; }
  .lib-mode__t { align-items: center; gap: 2px; }
  .lib-mode__t b { font-size: 14.5px; }
  .lib-mode__t small { font-size: 12px; }
  .lib-mode__ic { width: 32px; height: 32px; border-radius: 10px; }
  .lib-mode__ic .ic { width: 19px; height: 19px; }
}
@media (max-width: 767px) { .lib-modes { gap: 8px; } }
@media (max-width: 640px) {
  .lib-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lib-mode { gap: 4px; padding: 8px 4px; border-radius: 14px; }
  .lib-mode__t { gap: 1px; }
  .lib-mode__t b { font-size: 13.5px; }
  .lib-mode__t small { font-size: 11px; }
  .lib-mode__ic { width: 28px; height: 28px; border-radius: 9px; }
  .lib-mode__ic .ic { width: 17px; height: 17px; }
  /* มือถือ: ทางลัดเหลือบรรทัดเดียว (ไอคอน · หัวข้อ · ลูกศร) */
  .lib-cta { gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 15px; }
  .lib-cta__ic { width: 34px; height: 34px; border-radius: 10px; }
  .lib-cta__ic .ic { width: 19px; height: 19px; }
  .lib-cta__t b { font-size: 14px; }
  .lib-cta__t small, .lib-cta__btn [data-cta-btn] { display: none; }
  .lib-cta__btn { width: 34px; padding: 0; justify-content: center; }
}

/* ---------- Exercise detail ---------- */
.exd { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 28px; align-items: start; padding-top: 12px; }
.exd__viewer { position: sticky; top: calc(var(--header-h) + 14px); }
.exd__viewer .viewer__stage { aspect-ratio: 1 / .98; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-3); padding-top: 18px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--text); }
.crumbs .ic { width: 14px; height: 14px; }
.exd__title { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.exd__en { color: var(--text-3); margin-top: 4px; font-size: 15px; }
.exd__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.exd__actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-top: 18px; }
/* ปุ่ม 3 ปุ่มจัดตามความกว้างคอลัมน์ข้อมูลจริง (จอ 1024–1200 คอลัมน์แคบ → ปุ่มฟังคำอธิบายลงบรรทัดใหม่ ไม่ล้นจอ) */
.exd__info { container: exinfo / inline-size; }
@container exinfo (max-width: 529px) {
  .exd__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exd__actions .btn:last-child { grid-column: 1 / -1; }
}
.rx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.rx { padding: 14px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.rx b { display: block; font: 700 22px/1.1 var(--font-display); color: var(--text); }
.rx span { font-size: 12.5px; color: var(--text-3); }
.steps-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.step-item { display: flex; gap: 14px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; text-align: left; width: 100%; }
.step-item:hover { border-color: var(--border-2); }
.step-item.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }
.step-item__n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); font: 700 15px/1 var(--font-display); flex: none; transition: .2s; }
.step-item.is-on .step-item__n { background: var(--brand); color: var(--ink); }
.step-item__t { font-size: 15px; color: var(--text); align-self: center; }
.info-block { margin-top: 26px; }
.info-block h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.info-block h3 .ic { color: var(--brand-strong); }
[data-theme="dark"] .info-block h3 .ic { color: var(--brand); }
.bullets { display: flex; flex-direction: column; gap: 8px; }
.bullets li { display: flex; gap: 10px; color: var(--text-2); font-size: 14.5px; }
.bullets li .ic { color: var(--success); width: 18px; height: 18px; flex: none; margin-top: 3px; }
.bullets--bad li .ic { color: var(--danger); }
.muscle-box { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.muscle-box .bodymap-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.muscle-tags { display: flex; flex-direction: column; gap: 10px; }
.muscle-tags h5 { font: 600 12.5px/1 var(--font-display); color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.m-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font: 500 13.5px/1 var(--font-display); margin: 0 6px 6px 0; }
.m-tag i { width: 9px; height: 9px; border-radius: 3px; background: var(--brand); }
/* กล้ามเนื้อหลัก = เหลือง (แบรนด์) · กล้ามเนื้อรอง = ฟ้า — ต่างสีชัดเจน (เดิมเหลืองทั้งคู่ แยกไม่ออก) ทั้งแผนที่ 2D หุ่น 3D และป้าย */
.m-tag { background: rgba(255,196,0,.14); }
.m-tag--sec { background: rgba(59,158,255,.12); }
.m-tag--sec i { background: var(--mus-sec); }
/* ---------- Tier S–D (หน้าแผนที่กล้ามเนื้อ · หน้าท่า) — includes/tiers.php ---------- */
.tierlist { display: flex; flex-direction: column; gap: 10px; }
.tier { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: start; }
.tier__badge { position: sticky; top: calc(var(--header-h) + var(--safe-t) + 10px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 62px; border-radius: 16px; color: var(--tier-ink, #fff); background: var(--tier); box-shadow: 0 8px 22px -14px var(--tier); }
.tier__badge b { font: 800 26px/1 var(--font-display); }
.tier__badge small { font: 600 11px/1.1 var(--font-display); opacity: .9; text-align: center; padding: 0 4px; }
.tier__items { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tier__it.is-extra { display: none; }
.tier.is-open .tier__it.is-extra { display: block; }
.tier__it .ladder-item { border-left: 3px solid var(--tier); }
.tier__more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--border-2); color: var(--text-2); font: 500 13.5px/1 var(--font-display); }
.tier__more:hover { border-color: var(--tier); color: var(--text); }
.tier__more .ic { width: 16px; height: 16px; }
.tier--S { --tier: #ff4d6d; }
.tier--A { --tier: #ff8a3d; }
.tier--B { --tier: #ffc400; --tier-ink: #111318; }
.tier--C { --tier: #3ecf7a; --tier-ink: #0b2415; }
.tier--D { --tier: #94a3b8; --tier-ink: #111318; }
.tier-why { border-radius: 14px; background: var(--surface-2); padding: 10px 14px; font-size: 13.5px; color: var(--text-2); }
.tier-why summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 500 14px/1.3 var(--font-display); color: var(--text); list-style: none; }
.tier-why summary::-webkit-details-marker { display: none; }
.tier-why summary .ic { width: 17px; height: 17px; color: var(--brand-strong); }
.tier-why p { margin: 8px 0 2px; line-height: 1.6; }
/* ป้าย Tier บนหน้าท่า */
.tier-chip { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 2px; padding: 0 5px; border-radius: 6px; font: 800 11.5px/1 var(--font-display); color: #fff; background: var(--tier); }
.tier-chip--S { --tier: #ff4d6d; } .tier-chip--A { --tier: #ff8a3d; } .tier-chip--B { --tier: #ffc400; color: #111318; } .tier-chip--C { --tier: #3ecf7a; color: #0b2415; } .tier-chip--D { --tier: #94a3b8; color: #111318; }
.tier-badge { font-weight: 600; border-color: transparent; }
.tier-badge .ic { width: 15px; height: 15px; }
.tier-badge--S { background: rgba(255,77,109,.14); color: #d6214a; } .tier-badge--A { background: rgba(255,138,61,.16); color: #c2560d; }
.tier-badge--B { background: rgba(255,196,0,.18); color: #8a6400; } .tier-badge--C { background: rgba(62,207,122,.16); color: #15803d; } .tier-badge--D { background: rgba(148,163,184,.2); color: var(--text-2); }
[data-theme="dark"] .tier-badge--S { color: #ff8fa3; } [data-theme="dark"] .tier-badge--A { color: #ffb27d; } [data-theme="dark"] .tier-badge--B { color: var(--brand); } [data-theme="dark"] .tier-badge--C { color: #6ee7a0; }
.m-hint { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.m-tierlink { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font: 500 14px/1.3 var(--font-display); color: var(--text); }
.m-tierlink:hover { background: var(--brand-soft); }
.m-tierlink > .ic:first-child { width: 18px; height: 18px; color: #ff4d6d; }
.m-tierlink > span { flex: 1; min-width: 0; }
.m-tierlink > .ic:last-child { width: 16px; height: 16px; color: var(--text-3); }
@media (max-width: 420px) {
  .tier { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
  .tier__badge { min-height: 52px; border-radius: 13px; }
  .tier__badge b { font-size: 22px; }
  .tier__badge small { font-size: 9.5px; }
}
.equip-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.equip-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font: 500 14px/1 var(--font-display); }
.equip-chip__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); }
.equip-chip__ic .ic { width: 22px; height: 22px; stroke-width: 1.6; }
.equip-chip.is-owned .equip-chip__ic { background: var(--brand); color: var(--ink); }
.goal-rx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.goal-rx div { padding: 12px; border-radius: 14px; background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.goal-rx b { display: block; font: 600 14.5px/1.3 var(--font-display); color: var(--text); }
.speak-btn.is-speaking { background: var(--brand); color: var(--ink); }
.speak-btn.is-speaking .ic { animation: pulseIc 1s infinite; }
@keyframes pulseIc { 50% { transform: scale(1.18); } }

/* ---------- Home gym ---------- */
.gym-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; padding: 30px; margin-top: 14px; border-radius: 28px; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.gym-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 300px at 85% 40%, rgba(255,196,0,.25), transparent 65%), repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 24px); }
.gym-hero > * { position: relative; }
.gym-hero h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; }
.gym-hero h1 em { font-style: normal; color: var(--brand); }
.gym-hero p { color: #aab1bd; margin-top: 12px; }
.gym-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gym-stat { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.gym-stat b { display: block; font: 700 30px/1 var(--font-display); color: var(--brand); }
.gym-stat span { font-size: 13px; color: #aab1bd; }
.equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.equip-card { position: relative; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.equip-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.equip-card.is-owned { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.equip-card__ic { width: 60px; height: 60px; border-radius: 18px; background: var(--surface-2); display: grid; place-items: center; color: var(--text); transition: .2s; }
.equip-card.is-owned .equip-card__ic { background: var(--brand); color: var(--ink); }
.equip-card__ic .ic { width: 34px; height: 34px; stroke-width: 1.5; }
.equip-card__name { font: 600 16px/1.25 var(--font-display); }
.equip-card__count { font-size: 13px; color: var(--text-3); }
.equip-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 8px; }
.own-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 11px; border: 1.5px solid var(--border-2); font: 500 13.5px/1 var(--font-display); color: var(--text-2); transition: .15s; }
.own-btn .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.equip-card.is-owned .own-btn { background: var(--ink); border-color: var(--ink); color: var(--brand); }
[data-theme="dark"] .equip-card.is-owned .own-btn { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.equip-detail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; padding-top: 14px; }
.equip-detail__visual { position: sticky; top: calc(var(--header-h) + 14px); }
.equip-detail__visual .viewer__stage { aspect-ratio: 1 / .9; }
.spec-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.spec { min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.spec b { display: block; font: 600 15px/1.2 var(--font-display); }
.spec span { font-size: 12px; color: var(--text-3); }
.price-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); margin-right: 3px; }
.price-dots i.on { background: var(--brand); }

/* ---------- Sets ---------- */
.flow-card { padding: 20px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.flow-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.folder-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.folder-tabs::-webkit-scrollbar { display: none; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.set-card { position: relative; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s; }
.set-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.set-card__cover { height: 118px; padding: 12px 10px 12px 14px; display: flex; align-items: flex-start; justify-content: space-between; position: relative; overflow: hidden; color: #fff; }
.set-card__cover::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px); pointer-events: none; }
.set-card__cover > * { position: relative; z-index: 1; }
/* ภาพปกที่ผู้ใช้ตั้งเอง: ไล่เงาบน/ล่างให้ป้าย เมนู และชื่ออ่านออกเสมอ */
.set-card__cover.has-img, .set-hero.has-img, .prog__cover.has-img, .cover-dlg__preview.has-img { background: linear-gradient(180deg, rgba(8,9,12,.6) 0%, rgba(8,9,12,.08) 42%, rgba(8,9,12,.1) 60%, rgba(8,9,12,.5) 100%), var(--cover) center / cover no-repeat; color: #fff !important; }
.set-card__cover.has-img::after, .set-hero.has-img::after, .prog__cover.has-img::after, .cover-dlg__preview.has-img::after { display: none; }
.prog__cover.has-img .prog__name { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
/* หน้ารายละเอียดชุด: ตัวหนังสืออยู่ฝั่งซ้าย → ไล่เงาเข้มจากซ้าย */
.set-hero.has-img { background: linear-gradient(90deg, rgba(8,9,12,.88) 0%, rgba(8,9,12,.66) 42%, rgba(8,9,12,.22) 100%), var(--cover) center / cover no-repeat; }
/* รูปท่าในชุด: เรียงซ้อนเป็นวงกลม "อยู่ในปก" มุมขวาล่าง (ไม่ล้นลงไปทับปุ่ม) */
.set-card__cover .set-card__thumbs { position: absolute; right: 12px; bottom: 10px; display: flex; z-index: 2; }
.set-card__thumbs span { width: 46px; height: 46px; flex: none; border-radius: 50%; margin-left: -12px; overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--stage-a), var(--stage-b)); box-shadow: 0 0 0 2.5px rgba(255,255,255,.92), 0 6px 14px -4px rgba(0,0,0,.45); }
.set-card__thumbs span:first-child { margin-left: 0; }
.set-card__thumbs img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transform-origin: 50% 50%; }
.set-card__thumbs .set-card__more { display: grid; place-items: center; font: 700 12.5px/1 var(--font-display); color: #fff; background: rgba(15,17,21,.8); }
.set-card__body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.set-card__name { font: 600 18px/1.25 var(--font-display); }
.set-card__meta { display: flex; gap: 12px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.set-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.set-card__meta .ic { width: 15px; height: 15px; color: var(--text-3); }
.set-card__muscles { display: flex; gap: 5px; flex-wrap: wrap; }
.set-card__foot { display: flex; gap: 8px; margin-top: auto; padding: 4px 16px 16px; }
.set-card__foot .btn:first-child { flex: 1; }
.set-card__menu { color: inherit; }
.set-card__pin { position: absolute; top: 12px; right: 52px; z-index: 2; color: var(--brand); }
.menu-pop { position: absolute; right: 12px; top: 50px; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 200px; animation: popIn .18s var(--ease); }
.menu-pop button, .menu-pop a { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font: 500 14.5px/1 var(--font-display); color: var(--text); }
.menu-pop button:hover, .menu-pop a:hover { background: var(--surface-2); }
.menu-pop .ic { width: 18px; height: 18px; color: var(--text-3); }
.menu-pop .danger { color: var(--danger); }
.menu-pop .danger .ic { color: var(--danger); }
.menu-pop hr { border: 0; height: 1px; background: var(--border); margin: 4px 0; }

/* Builder */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.builder__main { min-width: 0; }
.builder__side { position: sticky; top: calc(var(--header-h) + 14px); }
.builder-steps { padding: 14px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 18px; }
.panel { padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.panel + .panel { margin-top: 16px; }
.panel__title { font-size: 19px; margin-bottom: 4px; }
.panel__sub { color: var(--text-3); font-size: 14px; margin-bottom: 16px; }
.color-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.cover-dlg__preview { position: relative; height: 150px; border-radius: 18px; overflow: hidden; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; color: #fff; }
.cover-dlg__preview::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px); pointer-events: none; }
.cover-dlg__preview > * { position: relative; z-index: 1; }
.cover-dlg__name { font: 600 20px/1.2 var(--font-display); text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.cover-dlg__row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.color-pick { width: 38px; height: 38px; border-radius: 12px; border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.color-pick.is-on { border-color: var(--text); }
.goal-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.goal-pick { padding: 14px; border-radius: 16px; border: 1.5px solid var(--border); text-align: left; display: flex; flex-direction: column; gap: 6px; transition: .15s; }
.goal-pick .ic { width: 22px; height: 22px; color: var(--text-3); }
.goal-pick b { font: 600 14.5px/1.2 var(--font-display); }
.goal-pick span { font-size: 12px; color: var(--text-3); }
.goal-pick.is-on { border-color: var(--brand); background: var(--brand-soft); }
.goal-pick.is-on .ic { color: var(--brand-strong); }
.summary { padding: 20px; border-radius: 22px; background: var(--ink); color: #fff; }
.summary h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.summary h3 .ic { color: var(--brand); }
.summary__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.summary__stats div { padding: 12px 8px; border-radius: 14px; background: rgba(255,255,255,.06); text-align: center; }
.summary__stats b { display: block; font: 700 22px/1 var(--font-display); color: var(--brand); }
.summary__stats span { font-size: 12px; color: #9aa2ae; }
.summary__map { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 240px; margin: 4px auto 0; }
.summary .btn--primary { width: 100%; margin-top: 14px; }
.block-sec { margin-top: 18px; }
.block-sec__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.block-sec__head h4 { font-size: 15px; }
.block-sec__dot { width: 10px; height: 10px; border-radius: 50%; }
.block-sec__count { color: var(--text-3); font-size: 13px; }
.cfg-list { display: flex; flex-direction: column; gap: 10px; min-height: 60px; border-radius: 18px; transition: background .2s; }
.cfg-list.is-drop { background: var(--brand-soft); outline: 2px dashed var(--brand); outline-offset: 4px; }
.cfg-item { display: grid; grid-template-columns: auto 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); position: relative; }
.cfg-item.is-dragging { opacity: .5; }
.cfg-item.is-over { box-shadow: 0 -3px 0 var(--brand); }
.cfg-item__grip { color: var(--text-3); cursor: grab; touch-action: none; padding: 6px 2px; }
.cfg-item__thumb { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--stage-a), var(--stage-b)); }
.cfg-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cfg-item__name { font: 500 15px/1.3 var(--font-display); }
.cfg-item__fields { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.cfg-field { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.cfg-item__actions { display: flex; flex-direction: column; gap: 4px; }
.ss-tag { position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 4px; height: 70%; border-radius: 4px; background: var(--brand); }

/* Set detail timeline */
.set-hero { position: relative; border-radius: 28px; overflow: hidden; padding: 28px; color: #fff; margin-top: 14px; }
.set-hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 20px); pointer-events: none; }
.set-hero > * { position: relative; z-index: 1; }
.set-hero h1 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 10px; }
.set-hero p { opacity: .8; margin-top: 8px; max-width: 640px; }
.set-hero__stats { display: flex; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.set-hero__stats b { display: block; font: 700 26px/1 var(--font-display); }
.set-hero__stats span { font-size: 13px; opacity: .75; }
.set-hero__actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.set-hero .btn--ghost { color: inherit; border-color: currentColor; opacity: .9; }
.set-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 24px; }
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--border); border-radius: 2px; }
.tl-block { margin-bottom: 22px; }
.tl-block__head { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 15px/1 var(--font-display); }
.tl-block__head::before { content: ''; position: absolute; left: -26px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 4px solid var(--brand); }
.tl-block__head span { font-weight: 500; color: var(--text-3); font-size: 13px; }
.tl-item { position: relative; display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 10px; transition: border-color .15s; }
.tl-item:hover { border-color: var(--border-2); }
.tl-item::before { content: ''; position: absolute; left: -23px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--border-2); }
.tl-item__thumb { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--stage-a), var(--stage-b)); flex: none; }
.tl-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tl-item__main { flex: 1; min-width: 0; }
.tl-item__name { font: 500 15.5px/1.3 var(--font-display); }
.tl-item__rx { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--text-2); }
.tl-item__rx span { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); padding: 4px 8px; border-radius: 8px; }
.tl-item__rx .ic { width: 14px; height: 14px; color: var(--text-3); }
.tl-rest { font-size: 12.5px; color: var(--text-3); margin: -4px 0 10px 6px; display: flex; align-items: center; gap: 6px; }
.tl-rest .ic { width: 14px; height: 14px; }

/* ---------- Schedule ---------- */
.sched-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); display: flex; gap: 12px; align-items: center; }
.stat-card__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); flex: none; }
[data-theme="dark"] .stat-card__ic { color: var(--brand); }
.stat-card__ic .ic { width: 23px; height: 23px; }
.stat-card b { display: block; font: 700 24px/1 var(--font-display); }
.stat-card span { font-size: 12.5px; color: var(--text-3); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.day { min-height: 210px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s; }
.day.is-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.day.is-drop { background: var(--brand-soft); }
.day__head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px 6px; border-bottom: 1px solid var(--border); }
.day__name { font: 600 14px/1 var(--font-display); }
.day__date { font: 600 13px/1 var(--font-display); color: var(--text-3); }
.day.is-today .day__date { color: var(--ink); background: var(--brand); padding: 4px 7px; border-radius: 8px; }
.day__items { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.plan { position: relative; padding: 10px 10px 10px 12px; border-radius: 14px; color: #fff; font: 500 13.5px/1.3 var(--font-display); cursor: pointer; overflow: hidden; }
.plan small { display: block; font-size: 11.5px; opacity: .8; font-weight: 400; margin-top: 3px; }
.plan.is-done::after { content: ''; position: absolute; right: 8px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.plan--once { outline: 2px dashed rgba(255,255,255,.5); outline-offset: -4px; }
.day__add { height: 36px; border-radius: 12px; border: 1.5px dashed var(--border-2); color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 13px/1 var(--font-display); }
.day__add:hover { border-color: var(--brand); color: var(--text); }
.day__rest { font-size: 12.5px; color: var(--text-3); text-align: center; padding: 12px 4px; }
.cal { border-radius: 22px; background: var(--surface); border: 1px solid var(--border); padding: 16px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__dow { font: 600 12px/1 var(--font-display); color: var(--text-3); text-align: center; padding: 6px 0; }
.cal__cell { aspect-ratio: 1; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 500 14px/1 var(--font-display); position: relative; }
.cal__cell.is-out { opacity: .35; }
.cal__cell.is-today { background: var(--brand); color: var(--ink); }
.cal__dots { display: flex; gap: 3px; }
.cal__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.cal__dots i.done { background: var(--success); }
.cal__dots i.plan { background: var(--brand-strong); }
.daypick { display: none; }

/* ---------- Workout player ---------- */
.player-body { background: #0b0c0f; color: #fff; overflow: hidden; }
.player { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(90% 60% at 50% 35%, #232730 0%, #0b0c0f 70%); padding-top: var(--safe-t); }
.player__top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.player__title { flex: 1; min-width: 0; }
.player__title b { display: block; font: 600 15px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__title span { font-size: 12.5px; color: #8f97a4; }
.player .icon-btn { color: #c8cdd6; background: rgba(255,255,255,.06); }
.player .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.player .icon-btn.is-off { color: #6b7280; }
.player__progress { display: flex; gap: 4px; padding: 0 16px; }
.player__progress i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
.player__progress i.done { background: var(--brand); }
.player__progress i.cur::after { content: ''; position: absolute; inset: 0; width: var(--p, 0%); background: var(--brand); transition: width .3s; }
.player__stage { position: relative; min-height: 0; }
.player__stage .viewer { position: absolute; inset: 0; border-radius: 0; background: transparent; }
.player__stage .viewer::before { display: none; }
.player__stage .viewer__stage { aspect-ratio: auto; height: 100%; }
.player__hud { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: space-between; padding: 0 16px; z-index: 5; pointer-events: none; }
.hud-chip { pointer-events: auto; background: rgba(15,17,21,.7); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.08); padding: 8px 12px; border-radius: 14px; font: 500 13px/1 var(--font-display); color: #c8cdd6; display: inline-flex; align-items: center; gap: 7px; }
.hud-chip .ic { width: 16px; height: 16px; color: var(--brand); }
.player__coach { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; max-width: min(90%, 520px); background: rgba(15,17,21,.78); backdrop-filter: blur(12px); border: 1px solid rgba(255,196,0,.25); color: #fff; padding: 10px 14px 10px 10px; border-radius: 18px; display: flex; align-items: center; gap: 10px; font-size: 14.5px; opacity: 0; transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.player__coach.is-on { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.coach-avatar { width: 34px; height: 34px; border-radius: 12px; background: var(--brand); color: var(--ink); display: grid; place-items: center; flex: none; position: relative; }
.coach-avatar .ic { width: 19px; height: 19px; }
.coach-avatar.is-talking::after { content: ''; position: absolute; inset: -4px; border-radius: 15px; border: 2px solid var(--brand); animation: talk 1s infinite; }
@keyframes talk { 0% { opacity: .9; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.25); } }
.player__panel { padding: 14px 16px calc(16px + var(--safe-b)); background: linear-gradient(0deg, #0b0c0f 70%, transparent); }
.player__ex { text-align: center; }
.player__ex-name { font: 600 clamp(20px, 3.2vw, 28px)/1.2 var(--font-display); }
.player__ex-sub { color: #8f97a4; font-size: 14px; margin-top: 4px; }
.player__count { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 12px 0 14px; }
.big-num { font: 700 clamp(58px, 10vw, 88px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.big-num small { font-size: .38em; color: #8f97a4; font-weight: 500; letter-spacing: 0; }
.player__count .ring { --size: 132px; --stroke: 10px; }
.player__count .ring .ring__bg { stroke: rgba(255,255,255,.1); }
.player__controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pc-btn { width: 56px; height: 56px; border-radius: 18px; background: rgba(255,255,255,.07); color: #fff; display: grid; place-items: center; transition: transform .12s, background .2s; }
.pc-btn:hover { background: rgba(255,255,255,.12); }
.pc-btn:active { transform: scale(.93); }
.pc-btn .ic { width: 24px; height: 24px; }
.pc-btn--main { width: auto; min-width: 190px; padding: 0 24px; background: var(--brand); color: var(--ink); font: 600 17px/1 var(--font-display); gap: 10px; display: inline-flex; align-items: center; justify-content: center; }
.pc-btn--main:hover { background: var(--y-400); }
.player__next { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 14px; color: #8f97a4; font-size: 13.5px; }
.player__next b { color: #e5e7eb; font-weight: 500; }
.overlay-screen { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: rgba(8,9,12,.86); backdrop-filter: blur(10px); animation: fadeIn .3s; }
.overlay-screen h2 { font-size: clamp(26px, 4vw, 40px); }
.overlay-screen p { color: #9aa2ae; margin-top: 8px; }
.countdown-num { font: 700 150px/1 var(--font-display); color: var(--brand); animation: cd 1s ease-out infinite; }
@keyframes cd { 0% { transform: scale(1.4); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(.85); opacity: 0; } }
.rest-screen .ring { --size: 220px; --stroke: 14px; margin: 18px auto; }
.rest-screen .ring .ring__bg { stroke: rgba(255,255,255,.1); }
.rest-actions { display: flex; gap: 10px; margin-top: 10px; }
.rest-next { margin-top: 20px; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255,255,255,.06); }
.rest-next img { width: 56px; height: 56px; border-radius: 12px; background: radial-gradient(circle, #2a2e36, #16181d); object-fit: cover; }
.done-screen .trophy { width: 110px; height: 110px; border-radius: 34px; background: var(--brand); color: var(--ink); display: grid; place-items: center; box-shadow: 0 20px 50px -10px rgba(255,196,0,.6); animation: pop .6s var(--ease); }
.done-screen .trophy .ic { width: 56px; height: 56px; }
@keyframes pop { 0% { transform: scale(.4) rotate(-20deg); } 70% { transform: scale(1.1) rotate(4deg); } 100% { transform: none; } }
.done-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0; width: min(560px, 100%); }
.done-stats div { padding: 14px 8px; border-radius: 16px; background: rgba(255,255,255,.06); }
.done-stats b { display: block; font: 700 26px/1 var(--font-display); color: var(--brand); }
.done-stats span { font-size: 12px; color: #9aa2ae; }
.rate { display: flex; gap: 6px; justify-content: center; margin: 6px 0 18px; }
.rate button { color: #4b5261; }
.rate button .ic { width: 34px; height: 34px; }
.rate button.is-on { color: var(--brand); }
.rate button.is-on .ic { fill: var(--brand); }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 21; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--r)); } }
.start-screen .start-list { width: min(520px, 100%); margin: 20px 0; display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; text-align: left; }
.start-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.05); }
.start-item img { width: 44px; height: 44px; border-radius: 10px; background: radial-gradient(circle, #2a2e36, #16181d); }
.start-item b { font: 500 14.5px/1.2 var(--font-display); display: block; }
.start-item span { font-size: 12.5px; color: #8f97a4; }

/* ---------- Settings ---------- */
.set-wrap { max-width: 820px; margin: 0 auto; }
.set-sec { margin-top: 22px; }
.set-sec > h2 { font-size: 15px; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; margin: 0 4px 10px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.set-sec > h2 .ic { width: 18px; height: 18px; }
.set-list { border-radius: 22px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.set-row + .set-row { border-top: 1px solid var(--border); }
.set-row__ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; }
.set-row__ic .ic { width: 21px; height: 21px; }
.set-row__main { flex: 1; min-width: 0; }
.set-row__main b { display: block; font: 500 15.5px/1.3 var(--font-display); }
.set-row__main span { font-size: 13px; color: var(--text-3); }
.set-row--stack { flex-direction: column; align-items: stretch; }
.voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.voice-card { padding: 16px; border-radius: 18px; border: 1.5px solid var(--border); display: flex; align-items: center; gap: 12px; text-align: left; transition: .15s; }
.voice-card.is-on { border-color: var(--brand); background: var(--brand-soft); }
.voice-card__av { width: 48px; height: 48px; border-radius: 16px; background: var(--surface-3); display: grid; place-items: center; font: 700 18px/1 var(--font-display); flex: none; }
.voice-card.is-on .voice-card__av { background: var(--brand); color: var(--ink); }
.voice-card b { display: block; font: 600 15px/1.2 var(--font-display); }
.voice-card span { font-size: 12.5px; color: var(--text-3); }
.figure-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.figure-pick { border-radius: 20px; border: 1.5px solid var(--border); overflow: hidden; text-align: center; transition: .15s; background: var(--surface); }
.figure-pick.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.figure-pick__img { aspect-ratio: 1 / 1.1; background: radial-gradient(circle at 50% 30%, var(--stage-a), var(--stage-b)); position: relative; }
.figure-pick__img img { width: 100%; height: 100%; object-fit: cover; }
.figure-pick b { display: block; padding: 10px; font: 600 15px/1 var(--font-display); }

/* ---------- Login ---------- */
.login { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100dvh - var(--header-h)); }
.login__art { position: relative; background: var(--ink); color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 44px; }
.login__art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 400px at 60% 40%, rgba(255,196,0,.3), transparent 65%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px); }
.login__art > * { position: relative; }
.login__art .viewer { position: absolute; inset: 0; background: transparent; border-radius: 0; }
.login__art .viewer::before { display: none; }
.login__art .viewer__stage { height: 100%; aspect-ratio: auto; }
.login__quote { font: 600 30px/1.2 var(--font-display); max-width: 440px; z-index: 2; }
.login__quote em { color: var(--brand); font-style: normal; }
.login__sub { color: #aab1bd; margin-top: 10px; z-index: 2; }
.login__form { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.login__box { width: 100%; max-width: 420px; }
.login__box h1 { font-size: 30px; }
.login__box > p { color: var(--text-3); margin-top: 6px; }
.login__notice { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 50%, transparent); margin: 20px 0; font-size: 14px; }
.login__notice .ic { color: var(--brand-strong); width: 22px; height: 22px; flex: none; }
.social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.social .btn { height: 48px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; margin: 18px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.pw-wrap { position: relative; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* ---------- Onboarding ---------- */
.onb { text-align: center; }
.onb__dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0 4px; }
.onb__dots i { width: 8px; height: 8px; border-radius: 8px; background: var(--border-2); transition: .25s; }
.onb__dots i.on { width: 24px; background: var(--brand); }
.onb__equip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; text-align: center; }
.onb-eq { padding: 12px 6px; border-radius: 16px; border: 1.5px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 12.5px/1.2 var(--font-display); color: var(--text-2); transition: .15s; }
.onb-eq .ic { width: 28px; height: 28px; stroke-width: 1.6; }
.onb-eq.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--text); }
.onb__goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; text-align: left; }
.onb__goals .onb-goal:last-child:nth-child(odd) { grid-column: 1 / -1; }
.onb-goal { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 11px 12px; border-radius: 16px; border: 1.5px solid var(--border); color: var(--text); text-align: left; transition: .15s; }
.onb-goal .ic { grid-row: span 2; width: 24px; height: 24px; color: var(--brand-strong); }
[data-theme="dark"] .onb-goal .ic { color: var(--brand); }
.onb-goal b { font: 600 14.5px/1.2 var(--font-display); }
.onb-goal small { font-size: 12px; color: var(--text-3); line-height: 1.3; }
.onb-goal.is-on { border-color: var(--brand); background: var(--brand-soft); }
.onb-none { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 11px 12px; border-radius: 16px; border: 1.5px solid var(--border); font: 500 14px/1.2 var(--font-display); color: var(--text-2); transition: .15s; }
.onb-none .ic { width: 20px; height: 20px; }
.onb-none.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--text); }

/* ---------- Responsive (pages) ---------- */
@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .builder { grid-template-columns: 1fr; }
  .builder__side { position: static; }
  .set-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .hero__in { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; padding-bottom: 36px; gap: 18px; }
  .hero__map { max-width: 460px; margin: 0 auto; width: 100%; justify-self: center; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .quick-grid .today { grid-column: 1 / -1; }
  .smart { grid-template-columns: 1fr; }
  .gym-banner, .gym-hero { grid-template-columns: 1fr; }
  .eotd { grid-template-columns: 1fr; }
  .eotd .viewer__stage { min-height: 340px; }
  .anat { grid-template-columns: 1fr; }
  .anat__stage { position: relative; top: 0; }
  .exd { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .exd__viewer { position: relative; top: 0; }
  .equip-detail { grid-template-columns: 1fr; }
  .equip-detail__visual { position: relative; top: 0; }
  .sched-top { grid-template-columns: repeat(2, 1fr); }
  .week { display: none; }
  .daypick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .daypick button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font: 500 12px/1 var(--font-display); color: var(--text-3); position: relative; }
  .daypick button b { font-size: 16px; color: var(--text); }
  .daypick button.is-on { background: var(--ink); border-color: var(--ink); color: #aab1bd; }
  .daypick button.is-on b { color: var(--brand); }
  .daypick button.has::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
  .login { grid-template-columns: 1fr; }
  .login__art { min-height: 260px; padding: 26px; }
  .login__quote { font-size: 24px; }
}
@media (max-width: 640px) {
  .hero__title { margin-top: 14px; }
  .hero__lead { font-size: 15.5px; }
  .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
  .hero__stat { padding: 11px 13px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
  .hero__stat b { font-size: 22px; }
  .hero__stat span { display: block; margin-top: 5px; line-height: 1.3; }
  .hero__cta { margin-top: 22px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__map { max-width: 340px; }
  .hero-chips { margin-top: -18px; }
  .quick-grid { grid-template-columns: 1fr; }
  .tile { min-height: 0; flex-direction: row; align-items: center; }
  .tile__text, .tile__go { display: none; }
  .tile__title { font-size: 16px; }
  .today__title { font-size: 22px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .gym-banner { padding: 22px; }
  .gym-banner__icons { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .gym-banner__icons span { border-radius: 12px; }
  .gym-banner__icons .ic { width: 22px; height: 22px; }
  .eotd__info { padding: 20px; }
  .eotd__name { font-size: 22px; }
  .anat__stage { padding: 12px; border-radius: 22px; }
  .anat-card { padding: 18px; }
  .anat-card__name { font-size: 22px; }
  .facts { grid-template-columns: 1fr; }
  .exd__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exd__actions .btn:last-child { grid-column: 1 / -1; }
  .rx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .muscle-box { grid-template-columns: 120px 1fr; }
  .goal-rx { grid-template-columns: 1fr; }
  .lib-filters .owned-toggle span { display: none; }
  .equip-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .equip-card { padding: 12px; border-radius: 18px; }
  .equip-card__ic { width: 50px; height: 50px; border-radius: 15px; }
  .gym-hero { padding: 22px; }
  .gym-stat b { font-size: 24px; }
  .set-grid { grid-template-columns: 1fr; }
  .cfg-item { grid-template-columns: auto 52px 1fr; }
  .cfg-item__thumb { width: 52px; height: 52px; }
  .cfg-item__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .set-hero { padding: 22px; border-radius: 24px; }
  .sched-top { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 12px; }
  .stat-card__ic { width: 38px; height: 38px; }
  .stat-card b { font-size: 20px; }
  .done-stats { grid-template-columns: repeat(2, 1fr); }
  .pc-btn { width: 52px; height: 52px; }
  .pc-btn--main { min-width: 150px; }
  .voice-grid, .figure-picks { grid-template-columns: 1fr 1fr; }
  .onb__equip { grid-template-columns: repeat(3, 1fr); }
  .social { grid-template-columns: 1fr; }
}

/* ---------- ปรับแต่งเพิ่มเติม ---------- */
.today .btn--ghost { color: var(--ink); border-color: rgba(0,0,0,.22); }
.today .btn--ghost:hover { background: rgba(0,0,0,.06); }

/* ---------- แผนที่กล้ามเนื้อบนพื้นสีเข้มเสมอ (หน้าแรก/สรุปผลฝึก) ใช้ขอบ/พื้นโทนมืดทั้งสองธีม ---------- */
.hero__map .bodymap, .summary .bodymap { --bm-base: #15171b; --bm-edge: #8f96a1; --muscle-stroke: #0c0e11; --bm-cloth: #0a0b0d; }

/* ---------- โลโก้ FastFit (พื้นดำในตัว → วางในกรอบดำเสมอ ทั้งธีมสว่าง/มืด) ---------- */
.onb__logo { background: #000; border-radius: 18px; overflow: hidden; margin: 2px auto 14px; max-width: 320px; }
.onb__logo img { width: 100%; height: auto; }

/* ---------- ตารางฝึก: รายการรายวัน (มือถือ) ---------- */
.daylist-mobile { display: none; }
@media (max-width: 1023px) { .daylist-mobile { display: block; } }
.daylist-card .plan { font-size: 15px; }

/* =========================================================================
   ตัวเล่นการฝึก (workout) — เต็มจอ โทนเข้มพร้อมไฮไลต์เหลือง
   ========================================================================= */
body.page-workout { background: var(--g-950); overflow: hidden; overscroll-behavior: none; }
.wo { position: fixed; inset: 0; display: flex; flex-direction: column; color: #fff; background: radial-gradient(120% 70% at 50% 18%, #2b3039 0%, #14161a 58%, #0b0c0f 100%); }
.wo__top { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 8px; }
.wo__btn { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.wo__btn .ic { width: 20px; height: 20px; }
.wo__btn:hover { background: rgba(255,255,255,.14); }
.wo__prog { flex: 1; display: flex; gap: 4px; min-width: 0; }
.wo__prog i { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.wo__prog i.is-cur { background: rgba(255,196,0,.28); }
.wo__prog b { display: block; height: 100%; background: var(--brand); border-radius: 6px; transition: width .4s ease; }
.wo__clock { font: 600 15px/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; color: rgba(255,255,255,.85); }
.wo__stage { position: relative; flex: 1; min-height: 0; }
.wo__stage canvas { display: block; }
.wo__stage.is-mirror canvas { transform: scaleX(-1); }
.wo__spin { position: absolute; left: 50%; top: 45%; width: 42px; height: 42px; margin: -21px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--brand); animation: figspin 1s linear infinite; }
.wo__caption { position: absolute; left: 50%; bottom: 190px; z-index: 2; transform: translate(-50%, 16px); width: min(560px, calc(100% - 32px)); pointer-events: none;
  padding: 10px 16px; border-radius: 16px; background: rgba(12,13,16,.72); backdrop-filter: blur(10px); color: #fff; font-size: 15px; line-height: 1.45; text-align: center;
  opacity: 0; transition: opacity .25s, transform .25s; }
.wo__caption.is-on { opacity: 1; transform: translate(-50%, 0); }
.wo__hud { position: relative; z-index: 3; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
.wo__card { max-width: 640px; margin: 0 auto; padding: 16px 18px 14px; border-radius: 24px; background: rgba(22,24,29,.86); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); backdrop-filter: blur(16px); }
.wo__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.wo__name { margin: 4px 0 0; font: 600 clamp(20px, 5vw, 26px)/1.2 var(--font-display); color: #fff; }
.wo__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wo__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); font-size: 13px; }
.wo__chips .ic { width: 15px; height: 15px; color: var(--brand); }
.wo__cd { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--brand); text-align: center; }
.wo__cd span { font: 700 32px/1 var(--font-display); color: #fff; }
.wo__cd small { display: block; margin-top: 2px; font-size: 10px; color: rgba(255,255,255,.6); }
.wo__count { flex: none; font: 700 44px/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.wo__count b { color: var(--brand); }
.wo__count small { font-size: 20px; color: rgba(255,255,255,.55); margin-left: 4px; }
.wo__count.is-pop b { display: inline-block; animation: woPop .32s ease; }
@keyframes woPop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.wo__bar { height: 6px; margin-top: 12px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.wo__bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #ffe68a); border-radius: 6px; transition: width .3s ease; }
.wo__ctl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.wo__ctl .btn { min-width: 132px; }
.wo__round { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); }
.wo__round .ic { width: 22px; height: 22px; }
.wo__round:hover { background: rgba(255,255,255,.16); }
.wo__ring { position: relative; flex: none; width: 118px; height: 118px; }
.wo__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wo__ring circle { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 7; }
.wo__ring circle.p { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 276.5; transition: stroke-dashoffset .2s linear; }
.wo__ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.wo__ring b { font: 700 30px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.wo__ring small { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; }
.wo__next { flex: 1; min-width: 0; }
.wo__next h3 { margin: 4px 0 2px; font: 600 18px/1.25 var(--font-display); color: #fff; }
.wo__next p { margin: 0; color: rgba(255,255,255,.6); font-size: 13.5px; }
.wo__adj { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 14px; color: rgba(255,255,255,.8); }
/* เล่นให้โดน (ตัวเล่น): โฟกัสระหว่างเซ็ต · ถามหลังเซ็ตว่ารู้สึกที่ไหน */
.wo__focus { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(255,196,0,.1); color: rgba(255,255,255,.88); font-size: 13.5px; line-height: 1.45; }
.wo__focus .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand); }
.wo__focus b { color: #fff; font-weight: 600; }
.wo__focus.is-fix { background: rgba(59,158,255,.14); }
.wo__focus.is-fix .ic { color: #7cc0ff; }
.wo__feel { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.wo__feel-q { display: flex; align-items: center; gap: 6px; font: 600 14px/1.3 var(--font-display); color: #fff; }
.wo__feel-q .ic { width: 16px; height: 16px; color: var(--brand); }
.wo__feel-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wo__feel-opt { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.9); font: 500 13px/1.2 var(--font-display); }
.wo__feel-opt:hover { background: rgba(255,255,255,.14); }
.wo__feel-opt .ic { width: 14px; height: 14px; }
.wo__feel-opt.is-target { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.wo__feel.is-answered { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.88); }
.wo__feel.is-answered .ic { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.wo__feel.is-ok .ic { color: #34d399; }
.wo__feel.is-fix .ic { color: #7cc0ff; }
.wo__feel.is-answered b { color: #fff; }
.wo__adj b { min-width: 34px; text-align: center; font: 700 22px/1 var(--font-display); color: #fff; }
.wo__mini { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: rgba(255,255,255,.1); }
.wo__mini .ic { width: 16px; height: 16px; }
.wo__card--done { text-align: center; }
.wo__trophy { width: 64px; height: 64px; margin: 0 auto 6px; display: grid; place-items: center; border-radius: 22px; background: var(--brand); color: var(--brand-ink); box-shadow: var(--glow); }
.wo__trophy .ic { width: 32px; height: 32px; }
.wo__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.wo__stats div { padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.06); }
.wo__stats b { display: block; font: 700 22px/1.1 var(--font-display); color: #fff; }
.wo__stats span { font-size: 11.5px; color: rgba(255,255,255,.6); }
.wo__stars { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.wo__stars button { width: 40px; height: 40px; display: grid; place-items: center; color: rgba(255,255,255,.3); }
.wo__stars button .ic { width: 28px; height: 28px; }
.wo__stars button.is-on { color: var(--brand); }
.wo__card--boot .hint { color: rgba(255,255,255,.6); text-align: center; }
.wo-opts .label { font-weight: 600; font-size: 13.5px; color: var(--text-2); margin-bottom: 8px; }
.wo-opts__personas, .wo-opts__levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wo-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; text-align: left; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.wo-opt.is-on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.wo-opt b { font-size: 14px; }
.wo-opt small { font-size: 12px; color: var(--text-3); line-height: 1.35; }
.wo-opt__em { font-size: 20px; }
.wo-opts__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; }
.wo-check { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 0; }
.wo-check input { width: 18px; height: 18px; accent-color: var(--brand); }
@media (min-width: 1024px) {
  .wo__hud { position: absolute; right: 24px; bottom: 24px; width: 440px; padding: 0; }
  .wo__caption { left: calc(50% - 230px); bottom: 32px; }
}

/* =========================================================================
   ตั้งค่า
   ========================================================================= */
.settings { padding-bottom: 40px; }
/* หน้าตั้งค่า: เมนูหมวดติดจอด้านซ้าย + เนื้อหาเรียงเป็นคอลัมน์เดียว (การ์ดกว้างเท่ากันทุกใบ ไม่เหลื่อมกัน) */
.settings__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings__nav { position: sticky; top: calc(var(--header-h) + var(--safe-t) + 18px); display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.settings__nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--text-2); font: 500 14.5px/1.2 var(--font-display); transition: background .18s, color .18s; }
.settings__nav a .ic { width: 18px; height: 18px; color: var(--text-3); }
.settings__nav a:hover { background: var(--surface-2); color: var(--text); }
.settings__nav a.is-on { background: var(--brand-soft); color: var(--text); }
.settings__nav a.is-on .ic { color: var(--brand-strong); }
.settings__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings__main .scard { scroll-margin-top: calc(var(--header-h) + var(--safe-t) + 16px); }
.scard__split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: center; }
.scard__split .sfig { margin: 6px 0 12px; }
@media (max-width: 899px) {
  .settings__layout { grid-template-columns: 1fr; gap: 14px; }
  .settings__nav { top: calc(var(--header-h) + var(--safe-t)); z-index: 5; flex-direction: row; overflow-x: auto; scrollbar-width: none; border-radius: 14px; padding: 6px; }
  .settings__nav::-webkit-scrollbar { display: none; }
  .settings__nav a { flex: none; padding: 8px 12px; }
  .scard__split { grid-template-columns: 1fr; gap: 6px; }
}
.scard { padding: 18px 18px 8px; }
.scard__h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 17px/1.2 var(--font-display); }
.scard__h .ic { width: 20px; height: 20px; color: var(--brand-strong); }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 0; border-top: 1px solid var(--border); text-align: left; color: inherit; background: none; }
.scard__h + .srow, .scard .hint + .srow, .scard__split-ctl > .srow:first-child { border-top: 0; }
.srow__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srow__txt b { font-weight: 600; font-size: 14.5px; }
.srow__txt span { font-size: 13px; color: var(--text-3); line-height: 1.45; }
.srow__txt a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.srow__ctl { flex: none; max-width: 62%; display: flex; justify-content: flex-end; }
.srow__ctl .seg { flex-wrap: wrap; }
.srow--stack { flex-wrap: wrap; }
.srow--link { cursor: pointer; }
.srow--link:hover b { color: var(--brand-strong); }
.srow--link > .ic { width: 18px; height: 18px; color: var(--text-3); }
.srow--danger b { color: var(--danger); }
.seg a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 14px; color: var(--text-2); }
.seg a.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }
.range { width: 160px; accent-color: var(--brand); }
.tones { display: flex; gap: 8px; }
.tone { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-2); }
.tone.is-on { box-shadow: 0 0 0 2px var(--brand); }
.tone--fair { background: #f2d2bb; } .tone--light { background: #e8bb98; } .tone--medium { background: #d29a73; } .tone--tan { background: #b27a53; } .tone--deep { background: #7c4d33; }
.sfig { margin: 10px 0 4px; height: 300px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--stage-a), var(--stage-b)); }
.sfig__stage { width: 100%; height: 100%; }
.scard--voice .wo-opts__personas, .scard--voice .wo-opts__levels { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 640px) { .srow__ctl { max-width: 70%; } .range { width: 130px; } }

.seg > button:not(.seg__btn), .seg > a { height: 34px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1 var(--font-display); color: var(--text-2); white-space: nowrap; transition: background .18s, color .18s, box-shadow .18s; }
.seg > button:not(.seg__btn):hover, .seg > a:hover { color: var(--text); }
.seg > button.is-on, .seg > a.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.link { color: var(--brand-strong); font-weight: 500; }
.link:hover { text-decoration: underline; }
@media (max-width: 899px) { .login { grid-template-columns: 1fr; } .login__art { display: none; } }

/* ---------- ความเร็วท่า (ตัวเล่นการฝึก / หน้าท่า / ตั้งค่า) ---------- */
.wo__btn--speed { width: auto; min-width: 42px; padding: 0 10px; gap: 5px; display: inline-flex; align-items: center; font: 600 13px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.wo__btn--speed .ic { width: 17px; height: 17px; color: var(--brand); }
.wo-speed__ex { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text-2); font-size: 14px; }
.wo-speed__ex .ic { width: 18px; height: 18px; color: var(--brand); }
.wo-speed__ex b { color: var(--text); font-weight: 600; }
.spd__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.spd__head b { font: 700 26px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.spd__range { width: 100%; margin: 14px 0 6px; accent-color: var(--brand); height: 28px; }
.spd__presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.spd__chip { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); }
.spd__chip b { font: 700 14px/1 var(--font-display); color: var(--text); }
.spd__chip small { font-size: 11px; line-height: 1.1; text-align: center; }
.spd__chip.is-on { border-color: var(--brand); background: var(--brand-soft); }
.spd__chip.is-on small { color: var(--text); }
.vpop__label { padding: 6px 11px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3, var(--text-2)); }
.vpop__item b { font-weight: 600; min-width: 44px; }
.vpop__item small { font-size: 12px; color: var(--text-2); }
.seg--wrap { flex-wrap: wrap; }
@media (max-width: 420px) { .spd__chip small { font-size: 10px; } .wo__btn--speed span { font-size: 12px; } }
.srow__ctl:has(select) { gap: 8px; align-items: center; flex-wrap: wrap; }
.srow__ctl select.input { height: 36px; min-width: 0; max-width: 230px; padding: 0 30px 0 10px; font-size: 13.5px; }
@media (max-width: 640px) { .srow__ctl select.input { max-width: 100%; flex: 1 1 160px; } }

/* =========================================================================
   ตัวเล่นการฝึก — เตรียมตัวก่อนเซ็ต · รอกด “พร้อมแล้ว” · ปรับแผนการฝึก (รายท่า/รายเซ็ต)
   ========================================================================= */
.wo .btn--ghost { color: #fff; border-color: rgba(255,255,255,.2); }
.wo .btn--ghost:hover { background: rgba(255,255,255,.08); }
.wo__info { flex: 1; min-width: 0; }
.wo__chips span.is-hi { background: rgba(255,196,0,.16); color: #fff; font-weight: 600; }
.wo__chipbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px dashed rgba(255,196,0,.55); color: var(--brand); font: 500 13px/1.2 var(--font-display); transition: background .18s; }
.wo__chipbtn .ic { width: 15px; height: 15px; }
.wo__chipbtn:hover { background: rgba(255,196,0,.1); }
.wo__ring--prep { width: 96px; height: 96px; transition: filter .2s; }
.wo__ring--prep b { font-size: 34px; transition: color .2s; }
.wo__ring--prep small { font-size: 11px; }
.wo__ring--prep.is-hot { filter: drop-shadow(0 0 12px rgba(255,196,0,.45)); }
.wo__ring--prep.is-hot b { color: var(--brand); }
.wo__planbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; text-align: left; transition: background .18s; }
.wo__planbtn:hover { background: rgba(255,255,255,.1); }
.wo__planbtn > .ic { flex: none; width: 20px; height: 20px; color: var(--brand); }
.wo__planbtn > .ic:last-child { width: 18px; height: 18px; color: rgba(255,255,255,.45); }
.wo__planbtn > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wo__planbtn b { font: 600 15px/1.25 var(--font-display); }
.wo__planbtn small { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.6); }
.wo__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 11px; border-radius: 11px; background: rgba(255,196,0,.12); color: var(--brand); font: 500 13px/1 var(--font-display); transition: background .18s; }
.wo__link .ic { width: 15px; height: 15px; }
.wo__link:hover { background: rgba(255,196,0,.2); }
.wo__over { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.wo__over:empty { display: none; }
.wo__readybtn { flex: 1; min-width: 0; }
.wo__readybtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wo__card--ready .hint { text-align: center; color: rgba(255,255,255,.6); }
@media (max-width: 420px) {
  .wo__top { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .wo__btn { width: 38px; height: 38px; border-radius: 12px; }
  .wo__btn--speed { width: auto; min-width: 38px; padding: 0 8px; }
  .wo__clock { min-width: 40px; font-size: 14px; }
  .wo__ctl .btn { min-width: 0; flex: 1 1 0; padding: 0 12px; }
  .wo__ring--prep { width: 84px; height: 84px; }
  .wo__ring--prep b { font-size: 30px; }
}

/* ---------- เพลงประกอบจาก YouTube (assets/js/core/music.js) ----------
   วิดีโอต้องมองเห็นได้เสมอ ≥ 200×200 (เงื่อนไข YouTube) · จอกว้าง = ลอยมุมซ้ายบน · มือถือจอสูง = แทรกเหนือหุ่น (หุ่นย่อตาม) · มือถือจอเตี้ย = ลอยมุม 200×200 */
.wo__btn--music.is-on { color: var(--brand); border-color: rgba(255,196,0,.45); }
.wo__btn--music.is-playing .ic { animation: muBeat .9s ease-in-out infinite; }
@keyframes muBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.wo__planbtn--music > .ic:first-child { color: #ff4e45; }
.wo-music { position: absolute; z-index: 4; left: 16px; top: calc(64px + env(safe-area-inset-top)); width: 356px; border-radius: 16px; overflow: hidden;
  background: #000; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 44px -18px rgba(0,0,0,.75); }
.wo-music__bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 3px 0 10px; background: rgba(22,24,29,.94); }
.wo-music__ic { display: grid; place-items: center; }
.wo-music__ic .ic { width: 16px; height: 16px; color: #ff4e45; }
.wo-music__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 13px/1.2 var(--font-display); color: rgba(255,255,255,.9); }
.wo-music__b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: rgba(255,255,255,.85); }
.wo-music__b:hover { background: rgba(255,255,255,.1); color: #fff; }
.wo-music__b .ic { width: 16px; height: 16px; }
.wo-music__frame { position: relative; height: 200px; background: #000; }
.wo-music__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.wo-music__msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px;
  text-align: center; background: rgba(12,13,16,.94); color: #fff; font-size: 13.5px; line-height: 1.45; }
.wo-music__msg[hidden] { display: none; }
.wo-music__msg > .ic { width: 22px; height: 22px; color: var(--brand); }
.wo-music__tap { display: none; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 12.5px/1.2 var(--font-display); color: var(--brand); animation: muBlink 1.4s ease-in-out infinite; }
.wo-music.is-hint .wo-music__title { display: none; }
.wo-music.is-hint .wo-music__tap { display: block; }
@keyframes muBlink { 50% { opacity: .55; } }
/* มือถือแนวนอน + เปิดเพลง: หุ่นอยู่ระหว่างหน้าต่างเพลง (ซ้าย) กับการ์ดควบคุม (ขวา) */
@media (max-width: 767px) {
  .wo-music { position: relative; left: auto; top: auto; flex: none; align-self: center; width: calc(100% - 20px); max-width: 480px; margin: 0 0 6px; }
  .wo-music__frame { height: 200px; }
}
/* มือถือแนวนอน: มีที่ว่างข้างหุ่น → ลอยมุมซ้าย 200×200 · จอเตี้ย: แถบหัวบางลง */
@media (max-width: 767px) and (min-aspect-ratio: 1/1) {
  .wo-music { position: absolute; left: 10px; top: calc(62px + env(safe-area-inset-top)); align-self: auto; width: 200px; margin: 0; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .wo-music__bar { height: 28px; }
  .wo-music__b { width: 26px; height: 26px; }
}
/* มือถือแนวนอน: การ์ดควบคุมไปคอลัมน์ขวา (ไม่ถูกหน้าต่างเพลงบัง) · หุ่นอยู่กลางครึ่งซ้าย */
@media (max-width: 1023px) and (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .wo__hud { position: absolute; right: 10px; bottom: 8px; width: min(380px, 50%); max-height: calc(100% - 66px - env(safe-area-inset-top)); overflow-y: auto; padding: 0 0 env(safe-area-inset-bottom); }
  .wo__stage { margin-right: min(390px, 50%); }
  .wo.has-music .wo__stage { margin-left: 214px; }
  .wo__caption { left: 25%; bottom: 14px; width: min(440px, 46%); }
}
/* แถบบนของตัวเล่นบนมือถือ: แถบความคืบหน้าย้ายไปเป็นเส้นบาง ๆ ใต้ปุ่ม → ปุ่มเพลงมีที่วาง */
@media (max-width: 560px) {
  .wo__top { padding-bottom: 12px; }
  .wo__prog { position: absolute; left: 12px; right: 12px; bottom: 2px; }
  .wo__prog i { height: 4px; }
  .wo__clock { margin-left: auto; }
}
@media (max-width: 350px) {
  .wo__top { gap: 4px; }
  .wo__btn { width: 34px; height: 34px; }
}

/* แผงเลือกเพลง (bottom sheet — สีตามธีม) */
.mu__lead { margin: 0 0 12px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.mu__form { display: flex; gap: 8px; }
.mu__form .input { flex: 1; min-width: 0; }
.mu__form .btn { flex: none; }
.mu__err { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--danger); font-size: 13px; }
.mu__err[hidden] { display: none; }
.mu__err .ic { width: 16px; height: 16px; flex: none; }
.mu__now { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--brand-soft); }
.mu__now > .ic { width: 20px; height: 20px; flex: none; color: #ff4e45; }
.mu__now > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mu__now small { font-size: 12px; color: var(--text-2); }
.mu__now b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.mu__recent { display: flex; flex-direction: column; gap: 6px; }
.mu__rec { display: flex; align-items: center; gap: 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.mu__rec.is-on { border-color: var(--brand); }
.mu__pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; text-align: left; color: var(--text); border-radius: 13px; }
.mu__pick:hover { background: var(--surface-2); }
.mu__pick > .ic { flex: none; width: 18px; height: 18px; margin-right: 6px; color: var(--brand-strong); }
.mu__thumb { flex: none; width: 64px; height: 36px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.mu__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mu__thumb .ic { width: 18px; height: 18px; color: var(--text-3); }
.mu__rt { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13.5px; line-height: 1.35; }
.mu__del { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--text-3); }
.mu__del:hover { background: var(--surface-2); color: var(--text); }
.mu__del .ic { width: 16px; height: 16px; }
.mu__search { display: flex; flex-wrap: wrap; gap: 6px; }
.mu__search .chip .ic { width: 16px; height: 16px; color: #ff4e45; }
.mu__vol { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.mu__vol > .ic { width: 18px; height: 18px; flex: none; color: var(--text-2); }
.mu__vol span { flex: none; }
.mu__vol input { flex: 1; min-width: 0; accent-color: var(--brand); }
.mu__vol b { flex: none; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- แผงปรับแผนการฝึก (bottom sheet — ใช้สีตามธีม) ---------- */
.wo-plan { display: flex; flex-direction: column; gap: 12px; }
.wo-plan__list { display: flex; flex-direction: column; gap: 10px; }
.wo-plan__gen { padding: 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.wo-plan__line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wo-plan__lbl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wo-plan__lbl b { font: 600 14.5px/1.3 var(--font-display); color: var(--text); }
.wo-plan__lbl small { font-size: 12.5px; line-height: 1.4; color: var(--text-3); }
.wo-plan__chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.wo-plan__chips--prep { grid-template-columns: auto repeat(6, minmax(0, 1fr)); margin-top: 10px; }
.wo-plan__chip { min-width: 0; height: 40px; padding: 0 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 14px/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.wo-plan__chip:hover { color: var(--text); border-color: var(--border-2); }
.wo-plan__chip.is-on { border-color: var(--brand); background: var(--brand-soft); color: var(--text); box-shadow: 0 0 0 1px var(--brand) inset; }
.wo-plan__num { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 10px 0 2px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.wo-plan__num:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.wo-plan__num input { width: 50px; height: 38px; border: 0; background: transparent; text-align: center; font: 700 17px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.wo-plan__num input:focus { outline: none; }
.wo-plan__num span { font-size: 13px; color: var(--text-3); }
.wo-plan__sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); cursor: pointer; }
.wo-plan__ex { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.wo-plan__ex.is-open { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.wo-plan__head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 10px 14px; text-align: left; color: var(--text); }
.wo-plan__idx { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--brand); color: var(--brand-ink); font: 700 14px/1 var(--font-display); }
.wo-plan__idx .ic { width: 16px; height: 16px; }
.wo-plan__ex.is-past .wo-plan__idx { background: var(--surface-3); color: var(--text-2); }
.wo-plan__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wo-plan__title b { font: 600 15px/1.25 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-plan__title small { font-size: 12.5px; line-height: 1.35; color: var(--text-3); }
.wo-plan__tag { flex: none; padding: 5px 8px; border-radius: 8px; background: var(--surface-3); color: var(--text-2); font: 600 11.5px/1 var(--font-display); white-space: nowrap; }
.wo-plan__tag.is-now { background: var(--brand); color: var(--brand-ink); }
.wo-plan__chev { flex: none; width: 18px; height: 18px; color: var(--text-3); transition: transform .2s; }
.wo-plan__ex.is-open .wo-plan__chev { transform: rotate(180deg); }
.wo-plan__body { padding: 0 14px 14px; }
.wo-plan__sets { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.wo-plan__sets b { font: 600 14.5px/1.2 var(--font-display); }
.wo-step { flex: none; display: inline-flex; align-items: stretch; height: 44px; border-radius: 13px; border: 1px solid var(--border-2); background: var(--surface-2); overflow: hidden; }
.wo-step button { width: 42px; display: grid; place-items: center; color: var(--text); transition: background .15s; }
.wo-step button:disabled { opacity: .3; }
.wo-step button:active:not(:disabled) { background: var(--surface-3); }
.wo-step button .ic { width: 18px; height: 18px; }
.wo-step input { width: 54px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface); text-align: center; font: 700 18px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.wo-step input:focus { outline: none; background: var(--brand-soft); }
.wo-plan__rows { display: flex; flex-direction: column; gap: 8px; }
.wo-plan__row { padding: 10px 12px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; }
.wo-plan__row.is-cur { border-color: var(--brand); }
.wo-plan__row.is-done { display: flex; align-items: center; gap: 10px; padding: 10px 12px; opacity: .75; }
.wo-plan__rh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 38px; }
.wo-plan__rh > b { font: 600 14px/1.2 var(--font-display); }
.wo-plan__n { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-3); color: var(--text-2); font: 700 12.5px/1 var(--font-display); }
.wo-plan__n .ic { width: 14px; height: 14px; }
.wo-plan__row.is-cur .wo-plan__n { background: var(--brand); color: var(--brand-ink); }
.wo-plan__row.is-done .wo-plan__n { background: var(--success); color: #fff; }
.wo-plan__res { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; color: var(--text-2); }
.wo-plan__res b { font: 600 14px/1.2 var(--font-display); color: var(--text); }
.wo-plan__tools { margin-left: auto; display: flex; gap: 2px; }
.wo-plan__tool { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--text-2); transition: background .15s, color .15s; }
.wo-plan__tool:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.wo-plan__tool:disabled { opacity: .3; }
.wo-plan__tool .ic { width: 18px; height: 18px; }
.wo-plan__tool--txt { width: auto; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--border); font: 500 12.5px/1 var(--font-display); white-space: nowrap; }
.wo-plan__tool--txt .ic { width: 15px; height: 15px; }
.wo-plan__fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 6px; }
.wo-plan__fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wo-plan__fld > span { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text-3); }
.wo-plan__fld small { font-size: 12px; color: var(--brand-strong); }
[data-theme="dark"] .wo-plan__fld small { color: var(--brand); }
.wo-plan__in { width: 100%; max-width: 150px; height: 44px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--border-2); background: var(--surface); text-align: center; font: 700 17px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.wo-plan__in::placeholder { color: var(--text-3); font-weight: 500; }
.wo-plan__in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.wo-plan__rest { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-2); }
.wo-plan__rl { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text-3); }
.wo-plan__rest .wo-plan__chip { height: 38px; font-size: 13.5px; }
.wo-plan__end { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-2); font-size: 13px; color: var(--text-3); }
.wo-plan__end .ic { flex: none; width: 16px; height: 16px; }
.wo-plan__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wo-plan__acts .btn { flex: 1 1 140px; }
.wo-plan__note { flex: 1.4; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.35; color: var(--text-3); }
.wo-plan__note .ic { flex: none; width: 16px; height: 16px; color: var(--success); }
@media (max-width: 380px) {
  .wo-plan__head, .wo-plan__body { padding-left: 12px; padding-right: 12px; }
  .wo-plan__row { padding-left: 10px; padding-right: 10px; }
  .wo-step button { width: 38px; }
  .wo-step input { width: 48px; }
  .wo-plan__chips { gap: 4px; }
  .wo-plan__chip { font-size: 13px; padding: 0 4px; }
}

/* ---------- ตั้งค่า › การฝึก: เลือกวินาที (ชิป + กำหนดเอง) ---------- */
.srow--wide { flex-direction: column; align-items: stretch; gap: 10px; }
.srow--wide .srow__ctl { max-width: none; justify-content: flex-start; }
.numpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.numpick .seg { flex-wrap: wrap; }
.numpick__custom { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); transition: border-color .15s, box-shadow .15s; }
.numpick__custom.is-on, .numpick__custom:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.numpick__custom input { width: 92px; height: 36px; padding: 0 6px; border: 0; background: transparent; text-align: center; font: 600 16px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.numpick__custom input::placeholder { color: var(--text-3); font-weight: 500; font-size: 14px; }
.numpick__custom input:focus { outline: none; }
.numpick__custom span { font-size: 13px; color: var(--text-3); }
/* ตั้งค่าบนมือถือ: ตัวเลือก 3 ตัวขึ้นไปย้ายลงใต้หัวข้อ เต็มความกว้าง ช่องเท่ากัน (เดิมกลุ่มปุ่มตัดบรรทัดครึ่งๆ) · ชิปเลือกวินาทีเรียงเป็นคอลัมน์ตรงกัน */
@media (max-width: 640px) {
  .srow:has(> .srow__ctl > .seg > :nth-child(3)) { flex-direction: column; align-items: stretch; gap: 10px; }
  .srow:has(> .srow__ctl > .seg > :nth-child(3)) > .srow__ctl { max-width: none; justify-content: stretch; }
  .srow__ctl > .seg:has(> :nth-child(3)) { display: flex; flex: 1; flex-wrap: nowrap; }
  .srow__ctl > .seg:has(> :nth-child(3)) > * { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 6px; }
  .numpick { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .numpick .seg { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .numpick .seg > * { justify-content: center; padding: 0 4px; }
  .numpick .seg > [data-auto] { grid-column: span 2; }
  .numpick__custom { justify-self: start; }
}

/* ป้ายท่าค้าง (ไอโซเมตริก/ยืดเหยียด) บนตัวดู 3D */
.badge--hold { gap: 5px; }
.badge--hold svg { width: 13px; height: 13px; animation: holdPulse 2.6s ease-in-out infinite; }
@keyframes holdPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .badge--hold svg { animation: none; } }

/* ==========================================================================
   พลังงานและอาหาร (nutrition.php)
   ========================================================================== */
.nutri__loading, .nu-loading { display: grid; place-items: center; padding: 48px 0; }
.nu-loading { padding: 18px 0; }
.nutri__loading .spinner, .nu-loading .spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border-2); border-top-color: var(--brand); animation: spin .8s linear infinite; }
.badge--warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: #b45309; }
[data-theme="dark"] .badge--warn { color: #fbbf24; }

.nu-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px; min-width: 0; }
.nu-card__head { margin-bottom: 6px; }
.nu-card__head h2 { display: flex; align-items: center; gap: 9px; font-size: 21px; }
.nu-card__head h2 .ic { width: 22px; height: 22px; color: var(--brand-strong); }
.nu-card__head p { color: var(--text-3); font-size: 14px; margin-top: 4px; }
.nu-card__title { display: flex; align-items: center; gap: 9px; font: 600 16.5px/1.3 var(--font-display); margin-bottom: 12px; flex-wrap: wrap; }
.nu-card__title > .ic { width: 20px; height: 20px; color: var(--brand-strong); flex: none; }
[data-theme="dark"] .nu-card__title > .ic, [data-theme="dark"] .nu-card__head h2 .ic { color: var(--brand); }
.nu-card__title > .nu-link, .nu-card__title > .badge, .nu-card__sum { margin-left: auto; }
.nu-card__sum { font: 500 14px/1 var(--font-display); color: var(--text-2); }
.nu-link { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-strong); font: 500 14px/1.2 var(--font-display); padding: 4px 2px; border-radius: 6px; }
[data-theme="dark"] .nu-link { color: var(--brand); }
.nu-link .ic { width: 15px; height: 15px; }
.nu-link:hover { text-decoration: underline; }
.nu-link--danger { color: var(--danger) !important; }
.nu-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.nu-note .ic { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--text-3); }
.nu-note--warn { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.nu-note--warn .ic { color: var(--warn); }
.nu-sub { font: 600 14px/1.3 var(--font-display); margin: 16px 0 8px; }
.nu-sub small { font-weight: 400; color: var(--text-3); }
.nu-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.nu-kv--2 { grid-template-columns: 1fr 1fr; }
.nu-kv > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.nu-kv span { display: block; font-size: 12.5px; color: var(--text-3); }
.nu-kv b { display: block; font: 600 17px/1.3 var(--font-display); margin-top: 2px; }
.nu-kv small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.35; }
.nu-macro { margin-top: 8px; }
.nu-macro__top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.nu-macro__top b { font-weight: 600; }
.nu-macro__top span { color: var(--text-3); font-variant-numeric: tabular-nums; }
.nu-macro i { display: block; height: 7px; border-radius: 99px; background: var(--surface-3); margin-top: 5px; position: relative; overflow: hidden; }
.nu-macro i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--mc, var(--brand)); transition: width .5s var(--ease); }
.nu-macro--p { --mc: #ef4444; } .nu-macro--c { --mc: #f59e0b; } .nu-macro--f { --mc: #3b82f6; }

/* ---------- ตั้งเป้าหมาย ---------- */
.nu-setup { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.nu-setup__side { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 12px; }
.nu-setup__acts { display: flex; gap: 10px; justify-content: flex-end; }
.nu-setup__acts .btn--primary { flex: 1; }
.nu-sec { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--border); }
.nu-sec h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 14px; }
.nu-sec h3 span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--brand); font: 600 13px/1 var(--font-display); flex: none; }
[data-theme="dark"] .nu-sec h3 span { background: var(--brand); color: var(--ink); }
.nu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.nu-grid--4 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.nu-grid--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.nu-grid > .field + .field, .nu-setup .field + .field { margin-top: 0; }
.nu-grid[hidden], .nu-grid > [hidden] { display: none; }
.nu-seg { width: 100%; }
.nu-seg .seg__btn, .nu-comp .seg__btn { padding: 0 8px; }
.nu-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.nu-choice--row { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.nu-choice__opt { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); transition: border-color .18s, background .18s, transform .12s; min-width: 0; }
.nu-choice__opt:hover { border-color: var(--border-2); }
.nu-choice__opt:active { transform: scale(.98); }
.nu-choice__opt.is-on { border-color: var(--brand); background: var(--brand-soft); }
.nu-choice__opt b { display: block; font: 600 14.5px/1.3 var(--font-display); }
.nu-choice__opt small { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.4; margin-top: 2px; }
.nu-choice__opt.is-on small { color: var(--text-2); }
.nu-choice__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.nu-choice__ic .ic { width: 19px; height: 19px; }
.nu-choice__opt.is-on .nu-choice__ic { background: var(--brand); color: var(--brand-ink); }
.nu-more { margin-top: 14px; }
.nu-more > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font: 500 14px/1.3 var(--font-display); color: var(--text-2); list-style: none; padding: 6px 0; }
.nu-more > summary::-webkit-details-marker { display: none; }
.nu-more > summary .ic { width: 17px; height: 17px; }
.nu-more > .hint { margin: 2px 0 10px; }

/* ผลคำนวณ */
.nu-result__head { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--font-display); }
.nu-result__head .ic { width: 19px; height: 19px; color: var(--brand-strong); }
.nu-result__head .badge { margin-left: auto; }
.nu-result__big { margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--ink); color: #fff; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; }
.nu-result__big span { grid-column: 1 / -1; font-size: 13px; color: #aab1bd; }
.nu-result__big b { font-size: 40px; line-height: 1.1; color: var(--brand); }
.nu-result__big small { color: #aab1bd; font-size: 13px; }
.nu-result__big em { grid-column: 1 / -1; font-style: normal; font-size: 13px; color: #d7dbe2; margin-top: 4px; }
.nu-result--flat .nu-result__head { display: none; }
.nu-result--flat .nu-result__big { margin-top: 0; }

/* ---------- หน้ารายวัน ---------- */
.nu-daybar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.nu-daybar__date { font: 600 17px/1.2 var(--font-display); min-width: 0; text-align: center; padding: 0 4px; }
.nu-daybar .icon-btn[disabled] { opacity: .35; pointer-events: none; }
.nu-daybar .btn { margin-left: auto; }
.nu-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--brand-soft); margin-bottom: 14px; font-size: 14px; flex-wrap: wrap; }
.nu-banner > .ic { width: 20px; height: 20px; flex: none; color: var(--brand-strong); }
.nu-banner > span { flex: 1; min-width: 180px; }
.nu-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.nu-main, .nu-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nu-main > div:empty { display: none; }

/* งบแคลอรี่ */
.nu-budget { display: flex; gap: 22px; align-items: center; }
.nu-budget__ring { position: relative; width: 150px; flex: none; }
.nu-budget__ring svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.nu-budget__ring circle { fill: none; stroke-width: 11; }
.nu-budget__ring .bg { stroke: var(--surface-3); }
.nu-budget__ring .fg { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .7s var(--ease); }
.nu-budget.is-over .nu-budget__ring .fg { stroke: var(--danger); }
.nu-budget__ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.nu-budget__ring > div small { font-size: 12px; color: var(--text-3); }
.nu-budget__ring > div b { font-size: 30px; line-height: 1.1; }
.nu-budget.is-over .nu-budget__ring > div b { color: var(--danger); }
.nu-budget__info { flex: 1; min-width: 0; }
.nu-budget__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nu-budget__nums > div { background: var(--surface-2); border-radius: 12px; padding: 9px 10px; }
.nu-budget__nums span { display: block; font-size: 12px; color: var(--text-3); }
.nu-budget__nums b { font-size: 20px; }
.nu-budget__calc { font-size: 12.5px; color: var(--text-3); margin: 8px 0 4px; line-height: 1.45; }
.nu-budget__bal { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13.5px; }
.nu-budget__bal .ic { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--text-3); }
.nu-budget__bal b { display: block; font-weight: 600; }
.nu-budget__bal small { display: block; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }

/* เล่าให้โค้ชฟัง */
.nu-tell__box { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; }
.nu-tell__box .textarea { min-height: 66px; flex: 1; }
.nu-tell__box .btn { height: auto; min-height: 50px; }
.nu-quick { margin-top: 10px; }
.nu-quick .chip { height: 34px; font-size: 13.5px; }
.nu-parse { margin-top: 12px; border: 1.5px solid var(--brand); border-radius: 16px; padding: 12px; background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); }
.nu-parse__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--font-display); }
.nu-parse__head .ic { width: 18px; height: 18px; color: var(--brand-strong); }
.nu-parse__head .select { margin-left: auto; }
.nu-select-sm { height: 36px; width: auto; padding: 0 30px 0 12px; font-size: 14px; border-radius: 10px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.nu-parse__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px 32px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.nu-parse__row:first-of-type { border-top: 0; }
.nu-parse__row small, .nu-item__name small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.nu-parse__row > .num { text-align: right; font-size: 16px; }
.nu-parse__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.nu-parse__foot .num { font-size: 18px; }

/* บันทึกอาหาร */
.nu-meal + .nu-meal { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.nu-meal__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.nu-meal__head b { font: 600 15px/1.3 var(--font-display); }
.nu-meal__head > span { font-size: 13px; color: var(--text-3); }
.nu-meal__head .nu-link { margin-left: auto; }
.nu-meal__empty { font-size: 13px; color: var(--text-3); padding: 2px 0 4px; }
.nu-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px 30px; gap: 8px; align-items: center; padding: 7px 0; }
.nu-item__name b { font-weight: 500; font-size: 14.5px; }
.nu-item__qty { display: inline-flex; background: var(--surface-2); border-radius: 10px; }
.nu-item__qty button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--text-2); border-radius: 10px; }
.nu-item__qty button:hover { background: var(--surface-3); color: var(--text); }
.nu-item__qty .ic { width: 14px; height: 14px; }
.nu-item__kcal { text-align: right; font-size: 16px; }
.nu-item__del { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--text-3); }
.nu-item__del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.nu-item__del .ic { width: 15px; height: 15px; }
.nu-food > .hint { display: flex; gap: 6px; align-items: flex-start; }
.nu-food > .hint .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* ชดเชย */
.nu-ok { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); background: color-mix(in srgb, var(--success) 9%, var(--surface)); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); padding: 14px 16px; }
.nu-ok .ic { width: 20px; height: 20px; color: var(--success); flex: none; }
.nu-comp { border: 1.5px solid color-mix(in srgb, var(--warn) 55%, var(--border)); }
.nu-comp .nu-card__title > .ic { color: var(--warn); }
.nu-comp > .hint { margin: -4px 0 12px; line-height: 1.5; }
.nu-plan-prev__days { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nu-plan-prev__days > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.nu-plan-prev__days b { font: 600 13.5px/1.3 var(--font-display); }
.nu-plan-prev__days span, .nu-task p { display: flex; gap: 6px; align-items: center; color: var(--text-2); }
.nu-plan-prev__days .ic, .nu-task p .ic { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.nu-plan-prev > .hint { margin-top: 10px; }
.nu-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nu-opt { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: border-color .18s, background .18s; }
.nu-opt:hover { border-color: var(--border-2); }
.nu-opt.is-on { border-color: var(--brand); background: var(--brand-soft); }
.nu-opt b { font: 600 14px/1.3 var(--font-display); }
.nu-opt span { font-size: 13px; color: var(--text-2); }
.nu-opt small { font-size: 11.5px; color: var(--text-3); }

/* การฝึกของวัน + รายละเอียดรายเซ็ต */
.nu-wo__row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; padding: 10px 0; }
.nu-wo__row + .nu-wo__row { border-top: 1px solid var(--border); }
.nu-wo__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.nu-wo__ic.is-partial { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.nu-wo__ic .ic { width: 19px; height: 19px; }
.nu-wo__txt b { display: block; font: 500 14.5px/1.3 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-wo__txt small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.nu-wo__kcal { text-align: right; }
.nu-wo__kcal b { display: block; font-size: 18px; }
.nu-wo__kcal small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.nu-wo__detail { grid-column: 1 / -1; }
.nu-ld { background: var(--surface-2); border-radius: 14px; padding: 12px; margin-top: 6px; }
.nu-ld > .hint { margin-bottom: 8px; line-height: 1.45; }
.nu-ld__ex + .nu-ld__ex { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.nu-ld__head { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; font-size: 14px; }
.nu-ld__head > b { font: 600 14px/1.3 var(--font-display); }
.nu-ld__head > span { color: var(--text-2); font-size: 13px; }
.nu-ld__sets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.nu-ld__sets span { font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; color: var(--text-2); }
.nu-ld__ex > small { font-size: 12px; }

/* กราฟย้อนหลัง */
.nu-hist__sum b { display: block; font: 600 15px/1.35 var(--font-display); }
.nu-hist__sum small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.nu-chart { position: relative; margin-top: 14px; padding-bottom: 20px; }
.nu-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.nu-chart rect.is-ok { fill: var(--brand); }
.nu-chart rect.is-over { fill: var(--danger); }
.nu-chart rect.is-none { fill: transparent; }
.nu-chart line.bud { stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 2 1.5; vector-effect: non-scaling-stroke; }
.nu-chart__x { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.nu-chart__x span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.nu-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-top: 6px; }
.nu-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nu-legend i { width: 12px; height: 10px; border-radius: 3px; display: inline-block; }
.nu-legend i.is-ok { background: var(--brand); }
.nu-legend i.is-over { background: var(--danger); }
.nu-legend i.bud { height: 0; border-top: 2px dashed var(--text-3); border-radius: 0; }

/* แผนชดเชยที่กำลังทำ */
.nu-task { background: var(--brand-soft); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.nu-task + .nu-task, .nu-task + .nu-plan { margin-top: 10px; }
.nu-task.is-done { background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.nu-task__head { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-display); }
.nu-task__head span { font-size: 12.5px; color: var(--text-2); }
.nu-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.nu-check input { width: 18px; height: 18px; accent-color: var(--success); }
.nu-plan { padding: 10px 0 2px; }
.nu-plan + .nu-plan { border-top: 1px solid var(--border); margin-top: 8px; }
.nu-plan__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.nu-plan__head b { font-weight: 500; }
.nu-plan__days { display: flex; gap: 5px; margin: 8px 0 4px; flex-wrap: wrap; }
.nu-plan__days span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--font-display); background: var(--surface-3); color: var(--text-2); }
.nu-plan__days span.is-done { background: var(--success); color: #fff; }
.nu-plan__days span.is-today { box-shadow: 0 0 0 2px var(--brand); }

/* น้ำหนัก */
.nu-weight__now { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.nu-weight__now b { font-size: 34px; line-height: 1.1; }
.nu-weight__now > span { color: var(--text-3); }
.nu-weight__now em { font-style: normal; font-size: 12.5px; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); margin-left: 4px; }
.nu-wchart { display: block; width: 100%; height: 70px; margin: 12px 0 4px; overflow: visible; }
.nu-wchart polyline { fill: none; stroke: var(--brand); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.nu-wchart line { stroke: var(--success); stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.nu-weight__log { display: flex; gap: 8px; margin-top: 12px; }
.nu-weight__log .input { height: 42px; flex: 1; min-width: 0; }
.nu-weight__log .btn { height: 42px; }

/* วิธีคำนวณ */
.nu-how > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--font-display); list-style: none; }
.nu-how > summary::-webkit-details-marker { display: none; }
.nu-how > summary .ic { width: 18px; height: 18px; color: var(--text-3); }
.nu-how ul { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }

/* ค้นหาอาหาร (หน้าต่าง) */
.nu-pick__list { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.nu-pick__top { position: sticky; top: -4px; z-index: 3; margin: -4px -22px 0; padding: 8px 22px 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.nu-pick__top[hidden] { display: none; }
.modal__body .chips--scroll { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; scroll-padding: 0 22px; }
.nu-pick__list[hidden], .nu-pick__sel[hidden] { display: none; }
.nu-pick__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 12px; }
.nu-pick__item:hover { background: var(--surface-2); }
.nu-pick__item b { display: block; font-weight: 500; font-size: 14.5px; }
.nu-pick__item small { font-size: 12px; color: var(--text-3); }
.nu-pick__item > .num { white-space: nowrap; font-size: 15px; }
.nu-pick__item > .num small { font-family: var(--font-body); }
.nu-pick__card { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; }
.nu-pick__card .seg__btn { padding: 0 6px; font-size: 13px; }
.nu-pick__total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 10px; font-family: var(--font-display); }
.nu-pick__total b { font-size: 24px; }
.nu-pick__search .input { height: 48px; border-radius: 14px; font-size: 16px; }
.nu-pick__cats { margin-top: 10px; }
.nu-pick__subs { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.nu-pick__subs[hidden], .nu-pick__more[hidden] { display: none; }
.chip--sm { height: 32px; padding: 0 11px; font-size: 13px; gap: 5px; }
.chip--sm .ic { width: 15px; height: 15px; }
.nu-pick__more { display: flex; justify-content: center; margin-top: 8px; }
.nu-pick__empty { padding: 18px 12px; text-align: center; }
.nu-pick__item > span:first-child { min-width: 0; }
.nu-pick__item b { overflow-wrap: anywhere; }
.nu-pick__head { display: flex; align-items: flex-start; gap: 8px; }
.nu-pick__head > div { min-width: 0; }
.nu-pick__head b { display: block; font: 600 17px/1.35 var(--font-display); overflow-wrap: anywhere; }
.nu-pick__head small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-3); }
.nu-pick__head .icon-btn { flex: none; margin: -4px 0 0 -6px; }
.nu-pick__adj { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.nu-pick__adj .field { margin: 0; }
.nu-pick__adj .nu-grid { gap: 12px; }
.nu-seg .seg__btn { flex-direction: column; gap: 1px; line-height: 1.15; min-height: 38px; height: auto; padding: 4px 6px; }
.nu-seg .seg__btn small { font-size: 10.5px; opacity: .7; font-family: var(--font-body); }
.nu-unitk__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nu-unitk__row small { font-size: 12.5px; line-height: 1.35; flex: 1 1 160px; }
.nu-unitk.is-custom .stepper-input { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 70%, transparent); border-radius: 12px; }
.nu-unitk .nu-link .ic { width: 14px; height: 14px; }
.nu-pick__total small { display: block; font: 400 12px/1.3 var(--font-body); color: var(--text-3); margin-top: 2px; }
.nu-note--learn { align-items: center; flex-wrap: wrap; }
.nu-note--learn > span { flex: 1 1 200px; }
/* รายการที่บันทึก: แตะชื่อเพื่อแก้ */
.nu-item__name { display: block; width: 100%; min-width: 0; text-align: left; padding: 4px 6px; margin: -4px -6px; border-radius: 10px; color: inherit; cursor: pointer; }
.nu-item__name:hover { background: var(--surface-2); }
.nu-item__name:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nu-item__name b { display: block; overflow-wrap: anywhere; }
.nu-item__note { display: flex !important; align-items: center; gap: 4px; color: var(--text-2) !important; font-style: italic; }
.nu-item__note .ic { width: 12px; height: 12px; flex: none; }

/* เล่นให้โดน (หน้าท่า) */
.feel-block__sub { margin: -2px 0 12px; font-size: 14px; }
.feel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feel-card { padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.feel-card small { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-3); }
.feel-card small .ic { width: 14px; height: 14px; }
.feel-card b { display: block; margin-top: 4px; font: 600 17px/1.35 var(--font-display); }
.feel-card p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); display: flex; gap: 5px; align-items: flex-start; }
.feel-card p .ic { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--text-3); }
.feel-card--where { background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.feel-weight { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.feel-weight .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--text-3); }
.feel-block__h { margin: 16px 0 8px; font: 600 14.5px/1.3 var(--font-display); }
.feel-fixes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feel-fix { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; line-height: 1.5; }
.feel-fix b { font-weight: 600; }
.feel-fix span { color: var(--text-2); }
.feel-fix--joint { background: color-mix(in srgb, var(--danger) 9%, var(--surface-2)); }
.feel-block__hint { display: flex; gap: 6px; align-items: flex-start; margin-top: 12px; }
.feel-block__hint .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
@media (max-width: 640px) {
  .feel-grid { grid-template-columns: 1fr; }
  .feel-fix { grid-template-columns: 1fr; gap: 3px; }
}
/* สูตรอาหารสุขภาพ */
.nu-rc-filters { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nu-rc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.nu-rc { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.nu-rc__main { display: flex; flex-direction: column; gap: 5px; text-align: left; color: inherit; min-width: 0; }
.nu-rc__main > b { font: 600 15px/1.35 var(--font-display); }
.nu-rc__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nu-rc__top small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); }
.nu-rc__top .ic { width: 13px; height: 13px; }
.nu-rc__desc { font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nu-rc__nums { font-size: 12.5px; color: var(--text-2); }
.nu-rc__nums b { font-size: 17px; color: var(--text); }
.nu-rc > .btn { align-self: flex-start; }
.nu-rc:hover { border-color: var(--border-2); }
.nu-rc__all { grid-column: 1 / -1; }
.badge--lean { background: color-mix(in srgb, #fb923c 18%, transparent); color: #fb923c; }
.badge--muscle { background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--brand-strong, var(--brand)); }
.badge--balance { background: color-mix(in srgb, #34d399 18%, transparent); color: #10b981; }
[data-theme="light"] .badge--lean { color: #c2410c; }
[data-theme="light"] .badge--balance { color: #047857; }
.nu-recipe__head h3 { font: 700 21px/1.3 var(--font-display); margin: 8px 0 6px; }
.nu-recipe__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.nu-recipe__facts span { display: inline-flex; align-items: center; gap: 5px; }
.nu-recipe__facts .ic { width: 15px; height: 15px; color: var(--text-3); }
.nu-recipe__facts b { color: var(--text); }
.nu-recipe__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; margin-top: 16px; }
.nu-recipe__cols h4 { display: flex; align-items: center; gap: 6px; font: 600 15px/1.3 var(--font-display); margin: 0 0 8px; }
.nu-recipe__cols h4 .ic { width: 17px; height: 17px; color: var(--text-3); }
.nu-recipe__cols h4 small { font-weight: 400; color: var(--text-3); font-size: 12.5px; }
.nu-recipe__ing { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nu-recipe__ing li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.nu-recipe__ing li small { color: var(--text-3); font-size: 12px; text-align: right; }
.nu-recipe__ing li b { text-align: right; font-size: 13.5px; }
.nu-recipe__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.nu-recipe__eat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.nu-recipe__eat .seg { flex: 1 1 260px; }
.nu-recipe__eat .select { width: auto; flex: 0 0 auto; }
.nu-recipe__eat .btn { flex: 1 1 200px; }
@media (max-width: 640px) {
  .nu-rc-grid { grid-template-columns: 1fr; }
  .nu-recipe__cols { grid-template-columns: 1fr; }
  .nu-recipe__eat .seg, .nu-recipe__eat .select, .nu-recipe__eat .btn { flex: 1 1 100%; width: 100%; }
  .nu-pick .nu-seg { flex-wrap: wrap; row-gap: 3px; }
  .nu-pick .nu-seg .seg__btn { flex: 1 1 30%; font-size: 12.5px; }
}

@media (max-width: 1199px) {
  .nu-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .nu-setup { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 1023px) {
  .nu-layout, .nu-setup { grid-template-columns: minmax(0, 1fr); }
  .nu-setup__side { position: static; }
}
@media (max-width: 640px) {
  .nu-card { padding: 16px; border-radius: 18px; }
  .nu-budget { flex-direction: column; align-items: stretch; gap: 14px; }
  .nu-budget__ring { width: 150px; align-self: center; }
  .nu-budget__nums b { font-size: 18px; }
  .nu-tell__box { flex-direction: column; }
  .nu-tell__box .btn { min-height: 46px; }
  .nu-item { grid-template-columns: minmax(0, 1fr) auto 46px 28px; gap: 6px; }
  .nu-parse__row { grid-template-columns: minmax(0, 1fr) auto 28px; }
  .nu-parse__row > .num { display: none; }
  .nu-wo__row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .nu-wo__row > .nu-link { grid-column: 2 / -1; justify-self: start; }
  .nu-result__big b { font-size: 34px; }
  .nu-kv--2, .nu-kv { grid-template-columns: 1fr 1fr; }
  .nu-kv > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nu-daybar__date { font-size: 15px; }
  .nu-choice, .nu-choice--row { grid-template-columns: 1fr 1fr; }
  .nu-choice__ic { display: none; }
}
@media (max-width: 359px) {
  .nu-choice { grid-template-columns: 1fr; }
  .nu-budget__nums { gap: 6px; }
  .nu-budget__nums > div { padding: 8px; }
}

/* ---------- พลังงานและอาหาร: ระบบเรียนรู้ตัวผู้ใช้ + ส่วนเสริม ---------- */
.badge--ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.nu-grid--goal { grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); }
.nu-choice--5 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.chip--mine { border-color: color-mix(in srgb, var(--brand) 60%, var(--border)); background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface)); color: var(--text); }
.chip--mine .ic { width: 14px; height: 14px; color: var(--brand-strong); }
.nu-meal__acts { margin-left: auto; display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nu-meal__head .nu-meal__acts .nu-link { margin-left: 0; }
.nu-comp__foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.nu-link--muted { color: var(--text-3) !important; font-size: 13px; }
.nu-note--learn { background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface)); color: var(--text); }
.nu-note--learn .ic { color: var(--brand-strong); }
.nu-plan__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.nu-learn { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.nu-learn > .hint { margin: -4px 0 12px; line-height: 1.5; }
.nu-meta { background: var(--surface-2); border-radius: 14px; padding: 12px; }
.nu-meta__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--font-display); }
.nu-meta__head b { font-weight: 600; font-size: 14.5px; }
.nu-meta__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 6px; }
.nu-meta__nums > div { background: var(--surface); border-radius: 12px; padding: 9px 10px; }
.nu-meta__nums span { display: block; font-size: 12px; color: var(--text-3); }
.nu-meta__nums b { font-size: 21px; }
.nu-meta__nums small { font-size: 11.5px; color: var(--text-3); margin-left: 4px; }
.nu-meta > .hint { line-height: 1.5; margin-top: 6px; }
.nu-progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: 10px 0 4px; }
.nu-progress i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--y-600)); transition: width .6s var(--ease); }
.nu-switch { display: flex; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer; font-size: 14px; user-select: none; }
.nu-switch input { position: absolute; opacity: 0; pointer-events: none; }
.nu-switch i { width: 40px; height: 24px; border-radius: 99px; background: var(--border-2); position: relative; flex: none; transition: background .2s; }
.nu-switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.nu-switch input:checked + i { background: var(--success); }
.nu-switch input:checked + i::after { transform: translateX(16px); }
.nu-switch input:focus-visible + i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent); }
.nu-ins-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nu-ins { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-2); padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.nu-ins > .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--text-3); }
.nu-ins--good { background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.nu-ins--good > .ic { color: var(--success); }
.nu-ins--warn { background: color-mix(in srgb, var(--warn) 11%, var(--surface)); }
.nu-ins--warn > .ic { color: var(--warn); }
.nu-ins--info > .ic { color: var(--info); }
.nu-kv small .ic { width: 12px; height: 12px; vertical-align: -2px; color: var(--brand-strong); }
@media (max-width: 640px) {
  .nu-grid--goal { grid-template-columns: minmax(0, 1fr); }
  .nu-choice--5 { grid-template-columns: 1fr 1fr; }
  .nu-meal__head { flex-wrap: wrap; }
}

/* ---------- ตัวเล่นการฝึก: สรุปการเผาผลาญรายเซ็ต · ทำต่อ · งบกินวันนี้ · เช็กอินก่อนฝึก ---------- */
.wo__card--done { max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.wo__trophy.is-partial { background: #f59e0b; box-shadow: 0 10px 30px -8px rgba(245,158,11,.55); }
.wo__stats b small { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55); }
.wo__energy { margin-top: 12px; text-align: left; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); padding: 10px 12px; }
.wo__energy-top { display: flex; gap: 10px; align-items: center; }
.wo__energy-top > .ic { width: 22px; height: 22px; color: var(--brand); flex: none; }
.wo__energy-top b { display: block; font: 600 15.5px/1.3 var(--font-display); color: #fff; }
.wo__energy-top small { display: block; font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 1px; }
.wo__edetail { margin-top: 8px; }
.wo__edetail > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; font: 500 13px/1.3 var(--font-display); color: var(--brand); padding: 2px 0; }
.wo__edetail > summary::-webkit-details-marker { display: none; }
.wo__edetail > summary .ic { width: 15px; height: 15px; transition: transform .2s; }
.wo__edetail[open] > summary .ic { transform: rotate(180deg); }
.wo__erow { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); margin-top: 6px; }
.wo__erow-h { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.wo__erow-h b { font-weight: 600; color: #fff; }
.wo__erow-h em { font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--brand); color: var(--brand-ink); margin-left: 4px; }
.wo__erow-h span { color: rgba(255,255,255,.7); white-space: nowrap; }
.wo__esets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.wo__esets span { font-size: 11.5px; padding: 3px 7px; border-radius: 7px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; }
.wo__basis { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 8px; line-height: 1.45; }
.wo__est { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: #fcd34d; margin-top: 8px; line-height: 1.45; }
.wo__est .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.wo__resume { display: flex; gap: 8px; align-items: flex-start; justify-content: center; font-size: 13px; color: rgba(255,255,255,.75); margin-top: 10px; text-align: left; }
.wo__resume .ic { width: 16px; height: 16px; flex: none; color: #f59e0b; margin-top: 2px; }
.wo__goal:not(:empty) { margin-top: 10px; text-align: left; }
.wo__planbtn.is-warn { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.1); }
.wo__planbtn.is-warn > .ic:first-child { color: #f59e0b; }
.wo__finnote { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 8px; font-size: 13px; color: var(--brand); }
.wo__finnote .ic { width: 15px; height: 15px; }
/* เช็กอินก่อนฝึก (หน้าต่างตามธีม) */
.wo-ci__list { display: flex; flex-direction: column; }
.wo-ci__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.wo-ci__row:first-child { border-top: 0; }
.wo-ci__row b { font-weight: 500; }
.wo-ci__row small { display: block; font-size: 12px; color: var(--text-3); }
.wo-ci__row > .num { text-align: right; font-size: 16px; }
.wo-ci__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.wo-ci__ok { display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--success) 10%, var(--surface)); font-size: 14px; }
.wo-ci__ok .ic { width: 20px; height: 20px; color: var(--success); flex: none; }
.wo-ci__over { padding: 12px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--warn) 55%, var(--border)); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.wo-ci__over > b { display: flex; gap: 6px; align-items: center; font-family: var(--font-display); }
.wo-ci__over > b .ic { width: 18px; height: 18px; color: var(--warn); }

/* ---------- หน้าชุดฝึก: ประวัติ (แคลอรี่รายเซ็ต · ทำไม่จบ) ---------- */
.hist-row { border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.hist-row__head { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 16px; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; text-align: left; }
.hist-row__ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 13%, transparent); color: var(--success); }
.hist-row.is-partial .hist-row__ic { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.hist-row__ic .ic { width: 16px; height: 16px; }
.hist-row__txt b { display: block; font: 500 14px/1.3 var(--font-display); }
.hist-row__txt small { display: block; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.hist-row__kcal { text-align: right; }
.hist-row__kcal b { display: block; font-size: 16px; line-height: 1.2; }
.hist-row__kcal small { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.hist-row__chev { width: 16px; height: 16px; color: var(--text-3); transition: transform .2s; }
.hist-row.is-open .hist-row__chev { transform: rotate(180deg); }
.hist-row__detail { padding: 0 10px 10px; }
.hist-row__detail .nu-ld { background: var(--surface); margin-top: 0; }

/* ---------- คิวเต้นต่อเนื่อง (routine.php · assets/js/pages/routine.js) ----------
   จอกว้าง: ซ้าย = ท่าให้เลือก (ติดจอ เลื่อนในกรอบ) · ขวา = ชื่อ/สรุปเวลา/คิวท่า/คิวเพลง + แถบเริ่มติดล่าง
   ≤1023: คอลัมน์เดียว ท่าให้เลือกเป็นแถวเลื่อนข้าง 2 แถว · ≤560: แถวคิวท่าจัดเป็น 2 บรรทัด */
.rt { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 24px; align-items: start; }
.rt__pal { min-width: 0; position: sticky; top: calc(var(--header-h) + 14px); }
.rt__pal .rt__card { display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 28px); }
.rt__pal .rt__card > :not(.rt__moves) { flex: none; }
.rt__card .chips--scroll { margin: 0 -18px; padding: 0 18px 2px; scroll-padding: 0 18px; }
.rt__side { min-width: 0; }
.rt__card { padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.rt__card + .rt__card { margin-top: 16px; }
.rt__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rt__pal .hint { display: flex; align-items: center; gap: 6px; }
.rt__pal .hint .ic { width: 15px; height: 15px; flex: none; }
.rt__moves { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; gap: 8px; margin-top: 12px; padding: 2px; scrollbar-width: thin; }
.rt__mv { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px 6px 6px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; transition: border-color .15s, background .15s, transform .12s; }
.rt__mv:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.rt__mv:active { transform: scale(.98); }
.rt__mv-th, .rt__th { position: relative; flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 90% at 50% 25%, var(--stage-a), var(--stage-b)); }
.rt__mv-th img, .rt__th img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.rt__mv-th img[data-loading], .rt__th img[data-loading] { opacity: 0; }
.rt__mv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rt__mv-t b { font: 500 14px/1.3 var(--font-display); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rt__mv-t small { display: flex; align-items: center; gap: 8px; }
.rt__mv-add { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--text-2); transition: background .15s, color .15s; }
.rt__mv-add .ic { width: 17px; height: 17px; }
.rt__mv:hover .rt__mv-add { background: var(--brand); color: var(--brand-ink); }
.rt__mv.is-added .rt__mv-add { animation: rtAdd .45s var(--ease); }
@keyframes rtAdd { 40% { transform: scale(1.25); background: var(--brand); color: var(--brand-ink); } }
.rt__int { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.rt__int i { width: 4px; border-radius: 2px; background: var(--border-2); }
.rt__int i:nth-child(1) { height: 6px; }
.rt__int i:nth-child(2) { height: 9px; }
.rt__int i:nth-child(3) { height: 12px; }
.rt__int i.on { background: #f43f5e; }
.rt__name { height: 52px; font: 600 18px/1.2 var(--font-display); }
.rt__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rt__sum > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.rt__sum b { font: 700 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt__sum span { font-size: 12.5px; color: var(--text-3); }
.rt__bar { height: 8px; margin-top: 10px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.rt__bar b { display: block; width: 0; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--brand), #f43f5e); transition: width .3s var(--ease); }
.rt__bar b.is-over { background: var(--warn); }
.rt__opt { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rt__opt .label { display: flex; align-items: center; gap: 6px; }
.rt__opt .label .ic { width: 16px; height: 16px; color: var(--brand-strong); }
.rt__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--brand-strong); font: 500 13.5px/1.3 var(--font-display); }
.rt__link .ic { width: 15px; height: 15px; }
.rt__link:hover { text-decoration: underline; }
.rt__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rt__list { list-style: none; margin: 12px 0 0; padding: 2px; display: flex; flex-direction: column; gap: 6px; max-height: min(64vh, 720px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rt__list:empty { display: none; }
.rt__it { display: grid; grid-template-columns: 16px 40px 48px minmax(0, 1fr) 30px 30px 30px; grid-template-areas: "grip no th nm nm nm del" "grip no th ctl up down dup"; align-items: center; column-gap: 8px; row-gap: 3px; padding: 6px 6px 6px 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.rt__it.is-drag { opacity: .45; }
.rt__it.is-over { border-color: var(--brand); box-shadow: 0 -3px 0 -1px var(--brand); }
.rt__it.is-new { animation: rtNew 1s var(--ease); }
@keyframes rtNew { from { background: var(--brand-soft); border-color: var(--brand); } }
.rt__grip { grid-area: grip; display: grid; place-items: center; color: var(--text-3); cursor: grab; }
.rt__grip .ic { width: 15px; height: 15px; }
.rt__no { grid-area: no; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.rt__no b { font: 700 15px/1 var(--font-display); }
.rt__no small { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt__th { grid-area: th; width: 48px; height: 48px; border-radius: 10px; }
.rt__nm { display: contents; }
.rt__nm > b { grid-area: nm; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 14px/1.25 var(--font-display); }
.rt__ctl { grid-area: ctl; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rt__sel { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 2px 0 7px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); }
.rt__sel .ic { width: 14px; height: 14px; flex: none; }
.rt__sel select { height: 28px; max-width: 110px; padding: 0 2px; border: 0; background: transparent; color: var(--text); font: 600 13px/1 var(--font-display); cursor: pointer; }
.rt__sel select:focus { outline: none; }
.rt__sel:focus-within { border-color: var(--brand); }
.rt__sel.is-on { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: var(--brand-soft); }
.rt__acts { display: contents; }
.rt__acts [data-up] { grid-area: up; }
.rt__acts [data-down] { grid-area: down; }
.rt__acts [data-dup] { grid-area: dup; }
.rt__acts [data-del] { grid-area: del; }
.rt__acts button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--text-3); }
.rt__acts button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.rt__acts button[data-del]:hover { color: var(--danger); }
.rt__acts button:disabled { opacity: .3; cursor: default; }
.rt__acts .ic { width: 16px; height: 16px; }
.rt__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; padding: 26px 16px; border: 1.5px dashed var(--border-2); border-radius: 16px; text-align: center; color: var(--text-3); font-size: 14px; line-height: 1.5; }
.rt__empty[hidden] { display: none; }
.rt__empty .ic { width: 28px; height: 28px; color: var(--brand-strong); }
.rt__music .card-title .chip__count:empty { display: none; }
.rt__music .card-title .chip__count { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-weight: 600; }
.rt__foot { position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); }
.rt__foot-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rt__foot-sum b { font: 700 21px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.rt__foot-sum small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: #c8cdd6; }
.rt__foot .btn--soft { background: rgba(255,255,255,.12); color: #fff; }
.rt__foot .btn--soft:hover { background: rgba(255,255,255,.18); }
.rt__foot .btn:disabled { opacity: .45; pointer-events: none; }
@media (max-width: 1279px) {
  .rt { grid-template-columns: minmax(0, 1fr) 480px; }
  .rt__sel .ic { display: none; }
  .rt__sel { padding-left: 4px; }
}
@media (max-width: 1023px) {
  .rt { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rt__pal { position: static; }
  .rt__pal .rt__card { max-height: none; }
  .rt__moves { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 232px; overflow-x: auto; overflow-y: hidden; margin: 12px -18px 0; padding: 2px 18px 6px; scroll-padding: 0 18px; scroll-snap-type: x proximity; }
  .rt__mv { scroll-snap-align: start; }
  .rt__list { max-height: none; overflow: visible; }
  .rt__foot { bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); }
}
@media (max-width: 560px) {
  .rt__card { padding: 14px; border-radius: 18px; }
  .rt__card .chips--scroll { margin: 0 -14px; padding: 0 14px 2px; scroll-padding: 0 14px; }
  .rt__moves { margin: 10px -14px 0; padding: 2px 14px 6px; scroll-padding: 0 14px; grid-auto-columns: 210px; }
  .rt__mv-th { width: 48px; height: 48px; }
  .rt__sum b { font-size: 19px; }
  .rt__sum > div { padding: 9px 10px; }
  .rt__it { grid-template-columns: 44px minmax(0, 1fr) 28px 28px 28px; grid-template-areas: "th nm nm dup del" "th ctl ctl up down"; column-gap: 6px; row-gap: 4px; padding: 6px; }
  .rt__grip { display: none; }
  .rt__no { grid-area: th; z-index: 1; align-self: start; justify-self: start; margin: 2px; padding: 2px 5px; border-radius: 6px; background: rgba(0,0,0,.66); }
  .rt__no b { font-size: 11px; color: #fff; }
  .rt__no small { display: none; }
  .rt__th { width: 44px; height: 44px; align-self: start; }
  .rt__ctl { flex-wrap: nowrap; }
  .rt__acts button { width: 28px; height: 28px; }
  .rt__foot { padding-left: 12px; }
  .rt__foot .btn { padding: 0 12px; }
  .rt__foot [data-rt-save] span { display: none; }
}

/* คิวเพลง (แผงเพลงในตัวเล่น + หน้าจัดคิวเต้น) */
.mu__form { align-items: flex-start; }
.mu__links { height: auto; min-height: 48px; max-height: 180px; padding: 12px 14px; line-height: 1.45; font-size: 15px; resize: vertical; }
.mu__qhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mu__qact { display: flex; gap: 6px; }
.mu__queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mu__qi { display: flex; align-items: center; gap: 2px; padding-left: 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.mu__qi.is-on { border-color: var(--brand); background: var(--brand-soft); }
.mu__qi.is-err .mu__thumb { opacity: .45; }
.mu__qi.is-err small { color: var(--danger); }
.mu__qi.is-drag { opacity: .45; }
.mu__qi.is-over { border-color: var(--brand); }
.mu__qi .mu__pick { padding: 5px 6px 5px 2px; }
.mu__qi span.mu__pick:hover { background: none; }
.mu__qi .mu__rt { display: flex; flex-direction: column; gap: 2px; }
.mu__qi .mu__rt small { font: 600 11.5px/1.2 var(--font-display); color: var(--brand-strong); }
.mu__tt { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mu__grip { flex: none; display: grid; place-items: center; width: 16px; color: var(--text-3); cursor: grab; }
.mu__grip .ic { width: 14px; height: 14px; }
.mu__thumb { position: relative; }
.mu__thumb b { position: absolute; left: 3px; top: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px; background: rgba(0,0,0,.72); color: #fff; font: 700 10.5px/17px var(--font-display); text-align: center; }
.mu__qbtn { flex: none; display: flex; gap: 1px; padding-right: 4px; }
.mu__qbtn button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--text-3); }
.mu__qbtn button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.mu__qbtn button[data-mdel]:hover { color: var(--danger); }
.mu__qbtn button:disabled { opacity: .3; cursor: default; }
.mu__qbtn .ic { width: 15px; height: 15px; }
.mu__none { padding: 6px 0; }
.mu__rec { width: 100%; gap: 10px; padding: 6px 12px 6px 6px; color: var(--text); text-align: left; transition: border-color .15s; }
.mu__rec:hover { border-color: var(--brand); }
.mu__rec > .ic { flex: none; width: 18px; height: 18px; color: var(--text-3); }
@media (max-width: 420px) {
  .mu__qbtn button { width: 27px; }
  .mu__thumb { width: 54px; height: 32px; }
}

/* ตัวเล่นแบบต่อเนื่อง (workout.js · FLOW) — ท่าถัดไป · จังหวะเพลง */
.wo__card--flow .wo__eyebrow { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.wo__card--flow .wo__eyebrow span { color: #fff; font-variant-numeric: tabular-nums; }
.wo__flownext { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.35; transition: background .25s, color .25s; }
.wo__flownext .ic { flex: none; width: 17px; height: 17px; color: var(--brand); }
.wo__flownext span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wo__flownext.is-hot { background: rgba(255,196,0,.2); color: #fff; font-weight: 600; animation: muBlink 1s ease-in-out infinite; }
.wo__tempo { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.wo__tempo-l { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; color: rgba(255,255,255,.7); font-size: 13px; }
.wo__tempo-l .ic { width: 15px; height: 15px; color: #ff4e45; }
.wo__tempo > b { min-width: 76px; text-align: center; color: #fff; font: 700 16px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.wo__tap { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font: 500 13px/1 var(--font-display); }
.wo__tap .ic { width: 15px; height: 15px; color: var(--brand); }
.wo__tap:active { background: rgba(255,196,0,.25); }
.modal .wo__tempo-l, .modal .wo__tempo > b { color: var(--text); }
.modal .wo__mini { background: var(--surface-2); color: var(--text); }
.modal .wo__tap { border-color: var(--border-2); background: var(--surface-2); color: var(--text); }
.wo__bpmbtn { min-width: 0 !important; padding: 0 14px; color: #fff; border-color: rgba(255,255,255,.2); }
.wo__bpmbtn .ic { color: #ff4e45; }
.wo__card--flowboot .wo__tempo { padding: 8px; border-radius: 14px; background: rgba(255,255,255,.04); }
/* ทางเข้าหน้าคิวเต้นต่อเนื่อง (หน้าแรกเมื่อเลือกเป้าหมายเต้น · แท็บโปรแกรมเมื่อกรองเต้น) */
.rt-cta { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 20px; border: 1px solid color-mix(in srgb, #f43f5e 32%, var(--border)); background: linear-gradient(115deg, color-mix(in srgb, #f43f5e 13%, var(--surface)), var(--surface) 70%); color: var(--text); transition: border-color .18s, box-shadow .18s; }
.rt-cta:hover { border-color: #f43f5e; box-shadow: var(--shadow-sm); }
.rt-cta[hidden] { display: none; }
.rt-cta__ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #f43f5e; color: #fff; }
.rt-cta__ic .ic { width: 24px; height: 24px; }
.rt-cta__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rt-cta__t b { font: 600 16px/1.3 var(--font-display); }
.rt-cta__t small { color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.rt-cta > .btn { flex: none; }
@media (max-width: 560px) {
  .rt-cta { flex-wrap: wrap; padding: 14px; }
  .rt-cta > .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   คลังอาหาร (foods.php · assets/js/pages/foods.js) + รายละเอียดอาหารในการ์ดปรับ (nu-food.js) + ผลค้นหาอาหาร
   ========================================================================= */
:root { --fd-p: #ef4444; --fd-c: #f59e0b; --fd-f: #3b82f6; --fd-o: #a855f7; }
.nu-tabs { margin: -8px 0 18px; }
/* งบแคลวันนี้ (มุมขวาบน) */
.fd-today { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color .18s, transform .25s var(--ease); }
.fd-today:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); }
.fd-today__t { display: flex; flex-direction: column; gap: 2px; }
.fd-today__t small { font-size: 12px; color: var(--text-3); }
.fd-today__t b { font: 600 16px/1.2 var(--font-display); white-space: nowrap; }
.fd-today__t em { font-style: normal; font-weight: 500; color: var(--text-3); }
.fd-today__bar { display: block; width: 88px; height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.fd-today__bar b { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .5s var(--ease); }
.fd-today.is-over .fd-today__bar b { background: var(--danger); }
.fd-today__cta { font: 500 13px/1.2 var(--font-display); color: var(--brand-strong); }
.fd-today > .ic { width: 16px; height: 16px; color: var(--text-3); }
.fd-today.is-bump { transform: scale(1.04); }
/* การ์ดอาหารจากลิงก์ ?f= */
.fd-focus { --mc: var(--brand); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; margin-bottom: 18px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--mc) 40%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--mc) 12%, var(--surface)), var(--surface) 65%); }
.fd-focus__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--mc) 18%, transparent); color: var(--mc); }
.fd-focus__ic .ic { width: 28px; height: 28px; }
.fd-focus__body { min-width: 0; }
.fd-focus__body > small { font-size: 12.5px; color: var(--text-3); }
.fd-focus__body h2 { font-size: 22px; line-height: 1.3; margin: 2px 0; overflow-wrap: anywhere; }
.fd-focus__body > p { color: var(--text-2); font-size: 14px; }
.fd-focus__nums { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-top: 8px; font-size: 14px; color: var(--text-2); }
.fd-focus__nums i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.fd-focus__nums b { color: var(--text); }
.fd-focus__kcal b { font-size: 24px; }
.fd-focus__acts { display: flex; gap: 8px; }
/* หมวด: 9 × 2 (เดสก์ท็อป) · 6 × 3 (แท็บเล็ต) · เลื่อนแนวนอน 2 แถว (มือถือ) */
.fd-cats { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.fd-cat { --mc: var(--text-2); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; padding: 12px 6px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-align: center; transition: border-color .18s, background .18s, box-shadow .18s, transform .12s; }
.fd-cat:hover { border-color: color-mix(in srgb, var(--mc) 60%, var(--border)); }
.fd-cat:active { transform: scale(.97); }
.fd-cat:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fd-cat__ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--mc) 16%, transparent); color: var(--mc); transition: background .18s, color .18s; }
.fd-cat__ic .ic { width: 23px; height: 23px; }
.fd-cat__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.fd-cat__t b { font: 600 13.5px/1.25 var(--font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fd-cat__t small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.fd-cat.is-on { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 13%, var(--surface)); box-shadow: 0 0 0 1px var(--mc), 0 10px 24px -16px var(--mc); }
.fd-cat.is-on .fd-cat__ic { background: var(--mc); color: #fff; }
.fd-cat--all.is-on { --mc: var(--brand); }
.fd-cat--all.is-on .fd-cat__ic { color: var(--ink); }
.fd-top .fd-subs { margin-top: 10px; }
.fd-subs[hidden] { display: none; }
.fd-view { flex: none; }
.fd-view .seg__btn { height: 40px; }
.fd-meta { margin-top: 2px; }
.fd-sort { flex-wrap: wrap; justify-content: flex-end; }
.fd-mine .ic { width: 15px; height: 15px; }
/* การ์ด */
.fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; transition: opacity .2s; }
.fd-grid.is-loading, .fd-list.is-loading { opacity: .5; pointer-events: none; }
.fd-card { --mc: var(--brand); position: relative; min-width: 0; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); transition: border-color .18s, box-shadow .18s; }
.fd-card:hover { border-color: color-mix(in srgb, var(--mc) 55%, var(--border)); box-shadow: var(--shadow-sm); }
.fd-card__main { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 14px 12px; color: inherit; border-radius: inherit; }
.fd-card__main:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fd-card__cat { display: flex; align-items: center; gap: 5px; min-width: 0; padding-right: 40px; font-size: 12px; color: var(--text-3); }
.fd-card__cat .ic { width: 15px; height: 15px; flex: none; color: var(--mc); }
.fd-card__cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-card__name { margin-top: 2px; min-height: 2.7em; font: 600 15.5px/1.35 var(--font-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fd-card__unit { font-size: 12.5px; color: var(--text-3); }
.fd-card__kcal { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--text-2); }
.fd-card__kcal b { margin-right: 2px; font-size: 24px; color: var(--text); }
.fd-card__pcf { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fd-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.fd-bar--lg { height: 8px; max-width: 360px; margin-top: 10px; }
.fd-bar i, .fd-split i { display: block; flex: none; width: var(--w); height: 100%; }
.fd-bar .p, .fd-split .p, .fd-focus__nums .p, .fd-legend__p i { background: var(--fd-p); }
.fd-bar .c, .fd-split .c, .fd-focus__nums .c, .fd-legend__c i { background: var(--fd-c); }
.fd-bar .f, .fd-split .f, .fd-focus__nums .f, .fd-legend__f i { background: var(--fd-f); }
.fd-split .o, .fd-legend__o i { background: var(--fd-o); }
.fd-add { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand-strong); transition: background .18s, color .18s, transform .12s; }
.fd-add:hover { background: var(--brand); color: var(--ink); }
.fd-add:active { transform: scale(.9); }
.fd-add:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fd-add .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.fd-add.is-loading { pointer-events: none; opacity: .55; }
.fd-add.is-done { background: #10b981; color: #fff; }
/* ตาราง */
.fd-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; transition: opacity .2s; }
.fd-row { --mc: var(--brand); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px 88px 88px 88px 46px; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); }
.fd-row:first-child { border-top: 0; }
.fd-row:hover { background: var(--surface-2); }
.fd-row--head { padding: 10px 12px; background: var(--surface-2); font: 500 12.5px/1.2 var(--font-display); color: var(--text-3); }
.fd-row--head span:not(:first-child) { text-align: right; }
.fd-row__main { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; border-radius: 10px; }
.fd-row__main:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fd-row__ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--mc) 15%, transparent); color: var(--mc); }
.fd-row__ic .ic { width: 18px; height: 18px; }
.fd-row__t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fd-row__t b { font: 500 14.5px/1.35 var(--font-display); overflow-wrap: anywhere; }
.fd-row__t small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row__kcal { text-align: right; font-size: 16px; font-weight: 600; }
.fd-row__kcal small { display: none; margin-left: 3px; font: 400 11.5px/1 var(--font-body); color: var(--text-3); }
.fd-row__m { text-align: right; font-size: 14px; color: var(--text-2); }
.fd-row .fd-add { position: static; width: 34px; height: 34px; justify-self: end; }
.fd-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 20px; }
.fd-note .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
/* รายละเอียดอาหาร (การ์ดปรับในหน้าต่าง) */
.fd-info { margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.fd-split { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.fd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.fd-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fd-legend i { width: 9px; height: 9px; border-radius: 3px; }
.fd-legend b { color: var(--text); font-size: 14px; }
.fd-legend small { color: var(--text-3); }
.fd-facts { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.fd-burn { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.fd-burn > small { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-3); }
.fd-burn > small .ic { width: 15px; height: 15px; color: #f97316; }
.fd-burn__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.fd-burn__row span { display: block; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--surface); font-size: 12.5px; color: var(--text-2); }
.fd-burn__row b { font-size: 20px; color: var(--text); margin-right: 3px; }
.fd-burn__row small { display: block; font-size: 12px; color: var(--text-3); }
.fd-burn__est { display: block; margin-top: 6px; font-size: 12px; color: var(--text-3); }
/* ค้นหาทั้งเว็บ: ผลลัพธ์อาหาร */
.search-ov__sec { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px; font: 600 12.5px/1 var(--font-display); color: var(--text-3); }
.search-ov__sec .ic { width: 15px; height: 15px; }
.search-item__thumb--ic { display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); color: var(--brand-strong); }
.search-item__thumb--ic .ic { width: 24px; height: 24px; }
@media (max-width: 1199px) {
  .fd-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .nu-tabs .tab { padding: 0 10px; }
  .nu-tabs .tab__count { display: none; }
}
@media (max-width: 767px) {
  .fd-cats { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 94px; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 4px; padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); }
  .fd-cats::-webkit-scrollbar { display: none; }
  .fd-cat { padding: 10px 4px 8px; border-radius: 16px; scroll-snap-align: start; }
  .fd-cat__ic { width: 36px; height: 36px; border-radius: 11px; }
  .fd-cat__ic .ic { width: 20px; height: 20px; }
  .fd-cat__t b { font-size: 12.5px; }
  .fd-cat__t small { font-size: 11px; }
  .fd-today { width: 100%; justify-content: space-between; }
  .fd-today__bar { flex: 1; width: auto; max-width: 160px; }
  .fd-meta { flex-direction: column; align-items: stretch; }
  .fd-sort { justify-content: flex-start; }
  .fd-sort .select { flex: 1 1 140px; min-width: 0; }
}
@media (max-width: 640px) {
  .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fd-card { border-radius: 16px; }
  .fd-card__main { padding: 12px 10px 10px; }
  .fd-card__cat { padding-right: 34px; }
  .fd-card__name { font-size: 14.5px; }
  .fd-card__kcal b { font-size: 21px; }
  .fd-add { top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 10px; }
  .fd-view .seg__btn span { display: none; }
  .fd-view .seg__btn { padding: 0 10px; }
  .fd-focus { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 14px; gap: 12px; }
  .fd-focus__ic { width: 44px; height: 44px; border-radius: 13px; }
  .fd-focus__ic .ic { width: 23px; height: 23px; }
  .fd-focus__body h2 { font-size: 19px; }
  .fd-focus__acts { grid-column: 1 / -1; }
  .fd-focus__acts .btn--primary { flex: 1; justify-content: center; }
  .fd-row { grid-template-columns: auto auto auto minmax(0, 1fr) auto 34px; grid-template-areas: "main main main main kcal add" "p c f . . add"; column-gap: 10px; row-gap: 2px; padding: 9px 10px; }
  .fd-row--head { display: none; }
  .fd-row__main { grid-area: main; }
  .fd-row__kcal { grid-area: kcal; }
  .fd-row__kcal small { display: inline; }
  .fd-row .fd-add { grid-area: add; }
  .fd-row__m { font-size: 12px; color: var(--text-3); text-align: left; }
  .fd-row__m::before { content: attr(data-l) ' '; }
  .fd-row__m[data-l="P"] { grid-area: p; padding-left: 44px; }
  .fd-row__m[data-l="C"] { grid-area: c; }
  .fd-row__m[data-l="F"] { grid-area: f; }
  .fd-burn__row { gap: 6px; }
  .fd-burn__row span { padding: 7px 8px; }
  .fd-burn__row b { font-size: 18px; }
}

/* ---------- Tier list ในคลังท่า (library) — Tier S–D ตามประเภท · includes/tiers.php · library.js · cards.js ---------- */
/* ป้าย Tier บนการ์ดท่า (มุมล่างซ้ายของภาพ — มุมบนเป็นระดับความยากและปุ่ม +) */
.ex-tier { --tier: #94a3b8; position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; pointer-events: auto; }
.ex-tier > span[aria-hidden] { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 8px; background: var(--tier); color: var(--tier-ink, #fff);
  font: 800 14px/1 var(--font-display); box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); }
.ex-tier small { font: 700 9.5px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.ex-tier--S { --tier: #ff4d6d; }
.ex-tier--A { --tier: #ff8a3d; }
.ex-tier--B { --tier: #ffc400; --tier-ink: #111318; }
.ex-tier--C { --tier: #3ecf7a; --tier-ink: #0b2415; }
.ex-tier--D { --tier: #94a3b8; --tier-ink: #111318; }
.ex-card--compact .ex-tier { left: 6px; bottom: 6px; }
.ex-card--compact .ex-tier > span[aria-hidden] { height: 20px; padding: 0 6px; font-size: 12px; border-radius: 6px; }
.ex-card--compact .ex-tier small { display: none; }

/* แถบ Tier: ชิปกรอง S–D · Tier คืออะไร? · มุมมอง การ์ด | Tier list · เรียงตาม */
.lib-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 4px 0 10px; }
.lib-tiers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.lib-tiers__lbl { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; font: 600 14px/1 var(--font-display); color: var(--text-2); }
.lib-tiers__lbl .ic { width: 18px; height: 18px; color: var(--text-3); }
.lib-tchip { --tier: #94a3b8; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--tier) 55%, var(--border));
  color: var(--text); font: 800 15px/1 var(--font-display); transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .12s; }
.lib-tchip:hover { border-color: var(--tier); }
.lib-tchip:active { transform: scale(.94); }
.lib-tchip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lib-tchip.is-on { background: var(--tier); border-color: var(--tier); color: var(--tier-ink, #fff); box-shadow: 0 6px 16px -8px var(--tier); }
.lib-tchip--S { --tier: #ff4d6d; }
.lib-tchip--A { --tier: #ff8a3d; }
.lib-tchip--B { --tier: #ffc400; --tier-ink: #111318; }
.lib-tchip--C { --tier: #3ecf7a; --tier-ink: #0b2415; }
.lib-tchip--D { --tier: #94a3b8; --tier-ink: #111318; }
.lib-tinfo-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: var(--r-full); color: var(--text-2); font: 500 13.5px/1 var(--font-display); white-space: nowrap; transition: background .15s, color .15s; }
.lib-tinfo-btn:hover, .lib-tinfo-btn.is-on { color: var(--text); background: var(--surface-2); }
.lib-tinfo-btn .ic { width: 17px; height: 17px; }
.lib-bar__end { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.lib-view { padding: 3px; border-radius: 12px; flex: none; }
.lib-view .seg__btn { height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 9px; }
.lib-view .seg__btn .ic { width: 16px; height: 16px; }
.lib-bar .lib-sort { min-width: 0; }
.lib-bar .lib-sort .select { max-width: 100%; }
/* กล่องคำอธิบาย (ไม่ใช่ความยาก + เกณฑ์ของประเภทที่เลือก) */
.lib-tinfo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 14px; line-height: 1.6; }
.lib-tinfo p { max-width: 96ch; }
.lib-tinfo__lead { display: flex; gap: 10px; color: var(--text); }
.lib-tinfo__lead .ic { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--brand-strong); }
[data-theme="dark"] .lib-tinfo__lead .ic { color: var(--brand); }
.lib-tinfo__crit { padding-left: 28px; }
.lib-tinfo__crit b { color: var(--text); font-family: var(--font-display); font-weight: 600; }
.lib-tinfo__scale { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 28px; font-size: 13px; }
.lib-tinfo__scale li { display: inline-flex; align-items: center; gap: 6px; }
.lib-tinfo__scale .tier-chip { margin: 0; }
.filter-group .chip .tier-chip { margin: 0 2px 0 -4px; }

/* มุมมอง Tier list: แถว S → D · ท่าเด่นไม่เกิน 2 บรรทัดต่อแถว + ปุ่มดูทั้งหมด (สลับเป็นการ์ดเฉพาะ Tier นั้น) */
.lib-tl { margin-top: 4px; }
.lib-tl .tierlist { gap: 14px; }
.lib-tl .tier { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.lib-tl .tier__badge { position: static; min-height: 84px; border-radius: 16px; }
.lib-tl .tier__badge em { margin-top: 3px; font: 600 11px/1 var(--font-display); font-style: normal; opacity: .8; }
.lib-tl .tier__items.lib-tl__items, .lib-tl__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; min-width: 0; }
.lib-tl__it { min-width: 0; gap: 10px; padding: 7px; border-left: 3px solid var(--tier); }
.lib-tl__it .ladder-item__thumb { width: 60px; height: 60px; }
.lib-tl__it .ladder-item__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; }
.lib-tl__it .ladder-item__main { display: flex; flex-direction: column; gap: 3px; }
.lib-tl__it .ladder-item__sub { flex-wrap: nowrap; gap: 6px; margin-top: 0; font-size: 12px; min-width: 0; overflow: hidden; }
.lib-tl__it .ladder-item__sub > span:not(.dot) { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.lib-tl__it .ladder-item__sub > span > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-tl__it .ladder-item__sub .ic { width: 14px; height: 14px; flex: none; }
.lib-tl__it .ladder-item__sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); flex: none; }
.lib-tl__it .pick-btn { width: 34px; height: 34px; border-radius: 10px; }
.lib-tl__it .pick-btn.is-added { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.lib-tl__all { grid-column: 1 / -1; justify-self: start; }
.lib-tl__all .ic { transform: none; }
@media (max-width: 640px) {
  .lib-bar { gap: 10px; }
  .lib-bar__end { width: 100%; margin-left: 0; }
  .lib-bar .lib-sort { flex: 1; }
  .lib-bar .lib-sort .select { width: 100%; }
  .lib-tchip { width: 36px; height: 36px; border-radius: 11px; }
  .lib-tinfo { padding: 12px 14px; font-size: 13.5px; }
  .lib-tinfo__crit, .lib-tinfo__scale { padding-left: 0; }
  /* Tier list บนมือถือ: ป้าย Tier เป็นแถบหัวแถว (ไม่กินความกว้างด้านข้าง) */
  .lib-tl .tier { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lib-tl .tier__badge { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 8px 12px; gap: 8px; border-radius: 12px; }
  .lib-tl .tier__badge b { font-size: 20px; }
  .lib-tl .tier__badge small { font-size: 13px; padding: 0; }
  .lib-tl .tier__badge em { margin: 0 0 0 auto; font-size: 12px; }
  .lib-tl .tier__items.lib-tl__items, .lib-tl__items { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 400px) {
  .lib-view .seg__btn .ic { display: none; }
  .lib-view .seg__btn { padding: 0 10px; }
  .lib-tinfo-btn { padding: 0 8px; }
}

/* ---------- แท็บโปรแกรม (sets.php): ตัวกรองอุปกรณ์ · เวลา · ระดับ + เรียง ---------- */
.prog-filter2 { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.prog-filter2 .chips { align-items: center; }
.prog-filter2__lbl { display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 86px; margin-right: 2px; font: 500 13.5px/1 var(--font-display); color: var(--text-3); }
.prog-filter2__lbl .ic { width: 16px; height: 16px; }
.prog-filter2 .chip .ic { width: 15px; height: 15px; }
.prog-meta { margin: 14px 0 0; }
.prog-meta + .rt-cta { margin-top: 12px; }
@media (max-width: 640px) {
  .prog-filter2__lbl { min-width: 0; }
}

/* ========== สไตล์ท่าเต้นแอโรบิค (FL_DANCE_STYLES): ชิปสไตล์ในคลังท่า + ช่องค้นหา/ชิปสไตล์ในคิวเต้นต่อเนื่อง (routine.php) ========== */
.lib-styles .chip .ic { width: 16px; height: 16px; }
.rt__head--q { flex-wrap: wrap; row-gap: 10px; }
.rt__head--q .card-title { flex: none; margin: 0; }
.rt__q { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.rt__q .input { height: 42px; border-radius: 12px; font-size: 15px; padding-left: 40px; }
.rt__q > .ic { left: 12px; width: 17px; height: 17px; }
.rt__card .rt__styles.chips--scroll { margin-top: 8px; }
.rt__styles .chip { height: 36px; padding: 0 12px; font-size: 14px; }
.rt__styles .chip .ic { width: 16px; height: 16px; }
.rt__styles .chip.is-empty:not(.is-on) { opacity: .5; }
.rt__none { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; padding: 22px 14px; border-radius: 16px; border: 1px dashed var(--border-2); color: var(--text-3); text-align: center; font-size: 14px; }
.rt__none > .ic { width: 22px; height: 22px; }
.rt__none[hidden] { display: none; }
@media (max-width: 1023px) {
  .rt__q { max-width: none; }
}
@media (max-width: 560px) {
  .rt__q { flex-basis: 100%; }
}