/* ==========================================================================
   Lixio Cloud 教學手冊 — 品牌覆寫層（冷青 × 煥彩）
   載入順序：css/style.css → css/brand-manual.css（只改顏色與光澤，不動版面）
   回滾：移除本檔的 <link> 即可
   ========================================================================== */

:root {
  /* 冷青主階（與官網同一套） */
  --primary: #08678A;
  --primary-dark: #06384C;
  --primary-light: #EAFBFD;
  --accent: #0B7A5E;
  --text: #21404E;
  --muted: #4C6B78;
  --border: #CFE3EA;
  --bg-soft: #F5FCFE;

  /* 標示框（維持語意色，改用冷色家族的亮色） */
  --warn-bg: #FFF8E9;   --warn-border: #E8B860;
  --ok-bg: #EAFBF3;       --ok-border: #6BE5B6;
  --info-bg: #EAFBFD;   --info-border: #A3E6F2;
  --admin-bg: #F2EFFE; --admin-border: #C4B5FD;

  /* 品牌延伸 */
  --deep: #062634;
  --code-bg: #E7F6FA;
  --lav: #5F4FD8;
  --bar: #45C6E0;              /* 素色裝飾條（手冊用，取代煥彩漸層） */
  --irid: linear-gradient(100deg, #7FE9F5, #7CE9C0 38%, #B6F5C4 62%, #A78BFA);
  --irid-soft: linear-gradient(100deg, rgba(127,233,245,.55), rgba(124,233,192,.45) 38%, rgba(182,245,196,.5) 62%, rgba(167,139,250,.45));
  --sh-1: 0 2px 3px rgba(6,38,52,.06), 0 12px 28px rgba(6,38,52,.10);
  --sh-2: 0 26px 60px rgba(6,38,52,.18), 0 8px 18px rgba(6,38,52,.08);
}

/* 頂部導覽：白玻璃＋冷色邊＋光暈 */
.topnav {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 26px rgba(6,38,52,.06);
}
.topnav .brand {
  background: var(--irid); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; letter-spacing: .2px;
}
.topnav .brand small { color: var(--muted); -webkit-text-fill-color: var(--muted); }
.topnav a.navlink { color: var(--primary); font-weight: 600; }
.topnav a.navlink:hover { background: var(--primary-light); text-decoration: none; }

/* 章節標題：主色漸層條 + 冷色字 */
.chapter-kicker { color: var(--primary); letter-spacing: 1.4px; }
h1 { color: var(--primary-dark); letter-spacing: .2px; }
h2 { border-left: 0; padding-left: 16px; position: relative; color: var(--primary-dark); }
h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px;
  border-radius: 3px; background: var(--bar);
}
h3 { color: var(--primary); }
h4 { color: var(--text); }

/* 表格：冷色表頭、斑馬列 */
th { background: linear-gradient(180deg, #0A7396, var(--primary)); color: #fff; }
tr:nth-child(even) td { background: var(--bg-soft); }

/* 功能卡：圓角＋立體陰影＋內亮邊＋滑過光暈 */
.func {
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--sh-1), 0 1px 0 #fff inset;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.func:hover { border-color: #9DD7E6; box-shadow: var(--sh-2), 0 1px 0 #fff inset; transform: translateY(-2px); }
.func h4 { color: var(--primary-dark); }
.func .meta .tag { background: var(--primary-light); color: var(--primary-dark); }
.func .meta .tag.role { background: var(--admin-bg); color: var(--lav); }
.func .field-label { color: var(--primary-dark); }

/* 步驟：煥彩圓標＋深字（與官網 CTA 同一風格） */
.steps > li::before {
  background: var(--primary-light); color: var(--primary-dark);
  font-weight: 700; border: 1px solid #A3E6F2; box-shadow: none;
}

/* 標示框：左側色條＋柔和底 */
.box { border-radius: 10px; border-width: 1px 1px 1px 4px; }
.box-info { box-shadow: 0 1px 0 #fff inset; }
.box .boxtitle { color: var(--primary-dark); }

/* 標籤 */
.badge { letter-spacing: .3px; }
.badge-admin { background: var(--lav); }
.badge-staff { background: var(--accent); }

/* 截圖：三層陰影＋內亮邊，看起來更立體 */
.screenshot img {
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--sh-2), 0 1px 0 #fff inset;
}
.screenshot .caption { color: var(--muted); }

/* 程式碼 */
code { background: var(--code-bg); color: #0B3A4A; border: 1px solid #CDEAF3; }
pre { background: var(--deep); color: #DDF3F9; border: 1px solid #0C4A61; box-shadow: var(--sh-1); }

/* 相關功能導引：冷色底＋漸層左條 */
.related { background: var(--primary-light); border-left: 0; padding-left: 20px; position: relative; border-radius: 10px; }
.related::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 10px 0 0 10px; background: var(--bar);
}
.related a { font-weight: 600; }

/* 章節導航（上一章／下一章）：卡片化＋滑過光暈 */
.chapter-nav a {
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
  box-shadow: var(--sh-1); transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.chapter-nav a:hover {
  border-color: #9DD7E6; background: #fff; transform: translateY(-2px); text-decoration: none;
  box-shadow: var(--sh-2);
}
.chapter-nav .ttl { color: var(--primary-dark); }

/* 目錄卡片：滑過煥彩光暈 */
.toc-card {
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
  box-shadow: var(--sh-1), 0 1px 0 #fff inset;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
  position: relative; overflow: hidden;
}
.toc-card::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--bar); opacity: 0; transition: opacity .22s ease;
}
.toc-card:hover { border-color: #9DD7E6; background: #fff; transform: translateY(-3px); box-shadow: var(--sh-2); text-decoration: none; }
.toc-card:hover::after { opacity: 1; }
.toc-card .num { color: var(--primary); }
.toc-card .ttl { color: var(--primary-dark); }
.toc-card .desc { color: var(--muted); }

/* 品牌標語：煥彩文字 */
.slogan { color: var(--primary-dark); }
.slogan .en { color: var(--muted); }

/* 連結底線用品牌色 */
a { color: var(--primary); }
a:hover { color: #0A7E9E; }

@media (prefers-reduced-motion: reduce) {
  .func, .chapter-nav a, .toc-card { transition: none; }
}

/* ===== 手機版：修橫向溢出（品牌名＋麵包屑＋回目錄撐爆 375px）===== */
.topnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav .brand{flex:0 0 auto}
.topnav .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topnav a.navlink{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){
  .topnav{height:auto;min-height:58px;padding:8px 14px;gap:10px;align-items:center}
  .topnav .brand{font-size:15px;line-height:1.35}
  .topnav .brand small{display:block;margin-left:0;font-size:11.5px}
  .topnav .crumb{font-size:13px}
  .topnav a.navlink{padding:6px 10px;font-size:13px}
  .wrap{padding:24px 16px 56px}
  h1{font-size:23px} h1.lead{font-size:26px}
  h2{font-size:20px;padding-left:12px} h3{font-size:17px}
  .func{padding:16px 16px;border-radius:12px}
  .screenshot img{max-width:100%}
  table{font-size:13.5px}
  .toc-grid{grid-template-columns:1fr}
  .chapter-nav a{padding:12px 14px}
}