.official-site-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid #c4def9;
  border-radius: 9px;
  background: linear-gradient(135deg, #fff 0%, #edf6ff 100%);
  box-shadow: 0 3px 10px rgba(31, 116, 215, .1);
  color: #2375d8;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: .18s;
}

.official-site-link:hover {
  border-color: #80b9f1;
  background: linear-gradient(135deg, #fafdff 0%, #dcedff 100%);
  box-shadow: 0 5px 13px rgba(31, 116, 215, .17);
  color: #075cc9;
  transform: translateY(-1px);
}

.official-site-link-arrow {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #2375d8;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

@media (max-width: 760px) {
  .official-site-link { padding: 6px 8px; font-size: 11px; }
  .official-site-link-arrow { width: 14px; height: 14px; font-size: 11px; }
}

/* 底部内容区：保持可收录，但用服务卡片呈现，避免 SEO 文案堆叠。 */
.tool-seo-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: 28px;
  margin: 8px 0 22px;
  padding: 29px 31px;
  overflow: hidden;
  border: 1px solid #dce9f6;
  border-radius: 20px;
  background: linear-gradient(125deg, #fff 0%, #f7fbff 58%, #eef7ff 100%);
  box-shadow: 0 12px 28px rgba(53, 103, 151, .06);
}

.tool-seo-content::after {
  position: absolute;
  top: -92px;
  right: -38px;
  width: 210px;
  height: 210px;
  border: 26px solid rgba(49, 139, 239, .06);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.tool-seo-content > div { position: relative; z-index: 1; }
.seo-kicker {
  padding: 6px 10px;
  border: 1px solid #d5e9ff;
  border-radius: 999px;
  background: #eaf5ff;
  color: #2373bc;
  font-size: 11px;
  font-weight: 800;
}

.tool-seo-content h2 {
  margin: 13px 0 10px;
  color: #203c5d;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.6px;
}

.tool-seo-content > div > p {
  max-width: 680px;
  margin: 0;
  color: #668097;
  font-size: 13px;
  line-height: 1.9;
}

.tool-faq-list {
  display: grid;
  align-content: center;
  gap: 8px;
}

.tool-faq-list details {
  border: 1px solid #dceaf6;
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 3px 8px rgba(41, 94, 143, .035);
}

.tool-faq-list summary {
  padding: 11px 13px;
  color: #496883;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.tool-faq-list p {
  margin: -2px 13px 12px;
  color: #7b91a5;
  font-size: 12px;
  line-height: 1.7;
}

.company-service {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 22px;
  padding: 27px 30px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(118deg, #123d70 0%, #1d639f 100%);
  box-shadow: 0 13px 28px rgba(27, 89, 145, .18);
}

.company-service::before {
  position: absolute;
  top: -112px;
  right: 140px;
  width: 250px;
  height: 250px;
  border: 34px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: '';
}

.company-service-copy, .company-service-actions { position: relative; z-index: 1; }
.company-kicker { background: rgba(255, 255, 255, .14); color: #d9efff; }
.company-service h2 { margin: 11px 0 8px; color: #fff; font-size: 22px; letter-spacing: -.6px; }
.company-service p { max-width: 710px; color: #d0e4f5; font-size: 13px; line-height: 1.85; }
.company-service-actions { min-width: 208px; align-items: flex-end; }
.service-tags { justify-content: flex-end; }
.service-tags span { border-color: rgba(255, 255, 255, .18); background: rgba(11, 48, 86, .18); color: #e5f4ff; }
.service-link { padding: 11px 15px; border: 1px solid rgba(255, 255, 255, .38); background: #fff; box-shadow: 0 8px 20px rgba(0, 31, 64, .16); color: #1767ae; }
.service-link:hover { background: #eaf6ff; color: #0d5798; }

.feedback-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 174px;
  align-items: center;
  gap: 30px;
  margin: 0 0 30px;
  padding: 28px 30px;
  border: 1px solid #dce8f3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(53, 103, 151, .07);
}

.feedback-kicker { padding: 6px 10px; background: #e8f6ef; color: #158757; }
.feedback-card h2 { margin: 12px 0 8px; color: #23415f; font-size: 22px; letter-spacing: -.6px; }
.feedback-card p { max-width: 760px; color: #6a8297; font-size: 13px; line-height: 1.85; }
.feedback-points { margin-top: 15px; }
.feedback-points span { padding: 6px 9px; border-color: #dce8f2; border-radius: 999px; background: #f8fbfd; color: #57738d; }
.feedback-link { margin-top: 15px; padding: 8px 11px; border-radius: 8px; background: #edf7ff; color: #176ee5; text-decoration: none; }
.feedback-link:hover { background: #ddecff; text-decoration: none; }
.feedback-qr { padding: 11px; border-color: #dce9f2; border-radius: 14px; background: #f8fbfd; box-shadow: none; }
.feedback-qr-image { width: 122px; height: 122px; padding: 6px; border: 1px solid #e0ebf3; border-radius: 10px; }

@media (max-width: 760px) {
  .tool-seo-content { grid-template-columns: 1fr; gap: 16px; padding: 21px 20px; border-radius: 16px; }
  .tool-seo-content h2, .company-service h2, .feedback-card h2 { font-size: 19px; }
  .tool-seo-content > div > p, .company-service p, .feedback-card p { font-size: 12px; line-height: 1.8; }
  .company-service, .feedback-card { align-items: flex-start; flex-direction: column; gap: 18px; padding: 22px 20px; border-radius: 16px; }
  .company-service-actions { min-width: 0; align-items: flex-start; }
  .service-tags { justify-content: flex-start; }
  .feedback-card { display: flex; }
  .feedback-qr { width: 100%; flex-direction: row; justify-content: flex-start; }
}

/* 品牌页脚：备案信息克制呈现，友情链接与备案层级分开。 */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  margin-top: 4px;
  padding: 24px 22px 27px;
  border: 1px solid #dfeaf3;
  border-radius: 18px;
  background: linear-gradient(145deg, #fbfdff 0%, #f1f7fb 100%);
  color: #6f879c;
}

.footer-records,
.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-records { gap: 8px; font-size: 12px; font-weight: 650; }
.footer-copyright { margin-right: 4px; color: #7f94a8; }

.footer-records a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #d9e7f1;
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
  color: #5f7a91;
  text-decoration: none;
  transition: .18s;
}

.footer-records a:hover {
  border-color: #acd0f4;
  background: #fff;
  box-shadow: 0 4px 10px rgba(52, 112, 168, .09);
  color: #176ee5;
  transform: translateY(-1px);
}

.beian-icon { width: 16px; height: 18px; }
.icp-badge { width: 16px; height: 18px; font-size: 10px; }

.footer-links {
  gap: 7px;
  padding-top: 13px;
  border-top: 1px solid #dfeaf2;
}

.footer-label {
  margin-right: 3px;
  padding: 5px 7px;
  border-radius: 6px;
  background: #e5f1fb;
  color: #6688a3;
  font-size: 11px;
  font-weight: 800;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #5f7c94;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  transition: .18s;
}

.footer-links a span { color: #9aabba; font-weight: 600; }
.footer-links a:hover { border-color: #c8e0f7; background: #fff; color: #176ee5; }
.footer-links a:hover span { color: #4b8ac3; }

@media (max-width: 760px) {
  .site-footer { gap: 11px; padding: 20px 14px 22px; border-radius: 15px; }
  .footer-records { gap: 7px; }
  .footer-copyright { width: 100%; margin: 0 0 2px; text-align: center; }
  .footer-links { gap: 5px; padding-top: 11px; }
  .footer-links a span { display: none; }
}

/* 水印工作台：左侧展示大预览，右侧集中完成全部设置。 */
.watermark-workspace {
  grid-template-columns: minmax(0, 1.2fr) minmax(342px, .8fr);
  align-items: stretch;
  gap: 18px;
}

.watermark-preview-stage {
  position: relative;
  display: grid;
  min-height: 560px;
}

.watermark-preview-stage > * { grid-area: 1 / 1; }
.watermark-preview-stage .watermark-drop { min-height: 100%; }

.watermark-preview {
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #bdd8f1;
  border-radius: 16px;
  background: linear-gradient(145deg, #f9fcff 0%, #eff7ff 100%);
}

.watermark-preview.hidden { display: none !important; }

.watermark-preview > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid #dbeaf5;
  background: rgba(255, 255, 255, .78);
}

.watermark-preview > div > span { display: flex; flex-direction: column; gap: 2px; }
.watermark-preview b { color: #3c5b78; font-size: 13px; }
.watermark-preview > div small { color: #8ba1b4; font-size: 10px; }
.watermark-preview .text-button { padding: 7px 9px; white-space: nowrap; }

.watermark-preview canvas {
  display: block;
  max-width: calc(100% - 32px);
  max-height: 462px;
  margin: auto;
  border: 1px solid #dbe7ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(37, 86, 127, .13);
}

.watermark-preview > small {
  padding: 9px 13px 11px;
  border-top: 1px solid #e2edf5;
  color: #7c93a8;
  font-size: 11px;
  line-height: 1.5;
}

.watermark-tool-options { gap: 14px; }
.watermark-appearance { display: flex; flex-direction: column; gap: 7px; }
.watermark-color-list { display: flex; flex-wrap: wrap; gap: 7px; }

.watermark-color {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #d7e4ef;
  border-radius: 7px;
  background: #fff;
  color: #5b748b;
  font: 700 11px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  transition: .18s;
}

.watermark-color i {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid #ccd9e4;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
}

.watermark-color:hover { border-color: #9dc7f4; color: #176ee5; }
.watermark-color.active { border-color: #63abf5; background: #eaf4ff; color: #126de1; box-shadow: 0 0 0 2px #d9edff; }

.watermark-custom-color {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 5px !important;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px dashed #b9d3ec;
  border-radius: 7px;
  background: #f8fcff;
  color: #5c7c96 !important;
  cursor: pointer;
}

.watermark-custom-color input[type="color"] { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.watermark-custom-color span { font-size: 11px; font-weight: 700; }

.watermark-size-control { position: relative; }
.watermark-size-control output { color: #1677ff; }

@media (max-width: 760px) {
  .watermark-workspace { grid-template-columns: 1fr; }
  .watermark-preview-stage { min-height: 400px; }
  .watermark-preview canvas { max-width: calc(100% - 24px); max-height: 330px; }
  .watermark-preview > div { padding: 9px 10px; }
  .watermark-preview > small { padding: 8px 10px 10px; }
}

/* 月弦科技品牌 Logo。 */
.brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 11px;
  filter: drop-shadow(0 5px 9px rgba(48, 135, 208, .2));
}

#watermarkActions .secondary-button:disabled {
  cursor: not-allowed;
  border-color: #dce6ef;
  background: #edf2f7;
  color: #8ba0b2;
  box-shadow: none;
}

@media (max-width: 760px) {
  .brand-logo { width: 31px; height: 31px; border-radius: 9px; }
}