:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #15323a;
  --muted: #5f7178;
  --line: #000000;
  /* Brand palette shared with VirtuaMakers */
  --green: #61a138;
  --green-deep: #3f7024;
  --green-soft: #eaf3e2;
  --teal: #167082;
  --teal-deep: #01566b;
  --accent: var(--teal);
  --accent-soft: #e7f1f1;
  /* The vivid blue used in the Agora shape-render images (cylinders,
     spheres, cubes, pyramids) */
  --blue: #2b57d6;
  --blue-deep: #1e3f9e;
  --blue-light: #4d8df0;
  --blue-soft: #e5eefc;
  --radius: 14px;
  --maxw: 960px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.brand-globe {
  font-size: 1rem;
}

.word-agor {
  color: #224587;
}

.word-a {
  color: var(--teal);
}

.word-virtua {
  color: var(--green);
}

.word-makers {
  color: var(--teal);
}

.back-link {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--text);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Pins this flush to the row's right edge even when .site-header wraps
     it onto its own line below .brand on narrow viewports - without this,
     a lone flex item on a wrapped line sits at flex-start under
     justify-content: space-between, not flex-end, which left the search
     icon short of the true right edge and made .header-search-panel's
     right: 0 anchor overflow off the left side of the screen. */
  margin-left: auto;
}

.auth-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Site search (Chris, 2026-08-15) - collapsed to a single icon in the
   header's normal flex flow, so it never crowds the header row itself;
   the expanded input+results panel is absolutely positioned to float
   over the page instead, same floating-panel approach as
   .notification-toast. */
.header-search {
  position: relative;
}

.header-search-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: min(320px, calc(100vw - 2.4rem));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
  padding: 0.8rem;
  z-index: 150;
}

.header-search-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.9rem;
}

.header-search-results {
  max-height: 320px;
  overflow-y: auto;
}

.header-search-results:not(:empty) {
  margin-top: 0.6rem;
}

.search-group-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0.6rem 0 0.3rem;
}

.search-group-heading:first-child {
  margin-top: 0;
}

.search-result {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
  transition: background 0.15s ease;
}

.search-result:hover {
  background: var(--accent-soft);
}

.header-search-empty {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.2rem 0.3rem;
}

.auth-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.auth-link:hover {
  color: var(--text);
}

.signin-emoji {
  display: inline-block;
}

/* Unicode has no gray/metallic skin-tone modifier, so the "AI" stop in
   emoji-cycle.js's rotation reuses the base ✍️ glyph and fakes a
   steel-gray look with a filter - color filters (unlike `color` itself)
   do affect color-glyph emoji, since they operate on rendered pixels. */
.signin-emoji--ai {
  filter: grayscale(1) brightness(1.2) contrast(1.05) drop-shadow(0 0 1px rgba(120, 140, 160, 0.7));
}

.auth-email {
  color: var(--muted);
  font-size: 0.9rem;
  margin-right: 0.6rem;
  text-decoration: none;
  cursor: pointer;
}

.auth-email:hover {
  color: var(--text);
  text-decoration: underline;
}

/* The header's "Profile 🙂" link is now the actual click target - a
   static name should read as plain text, not a dead-looking link. */
.auth-email-static {
  cursor: default;
}

.auth-email-static:hover {
  color: var(--muted);
  text-decoration: none;
}

.header-communiques {
  font-size: 1rem;
  opacity: 0.35;
  cursor: default;
  user-select: none;
}

.hero-signin {
  text-align: center;
  font-size: 2rem;
  margin: 0.6rem 0 5rem;
  min-height: 4rem;
}

.hero-signin .auth-link {
  font-size: inherit;
}

.hero-signin .hero-welcome-line {
  display: block;
  margin: 0 0 0.2rem;
}

.hero-signin .auth-email {
  font-size: inherit;
  font-weight: 700;
  margin-right: 0;
}

.hero-signin #agora-hero-signout-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
}

.signin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 20, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.signin-modal-backdrop[hidden] {
  display: none;
}

.signin-modal {
  position: relative;
  width: min(360px, 100%);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
}

