:root {
  --ink: #151224;
  --muted: #6f6878;
  --line: #e6dfe9;
  --soft: #fff7fc;
  --pink: #c92f78;
  --pink-2: #df6aa2;
  --purple: #7a45a6;
  --deep: #140f20;
}

/* Customer administration */
.customer-admin-page { display: grid; gap: 18px; }
.customer-admin-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 26px 28px; color: #fff; border-radius: 18px;
  background: linear-gradient(120deg, #21132d, #653267 65%, #963b78);
  box-shadow: 0 14px 34px rgba(70, 29, 69, .16);
}
.customer-eyebrow { color: #f2a2cd; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.customer-admin-head h2 { margin: 6px 0 4px; font-size: 27px; }
.customer-admin-head p { margin: 0; color: rgba(255,255,255,.74); font-size: 13px; }
.customer-search {
  display: flex; align-items: center; gap: 9px; width: min(360px,100%); padding: 0 14px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.97);
}
.customer-search svg { width: 18px; color: #8c4d78; }
.customer-search input { width: 100%; height: 44px; border: 0; outline: 0; background: transparent; color: #281b2c; }
.customer-admin-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 18px; align-items: start; }
.customer-result-panel { padding: 0; overflow: hidden; }
.customer-result-title { padding: 18px; border-bottom: 1px solid var(--line); }
.customer-result-title div { display: flex; justify-content: space-between; align-items: center; }
.customer-result-title strong { font-size: 16px; }
.customer-result-title span { color: var(--purple); font-size: 12px; font-weight: 800; }
.customer-result-title small { color: var(--muted); font-size: 11px; }
.customer-search-results { max-height: 720px; overflow-y: auto; }
.customer-search-results > button {
  display: grid; grid-template-columns: 38px minmax(0,1fr) 16px; align-items: center; gap: 10px;
  width: 100%; padding: 13px 14px; text-align: left; border: 0; border-bottom: 1px solid #f0eaf1; background: #fff; cursor: pointer;
}
.customer-search-results > button:hover, .customer-search-results > button.active { background: #fff4fa; }
.customer-search-results > button.active { box-shadow: inset 3px 0 var(--pink); }
.customer-search-results button > span:nth-child(2) { min-width: 0; }
.customer-search-results button strong, .customer-search-results button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-search-results button strong { color: var(--ink); font-size: 13px; }
.customer-search-results button small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.customer-search-results button > svg { width: 15px; color: #ad9bb1; }
.customer-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; color: #963a76; font-weight: 800;
  border: 1px solid #edd9e7; border-radius: 50%; background: linear-gradient(145deg,#fff,#f9e8f4);
}
.customer-no-results, .customer-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 42px 20px; color: var(--muted); text-align: center;
}
.customer-no-results svg, .customer-empty-state svg { width: 34px; height: 34px; color: #c49ab7; }
.customer-no-results strong, .customer-empty-state strong { color: #4d3d50; }
.customer-no-results span, .customer-empty-state span { font-size: 12px; line-height: 1.6; }
.customer-empty-state { min-height: 360px; border: 1px dashed #dbcddd; border-radius: 16px; background: rgba(255,255,255,.72); }
.customer-empty-state[hidden], #customer-detail-content[hidden] { display: none !important; }
.customer-detail-area, #customer-detail-content { min-width: 0; }
.customer-summary-cards { display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 12px; margin-bottom: 18px; }
.customer-summary-cards article {
  position: relative; min-height: 100px; padding: 18px 20px; overflow: hidden;
  border: 1px solid #ebdfea; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(54,25,55,.05);
}
.customer-summary-cards article::before { position: absolute; inset: 0 auto 0 0; width: 4px; content: ""; background: linear-gradient(#e849a3,#8144ec); }
.customer-summary-cards span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.customer-summary-cards strong { font-size: 21px; color: #2c2030; }
.customer-summary-cards small { margin-left: 4px; color: var(--muted); font-size: 11px; }
.customer-name-card strong { font-size: 20px; }
.customer-profile-panel, .customer-history-panel { padding: 20px; margin-bottom: 18px; }
.customer-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.customer-section-title > div { display: flex; align-items: center; gap: 8px; }
.customer-section-title h3 { margin: 0; font-size: 17px; }
.customer-section-title > div > span { color: var(--pink); }
.customer-section-title > span { color: var(--muted); font-size: 11px; }
#customer-profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#customer-profile-form label { display: grid; gap: 6px; color: #55465a; font-size: 12px; font-weight: 700; }
#customer-profile-form label.wide, .customer-profile-actions { grid-column: 1 / -1; }
#customer-profile-form textarea { resize: vertical; padding: 11px 12px; border: 1px solid #dcd1df; border-radius: 9px; font: inherit; outline: none; }
#customer-profile-form textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(230,70,145,.1); }
.customer-profile-actions { display: flex; justify-content: flex-end; }
.customer-profile-actions button {
  display: flex; align-items: center; gap: 7px; padding: 11px 18px; color: #fff; font-weight: 700;
  border: 0; border-radius: 9px; background: linear-gradient(135deg,#ee5aa1,#8c56b8); cursor: pointer;
}
.customer-profile-actions svg { width: 16px; }
.customer-history-list { display: grid; gap: 9px; }
.customer-history-record { border: 1px solid #e7dee9; border-radius: 10px; overflow: hidden; }
.customer-history-record summary {
  display: grid; grid-template-columns: 105px 1fr 1.3fr .8fr 100px 18px; align-items: center; gap: 12px;
  padding: 13px 15px; background: #fff; cursor: pointer; list-style: none;
}
.customer-history-record summary::-webkit-details-marker { display: none; }
.customer-history-record summary span small, .customer-history-record summary span strong { display: block; }
.customer-history-record summary small { margin-bottom: 2px; color: var(--muted); font-size: 9px; }
.customer-history-record summary strong { font-size: 12px; }
.customer-history-date { color: #573f5c; font-size: 12px; font-weight: 800; }
.customer-history-amount { text-align: right; color: #912d69; font-size: 14px; font-weight: 800; }
.customer-history-record summary > svg { width: 16px; transition: transform .2s; }
.customer-history-record[open] summary > svg { transform: rotate(180deg); }
.customer-history-items { padding: 8px 16px 12px; border-top: 1px solid #eee6ef; background: #fcf9fc; }
.customer-history-items > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: #4d414f; font-size: 12px; border-bottom: 1px dashed #e7dfe8; }
.customer-history-items > div:last-child { border: 0; }
.customer-history-items small { color: var(--muted); }
.customer-history-total { margin-top: 3px; font-weight: 800; }
.customer-no-items { justify-content: center !important; color: var(--muted) !important; }

@media (max-width: 1050px) {
  .customer-admin-layout { grid-template-columns: 230px minmax(0,1fr); }
  .customer-summary-cards { grid-template-columns: repeat(2,1fr); }
  .customer-history-record summary { grid-template-columns: 85px 1fr 1fr 80px 16px; }
  .customer-history-record summary span:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .customer-admin-head { align-items: stretch; flex-direction: column; padding: 20px; }
  .customer-search { width: 100%; }
  .customer-admin-layout { grid-template-columns: 1fr; }
  .customer-search-results { max-height: 260px; }
  .customer-summary-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #customer-profile-form { grid-template-columns: 1fr; }
  #customer-profile-form label.wide, .customer-profile-actions { grid-column: auto; }
  .customer-history-record summary { grid-template-columns: 82px 1fr 82px 16px; gap: 7px; padding: 12px 10px; }
  .customer-history-record summary span:nth-child(3), .customer-history-record summary span:nth-child(4) { display: none; }
}

/* Inventory and customer bottle administration */
.inventory-admin-page {
  display: grid;
  gap: 18px;
}

.inventory-admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(120deg, #26142f, #71305f 68%, #a23d75);
  box-shadow: 0 14px 34px rgba(70, 29, 69, 0.16);
}

.inventory-eyebrow {
  color: #f2a2cd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.inventory-admin-head h2 {
  margin: 6px 0 4px;
  font-size: 27px;
}

.inventory-admin-head p,
.inventory-panel-title p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
}

.inventory-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(360px, 100%);
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
}

.inventory-search svg {
  width: 18px;
  color: #8c4d78;
}

.inventory-search input {
  width: 100%;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #281b2c;
}

.inventory-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.inventory-summary-cards article {
  position: relative;
  min-height: 112px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid #ebdfea;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(54, 25, 55, 0.06);
}

.inventory-summary-cards article::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: linear-gradient(#e849a3, #8144ec);
}

.inventory-summary-cards span {
  display: block;
  color: #7e7180;
  font-size: 12px;
  font-weight: 700;
}

.inventory-summary-cards strong {
  display: inline-block;
  margin-top: 8px;
  color: #2f2132;
  font-size: 25px;
}

.inventory-summary-cards small {
  margin-left: 6px;
  color: #9c8f9e;
}

.inventory-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 18px;
}

.inventory-list-panel {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.inventory-panel-title {
  padding: 19px 20px 14px;
}

.inventory-panel-title > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.inventory-panel-title p {
  color: #948697;
  white-space: nowrap;
}

.inventory-table-wrap {
  overflow-x: auto;
}

.inventory-admin-table {
  width: 100%;
  min-width: 700px;
}

.inventory-admin-grid > :last-child .inventory-admin-table {
  min-width: 580px;
}

.inventory-admin-table th {
  white-space: nowrap;
}

.inventory-admin-table td {
  vertical-align: middle;
}

.inventory-admin-table td:first-child strong {
  color: #36233b;
}

.inventory-note {
  max-width: 190px;
  color: #756978;
  white-space: normal;
}

.inventory-updated {
  color: #958a97;
  font-size: 12px;
  white-space: nowrap;
}

.inventory-quantity {
  display: inline-flex;
  min-width: 38px;
  justify-content: center;
  padding: 5px 9px;
  color: #197258;
  border-radius: 999px;
  background: #e9f8f2;
  font-weight: 800;
}

.inventory-quantity.empty {
  color: #b3425f;
  background: #fff0f3;
}

.inventory-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.inventory-row-actions button,
.inventory-dialog-head button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  color: #754a70;
  border: 1px solid #e5d8e5;
  border-radius: 9px;
  background: #fff;
}

.inventory-row-actions button.danger {
  color: #bd4261;
}

.inventory-row-actions svg,
.inventory-dialog-head button svg {
  width: 16px;
}

.inventory-edit-dialog {
  width: min(590px, calc(100vw - 30px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(33, 14, 36, 0.3);
}

.inventory-edit-dialog::backdrop {
  background: rgba(28, 16, 31, 0.54);
  backdrop-filter: blur(3px);
}

.inventory-edit-dialog form {
  padding: 24px;
}

.inventory-dialog-head,
.inventory-dialog-head > div,
.inventory-dialog-actions {
  display: flex;
  align-items: center;
}

.inventory-dialog-head {
  justify-content: space-between;
}

.inventory-dialog-head > div {
  gap: 9px;
}

.inventory-dialog-head > div > span {
  color: #d13c91;
}

.inventory-dialog-head h2 {
  margin: 0;
  color: #302134;
  font-size: 21px;
}

.inventory-dialog-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 22px;
}

.inventory-dialog-fields label {
  display: grid;
  gap: 7px;
}

.inventory-dialog-fields label.wide {
  grid-column: 1 / -1;
}

.inventory-dialog-fields label > span {
  color: #6f6172;
  font-size: 12px;
  font-weight: 700;
}

.inventory-dialog-fields input,
.inventory-dialog-fields textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #ded1dd;
  border-radius: 10px;
  outline: 0;
  resize: vertical;
}

.inventory-dialog-fields input:focus,
.inventory-dialog-fields textarea:focus {
  border-color: #c64494;
  box-shadow: 0 0 0 3px rgba(198, 68, 148, 0.1);
}

.inventory-dialog-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.inventory-dialog-actions button {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 10px;
}

.inventory-dialog-actions .primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, #cc3c92, #7535a8);
}

.inventory-dialog-actions .primary svg {
  width: 17px;
}

@media (max-width: 1180px) {
  .inventory-admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .inventory-admin-head {
    align-items: stretch;
    flex-direction: column;
    padding: 21px 18px;
  }

  .inventory-summary-cards {
    grid-template-columns: 1fr 1fr;
  }

  .inventory-dialog-fields {
    grid-template-columns: 1fr;
  }

  .inventory-dialog-fields label.wide {
    grid-column: auto;
  }
}

* {
  box-sizing: border-box;
}

button,
a,
[role="button"],
input,
select,
textarea {
  touch-action: manipulation;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

body {
  min-width: 1080px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 83% 8%, rgba(236, 73, 151, 0.08), transparent 28%),
    linear-gradient(135deg, #fffaff 0%, #fbf8fd 42%, #ffffff 100%);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-weight: 700;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 260px;
  overflow: hidden;
  padding: 18px 18px 20px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 72%, rgba(196, 92, 178, 0.24), transparent 26%),
    linear-gradient(180deg, rgba(23, 15, 35, 0.98), rgba(17, 13, 27, 0.98)),
    #150e20;
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.08);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 90% 7%, #f7a0d2 0 1px, transparent 2px),
    radial-gradient(circle at 20% 42%, #a67fc1 0 1px, transparent 2px),
    radial-gradient(circle at 7% 80%, #ee73bd 0 1px, transparent 2px);
  pointer-events: none;
}

.brand,
.nav {
  position: relative;
  z-index: 2;
}

.mobile-menu-toggle {
  display: none;
}

.brand {
  height: 150px;
  text-align: center;
}

.brand-mark {
  display: grid;
  place-items: center;
  height: 116px;
  overflow: hidden;
}

.brand-logo {
  width: 158px;
  max-width: 100%;
  height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(246, 124, 197, 0.22));
}

.brand-sub {
  margin-top: -2px;
  font-size: 18px;
  letter-spacing: 1px;
}

.store-switcher {
  display: grid;
  gap: 3px;
  min-width: 170px;
  color: var(--muted);
  font-size: 10px;
}

.store-switcher select {
  min-height: 36px;
  padding: 0 30px 0 10px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.store-settings-form {
  grid-template-columns: 1fr 1.4fr 120px auto;
}

.store-settings-form label,
.store-settings-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.store-settings-row {
  grid-template-columns: 18px 150px minmax(180px, 1fr) 90px 90px auto auto auto;
}

.all-stores-dashboard {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.portfolio-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.18), transparent 26%),
    linear-gradient(135deg, #24162f, #61244f 58%, #8b2d69);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(47, 15, 43, 0.18);
}

.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #df83b7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.portfolio-hero h2,
.store-detail-heading h3,
.setup-wizard-dialog h2 {
  margin: 0;
}

.portfolio-hero h2 {
  font-size: 28px;
}

.portfolio-hero p,
.store-detail-heading p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.portfolio-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.portfolio-actions > span {
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
}

.portfolio-actions button,
.portfolio-store-foot button,
.store-detail-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  color: #fff;
  background: #d93c8b;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.portfolio-actions .secondary-settings-button {
  color: #32213b;
  background: #fff;
}

.portfolio-actions svg,
.portfolio-store-foot svg,
.store-detail-actions svg {
  width: 15px;
}

#refresh-all-stores.loading svg {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.portfolio-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.portfolio-kpis article {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #eadfeb;
  border-radius: 11px;
  box-shadow: 0 10px 28px rgba(49, 25, 47, 0.07);
}

.portfolio-kpis article::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: linear-gradient(#e64691, #7c3aed);
}

.portfolio-kpis span {
  display: block;
  margin-bottom: 9px;
  color: #857589;
  font-size: 11px;
  font-weight: 800;
}

.portfolio-kpis strong {
  color: #291d30;
  font-size: 25px;
}

.portfolio-kpis small {
  margin-left: 7px;
  color: #9a8d9e;
  font-weight: 700;
}

.portfolio-panel {
  padding-bottom: 20px;
}

.portfolio-store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 12px;
  padding: 0 18px;
}

.portfolio-store-card {
  padding: 16px;
  background: #fff;
  border: 1px solid #eadfeb;
  border-top: 3px solid var(--store-accent);
  border-radius: 9px;
}

.portfolio-store-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.portfolio-store-head .store-color-dot {
  background: var(--store-accent);
}

.portfolio-store-head strong,
.portfolio-store-head small {
  display: block;
}

.portfolio-store-head strong {
  color: #312438;
  font-size: 15px;
}

.portfolio-store-head small {
  margin-top: 2px;
  color: #978a9b;
  font-size: 10px;
}

.store-health {
  padding: 4px 7px;
  color: #14775a;
  background: #e6f8f1;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.store-health.offline {
  color: #8b6671;
  background: #f1ecee;
}

.portfolio-store-sales {
  margin: 16px 0 12px;
  padding: 13px;
  background: #faf7fb;
  border-radius: 7px;
}

.portfolio-store-sales span,
.portfolio-store-sales strong {
  display: block;
}

.portfolio-store-sales span {
  color: #8f7e93;
  font-size: 10px;
  font-weight: 800;
}

.portfolio-store-sales strong {
  margin-top: 4px;
  color: #32213b;
  font-size: 21px;
}

.portfolio-store-card dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}

.portfolio-store-card dl div {
  padding: 0 9px;
  text-align: center;
  border-right: 1px solid #eee5ef;
}

.portfolio-store-card dl div:last-child {
  border: 0;
}

.portfolio-store-card dt {
  color: #998b9c;
  font-size: 10px;
}

.portfolio-store-card dd {
  margin: 4px 0 0;
  color: #3b2c42;
  font-size: 14px;
  font-weight: 900;
}

.portfolio-store-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #eee5ef;
}

.portfolio-store-foot > span {
  color: #3a806e;
  font-size: 10px;
  font-weight: 900;
}

.portfolio-store-foot > span.has-alert {
  color: #b74862;
}

.portfolio-store-foot button {
  min-height: 31px;
  padding: 0 9px;
  color: #6c3d68;
  background: #f5edf5;
}

.portfolio-ranking-section {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid #e7dce9;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.portfolio-ranking-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.portfolio-ranking-head h2 {
  margin: 4px 0 0;
  color: #302234;
  font-size: 22px;
}

.portfolio-ranking-head label {
  display: grid;
  gap: 5px;
  color: #77687b;
  font-size: 11px;
  font-weight: 800;
}

.portfolio-ranking-head select {
  min-width: 132px;
  min-height: 40px;
  border: 1px solid #ded1e1;
  border-radius: 9px;
  background: #fff;
  padding: 0 34px 0 12px;
  color: #3b2c42;
  font: inherit;
  font-weight: 800;
}

.portfolio-ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.portfolio-ranking-card {
  overflow: hidden;
  border: 1px solid #eadfeb;
  border-radius: 12px;
  background: #fff;
}

.portfolio-ranking-title {
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #eee5ef;
  padding: 14px;
  background: linear-gradient(135deg, #faf5fa, #fff);
}

.portfolio-ranking-title span {
  border-radius: 999px;
  background: #f3e3f1;
  padding: 4px 8px;
  color: #8a367e;
  font-size: 10px;
  font-weight: 900;
}

.portfolio-ranking-title strong {
  color: #39283f;
  font-size: 14px;
}

.portfolio-ranking-list {
  display: grid;
}

.portfolio-ranking-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  border-bottom: 1px solid #f0e9f1;
  padding: 8px 13px;
}

.portfolio-ranking-row:last-child {
  border-bottom: 0;
}

.portfolio-rank-number {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #f2edf3;
  color: #756778;
  font-size: 12px;
  font-weight: 900;
}

.portfolio-ranking-row.rank-1 .portfolio-rank-number {
  color: #704800;
  background: #ffe8a3;
}

.portfolio-ranking-row.rank-2 .portfolio-rank-number {
  color: #5d6470;
  background: #e6e9ef;
}

.portfolio-ranking-row.rank-3 .portfolio-rank-number {
  color: #7b4a2e;
  background: #f0d0bb;
}

.portfolio-rank-store {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.portfolio-rank-store i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--rank-store-color);
}

.portfolio-rank-store strong {
  overflow: hidden;
  color: #413245;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-rank-sales {
  text-align: right;
}

.portfolio-rank-sales strong,
.portfolio-rank-sales small {
  display: block;
}

.portfolio-rank-sales strong {
  color: #312438;
  font-size: 13px;
}

.portfolio-rank-sales small {
  margin-top: 2px;
  color: #998b9c;
  font-size: 9px;
}

.portfolio-ranking-empty {
  padding: 28px 12px;
  color: #938597;
  text-align: center;
  font-size: 12px;
}

.portfolio-empty {
  grid-column: 1 / -1;
  padding: 34px;
  color: #8d7f91;
  text-align: center;
  background: #fbf9fc;
  border: 1px dashed #ddcede;
  border-radius: 9px;
}

.store-detail-shell {
  margin: 0 18px 18px;
  padding: 18px;
  background: linear-gradient(145deg, #2a1d33, #48223e);
  border-radius: 11px;
}

.crm-source-badge {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: var(--theme-text, #312438);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #eaddea);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 900;
}

.crm-source-badge svg {
  width: 16px;
  height: 16px;
  color: var(--theme-action, var(--purple));
}

.crm-store-source-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 18px 16px;
  padding: 16px;
  color: var(--theme-text, var(--ink));
  background: var(--theme-surface-2, var(--soft));
  border: 1px solid var(--theme-line, var(--line));
  border-radius: 12px;
}

.crm-store-source-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--theme-action, var(--purple));
  background: color-mix(in srgb, var(--theme-action, var(--purple)) 12%, transparent);
  border-radius: 11px;
}

.crm-store-source-icon svg {
  width: 22px;
  height: 22px;
}

.crm-store-source-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.crm-store-source-card p {
  margin: 0;
  color: var(--theme-muted, var(--muted));
  font-size: 11px;
  line-height: 1.65;
}

.crm-store-sync-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crm-store-sync-actions > span {
  color: var(--theme-muted, var(--muted));
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.crm-connected-stores {
  margin: 0 18px 16px;
  padding: 16px;
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, var(--line));
  border-radius: 12px;
}

.crm-connected-stores-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.crm-connected-stores-heading h3 {
  margin: 2px 0 0;
  color: var(--theme-text, var(--ink));
  font-size: 16px;
}

.crm-connected-stores-heading small {
  color: var(--theme-muted, var(--muted));
  font-size: 10px;
}

.crm-store-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  background: transparent;
}

.crm-store-card {
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  overflow: hidden;
  padding: 13px;
  color: var(--theme-text, var(--ink));
  background: var(--theme-surface-2, var(--soft));
  border: 1px solid var(--theme-line, var(--line));
  border-radius: 10px;
}

.crm-store-card.selected {
  border-color: var(--theme-action, var(--purple));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-action, var(--purple)) 12%, transparent);
}

.crm-store-card-color {
  align-self: stretch;
  min-height: 68px;
  border-radius: 99px;
}

.crm-store-card-main {
  min-width: 0;
}

.crm-store-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.crm-store-card-title strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-connection-status {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 900;
}

.crm-connection-status.connected {
  color: #08745d;
  background: #dff7ef;
}

.crm-connection-status.paused {
  color: #8b5e11;
  background: #fff0cb;
}

.crm-store-card dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.crm-store-card dl div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.crm-store-card dt {
  color: var(--theme-muted, var(--muted));
  font-size: 9px;
  font-weight: 800;
}

.crm-store-card dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--theme-text, var(--ink));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-store-card > button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  color: var(--theme-action-text, #fff);
  background: var(--theme-action, var(--purple));
  border: 0;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
}

.crm-store-card > button:disabled {
  color: var(--theme-muted, var(--muted));
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, var(--line));
}

.crm-store-card > button svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 900px) {
  .crm-store-source-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-store-sync-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .crm-store-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .crm-store-source-card,
  .crm-store-card {
    grid-template-columns: 1fr;
  }

  .crm-store-source-icon,
  .crm-store-card-color {
    display: none;
  }

  .crm-store-sync-actions,
  .crm-connected-stores-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

.store-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
}

.store-detail-heading p {
  color: rgba(255, 255, 255, 0.6);
}

.store-detail-heading button {
  min-height: 36px;
  color: #35243b;
  background: #fff;
}

.store-detail-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.store-detail-form fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 16px;
  background: #fff;
  border: 0;
  border-radius: 8px;
}

.store-detail-form legend {
  padding: 0 7px;
  color: #f0a9ce;
  font-size: 11px;
  font-weight: 900;
}

.store-detail-form label,
.wizard-fields label {
  display: grid;
  gap: 5px;
  color: #76687b;
  font-size: 10px;
  font-weight: 800;
}

.store-detail-form input,
.store-detail-form select,
.wizard-fields input {
  width: 100%;
  min-height: 39px;
  padding: 0 10px;
  color: #32263a;
  background: #fff;
  border: 1px solid #dfd4e1;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
}

.store-detail-form input[type="color"],
.wizard-fields input[type="color"] {
  padding: 4px;
}

.store-logo-setting {
  display: grid;
  grid-column: span 2;
  gap: 8px;
}

.store-logo-setting > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.store-logo-picker {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 116px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.store-logo-preview {
  display: grid;
  flex: 0 0 150px;
  width: 150px;
  height: 86px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.store-logo-preview img {
  max-width: 132px;
  max-height: 70px;
  object-fit: contain;
}

.store-logo-picker-actions {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.store-logo-picker-actions small {
  flex-basis: 100%;
  color: var(--muted);
  line-height: 1.5;
}

#store-setting-logo-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.store-logo-file-button {
  display: inline-flex !important;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px !important;
  border: 0 !important;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pink), var(--purple)) !important;
  color: #fff !important;
  cursor: pointer;
  font-weight: 900 !important;
}

.store-logo-file-button svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 720px) {
  .store-logo-setting {
    grid-column: auto;
  }

  .store-logo-picker {
    align-items: stretch;
    flex-direction: column;
  }

  .store-logo-preview {
    width: 100%;
    flex-basis: 96px;
  }
}

.store-detail-form .feature-flags {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.store-detail-form .feature-flags label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 12px;
  color: #493b50;
  background: #faf7fb;
  border: 1px solid #eee5ef;
  border-radius: 6px;
}

.store-detail-form .feature-flags input {
  width: 17px;
  min-height: auto;
}

.store-detail-form .crm-feature-flags {
  position: relative;
  background: var(--theme-surface-2, var(--soft));
  border-color: var(--theme-line, #eaddea);
}

.store-detail-form .crm-feature-flags label {
  color: var(--ink);
  background: var(--theme-surface, var(--soft));
}

.store-detail-form .crm-feature-flags input:disabled {
  opacity: 1;
  accent-color: var(--purple);
}

.store-detail-form .crm-feature-flags > small {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--theme-muted, #786b82);
  font-weight: 750;
}

.store-detail-form .crm-feature-flags > small svg {
  width: 15px;
  height: 15px;
}

.store-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
}

.setup-wizard[hidden] {
  display: none;
}

.setup-wizard {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.setup-wizard-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 11, 25, 0.68);
  backdrop-filter: blur(5px);
}

.setup-wizard-dialog {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 28px 80px rgba(20, 8, 24, 0.35);
}

.setup-wizard-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 23px 25px 18px;
}

.wizard-close {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #6b5c71;
  background: #f5f0f6;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 0 25px 20px;
}

.wizard-progress span {
  padding: 8px;
  color: #9a8d9e;
  text-align: center;
  border-bottom: 3px solid #eee7ef;
  font-size: 10px;
  font-weight: 900;
}

