/* =====================================================================
   me.css — 個人頁（/me）：上課進度、助教作業完成度、我的預約
   沿用 design-system.css 的色票與圓角，不另立一套視覺。
   ===================================================================== */

.me-hero{min-height:340px;}
.me-hero .ds-hero-in{padding-top:120px;padding-bottom:56px;}

/* ---- 上方：名字 + 額度 ---- */
.me-top{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:22px 26px;box-shadow:0 14px 34px rgba(3,38,57,.06);}
.me-who{display:flex;align-items:center;gap:16px;min-width:0;}
.me-ava{width:52px;height:52px;border-radius:16px;background:var(--blue-pale);color:var(--blue-dark);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;font-size:20px;flex:0 0 auto;}
.me-name{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;
  font-size:20px;color:var(--ink);line-height:1.4;}
.me-edit{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 11px;
  font-size:12px;color:var(--ink-3);cursor:pointer;font-family:var(--font-body);}
.me-edit:hover{color:var(--blue);border-color:var(--blue-soft);}
.me-mail{font-size:13px;color:var(--ink-3);line-height:1.7;margin-top:3px;word-break:break-all;}
.me-quota{display:flex;gap:10px;flex-wrap:wrap;}
.mq{min-width:96px;text-align:center;background:var(--bg-soft);border-radius:var(--r-sm);padding:12px 14px;}
.mq b{display:block;font-family:var(--font-display);font-size:26px;line-height:1.2;color:var(--blue);}
.mq span{display:block;font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.6;}
.me-hint{margin:14px 2px 0;font-size:13.5px;color:var(--ink-3);line-height:1.85;}

/* ---- 上課進度：章節卡 ---- */
.me-chs{display:flex;flex-direction:column;gap:20px;}
.me-ch{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px 26px;
  box-shadow:0 14px 34px rgba(3,38,57,.05);}
.me-ch-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.me-ch-h h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);line-height:1.45;}
.me-badge{font-size:12px;padding:4px 12px;border-radius:999px;background:var(--bg-soft);color:var(--ink-3);line-height:1.6;}
.me-badge.done{background:#E8F4DD;color:#2E6B0F;}
.me-bar{height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden;margin:12px 0 18px;}
.me-bar i{display:block;height:100%;border-radius:999px;background:var(--blue);transition:width .5s ease;}
.me-us{display:flex;flex-direction:column;gap:10px;}
.me-u{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--bg-soft);text-decoration:none;transition:transform .18s,box-shadow .18s;}
.me-u:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(3,38,57,.07);}
.me-u .tick{width:24px;height:24px;border-radius:50%;flex:0 0 auto;background:#fff;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-4);}
.me-u.on .tick{background:var(--green);border-color:var(--green);color:#fff;}
.me-u .tx{flex:1;min-width:0;}
.me-u .ep{font-size:12px;color:var(--ink-3);letter-spacing:.04em;line-height:1.6;}
.me-u .tp{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.55;}
.me-u .go{font-size:13px;color:var(--blue);white-space:nowrap;}

/* ---- 助教作業完成度 ---- */
.me-hw{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.me-a{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;
  display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 26px rgba(3,38,57,.05);}
.me-a .nm{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);line-height:1.5;}
.me-a .sub{font-size:12.5px;color:var(--ink-3);line-height:1.7;}
.me-a .st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);line-height:1.7;}
.me-a .st i{width:8px;height:8px;border-radius:50%;background:var(--ink-4);display:block;}
.me-a.done .st i{background:var(--green);}
.me-a.doing .st i{background:var(--orange);}
.me-a .go{margin-top:auto;padding-top:8px;font-size:13.5px;color:var(--blue);}

/* ---- 我的預約 ---- */
.me-bks{display:flex;flex-direction:column;gap:16px;}
.me-bk{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px 24px;text-decoration:none;box-shadow:0 12px 28px rgba(3,38,57,.05);
  transition:transform .18s,box-shadow .18s;}
