/* Top navigation bar - shared across landing, catalog, design view, profile */

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(20, 20, 20, 0.97);
  border-bottom: 1px solid #181818;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Push page content below the fixed nav on all pages that use it */
body:has(.top-nav) {
  padding-top: 60px;
}

.top-nav-inner {
  padding: 0 2rem;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.top-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.top-nav-logo img {
  height: 30px;
  width: auto;
}

/* Nav links */
.top-nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
}

.top-nav-link {
  color: #555;
  text-decoration: none;
  font-size: 0.825rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.top-nav-link:hover,
.top-nav-link.active {
  color: #d8d8d8;
  background: #181818;
}

/* Pro signpost in the left nav cluster. A quiet wayfinding link, not a CTA:
   muted magenta at rest (Pro palette — gold is reserved for Supporter),
   brightens on hover. Mirrors .nav-dropdown-pro so the two read as one promo. */
/* Pro signpost: identical to sibling links at rest (inherits .top-nav-link's
   colour); the magenta Pro accent only surfaces on hover/active. */
.top-nav-link--pro:hover,
.top-nav-link--pro.active {
  color: #fbe3f3;
  background: linear-gradient(90deg,
    rgba(210, 90, 195, 0.16) 0%,
    rgba(210, 90, 195, 0.06) 100%);
}

/* Designer dropdown (division vs tank) */
.nav-designer-menu {
  position: relative;
}

button.top-nav-link.nav-designer-trigger {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-designer-chevron {
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s;
}

.nav-designer-trigger[aria-expanded="true"] .nav-designer-chevron {
  transform: rotate(180deg);
  opacity: 0.85;
}

.nav-designer-dropdown {
  left: 0;
  right: auto;
  min-width: 188px;
}

.nav-dropdown-item.is-current {
  color: #c8a96e;
  background: rgba(200, 169, 110, 0.08);
}

.nav-dropdown-item.is-current:hover {
  color: #d9be8a;
  background: rgba(200, 169, 110, 0.12);
}

/* Auth section */
.top-nav-auth {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Library - icon + label beside avatar (signed-in only) */
.top-nav-library-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  color: #555;
  text-decoration: none;
  font-size: 0.825rem;
  font-weight: 500;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.top-nav-library-link:hover {
  color: #d8d8d8;
  background: #181818;
}

.top-nav-library-link.is-current {
  color: #c8a96e;
  background: rgba(200, 169, 110, 0.1);
}

.top-nav-library-svg {
  display: block;
  flex-shrink: 0;
}

.top-nav-library-label {
  line-height: 1;
  white-space: nowrap;
}

/* Designer pages: save horizontal space - icon only, tight to avatar */
.top-nav-library-link--icon-only {
  gap: 0;
  padding: 0.35rem;
  min-width: 32px;
  min-height: 32px;
}

.top-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.top-nav-btn-ghost {
  background: transparent;
  color: #555;
  border: 1px solid #222;
}

.top-nav-btn-ghost:hover {
  color: #d8d8d8;
  background: #181818;
  border-color: #2e2e2e;
}

.top-nav-btn-primary {
  background: #c8a96e;
  color: #141414;
  font-weight: 600;
}

.top-nav-btn-primary:hover {
  opacity: 0.88;
}

/* Avatar */
.top-nav-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #222;
  text-decoration: none;
  transition: border-color 0.15s;
}

.top-nav-avatar:hover {
  border-color: #c8a96e;
}

/* Magenta avatar ring - the logged-in user is Pro. Distinct from gold accents
   on the rest of the site so Pro reads as its own brand at a glance. */
.top-nav-avatar.user-avatar--pro {
  border: 1px solid rgba(210, 90, 195, 0.48);
  box-shadow:
    0 0 0 1px rgba(40, 8, 22, 0.78) inset,
    0 0 15px rgba(205, 75, 185, 0.18),
    0 0 1px rgba(240, 195, 225, 0.28);
}

.top-nav-avatar.user-avatar--pro:hover {
  border-color: rgba(225, 145, 210, 0.62);
  box-shadow:
    0 0 0 1px rgba(40, 8, 22, 0.72) inset,
    0 0 22px rgba(215, 110, 195, 0.28),
    0 0 1px rgba(245, 205, 230, 0.42);
}

.top-nav-avatar.user-avatar--pro .avatar-initials {
  color: #ecc5dc;
  background: linear-gradient(160deg, #360e34 0%, #1c0a1a 100%);
}

/* Blue avatar ring - applied when the logged-in user is a Supporter tier. */
.top-nav-avatar.user-avatar--supporter {
  border: 1px solid rgba(100, 190, 255, 0.5);
  box-shadow:
    0 0 0 1px rgba(8, 20, 36, 0.75) inset,
    0 0 18px rgba(45, 150, 255, 0.22),
    0 0 1px rgba(160, 220, 255, 0.35);
}

.top-nav-avatar.user-avatar--supporter:hover {
  border-color: rgba(140, 210, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(8, 20, 36, 0.7) inset,
    0 0 24px rgba(60, 160, 255, 0.28),
    0 0 1px rgba(180, 230, 255, 0.45);
}

.top-nav-avatar.user-avatar--supporter .avatar-initials {
  color: #8ec8f0;
  background: linear-gradient(160deg, #1f3045 0%, #162536 100%);
}

/* Supporter glow preview animation - one-time nudge for non-supporters */
@keyframes avatar-supporter-preview-pulse {
  0%   { border-color: #222; box-shadow: none; }
  40%  { border-color: rgba(100, 190, 255, 0.6); box-shadow: 0 0 0 1px rgba(8, 20, 36, 0.75) inset, 0 0 20px rgba(45, 150, 255, 0.35), 0 0 1px rgba(160, 220, 255, 0.5); }
  60%  { border-color: rgba(100, 190, 255, 0.6); box-shadow: 0 0 0 1px rgba(8, 20, 36, 0.75) inset, 0 0 20px rgba(45, 150, 255, 0.35), 0 0 1px rgba(160, 220, 255, 0.5); }
  100% { border-color: rgba(100, 190, 255, 0.5); box-shadow: 0 0 0 1px rgba(8, 20, 36, 0.75) inset, 0 0 18px rgba(45, 150, 255, 0.22), 0 0 1px rgba(160, 220, 255, 0.35); }
}

@media (prefers-reduced-motion: no-preference) {
  .top-nav-avatar.avatar-supporter-preview {
    animation: avatar-supporter-preview-pulse 1.2s ease-out forwards;
  }
}

.top-nav-avatar.avatar-supporter-preview {
  border-color: rgba(100, 190, 255, 0.5);
  box-shadow:
    0 0 0 1px rgba(8, 20, 36, 0.75) inset,
    0 0 18px rgba(45, 150, 255, 0.22),
    0 0 1px rgba(160, 220, 255, 0.35);
}

/* Supporter avatar nudge popover */
#supporter-avatar-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: #141414;
  border: 1px solid rgba(100, 190, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(45, 150, 255, 0.1);
  padding: 16px;
  z-index: 201;
  animation: popover-fade-in 0.25s ease-out;
}


@keyframes popover-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sup-popover-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #444;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}

.sup-popover-dismiss:hover {
  color: #888;
}

.sup-popover-header {
  margin-bottom: 12px;
  padding-right: 16px;
}

.sup-popover-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sup-popover-title {
  font-size: 13px;
  font-weight: 700;
  color: #e0e0e0;
  letter-spacing: 0.01em;
}

.sup-popover-sub {
  font-size: 11px;
  color: #8ec8f0;
}

.sup-popover-line1 {
  margin: 0 0 12px;
  font-size: 11px;
  color: #777;
  line-height: 1.5;
}

.sup-popover-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #c8e8ff;
  text-decoration: none;
  background: rgba(45, 150, 255, 0.10);
  border: 1px solid rgba(100, 190, 255, 0.35);
  border-radius: 4px;
  padding: 8px 12px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sup-popover-cta:hover {
  background: rgba(45, 150, 255, 0.18);
  border-color: rgba(130, 210, 255, 0.55);
  text-decoration: none;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  font-size: 0.72rem;
  font-weight: 600;
  color: #c8a96e;
  background: #181818;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* User dropdown */
.nav-user-menu {
  position: relative;
}

.nav-user-trigger {
  background: none;
  border: 1px solid #222;
  cursor: pointer;
  padding: 0;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #141414;
  border: 1px solid #222;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 200;
  overflow: hidden;
}

.nav-dropdown-user {
  padding: 0.65rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-dropdown-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #d8d8d8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-dropdown-tier {
  margin-top: 0.2rem;
}

.nav-tier-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  width: fit-content;
  text-decoration: none;
  box-sizing: border-box;
}

.nav-tier-badge--free {
  color: #666;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2a2a2a;
}

/* Pro mode - magenta/crimson power badge. Built to read as more premium than
   the gold accents elsewhere on the site (which double as Supporter highlights
   in some surfaces). Mirrors the Supporter shine treatment in a hotter palette. */
.nav-tier-badge--pro {
  position: relative;
  letter-spacing: 0.14em;
  color: #f2cae8;
  text-shadow:
    0 0 12px rgba(210, 90, 195, 0.5),
    0 1px 0 rgba(20, 4, 12, 0.85);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg, #3c1640 0%, #62205a 28%, #4a1746 55%, #310d30 100%);
  border: 1px solid rgba(210, 90, 195, 0.5);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45) inset,
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(205, 75, 185, 0.22),
    0 0 1px rgba(255, 180, 245, 0.4);
  overflow: hidden;
}

.nav-tier-badge--supporter {
  position: relative;
  color: #c8e8ff;
  text-shadow:
    0 0 10px rgba(80, 170, 255, 0.35),
    0 1px 0 rgba(0, 20, 40, 0.85);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg, #152a42 0%, #1c3d5e 45%, #0f2840 100%);
  border: 1px solid rgba(100, 190, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 1px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

a.nav-tier-badge--supporter:hover {
  color: #dff4ff;
  border-color: rgba(130, 210, 255, 0.55);
}

a.nav-tier-badge--supporter:focus-visible {
  outline: 2px solid rgba(120, 200, 255, 0.65);
  outline-offset: 2px;
}

.nav-dropdown-username {
  font-size: 0.7rem;
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-dropdown-divider {
  height: 1px;
  background: #1e1e1e;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.8rem;
  color: #888;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  box-sizing: border-box;
}

.nav-dropdown-item:hover {
  background: #1a1a1a;
  color: #d8d8d8;
}

.nav-dropdown-signout:hover {
  color: #c0392b;
}

.nav-dropdown-supporter {
  color: #a08050;
}

.nav-dropdown-supporter:hover {
  color: #c8a96e;
}

.nav-dropdown-supporter svg {
  color: #c8a96e;
  opacity: 0.7;
}

/* Anchored to the PRO badge palette (.pro-hero-badge). Muted resting state
   mirrors how .nav-dropdown-supporter handles its gold pair (#a08050 →
   #c8a96e on hover) — both promos sit quiet at rest, brighten on hover. */
.nav-dropdown-pro {
  color: #9a6685;
}

/* In the designer logo dropdown, the Pro item reads like the other links at rest
   (matching the outside-designer .top-nav-link--pro pattern) and only shows the
   purple accent on hover. :not(:hover) keeps the .nav-dropdown-pro:hover rule winning. */
#logo-menu-dropdown .nav-dropdown-pro:not(:hover) {
  color: #888;
}

.nav-dropdown-pro:hover {
  background: linear-gradient(90deg,
    rgba(210, 90, 195, 0.14) 0%,
    rgba(210, 90, 195, 0.06) 100%);
  color: #fbe3f3;
  box-shadow: inset 2px 0 0 rgba(210, 90, 195, 0.7);
}

.nav-dropdown-pro svg {
  color: #9a6685;
  opacity: 0.85;
}

.nav-dropdown-pro:hover svg {
  color: #f2cae8;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(225, 110, 210, 0.5));
}

/* Notification badge on avatar */
.nav-notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #e53e3e;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  border-radius: 7px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
}

.nav-notif-badge.is-visible {
  display: flex;
}

/* Notification section in dropdown */
.nav-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.9rem;
}

.nav-notif-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-notif-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #e53e3e;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  border-radius: 7px;
  line-height: 1;
  box-sizing: border-box;
}

.nav-notif-mark-read {
  font-size: 0.65rem;
  color: #444;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s;
  padding: 0;
}

.nav-notif-mark-read:hover {
  color: #888;
}

.nav-notif-item {
  font-size: 0.75rem;
  line-height: 1.4;
  align-items: flex-start;
  white-space: normal;
  min-width: 200px;
  max-width: 260px;
}

.nav-notif-text {
  display: block;
}

.nav-notif-actor {
  color: #d8d8d8;
  font-weight: 600;
}

.nav-notif-item em {
  color: #c8a96e;
  font-style: normal;
}

.nav-notif-unread {
  background: rgba(52, 148, 124, 0.06);
}

.nav-notif-unread:hover {
  background: rgba(52, 148, 124, 0.11);
}

.nav-notif-loading,
.nav-notif-empty {
  padding: 0.5rem 0.9rem;
  font-size: 0.72rem;
  color: #444;
}

/* Hamburger button (hidden on desktop) */
.top-nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.top-nav-hamburger:hover {
  color: #d8d8d8;
  background: #181818;
}

.nav-hamburger-close {
  display: none;
}

.top-nav-hamburger[aria-expanded="true"] .nav-hamburger-icon {
  display: none;
}

.top-nav-hamburger[aria-expanded="true"] .nav-hamburger-close {
  display: block;
}

/* Mobile nav panel (hidden by default) */
.top-nav-mobile-menu {
  display: none;
  flex-direction: column;
  border-top: 1px solid #181818;
  padding: 0.4rem 0;
}

.top-nav-mobile-link {
  padding: 0.7rem 1.25rem;
  color: #888;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}

.top-nav-mobile-link:hover,
.top-nav-mobile-link.active {
  background: #181818;
  color: #d8d8d8;
}

/* Pro signpost in the mobile menu — plain at rest, magenta accent on hover/active. */
.top-nav-mobile-link--pro:hover,
.top-nav-mobile-link--pro.active {
  color: #fbe3f3;
  background: linear-gradient(90deg,
    rgba(210, 90, 195, 0.16) 0%,
    rgba(210, 90, 195, 0.06) 100%);
}

/* Grouped section (designers) — visually separate from sibling links. Mirrors
 * `.logo-menu-designers` in the in-designer logo dropdown. */
.top-nav-mobile-group {
  display: flex;
  flex-direction: column;
  margin: 0.4rem 0.75rem 0.2rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #222;
  overflow: hidden;
}

.top-nav-mobile-group-label {
  padding: 0.45rem 0.85rem 0.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6a6a6a;
}

.top-nav-mobile-link--grouped {
  padding-left: 0.85rem;
}

/* Mobile */
@media (max-width: 600px) {
  .top-nav-links {
    display: none;
  }

  .top-nav-inner {
    gap: 0.5rem;
    padding: 0 1.25rem;
  }

  .top-nav-auth {
    margin-left: auto;
  }

  .top-nav-hamburger {
    display: flex;
  }

  .top-nav:has(.top-nav-mobile-menu.is-open) {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
    box-shadow:
      0 18px 48px rgba(0, 0, 0, 0.55),
      0 8px 20px rgba(0, 0, 0, 0.4);
  }

  .top-nav-mobile-menu.is-open {
    display: flex;
    background: #141414;
    border-top: 1px solid #252525;
    padding: 0.45rem 0 0.55rem;
  }
}

/* ==========================================================================
   Publish modal
   ========================================================================== */

.publish-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 1rem;
}

.publish-overlay[hidden] {
  display: none;
}

.publish-overlay.publish-overlay-visible {
  opacity: 1;
}

.publish-modal {
  background: #1a1a1a;
  border: 1px solid #222;
  border-radius: 6px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.publish-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid #1e1e1e;
}

.publish-modal-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ebebeb;
  margin: 0;
  letter-spacing: -0.02em;
}

.publish-modal-close {
  background: none;
  border: none;
  color: #444;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: color 0.15s;
}

.publish-modal-close:hover {
  color: #d8d8d8;
}

.publish-form {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.publish-form[hidden],
.publish-modal-header[hidden] {
  display: none;
}

.publish-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Tag pills */
.publish-tags-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  background: #141414;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  min-height: 38px;
  cursor: text;
  transition: border-color 0.15s;
}

.publish-tags-container:focus-within {
  border-color: #c8a96e;
}

.publish-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  color: #d8d8d8;
  font-size: 0.75rem;
  padding: 0.18rem 0.45rem;
  line-height: 1;
  white-space: nowrap;
}

.publish-tag-pill[data-tag="challenge"]     { color: #e8c060; border-color: rgba(232, 192, 96,  0.4); }
.publish-tag-pill[data-tag="showcase"]      { color: #6bbf8a; border-color: rgba(107, 191, 138, 0.4); }
.publish-tag-pill[data-tag="rate my build"] { color: #6699cc; border-color: rgba(102, 153, 204, 0.4); }
.publish-tag-pill[data-tag="help wanted"]   { color: #cc7060; border-color: rgba(204, 112, 96,  0.4); }
.publish-tag-pill[data-tag="meta"]          { color: #9977bb; border-color: rgba(153, 119, 187, 0.4); }

.publish-tag-remove {
  background: none;
  border: none;
  color: #444;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.publish-tag-remove:hover {
  color: #d8d8d8;
}

.publish-tags-input {
  background: none;
  border: none;
  outline: none;
  color: #d8d8d8;
  font-family: inherit;
  font-size: 0.875rem;
  flex: 1;
  min-width: 80px;
  padding: 0.1rem 0.25rem;
}

.publish-tags-input::placeholder {
  color: #333;
}

.publish-tags-add {
  background: none;
  border: none;
  color: #555;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
  transition: color 0.15s;
  flex-shrink: 0;
}

.publish-tags-add:hover {
  color: #c8a96e;
}

.publish-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.publish-required {
  color: #c8a96e;
}

.publish-input,
.publish-textarea {
  background: #141414;
  border: 1px solid #222;
  border-radius: 4px;
  color: #d8d8d8;
  font-size: 0.875rem;
  padding: 0.55rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s;
}

.publish-input:focus,
.publish-textarea:focus {
  outline: none;
  border-color: #c8a96e;
}

.publish-input::placeholder,
.publish-textarea::placeholder {
  color: #333;
}

.publish-textarea {
  resize: vertical;
  min-height: 90px;
}

/* Type picker */
.publish-type-picker {
  display: flex;
  gap: 1px;
  background: #111;
  border: 1px solid #222;
  border-radius: 4px;
  overflow: hidden;
}

.publish-type-option {
  flex: 1;
  padding: 0.45rem 0.5rem;
  background: #141414;
  border: none;
  color: #555;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: center;
}

.publish-type-option:hover {
  background: #1a1a1a;
  color: #888;
}

.publish-type-option.is-active {
  background: #1e1e1e;
  color: #c8a96e;
}

/* Tag input autocomplete */
.publish-tags-field-wrapper {
  position: relative;
}

.publish-tags-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 10;
  max-height: 180px;
  overflow-y: auto;
}

.publish-ac-item {
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  color: #666;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.publish-ac-item:hover,
.publish-ac-item.is-focused {
  background: #222;
  color: #d8d8d8;
}

.publish-ac-item mark {
  background: none;
  color: #c8a96e;
  font-weight: 600;
}

/* Tag suggestions */
.publish-tag-suggestions {
  margin-top: 0.5rem;
}

.publish-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.publish-suggestion-chip {
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 3px;
  color: #444;
  font-family: inherit;
  font-size: 0.72rem;
  padding: 0.18rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  line-height: 1.4;
}

.publish-suggestion-chip:hover {
  border-color: #2a2a2a;
  color: #888;
}

.publish-suggestion-chip.is-selected {
  background: rgba(200, 169, 110, 0.08);
  border-color: rgba(200, 169, 110, 0.3);
  color: #c8a96e;
}

.publish-suggestion-chip.is-category {
  border-color: #2a2520;
  color: #6b5e4a;
}

.publish-suggestion-chip.is-category:hover {
  border-color: rgba(200, 169, 110, 0.3);
  color: #a8895a;
}

.publish-suggestion-chip.is-category.is-selected {
  background: rgba(200, 169, 110, 0.1);
  border-color: rgba(200, 169, 110, 0.45);
  color: #c8a96e;
}

.publish-suggestion-chip[data-tag="showcase"] { color: #6bbf8a; border-color: rgba(107, 191, 138, 0.35); }
.publish-suggestion-chip[data-tag="showcase"]:hover { color: #88d4a4; border-color: rgba(107, 191, 138, 0.55); }
.publish-suggestion-chip[data-tag="showcase"].is-selected { background: rgba(107, 191, 138, 0.1); border-color: rgba(107, 191, 138, 0.55); color: #88d4a4; }

.publish-suggestion-chip[data-tag="rate my build"] { color: #6699cc; border-color: rgba(102, 153, 204, 0.35); }
.publish-suggestion-chip[data-tag="rate my build"]:hover { color: #88b2dd; border-color: rgba(102, 153, 204, 0.55); }
.publish-suggestion-chip[data-tag="rate my build"].is-selected { background: rgba(102, 153, 204, 0.1); border-color: rgba(102, 153, 204, 0.55); color: #88b2dd; }

.publish-suggestion-chip[data-tag="help wanted"] { color: #cc7060; border-color: rgba(204, 112, 96, 0.35); }
.publish-suggestion-chip[data-tag="help wanted"]:hover { color: #dd8878; border-color: rgba(204, 112, 96, 0.55); }
.publish-suggestion-chip[data-tag="help wanted"].is-selected { background: rgba(204, 112, 96, 0.1); border-color: rgba(204, 112, 96, 0.55); color: #dd8878; }

.publish-suggestion-chip[data-tag="meta"] { color: #9977bb; border-color: rgba(153, 119, 187, 0.35); }
.publish-suggestion-chip[data-tag="meta"]:hover { color: #b094cc; border-color: rgba(153, 119, 187, 0.55); }
.publish-suggestion-chip[data-tag="meta"].is-selected { background: rgba(153, 119, 187, 0.1); border-color: rgba(153, 119, 187, 0.55); color: #b094cc; }

.publish-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #888;
  font-size: 0.875rem;
  cursor: pointer;
}

.publish-checkbox-label input[type="checkbox"] {
  accent-color: #c8a96e;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.publish-hint {
  color: #444;
  font-size: 0.78rem;
}


.publish-error {
  background: rgba(180, 60, 60, 0.15);
  border: 1px solid rgba(180, 60, 60, 0.4);
  border-radius: 3px;
  color: #e07070;
  font-size: 0.85rem;
  padding: 0.6rem 0.8rem;
}

.publish-error[hidden] {
  display: none;
}

.publish-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.publish-success {
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.publish-success[hidden] {
  display: none;
}

.publish-success-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(200, 169, 110, 0.1);
  border: 1px solid rgba(200, 169, 110, 0.3);
  color: #c8a96e;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.publish-success-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.publish-success-msg {
  color: #ebebeb;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.publish-success-sub {
  color: #555;
  font-size: 0.825rem;
  margin: 0;
}

.publish-success-actions {
  display: flex;
  gap: 0.75rem;
}

#publish-success-link,
.publish-success-actions a.hoi4-btn {
  text-decoration: none;
}

.publish-email-nudge {
  width: 100%;
  border-top: 1px solid #222;
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.publish-email-nudge-msg {
  color: #555;
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.4;
}

.publish-email-nudge-actions {
  display: flex;
  justify-content: center;
}

.publish-email-nudge-cta {
  font-size: 0.8rem;
  color: #c8a96e;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.publish-email-nudge-cta:hover {
  text-decoration: underline;
}

@media (max-width: 500px) {
  .publish-row {
    flex-direction: column;
  }

  .publish-success-actions {
    flex-direction: column;
    width: 100%;
  }

  .publish-success-actions .hoi4-btn {
    width: 100%;
    text-align: center;
  }
}

/* ── Supporter catalog nudge (publish success + comment) ────────────────── */

.sup-catalog-nudge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.875rem;
  margin-bottom: 0.875rem;
  padding: 0.55rem 0.7rem;
  background: rgba(15, 40, 64, 0.45);
  border: 1px solid rgba(100, 190, 255, 0.16);
  border-radius: 6px;
  flex-wrap: wrap;
}

.sup-catalog-nudge-text {
  flex: 1;
  min-width: 0;
  font-size: 0.775rem;
  color: #7aaabf;
  line-height: 1.4;
}

.sup-catalog-nudge-cta {
  font-size: 0.75rem;
  font-weight: 600;
  color: #c8e8ff;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.8;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.sup-catalog-nudge-cta:hover {
  opacity: 1;
}