/* 🫧 課程平台 · 磨砂玻璃（Liquid Glass）風格 —— 疊喺 learn.css 之後用
   原則：彩色柔和背景 → 半透明磨砂面板（模糊＋提高飽和）→ 頂部一條光邊＝光線打喺玻璃上
   文字照用深色、加粗，唔用灰字（受眾 50+，玻璃上面淺字會睇唔清） */

:root{
  --glass:rgba(255,255,255,.52);
  --glass-strong:rgba(255,255,255,.68);
  --glass-edge:rgba(255,255,255,.75);
  --glass-shadow:0 10px 36px rgba(60,40,90,.14), 0 2px 6px rgba(60,40,90,.06);
  --ink:#141218;
  --ink-2:#2E2A33;
  --line:rgba(255,255,255,.6);
  /* 品牌色（2026-10-22 鎖定深綠金，見 brand/東霖-品牌指南.md）：已完成改用深金，唔再用綠，避免同主色撞 */
  --brand:#0F3D2E;
  --brand-deep:#0A2A20;
  --brand-soft:#EEF3EF;
  --ink-brand:#161412;
  --cream:#F5F1E6;
  --done:#8C6A2E;
}

/* 背景：幾團柔和顏色暈開，玻璃面板先有嘢透出嚟 */
body{
  /* 品牌色背景：只用橙紅嘅淡色＋暖米白，唔再加紫／青 */
  background:
    radial-gradient(45% 40% at 10% 8%, rgba(242,132,95,.40), transparent 70%),
    radial-gradient(40% 36% at 92% 22%, rgba(242,160,120,.28), transparent 70%),
    radial-gradient(50% 42% at 80% 88%, rgba(210,73,43,.16), transparent 70%),
    linear-gradient(160deg,#FBF4EE 0%,#F8F1EA 55%,#F6EEE6 100%);
  background-attachment:fixed;
}

/* 共用玻璃材質 */
.topbar,.course-tile,.card,.lesson-main,.lesson-side,.next-event,.event-card,.terms-box,.track-tile{
  background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25);
}

/* 頂部：浮起嘅玻璃膠囊，內容喺下面捲過 */
.topbar{
  margin:10px 12px 0;border-radius:22px;top:10px;
  background:var(--glass-strong);
}
.topbar .wrap{min-height:56px}
.btn-text{
  background:rgba(255,255,255,.55);border:1px solid var(--glass-edge);border-radius:99px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* 課程卡 */
.course-tile{border-radius:28px;overflow:hidden}
.course-tile.locked{background:rgba(255,255,255,.38)}
.cover{margin:8px 8px 0;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.cover::after{ /* 玻璃反光 */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(170deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 60%);
}
.cover-tag{
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.cover-face{border:3px solid rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.cover-lock{background:rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.6)}
.tile-body h3{letter-spacing:-.01em}

/* 進度條：玻璃凹槽＋發光填充 */
.progress{background:rgba(255,255,255,.55);box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.progress i{background:linear-gradient(90deg,#2FBF71,#1F9D5C);box-shadow:0 0 10px rgba(47,191,113,.45)}

/* 掣：膠囊形；主要掣保持實色（顏色唔放喺透明面），加光澤 */
.btn{border-radius:99px}
.btn-primary{
  background:linear-gradient(180deg,#E8603E 0%,#C8401F 100%);
  box-shadow:0 6px 18px rgba(210,73,43,.35), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-ghost{background:rgba(255,255,255,.6);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.btn:active{transform:scale(.97)}

/* 活動條 */
.next-event{border-radius:22px;border:1px solid var(--glass-edge)}

/* 課堂頁 */
.lesson-main,.lesson-side{border-radius:28px}
.player{border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.lesson-item{background:rgba(255,255,255,.5);border:1px solid var(--glass-edge);border-radius:18px}
.side-list .lesson-item.current{background:rgba(251,233,223,.85);border-color:rgba(210,73,43,.55);box-shadow:0 4px 14px rgba(210,73,43,.18)}
.done-check{background:rgba(255,255,255,.7);border:2px solid rgba(160,150,170,.6)}
.lesson-tag{background:rgba(255,255,255,.7);border:1px solid var(--glass-edge)}
.resources{border-top:1px solid rgba(255,255,255,.7)}

/* 唔想要透明效果嘅用家（系統設定）→ 變返實色 */
@media (prefers-reduced-transparency: reduce){
  .topbar,.course-tile,.card,.lesson-main,.lesson-side,.next-event,.event-card,.terms-box{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}