/* 補齊原本缺失的 CSS 變數[cite: 1] */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* 亮色系配置 */
  --color-background-primary: #ffffff;
  --color-background-secondary: #f8f9fa;
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  
  --color-border-secondary: #e9ecef;
  --color-border-tertiary: #dee2e6;
  
  --color-info: #378ADD;
  --color-danger: #D4537E;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-residual: #888780;

  --color-background-info: rgba(55, 138, 221, 0.1);
  --color-background-danger: rgba(212, 83, 126, 0.1);
  --color-background-success: rgba(40, 167, 69, 0.1);
  --color-background-warning: rgba(255, 193, 7, 0.1);
  
  --color-text-info: #216bb5;
  --color-text-danger: #b03a60;
  --color-text-success: #1e7e34;
  --color-text-warning: #d39e00;

  --border-radius-md: 8px;
}

/* 支援系統暗黑模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background-primary: #1e1e1e;
    --color-background-secondary: #2d2d2d;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #aaaaaa;
    --color-border-secondary: #444444;
    --color-border-tertiary: #555555;
    
    --color-text-info: #64abef;
    --color-text-danger: #e2759a;
    --color-text-success: #4cdb6e;
    --color-text-warning: #ffdb58;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  padding: 1rem;
}

.stl-tutorial-container {
  max-width: 800px;
  margin: 0 auto;
}

/* 導覽列優化[cite: 1] */
.nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.nav button {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--color-border-secondary);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav button:hover {
  border-color: var(--color-info);
  color: var(--color-info);
}

.nav button.active {
  background: var(--color-background-info);
  color: var(--color-text-info);
  border-color: transparent;
  font-weight: 500;
}

/* 頁籤切換動畫 */
.panel {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}
.panel.show { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 排版與文字 */
.title { font-size: 16px; font-weight: 600; margin: 16px 0 12px; }
.insight {
  border-left: 3px solid var(--color-info);
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  margin: 12px 0;
  border-radius: 0 6px 6px 0;
  background: var(--color-background-secondary);
  line-height: 1.5;
}

/* 數學公式區塊[cite: 1] */
.eq {
  font-size: 14px;
  padding: 12px 16px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  margin: 12px 0;
  text-align: center;
  font-weight: 500;
}

/* 高亮文字 */
.hl-trend { color: var(--color-text-info); font-weight: 600; }
.hl-seasonal { color: var(--color-text-danger); font-weight: 600; }
.hl-residual { color: var(--color-residual); font-weight: 600; }
.hl-success { color: var(--color-text-success); font-weight: 600; }

/* 步驟清單[cite: 1] */
.step-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-background-info);
  color: var(--color-text-info);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0; margin-top: 2px;
}
.step-body { flex: 1; }
.step-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.step-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }

/* 卡片網格[cite: 1] */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 500px) { .compare-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-md);
  padding: 1rem;
}
.card-highlight { border: 1px solid var(--color-info); }
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.card-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }

/* 徽章 */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; }
.b-blue { background: var(--color-background-info); color: var(--color-text-info); }
.b-gray { background: var(--color-border-secondary); color: var(--color-text-secondary); }

/* 圖表容器 */
.chart-container { position: relative; height: 260px; margin: 20px 0; width: 100%; }
canvas { width: 100% !important; display: block; }

/* 圖例 */
.legend-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 16px; }
.legend-box { display: inline-block; width: 20px; height: 4px; vertical-align: middle; border-radius: 2px; margin-right: 6px; }
.legend-line { display: inline-block; width: 16px; height: 2px; vertical-align: middle; margin-right: 4px; }
.trend-bg { background: var(--color-info); }
.seasonal-bg { background: var(--color-danger); }
.residual-bg { background: var(--color-residual); }

/* 滑桿控制 */
.slider-container { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 13px; color: var(--color-text-secondary); }
.slider-container input { flex: 1; cursor: pointer; }

/* 季節性強度網格 */
.strength-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; }
.strength-box { padding: 10px; border-radius: var(--border-radius-md); }
.strength-val { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.strength-desc { font-size: 11px; line-height: 1.3; }
.bg-success { background: var(--color-background-success); }
.text-success { color: var(--color-text-success); }
.bg-warning { background: var(--color-background-warning); }
.text-warning { color: var(--color-text-warning); }
.bg-secondary { background: var(--color-background-secondary); }
.text-secondary { color: var(--color-text-secondary); }
.bg-danger { background: var(--color-background-danger); }
.text-danger { color: var(--color-text-danger); }