/* ===== Theme tokens ===== */
:root,
:root[data-theme="light"]{
  --brand:#2563eb; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-700:#1d4ed8;
  --accent:#f59e0b; --accent-200:#fde68a; --accent-300:#fcd34d;

  --page-bg:#eef2f7; --grid-dot:rgba(2,6,23,.06);
  --header-bg:#fff; --toolbar-bg:#fff; --card-bg:#fbfdff; --meta-bg:#f3f6fa;
  --border:#d7deea; --border-2:#b9c3d6;

  --text:#2b3442; --heading:#0f172a; --muted:#64748b;
  --footer-bg:#0b1324; --footer-fg:#e5e7eb;

  --radius-xl:20px; --radius-lg:16px; --radius-md:12px;
  --shadow-sm:0 6px 18px rgba(15,23,42,.10);
  --shadow-md:0 16px 36px rgba(15,23,42,.18);
  --shadow-lg:0 26px 60px rgba(15,23,42,.22);

  --hover-raise:translateY(-4px);
  --glow:0 0 0 3px var(--brand-100);

  /* ↞ 聚焦卡片最大寬（需求版 600px） */
  --focus-max-w:600px;
}
:root[data-theme="dark"]{
  --page-bg:#0f1830; --grid-dot:rgba(255,255,255,.08);
  --header-bg:#121f38; --toolbar-bg:#121f38; --card-bg:#15243f; --meta-bg:#101e36;
  --border:#2a3b58; --border-2:#47608d;
  --text:#e6efff; --heading:#f5f9ff; --muted:#b7c7e6;
  --footer-bg:#0a1326; --footer-fg:#cfe0ff;
  --shadow-sm:0 10px 22px rgba(3,9,22,.55);
  --shadow-md:0 24px 48px rgba(3,9,22,.66);
  --shadow-lg:0 40px 84px rgba(3,9,22,.72);
  --hover-raise:translateY(-3px);
  --glow:0 0 0 4px rgba(80,130,255,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter","Noto Sans TC",system-ui,-apple-system,"Segoe UI",Roboto,"Microsoft JhengHei",sans-serif;
  color:var(--text);
  background:
    radial-gradient(var(--grid-dot) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, #eaf2ff 0 160px, var(--page-bg) 160px) no-repeat;
}
body.modal-open{overflow:hidden}
::selection{background:var(--brand-200); color:#0b1220}
img{max-width:100%; height:auto; display:block}

/* ===== Header / Toolbar ===== */
.site-header{
  position:relative; max-width:1180px; margin:22px auto 14px; padding:22px 24px;
  background:var(--header-bg); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:96px 1fr 96px; align-items:center; gap:18px;
}
.header-center{text-align:center}
/* 主標題：避免單字垂直排、在小螢幕智慧換行與降字級 */
.header-center h1{
  margin:0 0 6px; color:var(--heading); font-weight:900; letter-spacing:.5px;
  font-size:clamp(18px, 4.8vw, 28px);
  white-space:normal; word-break:keep-all; line-break:loose; text-wrap:balance;
}
.header-center p{margin:0; color:var(--muted); font-weight:600; font-size:clamp(14px,3.8vw,18px)}
.site-header::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:min(760px,74%); height:10px; bottom:-12px; border-radius:999px;
  background:linear-gradient(90deg, #2563eb, #f59e0b);
  box-shadow:0 8px 16px rgba(0,0,0,.14), 0 0 0 1px var(--border); pointer-events:none;
}

/* 工具列 */
.toolbar{
  position:sticky; top:10px; z-index:10; max-width:1180px; margin:0 auto 12px; padding:12px;
  background:var(--toolbar-bg); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:12px;
}
.toolbar select,.toolbar input[type="search"]{
  width:100%; appearance:none; border:1px solid var(--border); border-radius:999px; padding:12px 14px; font-size:16px;
  background:#fff; color:var(--heading); outline:none;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
:root[data-theme="dark"] .toolbar select,
:root[data-theme="dark"] .toolbar input[type="search"]{background:#0c1424; color:var(--heading)}
.toolbar select:focus,.toolbar input[type="search"]:focus{border-color:#2563eb; box-shadow:var(--glow)}

/* 主題切換圓形鈕 */
.theme-btn{justify-self:end; height:44px; padding:0 16px; border:1px solid var(--border); border-radius:999px; background:var(--toolbar-bg); color:var(--heading); box-shadow:var(--shadow-sm); cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.theme-btn.icon-only{width:44px; height:44px; padding:0; border-radius:999px; justify-content:center}
.theme-btn .theme-icon{width:18px; height:18px; position:relative; display:inline-block}
:root[data-theme="light"] .theme-btn .theme-icon::before{content:"☀️"; position:absolute; inset:0; font-size:16px; line-height:18px}
:root[data-theme="dark"] .theme-btn .theme-icon::before{content:"🌙"; position:absolute; inset:0; font-size:16px; line-height:18px}

/* 手機：2 欄排版 */
@media (max-width:600px){
  .toolbar{ grid-template-columns:1fr 1fr; }
  #資料集{ grid-column:1 / -1; }
  #搜尋{   grid-column:1 / -1; }
  .theme-btn{ grid-column:2; justify-self:end; }
  .toolbar select, .toolbar input[type="search"]{ padding:10px 12px; }
}

.result-meta{max-width:1180px; margin:8px auto 0; padding:0 6px 10px; color:#475569; font-weight:800}
.result-meta::after{content:""; display:block; height:6px; margin-top:12px; background:linear-gradient(90deg, var(--accent-300) 0, var(--accent) 40%, transparent 40%); border-radius:999px}

/* ===== Cards ===== */
.cards{max-width:1180px; margin:12px auto 42px; padding:0 6px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
@media (max-width:1200px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.cards{grid-template-columns:1fr}}
.cards section{
  background:var(--card-bg); border:1px solid var(--border); border-radius:20px; padding:18px 16px 16px; box-shadow:var(--shadow-sm);
  transition:border-color .15s, box-shadow .18s cubic-bezier(.2,.6,.2,1), transform .18s cubic-bezier(.2,.6,.2,1), background-color .25s ease;
  cursor:zoom-in;
}
.cards h3{margin:0 0 10px; font-size:20px; font-weight:900; color:var(--heading); line-height:1.35}
.cards .meta{font-size:14px; line-height:1.65; color:#475569; background:var(--meta-bg); border:1px dashed var(--border-2); padding:10px; border-radius:16px}
:root[data-theme="dark"] .cards .meta{color:#aac0d9}
.cards .meta strong{color:var(--heading); font-weight:800}
.cards p{margin:10px 0 0; color:var(--text)}
.cards .meta a{color:var(--brand-700); font-weight:700; text-decoration:none; word-break:break-all}
.cards .meta a:hover{text-decoration:underline}
/* 夜間模式：連結提亮 */
:root[data-theme="dark"] .cards .meta a{ color:#4da6ff; }
:root[data-theme="dark"] .cards .meta a:hover{ color:#80c0ff; }

.cards section:hover{border-color:var(--brand-200); box-shadow:var(--shadow-lg); transform:var(--hover-raise); background:linear-gradient(0deg, color-mix(in oklab, var(--accent-200) 6%, transparent) 0, transparent 90%), var(--card-bg)}

/* ===== Footer ===== */
.site-footer{text-align:center; padding:34px 12px 64px; color:var(--footer-fg); background:var(--footer-bg)}

/* ===== 聚焦覆蓋層 ===== */
.focus-overlay{
  position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center;
  padding:32px; background:rgba(12,16,28,.55);
}
@supports (backdrop-filter: blur(2px)){ .focus-overlay{ backdrop-filter: blur(2px); } }
.focus-overlay.show{ display:flex; }

.focus-inner{
  position:relative; width:min(var(--focus-max-w), 92vw); max-height:86vh;
  display:flex; align-items:center; justify-content:center;
}
.focus-card{
  position:relative; width:100%; max-height:86vh; overflow:auto;
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:20px; box-shadow:0 30px 70px rgba(3,9,22,.32);
  padding:24px 22px 22px;
  transform:scale(.96); opacity:0; animation:focus-zoom .14s ease-out forwards;
  text-align:left;
}
@keyframes focus-zoom{ to{ transform:scale(1); opacity:1 } }
.focus-card h3{ font-size:22px }
.focus-card .meta{ font-size:15px }
.focus-card .meta a{ font-weight:800 }

/* 關閉鈕 */
.focus-close{
  position:absolute; top:10px; right:10px;
  width:42px; height:42px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--toolbar-bg); color:var(--heading);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  cursor:pointer; font-size:18px; line-height:40px; font-weight:900;
}
.focus-close:focus{ outline:none; box-shadow:0 0 0 4px rgba(80,130,255,.45) }

/* 左/右導覽鈕 */
.focus-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--toolbar-bg); color:var(--heading);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:0;
}
.focus-nav::before{ display:inline-block; font-size:22px; line-height:1; font-weight:900; }
.focus-nav.prev::before{ content:'←'; }
.focus-nav.next::before{ content:'→'; }
.focus-nav.prev{ left:-56px }
.focus-nav.next{ right:-56px }
.focus-nav:disabled{ opacity:.35; cursor:not-allowed }

/* 小螢幕：給箭頭預留空間，不蓋內容 */
@media (max-width:820px){
  .focus-inner{ padding:0 64px; }
  .focus-nav.prev{ left:10px; top:50%; transform:translateY(-50%); }
  .focus-nav.next{ right:10px; top:50%; transform:translateY(-50%); }
  .focus-close{ top:6px; right:6px; }
}
/* 更窄螢幕：縮小箭頭 */
@media (max-width:480px){
  .focus-inner{ padding:0 56px; }
  .focus-nav{ width:44px; height:44px; }
}

.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;
}