.services-section { margin-top: 12px; }
.service-heading { margin-bottom: 18px; }
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.service-card { padding: 22px; }
.service-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.service-top h3 { font: 22px Georgia; margin: 5px 0 0; }
.service-path { font: 10px monospace; color: var(--green); text-transform: uppercase; }
.route-total { padding: 6px 9px; background: #eaf0ec; color: #356150; border-radius: 99px; font-size: 10px; white-space: nowrap; }
.service-status { display: flex; gap: 8px; flex-wrap: wrap; margin: 15px 0; }
.service-status span { font-size: 10px; padding: 5px 7px; border-radius: 5px; }
.service-status .ok { background: #e5f0e6; color: #246046; }
.service-status .pending { background: #f4ead9; color: #8b5d19; }
.routes { border-top: 1px solid var(--line); }
.route { display: grid; grid-template-columns: 58px 1fr auto; gap: 9px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eceeea; }
.route code { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.route small { font-size: 9px; }
.method { font: 9px monospace; color: #fff; background: #4d6d62; padding: 4px 5px; border-radius: 4px; text-align: center; }
.method.post { background: #3271a8; }
.method.put, .method.patch { background: #a56b20; }
.method.delete { background: #a53b45; }
.method.page { background: #765b9e; }
.service-advice { margin-top: 15px; padding: 13px; background: #f5f6f2; border-radius: 9px; }
.service-advice b { font-size: 11px; color: var(--green); }
.service-advice p { font-size: 11px; color: var(--muted); line-height: 1.45; margin: 8px 0 0; }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .route { grid-template-columns: 54px 1fr; } .route small { grid-column: 2; } }