@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/Manrope-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/Manrope-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/Manrope-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --blue: #1546b9;
  --blue-hover: #123fa8;
  --blue-soft: #f4f7ff;
  --pink: #fb7185;
  --pink-hover: #e86175;
  --ink: #424242;
  --muted: #7d7d7d;
  --faint: #a7a7a7;
  --line: #e8e8e8;
  --line-strong: #e8e8e8;
  --surface: #ffffff;
  --canvas: #fcfcfc;
  --row-hover: #f4f7ff;
  --success: #2c9a64;
  --danger: #e5434f;
  --sidebar-width: 230px;
  --content-left: 76px;
  --content-right: 70px;
  --content-width: calc(100% - var(--content-left) - var(--content-right));
  --topbar-height: 64px;
  --radius: 8px;
  --shadow-soft: 0 8px 28px rgba(35, 43, 68, 0.06);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--canvas);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

button,
select {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(21, 70, 185, 0.35);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

svg {
  display: block;
}

.dashboard-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--canvas);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: var(--sidebar-width);
  height: 100vh;
  overflow-y: auto;
  background: var(--surface);
  border-right: 0;
}

.brand {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--topbar-height);
  padding: 0 7px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
}

.brand-wordmark {
  position: relative;
  display: block;
  width: 148px;
  height: 31px;
  color: #fff;
}

.brand-rings::before,
.brand-rings::after {
  position: absolute;
  border: 2px solid;
  border-radius: 50%;
  content: "";
}

.brand-rings::before {
  top: 6.05px;
  left: 6px;
  width: 17.41px;
  height: 17.32px;
  border-color: #fff;
}

.brand-rings::after {
  top: 4px;
  left: 10.81px;
  width: 21.07px;
  height: 20.97px;
  border-color: var(--pink);
}

.brand-name {
  position: absolute;
  top: 4px;
  left: 38.13px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 23px;
}

.primary-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 23px 7px 32px;
}

.nav-item,
.subnav button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--blue);
  text-align: left;
}

.nav-item {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 41px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.nav-item > svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.nav-item .nav-chevron {
  justify-self: end;
  width: 14px;
  height: 14px;
}

.nav-item:not(.is-active):not(.nav-parent) .nav-chevron {
  opacity: 0;
}

.nav-item:hover,
.subnav button:hover {
  background: #f5f7fb;
}

.nav-item.is-active,
.subnav button.is-active {
  border-color: var(--pink);
  background: var(--blue);
  color: #fff;
}

.nav-parent.is-open {
  background: var(--blue-soft);
}

.subnav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 -3px;
  padding: 4px 3px 8px;
  border-radius: 7px;
  background: var(--blue-soft);
}

.subnav[hidden] {
  display: none;
}

.subnav button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  min-height: 41px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.subnav button svg {
  width: 14px;
  height: 14px;
  justify-self: end;
  opacity: 0;
}

.subnav button.is-active svg {
  opacity: 1;
}

.workspace {
  min-width: 0;
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  justify-content: start;
  align-items: center;
  gap: 10px;
  height: var(--topbar-height);
  padding: 0 var(--content-right) 0 var(--content-left);
  background: var(--blue);
}

.global-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 37px;
  padding: 0 12px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14.6px rgba(0, 0, 0, 0.02);
  color: var(--muted);
}

.global-search svg {
  width: 17px;
  height: 17px;
}

.global-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.profile-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 37px;
  padding: 0 12px 0 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 7.3px rgba(0, 0, 0, 0.02);
}

.profile-button > span:first-child {
  white-space: nowrap;
}

.profile-button:hover {
  background: #f8f8f8;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #ededed;
}

.profile-avatar svg {
  width: 16px;
  height: 16px;
}

.icon-button.mobile-menu {
  display: none;
}

.content {
  min-height: calc(100vh - var(--topbar-height));
  overflow: hidden;
}

.page {
  width: var(--content-width);
  max-width: none;
  margin: 0;
  margin-left: var(--content-left);
  padding: 23px 0 54px;
}

.page.page-settings {
  padding-top: 68px;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}

.page-header.compact {
  margin-bottom: 7px;
}

.page-title,
.editor-title {
  margin: 0;
  color: var(--blue);
  font-size: 25px;
  font-weight: 600;
  line-height: normal;
}

.editor-title {
  font-size: 25px;
}

.rewards-page .page-header {
  margin-bottom: 6px;
}

.rewards-toolbar {
  align-items: flex-end;
  height: 32px;
  margin-bottom: 7px;
}

.rewards-toolbar .button {
  width: 116px;
  min-height: 32px;
  padding: 0 15px;
}

.rewards-page .table-shell {
  height: 443px;
}

.rewards-page .data-table th,
.rewards-page .data-table td {
  padding: 0;
  font-weight: 600;
}

.rewards-page .data-table th {
  height: 37px;
}

.rewards-page .data-table .checkbox-cell {
  padding-left: 11px;
}