.signin-modal h2 {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1.2rem;
}

.signin-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.signin-modal-close:hover {
  color: var(--text);
}

.signin-providers {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.signin-provider-btn {
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.signin-provider-btn:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.signin-divider {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 1rem 0;
}

.signin-divider::before,
.signin-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--line);
}

.signin-divider span {
  padding: 0 0.7rem;
}

.signin-email-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.signin-email-form input {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
}

.password-field-wrap {
  position: relative;
}

.password-field-wrap input {
  width: 100%;
  padding-right: 2.5rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.2rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--text);
}

.signin-error {
  color: #c0392b;
  font-size: 0.85rem;
}

.signin-error.signin-success {
  color: var(--teal);
}

.signin-forgot-password {
  text-align: right;
  margin: -0.2rem 0 0;
}

.signin-forgot-password .auth-link {
  font-size: 0.82rem;
}

.signin-submit-btn {
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: none;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.signin-submit-btn:hover {
  opacity: 0.9;
}

.signin-toggle {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.signin-terms-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}

.signin-terms-check[hidden] {
  display: none;
}

.signin-terms-check input[type="checkbox"] {
  margin-top: 0.2rem;
}

.signin-terms-check a {
  color: var(--teal);
  text-decoration: underline;
}

.signin-fine-print {
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.8rem;
}

.signin-fine-print a {
  color: var(--muted);
  text-decoration: underline;
}

/* Layout */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero {
  padding: 3rem 0 3.5rem;
}

.page-logo {
  display: block;
  width: min(520px, 90vw);
  height: auto;
  margin: 0.5rem auto 1.4rem;
}

#exchange-welcome .page-logo {
  margin-bottom: 3.5625rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 1.1rem;
}

.hero-tagline {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (max-width: 640px) {
  /* In portrait, "Agora 🌐" eats enough width on the first line that the
     tagline after it wraps mid-phrase ("...intelligence" / "platform").
     Dropping the tagline to its own line and shrinking it slightly keeps
     "A social intelligence platform" together on one line instead. */
  .hero-tagline {
    display: block;
    font-size: 0.42em;
    margin-top: 0.2rem;
  }
}

.lede {
  font-size: 1.18rem;
  color: var(--muted);
  max-width: 38rem;
}

.hero-fine {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 42rem;
  margin-top: 1rem;
}

.feature-grid {
  margin-top: 2.2rem;
}

.card.feature {
  padding: 0.9rem;
}

/* aspect-ratio + object-fit:contain keeps every feature tile's image the
   same height (and centered within that box) regardless of the source
   image's native aspect ratio, so captions line up across the row even
   when one tile's artwork isn't a perfect square like the others. */
.feature-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
}

a.card.feature {
  display: block;
  text-decoration: none;
  color: inherit;
}

.feature-caption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}

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

/* Sections */
.section {
  padding: 3rem 0;
  border-top: 1px solid var(--line);
}

/* When a .section is the very first thing under <main>, it sits directly
   against the sticky header's own border-bottom - drawing this section's
   border-top too doubles up into two adjacent lines at different widths. */
main > .section:first-child {
  border-top: none;
}

.section-title {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 1rem;
}

.pillar-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.7rem;
}

/* Sub-sections nested under a pillar: no divider, tucked closer */
.subsection {
  border-top: none;
  padding-top: 0.6rem;
  padding-bottom: 1.4rem;
}

/* A bordered container around a whole subsection's contents, matching the
   look of the member-card containers on the main Agora page - used for
   the "Form" and "Wall" panels on member.html. No hover-lift like .card,
   since these hold static content/inputs, not a clickable link. */
.profile-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.8rem;
  margin-top: 1.5rem;
  margin-bottom: 1.8rem;
}

.panel-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 1.2rem;
}

.intro {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 40rem;
  margin-bottom: 1.8rem;
}

.body-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 42rem;
  margin-top: 1.1rem;
}

#cancel-signup-wrap {
  margin-bottom: 1.7rem;
}

.body-text-spaced {
  margin-bottom: 1.6rem;
}

