.premium-main {
  max-width: 820px;
}

.premium-in-app {
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

/* Topbar spacer above .premium-in-app holds the global action icons
   (admin, prefs gear, user avatar) so the Premium tab matches every
   other tab. The pricing card below is the real visual hero, so we
   zero out the spacer's bottom margin to avoid an empty gap. */
.premium-topbar-spacer {
  margin-bottom: 0;
}

.premium-in-app .legal-card {
  margin-bottom: 16px;
}

.premium-active-note {
  margin: 0 auto 12px;
  max-width: 38rem;
}

.premium-hero {
  text-align: center;
}

.premium-lead {
  margin: 0 auto 20px;
  max-width: 38rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.premium-pricing {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.premium-price-card {
  min-width: 140px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.premium-price-card:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  /* Yellow halo on hover, matching the persistent halo on the
     --best card. Both cards now get the same outline feedback
     when the user hovers; the --best card's hover halo (below)
     is one pixel thicker so the yearly plan still reads as the
     visual winner. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-1px);
}

.premium-price-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.premium-price-card:disabled {
  cursor: default;
  opacity: 0.55;
}

.premium-price-card strong {
  font-size: 1.6rem;
}

.premium-price-card span {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.premium-price-card em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--accent);
  margin-top: 4px;
}

.premium-price-card--best {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),
    0 0 8px color-mix(in srgb, var(--accent) 42%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 18%, transparent);
}

.premium-price-card--best:hover:not(:disabled) {
  /* 2px halo beats the monthly card's 1px hover halo, so the
     "best value" card stays one tier above in the visual
     hierarchy even when both are being hovered in sequence. */
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 50%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
}

.premium-pricing[hidden] {
  display: none !important;
}

.premium-feature-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 12px;
  color: var(--text-muted);
}

.premium-feature-list strong {
  color: var(--text);
}

.premium-compare td,
.premium-compare th {
  text-align: left;
}

.premium-nav-cta {
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
  color: #111 !important;
  font-weight: 650;
  text-decoration: none !important;
}

.premium-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark, var(--accent-strong)));
  color: var(--accent-text, #111);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 16px var(--accent-glow, transparent);
}

.premium-cta-btn:hover {
  filter: brightness(1.05);
}

.premium-cta-btn[hidden] {
  display: none !important;
}

.sidebar-top-actions .premium-cta-btn {
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  font-size: 0.78rem;
}

.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 8px 14px;
  text-align: center;
  font-size: 0.85rem;
  background: #3a2d00;
  color: #ffd866;
  border-bottom: 1px solid #665500;
}

.offline-banner[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .sidebar-top-actions .premium-cta-btn {
    font-size: 0.72rem;
    padding: 0 10px;
  }
}