.rewards-page .data-table td:not(.checkbox-cell) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 29px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.figma-pagination button {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.figma-pagination svg {
  width: 9px;
  height: 9px;
}

.figma-pagination span {
  display: grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  border-radius: 3px;
}

.figma-pagination span.is-active {
  background: #f4f3f3;
}

.rewards-pagination {
  width: 100%;
}

.product-page .page-header {
  margin-bottom: 6px;
}

.product-toolbar {
  align-items: flex-end;
  height: 32px;
  margin-bottom: 7px;
}

.product-toolbar .button {
  width: 116px;
  min-height: 32px;
  padding: 0 15px;
}

.product-page .table-shell {
  height: 443px;
}

/* 443px is the height of the sixteen-row demonstration seed. A salon with three customers got a
   bordered box with 380px of white in it. max-height keeps the design ceiling and .table-scroll's
   overflow-y still scrolls a full page. (.product-page .table-shell above has the same defect.) */
.orders-page .table-shell,
.customers-page .table-shell {
  max-height: 443px;
}

.orders-page .page-header,
.customers-page .page-header {
  margin-bottom: 12px;
}

.orders-page .page-toolbar,
.customers-page .page-toolbar {
  margin-bottom: 6px;
}

.customers-page .page-toolbar {
  margin-bottom: 7px;
}

.product-page .data-table th,
.product-page .data-table td {
  padding: 0;
  font-weight: 600;
}

.product-page .data-table th {
  height: 37px;
}

.product-page .data-table .checkbox-cell {
  padding-left: 11px;
}

.section-title {
  margin: 0;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
}

.muted {
  color: var(--muted);
}

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.search-field,
.select-field,
.field input,
.field textarea,
.field select,
.note-box textarea,
.tag-entry input {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 276px;
  height: 25px;
}

.search-field svg {
  position: absolute;
  left: 10px;
  width: 13px;
  height: 13px;
  color: var(--muted);
}

.search-field input {
  width: 100%;
  height: 100%;
  padding: 0 9px 0 28px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 11px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 31px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.button svg {
  width: 14px;
  height: 14px;
}

.button .button-icon {
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.list-add-button {
  box-shadow: inset 0 4px 3.9px rgba(255, 255, 255, 0.47), 0 4px 14.6px rgba(0, 0, 0, 0.02);
}

.button.primary {
  background: var(--pink);
  color: #fff;
}

.button.primary:not(:disabled) {
  box-shadow: inset 0 4px 3.9px rgba(255, 255, 255, 0.47), 0 4px 14.6px rgba(0, 0, 0, 0.02);
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.button.primary:hover {
  background: var(--pink-hover);
}

.button.primary:not(:disabled):active {
  box-shadow: inset 0 3px 3px rgba(255, 255, 255, 0.28), 0 2px 7px rgba(0, 0, 0, 0.03);
  transform: translateY(1px);
}

.button.primary:disabled,
.date-range-actions .button.primary {
  box-shadow: none;
}

.button.secondary {
  border-color: var(--line-strong);
  color: var(--blue);
}

.button.subtle {
  background: #f2f2f2;
  color: var(--muted);
}

.button.danger {
  background: var(--danger);
  color: #fff;
}

.button.compact {
  min-height: 25px;
  padding-inline: 11px;
  font-size: 11px;
}

.button.icon-end svg {
  margin-left: 2px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
}

.icon-button:hover {
  background: #f2f4f8;
}

.icon-button svg {
  width: 18px;
  height: 18px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 8px;
  justify-content: flex-start;
  width: 57px;
  height: 15px;
  padding: 0 7px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  vertical-align: top;
  box-shadow: 0 2px 2.6px rgba(0, 0, 0, 0.08);
}

.back-button svg {
  width: 8px;
  height: 8px;
}

.table-shell {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
}

.table-scroll {
  /* The shells have a fixed height, so without vertical scrolling the last rows of a full
     page were simply clipped and unreachable. */
  overflow-x: auto;
  overflow-y: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  height: 26px;
  padding: 0 11px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  height: 35px;
  color: var(--muted);
  font-weight: 600;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr {
  transition: background 130ms ease;
}

.data-table tbody tr:hover {
  background: var(--row-hover);
}

.orders-page .data-table tbody tr.is-selected {
  background: #f3f5fc;
}

.orders-page .data-table thead {
  position: relative;
  z-index: 8;
}

.order-status-editor {
  position: relative;
  z-index: 20;
  width: 106px;
  height: 30px;
}

/* The locked chip is sized to its own sentence, so its wrapper must not clamp it to the
   dropdown width and let it spill over whatever sits next to it in the toolbar. */
.order-status-editor.is-locked {
  width: max-content;
}

.order-status-editor.is-open {
  z-index: 40;
}

.order-status-button {
  position: relative;
  display: flex;
  align-items: center;
  /* Sized to its own label. At a fixed column width the longest status ran under the chevron. */
  width: max-content;
  min-width: 100%;
  height: 30px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

/* Shown when the selection cannot be edited, so the control explains itself instead of
   disappearing. Sized to its sentence rather than the short status labels. */
.order-status-button.is-unavailable {
  /* Sized to its own label rather than the column, which is too narrow for the wording and
     was cutting it mid-word. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 0 10px;
  border-style: dashed;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-status-button.is-unavailable svg {
  position: static;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.order-status-button svg {
  position: absolute;
  right: 9px;
  width: 12px;
  height: 12px;
  transition: transform 140ms ease;
}

.order-status-editor.is-open .order-status-button {
  box-shadow: 0 0 0 2px rgba(21, 70, 185, 0.08);
}

.order-status-editor.is-open .order-status-button svg {
  transform: rotate(180deg);
}

.order-status-menu {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  display: grid;
  width: 118px;
  overflow: hidden;
  padding: 3px 0;
  border: 1px solid #ededed;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(28, 34, 48, 0.12);
}

.order-status-menu[hidden] {
  display: none;
}

.order-status-menu button {
  width: 100%;
  height: 30px;
  padding: 0 12px;
  border: 0;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.order-status-menu button:hover,
.order-status-menu button:focus-visible,
.order-status-menu button[aria-selected="true"] {
  outline: 0;
  background: #f6f6f6;
}

.data-table tbody tr[data-row-route] {
  cursor: pointer;
}

.data-table .checkbox-cell {
  width: 25px;
  padding-right: 0;
}

.data-table input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--blue);
}

.customers-page .table-shell {
  position: relative;
}

/* Sits in flow above the table rather than floating over the header, so nothing overlaps and
   the column headings stay readable while rows are selected. */
.customer-bulk-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 37px;
  padding-right: 10px;
  border-bottom: 1px solid var(--line-strong);
  background: #fff;
}

.customer-bulk-actions[hidden] {
  display: none;
}

/* Same geometry as the Kunden toolbar above: a clear button and one control, in flow above the
   table. The status control used to live in the "Bestellung" heading cell, which hid the
   heading and squeezed the dropdown into 178px. */
.order-bulk-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 37px;
  padding-right: 10px;
  border-bottom: 1px solid var(--line-strong);
  background: #fff;
}

/* The author-level display wins over the user agent's [hidden] rule, so the empty strip stays
   on screen without this. */
.order-bulk-actions[hidden] {
  display: none;
}

.bulk-selection-clear {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

.bulk-selection-clear::before {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid #424242;
  border-radius: 3px;
  background: #424242;
  content: "";
}

.bulk-selection-clear svg {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  stroke-width: 2;
}

.bulk-points-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 214px;
  height: 30px;
}

.bulk-points-field input {
  width: 100%;
  height: 30px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  outline: 0;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  appearance: textfield;
}

.bulk-points-field input::placeholder {
  color: #c5c5c5;
}

.bulk-points-field input::-webkit-outer-spin-button,
.bulk-points-field input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.bulk-points-field button {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #d9d9d9;
  color: #fff;
  opacity: 1;
}

.bulk-points-field button:not(:disabled) {
  background: var(--success);
}

.bulk-points-field button svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.table-empty {
  padding: 42px 20px;
  color: var(--muted);
  text-align: center;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.status.active,
.status.paid {
  color: var(--success);
}

.status.inactive,
.status.unpaid {
  color: var(--danger);
}

.analytics-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  margin-bottom: 13px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
  font-size: 8px;
}

.analytics-filter svg {
  width: 10px;
  height: 10px;
}

.analytics-panel,
.live-panel,
.detail-card,
.editor-card,
.settings-card {
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
}

.analytics-panel {
  padding: 9px;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 8px;
}

.metric-card {
  min-width: 0;
  height: 58px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.metric-card strong,
.metric-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card strong {
  font-size: 12px;
  font-weight: 600;
}

.metric-card span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  line-height: 13px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.metric-card:hover {
  border-color: #bdd5e6;
}

.chart-wrap {
  height: 196px;
  padding: 10px 10px 4px;
  border: 1px solid #f9f9f9;
  border-radius: 7px;
  background: #fff;
}

.chart-wrap img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.live-panel {
  margin-top: 9px;
  padding: 11px;
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  font-size: 12px;
  font-weight: 600;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
}

.activity-list {
  display: grid;
  gap: 9px;
}

.activity-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 43px;
  padding: 0 12px;
  border-radius: 5px;
  background: #fcfcfc;
}

.activity-item strong {
  font-size: 11px;
  font-weight: 500;
}

.activity-item span {
  color: var(--muted);
  font-size: 8px;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
  gap: 10px;
}

.detail-card,
.editor-card,
.settings-card {
  padding: 14px;
}

.detail-card h2,
.editor-card h2,
.settings-card h2 {
  margin: 0 0 13px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}

.detail-card p {
  margin: 0 0 14px;
  color: #424242;
  font-size: 12px;
  font-weight: 600;
  line-height: 16.392px;
}

.detail-card p strong {
  color: var(--ink);
  font-weight: 600;
}

.detail-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.detail-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.detail-list dt,
.detail-list dd {
  margin: 0;
}

.detail-list dt {
  color: var(--muted);
}

.order-lines {
  display: grid;
  gap: 8px;
}

.order-line {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 110px 70px;
  align-items: center;
  gap: 10px;
}

.order-line img {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  object-fit: cover;
}

.summary-lines {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.summary-line {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr) auto;
  gap: 10px;
  color: var(--muted);
}

.summary-line strong {
  color: var(--ink);
  font-weight: 600;
}

.note-box {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
}

.note-box textarea {
  min-height: 28px;
  padding: 7px;
  resize: vertical;
}

.order-detail-page,
.customer-detail-page,
.reward-editor-page,
.product-editor-page,
.membership-editor-page,
.page-settings,
.communications-page,
.communication-editor-page,
.payouts-page {
  --wide-growth: max(0px, calc(100vw - 1229px));
}

.order-detail-page {
  position: relative;
  padding-top: 23px;
}

.order-detail-page .detail-layout {
  grid-template-columns: minmax(0, 496fr) minmax(0, 346fr);
  width: min(100%, calc(852px + var(--wide-growth)));
}

.order-detail-page .back-button {
  height: 15px;
  margin-bottom: 4px;
  line-height: 12px;
}

.order-detail-page .order-detail-toolbar {
  display: block;
  min-height: 54px;
  height: 54px;
  margin-bottom: 9px;
}

.order-detail-toolbar > .select-field {
  position: absolute;
  top: 23px;
  right: 0;
  width: 99px;
  height: 20px;
  border-radius: 5px;
  font-size: 11px;
}

.order-detail-toolbar > .custom-select.select-field .custom-select__button {
  justify-content: flex-start;
  padding: 0 33px 0 24px;
  border-radius: 5px;
  font-size: 11px;
}

.order-detail-toolbar > .custom-select.select-field .custom-select__button svg {
  right: 24px;
  width: 9px;
  height: 9px;
}

.order-detail-toolbar > .custom-select.select-field .custom-select__menu {
  top: calc(100% + 2px);
  padding: 0;
  border-radius: 5px;
}

.order-detail-toolbar > .custom-select.select-field .custom-select__option {
  height: 20px;
  padding: 0 10px;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}

.order-detail-heading {
  display: block;
  height: 54px;
  color: var(--blue);
}

.order-id-row {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 16px;
  height: 16px;
}

.order-number {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.order-payment-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 36px;
  height: 13px;
  padding: 0 6px;
  border-radius: 3px;
  background: #3aad3e;
  color: #fff;
  font-size: 7px;
  font-weight: 600;
  line-height: 11px;
  white-space: nowrap;
}

.order-payment-chip.is-unpaid {
  background: var(--danger);
}

.reward-preview-media {
  position: relative;
}

.reward-preview-media img {
  display: block;
  width: 100%;
}

.reward-preview-media svg {
  display: block;
  width: 100%;
  height: auto;
}

.reward-preview-tag {
  position: absolute;
  top: 63%;
  left: 21%;
  transform: translate(-50%, -50%) rotate(-20deg);
  max-width: 46%;
  overflow: hidden;
  padding: 5px 12px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: #313131;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.order-paid-at,
.order-timestamp {
  display: inline-block;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  line-height: 16.392px;
}

.order-metadata {
  display: grid;
  grid-template-rows: repeat(2, 16px);
  gap: 2px;
  width: 207px;
  height: 34px;
  margin: 4px 0 0 1px;
}

.order-timestamp {
  width: max-content;
  min-height: 16px;
  margin: 0;
}

/* Sized for the design's three-item order. A fourth line needs 38px more and .detail-card has no
   overflow rule, so the surplus rows used to draw outside the border and over the Zwischensumme
   card. The cart is unbounded; min-height keeps the designed look and lets the card grow. */
.order-products-card {
  min-height: 168px;
  padding: 14px;
}

.order-products-card .order-lines {
  gap: 8px;
}

.order-products-card .order-line {
  grid-template-columns: 30px 208px 153px 42px;
  gap: 11px;
  font-size: 12px;
  line-height: 16.392px;
}

.order-products-card .order-line > :last-child,
.order-products-card .summary-line > :last-child {
  justify-self: end;
  width: max-content;
}

.order-products-card .summary-lines {
  padding-top: 7px;
}

.order-products-card .summary-line {
  grid-template-columns: 249px 148px 47px;
  gap: 11px;
  font-size: 12px;
  line-height: 16.392px;
}

.order-summary-card {
  height: 150px;
  margin-top: 10px;
  padding: 14px;
}

.order-summary-card .summary-lines {
  gap: 7.608px;
  padding-top: 0;
  border-top: 0;
}

.order-summary-card .summary-line {
  grid-template-columns: 164px 226px 56px;
  gap: 10px;
  font-size: 12px;
  line-height: 16.392px;
}

.order-summary-card .summary-line > :last-child {
  justify-self: end;
  width: max-content;
}

.order-summary-card .summary-line:last-child {
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

/* A fixed height with no overflow rule on .detail-card: a long name, email or wrapped value pushed
   the seven rows out through the bottom border. align-self is required with min-height — the aside
   is a grid item, whose default stretch would otherwise pull it to the full height of the left
   column. Together these keep today's 328px and only allow growth. */
.order-customer-card {
  align-self: start;
  min-height: 328px;
  padding: 20px 18px;
}

.order-customer-card p {
  margin-bottom: 15.608px;
}

.order-customer-card p:last-child {
  margin-bottom: 0;
}

.order-note-box {
  grid-template-rows: 20px 20px;
  width: 100%;
  height: 76px;
  gap: 6px;
  margin-top: 10px;
  padding: 14px;
}

.order-note-box textarea {
  width: 100%;
  min-height: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  resize: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.order-note-box textarea::placeholder {
  color: #c5c5c5;
}

.order-note-box .button.compact {
  justify-self: start;
  width: 58px;
  min-height: 20px;
  height: 20px;
  padding: 0;
  font-size: 11px;
}

.order-note-box #saveNote,
.order-note-box #saveNote:disabled {
  background: #e8e8e8;
  color: #fff;
  opacity: 1;
}

.order-note-box.is-dirty,
.order-note-box.is-saved {
  grid-template-rows: 32px 20px;
  height: 92px;
}

.order-note-box.is-dirty textarea,
.order-note-box.is-saved textarea {
  height: 32px;
  color: #7d7d7d;
}

.order-note-box.is-dirty #saveNote {
  background: #3a3a3a;
  color: #fff;
}

.customer-detail-page {
  padding-top: 23px;
}

.customer-detail-page .back-button {
  height: 15px;
  margin-bottom: 10px;
}

.customer-detail-page .page-header {
  margin-bottom: 10px;
}

.customer-detail-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, calc(565px + var(--wide-growth)));
  max-width: 100%;
  min-height: 322px;
}

.customer-detail-layout .detail-card {
  width: 100%;
  height: 309px;
  padding: 13px 15px;
}

.customer-detail-layout .detail-card h2 {
  margin-bottom: 10px;
  line-height: 16.392px;
}

.customer-detail-layout .detail-card p {
  margin-bottom: 16px;
}

.editor-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 25px;
}

.reward-editor-page .back-button {
  width: 64px;
  height: 15px;
  margin-bottom: 10px;
  margin-left: 1px;
  font-size: 11px;
}

.reward-editor-page .editor-toolbar {
  width: min(100%, calc(629px + var(--wide-growth)));
  max-width: 100%;
  margin-bottom: 10px;
}

.reward-editor-page .editor-title-row,
.product-editor-page .editor-title-row {
  gap: 0;
}

.reward-editor-page .editor-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 420px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.product-editor-page .editor-title {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

.reward-editor-page .editor-status {
  flex: 0 0 70px;
  width: 70px;
  height: 20px;
  margin: 0 0 0 11px;
  padding: 0 9px;
}

.reward-editor-page [data-delete-object] {
  flex: 0 0 88px;
  width: 88px;
  min-height: 24px;
  height: 24px;
  margin-left: 13px;
  padding: 0 10px;
  font-size: 11px;
}

.reward-editor-page #editorSave {
  align-self: center;
  width: 94px;
  min-height: 24px;
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
}

.reward-editor-page #editorSave:disabled {
  background: #bc8e95;
  color: #fff;
  opacity: 1;
}

.product-editor-page .back-button {
  height: 15px;
  margin-bottom: 10px;
  margin-left: 1px;
}

.product-editor-page .editor-toolbar {
  width: min(100%, calc(629px + var(--wide-growth)));
  max-width: 100%;
  margin-bottom: 10px;
}

.product-editor-page .editor-status {
  flex: 0 0 64px;
  width: 64px;
  height: 20px;
  margin: 0 0 0 11px;
  padding: 0 9px;
}

.product-editor-page [data-delete-object] {
  flex: 0 0 88px;
  width: 88px;
  min-height: 24px;
  height: 24px;
  margin-left: 13px;
  padding: 0 10px;
  font-size: 11px;
}

.product-editor-page #editorSave {
  align-self: center;
  width: 94px;
  min-height: 24px;
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
}

.editor-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-field {
  height: 25px;
  padding: 0 25px 0 10px;
  background-color: #fff;
  font-size: 11px;
}

.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.reward-editor-grid {
  grid-template-columns: minmax(0, 309fr) minmax(0, 310fr);
  width: min(100%, calc(629px + var(--wide-growth)));
  max-width: 100%;
}

.product-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, calc(629px + var(--wide-growth)));
  max-width: 100%;
}

.product-editor-grid .editor-card {
  padding: 10px;
}

.product-category-card {
  height: 59px;
}

.product-content-card {
  min-height: 261px;
}

.product-content-card.has-package-fields {
  min-height: 382px;
}

.product-pricing-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 208px;
  overflow: visible;
}

.product-tags-card {
  min-height: 151px;
}

.product-category-card .field {
  width: 92px;
  gap: 5px;
}

.product-category-card .field select {
  width: 92px;
  height: 20px;
}

.product-category-card .custom-select {
  width: 92px !important;
  height: 20px !important;
}

.product-category-card .custom-select__button {
  padding: 0 24px 0 11px;
  color: #111;
  font-size: 11px;
  font-weight: 600;
}