.me-bk:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(3,38,57,.09);}
.me-bk .when{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);line-height:1.5;min-width:190px;}
.me-bk .who{font-size:13.5px;color:var(--ink-2);line-height:1.75;flex:1;min-width:160px;}
.me-bk .tag{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--blue-pale);color:var(--blue-dark);line-height:1.6;}
.me-bk .tag.onsite{background:var(--peach);color:#A64B00;}
.me-bk .stt{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--bg-soft);color:var(--ink-3);line-height:1.6;}
.me-bk .stt.ok{background:#E8F4DD;color:#2E6B0F;}
.me-bk .stt.warn{background:var(--yellow-soft);color:#8A6100;}

/* 匯款流程卡（待匯款／待對帳／已收款）＋ 提時段等回覆 */
.me-bkw{display:flex;flex-direction:column;}
.me-bkw .me-bk{position:relative;z-index:1;}
.me-pay{margin:-8px 14px 0;padding:20px 22px 18px;border-radius:0 0 var(--r-md) var(--r-md);
  border:1px solid var(--line);border-top:none;background:var(--bg-soft);}
.me-pay.wait{background:var(--peach);border-color:#f0d6bd;}
.me-pay.doing{background:var(--yellow-soft);border-color:#eddfae;}
.me-pay.ok{background:#EDF6E4;border-color:#cfe4bc;}
.me-pay .ttl{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.6;}
.me-pay .due{margin-top:6px;font-size:13.5px;color:var(--ink-2);line-height:1.85;}
.me-pay .due .code{font-family:var(--font-display);font-size:20px;letter-spacing:4px;color:var(--blue-dark);}
.me-pay .note{margin-top:10px;font-size:12.5px;color:var(--ink-3);line-height:1.8;}
.me-pay .acct{margin:10px 0 0;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;
  font-family:var(--font-body);font-size:13.5px;line-height:1.9;color:var(--ink);white-space:pre-wrap;}
.me-pay .frm{margin-top:12px;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.me-pay .frm label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2);}
.me-pay .frm input{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-family:inherit;
  font-size:14px;background:#fff;color:var(--ink);outline:none;min-width:150px;}
.me-pay .frm input:focus{border-color:var(--blue);}
.me-pay .frm .go{border:none;border-radius:999px;padding:11px 22px;background:var(--dark);color:#fff;
  font-family:var(--font-body);font-size:13.5px;cursor:pointer;}
.me-pay .frm .go:disabled{opacity:.55;cursor:default;}
/* 線上刷卡（PAYUNi） */
.me-pay .card-pay{margin-top:12px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;}
.me-pay .cp-go{border:none;border-radius:999px;padding:12px 26px;background:var(--dark);color:#fff;
  font-family:var(--font-body);font-size:14.5px;font-weight:700;cursor:pointer;}
.me-pay .cp-go:disabled{opacity:.55;cursor:default;}
.me-pay .cp-sub{margin-top:8px;font-size:12.5px;color:var(--ink-3);line-height:1.8;}
.me-pay .cp-test{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--yellow-soft);font-size:12.5px;color:var(--ink-2);line-height:1.8;}
.me-paybanner{max-width:1080px;margin:16px auto 0;padding:14px 18px;border-radius:12px;font-size:14px;line-height:1.8;color:var(--ink);}
.me-paybanner.ok{background:#EDF6E4;border:1px solid #cfe4bc;}
.me-paybanner.warn{background:var(--peach);border:1px solid #f0d6bd;}
@media (max-width:1112px){.me-paybanner{margin:16px 16px 0;}}
.me-props{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.me-prop{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--r-md);padding:18px 22px;}
.me-prop.no{border-left-color:var(--orange);}
.me-prop .ttl{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.6;}
.me-prop .sub{margin-top:5px;font-size:13.5px;color:var(--ink-2);line-height:1.85;}
.me-prop .sub a{color:var(--blue);}

.me-empty{background:#fff;border:1px dashed var(--gray-soft);border-radius:var(--r-md);padding:28px;
  text-align:center;color:var(--ink-3);font-size:14px;line-height:1.9;}
.me-out{margin-top:18px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 22px;
  font-size:13.5px;color:var(--ink-3);cursor:pointer;font-family:var(--font-body);}
.me-out:hover{color:var(--ink);}

/* ---- 預約成功頁 ---- */
.bs-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 36px;
  box-shadow:0 20px 46px rgba(3,38,57,.08);}
.bs-row{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.bs-row:last-of-type{border-bottom:none;}
.bs-row .k{width:104px;flex:0 0 auto;font-size:13.5px;color:var(--ink-3);line-height:1.85;}
.bs-row .v{flex:1;min-width:180px;font-size:15px;color:var(--ink);line-height:1.85;word-break:break-word;}
.bs-code{display:inline-block;font-family:var(--font-en);font-weight:700;font-size:26px;letter-spacing:.22em;
  color:var(--blue-dark);background:var(--blue-pale);border-radius:var(--r-sm);padding:10px 18px;}
.bs-join{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;border-radius:999px;
  padding:12px 24px;font-size:15px;box-shadow:0 12px 22px rgba(255,153,37,.28);margin-top:6px;}
.bs-note{margin-top:22px;font-size:13.5px;color:var(--ink-3);line-height:1.9;}
.bs-back{display:inline-block;margin-top:26px;font-size:14px;color:var(--blue);}

@media(max-width:860px){
  .me-hero .ds-hero-in{padding-top:96px;padding-bottom:40px;}
  .me-top{padding:18px 18px;}
  .me-ch{padding:20px 18px;}
  .me-bk{padding:18px;}
  .bs-card{padding:24px 20px;}
}

/* ── 體驗回饋邀請（匿名問卷入口）── */
.me-fb {
  text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-soft); padding: 30px 24px;
}
.me-fb-t { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--blue-deep); margin: 0 0 8px; }
.me-fb-s { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); margin: 0 0 20px; }
/* 課看完 / 上完真人支持 → 這張卡變亮，讓人比較想點 */
[data-sec="feedback"].hot .me-fb { background: var(--yellow-soft); border-color: var(--yellow); }
/* 我的能量紀錄 */
.me-en-list{display:flex;flex-direction:column;gap:10px;}
.me-en-row{display:grid;grid-template-columns:110px 1fr 1fr auto auto auto;gap:12px;align-items:center;background:#fff;border-radius:var(--r-md);padding:14px 18px;font-size:15px;color:var(--ink-2);}
.me-en-row .dt{color:var(--ink-3);font-size:14px;}
.me-en-row .lv{font-size:13.5px;padding:3px 10px;border-radius:999px;background:#E8F4DD;color:#3d7a1c;white-space:nowrap;}
.me-en-row.low .lv{background:#FFF5D1;color:#8a6400;}
.me-en-row.care .lv{background:#FDECEA;color:#a33a2c;}
.me-en-del{border:0;background:none;color:var(--ink-3);font-size:13px;cursor:pointer;padding:4px 6px;text-decoration:underline;}
.me-en-del:hover{color:#a33a2c;}
.me-en-view{font-size:13.5px;font-weight:700;color:#032639;background:#f5f7fa;border-radius:999px;padding:8px 14px;text-decoration:none;white-space:nowrap;min-height:36px;display:inline-flex;align-items:center;}
.me-en-view:hover{background:#eaf3ff;}
.me-en-foot{margin:14px 0 0;font-size:13.5px;color:var(--ink-3);}
.me-en-foot a,.me-empty a{color:var(--blue-deep);}
@media (max-width:640px){.me-en-row{grid-template-columns:1fr 1fr;gap:6px 12px;}.me-en-row .lv{justify-self:start;}}
/* 趨勢小圖（2026-11-04）：心情負擔與身體能量各一條線、HRV 已量 n/7 */
.me-en-trend{background:#fff;border-radius:var(--r-md);padding:18px 20px;margin:0 0 12px;}
.me-en-th{margin:0 0 12px;font-size:17px;font-weight:700;color:#032639;}
.me-en-trs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px;}
.me-en-tr{background:#f5f7fa;border-radius:12px;padding:12px 14px;}
.me-en-tr p{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;font-size:14px;color:#032639;}
.me-en-tr small{font-size:12px;color:var(--ink-3);}
.me-en-tr svg{display:block;width:100%;height:64px;overflow:visible;}
.me-en-tr path{fill:none;stroke:#032639;stroke-width:2;vector-effect:non-scaling-stroke;}
.me-en-tr circle{fill:#032639;}
.me-en-tr circle:last-of-type{fill:#ff772d;}
.me-en-tr-e{display:block;font-size:13px;color:var(--ink-3);padding:18px 0;}
.me-en-n{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:#032639;}
.me-en-dots{display:flex;gap:6px;}
.me-en-dots i{width:28px;height:8px;border-radius:99px;background:#eef2f6;}
.me-en-dots i.on{background:#032639;}
.me-en-tip{margin:8px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink-3);}
@media(max-width:620px){.me-en-trs{grid-template-columns:1fr;}}

/* 我的助教小結（11/9） */
.me-sums-wrap{margin-top:32px;}
.me-sums-h{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 12px;}
.me-sums{display:flex;flex-direction:column;gap:10px;}
.me-sum{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 18px;}
.me-sum summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--ink);line-height:1.6;}
.me-sum summary span{font-size:12.5px;color:var(--ink-3);}
.me-sum-t{margin-top:10px;font-size:14.5px;color:var(--ink-2);line-height:1.8;white-space:normal;word-break:break-word;}
.me-prop-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.me-prop-btn{font:inherit;font-size:13.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--dark);background:var(--dark);color:#fff;cursor:pointer;}
.me-prop-btn.ghost{background:#fff;color:var(--ink-2);border-color:var(--line);}
.me-prop-btn:disabled{opacity:.5;cursor:default;}

/* =====================================================================
   11/10 版面整理（介面師・前台設計系統）：平塗不加陰影、區塊節奏收緊、
   標題靠左＋橘短線、額度墨藍、跳轉膠囊、作業卡一排四張、能量紀錄改成清單
   ===================================================================== */
.me-page{--me-navy:#032639;--me-text:#5a6573;--me-line:#d6dee5;--me-panel:#f5f7fa;}
.me-page .ds-section{padding:clamp(40px,5vw,64px) 0;}
.me-page>.ds-section:first-child{padding-top:clamp(28px,4vw,44px);}
.me-page .ds-sec-head{text-align:left;align-items:flex-start;max-width:none;margin:0 0 22px;gap:10px;}
.me-page .ds-sec-head::before{content:"";display:block;width:56px;height:4px;border-radius:99px;background:#ff772d;}
.me-page .ds-sec-head .ds-h{font-size:clamp(22px,2.4vw,28px);color:var(--me-navy);}
section[id]{scroll-margin-top:84px;}

/* 平塗：卡片一律細線、不加陰影 */
.me-page .me-top,.me-page .me-ch,.me-page .me-a,.me-page .me-bk,.me-page .me-sum,.me-page .me-prop{box-shadow:none;border-color:var(--me-line);}
.me-page .me-u:hover,.me-page .me-bk:hover{transform:none;box-shadow:none;}
.me-page .me-u:hover{background:#eaf3ff;}
.me-page .me-bk:hover{border-color:var(--me-navy);}

/* 名字＋額度 */
.me-page .me-ava{background:var(--me-navy);color:#fff;}
.me-page .me-name{color:var(--me-navy);}
.me-page .mq{background:var(--me-panel);}
.me-page .mq b{color:var(--me-navy);font-variant-numeric:tabular-nums;}
.me-page .mq:first-child b{color:#ff772d;}

/* 跳轉膠囊：一眼知道這頁有什麼 */
.me-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.me-jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;
  background:var(--me-panel);color:var(--me-navy);font-size:14px;text-decoration:none;border:1px solid transparent;}
.me-jump a:hover{background:#eaf3ff;border-color:#2487fe;}

/* 上課進度 */
.me-page .me-ch-h h3{color:var(--me-navy);}
.me-page .me-bar i{background:linear-gradient(90deg,#50A0FE,#2487FE);}
.me-page .me-u{background:var(--me-panel);}
.me-page .me-u .go,.me-page .me-a .go{color:var(--me-navy);font-weight:700;}

/* 助教作業：四集一排（不再三張＋孤單一張） */
.me-page .me-hw{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.me-page .me-a .nm{color:var(--me-navy);}
@media(max-width:1000px){.me-page .me-hw{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.me-page .me-hw{grid-template-columns:1fr;}}
.me-page .me-sums-wrap{margin-top:28px;}
.me-page .me-sums-h{color:var(--me-navy);}

/* 能量紀錄：趨勢放灰板、紀錄改成一張細線清單 */
.me-page .me-en-trend{background:var(--me-panel);border-radius:var(--r-md);padding:20px 22px;margin:0 0 16px;}
.me-page .me-en-tr{background:#fff;}
.me-page .me-en-dots i{background:#dfe5ec;}
.me-page .me-en-list{gap:0;border:1px solid var(--me-line);border-radius:var(--r-md);overflow:hidden;background:#fff;}
.me-page .me-en-row{grid-template-columns:104px minmax(0,1fr) minmax(0,1fr) auto auto auto;border-radius:0;
  padding:12px 18px;border-top:1px solid var(--me-line);font-variant-numeric:tabular-nums;}
.me-page .me-en-row:first-child{border-top:0;}
.me-page .me-en-row .bat,.me-page .me-en-row .who{color:var(--me-navy);}
.me-page .me-en-view{min-height:40px;padding:0 16px;}
.me-page .me-en-del{min-height:40px;}
.me-page .me-en-foot a{color:var(--me-navy);font-weight:700;}
@media(max-width:640px){
  .me-page .me-en-row{grid-template-columns:1fr auto;grid-template-areas:"dt lv" "bat bat" "who who" "view del";gap:4px 12px;padding:14px 16px;}
  .me-page .me-en-row .dt{grid-area:dt;}
  .me-page .me-en-row .lv{grid-area:lv;justify-self:end;}
  .me-page .me-en-row .bat{grid-area:bat;}
  .me-page .me-en-row .who{grid-area:who;}
  .me-page .me-en-view{grid-area:view;justify-self:start;margin-top:6px;}
  .me-page .me-en-del{grid-area:del;align-self:end;}
}

/* 回饋卡：平塗灰板，亮起時才換萊姆 */
.me-page .me-fb{border:0;background:var(--me-panel);}
.me-page [data-sec="feedback"].hot .me-fb{background:#f3fbd2;border:0;}
.me-page .me-fb-t{color:var(--me-navy);}
.me-page .me-a .sub{word-break:keep-all;text-wrap:balance;}