.ml-wrap {
display: grid;
grid-template-columns: 300px 1fr;
gap: 16px;
align-items: start;
}
.ml-left {
display: flex;
flex-direction: column;
gap: 12px;
position: sticky;
top: calc(72px + 16px);
}
.ml-card {
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px;
}
.ml-card-title {
font-size: 17px;
font-weight: 700;
color: var(--text-main);
margin: 0 0 12px 0;
}
.ml-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
font-style: normal;
}
.ml-ico i {
font-size: 17px;
line-height: 1;
color: var(--text-muted);
}
.ml-nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--text-main);
text-decoration: none;
transition: background 0.12s;
}
.ml-nav a:hover {
background: var(--bg-surface);
color: var(--brand-color);
}
.ml-nav a.active {
background: var(--brand-color);
color: var(--text-on-brand);
}
.ml-nav a:hover .ml-ico i {
color: var(--brand-color);
}
.ml-nav a.active .ml-ico i {
color: var(--text-on-brand);
}
.ml-quick-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border-color);
}
.ml-quick-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.ml-quick-text {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.5;
}
.ml-quick-text strong {
color: var(--text-main);
font-weight: 600;
display: block;
font-size: 13px;
}
.ml-quick-text a {
color: var(--brand-color);
text-decoration: none;
}
.ml-quick-text a:hover {
text-decoration: underline;
}
.ml-right {
display: flex;
flex-direction: column;
gap: 8px;
}
.ml-section {
background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
scroll-margin-top: calc(72px + 16px);
}
.ml-section-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-color);
}
.ml-section-head h2 {
font-size: 15px;
font-weight: 700;
color: var(--text-main);
flex: 1;
margin: 0;
}
.ml-section-body {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ml-section-body p {
font-size: 13.5px;
line-height: 1.7;
color: var(--text-muted);
margin: 0;
}
.ml-section-body p strong {
color: var(--text-main);
font-weight: 600;
}
.ml-section-body a {
color: var(--brand-color);
text-decoration: none;
}
.ml-section-body a:hover {
text-decoration: underline;
}
.ml-note {
display: flex;
align-items: flex-start;
gap: 10px;
background: var(--bg-surface);
border-radius: 8px;
padding: 11px 14px;
}
.ml-note .ml-ico i {
color: var(--brand-color);
font-size: 15px;
}
.ml-note p {
font-size: 13px !important;
color: var(--text-muted);
margin: 0 !important;
}
.ml-plan {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
}
.ml-plan:last-child {
border-bottom: none;
padding-bottom: 0;
}
.ml-plan-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-surface);
border: 1px solid var(--border-color);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ml-plan-icon i {
font-size: 16px;
line-height: 1;
color: var(--brand-color);
}
.ml-plan-name {
font-size: 14px;
font-weight: 700;
color: var(--text-main);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 3px;
}
.ml-plan-price {
font-size: 11px;
font-weight: 600;
color: var(--brand-color);
background: var(--bg-surface);
padding: 2px 8px;
border-radius: 20px;
}
.ml-plan-desc {
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
@media (max-width: 860px) {
.ml-wrap { grid-template-columns: 1fr; }
.ml-left { position: static; }
}