.product-category-card .custom-select__menu {
  top: 22px;
  width: 92px;
  min-width: 92px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 4px 14.5px rgba(0, 0, 0, 0.11);
}

.product-category-card .custom-select__option {
  min-width: 92px;
  height: 20px;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
}

.product-editor-grid .field input,
.product-editor-grid .field select {
  height: 22px;
  border-radius: 4px;
}

.product-editor-grid .field textarea {
  min-height: 74px;
  border-radius: 4px;
}

.product-content-card .media-picker {
  width: 68px;
  height: 68px;
}

.package-fields-label {
  margin-top: 10px;
}

.package-fields-label label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 12px;
}

.package-products-field .list-editor-items {
  width: 225px;
  margin-top: 10px;
  gap: 4px;
}

.package-products-field .list-editor-item {
  grid-template-columns: 29px minmax(0, 1fr) 16px;
  min-height: 29px;
  gap: 7px;
}

.package-products-field .list-editor-item img {
  width: 29px;
  height: 29px;
}

.package-products-field .soft-action {
  width: 225px;
  min-height: 22px;
  height: 22px;
  margin-top: 4px;
}

.product-tags-card h2 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.product-tags-card .tag-list {
  gap: 9px;
}

.product-tags-card .tag {
  min-height: 19px;
  height: 19px;
  padding: 0 9px;
  border-radius: 6px;
}

.compact-value-field {
  width: 100%;
}

.membership-page {
  padding-top: 67px;
}

.membership-page .page-header {
  align-items: center;
  margin-bottom: 10px;
}

.membership-page .page-header .button {
  position: relative;
  top: -4px;
  width: 120px;
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
}

.membership-page .table-shell {
  position: relative;
  height: 137px;
  overflow: hidden;
}

.membership-selection-actions {
  position: absolute;
  top: 6px;
  left: 41px;
  z-index: 8;
  display: flex;
  align-items: center;
}

.membership-selection-actions[hidden] {
  display: none;
}

.button.compact.membership-delete-button {
  box-sizing: border-box;
  width: 86px;
  min-height: 24px;
  height: 24px;
  padding: 0 9px;
  gap: 5px;
  border-radius: 7px;
  background: #e93d3d;
  font-size: 11px;
  line-height: 1;
}

.membership-delete-button svg {
  width: 11px;
  height: 11px;
}

.membership-table-shell.is-selecting thead th:not(.checkbox-cell) {
  color: transparent;
  background: #fff;
}

.membership-page .data-table th,
.membership-page .data-table td {
  padding: 0;
  font-weight: 600;
}

.membership-page .data-table th {
  height: 37px;
}

.membership-page .data-table td {
  height: 99px;
  padding-top: 6px;
  vertical-align: top;
}

.membership-page .data-table .checkbox-cell {
  padding-left: 11px;
}

.membership-page .data-table td:not(.checkbox-cell) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.membership-editor-page {
  padding-top: 49px;
}

.membership-editor-page .back-button {
  height: 15px;
  margin-bottom: 10px;
}

.membership-editor-toolbar {
  width: min(100%, calc(853px + var(--wide-growth)));
  max-width: 100%;
  height: 34px;
  align-items: center;
  margin-bottom: 10px;
}

.membership-editor-toolbar #editorSave {
  width: 94px;
  min-height: 24px;
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
}

.membership-editor-grid {
  grid-template-columns: minmax(310px, 1fr) 269px;
  gap: 20px;
  width: min(100%, calc(599px + var(--wide-growth)));
  max-width: 100%;
}

.membership-editor-grid .editor-stack {
  gap: 11px;
}

.membership-editor-grid .editor-card {
  box-sizing: border-box;
  padding: 10px;
}

.membership-editor-grid .field {
  gap: 10px;
}

.membership-editor-grid .field + .field {
  margin-top: 0;
}

.membership-editor-grid .field input,
.membership-editor-grid .field select {
  height: 22px;
  border-radius: 4px;
}

.membership-editor-grid .field textarea {
  min-height: 75px;
  height: 75px;
  border-radius: 4px;
}

.membership-preview-card {
  width: 269px;
  height: 608px;
}

.membership-section-card {
  width: 269px;
  height: 244px;
}

.membership-main-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: auto;
  min-height: 608px;
}

.membership-home-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  min-height: 254px;
}

.membership-title-field,
.membership-cta-field {
  height: auto;
}

.membership-description-field {
  height: auto;
  margin-top: 0;
}

.membership-benefits-field {
  width: 273px;
  height: auto;
  margin-top: 0;
}

.membership-benefit-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  min-height: 34px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.membership-benefit-row.empty {
  min-height: 22px;
  height: 22px;
  margin-top: 5px;
  padding: 0 4px 0 10px;
}

.membership-benefit-row input {
  min-width: 0;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0;
  font-size: 11px;
  color: var(--ink);
  background: transparent;
}

.membership-benefit-row button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.membership-benefit-row button svg {
  width: 9px;
  height: 9px;
}

.membership-benefits-field .soft-action {
  width: 225px;
  min-height: 22px;
  height: 22px;
  margin-top: 5px;
}

.membership-benefits-field .soft-action:disabled {
  background: rgba(251, 113, 133, 0.08);
  color: #c99aa1;
  opacity: 1;
}

.membership-price-grid.field-grid.three {
  grid-template-columns: repeat(3, 90px);
  gap: 10px;
  height: auto;
  margin-top: 0;
}

.membership-value {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: max-content;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  font-size: 11px;
}

.membership-value input {
  min-width: 10px;
  width: auto !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0;
}

.membership-value span {
  white-space: nowrap;
}

.membership-price-grid .field:nth-child(1) .membership-value,
.membership-price-grid .field:nth-child(2) .membership-value {
  min-width: 90px;
}

.membership-price-grid .field:nth-child(3) .membership-value {
  min-width: 46px;
}

.membership-products-field {
  width: 273px;
  height: auto;
  margin-top: 0;
}

.membership-products-field .list-editor-items {
  gap: 3px;
}

.membership-products-field .list-editor-item {
  min-height: 30px;
  height: 30px;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  gap: 9px;
  font-size: 11px;
  line-height: 1.35;
}

.membership-products-field .list-editor-item img {
  width: 30px;
  height: 30px;
}

.membership-products-field .soft-action {
  width: 225px;
  min-height: 30px;
  height: 30px;
  margin-top: 8px;
}

.membership-cta-field {
  width: 273px;
  margin-top: 0;
}

.membership-home-card h2,
.membership-preview-card h2,
.membership-section-card h2 {
  height: auto;
  margin: 0;
  font-size: 12px;
}

.membership-preview-card h2,
.membership-section-card h2 {
  margin-bottom: 10px;
}

.membership-home-card .field + .field {
  margin-top: 0;
}

.membership-preview-card {
  overflow: hidden;
}

.membership-phone-preview {
  position: relative;
  width: 246px;
  height: 558px;
  overflow: hidden;
  background: #fff;
  color: #282828;
}

.preview-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 49px;
  padding: 0 17px 0 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 12px;
}

.preview-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.preview-cart svg {
  width: 15px;
  height: 15px;
}

.preview-cart b {
  position: absolute;
  top: 3px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f04444;
  color: #fff;
  font-size: 4px;
}

.preview-membership-body {
  height: 464px;
  padding: 18px 0 0 20px;
}

.preview-membership-body h3 {
  margin: 0 20px 7px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.24;
}

.preview-membership-body > p {
  margin: 0 20px 12px 0;
  color: #878787;
  font-size: 6px;
  line-height: 1.34;
}

.preview-membership-body ul {
  display: grid;
  gap: 6px;
  margin: 0 20px 15px 0;
  padding: 0;
  list-style: none;
}

.preview-membership-body li {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 5px;
  align-items: start;
  color: #878787;
  font-size: 6px;
  line-height: 1.3;
}

.preview-membership-body li svg {
  width: 13px;
  height: 13px;
  color: var(--pink);
  fill: var(--pink);
  stroke: #fff;
}

.preview-membership-body h4 {
  width: 206px;
  margin: 0 0 15px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.membership-phone-preview .phone-product-row {
  width: 330px;
  margin: 0 0 20px;
  gap: 8px;
  overflow: visible;
}

.membership-phone-preview .phone-product {
  flex-basis: 98px;
  height: 147px;
  overflow: hidden;
  border-radius: 7px;
}

.membership-phone-preview .phone-product img {
  height: 78px;
}

.membership-phone-preview .phone-product div {
  padding: 6px 7px;
}

.membership-phone-preview .phone-product strong,
.membership-phone-preview .phone-product small,
.membership-phone-preview .phone-product span {
  display: block;
  overflow: hidden;
  font-size: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.membership-phone-preview .phone-product small {
  margin-top: 3px;
  color: #b1b1b1;
}

.membership-phone-preview .phone-product span {
  margin-top: 3px;
  color: var(--pink);
}

.membership-phone-preview .phone-product button {
  height: 17px;
  margin-top: 4px;
  padding: 0 7px;
  border: 0;
  border-radius: 4px;
  background: var(--pink);
  color: #fff;
  font-size: 5px;
}

.membership-phone-preview .preview-cta {
  min-height: 22px;
  height: 22px;
  margin: 0 auto;
  font-size: 6px;
}

.preview-bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: 45px;
  border-top: 1px solid #eee;
  background: #fff;
}

.preview-bottom-nav span {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #777;
  font-size: 5px;
}

.preview-bottom-nav svg {
  width: 13px;
  height: 13px;
}

.preview-bottom-nav .active {
  color: var(--pink);
}

.membership-section-preview {
  width: 249px;
  height: 116px;
  padding: 17px 15px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}

.membership-section-preview strong {
  display: block;
  font-size: 11px;
}

.membership-section-preview a {
  color: var(--pink);
}

.membership-section-preview strong span {
  color: inherit;
}

.membership-section-preview p {
  margin: 6px 0;
  color: #858585;
  font-size: 11px;
  line-height: 1.35;
}

.membership-section-preview a {
  font-size: 11px;
  text-decoration: none;
}

.value-suffix {
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  min-width: 37px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
}

.value-suffix input {
  min-width: 15px;
  width: auto !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0;
}

.value-suffix.points {
  min-width: 62px;
}

/* Figma selects are app-owned white menus, not native macOS popovers. */
.custom-select {
  position: relative;
  z-index: 6;
  display: inline-block;
  width: var(--custom-select-width);
  height: var(--custom-select-height);
  min-width: 0;
  vertical-align: middle;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.custom-select.is-open {
  z-index: 40;
}

.native-select-control {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.custom-select__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  color: #424242;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.custom-select__button svg {
  position: absolute;
  right: 7px;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  transition: transform 140ms ease;
}

.custom-select.is-open .custom-select__button {
  border-color: #d8d8d8;
  box-shadow: 0 0 0 2px rgba(21, 70, 185, 0.08);
}

.custom-select.is-open .custom-select__button svg {
  transform: rotate(180deg);
}

.custom-select__menu {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 2;
  display: none;
  width: max(100%, max-content);
  min-width: 100%;
  overflow: hidden;
  padding: 3px 0;
  border: 1px solid #ededed;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(28, 34, 48, 0.12);
}

.custom-select.is-open .custom-select__menu {
  display: grid;
}

.custom-select__option {
  width: 100%;
  min-width: max-content;
  height: 29px;
  padding: 0 18px;
  border: 0;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 29px;
  text-align: left;
  white-space: nowrap;
}

.custom-select__option:hover,
.custom-select__option:focus-visible,
.custom-select__option[aria-selected="true"] {
  outline: 0;
  background: #f6f6f6;
}

.custom-select__option:disabled {
  color: #b8b8b8;
}

.reward-editor-grid,
.product-editor-grid,
.reward-editor-grid .editor-stack,
.product-editor-grid .editor-stack {
  min-width: 0;
}

.reward-basic-card,
.reward-dates-card,
.reward-recipient-card,
.reward-message-card,
.reward-preview-card {
  box-sizing: border-box;
}

.reward-dates-card {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.reward-dates-card .field-grid {
  width: 100%;
}

.reward-dates-card .field,
.reward-dates-card .field input {
  min-width: 0;
  width: 100%;
}

.reward-dates-card .field input {
  padding-right: 6px;
  padding-left: 6px;
  font-size: 11px;
}

.reward-repeat-row {
  min-height: 20px;
  margin-top: 10px;
}

.reward-repeat-row .custom-select {
  flex: 0 0 auto;
}

/* Figma Frame 409 image library, including the nested Frame 410 drop zone. */
.modal-layer.media-library-layer {
  place-items: center;
  padding: 30px 20px;
}

.modal.media-library-modal {
  width: min(calc(100vw - 40px), 755px);
  height: min(521px, calc(100dvh - 60px));
  max-height: none;
  overflow: hidden;
  border-radius: 7px;
  box-shadow: 0 18px 58px rgba(18, 26, 49, 0.2);
}

.media-library-modal.has-media-selection {
  height: min(490px, calc(100dvh - 60px));
}

.media-library-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 24px 21px;
  background: #fff;
}

.media-library-heading,
.media-library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.media-library-heading {
  min-height: 23px;
}

.media-library-heading h2 {
  margin: 0;
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.media-library-close {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--pink);
  color: #fff;
}

.media-library-close svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.media-library-toolbar {
  min-height: 25px;
  margin-top: 8px;
}

.media-library-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.media-library-count {
  color: #424242;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.media-library-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 276px;
  height: 25px;
}

.media-library-search svg {
  position: absolute;
  left: 10px;
  width: 10px;
  height: 10px;
  color: #7d7d7d;
}

.media-library-search input {
  width: 100%;
  height: 100%;
  padding: 0 10px 0 27px;
  border: 1px solid #e8e8e8;
  border-radius: 7px;
  outline: 0;
  color: #424242;
  font-size: 11px;
}

.media-library-search input::placeholder {
  color: #7d7d7d;
}

.media-library-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 106px;
  height: 23px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}

.media-library-add:not(:disabled) {
  box-shadow: inset 0 4px 3.9px rgba(255, 255, 255, 0.47), 0 4px 14.6px rgba(0, 0, 0, 0.02);
}

.media-library-add:disabled {
  background: #bebebe;
  opacity: 1;
}

.media-library-add svg,
.media-upload-button svg {
  width: 13px;
  height: 13px;
}

.media-upload-zone {
  display: block;
  gap: 8px;
  width: 100%;
  min-height: 144px;
  margin-top: 9px;
  border: 3px dashed #e8e8e8;
  border-radius: 7px;
  color: #7d7d7d;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.media-upload-zone.is-dragging {
  border-color: var(--pink);
  background: rgba(251, 113, 133, 0.04);
}

.media-upload-zone.has-selection {
  min-height: 113px;
}

.media-upload-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  width: 100%;
  height: 138px;
}

