/* ═══════════════════════════════════════════════════════════════
   Skyline Orchestra — 學員專區統一主題（與官網 index.html 同風格）
   使用方式：在各頁 </head> 前（inline <style> 之後）加入
   <link rel="stylesheet" href="assets/skyline-theme.css">
   後載入者覆蓋各頁原本的 :root 變數，達到無痛換色。
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Noto+Serif+TC:wght@500;600;700&display=swap');

:root {
  /* 官網蒂芬妮綠色系 */
  --tiffany: #2ea88a;
  --tiffany-bright: #3cc9a7;
  --tiffany-light: #e6f7f3;
  --tiffany-pale: #f2fbf8;
  --tiffany-dark: #1e8a70;
  --tiffany-deep: #0f5c4a;
  --gold: #c9a35c;

  /* 覆蓋各頁既有變數 */
  --primary: #2ea88a;
  --primary-light: #e6f7f3;
  --primary-dark: #1e8a70;
  --mint: #2ea88a;
  --bg: #f2fbf8;
  --surface: #ffffff;
  --border: #dcece7;
  --text: #2a3f39;
  --muted: #5f7a72;
  --shadow-sm: 0 1px 3px rgba(15, 92, 74, 0.08);
  --shadow: 0 8px 24px rgba(15, 92, 74, 0.10);
  --shadow-lg: 0 20px 60px rgba(15, 92, 74, 0.16);
  --serif: 'Noto Serif TC', 'Cormorant Garamond', serif;
}

body { background: var(--bg); }

/* ── 品牌 Header：官網深綠漸層 ──
   在 header 範圍內重新定義變數，讓原本引用 var(--muted)/var(--text)
   的 inline style 也自動轉為亮色，維持對比。 */
.header {
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.78);
  --primary: #aef0dd;
  --orange: #ffd9a8;
  --amber: #ffd9a8;
  --surface: transparent;
  --border: rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, var(--tiffany-deep) 0%, var(--tiffany-dark) 55%, var(--tiffany) 100%) !important;
  border-bottom: none !important;
  color: #fff !important;
  box-shadow: 0 2px 18px rgba(15, 92, 74, 0.28);
}
.header .header-logo, .header .header-title, .header .brand-name { color: #fff; }
.header .header-logo img, .header .brand-logo {
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50% !important;
  background: #fff;
}
.header .back-link, .header .back-btn { color: rgba(255, 255, 255, 0.85); }
.header .back-link:hover, .header .back-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}
.header .icon-btn {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.85);
}
.header .icon-btn:hover { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: rgba(255,255,255,0.5); }
.header .icon-btn.active { background: #fff; color: var(--tiffany-dark); border-color: #fff; }
.header .admin-badge {
  background: rgba(255, 255, 255, 0.14);
  color: #ffe9c2;
  border-color: rgba(255, 233, 194, 0.45);
}

/* ── 標題改襯線字，呼應官網 ── */
.card-title, .modal-title, .month-label, .header-logo, .brand-name, .header-title {
  font-family: var(--serif);
  letter-spacing: 1px;
}

/* ── 細節統一 ── */
.card { border-color: var(--border); }
.btn-primary { background: var(--tiffany); }
.btn-primary:hover { background: var(--tiffany-dark); }
.tab.active { color: var(--tiffany-dark); }
.fab { box-shadow: 0 6px 20px rgba(15, 92, 74, 0.40); }

/* 官網式眉標（新頁面可用） */
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--tiffany);
  font-weight: 700;
  text-transform: uppercase;
}