.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-bar-height);
  z-index: 30;
  background:
    radial-gradient(420px 180px at 10% 0%, var(--accent-left-glow), transparent 72%),
    radial-gradient(420px 180px at 90% 0%, var(--accent-right-glow), transparent 72%),
    linear-gradient(160deg, var(--panel-shell-1), var(--panel-shell-2));
  overflow: visible;
  isolation: isolate;
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--border-soft);
  animation: bar-rise 0.8s ease-out;
}

.top-bar::before,
.top-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--flag-url);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  pointer-events: none;
}

.top-bar::before {
  opacity: 1;
  mask-image: none;
}

.top-bar::after {
  opacity: 0;
  mask-image: none;
}

.top-accent {
  position: absolute;
  top: 0;
  height: calc(3px * var(--ui-scale));
  width: 36%;
  box-shadow: 0 0 14px var(--accent-glow);
  z-index: 3;
}

.left-accent {
  left: 0;
  background: linear-gradient(90deg, var(--accent-left), var(--accent-left-fade));
}

.right-accent {
  right: 0;
  background: linear-gradient(270deg, var(--accent-right), var(--accent-right-fade));
}

.top-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(26px * var(--ui-scale));
  gap: calc(24px * var(--ui-scale));
  position: relative;
  z-index: 2;
}

.top-left {
  display: flex;
  align-items: center;
  gap: calc(18px * var(--ui-scale));
}

.top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  flex-wrap: wrap;
  gap: calc(18px * var(--ui-scale));
  padding-right: calc(160px * var(--ui-scale));
}

.top-right .nation-block {
  align-items: flex-end;
  text-align: right;
}

.brand-logo {
  height: calc(48px * var(--ui-scale));
  width: auto;
  filter: drop-shadow(0 4px 10px var(--ink-alpha-35));
}

.nation-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(4px * var(--ui-scale));
  text-align: left;
  letter-spacing: calc(0.8px * var(--ui-scale));
}

.nation-name-row {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale));
  justify-content: flex-end;
}

.nation-name {
  font-size: calc(13px * var(--ui-scale));
  font-weight: 600;
}

.nation-date {
  font-size: calc(11px * var(--ui-scale));
  color: var(--muted);
  letter-spacing: calc(1.4px * var(--ui-scale));
}

.sync-status {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--ui-scale));
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: calc(1.1px * var(--ui-scale));
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  cursor: default;
}

.sync-dot {
  width: calc(8px * var(--ui-scale));
  height: calc(8px * var(--ui-scale));
  border-radius: 50%;
  background: var(--sync-ok);
  box-shadow: 0 0 8px var(--sync-ok);
}

.sync-text {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translate(calc(-8px * var(--ui-scale)), -50%);
  padding: calc(4px * var(--ui-scale)) calc(8px * var(--ui-scale));
  border-radius: calc(10px * var(--ui-scale));
  background: var(--panel-card-strong);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: calc(1.1px * var(--ui-scale));
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sync-status:hover .sync-text,
.sync-status:focus-within .sync-text {
  opacity: 1;
  transform: translate(calc(-10px * var(--ui-scale)), -50%);
}

.sync-status[data-sync-state="yellow"] {
  color: var(--sync-warn);
}

.sync-status[data-sync-state="yellow"] .sync-dot {
  background: var(--sync-warn);
  box-shadow: 0 0 8px var(--sync-warn);
}

.sync-status[data-sync-state="orange"] {
  color: var(--sync-issue);
}

.sync-status[data-sync-state="orange"] .sync-dot {
  background: var(--sync-issue);
  box-shadow: 0 0 8px var(--sync-issue);
}

.sync-status[data-sync-state="red"] {
  color: var(--sync-critical);
}

.sync-status[data-sync-state="red"] .sync-dot {
  background: var(--sync-critical);
  box-shadow: 0 0 8px var(--sync-critical);
}

.stat-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: calc(8px * var(--ui-scale)) calc(14px * var(--ui-scale));
}

.stat {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale));
  background: var(--panel-card);
  border: 1px solid var(--border-soft);
  border-radius: calc(12px * var(--ui-scale));
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
  font-size: calc(12px * var(--ui-scale));
  letter-spacing: calc(0.3px * var(--ui-scale));
  opacity: 0;
  transform: translateY(calc(-6px * var(--ui-scale)));
  animation: stat-in 0.6s ease-out forwards;
  animation-delay: var(--delay);
}

.currency-code {
  margin-left: calc(4px * var(--ui-scale));
  font-size: calc(10px * var(--ui-scale));
  letter-spacing: calc(1.4px * var(--ui-scale));
  color: var(--muted);
}

.stat-dropdown {
  position: relative;
  cursor: pointer;
}

.stat-dropdown:hover,
.stat-dropdown.open {
  background: linear-gradient(120deg, var(--accent-soft), var(--panel-soft));
  box-shadow: inset 0 0 0 1px var(--accent-strong);
}

.stat-pop {
  position: absolute;
  top: calc(100% + 8px * var(--ui-scale));
  right: 0;
  min-width: calc(220px * var(--ui-scale));
  padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));
  border-radius: calc(14px * var(--ui-scale));
  background: var(--panel-card-strong);
  border: 1px solid var(--border-soft);
  box-shadow: 0 18px 36px var(--ink-alpha-45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-6px * var(--ui-scale)));
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

.stat-dropdown.open .stat-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.stat-pop-row {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ui-scale));
  font-size: calc(11px * var(--ui-scale));
  color: var(--text);
  padding: calc(4px * var(--ui-scale)) 0;
}

.stat-pop-row img {
  width: calc(16px * var(--ui-scale));
  height: calc(16px * var(--ui-scale));
  flex: 0 0 auto;
}

.stat-pop-wide {
  min-width: calc(280px * var(--ui-scale));
}

.stat-pop-group + .stat-pop-group {
  margin-top: calc(10px * var(--ui-scale));
  padding-top: calc(8px * var(--ui-scale));
  border-top: 1px solid var(--border-soft);
}

.stat-pop .stats-group-title {
  margin-bottom: calc(8px * var(--ui-scale));
}

.stat img {
  width: calc(18px * var(--ui-scale));
  height: calc(18px * var(--ui-scale));
}

.stat-value {
  font-weight: 600;
  color: var(--accent-left);
}

.brand-logo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@keyframes bar-rise {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes stat-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flag-dither {
  0% {
    background-size: 160px 100%;
  }
  50% {
    background-size: 220px 100%;
  }
  100% {
    background-size: 160px 100%;
  }
}