.rpad-main { background: #f7f9fc; padding: 24px 0 56px; color: #1f2d3d; }

.rpad-doc-header { background: #fff; border: 1px solid #e4e9f1; border-radius: 10px; padding: 18px 20px; }
.rpad-doc-header h1 { font-size: 30px; color: #0f2740; }
.rpad-doc-header p { margin-top: 8px; color: #5f7184; }
.rpad-doc-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.rpad-doc-meta span { background: #eef4fb; border: 1px solid #d9e7f7; border-radius: 6px; padding: 4px 10px; font-size: 12px; color: #335271; }

.rpad-doc-layout { margin-top: 18px; display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.rpad-sidebar { position: sticky; top: 12px; border-radius: 10px; padding: 14px; background: #fff; border: 1px solid #e3e9f3; }
.rpad-sidebar h3 { font-size: 16px; color: #0f2f4f; margin-bottom: 8px; }
.rpad-sidebar a { display: block; padding: 9px 10px; border-radius: 6px; color: #4d6277; margin-top: 4px; font-size: 14px; }
.rpad-sidebar a:hover { background: #f2f7fd; }
.rpad-sidebar a.active { background: #eaf3ff; color: #0d63b7; font-weight: bold; }

.rpad-doc-content { border: 1px solid #e3eaf3; border-radius: 10px; background: #fff; padding: 18px; }
.rpad-doc-section { display: none; }
.rpad-doc-section.active { display: block; animation: rpadFade .2s ease; }
.rpad-doc-section h2 { font-size: 25px; color: #102e4b; margin-bottom: 8px; }
.rpad-doc-section h3 { margin-top: 14px; font-weight: bold; font-size: 14px; }
.rpad-doc-section p { color: #546b82; line-height: 1.8; margin-top: 8px; }

.rpad-bullet { margin-top: 10px; padding-left: 20px; }
.rpad-bullet li { list-style: disc; margin-top: 6px; color: #445d77; }
.rpad-note { margin-top: 12px; background: #f7fbff; border: 1px solid #d9e9f8; border-radius: 6px; padding: 10px; color: #395978; }

.rpad-kv-table { margin-top: 12px; border: 1px solid #e1e8f3; border-radius: 8px; overflow: hidden; }
.rpad-kv-table > div { display: grid; grid-template-columns: 190px 1fr; border-top: 1px solid #e9eef6; }
.rpad-kv-table > div:first-child { border-top: 0; }
.rpad-kv-table label { background: #f5f8fc; padding: 10px 12px; color: #1d446a; font-weight: bold; }
.rpad-kv-table span { padding: 10px 12px; color: #4f6479; }

.rpad-api-card { border: 1px solid #e2e9f4; border-radius: 8px; padding: 12px; margin-top: 10px; background: #fafcff; }
.rpad-api-card h4 { color: #0f3458; font-size: 17px; }
.rpad-api-card p { margin-top: 6px; }

.rpad-doc-image { margin-top: 12px; border: 1px dashed #b7cce4; border-radius: 8px; overflow: hidden; background: #f3f8ff; }
.rpad-doc-image img { width: 100%; height: 180px; display: block; object-fit: cover; }
.rpad-doc-image span { display: block; text-align: center; font-size: 12px; color: #5f7690; padding: 7px 0; }

.rpad-code-wrap { margin-top: 14px; }
.rpad-code-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rpad-code-head b { color: #12304f; font-size: 14px; }
.rpad-copy { border: 1px solid #cfdced; background: #fff; color: #2f5b86; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.rpad-copy:hover { background: #f3f8ff; }
.rpad-code { border-radius: 10px; background: #0c1d32; color: #dce8fb; padding: 14px; overflow: auto; line-height: 1.6; font-size: 12px; }

@keyframes rpadFade {
    from { opacity: .2; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media only screen and (max-width: 1280px) {
    .rpad-main { padding: 20px 16px 48px; }
}

@media only screen and (max-width: 992px) {
    .rpad-doc-layout { grid-template-columns: 1fr; }
    .rpad-sidebar { position: static; }
}

@media only screen and (max-width: 768px) {
    .rpad-doc-header h1 { font-size: 24px; }
    .rpad-doc-section h2 { font-size: 21px; }
    .rpad-kv-table > div { grid-template-columns: 1fr; }
}