.media-upload-empty[hidden],
.media-upload-selection[hidden] {
  display: none;
}

.media-upload-selection {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  height: 107px;
  padding: 17px 18px 17px 18px;
}

.media-upload-thumbnail {
  position: relative;
  flex: 0 0 73px;
  width: 73px;
  height: 73px;
  margin: 0;
}

.media-upload-thumbnail img {
  width: 73px;
  height: 73px;
  border-radius: 5px;
  object-fit: cover;
}

.media-upload-thumbnail button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
}

.media-upload-thumbnail button svg {
  width: 9px;
  height: 9px;
  stroke-width: 2.5;
}

.media-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 122px;
  height: 23px;
  border: 1px solid #e8e8e8;
  border-radius: 7px;
  background: #fff;
  color: #7d7d7d;
  font-size: 11px;
  cursor: pointer;
}

.media-upload-zone > span {
  font-size: 11px;
}

.media-library-subtitle {
  margin: 9px 0 8px;
  color: #7d7d7d;
  font-size: 12px;
  font-weight: 500;
}

.media-library-grid {
  display: grid;
  grid-template-columns: repeat(8, 75px);
  align-content: start;
  gap: 8px 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1px 4px;
}

.media-library-item {
  display: grid;
  justify-items: center;
  width: 75px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #424242;
  font-size: 11px;
  text-align: center;
}

.media-library-item img {
  width: 73px;
  height: 73px;
  border: 2px solid transparent;
  border-radius: 5px;
  object-fit: cover;
}

.media-library-item span {
  display: block;
  width: 75px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library-item small {
  font-size: 11px;
}

.media-library-item:hover img,
.media-library-item:focus-visible img {
  border-color: var(--pink);
}

.media-library-item:focus-visible {
  outline: 0;
}

/* Figma Frame 411 treatment/product chooser. */
.modal-layer.object-picker-layer {
  place-items: center;
  padding: 20px;
}

.modal.object-picker-modal {
  width: 310px;
  height: 386px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  border-radius: 8px;
  background: #fcfcfc;
}

.object-picker-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.object-picker-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 290px;
  height: 34px;
}

.object-picker-search svg {
  position: absolute;
  left: 11px;
  width: 13px;
  height: 13px;
  color: #7d7d7d;
}

.object-picker-search input {
  width: 100%;
  height: 100%;
  padding: 0 11px 0 34px;
  border: 1px solid #e8e8e8;
  border-radius: 7px;
  outline: 0;
  color: #424242;
  font-size: 11px;
}

/* The modal is a fixed height, so the list has to take the remaining space and scroll.
   Without this the entries past the fold were simply clipped and unreachable. */
.object-picker-list {
  display: grid;
  align-content: start;
  flex: 1;
  min-height: 0;
  width: 290px;
  row-gap: 6px;
  margin-top: 8px;
  overflow-y: auto;
}

.object-picker-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 290px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #424242;
  text-align: left;
}

.object-picker-item:hover,
.object-picker-item:focus-visible {
  outline: 0;
  background: #f3f3f3;
}

.object-picker-item img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  object-fit: cover;
}

.object-picker-item span,
.object-picker-item strong,
.object-picker-item small {
  display: block;
  min-width: 0;
}

.object-picker-item strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.object-picker-item small {
  margin-top: 2px;
  color: #7d7d7d;
  font-size: 10px;
}

[data-object-selection-label] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-open-object-picker].has-selection {
  justify-content: space-between;
}

@media (max-width: 820px) {
  .media-library-grid {
    grid-template-columns: repeat(auto-fit, 75px);
    justify-content: space-between;
  }
}

.value-suffix.points input {
  min-width: 14px;
  width: auto !important;
}

.value-suffix.points input::-webkit-outer-spin-button,
.value-suffix.points input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.reward-editor-grid .editor-card {
  padding: 10px;
}

/* The Titel field now leads this card, so the height that framed the old three-row layout has to
   be a floor rather than a lid — a fixed height here clips the new field, which is the defect
   this stylesheet keeps reintroducing. */
.reward-basic-card {
  min-height: 166px;
}

.reward-basic-card.has-selected-object {
  min-height: 173px;
}

.reward-title-field {
  margin-bottom: 12px;
}

.reward-dates-card {
  position: relative;
  height: 182px;
}

.reward-recipient-card {
  height: 82px;
}

.reward-recipient-card.is-selected {
  height: 363px;
  overflow: hidden;
}

.reward-message-card {
  height: 207px;
}

.reward-preview-card {
  height: 229px;
}

.reward-dates-card h2,
.reward-recipient-card h2,
.reward-message-card h2,
.reward-preview-card h2 {
  margin-bottom: 10px;
}

.recipient-toggle {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 215px;
  height: 32px;
  padding: 3px;
  overflow: hidden;
  border-radius: 4px;
  background: #f2f2f2;
}

.recipient-toggle button {
  flex: 0 0 auto;
  width: 85px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #858585;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 12px;
  white-space: nowrap;
}

.recipient-toggle button + button {
  width: 124px;
}

.recipient-toggle button.is-active {
  background: var(--blue);
  color: #fff;
}

.recipient-toggle button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #6cade0;
  outline-offset: -2px;
}

.recipient-customer-panel {
  display: grid;
  grid-template-rows: 12px 255px;
  gap: 5px;
  width: 289px;
  height: 272px;
  margin-top: 10px;
}

.recipient-selection-count {
  color: #424242;
  font-size: 11px;
  font-weight: 600;
  line-height: 12px;
}

/* Fixed height, so it must scroll — otherwise customers past the fold are unreachable. */
.recipient-customer-list {
  display: grid;
  align-content: start;
  grid-auto-rows: 32px;
  gap: 4px;
  width: 289px;
  height: 255px;
  overflow-y: auto;
}

.recipient-search-row {
  box-sizing: border-box;
  width: 289px;
  height: 32px;
  padding: 7px 7px 0;
}

.recipient-search {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 275px;
  height: 25px;
  padding: 0 8px;
  border: 0.5px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  color: #858585;
}

.recipient-search svg {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
}

.recipient-search input {
  min-width: 0;
  width: 100%;
  height: 23px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #424242;
  font: inherit;
  font-size: 8px;
}

.recipient-customer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 289px;
  height: 32px;
  padding: 0 7px;
  color: #424242;
  font-size: 11px;
  font-weight: 600;
  line-height: 12px;
}

.recipient-customer-row.is-selected {
  background: #f4f7ff;
}

.recipient-customer-row[hidden] {
  display: none;
}

.recipient-customer-row input {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #424242;
  border-radius: 3px;
  background: #fff center / 10px 10px no-repeat;
}

.recipient-customer-row input:checked {
  background-color: #424242;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2012%2012%27%3E%3Cpath%20d%3D%27M2.4%206.2%204.9%208.7%209.8%203.4%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
}

.reward-editor-grid .field {
  gap: 10px;
}

.reward-editor-grid .field input,
.reward-editor-grid .field select {
  height: 22px;
  border-radius: 4px;
}

.reward-editor-grid .field textarea {
  min-height: 75px;
  border-radius: 4px;
}

.reward-product-row,
.reward-discount-row,
.reward-repeat-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

.reward-product-row {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 0;
}

.reward-product-row .field-label {
  width: auto;
}

.reward-product-row .button {
  width: 106px;
  min-height: 22px;
  height: 22px;
  padding: 0 10px;
}

.reward-selected-object {
  display: grid;
  grid-template-columns: 29px 156px 10px;
  align-items: center;
  column-gap: 13.5px;
  width: 222px;
  min-height: 29px;
}

.reward-selected-object img {
  display: block;
  width: 29px;
  height: 29px;
  border-radius: 5px;
  object-fit: cover;
}

.reward-selected-object span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
}

.reward-selected-object button {
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c5c5c5;
}

.reward-selected-object button svg {
  width: 10px;
  height: 10px;
}

.reward-discount-row {
  gap: 10px;
}

.reward-discount-row > label {
  width: 84px;
}

.reward-discount-input {
  display: flex;
  align-items: center;
  width: 49px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
}