.body-text a,
.intro a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.body-text a:hover,
.intro a:hover {
  color: var(--teal-deep);
}

#justice .body-text a,
#justice .intro a,
#justice ~ .subsection .body-text a,
#justice ~ .subsection .intro a {
  color: var(--blue-light);
}

#justice .body-text a:hover,
#justice .intro a:hover,
#justice ~ .subsection .body-text a:hover,
#justice ~ .subsection .intro a:hover {
  color: var(--blue);
}

.body-list {
  margin: 0.7rem 0 0 1.2rem;
  max-width: 42rem;
  color: var(--muted);
  line-height: 1.7;
}

.body-list li {
  margin: 0.35rem 0;
}

.news-list {
  list-style: none;
  margin: 0.9rem 0 0;
  max-width: 42rem;
}

.news-item {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.news-image {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 10px;
  margin-bottom: 0.7rem;
}

.news-item a {
  font-weight: 600;
  color: var(--text);
}

.news-item a:hover {
  color: var(--teal);
}

.news-source {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.news-quote {
  margin-top: 0.5rem;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
}

.product-table {
  width: 100%;
  max-width: 42rem;
  margin-top: 0.9rem;
  border-collapse: collapse;
}

.product-table th,
.product-table td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
}

.product-table th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.product-table td a {
  font-weight: 600;
  color: var(--text);
}

.product-table td a:hover {
  color: var(--teal);
}

.body-quote {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text);
  max-width: 42rem;
  margin-top: 0.6rem;
  padding-left: 1rem;
  border-left: 3px solid var(--teal);
  line-height: 1.6;
}

.section-image {
  display: block;
  width: min(360px, 82%);
  height: auto;
  border-radius: 12px;
  margin: 0.4rem auto 1.2rem;
}

.section-image-left {
  margin-left: 0;
  margin-right: auto;
}

.section-image-spaced {
  margin-bottom: 2.8rem;
}

.section-image-top-spaced {
  margin-top: 2rem;
}

@media (min-width: 641px) {
  .section-image-full-landscape {
    width: 100%;
    max-width: none;
  }
}

.section-image-caption {
  margin: -0.8rem 0 1.2rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--muted);
}

.text-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Big masthead-style heading, shared by "Welcome!" and "Catalogue Cover"
   on the Exchange cover page - quadruples .section-title's font-size. */
.mega-title {
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  text-align: center;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.exchange-search-row {
  display: flex;
  justify-content: center;
  margin: 1.2rem 0 1.8rem;
}

.exchange-search-input {
  width: min(420px, 100%);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
}

.exchange-search-input:focus {
  outline: none;
  border-color: var(--blue-light);
}

.member-word {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-style: italic;
  color: inherit;
  cursor: default;
}

.member-word--link {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--teal);
}

.member-word--link:hover {
  color: var(--teal-deep);
}

/* Catalogue Cover - a retail-flyer style grid instead of bordered cards,
   with size tiers (hero/medium/regular) and full-bleed tile backgrounds. */
.catalogue-flyer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.flyer-item {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--blue-light);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.flyer-item:hover {
  transform: translateY(-2px);
}

.flyer-item--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.flyer-item--medium {
  grid-column: span 2;
  grid-row: span 1;
}

.flyer-item--regular {
  grid-column: span 1;
  grid-row: span 1;
}

.flyer-item-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  opacity: 0.9;
}

.flyer-item--hero .flyer-item-icon {
  font-size: 4.5rem;
}

.flyer-item--medium .flyer-item-icon {
  font-size: 3rem;
}

.flyer-item-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}

.flyer-item-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7rem 0.75rem 0.6rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
}

.flyer-item-caption h3 {
  font-size: 0.92rem;
  font-weight: 800;
  margin: 0 0 0.15rem;
  color: #fff;
  line-height: 1.15;
}

.flyer-item--hero .flyer-item-caption h3 {
  font-size: 1.6rem;
}

.flyer-item--medium .flyer-item-caption h3 {
  font-size: 1.05rem;
}

.flyer-item-price {
  font-size: 0.72rem;
  color: #fff;
  opacity: 0.9;
}

