/* =========================================
   🌌 全域變數設定 (Root CSS Variables)
   ========================================= */
:root {
  --card-bg: rgba(255,255,255,0.06);   /* 卡片背景透明白 */
  --card-border: rgba(255,255,255,0.08); /* 卡片邊框淡白 */
  --accent: #7dd3fc;                   /* 主題強調色（亮藍） */
  --glass-blur: 8px;                   /* 玻璃模糊強度 */
  --max-width: 1100px;                 /* 內容最大寬度 */
}

/* =========================================
   🧱 基本結構與字型
   ========================================= */
html, body {
  height: 100%;
  margin: 0;
  font-family: "Roboto", "Noto Sans TC", system-ui, sans-serif; 
  color: #e6eef8;
}

body {
  background: #1e1e32;
  overflow-x: hidden;
  line-height: 1.5;
}

/* =========================================
   🌠 星星背景動畫效果
   ========================================= */
#stars { 
  position: fixed; 
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.star { 
  position: absolute; 
  border-radius: 50%; 
  background: rgba(255,255,255,0.7);
  animation: twinkle 1.5s infinite alternate;
}

@keyframes twinkle { 
  0% { opacity: 0.8; } 
  100% { opacity: 0.2; } 
}

/* =========================================
   🏗️ 主內容容器
   ========================================= */
.site { 
  position: relative; 
  z-index: 2;
  max-width: var(--max-width);
  margin: 28px auto;
  padding: 18px;
  backdrop-filter: blur(var(--glass-blur));
}

/* =========================================
   🪪 卡片樣式
   ========================================= */
.card { 
  background: var(--card-bg); 
  border: 1px solid var(--card-border); 
  border-radius: 12px; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

h1, h2 { 
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

label { 
  font-weight: 600; 
  color: #dfeffd; 
}

/* =========================================
   🔘 按鈕
   ========================================= */
.btn-primary { 
  background: linear-gradient(180deg, var(--accent), #4fb6d6); 
  border: none; 
  color: #032b3a;
  font-weight: 700; 
}

/* =========================================
   📊 流程圖容器（新版：大圖、全寬、清晰）
   ========================================= */
#flowcharts {
  display: flex;
  flex-direction: column; /* 改為上下排列 */
  gap: 28px;
  justify-content: center;
  padding: 18px 0;
  width: 100%;
}

/* 單個流程圖卡片 */
.flowchart-item {
  background: #0f1724;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.03);

  width: 100%;
  max-width: 100%; /* 允許佔滿整行 */
  margin: 0 auto;
}

/* 流程圖圖片（縮圖 + 清晰 + 大圖） */
.flowchart-item img {
  width: 150px;               /* 縮圖寬度 */
  height: 100px;              /* 縮圖高度 */
  display: block;
  border-radius: 6px;

  /* 裁切圖片的一角 */
  object-fit: cover;           /* 保持比例填滿容器 */
  object-position: top left;   /* 顯示左上角，也可以改成 center 或 bottom right */

  /* 新增：讓線條更銳利 */
  image-rendering: crisp-edges;
  image-rendering: pixelated;

  opacity: 0;
  filter: blur(2px) grayscale(0.08) contrast(0.96); /* 先模糊做載入前效果 */
  transition: filter .38s ease, opacity .38s ease;
  cursor: pointer;
}

/* 圖片完成載入 */
.flowchart-item img.loaded {
  opacity: 1;
  filter: none;
  width: 100%;               /* 完成載入後恢復全寬大圖 */
  height: auto;              /* 保持原始比例 */
  object-fit: contain;       /* 避免被裁切 */
  object-position: center;   /* 顯示整張圖 */
}


/* 電腦端大圖模式 */
@media (min-width: 992px) {
  .flowchart-item {
    max-width: 1200px;
  }
}


/* =========================================
   🌀 載入覆蓋層
   ========================================= */
.overlay { 
  position: fixed; 
  inset: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 999; 
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55)); 
  backdrop-filter: blur(4px); 
  visibility: hidden; 
  opacity: 0; 
  transition: opacity .18s ease, visibility .18s; 
  flex-direction: column; 
  gap: 12px; 
  padding: 20px; 
}

.overlay.show { 
  visibility: visible; 
  opacity: 1; 
}

.spinner { 
  width: 56px; 
  height: 56px; 
  border-radius: 50%; 
  display: grid; 
  place-items: center; 
  border: 6px solid rgba(255,255,255,0.06); 
  border-top-color: var(--accent); 
  animation: spin 1s linear infinite; 
}

@keyframes spin { 
  to { transform: rotate(360deg); } 
}

/* =========================================
   📈 進度條
   ========================================= */
.progress-wrap { 
  width: min(640px, 92%); 
  background: rgba(255,255,255,0.06); 
  border-radius: 8px; 
  padding: 8px; 
  border: 1px solid rgba(255,255,255,0.04); 
}

.progress-bar { 
  height: 10px; 
  border-radius: 6px; 
  background: rgba(255,255,255,0.08); 
  position: relative; 
  overflow: hidden; 
}

.progress-bar > i { 
  position: absolute; 
  left: 0; 
  top: 0; 
  bottom: 0; 
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #4fb6d6); 
  transition: width .18s linear; 
  display: block; 
}

.progress-label { 
  font-size: 0.95rem; 
  color: #e6eef8; 
  margin-top: 8px; 
  text-align: center; 
}

/* =========================================
   🔔 Toast
   ========================================= */
#toast { 
  position: fixed; 
  right: 16px; 
  bottom: 16px; 
  z-index: 1200; 
  display: none; 
  min-width: 200px; 
  max-width: 320px; 
  border-radius: 10px; 
  padding: 10px 12px; 
  background: rgba(3,14,22,0.9); 
  color: #f1f5f9;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6); 
}

#toast.show { 
  display: block; 
  opacity: 1; 
}

/* =========================================
   🌑 深色主題調整
   ========================================= */
body, .site, .card {
  color: #e6eef8;
}

.text-muted {
  color: #9aa7b5 !important;
}

.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================
   💬 表單
   ========================================= */
.form-control, .form-select {
  background-color: #0f172a;
  color: #e6eef8;
  border: 1px solid rgba(255,255,255,0.2);
}

.form-control::placeholder {
  color: #94a3b8;
}

.form-control:focus, .form-select:focus {
  background-color: #1e293b;
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.3);
}

/* =========================================
   🧩 Outline Button
   ========================================= */
.btn-outline-light {
  color: #e6eef8;
  border-color: rgba(255,255,255,0.3);
}

.btn-outline-light:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

/* =========================================
   🖼️ Lightbox
   ========================================= */
.lightbox-overlay {
  position: fixed;  
  inset: 0; 
  display: flex;     
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.85); 
  backdrop-filter: blur(4px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden; 
  transition: opacity 0.25s ease, visibility 0s 0.25s;
}

.lightbox-img {
  max-width: 95%;
  max-height: 95%;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.lightbox-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s 0s;
}