.wizard-progress span.active {
  color: #c8307e;
  border-color: #df3d91;
}

.wizard-progress span.done {
  color: #4d8b79;
  border-color: #73b7a3;
}

.wizard-step {
  display: none;
  min-height: 270px;
  padding: 24px 25px;
  background: #fcfafc;
  border-block: 1px solid #eee6ef;
}

.wizard-step.active {
  display: block;
}

.wizard-step h3 {
  margin: 0 0 17px;
  color: #302337;
  font-size: 17px;
}

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

.wizard-fields small {
  color: #a194a5;
  font-size: 9px;
}

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

.wizard-feature-grid label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e6dce7;
  border-radius: 8px;
  cursor: pointer;
}

.wizard-feature-grid strong,
.wizard-feature-grid small {
  display: block;
}

.wizard-feature-grid small {
  margin-top: 3px;
  color: #998c9d;
  font-size: 10px;
}

.wizard-review {
  display: grid;
  gap: 2px;
  overflow: hidden;
  border: 1px solid #e7dce8;
  border-radius: 8px;
}

.wizard-review div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 12px 14px;
  background: #fff;
}

.wizard-review span {
  color: #8c7f90;
  font-size: 11px;
}

.wizard-review strong {
  color: #3d3044;
  font-size: 12px;
}

.wizard-caution {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: #417765;
  font-size: 11px;
}

.setup-wizard-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 25px;
}

#wizard-error {
  color: #bd365e;
  font-size: 11px;
}

.setup-wizard-dialog footer button {
  min-height: 39px;
  padding: 0 18px;
  color: #fff;
  background: #d93c8b;
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.setup-wizard-dialog footer .secondary-settings-button {
  color: #615467;
  background: #f2edf3;
}

body.wizard-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .portfolio-store-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }

  .portfolio-ranking-grid {
    grid-template-columns: 1fr;
  }

  .store-detail-form fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .all-stores-dashboard {
    padding: 12px;
  }

  .portfolio-hero,
  .portfolio-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .portfolio-kpis,
  .portfolio-store-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-ranking-head {
    align-items: stretch;
    flex-direction: column;
  }

  .store-detail-heading,
  .store-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .store-detail-form fieldset,
  .store-detail-form .feature-flags,
  .wizard-fields,
  .wizard-feature-grid {
    grid-template-columns: 1fr;
  }

  .setup-wizard {
    padding: 8px;
  }

  .setup-wizard-dialog {
    max-height: calc(100vh - 16px);
  }

  .wizard-progress span {
    overflow: hidden;
    white-space: nowrap;
  }
}

.store-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.store-enabled-switch {
  display: flex !important;
  align-items: center;
  grid-auto-flow: column;
  justify-content: start;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 370px);
  overflow-y: auto;
  padding-right: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 16px;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 15px;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  color: #cbb4df;
}

.nav-item.active {
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  box-shadow: 0 14px 24px rgba(224, 65, 142, 0.25);
}

.nav-item.active svg {
  color: #fff;
}

.nav-line {
  height: 1px;
  margin: 6px 14px 4px;
  background: rgba(255, 255, 255, 0.09);
}

.characters {
  position: absolute;
  left: -42px;
  bottom: -92px;
  z-index: 0;
  width: 320px;
  max-width: none;
  opacity: 0.9;
  pointer-events: none;
}

.app {
  min-width: 0;
  margin-left: 260px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 76px;
  padding: 0 24px 0 30px;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.page-title,
.userbar,
.panel-title {
  display: flex;
  align-items: center;
}

.page-title {
  gap: 15px;
}

.page-title h1 {
  margin: 0;
  font-size: 22px;
}

.ornament,
.spark {
  color: #5d376e;
}

.spark {
  font-size: 23px;
}

.spark.small {
  font-size: 14px;
}

.userbar {
  gap: 16px;
  font-size: 15px;
  min-width: 0;
  white-space: nowrap;
}

.app-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  color: var(--purple);
  background: #fff;
  border: 1px solid #e4d7ec;
  border-radius: 18px;
  text-decoration: none;
}

.app-link svg {
  width: 17px;
}

.ornament {
  font-size: 24px;
  letter-spacing: 4px;
}

.role {
  padding: 8px 14px;
  color: var(--pink);
  background: #fff0f8;
  border: 1px solid #ffd3e8;
  border-radius: 18px;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #f4c8e2;
}

.userbar svg {
  width: 18px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  padding: 26px 18px 18px;
}

.stat-card,
.filters,
.panel {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(67, 44, 77, 0.04);
}

.stat-card {
  display: flex;
  align-items: center;
  min-height: 142px;
  padding: 24px 18px;
  gap: 16px;
  overflow: hidden;
  position: relative;
}

.stat-card > div:not(.stat-icon) {
  min-width: 0;
  flex: 1 1 auto;
}

.stat-card::after {
  content: none;
}

