/* ============================================================
   Autolab Sign-Off 換膚層｜lus-prompt.autolab.cloud（路斯科技專屬填空指令站）
   2026-10-11。客戶站：保留「路斯科技」名稱與內容，只把外框換成 Autolab 新識別。
   只覆蓋外觀，不動功能；拿掉 index.html 裡那行 link 就回到舊樣子。
   規範：logo-signoff/02-品牌核心.md
   本頁沒有預約／聯繫按鈕，所以全頁不放橘色（原本的橘改芒果金、蘭花洋紅）。
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700;800&family=JetBrains+Mono:wght@500;700&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;

  /* 接管原本 tokens */
  --brand: var(--so-teal);
  --brand-deep: var(--so-teal-dk);
  --brand-tint: var(--so-teal-lt);
  --navy: var(--so-ink);
  --orange: var(--so-orchid);
  --orange-text: var(--so-orchid);
  --orange-tint: var(--so-orchid-lt);
  --text: var(--so-ink);
  --text-2: var(--so-sub);
  --bg-2: var(--so-mist);
  --border: var(--so-line);
  --radius-md: 4px; --radius-lg: 4px; --radius-xl: 4px;
  --shadow: none;
  --shadow-lg: none;
  --font: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

html body h1, html body #editor h2, html body footer h3 {
  font-family: "Inter Tight", "Noto Sans TC", sans-serif;
}

/* ---------- 頁首：客戶名稱保留，下面一條簽名線＋章 ---------- */
html body header.top {
  position: relative;
  border-top: 0;
  padding: 22px 0 34px;
}
html body .eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", "Noto Sans TC", monospace;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--so-ink);
  background: var(--so-mango);
  padding: 3px 9px;
  border-radius: 2px;
}
html body h1 { margin-top: 10px; }
html body header.top::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 14px;
  height: 3px; background: var(--so-ink);
  pointer-events: none;
}
html body header.top::after {
  content: "";
  position: absolute; bottom: 15.5px;
  right: max(16px, calc((100% - 720px) / 2 + 16px));
  width: 48px; height: 48px;
  transform: translateY(50%);
  background: #FFFFFF url("autolab-icon-64.svg") center / contain no-repeat;
  border-radius: 50%;
  pointer-events: none;
}

/* R／C／E 三格：青、芒果、洋紅三色條 */
html body .rce div { border-top: 4px solid var(--so-teal); }
html body .rce div:nth-child(2) { border-top-color: var(--so-mango); }
html body .rce div:nth-child(3) { border-top-color: var(--so-orchid); }
html body .rce b { font-family: "Inter Tight", "Noto Sans TC", sans-serif; }

/* ---------- 部門頁籤 ---------- */
html body nav.tabs { margin-top: 0; }
html body .tab[aria-selected="true"] { background: var(--so-ink); border-color: var(--so-ink); }
html body .tab:hover { border-color: var(--so-teal); }

/* ---------- 模板卡 ---------- */
html body .card { border-color: var(--so-line); }
html body .card:hover { border-color: var(--so-teal); }
html body .card.is-case { border-left: 4px solid var(--so-orchid); }
html body .badge { border-radius: 2px; }
html body .b-case { background: var(--so-orchid-lt); color: var(--so-orchid); }
html body .b-tool { background: var(--so-teal-lt); color: var(--so-teal-dk); }
html body .back { border-radius: 4px; }

/* ---------- 編輯頁 ---------- */
html body .field label .k { border-radius: 2px; }
html body .field.c label .k { background: var(--so-mango); color: var(--so-ink); }
html body .field.e label .k { background: var(--so-orchid); color: #FFFFFF; }
html body textarea:focus { box-shadow: 0 0 0 3px rgba(0,112,138,.15); }
html body .howto { background: var(--so-teal-lt); border-left: 4px solid var(--so-teal); }

/* 底部動作列：只留細線，不加陰影 */
html body .bar { box-shadow: none; border-top: 3px solid var(--so-ink); }
html body .ai a.rec { box-shadow: inset 0 0 0 1px var(--so-teal); }
html body .ai a.rec::after {
  background: var(--so-mango);
  color: var(--so-ink);
  border-radius: 2px;
  font-family: "JetBrains Mono", "Noto Sans TC", monospace;
}
html body .toast { box-shadow: none; border-radius: 4px; background: var(--so-ink); }

/* ---------- 頁尾：資安三原則用淺芒果；講師處放章 ---------- */
html body footer { background: var(--so-mist); }
html body .sec {
  background: var(--so-mango-lt);
  border-left: 4px solid var(--so-mango);
  border-radius: 4px;
}
html body .never em {
  border-radius: 2px;
  background: #FFFFFF;
  color: var(--so-orchid);
  border: 1px solid var(--so-orchid-lt);
}
html body footer .wrap > p:nth-of-type(3) {
  position: relative;
  padding-left: 46px;
  min-height: 36px;
}
html body footer .wrap > p:nth-of-type(3)::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 36px; height: 36px;
  background: url("autolab-icon-64.svg") center / contain no-repeat;
}

@media (max-width: 560px) {
  html body header.top::after { width: 40px; height: 40px; }
}