:root{
  --font-scale: 1;
  --radius-lg: 20px;
  --radius-md: 14px;
  /* ===== 淺色主題:森林橘褐 ===== */
  --bg: #E8E9E6;
  --bg-alt: #DEE5DF;
  --surface: #F3F3EF;
  --surface-soft: #DEE5DF;
  --border: #C1C9C0;
  --accent: #344E41;
  --accent-ink: #F3F3EF;
  --accent-2: #BC6C25;
  --accent-2-ink: #382113;
  --btn-bg: #344E41;
  --btn-text: #F3F3EF;
  --btn-border: #89968E;
  --text-primary: #252525;
  --text-secondary: #52605A;
  --text-muted: #747A75;
  --danger: #A34F3D;
  --shadow: 0 1px 3px rgba(37, 37, 37, 0.10);
}
html[data-theme="pro"]{
  /* ===== 深色主題:深藍灰綠 ===== */
  --bg: #172027;
  --bg-alt: #30414A;
  --surface: #26343C;
  --surface-soft: #30414A;
  --border: #4B5D66;
  --accent: #8CC8C0;
  --accent-ink: #123331;
  --accent-2: #D5AE70;
  --accent-2-ink: #392A13;
  --btn-bg: #8CC8C0;
  --btn-text: #123331;
  --btn-border: #6D828A;
  --text-primary: #F8FAFC;
  --text-secondary: #C6D4D5;
  --text-muted: #99AAAE;
  --danger: #F29B91;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
html[data-minimal="true"] .deco,
html[data-minimal="true"] .deco-anim{ display:none !important; }
html[data-minimal="true"] .card{ border-radius: 10px !important; }
html[data-minimal="true"] .card-hover-lift,
html[data-minimal="true"] .page-fade-in{ transform:none !important; box-shadow:none !important; animation:none !important; }
html[data-minimal="true"] *,
html[data-minimal="true"] *::before,
html[data-minimal="true"] *::after{
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
*{ transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
html, body{ background: var(--bg); color: var(--text-primary); }
body{ font-family: 'Inter', 'Noto Sans TC', sans-serif; font-size: 1rem; line-height: 1.7; }
h1,h2,h3,.font-display{ font-family: 'Noto Serif TC', serif; }
.surface{ background: var(--surface); }
.surface-soft{ background: var(--surface-soft); }
.border-token{ border-color: var(--border); }
.text-primary-token{ color: var(--text-primary); }
.text-secondary-token{ color: var(--text-secondary); }
.text-muted-token{ color: var(--text-muted); }
.accent-bg{ background: var(--accent); color: var(--accent-ink); }
.badge-soon{ background: #D8E3DB; color: #294238; }
html[data-theme="pro"] .badge-soon{ background: #41605E; color: #D7F1ED; }
.badge-danger{ background: #F0D0C8; color: #7F392F; }
html[data-theme="pro"] .badge-danger{ background: #633E3D; color: #FFD9D2; }
.accent2-bg{ background: var(--accent-2); color: var(--accent-2-ink); }
.accent-text{ color: var(--accent); }
.accent2-text{ color: var(--accent-2); }
.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-accent{ border:1px solid var(--accent); }
html[data-theme="pro"] .card{ backdrop-filter: blur(8px); }
.card-hover-lift{ transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.card-hover-lift:hover{ transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.10); }
html[data-theme="pro"] .card-hover-lift:hover{ border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.btn-primary{ background: var(--btn-bg); color: var(--btn-text); border-radius: 999px; font-weight:600; }
.btn-primary:hover{ filter: brightness(1.06); }
.btn-ghost{ background: transparent; border:1.5px solid var(--btn-border); color: var(--text-primary); border-radius: 999px; font-weight:500; }
.input-token{ background: var(--surface-soft); border:1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-md); }
.input-token:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
::selection{ background: var(--accent); color: #FFFFFF; }
.divider{ border-color: var(--border); }

/* 動態效果:預設遵循系統設定，可被使用者手動旗標覆蓋 */
html[data-motion="off"] .deco-anim{ animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]) .deco-anim{ animation: none !important; transition: none !important; }
}
@keyframes floatSlow{ 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(-6px);} }
.deco-anim{ animation: floatSlow 6s ease-in-out infinite; }

.badge-dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.kbd-focus:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }
html[data-theme="pro"] .kbd-focus:focus-visible{ outline-color: #67E8F9; }
.scrollbar-hide::-webkit-scrollbar{ display:none; }

/* 平滑切換動畫 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

/* AI 導師側邊抽屜 */
.tutor-drawer-overlay {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
}
.tutor-drawer {
  transition: transform 0.3s ease;
}

/* 行動端送出按鈕吸底懸浮 */
.sticky-submit-bar {
  position: sticky;
  bottom: 4.5rem;
  z-index: 30;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px);
  padding: 0.75rem 0;
}
@media (min-width: 640px) {
  .sticky-submit-bar {
    position: static;
    background: transparent;
    backdrop-filter: none;
    padding: 0;
  }
}