/* ════════════════════════════════════════════════════
   馥靈之鑰 ✦ 心理測驗輕盈淺色主題
   hl-quiz-light.css v1.0
   設計方向：春日信紙 × 水彩溫度 × 彩色飽滿邊框
   override 策略：全 !important，不動 premium 原檔
   ════════════════════════════════════════════════════ */

/* ── 設計色票 ── */
:root {
  --ql-bg:        #fdf7f0;
  --ql-bg2:       #f4edfb;
  --ql-bg3:       #eaf2fd;
  --ql-card:      rgba(255,255,255,0.92);
  --ql-card2:     rgba(255,255,255,0.98);
  --ql-ink:       #2a1a35;
  --ql-ink2:      #4a3060;
  --ql-ink3:      #6b5280;
  --ql-amber:     #c17b3f;
  --ql-amber2:    #e8a84f;
  --ql-lavender:  #7a56b8;
  --ql-coral:     #e06b4d;
  --ql-teal:      #3fa88c;
  --ql-sky:       #5a8fd8;
  --ql-rose:      #cf6896;
  --ql-border:    rgba(193,123,63,0.18);
  --ql-shadow:    0 4px 24px rgba(42,26,53,0.07);
  --ql-shadow2:   0 8px 36px rgba(42,26,53,0.10);
  --ql-radius:    20px;
}