.reward-discount-input input {
  min-width: 0;
  width: 26px;
  height: 20px;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.reward-discount-input input::-webkit-inner-spin-button {
  display: none;
}

.reward-color-field {
  width: 131px;
  margin-top: 10px;
  gap: 5px !important;
}

.reward-color-field .color-control {
  width: 122px;
  height: 33px;
  grid-template-columns: 33px 27px 62px;
  border-radius: 8px;
  background: linear-gradient(to right, var(--reward-swatch, #009dd7) 0 33px, #fff 33px);
}

.reward-color-field .color-swatch {
  opacity: 0;
}

.reward-color-field .color-control svg {
  width: 15px;
  height: 15px;
}

.reward-color-field .color-control input:last-child {
  padding: 0 0 0 5px;
  color: #afafaf;
  font-size: 11px;
}

.reward-dates-card .field-grid {
  grid-template-columns: repeat(2, 137px);
  gap: 10px;
}

.reward-dates-card .field {
  gap: 10px;
}

.reward-dates-card .field + .field {
  margin-top: 0;
}

.reward-repeat-row {
  gap: 10px;
  margin-top: 7px;
}

.reward-repeat-row label {
  width: 112px;
}

.reward-repeat-row select {
  width: 100px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
}

.reward-message-card .field {
  width: 273px;
}

.reward-preview-card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: fill;
  border-radius: 7px;
}

/* The dashboard form was authored at 9px. Keep its geometry, but use the
   requested 11px text size for readable labels and controls on this route. */
.reward-editor-page .field label,
.reward-editor-page .back-button,
.reward-editor-page .button.compact,
.reward-editor-page .field-label,
.reward-editor-page .field input,
.reward-editor-page .field select,
.reward-editor-page .field textarea,
.reward-editor-page .reward-product-row,
.reward-editor-page .reward-discount-row,
.reward-editor-page .reward-repeat-row,
.reward-editor-page .reward-discount-input input,
.reward-editor-page .reward-repeat-row select,
.reward-editor-page .reward-selected-object span,
.reward-editor-page .recipient-toggle button,
.reward-editor-page .recipient-selection-count,
.reward-editor-page .recipient-search input,
.reward-editor-page .recipient-customer-row,
.reward-editor-page .custom-select__button,
.reward-editor-page .custom-select__option {
  font-size: 11px;
}

.editor-stack {
  display: grid;
  gap: 10px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field + .field {
  margin-top: 9px;
}

.field label,
.field-label {
  color: var(--muted);
  font-size: 11px;
}

.field input,
.field select {
  width: 100%;
  height: 25px;
  padding: 0 9px;
  font-size: 11px;
}

.field textarea {
  width: 100%;
  min-height: 74px;
  padding: 9px;
  resize: vertical;
  font-size: 11px;
}

.field input::placeholder,
.field textarea::placeholder,
.search-field input::placeholder,
.tag-entry input::placeholder {
  color: #c4c4c4;
}

.field-help {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: #979797;
  font-size: 11px;
  line-height: 1.35;
}

.field-help svg {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 1px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  color: var(--muted);
  font-size: 11px;
}

.checkbox-row input {
  width: 12px;
  height: 12px;
  accent-color: var(--blue);
}

.product-pricing-card .checkbox-row {
  gap: 9px;
  min-height: 18px;
  margin: 0;
  font-weight: 600;
}

.product-pricing-card .checkbox-row input {
  position: relative;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #a7a7a7;
  border-radius: 3px;
  background: #fff;
  /* The check path has more visual weight below its SVG midpoint. Lift it
     slightly so the painted mark, not just the 12px viewBox, is centered. */
  background-position: 50% calc(50% - 0.75px);
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

.product-pricing-card .checkbox-row input:checked {
  border-color: var(--blue);
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2012%2012%27%3E%3Cpath%20d%3D%27M2.4%206.2%204.9%208.7%209.8%203.4%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
}

.product-pricing-card .checkbox-row input:checked::after {
  content: none;
}

.product-pricing-card .checkbox-row span {
  line-height: 18px;
}

.product-pricing-card .field-help {
  align-items: center;
  width: 224px;
  max-width: 100%;
  gap: 4px;
  color: #a0a0a0;
  font-size: 7px;
  font-weight: 600;
  line-height: 9.562px;
}

.product-pricing-card .field-help svg {
  align-self: center;
  width: 8px;
  height: 8px;
  margin-top: 0;
  transform: translateY(0.5px);
}

.product-pricing-card .field-help span {
  display: block;
  width: 212px;
  min-width: 0;
}

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

.product-pricing-section,
.product-discount-fields,
.product-points-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.product-standard-pricing {
  display: grid;
  grid-template-rows: repeat(4, auto);
  row-gap: 13px;
}

/* The discounted-price rows stay on the card so it reads like the design; the checkbox decides
   whether the value is applied, and the payload still sends null while it is off. */
.product-discount-fields.is-inactive {
  opacity: 0.5;
}

.product-gift-pricing {
  min-height: 50px;
}

.product-pricing-card .compact-value-field {
  flex: 0 0 auto;
}

.product-discount-fields .field-help {
  margin-top: 3px;
}

/* 4.2: the discounted price must stay below the regular one. The save is refused either way; this
   is so the salon can see it before pressing Speichern. */
.product-discount-fields input[aria-invalid="true"] {
  border-color: #d64545;
  color: #d64545;
}

.product-discount-fields + .checkbox-row {
  margin-top: 0;
}

.gift-points-field label {
  font-weight: 600;
}

.media-picker {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 6px;
  background: #ddd;
  color: #fff;
}

.media-picker svg {
  width: 34px;
  height: 34px;
}

.media-picker.has-image {
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.product-media-picker {
  position: relative;
}

.product-media-picker.has-image > svg {
  opacity: 0;
}

/* A Paket's images sit side by side. They used to stack behind the first one under a count
   badge, so only one of the three was ever visible. */
.product-media-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.product-media-thumb {
  position: relative;
  width: 68px;
  height: 68px;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #ddd;
}

.product-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-media-thumb > button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(23, 26, 33, 0.62);
  color: #fff;
  cursor: pointer;
}

.product-media-thumb > button svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.4;
}

.package-products-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.soft-action[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 21px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
}

.tag.selected {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.tag button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.tag button svg {
  width: 10px;
  height: 10px;
}

.list-editor-items {
  display: grid;
  gap: 5px;
}

.list-editor-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  color: var(--muted);
  font-size: 11px;
}

.list-editor-item img {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  object-fit: cover;
}

.list-editor-item button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.list-editor-item button svg {
  width: 12px;
  height: 12px;
}

.soft-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 27px;
  width: 100%;
  border: 0;
  border-radius: 5px;
  background: rgba(251, 113, 133, 0.16);
  color: var(--pink);
  font-size: 11px;
}

.soft-action svg {
  width: 12px;
  height: 12px;
}

.phone-preview {
  max-width: 260px;
  min-height: 500px;
  margin: 0 auto;
  padding: 20px 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(35, 43, 68, 0.08);
}

.phone-preview h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 12px;
}

.phone-preview h4 {
  margin: 0 0 6px;
  font-size: 12px;
}

.phone-preview p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.phone-product-row {
  display: flex;
  gap: 8px;
  overflow: hidden;
  margin: 16px 0 20px;
}

.phone-product {
  flex: 0 0 112px;
  overflow: hidden;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

.phone-product img {
  width: 100%;
  height: 82px;
  object-fit: cover;
}

.phone-product div {
  padding: 7px;
}

.phone-product strong,
.phone-product span {
  display: block;
  font-size: 11px;
}

.phone-product span {
  margin-top: 5px;
  color: var(--pink);
}

.preview-cta {
  display: block;
  min-height: 26px;
  margin: 0 auto;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  background: var(--pink);
  color: #fff;
  font-size: 8px;
}

.page-settings .page-header {
  width: min(100%, calc(800px + var(--wide-growth)));
  margin-bottom: 24px;
}

.page-settings .settings-save {
  position: relative;
  top: -7px;
  right: 2px;
  width: 94px;
  min-height: 24px;
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
}

.page-settings .settings-save:disabled {
  background: #bc8e95;
  color: #fff;
  opacity: 1;
}

.settings-form {
  width: min(100%, calc(798px + var(--wide-growth)));
}

.settings-top-grid,
.settings-middle-grid {
  display: grid;
  grid-template-columns: minmax(0, 517fr) minmax(0, 271fr);
  gap: 10px;
}

.settings-top-grid {
  height: 256px;
}

.settings-middle-grid {
  height: 128px;
  margin-top: 11px;
}

.settings-branding-card {
  display: grid;
  grid-template-columns: 159px 159px 131px;
  grid-template-rows: 109px 109px;
  column-gap: 15px;
  row-gap: 13px;
  width: 100%;
  height: 256px;
  padding: 10px 0 10px 11px;
}

.settings-asset-field {
  display: grid;
  grid-template-rows: 12px 92px;
  gap: 5px;
  width: 159px;
  height: 109px;
}

.settings-asset-field label,
.settings-control-field label,
.legal-field label,
.settings-tags-card .field-label {
  color: var(--muted);
  font-size: 11px;
  line-height: 12px;
}

.logo-setting {
  grid-column: 1;
  grid-row: 1;
}

.icon-setting {
  grid-column: 2;
  grid-row: 1;
}

.hero-setting {
  grid-column: 1;
  grid-row: 2;
}

.settings-brand-controls {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  grid-template-rows: repeat(2, 50px);
  gap: 9px;
  width: 131px;
}

.settings-control-field {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.settings-control-field input,
.settings-control-field select {
  width: 100%;
  height: 25px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
}

.settings-brand-controls .settings-control-field,
.settings-brand-controls .color-control,
.settings-brand-controls select {
  width: 131px;
}

.settings-brand-controls select {
  height: 33px;
}

.asset-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 159px;
  height: 92px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
}

.asset-preview img {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}

.asset-preview.hero img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.asset-refresh {
  position: absolute;
  top: 3px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 25px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
}

.asset-refresh svg {
  width: 13px;
  height: 13px;
}

.color-control {
  display: grid;
  grid-template-columns: 33px 27px 71px;
  align-items: center;
  height: 33px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
}

.settings-brand-controls .color-control {
  background: linear-gradient(to right, var(--settings-swatch, #000) 0 33px, #fff 33px);
}

.color-control svg {
  width: 13px;
  height: 13px;
  margin: auto;
  color: var(--muted);
}

.color-swatch {
  width: 33px;
  height: 33px;
  padding: 0;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #000;
  cursor: pointer;
}

.settings-brand-controls .color-swatch {
  opacity: 0;
}

.color-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-swatch::-webkit-color-swatch,
.color-swatch::-moz-color-swatch {
  border: 0;
}

.color-control input:last-child {
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  border: 0;
  color: var(--muted);
  font-size: 11px;
}

.settings-side-stack {
  display: grid;
  grid-template-rows: 114px 132px;
  gap: 10px;
  height: 256px;
}

.settings-validity-card,
.settings-tags-card,
.settings-contact-card,
.settings-points-card {
  padding: 10px;
}

/* Rows size to their content. Pinning them meant the wrapped second label plus its select
   needed more room than the row allowed and spilled out of the card. */
.settings-validity-card {
  display: grid;
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  min-height: 114px;
}

.settings-validity-card .settings-control-field input,
.settings-validity-card .settings-control-field select,
.settings-contact-card .settings-control-field input,
.settings-points-grid .settings-control-field input {
  height: 22px;
  border-radius: 4px;
}

.settings-validity-card .settings-control-field:first-child input {
  width: 54px;
}

.settings-validity-card .settings-control-field:last-child select {
  width: 73px;
}

.settings-tags-card {
  height: 132px;
}

.settings-tags-card .field-label {
  margin-bottom: 6px;
}

.tag-entry {
  display: grid;
  grid-template-columns: 161px 70px;
  gap: 6px;
}

.tag-entry input {
  min-width: 0;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 11px;
}

.tag-entry .button {
  width: 70px;
  min-height: 22px;
  height: 22px;
  padding: 0;
}

.tag-entry .button:disabled {
  background: #fde9ed;
  color: #f8bdc7;
  opacity: 1;
}

.settings-divider {
  height: 1px;
  margin: 9px 0 7px;
  background: var(--line);
}

.settings-tags-card .tag-list {
  gap: 5px 8px;
}

.settings-tags-card .tag {
  min-height: 19px;
  height: 19px;
  padding: 0 8px;
  font-size: 8px;
}

.settings-points-card,
.settings-contact-card {
  height: 128px;
}

.settings-points-card h2 {
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 17px;
}

.settings-points-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-points-grid .settings-control-field input {
  width: 60px;
}

.settings-points-grid .field-help {
  width: 208px;
  margin-top: 7px;
  gap: 4px;
  color: #a0a0a0;
  font-size: 7px;
  font-weight: 600;
  line-height: 9.562px;
}

.settings-points-grid .field-help svg {
  width: 8px;
  height: 8px;
  margin-top: 1px;
}

.settings-contact-card {
  display: grid;
  grid-template-rows: repeat(2, 50px);
  gap: 8px;
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, calc(796px + var(--wide-growth)));
  margin-top: 11px;
}

.legal-grid .legal-card {
  width: 100%;
  height: 428px;
  padding: 10px;
}

.legal-card h2 {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 17px;
}

.legal-field {
  display: grid;
  grid-template-rows: 12px 362px;
  gap: 6px;
}

.legal-field textarea {
  width: 100%;
  height: 362px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  resize: none;
  color: var(--muted);
  font-size: 11px;
}

.communications-page .page-header,
.communication-editor-page .page-header {
  margin-bottom: 38px;
}

.split-communications {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 23px;
  width: min(100%, calc(853px + var(--wide-growth)));
}

.communication-column {
  min-width: 0;
}

.communication-toolbar,
.communication-editor-toolbar,
.media-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.communication-toolbar,
.communication-editor-toolbar {
  height: 23px;
  margin-bottom: 8px;
}

.communication-add,
.communication-publish {
  min-height: 23px;
  height: 23px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 8px;
}

.communication-add svg,
.communication-publish svg {
  width: 12px;
  height: 12px;
}

.communication-add.news-add {
  width: 142px;
}

.communication-add.message-add {
  width: 158px;
}

.communication-table-shell {
  width: 100%;
  height: 364px;
}

.communication-table-shell .data-table th,
.communication-table-shell .data-table td {
  height: 26px;
  padding: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-table-shell .data-table th {
  height: 37px;
  color: var(--muted);
}

.communication-table-shell .data-table .checkbox-cell {
  padding-left: 11px;
}

.communication-editor-page .page-header {
  width: min(100%, calc(853px + var(--wide-growth)));
}

.communication-editor-toolbar,
.communication-editor-card {
  width: min(100%, calc(415px + var(--wide-growth)));
}

.communication-publish {
  width: 152px;
}

.message-editor-page .communication-publish {
  width: 151px;
}

.communication-editor-card {
  display: grid;
  gap: 10px;
  height: 265px;
  padding: 10px;
}

.message-editor-page .communication-editor-card {
  height: 382px;
}

.message-editor-page .communication-editor-card.has-selected-recipients {
  height: 659px;
}

.communication-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.communication-field label {
  color: var(--muted);
  font-size: 11px;
  line-height: 12px;
}

.communication-field input,
.communication-field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
}

.communication-field input {
  height: 23px;
  padding: 0 9px;
}

.communication-field textarea {
  height: 75px;
  padding: 9px;
  resize: none;
}

.communication-field input::placeholder,
.communication-field textarea::placeholder {
  color: #c4c4c4;
}

.communication-title-field {
  height: 41px;
}

.communication-description-field {
  height: 94px;
}

.communication-image-field {
  height: 87px;
}

.communication-image-field .media-picker {
  width: 68px;
  height: 68px;
}

.communication-selection-field {
  width: 187px;
  height: 44px;
}

.communication-selection-field .button {
  width: 89px;
  height: 22px;
}

.communication-recipient-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 179px;
  min-width: 0;
}

.communication-recipient-field > label {
  height: 9px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 9px;
}

.communication-recipient-field.is-selected {
  width: 309px;
}

.media-page .page-header {
  margin-bottom: 6px;
}

.media-toolbar {
  align-items: flex-end;
  height: 32px;
  margin-bottom: 7px;
}

.media-add {
  width: 117px;
  min-height: 32px;
  height: 32px;
  margin-top: 0;
  padding: 0 12px;
  font-size: 11px;
}

.media-add svg {
  width: 13px;
  height: 13px;
}

.media-table-shell {
  position: relative;
  width: 100%;
  height: 443px;
}

.media-selection-actions {
  position: absolute;
  top: 8px;
  left: 40px;
  z-index: 8;
  display: flex;
  align-items: center;
}

.media-selection-actions[hidden] {
  display: none;
}

.button.compact.media-delete-button {
  box-sizing: border-box;
  width: 82px;
  min-height: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  background: #e93d3d;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.media-delete-button svg {
  width: 10px;
  height: 10px;
  stroke-width: 2;
}

.media-table-shell.is-selecting thead th:not(.checkbox-cell) {
  color: transparent;
}

.media-table-shell .data-table th,
.media-table-shell .data-table td {
  height: 44px;
  padding: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-table-shell .data-table th {
  height: 37px;
  color: var(--muted);
}

.media-table-shell .data-table .checkbox-cell {
  padding-left: 11px;
}

.media-page .data-table tbody tr.is-selected {
  background: #f4f7ff;
}

.media-table-shell .data-table input[type="checkbox"] {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #424242;
  border-radius: 3px;
  background: #fff center / 10px 10px no-repeat;
}

.media-table-shell .data-table input[type="checkbox"]:checked {
  background-color: #424242;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2012%2012%27%3E%3Cpath%20d%3D%27M2.4%206.2%204.9%208.7%209.8%203.4%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
}

.media-table-shell #mediaSelectAll:indeterminate {
  border-color: #424242;
  background-color: #424242;
  background-image: linear-gradient(#fff, #fff);
  background-position: center;
  background-size: 7px 1px;
  background-repeat: no-repeat;
}

.media-thumb-cell img {
  display: block;
  width: 29px;
  height: 29px;
  border-radius: 5px;
  object-fit: cover;
}

.media-thumb-cell {
  padding-left: 2px !important;
}

.media-filename span,
.media-filename small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-filename span {
  font-size: 11px;
}

.media-filename small {
  margin-top: 1px;
  color: var(--ink);
  font-size: 11px;
}

.media-help {
  margin-top: 8px;
}

.payouts-page {
  padding-top: 68px;
}

.payout-content {
  width: min(100%, calc(466px + var(--wide-growth)));
  max-width: 100%;
  transform: scale(1.12);
  transform-origin: top left;
}

.payouts-page .page-header {
  margin-bottom: 24px;
}

.payout-panel {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

.payout-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.payout-card {
  min-height: 50px;
  padding: 7px 10px;
  border: 0.5px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
}

.payout-card strong,
.payout-card span {
  display: block;
  overflow: hidden;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payout-card strong {
  color: #323232;
  font-size: 12px;
}

.payout-card span {
  color: var(--muted);
  font-size: 11px;
}

.payout-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 32px 24px;
  border: 0.5px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  text-align: center;
}

.payout-empty > svg {
  width: 22px;
  height: 22px;
  color: var(--muted);
}

.payout-empty h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.payout-empty p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* `.payout-empty p` is (0,1,1) and this was (0,1,0), so the smaller size never applied however
   late it sits in the file — the same trap `.data-table td.table-state` documents in
   backend-ui.css. Qualifying the selector is what makes the intended size win. */
.payout-empty p.payout-empty-hint {
  font-size: 11px;
}

.payout-bank-card {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  padding: 7px 7px 7px 10px;
  border: 0.5px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
}

.payout-bank-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 34px;
}

.payout-bank-meta > svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.payout-bank-meta span,
.payout-bank-meta strong,
.payout-bank-meta small {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payout-bank-meta strong {
  width: 161px;
  color: #323232;
  font-size: 12px;
}

.payout-bank-meta small {
  width: 144px;
  color: var(--muted);
  font-size: 11px;
}

.payout-bank-card button {
  flex: 0 0 123px;
  width: 123px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: #f2f2f2;
  color: #8b8b8b;
  font-size: 11px;
  font-weight: 600;
  opacity: 1;
}

.payout-history {
  width: 100%;
  max-width: 100%;
  height: 138px;
  overflow: hidden;
  border: 0.5px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
}

.payout-history table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.payout-history col:nth-child(1),
.payout-history col:nth-child(2) {
  width: 32.1888%;
}

.payout-history col:nth-child(3) {
  width: 35.6224%;
}

.payout-history th,
.payout-history td {
  height: 22px;
  padding: 0 0 0 10px;
  border-bottom: 0.5px solid var(--line-strong);
  color: #424242;
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  text-align: left;
}

.payout-history th {
  height: 24px;
  color: var(--muted);
}

.payout-history td:nth-child(3) {
  position: relative;
  white-space: nowrap;
}

.payout-history td:nth-child(3) span {
  display: inline-block;
  width: 76px;
}

.payout-history td:nth-child(3) button {
  margin-left: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  text-decoration: underline;
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: start center;
  padding: 64px 20px 30px;
}

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

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(27, 29, 35, 0.45);
}

.modal {
  position: relative;
  z-index: 1;
  width: min(100%, 530px);
  max-height: calc(100vh - 94px);
  overflow-y: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 70px rgba(18, 26, 49, 0.22);
}

.modal.narrow {
  width: min(100%, 360px);
}

.modal-layer.media-delete-layer {
  display: block;
  padding: 0;
}

.media-delete-layer .modal-backdrop {
  background: transparent;
}

.modal.media-delete-confirm {
  position: fixed;
  top: var(--media-delete-top);
  left: var(--media-delete-left);
  width: 215px;
  height: 102px;
  max-height: none;
  overflow: hidden;
  border-radius: 7px;
  background: #fcfcfc;
  box-shadow: none;
}

.media-delete-dialog {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 16px 12px;
}

.media-delete-dialog p {
  width: 190px;
  margin: 0;
  color: #424242;
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}

.media-delete-actions {
  display: grid;
  grid-template-columns: repeat(2, 55px);
  gap: 8px;
}

.media-delete-actions button {
  width: 55px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #9a9a9a;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 0;
  color: var(--blue);
  font-size: 17px;
}

.modal-body {
  padding: 18px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 18px 18px;
}

.profile-dialog {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
}

.profile-dialog .profile-avatar {
  width: 54px;
  height: 54px;
}

.profile-dialog .profile-avatar svg {
  width: 30px;
  height: 30px;
}

.profile-dialog h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.profile-dialog p {
  margin: 3px 0;
  color: var(--muted);
}

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

/* Figma profile state: a fixed drawer, not a centered dialog. */
.modal-layer.profile-layer {
  display: block;
  padding: 0;
  pointer-events: none;
}

.profile-layer .modal-backdrop {
  background: transparent;
  pointer-events: auto;
}

.profile-drawer {
  position: absolute;
  top: -55px;
  right: -40px;
  z-index: 1;
  width: 413px;
  height: 833px;
  max-height: none;
  overflow: visible;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 4px 63.6px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
}

.profile-drawer-close {
  position: absolute;
  top: 142px;
  left: 280px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--pink);
  color: #fff;
  box-shadow: inset 0 3px 3px rgba(255, 255, 255, 0.35), 0 2px 5px rgba(35, 43, 68, 0.12);
}

.profile-drawer-close svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}

.profile-drawer-card {
  position: absolute;
  top: 188px;
  left: 75px;
  width: 228px;
  height: 176px;
  margin: 0;
  padding: 20px;
  border-radius: 7px;
  background: rgba(21, 70, 185, 0.06);
}

.profile-drawer-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #a7a7a7;
  color: #fff;
}

