/* ============================================================
   Guocai IP – Static site inner-page styles (secondary pages)
   Loaded AFTER styles.css. Uses the same oklch design tokens.
   ============================================================ */

/* ---------- Generic section heading (line + kicker + title) ---------- */
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sec-head .line { width: 32px; height: 1px; background: oklch(var(--primary-500)); flex-shrink: 0; }
.sec-head span { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: oklch(var(--primary-600)); }
.sec-title { font-family: var(--font-heading); font-size: 30px; line-height: 1.15; font-weight: 700; color: oklch(var(--foreground-950)); }
.sec-title--mb { margin-bottom: 48px; }
@media (min-width: 768px) { .sec-title { font-size: 36px; } }

/* ---------- Buttons ---------- */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 32px; border-radius: 999px; font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  transition: background-color .3s, color .3s, opacity .3s;
}
.btn-cta--navy { background: oklch(var(--accent-950)); color: #fff; }
.btn-cta--navy:hover { background: oklch(var(--accent-800)); }
.btn-cta--orange { background: oklch(var(--primary-500)); color: #fff; }
.btn-cta--orange:hover { background: oklch(var(--primary-600)); }
.btn-cta--ghost { background: transparent; color: rgb(255 255 255 / .6); }
.btn-cta--ghost:hover { color: #fff; }
.btn-cta--block { width: 100%; }

/* ---------- Call-to-action band (dark) ---------- */
.cta-band { padding: 64px 0; background: oklch(var(--accent-950)); text-align: center; }
.cta-inner { max-width: 896px; margin: 0 auto; padding: 0 24px; }
.cta-inner h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.cta-inner p { color: rgb(255 255 255 / .5); font-size: 15px; line-height: 1.7; max-width: 576px; margin: 0 auto 32px; }
.cta-inner .cta-btns { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.cta-phone { display: inline-flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .6); font-size: 14px; text-decoration: none; }
.cta-phone:hover { color: #fff; }
/* Feedback CTA band sits on a light surface — override the dark-band white text */
section.bg-surface-2 .cta-inner h2 { color: oklch(var(--foreground-950)); }
section.bg-surface-2 .cta-inner p { color: oklch(var(--foreground-600)); }
@media (min-width: 640px) { .cta-inner .cta-btns { flex-direction: row; } .cta-inner h2 { font-size: 32px; } }

/* ---------- Service tile grids (trademark / patent) ---------- */
.tile-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.tile {
  padding: 24px 28px; border: 1px solid oklch(var(--background-200) / .7); border-radius: 12px;
  background: oklch(var(--background-50)); transition: border-color .3s, background-color .3s;
}
.tile:hover { border-color: oklch(var(--accent-200)); background: oklch(var(--background-100)); }
.tile-ic {
  width: 48px; height: 48px; border-radius: 10px; background: oklch(var(--accent-100));
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  color: oklch(var(--accent-600)); font-size: 18px; transition: background-color .3s, color .3s;
}
.tile:hover .tile-ic { background: oklch(var(--accent-500)); color: #fff; }
.tile h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: oklch(var(--foreground-950)); margin-bottom: 8px; }
.tile p { font-size: 14px; color: oklch(var(--foreground-500)); line-height: 1.7; }
@media (min-width: 768px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Big number steps (trademark process) ---------- */
.num-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.num h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: oklch(var(--foreground-950)); margin-bottom: 8px; }
.num p { font-size: 14px; color: oklch(var(--foreground-500)); line-height: 1.7; }
.num .num-n {
  display: block; font-family: var(--font-heading); font-size: 56px; font-weight: 700; line-height: 1;
  color: oklch(var(--foreground-200)); margin-bottom: 16px; transition: color .3s;
}
.num:hover .num-n { color: oklch(var(--primary-400)); }
@media (min-width: 640px) { .num-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .num-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Split layout (title left / content right) ---------- */
.split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.split .split-left h2 { white-space: normal; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1.65fr; gap: 80px; } }

/* ---------- "Why us" items ---------- */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.why-item {
  display: flex; align-items: flex-start; gap: 16px; padding: 20px;
  border: 1px solid oklch(var(--background-200) / .7); border-radius: 12px; background: oklch(var(--background-50));
}
.why-item .dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(var(--primary-500)); margin-top: 9px; flex-shrink: 0; }
.why-item h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: oklch(var(--foreground-950)); margin-bottom: 4px; }
.why-item p { font-size: 14px; color: oklch(var(--foreground-500)); line-height: 1.7; }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Technology area chips (patent) ---------- */
.chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.chip {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border: 1px solid oklch(var(--background-200) / .7); border-radius: 12px; background: oklch(var(--background-50));
  transition: border-color .3s;
}
.chip:hover { border-color: oklch(var(--accent-200)); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(var(--accent-500)); flex-shrink: 0; }
.chip span { font-size: 14px; font-weight: 500; color: oklch(var(--foreground-700)); }
@media (min-width: 640px) { .chip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .chip-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Vertical timeline list (patent process) ---------- */
.tl-list { display: flex; flex-direction: column; }
.tl-item {
  display: flex; align-items: flex-start; gap: 20px; padding-bottom: 24px; margin-bottom: 24px;
  border-bottom: 1px solid oklch(var(--background-200) / .7);
}
.tl-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.tl-item .tl-num {
  width: 44px; flex-shrink: 0; font-family: var(--font-heading); font-size: 26px; font-weight: 700;
  color: oklch(var(--foreground-300));
}
.tl-item .tl-body { flex: 1; }
.tl-item .tl-body h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: oklch(var(--foreground-950)); margin-bottom: 4px; }
.tl-item .tl-body p { font-size: 14px; color: oklch(var(--foreground-500)); line-height: 1.7; }
.tl-item .tl-tag {
  flex-shrink: 0; font-size: 12px; font-weight: 500; color: oklch(var(--accent-600));
  background: oklch(var(--accent-100)); padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}

/* ---------- Report cards (free reports) ---------- */
.rpt-card {
  position: relative; display: flex; flex-direction: column; padding: 24px 28px; border-radius: 12px;
  border: 1px solid oklch(var(--background-200) / .7); background: oklch(var(--background-50));
  transition: border-color .3s, background-color .3s;
}
.rpt-card.popular { border-color: oklch(var(--accent-300)); background: oklch(var(--accent-50) / .5); }
.rpt-card:hover { border-color: oklch(var(--accent-200)); background: oklch(var(--background-100)); }
.rpt-badge {
  position: absolute; top: -12px; right: 16px; padding: 4px 12px; border-radius: 999px;
  background: oklch(var(--accent-500)); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.rpt-ic {
  width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 20px; background: oklch(var(--accent-100)); color: oklch(var(--accent-600));
}
.rpt-card.popular .rpt-ic, .rpt-card:hover .rpt-ic { background: oklch(var(--accent-500)); color: #fff; }
.rpt-card h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: oklch(var(--foreground-950)); margin-bottom: 8px; }
.rpt-card .rpt-desc { font-size: 14px; color: oklch(var(--foreground-500)); line-height: 1.7; margin-bottom: 20px; flex: 1; }
.rpt-card .rpt-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: oklch(var(--foreground-400)); margin-bottom: 20px; }

/* ---------- How-it-works steps ---------- */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.step { text-align: center; }
.step .step-n {
  display: block; font-family: var(--font-heading); font-size: 52px; font-weight: 700; line-height: 1;
  color: oklch(var(--foreground-200)); margin-bottom: 16px;
}
.step h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: oklch(var(--foreground-950)); margin-bottom: 8px; }
.step p { font-size: 14px; color: oklch(var(--foreground-500)); line-height: 1.7; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Partner logo grid ---------- */
.partner-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.partner-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 24px;
  border: 1px solid oklch(var(--background-200) / .7); border-radius: 12px; background: oklch(var(--background-50));
  transition: border-color .3s, box-shadow .3s;
}
.partner-card:hover { border-color: oklch(var(--accent-300)); box-shadow: 0 12px 28px rgb(0 0 0 / .04); }
.partner-logo { width: 100%; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.partner-card:hover .partner-logo img { filter: grayscale(0); opacity: 1; }
.partner-card .partner-name { font-size: 12px; font-weight: 500; color: oklch(var(--foreground-600)); text-align: center; line-height: 1.4; }
@media (min-width: 640px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .partner-grid { grid-template-columns: repeat(4, 1fr); } .partner-logo { height: 80px; } }
@media (min-width: 1024px) { .partner-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Feedback testimonial cards ---------- */
.fb-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.fb-card {
  display: flex; flex-direction: column; padding: 24px 28px; border: 1px solid oklch(var(--background-200) / .7);
  border-radius: 12px; background: oklch(var(--background-50)); transition: border-color .3s, background-color .3s;
}
.fb-card:hover { border-color: oklch(var(--accent-200)); background: oklch(var(--background-100)); }
.fb-stars { display: flex; gap: 2px; margin-bottom: 20px; color: oklch(var(--secondary-400)); }
.fb-title { font-size: 15px; font-weight: 600; color: oklch(var(--foreground-950)); line-height: 1.5; margin-bottom: 12px; }
.fb-quote { font-size: 14px; color: oklch(var(--foreground-600)); line-height: 1.75; flex: 1; margin-bottom: 24px; }
.fb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid oklch(var(--background-200) / .7); }
.fb-author { font-size: 14px; font-weight: 600; color: oklch(var(--foreground-950)); }
.fb-date { font-size: 12px; color: oklch(var(--foreground-500)); white-space: nowrap; }
@media (min-width: 768px) { .fb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fb-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Hero stats row (feedback) ---------- */
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 64px; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgb(255 255 255 / .08); }
.hero-stats .stat { text-align: center; }
.hero-stats .stat .stat-num { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: #fff; }
.hero-stats .stat .stat-label { font-size: 12px; color: rgb(255 255 255 / .4); margin-top: 6px; letter-spacing: .04em; }

/* ---------- Contact page ---------- */
.ct-grid { display: grid; grid-template-columns: 1fr; gap: 48px 80px; }
.ct-info { display: flex; flex-direction: column; gap: 24px; }
.ct-item { display: flex; align-items: flex-start; gap: 16px; }
.ct-item .ct-ic {
  width: 40px; height: 40px; border-radius: 50%; background: oklch(var(--accent-100));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: oklch(var(--accent-600)); font-size: 16px;
}
.ct-item .ct-body { flex: 1; min-width: 0; }
.ct-item .ct-label { font-size: 14px; font-weight: 600; color: oklch(var(--foreground-950)); margin-bottom: 2px; }
.ct-item .ct-value { font-size: 14px; color: oklch(var(--foreground-500)); line-height: 1.75; word-break: break-word; }
.ct-item .ct-value a { color: oklch(var(--foreground-500)); text-decoration: none; transition: color .3s; }
.ct-item .ct-value a:hover { color: oklch(var(--accent-700)); }
.qr-thumb {
  width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid oklch(var(--background-200));
  flex-shrink: 0; padding: 0; cursor: pointer; background: #fff; transition: opacity .3s, border-color .3s;
}
.qr-thumb:hover { opacity: .85; border-color: oklch(var(--accent-400)); }
.qr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.form-card { padding: 24px 32px; border: 1px solid oklch(var(--background-200) / .7); border-radius: 12px; background: oklch(var(--background-50)); }
.form-card h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: oklch(var(--foreground-950)); margin-bottom: 8px; }
.form-card .form-sub { font-size: 14px; color: oklch(var(--foreground-500)); margin-bottom: 24px; }
.f-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
.f-field { margin-bottom: 16px; }
.f-label { display: block; font-size: 12px; font-weight: 500; color: oklch(var(--foreground-700)); margin-bottom: 6px; }
.f-input {
  width: 100%; padding: 10px 16px; font-size: 14px; font-family: var(--font-body); color: oklch(var(--foreground-950));
  border: 1px solid oklch(var(--background-200)); border-radius: 8px; background: oklch(var(--background-50));
  transition: border-color .3s;
}
.f-input::placeholder { color: oklch(var(--foreground-400)); }
.f-input:focus { outline: none; border-color: oklch(var(--accent-400)); }
textarea.f-input { resize: none; }
.f-hint { font-size: 11px; color: oklch(var(--foreground-400)); margin-top: 4px; }
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 14px; margin-top: 16px; }
.form-msg.ok { color: oklch(var(--secondary-600)); }
.form-msg.err { color: oklch(var(--primary-600)); }
@media (min-width: 768px) { .f-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ct-grid { grid-template-columns: 2fr 3fr; } .form-card { padding: 32px 40px; } }

/* ---------- Filter chips (blog / news) ---------- */
.filter-wrap { padding: 20px 0; border-bottom: 1px solid oklch(var(--background-200) / .7); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-btn {
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; font-family: var(--font-body);
  border: 0; cursor: pointer; background: oklch(var(--background-100)); color: oklch(var(--foreground-600));
  transition: background-color .3s, color .3s;
}
.chip-btn:hover { background: oklch(var(--background-200)); color: oklch(var(--foreground-900)); }
.chip-btn.active { background: oklch(var(--accent-950)); color: #fff; }

/* ---------- Article cards (blog / news / related) ---------- */
.art-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.art-card {
  display: flex; flex-direction: column; border: 1px solid oklch(var(--background-200) / .7); border-radius: 12px;
  background: oklch(var(--background-50)); overflow: hidden; transition: border-color .3s, transform .3s, box-shadow .3s;
}
.art-card:hover { border-color: oklch(var(--accent-200)); transform: translateY(-2px); box-shadow: 0 16px 32px rgb(0 0 0 / .05); }
.art-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: oklch(var(--background-200)); }
.art-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.art-card:hover .art-media img { transform: scale(1.05); }
.art-tag {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500;
  color: #fff; background: oklch(var(--accent-950) / .82);
}
.art-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.art-date { font-size: 12px; color: oklch(var(--foreground-400)); margin-bottom: 12px; }
.art-body h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 1.5; color: oklch(var(--foreground-950)); margin-bottom: 8px; }
.art-body h3 a { color: inherit; text-decoration: none; transition: color .3s; }
.art-body h3 a:hover { color: oklch(var(--accent-700)); }
.art-excerpt {
  font-size: 14px; color: oklch(var(--foreground-500)); line-height: 1.7; flex: 1; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.art-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: oklch(var(--accent-700)); text-decoration: none; }
.art-more:hover { color: oklch(var(--accent-900)); }
@media (min-width: 768px) { .art-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .art-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 48px; }
.pg-btn {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid oklch(var(--background-300)); background: transparent; color: oklch(var(--foreground-700));
  cursor: pointer; transition: background-color .3s;
}
.pg-btn:hover:not(:disabled) { background: oklch(var(--background-100)); }
.pg-btn:disabled { opacity: .45; cursor: not-allowed; }
.pg-num {
  width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; font-family: var(--font-body); border: 0; background: oklch(var(--background-100));
  color: oklch(var(--foreground-700)); cursor: pointer; transition: background-color .3s, color .3s;
}
.pg-nums { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pg-num:hover { background: oklch(var(--background-200)); }
.pg-num.current { background: oklch(var(--primary-500)); color: #fff; }
.pg-dots { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: oklch(var(--foreground-500)); font-size: 14px; }

/* ---------- Newsletter block ---------- */
.newsletter { padding: 64px 0; text-align: center; }
.newsletter-inner { max-width: 896px; margin: 0 auto; padding: 0 24px; }
.nl-ic {
  width: 56px; height: 56px; border-radius: 50%; background: oklch(var(--accent-100));
  display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; color: oklch(var(--accent-600)); font-size: 20px;
}
.newsletter-inner h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: oklch(var(--foreground-950)); margin-bottom: 16px; }
.newsletter-inner p { font-size: 15px; color: oklch(var(--foreground-500)); line-height: 1.7; max-width: 512px; margin: 0 auto 32px; }

/* ---------- Article detail page ---------- */
.d-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.d-cat {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: oklch(var(--primary-300));
  background: oklch(var(--primary-500) / .2);
}
.d-date { font-size: 14px; color: rgb(255 255 255 / .4); }
.d-back { display: inline-flex; align-items: center; gap: 8px; color: oklch(var(--primary-400)); font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 32px; }
.d-back:hover { color: oklch(var(--primary-300)); }
.d-content { max-width: 896px; margin: 0 auto; padding: 0 24px; }
/* 正文为 UEditor Plus 富文本 HTML，覆盖常用排版标签 */
.d-content h1,
.d-content h2,
.d-content h3,
.d-content h4,
.d-content h5 {
  font-family: var(--font-heading); font-weight: 700; color: oklch(var(--foreground-950));
  margin: 40px 0 16px; line-height: 1.3;
}
.d-content h2 { font-size: 22px; }
.d-content h3 { font-size: 19px; margin-top: 34px; }
.d-content h4 { font-size: 17px; margin-top: 28px; }
.d-content h5 { font-size: 15px; margin-top: 24px; }
.d-content h2:first-child,
.d-content h3:first-child,
.d-content p:first-child { margin-top: 0; }
.d-content p { font-size: 15px; color: oklch(var(--foreground-600)); line-height: 1.85; margin-bottom: 20px; }
.d-content a { color: oklch(var(--primary-400)); text-decoration: underline; text-underline-offset: 3px; }
.d-content a:hover { color: oklch(var(--primary-300)); }
.d-content strong { font-weight: 700; color: oklch(var(--foreground-950)); }
.d-content em { font-style: italic; }
.d-content ul,
.d-content ol { margin: 0 0 22px; padding-left: 1.5em; color: oklch(var(--foreground-600)); }
.d-content ul { list-style: disc; }
.d-content ol { list-style: decimal; }
.d-content li { font-size: 15px; line-height: 1.85; margin-bottom: 6px; }
.d-content blockquote {
  border-left: 3px solid oklch(var(--primary-400));
  background: oklch(var(--primary-500) / .07);
  padding: 14px 20px; margin: 0 0 22px; border-radius: 0 10px 10px 0;
  font-size: 15px; line-height: 1.85; color: oklch(var(--foreground-700));
}
.d-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0 24px; }
.d-content figure { margin: 0 0 24px; text-align: center; }
.d-content figcaption { font-size: 13px; color: oklch(var(--foreground-500)); margin-top: 8px; }
.d-content video,
.d-content audio { max-width: 100%; border-radius: 12px; margin: 8px 0 24px; }
.d-content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14px; }
.d-content table th,
.d-content table td { border: 1px solid oklch(var(--background-200)); padding: 10px 12px; text-align: left; line-height: 1.6; }
.d-content table th { background: oklch(var(--background-100)); font-weight: 600; color: oklch(var(--foreground-950)); }
.d-content table td { color: oklch(var(--foreground-600)); }
.d-content code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 13px; background: oklch(var(--background-100)); color: oklch(var(--primary-400));
  padding: 2px 6px; border-radius: 6px;
}
.d-content pre {
  background: oklch(var(--foreground-950)); color: oklch(var(--background-50));
  padding: 18px 20px; border-radius: 12px; overflow-x: auto; margin: 0 0 24px; line-height: 1.7;
}
.d-content pre code { background: transparent; color: inherit; padding: 0; font-size: 13px; }
.d-content hr { border: 0; border-top: 1px solid oklch(var(--background-200)); margin: 34px 0; }
.d-content sub, .d-content sup { font-size: 12px; }
/* 编辑器段落常被包在 <section> 内，样式沿用正文 */
.d-content section p { font-size: 15px; color: oklch(var(--foreground-600)); line-height: 1.85; margin-bottom: 20px; }
.d-content .d-quote { color: oklch(var(--foreground-600)); }
.share-row { margin-top: 56px; padding-top: 32px; border-top: 1px solid oklch(var(--background-200)); }
.share-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.share-inner .share-label { font-size: 14px; font-weight: 500; color: oklch(var(--foreground-500)); }
.s-ic {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; background: oklch(var(--background-100)); color: oklch(var(--foreground-500));
  transition: background-color .3s, color .3s;
}
.s-ic:hover { background: oklch(var(--background-200)); color: oklch(var(--foreground-900)); }
/* 分享区前三个是 <a>，会命中正文链接 .d-content a 的橙红/下划线；
   重置使 a 型图标与微信、复制链接（<button>）图标颜色一致 */
