:root{
  --bg:#f6fbfb; /* 青灰底感 */
  --surface:#ffffff;
  --muted:#6b7780;
  --accent:#2a9fb8; /* 湖蓝 */
  --border: rgba(45,62,70,0.08);
  --radius:2px;
  --max-wrap:1280px;
  --gap:18px;
  --density-tight:1.25;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-stack);
  background:var(--bg);
  color:#142026;
  line-height:1.45;
  font-size:15px;
}
.wrap{
  margin:0 auto;
  padding:18px;
  max-width:var(--max-wrap);
}
.small-row{display:flex;align-items:center;justify-content:space-between}

/* Header */
.brand-row{background:transparent;border-bottom:1px solid var(--border)}
.brand{padding:8px 0}
.home-link{color:var(--accent);text-decoration:none;font-weight:700;font-size:18px}
.second-nav{border-top:1px solid transparent}
.second-nav .nav-inner{display:flex;gap:10px;align-items:center;padding:6px 0;font-size:13px;color:var(--muted)}
.nav-home{color:var(--muted);text-decoration:none}
.nav-note{color:var(--muted)}

/* Layout */
.layout{display:grid;grid-template-columns:1fr;gap:20px}
.content-area{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.side-area{display:block}
.ad{padding:10px;border:1px dashed rgba(42,159,184,0.12);background:transparent;border-radius:var(--radius);margin-bottom:12px;color:var(--muted);font-size:13px}
.ad-label{font-size:12px;color:var(--muted);margin-bottom:6px}

/* Title composition: large title + narrow meta column */
.title-row{display:flex;gap:18px;align-items:flex-start}
.title-col{flex:1 1 auto}
.title-row h1{margin:0 0 8px 0;font-size:26px;line-height:1.15;font-weight:700}
.summary{margin:0;color:var(--muted);font-size:14px}
.meta-col{width:220px;flex:0 0 220px;border-left:1px solid var(--border);padding-left:14px}
.meta-line{font-size:13px;color:var(--muted);margin-bottom:8px}
.current-time{font-weight:500;color:var(--muted)}

/* Article body */
.article-body{margin-top:14px;color:#142026;font-size:15px;line-height:var(--density-tight)}
.article-body > *{max-width:100%}

/* FAQ & Related sections with visual signature */
.section-title{display:flex;align-items:center;gap:10px;font-size:15px;margin:20px 0 10px 0;color:#0f2b33}
.section-title .sig-line{display:inline-block;width:10px;height:10px;background:var(--accent);border-radius:1px;box-shadow:none}
.section-title::after{content:'';flex:1;height:1px;background:var(--border);margin-left:8px}
.faq-body{font-size:14px;color:#163032}
.related-body{font-size:14px;color:#163032}

/* Side area cards */
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.side-title{margin:0 0 8px 0;font-size:13px;color:var(--muted)}
.kw-list{font-size:13px;color:var(--accent)}
.side-links a{color:var(--muted);text-decoration:none}
.home-plain{color:var(--muted);text-decoration:none}

.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0;color:var(--muted);font-size:13px}
.small-note{opacity:0.9}

/* Density: tighter lists and labels */
.meta-block{font-size:13px;line-height:1.3}
.side-entry{font-size:13px}

/* Related pattern: keyword index style */
.related-body{display:flex;flex-wrap:wrap;gap:8px}
.related-body a{display:inline-block;padding:6px 8px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;color:var(--accent);text-decoration:none;font-size:13px}

/* Visual constraints: no heavy shadows, no large radii */

/* Desktop rules (distinct structure) */
@media (min-width:1024px){
  .wrap{padding:24px}
  .layout{grid-template-columns: 3fr 1fr;gap:24px;align-items:start}
  /* Ensure container width sits within 1120-1440 when possible */
  .wrap{max-width:var(--max-wrap);width:clamp(1120px,80vw,1280px)}
  .title-row{align-items:flex-start}
  .title-row h1{font-size:32px}
  .meta-col{position:sticky;top:24px;align-self:start}
  .side-area{display:block}
  .second-nav{display:block}
}

/* Mobile rules (distinct layout, cancel second nav, stack meta) */
@media (max-width:767px){
  body{font-size:15px}
  .wrap{padding:12px}
  .layout{grid-template-columns:1fr;gap:12px}
  .meta-col{width:auto;border-left:none;padding-left:0;margin-top:10px;background:transparent}
  .title-row{flex-direction:column}
  .title-row h1{font-size:20px}
  .article-body{font-size:16px;line-height:1.6}
  .side-area{order:3}
  .second-nav{display:none}
  .ad{font-size:13px;padding:8px}
  .section-title{margin-top:16px}
  /* Ensure no horizontal scroll at 320px */
  html,body{overflow-x:hidden}
}

/* Accessibility and focus */
a:focus{outline:2px solid rgba(42,159,184,0.18);outline-offset:2px}