/* ===== CSS Variables & Reset ===== */
:root { --primary: #6366f1; --bg: #f8fafc; --card-bg: #fff; --text: #1e293b; --text2: #475569; --border: #e2e8f0; --accent: #818cf8; --success: #22c55e; --warn: #f59e0b; --danger: #ef4444; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; }

/* ===== Layout ===== */
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* ===== Typography ===== */
h1 { text-align: center; font-size: 2em; color: var(--primary); margin: 30px 0 10px; }
h2 { color: var(--primary); margin: 35px 0 15px; padding-bottom: 8px; border-bottom: 2px solid var(--accent); font-size: 1.4em; }
h3 { color: var(--text); margin: 20px 0 10px; font-size: 1.15em; }
.subtitle { text-align: center; color: var(--text2); margin-bottom: 40px; font-size: 1.1em; }

/* ===== Components ===== */
.card { background: var(--card-bg); border-radius: 12px; padding: 24px; margin: 16px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid var(--border); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 16px; margin: 16px 0; }
.highlight-card { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-left: 4px solid var(--primary); padding: 16px 20px; border-radius: 8px; margin: 10px 0; }
.highlight { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-left: 4px solid var(--primary); padding: 14px 18px; border-radius: 8px; margin: 10px 0; }
.badge { display: inline-block; background: var(--primary); color: #fff; padding: 2px 10px; border-radius: 12px; font-size: 0.8em; margin: 2px; }
.badge.green { background: var(--success); }
.badge.orange { background: var(--warn); }
.badge.red { background: var(--danger); }

/* ===== Table ===== */
table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: #f1f5f9; color: var(--text); font-weight: 600; }
td { color: var(--text2); }

/* ===== Code ===== */
code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 0.9em; color: #7c3aed; }
pre { background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0; font-size: 0.9em; line-height: 1.5; }

/* ===== Flow Chart ===== */
.flow-chart { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin: 16px 0; text-align: center; }
.flow-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.flow-box { padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 0.9em; min-width: 120px; text-align: center; }
.flow-box.primary { background: #6366f1; color: #fff; }
.flow-box.secondary { background: #e0e7ff; color: #4338ca; }
.flow-box.success { background: #dcfce7; color: #166534; }
.flow-box.warn { background: #fef3c7; color: #92400e; }
.flow-box.danger { background: #fee2e2; color: #991b1b; }
.flow-arrow { font-size: 1.3em; color: var(--text2); }

/* ===== TOC ===== */
.toc { background: linear-gradient(135deg, #eef2ff, #f5f3ff); border-radius: 12px; padding: 24px; margin: 20px 0; }
.toc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
.toc-item { display: block; background: #fff; padding: 12px 16px; border-radius: 8px; text-decoration: none; color: var(--text); border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; }
.toc-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(99,102,241,0.15); }
.toc-item .num { color: var(--primary); font-weight: 700; margin-right: 6px; }

/* ===== Shared Page Components ===== */
.diagram { background: #fff; border: 2px solid var(--border); border-radius: 12px; padding: 24px; margin: 20px 0; overflow-x: auto; }
.diagram pre { background: none; color: var(--text); border: none; padding: 0; font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.82em; line-height: 1.55; }
.code-box { background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 12px 0; font-size: 0.85em; line-height: 1.5; font-family: 'Cascadia Code', monospace; }
.qa-box { background: #fefce8; border-left: 4px solid var(--warn); padding: 14px 18px; border-radius: 8px; margin: 10px 0; }
.qa-box strong { color: #92400e; }
.danger-box { background: #fef2f2; border-left: 4px solid var(--danger); padding: 14px 18px; border-radius: 8px; margin: 10px 0; }
.step-box { display: flex; gap: 16px; margin: 12px 0; align-items: flex-start; }
.step-num { min-width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1em; }
.step-content { flex: 1; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.8em; margin: 2px; color: #fff; }
.tag.blue { background: #3b82f6; }
.tag.green { background: #22c55e; }
.tag.orange { background: #f59e0b; }
.tag.red { background: #ef4444; }
.tag.purple { background: #8b5cf6; }

/* ===== Timeline (page 14) ===== */
.timeline { position: relative; padding-left: 40px; margin: 20px 0; }
.timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 2px; }
.tl-item { position: relative; margin-bottom: 24px; }
.tl-item::before { content: ''; position: absolute; left: -32px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 3px solid #e0e7ff; }
.tl-item .year { font-weight: 700; color: var(--primary); font-size: 1.1em; }
.tl-item .event { color: var(--text); margin-top: 4px; }
.tl-item .detail { color: var(--text2); font-size: 0.95em; margin-top: 4px; }

/* ===== Navigation System ===== */
.topbar{position:sticky;top:0;z-index:100;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;display:flex;align-items:center;height:52px;padding:0 16px;box-shadow:0 2px 12px rgba(99,102,241,.25)}
.topbar-btn{background:none;border:none;color:#fff;font-size:1.3em;cursor:pointer;padding:6px 10px;border-radius:8px;transition:background .2s;line-height:1}
.topbar-btn:hover{background:rgba(255,255,255,.15)}
.topbar-title{flex:1;font-size:.92em;font-weight:600;margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.topbar-home{color:#c7d2fe;text-decoration:none;font-size:1.15em;padding:6px 10px;border-radius:8px;transition:all .2s;line-height:1}
.topbar-home:hover{background:rgba(255,255,255,.15);color:#fff}
.sidebar-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sidebar-overlay.open{opacity:1;pointer-events:auto}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:320px;background:#fff;z-index:201;transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;overscroll-behavior:contain;box-shadow:4px 0 24px rgba(0,0,0,.12)}
.sidebar.open{transform:translateX(0)}
.sidebar-head{padding:18px 20px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.95em}
.sidebar-close{background:none;border:none;color:rgba(255,255,255,.8);font-size:1.15em;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .2s;line-height:1}
.sidebar-close:hover{background:rgba(255,255,255,.2);color:#fff}
.sidebar-body{padding:6px 0 24px}
.nav-group{padding:18px 20px 6px;font-size:.7em;font-weight:700;letter-spacing:.1em;color:#94a3b8;text-transform:uppercase;border-top:1px solid #f1f5f9}
.nav-item{display:flex;align-items:center;padding:9px 20px;text-decoration:none;color:#475569;font-size:.87em;transition:all .15s ease;border-left:3px solid transparent;gap:12px}
.nav-item:hover{background:#f8fafc;border-left-color:#818cf8;color:#1e293b}
.nav-item.active{background:#eef2ff;border-left-color:#6366f1;color:#4338ca;font-weight:600}
.nav-num{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;background:#f1f5f9;border-radius:6px;font-size:.76em;font-weight:700;color:#64748b;flex-shrink:0;padding:0 6px;font-family:'Cascadia Code','Consolas',monospace}
.nav-item.active .nav-num{background:#6366f1;color:#fff}
.page-nav{margin:40px 0 10px;padding:20px 0;border-top:2px solid #e2e8f0}
.page-nav-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.page-nav-btn{text-decoration:none;color:#6366f1;font-size:.85em;padding:10px 16px;border-radius:8px;border:1px solid #e2e8f0;transition:all .2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.page-nav-btn:hover:not(.disabled){background:#eef2ff;border-color:#6366f1;box-shadow:0 2px 8px rgba(99,102,241,.12)}
.page-nav-btn.disabled{color:#94a3b8;border-color:#f1f5f9;cursor:default}
.page-nav-prog{color:#94a3b8;font-size:.82em;font-weight:600;padding:0 8px}
@media(max-width:640px){.page-nav-row{flex-direction:column;align-items:stretch}.page-nav-btn{justify-content:center}}

/* ===== Mobile Responsive ===== */
@media(max-width:640px){
  /* prevent page-level horizontal scroll */
  html,body{overflow-x:hidden;max-width:100vw}
  body{font-size:15px;-webkit-text-size-adjust:100%}
  .container{padding:14px;overflow-x:hidden}
  h1{font-size:1.5em;margin:20px 0 8px}
  h2{font-size:1.2em;margin:24px 0 12px}
  h3{font-size:1.05em}
  .subtitle{font-size:1em;margin-bottom:24px}
  /* word breaking */
  p,li{overflow-wrap:break-word;word-break:break-word}
  code{font-size:.85em;overflow-wrap:anywhere;word-break:break-all}
  /* cards — allow internal scroll for tables */
  .card{padding:16px;border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card-grid{grid-template-columns:1fr;gap:12px}
  .highlight-card{padding:12px 14px;font-size:.92em}
  .highlight{padding:12px 14px;font-size:.92em}
  /* tables — scrollable within their parent */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:.88em;max-width:100%}
  th,td{padding:8px 10px}
  /* code blocks */
  pre,.code-box{font-size:.8em;padding:12px;border-radius:8px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* flow charts */
  .flow-chart{padding:16px;border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .flow-row{gap:4px}
  .flow-box{padding:8px 12px;font-size:.82em;min-width:auto}
  .flow-arrow{font-size:1em}
  /* diagrams */
  .diagram{padding:12px;border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .diagram pre{font-size:.72em;line-height:1.5;max-width:100%;overflow-x:auto}
  /* toc */
  .toc{padding:16px;border-radius:10px}
  .toc-grid{grid-template-columns:1fr;gap:8px}
  .toc-item{padding:10px 14px;font-size:.92em}
  /* qa-box / danger-box */
  .qa-box,.danger-box{padding:12px 14px;font-size:.9em}
  /* step-box — prevent child overflow */
  .step-box{gap:10px;overflow-x:auto;max-width:100%}
  .step-content{min-width:0;overflow-wrap:break-word}
  .step-num{min-width:34px;height:34px;font-size:1em}
  /* badges */
  .badge,.tag{font-size:.75em;padding:2px 8px}
  /* topbar */
  .topbar{height:48px;padding:0 10px}
  .topbar-title{font-size:.82em}
  /* sidebar */
  .sidebar{width:85vw;max-width:320px}
  .nav-item{padding:8px 16px;font-size:.84em}
  /* page-nav */
  .page-nav{margin:28px 0 8px;padding:14px 0}
  .page-nav-btn{font-size:.82em;padding:8px 12px}
}