/* Imagora unified navigation — public bar + app bar.
   One geometry, one type scale, one accent. Loaded after page CSS so it wins
   without id-scoped overrides. Tokens fall back to each page's own palette. */
:root {
  --igm-ui: Inter, "PingFang SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --igm-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --igm-display: Georgia, "Songti SC", serif;
  --igm-amber: #d9884a;
  --igm-amber-ink: #1b1008;
}
.igm-bar {
  --igm-h: 56px;
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  height: var(--igm-h);
  padding: 0 32px;
  border-bottom: 1px solid var(--igm-line, var(--line, #211c16));
  background: var(--igm-bar-bg, rgba(8, 7, 6, .92));
  backdrop-filter: saturate(1.15) blur(14px);
  -webkit-backdrop-filter: saturate(1.15) blur(14px);
}
.igm-bar--app {
  --igm-h: 48px;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: 0 20px;
}
.igm-bar a { text-decoration: none; }
.igm-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--igm-text, var(--text, #f5f0e6));
}
.igm-brand .mark {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217, 136, 74, .65);
  border-radius: 4px;
  color: #e69a58;
  font: 700 14px/1 var(--igm-ui);
}
.igm-brand b {
  font: 700 15px/1 var(--igm-display);
  letter-spacing: .01em;
  white-space: nowrap;
}
.igm-bar--app .igm-brand .mark { width: 22px; height: 22px; font-size: 12px; border-radius: 3px; }
.igm-bar--app .igm-brand b { font-size: 13px; }
.igm-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-width: 0;
}
.igm-links a {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  color: var(--igm-muted, var(--muted, #b8ae9e));
  font: 400 13px/1.3 var(--igm-ui);
  white-space: nowrap;
}
.igm-links a:hover { color: var(--igm-text, var(--text, #f5f0e6)); }
.igm-links a[aria-current="page"] {
  border-bottom-color: var(--igm-amber);
  color: var(--igm-text, var(--text, #f5f0e6));
}
.igm-modes {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--igm-line, var(--line, #211c16));
  border-radius: 3px;
  background: rgba(255, 255, 255, .02);
}
.igm-modes a {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 2px;
  color: var(--igm-muted, #b8ae9e);
  font: 500 12px/1 var(--igm-ui);
}
.igm-modes a:hover { color: var(--igm-text, #f5f0e6); }
.igm-modes a[aria-current="page"] {
  background: rgba(217, 136, 74, .14);
  color: var(--igm-amber);
  box-shadow: inset 0 0 0 1px rgba(217, 136, 74, .28);
}
.igm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.igm-actions--tools {
  padding-right: 12px;
  margin-right: 4px;
  border-right: 1px solid var(--igm-line, #211c16);
}
.igm-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--igm-line-2, var(--line-2, #332a21));
  border-radius: 2px;
  background: transparent;
  color: var(--igm-text, #f5f0e6);
  font: 500 13px/1 var(--igm-ui);
  white-space: nowrap;
  cursor: pointer;
}
.igm-btn:hover {
  border-color: rgba(217, 136, 74, .55);
  background: rgba(217, 136, 74, .08);
  color: var(--igm-amber);
}
.igm-btn--primary {
  border-color: var(--igm-amber);
  background: var(--igm-amber);
  color: var(--igm-amber-ink);
  font-weight: 600;
}
.igm-btn--primary:hover {
  border-color: #e0955a;
  background: #e0955a;
  color: var(--igm-amber-ink);
}
.igm-btn--sm { height: 30px; padding: 0 11px; font-size: 12px; }
.igm-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--igm-muted, #b8ae9e);
  cursor: pointer;
}
.igm-icon:hover { border-color: var(--igm-line-2, #332a21); color: var(--igm-text, #f5f0e6); }
.igm-chip {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--igm-line-2, #332a21);
  border-radius: 2px;
  background: rgba(255, 255, 255, .02);
  color: var(--igm-muted, #b8ae9e);
  font: 12px/1 var(--igm-ui);
  white-space: nowrap;
}
.igm-chip b { color: var(--igm-text, #f5f0e6); font: 600 12px/1 var(--igm-mono); }
.igm-chip:hover { border-color: rgba(217, 136, 74, .5); color: var(--igm-amber); }
[data-imagora-theme-toggle] .igm-sun { display: none; }
[data-imagora-theme-toggle][data-theme-state="light"] .igm-sun { display: block; }
[data-imagora-theme-toggle][data-theme-state="light"] .igm-moon { display: none; }

/* Light palette for pages that opt in via html.light. */
html.light .igm-bar { --igm-bar-bg: rgba(251, 250, 247, .92); }
html.light .igm-brand .mark { color: #a95520; border-color: rgba(169, 85, 32, .65); }

@media (max-width: 1080px) {
  .igm-links { gap: 18px; }
  .igm-bar { padding: 0 20px; gap: 16px; }
}
@media (max-width: 880px) {
  .igm-links { display: none; }
  .igm-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .igm-bar--app { grid-template-columns: auto minmax(0, 1fr) auto; }
  .igm-bar--app .igm-modes { display: none; }
}
@media (max-width: 560px) {
  .igm-bar { padding: 0 14px; }
  .igm-actions .igm-btn { padding: 0 11px; }
  .igm-actions .igm-btn--hide-sm { display: none; }
}

/* Shared site footer: one structure for every static page, matching the
   marketing footer's columns, type scale and bottom bar. */
.igm-footer {
  margin-top: 0;
  padding: 56px 0 40px;
  border-top: 1px solid var(--igm-line, var(--line, #211c16));
  background: var(--igm-footer-bg, var(--panel, #0e0d0b));
  color: var(--igm-muted, var(--muted, #b8ae9e));
  font: 400 13px/1.55 var(--igm-ui);
}
.igm-footer__inner {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
}
.igm-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.igm-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--igm-text, var(--text, #f5f0e6));
}
.igm-footer__brand .mark {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217, 136, 74, .65);
  border-radius: 4px;
  color: #e69a58;
  font: 700 14px/1 var(--igm-ui);
}
.igm-footer__brand b { font: 700 16px/1 var(--igm-display); }
.igm-footer__tagline {
  max-width: 300px;
  margin: 16px 0 0;
  color: var(--igm-dim, var(--dim, #7a7267));
  font-size: 13px;
  line-height: 1.55;
}
.igm-footer__label {
  color: var(--igm-dim, var(--dim, #7a7267));
  font: 400 9.5px/1 var(--igm-mono);
  letter-spacing: .22em;
}
.igm-footer ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.igm-footer ul a {
  color: var(--igm-muted, var(--muted, #b8ae9e));
  font-size: 13px;
  text-decoration: none;
}
.igm-footer ul a:hover { color: var(--igm-amber); }
.igm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--igm-line, var(--line, #211c16));
  color: var(--igm-dim, var(--dim, #7a7267));
  font: 400 10px/1 var(--igm-mono);
  letter-spacing: .18em;
}
.igm-footer__status { display: inline-flex; align-items: center; gap: 8px; }
.igm-footer__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--igm-amber);
}
html.light .igm-footer { --igm-footer-bg: #f4efe6; }
@media (max-width: 900px) {
  .igm-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .igm-footer__inner { width: calc(100% - 40px); }
}
@media (max-width: 560px) {
  .igm-footer__grid { grid-template-columns: 1fr; }
  .igm-footer { padding: 40px 0 32px; }
}

/* App bar lockdown. The three workspaces still carry their own header CSS
   (flex rows, fixed heights, ::after glows, !important inline rules). The
   unified bar owns geometry so the header can never reflow into a second row. */
.igm-bar.igm-bar--app {
  position: relative !important;
  top: auto !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 16px !important;
  background: var(--igm-bar-bg, #0b0a08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: none !important;
}
.igm-bar.igm-bar--app::after { display: none !important; content: none !important; }
.igm-bar.igm-bar--app > * { min-width: 0 !important; }
.igm-bar.igm-bar--app .igm-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.igm-bar.igm-bar--app .header-center,
.igm-bar.igm-bar--app .topMid,
.igm-bar.igm-bar--app .topActions { display: none !important; }

/* Hydration guard. The static export paints the logged-out links before the
   session resolves, then swaps them for the workspace links. Holding the
   logged-out pair back for the first two seconds removes that flash without
   touching React, without observers, and without shifting layout. */
@keyframes imagora-auth-reveal { from { opacity: 0; } to { opacity: 1; } }
header a[href="/login"], header a[href="/login/"],
header a[href="/register"], header a[href="/register/"] {
  animation: imagora-auth-reveal .01s linear 2.2s both;
}
@media (prefers-reduced-motion: reduce) {
  header a[href="/login"], header a[href="/login/"],
  header a[href="/register"], header a[href="/register/"] { animation: none; }
}
/* Wallet popover: same card geometry as every other surface, quick-buy packs
   laid out as a three-up grid instead of a wrapped strip of loose buttons. */
#walletPanel {
  width: min(360px, calc(100vw - 28px)) !important;
  padding: 16px !important;
  border: 1px solid var(--igm-line-2, #332a21) !important;
  border-radius: 3px !important;
  background: #0e0d0b !important;
  box-shadow: 0 24px 80px -32px rgba(0, 0, 0, .8) !important;
}
#walletPanel .pudrawBillingPacks {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 2px !important;
}
#walletPanel .pudrawBillingPacks .upload {
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  border: 1px solid var(--igm-line-2, #332a21) !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, .02) !important;
  color: var(--text1, #f5f0e6) !important;
  font: 500 12px/1.25 var(--igm-ui) !important;
  white-space: normal !important;
  text-align: center !important;
}
#walletPanel .pudrawBillingPacks .upload:hover {
  border-color: rgba(217, 136, 74, .55) !important;
  background: rgba(217, 136, 74, .08) !important;
  color: var(--igm-amber) !important;
}
/* Narrow viewports: the app bar keeps the brand, the wallet and the account
   entry; workspace-specific tool clusters move into the page itself. */
@media (max-width: 720px) {
  .igm-bar.igm-bar--app { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 8px !important; padding: 0 10px !important; }
  .igm-bar.igm-bar--app .igm-modes,
  .igm-bar.igm-bar--app .igm-actions--tools { display: none !important; }
  .igm-bar.igm-bar--app .igm-brand b { display: none; }
  .igm-bar.igm-bar--app .igm-chip { height: 28px !important; padding: 0 8px !important; font-size: 11px !important; }
  .igm-bar.igm-bar--app .igm-btn--sm { height: 28px !important; padding: 0 9px !important; font-size: 11px !important; }
}
/* Match the exported marketing header exactly: 16px wordmark and 32px CTAs
   on the 56px bar, 13px/28px on the 48px app bar. */
.igm-bar:not(.igm-bar--app) .igm-brand b { font-size: 16px; }
.igm-bar:not(.igm-bar--app) .igm-btn { height: 32px; padding: 0 14px; font-size: 12.5px; }
.igm-bar:not(.igm-bar--app) .igm-icon { width: 32px; height: 32px; }
.igm-bar--app .igm-btn { font-size: 12px; }