.profile-drawer-avatar svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.8;
}

.profile-drawer-card h3 {
  margin: 6px 0 0;
  color: #424242;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.profile-drawer-card p {
  margin: 0;
  color: #7d7d7d;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.profile-drawer-email {
  margin-top: 0 !important;
}

.profile-drawer-email strong {
  color: #424242;
  font-weight: 600;
}

.profile-drawer-support {
  color: #424242 !important;
}

.profile-drawer-support a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 1px;
}

.profile-logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pink);
  font-size: 11px;
  font-weight: 600;
}

.profile-logout svg {
  width: 11px;
  height: 11px;
  stroke-width: 1.8;
}

/* Figma period state: preset rail plus a two-month range calendar. */
.modal-layer.date-range-layer {
  place-items: start center;
  padding: 86px 20px 30px;
}

.date-range-modal {
  width: min(calc(100vw - 40px), 806px);
  max-height: none;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(18, 26, 49, 0.18);
}

.date-range-picker {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  min-height: 426px;
  background: #fff;
}

.date-range-presets {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  border-right: 1px solid var(--line);
}

.date-range-presets > span {
  padding: 8px 16px 4px;
  color: #7d7d7d;
  font-size: 10px;
  font-weight: 600;
}

.date-range-presets button {
  min-height: 36px;
  padding: 6px 16px;
  border: 0;
  background: transparent;
  color: #424242;
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  text-align: left;
}

.date-range-presets button:hover {
  background: #f5f5f5;
}

.date-range-presets button.is-active {
  background: #e5e5e5;
}

.date-range-main {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  padding: 18px 18px 12px;
}

.date-range-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
}

.date-range-inputs > svg {
  width: 14px;
  height: 14px;
  color: #a7a7a7;
}

.date-range-inputs input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #bdbdbd;
  border-radius: 7px;
  background: #fff;
  color: #424242;
  font-size: 11px;
  font-weight: 600;
}

.date-range-inputs button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #d3d3d3;
  border-radius: 7px;
  background: #fff;
  color: #7d7d7d;
}

.date-range-inputs button svg {
  width: 16px;
  height: 16px;
}

.calendar-navigation {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 -24px;
  pointer-events: none;
}

.calendar-navigation button {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7d7d7d;
  pointer-events: auto;
}

.calendar-navigation button svg {
  width: 15px;
  height: 15px;
}

.calendar-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: 0 3px;
}

.calendar-month h3 {
  margin: 0 0 10px;
  color: #424242;
  font-size: 11px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
}

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

.calendar-weekdays span {
  display: grid;
  place-items: center;
  height: 24px;
  color: #7d7d7d;
  font-size: 11px;
  font-weight: 600;
}

.calendar-day {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #424242;
  font-size: 10px;
  font-weight: 600;
}

.calendar-day:hover:not(.is-future) {
  background: #f0f0f0;
}

.calendar-day.is-in-range {
  background: #f1f1f1;
}

.calendar-day.is-selected {
  border-radius: 6px;
  background: #424242;
  color: #fff;
}

.calendar-day.is-future {
  color: #cecece;
}

.calendar-day.is-empty {
  pointer-events: none;
}

