/* Y2K 主題層 — 疊在 Bootstrap 5 之上
 *
 * 作法：先覆寫 Bootstrap 自己的 CSS 變數（--bs-*），讓它內建的元件
 * （按鈕、卡片、accordion、offcanvas…）自動吃到我們的配色與圓角，
 * 再針對少數元件補自訂樣式。這樣既保留 Bootstrap 的網格與行為，
 * 又不會是預設的 Bootstrap 長相。
 */

:root {
  /* --- Y2K 調色盤 --- */
  --paper:#f2f2ec; --surface:#fff; --ink:#0c0d0a; --muted:#6f7168;
  --line:#e0dfd5; --dot:#d9d8cb;
  --accent:#b9f227; --accent-ink:#0c0d0a; --accent-text:#4a7300;
  --sans:"Syne",-apple-system,"PingFang TC","Noto Sans TC",sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- 交給 Bootstrap --- */
  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
  --bs-body-font-family:var(--sans);
  --bs-body-font-size:1rem;
  --bs-body-line-height:1.7;
  --bs-border-color:var(--line);
  --bs-border-radius:14px;
  --bs-border-radius-sm:10px;
  --bs-border-radius-lg:18px;
  --bs-secondary-color:var(--muted);
  --bs-emphasis-color:var(--ink);
  --bs-link-color:var(--accent-text);
  --bs-link-hover-color:var(--ink);
  --bs-primary:var(--accent);
  --bs-primary-rgb:185,242,39;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0b0c09; --surface:#141710; --ink:#f0f1e8; --muted:#8b8e80;
    --line:#25281b; --dot:#1b1e14;
    --accent:#c6ff2e; --accent-ink:#0c0d0a; --accent-text:#c6ff2e;
    --bs-body-bg:var(--paper);
    --bs-body-color:var(--ink);
    --bs-border-color:var(--line);
    --bs-secondary-color:var(--muted);
    --bs-emphasis-color:var(--ink);
  }
}

body {
  /* Y2K 的招牌：紙感點陣底 */
  background-color:var(--paper);
  background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.2px);
  background-size:24px 24px;
  -webkit-font-smoothing:antialiased;
}

/* ══════════════════════════════════════ 頁首 */
.site-head{
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--line);
  position:sticky; top:0; z-index:1030;
}
.head-logo{height:2.2rem;width:auto}
@media (prefers-color-scheme:dark){.head-logo{filter:invert(1)}}
.head-dept{font-size:.75rem;color:var(--muted);letter-spacing:.05em}
.head-title{
  font-size:clamp(1.05rem,2.6vw,1.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.25;
}
.badge-term{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .9rem;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:.8rem;font-weight:500;
}
.btn-menu{
  width:2.75rem;height:2.75rem;flex:none;border-radius:50%;
  border:1.5px solid var(--line);color:var(--ink);background:transparent;
}
.btn-menu:hover{border-color:var(--ink);color:var(--ink)}

/* ══════════════════════════════════════ 共用 */
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.9rem;
}
.panel{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--bs-border-radius);padding:1.35rem;
}
.pane-title{
  display:flex;align-items:center;gap:.65rem;
  font-size:1.4rem;font-weight:800;letter-spacing:-.02em;
  padding-bottom:.9rem;margin-bottom:1.35rem;
  border-bottom:2px solid var(--ink);
}
.pane-title i{color:var(--accent-text)}
.pane{animation:rise .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .7rem;border-radius:999px;font-size:.78rem;
  background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-text);
}

/* ══════════════════════════════════════ 側邊選單 */
.side-card{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--bs-border-radius);padding:.6rem;overflow:hidden;
}
aside .side-card.sticky-top{top:6.5rem}
.nav-item-btn{
  display:flex;align-items:center;gap:.75rem;width:100%;
  padding:.8rem .9rem;border:0;border-radius:10px;background:transparent;
  color:var(--ink);font-family:var(--sans);font-size:.95rem;font-weight:600;
  text-align:left;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.nav-item-btn i{width:1.25rem;text-align:center;color:var(--muted)}
.nav-item-btn:hover{background:var(--paper)}
.nav-item-btn.active{background:var(--accent);color:var(--accent-ink)}
.nav-item-btn.active i{color:var(--accent-ink)}

.info-list li{
  display:flex;gap:.6rem;padding:.35rem 0;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink);
}
.info-list li:first-child{border-top:0}
.info-list span{flex:none;width:2.6rem;color:var(--muted)}

/* ══════════════════════════════════════ 儀錶板 */
.stat-card{
  position:relative;height:100%;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--bs-border-radius);padding:1.1rem;
}
.stat-ico{position:absolute;top:1.1rem;right:1.1rem;color:var(--accent-text);opacity:.65}
.stat-card b{display:block;font-family:var(--mono);font-size:1.9rem;font-weight:500;line-height:1.1}
.stat-card span{font-size:.76rem;color:var(--muted)}

