:root{
  --text:#0f172a;
  --muted:#475569;
  --border:#e5e7eb;
  --chip-bg:#f1f5f9;
  --chip-text:#0f172a;
  --chip-active-bg:#0f172a;
  --chip-active-text:#ffffff;
  --radius:14px;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
}
html,body{margin:0;padding:0;background:#f8fafc;color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Noto Sans TC","PingFang TC","Microsoft JhengHei"}
.container{max-width:1120px;margin:28px auto;padding:0 16px}
header{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
h1{font-size:20px;margin:0}
.page-intro{background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:12px;margin:8px 0}
.page-intro p{margin:0;color:#0369a1;font-size:14px;line-height:1.5}
.controls{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
a.btn,button.btn{display:inline-block;border:1px solid var(--border);padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--text);background:#fff;cursor:pointer}
input[type="file"]{border:1px dashed var(--border);padding:8px;border-radius:8px;background:#fff}
/* 篩選器樣式 */
.filter-section{margin-top:8px;padding:16px;background:#fff;border-radius:12px;border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.filter-group{display:flex;flex-direction:column;gap:12px}
.filter-label{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.quick-filters{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{border:1px solid var(--border);background:#f8fafc;color:var(--text);padding:10px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all 0.2s ease}
.filter-btn:hover{background:#f1f5f9;border-color:#cbd5e1}
.filter-btn.active{background:var(--chip-active-bg);color:var(--chip-active-text);border-color:var(--chip-active-bg);font-weight:600}

/* Advanced filters */
.advanced-filters{margin-top:16px;border-top:1px solid var(--border);padding-top:16px}
.filter-row{margin-bottom:12px}
.multi-select{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.select-all-btn{background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s ease}
.select-all-btn:hover{background:#bae6fd}
.select-all-btn.active{background:#0369a1;color:#fff}
.multi-filter-btn{border:1px solid #e5e7eb;background:#fff;color:#6b7280;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease}
.multi-filter-btn:hover{background:#f9fafb;border-color:#d1d5db}
.multi-filter-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}

/* 手機端優化 - 全面響應式設計 */
@media (max-width: 768px) {
  /* 整體佈局調整 */
  .container{margin:16px auto;padding:0 12px;max-width:100%}
  header{margin-bottom:16px}
  h1{font-size:18px;margin:0}
  .page-intro{margin:8px 0;padding:10px;border-radius:6px}
  .page-intro p{font-size:13px}

  /* 控制項優化 */
  .controls{gap:16px}
  .row{flex-direction:column;align-items:stretch;gap:12px}

  /* 篩選器樣式優化 */
  .filter-section{margin-top:12px;padding:12px;border-radius:8px}
  .filter-group{gap:16px}
  .filter-label{font-size:13px;margin-bottom:6px}
  .quick-filters{flex-direction:column;gap:8px}
  .filter-btn{width:100%;padding:12px 16px;font-size:14px;text-align:center;justify-content:center;border-radius:8px}

  /* 進階篩選優化 */
  .advanced-filters{margin-top:20px;padding-top:20px;border-top-width:1px}
  .filter-row{margin-bottom:16px}
  .multi-select{flex-direction:column;gap:10px;align-items:stretch}
  .multi-filter-btn{width:100%;padding:10px 14px;font-size:13px;text-align:center;justify-content:center;border-radius:6px}
  .select-all-btn{width:100%;padding:10px 14px;font-size:13px;text-align:center;border-radius:6px;margin-bottom:8px}

  /* 卡片在手機上的優化 */
  .card-body{padding:14px}
  .card-title{font-size:16px;margin-bottom:2px}
  .card-category{font-size:11px;margin-bottom:8px}
  .card-header{margin-bottom:10px}
  .card-info{gap:6px}

  /* 最愛按鈕手機優化 */
  .favorite-btn{font-size:16px;padding:5px 6px;min-width:28px}

  /* 卡片資訊項目優化 */
  .card-time{font-size:13px}
  .card-other-time{font-size:13px}
  .card-nature{font-size:13px}
  .card-location{font-size:13px}
  .card-queue{font-size:12px;padding:5px 8px;margin-top:6px}

  /* 時間標籤優化 */
  .sessions{gap:4px;margin-top:6px}
  .session-tag{font-size:11px;padding:3px 6px;border-radius:4px}

  /* 區塊間距優化 */
  .block{margin-top:20px}
  .block h2{font-size:13px;margin:6px 0 10px 0}

  /* 網格佈局優化 */
  .grid{gap:12px;margin-top:8px}
}

/* 小螢幕手機優化 */
@media (max-width: 480px) {
  .container{margin:12px auto;padding:0 8px}
  header{margin-bottom:12px}
  h1{font-size:16px}
  .page-intro{margin:6px 0;padding:8px;border-radius:4px}
  .page-intro p{font-size:12px}

  /* 進一步縮小控制項 */
  .controls{gap:12px}
  .filter-section{margin-top:10px;padding:10px;border-radius:6px}
  .filter-group{gap:14px}

  /* 卡片進一步優化 */
  .card-body{padding:12px}
  .card-title{font-size:15px}
  .card-category{font-size:10px}
  .card-info{gap:5px}
  .card-time{font-size:12px}
  .card-location{font-size:12px}
  .card-queue{font-size:11px;padding:4px 6px}

  /* 最愛按鈕手機優化 */
  .favorite-btn{font-size:14px;padding:4px 5px;min-width:24px}

  /* 按鈕進一步優化 */
  .filter-btn{padding:10px 12px;font-size:13px}
  .multi-filter-btn{padding:8px 10px;font-size:12px}
  .select-all-btn{padding:8px 10px;font-size:12px}

  /* 區塊間距優化 */
  .block{margin-top:16px}
  .block h2{font-size:12px;margin:4px 0 8px 0}
}

.block{margin-top:18px}
.block h2{font-size:14px;color:#334155;margin:4px 0 8px 2px}
.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid{grid-template-columns:1fr 1fr 1fr}}

/* 重新設計的卡片樣式 - 更簡潔清晰 */
.card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  contain:layout style;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(0,0,0,0.12);
}

.card-body{padding:16px}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.card-title{font-size:18px;font-weight:700;color:var(--text);line-height:1.3;margin:0}
.card-category{font-size:12px;color:#64748b;font-weight:500;text-transform:uppercase;letter-spacing:0.5px}

/* 最愛按鈕樣式 */
.favorite-btn{
  background:#f8fafc;
  border:2px solid #e2e8f0;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  padding:6px 8px;
  border-radius:8px;
  transition:all 0.2s ease;
  line-height:1;
  user-select:none;
  color:#64748b;
  position:relative;
  min-width:32px;
  text-align:center;
}
.favorite-btn:hover{
  background:#f1f5f9;
  border-color:#cbd5e1;
  transform:scale(1.05);
}
.favorite-btn:active{
  transform:scale(0.98);
}
.favorite-btn-active{
  background:#fef2f2;
  border-color:#fca5a5;
  color:#dc2626;
}
.favorite-btn-active:hover{
  background:#fee2e2;
  border-color:#f87171;
}


.card-info{display:flex;flex-direction:column;gap:8px}
.card-time{font-size:14px;color:#059669;font-weight:600;display:flex;align-items:center;gap:4px}
.card-other-time{font-size:14px;color:#059669;font-weight:600;display:flex;align-items:center;gap:4px;margin-top:4px}
.card-nature{font-size:14px;color:#7c3aed;font-weight:600;display:flex;align-items:center;gap:4px}
.card-location{font-size:14px;color:#6b7280;display:flex;align-items:center;gap:4px}
.card-queue{font-size:13px;color:#dc2626;font-weight:600;display:flex;align-items:center;gap:4px;padding:6px 10px;background:#fef2f2;border-radius:6px;border:1px solid #fecaca;margin-top:4px}

.sessions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.session-tag{font-size:12px;border-radius:6px;padding:4px 8px;border:1px solid #e5e7eb;background:#f8fafc;color:#374151;font-weight:500}

.ribbon{
  position:absolute; top:12px; right:-42px;
  transform:rotate(35deg);
  background:#ef4444; color:#fff;
  font-weight:700; font-size:12px;
  padding:6px 48px;
  box-shadow:0 6px 16px rgba(239,68,68,0.35);
  letter-spacing:0.5px;
  pointer-events:none;
}
.pill--alert{ background:#fee2e2; color:#991b1b; border-color:#fecaca; font-weight:700; }
.pill--timeless{ background:#ecfeff; color:#0e7490; border-color:#a5f3fc; font-weight:700; }

/* Subject 主題色：依據你 CSV 的 subject 欄位 - 柔和溫和的色彩方案 */
/* Science - 深藍色 */
.sub-science  { --bg:#eff6ff; --accent:#1e40af; --borderC:#93c5fd; box-shadow:0 10px 24px rgba(30,64,175,0.15); }
/* Technology - 黃綠色 */
.sub-technology { --bg:#f7fdee; --accent:#3f6212; --borderC:#d9f99d; box-shadow:0 10px 24px rgba(63,98,18,0.15); }
/* PSHE - 柔和杏色 */
.sub-pshe     { --bg:#fff7ed; --accent:#9a3412; --borderC:#fed7aa; box-shadow:0 10px 24px rgba(154,52,18,0.15); }
/* Maths - 青色 */
.sub-maths    { --bg:#ecfeff; --accent:#0e7490; --borderC:#67e8f9; box-shadow:0 10px 24px rgba(14,116,144,0.15); }
/* Arts Education - 柔和粉色 */
.sub-arts     { --bg:#fdf2f8; --accent:#be185d; --borderC:#f9a8d4; box-shadow:0 10px 24px rgba(190,24,93,0.15); }
/* PE - 藍綠色 */
.sub-pe       { --bg:#f0fdfa; --accent:#0d9488; --borderC:#5eead4; box-shadow:0 10px 24px rgba(13,148,136,0.15); }
/* Language - 柔和紫色 */
.sub-language { --bg:#faf5ff; --accent:#7c3aed; --borderC:#d8b4fe; box-shadow:0 10px 24px rgba(124,58,237,0.15); }
/* Other/fallback - 柔和灰色 */
.sub-other    { --bg:#f9fafb; --accent:#4b5563; --borderC:#e5e7eb; box-shadow:0 10px 24px rgba(75,85,99,0.12); }

.card.sub-science,
.card.sub-technology,
.card.sub-pshe,
.card.sub-maths,
.card.sub-arts,
.card.sub-pe,
.card.sub-language,
.card.sub-other{
  background:var(--bg);
  border-color:var(--borderC);
}
.card[class*="sub-"] .cat-dot{background:var(--accent)}
.card[class*="sub-"] .badge.cat{
  background: color-mix(in oklab, var(--bg) 70%, white);
  border-color: color-mix(in oklab, var(--accent) 30%, #0000);
  color:#0f172a;
  font-weight:800;
}
.card[class*="sub-"] .session-tag{
  background: color-mix(in oklab, var(--bg) 55%, white);
  border-color: color-mix(in oklab, var(--accent) 25%, #0000);
}

/* Nature 性質色：攤位/體驗課/示範 */
.nature-booth   { --n-bg:#fff7ed; --n-text:#b45309; --n-border:#fed7aa; } /* 攤位 */
.nature-workshop{ --n-bg:#eefdf3; --n-text:#0f766e; --n-border:#bbf7d0; } /* 體驗課 */
.nature-demo    { --n-bg:#eff6ff; --n-text:#1d4ed8; --n-border:#bfdbfe; } /* 示範 */
.badge.nature.nature-booth   { background:var(--n-bg); color:var(--n-text); border-color:var(--n-border); }
.badge.nature.nature-workshop{ background:var(--n-bg); color:var(--n-text); border-color:var(--n-border); }
.badge.nature.nature-demo    { background:var(--n-bg); color:var(--n-text); border-color:var(--n-border); }

.empty{color:#64748b;padding:24px;text-align:center;border:1px dashed var(--border);border-radius:10px;background:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.time-source{font-size:12px;color:#64748b}
.source-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hint{font-size:12px;color:#64748b}
.divider{width:1px;height:18px;background:var(--border)}
.hidden{display:none !important}
.label{font-size:12px;color:#475569}
.time-ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
input[type="text"].time-input,
input[type="time"].time-input,
input[type="date"].date-input{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  min-width:120px;
}

/* Debug 區域樣式 */
.debug-section{
  margin-top:8px;
  border:2px dashed #e5e7eb;
  border-radius:8px;
  background:#f9fafb;
  display:block !important; /* 即使有hidden類別也要顯示 */
}
.debug-toggle{
  padding:8px 12px;
  border-bottom:1px dashed #e5e7eb;
}
.debug-btn{
  background:#6b7280 !important;
  color:#fff !important;
  font-size:12px;
}
.debug-content{
  padding:12px;
  display:none;
}
.debug-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.debug-label{
  font-size:12px;
  font-weight:600;
  color:#6b7280;
}