/* =====================================================================
   LINE LIFF 會員中心 — 會員端樣式
   依使用者提供的捕捉奇蹟會員卡畫面（深綠卡 + QR/條碼 + 底部 Tab Bar）。
   手機優先、直式單欄。
   ===================================================================== */

:root {
  --ls-green-900: #7e4526;
  --ls-green-800: #B76A3A;  /* co_learning 主色 */
  --ls-green-700: #c47e52;
  --ls-green-600: #d49a73;
  --ls-card-text: #ffffff;
  --ls-bg:        #f4f5f3;
  --ls-surface:   #ffffff;
  --ls-text:      #1f2723;
  --ls-muted:     #7a847d;
  --ls-radius:    16px;
  --ls-radius-sm: 10px;
  --ls-tab-active:#7e4526;
  --ls-tab-idle:  #9aa39c;
  --ls-line:      #e6e8e5;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ls-bg);
  color: var(--ls-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
               "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 16px calc(76px + env(safe-area-inset-bottom));
  background: var(--ls-bg);
}

/* --- 頂部標題 --- */
.topbar {
  position: relative;
  text-align: center;
  padding: 14px 0 10px;
}
.topbar h1 { font-size: 18px; font-weight: 700; margin: 0; }
.topbar .sub { font-size: 12px; color: var(--ls-muted); margin-top: 2px; }
.topbar-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: none;
  border: 0;
  color: var(--ls-muted);
  font-size: 14px;
  cursor: pointer;
}
.topbar-back:active { opacity: .6; }

/* --- 會員卡（共學卡）：薄荷水彩 + 金箔點點 + 白色卡面 --- */
.member-card {
  --mc-teal:      #B76A3A;   /* co_learning 主色：卡名 / 數值（橘）*/
  --mc-teal-soft: #e8d2c2;   /* 分隔線：淡橘 */
  --mc-ink:       #3f3f3f;
  position: relative;
  border-radius: 22px;
  padding: 16px 14px 14px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 15% 10%,
              #f6e9df 0%, #ecc9ad 46%, #e0b189 100%);
  box-shadow: 0 10px 28px rgba(183, 106, 58, .22);
}
/* 金箔 / 白色點點紋理 */
.member-card::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2.5px 2.5px at 12% 16%, rgba(233,200,74,.95) 0, transparent 100%),
    radial-gradient(2px 2px   at 80% 12%, rgba(241,214,113,.9) 0, transparent 100%),
    radial-gradient(1.6px 1.6px at 28% 72%, rgba(255,255,255,.85) 0, transparent 100%),
    radial-gradient(2px 2px   at 90% 58%, rgba(233,200,74,.85) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 7%,  rgba(255,255,255,.8) 0, transparent 100%),
    radial-gradient(1.8px 1.8px at 7% 84%,  rgba(241,214,113,.85) 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 66% 92%, rgba(255,255,255,.8) 0, transparent 100%),
    radial-gradient(1.4px 1.4px at 40% 30%, rgba(233,200,74,.7) 0, transparent 100%);
}
.member-card > * { position: relative; z-index: 1; }