@media (max-width: 640px) {
  .catalogue-flyer {
    grid-template-columns: repeat(2, 1fr);
  }
  .flyer-item--medium {
    grid-column: span 2;
  }
}

.shape-row {
  text-align: right;
}

.shape-row img {
  display: inline-block;
  width: min(360px, 90%);
  height: auto;
}

.hit-counter-row {
  display: flex;
  justify-content: flex-end;
  margin: 0.6rem 0 1rem;
}

.hit-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #ffffff;
  border: 1px solid var(--blue-light);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
}

.hit-counter-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.hit-counter-digits {
  font-family: "Courier New", monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #ffffff;
  background: var(--blue-light);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: #d4e6dd;
  box-shadow: 0 12px 30px -16px rgba(20, 80, 70, 0.28);
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.member-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
}

.avatar-photo {
  border-radius: 50%;
  object-fit: cover;
}

.avatar-photo-lg {
  border-radius: 50%;
  object-fit: cover;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.card:nth-child(even) .avatar {
  background: var(--green);
}

/* Member profile pages */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

.profile-avatar-empty {
  background: var(--surface);
  border: 1px solid var(--line);
}

.avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.profile-header h1,
.profile-header h2 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 1.4rem;
}

.profile-fields {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 32rem;
}

.profile-field dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 0.2rem;
}

/* flex-wrap: nowrap plus flex-basis 0 means every thumbnail always
   shares the row equally and never wraps to a second line, regardless
   of container width - portrait and landscape get the same layout,
   just scaled, instead of a breakpoint that only covers one case. */
.profile-gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: 0.4rem 0 1.2rem;
}

.profile-gallery img {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  aspect-ratio: 1 / 1;
  max-width: 110px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.profile-gallery img:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(20, 80, 70, 0.35);
}

.profile-gallery img.active {
  box-shadow: 0 0 0 3px var(--teal);
}

/* Fixed-height frame so the featured photo doesn't resize the page as
   visitors click through different-aspect-ratio photos. Height is sized
   to fully contain the tallest photo in a typical 5-photo set. */
.profile-photo-frame {
  width: min(360px, 82%);
  height: 540px;
  margin: 0.4rem auto 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--accent-soft);
}

.profile-photo-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.location-map {
  position: relative;
  width: min(320px, 100%);
  margin-top: 0.6rem;
  line-height: 0;
}

.location-map-bg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line);
}

#member-location-map-hint {
  width: min(320px, 100%);
  margin: 0.3rem auto 0;
  text-align: center;
  font-size: 0.8rem;
}

.location-map-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1453a;
  box-shadow: 0 0 0 2px #fff, 0 0 4px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
}

.profile-field dd {
  color: var(--text);
  font-size: 1rem;
}

.profile-field dd ul {
  list-style: disc;
  padding-left: 1.3rem;
  margin: 0.5rem 0;
}

.profile-field dd li {
  margin: 0.35rem 0;
}

.member h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.member-org {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: -0.35rem;
}

/* Pills */
.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
}

.pill-soon {
  color: var(--teal);
  background: var(--accent-soft);
}

.pill-catalogue {
  color: var(--teal);
  background: var(--accent-soft);
}

.pillar-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin-top: 1.6rem;
}

.pillar-toc a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  text-decoration: none;
}

.pillar-toc a:hover {
  background: var(--teal);
  color: #fff;
}

#justice .pillar-toc a {
  color: var(--blue);
  background: var(--blue-soft);
}

#justice .pillar-toc a:hover {
  background: var(--blue-light);
  color: #fff;
}

#index-pagination .pillar-toc a {
  color: var(--green-deep);
  background: var(--green-soft);
}

#index-pagination .pillar-toc a:hover {
  background: var(--green);
  color: #fff;
}

.pillar-toc-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 1.6rem;
}

.pillar-toc--vertical {
  flex-direction: column;
  align-items: stretch;
  max-width: 420px;
  flex: 1 1 320px;
  margin-top: 0;
}

.pillar-toc--vertical a {
  text-align: left;
}

