.opl-list{border:1px solid #dbe7ed;border-radius:18px;padding:24px;margin:28px 0;background:linear-gradient(145deg,#f8fcff,#f0f7fa);box-shadow:0 8px 28px rgba(15,65,85,.06);color:#163344;font:inherit;text-align:start}
.opl-list .opl-title{margin:0 0 18px;padding-inline-start:12px;border-inline-start:4px solid #0e7490;font-size:1.15em;font-weight:700;line-height:1.8;color:inherit}
.opl-list ol{margin:0;padding:0;list-style:none}
.opl-list ol>li{display:flex;align-items:center;gap:12px;margin:0 0 9px;padding:12px;border:1px solid #e2ebef;border-radius:12px;background:#fff;line-height:1.8;list-style:none}
.opl-list ol>li:last-child{margin-bottom:0}
.opl-list .opl-number{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:38px;min-height:38px;box-sizing:border-box;padding:3px 9px;border-radius:11px;background:#eaf3f7;border:1px solid #d5e8ef;color:#155e75;font-size:1.05em;font-weight:700;line-height:1.5}
.opl-list li>a{flex:1;min-width:0;overflow-wrap:anywhere;color:#164e63;text-decoration:none}
.opl-list li>a:hover{text-decoration:underline;color:#0e7490}
.opl-list li>a:focus-visible{outline:2px solid #0e7490;outline-offset:4px;border-radius:3px}
.opl-list ol>.opl-current{border-color:#93c5d7;background:#ecf8fc;font-weight:700;box-shadow:inset 0 0 0 1px #d6edf5}
.opl-list .opl-current .opl-number{background:#0e7490;border-color:#0e7490;color:#fff;box-shadow:0 3px 8px rgba(14,116,144,.18)}
.opl-list .opl-badge{display:inline-block;flex:0 0 auto;padding:3px 9px;border-radius:20px;background:#d5eef6;font-size:.72em;font-weight:600;color:#07546b}
@media(max-width:480px){.opl-list{padding:16px;border-radius:14px}.opl-list ol>li{flex-wrap:wrap;gap:9px;padding:10px}.opl-list .opl-badge{margin-inline-start:47px}}
.opl-list ol>.opl-current{border-inline-start:4px solid #0e7490}.opl-list ol>li{flex-wrap:nowrap;align-items:flex-start}.opl-list .opl-badge{display:none}.opl-list .opl-number{margin-block-start:2px}