.member-card .mc-tagline {
  text-align: center; color: #a05f33;
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  margin: 2px 0 10px;
}
.member-card .mc-panel {
  background: #fff;
  border-radius: 28px 28px 22px 22px;
  padding: 18px 18px 20px;
  box-shadow: 0 6px 18px rgba(183, 106, 58, .12);
}
.member-card .mc-brand {
  display: flex; align-items: center; justify-content: center;
}
.member-card .mc-logo {
  height: 30px; width: auto; max-width: 80%; display: block;
}
.member-card .mc-divider {
  height: 1px; background: var(--mc-teal-soft); margin: 12px 6px;
}
.member-card .mc-title {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  color: var(--mc-teal); font-size: 30px; font-weight: 800; letter-spacing: 3px;
}
.member-card .mc-title small {
  color: #6a6a6a; font-size: 12px; font-weight: 600; letter-spacing: .5px;
  line-height: 1.25; text-align: left;
}
.member-card .avatar {
  width: 92px; height: 92px; border-radius: 50%;
  margin: 14px auto 6px; display: block; object-fit: cover;
  background: #f3e3d6; border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(183, 106, 58, .18);
}
.member-card .code {
  text-align: center; font-size: 20px; font-weight: 800;
  letter-spacing: 1px; color: var(--mc-ink);
  margin: 4px 0 14px; word-break: break-all;
}
.member-card .stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  border-top: 1px solid #f1e4d9; padding-top: 12px;
}
.member-card .stats > div { text-align: center; }
.member-card .stats .label { font-size: 12px; color: #8a948f; }
.member-card .stats .value {
  font-size: 16px; font-weight: 800; color: var(--mc-teal); margin-top: 4px;
}
.member-card .mc-foot {
  text-align: center; color: #B76A3A; font-style: italic;
  font-size: 15px; font-weight: 700; letter-spacing: 2px;
  margin: 12px 0 4px;
}

/* --- VIP（navigator）：粉色水彩 + 金箔點點 + 白色卡面（配色參考 navigator.pdf） --- */
.member-card--navigator {
  --mc-teal:      #212942;   /* 卡名 / 數值：深藍 */
  --mc-teal-soft: #c2c7d2;   /* 分隔線：淡藍灰 */
  background: radial-gradient(120% 90% at 15% 10%,
              #dfe3ec 0%, #b3bcce 46%, #93a0bb 100%);
  box-shadow: 0 10px 28px rgba(33, 41, 66, .26);
}
.member-card--navigator .mc-tagline { color: #212942; }
.member-card--navigator .mc-panel { box-shadow: 0 6px 18px rgba(33, 41, 66, .14); }
.member-card--navigator .avatar { box-shadow: 0 2px 8px rgba(33, 41, 66, .2); }
.member-card--navigator .mc-foot { color: #212942; }

/* VIP（navigator）：將綠色系按鈕／分頁／功能表切換為粉色系，與會員卡一致。
   覆寫 --ls-green-* 變數即可連帶套用到所有引用處（含我的通知按鈕的 inline var）。
   底部 Tab Bar 用獨立的 --ls-tab-active，全站共用故維持綠色不變。 */
body.is-navigator {
  --ls-green-900: #161c2e;
  --ls-green-800: #212942;  /* navigator 主色：主要按鈕 / 分頁 active / 功能表連結 */
  --ls-green-700: #33405f;  /* 按下狀態 */
  --ls-green-600: #4a597d;  /* 次要按鈕 */
  --ls-tab-active: #212942; /* 底部 Tab Bar active 同步為深藍 */
}

/* --- 主要按鈕 --- */
.btn-primary {
  display: block; width: 100%; margin-top: 14px;
  background: var(--ls-green-800); color: #fff;
  border: none; border-radius: var(--ls-radius-sm);
  padding: 16px; font-size: 16px; font-weight: 700; text-align: center;
  text-decoration: none; cursor: pointer;
}
.btn-primary:active { background: var(--ls-green-700); }

/* --- QR / 條碼 切換 --- */
.code-tabs { display: flex; gap: 12px; margin-top: 12px; }
.code-tabs .tab {
  flex: 1; text-align: center; padding: 14px; cursor: pointer;
  border-radius: var(--ls-radius-sm); font-weight: 700; font-size: 14px;
  border: 1.5px solid var(--ls-green-800);
}
.code-tabs .tab.active { background: var(--ls-green-800); color: #fff; }
.code-tabs .tab:not(.active) { background: #fff; color: var(--ls-green-800); }

.code-stage {
  background: #fff; border-radius: var(--ls-radius);
  margin-top: 12px; padding: 24px; text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  min-height: 240px; display: flex; align-items: center; justify-content: center;
}
.code-stage canvas, .code-stage img, .code-stage svg { max-width: 100%; }
.code-stage .hint { color: var(--ls-muted); font-size: 13px; }

/* --- 卡片 (課程 / 券 通用，後續 Phase 使用) --- */
.card {
  background: var(--ls-surface); border-radius: var(--ls-radius-sm);
  padding: 14px; margin-top: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* --- 表單 (profile) --- */
.field { margin-top: 14px; }
.field label { display: block; font-size: 13px; color: var(--ls-muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px; border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-sm); font-size: 15px; background: #fff;
}

/* --- 底部 Tab Bar --- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 480px; margin: 0 auto;
  background: #fff; border-top: 1px solid var(--ls-line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
.tabbar a {
  text-decoration: none; color: var(--ls-tab-idle);
  text-align: center; font-size: 11px; display: flex;
  flex-direction: column; align-items: center; gap: 3px;
}
.tabbar a.active { color: var(--ls-tab-active); font-weight: 700; }
.tabbar .ico { font-size: 20px; line-height: 1; }

/* --- 「功能表」彈出式選單 --- */
.nav-menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1098; }
.nav-menu-backdrop[hidden] { display: none; }
.nav-menu {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 480px; margin: 0 auto; z-index: 1099;
  background: #fff; border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 72vh; overflow: auto;
}
.nav-menu[hidden] { display: none; }
.nav-menu-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; font-weight: 800; color: var(--ls-green-800, #1e6fd1);
  border-bottom: 1px solid var(--ls-line, #eee);
}
.nav-menu-close { border: 0; background: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer; padding: 0 4px; }
.nav-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; color: #333; text-decoration: none;
  border-bottom: 1px solid #f3f3f3; font-size: 16px;
}
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu a:active { background: #f5f7f5; }
.nav-menu .ico { font-size: 20px; line-height: 1; }

/* --- 狀態 / 提示 --- */
.loading, .error {
  text-align: center; padding: 40px 16px; color: var(--ls-muted);
}
.error { color: #b3261e; }
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: rgba(35,48,40,.95); color: #fff; padding: 10px 18px;
  border-radius: 20px; font-size: 14px; opacity: 0; transition: opacity .2s;
  pointer-events: none; z-index: 50;
}
.toast.show { opacity: 1; }
.hidden { display: none !important; }

/* --- 最新消息輪播（首頁，會員卡下方）--- */
.news-carousel { margin-top: 14px; overflow: hidden; }
.news-track { display: flex; transition: transform .35s ease; }
.news-item {
  flex: 0 0 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff; border-radius: var(--ls-radius-sm);
  padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
  text-decoration: none; color: var(--ls-text); min-height: 28px;
}
.news-tag {
  font-size: 11px; font-weight: 700; color: #fff; background: var(--ls-green-600);
  padding: 2px 8px; border-radius: 999px; flex: 0 0 auto;
}
.news-date { font-size: 12px; color: var(--ls-muted); flex: 0 0 auto; }
.news-title { font-size: 14px; font-weight: 600; flex: 1 1 100%; line-height: 1.4; }
.news-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.news-dot { width: 7px; height: 7px; border-radius: 50%; background: #d4d9d4; transition: background .2s; }
.news-dot.active { background: var(--ls-green-600); }

/* --- 升級VIP頁 --- */
.nav-hero { margin-top: 4px; }
.nav-name { font-size: 22px; font-weight: 800; margin: 16px 2px 0; }
.nav-tag {
  display: inline-block; margin-top: 8px; font-size: 13px; color: #555;
  background: #ececec; border-radius: 6px; padding: 4px 12px;
}
.nav-price { margin-top: 12px; color: #e58c86; display: flex; align-items: baseline; gap: 4px; }
.nav-price span { font-size: 15px; font-weight: 700; }
.nav-price b { font-size: 28px; font-weight: 800; }
.nav-rich { font-size: 14px; line-height: 1.7; color: #444; white-space: pre-wrap; word-break: break-word; }
.pay-opt {
  display: flex; gap: 10px; align-items: center; padding: 12px;
  border: 1.5px solid var(--ls-line); border-radius: 10px; margin-top: 8px; cursor: pointer;
}
.pay-opt.sel { border-color: var(--ls-green-700); background: #eef3fd; }
.qty { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.qty span { font-weight: 700; font-size: 18px; }
.qty button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--ls-line); background: #fff; font-size: 18px; }
.qty button:disabled { opacity: .45; }