/* ===========================================================
   Spring AI Agent 漫画实战教程 · 统一漫画风格样式
   =========================================================== */

:root{
  --ink:#141414;          /* 墨线 */
  --paper:#FFFCF3;        /* 纸张 */
  --panel:#FFFFFF;
  --accent:#E8452F;       /* 漫画红 */
  --blue:#2F6FB5;
  --yellow:#FFD23F;
  --green:#3FA34D;
  --purple:#7A4FB5;
  --grey:#8A8578;
  --code-bg:#F7F4EA;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"LXGW WenKai Screen","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.78;
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(circle at 1px 1px, rgba(20,20,20,.065) 1px, transparent 0);
  background-size:6px 6px;
}

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

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--ink);color:#fff;
  border-bottom:4px solid var(--accent);
  padding:8px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.topbar .brand{font-weight:900;letter-spacing:1px;font-size:15px;color:#fff}
.topbar .brand em{color:var(--yellow);font-style:normal}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap}
.topbar nav a{
  color:#fff;font-size:13px;padding:2px 8px;border:2px solid transparent;border-radius:2px;
}
.topbar nav a:hover{background:rgba(255,255,255,.14);text-decoration:none}
.topbar nav a.cur{background:var(--accent);border-color:#fff;font-weight:700}

/* ---------- 版心 ---------- */
.wrap{max-width:1000px;margin:0 auto;padding:0 16px 60px}

/* ---------- 封面 / 章节头 ---------- */
.hero{
  position:relative;overflow:hidden;
  border:4px solid var(--ink);background:var(--panel);
  box-shadow:7px 7px 0 var(--ink);
  padding:24px 26px;margin:20px 0 26px;
}
.hero::before{
  content:"";position:absolute;inset:-45%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(20,20,20,.08) 0deg 2.5deg, transparent 2.5deg 7deg);
  pointer-events:none;
}
.hero > *{position:relative}
.hero .no{
  display:inline-block;background:var(--ink);color:#fff;
  font-weight:900;letter-spacing:3px;padding:4px 12px;font-size:13px;
}
.hero h1{
  margin:12px 0 8px;font-size:30px;line-height:1.35;font-weight:900;
  text-shadow:2px 2px 0 rgba(20,20,20,.12);
}
.hero h1 small{display:block;font-size:15px;font-weight:600;color:var(--grey);margin-top:8px;letter-spacing:0}
.hero .lead{margin:0;font-size:15px;color:#333}
.stamp{
  position:absolute;right:-8px;top:14px;
  transform:rotate(8deg);
  border:3px double var(--accent);color:var(--accent);
  font-weight:900;font-size:13px;letter-spacing:2px;
  padding:6px 10px;background:rgba(255,255,255,.85);
}

/* ---------- 章节小标题 ---------- */
h2.sec{
  margin:34px 0 14px;font-size:21px;font-weight:900;
  border-left:8px solid var(--accent);
  padding:2px 0 2px 12px;line-height:1.4;
}
h3{
  margin:22px 0 10px;font-size:17.5px;font-weight:800;
  background:linear-gradient(transparent 68%, var(--yellow) 68%);
  display:inline-block;
}
p{margin:10px 0}
ul,ol{margin:10px 0;padding-left:22px}
li{margin:5px 0}
code.inl{
  background:#EFEAD9;border:1.5px solid var(--ink);border-radius:3px;
  padding:0 5px;font-size:13.5px;font-family:"JetBrains Mono",Consolas,"Courier New",monospace;
}
b.hl{background:linear-gradient(transparent 62%, var(--yellow) 62%)}

/* ---------- 漫画分格面板 ---------- */
.strip{display:grid;gap:14px;margin:14px 0}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g21{grid-template-columns:1.35fr .65fr}
.g12{grid-template-columns:.65fr 1.35fr}

.panel{
  border:3px solid var(--ink);background:var(--panel);
  box-shadow:5px 5px 0 var(--ink);
  padding:14px 16px;position:relative;
}
.panel.ra{transform:rotate(-.5deg)}
.panel.rb{transform:rotate(.45deg)}
.panel .pt{
  position:absolute;left:-3px;top:-16px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:800;
  padding:2px 10px;letter-spacing:1px;
}
.panel.dark{background:#1E1E1E;color:#F2F2F2;box-shadow:5px 5px 0 var(--accent)}
.panel.dark .pt{background:var(--accent)}
.panel.kf{background:#FFF8DC}

/* ---------- 对白 ---------- */
.dialog{display:flex;gap:12px;align-items:flex-start;margin:14px 0}
.dialog.right{flex-direction:row-reverse}
.ava{
  flex:0 0 auto;width:62px;height:62px;
  border:3px solid var(--ink);border-radius:50%;background:#fff;
  box-shadow:2px 2px 0 var(--ink);
}
.who{font-size:12px;font-weight:800;color:var(--grey);margin-bottom:2px}
.dialog.right .who{text-align:right}
.bub{
  position:relative;border:3px solid var(--ink);border-radius:14px;
  background:#fff;padding:10px 14px;font-size:15px;
  box-shadow:3px 3px 0 rgba(20,20,20,.85);
}
.dialog.right .bub{background:#FFFDF0}
.bub::before{
  content:"";position:absolute;top:18px;left:-13px;
  width:0;height:0;border:7px solid transparent;border-right-color:var(--ink);
}
.bub::after{
  content:"";position:absolute;top:18px;left:-8px;
  width:0;height:0;border:6px solid transparent;border-right-color:#fff;
}
.dialog.right .bub::before{left:auto;right:-13px;border-right-color:transparent;border-left-color:var(--ink)}
.dialog.right .bub::after{left:auto;right:-8px;border-right-color:transparent;border-left-color:#FFFDF0}
.bub.shout{font-weight:900;font-size:17px;background:#FFEFEF}
.bub.think{background:#F1F1F1;border-style:dashed;font-size:14px}

/* 旁白框 */
.narration{
  border:2px solid var(--ink);background:#F4F1E6;
  padding:10px 14px;margin:14px 0;font-size:14.5px;
  box-shadow:4px 4px 0 rgba(20,20,20,.8);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 14px) 100%,0 100%);
}
.narration b{color:var(--accent)}

/* 拟声词 */
.sfx{
  display:inline-block;font-weight:900;font-size:24px;
  font-family:"Arial Black",Impact,sans-serif;
  color:var(--accent);transform:rotate(-7deg);
  text-shadow:2px 2px 0 var(--ink),-1.5px -1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink);
  letter-spacing:1px;
}
.sfx.b{color:var(--blue)}
.sfx.y{color:#F2B705;text-shadow:2px 2px 0 var(--ink),-1.5px -1.5px 0 var(--ink)}

/* ---------- 提示框 ---------- */
.note,.warn,.src,.tip,.pit{
  border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:10px 14px;margin:14px 0;font-size:14.5px;background:#fff;
}
.note{border-left:8px solid var(--blue);background:#EEF4FD}
.warn{border-left:8px solid var(--accent);background:#FDEDEC}
.tip{border-left:8px solid var(--green);background:#EDF8EE}
.src{border-left:8px solid var(--purple);background:#F5F0FA}
.pit{border-left:8px solid #E08A00;background:#FFF6E5}
.note .lbl,.warn .lbl,.src .lbl,.tip .lbl,.pit .lbl{
  display:inline-block;font-weight:900;font-size:13px;letter-spacing:1px;
  padding:1px 8px;margin-bottom:6px;color:#fff;border-radius:2px;
}
.note .lbl{background:var(--blue)} .warn .lbl{background:var(--accent)}
.tip .lbl{background:var(--green)} .src .lbl{background:var(--purple)}
.pit .lbl{background:#E08A00}
.box p{margin:6px 0}

/* ---------- 表格 ---------- */
table{
  width:100%;border-collapse:collapse;font-size:14px;background:#fff;
  border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);margin:14px 0;
}
th,td{border:2px solid var(--ink);padding:7px 10px;text-align:left;vertical-align:top}
th{background:var(--yellow);font-weight:900}
tbody tr:nth-child(even){background:#FBFAF3}

/* ---------- 代码 ---------- */
pre{
  margin:12px 0;padding:13px 15px;
  background:var(--code-bg);border:3px solid var(--ink);
  box-shadow:4px 4px 0 rgba(20,20,20,.85);
  overflow-x:auto;
  font-family:"JetBrains Mono",Consolas,"Courier New",monospace;
  font-size:13px;line-height:1.62;
}
pre code{white-space:pre;color:#232323}
pre code .t-c{color:#A39A85;font-style:italic}
pre code .t-s{color:#1F7A3F}
pre code .t-a{color:#A3419C;font-weight:600}
pre code .t-k{color:#1F4FA8;font-weight:600}
pre code .hl-line{
  display:block;width:100%;
  background:linear-gradient(transparent 62%, #FFE9A8 62%);
}
.cap{font-size:12.5px;color:var(--grey);margin:-8px 0 14px}

/* ---------- 流程 / 架构 ---------- */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:14px 0}
.flow .n{
  border:3px solid var(--ink);background:#fff;padding:8px 12px;font-size:13.5px;
  box-shadow:3px 3px 0 var(--ink);flex:1 1 150px;
}
.flow .n b{display:block;font-size:12px;color:var(--accent);letter-spacing:1px}
.flow .n.hot{background:var(--yellow)}
.flow .n.cool{background:#E9F3FF}
.flow .ar{display:flex;align-items:center;font-weight:900;font-size:18px;padding:0 2px}

.steps{counter-reset:s;margin:14px 0;padding:0;list-style:none}
.steps li{
  counter-increment:s;position:relative;padding-left:38px;margin:10px 0;
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:2px;
  width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:#fff;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}

/* SVG 图 */
.figure{border:3px solid var(--ink);background:#fff;box-shadow:5px 5px 0 var(--ink);padding:10px;margin:14px 0;overflow-x:auto}
.figure svg{max-width:100%;height:auto;display:block;margin:0 auto}

/* ---------- 导航 / 次回 ---------- */
.next{
  margin-top:40px;padding-top:16px;border-top:4px dashed var(--ink);
}
.next .flag{
  display:inline-block;background:var(--ink);color:#fff;
  font-weight:900;letter-spacing:3px;padding:4px 12px;font-size:13px;
}
.pager{display:flex;gap:12px;justify-content:space-between;margin-top:20px;flex-wrap:wrap}
.pager a{
  border:3px solid var(--ink);background:#fff;padding:8px 14px;font-size:14px;font-weight:700;
  box-shadow:4px 4px 0 var(--ink);
}
.pager a:hover{background:var(--yellow);text-decoration:none}
.pager a.home{background:var(--ink);color:#fff}
.pager a.home:hover{background:var(--accent)}

/* ---------- 首页卡片 ---------- */
.cards{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin:18px 0}
.card{
  border:3px solid var(--ink);background:#fff;box-shadow:5px 5px 0 var(--ink);
  padding:14px 16px;display:block;color:var(--ink);
}
.card:hover{background:#FFFBEA;transform:translate(-1px,-1px);text-decoration:none}
.card .no{font-size:12px;font-weight:900;color:var(--accent);letter-spacing:2px}
.card h3{margin:4px 0 6px;font-size:17px;background:none;display:block}
.card p{margin:0;font-size:13.5px;color:#444}
.card .tags{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.card .tags span{font-size:11.5px;border:1.5px solid var(--ink);padding:1px 6px;border-radius:10px;background:#F4F1E6}

.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:14px 0}
.role{border:3px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink);padding:12px 14px;display:flex;gap:12px;align-items:center}
.role .ava{width:56px;height:56px}
.role p{margin:0;font-size:13.5px;color:#444}
.role b{font-size:15px}

/* ---------- 响应式 ---------- */
@media (max-width:760px){
  .g2,.g3,.g21,.g12,.cards,.roles{grid-template-columns:1fr}
  .hero h1{font-size:23px}
  .topbar .brand{font-size:13px}
}