/* 案例详情页：和首页同一套顶栏和配色（base.css 管顶栏和变量）。
   浅色取首页（原 A 版）的颜色；从深色版点进来时 <html class="dark">，取深色版（原 C 版）的颜色。 */
:root{
  --bg:#fff; --fg:#09090b; --text:#3f3f46; --muted:#71717a; --line:#e4e4e7; --soft:#f5f5f4; --panel:#fff;
  --accent:#ff4f00; --on-accent:#fff;
}
:root.dark{
  color-scheme:dark;
  --bg:#09090b; --fg:#fafafa; --text:#a1a1aa; --muted:#71717a; --line:#27272a; --soft:#18181b; --panel:#0c0c0e;
  --accent:#fafafa; --on-accent:#0a0a0a;
}
body{background:var(--bg)}

.case{max-width:820px;padding-top:48px;padding-bottom:110px}
.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:36px;font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s}
.back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.back:hover{color:var(--fg)}
.back:hover svg{transform:translateX(-3px)}
.case h1{font-size:clamp(32px,4.6vw,52px);line-height:1.15;letter-spacing:-.03em;font-weight:600;color:var(--fg)}
.case .meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:32px 0 64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case .meta>div{padding:14px 16px 14px 0}
.case .meta>div+div{padding-left:18px;border-left:1px solid var(--line)}
.case .meta dt{font:12px/1.5 var(--font-m);color:var(--muted);letter-spacing:.02em}
.case .meta dd{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.case section{counter-increment:sec;margin-bottom:64px}
.case h2{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line);font-size:28px;letter-spacing:-.02em;font-weight:600}
.case h2::before{content:counter(sec,decimal-leading-zero);font:400 12px var(--font-m);color:var(--muted);letter-spacing:0}
.case h3{margin:28px 0 10px;font-size:17px;font-weight:600;color:var(--fg)}
.case p{margin:0 0 14px;color:var(--text)}
.case ul,.case ol{margin:0 0 16px;padding-left:1.2em;color:var(--text)}
.case li{margin:5px 0}
.case li::marker{color:var(--muted)}
.case b,.case strong{color:var(--fg);font-weight:600}
.tbl{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch}
.tbl table{border-collapse:collapse;width:100%;min-width:480px;font-size:14.5px}
.tbl th{padding:10px 12px 10px 0;border-bottom:1px solid var(--fg);text-align:left;font-weight:500;color:var(--muted);font-size:13px}
.tbl td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text)}
.result{list-style:none;padding:0!important;margin:0 0 16px;border-top:1px solid var(--line)}
.result li{margin:0;padding:14px 0;border-bottom:1px solid var(--line);color:var(--fg);line-height:1.65}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:80px;padding-top:24px;border-top:1px solid var(--line)}
.pager a{display:flex;flex-direction:column;gap:4px;color:var(--fg);text-decoration:none;font-size:15px;line-height:1.5;font-weight:500;transition:color .2s}
.pager a span{font:12px var(--font-m);color:var(--muted);font-weight:400}
.pager a:last-child{text-align:right}
.pager a:hover{color:var(--muted)}
@media (max-width:640px){
  .case{padding-top:28px}
  .case .meta{grid-template-columns:1fr;margin:24px 0 44px}
  .case .meta>div,.case .meta>div+div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-left:0}
  .case .meta>div+div{border-top:1px solid var(--line)}
  .case .meta dd{margin:0}
  .case h2{font-size:24px}
  .pager{grid-template-columns:1fr;margin-top:56px}
  .pager a:last-child{text-align:left}
}