.d-content a.s-ic { color: oklch(var(--foreground-500)); text-decoration: none; }
.d-content a.s-ic:hover { color: oklch(var(--foreground-900)); text-decoration: none; }
.share-copied { font-size: 14px; font-weight: 500; color: oklch(var(--accent-600)); }
.not-found { min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.not-found h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: oklch(var(--foreground-950)); margin-bottom: 16px; }

/* ---------- Centered hero (feedback page) ---------- */
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__content { align-items: center; }
/* 面包屑 / Back 链接与其它页面一致：左对齐（Feedback / Blog / News / 文章详情标题内容仍居中） */
.page-hero--center .page-hero__content .crumb,
.page-hero--center .page-hero__content .d-back { justify-content: flex-start; text-align: left; }
.page-hero--center .page-hero__content .d-back { display: flex; }
.page-hero--center .page-hero__content .page-hero__title,
.page-hero--center .page-hero__content .page-hero__lead { margin-left: auto; margin-right: auto; }
.page-hero--center .page-hero__kicker { justify-content: center; }

/* ---------- QR modal ---------- */
.qr-modal[hidden] { display: none; }
.qr-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.qr-modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .7); backdrop-filter: blur(4px); }
.qr-modal__card {
  position: relative; background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgb(0 0 0 / .3);
  max-width: 320px; width: 100%;
}
.qr-modal__close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: oklch(var(--background-100)); border: 0; cursor: pointer; color: oklch(var(--foreground-700));
  transition: background-color .3s;
}
.qr-modal__close:hover { background: oklch(var(--background-200)); }
.qr-modal__label { text-align: center; font-size: 14px; font-weight: 600; color: oklch(var(--foreground-950)); margin-bottom: 16px; }
.qr-modal__img { width: 100%; height: auto; border-radius: 8px; display: block; }
.qr-modal__hint { text-align: center; font-size: 12px; color: oklch(var(--foreground-400)); margin-top: 12px; }

/* ---------- Hide toggle (article detail dynamic sections) ---------- */
[hidden] { display: none !important; }

/* ---------- Centered hero badge (feedback / blog / news) ---------- */
.hero-badge-row { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.hero-badge-line { width: 32px; height: 1px; background: oklch(var(--primary-500)); }
.hero-badge-txt { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: oklch(var(--primary-400)); }