.date-range-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.date-range-actions .button {
  min-height: 27px;
  padding: 0 12px;
  border-radius: 6px;
}

.date-range-actions .button.primary {
  background: #424242;
}

.date-range-actions .button.secondary {
  color: #424242;
}

.toast-region {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 230px;
  padding: 11px 13px;
  border-radius: 7px;
  background: #252a35;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  font-size: 11px;
  animation: toast-in 180ms ease-out;
}

.toast svg {
  width: 15px;
  height: 15px;
  color: #7ad7a6;
}

/* A refusal and a failure have to be legible as such at a glance, against the same dark chip.
   The left edge carries the tone as well as the icon, so it still reads for anyone who cannot
   separate the green from the amber. */
.toast--warning {
  box-shadow: inset 3px 0 0 0 #f0b429, 0 12px 28px rgba(0, 0, 0, 0.18);
}

.toast--warning svg {
  color: #f0b429;
}

.toast--error {
  box-shadow: inset 3px 0 0 0 #f2777a, 0 12px 28px rgba(0, 0, 0, 0.18);
}

.toast--error svg {
  color: #f2777a;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 18;
  border: 0;
  background: rgba(20, 25, 35, 0.38);
}

/* Dashboard readability pass.
   Dashboard text authored at 10px renders at 12px; the 9px tier and the
   smallest 7-8px annotations render at 11px. Matching control geometry keeps
   both tiers unclipped. The intentionally miniaturized membership phone
   preview keeps its original 4-8px art-directed type. */
.button,
.status,
.membership-benefit-row,
.object-picker-item small,
.date-range-presets > span,
.calendar-day {
  font-size: 12px;
  line-height: 16px;
}

.figma-pagination,
.search-field input,
.button.compact,
.back-button,
.bulk-points-field input,
.analytics-filter,
.activity-item strong,
.activity-item span,
.order-detail-toolbar > .select-field,
.order-detail-toolbar > .custom-select.select-field .custom-select__button,
.order-detail-toolbar > .custom-select.select-field .custom-select__option,
.order-payment-chip,
.select-field,
.product-category-card .custom-select__button,
.product-category-card .custom-select__option,
.package-fields-label label,
.product-tags-card h2,
.membership-benefit-row input,
.membership-value,
.membership-products-field .list-editor-item,
.value-suffix,
.custom-select__button,
.custom-select__option,
.reward-dates-card .field input,
.media-library-count,
.media-library-search input,
.media-library-add,
.media-upload-button,
.media-upload-zone > span,
.media-library-item,
.media-library-item small,
.recipient-toggle button,
.recipient-selection-count,
.recipient-search input,
.recipient-customer-row,
.reward-product-row,
.reward-discount-row,
.reward-repeat-row,
.reward-selected-object span,
.reward-discount-input input,
.reward-repeat-row select,
.field label,
.field-label,
.field input,
.field select,
.field textarea,
.checkbox-row,
.product-pricing-card .field-help,
.media-picker-image-count,
.tag,
.list-editor-item,
.soft-action,
.settings-asset-field label,
.settings-control-field label,
.legal-field label,
.settings-tags-card .field-label,
.settings-control-field input,
.settings-control-field select,
.color-control input:last-child,
.tag-entry input,
.settings-tags-card .tag,
.settings-points-grid .field-help,
.legal-field textarea,
.communication-add,
.communication-publish,
.communication-field label,
.communication-field input,
.communication-field textarea,
.communication-recipient-field > label,
.media-add,
.media-filename span,
.media-filename small,
.payout-bank-card button,
.payout-history th,
.payout-history td,
.profile-logout,
.calendar-weekdays span {
  font-size: 11px;
  line-height: 16px;
}

.analytics-filter,
.activity-item span,
.order-payment-chip,
.product-pricing-card .field-help,
.recipient-search input,
.media-picker-image-count,
.settings-tags-card .tag,
.settings-points-grid .field-help,
.communication-add,
.communication-publish {
  font-size: 11px;
  line-height: 15px;
}

/* Global compact controls grow with their labels instead of clipping them. */
.search-field {
  height: 30px;
}

.button {
  min-height: 34px;
}

.button.compact {
  min-height: 28px;
}

.back-button,
.order-detail-page .back-button,
.customer-detail-page .back-button,
.reward-editor-page .back-button,
.product-editor-page .back-button,
.membership-editor-page .back-button {
  width: auto;
  min-width: 68px;
  height: 24px;
  padding-inline: 9px;
}

.bulk-points-field,
.bulk-points-field input {
  height: 28px;
}

.analytics-filter {
  height: 26px;
  padding-inline: 9px;
}

.activity-item {
  min-height: 48px;
}

.metric-card {
  min-height: 62px;
  height: auto;
}

.metric-card span {
  line-height: 15px;
}

.list-add-button {
  width: auto !important;
  min-width: 136px;
}

.select-field {
  height: 30px;
}

.custom-select__option {
  height: 32px;
  line-height: 32px;
}

.field label,
.field-label,
.settings-asset-field label,
.settings-control-field label,
.legal-field label,
.settings-tags-card .field-label,
.communication-field label,
.communication-recipient-field > label {
  line-height: 15px;
}

.field input,
.field select,
.settings-control-field input,
.settings-control-field select {
  height: 30px;
}

.field textarea {
  min-height: 82px;
  line-height: 15px;
}

.tag,
.settings-tags-card .tag {
  min-height: 24px;
  height: 24px;
}

.soft-action {
  min-height: 30px;
}

.figma-pagination button,
.figma-pagination span {
  min-width: 18px;
  height: 18px;
}

/* Order detail micro status controls. */
.order-detail-page .order-detail-toolbar,
.order-detail-heading {
  min-height: 62px;
  height: 62px;
}

.order-detail-toolbar > .select-field {
  width: 108px;
  height: 26px;
}

.order-detail-toolbar > .custom-select.select-field .custom-select__option {
  height: 26px;
  line-height: 26px;
}

.order-id-row {
  min-height: 20px;
  height: 20px;
}

.order-payment-chip {
  width: auto;
  min-width: 46px;
  height: 18px;
  line-height: 15px;
}

/* Product and reward editors: larger controls with content-driven cards. */
.reward-editor-page .editor-status,
.product-editor-page .editor-status {
  height: 28px;
}

.reward-editor-page [data-delete-object],
.reward-editor-page #editorSave,
.product-editor-page [data-delete-object],
.product-editor-page #editorSave {
  min-height: 28px;
  height: 28px;
}

.product-category-card {
  height: auto;
  min-height: 69px;
}

.product-category-card .field,
.product-category-card .field select,
.product-category-card .custom-select,
.product-category-card .custom-select__menu {
  width: 108px !important;
  min-width: 108px;
}

.product-category-card .field select,
.product-category-card .custom-select,
.product-category-card .custom-select__option {
  height: 28px !important;
}

.product-category-card .custom-select__option {
  line-height: 28px;
}

.product-editor-grid .field input,
.product-editor-grid .field select,
.reward-editor-grid .field input,
.reward-editor-grid .field select,
.reward-repeat-row select,
.reward-discount-input,
.membership-editor-grid .field input,
.membership-editor-grid .field select {
  height: 28px;
}

.product-editor-grid .field textarea,
.reward-editor-grid .field textarea,
.membership-editor-grid .field textarea {
  min-height: 82px;
  height: 82px;
}

.package-fields-label label,
.product-tags-card h2 {
  line-height: 15px;
}

.package-products-field .list-editor-items,
.package-products-field .soft-action {
  width: 100%;
}

.package-products-field .soft-action {
  min-height: 28px;
  height: 28px;
}

.product-content-card {
  min-height: 280px;
}

.product-content-card.has-package-fields {
  min-height: 410px;
}

.product-pricing-card {
  min-height: 238px;
}


.product-pricing-card .field-help,
.settings-points-grid .field-help {
  width: 100%;
  max-width: 100%;
  gap: 6px;
  line-height: 15px;
}

.product-pricing-card .field-help svg,
.settings-points-grid .field-help svg {
  width: 11px;
  height: 11px;
  margin-top: 2px;
  transform: none;
}

.product-pricing-card .field-help span {
  width: auto;
  flex: 1 1 auto;
}

.product-tags-card {
  min-height: 165px;
}

.reward-product-row .button,
.reward-discount-input,
.reward-repeat-row select {
  min-height: 28px;
}

.reward-product-row .button {
  width: 120px;
  height: 28px;
}

.reward-basic-card,
.reward-dates-card,
.reward-recipient-card,
.reward-message-card {
  height: auto;
  overflow: visible;
}

.reward-basic-card {
  min-height: 190px;
}

.reward-dates-card {
  min-height: 210px;
}

.reward-recipient-card {
  min-height: 94px;
}

.reward-recipient-card.is-selected {
  min-height: 390px;
}

.reward-message-card {
  min-height: 225px;
}

.recipient-toggle {
  height: 36px;
}

.recipient-toggle button {
  height: 30px;
}

.recipient-customer-panel {
  grid-template-rows: 15px 283px;
  height: 303px;
}

.recipient-customer-list {
  grid-auto-rows: 36px;
  height: 283px;
}

.recipient-search-row,
.recipient-customer-row {
  height: 36px;
}

.recipient-search {
  height: 29px;
}

.recipient-search input {
  height: 27px;
}

/* Membership editor acceptance: readable values without suffix overflow. */
.membership-editor-grid {
  grid-template-columns: minmax(431px, 1fr) 269px;
  width: min(100%, calc(720px + var(--wide-growth)));
}

.membership-home-card {
  min-height: 270px;
}

.membership-benefit-row.empty {
  min-height: 28px;
  height: 28px;
}

.membership-benefit-row input {
  height: 24px !important;
}

.membership-benefits-field .soft-action {
  min-height: 28px;
  height: 28px;
}

.membership-value,
.value-suffix {
  height: 28px;
}

.membership-value input,
.value-suffix input,
.value-suffix.points input {
  height: 24px !important;
}

.membership-price-grid .field:nth-child(1) .membership-value {
  width: 96px;
}

.membership-price-grid .field:nth-child(2) .membership-value {
  width: 90px;
}

.membership-price-grid .field:nth-child(3) .membership-value {
  width: 50px;
}

.membership-price-grid.field-grid.three {
  grid-template-columns: minmax(130px, 1.2fr) minmax(110px, 1fr) minmax(92px, 0.8fr);
  width: 100%;
  gap: 12px;
}

.membership-price-grid .field {
  grid-template-rows: 15px 28px;
  align-content: start;
  gap: 6px;
}

.membership-price-grid .field label {
  min-height: 15px;
  white-space: nowrap;
}

.membership-benefits-field,
.membership-products-field,
.membership-cta-field,
.membership-products-field .list-editor-items,
.membership-products-field .soft-action {
  width: 100%;
}

.membership-products-field .soft-action {
  min-height: 30px;
  height: 30px;
}

/* Media library and table actions. */
.media-library-toolbar {
  min-height: 30px;
}

.media-library-search {
  height: 30px;
}

.media-library-add,
.media-upload-button {
  height: 28px;
}

.media-library-add {
  width: 122px;
}

.media-upload-button {
  width: 138px;
}

.modal.media-library-modal {
  height: min(545px, calc(100dvh - 60px));
}

.media-library-modal.has-media-selection {
  height: min(514px, calc(100dvh - 60px));
}

.media-add {
  width: 132px;
  min-height: 34px;
  height: 34px;
}

/* Settings cards expand with two-line 11px helper text. */
.settings-top-grid,
.settings-middle-grid,
.settings-branding-card,
.settings-side-stack {
  height: auto;
}

.settings-top-grid {
  min-height: 262px;
}

.settings-branding-card {
  grid-template-rows: 112px 112px;
  min-height: 262px;
}

.settings-asset-field {
  grid-template-rows: 15px 92px;
  height: 112px;
}

.settings-brand-controls {
  grid-template-rows: repeat(2, 55px);
}

.settings-side-stack {
  grid-template-rows: minmax(124px, auto) minmax(150px, auto);
}

.settings-validity-card,
.settings-tags-card,
.settings-points-card,
.settings-contact-card {
  height: auto;
}

.settings-validity-card {
  grid-template-rows: repeat(2, auto);
  min-height: 124px;
}

.settings-validity-card .settings-control-field input,
.settings-validity-card .settings-control-field select,
.settings-contact-card .settings-control-field input,
.settings-points-grid .settings-control-field input,
.tag-entry input,
.tag-entry .button {
  height: 28px;
}

