:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #182132;
  --muted: #697385;
  --line: #e6e9f0;
  --accent: #3f6ad8;
  --accent-dark: #2f57bf;
  --danger: #c43d4b;
  --page-bg: #f6f7fb;
  --background-artwork-image: none;
  --background-artwork-wash: none;
  --background-artwork-size: cover;
  --background-artwork-position: center center;
  --background-artwork-filter: none;
  --topbar-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --nav-active-bg: #dce9ff;
  --nav-active-color: #2f57bf;
  --nav-active-border: #c9d9f8;
  --title-box-bg: #dce9ff;
  --title-box-color: #2f57bf;
  --title-box-border: #c9d9f8;
  --textarea-bg: #ffffff;
  --btn-primary-bg: #3f6ad8;
  --btn-primary-hover: #2f57bf;
  --btn-primary-color: #ffffff;
  --btn-outline-bg: #ffffff;
  --btn-outline-border: #e6e9f0;
  --btn-outline-color: #182132;
  --form-tone-1: transparent;
  --form-tone-2: transparent;
  --form-tone-3: transparent;
  --form-tone-4: transparent;
  --form-tone-5: transparent;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background-color: var(--page-bg, var(--bg));
  position: relative;
  isolation: isolate;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background-image: var(--background-artwork-image, none);
  background-size: var(--background-artwork-size, cover);
  background-position: var(--background-artwork-position, center center);
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: var(--background-artwork-filter, none);
  transform: scale(1.04);
}

body::after {
  z-index: -1;
  background: var(--background-artwork-wash, none);
  background-attachment: fixed;
}

.topbar {
  min-height: 72px;
  background: var(--topbar-bg, var(--surface));
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 2rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { font-size: 1.25rem; font-weight: 700; }
.top-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tab-link {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
}
.tab-link.active, .tab-link:hover {
  background: var(--nav-active-bg, #edf2ff);
  color: var(--nav-active-color, var(--accent-dark));
  border-color: var(--nav-active-border, transparent);
}

/* App / phone: the heading tabs become one horizontally-scrolling row instead
   of wrapping onto several messy lines. */
@media (max-width: 768px) {
  .topbar {
    padding: 0.6rem 1rem;
  }
  .top-nav {
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.25rem;
  }
  .top-nav::-webkit-scrollbar {
    display: none;
  }
  .top-nav .tab-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Page action buttons sit on their own row below the title and scroll
     sideways, rather than wrapping into a messy stack. (.toolbar prefix raises
     specificity above the base .toolbar-controls rule defined later.) */
  .toolbar .toolbar-controls {
    flex-basis: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding-bottom: 0.15rem;
  }
  .toolbar .toolbar-controls::-webkit-scrollbar {
    display: none;
  }
  .toolbar .toolbar-controls > * {
    flex: 0 0 auto;
  }
  /* Stop the filter dropdown stretching to its menu's width in the row. */
  .toolbar .toolbar-controls .tick-dropdown {
    width: 9.5rem;
    min-width: 0;
  }
  .toolbar .toolbar-controls .tick-dropdown > summary {
    white-space: nowrap;
  }
  /* Title + subtitle take the full row so the subtitle wraps instead of spilling. */
  .toolbar > div:not(.toolbar-controls) {
    flex: 1 1 100%;
    min-width: 0;
  }
  /* A dropdown inside the scrolling row would be clipped; float its menu free. */
  .toolbar .toolbar-controls .tick-dropdown[open] .tick-dropdown-menu {
    position: fixed;
    left: 1rem;
    right: 1rem;
    width: auto;
    min-width: 0;
  }
}

.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }
.sidebar { border-right: 1px solid var(--line); padding: 1.5rem; background: var(--sidebar-bg, var(--surface)); }
.sidebar h2 { font-size: 1rem; margin-top: 0; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li {
  display: flex; justify-content: space-between; padding: 0.75rem; border-radius: 10px;
  color: var(--muted); margin-bottom: 0.5rem; font-weight: 500; cursor: pointer; border: 1px solid transparent;
}
.sidebar li.active, .sidebar li:hover {
  background: var(--nav-active-bg, #edf2ff);
  color: var(--nav-active-color, var(--accent-dark));
  border: 1px solid var(--nav-active-border, transparent);
}

.sidebar li.sidebar-section-heading,
.sidebar li.sidebar-section-heading:hover {
  cursor: default;
  margin: 0.8rem 0 0.2rem;
  padding: 0.25rem 0.1rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content { padding: 2rem 2rem calc(8.5rem + env(safe-area-inset-bottom, 0px)); max-width: 100%; }
.toolbar { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.toolbar h1, .page-title {
  margin: 0;
  font-size: 1.8rem;
  display: inline-flex;
  width: fit-content;
  padding: 0.32rem 0.9rem;
  border-radius: 14px;
  background: var(--title-box-bg, #eef2ff);
  color: var(--title-box-color, var(--accent-dark));
  border: 1px solid var(--title-box-border, transparent);
}
.subtitle, .toolbar p {
  margin: 0.35rem 0 0;
  color: rgba(24, 33, 50, 0.82);
}
.finance-page-toolbar .finance-page-intro {
  color: var(--text);
}
/* Space the "Flow" / "Timeframe" labels off their dropdowns. */
.finance-page-toolbar .toolbar-controls > label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.finance-tax-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0.6rem 0 0.4rem;
}
.finance-tax-figure {
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: #f6f8fd;
  border: 1px solid var(--line);
  display: grid;
  gap: 0.2rem;
}
.finance-tax-figure span { font-size: 0.78rem; color: var(--muted); }
.finance-tax-figure strong { font-size: 1.15rem; }
.finance-tax-figure.highlight { background: #eef5ee; border-color: rgba(46, 125, 50, 0.25); }
.finance-tax-entity-note { margin: 0.3rem 0 0.6rem; }
.finance-tax-estimate { border-top: 1px solid var(--line); padding-top: 0.6rem; margin-top: 0.4rem; }
.finance-tax-estimate h4 { margin: 0 0 0.45rem; }
.finance-tax-estimate-rows { display: grid; gap: 0.3rem; max-width: 420px; }
.finance-tax-estimate-rows > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.finance-tax-estimate-rows > div.total { border-top: 1px solid var(--line); padding-top: 0.3rem; margin-top: 0.1rem; font-weight: 600; }
.finance-tax-keydates { border-top: 1px solid var(--line); padding-top: 0.6rem; margin-top: 0.4rem; }
.finance-tax-keydates h4 { margin: 0 0 0.4rem; }
.finance-tax-keydates ul { margin: 0 0 0.55rem; padding-left: 1.1rem; display: grid; gap: 0.28rem; }
.finance-tax-keydates li { font-size: 0.86rem; }
.finance-tax-disclaimer { font-size: 0.76rem; color: var(--muted); margin: 0.6rem 0 0; line-height: 1.4; }
.finance-tax-callout {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  background: #eef4ff;
  border: 1px solid #c9d8f2;
  color: #2f3d5c;
  font-size: 0.88rem;
  line-height: 1.5;
}
.finance-tax-callout a { color: #2f56b5; }
.finance-tax-guide-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 1px 9px;
  border-radius: 999px;
  background: #fdf0d8;
  color: #7a4e10;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.finance-tax-compare { border-top: 1px solid var(--line); padding-top: 0.6rem; margin-top: 0.5rem; }
.finance-tax-compare h4 { margin: 0 0 0.45rem; }
.finance-tax-compare-table { width: 100%; max-width: 480px; border-collapse: collapse; font-size: 0.9rem; }
.finance-tax-compare-table th, .finance-tax-compare-table td { text-align: right; padding: 0.32rem 0.5rem; border-bottom: 1px solid var(--line); }
.finance-tax-compare-table th:first-child, .finance-tax-compare-table td:first-child { text-align: left; color: var(--muted); }
.finance-tax-compare-table thead th { color: var(--muted); font-size: 0.82rem; }
.finance-tax-compare-table tr.total td { font-weight: 700; color: var(--text); border-top: 2px solid var(--line); }
.finance-tax-benefits {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: #fdf0d8;
  color: #7a4e10;
  font-size: 0.86rem;
  line-height: 1.45;
}
.finance-tax-topay {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: 420px;
  margin-top: 0.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: #eef4ff;
  border: 1px solid #c9d8f2;
}
.finance-tax-topay strong { font-size: 1.2rem; color: #25408f; }
@media (max-width: 720px) {
  .finance-tax-figures { grid-template-columns: 1fr; }
}
.finance-docs-archive > summary { cursor: pointer; padding: 0.2rem 0; }
.finance-doc-month { margin-top: 0.7rem; }
.finance-doc-list { display: grid; gap: 0.2rem; }

/* Drag-and-drop file dropzone (receipts / photos) */
.file-dropzone-field { display: grid; gap: 0.4rem; }
.file-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  text-align: center; cursor: pointer; position: relative;
  min-height: 84px; padding: 0.9rem 1rem;
  border: 2px dashed var(--line); border-radius: 12px;
  background: var(--surface-muted, rgba(0,0,0,0.02));
  transition: border-color 0.15s ease, background 0.15s ease;
}
.file-dropzone:hover { border-color: var(--accent, #4663ff); }
.file-dropzone.is-dragover { border-color: var(--accent, #4663ff); background: rgba(70,99,255,0.08); }
.file-dropzone input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; min-height: 0; height: 100%;
}
.file-dropzone-cue { display: grid; gap: 0.15rem; pointer-events: none; }
.file-dropzone-cue strong { font-size: 0.92rem; }
.file-dropzone-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.file-dropzone-item {
  display: flex; align-items: center; gap: 0.4rem; min-width: 0;
  padding: 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); font-size: 0.85rem;
}
.file-dropzone-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }

/* Recurring-expenses search promoted to a full-width box at the top of the panel */
.recurring-expense-search-top { display: block; width: 100%; margin-bottom: 0.75rem; }
.recurring-expense-search-top input[type="search"] { width: 100%; max-width: 100%; }
.file-dropzone-status { margin: 0; font-size: 0.82rem; }
.file-dropzone-status[data-kind="busy"] { color: var(--muted); }
.file-dropzone-status[data-kind="ok"] { color: #1b7f4b; }
.file-dropzone-status[data-kind="warn"] { color: #b25b00; }
.finance-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}
.finance-doc-main { min-width: 0; }
.finance-doc-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.25rem 0; }
.finance-collapsible > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-size: 1.02rem;
}
.finance-collapsible > summary::-webkit-details-marker { display: none; }
.finance-collapsible > summary::before { content: "▸"; color: var(--muted); font-size: 0.85rem; align-self: center; }
.finance-collapsible[open] > summary::before { content: "▾"; }
.finance-collapsible-hint { font-size: 0.82rem; color: var(--muted); font-weight: 400; }
.finance-section-body { margin-top: 0.7rem; }
.finance-tax-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.7rem 1rem;
  align-items: end;
  justify-content: stretch;
  margin-bottom: 0.6rem;
}
.finance-tax-controls > label:not(.checkbox-row) {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.finance-tax-controls > label:not(.checkbox-row) > select,
.finance-tax-controls > label:not(.checkbox-row) > input {
  width: 100%;
  font-weight: 400;
}
.finance-tax-controls > label.checkbox-row { align-self: end; }
.toolbar-controls { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.calendar-toolbar {
  align-items: flex-start;
}

.calendar-toolbar-groups {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
}

.calendar-toolbar-left,
.calendar-toolbar-right {
  justify-content: flex-start;
}

.calendar-toolbar-search {
  position: relative;
  min-width: min(100%, 320px);
  flex: 1 1 280px;
}

.calendar-toolbar-right {
  justify-content: flex-end;
}

.calendar-search-shell {
  position: relative;
  width: 100%;
}

.calendar-search-field {
  display: block;
}

.calendar-search-field input[type="search"] {
  width: 100%;
  max-width: none;
}

.calendar-search-results {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  z-index: 12;
  display: grid;
  gap: 0.3rem;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 34px rgba(26, 36, 64, 0.12);
  backdrop-filter: blur(8px);
}

.calendar-search-result {
  display: grid;
  gap: 0.16rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f8fbff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.calendar-search-result:hover,
.calendar-search-result:focus-visible {
  border-color: rgba(111, 145, 230, 0.35);
  background: #eef4ff;
  transform: translateY(-1px);
}

.calendar-search-result-title {
  font-weight: 600;
  color: var(--text);
}

.calendar-search-result-meta,
.calendar-search-empty {
  font-size: 0.8rem;
  color: var(--muted);
}

.inventory-subsection-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.inventory-subsection-copy h3 {
  margin: 0;
}

input, select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font: inherit;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
  min-height: 44px;
}
/* Number inputs (years, etc.) are typed, not stepped — drop the up/down spinner
   arrows so the field is a clean text box across every form/page. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Standardise EVERY data-entry control in modal forms to one height, so
   text, number, date, select, file and textarea fields all match exactly.
   box-sizing: border-box is global, so 44px includes padding + border.
   Checkboxes/radios are excluded; textareas stay drag-resizable taller. */
.modal-form input:not([type="checkbox"]):not([type="radio"]),
.modal-form select,
.modal-form textarea {
  min-height: 44px;
  height: 44px;
  /* Never let a control (esp. a <select> with long option labels) grow past
     its grid column and overlap neighbours / spill out of the card. */
  min-width: 0;
  max-width: 100%;
}
.modal-form textarea {
  resize: vertical;
}
input[type="search"] { width: 350px; max-width: 40vw; }

.btn {
  border: 0;
  border-radius: 10px;
  font-weight: 600;
  padding: 0.65rem 1rem;
  cursor: pointer;
}
.btn.mini { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.btn-primary { background: var(--btn-primary-bg, var(--accent)); color: var(--btn-primary-color, white); }
.btn-primary:hover { background: var(--btn-primary-hover, var(--accent-dark)); }
.btn-outline { background: var(--btn-outline-bg, white); border: 1px solid var(--btn-outline-border, var(--line)); color: var(--btn-outline-color, var(--text)); }
.btn.danger { color: var(--danger); border-color: #efc6cb; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stats article, .page-card, .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(22, 31, 61, 0.04);
}
.stats h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--title-box-color, var(--accent-dark));
  display: inline-flex;
  width: fit-content;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  background: var(--title-box-bg, #eef2ff);
  border: 1px solid var(--title-box-border, transparent);
}
.stats p { margin: 0.6rem 0 0; font-size: 1.35rem; font-weight: 700; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.card { padding: 0; overflow: hidden; }
.card.dragging { opacity: 0.5; outline: 2px dashed var(--accent); }
.card-image { height: 150px; background: linear-gradient(135deg, #6f88dd, #9eb2f7 50%, #d1dbff); }
/* Show the whole piece, not a cropped fill — letterbox on a neutral ground so
   portrait, landscape and square images all read fully. */
.card-image.thumb { object-fit: contain; width: 100%; height: 190px; display: block; background: #f3f5fa; }
.date-field-wrap { display: flex; gap: 0.4rem; align-items: stretch; }
.date-field-wrap input[type="date"] { flex: 1 1 auto; min-width: 0; }
.date-today-btn {
  flex: 0 0 auto; border: 1px solid var(--line, #d7deea); background: #f3f5fa;
  border-radius: 8px; padding: 0 0.7rem; font-size: 0.82rem; font-weight: 600;
  color: var(--accent-blue, #3f6fb0); cursor: pointer; white-space: nowrap;
}
.date-today-btn:hover { background: #e9eefb; border-color: var(--accent-blue, #3f6fb0); }

.card-body { padding: 0.9rem; }
.card h3 { margin: 0; font-size: 1rem; }
.meta { margin-top: 0.45rem; color: var(--muted); font-size: 0.88rem; }
.price-row { margin-top: 0.8rem; display: flex; justify-content: space-between; align-items: center; }
.sale-price { margin-top: 0.35rem; font-size: 0.86rem; color: #0b6d8a; font-weight: 600; }

.badge {
  background: #f2f5ff; color: var(--accent-dark); font-size: 0.78rem; font-weight: 600;
  border-radius: 999px; padding: 0.25rem 0.6rem;
}
.card-actions { margin-top: 0.8rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.table-like { display: grid; gap: 0.85rem; }

.page-card > h3,
.toolbar h3,
.calendar-title {
  display: inline-flex;
  width: fit-content;
  padding: 0.25rem 0.7rem;
  border-radius: 12px;
  background: var(--title-box-bg, #eef2ff);
  color: var(--title-box-color, var(--accent-dark));
  border: 1px solid var(--title-box-border, transparent);
}

.pieces-list { display: grid; gap: 0.9rem; }
.repro-group { display: grid; gap: 0.75rem; }
.repro-group + .repro-group { margin-top: 1.4rem; }
.repro-group-header { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; }
.repro-group-thumb { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: var(--bg); }
.repro-group-thumb img { width: 100%; height: 100%; object-fit: cover; }
.repro-group-meta { flex: 1 1 auto; min-width: 0; }
.repro-group-meta h3 { margin: 0; }
.repro-group-items { display: grid; gap: 0.75rem; padding-left: 1rem; border-left: 3px solid var(--line); }
.cost-recipe { border: 0.5px solid var(--line); border-radius: 10px; padding: 0.75rem; background: var(--bg); display: grid; gap: 0.6rem; }
.cost-recipe-head { display: grid; gap: 2px; }
.cost-method-toggle { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.35rem; }
.cost-method-toggle label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; }
.cost-method-section { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.cost-recipe [data-cost-components] { display: grid; gap: 0.5rem; }
.cost-component-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem 0.6rem; align-items: center; padding-bottom: 0.5rem; border-bottom: 0.5px dashed var(--line); }
.cost-component-row > input[data-cost-component="name"] { grid-column: 1 / -1; }
.cost-component-row > select[data-cost-component="supplierBusinessId"] { grid-column: 1 / -1; }
.cost-component-row > input[data-cost-component="bulkQuantity"] { grid-column: 1; }
.cost-component-row > input[data-cost-component="bulkCost"] { grid-column: 2; }
.cost-component-unit { grid-column: 1 / 3; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.cost-component-row > [data-action="remove-cost-component"] { grid-column: 3; grid-row: 3 / 5; justify-self: end; align-self: center; width: 36px; padding: 0.35rem 0; }
.cost-recipe-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.cost-recipe-total { font-weight: 500; color: var(--text); }
input.is-computed { background: var(--bg); color: var(--muted); }
.multi-select-field { border: 0.5px solid var(--line); border-radius: 10px; padding: 0.4rem 0.7rem; }
.multi-select-field > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; padding: 0.2rem 0; }
.multi-select-field > summary::-webkit-details-marker { display: none; }
.multi-select-field > summary::after { content: "▾"; color: var(--muted); transition: transform 0.15s ease; }
.multi-select-field[open] > summary::after { transform: rotate(180deg); }
.multi-select-field > summary .field-label { margin: 0; }
.multi-select-summary-count { font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.multi-select-field[open] > select { margin-top: 0.4rem; }
.field-info { display: inline; }
.field-info > summary { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: 11px; font-style: italic; font-weight: 600; line-height: 1; cursor: pointer; vertical-align: middle; list-style: none; }
.field-info > summary::-webkit-details-marker { display: none; }
.field-info > summary::marker { content: ""; }
.field-info-body { display: none; font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; font-weight: 400; }
.field-info[open] .field-info-body { display: block; }
.field-info-block { display: block; margin-top: 0.35rem; }
.variant-margin:not(:empty) { grid-column: 1 / -1; font-size: 0.9rem; font-weight: 500; color: var(--accent-dark, #2f57bf); background: var(--nav-active-bg); border-radius: 8px; padding: 0.4rem 0.6rem; }
.add-company-inline { grid-column: 1 / -1; display: flex; gap: 0.4rem; align-items: center; }
.add-company-inline input { flex: 1; }
.price-variant-photo { display: grid; gap: 0.4rem; }
.price-variant-photo-preview img { max-width: 120px; max-height: 120px; border-radius: 8px; border: 0.5px solid var(--line); object-fit: cover; }
.print-order-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.6rem; padding: 0.7rem; border: 0.5px solid var(--line); border-radius: 10px; }
.print-order-row > label.full, .print-order-row > .full { grid-column: 1 / -1; }
.print-order-actions { display: flex; justify-content: flex-end; }
@media (min-width: 780px) { .print-order-row { grid-template-columns: repeat(3, 1fr); } }
.supply-order-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.6rem; padding: 0.7rem; border: 0.5px solid var(--line); border-radius: 10px; }
.supply-order-row > label.full, .supply-order-row > .full { grid-column: 1 / -1; }
.supply-order-actions { display: flex; justify-content: flex-end; }
@media (min-width: 780px) { .supply-order-row { grid-template-columns: repeat(3, 1fr); } }
.supplier-comparison { margin-top: 0.75rem; }
.supplier-comparison-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.supplier-comparison-table th, .supplier-comparison-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 0.5px solid var(--line); vertical-align: top; }
.supplier-comparison-table th { font-weight: 500; color: var(--muted); }
.supplier-comparison-table tr.supplier-best td { background: var(--nav-active-bg); }
.supplier-comparison-table tr.supplier-notes td { padding-top: 0; border-bottom: 0.5px solid var(--line); }
.numbering-prefix-grid { display: grid; grid-template-columns: 1fr; gap: 0.35rem; margin: 0.25rem 0 0.5rem; }
.numbering-prefix-row { display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 0.5rem; }
.numbering-prefix-row .field-label { margin: 0; }
@media (min-width: 780px) {
  .cost-component-row { grid-template-columns: minmax(120px, 1.4fr) minmax(120px, 1.2fr) 84px 84px auto 36px; }
  .cost-component-row > input[data-cost-component="name"] { grid-column: 1; }
  .cost-component-row > select[data-cost-component="supplierBusinessId"] { grid-column: 2; }
  .cost-component-row > input[data-cost-component="bulkQuantity"] { grid-column: 3; }
  .cost-component-row > input[data-cost-component="bulkCost"] { grid-column: 4; }
  .cost-component-unit { grid-column: 5; }
  .cost-component-row > [data-action="remove-cost-component"] { grid-column: 6; grid-row: auto; }
  .cost-component-row--buy { grid-template-columns: minmax(140px, 1.6fr) 84px 84px auto 36px; }
  .cost-component-row--buy > select[data-cost-component="supplierBusinessId"] { grid-column: 1; }
  .cost-component-row--buy > input[data-cost-component="bulkQuantity"] { grid-column: 2; }
  .cost-component-row--buy > input[data-cost-component="bulkCost"] { grid-column: 3; }
  .cost-component-row--buy .cost-component-unit { grid-column: 4; }
  .cost-component-row--buy > [data-action="remove-cost-component"] { grid-column: 5; }
  .cost-component-row--buy > [data-add-company] { grid-column: 1 / -1; }
}
.piece-row {
  display: grid;
  grid-template-columns: 280px minmax(220px, 1fr) minmax(280px, 1.2fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 0.85rem;
}
.piece-image-wrap .card-image { border-radius: 10px; overflow: hidden; }
/* Real images take their natural shape (no grey letterbox); only the empty
   placeholder keeps a fixed coloured box. */
.piece-image-wrap img.card-image { width: 100%; height: auto; max-height: 380px; object-fit: contain; background: transparent; display: block; }
.piece-image-wrap .card-image:not(.thumb) { height: 220px; }
.piece-image-button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.piece-image-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}
.piece-summary { padding-top: 0.1rem; }
.piece-pill-row { display: flex; gap: 0.4rem; margin-top: 0.55rem; flex-wrap: wrap; }
.badge.soft { background: #f3f4f7; color: #485265; }
.piece-details { font-size: 0.9rem; color: var(--text); display: grid; gap: 0.38rem; }
.piece-details p { margin: 0; line-height: 1.5; }
/* Compact-mobile helpers (shown only on phones, see the max-width:640px block). */
.piece-key { display: none; }
.piece-details-more { display: none; }
.assignment-meta { margin: 0; line-height: 1.5; }
.piece-actions { display: grid; gap: 0.45rem; align-content: start; }
.piece-actions .btn { min-width: 86px; }

.artwork-report-page {
  display: grid;
  gap: 1.2rem;
}

.artwork-report-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
}

.artwork-report-title {
  margin: 0.7rem 0 0;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.05;
}

.artwork-report-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.artwork-report-hero {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.artwork-report-image-panel {
  padding: 1rem;
}

.artwork-report-image {
  display: block;
  width: 100%;
  max-height: 820px;
  object-fit: contain;
  border-radius: 16px;
  background: #f4f6fb;
}

.artwork-report-image.empty {
  min-height: 520px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6f88dd, #9eb2f7 50%, #d1dbff);
}

.artwork-report-overview {
  display: grid;
  gap: 0.9rem;
}

.artwork-report-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.artwork-report-spec {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  display: grid;
  gap: 0.24rem;
}

.artwork-report-spec span,
.artwork-report-finance-totals span,
.artwork-report-media-summary span {
  color: var(--muted);
  font-size: 0.84rem;
}

.artwork-report-spec strong,
.artwork-report-finance-totals strong,
.artwork-report-media-summary strong {
  font-size: 0.98rem;
}

.artwork-report-side-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.artwork-report-mini-card {
  padding: 1rem;
}

.artwork-report-mini-card h3,
.artwork-report-section h2 {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
}

.artwork-report-mini-card p,
.artwork-report-section p {
  margin: 0.48rem 0 0;
  line-height: 1.6;
}

.artwork-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.artwork-report-section {
  padding: 1.1rem;
}

.artwork-report-section-wide {
  grid-column: 1 / -1;
}

.artwork-report-copy {
  display: grid;
  gap: 0.65rem;
}

.artwork-report-empty {
  margin: 0;
  color: var(--muted);
}

.artwork-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.9rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}

.artwork-report-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.artwork-report-row-side {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
  text-align: right;
}

.artwork-event-status-select {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  text-align: left;
  margin: 0;
}
.artwork-event-status-select .field-label {
  font-size: 0.72rem;
  color: var(--muted);
}
.artwork-event-status-select select {
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 0.85rem;
  min-width: 140px;
}
.exhibition-history-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.artwork-edit-linked-event {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.artwork-edit-linked-event:first-of-type {
  border-top: 0;
}

.artwork-report-finance-totals,
.artwork-report-media-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.artwork-report-finance-totals > div,
.artwork-report-media-summary > div {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: #f6f8fd;
  border: 1px solid var(--line);
  display: grid;
  gap: 0.18rem;
}

.artwork-report-inline-actions,
.artwork-report-mini-list {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
}

.artwork-report-link-row {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.artwork-report-legacy-history {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem; display: flex; justify-content: space-between; gap: 1rem;
}
.actions-inline { display: flex; gap: 0.45rem; margin-top: 0.45rem; justify-content: end; }
.table-like .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(172px, auto);
  align-items: center;
}

.upcoming-row-main {
  min-width: 0;
}

.upcoming-row-main-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit; /* buttons default to a smaller, non-inheriting font — match the row text so event titles aren't smaller than lead titles */
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 0.14rem;
  align-content: start;
}

.upcoming-row-main-button:hover strong {
  color: var(--accent-dark);
}

.upcoming-row-side {
  display: grid;
  gap: 0.28rem;
  justify-items: end;
  align-content: start;
  min-width: 172px;
  text-align: right;
}

.upcoming-row-actions {
  margin-top: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.upcoming-row-actions .actions-inline {
  margin-top: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tick-dropdown {
  position: relative;
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.tick-dropdown summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.62rem 0.8rem;
  font-size: 0.92rem;
  color: var(--text);
}

.tick-dropdown summary::-webkit-details-marker {
  display: none;
}

.tick-dropdown[open] {
  box-shadow: 0 8px 18px rgba(22, 31, 61, 0.12);
}

.tick-dropdown-value {
  color: var(--muted);
  font-size: 0.84rem;
  text-align: right;
}

.tick-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 12;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.55rem;
  display: grid;
  gap: 0.35rem;
  box-shadow: 0 12px 24px rgba(22, 31, 61, 0.12);
}

.tick-dropdown-option {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  color: var(--text);
}

.tick-dropdown-option:hover {
  background: #f6f8fc;
}

.tick-dropdown-option input {
  width: 16px;
  height: 16px;
}

.finance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0.8rem;
}

.finance-row-main,
.finance-row-side {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.finance-row-side {
  justify-items: end;
  text-align: right;
}

.finance-row-actions {
  margin-top: 0.3rem;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.finance-row-side strong {
  white-space: nowrap;
}

.finance-row-context,
.finance-ledger-entry-context {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
}

.finance-row-more,
.finance-ledger-entry-more {
  margin-top: 0.05rem;
}

.finance-row-more summary,
.finance-ledger-entry-more summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
}

.finance-row-more-body,
.finance-ledger-entry-more-body {
  display: grid;
  gap: 0.24rem;
  padding-top: 0.35rem;
}

.finance-row-notes,
.finance-ledger-entry-notes {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.finance-income {
  color: #0a7a48;
}

.finance-outgoing {
  color: #b14545;
}

.finance-ledger-panel {
  display: grid;
  gap: 1rem;
}

.finance-ledger-periods,
.finance-ledger-compare {
  display: grid;
  gap: 0.9rem;
}

.finance-ledger-period-card {
  display: grid;
  gap: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 0.95rem;
}

.finance-ledger-period-card-both {
  background: linear-gradient(180deg, #fff, #fafcff);
}

.finance-ledger-period-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.finance-ledger-period-head h4 {
  margin: 0;
  font-size: 1.02rem;
}

.finance-ledger-period-summary {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.finance-ledger-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.finance-ledger-column {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.finance-ledger-column h5 {
  margin: 0;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.finance-ledger-list {
  display: grid;
  gap: 0.65rem;
}

/* Single-flow (Income-only / Outgoings-only) entries fill the width in a
   responsive grid instead of stacking in one narrow left-hand column.
   The side-by-side "Both" view keeps its own two-column layout. */
.finance-ledger-period-card > .finance-ledger-list {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  align-items: start;
}

.finance-ledger-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 1rem;
  align-items: start;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.finance-ledger-entry--income {
  border-left: 4px solid #83cca7;
}

.finance-ledger-entry--outgoing {
  border-left: 4px solid #e8a3a3;
}

.finance-ledger-entry--pending {
  background: #fffaf0;
  border-left-color: #e0a92e;
}

.finance-ledger-entry-main {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.finance-ledger-entry-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  min-width: 0;
  text-align: right;
}

/* The amount, net and actions sit together top-right, lined up with the title. */
.finance-ledger-entry-side .finance-row-actions {
  margin-top: 0.4rem;
}

.finance-pending-tick {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.72rem;
  line-height: 1.25;
  color: #9a6a00;
  cursor: pointer;
  text-align: left;
}

.finance-pending-tick input {
  margin: 2px 0 0;
  flex: none;
}

.finance-ledger-entry-head {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.finance-ledger-entry-head strong {
  font-size: 0.94rem;
  line-height: 1.25;
}

.finance-ledger-entry-head span {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.finance-ledger-entry-side {
  justify-items: end;
  text-align: right;
}

.finance-ledger-entry-side strong {
  font-size: 1.06rem;
  white-space: nowrap;
}

/* Only stack the amount under the details on a genuinely narrow phone; on
   tablet / desktop keep title-left, amount-right. */
@media (max-width: 560px) {
  .finance-ledger-entry {
    grid-template-columns: 1fr;
  }
  .finance-ledger-entry-side {
    align-items: flex-start;
    text-align: left;
  }
  .finance-ledger-entry-side .finance-row-actions {
    justify-content: flex-start;
  }
  .finance-ledger-entry-head {
    flex-direction: column;
  }
}

.finance-ledger-empty {
  padding: 0.3rem 0;
}

.finance-active-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.9rem;
  margin: 0.6rem 0 0.2rem;
  padding: 0.55rem 0.8rem;
  background: #eef3ff;
  border: 1px solid #d3ddf5;
  border-radius: 10px;
  font-size: 0.88rem;
  color: #31435e;
}

.finance-tier-panel {
  display: grid;
  gap: 1rem;
}

.finance-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

.finance-tier-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 0.95rem;
  display: grid;
  gap: 0.8rem;
}

.finance-tier-card.is-current {
  border-color: rgba(63, 106, 216, 0.35);
  box-shadow: 0 0 0 1px rgba(63, 106, 216, 0.08);
}

.finance-tier-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.finance-tier-card-head h4 {
  margin: 0;
  font-size: 1rem;
}

.finance-tier-card-head > div {
  display: grid;
  gap: 0.3rem;
}

.finance-tier-highlights {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  line-height: 1.45;
}

.finance-tax-country {
  display: grid;
  gap: 0.35rem;
}

.finance-tax-country select {
  width: 100%;
}

.finance-linked-grid {
  display: grid;
  gap: 0.85rem;
}

.finance-linked-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 0.85rem 0.9rem;
  display: grid;
  gap: 0.6rem;
}

.finance-linked-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.finance-linked-card-head h4 {
  margin: 0;
  font-size: 1rem;
}

.finance-linked-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.finance-linked-metrics span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #f7f9fd;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.finance-linked-metrics strong {
  color: var(--text);
}

.finance-linked-dates {
  color: var(--muted);
}

.finance-internal-panel {
  opacity: 0.94;
}

.finance-receipt-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}

.finance-receipt-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #fff;
}

.finance-filter-controls label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.finance-overview-stats {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  align-items: stretch;
  margin-bottom: 0;
}

.finance-overview-stats article {
  min-height: 100%;
}

.finance-sales-handoff-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.finance-sales-handoff-stats article {
  display: grid;
  gap: 0.2rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.finance-sales-handoff-stats span {
  color: var(--muted);
  font-size: 0.82rem;
}

.finance-sales-handoff-stats strong {
  color: var(--text);
  font-size: 1.02rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.finance-graph {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.finance-period-grid,
.finance-pie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.finance-period-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
}

.finance-period-card h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
}

.finance-graph-row,
.finance-period-bar-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.finance-graph-row strong,
.finance-period-bar-row strong {
  color: var(--text);
}

.finance-graph-track {
  height: 12px;
  border-radius: 999px;
  background: #eef1f6;
  overflow: hidden;
}

.finance-graph-fill {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
}

.finance-graph-fill.income {
  background: #83cca7;
}

.finance-graph-fill.outgoing {
  background: #e8a3a3;
}

.finance-graph-fill.profit {
  background: #9db3f6;
}

.recurring-expense-panel {
  display: grid;
  gap: 1rem;
}

.recurring-expense-toolbar {
  gap: 0.9rem;
}

.recurring-expense-toolbar-controls {
  align-items: center;
  gap: 0.65rem;
}

.recurring-expense-search {
  min-width: 260px;
}

.recurring-expense-search input {
  min-width: 260px;
}

.recurring-expense-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.recurring-filter-chip {
  display: grid;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f9fbff;
  min-width: 160px;
  font-size: 0.82rem;
  color: var(--muted);
}

.recurring-filter-chip select {
  min-width: 0;
}

.recurring-expense-table {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.recurring-expense-header,
.recurring-expense-row {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) 0.8fr 0.8fr 1fr auto;
  gap: 0.9rem;
  align-items: start;
  padding: 0.85rem 1rem;
}

.recurring-expense-header {
  background: #f7f9fd;
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.recurring-expense-row + .recurring-expense-row {
  border-top: 1px solid var(--line);
}

.recurring-expense-main {
  display: grid;
  gap: 0.25rem;
}

.recurring-expense-amount,
.recurring-expense-frequency,
.recurring-expense-date {
  display: grid;
  gap: 0.25rem;
  align-content: start;
}

.recurring-expense-date-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.recurring-expense-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
}

.recurring-expense-badge.overdue {
  background: #ffe8e8;
  color: #a63b3b;
}

.recurring-expense-badge.due,
.recurring-expense-badge.soon {
  background: #fff3df;
  color: #9a6215;
}

.recurring-expense-badge.future {
  background: #ebf2ff;
  color: #335aa7;
}

.recurring-expense-badge.muted {
  background: #eef1f6;
  color: var(--muted);
}

.recurring-expense-paid-action {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: #335aa7;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(51, 90, 167, 0.3);
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.recurring-expense-paid-action:hover,
.recurring-expense-paid-action:focus-visible {
  color: #23427f;
  text-decoration-color: currentColor;
}

.recurring-expense-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.recurring-expense-empty {
  padding: 1rem;
  margin: 0;
}

.finance-graph-fill.loss {
  background: #e2b06a;
}

.finance-period-net {
  font-size: 0.9rem;
  color: var(--muted);
}

.finance-period-net.profit {
  color: #2f6f54;
}

.finance-period-net.loss {
  color: #9d5f3d;
}

.finance-pie-card {
  justify-items: center;
  text-align: left;
}

.finance-pie-chart {
  width: 118px;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
}

.finance-pie-chart::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: #fff;
}

.finance-pie-legend {
  width: 100%;
  display: grid;
  gap: 0.45rem;
}

.finance-pie-legend div {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.88rem;
}

.finance-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.finance-dot.income {
  background: #83cca7;
}

.finance-dot.outgoing {
  background: #e8a3a3;
}

.finance-dot.profit {
  background: #9db3f6;
}

.finance-dot.loss {
  background: #e2b06a;
}

.report-toolbar-actions {
  justify-content: flex-end;
}

.reports-head,
.reports-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(220px, 1.45fr) minmax(160px, 0.9fr) minmax(210px, 1.05fr);
  gap: 0.8rem;
  align-items: center;
}

.reports-select-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.reports-select-cell input,
.report-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.reports-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.reports-bulk-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.reports-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}

.reports-bulk-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.reports-head {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 0.25rem;
}

.reports-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.7rem 1rem;
}

.reports-row .actions-inline {
  margin-top: 0;
}

.reports-row strong,
.reports-row-profile strong {
  color: var(--text);
}

/* Keep the grid cells shrinkable so a long title can clamp instead of forcing
   the row taller. The full title stays available on hover. */
.reports-row > div {
  min-width: 0;
}

/* Title + saved-date on one line: the title clamps with an ellipsis while the
   date stays pinned and fully visible, so every saved report is dated. */
.reports-title-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.reports-row-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.reports-title-date {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.82rem;
}

.reports-row-profile,
.reports-row-status {
  display: grid;
  gap: 0.2rem;
}

.reports-row-meta,
.reports-hub-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.reports-row-meta {
  margin-top: 0.3rem;
}

.reports-hub-pill-row {
  margin-top: 0.45rem;
}

.reports-hub-pill-row-compact {
  margin-top: 0.25rem;
}

.report-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  background: #f2f5fb;
  border: 1px solid rgba(126, 140, 165, 0.16);
  color: #536074;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.1;
}

.report-meta-chip.is-sensitive {
  background: #fdf2f1;
  border-color: rgba(195, 114, 102, 0.22);
  color: #9a4f46;
}

.report-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: end;
}

.report-finance-filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-filter-note {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.report-filter-note strong {
  color: var(--text);
}

/* One shared grid: form fields fill columns 1-2, the three support panels sit
   in column 3 pinned to the same rows as Category / Organisation / Start, so
   every row lines up across all three columns. */
.artist-cv-builder-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem 0.7rem;
  align-items: start;
}

.artist-cv-builder-columns > .cv-col1 { grid-column: 1; }
.artist-cv-builder-columns > .cv-col2 { grid-column: 2; }
.artist-cv-builder-columns > .cv-wide { grid-column: 1 / 3; }
.artist-cv-builder-columns > .cv-side { grid-column: 3; margin-top: 0; }

.cv-side-1 { grid-row: 1 / 3; }
.cv-side-2 { grid-row: 3 / 6; }

/* The side column is narrow, so stack each file/entry row: title + meta on
   their own line(s), action buttons wrapping below instead of squeezing the
   title into one-word-per-line. */
.cv-side .report-doc-row {
  grid-template-columns: minmax(0, 1fr);
}
.cv-side .report-doc-row .actions-inline {
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .artist-cv-builder-columns {
    grid-template-columns: 1fr;
  }
  .artist-cv-builder-columns > .cv-col1,
  .artist-cv-builder-columns > .cv-col2,
  .artist-cv-builder-columns > .cv-wide,
  .artist-cv-builder-columns > .cv-side {
    grid-column: auto;
  }
  .cv-side-1,
  .cv-side-2 {
    grid-row: auto;
  }
}

.artist-cv-field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.artist-cv-field input,
.artist-cv-field select,
.artist-cv-field textarea {
  width: 100%;
  min-width: 0;
}

/* Force every single-line CV control to one exact height so rows line up in
   Safari too (native <select> / date inputs ignore min-height otherwise). */
.artist-cv-field input:not([type="checkbox"]):not([type="radio"]),
.artist-cv-field select {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

.report-upload-grid > label input {
  height: 44px;
  box-sizing: border-box;
}

.reports-hub-shell,
.reports-step-panel,
.reports-history-shell {
  display: grid;
  gap: 0.9rem;
}

.reports-hub-chooser {
  display: grid;
  gap: 0.9rem;
}

.reports-ecosystem-panel {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
}

.reports-ecosystem-panel-compact {
  gap: 0.9rem;
}

.reports-ecosystem-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 0.75rem;
  width: min(540px, 100%);
}

.reports-ecosystem-stat {
  display: grid;
  gap: 0.18rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(126, 140, 165, 0.16);
  border-radius: 16px;
  background: #fbfcff;
}

.reports-ecosystem-stat span {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.reports-ecosystem-stat strong {
  font-size: 1.35rem;
  color: var(--text);
}

.reports-ecosystem-stat small {
  color: var(--muted);
}

.reports-ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

.reports-ecosystem-card {
  display: grid;
  gap: 0.6rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.reports-ecosystem-card.is-live {
  border-color: rgba(122, 164, 127, 0.26);
  box-shadow: inset 0 0 0 1px rgba(122, 164, 127, 0.08);
}

.reports-ecosystem-card.is-partial {
  border-color: rgba(196, 154, 88, 0.28);
  box-shadow: inset 0 0 0 1px rgba(196, 154, 88, 0.08);
}

.reports-ecosystem-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
}

.reports-ecosystem-card-head h4 {
  margin: 0;
  font-size: 1rem;
}

.reports-ecosystem-card-head .subtitle {
  margin: 0.28rem 0 0;
}

.reports-ecosystem-list {
  display: grid;
  gap: 0.35rem;
}

.reports-ecosystem-list span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.reports-step-label {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.56rem;
  border-radius: 999px;
  background: #eff4ff;
  color: #4860a9;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reports-hub-selected-card {
  display: grid;
  gap: 0.25rem;
  min-width: min(320px, 100%);
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
}

.reports-hub-selected-card strong {
  color: var(--text);
  font-size: 1rem;
}

.reports-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.reports-hub-stack {
  display: grid;
  gap: 0.75rem;
}

.reports-hub-categories {
  display: grid;
  gap: 1rem;
}

.reports-hub-category {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(247, 249, 252, 0.98));
}

.reports-hub-accordion {
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.reports-hub-accordion.is-open {
  border-color: rgba(76, 108, 176, 0.28);
  box-shadow: 0 10px 24px rgba(28, 42, 71, 0.06);
}

.reports-hub-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.reports-hub-accordion.is-open .reports-hub-accordion-trigger {
  background: linear-gradient(180deg, rgba(244, 247, 255, 0.98), rgba(250, 252, 255, 0.98));
}

.reports-hub-accordion-trigger:hover,
.reports-hub-accordion-trigger:focus-visible {
  background: rgba(244, 247, 255, 0.9);
}

.reports-hub-accordion-copy {
  display: grid;
  gap: 0.22rem;
}

.reports-hub-accordion-copy strong {
  color: var(--text);
  font-size: 0.98rem;
}

.reports-hub-accordion.is-open .reports-hub-accordion-copy strong {
  color: #29407f;
}

.reports-hub-accordion-copy span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.reports-hub-accordion-side {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.reports-hub-accordion-caret {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.reports-hub-accordion.is-open .reports-hub-accordion-caret {
  color: #4860a9;
}

.reports-hub-accordion-panel {
  display: grid;
  gap: 0.8rem;
  padding: 0.2rem 1rem 1rem;
  border-top: 1px solid rgba(127, 143, 164, 0.14);
}

.reports-hub-accordion-list {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.reports-hub-accordion-list span {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  background: #f4f6fb;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.reports-hub-category.is-selected {
  border-color: rgba(124, 159, 232, 0.35);
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.08);
}

.reports-hub-category-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.reports-hub-category-head h4 {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
}

.reports-hub-category-head .subtitle {
  margin: 0.25rem 0 0;
}

.reports-hub-inline-workflow {
  display: grid;
  gap: 0.9rem;
  padding-top: 0.1rem;
}

.reports-hub-inline-workflow > .page-card {
  margin: 0;
}

.reports-hub-card {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  width: 100%;
  font: inherit;
  appearance: none;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.reports-hub-card strong {
  font-size: 0.99rem;
}

.reports-hub-card > span:not(.reports-hub-card-step) {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.reports-hub-card-step {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: #f3f6ff;
  color: #5975bb;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reports-hub-card:hover,
.reports-hub-card:focus-visible {
  border-color: #8ca7e5;
  box-shadow: 0 0 0 1px rgba(140, 167, 229, 0.16);
  transform: translateY(-1px);
}

.reports-hub-card.is-selected {
  border-color: #7c9fe8;
  background: #f4f8ff;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.2);
}

.reports-workflow-panel {
  display: grid;
  gap: 0.9rem;
}

.reports-history-shell {
  margin-top: 0.6rem;
}

.report-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.report-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.report-summary-grid-tight {
  margin-top: 0;
  margin-bottom: 0.9rem;
}

.report-summary-card {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.report-summary-card span {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.report-summary-card strong {
  font-size: 1.3rem;
  color: var(--text);
}

.report-summary-card.is-pending-card {
  background: #fffdf7;
  border-color: #ecd9b0;
}
.report-summary-card.is-pending-card strong { color: #8a5a16; }

/* Pending money: chase list */
.chase-list { display: grid; gap: 0.7rem; }
.chase-item {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-left: 4px solid #c9d8f2;
  border-radius: 12px;
  background: #fff;
}
.chase-item.is-overdue { border-left-color: #d98a4f; background: #fffaf3; }
.chase-item .chase-meta { color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.chase-item .chase-in { color: #245f52; }
.chase-item .chase-out { color: #8a4451; }
.chase-item .chase-q { font-weight: 600; color: var(--text); margin-top: 2px; }
.chase-overdue {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f6d8c0;
  color: #8a4a16;
  font-size: 0.74rem;
  font-weight: 700;
}
.chase-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chase-actions .btn { padding: 0.34rem 0.7rem; font-size: 0.85rem; }

/* Budgets & Grants (ring-fenced funds) */
.fund-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.8rem; }
.fund-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid #6f86c9;
  border-radius: 12px;
  background: #fff;
}
.fund-card.is-overspent { border-left-color: #c0603f; background: #fff8f4; }
.fund-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.fund-card-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.fund-card-actions .btn { padding: 0.24rem 0.55rem; font-size: 0.8rem; }
.fund-figures { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.9rem; color: var(--muted); }
.fund-figures strong { color: var(--text); }
.fund-bar { height: 8px; border-radius: 999px; background: #eceff5; overflow: hidden; }
.fund-bar-fill { display: block; height: 100%; background: #4860a9; border-radius: 999px; }
.fund-bar-fill.is-over { background: #c0603f; }
.fund-warn { margin: 0; color: #a0492c; font-weight: 600; font-size: 0.86rem; }
.fund-tax-note { color: #8a5a16; }
.tax-likelihood-note {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  background: #eef2f7;
  color: #41506a;
}
.tax-likelihood-note[data-level="yes"] { background: #fbeae0; color: #8a4a16; }
.tax-likelihood-note[data-level="no"] { background: #e3efe6; color: #2f7a4f; }
.tax-likelihood-note[data-level="unknown"] { background: #eef2f7; color: #5a6a83; }
.fund-purpose { margin: 0; color: var(--muted); }
.fund-open { font-size: 1.02rem; font-weight: 700; color: var(--text); text-align: left; }
.fund-card.is-complete { opacity: 0.72; }
.project-status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; vertical-align: middle; }
.project-status.is-active { background: #e6f0ff; color: #2f56b5; }
.project-status.is-hold { background: #fdf0d8; color: #8a5a16; }
.project-status.is-done { background: #e3efe6; color: #2f7a4f; }
.project-section-head { margin: 1.2rem 0 0.5rem; }
.project-entry-list { display: grid; gap: 0.4rem; }
.project-entry-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.project-entry-open {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.project-entry-open:hover { background: #f7f9ff; }
.project-entry-open .pe-date { color: var(--muted); font-size: 0.85rem; }
.project-entry-open .pe-amount { font-weight: 600; white-space: nowrap; }
.pe-invoice { align-self: center; white-space: nowrap; }
.project-links-soon { margin-top: 1rem; font-style: italic; }
.project-doc-add { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin-bottom: 0.8rem; }
.project-doc-add .field-inline { display: grid; gap: 0.2rem; }
.project-doc-upload { cursor: pointer; }
.project-doc-group { margin-bottom: 0.8rem; }
.project-doc-group h5 { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.project-doc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.project-doc-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.project-doc-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; }
.project-doc-meta { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.project-doc-meta strong { font-size: 0.92rem; }
.project-doc-meta .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-doc-del { padding: 0.2rem 0.5rem; font-size: 0.8rem; }
.fund-timeframe { margin: 0.1rem 0 0.3rem; }
.fund-next { margin: 0.2rem 0 0; color: var(--accent-dark); font-weight: 600; }
.project-todo-count { font-weight: 400; color: var(--muted); font-size: 0.82rem; }
.project-todo-add { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.project-todo-add input { flex: 1; min-width: 0; }
.project-todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.project-todo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.project-todo label { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; flex: 1; min-width: 0; }
.project-todo.is-done span { text-decoration: line-through; color: var(--muted); }
.project-todo-del { padding: 0.15rem 0.45rem; color: var(--muted); }
.project-plan-list { margin: 0.2rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.25rem; }
.project-plan-list li { color: var(--text); }
.project-need-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0; }
.project-need-tags .need-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: #eef2fb;
  color: #3c4a63;
  font-size: 0.8rem;
  font-weight: 600;
}

.report-collapsible {
  margin-top: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
  padding: 0.4rem 0.65rem 0.65rem;
}

.report-collapsible summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  padding: 0.3rem 0;
}

.report-collapsible summary::-webkit-details-marker {
  display: none;
}

.report-preview-list,
.report-doc-bank {
  display: grid;
  gap: 0.75rem;
}

.report-compact-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.report-compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: start;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.report-compact-side {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.report-preview-row,
.report-doc-row,
.report-doc-artwork-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  background: #fff;
}

.report-preview-row,
.report-doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: flex-start;
}

.report-doc-row > :first-child,
.report-preview-row > :first-child,
.report-compact-row > :first-child {
  min-width: 0;
}

.report-doc-row strong,
.report-preview-row strong,
.report-compact-row strong {
  display: block;
  margin-bottom: 0.15rem;
}

.report-doc-row .subtitle,
.report-preview-row .subtitle,
.report-compact-row .subtitle {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.report-doc-row-compact {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.report-manual-exhibition-shell,
.report-manual-exhibition-list,
.report-manual-exhibition-card,
.report-manual-exhibition-artworks,
.report-manual-exhibition-artwork-list,
.report-manual-exhibition-review,
.report-manual-exhibition-review-list {
  display: grid;
  gap: 0.85rem;
}

.report-manual-exhibition-card {
  padding: 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fcfdff;
}

.report-manual-exhibition-list-compact {
  gap: 0.55rem;
}

.report-manual-exhibition-card-compact {
  padding: 0;
  overflow: hidden;
}

.report-manual-exhibition-card-compact.is-expanded {
  border-color: rgba(111, 145, 230, 0.28);
  background: #fcfdff;
  box-shadow: 0 0 0 1px rgba(111, 145, 230, 0.08);
}

.report-manual-exhibition-compact-head {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 0.9rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.72rem 0.85rem;
  cursor: pointer;
}

.report-manual-exhibition-compact-head:hover,
.report-manual-exhibition-compact-head:focus-visible {
  background: #f8fbff;
}

.report-manual-exhibition-compact-date {
  font-size: 0.88rem;
  font-weight: 700;
  color: #24344f;
  line-height: 1.45;
}

.report-manual-exhibition-compact-main {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.report-manual-exhibition-compact-main strong {
  font-size: 0.98rem;
  margin: 0;
}

.report-manual-exhibition-compact-main small {
  color: #63738b;
  font-size: 0.84rem;
  line-height: 1.4;
}

.report-manual-exhibition-compact-meta {
  display: grid;
  gap: 0.35rem;
  justify-items: end;
  align-content: center;
}

.report-manual-exhibition-disclosure {
  color: #63738b;
  font-size: 0.82rem;
}

.report-manual-exhibition-compact-body {
  display: grid;
  gap: 0.7rem;
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid rgba(127, 143, 164, 0.14);
}

.report-manual-exhibition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.report-manual-exhibition-grid-compact {
  gap: 0.65rem;
}

.report-manual-exhibition-grid .full,
.report-manual-exhibition-artworks,
.report-manual-exhibition-review-row {
  grid-column: 1 / -1;
}

.report-manual-exhibition-artworks {
  padding: 0.9rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 14px;
  background: #fff;
}

.report-manual-exhibition-artwork-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: end;
}

.report-manual-exhibition-artwork-actions {
  display: flex;
  justify-content: flex-end;
}

.report-manual-exhibition-card-actions {
  justify-content: flex-start;
}

.report-manual-exhibition-review-artworks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.report-manual-exhibition-review .actions-inline {
  align-self: start;
}

.report-manual-exhibition-review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.report-manual-exhibition-review-groups {
  display: grid;
  gap: 0.8rem;
}

.report-manual-exhibition-review-group {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(127, 143, 164, 0.14);
  border-radius: 14px;
  background: #fff;
}

.report-manual-exhibition-review-group-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
}

.report-manual-exhibition-review-group-head h5 {
  margin: 0;
  font-size: 0.92rem;
}

.report-manual-exhibition-review-copy {
  display: grid;
  gap: 0.12rem;
}

.artist-exhibition-history-stage-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.artist-exhibition-history-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(127, 143, 164, 0.16);
  background: #f8fafd;
  color: #5f6f87;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
}

.artist-exhibition-history-stage.is-active {
  background: #eaf1ff;
  border-color: rgba(77, 113, 208, 0.25);
  color: #24458c;
}

.artist-exhibition-history-stage.is-complete {
  background: #eef7ef;
  border-color: rgba(58, 140, 91, 0.2);
  color: #2d6d47;
}

.report-status-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.report-manual-exhibition-secondary {
  grid-column: 1 / -1;
  border: 1px solid rgba(127, 143, 164, 0.14);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  background: #fff;
}

.report-manual-exhibition-secondary summary {
  cursor: pointer;
  font-weight: 600;
  color: #24344f;
}

.report-manual-exhibition-secondary[open] {
  display: grid;
  gap: 0.65rem;
}

.report-manual-exhibition-inline-actions {
  display: flex;
  justify-content: flex-end;
}

.artist-exhibition-history-sticky-actions {
  position: sticky;
  bottom: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 0.2rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px rgba(29, 41, 67, 0.08);
  z-index: 4;
}

.artist-exhibition-history-sticky-copy {
  display: grid;
  gap: 0.14rem;
}

.artist-exhibition-history-sticky-copy strong {
  font-size: 0.94rem;
}

.artist-exhibition-history-sticky-copy span {
  color: #63738b;
  font-size: 0.84rem;
}

.report-doc-group {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.report-doc-group h4 {
  margin: 0;
}

.report-toggle-stack {
  display: grid;
  gap: 0.75rem;
}

.report-toggle-group {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 14px;
  background: #fff;
}

.report-toggle-group h5 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.report-optional-panel {
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.report-optional-panel summary {
  cursor: pointer;
  list-style: none;
  padding: 0.8rem 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.report-optional-panel summary::-webkit-details-marker {
  display: none;
}

.report-optional-panel-body {
  display: grid;
  gap: 0.75rem;
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid rgba(127, 143, 164, 0.12);
}

.report-doc-artwork-group {
  display: grid;
  gap: 0.55rem;
}

.report-doc-file-group {
  display: grid;
  gap: 0.45rem;
}

.report-inline-editor {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  background: #fbfcff;
}

.report-inline-editor summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.report-inline-editor[open] {
  display: grid;
  gap: 0.6rem;
}

.report-inline-editor textarea {
  min-height: 8rem;
}

.report-condense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 0.5rem;
}

.report-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) auto;
  gap: 0.75rem;
  align-items: end;
  justify-content: start;
}

.report-upload-grid > label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.report-upload-grid > label input {
  width: 100%;
}

.report-upload-actions {
  display: flex;
  align-items: end;
  min-height: 100%;
}

.report-route-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-route-grid {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.report-route-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

.report-route-summary .report-summary-card {
  padding: 0.5rem 0.65rem;
}

.report-route-summary .report-summary-card strong {
  font-size: 1.05rem;
}

.report-route-panel {
  display: grid;
  gap: 0.6rem;
}

.report-route-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.45rem;
}

.report-route-meta-grid > div {
  display: grid;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcff;
}

.report-route-meta-grid strong {
  color: var(--text);
  font-size: 0.86rem;
}

.report-route-timeline {
  display: grid;
  gap: 0.4rem;
}

/* Compact, aligned route entries: info on the left, date + action on the right. */
.report-route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.2rem 0.85rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.report-route-main {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.report-route-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
}

.report-route-title-line strong {
  font-size: 0.9rem;
}

.report-route-meta-inline {
  font-size: 0.76rem;
  color: var(--muted);
}

.report-route-date {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
}

.report-route-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  text-align: right;
}

.report-route-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.report-route-body {
  display: grid;
  gap: 0.2rem;
  font-size: 0.8rem;
}

.report-route-body .subtitle {
  margin: 0;
}

.report-format-select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.report-import-review {
  margin: 0.5rem 0 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}
.report-import-review textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.85rem;
}

.field-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.74rem;
  color: var(--accent, #3a5bd9);
}

.report-import-status {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  font-size: 0.84rem;
  border: 1px solid var(--line);
}
.report-import-status-ok { background: #effaf1; border-color: #b7e4c2; color: #1c6b34; }
.report-import-status-warn { background: #fff7ec; border-color: #f3d9a8; color: #8a5a14; }

/* Aligned, read-only exhibition history table. */
.exhibition-history-preview {
  margin: 0.6rem 0 1rem;
}
.exhibition-history-preview-head h5 {
  margin: 0;
}
.exhibition-history-table-wrap {
  margin-top: 0.5rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.exhibition-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 720px;
}
.exhibition-history-table th,
.exhibition-history-table td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(24, 33, 50, 0.08);
  vertical-align: top;
}
.exhibition-history-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: #fbfcff;
  white-space: nowrap;
}
.exhibition-history-table tbody tr:last-child td {
  border-bottom: 0;
}

.report-route-count {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.4em;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: var(--chip-bg, #eef2ff);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

/* Artwork thumbnails on a route timeline entry (works shown / seen). */
.route-thumb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
  align-items: center;
}
.route-thumb {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #fbfcff;
}
.route-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}
.route-thumb-more {
  font-size: 0.72rem;
  color: var(--muted);
  align-self: center;
}

/* Inline link-styled button (e.g. a clickable person name in the networking table). */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent, #3a5bd9);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-button:hover {
  text-decoration-thickness: 2px;
}

.doc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.doc-chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.event-description-bank {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.event-description-bank-head {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: center;
}

.event-description-bank .doc-chip {
  background: #f8faff;
}

@media (max-width: 980px) {
  .report-workspace-grid,
  .report-filter-grid,
  .report-summary-grid,
  .report-upload-grid,
  .report-manual-exhibition-artwork-row {
    grid-template-columns: 1fr;
  }

  .report-preview-row,
  .report-doc-row,
  .event-description-bank-head,
  .report-compact-row {
    flex-direction: column;
    align-items: stretch;
  }

  .report-condense-row {
    grid-template-columns: 1fr;
  }

  .report-preview-row,
  .report-doc-row,
  .report-compact-row,
  .report-route-head {
    grid-template-columns: 1fr;
  }

  .report-manual-exhibition-compact-head {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.72rem 0.78rem;
  }

  .report-manual-exhibition-compact-meta {
    justify-items: start;
    grid-auto-flow: column;
    justify-content: space-between;
  }

  .report-manual-exhibition-review-group-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .artist-exhibition-history-stage-row {
    grid-template-columns: 1fr;
  }

  .artist-exhibition-history-sticky-actions {
    position: static;
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 0.8rem;
  }

  .artist-exhibition-history-sticky-actions .toolbar-controls {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .artist-exhibition-history-sticky-actions .toolbar-controls .btn {
    width: 100%;
  }

}

.hidden { display: none !important; }
.modal {
  position: fixed; inset: 0; background: rgba(24, 33, 50, 0.45);
  display: grid; place-items: center; padding: 1rem; z-index: 40;
}
.modal.artwork-edit-top-aligned {
  place-items: start center;
  overflow-y: auto;
}
.modal.contact-edit-top-aligned {
  place-items: start center;
  overflow-y: auto;
}
.modal.artwork-edit-top-aligned .modal-card {
  margin-top: 0.75rem;
}
.modal.contact-edit-top-aligned .modal-card {
  margin-top: 0.75rem;
}
.modal-card {
  width: min(680px, 100%); max-height: 92vh; overflow: auto;
  background: var(--surface); border-radius: 14px; border: 1px solid var(--line); padding: 1rem;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.icon-btn { border: 1px solid var(--line); background: white; border-radius: 8px; padding: 0.4rem 0.6rem; cursor: pointer; }
.modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Grid items default to min-width:auto and refuse to shrink below their content
   (e.g. a <select> with long option text), blowing a column past the card and
   forcing horizontal scroll. Let every direct child shrink to its column. */
.modal-form > * { min-width: 0; }
.modal-form-save-bar .toolbar { flex-wrap: wrap; }
.modal-form label { display: grid; gap: 0.55rem; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.35rem; }
.modal-actions { grid-column: span 2; display: flex; justify-content: end; gap: 0.7rem; margin-top: 0.5rem; }
.logistics-untick-actions { flex-wrap: wrap; }


.modal-card.wide-modal {
  width: min(1120px, 100%);
}


.contact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contact-form .form-section {
  background: #f8f9fc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  margin-top: 0.5rem;
}

.contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.contact-form select {
  min-height: 44px;
}

.contact-row-main {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.contacts-overview-shell {
  display: grid;
  gap: 0.9rem;
}

.contacts-toolbar-controls {
  flex-wrap: wrap;
  align-items: center;
}

.contacts-view-toggle {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}

.contacts-view-toggle .btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.contacts-grid {
  display: grid;
  gap: 0.65rem;
}

.contacts-grid--list {
  grid-template-columns: minmax(0, 1fr);
}

.contacts-grid--tile {
  /* Desktop: cap at 6 columns (5 gaps of 0.65rem) so tiles stay big enough to
     read; the 16-colour palette keeps a colour out of its row + the rows
     above/below. Tiles grow to fill the width; narrower screens drop columns. */
  grid-template-columns: repeat(auto-fit, minmax(max(190px, calc((100% - 3.25rem) / 6)), 1fr));
  align-items: start;
}

/* Phone (the app): 2 per row, Pinterest-style, so the image + name are large. */
@media (max-width: 640px) {
  .contacts-grid--tile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contact-summary-card {
  align-items: flex-start;
  gap: 0.72rem;
  padding: 0.72rem 0.8rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.contact-summary-card:hover {
  border-color: rgba(63, 106, 216, 0.22);
  box-shadow: 0 10px 24px rgba(24, 33, 50, 0.06);
  transform: translateY(-1px);
}

.contact-summary-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.32rem;
}

.contact-summary-link {
  cursor: pointer;
}

.contact-summary-link:focus-visible {
  outline: 2px solid rgba(63, 106, 216, 0.45);
  outline-offset: 4px;
  border-radius: 14px;
}

.contact-summary-header {
  align-items: flex-start;
  margin-bottom: 0.05rem;
  gap: 0.55rem;
}

.contact-summary-heading {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.contact-summary-heading strong {
  font-size: 0.98rem;
  line-height: 1.2;
}

.contact-summary-role {
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--muted);
}

.contact-summary-line {
  font-size: 0.86rem;
  line-height: 1.36;
  color: var(--text);
  word-break: break-word;
}

.contact-summary-details,
.contact-summary-context {
  color: var(--muted);
}

.contact-summary-note {
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contact-art-thumbs {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.contact-art-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.contact-artist-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  background: var(--surface, #fbfcff);
  margin: 0.4rem 0;
}

.contact-artist-details-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.contact-artist-details-hint {
  margin: 0.1rem 0 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.contact-artist-gallery-label {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.contact-summary-columns {
  display: grid;
  gap: 0.35rem 1.25rem;
  margin-top: 0.5rem;
  align-items: start;
}

.contact-col-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.contact-col-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.contact-col-value {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--text);
  overflow-wrap: anywhere;
}

.contact-col-cell--empty .contact-col-value {
  color: var(--muted);
  opacity: 0.55;
}

@media (max-width: 640px) {
  .contact-summary-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.contact-network-card {
  margin-top: 0.25rem;
}

.contact-summary-actions {
  flex: 0 1 auto;
  display: block;
}

.contact-summary-action-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.4rem;
  width: 100%;
}

.contact-summary-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-content: start;
}

.contact-summary-action-group .btn,
.contact-summary-action-group .actions-inline .btn {
  width: auto;
  justify-content: center;
  white-space: nowrap;
}

.contact-summary-action-group .actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0;
}

.contact-summary-action-group--secondary .actions-inline {
  justify-content: stretch;
}

.contact-badge-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.contact-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
}

.contact-empty-state {
  margin: 0;
}

.contacts-grid--tile .contact-summary-card {
  min-height: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

/* In tile view the body and actions stack, so neither cramps the other. */
.contacts-grid--tile .contact-summary-body {
  width: 100%;
}

.contacts-grid--tile .contact-summary-actions {
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
}

.contacts-grid--tile .contact-summary-action-columns {
  justify-content: flex-start;
}

.contacts-grid--tile .contact-summary-action-group {
  flex: 1 1 auto;
}

.contacts-grid--tile .contact-summary-header {
  gap: 0.6rem;
}

.contacts-grid--tile .contact-summary-heading {
  min-width: 0;
}

.contacts-grid--tile .contact-summary-heading strong {
  overflow-wrap: anywhere;
}

/* Tile view: the whole card IS one box — a square image/colour tile with the
   name inside (placeholder) or captioned over the photo. No text or buttons
   hang below; clicking the box opens the contact. */
.contacts-grid--tile .contact-summary-card {
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  gap: 0;
}

.contacts-grid--tile .contact-summary-body,
.contacts-grid--tile .contact-summary-actions {
  display: none;
}

.contact-tile-image-wrap {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
}

/* Hover reveal: a photo fills the whole box (over the colour frame), hiding the
   info beneath. Pointer-events off so clicks still open the contact. */
.contact-tile-hover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  z-index: 2;
}

.contact-tile-image-wrap:hover .contact-tile-hover-photo,
.contact-tile-image-wrap:focus-within .contact-tile-hover-photo {
  opacity: 1;
}

.contact-tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  background: rgba(17, 24, 39, 0.62);
  color: #fff;
  text-align: left;
}

.contact-tile-caption strong {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.contact-tile-caption span {
  font-size: 0.76rem;
  opacity: 0.85;
}

.contact-tile-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Placeholder = white square with a strong colour frame and colour-matched
   initials. The colour drives both the border and the text via currentColor. */
.contact-tile-image.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #fff;
  border: 10px solid currentColor;
  color: #4a5870;
  padding: 10px;
  text-align: center;
}

.contact-tile-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.contact-tile-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.18;
  color: inherit;
  overflow-wrap: anywhere;
}

.contact-tile-sub {
  font-size: 0.82rem;
  color: inherit;
  opacity: 0.85;
}

.contact-tile-image.placeholder[data-avatar-color="blue"] { color: #2f6ad8; }
.contact-tile-image.placeholder[data-avatar-color="violet"] { color: #6d49cf; }
.contact-tile-image.placeholder[data-avatar-color="teal"] { color: #128579; }
.contact-tile-image.placeholder[data-avatar-color="green"] { color: #2f8a50; }
.contact-tile-image.placeholder[data-avatar-color="amber"] { color: #c8881a; }
.contact-tile-image.placeholder[data-avatar-color="rose"] { color: #c8456b; }
.contact-tile-image.placeholder[data-avatar-color="slate"] { color: #4a5870; }
.contact-tile-image.placeholder[data-avatar-color="red"] { color: #d23b3b; }
.contact-tile-image.placeholder[data-avatar-color="orange"] { color: #db7726; }
.contact-tile-image.placeholder[data-avatar-color="lime"] { color: #6fa01c; }
.contact-tile-image.placeholder[data-avatar-color="sky"] { color: #1c9fd1; }
.contact-tile-image.placeholder[data-avatar-color="plum"] { color: #9b3f8f; }
.contact-tile-image.placeholder[data-avatar-color="pink"] { color: #d6489e; }
.contact-tile-image.placeholder[data-avatar-color="brown"] { color: #97632f; }
.contact-tile-image.placeholder[data-avatar-color="indigo"] { color: #3a3fb0; }
.contact-tile-image.placeholder[data-avatar-color="navy"] { color: #233a7a; }

/* The hero image replaces the little avatar in tile view; restore inner padding
   the full-bleed image removed from the card. */
.contacts-grid--tile .contact-summary-header .contact-avatar { display: none; }
.contacts-grid--tile .contact-summary-body { padding: 0.7rem 0.85rem 0; }
.contacts-grid--tile .contact-summary-actions { padding: 0.7rem 0.85rem 0.8rem; }

/* List view: lay the name and details across the row so the empty middle is
   used and every row is the same compact height. */
.contacts-grid--list .contact-summary-card {
  align-items: center;
  gap: 1.2rem;
}

.contacts-grid--list .contact-summary-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1.6rem;
}

.contacts-grid--list .contact-summary-header {
  flex: 0 0 220px;
  margin-bottom: 0;
  min-width: 0;
}

.contacts-grid--list .contact-summary-line {
  margin: 0;
  flex: 0 1 auto;
}

.contacts-grid--list .contact-summary-details {
  flex: 1 1 220px;
}

/* A fixed name column means the detail columns start at the same x on every
   row, so phones sit under phones and emails under emails. */
.contacts-grid--list .contact-summary-columns {
  flex: 1 1 300px;
  margin-top: 0;
}

@media (max-width: 720px) {
  .contacts-grid--list .contact-summary-header {
    flex-basis: 100%;
  }
}

.contacts-import-panel {
  display: grid;
  gap: 1rem;
}

.contacts-import-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.contacts-import-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.2fr);
  gap: 1rem;
}

.contacts-import-inputs,
.contacts-import-preview {
  display: grid;
  gap: 0.8rem;
}

.contacts-import-inputs textarea {
  min-height: 150px;
}

.contacts-import-action-row,
.contacts-import-footer,
.settings-custom-wallpaper-actions,
.settings-custom-wallpaper-source-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.contacts-import-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
}

.contacts-import-preview-list {
  display: grid;
  gap: 0.65rem;
}

.contacts-import-row {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.8fr);
  gap: 0.8rem;
  background: rgba(255, 255, 255, 0.78);
}

.contacts-import-row-main,
.contacts-import-row-actions {
  display: grid;
  gap: 0.35rem;
}

.contacts-import-row-actions {
  align-content: start;
}

.contacts-import-duplicate {
  font-size: 0.84rem;
  color: var(--accent-dark);
}

.contacts-import-empty {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 1rem;
}

.settings-custom-wallpaper {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(24, 33, 50, 0.08);
}

.settings-custom-wallpaper-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(220px, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.settings-custom-wallpaper-controls,
.settings-custom-wallpaper-preview-shell {
  display: grid;
  gap: 0.8rem;
}

/* Lone "Use a logged artwork image" picker: stack the label and select with a
   little breathing room and stop the select stretching across the whole column. */
.settings-wallpaper-artwork-field {
  display: grid;
  gap: 0.35rem;
}
.settings-wallpaper-artwork-field select {
  width: 100%;
  max-width: 460px;
}

.settings-custom-wallpaper-preview-card,
.settings-custom-wallpaper-empty {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.72);
}

.settings-custom-wallpaper-preview {
  min-height: 220px;
  border-radius: 14px;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.settings-custom-wallpaper-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 20, 34, 0.12) 0%, rgba(15, 20, 34, 0.28) 100%);
}

.settings-custom-wallpaper-preview-copy {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: grid;
  gap: 0.3rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
}

.contact-mini-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0.65rem 0.75rem;
  display: grid;
  gap: 0.3rem;
}

.contact-mini-title {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-keyline {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.45;
}

.contact-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #eef2fb;
  flex: 0 0 38px;
}

.contact-avatar.placeholder {
  background: linear-gradient(135deg, #d9e2f9, #edf1fb);
}

.contact-avatar.symbol,
.contact-avatar.initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-avatar.symbol {
  color: #394a67;
  background: #f8faff;
}

.contact-avatar.symbol svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-avatar.initials {
  font-size: 0.78rem;
  font-weight: 700;
  color: #50607d;
  letter-spacing: 0.04em;
}

.contact-avatar-picker-field {
  display: grid;
  gap: 0.75rem;
}

.contact-avatar-picker-preview {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: rgba(248, 250, 255, 0.78);
}

.contact-avatar-picker-current .contact-avatar {
  width: 64px;
  height: 64px;
  flex-basis: 64px;
}
/* Make the chosen icon fill more of the large preview circle. */
.contact-avatar-picker-current .contact-avatar.symbol svg {
  width: 44px;
  height: 44px;
  stroke-width: 1.7;
}
.contact-avatar-picker-current .contact-avatar.initials {
  font-size: 1.5rem;
}

/* Photo upload, icon and colour aligned in one clean row. */
.contact-avatar-picker-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: end;
}

.contact-avatar-field {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0;
  min-width: 0;
}

.contact-avatar-field select,
.contact-avatar-field input[type="file"] {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 620px) {
  .contact-avatar-picker-row {
    grid-template-columns: 1fr;
  }
}

/* Collapsible form sections (click the header to expand). */
.form-section-collapsible {
  cursor: pointer;
  user-select: none;
}

.form-section-collapsible h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
}

.form-section-collapsible:hover h3 {
  color: var(--accent, #3f6ad8);
}

.form-section-collapsible .section-caret {
  font-size: 0.8em;
  color: var(--muted);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}

.form-section-collapsible.is-collapsed .section-caret {
  transform: rotate(-90deg);
}

/* Higher specificity than .checkbox-row { display: flex !important } so a
   collapsed section also hides its checkbox members. */
.modal-form .section-collapsed-hidden,
.section-collapsed-hidden {
  display: none !important;
}

/* Same reason: a checkbox-row explicitly toggled .hidden (e.g. a pop-up-only
   field on an art trail or exhibition) must actually hide, not stay flexed. */
.modal-form label.checkbox-row.hidden,
label.checkbox-row.hidden {
  display: none !important;
}

/* Colour swatch row */
.contact-avatar-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.contact-avatar-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(24, 33, 50, 0.14);
  background: #cfd8e6;
  cursor: pointer;
  padding: 0;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.contact-avatar-color-swatch.is-neutral {
  background: linear-gradient(135deg, #d9e2f9, #eef2fb);
}

.contact-tile-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.contact-tile-color-swatch.is-auto {
  background: conic-gradient(#2f6ad8, #6d49cf, #c8456b, #c8881a, #2f8a50, #128579, #2f6ad8);
}

.residency-net {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.3rem 0;
}

.residency-net.is-positive {
  color: #2f855a;
}

.residency-net.is-negative {
  color: #c0392b;
}

.workshop-net {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.3rem 0;
}

.workshop-net.is-positive {
  color: #2f855a;
}

.residency-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.residency-thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.trail-network-block {
  margin-top: 0.75rem;
}

.trail-network-heading {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
}

.trail-event-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.trail-event-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.trail-event-row:hover {
  border-color: var(--accent, #6b5bd2);
}

/* A sub-heading inside a custom modal grid (e.g. "Parking" in the
   accommodation pop-up): full width, a little breathing room above. */
.modal-form .modal-subhead {
  margin: 0.4rem 0 -0.2rem;
  font-size: 0.95rem;
  color: var(--text);
}

.event-travel-actions {
  margin-top: 0.55rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.coming-up-stay {
  margin-top: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.coming-up-stay-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.coming-up-stay-row > span {
  color: var(--muted);
  white-space: nowrap;
}

.coming-up-stay-row > strong {
  text-align: right;
}

/* Packaging pop-up: the materials tick list as a compact wrapping grid. */
.packaging-material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 0.9rem;
  margin-top: 0.35rem;
}

.packaging-material-grid .checkbox-row {
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* Packaging: one itemised line per material (company, quantity, cost). */
.pack-items-head { margin-top: 0.3rem; }
.pack-items {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pack-items-empty { margin: 0.2rem 0; }
.pack-item {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.55rem 0.65rem;
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.pack-item-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: center;
}
.pack-item-name { font-weight: 600; font-size: 0.9rem; }
.pack-item-name-input, .pack-item-qty { min-width: 0; }
.pack-item-company { min-width: 0; width: 100%; }
.pack-item-cost { display: inline-flex; align-items: center; gap: 0.15rem; }
.pack-item-cost input { width: 100%; min-width: 0; }
.pack-item-remove { justify-self: end; }
.pack-item-supplier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px 96px auto;
  gap: 0.5rem;
  align-items: center;
}

/* A record picker (select) sitting next to a "+ New" button in a travel pop-up. */
.fair-link-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.fair-link-row select { flex: 1; min-width: 0; }
.fair-link-row .btn { white-space: nowrap; }
.pack-item-supplier .checkbox-row { margin-bottom: 0; white-space: nowrap; font-size: 0.85rem; }
@media (max-width: 620px) {
  .pack-item-supplier { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pack-item-company { grid-column: 1 / -1; }
  .pack-item-supplier .checkbox-row { grid-column: 1 / -1; }
}

/* Transport pop-up: each journey leg as its own bordered block. */
.transport-legs {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.transport-leg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface, #fff);
}

.transport-leg-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.transport-leg-num {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Accommodation stays: each a bordered block, like transport legs. */
.stay-rows { display: flex; flex-direction: column; gap: 0.9rem; }
.stay-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.stay-row-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stay-row-num { font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.stay-finance-hint { margin: 0.15rem 0 0; font-size: 0.82rem; }
.stay-nights-note { grid-column: 1 / -1; margin: -0.35rem 0 0; font-size: 0.82rem; }
.pack-item-finance-hint { margin: 0.1rem 0 0; font-size: 0.8rem; }
.leg-finance-hint { margin: 0.1rem 0 0; font-size: 0.82rem; }

.residency-finance-action {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}

.contact-tile-hover-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.8rem;
}

.contact-tile-hover-row select {
  width: 100%;
}

.contact-avatar-color-swatch:hover,
.contact-avatar-color-swatch:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.contact-avatar-color-swatch.is-active {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(63, 106, 216, 0.6);
}

.contact-avatar-color-swatch[data-avatar-color="blue"] { background: #2f6ad8; }
.contact-avatar-color-swatch[data-avatar-color="violet"] { background: #6d49cf; }
.contact-avatar-color-swatch[data-avatar-color="teal"] { background: #128579; }
.contact-avatar-color-swatch[data-avatar-color="green"] { background: #2f8a50; }
.contact-avatar-color-swatch[data-avatar-color="amber"] { background: #c8881a; }
.contact-avatar-color-swatch[data-avatar-color="rose"] { background: #c8456b; }
.contact-avatar-color-swatch[data-avatar-color="slate"] { background: #4a5870; }
.contact-avatar-color-swatch[data-avatar-color="red"] { background: #d23b3b; }
.contact-avatar-color-swatch[data-avatar-color="orange"] { background: #db7726; }
.contact-avatar-color-swatch[data-avatar-color="lime"] { background: #6fa01c; }
.contact-avatar-color-swatch[data-avatar-color="sky"] { background: #1c9fd1; }
.contact-avatar-color-swatch[data-avatar-color="plum"] { background: #9b3f8f; }
.contact-avatar-color-swatch[data-avatar-color="pink"] { background: #d6489e; }
.contact-avatar-color-swatch[data-avatar-color="brown"] { background: #97632f; }
.contact-avatar-color-swatch[data-avatar-color="indigo"] { background: #3a3fb0; }
.contact-avatar-color-swatch[data-avatar-color="navy"] { background: #233a7a; }

/* Icon grid */
.contact-avatar-symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 0.45rem;
  margin-top: 0.6rem;
  max-height: 236px;
  overflow: auto;
  padding: 0.15rem;
}

.contact-avatar-symbol-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: #394a67;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.contact-avatar-symbol-option:hover,
.contact-avatar-symbol-option:focus-visible {
  border-color: rgba(63, 106, 216, 0.4);
  background: #f6f9ff;
  transform: translateY(-1px);
  outline: none;
}

.contact-avatar-symbol-option.is-active {
  border-color: rgba(63, 106, 216, 0.75);
  background: rgba(220, 233, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(63, 106, 216, 0.25);
}

.contact-avatar-symbol-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
}

.contact-avatar-symbol-preview svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-avatar-initials-hint {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #50607d;
}

/* Avatar colour themes (apply to chosen symbol or initials avatar) */
.contact-avatar.symbol[data-avatar-color="blue"], .contact-avatar.initials[data-avatar-color="blue"] { background: #e3edff; color: #2f6ad8; }
.contact-avatar.symbol[data-avatar-color="violet"], .contact-avatar.initials[data-avatar-color="violet"] { background: #ece2ff; color: #6d49cf; }
.contact-avatar.symbol[data-avatar-color="teal"], .contact-avatar.initials[data-avatar-color="teal"] { background: #d6f1ee; color: #128579; }
.contact-avatar.symbol[data-avatar-color="green"], .contact-avatar.initials[data-avatar-color="green"] { background: #e0f2e4; color: #2f8a50; }
.contact-avatar.symbol[data-avatar-color="amber"], .contact-avatar.initials[data-avatar-color="amber"] { background: #fcecc9; color: #a8730f; }
.contact-avatar.symbol[data-avatar-color="rose"], .contact-avatar.initials[data-avatar-color="rose"] { background: #fde1ea; color: #c8456b; }
.contact-avatar.symbol[data-avatar-color="slate"], .contact-avatar.initials[data-avatar-color="slate"] { background: #e6eaf1; color: #4a5870; }

.competition-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  margin-top: 0.45rem;
  background: var(--form-tone-1);
}

.form-section h3 {
  margin: 0;
  font-size: 1rem;
}

.checkbox-row {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}

/* A half-width checkbox sitting next to a labelled field (e.g. Status +
   Archived) has no label line of its own, so its box would float up level
   with the neighbour's LABEL instead of its CONTROL. Rather than nudge by
   pixels (which differs per browser), give the checkbox the SAME structure
   as a labelled field: a hidden spacer label line, a gap, then a 44px
   control band. The checkbox then lands in the same control band as the
   neighbouring input/select and lines up by construction. */
.modal-form > .checkbox-row.checkbox-row-aligned {
  display: grid !important;
  gap: 0.55rem;
  align-content: start;
}
.checkbox-row-aligned .checkbox-spacer-label {
  visibility: hidden;
}
.checkbox-row-aligned .checkbox-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}

.checkbox-row input {
  width: 16px;
  height: 16px;
}

.modal-actions {
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}

.modal-actions .btn {
  min-width: 170px;
}

.import-stack {
  display: grid;
  gap: 0.7rem;
}

.import-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.7rem;
  align-items: end;
  background: #f8faff;
  border: 1px solid #dfe6fb;
  border-radius: 10px;
  padding: 0.75rem;
}

.import-status {
  grid-column: span 2;
  margin: 0;
  font-size: 0.83rem;
  color: var(--muted);
}

.import-row .btn {
  height: fit-content;
}

.import-search-results {
  margin: 0;
}

.networking-report-builder {
  display: grid;
  gap: 0.9rem;
}

.networking-report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0.9rem;
}

.networking-report-panel {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcff;
}

.networking-report-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.networking-report-summary-grid,
.networking-report-preview-meta,
.networking-entry-summary-grid {
  display: grid;
  gap: 0.65rem;
}

.networking-report-summary-grid,
.networking-entry-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.networking-report-preview-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.networking-report-summary-card,
.networking-report-preview-stat,
.networking-entry-summary-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.networking-report-summary-card span,
.networking-report-preview-stat span,
.networking-entry-summary-card span {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.networking-report-summary-card strong,
.networking-report-preview-stat strong,
.networking-entry-summary-card strong {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.35;
}

.networking-report-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.networking-report-table {
  width: 100%;
  border-collapse: collapse;
}

.networking-report-table th,
.networking-report-table td {
  padding: 0.68rem 0.72rem;
  border-bottom: 1px solid #edf1f7;
  text-align: left;
  vertical-align: top;
}

.networking-report-table th {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.networking-entry-detail-card {
  display: grid;
  gap: 0.85rem;
}

.networking-entry-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.networking-entry-notes,
.networking-entry-where-met {
  line-height: 1.55;
}

.qr-intake-shell {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.qr-intake-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 30, 0.42);
}

.qr-intake-card {
  position: relative;
  width: min(560px, 100%);
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 22px 54px rgba(17, 28, 54, 0.2);
}

.qr-intake-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.qr-intake-preview {
  min-height: 52px;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: #f6f8fd;
  color: var(--muted);
  line-height: 1.45;
  word-break: break-word;
}

.qr-intake-preview.is-url {
  color: var(--text);
}

.qr-intake-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.qr-intake-actions .btn {
  flex: 1 1 160px;
}

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .toolbar { flex-direction: column; align-items: start; }
  .piece-row { grid-template-columns: 1fr; }
  .piece-image-wrap .card-image { height: 220px; }
  .piece-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  input[type="search"] { width: 100%; max-width: 100%; }
  .modal-form, .competition-form { grid-template-columns: 1fr; }
  .import-row { grid-template-columns: 1fr; }
  .import-status { grid-column: auto; }
  .modal-actions { grid-column: auto; }
  .contact-method-row { grid-template-columns: 1fr; }
  .contact-summary-card { flex-direction: column; }
  .contact-summary-actions { flex: 1 1 auto; width: 100%; }
  .contact-summary-action-columns { grid-template-columns: 1fr; }
  .networking-report-layout {
    grid-template-columns: 1fr;
  }
  .networking-report-summary-grid,
  .networking-report-preview-meta,
  .networking-entry-summary-grid,
  .networking-report-filter-grid {
    grid-template-columns: 1fr;
  }
  .qr-intake-actions .btn {
    flex-basis: 100%;
  }
}

textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  font: inherit;
  resize: vertical;
  background: var(--textarea-bg, #ffffff);
}

.modal-form label.full {
  grid-column: span 2;
}

.modal-form .full {
  grid-column: span 2;
}

.modal-form label.compact-field {
  max-width: 170px;
}


.calendar-title {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}

.calendar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.08rem;
}

.calendar-range-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.08rem;
}

.calendar-range-grid.daily {
  grid-template-columns: minmax(0, 1fr);
}

.timed-planner-grid {
  display: grid;
  gap: 0.08rem;
}

.timed-planner-cell {
  min-height: 58px;
  border: 1px solid var(--line);
  background: #fbfcff;
  border-radius: 8px;
  padding: 0.35rem;
}

.timed-planner-corner {
  background: transparent;
  border: 0;
}

.timed-planner-head-cell {
  display: grid;
  gap: 0.1rem;
  align-content: center;
  text-align: left;
}

.timed-planner-head-cell strong {
  font-size: 0.84rem;
  color: var(--text);
}

.timed-planner-head-cell span {
  font-size: 0.74rem;
  color: var(--muted);
}

.timed-planner-time-label,
.timed-planner-all-day-label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  background: #f5f7fb;
}

.timed-planner-all-day-cell,
.timed-planner-slot-cell {
  display: grid;
  gap: 0.28rem;
  align-content: flex-start;
}

.timed-planner-all-day-cell {
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.timed-planner-all-day-cell:hover {
  background: rgba(245, 248, 255, 0.92);
}

.timed-planner-slot-cell {
  min-height: 74px;
}

.timed-planner-empty {
  font-size: 0.72rem;
  color: var(--muted);
}

.timed-planner-all-day-cta {
  font-size: 0.72rem;
  color: var(--accent-dark);
  opacity: 0.78;
}

.planner-event-pill {
  min-height: 0;
}

.planner-event-pill.timed {
  box-shadow: inset 0 0 0 1px rgba(29, 52, 112, 0.05);
}

.studio-plan-pill {
  display: grid;
  gap: 0.12rem;
  width: 100%;
  min-height: 0;
  padding: 0.42rem 0.46rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 10px;
  background: color-mix(in srgb, var(--studio-activity, #dce9ff) 88%, white 12%);
  color: #1f2b3d;
  text-align: left;
}

.studio-plan-pill.timed {
  box-shadow: inset 0 0 0 1px rgba(24, 33, 50, 0.04);
}

.studio-plan-alert {
  font-size: 0.64rem;
  font-weight: 700;
  color: #31589c;
}

.calendar-quarter-grid {
  display: grid;
  gap: 0.8rem;
}

.calendar-quarter-card {
  display: grid;
  gap: 0.28rem;
}

.calendar-quarter-title {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

/* Continuous view: the months stack and scroll with the PAGE (no inner
   fixed-height scroll frame). A nested 68vh scroller used to trap the mouse
   wheel — the calendar fills the screen, so wheeling over it scrolled the inner
   box (or nothing, with overscroll-behavior:contain blocking the hand-off) and
   the page felt frozen. The month titles stick just below the sticky top bar
   (72px) as you scroll through the year. */
.calendar-continuous-grid {
  display: block;
  padding: 0.25rem 6px 0.25rem 0;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.calendar-continuous-grid .calendar-quarter-card {
  margin-bottom: 1.5rem;
}

.calendar-continuous-grid .calendar-quarter-title {
  position: sticky;
  top: 72px;
  z-index: 3;
  background: var(--surface, #fff);
  padding: 0.45rem 0.5rem;
  margin-bottom: 0.5rem;
}

.calendar-weekdays span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.calendar-day {
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0.45rem;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.calendar-day.today {
  border-color: #a8b9f3;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(111, 145, 230, 0.18);
}

.calendar-day.locked-artwork-day {
  background: linear-gradient(180deg, #fff8e6 0%, #ffffff 74%);
  border-color: #e7cf8e;
}

.calendar-day.range-artwork-day {
  background: linear-gradient(180deg, #e6efff 0%, #ffffff 74%);
  border-color: #c9daf8;
}

.calendar-day.today.range-artwork-day {
  background: linear-gradient(180deg, #e3eeff 0%, #ffffff 74%);
  border-color: #a8c4f5;
}

.calendar-day.today.locked-artwork-day {
  background: linear-gradient(180deg, #fff4d6 0%, #ffffff 74%);
  border-color: #d8b86a;
}

.calendar-day.muted-day {
  background: #f5f6f9;
}

.day-head {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.calendar-day-button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.calendar-day-button:hover {
  color: var(--accent-dark);
}

.day-head.stacked {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.45rem;
}

.day-head small {
  font-size: 0.72rem;
  color: var(--muted);
}

.day-items {
  display: grid;
  gap: 0.3rem;
}

.calendar-range-band-stack {
  display: grid;
  gap: 0.28rem;
  margin-bottom: 0.35rem;
}

.calendar-range-band {
  display: grid;
  gap: 0.08rem;
  width: 100%;
  padding: 0.42rem 0.52rem;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--calendar-range-color, #3f6fb7);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px var(--calendar-range-color-strong, rgba(63, 111, 183, 0.22));
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.calendar-range-band.exhibition {
  background: var(--calendar-range-color, #3f6fb7);
}

.calendar-range-band.competition {
  background: var(--calendar-range-color, #4d8b63);
}

.calendar-range-band:hover,
.calendar-range-band:focus-visible {
  transform: translateY(-1px);
  filter: saturate(1.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 14px rgba(26, 36, 64, 0.12);
}

.calendar-range-band.is-start,
.calendar-range-band.is-end {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.calendar-range-band-title,
.calendar-range-band-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-range-band-title {
  font-size: 0.72rem;
  font-weight: 700;
}

.calendar-range-band-meta {
  font-size: 0.64rem;
  opacity: 0.9;
}

.calendar-plan-bullets {
  display: grid;
  gap: 0.22rem;
  margin: 0.38rem 0 0;
  padding: 0;
  list-style: none;
}

.calendar-plan-bullets li {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.7rem;
  color: var(--text);
}

.calendar-plan-bullets li.more {
  color: var(--muted);
}

.calendar-plan-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--studio-activity, #dce9ff);
  flex: 0 0 auto;
}

.calendar-plan-alert-tag {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  color: #31589c;
}

.social-page {
  display: grid;
  gap: 1rem;
}

.sales-pipeline-page {
  display: grid;
  gap: 1rem;
}

.sales-pipeline-switcher-card {
  padding: 0.75rem 0.9rem;
}

.sales-pipeline-switcher {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.sales-pipeline-switcher .btn {
  display: grid;
  justify-items: start;
  gap: 0.08rem;
  min-width: 180px;
  text-align: left;
}

.sales-pipeline-switcher .btn span {
  font-size: 0.78rem;
  color: var(--muted);
}

.sales-pipeline-switcher .btn.is-active {
  border-color: #bcd1fb;
  background: #f2f6ff;
  box-shadow: 0 0 0 1px rgba(111, 145, 230, 0.16);
}

.sales-pipeline-view-note {
  padding: 0.9rem 1rem;
}

.sales-pipeline-view-note h2 {
  margin: 0;
}

.sales-pipeline-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.sales-pipeline-summary > div {
  display: grid;
  gap: 0.18rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: #f8faff;
  border: 1px solid var(--line);
}

.sales-pipeline-summary span {
  font-size: 0.8rem;
  color: var(--muted);
}

.sales-pipeline-summary strong {
  font-size: 1.15rem;
}

.sales-pipeline-upgrade {
  display: grid;
  gap: 1rem;
  max-width: 760px;
}

.sales-pipeline-upgrade-copy {
  display: grid;
  gap: 0.45rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #f8faff;
  border: 1px solid var(--line);
}

.sales-pipeline-upgrade-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.sales-pipeline-plan-options {
  display: grid;
  gap: 0.75rem;
}

.sales-pipeline-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
}

.sales-pipeline-plan-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.sales-pipeline-plan-card.is-current {
  background: #f8fbff;
  border-color: #cddbf0;
}

.sales-pipeline-plan-card-copy {
  display: grid;
  gap: 0.25rem;
}

.sales-pipeline-plan-card-copy p {
  margin: 0;
}

.sales-opportunity-editor {
  display: grid;
  gap: 1rem;
}

.sales-opportunity-editor.is-dirty {
  border-color: rgba(53, 99, 194, 0.38);
  box-shadow: 0 0 0 2px rgba(53, 99, 194, 0.08);
  background: #f9fbff;
}

.sales-opportunity-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
}

.sales-opportunity-editor-head h3 {
  margin: 0;
}

.sales-opportunity-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.sales-opportunity-form > label {
  display: grid;
  gap: 0.4rem;
}

.sales-opportunity-form > label.full {
  grid-column: 1 / -1;
}

.sales-opportunity-section {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
}

.sales-opportunity-section-head {
  display: grid;
  gap: 0.25rem;
}

.sales-opportunity-section-head h4 {
  margin: 0;
  font-size: 0.98rem;
}

.sales-opportunity-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.sales-opportunity-section-grid > label {
  display: grid;
  gap: 0.4rem;
}

.sales-opportunity-section-grid > label.full {
  grid-column: 1 / -1;
}

.sales-opportunity-form textarea,
.sales-opportunity-form input,
.sales-opportunity-form select {
  width: 100%;
  min-width: 0;
}

.sales-opportunity-artwork-select {
  min-height: 9.5rem;
}

.sales-opportunity-inline-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sales-opportunity-checkbox {
  align-items: center;
}

.sales-pipeline-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  align-items: start;
}

.sales-pipeline-stage {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  min-height: 220px;
}

.sales-pipeline-stage-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0.75rem;
}

.sales-pipeline-stage-head h3 {
  margin: 0;
  font-size: 1rem;
}

.sales-opportunity-list {
  display: grid;
  gap: 0.75rem;
}

.sales-opportunity-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
}

.sales-opportunity-card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0.9rem;
}

.sales-opportunity-card-head h4 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.35;
}

.sales-opportunity-card-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
}

.sales-opportunity-value {
  white-space: nowrap;
  font-size: 0.95rem;
}

.sales-opportunity-context {
  display: grid;
  gap: 0.55rem;
}

.sales-opportunity-context > div {
  display: grid;
  gap: 0.16rem;
}

.sales-opportunity-context span {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sales-opportunity-context strong {
  font-size: 0.88rem;
  line-height: 1.45;
}

.sales-opportunity-notes {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.sales-opportunity-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
}

.sales-opportunity-move {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
  margin-right: auto;
}

.sales-opportunity-move select {
  min-width: 150px;
}

@media (max-width: 900px) {
  .sales-pipeline-summary,
  .sales-opportunity-form,
  .sales-opportunity-section-grid {
    grid-template-columns: 1fr;
  }

  .sales-opportunity-form > label.full {
    grid-column: auto;
  }

  .sales-opportunity-section-grid > label.full {
    grid-column: auto;
  }
}

.social-switcher-card {
  padding: 0.85rem 1rem;
}

.social-switcher {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.social-pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.social-pipeline-column {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  min-height: 220px;
  padding: 0.9rem;
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98) 0%, rgba(255, 255, 255, 1) 36%);
}

.social-pipeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
}

.social-pipeline-head h3 {
  margin: 0;
  font-size: 0.98rem;
}

.social-idea-starters {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem;
  border: 1px dashed var(--line, #d7deea);
  border-radius: 10px;
  background: rgba(63, 111, 176, 0.05);
}
.social-idea-starters-head { display: grid; gap: 0.15rem; }
.social-idea-starters-head .subtitle { font-size: 0.8rem; }
.social-spark-picker { display: grid; gap: 0.4rem; }
.social-spark-label { display: grid; gap: 0.25rem; font-size: 0.8rem; font-weight: 600; }
.social-spark-select { width: 100%; }
.social-spark-picker .btn { justify-self: start; }
.social-spark-pair-row { display: grid; gap: 0.4rem; }
.social-spark-pair > .social-spark-label { margin-bottom: 0.1rem; }

.social-pipeline-list,
.social-posted-list {
  display: grid;
  gap: 0.75rem;
}

.social-card {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(22, 31, 61, 0.05);
}

.social-card-head {
  display: grid;
  gap: 0.45rem;
}

.social-card-head h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.social-card-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.social-card-copy,
.social-card-notes {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.5;
}

.social-card-notes {
  color: var(--muted);
}

.social-card-context {
  display: grid;
  gap: 0.24rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.social-card-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.social-card-media {
  display: grid;
  gap: 0.35rem;
}

.social-card-platforms {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.social-empty-state {
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem;
  border: 1px dashed #d7deeb;
  border-radius: 12px;
  background: #fafcff;
  color: var(--muted);
}

.social-empty-state p {
  margin: 0;
  line-height: 1.5;
}

.social-calendar-card {
  display: grid;
  gap: 0.9rem;
}

.social-calendar-toolbar {
  margin-bottom: 0;
}

.social-calendar-grid {
  gap: 0.4rem;
}

.social-calendar-day {
  min-height: 148px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
  padding: 0.6rem;
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.social-calendar-day.today {
  border-color: #a8b9f3;
  background: #f4f7ff;
}

.social-calendar-day-empty {
  background: transparent;
  border-style: dashed;
  opacity: 0.45;
}

.social-calendar-day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.social-calendar-date {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
}

.social-calendar-items {
  display: grid;
  gap: 0.38rem;
  align-content: start;
}

.social-calendar-pill {
  border: 1px solid #d6dff4;
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  padding: 0.42rem 0.48rem;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 0.1rem;
}

.social-calendar-pill:hover {
  border-color: #b9caef;
  background: #f7faff;
}

.social-calendar-pill strong {
  font-size: 0.78rem;
  line-height: 1.35;
}

.social-calendar-pill span {
  font-size: 0.68rem;
  color: var(--muted);
}

.social-insights-card {
  display: grid;
  gap: 0.35rem;
}

.social-insights-card p {
  margin: 0;
}

.social-insights-stack {
  display: grid;
  gap: 1rem;
}
.social-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.social-insight-stats { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0.2rem 0; }
.social-insight-stat { display: flex; flex-direction: column; }
.social-insight-stat strong { font-size: 1.6rem; line-height: 1.1; color: var(--text); }
.social-insight-stat span { font-size: 0.8rem; color: var(--muted); }
.social-insight-bars { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.3rem; }
.social-insight-bar-row { display: grid; grid-template-columns: 84px 1fr 28px; align-items: center; gap: 0.6rem; }
.social-insight-bar-label { font-size: 0.82rem; color: var(--text); }
.social-insight-bar-track { height: 9px; border-radius: 6px; background: var(--surface-muted, rgba(148,163,184,.18)); overflow: hidden; }
.social-insight-bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--accent, #6366f1); min-width: 2px; }
.social-insight-bar-count { font-size: 0.82rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.social-insight-upcoming { display: flex; flex-direction: column; gap: 0.4rem; }
.social-insight-upcoming-row {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface, #fff); cursor: pointer;
}
.social-insight-upcoming-row:hover { border-color: var(--accent, #6366f1); }
.social-insight-upcoming-when { font-weight: 600; font-size: 0.82rem; min-width: 52px; color: var(--text); }
.social-insight-upcoming-title { flex: 1; font-size: 0.88rem; }

/* What actually works */
.social-works-headline {
  padding: 0.65rem 0.8rem; margin: 0.2rem 0 0.6rem; border-radius: 10px;
  background: var(--surface-muted, rgba(99,102,241,.08)); font-size: 0.92rem; line-height: 1.4; color: var(--text);
}
.social-works-dimensions { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.social-works-dimension { display: flex; flex-direction: column; gap: 0.35rem; }
.social-works-dimension-title { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.social-insight-avg-bars .social-insight-bar-row.top .social-insight-bar-fill { background: var(--success, #16a34a); }
.social-insight-avg-bars .social-insight-bar-row.top .social-insight-bar-label { font-weight: 600; }

/* Worth running again */
.social-recycle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface, #fff);
}
.social-recycle-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.social-recycle-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Hashtag suggestions in the compose modal */
.social-hashtag-suggest-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.social-hashtag-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface, #fff);
  font-size: 0.82rem; color: var(--text); cursor: pointer;
}
.social-hashtag-chip:hover { border-color: var(--accent, #6366f1); }
.social-hashtag-chip small { color: var(--muted); font-variant-numeric: tabular-nums; }
.social-hashtag-chip.is-added { opacity: 0.5; cursor: default; }

/* Saved hashtag sets + content-template chips (tap to use, × to remove) */
.social-hashtag-sets-list, .social-template-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.5rem; }
.social-hashtag-set-chip, .social-template-chip {
  display: inline-flex; align-items: stretch; border: 1px solid var(--border, #d7deea);
  border-radius: 999px; overflow: hidden; background: var(--surface, #fff);
}
.social-hashtag-set-chip > button, .social-template-chip > button {
  border: 0; background: transparent; cursor: pointer; font-size: 0.82rem; color: var(--text);
  padding: 0.3rem 0.65rem; display: inline-flex; align-items: center; gap: 0.3rem;
}
.social-hashtag-set-chip > button:first-child:hover, .social-template-chip > button:first-child:hover { color: var(--accent, #3f6fb0); }
.social-hashtag-set-chip small { color: var(--muted); font-variant-numeric: tabular-nums; }
.social-hashtag-set-remove, .social-template-remove {
  border-left: 1px solid var(--border, #e6ebf3) !important; color: var(--muted) !important;
  padding: 0.3rem 0.5rem !important; font-size: 0.95rem !important; line-height: 1;
}
.social-hashtag-set-remove:hover, .social-template-remove:hover { color: var(--danger, #c0392b) !important; }
.social-template-starters { margin-top: 0.2rem; }
.social-hashtag-sets-empty { margin: 0.2rem 0; }

/* Leads & outcomes from a post (Social ↔ Pipeline bridge) */
.social-card-outcomes { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.social-card-outcomes > strong { font-size: 0.82rem; }
.social-outcome-list { display: flex; flex-direction: column; gap: 0.35rem; }
.social-outcome-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; text-align: left;
  padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); cursor: pointer;
}
.social-outcome-row:hover { border-color: var(--accent, #6366f1); }
.social-outcome-title { font-size: 0.86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-outcome-meta { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.social-outcome-value { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge.soft.is-won { background: var(--success, #16a34a); color: #fff; }

/* Inspiration log: social links + online-relationship flag */
.insp-social { display: flex; flex-direction: column; gap: 0.4rem; }
.insp-social-list { display: flex; flex-direction: column; gap: 0.4rem; }
.insp-social-row { display: grid; grid-template-columns: minmax(110px, 0.5fr) 1fr auto; gap: 0.4rem; align-items: center; }
.insp-online-row { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem; font-size: 0.88rem; }
.insp-card-social { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.2rem; }
.insp-card-social a, .insp-card-social span { font-size: 0.82rem; color: var(--muted); }
.insp-card-social a:hover { color: var(--accent, #6366f1); }
.insp-online-badge { margin-left: 0.5rem; vertical-align: middle; }
@media (max-width: 560px) { .insp-social-row { grid-template-columns: 1fr; } }

/* Opportunity application documents */
.sales-opportunity-documents { display: flex; flex-direction: column; gap: 0.35rem; }
.sales-opportunity-doc-list { list-style: none; margin: 0.3rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.sales-opportunity-doc-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); }
.sales-opportunity-doc-item a { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-opportunity-doc-add { align-self: flex-start; cursor: pointer; }
.sales-opportunity-doc-empty { margin: 0.2rem 0; }

/* Home "Next steps" nudge (pipeline follow-ups on the Inventory home) */
.sales-home-nudge { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.sales-home-nudge .sales-pipeline-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sales-home-nudge-more { align-self: flex-start; }
.backup-reminder-nudge { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; border-left: 4px solid var(--accent-blue, #3f6fb0); }
.backup-reminder-nudge .sales-pipeline-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.backup-reminder-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Sales Pipeline — Table (forecast) view */
.sales-table-card { padding: 1rem; }
.sales-table-scroll { overflow-x: auto; }
.sales-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.sales-table th, .sales-table td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sales-table th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.sales-table td.num, .sales-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sales-table tbody tr:hover { background: var(--surface-muted, rgba(99,102,241,.05)); }
.sales-table-open { background: none; border: none; padding: 0; color: var(--accent, #6366f1); font-weight: 600; cursor: pointer; font-size: inherit; text-align: left; }
.sales-table-open:hover { text-decoration: underline; }
.sales-table-stage { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.76rem; font-weight: 600; }
.sales-table-stage.is-cool { background: rgba(148,163,184,.2); color: #475569; }
.sales-table-stage.is-warm { background: rgba(245,158,11,.2); color: #b45309; }
.sales-table-stage.is-hot { background: rgba(16,185,129,.18); color: #047857; }
.sales-table-stage.is-won { background: var(--success, #16a34a); color: #fff; }
.sales-table-stage.is-lost { background: rgba(220,38,38,.15); color: #b91c1c; }
.sales-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: none; }
.sales-table-head-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.sales-table-groupctrl { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.sales-table-grouphead td { background: var(--surface-muted, rgba(99,102,241,.08)); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }
.sales-table-subtotal td { font-weight: 600; border-bottom: 2px solid var(--border); background: rgba(148,163,184,.06); }

/* Project delivery checklist (awarded opportunities) */
.project-needs-section { display: flex; flex-direction: column; gap: 0.6rem; }
.project-needs-list { display: flex; flex-direction: column; gap: 0.5rem; }
.project-need-row {
  display: grid; gap: 0.6rem; align-items: center; padding: 0.5rem 0.6rem;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface, #fff);
  grid-template-columns: auto minmax(200px, 1fr) auto auto auto;
}
.project-need-row.is-done { opacity: 0.6; }
.project-need-row.is-done .project-need-what { text-decoration: line-through; }
.project-need-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.project-need-when, .project-need-cost { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.project-need-when input, .project-need-cost input { width: auto; }
.project-need-row input, .project-need-row select { min-width: 0; }
.project-needs-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.project-needs-total { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .project-need-row { grid-template-columns: 1fr 1fr; } }

/* Home page */
.home-page { display: flex; flex-direction: column; gap: 0.25rem; }
.home-empty { display: flex; flex-direction: column; gap: 0.35rem; }

/* Global search */
.global-search-card { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.global-search-input { width: 100%; padding: 0.7rem 0.9rem; font-size: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); }
.global-search-input:focus { outline: none; border-color: var(--accent, #6366f1); }
.global-search-results { display: flex; flex-direction: column; gap: 0.9rem; }
.global-search-results:empty { display: none; }
.global-search-group { display: flex; flex-direction: column; gap: 0.3rem; }
.global-search-group-head { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.global-search-item { display: flex; align-items: stretch; gap: 0.4rem; }
.global-search-item-open { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; text-align: left; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface, #fff); cursor: pointer; }
.global-search-item-open:hover { border-color: var(--accent, #6366f1); }
.global-search-item-history { flex-shrink: 0; padding: 0 0.7rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface, #fff); font-size: 0.8rem; color: var(--muted); cursor: pointer; }
.global-search-item-history:hover { border-color: var(--accent, #6366f1); color: var(--accent, #6366f1); }
.global-search-item-title { font-size: 0.92rem; color: var(--text); }
.global-search-item-sub { font-size: 0.8rem; color: var(--muted); }

/* Relationship / project history overlay */
body.history-open { overflow: hidden; }
.rh-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.rh-card { width: min(680px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: var(--surface, #fff); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.rh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.rh-head h2 { margin: 0; }
.rh-list { overflow-y: auto; padding: 0.8rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.rh-row { display: flex; align-items: flex-start; gap: 0.8rem; width: 100%; text-align: left; padding: 0.5rem 0.6rem; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: default; }
.rh-row[data-rh-open] { cursor: pointer; }
.rh-row[data-rh-open]:hover { border-color: var(--accent, #6366f1); background: var(--surface-muted, rgba(99,102,241,.06)); }
.rh-when { flex-shrink: 0; min-width: 78px; font-size: 0.8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 0.15rem; }
.rh-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.9rem; }
.rh-text { color: var(--text); }
.global-search-more { font-size: 0.8rem; color: var(--muted); padding-left: 0.2rem; }
.global-search-hint { margin: 0.2rem 0; }

/* Same-event / different-price conflict alert */
.event-conflict-card { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; border-left: 3px solid var(--danger, #dc2626); }
.event-conflict-list { display: flex; flex-direction: column; gap: 0.4rem; }
.event-conflict-row { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface, #fff); }
.event-conflict-price { font-size: 0.9rem; }
.event-conflict-keep-both { align-self: flex-start; }
.event-conflict-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 0.45rem; padding: 0; border: none; border-radius: 50%;
  background: var(--danger, #dc2626); color: #fff; font-weight: 700; font-size: 0.72rem; line-height: 1;
  cursor: pointer; vertical-align: middle;
}
.event-conflict-flag:hover { filter: brightness(1.12); }
.event-conflict-card.is-flash { box-shadow: 0 0 0 3px var(--danger, #dc2626); transition: box-shadow 0.2s ease; }

.social-media-library-card {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

.social-media-library-head,
.social-hooks-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.social-media-library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.social-media-library-grid,
.social-hooks-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.social-media-asset-card,
.social-hook-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 31, 61, 0.04);
}

.social-media-asset-card img,
.social-media-asset-card video,
.social-media-asset-card-thumb,
.social-media-library-option-thumb,
.social-media-asset-chip-thumb {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  background: #f4f6fb;
}

.social-media-asset-card img,
.social-media-asset-card video {
  aspect-ratio: 1 / 1;
  min-height: 130px;
}

.social-media-asset-card-thumb {
  aspect-ratio: 1 / 1;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 700;
}

.social-media-library-option-thumb {
  aspect-ratio: 1 / 1;
  min-height: 90px;
  display: block;
}

.social-media-asset-copy {
  display: grid;
  gap: 0.14rem;
}

.social-media-asset-copy strong {
  font-size: 0.92rem;
}

.social-media-asset-copy span,
.social-media-asset-copy small {
  color: var(--muted);
  font-size: 0.8rem;
}

.social-media-library-field {
  display: grid;
  gap: 0.85rem;
}

.social-media-library-selected,
.social-media-library-picker {
  display: grid;
  gap: 0.45rem;
}

.social-media-library-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.social-media-library-picker-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-height: 360px;
  overflow: auto;
  padding-right: 0.1rem;
}

.social-media-library-option {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.social-media-library-option:has(input:checked),
.social-platform-target-chip:has(input:checked) {
  border-color: rgba(63, 106, 216, 0.35);
  background: #f4f7ff;
}

.social-media-library-option input,
.social-platform-target-chip input {
  margin: 0;
  accent-color: var(--accent);
}

.social-media-library-option-preview {
  display: block;
}

.social-media-library-option-copy {
  display: grid;
  gap: 0.14rem;
}

.social-media-library-option-copy strong {
  font-size: 0.9rem;
}

.social-media-library-option-copy small {
  color: var(--muted);
  font-size: 0.78rem;
}

.social-media-asset-chip {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  max-width: 120px;
  padding: 0.4rem 0.5rem;
  border: 1px solid #dce3f2;
  border-radius: 999px;
  background: #fff;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.social-media-asset-chip span {
  display: block;
  font-size: 0.73rem;
  line-height: 1.25;
}

.social-media-asset-chip small {
  color: var(--muted);
  font-size: 0.66rem;
}

.social-media-asset-chip-thumb {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.social-media-asset-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.social-media-upload {
  display: grid;
  gap: 0.3rem;
}

.social-media-library-empty {
  margin: 0;
}

.social-platform-target-field {
  display: grid;
  gap: 0.6rem;
}

.social-platform-target-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.social-platform-target-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.social-platform-target-chip span {
  line-height: 1.35;
}

.social-hooks-card {
  display: grid;
  gap: 0.9rem;
}

.social-hook-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.calendar-lock-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  margin: 0 0 0.28rem;
  padding: 0.1rem 0;
  border-radius: 999px;
  background: transparent;
  border: 0;
  max-width: 100%;
}

.calendar-range-strip {
  width: 100%;
}

.calendar-range-thumb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
}

.calendar-range-thumb-btn:focus-visible {
  outline: 2px solid #7994f3;
  outline-offset: 2px;
}

.calendar-lock-thumb,
.calendar-lock-chip {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(135, 104, 34, 0.18);
}

.calendar-lock-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7c5612;
  background: #fffaf0;
}

.studio-planner-card {
  margin-bottom: 1rem;
}

.studio-planner-list .row {
  align-items: flex-start;
}

.studio-planner-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 0.9rem;
}

.studio-activity-sidebar {
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.studio-activity-sidebar-head h4 {
  margin: 0 0 0.2rem;
}

.studio-activity-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.studio-activity-form input[type="text"] {
  min-width: 0;
}

.studio-activity-list {
  display: grid;
  gap: 0.45rem;
}

.studio-activity-item {
  display: grid;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: grab;
}

.studio-activity-item.is-selected {
  border-color: rgba(63, 106, 216, 0.38);
  box-shadow: 0 0 0 2px rgba(63, 106, 216, 0.08);
}

.studio-activity-item.is-preset {
  background: #fbfcff;
}

.studio-activity-main {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.studio-activity-swatch {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--studio-activity, #dce9ff);
  border: 1px solid rgba(24, 33, 50, 0.08);
}

.studio-activity-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.studio-colour-palette {
  display: grid;
  gap: 0.45rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.studio-colour-family {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
}

.studio-colour-family-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.studio-colour-family-swatches {
  display: flex;
  gap: 0.28rem;
  flex-wrap: wrap;
}

.studio-colour-swatch {
  display: inline-flex;
}

.studio-colour-swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.studio-colour-swatch-face {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(24, 33, 50, 0.08);
  background: var(--studio-swatch, #dce9ff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.studio-colour-swatch input:checked + .studio-colour-swatch-face {
  box-shadow: 0 0 0 2px rgba(63, 106, 216, 0.14), inset 0 0 0 2px rgba(255, 255, 255, 0.72);
  border-color: rgba(63, 106, 216, 0.4);
}

.studio-planner-board {
  overflow-x: auto;
}

.studio-planner-grid {
  display: grid;
  gap: 0.08rem;
}

.studio-planner-cell {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #fbfcff;
  border-radius: 8px;
  padding: 0.2rem;
}

.studio-planner-corner {
  background: transparent;
  border: 0;
}

.studio-planner-head {
  display: grid;
  gap: 0.08rem;
  align-content: center;
}

.studio-planner-head strong {
  font-size: 0.82rem;
}

.studio-planner-head span {
  font-size: 0.72rem;
  color: var(--muted);
}

.studio-planner-time {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: #f5f7fb;
}

.studio-planner-slot {
  position: relative;
  min-height: 44px;
  cursor: pointer;
}

.studio-planner-slot.is-selected {
  box-shadow: inset 0 0 0 2px #8ba4f3;
  background: #eef4ff;
}

.studio-planner-slot.is-off-hours {
  background: #f4f6fa;
  color: #9aa7bb;
}

.studio-planner-slot.is-occupied {
  padding: 0;
}

.studio-block-card {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  height: 100%;
  align-content: start;
  padding: 0.35rem;
  background: var(--studio-activity, #dce9ff);
  border-radius: 7px;
  color: #1f2b3d;
  cursor: grab;
}

.studio-block-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

.studio-block-card.is-active {
  box-shadow: inset 0 0 0 2px rgba(37, 68, 157, 0.22);
}

.studio-block-card strong {
  font-size: 0.74rem;
  line-height: 1.15;
}

.studio-block-card span {
  font-size: 0.66rem;
}

.studio-block-fill {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--studio-activity, #dce9ff);
}

.studio-block-alert-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.studio-block-alert-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.studio-block-alert-toggle span {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(24, 33, 50, 0.16);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.studio-block-alert-toggle input:checked + span {
  background: #31589c;
  border-color: #31589c;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
}

.studio-block-task-count {
  font-size: 0.64rem;
  font-weight: 700;
}

.studio-block-detail {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.studio-block-detail.is-empty {
  min-height: 220px;
}

.studio-block-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--studio-activity, #dce9ff) 72%, white 28%);
}

.studio-block-detail-head h4 {
  margin: 0 0 0.15rem;
}

.studio-block-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  font-weight: 700;
}

.studio-task-list {
  display: grid;
  gap: 0.45rem;
}

.studio-task-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.studio-task-row.is-done {
  background: #f5f8f5;
}

.studio-task-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.studio-task-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}

.studio-task-row.is-done .studio-task-input {
  text-decoration: line-through;
  color: var(--muted);
}

.studio-task-input:focus {
  outline: none;
}

.studio-task-actions {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.studio-task-linked {
  grid-column: 2 / -1;
  margin-top: -0.12rem;
}

.studio-block-detail-actions {
  display: flex;
  justify-content: flex-start;
}

.studio-block-notes-field textarea {
  min-height: 96px;
}

.settings-work-hours-simple {
  margin-top: 0.4rem;
}

.settings-day-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.settings-day-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
}

.settings-day-chip.inline {
  width: fit-content;
}

.settings-work-hours-grid {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.settings-work-hours-row {
  display: grid;
  grid-template-columns: 82px repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: end;
}

@media (max-width: 980px) {
  .studio-planner-layout {
    grid-template-columns: 1fr;
  }

  .studio-activity-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-work-hours-row {
    grid-template-columns: 1fr;
  }
}

.calendar-lock-more {
  font-size: 0.68rem;
  font-weight: 700;
  color: #7c5612;
  padding-left: 0.1rem;
}

.event-pill {
  border: 0;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  width: 100%;
  background: var(--calendar-event-color-soft, #f0f4f8);
  color: var(--calendar-event-color, #38506a);
  box-shadow: inset 0 0 0 1px var(--calendar-event-color-border, rgba(56, 80, 106, 0.16));
}

.event-pill.exhibition {
  background: var(--calendar-event-color-soft, #e8efff);
  color: var(--calendar-event-color, #274fb3);
}

.event-pill.competition {
  background: var(--calendar-event-color-soft, #e8faf1);
  color: var(--calendar-event-color, #227347);
}

.event-pill.dragging {
  opacity: 0.6;
}

.pill-title {
  display: block;
  font-weight: 600;
  line-height: 1.25;
}

.pill-meta {
  display: block;
  opacity: 0.85;
  margin-top: 0.1rem;
  font-size: 0.68rem;
}

.pill-thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.16rem;
  margin-top: 0.32rem;
  width: min(88px, 100%);
}

.pill-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.pill-thumb-more {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(24, 33, 50, 0.12);
  border-radius: 999px;
  padding: 0 0.28rem;
}

.event-pill.date-submission { background: var(--calendar-event-color-soft, #fff1dc); color: var(--calendar-event-color, #8a5a16); }
.event-pill.date-notification { background: var(--calendar-event-color-soft, #e8faf1); color: var(--calendar-event-color, #227347); }
.event-pill.date-delivery { background: var(--calendar-event-color-soft, #e7f2ff); color: var(--calendar-event-color, #1f5a96); }
.event-pill.date-pickup { background: var(--calendar-event-color-soft, #f4ebff); color: var(--calendar-event-color, #5f3ca1); }
.event-pill.date-start { background: var(--calendar-event-color-soft, #e8efff); color: var(--calendar-event-color, #274fb3); }
.event-pill.date-end { background: var(--calendar-event-color-soft, #ffe9ee); color: var(--calendar-event-color, #9f304e); }
.event-pill.date-reception { background: var(--calendar-event-color-soft, #f0f4f8); color: var(--calendar-event-color, #38506a); }
.event-pill.date-note { background: var(--calendar-event-color-soft, #f9f1cb); color: var(--calendar-event-color, #745908); }
.event-pill.is-selected {
  box-shadow: 0 0 0 2px var(--calendar-event-color-border, rgba(39, 79, 179, 0.25));
}

.calendar-day.selected,
body.calendar-date-selection-dragging .calendar-day.selected {
  border-color: #87a3f0;
  background: linear-gradient(180deg, #dfe9ff 0%, #eff5ff 100%);
  box-shadow: inset 0 0 0 1px rgba(39, 79, 179, 0.16), 0 8px 18px rgba(39, 79, 179, 0.08);
}

.calendar-day.selected::before,
body.calendar-date-selection-dragging .calendar-day.selected::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(226, 236, 255, 0.84) 0%, rgba(239, 246, 255, 0.66) 100%);
  box-shadow: inset 0 0 0 1px rgba(39, 79, 179, 0.14), 0 0 0 2px rgba(39, 79, 179, 0.08);
  pointer-events: none;
}

.calendar-day > * {
  position: relative;
  z-index: 1;
}

/* Selecting a date range highlights the square only — the day number stays as
   it is, so a run of days doesn't look like the numbers themselves are picked. */

body.calendar-date-selection-dragging .calendar-day {
  cursor: cell;
}

/* "What are these dates for?" routing dialog — tidy grid of choice buttons
   that matches the rest of the site's modal styling. */
.calendar-date-selection-card {
  width: min(480px, 100%);
}

.calendar-date-selection-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.6rem;
}

.calendar-date-selection-option {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.calendar-date-selection-option:hover,
.calendar-date-selection-option:focus-visible {
  border-color: var(--accent);
  background: var(--form-tone-1, #f4f7ff);
  box-shadow: 0 4px 12px rgba(39, 79, 179, 0.1);
  outline: none;
}

.calendar-date-selection-option-title {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 540px) {
  .calendar-date-selection-options {
    grid-template-columns: 1fr 1fr;
  }
}

.linked-record-followup-banner {
  margin: 0 0 1rem;
}

.linked-record-choice-dialog {
  z-index: 55;
}

.linked-record-choice-card {
  width: min(460px, 100%);
}

.linked-record-choice-subtitle {
  margin: 0.18rem 0 0;
  color: var(--muted);
}

.linked-record-choice-copy {
  display: grid;
  gap: 0.4rem;
  color: var(--text);
  line-height: 1.45;
}

.linked-record-choice-copy p {
  margin: 0;
}

.linked-record-choice-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.linked-record-choice-actions .btn {
  width: 100%;
  justify-content: center;
}

.linked-record-followup-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}

.linked-record-followup-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.linked-record-followup-row:last-of-type {
  padding-bottom: 0;
}

@media (max-width: 720px) {
  .linked-record-choice-actions {
    grid-column: auto;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .linked-record-followup-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.open-call-import-bulk-toolbar {
  margin: 0.8rem 0 0.95rem;
}

.calendar-task-list-card {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.calendar-task-list-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
}

.calendar-task-check-list {
  display: grid;
  gap: 0.55rem;
}

.calendar-task-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faff;
}

.calendar-task-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

/* --- Artist representation onboarding --- */
.artist-onboarding-card {
  position: relative; border: 1px solid var(--accent); background: #eef2fe;
  border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.artist-onboarding-dismiss {
  position: absolute; top: 0.6rem; right: 0.7rem; border: none; background: none;
  font-size: 1.2rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.artist-onboarding-q { font-weight: 600; font-size: 1.05rem; margin: 0 0 0.2rem; }
.artist-onboarding-sub { margin: 0 0 0.75rem; }
.artist-onboarding-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.artist-onboarding-detail { margin-top: 0.9rem; display: grid; gap: 0.6rem; }
.artist-onboarding-detail.hidden { display: none; }

/* Settings: your data & backup. */
.settings-data-backup { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.settings-backup-status { width: 100%; margin: 0.3rem 0 0; }
.settings-backup-status[data-kind="ok"] { color: #1d7a4c; }
.settings-backup-status[data-kind="warn"] { color: #a8612a; }

/* Data-recovery banner: shown when the protected backup has more than loaded. */
.data-recovery-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: #fff7e6; border-bottom: 1px solid #f0c674; color: #6b4f12;
  padding: 0.7rem 1.25rem; font-size: 0.92rem;
}
.data-recovery-msg { flex: 1; min-width: 240px; }
.data-recovery-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* First-run onboarding gate: a full-screen takeover before the app. */
body.onboarding-active .topbar,
body.onboarding-active .global-add-btn { display: none !important; }
.onboarding-gate {
  position: fixed; inset: 0; z-index: 6000; overflow-y: auto;
  background: var(--page-bg, #f6f7fb);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1.5rem, 6vh, 5rem) 1.25rem;
}
.onboarding-card {
  width: 100%; max-width: 760px; background: var(--surface);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 18px;
  padding: 2rem clamp(1.25rem, 4vw, 2.5rem); text-align: center;
}
.onboarding-brand { font-weight: 600; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 1.25rem; }
.onboarding-eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.4rem; }
.onboarding-title { font-size: 1.5rem; margin: 0 0 0.4rem; }
.onboarding-sub { color: var(--muted); margin: 0 0 1.25rem; }
.onboarding-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; text-align: left; }
.onboarding-plan {
  position: relative; display: flex; flex-direction: column; gap: 0.3rem;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 14px; padding: 1rem;
  background: var(--surface); cursor: pointer; transition: border-color 0.15s, transform 0.05s;
}
.onboarding-plan:hover { border-color: var(--accent); }
.onboarding-plan:active { transform: scale(0.99); }
.onboarding-plan.is-featured { border-color: var(--accent); }
.onboarding-plan-badge {
  position: absolute; top: -0.6rem; right: 0.8rem; background: var(--accent); color: #fff;
  font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 999px;
}
.onboarding-plan-name { font-weight: 600; }
.onboarding-plan-price { font-size: 1.4rem; font-weight: 600; }
.onboarding-plan-per { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.onboarding-plan-tag { font-size: 0.85rem; color: var(--muted); }
.onboarding-rep-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.onboarding-rep-actions.hidden { display: none; }
.onboarding-rep-detail { margin-top: 1.1rem; display: grid; gap: 0.7rem; text-align: left; }
.onboarding-rep-detail.hidden { display: none; }
.onboarding-skip {
  margin-top: 1.25rem; border: none; background: none; color: var(--muted);
  cursor: pointer; font-size: 0.9rem; text-decoration: underline;
}

/* Public pricing landing (non-subscribers) */
.pricing-gate { align-items: flex-start; }
.pricing-shell { width: 100%; max-width: 1000px; margin: 0 auto; text-align: center; }
.pricing-back { align-self: flex-start; margin-bottom: 0.5rem; }
/* Landing front: the warm intro screen shown before any payment gate. */
.landing-front { align-items: flex-start; }
.landing-shell { width: 100%; max-width: 880px; margin: 0 auto; text-align: center; }
.landing-title { font-size: 2rem; font-weight: 800; margin: 0.5rem 0 0.5rem; }
.landing-sub { color: var(--muted); max-width: 640px; margin: 0 auto 1.5rem; font-size: 1.05rem; }
.landing-cta-row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.landing-cta { padding: 0.7rem 1.5rem; font-size: 1rem; }
.landing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 0 0 2rem; text-align: left; }
.landing-feature { border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 0.85rem 0.95rem; background: var(--surface); }
.landing-feature-title { display: block; font-weight: 700; margin-bottom: 0.2rem; }
.landing-feature-desc { display: block; font-size: 0.9rem; color: var(--muted); }
.landing-faq { text-align: left; max-width: 660px; margin: 0 auto 2rem; }
.landing-faq-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.6rem; }
.landing-faq-item { border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 0 0.85rem; margin-bottom: 0.5rem; background: var(--surface); }
.landing-faq-item summary { cursor: pointer; font-weight: 600; padding: 0.7rem 0; list-style: none; }
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item[open] summary { border-bottom: 1px solid rgba(0,0,0,0.06); }
.landing-faq-item p { color: var(--muted); margin: 0.6rem 0 0.8rem; }
.landing-foot { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; margin-top: 0.5rem; }
/* Highlights carousel between the landing and the questions. */
.onboarding-highlight-card { max-width: 520px; }
.onboarding-highlight-film { width: 100%; height: 190px; border-radius: 14px; overflow: hidden; margin: 0.4rem 0 1rem; background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.06)); border: 1px solid rgba(0,0,0,0.06); }
.onboarding-highlight-film video, .onboarding-highlight-film iframe, .onboarding-highlight-film .pricing-video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.highlight-film-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; color: var(--accent); }
.highlight-film-icon svg { width: 56px; height: 56px; }
.highlight-film-soon { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); }
.highlight-film-play { font-size: 0.68rem; }
.onboarding-highlight-dots { display: flex; justify-content: center; gap: 0.4rem; margin: 1rem 0 1.4rem; }
@media (max-width: 640px) { .landing-features { grid-template-columns: 1fr; } .landing-title { font-size: 1.6rem; } }
.pricing-title { font-size: 2rem; margin: 0.5rem 0 0.35rem; }
.pricing-sub { color: var(--muted); margin: 0 auto 1.25rem; max-width: 560px; }
.pricing-billing-toggle { display: inline-flex; gap: 0.15rem; background: var(--surface-alt, rgba(0,0,0,0.05)); border-radius: 999px; padding: 0.2rem; margin-bottom: 1.5rem; }
.pricing-billing-toggle button { border: none; background: none; border-radius: 999px; padding: 0.4rem 1rem; cursor: pointer; font-size: 0.9rem; color: var(--muted); }
.pricing-billing-toggle button.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; text-align: left; }
.pricing-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid rgba(0,0,0,0.1); border-radius: 16px; overflow: hidden; }
.pricing-card.is-featured { border: 2px solid var(--accent); }
.pricing-badge { position: absolute; top: 0.8rem; left: 0.9rem; z-index: 2; background: var(--accent); color: #fff; font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 999px; }
.pricing-video-wrap { aspect-ratio: 16 / 9; background: var(--surface-alt, rgba(0,0,0,0.05)); display: flex; align-items: center; justify-content: center; }
.pricing-video { width: 100%; height: 100%; border: none; object-fit: cover; display: block; }
.pricing-video-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--muted); }
.pricing-play { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1rem; }
.pricing-demo-soon { font-size: 0.8rem; }
.pricing-card-body { padding: 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.pricing-tier-name { font-weight: 600; font-size: 1.1rem; }
.pricing-tier-tag { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.7rem; }
.pricing-price { font-size: 1.8rem; font-weight: 600; margin-bottom: 0.8rem; }
.pricing-per { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.pricing-annual-note { display: block; font-size: 0.78rem; font-weight: 400; color: var(--muted); }
.pricing-highlights { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.pricing-highlights li { font-size: 0.85rem; color: var(--muted); padding-left: 1.1rem; position: relative; }
.pricing-highlights li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); }
.pricing-choose { margin-top: auto; width: 100%; justify-content: center; }

/* Slide-style flow: one question per screen */
.onboarding-slide-card { max-width: 620px; }
.onboarding-welcome-title { margin: 1.5rem 0 2rem; font-size: 1.9rem; }
.onboarding-slide { min-height: 240px; display: flex; flex-direction: column; }
.onboarding-progress { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.onboarding-step-count { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
.onboarding-dots { display: flex; gap: 0.35rem; }
.onboarding-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(0,0,0,0.12); transition: background 0.15s; }
.onboarding-dot.is-done { background: var(--accent); }
.onboarding-dot.is-current { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.onboarding-input {
  width: 100%; font-size: 1.05rem; padding: 0.75rem 0.9rem; margin: 0.25rem 0 0.5rem;
  border: 1px solid rgba(0,0,0,0.15); border-radius: 12px; background: var(--surface);
}
.onboarding-input:focus { outline: none; border-color: var(--accent); }
.onboarding-location-fields { display: grid; gap: 0.5rem; margin: 0.5rem 0; }
.onboarding-location-fields .onboarding-input { margin: 0; }
.onboarding-location-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 480px) { .onboarding-location-row { grid-template-columns: 1fr; } }
.onboarding-actions { display: flex; justify-content: center; margin: 1rem 0 0.5rem; }
.onboarding-cta { font-size: 1rem; padding: 0.7rem 1.6rem; }
.onboarding-choices { display: grid; gap: 0.6rem; margin: 0.5rem 0; text-align: left; }
.onboarding-choices-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.onboarding-choice {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 1rem;
  border: 1px solid rgba(0,0,0,0.14); border-radius: 12px; background: var(--surface);
  cursor: pointer; text-align: left; transition: border-color 0.12s, background 0.12s;
}
.onboarding-choice:hover { border-color: var(--accent); }
.onboarding-choice.is-selected { border-color: var(--accent); background: rgba(0,0,0,0.03); }
.onboarding-choice.is-compact { padding: 0.6rem 0.75rem; align-items: center; text-align: center; }
.onboarding-choice-label { font-weight: 600; }
.onboarding-choice-hint { font-size: 0.82rem; color: var(--muted); }
.onboarding-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; justify-content: center; }
.onboarding-chip {
  padding: 0.5rem 0.9rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 999px;
  background: var(--surface); cursor: pointer; font-size: 0.92rem; transition: border-color 0.12s, background 0.12s;
}
.onboarding-chip:hover { border-color: var(--accent); }
.onboarding-chip.is-selected { border-color: var(--accent); background: var(--accent); color: #fff; }
/* Goals laid out in a colour-coded column per tier. */
.onboarding-goal-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 0.75rem 0; text-align: left; align-items: start; }
.onboarding-goal-col { --tier: var(--accent); --tier-tint: rgba(0,0,0,0.03); border: 1px solid var(--tier); border-radius: 14px; overflow: hidden; background: var(--surface); }
.onboarding-goal-col[data-goal-tier="basic"] { --tier: #1f9d6b; --tier-tint: rgba(31,157,107,0.10); }
.onboarding-goal-col[data-goal-tier="studio"] { --tier: #4f5bd5; --tier-tint: rgba(79,91,213,0.10); }
.onboarding-goal-col[data-goal-tier="signature"] { --tier: #8656e0; --tier-tint: rgba(134,86,224,0.10); }
.onboarding-goal-col-head { background: var(--tier); color: #fff; padding: 0.5rem 0.75rem; text-align: center; }
.onboarding-goal-col-name { font-weight: 700; font-size: 0.95rem; }
.onboarding-goal-col-chips { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.55rem; }
.onboarding-goal-chip { border-radius: 10px; text-align: left; padding: 0.55rem 0.7rem; font-size: 0.88rem; border-color: var(--tier); background: var(--tier-tint); }
.onboarding-goal-chip:hover { border-color: var(--tier); background: var(--tier-tint); filter: brightness(0.97); }
.onboarding-goal-chip.is-selected { background: var(--tier); border-color: var(--tier); color: #fff; }
@media (max-width: 640px) { .onboarding-goal-columns { grid-template-columns: 1fr; } }
.onboarding-track-group { text-align: left; margin: 0.75rem 0; }
.onboarding-track-label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.onboarding-yesno { display: flex; gap: 0.6rem; }
.onboarding-yesno .onboarding-choice { flex: 1; }
.onboarding-rep-want { margin-top: 1rem; text-align: left; }
.onboarding-rep-want.hidden { display: none; }
.onboarding-rep-target { margin-top: 0.85rem; }
.onboarding-rep-target.hidden { display: none; }
.onboarding-nav .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.onboarding-target-nudge { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; border-left: 3px solid var(--accent); }
.onboarding-target-nudge-body { flex: 1 1 260px; }
.onboarding-target-nudge-body strong { display: block; }
.onboarding-actions-stack { flex-direction: column; gap: 0.5rem; }
.onboarding-done-back { display: block; margin: 0.9rem auto 0; }
.onboarding-rep-detail { text-align: left; }
.onboarding-rep-gallery-list { display: grid; gap: 0.5rem; margin: 0.4rem 0; }
.onboarding-rep-gallery-row { display: grid; grid-template-columns: 1fr 0.7fr auto; gap: 0.4rem; align-items: center; }
.onboarding-rep-gallery-row input { width: 100%; padding: 0.55rem 0.65rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; }
.onboarding-rep-remove { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 0.3rem; }
.onboarding-rep-remove:hover { color: var(--danger, #c0392b); }
.onboarding-add-row { border: 1px dashed rgba(0,0,0,0.2); background: none; border-radius: 10px; padding: 0.5rem 0.8rem; cursor: pointer; font-size: 0.9rem; color: var(--accent); }
.onboarding-add-row:hover { border-color: var(--accent); }
/* Guided "add your first piece" tour */
.tour-overlay { position: fixed; inset: 0; z-index: 9800; pointer-events: none; }
.tour-highlight { position: fixed; border: 2px solid var(--accent); border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.45); transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease; pointer-events: none; }
.tour-tip { position: fixed; background: var(--surface); border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 0.9rem 1rem; box-shadow: 0 10px 32px rgba(0,0,0,0.2); pointer-events: auto; }
/* Developer / owner dev-tools panel (only rendered when ?dev access is on). */
.dev-tools { position: fixed; left: 14px; bottom: 14px; z-index: 9000; display: flex; flex-direction: column; align-items: flex-start; font-size: 0.85rem; }
.dev-tools-toggle { background: #111827; color: #fff; border: none; border-radius: 999px; padding: 0.4rem 0.75rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.3); opacity: 0.65; transition: opacity 0.12s; }
.dev-tools-toggle:hover { opacity: 1; }
.dev-tools-menu { display: none; flex-direction: column; gap: 0.3rem; margin-bottom: 0.45rem; background: #111827; color: #fff; border-radius: 12px; padding: 0.6rem; box-shadow: 0 12px 32px rgba(0,0,0,0.35); min-width: 190px; }
.dev-tools[data-open="true"] .dev-tools-menu { display: flex; }
.dev-tools-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.6; padding: 0 0.2rem 0.15rem; }
.dev-tools-btn { text-align: left; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 0.5rem 0.6rem; cursor: pointer; transition: background 0.12s; }
.dev-tools-btn:hover { background: rgba(255,255,255,0.18); }
.dev-tools-off { color: #fecaca; border-color: rgba(248,113,113,0.4); margin-top: 0.15rem; }
/* Header "?" help button + the Help & tours panel. */
.topbar-help { width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.15); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 1rem; cursor: pointer; flex: 0 0 auto; transition: border-color 0.12s, color 0.12s; }
.topbar-help:hover { border-color: var(--accent); color: var(--accent); }
.help-overlay { position: fixed; inset: 0; z-index: 7000; background: rgba(15,20,34,0.45); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: clamp(1.5rem, 6vh, 5rem) 1.25rem; }
.help-panel { position: relative; width: 100%; max-width: 560px; background: var(--surface); border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 1.5rem clamp(1.25rem, 4vw, 2rem); box-shadow: 0 20px 50px rgba(0,0,0,0.28); }
.help-close { position: absolute; top: 0.75rem; right: 0.9rem; border: none; background: transparent; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; }
.help-title { font-size: 1.4rem; margin: 0 0 0.3rem; }
.help-sub { color: var(--muted); margin: 0 0 1.1rem; }
.help-tours { display: flex; flex-direction: column; gap: 0.55rem; }
.help-tour { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 0.7rem 0.85rem; background: var(--surface); }
.help-tour.is-locked { opacity: 0.6; }
.help-tour-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.help-tour-title { font-weight: 700; }
.help-tour-blurb { font-size: 0.88rem; color: var(--muted); }
.help-tour-lock { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border: 1px solid rgba(0,0,0,0.15); border-radius: 999px; padding: 0.2rem 0.5rem; white-space: nowrap; }
.help-tier-heading { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0.85rem 0 0.1rem; }
.help-tours > .help-tier-heading:first-child { margin-top: 0; }
.help-faq-title { font-size: 1.05rem; margin: 1.3rem 0 0.6rem; }
.help-faqs .landing-faq-item { margin-bottom: 0.5rem; }
.tour-step-count { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.25rem; }
.tour-title { margin: 0 0 0.3rem; font-size: 1rem; }
.tour-body { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--text); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tour-actions .onboarding-skip { margin-top: 0; }
.tour-actions-nav { display: inline-flex; align-items: center; gap: 0.5rem; }
.onboarding-reco { background: rgba(0,0,0,0.03); border-radius: 10px; padding: 0.7rem 0.9rem; color: var(--text); }
.onboarding-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1.25rem; }
.onboarding-nav .onboarding-skip { margin-top: 0; }
.onboarding-nav-right { display: flex; align-items: center; gap: 0.75rem; }
.onboarding-back { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; }
.onboarding-back:hover { color: var(--text); }
.onboarding-plan.is-recommended { border-color: var(--accent); border-width: 2px; }
.onboarding-plan.is-selected { background: rgba(0,0,0,0.03); }
.onboarding-plan-badge.is-muted { background: var(--muted); }
.onboarding-plan-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.onboarding-plan-list li { font-size: 0.8rem; color: var(--muted); padding-left: 1rem; position: relative; }
.onboarding-plan-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); }
/* Settings "About you" editable chips */
.settings-about-group { margin-top: 0.75rem; }
.settings-about-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.settings-about-chip {
  padding: 0.35rem 0.7rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 999px;
  background: var(--surface); cursor: pointer; font-size: 0.85rem;
}
.settings-about-chip:hover { border-color: var(--accent); }
.settings-about-chip.is-selected { border-color: var(--accent); background: var(--accent); color: #fff; }

@media (max-width: 960px) {
  .open-call-custom-row {
    grid-template-columns: 1fr;
  }

  /* Single-column at this width: reset every full-width item (labels AND
     div sections / sub-field groups), or a leftover `grid-column: span 2`
     forces an implicit 2nd column and collapses the 1fr column to ~27px. */
  .modal-form .full,
  .modal-form label.full {
    grid-column: auto;
  }

  .calendar-day { min-height: 92px; }

  .row {
    flex-direction: column;
    align-items: flex-start;
  }

  .assign-piece-row {
    grid-template-columns: auto 1fr;
  }
}


.assign-panel {
  margin: 0.8rem 0 0;
}

.assign-grid {
  display: grid;
  gap: 0.45rem;
  margin: 0.6rem 0 0.85rem;
}

.assign-piece-row {
  display: grid !important;
  grid-template-columns: auto auto 1fr 150px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
}

.assign-piece-row span {
  color: var(--text);
  font-weight: 500;
}

.prize-list { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }

.assign-piece-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #eef1f7;
}

.assign-piece-thumb.placeholder {
  display: inline-block;
}

.event-piece-main {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.event-piece-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #eef1f7;
}

.event-piece-thumb.placeholder {
  display: inline-block;
}

.event-detail-card {
  display: grid;
  gap: 0.75rem;
}

.event-section-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
}

.event-key-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}

.event-key-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.52rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.event-key-card span {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.event-key-card strong {
  font-size: 0.96rem;
  color: var(--text);
}

.event-summary-lines {
  display: grid;
  gap: 0.2rem;
}

.event-submitted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}

.event-submitted-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  align-items: start;
}

.event-submitted-media {
  padding: 0.68rem 0 0.68rem 0.68rem;
}

.event-submitted-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #eef1f7;
  border-radius: 12px;
}

.event-submitted-image.placeholder {
  background: linear-gradient(135deg, #dbe4f4, #eef2fb);
}

.event-submitted-body {
  display: grid;
  gap: 0.5rem;
  padding: 0.68rem 0.72rem 0.72rem 0;
}

.event-submitted-head {
  display: grid;
  gap: 0.2rem;
}

.event-submitted-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.event-piece-title-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.event-piece-controls {
  display: grid;
  gap: 0.45rem;
}

.event-piece-status-select {
  display: grid;
  gap: 0.22rem;
}

.event-piece-status-select select {
  width: 100%;
}

.event-piece-lock-row {
  margin: 0;
  font-size: 0.82rem;
}

.event-round-trail {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.event-piece-next-round {
  display: grid;
  gap: 0.35rem;
  padding: 0.52rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.event-piece-next-round span {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.event-piece-next-round strong {
  color: var(--text);
}

.decision-badge-btn {
  border: 0;
  cursor: pointer;
}

.event-submitted-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.event-piece-submission {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.15rem;
}

.event-doc-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}

.event-doc-group-card,
.event-doc-editor {
  display: grid;
  gap: 0.55rem;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.event-doc-group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.event-doc-group-head strong {
  color: var(--text);
}

.event-doc-list {
  display: grid;
  gap: 0.45rem;
}

.event-doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.event-doc-main {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.event-doc-open {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.event-doc-library {
  display: grid;
  gap: 0.3rem;
}

.event-doc-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 0.7rem;
  align-items: start;
}

.event-doc-editor label,
.event-doc-body-field {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.event-doc-editor-grid > .full {
  grid-column: 1 / -1;
}

.event-doc-editor-grid > label,
.event-doc-editor-grid > p {
  min-width: 0;
}

.event-doc-target-field {
  align-content: start;
}

.event-doc-editor input,
.event-doc-editor select,
.event-doc-editor textarea {
  width: 100%;
}

.event-doc-target-copy {
  grid-column: 2;
  margin: -0.08rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
}

.event-reminder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
}

.event-reminder-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.event-reminder-card.active {
  background: #f8fbff;
}

.event-compact-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
}

.event-compact-copy {
  display: grid;
  gap: 0.25rem;
}

.event-results-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.event-results-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.event-results-unsold { margin-top: 0.4rem; }
.event-results-unsold summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }

.piece-print-history {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.piece-print-history-head { margin: 0 0 0.25rem; }
.piece-print-history-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
}

.finance-sales-history-wrap { overflow-x: auto; }
.finance-sales-history {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.finance-sales-history th,
.finance-sales-history td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.finance-sales-history th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.finance-sales-history .fsh-work { font-weight: 600; }
.finance-sales-history .num { text-align: right; white-space: nowrap; }
.finance-sales-history tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--text);
  border-bottom: none;
}

.event-finance-details {
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
}

.event-finance-details summary {
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 600;
}

.event-empty-state {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.75rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.event-notes-copy {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--text);
}


.open-calls-toolbar {
  display: grid;
  grid-template-columns: 1.8fr repeat(4, minmax(150px, 1fr));
  gap: 0.65rem;
  align-items: end;
  margin-bottom: 0.8rem;
}

.open-calls-toolbar .subtitle {
  grid-column: 1 / -1;
}

/* Let every grid item shrink — without this a <select> showing a long option
   (e.g. a long piece title in the COA builder) inflates its column, squeezes the
   rest, and the controls/checkboxes overlap. Inputs and selects then fill (and
   stay within) their cell. */
.open-calls-toolbar > * {
  min-width: 0;
}
.open-calls-toolbar label > select,
.open-calls-toolbar label > input:not([type="checkbox"]):not([type="radio"]),
.open-calls-toolbar input[type="search"] {
  width: 100%;
  max-width: none;
}

/* COA "Type of work" original/print picker. */
.coa-type-field {
  display: grid;
  gap: 0.3rem;
  align-self: end;
}
.coa-radio-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.coa-radio-row input[type="radio"] {
  width: auto;
  min-height: 0;
  margin: 0;
}

/* Edition fields appear only for a print reproduction; the number/size only when
   it's a limited edition. Driven by :has() so no extra JS is needed. */
.coa-edition-fields {
  display: none;
}
#coa-builder:has(input[name="coa-artwork-type"][value="print"]:checked) .coa-edition-fields {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1.2rem;
}
.coa-edition-fields .coa-edition-number {
  display: none;
}
#coa-builder .coa-edition-fields:has(#coa-is-limited:checked) .coa-edition-number {
  display: grid;
  gap: 0.3rem;
}
.coa-edition-inputs {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.coa-edition-inputs input {
  width: 84px;
}

.open-calls-list,
.open-calls-history {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.open-call-eligibility {
  color: #9a5b00;
  font-weight: 600;
}

.open-call-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.open-call-selection-row.selected {
  border-color: rgba(89, 116, 201, 0.34);
  box-shadow: 0 12px 28px rgba(69, 89, 152, 0.08);
  background: #fbfcff;
}

.open-call-row-check {
  padding-top: 0.18rem;
}

.open-call-row-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.open-call-row-main {
  flex: 1;
  min-width: 0;
}

.open-call-row-head {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: flex-start;
}

.open-call-row-head h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.25;
}

.open-call-row-head .subtitle {
  margin: 0.1rem 0 0;
}

.open-call-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.open-call-summary-cell {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: #f7f9fe;
  min-width: 0;
}

.open-call-summary-cell span {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.08rem;
}

.open-call-summary-cell strong {
  display: block;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: anywhere;
}

.open-calls-bulk-toolbar .toolbar-controls {
  align-items: center;
}

/* Keep the section headings (New Competitions / Competition Planner Tracker)
   from sitting flush against the card directly above them. */
.open-calls-nav-row {
  margin-top: 1.1rem;
}

.badge.ok {
  background: #e8faf1;
  color: #227347;
}

.text-link {
  border: 0;
  background: transparent;
  color: var(--accent-dark);
  font: inherit;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.criteria-alert {
  margin-top: 0.45rem;
  color: #b4232e;
  font-weight: 600;
}

@media (max-width: 1200px) {
  .open-calls-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .open-calls-annual {
    min-height: auto;
  }

  .bank-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .open-call-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .calendar-toolbar-groups {
    width: 100%;
    justify-content: stretch;
  }

  .calendar-toolbar-left,
  .calendar-toolbar-right,
  .calendar-toolbar-search {
    width: 100%;
  }
}

.open-calls-annual {
  align-self: end;
  min-height: 42px;
  padding: 0.45rem 0.58rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
}

.open-call-bank {
  display: grid;
  gap: 0.45rem;
}

.open-call-custom-sites {
  display: grid;
  gap: 0.75rem;
}

.open-call-custom-grid {
  display: grid;
  gap: 0.6rem;
}

.open-call-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1.15fr) minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.import-grid-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
}

.import-grid-row input {
  margin-top: 0.2rem;
}

.import-candidates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.import-candidates-table th,
.import-candidates-table td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  color: var(--text);
}

.import-candidates-table th {
  background: #f7f8fc;
  color: var(--text);
}

.import-candidates-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.open-call-conflict-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(24, 33, 50, 0.42);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.open-call-conflict-card {
  width: min(1120px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow: auto;
  box-shadow: 0 20px 48px rgba(23, 35, 62, 0.18);
}

.open-call-conflict-table th:first-child,
.open-call-conflict-table td:first-child {
  width: 96px;
}

.archive-timeframe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

@media (max-width: 720px) {
  .open-call-conflict-overlay {
    padding: 1rem;
    align-items: stretch;
  }

  .open-call-conflict-card {
    width: 100%;
    max-height: none;
  }

  .archive-timeframe-row {
    width: 100%;
  }

  .open-call-row {
    flex-direction: column;
  }

  .open-call-row-head {
    flex-direction: column;
  }

  .open-call-summary-grid {
    grid-template-columns: 1fr;
  }
}

.planner-table-wrap {
  overflow-x: auto;
}

.planner-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px;
}

.planner-table th,
.planner-table td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 0.86rem;
}

.planner-table th {
  color: var(--muted);
  font-weight: 600;
  background: #f7f8fc;
  position: sticky;
  top: 0;
  z-index: 1;
}

.planner-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
}

.tier-inline {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}


.judging-grid {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.judging-grid label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 960px) {
  .judging-grid {
    grid-template-columns: 1fr;
  }

  .event-compact-toolbar,
  .event-empty-state,
  .event-submitted-head {
    flex-direction: column;
  }

  .reports-head {
    display: none;
  }

  .reports-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .reports-row .actions-inline {
    justify-content: flex-start;
  }

  .reports-ecosystem-stats {
    grid-template-columns: 1fr;
  }
}


.thumb-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  color: var(--text);
  font-size: 0.9rem;
}

.thumb-toggle input {
  width: 16px;
  height: 16px;
}



.field-label {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.contact-memory {
  margin-top: 0.45rem;
  padding: 0.45rem 0.55rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfcff;
  font-size: 0.85rem;
  color: var(--text);
}


.contact-work-list {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.contact-work-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  color: var(--text);
}

.contact-work-thumb {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #eef2fb;
  flex: 0 0 30px;
}

.contact-work-thumb.placeholder {
  background: linear-gradient(135deg, #d9e2f9, #edf1fb);
}

.btn.is-loading {
  opacity: 0.85;
  cursor: wait;
}

.assignment-modal-piece {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbff;
}

.assignment-modal-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #eef1f7;
}

.assignment-modal-thumb.placeholder {
  display: inline-block;
}

.gallery-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.gallery-summary-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85rem;
}

.gallery-summary-main {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 0.2rem;
  flex: 1;
}

.gallery-summary-main strong {
  font-size: 1rem;
  color: var(--text);
}

.gallery-route-panel {
  display: grid;
  gap: 0.8rem;
}

.gallery-report-shell {
  margin-top: 1rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
}

.gallery-report-grid {
  display: grid;
  gap: 1.35rem;
}

.gallery-report-section {
  display: grid;
  gap: 0.9rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(24, 33, 50, 0.08);
}

.gallery-report-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.gallery-report-section h3,
.gallery-report-section h4 {
  margin: 0;
}

.gallery-report-section .toolbar {
  margin-bottom: 0.15rem;
}

.gallery-report-fact-list {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gallery-report-fact-row {
  display: grid;
  gap: 0.2rem;
  padding: 0.35rem 0;
  border: 0;
  border-bottom: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 0;
  background: transparent;
}

.gallery-report-fact-row:last-child {
  border-bottom: 0;
}

.gallery-report-fact-row span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gallery-report-fact-row strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.4;
}

.gallery-report-subsection,
.gallery-report-address-group {
  display: grid;
  gap: 0.65rem;
}

.gallery-report-subsection {
  padding-top: 0.55rem;
}

.gallery-report-address-list {
  display: grid;
  gap: 0.45rem;
}

.gallery-report-copy {
  margin: 0;
  color: var(--text);
  line-height: 1.65;
  max-width: 72ch;
}

.gallery-editor-status-card {
  border-style: dashed;
  border-color: rgba(24, 33, 50, 0.14);
}

/* Tighten the status tile: keep it a compact single row (pill left, controls
   right) and drop the browser-default h3 margin that left dead space on top. */
.gallery-editor-status-card .toolbar {
  margin-bottom: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.gallery-editor-status-card .toolbar h3 {
  margin: 0;
}

.gallery-editor-status-card.is-dirty {
  border-color: rgba(53, 99, 194, 0.38);
  box-shadow: 0 0 0 2px rgba(53, 99, 194, 0.08);
  background: #f9fbff;
}

.modal-form-save-bar {
  border-style: dashed;
  border-color: rgba(24, 33, 50, 0.14);
}

.modal-form-save-bar.is-dirty {
  border-color: rgba(53, 99, 194, 0.38);
  box-shadow: 0 0 0 2px rgba(53, 99, 194, 0.08);
  background: #f9fbff;
}

.modal-form-save-bar-status {
  min-height: 1.6rem;
  display: flex;
  align-items: center;
}

.modal-form-corner-save {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-bottom: -0.2rem;
}

.modal-form-save-icon-button {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-form-save-icon-button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.field-helper-text {
  margin: 0;
}

.checkbox-group-field {
  display: grid;
  gap: 0.55rem;
}

.checkbox-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.45rem 0.9rem;
}

.gallery-feature-locked-card,
.feature-locked-card {
  display: grid;
  gap: 0.85rem;
  border-style: dashed;
  border-color: rgba(24, 33, 50, 0.16);
  background: #fbfcff;
}

.feature-upgrade-page {
  display: grid;
  place-items: center;
  min-height: 50vh;
}

/* Map view */
.palette-map-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  align-items: start;
}

.map-select-panel {
  max-height: 560px;
  overflow-y: auto;
  display: grid;
  gap: 0.9rem;
  padding-right: 0.25rem;
}

.map-select-group {
  display: grid;
  gap: 0.35rem;
}

.map-select-group h4 {
  margin: 0 0 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.map-select-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(24, 33, 50, 0.1);
  border-radius: 10px;
  cursor: pointer;
}

.map-select-row.is-disabled {
  opacity: 0.55;
  cursor: default;
}

.map-select-copy {
  display: grid;
  gap: 0.1rem;
}

.palette-map-canvas {
  height: 560px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(24, 33, 50, 0.12);
  z-index: 0;
}

.map-canvas-wrap {
  display: grid;
  gap: 0.4rem;
}

.map-status {
  margin: 0;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0.4rem 0 0.8rem;
}

.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.map-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(24, 33, 50, 0.18);
}

@media (max-width: 900px) {
  .palette-map-layout {
    grid-template-columns: 1fr;
  }
  .map-select-panel {
    max-height: 320px;
  }
}

/* Discover galleries */
.discovery-search-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.4rem 0;
}

.discovery-search-row input {
  flex: 1 1 280px;
  min-width: 0;
}

.discovery-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.3rem 0 0.6rem;
}

.discovery-results-panel {
  display: grid;
  gap: 0.5rem;
}

.discovery-result-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(24, 33, 50, 0.1);
  border-radius: 10px;
}

.discovery-result-copy {
  display: grid;
  gap: 0.12rem;
}

.discovery-notable {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a6d00;
  background: #fff5d6;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.1rem;
}

/* Curated UK directory (browse mode) — mode toggle, filters, status tags. */
.discovery-mode-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.directory-controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.6rem;
}
.directory-controls #gallery-directory-search {
  flex: 1 1 200px;
  min-width: 0;
}
.directory-controls .field-label-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.directory-controls .field-label-inline .field-label { margin: 0; white-space: nowrap; }
.directory-controls .field-label-inline select { min-width: 0; }
.directory-count { margin: 0; font-size: 0.82rem; }
.directory-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.55rem;
}
.directory-bulk-bar:empty { display: none; }
.directory-bulk-bar .btn { white-space: nowrap; }

/* Condensed one-line-per-gallery list (a scrollable directory, not big cards). */
.directory-list {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.directory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--line);
}
.directory-row:last-child { border-bottom: 0; }
.directory-row-copy { min-width: 0; }
.directory-row-name { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; line-height: 1.25; }
.directory-row-name strong { font-size: 0.92rem; }
.directory-row-meta {
  display: block;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46ch;
}
.directory-web { text-decoration: none; font-size: 0.85rem; opacity: 0.75; }
.directory-web:hover { opacity: 1; }
.directory-add { flex: 0 0 auto; }
.directory-status {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
}
.directory-status--to-confirm { color: #8a6d00; background: #fff5d6; }
.directory-status--by-appointment { color: #2b5f8a; background: #dcefff; }
.directory-status--closed { color: #8a3b3b; background: #ffe2e2; }

/* Gated form fields are rendered but hidden so their values survive a save. */
.field-gated-hidden[hidden] {
  display: none !important;
}

.field-feature-lock {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  border: 1px dashed rgba(24, 33, 50, 0.18);
  border-radius: 12px;
  background: #fbfcff;
}

.field-feature-lock p.subtitle {
  margin: 0.1rem 0 0;
}

.place-lookup-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.place-lookup-controls .place-lookup-area {
  flex: 0 1 240px;
  min-width: 0;
}

/* Flex column (not grid) so an appended .full child — the results dropdown — can't
   trigger a 2-column track and shove the name box sideways mid-lookup. */
.modal-form .name-lookup-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.name-lookup-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.name-lookup-row .name-lookup-input {
  flex: 1 1 220px;
  min-width: 0;
}

.name-lookup-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Beat the modal-form's global input max-width (0,3,1) with an equal-specificity,
   later rule so the optional town box stays compact rather than full-width. */
.modal-form .name-lookup-field input.place-lookup-area {
  max-width: 320px;
}

.name-lookup-field .place-lookup-status:empty {
  display: none;
}

/* Contact roles — collapsed dropdown that opens to grouped, multi-tick roles */
.contact-roles-dropdown > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(24, 33, 50, 0.18);
  border-radius: 10px;
  background: #fff;
  color: #1a2233;
}

.contact-roles-dropdown > summary::-webkit-details-marker {
  display: none;
}

.contact-roles-dropdown > summary::after {
  content: "▾";
  margin-left: auto;
  color: #8a93a6;
}

.contact-roles-dropdown[open] > summary::after {
  content: "▴";
}

.contact-roles-dropdown[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.contact-roles-groups {
  display: grid;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 1px solid rgba(24, 33, 50, 0.14);
  border-top: none;
  border-radius: 0 0 10px 10px;
}

.contact-roles-group {
  border: 1px solid rgba(24, 33, 50, 0.1);
  border-radius: 10px;
  padding: 0.3rem 0.7rem;
  background: #fbfcff;
}

.contact-roles-group > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0;
}

.contact-roles-group > summary::-webkit-details-marker {
  display: none;
}

.contact-roles-group > summary::before {
  content: "▸";
  color: #8a93a6;
  font-size: 0.8rem;
}

.contact-roles-group[open] > summary::before {
  content: "▾";
}

.contact-roles-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.15rem 0.9rem;
  padding: 0.3rem 0 0.5rem 1rem;
}

.contact-role-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.feature-upgrade-hero {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  text-align: center;
  max-width: 540px;
  border-style: dashed;
  border-color: rgba(24, 33, 50, 0.16);
  background: #fbfcff;
}

.feature-upgrade-hero h2 {
  margin: 0;
}

.feature-upgrade-hero .badge {
  justify-self: center;
}

.gallery-linked-record-reveal,
.searchable-multi-select,
.gallery-consignment-artwork-row {
  display: grid;
  gap: 0.7rem;
}

.searchable-multi-select {
  padding: 0.75rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fff;
}

.searchable-multi-select-input {
  width: 100%;
}

.searchable-multi-select select[multiple] {
  min-height: 168px;
}

.searchable-multi-select-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.45rem 0.8rem;
}

.gallery-linked-record-reveal {
  padding: 0.8rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fcfdff;
}

.gallery-consignment-artwork-list {
  display: grid;
  gap: 0.9rem;
}

.gallery-consignment-artwork-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.95rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 16px;
  background: #fff;
}

.gallery-consignment-artwork-row > .full,
.gallery-consignment-artwork-actions {
  grid-column: 1 / -1;
}

@media (max-width: 820px) {
  .gallery-consignment-artwork-row {
    grid-template-columns: 1fr;
  }

  .searchable-multi-select-footer,
  .modal-choice-actions {
    justify-content: flex-start;
  }
}

.modal-choice-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(24, 33, 50, 0.42);
}

.modal-choice-card {
  width: min(520px, calc(100vw - 2rem));
  display: grid;
  gap: 1rem;
}

.modal-choice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.7rem;
}

.gallery-opening-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
  overflow: hidden;
}

.gallery-opening-list.is-report {
  background: rgba(248, 250, 255, 0.72);
}

.gallery-opening-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.72fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.9rem;
  border-top: 1px solid rgba(24, 33, 50, 0.08);
}

.gallery-opening-row:first-child {
  border-top: 0;
}

.gallery-opening-row.is-report {
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1.25fr);
}

.gallery-opening-day-label {
  color: var(--text);
}

.gallery-opening-row label {
  margin-bottom: 0;
}

.gallery-opening-row-times {
  color: var(--text);
}

.gallery-opening-closed-toggle {
  justify-self: end;
  white-space: nowrap;
}

/* Compact, single-line opening-hours rows for the EDITABLE forms
   (galleries / businesses / locations). Each day sits on one wrapping line
   instead of a tall stacked block. Report rows (.is-report) keep their own
   read-only two-column layout, so they're excluded here. */
.gallery-opening-row:not(.is-report) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.5rem 0.85rem;
}
.gallery-opening-row:not(.is-report) .gallery-opening-day-label {
  flex: 0 0 84px;
  font-size: 0.9rem;
}
.gallery-opening-row:not(.is-report) label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
}
.gallery-opening-row:not(.is-report) label .field-label {
  margin-bottom: 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.gallery-opening-row:not(.is-report) input[type="time"] {
  width: 108px;
  min-width: 0;
  padding: 0.32rem 0.44rem;
}
.gallery-opening-row:not(.is-report) .checkbox-row {
  gap: 0.32rem;
  white-space: nowrap;
}

.gallery-artist-import-panel,
.gallery-artist-review-shell {
  display: grid;
  gap: 0.75rem;
}

.gallery-associated-artist-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
  align-items: end;
  margin-bottom: 0.9rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fbfcff;
}

.gallery-associated-artist-selection {
  align-self: center;
  margin-bottom: 0;
}

.gallery-artist-followup-shell {
  margin-top: 0.9rem;
}

#gallery-associated-artist-followup-rows,
.gallery-artist-encounter-list,
.gallery-representation-date-list {
  display: grid;
  gap: 0.75rem;
}

.gallery-artist-followup-row {
  display: grid;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fff;
}

.gallery-artist-followup-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.gallery-artist-followup-copy {
  display: grid;
  gap: 0.28rem;
}

.gallery-artist-followup-copy .subtitle {
  margin: 0;
}

.gallery-artist-followup-toggles {
  display: grid;
  gap: 0.5rem;
}

.gallery-artist-followup-name {
  color: var(--text);
  font-size: 0.98rem;
}

.gallery-artist-encounter-card {
  display: grid;
  gap: 0.85rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(24, 33, 50, 0.08);
}

.gallery-artist-encounter-head {
  display: grid;
  gap: 0.2rem;
}

.gallery-artist-encounter-card h4 {
  margin: 0;
}

.gallery-artist-encounter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.9rem;
}

.gallery-artist-import-panel {
  margin-bottom: 0.9rem;
  padding: 0.85rem 0.9rem;
  border: 1px dashed rgba(63, 106, 216, 0.28);
  border-radius: 14px;
  background: rgba(245, 248, 255, 0.78);
}

.gallery-artist-review-list {
  display: grid;
  gap: 0.6rem;
}

.gallery-artist-review-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 10px;
  background: #fff;
}

.gallery-person-import-meta {
  grid-column: 1 / -1;
}

.gallery-artist-review-name {
  flex: 1 1 180px;
  min-width: 140px;
}

.gallery-artist-review-status {
  display: flex;
  gap: 0.25rem 0.9rem;
  flex: 0 1 auto;
  flex-wrap: wrap;
}

.gallery-artist-review-status .checkbox-row {
  margin-bottom: 0;
}

.gallery-artist-review-remove {
  flex: 0 0 auto;
  margin-left: auto;
}

.gallery-artist-review-source {
  flex-basis: 100%;
  font-size: 0.76rem;
  margin: 0;
}

.gallery-artist-review-select {
  align-self: center;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.gallery-exhibition-section {
  display: grid;
  gap: 0.9rem;
}

.gallery-exhibition-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.gallery-exhibition-meta-grid > .full:last-child {
  grid-column: 1 / -1;
}

.gallery-exhibition-rooms-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.gallery-exhibition-room-list,
.gallery-exhibition-room-report-list {
  display: grid;
  gap: 0.7rem;
}

.gallery-exhibition-room-row,
.gallery-exhibition-room-report-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.gallery-exhibition-room-head,
.gallery-exhibition-room-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
}

.gallery-exhibition-room-head > .full {
  flex: 1;
}

.gallery-exhibition-room-row select[multiple] {
  min-height: 130px;
}

.gallery-exhibition-room-artworks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.gallery-route-toggle-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.gallery-route-builder-card {
  margin-bottom: 1rem;
}

.gallery-contact-list {
  display: grid;
  gap: 0.5rem;
}

.gallery-person-row,
.gallery-contact-item,
.gallery-contact-row {
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 10px;
  padding: 0.65rem;
  background: rgba(248, 250, 255, 0.78);
}

.gallery-person-row {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-person-row .full {
  grid-column: 1 / -1;
}

.gallery-artist-status-tags {
  display: grid;
  gap: 0.3rem;
}
.subtle-hint {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85em;
}
.gallery-artist-status-tags .actions-inline {
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}
.gallery-artist-bulk-actions {
  display: grid;
  gap: 0.35rem;
  grid-column: 1 / -1;
}
.gallery-artist-bulk-actions .actions-inline {
  flex-wrap: wrap;
  gap: 0.4rem;
}
.gallery-artist-activity {
  display: grid;
  gap: 0.4rem;
}
.gallery-artist-activity-body {
  display: grid;
  gap: 0.5rem;
}
.gallery-artist-activity-row {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px dashed rgba(24, 33, 50, 0.16);
  border-radius: 8px;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.6);
}
.gallery-artist-activity-row .full {
  grid-column: 1 / -1;
}
.gallery-artist-activity-row [data-action="remove-gallery-artist-activity-row"] {
  grid-column: 1 / -1;
  justify-self: start;
}

.gallery-artist-timeline-label {
  margin-top: 0.45rem;
  font-weight: 600;
}
.gallery-artist-timeline {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.3rem;
  border-left: 2px solid rgba(53, 99, 194, 0.25);
  padding-left: 0.6rem;
}
.gallery-artist-timeline-item {
  display: grid;
  gap: 0.15rem;
}
.gallery-artist-timeline-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gallery-artist-timeline-date {
  font-size: 0.82rem;
  color: var(--muted);
}

.gallery-linked-exhibition-picker {
  display: grid;
  gap: 0.65rem;
}

.gallery-linked-exhibition-picker-panel {
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.gallery-linked-exhibition-picker-panel summary {
  cursor: pointer;
  list-style: none;
  padding: 0.8rem 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.gallery-linked-exhibition-picker-panel summary::-webkit-details-marker {
  display: none;
}

.gallery-linked-exhibition-picker-panel[open] summary {
  border-bottom: 1px solid rgba(24, 33, 50, 0.08);
  background: #fbfcff;
}

.gallery-linked-exhibition-picker-body {
  padding: 0.85rem;
}

.gallery-linked-exhibition-picker-actions {
  justify-content: flex-start;
}

.gallery-representation-date-editor-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.gallery-representation-reminder-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-representation-date-actions {
  justify-content: flex-end;
}

.gallery-consignment-artwork-row input[readonly] {
  background: #f5f7fb;
}

[data-gallery-consignment-artwork="paymentSummary"] {
  margin-top: -0.15rem;
  color: var(--text);
}

.gallery-contact-row {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-contact-row .full {
  grid-column: 1 / -1;
}

.contact-method-field {
  display: grid;
  gap: 0.6rem;
}

.contact-method-list {
  display: grid;
  gap: 0.55rem;
}

/* Inline yes/no question: label text on the left, control beside it. */
.modal-form label.field-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.modal-form label.field-inline > .field-label {
  margin-bottom: 0;
}

.modal-form label.field-inline > select {
  width: auto;
  min-width: 96px;
  flex: 0 0 auto;
}

/* Partner details: each partner is a self-contained card. */
.contact-partner-row {
  display: grid;
  gap: 0.6rem;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.contact-partner-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.55rem;
  align-items: end;
}

.contact-partner-fields > label {
  margin-bottom: 0;
}

.contact-partner-row .contact-partner-notes {
  margin-bottom: 0;
}

.contact-partner-row-actions {
  display: flex;
  justify-content: flex-end;
}

/* Art fair prep — collapsible staged workspace. */
.fair-prep-field {
  gap: 0.55rem;
}

.fair-prep-stage {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 0.4rem 0.75rem;
}

.fair-prep-stage[open] {
  padding-bottom: 0.75rem;
}

.fair-prep-stage-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
  padding: 0.4rem 0;
}

.fair-prep-stage-summary::-webkit-details-marker { display: none; }

.fair-prep-stage[open] .fair-prep-stage-summary .section-caret { transform: rotate(0deg); }
.fair-prep-stage .section-caret { transform: rotate(-90deg); transition: transform 0.15s ease; color: var(--muted); }

.fair-prep-stage-blurb {
  margin: 0 0 0.5rem;
}

.fair-prep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.55rem;
}
.fair-prep-depends { display: contents; }
.fair-prep-depends.hidden { display: none; }
.fair-prep-address { display: flex; flex-direction: column; gap: 0.35rem; }
.fair-prep-address-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.45rem; }
.fair-prep-contact-link-row { display: flex; gap: 0.4rem; align-items: center; }
.fair-prep-contact-link-row input[type="text"] { flex: 1 1 auto; min-width: 0; }
.fair-prep-linked { flex: 0 0 auto; font-size: 0.8rem; color: #1b8a5a; white-space: nowrap; }

.fair-prep-grid > label.full,
.fair-prep-grid > label.checkbox-row {
  grid-column: 1 / -1;
}

.fair-prep-cost {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0;
}

.fair-prep-cost-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fair-prep-cost-sign {
  color: var(--muted);
  font-weight: 600;
}

.fair-prep-finance-toggle {
  display: flex !important;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  cursor: pointer;
}

.fair-prep-finance-toggle input { margin: 0; }

.fair-prep-supplier {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0;
}

.fair-prep-supplier-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.fair-prep-supplier-control select {
  flex: 1 1 200px;
  min-width: 0;
}

.fair-prep-supplier-verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Discovered-artists list (Your visit). */
.fair-artist-row {
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.fair-artist-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.55rem;
  align-items: end;
}

.fair-artist-fields > label,
.fair-artist-row > label.full { margin-bottom: 0; }

.fair-artist-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.fair-artist-linked {
  margin-right: auto;
  color: #2f8a50;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.fair-purchase-hint {
  margin-right: auto;
  font-size: 0.78rem;
}

.fair-visit-contacts {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0;
}

.fair-visit-contacts-control {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.fair-visit-contacts-control select {
  flex: 1 1 220px;
  min-width: 0;
}

/* Tick-box dropdown multi-select (tick as many as you need). */
.tickbox-dropdown { flex: 1 1 240px; min-width: 0; border: 1px solid var(--border, rgba(0,0,0,0.15)); border-radius: 10px; background: var(--surface, #fff); }
.tickbox-dropdown-summary { list-style: none; cursor: pointer; padding: 0.55rem 0.8rem; display: flex; align-items: center; justify-content: space-between; }
.tickbox-dropdown-summary::-webkit-details-marker { display: none; }
.tickbox-dropdown-summary::after { content: "▾"; color: var(--muted); margin-left: 0.5rem; }
.tickbox-dropdown[open] .tickbox-dropdown-summary::after { content: "▴"; }
.tickbox-dropdown-body { border-top: 1px solid var(--border, rgba(0,0,0,0.1)); padding: 0.5rem; display: grid; gap: 0.4rem; }
.tickbox-dropdown-search { width: 100%; height: 34px; }
.tickbox-dropdown-list { max-height: 220px; overflow-y: auto; display: grid; gap: 0.1rem; }
.tickbox-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; border-radius: 6px; cursor: pointer; }
.tickbox-row:hover { background: var(--bg, #f6f7fb); }
.tickbox-row input { margin: 0; }

.fair-prep-total {
  margin: 0.2rem 0 0;
  font-weight: 600;
  color: var(--text);
}

/* Children recorded with a partner. */
.contact-partner-children {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line);
}

.contact-partner-children-label {
  color: var(--muted);
  font-size: 0.82rem;
}

.contact-partner-child-list {
  display: grid;
  gap: 0.5rem;
}

.contact-partner-child-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.7fr) minmax(0, 1.4fr) auto;
  gap: 0.5rem;
  align-items: end;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8faff;
}

.contact-partner-child-row > label {
  margin-bottom: 0;
  min-width: 0;
}

@media (max-width: 620px) {
  .contact-partner-child-row {
    grid-template-columns: 1fr;
  }
}

/* Art Fairs tab — role badge on each fair card. */
.art-fair-role-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #eef2fb;
  color: #3f6ad8;
}

.art-fair-role-badge.is-exhibiting {
  background: #e7f6ec;
  color: #2f8a50;
}

.art-fair-role-badge.is-planning {
  background: #fbf0dd;
  color: #b07d18;
}

/* Supplier verdict (Businesses) — recommend / avoid + stars. */
.supplier-verdict-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.15rem 0 0.1rem;
}

.supplier-verdict-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.supplier-verdict-badge.is-avoid {
  background: #fbe4e4;
  color: #c0392b;
}

.supplier-verdict-badge.is-recommended {
  background: #e7f6ec;
  color: #2f8a50;
}

.supplier-stars {
  color: #d8a200;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.gallery-summary-card.supplier-avoid {
  border-color: #e6a6a0;
  background: #fff7f6;
}

.business-category-group {
  margin-bottom: 1.1rem;
}

.business-category-heading {
  margin: 0.4rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-method-row {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.contact-method-row label {
  margin-bottom: 0;
}

.contact-method-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.contact-method-row select {
  min-height: 44px;
  height: 44px;
}

.contact-method-type-field {
  max-width: 150px;
}

.contact-social-link-row {
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) auto;
}

.contact-method-row > .full {
  grid-column: 1 / -1;
}

.artwork-price-variant-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.artwork-price-variant-row [data-price-variant-other] {
  grid-column: 1 / -1;
}

.artwork-price-variant-actions,
.popup-person-row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.popup-people-field .contact-method-list {
  gap: 0.75rem;
}

.popup-person-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.popup-person-row textarea {
  min-height: 76px;
}

.repeatable-text-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.contact-where-met-field {
  gap: 0.65rem;
}

.contact-where-met-dropdown {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.contact-where-met-dropdown[open] {
  box-shadow: 0 14px 34px rgba(26, 36, 64, 0.08);
}

.contact-where-met-trigger {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 46px;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
}

.contact-where-met-trigger::-webkit-details-marker {
  display: none;
}

.contact-where-met-trigger-copy {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.contact-where-met-placeholder {
  color: var(--muted);
}

.contact-where-met-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.contact-where-met-selected-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f6f8fd;
  color: #2b4a8b;
  font-size: 0.82rem;
  white-space: nowrap;
}

.contact-where-met-selected-chip.is-muted {
  color: var(--muted);
  background: #fff;
}

.contact-where-met-trigger-caret {
  color: var(--muted);
  font-size: 0.9rem;
}

.contact-where-met-menu {
  display: grid;
  gap: 0.6rem;
  padding: 0 0.8rem 0.8rem;
  border-top: 1px solid rgba(151, 163, 183, 0.16);
}

.contact-where-met-search-field {
  margin-bottom: 0;
}

.contact-where-met-search-field input[type="search"] {
  width: 100%;
  max-width: none;
}

.contact-where-met-options-list {
  display: grid;
  gap: 0.35rem;
  max-height: 260px;
  overflow: auto;
  padding-right: 0.15rem;
}

.contact-where-met-option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.25rem 0;
}

.contact-where-met-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.contact-where-met-option span {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font-size: 0.92rem;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.contact-where-met-option input:checked + span {
  border-color: rgba(78, 110, 190, 0.36);
  background: #eef3ff;
  color: #2b4a8b;
  box-shadow: inset 0 0 0 1px rgba(78, 110, 190, 0.08);
}

.contact-where-met-secondary {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
}

.relationship-links-field {
  gap: 0.8rem;
}

.contact-relationship-intro,
.contact-network-people-intro {
  margin: -0.15rem 0 0;
}

.relationship-groups-list {
  gap: 0.8rem;
}

.contact-network-people-list {
  gap: 0.8rem;
}

.relationship-group-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
}

.relationship-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: end;
}

.relationship-group-head--compact {
  align-items: start;
}

.relationship-group-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.relationship-link-type {
  min-width: 0;
}

.relationship-link-person {
  min-width: 0;
}

.relationship-type-list {
  display: grid;
  gap: 0.6rem;
}

.relationship-type-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.2fr) auto;
  gap: 0.55rem;
  align-items: end;
  padding: 0.7rem;
  border: 1px solid rgba(151, 163, 183, 0.22);
  border-radius: 12px;
  background: #fff;
}

.relationship-type-row > .full {
  grid-column: 1 / -1;
}

.contact-network-person-card {
  gap: 0.65rem;
}

.contact-network-person-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.contact-network-person-inline {
  min-width: 0;
}

.contact-network-person-inline select,
.contact-network-person-inline input {
  min-width: 180px;
}

.contact-network-person-inline--wide {
  flex: 1 1 240px;
}

.contact-network-person-inline--wide select {
  width: 100%;
}

.contact-network-person-subject,
.contact-network-person-connector {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.contact-network-person-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.contact-network-person-meta > .full,
.contact-network-person-meta > label.full,
.contact-network-person-meta > label[data-contact-network-person-other-row] {
  grid-column: 1 / -1;
}

.contact-network-person-linked-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(151, 163, 183, 0.22);
}

@media (max-width: 820px) {
  .relationship-group-head,
  .relationship-type-row,
  .contact-network-person-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .relationship-group-actions {
    justify-content: flex-start;
  }

  .contact-network-person-inline,
  .contact-network-person-inline--wide {
    width: 100%;
    flex-basis: 100%;
  }

  .contact-network-person-inline select,
  .contact-network-person-inline input {
    width: 100%;
    min-width: 0;
  }
}

.contact-interaction-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.75rem;
}

.contact-interaction-row > .full {
  grid-column: 1 / -1;
}

.contact-interaction-row .contact-method-remove {
  grid-column: 1 / -1;
  justify-self: end;
}

.gallery-event-popup-section {
  display: grid;
  gap: 0.85rem;
}

.gallery-event-popup-helper {
  margin: 0;
}

.gallery-subsection-tabs {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.location-summary-card .gallery-summary-main {
  gap: 0.35rem;
}

.location-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.7rem;
}

.location-image-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #eef2fb;
}

.location-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.location-inline-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.location-inline-preview {
  max-width: 220px;
}

.location-staff-row,
.location-wall-row,
.location-menu-row,
.location-artist-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.location-picker-shell,
.stored-draft-panel {
  display: grid;
  gap: 0.8rem;
}

.location-picker-head h4,
.stored-draft-panel h3 {
  margin: 0;
}

.location-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}

.location-picker-grid--permanent {
  grid-template-columns: minmax(0, 1fr);
}

.location-picker-list {
  display: grid;
  gap: 0.55rem;
}

.location-picker-row {
  margin-bottom: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 12px;
  background: #fff;
}

.location-picker-card {
  display: grid;
  grid-template-columns: 18px 72px minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.location-picker-card--permanent {
  align-items: start;
}

.location-picker-card-body {
  display: grid;
  gap: 0.2rem;
}

.location-picker-card-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid rgba(24, 33, 50, 0.08);
  background: #eef2fb;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.location-picker-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-picker-thumb-fallback {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  padding: 0.35rem;
}

.location-opening-row {
  grid-template-columns: minmax(110px, 0.8fr) minmax(120px, 1fr) minmax(120px, 1fr) auto auto minmax(120px, 1fr) minmax(120px, 1fr);
}

.location-opening-again-toggle {
  justify-self: start;
}

.location-opening-second {
  margin-bottom: 0;
}

.location-charge-field {
  grid-column: 1 / -1;
}

.location-charge-row,
.location-charge-deposit-grid,
.location-permanent-select-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.location-charge-row {
  padding: 0.85rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fff;
}

.location-charge-row > .full,
.location-charge-deposit-grid > .full,
.location-permanent-select-fields > .full {
  grid-column: 1 / -1;
}

.location-permanent-select-row {
  display: grid;
  gap: 0.7rem;
}

.stored-draft-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

.stored-draft-badge {
  display: inline-flex;
  margin-bottom: 0.45rem;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  background: rgba(176, 34, 34, 0.12);
  color: #b22222;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.location-staff-row textarea,
.location-wall-row textarea,
.location-menu-row textarea,
.location-artist-row textarea,
.location-event-grid textarea,
.location-menu-review-card textarea,
.location-permanent-artwork-row textarea {
  min-height: 84px;
}

.location-menu-row textarea[data-location-menu="content"],
.location-menu-review-card textarea[data-location-menu-review="content"] {
  min-height: 140px;
}

.location-questionnaire-shell {
  display: grid;
  gap: 0.8rem;
  padding: 0.95rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.location-questionnaire-head {
  display: grid;
  gap: 0.25rem;
}

.location-questionnaire-head .field-label {
  margin: 0;
}

.location-questionnaire-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.location-questionnaire-groups {
  display: grid;
  gap: 0.7rem;
}

.location-questionnaire-group {
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.location-questionnaire-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.8rem 0.9rem;
  font-weight: 600;
  color: var(--text);
  background: #f8fbff;
  border-bottom: 1px solid rgba(24, 33, 50, 0.08);
}

.location-questionnaire-group > summary::-webkit-details-marker {
  display: none;
}

.location-questionnaire-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.9rem;
}

.location-questionnaire-grid > .full,
.location-questionnaire-checklist {
  grid-column: 1 / -1;
}

.location-questionnaire-checklist {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.location-questionnaire-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.9rem;
}

.location-questionnaire-field input[type="text"],
.location-questionnaire-field input[type="date"],
.location-questionnaire-field input[type="email"],
.location-questionnaire-field input[type="number"],
.location-questionnaire-field select {
  min-height: 44px;
}

.location-questionnaire-field textarea {
  min-height: 108px;
}

.location-questionnaire-report-group {
  padding-top: 0.35rem;
}

.location-questionnaire-report-group + .location-questionnaire-report-group {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(24, 33, 50, 0.08);
}

.location-questionnaire-report-group h4 {
  margin: 0 0 0.55rem;
  font-size: 0.98rem;
  color: var(--text);
}

.location-charge-report-item {
  display: grid;
  gap: 0.35rem;
}

.location-report-action-row {
  margin-top: 0.25rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.location-menu-import-panel {
  gap: 0.65rem;
}

.location-menu-import-panel .actions-inline {
  justify-content: flex-start;
}

.location-menu-review-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fff;
}

.location-menu-review-card .full {
  grid-column: 1 / -1;
}

.location-event-row,
.location-permanent-artwork-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.location-reminder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.location-event-row > summary,
.location-permanent-artwork-row > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  background: #f8fbff;
  border-bottom: 1px solid rgba(24, 33, 50, 0.08);
}

.location-event-row > summary::-webkit-details-marker,
.location-permanent-artwork-row > summary::-webkit-details-marker {
  display: none;
}

.location-event-row > summary strong,
.location-permanent-artwork-row > summary strong {
  font-size: 0.95rem;
  color: var(--text);
}

.location-event-row > summary .subtitle,
.location-permanent-artwork-row > summary .subtitle {
  margin: 0;
  text-align: right;
}

.location-event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0.9rem;
}

.location-event-grid > .full {
  grid-column: 1 / -1;
}

.location-event-section {
  display: grid;
  gap: 0.8rem;
  padding: 0.85rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
}

.location-event-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.location-event-section-head h4 {
  margin: 0;
}

.location-event-section-head p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.location-event-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.location-event-section-grid > .full {
  grid-column: 1 / -1;
}

.location-event-artwork-picker-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.location-picker-card--event-artwork {
  grid-template-columns: 18px 64px minmax(0, 1fr);
  align-items: start;
}

.location-event-artwork-detail-list {
  display: grid;
  gap: 0.7rem;
}

.location-event-artwork-detail-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.8rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 14px;
  background: #fff;
}

.location-event-artwork-detail-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.location-event-artwork-detail-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(24, 33, 50, 0.08);
  background: #eef2fb;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.location-event-artwork-detail-copy {
  display: grid;
  gap: 0.18rem;
}

.location-event-artwork-detail-copy strong,
.location-event-artwork-detail-copy .subtitle {
  margin: 0;
}

.location-event-artwork-detail-grid,
.location-event-text-row,
.location-event-schedule-row,
.location-event-text-editor,
.location-event-schedule-editor {
  display: grid;
  gap: 0.65rem;
}

.location-event-artwork-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.location-event-artwork-detail-grid > .full,
.location-event-text-row > .full,
.location-event-schedule-row > .full {
  grid-column: 1 / -1;
}

.location-event-text-row,
.location-event-schedule-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid rgba(24, 33, 50, 0.08);
  border-radius: 12px;
  background: #fff;
}

.location-event-schedule-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.location-event-inline-helper {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.location-event-empty-state {
  margin: 0;
  padding: 0.4rem 0;
}

select[multiple][data-multi-select-field] {
  min-height: 128px;
  height: auto;
  padding-block: 0.45rem;
}

@media (max-width: 720px) {
  .contact-interaction-row {
    grid-template-columns: 1fr;
  }

  .contact-avatar-picker-row {
    grid-template-columns: 1fr;
  }

  .location-staff-row,
  .location-wall-row,
  .location-menu-row,
  .location-artist-row,
  .location-menu-review-card,
  .location-event-grid,
  .location-event-section-grid,
  .location-event-artwork-detail-grid,
  .location-event-text-row,
  .location-event-schedule-row,
  .location-questionnaire-grid,
  .location-questionnaire-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .location-event-section-head {
    flex-direction: column;
  }

  .location-event-artwork-detail-head {
    grid-template-columns: 1fr;
  }

  .location-event-row > summary,
  .location-permanent-artwork-row > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .location-event-row > summary .subtitle,
  .location-permanent-artwork-row > summary .subtitle {
    text-align: left;
  }
}

.contact-viewing-room-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.contact-viewing-room-option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
}

.contact-viewing-room-option input {
  margin-top: 0.15rem;
}

.contact-viewing-room-option span {
  display: grid;
  gap: 0.18rem;
}

.contact-viewing-room-option small {
  color: var(--muted);
}

.exhibition-contact-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.exhibition-contact-row-actions {
  display: flex;
  justify-content: flex-start;
}

.exhibition-contact-row .contact-method-remove {
  margin-top: 0.1rem;
}

.exhibition-document-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.exhibition-document-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed #d7e0ed;
  border-radius: 10px;
  background: #f8fbff;
}

.exhibition-document-current.empty {
  justify-content: flex-start;
}

.exhibition-document-name {
  color: var(--text);
  font-size: 0.86rem;
}

.exhibition-artwork-field {
  display: grid;
  gap: 0.65rem;
}

.exhibition-artwork-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.exhibition-artwork-header-copy {
  display: grid;
  gap: 0.24rem;
}

.exhibition-artwork-helper {
  margin: 0;
}

.exhibition-assigned-artwork-list {
  display: grid;
  gap: 0.48rem;
}

.exhibition-assigned-artwork-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.58rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.exhibition-assigned-artwork-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.exhibition-assigned-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #f1f4f8;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.exhibition-artwork-chooser {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.exhibition-artwork-chooser-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(24, 33, 50, 0.42);
  cursor: pointer;
}

.exhibition-artwork-chooser-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(80vh, 820px);
  overflow: auto;
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fcfdff;
  box-shadow: 0 18px 52px rgba(27, 38, 59, 0.18);
}

.exhibition-artwork-chooser-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.exhibition-artwork-chooser-head h3 {
  margin: 0;
}

.exhibition-artwork-chooser-head .subtitle {
  margin: 0.28rem 0 0;
}

.exhibition-artwork-chooser-grid {
  margin: 0;
}

.exhibition-artwork-option {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  padding: 0.68rem 0.72rem;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.exhibition-artwork-option input {
  accent-color: #6f91e6;
}

.exhibition-artwork-option:has(input:checked) {
  border-color: #7c9fe8;
  background: #f2f6ff;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
}

.exhibition-artwork-option-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.exhibition-artwork-option-title {
  color: var(--text);
  font-weight: 600;
}

.exhibition-artwork-option small {
  color: var(--muted);
  font-size: 0.78rem;
}

.exhibition-artwork-chooser-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.2rem;
  border-top: 1px solid rgba(127, 143, 164, 0.18);
}

.exhibition-artwork-empty {
  margin: 0;
}

@media (max-width: 960px) {
  .exhibition-contact-row,
  .exhibition-document-row,
  .exhibition-artwork-option {
    grid-template-columns: 1fr;
  }

  .exhibition-artwork-header,
  .exhibition-artwork-chooser-head,
  .exhibition-artwork-chooser-actions {
    justify-content: flex-start;
  }

  .exhibition-artwork-chooser {
    padding: 0.75rem;
  }

  .exhibition-artwork-chooser-card {
    max-height: 86vh;
    padding: 0.9rem;
  }
}

/* "What I'm taking" — fair packing list */
.fair-taking-field {
  display: grid;
  gap: 0.85rem;
}

.fair-taking-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.fair-taking-header-copy {
  min-width: 0;
}

.fair-taking-helper {
  margin: 0.28rem 0 0;
  max-width: 46ch;
}

.fair-taking-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
}

.fair-taking-stat {
  background: var(--bg);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
}

.fair-taking-stat-label {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.fair-taking-stat-value {
  margin: 0.15rem 0 0;
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--text);
}

.fair-taking-list {
  display: grid;
  gap: 0;
}

.fair-taking-group-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.55rem 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.fair-taking-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.fair-taking-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.fair-taking-row-giclee {
  align-items: flex-start;
}

.fair-taking-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.fair-taking-thumb.placeholder {
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--muted);
}

.fair-taking-row-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.fair-taking-row-main strong {
  color: var(--text);
}

.fair-taking-row-main .subtitle {
  margin: 0;
}

.fair-taking-row-qty-fixed {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

.fair-taking-sizes {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.fair-taking-size-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fair-taking-size-copy {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  color: var(--text);
}

.fair-taking-stock {
  color: var(--muted);
}

.fair-taking-stock-low {
  color: #b56a13;
}

.fair-taking-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.fair-taking-stepper .btn.mini {
  width: 28px;
  padding: 0;
  text-align: center;
}

.fair-taking-qty-readout {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 600;
  color: var(--text);
}

.fair-taking-remove {
  flex-shrink: 0;
  color: var(--muted);
}

.fair-taking-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--nav-active-bg);
  color: var(--nav-active-color);
  border-radius: 10px;
  font-size: 0.82rem;
}

.fair-taking-empty {
  margin: 0.3rem 0;
}

.fair-taking-chooser {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.fair-taking-chooser-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(24, 33, 50, 0.42);
  cursor: pointer;
}

.fair-taking-chooser-card {
  position: relative;
  width: min(620px, 100%);
  max-height: min(80vh, 820px);
  overflow: auto;
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 52px rgba(27, 38, 59, 0.18);
}

.fair-taking-chooser-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.fair-taking-chooser-head h3 {
  margin: 0;
}

.fair-taking-chooser-head .subtitle {
  margin: 0.28rem 0 0;
}

.fair-taking-chooser-grid {
  display: grid;
  gap: 0.4rem;
}

.fair-taking-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.fair-taking-option input {
  accent-color: var(--accent);
}

.fair-taking-option:has(input:checked) {
  border-color: #7c9fe8;
  background: var(--nav-active-bg);
}

.fair-taking-option-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.fair-taking-option-title {
  color: var(--text);
  font-weight: 600;
}

.fair-taking-option small {
  color: var(--muted);
  font-size: 0.78rem;
}

.fair-taking-chooser-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.2rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 960px) {
  .fair-taking-option {
    grid-template-columns: auto 1fr;
  }
  .fair-taking-chooser {
    padding: 0.75rem;
  }
}

/* Stand readiness */
.fair-ready-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  vertical-align: 1px;
  white-space: nowrap;
}
.fair-ready-badge.is-ready {
  background: #effaf1;
  color: #1c6b34;
}
.fair-ready-badge.is-todo {
  background: #fbf0db;
  color: #8a5a12;
}

.fair-readiness {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.fair-readiness-title {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.fair-readiness-helper {
  margin: 0.2rem 0 0;
  max-width: 52ch;
}

.fair-readiness-meter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.7rem 0 0.2rem;
}

.fair-readiness-count {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.fair-readiness-count-total {
  color: var(--muted);
  font-weight: 400;
}

.fair-readiness-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #e6eaf1;
  overflow: hidden;
}

.fair-readiness-bar-fill {
  display: block;
  height: 100%;
  background: #1f9d6b;
  border-radius: 999px;
  transition: width 0.2s ease;
}

.fair-readiness-group-todo span:first-child {
  color: #8a5a12;
}

.fair-readiness-group-ready span:first-child {
  color: #1c6b34;
}

.fair-readiness-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.fair-readiness-row .fair-taking-thumb {
  width: 36px;
  height: 36px;
}

.fair-readiness-row-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.fair-readiness-row-main strong {
  color: var(--text);
  font-size: 0.9rem;
}

.fair-readiness-row-main .subtitle {
  margin: 0;
  font-size: 0.78rem;
}

.fair-readiness-gaps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.fair-readiness-ready-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
}

.fair-readiness-check {
  color: #1c6b34;
  font-weight: 700;
}

.fair-readiness-ready-title {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Price points */
.fair-pricepoints {
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.fair-pp-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  align-items: end;
  margin: 0.8rem 0 0.2rem;
}

.fair-pp-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.fair-pp-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 600;
}

.fair-pp-bar.is-entry {
  background: #d8f0dd;
  color: #1c6b34;
}

.fair-pp-bar.is-mid {
  background: #e6eaf1;
  color: #5f5e5a;
}

.fair-pp-bar.is-premium {
  background: #dbe8fb;
  color: #2f56b5;
}

.fair-pp-tier-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

.fair-pp-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.fair-pp-range .subtitle {
  margin: 0;
}

.fair-pp-range strong {
  color: var(--text);
}

.fair-pp-note {
  margin-top: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.fair-pp-note.is-ready {
  background: #effaf1;
  color: #1c6b34;
}

.fair-pp-note.is-todo {
  background: #fbf0db;
  color: #8a5a12;
}

.fair-pp-note.is-info {
  background: var(--nav-active-bg);
  color: var(--nav-active-color);
}

.settings-payments-enable {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.settings-payments-enable input { width: auto; margin: 0; }
.settings-payments-enable span { font-weight: 500; }

/* Stage 4 on-the-day POS "stand till" — a full-screen sell surface. */
body.fair-till-open { overflow: hidden; }

.fair-till-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--bg);
  overflow-y: auto;
}

/* Event summary overlay */
.event-summary-overlay { position: fixed; inset: 0; z-index: 9400; background: rgba(20, 30, 48, 0.35); overflow-y: auto; padding: 2.5rem 1rem; }
.event-summary-panel { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 1.4rem 1.6rem; box-shadow: 0 24px 60px rgba(20, 30, 48, 0.18); }
.event-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.event-summary-head h2 { margin: 0.1rem 0; font-size: 1.4rem; }
.event-summary-eyebrow { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.event-summary-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.event-summary-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 1rem 0 1.2rem; }
.event-summary-tab { border: 0; background: transparent; color: var(--muted); padding: 0.5rem 0.7rem; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.35rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.event-summary-tab:hover { color: var(--text); background: var(--bg); }
.event-summary-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.event-summary-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.event-summary-stat { background: var(--bg, #f4f6fb); border-radius: 10px; padding: 0.7rem 0.95rem; min-width: 110px; flex: 1; }
.event-summary-stat-label { display: block; font-size: 0.78rem; color: var(--muted); }
.event-summary-stat strong { font-size: 1.35rem; }
.event-summary-stat strong.is-positive { color: #0f6e56; }
.event-summary-stat strong.is-negative { color: #a32d2d; }
.event-summary-recap { background: var(--bg, #f7f9fc); border-radius: 12px; padding: 0.85rem 1.1rem; }
.event-summary-recap p { margin: 0.2rem 0; }
.event-summary-list, .event-summary-cards { display: grid; gap: 0.5rem; }
.event-summary-row { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.8rem; }
.event-summary-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #e8edf6; }
.event-summary-thumb.placeholder { background: linear-gradient(135deg, #6f88dd, #9eb2f7); }
.event-summary-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(63,111,176,0.12); color: var(--accent, #3f6fb0); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.82rem; flex-shrink: 0; }
.event-summary-row-main { flex: 1; display: flex; flex-direction: column; }
.event-summary-badge { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 8px; background: var(--bg, #eef1f6); color: var(--muted); white-space: nowrap; }
.event-summary-badge.is-ok { background: rgba(15,110,86,0.12); color: #0f6e56; }
.event-summary-card { border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 1rem; }
.event-summary-card-head { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.event-summary-card-head.is-income { color: #0f6e56; }
.event-summary-card-head.is-outgoing { color: #a32d2d; }
.event-summary-line { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0; font-size: 0.9rem; }
.event-summary-line .subtitle { text-align: right; }
.event-summary-line.is-total { border-top: 1px solid var(--line); margin-top: 0.2rem; padding-top: 0.5rem; font-weight: 600; }
.event-summary-quickadd { display: flex; gap: 0.5rem; align-items: center; }
.event-summary-quickadd input[type="text"] { flex: 1; }
.event-summary-quickadd input[type="number"] { width: 90px; }
.event-summary-quickadd-hint { margin: 0.35rem 0 0.9rem; }
.event-summary-day { border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 0.75rem; }
.event-summary-day-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; }
.event-summary-day-block { margin-top: 0.6rem; }
.event-summary-day-block:first-of-type { margin-top: 0; }
.event-summary-day-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; }
.event-summary-day-label .subtitle { font-weight: 400; }
.event-summary-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.event-summary-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--bg, #eef1f6); }
.event-summary-chip-x { border: none; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); padding: 0; }
.event-summary-chip-x:hover { color: #a32d2d; }
.event-summary-day-add { display: flex; gap: 0.5rem; align-items: center; }
.event-summary-day-add input { flex: 1; }
.event-summary-day-add input[type="time"] { flex: 0 0 auto; }
.event-summary-daynav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.event-summary-daytab { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.85rem; cursor: pointer; color: var(--muted); }
.event-summary-daytab.is-active { background: var(--accent, #2f6df6); border-color: var(--accent, #2f6df6); color: #fff; }
.event-summary-helpers { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
.event-summary-helper { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; }
.event-summary-helper-main { flex: 1; display: flex; align-items: baseline; gap: 0.5rem; }
.event-summary-countdown { font-size: 0.82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.event-summary-countdown.is-soon { color: #b26a00; }
.event-summary-countdown.is-past { color: #0f6e56; }
.event-summary-notes { width: 100%; min-height: 70px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.6rem; font: inherit; }
.event-summary-tomorrow { background: var(--bg, #f6f8fb); border-radius: 10px; padding: 0.7rem 0.85rem; }
.event-summary-tabtitle { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.6rem; }
.event-summary-personadd { display: flex; gap: 0.5rem; align-items: center; }
.event-summary-personadd input[type="text"] { flex: 1; }
.event-summary-personadd select { flex: 0 0 auto; }
.event-summary-row .event-summary-chip-x { margin-left: 0.5rem; }
.event-summary-stepadd { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.9rem; }
.event-summary-stepadd input[type="text"] { flex: 1 1 160px; }
.event-summary-stepadd input[type="time"] { flex: 0 0 auto; }
.event-summary-stepadd input[type="number"] { width: 80px; flex: 0 0 auto; }
.event-summary-stepadd select { flex: 0 0 auto; }
.event-summary-leg-group { margin-bottom: 0.9rem; }
.event-summary-leg-head { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 0.4rem; }
.event-summary-step-when .event-summary-chip-x { margin-left: 0.4rem; }
.event-summary-money { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.event-summary-net { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; border-radius: 12px; margin-top: 0.75rem; }
.event-summary-net.is-positive { background: rgba(15,110,86,0.1); color: #0f6e56; }
.event-summary-net.is-negative { background: rgba(163,45,45,0.1); color: #a32d2d; }
.event-summary-net strong { font-size: 1.2rem; }
.event-summary-checks { display: grid; gap: 0.35rem; }
.event-summary-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--muted); }
.event-summary-check.is-done { color: var(--text); }
.event-summary-check .ti { font-size: 1.15rem; }
.event-summary-check.is-done .ti { color: #0f6e56; }
.event-summary-alldone { color: #0f6e56; font-size: 0.86rem; margin-top: 0.4rem; }
.event-summary-empty { padding: 1rem 0; }
.event-summary-timeline { display: grid; gap: 0; position: relative; }
.event-summary-step { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.event-summary-step:last-child { border-bottom: 0; }
.event-summary-step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent, #3f6fb0); flex-shrink: 0; margin-top: 0.4rem; }
.event-summary-step-main { flex: 1; display: flex; flex-direction: column; }
.event-summary-step-when { font-size: 0.82rem; color: var(--muted); white-space: nowrap; text-align: right; padding-top: 0.15rem; }
.event-summary-step[draggable="true"] { cursor: grab; }
.event-summary-step.is-dragging { opacity: 0.45; }
.event-summary-step-handle { color: var(--muted); display: flex; align-items: center; padding-top: 0.2rem; cursor: grab; font-size: 1.1rem; line-height: 1; }
.event-summary-drag-hint { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.5rem; }
@media (max-width: 560px) { .event-summary-money { grid-template-columns: 1fr; } .event-summary-step { flex-wrap: wrap; } .event-summary-step-when { text-align: left; width: 100%; padding-left: 44px; } }

.fair-till-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
  display: grid;
  gap: 1.25rem;
}

.fair-till-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  z-index: 2;
}

.fair-till-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.fair-till-topbar-copy h2 { margin: 0.1rem 0 0; font-size: 1.3rem; color: var(--text); }

.fair-till-topbar-stats { display: flex; align-items: center; gap: 0.7rem; }

.fair-till-stat {
  display: grid;
  gap: 0.1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: right;
  min-width: 84px;
}

.fair-till-stat span { font-size: 0.7rem; color: var(--muted); }
.fair-till-stat strong { font-size: 1.15rem; color: var(--text); }
.fair-till-stat.is-takings { background: #effaf1; border-color: #cdeccf; }
.fair-till-stat.is-takings span { color: #1c6b34; }
.fair-till-stat.is-takings strong { color: #1c6b34; }

.fair-till-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.fair-till-section-label {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.fair-till-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text);
}
.fair-till-search:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.fair-till-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
}

.fair-till-tile {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

button.fair-till-tile:hover:not(:disabled) { border-color: var(--accent); }
.fair-till-tile.is-disabled,
.fair-till-tile:disabled { opacity: 0.5; cursor: default; }
.fair-till-tile.is-variant { cursor: default; }

.fair-till-tile .fair-taking-thumb { width: 100%; height: 120px; border-radius: 8px; object-fit: contain; background: var(--bg, #f4f6fb); }

.fair-till-tile-title { font-size: 0.9rem; font-weight: 500; line-height: 1.25; }
.fair-till-tile-kind { color: var(--muted); font-weight: 400; }
.fair-till-tile-meta { font-size: 0.8rem; color: var(--muted); }
.fair-till-tile-note { font-size: 0.72rem; color: var(--muted); }
.fair-till-tile-note.is-sold { color: #a3322d; }

.fair-till-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.fair-till-chip {
  display: grid;
  gap: 0.05rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--title-box-border);
  background: var(--title-box-bg);
  color: var(--title-box-color);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.fair-till-chip:hover:not(:disabled) { border-color: var(--accent); }
.fair-till-chip.is-disabled,
.fair-till-chip:disabled { opacity: 0.45; cursor: default; }
.fair-till-chip-size { font-size: 0.8rem; font-weight: 500; }
.fair-till-chip-stock { font-size: 0.68rem; opacity: 0.8; }

.fair-till-sidebar { display: grid; gap: 1rem; position: sticky; top: 80px; }

.fair-till-basket,
.fair-till-checkout,
.fair-till-log {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.fair-till-empty { margin: 0; font-size: 0.85rem; color: var(--muted); }

.fair-till-basket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}
.fair-till-basket-row:first-of-type { border-top: 0; }
.fair-till-basket-main { min-width: 0; display: grid; gap: 0.1rem; }
.fair-till-basket-main strong { font-size: 0.85rem; color: var(--text); }
.fair-till-basket-main .subtitle { margin: 0; font-size: 0.72rem; }

.fair-till-stepper { display: flex; align-items: center; gap: 0.4rem; }
.fair-till-qty { min-width: 18px; text-align: center; font-size: 0.9rem; }

.fair-till-checkout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.fair-till-checkout-head strong { font-size: 0.95rem; }
.fair-till-checkout-total { font-size: 1.3rem; font-weight: 500; color: var(--text); }

.fair-till-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.fair-till-field { display: grid; gap: 0.25rem; }
.fair-till-field.full { grid-column: 1 / -1; }
.fair-till-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 420px) { .fair-till-field-row { grid-template-columns: 1fr; } }
.fair-till-field > span { font-size: 0.74rem; color: var(--muted); }
.fair-till-field em { font-style: normal; color: var(--muted); opacity: 0.8; }
.fair-till-field input,
.fair-till-field select { width: 100%; }

.fair-till-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.4rem 0 0.8rem;
}
.fair-till-toggles label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}

.fair-till-scheme {
  margin: -0.2rem 0 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--title-box-border);
  border-radius: 10px;
  background: var(--title-box-bg);
}
.fair-till-scheme .fair-till-field-grid { margin-bottom: 0.4rem; }
.fair-till-scheme-note { margin: 0; font-size: 0.72rem; color: var(--title-box-color); }

.fair-till-checkout-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}
.fair-till-foot-note { margin: 0; font-size: 0.72rem; color: var(--muted); max-width: 58%; }

.fair-till-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}
.fair-till-log-row:first-of-type { border-top: 0; }
.fair-till-log-main { min-width: 0; display: grid; gap: 0.1rem; }
.fair-till-log-main strong { font-size: 0.88rem; color: var(--text); }
.fair-till-log-time { font-weight: 400; font-size: 0.72rem; color: var(--muted); margin-left: 0.3rem; }
.fair-till-log-main .subtitle { margin: 0; font-size: 0.72rem; }

.nomadic-toggle-row { display: flex; align-items: center; gap: 0.4rem; }
.nomadic-toggle-row .checkbox-row { margin: 0; }

/* Pop-up / nomadic appearances: per-address dates + artists, shown only when the
   gallery is marked nomadic. */
.gallery-appearance-fields { display: none; }
form.is-nomadic .gallery-appearance-fields {
  display: block;
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.gallery-appearance-label { margin: 0 0 0.35rem; font-weight: 500; }
.gallery-appearance-dates { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.gallery-appearance-dates label { flex: 1 1 140px; }
.gallery-appearance-artists.hidden,
.gallery-appearance-collective.hidden { display: none; }

.gallery-appearance-works.hidden { display: none; }
.gallery-appearance-works { margin-top: 0.4rem; display: grid; gap: 0.4rem; }
.gallery-appearance-work-add { max-width: 280px; }
.appearance-work-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.appearance-work-title { flex: 1 1 130px; font-size: 0.85rem; font-weight: 500; }
.appearance-work-title .subtitle { font-weight: 400; }
.appearance-work-row .checkbox-row { margin: 0; }
.appearance-work-sale { display: inline-flex; align-items: center; gap: 0.4rem; }
.appearance-work-sale.hidden { display: none; }
.appearance-work-price { display: inline-flex; align-items: center; gap: 0.2rem; }
.appearance-work-price input { width: 72px; }
.appearance-work-sale select { width: auto; }
.appearance-work-sale input[data-appearance-work-qty] { width: 52px; }

.uniting-gallery-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.uniting-gallery-row select { flex: 1 1 150px; }
.uniting-gallery-row input { flex: 1 1 130px; }
.uniting-gallery-row input.hidden { display: none; }

.fair-prep-sizecosts { display: grid; gap: 0.4rem; }
.fair-prep-sizecost-help { margin: 0; }
.fair-prep-sizecost-rows { display: grid; gap: 0.4rem; }
.fair-prep-sizecost-row { display: flex; align-items: center; gap: 0.5rem; }
.fair-prep-work-rows { display: flex; flex-direction: column; gap: 0.4rem; }
.fair-prep-work-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fair-prep-work-row > input[type="text"] { flex: 1 1 130px; min-width: 0; }
.fair-prep-sizecost-row > input[data-fair-prep-size] { flex: 1 1 120px; }
.fair-prep-sizecost-row .fair-prep-cost-input { flex: 0 0 auto; }
.fair-prep-sizecost-row .fair-prep-cost-input input { width: 90px; }
.fair-prep-sizecosts > button { justify-self: start; }

.fair-prep-custom { display: grid; gap: 0.4rem; margin-top: 0.6rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.fair-prep-custom > .subtitle { margin: 0; }
.fair-prep-custom-rows { display: grid; gap: 0.4rem; }
.fair-prep-custom-row { display: flex; align-items: center; gap: 0.5rem; }
.fair-prep-custom-row input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.fair-prep-custom-row input[type="text"] { flex: 1; }
.fair-prep-custom > button { justify-self: start; }

/* TRIAL: day-event form Selling / Visiting tabs. */
.event-tab-bar { display: flex; gap: 0.5rem; margin: 0.5rem 0 1.1rem; grid-column: 1 / -1; }
.event-tab-btn {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.event-tab-btn.is-active {
  background: var(--title-box-bg);
  color: var(--title-box-color);
  border-color: var(--title-box-border);
  font-weight: 500;
}
form[data-event-tab="selling"] [data-event-tab="visiting"] { display: none !important; }
form[data-event-tab="visiting"] [data-event-tab="selling"] { display: none !important; }

.fair-artist-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.fair-artist-photo-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fair-artist-photo { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.fair-artist-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fair-artist-photo-remove {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; line-height: 16px; text-align: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; padding: 0;
}
.fair-artist-add-photo { cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }

/* "Coming up" countdown hub */
/* Compact calendar strip — one line, keeps the calendar grid in view. */
.coming-up-strip-card { padding: 0.55rem 0.8rem; margin-bottom: 0.8rem; }
.coming-up-strip { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.coming-up-strip-chip { flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 999px; background: #e6f4ea; color: #2f855a; white-space: nowrap; }
.coming-up-strip-card.is-urgent .coming-up-strip-chip { background: #fde7e7; color: #b91c1c; }
.coming-up-strip-main { flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 0.4rem; background: none; border: none; padding: 0; cursor: pointer; text-align: left; overflow: hidden; }
.coming-up-strip-title { font-weight: 600; color: var(--text); white-space: nowrap; }
.coming-up-strip-sub { color: var(--muted); font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coming-up-strip-more { flex: 0 0 auto; font-size: 0.72rem; color: var(--muted); background: var(--surface-2, #f1f3f8); padding: 0.12rem 0.5rem; border-radius: 999px; }
.coming-up-strip-spacer { flex: 1 1 auto; }
.coming-up-icon-btn { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.coming-up-icon-btn:hover { color: var(--text); border-color: var(--muted); }
.coming-up-restore-row { margin-bottom: 0.8rem; }

.coming-up-platform-label { font-size: 0.74rem; color: var(--muted); margin: 0.15rem 0 0.25rem; }
.coming-up-platform-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.coming-up-platform-chip { font-size: 0.74rem; padding: 0.18rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; }
.coming-up-platform-chip.is-on { background: #e6f0ff; border-color: #3f6ad8; color: #1e40af; font-weight: 600; }

/* Collapsible event-detail sections (collapsed by default to keep the page short). */
.event-section-disclosure > summary,
.prep-digest > summary { cursor: pointer; font-weight: 600; color: var(--text); padding: 0.2rem 0; list-style: none; }
.event-section-disclosure > summary::-webkit-details-marker,
.prep-digest > summary::-webkit-details-marker { display: none; }
.event-section-disclosure > summary::before,
.prep-digest > summary::before { content: "▸ "; color: var(--muted); }
.event-section-disclosure[open] > summary::before,
.prep-digest[open] > summary::before { content: "▾ "; }
.coming-up-restore { display: inline-flex; align-items: center; gap: 0.35rem; }

/* The detail pop-up. */
.coming-up-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(17, 24, 39, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem 1rem; overflow-y: auto; }
.coming-up-modal-card { width: 100%; max-width: 460px; background: var(--surface); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); overflow: hidden; }
.coming-up-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); }
.coming-up-modal-body { padding: 0.85rem; }
.coming-up-modal-body .coming-up-card { border: none; padding: 0; }

.coming-up-head { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.8rem; }
.coming-up-head-right { display: flex; align-items: center; gap: 0.7rem; }
.coming-up-report .coming-up-head { align-items: flex-start; }
.coming-up-head h3 { margin: 0; }
.coming-up-head .subtitle { margin: 0; }
.coming-up-list { display: grid; gap: 0.7rem; }
.coming-up-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.5rem;
  background: var(--surface);
}
.coming-up-card.is-expanded { border-width: 2px; border-color: var(--accent); }
.coming-up-card.is-urgent { border-color: #d9a23a; }
.coming-up-card.is-now { border-color: #1f9d6b; }
.coming-up-card.is-now .coming-up-days strong { color: #1c6b34; font-size: 1.05rem; }
.coming-up-card.is-now .coming-up-badge { background: #effaf1; color: #1c6b34; }
.coming-up-card.is-now .coming-up-meter-fill { background: #1f9d6b; }
.coming-up-card.is-post { opacity: 0.92; }
.coming-up-card.is-post .coming-up-days strong { font-size: 1.05rem; color: var(--muted); }
.coming-up-card.is-post .coming-up-meter-fill { background: var(--muted); }
.coming-up-post { border-top: 1px solid var(--line); padding-top: 0.6rem; display: grid; gap: 0.4rem; }
.coming-up-postnote {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem;
  font: inherit; background: var(--textarea-bg, var(--surface)); color: var(--text); resize: vertical;
}
.coming-up-post > button { justify-self: start; }

.coming-up-capture { border-top: 1px solid var(--line); padding-top: 0.6rem; display: grid; gap: 0.5rem; }
.coming-up-capture-row { display: grid; gap: 0.2rem; }
.coming-up-capture-row > span { font-size: 0.78rem; color: var(--muted); }
.coming-up-capture-row input { width: 100%; }
.coming-up-capture-row.is-answered > span::after { content: " ✓ saved"; color: #2f855a; font-weight: 600; }
.coming-up-capture-row.is-answered input { border-color: #9ae6b4; background: #f3fdf7; }
.coming-up-collection-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.1rem 0 0.3rem; font-size: 0.78rem; color: #b7791f; }
.coming-up-collection-prompt input[type="date"] { font: inherit; padding: 0.25rem 0.4rem; }
.coming-up-collection-confirm { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.1rem 0 0.3rem; font-size: 0.78rem; color: #2f855a; }

.coming-up-guide { margin: 0.4rem 0 0.2rem; }
.coming-up-guide .badge.soft { margin-left: 0.35rem; }
.coming-up-till { margin: 0.2rem 0 0.4rem; }
.coming-up-till .btn { display: inline-flex; align-items: center; gap: 0.4rem; }

.coming-up-stock { border-top: 1px solid var(--line); padding-top: 0.6rem; display: grid; gap: 0.4rem; }
.coming-up-stock-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.coming-up-stock-name { font-size: 0.85rem; font-weight: 500; flex: 1 1 140px; }
.coming-up-stock-state { font-size: 0.8rem; color: var(--muted); }
.coming-up-stock-row.is-low .coming-up-stock-state { color: #8a5a12; }
.coming-up-stock-row.is-out .coming-up-stock-state { color: #a3322d; }

.prep-digest > summary { cursor: pointer; font-weight: 500; color: var(--accent-dark); margin-bottom: 0.5rem; }
.prep-digest-views { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.prep-digest-view-btn {
  padding: 0.35rem 0.85rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--muted);
}
.prep-digest-view-btn.is-active { background: var(--title-box-bg); color: var(--title-box-color); border-color: var(--title-box-border); font-weight: 500; }
.prep-digest-a { white-space: pre-line; }
[data-prep-digest][data-digest-view="selling"] [data-digest-cat="visiting"],
[data-prep-digest][data-digest-view="selling"] [data-digest-cat="money"],
[data-prep-digest][data-digest-view="selling"] [data-digest-cat="travel"],
[data-prep-digest][data-digest-view="visiting"] [data-digest-cat="selling"],
[data-prep-digest][data-digest-view="visiting"] [data-digest-cat="money"],
[data-prep-digest][data-digest-view="visiting"] [data-digest-cat="travel"],
[data-prep-digest][data-digest-view="money"] [data-digest-cat="selling"],
[data-prep-digest][data-digest-view="money"] [data-digest-cat="visiting"],
[data-prep-digest][data-digest-view="money"] [data-digest-cat="travel"],
[data-prep-digest][data-digest-view="travel"] [data-digest-cat="selling"],
[data-prep-digest][data-digest-view="travel"] [data-digest-cat="visiting"],
[data-prep-digest][data-digest-view="travel"] [data-digest-cat="money"] { display: none; }
.prep-digest-stage { margin-bottom: 0.9rem; }
.prep-digest-stage h4 { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--text); }
.prep-digest-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.prep-digest-row:last-child { border-bottom: 0; }
.prep-digest-q { color: var(--muted); font-size: 0.88rem; }
.prep-digest-a { color: var(--text); font-size: 0.88rem; text-align: right; font-weight: 500; }
.coming-up-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-align: left; width: 100%;
}
.coming-up-card-copy { display: grid; gap: 0.2rem; min-width: 0; }
.coming-up-card-copy strong { color: var(--text); font-size: 0.95rem; }
.coming-up-badge {
  justify-self: start;
  font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 10px;
  background: var(--title-box-bg); color: var(--title-box-color);
}
.coming-up-card.is-warn .coming-up-badge,
.coming-up-card.is-urgent .coming-up-badge { background: #fbf0db; color: #8a5a12; }
.coming-up-card.is-muted .coming-up-badge { background: var(--bg); color: var(--muted); }
.coming-up-days { text-align: right; flex: 0 0 auto; }
.coming-up-days strong { font-size: 1.3rem; color: var(--text); }
.coming-up-card.is-urgent .coming-up-days strong { color: #b06d10; }
.coming-up-days-sub { margin: 0; font-size: 0.68rem; color: var(--muted); }
.coming-up-meter { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.coming-up-meter-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.coming-up-card.is-urgent .coming-up-meter-fill { background: #d9a23a; }
.coming-up-meter-fill.is-prep { background: #1f9d6b; }
.coming-up-prep { display: flex; align-items: center; gap: 0.6rem; }
.coming-up-prep-label { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.coming-up-prep .coming-up-meter { flex: 1; max-width: 200px; }
.coming-up-next { border-top: 1px solid var(--line); padding-top: 0.6rem; display: grid; gap: 0.3rem; }
.coming-up-next-label { margin: 0 0 0.1rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.coming-up-next-item {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; padding: 0.2rem 0; cursor: pointer; font: inherit; text-align: left;
  color: var(--text); font-size: 0.85rem;
}
.coming-up-next-box { width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 4px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; line-height: 1; }
.coming-up-next-row { display: flex; align-items: center; gap: 0.35rem; }
.coming-up-next-row .coming-up-next-item { flex: 1 1 auto; min-width: 0; }
.coming-up-cal-btn { flex: 0 0 auto; border: 1px solid var(--line); background: none; border-radius: 6px; padding: 0.1rem 0.4rem; cursor: pointer; font-size: 0.85rem; line-height: 1.3; color: var(--muted); }
.coming-up-cal-btn:hover { border-color: var(--accent); }
.coming-up-cal-btn.is-on { color: #1b8a5a; border-color: #1b8a5a; }
.coming-up-next-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.add-show-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin: 0.5rem 0 1rem; }
.add-show-tile { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); cursor: pointer; font: inherit; }
.add-show-tile:hover { border-color: var(--accent); }
.add-show-tile-title { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.add-show-tile-sub { font-size: 0.75rem; color: var(--muted); }
.add-show-tile-locked { position: relative; opacity: 0.72; }
.add-show-tile-locked:hover { border-color: var(--accent); opacity: 1; }
.add-show-tile-lock { align-self: flex-start; margin-top: 3px; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); background: var(--accent-soft, rgba(99,102,241,0.12)); border-radius: 999px; padding: 1px 7px; }
@media (max-width: 640px) { .add-show-grid { grid-template-columns: 1fr 1fr; } }
.coming-up-next-item.is-brought { color: var(--muted); }
.coming-up-next-item.is-brought .coming-up-next-box { border-color: #1b8a5a; color: #1b8a5a; }
.coming-up-bring { margin-top: 0.4rem; }
.coming-up-money { margin-top: 0.5rem; }
.coming-up-money-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; margin: 0.2rem 0 0.4rem; font-size: 0.9rem; }
.coming-up-money-grid strong { justify-self: end; }
.coming-up-chase { margin-top: 0.5rem; }
.coming-up-chase-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--line); }
.coming-up-chase-row .subtitle { font-size: 0.78rem; }
.coming-up-lead {
  margin-left: auto; flex: 0 0 auto; font-size: 0.68rem; white-space: nowrap;
  padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--surface-2, #eef1f5); color: var(--muted);
}
.coming-up-lead.is-tight { background: #fbe9e7; color: #c0392b; }

.inv-organise { display: grid; gap: 0.6rem; }
.inv-organise-intro h3 { margin: 0; }
.inv-organise-card { border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.85rem; display: grid; gap: 0.35rem; }
.inv-organise-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.inv-organise-count { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.inv-organise-head-actions { display: inline-flex; align-items: center; gap: 0.35rem; }
.inv-organise-icon {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  width: 24px; height: 24px; border-radius: 6px; line-height: 1; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.inv-organise-icon:hover { background: var(--bg, #f4f6fb); color: var(--text); }
.inv-organise-confirm { display: grid; gap: 0.5rem; padding: 0.2rem 0; }
.inv-organise-confirm-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.inv-organise-q {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  background: none; border: none; padding: 0.3rem 0; cursor: pointer; font: inherit; text-align: left; color: var(--text);
}
.inv-organise-box {
  width: 20px; height: 20px; flex: 0 0 auto; border: 1.5px solid var(--muted); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #fff;
}
.inv-organise-q.is-done .inv-organise-box { background: var(--accent); border-color: var(--accent); }
.inv-organise-q.is-done .inv-organise-label { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); }
.inv-organise-q.is-gate.is-done .inv-organise-label { color: var(--text); text-decoration: none; }
.inv-organise-label { flex: 1 1 auto; }
.inv-organise-done { margin-left: auto; font-size: 0.7rem; color: var(--muted); }
.coming-up-next-item:hover .coming-up-next-box { border-color: var(--accent); }
.coming-up-next .btn { justify-self: start; margin-top: 0.2rem; }

.coming-up-done { border-top: 1px solid var(--line); padding-top: 0.6rem; margin-top: 0.6rem; display: grid; gap: 0.25rem; }
.coming-up-done-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.coming-up-done-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.coming-up-done-item {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; padding: 0.15rem 0; cursor: pointer; font: inherit; text-align: left;
  color: var(--muted); font-size: 0.85rem;
}
.coming-up-done-tick { color: var(--accent); font-weight: 600; flex: 0 0 auto; }
.coming-up-done-item s { text-decoration-color: var(--muted); }

.coming-up-add-row { margin-top: 0.3rem; }
.coming-up-add-custom {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: none; border: 1px dashed var(--line); cursor: pointer;
  font-size: 1.05rem; line-height: 1; color: var(--muted);
}
.coming-up-add-custom:hover { color: var(--accent); border-color: var(--accent); }
.coming-up-custom-add { display: flex; align-items: center; gap: 0.35rem; }
.coming-up-custom-input {
  flex: 1 1 auto; min-width: 0; padding: 0.35rem 0.5rem;
  border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 0.85rem;
}
.coming-up-custom-icon {
  flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.coming-up-custom-icon:hover { border-color: var(--accent); }
.coming-up-custom-icon.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.coming-up-custom-save { border-color: var(--accent); }

.coming-up-peek {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.7rem 0.9rem; margin-bottom: 1rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  cursor: pointer; font: inherit; text-align: left;
}
.coming-up-peek.is-urgent { border-color: #d9a23a; }
.coming-up-peek-icon { color: var(--accent); font-size: 1.1rem; display: inline-flex; }
.coming-up-peek.is-urgent .coming-up-peek-icon { color: #b06d10; }
.coming-up-peek-copy { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.coming-up-peek-copy strong { color: var(--text); font-size: 0.9rem; }
.coming-up-peek-copy span { font-size: 0.78rem; color: var(--muted); }
.coming-up-peek-arrow { color: var(--muted); }

.fair-till-checkout-start { width: 100%; height: 44px; font-weight: 500; }

.fair-till-checkout-stage {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}

.fair-till-step-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem;
  display: grid;
  gap: 0.7rem;
}

.fair-till-step-eyebrow { margin: 0; font-size: 0.8rem; color: var(--muted); }

.fair-till-progress { display: flex; align-items: center; gap: 0.3rem; }
.fair-till-progress span {
  width: 22px; height: 5px; border-radius: 3px;
  background: var(--line);
}
.fair-till-progress span.is-on { background: var(--accent); }
.fair-till-progress em { font-style: normal; font-size: 0.72rem; color: var(--muted); margin-left: 0.4rem; }

.fair-till-step-title { margin: 0.2rem 0 0; font-size: 1.15rem; color: var(--text); }
.fair-till-step-help { margin: 0; font-size: 0.82rem; color: var(--muted); }

.fair-till-step-card .fair-till-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem;
  font: inherit;
  background: var(--textarea-bg, var(--surface));
  color: var(--text);
  resize: vertical;
}

.fair-till-checkout-total-big { font-size: 2rem; font-weight: 500; color: var(--text); }

.fair-till-recipient-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
}
.fair-till-recipient-row:first-of-type { border-top: 0; }
.fair-till-recipient-title { font-size: 0.88rem; font-weight: 500; }
.fair-till-recipient-row input { grid-column: 1 / -1; }

.fair-till-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.fair-till-step-advance { display: flex; gap: 0.5rem; }

.fair-till-done-tick {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.95rem; font-weight: 500;
  color: #1c6b34;
}
.fair-till-done-tick i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #effaf1; color: #1c6b34; font-style: normal; font-size: 0.85rem;
}
.fair-till-receipt-btn { justify-self: start; }

@media (max-width: 760px) {
  .fair-till-body { grid-template-columns: 1fr; }
  .fair-till-sidebar { position: static; }
}

.gallery-proposal-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr) minmax(0, 1fr) minmax(0, 1.15fr) auto;
}

.artwork-primary-image-field {
  gap: 0.75rem;
}

.sculpture-mode-field {
  gap: 0.8rem;
}

.sculpture-mode-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sculpture-mode-card {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
  padding: 0.9rem 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.24);
  border-radius: 14px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.sculpture-mode-card strong {
  font-size: 0.95rem;
}

.sculpture-mode-card span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.sculpture-mode-card:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #c8d5ef;
  box-shadow: 0 8px 20px rgba(90, 121, 183, 0.08);
}

.sculpture-mode-card.is-active {
  border-color: #7d9fe8;
  background: #f3f7ff;
  box-shadow: 0 0 0 1px rgba(125, 159, 232, 0.18);
}

.sculpture-mode-card.is-locked,
.sculpture-mode-card:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
}

.sculpture-mode-footnote {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.45;
}

.sculpture-guide-inline {
  display: grid;
  gap: 0.65rem;
}

.sculpture-asset-field {
  gap: 0.75rem;
}

.sculpture-asset-list {
  display: grid;
  gap: 0.6rem;
}

.sculpture-asset-row {
  align-items: start;
}

.sculpture-asset-preview {
  width: 96px;
  height: 96px;
}

.sculpture-asset-meta {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.sculpture-asset-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.sculpture-asset-upload {
  max-width: 320px;
}

.sculpture-asset-remove {
  align-self: start;
}

.sculpture-asset-field.is-locked .sculpture-asset-row {
  opacity: 0.72;
}

.sculpture-guide-modal-card {
  display: grid;
  gap: 0.9rem;
}

.sculpture-guide-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sculpture-guide-modal-head h3 {
  margin: 0;
}

.sculpture-guide-modal-head .subtitle {
  margin: 0.28rem 0 0;
}

.sculpture-guide-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sculpture-guide-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.82rem 0.88rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 14px;
  background: #fff;
}

.sculpture-guide-card strong {
  font-size: 0.92rem;
}

.sculpture-guide-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.48;
}

.sculpture-guide-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.48;
}

.artwork-primary-image-card {
  width: min(100%, 320px);
  min-height: 240px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(127, 143, 164, 0.22);
  background: linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.artwork-primary-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.artwork-primary-image-placeholder {
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.artwork-primary-image-meta {
  display: grid;
  gap: 0.45rem;
}

.artwork-primary-image-upload {
  max-width: 320px;
}

.artwork-primary-image-meta .subtitle {
  margin: 0;
}

.artwork-image-row {
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
}

.artwork-additional-image-box {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f7f9fd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.artwork-additional-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.artwork-additional-image-placeholder {
  padding: 0.75rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .artwork-primary-image-card,
  .artwork-primary-image-upload,
  .modal-form label.compact-field,
  .contact-method-type-field,
  .relationship-link-type {
    max-width: none;
    width: 100%;
  }
}

.icon-trash-button {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  justify-self: end;
}

.finance-purchase-row {
  grid-template-columns: minmax(160px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(88px, 0.55fr) minmax(110px, 0.75fr) auto;
  align-items: end;
}

.finance-income-row {
  grid-template-columns: minmax(72px, 0.5fr) minmax(140px, 1.5fr) minmax(96px, 0.75fr) minmax(96px, 0.75fr) minmax(110px, 0.9fr) auto;
  align-items: end;
}

.artwork-price-variant-row .full {
  grid-column: 1 / -1;
}

.contact-method-actions {
  display: flex;
  justify-content: flex-start;
}

.contact-method-remove {
  align-self: end;
}

.subtle-danger-action {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: #8b3a3a;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: rgba(139, 58, 58, 0.28);
  text-underline-offset: 0.18em;
  cursor: pointer;
  align-self: center;
}

.subtle-danger-action:hover,
.subtle-danger-action:focus-visible {
  color: #6f2626;
  text-decoration-color: currentColor;
}

.location-directory-controls {
  display: grid;
  gap: 1rem;
}

.location-directory-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.9rem;
  align-items: end;
}

.location-directory-filter-actions {
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

.location-directory-group {
  display: grid;
  gap: 0.85rem;
}

.location-directory-group + .location-directory-group {
  margin-top: 0.9rem;
}

.location-directory-group-head {
  padding-bottom: 0.15rem;
}

.gallery-address-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.65rem;
  background: #fff;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0.5rem;
}

.gallery-address-remove {
  justify-self: end;
  padding: 0.28rem 0.5rem;
  font-size: 0.74rem;
  line-height: 1.2;
}

.address-usage-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.gallery-address-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
}

.gallery-address-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 0.65rem;
  background: #fff;
  overflow: hidden;
}

.gallery-address-group summary {
  cursor: pointer;
  padding: 0.6rem 0.75rem;
  font-weight: 600;
  background: #f8fbff;
}

.gallery-address-group .table-like {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .gallery-summary-card {
    flex-direction: column;
  }

  .gallery-route-toggle-bar {
    align-items: flex-start;
  }

  .gallery-summary-card .actions-inline {
    width: 100%;
    justify-content: flex-start;
  }

  .social-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .social-pipeline {
    grid-template-columns: minmax(0, 1fr);
  }

  .social-calendar-day {
    min-height: 120px;
  }
}

@media (max-width: 960px) {
  .inventory-subsection-actions {
    align-items: flex-start;
  }

  .repeatable-text-row,
  .artwork-image-row {
    grid-template-columns: 1fr;
  }

  .artwork-additional-image-box {
    width: 100%;
    max-width: 220px;
  }
}


.modal-form > .page-card {
  border-radius: 12px;
}

.modal-form > .page-card:nth-of-type(5n+1),
.modal-form .form-section:nth-of-type(5n+1) { background: var(--form-tone-1); }
.modal-form > .page-card:nth-of-type(5n+2),
.modal-form .form-section:nth-of-type(5n+2) { background: var(--form-tone-2); }
.modal-form > .page-card:nth-of-type(5n+3),
.modal-form .form-section:nth-of-type(5n+3) { background: var(--form-tone-3); }
.modal-form > .page-card:nth-of-type(5n+4),
.modal-form .form-section:nth-of-type(5n+4) { background: var(--form-tone-4); }
.modal-form > .page-card:nth-of-type(5n+5),
.modal-form .form-section:nth-of-type(5n+5) { background: var(--form-tone-5); }

body[data-title-palette="white"] {
  --title-box-bg: #ffffff;
  --title-box-color: #314053;
  --title-box-border: #dce2eb;
  --nav-active-bg: #ffffff;
  --nav-active-color: #314053;
  --nav-active-border: #dce2eb;
}

body[data-title-palette="soft-sky"] {
  --title-box-bg: #dce9ff;
  --title-box-color: #2f57bf;
  --title-box-border: #c9d9f8;
  --nav-active-bg: #dce9ff;
  --nav-active-color: #2f57bf;
  --nav-active-border: #c9d9f8;
}

body[data-title-palette="soft-sage"] {
  --title-box-bg: #def1e4;
  --title-box-color: #2f6c4c;
  --title-box-border: #c8dfcf;
  --nav-active-bg: #def1e4;
  --nav-active-color: #2f6c4c;
  --nav-active-border: #c8dfcf;
}

body[data-title-palette="soft-clay"] {
  --title-box-bg: #ffe3d7;
  --title-box-color: #9a5c3f;
  --title-box-border: #f1cdbf;
  --nav-active-bg: #ffe3d7;
  --nav-active-color: #9a5c3f;
  --nav-active-border: #f1cdbf;
}

body[data-title-palette="soft-blush"] {
  --title-box-bg: #f8ddef;
  --title-box-color: #9a4f7d;
  --title-box-border: #e9c5db;
  --nav-active-bg: #f8ddef;
  --nav-active-color: #9a4f7d;
  --nav-active-border: #e9c5db;
}

body[data-background-palette="white"] {
  --page-bg: #f6f7fb;
  --topbar-bg: #ffffff;
  --sidebar-bg: #ffffff;
}

body[data-background-palette="mist"] {
  --page-bg: #eef3f8;
  --topbar-bg: #f8fafc;
  --sidebar-bg: #f8fafc;
}

body[data-background-palette="garden"] {
  --page-bg: #eef5ef;
  --topbar-bg: #f8fbf8;
  --sidebar-bg: #f8fbf8;
}

body[data-background-palette="linen"] {
  --page-bg: #f6f1e7;
  --topbar-bg: #fcfaf6;
  --sidebar-bg: #fcfaf6;
}

body[data-background-palette="rose"] {
  --page-bg: #f7eef2;
  --topbar-bg: #fcf8fa;
  --sidebar-bg: #fcf8fa;
}

body[data-background-artwork="none"] {
  --background-artwork-image: none;
  --background-artwork-wash: none;
  --background-artwork-filter: none;
}

body[data-background-artwork="van-gogh-irises"] {
  --background-artwork-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Vincent%20van%20Gogh%20-%20Irises%20-%20Google%20Art%20Project.jpg?width=1600");
  --background-artwork-wash: linear-gradient(180deg, rgba(247, 249, 252, 0.42) 0%, rgba(247, 249, 252, 0.56) 34%, rgba(247, 249, 252, 0.72) 100%);
  --background-artwork-filter: saturate(1.08) contrast(1.03);
}

body[data-background-artwork="monet-water-lilies"] {
  --background-artwork-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Claude%20Monet%20-%20Water%20Lilies%20-%20Google%20Art%20Project.jpg?width=1600");
  --background-artwork-wash: linear-gradient(180deg, rgba(245, 249, 246, 0.3) 0%, rgba(245, 249, 246, 0.45) 36%, rgba(245, 249, 246, 0.64) 100%);
  --background-artwork-filter: saturate(1.28) contrast(1.08) brightness(0.98);
}

body[data-background-artwork="whistler-nocturne"] {
  --background-artwork-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Whistler-Nocturne%20in%20black%20and%20gold.jpg?width=1600");
  --background-artwork-wash: linear-gradient(180deg, rgba(244, 247, 251, 0.34) 0%, rgba(244, 247, 251, 0.48) 38%, rgba(244, 247, 251, 0.66) 100%);
  --background-artwork-filter: saturate(1.34) contrast(1.12) brightness(1.03);
}

body[data-background-artwork="okeeffe-pink-and-blue"] {
  --background-artwork-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Music%2C%20Pink%20and%20Blue%20No.%202%2C%20by%20Georgia%20O%27Keeffe.jpg?width=1600");
  --background-artwork-wash: linear-gradient(180deg, rgba(250, 247, 249, 0.42) 0%, rgba(250, 247, 249, 0.56) 38%, rgba(250, 247, 249, 0.72) 100%);
  --background-artwork-filter: saturate(1.08) contrast(1.03);
}

body[data-background-artwork="rousseau-surprise"] {
  --background-artwork-image: url("https://commons.wikimedia.org/wiki/Special:FilePath/Surprised-Rousseau.jpg?width=1600");
  --background-artwork-wash: linear-gradient(180deg, rgba(246, 248, 243, 0.48) 0%, rgba(246, 248, 243, 0.62) 38%, rgba(246, 248, 243, 0.78) 100%);
  --background-artwork-filter: saturate(1.08) contrast(1.03);
}

body[data-background-artwork="custom-artwork"] {
  --background-artwork-filter: saturate(1.08) contrast(1.02);
}

body[data-tile-palette="white"] { --surface: #ffffff; }
body[data-tile-palette="mist"] { --surface: #f8fbff; }
body[data-tile-palette="sage"] { --surface: #f5faf6; }
body[data-tile-palette="sand"] { --surface: #fbf8f1; }
body[data-tile-palette="blush"] { --surface: #fcf6f8; }

body[data-textarea-palette="white"] { --textarea-bg: #ffffff; }
body[data-textarea-palette="mist"] { --textarea-bg: #f6f9fd; }
body[data-textarea-palette="sage"] { --textarea-bg: #f6faf7; }
body[data-textarea-palette="sand"] { --textarea-bg: #fbf8f4; }
body[data-textarea-palette="blush"] { --textarea-bg: #fcf7f9; }

body[data-button-palette="classic-blue"] {
  --btn-primary-bg: #3f6ad8;
  --btn-primary-hover: #2f57bf;
  --btn-primary-color: #ffffff;
}

body[data-button-palette="soft-sage"] {
  --btn-primary-bg: #7aac95;
  --btn-primary-hover: #699a84;
  --btn-primary-color: #ffffff;
}

body[data-button-palette="soft-rose"] {
  --btn-primary-bg: #d68eae;
  --btn-primary-hover: #c57a9b;
  --btn-primary-color: #ffffff;
}

body[data-button-palette="soft-clay"] {
  --btn-primary-bg: #d58d68;
  --btn-primary-hover: #c27853;
  --btn-primary-color: #ffffff;
}

body[data-button-palette="ink"] {
  --btn-primary-bg: #495060;
  --btn-primary-hover: #393f4d;
  --btn-primary-color: #ffffff;
}

body[data-button-palette="multicolor"] {
  --btn-primary-bg: #6f91e6;
  --btn-primary-hover: #5c7ed1;
  --btn-primary-color: #ffffff;
}

body[data-button-palette="multicolor"] .btn.btn-outline[data-action*="archive"],
body[data-button-palette="multicolor"] .btn.btn-outline[data-action*="unarchive"] {
  background: #f9f4df;
  border-color: #e7d9a4;
  color: #8a6a18;
}

body[data-button-palette="multicolor"] .btn.btn-outline[data-action*="delete"],
body[data-button-palette="multicolor"] .btn.danger {
  background: #fff7f8;
  border-color: #efc6cb;
  color: #c43d4b;
}

body[data-button-palette="multicolor"] .btn[data-action*="apply"],
body[data-button-palette="multicolor"] .btn[data-action*="save"],
body[data-button-palette="multicolor"] .btn[data-action*="add"] {
  background: #92c8a3;
  color: #174f2d;
}

body[data-button-palette="multicolor"] .btn[data-action*="open"],
body[data-button-palette="multicolor"] .btn[data-action*="view"] {
  background: #b8e0eb;
  color: #114f62;
}

body[data-button-palette="multicolor"] .calendar-toolbar-right .btn[data-action="add-exhibition"] {
  background: #6f91e6;
  border-color: #5c7ed1;
  color: #ffffff;
}

body[data-button-palette="multicolor"] .calendar-toolbar-right .btn[data-action="add-competition"] {
  background: #92c8a3;
  border-color: #79b28b;
  color: #174f2d;
}

body[data-button-palette="multicolor"] .calendar-toolbar-right .btn[data-action="add-calendar-entry"] {
  background: #f2c79b;
  border-color: #dfae77;
  color: #6f4218;
}

body[data-button-palette="multicolor"] .calendar-toolbar-right .btn[data-action="add-gallery-event"] {
  background: #ddb8e8;
  border-color: #c69ad6;
  color: #58306f;
}

.palette-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.palette-swatch-row span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid #d9e2ef;
  background: var(--sw);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.settings-stack {
  display: grid;
  gap: 1rem;
}

.settings-subpage-stack {
  gap: 1rem;
}

.settings-basic-grid,
.settings-palette-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}

.theme-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 0.7rem;
}

.theme-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.theme-swatch {
  display: inline-flex;
  cursor: pointer;
  position: relative;
}

.theme-swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-swatch-face {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #d9e2ef;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.theme-swatch input:checked + .theme-swatch-face {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(63, 106, 216, 0.14), inset 0 0 0 1px rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

.theme-swatch:hover .theme-swatch-face {
  border-color: #ccd8ea;
}

.theme-tile {
  display: block;
  cursor: pointer;
  position: relative;
}

.theme-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-tile-face {
  display: grid;
  gap: 0.45rem;
  min-height: 88px;
  padding: 0.62rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  justify-items: start;
  align-content: start;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.theme-tile-face strong {
  font-size: 0.92rem;
  color: var(--text);
}

.theme-tile-face small {
  color: var(--muted);
  font-size: 0.8rem;
}

.theme-tile input:checked + .theme-tile-face {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(63, 106, 216, 0.12);
  transform: translateY(-1px);
}

.theme-tile:hover .theme-tile-face {
  border-color: #ccd8ea;
}

.choice-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.choice-tile-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}

.choice-tile {
  display: block;
  cursor: pointer;
  position: relative;
}

.choice-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-tile-face {
  display: grid;
  gap: 0.35rem;
  min-height: 62px;
  padding: 0.56rem 0.66rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  justify-items: start;
  align-content: start;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.choice-tile-face strong {
  font-size: 0.92rem;
  color: var(--text);
}

.choice-tile-face small {
  color: var(--muted);
  font-size: 0.8rem;
}

.choice-tile input:checked + .choice-tile-face {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(63, 106, 216, 0.12);
  transform: translateY(-1px);
}

.settings-section-head {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  text-align: left;
}

.settings-section-head-inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
}

.settings-section-head h3 {
  margin: 0;
  display: inline-flex;
  width: fit-content;
  padding: 0.25rem 0.7rem;
  border-radius: 12px;
  background: var(--title-box-bg, #eef2ff);
  color: var(--title-box-color, var(--accent-dark));
  border: 1px solid var(--title-box-border, transparent);
}

.settings-section-head .subtitle,
.settings-card-head .subtitle {
  margin-top: 0;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.settings-stack-grid {
  grid-template-columns: minmax(0, 1fr);
}

.settings-calendar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  grid-auto-rows: 1fr;
}

.settings-subcard {
  display: grid;
  gap: 0.58rem;
  padding: 0.68rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  align-content: start;
  text-align: left;
}

.settings-calendar-grid > .settings-subcard {
  height: 100%;
}

.settings-subcard.full-span {
  grid-column: 1 / -1;
}

.settings-subcard h4 {
  margin: 0;
  font-size: 0.96rem;
  text-align: left;
}

.settings-subcard label {
  margin-bottom: 0;
}

.settings-section-card {
  display: grid;
  gap: 0.2rem;
}

/* Clickable "open a page" card — the whole card (title included) is the button. */
.settings-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.4rem 0.9rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.settings-link-card .settings-link-card-text strong { font-size: 1rem; }
.settings-link-card .subtitle { font-size: 0.82rem; }
.settings-link-card:hover {
  background: #f5f8ff;
  border-color: var(--accent, #4860a9);
}
.settings-link-card .settings-link-card-text {
  display: grid;
  gap: 0.05rem;
}
.settings-link-card .settings-link-card-text strong {
  font-size: 1rem;
  color: var(--text);
}
.settings-link-card .settings-link-card-arrow {
  font-size: 1.4rem;
  color: var(--accent, #4860a9);
  flex: none;
}

.settings-section-grid {
  margin-top: 0.72rem;
}

.settings-picker-stack {
  display: grid;
  gap: 0.72rem;
}

.settings-picker-stack.compact {
  gap: 0.7rem;
}

.settings-picker-block {
  display: grid;
  gap: 0.65rem;
}

.settings-card-head {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  text-align: left;
}

.settings-inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.58rem;
  align-items: end;
}

.settings-inline-grid-tight {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 0.52rem;
}

.settings-subpage-toolbar {
  margin-bottom: 0;
}

.subscription-settings-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.subscription-billing-toggle {
  display: inline-flex;
  gap: 0.6rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fbff;
}

.choice-chip {
  position: relative;
  cursor: pointer;
}

.choice-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.choice-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
}

.choice-chip input:checked + span {
  background: var(--btn-primary-bg, var(--accent));
  color: var(--btn-primary-color, #fff);
}

.subscription-tier-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.subscription-tier-card {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,251,255,0.96) 100%);
  box-shadow: 0 10px 24px rgba(22, 31, 61, 0.04);
}

.subscription-tier-card.is-current {
  border-color: rgba(63, 106, 216, 0.22);
  box-shadow: 0 14px 30px rgba(63, 106, 216, 0.08);
}

.subscription-tier-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.subscription-tier-card-head h3 {
  margin: 0;
  font-size: 1.15rem;
}

.subscription-tier-pricing {
  display: grid;
  gap: 0.16rem;
}

.subscription-tier-pricing strong {
  font-size: 2rem;
  line-height: 1;
}

.subscription-tier-pricing span,
.subscription-tier-pricing small {
  color: var(--muted);
}

.subscription-feature-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
  color: var(--text);
}

.subscription-tier-actions {
  margin-top: auto;
}

.subscription-internal-access-card {
  display: grid;
  gap: 0.75rem;
}

/* "View as tier" creator preview switcher */
.subscription-preview-switcher {
  border-top: 1px solid var(--hairline, #e6e9f0);
  padding-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.subscription-preview-switcher h4 {
  margin: 0;
}
.subscription-preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.subscription-preview-status strong {
  color: #1d4ed8;
}

/* App-wide banner shown while previewing a tier */
#subscription-preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: #1d4ed8;
  color: #fff;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
#subscription-preview-banner .btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
}
#subscription-preview-banner .btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.subscription-preview-banner-text strong {
  font-weight: 700;
}
body.has-preview-banner {
  padding-top: 2.4rem;
}

.settings-tile-stack {
  display: grid;
  gap: 0.58rem;
  align-content: start;
}

.settings-compact-control-card {
  padding-block: 0.62rem;
}
/* The tick-dropdown's 220px min-width overflowed these narrow tiles — let it
   fill the tile instead so the control fits. */
.settings-compact-control-card .tick-dropdown {
  min-width: 0;
  width: 100%;
}
.settings-compact-control-card .tick-dropdown summary { gap: 0.5rem; }
.settings-compact-control-card .tick-dropdown-menu { min-width: min(260px, 78vw); }

.settings-compact-control-stack {
  display: grid;
  gap: 0.42rem;
  align-content: start;
}

.settings-compact-control {
  display: grid;
  gap: 0.42rem;
  align-items: end;
}

.settings-compact-control-copy {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.settings-reminder-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.settings-reminder-grid > label {
  align-self: stretch;
  align-content: start;
}

.settings-reminder-grid select,
.settings-reminder-grid input[type="text"],
.settings-reminder-grid input[type="email"],
.settings-reminder-grid input[type="number"] {
  min-height: 42px;
}

.settings-option-card > label,
.settings-inline-grid label {
  display: grid;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: left;
}

.settings-option-card select,
.settings-option-card input[type="text"],
.settings-option-card input[type="email"],
.settings-option-card input[type="number"],
.settings-option-card input[type="file"] {
  width: 100%;
}

.settings-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.45rem 0.55rem;
}

.settings-checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 0.88rem;
}

.settings-checkbox-option input {
  width: 16px;
  height: 16px;
}

.settings-checkbox-option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.settings-colour-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 0.58rem;
  align-items: center;
}

.settings-colour-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.settings-reminder-stack {
  display: grid;
  gap: 0.72rem;
}

.settings-reminder-delivery {
  display: grid;
  gap: 0.58rem;
  padding-top: 0.58rem;
  border-top: 1px solid var(--line);
}

.settings-reminder-delivery-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text);
}

.settings-logo-thumb {
  width: 72px;
  height: 72px;
}

.settings-logo-panel {
  display: grid;
  gap: 0.58rem;
  justify-items: start;
}

.settings-logo-current {
  display: grid;
  gap: 0.42rem;
  justify-items: start;
}

.settings-logo-meta {
  display: grid;
  gap: 0.14rem;
}

.settings-logo-filename {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.settings-branding-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.settings-report-generator-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.settings-logo-preview {
  width: min(152px, 100%);
  max-height: 88px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.4rem;
}

.settings-logo-preview.placeholder {
  display: grid;
  place-items: center;
  min-height: 70px;
  color: var(--muted);
  background: #f8fbff;
}

.settings-logo-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.settings-logo-controls.compact {
  gap: 0.4rem;
}

.settings-logo-manager {
  display: grid;
  gap: 0.58rem;
  width: 100%;
  padding-top: 0.2rem;
}

.branding-logo-card .settings-logo-preview {
  width: min(116px, 100%);
  max-height: 66px;
}

.branding-logo-card .settings-logo-preview.placeholder {
  min-height: 58px;
}

.branding-logo-card .settings-logo-manager {
  width: min(100%, 420px);
}

.branding-logo-card,
.branding-address-card,
.branding-visual-card {
  align-self: stretch;
}

.settings-branding-grid .settings-subcard {
  padding: 0.6rem 0.64rem;
}

.settings-address-panel {
  display: grid;
  gap: 0.48rem;
}

.settings-disclosure {
  display: grid;
  gap: 0.7rem;
}

.settings-disclosure summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}

.settings-disclosure summary::-webkit-details-marker {
  display: none;
}

.settings-branding-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.settings-branding-control-grid select {
  min-height: 36px;
}

.branding-visual-card .settings-picker-stack {
  gap: 0.5rem;
}

.branding-preview-card {
  grid-column: 1 / -1;
}

.branding-font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem;
}

.branding-font-tile {
  position: relative;
  display: block;
  cursor: pointer;
}

.branding-font-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.branding-font-face {
  display: grid;
  gap: 0.22rem;
  min-height: 92px;
  padding: 0.7rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.branding-font-face strong {
  color: var(--text);
  font-size: 0.98rem;
}

.branding-font-face small,
.branding-font-face span {
  color: var(--muted);
  font-size: 0.82rem;
}

.branding-font-tile input:checked + .branding-font-face {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(63, 106, 216, 0.12);
  transform: translateY(-1px);
}

.branding-font-tile:hover .branding-font-face {
  border-color: #ccd8ea;
}

.settings-delete-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
}

.logo-bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.55rem;
}

.logo-bank-item {
  display: grid;
  gap: 0.45rem;
  padding: 0.52rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.logo-bank-item.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(63, 106, 216, 0.08);
}

.logo-bank-thumb {
  width: 100%;
  height: 70px;
  object-fit: contain;
  border-radius: 10px;
  background: #f7f9fc;
  border: 1px solid #e5edf7;
}

.logo-bank-name {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.35;
}

.logo-bank-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.settings-group-block {
  display: grid;
  gap: 0.58rem;
}

.settings-group-card {
  display: grid;
  gap: 0.58rem;
}

.date-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 0.48rem;
  align-items: end;
}

.branding-preview-sheet {
  position: relative;
  min-height: 304px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  overflow: hidden;
}

.branding-preview-copy {
  display: grid;
  gap: 0.9rem;
  padding: 118px 18px 28px;
}

.branding-preview-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.branding-preview-copy h5 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text);
}

.branding-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.branding-preview-grid div {
  display: grid;
  gap: 0.2rem;
}

.branding-preview-grid strong,
.branding-preview-item-row span:last-child {
  color: var(--text);
}

.branding-preview-grid span,
.branding-preview-item-row span:first-child {
  color: var(--muted);
  font-size: 0.86rem;
}

.branding-preview-item-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: start;
  padding-top: 0.7rem;
  border-top: 1px solid #e5eaf3;
}

.branding-preview-item-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  background: #edf2fa;
  border: 1px solid #dce4f0;
}

.branding-preview-item-thumb.placeholder {
  display: block;
}

.branding-preview-item-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.branding-preview-item-copy strong {
  color: var(--text);
  line-height: 1.25;
}

.branding-preview-item-copy span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.branding-preview-item-price {
  display: grid;
  gap: 0.22rem;
  justify-items: end;
  text-align: right;
}

.branding-preview-item-price span {
  color: var(--muted);
  font-size: 0.83rem;
}

.branding-preview-item-price strong {
  color: var(--text);
}

.branding-preview-logo,
.branding-preview-address {
  position: absolute;
  z-index: 2;
}

.branding-preview-logo img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

.branding-preview-address {
  max-width: min(220px, calc(100% - 32px));
  color: #223049;
  white-space: normal;
}

.branding-preview-address.is-line {
  max-width: calc(100% - 32px);
  width: max-content;
}

.branding-preview-address.is-draggable,
.branding-preview-logo.is-draggable {
  cursor: grab;
}

.branding-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  flex-wrap: wrap;
}

.settings-save-status {
  min-height: 1rem;
  font-size: 0.84rem;
  color: var(--muted);
}

.archive-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-mini-title {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.regional-settings-card {
  max-width: 980px;
}

.field-label {
  margin-bottom: 0.1rem;
}

@media (max-width: 720px) {
  .settings-calendar-grid {
    grid-template-columns: 1fr;
  }

  .settings-colour-row {
    grid-template-columns: 1fr;
  }

  .settings-branding-grid {
    grid-template-columns: 1fr;
  }

  .settings-report-generator-grid {
    grid-template-columns: 1fr;
  }

  .date-field-grid {
    grid-template-columns: 1fr;
  }

  .settings-branding-control-grid,
  .branding-preview-grid,
  .branding-preview-item-card {
    grid-template-columns: 1fr;
  }

  .subscription-settings-hero {
    flex-direction: column;
  }

  .subscription-billing-toggle {
    width: 100%;
    justify-content: stretch;
  }

  .choice-chip {
    flex: 1 1 0;
  }

  .choice-chip span {
    width: 100%;
  }

  .settings-logo-preview {
    width: 100%;
  }

  .event-submitted-card {
    grid-template-columns: 1fr;
  }

  .event-submitted-media {
    padding: 0.62rem 0.62rem 0;
  }

  .event-submitted-body {
    padding: 0 0.72rem 0.72rem;
  }

  .event-doc-row,
  .event-doc-editor-grid {
    grid-template-columns: 1fr;
  }

  .event-doc-target-copy {
    grid-column: auto;
    margin-top: -0.05rem;
  }

  .table-like .row {
    grid-template-columns: 1fr;
  }

  .upcoming-row-side {
    justify-items: start;
    text-align: left;
    min-width: 0;
  }

  .upcoming-row-actions {
    justify-content: flex-start;
  }

  .upcoming-row-actions .actions-inline {
    justify-content: flex-start;
  }
}


@media (max-width: 900px) {
  .tick-dropdown {
    width: 100%;
  }

  .tick-dropdown-menu {
    left: 0;
    right: auto;
    min-width: 100%;
  }

  .finance-filter-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .recurring-expense-toolbar-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .recurring-expense-search,
  .recurring-expense-search input,
  .recurring-filter-chip {
    width: 100%;
    min-width: 0;
  }

  .recurring-expense-header,
  .recurring-expense-row {
    grid-template-columns: 1fr;
  }

  .finance-ledger-columns {
    grid-template-columns: 1fr;
  }

  .finance-linked-card-head {
    flex-direction: column;
  }

  .finance-linked-card-head,
  .finance-ledger-period-head {
    align-items: flex-start;
  }

  .recurring-expense-actions {
    justify-content: flex-start;
  }

  .settings-section-head {
    justify-items: stretch;
  }

  .artwork-report-hero,
  .artwork-report-grid,
  .artwork-report-side-cards,
  .artwork-report-specs,
  .piece-row {
    grid-template-columns: 1fr;
  }

  .artwork-report-row {
    grid-template-columns: 1fr;
  }

  .artwork-report-row-side {
    justify-items: start;
    text-align: left;
  }
  .gallery-person-row,
  .gallery-contact-row,
  .gallery-opening-row,
  .gallery-artist-review-row,
  .gallery-artist-followup-row,
  .gallery-artist-encounter-grid,
  .gallery-representation-reminder-grid,
  .gallery-representation-date-editor-row {
    grid-template-columns: 1fr;
  }

  .gallery-associated-artist-tools {
    grid-template-columns: 1fr;
  }

  .gallery-opening-closed-toggle {
    justify-self: start;
  }
}

.event-detail-note-card {
  display: grid;
  gap: 1rem;
}

.event-detail-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.event-detail-note-grid > div {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  background: #fafcff;
  display: grid;
  gap: 0.35rem;
}

body[data-viewing-room-public="true"] .topbar,
body[data-viewing-room-public="true"] .sidebar,
body[data-viewing-room-public="true"] #global-add-btn {
  display: none !important;
}

body[data-viewing-room-public="true"] .layout {
  display: block;
  padding: 0;
}

body[data-viewing-room-public="true"] .content {
  padding: 0;
  max-width: none;
  min-height: 100vh;
}

body[data-virtual-gallery-overlay="true"] {
  overflow: hidden;
}

body[data-virtual-gallery-overlay="true"] .topbar,
body[data-virtual-gallery-overlay="true"] .sidebar,
body[data-virtual-gallery-overlay="true"] #global-add-btn {
  display: none !important;
}

body[data-virtual-gallery-overlay="true"] .layout {
  display: block;
  padding: 0;
}

body[data-virtual-gallery-overlay="true"] .content {
  padding: 0;
  max-width: none;
  min-height: 100vh;
}

.gallery-viewer-shell {
  position: fixed;
  inset: 0;
  height: 100dvh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(0.75rem, 1.5vw, 1.1rem);
  background:
    linear-gradient(180deg, rgba(247, 249, 252, 0.96), rgba(241, 244, 248, 0.98)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.88), rgba(236, 240, 246, 0.88));
  z-index: 54;
}

.gallery-viewer-shell.is-public {
  overflow: auto;
}

.gallery-viewer-shell.is-gate {
  align-content: center;
}

.gallery-viewer-shell.is-gallery-fullscreen,
.gallery-viewer-shell:fullscreen {
  padding: clamp(0.45rem, 1vw, 0.85rem);
  gap: 0.7rem;
  z-index: 9999;
}

.gallery-viewer-shell.is-gallery-fullscreen .gallery-viewer-header,
.gallery-viewer-shell:fullscreen .gallery-viewer-header,
.gallery-viewer-shell.is-gallery-fullscreen .gallery-viewer-intro-strip,
.gallery-viewer-shell:fullscreen .gallery-viewer-intro-strip,
.gallery-viewer-shell.is-gallery-fullscreen .gallery-viewer-controls,
.gallery-viewer-shell:fullscreen .gallery-viewer-controls {
  width: min(1680px, 100%);
}

.gallery-viewer-shell.is-gallery-fullscreen .gallery-viewer-stage,
.gallery-viewer-shell:fullscreen .gallery-viewer-stage {
  width: 100%;
  max-width: none;
}

.gallery-viewer-shell.is-gallery-fullscreen .gallery-3d-viewer,
.gallery-viewer-shell:fullscreen .gallery-3d-viewer {
  border-radius: 24px;
}

.gallery-viewer-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
  width: min(1440px, 100%);
  margin: 0 auto;
}

.gallery-viewer-header-copy {
  display: grid;
  gap: 0.25rem;
  min-width: min(520px, 100%);
}

.gallery-viewer-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.gallery-viewer-header h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.gallery-viewer-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.gallery-viewer-intro-strip {
  width: min(1440px, 100%);
  margin: 0 auto;
}

.gallery-viewer-stage {
  width: 100%;
  margin: 0 auto;
  display: grid;
  width: min(1680px, 100%);
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.gallery-viewer-stage-3d {
  align-self: stretch;
}

.gallery-3d-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  cursor: grab;
  overflow: hidden;
  border-radius: 32px;
  border: 1px solid rgba(127, 143, 164, 0.12);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.42), rgba(235, 240, 244, 0.08) 42%, rgba(15, 18, 22, 0.96) 100%),
    linear-gradient(180deg, rgba(244, 247, 250, 0.18), rgba(16, 20, 25, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 70px rgba(24, 29, 38, 0.2);
}

.gallery-3d-viewer-surface {
  position: absolute;
  inset: 0;
}

.gallery-aframe-stage {
  position: absolute;
  inset: 0;
}

.gallery-aframe-scene {
  width: 100%;
  height: 100%;
  display: block;
}

.gallery-aframe-scene canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.gallery-3d-viewer-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
  outline: none;
}

.gallery-3d-viewer-status {
  position: absolute;
  inset: auto auto 1rem 1rem;
  z-index: 2;
  display: grid;
  gap: 0.18rem;
  max-width: min(460px, calc(100% - 2rem));
  padding: 0.9rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(127, 143, 164, 0.16);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px rgba(35, 44, 63, 0.12);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.gallery-3d-viewer-status.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.gallery-3d-viewer-status.is-error {
  background: rgba(253, 239, 239, 0.92);
}

.gallery-3d-client-status {
  pointer-events: auto;
  z-index: 4;
}

.gallery-3d-client-status strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.gallery-3d-client-status > span:nth-of-type(2) {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.gallery-3d-client-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.gallery-3d-client-status-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.gallery-3d-session-ui {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 252, 0.95));
  box-shadow: 0 14px 32px rgba(35, 44, 63, 0.06);
}

.gallery-3d-session-head {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.gallery-3d-session-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.gallery-3d-session-copy h3 {
  margin: 0;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
}

.gallery-3d-session-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f7f96;
  font-weight: 700;
}

.gallery-3d-session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.gallery-3d-session-connections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gallery-3d-session-connection {
  white-space: nowrap;
}

.gallery-3d-client-onboarding {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.55rem;
  padding: 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(127, 143, 164, 0.14);
  background: rgba(248, 250, 253, 0.88);
}

.gallery-3d-client-onboarding-card {
  display: grid;
  gap: 0.8rem;
}

.gallery-3d-client-onboarding-copy {
  display: grid;
  gap: 0.2rem;
}

.gallery-3d-client-onboarding-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.gallery-3d-client-onboarding-copy h2 {
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: -0.03em;
}

.gallery-3d-client-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.gallery-3d-client-onboarding-step {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(127, 143, 164, 0.12);
  background: rgba(255, 255, 255, 0.92);
}

.gallery-3d-client-onboarding-step strong {
  font-size: 0.88rem;
  line-height: 1.25;
}

.gallery-3d-client-onboarding-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.gallery-3d-client-onboarding-foot {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.gallery-viewer-shell.has-gallery-3d-client-hints-hidden .gallery-3d-client-status-pills,
.gallery-viewer-shell.has-gallery-3d-client-hints-hidden .gallery-3d-client-onboarding-grid {
  opacity: 0;
  transform: translateY(4px);
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.gallery-viewer-shell.is-idle .gallery-3d-client-status {
  transform: translateY(4px);
}

.gallery-3d-viewer-status-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"].is-looking .gallery-3d-viewer {
  cursor: grabbing;
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-perspective-stage,
.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-spatial-stage {
  cursor: grab;
  touch-action: none;
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"].is-looking .viewing-room-perspective-stage,
.gallery-viewer-shell[data-virtual-gallery-viewer="true"].is-looking .viewing-room-spatial-stage {
  cursor: grabbing;
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-perspective-panorama,
.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-spatial-panorama {
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.16s ease-out;
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-perspective-panorama {
  transform: translate3d(calc(var(--virtual-gallery-look-x, 0px) * 0.7), calc(var(--virtual-gallery-look-y, 0px) * 0.42), 0) scale(calc(1 + (var(--virtual-gallery-zoom, 0) * 0.5)));
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-spatial-panorama {
  transform: translate3d(calc(var(--virtual-gallery-look-x, 0px) * 0.6), calc(var(--virtual-gallery-look-y, 0px) * 0.4), 0) scale(calc(1 + (var(--virtual-gallery-zoom, 0) * 0.5)));
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-spatial-floorplane {
  will-change: transform;
  transition: transform 0.16s ease-out;
  transform: translate3d(calc(var(--virtual-gallery-look-x, 0px) * 0.16), calc(var(--virtual-gallery-look-y, 0px) * 0.08), 0);
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-surface-backdrop {
  will-change: transform;
  transition: transform 0.16s ease-out;
  transform: translate3d(calc(var(--virtual-gallery-look-x, 0px) * 0.16), calc(var(--virtual-gallery-look-y, 0px) * 0.1), 0);
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-spatial-floorboards,
.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-surface-floorboards {
  will-change: transform;
  transition: transform 0.16s ease-out;
}

.gallery-viewer-shell.has-gallery-viewer-guidance .gallery-viewer-header,
.gallery-viewer-shell.has-gallery-viewer-guidance .gallery-viewer-intro-strip,
.gallery-viewer-shell.has-gallery-viewer-guidance .gallery-viewer-stage,
.gallery-viewer-shell.has-gallery-viewer-guidance .gallery-viewer-controls {
  pointer-events: none;
  user-select: none;
}

.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-perspective-stage:focus,
.gallery-viewer-shell[data-virtual-gallery-viewer="true"] .viewing-room-spatial-stage:focus,
.gallery-viewer-shell[data-virtual-gallery-viewer="true"]:focus {
  outline: none;
}

.gallery-viewer-gate-stage {
  align-items: center;
}

.gallery-viewer-gate-card {
  width: min(520px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(35, 44, 63, 0.08);
}

.gallery-viewer-controls {
  width: min(1440px, 100%);
  margin: 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 32px rgba(35, 44, 63, 0.08);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.gallery-viewer-controls-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.virtual-gallery-controls-shell {
  display: grid;
  gap: 0.75rem;
}

.virtual-gallery-controls-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.virtual-gallery-controls-copy {
  display: grid;
  gap: 0.2rem;
  min-width: min(420px, 100%);
}

.virtual-gallery-controls-copy strong {
  font-size: 1rem;
}

.virtual-gallery-controls-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.virtual-gallery-navigation {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.14);
  border-radius: 18px;
  background: rgba(248, 250, 253, 0.92);
}

.virtual-gallery-navigation-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: flex-start;
  justify-content: space-between;
}

.virtual-gallery-navigation-copy {
  display: grid;
  gap: 0.2rem;
  min-width: min(420px, 100%);
}

.virtual-gallery-navigation-copy h4 {
  margin: 0;
  font-size: 1rem;
}

.virtual-gallery-navigation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.virtual-gallery-navigation-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.virtual-gallery-navigation-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

.virtual-gallery-navigation-node {
  border: 1px solid rgba(96, 111, 134, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
}

.virtual-gallery-navigation-node.is-active {
  background: #eaf2ff;
  border-color: rgba(88, 118, 198, 0.32);
  color: #30509b;
}

.virtual-gallery-navigation-turnbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
}

.gallery-3d-hotspots {
  display: grid;
  gap: 0.35rem;
}

.gallery-3d-hotspots-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.gallery-3d-hotspots-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.gallery-3d-hotspot {
  border: 1px solid rgba(96, 111, 134, 0.18);
  background: rgba(246, 248, 251, 0.88);
  color: var(--text);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.gallery-3d-hotspot:hover,
.gallery-3d-hotspot:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(76, 94, 124, 0.26);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(35, 44, 63, 0.08);
}

.gallery-3d-hotspot.is-active {
  border-color: rgba(91, 111, 159, 0.36);
  background: linear-gradient(180deg, rgba(238, 244, 255, 0.96), rgba(226, 234, 249, 0.98));
  color: #30406d;
}

.gallery-viewer-control-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}

.gallery-viewer-hint-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  align-items: center;
  transition: opacity 0.18s ease, transform 0.18s ease, max-width 0.18s ease;
}

.gallery-viewer-control-hints.has-help-only .gallery-viewer-hint-badges {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

.gallery-viewer-shell.has-gallery-control-hints-hidden .gallery-viewer-hint-badges {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

.gallery-viewer-help-trigger {
  flex-shrink: 0;
}

.gallery-viewer-onboarding {
  position: absolute;
  inset: clamp(0.8rem, 1.8vw, 1.25rem);
  z-index: 9;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(243, 247, 251, 0.42), rgba(238, 242, 247, 0.68));
  backdrop-filter: blur(5px);
  pointer-events: auto;
}

.gallery-viewer-onboarding-card {
  width: min(640px, 100%);
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.45rem);
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 42px rgba(35, 44, 63, 0.11);
}

.gallery-viewer-onboarding-copy {
  display: grid;
  gap: 0.25rem;
}

.gallery-viewer-onboarding-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.gallery-viewer-onboarding-card h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.03em;
}

.gallery-viewer-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.gallery-viewer-onboarding-step {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(127, 143, 164, 0.14);
  background: #f8fbff;
}

.gallery-viewer-onboarding-step strong {
  font-size: 0.95rem;
  line-height: 1.2;
}

.gallery-viewer-onboarding-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.gallery-viewer-onboarding-actions {
  display: flex;
  justify-content: flex-end;
}

.gallery-viewer-focus-tip {
  margin: 0.3rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(127, 143, 164, 0.14);
  background: rgba(240, 244, 252, 0.9);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.gallery-viewer-focus-tip strong {
  color: var(--text);
}

.gallery-viewer-help-trigger {
  min-width: 3.8rem;
}

.gallery-viewer-control-hints .badge.soft {
  white-space: nowrap;
}

.virtual-gallery-navigation-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
}

.gallery-viewer-focus-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.gallery-viewer-focus-copy {
  display: grid;
  gap: 0.18rem;
  min-width: min(420px, 100%);
}

.gallery-viewer-focus-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.gallery-viewer-focus-copy strong {
  font-size: 0.98rem;
  color: var(--text);
}

.gallery-viewer-focus-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gallery-viewer-focus-actions.is-empty {
  justify-content: flex-start;
}

.gallery-viewer-focus-return {
  flex-shrink: 0;
}

.gallery-viewer-focus-counter {
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.55rem;
  border-radius: 999px;
  background: #eff4ff;
  color: #4860a9;
  font-size: 0.78rem;
  font-weight: 700;
}

.gallery-viewer-shell.is-idle .gallery-viewer-header,
.gallery-viewer-shell.is-idle .gallery-viewer-controls {
  opacity: 0.22;
  transform: translateY(4px);
  pointer-events: none;
}

.gallery-3d-editor-shell {
  display: grid;
  gap: 0.9rem;
  width: min(100%, 1680px);
  margin: 0 auto;
}

.gallery-3d-editor-toolbar {
  position: relative;
  z-index: 6;
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(35, 44, 63, 0.08);
  backdrop-filter: blur(12px);
}

.gallery-3d-editor-toolbar-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: space-between;
  align-items: flex-start;
}

.gallery-3d-editor-toolbar-copy {
  display: grid;
  gap: 0.22rem;
  min-width: min(520px, 100%);
}

.gallery-3d-editor-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.gallery-3d-editor-toolbar-copy h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  line-height: 1.05;
}

.gallery-3d-editor-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.gallery-3d-editor-toolbar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.gallery-3d-editor-room-settings {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.gallery-3d-editor-room-settings > div {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.gallery-3d-editor-toolbar-card {
  display: grid;
  gap: 0.7rem;
  padding: 0.88rem 0.92rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 18px;
  background: #fff;
  min-width: 0;
}

.gallery-3d-editor-toolbar-card-head {
  display: grid;
  gap: 0.18rem;
}

.gallery-3d-editor-toolbar-row,
.gallery-3d-editor-wall-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
}

.gallery-3d-editor-toolbar-row .btn,
.gallery-3d-editor-wall-row .btn {
  flex-shrink: 0;
}

.gallery-3d-editor-selection {
  display: grid;
  gap: 0.2rem;
  padding: 0.84rem 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248, 250, 253, 0.98), rgba(243, 246, 251, 0.96));
}

.gallery-3d-editor-selection strong {
  font-size: 0.98rem;
}

.gallery-3d-editor-selection span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.gallery-3d-editor-artwork-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gallery-3d-editor-artwork-selected {
  display: grid;
  gap: 0.45rem;
}

.gallery-3d-editor-artwork-grid {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-height: 28rem;
  overflow: auto;
  padding-right: 0.1rem;
}

.gallery-3d-editor-artwork-chip,
.gallery-3d-editor-artwork-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.62rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.gallery-3d-editor-artwork-chip {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.48rem 0.56rem;
}

.gallery-3d-editor-artwork-chip.is-selected,
.gallery-3d-editor-artwork-tile.is-selected,
.gallery-3d-editor-artwork-chip:hover,
.gallery-3d-editor-artwork-tile:hover {
  border-color: #7c9fe8;
  background: #f5f8ff;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.12);
}

.gallery-3d-editor-artwork-chip .gallery-3d-editor-artwork-thumb,
.gallery-3d-editor-artwork-tile .gallery-3d-editor-artwork-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(180deg, #f2ebe3, #e4d8cb);
  border: 1px solid rgba(127, 143, 164, 0.16);
}

.gallery-3d-editor-artwork-chip .gallery-3d-editor-artwork-thumb.placeholder,
.gallery-3d-editor-artwork-tile .gallery-3d-editor-artwork-thumb.placeholder {
  display: inline-block;
}

.gallery-3d-editor-artwork-thumb.is-missing-media,
.viewing-room-artwork-thumb.is-missing-media,
.assign-piece-thumb.is-missing-media {
  display: grid;
  place-items: center;
  padding: 0.28rem;
  text-align: center;
  font-size: 0.58rem;
  line-height: 1.15;
  font-weight: 700;
  color: #6a5644;
}

.gallery-3d-editor-artwork-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.gallery-3d-editor-artwork-copy strong {
  font-size: 0.92rem;
  line-height: 1.2;
}

.gallery-3d-editor-artwork-copy small {
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.35;
}

.gallery-3d-editor-artwork-warning {
  color: #8a4d1f;
  font-weight: 700;
}

.gallery-3d-editor-stage {
  position: relative;
  min-height: clamp(560px, 74vh, 980px);
}

.gallery-3d-editor-stage .gallery-3d-viewer {
  height: clamp(560px, 74vh, 980px);
  min-height: clamp(560px, 74vh, 980px);
  border-radius: 28px;
}

.gallery-3d-editor-stage .viewing-room-node-map {
  inset: auto 1.25rem 1.25rem 1.25rem;
  height: auto;
  z-index: 8;
}

.gallery-3d-editor-stage .viewing-room-node-spot {
  transform: translate(-50%, -50%);
}

.gallery-3d-editor-stage .viewing-room-node-map-hint {
  bottom: 0;
}

.gallery-3d-editor-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0 0.15rem;
}

.gallery-3d-editor-footer .badge {
  white-space: normal;
}

.viewing-room-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.28fr);
  gap: 1rem;
  align-items: start;
}

.viewing-room-list-panel,
.viewing-room-detail,
.viewing-room-editor {
  display: grid;
  gap: 0.9rem;
}

.viewing-room-list-head h2,
.viewing-room-detail h2,
.viewing-room-editor h2,
.viewing-room-editor h3,
.viewing-room-selector-head h3,
.viewing-room-public-copy h2,
.viewing-room-public-hero h1,
.viewing-room-public-card h1 {
  margin: 0;
}

.viewing-room-list {
  display: grid;
  gap: 0.75rem;
}

.viewing-room-card {
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.viewing-room-card.active {
  border-color: #bcd1fb;
  box-shadow: 0 0 0 1px rgba(111, 145, 230, 0.18);
}

.viewing-room-card-top,
.viewing-room-detail-head,
.viewing-room-editor-head,
.viewing-room-editor-artworks-head,
.viewing-room-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.viewing-room-card-main,
.viewing-room-card-top > div,
.viewing-room-detail-head > div:first-child,
.viewing-room-editor-head > div:first-child,
.viewing-room-editor-artworks-head > div:first-child {
  display: grid;
  gap: 0.32rem;
}

.viewing-room-card-meta,
.viewing-room-card-actions,
.viewing-room-detail-actions,
.viewing-room-detail-share-actions,
.viewing-room-selected-actions,
.viewing-room-public-actions,
.viewing-room-selector-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.viewing-room-card-meta {
  color: var(--muted);
  font-size: 0.84rem;
}

.viewing-room-card-actions {
  padding-top: 0.15rem;
  border-top: 1px solid rgba(127, 143, 164, 0.16);
}

.viewing-room-eyebrow {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f7f96;
  font-weight: 700;
}

.viewing-room-detail-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 14px;
  background: #fbfcff;
}

.viewing-room-immersive-launch {
  display: grid;
  gap: 0.9rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(251, 252, 255, 0.98), rgba(246, 248, 252, 0.96));
  box-shadow: 0 14px 32px rgba(35, 44, 63, 0.06);
}

.viewing-room-immersive-launch-copy {
  display: grid;
  gap: 0.25rem;
}

.viewing-room-immersive-launch-copy h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.viewing-room-immersive-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.viewing-room-immersive-launch-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.viewing-room-artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.viewing-room-artwork-card {
  display: grid;
  gap: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.viewing-room-artwork-image,
.viewing-room-public-image {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  display: block;
  background: #edf1f7;
}

.viewing-room-artwork-image.placeholder,
.viewing-room-public-image.placeholder {
  min-height: 240px;
}

.viewing-room-artwork-copy,
.viewing-room-public-copy {
  display: grid;
  gap: 0.22rem;
  padding: 0 0.9rem 0.95rem;
}

.viewing-room-artwork-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.viewing-room-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: start center;
  padding: clamp(0.75rem, 1.5vw, 1.1rem);
  background:
    linear-gradient(180deg, rgba(245, 248, 252, 0.9), rgba(233, 238, 245, 0.96)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.9), rgba(235, 240, 246, 0.92));
  backdrop-filter: blur(12px);
}

.viewing-room-editor-overlay-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.viewing-room-editor-surface {
  position: relative;
  z-index: 1;
  width: min(1560px, 100%);
  max-height: calc(100dvh - clamp(1.5rem, 3vw, 2rem));
  overflow: auto;
  box-shadow: 0 24px 72px rgba(24, 29, 38, 0.18);
}

.viewing-room-detail-viewing {
  display: grid;
  gap: 0.9rem;
  position: relative;
  z-index: 2;
}

.viewing-room-detail-editing {
  display: grid;
  gap: 0.9rem;
  position: relative;
  z-index: 2;
}

.viewing-room-editor {
  position: relative;
}

.viewing-room-editor-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
  box-shadow: 0 14px 32px rgba(35, 44, 63, 0.06);
  position: relative;
  z-index: 3;
  backdrop-filter: blur(10px);
}

.viewing-room-editor-nav-copy {
  display: grid;
  gap: 0.24rem;
  min-width: 0;
}

.viewing-room-editor-nav-copy h3 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}

.viewing-room-editor-nav-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.viewing-room-editor-priority,
.viewing-room-editor-mode {
  display: grid;
  gap: 0.7rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
}

.viewing-room-editor-hero,
.viewing-room-editor-overview {
  display: grid;
  gap: 0.9rem;
}

.viewing-room-editor-hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
  align-items: start;
}

.viewing-room-editor-overview {
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
}

.viewing-room-editor-story,
.viewing-room-transition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.viewing-room-editor-story,
.viewing-room-editor-flow {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
}

.viewing-room-editor-story > label,
.viewing-room-transition-node {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.viewing-room-editor-story .full {
  grid-column: 1 / -1;
}

.viewing-room-editor-flow {
  display: grid;
  gap: 0.75rem;
}

.viewing-room-transition-head,
.viewing-room-intro-panel {
  display: grid;
  gap: 0.3rem;
}

.viewing-room-transition-head h3,
.viewing-room-intro-panel h3 {
  margin: 0;
}

.viewing-room-transition-grid select,
.viewing-room-transition-grid input {
  min-height: 42px;
  width: 100%;
  min-width: 0;
}

.viewing-room-transition-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.viewing-room-intro-panel {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(251, 252, 255, 0.96), rgba(246, 248, 252, 0.94));
}

.viewing-room-intro-panel.is-compact {
  padding: 0.8rem 0.9rem;
}

.viewing-room-intro-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f7f96;
  font-weight: 700;
}

.viewing-room-intro-curator {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

.viewing-room-editor-artworks {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
}

.viewing-room-gallery-workspace {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.35rem;
}

.viewing-room-editor-space-stage {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

.viewing-room-detail-viewing .viewing-room-gallery-workspace,
.viewing-room-detail-viewing .viewing-room-editor-space-stage {
  min-width: 0;
}

.viewing-room-gallery-view-stage {
  min-height: clamp(560px, 74vh, 980px);
}

.viewing-room-gallery-view-stage .gallery-3d-viewer {
  height: clamp(560px, 74vh, 980px);
  min-height: clamp(560px, 74vh, 980px);
  border-radius: 28px;
}

.viewing-room-space-editor-actions {
  display: grid;
  gap: 0.55rem;
  justify-items: end;
}

.viewing-room-space-editor-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.viewing-room-space-editor-toggle .btn.is-active {
  background: #edf2ff;
  border-color: #7c9fe8;
  color: #25428a;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
}

.viewing-room-gallery-editor-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 18px;
  background: #fbfcff;
}

.viewing-room-gallery-editor-toolbar-copy {
  display: grid;
  gap: 0.2rem;
}

.viewing-room-gallery-editor-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.viewing-room-gallery-editor-toolbar-copy h3 {
  margin: 0;
}

.viewing-room-gallery-editor-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.viewing-room-gallery-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.88rem 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
}

.viewing-room-gallery-mode-toggle .badge {
  margin-left: auto;
}

.viewing-room-gallery-editor-stage,
.viewing-room-gallery-view-stage {
  display: grid;
  gap: 0.9rem;
}

.viewing-room-gallery-editor-note {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
}

.viewing-room-placement-panel {
  display: grid;
  gap: 0.85rem;
}

.viewing-room-placement-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.viewing-room-placement-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.viewing-room-placement-note {
  margin: 0;
}

.viewing-room-placement-row .viewing-room-label-position-select,
.viewing-room-placement-row .viewing-room-wall-select {
  min-width: 164px;
}

.viewing-room-floor-style-grid {
  display: grid;
  gap: 0.55rem;
}

.viewing-room-floor-style-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.62rem 0.68rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.viewing-room-floor-style-card:has(input:checked) {
  border-color: #7c9fe8;
  background: #f2f6ff;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
}

.viewing-room-floor-style-swatch {
  position: relative;
  overflow: hidden;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(127, 143, 164, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 54%, rgba(56, 39, 22, 0.08)),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 0 8.2%,
      rgba(82, 60, 34, 0.14) 8.2% 8.65%,
      color-mix(in srgb, var(--floor-swatch-b) 93%, white 7%) 8.65% 18.4%,
      rgba(82, 60, 34, 0.14) 18.4% 18.82%,
      color-mix(in srgb, var(--floor-swatch-c) 91%, white 9%) 18.82% 29.6%,
      rgba(82, 60, 34, 0.14) 29.6% 30.02%,
      color-mix(in srgb, var(--floor-swatch-a) 92%, white 8%) 30.02% 39.4%,
      rgba(82, 60, 34, 0.14) 39.4% 39.8%,
      color-mix(in srgb, var(--floor-swatch-b) 94%, white 6%) 39.8% 48.6%,
      rgba(82, 60, 34, 0.14) 48.6% 49.04%,
      color-mix(in srgb, var(--floor-swatch-c) 92%, white 8%) 49.04% 58.55%,
      rgba(82, 60, 34, 0.14) 58.55% 58.98%,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 58.98% 70.2%,
      rgba(82, 60, 34, 0.14) 70.2% 70.62%,
      color-mix(in srgb, var(--floor-swatch-c) 93%, white 7%) 70.62% 81.5%,
      rgba(82, 60, 34, 0.14) 81.5% 81.92%,
      color-mix(in srgb, var(--floor-swatch-b) 94%, white 6%) 81.92% 92.15%,
      rgba(82, 60, 34, 0.14) 92.15% 92.54%,
      color-mix(in srgb, var(--floor-swatch-a) 92%, white 8%) 92.54% 100%
    );
}

.viewing-room-floor-style-card[data-floor-width="wide"] .viewing-room-floor-style-swatch {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 54%, rgba(56, 39, 22, 0.08)),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 0 12.6%,
      rgba(82, 60, 34, 0.14) 12.6% 13.1%,
      color-mix(in srgb, var(--floor-swatch-b) 93%, white 7%) 13.1% 28.4%,
      rgba(82, 60, 34, 0.14) 28.4% 28.95%,
      color-mix(in srgb, var(--floor-swatch-c) 91%, white 9%) 28.95% 46.25%,
      rgba(82, 60, 34, 0.14) 46.25% 46.82%,
      color-mix(in srgb, var(--floor-swatch-a) 92%, white 8%) 46.82% 63.55%,
      rgba(82, 60, 34, 0.14) 63.55% 64.08%,
      color-mix(in srgb, var(--floor-swatch-c) 92%, white 8%) 64.08% 81.75%,
      rgba(82, 60, 34, 0.14) 81.75% 82.28%,
      color-mix(in srgb, var(--floor-swatch-b) 94%, white 6%) 82.28% 100%
    );
}

.viewing-room-floor-style-card[data-floor-width="thin"] .viewing-room-floor-style-swatch {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 54%, rgba(56, 39, 22, 0.08)),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 0 4.35%,
      rgba(82, 60, 34, 0.14) 4.35% 4.62%,
      color-mix(in srgb, var(--floor-swatch-b) 93%, white 7%) 4.62% 9.2%,
      rgba(82, 60, 34, 0.14) 9.2% 9.48%,
      color-mix(in srgb, var(--floor-swatch-c) 91%, white 9%) 9.48% 14.22%,
      rgba(82, 60, 34, 0.14) 14.22% 14.5%,
      color-mix(in srgb, var(--floor-swatch-a) 92%, white 8%) 14.5% 19.6%,
      rgba(82, 60, 34, 0.14) 19.6% 19.88%,
      color-mix(in srgb, var(--floor-swatch-b) 94%, white 6%) 19.88% 24.35%,
      rgba(82, 60, 34, 0.14) 24.35% 24.62%,
      color-mix(in srgb, var(--floor-swatch-c) 92%, white 8%) 24.62% 29.9%,
      rgba(82, 60, 34, 0.14) 29.9% 30.18%,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 30.18% 34.9%,
      rgba(82, 60, 34, 0.14) 34.9% 35.18%,
      color-mix(in srgb, var(--floor-swatch-c) 93%, white 7%) 35.18% 40.4%,
      rgba(82, 60, 34, 0.14) 40.4% 40.68%,
      color-mix(in srgb, var(--floor-swatch-b) 94%, white 6%) 40.68% 45.2%,
      rgba(82, 60, 34, 0.14) 45.2% 45.48%,
      color-mix(in srgb, var(--floor-swatch-a) 92%, white 8%) 45.48% 50.6%,
      rgba(82, 60, 34, 0.14) 50.6% 50.88%,
      color-mix(in srgb, var(--floor-swatch-c) 91%, white 9%) 50.88% 56.35%,
      rgba(82, 60, 34, 0.14) 56.35% 56.64%,
      color-mix(in srgb, var(--floor-swatch-b) 95%, white 5%) 56.64% 61.45%,
      rgba(82, 60, 34, 0.14) 61.45% 61.72%,
      color-mix(in srgb, var(--floor-swatch-a) 92%, white 8%) 61.72% 66.85%,
      rgba(82, 60, 34, 0.14) 66.85% 67.12%,
      color-mix(in srgb, var(--floor-swatch-c) 92%, white 8%) 67.12% 72.5%,
      rgba(82, 60, 34, 0.14) 72.5% 72.78%,
      color-mix(in srgb, var(--floor-swatch-b) 94%, white 6%) 72.78% 77.35%,
      rgba(82, 60, 34, 0.14) 77.35% 77.62%,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 77.62% 82.6%,
      rgba(82, 60, 34, 0.14) 82.6% 82.88%,
      color-mix(in srgb, var(--floor-swatch-c) 93%, white 7%) 82.88% 88.15%,
      rgba(82, 60, 34, 0.14) 88.15% 88.42%,
      color-mix(in srgb, var(--floor-swatch-b) 95%, white 5%) 88.42% 93.55%,
      rgba(82, 60, 34, 0.14) 93.55% 93.82%,
      color-mix(in srgb, var(--floor-swatch-a) 92%, white 8%) 93.82% 100%
    );
}

.viewing-room-floor-style-card[data-floor-width="mixed"] .viewing-room-floor-style-swatch {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 54%, rgba(56, 39, 22, 0.08)),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 0 7.1%,
      rgba(82, 60, 34, 0.14) 7.1% 7.44%,
      color-mix(in srgb, var(--floor-swatch-b) 93%, white 7%) 7.44% 17.6%,
      rgba(82, 60, 34, 0.14) 17.6% 17.94%,
      color-mix(in srgb, var(--floor-swatch-c) 91%, white 9%) 17.94% 28.95%,
      rgba(82, 60, 34, 0.14) 28.95% 29.3%,
      color-mix(in srgb, var(--floor-swatch-a) 92%, white 8%) 29.3% 35.4%,
      rgba(82, 60, 34, 0.14) 35.4% 35.72%,
      color-mix(in srgb, var(--floor-swatch-b) 94%, white 6%) 35.72% 44.45%,
      rgba(82, 60, 34, 0.14) 44.45% 44.8%,
      color-mix(in srgb, var(--floor-swatch-c) 92%, white 8%) 44.8% 50.85%,
      rgba(82, 60, 34, 0.14) 50.85% 51.2%,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 51.2% 63.3%,
      rgba(82, 60, 34, 0.14) 63.3% 63.66%,
      color-mix(in srgb, var(--floor-swatch-c) 93%, white 7%) 63.66% 70.2%,
      rgba(82, 60, 34, 0.14) 70.2% 70.54%,
      color-mix(in srgb, var(--floor-swatch-b) 94%, white 6%) 70.54% 80.25%,
      rgba(82, 60, 34, 0.14) 80.25% 80.62%,
      color-mix(in srgb, var(--floor-swatch-a) 92%, white 8%) 80.62% 88.35%,
      rgba(82, 60, 34, 0.14) 88.35% 88.7%,
      color-mix(in srgb, var(--floor-swatch-c) 91%, white 9%) 88.7% 95.05%,
      rgba(82, 60, 34, 0.14) 95.05% 95.38%,
      color-mix(in srgb, var(--floor-swatch-b) 95%, white 5%) 95.38% 100%
    );
}

.viewing-room-floor-style-card[data-floor-pattern="parquet"] .viewing-room-floor-style-swatch {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 40%, rgba(56, 39, 22, 0.08)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1.2%, rgba(255, 255, 255, 0) 1.2% 14%, rgba(61, 40, 22, 0.1) 14% 14.8%, rgba(255, 255, 255, 0) 14.8% 28.2%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1.2%, rgba(255, 255, 255, 0) 1.2% 14%, rgba(61, 40, 22, 0.08) 14% 14.8%, rgba(255, 255, 255, 0) 14.8% 28.2%),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 0,
      color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 14%,
      color-mix(in srgb, var(--floor-swatch-b) 93%, white 7%) 14%,
      color-mix(in srgb, var(--floor-swatch-b) 93%, white 7%) 28%
    );
}

.viewing-room-floor-style-card[data-floor-pattern="chevron"] .viewing-room-floor-style-swatch {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 40%, rgba(56, 39, 22, 0.08)),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--floor-swatch-a) 91%, white 9%) 0 3.2%, color-mix(in srgb, var(--floor-swatch-b) 93%, white 7%) 3.2% 6.4%, rgba(82, 60, 34, 0.14) 6.4% 6.8%, rgba(255, 255, 255, 0) 6.8% 12.2%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--floor-swatch-c) 91%, white 9%) 0 3.2%, color-mix(in srgb, var(--floor-swatch-b) 93%, white 7%) 3.2% 6.4%, rgba(82, 60, 34, 0.12) 6.4% 6.8%, rgba(255, 255, 255, 0) 6.8% 12.2%);
}

.viewing-room-floor-style-copy {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.viewing-room-floor-style-copy strong {
  color: var(--text);
}

.viewing-room-floor-style-copy small {
  color: var(--muted);
  font-size: 0.78rem;
}

.viewing-room-placement-row .viewing-room-placement-copy {
  display: grid;
  gap: 0.18rem;
}

.viewing-room-placement-panel .viewing-room-selected-row {
  align-items: flex-start;
}

.viewing-room-editor-priority input {
  min-height: 44px;
  font-size: 1rem;
}

.viewing-room-editor-mode-head,
.viewing-room-editor-flow-head,
.viewing-room-editor-artworks-head,
.event-contact-log-head,
.event-contact-context-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.viewing-room-display-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.viewing-room-display-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(127, 143, 164, 0.2);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.viewing-room-display-mode-card input {
  margin-top: 0.2rem;
}

.viewing-room-display-mode-card.is-selected,
.viewing-room-display-mode-card:has(input:checked) {
  border-color: #7c9fe8;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
  background: #f5f8ff;
}

.viewing-room-display-mode-copy {
  display: grid;
  gap: 0.22rem;
}

.viewing-room-display-mode-copy small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.viewing-room-editor-priority label,
.viewing-room-editor-mode label,
.viewing-room-editor-artworks label,
.viewing-room-public-password {
  display: grid;
  gap: 0.45rem;
}

.viewing-room-editor-note {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 14px;
  background: #fbfcff;
}

.viewing-room-editor-artworks {
  display: grid;
  gap: 0.8rem;
}

.viewing-room-selected-list {
  display: grid;
  gap: 0.55rem;
}

.viewing-room-selected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.62rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.viewing-room-selected-row strong {
  font-size: 0.98rem;
}

.viewing-room-selected-copy {
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
  min-width: 0;
}

.viewing-room-selected-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #eef1f7;
}

.viewing-room-selected-thumb.placeholder,
.viewing-room-artwork-thumb.placeholder {
  display: inline-block;
}

.viewing-room-selected-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

.viewing-room-wall-select {
  display: grid;
  gap: 0.3rem;
  min-width: 172px;
}

.viewing-room-wall-select.is-compact {
  min-width: 148px;
}

.viewing-room-wall-select select {
  min-height: 40px;
}

.viewing-room-navigation {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(251, 252, 255, 0.96), rgba(246, 248, 252, 0.94));
  box-shadow: 0 10px 24px rgba(36, 44, 59, 0.06);
}

.viewing-room-navigation-copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.viewing-room-navigation-copy h4 {
  margin: 0;
}

.viewing-room-navigation-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f7f96;
  font-weight: 700;
}

.viewing-room-navigation-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.viewing-room-navigation-turnbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.viewing-room-navigation-focusbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.viewing-room-navigation-focus-chip {
  display: grid;
  gap: 0.06rem;
  justify-items: center;
  min-width: 0;
  padding: 0.34rem 0.68rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.viewing-room-navigation-focus-chip-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

.viewing-room-navigation-focus-chip-subtitle {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.viewing-room-navigation-node-chip {
  display: grid;
  gap: 0.08rem;
  justify-items: center;
  min-width: 0;
  padding: 0.38rem 0.75rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.viewing-room-navigation-node-chip-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.viewing-room-navigation-node-chip-wall {
  font-size: 0.7rem;
  color: var(--muted);
}

.viewing-room-navigation-controls .btn,
.viewing-room-navigation-turnbar .btn,
.viewing-room-navigation-focusbar .btn,
.viewing-room-node-spot,
.viewing-room-connection-hotspot,
.viewing-room-space-focus {
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.viewing-room-navigation.is-viewer {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.viewing-room-navigation.is-viewer .viewing-room-navigation-copy {
  display: none;
}

.virtual-gallery-navigation.is-viewer .viewing-room-navigation-copy {
  display: flex;
}

.virtual-gallery-navigation .viewing-room-navigation-copy > div {
  display: grid;
  gap: 0.12rem;
}

.virtual-gallery-navigation .viewing-room-navigation-copy .subtitle {
  max-width: min(32rem, 100%);
}

.viewing-room-navigation.is-viewer .viewing-room-navigation-controls,
.viewing-room-navigation.is-viewer .viewing-room-navigation-turnbar {
  justify-content: center;
}

.viewing-room-navigation.is-viewer .viewing-room-navigation-focusbar {
  justify-content: space-between;
}

.viewing-room-node-spot {
  opacity: 0.58;
}

.viewing-room-node-spot:hover {
  opacity: 1;
}

.viewing-room-wall-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.viewing-room-wall-chip {
  min-width: 0;
  border-radius: 999px;
}

.viewing-room-wall-chip.is-selected {
  background: #edf2ff;
  border-color: #7c9fe8;
  color: #25428a;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
}

.viewing-room-selector-overlay {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.viewing-room-selector-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(24, 33, 50, 0.42);
  cursor: pointer;
}

.viewing-room-selector-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(80vh, 820px);
  overflow: auto;
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fcfdff;
  box-shadow: 0 18px 52px rgba(27, 38, 59, 0.18);
}

.viewing-room-selector-grid {
  margin: 0;
}

.viewing-room-selector-option {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  padding: 0.68rem 0.72rem;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.viewing-room-selector-option input {
  accent-color: #6f91e6;
}

.viewing-room-selector-option:has(input:checked) {
  border-color: #7c9fe8;
  background: #f2f6ff;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
}

.viewing-room-connection-hotspot {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 12;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  max-width: min(280px, 40%);
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(88, 104, 134, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  box-shadow: 0 12px 24px rgba(35, 42, 57, 0.12);
  cursor: pointer;
}

.viewing-room-connection-hotspot.is-inline {
  top: auto;
  bottom: 1rem;
  right: 1rem;
}

.viewing-room-connection-hotspot:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(35, 42, 57, 0.14);
}

.viewing-room-connection-hotspot-door {
  width: 2.2rem;
  height: 2.8rem;
  border-radius: 1rem 1rem 0.45rem 0.45rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, #d9d0c2, #c9bea9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 8px 14px rgba(41, 32, 18, 0.12);
}

.viewing-room-connection-hotspot-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.viewing-room-connection-hotspot-copy strong,
.viewing-room-connection-hotspot-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewing-room-connection-hotspot-copy strong {
  font-size: 0.85rem;
}

.viewing-room-connection-hotspot-copy small {
  color: var(--muted);
  font-size: 0.74rem;
}

.viewing-room-selector-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.viewing-room-selector-title {
  color: var(--text);
  font-weight: 600;
}

.viewing-room-selector-copy small {
  color: var(--muted);
  font-size: 0.78rem;
}

.viewing-room-empty-copy {
  margin: 0;
}

.viewing-room-empty-state {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  padding: 0.95rem;
  border: 1px dashed rgba(127, 143, 164, 0.42);
  border-radius: 14px;
  background: #fbfcff;
}

.viewing-room-public-shell {
  min-height: 100vh;
  padding: clamp(1.25rem, 3vw, 2rem);
  background:
    linear-gradient(180deg, rgba(247, 249, 252, 0.96), rgba(241, 244, 248, 0.98)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.88), rgba(236, 240, 246, 0.88));
}

.viewing-room-public-hero,
.viewing-room-public-card {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.viewing-room-public-hero {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.6rem, 4vw, 3rem) 0 1.2rem;
}

.viewing-room-public-hero h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.viewing-room-public-hero .subtitle {
  max-width: 760px;
  font-size: 1rem;
}

.viewing-room-public-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.viewing-room-public-artwork,
.viewing-room-public-card {
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(214, 221, 231, 0.9);
  box-shadow: 0 16px 48px rgba(35, 44, 63, 0.08);
}

.viewing-room-public-card {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
}

.viewing-room-public-mode-note {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.2rem;
}

.viewing-room-public-shell.is-virtual-gallery-wall {
  background:
    linear-gradient(180deg, rgba(244, 239, 232, 0.9), rgba(236, 231, 224, 0.96)),
    radial-gradient(circle at top, rgba(255, 252, 247, 0.8), rgba(227, 219, 209, 0.82));
}

.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-space-artwork:not(.is-focused),
.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-wall-placard.is-previous,
.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-wall-placard.is-next,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-space-artwork:not(.is-focused),
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-wall-placard.is-previous,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-wall-placard.is-next {
  opacity: 0.72;
}

.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-space-artwork.is-focused,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-space-artwork.is-focused {
  z-index: 8;
  transform: translateY(-12px) scale(1.14);
}

.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-space-artwork.is-focused .viewing-room-space-artwork-frame,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-space-artwork.is-focused .viewing-room-space-artwork-frame {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 22px 34px rgba(35, 27, 18, 0.2);
}

.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-perspective-wall.is-active,
.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-spatial-wall.is-active,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-perspective-wall.is-active,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-spatial-wall.is-active {
  transform: translateZ(24px) scale(1.07);
}

.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-perspective-wall.is-active .viewing-room-perspective-wall-face,
.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-spatial-wall.is-active .viewing-room-spatial-wall-face,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-perspective-wall.is-active .viewing-room-perspective-wall-face,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-spatial-wall.is-active .viewing-room-spatial-wall-face {
  transform:
    translateX(calc((50 - var(--focus-artwork-x, 50)) * 0.38%))
    translateY(calc((50 - var(--focus-artwork-y, 50)) * 0.08%));
}

.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-perspective-stage,
.viewing-room-space-shell[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-spatial-stage,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-perspective-stage,
.viewing-room-space-canvas[data-focused-artwork-id]:not([data-focused-artwork-id=""]) .viewing-room-spatial-stage {
  transform: translateY(-6px) scale(1.01);
  transform-origin: center top;
}

.viewing-room-space-focus {
  align-self: center;
  justify-self: center;
  border: 1px solid rgba(92, 110, 145, 0.16);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  background: rgba(255, 255, 255, 0.9);
  color: #2a3950;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(35, 42, 57, 0.12);
}

.viewing-room-space-focus:hover {
  transform: translateY(-1px);
}

.viewing-room-space-focus.is-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.5rem;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(3px);
  cursor: zoom-in;
}

.viewing-room-space-focus.is-overlay:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.08));
}

.viewing-room-space-shell.is-viewer-mode .viewing-room-space-focus.is-overlay,
.viewing-room-space-canvas.is-viewer-mode .viewing-room-space-focus.is-overlay {
  align-items: flex-start;
  padding-top: 0.95rem;
}

.viewing-room-space-focus-copy {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #2a3950;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 20px rgba(35, 42, 57, 0.12);
}

.viewing-room-space-doorway.is-link {
  border: 0;
  background: transparent;
  padding: 0;
}

.viewing-room-public-grid.is-virtual-gallery-wall {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.viewing-room-public-artwork.is-virtual-gallery-wall {
  padding: 1rem;
  background: rgba(255, 251, 245, 0.92);
}

.viewing-room-public-artwork.is-virtual-gallery-wall .viewing-room-public-image {
  border-radius: 14px;
  box-shadow:
    0 0 0 10px rgba(255, 248, 238, 0.88),
    0 0 0 12px rgba(171, 144, 107, 0.28),
    0 16px 32px rgba(55, 43, 30, 0.12);
}

.viewing-room-space-section,
.viewing-room-space-section-head,
.viewing-room-space-controls,
.viewing-room-space-control-card,
.viewing-room-space-workbench,
.viewing-room-space-stage-card,
.viewing-room-space-stage-head,
.viewing-room-furniture-panel,
.viewing-room-space-preview-card,
.viewing-room-space-preview-head {
  display: grid;
  gap: 0.8rem;
}

.viewing-room-space-section,
.viewing-room-space-control-card,
.viewing-room-space-stage-card,
.viewing-room-furniture-panel,
.viewing-room-space-preview-card {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 18px;
  background: #fbfcff;
}

.viewing-room-space-section-head,
.viewing-room-space-stage-head,
.viewing-room-space-preview-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.viewing-room-space-controls,
.viewing-room-space-workbench {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  align-items: start;
}

.viewing-room-space-control-head h4,
.viewing-room-space-stage-head h4,
.viewing-room-furniture-panel h4,
.viewing-room-space-preview-head h3 {
  margin: 0;
}

.viewing-room-room-type-grid,
.viewing-room-wall-color-grid,
.viewing-room-furniture-library,
.viewing-room-furniture-list {
  display: grid;
  gap: 0.7rem;
}

.viewing-room-room-type-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.viewing-room-room-type-card,
.viewing-room-wall-color-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.82rem 0.86rem;
  border: 1px solid rgba(127, 143, 164, 0.2);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.viewing-room-room-type-card,
.viewing-room-wall-color-card,
.viewing-room-floor-style-card,
.viewing-room-display-mode-card {
  position: relative;
}

.viewing-room-room-type-card input,
.viewing-room-wall-color-card input,
.viewing-room-floor-style-card input,
.viewing-room-display-mode-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.viewing-room-room-type-card.is-selected,
.viewing-room-room-type-card:has(input:checked),
.viewing-room-wall-color-card.is-selected,
.viewing-room-wall-color-card:has(input:checked) {
  border-color: #7c9fe8;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
  background: #f5f8ff;
  transform: translateY(-1px);
}

.viewing-room-room-type-copy,
.viewing-room-wall-color-copy {
  display: grid;
  gap: 0.2rem;
}

.viewing-room-room-type-copy small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.viewing-room-room-type-card {
  grid-template-columns: minmax(0, 1fr);
}

.viewing-room-wall-color-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.viewing-room-wall-color-card {
  justify-items: start;
  grid-template-columns: auto minmax(0, 1fr);
}

.viewing-room-wall-color-swatch {
  width: 100%;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--wall-swatch) 92%, white 8%), var(--wall-swatch));
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.viewing-room-space-shell {
  display: grid;
  gap: 0.8rem;
}

.viewing-room-perspective-shell {
  display: grid;
  gap: 0.9rem;
  padding: 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(254, 254, 255, 0.92), rgba(248, 250, 253, 0.96)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0));
  box-shadow: 0 16px 44px rgba(35, 42, 57, 0.08);
}

.viewing-room-perspective-shell[data-editable="true"] {
  touch-action: none;
}

.viewing-room-perspective-stage {
  position: relative;
  min-height: clamp(560px, 62vw, 860px);
  border-radius: 20px;
  overflow: hidden;
  perspective: 1800px;
  transform-style: preserve-3d;
  isolation: isolate;
}

.viewing-room-surface-backdrop {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, color-mix(in srgb, var(--room-wall) 90%, white 10%), var(--room-wall));
}

.viewing-room-surface-ceiling-shadow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 15%;
  background: linear-gradient(180deg, rgba(23, 28, 39, 0.16), rgba(23, 28, 39, 0));
}

.viewing-room-surface-corner-shadow {
  position: absolute;
  top: 0;
  bottom: 34%;
  width: 20%;
  pointer-events: none;
}

.viewing-room-surface-corner-shadow.is-left {
  left: 0;
  background: linear-gradient(90deg, rgba(22, 27, 36, 0.12), rgba(22, 27, 36, 0));
}

.viewing-room-surface-corner-shadow.is-right {
  right: 0;
  background: linear-gradient(270deg, rgba(22, 27, 36, 0.12), rgba(22, 27, 36, 0));
}

.viewing-room-surface-floor-shadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background:
    linear-gradient(180deg, rgba(97, 71, 41, 0), rgba(97, 71, 41, 0.12) 68%, rgba(97, 71, 41, 0.22));
  box-shadow: inset 0 -14px 28px rgba(62, 45, 28, 0.12);
}

.viewing-room-surface-floorboards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2%;
  height: 38%;
  transform-origin: top center;
  transform: perspective(1500px) rotateX(68deg) scaleY(1.16);
  background:
    linear-gradient(180deg, var(--room-floor-shine, rgba(121, 90, 56, 0.12)), rgba(83, 60, 34, 0.03) 14%, rgba(255, 255, 255, 0) 20%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 0 6.8%,
      rgba(82, 60, 34, 0.14) 6.8% 7.05%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 7.05% 13.6%,
      rgba(82, 60, 34, 0.14) 13.6% 13.88%,
      color-mix(in srgb, var(--room-floor-c, #d8b587) 92%, white 8%) 13.88% 21.2%,
      rgba(82, 60, 34, 0.14) 21.2% 21.44%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 93%, white 7%) 21.44% 29.4%,
      rgba(82, 60, 34, 0.14) 29.4% 29.68%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 29.68% 36.1%,
      rgba(82, 60, 34, 0.14) 36.1% 36.36%,
      color-mix(in srgb, var(--room-floor-c, #d8b587) 91%, white 9%) 36.36% 44.5%,
      rgba(82, 60, 34, 0.14) 44.5% 44.76%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 44.76% 52.1%,
      rgba(82, 60, 34, 0.14) 52.1% 52.34%,
      color-mix(in srgb, var(--room-floor-c, #d8b587) 93%, white 7%) 52.34% 60.7%,
      rgba(82, 60, 34, 0.14) 60.7% 60.96%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 60.96% 68.05%,
      rgba(82, 60, 34, 0.14) 68.05% 68.33%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 68.33% 75.6%,
      rgba(82, 60, 34, 0.14) 75.6% 75.88%,
      color-mix(in srgb, var(--room-floor-c, #d8b587) 92%, white 8%) 75.88% 84.3%,
      rgba(82, 60, 34, 0.14) 84.3% 84.56%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 84.56% 92.2%,
      rgba(82, 60, 34, 0.14) 92.2% 92.46%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 92.46% 100%
    );
  box-shadow: inset 0 14px 28px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(66, 45, 20, 0.15);
}

.viewing-room-perspective-panorama {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1800px;
  transform-style: preserve-3d;
}

.viewing-room-perspective-wall {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.45rem;
  transform-style: preserve-3d;
  transition:
    transform 0.38s ease,
    opacity 0.38s ease,
    filter 0.38s ease;
}

.viewing-room-perspective-wall.is-active {
  z-index: 4;
  left: 10%;
  right: 10%;
  top: 6%;
  bottom: 28%;
  transform: translateZ(0) scale(1);
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

.viewing-room-perspective-wall.is-previous,
.viewing-room-perspective-wall.is-next {
  z-index: 1;
  top: 10%;
  bottom: 34%;
  width: 36%;
  opacity: 0.64;
  filter: saturate(0.88) blur(0.08px);
  pointer-events: none;
}

.viewing-room-perspective-wall.is-previous {
  left: -2%;
  right: auto;
  transform: translateX(-20%) translateZ(-180px) rotateY(60deg) scale(0.82);
  transform-origin: right center;
}

.viewing-room-perspective-wall.is-next {
  right: -2%;
  left: auto;
  transform: translateX(20%) translateZ(-180px) rotateY(-60deg) scale(0.82);
  transform-origin: left center;
}

.viewing-room-perspective-wall-face {
  width: min(100%, 1040px);
  display: grid;
  gap: 0.72rem;
  padding: 0.84rem;
  margin: auto;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, color-mix(in srgb, var(--room-wall) 94%, white 6%), var(--room-wall));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 28px rgba(34, 42, 58, 0.08);
}

.viewing-room-perspective-wall-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.viewing-room-perspective-wall-head h4 {
  margin: 0;
}

.viewing-room-perspective-wall-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(41, 52, 69, 0.72);
  font-weight: 700;
}

.viewing-room-perspective-wall-body {
  position: relative;
  min-height: clamp(300px, 32vw, 448px);
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, color-mix(in srgb, var(--room-wall) 90%, white 10%), var(--room-wall));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -18px 24px rgba(29, 23, 18, 0.08);
}

.viewing-room-perspective-wall-body.is-empty {
  display: grid;
  place-items: center;
}

.viewing-room-perspective-empty {
  margin: 0;
  max-width: 26rem;
  text-align: center;
  color: rgba(40, 50, 67, 0.76);
  font-size: 0.95rem;
}

.viewing-room-node-map {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.viewing-room-node-spot {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  display: grid;
  gap: 0.18rem;
  justify-items: center;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  padding: 0;
  color: #243042;
  cursor: pointer;
  pointer-events: auto;
}

.viewing-room-node-spot-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(64, 81, 109, 0.4);
  box-shadow: 0 6px 14px rgba(28, 35, 46, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.viewing-room-node-spot-label {
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  font-size: 0.68rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(28, 35, 46, 0.08);
}

.viewing-room-node-spot.is-active .viewing-room-node-spot-dot {
  transform: scale(1.2);
  border-color: #5076d8;
  background: #eef3ff;
  box-shadow: 0 0 0 6px rgba(80, 118, 216, 0.12), 0 8px 16px rgba(29, 38, 62, 0.16);
}

.viewing-room-node-map-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 0.72rem;
  box-shadow: 0 6px 16px rgba(28, 35, 46, 0.08);
}

.viewing-room-proportion-cues {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.viewing-room-proportion-cue {
  position: absolute;
  left: var(--cue-x);
  top: var(--cue-y);
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  gap: 0.14rem;
  opacity: 0.56;
  filter: saturate(0.92);
}

.viewing-room-proportion-cue-figure {
  position: relative;
  display: grid;
  justify-items: center;
  padding-bottom: 0.5rem;
}

.viewing-room-proportion-cue-shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--cue-shadow-width, 72px);
  height: var(--cue-shadow-height, 14px);
  transform: translate(-50%, 58%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(25, 21, 16, 0.24) 0, rgba(25, 21, 16, 0.14) 34%, rgba(25, 21, 16, 0.05) 64%, rgba(25, 21, 16, 0) 100%);
  filter: blur(2px);
  opacity: 0.84;
}

.viewing-room-proportion-cue .viewing-room-furniture-object {
  width: var(--cue-width, 60px);
  height: var(--cue-height, 72px);
  transform-origin: center bottom;
  filter: saturate(0.92) brightness(1.02);
  box-shadow: 0 14px 20px rgba(24, 22, 18, 0.14);
}

.viewing-room-proportion-cue .viewing-room-furniture-object.is-scale-cue {
  opacity: 0.95;
  filter: saturate(0.88) brightness(1.03);
}

.viewing-room-proportion-cue-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(54, 66, 85, 0.88);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(32, 38, 49, 0.08);
}

.viewing-room-space-artwork-stack {
  width: 100%;
  display: grid;
  gap: 0.42rem;
  justify-items: center;
}

.viewing-room-space-artwork-stack.is-label-right {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.34rem;
}

.viewing-room-space-artwork-stack.is-label-right .viewing-room-wall-placard {
  width: min(118px, 24vw);
}

.viewing-room-wall-placard {
  width: min(120px, calc(var(--item-width) + 4px));
  min-height: 90px;
  display: grid;
  gap: 0.16rem;
  box-sizing: border-box;
  padding: 0.52rem 0.54rem 0.46rem 0.54rem;
  border: 1px solid rgba(88, 96, 111, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #2a313c;
  box-shadow: 0 6px 12px rgba(31, 37, 49, 0.07);
  font-family: Arial, sans-serif;
}

.viewing-room-wall-placard.is-right {
  align-self: center;
  width: min(118px, 24vw);
}

.viewing-room-wall-placard.is-previous,
.viewing-room-wall-placard.is-next {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 18px rgba(31, 37, 49, 0.08);
}

.viewing-room-wall-placard-pin {
  width: 10px;
  height: 2px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(93, 103, 121, 0.42);
}

.viewing-room-wall-placard-copy {
  display: grid;
  gap: 0.28rem;
  padding-left: 0.24rem;
  padding-top: 0.2rem;
  align-content: start;
}

.viewing-room-wall-placard-line,
.viewing-room-wall-placard-artist,
.viewing-room-wall-placard-title,
.viewing-room-wall-placard-meta,
.viewing-room-wall-placard-price {
  margin: 0;
  font-size: 0.6rem;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
  letter-spacing: 0;
  color: rgba(52, 61, 75, 0.82);
}

.viewing-room-wall-placard-line.is-title,
.viewing-room-wall-placard-title {
  font-weight: 600;
}

.viewing-room-wall-placard-line.is-price,
.viewing-room-wall-placard-price {
  font-weight: 600;
}

.viewing-room-space-artwork {
  width: var(--item-width);
}

.viewing-room-space-artwork-frame {
  position: relative;
  width: 100%;
  height: var(--item-height);
  padding: 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 251, 245, 0.96), rgba(247, 240, 231, 0.96));
  box-shadow:
    0 0 0 1px rgba(170, 149, 119, 0.28),
    0 14px 22px rgba(35, 27, 18, 0.16);
}
.viewing-room-spatial-shell {
  display: grid;
  gap: 0.9rem;
  padding: 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(254, 254, 255, 0.92), rgba(248, 250, 253, 0.96)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  box-shadow: 0 16px 44px rgba(35, 42, 57, 0.08);
}

.viewing-room-spatial-shell[data-editable="true"] {
  touch-action: none;
}

.viewing-room-space-section .viewing-room-perspective-shell,
.viewing-room-space-section .viewing-room-spatial-shell {
  min-height: clamp(620px, 76vh, 980px);
}

.viewing-room-spatial-stage {
  display: grid;
  gap: 0.85rem;
}

.viewing-room-spatial-panorama {
  position: relative;
  min-height: clamp(440px, 52vw, 760px);
  perspective: 1600px;
  transform-style: preserve-3d;
  isolation: isolate;
}

.viewing-room-spatial-wall {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.35rem;
  transform-style: preserve-3d;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

.viewing-room-spatial-wall.is-active {
  z-index: 3;
  transform: translateZ(0) scale(1);
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

.viewing-room-spatial-wall.is-previous,
.viewing-room-spatial-wall.is-next {
  z-index: 1;
  opacity: 0.6;
  filter: saturate(0.88) blur(0.1px);
  pointer-events: none;
}

.viewing-room-spatial-wall.is-previous {
  transform: translateX(-19%) translateZ(-120px) rotateY(56deg) scale(0.84);
  transform-origin: right center;
}

.viewing-room-spatial-wall.is-next {
  transform: translateX(19%) translateZ(-120px) rotateY(-56deg) scale(0.84);
  transform-origin: left center;
}

.viewing-room-spatial-wall-face {
  width: min(100%, 1020px);
  display: grid;
  gap: 0.7rem;
  padding: 0.8rem;
  margin: auto;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--room-wall) 94%, white 6%), var(--room-wall));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 28px rgba(34, 42, 58, 0.08);
}

.viewing-room-spatial-wall-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.viewing-room-spatial-wall-head h4 {
  margin: 0;
}

.viewing-room-spatial-wall-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(41, 52, 69, 0.7);
  font-weight: 700;
}

.viewing-room-spatial-wall-body {
  position: relative;
  min-height: clamp(280px, 30vw, 420px);
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    linear-gradient(180deg, color-mix(in srgb, var(--room-wall) 90%, white 10%), var(--room-wall));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.viewing-room-spatial-wall-body.is-empty {
  display: grid;
  place-items: center;
  min-height: clamp(240px, 24vw, 340px);
}

.viewing-room-spatial-empty {
  margin: 0;
  max-width: 26rem;
  text-align: center;
  color: rgba(40, 50, 67, 0.78);
  font-size: 0.95rem;
}

.viewing-room-spatial-floorplane {
  position: relative;
  min-height: clamp(190px, 22vw, 290px);
  border-radius: 20px 20px 24px 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(126, 101, 70, 0.18), rgba(83, 60, 34, 0.08) 22%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, rgba(247, 238, 225, 0.48), rgba(214, 179, 132, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -18px 26px rgba(110, 76, 45, 0.14);
}

.viewing-room-spatial-floorboards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform-origin: top center;
  transform: perspective(1400px) rotateX(66deg) scaleY(1.18);
  background:
    linear-gradient(180deg, var(--room-floor-shine, rgba(126, 101, 70, 0.12)), rgba(83, 60, 34, 0.02) 18%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 0 7.1%,
      rgba(82, 60, 34, 0.14) 7.1% 7.36%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 7.36% 14.2%,
      rgba(82, 60, 34, 0.14) 14.2% 14.46%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 14.46% 21.8%,
      rgba(82, 60, 34, 0.14) 21.8% 22.06%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 93%, white 7%) 22.06% 29.7%,
      rgba(82, 60, 34, 0.14) 29.7% 29.96%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 29.96% 36.55%,
      rgba(82, 60, 34, 0.14) 36.55% 36.82%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 91%, white 9%) 36.82% 45.1%,
      rgba(82, 60, 34, 0.14) 45.1% 45.36%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 45.36% 52.8%,
      rgba(82, 60, 34, 0.14) 52.8% 53.06%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 93%, white 7%) 53.06% 61.2%,
      rgba(82, 60, 34, 0.14) 61.2% 61.46%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 61.46% 68.4%,
      rgba(82, 60, 34, 0.14) 68.4% 68.68%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 68.68% 75.9%,
      rgba(82, 60, 34, 0.14) 75.9% 76.18%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 76.18% 84.7%,
      rgba(82, 60, 34, 0.14) 84.7% 84.98%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 84.98% 92.4%,
      rgba(82, 60, 34, 0.14) 92.4% 92.66%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 92.66% 100%
    );
  box-shadow: inset 0 12px 24px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(66, 45, 20, 0.12);
}

.viewing-room-spatial-furniture-layer {
  position: absolute;
  inset: 0;
}

.viewing-room-spatial-furniture-layer .viewing-room-space-item {
  z-index: 3;
}

.viewing-room-space-canvas {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, #f1ece5 0 67%, #d7c0a2 67% 100%);
  border: 1px solid rgba(114, 100, 82, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 18px 36px rgba(33, 39, 52, 0.12);
}

.viewing-room-space-canvas[data-editable="true"] {
  touch-action: none;
}

.viewing-room-space-architecture,
.viewing-room-space-layer {
  position: absolute;
  inset: 0;
}

.viewing-room-space-panel,
.viewing-room-space-doorway,
.viewing-room-space-floorboards {
  position: absolute;
  display: block;
}

.viewing-room-space-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--room-wall) 94%, white 6%), var(--room-wall));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 -16px 30px rgba(0, 0, 0, 0.03);
}

.viewing-room-space-panel.panel-main {
  left: 8%;
  right: 8%;
  top: 6%;
  bottom: 33%;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom: 8px solid var(--room-wall-trim);
}

.viewing-room-space-panel.panel-left,
.viewing-room-space-panel.panel-right,
.viewing-room-space-panel.panel-secondary-left,
.viewing-room-space-panel.panel-secondary-right {
  top: 8%;
  bottom: 33%;
  width: 17%;
  display: none;
  border-bottom: 8px solid var(--room-wall-trim);
}

.viewing-room-space-panel.panel-left,
.viewing-room-space-panel.panel-secondary-left {
  left: 0;
  transform: perspective(420px) rotateY(22deg);
  transform-origin: left center;
  border-top-right-radius: 12px;
}

.viewing-room-space-panel.panel-right,
.viewing-room-space-panel.panel-secondary-right {
  right: 0;
  transform: perspective(420px) rotateY(-22deg);
  transform-origin: right center;
  border-top-left-radius: 12px;
}

.viewing-room-space-canvas[data-room-type="booth-style"] .panel-left,
.viewing-room-space-canvas[data-room-type="booth-style"] .panel-right,
.viewing-room-space-canvas[data-room-type="small-room"] .panel-left,
.viewing-room-space-canvas[data-room-type="small-room"] .panel-right,
.viewing-room-space-canvas[data-room-type="large-room"] .panel-left,
.viewing-room-space-canvas[data-room-type="large-room"] .panel-right,
.viewing-room-space-canvas[data-room-type="interconnecting-room-layout"] .panel-left,
.viewing-room-space-canvas[data-room-type="interconnecting-room-layout"] .panel-right,
.viewing-room-space-canvas[data-room-type="interconnecting-room-layout"] .panel-secondary-left,
.viewing-room-space-canvas[data-room-type="interconnecting-room-layout"] .panel-secondary-right {
  display: block;
}

.viewing-room-space-canvas[data-room-type="small-room"] .panel-main {
  left: 16%;
  right: 16%;
}

.viewing-room-space-canvas[data-room-type="large-room"] .panel-main {
  left: 5%;
  right: 5%;
}

.viewing-room-space-canvas[data-room-type="interconnecting-room-layout"] .panel-main {
  left: 12%;
  right: 12%;
}

.viewing-room-space-canvas[data-room-type="interconnecting-room-layout"] .panel-secondary-left {
  left: -4%;
}

.viewing-room-space-canvas[data-room-type="interconnecting-room-layout"] .panel-secondary-right {
  right: -4%;
}

.viewing-room-space-doorway {
  left: 50%;
  bottom: 33%;
  width: 12%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(224, 216, 204, 0.92), rgba(197, 186, 171, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  display: none;
}

.viewing-room-space-canvas[data-room-type="interconnecting-room-layout"] .viewing-room-space-doorway {
  display: block;
}

.viewing-room-space-floorboards {
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 18%, rgba(88, 65, 42, 0.08) 68%, rgba(52, 35, 21, 0.1) 100%),
    radial-gradient(circle at 50% 0%, var(--room-floor-shine, rgba(126, 101, 70, 0.16)), rgba(126, 101, 70, 0) 44%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 0 6.7%,
      rgba(82, 60, 34, 0.14) 6.7% 6.95%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 6.95% 13.55%,
      rgba(82, 60, 34, 0.14) 13.55% 13.82%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 13.82% 21.15%,
      rgba(82, 60, 34, 0.14) 21.15% 21.42%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 93%, white 7%) 21.42% 29.25%,
      rgba(82, 60, 34, 0.14) 29.25% 29.52%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 29.52% 35.95%,
      rgba(82, 60, 34, 0.14) 35.95% 36.22%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 91%, white 9%) 36.22% 44.45%,
      rgba(82, 60, 34, 0.14) 44.45% 44.72%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 44.72% 52.1%,
      rgba(82, 60, 34, 0.14) 52.1% 52.36%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 93%, white 7%) 52.36% 60.75%,
      rgba(82, 60, 34, 0.14) 60.75% 61.02%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 61.02% 68.15%,
      rgba(82, 60, 34, 0.14) 68.15% 68.43%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 68.43% 75.5%,
      rgba(82, 60, 34, 0.14) 75.5% 75.78%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 75.78% 84.25%,
      rgba(82, 60, 34, 0.14) 84.25% 84.52%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 84.52% 92.1%,
      rgba(82, 60, 34, 0.14) 92.1% 92.38%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 92.38% 100%
  );
  box-shadow: inset 0 12px 24px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(66, 45, 20, 0.14);
}

:is(.viewing-room-space-shell, .viewing-room-spatial-shell, .viewing-room-perspective-shell)[data-floor-width="wide"] :is(.viewing-room-space-floorboards, .viewing-room-spatial-floorboards, .viewing-room-surface-floorboards) {
  background:
    linear-gradient(180deg, var(--room-floor-shine, rgba(126, 101, 70, 0.14)), rgba(83, 60, 34, 0.02) 16%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 0 11.2%,
      rgba(82, 60, 34, 0.14) 11.2% 11.5%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 11.5% 23.9%,
      rgba(82, 60, 34, 0.14) 23.9% 24.2%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 24.2% 38.5%,
      rgba(82, 60, 34, 0.14) 38.5% 38.82%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 93%, white 7%) 38.82% 53.4%,
      rgba(82, 60, 34, 0.14) 53.4% 53.72%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 91%, white 9%) 53.72% 68.8%,
      rgba(82, 60, 34, 0.14) 68.8% 69.12%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 69.12% 84.6%,
      rgba(82, 60, 34, 0.14) 84.6% 84.92%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 84.92% 100%
    );
}

:is(.viewing-room-space-shell, .viewing-room-spatial-shell, .viewing-room-perspective-shell)[data-floor-width="thin"] :is(.viewing-room-space-floorboards, .viewing-room-spatial-floorboards, .viewing-room-surface-floorboards) {
  background:
    linear-gradient(180deg, var(--room-floor-shine, rgba(126, 101, 70, 0.12)), rgba(83, 60, 34, 0.02) 18%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 0 4.8%,
      rgba(82, 60, 34, 0.14) 4.8% 5.02%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 5.02% 9.55%,
      rgba(82, 60, 34, 0.14) 9.55% 9.78%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 9.78% 14.7%,
      rgba(82, 60, 34, 0.14) 14.7% 14.92%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 93%, white 7%) 14.92% 20.1%,
      rgba(82, 60, 34, 0.14) 20.1% 20.34%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 20.34% 24.85%,
      rgba(82, 60, 34, 0.14) 24.85% 25.08%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 91%, white 9%) 25.08% 30.35%,
      rgba(82, 60, 34, 0.14) 30.35% 30.58%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 30.58% 35.4%,
      rgba(82, 60, 34, 0.14) 35.4% 35.62%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 93%, white 7%) 35.62% 41.05%,
      rgba(82, 60, 34, 0.14) 41.05% 41.28%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 41.28% 46.1%,
      rgba(82, 60, 34, 0.14) 46.1% 46.34%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 46.34% 51.15%,
      rgba(82, 60, 34, 0.14) 51.15% 51.38%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 51.38% 56.55%,
      rgba(82, 60, 34, 0.14) 56.55% 56.78%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 56.78% 61.45%,
      rgba(82, 60, 34, 0.14) 61.45% 61.68%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 61.68% 66.9%,
      rgba(82, 60, 34, 0.14) 66.9% 67.12%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 91%, white 9%) 67.12% 72.45%,
      rgba(82, 60, 34, 0.14) 72.45% 72.68%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 72.68% 77.3%,
      rgba(82, 60, 34, 0.14) 77.3% 77.52%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 93%, white 7%) 77.52% 82.4%,
      rgba(82, 60, 34, 0.14) 82.4% 82.62%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 82.62% 88.15%,
      rgba(82, 60, 34, 0.14) 88.15% 88.38%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 88.38% 93.25%,
      rgba(82, 60, 34, 0.14) 93.25% 93.48%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 93.48% 100%
    );
}

:is(.viewing-room-space-shell, .viewing-room-spatial-shell, .viewing-room-perspective-shell)[data-floor-width="mixed"] :is(.viewing-room-space-floorboards, .viewing-room-spatial-floorboards, .viewing-room-surface-floorboards) {
  background:
    linear-gradient(180deg, var(--room-floor-shine, rgba(126, 101, 70, 0.14)), rgba(83, 60, 34, 0.02) 18%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 0 8.1%,
      rgba(82, 60, 34, 0.14) 8.1% 8.34%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 8.34% 14.05%,
      rgba(82, 60, 34, 0.14) 14.05% 14.28%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 14.28% 24.6%,
      rgba(82, 60, 34, 0.14) 24.6% 24.88%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 93%, white 7%) 24.88% 30.15%,
      rgba(82, 60, 34, 0.14) 30.15% 30.38%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 30.38% 38.45%,
      rgba(82, 60, 34, 0.14) 38.45% 38.72%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 91%, white 9%) 38.72% 45.1%,
      rgba(82, 60, 34, 0.14) 45.1% 45.34%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 45.34% 57.05%,
      rgba(82, 60, 34, 0.14) 57.05% 57.34%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 93%, white 7%) 57.34% 63.45%,
      rgba(82, 60, 34, 0.14) 63.45% 63.7%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 63.7% 72.9%,
      rgba(82, 60, 34, 0.14) 72.9% 73.18%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 91%, white 9%) 73.18% 79.35%,
      rgba(82, 60, 34, 0.14) 79.35% 79.6%,
      color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 79.6% 88.55%,
      rgba(82, 60, 34, 0.14) 88.55% 88.82%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 95%, white 5%) 88.82% 95.1%,
      rgba(82, 60, 34, 0.14) 95.1% 95.34%,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 95.34% 100%
    );
}

:is(.viewing-room-space-shell, .viewing-room-spatial-shell, .viewing-room-perspective-shell)[data-floor-pattern="parquet"] :is(.viewing-room-space-floorboards, .viewing-room-spatial-floorboards, .viewing-room-surface-floorboards) {
  background:
    linear-gradient(180deg, var(--room-floor-shine, rgba(126, 101, 70, 0.16)), rgba(83, 60, 34, 0.02) 18%, rgba(255, 255, 255, 0) 24%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1.2%, rgba(255, 255, 255, 0) 1.2% 12.2%, rgba(61, 40, 22, 0.1) 12.2% 12.7%, rgba(255, 255, 255, 0) 12.7% 24.7%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1.2%, rgba(255, 255, 255, 0) 1.2% 12.2%, rgba(61, 40, 22, 0.08) 12.2% 12.7%, rgba(255, 255, 255, 0) 12.7% 24.7%),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 0,
      color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 12.2%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 12.2%,
      color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 24.7%
    );
}

:is(.viewing-room-space-shell, .viewing-room-spatial-shell, .viewing-room-perspective-shell)[data-floor-pattern="chevron"] :is(.viewing-room-space-floorboards, .viewing-room-spatial-floorboards, .viewing-room-surface-floorboards) {
  background:
    linear-gradient(180deg, var(--room-floor-shine, rgba(126, 101, 70, 0.14)), rgba(83, 60, 34, 0.02) 18%, rgba(255, 255, 255, 0) 24%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--room-floor-a, #caa777) 92%, white 8%) 0 2.8%, color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 2.8% 5.6%, rgba(82, 60, 34, 0.12) 5.6% 5.9%, rgba(255, 255, 255, 0) 5.9% 11.2%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--room-floor-c, #d7b384) 92%, white 8%) 0 2.8%, color-mix(in srgb, var(--room-floor-b, #b99363) 94%, white 6%) 2.8% 5.6%, rgba(82, 60, 34, 0.1) 5.6% 5.9%, rgba(255, 255, 255, 0) 5.9% 11.2%);
}

.viewing-room-space-layer {
  pointer-events: none;
}

.viewing-room-space-layer > * {
  pointer-events: auto;
}

.viewing-room-space-item {
  position: absolute;
  left: var(--item-x);
  top: var(--item-y);
  transform: translate(-50%, -50%);
  user-select: none;
}

.viewing-room-space-item.is-editable {
  cursor: grab;
}

.viewing-room-space-item.is-dragging,
.viewing-room-space-canvas.is-dragging .viewing-room-space-item.is-dragging {
  cursor: grabbing;
  z-index: 8;
}

.viewing-room-space-artwork {
  width: var(--item-width);
}

.viewing-room-space-artwork-frame {
  position: relative;
  width: 100%;
  height: var(--item-height);
  padding: 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 251, 245, 0.96), rgba(247, 240, 231, 0.96));
  box-shadow:
    0 0 0 1px rgba(170, 149, 119, 0.28),
    0 14px 22px rgba(35, 27, 18, 0.16);
}

.viewing-room-space-artwork-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  background: #edf1f7;
}

.viewing-room-space-artwork-image.placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  text-align: center;
  padding: 0.55rem;
  color: #6a5644;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(180deg, #efe5d8, #e2d2c2);
}

.viewing-room-space-artwork-media-warning {
  position: absolute;
  left: 0.72rem;
  top: 0.72rem;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 247, 236, 0.94);
  color: #8a4d1f;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 14px rgba(35, 27, 18, 0.08);
}

.viewing-room-space-caption {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.45rem);
  transform: translateX(-50%);
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #364255;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(32, 38, 49, 0.08);
}

.viewing-room-space-furniture {
  width: var(--item-width);
  height: var(--item-height);
}

.viewing-room-space-remove {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(34, 39, 47, 0.78);
  color: #fff;
  cursor: pointer;
}

.viewing-room-furniture-object {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(125, 95, 69, 0.9), rgba(93, 67, 45, 0.94));
  box-shadow: 0 16px 22px rgba(45, 34, 24, 0.16);
}

.viewing-room-furniture-object::before,
.viewing-room-furniture-object::after {
  content: "";
  position: absolute;
  display: block;
}

.viewing-room-furniture-object[data-furniture-type="bench"] {
  border-radius: 16px 16px 12px 12px;
  background:
    linear-gradient(180deg, #cbb693 0 24%, #8e6c47 24% 100%);
}

.viewing-room-furniture-object[data-furniture-type="bench"]::before {
  left: 12%;
  right: 12%;
  top: 24%;
  height: 26%;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}

.viewing-room-furniture-object[data-furniture-type="bench"]::after {
  left: 18%;
  right: 18%;
  bottom: 10%;
  height: 12%;
  border-radius: 999px;
  background: rgba(62, 45, 27, 0.28);
}

.viewing-room-furniture-object[data-furniture-type="plant"] {
  border-radius: 28px 28px 10px 10px;
  background:
    radial-gradient(circle at 50% 24%, #76906c 0 26%, #5a704f 27% 52%, transparent 53%),
    linear-gradient(180deg, transparent 0 56%, #6c4f34 56% 100%);
}

.viewing-room-furniture-object[data-furniture-type="simple-chair"],
.viewing-room-furniture-object[data-furniture-type="lounge-chair"] {
  border-radius: 28px 28px 20px 20px;
  background: linear-gradient(180deg, #cab39a 0 42%, #8b6b4a 42% 100%);
}

.viewing-room-furniture-object[data-furniture-type="lounge-chair"] {
  background: linear-gradient(180deg, #c8a578 0 40%, #80583c 40% 100%);
}

.viewing-room-furniture-object[data-furniture-type="chesterfield-sofa"] {
  border-radius: 26px 26px 18px 18px;
  background: linear-gradient(180deg, #7c2f24 0 48%, #542018 48% 100%);
}

.viewing-room-furniture-object[data-furniture-type="coffee-table"],
.viewing-room-furniture-object[data-furniture-type="side-table"] {
  border-radius: 16px;
  background: linear-gradient(180deg, #b48352 0 24%, #8a623d 24% 100%);
}

.viewing-room-furniture-label {
  position: absolute;
  left: 50%;
  bottom: -1.45rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  color: #425063;
}

.viewing-room-furniture-panel {
  align-content: start;
}

.viewing-room-furniture-library {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.viewing-room-furniture-add {
  height: 100%;
  justify-items: start;
  text-align: left;
}

.viewing-room-furniture-add small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.viewing-room-furniture-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.78rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 14px;
  background: #fff;
}

.viewing-room-public-space-wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.viewing-room-public-space-wrap .viewing-room-space-shell,
.viewing-room-space-preview-card .viewing-room-space-shell {
  gap: 0;
}

.viewing-room-space-preview-card .viewing-room-spatial-shell,
.viewing-room-public-space-wrap .viewing-room-spatial-shell,
.viewing-room-space-preview-card .viewing-room-perspective-shell,
.viewing-room-public-space-wrap .viewing-room-perspective-shell {
  gap: 0.9rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.viewing-room-public-space-wrap .viewing-room-space-canvas {
  min-height: clamp(420px, 58vw, 720px);
}

.event-contact-log-shell,
.event-contact-context-banner {
  display: grid;
  gap: 0.9rem;
}

.event-contact-log-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.event-contact-log-grid > .full,
.event-contact-log-grid > p.full,
.event-contact-log-hint {
  grid-column: 1 / -1;
}

.event-contact-log-hint {
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(127, 143, 164, 0.16);
  border-radius: 14px;
  background: #fbfcff;
}

.event-contact-log-hint p,
.event-contact-context-meta .subtitle {
  margin: 0;
}

.event-contact-context-copy {
  display: grid;
  gap: 0.28rem;
}

.event-contact-context-copy h3 {
  margin: 0;
}

.event-contact-context-meta {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
}

.viewing-room-public-password input {
  max-width: 360px;
}

.viewing-room-public-error {
  margin: 0;
  color: #b5454d;
  font-size: 0.92rem;
}

@media (max-width: 980px) {
  .viewing-room-layout,
  .viewing-room-editor-hero,
  .viewing-room-editor-overview,
  .gallery-exhibition-meta-grid,
  .viewing-room-space-controls,
  .viewing-room-space-workbench,
  .event-contact-log-grid {
    grid-template-columns: 1fr;
  }

  .viewing-room-card-top,
  .viewing-room-detail-head,
  .viewing-room-editor-head,
  .viewing-room-editor-artworks-head,
  .viewing-room-selector-head,
  .viewing-room-detail-share,
  .viewing-room-navigation-copy,
  .viewing-room-space-section-head,
  .viewing-room-space-stage-head,
  .viewing-room-space-preview-head,
  .event-contact-log-head,
  .event-contact-context-banner {
    justify-content: flex-start;
  }

  .viewing-room-navigation-controls {
    justify-content: flex-start;
  }

  .viewing-room-spatial-panorama {
    min-height: clamp(380px, 84vw, 620px);
  }

  .viewing-room-gallery-view-stage,
  .viewing-room-gallery-view-stage .gallery-3d-viewer {
    min-height: 520px;
    height: min(72vh, 760px);
  }

  .gallery-3d-editor-toolbar-grid {
    grid-template-columns: 1fr;
  }

  .gallery-3d-editor-stage,
  .gallery-3d-editor-stage .gallery-3d-viewer {
    min-height: 520px;
    height: min(72vh, 760px);
  }
}

@media (max-width: 640px) {
  .viewing-room-gallery-view-stage,
  .viewing-room-gallery-view-stage .gallery-3d-viewer {
    min-height: 460px;
    height: 460px;
  }
}

.artwork-label-builder {
  display: grid;
  gap: 0.9rem;
}

.artwork-label-builder-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: 1rem;
  align-items: start;
}

.artwork-label-options-panel,
.artwork-label-selection-panel {
  display: grid;
  gap: 0.7rem;
}

.artwork-label-options-panel {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
  align-content: start;
}

.artwork-label-options-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.artwork-label-helper,
.artwork-label-empty {
  margin: 0;
}

.artwork-label-selection-grid {
  max-height: 420px;
  overflow: auto;
  padding-right: 0.2rem;
}

.artwork-label-option-row {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  padding: 0.62rem 0.68rem;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.artwork-label-option-row input {
  accent-color: #6f91e6;
}

.artwork-label-option-row:has(input:checked) {
  border-color: #7c9fe8;
  background: #f2f6ff;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
}

.artwork-label-option-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.artwork-label-option-title {
  color: var(--text);
  font-weight: 600;
}

.artwork-label-option-copy small {
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 980px) {
  .artwork-label-builder-grid {
    grid-template-columns: 1fr;
  }

  .artwork-label-option-row {
    grid-template-columns: 1fr;
  }
}

.catalogue-builder {
  display: grid;
  gap: 1rem;
}

.catalogue-builder-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 1rem;
  align-items: start;
}

.catalogue-config-panel,
.catalogue-selector-panel,
.catalogue-selector-column,
.catalogue-config-group {
  display: grid;
  gap: 0.75rem;
}

.catalogue-config-panel {
  align-content: start;
}

.catalogue-config-group {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
}

.catalogue-config-group h4,
.catalogue-selector-head h4 {
  margin: 0;
}

.catalogue-template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.catalogue-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.45rem 1.1rem;
}

.catalogue-config-note,
.catalogue-empty-state {
  margin: 0;
}

.catalogue-selector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.catalogue-selector-column {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fff;
}

.catalogue-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* All three report-builder search rows share one layout so they look uniform
   and never overlap: the search input takes its own full-width row and the
   Search/Clear buttons sit beneath it, at any panel width. */
.catalogue-search-row,
.exhibition-search-row,
.location-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: end;
}
.catalogue-search-row > label.full,
.exhibition-search-row > label.full,
.location-search-row > label.full {
  flex: 1 1 100%;
  min-width: 0;
}
.catalogue-search-row input[type="search"],
.exhibition-search-row input[type="search"],
.location-search-row input[type="search"] {
  width: 100%;
  min-width: 0;
}
.catalogue-search-row > .btn,
.exhibition-search-row > .btn,
.location-search-row > .btn {
  flex: 0 0 auto;
}

.catalogue-selector-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.catalogue-available-list,
.catalogue-selected-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 0.15rem;
}

.catalogue-artwork-row {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  padding: 0.68rem 0.72rem;
  border-radius: 12px;
  background: #fbfcff;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.catalogue-artwork-row input {
  accent-color: #6f91e6;
}

.catalogue-artwork-row:has(input:checked) {
  border-color: #7c9fe8;
  background: #f2f6ff;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
}

.catalogue-artwork-row-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.catalogue-artwork-row-title {
  color: var(--text);
  font-weight: 600;
}

.catalogue-artwork-row-copy small {
  color: var(--muted);
  font-size: 0.78rem;
}

.catalogue-selected-list {
  display: grid;
  gap: 0.6rem;
}

.catalogue-selected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.68rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.catalogue-selected-copy {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.location-builder,
.exhibition-builder {
  display: grid;
  gap: 1rem;
}

.location-builder-grid,
.exhibition-builder-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 1rem;
  align-items: start;
}

.location-config-panel,
.exhibition-config-panel,
.location-selector-panel,
.exhibition-selector-panel,
.location-config-group,
.exhibition-config-group {
  display: grid;
  gap: 0.75rem;
}

.location-selector-panel,
.exhibition-selector-panel {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fff;
}

.location-config-panel,
.exhibition-config-panel {
  align-content: start;
}

.location-config-group,
.exhibition-config-group {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
}

.location-config-group h4,
.exhibition-config-group h4,
.location-selector-head h4,
.exhibition-selector-head h4 {
  margin: 0;
}

.location-selector-head,
.exhibition-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.location-search-row,
.exhibition-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  align-items: end;
}

.location-selector-actions,
.exhibition-selector-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.location-location-list,
.location-selected-list,
.exhibition-available-list,
.exhibition-selected-list {
  display: grid;
  gap: 0.6rem;
  max-height: 520px;
  overflow: auto;
  padding-right: 0.15rem;
}

.location-selected-stack,
.exhibition-selected-stack {
  display: grid;
  gap: 0.6rem;
}

.location-report-location-row {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.location-report-location-marker {
  display: grid;
  place-items: center;
  background: #eef3ff;
  color: #5573c1;
  font-weight: 700;
  text-transform: uppercase;
}

.location-report-selected-row {
  align-items: center;
}

.exhibition-report-event-summary {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
}

.exhibition-report-artwork-row {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.exhibition-report-artwork-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  background: #f4f6fb;
}

.exhibition-report-artwork-thumb.placeholder {
  display: inline-block;
  background: #eef2f8;
}

.exhibition-report-artwork-copy {
  gap: 0.12rem;
}

.exhibition-report-selected-row {
  align-items: center;
}

.exhibition-toggle-note {
  margin-top: -0.2rem;
}

.portfolio-builder,
.tear-sheet-builder {
  display: grid;
  gap: 1rem;
}

.portfolio-builder-grid,
.tear-sheet-builder-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 1rem;
  align-items: start;
}

.portfolio-config-panel,
.tear-sheet-config-panel,
.portfolio-selector-panel,
.tear-sheet-selector-panel,
.portfolio-selector-column,
.tear-sheet-selector-column,
.portfolio-config-group,
.tear-sheet-config-group {
  display: grid;
  gap: 0.75rem;
}

.portfolio-config-panel,
.tear-sheet-config-panel {
  align-content: start;
}

.portfolio-config-group,
.tear-sheet-config-group {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fbfcff;
}

.portfolio-config-group h4,
.tear-sheet-config-group h4,
.portfolio-selector-head h4,
.tear-sheet-selector-head h4 {
  margin: 0;
}

.portfolio-template-row,
.tear-sheet-template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.report-selection-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.45rem 1.1rem;
}

/* Balance the report builder forms: text inputs and selects fill their column
   instead of sitting at a fixed width with empty space beside them. */
.catalogue-config-group label > input[type="text"],
.catalogue-config-group label > select,
.portfolio-config-group label > input[type="text"],
.portfolio-config-group label > select,
.tear-sheet-config-group label > input[type="text"],
.tear-sheet-config-group label > select {
  width: 100%;
  box-sizing: border-box;
}

.portfolio-config-note,
.tear-sheet-config-note,
.portfolio-empty-state,
.tear-sheet-empty-state {
  margin: 0;
}

.portfolio-selector-grid,
.tear-sheet-selector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.portfolio-selector-column,
.tear-sheet-selector-column {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 16px;
  background: #fff;
}

.portfolio-selector-head,
.tear-sheet-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.portfolio-search-row,
.tear-sheet-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.55rem;
  align-items: end;
}

.portfolio-selector-actions,
.tear-sheet-selector-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.report-selection-list {
  display: grid;
  gap: 0.6rem;
  max-height: 520px;
  overflow: auto;
  padding-right: 0.15rem;
}

.report-selection-artwork-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.68rem 0.72rem;
  border: 1px solid rgba(127, 143, 164, 0.18);
  border-radius: 12px;
  background: #fbfcff;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.report-selection-artwork-row input,
.report-selection-toggle-grid input {
  accent-color: #6f91e6;
}

.report-selection-artwork-row:has(input:checked) {
  border-color: #7c9fe8;
  background: #f2f6ff;
  box-shadow: 0 0 0 1px rgba(124, 159, 232, 0.18);
}

.report-selection-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  background: #f4f6fb;
}

.report-selection-thumb.placeholder {
  display: inline-block;
  background: #eef2f8;
}

.report-selection-artwork-row-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.report-selection-artwork-row-title {
  color: var(--text);
  font-weight: 600;
}

.report-selection-artwork-row-copy small {
  color: var(--muted);
  font-size: 0.78rem;
}

.report-selection-selected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.68rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.report-selection-selected-copy {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

@media (max-width: 980px) {
  .catalogue-builder-grid,
  .catalogue-selector-grid,
  .catalogue-template-row,
  .catalogue-search-row {
    grid-template-columns: 1fr;
  }

  .location-builder-grid,
  .exhibition-builder-grid,
  .location-search-row,
  .exhibition-search-row {
    grid-template-columns: 1fr;
  }

  .portfolio-builder-grid,
  .tear-sheet-builder-grid,
  .portfolio-selector-grid,
  .tear-sheet-selector-grid,
  .portfolio-template-row,
  .tear-sheet-template-row,
  .portfolio-search-row,
  .tear-sheet-search-row {
    grid-template-columns: 1fr;
  }

  .catalogue-selector-head {
    justify-content: flex-start;
  }

  .location-selector-head,
  .exhibition-selector-head,
  .portfolio-selector-head,
  .tear-sheet-selector-head {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .viewing-room-perspective-stage {
    min-height: clamp(500px, 74vw, 760px);
  }

  .viewing-room-navigation-controls {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .viewing-room-navigation-turnbar {
    justify-content: center;
  }

  .viewing-room-navigation-focusbar {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .viewing-room-perspective-wall.is-active {
    left: 4%;
    right: 4%;
    top: 6%;
    bottom: 30%;
  }

  .viewing-room-perspective-wall.is-previous,
  .viewing-room-perspective-wall.is-next {
    width: 42%;
  }

  .viewing-room-node-map-hint {
    bottom: 0.75rem;
  }
}

@media (max-width: 640px) {
  .viewing-room-perspective-stage {
    min-height: 460px;
  }

  .viewing-room-wall-placard {
    width: min(112px, calc(var(--item-width) + 6px));
    min-height: 84px;
    padding: 0.48rem 0.5rem 0.42rem 0.5rem;
  }

  .viewing-room-node-spot-label {
    font-size: 0.64rem;
  }
}

@media (max-width: 900px) {
  .contacts-import-grid,
  .settings-custom-wallpaper-grid,
  .contacts-import-row {
    grid-template-columns: 1fr;
  }

  .contact-summary-actions {
    flex-basis: 100%;
    width: 100%;
  }
}

/* ── Ported from remote feature commits (lightbox, event previews, history,
   gallery address detail) — appended; all-new class names, no overrides. ── */
.event-preview-grid {
  display: grid;
  gap: 0.9rem;
  /* Cap each preview so a single piece stays a tidy thumbnail (auto-fit + 1fr
     made one image balloon to full width). */
  grid-template-columns: repeat(auto-fill, minmax(150px, 190px));
  justify-content: start;
}

.event-preview-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 0.7rem;
  display: grid;
  gap: 0.55rem;
}

.event-preview-button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  border-radius: 10px;
  overflow: hidden;
}

.event-preview-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px solid var(--line);
  object-fit: cover;
  display: block;
  background: #eef1f7;
}

.event-preview-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: #f8f9fc;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 0.92rem;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(14, 19, 33, 0.86);
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.image-lightbox-inner {
  width: min(94vw, 1100px);
  max-height: 92vh;
  display: grid;
  gap: 0.7rem;
  justify-items: end;
}

.image-lightbox-close {
  background: rgba(255, 255, 255, 0.92);
}

.image-lightbox-image {
  width: 100%;
  max-height: calc(92vh - 52px);
  object-fit: contain;
  border-radius: 12px;
  background: #111;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
}

body.lightbox-open {
  overflow: hidden;
}

/* Exhibition application status (event detail) + decision reminder pop-up */
.event-application-status { margin-bottom: 0.5rem; }
.event-application-badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--line);
}
.event-application-badge.tone-ok { background: #e7f6ec; color: #1c7d44; border-color: #bfe6cd; }
.event-application-badge.tone-warn { background: #fff4e0; color: #9a6a00; border-color: #f3d9a6; }
.event-application-badge.tone-soft { background: var(--surface-2, #f1f3f7); color: var(--muted); }
.event-application-prompt {
  margin-top: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2, #f8fafc);
}
.event-application-prompt p { margin: 0 0 0.5rem; font-weight: 600; }

.exhibition-decision-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 1rem 1rem;
  background: rgba(15, 23, 42, 0.45);
  overflow-y: auto;
}
.exhibition-decision-card {
  width: min(520px, 100%);
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.exhibition-decision-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.exhibition-decision-head h2 { margin: 0; font-size: 1.15rem; }
.exhibition-decision-list { display: grid; gap: 0.7rem; margin: 0.8rem 0; }
.exhibition-decision-row { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem; }
.exhibition-decision-q { margin: 0 0 0.5rem; font-weight: 600; }
.exhibition-decision-foot { display: flex; justify-content: flex-end; }

.history-block {
  margin-top: 0.55rem;
}

.history-block h4 {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
}

.gallery-address-detail {
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .image-lightbox {
    padding: 0.65rem;
  }

  .image-lightbox-inner {
    width: 100%;
  }
}

/* Artist's Notes hub */
.notes-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.notes-page-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.notes-page-head-actions input[type="search"] {
  min-width: 200px;
}
.notes-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.note-filter-chip {
  font-size: 0.82rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.note-filter-chip.is-active {
  background: var(--title-box-bg);
  border-color: var(--title-box-border);
  color: var(--title-box-color);
}
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.notes-empty {
  margin: 0.5rem 0 0;
}
.note-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.note-card.is-filtered-out {
  display: none;
}
.note-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.note-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
  min-width: 0;
}
.note-card-date {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
.note-card-body {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.note-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.note-tag {
  font-size: 0.7rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--title-box-bg);
  color: var(--title-box-color);
}
.note-chip {
  font-size: 0.75rem;
  padding: 0.18rem 0.5rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.note-chip.is-missing {
  opacity: 0.6;
  text-decoration: line-through;
}
.note-chip-type {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.note-chip-x {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--muted);
  padding: 0 0.1rem;
}
.note-card-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
}
.note-editor {
  border: 2px solid var(--title-box-border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.note-editor-title {
  font-size: 0.95rem;
  font-weight: 600;
}
.note-editor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.note-tag-toggle {
  font-size: 0.78rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.note-tag-toggle.is-on {
  background: var(--title-box-bg);
  border-color: var(--title-box-border);
  color: var(--title-box-color);
}
.note-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: baseline;
}
.note-link-row .field-label {
  margin: 0;
}
.note-link-picker {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  max-width: 400px;
}
.note-link-picker input[type="search"] {
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  width: 100%;
}
.note-link-results {
  display: flex;
  flex-direction: column;
}
.note-link-result {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  padding: 0.45rem 0.65rem;
  border: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 0.85rem;
}
.note-link-result:first-child {
  border-top: none;
}
.note-link-result:hover {
  background: var(--bg);
}
.note-link-empty {
  padding: 0.45rem 0.65rem;
  margin: 0;
}
.note-editor-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.note-editor-buttons {
  display: flex;
  gap: 0.5rem;
}
.record-notes-section .record-notes-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.record-note-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.record-note-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}
.record-note-row:hover {
  background: var(--bg);
}
.record-note-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.record-note-row-title {
  font-weight: 600;
  font-size: 0.88rem;
}
.record-note-row-snippet {
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-note-row-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.notes-embedded-block {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.notes-embedded-head {
  margin: 0 0 0.15rem;
}
.notes-embedded-block .notes-grid {
  margin-top: 0.75rem;
}
.note-card-embedded {
  background: var(--bg);
}

/* Notebook: notes + tasks merge */
.notes-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.notes-controls-row .notes-filter-row {
  margin-bottom: 0;
}
.note-group-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.note-group-control .field-label {
  margin: 0;
}
.note-group-control select {
  width: auto;
}
.notes-group {
  margin-bottom: 1.25rem;
}
.notes-group-head {
  margin: 0 0 0.6rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.notes-group-count {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}
.note-type-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.note-type-btn {
  font-size: 0.82rem;
  padding: 0.3rem 0.9rem;
  border: none;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.note-type-btn.is-on {
  background: var(--title-box-bg);
  color: var(--title-box-color);
  font-weight: 600;
}
.note-editor-top {
  margin-bottom: 0.2rem;
}
.note-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.note-meta-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.note-meta-field input {
  min-width: 180px;
}
.note-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  padding: 0;
}
.note-check:hover {
  border-color: var(--accent);
}
.note-check.is-done {
  background: var(--accent);
  border-color: var(--accent);
}
.note-check.is-done::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.note-card-task .note-card-head {
  align-items: flex-start;
}
.note-card.is-done .note-card-title {
  text-decoration: line-through;
  color: var(--muted);
}
.note-due {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.note-due.is-overdue {
  color: var(--danger);
}
.note-due.is-today {
  color: var(--accent);
}
.note-due.is-future {
  color: var(--muted);
  font-weight: 400;
}
.note-due.is-done-due {
  color: var(--muted);
  font-weight: 400;
}
.note-collection-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
}
.note-collection-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.embed-task-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.2rem 0 0.2rem;
}
.embed-task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: default;
}
.note-check-sm {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 5px;
}
.note-check-sm.is-done::after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
}
.embed-task-label {
  font-size: 0.85rem;
  line-height: 1.35;
}
.embed-task-label.is-done {
  text-decoration: line-through;
  color: var(--muted);
}

/* Make for this fair + Reports "Ready to print" pack */
.fair-makeables { display: flex; flex-direction: column; gap: 8px; }
.fair-makeables .checkbox-row { align-items: flex-start; }
.fair-makeable-qr {
  display: flex; flex-direction: column; gap: 10px;
  margin: 4px 0 2px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-muted, rgba(148,163,184,.08));
}
.fair-makeable-qr.hidden { display: none; }
.fair-makeable-qr .field-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.ready-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ready-pack-card {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; background: var(--surface, #fff);
  display: flex; flex-direction: column; gap: 8px;
}
.ready-pack-card h4 { margin: 0 0 2px; font-size: 14px; }
.ready-pack-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ready-pack-row > span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.ready-pack-row .ti { color: var(--muted); }

/* Notebook · Artists I like (inspiration log) */
.insp-section { display: flex; flex-direction: column; gap: 0.9rem; }
.insp-editor {
  display: flex; flex-direction: column; gap: 0.8rem;
  padding: 1rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface-muted, rgba(148,163,184,.06));
}
.insp-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.insp-field { display: grid; gap: 0.25rem; }
.insp-field.insp-field-full { grid-column: 1 / -1; }
.insp-field .field-label { font-size: 0.74rem; color: var(--muted); }
.insp-field em { font-style: normal; opacity: 0.8; }
.insp-field input, .insp-field textarea { width: 100%; box-sizing: border-box; }
.insp-photos { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.insp-photo-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.insp-photo { position: relative; width: 72px; height: 72px; }
.insp-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.insp-photo-x {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  border-radius: 50%; border: none; background: #0f172a; color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.insp-photo-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.insp-photo-add { cursor: pointer; }
.insp-editor-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

.insp-card { display: flex; flex-direction: column; gap: 0.55rem; }
.insp-card-thumb { position: relative; }
.insp-card-thumb img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; }
.insp-card-more {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(15,23,42,.78); color: #fff; font-size: 12px;
  padding: 2px 7px; border-radius: 20px;
}
.insp-card-name { margin: 0; font-size: 1rem; }
.insp-card-meta { margin: 0; font-size: 0.8rem; color: var(--muted); }
.insp-card-why { margin: 0.1rem 0 0; font-size: 0.88rem; }
.insp-card-link { font-size: 0.82rem; color: var(--accent, #2563eb); word-break: break-all; }
@media (max-width: 480px) { .insp-field-grid { grid-template-columns: 1fr; } }

/* Inspiration log · links + reference */
.insp-links { display: flex; flex-direction: column; gap: 0.5rem; }
.insp-link-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.insp-link-chips:empty { display: none; }
.insp-card-ref { font-size: 0.8rem; color: var(--muted); word-break: break-all; }
a.insp-card-ref { color: var(--accent, #2563eb); }
.insp-card-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.15rem; }
.insp-chip-link { cursor: pointer; border: 1px solid var(--border); background: var(--surface, #fff); }
.insp-chip-link:hover { border-color: var(--accent, #2563eb); }

/* Sales Pipeline · follow-ups panel */
.sales-followups-card { display: grid; gap: 0.6rem; }
.sales-followups-list { display: flex; flex-direction: column; gap: 0.45rem; }
.sales-followup-row {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left;
  padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface, #fff); cursor: pointer;
}
.sales-followup-row:hover { border-color: var(--accent, #6366f1); }
.sales-followup-when {
  min-width: 96px; font-size: 0.78rem; font-weight: 600;
  padding: 0.2rem 0.5rem; border-radius: 20px; text-align: center; white-space: nowrap;
}
.sales-followup-when.is-overdue { background: rgba(220,38,38,.12); color: #b91c1c; }
.sales-followup-when.is-today { background: rgba(37,99,235,.12); color: #1d4ed8; }
.sales-followup-when.is-soon { background: var(--surface-muted, rgba(148,163,184,.18)); color: var(--text); }
.sales-followup-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sales-followup-main strong { font-size: 0.92rem; }
.sales-followup-main .subtitle { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Social Insights · performance metric label */
.social-insight-metric { font-size: 0.8rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Sales Pipeline · health panel */
.pipeline-health-card { display: grid; gap: 0.7rem; }
.pipeline-health-stats { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.pipeline-health-stat { display: flex; flex-direction: column; }
.pipeline-health-stat strong { font-size: 1.45rem; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.pipeline-health-stat span { font-size: 0.78rem; color: var(--muted); }
.pipeline-health-bars { display: flex; flex-direction: column; gap: 0.4rem; }
.pipeline-health-bars > .subtitle { margin: 0.2rem 0 0.1rem; }
.pipeline-health-bar-row { display: grid; grid-template-columns: 120px 1fr 72px; align-items: center; gap: 0.6rem; }
.pipeline-health-bar-label { font-size: 0.82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-health-bar-track { height: 9px; border-radius: 6px; background: var(--surface-muted, rgba(148,163,184,.18)); overflow: hidden; }
.pipeline-health-bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--accent, #6366f1); min-width: 2px; }
.pipeline-health-bar-val { font-size: 0.8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Sales Pipeline · activity timeline */
.sales-activity-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.sales-activity-add select, .sales-activity-add input[type="date"] { flex: 0 0 auto; }
.sales-activity-add input[data-activity-input="note"] { flex: 1 1 220px; min-width: 160px; }
.sales-activity-list { display: flex; flex-direction: column; gap: 0.4rem; }
.sales-activity-row {
  display: grid; grid-template-columns: 92px 1fr 24px; align-items: start; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface, #fff);
}
.sales-activity-when { font-size: 0.78rem; color: var(--muted); padding-top: 0.15rem; font-variant-numeric: tabular-nums; }
.sales-activity-body { font-size: 0.88rem; color: var(--text); }
.sales-activity-del { border: none; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.sales-activity-del:hover { color: #b91c1c; }

.sales-opportunity-sync-note { display: block; margin-top: 0.3rem; font-size: 0.78rem; line-height: 1.35; }

/* Sales Pipeline · No's area */
.sales-no-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sales-no-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 0.4rem; }
.sales-no-card-head { display: flex; align-items: start; justify-content: space-between; gap: 0.6rem; }
.sales-no-card-head h4 { margin: 0; font-size: 14px; }
.sales-no-reason { margin: 0.2rem 0; font-size: 0.9rem; color: var(--text); }
.sales-no-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.3rem; flex-wrap: wrap; }
.sales-no-card-actions { display: flex; gap: 0.4rem; }
.sales-no-flag { font-size: 0.74rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--surface-muted, rgba(148,163,184,.18)); color: var(--muted); }
.sales-no-flag.is-revisit { background: rgba(37,99,235,.12); color: #1d4ed8; }
.sales-no-flag.is-final { background: rgba(148,163,184,.18); color: var(--muted); }
.sales-no-revisit-banner { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.25); }
.sales-followup-subhead { margin: 0.7rem 0 0.3rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.sales-no-capture { background: rgba(239,68,68,.04); border: 1px solid rgba(239,68,68,.18); border-radius: 10px; padding: 0.8rem 1rem; }

/* Sales Pipeline · bulk select + move */
.sales-bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; position: sticky; top: 0.4rem; z-index: 5; background: var(--surface, #fff); border: 1px solid var(--accent, #6366f1); }
.sales-bulk-count { font-size: 0.95rem; }
.sales-bulk-bar-controls { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.sales-opportunity-card { position: relative; }
.sales-opportunity-card.is-bulk-selected { outline: 2px solid var(--accent, #6366f1); outline-offset: 1px; }
.sales-bulk-check { width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--surface, #fff); color: #fff; font-size: 0.85rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; }
.sales-bulk-check.is-on { background: var(--accent, #6366f1); border-color: var(--accent, #6366f1); }

/* Notebook · Crits log */
.crit-card-quote { margin: 0.2rem 0 0.4rem; font-size: 0.95rem; color: var(--text); border-left: 3px solid var(--border); padding-left: 0.7rem; font-style: italic; }
.crit-card-response { margin: 0.2rem 0; font-size: 0.9rem; color: var(--text); }
.crit-card-response strong { color: var(--muted); font-weight: 600; }

/* Contacts · Collectives & societies */
.collectives-card { margin-top: 1rem; }
.collective-editor { display: flex; flex-direction: column; gap: 0.9rem; margin: 0.6rem 0 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted, rgba(148,163,184,.06)); }
.collective-offers { display: flex; flex-direction: column; gap: 0.4rem; }
.collective-offer-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.collective-offer-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem; cursor: pointer; }
.collective-dates { display: flex; flex-direction: column; gap: 0.5rem; }
.collective-dates-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.collective-dates-list { display: flex; flex-direction: column; gap: 0.5rem; }
.collective-date-row { display: grid; grid-template-columns: 110px 1fr 150px 110px 28px; gap: 0.4rem; align-items: center; }
.collective-date-row input, .collective-date-row select { width: 100%; }
.collective-date-del { border: none; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.collective-date-del:hover { color: #b91c1c; }
.collective-card-offers { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0; }
.collective-card-dates { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.3rem 0; }
.collective-card-date { font-size: 0.85rem; color: var(--text); }
.collective-card-date strong { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .collective-date-row { grid-template-columns: 1fr 1fr; } }

.collective-card-membership { margin: 0.2rem 0; }

/* Collective · grouped connections */
.collective-links { display: flex; flex-direction: column; gap: 0.7rem; }
.collective-link-group { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; }
.field-sublabel { font-size: 0.8rem; font-weight: 600; color: var(--text); }

.note-link-create { color: var(--accent, #2563eb); font-weight: 600; }

/* Contacts · Courses & study */
.course-flags { margin: 0.2rem 0; }
.course-people { display: flex; flex-direction: column; gap: 0.5rem; }
.course-people-list { display: flex; flex-direction: column; gap: 0.5rem; }
.course-person-row { display: grid; grid-template-columns: 1fr 1fr 132px 28px; gap: 0.4rem; align-items: center; }
.course-person-row input { width: 100%; }
.course-person-row > [data-course-action="person-to-contact"] { justify-self: stretch; }
.course-person-linked { font-size: 0.78rem; color: #15803d; white-space: nowrap; justify-self: center; text-align: center; }
.course-person-del { border: none; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.course-person-del:hover { color: #b91c1c; }
.course-card-people { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.3rem 0; }
.course-card-person { font-size: 0.85rem; color: var(--text); }
@media (max-width: 620px) { .course-person-row { grid-template-columns: 1fr 1fr; } }

.coming-up-self-sell { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.2rem 0 0.6rem; font-size: 0.88rem; color: var(--text); }

/* Phone: simplify the inventory piece card — image, title, status and price by
   default, with the full detail list tucked behind a "Show details" toggle. */
@media (max-width: 640px) {
  .piece-image-wrap .card-image { height: 150px; }
  .piece-key { display: block; font-weight: 700; font-size: 1rem; color: var(--text); margin-top: 0.35rem; }
  .piece-details { display: none; }
  .piece-details-toggle:checked ~ .piece-details { display: grid; }
  .piece-details-more { display: inline-block; cursor: pointer; color: #3f6ad8; font-weight: 600; font-size: 0.85rem; padding: 0.3rem 0; }
  .piece-details-more::after { content: "Show details \25B8"; }
  .piece-details-toggle:checked ~ .piece-details-more::after { content: "Hide details \25BE"; }
}

/* Coming-up "sales news" structured block */
.coming-up-sales { display: flex; flex-direction: column; gap: 8px; }
.coming-up-sales-q { font-weight: 600; }
.coming-up-sales-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.coming-up-sales-item { display: flex; align-items: baseline; gap: 8px; font-size: 0.92em; }
.coming-up-sales-kind { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; background: #eef0f4; color: #555; flex: none; }
.coming-up-sales-item.is-sold .coming-up-sales-kind { background: #e3f5ea; color: #1f7a45; }
.coming-up-sales-item.is-interested .coming-up-sales-kind { background: #eef2fd; color: #3a59c0; }
.coming-up-sales-empty { margin: 0; }
.coming-up-sales-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.coming-up-sales-pref { border: 1px solid #e6e8ee; border-radius: 8px; padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.coming-up-sales-pref .checkbox-row { margin: 0; }

/* ---- Dark mode -------------------------------------------------------------
   A user-toggled theme (Settings → visual settings). Overrides the core colour
   tokens; placed last so it wins over the light palette selectors. Most of the
   UI is variable-driven, so this flips the bulk of it; a few hardcoded surfaces
   get explicit dark rules below. */
body[data-theme="dark"] {
  --bg: #0f141c;
  --page-bg: #0f141c;
  --surface: #1a212c;
  --text: #e7ebf2;
  --muted: #9aa4b4;
  --line: #2b3542;
  --accent: #5b82e6;
  --accent-dark: #6f92ec;
  --danger: #e0616f;
  --topbar-bg: #141a24;
  --sidebar-bg: #141a24;
  --nav-active-bg: #24344f;
  --nav-active-color: #cbd9f5;
  --nav-active-border: #34486b;
  --title-box-bg: #24344f;
  --title-box-color: #cbd9f5;
  --title-box-border: #34486b;
  --textarea-bg: #1a212c;
  --btn-primary-bg: #5b82e6;
  --btn-primary-hover: #6f92ec;
  --btn-primary-color: #ffffff;
  --btn-outline-bg: #1a212c;
  --btn-outline-border: #2b3542;
  --btn-outline-color: #e7ebf2;
  color-scheme: dark;
}
/* Many cards/panels hardcode a white background instead of reading the tokens.
   Substring class selectors flip the common container surfaces in one sweep
   (accent-coloured chips/badges/buttons don't match, so they keep their colour). */
body[data-theme="dark"] [class*="card"],
body[data-theme="dark"] [class*="-tile"],
body[data-theme="dark"] [class*="-panel"],
body[data-theme="dark"] [class*="-entry"],
body[data-theme="dark"] [class*="-stat"],
body[data-theme="dark"] [class*="-accordion"],
body[data-theme="dark"] [class*="-option"],
body[data-theme="dark"] .settings-day-chip,
body[data-theme="dark"] article,
body[data-theme="dark"] .tick-dropdown,
body[data-theme="dark"] .modal-form,
body[data-theme="dark"] .stay-row,
body[data-theme="dark"] .pack-item,
body[data-theme="dark"] .transport-leg {
  background: var(--surface);
  border-color: var(--line);
}
/* Descriptive / secondary copy (subtitles, toolbar blurbs, empty-state notes)
   hardcodes a dark ink that reads dark-on-dark. Flip it to the muted token. */
body[data-theme="dark"] .subtitle,
body[data-theme="dark"] .toolbar p,
body[data-theme="dark"] [class*="-empty"],
body[data-theme="dark"] .notes-empty {
  color: var(--muted);
}
/* Chips/badges hardcode a pale tint. Give them a translucent dark chip so any
   status-coloured text (blue/green/red) stays legible; neutral "soft" badges
   also need their dark text flipped. */
body[data-theme="dark"] .badge { background: rgba(140, 160, 190, 0.16); border-color: var(--line); }
body[data-theme="dark"] .badge.soft { background: rgba(140, 160, 190, 0.16); color: var(--text); }
/* Hardcoded dark-red / dark-green amounts are too dim on dark; brighten both. */
body[data-theme="dark"] .finance-outgoing { color: var(--danger); }
body[data-theme="dark"] .finance-income { color: #6ee7a0; }
/* Fair-till "Takings" stat: dark-green ink was made for a light-green chip, but
   the -stat sweep darkens the chip — keep the green identity with a bright tint. */
body[data-theme="dark"] .fair-till-stat.is-takings { background: rgba(110, 231, 160, 0.12); border-color: rgba(110, 231, 160, 0.28); }
body[data-theme="dark"] .fair-till-stat.is-takings span,
body[data-theme="dark"] .fair-till-stat.is-takings strong { color: #6ee7a0; }
/* The 3D gallery viewer shell is a light gradient by design, but its chrome
   (header, .subtitle, .badge soft) reads from the tokens — which go light in
   dark mode, giving light-on-light. Flip the shell to a dark gradient so the
   surrounding chrome stays legible (the 3D canvas itself is unaffected). */
body[data-theme="dark"] .gallery-viewer-shell {
  background:
    linear-gradient(180deg, rgba(20, 26, 36, 0.96), rgba(15, 20, 28, 0.98)),
    radial-gradient(circle at top, rgba(26, 33, 44, 0.9), rgba(15, 20, 28, 0.92));
}
/* Settings branding previews stay light (paper / logo samples that mirror the
   printed output), so their text + placeholders must stay dark ink rather than
   inherit the light token. Cover descendants too (e.g. the font-name <strong>). */
body[data-theme="dark"] .branding-font-face,
body[data-theme="dark"] .branding-font-face *,
body[data-theme="dark"] .settings-logo-preview,
body[data-theme="dark"] .settings-logo-preview *,
body[data-theme="dark"] .settings-custom-wallpaper-empty,
body[data-theme="dark"] .settings-custom-wallpaper-empty * { color: #182132; }
/* Modal sub-panels (contact method/role rows, opening-hours lists, image & file
   placeholders) hardcode white, so their now-light labels/text read light-on-
   white. Flip these containers to the dark surface. .contact-method-row is the
   shared base for the staff/artist/wall/event/document/social/image row variants. */
body[data-theme="dark"] .contact-method-row,
body[data-theme="dark"] .contact-roles-group,
body[data-theme="dark"] .contact-roles-summary,
body[data-theme="dark"] .contact-avatar-picker-preview,
body[data-theme="dark"] .gallery-opening-list,
body[data-theme="dark"] .gallery-opening-day-label,
body[data-theme="dark"] .artwork-additional-image-box,
body[data-theme="dark"] .artwork-additional-image-place,
body[data-theme="dark"] .exhibition-document-current,
body[data-theme="dark"] .field-feature-lock,
body[data-theme="dark"] .import-row,
body[data-theme="dark"] .modal-form summary,
body[data-theme="dark"] .modal-form details {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
/* Placeholder initials avatar — themed circle so the initials stay legible. */
body[data-theme="dark"] .contact-avatar.placeholder {
  background: var(--nav-active-bg);
  color: var(--nav-active-color);
}
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
  background: #10161f;
  color: var(--text);
  border-color: var(--line);
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder { color: #6b7788; }
body[data-theme="dark"] .global-search-input { background: #10161f; color: var(--text); border-color: var(--line); }
/* Icon buttons, floating dropdown/tick menus. */
body[data-theme="dark"] .icon-btn,
body[data-theme="dark"] .tick-dropdown-menu,
body[data-theme="dark"] .tickbox-dropdown,
body[data-theme="dark"] .dev-tools-menu,
body[data-theme="dark"] [class*="dropdown-menu"] {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
/* A light custom wallpaper would fight the dark chrome — mute it. */
body[data-theme="dark"]::before { opacity: 0.25; }
body[data-theme="dark"]::after { opacity: 0.4; }