@media (max-width: 640px) {
  /* At this width the two .pillar-toc--vertical columns wrap onto
     separate rows - the container's column gap would otherwise show
     up as an oversized vertical gap between the last link of the
     first column and the first link of the second. */
  .pillar-toc-columns {
    gap: 0.5rem;
  }
}

.catalogue-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1rem;
}

.catalogue-item {
  display: flex;
  flex: 1 1 200px;
  max-width: 240px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.catalogue-item h3 {
  margin: 0;
}

.catalogue-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
}

.category-hero-image {
  display: block;
  width: 100%;
  max-width: 42rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  margin: 0 auto 1.5rem;
}

/* Modifier for hero photos where the full frame matters more than
   filling the box (e.g. product shots on a white background) - shows
   the whole image, letting empty space around it read as page background
   instead of cropping in tight. */
.category-hero-image-contain {
  object-fit: contain;
  background: var(--bg);
}

/* Product row: the listing style for anything with a real description or
   promotion (VirtuaMakers' own products first) - Name/Picture/Description/
   Price as one line, as opposed to the plain .catalogue-item cards used for
   simple link-outs with no description. */
.product-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1.4rem;
  align-items: start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}

.product-row:first-of-type {
  border-top: none;
}

.product-row-image {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
}

.product-row-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.product-row-description {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 38rem;
}

.product-row-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.product-row-actions .btn {
  margin-left: 0;
}

.product-row-price {
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 640px) {
  .product-row {
    grid-template-columns: 90px 1fr;
  }

  .product-row-price {
    grid-column: 1 / -1;
    text-align: left;
    margin-top: 0.4rem;
  }
}

/* Category page prev/next nav: fixed-width row so the center point
   (the gap between the two links) lands in the same spot on every
   page regardless of how long either link's label is. */
.category-nav-label {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 1.3rem;
}

.category-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: 42rem;
  margin: 0.4rem auto 0;
}

.category-nav-prev,
.category-nav-next {
  font-weight: 600;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.category-nav-prev:hover,
.category-nav-next:hover {
  color: var(--teal-deep);
}

.category-nav-back {
  text-align: center;
  margin-top: 0.9rem;
}

.category-nav-back a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.category-nav-back a:hover {
  color: var(--teal-deep);
}

.catalogue-item-pending {
  border-style: dashed;
  color: var(--muted);
  cursor: default;
}

.catalogue-item-pending:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

.index-category {
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal-deep);
  margin: 1.8rem 0 0.6rem;
}

.index-category:first-of-type {
  margin-top: 1rem;
}

#join .pill-soon {
  margin-top: 1rem;
}

.membership-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 1.05rem;
  color: var(--muted);
}

.membership-stats strong {
  color: var(--text);
}

.link-badge {
  display: inline-block;
  width: 220px;
  height: auto;
  margin-top: 1.1rem;
  margin-right: 1rem;
}

