body {
background-color: var(--bg-page);
padding: 40px 20px;
font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Heiti SC", sans-serif;
}
.agreement-container {
max-width: 900px;
margin: 0 auto;
background-color: var(--bg-card);
border-radius: var(--radius-lg);
padding: 48px 56px;
box-shadow: var(--shadow-card-lg);
border: 1px solid #F3F4F6;
}
.agreement-title {
font-size: 22px;
font-weight: bold;
color: var(--text-primary);
text-align: center;
margin-bottom: 16px;
line-height: 1.4;
}
.date-line {
font-size: 13px;
color: var(--text-muted);
text-align: right;
margin-bottom: 8px;
line-height: 1.6;
}
.date-line strong {
color: #333;
}
.article-title {
font-size: 15px;
font-weight: bold;
color: var(--text-primary);
margin-top: 24px;
margin-bottom: 12px;
line-height: 1.6;
}
p {
font-size: 14px;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 12px;
text-align: justify;
text-indent: 2em;
}
p strong {
color: var(--text-primary);
}
ul {
margin-left: 2em;
margin-bottom: 12px;
list-style-type: disc;
}
ul li {
font-size: 14px;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 6px;
text-align: justify;
}
ul li strong {
color: var(--text-primary);
}
ol {
margin-left: 2em;
margin-bottom: 12px;
list-style-type: decimal;
}
ol li {
font-size: 14px;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 6px;
text-align: justify;
}
ol li strong {
color: var(--text-primary);
}
.clause-list {
margin-left: 0;
margin-bottom: 12px;
list-style-type: decimal;
padding-left: 1.5em;
}
.clause-list > li {
font-size: 14px;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 6px;
text-align: justify;
text-indent: 0;
}
.clause-list > li strong {
color: var(--text-primary);
}
.subclause-list {
list-style: none;
margin-top: 6px;
margin-bottom: 6px;
margin-left: 1em;
padding-left: 0;
counter-reset: subclause;
}
.subclause-list > li {
position: relative;
font-size: 14px;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 6px;
text-align: justify;
text-indent: 0;
padding-left: 2.2em;
}
.subclause-list > li::before {
counter-increment: subclause;
content: "(" counter(subclause) ")";
position: absolute;
left: 0;
}
.subclause-list > li strong {
color: var(--text-primary);
}
.confirm-label {
font-size: 14px;
font-weight: bold;
color: var(--text-primary);
margin-top: 16px;
margin-bottom: 8px;
text-indent: 2em;
}
.back-btn {
display: inline-block;
margin-top: 32px;
padding: 10px 20px;
background-color: var(--primary-color);
color: #fff;
border: none;
border-radius: var(--radius-md);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: background-color .15s;
cursor: pointer;
}
.back-btn:hover {
background-color: var(--primary-color-dark);
}
.agreement-footer {
text-align: center;
margin-top: 24px;
}
@media (max-width: 640px) {
body { padding: 20px 16px; }
.agreement-container { padding: 28px 20px; }
.clause-list { margin-left: 0; padding-left: 1.2em; }
.subclause-list { margin-left: .6em; }
.subclause-list > li { padding-left: 2em; }
}