/* ── Header ─────────────────────────────────────────────────────────────────── */
.site-header {
  flex-shrink: 0;
  height: 52px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.header-logo  { height: 30px; width: auto; display: block; }
.header-divider { width: 1px; height: 28px; background: rgba(255,255,255,.25); flex-shrink: 0; }
.header-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.header-progress { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hp-texts        { display: flex; flex-direction: column; gap: 3px; }
.hp-text         { font-size: 11px; font-weight: 600; opacity: .85; }
.hp-track        { height: 8px; background: rgba(255,255,255,.2); border-radius: 4px; overflow: hidden; }
#progress-fill   { height: 100%; background: #60d394; border-radius: 4px; width: 0%; transition: width .5s ease; }
#counted-fill    { height: 100%; background: #5ab8e5; border-radius: 4px; width: 0%; transition: width .5s ease; }
#last-update     { font-size: 11px; opacity: .65; margin-left: auto; white-space: nowrap; }

/* Recount badge */
.recount-badge {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: transparent;
  color: #fff;
  border: 3px solid #60d394;
  padding: 5px 16px;
  border-radius: 5px;
  white-space: nowrap;
}

/* Sort toggle */
.sort-toggle { display: flex; gap: 2px; margin-left: auto; background: rgba(255,255,255,.12); border-radius: 6px; padding: 2px; }
.sort-opt { cursor: pointer; display: flex; align-items: center; }
.sort-opt input { display: none; }
.sort-opt span { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 5px; color: rgba(255,255,255,.55); transition: background .15s, color .15s; white-space: nowrap; }
.sort-opt input:checked + span { background: rgba(255,255,255,.2); color: #fff; }