:root{
  --bg:#f9fbff;
  --card:#ffffff;
  --text:#1A237E;
  --muted:#425a84;
  --blue-900:#13347B;
  --blue-700:#2685BE;
  --blue-100:#e3f2fd;
  --blue-800:#0D47A1;
  --chip:#13347B;
  --chipText:#fff;
  --border:#e1e8f4;
  --codeBg:#ffffff;
  --codeBorder:#cfe3ff;
  --codeText:#0D47A1;
  --warn:#C88719;
  --ok:#1b7f3a;
  --danger:#b71c1c;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100vw;overflow-x:hidden;}
body{
  font-family:"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding:0 0 72px 0;
  max-width:100vw;
}

header{
  background:linear-gradient(90deg,var(--blue-900) 80%,var(--blue-700) 100%);
  color:#fff;
  text-align:center;
  padding:28px 4vw 18px 4vw;
  border-radius:0 0 18px 18px;
  margin-bottom:15px;
  box-shadow:0 1px 10px #0002;
}
.header-icon{
  font-size:2.15rem;
  margin-bottom:2px;
  margin-right:8px;
  display:inline-block;
}
h1{
  margin:0 0 7px 0;
  font-size:2.05rem;
  font-weight:800;
  line-height:1.15;
  word-break:break-word;
}
.header-sub{
  color:#BFE8FF;
  margin:5px auto 0 auto;
  max-width:980px;
  font-size:1.06rem;
  line-height:1.35;
  word-break:break-word;
}

.main{
  max-width:980px;
  margin:0 auto;
  background:var(--card);
  border-radius:12px;
  padding:24px 2vw 24px 2vw;
  box-shadow:0 1px 12px #0001;
  width:98vw;
}

section{
  background:var(--blue-100);
  padding:20px 2vw 16px 2vw;
  border-radius:10px;
  margin-bottom:22px;
  box-shadow:0 1px 3px #0001;
  overflow-x:auto;
  max-width:100%;
}

h2{
  color:var(--blue-800);
  margin:0 0 10px 0;
  font-size:1.18rem;
  letter-spacing:.2px;
}
h3{
  color:var(--blue-800);
  margin:14px 0 8px 0;
  font-size:1.05rem;
}

p{margin:10px 0 12px 0;color:var(--muted);line-height:1.55;}
ul,ol{margin:10px 0 12px 0;padding-left:18px;}
li{margin:6px 0;line-height:1.55;color:#24385f;}

a{color:var(--blue-700);text-decoration:none;}
a:hover{text-decoration:underline;}

.badge{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  background:var(--chip);
  color:var(--chipText);
  font-size:.85em;
  margin:0 8px 8px 0;
}
.badge.warn{background:var(--warn);}
.badge.ok{background:var(--ok);}
.badge.danger{background:var(--danger);}

code{
  background:#cfd8dc;
  color:#0D47A1;
  padding:2px 6px;
  border-radius:4px;
  font-size:.98em;
  word-break:break-word;
}
pre{
  background:var(--codeBg);
  border:1px solid var(--codeBorder);
  padding:10px 12px;
  border-radius:8px;
  overflow-x:auto;
  font-size:.95em;
  color:var(--codeText);
  margin:10px 0 14px 0;
}

.toc{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.toc a{
  display:inline-block;
  background:#fff;
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:10px;
  font-weight:600;
  color:#1A237E;
  box-shadow:0 1px 6px #0001;
}
.toc a:hover{background:#f6fbff;text-decoration:none;}

.note{
  background:#ffffffcc;
  border:1px solid var(--border);
  border-left:5px solid var(--blue-700);
  padding:12px 12px;
  border-radius:10px;
  color:#27436e;
  margin:10px 0 0 0;
}

@media (max-width:700px){
  header{padding:15px 3vw 12px 3vw;border-radius:0 0 11px 11px;}
  h1{font-size:1.16rem;}
  .header-sub{font-size:.98rem;}
  .main{padding:10px 3vw 18vw 3vw;width:100vw;border-radius:0;}
  section{padding:12px 3vw 10px 3vw;}
}