/* Buttons - dark blue / light blue / white only, per Agora branding */
.btn {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.btn:active {
  transform: translateY(1px);
}

/* Every .btn sets its own explicit colors, so without this a disabled
   button (Post/Send/Approve/the new Admin Panel role buttons/etc. across
   the site) rendered identically to an enabled one apart from not
   responding to clicks - no visual cue at all that it's inactive. */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:hover {
  border-color: var(--line);
  background: var(--surface);
  transform: none;
}

.btn + .btn {
  margin-left: 0.7rem;
}

.btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.btn-primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.btn-blue {
  background: var(--blue-light);
  border-color: var(--blue-light);
  color: #fff;
}

.btn-blue:hover {
  background: var(--blue);
  border-color: var(--blue);
}

.btn-row-centered {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

.install-note {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 32rem;
}

/* Footer */
.site-footer {
  max-width: var(--maxw);
  margin: 2rem auto 0;
  padding: 2rem 1.5rem 3rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer a:hover {
  color: var(--text);
}

@media (max-width: 560px) {
  .site-header {
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  /* The arrow is dropped here (not just visually tucked away) so the
     header's three items - back-link, Communiqués, Sign Up/Sign In -
     have a shot at fitting on one line instead of the link text
     itself wrapping mid-phrase. Once wrapped onto their own row, this
     group can run the full row width right up to the padding, closer
     to the logo above it, rather than reserve room it doesn't use. */
  .back-arrow {
    display: none;
  }

  .header-right {
    gap: 0.7rem;
  }

  .header-right .back-link,
  .header-right .auth-link {
    font-size: 0.74rem;
    white-space: nowrap;
  }

  .auth-controls {
    gap: 0.4rem;
  }
}

/* Profile create/edit form */
.kind-selector {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.5rem;
}

.kind-selector[hidden],
.profile-form[hidden],
.admin-actions[hidden],
.friend-actions[hidden] {
  display: none;
}

.kind-option {
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.kind-option.selected {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-deep);
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 520px;
}

.profile-form label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.profile-form input,
.profile-form select,
.profile-form textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
}

.profile-form textarea {
  min-height: 14rem;
  resize: vertical;
}

.profile-form input + select {
  margin-top: 0.6rem;
}

.date-field-row {
  display: flex;
  gap: 0.6rem;
}

.date-field-row input {
  flex: 1 1 0;
  min-width: 0;
}

.date-field-row select {
  flex: 1.6 1 0;
  min-width: 0;
}

.field-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.2rem;
}

.field-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.9rem;
}

.field-group-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-form .field-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

.field-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

.field-checkbox input {
  width: auto;
  padding: 0;
  border: none;
}

.picture-field-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.picture-field-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* Element+class specificity, matching .field-checkbox label above - a bare
   .field-checkbox-inline class loses the text-transform/letter-spacing
   fight against .profile-form label's higher-specificity (class+element)
   selector otherwise. */
label.field-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

.field-checkbox-inline input {
  width: auto;
  padding: 0;
  border: none;
}

.profile-form-actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.form-status {
  font-size: 0.9rem;
  color: var(--muted);
}

.form-error {
  color: #c0392b;
  font-size: 0.9rem;
}

.field-error-inline {
  color: #c0392b;
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

#change-email-section {
  margin-top: 2rem;
}

.danger-zone {
  max-width: 520px;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.danger-zone .body-text {
  margin-bottom: 1rem;
}

#leave-btn {
  margin-top: 1rem;
}

.footnote-block {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.footnote-block .section-title {
  font-size: 0.85rem;
}

.footnote-letter {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--muted);
  max-width: 40rem;
}

.btn-danger {
  background: var(--surface);
  border-color: var(--blue);
  color: var(--blue-deep);
}

.btn-danger:hover {
  background: var(--blue-soft);
  border-color: var(--blue-deep);
}

.btn-secondary {
  background: var(--blue-soft);
  border-color: var(--blue-soft);
  color: var(--blue-deep);
}

.btn-secondary:hover {
  background: var(--blue-light);
  border-color: var(--blue-light);
  color: #fff;
}

/* Bag / Cart */
.bag-btn {
  position: relative;
}

.bag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.bag-count[hidden] {
  display: none;
}

.bag-modal {
  width: min(420px, 100%);
}

.bag-empty {
  color: var(--muted);
  font-size: 0.95rem;
}

.bag-group,
.checkout-section {
  margin-top: 1.2rem;
}

.bag-group-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.bag-items {
  list-style: none;
}

.bag-items li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.bag-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.bag-item-name {
  flex: 1;
}

.bag-item-price {
  color: var(--muted);
}

.bag-item-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.bag-item-remove:hover {
  color: var(--text);
}

.bag-checkout-btn {
  margin-top: 1.2rem;
  width: 100%;
  text-align: center;
}

/* NFT Gallery cards */
.cards-narrow {
  max-width: 280px;
}

.nft-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nft-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

.nft-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
}

.nft-card-empty {
  border-style: dashed;
  color: var(--muted);
}

.admin-actions {
  display: flex;
  gap: 0.7rem;
  margin: 1.5rem 0;
}

.friend-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.5rem 0;
}

/* Communiqués 📨 */

