:root{
  --bg:#f5f7fa; --panel:#ffffff; --ink:#1f2733; --muted:#6b7785;
  --line:#e3e8ef; --brand:#1f5fd6; --brand2:#1747a8; --accent:#eef3ff;
  --tag:#e7efff; --radius:10px; --maxw:1140px;
}
/* skip-link */
.skip-link{position:absolute; left:-999px; top:6px; z-index:30; padding:8px 16px; background:var(--brand); color:#fff; border-radius:8px; font-weight:600; font-size:14px}
.skip-link:focus{left:10px}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7; font-size:15px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--brand); text-decoration:none; transition:color .12s}
a:hover{text-decoration:underline; color:var(--brand2)}
a:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:2px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px}
.muted{color:var(--muted)}

/* top bar */
.topbar{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.topbar .wrap{display:flex; align-items:center; gap:18px; height:58px}
.brand{font-weight:800; font-size:19px; color:var(--brand2); letter-spacing:.5px}
.nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.nav a{padding:7px 11px; border-radius:8px; color:var(--ink); font-weight:600; font-size:14px; transition:background .12s,color .12s}
.nav a:hover{background:var(--accent); text-decoration:none; color:var(--brand2)}
.nav a:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* hero */
.hero{background:linear-gradient(135deg,#1f5fd6,#1747a8); color:#fff; padding:46px 0 40px}
.hero h1{margin:0 0 8px; font-size:34px; text-wrap:balance}
.hero .sub{margin:0 0 22px; opacity:.92; font-size:16px}
.hero-search{display:flex; gap:10px; max-width:640px}
.hero-search input{flex:1; padding:13px 16px; border:0; border-radius:10px; font-size:15px; outline:none}
.hero-search input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.hero-search button{padding:0 22px; border:0; border-radius:10px; background:#ffd34d; color:#1f2733; font-weight:800; font-size:15px; cursor:pointer; transition:background .15s}
.hero-search button:hover{background:#ffc81f}
.hero-search button:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* layout */
.main{display:flex; gap:26px; align-items:flex-start; padding-top:26px; padding-bottom:26px}
.content{flex:1; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 30px}
.content.full{width:100%}
.side{width:280px; flex:none}
.breadcrumb{font-size:13px; color:var(--muted); margin:0 0 14px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--brand2)}

/* section cards */
.sec-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:14px}
.sec-card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.sec-card:hover{border-color:var(--brand); box-shadow:0 6px 18px rgba(31,95,214,.12); text-decoration:none; transform:translateY(-2px)}
.sec-card h3{margin:0 0 8px; color:var(--brand2); font-size:18px}
.sec-card p{margin:0; color:var(--muted); font-size:13.5px}

/* content typography */
.content h1{font-size:26px; margin:0 0 14px; color:var(--brand2); text-wrap:balance}
.content h2{font-size:19px; margin:24px 0 10px; color:var(--ink); border-left:4px solid var(--brand); padding-left:10px; text-wrap:balance}
.content h3{font-size:16px; margin:16px 0 8px; text-wrap:pretty}
.lead{color:var(--muted); font-size:15px}
.example{background:var(--accent); border:1px solid #d4e2ff; border-radius:10px; padding:14px 16px; margin:14px 0}
.ex-q{margin:0 0 6px; font-weight:700}
.ex-opt{margin:0 0 8px; color:#374151}
.ex-a{margin:0 0 4px; color:#0a7d33; font-weight:700}
.ex-x{margin:0; color:#374151}
.note{margin-top:26px; padding:12px 14px; background:#fff8e6; border:1px solid #ffe2a8; border-radius:10px; font-size:13px; color:#7a5b00}
.source-box{margin:16px 0; padding:12px 16px; background:#eef4fb; border-left:4px solid #1f5fd6; border-radius:8px; font-size:14px; line-height:1.6}
.source-box .src-label{display:inline-block; font-weight:800; color:#1747a8; margin-right:8px; font-size:13px; letter-spacing:.5px}
.law{background:#f6f8fa; border:1px solid #e1e4e8; border-radius:8px; padding:12px 16px; margin:12px 0; white-space:pre-wrap; word-break:break-word; font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:13px; line-height:1.7; color:#24292e}
.cat-line{margin:6px 0 4px; color:#444; font-size:14px}
.cat-line strong{color:#1a2b4a}
ul.points{margin:8px 0 4px; padding-left:22px}
ul.points li{margin:7px 0; line-height:1.7}
.original{margin-top:14px; padding:14px 16px; background:#f6f8fa; border:1px solid #e1e4e8; border-radius:8px}
.original h4{margin:0 0 8px; color:#1f5fd6; font-size:14px}
.original pre{white-space:pre-wrap; word-break:break-word; font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:13.5px; line-height:1.8; color:#24292e; margin:0}
.original-note{background:#eef7ee; border:1px solid #cdeccd; color:#2f6b2f; border-radius:8px}
.box{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:18px}
.box h3{margin:0 0 10px; font-size:15px; color:var(--brand2)}
ul.rel{list-style:none; margin:0; padding:0}
ul.rel li{padding:6px 0; border-bottom:1px dashed var(--line); font-size:14px}
ul.rel li:last-child{border-bottom:0}

/* cardlist (section / search results) */
.filterbar{margin:14px 0 18px}
.search{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-size:15px; outline:none; transition:border-color .15s}
.search:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,95,214,.15)}
.cardlist{list-style:none; margin:0; padding:0}
.cardlist li{padding:11px 4px; border-bottom:1px solid var(--line)}
.cardlist li a{display:block; font-size:15px; transition:color .12s}
.cardlist li a:hover{color:var(--brand2)}
.cardlist li .cat{display:inline-block; background:var(--tag); color:var(--brand2); font-size:12px; padding:1px 8px; border-radius:20px; margin-right:8px}
.pager{display:flex; align-items:center; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap}
.pager button{padding:8px 16px; border:1px solid var(--line); background:var(--panel); border-radius:8px; cursor:pointer; font-weight:600; transition:border-color .12s,background .12s}
.pager button:hover:not(:disabled){background:var(--accent); border-color:var(--brand)}
.pager button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.pager button:disabled{opacity:.45; cursor:not-allowed}
.pager .pginfo{color:var(--muted); font-size:14px}

/* segment filter (search) */
.seg{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 16px}
.seg button{padding:7px 14px; border:1px solid var(--line); background:var(--panel); border-radius:20px; cursor:pointer; font-size:13.5px; color:var(--ink); transition:all .12s}
.seg button:hover:not(.active){background:var(--accent); border-color:var(--brand)}
.seg button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.seg button.active{background:var(--brand); color:#fff; border-color:var(--brand)}

/* prev/next nav under article */
.pagenav{display:flex; justify-content:space-between; gap:12px; max-width:var(--maxw); margin:18px auto; padding:0 18px}
.pagenav .pn{padding:11px 16px; background:var(--panel); border:1px solid var(--line); border-radius:10px; font-weight:600; color:var(--brand); transition:border-color .12s,color .12s}
.pagenav .pn:hover{text-decoration:none; border-color:var(--brand); color:var(--brand2)}
.pagenav .pn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.pagenav .pn.disabled{opacity:.45; pointer-events:none}

/* footer */
.footer{background:var(--panel); border-top:1px solid var(--line); margin-top:30px; padding:22px 0}
.footer p{margin:4px 0; font-size:13px}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0s !important; animation-duration:0s !important}
}

@media (max-width:880px){
  .main{flex-direction:column}
  .side{width:100%}
  .content{padding:20px}
  .hero h1{font-size:26px}
}