/* Public agreement page skin. Loaded after legacy inline styles. */
:root {
  --agreement-bg: linear-gradient(180deg, #f3fbf6 0%, #f8fffb 100%);
  --agreement-card: rgba(255, 255, 255, 0.96);
  --agreement-line: rgba(99, 200, 120, 0.20);
  --agreement-text: #162b44;
  --agreement-muted: #607892;
  --agreement-brand: #2f9d5d;
  --agreement-brand-dark: #18754d;
  --agreement-brand-soft: rgba(232, 248, 238, 0.96);
  --agreement-shadow: 0 18px 42px rgba(24, 117, 77, 0.12);
  --agreement-radius: 24px;
}

html {
  background: #f8fbff;
}

body {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  color: var(--agreement-text) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(47, 157, 93, 0.09), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(0, 198, 168, 0.07), transparent 24%),
    var(--agreement-bg) !important;
}

nav [class^="ri-"],
nav [class*=" ri-"],
.footer [class^="ri-"],
.footer [class*=" ri-"],
.footer-nav [class^="ri-"],
.footer-nav [class*=" ri-"],
.back-button [class^="ri-"],
.back-button [class*=" ri-"],
.loading [class^="ri-"],
.loading [class*=" ri-"],
.error [class^="ri-"],
.error [class*=" ri-"] {
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
}

main.agreement-container,
main.main-content {
  width: min(1120px, calc(100% - 48px)) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 132px 0 52px !important;
  flex: 1 0 auto !important;
}

main.main-content .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.agreement-header {
  margin: 0 0 24px !important;
  padding: 34px 38px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: 1px solid var(--agreement-line) !important;
  border-radius: var(--agreement-radius) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 255, 251, 0.96)) !important;
  box-shadow: var(--agreement-shadow) !important;
}

.agreement-header::before {
  content: "法律条款";
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  margin: 0 auto 14px;
  border-radius: 999px;
  border: 1px solid rgba(99, 200, 120, 0.38);
  background: var(--agreement-brand-soft);
  color: var(--agreement-brand-dark);
  -webkit-text-fill-color: var(--agreement-brand-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.agreement-header h1,
.agreement-title {
  max-width: 100% !important;
  margin: 0 auto !important;
  color: #132941 !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #132941 !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
  text-wrap: balance;
}

.agreement-header .update-time,
.agreement-date,
.agreement-meta {
  margin: 14px auto 0 !important;
  color: var(--agreement-muted) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  text-align: center !important;
}

.agreement-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px 16px !important;
}

.agreement-meta p {
  margin: 0 !important;
  display: inline-flex !important;
  justify-content: center !important;
  color: var(--agreement-muted) !important;
}

.agreement-content,
#agreementContent > .agreement-content {
  width: 100% !important;
  padding: 40px 44px !important;
  border: 1px solid var(--agreement-line) !important;
  border-radius: var(--agreement-radius) !important;
  background: var(--agreement-card) !important;
  box-shadow: var(--agreement-shadow) !important;
  color: #253852 !important;
  font-size: 16px !important;
  line-height: 1.92 !important;
}

.agreement-content h1,
.agreement-content h2,
.agreement-content h3,
#agreementContent h1,
#agreementContent h2,
#agreementContent h3 {
  color: #132941 !important;
  background: none !important;
  -webkit-text-fill-color: #132941 !important;
  letter-spacing: -0.02em;
}

.agreement-content h1,
#agreementContent h1 {
  font-size: 30px !important;
  margin: 0 0 24px !important;
}

.agreement-content h2,
#agreementContent h2 {
  margin: 34px 0 16px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(99, 200, 120, 0.20) !important;
  font-size: 24px !important;
}

.agreement-content h3,
#agreementContent h3 {
  margin: 26px 0 12px !important;
  font-size: 19px !important;
}

.agreement-content p,
.agreement-content li,
#agreementContent p,
#agreementContent li {
  color: #32465f !important;
  font-size: 16px !important;
  line-height: 1.92 !important;
}

.agreement-content p,
#agreementContent p {
  margin: 0 0 14px !important;
}

.agreement-content ul,
.agreement-content ol,
#agreementContent ul,
#agreementContent ol {
  margin: 14px 0 18px !important;
  padding-left: 1.4em !important;
}

.agreement-content a,
#agreementContent a {
  color: var(--agreement-brand-dark) !important;
  text-decoration: none !important;
}

.agreement-content a:hover,
#agreementContent a:hover {
  text-decoration: underline !important;
}

#loading,
#error,
.loading,
.error {
  margin: 0 !important;
  padding: 36px !important;
  border: 1px solid var(--agreement-line) !important;
  border-radius: var(--agreement-radius) !important;
  background: var(--agreement-card) !important;
  box-shadow: var(--agreement-shadow) !important;
  text-align: center !important;
  color: var(--agreement-muted) !important;
}

.error {
  color: #c02647 !important;
}

.back-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  margin-top: 22px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(99, 200, 120, 0.38) !important;
  background: var(--agreement-brand-soft) !important;
  color: var(--agreement-brand-dark) !important;
  -webkit-text-fill-color: var(--agreement-brand-dark) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.back-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(47, 157, 93, 0.14);
}

.footer-nav {
  margin-top: auto !important;
}

.footer,
.footer-nav {
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  main.agreement-container,
  main.main-content {
    width: min(100% - 28px, 720px) !important;
    padding: 92px 0 34px !important;
  }

  .agreement-header {
    padding: 24px 22px !important;
    border-radius: 20px !important;
  }

  .agreement-header h1,
  .agreement-title {
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  .agreement-content,
  #agreementContent > .agreement-content {
    padding: 26px 22px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
  }

  .agreement-content p,
  .agreement-content li,
  #agreementContent p,
  #agreementContent li {
    font-size: 15px !important;
  }
}