.prog-row{margin-bottom:1.1rem}
.prog-row:last-child{margin-bottom:0}
.prog-head{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.4rem}
.prog-head b{font-weight:600}
.prog-head span{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.progress{height:.65rem;background:var(--line);border-radius:999px}
.progress-bar{background:var(--accent)}

.timeline{list-style:none;padding:0;margin:0}
.timeline li{
  position:relative;padding:0 0 1.1rem 1.4rem;
  border-left:2px solid var(--line);
}
.timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.timeline li::before{
  content:"";position:absolute;left:-.42rem;top:.35rem;
  width:.7rem;height:.7rem;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);
}
.timeline .tl-t{display:block;font-size:.9rem;line-height:1.5}
.timeline .tl-d{display:block;font-family:var(--mono);font-size:.73rem;color:var(--muted);margin-top:.15rem}

.goal-card{
  height:100%;padding:1rem;border-radius:12px;
  border:1.5px dashed var(--line);background:var(--paper);
}
.goal-card i{color:var(--accent-text);margin-bottom:.4rem;display:block;font-size:1.1rem}
.goal-card b{display:block;font-size:.92rem;margin-bottom:.2rem}
.goal-card span{font-size:.8rem;color:var(--muted);line-height:1.6}

/* ══════════════════════════════════════ 個人介紹 */
.profile-head{display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap}
.avatar{
  width:5.5rem;height:5.5rem;flex:none;border-radius:50%;object-fit:contain;padding:.7rem;
  background:var(--paper);border:1.5px solid var(--line);
}
@media (prefers-color-scheme:dark){.avatar{filter:invert(1)}}

.skill-row{margin-bottom:.9rem}
.skill-row:last-child{margin-bottom:0}
.skill-head{display:flex;justify-content:space-between;font-size:.84rem;margin-bottom:.35rem}
.skill-head span{font-family:var(--mono);font-size:.76rem;color:var(--muted)}

.link-list li{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;font-size:.88rem}
.link-list i{width:1.1rem;text-align:center;color:var(--accent-text)}
.list-group-item{background:transparent;border-color:var(--line);padding:.85rem .25rem}

/* ══════════════════════════════════════ 篩選列 */
.filter-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.btn-chip{
  border:1.5px solid var(--line);border-radius:999px!important;
  padding:.4rem 1rem;margin-right:.5rem;
  font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--muted);background:transparent;
}
.btn-chip:hover{border-color:var(--ink);color:var(--ink)}
.btn-chip.active{background:var(--accent);border-color:var(--ink);color:var(--accent-ink)}
.btn-group>.btn-chip{border-radius:999px!important}

/* ══════════════════════════════════════ 學習日誌 accordion */
.accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:var(--line);
  --bs-accordion-btn-color:var(--ink);--bs-accordion-active-color:var(--ink);
  --bs-accordion-active-bg:color-mix(in srgb,var(--accent) 14%,transparent);
  --bs-accordion-btn-focus-box-shadow:none;--bs-accordion-border-radius:var(--bs-border-radius);
}
.accordion-item{background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--bs-border-radius)!important;margin-bottom:.75rem;overflow:hidden}
.accordion-button{font-family:var(--sans);font-weight:700;font-size:.98rem;padding:1.05rem 1.2rem}
.accordion-button:not(.collapsed){box-shadow:none}
.accordion-body{padding:0 1.2rem 1.25rem;font-size:.93rem}
.wk{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.4rem;height:1.7rem;margin-right:.8rem;border-radius:7px;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.75rem;
}
.accordion-button.collapsed .wk{background:var(--line);color:var(--muted)}
.jtag{
  margin-left:auto;margin-right:.6rem;padding:.15rem .6rem;border-radius:999px;
  font-size:.7rem;font-weight:600;
  background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent-text);
}
.jbody h6{font-size:.82rem;font-weight:700;color:var(--muted);letter-spacing:.05em;margin:1rem 0 .4rem}
.jbody ul{padding-left:1.15rem;margin-bottom:0}
.jbody li{margin-bottom:.3rem}

/* ══════════════════════════════════════ 資源卡 */
.res-card{
  display:flex;flex-direction:column;height:100%;padding:1.15rem;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--bs-border-radius);text-decoration:none;color:var(--ink);
  transition:border-color .15s ease,transform .15s ease;
}
.res-card:hover{border-color:var(--ink);transform:translateY(-2px);color:var(--ink)}
.res-ico{
  width:2.5rem;height:2.5rem;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-text);
  margin-bottom:.8rem;font-size:1rem;
}
.res-card b{font-size:.98rem;margin-bottom:.3rem;line-height:1.4}
.res-card p{font-size:.83rem;color:var(--muted);margin-bottom:.8rem;line-height:1.6;flex-grow:1}
.res-meta{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;color:var(--muted)}

/* ══════════════════════════════════════ offcanvas / 頁尾 */
.offcanvas{background:var(--paper);color:var(--ink)}
.offcanvas-header{border-bottom:1.5px solid var(--line)}
.offcanvas-title{font-family:var(--sans);font-weight:700;font-size:1rem}

.site-foot{border-top:1.5px solid var(--line);margin-top:3rem;color:var(--muted)}

:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .pane{animation:none}
  .res-card:hover{transform:none}
}