.stat-icon {
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.stat-icon svg {
  width: 36px;
  height: 36px;
}

.yen-symbol {
  font-size: 48px;
  line-height: 1;
}

.stat-icon.pink {
  color: var(--pink);
  background: #ffe7f4;
}

.stat-icon.purple {
  color: var(--purple);
  background: #f0e4fa;
}

.stat-card h2 {
  margin: 0 0 16px;
  font-size: 16px;
}

.amount {
  margin: 0 0 18px;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 1px;
}

.amount span {
  font-size: 19px;
}

.delta {
  margin: 0;
  font-size: 16px;
}

.delta a {
  margin-left: 16px;
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.stat-link {
  margin-left: 16px;
  padding: 0;
  color: var(--pink);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.stat-escort-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-left: 10px;
  padding: 0 9px;
  color: #d71955;
  background: #fff1f8;
  border: 1px solid #ff9bc9;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

.outline {
  width: 100%;
  max-width: 176px;
  height: 42px;
  color: var(--purple);
  background: #fff;
  border: 1px solid #a974d0;
  border-radius: 6px;
  font: inherit;
}

.unpaid .amount {
  font-size: 26px;
  white-space: nowrap;
}

.unpaid .outline {
  font-size: 14px;
}

.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: end;
  min-height: 168px;
  margin: 0 18px 18px;
  padding: 28px 22px 18px;
}

label span {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
}

.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 12px;
  color: #2c2733;
  background: #fff;
  border: 1px solid #dcd5e0;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
}

.field input,
.field select {
  width: 100%;
  min-width: 0;
  color: #2c2733;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
}

.field select {
  appearance: none;
  align-self: stretch;
  cursor: pointer;
}

.field input::placeholder {
  color: #8e8494;
}

.field svg {
  flex: 0 0 auto;
  width: 19px;
  color: #272236;
}

.field.date {
  cursor: pointer;
}

.field.date svg {
  pointer-events: none;
}

.field b {
  padding: 0 15px;
  font-size: 17px;
}

.search {
  color: #8e8494;
}

.filter-actions {
  display: flex;
  align-items: end;
  gap: 12px;
  justify-content: flex-end;
}

.filter-actions button {
  height: 46px;
  border-radius: 6px;
  font: inherit;
}

.clear {
  width: 90px;
  background: #fff;
  border: 1px solid #bdb2c8;
}

.search-btn {
  width: 90px;
  color: #fff;
  background: linear-gradient(135deg, #ee5aa1, #df347f);
  border: 0;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(284px, 316px);
  gap: 16px;
  padding: 0 18px 20px;
}

.page-hidden {
  display: none !important;
}

/* Store and referral agency reports */
.business-report-page,
.agency-admin-page {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.report-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  color: var(--theme-text, #302234);
  background: linear-gradient(135deg, var(--theme-surface, #fff), var(--theme-surface-2, #faf7fb));
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(35, 19, 42, .07);
}

.report-hero h2,
.report-panel h3 {
  margin: 4px 0;
  color: var(--theme-text, #302234);
}

.report-hero h2 {
  font-size: clamp(22px, 2vw, 30px);
}

.report-hero p,
.report-panel-head small,
.agency-save-status,
.agency-report-note {
  margin: 0;
  color: var(--theme-muted, #806f84);
  font-size: 12px;
  font-weight: 700;
}

.report-toolbar {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}

.report-toolbar label,
.agency-register-form label,
.agency-master-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 900;
}

.report-toolbar input,
.report-toolbar select,
.agency-register-form input,
.agency-master-row input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  color: var(--theme-text, #302234);
  -webkit-text-fill-color: var(--theme-text, #302234);
  background: var(--theme-input, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 8px;
  color-scheme: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.report-toolbar label {
  min-width: 142px;
}

.report-toolbar label:first-child {
  min-width: 104px;
}

.report-primary-button,
.report-secondary-button,
.report-refresh-button,
.agency-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.report-primary-button,
.report-refresh-button {
  color: var(--theme-action-text, #fff);
  -webkit-text-fill-color: var(--theme-action-text, #fff);
  background: linear-gradient(135deg, var(--theme-action, #e64691), var(--theme-action-2, #7c3aed));
  border: 1px solid transparent;
}

.report-secondary-button {
  color: var(--theme-button-text, var(--theme-text, #302234));
  -webkit-text-fill-color: var(--theme-button-text, var(--theme-text, #302234));
  background: var(--theme-button-bg, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #dfd1e2);
}

.report-primary-button svg,
.report-secondary-button svg,
.report-refresh-button svg,
.agency-delete-button svg {
  width: 16px;
}

.report-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.report-actions > span {
  margin-right: auto;
  color: var(--theme-muted, #806f84);
  font-size: 11px;
  font-weight: 800;
}

.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.report-kpi-grid article {
  min-width: 0;
  padding: 17px;
  color: var(--theme-text, #302234);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-top: 3px solid var(--theme-action, #e64691);
  border-radius: 12px;
}

.report-kpi-grid span,
.report-kpi-grid small {
  display: block;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 850;
}

.report-kpi-grid strong {
  display: block;
  margin: 6px 0 3px;
  color: var(--theme-text, #302234);
  font-size: clamp(18px, 2vw, 25px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 16px;
}

.report-panel {
  min-width: 0;
  padding: 18px;
  color: var(--theme-text, #302234);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 14px;
}

.report-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.report-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 9px;
}

.report-table-scroll table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.report-table-scroll th,
.report-table-scroll td {
  padding: 11px 10px;
  color: var(--theme-text, #302234);
  border-bottom: 1px solid var(--theme-line, #dfd1e2);
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
}

.report-table-scroll th {
  color: var(--theme-muted, #806f84);
  background: var(--theme-surface-2, #faf7fb);
  font-size: 10px;
  font-weight: 900;
}

.report-table-scroll th:first-child,
.report-table-scroll td:first-child {
  text-align: left;
}

.report-table-scroll tbody tr:last-child td {
  border-bottom: 0;
}

.report-table-scroll tfoot th {
  color: var(--theme-text, #302234);
  border-top: 2px solid var(--theme-line, #dfd1e2);
}

.report-empty-cell {
  padding: 24px !important;
  color: var(--theme-muted, #806f84) !important;
  text-align: center !important;
}

.report-top-items {
  display: grid;
  gap: 7px;
}

.report-top-items > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 8px;
}

.report-top-items > div > b {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: var(--theme-action-text, #fff);
  background: var(--theme-action, #e64691);
  border-radius: 50%;
  font-size: 10px;
}

.report-top-items span,
.report-top-items strong,
.report-top-items small {
  display: block;
  min-width: 0;
}

.report-top-items strong,
.report-top-items em {
  color: var(--theme-text, #302234);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.report-top-items small {
  margin-top: 2px;
  color: var(--theme-muted, #806f84);
  font-size: 9px;
}

.agency-register-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, .7fr) auto;
  align-items: end;
  gap: 9px;
  min-width: min(100%, 570px);
}

.money-input {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  color: var(--theme-text, #302234);
  background: var(--theme-input, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 8px;
}

.money-input > b {
  text-align: center;
  font-size: 12px;
}

.money-input input {
  border: 0 !important;
  background: transparent !important;
}

.agency-master-list {
  display: grid;
  gap: 8px;
}

.agency-master-row {
  display: grid;
  grid-template-columns: 32px minmax(180px, 1fr) minmax(150px, .5fr) auto;
  align-items: end;
  gap: 10px;
  padding: 11px;
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 9px;
}

.agency-master-row > b {
  align-self: center;
  color: var(--theme-muted, #806f84);
  text-align: center;
}

.agency-delete-button {
  color: #d74362;
  -webkit-text-fill-color: #d74362;
  background: var(--theme-surface, #fff);
  border: 1px solid color-mix(in srgb, #d74362 45%, var(--theme-line, #dfd1e2));
}

.agency-save-status,
.agency-report-note {
  margin-top: 11px;
}

.agency-report-controls .report-toolbar {
  justify-content: flex-start;
  margin-bottom: 14px;
}

.agency-report-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 14px;
}

.report-empty-state {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 28px;
  color: var(--theme-muted, #806f84);
  border: 1px dashed var(--theme-line, #dfd1e2);
  border-radius: 10px;
  text-align: center;
}

.report-empty-state svg {
  width: 28px;
}

.report-empty-state strong {
  color: var(--theme-text, #302234);
}

@media (max-width: 1100px) {
  .report-hero { align-items: stretch; flex-direction: column; }
  .report-toolbar { justify-content: flex-start; }
  .report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-report-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .business-report-page,
  .agency-admin-page { padding: 12px; }
  .report-hero { padding: 18px; }
  .report-actions { align-items: stretch; flex-wrap: wrap; }
  .report-actions > span { width: 100%; }
  .report-kpi-grid,
  .agency-report-kpis { grid-template-columns: 1fr 1fr; }
  .agency-register-form,
  .agency-master-row { grid-template-columns: 1fr; }
  .agency-master-row > b { display: none; }
}

body.page-sales .content-grid,
body.page-casts .content-grid {
  grid-template-columns: 1fr;
}

body.page-sales .side-panels,
body.page-dashboard .side-panels,
body.page-casts #sales,
body.page-casts .news,
body.page-tickets #attendance,
body.page-attendance #tickets {
  display: none;
}

body.page-dashboard .content-grid {
  grid-template-columns: 1fr;
}

.admin-center-notice {
  position: fixed;
  inset: 0;
  z-index: 99980;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

.admin-center-notice.show {
  opacity: 1;
  transform: scale(1);
}

.admin-center-notice-card {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(520px, calc(100vw - 32px));
  padding: 28px;
  color: #20172b;
  background:
    radial-gradient(circle at 18% 12%, rgba(232, 79, 155, .18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 247, 252, .98));
  border: 2px solid #e84f9b;
  border-radius: 10px;
  box-shadow: 0 28px 90px rgba(32, 23, 43, .28);
  text-align: center;
  pointer-events: auto;
}

.admin-center-notice.held .admin-center-notice-card {
  border-color: #8c56b8;
}

.admin-center-notice-kicker {
  justify-self: center;
  padding: 6px 14px;
  color: #fff;
  background: linear-gradient(135deg, #8c56b8, #e84f9b);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.admin-center-notice-card strong {
  color: #110a18;
  font-size: 34px;
  line-height: 1.15;
}

.admin-center-notice-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-center-notice-main span {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 8px;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
}

.admin-center-notice-card small {
  color: #6b5578;
  font-size: 14px;
  font-weight: 800;
}

.admin-center-notice-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  color: #8c56b8;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.dashboard-shift-overview {
  display: grid;
  gap: 14px;
  padding: 18px 18px 20px;
}

.dashboard-shift-overview .shift-next-event,
.dashboard-shift-overview .shift-focus-row {
  padding: 0;
}

body.page-casts .cast-panel {
  max-width: none;
}

body.page-tickets .management-grid,
body.page-attendance .management-grid {
  grid-template-columns: 1fr;
}

body.page-attendance .payment-filter {
  display: none;
}

.sales-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 14px;
}

.segmented-control {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.segmented-control button {
  min-width: 78px;
  height: 36px;
  padding: 0 12px;
  color: #4b365b;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
}

.segmented-control button.selected {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
}

.segmented-control.compact button {
  min-width: 58px;
  height: 32px;
  padding-inline: 10px;
  font-size: 12px;
}

.sales-chart-panel {
  margin: 0 18px 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 9px;
}

.sales-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sales-chart-head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.sales-chart-head strong {
  display: block;
  margin-top: 3px;
  color: #20172b;
  font-size: 18px;
}

.sales-series-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.sales-series-controls button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  color: #5d376e;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.sales-series-controls button:not(.selected) {
  opacity: 0.48;
}

.series-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.series-dot.total {
  background: #e64691;
}

.series-dot.cash {
  background: #23a36f;
}

.series-dot.card {
  background: #7e4ca8;
}

.series-dot.qr {
  background: #2563eb;
}

.sales-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.sales-chart {
  min-height: 284px;
}

.sales-chart svg {
  display: block;
  min-width: 100%;
}

.sales-chart-mobile-list {
  display: none;
}

.sales-chart-empty {
  display: grid;
  place-items: center;
  min-height: 210px;
  color: var(--muted);
  background: #fff9fd;
  border: 1px dashed #eaddeb;
  border-radius: 8px;
  text-align: center;
}

.sales-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px 14px;
}

.sales-summary-card {
  min-height: 68px;
  padding: 11px 12px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.sales-summary-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
}

.sales-summary-card strong {
  display: block;
  color: #1b1526;
  font-size: 18px;
  line-height: 1;
}

.sales-summary-card small {
  display: block;
  margin-top: 7px;
  color: #8c56b8;
  font-size: 11px;
  font-weight: 800;
}

.sales-summary-card.labor {
  background: #fff4f7;
  border-color: #f4bfd3;
}

.sales-summary-card.labor strong {
  color: #d71955;
}

.sales-summary-card.profit {
  background: #f6fbf8;
  border-color: #bfe8d4;
}

.sales-summary-card.profit strong {
  color: #1f8a67;
}

.sales-summary-card.day-summary {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.day-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.day-summary-head span {
  margin: 0;
  color: #20172b;
  font-size: 13px;
  font-weight: 900;
}

.day-summary-head .row-action {
  min-height: 32px;
  padding: 0 10px;
}

.day-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 10px;
}

.day-summary-grid span {
  margin: 0;
  color: #6f6878;
  font-size: 11px;
  line-height: 1.35;
}

.panel {
  overflow: hidden;
}

.table-panel {
  min-height: 522px;
  overflow-x: auto;
}

body.page-tickets .table-panel {
  overflow-x: visible;
}

body.page-dashboard #sales {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.page-dashboard #sales table,
body.page-sales #sales table {
  min-width: 1280px;
  table-layout: auto;
}

body.page-dashboard #sales th,
body.page-dashboard #sales td,
body.page-sales #sales th,
body.page-sales #sales td {
  height: 56px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  word-break: normal;
}

body.page-dashboard #sales th {
  height: 44px;
}

body.page-dashboard #sales td:first-child,
body.page-dashboard #sales th:first-child,
body.page-sales #sales td:first-child,
body.page-sales #sales th:first-child {
  min-width: 112px;
}

body.page-attendance .table-panel {
  overflow-x: visible;
}

body.page-tickets #tickets {
  min-width: 0;
  width: 100%;
}

.panel-title {
  gap: 10px;
  height: 61px;
  padding: 0 22px;
}

.panel-title h2 {
  margin: 0;
  font-size: 22px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: #fff4fa;
}

th,
td {
  height: 65px;
  padding: 0 12px;
  text-align: left;
  border-bottom: 1px solid #ede7ef;
  font-size: 14px;
  white-space: nowrap;
}

body.page-sales th,
body.page-sales td {
  padding: 0 8px;
  font-size: 12px;
}

th {
  height: 51px;
}

.heart {
  color: var(--purple);
  font-size: 20px;
}

.vip {
  color: #c8830a;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 73px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 14px;
}

.badge.danger {
  color: var(--pink);
  background: #ffe5f1;
  border: 1px solid #ffd2e6;
}

.badge.paid {
  color: #7f55ae;
  background: #f0e6fb;
  border: 1px solid #e2d0f3;
}

.detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px;
  color: var(--purple);
  background: #fff;
  border: 1px solid #b98ddd;
  border-radius: 5px;
  font: inherit;
  font-size: 14px;
}

.detail svg {
  width: 16px;
}

.pagination,
.table-footer {
  display: flex;
}

.table-footer {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 70px;
  padding: 12px 20px;
  color: var(--muted);
  border-top: 1px solid #ede7ef;
  font-size: 13px;
}

.pagination {
  justify-content: center;
  gap: 10px;
  padding: 18px 0 24px;
}

.pagination button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #1e1828;
  background: #fff;
  border: 1px solid #e1dbe6;
  border-radius: 6px;
  font: inherit;
}

.pagination .current {
  color: #fff;
  background: linear-gradient(135deg, #ed66a8, #df2e85);
  border: 0;
}

.admin-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 0 18px 24px;
}

.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #eaddeb;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(64, 20, 52, 0.06);
}

.settings-tab {
  min-height: 40px;
  padding: 0 16px;
  color: #5f5068;
  background: #fff;
  border: 1px solid #e8d9e7;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.settings-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #ff78bd, #7c3aed);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(223, 63, 140, 0.24);
}

.settings-panel {
  overflow: visible;
  padding-bottom: 18px;
}

.settings-panel[hidden] {
  display: none !important;
}

.table-settings-panel .panel-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.table-settings-layout {
  display: grid;
  gap: 14px;
  padding: 0 18px 6px;
}

.table-settings-card {
  overflow: hidden;
  border: 1px solid var(--theme-border, #eaddeb);
  border-radius: 10px;
  background: var(--theme-surface, #fff);
}

.table-settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--theme-border, #eaddeb);
}

.table-settings-card-head > div {
  display: grid;
  gap: 3px;
}

.table-settings-card-head strong {
  color: var(--theme-text, #302234);
  font-size: 15px;
}

.table-settings-card-head span {
  color: var(--theme-muted, #806f84);
  font-size: 12px;
}

.table-floor-settings-list,
.table-settings-list {
  display: grid;
}

.table-floor-setting-row,
.table-setting-row,
.table-settings-column-head {
  display: grid;
  grid-template-columns: 44px minmax(180px, 1fr) 90px 44px;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--theme-border, #eee4ef);
}

.table-setting-row,
.table-settings-column-head {
  grid-template-columns: minmax(90px, .55fr) minmax(150px, 1fr) minmax(140px, .8fr) minmax(90px, .45fr) 44px;
}

.table-floor-setting-row:last-child,
.table-setting-row:last-child {
  border-bottom: 0;
}

.table-settings-column-head {
  min-height: 38px;
  padding-block: 5px;
  color: var(--theme-muted, #806f84);
  background: var(--theme-surface-2, #faf7fb);
  font-size: 11px;
  font-weight: 900;
}

.table-floor-setting-row label,
.table-setting-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.table-floor-setting-row label > span,
.table-setting-row label > span {
  display: none;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 900;
}

.table-floor-setting-row input,
.table-setting-row input,
.table-setting-row select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  color: var(--theme-text, #302234);
  background: var(--theme-input, #fff);
  border: 1px solid var(--theme-border, #dfd1e2);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
}

.table-setting-drag {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--theme-muted, #806f84);
  background: var(--theme-surface-2, #f6f0f7);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.table-floor-count {
  color: var(--theme-muted, #806f84);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.table-setting-delete {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #b4234f;
  background: var(--theme-surface-2, #fff7fa);
  border: 1px solid var(--theme-border, #ead4df);
  border-radius: 7px;
}

.table-setting-delete:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.table-setting-delete svg {
  width: 16px;
}

.table-settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.table-settings-actions span {
  color: var(--theme-muted, #806f84);
  font-size: 12px;
  font-weight: 800;
}

.table-settings-actions span.error {
  color: #c8345c;
}

.table-settings-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #e64691), var(--purple, #7c3aed));
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
}

.receipt-settings-panel .panel-title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.receipt-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 20px;
  align-items: start;
  padding: 0 18px 6px;
}

.receipt-settings-form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.receipt-settings-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid #eaddeb;
  border-radius: 8px;
  background: #fffafd;
}

.receipt-settings-form legend {
  padding: 0 7px;
  color: #44213f;
  font-size: 14px;
  font-weight: 900;
}

.receipt-settings-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #62576a;
  font-size: 12px;
  font-weight: 800;
}

.receipt-settings-form input:not([type="checkbox"]),
.receipt-settings-form select,
.receipt-settings-form textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  color: #20172b;
  background: #fff;
  border: 1px solid #dcd5e0;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}

.receipt-settings-form input:not([type="checkbox"]),
.receipt-settings-form select {
  height: 42px;
}

.receipt-settings-form textarea {
  resize: vertical;
}

.receipt-field-wide {
  grid-column: 1 / -1;
}

.receipt-settings-form .receipt-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  color: #392e41;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 6px;
}

.printer-settings-fieldset[hidden],
.printer-bridge-field[hidden] {
  display: none !important;
}

.printer-bridge-field small {
  color: var(--theme-muted, #76677c);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.receipt-printer-test {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--theme-surface-2, #fff8fc);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 10px;
}

.receipt-printer-test > div {
  display: grid;
  gap: 3px;
}

.receipt-printer-test strong,
.receipt-printer-test small {
  color: var(--theme-text, #20172b);
  -webkit-text-fill-color: currentColor;
}

.receipt-printer-test small {
  color: var(--theme-muted, #76677c);
  font-size: 10px;
}

.receipt-printer-test strong[data-status="success"] { color: #237253; }
.receipt-printer-test strong[data-status="error"] { color: #b42348; }

.receipt-printer-test button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  color: var(--theme-action-text, #fff);
  background: linear-gradient(135deg, var(--theme-action, #e64691), var(--theme-action-2, #8851b4));
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.receipt-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary, #e64691);
}

.receipt-kind-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 6px;
  background: #f4edf5;
  border-radius: 8px;
}

.receipt-kind-switch button {
  min-height: 42px;
  padding: 7px;
  color: #66596c;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.receipt-kind-switch button.active {
  color: #fff;
  background: linear-gradient(135deg, #ff78bd, #7c3aed);
  box-shadow: 0 7px 18px rgba(124, 58, 237, 0.18);
}

.receipt-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.receipt-settings-actions span {
  color: var(--muted);
  font-size: 12px;
}

.receipt-settings-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.receipt-preview-shell {
  position: sticky;
  top: 16px;
  overflow: hidden;
  background: #ded8df;
  border: 1px solid #d7ced9;
  border-radius: 9px;
  box-shadow: 0 18px 36px rgba(48, 25, 49, 0.1);
}

.receipt-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid #d7ced9;
}

.receipt-preview-heading > div {
  display: grid;
  gap: 2px;
}

.receipt-preview-heading strong {
  color: #2a2030;
  font-size: 14px;
}

.receipt-preview-heading > span {
  padding: 4px 8px;
  color: #694862;
  background: #f7eef5;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

#receipt-settings-preview {
  display: block;
  width: 100%;
  height: 620px;
  background: #ede8ee;
  border: 0;
}

.settings-form {
  display: grid;
  gap: 10px;
  padding: 0 18px 14px;
}

.admin-entry-form {
  display: grid;
  gap: 8px;
  padding: 0 18px 14px;
}

.ticket-entry-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 4px 22px 20px;
}

.ticket-entry-form .wide {
  grid-column: span 1;
}

.attendance-entry-form {
  grid-template-columns: 160px 220px 140px 140px 140px 104px;
  gap: 12px;
  align-items: end;
  padding: 4px 22px 20px;
}

.admin-entry-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-entry-form label span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.admin-entry-form input,
.admin-entry-form select,
.editable-table-input,
.editable-table-select {
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  color: #20172b;
  background: #fff;
  border: 1px solid #dcd5e0;
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
}

.admin-entry-form button,
.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.row-action:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.sales-detail-row td {
  padding: 12px;
  background: #fffafd;
}

.sales-ticket-detail-list {
  display: grid;
  gap: 10px;
}

.sales-ticket-detail-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.ticket-entry-form button {
  grid-column: 4;
  min-height: 36px;
}

.ticket-history-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 0 22px 16px;
}

.ticket-summary-card {
  min-height: 72px;
  padding: 12px 14px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.ticket-summary-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.ticket-summary-card strong {
  display: block;
  color: #1b1526;
  font-size: 21px;
  line-height: 1;
}

.row-action.delete {
  color: var(--pink);
  background: #fff;
  border: 1px solid #f0bdd8;
}

.editable-table-input,
.editable-table-select {
  width: 100%;
}

.ticket-edit-list {
  display: grid;
  gap: 12px;
  padding: 0 22px 22px;
}

.ticket-edit-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #fffafd);
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.shift-panel {
  margin: 0 18px 24px;
  overflow: visible;
}

.shift-toolbar,
.shift-entry-form,
.shift-event-form {
  display: grid;
  gap: 12px;
  align-items: end;
  padding: 0 22px 16px;
}

.shift-toolbar {
  grid-template-columns: 104px minmax(180px, 1fr) 104px 104px;
}

.shift-entry-form {
  grid-template-columns: 170px minmax(180px, 1fr) 130px 130px 130px;
}

.shift-focus-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 22px 16px;
}

.shift-next-event {
  padding: 0 22px 16px;
}

.shift-next-event[hidden] {
  display: none;
}

.shift-next-event-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  min-height: 62px;
  padding: 14px 18px;
  color: #fff;
  border-radius: 9px;
  box-shadow: 0 14px 28px rgba(20, 15, 32, 0.12);
}

.shift-next-event-card span,
.shift-next-event-card small {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  color: inherit;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.shift-next-event-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
}

.shift-next-event-card.event-gold {
  color: #2f2132;
}

.shift-next-event-card.event-gold span,
.shift-next-event-card.event-gold small {
  background: rgba(255, 255, 255, 0.38);
}

.shift-focus-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  min-height: 112px;
  padding: 18px;
  text-align: left;
  color: #20172b;
  background:
    radial-gradient(circle at 90% 12%, rgba(230, 70, 145, 0.16), transparent 30%),
    linear-gradient(135deg, #fff7fc, #f4e9fb);
  border: 1px solid #eaddeb;
  border-radius: 9px;
  font: inherit;
}

.shift-focus-card span,
.shift-focus-card strong,
.shift-focus-card small {
  display: block;
}

.shift-focus-card span {
  color: var(--purple);
  font-size: 18px;
}

.shift-focus-card strong {
  color: var(--pink);
  font-size: 34px;
  line-height: 1;
}

.shift-focus-card small {
  grid-column: 1 / -1;
  color: #4b365b;
  font-size: 15px;
  line-height: 1.45;
}

.shift-event-form {
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 0.75fr) minmax(190px, 0.75fr) 130px 150px;
}

.shift-toolbar label,
.shift-entry-form label,
.shift-event-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.shift-toolbar label span,
.shift-entry-form label span,
.shift-event-form label span {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.shift-toolbar input,
.shift-entry-form input,
.shift-entry-form select,
.shift-event-form input,
.shift-event-form select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 10px;
  color: #20172b;
  background: #fff;
  border: 1px solid #dcd5e0;
  border-radius: 6px;
  font: inherit;
}

.shift-event-form input[type="date"] {
  min-width: 0;
  padding-right: 8px;
}

.shift-toolbar button,
.shift-entry-form button,
.shift-event-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  color: var(--purple);
  background: #fff;
  border: 1px solid #b98ddd;
  border-radius: 6px;
  font: inherit;
}

.shift-entry-form button {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
}

.shift-event-form button {
  color: #fff;
  background: linear-gradient(135deg, #8c56b8, #5d376e);
  border: 0;
}

.shift-toolbar svg,
.shift-entry-form svg,
.shift-event-form svg {
  width: 17px;
}

.shift-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 22px 16px;
}

.shift-summary div {
  min-height: 64px;
  padding: 12px 14px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.shift-summary span,
.shift-summary strong {
  display: block;
}

.shift-summary span {
  color: var(--muted);
  font-size: 12px;
}

.shift-summary strong {
  margin-top: 7px;
  color: #20172b;
  font-size: 20px;
}

.shift-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  margin: 0 22px 22px;
  overflow: hidden;
  background: #eaddeb;
  border: 1px solid #eaddeb;
  border-radius: 9px;
}

.shift-weekday {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 42px;
  color: #6b5578;
  background: #fff4fa;
  font-size: 13px;
}

.shift-day {
  min-width: 0;
  min-height: 132px;
  padding: 9px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}

.shift-day.is-empty {
  background: #fbf8fd;
}

.shift-day.is-today {
  background: linear-gradient(180deg, #fff7fc, #fff);
  box-shadow: inset 0 0 0 2px rgba(230, 70, 145, 0.22);
}

.shift-calendar .shift-day.has-one-shift {
  background: #fff3ba;
}

.shift-calendar .shift-day.has-one-shift.is-today {
  background: linear-gradient(180deg, #fff3ba, #fff8d6);
}

.shift-calendar .shift-day.is-understaffed {
  background: #fff3ba;
  box-shadow: inset 0 0 0 2px rgba(186, 124, 0, 0.3);
}

.shift-calendar .shift-day.is-understaffed.is-today {
  background: linear-gradient(180deg, #ffe9a0, #fff7cf);
}

.shift-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.shift-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #20172b;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 50%;
  font: inherit;
  line-height: 1;
  appearance: none;
}

.shift-day-total {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #594862;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.shift-day-warning {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  color: #805600;
  font-size: 10px;
  font-weight: 900;
}

.shift-day-more {
  display: block;
  width: 100%;
  padding: 6px 7px;
  color: #5d376e;
  background: #f5eafa;
  border: 1px dashed #c9a9d4;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.shift-day.is-saturday .shift-day-number {
  color: #2563eb;
}

.shift-day.is-sunday .shift-day-number,
.shift-day.is-holiday .shift-day-number {
  color: #dc2626;
}

.shift-calendar .shift-day.is-saturday .shift-day-number {
  color: #2563eb;
}

.shift-calendar .shift-day.is-sunday .shift-day-number,
.shift-calendar .shift-day.is-holiday .shift-day-number {
  color: #dc2626;
}

.shift-day-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.shift-detail-dialog,
.shift-minimum-dialog {
  width: min(650px, calc(100vw - 28px));
  max-height: min(82vh, 760px);
  padding: 0;
  overflow: hidden;
  color: #20172b;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(24, 13, 35, 0.28);
}

.shift-detail-dialog::backdrop,
.shift-minimum-dialog::backdrop {
  background: rgba(22, 12, 30, 0.62);
  backdrop-filter: blur(4px);
}

.shift-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: #fff8fc;
  border-bottom: 1px solid #eaddeb;
}

.shift-detail-head span {
  color: #a33a78;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.shift-detail-head h2 {
  margin: 4px 0 0;
  font-size: 22px;
}

.shift-detail-head small {
  display: block;
  margin-top: 5px;
  color: #725f7c;
  font-weight: 800;
}

.shift-detail-head > button {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #4c3858;
  background: #fff;
  border: 1px solid #dfcfdf;
  border-radius: 11px;
}

.shift-detail-list {
  display: grid;
  gap: 8px;
  max-height: 50vh;
  padding: 16px 20px;
  overflow: auto;
}

.shift-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 34px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 11px;
  background: #fffafd;
  border: 1px solid #eaddeb;
  border-radius: 11px;
}

.shift-detail-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shift-detail-row span,
.shift-detail-row em {
  color: #725f7c;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.shift-detail-row button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #9c315f;
  background: #fff;
  border: 1px solid #e6cad7;
  border-radius: 9px;
  font: inherit;
  font-weight: 900;
}

.shift-detail-empty {
  padding: 42px 16px;
  color: #725f7c;
  font-weight: 800;
  text-align: center;
}

.shift-detail-footer,
.shift-minimum-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: #fff8fc;
  border-top: 1px solid #eaddeb;
}

.shift-detail-footer span {
  color: #725f7c;
  font-size: 12px;
  font-weight: 900;
}

.shift-detail-footer button,
.shift-minimum-actions button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  color: #552559;
  background: #fff;
  border: 1px solid #d9c5dc;
  border-radius: 10px;
  font: inherit;
  font-weight: 900;
}

.shift-minimum-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(82vh, 760px);
}

.shift-minimum-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  overflow: auto;
}

.shift-minimum-body fieldset {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid #eaddeb;
  border-radius: 12px;
}

.shift-minimum-body legend {
  padding: 0 7px;
  color: #594862;
  font-size: 12px;
  font-weight: 900;
}

.shift-minimum-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.shift-minimum-weekdays label,
.shift-minimum-date-row label {
  display: grid;
  gap: 5px;
  color: #725f7c;
  font-size: 11px;
  font-weight: 900;
}

.shift-minimum-weekdays input,
.shift-minimum-date-row input {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 0 9px;
  color: #20172b;
  background: #fff;
  border: 1px solid #d9c5dc;
  border-radius: 9px;
  font: inherit;
}

.shift-minimum-date-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
}

.shift-minimum-body fieldset > small {
  display: block;
  margin-top: 9px;
  color: #725f7c;
  font-size: 11px;
}

.shift-minimum-actions {
  justify-content: flex-end;
}

.shift-minimum-actions .primary {
  color: #fff;
  background: linear-gradient(135deg, #e64691, #7e327f);
  border-color: transparent;
}

@media (max-width: 700px) {
  .shift-minimum-weekdays {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .shift-detail-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.shift-event-list {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.shift-event-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 26px;
  padding: 4px 4px 4px 8px;
  overflow: hidden;
  color: #fff;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  box-shadow: 0 8px 16px rgba(20, 15, 32, 0.08);
}

.shift-event-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.shift-event-chip button,
.shift-delete {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: inherit;
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 13px;
  line-height: 1;
}

.event-pink {
  background: linear-gradient(135deg, #ff77b8, #df3f8c);
}

.event-purple {
  background: linear-gradient(135deg, #9b6bd0, #5d376e);
}

.event-blue {
  background: linear-gradient(135deg, #5b8de7, #4661b9);
}

.event-green {
  background: linear-gradient(135deg, #45b98d, #2d7e63);
}

.event-gold {
  color: #2f2132;
  background: linear-gradient(135deg, #ffe28a, #d39a2b);
}

.shift-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  overflow: hidden;
  text-align: left;
  color: #fff;
  background: linear-gradient(135deg, #8c56b8, #5d376e);
  border: 0;
  border-radius: 6px;
  font: inherit;
}

.shift-chip strong {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shift-chip span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shift-chip strong {
  font-size: 12px;
}

.shift-chip span {
  color: #f3e8fb;
  font-size: 11px;
}

.shift-chip em {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  color: #5d376e;
  background: #fff;
  border-radius: 999px;
  font-style: normal;
  font-size: 10px;
}

.shift-delete {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: #fff;
}

.shift-empty {
  color: #b1a5ba;
  font-size: 12px;
}

.ticket-edit-head {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 3px;
}

.ticket-edit-head strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 15px;
}

.ticket-edit-head small {
  color: var(--muted);
  font-size: 12px;
}

.ticket-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: var(--purple);
  background: #f2e8fb;
  border: 1px solid #e2d0f3;
  border-radius: 999px;
  font-size: 12px;
}

.ticket-escort-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 10px;
  color: #d71955;
  background: linear-gradient(135deg, #fff, #fff1f8);
  border: 1px solid #ff9bc9;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgb(232 79 155 / 24%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.ticket-escort-pill span {
  color: #d71955;
  font-size: 9px;
  line-height: 1;
}

.ticket-edit-card .wide {
  grid-column: span 2;
}

.ticket-edit-card label {
  display: grid;
  gap: 6px;
}

.ticket-edit-card label span {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.ticket-edit-actions {
  display: flex;
  gap: 6px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  align-self: end;
}

.ticket-edit-actions .row-action {
  min-width: 58px;
}

.ticket-edit-actions .row-action.ghost {
  color: var(--purple);
  background: #fff;
  border-color: #caa8e2;
}

.ticket-order-detail {
  display: none;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  background: #fff7fc;
  border: 1px solid #efd7e8;
  border-radius: 7px;
}

.ticket-edit-card.show-detail .ticket-order-detail {
  display: grid;
}

.ticket-order-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ticket-order-meta div,
.ticket-order-totals span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.ticket-order-meta span,
.ticket-order-totals span {
  color: var(--muted);
  font-size: 11px;
}

.ticket-order-meta strong,
.ticket-order-totals strong {
  color: var(--ink);
  font-size: 14px;
}

.ticket-order-table {
  overflow: hidden;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.ticket-order-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 100px 54px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid #f0e6ef;
  font-size: 13px;
}

.ticket-order-row:first-child {
  border-top: 0;
}

.ticket-order-row.head {
  color: var(--muted);
  background: #fff0f8;
  font-size: 12px;
}

.ticket-order-row b,
.ticket-order-row small {
  display: block;
}

.ticket-order-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.ticket-order-totals {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.menu-settings-form {
  grid-template-columns: minmax(220px, 0.9fr) minmax(220px, 1fr) minmax(145px, 170px) 110px;
}

.menu-settings-form.points-enabled {
  grid-template-columns: minmax(200px, .9fr) minmax(200px, 1fr) minmax(140px, 160px) minmax(105px, 125px) 110px;
}

#menu-back {
  font-size: 15px;
}

#menu-back::placeholder {
  overflow: visible;
  color: inherit;
  opacity: .78;
  text-overflow: clip;
}

#menu-nomination {
  grid-column: 1;
}

#menu-payroll-category {
  grid-column: 2 / span 2;
}

#add-menu-item {
  grid-column: 4;
}

.menu-settings-form.points-enabled #add-menu-item {
  grid-column: 5;
}

#apply-pdf-menu {
  grid-column: 1 / -1;
}

.settings-form .secondary-settings-button {
  color: #4c1d95;
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
}

.staff-settings-form {
  grid-template-columns: minmax(0, 1fr) 100px;
}

#staff-name,
#staff-type,
#staff-manual-type-label,
#staff-color,
#add-staff {
  grid-column: 1 / -1;
}

.tax-settings-form {
  grid-template-columns: repeat(3, minmax(150px, 1fr)) 100px;
  align-items: end;
}

.tax-settings-form label {
  display: grid;
  gap: 7px;
}

.rounding-mode-field {
  grid-column: 1;
}

.tax-rounding-fields {
  display: grid;
  grid-column: 2 / 4;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 12px;
}

.tax-rounding-fields[hidden] {
  display: none;
}

.settings-panel-heading {
  min-height: 76px;
  height: auto;
  align-items: center;
}

.settings-panel-heading > div {
  min-width: 0;
}

.settings-panel-heading h2,
.settings-panel-heading p {
  margin: 0;
}

.settings-panel-heading p {
  margin-top: 4px;
  color: var(--theme-muted, var(--muted));
  font-size: 12px;
  font-weight: 700;
}

.settings-subsection {
  margin: 16px 20px;
  overflow: hidden;
  color: var(--theme-text, var(--ink));
  border: 1px solid var(--theme-line, var(--line));
  border-radius: 10px;
  background: var(--theme-surface-2, #fff7fc);
}

.settings-subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--theme-line, var(--line));
}

.settings-subsection-head > div {
  display: grid;
  gap: 3px;
}

.settings-subsection-head strong {
  color: var(--theme-text, var(--ink));
  font-size: 14px;
}

.settings-subsection-head small {
  color: var(--theme-muted, var(--muted));
  font-size: 11px;
  font-weight: 700;
}

.settings-list-heading {
  margin: 12px 20px 0;
  border: 1px solid var(--theme-line, var(--line));
  border-radius: 10px 10px 0 0;
  background: var(--theme-surface-2, #fff7fc);
}

.settings-list-heading + .settings-form {
  margin-top: 0;
}

.payroll-basic-form {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) minmax(150px, auto);
  margin: 0;
  padding: 16px;
  align-items: end;
}

.payroll-basic-form label {
  display: grid;
  gap: 7px;
}

.tax-settings-subsection .tax-settings-form {
  margin: 0;
  padding: 16px;
}

.tax-rate-form {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.tax-rounding-form {
  grid-template-columns: minmax(180px, .7fr) minmax(320px, 1.3fr);
}

.tax-rounding-form .rounding-mode-field {
  grid-column: auto;
}

.tax-rounding-form .tax-rounding-fields {
  grid-column: auto;
}

.tax-settings-subsection .tax-rounding-note {
  margin: -2px 16px 16px;
}

.settings-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 20px 20px;
}

.settings-panel-actions span {
  margin-right: auto;
  color: var(--theme-muted, var(--muted));
  font-size: 12px;
  font-weight: 800;
}

.settings-panel-actions button,
.payroll-basic-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  color: var(--theme-action-text, #fff);
  border: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--theme-action, var(--pink)), var(--theme-action-2, var(--purple)));
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.settings-panel-actions button svg,
.payroll-basic-form button svg {
  width: 17px;
  height: 17px;
}

.store-operation-settings {
  grid-template-columns: minmax(240px, 1fr) 2fr;
}

.store-operation-settings label {
  max-width: 420px;
}

.store-operation-settings small {
  color: var(--theme-muted, var(--muted));
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
}

.adjustment-settings-form {
  grid-template-columns: minmax(160px, 0.55fr) minmax(220px, 1fr) 120px;
  align-items: end;
}

.adjustment-settings-form label {
  display: grid;
  gap: 7px;
}

.sync-settings-form {
  grid-template-columns: minmax(220px, 1fr) 110px 120px;
  align-items: end;
}

.sync-settings-form label {
  display: grid;
  gap: 7px;
}

.sync-info {
  display: grid;
  gap: 6px;
  padding: 12px;
  color: #2b2235;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.sync-info small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}

.settings-form input,
.settings-form select {
  min-width: 0;
  height: 42px;
  padding: 0 10px;
  color: #20172b;
  background: #fff;
  border: 1px solid #dcd5e0;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}

.settings-form button,
.settings-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  border-radius: 6px;
  font: inherit;
}

.settings-list {
  display: grid;
  gap: 10px;
  padding: 0 18px;
}

.settings-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.settings-group > strong {
  color: var(--purple);
}

.settings-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-group-title strong {
  color: var(--purple);
}

.settings-group-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-group-title label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7b687d;
  font-size: 12px;
  font-weight: 900;
}

.settings-group-title select {
  width: 82px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e3dbe7;
  border-radius: 5px;
  font: inherit;
}

.delete-category-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  color: #b01957;
  background: #fff;
  border: 1px solid #f0bdd8;
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 110px 130px 42px;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.menu-settings-row {
  grid-template-columns: minmax(210px, 1.3fr) 100px minmax(125px, 150px) 92px 140px 126px;
}

.menu-settings-row.points-enabled {
  grid-template-columns: minmax(190px, 1.25fr) 92px minmax(120px, 140px) 92px 82px 132px 118px;
}

.menu-settings-title > div:first-child > div {
  display: grid;
  gap: 3px;
}

.menu-settings-title > div:first-child small {
  color: var(--theme-muted, #806f84);
  font-size: 11px;
  font-weight: 800;
}

.menu-settings-title {
  align-items: center;
}

.back-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--theme-surface-2, #f7f1f8);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 10px;
}

.back-mode-switch > span {
  padding: 0 7px;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.back-mode-switch button,
.ticket-config-panel-head .back-mode-switch button {
  min-height: 32px;
  padding: 0 11px;
  color: var(--theme-muted, #806f84);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  box-shadow: none;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.back-mode-switch .back-points-toggle {
  margin-left: 6px;
  border-left-color: var(--theme-line, #dfd1e2);
}

.back-mode-switch button.active,
.ticket-config-panel-head .back-mode-switch button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #e64691), var(--purple, #7c3aed));
  border-color: transparent;
}

html[data-theme="luxury"] .back-mode-switch button.active,
html[data-theme="luxury"] .ticket-config-panel-head .back-mode-switch button.active {
  color: #181109;
  background: linear-gradient(135deg, #e1c77f, #a77d35);
}

.menu-settings-head {
  min-height: 34px;
  color: #7b687d;
  background: #fff0f8;
  font-size: 12px;
  font-weight: 900;
}

.menu-settings-head span {
  padding: 0 8px;
  overflow: visible;
  line-height: 1.25;
  white-space: normal;
}

.menu-settings-head span:last-child {
  text-align: center;
}

.settings-row input {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #e3dbe7;
  border-radius: 5px;
  font: inherit;
}

.settings-row select {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #e3dbe7;
  border-radius: 5px;
  font: inherit;
}

.payroll-rate-row {
  grid-template-columns: minmax(120px, 1fr) 120px;
}

.payroll-category-form {
  grid-template-columns: minmax(220px, 1fr) 160px;
}

.payroll-category-row {
  grid-template-columns: minmax(160px, 1fr) 110px;
}

.payroll-category-row small {
  color: #8a7b8d;
  text-align: center;
}

.settings-row button {
  min-height: 34px;
  color: var(--pink);
  background: #fff;
  border: 1px solid #f0bdd8;
}

.settings-row.store-settings-row {
  grid-template-columns: 18px minmax(120px, 150px) minmax(180px, 1fr) 86px 86px 76px 90px 58px;
  gap: 10px;
  padding: 12px;
}

.store-settings-row > * {
  min-width: 0;
}

.store-settings-row > .store-color-dot {
  align-self: center;
  justify-self: center;
}

.store-settings-row .store-color-field input[type="color"] {
  min-width: 54px;
  padding: 3px;
}

.store-settings-row .store-enabled-switch {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.store-settings-row .store-enabled-switch input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  padding: 0;
}

.store-settings-row button {
  width: 100%;
  padding: 0 8px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .settings-row.store-settings-row {
    grid-template-columns: 18px minmax(120px, 0.8fr) minmax(180px, 1.3fr) 86px;
  }

  .store-settings-row .store-enabled-switch {
    grid-column: 2;
  }

  .store-settings-row button {
    grid-row: 2;
  }
}

@media (max-width: 700px) {
  .settings-row.store-settings-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .store-settings-row .store-id-field,
  .store-settings-row .store-name-field,
  .store-settings-row .store-color-field,
  .store-settings-row .store-enabled-switch,
  .store-settings-row button {
    grid-column: 2;
    grid-row: auto;
  }

  .settings-subsection,
  .settings-list-heading {
    margin-inline: 10px;
  }

  .payroll-basic-form,
  .tax-rate-form,
  .tax-rounding-form {
    grid-template-columns: 1fr;
  }

  .tax-rounding-form .tax-rounding-fields {
    grid-template-columns: 1fr;
  }

  .settings-panel-actions {
    align-items: stretch;
    flex-direction: column;
    padding-inline: 10px;
  }

  .settings-panel-actions button {
    width: 100%;
  }
}

.menu-row-actions {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 6px;
  justify-content: center;
}

.menu-row-actions button {
  width: 34px;
  min-height: 34px;
  padding: 0;
}

.menu-row-actions button:disabled {
  opacity: 0.35;
}

.staff-master-list .settings-row {
  grid-template-columns: minmax(0, 1fr) 130px minmax(140px, 190px) 42px;
}

.staff-manual-type-input {
  min-width: 0;
}

.staff-master-row > span {
  display: flex;
  align-items: center;
  min-width: 0;
}

.staff-master-row > span > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.staff-master-row > span strong {
  overflow: hidden;
  color: var(--theme-text, #2d2038);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-type-badge {
  justify-self: start;
  padding: 2px 7px;
  color: #4e3b16;
  border: 1px solid #d8bd80;
  border-radius: 999px;
  background: #fff4d8;
  font-size: 10px;
  font-weight: 900;
}

.staff-type-badge.type-other {
  color: #254f76;
  border-color: #a8c9e8;
  background: #eaf5ff;
}

.staff-type-badge.type-support {
  color: #28634d;
  border-color: #a7d8c2;
  background: #eaf9f2;
}

.staff-type-badge.type-trial {
  color: #7a3d65;
  border-color: #e0b3d1;
  background: #fff0f9;
}

.staff-type-badge.type-manual {
  color: #5d5365;
  border-color: #cec3d3;
  background: #f3eff5;
}

.portal-settings-row {
  grid-template-columns: minmax(120px, 1fr) minmax(150px, 1fr) 130px;
}

.portal-settings-head {
  min-height: 34px;
  color: #7b687d;
  background: #fff0f8;
  font-size: 12px;
  font-weight: 900;
}

.staff-master-list .avatar-chip {
  display: inline-grid;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  font-size: 15px;
  vertical-align: middle;
}

.management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 16px;
  padding: 0 18px 20px;
}

.management-grid .table-panel {
  min-height: 360px;
}

.payroll-panel {
  margin: 0 18px 20px;
  overflow: visible;
}

.payroll-controls {
  display: grid;
  grid-template-columns: 170px 160px 120px 140px 100px 90px 110px 120px 72px;
  gap: 12px;
  align-items: end;
  padding: 0 18px 16px;
}

.payroll-controls .search-btn,
.payroll-manual-toggle,
.payroll-pdf-button {
  height: 46px;
  border-radius: 6px;
  font: inherit;
}

.payroll-controls .search-btn {
  width: 90px;
}

.payroll-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 14px;
}

.payroll-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  padding: 4px;
  border: 1px solid #e5dce8;
  border-radius: 10px;
  background: #f7f3f8;
}

.payroll-view-switch button,
.payroll-layout-button {
  min-height: 42px;
  border-radius: 7px;
  font: inherit;
  font-weight: 900;
}

.payroll-view-switch button {
  padding: 0 16px;
  color: #736779;
  background: transparent;
  border: 0;
}

.payroll-view-switch button.active {
  color: var(--theme-action-text, #fff);
  background: linear-gradient(135deg, var(--theme-action, var(--pink)), var(--theme-action-2, var(--purple)));
  box-shadow: 0 5px 14px rgba(126, 69, 159, 0.2);
}

.payroll-layout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--purple);
  background: #fff;
  border: 1px solid rgba(139, 83, 186, 0.32);
}

.payroll-layout-button svg {
  width: 17px;
  height: 17px;
}

.payroll-manual-toggle {
  width: 110px;
  color: var(--purple);
  background: #fff;
  border: 1px solid rgba(139, 83, 186, 0.35);
  font-weight: 800;
}

.payroll-manual-toggle.active {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  border-color: transparent;
}

.payroll-pdf-button {
  width: 72px;
  color: #fff;
  background: var(--pink);
  border: 0;
  font-weight: 900;
}

.payroll-scroll {
  width: 100%;
  overflow: visible;
  border-top: 1px solid #ede7ef;
}

.payroll-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 10px;
  background: #fff;
}

.payroll-table th,
.payroll-table td {
  height: 30px;
  padding: 0 2px;
  color: #111;
  text-align: center;
  border: 1px solid #252525;
  font-size: 10px;
  font-weight: 700;
  white-space: normal;
  line-height: 1.15;
}

.payroll-table thead th {
  height: 30px;
  background: #f0f0f0;
}

.payroll-name-row th {
  background: #fff;
  border-top: 3px solid #bfbfbf;
  font-size: 12px;
}

.payroll-table tbody th {
  background: #fff;
  font-weight: 700;
}

.payroll-table .zero {
  color: #111;
}

.payroll-table .payroll-input {
  width: 100%;
  min-width: 0;
  height: 25px;
  padding: 0 2px;
  text-align: right;
  background: #fffdfd;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  outline: 0;
  font: inherit;
}

.payroll-table .payroll-input:focus,
.editable-table-input:focus,
.editable-table-select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 2px rgba(230, 70, 145, 0.14);
}

.payroll-table .payroll-remote-input {
  min-width: 90px;
  text-align: right;
}

.payroll-table tfoot td,
.payroll-table tfoot th {
  height: 34px;
  background: #fafafa;
  border-color: #bfbfbf;
  font-size: 11px;
}

.payroll-total-label {
  text-align: right !important;
}

.payroll-remote-row th,
.payroll-remote-row td {
  height: 38px !important;
}

.payroll-remote-row td {
  text-align: left;
}

.payroll-summary-view {
  padding: 0 18px 22px;
}

.payroll-summary-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(135deg, #211126, #71325d 62%, #a84f79);
  box-shadow: 0 18px 40px rgba(43, 16, 49, 0.18);
}

.payroll-summary-hero span,
.payroll-summary-days header span {
  display: block;
  margin-bottom: 6px;
  color: #f0b2d4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.payroll-summary-hero h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
}

.payroll-summary-hero h3 small {
  font-size: 14px;
}

.payroll-summary-hero p,
.payroll-summary-hero small {
  margin: 5px 0 0;
  color: #e8dbe8;
  font-weight: 700;
}

.payroll-summary-hero > div:last-child {
  min-width: 220px;
  text-align: right;
}

.payroll-summary-hero > div:last-child strong {
  display: block;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
}

.payroll-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.payroll-summary-metrics article,
.payroll-summary-columns article {
  padding: 17px;
  border: 1px solid #eadfeb;
  border-radius: 10px;
  background: #fff;
}

.payroll-summary-metrics span,
.payroll-summary-columns span {
  display: block;
  color: #817487;
  font-size: 11px;
  font-weight: 800;
}

.payroll-summary-metrics strong,
.payroll-summary-columns strong {
  display: block;
  margin-top: 5px;
  color: #2e2033;
  font-size: 22px;
}

.payroll-summary-metrics strong small {
  margin-left: 3px;
  font-size: 12px;
}

.payroll-summary-metrics p,
.payroll-summary-columns small {
  margin: 6px 0 0;
  color: #8c7e91;
  font-size: 11px;
  font-weight: 700;
}

.payroll-summary-metrics article.deduct {
  background: #fff8f7;
  border-color: #f0d8d3;
}

.payroll-summary-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.payroll-summary-columns strong {
  font-size: 17px;
}

.payroll-summary-days {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #e8dfe9;
  border-radius: 12px;
  background: #fff;
}

.payroll-summary-days > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee6ef;
}

.payroll-summary-days h4 {
  margin: 0;
  color: #302335;
  font-size: 17px;
}

.payroll-summary-days > header > strong {
  color: var(--purple);
}

.payroll-summary-day-list article {
  display: grid;
  grid-template-columns: 68px repeat(4, minmax(105px, 1fr));
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #f0eaf1;
}

.payroll-summary-day-list article:last-child {
  border-bottom: 0;
}

.payroll-summary-day-list time {
  color: #322537;
  font-size: 24px;
  font-weight: 900;
}

.payroll-summary-day-list time small {
  margin-left: 2px;
  font-size: 11px;
}

.payroll-summary-day-list div span {
  display: block;
  color: #8b7e90;
  font-size: 10px;
  font-weight: 800;
}

.payroll-summary-day-list div strong {
  color: #302335;
  font-size: 14px;
}

.payroll-summary-day-list div.total strong {
  color: var(--pink);
  font-size: 17px;
}

.payroll-summary-empty {
  margin: 0;
  padding: 32px;
  color: #8b7e90;
  text-align: center;
  font-weight: 800;
}

body.payroll-layout-open {
  overflow: hidden;
}

.payroll-layout-modal {
  position: fixed;
  z-index: 2400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 9, 21, 0.72);
  backdrop-filter: blur(7px);
}

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

.payroll-layout-dialog {
  width: min(880px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid #d9c9dc;
  border-radius: 16px;
  background: #fbf9fc;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.payroll-layout-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 18px;
  color: #fff;
  background: linear-gradient(135deg, #251329, #693256);
}

.payroll-layout-dialog > header span {
  color: #eab4d1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.payroll-layout-dialog h3 {
  margin: 4px 0;
  font-size: 22px;
}

.payroll-layout-dialog header p {
  margin: 0;
  color: #e5d7e4;
  font-size: 12px;
  font-weight: 700;
}

.payroll-layout-close {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.payroll-layout-dialog-body {
  max-height: calc(100vh - 235px);
  overflow: auto;
  padding: 16px 20px;
}

.payroll-layout-presets {
  display: grid;
  grid-template-columns: minmax(170px, 1.25fr) repeat(3, minmax(120px, 1fr));
  gap: 9px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #e4d9e6;
  border-radius: 10px;
  background: #f4eef5;
}

.payroll-layout-presets > div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0 5px;
}

.payroll-layout-presets > div strong,
.payroll-layout-presets > div span,
.payroll-layout-presets button b,
.payroll-layout-presets button small {
  display: block;
}

.payroll-layout-presets > div strong {
  color: #352539;
  font-size: 13px;
}

.payroll-layout-presets > div span,
.payroll-layout-presets button small {
  margin-top: 3px;
  color: #8b7b90;
  font-size: 10px;
  font-weight: 700;
}

.payroll-layout-presets button {
  min-height: 58px;
  padding: 8px 10px;
  text-align: left;
  color: #4e3b54;
  border: 1px solid #dacddd;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}

.payroll-layout-presets button.active {
  color: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(139, 83, 186, 0.12);
}

.payroll-layout-list-head,
.payroll-layout-row {
  display: grid;
  grid-template-columns: 92px minmax(160px, 1fr) 180px 92px;
  gap: 10px;
  align-items: center;
}

.payroll-layout-list-head {
  padding: 0 10px 8px;
  color: #827486;
  font-size: 10px;
  font-weight: 900;
}

.payroll-layout-row {
  min-height: 58px;
  padding: 8px 10px;
  border-top: 1px solid #ece4ed;
}

.payroll-layout-row input[type="text"],
.payroll-layout-row select {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  color: #302435;
  border: 1px solid #dcd1df;
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-weight: 800;
}

.payroll-layout-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #59465f;
  font-size: 11px;
  font-weight: 900;
}

.payroll-layout-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}

.payroll-layout-order {
  display: grid;
  grid-template-columns: repeat(2, 40px);
  gap: 5px;
}

.payroll-layout-order button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--purple);
  border: 1px solid #ded2e0;
  border-radius: 7px;
  background: #fff;
}

.payroll-layout-order button:disabled {
  opacity: 0.3;
}

.payroll-layout-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid #ded3e0;
  background: #f3eef4;
}

.payroll-layout-dialog > footer > div {
  display: flex;
  gap: 8px;
}

.payroll-layout-dialog footer button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
}

.payroll-layout-reset,
.payroll-layout-cancel {
  color: #5e4f63;
  border: 1px solid #d8ccda;
  background: #fff;
}

.payroll-layout-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--pink), var(--purple));
}

@media (max-width: 920px) {
  .payroll-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-summary-day-list article {
    grid-template-columns: 58px repeat(2, minmax(110px, 1fr));
  }

  .payroll-summary-day-list article > div:nth-of-type(3),
  .payroll-summary-day-list article > div:nth-of-type(4) {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .payroll-view-toolbar,
  .payroll-layout-dialog > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .payroll-view-switch,
  .payroll-layout-button {
    width: 100%;
  }

  .payroll-summary-hero {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .payroll-summary-hero > div:last-child {
    min-width: 0;
    text-align: left;
  }

  .payroll-summary-day-list article {
    grid-template-columns: 52px 1fr 1fr;
  }

  .payroll-layout-modal {
    padding: 8px;
  }

  .payroll-layout-dialog {
    max-height: calc(100vh - 16px);
  }

  .payroll-layout-dialog-body {
    max-height: calc(100vh - 270px);
  }

  .payroll-layout-list-head {
    display: none;
  }

  .payroll-layout-presets {
    grid-template-columns: 1fr 1fr;
  }

  .payroll-layout-presets > div {
    grid-column: 1 / -1;
  }

  .payroll-layout-row {
    grid-template-columns: 90px 1fr 82px;
  }

  .payroll-layout-row > label:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .payroll-layout-order {
    grid-column: 3;
    grid-row: 1;
  }

  .payroll-layout-dialog > footer > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 460px) {
  .payroll-summary-metrics {
    grid-template-columns: 1fr;
  }

  .payroll-summary-day-list article {
    grid-template-columns: 48px 1fr;
  }

  .payroll-summary-day-list article > div {
    grid-column: 2;
  }
}

.salary-builder {
  margin: 18px;
  padding: 18px;
  border: 1px solid #e5dce8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(45, 18, 62, 0.05);
}

.salary-builder-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.salary-builder-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
}

.salary-builder-bar {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(210px, 240px) minmax(120px, 140px) minmax(420px, 1fr);
  gap: 16px;
  align-items: end;
  padding: 18px;
  border: 1px solid #e1d8e7;
  border-radius: 8px;
  background: #fbfdff;
}

.salary-builder-control {
  display: grid;
  gap: 7px;
  align-items: start;
}

.salary-builder-control.staff {
  grid-template-columns: 1fr;
}

.salary-builder-control.month {
  grid-template-columns: 1fr;
}

.salary-builder-control.small {
  grid-template-columns: 1fr;
}

.salary-builder-control > span,
.salary-builder-period > span {
  color: #6c7080;
  font-weight: 900;
}

.salary-builder-control strong,
.salary-builder-period strong {
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
}

.salary-builder-period {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.salary-builder-period strong {
  overflow: hidden;
  font-size: 20px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.salary-export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  grid-column: 1 / -1;
  justify-self: end;
  width: min(100%, 320px);
  min-height: 58px;
  padding: 0 18px;
  color: #fff;
  background: #17687a;
  border: 0;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.salary-export-button:hover {
  filter: brightness(1.05);
}

.salary-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.salary-summary-card {
  min-height: 86px;
  padding: 14px;
  border: 1px solid #eadcec;
  border-radius: 8px;
  background: #fff8fd;
}

.salary-summary-card span,
.salary-summary-card small {
  display: block;
  color: #6d6174;
  font-size: 12px;
  font-weight: 800;
}

.salary-summary-card strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

.salary-summary-card.accent strong {
  color: var(--pink);
}

.salary-summary-card.deduct {
  border-color: #ffd0dc;
}

.salary-summary-card.deduct strong {
  color: #cf275d;
}

.salary-summary-card.tax {
  border-color: #e1c58e;
  background: #fffaf0;
}

.salary-document-tax-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid #d7bd85;
  border-radius: 9px;
  background: #fffaf0;
}

.salary-document-tax-field > span strong,
.salary-document-tax-field > span small {
  display: block;
}

.salary-document-tax-field > span strong {
  color: #493713;
  font-size: 12px;
}

.salary-document-tax-field > span small {
  margin-top: 3px;
  color: #79663e;
  font-size: 10px;
  font-weight: 700;
}

.salary-document-tax-field > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.salary-document-tax-field > label > span {
  color: #72531b;
  font-size: 18px;
  font-weight: 900;
}

.salary-document-tax-field input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  color: #251d12;
  border: 1px solid #c8a866;
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  text-align: right;
}

.salary-document-tax-field input:focus {
  border-color: #72531b;
  outline: 3px solid rgba(160, 117, 36, .2);
}

.salary-document-tax-field input:disabled {
  color: #746b5e;
  background: #eee9df;
  cursor: not-allowed;
}

.salary-summary-card.total {
  background: #f0fbf7;
  border-color: #bdebd8;
}

.salary-summary-card.total strong {
  color: #14885a;
}

.salary-document-designer {
  margin: 0 18px 22px;
  overflow: hidden;
  border: 1px solid #ded5df;
  border-radius: 14px;
  background: #f7f4f1;
  box-shadow: 0 16px 38px rgba(45, 18, 62, 0.08);
}

.salary-document-designer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid #e1d8e3;
  background: #fff;
}

.salary-document-designer-head span {
  color: #8b6d32;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.salary-document-designer-head h3 {
  margin: 4px 0;
  color: #282229;
  font-size: 20px;
}

.salary-document-designer-head p {
  margin: 0;
  color: #776d79;
  font-size: 12px;
  font-weight: 700;
}

.salary-document-designer-head > strong {
  flex: 0 0 auto;
  padding: 8px 11px;
  color: #765d2a;
  border: 1px solid #dccb9f;
  border-radius: 7px;
  background: #fbf5e6;
  font-size: 11px;
}

.salary-document-workspace {
  display: grid;
  grid-template-columns: 190px minmax(300px, 1fr) minmax(290px, 360px);
  min-height: 600px;
}

.salary-document-templates,
.salary-document-editor,
.salary-document-preview-pane {
  padding: 18px;
}

.salary-document-templates,
.salary-document-editor {
  border-right: 1px solid #ded6df;
}

.salary-document-workspace h4 {
  margin: 0;
  color: #302a31;
  font-size: 14px;
}

.salary-document-templates > small,
.salary-document-editor-head small {
  display: block;
  margin-top: 4px;
  color: #817782;
  font-size: 10px;
  font-weight: 700;
}

.salary-document-templates > div {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.salary-document-templates button {
  min-height: 82px;
  padding: 12px;
  color: #302a31;
  text-align: left;
  border: 1px solid #ddd5df;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.salary-document-templates button strong,
.salary-document-templates button span {
  display: block;
}

.salary-document-templates button strong {
  font-size: 13px;
}

.salary-document-templates button span {
  margin-top: 5px;
  color: #837985;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.salary-document-templates button[aria-pressed="true"] {
  border-color: #98783a;
  background: #f6eedb;
  box-shadow: inset 3px 0 0 #98783a;
}

.salary-document-editor-head,
.salary-document-preview-label {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.salary-document-editor-head {
  padding-bottom: 14px;
  border-bottom: 1px solid #e0d8e1;
}

.salary-document-editor-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #19825b;
  font-size: 10px;
  font-weight: 900;
}

.salary-document-editor-head > span::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.salary-document-title-field {
  display: grid;
  gap: 6px;
  margin-top: 15px;
  color: #756b77;
  font-size: 10px;
  font-weight: 800;
}

.salary-document-title-field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  color: #302a31;
  border: 1px solid #dbd2dd;
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-weight: 800;
}

.salary-document-field-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.salary-document-field-list > label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid #ddd5df;
  border-radius: 9px;
  background: #fff;
}

.salary-document-drag {
  color: #9b929d;
  font-size: 16px;
}

.salary-document-field-list strong,
.salary-document-field-list small {
  display: block;
}

.salary-document-field-list strong {
  color: #332c34;
  font-size: 12px;
}

.salary-document-field-list small {
  margin-top: 3px;
  color: #827783;
  font-size: 10px;
  font-weight: 700;
}

.salary-document-field-list input {
  position: relative;
  width: 42px;
  height: 24px;
  appearance: none;
  border-radius: 999px;
  background: #d7d0d9;
  transition: background .18s ease;
}

.salary-document-field-list input::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  content: "";
  transition: transform .18s ease;
}

.salary-document-field-list input:checked {
  background: #9a7838;
}

.salary-document-field-list input:checked::after {
  transform: translateX(18px);
}

.salary-document-preview-pane {
  background: #eee9e3;
}

.salary-document-preview-label {
  margin-bottom: 11px;
}

.salary-document-preview-label span {
  color: #7c737d;
  font-size: 10px;
  font-weight: 700;
}

.salary-document-sheet {
  width: min(100%, 302px);
  min-height: 500px;
  margin: 0 auto;
  padding: 22px 18px;
  color: #171717;
  border: 1px solid #d4cec6;
  background: #fff;
  box-shadow: 0 16px 36px rgba(38, 31, 27, .12);
}

.salary-document-sheet-brand {
  color: #745d2c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-align: center;
}

.salary-document-sheet > h4 {
  margin: 8px 0 0;
  color: #171717;
  font-size: 18px;
  text-align: center;
}

.salary-document-person {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #2d2925;
}

.salary-document-person strong {
  font-size: 16px;
}

.salary-document-person small {
  color: #605b56;
  font-size: 9px;
}

.salary-document-sheet-rows {
  margin-top: 11px;
}

.salary-document-sheet-rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  border-bottom: 1px solid #e3ded7;
  font-size: 10px;
}

.salary-document-net {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 2px solid #2d2925;
}

.salary-document-net span {
  font-size: 11px;
}

.salary-document-net strong {
  font-size: 21px;
}

.salary-document-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid #ddd4df;
  background: #fff;
}

.salary-document-actions > span {
  color: #766c78;
  font-size: 11px;
  font-weight: 700;
}

.salary-document-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 17px;
  color: #fff;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #9f7c3a, #6f5524);
  font: inherit;
  font-weight: 900;
}

@media (max-width: 1120px) {
  .salary-document-workspace {
    grid-template-columns: 180px minmax(280px, 1fr) 290px;
  }
}

@media (max-width: 860px) {
  .salary-document-workspace {
    grid-template-columns: 1fr;
  }

  .salary-document-templates,
  .salary-document-editor {
    border-right: 0;
    border-bottom: 1px solid #ded6df;
  }

  .salary-document-templates > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .salary-document-preview-pane {
    padding-inline: max(18px, 12vw);
  }
}

@media (max-width: 580px) {
  .salary-document-designer-head,
  .salary-document-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .salary-document-designer-head > strong,
  .salary-document-actions button {
    width: 100%;
    text-align: center;
  }

  .salary-document-templates > div {
    grid-template-columns: 1fr;
  }

  .salary-document-preview-pane {
    padding-inline: 14px;
  }
}

.salary-staff-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.salary-staff-card {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 2.2fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #eadcec;
  border-radius: 8px;
  background: #fff;
}

.salary-staff-card > div {
  display: grid;
  gap: 4px;
}

.salary-staff-card strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.salary-staff-card span {
  color: #7a6d81;
  font-size: 12px;
  font-weight: 800;
}

.salary-staff-card dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.salary-staff-card dl div {
  min-width: 0;
}

.salary-staff-card dt {
  color: #7a6d81;
  font-size: 11px;
  font-weight: 800;
}

.salary-staff-card dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.salary-export-status {
  margin: 12px 0 0;
  color: #7b6286;
  font-size: 13px;
  font-weight: 800;
}

.panel-title-split {
  justify-content: space-between;
}

.panel-title-split > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-title-split strong {
  color: var(--purple);
  font-size: 13px;
}

.empty-table {
  height: 120px;
  color: var(--muted);
  text-align: center;
  white-space: normal;
}

.empty-side {
  margin: 0 20px 16px;
  padding: 24px 16px;
  color: var(--muted);
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
  font-size: 13px;
}

.side-panels {
  display: grid;
  gap: 16px;
  align-content: start;
}

.cast-panel {
  padding-bottom: 16px;
}

.cast-management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  align-items: start;
  gap: 18px;
  padding: 0 20px 20px;
}

.cast-ranking-admin,
.cast-directory-admin {
  min-width: 0;
  padding: 14px;
  background: var(--theme-surface-2, #fff8fc);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 12px;
}

.cast-section-heading {
  display: grid;
  gap: 3px;
  margin-bottom: 12px;
}

.cast-section-heading strong {
  color: var(--theme-text, var(--ink));
  font-size: 14px;
}

.cast-section-heading small {
  color: var(--theme-muted, var(--muted));
  font-size: 11px;
  font-weight: 800;
}

.cast-ranking-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px;
  color: var(--theme-text, var(--ink));
  background: var(--theme-surface-2, #fff8fc);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 10px;
}

.cast-ranking-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cast-ranking-controls label[hidden] {
  display: none !important;
}

.cast-ranking-controls label span {
  color: var(--theme-muted, var(--muted));
  font-size: 11px;
  font-weight: 900;
}

.cast-ranking-controls select,
.cast-ranking-controls input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 9px;
  color: var(--theme-text, var(--ink));
  -webkit-text-fill-color: var(--theme-text, var(--ink));
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #d8cfdd);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.cast-ranking-period-label {
  margin: 0 0 10px;
  color: var(--theme-muted, var(--muted));
  font-size: 11px;
  font-weight: 900;
}

.cast-directory-admin {
  margin: 0;
}

.cast-directory-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cast-directory-admin-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cast-directory-admin-head strong {
  color: var(--theme-text, var(--ink));
  font-size: 14px;
}

.cast-directory-admin-head small {
  color: var(--theme-muted, var(--muted));
  font-size: 11px;
  font-weight: 800;
}

.cast-directory-admin-head button,
.admin-cast-add-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 11px;
  color: var(--theme-action-text, #fff);
  background: linear-gradient(135deg, var(--theme-action, #e64691), var(--theme-action-2, #8851b4));
  border: 1px solid var(--theme-action, #e64691);
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.cast-directory-admin-head button svg,
.admin-cast-add-actions button svg {
  width: 15px;
  height: 15px;
}

.admin-cast-add-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
  padding: 12px;
  color: var(--theme-text, var(--ink));
  background: var(--theme-surface-2, #fff8fc);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 10px;
}

.admin-cast-add-form[hidden],
.admin-cast-add-form label[hidden] {
  display: none !important;
}

.admin-cast-add-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-cast-add-form label span {
  color: var(--theme-muted, var(--muted));
  font-size: 10px;
  font-weight: 900;
}

.admin-cast-add-form input,
.admin-cast-add-form select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 8px;
  color: var(--theme-text, var(--ink));
  -webkit-text-fill-color: var(--theme-text, var(--ink));
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #d8cfdd);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.admin-cast-add-name,
.admin-cast-add-manual,
.admin-cast-add-actions {
  grid-column: 1 / -1;
}

.admin-cast-add-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.admin-cast-add-actions button:first-child {
  color: var(--theme-button-text, var(--theme-text, var(--ink)));
  background: var(--theme-button-bg, var(--theme-surface, #fff));
  border-color: var(--theme-line, #d8cfdd);
}

.admin-cast-directory-list {
  display: grid;
  gap: 8px;
  max-height: 440px;
  overflow: auto;
}

.admin-cast-directory-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 10px;
  color: var(--theme-text, var(--ink));
  background: var(--theme-surface-2, #fff8fc);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 9px;
}

.admin-cast-directory-item .avatar-chip {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.admin-cast-directory-item .cast-profile-trigger {
  padding: 0;
  border: 0;
  box-shadow: 0 0 0 2px var(--theme-surface, #fff), 0 0 0 3px var(--theme-line, #d8cfdd);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.admin-cast-directory-item .cast-profile-trigger:hover,
.admin-cast-directory-item .cast-profile-trigger:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--theme-surface, #fff), 0 0 0 5px var(--theme-action, #e64691);
  outline: none;
}

.admin-cast-directory-item > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.admin-cast-directory-item strong {
  overflow: hidden;
  color: var(--theme-text, var(--ink));
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cast-directory-item .staff-type-badge {
  flex: 0 0 auto;
}

.admin-cast-directory-list .empty-side {
  width: auto;
  margin: 0;
}

.cast-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  width: calc(100% - 40px);
  min-height: 66px;
  margin: 0 20px 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fff, #fff8fc);
  border: 1px solid #e2dbe6;
  border-radius: 7px;
}

.cast-ranking-admin .cast-row {
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  margin: 0 0 8px;
}

.cast-profile-dialog {
  box-sizing: border-box;
  width: min(1000px, calc(100vw - 30px));
  max-height: min(900px, calc(100vh - 30px));
  padding: 0;
  overflow: auto;
  color: var(--theme-text, #20172b);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(20, 10, 28, .42);
}

.cast-profile-dialog::backdrop {
  background: rgba(16, 8, 22, .68);
  backdrop-filter: blur(4px);
}

.cast-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  color: var(--theme-action-text, #fff);
  background: linear-gradient(135deg, var(--theme-action, #e64691), var(--theme-action-2, #8851b4));
}

.cast-profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cast-profile-identity .avatar-chip {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  font-size: 22px;
  border: 2px solid rgba(255,255,255,.72);
}

.cast-profile-identity small,
.cast-profile-identity h2,
.cast-profile-identity > div > span {
  display: block;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.cast-profile-identity small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  opacity: .78;
}

.cast-profile-identity h2 {
  margin: 3px 0;
  font-size: 24px;
}

.cast-profile-identity > div > span {
  font-size: 11px;
  font-weight: 900;
  opacity: .84;
}

.cast-profile-head > button {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  color: inherit;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  cursor: pointer;
}

.cast-profile-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 220px)) minmax(120px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 16px 20px;
  background: var(--theme-surface-2, #fff8fc);
  border-bottom: 1px solid var(--theme-line, #e2dbe6);
}

.cast-profile-filters label {
  display: grid;
  gap: 5px;
}

.cast-profile-filters label[hidden] {
  display: none !important;
}

.cast-profile-filters label span {
  color: var(--theme-muted, #76677c);
  font-size: 10px;
  font-weight: 900;
}

.cast-profile-filters select,
.cast-profile-filters input {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  color: var(--theme-text, #20172b);
  -webkit-text-fill-color: var(--theme-text, #20172b);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #d8cfdd);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.cast-profile-filters > strong {
  justify-self: end;
  align-self: center;
  color: var(--theme-muted, #76677c);
  font-size: 12px;
}

.cast-profile-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  padding: 18px 20px 10px;
}

.cast-profile-summary > div {
  min-width: 0;
  padding: 12px;
  background: var(--theme-surface-2, #fff8fc);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 10px;
}

.cast-profile-summary span,
.cast-profile-summary strong {
  display: block;
}

.cast-profile-summary span {
  color: var(--theme-muted, #76677c);
  font-size: 10px;
  font-weight: 900;
}

.cast-profile-summary strong {
  margin-top: 5px;
  overflow: hidden;
  color: var(--theme-text, #20172b);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-profile-access {
  display: grid;
  gap: 13px;
  margin: 8px 20px 10px;
  padding: 16px;
  color: var(--theme-text, #20172b);
  background: var(--theme-surface-2, #fff8fc);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 14px;
}

.cast-profile-access-head,
.cast-profile-access-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cast-profile-access-head {
  justify-content: space-between;
}

.cast-profile-access-head span,
.cast-profile-access-head h3,
.cast-profile-access-head strong {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.cast-profile-access-head span {
  display: block;
  color: var(--theme-muted, #76677c);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.cast-profile-access-head h3 {
  margin: 3px 0 0;
  font-size: 15px;
}

.cast-profile-access-head > strong {
  padding: 5px 9px;
  color: var(--theme-action-text, #fff);
  background: var(--theme-action, #e64691);
  border-radius: 999px;
  font-size: 10px;
}

.cast-profile-access-head > strong[data-state="empty"] {
  color: var(--theme-button-text, #593463);
  background: var(--theme-button-bg, #fff);
  border: 1px solid var(--theme-line, #d8cfdd);
}

.cast-profile-access-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 10px;
}

.cast-profile-access-grid > label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cast-profile-access-grid > label > span {
  color: var(--theme-muted, #76677c);
  font-size: 10px;
  font-weight: 900;
}

.cast-profile-password-field {
  grid-column: 1 / -1;
}

.cast-profile-copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.cast-profile-copy-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  color: var(--theme-text, #20172b);
  -webkit-text-fill-color: var(--theme-text, #20172b);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #d8cfdd);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.cast-profile-copy-field button,
.cast-profile-access-actions button,
.cast-profile-open-portal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--theme-button-text, #593463);
  -webkit-text-fill-color: currentColor;
  background: var(--theme-button-bg, #fff);
  border: 1px solid var(--theme-line, #d8cfdd);
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.cast-profile-access-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cast-profile-access-actions p {
  flex: 1 1 280px;
  margin: 0;
  color: var(--theme-muted, #76677c);
  font-size: 10px;
  font-weight: 800;
}

#cast-profile-issue-access {
  color: var(--theme-action-text, #fff);
  background: linear-gradient(135deg, var(--theme-action, #e64691), var(--theme-action-2, #8851b4));
  border-color: transparent;
}

.cast-profile-copy-field button:disabled,
.cast-profile-access-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.cast-profile-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 10px 20px 22px;
}

.cast-profile-content > section {
  min-width: 0;
  padding: 14px;
  background: var(--theme-surface-2, #fff8fc);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 12px;
}

.cast-profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cast-profile-section-head > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cast-profile-section-head span,
.cast-profile-section-head strong,
.cast-profile-section-head small {
  color: var(--theme-text, #20172b);
  font-size: 12px;
  font-weight: 900;
}

.cast-profile-section-head strong {
  padding: 2px 7px;
  color: var(--theme-action-text, #fff);
  background: var(--theme-action, #e64691);
  border-radius: 999px;
  font-size: 10px;
}

.cast-profile-section-head small {
  color: var(--theme-muted, #76677c);
  font-size: 10px;
}

.cast-profile-customer-list,
.cast-profile-ticket-list {
  display: grid;
  gap: 7px;
  max-height: 310px;
  overflow: auto;
}

.cast-profile-customer-list article,
.cast-profile-ticket-list article {
  display: grid;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 10px;
  color: var(--theme-text, #20172b);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #e2dbe6);
  border-radius: 9px;
}

.cast-profile-customer-list article {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.cast-profile-ticket-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cast-profile-customer-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--theme-action-text, #fff);
  background: var(--theme-action, #e64691);
  border-radius: 50%;
  font-weight: 900;
}

.cast-profile-customer-list article > div,
.cast-profile-ticket-list article > div,
.cast-profile-customer-list article > p,
.cast-profile-ticket-list article > p {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

.cast-profile-customer-list article > p,
.cast-profile-ticket-list article > p {
  justify-items: end;
}

.cast-profile-customer-list article strong,
.cast-profile-ticket-list article strong {
  overflow: hidden;
  color: var(--theme-text, #20172b);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-profile-customer-list article small,
.cast-profile-ticket-list article small {
  color: var(--theme-muted, #76677c);
  font-size: 10px;
  font-weight: 800;
}

.cast-profile-ticket-list article p span {
  padding: 2px 6px;
  color: var(--theme-action-text, #fff);
  background: var(--theme-action, #e64691);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}

.cast-profile-empty {
  padding: 26px 12px;
  color: var(--theme-muted, #76677c);
  background: var(--theme-surface, #fff);
  border: 1px dashed var(--theme-line, #d8cfdd);
  border-radius: 9px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 800px) {
  .cast-profile-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cast-profile-content {
    grid-template-columns: 1fr;
  }
  .cast-profile-access-grid {
    grid-template-columns: 1fr;
  }
  .cast-profile-password-field {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .cast-profile-filters {
    grid-template-columns: 1fr;
  }
  .cast-profile-filters > strong {
    justify-self: start;
  }
  .cast-profile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cast-profile-access {
    margin-inline: 12px;
    padding: 12px;
  }
  .cast-profile-access-actions > :not(p) {
    flex: 1 1 100%;
  }
}

.cast-row.rank-1 .rank {
  color: #211607;
  background: linear-gradient(135deg, #f5dc8b, #bd8d33);
}

.cast-row.rank-2 .rank {
  color: #20242a;
  background: linear-gradient(135deg, #eef1f5, #9ba4af);
}

.cast-row.rank-3 .rank {
  color: #26160e;
  background: linear-gradient(135deg, #e0a873, #9c6238);
}

.rank {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  background: linear-gradient(135deg, #ed66a8, #8c56b8);
  border-radius: 50%;
  font-size: 16px;
}

.cast-row strong,
.cast-row small {
  display: block;
}

.cast-row strong {
  margin-bottom: 5px;
  font-size: 15px;
}

.cast-row small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 520px) {
  .cast-ranking-controls {
    grid-template-columns: 1fr;
  }
}

.news {
  min-height: 230px;
}

.news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ede7ef;
}

.news-head .panel-title {
  height: 48px;
  padding-right: 8px;
}

.news-head h2 {
  font-size: 18px;
}

.news-head a {
  margin-right: 18px;
  color: var(--pink);
  font-size: 12px;
  text-decoration: none;
}

.news ul {
  list-style: none;
  margin: 0;
  padding: 6px 22px 12px;
}

.news li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.55;
}

.news li span {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #ee9ac8;
}

.news p {
  margin: 0;
  font-weight: 600;
}

@media (max-width: 1500px) {
  .salary-builder-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .salary-builder-period {
    grid-column: auto;
  }

  .salary-export-button {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: end;
    width: min(100%, 320px);
    align-self: stretch;
  }

  .salary-staff-card {
    grid-template-columns: 1fr;
  }

  .ticket-entry-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ticket-entry-form button {
    grid-column: 4;
  }

  .ticket-edit-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ticket-edit-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 1300px) {
  body {
    min-width: 980px;
  }

  .sidebar {
    width: 232px;
    padding-inline: 14px;
  }

  .app {
    margin-left: 232px;
  }

  .brand {
    height: 116px;
  }

  .word {
    font-size: 46px;
    letter-spacing: 8px;
  }

  .cross {
    left: 100px;
  }

  .brand-sub {
    font-size: 15px;
  }

  .nav {
    max-height: calc(100vh - 330px);
  }

  .nav-item {
    height: 46px;
    font-size: 14px;
  }

  .characters {
    width: 220px;
  }

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

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

  .ticket-entry-form,
  .attendance-entry-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ticket-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attendance-entry-form button {
    grid-column: 3;
  }

  .ticket-edit-card .wide {
    grid-column: span 1;
  }

  .filter-actions {
    grid-column: auto;
    justify-content: flex-end;
  }

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

  .content-grid {
    grid-template-columns: 1fr;
  }

  .management-grid,
  .admin-settings-grid {
    grid-template-columns: 1fr;
  }

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

  .shift-toolbar,
  .shift-entry-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shift-focus-row {
    grid-template-columns: 1fr 1fr;
  }

  .shift-event-form {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .shift-event-form button {
    grid-column: 1 / -1;
  }

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

@media (min-width: 901px) and (max-width: 1300px) {
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .sidebar {
    width: 224px;
  }

  .app {
    margin-left: 224px;
  }

  .topbar {
    gap: 12px;
    padding-left: 34px;
  }

  .page-title {
    flex-shrink: 0;
    gap: 10px;
  }

  .page-title h1 {
    max-width: 8em;
    font-size: 21px;
    line-height: 1.25;
  }

  .brand-sub {
    display: none;
  }

  .brand {
    height: 128px;
  }

  .brand-mark {
    height: 118px;
  }

  .nav {
    max-height: calc(100vh - 360px);
  }

  .ornament {
    display: none;
  }

  .characters {
    left: 50%;
    bottom: -108px;
    width: 220px;
    transform: translateX(-50%);
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .shift-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shift-toolbar label {
    grid-column: auto;
  }

  .shift-entry-form,
  .shift-event-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shift-entry-form button,
  .shift-event-form button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .salary-builder {
    margin: 12px;
    padding: 12px;
  }

  .salary-builder-bar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .salary-builder-control,
  .salary-builder-control.small {
    grid-template-columns: 76px 1fr;
  }

  .salary-builder-control strong {
    grid-column: 2;
    font-size: 18px;
  }

  .salary-builder-period {
    grid-column: auto;
  }

  .salary-builder-period strong {
    font-size: 18px;
  }

  .salary-export-button {
    grid-column: auto;
    grid-row: auto;
    min-height: 52px;
    font-size: 18px;
  }

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

  .salary-staff-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 44px;
    align-items: center;
    width: 100%;
    min-height: 0;
    padding: 8px 10px;
    overflow: visible;
    box-shadow: 0 10px 28px rgba(20, 15, 32, 0.18);
  }

  .brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 58px;
  }

  .brand-mark {
    height: 52px;
  }

  .brand-logo {
    width: 94px;
    height: 52px;
  }

  .brand-sub,
  .characters {
    display: none;
  }

  .mobile-menu-toggle {
    position: relative;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
  }

  .mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
  }

  .nav {
    grid-column: 1 / -1;
    display: none;
    grid-template-columns: 1fr;
    gap: 7px;
    max-height: none;
    overflow: visible;
    padding: 8px 0 2px;
  }

  .nav-line {
    display: none;
  }

  body.mobile-nav-open .nav {
    display: grid;
  }

  .nav-item {
    width: 100%;
    height: 44px;
    gap: 8px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
  }

  .nav-item svg {
    width: 18px;
    height: 18px;
  }

  .app {
    margin-left: 0;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    height: auto;
    gap: 10px;
    padding: 14px 14px 12px;
  }

  .page-title {
    gap: 9px;
  }

  .page-title h1 {
    font-size: 21px;
  }

  .userbar {
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
    font-size: 13px;
    white-space: normal;
  }

  .userbar .app-link,
  .userbar .ark-auth-bar.in-header,
  .userbar .ark-auth-bar.in-header button {
    flex: 1 1 auto;
    min-width: 0;
  }

  .userbar .ark-auth-bar.in-header {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  .userbar .ark-auth-bar.in-header button {
    min-height: 34px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .userbar .ark-auth-user {
    flex-basis: 100%;
  }

  .ornament {
    display: none;
  }

  .app-link {
    height: 34px;
    padding: 0 11px;
  }

  .role {
    padding: 7px 11px;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 10px 10px;
  }

  .stat-card {
    min-height: 112px;
    padding: 18px 14px;
  }

  .stat-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }

  .stat-icon svg {
    width: 28px;
    height: 28px;
  }

  .amount {
    font-size: 24px;
  }

  .filters {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 0;
    margin: 0 10px 12px;
    padding: 16px 14px;
  }

  .filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .filter-actions button,
  .clear,
  .search-btn {
    width: 100%;
  }

  .content-grid,
  .management-grid,
  .admin-settings-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 0 10px 14px;
  }

  .shift-panel {
    margin: 0 10px 14px;
  }

  .side-panels {
    display: grid;
    gap: 12px;
  }

  .sales-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 0 14px 12px;
  }

  .sales-chart-panel {
    margin-inline: 14px;
    padding: 12px;
  }

  .sales-chart-head {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-chart-scroll {
    overflow: visible;
    padding-bottom: 0;
  }

  .sales-chart {
    min-height: 0;
  }

  .sales-chart-mobile-list {
    display: grid;
    gap: 10px;
  }

  .sales-chart-mobile-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: #fff7fc;
    border: 1px solid #eaddeb;
    border-radius: 8px;
  }

  .sales-chart-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .sales-chart-mobile-head strong {
    color: #20172b;
    font-size: 16px;
  }

  .sales-chart-mobile-head span {
    padding: 3px 8px;
    color: #8c56b8;
    background: #fff;
    border: 1px solid #eaddeb;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
  }

  .sales-chart-mobile-card p {
    margin: 0;
    color: #df3f8c;
    font-size: 26px;
    font-weight: 900;
  }

  .sales-chart-mobile-breakdown {
    display: grid;
    gap: 6px;
  }

  .sales-chart-mobile-breakdown span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4b365b;
    font-size: 13px;
    font-weight: 800;
  }

  .segmented-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .segmented-control:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segmented-control button {
    min-width: 0;
    padding: 0 6px;
    font-size: 12px;
  }

  .sales-summary,
  .ticket-history-summary,
  .ticket-order-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-inline: 14px;
  }

  .panel-title {
    min-height: 56px;
    height: auto;
    padding: 14px;
  }

  .panel-title h2 {
    font-size: 20px;
  }

  .table-panel {
    min-height: 0;
    overflow-x: auto;
  }

  body.page-dashboard #sales {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.page-dashboard #sales table,
  body.page-dashboard #sales .table-footer {
    display: none;
  }

  table {
    min-width: 760px;
  }

  body.page-dashboard #sales table {
    min-width: 1120px;
    table-layout: auto;
  }

  body.page-dashboard #sales th,
  body.page-dashboard #sales td {
    min-width: 78px;
    padding: 0 10px;
    white-space: nowrap;
    word-break: normal;
  }

  body.page-dashboard #sales th:first-child,
  body.page-dashboard #sales td:first-child {
    min-width: 104px;
  }

  body.page-dashboard #sales .table-footer {
    position: sticky;
    left: 0;
    width: min(100vw - 20px, 100%);
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    padding: 12px 10px;
    background: #fff;
  }

  body.page-dashboard #sales .table-footer .detail {
    width: 100%;
  }

  .ticket-entry-form,
  .attendance-entry-form,
  .ticket-edit-card,
  .payroll-controls,
  .shift-toolbar,
  .shift-entry-form,
  .shift-event-form,
  .menu-settings-form,
  .payroll-category-form,
  .staff-settings-form,
  .tax-settings-form,
  .adjustment-settings-form,
  .sync-settings-form {
    grid-template-columns: 1fr;
    padding-inline: 14px;
  }

  .rounding-mode-field,
  .tax-rounding-fields {
    grid-column: auto;
  }

  .tax-rounding-fields {
    grid-template-columns: 1fr 1fr;
  }

  .receipt-settings-layout {
    grid-template-columns: 1fr;
    padding-inline: 14px;
  }

  .receipt-preview-shell {
    position: static;
  }

  #receipt-settings-preview {
    height: 560px;
  }

  .ticket-entry-form button,
  .attendance-entry-form button,
  #menu-nomination,
  #menu-payroll-category,
  #add-menu-item {
    grid-column: 1 / -1;
  }

  .menu-settings-form.points-enabled {
    grid-template-columns: 1fr;
  }

  .menu-settings-form.points-enabled #add-menu-item {
    grid-column: 1 / -1;
  }

  .ticket-edit-list,
  .settings-list {
    padding-inline: 14px;
  }

  .ticket-edit-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .ticket-edit-card .wide,
  .ticket-order-detail,
  .ticket-edit-actions {
    grid-column: 1 / -1;
  }

  .ticket-edit-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ticket-order-meta,
  .complete-receipt div {
    grid-template-columns: 1fr;
  }

  .settings-row,
  .menu-settings-row,
  .payroll-rate-row,
  .portal-settings-row,
  .staff-master-list .settings-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .settings-row button {
    width: 100%;
  }

  .menu-row-actions {
    grid-template-columns: repeat(3, 1fr);
  }

  .payroll-scroll {
    margin-inline: 10px;
    overflow-x: auto;
  }

  .payroll-table {
    min-width: 1180px;
  }

  .shift-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 14px;
  }

  .shift-focus-row {
    padding-inline: 14px;
  }

  .shift-next-event {
    padding-inline: 14px;
  }

  .shift-next-event-card {
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
  }

  .shift-next-event-card span {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .shift-next-event-card strong {
    font-size: 17px;
  }

  .shift-calendar {
    margin-inline: 14px;
  }

  .shift-day {
    min-height: 104px;
    padding: 6px;
  }

  .shift-weekday {
    min-height: 36px;
    font-size: 12px;
  }

  .shift-day-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .shift-day-list,
  .shift-event-list {
    gap: 4px;
    margin-top: 5px;
  }

  .shift-chip {
    grid-template-columns: minmax(0, 1fr) 18px;
    padding: 5px 5px;
    border-radius: 5px;
  }

  .shift-chip strong {
    font-size: 11px;
  }

  .shift-chip span {
    font-size: 10px;
  }

  .shift-chip em {
    min-height: 16px;
    padding: 0 4px;
    font-size: 9px;
  }

  .shift-event-chip {
    grid-template-columns: minmax(0, 1fr) 18px;
    min-height: 22px;
    padding: 3px 3px 3px 6px;
    font-size: 10px;
  }

  .shift-event-chip button,
  .shift-delete {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .shift-toolbar,
  .shift-entry-form,
  .shift-event-form {
    gap: 10px;
    padding-inline: 14px;
  }

  .shift-toolbar {
    grid-template-columns: 90px minmax(170px, 1fr) 78px 84px;
  }

  .shift-entry-form {
    grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.2fr) minmax(96px, 0.7fr) minmax(96px, 0.7fr);
  }

  .shift-entry-form button {
    grid-column: 1 / -1;
  }

  .shift-event-form {
    grid-template-columns: minmax(210px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(112px, 0.7fr);
  }

  .shift-event-form button {
    grid-column: 1 / -1;
  }

  .shift-toolbar input,
  .shift-entry-form input,
  .shift-entry-form select,
  .shift-event-form input,
  .shift-event-form select {
    font-size: 16px;
  }

  .shift-calendar {
    gap: 2px;
    overflow: visible;
    background: transparent;
    border: 0;
  }

  .shift-weekday,
  .shift-day {
    border: 1px solid #eaddeb;
    border-radius: 6px;
  }

  .shift-day {
    min-height: 118px;
  }
}

@media (max-width: 520px) {
  .receipt-settings-form fieldset {
    grid-template-columns: 1fr;
  }

  .receipt-field-wide {
    grid-column: auto;
  }

  .receipt-kind-switch {
    grid-template-columns: 1fr;
  }

  .receipt-settings-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .receipt-settings-actions button {
    width: 100%;
  }

  .salary-summary-grid {
    grid-template-columns: 1fr;
  }

  .welcome {
    display: none;
  }

  .stats .stat-card:nth-child(4) {
    align-items: flex-start;
    flex-direction: column;
  }

  .unpaid .outline {
    max-width: none;
  }

  .sales-summary,
  .ticket-history-summary,
  .ticket-order-totals,
  .shift-summary {
    grid-template-columns: 1fr;
  }

  .shift-focus-row {
    grid-template-columns: 1fr;
  }

  .shift-next-event-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .shift-next-event-card small {
    width: fit-content;
  }

  .shift-calendar {
    margin-inline: 8px;
    border-radius: 7px;
  }

  .shift-weekday {
    min-height: 30px;
    font-size: 11px;
  }

  .shift-day {
    min-height: 78px;
    padding: 3px;
  }

  .shift-day-number {
    width: 23px;
    height: 23px;
    border-radius: 6px;
    font-size: 11px;
  }

  .shift-day-list,
  .shift-event-list {
    gap: 2px;
    margin-top: 3px;
  }

  .shift-chip {
    grid-template-columns: minmax(0, 1fr);
    min-height: 18px;
    padding: 3px 4px;
    border-radius: 4px;
  }

  .shift-chip strong {
    display: block;
    font-size: 9px;
    line-height: 1.15;
  }

  .shift-chip span,
  .shift-chip em,
  .shift-delete {
    display: none;
  }

  .shift-event-chip {
    grid-template-columns: minmax(0, 1fr);
    min-height: 18px;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 9px;
    line-height: 1.1;
  }

  .shift-event-chip button {
    display: none;
  }
}

.field-app {
  min-width: 1180px;
}

.field-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  padding: 0 28px;
  background:
    linear-gradient(90deg, rgba(24, 15, 36, 0.98), rgba(42, 24, 56, 0.96)),
    var(--deep);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.field-brand,
.field-actions,
.field-section-title,
.cast-select,
.clock-buttons,
.ticket-total {
  display: flex;
  align-items: center;
}

.field-brand {
  gap: 18px;
}

.mini-logo {
  display: grid;
  place-items: center;
  width: 76px;
  height: 52px;
  color: #ffd5f2;
  border: 1px solid rgba(255, 147, 206, 0.35);
  border-radius: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  letter-spacing: 4px;
}

.field-brand h1,
.field-brand p {
  margin: 0;
}

.field-brand h1 {
  font-size: 23px;
}

.field-brand p {
  margin-top: 5px;
  color: #d9c9e4;
  font-size: 13px;
}

.field-actions {
  gap: 12px;
}

.field-actions a,
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  text-decoration: none;
  font-size: 14px;
}

.field-actions svg {
  width: 18px;
}

.sync-pill {
  color: #ffc9e7;
}

.field-shell {
  padding: 20px;
}

.timecard-board {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.field-panel {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(67, 44, 77, 0.04);
}

.field-section-title {
  gap: 10px;
  height: 58px;
  padding: 0 20px;
  border-bottom: 1px solid #eee7f0;
}

.field-section-title svg {
  width: 23px;
  color: var(--purple);
}

.field-section-title h2 {
  margin: 0;
  font-size: 20px;
}

.cast-status {
  padding-bottom: 18px;
}

.cast-select {
  gap: 14px;
  margin: 18px 20px 16px;
  padding: 14px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 8px;
}

.cast-select img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #f1c2df;
}

.cast-select span,
.time-status span,
.live-grid span,
.link-card span,
.ticket-total span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.cast-select strong {
  display: block;
  margin-top: 5px;
  font-size: 21px;
}

.time-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 20px 16px;
}

.time-status div,
.live-grid div {
  padding: 14px;
  background: #fff;
  border: 1px solid #e8e0eb;
  border-radius: 8px;
}

.time-status strong,
.live-grid strong {
  display: block;
  margin-top: 7px;
  font-size: 22px;
}

.clock-buttons {
  gap: 10px;
  margin: 0 20px;
}

.clock-buttons button,
.ticket-total button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid #d9cfe0;
  border-radius: 7px;
  font: inherit;
}

.clock-buttons button {
  flex: 1;
}

.clock-buttons button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}

.primary-action {
  color: #fff;
  background: linear-gradient(135deg, #ed5aa0, #df3b88) !important;
  border: 0 !important;
  box-shadow: 0 10px 18px rgba(225, 59, 136, 0.18);
}

.live-summary {
  min-height: 220px;
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 20px;
}

.ticket-workspace {
  display: grid;
  grid-template-columns: minmax(740px, 1fr) 340px;
  gap: 16px;
  margin-bottom: 16px;
}

.ticket-form {
  padding-bottom: 20px;
}

.ticket-fields {
  display: grid;
  grid-template-columns: 160px minmax(220px, 1fr) 220px 180px;
  gap: 14px;
  padding: 18px 20px;
}

.order-list {
  margin: 0 20px 18px;
  border: 1px solid #ece4ef;
  border-radius: 8px;
  overflow: hidden;
}

.order-head,
.order-row {
  display: grid;
  grid-template-columns: 1fr 100px 140px;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #ece4ef;
}

.order-head {
  color: #6c5f75;
  background: #fff4fa;
  font-size: 13px;
}

.order-row:last-child {
  border-bottom: 0;
}

.order-row b {
  text-align: right;
}

.ticket-total {
  justify-content: space-between;
  gap: 16px;
  margin: 0 20px;
  padding: 16px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 8px;
}

.ticket-total div {
  margin-left: auto;
  text-align: right;
}

.ticket-total strong {
  display: block;
  margin-top: 4px;
  font-size: 30px;
}

.linked-preview {
  padding-bottom: 12px;
}

.link-card {
  margin: 12px 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e5ddea;
  border-radius: 8px;
}

.link-card strong {
  display: block;
  margin-top: 6px;
  color: #342742;
  font-size: 14px;
}

.pink-link {
  background: linear-gradient(135deg, #fff4fa, #f4e9fb);
}

.recent-tickets {
  overflow: hidden;
}

.ipad-app {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 9% 10%, rgba(230, 70, 145, 0.22), transparent 22%),
    radial-gradient(circle at 88% 84%, rgba(140, 86, 184, 0.18), transparent 30%),
    linear-gradient(180deg, #171020 0%, #21172b 100%);
  color: #1c1630;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  font-weight: 700;
}

.ipad-shell {
  width: min(100%, 1024px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 14px 24px;
}

.ipad-brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  margin-bottom: 12px;
  padding: 0 18px;
  color: #fff;
  background:
    radial-gradient(circle at 5% 50%, rgba(237, 90, 160, 0.18), transparent 35%),
    linear-gradient(135deg, rgba(20, 15, 32, 0.96), rgba(34, 22, 45, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  box-shadow: 0 18px 34px rgba(20, 15, 32, 0.24);
}

.ipad-brandmark {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ipad-brandmark img {
  display: block;
  width: 106px;
  max-width: 22vw;
  height: 82px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 15px rgba(255, 213, 242, 0.18));
}

.ipad-clock {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 190px;
  padding: 8px 16px;
  color: #ffd5f2;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
}

.ipad-clock span {
  color: #d9c9e4;
  font-size: 12px;
}

.ipad-clock strong {
  color: #fff;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

.ipad-syncbar {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 154px;
}

.ipad-syncbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  box-shadow: 0 12px 24px rgba(224, 65, 142, 0.22);
}

.ipad-syncbar svg {
  width: 16px;
}

.ipad-syncbar small {
  color: #d9c9e4;
  font-size: 11px;
}

.ipad-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  min-height: 72px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(67, 44, 77, 0.08);
  backdrop-filter: blur(14px);
}

.ipad-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  color: #4b365b;
  border-radius: 6px;
  text-decoration: none;
  font-size: clamp(17px, 2.2vw, 22px);
  white-space: nowrap;
}

.ipad-tab svg {
  width: 22px;
  height: 22px;
}

.ipad-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  box-shadow: 0 12px 24px rgba(224, 65, 142, 0.26);
}

.ipad-view {
  display: none;
}

.ipad-view.active {
  display: block;
  position: relative;
  z-index: 1;
}

.ipad-card {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(67, 44, 77, 0.05);
}

.tax-rounding-note {
  margin: 12px 0 0;
  color: #7d6e81;
  font-size: 12px;
  line-height: 1.6;
}

.dashboard-active-tickets {
  margin-bottom: 22px;
  padding: 22px;
}

.dashboard-active-tickets-title small {
  margin-left: auto;
  color: #806f84;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-active-ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.dashboard-active-ticket-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 155px;
  border: 1px solid rgba(126, 50, 127, 0.18);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #fbf5fb);
  box-shadow: 0 7px 18px rgba(58, 31, 62, 0.07);
  padding: 14px;
  min-width: 0;
  overflow: hidden;
  color: #35263a;
  text-align: left;
  transition: 0.18s ease;
}

.dashboard-active-ticket-card:hover {
  border-color: var(--accent, #e53e94);
  box-shadow: 0 10px 24px rgba(229, 62, 148, 0.14);
  transform: translateY(-2px);
}

.dashboard-active-ticket-table {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.dashboard-active-ticket-table strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 25px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-active-ticket-table em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(39, 164, 122, 0.11);
  padding: 4px 8px;
  color: #177a5b;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.dashboard-active-ticket-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: #756779;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-active-ticket-meta svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.dashboard-active-ticket-card > b {
  margin-top: auto;
  color: #302234;
  font-size: 21px;
}

.dashboard-active-ticket-empty {
  grid-column: 1 / -1;
  padding: 25px;
  border: 1px dashed rgba(126, 50, 127, 0.2);
  border-radius: 14px;
  color: #887b8c;
  text-align: center;
  font-weight: 700;
}

.crm-integration-apps {
  margin-top: 18px;
}

.crm-integration-apps[hidden],
.crm-integration-card[hidden] {
  display: none !important;
}

.crm-integration-apps-title {
  align-items: center;
}

.crm-integration-apps-title > div {
  display: grid;
  gap: 2px;
}

.crm-integration-apps-title small {
  color: var(--muted, #796c82);
  font-size: 11px;
  font-weight: 750;
}

.crm-managed-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 10px;
  color: var(--purple);
  background: var(--theme-surface-2, var(--soft));
  border: 1px solid var(--theme-line, #eaddea);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.crm-managed-badge svg {
  width: 14px;
  height: 14px;
}

.crm-integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.crm-integration-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 14px;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(135deg, var(--theme-surface, #fff), var(--theme-surface-2, #fff7fc));
  border: 1px solid var(--theme-line, #eaddea);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(20, 15, 32, 0.08);
  cursor: pointer;
}

.crm-integration-card:hover:not(:disabled) {
  border-color: var(--purple);
  transform: translateY(-1px);
}

.crm-integration-card:disabled {
  opacity: .62;
  cursor: not-allowed;
}

.crm-integration-card > span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.crm-integration-card strong,
.crm-integration-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-integration-card strong {
  font-size: 14px;
}

.crm-integration-card small {
  color: var(--theme-muted, #786b82);
  font-size: 11px;
  font-weight: 700;
}

.crm-integration-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  border-radius: 11px;
}

.crm-integration-icon svg {
  width: 22px;
  height: 22px;
}

.crm-integration-card > svg {
  width: 17px;
  height: 17px;
  color: var(--purple);
}

.crm-integration-note {
  margin: 10px 2px 0;
  color: var(--theme-muted, #786b82);
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 900px) {
  .crm-integration-grid {
    grid-template-columns: 1fr;
  }
}

.active-ticket-detail-dialog {
  box-sizing: border-box;
  width: min(620px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(28, 13, 34, 0.38);
  padding: 0;
  color: #35263a;
}

.active-ticket-detail-dialog::backdrop {
  background: rgba(22, 10, 27, 0.62);
  backdrop-filter: blur(3px);
}

.active-ticket-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #321536, #7e327f);
  color: #fff;
}

.active-ticket-detail-head span {
  color: #f2b9dc;
  font-size: 11px;
  font-weight: 800;
}

.active-ticket-detail-head h2 {
  margin: 4px 0 0;
  font-size: 24px;
}

.active-ticket-detail-head button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.active-ticket-detail-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px 22px 12px;
}

.active-ticket-detail-summary > div {
  padding: 13px;
  border-radius: 12px;
  background: #f8f3f8;
}

.active-ticket-detail-summary span,
.active-ticket-detail-summary strong {
  display: block;
}

.active-ticket-detail-summary span {
  color: #827486;
  font-size: 11px;
  font-weight: 800;
}

.active-ticket-detail-summary strong {
  margin-top: 5px;
  font-size: 15px;
}

.active-ticket-detail-items {
  display: grid;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
  padding: 8px 22px 16px;
}

.active-ticket-detail-items > div:not(.active-ticket-detail-empty) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(126, 50, 127, 0.12);
  border-radius: 11px;
}

.active-ticket-detail-items span,
.active-ticket-detail-items small {
  display: block;
}

.active-ticket-detail-items small {
  margin-top: 3px;
  color: #817485;
}

.active-ticket-detail-empty {
  padding: 28px;
  color: #887b8c;
  text-align: center;
}

.active-ticket-detail-total {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(126, 50, 127, 0.12);
  padding: 18px 22px 22px;
}

.active-ticket-detail-total span {
  color: #77687b;
  font-size: 12px;
  font-weight: 800;
}

.active-ticket-detail-total strong {
  font-size: 28px;
}

@media (max-width: 760px) {
  .dashboard-active-ticket-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .active-ticket-detail-summary {
    grid-template-columns: 1fr;
  }
}

.ticket-head-card {
  padding: 18px;
}

.ticket-subgrid {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
  margin-top: 14px;
}

.ticket-subgrid label span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.ticket-subgrid button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  color: #20172b;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
  font: inherit;
  font-size: 16px;
  text-align: left;
}

.ticket-subgrid button svg {
  width: 17px;
  height: 17px;
  color: var(--purple);
}

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

.table-button-grid button {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-height: 62px;
  color: #4b365b;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
  font: inherit;
  font-size: 17px;
}

.table-button-grid button strong {
  font-size: 18px;
}

.table-button-grid button span {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-button-grid button em,
.table-vip-label {
  position: absolute;
  top: 5px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  color: #6c4d08;
  background: #f5d981;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
}

.table-button-grid button em svg,
.table-vip-label svg {
  width: 10px;
  height: 10px;
  stroke-width: 2.7;
}

.timer-grid button strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.timer-grid button strong svg {
  width: 14px;
  height: 14px;
  color: #d2a72f;
  fill: rgba(245, 217, 129, .28);
  stroke-width: 2.5;
}

.table-control-empty {
  grid-column: 1 / -1;
  padding: 24px 12px;
  color: var(--theme-muted, #806f84);
  border: 1px dashed var(--theme-border, #dfd1e2);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
}

.ticket-floor-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 14px;
  padding: 2px 1px 5px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.ticket-floor-tabs[hidden] {
  display: none;
}

.ticket-floor-tabs button {
  display: grid;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 112px;
  min-height: 48px;
  padding: 7px 13px;
  color: var(--theme-muted, #6b5a70);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-border, #e3dbe7);
  border-radius: 8px;
  font: inherit;
  text-align: left;
}

.ticket-floor-tabs button span {
  color: var(--theme-text, #302234);
  font-size: 13px;
  font-weight: 900;
}

.ticket-floor-tabs button small {
  font-size: 10px;
  font-weight: 800;
}

.ticket-floor-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #e64691), var(--purple, #7c3aed));
  border-color: transparent;
}

.ticket-floor-tabs button.active span {
  color: #fff;
}

.table-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 10004;
  display: none;
  box-sizing: border-box;
  place-items: center;
  padding: 18px;
  background: rgba(8, 6, 12, .8);
  backdrop-filter: blur(6px);
}

.table-settings-overlay.show {
  display: grid;
}

.table-settings-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  box-sizing: border-box;
  width: min(1040px, 100%);
  height: min(86vh, 760px);
  overflow: hidden;
  color: var(--theme-text, #302234);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
}

.ticket-settings-mode-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  overflow-x: auto;
  background: var(--theme-surface-2, #faf7fb);
  border-bottom: 1px solid var(--theme-line, #dfd1e2);
}

.ticket-settings-mode-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  color: var(--theme-muted, #806f84);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.ticket-settings-mode-tabs button svg {
  width: 16px;
}

.ticket-settings-mode-tabs button.active {
  color: var(--theme-text, #302234);
  background: var(--theme-surface, #fff);
  border-color: var(--theme-line, #dfd1e2);
  box-shadow: 0 4px 12px rgba(34, 20, 39, .08);
}

.ticket-config-panel {
  min-height: 0;
  padding: 18px;
  overflow: auto;
}

.ticket-config-panel[hidden] {
  display: none;
}

.ticket-config-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.ticket-config-panel-head > div {
  display: grid;
  gap: 3px;
}

.ticket-config-panel-head > .back-mode-switch {
  display: inline-flex;
  gap: 4px;
}

.ticket-config-panel-head strong {
  color: var(--theme-text, #302234);
  font-size: 16px;
}

.ticket-config-panel-head span {
  color: var(--theme-muted, #806f84);
  font-size: 11px;
}

.ticket-config-panel-head button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 39px;
  padding: 0 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #e64691), var(--purple, #7c3aed));
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.ticket-config-panel-head button svg {
  width: 15px;
}

.set-plan-settings-head,
.set-plan-setting-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(250px, 1fr) minmax(250px, 1fr) 42px;
  gap: 10px;
  align-items: center;
}

.set-plan-settings-head {
  padding: 4px 12px 7px;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 900;
}

.set-plan-settings-list,
.agency-settings-list {
  display: grid;
  gap: 9px;
}

.set-plan-setting-row,
.agency-setting-row {
  padding: 11px;
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 10px;
}

.set-plan-setting-identity,
.set-plan-setting-prices {
  display: grid;
  gap: 7px;
}

.set-plan-setting-identity {
  grid-template-columns: minmax(100px, 1fr) 88px;
}

.set-plan-setting-prices {
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  position: relative;
  padding-top: 18px;
}

.set-plan-setting-prices > strong {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
}

.set-plan-setting-prices.male > strong {
  color: #3e79b9;
}

.set-plan-setting-prices.female > strong {
  color: #ca4c83;
}

.set-plan-setting-row label,
.agency-setting-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.set-plan-setting-row label span,
.agency-setting-row label span {
  color: var(--theme-muted, #806f84);
  font-size: 9px;
  font-weight: 850;
}

.set-plan-setting-row input,
.agency-setting-row input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 9px;
  color: var(--theme-text, #302234);
  background: var(--theme-input, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
}

.set-plan-setting-row > button,
.agency-setting-row > button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #c52c58;
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 7px;
}

.set-plan-setting-row > button svg,
.agency-setting-row > button svg {
  width: 16px;
}

.agency-setting-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(130px, .48fr) 42px;
  align-items: center;
}

.agency-setting-row > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: var(--theme-muted, #806f84);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
}

.ticket-menu-add-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.35fr) repeat(3, minmax(78px, .55fr));
  gap: 9px;
  margin-bottom: 15px;
  padding: 12px;
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 11px;
}

.ticket-menu-add-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ticket-menu-add-form label[hidden] {
  display: none !important;
}

.ticket-menu-add-form label > span {
  color: var(--theme-muted, #806f84);
  font-size: 9px;
  font-weight: 900;
}

.ticket-menu-add-form input,
.ticket-menu-add-form select,
.ticket-menu-editor-row input,
.ticket-menu-editor-row select,
.ticket-menu-category-group > header select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 39px;
  padding: 0 9px;
  color: var(--theme-text, #302234);
  background: var(--theme-input, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
}

.ticket-menu-add-form label:nth-of-type(6) {
  grid-column: 1 / 3;
}

#ticket-add-menu-item,
#add-menu-item {
  grid-column: 4 / 6;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 39px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #e64691), var(--purple, #7c3aed));
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.ticket-menu-add-form.points-enabled {
  grid-template-columns: minmax(145px, 1fr) minmax(175px, 1.25fr) repeat(4, minmax(72px, .5fr));
}

.ticket-menu-add-form.points-enabled label:nth-of-type(6) {
  grid-column: 1 / 4;
}

.ticket-menu-add-form.points-enabled #ticket-add-menu-item,
.ticket-menu-add-form.points-enabled #add-menu-item {
  grid-column: 5 / 7;
}

#ticket-add-menu-item svg,
#add-menu-item svg {
  width: 15px;
}

.ticket-admin-settings .admin-ticket-settings-tabs {
  margin-bottom: 14px;
}

.ticket-admin-settings .admin-ticket-config-panel {
  min-width: 0;
}

.ticket-admin-settings .admin-table-settings-workspace {
  min-height: 430px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 12px;
}

.ticket-menu-settings-list {
  display: grid;
  gap: 11px;
}

.ticket-menu-category-group {
  overflow: hidden;
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 11px;
}

.ticket-menu-category-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--theme-line, #dfd1e2);
}

.ticket-menu-category-group > header > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ticket-menu-category-group > header > div:first-child {
  min-width: 0;
}

.ticket-menu-category-group > header svg {
  flex: 0 0 auto;
  width: 15px;
  color: var(--theme-action, var(--purple, #7c3aed));
}

.ticket-menu-category-group > header strong {
  overflow: hidden;
  color: var(--theme-text, #302234);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-menu-category-group > header > div:first-child span {
  flex: 0 0 auto;
  color: var(--theme-muted, #806f84);
  font-size: 9px;
  font-weight: 900;
}

.ticket-menu-category-group > header label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--theme-muted, #806f84);
  font-size: 9px;
  font-weight: 900;
}

.ticket-menu-category-group > header select {
  width: 75px;
  min-height: 33px;
}

.ticket-menu-category-group > header button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 33px;
  padding: 0 9px;
  color: #bd2754;
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 7px;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
}

.ticket-menu-editor-head,
.ticket-menu-editor-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(68px, .55fr)) minmax(105px, .8fr) 116px;
  gap: 7px;
  align-items: center;
}

.ticket-menu-editor-head.points-enabled,
.ticket-menu-editor-row.points-enabled {
  grid-template-columns: minmax(145px, 1.25fr) repeat(4, minmax(66px, .5fr)) minmax(100px, .75fr) 116px;
}

.ticket-menu-editor-head.no-nomination,
.ticket-menu-editor-row.no-nomination {
  grid-template-columns: minmax(150px, 1.3fr) repeat(2, minmax(68px, .55fr)) minmax(105px, .8fr) 116px;
}

.ticket-menu-editor-head.no-nomination.points-enabled,
.ticket-menu-editor-row.no-nomination.points-enabled {
  grid-template-columns: minmax(145px, 1.25fr) repeat(3, minmax(66px, .5fr)) minmax(100px, .75fr) 116px;
}

.ticket-menu-editor-head {
  padding: 7px 10px 3px;
  color: var(--theme-muted, #806f84);
  font-size: 9px;
  font-weight: 900;
}

.ticket-menu-editor-items {
  display: grid;
  gap: 7px;
  padding: 7px 10px 10px;
}

.ticket-menu-editor-row {
  padding: 8px;
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 8px;
}

.ticket-menu-editor-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ticket-menu-editor-row label > span {
  display: none;
  color: var(--theme-muted, #806f84);
  font-size: 9px;
  font-weight: 900;
}

.ticket-menu-row-actions {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 5px;
  justify-content: end;
}

.ticket-menu-row-actions button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--theme-text, #302234);
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 7px;
}

.ticket-menu-row-actions button:last-child {
  color: #bd2754;
}

.ticket-menu-row-actions button:disabled {
  opacity: .3;
}

.ticket-menu-row-actions svg {
  width: 14px;
}

.ticket-table-editor-empty.compact {
  min-height: 70px;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .ticket-menu-add-form,
  .ticket-menu-category-group,
  .ticket-menu-editor-row
) {
  color: var(--theme-text);
  background: var(--theme-surface-2);
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .ticket-menu-editor-row {
  background: var(--theme-surface);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .ticket-menu-add-form input,
  .ticket-menu-add-form select,
  .ticket-menu-editor-row input,
  .ticket-menu-editor-row select,
  .ticket-menu-category-group > header select
) {
  color: var(--theme-text);
  background: var(--deep);
  border-color: var(--theme-line);
}

html[data-theme="luxury"] body.ipad-app #ticket-add-menu-item {
  color: #181109;
  background: linear-gradient(135deg, #e1c77f, #a77d35);
  border: 1px solid #d5b96d;
}

html[data-theme="luxury"] body.ipad-app .ticket-menu-category-group > header svg {
  color: #d9bb70;
}

@media (max-width: 900px) {
  .ticket-menu-add-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ticket-menu-add-form label:nth-of-type(6),
  #ticket-add-menu-item,
  #add-menu-item {
    grid-column: auto;
  }

  .ticket-menu-add-form.points-enabled {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ticket-menu-add-form.points-enabled label:nth-of-type(6),
  .ticket-menu-add-form.points-enabled #ticket-add-menu-item,
  .ticket-menu-add-form.points-enabled #add-menu-item {
    grid-column: auto;
  }

  .ticket-menu-editor-head {
    display: none;
  }

  .ticket-menu-editor-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 116px;
  }

  .ticket-menu-editor-row label:first-child {
    grid-column: 1 / 3;
  }

  .ticket-menu-editor-row label > span {
    display: block;
  }

  .ticket-menu-row-actions {
    grid-column: 3;
    grid-row: 1 / 4;
    align-self: center;
  }

  .ticket-menu-editor-row.points-enabled .ticket-menu-row-actions {
    grid-row: 1 / 5;
  }
}

@media (max-width: 620px) {
  .ticket-menu-add-form {
    grid-template-columns: 1fr;
  }

  .ticket-menu-add-form label:nth-of-type(6),
  #ticket-add-menu-item,
  #add-menu-item {
    grid-column: 1;
  }

  .ticket-menu-add-form.points-enabled {
    grid-template-columns: 1fr;
  }

  .ticket-menu-add-form.points-enabled label:nth-of-type(6),
  .ticket-menu-add-form.points-enabled #ticket-add-menu-item,
  .ticket-menu-add-form.points-enabled #add-menu-item {
    grid-column: 1;
  }

  .ticket-menu-category-group > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ticket-menu-category-group > header > div:last-child {
    justify-content: space-between;
    width: 100%;
  }

  .ticket-menu-editor-row {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .ticket-menu-editor-row label,
  .ticket-menu-editor-row label:first-child {
    grid-column: 1;
  }

  .ticket-menu-row-actions {
    grid-column: 2;
    grid-row: 1 / 6;
  }

  .ticket-menu-editor-row.points-enabled .ticket-menu-row-actions {
    grid-row: 1 / 7;
  }
}

.new-ticket-wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 10006;
  display: none;
  box-sizing: border-box;
  place-items: center;
  padding: 18px;
  background: rgba(8, 6, 12, .82);
  backdrop-filter: blur(7px);
}

.new-ticket-wizard-overlay.show {
  display: grid;
}

.new-ticket-wizard-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1040px, 100%);
  height: min(90vh, 820px);
  overflow: hidden;
  color: var(--theme-text, #302234);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}

.new-ticket-wizard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--theme-line, #dfd1e2);
}

.new-ticket-wizard-head > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.new-ticket-wizard-head span {
  color: var(--accent, #e64691);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
}

.new-ticket-wizard-head h2 {
  margin: 0;
  font-size: 20px;
}

.new-ticket-wizard-head > button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--theme-text, #302234);
  background: var(--theme-surface-2, #f6f0f7);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 50%;
}

.new-ticket-wizard-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 12px 20px;
  background: var(--theme-surface-2, #faf7fb);
  border-bottom: 1px solid var(--theme-line, #dfd1e2);
}

.new-ticket-wizard-steps span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--theme-muted, #806f84);
}

.new-ticket-wizard-steps span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -15%;
  width: 30%;
  height: 1px;
  content: "";
  background: var(--theme-line, #dfd1e2);
}

.new-ticket-wizard-steps b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--theme-muted, #806f84);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 50%;
  font-size: 10px;
}

.new-ticket-wizard-steps em {
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.new-ticket-wizard-steps span.active,
.new-ticket-wizard-steps span.done {
  color: var(--theme-text, #302234);
}

.new-ticket-wizard-steps span.active b,
.new-ticket-wizard-steps span.done b {
  color: #fff;
  background: var(--accent, #e64691);
  border-color: transparent;
}

.new-ticket-wizard-body {
  min-height: 0;
  padding: 22px;
  overflow: auto;
}

.wizard-section {
  width: min(960px, 100%);
  margin: 0 auto;
}

.wizard-section-title {
  margin-bottom: 18px;
}

.wizard-section-title > span {
  color: var(--accent, #e64691);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
}

.wizard-section-title h3 {
  margin: 3px 0 4px;
  color: var(--theme-text, #302234);
  font-size: 22px;
}

.wizard-section-title p {
  margin: 0;
  color: var(--theme-muted, #806f84);
  font-size: 12px;
}

.wizard-counter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 740px;
  margin: 34px auto 18px;
}

.wizard-counter {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 16px;
  text-align: center;
}

.wizard-counter > span {
  color: var(--theme-text, #302234);
  font-size: 16px;
  font-weight: 950;
}

.wizard-counter > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.wizard-counter button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--theme-text, #302234);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 50%;
}

.wizard-counter button svg {
  width: 20px;
}

.wizard-counter strong,
.wizard-total-people strong {
  color: var(--theme-text, #302234);
  font-size: 36px;
}

.wizard-counter small,
.wizard-total-people small {
  margin-left: 3px;
  color: var(--theme-muted, #806f84);
  font-size: 12px;
}

.wizard-counter.male {
  border-top: 3px solid #4c86c4;
}

.wizard-counter.female {
  border-top: 3px solid #d65c92;
}

.wizard-total-people {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  max-width: 740px;
  margin: 0 auto;
  padding: 16px;
  color: var(--theme-muted, #806f84);
  background: var(--theme-surface-2, #faf7fb);
  border-radius: 12px;
  font-weight: 900;
}

.wizard-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.wizard-plan-card {
  display: block;
  min-width: 0;
  padding: 15px;
  color: var(--theme-text, #302234);
  background: var(--theme-surface-2, #faf7fb);
  border: 2px solid var(--theme-line, #dfd1e2);
  border-radius: 13px;
  font: inherit;
  text-align: left;
}

.wizard-plan-card.selected {
  border-color: var(--accent, #e64691);
  box-shadow: 0 0 0 3px rgba(230, 70, 145, .14);
}

.wizard-plan-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.wizard-plan-card header strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-plan-card header span {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: var(--theme-action, var(--accent, #e64691));
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.wizard-plan-columns,
.wizard-plan-price {
  display: grid;
  grid-template-columns: minmax(75px, 1fr) repeat(2, minmax(62px, .8fr));
  gap: 6px;
  align-items: center;
}

.wizard-plan-columns {
  margin-bottom: 4px;
  font-size: 9px;
  text-align: right;
}

.wizard-plan-columns .male {
  color: #4c86c4;
}

.wizard-plan-columns .female {
  color: #d65c92;
}

.wizard-plan-price {
  min-height: 25px;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
}

.wizard-plan-price strong {
  color: var(--theme-text, #302234);
  font-size: 11px;
  text-align: right;
}

.wizard-guest-list {
  display: grid;
  gap: 13px;
}

.wizard-guest-card {
  padding: 15px;
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 13px;
}

.wizard-guest-card > header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.wizard-guest-card > header > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: #fff;
  background: var(--accent, #e64691);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 950;
}

.wizard-guest-card > header strong {
  color: var(--theme-text, #302234);
  font-size: 13px;
}

.wizard-guest-card > header em {
  margin-left: auto;
  color: var(--theme-action, var(--accent, #e64691));
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.wizard-customer-name,
.wizard-final-fields label {
  display: grid;
  gap: 5px;
}

.wizard-customer-name > span,
.wizard-final-fields label > span,
.wizard-cast-label > span {
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 900;
}

.wizard-customer-name input,
.wizard-absent-search input,
.wizard-final-fields select,
.wizard-final-fields textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  color: var(--theme-text, #302234);
  background: var(--theme-input, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
}

.wizard-cast-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 7px;
}

.wizard-cast-label button,
.wizard-absent-toggle {
  color: var(--theme-muted, #806f84);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
}

.wizard-cast-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wizard-cast-chips button,
.wizard-absent-toggle {
  min-height: 36px;
  padding: 0 11px;
  color: var(--theme-text, #302234);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.wizard-cast-chips button.selected {
  color: #fff;
  background: var(--accent, #e64691);
  border-color: transparent;
}

.wizard-no-cast {
  color: var(--theme-muted, #806f84);
  font-size: 11px;
}

.wizard-absent-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
}

.wizard-absent-toggle svg {
  width: 14px;
}

.wizard-absent-toggle.active {
  color: var(--theme-action, var(--accent, #e64691));
  border-color: var(--theme-action, var(--accent, #e64691));
}

.wizard-absent-search {
  display: grid;
  gap: 9px;
  margin-top: 9px;
  padding: 11px;
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 9px;
}

.wizard-absent-search > label {
  position: relative;
}

.wizard-absent-search > label svg {
  position: absolute;
  top: 12px;
  left: 10px;
  z-index: 1;
  width: 16px;
  color: var(--theme-muted, #806f84);
}

.wizard-absent-search input {
  padding-left: 34px;
}

.wizard-confirm-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wizard-confirm-summary article,
.wizard-confirm-guests,
.wizard-final-fields {
  padding: 14px;
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 11px;
}

.wizard-confirm-summary article {
  display: grid;
  gap: 5px;
}

.wizard-confirm-summary span,
.wizard-confirm-guests h4 {
  margin: 0;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 900;
}

.wizard-confirm-summary strong {
  color: var(--theme-text, #302234);
  font-size: 14px;
}

.wizard-confirm-guests {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.wizard-confirm-guests > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--theme-line, #dfd1e2);
  font-size: 11px;
}

.wizard-confirm-guests > div strong {
  color: var(--theme-action, var(--accent, #e64691));
}

.wizard-final-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

.wizard-final-fields textarea {
  min-height: 82px;
  padding-block: 10px;
  resize: vertical;
}

.new-ticket-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-top: 1px solid var(--theme-line, #dfd1e2);
}

.new-ticket-wizard-footer > div {
  display: flex;
  gap: 8px;
}

.new-ticket-wizard-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 43px;
  padding: 0 16px;
  color: var(--theme-text, #302234);
  background: var(--theme-surface-2, #f6f0f7);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.new-ticket-wizard-footer button svg {
  width: 16px;
}

.new-ticket-wizard-footer button.primary {
  min-width: 130px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #e64691), var(--purple, #7c3aed));
  border-color: transparent;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .ticket-settings-mode-tabs,
  .ticket-config-panel,
  .set-plan-setting-row,
  .agency-setting-row,
  .new-ticket-wizard-dialog,
  .new-ticket-wizard-head,
  .new-ticket-wizard-steps,
  .new-ticket-wizard-footer,
  .wizard-counter,
  .wizard-total-people,
  .wizard-plan-card,
  .wizard-guest-card,
  .wizard-confirm-summary article,
  .wizard-confirm-guests,
  .wizard-final-fields
) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .ticket-settings-mode-tabs,
  .new-ticket-wizard-steps,
  .wizard-counter,
  .wizard-total-people,
  .wizard-plan-card,
  .wizard-guest-card,
  .wizard-confirm-summary article,
  .wizard-confirm-guests,
  .wizard-final-fields
) {
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .set-plan-setting-row input,
  .agency-setting-row input,
  .wizard-customer-name input,
  .wizard-absent-search input,
  .wizard-final-fields select,
  .wizard-final-fields textarea
) {
  color: var(--theme-text);
  background: var(--deep);
  border-color: var(--theme-line);
}

html[data-theme="luxury"] body.ipad-app :where(
  .new-ticket-wizard-head span,
  .wizard-section-title > span,
  .wizard-guest-card > header em,
  .wizard-confirm-guests > div strong
) {
  color: #d9bb70;
}

html[data-theme="luxury"] body.ipad-app :where(
  .new-ticket-wizard-steps span.active b,
  .new-ticket-wizard-steps span.done b,
  .wizard-guest-card > header > span,
  .wizard-cast-chips button.selected,
  .new-ticket-wizard-footer button.primary,
  .ticket-config-panel-head button
) {
  color: #181109;
  background: linear-gradient(135deg, #e1c77f, #a77d35);
  border-color: #d5b96d;
}

html[data-theme="luxury"] body.ipad-app .wizard-plan-card.selected {
  border-color: #d5b96d;
  box-shadow: 0 0 0 3px rgba(213, 185, 109, .14);
}

@media (max-width: 900px) {
  .set-plan-settings-head {
    display: none;
  }

  .set-plan-setting-row {
    grid-template-columns: 1fr 1fr 42px;
  }

  .set-plan-setting-identity {
    grid-column: 1 / 3;
  }

  .set-plan-setting-row > button {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }

  .wizard-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ticket-settings-mode-tabs {
    padding-inline: 10px;
  }

  .ticket-settings-mode-tabs button {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 10px;
  }

  .ticket-config-panel {
    padding: 12px;
  }

  .ticket-config-panel-head {
    align-items: flex-start;
  }

  .ticket-config-panel-head span {
    display: none;
  }

  .set-plan-setting-row {
    grid-template-columns: minmax(0, 1fr) 38px;
  }

  .set-plan-setting-identity,
  .set-plan-setting-prices {
    grid-column: 1;
  }

  .set-plan-setting-row > button {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .new-ticket-wizard-overlay {
    padding: 7px;
  }

  .new-ticket-wizard-dialog {
    height: 96vh;
    border-radius: 14px;
  }

  .new-ticket-wizard-head {
    padding: 12px 13px;
  }

  .new-ticket-wizard-head h2 {
    font-size: 17px;
  }

  .new-ticket-wizard-steps {
    padding: 9px 7px;
  }

  .new-ticket-wizard-steps span {
    gap: 4px;
  }

  .new-ticket-wizard-steps em {
    font-size: 9px;
  }

  .new-ticket-wizard-steps b {
    width: 22px;
    height: 22px;
  }

  .new-ticket-wizard-body {
    padding: 14px 11px;
  }

  .wizard-section-title h3 {
    font-size: 19px;
  }

  .wizard-counter-grid,
  .wizard-plan-grid,
  .wizard-confirm-summary,
  .wizard-final-fields {
    grid-template-columns: 1fr;
  }

  .wizard-counter-grid {
    gap: 10px;
    margin-top: 20px;
  }

  .wizard-counter {
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 8px;
    padding: 15px;
  }

  .wizard-counter > div {
    gap: 18px;
  }

  .wizard-counter button {
    width: 44px;
    height: 44px;
  }

  .wizard-counter strong,
  .wizard-total-people strong {
    font-size: 30px;
  }

  .wizard-guest-card > header {
    flex-wrap: wrap;
  }

  .wizard-guest-card > header em {
    width: 100%;
    margin-left: 36px;
  }

  .wizard-confirm-guests > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .new-ticket-wizard-footer {
    padding: 9px 10px;
  }

  .new-ticket-wizard-footer button {
    min-height: 40px;
    padding-inline: 11px;
  }
}

.table-settings-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--theme-line, #dfd1e2);
}

.table-settings-dialog-head > div {
  display: grid;
  gap: 3px;
}

.table-settings-dialog-head span {
  color: var(--accent, #e64691);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
}

.table-settings-dialog-head h2,
.table-settings-dialog-head p {
  margin: 0;
}

.table-settings-dialog-head h2 {
  font-size: 20px;
}

.table-settings-dialog-head p {
  color: var(--theme-muted, #806f84);
  font-size: 12px;
}

.table-settings-dialog-head > button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--theme-text, #302234);
  background: var(--theme-surface-2, #f6f0f7);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 50%;
}

.table-settings-workspace {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 0;
}

.table-settings-dialog [data-ticket-settings-panel][hidden] {
  display: none;
}

.table-settings-floor-pane {
  min-width: 0;
  padding: 15px;
  overflow: auto;
  background: var(--theme-surface-2, #faf7fb);
  border-right: 1px solid var(--theme-line, #dfd1e2);
}

.table-settings-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.table-settings-pane-head strong {
  font-size: 14px;
}

.table-settings-pane-head button,
.table-settings-floor-editor button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  color: var(--theme-text, #302234);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
}

.table-settings-pane-head button svg,
.table-settings-floor-editor button svg {
  width: 15px;
}

.table-settings-floor-list {
  display: grid;
  gap: 8px;
}

.table-settings-floor-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  padding: 9px 11px;
  color: var(--theme-text, #302234);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 9px;
  font: inherit;
  text-align: left;
}

.table-settings-floor-list button > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.table-settings-floor-list button strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-settings-floor-list button small {
  flex: 0 0 auto;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 900;
}

.table-settings-floor-list button svg {
  width: 16px;
}

.table-settings-floor-list button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #e64691), var(--purple, #7c3aed));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.table-settings-floor-list button.active small {
  color: rgba(255, 255, 255, .78);
}

.table-settings-table-pane {
  min-width: 0;
  padding: 16px 18px;
  overflow: auto;
}

.table-settings-floor-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 18px;
  padding: 13px;
  background: var(--theme-surface-2, #faf7fb);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 10px;
}

.table-settings-floor-editor label,
.ticket-table-editor-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.table-settings-floor-editor label span,
.ticket-table-editor-row label span {
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 900;
}

.table-settings-floor-editor input,
.ticket-table-editor-row input,
.ticket-table-editor-row select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  color: var(--theme-text, #302234);
  background: var(--theme-input, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
}

.table-settings-floor-editor > button {
  color: #b4234f;
}

.table-pane-head {
  margin-bottom: 8px;
}

.table-pane-head > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.table-pane-head > div span {
  color: var(--theme-muted, #806f84);
  font-size: 11px;
  font-weight: 900;
}

.table-pane-head > button {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #e64691), var(--purple, #7c3aed));
  border-color: transparent;
}

.ticket-table-editor-head,
.ticket-table-editor-row {
  display: grid;
  grid-template-columns: minmax(90px, .55fr) minmax(150px, 1fr) minmax(90px, .55fr) 42px;
  gap: 9px;
  align-items: center;
}

.ticket-table-editor-head {
  padding: 5px 10px;
  color: var(--theme-muted, #806f84);
  font-size: 10px;
  font-weight: 900;
}

.ticket-table-editor-list {
  display: grid;
  gap: 8px;
}

.ticket-table-editor-row {
  padding: 10px;
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 9px;
}

.ticket-table-editor-row label > span {
  display: none;
}

.ticket-table-editor-row > button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #b4234f;
  background: var(--theme-surface-2, #fff7fa);
  border: 1px solid var(--theme-line, #ead4df);
  border-radius: 7px;
}

.ticket-table-editor-row > button svg {
  width: 16px;
}

.ticket-table-editor-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 180px;
  color: var(--theme-muted, #806f84);
  border: 1px dashed var(--theme-line, #dfd1e2);
  border-radius: 10px;
  text-align: center;
}

.ticket-table-editor-empty svg {
  width: 28px;
}

.ticket-table-editor-empty strong {
  color: var(--theme-text, #302234);
}

.ticket-table-editor-empty span {
  font-size: 11px;
}

.table-settings-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--theme-line, #dfd1e2);
}

.table-settings-dialog-footer > span {
  color: var(--theme-muted, #806f84);
  font-size: 11px;
  font-weight: 800;
}

.table-settings-dialog-footer > span.error {
  color: #d34267;
}

.table-settings-dialog-footer > div {
  display: flex;
  gap: 8px;
}

.table-settings-dialog-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 14px;
  color: var(--theme-text, #302234);
  background: var(--theme-surface-2, #f6f0f7);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.table-settings-dialog-footer button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #e64691), var(--purple, #7c3aed));
  border-color: transparent;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .table-settings-dialog {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .table-settings-dialog-head,
  .table-settings-floor-pane,
  .table-settings-table-pane,
  .table-settings-dialog-footer
) {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .table-settings-floor-pane,
  .table-settings-floor-editor
) {
  background: var(--theme-surface-2);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .table-settings-dialog-head h2,
  .table-settings-pane-head strong,
  .table-settings-floor-list strong,
  .ticket-table-editor-empty strong
) {
  color: var(--theme-text);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .table-settings-dialog-head p,
  .table-settings-floor-list small,
  .table-settings-floor-editor label span,
  .ticket-table-editor-row label span,
  .ticket-table-editor-head,
  .table-pane-head > div span,
  .table-settings-dialog-footer > span,
  .ticket-table-editor-empty
) {
  color: var(--theme-muted);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .table-settings-dialog-head > button,
  .table-settings-pane-head button,
  .table-settings-floor-editor button,
  .table-settings-floor-list button:not(.active),
  .ticket-table-editor-row,
  .ticket-table-editor-row > button,
  .table-settings-dialog-footer button:not(.primary)
) {
  color: var(--theme-text);
  background: var(--theme-button-bg);
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .table-settings-floor-editor input,
  .ticket-table-editor-row input,
  .ticket-table-editor-row select
) {
  color: var(--theme-text);
  background: var(--deep);
  border-color: var(--theme-line);
  caret-color: var(--theme-action);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .table-settings-floor-editor input,
  .ticket-table-editor-row input
)::placeholder {
  color: var(--theme-muted);
  opacity: .78;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app :where(
  .table-settings-floor-editor > button,
  .ticket-table-editor-row > button
) {
  color: #ff6f91;
}

html[data-theme="dark"] body.ipad-app :where(
  .table-settings-floor-list button.active,
  .table-pane-head > button,
  .table-settings-dialog-footer button.primary
) {
  color: #fff;
  background: linear-gradient(135deg, #e9549d, #8d58bd);
}

html[data-theme="luxury"] body.ipad-app :where(
  .table-settings-floor-list button.active,
  .table-pane-head > button,
  .table-settings-dialog-footer button.primary
) {
  color: #181109;
  background: linear-gradient(135deg, #e1c77f, #a77d35);
  border-color: #d5b96d;
}

html[data-theme="luxury"] body.ipad-app .table-settings-dialog-head > button {
  color: #f0d98f;
  background: #2a2117;
  border-color: #6c5732;
}

html[data-theme="luxury"] body.ipad-app .table-settings-dialog-head span {
  color: #d9bb70;
}

.table-settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 11px;
  color: var(--purple);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-border, #b98ddd);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.table-settings-link svg {
  width: 16px;
  height: 16px;
}

.open-ticket-table small {
  overflow: hidden;
  max-width: 110px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-ticket-table .table-vip-label {
  position: static;
  width: max-content;
}

.open-ticket-heading > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.open-ticket-heading > div > span {
  white-space: nowrap;
}

#toggle-all-open-tickets {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 10px;
  color: var(--theme-action, var(--purple, #7c3aed));
  background: var(--theme-button-bg, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 8px;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

#toggle-all-open-tickets svg {
  width: 14px;
  height: 14px;
}

#toggle-all-open-tickets.active {
  color: var(--theme-action-text, #fff);
  background: linear-gradient(135deg, var(--theme-action, var(--accent, #e64691)), var(--theme-action-2, var(--purple, #7c3aed)));
  border-color: transparent;
}

.open-ticket-floor-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 3px 6px;
  overflow: hidden;
  color: var(--theme-action, var(--purple, #7c3aed));
  background: var(--theme-surface-2, #f6f0f7);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.open-ticket-floor-label svg {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
}

.open-ticket-grid.show-all-floors {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  overflow: visible;
}

.open-ticket-grid.show-all-floors .open-ticket-card {
  height: auto;
  min-height: 148px;
}

html[data-theme="luxury"] body.ipad-app #toggle-all-open-tickets.active {
  color: #181109;
  background: linear-gradient(135deg, #e1c77f, #a77d35);
  border-color: #d5b96d;
}

html[data-theme="luxury"] body.ipad-app .open-ticket-floor-label {
  color: #e1c77f;
  background: #211a12;
  border-color: #6c5732;
}

@media (max-width: 760px) {
  .table-settings-layout {
    padding-inline: 10px;
  }

  .table-settings-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .table-settings-column-head {
    display: none;
  }

  .table-floor-setting-row {
    grid-template-columns: 34px minmax(0, 1fr) 48px 38px;
    padding-inline: 10px;
  }

  .table-setting-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 38px;
    padding: 12px 10px;
  }

  .table-setting-row label > span {
    display: block;
  }

  .table-setting-row label:nth-child(3),
  .table-setting-row label:nth-child(4) {
    grid-row: 2;
  }

  .table-setting-row .table-setting-delete {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }

  .table-settings-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .table-settings-actions button {
    width: 100%;
  }

  .table-settings-overlay {
    padding: 8px;
  }

  .table-settings-dialog {
    height: 94vh;
    border-radius: 14px;
  }

  .table-settings-dialog-head {
    padding: 13px 14px;
  }

  .table-settings-dialog-head p {
    display: none;
  }

  .table-settings-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .table-settings-floor-pane {
    overflow-x: auto;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--theme-line, #dfd1e2);
  }

  .table-settings-floor-pane .table-settings-pane-head {
    margin-bottom: 7px;
  }

  .table-settings-floor-list {
    display: flex;
  }

  .table-settings-floor-list button {
    flex: 0 0 150px;
    min-height: 48px;
  }

  .table-settings-table-pane {
    padding: 12px;
  }

  .ticket-table-editor-head {
    display: none;
  }

  .ticket-table-editor-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 38px;
  }

  .ticket-table-editor-row label > span {
    display: block;
  }

  .ticket-table-editor-row label:nth-child(3) {
    grid-column: 1 / 3;
  }

  .ticket-table-editor-row > button {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
  }

  .table-settings-dialog-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 10px 12px;
  }

  .table-settings-dialog-footer > div {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
  }
}

.table-button-grid button.selected,
.staff-add-grid button.selected {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  box-shadow: 0 12px 24px rgba(224, 65, 142, 0.2);
}

.table-button-grid button.is-held:not(.selected) {
  color: #7a3f98;
  background: #f4e9fb;
  border-color: #d9bde9;
}

.table-button-grid button.is-draft:not(.selected) {
  color: #8b2c5f;
  background: #fff2f8;
  border-color: #efb9d5;
}

.table-button-grid button.is-synced:not(.selected) {
  color: #6d6573;
  background: #f7f5f8;
  border-color: #ded7e2;
}

.table-button-grid button.is-locked:not(.selected) {
  color: #7a4b00;
  background: #fff4cf;
  border-color: #e8c56d;
}

.table-editor-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  color: #5b386d;
  background: #f8eefc;
  border: 1px solid #e2c6ef;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.table-editor-badge.other {
  color: #7a4b00;
  background: #fff4cf;
  border-color: #e8c56d;
}

.table-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.table-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8d0dc;
}

.dot.active {
  background: var(--pink);
}

.dot.held {
  background: var(--purple);
}

.dot.synced {
  background: #8a8191;
}

.ticket-staff-card {
  padding: 18px;
}

.table-timer-card {
  padding: 18px;
}

.timer-floor-groups {
  display: grid;
  gap: 11px;
}

.timer-floor-group {
  min-width: 0;
  padding: 10px;
  background: var(--theme-surface-2, #f8f4f9);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 11px;
}

.timer-floor-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.timer-floor-group > header > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.timer-floor-group > header svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--theme-action, var(--purple, #7c3aed));
}

.timer-floor-group > header strong {
  overflow: hidden;
  color: var(--theme-text, #302234);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-floor-group > header > span {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: var(--theme-muted, #806f84);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #dfd1e2);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}

.timer-floor-group.has-running-timer {
  border-color: var(--theme-action, var(--accent, #e64691));
  box-shadow: inset 3px 0 0 var(--theme-action, var(--accent, #e64691));
}

.timer-floor-group.has-running-timer > header > span {
  color: #177a5b;
  background: rgba(39, 164, 122, .1);
  border-color: rgba(39, 164, 122, .24);
}

.timer-floor-group .timer-grid {
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 6px;
}

.timer-floor-group .timer-grid button {
  min-height: 58px;
}

.timer-floor-group .table-control-empty {
  padding: 14px 8px;
  font-size: 10px;
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .timer-floor-group {
  color: var(--theme-text);
  background: var(--theme-surface-2);
  border-color: var(--theme-line);
}

html:is([data-theme="dark"], [data-theme="luxury"]) body.ipad-app .timer-floor-group > header > span {
  color: var(--theme-muted);
  background: var(--theme-surface);
  border-color: var(--theme-line);
}

html[data-theme="luxury"] body.ipad-app .timer-floor-group > header svg {
  color: #d9bb70;
}

html[data-theme="luxury"] body.ipad-app .timer-floor-group.has-running-timer {
  border-color: #d5b96d;
  box-shadow: inset 3px 0 0 #d5b96d;
}

@media (max-width: 520px) {
  .open-ticket-heading {
    align-items: flex-start;
  }

  .open-ticket-heading > div {
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
  }

  #toggle-all-open-tickets {
    min-height: 32px;
  }

  .open-ticket-grid.show-all-floors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timer-floor-group {
    padding: 8px;
  }

  .timer-floor-group .timer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

.timer-grid button {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 72px;
  color: var(--theme-text, #4b365b);
  background: var(--theme-button-bg, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #e3dbe7);
  border-radius: 7px;
  font: inherit;
}

.timer-grid strong,
.timer-grid span {
  display: block;
}

.timer-grid strong {
  font-size: 18px;
}

.timer-grid span {
  color: var(--theme-muted, var(--muted));
  font-size: 12px;
}

.timer-grid .warning {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  box-shadow: 0 12px 24px rgba(224, 65, 142, 0.24);
  animation: timerPulse 1.2s ease-in-out infinite;
}

.timer-grid .warning span {
  color: #fff;
}

.timer-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.timer-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  color: var(--theme-action, var(--purple));
  background: var(--theme-button-bg, var(--theme-surface, #fff));
  border: 1px solid var(--theme-line, #b98ddd);
  border-radius: 7px;
  font: inherit;
}

.timer-actions .timer-clear-button {
  color: #b81e5d;
  border-color: #f0bdd8;
}

@keyframes timerPulse {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

.staff-add-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.staff-add-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 76px;
  color: #2d2038;
  background: #fff;
  border: 1px solid #e7dce9;
  border-radius: 7px;
  font: inherit;
}

.staff-add-grid .staff-empty {
  grid-column: 1 / -1;
  min-height: 58px;
}

.staff-add-grid button.selected .avatar-chip {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.assigned-staff {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.assigned-staff > span {
  color: var(--muted);
  font-size: 13px;
}

#assigned-staff-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#assigned-staff-list b {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  color: var(--purple);
  background: #f0e6fb;
  border: 1px solid #e2d0f3;
  border-radius: 6px;
  font-size: 14px;
}

#assigned-staff-list em {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.ticket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
}

.menu-card,
.order-card {
  padding: 18px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

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

.heading-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  color: var(--purple);
  background: #fff;
  border: 1px solid #b98ddd;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
}

.heading-actions svg {
  width: 17px;
  height: 17px;
}

.section-heading h2 {
  margin: 0;
  color: #20172b;
  font-size: 18px;
}

.section-heading span {
  color: var(--purple);
  font-size: 13px;
}

.category-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.category-row button,
.menu-grid button {
  min-height: 48px;
  color: #4b365b;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
  font: inherit;
}

.category-row button.selected {
  color: #fff;
  background: linear-gradient(135deg, #8c56b8, #5d376e);
  border: 0;
}

.category-row .manual-category-button {
  color: #fff;
  background: linear-gradient(135deg, #e64d9b, #7d4bb3);
  border-color: transparent;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(var(--menu-columns, 3), minmax(0, 1fr));
  gap: 10px;
}

.menu-grid button {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  min-height: 88px;
  padding: 12px;
  text-align: left;
}

.menu-grid strong,
.menu-grid span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.menu-grid span {
  margin-top: 8px;
  color: var(--pink);
  font-size: 18px;
}

.menu-grid[data-columns="4"] {
  gap: 9px;
}

.menu-grid[data-columns="4"] button,
.menu-grid[data-columns="5"] button {
  min-height: 92px;
  padding: 10px;
}

.menu-grid[data-columns="4"] strong,
.menu-grid[data-columns="5"] strong {
  font-size: 14px;
}

.menu-grid[data-columns="4"] span,
.menu-grid[data-columns="5"] span {
  font-size: 16px;
}

.menu-grid[data-columns="5"] {
  gap: 8px;
}

.menu-grid[data-columns="5"] strong {
  font-size: 13px;
}

.menu-grid[data-columns="5"] span {
  font-size: 15px;
}

.order-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  min-height: 66px;
  border-bottom: 1px solid #eee7f0;
}

.order-item strong,
.order-item span {
  display: block;
}

.order-item span,
.order-note {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.order-item .item-staff-label {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  color: #7e2d5c;
  background: #fff1f8;
  border: 1px solid #f3cce2;
  border-radius: 999px;
  font-weight: 800;
}

.order-item b {
  color: #20172b;
  font-size: 17px;
}

.qty-controls {
  display: inline-grid;
  grid-template-columns: 34px 32px 34px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dfd3e5;
  border-radius: 6px;
}

.qty-controls button {
  height: 34px;
  color: var(--purple);
  background: #fff;
  border: 0;
  font: inherit;
}

.qty-controls b {
  display: grid;
  place-items: center;
  height: 34px;
  background: #f8f1fb;
  font-size: 14px;
}

.qty-controls.staff-fixed-qty {
  grid-template-columns: 34px 32px 54px;
}

.qty-controls.staff-fixed-qty button:last-child {
  font-size: 12px;
}

.empty-order {
  padding: 14px;
  color: var(--muted);
  text-align: center;
  background: #fff;
  border: 1px dashed #ddcfe5;
  border-radius: 7px;
}

.order-note {
  margin-top: 14px;
  padding: 12px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.payment-state {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 12px;
  color: #4b365b;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.payment-state span,
.payment-state small {
  color: var(--muted);
  font-size: 12px;
}

.payment-state strong {
  color: #20172b;
  font-size: 18px;
}

.payment-state.paid {
  background: linear-gradient(135deg, #fff7fc, #f4e9fb);
  border-color: #e2d0f3;
}

.payment-state.paid strong {
  color: var(--pink);
}

.ticket-total-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background:
    radial-gradient(circle at 10% 50%, rgba(237, 90, 160, 0.14), transparent 28%),
    rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 16px 34px rgba(20, 15, 32, 0.18);
}

.ticket-total-bar div {
  margin-right: auto;
}

.ticket-total-bar span,
.ticket-total-bar strong {
  display: block;
}

.ticket-total-bar span {
  color: var(--muted);
  font-size: 13px;
}

.ticket-total-bar strong {
  color: #171020;
  font-size: 34px;
}

.ticket-total-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 148px;
  min-height: 56px;
  border-radius: 7px;
  font: inherit;
  font-size: 16px;
}

.ticket-total-bar button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.ghost-action {
  color: var(--purple);
  background: #fff;
  border: 1px solid #b98ddd;
}

.sync-action {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  box-shadow: 0 12px 24px rgba(224, 65, 142, 0.22);
}

.paid-action {
  color: #fff;
  background: linear-gradient(135deg, #8c56b8, #5d376e);
  border: 0;
}

.danger-action {
  color: #8b2c5f;
  background: #fff;
  border: 1px solid #f0bdd8;
}

.held-card,
.history-card,
.vault-card {
  padding: 18px;
}

.held-list {
  display: grid;
  gap: 8px;
}

.held-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 12px;
  color: #20172b;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
  font: inherit;
}

.held-list span {
  color: var(--muted);
  font-size: 13px;
}

.history-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.history-summary div {
  padding: 14px;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.history-summary span,
.history-summary strong {
  display: block;
}

.history-summary span {
  color: var(--muted);
  font-size: 12px;
}

.history-summary strong {
  margin-top: 6px;
  color: #20172b;
  font-size: 18px;
}

.history-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.history-list .history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  color: #20172b;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.history-list strong,
.history-list span,
.history-list b,
.history-list small {
  display: block;
}

.history-list span,
.history-list small {
  color: var(--muted);
  font-size: 12px;
}

.history-list b {
  color: var(--pink);
  font-size: 18px;
  text-align: right;
}

.history-list small {
  margin-top: 4px;
  text-align: right;
}

.history-detail-button,
.ticket-detail-toggle button {
  min-height: 44px;
  padding: 0 14px;
  color: var(--purple);
  background: #fff;
  border: 1px solid #d9c9e4;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}

.history-detail-panel {
  grid-column: 1 / -1;
}

.ticket-detail-toggle {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.ticket-detail-panel {
  margin-top: 10px;
}

.ticket-detail-list {
  display: grid;
  gap: 6px;
}

.ticket-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  background: #fff7fc;
  border: 1px solid #eed8e9;
  border-radius: 7px;
}

.ticket-detail-row strong,
.ticket-detail-row span {
  display: block;
}

.ticket-detail-row span,
.ticket-detail-row small,
.ticket-detail-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ticket-detail-row b {
  color: #20172b;
}

.vault-summary,
.vault-grand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vault-history,
.vault-collections-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.vault-history[hidden],
.vault-collections-panel[hidden] {
  display: none;
}

.vault-heading-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vault-heading-actions span {
  margin: 0;
}

.vault-heading-actions button.selected {
  color: #fff;
  background: linear-gradient(135deg, #8c56b8, #df3f8c);
  border-color: transparent;
}

.vault-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #fffafd;
  border: 1px solid #eaddeb;
  border-radius: 8px;
}

.vault-history-head strong {
  color: #20172b;
  font-size: 18px;
}

.vault-history-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--purple);
  background: #fff;
  border: 1px solid #dccce7;
  border-radius: 7px;
}

.vault-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  gap: 1px;
  overflow: hidden;
  background: #eaddeb;
  border: 1px solid #eaddeb;
  border-radius: 9px;
}

.vault-weekday {
  display: grid;
  place-items: center;
  min-height: 38px;
  color: #6b5578;
  background: #fff4fa;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.vault-day {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 104px;
  padding: 8px;
  color: #2c2038;
  background: #fff;
  border: 0;
  border-radius: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.vault-day.is-empty {
  background: #fbf8fd;
}

.vault-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #20172b;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.vault-day.is-saturday .vault-day-number {
  color: #2563eb;
}

.vault-day.is-sunday .vault-day-number {
  color: #dc2626;
}

.vault-day-content,
.vault-day-content strong,
.vault-day-content small {
  display: block;
}

.vault-day-content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.vault-day-content strong {
  color: var(--pink);
  font-size: 12px;
  line-height: 1.25;
}

.vault-day-content small {
  color: #6b5578;
  font-size: 11px;
  line-height: 1.25;
}

.vault-collected-mark {
  display: inline-grid;
  place-items: center;
  justify-self: start;
  min-height: 20px;
  padding: 0 7px;
  color: #fff;
  background: linear-gradient(135deg, #d71955, #df3f8c);
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.vault-day.has-record {
  background: #fff7fc;
}

.vault-day.has-record strong {
  color: var(--pink);
}

.vault-day.is-today {
  background: linear-gradient(180deg, #fff7fc, #fff);
  box-shadow: inset 0 0 0 2px rgba(230, 70, 145, 0.22);
}

.vault-day.selected {
  background: linear-gradient(180deg, #f7e8ff, #fff7fc);
  box-shadow: inset 0 0 0 2px #8c56b8;
}

.vault-day.selected .vault-day-number {
  color: #fff;
  background: #8c56b8;
  border-color: #8c56b8;
}

.vault-empty-label {
  color: #b1a5ba;
}

.vault-history-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vault-history-detail div {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.vault-history-detail span,
.vault-history-detail strong {
  display: block;
}

.vault-history-detail span {
  color: var(--muted);
  font-size: 12px;
}

.vault-history-detail strong {
  margin-top: 4px;
  color: #20172b;
  font-size: 18px;
}

.vault-history-detail .vault-collection-row {
  border-color: rgba(223, 63, 140, .28);
  background: #fff6fb;
}

.vault-history-detail .vault-collection-row span {
  color: #8c56b8;
}

.vault-history-detail .vault-collection-row strong {
  color: #df3f8c;
}

.vault-summary div,
.vault-grand div {
  padding: 14px;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.vault-summary span,
.vault-summary strong,
.vault-grand span,
.vault-grand strong {
  display: block;
}

.vault-summary span,
.vault-grand span {
  color: var(--muted);
  font-size: 12px;
}

.vault-summary strong {
  margin-top: 6px;
  color: #20172b;
  font-size: 22px;
}

.vault-collect-actions {
  display: grid;
  padding: 0 0 14px;
}

.vault-collect-actions button {
  min-height: 54px;
  color: #fff;
  background: linear-gradient(135deg, #8c56b8, #df3f8c);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(223, 63, 140, .24);
}

.vault-collect-actions svg {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: -4px;
}

.vault-count-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.vault-fixed-change {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 8px;
}

.vault-fixed-change span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.vault-fixed-change strong {
  color: #20172b;
  font-size: 22px;
  font-weight: 950;
}

.vault-cash-base-input {
  width: 150px;
  min-height: 46px;
  padding: 0 12px;
  color: #20172b;
  background: #fffafd;
  border: 1px solid #dccce7;
  border-radius: 7px;
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  text-align: right;
}

.vault-cash-base-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(230, 70, 145, 0.16);
  outline: 0;
}

.vault-collections-list {
  display: grid;
  gap: 8px;
}

.vault-collection-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid #eaddeb;
  border-radius: 8px;
}

.vault-collection-list-row strong,
.vault-collection-list-row span {
  display: block;
}

.vault-collection-list-row strong {
  color: #20172b;
  font-size: 16px;
  font-weight: 900;
}

.vault-collection-list-row span {
  margin-top: 3px;
  color: #7a6d81;
  font-size: 12px;
  font-weight: 800;
}

.vault-collection-list-row b {
  color: var(--pink);
  font-size: 19px;
  font-weight: 950;
}

.vault-count-row {
  display: grid;
  grid-template-columns: 1fr 82px;
  gap: 8px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
  background: #fff7fc;
  border: 1px solid #eaddeb;
  border-radius: 7px;
}

.vault-count-row span {
  margin: 0;
  color: #20172b;
  font-size: 14px;
}

.vault-count-row input {
  width: 100%;
  height: 38px;
  padding: 0 8px;
  color: #20172b;
  background: #fff;
  border: 1px solid #dcd5e0;
  border-radius: 6px;
  font: inherit;
  text-align: right;
}

.vault-count-row b {
  grid-column: 1 / -1;
  color: var(--pink);
  font-size: 18px;
  text-align: right;
}

.vault-shopping {
  margin-top: 16px;
  padding: 14px;
  background: #fffafd;
  border: 1px solid #eaddeb;
  border-radius: 8px;
}

.vault-shopping-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 150px;
  gap: 10px;
}

.vault-shopping-form input {
  height: 46px;
  padding: 0 12px;
  color: #20172b;
  background: #fff;
  border: 1px solid #dcd5e0;
  border-radius: 7px;
  font: inherit;
}

.vault-shopping-form button,
.vault-shopping-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  border-radius: 7px;
  font: inherit;
}

.vault-shopping-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.vault-shopping-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 42px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  color: #20172b;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.vault-shopping-row strong,
.vault-shopping-row span,
.vault-shopping-row b {
  display: block;
}

.vault-shopping-row span {
  color: var(--muted);
  font-size: 12px;
}

.vault-shopping-row b {
  color: var(--pink);
  font-size: 18px;
}

.vault-shopping-row button {
  min-height: 38px;
  color: var(--pink);
  background: #fff;
  border: 1px solid #f0bdd8;
}

.vault-shopping-row button svg {
  width: 17px;
}

.vault-grand {
  position: static;
  margin-top: 16px;
  padding: 12px;
  background: rgba(20, 15, 32, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(20, 15, 32, 0.28);
}

.vault-grand div {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.vault-grand span {
  color: #d9c9e4;
}

.vault-grand strong {
  margin-top: 7px;
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

.vault-grand .vault-total strong {
  color: #ffd5f2;
}

.staff-summary-card {
  padding: 18px;
}

.cast-directory-card {
  padding: 18px;
}

.cast-directory-heading,
.cast-directory-heading > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cast-directory-heading > div:first-child {
  justify-content: flex-start;
}

#open-cast-add {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2));
  color: var(--theme-action-text);
  font: inherit;
  font-weight: 900;
}

#open-cast-add svg {
  width: 17px;
}

.cast-add-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(120px, .7fr));
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  background: var(--theme-surface-2);
}

.cast-add-form[hidden],
.cast-add-form label[hidden] {
  display: none !important;
}

.cast-add-form label {
  display: grid;
  gap: 5px;
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 900;
}

.cast-add-form input,
.cast-add-form select {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--theme-line);
  border-radius: 9px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font: inherit;
}

.cast-add-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
}

.cast-add-actions button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--theme-line);
  border-radius: 9px;
  background: var(--theme-button-bg);
  color: var(--theme-button-text);
  font: inherit;
  font-weight: 900;
}

.cast-add-actions .primary {
  border: 0;
  background: linear-gradient(135deg, var(--theme-action), var(--theme-action-2));
  color: var(--theme-action-text);
}

.cast-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.cast-directory-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--theme-line);
  border-radius: 11px;
  background: var(--theme-surface-2);
}

.cast-directory-item .avatar-chip {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  font-size: 17px;
}

.cast-directory-item div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.cast-directory-item strong {
  overflow: hidden;
  color: var(--theme-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cast-directory-item small {
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .cast-add-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cast-directory-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .cast-add-form {
    grid-template-columns: 1fr;
  }
}

/*
 * ark-auth.js injects a generic 44px minimum height for every panel input.
 * Keep native checkboxes compact in the account/notification overlay; without
 * this guard they render as large square text fields on iPad.
 */
body.ipad-app .ark-auth-panel-card :where(
  .ark-auth-switch,
  .ark-auth-type-grid label
) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

body.ipad-app .ark-auth-panel-card :where(
  .ark-auth-switch,
  .ark-auth-type-grid label
) input[type="checkbox"] {
  box-sizing: border-box;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--theme-action, #c22f76);
}

.staff-list-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  border-top: 1px solid #eee7f0;
}

.staff-list-row span {
  color: var(--muted);
  font-size: 14px;
}

.alarm-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 35%, rgba(230, 70, 145, 0.34), transparent 28%),
    rgba(20, 15, 32, 0.92);
}

.alarm-overlay.show {
  display: grid;
}

.alarm-dialog {
  display: grid;
  place-items: center;
  width: min(100%, 760px);
  min-height: 520px;
  padding: 42px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 134, 196, 0.24), transparent 34%),
    linear-gradient(135deg, #21162c, #130d1e);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

.alarm-mark {
  font-size: 58px;
}

.alarm-dialog p {
  margin: 8px 0 0;
  color: #ffd5f2;
  font-size: 20px;
}

.alarm-dialog h2 {
  margin: 12px 0;
  color: #fff;
  font-size: clamp(52px, 8vw, 86px);
  line-height: 1.05;
  text-shadow: 0 0 24px rgba(255, 134, 196, 0.42);
}

.alarm-dialog strong {
  color: #f4d9ef;
  font-size: 24px;
}

.alarm-dialog button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 230px;
  min-height: 62px;
  margin-top: 28px;
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  border-radius: 7px;
  font: inherit;
  font-size: 18px;
}

.payment-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  place-items: center;
  padding: 28px;
  background: rgba(20, 15, 32, 0.82);
}

.payment-overlay.show {
  display: grid;
}

.edit-overlay,
.menu-staff-overlay,
.complete-overlay,
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 46;
  display: none;
  place-items: center;
  padding: 28px;
  background: rgba(20, 15, 32, 0.76);
}

.edit-overlay.show,
.menu-staff-overlay.show,
.complete-overlay.show,
.confirm-overlay.show {
  display: grid;
}

.payment-dialog,
.edit-dialog,
.menu-staff-dialog,
.complete-dialog,
.confirm-dialog {
  width: min(100%, 760px);
  padding: 22px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
}

.payment-dialog {
  width: min(100%, 980px);
}

.edit-dialog {
  width: min(100%, 520px);
}

.menu-staff-dialog {
  width: min(100%, 620px);
}

.manual-menu-dialog {
  width: min(100%, 720px);
}

.menu-staff-dialog p {
  margin: 0 0 14px;
  color: #6b5578;
  font-size: 15px;
}

.manual-menu-type-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.manual-menu-type-row button {
  min-height: 52px;
  color: #4b365b;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
  font: inherit;
  font-weight: 800;
}

.manual-menu-type-row button.selected {
  color: #fff;
  background: linear-gradient(135deg, #8c56b8, #5d376e);
  border-color: transparent;
}

.manual-menu-form,
.manual-back-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.manual-menu-form label,
.manual-back-list label {
  display: grid;
  gap: 6px;
  color: #6b5578;
  font-size: 13px;
  font-weight: 800;
}

.manual-menu-form input,
.manual-back-list input {
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  color: #171223;
  background: #fff;
  border: 1px solid #ddd3e3;
  border-radius: 7px;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
}

.manual-back-list .empty-order {
  grid-column: 1 / -1;
}

.menu-staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.menu-staff-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  color: #2d2038;
  background: #fff;
  border: 1px solid #e7dce9;
  border-radius: 7px;
  font: inherit;
}

.menu-staff-grid button.selected {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  border-color: transparent;
}

.menu-staff-grid button.selected .avatar-chip {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.staff-picker-name {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.staff-picker-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-picker-name small {
  color: var(--theme-muted, #75667c);
  font-size: 10px;
  font-weight: 900;
}

.menu-staff-grid button.selected .staff-picker-name small,
.staff-chips button.selected .staff-picker-name small {
  color: rgba(255, 255, 255, .82);
}

.menu-staff-grid .free-staff-button {
  border-color: rgba(230, 77, 155, 0.35);
  background: #fff7fc;
}

.avatar-chip.free {
  color: #fff;
  background: linear-gradient(135deg, #e64d9b, #7d4bb3);
}

@media (max-width: 720px) {
  .manual-menu-form,
  .manual-back-list {
    grid-template-columns: 1fr;
  }
}

.confirm-dialog {
  width: min(100%, 520px);
}

.confirm-dialog p {
  margin: 0;
  color: #20172b;
  font-size: 18px;
  line-height: 1.6;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}

.choice-grid:empty {
  display: none;
}

.choice-grid button {
  min-height: 58px;
  color: var(--purple);
  background: #fff;
  border: 1px solid #d9c7e7;
  border-radius: 7px;
  font: inherit;
  font-size: 18px;
}

.choice-grid button.selected {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  box-shadow: 0 12px 24px rgba(224, 65, 142, 0.22);
}

.complete-dialog {
  display: grid;
  justify-items: center;
  width: min(100%, 620px);
  text-align: center;
}

.complete-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border-radius: 50%;
  font-size: 28px;
  box-shadow: 0 16px 32px rgba(224, 65, 142, 0.26);
}

.complete-dialog h2 {
  margin: 14px 0 6px;
  color: #20172b;
  font-size: 30px;
}

.complete-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.complete-receipt {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
}

.complete-receipt div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.complete-receipt span {
  color: var(--muted);
}

.complete-receipt strong {
  color: #20172b;
}

.complete-receipt .complete-total {
  min-height: 58px;
  background: #fff7fc;
  border-color: #eaddeb;
}

.complete-receipt .complete-total strong {
  color: var(--pink);
  font-size: 26px;
}

.complete-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

.complete-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  border-radius: 7px;
  font: inherit;
  font-size: 16px;
}

#complete-close {
  color: var(--purple);
  background: #fff;
  border: 1px solid #b98ddd;
}

#complete-new {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 70;
  transform: translate(-50%, 18px);
  min-width: 260px;
  max-width: calc(100vw - 32px);
  padding: 14px 18px;
  color: #fff;
  text-align: center;
  background: rgba(20, 15, 32, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.edit-field {
  display: grid;
  gap: 8px;
}

.edit-field span {
  color: var(--muted);
  font-size: 13px;
}

.edit-field input {
  width: 100%;
  min-height: 58px;
  padding: 0 14px;
  color: #20172b;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
  font: inherit;
  font-size: 20px;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.payment-table-selection {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  color: var(--theme-text, #2d2038);
  background: var(--theme-surface-2, #fff7fc);
  border: 1px solid var(--theme-line, #e3dbe7);
  border-radius: 10px;
}

.payment-table-selection-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.payment-table-selection-head > div {
  display: grid;
  gap: 3px;
}

.payment-table-selection-head small,
.payment-manual-fields small {
  color: var(--theme-muted, var(--muted));
  font-size: 11px;
  font-weight: 750;
}

.payment-table-selection-head label {
  display: grid;
  gap: 5px;
  min-width: 210px;
  color: var(--theme-muted, var(--muted));
  font-size: 11px;
  font-weight: 900;
}

.payment-table-selection-head select {
  min-height: 44px;
  padding: 0 11px;
  color: var(--theme-text, #2d2038);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #ddd3e3);
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
}

.payment-table-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.payment-table-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  color: var(--theme-text, #2d2038);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #e3dbe7);
  border-radius: 9px;
  cursor: pointer;
}

.payment-table-option:has(input:checked) {
  border-color: var(--theme-action, var(--pink));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-action, var(--pink)) 12%, transparent);
}

.payment-table-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--theme-action, var(--pink));
}

.payment-table-option span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.payment-table-option strong,
.payment-table-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-table-option small {
  color: var(--theme-muted, var(--muted));
  font-size: 10px;
}

.payment-table-option.is-locked {
  opacity: .48;
  cursor: not-allowed;
}

.payment-manual-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.payment-manual-fields > label {
  display: grid;
  gap: 6px;
  padding: 12px;
  color: var(--theme-text, #2d2038);
  background: var(--theme-surface-2, #fff7fc);
  border: 1px solid var(--theme-line, #e3dbe7);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
}

.payment-manual-fields label > div {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 12px;
  color: var(--theme-text, #2d2038);
  background: var(--theme-surface, #fff);
  border: 1px solid var(--theme-line, #ddd3e3);
  border-radius: 8px;
}

.payment-manual-fields input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 24px;
  font-weight: 900;
  text-align: right;
}

.payment-final-amount-field {
  border-color: var(--theme-action, var(--pink)) !important;
}

#payment-discount-row[hidden],
#payment-adjustment-row[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .payment-table-selection-head {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-table-selection-head label {
    min-width: 0;
  }

  .payment-table-options,
  .payment-manual-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .payment-table-options,
  .payment-manual-fields {
    grid-template-columns: 1fr;
  }
}

.payment-methods button {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 128px;
  padding: 16px;
  color: #2d2038;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 8px;
  font: inherit;
}

.payment-methods button svg {
  width: 34px;
  height: 34px;
  color: var(--purple);
}

.payment-methods button span {
  color: var(--muted);
  font-size: 12px;
}

.payment-methods button.selected {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
  box-shadow: 0 14px 26px rgba(224, 65, 142, 0.22);
}

.payment-methods button.selected svg,
.payment-methods button.selected span {
  color: #fff;
}

.payment-summary {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.payment-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.payment-summary span {
  color: var(--muted);
}

.payment-summary strong {
  color: #20172b;
  font-size: 22px;
}

.payment-summary .payment-grand {
  min-height: 64px;
  background: #fff7fc;
  border-color: #eaddeb;
}

.payment-summary .payment-grand strong {
  color: var(--pink);
  font-size: 32px;
}

.payment-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.payment-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 58px;
  border-radius: 7px;
  font: inherit;
  font-size: 17px;
}

#payment-cancel,
#edit-cancel {
  color: var(--purple);
  background: #fff;
  border: 1px solid #b98ddd;
}

#payment-confirm,
#edit-save {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  border: 0;
}

.staff-picker {
  padding: 22px 24px 24px;
}

.staff-picker h2,
.month-head h2 {
  margin: 0;
  color: #20172b;
  font-size: clamp(15px, 1.8vw, 18px);
}

.staff-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.staff-chips button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 8px;
  width: 108px;
  min-height: 112px;
  padding: 12px 10px;
  color: #2d2038;
  background: #fff;
  border: 1px solid #e7dce9;
  border-radius: 7px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  pointer-events: auto;
}

.staff-chips button.selected {
  background: #fff8fc;
  border-color: #e64691;
  box-shadow: 0 0 0 3px rgba(230, 70, 145, 0.14), 0 12px 24px rgba(224, 65, 142, 0.15);
}

.avatar-chip {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  border-radius: 50%;
  font-size: 22px;
}

.avatar-chip.coral {
  background: linear-gradient(135deg, #f48ac2, #df3f8c);
}

.avatar-chip.blue {
  background: linear-gradient(135deg, #8c56b8, #6e3d93);
}

.avatar-chip.amber {
  background: linear-gradient(135deg, #f48ac2, #8c56b8);
}

.avatar-chip.mint {
  background: linear-gradient(135deg, #b88ad5, #5d376e);
}

.clock-card {
  min-height: 300px;
  padding: 32px 24px 34px;
  text-align: center;
}

.today {
  margin: 0;
  color: #e64691;
  font-size: clamp(14px, 1.8vw, 17px);
}

.current-time {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 26px;
  color: #171020;
  line-height: 1;
}

.current-time span {
  font-size: clamp(74px, 13vw, 116px);
  letter-spacing: 1px;
}

.current-time small {
  color: #8c56b8;
  font-size: clamp(34px, 5.8vw, 54px);
}

.selected-staff-line {
  margin: 14px 0 0;
  color: var(--purple);
  font-size: 16px;
}

.punch-actions {
  display: flex;
  justify-content: center;
  gap: clamp(22px, 5vw, 42px);
  margin-top: 30px;
}

.punch-actions button {
  width: clamp(124px, 17vw, 150px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font: inherit;
  font-size: clamp(18px, 2.4vw, 24px);
}

.punch-actions button:disabled {
  cursor: not-allowed;
  color: #9b92a3 !important;
  background: #e6e2e9 !important;
  box-shadow: inset 0 -1px 0 rgba(80, 75, 100, 0.06) !important;
}

.punch-in {
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  box-shadow: 0 18px 36px rgba(224, 65, 142, 0.28);
}

.punch-out {
  color: #7a6e84;
  background: #ebe8ee;
  box-shadow: inset 0 -1px 0 rgba(80, 75, 100, 0.06);
}

.punch-out:not(:disabled) {
  color: #fff;
  background: linear-gradient(135deg, #ff86c4, #df3f8c);
  box-shadow: 0 18px 36px rgba(224, 65, 142, 0.28);
}

.month-card {
  min-height: 128px;
  padding: 20px 24px 26px;
}

.month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.month-head span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  color: var(--purple);
  background: #f0e6fb;
  border: 1px solid #e2d0f3;
  border-radius: 6px;
  font-size: 14px;
}

.empty-log {
  margin: 28px 0 0;
  color: #9d75bd;
  text-align: center;
  font-size: 15px;
}

.timecard-log {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.timecard-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #e3dbe7;
  border-radius: 7px;
}

.timecard-row span {
  color: var(--muted);
  font-size: 13px;
}

.timecard-row b {
  color: var(--pink);
}

@media (max-width: 720px) {
  .ipad-brandbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .ipad-brandmark {
    justify-content: center;
  }

  .ipad-brandmark img {
    width: 130px;
    max-width: 70vw;
  }

  .ipad-clock,
  .ipad-syncbar {
    width: 100%;
    min-width: 0;
    justify-items: center;
  }

  .ipad-clock strong {
    font-size: 30px;
  }

  .ipad-syncbar button {
    width: 100%;
  }

  .ipad-shell {
    padding: 8px 10px 18px;
  }

  .ipad-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 56px;
    padding: 6px;
    border-radius: 17px;
  }

  .ipad-tab {
    min-height: 44px;
    gap: 3px;
    font-size: 12px;
  }

  .ipad-tab svg {
    width: 15px;
    height: 15px;
  }

  .ticket-head-card,
  .ticket-staff-card,
  .table-timer-card,
  .menu-card,
  .order-card,
  .staff-summary-card {
    padding: 14px;
  }

  .section-heading {
    align-items: flex-start;
  }

  .heading-actions {
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
  }

  .heading-actions button {
    min-height: 34px;
    font-size: 12px;
  }

  .table-button-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .table-button-grid button {
    min-height: 48px;
    font-size: 14px;
  }

  .ticket-subgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ticket-subgrid button {
    min-height: 46px;
    font-size: 14px;
  }

  .staff-add-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .timer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .timer-grid button {
    min-height: 58px;
  }

  .timer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .timer-actions button {
    min-height: 42px;
    font-size: 13px;
  }

  .staff-add-grid button {
    min-height: 58px;
    font-size: 14px;
  }

  .assigned-staff {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ticket-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .category-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
  }

  .category-row button {
    min-height: 42px;
    font-size: 13px;
  }

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

  .menu-grid button {
    min-height: 70px;
    padding: 11px;
    font-size: 13px;
  }

  .menu-grid span {
    font-size: 15px;
  }

  .order-item {
    grid-template-columns: 1fr auto;
    min-height: 54px;
  }

  .order-item > b {
    grid-column: 2;
  }

  .qty-controls {
    grid-column: 1 / -1;
    width: 110px;
  }

  .ticket-total-bar {
    bottom: 8px;
    gap: 8px;
    padding: 10px;
  }

  .ticket-total-bar strong {
    font-size: 24px;
  }

  .ticket-total-bar button {
    min-width: 94px;
    min-height: 48px;
    font-size: 13px;
  }

  .held-card,
  .history-card,
  .vault-card {
    padding: 14px;
  }

  .history-summary,
  .vault-summary,
  .vault-grand,
  .vault-history-detail,
  .vault-count-grid,
  .vault-shopping-form {
    grid-template-columns: 1fr;
  }

  .vault-history {
    padding: 0;
  }

  .vault-history-head strong {
    font-size: 16px;
  }

  .vault-calendar {
    gap: 1px;
  }

  .vault-day {
    min-height: 72px;
    padding: 5px;
  }

  .vault-day-number {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }

  .vault-day-content {
    gap: 2px;
  }

  .vault-day-content strong {
    font-size: 9px;
  }

  .vault-day-content small {
    font-size: 9px;
  }

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

  .history-detail-button {
    grid-column: 1 / -1;
  }

  .ticket-detail-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ticket-detail-row em {
    grid-column: 1 / -1;
  }

  .vault-count-row {
    grid-template-columns: 1fr 92px;
  }

  .vault-grand {
    position: static;
  }

  .vault-grand strong {
    font-size: 24px;
  }

  .history-list .history-row {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 12px;
  }

  .history-list b,
  .history-list small {
    text-align: left;
  }

  .alarm-dialog {
    min-height: 430px;
    padding: 28px 18px;
  }

  .alarm-dialog strong {
    font-size: 18px;
  }

  .payment-dialog {
    padding: 16px;
  }

  .edit-dialog {
    padding: 16px;
  }

  .complete-dialog {
    padding: 18px;
  }

  .complete-actions {
    grid-template-columns: 1fr;
  }

  .choice-grid {
    grid-template-columns: 1fr;
  }

  .complete-receipt div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
  }

  .edit-field input {
    min-height: 52px;
    font-size: 17px;
  }

  .payment-methods {
    grid-template-columns: 1fr;
  }

  .payment-methods button {
    display: flex;
    justify-content: flex-start;
    min-height: 64px;
  }

  .payment-summary .payment-grand strong {
    font-size: 24px;
  }

  .staff-picker {
    padding: 14px 16px 16px;
  }

  .staff-chips {
    gap: 10px;
    margin-top: 10px;
  }

  .staff-chips button {
    width: 66px;
    min-height: 72px;
    border-radius: 12px;
    font-size: 13px;
  }

  .avatar-chip {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .clock-card {
    min-height: 224px;
    padding: 22px 16px 26px;
  }

  .current-time {
    margin-top: 20px;
  }

  .punch-actions {
    margin-top: 20px;
  }

  .punch-actions button {
    width: 110px;
  }

  .ipad-card {
    margin-top: 12px;
  }

  .month-card {
    min-height: 100px;
    padding: 16px;
  }

  .empty-log {
    margin-top: 18px;
  }

  .timecard-row {
    grid-template-columns: 1fr auto;
    min-height: 54px;
    padding: 10px 12px;
  }

  .timecard-row span {
    grid-column: 1 / -1;
  }
}

/* WCAG contrast pass: keep shared actions readable after all component rules. */
.customer-profile-actions button,
  .portfolio-actions button,
  .portfolio-store-foot button,
  .store-detail-actions button,
  .setup-wizard-dialog footer button:not(.secondary-settings-button),
  .search-btn,
  .segmented-control button.selected,
  .pagination .current,
  .settings-tab.active,
  .table-settings-actions button,
  .receipt-kind-switch button.active,
  .receipt-settings-actions button,
  .row-action:not(.delete),
  .shift-entry-form button,
  .shift-minimum-actions .primary,
  .settings-form button:not(.secondary-settings-button),
  .settings-row button,
  .ticket-config-panel-head .back-mode-switch button.active,
  .rank,
  .primary-action,
  .ipad-syncbar button:not(.theme-toggle),
  .ipad-tab.active,
  .ticket-floor-tabs button.active,
  .ticket-config-panel-head button,
  #ticket-add-menu-item,
  .new-ticket-wizard-steps span.done b,
  .wizard-guest-card > header > span,
  .wizard-cast-chips button.selected,
  .new-ticket-wizard-footer button.primary,
  .table-settings-floor-list button.active,
  .table-pane-head > button,
  .table-settings-dialog-footer button.primary,
  .staff-add-grid button.selected,
  .timer-grid .warning,
  .category-row .manual-category-button,
  .sync-action,
  .vault-shopping-row button,
  .alarm-dialog button,
  .avatar-chip.free,
  .choice-grid button.selected,
  .complete-mark,
  #complete-new,
  .payment-methods button.selected,
  #payment-confirm,
  #edit-save,
  .punch-out:not(:disabled) {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  border-color: transparent;
}

.salary-document-actions button {
  color: #2c210c;
  background: linear-gradient(135deg, #e4c777, #bd9442);
}

.store-health.offline {
  color: #5f4651;
}

.portfolio-empty {
  color: #625568;
}

.punch-actions button:disabled {
  color: #655c6c;
  opacity: 1;
}

.punch-out {
  color: #5f5568;
}

/* The tax amount is a text field, not one of the toggle switches above it. */
.salary-document-field-list .salary-document-tax-field input[data-salary-tax-manual] {
  position: static;
  display: block;
  width: 100%;
  min-width: 120px;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  appearance: none;
  color: #251d12;
  border: 1px solid #c8a866;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  line-height: 40px;
  text-align: right;
}

.salary-document-field-list .salary-document-tax-field input[data-salary-tax-manual]::after {
  content: none;
}