body { background: var(--bs-tertiary-bg); }
main.container { max-width: 1120px; }
#snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
#snapshot section { padding: 1.25rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); }
#snapshot h2 { font-size: 1.1rem; }
form { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.5rem 0; }
form .form-control { width: auto; flex: 1 1 12rem; }
pre { overflow: auto; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); line-height: 1.45; }
#plan h2 { font-size: 1.4rem; margin: 2rem 0 1rem; }
#plan .card-body > h2 { margin: 0 0 .75rem; }
#plan h3 { font-size: 1.1rem; }
.standing-badge { border: 1px solid rgb(255 255 255 / 18%); font-size: .78em; font-weight: 650; letter-spacing: .01em; vertical-align: .08em; }
.standing-able { background: #6c757d; color: #fff; }
.standing-proficient { background: #0d6efd; color: #fff; }
.standing-distinguished { background: #0dcaf0; color: #072a30; }
.standing-respected { background: #20c997; color: #082c22; }
.standing-master { background: #198754; color: #fff; }
.standing-renowned { background: #8a6508; color: #fff3cd; }
.standing-grand-master { background: #9c4b22; color: #ffeadf; }
.standing-legendary { background: #51459b; color: #f0edff; }
.standing-ultimate { background: #9d365a; color: #ffeaf1; }
.feedback-stages > li { margin-bottom: 1rem; padding: 1.25rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); }
.feedback-stages > li p:last-child { margin-bottom: 0; }
.table-responsive { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); }
.table-responsive .table { margin-bottom: 0; }
.table th { white-space: nowrap; }
.current-pirate { font-weight: 700; }
.feedback-anchor { box-shadow: inset .3rem 0 0 var(--bs-primary); }
.local-ordering-conflict { box-shadow: inset .3rem 0 0 var(--bs-warning); }
.current-pirate.feedback-anchor, .current-pirate.local-ordering-conflict { box-shadow: inset .3rem 0 0 var(--bs-dark); }
details { margin-top: 1.5rem; }
summary { cursor: pointer; }
@media (max-width: 575px) { form .form-label { width: 100%; margin-bottom: 0; } }