* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

  :root {
    --blue:#1E3F8F;
    --blue-2:#2D52A8;
    --blue-soft:#EBF0FF;
    --gold:#D4AF37;
    --gold-2:#F4D03F;
    --ink:#1B1B1B;
    --ink-2:#666;
    --ink-3:#999;
    --line:#E8ECF7;
    --bg:#F6F8FE;
  }

  html { scroll-behavior:smooth; }

  body {
    font-family:-apple-system,BlinkMacSystemFont,'PingFang HK','Microsoft JhengHei',sans-serif;
    background:var(--bg);
    color:var(--ink);
    font-size:15px;
    line-height:1.85;
    padding-bottom:96px;
    -webkit-font-smoothing:antialiased;
  }

  /* ===== 頂部導航 ===== */
  .navbar {
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
    padding:12px 16px;
    display:flex; align-items:center; gap:12px;
  }

  .nav-back {
    width:34px; height:34px; border-radius:50%;
    background:var(--blue-soft);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; color:var(--blue); cursor:pointer; flex-shrink:0;
  }

  .nav-title { font-size:16.5px; font-weight:700; color:var(--blue); flex:1; }

  .nav-toc {
    font-size:13px; color:var(--blue); font-weight:600;
    background:var(--blue-soft); padding:6px 12px; border-radius:20px;
    cursor:pointer; white-space:nowrap;
  }

  /* 閱讀進度 */
  .progress {
    position:fixed; top:59px; left:0; height:3px; width:0%;
    background:linear-gradient(90deg,var(--blue),var(--gold));
    z-index:61; transition:width .12s linear;
  }

  /* ===== 品牌頭部 ===== */
  .hero {
    background:linear-gradient(135deg,var(--blue) 0%,var(--blue-2) 65%,#3A66C9 100%);
    padding:26px 20px 30px;
    color:#fff; position:relative; overflow:hidden;
  }

  .hero::after {
    content:""; position:absolute; right:-40px; top:-40px;
    width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle,rgba(244,208,63,.28),transparent 70%);
  }

  .hero-brand { display:flex; align-items:center; gap:10px; margin-bottom:14px; }

  .hero-logo {
    width:38px; height:38px; border-radius:11px;
    background:linear-gradient(135deg,var(--gold-2),var(--gold));
    color:var(--blue); font-weight:800; font-size:15px;
    display:flex; align-items:center; justify-content:center;
    letter-spacing:-.5px;
  }

  .hero-brand-name { font-size:17px; font-weight:700; letter-spacing:.5px; }

  .hero h1 { font-size:22px; font-weight:800; line-height:1.4; margin-bottom:8px; }

  .hero-sub { font-size:12.5px; color:rgba(255,255,255,.78); line-height:1.7; }

  .hero-chips { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

  /* 快捷跳轉 */
  .quick-nav {
    display:flex; gap:8px; margin-top:14px; overflow-x:auto;
    padding-bottom:2px; scrollbar-width:none;
  }

  .quick-nav::-webkit-scrollbar { display:none; }

  .quick {
    flex-shrink:0; font-size:12px; font-weight:600;
    padding:7px 14px; border-radius:20px;
    background:rgba(255,255,255,.94); color:var(--blue);
    text-decoration:none; box-shadow:0 4px 12px rgba(10,25,60,.18);
  }

  .chip {
    font-size:11.5px; padding:5px 11px; border-radius:20px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
    color:#fff;
  }

  /* ===== 主體 ===== */
  .wrap { padding:16px 14px 0; }

  .part {
    background:#fff; border-radius:18px; padding:20px 18px;
    margin-bottom:14px;
    box-shadow:0 1px 3px rgba(30,63,143,.06);
    border:1px solid rgba(30,63,143,.05);
    scroll-margin-top:74px;
  }

  .part-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }

  .badge {
    font-size:11px; font-weight:700; color:var(--blue);
    background:var(--blue-soft); padding:4px 9px; border-radius:6px;
    white-space:nowrap;
  }

  .part h2 { font-size:17px; font-weight:800; color:var(--blue); line-height:1.45; }

  h3 {
    font-size:15.5px; font-weight:700; color:var(--blue);
    margin:18px 0 8px; padding-left:10px; position:relative;
  }

  h3::before {
    content:""; position:absolute; left:0; top:5px;
    width:3px; height:15px; border-radius:2px;
    background:linear-gradient(180deg,var(--blue),var(--gold));
  }

  h4 { font-size:14.5px; font-weight:700; color:var(--blue-2); margin:14px 0 6px; }

  p { margin:8px 0; color:#333; font-size:14.2px; }

  strong { color:var(--blue); font-weight:700; }

  a { color:var(--blue-2); }

  ul, ol { margin:8px 0 12px 4px; padding-left:18px; }

  li { margin:5px 0; font-size:14.2px; color:#333; }

  li::marker { color:var(--blue); }

  code {
    background:var(--blue-soft); color:var(--blue);
    padding:1px 5px; border-radius:5px; font-size:13px;
  }

  /* 版本資訊卡 */
  .meta-card {
    background:linear-gradient(135deg,#FFFDF3,#FFF8E1);
    border:1px solid rgba(212,175,55,.35);
    border-radius:14px; padding:14px 16px;
    font-size:12.5px; color:#6B5B1F; line-height:1.9;
    margin-bottom:14px;
  }

  .meta-card strong { color:#8A6D1A; }

  /* 表格 */
  .tbl-wrap { overflow-x:auto; margin:12px 0; border-radius:12px; border:1px solid var(--line); }

  table { border-collapse:collapse; width:100%; min-width:420px; font-size:12.8px; }

  thead { background:var(--blue-soft); }

  th {
    text-align:left; padding:10px 12px; color:var(--blue);
    font-weight:700; white-space:nowrap;
  }

  td { padding:10px 12px; border-top:1px solid var(--line); color:#333; line-height:1.7; }

  tbody tr:nth-child(even) { background:#FBFCFE; }

  /* ===== 目錄抽屜 ===== */
  .drawer-mask {
    position:fixed; inset:0; background:rgba(15,25,50,.42);
    z-index:80; opacity:0; visibility:hidden; transition:.25s;
  }

  .drawer-mask.show { opacity:1; visibility:visible; }

  .drawer {
    position:fixed; left:0; top:0; bottom:0; width:78%; max-width:320px;
    background:#fff; z-index:81; transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column;
    box-shadow:8px 0 32px rgba(30,63,143,.18);
  }

  .drawer.show { transform:translateX(0); }

  .drawer-head {
    padding:18px 18px 14px; border-bottom:1px solid var(--line);
    font-size:15px; font-weight:700; color:var(--blue);
    display:flex; justify-content:space-between; align-items:center;
  }

  .drawer-close { font-size:18px; color:var(--ink-3); cursor:pointer; padding:4px 8px; }

  .drawer-body { flex:1; overflow-y:auto; padding:10px 10px 24px; }

  .toc-item {
    display:flex; align-items:center; gap:10px;
    padding:11px 12px; border-radius:11px;
    text-decoration:none; color:var(--ink); font-size:13.6px;
    transition:background .15s;
  }

  .toc-item:active, .toc-item.active { background:var(--blue-soft); }

  .toc-badge {
    font-size:10.5px; color:var(--blue); background:var(--blue-soft);
    padding:2px 7px; border-radius:5px; white-space:nowrap; font-weight:700;
  }

  .toc-item.active .toc-badge { background:var(--blue); color:#fff; }

  .toc-label { flex:1; line-height:1.4; }

  /* ===== 底部同意欄 ===== */
  .footer-bar {
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:12px;
  }

  .agree-mini { flex:1; font-size:12px; color:var(--ink-2); line-height:1.5; display:flex; gap:8px; align-items:flex-start; }

  .agree-mini input { margin-top:3px; accent-color:var(--blue); width:16px; height:16px; flex-shrink:0; }

  .btn-agree {
    border:none; border-radius:24px; padding:12px 22px;
    background:linear-gradient(135deg,var(--blue),var(--blue-2));
    color:#fff; font-size:14.5px; font-weight:700; letter-spacing:1px;
    box-shadow:0 6px 16px rgba(30,63,143,.32);
    cursor:pointer; white-space:nowrap; transition:transform .15s;
  }

  .btn-agree:active { transform:scale(.97); }
  .btn-agree:disabled { background:#C9D3EA; box-shadow:none; }

  /* 回到頂部 */
  .to-top {
    position:fixed; right:16px; bottom:96px; z-index:65;
    width:42px; height:42px; border-radius:50%;
    background:#fff; border:1px solid var(--line);
    box-shadow:0 6px 18px rgba(30,63,143,.16);
    display:flex; align-items:center; justify-content:center;
    color:var(--blue); font-size:17px; cursor:pointer;
    opacity:0; visibility:hidden; transition:.25s;
  }

  .to-top.show { opacity:1; visibility:visible; }

  /* toast */
  .toast {
    position:fixed; left:50%; bottom:110px; transform:translateX(-50%) translateY(10px);
    background:rgba(27,27,27,.9); color:#fff; font-size:13px;
    padding:10px 18px; border-radius:20px; z-index:90;
    opacity:0; visibility:hidden; transition:.25s; white-space:nowrap;
  }

  .toast.show { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

  /* 桌面預覽：置中手機寬度 */
  @media (min-width:520px) {
    body { max-width:520px; margin:0 auto; box-shadow:0 0 60px rgba(30,63,143,.12); }
    /* sticky 導航不可用 left/transform 置中，否則會被推出畫面 */
    .navbar { max-width:520px; margin:0 auto; }
    /* fixed 元素用 left/right + margin auto 置中 */
    .footer-bar, .progress { max-width:520px; left:0; right:0; margin:0 auto; transform:none; }
    .progress { top:59px; }
    .to-top { right:calc(50% - 260px + 16px); }
  }