/* ============================================================
   Autolab Sign-Off 換膚層｜pofengzhe.autolab.cloud（技職永續破風者研習）2026-10-11
   客戶課程站：保留研習名稱，只換外框（色、字、方角、簽名線、講師區的 Autolab 章）。
   唯一的橘：講師區「聊聊企業 AI 培訓 / 導入」鈕（實心、墨字、落在墨底上）。
   拿掉 </head> 前那行 link 就回到舊樣子。
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&family=Noto+Sans+TC:wght@400;500;700;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;
  --brand-teal: var(--so-teal);
  --brand-teal-dark: var(--so-teal-dk);
  --brand-ink: var(--so-ink);
  --brand-orange: var(--so-mango);
  --bg-light: var(--so-mist);
  --card-shadow: none;
  --bs-primary: #00708A; --bs-primary-rgb: 0, 112, 138;
  --bs-link-color: #00708A; --bs-link-hover-color: #005A6F;
}
html body { font-family: "Inter", "Noto Sans TC", system-ui, -apple-system, "PingFang TC", sans-serif; background: var(--so-mist); color: var(--so-ink); }
html body h1, html body h5, html body .hero h1 { font-family: "Inter Tight", "Noto Sans TC", sans-serif; letter-spacing: -0.01em; }

/* 頁首：白底細線（研習名稱保留） */
html body .navbar { background: #FFFFFF; border-bottom: 1px solid var(--so-line); }
html body .navbar.navbar-dark .navbar-brand { color: var(--so-ink); font-weight: 800; }
html body .navbar-brand .bi-stars { color: var(--so-teal); }

/* Hero：白底＋墨色簽名線，章壓在線上靠右 */
html body .hero {
  position: relative; background: #FFFFFF; color: var(--so-ink);
  border: 1px solid var(--so-line); border-radius: 4px;
  padding: 44px 24px 72px;
}
html body .hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 32px; height: 3px; background: var(--so-ink);
}
html body .hero::after {
  content: ""; position: absolute; right: 28px; bottom: 33.5px; width: 64px; height: 64px;
  transform: translateY(50%); border-radius: 50%;
  background: #FFFFFF url("autolab-icon-64.svg") center / contain no-repeat;
}
html body .hero h1 { font-weight: 900; font-size: 2rem; }
html body .hero .motto { color: var(--so-sub); opacity: 1; }
html body .hero .stat-badge {
  background: var(--so-mist); color: var(--so-ink); border-radius: 2px;
  border-left: 3px solid var(--so-teal); font-weight: 600;
}
html body .hero .stat-badge:nth-child(2) { background: var(--so-mango-lt); border-left-color: var(--so-mango); }
html body .hero .stat-badge:nth-child(3) { background: var(--so-orchid-lt); border-left-color: var(--so-orchid); }
html body .hero .stat-badge:nth-child(4) { background: var(--so-teal-lt); border-left-color: var(--so-teal); }
html body .hero .stat-badge:nth-child(5) { background: var(--so-mist); border-left-color: var(--so-ink); }
html body .hero > div[style] { color: var(--so-sub); opacity: 1 !important; }

/* 卡片 */
html body .card { border-radius: 4px; box-shadow: none; border-color: var(--so-line); }
html body .card-header { border-bottom-color: var(--so-line); }
html body .info-card { background: var(--so-teal-lt); border-left-color: var(--so-teal); border-radius: 4px; }
html body .warn-card { background: var(--so-mango-lt); border-left: 4px solid var(--so-mango); border-radius: 4px; }
html body .step-num { border-radius: 4px; background: var(--so-teal); }

/* 三種模式 */
html body .mode-btn { border-radius: 4px; border: 1px solid var(--so-line); box-shadow: inset 0 3px 0 var(--so-line); }
html body .mode-btn:hover { border-color: var(--so-teal); }
html body .mode-btn.active { background: var(--so-teal-lt); border-color: var(--so-teal); box-shadow: inset 0 4px 0 var(--so-teal); }
html body .mode-btn .mc { color: var(--so-teal); font-family: "JetBrains Mono", "Noto Sans TC", monospace; }
html body .mode-btn .md { color: var(--so-sub); }
html body .mode-hint { background: var(--so-mist); color: var(--so-sub); border-radius: 4px; border-left: 3px solid var(--so-mango); }

/* 分類與按鈕 */
html body .filter-btn { border-radius: 4px; }
html body .filter-btn.btn-outline-secondary { color: var(--so-ink); border-color: var(--so-line); background: #FFFFFF; }
html body .filter-btn.btn-outline-secondary:hover { color: var(--so-teal); border-color: var(--so-teal); background: var(--so-teal-lt); }
html body .filter-btn.btn-secondary, html body .filter-btn.active { background: var(--so-ink); border-color: var(--so-ink); color: #FFFFFF; }
html body .form-select, html body .form-control { border-radius: 4px; }
html body .form-control:focus, html body .form-select:focus { border-color: var(--so-teal); box-shadow: 0 0 0 3px rgba(0,112,138,.15); }
html body .output-container { border-radius: 4px; background: var(--so-mist); border: 1px solid var(--so-line); border-left: 4px solid var(--so-teal); }
html body .btn { border-radius: 4px; }
html body .btn-success { background: var(--so-teal); border-color: var(--so-teal); color: #FFFFFF; }
html body .btn-success:hover { background: var(--so-teal-dk); border-color: var(--so-teal-dk); }
html body .tool-link { border-radius: 4px; color: var(--so-teal); border-color: var(--so-line); }
html body .tool-link:hover { background: var(--so-teal); color: #FFFFFF; }

/* 講師區：墨底，Autolab 章在右上 */
html body .teacher { position: relative; background: var(--so-ink); color: #E5E5EA; border-radius: 4px; }
html body .teacher::before {
  content: ""; position: absolute; top: 24px; right: 24px; width: 48px; height: 48px;
  background: url("autolab-seal-reverse.svg") center / contain no-repeat;
}
html body .teacher a { color: var(--so-mango); }
html body .t-role { color: var(--so-mango); font-family: "JetBrains Mono", "Noto Sans TC", monospace; }
html body .t-portrait { border-radius: 4px; border: 0; background: #2C2C2E; }
html body .t-stat { border-radius: 4px; background: rgba(255,255,255,.06); border-top: 4px solid var(--so-teal); }
html body .row > div:nth-child(2) > .t-stat { border-top-color: var(--so-mango); }
html body .row > div:nth-child(3) > .t-stat { border-top-color: var(--so-orchid); }
html body .row > div:nth-child(4) > .t-stat { border-top-color: #FFFFFF; }
html body .t-stat b { color: #FFFFFF; font-family: "Inter Tight", sans-serif; font-weight: 800; }
html body .t-entry { border-radius: 4px; }
html body .t-qr { border-radius: 4px; }
/* 唯一的橘 */
html body .t-cta { background: var(--so-orange); color: var(--so-ink) !important; border-radius: 4px; box-shadow: none; }
html body .t-cta:hover { background: var(--so-orange); color: var(--so-ink) !important; filter: brightness(.95); }

html body .footer { color: var(--so-sub); }
html body .footer a { color: var(--so-teal); }

@media (max-width: 760px) {
  html body .hero::after { width: 48px; height: 48px; right: 16px; }
  html body .hero h1 { font-size: 1.5rem; }
  html body .teacher::before { width: 36px; height: 36px; top: 16px; right: 16px; }
}