:root{--bg:#ffffff;--text:#262626;--muted:#6b6b6b;--accent:#b78f00;--line:#333;--divider:#e6e6e6;--max-width:1280px;--min-width-desktop:1120px;--sig:#b78f00}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.wrap{margin:0 auto;padding:18px 20px;max-width:var(--max-width)}
.header-divider{border:0;border-top:1px solid var(--divider);margin:0}
/* Header / toolbar */
.site-header .toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tool{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.tool .home{color:var(--text);text-decoration:none;font-weight:600}
.tool .trail{color:var(--muted)}
.topline{display:flex;gap:18px;font-size:13px;color:var(--muted)}
.topline span{padding:6px 8px}
/* Layout */
.layout{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.side{order:0}
.article{order:1}
.side-inner{border-left:1px solid var(--divider);padding-left:18px}
.site-mark{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.vertical-sign{width:1px;background:var(--sig);height:36px}
.site-title{font-weight:700;color:var(--text)}
.meta{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.article-head{margin-bottom:12px}
.title-row{display:flex;flex-direction:column;gap:10px}
.title{font-size:26px;line-height:1.18;margin:0;font-weight:700}
.summary{margin:0;color:var(--muted);font-size:15px}
.kws{font-size:13px;color:var(--muted);margin-top:8px}
.content-area{margin-top:12px}
.content{color:var(--text);line-height:1.75;font-size:15px}
.content p{margin:0 0 12px 0}
.ad{border:1px solid var(--divider);padding:10px;color:var(--muted);font-size:14px;background:transparent}
.ad-zone{margin:12px 0}
.faq{margin-top:18px}
.faq h2{font-size:16px;margin:0 0 10px 0}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{display:block;border-top:1px solid var(--divider);padding:10px 0}
.related-posts{margin-top:20px}
.related-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.related-list li{padding:8px 0;border-top:1px solid var(--divider);display:flex;justify-content:space-between;align-items:center;font-size:14px}
.related-list a{color:var(--text);text-decoration:none}
.footer-inner{padding:18px 0;border-top:1px solid var(--divider);color:var(--muted);font-size:13px}
/* Visual signature: 1px vertical line that runs through side and article area on desktop */
.vertical-sign, .site-mark{position:relative}
/* Desktop rules - distinct layout per contract */
@media (min-width:1024px){
  .wrap{min-width:var(--min-width-desktop);max-width:var(--max-width);padding:28px}
  .layout{grid-template-columns:320px 1fr;gap:32px;align-items:start}
  /* Left column (4 cols) side: site name, breadcrumb, meta, related */
  .side{padding-right:12px}
  .side-inner{border-left:0;padding-left:0}
  /* Emphasize vertical theme line between columns */
  .layout{position:relative}
  .layout::before{content:'';position:absolute;left:320px;top:24px;bottom:24px;width:1px;background:var(--sig)}
  /* Article on right 8 columns: larger type and horizontal title/summary split */
  .article{padding-left:28px}
  .title-row{flex-direction:row;align-items:flex-start;gap:20px}
  .title{font-size:32px}
  .summary{flex:1;color:var(--muted);font-size:15px;margin-top:6px}
  .kws{margin-top:6px}
  /* FAQ pattern: two-column table-like */
  .faq-list{display:grid;grid-template-columns:220px 1fr;gap:12px}
  .faq-list .faq-item{border-top:none;padding:6px 12px}
  .faq-list .faq-item .q{font-weight:600;color:var(--text)}
  .faq-list .faq-item .a{color:var(--muted)}
  /* Related pattern: list with date on right and separators */
  .related-list li{padding:12px 0;border-top:1px solid var(--divider)}
  .related-list li time{color:var(--muted);font-size:13px;margin-left:12px}
}
/* Mobile rules - distinct reflow per contract */
@media (max-width:767px){
  .wrap{padding:14px}
  .layout{grid-template-columns:1fr}
  .side{order:0}
  .article{order:1}
  /* Left-side info拆为标题前后的紧凑区块 */
  /* Render compact site/tool info above title */
  .tool{font-size:13px}
  .site-mark{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .vertical-sign{height:20px}
  .title-row{flex-direction:column}
  .title{font-size:20px}
  .summary{font-size:14px}
  .meta{flex-direction:row;gap:12px;font-size:12px}
  /* place side-related after article as compact list */
  .side-related{order:2}
  .side-inner{border-left:0;padding-left:0}
  .faq-list{display:flex;flex-direction:column}
  .faq-list .faq-item{display:block;padding:10px 0;border-top:1px solid var(--divider)}
  .related-list{gap:8px}
  /* Ensure no horizontal scroll at narrow widths */
  body,html{overflow-x:hidden}
}
/* Density and surface rules */
h1,h2,h3,h4{margin:0}
button,a{border-radius:0}
/* Avoid shadows or large radii per surface contract */
/* Small utility */
.kws span{background:transparent}