button, select, input { font: inherit; }
.delivery-controls { display: grid; gap: 0.8rem; align-items: end; margin-bottom: 1rem; }
.delivery-controls label { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.7rem; font-weight: 750; }
.delivery-controls select, .delivery-controls button { min-height: 2.8rem; }
.quiet-button { color: var(--blue); background: #edf1ff; border: 1px solid #bec9f8; }

.scoreboard { display: grid; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 1.2rem; color: #eafdfb; background: var(--navy); border-radius: 1rem; }
.scoreboard h2 { color: #fff; }
#score-message { color: #a9c0dd; }
.score-ring { display: flex; width: 7rem; height: 7rem; align-items: baseline; justify-content: center; place-self: center; padding-top: 2.2rem; background: rgb(80 227 212 / 10%); border: 0.45rem solid #50e3d4; border-radius: 50%; }
.score-ring strong { font-size: 2rem; }
.score-ring span { color: #9fb4d0; font-size: 0.7rem; }
.score-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0; }
.score-stats div { padding: 0.7rem; background: rgb(255 255 255 / 7%); border-radius: 0.6rem; }
.score-stats dt { color: #8ba7ca; font-size: 0.63rem; }
.score-stats dd { margin: 0.2rem 0 0; font-weight: 800; }

.workspace { display: grid; gap: 1rem; }
.panel-heading { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.check-results { display: grid; gap: 0.5rem; min-height: 17rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.check-results li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; padding: 0.7rem; background: var(--soft); border: 1px solid var(--line); border-radius: 0.55rem; font-size: 0.7rem; }
.check-results li::before { content: "○"; color: var(--muted); font-weight: 900; }
.check-results li.is-running::before { content: "…"; color: #9b680e; }
.check-results li.is-passed::before { content: "✓"; color: #168365; }
.check-results li.is-failed::before { content: "×"; color: #b62e4f; }
.check-results small { display: block; margin-top: 0.15rem; color: var(--muted); }
.bundle-meter { margin-top: 1rem; }
.bundle-meter > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.7rem; }
.meter { height: 0.55rem; margin-top: 0.45rem; overflow: hidden; background: #e4e8ef; border-radius: 999px; }
.meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2c68e8, #32d5c8); transition: width 200ms ease; }
.meter span.is-over { background: #d45d79; }
.bundle-meter small { color: var(--muted); }

.audit-panel, .report-panel, .source-panel { margin-top: 1rem; }
.audit-panel { display: grid; gap: 1rem; }
.audit-panel p, .source-panel p { color: var(--muted); }
.audit-checks { display: grid; gap: 0.55rem; }
.audit-checks label { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: start; padding: 0.7rem; background: var(--soft); border-radius: 0.55rem; font-size: 0.72rem; }
.report { min-height: 8rem; margin-top: 1rem; padding: 1rem; background: var(--soft); border-left: 0.3rem solid #6978d7; border-radius: 0.55rem; }
.report.is-approved { color: #176a59; background: #effbf7; border-color: #22a884; }
.report.is-blocked { color: #8c203a; background: #fff5f7; border-color: #d45d79; }
.report ul { margin-bottom: 0; }

.source-panel { display: grid; gap: 1rem; }
.source-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.source-tabs button { min-height: 2.5rem; color: var(--muted); background: #fff; border: 1px solid #cdd5e0; }
.source-tabs button[aria-selected="true"] { color: #fff; background: var(--blue); }
#source-code { min-height: 25rem; margin: 0; padding: 1rem; overflow: auto; color: #dffdfa; background: var(--navy); border-radius: 0.75rem; font: 0.72rem/1.55 "Cascadia Code", Consolas, monospace; }

@media (prefers-reduced-motion: reduce) { .meter span { transition: none; } }
@media (min-width: 48rem) {
  .delivery-controls { grid-template-columns: 1.2fr 1fr auto auto; }
  .scoreboard { grid-template-columns: 1.1fr auto 1fr; }
  .workspace { grid-template-columns: 1fr 1fr; }
  .audit-panel { grid-template-columns: 0.65fr 1.35fr; }
}
@media (min-width: 58rem) { .source-panel { grid-template-columns: 0.55fr 1.45fr; align-items: start; } }
@media (max-width: 34rem) { .panel-heading { flex-direction: column; } .score-stats { grid-template-columns: 1fr; } }