/* ============================================================
   Autolab Sign-Off 換膚層｜slides.autolab.cloud（簡報提示詞產生器）
   2026-10-11。規範：logo-signoff/02-品牌核心.md；同 tool-site-theme 的色票。
   只覆蓋外觀，拿掉 </head> 前那行 link 就回到舊樣子。
   橘 #FF6B35 只給一處：講師區的 email 聯繫鈕（本站沒有預約鈕）。
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700;800;900&display=swap");

:root {
  --so-teal: #00708A; --so-teal-dk: #005A6F; --so-teal-lt: #E8F4F6;
  --so-ink: #1C1C1E; --so-sub: #636366; --so-mist: #F5F5F7; --so-line: #E5E5EA;
  --so-mango: #FFC233; --so-mango-lt: #FFF1D6; --so-orchid: #9C2A6B; --so-orchid-lt: #F6E6F0;
  --so-orange: #FF6B35;

  /* 接管站內變數 */
  --bg-alt: var(--so-mist);
  --hover: var(--so-mist);
  --brand-10: var(--so-teal-lt);
  --brand-20: rgba(0,112,138,.35);
  --deco: var(--so-teal);
  --orange-text: var(--so-orchid);
  --orange-10: var(--so-mango-lt);
  --font: 'Inter', 'Noto Sans TC', -apple-system, 'Segoe UI', sans-serif;
  --r-btn: 4px; --r-card: 4px; --r-modal: 4px; --r-pill: 4px;
  --shadow-card: none; --shadow-hover: none; --shadow-large: none;
}
html body { color: var(--so-ink); background: #FFFFFF; }
html body h1, html body h2, html body h3, html body h4,
html body .stat b { font-family: 'Inter Tight', 'Noto Sans TC', sans-serif; }

/* ---------- 頁首 ---------- */
html body .nav { background: rgba(255,255,255,.96); }
html body .nav-brand img { height: 28px; width: 28px; display: block; }
html body .nav-brand b { font-family: 'Inter Tight', 'Noto Sans TC', sans-serif; font-weight: 800; }
html body .nav-tag { font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; font-size: 12px; }
html body .nav-link { color: var(--so-ink); background: var(--so-mist); border-color: transparent; }
html body .nav-link:hover { color: var(--so-teal); background: var(--so-teal-lt); border-color: var(--so-teal); }
html body .lang-switch { border-color: var(--so-line); }
html body .lang-switch a.on { background: var(--so-ink); color: #FFFFFF; }

/* ---------- Hero：白底＋底部簽名線＋章壓線 ---------- */
html body .hero {
  position: relative; background: #FFFFFF; border-bottom: 0;
  padding: 64px 0 88px;
}
html body .hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 36px;
  height: 3px; background: var(--so-ink); pointer-events: none;
}
html body .hero::after {
  content: ""; position: absolute; right: max(24px, calc((100% - 1200px) / 2 + 24px));
  bottom: 37.5px; width: 72px; height: 72px; transform: translateY(50%);
  background: #FFFFFF url("/assets/autolab-icon-64.svg") center / contain no-repeat;
  border-radius: 50%; pointer-events: none;
}
html body .overline {
  display: inline-block; color: var(--so-ink); background: var(--so-mango);
  padding: 3px 10px; border-radius: 2px; letter-spacing: 2px;
  font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; font-weight: 700;
}
html body .hero h1 { font-weight: 900; letter-spacing: -.02em; }
html body .hero h1 em { color: var(--so-teal); }
html body .motto {
  color: var(--so-orchid); background: var(--so-orchid-lt);
  border: 0; border-left: 4px solid var(--so-orchid); border-radius: 2px;
}
html body .stat { background: var(--so-mist); border: 0; border-top: 4px solid var(--so-teal); }
html body .stat:nth-child(2) { border-top-color: var(--so-mango); }
html body .stat:nth-child(3) { border-top-color: var(--so-orchid); }
html body .stat:nth-child(4) { border-top-color: var(--so-ink); }
html body .stat b { font-weight: 800; }
html body .why div { border-radius: 4px; border-left: 4px solid var(--so-teal); }
html body .why div:nth-child(2) { border-left-color: var(--so-mango); }
html body .why div:nth-child(3) { border-left-color: var(--so-orchid); }

/* ---------- 步驟列 ---------- */
html body .stepper-bar { background: rgba(255,255,255,.97); }
html body .step-btn { border-radius: 4px; }
html body .step-btn .n { border-radius: 2px; font-family: 'JetBrains Mono', monospace; }
html body .step-btn:hover { border-color: var(--so-teal); background: #FFFFFF; }
html body .step-btn.active { border-color: var(--so-teal); background: var(--so-teal-lt); box-shadow: inset 0 -3px 0 var(--so-teal); }
html body .step-btn.active .n { background: var(--so-teal); }
html body .step-btn.done .n { background: var(--so-ink); }

/* ---------- 表單與卡片 ---------- */
html body .panel-head h2 { font-weight: 900; }
html body .card h3 { font-weight: 800; }
html body .card h3 .tag, html body .fit span { border-radius: 2px; font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; }
html body .demo-bar { background: var(--so-mango-lt); border: 1px solid var(--so-mango); }
html body .purpose.on, html body .tool-tab.on { box-shadow: inset 4px 0 0 var(--so-teal); }
html body .purpose:hover, html body .tool-tab:hover { border-color: var(--so-teal); }
html body .opt.on, html body .seg button.on { background: var(--so-teal); border-color: var(--so-teal); }
html body .btn-primary:hover { background: var(--so-teal-dk); }
html body .btn-ghost:hover { border-color: var(--so-teal); color: var(--so-teal); }
html body .page-no { border-radius: 2px; font-family: 'JetBrains Mono', monospace; }
html body .icon-btn { border-radius: 4px; }
html body .page-sum-row { border-radius: 4px; }
html body .chosen { border-radius: 4px; }
html body .add-page { border-radius: 4px; }

/* 風格圖庫：拿掉陰影與浮起 */
html body .style-card:hover { border-color: var(--so-teal); transform: none; }
html body .style-card.on { border-color: var(--so-teal); box-shadow: 0 0 0 2px var(--so-teal); }
html body .style-card .badge-on { background: var(--so-teal); }
html body .style-thumb .sl, html body .shot { box-shadow: none; outline: 1px solid rgba(0,0,0,.08); }
html body .real-badge { background: var(--so-ink); border-radius: 2px; font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; }

/* 產出區 */
html body .howto { background: var(--so-mango-lt); border: 1px solid var(--so-mango); border-radius: 4px; }
html body .howto b { color: var(--so-ink); }
html body .warn { background: var(--so-mango-lt); border-color: var(--so-mango); color: var(--so-ink); border-radius: 4px; }
html body .out-block { border-radius: 4px; }

/* Modal */
html body .modal-box { border-radius: 4px; }
html body .modal-body h5 { color: var(--so-teal); font-family: 'JetBrains Mono', 'Noto Sans TC', monospace; }
html body .x { border-radius: 4px; }

/* ---------- 資訊區 ---------- */
html body .info-sec h2 { font-weight: 900; }
html body .tips div { border-radius: 4px; border-top: 3px solid var(--so-teal); }
html body .tips div:nth-child(3n+2) { border-top-color: var(--so-mango); }
html body .tips div:nth-child(3n) { border-top-color: var(--so-orchid); }
html body .safety { border-left: 4px solid var(--so-orchid); border-radius: 4px; }
html body .teacher .avatar { background: var(--so-ink); border-radius: 4px; font-family: 'Noto Sans TC', sans-serif; }
/* 唯一的橘：講師區 email 聯繫鈕。實心、墨字、無光暈 */
html body .teacher a[href^="mailto:"] {
  display: inline-block; background: var(--so-orange); color: var(--so-ink);
  font-weight: 700; padding: 4px 12px; border-radius: 4px; text-decoration: none;
}
html body .teacher a[href^="mailto:"]:hover { text-decoration: none; filter: brightness(1.04); }
html body footer { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
html body footer::before {
  content: ""; width: 24px; height: 24px; flex-shrink: 0;
  background: url("/assets/autolab-icon-32.svg") center / contain no-repeat;
}
html body .toast { border-radius: 4px; }

@media (max-width: 760px) {
  html body .hero { padding-bottom: 76px; }
  html body .hero::before { bottom: 30px; }
  html body .hero::after { width: 48px; height: 48px; right: 16px; bottom: 31.5px; }
}