.settings-validity-card .settings-control-field:first-child input {
  width: 72px;
}

.settings-validity-card .settings-control-field:last-child select,
.settings-validity-card .settings-control-field:last-child .custom-select {
  width: 96px;
}

.settings-points-grid .settings-control-field input {
  width: 78px;
}

.settings-tags-card {
  min-height: 150px;
}

.settings-points-card,
.settings-contact-card {
  min-height: 144px;
}

.settings-contact-card {
  grid-template-rows: repeat(2, 55px);
}

.legal-field {
  grid-template-rows: 15px 362px;
}

.legal-grid .legal-card {
  height: 431px;
}

/* Communications, payouts, profile and date controls. */
.communication-toolbar,
.communication-editor-toolbar {
  height: 30px;
}

.communication-add,
.communication-publish {
  min-height: 30px;
  height: 30px;
}

.communication-publish,
.message-editor-page .communication-publish {
  width: auto;
  min-width: 166px;
}

.communication-field input {
  height: 28px;
}

.communication-field textarea {
  height: 84px;
  line-height: 15px;
}

.communication-title-field {
  height: 47px;
}

.communication-description-field {
  height: 109px;
}

.communication-selection-field {
  height: 50px;
}

.communication-selection-field .button {
  width: auto;
  min-width: 105px;
  height: 28px;
  min-height: 28px;
}

.communication-recipient-field > label {
  height: 15px;
  margin-bottom: 8px;
}

.communication-editor-card,
.message-editor-page .communication-editor-card,
.message-editor-page .communication-editor-card.has-selected-recipients {
  height: auto;
}

.communication-editor-card {
  min-height: 285px;
}

.message-editor-page .communication-editor-card {
  min-height: 410px;
}

.message-editor-page .communication-editor-card.has-selected-recipients {
  min-height: 690px;
}

.payout-bank-card button {
  width: auto;
  min-width: 155px;
  min-height: 34px;
  height: 34px;
}

.payout-content {
  width: min(100%, calc(560px + var(--wide-growth)));
}

.payout-bank-meta > span {
  flex: 1 1 auto;
  min-width: 0;
}

.payout-bank-meta strong,
.payout-bank-meta small {
  width: auto;
}

.payout-history {
  height: 170px;
}

.payout-history th,
.payout-history td {
  height: 28px;
}

.payout-history th {
  height: 30px;
}

.calendar-weekdays span {
  height: 26px;
}

@media (max-width: 1050px) {
  :root {
    --sidebar-width: 220px;
    --content-left: 16px;
    --content-right: 16px;
  }

  .topbar {
    grid-template-columns: minmax(240px, 1fr) 130px;
  }

  .metric-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  :root {
    --content-left: 12px;
    --content-right: 12px;
  }

  .dashboard-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-102%);
    transition: transform 180ms ease;
    box-shadow: 16px 0 50px rgba(24, 32, 52, 0.16);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .topbar {
    grid-template-columns: 37px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 var(--content-right) 0 var(--content-left);
  }

  .icon-button.mobile-menu {
    display: grid;
    color: #fff;
  }

  .profile-button {
    width: 42px;
    padding: 0 9px;
  }

  .profile-button > span:first-child {
    display: none;
  }

  .page,
  .page.page-settings {
    width: var(--content-width);
    padding-top: 24px;
    transform: none;
  }

  .detail-layout,
  .editor-grid,
  .settings-top-grid,
  .split-communications {
    grid-template-columns: 1fr;
  }

  .data-table {
    min-width: 760px;
  }

  .phone-preview {
    max-width: 320px;
  }
}

@media (max-width: 580px) {
  body {
    font-size: 12px;
  }

  .global-search {
    height: 36px;
  }

  .page-header,
  .page-toolbar,
  .editor-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .page-header,
  .editor-toolbar {
    display: flex;
  }

  .page-title,
  .editor-title {
    font-size: 21px;
  }

  .search-field {
    width: 100%;
    height: 34px;
  }

  .button.compact {
    min-height: 34px;
  }

  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-wrap {
    height: 220px;
    overflow-x: auto;
  }

  .chart-wrap img {
    min-width: 680px;
  }

  .field-grid,
  .field-grid.three,
  .branding-grid,
  .legal-grid,
  .payout-summary {
    grid-template-columns: 1fr;
  }

  .legal-grid .settings-card {
    min-height: 250px;
  }

  .legal-grid textarea {
    min-height: 190px;
  }

  .order-line {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .order-line span:nth-child(3) {
    display: none;
  }

  .summary-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .summary-line span:nth-child(2) {
    display: none;
  }
}

/* 2026-07-19 local interaction/layout corrections. */

/* The message editor uses content-sized rows so the 12px labels cannot spill
   into the following recipient controls. */
.communication-editor-toolbar,
.communication-editor-card {
  max-width: 640px;
}

.communication-editor-card {
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
}

.communication-title-field,
.communication-description-field,
.communication-image-field,
.communication-selection-field {
  height: auto;
}

.communication-selection-field {
  width: 100%;
}

.communication-selection-field .button {
  justify-self: start;
  width: 187px;
  max-width: 100%;
}

.communication-selection-field .button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.communication-recipient-field {
  width: max-content;
  max-width: 100%;
}

.communication-recipient-field.is-selected {
  width: min(100%, 309px);
}

.message-editor-page .recipient-toggle {
  width: max-content;
  max-width: 100%;
}

.message-editor-page .recipient-toggle button {
  width: auto;
  min-width: 100px;
  padding-inline: 14px;
}

.message-editor-page .recipient-toggle button + button {
  width: auto;
  min-width: 145px;
}

.communication-editor-card {
  min-height: 292px;
}

.message-editor-page .communication-editor-card {
  min-height: 430px;
}

.message-editor-page .communication-editor-card.has-selected-recipients {
  min-height: 740px;
}

/* Keep all three order metadata lines on distinct, evenly spaced baselines. */
.order-detail-page .back-button {
  margin-bottom: 10px;
  line-height: 16px;
}

.order-detail-page .order-detail-toolbar,
.order-detail-heading {
  min-height: 72px;
  height: 72px;
}

.order-detail-page .order-detail-toolbar {
  margin-bottom: 12px;
}

.order-detail-heading {
  display: grid;
  grid-template-rows: 20px 46px;
  row-gap: 6px;
}

.order-id-row {
  min-height: 20px;
  height: 20px;
  gap: 4px;
}

.order-number,
.order-paid-at,
.order-timestamp {
  line-height: 20px;
}

.order-metadata {
  display: grid;
  grid-template-rows: repeat(2, 20px);
  gap: 6px;
  width: max-content;
  height: 46px;
  margin: 0 0 0 1px;
}

.order-timestamp {
  min-height: 20px;
}

/* Enlarge the membership preview while retaining room for the editable form. */
.membership-editor-grid {
  grid-template-columns: minmax(431px, 1fr) 320px;
  width: min(100%, calc(771px + var(--wide-growth)));
}

.membership-preview-card,
.membership-section-card {
  width: 320px;
}

.membership-preview-card {
  min-height: 714px;
  height: 714px;
}

.membership-phone-preview {
  transform: scale(1.18);
  transform-origin: top left;
}

.membership-section-card {
  min-height: 276px;
  height: auto;
}

.membership-section-preview {
  box-sizing: border-box;
  width: 100%;
  min-height: 142px;
  height: auto;
  padding: 22px 20px;
}

.membership-price-grid .field:nth-child(1) .membership-value {
  width: 116px;
}

.membership-price-grid .field:nth-child(1) .membership-value input {
  width: 24px !important;
  min-width: 24px;
}

/* Preserve the gift artwork's 290:180 source ratio as its column grows. */
.reward-preview-card {
  height: auto;
  min-height: 229px;
}

.reward-preview-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 290 / 180;
  object-fit: contain;
}

/* The Figma drawer begins above the viewport, so pin its other edge instead
   of using a height that leaves a gap on taller windows. */
.profile-drawer {
  bottom: 0;
  height: auto;
}

/* Page numbers are real buttons; keep the Figma appearance and expose focus. */
.figma-pagination button {
  border-radius: 3px;
}

.figma-pagination button:not(:disabled) {
  cursor: pointer;
}

.figma-pagination button.is-active,
.figma-pagination button[aria-current="page"] {
  background: #f4f3f3;
  color: var(--ink);
}

.figma-pagination button:disabled {
  cursor: default;
  opacity: 0.38;
}

.figma-pagination button:focus-visible {
  outline: 2px solid #6cade0;
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .membership-editor-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .membership-preview-card,
  .membership-section-card {
    width: min(100%, 320px);
  }
}

/* Keep product lines, totals, and the payment summary on the same guides.
   The flexible tracks also use the full card width on larger dashboards. */
@media (min-width: 821px) {
  .order-detail-page {
    --order-columns:
      30px
      minmax(0, 1.17fr)
      minmax(160px, 1fr)
      minmax(56px, 0.35fr);
    --order-column-gap: 11px;
  }

  .order-detail-page .order-products-card .order-line,
  .order-detail-page .order-products-card .summary-line,
  .order-detail-page .order-summary-card .summary-line {
    grid-template-columns: var(--order-columns);
    column-gap: var(--order-column-gap);
  }

  .order-detail-page .summary-line > :first-child {
    grid-column: 1 / 3;
  }

  .order-detail-page .summary-line > :nth-child(2) {
    grid-column: 3;
  }

  .order-detail-page .summary-line > :last-child {
    grid-column: 4;
  }
}

/* Small form captions share one 11px type tier across dashboard editors.
   Navigation keeps its existing, separately tuned sizing. */
.field label,
.field-label,
.package-fields-label label,
.product-tags-card h2,
.reward-discount-row > label,
.reward-repeat-row label,
.gift-points-field label,
.settings-asset-field label,
.settings-control-field label,
.legal-field label,
.settings-tags-card .field-label,
.communication-field label,
.communication-recipient-field > label {
  font-size: 11px;
  line-height: 15px;
}

/* --- 2026-09-01 design round ------------------------------------------------------------- */

/* The legal section used to be four full-width "paste the text here" textareas under the middle
   grid. The design replaces them with one link per document beside the company data, so
   Punktevergabe now spans the row and the two cards share the one below it. */
.settings-middle-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.settings-middle-grid .settings-points-card {
  grid-column: 1 / -1;
}

.settings-legal-links-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* How long the customer has left to book the treatment their membership includes. Set in the
   brand colour beside the item name, which is what marks it out from an ordinary purchased line. */
.order-line .membership-window {
  font-style: normal;
  color: var(--pink);
  margin-left: 6px;
  white-space: nowrap;
}

/* Stripe Connect card. Each salon connects its own account; BeMember never holds the money. */
.settings-stripe-card { display: flex; flex-direction: column; gap: 10px; }

.stripe-state { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 7px; }
.stripe-state.ok { background: #e8f7ee; color: #147a3d; }
.stripe-state.pending { background: #fff4e5; color: #9a5b00; }

.stripe-facts { display: grid; gap: 4px; margin: 0; font-size: 11px; }
.stripe-facts div { display: flex; justify-content: space-between; gap: 8px; }
.stripe-facts dt { color: #7d7d7d; margin: 0; }
.stripe-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; text-align: right; }

.stripe-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* The reward's Beschreibung. Sits under the Titel in the same card; sized like the other
   multi-line editor fields rather than a single-line input. */
.reward-description-field textarea {
  min-height: 64px;
  resize: vertical;
}

/* The Standortcode. Read-only, so it is set rather than an input — it identifies the salon and is
   not the salon's to change. */
.settings-join-code .join-code-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 8px 12px;
  border-radius: 7px;
  background: #f4f4f4;
  color: #323232;
  display: inline-block;
}


/* Punktevergabe holds three earn rules now — Empfehlung, Registrierung and Benachrichtigungen.
   The third replaces the Google-review rule that was removed. */
.settings-points-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .settings-points-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The Auszahlungen page's connected state. `.payout-empty` already covers the unconnected card;
   this is the same white panel with the status block, the facts list and the two actions in it. */
.payout-status {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 32px 24px;
  border: 0.5px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  text-align: center;
}

.payout-status .stripe-facts {
  width: 100%;
  max-width: 320px;
  font-size: 12px;
}

.payout-status .field-help {
  max-width: 420px;
  margin: 0;
}

.payout-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* The connect button sits inside a centred grid, so it must not stretch to the panel's width. */
.payout-empty button,
.payout-actions button {
  min-width: 160px;
}