/* ── 動畫定義 ── */
@keyframes qlFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qlPop {
  0%   { opacity: 0; transform: scale(0.82) translateY(16px); }
  72%  { transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes qlBorderSweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes qlBarGrow {
  from { width: 0%; }
}
@keyframes qlFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes qlShimmerLight {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes qlBloom {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122,86,184,0.0); }
  50%       { box-shadow: 0 0 24px 4px rgba(122,86,184,0.12); }
}
@keyframes qlOptionSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Body 背景 ── */
body {
  background: linear-gradient(160deg, var(--ql-bg) 0%, var(--ql-bg2) 55%, var(--ql-bg3) 100%) !important;
  color: var(--ql-ink) !important;
  min-height: 100vh !important;
}

/* ── 全域 CSS 變數 override ── */
body {
  --hl-bg:         #fdf7f0 !important;
  --hl-bg-soft:    #f4edfb !important;
  --hl-bg-card:    rgba(255,255,255,0.92) !important;
  --hl-card-bg:    rgba(255,255,255,0.92) !important;
  --hl-border:     rgba(193,123,63,0.18) !important;
  --hl-cream:      #2a1a35 !important;
  --hl-gold:       var(--ql-amber) !important;
  --hl-gold2:      var(--ql-amber2) !important;
  --hl-gold3:      #b06c30 !important;
  --hl-dark:       #2a1a35 !important;
  --hl-glow:       rgba(193,123,63,0.12) !important;
  /* 10 批量測驗專用 */
  --qbg:           #fdf7f0 !important;
  --qpch:          #f4edfb !important;
  --qtxt:          #2a1a35 !important;
  --qlt:           #7a6890 !important;
  --qc1:           #7a56b8 !important;
  --qc2:           #3fa88c !important;
}

/* ── 星空背景 → 淺色浮光背景 ── */
.hl-cosmos {
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(122,86,184,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 78%, rgba(193,123,63,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 15%, rgba(63,168,140,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 45% 35% at 12% 72%, rgba(90,143,216,0.05) 0%, transparent 45%),
    radial-gradient(ellipse 38% 30% at 88% 12%, rgba(207,104,150,0.04) 0%, transparent 40%),
    #fdf7f0 !important;
}
/* 星點 → 淡色光點 */
.hl-cosmos .star,
.hl-cosmos [class*="star"] {
  background: rgba(122,86,184,0.2) !important;
}

/* ── 題目頁面卡 ── */
.quiz-wrap {
  background: transparent !important;
}
.quiz-hero {
  background: var(--ql-card2) !important;
  border: 1.5px solid rgba(122,86,184,0.15) !important;
  box-shadow: var(--ql-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.quiz-hero h1 {
  background: linear-gradient(135deg, var(--ql-lavender) 0%, var(--ql-amber) 60%, var(--ql-coral) 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: qlShimmerLight 5s linear infinite !important;
}
.quiz-hero p,
.quiz-hero-note,
.quiz-subtitle,
.quiz-desc {
  color: var(--ql-ink2) !important;
}
.quiz-badge {
  color: var(--ql-lavender) !important;
  border-color: rgba(122,86,184,0.25) !important;
  background: rgba(122,86,184,0.06) !important;
}
/* 開始按鈕 */
.btn-start-quiz {
  background: linear-gradient(135deg, var(--ql-lavender), var(--ql-amber)) !important;
  color: #fff !important;
  box-shadow: 0 6px 24px rgba(122,86,184,0.28) !important;
  border: none !important;
}
.btn-start-quiz:hover {
  box-shadow: 0 8px 32px rgba(122,86,184,0.38) !important;
  transform: translateY(-2px) !important;
}

/* ── 進度條 ── */
.quiz-progress-bar,
#progressBar,
[id*="progressBar"],
[class*="progress-bar"] {
  background: rgba(122,86,184,0.1) !important;
}
.quiz-progress-fill,
#progressFill,
[id*="progressFill"],
[class*="progress-fill"] {
  background: linear-gradient(90deg, var(--ql-lavender), var(--ql-amber), var(--ql-coral)) !important;
  background-size: 200% auto !important;
  animation: qlBorderSweep 2s linear infinite, hlBarGrow 0.5s ease !important;
}
.quiz-progress-text,
.quiz-progress-label,
[class*="progress-text"],
[class*="progress-label"] {
  color: var(--ql-ink3) !important;
}

/* ── 題目卡 ── */
.quiz-question-card,
.quiz-card {
  background: var(--ql-card2) !important;
  border-color: rgba(122,86,184,0.12) !important;
  box-shadow: var(--ql-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: qlFadeIn 0.4s ease both !important;
}
.quiz-q-number,
.quiz-q-num,
[class*="q-number"],
[class*="q-num"] {
  color: var(--ql-lavender) !important;
  opacity: 0.75 !important;
}
.quiz-q-text,
.quiz-question {
  color: var(--ql-ink) !important;
}
/* 選項 */
.quiz-option,
.likert-btn {
  background: rgba(122,86,184,0.04) !important;
  color: var(--ql-ink2) !important;
  border-color: rgba(122,86,184,0.12) !important;
  animation: qlOptionSlide 0.3s ease both !important;
}
.quiz-option:nth-child(2) { animation-delay: 0.04s !important; }
.quiz-option:nth-child(3) { animation-delay: 0.08s !important; }
.quiz-option:nth-child(4) { animation-delay: 0.12s !important; }
.quiz-option:nth-child(5) { animation-delay: 0.16s !important; }
.quiz-option:hover,
.likert-btn:hover {
  background: rgba(122,86,184,0.09) !important;
  border-color: var(--ql-lavender) !important;
  color: var(--ql-lavender) !important;
  transform: translateX(5px) !important;
}
.quiz-option.selected,
.likert-btn.selected {
  background: rgba(122,86,184,0.12) !important;
  border-color: var(--ql-lavender) !important;
  color: var(--ql-lavender) !important;
  font-weight: 600 !important;
}
/* Likert labels */
.likert-labels span {
  color: var(--ql-ink3) !important;
}
/* 上下一題按鈕 */
.btn-next {
  background: linear-gradient(135deg, var(--ql-lavender), var(--ql-amber)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(122,86,184,0.2) !important;
}
.btn-prev {
  border-color: rgba(122,86,184,0.25) !important;
  color: var(--ql-ink3) !important;
}

/* ── 結果區塊 ── */
/* 馥靈稱號卡 */
.hl-title-card {
  background: linear-gradient(160deg, #fff 0%, #f9f4ff 40%, #fff5ee 100%) !important;
  border: 1.5px solid rgba(122,86,184,0.22) !important;
  box-shadow: var(--ql-shadow2), 0 0 0 0 rgba(122,86,184,0) !important;
  animation: qlPop 0.7s cubic-bezier(0.16,1,0.3,1) both, qlBloom 4s ease-in-out 0.7s infinite !important;
}
.hl-title-card::before {
  background: linear-gradient(135deg,
    rgba(122,86,184,0.35), transparent 40%,
    transparent 60%, rgba(193,123,63,0.25)) !important;
}
.hl-title-eyebrow {
  color: var(--ql-lavender) !important;
}
.hl-title-main {
  color: transparent !important;
  background: linear-gradient(135deg, var(--ql-lavender) 0%, var(--ql-amber) 55%, var(--ql-coral) 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: qlShimmerLight 5s linear infinite !important;
}
.hl-title-sub {
  color: var(--ql-ink2) !important;
}
.hl-title-tag {
  background: rgba(122,86,184,0.06) !important;
  border-color: rgba(122,86,184,0.14) !important;
}
.hl-title-tag-label { color: var(--ql-lavender) !important; }
.hl-title-tag-value { color: var(--ql-ink) !important; }
.hl-title-quote { color: var(--ql-amber) !important; }
.hl-title-divider {
  background: linear-gradient(90deg, transparent, var(--ql-lavender), transparent) !important;
}
.hl-title-combo-hint { color: var(--ql-ink3) !important; }
/* 四角裝飾 */
.corner-deco {
  border-color: rgba(122,86,184,0.22) !important;
}

/* 結果英雄區 */
.result-hero {
  background: var(--ql-card2) !important;
  border: 1.5px solid rgba(122,86,184,0.14) !important;
  box-shadow: var(--ql-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: qlFadeIn 0.6s 0.3s both !important;
}
.result-type-label  { color: var(--ql-lavender) !important; }
.result-combo-name  { color: var(--ql-ink) !important; }
.result-subtitle    { color: var(--ql-ink2) !important; }

/* 維度條 */
.ocean-bars, .dim-bars {
  background: var(--ql-card2) !important;
  border-color: rgba(122,86,184,0.12) !important;
  box-shadow: var(--ql-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: qlFadeIn 0.6s 0.5s both !important;
}
.ocean-track, .dim-track {
  background: rgba(122,86,184,0.08) !important;
}
.ocean-fill, .dim-fill {
  /* 顏色由 JS inline style 設定，這裡加 fallback */
  box-shadow: 2px 0 8px rgba(122,86,184,0.18) !important;
}
.ocean-label, .dim-label         { color: var(--ql-ink2) !important; }
.ocean-label strong, .dim-label strong { color: var(--ql-ink) !important; }
.ocean-score, .dim-score          { color: var(--ql-amber) !important; }
.ocean-en, .dim-en                { color: var(--ql-lavender) !important; }

/* 結果段落卡片 — 彩色左邊框輪替 */
.result-section {
  background: var(--ql-card2) !important;
  border: 1.5px solid rgba(122,86,184,0.12) !important;
  box-shadow: var(--ql-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-left: 3px solid var(--ql-lavender) !important;
  animation: qlFadeIn 0.6s 0.7s both !important;
}
.result-section:nth-child(2n) {
  border-left-color: var(--ql-amber) !important;
}
.result-section:nth-child(3n) {
  border-left-color: var(--ql-teal) !important;
}
.result-section:nth-child(4n) {
  border-left-color: var(--ql-coral) !important;
}
.result-section:hover {
  box-shadow: var(--ql-shadow2) !important;
  border-color: rgba(122,86,184,0.22) !important;
}
.result-section-title {
  color: var(--ql-ink) !important;
  border-bottom-color: rgba(122,86,184,0.10) !important;
}
.result-section-content {
  color: var(--ql-ink2) !important;
}
.result-section-content strong {
  color: var(--ql-lavender) !important;
}

/* H.O.U.R. 橋接區 */
.result-hour-bridge {
  background: linear-gradient(135deg, rgba(122,86,184,0.06) 0%, rgba(255,255,255,0.95) 100%) !important;
  border-color: rgba(122,86,184,0.18) !important;
  box-shadow: var(--ql-shadow) !important;
  animation: qlFadeIn 0.6s 0.9s both !important;
}
.hour-bridge-label { color: var(--ql-lavender) !important; }
.hour-bridge-text  { color: var(--ql-ink2) !important; }
.hour-bridge-cta {
  background: linear-gradient(135deg, var(--ql-lavender), var(--ql-amber)) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(122,86,184,0.22) !important;
}

/* 分享區 */
.share-section {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(122,86,184,0.12) !important;
  box-shadow: var(--ql-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: qlFadeIn 0.6s 1.1s both !important;
}
.share-row { gap: 8px !important; }
.share-btn,
.quiz-share-row .share-btn,
[class*="share-btn"] {
  background: rgba(122,86,184,0.06) !important;
  border-color: rgba(122,86,184,0.18) !important;
  color: var(--ql-lavender) !important;
  font-weight: 500 !important;
}
.share-btn:hover,
.quiz-share-row .share-btn:hover {
  background: rgba(122,86,184,0.12) !important;
  border-color: var(--ql-lavender) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(122,86,184,0.14) !important;
}
.btn-retry {
  border-color: rgba(122,86,184,0.15) !important;
  color: var(--ql-ink3) !important;
}

/* 更多測驗卡 */
.more-quizzes { animation: qlFadeIn 0.6s 1.3s both !important; }
.more-quizzes h3 { color: var(--ql-ink) !important; }
.more-card {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(122,86,184,0.12) !important;
  color: var(--ql-ink2) !important;
  box-shadow: var(--ql-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.more-card:hover {
  border-color: var(--ql-lavender) !important;
  box-shadow: var(--ql-shadow2) !important;
  color: var(--ql-lavender) !important;
  transform: translateY(-2px) !important;
}

/* 截圖卡（screenshot-card / screenshotCard） */
.screenshot-card,
#screenshotCard {
  background: linear-gradient(160deg, #fff 0%, #f9f4ff 40%, #fff5ee 100%) !important;
  border: 1.5px solid rgba(122,86,184,0.22) !important;
  box-shadow: var(--ql-shadow2) !important;
  animation: qlPop 0.7s 0.2s both !important;
}
.ss-brand   { color: rgba(122,86,184,0.35) !important; }
.ss-title   { color: var(--ql-ink) !important; }
.ss-sub     { color: var(--ql-ink2) !important; }
.ss-tag {
  background: rgba(122,86,184,0.06) !important;
  border-color: rgba(122,86,184,0.18) !important;
  color: var(--ql-lavender) !important;
}
.ss-quote  { color: var(--ql-amber) !important; }
.ss-footer { color: rgba(122,86,184,0.28) !important; }

/* 類型標籤 */
.type-badge {
  background: rgba(122,86,184,0.07) !important;
  border-color: rgba(122,86,184,0.22) !important;
  color: var(--ql-lavender) !important;
}

/* ── 10 批量測驗：inline style 輔助 ── */
/* 批量測驗的 var(--qbg) 背景卡片 inline bg:#fff 保留即可 */
/* 其 body gradient 已被上面 body override 蓋掉 */

/* ── Footer 適配 ── */
.hl-footer {
  background: rgba(253,247,240,0.85) !important;
  border-top: 1px solid rgba(122,86,184,0.08) !important;
  backdrop-filter: none !important;
}
.hl-footer,
.hl-footer a,
.hl-footer-tagline,
.hl-footer-copyright {
  color: var(--ql-ink3) !important;
}
.hl-footer a:hover {
  color: var(--ql-lavender) !important;
}

/* ── quiz-archetype 特殊 override ── */
/* archetype 有自己的深色 inline style 要 override */
.quiz-question-card {
  box-shadow: var(--ql-shadow) !important;
}

/* ── 響應式 ── */
@media (max-width: 480px) {
  .hl-title-card { padding: 24px 16px 20px !important; }
  .result-section { padding: 16px 14px !important; }
}

/* ── quiz-hub 不套用輕色（hub 有自己的深色設計）── */
/* 透過 quiz-hub.html 不注入此 CSS 解決，不需要在這裡排除 */


/* ── 香氣著陸區 light-mode 修正 (v1.1 patch) ── */
/* 問題：.aroma-landing 的文字色是深色主題設計，在淺色背景下看不清 */
.aroma-landing {
  background: linear-gradient(135deg, rgba(193,123,63,0.07) 0%, rgba(233,194,125,0.05) 100%) !important;
  border-color: rgba(193,123,63,0.22) !important;
}
.aroma-landing .al-label {
  color: var(--ql-amber) !important;
  opacity: 0.9 !important;
}
.aroma-landing .al-text {
  color: var(--ql-ink2) !important;
}
.aroma-landing .al-oil {
  background: rgba(193,123,63,0.08) !important;
  border-color: rgba(193,123,63,0.22) !important;
  color: var(--ql-amber) !important;
}

/* ── card-mapping 區塊修正 ── */
.card-mapping {
  background: rgba(122,86,184,0.05) !important;
  border-color: rgba(122,86,184,0.14) !important;
}
.card-mapping .cm-title {
  color: var(--ql-lavender) !important;
  opacity: 0.85 !important;
}
.cm-tag,
.card-mapping .cm-tag {
  background: rgba(122,86,184,0.07) !important;
  border-color: rgba(122,86,184,0.18) !important;
  color: var(--ql-ink2) !important;
}