.pill.draft { background: #fff5df; color: #8a5b00; }
.action { display: inline-block; background: #eaf3fc; color: #164f84; border-radius: 6px; padding: 7px 10px; text-decoration: none; font-weight: 700; margin-bottom: 6px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
label small { font-weight: 400; color: var(--muted); }

body { background: #f2f5f8; color: #182638; }
.top { height: 76px; border-bottom: 1px solid #d8e0e8; box-shadow: 0 1px 8px rgba(21, 45, 70, .06); }
.layout { grid-template-columns: 232px minmax(0, 1fr); }
nav { background: #102d49; padding: 24px 14px; }
nav a { border-radius: 5px; padding: 12px 15px; color: #dce7f2; letter-spacing: .01em; }
nav a.active { background: #fff; color: #123b61; box-shadow: 0 3px 12px rgba(0, 0, 0, .13); }
.content { padding: 34px 38px; }
.card { border-radius: 8px; border-color: #d9e1e9; box-shadow: 0 2px 10px rgba(25, 48, 72, .045); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.page-heading h1 { margin: 0 0 5px; font-size: 28px; letter-spacing: -.02em; }
.page-heading p, .muted { margin: 0; color: #647387; }
.period { background: #e8eef4; color: #294967; padding: 8px 12px; border-radius: 5px; font-weight: 700; white-space: nowrap; }
.filterbar { background: #fff; border: 1px solid #d9e1e9; border-radius: 8px; padding: 16px 18px; margin-bottom: 20px; }
.filterbar form { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; }
.filterbar label { min-width: 165px; }
.filterbar button, .filterbar .action { min-height: 40px; margin: 0; display: inline-flex; align-items: center; justify-content: center; }
.action.neutral { background: #edf1f5; color: #40556b; }
.kpis.five { grid-template-columns: repeat(5, minmax(145px, 1fr)); }
.kpis div { border-radius: 8px; border-top: 3px solid #315f87; box-shadow: 0 2px 8px rgba(25, 48, 72, .04); }
.kpis b { font-size: 24px; letter-spacing: -.02em; }
.champion { display: grid; grid-template-columns: 70px minmax(260px, 1fr) minmax(400px, 1.4fr); gap: 20px; align-items: center; color: #fff; background: linear-gradient(120deg, #102d49, #1d4f78); border-radius: 9px; padding: 24px 28px; margin-bottom: 22px; box-shadow: 0 8px 22px rgba(16, 45, 73, .18); }
.champion .rank-number { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font-size: 22px; font-weight: 800; }
.champion small { color: #bcd0e2; font-weight: 800; letter-spacing: .08em; }
.champion h2 { margin: 3px 0; font-size: 24px; }
.champion p { margin: 0; color: #dbe7f1; }
.champion-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.champion-metrics span { background: rgba(255,255,255,.09); border-radius: 5px; padding: 10px 12px; }
.champion-metrics b { display: block; font-size: 17px; }
.compact thead, .compact tbody { min-width: 620px; }
.score { display: inline-block; min-width: 48px; text-align: center; background: #e8f2fb; color: #174f7d; border-radius: 99px; padding: 4px 8px; font-weight: 800; }
.backlink { display: inline-block; margin-bottom: 8px; color: #4f6981; text-decoration: none; font-weight: 700; }
.details { display: grid; grid-template-columns: 155px 1fr; margin: 0; }
.details dt, .details dd { padding: 10px 0; border-bottom: 1px solid #e6ebf0; margin: 0; }
.details dt { color: #6a7889; font-weight: 700; }
.note-box { min-height: 160px; white-space: pre-wrap; background: #f5f7f9; border-left: 3px solid #315f87; padding: 16px; color: #31465b; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title h2 { margin: 0; }
.copy-button { background: #315f87; }
.summary-box { min-height: 360px; resize: vertical; font: 13px/1.55 Consolas, monospace; background: #f8fafc; color: #26394c; }
.release-card { border-left: 4px solid #315f87; }
.release-card > div { margin-bottom: 18px; }
.release-card h2 { margin-bottom: 6px; }
.pill.auto { background: #e7f4ed; color: #17633c; }
.wide { grid-column: 1 / -1; }
.gridform .checkline.wide { display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 12px 14px; background: #f2f6f9; border-radius: 6px; }
.gridform .checkline.wide input { width: auto; margin: 0; }
.status { display: inline-block; border-radius: 99px; padding: 5px 9px; background: #edf1f5; color: #4b5d70; font-size: 12px; font-weight: 800; }
.status.installed { background: #e7f4ed; color: #17633c; }
.status.downloaded, .status.offered { background: #e8f2fb; color: #174f7d; }
.status.failed { background: #fdeaea; color: #9a2727; }
.status.deferred { background: #fff5df; color: #8a5b00; }
.upload-status { position: relative; min-height: 42px; overflow: hidden; border: 1px solid #cfd9e3; border-radius: 6px; background: #f2f6f9; color: #294967; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.upload-status span { position: absolute; inset: 0 auto 0 0; background: #dcecf9; transition: width .2s ease; }
.upload-status b { position: relative; z-index: 1; }
.upload-status.error { border-color: #edb6b6; background: #fdeaea; color: #9a2727; padding: 10px; }
@media (max-width: 1200px) { .kpis.five { grid-template-columns: repeat(3, 1fr); } .champion { grid-template-columns: 60px 1fr; } .champion-metrics { grid-column: 1 / -1; } }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .content { padding: 20px; } .page-heading { align-items: flex-start; flex-direction: column; } .kpis.five { grid-template-columns: 1fr 1fr; } }