.dm-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.dm-item {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.dm-item:hover {
  border-color: #d4e6dd;
  transform: translateY(-2px);
}

.dm-item-name {
  font-weight: 700;
}

.communique-item-meta,
.dm-item-preview {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.communique-body {
  white-space: pre-wrap;
}

.friend-search-input {
  width: 100%;
  max-width: 420px;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  font: inherit;
  margin: 0.6rem 0;
}

button.dm-item {
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.search-picker {
  margin: 0.6rem 0 1.4rem;
}

.search-picker .dm-list {
  margin-top: 0.4rem;
  max-height: 220px;
  overflow-y: auto;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 60vh;
  overflow-y: auto;
  margin: 1.2rem 0;
  padding-right: 0.3rem;
}

.message-bubble {
  max-width: 70%;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.message-own {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: var(--teal);
}

.message-other {
  align-self: flex-start;
  background: var(--surface);
}

.message-sender {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.message-body {
  white-space: pre-wrap;
}

.message-time {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* Inline editing - Wall posts/comments, Dialog messages */

.edit-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--teal);
  cursor: pointer;
  margin-top: 0.3rem;
}

.edit-toggle + .edit-toggle {
  margin-left: 0.9rem;
}

.edit-toggle:hover {
  color: var(--teal-deep);
  text-decoration: underline;
}

.delete-toggle {
  color: #b3462c;
}

.delete-toggle:hover {
  color: #8a3220;
}

.edit-form {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.edit-form textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  font: inherit;
  resize: vertical;
}

/* Wall (Communiqués 📨, on member.html) */

.wall-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.wall-post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}

.wall-comments {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}

.wall-comment-form {
  display: flex;
  flex-direction: column;
  margin-top: 0.9rem;
}

/* Collapsed by default (the grid-rows trick, so it animates to the
   content's real height instead of a guessed max-height that could clip
   a resized textarea) - toggled open via the .open class in JS. The
   actions row (Per Manum + toggle/submit button) is a sibling OUTSIDE
   this, not inside it, so the button that opens the form is never itself
   trapped in the collapsed, zero-height region. */
.wall-comment-collapsible {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-bottom: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease, margin-bottom 0.3s ease;
}

.wall-comment-collapsible.open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-bottom: 0.6rem;
}

.wall-comment-form-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  min-height: 0;
}

.wall-comment-form textarea {
  width: 100%;
  min-height: 4rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  font: inherit;
  resize: vertical;
}

/* Noticeably smaller than the main Post composer's buttons, since a
   per-post Comment toggle is a secondary action, not the primary CTA. */
.btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
}

/* Sticky header: Welcome message moved to the left, next to the brand */

.brand-group {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.header-welcome {
  color: var(--muted);
  font-size: 0.95rem;
}

.header-welcome .auth-email {
  margin-right: 0;
}

#new-dm-toggle {
  margin-bottom: 1rem;
}

.communiques-logo {
  width: min(390px, 67.5vw);
}

.dm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.8rem 0 1.2rem;
}

.dm-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.dm-page-indicator {
  font-size: 0.85rem;
  color: var(--muted);
}


/* Dialog toast - AIM-style pop-out notification for a new Dialog
   message, bottom-right corner, slides up on arrival. */
.notification-toast {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  width: min(320px, calc(100vw - 2.4rem));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
  z-index: 200;
  overflow: hidden;
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.notification-toast.open {
  opacity: 1;
  transform: translateY(0);
}

.notification-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--blue-soft);
  cursor: pointer;
}

.notification-toast-title {
  font-weight: 700;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-toast-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.1rem 0.3rem;
}

.notification-toast-close:hover {
  color: var(--text);
}

.notification-toast-body {
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  max-height: 4.5em;
  overflow: hidden;
}

.notification-toast-reply {
  display: flex;
  gap: 0.5rem;
  padding: 0 0.9rem 0.9rem;
}

.notification-toast-reply textarea {
  flex: 1;
  min-height: 2.4rem;
  max-height: 5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.85rem;
  resize: vertical;
}

.notification-toast-reply .form-error {
  display: none;
}