/* [project]/apps/admin/app/styles.css [app-client] (css) */
* {
  box-sizing: border-box;
}

body {
  color: #20232a;
  background: #f5f6f8;
  margin: 0;
  font-family: Arial, Microsoft YaHei, sans-serif;
}

button, input, select, textarea {
  font: inherit;
}

.shell {
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
  display: grid;
}

aside {
  color: #aebbb6;
  background: #15231f;
  padding: 28px 18px;
}

.brand {
  color: #fff;
  padding: 0 12px 28px;
  font-size: 20px;
  font-weight: 700;
}

.brand b {
  color: #79d6ad;
  border: 1px solid #376a55;
  border-radius: 5px;
  margin-left: 5px;
  padding: 3px 5px;
  font-size: 10px;
}

nav {
  gap: 5px;
  display: grid;
}

nav button {
  color: #b8c4c0;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
}

nav button:hover {
  color: #fff;
  background: #1c332b;
}

nav button.active {
  color: #fff;
  background: #244238;
}

.workspace {
  min-width: 0;
  padding: 30px 38px;
}

.workspace > header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.workspace > header small {
  color: #7b817f;
}

h1 {
  margin: 7px 0 25px;
  font-size: 26px;
}

button {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d9deda;
  border-radius: 8px;
  padding: 9px 15px;
}

.primary {
  color: #fff;
  background: #247451 !important;
  border-color: #247451 !important;
}

.notice {
  color: #276749;
  background: #edf8f3;
  border: 1px solid #cbe9da;
  border-radius: 10px;
  padding: 14px 17px;
  font-size: 13px;
}

.stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 18px 0;
  display: grid;
}

.stats article, .panel, .member-summary article, .table-panel {
  background: #fff;
  border: 1px solid #e6e9e7;
  border-radius: 12px;
  padding: 20px;
}

.stats span, .stats strong, .stats em, .member-summary span, .member-summary strong, .member-summary small {
  display: block;
}

.stats span, .member-summary span {
  color: #7d8380;
  font-size: 12px;
}

.stats strong, .member-summary strong {
  margin: 13px 0;
  font-size: 24px;
}

.stats em, .member-summary small {
  color: #26825c;
  font-size: 11px;
  font-style: normal;
}

.grid {
  grid-template-columns: 2fr 1fr;
  gap: 15px;
  display: grid;
}

.panel h2, .table-tools h2 {
  margin: 0 0 7px;
  font-size: 15px;
}

.panel p {
  border-bottom: 1px solid #eee;
  padding: 13px 0;
  font-size: 12px;
}

.panel p em {
  float: right;
  color: #27835d;
  font-style: normal;
}

.dot {
  background: #3abb83;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  display: inline-block;
}

.dot.warn {
  background: #e2aa45;
}

.chart {
  align-items: end;
  gap: 12px;
  height: 180px;
  padding-top: 20px;
  display: flex;
}

.chart i {
  background: linear-gradient(#65c99b, #dff4ea);
  border-radius: 5px 5px 0 0;
  flex: 1;
}

.chart i:first-child {
  height: 30%;
}

.chart i:nth-child(2) {
  height: 42%;
}

.chart i:nth-child(3) {
  height: 36%;
}

.chart i:nth-child(4) {
  height: 58%;
}

.chart i:nth-child(5) {
  height: 52%;
}

.chart i:nth-child(6) {
  height: 70%;
}

.chart i:nth-child(7) {
  height: 63%;
}

.chart i:nth-child(8) {
  height: 80%;
}

.chart i:nth-child(9) {
  height: 72%;
}

.chart i:nth-child(10) {
  height: 91%;
}

.chart i:nth-child(11) {
  height: 84%;
}

.chart i:nth-child(12) {
  height: 96%;
}

.member-hero {
  color: #fff;
  background: linear-gradient(115deg, #183a30, #29694f);
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-bottom: 16px;
  padding: 24px 26px;
  display: flex;
  box-shadow: 0 10px 28px #173c2f16;
}

.member-hero .eyebrow {
  letter-spacing: 1.6px;
  color: #84d7b2;
  font-size: 9px;
}

.member-hero h2 {
  margin: 8px 0;
  font-size: 20px;
}

.member-hero p {
  color: #bcd5ca;
  margin: 0;
  font-size: 12px;
}

.create-member-hero {
  color: #174e39;
  text-align: left;
  background: #fff;
  border: 1px solid #a6e8ca;
  border-radius: 13px;
  align-items: center;
  gap: 12px;
  min-width: 255px;
  padding: 15px 17px;
  display: flex;
  box-shadow: 0 6px 18px #061c141f;
}

.create-member-hero > b {
  background: #dff6eb;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 23px;
  display: grid;
}

.create-member-hero span {
  flex: 1;
}

.create-member-hero strong, .create-member-hero small {
  display: block;
}

.create-member-hero strong {
  font-size: 14px;
}

.create-member-hero small {
  color: #718178;
  margin-top: 4px;
  font-size: 10px;
}

.create-member-hero i {
  font-size: 20px;
  font-style: normal;
}

.member-summary {
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 16px;
  display: grid;
}

.table-panel {
  padding: 0;
  overflow: hidden;
}

.table-tools {
  border-bottom: 1px solid #e9ecea;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  display: flex;
}

.table-tools p {
  color: #888;
  margin: 0;
  font-size: 11px;
}

.tool-actions {
  gap: 8px;
  display: flex;
}

.tool-actions input {
  border: 1px solid #dce1de;
  border-radius: 8px;
  outline: none;
  width: 260px;
  padding: 9px 12px;
  font-size: 12px;
}

.tool-actions input:focus {
  border-color: #57a381;
  box-shadow: 0 0 0 3px #dff2e9;
}

.member-row {
  border-bottom: 1px solid #eef0ef;
  grid-template-columns: 1.2fr 1fr .8fr .8fr .65fr 1fr 1fr;
  align-items: center;
  gap: 14px;
  min-width: 850px;
  padding: 14px 20px;
  font-size: 12px;
  display: grid;
}

.member-row > span:first-child b, .member-row > span:first-child small, .member-row > span:nth-child(6) small {
  display: block;
}

.member-row small {
  color: #999;
  margin-top: 5px;
  font-size: 10px;
}

.member-head {
  color: #818682;
  background: #f8f9f8;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 11px;
}

.level {
  color: #277356;
  background: #edf7f2;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 10px;
  font-style: normal;
}

.tag {
  color: #6e5a18;
  background: #f8f0d4;
  border-radius: 5px;
  padding: 3px 5px;
  font-size: 9px;
  font-style: normal;
}

.empty {
  text-align: center;
  color: #999;
  padding: 40px;
}

.modal-backdrop {
  z-index: 10;
  background: #10231db8;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.member-form {
  background: #fff;
  border-radius: 17px;
  grid-template-rows: auto 1fr auto;
  width: min(1080px, 100vw - 40px);
  height: min(900px, 100vh - 48px);
  display: grid;
  overflow: hidden;
  box-shadow: 0 24px 90px #0005;
}

.form-header {
  border-bottom: 1px solid #e8ecea;
  justify-content: space-between;
  align-items: center;
  padding: 19px 24px;
  display: flex;
}

.form-title {
  align-items: center;
  gap: 12px;
  display: flex;
}

.form-icon {
  color: #247451;
  background: #e5f5ed;
  border-radius: 11px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 23px;
  font-weight: 700;
  display: grid;
}

.form-header h2 {
  margin: 0 0 4px;
  font-size: 19px;
}

.form-header p {
  color: #888;
  margin: 0;
  font-size: 11px;
}

.close {
  color: #777;
  border: 0;
  padding: 4px 8px;
  font-size: 22px;
}

.form-body {
  background: #f8faf9;
  padding: 18px 22px;
  overflow-y: auto;
}

.form-section, .more-details {
  background: #fff;
  border: 1px solid #e2e8e5;
  border-radius: 13px;
  padding: 18px;
}

.section-title {
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  display: flex;
}

.section-title > span {
  color: #2b7a58;
  background: #e9f6f0;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 10px;
}

.section-title h3 {
  margin: 0 0 3px;
  font-size: 14px;
}

.section-title p {
  color: #999;
  margin: 0;
  font-size: 10px;
}

.section-title em {
  color: #c05d51;
  background: #fbece9;
  border-radius: 5px;
  margin-left: auto;
  padding: 4px 7px;
  font-size: 9px;
  font-style: normal;
}

.form-grid {
  gap: 14px;
  display: grid;
}

.form-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

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

.form-grid label > span, .wide-label > span, .avatar-field > span {
  color: #666;
  margin-bottom: 7px;
  font-size: 10px;
  display: block;
}

.form-grid input, .form-grid select, .wide-label textarea {
  background: #fff;
  border: 1px solid #dce3df;
  border-radius: 8px;
  outline: none;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-size: 11px;
}

.form-grid input:focus, .form-grid select:focus, .wide-label textarea:focus {
  border-color: #58a37f;
  box-shadow: 0 0 0 3px #e3f3eb;
}

.avatar-field {
  grid-row: span 2;
}

.avatar-upload {
  color: #6e8278;
  background: #f7faf8;
  border: 1px dashed #a9bbb2;
  border-radius: 12px;
  width: 78px;
  height: 78px;
  font-size: 10px;
}

.compound {
  grid-template-columns: 72px 1fr;
  gap: 6px;
  display: grid;
}

.input-prefix {
  position: relative;
}

.input-prefix b {
  color: #667;
  font-size: 11px;
  position: absolute;
  top: 11px;
  left: 11px;
}

.input-prefix input {
  padding-left: 27px;
}

.more-details {
  margin-top: 14px;
  padding: 0;
}

.more-details summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  list-style: none;
  display: flex;
}

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

.more-details summary b, .more-details summary small {
  display: block;
}

.more-details summary b {
  color: #23694d;
  font-size: 12px;
}

.more-details summary small {
  color: #929b96;
  margin-top: 4px;
  font-size: 10px;
}

.more-details summary i {
  color: #65746d;
  font-size: 10px;
  font-style: normal;
}

.more-details[open] summary {
  border-bottom: 1px solid #e7ebe9;
}

.more-details[open] summary i {
  font-size: 0;
}

.more-details[open] summary i:after {
  content: "收起资料⌃";
  font-size: 10px;
}

.more-content {
  padding: 3px 18px 18px;
}

.sub-section {
  border-bottom: 1px solid #edf0ee;
  padding: 16px 0;
}

.sub-section:last-child {
  border: 0;
  padding-bottom: 0;
}

.sub-section h3 {
  margin: 0 0 13px;
  font-size: 12px;
}

.span-two {
  grid-column: span 2;
}

.habit-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  display: grid;
}

.check-card {
  color: #59645f;
  border: 1px solid #dfe5e2;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  font-size: 10px;
  display: flex;
}

.check-card input {
  accent-color: #247451;
}

.wide-label {
  margin-top: 13px;
  display: block;
}

.wide-label textarea {
  resize: vertical;
  height: 62px;
  padding: 10px;
}

.form-footer {
  background: #fff;
  border-top: 1px solid #e5eae7;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  display: flex;
}

.form-footer > div:first-child b, .form-footer > div:first-child span {
  display: block;
}

.form-footer > div:first-child b {
  font-size: 10px;
}

.form-footer > div:first-child span {
  color: #999;
  margin-top: 4px;
  font-size: 9px;
}

.form-footer > div:last-child {
  gap: 8px;
  display: flex;
}

.save-member {
  min-width: 140px;
}

.toast {
  z-index: 20;
  background: #fff;
  border: 1px solid #d5e8de;
  border-radius: 12px;
  gap: 10px;
  padding: 13px 17px;
  display: flex;
  position: fixed;
  top: 24px;
  right: 24px;
  box-shadow: 0 12px 36px #1c3b2e22;
}

.toast > b {
  color: #267552;
  background: #daf2e6;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.toast strong, .toast small {
  display: block;
}

.toast strong {
  font-size: 11px;
}

.toast small {
  color: #888;
  margin-top: 4px;
  font-size: 9px;
}

.empty-module {
  text-align: center;
  background: #fff;
  border: 1px dashed #cad3ce;
  border-radius: 14px;
  margin-top: 50px;
  padding: 70px;
}

.empty-module span {
  color: #277356;
  background: #edf7f2;
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 10px;
}

.empty-module h2 {
  margin: 18px 0 8px;
}

.empty-module p {
  color: #888;
  margin-bottom: 22px;
  font-size: 12px;
}

@media (max-width: 1050px) {
  .shell {
    grid-template-columns: 180px 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .workspace {
    padding: 22px;
  }

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

  .table-tools {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .tool-actions {
    flex-wrap: wrap;
  }

  .member-table {
    overflow-x: auto;
  }

  .form-grid.four, .habit-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .member-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .create-member-hero {
    width: 100%;
  }

  .form-grid.four, .form-grid.three {
    grid-template-columns: repeat(2, 1fr);
  }

  .span-two {
    grid-column: span 1;
  }

  .form-footer > div:first-child {
    display: none;
  }
}

@media (max-width: 650px) {
  .shell {
    grid-template-columns: 70px 1fr;
  }

  .brand {
    font-size: 0;
  }

  .brand:first-letter {
    font-size: 20px;
  }

  nav button {
    height: 42px;
    font-size: 0;
  }

  .workspace {
    padding: 15px;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    padding: 0;
  }

  .member-form {
    border-radius: 0;
    width: 100vw;
    height: 100vh;
  }

  .form-grid.four, .form-grid.three {
    grid-template-columns: 1fr;
  }

  .habit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ui-toast-notice {
  z-index: 1200;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, var(--ui-border));
  width: max-content;
  max-width: min(520px, 100vw - 32px);
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-panel-solid) 96%, var(--ui-accent-soft));
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  animation: .18s ease-out ui-toast-enter;
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 22px 70px #122d2347;
}

.ui-toast-notice > span {
  width: 24px;
  height: 24px;
  color: var(--ui-on-accent);
  background: var(--ui-accent);
  border-radius: 50%;
  flex: 0 0 24px;
  place-items: center;
  font-size: 12px;
  display: grid;
}

.ui-toast-notice > b {
  font-size: 12px;
  line-height: 1.5;
}

.ui-toast-notice.is-error {
  color: #842c2c;
  background: #fff5f5;
  border-color: #e5b7b7;
}

.ui-toast-notice.is-error > span {
  color: #fff;
  background: #b83d3d;
}

@keyframes ui-toast-enter {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 8px))scale(.98);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1);
  }
}

@media (max-width: 650px) {
  .ui-toast-notice {
    width: calc(100vw - 32px);
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-toast-notice {
    animation: none;
  }
}

.toast {
  max-width: min(520px, 100vw - 32px);
  transform: translate(-50%, -50%);
  z-index: 1200 !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  box-shadow: 0 22px 70px #122d2347 !important;
}

.member-profile-mask {
  z-index: 1300;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #091812b3;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.member-profile-dialog {
  width: min(1080px, 100vw - 40px);
  max-height: calc(100vh - 40px);
  color: var(--ui-text, #17231d);
  background: var(--ui-panel-solid, #fff);
  border: 1px solid var(--ui-border, #dfe7e2);
  border-radius: 20px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  display: grid;
  overflow: hidden;
  box-shadow: 0 30px 100px #00000061;
}

.member-profile-dialog > header, .member-profile-dialog > footer {
  border-bottom: 1px solid var(--ui-border, #e3e8e5);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  display: flex;
}

.member-profile-dialog > footer {
  border-top: 1px solid var(--ui-border, #e3e8e5);
  border-bottom: 0;
}

.member-profile-dialog > footer span {
  color: var(--ui-muted, #68756e);
  font-size: 12px;
}

.member-profile-identity {
  align-items: center;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.member-profile-identity h2, .member-profile-identity p {
  margin: 0;
}

.member-profile-identity h2 {
  margin-top: 3px;
  font-size: 21px;
}

.member-profile-identity p, .member-profile-identity small {
  color: var(--ui-muted, #68756e);
  font-size: 11px;
}

.member-profile-avatar {
  width: 58px;
  height: 58px;
  color: var(--ui-on-accent, #fff);
  background: var(--ui-accent, #247451);
  border: 2px solid color-mix(in srgb, var(--ui-accent, #247451) 30%, #fff);
  border-radius: 50%;
  flex: 0 0 58px;
  place-items: center;
  padding: 0;
  font-size: 22px;
  display: grid;
  overflow: hidden;
}

button.member-profile-avatar:hover, button.member-profile-avatar:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-accent, #247451) 30%, transparent);
  outline-offset: 3px;
}

.member-profile-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.member-profile-dialog > main {
  background: var(--ui-panel-soft, #f6f8f7);
  gap: 16px;
  padding: 20px 22px 24px;
  display: grid;
  overflow: auto;
}

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

.member-profile-kpis article, .member-profile-panel {
  background: var(--ui-panel-solid, #fff);
  border: 1px solid var(--ui-border, #dfe7e2);
  border-radius: 14px;
}

.member-profile-kpis article {
  gap: 8px;
  padding: 14px 16px;
  display: grid;
}

.member-profile-kpis span, .member-profile-panel p, .member-profile-row small, .member-profile-facts dt {
  color: var(--ui-muted, #68756e);
  font-size: 11px;
}

.member-profile-kpis b {
  font-size: 18px;
}

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

.member-profile-panel {
  min-width: 0;
  padding: 16px;
}

.member-profile-panel > header, .member-profile-row {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: flex;
}

.member-profile-panel > header {
  border-bottom: 1px solid var(--ui-border, #e5e9e7);
  padding-bottom: 12px;
}

.member-profile-panel h3, .member-profile-panel p {
  margin: 0;
}

.member-profile-panel h3 {
  font-size: 14px;
}

.member-profile-panel > header p {
  margin-top: 4px;
}

.member-profile-panel > header > b {
  color: var(--ui-accent, #247451);
}

.member-profile-row {
  border-bottom: 1px solid var(--ui-border, #edf0ee);
  padding: 12px 0;
}

.member-profile-row:last-of-type {
  border-bottom: 0;
}

.member-profile-row span, .member-profile-row b, .member-profile-row small {
  display: block;
}

.member-profile-row b {
  font-size: 12px;
}

.member-profile-row small {
  margin-top: 5px;
}

.member-profile-row em {
  color: var(--ui-accent, #247451);
  flex: none;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.member-profile-empty, .member-profile-truth-note {
  line-height: 1.6;
  display: block;
  margin: 12px 0 0 !important;
}

.member-profile-truth-note {
  color: #8a681e;
  background: #fff8df;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 10px;
}

.member-profile-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
  display: grid;
}

.member-profile-facts div {
  min-width: 0;
}

.member-profile-facts dt, .member-profile-facts dd {
  margin: 0;
}

.member-profile-facts dd {
  overflow-wrap: anywhere;
  margin-top: 5px;
  font-size: 12px;
}

.member-profile-loading, .member-profile-error {
  text-align: center;
  align-content: center;
  place-items: center;
  gap: 10px;
  min-height: 320px;
  padding: 40px;
  display: grid;
}

.member-profile-error {
  color: #8a2d2d;
}

.member-photo-preview {
  z-index: 1310;
  background: #000000e0;
  place-items: center;
  padding: 32px;
  display: grid;
  position: fixed;
  inset: 0;
}

.member-photo-preview img {
  object-fit: contain;
  border-radius: 14px;
  max-width: min(900px, 100vw - 64px);
  max-height: calc(100vh - 64px);
}

.member-photo-preview button {
  z-index: 1;
  color: #fff;
  background: #ffffff1f;
  border-color: #ffffff52;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 24px;
  position: fixed;
  top: 20px;
  right: 22px;
}

@media (max-width: 760px) {
  .member-profile-mask {
    padding: 0;
  }

  .member-profile-dialog {
    border-radius: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
  }

  .member-profile-kpis, .member-profile-grid {
    grid-template-columns: 1fr;
  }

  .member-profile-dialog > footer span {
    display: none;
  }
}

.recharge-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 16px;
  display: grid;
}

.recharge-main {
  gap: 14px;
  display: grid;
}

.recharge-step {
  background: #fff;
  border: 1px solid #e4e9e6;
  border-radius: 13px;
  padding: 19px;
}

.step-heading {
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  display: flex;
}

.step-heading > b {
  color: #247451;
  background: #e6f4ed;
  border-radius: 8px;
  place-items: center;
  width: 27px;
  height: 27px;
  font-size: 11px;
  display: grid;
}

.step-heading h2 {
  margin: 0 0 4px;
  font-size: 14px;
}

.step-heading p {
  color: #929a96;
  margin: 0;
  font-size: 10px;
}

.step-heading > .read-card {
  color: #266d50;
  background: #f0f8f4;
  border-color: #cce4d7;
  margin-left: auto;
}

.member-search {
  gap: 8px;
  display: flex;
}

.member-search input {
  border: 1px solid #dce3df;
  border-radius: 8px;
  outline: none;
  flex: 1;
  padding: 11px;
}

.selected-member {
  background: #f6faf8;
  border: 1px solid #dcebe4;
  border-radius: 10px;
  grid-template-columns: auto 1fr 110px 100px auto;
  align-items: center;
  gap: 13px;
  margin-top: 13px;
  padding: 13px;
  display: grid;
}

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

.selected-member strong, .selected-member span, .selected-member small, .selected-member b {
  display: block;
}

.selected-member span, .selected-member small {
  color: #85918b;
  margin-top: 4px;
  font-size: 9px;
}

.selected-member > div:nth-child(n+3) b {
  font-size: 13px;
}

.selected-member > button {
  color: #297556;
  background: none;
  border: 0;
}

.plan-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  display: grid;
}

.plan-grid > button {
  text-align: left;
  border: 1px solid #dce3df;
  padding: 15px 12px;
  position: relative;
}

.plan-grid > button.selected {
  background: #eff8f4;
  border: 2px solid #338462;
  padding: 14px 11px;
}

.plan-grid em, .plan-grid strong, .plan-grid span {
  display: block;
}

.plan-grid em {
  color: #7a8780;
  font-size: 9px;
  font-style: normal;
}

.plan-grid strong {
  margin: 9px 0 7px;
  font-size: 18px;
}

.plan-grid span {
  color: #2f7e5d;
  font-size: 9px;
}

.plan-grid i {
  color: #fff;
  background: #2d805d;
  border-radius: 50%;
  place-items: center;
  width: 17px;
  height: 17px;
  font-size: 9px;
  font-style: normal;
  display: grid;
  position: absolute;
  top: 7px;
  right: 7px;
}

.custom-recharge {
  border-top: 1px solid #edf0ee;
  grid-template-columns: 140px 180px 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding-top: 13px;
  font-size: 11px;
  display: grid;
}

.custom-recharge > div {
  position: relative;
}

.custom-recharge > div b {
  position: absolute;
  top: 10px;
  left: 11px;
}

.custom-recharge input {
  border: 1px solid #dce3df;
  border-radius: 8px;
  width: 100%;
  height: 37px;
  padding-left: 28px;
}

.custom-recharge small {
  color: #989f9b;
  font-size: 9px;
}

.payment-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  display: grid;
}

.payment-grid button {
  text-align: left;
  align-items: center;
  gap: 8px;
  display: flex;
  position: relative;
}

.payment-grid button > i {
  color: #37755b;
  background: #f0f3f1;
  border-radius: 7px;
  place-items: center;
  width: 27px;
  height: 27px;
  font-style: normal;
  display: grid;
}

.payment-grid button.selected {
  background: #eff8f4;
  border-color: #338462;
}

.payment-grid button > b {
  color: #2b7b59;
  position: absolute;
  right: 10px;
}

.recharge-remark {
  color: #777;
  grid-template-columns: 120px 1fr;
  align-items: center;
  margin-top: 14px;
  font-size: 10px;
  display: grid;
}

.recharge-remark input {
  border: 1px solid #dce3df;
  border-radius: 8px;
  height: 36px;
  padding: 0 10px;
}

.recharge-summary {
  color: #fff;
  border-radius: 14px;
  position: sticky;
  top: 20px;
  background: #17362c !important;
  padding: 20px !important;
}

.summary-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.summary-title span {
  font-size: 14px;
  font-weight: bold;
}

.summary-title em {
  color: #ecd892;
  background: #685b2f;
  border-radius: 10px;
  padding: 4px 7px;
  font-size: 9px;
  font-style: normal;
}

.summary-member {
  background: #ffffff10;
  border-radius: 9px;
  margin: 17px 0;
  padding: 13px;
}

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

.summary-member small {
  color: #a9c2b8;
  font-size: 9px;
}

.summary-member strong {
  margin: 6px 0;
  font-size: 15px;
}

.summary-member span {
  color: #a9c2b8;
  font-size: 9px;
}

.recharge-summary dl {
  border-top: 1px solid #ffffff1c;
  border-bottom: 1px solid #ffffff1c;
  margin: 0;
  padding: 12px 0;
}

.recharge-summary dl div {
  justify-content: space-between;
  padding: 7px 0;
  font-size: 10px;
  display: flex;
}

.recharge-summary dt {
  color: #a9c2b8;
}

.recharge-summary dd {
  margin: 0;
}

.recharge-summary dd.gift {
  color: #83dab3;
}

.arrival {
  padding: 18px 0;
}

.arrival span, .arrival strong {
  display: block;
}

.arrival span {
  color: #a9c2b8;
  font-size: 10px;
}

.arrival strong {
  margin-top: 6px;
  font-size: 27px;
}

.payment-line {
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 10px;
  display: flex;
}

.confirm-recharge {
  color: #123a2b;
  background: #6ed3a4;
  border: 0;
  width: 100%;
  height: 44px;
  font-weight: bold;
}

.confirm-recharge:disabled {
  opacity: .45;
}

.recharge-summary > p {
  text-align: center;
  color: #8eada1;
  font-size: 8px;
}

.recharge-success {
  text-align: center;
  background: #fff;
  border: 1px solid #dfe8e3;
  border-radius: 15px;
  max-width: 680px;
  margin: 25px auto;
  padding: 60px;
}

.success-mark {
  color: #297a56;
  background: #daf3e6;
  border-radius: 50%;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: auto;
  font-size: 30px;
  display: grid;
}

.recharge-success > span {
  color: #3b7a5e;
  margin-top: 15px;
  font-size: 11px;
  display: block;
}

.recharge-success > h2 {
  margin: 8px;
  font-size: 34px;
}

.recharge-success > p {
  color: #777;
  font-size: 12px;
}

.success-ticket {
  text-align: left;
  background: #f7faf8;
  border-radius: 10px;
  margin: 25px 0;
  padding: 15px;
}

.success-ticket span {
  justify-content: space-between;
  padding: 7px;
  font-size: 10px;
  display: flex;
}

.recharge-success > div:last-child {
  justify-content: center;
  gap: 8px;
  display: flex;
}

@media (max-width: 1100px) {
  .recharge-layout {
    grid-template-columns: 1fr;
  }

  .recharge-summary {
    position: static;
  }

  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .selected-member {
    grid-template-columns: auto 1fr;
  }

  .selected-member > div:nth-child(n+3) {
    display: none;
  }

  .payment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .custom-recharge {
    grid-template-columns: 1fr;
  }

  .recharge-success {
    padding: 30px 20px;
  }
}

/* [project]/apps/admin/app/ai-analysis.css [app-client] (css) */
.ai-analysis-entry {
  z-index: 7;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 0;
  display: flex;
  position: relative;
}

.ai-analysis-entry__button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #6b58d8, #8258c9 55%, #b065b2);
  border: 0;
  border-radius: 14px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  display: flex;
  box-shadow: 0 9px 22px #664ec23d;
}

.ai-analysis-entry__button span {
  font-size: 17px;
}

.ai-analysis-entry__button b {
  font-size: 13px;
}

.ai-analysis-entry__button:disabled {
  filter: grayscale(.7);
  cursor: not-allowed;
}

.ai-analysis-entry > small {
  color: #73717d;
  font-size: 11px;
}

.ai-analysis-entry > small b {
  color: #664ec2;
}

.ai-analysis-entry__latest {
  color: #6553ab;
  cursor: pointer;
  background: #f9f7ff;
  border: 1px solid #ddd8f4;
  border-radius: 9px;
  padding: 6px 9px;
  font-size: 10px;
}

.ai-analysis-backdrop {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 10000;
  background: #0d0c16a3;
  justify-content: center;
  align-items: center;
  padding: 28px;
  display: flex;
  position: fixed;
  inset: 0;
}

.ai-analysis-confirm, .ai-analysis-loading {
  text-align: center;
  background: linear-gradient(145deg, #fff, #f7f5ff);
  border: 1px solid #ffffff9e;
  border-radius: 28px;
  width: min(470px, 94vw);
  padding: 34px;
  box-shadow: 0 30px 90px #14102f59;
}

.ai-analysis-confirm > i {
  color: #fff;
  background: linear-gradient(145deg, #6f58dc, #bd67b4);
  border-radius: 20px;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 15px;
  font-size: 27px;
  font-style: normal;
  display: grid;
  box-shadow: 0 14px 28px #7054d34d;
}

.ai-analysis-confirm > small, .ai-analysis-loading > small, .ai-analysis-report header small {
  color: #7c6ac4;
  letter-spacing: .17em;
  font-size: 10px;
  font-weight: 800;
}

.ai-analysis-confirm h2, .ai-analysis-loading h2 {
  color: #24212e;
  margin: 8px 0 10px;
  font-size: 24px;
}

.ai-analysis-confirm > p, .ai-analysis-loading > p {
  color: #716e7b;
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.ai-analysis-confirm > div {
  color: #6e687b;
  background: #eeebfb;
  border-radius: 13px;
  justify-content: space-between;
  margin: 20px 0;
  padding: 13px 16px;
  display: flex;
}

.ai-analysis-confirm > div b {
  color: #5d47bd;
}

.ai-analysis-confirm footer {
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
  display: grid;
}

.ai-analysis-confirm footer button, .ai-analysis-failed button {
  color: #5f596c;
  cursor: pointer;
  background: #e9e6ee;
  border: 0;
  border-radius: 13px;
  min-height: 44px;
  font-weight: 700;
}

.ai-analysis-confirm footer .primary, .ai-analysis-failed button {
  color: #fff;
  background: linear-gradient(135deg, #6a53cf, #a35ebd);
}

.ai-analysis-loading {
  width: min(420px, 92vw);
}

.ai-analysis-orbit {
  border: 2px solid #ded8fb;
  border-top-color: #6c54d1;
  border-radius: 50%;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  animation: 1.3s linear infinite ai-spin;
  display: grid;
}

.ai-analysis-orbit i {
  color: #735bd5;
  font-size: 26px;
  font-style: normal;
  animation: 1.3s linear infinite reverse ai-spin;
}

.ai-analysis-progress {
  background: #e6e1f6;
  border-radius: 99px;
  height: 6px;
  margin-top: 24px;
  overflow: hidden;
}

.ai-analysis-progress i {
  border-radius: inherit;
  background: linear-gradient(90deg, #6852cf, #d06da9);
  width: 40%;
  height: 100%;
  animation: 1.2s ease-in-out infinite ai-progress;
  display: block;
}

.ai-analysis-report {
  background: #f5f4fa;
  border: 1px solid #fff9;
  border-radius: 28px;
  width: min(1080px, 96vw);
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 35px 110px #0b091d75;
}

.ai-analysis-report > header {
  color: #fff;
  z-index: 2;
  background: linear-gradient(120deg, #201a40, #5845a3 55%, #8d4c88);
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  display: flex;
  position: sticky;
  top: 0;
}

.ai-analysis-report header small {
  color: #d9d0ff;
}

.ai-analysis-report header h2 {
  margin: 5px 0 0;
  font-size: 23px;
}

.ai-analysis-report header button {
  color: #fff;
  cursor: pointer;
  background: #ffffff1a;
  border: 1px solid #ffffff38;
  border-radius: 12px;
  width: 38px;
  height: 38px;
  font-size: 25px;
}

.ai-analysis-report__body {
  padding: 24px;
}

.ai-analysis-hero {
  color: #fff;
  background: linear-gradient(130deg, #2d2852, #55459c);
  border-radius: 22px;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 22px;
  padding: 22px;
  display: grid;
}

.ai-analysis-score {
  background: #ffffff14;
  border: 1px solid #ffffff2e;
  border-radius: 18px;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: baseline;
  padding: 16px;
  display: grid;
}

.ai-analysis-score strong {
  font-size: 42px;
}

.ai-analysis-score small {
  font-size: 12px;
}

.ai-analysis-score span {
  color: #cfc8f4;
  text-align: center;
  grid-column: 1 / -1;
  font-size: 11px;
}

.ai-analysis-hero p {
  color: #ebe8ff;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
}

.ai-analysis-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
  display: grid;
}

.ai-analysis-metrics article {
  background: #fff;
  border: 1px solid #e4e1ed;
  border-radius: 17px;
  padding: 17px;
}

.ai-analysis-metrics small, .ai-analysis-metrics strong, .ai-analysis-metrics span {
  display: block;
}

.ai-analysis-metrics small {
  color: #85818d;
  font-size: 10px;
}

.ai-analysis-metrics strong {
  color: #282332;
  margin: 8px 0;
  font-size: 20px;
}

.ai-analysis-metrics span {
  color: #77727f;
  font-size: 10px;
}

.ai-analysis-metrics article.positive {
  border-top: 3px solid #42a67a;
}

.ai-analysis-metrics article.warning {
  border-top: 3px solid #e5a549;
}

.ai-analysis-chart-card {
  background: #fff;
  border: 1px solid #e3e0ea;
  border-radius: 20px;
  padding: 20px;
}

.ai-analysis-chart-card h3, .ai-analysis-two-column h3 {
  color: #302b3c;
  margin: 0 0 18px;
  font-size: 14px;
}

.ai-analysis-chart {
  align-items: flex-end;
  gap: 10px;
  height: 180px;
  display: flex;
}

.ai-analysis-chart > div {
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 100%;
  display: flex;
}

.ai-analysis-chart span {
  background: linear-gradient(#735ad8, #c36fac);
  border-radius: 7px 7px 3px 3px;
  width: min(30px, 80%);
  min-height: 8px;
  transition: height .5s;
}

.ai-analysis-chart small {
  color: #827d8c;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-size: 9px;
  overflow: hidden;
}

.ai-analysis-two-column {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 16px;
  display: grid;
}

.ai-analysis-two-column > div {
  background: #fff;
  border: 1px solid #e3e0ea;
  border-radius: 20px;
  padding: 20px;
}

.ai-analysis-two-column article {
  border-top: 1px solid #eeeaf2;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 13px 0;
  display: grid;
}

.ai-analysis-two-column article > i, .ai-analysis-two-column article > em {
  color: #6b54c8;
  background: #eeeafd;
  border-radius: 9px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 10px;
  font-style: normal;
  display: grid;
}

.ai-analysis-two-column article > em.high {
  color: #ad3d55;
  background: #ffeaef;
}

.ai-analysis-two-column article > em.low {
  color: #3a7b65;
  background: #e7f6f0;
}

.ai-analysis-two-column article b {
  color: #302b3c;
  font-size: 12px;
}

.ai-analysis-two-column article p {
  color: #706b78;
  margin: 5px 0;
  font-size: 11px;
  line-height: 1.6;
}

.ai-analysis-two-column article small {
  color: #958f9d;
  font-size: 9px;
}

.ai-analysis-disclaimer {
  color: #96919c;
  text-align: center;
  margin: 16px 0 0;
  font-size: 10px;
}

.ai-analysis-failed {
  text-align: center;
  padding: 65px 30px;
}

.ai-analysis-failed > i {
  color: #b6465c;
  background: #ffe8ed;
  border-radius: 18px;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: auto;
  font-size: 24px;
  font-style: normal;
  display: grid;
}

.ai-analysis-failed h3 {
  margin: 16px 0 8px;
}

.ai-analysis-failed p {
  color: #77717e;
}

.ai-analysis-failed button {
  padding: 0 22px;
}

.ai-analysis-context-row {
  padding: 0 2px;
}

.cashier-workspace > .ai-analysis-context-row {
  z-index: 20;
  position: absolute;
  top: 8px;
  right: 20px;
}

.cashier-workspace > .ai-analysis-context-row .ai-analysis-entry > small, .cashier-workspace > .ai-analysis-context-row .ai-analysis-entry__latest {
  display: none;
}

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

@keyframes ai-progress {
  0% {
    transform: translateX(-110%);
  }

  50% {
    transform: translateX(150%);
  }

  100% {
    transform: translateX(300%);
  }
}

@media (max-width: 760px) {
  .ai-analysis-backdrop {
    padding: 12px;
  }

  .ai-analysis-report__body {
    padding: 14px;
  }

  .ai-analysis-hero {
    grid-template-columns: 1fr;
  }

  .ai-analysis-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .ai-analysis-two-column {
    grid-template-columns: 1fr;
  }

  .ai-analysis-chart {
    height: 140px;
  }
}

.ai-analysis-center {
  border: 1px solid var(--ui-border, #e4e1ed);
  background: var(--ui-panel-solid, #fff);
  border-radius: 22px;
  gap: 18px;
  padding: 24px;
  display: grid;
}

.ai-analysis-center__header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  display: flex;
}

.ai-analysis-center__header small {
  color: #6b58c9;
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 850;
}

.ai-analysis-center__header h2 {
  color: var(--ui-text, #24212e);
  margin: 6px 0 5px;
  font-size: 26px;
}

.ai-analysis-center__header p, .ai-analysis-selected-grid article > div > p {
  color: var(--ui-muted, #77727f);
  margin: 0;
  font-size: 12px;
}

.ai-analysis-center__header > strong {
  color: #5d47bd;
  white-space: nowrap;
  background: #eeebfb;
  border-radius: 99px;
  padding: 9px 13px;
  font-size: 11px;
}

.ai-analysis-module-picker {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.ai-analysis-module-picker button {
  border: 1px solid var(--ui-border, #e3e0ea);
  min-height: 76px;
  color: var(--ui-text, #302b3c);
  background: var(--ui-panel-subtle, #faf9fc);
  text-align: left;
  cursor: pointer;
  border-radius: 13px;
  grid-template-columns: 25px 1fr;
  gap: 3px 8px;
  padding: 11px;
  display: grid;
}

.ai-analysis-module-picker button > span {
  color: #6b58c9;
  background: #eeebfb;
  border-radius: 8px;
  grid-row: 1 / 3;
  place-items: center;
  width: 25px;
  height: 25px;
  display: grid;
}

.ai-analysis-module-picker button b {
  align-self: end;
  font-size: 12px;
}

.ai-analysis-module-picker button small {
  color: var(--ui-muted, #77727f);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.ai-analysis-module-picker button.selected {
  background: linear-gradient(140deg, #f5f2ff, #fff8fc);
  border-color: #7560d2;
  box-shadow: 0 7px 20px #6752c71f;
}

.ai-analysis-selected-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  display: grid;
}

.ai-analysis-selected-grid article {
  border: 1px solid var(--ui-border, #e3e0ea);
  background: var(--ui-panel-subtle, #faf9fc);
  border-radius: 17px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 92px;
  padding: 16px 18px;
  display: grid;
}

.ai-analysis-selected-grid h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.ai-analysis-selected-grid .ai-analysis-entry {
  min-height: auto;
  padding: 0;
}

.ai-analysis-selected-grid .ai-analysis-entry > small {
  max-width: 82px;
}

.ai-analysis-unavailable, .ai-analysis-center__empty {
  color: var(--ui-muted, #77727f);
  margin: 0;
  font-size: 11px;
}

.ai-analysis-center__empty {
  border: 1px dashed var(--ui-border, #ddd8e6);
  text-align: center;
  border-radius: 15px;
  padding: 34px;
}

@media (max-width: 1180px) {
  .ai-analysis-module-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ai-analysis-center {
    padding: 16px;
  }

  .ai-analysis-center__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-analysis-module-picker, .ai-analysis-selected-grid {
    grid-template-columns: 1fr;
  }
}

/* [project]/apps/admin/app/member-results.css [app-client] (css) */
.member-results {
  background: #fff;
  border: 1px solid #dfe7e3;
  border-radius: 10px;
  margin-top: 10px;
  overflow: hidden;
}

.result-caption {
  color: #77817c;
  background: #f7f9f8;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 9px;
  display: flex;
}

.result-caption em {
  color: #9aa29e;
  font-style: normal;
}

.member-results > button {
  text-align: left;
  border: 0;
  border-top: 1px solid #edf0ee;
  border-radius: 0;
  grid-template-columns: auto 1fr 140px 60px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  display: grid;
}

.member-results > button:hover {
  background: #f0f8f4;
}

.member-results > button > span:nth-child(2) strong, .member-results > button > span:nth-child(2) small, .member-results > button > span:nth-child(3) small, .member-results > button > span:nth-child(3) b {
  display: block;
}

.member-results small {
  color: #929b96;
  margin-top: 4px;
  font-size: 9px;
}

.member-results > button > span:nth-child(3) {
  text-align: right;
}

.member-results > button > span:nth-child(3) b {
  margin-top: 3px;
  font-size: 10px;
}

.member-results > button > i {
  color: #297556;
  text-align: right;
  font-size: 9px;
  font-style: normal;
}

.member-results > p {
  text-align: center;
  color: #999;
  padding: 16px;
  font-size: 10px;
}

.mini-avatar {
  color: #287354;
  background: #e1f1e9;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 11px;
  font-weight: bold;
  display: grid;
}

.recharge-error {
  font-weight: 600;
  color: #ffb4a9 !important;
  margin: 0 0 10px !important;
  font-size: 10px !important;
}

@media (max-width: 700px) {
  .member-results > button {
    grid-template-columns: auto 1fr 50px;
  }

  .member-results > button > span:nth-child(3) {
    display: none;
  }
}

.member-import-results {
  background: #fff;
  border: 1px solid #dfe6e2;
  border-radius: 9px;
  max-height: 300px;
  margin: 0 22px 18px;
  overflow: auto;
}

.member-import-results > header {
  color: #263b31;
  background: #f4f7f5;
  padding: 11px 13px;
  font-size: 12px;
  position: sticky;
  top: 0;
}

.member-import-results > div {
  border-top: 1px solid #edf1ef;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
  padding: 9px 13px;
  font-size: 11px;
  display: grid;
}

.member-import-results > div.success {
  color: #247451;
}

.member-import-results > div.failure {
  color: #b3433d;
}

/* [project]/apps/admin/app/cashier.css [app-client] (css) */
.pos-layout {
  grid-template-columns: minmax(0, 1fr) 365px;
  align-items: start;
  gap: 16px;
  display: grid;
}

.pos-products, .pos-checkout {
  background: #fff;
  border: 1px solid #e2e8e5;
  border-radius: 14px;
}

.pos-products {
  min-height: 650px;
  padding: 20px;
}

.pos-title {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  display: flex;
}

.pos-title span {
  letter-spacing: 1.4px;
  color: #3a8b68;
  font-size: 9px;
}

.pos-title h2, .pos-order-title h2 {
  margin: 5px 0 0;
  font-size: 16px;
}

.pos-title input {
  border: 1px solid #dce3df;
  border-radius: 9px;
  outline: none;
  width: 250px;
  padding: 10px 12px;
}

.product-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  display: grid;
}

.product-grid > button {
  text-align: left;
  border-color: #e0e6e3;
  min-height: 145px;
  padding: 15px;
  transition: all .15s;
  position: relative;
}

.product-grid > button:hover {
  border-color: #43906f;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #2b765516;
}

.product-grid span {
  color: #287354;
  background: #e8f5ef;
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 8px;
  display: inline-block;
}

.product-grid strong, .product-grid small, .product-grid b {
  display: block;
}

.product-grid strong {
  margin: 14px 0 6px;
  font-size: 13px;
}

.product-grid small {
  color: #9aa29e;
  font-size: 9px;
}

.product-grid b {
  color: #173c2f;
  margin-top: 13px;
  font-size: 17px;
}

.product-grid i {
  color: #fff;
  background: #247451;
  border-radius: 50%;
  place-items: center;
  width: 25px;
  height: 25px;
  font-style: normal;
  display: grid;
  position: absolute;
  bottom: 13px;
  right: 13px;
}

.pos-checkout {
  padding: 18px;
  position: sticky;
  top: 18px;
}

.pos-order-title {
  border-bottom: 1px solid #edf0ee;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  display: flex;
}

.pos-order-title small {
  color: #919a95;
  font-size: 9px;
}

.pos-order-title button {
  color: #988;
  background: none;
  border: 0;
  padding: 5px;
  font-size: 10px;
}

.pos-member {
  border-bottom: 1px solid #edf0ee;
  padding: 14px 0;
  position: relative;
}

.pos-member > label, .pos-payments > label {
  color: #87908b;
  margin-bottom: 8px;
  font-size: 9px;
  display: block;
}

.pos-member > input {
  border: 1px solid #dce3df;
  border-radius: 8px;
  width: 100%;
  padding: 10px;
}

.pos-selected-member {
  background: #f0f8f4;
  border-radius: 9px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  display: grid;
}

.pos-selected-member > span {
  color: #fff;
  background: #287354;
  border-radius: 50%;
  place-items: center;
  width: 31px;
  height: 31px;
  display: grid;
}

.pos-selected-member b, .pos-selected-member small {
  display: block;
}

.pos-selected-member b {
  font-size: 11px;
}

.pos-selected-member small {
  color: #74827a;
  margin-top: 4px;
  font-size: 8px;
}

.pos-selected-member button {
  color: #287354;
  background: none;
  border: 0;
  padding: 4px;
  font-size: 9px;
}

.pos-member-results {
  z-index: 5;
  background: #fff;
  border: 1px solid #dfe6e2;
  border-radius: 9px;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  overflow: hidden;
  box-shadow: 0 12px 28px #1d3c2f20;
}

.pos-member-results button {
  text-align: left;
  border: 0;
  border-bottom: 1px solid #edf0ee;
  border-radius: 0;
  width: 100%;
  padding: 10px;
}

.pos-member-results b, .pos-member-results small {
  display: block;
}

.pos-member-results b {
  font-size: 10px;
}

.pos-member-results small {
  color: #8d9691;
  margin-top: 4px;
  font-size: 8px;
}

.pos-cart {
  min-height: 185px;
  max-height: 285px;
  padding: 8px 0;
  overflow: auto;
}

.pos-cart > p {
  text-align: center;
  color: #a1aaa5;
  padding: 55px 0;
  font-size: 10px;
}

.pos-cart > div {
  border-bottom: 1px solid #f0f2f1;
  grid-template-columns: 1fr auto 70px;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  display: grid;
}

.pos-cart span b, .pos-cart span small {
  display: block;
}

.pos-cart span b {
  font-size: 10px;
}

.pos-cart span small {
  color: #929b96;
  margin-top: 4px;
  font-size: 8px;
}

.pos-cart > div > div {
  align-items: center;
  gap: 6px;
  display: flex;
}

.pos-cart > div > div button {
  border-color: #e1e5e3;
  width: 23px;
  height: 23px;
  padding: 0;
}

.pos-cart em {
  text-align: center;
  min-width: 14px;
  font-size: 10px;
  font-style: normal;
}

.pos-cart > div > strong {
  text-align: right;
  font-size: 11px;
}

.pos-payments {
  border-top: 1px solid #edf0ee;
  padding-top: 13px;
}

.pos-payments > div {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  display: grid;
}

.pos-payments button {
  padding: 9px 4px;
  font-size: 9px;
}

.pos-payments button.selected {
  color: #216848;
  background: #e9f6f0;
  border-color: #398764;
}

.pos-payments button:disabled {
  opacity: .4;
}

.pos-total {
  justify-content: space-between;
  align-items: end;
  padding: 19px 0 13px;
  display: flex;
}

.pos-total span {
  color: #68756e;
  font-size: 11px;
}

.pos-total strong {
  color: #173c2f;
  font-size: 27px;
}

.pos-confirm {
  color: #fff;
  background: #247451;
  border: 0;
  width: 100%;
  height: 45px;
  font-weight: bold;
}

.pos-confirm:disabled {
  opacity: .45;
}

.pos-error {
  color: #b42318;
  text-align: center;
  margin: 0 0 9px;
  font-size: 9px;
}

.pos-success {
  text-align: center;
  background: #fff;
  border: 1px solid #dfe8e3;
  border-radius: 15px;
  max-width: 680px;
  margin: 25px auto;
  padding: 60px;
}

.pos-success > span {
  color: #3b7a5e;
  margin-top: 15px;
  font-size: 11px;
  display: block;
}

.pos-success > h2 {
  margin: 8px;
  font-size: 34px;
}

.pos-success > p {
  color: #777;
  font-size: 12px;
}

.pos-success > div:last-child {
  justify-content: center;
  gap: 8px;
  display: flex;
}

@media (max-width: 1150px) {
  .pos-layout {
    grid-template-columns: 1fr;
  }

  .pos-checkout {
    position: static;
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 850px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pos-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pos-title input {
    width: 100%;
  }
}

@media print {
  .shell > aside, .workspace > header, .pos-success > div:last-child {
    display: none;
  }

  .shell {
    display: block;
  }

  .workspace {
    padding: 0;
  }

  .pos-success {
    border: 0;
    margin: 0;
  }
}

/* [project]/apps/admin/app/commerce.css [app-client] (css) */
.cashier-modebar {
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin-bottom: 16px;
  display: grid;
}

.cashier-modebar > button {
  text-align: left;
  border-color: #dfe6e2;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  display: flex;
}

.cashier-modebar > button > b {
  color: #829088;
  background: #f0f3f1;
  border-radius: 8px;
  place-items: center;
  width: 29px;
  height: 29px;
  font-size: 9px;
  display: grid;
}

.cashier-modebar strong, .cashier-modebar small {
  display: block;
}

.cashier-modebar strong {
  font-size: 12px;
}

.cashier-modebar small {
  color: #8f9893;
  margin-top: 4px;
  font-size: 8px;
}

.cashier-modebar > button.active {
  color: #fff;
  background: #17382d;
  border-color: #17382d;
  box-shadow: 0 8px 24px #15382c22;
}

.cashier-modebar > button.active > b {
  color: #12382a;
  background: #6dd2a3;
}

.cashier-modebar > button.active small {
  color: #a8c7ba;
}

.modern-pos {
  grid-template-columns: minmax(0, 1fr) 410px;
  align-items: start;
  gap: 14px;
  display: grid;
}

.catalog-pane, .settlement-pane {
  background: #fff;
  border: 1px solid #e1e7e4;
  border-radius: 14px;
}

.catalog-pane {
  min-height: 640px;
  padding: 17px;
}

.catalog-toolbar {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
  display: flex;
}

.kind-tabs {
  background: #f3f5f4;
  border-radius: 9px;
  gap: 5px;
  padding: 4px;
  display: flex;
}

.kind-tabs button {
  background: none;
  border: 0;
  padding: 7px 13px;
  font-size: 10px;
}

.kind-tabs button.active {
  color: #216a4c;
  background: #fff;
  box-shadow: 0 2px 8px #1d3c3012;
}

.catalog-toolbar > input {
  border: 1px solid #dce3df;
  border-radius: 9px;
  width: 250px;
  padding: 9px 11px;
}

.modern-product-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

.modern-product-grid > button {
  text-align: left;
  min-height: 145px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.modern-product-grid > button:hover {
  border-color: #4b9a76;
  box-shadow: 0 8px 22px #1d5f4415;
}

.modern-product-grid span {
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 8px;
}

.modern-product-grid span.service {
  color: #237152;
  background: #e6f4ed;
}

.modern-product-grid span.physical {
  color: #4c5b9b;
  background: #edf0fa;
}

.modern-product-grid strong, .modern-product-grid small, .modern-product-grid b, .modern-product-grid em {
  display: block;
}

.modern-product-grid strong {
  margin: 13px 0 5px;
  font-size: 12px;
}

.modern-product-grid small {
  color: #929a96;
  font-size: 8px;
}

.modern-product-grid b {
  margin-top: 12px;
  font-size: 17px;
}

.modern-product-grid em {
  color: #7d8983;
  margin-top: 5px;
  font-size: 8px;
  font-style: normal;
}

.modern-product-grid i {
  color: #fff;
  text-align: center;
  background: #af493f;
  width: 85px;
  padding: 3px;
  font-size: 7px;
  font-style: normal;
  position: absolute;
  top: 8px;
  right: -26px;
  transform: rotate(38deg);
}

.settlement-pane {
  padding: 16px;
  position: sticky;
  top: 16px;
}

.customer-box {
  border-bottom: 1px solid #edf0ee;
  padding-bottom: 13px;
  position: relative;
}

.customer-heading {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
  display: flex;
}

.customer-heading > span {
  font-size: 10px;
  font-weight: bold;
}

.customer-heading > div {
  display: flex;
}

.customer-heading button {
  border: 0;
  padding: 5px 10px;
  font-size: 8px;
}

.customer-heading button.active {
  color: #226b4d;
  background: #e5f4ec;
}

.customer-box > input {
  border: 1px solid #dce3df;
  border-radius: 8px;
  width: 100%;
  padding: 9px 10px;
}

.member-card {
  background: #eff8f4;
  border: 1px solid #d6ebdf;
  border-radius: 9px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  display: grid;
}

.member-card > span {
  color: #fff;
  background: #277253;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  display: grid;
}

.member-card b, .member-card small {
  display: block;
}

.member-card b {
  font-size: 10px;
}

.member-card small {
  color: #73827a;
  margin-top: 4px;
  font-size: 8px;
}

.member-card button {
  color: #277253;
  background: none;
  border: 0;
  padding: 3px;
  font-size: 8px;
}

.member-dropdown {
  z-index: 5;
  background: #fff;
  border-radius: 8px;
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  box-shadow: 0 10px 25px #163a2c22;
}

.member-dropdown button {
  text-align: left;
  border: 0;
  border-radius: 0;
  width: 100%;
}

.member-dropdown b, .member-dropdown small {
  display: block;
}

.member-dropdown b {
  font-size: 9px;
}

.member-dropdown small {
  color: #89948e;
  font-size: 8px;
}

.checkout-lines {
  min-height: 190px;
  max-height: 310px;
  overflow: auto;
}

.checkout-line {
  border-bottom: 1px solid #eff1f0;
  grid-template-columns: 1fr auto 65px;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  display: grid;
}

.checkout-line > div:first-child {
  padding-left: 13px;
  position: relative;
}

.checkout-line > div:first-child > span:first-child {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 3px;
  left: 0;
}

.service-dot {
  background: #40a277;
}

.goods-dot {
  background: #7183c7;
}

.checkout-line b, .checkout-line small, .checkout-line label, .checkout-line em {
  display: block;
}

.checkout-line b {
  font-size: 10px;
}

.checkout-line small {
  color: #919a95;
  margin-top: 3px;
  font-size: 8px;
}

.checkout-line label {
  color: #287354;
  margin-top: 5px;
  font-size: 8px;
}

.checkout-line label input {
  accent-color: #287354;
}

.checkout-line em {
  color: #b3453e;
  margin-top: 4px;
  font-size: 7px;
  font-style: normal;
}

.checkout-line > div:nth-child(2) {
  align-items: center;
  gap: 5px;
  display: flex;
}

.checkout-line > div:nth-child(2) button {
  width: 22px;
  height: 22px;
  padding: 0;
}

.checkout-line > div:nth-child(2) span {
  font-size: 9px;
}

.checkout-line > strong {
  text-align: right;
  font-size: 10px;
}

.empty-cart {
  text-align: center;
  color: #95a09a;
  padding: 60px 0;
}

.empty-cart b, .empty-cart span {
  display: block;
}

.empty-cart b {
  font-size: 11px;
}

.empty-cart span {
  margin-top: 6px;
  font-size: 8px;
}

.settlement-summary {
  border-top: 1px solid #edf0ee;
  border-bottom: 1px solid #edf0ee;
  padding: 10px 0;
}

.settlement-summary > div {
  justify-content: space-between;
  padding: 4px 0;
  font-size: 9px;
  display: flex;
}

.settlement-summary .discount {
  color: #26805b;
}

.settlement-summary .restricted {
  color: #b24a42;
}

.payment-selector {
  padding: 11px 0;
}

.payment-selector > span {
  color: #707d76;
  margin-bottom: 7px;
  font-size: 9px;
  display: block;
}

.payment-selector > div {
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  display: grid;
}

.payment-selector button {
  padding: 8px 3px;
  font-size: 8px;
}

.payment-selector button.active {
  color: #226b4d;
  background: #e4f3eb;
  border-color: #4a9874;
}

.payment-selector button:disabled {
  opacity: .4;
}

.payment-selector small {
  color: #718079;
  margin-top: 7px;
  font-size: 8px;
  display: block;
}

.grand-total {
  justify-content: space-between;
  align-items: end;
  padding: 8px 0 12px;
  display: flex;
}

.grand-total span {
  font-size: 10px;
}

.grand-total strong {
  font-size: 26px;
}

.checkout-submit {
  color: #fff;
  background: #247451;
  border: 0;
  width: 100%;
  height: 43px;
  font-weight: bold;
}

.checkout-submit:disabled {
  opacity: .4;
}

.quick-cashier {
  grid-template-columns: 1fr 340px;
  gap: 15px;
  display: grid;
}

.quick-cashier > section, .quick-cashier > aside, .pass-purchase > section, .pass-purchase > aside {
  background: #fff;
  border: 1px solid #e2e7e4;
  border-radius: 14px;
  padding: 25px;
}

.quick-cashier > section > span, .pass-heading span {
  color: #2c815e;
  letter-spacing: 1.5px;
  font-size: 9px;
}

.quick-cashier h2, .pass-heading h2 {
  margin: 8px 0;
  font-size: 19px;
}

.quick-cashier > section > p {
  color: #88928d;
  font-size: 10px;
}

.quick-amount {
  margin: 35px 0 25px;
  position: relative;
}

.quick-amount b {
  font-size: 28px;
  position: absolute;
  top: 18px;
  left: 20px;
}

.quick-amount input {
  border: 1px solid #cedbd5;
  border-radius: 13px;
  width: 100%;
  height: 76px;
  padding: 0 20px 0 58px;
  font-size: 34px;
  font-weight: bold;
}

.quick-cashier > section > label {
  color: #7f8a84;
  margin-bottom: 7px;
  font-size: 9px;
  display: block;
}

.quick-cashier > section > input {
  border: 1px solid #dce3df;
  border-radius: 9px;
  width: 100%;
  padding: 11px;
}

.quick-cashier aside h3, .pass-purchase aside h3 {
  margin: 0 0 15px;
  font-size: 14px;
}

.quick-member-search {
  gap: 4px;
  display: grid;
  position: relative;
}

.quick-member-search input {
  border: 1px solid #dce3df;
  border-radius: 8px;
  width: 100%;
  padding: 10px;
}

.quick-member-search button {
  text-align: left;
  padding: 8px;
  font-size: 9px;
}

.quick-payments {
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 16px 0;
  display: grid;
}

.quick-payments button {
  padding: 9px 3px;
  font-size: 8px;
}

.quick-payments button.active {
  color: #226b4d;
  background: #e4f3eb;
  border-color: #4a9874;
}

.quick-payments button:disabled {
  opacity: .35;
}

.quick-total {
  justify-content: space-between;
  align-items: end;
  margin: 25px 0;
  display: flex;
}

.quick-total span {
  font-size: 10px;
}

.quick-total b {
  font-size: 25px;
}

.quick-cashier aside > p, .business-message {
  color: #287354;
  font-size: 9px;
}

.business-tabs {
  background: #edf1ef;
  border-radius: 9px;
  gap: 5px;
  width: max-content;
  margin-bottom: 14px;
  padding: 4px;
  display: flex;
}

.business-tabs button {
  background: none;
  border: 0;
  font-size: 9px;
}

.business-tabs button.active {
  color: #247451;
  background: #fff;
}

.pass-purchase {
  grid-template-columns: 1fr 340px;
  gap: 14px;
  display: grid;
}

.pass-plan-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
  display: grid;
}

.pass-plan-grid > button {
  text-align: left;
  padding: 17px;
}

.pass-plan-grid > button.active {
  background: #eef8f3;
  border: 2px solid #328461;
}

.pass-plan-grid span, .pass-plan-grid strong, .pass-plan-grid p, .pass-plan-grid b, .pass-plan-grid small {
  display: block;
}

.pass-plan-grid span {
  color: #75837b;
  font-size: 8px;
}

.pass-plan-grid strong {
  margin: 11px 0;
  font-size: 13px;
}

.pass-plan-grid p {
  color: #297656;
  font-size: 9px;
}

.pass-plan-grid b {
  margin: 14px 0 5px;
  font-size: 22px;
}

.pass-plan-grid small {
  color: #8f9893;
  font-size: 8px;
}

.pass-summary {
  color: #fff;
  background: #17382d;
  border-radius: 11px;
  margin: 17px 0;
  padding: 15px;
}

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

.pass-summary span {
  color: #a9c3b8;
  font-size: 8px;
}

.pass-summary b {
  margin: 7px 0;
  font-size: 11px;
}

.pass-summary strong {
  font-size: 24px;
}

.catalog-hero {
  color: #fff;
  background: linear-gradient(120deg, #17382d, #2d7456);
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 24px 27px;
  display: flex;
}

.catalog-hero > div:first-child span {
  color: #7bd1a9;
  letter-spacing: 1.5px;
  font-size: 8px;
}

.catalog-hero h2 {
  margin: 8px 0;
  font-size: 21px;
}

.catalog-hero p {
  color: #b3d0c3;
  font-size: 10px;
}

.catalog-hero > div:last-child {
  gap: 8px;
  display: flex;
}

.catalog-hero > div:last-child > button {
  text-align: left;
  align-items: center;
  gap: 8px;
  padding: 11px;
  display: flex;
}

.catalog-hero > div:last-child > button > b {
  color: #277354;
  font-size: 18px;
}

.catalog-hero strong, .catalog-hero small {
  display: block;
}

.catalog-hero strong {
  font-size: 9px;
}

.catalog-hero small {
  color: #85918b;
  margin-top: 3px;
  font-size: 7px;
}

.catalog-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0;
  display: grid;
}

.catalog-stats article {
  background: #fff;
  border: 1px solid #e1e6e3;
  border-radius: 11px;
  padding: 17px;
}

.catalog-stats span, .catalog-stats strong, .catalog-stats small {
  display: block;
}

.catalog-stats span {
  color: #818b86;
  font-size: 9px;
}

.catalog-stats strong {
  margin: 8px 0;
  font-size: 22px;
}

.catalog-stats small {
  color: #30805e;
  font-size: 8px;
}

.catalog-list {
  background: #fff;
  border: 1px solid #e1e6e3;
  border-radius: 13px;
  overflow: hidden;
}

.catalog-list-head {
  border-bottom: 1px solid #e9edeb;
  justify-content: space-between;
  align-items: center;
  padding: 17px 19px;
  display: flex;
}

.catalog-list-head h2 {
  margin: 0;
  font-size: 14px;
}

.catalog-list-head p {
  color: #929b96;
  font-size: 8px;
}

.catalog-list-head > div:last-child {
  gap: 4px;
  display: flex;
}

.catalog-list-head button {
  padding: 7px 9px;
  font-size: 8px;
}

.catalog-list-head button.active {
  color: #247451;
  background: #e7f4ed;
}

.catalog-table > div {
  border-bottom: 1px solid #edf0ee;
  grid-template-columns: 35px 1.5fr .8fr .8fr 1fr 60px;
  align-items: center;
  gap: 12px;
  padding: 13px 19px;
  display: grid;
}

.catalog-table > div > span:first-child {
  border-radius: 8px;
  place-items: center;
  width: 29px;
  height: 29px;
  font-size: 9px;
  display: grid;
}

.service-icon {
  color: #277354;
  background: #e3f3eb;
}

.goods-icon {
  color: #5263a0;
  background: #e9edf9;
}

.pass-icon {
  color: #93691d;
  background: #fbf0d7;
}

.catalog-table b, .catalog-table small {
  display: block;
}

.catalog-table b {
  font-size: 10px;
}

.catalog-table small {
  color: #919a95;
  margin-top: 4px;
  font-size: 8px;
}

.catalog-table .allowed, .catalog-table .restricted {
  font-size: 8px;
}

.catalog-table .allowed {
  color: #267857;
}

.catalog-table .restricted {
  color: #b14a42;
}

.catalog-table button {
  padding: 6px;
  font-size: 8px;
}

.catalog-form {
  background: #fff;
  border-radius: 15px;
  width: min(780px, 100vw - 40px);
  max-height: 90vh;
  overflow: auto;
}

.catalog-form-head {
  border-bottom: 1px solid #e5eae7;
  justify-content: space-between;
  align-items: center;
  padding: 18px 21px;
  display: flex;
}

.catalog-form-head span {
  color: #2c805e;
  letter-spacing: 1.3px;
  font-size: 8px;
}

.catalog-form-head h2 {
  margin: 5px 0 0;
  font-size: 17px;
}

.catalog-form-head button {
  border: 0;
  font-size: 20px;
}

.catalog-form-body {
  background: #f8faf9;
  padding: 20px;
}

.form-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.rule-cards {
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 17px;
  display: grid;
}

.rule-cards label {
  background: #fff;
  border: 1px solid #dfe6e2;
  border-radius: 9px;
  align-items: center;
  gap: 9px;
  padding: 12px;
  display: flex;
}

.rule-cards input {
  accent-color: #247451;
}

.rule-cards b, .rule-cards small {
  display: block;
}

.rule-cards b {
  font-size: 9px;
}

.rule-cards small {
  color: #8b9690;
  margin-top: 4px;
  font-size: 7px;
}

.catalog-form-footer {
  justify-content: flex-end;
  gap: 7px;
  padding: 13px 20px;
  display: flex;
}

@media (max-width: 1150px) {
  .modern-pos {
    grid-template-columns: 1fr;
  }

  .settlement-pane {
    position: static;
  }

  .modern-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .catalog-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .catalog-hero > div:last-child {
    width: 100%;
  }

  .catalog-hero > div:last-child > button {
    flex: 1;
  }
}

@media (max-width: 850px) {
  .cashier-modebar {
    grid-template-columns: 1fr;
  }

  .modern-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-cashier, .pass-purchase {
    grid-template-columns: 1fr;
  }

  .catalog-hero > div:last-child {
    flex-direction: column;
  }

  .catalog-table {
    overflow: auto;
  }

  .catalog-table > div {
    min-width: 760px;
  }

  .catalog-toolbar {
    flex-direction: column;
  }

  .catalog-toolbar > input {
    width: 100%;
  }
}

.cashier-modebar {
  grid-template-columns: repeat(4, 1fr);
}

.commission-line select, .quick-cashier select, .benefit-deductions select, .benefit-deductions input {
  background: #fff;
  border: 1px solid #dce3df;
  border-radius: 7px;
  width: 100%;
  padding: 6px 8px;
  font-size: 8px;
}

.commission-line select {
  margin-top: 6px;
}

.benefit-deductions {
  background: #f7faf8;
  border: 1px solid #e1e9e5;
  border-radius: 9px;
  gap: 7px;
  margin: 8px 0;
  padding: 10px;
  display: grid;
}

.benefit-deductions label > span {
  color: #718079;
  margin-bottom: 5px;
  font-size: 8px;
  display: block;
}

.benefit-deductions > small {
  color: #247451;
  font-size: 8px;
}

.coupon-code {
  grid-template-columns: 1fr auto;
  gap: 5px;
  display: grid;
}

.coupon-code button {
  padding: 6px 10px;
  font-size: 8px;
}

.mixed-payment-dialog {
  background: #fff;
  border-radius: 16px;
  width: min(620px, 100vw - 32px);
  overflow: hidden;
  box-shadow: 0 30px 80px #10271f45;
}

.mixed-payment-head {
  border-bottom: 1px solid #e6ebe8;
  justify-content: space-between;
  padding: 22px 24px;
  display: flex;
}

.mixed-payment-head span {
  letter-spacing: 1.5px;
  color: #27805c;
  font-size: 8px;
}

.mixed-payment-head h2 {
  margin: 5px 0;
  font-size: 19px;
}

.mixed-payment-head p {
  color: #84908a;
  margin: 0;
  font-size: 9px;
}

.mixed-payment-head > button {
  border: 0;
  font-size: 21px;
}

.mixed-payment-total {
  color: #fff;
  background: #17382d;
  justify-content: space-between;
  align-items: end;
  padding: 18px 24px;
  display: flex;
}

.mixed-payment-total span {
  color: #b3c9c0;
  font-size: 10px;
}

.mixed-payment-total strong {
  font-size: 28px;
}

.mixed-payment-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  padding: 20px 24px;
  display: grid;
}

.mixed-payment-grid > label {
  border: 1px solid #dfe6e2;
  border-radius: 9px;
  padding: 11px;
}

.mixed-payment-grid > label.disabled {
  opacity: .45;
}

.mixed-payment-grid > label > span {
  justify-content: space-between;
  font-size: 9px;
  font-weight: bold;
  display: flex;
}

.mixed-payment-grid small {
  color: #75827c;
  font-size: 7px;
}

.mixed-payment-grid > label > div {
  align-items: center;
  margin-top: 8px;
  display: flex;
}

.mixed-payment-grid input {
  border: 0;
  border-bottom: 1px solid #dce3df;
  outline: none;
  width: 100%;
  padding: 6px;
  font-size: 16px;
}

.payment-balance {
  color: #a33d35;
  background: #fff1ef;
  border-radius: 8px;
  justify-content: space-between;
  margin: 0 24px;
  padding: 11px 13px;
  font-size: 9px;
  display: flex;
}

.payment-balance.valid {
  color: #247451;
  background: #eaf7f0;
}

.mixed-payment-actions {
  justify-content: flex-end;
  gap: 7px;
  padding: 18px 24px;
  display: flex;
}

.mixed-payment-actions button {
  padding: 9px 15px;
}

.room-cashier {
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: start;
  gap: 14px;
  display: grid;
}

.room-board, .room-session-panel {
  background: #fff;
  border: 1px solid #e1e7e4;
  border-radius: 14px;
  padding: 18px;
}

.room-session-panel {
  position: sticky;
  top: 16px;
}

.room-board-head {
  justify-content: space-between;
  gap: 15px;
  display: flex;
}

.room-board-head span {
  letter-spacing: 1.5px;
  color: #27805c;
  font-size: 8px;
}

.room-board-head h2 {
  margin: 6px 0;
  font-size: 18px;
}

.room-board-head p {
  color: #85908a;
  font-size: 9px;
}

.room-board-head > div:last-child {
  gap: 6px;
  min-width: 260px;
  display: grid;
}

.room-board select, .room-add-item select, .table-create input {
  background: #fff;
  border: 1px solid #dce3df;
  border-radius: 8px;
  padding: 8px;
  font-size: 9px;
}

.table-create {
  grid-template-columns: 130px 1fr auto;
  gap: 6px;
  margin: 15px 0;
  display: grid;
}

.room-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  display: grid;
}

.room-grid > button {
  text-align: left;
  min-height: 112px;
  padding: 14px;
  position: relative;
}

.room-grid > button.occupied {
  color: #fff;
  background: #17382d;
  border-color: #17382d;
}

.room-grid span, .room-grid strong, .room-grid small {
  display: block;
}

.room-grid span {
  color: #4b8c70;
  font-size: 7px;
}

.room-grid strong {
  margin: 11px 0;
  font-size: 14px;
}

.room-grid small {
  color: #8b9690;
  font-size: 8px;
}

.room-grid .occupied small {
  color: #aec7bc;
}

.room-grid em {
  color: #fff;
  background: #dc5146;
  border-radius: 10px;
  padding: 4px 6px;
  font-size: 7px;
  font-style: normal;
  position: absolute;
  top: 8px;
  right: 8px;
}

.room-session-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.room-session-title span {
  color: #2a7a59;
  font-size: 8px;
}

.room-session-title h2 {
  margin: 4px 0;
  font-size: 17px;
}

.room-session-title > em {
  color: #247451;
  background: #e8f5ee;
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 8px;
  font-style: normal;
}

.room-session-title > em.overdue {
  color: #b54139;
  background: #fff0ee;
}

.room-clock {
  text-align: center;
  background: #f3f8f5;
  border-radius: 11px;
  margin: 12px 0;
  padding: 20px;
  display: grid;
}

.room-clock strong {
  font-size: 38px;
}

.room-clock span, .room-clock small {
  color: #7f8c85;
  font-size: 8px;
}

.room-clock b {
  margin: 8px;
  font-size: 13px;
}

.room-add-item {
  grid-template-columns: 1fr 1fr auto;
  gap: 5px;
  display: grid;
}

.room-add-item button {
  font-size: 8px;
}

.room-items {
  max-height: 220px;
  margin: 10px 0;
  overflow: auto;
}

.room-items > div {
  border-bottom: 1px solid #edf0ee;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  display: grid;
}

.room-items b, .room-items small {
  display: block;
}

.room-items b {
  font-size: 9px;
}

.room-items small {
  color: #89948e;
  margin-top: 3px;
  font-size: 7px;
}

.room-items strong {
  font-size: 9px;
}

.room-items button {
  padding: 4px;
  font-size: 7px;
}

@media (max-width: 1150px) {
  .room-cashier {
    grid-template-columns: 1fr;
  }

  .room-session-panel {
    position: static;
  }
}

@media (max-width: 850px) {
  .cashier-modebar {
    display: flex;
  }

  .room-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .room-board-head {
    flex-direction: column;
  }

  .mixed-payment-grid {
    grid-template-columns: 1fr;
  }
}

.table-rate-settings {
  grid-template-columns: minmax(0, 1fr) 1fr;
  gap: 14px;
  margin-top: 14px;
  display: grid;
}

.table-rate-settings > form, .table-rate-settings > section {
  background: #fff;
  border: 1px solid #e1e7e4;
  border-radius: 13px;
  padding: 20px;
}

.table-rate-settings label > span {
  color: #748079;
  margin-bottom: 5px;
  font-size: 8px;
  display: block;
}

.table-rate-settings input, .table-rate-settings select {
  background: #fff;
  border: 1px solid #dce3df;
  border-radius: 8px;
  width: 100%;
  padding: 9px;
}

.table-rate-settings form > button {
  margin-top: 14px;
}

.table-rate-settings h3 {
  margin-top: 0;
  font-size: 14px;
}

.table-rate-settings article {
  border-bottom: 1px solid #edf0ee;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  display: grid;
}

.table-rate-settings article > span {
  color: #247451;
  background: #e7f4ed;
  border-radius: 7px;
  padding: 5px;
  font-size: 8px;
}

.table-rate-settings article b, .table-rate-settings article small {
  display: block;
}

.table-rate-settings article b {
  font-size: 10px;
}

.table-rate-settings article small {
  color: #89938e;
  margin-top: 3px;
  font-size: 7px;
}

.table-rate-settings article > strong {
  text-align: right;
  font-size: 13px;
}

@media (max-width: 900px) {
  .table-rate-settings {
    grid-template-columns: 1fr;
  }
}

.room-session-title > em.reminding {
  color: #9b6a08;
  background: #fff6dc;
}

.room-category-filter {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  margin: 14px 0;
  padding: 7px;
  display: flex;
  overflow: auto;
}

.room-category-filter > button {
  min-height: 30px;
  color: var(--ui-muted);
  white-space: nowrap;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-size: 8px;
  display: flex;
}

.room-category-filter > button.active {
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-soft);
}

.room-category-filter button > i, .room-category-filter > span i {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.room-category-filter > span {
  color: var(--ui-muted);
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 7px;
  display: flex;
}

.room-category-filter .free-dot {
  background: var(--ui-accent);
}

.room-category-filter .booked-dot {
  background: #d99a2b;
}

.room-category-filter .busy-dot {
  background: #d25c4e;
}

.room-grid > .room-card {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-width: 0;
  min-height: 154px;
  color: var(--ui-text);
  box-shadow: none;
  border-radius: 11px;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.room-grid > .room-card:before {
  content: "";
  background: var(--room-color);
  width: 4px;
  position: absolute;
  inset: 0 auto 0 0;
}

.room-grid > .room-card.occupied {
  border-color: color-mix(in srgb,var(--room-color) 60%,var(--ui-border));
  background: color-mix(in srgb,var(--room-color) 9%,var(--ui-panel-solid));
  color: var(--ui-text);
}

.room-grid > .room-card.reserved {
  border-color: color-mix(in srgb,#d99a2b 60%,var(--ui-border));
  background: color-mix(in srgb,#d99a2b 7%,var(--ui-panel-solid));
}

.room-card-main {
  flex: 1;
  padding: 12px 13px 8px 16px;
  position: relative;
}

.room-card.occupied .room-card-main {
  cursor: pointer;
}

.room-card-main > header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.room-card-main > header span {
  color: var(--room-color);
  font-size: 7px;
  font-weight: 700;
}

.room-card-main > header em {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 7px;
  position: static;
}

.room-card.reserved .room-card-main > header em {
  color: #9b6613;
  background: #fff3d8;
}

.room-card.occupied .room-card-main > header em {
  color: #a84538;
  background: #fff0ec;
}

.room-card-main > strong {
  margin: 10px 0 3px;
  font-size: 14px;
  display: block;
}

.room-card-main > small {
  color: var(--ui-muted);
  font-size: 7px;
  display: block;
}

.room-card-main > p {
  color: var(--ui-muted);
  margin: 9px 0 0;
  font-size: 8px;
  line-height: 1.4;
}

.room-time-alert {
  color: #fff;
  background: #d95347;
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 7px;
  position: absolute;
  bottom: 8px;
  right: 12px;
}

.room-card > footer {
  border-top: 1px solid var(--ui-border);
  gap: 5px;
  padding: 7px 10px 9px 14px;
  display: flex;
}

.room-card > footer button {
  flex: 1;
  min-height: 28px;
  padding: 5px;
  font-size: 8px;
}

.room-board-empty {
  border: 1px dashed var(--ui-border);
  background: var(--ui-panel-soft);
  color: var(--ui-muted);
  text-align: center;
  border-radius: 11px;
  grid-column: 1 / -1;
  padding: 45px 20px;
  font-size: 9px;
}

.room-action-modal {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: min(650px, 100vw - 28px);
  max-height: calc(100vh - 32px);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 15px;
  overflow: auto;
}

.room-action-modal > header {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: flex-start;
  padding: 17px 20px;
  display: flex;
}

.room-action-modal > header span {
  color: var(--ui-accent);
  letter-spacing: 1.5px;
  font-size: 8px;
  font-weight: 800;
}

.room-action-modal > header h2 {
  margin: 5px 0 3px;
  font-size: 17px;
}

.room-action-modal > header p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 8px;
}

.room-action-modal > header > button {
  color: var(--ui-text);
  background: none;
  border: 0;
  font-size: 20px;
}

.room-open-form, .room-reserve-form {
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  padding: 18px 20px;
  display: grid;
}

.room-open-form label, .room-reserve-form label {
  color: var(--ui-muted);
  font-size: 9px;
}

.room-open-form input, .room-open-form select, .room-reserve-form input, .room-reserve-form select {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 100%;
  height: 38px;
  color: var(--ui-text);
  border-radius: 8px;
  margin-top: 6px;
  padding: 0 10px;
  display: block;
}

.room-arrival-card, .room-rate-preview, .room-note-field {
  grid-column: 1 / -1;
}

.room-arrival-card {
  border: 1px solid color-mix(in srgb,#d99a2b 35%,var(--ui-border));
  background: color-mix(in srgb,#d99a2b 8%,var(--ui-panel-solid));
  border-radius: 9px;
  gap: 4px;
  padding: 11px 13px;
  display: grid;
}

.room-arrival-card b {
  font-size: 11px;
}

.room-arrival-card span, .room-arrival-card small {
  color: var(--ui-muted);
  font-size: 8px;
}

.room-rate-preview {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  padding: 11px 13px;
  font-size: 9px;
  display: flex;
}

.room-open-form > footer, .room-reserve-form > footer {
  border-top: 1px solid var(--ui-border);
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 9px;
  display: flex;
}

.room-open-form > footer button, .room-reserve-form > footer button {
  min-height: 35px;
  padding: 7px 13px;
  font-size: 9px;
}

@media (max-width: 650px) {
  .room-category-filter > span {
    display: none;
  }

  .room-open-form, .room-reserve-form, .room-grid {
    grid-template-columns: 1fr;
  }
}

/* [project]/apps/admin/app/catalog-center.css [app-client] (css) */
.catalog-entry-hero {
  align-items: flex-start;
}

.catalog-entry-grid {
  grid-template-columns: repeat(5, minmax(125px, 1fr));
  width: min(820px, 72%);
  gap: 10px !important;
  display: grid !important;
}

.catalog-entry-button {
  justify-content: flex-start;
  transition: all .2s;
  box-shadow: 0 8px 22px #071d1438;
  background: #fff !important;
  border: 1px solid #ffffff38 !important;
  min-height: 82px !important;
}

.catalog-entry-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #071d1450;
}

.catalog-entry-button > b {
  text-align: center;
  height: 35px;
  line-height: 35px;
  color: #176b49 !important;
  background: #dff6ea !important;
  border-radius: 50% !important;
  width: 35px !important;
  font-size: 27px !important;
  font-weight: 900 !important;
}

.catalog-entry-button > strong {
  color: #17382d;
  font-size: 14px;
  font-weight: 800;
}

.category-manager-button {
  font-weight: 700;
  color: #1d6f4f !important;
  background: #e4f4ec !important;
  border-color: #8ac7aa !important;
  padding: 9px 16px !important;
}

.code-generator {
  grid-template-columns: 1fr auto;
  gap: 7px;
  display: grid;
}

.code-generator button {
  color: #247451;
  white-space: nowrap;
  border-color: #87bea5;
}

.package-service-picker {
  background: #fff;
  border: 1px solid #dce5e0;
  border-radius: 11px;
  grid-column: 1 / -1;
  max-height: 310px;
  padding: 14px;
  overflow: auto;
}

.package-service-picker > span {
  color: #66766e;
  margin-bottom: 9px;
  font-size: 10px;
  display: block;
}

.package-service-picker label {
  border-top: 1px solid #eef2f0;
  grid-template-columns: auto 1fr 85px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.package-service-picker label > input:first-child {
  width: auto;
  height: auto;
}

.package-service-picker b, .package-service-picker small {
  display: block;
}

.package-service-picker small {
  color: #849089;
  margin-top: 3px;
}

.category-manager {
  width: min(760px, 100vw - 40px);
}

.category-list {
  max-height: 65vh;
  padding: 16px 20px;
  overflow: auto;
}

.category-list section {
  border: 1px solid #e0e7e3;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.category-row {
  background: #fff;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  display: grid;
}

.category-row.child {
  background: #f8faf9;
  border-top: 1px solid #edf1ef;
  padding-left: 42px;
}

.category-row > span {
  color: #267354;
  background: #e5f4ec;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

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

.category-row small {
  color: #89948e;
  margin-top: 4px;
  font-size: 8px;
}

.category-row button {
  padding: 6px 9px;
  font-size: 9px;
}

.category-editor-layer {
  z-index: 12;
  background: #10231d80;
}

.category-editor {
  width: min(650px, 100vw - 40px);
}

.category-type-note {
  color: #66776e;
  margin: 18px 0 8px;
  font-size: 10px;
}

@media (max-width: 1200px) {
  .catalog-entry-grid {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }
}

@media (max-width: 700px) {
  .catalog-entry-grid {
    grid-template-columns: 1fr;
  }
}

.catalog-entry-hero {
  justify-content: flex-start;
  margin-bottom: 16px;
}

.catalog-hero.catalog-entry-hero > .catalog-entry-copy {
  width: auto;
  display: block;
}

.catalog-entry-button {
  color: var(--ui-text);
  background: var(--ui-panel-solid) !important;
  border-color: color-mix(in srgb,
    var(--ui-on-accent) 28%,
    transparent) !important;
}

.catalog-entry-button > b, .category-row > span {
  color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
}

.catalog-entry-button > strong {
  color: var(--ui-text);
}

.catalog-list-title {
  padding-bottom: 14px;
}

.catalog-kind-tabs {
  background: #f3f8f5;
  gap: 4px;
  padding: 12px 18px 0;
  display: flex;
  overflow-x: auto;
}

.catalog-kind-tabs > div {
  background: #fff;
  border: 1px solid #d9e2dd;
  border-radius: 9px;
  flex: none;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.catalog-kind-tabs > div.active {
  z-index: 1;
  box-shadow: none;
  border-color: #73ad91 #73ad91 #e9f6ef;
  border-radius: 9px 9px 0 0;
  position: relative;
}

.catalog-kind-tabs > div > button {
  color: #43564d;
  border: 0;
  border-radius: 0;
  min-width: 105px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
}

.catalog-kind-tabs > div > span {
  border-left: 1px solid #e3e9e6;
  display: flex;
}

.catalog-kind-tabs > div > span button {
  color: #557067;
  border: 0;
  border-radius: 0;
  width: 25px;
  height: 34px;
  padding: 0;
  font-size: 19px;
}

.catalog-kind-tabs > div > span button:disabled {
  opacity: .25;
  cursor: not-allowed;
}

.catalog-filterbar {
  background: #e9f6ef;
  border-top: 1px solid #73ad91;
  border-bottom: 1px solid #cfe4da;
  grid-template-columns: 66px 112px 148px 148px 190px minmax(170px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  display: grid;
}

.catalog-filterbar label > span {
  color: #50645a;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.catalog-filterbar select, .catalog-filterbar input {
  color: #20342b;
  background: #fff;
  border: 1px solid #d4ded9;
  border-radius: 8px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font-size: 12px;
}

.catalog-search > div {
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 7px;
  display: grid;
}

.catalog-search button {
  height: 40px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.catalog-category-control > span {
  color: #50645a;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.catalog-category-control {
  min-width: 0;
  box-shadow: none;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.catalog-category-control button {
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 40px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  padding: 0 8px !important;
}

.catalog-add-button {
  grid-template-rows: 32px 18px;
  place-content: center;
  gap: 0;
  width: 62px;
  height: 62px;
  display: grid;
  border: 2px solid var(--catalog-kind-line) !important;
  background: var(--ui-panel-solid) !important;
  min-height: 62px !important;
  color: var(--ui-accent) !important;
  border-radius: 12px !important;
  padding: 4px !important;
}

.catalog-add-button b {
  font-family: Arial, sans-serif;
  font-size: 31px;
  font-weight: 950;
  line-height: 30px;
}

.catalog-add-button span {
  font-size: 13px;
  font-weight: 900;
  line-height: 18px;
}

.catalog-add-button:hover {
  box-shadow: 0 6px 16px rgba(var(--ui-accent-rgb), .18);
  background: var(--ui-accent) !important;
  color: var(--ui-on-accent) !important;
}

.catalog-transfer-actions {
  justify-content: flex-end;
  gap: 7px;
  display: flex;
}

.catalog-transfer-actions button {
  color: #206b4c;
  border-color: #86b99f;
  min-width: 66px;
  height: 40px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
}

.catalog-transfer-actions .special-pricing-button {
  color: #8a5a13;
  background: #fff8e9;
  border-color: #d5ad69;
  min-width: 92px;
}

.catalog-batchbar {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 18px;
  display: flex;
}

.catalog-batchbar > span {
  color: var(--ui-muted);
  margin-right: auto;
  font-size: 12px;
}

.catalog-batchbar > span b {
  color: var(--ui-accent);
  font-size: 14px;
}

.catalog-batchbar button {
  height: 32px;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 7px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
}

.catalog-batchbar button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.catalog-data-table {
  background: var(--catalog-kind-soft);
  min-width: 1160px;
}

.catalog-table-header, .catalog-table-row {
  grid-template-columns: 42px minmax(190px, 1.4fr) 150px 140px 125px 95px 135px 120px;
  align-items: center;
  gap: 12px;
  display: grid;
}

.catalog-table-header {
  border-bottom: 1px solid var(--ui-border);
  min-height: 44px;
  color: var(--ui-muted);
  background: color-mix(in srgb,
    var(--catalog-kind-bg) 72%,
    var(--ui-panel-solid));
  padding: 0 18px;
  font-size: 11px;
  font-weight: 800;
}

.catalog-table-row {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-height: 76px;
  padding: 10px 18px;
  transition: background-color .16s, opacity .16s;
}

.catalog-table-row.inactive {
  opacity: .76;
}

.catalog-table-header > label, .catalog-table-row > label {
  justify-content: center;
  display: flex;
}

.catalog-table-header input, .catalog-table-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--ui-accent);
  cursor: pointer;
}

.catalog-table-row > span {
  min-width: 0;
  color: var(--ui-text);
  font-size: 12px;
}

.catalog-table-row > span > b, .catalog-table-row > span > small {
  display: block;
}

.catalog-table-row > span > b {
  font-size: 13px;
}

.catalog-table-row small {
  color: var(--ui-muted);
  text-overflow: ellipsis;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.45;
  overflow: hidden;
}

.catalog-product-name {
  text-align: left;
  max-width: 100%;
  text-decoration: underline;
  -webkit-text-decoration-color: color-mix(in srgb, var(--ui-accent) 35%, transparent);
  text-decoration-color: color-mix(in srgb, var(--ui-accent) 35%, transparent);
  text-underline-offset: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
  overflow: hidden;
  color: var(--ui-accent) !important;
  background: none !important;
  border: 0 !important;
}

.catalog-product-name:hover {
  -webkit-text-decoration-color: var(--ui-accent);
  text-decoration-color: var(--ui-accent);
}

.catalog-code-cell b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.catalog-table-row > span:last-child {
  align-items: center;
  gap: 8px;
  display: flex;
}

.catalog-table-row > span:last-child .catalog-status-toggle {
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-width: 88px;
  height: 34px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 850;
  transition: transform .15s, box-shadow .15s, background-color .15s;
  display: inline-flex;
}

.catalog-status-toggle i {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
  background: currentColor;
  border-radius: 50%;
}

.catalog-table-row > span:last-child .catalog-status-toggle.online {
  color: var(--ui-positive);
  border-color: color-mix(in srgb, var(--ui-positive) 38%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-positive) 10%, var(--ui-panel-solid));
}

.catalog-table-row > span:last-child .catalog-status-toggle.offline {
  color: var(--ui-muted);
  border-color: var(--ui-border);
  background: var(--ui-panel-soft);
}

.catalog-pagination {
  border-top: 1px solid var(--ui-border);
  color: var(--ui-muted);
  background: var(--ui-panel-solid);
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  font-size: 11px;
  display: flex;
}

.catalog-pagination > label {
  align-items: center;
  gap: 7px;
  display: flex;
}

.catalog-pagination select {
  border: 1px solid var(--ui-border);
  height: 32px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 7px;
  padding: 0 24px 0 9px;
}

.catalog-pagination > div {
  align-items: center;
  gap: 5px;
  margin-left: auto;
  display: flex;
}

.catalog-pagination > div > span {
  align-items: center;
  gap: 5px;
  display: flex;
}

.catalog-pagination i {
  padding: 0 2px;
  font-style: normal;
}

.catalog-pagination button {
  border: 1px solid var(--ui-border);
  min-width: 32px;
  height: 32px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 7px;
  padding: 0 9px;
  font-size: 11px;
}

.catalog-pagination button.active {
  color: var(--ui-on-accent);
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

.catalog-pagination button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.catalog-list {
  overflow-x: auto;
}

.catalog-empty {
  text-align: center;
  color: #7e8c85;
  font-size: 13px;
  padding: 45px 20px !important;
  display: block !important;
}

.catalog-analytics {
  background: #fff;
  border: 1px solid #e0e7e3;
  border-radius: 13px;
  margin-top: 16px;
  padding: 20px;
}

.analytics-head {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.analytics-head > div:first-child span {
  color: #27805c;
  letter-spacing: 1px;
  font-size: 10px;
}

.analytics-head h2 {
  margin: 5px 0 0;
  font-size: 17px;
}

.range-picker {
  align-items: center;
  gap: 6px;
  display: flex;
}

.range-picker button {
  padding: 8px 11px;
  font-size: 11px;
}

.range-picker button.active {
  color: #fff;
  background: #247451;
  border-color: #247451;
}

.range-picker input {
  color: #344a40;
  border: 1px solid #d7dfdb;
  border-radius: 7px;
  height: 34px;
  padding: 0 8px;
}

.range-picker i {
  color: #839088;
  font-size: 10px;
  font-style: normal;
}

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

.analytics-summary article {
  background: #f8faf9;
  border: 1px solid #e2e8e5;
  border-radius: 10px;
  padding: 14px;
}

.analytics-summary span, .analytics-summary b {
  display: block;
}

.analytics-summary span {
  color: #74837b;
  font-size: 10px;
}

.analytics-summary b {
  color: #21372d;
  margin-top: 8px;
  font-size: 15px;
}

.ranking-list {
  border: 1px solid #e2e8e5;
  border-radius: 10px;
  overflow: hidden;
}

.ranking-title, .ranking-list > div:not(.ranking-title) {
  border-bottom: 1px solid #edf1ef;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  display: grid;
}

.ranking-title {
  background: #f5f8f6;
  justify-content: space-between;
  display: flex;
}

.ranking-title b {
  font-size: 12px;
}

.ranking-title span {
  color: #75837c;
  font-size: 10px;
}

.ranking-list > div > strong {
  color: #36795c;
  background: #edf4f0;
  border-radius: 7px;
  place-items: center;
  width: 27px;
  height: 27px;
  font-size: 11px;
  display: grid;
}

.ranking-list span b, .ranking-list span small {
  display: block;
}

.ranking-list span b {
  font-size: 12px;
}

.ranking-list span small {
  color: #839089;
  margin-top: 3px;
  font-size: 10px;
}

.ranking-list em {
  color: #1f6e4d;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.ranking-list > p {
  text-align: center;
  color: #819087;
  margin: 0;
  padding: 35px;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .catalog-filterbar {
    grid-template-columns: 66px 112px 148px 148px minmax(220px, 1fr);
  }

  .catalog-transfer-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  .catalog-filterbar {
    grid-template-columns: 66px 112px 1fr 1fr;
  }

  .catalog-search {
    grid-column: 3 / -1;
  }

  .catalog-transfer-actions {
    grid-column: 1 / -1;
  }

  .analytics-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .range-picker {
    flex-wrap: wrap;
  }
}

@media (max-width: 620px) {
  .catalog-filterbar {
    grid-template-columns: 66px 1fr;
  }

  .catalog-filterbar > label {
    grid-column: 1 / -1;
  }

  .catalog-category-control {
    justify-content: flex-start;
  }

  .catalog-search, .catalog-transfer-actions {
    grid-column: 1 / -1;
  }

  .catalog-pagination {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .catalog-pagination > div {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }

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

  .range-picker input {
    width: 135px;
  }
}

.catalog-name-cell {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  display: flex;
}

.catalog-product-code {
  max-width: 100%;
  color: var(--ui-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
  overflow: hidden;
  margin-top: 2px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.catalog-product-summary {
  max-width: 100%;
  color: var(--ui-accent);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  overflow: hidden;
}

.catalog-stock-cell {
  gap: 2px;
}

.catalog-stock-summary {
  font-variant-numeric: tabular-nums;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  display: inline-flex;
}

.catalog-stock-summary > b {
  color: var(--ui-text);
  font-size: 15px;
  font-weight: 800;
}

.catalog-stock-summary > span {
  color: var(--ui-muted);
  font-size: 12px;
}

.catalog-stock-stepper {
  font-variant-numeric: tabular-nums;
  grid-template-columns: 30px minmax(52px, auto) auto 30px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  display: grid;
}

.catalog-stock-stepper > b {
  min-width: 52px;
  color: var(--ui-text);
  text-align: right;
  font-size: 14px;
  font-weight: 800;
}

.catalog-stock-stepper > span {
  color: var(--ui-muted);
  white-space: nowrap;
  font-size: 12px;
}

.catalog-stock-stepper > button {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 35%, var(--ui-border));
  width: 30px;
  height: 30px;
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-panel-solid));
  border-radius: 8px;
  padding: 0;
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
}

.catalog-stock-stepper > button:not(:disabled):hover {
  color: var(--ui-on-accent);
  background: var(--ui-accent);
}

.catalog-stock-stepper > button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.catalog-stock-cell > small {
  color: var(--ui-muted);
  font-size: 9px;
  font-weight: 500;
}

.catalog-stock-adjustment-layer {
  z-index: 160;
}

.catalog-stock-adjustment-dialog {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 16px;
  width: min(520px, 100vw - 32px);
  overflow: hidden;
  box-shadow: 0 24px 70px #0f1f193d;
}

.catalog-stock-adjustment-dialog > header {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 22px 16px;
  display: flex;
}

.catalog-stock-adjustment-dialog > header small {
  color: var(--ui-accent);
  letter-spacing: .14em;
  font-size: 9px;
  font-weight: 800;
}

.catalog-stock-adjustment-dialog > header h2 {
  color: var(--ui-text);
  margin: 5px 0 4px;
  font-size: 20px;
}

.catalog-stock-adjustment-dialog > header p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 12px;
}

.catalog-stock-adjustment-dialog > header > button {
  border: 1px solid var(--ui-border);
  width: 34px;
  height: 34px;
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  border-radius: 9px;
  padding: 0;
  font-size: 20px;
}

.catalog-stock-adjustment-body {
  gap: 14px;
  padding: 18px 22px;
  display: grid;
}

.catalog-stock-adjustment-body > label {
  color: var(--ui-text);
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.catalog-stock-adjustment-body input, .catalog-stock-adjustment-body select, .catalog-stock-adjustment-body textarea {
  border: 1px solid var(--ui-border);
  width: 100%;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  font: inherit;
  border-radius: 9px;
}

.catalog-stock-adjustment-body input, .catalog-stock-adjustment-body select {
  height: 42px;
  padding: 0 12px;
}

.catalog-stock-adjustment-body textarea {
  resize: vertical;
  min-height: 84px;
  padding: 11px 12px;
}

.catalog-stock-adjustment-mode {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  display: grid;
}

.catalog-stock-adjustment-mode button {
  border: 1px solid var(--ui-border);
  height: 42px;
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  border-radius: 9px;
  font-weight: 750;
}

.catalog-stock-adjustment-mode button.active {
  color: var(--ui-on-accent);
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

.catalog-stock-adjustment-summary {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 10px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: grid;
}

.catalog-stock-adjustment-summary span {
  color: var(--ui-muted);
  gap: 3px;
  font-size: 11px;
  display: grid;
}

.catalog-stock-adjustment-summary span:last-child {
  text-align: right;
}

.catalog-stock-adjustment-summary b {
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
}

.catalog-stock-adjustment-summary b.danger, .catalog-stock-adjustment-error {
  color: var(--ui-danger);
}

.catalog-stock-adjustment-error {
  border: 1px solid color-mix(in srgb, var(--ui-danger) 32%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-panel-solid));
  border-radius: 8px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
}

.catalog-stock-adjustment-dialog > footer {
  border-top: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 22px;
  display: flex;
}

.catalog-stock-adjustment-dialog > footer button {
  min-width: 100px;
  height: 38px;
}

.catalog-import-dialog {
  background: #fff;
  border-radius: 16px;
  width: min(760px, 100vw - 36px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  box-shadow: 0 24px 80px #102a2050;
}

.catalog-import-dialog > header, .catalog-import-dialog > footer {
  border-bottom: 1px solid #e2e8e5;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 21px;
  display: flex;
}

.catalog-import-dialog > header span {
  color: #277a58;
  letter-spacing: 1.2px;
  font-size: 9px;
}

.catalog-import-dialog > header h2 {
  margin: 5px 0;
  font-size: 18px;
}

.catalog-import-dialog > header p {
  color: #7c8982;
  margin: 0;
  font-size: 11px;
}

.catalog-import-dialog > header > button {
  border: 0;
  font-size: 21px;
}

.catalog-import-dialog > ol {
  gap: 9px;
  margin: 0;
  padding: 17px 21px;
  list-style: none;
  display: grid;
}

.catalog-import-dialog > ol li {
  border: 1px solid #e0e7e3;
  border-radius: 9px;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.catalog-import-dialog > ol li > b {
  color: #237252;
  background: #e6f4ed;
  border-radius: 8px;
  place-items: center;
  width: 27px;
  height: 27px;
  display: grid;
}

.catalog-import-dialog > ol strong, .catalog-import-dialog > ol small {
  display: block;
}

.catalog-import-dialog > ol strong {
  font-size: 12px;
}

.catalog-import-dialog > ol small {
  color: #839089;
  margin-top: 4px;
  font-size: 10px;
}

.catalog-import-dialog > ol label {
  color: #216c4d;
  cursor: pointer;
  border: 1px solid #80b89d;
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 11px;
}

.catalog-import-dialog > ol input {
  display: none;
}

.import-preview, .import-error {
  border-radius: 8px;
  margin: 0 21px 16px;
  padding: 12px;
  font-size: 12px;
}

.import-preview {
  color: #286c50;
  background: #edf8f3;
}

.import-error {
  color: #a43e39;
  background: #fcefed;
}

.import-results {
  border: 1px solid #e0e6e3;
  border-radius: 9px;
  max-height: 300px;
  margin: 0 21px 18px;
  overflow: auto;
}

.import-results > header {
  background: #f4f7f5;
  padding: 11px 13px;
  font-size: 12px;
  position: sticky;
  top: 0;
}

.import-results > div {
  border-top: 1px solid #edf1ef;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
  padding: 9px 13px;
  font-size: 11px;
  display: grid;
}

.import-results > div.success {
  color: #247451;
}

.import-results > div.failure {
  color: #b3433d;
}

.catalog-import-dialog > footer {
  border-top: 1px solid #e2e8e5;
  border-bottom: 0;
  justify-content: flex-end;
}

.catalog-detail-dialog {
  border: 1px solid var(--ui-border);
  width: min(900px, 100vw - 36px);
  max-height: calc(100vh - 38px);
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 17px;
  overflow: auto;
}

.catalog-detail-dialog > header {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 22px;
  display: flex;
}

.catalog-detail-dialog > header span {
  color: var(--ui-accent);
  letter-spacing: 1.3px;
  font-size: 9px;
  font-weight: 800;
}

.catalog-detail-dialog > header h2 {
  color: var(--ui-text);
  margin: 5px 0;
  font-size: 20px;
}

.catalog-detail-dialog > header p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 11px;
}

.catalog-detail-dialog > header > button {
  color: var(--ui-muted);
  background: none;
  border: 0;
  font-size: 22px;
}

.catalog-detail-status {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  display: flex;
}

.catalog-detail-status > span {
  align-items: center;
  gap: 10px;
  display: flex;
}

.catalog-detail-status i {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.catalog-detail-status i.online {
  color: var(--ui-positive);
  background: color-mix(in srgb, var(--ui-positive) 12%, var(--ui-panel-solid));
}

.catalog-detail-status i.offline {
  color: var(--ui-muted);
  background: var(--ui-panel-solid);
}

.catalog-detail-status b {
  font-size: 11px;
}

.catalog-detail-status button {
  height: 36px;
  padding: 0 14px;
  font-weight: 800;
}

.catalog-detail-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  padding: 20px 22px 12px;
  display: grid;
}

.catalog-detail-fields label > span {
  color: var(--ui-muted);
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  display: block;
}

.catalog-detail-fields input, .catalog-detail-fields select {
  border: 1px solid var(--ui-border);
  width: 100%;
  height: 42px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  padding: 0 11px;
  font-size: 13px;
}

.catalog-detail-fields input:disabled, .catalog-detail-fields select:disabled {
  opacity: 1;
  color: var(--ui-text);
  background: var(--ui-panel-soft);
  cursor: default;
  border-color: #0000;
}

.catalog-detail-rules {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 22px 18px;
  display: grid;
}

.catalog-detail-rules > label {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 10px;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  display: grid;
}

.catalog-detail-rules input {
  width: 17px;
  height: 17px;
  accent-color: var(--ui-accent);
  margin-top: 2px;
}

.catalog-detail-rules span b, .catalog-detail-rules span small {
  display: block;
}

.catalog-detail-rules span b {
  font-size: 12px;
}

.catalog-detail-rules span small {
  color: var(--ui-muted);
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
}

.catalog-detail-package {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 10px;
  margin: 0 22px 18px;
  padding: 14px;
}

.catalog-detail-package > b {
  margin-bottom: 8px;
  font-size: 12px;
  display: block;
}

.catalog-detail-package > span {
  border-top: 1px solid var(--ui-border);
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 11px;
  display: flex;
}

.catalog-detail-package em {
  color: var(--ui-accent);
  font-style: normal;
  font-weight: 800;
}

.catalog-detail-error {
  color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-panel-solid));
  border-radius: 8px;
  margin: 0 22px 14px;
  padding: 10px 12px;
  font-size: 11px;
}

.catalog-detail-dialog > footer {
  border-top: 1px solid var(--ui-border);
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  display: flex;
}

.catalog-detail-dialog > footer button {
  min-width: 82px;
  height: 38px;
}

.catalog-detail-dialog .primary {
  color: var(--ui-on-accent) !important;
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent) !important;
}

@media (max-width: 700px) {
  .catalog-detail-dialog {
    border-radius: 0;
    width: 100vw;
    max-height: 100vh;
  }

  .catalog-detail-fields, .catalog-detail-rules {
    grid-template-columns: 1fr;
  }

  .catalog-detail-status {
    flex-direction: column;
    align-items: flex-start;
  }
}

.catalog-list .catalog-filterbar {
  background: var(--catalog-kind-bg);
  border-color: var(--catalog-kind-line);
}

.catalog-list .catalog-table {
  background: var(--catalog-kind-soft);
}

.catalog-list .catalog-table > div:not(.catalog-empty) {
  border-left-color: var(--catalog-kind-line);
}

.catalog-list .catalog-kind-tabs > div.active {
  border-color: var(--catalog-kind-line);
  border-bottom-color: var(--catalog-kind-bg);
}

.catalog-list .catalog-kind-tabs > div.active > button {
  background: var(--catalog-kind-bg);
}

.special-pricing-dialog {
  background: #fff;
  border-radius: 17px;
  width: min(1080px, 100vw - 36px);
  height: min(820px, 100vh - 38px);
  overflow: auto;
  box-shadow: 0 26px 90px #142a224d;
}

.special-pricing-dialog > header {
  border-bottom: 1px solid #e1e7e4;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  display: flex;
}

.special-pricing-dialog > header span {
  color: #9a681b;
  letter-spacing: 1.2px;
  font-size: 9px;
}

.special-pricing-dialog > header h2 {
  margin: 5px 0;
  font-size: 19px;
}

.special-pricing-dialog > header p {
  color: #7d8983;
  max-width: 760px;
  margin: 0;
  font-size: 11px;
}

.special-pricing-dialog > header > button {
  border: 0;
  font-size: 22px;
}

.special-list-head {
  background: #fffaf0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 21px;
  display: flex;
}

.special-list-head b, .special-list-head span {
  display: block;
}

.special-list-head b {
  font-size: 14px;
}

.special-list-head span {
  color: #847b69;
  margin-top: 4px;
  font-size: 10px;
}

.special-rule-list {
  padding: 0 21px 21px;
}

.special-rule-list article {
  border-bottom: 1px solid #e9eeeb;
  grid-template-columns: 38px 1.35fr 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  display: grid;
}

.special-rule-list article > i {
  color: #8b5b12;
  background: #fff1ce;
  border-radius: 9px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-style: normal;
  font-weight: 800;
  display: grid;
}

.special-rule-list article span b, .special-rule-list article span small {
  display: block;
}

.special-rule-list article span b {
  font-size: 12px;
}

.special-rule-list article span small {
  color: #849089;
  margin-top: 4px;
  font-size: 9px;
}

.special-rule-list article em {
  color: #247451;
  background: #e9f6ef;
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 9px;
  font-style: normal;
}

.special-rule-list article.inactive {
  opacity: .55;
}

.special-rule-list article > button {
  padding: 6px 9px;
  font-size: 9px;
}

.special-rule-list > p {
  text-align: center;
  color: #829087;
  padding: 55px;
  font-size: 12px;
}

.special-pricing-dialog > form {
  padding: 0 21px 20px;
}

.special-editor-title {
  align-items: center;
  gap: 13px;
  padding: 15px 0;
  display: flex;
}

.special-editor-title > button {
  padding: 7px 10px;
}

.special-editor-title b, .special-editor-title span {
  display: block;
}

.special-editor-title b {
  font-size: 14px;
}

.special-editor-title span {
  color: #7c8982;
  margin-top: 3px;
  font-size: 10px;
}

.special-rule-fields {
  background: #f8faf9;
  border: 1px solid #e1e7e4;
  border-radius: 11px;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  padding: 15px;
  display: grid;
}

.special-rule-fields label > span {
  color: #52665c;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  display: block;
}

.special-rule-fields input, .special-rule-fields select {
  background: #fff;
  border: 1px solid #d4ded9;
  border-radius: 7px;
  width: 100%;
  height: 39px;
  padding: 0 9px;
  font-size: 11px;
}

.special-rule-fields .special-stackable-field {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 10px;
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  display: flex;
}

.special-rule-fields .special-stackable-field input {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--ui-accent);
  padding: 0;
}

.special-rule-fields .special-stackable-field span {
  gap: 4px;
  display: grid;
}

.special-rule-fields .special-stackable-field b {
  color: var(--ui-text);
  font-size: 11px;
}

.special-rule-fields .special-stackable-field small {
  color: var(--ui-muted);
  font-size: 9px;
  line-height: 1.55;
}

.special-rule-fields .special-member-level-picker {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  grid-column: 1 / -1;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  display: grid;
}

.special-member-level-picker legend {
  color: var(--ui-text);
  padding: 0 5px;
  font-size: 11px;
  font-weight: 800;
}

.special-member-level-picker > div {
  color: var(--ui-muted);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  display: flex;
}

.special-member-level-picker > div button {
  border-color: var(--ui-accent);
  min-height: 30px;
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  padding: 0 12px;
}

.special-member-level-picker section {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.special-member-level-picker section label {
  border: 1px solid var(--ui-border);
  min-height: 38px;
  color: var(--ui-text);
  background: var(--ui-panel-soft);
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11px;
  display: flex;
}

.special-member-level-picker section label.selected {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.special-member-level-picker section input {
  width: 17px;
  height: 17px;
  min-height: 0;
  accent-color: var(--ui-accent);
  padding: 0;
}

.special-member-level-picker section label > span {
  color: inherit;
  font-size: inherit;
  margin: 0;
  display: inline;
}

.special-product-picker {
  border: 1px solid #dfe6e2;
  border-radius: 11px;
  margin-top: 14px;
  overflow: hidden;
}

.special-product-picker > header {
  background: #f4f7f5;
  grid-template-columns: minmax(150px, 1fr) 150px 150px 210px auto;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  display: grid;
}

.special-product-picker > header b, .special-product-picker > header span {
  display: block;
}

.special-product-picker > header b {
  font-size: 12px;
}

.special-product-picker > header span {
  color: #718079;
  margin-top: 3px;
  font-size: 9px;
}

.special-product-picker > header input, .special-product-picker > header select {
  border: 1px solid #d3dcd7;
  border-radius: 7px;
  width: 100%;
  height: 36px;
  padding: 0 9px;
}

.special-product-picker > header button {
  height: 36px;
  padding: 0 10px;
  font-size: 10px;
}

.special-product-picker > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 360px;
  display: grid;
  overflow: auto;
}

.special-product-picker label {
  cursor: pointer;
  border-bottom: 1px solid #edf1ef;
  border-right: 1px solid #edf1ef;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  display: grid;
}

.special-product-picker label b, .special-product-picker label small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.special-product-picker label b {
  font-size: 11px;
}

.special-product-picker label small {
  color: #849089;
  margin-top: 3px;
  font-size: 9px;
}

.special-product-picker label strong {
  color: #805819;
  font-size: 11px;
}

.special-error {
  color: #a53e38;
  background: #fcefed;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
}

.special-pricing-dialog form > footer {
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  display: flex;
}

@media (max-width: 1050px) {
  .special-product-picker > header {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .special-product-picker > header > div {
    grid-column: 1 / -1;
  }

  .special-product-picker > header button {
    grid-column: 3;
  }

  .special-product-picker > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .special-rule-fields {
    grid-template-columns: repeat(2, 1fr);
  }

  .special-rule-list article {
    grid-template-columns: 35px 1fr auto;
  }

  .special-rule-list article > span:nth-of-type(2) {
    grid-column: 2;
  }

  .special-product-picker > div, .special-product-picker > header {
    grid-template-columns: 1fr;
  }

  .special-product-picker > header button {
    grid-column: auto;
  }

  .special-pricing-dialog {
    border-radius: 0;
    width: 100vw;
    max-height: 100vh;
  }
}

.category-manager-button, .code-generator button {
  color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
  border-color: color-mix(in srgb,
    var(--ui-accent) 35%,
    var(--ui-border)) !important;
}

.package-service-picker, .category-list section, .category-row {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.category-row.child {
  background: var(--ui-panel-soft);
  border-color: var(--ui-border);
}

.catalog-kind-physical {
  --catalog-kind-bg: color-mix(in srgb,
    var(--ui-accent) 7%,
    var(--ui-panel-soft));
  --catalog-kind-soft: color-mix(in srgb,
    var(--ui-accent) 2%,
    var(--ui-panel-solid));
  --catalog-kind-line: color-mix(in srgb,
    var(--ui-accent) 55%,
    var(--ui-border));
}

.catalog-kind-service {
  --catalog-kind-bg: color-mix(in srgb,
    var(--ui-accent) 10%,
    var(--ui-panel-soft));
  --catalog-kind-soft: color-mix(in srgb,
    var(--ui-accent) 3%,
    var(--ui-panel-solid));
  --catalog-kind-line: color-mix(in srgb,
    var(--ui-accent) 65%,
    var(--ui-border));
}

.catalog-kind-timed {
  --catalog-kind-bg: color-mix(in srgb,
    var(--ui-accent) 13%,
    var(--ui-panel-soft));
  --catalog-kind-soft: color-mix(in srgb,
    var(--ui-accent) 4%,
    var(--ui-panel-solid));
  --catalog-kind-line: color-mix(in srgb,
    var(--ui-accent) 75%,
    var(--ui-border));
}

.catalog-kind-period {
  --catalog-kind-bg: color-mix(in srgb,
    var(--ui-accent) 16%,
    var(--ui-panel-soft));
  --catalog-kind-soft: color-mix(in srgb,
    var(--ui-accent) 5%,
    var(--ui-panel-solid));
  --catalog-kind-line: color-mix(in srgb,
    var(--ui-accent) 85%,
    var(--ui-border));
}

.catalog-kind-pass {
  --catalog-kind-bg: color-mix(in srgb,
    var(--ui-accent) 19%,
    var(--ui-panel-soft));
  --catalog-kind-soft: color-mix(in srgb,
    var(--ui-accent) 6%,
    var(--ui-panel-solid));
  --catalog-kind-line: var(--ui-accent);
}

.catalog-list, .catalog-analytics, .catalog-import-dialog, .catalog-detail-dialog, .special-pricing-dialog, .category-manager, .category-editor {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-overlay);
}

.catalog-entry-button {
  box-shadow: var(--ui-shadow-overlay);
}

.category-editor-layer {
  background: var(--ui-overlay);
}

.catalog-kind-tabs, .special-product-picker > header, .ranking-title, .import-results > header, .special-rule-fields {
  color: var(--ui-text);
  background: var(--ui-panel-soft);
  border-color: var(--ui-border);
}

.catalog-kind-tabs > div, .catalog-filterbar input, .catalog-filterbar select, .catalog-import-dialog > ol li, .special-rule-fields input, .special-rule-fields select, .special-product-picker, .special-product-picker input, .special-product-picker select, .special-product-picker label, .special-rule-list article {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.catalog-kind-tabs > div > button, .catalog-kind-tabs > div > span button, .catalog-filterbar label > span, .catalog-category-control > span, .catalog-table small, .catalog-empty, .analytics-summary span, .ranking-title span, .ranking-list span small, .range-picker i, .special-pricing-dialog > header p, .special-list-head span, .special-rule-list article span small, .special-editor-title span, .special-rule-fields label > span, .special-product-picker label small, .special-product-picker > header span, .catalog-import-dialog > header p, .catalog-import-dialog > ol small {
  color: var(--ui-muted);
}

.catalog-kind-tabs > div.active > button, .analytics-head > div:first-child span, .ranking-list em, .special-pricing-dialog > header span {
  color: var(--ui-accent);
}

.category-manager-button, .catalog-search .primary, .range-picker button.active, .special-list-head .primary, .special-pricing-dialog .primary {
  color: var(--ui-on-accent) !important;
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
}

.catalog-transfer-actions button {
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border));
}

.catalog-transfer-actions .special-pricing-button {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
}

.catalog-analytics button:not(.active), .catalog-analytics input, .catalog-import-dialog button, .special-pricing-dialog button:not(.primary), .category-manager button:not(.primary), .category-editor button:not(.primary) {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.catalog-import-dialog > header > button, .special-pricing-dialog > header > button, .category-manager .catalog-form-head > div > button:last-child, .category-editor .catalog-form-head > button {
  background: none;
}

.catalog-import-dialog > ol label {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
}

.catalog-analytics, .analytics-summary article, .ranking-list, .catalog-import-dialog > header, .catalog-import-dialog > footer, .special-pricing-dialog > header, .special-rule-list article {
  border-color: var(--ui-border);
}

.analytics-summary article, .ranking-list, .special-list-head {
  color: var(--ui-text);
  background: var(--ui-panel-soft);
}

.analytics-summary b, .analytics-head h2, .ranking-list span b, .special-rule-list article span b, .special-editor-title b, .special-product-picker label b {
  color: var(--ui-text);
}

.ranking-list > div > strong, .special-rule-list article > i {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.ranking-list > div:nth-child(2) > strong, .ranking-list > div:nth-child(3) > strong, .ranking-list > div:nth-child(4) > strong {
  color: var(--ui-on-accent);
  background: var(--ui-accent);
}

.special-rule-list article em {
  color: var(--ui-positive);
  background: color-mix(in srgb, var(--ui-positive) 13%, var(--ui-panel-solid));
}

.special-rule-list article.inactive em {
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
}

.special-product-picker label.selected {
  background: var(--ui-accent-soft);
}

.special-product-picker label strong {
  color: var(--ui-accent);
}

.special-error, .import-error, .import-results > div.failure {
  color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-panel-solid));
}

.import-preview, .import-results > div.success {
  color: var(--ui-positive);
  background: color-mix(in srgb, var(--ui-positive) 8%, var(--ui-panel-solid));
}

.special-pricing-dialog {
  flex-direction: column;
  height: min(900px, 100vh - 48px);
  max-height: none;
  display: flex;
  overflow: hidden;
}

.special-pricing-dialog > .special-rule-list {
  flex: 1;
  overflow: auto;
}

.special-pricing-dialog > form {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.special-product-picker > header {
  grid-template-columns: minmax(145px, 1fr) 150px 150px 190px auto;
}

.special-product-picker > header select, .special-product-picker > header input {
  border: 1px solid var(--ui-border);
  width: 100%;
  height: 36px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 7px;
  padding: 0 9px;
  font-size: 10px;
}

.special-product-picker > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 340px;
}

@media (max-width: 1000px) {
  .special-product-picker > header {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .special-product-picker > header > div {
    grid-column: 1 / -1;
  }

  .special-product-picker > header input {
    grid-column: 1 / 3;
  }

  .special-product-picker > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .special-pricing-dialog {
    height: 100vh;
  }

  .special-product-picker > header, .special-product-picker > div {
    grid-template-columns: 1fr;
  }

  .special-product-picker > header > div, .special-product-picker > header input {
    grid-column: auto;
  }
}

.catalog-hero.catalog-entry-hero {
  isolation: isolate;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 48px #0916112e;
  border: 1px solid color-mix(in srgb, var(--ui-on-accent) 13%, transparent) !important;
  background: radial-gradient(circle at 84% -20%,
      rgba(var(--ui-accent-rgb), .38),
      transparent 43%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--ui-accent-hover) 52%, #111b18),
      color-mix(in srgb, var(--ui-accent) 70%, #0c1512)) !important;
  height: auto !important;
  min-height: 132px !important;
  padding: 24px 28px !important;
}

.catalog-hero.catalog-entry-hero:after {
  content: "";
  z-index: -1;
  border: 1px solid #ffffff14;
  border-radius: 50%;
  width: 290px;
  height: 220px;
  position: absolute;
  bottom: -104px;
  right: -72px;
  box-shadow: 0 0 0 34px #ffffff06, 0 0 0 72px #ffffff05;
}

.catalog-entry-copy {
  min-width: 250px;
}

.catalog-hero.catalog-entry-hero .catalog-entry-copy > span {
  font-weight: 850;
  color: color-mix(in srgb,
    var(--ui-on-accent) 70%,
    var(--ui-accent)) !important;
  letter-spacing: 2px !important;
  font-size: 9px !important;
}

.catalog-hero.catalog-entry-hero .catalog-entry-copy > h2 {
  color: var(--ui-on-accent);
  letter-spacing: .4px;
  font-weight: 850;
  margin: 9px 0 7px !important;
  font-size: 25px !important;
}

.catalog-hero.catalog-entry-hero .catalog-entry-copy > p {
  max-width: 470px;
  color: color-mix(in srgb, var(--ui-on-accent) 68%, transparent) !important;
  font-size: 11px !important;
}

.catalog-hero-summary {
  grid-template-columns: repeat(3, minmax(105px, 1fr));
  width: min(430px, 48%);
  gap: 8px !important;
  display: grid !important;
}

.catalog-hero-summary article {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #ffffff13;
  border: 1px solid #ffffff21;
  border-radius: 12px;
  min-width: 0;
  padding: 13px 15px;
  box-shadow: inset 0 1px #ffffff14;
}

.catalog-hero-summary span, .catalog-hero-summary b {
  display: block;
}

.catalog-hero-summary span {
  color: color-mix(in srgb, var(--ui-on-accent) 62%, transparent) !important;
  letter-spacing: .3px !important;
  font-size: 9px !important;
}

.catalog-hero-summary b {
  color: var(--ui-on-accent);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 7px;
  font-size: 14px;
  overflow: hidden;
}

.catalog-hero-summary i {
  color: color-mix(in srgb, var(--ui-on-accent) 45%, transparent);
  font-style: normal;
  font-weight: 400;
}

.catalog-entry-hero + .notice {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 18%, transparent);
  box-shadow: 0 7px 20px rgba(var(--ui-accent-rgb), .06);
  border-radius: 10px;
  margin: -3px 0 14px;
}

.catalog-list {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, transparent) !important;
  background: color-mix(in srgb,
    var(--ui-panel-solid) 94%,
    transparent) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 42px #0e231b13 !important;
}

.catalog-kind-tabs {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  gap: 5px;
  padding: 10px 14px;
}

.catalog-kind-tabs > div {
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  transition: border-color .3s ease-out, background-color .3s ease-out, transform .3s ease-out;
}

.catalog-kind-tabs > div:hover {
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
}

.catalog-kind-tabs > div.active {
  border-color: color-mix(in srgb,
    var(--catalog-kind-line) 58%,
    var(--ui-border));
  background: var(--ui-panel-solid);
  border-radius: 10px;
  box-shadow: 0 5px 16px #0e231b12;
}

.catalog-kind-tabs > div > button {
  min-width: 108px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 750;
  transition: color .3s ease-out, background-color .3s ease-out;
}

.catalog-kind-tabs > div.active > button {
  color: var(--ui-accent);
  background: none !important;
}

.catalog-kind-tabs > div > span {
  border-left-color: var(--ui-border);
}

.catalog-kind-tabs > div > span button {
  width: 23px;
  height: 32px;
  color: var(--ui-muted);
  background: none;
  font-size: 16px;
}

.catalog-filterbar {
  border-top: 0;
  border-bottom: 1px solid var(--ui-border);
  padding: 11px 14px;
  background: color-mix(in srgb,
    var(--catalog-kind-bg) 42%,
    var(--ui-panel-solid)) !important;
}

.catalog-filterbar select, .catalog-filterbar input {
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 9px;
  height: 36px;
  font-size: 11px;
  transition: border-color .3s ease-out, box-shadow .3s ease-out, background-color .3s ease-out;
}

.catalog-filterbar select:focus, .catalog-filterbar input:focus {
  border-color: color-mix(in srgb, var(--ui-accent) 58%, var(--ui-border));
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .09);
  outline: 0;
}

.catalog-search button, .catalog-category-control button, .catalog-transfer-actions button {
  border-radius: 9px;
  height: 36px;
  transition: transform .3s ease-out, border-color .3s ease-out, background-color .3s ease-out;
}

.catalog-search button:hover, .catalog-category-control button:hover, .catalog-transfer-actions button:hover {
  transform: translateY(-1px);
}

.catalog-add-button {
  width: 56px;
  height: 56px;
  box-shadow: 0 5px 16px rgba(var(--ui-accent-rgb), .08);
  grid-template-rows: 28px 17px;
  transition: transform .3s ease-out, background-color .3s ease-out, border-color .3s ease-out;
  border-width: 1px !important;
  border-radius: 11px !important;
  min-height: 56px !important;
}

.catalog-add-button:hover {
  transform: translateY(-2px);
}

.catalog-batchbar button {
  border-radius: 8px;
  height: 29px;
}

.catalog-data-table {
  background: var(--ui-panel-solid);
}

.catalog-table-header {
  min-height: 38px;
  color: var(--ui-muted);
  background: color-mix(in srgb,
    var(--catalog-kind-bg) 48%,
    var(--ui-panel-soft));
  letter-spacing: .22px;
  padding: 0 16px;
  font-size: 10px;
}

.catalog-table-row {
  border-bottom-color: color-mix(in srgb, var(--ui-border) 75%, transparent);
  min-height: 54px;
  padding: 6px 16px;
  transition: background-color .3s ease-out, opacity .3s ease-out;
}

.catalog-table-row small {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.3;
}

.catalog-product-name {
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: color .3s ease-out, transform .3s ease-out;
}

.catalog-product-name:hover {
  transform: translateX(2px);
  color: var(--ui-accent-hover) !important;
}

.catalog-table-header input, .catalog-table-row input {
  width: 15px;
  height: 15px;
}

.catalog-table-row > span:last-child .catalog-status-toggle {
  border-radius: 8px;
  min-width: 84px;
  height: 30px;
  font-size: 10px;
  transition: transform .3s ease-out, border-color .3s ease-out, background-color .3s ease-out;
}

.catalog-pagination {
  background: var(--ui-panel-soft);
  padding: 10px 16px;
}

.catalog-pagination select, .catalog-pagination button {
  border-radius: 8px;
  height: 30px;
}

.catalog-analytics {
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, transparent);
  background: color-mix(in srgb, var(--ui-panel-solid) 95%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  margin-top: 18px;
  padding: 22px;
  box-shadow: 0 14px 42px #0e231b11;
}

.analytics-head h2 {
  letter-spacing: .2px;
  font-size: 18px;
}

.range-picker button, .range-picker input {
  border-radius: 8px;
  height: 32px;
}

.analytics-summary {
  gap: 9px;
  margin: 15px 0;
}

.analytics-summary article {
  border-color: var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 10px;
  padding: 12px 14px;
}

.analytics-summary b {
  margin-top: 6px;
  font-size: 14px;
}

.ranking-list {
  border-radius: 12px;
}

.ranking-title, .ranking-list > div:not(.ranking-title) {
  padding: 9px 13px;
}

@media (max-width: 900px) {
  .catalog-hero.catalog-entry-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .catalog-hero-summary {
    width: 100%;
    max-width: 520px;
  }

  .catalog-filterbar {
    padding: 10px 12px;
  }
}

@media (max-width: 620px) {
  .catalog-hero.catalog-entry-hero {
    border-radius: 15px;
    padding: 20px !important;
  }

  .catalog-hero-summary {
    grid-template-columns: 1fr;
  }

  .catalog-entry-copy {
    min-width: 0;
  }

  .catalog-analytics {
    border-radius: 14px;
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-list *, .catalog-analytics *, .catalog-hero * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  .catalog-product-name:hover, .catalog-status-toggle:hover, .catalog-add-button:hover {
    transform: none !important;
  }
}

.catalog-table-row > span:last-child .catalog-status-toggle {
  width: 73px;
  min-width: 73px;
  height: 23px;
  color: var(--ui-muted);
  box-shadow: none;
  background: none;
  border: 0;
  justify-content: flex-start;
  gap: 7px;
  padding: 0;
}

.catalog-status-toggle i {
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-panel-soft);
  border-radius: 999px;
  flex: 0 0 37px;
  width: 37px;
  height: 21px;
  display: block;
  position: relative;
  box-shadow: inset 0 1px 2px #141e190f;
}

.catalog-status-toggle i:before {
  content: "";
  background: var(--ui-panel-solid);
  border-radius: 50%;
  width: 17px;
  height: 17px;
  transition: transform .3s cubic-bezier(.2, 0, 0, 1);
  position: absolute;
  top: 1px;
  left: 1px;
  box-shadow: 0 1px 4px #141e1938;
}

.catalog-table-row > span:last-child .catalog-status-toggle.online {
  color: var(--ui-accent);
  background: none;
  border: 0;
}

.catalog-status-toggle.online i {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  box-shadow: 0 4px 12px rgba(var(--ui-accent-rgb), .22);
}

.catalog-table-row > span:last-child .catalog-status-toggle.offline {
  color: var(--ui-muted);
  background: none;
  border: 0;
}

.catalog-status-toggle:hover {
  box-shadow: none;
  transform: none;
}

.catalog-hero.catalog-entry-hero {
  border-radius: 16px;
  box-shadow: 0 10px 30px #11231c0e;
  border: 1px solid var(--ui-border) !important;
  min-height: 108px !important;
  color: var(--ui-text) !important;
  background: linear-gradient(135deg,
    var(--ui-panel-solid),
    color-mix(in srgb, var(--ui-accent) 5%, var(--ui-panel-soft))) !important;
  padding: 20px 24px !important;
}

.catalog-hero.catalog-entry-hero:before {
  content: "";
  background: linear-gradient(180deg,
    var(--ui-accent),
    color-mix(in srgb, var(--ui-accent) 30%, transparent));
  width: 4px;
  position: absolute;
  inset: 0 auto 0 0;
}

.catalog-hero.catalog-entry-hero:after {
  display: none;
}

.catalog-hero.catalog-entry-hero .catalog-entry-copy > span {
  color: var(--ui-accent) !important;
  letter-spacing: 1.8px !important;
  font-size: 8px !important;
}

.catalog-hero.catalog-entry-hero .catalog-entry-copy > h2 {
  color: var(--ui-text) !important;
  margin: 7px 0 5px !important;
  font-size: 23px !important;
}

.catalog-hero.catalog-entry-hero .catalog-entry-copy > p {
  color: var(--ui-muted) !important;
}

.catalog-hero-summary {
  width: min(470px, 46%);
  gap: 0 !important;
}

.catalog-hero-summary article {
  border: 0;
  border-left: 1px solid var(--ui-border);
  color: var(--ui-text);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  border-radius: 0;
  padding: 6px 20px;
}

.catalog-hero-summary span {
  color: var(--ui-muted) !important;
  font-size: 9px !important;
}

.catalog-hero-summary b {
  color: var(--ui-text);
  margin-top: 6px;
  font-size: 15px;
}

.catalog-hero-summary i {
  color: var(--ui-muted);
}

.catalog-hero-summary span {
  line-height: 1.45;
  font-size: 12px !important;
}

.catalog-hero-summary b {
  margin-top: 7px;
  font-size: 17px;
  line-height: 1.35;
}

.catalog-hero-summary article {
  flex-direction: column;
  justify-content: center;
  min-height: 62px;
  display: flex;
}

.catalog-list {
  border-radius: 16px !important;
  box-shadow: 0 10px 30px #11231c0d !important;
}

.catalog-kind-tabs {
  background: var(--ui-panel-soft);
  align-items: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 12px;
}

.catalog-kind-tabs > div {
  background: none;
  border: 0;
  border-radius: 9px;
  position: relative;
  overflow: visible;
}

.catalog-kind-tabs > div:hover {
  background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-panel-solid));
  border: 0;
}

.catalog-kind-tabs > div.active {
  background: var(--ui-panel-solid);
  border: 0;
  border-radius: 9px;
  box-shadow: 0 2px 8px #11231c12;
}

.catalog-kind-tabs > div.active:after {
  content: "";
  background: var(--ui-accent);
  border-radius: 2px 2px 0 0;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 18px;
  right: 18px;
}

.catalog-kind-tabs > div > button {
  min-width: 124px;
  height: 38px;
  color: var(--ui-muted);
  padding: 0 20px;
  font-size: 12px;
}

.catalog-kind-tabs > div.active > button {
  color: var(--ui-accent);
  font-weight: 850;
}

.catalog-kind-tabs > div > span {
  z-index: 2;
  opacity: 0;
  background: var(--ui-panel-solid);
  pointer-events: none;
  border: 0;
  border-radius: 7px;
  align-items: center;
  height: 32px;
  transition: opacity .3s ease-out, transform .3s ease-out;
  position: absolute;
  top: 3px;
  right: 4px;
  overflow: hidden;
  transform: translateY(2px);
  box-shadow: 0 3px 10px #11231c14;
}

.catalog-kind-tabs > div:hover > span, .catalog-kind-tabs > div:focus-within > span {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.catalog-kind-tabs > div > span button {
  width: 25px;
  height: 28px;
  font-size: 15px;
}

.catalog-filterbar {
  grid-template-columns: 100px 106px 148px 148px 190px minmax(170px, 1fr);
  gap: 10px;
  min-height: 58px;
  padding: 9px 14px;
  background: var(--ui-panel-solid) !important;
}

.catalog-add-button {
  width: 100px;
  height: 36px;
  box-shadow: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
  display: flex;
  border: 1px solid var(--ui-accent) !important;
  min-height: 36px !important;
  color: var(--ui-on-accent) !important;
  background: var(--ui-accent) !important;
  border-radius: 9px !important;
  padding: 0 13px !important;
}

.catalog-add-button b {
  font-size: 20px;
  line-height: 1;
}

.catalog-add-button span {
  font-size: 12px;
  line-height: 1;
}

.catalog-add-button:hover {
  box-shadow: none;
  transform: none;
  color: var(--ui-on-accent) !important;
  background: var(--ui-accent-hover) !important;
}

.catalog-category-control button {
  width: 106px;
  height: 36px;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-panel-solid) !important;
}

.catalog-category-control button:hover {
  transform: none;
  color: var(--ui-accent) !important;
  border-color: color-mix(in srgb,
    var(--ui-accent) 48%,
    var(--ui-border)) !important;
  background: var(--ui-accent-soft) !important;
}

.catalog-filterbar select, .catalog-filterbar input, .catalog-search button, .catalog-transfer-actions button {
  height: 36px;
}

.catalog-transfer-actions {
  align-items: center;
}

.catalog-transfer-actions button {
  min-width: 72px;
  color: var(--ui-text);
  border-color: var(--ui-border);
}

.catalog-transfer-actions .special-pricing-button {
  min-width: 96px;
  color: var(--ui-accent);
  border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--ui-border));
  background: var(--ui-panel-solid);
}

.catalog-search button {
  box-shadow: none;
}

.catalog-batchbar {
  background: var(--ui-panel-solid);
  min-height: 42px;
  padding: 5px 16px;
}

.catalog-batchbar > span {
  font-size: 11px;
}

.catalog-batchbar button {
  background: var(--ui-panel-solid);
  height: 30px;
}

.catalog-table-header {
  min-height: 40px;
  color: var(--ui-muted);
  background: color-mix(in srgb,
    var(--ui-panel-soft) 88%,
    var(--ui-panel-solid));
  padding: 0 16px;
  font-size: 13px;
  font-weight: 780;
}

.catalog-table-row {
  background: var(--ui-panel-solid);
  min-height: 50px;
  padding: 5px 16px;
}

.catalog-table-row:hover {
  background: color-mix(in srgb, var(--ui-accent) 3.5%, var(--ui-panel-solid));
}

.catalog-table-row > span {
  font-size: 13px;
}

.catalog-table-row > span > b {
  font-size: 13px;
  font-weight: 700;
}

.catalog-product-name {
  font-size: 14px;
  font-weight: 760;
  color: var(--ui-text) !important;
}

.catalog-product-name:hover {
  color: var(--ui-accent) !important;
}

.catalog-table-header > span:nth-child(n+3), .catalog-table-row > span:nth-child(n+3) {
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  display: flex;
}

.catalog-table-header > span:nth-child(2), .catalog-table-row > span:nth-child(2) {
  text-align: left;
  justify-self: stretch;
}

.catalog-table-row > span:last-child {
  justify-content: center;
  align-items: center;
}

.catalog-table-row > span:last-child .catalog-status-toggle {
  white-space: nowrap;
  gap: 8px;
  width: 108px;
  min-width: 108px;
  height: 30px;
  font-size: 12px;
}

.catalog-status-toggle i {
  flex-basis: 42px;
  width: 42px;
  height: 24px;
}

.catalog-status-toggle i:before {
  width: 18px;
  height: 18px;
}

.catalog-status-toggle.online i:before {
  transform: translateX(18px);
}

.catalog-pagination {
  background: var(--ui-panel-soft);
  border-top: 0;
  min-height: 48px;
  padding: 8px 16px;
}

.catalog-pagination > .catalog-page-select-all {
  color: var(--ui-text);
  white-space: nowrap;
  gap: 8px;
  font-weight: 700;
}

.catalog-page-select-all input {
  width: 15px;
  height: 15px;
  accent-color: var(--ui-accent);
  cursor: pointer;
}

.catalog-pagination > .catalog-page-batch {
  align-items: center;
  gap: 6px;
  margin-left: 0;
  display: flex;
}

.catalog-page-batch button {
  min-width: 78px;
  height: 30px;
  color: var(--ui-text);
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  padding: 0 11px;
  font-weight: 700;
}

.catalog-page-batch button:not(:disabled):hover {
  color: var(--ui-accent);
  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border));
  background: var(--ui-accent-soft);
}

.catalog-page-batch button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.catalog-pagination > .catalog-page-controls {
  margin-left: auto;
}

.catalog-analytics {
  border-radius: 16px;
  box-shadow: 0 10px 30px #11231c0b;
}

.analytics-summary article {
  background: var(--ui-panel-solid);
}

.ranking-title {
  background: var(--ui-panel-soft);
}

@media (max-width: 900px) {
  .catalog-hero-summary {
    width: 100%;
  }

  .catalog-hero-summary article:first-child {
    border-left: 0;
  }

  .catalog-kind-tabs > div > button {
    min-width: 112px;
  }

  .catalog-filterbar {
    grid-template-columns: 100px 106px 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .catalog-hero-summary {
    grid-template-columns: repeat(3, 1fr);
  }

  .catalog-hero-summary article {
    padding: 6px 10px;
  }

  .catalog-filterbar {
    grid-template-columns: 100px 1fr;
  }

  .catalog-category-control {
    justify-content: flex-start;
  }
}

.catalog-kind-tabs {
  border-bottom: 1px solid var(--ui-border);
  background: color-mix(in srgb,
    var(--ui-panel-soft) 86%,
    var(--ui-panel-solid));
  scrollbar-width: none;
  align-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 8px 12px;
}

.catalog-kind-tabs::-webkit-scrollbar {
  display: none;
}

.catalog-kind-tabs > div {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  flex: none;
  min-width: 128px;
  min-height: 40px;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
  display: flex;
  position: relative;
  overflow: visible;
  box-shadow: 0 2px 7px #11231c09;
}

.catalog-kind-tabs > div:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-panel-solid));
  box-shadow: 0 5px 14px rgba(var(--ui-accent-rgb), .1);
  transform: none;
}

.catalog-kind-tabs > div.active {
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent);
  box-shadow: 0 5px 14px rgba(var(--ui-accent-rgb), .2);
  border-radius: 10px;
}

.catalog-kind-tabs > div.active:after {
  display: none;
}

.catalog-kind-tabs > div > .catalog-kind-button {
  width: 100%;
  min-width: 128px;
  height: 40px;
  color: var(--ui-text);
  text-align: center;
  white-space: nowrap;
  border-radius: 10px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 760;
  transition: color .18s, padding .18s;
  background: none !important;
}

.catalog-kind-tabs > div:focus-within {
  border-color: var(--ui-accent);
  outline: 3px solid color-mix(in srgb, var(--ui-accent) 16%, transparent);
  outline-offset: 2px;
}

.catalog-kind-tabs > div.active > .catalog-kind-button {
  color: var(--ui-on-accent);
  font-weight: 850;
  background: var(--ui-accent) !important;
}

.catalog-kind-tabs > div > .catalog-kind-move {
  z-index: 3;
  border: 1px solid var(--ui-border);
  opacity: 0;
  background: var(--ui-panel-solid);
  pointer-events: none;
  border-radius: 8px;
  grid-template-columns: repeat(2, 25px);
  align-items: stretch;
  width: 50px;
  height: 30px;
  transition: opacity .16s, transform .16s;
  display: grid;
  position: absolute;
  top: 5px;
  right: 5px;
  overflow: hidden;
  transform: translateX(4px);
  box-shadow: 0 4px 12px #11231c1f;
}

.catalog-kind-tabs > div:hover > .catalog-kind-move, .catalog-kind-tabs > div:focus-within > .catalog-kind-move {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.catalog-kind-tabs > div:hover > .catalog-kind-button, .catalog-kind-tabs > div:focus-within > .catalog-kind-button {
  padding-right: 60px;
}

.catalog-kind-tabs > div > .catalog-kind-move button {
  width: 32px;
  height: 28px;
  color: var(--ui-muted);
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
}

.catalog-kind-tabs > div > .catalog-kind-move button + button {
  border-left: 1px solid var(--ui-border);
}

.catalog-kind-tabs > div > .catalog-kind-move button:not(:disabled):hover {
  color: var(--ui-on-accent);
  background: var(--ui-accent);
}

.catalog-kind-tabs > div > .catalog-kind-move button:disabled {
  opacity: .24;
  cursor: not-allowed;
}

.catalog-filterbar {
  grid-template-columns: 82px 106px 148px 160px 160px minmax(285px, 1fr);
}

.catalog-search {
  justify-self: start;
  width: 285px;
  max-width: 100%;
}

.catalog-search > div {
  grid-template-columns: 220px 58px;
}

.catalog-search input {
  width: 220px;
}

.catalog-add-button {
  width: 82px;
  height: 36px;
  min-height: 36px !important;
  padding: 0 16px !important;
}

.catalog-add-button span {
  letter-spacing: .08em;
  font-size: 13px;
}

@media (max-width: 900px) {
  .catalog-filterbar {
    grid-template-columns: 82px 106px 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .catalog-filterbar {
    grid-template-columns: 82px 1fr;
  }

  .catalog-search {
    width: 100%;
  }

  .catalog-search > div {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .catalog-search input {
    width: 100%;
  }

  .catalog-kind-tabs > div, .catalog-kind-tabs > div > .catalog-kind-button {
    min-width: 116px;
  }

  .special-member-level-picker section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.catalog-data-table {
  min-width: 1080px;
}

.catalog-table-header, .catalog-table-row {
  grid-template-columns: 42px minmax(250px, 1.6fr) minmax(150px, 1fr) minmax(105px, .7fr) minmax(80px, .55fr) minmax(250px, 1.5fr) 130px;
  gap: 10px;
}

.catalog-stock-adjustment-mode button.active {
  color: #fff !important;
}

.catalog-product-summary-row {
  background: var(--ui-panel-solid);
}

.catalog-product-summary-name {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.catalog-sku-expand {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 35%, var(--ui-border));
  width: 28px;
  height: 28px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  cursor: pointer;
  border-radius: 7px;
  flex: 0 0 28px;
  place-items: center;
  padding: 0;
  display: grid;
}

.catalog-sku-child-row {
  background: color-mix(in srgb, var(--ui-accent) 2.5%, var(--ui-panel-soft));
  min-height: 62px;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ui-accent) 48%, transparent);
}

.catalog-sku-name-cell {
  padding-left: 34px;
}

.catalog-sku-name-cell > b {
  color: var(--ui-text);
  font-size: 13px;
}

.catalog-sku-status {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  display: inline-flex;
}

.catalog-sku-status.online {
  color: #167452;
  background: #e4f6ed;
}

.catalog-sku-status.offline {
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
}

/* [project]/apps/admin/app/catalog-create.css [app-client] (css) */
.code-generator {
  display: block !important;
  position: relative !important;
}

.code-generator input {
  padding-right: 88px !important;
}

.code-generator button {
  white-space: nowrap;
  background: #247451;
  border-radius: 6px;
  height: 28px;
  padding: 0 11px;
  font-size: 9px;
  position: absolute;
  top: 5px;
  right: 5px;
  color: #fff !important;
  border: 0 !important;
}

.code-generator button:hover {
  background: #1a5e42;
}

.catalog-create-form {
  width: min(900px, 100vw - 40px);
}

.product-create-top {
  grid-template-columns: minmax(0, 2fr) minmax(210px, .72fr);
  align-items: stretch;
  gap: 18px;
  display: grid;
}

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

.product-primary-fields > label > span, .product-image-field > span {
  color: #666;
  margin-bottom: 7px;
  font-size: 10px;
  display: block;
}

.product-primary-fields input, .product-primary-fields select {
  background: #fff;
  border: 1px solid #dce3df;
  border-radius: 8px;
  outline: none;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-size: 11px;
}

.product-primary-fields input:focus, .product-primary-fields select:focus {
  border-color: #58a37f;
  box-shadow: 0 0 0 3px #e3f3eb;
}

.product-image-field {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.product-image-upload {
  text-align: center;
  cursor: pointer;
  background: linear-gradient(145deg, #f9fcfa, #eef7f2);
  border: 1px dashed #9db8aa;
  border-radius: 12px;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 170px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
  display: flex !important;
}

.product-image-upload:hover {
  background: #edf8f2;
  border-color: #388563;
}

.product-image-upload i {
  color: #32805e;
  background: #fff;
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 9px;
  font-size: 22px;
  font-style: normal;
  display: grid;
  box-shadow: 0 5px 16px #1d604421;
}

.product-image-upload > b {
  color: #275f48;
  font-size: 11px;
}

.product-image-upload small {
  color: #839189;
  margin-top: 6px;
  font-size: 8px;
  line-height: 1.7;
  display: block;
}

.product-image-upload input {
  opacity: 0;
  cursor: pointer;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
}

.product-image-upload img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.product-image-upload.has-image:after {
  content: "点击更换";
  color: #fff;
  background: #17382dcc;
  padding: 7px;
  font-size: 9px;
  position: absolute;
  inset: auto 0 0;
}

.remove-image {
  color: #a2473f;
  background: #fff;
  border-color: #e4b8b4;
  margin-top: 6px;
  padding: 5px 9px;
  font-size: 8px;
}

.product-secondary-fields {
  border-top: 1px solid #e1e8e4;
  margin-top: 17px;
  padding-top: 17px;
}

.product-payment-rules, .package-service-picker {
  margin-top: 17px;
}

@media (max-width: 720px) {
  .catalog-create-form {
    border-radius: 0;
    width: 100vw;
    max-height: 100vh;
  }

  .product-create-top {
    grid-template-columns: 1fr;
  }

  .product-image-upload {
    min-height: 150px;
  }

  .product-secondary-fields.form-grid.three, .product-primary-fields, .product-payment-rules {
    grid-template-columns: 1fr;
  }
}

.catalog-create-form .product-primary-fields > label > span, .catalog-create-form .product-image-field > span, .catalog-create-form .form-grid label > span {
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 18px;
  color: #34483f !important;
  font-size: 12px !important;
}

.catalog-create-form .product-primary-fields input, .catalog-create-form .product-primary-fields select, .catalog-create-form .form-grid input, .catalog-create-form .form-grid select {
  color: #172c23;
  height: 44px;
  font-size: 13px;
}

.catalog-create-form .code-generator {
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  height: 44px;
  display: grid !important;
  position: static !important;
}

.catalog-create-form .code-generator input {
  height: 44px;
  padding: 0 11px !important;
}

.catalog-create-form .code-generator button {
  background: #247451;
  border-radius: 8px;
  height: 44px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  position: static;
  color: #fff !important;
  border: 1px solid #247451 !important;
}

.package-picker-head {
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 10px;
  display: flex;
}

.package-picker-head > span {
  color: #34483f;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.package-picker-head > div {
  grid-template-columns: 150px minmax(150px, 1fr) auto;
  gap: 7px;
  width: min(520px, 70%);
  display: grid;
}

.package-picker-head select, .package-picker-head input {
  color: #20362c;
  background: #fff;
  border: 1px solid #d3ded8;
  border-radius: 7px;
  width: 100%;
  height: 38px;
  padding: 0 9px;
  font-size: 12px;
}

.package-picker-head button {
  color: #fff;
  background: #247451;
  border-color: #247451;
  height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
}

.package-product-list {
  border-top: 1px solid #e8eeeb;
  max-height: 250px;
  overflow: auto;
}

.package-product-list > p {
  text-align: center;
  color: #7b8b83;
  padding: 25px;
  font-size: 12px;
}

.package-product-list label b {
  color: #253b31;
  font-size: 12px;
}

.package-product-list label small {
  font-size: 10px;
}

@media (max-width: 720px) {
  .package-picker-head {
    flex-direction: column;
    align-items: stretch;
  }

  .package-picker-head > div {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .catalog-create-form .code-generator {
    grid-template-columns: minmax(0, 1fr) 88px;
  }
}

.catalog-create-form, .catalog-create-form .catalog-form-head, .catalog-create-form .catalog-form-footer {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.catalog-create-form .catalog-form-body, .catalog-create-form .product-image-upload {
  color: var(--ui-text);
  background: var(--ui-panel-soft);
  border-color: var(--ui-border-strong);
}

.catalog-create-form .product-primary-fields > label > span, .catalog-create-form .product-image-field > span, .catalog-create-form .form-grid label > span, .catalog-create-form .product-image-upload small, .catalog-create-form .rule-cards small, .catalog-create-form .package-picker-head > span {
  color: var(--ui-muted) !important;
}

.catalog-create-form .product-primary-fields input, .catalog-create-form .product-primary-fields select, .catalog-create-form .form-grid input, .catalog-create-form .form-grid select, .catalog-create-form .package-picker-head input, .catalog-create-form .package-picker-head select, .catalog-create-form .rule-cards label, .catalog-create-form .package-service-picker {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.catalog-create-form input:focus, .catalog-create-form select:focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--ui-accent) 18%,transparent) !important;
}

.catalog-create-form .code-generator button, .catalog-create-form .package-picker-head button {
  color: var(--ui-on-accent) !important;
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
}

.catalog-create-form .product-image-upload i {
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-overlay);
}

.catalog-create-form .product-image-upload > b {
  color: var(--ui-text);
}

.online-product-authoring {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 14px;
  grid-column: 1 / -1;
  margin-top: 18px;
  overflow: hidden;
}

.online-product-authoring > header {
  background: linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 10%,var(--ui-panel-solid)),var(--ui-panel-solid));
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  display: flex;
}

.online-product-authoring > header div {
  gap: 4px;
  display: grid;
}

.online-product-authoring > header b {
  color: var(--ui-text);
  font-size: 14px;
}

.online-product-authoring > header small {
  color: var(--ui-muted);
  font-size: 11px;
}

.online-product-switch {
  color: var(--ui-accent);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  display: flex !important;
}

.online-product-switch input {
  width: 18px !important;
  height: 18px !important;
}

.online-product-body {
  gap: 16px;
  padding: 18px;
  display: grid;
}

.online-product-summary {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 190px;
  gap: 14px;
  display: grid;
}

.online-product-summary > label {
  align-content: start;
  gap: 7px;
  display: grid;
}

.online-product-summary > label > span, .online-gallery-upload > span {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 700;
}

.online-product-summary input, .online-product-summary textarea {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 100%;
  color: var(--ui-text);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
}

.online-product-summary input {
  height: 44px;
}

.online-product-summary textarea {
  resize: vertical;
  min-height: 106px;
}

.online-cover-upload {
  border: 1px dashed var(--ui-border-strong);
  cursor: pointer;
  border-radius: 10px;
  min-height: 138px;
  position: relative;
  overflow: hidden;
}

.online-cover-upload > span {
  z-index: 2;
  background: #17382dcc;
  border-radius: 5px;
  padding: 3px 6px;
  position: absolute;
  top: 8px;
  left: 9px;
  color: #fff !important;
}

.online-cover-upload input, .online-gallery-upload input {
  opacity: 0;
  position: absolute;
  width: 1px !important;
  height: 1px !important;
}

.online-cover-upload img {
  object-fit: cover;
  width: 100%;
  height: 138px;
}

.online-cover-upload div {
  text-align: center;
  height: 138px;
  color: var(--ui-accent);
  place-content: center;
  gap: 7px;
  display: grid;
}

.online-cover-upload small {
  color: var(--ui-muted);
}

.online-gallery-upload {
  border: 1px dashed var(--ui-border-strong);
  cursor: pointer;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex !important;
}

.online-gallery-upload > b {
  color: var(--ui-accent);
  font-size: 12px;
}

.online-gallery-list {
  gap: 10px;
  display: flex;
  overflow: auto;
}

.online-gallery-list figure {
  flex: 0 0 110px;
  height: 90px;
  margin: 0;
  position: relative;
}

.online-gallery-list img {
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
  height: 100%;
}

.online-gallery-list button {
  color: #fff;
  background: #7d302bcc;
  border: 0;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.online-preview-button {
  justify-self: end;
  font-weight: 700;
  background: var(--ui-accent) !important;
  color: var(--ui-on-accent) !important;
  border-color: var(--ui-accent) !important;
  padding: 10px 16px !important;
}

.online-preview-layer {
  z-index: 1300;
  background: #14231dcc;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.online-preview-layer > article {
  color: #1d2f27;
  background: #fff;
  border-radius: 18px;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 28px 80px #0005;
}

.online-preview-layer article > header {
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid #e2e9e5;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  display: flex;
  position: sticky;
  top: 0;
}

.online-preview-layer h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.online-preview-layer header small {
  color: #3d9670;
}

.online-preview-layer header button {
  background: none;
  border: 0;
  font-size: 22px;
}

.online-preview-cover {
  aspect-ratio: 1.7;
  object-fit: cover;
  width: 100%;
  display: block;
}

.online-preview-layer article > p {
  color: #617168;
  padding: 0 18px;
}

.online-preview-layer iframe {
  border: 0;
  width: 100%;
  min-height: 420px;
  display: block;
}

.platform-rich-color {
  color: #385248;
  background: #fff;
  border: 1px solid #d8e3de;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
  display: flex;
}

.platform-rich-color input {
  border: 0 !important;
  width: 22px !important;
  height: 20px !important;
  padding: 0 !important;
}

.platform-rich-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
}

.platform-rich-editor th, .platform-rich-editor td {
  border: 1px solid #d8e3de;
  min-width: 80px;
  padding: 8px;
}

.platform-rich-editor hr {
  border: 0;
  border-top: 1px solid #d8e3de;
  margin: 18px 0;
}

@media (max-width: 820px) {
  .online-product-summary {
    grid-template-columns: 1fr;
  }

  .online-cover-upload {
    min-height: 180px;
  }

  .online-cover-upload img, .online-cover-upload div {
    height: 180px;
  }
}

.catalog-draft-filter {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  height: 38px;
  color: var(--ui-muted);
  border-radius: 8px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
}

.catalog-draft-filter.active {
  color: #9a6110;
  background: #fff7e8;
  border-color: #c58a2e;
}

.catalog-product-name {
  align-items: center;
  gap: 7px;
  display: inline-flex !important;
}

.catalog-draft-badge {
  color: #93600e;
  background: #fff1cf;
  border-radius: 999px;
  padding: 2px 6px;
  font-weight: 800;
  font-size: 9px !important;
}

/* [project]/apps/admin/app/inventory.css [app-client] (css) */
.inventory-top {
  color: #fff;
  background: linear-gradient(120deg, #17382d, #285e49);
  border-radius: 16px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 25px;
  display: grid;
}

.inventory-top > button:first-child {
  color: #d4e7df;
  background: #ffffff12;
  border-color: #ffffff2b;
  align-self: start;
  font-size: 9px;
}

.inventory-top > div > span {
  letter-spacing: 1.6px;
  color: #78d1a8;
  font-size: 8px;
}

.inventory-top p {
  color: #b8d1c6;
  margin: 0;
  font-size: 10px;
}

.inventory-top > .primary {
  color: #143b2c !important;
  background: #6bd0a1 !important;
  border: 0 !important;
}

.inventory-notice {
  margin-top: 13px;
}

.inventory-metrics {
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin: 14px 0;
  display: grid;
}

.inventory-metrics article {
  background: #fff;
  border: 1px solid #e0e6e3;
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.inventory-metrics article:before {
  content: "";
  background: #50aa7d;
  width: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.inventory-metrics article.amber:before {
  background: #e4a93d;
}

.inventory-metrics article.red:before {
  background: #d15b52;
}

.inventory-metrics span, .inventory-metrics strong, .inventory-metrics small {
  display: block;
}

.inventory-metrics span {
  color: #7c8882;
  font-size: 9px;
}

.inventory-metrics strong {
  margin: 8px 0;
  font-size: 23px;
}

.inventory-metrics small {
  color: #87928c;
  font-size: 8px;
}

.inventory-tabs {
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 11px;
  display: flex;
}

.inventory-tabs > div {
  background: #e9eeeb;
  border-radius: 10px;
  gap: 4px;
  padding: 4px;
  display: flex;
}

.inventory-tabs button {
  background: none;
  border: 0;
  padding: 8px 13px;
  font-size: 9px;
}

.inventory-tabs button.active {
  color: #21704f;
  background: #fff;
  box-shadow: 0 3px 10px #173b2e13;
}

.inventory-tabs > span {
  color: #88938d;
  font-size: 8px;
}

.batch-panel, .stocktake {
  background: #fff;
  border: 1px solid #e1e7e4;
  border-radius: 13px;
  overflow: hidden;
}

.batch-toolbar {
  border-bottom: 1px solid #e9edeb;
  justify-content: space-between;
  align-items: center;
  padding: 17px 19px;
  display: flex;
}

.batch-toolbar h3, .stocktake h3 {
  margin: 0 0 5px;
  font-size: 14px;
}

.batch-toolbar p, .stocktake p {
  color: #8c9691;
  margin: 0;
  font-size: 9px;
}

.batch-toolbar input {
  border: 1px solid #dce3df;
  border-radius: 8px;
  width: 250px;
  padding: 9px 11px;
  font-size: 9px;
}

.batch-table, .count-table {
  overflow: auto;
}

.batch-row {
  border-bottom: 1px solid #edf0ee;
  grid-template-columns: 1.55fr .75fr .75fr .85fr .7fr .55fr .75fr;
  align-items: center;
  gap: 12px;
  min-width: 900px;
  padding: 13px 19px;
  font-size: 9px;
  display: grid;
}

.batch-head, .count-head {
  color: #7c8781;
  background: #f7f9f8;
  padding-top: 10px;
  padding-bottom: 10px;
}

.batch-row b, .batch-row small, .count-row b, .count-row small {
  display: block;
}

.batch-row small, .count-row small {
  color: #909993;
  margin-top: 4px;
  font-size: 8px;
}

.expiry {
  border-radius: 12px;
  padding: 5px 8px;
  font-style: normal;
  display: inline-block;
}

.expiry.normal {
  color: #297453;
  background: #e9f5ef;
}

.expiry.warning {
  color: #99701e;
  background: #fff4d9;
}

.expiry.critical {
  color: #b45532;
  background: #ffeadf;
}

.expiry.expired {
  color: #ad413a;
  background: #fbe3e1;
}

.batch-row button {
  padding: 6px 9px;
  font-size: 8px;
}

.batch-row .danger-action {
  color: #ad4038;
  background: #fff6f5;
  border-color: #efc5c1;
}

.stocktake-head {
  border-bottom: 1px solid #e7ece9;
  justify-content: space-between;
  align-items: center;
  padding: 19px;
  display: flex;
}

.stocktake-head > div:first-child > span {
  color: #2b7b59;
  letter-spacing: 1.2px;
  font-size: 8px;
}

.stocktake-head > div:last-child {
  text-align: center;
  background: #edf7f2;
  border-radius: 9px;
  min-width: 95px;
  padding: 9px 12px;
}

.stocktake-head > div:last-child b, .stocktake-head > div:last-child small {
  display: block;
}

.stocktake-head > div:last-child b {
  color: #266e50;
  font-size: 17px;
}

.stocktake-head > div:last-child small {
  color: #7e8b84;
  font-size: 8px;
}

.count-row {
  border-bottom: 1px solid #edf0ee;
  grid-template-columns: 1.7fr .8fr .9fr .7fr .8fr;
  align-items: center;
  gap: 14px;
  min-width: 720px;
  padding: 12px 19px;
  font-size: 9px;
  display: grid;
}

.count-row input {
  border: 1px solid #d9e2dd;
  border-radius: 7px;
  width: 100px;
  padding: 7px 9px;
}

.count-row .same {
  color: #267452;
}

.count-row .gain {
  color: #2771a0;
}

.count-row .loss {
  color: #b64b42;
}

.stocktake-footer {
  background: #fafbfa;
  justify-content: space-between;
  align-items: center;
  padding: 14px 19px;
  display: flex;
}

.stocktake-footer span {
  color: #8c9691;
  font-size: 8px;
}

.stocktake-footer button:disabled {
  opacity: .45;
}

.inbound-form {
  background: #fff;
  border-radius: 15px;
  width: min(720px, 100vw - 40px);
  overflow: hidden;
}

.inbound-body {
  background: #f8faf9;
  padding: 21px;
}

.quantity-unit {
  grid-template-columns: 1fr 72px;
  gap: 6px;
  display: grid;
}

.inbound-tip {
  background: #edf7f2;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 13px;
  display: flex;
}

.inbound-tip b {
  color: #226d4e;
  font-size: 9px;
}

.inbound-tip span {
  color: #728078;
  font-size: 8px;
}

@media (max-width: 1050px) {
  .inventory-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .inventory-top {
    grid-template-columns: 1fr auto;
  }

  .inventory-top > button:first-child {
    grid-column: 1 / -1;
    width: max-content;
  }
}

@media (max-width: 700px) {
  .inventory-metrics, .inventory-top {
    grid-template-columns: 1fr;
  }

  .inventory-tabs, .batch-toolbar, .stocktake-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .batch-toolbar input {
    width: 100%;
  }

  .inventory-tabs > div {
    width: 100%;
    overflow: auto;
  }

  .inventory-top > .primary {
    width: 100%;
  }
}

.inventory-management {
  min-width: 0;
  color: var(--ui-text, #1e2924);
}

.inventory-management button, .inventory-management input, .inventory-management select {
  font: inherit;
}

.inventory-hero-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.inventory-hero-actions button {
  color: #fff;
  background: #ffffff12;
  border: 1px solid #ffffff42;
  border-radius: 9px;
  padding: 9px 13px;
}

.inventory-notice {
  color: #226a4c;
  background: #edf8f2;
  border: 1px solid #b8dfcc;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 13px;
  font-size: 10px;
  display: flex;
}

.inventory-notice button {
  color: inherit;
  background: none;
  border: 0;
}

.inventory-section-tabs {
  background: #e9eeeb;
  border-radius: 11px;
  gap: 5px;
  margin: 0 0 12px;
  padding: 5px;
  display: flex;
  overflow: auto;
}

.inventory-section-tabs button {
  white-space: nowrap;
  color: #637069;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 9px;
}

.inventory-section-tabs button.active {
  color: #1f714e;
  background: #fff;
  box-shadow: 0 3px 12px #173b2d16;
}

.inventory-card {
  background: #fff;
  border: 1px solid #e0e7e3;
  border-radius: 14px;
  min-width: 0;
  overflow: hidden;
}

.inventory-overview-grid {
  grid-template-columns: 1.25fr .75fr;
  gap: 12px;
  display: grid;
}

.inventory-overview-grid .full {
  grid-column: 1 / -1;
}

.inventory-card > header, .inventory-toolbar {
  border-bottom: 1px solid #e9eeeb;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 17px 19px;
  display: flex;
}

.inventory-card header span, .inventory-toolbar p {
  color: #89948e;
  margin: 0;
  font-size: 8px;
  display: block;
}

.inventory-card h3, .inventory-toolbar h3 {
  margin: 3px 0 0;
  font-size: 14px;
}

.inventory-card header button, .inventory-toolbar button, .inventory-table button, .transfer-list button, .purchase-list button {
  color: #4d5b54;
  background: #fff;
  border: 1px solid #d7e0db;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 8px;
}

.inventory-management button.primary {
  color: #fff;
  background: #276e51;
  border-color: #276e51;
}

.inventory-toolbar > div:last-child {
  gap: 7px;
  display: flex;
}

.inventory-toolbar input, .inventory-toolbar select {
  background: #fff;
  border: 1px solid #d9e2dd;
  border-radius: 8px;
  min-width: 180px;
  padding: 8px 10px;
  font-size: 9px;
}

.ledger-filter-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ledger-filter-controls input {
  min-width: 210px;
}

.ledger-filter-controls input, .ledger-filter-controls select {
  border: 1px solid var(--ui-border);
  height: 38px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  padding: 0 10px;
}

.transfer-pipeline {
  grid-template-columns: repeat(6, 1fr);
  padding: 23px 17px;
  display: grid;
}

.transfer-pipeline > div {
  text-align: center;
  position: relative;
}

.transfer-pipeline > div:not(:last-child):after {
  content: "";
  background: #d9e4de;
  width: 72%;
  height: 1px;
  position: absolute;
  top: 15px;
  left: 64%;
}

.transfer-pipeline i {
  z-index: 1;
  color: #287553;
  background: #e9f5ef;
  border-radius: 50%;
  place-items: center;
  width: 31px;
  height: 31px;
  margin: 0 auto 8px;
  font-style: normal;
  display: grid;
  position: relative;
}

.transfer-pipeline span, .transfer-pipeline b {
  display: block;
}

.transfer-pipeline b {
  margin-top: 5px;
  font-size: 15px;
}

.notification-list {
  padding: 8px 15px;
}

.notification-list > button {
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #edf1ef;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 0;
  display: grid;
}

.notification-list > button > i {
  color: #b36a27;
  background: #fff0df;
  border-radius: 7px;
  place-items: center;
  width: 23px;
  height: 23px;
  font-style: normal;
  display: grid;
}

.notification-list > button.read {
  opacity: .56;
}

.notification-list b, .notification-list small {
  display: block;
}

.notification-list p, .inventory-empty {
  text-align: center;
  color: #87928c;
  padding: 30px;
  font-size: 10px;
}

.inventory-pagination {
  border-top: 1px solid var(--ui-border);
  min-height: 48px;
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 12px;
  display: flex;
}

.inventory-pagination > div {
  gap: 8px;
  display: flex;
}

.inventory-pagination button {
  border: 1px solid var(--ui-border);
  min-width: 72px;
  height: 32px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 8px;
}

.inventory-pagination button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.inventory-table {
  overflow: auto;
}

.inventory-tr {
  border-bottom: 1px solid #edf1ef;
  align-items: center;
  gap: 12px;
  min-width: 930px;
  padding: 12px 19px;
  font-size: 9px;
  display: grid;
}

.inventory-tr.head {
  color: #7c8781;
  background: #f7f9f8;
  padding-block: 10px;
}

.stock-grid .inventory-tr {
  grid-template-columns: 1.5fr 1fr .55fr .55fr .55fr .7fr .65fr;
}

.ledger-grid .inventory-tr {
  grid-template-columns: 1.25fr 1.25fr .9fr .8fr .65fr .65fr .6fr;
}

.inventory-tr b, .inventory-tr small {
  display: block;
}

.inventory-tr small {
  color: #8a958f;
  margin-top: 3px;
  font-size: 8px;
}

.inventory-tr em {
  color: #68736e;
  background: #eef2f0;
  border-radius: 12px;
  padding: 4px 7px;
  font-style: normal;
}

.inventory-tr em.enabled {
  color: #24724f;
  background: #e7f5ed;
}

.amber-text {
  color: #a96e1d;
}

.danger-text {
  color: #b64640;
}

.success-text {
  color: #237752;
}

.product-master-grid {
  background: #f6f8f7;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 14px;
  display: grid;
}

.product-master-grid > article {
  background: #fff;
  border: 1px solid #dde5e1;
  border-radius: 12px;
  overflow: hidden;
}

.product-master-grid > article.archived {
  opacity: .58;
}

.product-master-grid article > header {
  align-items: center;
  gap: 10px;
  padding: 13px;
  display: flex;
}

.product-master-grid article > header > img, .product-master-grid article > header > i {
  object-fit: cover;
  border-radius: 10px;
  width: 38px;
  height: 38px;
}

.product-master-grid article > header > i {
  color: #23704e;
  background: #e9f5ef;
  place-items: center;
  font-style: normal;
  display: grid;
}

.product-master-grid header > div {
  flex: 1;
}

.product-master-grid b, .product-master-grid small {
  display: block;
}

.product-master-grid small {
  color: #87928d;
  margin-top: 4px;
  font-size: 8px;
}

.product-master-grid header > em {
  color: #2a7354;
  font-size: 8px;
  font-style: normal;
}

.sku-stack {
  border-block: 1px solid #edf1ef;
}

.sku-stack > div {
  grid-template-columns: 1.4fr .8fr .55fr;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  font-size: 8px;
  display: grid;
}

.sku-stack > div + div {
  border-top: 1px dashed #e4eae7;
}

.sku-stack strong {
  text-align: right;
}

.product-master-grid article > footer {
  color: #7b8780;
  justify-content: space-between;
  align-items: center;
  padding: 10px 13px;
  font-size: 8px;
  display: flex;
}

.product-master-grid article > footer > span:last-child {
  gap: 6px;
  display: flex;
}

.product-master-grid article > footer button {
  background: #fff;
  border: 1px solid #d7e0db;
  border-radius: 7px;
  padding: 6px 9px;
}

.danger-action {
  color: #ac463f !important;
  background: #fff7f6 !important;
  border-color: #efc7c3 !important;
}

.transfer-list {
  background: #f6f8f7;
  padding: 12px;
}

.transfer-list > article {
  background: #fff;
  border: 1px solid #dee5e1;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.transfer-list article > header {
  border-bottom: 1px solid #edf1ef;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  display: flex;
}

.transfer-list header > b {
  flex: 1;
}

.transfer-list time {
  color: #87918c;
  font-size: 8px;
}

.transfer-status {
  color: #627069;
  background: #eef2f0;
  border-radius: 14px;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 8px;
  display: inline-flex;
}

.transfer-status i {
  font-style: normal;
}

.transfer-status.pending_approval, .transfer-status.pending_outbound {
  color: #9a6b1b;
  background: #fff2d8;
}

.transfer-status.in_transit, .transfer-status.partially_received {
  color: #326f99;
  background: #e8f2fb;
}

.transfer-status.discrepancy_pending {
  color: #ac4840;
  background: #fbe5e2;
}

.transfer-status.completed {
  color: #23714f;
  background: #e5f4ec;
}

.transfer-route {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  display: grid;
}

.transfer-route > span:last-child {
  text-align: right;
}

.transfer-route small, .transfer-route b {
  display: block;
}

.transfer-route small {
  color: #87928c;
  font-size: 8px;
}

.transfer-route b {
  margin-top: 5px;
  font-size: 11px;
}

.transfer-route > i {
  color: #45a477;
}

.transfer-lines > div {
  border-top: 1px dashed #e6ebe8;
  grid-template-columns: 1.6fr repeat(4, .7fr);
  gap: 10px;
  padding: 9px 14px;
  font-size: 8px;
  display: grid;
}

.transfer-lines small {
  color: #89938e;
  display: block;
}

.transfer-list article > footer, .purchase-list article > footer {
  background: #fafbfa;
  justify-content: flex-end;
  gap: 7px;
  padding: 10px 14px;
  display: flex;
}

.purchase-list {
  background: #f6f8f7;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
  padding: 13px;
  display: grid;
}

.purchase-list article {
  background: #fff;
  border: 1px solid #dfe6e2;
  border-radius: 12px;
  overflow: hidden;
}

.purchase-list header {
  border-bottom: 1px solid #edf1ef;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  display: grid;
}

.purchase-list small {
  color: #8a958f;
  margin-top: 4px;
  font-size: 8px;
  display: block;
}

.purchase-list em {
  color: #94681e;
  background: #fff2d8;
  border-radius: 12px;
  padding: 5px 7px;
  font-size: 8px;
  font-style: normal;
}

.purchase-list em.completed {
  color: #23704f;
  background: #e6f4ec;
}

.purchase-list article > div {
  grid-template-columns: 1fr .6fr .45fr;
  gap: 8px;
  padding: 9px 13px;
  font-size: 8px;
  display: grid;
}

.operation-cards, .warehouse-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.operation-cards > article, .warehouse-grid > article {
  background: #fff;
  border: 1px solid #dee6e2;
  border-radius: 13px;
  padding: 20px;
}

.operation-cards > article > i {
  color: #267252;
  background: #e7f4ed;
  border-radius: 11px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-style: normal;
  display: grid;
}

.operation-cards h3 {
  margin: 15px 0 7px;
}

.operation-cards p {
  color: #7f8b84;
  min-height: 47px;
  font-size: 9px;
  line-height: 1.8;
}

.operation-cards b {
  color: #3d5047;
  margin: 10px 0;
  font-size: 8px;
  display: block;
}

.operation-cards button {
  border: 0;
  border-radius: 8px;
  margin-top: 8px;
  padding: 8px 12px;
}

.warehouse-grid {
  background: #f6f8f7;
  padding: 14px;
}

.warehouse-grid > article.inactive {
  opacity: .55;
}

.warehouse-grid header {
  align-items: center;
  gap: 10px;
  display: flex;
}

.warehouse-grid header > i {
  color: #287352;
  background: #e8f4ed;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-style: normal;
  display: grid;
}

.warehouse-grid header > div {
  flex: 1;
}

.warehouse-grid small {
  color: #89948e;
  font-size: 8px;
  display: block;
}

.warehouse-grid em {
  color: #27714f;
  font-size: 8px;
  font-style: normal;
}

.warehouse-grid p {
  color: #7e8983;
  min-height: 28px;
  font-size: 9px;
}

.warehouse-grid footer {
  justify-content: space-between;
  font-size: 8px;
  display: flex;
}

.inventory-modal-layer {
  z-index: 100;
}

.inventory-dialog {
  background: #fff;
  border-radius: 15px;
  width: min(920px, 100vw - 28px);
  max-height: calc(100vh - 30px);
  overflow: auto;
  box-shadow: 0 25px 80px #18392d38;
}

.inventory-dialog > header {
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid #e5ebe8;
  justify-content: space-between;
  align-items: center;
  padding: 17px 20px;
  display: flex;
  position: sticky;
  top: 0;
}

.inventory-dialog > header span {
  color: #2c7a58;
  letter-spacing: 1.3px;
  font-size: 8px;
}

.inventory-dialog > header h2 {
  margin: 5px 0 0;
  font-size: 18px;
}

.inventory-dialog > header button {
  background: none;
  border: 0;
  font-size: 20px;
}

.inventory-dialog-body {
  background: #f8faf9;
  padding: 20px;
}

.inventory-form {
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  display: grid;
}

.inventory-form > label, .inventory-form fieldset {
  color: #64716a;
  flex-direction: column;
  gap: 6px;
  font-size: 9px;
  display: flex;
}

.inventory-form input, .inventory-form select {
  background: #fff;
  border: 1px solid #d7e0db;
  border-radius: 8px;
  min-width: 0;
  padding: 9px 10px;
}

.inventory-form .full {
  grid-column: 1 / -1;
}

.inventory-form fieldset {
  border: 1px solid #dce4e0;
  border-radius: 10px;
  margin: 0;
  padding: 11px;
}

.inventory-form fieldset legend {
  padding: 0 5px;
}

.inventory-form .inline-rules, .inline-checkbox {
  background: #eef6f2;
  border-radius: 9px;
  flex-direction: row;
  gap: 20px;
  padding: 11px;
  display: flex;
}

.inventory-form .inline-rules label, .inline-checkbox {
  align-items: center;
  gap: 6px;
  display: flex;
}

.inventory-form .inline-rules input, .inline-checkbox input {
  width: auto;
}

.form-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 5px;
  display: flex;
}

.form-actions button {
  background: #fff;
  border: 1px solid #d4ddd8;
  border-radius: 8px;
  padding: 9px 14px;
}

.form-error {
  color: #ad4741;
  background: #fff0ef;
  border-radius: 8px;
  margin: 0;
  padding: 9px 11px;
  font-size: 9px;
}

.sku-editor, .transfer-line-editor {
  background: #fff;
  border: 1px solid #dbe4df;
  border-radius: 11px;
  overflow: hidden;
}

.sku-editor > header, .transfer-line-editor > header {
  background: #f2f6f4;
  justify-content: space-between;
  align-items: center;
  padding: 11px 13px;
  display: flex;
}

.sku-editor header small {
  color: #86918b;
  font-size: 8px;
  display: block;
}

.sku-editor header button, .transfer-line-editor header button {
  background: #fff;
  border: 1px solid #d1ddd7;
  border-radius: 7px;
  padding: 6px 9px;
}

.sku-editor-row {
  border-top: 1px solid #edf1ef;
  grid-template-columns: repeat(5, minmax(80px, 1fr)) 1.5fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 10px;
  display: grid;
}

.sku-editor-row label {
  align-items: center;
  gap: 4px;
  font-size: 8px;
  display: flex;
}

.sku-editor-row label input {
  width: auto;
}

.sku-editor-row.product-edit-sku {
  grid-template-columns: 1.2fr 1fr 1.6fr .6fr .7fr;
  font-size: 9px;
}

.product-edit-sku small {
  color: #87928c;
  margin-top: 4px;
  display: block;
}

.product-edit-sku em {
  color: #287453;
  font-style: normal;
}

.transfer-line-editor > div {
  border-top: 1px solid #edf1ef;
  grid-template-columns: 1.5fr 1fr .7fr auto auto;
  gap: 7px;
  padding: 10px;
  display: grid;
}

.purchase-line-editor > header span small {
  color: #74847c;
  margin-top: 2px;
  font-size: 9px;
  display: block;
}

.purchase-line-editor > div {
  grid-template-columns: minmax(190px, 1.5fr) minmax(150px, 1fr) .75fr .9fr auto auto;
  align-items: end;
}

.purchase-line-editor > div > label {
  color: #65736c;
  gap: 4px;
  font-size: 9px;
  display: grid;
}

.purchase-line-editor > div > strong {
  white-space: nowrap;
  color: #263a31;
  align-self: center;
  font-size: 10px;
}

.purchase-dialog-total {
  color: #214f3c;
  margin-right: auto;
  font-size: 12px;
}

.category-management {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  display: grid;
}

.category-management > div article {
  background: #fff;
  border: 1px solid #dce4e0;
  border-radius: 9px;
  margin-bottom: 7px;
  padding: 11px;
}

.category-management article small, .category-management article span {
  color: #87928c;
  font-size: 8px;
  display: block;
}

.category-management article span {
  margin: 7px 0 0 12px;
}

.category-management .inventory-form {
  display: block;
}

.category-management .inventory-form label, .category-management .inventory-form button {
  flex-direction: column;
  margin-bottom: 10px;
  display: flex;
}

.import-flow ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.import-flow li {
  border-bottom: 1px solid #e4eae7;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  display: grid;
}

.import-flow li > i {
  color: #277251;
  background: #e7f4ed;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  font-style: normal;
  display: grid;
}

.import-flow li b, .import-flow li small {
  display: block;
}

.import-flow li small {
  color: #86918b;
  font-size: 8px;
}

.import-flow li button, .file-button {
  background: #fff;
  border: 1px solid #d2dcd7;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 8px;
}

.file-button input {
  display: none;
}

.import-preview {
  background: #fff;
  border: 1px solid #dce4e0;
  border-radius: 9px;
  margin: 12px 0;
}

.import-preview > div {
  border-bottom: 1px solid #edf1ef;
  grid-template-columns: 30px 1fr 2fr;
  gap: 8px;
  padding: 8px 11px;
  font-size: 8px;
  display: grid;
}

.import-preview small {
  color: #849089;
}

.inventory-dialog .import-flow > .form-actions {
  display: flex;
}

.inventory-empty {
  grid-column: 1 / -1;
}

.inventory-management img {
  max-width: 100%;
}

@media (max-width: 1100px) {
  .inventory-overview-grid, .product-master-grid, .purchase-list {
    grid-template-columns: 1fr;
  }

  .operation-cards, .warehouse-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sku-editor-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .transfer-pipeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .transfer-pipeline > div:after {
    display: none;
  }
}

@media (max-width: 720px) {
  .inventory-hero-actions, .inventory-toolbar, .inventory-toolbar > div:last-child {
    flex-direction: column;
    align-items: stretch;
  }

  .inventory-section-tabs {
    width: 100%;
  }

  .operation-cards, .warehouse-grid, .category-management, .inventory-form {
    grid-template-columns: 1fr;
  }

  .inventory-form .full {
    grid-column: auto;
  }

  .sku-editor-row, .transfer-line-editor > div {
    grid-template-columns: 1fr;
  }

  .transfer-lines > div {
    grid-template-columns: 1fr 1fr;
  }

  .inventory-overview-grid {
    display: block;
  }

  .inventory-overview-grid > * {
    margin-bottom: 10px;
  }
}

.cashier-sku-backdrop {
  z-index: 120;
}

.cashier-sku-dialog {
  border: 1px solid var(--ui-border);
  width: min(620px, 100vw - 28px);
  max-height: calc(100vh - 30px);
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 17px;
  overflow: auto;
}

.cashier-sku-dialog > header {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: center;
  padding: 18px 21px;
  display: flex;
}

.cashier-sku-dialog > header small {
  color: var(--ui-accent);
  letter-spacing: 1.4px;
  font-size: 9px;
}

.cashier-sku-dialog > header h3 {
  color: var(--ui-text);
  margin: 5px 0 0;
  font-size: 18px;
  font-weight: 800;
}

.cashier-sku-dialog > header button {
  color: var(--ui-text);
  background: none;
  border: 0;
  font-size: 22px;
}

.cashier-sku-dialog > section, .cashier-sku-dialog > .cashier-sku-quantity, .cashier-serial-input {
  padding: 16px 21px 0;
  display: block;
}

.cashier-sku-dialog section > label, .cashier-sku-quantity label, .cashier-serial-input {
  color: var(--ui-muted);
  font-size: 9px;
}

.cashier-spec-groups {
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  display: flex;
}

.cashier-spec-group {
  gap: 8px;
  display: grid;
}

.cashier-spec-group > b {
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 800;
}

.cashier-spec-values {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.cashier-spec-values button {
  border: 1px solid var(--ui-border-strong);
  min-width: 88px;
  min-height: 40px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
}

.cashier-spec-values button.selected {
  border-color: var(--ui-accent);
  color: var(--ui-accent-ink);
  background: var(--ui-accent-soft);
  box-shadow: 0 0 0 1px var(--ui-accent) inset;
}

.cashier-spec-values button:disabled {
  cursor: not-allowed;
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  opacity: .5;
}

.cashier-selected-sku {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 11px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 12px 14px;
  display: flex;
}

.cashier-selected-sku > div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.cashier-selected-sku > div:last-child {
  text-align: right;
  flex: none;
  justify-items: end;
}

.cashier-selected-sku b, .cashier-selected-sku strong {
  color: var(--ui-text);
}

.cashier-selected-sku small {
  color: var(--ui-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.cashier-sku-quantity {
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  display: flex !important;
}

.cashier-sku-quantity label {
  gap: 6px;
  display: grid;
}

.cashier-sku-quantity input {
  border: 1px solid var(--ui-border);
  width: 150px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 9px;
  padding: 10px;
}

.cashier-sku-quantity strong {
  color: var(--ui-accent-ink);
}

.cashier-sku-totals {
  justify-items: end;
  gap: 5px;
  display: grid;
}

.cashier-sku-totals small {
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 800;
}

.cashier-serial-input textarea {
  border: 1px solid var(--ui-border);
  width: 100%;
  min-height: 78px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  resize: vertical;
  border-radius: 9px;
  margin-top: 7px;
  padding: 10px;
  display: block;
}

.cashier-sku-dialog > .form-error {
  margin: 12px 21px 0;
}

.cashier-sku-dialog > footer {
  border-top: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 21px;
  display: flex;
}

.cashier-sku-dialog > footer button {
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 9px;
  padding: 9px 15px;
}

.cashier-sku-dialog > footer .primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

.checkout-line-variant-edit {
  width: max-content;
  color: var(--ui-accent);
  background: none;
  border: 0;
  border-bottom: 1px solid;
  border-radius: 0;
  margin-top: 5px;
  padding: 2px 0;
  font-size: 9px;
  font-weight: 750;
}

@media (max-width: 640px) {
  .cashier-sku-quantity {
    flex-direction: column;
    align-items: stretch !important;
  }
}

.inventory-management {
  gap: 12px;
  display: grid;
}

.inventory-top {
  background: linear-gradient(115deg, #183a30, #29694f);
  grid-template-columns: 1fr auto;
  padding: 16px 22px;
  box-shadow: 0 16px 40px #15392c24;
}

.inventory-top > div > span {
  color: #84d7b2;
  font-size: 9px;
}

.inventory-top h2 {
  margin: 5px 0;
  font-size: 20px;
}

.inventory-top p {
  color: #bcd5ca;
  font-size: 12px;
}

.inventory-top.business-hero {
  grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
  align-items: stretch;
  display: grid;
}

.inventory-hero-alerts {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 24%, var(--ui-border));
  min-width: 0;
  max-height: 116px;
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-panel-solid) 88%, transparent);
  border-radius: 11px;
  grid-template-rows: auto 1fr;
  display: grid;
  overflow: hidden;
  box-shadow: 0 8px 22px #122b2214;
}

.inventory-hero-alerts > header {
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 8px 6px 11px;
  display: flex;
}

.inventory-hero-alerts > header > div {
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.inventory-hero-alerts h3 {
  color: var(--ui-text);
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
}

.inventory-hero-alerts header small {
  color: var(--ui-muted);
  white-space: nowrap;
  font-size: 7px;
}

.inventory-hero-alerts header button {
  border: 1px solid var(--ui-border);
  min-height: 25px;
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  white-space: nowrap;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 8px;
}

.inventory-hero-alert-list {
  min-height: 0;
  padding: 2px 9px 4px;
  overflow: hidden;
}

.inventory-hero-alert-list > button {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 62%, transparent);
  width: 100%;
  min-height: 31px;
  color: var(--ui-text);
  text-align: left;
  background: none;
  border-radius: 0;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  display: grid;
}

.inventory-hero-alert-list > button:last-of-type {
  border-bottom: 0;
}

.inventory-hero-alert-list > button.read {
  opacity: .52;
}

.inventory-hero-alert-list i {
  color: #a45e22;
  background: #fff0df;
  border-radius: 5px;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.inventory-hero-alert-list span, .inventory-hero-alert-list b, .inventory-hero-alert-list small {
  min-width: 0;
  display: block;
}

.inventory-hero-alert-list b, .inventory-hero-alert-list small {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.inventory-hero-alert-list b {
  font-size: 8px;
}

.inventory-hero-alert-list small, .inventory-hero-alert-list time {
  color: var(--ui-muted);
  font-size: 7px;
}

.inventory-hero-alert-list p {
  color: var(--ui-muted);
  text-align: center;
  margin: 0;
  font-size: 8px;
  line-height: 66px;
}

.inventory-hero-actions button {
  min-height: 36px;
  padding-inline: 14px;
  font-size: 11px;
  transition: background-color .3s ease-out, border-color .3s ease-out, transform .3s ease-out;
}

.inventory-hero-actions button:hover {
  background: #ffffff20;
  transform: translateY(-1px);
}

.inventory-section-tabs {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  margin: 0;
  padding: 5px;
}

.inventory-section-tabs button {
  min-height: 36px;
  color: var(--ui-muted);
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  transition: color .3s ease-out, background-color .3s ease-out, box-shadow .3s ease-out;
}

.inventory-section-tabs button.active {
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
}

.inventory-card {
  color: var(--ui-text);
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  box-shadow: 0 10px 30px #122b220b;
}

.inventory-card > header, .inventory-toolbar {
  border-color: var(--ui-border);
  min-height: 66px;
  padding: 13px 16px;
}

.inventory-card h3, .inventory-toolbar h3 {
  font-size: 15px;
}

.inventory-card header span, .inventory-toolbar p {
  color: var(--ui-muted);
  margin-top: 4px;
  font-size: 11px;
}

.inventory-card header button, .inventory-toolbar button, .inventory-table button, .transfer-list button, .purchase-list button {
  min-height: 32px;
  color: var(--ui-text);
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  padding: 0 11px;
  font-size: 11px;
  transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out;
}

.inventory-management button.primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-on-accent, #fff);
}

.inventory-toolbar > div:last-child {
  align-items: center;
}

.inventory-toolbar input, .inventory-toolbar select, .product-stock-filters input, .product-stock-filters select, .overview-filterbar select, .operation-records select {
  min-width: 150px;
  height: 36px;
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 11px;
}

.inventory-overview {
  gap: 12px;
  display: grid;
}

.overview-filterbar {
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 15px 17px;
  display: flex;
}

.overview-filterbar > div:last-child {
  gap: 8px;
  display: flex;
}

.overview-filterbar span {
  color: var(--ui-accent);
  letter-spacing: 1.2px;
  font-size: 9px;
  font-weight: 800;
}

.overview-filterbar h3 {
  margin: 4px 0 2px;
  font-size: 16px;
}

.overview-filterbar p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 11px;
}

.overview-focus-grid {
  grid-template-columns: 1.35fr .85fr;
  gap: 12px;
  display: grid;
}

.overview-metrics {
  margin: 0;
}

.overview-metrics article {
  color: var(--ui-text);
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
}

.overview-metrics span {
  color: var(--ui-muted);
  font-size: 11px;
}

.overview-metrics strong {
  font-size: 22px;
}

.overview-metrics small {
  color: var(--ui-muted);
  font-size: 10px;
}

.overview-breakdown-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.overview-breakdown-list {
  max-height: 300px;
  padding: 5px 16px 12px;
  overflow: auto;
}

.overview-breakdown-list > div {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: center;
  min-height: 51px;
  padding: 8px 2px;
  display: flex;
}

.overview-breakdown-list b, .overview-breakdown-list small {
  display: block;
}

.overview-breakdown-list b {
  font-size: 12px;
}

.overview-breakdown-list small {
  color: var(--ui-muted);
  margin-top: 3px;
  font-size: 10px;
}

.overview-breakdown-list strong {
  color: var(--ui-accent);
  font-size: 15px;
}

.transfer-pipeline {
  padding: 22px 14px;
}

.transfer-pipeline span {
  color: var(--ui-muted);
  font-size: 10px;
}

.transfer-pipeline b {
  color: var(--ui-text);
}

.notification-list > button {
  color: var(--ui-text);
  border-color: var(--ui-border);
  grid-template-columns: 28px 1fr auto;
}

.notification-list b {
  font-size: 11px;
}

.notification-list small, .notification-list time {
  color: var(--ui-muted);
  font-size: 9px;
}

.product-stock-filters {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(150px, .7fr));
  gap: 9px;
  padding: 11px 16px;
  display: grid;
}

.product-stock-filters > * {
  width: 100%;
}

.product-stock-title {
  flex: none;
}

.product-stock-toolbar {
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.product-stock-search {
  align-items: center;
  gap: 5px;
  display: flex;
}

.inventory-toolbar .product-stock-search input {
  flex: 0 0 220px;
  width: 220px !important;
  min-width: 220px !important;
}

.inventory-toolbar .product-stock-toolbar .category-filter, .inventory-toolbar .product-stock-toolbar .location-filter {
  width: 105px;
  min-width: 105px;
}

.product-stock-search .search-button {
  min-width: 48px;
  color: var(--ui-accent);
  border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--ui-border));
  background: var(--ui-accent-soft);
  font-weight: 700;
}

.product-stock-toolbar-divider {
  background: var(--ui-border);
  width: 1px;
  height: 24px;
  margin-inline: 2px;
}

.inventory-batchbar {
  min-height: 42px;
  color: var(--ui-muted);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  justify-content: space-between;
  align-items: center;
  padding: 5px 16px;
  font-size: 11px;
  display: flex;
}

.inventory-batchbar > div {
  gap: 7px;
  display: flex;
}

.inventory-batchbar b {
  color: var(--ui-accent);
}

.inventory-batchbar button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.stock-grid .inventory-tr {
  grid-template-columns: 24px minmax(190px, 1.55fr) minmax(95px, .72fr) minmax(110px, .85fr) 60px 60px 60px 85px 80px minmax(190px, 1.25fr);
  min-width: 1220px;
}

.inventory-tr {
  min-height: 58px;
  color: var(--ui-text);
  border-color: var(--ui-border);
  padding: 8px 16px;
  font-size: 11px;
}

.inventory-tr.head {
  min-height: 40px;
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  font-size: 10px;
  font-weight: 700;
}

.inventory-tr:hover:not(.head) {
  background: color-mix(in srgb, var(--ui-accent) 3.5%, var(--ui-panel-solid));
}

.inventory-tr > input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--ui-accent);
}

.inventory-tr small {
  color: var(--ui-muted);
  font-size: 9px;
}

.stock-product-cell {
  align-items: center;
  gap: 9px;
  display: flex !important;
}

.stock-product-cell > img, .stock-product-cell > i {
  object-fit: cover;
  width: 34px;
  height: 34px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 9px;
  flex: 0 0 34px;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  display: grid;
}

.stock-row-actions {
  align-items: center;
  gap: 5px;
  display: flex;
}

.stock-row-actions .ghost {
  color: var(--ui-accent);
  border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border));
  background: var(--ui-accent-soft);
}

.stock-product-summary-row {
  background: var(--ui-panel-solid);
  min-height: 68px;
  box-shadow: inset 3px 0 0
    color-mix(in srgb, var(--ui-accent) 62%, transparent);
}

.stock-product-summary-row > span > b {
  font-size: 12px;
}

.stock-sku-child-row {
  background: color-mix(in srgb, var(--ui-accent) 2.5%, var(--ui-panel-soft));
}

.stock-sku-child-row > span:first-of-type {
  padding-left: 28px;
}

.stock-sku-child-row .stock-product-cell > img, .stock-sku-child-row .stock-product-cell > i {
  border-radius: 7px;
  flex-basis: 28px;
  width: 28px;
  height: 28px;
}

.stock-group-expand {
  min-width: 78px;
}

.stock-row-more {
  color: var(--ui-muted);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 7px 6px;
}

.stock-row-action-menu {
  z-index: 1400;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 9px;
  gap: 5px;
  min-width: 132px;
  padding: 7px;
  display: grid;
  position: fixed;
  box-shadow: 0 12px 30px #0e231b29;
}

.stock-row-action-menu button {
  border: 1px solid var(--ui-border);
  width: 100%;
  min-height: 32px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 7px;
  padding: 7px 10px;
}

.stock-row-action-menu button:hover, .stock-row-action-menu button:focus-visible {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border));
  background: var(--ui-accent-soft);
  outline: none;
}

.transfer-list, .purchase-list {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  padding: 0;
}

.transfer-record-row {
  grid-template-columns: 1.15fr 1fr 1fr 1.1fr .8fr .85fr 1.45fr;
  align-items: center;
  gap: 12px;
  min-width: 1060px;
  min-height: 62px;
  padding: 9px 16px;
  display: grid;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: var(--ui-panel-solid) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.transfer-record-row.head, .purchase-record-row.head, .operation-record-row.head {
  min-height: 40px;
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 700;
  background: var(--ui-panel-soft) !important;
}

.transfer-record-row b, .transfer-record-row small, .purchase-record-row b, .purchase-record-row small {
  display: block;
}

.transfer-record-row small, .purchase-record-row small {
  color: var(--ui-muted);
  margin-top: 4px;
  font-size: 9px;
}

.record-actions {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.transfer-status {
  width: max-content;
}

.purchase-record-table {
  display: block;
  overflow: auto;
}

.purchase-record-row {
  border-bottom: 1px solid var(--ui-border);
  grid-template-columns: 1.15fr .9fr .9fr 1.1fr .8fr .75fr .7fr .8fr;
  align-items: center;
  gap: 12px;
  min-width: 1080px;
  min-height: 62px;
  padding: 9px 16px;
  font-size: 11px;
  display: grid;
}

.purchase-record-row em, .record-complete {
  width: max-content;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-style: normal;
  display: inline-flex;
}

.operation-center {
  gap: 12px;
  display: grid;
}

.operation-cards.compact {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.operation-cards.compact > article {
  min-height: 76px;
  color: var(--ui-text);
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  display: grid;
}

.operation-cards.compact > article > i {
  width: 36px;
  height: 36px;
  margin: 0;
}

.operation-cards.compact h3 {
  margin: 0 0 4px;
  font-size: 13px;
}

.operation-cards.compact p {
  min-height: 0;
  color: var(--ui-muted);
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}

.operation-cards.compact button {
  white-space: nowrap;
  margin: 0;
}

.operation-records {
  overflow: hidden;
}

.operation-record-row {
  border-bottom: 1px solid var(--ui-border);
  grid-template-columns: 1fr .75fr 1.15fr .9fr .65fr .65fr .6fr;
  align-items: center;
  gap: 12px;
  min-width: 900px;
  min-height: 55px;
  padding: 8px 16px;
  font-size: 11px;
  display: grid;
}

.operation-record-row b, .operation-record-row small {
  display: block;
}

.operation-record-row small {
  color: var(--ui-muted);
  margin-top: 3px;
  font-size: 9px;
}

.stocktake-batch-table {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  overflow: auto;
}

.stocktake-batch-row {
  border-bottom: 1px solid var(--ui-border);
  grid-template-columns: 45px minmax(170px, 1.5fr) minmax(120px, 1fr) 90px 110px 80px;
  align-items: center;
  gap: 10px;
  min-width: 720px;
  min-height: 52px;
  padding: 7px 10px;
  font-size: 11px;
  display: grid;
}

.stocktake-batch-row.head {
  min-height: 36px;
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  font-size: 10px;
}

.stocktake-batch-row b, .stocktake-batch-row small {
  display: block;
}

.stocktake-batch-row small {
  color: var(--ui-muted);
  font-size: 9px;
}

.stocktake-batch-row input[type="number"] {
  width: 100px;
}

@media (max-width: 1050px) {
  .inventory-top.business-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  }

  .overview-focus-grid, .overview-breakdown-grid {
    grid-template-columns: 1fr;
  }

  .product-stock-filters {
    grid-template-columns: 1fr 1fr;
  }

  .operation-cards.compact {
    grid-template-columns: 1fr;
  }

  .product-stock-panel .inventory-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-stock-toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .inventory-top.business-hero {
    grid-template-columns: 1fr;
  }

  .inventory-hero-alerts {
    width: 100%;
    max-height: 116px;
  }
}

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

  .overview-filterbar, .overview-filterbar > div:last-child {
    flex-direction: column;
    align-items: stretch;
  }

  .product-stock-filters {
    grid-template-columns: 1fr;
  }

  .inventory-batchbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .product-stock-create-actions {
    flex-wrap: wrap;
  }

  .inventory-toolbar .product-stock-search input {
    flex-basis: 180px;
    width: 180px !important;
    min-width: 180px !important;
  }

  .product-stock-toolbar-divider {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inventory-management *, .inventory-management :before, .inventory-management :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

.inventory-product-create-layer {
  z-index: 1150;
  align-items: flex-start;
  padding: 24px;
  overflow: auto;
}

.inventory-product-create {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: min(1120px, 100vw - 40px);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 18px;
  margin: auto;
  overflow: hidden;
}

.inventory-product-create-head {
  border-bottom: 1px solid var(--ui-border);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ui-accent) 12%, var(--ui-panel-solid)),
    var(--ui-panel-solid));
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  display: flex;
}

.inventory-product-create-head small {
  color: var(--ui-accent);
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 800;
}

.inventory-product-create-head h2 {
  color: var(--ui-text);
  margin: 5px 0;
  font-size: 22px;
}

.inventory-product-create-head p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 12px;
}

.inventory-product-create-head > button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 34px;
  height: 34px;
  color: var(--ui-text);
  border-radius: 9px;
  align-self: flex-start;
  font-size: 20px;
}

.inventory-product-create-body {
  background: var(--ui-panel-soft);
  gap: 18px;
  max-height: calc(100vh - 190px);
  padding: 20px 24px;
  display: grid;
  overflow: auto;
}

.inventory-create-section {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 13px;
  overflow: hidden;
}

.inventory-create-section > header {
  border-bottom: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-panel-solid));
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  display: flex;
}

.inventory-create-section > header > div {
  gap: 3px;
  display: grid;
}

.inventory-create-section > header b {
  color: var(--ui-text);
  font-size: 14px;
}

.inventory-create-section > header small {
  color: var(--ui-muted);
  font-size: 10px;
}

.inventory-create-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  display: grid;
}

.inventory-create-grid > label, .inventory-expiry-config > label {
  align-content: start;
  gap: 7px;
  display: grid;
}

.inventory-create-grid span, .inventory-expiry-config span {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 700;
}

.inventory-create-grid input, .inventory-create-grid select, .inventory-expiry-config input, .inventory-expiry-config select, .inventory-preset-picker select, .inventory-custom-preset input, .inventory-bulk-fill input, .inventory-variant-table input {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 100%;
  height: 42px;
  color: var(--ui-text);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
}

.inventory-create-grid small, .inventory-expiry-config small {
  color: var(--ui-muted);
  font-size: 9px;
  line-height: 1.5;
}

.inventory-code-input {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  display: grid;
}

.inventory-code-input button, .inventory-preset-picker button, .inventory-custom-preset button, .inventory-bulk-fill button {
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  white-space: nowrap;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
}

.inventory-stock-mode {
  gap: 10px;
  padding: 16px 16px 0;
  display: flex;
}

.inventory-stock-mode label {
  border: 1px solid var(--ui-border);
  color: var(--ui-muted);
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.inventory-stock-mode label.active {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-panel-solid));
  color: var(--ui-accent);
}

.inventory-expiry-config {
  background: #fffaf0;
  border: 1px dashed #d6a851;
  border-radius: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 16px 16px;
  padding: 16px;
  display: grid;
}

.inventory-expiry-config .inventory-check {
  color: #704f16;
  align-self: end;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  font-size: 11px;
  display: flex;
}

.inventory-expiry-config .inventory-check input {
  width: 17px;
  height: 17px;
}

.inventory-multi-switch {
  color: var(--ui-accent);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  display: flex !important;
}

.inventory-multi-switch input {
  width: 18px;
  height: 18px;
}

.inventory-spec-builder {
  gap: 14px;
  padding: 16px;
  display: grid;
}

.inventory-preset-picker {
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 8px;
  display: grid;
}

.inventory-spec-builder > article {
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 12px;
}

.inventory-spec-builder > article > header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.inventory-spec-builder > article > header button {
  color: #a44d45;
  background: none;
  border: 0;
  font-size: 11px;
}

.inventory-spec-builder > article > div {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.inventory-spec-builder > article label {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 7px;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  font-size: 11px;
  display: flex;
}

.inventory-custom-preset {
  border-top: 1px dashed var(--ui-border);
  grid-template-columns: 180px minmax(260px, 1fr) auto;
  gap: 8px;
  padding-top: 13px;
  display: grid;
}

.inventory-bulk-fill {
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-panel-soft));
  border-radius: 10px;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  gap: 9px;
  padding: 12px;
  display: grid;
}

.inventory-bulk-fill label {
  color: var(--ui-muted);
  gap: 5px;
  font-size: 10px;
  display: grid;
}

.inventory-variant-table {
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  overflow: auto;
}

.inventory-variant-table > header, .inventory-variant-table > div {
  grid-template-columns: minmax(160px, 1.3fr) minmax(150px, 1fr) minmax(130px, 1fr) 110px 110px 110px;
  align-items: center;
  gap: 8px;
  min-width: 850px;
  padding: 9px 10px;
  display: grid;
}

.inventory-variant-table > header {
  background: var(--ui-panel-soft);
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 800;
}

.inventory-variant-table > div {
  border-top: 1px solid var(--ui-border);
}

.inventory-variant-table > div > b {
  color: var(--ui-text);
  font-size: 11px;
}

.inventory-variant-table input {
  height: 36px;
}

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

.inventory-create-rules > label {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 11px;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  display: flex;
}

.inventory-create-rules input {
  width: 18px;
  height: 18px;
}

.inventory-create-rules span {
  gap: 3px;
  display: grid;
}

.inventory-create-rules b {
  color: var(--ui-text);
  font-size: 12px;
}

.inventory-create-rules small {
  color: var(--ui-muted);
  font-size: 10px;
}

.inventory-create-error {
  color: #a23931;
  background: #fff2f0;
  border: 1px solid #edb5ae;
  border-radius: 9px;
  margin: 0;
  padding: 11px 13px;
  font-size: 12px;
}

.inventory-product-create > footer {
  border-top: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 24px;
  display: flex;
}

.inventory-product-create > footer button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  height: 40px;
  color: var(--ui-text);
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 700;
}

.inventory-product-create > footer .primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

@media (max-width: 860px) {
  .inventory-product-create-layer {
    padding: 0;
  }

  .inventory-product-create {
    border-radius: 0;
    width: 100vw;
    min-height: 100vh;
  }

  .inventory-product-create-body {
    max-height: none;
  }

  .inventory-create-grid, .inventory-expiry-config, .inventory-create-rules, .inventory-custom-preset, .inventory-bulk-fill, .inventory-preset-picker {
    grid-template-columns: 1fr;
  }
}

.inventory-product-create-layer {
  padding: 12px;
}

.inventory-product-create {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1160px, 100vw - 24px);
  max-height: calc(100dvh - 24px);
  display: grid;
}

.inventory-product-create-head {
  padding: 14px 18px;
}

.inventory-product-create-head h2 {
  margin: 3px 0;
  font-size: 19px;
}

.inventory-product-create-head > button {
  width: 31px;
  height: 31px;
}

.inventory-product-create-body {
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  min-height: 0;
  max-height: none;
  padding: 12px 18px;
}

.inventory-create-section > header {
  padding: 10px 13px;
}

.inventory-create-grid {
  gap: 10px 12px;
  padding: 12px;
}

.inventory-create-grid input, .inventory-create-grid select, .inventory-expiry-config input, .inventory-expiry-config select, .inventory-preset-picker select, .inventory-custom-preset input, .inventory-bulk-fill input {
  height: 38px;
}

.inventory-create-basic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventory-unit-field {
  grid-column: span 2;
}

.inventory-unit-editor {
  grid-template-columns: minmax(110px, 1fr) minmax(100px, .72fr) auto;
  gap: 7px;
  display: grid;
}

.inventory-unit-editor button, .inventory-code-input button, .inventory-preset-picker button, .inventory-custom-preset button {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 34%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-panel-solid));
  min-height: 38px;
  color: var(--ui-accent);
  white-space: nowrap;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
}

.inventory-unit-editor button:hover, .inventory-code-input button:hover, .inventory-preset-picker button:hover, .inventory-custom-preset button:hover {
  background: color-mix(in srgb, var(--ui-accent) 17%, var(--ui-panel-solid));
}

.inventory-stock-mode {
  padding: 12px 12px 0;
}

.inventory-stock-mode label {
  padding: 8px 12px;
}

.inventory-expiry-config {
  gap: 10px 12px;
  margin: 0 12px 12px;
  padding: 12px;
}

.inventory-create-rules {
  gap: 10px;
}

.inventory-create-rules > label {
  align-items: center;
  padding: 10px 12px;
}

.inventory-create-rules input {
  flex: none;
}

.inventory-multi-section {
  transition: border-color .2s, box-shadow .2s;
}

.inventory-multi-section.is-open {
  border-color: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-accent) 8%, transparent);
}

.inventory-create-section > .inventory-multi-head {
  justify-content: flex-start;
}

.inventory-multi-head > div {
  min-width: 0;
}

.inventory-multi-head > em {
  color: var(--ui-accent);
  margin-left: auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.inventory-spec-builder {
  gap: 10px;
  padding: 12px;
}

.inventory-spec-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.inventory-spec-flow span {
  background: var(--ui-panel-soft);
  color: var(--ui-muted);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
}

.inventory-spec-flow span.active {
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-panel-solid));
  color: var(--ui-accent);
}

.inventory-spec-empty {
  border: 1px dashed var(--ui-border-strong);
  color: var(--ui-muted);
  text-align: center;
  border-radius: 8px;
  margin: 0;
  padding: 10px 12px;
  font-size: 11px;
}

.inventory-custom-preset {
  padding-top: 10px;
}

.inventory-spec-value-add, .inventory-spec-value-editor > div {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  margin-top: 10px;
  gap: 8px !important;
  display: grid !important;
}

.inventory-spec-value-add input, .inventory-spec-value-editor input {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-width: 0;
  height: 38px;
  color: var(--ui-text);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
}

.inventory-spec-value-add button, .inventory-spec-value-editor button {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 34%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-panel-solid));
  min-height: 38px;
  color: var(--ui-accent);
  white-space: nowrap;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
}

.inventory-spec-value-add .secondary {
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  color: var(--ui-muted);
}

.inventory-spec-value-editor {
  border-top: 1px dashed var(--ui-border-strong);
  margin-top: 10px;
  padding-top: 10px;
  gap: 8px !important;
  display: grid !important;
}

.inventory-spec-value-editor > div {
  margin-top: 0;
}

.inventory-spec-value-editor .danger {
  color: #a23931;
  background: #fff2f0;
  border-color: #d9948c;
}

.inventory-bulk-fill {
  padding: 10px;
}

.inventory-product-create .online-product-authoring {
  margin-top: 0;
}

.inventory-product-create .online-product-authoring > header {
  padding: 11px 14px;
}

.inventory-product-create .online-product-body {
  gap: 12px;
  padding: 14px;
}

.inventory-product-create > footer {
  padding: 10px 18px;
}

.inventory-product-create > footer button {
  height: 38px;
}

@media (max-width: 1000px) {
  .inventory-create-basic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .inventory-product-create-layer {
    padding: 0;
  }

  .inventory-product-create {
    border-radius: 0;
    width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .inventory-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .inventory-create-grid, .inventory-create-basic-grid, .inventory-spec-flow {
    grid-template-columns: 1fr;
  }

  .inventory-unit-field {
    grid-column: auto;
  }

  .inventory-unit-editor {
    grid-template-columns: 1fr auto;
  }

  .inventory-unit-editor select {
    grid-column: 1 / -1;
  }
}

.inventory-draft-strip {
  background: #fffaf0;
  border: 1px solid #e9ce93;
  border-radius: 10px;
  margin: 0 18px 14px;
  padding: 13px;
}

.inventory-draft-strip > header {
  justify-content: space-between;
  margin-bottom: 9px;
  display: flex;
}

.inventory-draft-strip header b {
  color: #765213;
  font-size: 12px;
}

.inventory-draft-strip header small {
  color: #9b7a3d;
  font-size: 10px;
}

.inventory-draft-strip > div {
  gap: 8px;
  display: flex;
  overflow: auto;
}

.inventory-draft-strip button {
  text-align: left;
  color: #5c4317;
  background: #fff;
  border: 1px solid #ecd8ad;
  border-radius: 8px;
  gap: 3px;
  min-width: 170px;
  padding: 9px 11px;
  display: grid;
}

.inventory-draft-strip button b {
  font-size: 11px;
}

.inventory-draft-strip button small {
  font-size: 9px;
}

.stock-expiry-line {
  color: #a46b12 !important;
}

.stock-draft-line {
  background: #fff0c7;
  border-radius: 999px;
  width: max-content;
  padding: 2px 6px;
  color: #8e5a0c !important;
  display: inline-flex !important;
}

.expiry-batch-panel .inventory-toolbar {
  align-items: flex-end;
}

.expiry-filterbar {
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  display: flex;
}

.expiry-filterbar > input {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  width: 190px;
  height: 38px;
  padding: 0 10px;
}

.expiry-filterbar > label:not(.expiry-alert-only) {
  gap: 4px;
  display: grid;
}

.expiry-filterbar label span {
  color: var(--ui-muted);
  font-size: 9px;
}

.expiry-filterbar label input[type="date"] {
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  height: 38px;
  padding: 0 8px;
}

.expiry-alert-only {
  height: 38px;
  color: var(--ui-muted);
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: flex !important;
}

.expiry-filterbar button {
  height: 38px;
}

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

.expiry-summary article {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  display: flex;
}

.expiry-summary span {
  color: var(--ui-muted);
  font-size: 11px;
}

.expiry-summary b {
  color: var(--ui-text);
  font-size: 18px;
}

.expiry-table {
  border-top: 1px solid var(--ui-border);
  overflow: auto;
}

.expiry-table > header, .expiry-table > div {
  grid-template-columns: minmax(170px, 1.4fr) 130px 110px 110px 115px 90px 130px 100px;
  align-items: center;
  gap: 10px;
  min-width: 960px;
  padding: 11px 18px;
  display: grid;
}

.expiry-table > header {
  background: var(--ui-panel-soft);
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 800;
}

.expiry-table > div {
  border-top: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-size: 11px;
}

.expiry-table > div > span:first-child {
  gap: 3px;
  display: grid;
}

.expiry-table small {
  color: var(--ui-muted);
}

.expiry-status {
  color: #287250;
  background: #edf6f1;
  border-radius: 999px;
  width: max-content;
  padding: 4px 7px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.expiry-status.warning {
  color: #93600e;
  background: #fff2cc;
}

.expiry-status.critical, .expiry-status.expired {
  color: #a33e36;
  background: #ffe4df;
}

.expiry-status.none {
  color: #78837d;
  background: #eef0ef;
}

@media (max-width: 860px) {
  .expiry-filterbar, .expiry-filterbar > input {
    width: 100%;
  }

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

@media (min-width: 861px) {
  .expiry-filterbar > input {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
  }
}

.inventory-toolbar button.barcode-scan-trigger {
  border-color: color-mix(in srgb, var(--ui-accent) 44%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-panel-solid));
  color: var(--ui-accent);
  font-weight: 800;
}

.barcode-scan-layer {
  z-index: 1200;
  padding: 22px;
}

.barcode-scan-dialog {
  flex-direction: column;
  width: min(1180px, 100vw - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
}

.barcode-scan-body {
  background: var(--ui-panel-soft);
  padding: 18px;
  overflow: auto;
}

.barcode-mode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.barcode-mode-grid > button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-height: 74px;
  color: var(--ui-text);
  text-align: left;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.barcode-mode-grid > button.active {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 12%, transparent);
}

.barcode-mode-grid i {
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-panel-solid));
  width: 34px;
  height: 34px;
  color: var(--ui-accent);
  border-radius: 9px;
  flex: 0 0 34px;
  place-items: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.barcode-mode-grid span, .barcode-mode-grid b, .barcode-mode-grid small {
  display: block;
}

.barcode-mode-grid b {
  font-size: 12px;
}

.barcode-mode-grid small {
  color: var(--ui-muted);
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.45;
}

.barcode-entry-card, .barcode-result-card {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 11px;
  margin-top: 12px;
}

.barcode-entry-card {
  padding: 14px;
}

.barcode-location-row {
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  display: flex;
}

.barcode-location-row label {
  color: var(--ui-muted);
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  display: grid;
}

.barcode-location-row select {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-width: 240px;
  height: 38px;
  color: var(--ui-text);
  border-radius: 8px;
  padding: 0 10px;
}

.barcode-location-row > button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  height: 38px;
  color: var(--ui-text);
  border-radius: 8px;
  padding: 0 14px;
}

.barcode-location-row > button.active {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.barcode-scan-input {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border));
  background: var(--ui-panel-solid);
  border-radius: 10px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  margin-top: 12px;
  display: grid;
  overflow: hidden;
}

.barcode-scan-input > span {
  height: 44px;
  color: var(--ui-accent);
  place-items: center;
  font-size: 18px;
  display: grid;
}

.barcode-scan-input input {
  height: 44px;
  color: var(--ui-text);
  letter-spacing: .08em;
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.barcode-scan-input button {
  background: var(--ui-accent);
  color: #fff;
  border: 0;
  border-radius: 7px;
  height: 34px;
  margin-right: 5px;
  padding: 0 14px;
  font-weight: 800;
}

.barcode-scan-input button:disabled {
  opacity: .5;
}

.barcode-bulk-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  margin-top: 10px;
  display: grid;
}

.barcode-bulk-entry textarea {
  resize: vertical;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-height: 82px;
  color: var(--ui-text);
  font: inherit;
  border-radius: 8px;
  padding: 9px 10px;
}

.barcode-bulk-entry button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  height: 38px;
  color: var(--ui-text);
  border-radius: 8px;
  padding: 0 14px;
}

.barcode-source-note {
  color: var(--ui-muted);
  margin-top: 9px;
  font-size: 9px;
  display: block;
}

.barcode-result-card > header {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  display: flex;
}

.barcode-result-card > header div, .barcode-result-card > header b, .barcode-result-card > header small {
  display: block;
}

.barcode-result-card > header b {
  color: var(--ui-text);
  font-size: 12px;
}

.barcode-result-card > header small {
  color: var(--ui-muted);
  margin-top: 3px;
  font-size: 9px;
}

.barcode-result-card > header button {
  color: var(--ui-muted);
  background: none;
  border: 0;
}

.barcode-result-table {
  overflow: auto;
}

.barcode-result-row {
  border-top: 1px solid var(--ui-border);
  min-width: 900px;
  color: var(--ui-text);
  grid-template-columns: minmax(210px, 1.45fr) minmax(150px, 1fr) minmax(135px, .9fr) 105px 105px 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 10px;
  display: grid;
}

.barcode-result-row:first-child {
  border-top: 0;
}

.barcode-result-row.head {
  background: var(--ui-panel-soft);
  color: var(--ui-muted);
  font-size: 9px;
  font-weight: 800;
}

.barcode-result-row.invalid {
  background: color-mix(in srgb, #d75248 5%, var(--ui-panel-solid));
}

.barcode-result-row span, .barcode-result-row b, .barcode-result-row small {
  min-width: 0;
  display: block;
}

.barcode-result-row b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.barcode-result-row small {
  color: var(--ui-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 8px;
  overflow: hidden;
}

.barcode-result-row em {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  display: inline-block;
}

.barcode-result-row em.ok {
  color: #267153;
  background: #e7f5ee;
}

.barcode-result-row em.error {
  color: #a43e37;
  background: #fee8e5;
}

.barcode-result-row input {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 100%;
  height: 34px;
  color: var(--ui-text);
  border-radius: 7px;
  padding: 0 8px;
}

.barcode-result-row > span:last-child button {
  color: #a43e37;
  background: none;
  border: 0;
  font-size: 9px;
}

.barcode-result-empty {
  color: var(--ui-muted);
  text-align: center;
  padding: 34px 14px;
  font-size: 10px;
}

.barcode-scan-error {
  margin: 10px 0 0;
}

.barcode-scan-footer {
  border-top: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  color: var(--ui-muted);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  font-size: 10px;
  display: flex;
}

.barcode-scan-footer > span b {
  color: var(--ui-text);
  font-size: 12px;
}

.barcode-scan-footer > div {
  gap: 8px;
  display: flex;
}

.barcode-scan-footer button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-width: 86px;
  height: 38px;
  color: var(--ui-text);
  border-radius: 8px;
}

.barcode-scan-footer button.primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
}

.barcode-scan-footer button:disabled {
  opacity: .5;
}

@media (max-width: 760px) {
  .barcode-scan-layer {
    padding: 0;
  }

  .barcode-scan-dialog {
    border-radius: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }

  .barcode-mode-grid {
    grid-template-columns: 1fr;
  }

  .barcode-mode-grid > button {
    min-height: 62px;
  }

  .barcode-location-row {
    flex-direction: column;
    align-items: stretch;
  }

  .barcode-location-row select {
    width: 100%;
    min-width: 0;
  }

  .barcode-bulk-entry {
    grid-template-columns: 1fr;
  }

  .barcode-scan-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .barcode-scan-footer > div {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
}

.catalog-create-layer {
  z-index: 1150;
}

.product-type-head {
  --product-type-accent: #2f7862;
  border-left: 4px solid var(--product-type-accent);
  position: relative;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--product-type-accent) 14%, var(--ui-panel-solid)),
    color-mix(in srgb, var(--product-type-accent) 3%, var(--ui-panel-solid)) 82%) !important;
}

.product-type-head--physical {
  --product-type-accent: #2f7862;
}

.product-type-head--service {
  --product-type-accent: #3476a4;
}

.product-type-head--pass {
  --product-type-accent: #6a5aae;
}

.product-type-head--timed {
  --product-type-accent: #a06a20;
}

.product-type-head--period {
  --product-type-accent: #a45470;
}

.product-type-head small, .product-type-head > div > span {
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--product-type-accent) !important;
}

.product-type-head h2 {
  color: var(--ui-text);
}

.product-type-head p {
  color: var(--ui-muted);
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.55;
}

.inventory-product-create-layer {
  align-items: center;
  padding: 20px;
}

.inventory-product-create {
  width: min(900px, 100vw - 40px);
  max-height: min(780px, 100dvh - 40px);
}

.inventory-product-create-top {
  grid-template-columns: minmax(0, 2fr) minmax(220px, .72fr);
  align-items: stretch;
  gap: 18px;
  display: grid;
}

.inventory-product-create-main {
  align-content: start;
  gap: 10px;
  min-width: 0;
  display: grid;
}

.inventory-create-primary-fields {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0;
}

.inventory-create-primary-fields > label:nth-child(-n+2) {
  grid-column: span 3;
}

.inventory-create-primary-fields > label:nth-child(n+3) {
  grid-column: span 2;
}

.inventory-create-primary-fields .inventory-unit-editor {
  grid-template-columns: minmax(54px, .76fr) minmax(62px, 1fr) auto;
  gap: 4px;
}

.inventory-create-primary-fields .inventory-unit-editor button, .inventory-create-primary-fields .inventory-code-input button {
  padding-inline: 7px;
}

.inventory-create-inline-stock > header {
  flex-wrap: wrap;
  padding: 9px 10px;
}

.inventory-create-inline-stock > header > div:first-child {
  min-width: 210px;
}

.inventory-create-inline-stock > header .inventory-stock-mode {
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  padding: 0;
  display: flex;
}

.inventory-create-inline-stock > header .inventory-stock-mode label {
  gap: 5px;
  padding: 6px 8px;
  font-size: 10px;
}

.inventory-create-stock-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px;
}

.inventory-create-inline-stock .inventory-expiry-config {
  margin: 0 10px 10px;
  padding: 10px;
}

.inventory-product-image-field > span {
  color: var(--ui-muted);
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.inventory-product-image-field .product-image-upload {
  min-height: 0;
  color: var(--ui-text);
  border-color: var(--ui-border-strong);
  background: linear-gradient(145deg,
    var(--ui-panel-solid),
    color-mix(in srgb, var(--ui-accent) 8%, var(--ui-panel-soft)));
}

.inventory-product-image-field .product-image-upload > b {
  color: var(--ui-text);
}

.inventory-product-image-field .product-image-upload small {
  color: var(--ui-muted);
}

@media (max-width: 860px) {
  .inventory-product-create-layer {
    align-items: flex-start;
    padding: 0;
  }

  .inventory-product-create {
    width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .inventory-product-create-top {
    grid-template-columns: 1fr;
  }

  .inventory-product-image-field .product-image-upload {
    min-height: 180px;
  }
}

@media (max-width: 640px) {
  .inventory-create-primary-fields, .inventory-create-stock-fields {
    grid-template-columns: 1fr;
  }

  .inventory-create-primary-fields > label:nth-child(n) {
    grid-column: auto;
  }

  .inventory-create-inline-stock > header {
    align-items: flex-start;
  }

  .inventory-create-inline-stock > header .inventory-stock-mode {
    margin-left: 0;
  }
}

.product-label-layer {
  z-index: 1250;
  padding: 20px;
}

.product-label-printer {
  border: 1px solid var(--ui-border);
  width: min(1120px, 100vw - 40px);
  max-height: calc(100dvh - 40px);
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 16px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.product-label-printer > header {
  border-bottom: 1px solid var(--ui-border);
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--ui-accent) 12%, var(--ui-panel-solid)),
    var(--ui-panel-solid));
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 22px;
  display: flex;
}

.product-label-printer > header small {
  color: var(--ui-accent);
  letter-spacing: .12em;
  font-weight: 800;
}

.product-label-printer > header h2 {
  margin: 6px 0 3px;
  font-size: 22px;
}

.product-label-printer > header p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 12px;
}

.product-label-printer > header > button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 9px;
  width: 34px;
  height: 34px;
  font-size: 20px;
}

.product-label-body {
  grid-template-columns: minmax(330px, .8fr) minmax(460px, 1.2fr);
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.product-label-body > aside {
  border-right: 1px solid var(--ui-border);
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.product-label-search {
  border-bottom: 1px solid var(--ui-border);
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 14px;
  display: grid;
}

.product-label-search input, .product-label-inputs input {
  border: 1px solid var(--ui-border);
  height: 38px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  padding: 0 10px;
}

.product-label-search button {
  border: 1px solid var(--ui-border);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 8px;
  padding: 0 12px;
}

.product-label-products {
  align-content: start;
  gap: 7px;
  padding: 12px;
  display: grid;
  overflow: auto;
}

.product-label-products label {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 9px;
  align-items: flex-start;
  gap: 10px;
  padding: 11px;
  display: flex;
}

.product-label-products input {
  accent-color: var(--ui-accent);
  margin-top: 3px;
}

.product-label-products span {
  gap: 4px;
  display: grid;
}

.product-label-products small {
  color: var(--ui-muted);
}

.product-label-body > main {
  padding: 18px 20px;
  overflow: auto;
}

.product-label-selected {
  background: var(--ui-accent-soft);
  border-radius: 10px;
  gap: 5px;
  padding: 12px;
  display: grid;
}

.product-label-selected small {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-muted);
  overflow: hidden;
}

.product-label-body main > h3 {
  margin: 18px 0 10px;
  font-size: 14px;
}

.product-label-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.product-label-field-grid button {
  border: 1px solid var(--ui-border);
  color: var(--ui-muted);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  align-items: center;
  gap: 7px;
  padding: 9px;
  display: flex;
}

.product-label-field-grid i {
  border: 1px solid var(--ui-border-strong);
  border-radius: 4px;
  place-items: center;
  width: 18px;
  height: 18px;
  font-style: normal;
  display: grid;
}

.product-label-field-grid button.selected {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.product-label-field-grid button.selected i {
  color: var(--ui-on-accent);
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

.product-label-inputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.product-label-inputs label {
  gap: 6px;
  display: grid;
}

.product-label-inputs span {
  font-size: 11px;
  font-weight: 700;
}

.product-label-memory {
  color: var(--ui-muted);
  font-size: 10px;
}

.product-label-error {
  color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 10%, var(--ui-panel-solid));
  border-radius: 7px;
  padding: 9px;
}

.product-label-printer > footer {
  border-top: 1px solid var(--ui-border);
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  display: flex;
}

.product-label-printer > footer span {
  color: var(--ui-muted);
  margin-right: auto;
  font-size: 10px;
}

.product-label-printer > footer button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  min-height: 38px;
  padding: 0 15px;
}

.product-label-printer > footer button.primary {
  color: var(--ui-on-accent);
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

@media (max-width: 820px) {
  .product-label-layer {
    padding: 0;
  }

  .product-label-printer {
    border-radius: 0;
    width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .product-label-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .product-label-body > aside {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
    min-height: 280px;
  }

  .product-label-products {
    max-height: 260px;
  }

  .product-label-body > main {
    overflow: visible;
  }

  .product-label-printer > footer {
    flex-wrap: wrap;
  }

  .product-label-printer > footer span {
    flex-basis: 100%;
  }
}

@media (max-width: 540px) {
  .product-label-field-grid, .product-label-inputs {
    grid-template-columns: 1fr;
  }

  .product-label-printer > footer button {
    flex: 1;
  }
}

/* [project]/apps/admin/app/benefits.css [app-client] (css) */
.benefit-toolbar {
  color: #fff;
  background: linear-gradient(120deg, #17382d, #2d7456);
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  padding: 18px 20px;
  display: flex;
}

.benefit-toolbar span {
  letter-spacing: 1.4px;
  color: #83dbb4;
  font-size: 8px;
}

.benefit-toolbar h2 {
  margin: 6px 0;
  font-size: 18px;
}

.benefit-toolbar p {
  color: #b8d3c7;
  margin: 0;
  font-size: 10px;
}

.benefit-toolbar > div:last-child {
  gap: 8px;
  display: flex;
}

.benefit-form {
  background: #fff;
  border-radius: 15px;
  width: min(760px, 100vw - 40px);
  max-height: 90vh;
  overflow: auto;
}

.plan-grid > button > small {
  color: #77847e;
  margin-top: 7px;
  font-size: 8px;
  display: block;
}

.plan-grid .plan-edit {
  color: #277657;
  background: none;
  border: 0;
  padding: 3px;
  font-size: 8px;
  position: absolute;
  bottom: 7px;
  right: 7px;
}

.recharge-error {
  color: #ffd0c8 !important;
}

.coupon-selector {
  background: #f4faf7;
  border: 1px solid #d7e9df;
  border-radius: 9px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  margin: 10px 0;
  padding: 10px;
  font-size: 9px;
  display: grid;
}

.coupon-selector select {
  background: #fff;
  border: 1px solid #cfded6;
  border-radius: 7px;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
}

.coupon-selector b {
  color: #2b7a58;
}

.benefit-purchase .pass-plan-grid p {
  min-height: 32px;
}

@media (max-width: 700px) {
  .benefit-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .benefit-toolbar > div:last-child {
    width: 100%;
  }

  .benefit-toolbar button {
    flex: 1;
  }
}

.benefit-card-form {
  width: min(900px, 100vw - 40px);
}

.benefit-rule-block {
  background: #fff;
  border: 1px solid #dfe7e3;
  border-radius: 11px;
  margin-top: 14px;
  padding: 14px;
}

.benefit-rule-title {
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.benefit-rule-title > input {
  accent-color: #247451;
  width: 18px;
  height: 18px;
}

.benefit-rule-title b, .benefit-rule-title small {
  display: block;
}

.benefit-rule-title b {
  font-size: 12px;
}

.benefit-rule-title small {
  color: #849089;
  margin-top: 3px;
  font-size: 9px;
}

.benefit-rule-block > label:last-child > span {
  color: #667;
  margin-bottom: 7px;
  font-size: 10px;
  display: block;
}

.benefit-rule-block > label:last-child > select {
  border: 1px solid #dce3df;
  border-radius: 8px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
}

.benefit-combine-tip {
  color: #286f52;
  background: #eaf6f0;
  border-radius: 8px;
  margin: 14px 0 0;
  padding: 10px;
  font-size: 10px;
}

.benefit-toolbar {
  color: var(--ui-on-accent);
  background: linear-gradient(120deg, var(--ui-accent-hover), var(--ui-accent));
}

.benefit-toolbar span, .benefit-toolbar p {
  color: color-mix(in srgb, var(--ui-on-accent) 76%, transparent);
}

.benefit-toolbar > div:last-child > button {
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  border-color: #0000;
}

.benefit-toolbar > div:last-child > button.primary {
  color: var(--ui-on-accent) !important;
  background: color-mix(in srgb, var(--ui-accent-hover) 75%, black) !important;
}

.benefit-form, .benefit-rule-block, .coupon-selector, .coupon-selector select, .benefit-rule-block select {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.benefit-combine-tip {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.benefit-message {
  border: 1px solid var(--ui-border);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 11px;
}

.benefit-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  display: grid;
}

.benefit-plan-card {
  border: 1px solid var(--ui-border);
  min-height: 300px;
  color: var(--ui-text);
  background: linear-gradient(145deg, var(--ui-panel-solid), var(--ui-panel));
  border-radius: 18px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px #142d2412;
}

.benefit-plan-card:before {
  content: "";
  background: var(--ui-accent);
  height: 5px;
  position: absolute;
  inset: 0 0 auto;
}

.benefit-plan-card.type-count:before {
  background: #4f6fc7;
}

.benefit-plan-card.type-points:before {
  background: #c58a24;
}

.benefit-plan-card.type-discount:before {
  background: #9a557b;
}

.benefit-plan-card > div:first-child {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.benefit-plan-card > div:first-child span, .benefit-plan-card > div:first-child em {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-radius: 99px;
  padding: 5px 9px;
  font-size: 9px;
  font-style: normal;
}

.benefit-plan-card > strong small {
  color: var(--ui-text-muted);
  font-size: 9px;
  font-weight: 500;
}

.benefit-stock {
  border-block: 1px solid var(--ui-border);
  justify-content: space-between;
  margin: 20px 0 14px;
  padding: 11px 0;
  font-size: 10px;
  display: flex;
}

.benefit-plan-card dl {
  margin: 0;
}

.benefit-plan-card dl div {
  grid-template-columns: 70px 1fr;
  gap: 10px;
  padding: 7px 0;
  display: grid;
}

.benefit-plan-card dt {
  color: var(--ui-text-muted);
  font-size: 9px;
}

.benefit-plan-card dd {
  text-align: right;
  margin: 0;
  font-size: 10px;
}

.benefit-empty {
  border: 1px dashed var(--ui-border);
  text-align: center;
  background: var(--ui-panel);
  border-radius: 16px;
  padding: 70px 20px;
}

.benefit-empty > b {
  width: 52px;
  height: 52px;
  color: var(--ui-on-accent);
  background: var(--ui-accent);
  border-radius: 16px;
  place-items: center;
  margin: auto;
  display: grid;
}

.benefit-empty h3 {
  margin: 14px 0 6px;
}

.benefit-empty p {
  color: var(--ui-text-muted);
  font-size: 10px;
}

.benefit-empty button {
  margin-top: 10px;
}

.benefit-type-form select, .benefit-type-form textarea {
  border: 1px solid var(--ui-border);
  width: 100%;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 8px;
}

.benefit-type-form select {
  height: 38px;
  padding: 0 10px;
}

.card-type-hint {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 10px 12px;
  font-size: 10px;
  display: flex;
}

.benefit-dynamic {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel);
  border-radius: 12px;
  margin-top: 16px;
  padding: 16px;
}

.benefit-dynamic h3 {
  margin: 0 0 14px;
  font-size: 13px;
}

.benefit-dynamic > label > span, .benefit-rights > span {
  margin-bottom: 7px;
  font-size: 10px;
  display: block;
}

.benefit-rights {
  margin-top: 16px;
  display: block;
}

.benefit-rights textarea {
  resize: vertical;
  min-height: 90px;
  padding: 10px;
}

.benefit-type-web-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.benefit-type-web-picker button {
  border: 1px solid var(--ui-border);
  min-height: 38px;
  color: var(--ui-text-muted);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
}

.benefit-type-web-picker button.active {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  box-shadow: 0 0 0 2px rgba(var(--ui-accent-rgb), .08);
}

.benefit-restricted-switch {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 9px;
  margin-top: 14px;
  padding: 12px;
  display: grid;
}

.benefit-restricted-switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--ui-accent);
}

.benefit-restricted-switch span {
  font-size: 12px;
  font-weight: 800;
}

.benefit-restricted-switch small {
  color: var(--ui-text-muted);
  grid-column: 2;
  font-size: 10px;
  line-height: 1.5;
}

.benefit-product-selector {
  gap: 12px;
  display: grid;
}

.benefit-product-selector h3 {
  margin-bottom: 0;
}

.period-redemption-limit {
  gap: 14px;
  display: grid;
}

.benefit-product-guide {
  color: var(--ui-text-muted);
  margin: -4px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.benefit-product-filters {
  grid-template-columns: minmax(180px, 1fr) 128px 128px;
  gap: 8px;
  display: grid;
}

.benefit-product-filters input, .benefit-product-filters select {
  border: 1px solid var(--ui-border);
  width: 100%;
  min-height: 38px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  padding: 0 10px;
}

.benefit-product-results {
  gap: 7px;
  max-height: 260px;
  padding-right: 3px;
  display: grid;
  overflow: auto;
}

.benefit-product-results > label {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 9px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 8px 10px;
  display: grid;
}

.benefit-product-quantity {
  grid-template-columns: auto 82px;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: grid;
}

.benefit-product-quantity small {
  color: var(--ui-text-muted);
  font-size: 10px;
}

.benefit-product-quantity input {
  text-align: center;
  min-height: 36px;
  width: 82px !important;
}

.benefit-product-empty {
  border: 1px dashed var(--ui-border);
  color: var(--ui-text-muted);
  text-align: center;
  border-radius: 9px;
  padding: 18px;
  font-size: 11px;
}

.benefit-product-selected-summary {
  color: var(--ui-accent);
  justify-self: end;
  font-size: 11px;
}

.benefit-product-results > label.active {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.benefit-product-results > label > input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ui-accent);
}

.benefit-product-results > label > input[type="number"] {
  text-align: center;
  width: 72px;
  height: 34px;
}

.benefit-product-results span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.benefit-product-results b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.benefit-product-results small {
  color: var(--ui-text-muted);
  font-size: 9px;
}

:root .workspace:not(.cashier-workspace) .benefit-product-results > label.active small {
  font-weight: 700;
  color: var(--ui-text) !important;
}

@media (max-width: 700px) {
  .benefit-card-grid, .benefit-type-form .form-grid.three, .benefit-type-form .form-grid.two {
    grid-template-columns: 1fr;
  }

  .benefit-type-web-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefit-product-filters {
    grid-template-columns: 1fr;
  }
}

.benefit-toolbar-summary {
  border: 1px solid color-mix(in srgb, var(--ui-on-accent) 24%, transparent);
  background: color-mix(in srgb, var(--ui-on-accent) 9%, transparent);
  border-radius: 12px;
  place-items: center;
  min-width: 94px;
  padding: 10px 16px;
  display: grid !important;
}

.benefit-toolbar-summary b {
  font-size: 21px;
}

.benefit-toolbar-summary small {
  margin-top: 2px;
  font-size: 9px;
}

.benefit-list-toolbar {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 13px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 12px;
  display: flex;
}

.benefit-type-filters {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.benefit-type-filters button {
  min-height: 34px;
  color: var(--ui-text-muted);
  background: var(--ui-panel-soft);
  border-color: #0000;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 750;
}

.benefit-type-filters button.active {
  border-color: var(--ui-accent);
  color: var(--ui-on-accent);
  background: var(--ui-accent);
  box-shadow: 0 5px 14px rgba(var(--ui-accent-rgb), .18);
}

.benefit-search {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  width: min(280px, 100%);
  height: 36px;
  padding: 0 11px;
  display: flex;
}

.benefit-search:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .1);
}

.benefit-search > span {
  color: var(--ui-muted);
  font-size: 18px;
}

.benefit-search input {
  min-width: 0;
  color: var(--ui-text);
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 11px;
}

.benefit-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 242px));
  justify-content: start;
  align-items: stretch;
  gap: 14px;
  display: grid;
}

.benefit-create-card {
  border: 2px dashed color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border));
  min-height: 252px;
  color: var(--ui-accent);
  background: color-mix(in srgb,
    var(--ui-accent-soft) 45%,
    var(--ui-panel-solid));
  text-align: center;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s;
  display: flex;
}

.benefit-create-card:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  box-shadow: 0 10px 28px rgba(var(--ui-accent-rgb), .12);
  transform: translateY(-2px);
}

.benefit-create-card > b {
  width: 58px;
  height: 58px;
  color: var(--ui-on-accent);
  background: var(--ui-accent);
  box-shadow: 0 10px 24px rgba(var(--ui-accent-rgb), .22);
  border-radius: 18px;
  place-items: center;
  margin-bottom: 16px;
  font-size: 36px;
  font-weight: 400;
  display: grid;
}

.benefit-create-card > strong {
  color: var(--ui-text);
  font-size: 14px;
}

.benefit-create-card > small {
  max-width: 170px;
  color: var(--ui-text-muted);
  margin-top: 7px;
  font-size: 9px;
  line-height: 1.55;
}

.benefit-plan-card {
  border-radius: 16px;
  min-width: 0;
  min-height: 252px;
  padding: 15px 15px 42px;
  transition: opacity .2s, transform .2s, box-shadow .2s;
  overflow: visible;
  box-shadow: 0 8px 22px #142d2412;
}

.benefit-plan-card:before {
  border-radius: 16px 16px 0 0;
}

.benefit-plan-card:hover, .benefit-plan-card:focus-within {
  z-index: 10;
}

.benefit-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 30px #142d241c;
}

.benefit-plan-card.inactive {
  opacity: .68;
  background: var(--ui-panel-soft);
}

.benefit-card-topline {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.benefit-card-topline > span {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 99px;
  padding: 5px 9px;
  font-size: 9px;
}

.benefit-status-switch {
  color: var(--ui-text-muted);
  background: none;
  border: 0;
  align-items: center;
  gap: 5px;
  padding: 0;
  display: flex;
}

.benefit-status-switch i {
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-panel-soft);
  border-radius: 999px;
  width: 34px;
  height: 20px;
  transition: background-color .2s, border-color .2s;
  display: block;
  position: relative;
  box-shadow: inset 0 1px 2px #141e190f;
}

.benefit-status-switch i:after {
  content: "";
  background: var(--ui-panel-solid);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: transform .2s;
  position: absolute;
  top: 1px;
  left: 1px;
  box-shadow: 0 1px 4px #141e1938;
}

.benefit-status-switch.on {
  color: var(--ui-accent);
}

.benefit-status-switch.on i {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

.benefit-status-switch.on i:after {
  transform: translateX(14px);
}

.benefit-status-switch em {
  white-space: nowrap;
  font-size: 9px;
  font-style: normal;
}

.benefit-plan-card h3 {
  margin: 15px 0 7px;
  font-size: 17px;
}

.benefit-plan-card > strong {
  font-size: 23px;
}

.benefit-stock {
  margin: 13px 0 9px;
  padding: 8px 0;
}

.benefit-plan-card dl div {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 7px;
  padding: 4px 0;
}

.benefit-plan-card dd {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.benefit-rights-summary {
  cursor: help;
  outline: none;
  position: relative;
  text-overflow: clip !important;
  overflow: visible !important;
}

.benefit-rights-summary > span:first-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.benefit-rights-tooltip {
  z-index: 20;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, var(--ui-border));
  width: max-content;
  max-width: min(310px, 76vw);
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
  transition: opacity .16s, transform .16s, visibility .16s;
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px #142d2429;
}

.benefit-rights-summary:hover, .benefit-rights-summary:focus-visible {
  color: var(--ui-accent);
}

.benefit-rights-summary:hover .benefit-rights-tooltip, .benefit-rights-summary:focus-visible .benefit-rights-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.benefit-plan-actions {
  align-items: center;
  gap: 7px;
  display: flex;
  position: absolute;
  bottom: 7px;
  right: 14px;
}

.benefit-plan-actions button {
  height: 20px;
  min-height: 20px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 800;
}

.benefit-edit-button {
  border-color: color-mix(in srgb, var(--ui-accent) 36%, var(--ui-border));
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
}

.benefit-edit-button:hover {
  color: var(--ui-on-accent);
  background: var(--ui-accent);
}

.benefit-delete-button {
  border-color: color-mix(in srgb, #c83e32 38%, var(--ui-border));
  color: #b8382f;
  background: var(--ui-panel-solid);
}

.benefit-delete-button:hover {
  color: #fff;
  background: #b8382f;
}

.benefit-delete-layer {
  z-index: 1450;
}

.benefit-delete-dialog {
  border: 1px solid color-mix(in srgb, #c83e32 22%, var(--ui-border));
  width: min(470px, 100vw - 32px);
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 70px #1812103d;
}

.benefit-delete-dialog > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 25px 12px;
  display: flex;
}

.benefit-delete-dialog > header small {
  color: #b8382f;
  letter-spacing: .16em;
  font-size: 9px;
  font-weight: 900;
}

.benefit-delete-dialog > header h2 {
  margin: 6px 0 0;
  font-size: 20px;
}

.benefit-delete-dialog > header button {
  width: 34px;
  height: 34px;
  color: var(--ui-text-muted);
  background: var(--ui-panel-soft);
  border: 0;
  border-radius: 50%;
  font-size: 20px;
}

.benefit-delete-dialog > p {
  color: var(--ui-text-muted);
  margin: 0;
  padding: 8px 25px 22px;
  font-size: 13px;
  line-height: 1.75;
}

.benefit-delete-dialog > footer {
  border-top: 1px solid var(--ui-border);
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  padding: 16px 25px 24px;
  display: grid;
}

.benefit-delete-dialog > footer button {
  border: 0;
  border-radius: 13px;
  min-height: 46px;
  font-size: 12px;
  font-weight: 850;
}

.benefit-delete-dialog > footer .secondary {
  color: var(--ui-text-muted);
  background: var(--ui-panel-soft);
}

.benefit-delete-dialog > footer .danger {
  color: #fff;
  background: #b8382f;
}

.benefit-delete-dialog button:disabled {
  cursor: wait;
  opacity: .58;
}

.benefit-no-results {
  border: 1px dashed var(--ui-border);
  min-height: 252px;
  color: var(--ui-text-muted);
  background: var(--ui-panel-soft);
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.benefit-no-results b {
  color: var(--ui-text);
  font-size: 12px;
}

.benefit-no-results span {
  margin-top: 7px;
  font-size: 9px;
}

@media (max-width: 760px) {
  .benefit-list-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .benefit-search {
    width: 100%;
  }

  .benefit-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 520px) {
  .benefit-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefit-create-card, .benefit-plan-card, .benefit-status-switch i, .benefit-status-switch i:after {
    transition: none;
  }
}

/* [project]/apps/admin/app/organization/organization.css [app-client] (css) */
.org-center {
  gap: 16px;
  display: grid;
}

.org-hero {
  color: #fff;
  background: linear-gradient(120deg, #183a30, #28664e);
  border-radius: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 24px 26px;
  display: flex;
}

.org-hero span {
  letter-spacing: 1.8px;
  color: #83d4b0;
  font-size: 9px;
}

.org-hero h2 {
  margin: 8px 0;
  font-size: 21px;
}

.org-hero p {
  color: #bed8cc;
  margin: 0;
  font-size: 11px;
}

.org-message {
  color: #9b542b;
  background: #fff3e8;
  border: 1px solid #f0d2b9;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 11px;
}

.org-tabs {
  background: #fff;
  border: 1px solid #e2e8e5;
  border-radius: 11px;
  gap: 4px;
  padding: 5px;
  display: flex;
}

.org-tabs button {
  background: none;
  border: 0;
}

.org-tabs button.active {
  color: #216b4d;
  background: #eaf5ef;
}

.org-tabs b {
  background: #edf0ee;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 9px;
}

.org-toolbar {
  border: 1px solid var(--ui-border);
  color: var(--ui-muted);
  background: var(--ui-panel-solid);
  border-radius: 11px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.org-toolbar-create {
  white-space: nowrap;
  flex: none;
  min-height: 36px;
}

.org-search-form {
  flex: 0 auto;
  align-items: center;
  gap: 6px;
  display: flex;
}

.org-search-form input {
  border: 1px solid var(--ui-border);
  width: 20ch;
  height: 36px;
  color: var(--ui-text);
  background: var(--ui-panel-soft);
  border-radius: 8px;
  outline: 0;
  padding: 0 10px;
  font-size: 10px;
}

.org-search-form input:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

.org-search-form button {
  border-color: var(--ui-accent);
  min-height: 36px;
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  padding: 6px 13px;
  font-size: 10px;
  font-weight: 750;
}

.org-toolbar > div {
  gap: 4px;
  display: flex;
}

.org-toolbar > div button {
  min-height: 34px;
  color: var(--ui-muted);
  background: none;
  border: 0;
  font-size: 9px;
}

.org-toolbar > div button.active {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.org-toolbar > span {
  white-space: nowrap;
  font-size: 9px;
}

.store-cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  display: grid;
}

.store-cards article, .commission-list article {
  background: #fff;
  border: 1px solid #e1e7e4;
  border-radius: 13px;
  padding: 18px;
}

.inactive {
  opacity: .55;
}

.store-card-head {
  align-items: center;
  gap: 10px;
  display: flex;
}

.store-card-head > i, .employee-name > i {
  color: #247451;
  background: #e5f5ed;
  border-radius: 10px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-style: normal;
  font-weight: bold;
  display: grid;
}

.store-card-head span {
  flex: 1;
}

.store-card-head b, .store-card-head small {
  display: block;
}

.store-card-head small {
  color: #8a948f;
  margin-top: 4px;
  font-size: 9px;
}

.store-card-head em {
  color: #287557;
  background: #edf8f3;
  border-radius: 10px;
  padding: 4px 7px;
  font-size: 9px;
  font-style: normal;
}

.store-card-head em.not-open {
  color: #a45d24;
  background: #fff3e5;
}

.store-cards article.unprovisioned {
  border-style: dashed;
  border-color: color-mix(in srgb, #b86d31 42%, var(--ui-border));
}

.store-cards dl {
  grid-template-columns: 1fr 1fr;
  margin: 18px 0;
  display: grid;
}

.store-cards dl div {
  border-left: 2px solid #d9eee4;
  padding-left: 10px;
}

.store-cards dt, .commission-list dt {
  color: #8b948f;
  font-size: 9px;
}

.store-cards dd {
  margin: 5px 0 0;
  font-size: 19px;
}

.store-cards article > p {
  color: #7c8580;
  min-height: 22px;
  font-size: 10px;
}

.store-cards footer {
  border-top: 1px solid #edf0ee;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  font-size: 10px;
  display: flex;
}

.store-cards footer button {
  padding: 6px 9px;
  font-size: 9px;
}

.org-table {
  background: #fff;
  border: 1px solid #e1e7e4;
  border-radius: 12px;
  overflow: auto;
}

.org-row {
  border-bottom: 1px solid #edf0ee;
  grid-template-columns: 1.2fr 1.2fr 1fr .8fr .6fr .5fr;
  align-items: center;
  gap: 12px;
  min-width: 900px;
  padding: 13px 18px;
  font-size: 10px;
  display: grid;
}

.employee-name {
  align-items: center;
  gap: 10px;
  display: flex;
}

.employee-name > i {
  width: 32px;
  height: 32px;
  overflow: hidden;
}

.employee-name > i img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.employee-name b, .employee-name small {
  display: block;
}

.employee-name small {
  color: #929a96;
  margin-top: 3px;
  font-weight: normal;
}

.status-ok, .status-off {
  border-radius: 10px;
  padding: 4px 8px;
  font-style: normal;
}

.status-ok {
  color: #23734f;
  background: #e6f5ed;
}

.status-off {
  color: #777;
  background: #f1f1f1;
}

.org-row button {
  padding: 5px 8px;
  font-size: 9px;
}

.org-row > span:last-child {
  gap: 5px;
  display: flex;
}

.commission-list {
  gap: 10px;
  display: grid;
}

.commission-list article {
  grid-template-columns: 1.2fr 1fr auto;
  align-items: center;
  gap: 20px;
  display: grid;
}

.commission-list article > div > span {
  color: #277455;
  background: #eaf6f0;
  border-radius: 9px;
  padding: 4px 7px;
  font-size: 8px;
}

.commission-list h3 {
  margin: 10px 0 5px;
  font-size: 14px;
}

.commission-list p {
  color: #8a938f;
  margin: 0;
  font-size: 9px;
}

.commission-list dl {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
  display: grid;
}

.commission-list dd {
  margin: 5px 0 0;
  font-weight: bold;
}

.commission-list .designated dd {
  color: #b06c20;
}

.commission-actions {
  gap: 6px;
  display: flex;
}

.commission-actions button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 9px;
}

.org-empty {
  border: 1px dashed var(--ui-border);
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  text-align: center;
  border-radius: 11px;
  grid-column: 1 / -1;
  padding: 36px;
  font-size: 10px;
}

.org-modal {
  background: #fff;
  border-radius: 15px;
  width: min(820px, 100vw - 30px);
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.org-modal > header {
  border-bottom: 1px solid #e5eae7;
  justify-content: space-between;
  align-items: center;
  padding: 17px 20px;
  display: flex;
}

.org-modal h2 {
  margin: 0;
  font-size: 17px;
}

.org-modal > header button {
  border: 0;
  font-size: 20px;
}

.org-form {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px;
  display: grid;
}

.employee-modal {
  width: min(780px, 100vw - 30px);
}

.employee-modal > header {
  padding: 10px 16px;
}

.employee-form {
  background: var(--ui-panel-soft, #f7f9f8);
  gap: 6px 10px;
  padding: 8px 12px 10px;
}

.employee-form .employee-compact-field {
  border: 1px solid var(--ui-border, #e1e7e4);
  background: var(--ui-panel-solid, #fff);
  border-radius: 10px;
  grid-template-columns: 84px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  min-height: 46px;
  padding: 4px 7px;
  display: grid;
}

.employee-form .employee-account {
  grid-column: auto;
}

.employee-form .employee-role-field {
  grid-template-columns: 84px minmax(220px, 280px) minmax(0, 1fr);
}

.employee-form .employee-role-field .employee-role-create-row {
  grid-column: 3;
  margin-top: 0;
}

.employee-field-label {
  color: var(--ui-text, #34413b);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
}

.employee-form .employee-compact-field > input, .employee-form .employee-compact-field > select, .employee-form .employee-compact-field > textarea {
  min-width: 0;
  margin-top: 0;
}

.employee-form .employee-compact-field > input, .employee-form .employee-compact-field > select {
  height: 32px;
}

.employee-form .employee-compact-field > .field-help, .employee-form .employee-role-create-row {
  grid-column: 2;
}

.employee-form .employee-compact-field > .field-help {
  margin-top: 0;
  line-height: 1.35;
}

.employee-avatar-editor {
  border: 1px solid var(--ui-border, #e1e7e4);
  background: var(--ui-panel-solid, #fff);
  border-radius: 10px;
  grid-template-columns: 84px 48px minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  min-height: 56px;
  padding: 4px 7px;
  display: grid;
}

.employee-avatar-editor > i {
  color: #247451;
  background: #e5f5ed;
  border-radius: 12px;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  display: grid;
  overflow: hidden;
}

.employee-avatar-editor > i img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.employee-avatar-controls {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.employee-avatar-editor .employee-avatar-controls input[type="file"] {
  max-width: 360px;
  height: auto;
  margin: 0;
  padding: 7px 8px;
}

.employee-avatar-controls button {
  white-space: nowrap;
}

.employee-avatar-editor > .field-help {
  grid-column: 3;
  margin-top: -3px;
  line-height: 1.35;
}

.employee-form label.check.employee-permission-toggle {
  border: 1px solid var(--ui-border, #e1e7e4);
  background: var(--ui-panel-solid, #fff);
  border-radius: 10px;
  align-items: flex-start;
  min-height: 40px;
  margin: 0;
  padding: 4px 7px;
}

.employee-form label.check.employee-permission-toggle > input {
  margin-top: 2px;
}

.employee-form label.check.employee-permission-toggle > span {
  color: var(--ui-text, #34413b);
  align-items: start;
  gap: 2px;
  font-weight: 700;
  display: grid;
}

.employee-form label.check.employee-permission-toggle .field-help {
  margin-top: 0;
  font-weight: 400;
  line-height: 1.35;
}

.employee-store-fieldset {
  background: var(--ui-panel-solid, #fff);
  padding: 3px 7px 4px;
}

.employee-store-fieldset .check {
  margin: 3px 12px 1px 0;
}

.employee-form .employee-remark-field {
  min-height: 46px;
}

.employee-form .employee-remark-field textarea {
  min-height: 34px;
  padding-block: 6px;
}

.employee-form .org-form-actions {
  margin-top: 0;
  padding-top: 8px;
}

.employee-name-button {
  width: 100%;
  min-height: 0;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  justify-content: flex-start;
  padding: 0;
}

.employee-photo-section {
  border: 1px solid var(--ui-border, #e1e7e4);
  background: var(--ui-panel-solid, #fff);
  border-radius: 10px;
  padding: 6px 7px;
  display: block;
}

.employee-photo-section > header {
  align-items: center;
  gap: 10px;
  display: flex;
}

.employee-photo-section > header > span {
  flex: 1;
  gap: 2px;
  display: grid;
}

.employee-photo-section > header b {
  font-size: 10px;
}

.employee-photo-section > header small, .employee-photo-grid article > small {
  color: var(--ui-muted, #87918c);
  font-size: 9px;
}

.employee-photo-section > header input[type="file"] {
  display: none;
}

.employee-photo-section > header button {
  min-height: 32px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  padding: 5px 10px;
}

.employee-photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.employee-photo-grid article {
  border: 1px solid var(--ui-border, #e1e7e4);
  background: var(--ui-panel-soft, #f7f9f8);
  border-radius: 9px;
  gap: 5px;
  min-width: 0;
  padding: 6px;
  display: grid;
  position: relative;
}

.employee-photo-grid article > img {
  object-fit: cover;
  border-radius: 7px;
  width: 100%;
  height: 76px;
}

.employee-photo-grid article > input {
  height: 30px;
  margin: 0;
  font-size: 9px;
}

.employee-photo-grid article > p {
  color: var(--ui-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  font-size: 9px;
  overflow: hidden;
}

.employee-photo-grid .employee-photo-remove {
  color: #fff;
  background: #b42d2de0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  display: grid;
  position: absolute;
  top: 9px;
  right: 9px;
}

.employee-photo-empty {
  color: var(--ui-muted);
  margin: 3px 0 0;
  font-size: 9px;
}

.org-form > label, .org-form section label {
  color: #626b67;
  font-size: 10px;
}

.org-form input, .org-form select {
  border: 1px solid #dce3df;
  border-radius: 8px;
  width: 100%;
  height: 38px;
  margin-top: 6px;
  padding: 0 10px;
  display: block;
}

.org-form fieldset {
  border: 1px solid #e1e7e4;
  border-radius: 9px;
}

.org-form legend {
  font-size: 10px;
}

.org-form label.check {
  align-items: center;
  margin: 8px 12px 5px 0;
  display: inline-flex;
}

.org-form label.check input {
  width: auto;
  height: auto;
  margin: 0 5px 0 0;
}

.org-form section {
  border: 1px solid #e1e7e4;
  border-radius: 10px;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 13px;
  display: grid;
}

.org-form section h4, .org-form section p {
  grid-column: 1 / -1;
  margin: 0;
}

.org-form section h4 {
  font-size: 12px;
}

.org-form section p {
  color: #8a938f;
  font-size: 9px;
}

.org-form section.designated-box {
  background: #fff8ed;
  border-color: #eed7b4;
}

.org-form-actions {
  border-top: 1px solid #edf0ee;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  display: flex;
}

.commission-rule-modal {
  width: min(1040px, 100vw - 28px);
}

.commission-rule-modal > header {
  padding: 13px 18px;
}

.commission-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 14px 18px 16px;
}

.commission-form .commission-rule-name {
  grid-column: span 2;
}

.commission-form input, .commission-form select {
  height: 34px;
  margin-top: 4px;
}

.commission-scope-note {
  border: 1px dashed color-mix(in srgb, var(--ui-accent) 34%, var(--ui-border));
  min-height: 34px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 8px;
  justify-content: space-between;
  align-self: end;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  display: flex;
}

.commission-scope-note b {
  font-size: 10px;
}

.commission-scope-note span {
  color: var(--ui-muted);
  white-space: nowrap;
  font-size: 8px;
}

.commission-rate-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.commission-form .commission-rate-card {
  background: var(--ui-panel-soft);
  border-radius: 9px;
  grid-column: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  padding: 10px;
  display: grid;
}

.commission-form .commission-threshold-card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commission-form .commission-threshold-card > label.check {
  grid-column: 1 / -1;
  min-height: 28px;
  margin: 0;
}

.commission-rate-heading {
  border-bottom: 1px solid var(--ui-border);
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  padding-bottom: 7px;
  display: flex;
}

.commission-rate-heading > span {
  width: 27px;
  height: 27px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 7px;
  flex: 0 0 27px;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  display: grid;
}

.commission-rate-heading h4, .commission-rate-heading p {
  margin: 0;
}

.commission-rate-heading h4 {
  font-size: 11px;
}

.commission-rate-heading p {
  color: var(--ui-muted);
  margin-top: 2px;
  font-size: 8px;
}

.commission-form .designated-box .commission-rate-heading > span {
  color: #a86418;
  background: #ffe9c8;
}

.commission-form .org-form-actions {
  margin-top: 1px;
  padding-top: 10px;
}

@media (max-width: 1000px) {
  .store-cards {
    grid-template-columns: 1fr 1fr;
  }

  .commission-list article {
    grid-template-columns: 1fr;
  }

  .commission-list dl {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .commission-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commission-rate-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .org-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .store-cards, .org-form {
    grid-template-columns: 1fr;
  }

  .employee-form .employee-role-field {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .employee-form .employee-role-field .employee-role-create-row {
    grid-column: 2;
    margin-top: 3px;
  }

  .employee-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .org-form section {
    grid-template-columns: 1fr;
  }

  .commission-form .commission-rule-name, .commission-scope-note {
    grid-column: 1;
  }

  .commission-form .commission-threshold-card, .commission-list dl {
    grid-template-columns: 1fr;
  }

  .org-tabs {
    overflow: auto;
  }

  .org-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .org-search-form, .org-search-form input {
    width: 100%;
  }
}

.org-hero-actions {
  gap: 8px;
  display: flex;
}

.org-hero-actions > button:not(.primary) {
  color: #fff;
  background: #ffffff14;
  border-color: #ffffff35;
}

.employee-section {
  gap: 12px;
  min-width: 0;
  display: grid;
}

.role-filter-strip {
  grid-template-columns: 42px 42px minmax(0, 1fr) 36px;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
  height: 86px;
  display: grid;
}

.role-vertical-action {
  border-color: var(--ui-border);
  min-width: 0;
  height: 86px;
  color: var(--ui-muted);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 5px 4px;
  display: flex;
}

.role-vertical-action span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 800;
}

.role-vertical-action b {
  color: var(--ui-accent);
  font-size: 14px;
  line-height: 1;
}

.role-vertical-action.create {
  color: var(--ui-accent);
  border-style: dashed;
}

.role-vertical-action.active {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.role-filter-track {
  scrollbar-width: none;
  scroll-behavior: smooth;
  gap: 8px;
  min-width: 0;
  display: flex;
  overflow: auto hidden;
}

.role-filter-track::-webkit-scrollbar {
  display: none;
}

.role-filter-card {
  border: 1px solid var(--ui-border);
  min-width: 190px;
  height: 86px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  flex: 0 0 190px;
  position: relative;
  overflow: hidden;
}

.role-filter-card:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-border));
}

.role-filter-card.active {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  box-shadow: inset 3px 0 0 var(--ui-accent);
}

.role-filter-select {
  width: 100%;
  height: 100%;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  align-content: start;
  gap: 6px;
  padding: 12px 44px 10px 12px;
  display: grid;
}

.role-filter-card span, .role-filter-card b, .role-filter-card small {
  display: block;
}

.role-filter-card b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  overflow: hidden;
}

.role-filter-card small {
  color: var(--ui-muted);
  margin-top: 5px;
  font-size: 8px;
}

.role-filter-card p {
  color: var(--ui-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  font-size: 8px;
  overflow: hidden;
}

.role-filter-edit {
  min-height: 0;
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  border: 0;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 8px;
  position: absolute;
  top: 8px;
  right: 8px;
}

.role-filter-edit:hover {
  color: var(--ui-on-accent);
  background: var(--ui-accent);
}

.role-scroll-next {
  border-color: var(--ui-border);
  min-width: 36px;
  height: 86px;
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  padding: 0;
  font-size: 24px;
}

.role-scroll-next:hover {
  color: var(--ui-on-accent);
  background: var(--ui-accent);
}

.org-form textarea {
  border: 1px solid var(--ui-border, #dce3df);
  resize: vertical;
  width: 100%;
  min-height: 76px;
  color: var(--ui-text);
  background: var(--ui-panel-solid, #fff);
  border-radius: 8px;
  margin-top: 6px;
  padding: 9px 10px;
  display: block;
}

.org-wide, .employee-account {
  grid-column: 1 / -1;
}

.store-map-location {
  border: 1px solid var(--ui-border, #dce3df);
  background: var(--ui-panel-soft, #f7faf8);
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 13px;
  display: grid;
}

.store-map-location > div {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.store-map-location b {
  color: var(--ui-text, #27332c);
  font-size: 12px;
}

.store-map-location small, .store-map-location p {
  color: var(--ui-muted, #87918c);
  font-size: 9px;
  line-height: 1.5;
}

.store-map-location button {
  border: 1px solid var(--ui-accent, #247451);
  min-height: 38px;
  color: var(--ui-accent, #247451);
  background: #fff;
  border-radius: 8px;
  padding: 0 14px;
}

.store-map-location button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.store-map-location p {
  grid-column: 1 / -1;
  margin: 0;
}

.store-map-location p.success {
  color: #18794e;
}

.employee-account > small, .field-help {
  color: var(--ui-muted, #87918c);
  margin-top: 6px;
  font-size: 9px;
  display: block;
}

.employee-role-create-row {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  display: flex;
}

.employee-role-create-row .field-help {
  flex: 1;
  margin-top: 0;
}

.org-form .employee-role-create-button {
  min-height: 28px;
  color: var(--ui-accent, #247451);
  text-underline-offset: 2px;
  background: none;
  border: 0;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 700;
  text-decoration: underline;
}

.required-mark {
  color: #c75545;
  margin-left: 4px;
  font-size: 9px;
  font-weight: 700;
}

.org-form label.check.store-unavailable {
  color: var(--ui-muted, #87918c);
  cursor: not-allowed;
  opacity: .72;
}

.org-form label.check > span {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.org-form label.check em {
  color: #9b5a45;
  background: #fff0e9;
  border-radius: 999px;
  padding: 2px 5px;
  font-size: 8px;
  font-style: normal;
}

.org-form input[readonly] {
  color: var(--ui-muted, #6e7973);
  background: var(--ui-panel-soft, #f5f7f6);
}

.permission-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  max-height: 310px;
  display: grid;
  overflow: auto;
}

.permission-grid .check {
  border: 1px solid var(--ui-border, #e3e8e5);
  border-radius: 8px;
  padding: 8px;
}

.permission-grid .check span b, .permission-grid .check span small {
  display: block;
}

.permission-grid .check span b {
  font-size: 9px;
}

.permission-grid .check span small {
  color: var(--ui-muted, #87918c);
  margin-top: 3px;
  font-size: 8px;
}

.org-hero {
  color: var(--ui-on-accent);
  background: linear-gradient(120deg, var(--ui-accent-hover), var(--ui-accent));
}

.org-hero span, .org-hero p {
  color: color-mix(in srgb, var(--ui-on-accent) 76%, transparent);
}

.org-tabs, .store-cards article, .commission-list article, .org-table, .org-modal {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.org-tabs button.active, .store-card-head > i, .employee-name > i, .status-ok {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.org-row.head {
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
}

.org-row, .store-cards footer, .org-form-actions {
  border-color: var(--ui-border);
}

.org-form input, .org-form select, .org-form section {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.org-toolbar {
  color: var(--ui-muted);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.org-search-form input {
  background: var(--ui-panel-soft);
  border-color: var(--ui-border);
}

.org-message {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-border));
}

.org-modal {
  box-shadow: var(--ui-shadow-overlay);
}

.room-management {
  gap: 14px;
  display: grid;
}

.room-manage-head {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  display: flex;
}

.room-manage-head > div:first-child > span, .room-manage-modal > header span {
  color: var(--ui-accent);
  letter-spacing: 1.6px;
  font-size: 8px;
  font-weight: 800;
}

.room-manage-head h3 {
  margin: 5px 0 4px;
  font-size: 16px;
}

.room-manage-head p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 9px;
}

.room-manage-head > div:last-child {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.room-manage-head button {
  min-height: 34px;
  font-size: 9px;
}

.room-stat-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  display: grid;
}

.room-stat-grid article {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 12px;
  padding: 15px 16px;
  position: relative;
  overflow: hidden;
}

.room-stat-grid article:after {
  content: "";
  background: var(--ui-accent-soft);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  position: absolute;
  bottom: -13px;
  right: -13px;
}

.room-stat-grid span, .room-stat-grid small {
  color: var(--ui-muted);
  font-size: 8px;
  display: block;
}

.room-stat-grid b {
  color: var(--ui-text);
  margin: 7px 0 3px;
  font-size: 22px;
  display: block;
}

.room-category-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.room-category-strip > button {
  text-align: left;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-height: 66px;
  color: var(--ui-text);
  border-radius: 11px;
  grid-template-columns: 6px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: grid;
}

.room-category-strip > button.active {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px var(--ui-accent-soft);
}

.room-category-strip i {
  border-radius: 5px;
  width: 6px;
  height: 36px;
}

.room-category-strip b, .room-category-strip small {
  display: block;
}

.room-category-strip b {
  font-size: 11px;
}

.room-category-strip small {
  color: var(--ui-muted);
  margin-top: 4px;
  font-size: 8px;
}

.room-category-strip em {
  color: var(--ui-accent);
  font-size: 9px;
  font-style: normal;
}

.room-category-strip u {
  width: max-content;
  color: var(--ui-accent);
  grid-column: 2;
  font-size: 8px;
  text-decoration: none;
}

.room-list-toolbar {
  align-items: center;
  gap: 8px;
  display: flex;
}

.room-list-toolbar label {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  flex: 1;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  display: flex;
}

.room-list-toolbar input {
  width: 100%;
  height: 34px;
  color: var(--ui-text);
  background: none;
  border: 0;
  outline: none;
  font-size: 9px;
}

.room-list-toolbar button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-height: 34px;
  font-size: 9px;
}

.room-list-toolbar button.active {
  color: var(--ui-accent);
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.room-list-toolbar > span {
  color: var(--ui-muted);
  white-space: nowrap;
  font-size: 9px;
}

.room-list-row {
  border-bottom: 1px solid var(--ui-border);
  grid-template-columns: 1.25fr 1.1fr .55fr .65fr .65fr .8fr;
  align-items: center;
  gap: 12px;
  min-width: 860px;
  padding: 11px 16px;
  font-size: 9px;
  display: grid;
}

.room-list-row.inactive {
  opacity: 1;
  color: var(--ui-muted);
  background: #f7faf8;
}

.room-list-row.head {
  background: var(--ui-panel-soft);
  min-height: 38px;
  color: var(--ui-muted);
}

.room-list-row > span > b, .room-list-row > span > small {
  display: block;
}

.room-list-row > span > small {
  color: var(--ui-muted);
  margin-top: 3px;
  font-size: 8px;
}

.room-list-name {
  align-items: center;
  gap: 9px;
  display: flex;
}

.room-list-name > i {
  color: #fff;
  border-radius: 9px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  display: grid;
}

.room-list-name b, .room-list-name small {
  display: block;
}

.room-list-name small {
  color: var(--ui-muted);
  margin-top: 3px;
  font-size: 8px;
  font-weight: normal;
}

.room-state {
  border-radius: 10px;
  padding: 4px 7px;
  font-size: 8px;
  font-style: normal;
  display: inline-flex;
}

.room-state.free {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.room-state.busy {
  color: #b64d37;
  background: #fff0eb;
}

.room-state.booked {
  color: #9a681e;
  background: #fff6df;
}

.room-list-actions {
  gap: 5px;
  display: flex;
}

.room-list-actions button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 8px;
}

.room-manage-modal {
  width: min(720px, 100vw - 28px);
}

.room-manage-modal > header > div h2 {
  margin-top: 4px;
}

.room-compact-form {
  gap: 11px;
  padding: 17px 20px;
}

.room-compact-form input, .room-compact-form select {
  height: 36px;
}

.room-form-note {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 8px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 11px;
  font-size: 8px;
}

@media (max-width: 900px) {
  .room-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .room-category-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-manage-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .room-category-strip {
    grid-template-columns: 1fr;
  }

  .room-list-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .room-compact-form {
    grid-template-columns: 1fr;
  }
}

.org-generated-code {
  background: #f5f9f7;
  border: 1px solid #dbe7e1;
  border-radius: 9px;
  gap: 4px;
  padding: 11px 13px;
  display: grid;
}

.org-generated-code span {
  color: #718078;
  font-size: 10px;
}

.org-generated-code b {
  color: #1f6347;
  letter-spacing: 1px;
  font-size: 14px;
}

.org-generated-code small {
  color: #89958f;
  font-size: 9px;
}

/* [project]/apps/admin/app/shift-handover.css [app-client] (css) */
.shift-trigger {
  white-space: nowrap;
  background: color-mix(in srgb,var(--ui-accent, #247451) 10%,var(--ui-surface, #fff));
  border-color: color-mix(in srgb,var(--ui-accent, #247451) 28%,var(--ui-border, #d9deda));
  min-height: 40px;
  color: var(--ui-accent, #247451);
  font-weight: 700;
}

.shift-dialog {
  background: var(--ui-surface, #fff);
  width: min(900px, 100vw - 32px);
  max-height: calc(100vh - 36px);
  color: var(--ui-text, #20232a);
  border: 1px solid var(--ui-border, #e1e7e4);
  border-radius: 18px;
  overflow: auto;
  box-shadow: 0 24px 90px #0005;
}

.shift-dialog > header, .shift-detail > header {
  border-bottom: 1px solid var(--ui-border, #e5eae7);
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 23px;
  display: flex;
}

.shift-dialog > header span {
  letter-spacing: 1.5px;
  color: var(--ui-accent, #247451);
  font-size: 9px;
}

.shift-dialog > header h2, .shift-detail h2 {
  margin: 6px 0 4px;
  font-size: 20px;
}

.shift-dialog > header p {
  color: var(--ui-muted, #85908a);
  margin: 0;
  font-size: 10px;
}

.shift-dialog > header button, .shift-detail > header button {
  color: var(--ui-muted, #777);
  background: none;
  border: 0;
  font-size: 22px;
}

.shift-range-form {
  gap: 16px;
  padding: 22px;
  display: grid;
}

.shift-range-form > label > span, .shift-time-grid label > span {
  color: var(--ui-muted, #65706a);
  margin-bottom: 7px;
  font-size: 10px;
  display: block;
}

.shift-range-form input, .shift-range-form select, .shift-range-form textarea {
  border: 1px solid var(--ui-border, #dce3df);
  background: var(--ui-surface, #fff);
  width: 100%;
  color: var(--ui-text, #20232a);
  border-radius: 9px;
  padding: 10px;
}

.shift-range-form textarea {
  resize: vertical;
  min-height: 80px;
}

.shift-time-grid {
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 14px;
  display: grid;
}

.shift-time-grid > i {
  color: var(--ui-accent, #247451);
  padding-bottom: 12px;
  font-style: normal;
}

.shift-range-form > footer, .shift-report > footer {
  border-top: 1px solid var(--ui-border, #edf0ee);
  justify-content: flex-end;
  gap: 9px;
  padding-top: 16px;
  display: flex;
}

.shift-error {
  color: #a34737;
  background: #fff0ed;
  border: 1px solid #f0ccc4;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 10px;
}

.shift-report {
  gap: 15px;
  padding: 20px;
  display: grid;
}

.shift-ticket-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.shift-ticket-title b, .shift-ticket-title small {
  display: block;
}

.shift-ticket-title small {
  color: var(--ui-muted, #888);
  margin-top: 5px;
  font-size: 9px;
}

.shift-ticket-title em {
  color: #9b6916;
  background: #fff1cc;
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 9px;
  font-style: normal;
}

.shift-kpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  display: grid;
}

.shift-kpis article {
  border: 1px solid var(--ui-border, #e2e8e5);
  background: var(--ui-elevated, #f8faf9);
  border-radius: 11px;
  padding: 14px;
}

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

.shift-kpis span, .shift-kpis small {
  color: var(--ui-muted, #84908a);
  font-size: 9px;
}

.shift-kpis strong {
  margin: 7px 0;
  font-size: 18px;
}

.shift-report-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.shift-report-grid section, .shift-category {
  border: 1px solid var(--ui-border, #e2e8e5);
  border-radius: 11px;
  padding: 14px;
}

.shift-report h3 {
  margin: 0 0 9px;
  font-size: 11px;
}

.shift-report-grid section > div, .shift-category > div {
  border-top: 1px dashed var(--ui-border, #e5eae7);
  justify-content: space-between;
  padding: 7px 0;
  font-size: 10px;
  display: flex;
}

.shift-report-grid .cash-total {
  color: var(--ui-accent, #247451);
  font-size: 12px;
}

.shift-category small {
  color: var(--ui-muted, #888);
  margin-left: 8px;
}

.shift-people {
  background: color-mix(in srgb,var(--ui-accent, #247451) 7%,var(--ui-surface, #fff));
  border-radius: 9px;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
  font-size: 10px;
  display: flex;
}

.shift-people span {
  flex: 1;
  min-width: 150px;
}

.shift-history {
  gap: 12px;
  display: grid;
}

.shift-history-head {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.shift-history-head h3 {
  margin: 0 0 5px;
  font-size: 15px;
}

.shift-history-head p {
  color: var(--ui-muted, #888);
  margin: 0;
  font-size: 10px;
}

.shift-history-head > b {
  background: var(--ui-elevated, #eef5f1);
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 10px;
}

.shift-history-table {
  background: var(--ui-surface, #fff);
  border: 1px solid var(--ui-border, #e1e7e4);
  border-radius: 12px;
  overflow: auto;
}

.shift-history-row {
  border: 0;
  border-bottom: 1px solid var(--ui-border, #edf0ee);
  width: 100%;
  min-width: 880px;
  color: var(--ui-text, #20232a);
  text-align: left;
  background: none;
  border-radius: 0;
  grid-template-columns: 1.1fr 1.5fr 1fr .8fr .7fr .6fr;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  font-size: 10px;
  display: grid;
}

.shift-history-row:not(.head):hover {
  background: var(--ui-elevated, #f7faf8);
}

.shift-history-row.head {
  background: var(--ui-elevated, #f7f9f8);
  color: var(--ui-muted, #7d8782);
}

.shift-history-row b, .shift-history-row small {
  display: block;
}

.shift-history-row small {
  color: var(--ui-muted, #8c9691);
  margin-top: 4px;
  font-size: 9px;
}

.shift-history-row em {
  font-style: normal;
}

.shift-detail {
  background: var(--ui-surface, #fff);
  width: min(720px, 100vw - 30px);
  color: var(--ui-text, #20232a);
  border-radius: 15px;
  padding-bottom: 20px;
}

.shift-detail .shift-kpis, .shift-detail .shift-people {
  margin: 16px 20px;
}

@media (max-width: 800px) {
  .shift-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .shift-report-grid, .shift-time-grid {
    grid-template-columns: 1fr;
  }

  .shift-time-grid > i {
    display: none;
  }
}

@media (max-width: 650px) {
  .shift-trigger {
    height: 30px;
    min-height: 30px;
    padding-inline: 8px;
  }

  .shift-dialog {
    border-radius: 0;
    width: 100vw;
    max-height: 100vh;
  }

  .shift-kpis {
    grid-template-columns: 1fr 1fr;
  }
}

/* [project]/apps/admin/app/themes.css [app-client] (css) */
:root, :root[data-theme="porcelain"] {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --ui-bg: #f6f7f9;
  --ui-bg-2: #eef1f3;
  --ui-sidebar: #fff;
  --ui-panel: #fff;
  --ui-panel-solid: #fff;
  --ui-panel-soft: #f3f5f6;
  --ui-text: #18201c;
  --ui-muted: #66716b;
  --ui-subtle: #8a948f;
  --ui-border: #dde3df;
  --ui-border-strong: #c8d1cc;
  --ui-accent: #176b4d;
  --ui-accent-hover: #125b40;
  --ui-accent-soft: #e8f2ed;
  --ui-accent-rgb: 23, 107, 77;
  --ui-positive: #19734f;
  --ui-warning: #9a6700;
  --ui-danger: #b42318;
  --ui-chart-1: #176b4d;
  --ui-chart-2: #4ea57e;
  --ui-chart-3: #d39a3a;
  --ui-chart-4: #8a948f;
  --ui-grid-line: #e8eeeb;
  --ui-hero: #eef5f1;
  --ui-on-accent: #fff;
  --ui-overlay: #121b167a;
  --ui-shadow-overlay: 0 20px 60px #14231b29;
}

:root[data-theme="warm"] {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --ui-bg: #f8f6f2;
  --ui-bg-2: #f1eee8;
  --ui-sidebar: #fffdfa;
  --ui-panel: #fffdfa;
  --ui-panel-solid: #fffdfa;
  --ui-panel-soft: #f3efe8;
  --ui-text: #29251f;
  --ui-muted: #71695f;
  --ui-subtle: #958c80;
  --ui-border: #e3ddd3;
  --ui-border-strong: #cec5b8;
  --ui-accent: #6f5b3e;
  --ui-accent-hover: #5d4b32;
  --ui-accent-soft: #eee8de;
  --ui-accent-rgb: 111, 91, 62;
  --ui-positive: #397358;
  --ui-warning: #9a6700;
  --ui-danger: #b5473c;
  --ui-chart-1: #6f5b3e;
  --ui-chart-2: #a98b61;
  --ui-chart-3: #d29a45;
  --ui-chart-4: #958c80;
  --ui-grid-line: #e8e1d7;
  --ui-hero: #f1ece3;
  --ui-on-accent: #fff;
  --ui-overlay: #26201875;
  --ui-shadow-overlay: 0 20px 60px #322a1e29;
}

:root[data-theme="ink"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --ui-bg: #111713;
  --ui-bg-2: #0d120f;
  --ui-sidebar: #151d18;
  --ui-panel: #19231e;
  --ui-panel-solid: #19231e;
  --ui-panel-soft: #202c26;
  --ui-text: #edf4f0;
  --ui-muted: #a1aea7;
  --ui-subtle: #7e8b84;
  --ui-border: #304038;
  --ui-border-strong: #41554b;
  --ui-accent: #50b88a;
  --ui-accent-hover: #68c99d;
  --ui-accent-soft: #233b31;
  --ui-accent-rgb: 80, 184, 138;
  --ui-positive: #62c99a;
  --ui-warning: #e0b45b;
  --ui-danger: #ff8b82;
  --ui-chart-1: #50b88a;
  --ui-chart-2: #76d7ac;
  --ui-chart-3: #e0b45b;
  --ui-chart-4: #7e8b84;
  --ui-grid-line: #2a3931;
  --ui-hero: #1e3028;
  --ui-on-accent: #0d2118;
  --ui-overlay: #040806ad;
  --ui-shadow-overlay: 0 20px 64px #0000005c;
}

:root[data-theme="creator"] {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --ui-bg: #f4eef6;
  --ui-bg-2: #eee5f1;
  --ui-sidebar: #25102f;
  --ui-panel: #fffdfd;
  --ui-panel-solid: #fffdfd;
  --ui-panel-soft: #f7f1f8;
  --ui-text: #201724;
  --ui-muted: #746878;
  --ui-subtle: #9a8d9e;
  --ui-border: #e5dce7;
  --ui-border-strong: #cdbdd2;
  --ui-accent: #9634b7;
  --ui-accent-hover: #7d269d;
  --ui-accent-soft: #f1def5;
  --ui-accent-rgb: 150, 52, 183;
  --ui-positive: #39775c;
  --ui-warning: #a26329;
  --ui-danger: #b94a5b;
  --ui-chart-1: #9634b7;
  --ui-chart-2: #c46bd4;
  --ui-chart-3: #df9660;
  --ui-chart-4: #9a8d9e;
  --ui-grid-line: #eadfeb;
  --ui-hero: #f3e8f5;
  --ui-on-accent: #fff;
  --ui-overlay: #1d0a2694;
  --ui-shadow-overlay: 0 24px 70px #2b0f363d;
}

:root[data-theme="platform"] {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --ui-bg: #f2f5f9;
  --ui-bg-2: #eaf0f6;
  --ui-sidebar: #0d223a;
  --ui-panel: #fff;
  --ui-panel-solid: #fff;
  --ui-panel-soft: #edf3f8;
  --ui-text: #17283a;
  --ui-muted: #64758a;
  --ui-subtle: #8796a7;
  --ui-border: #d8e2eb;
  --ui-border-strong: #bccbd9;
  --ui-accent: #1f5f9f;
  --ui-accent-hover: #174d84;
  --ui-accent-soft: #e2eef8;
  --ui-accent-rgb: 31, 95, 159;
  --ui-positive: #287355;
  --ui-warning: #9a6700;
  --ui-danger: #b42318;
  --ui-chart-1: #1f5f9f;
  --ui-chart-2: #4f91c7;
  --ui-chart-3: #45a7ba;
  --ui-chart-4: #8796a7;
  --ui-grid-line: #e2eaf1;
  --ui-hero: #eaf2f8;
  --ui-on-accent: #fff;
  --ui-overlay: #091b2e8f;
  --ui-shadow-overlay: 0 22px 64px #0d223a33;
}

:root {
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --motion-fast: .12s cubic-bezier(.2, 0, 0, 1);
  --motion-normal: .18s cubic-bezier(.2, 0, 0, 1);
  --ui-font-xs: 12px;
  --ui-font-sm: 13px;
  --ui-font-base: 14px;
  --ui-line-height: 1.55;
}

:root[data-font-size="compact"] {
  --ui-font-xs: 11px;
  --ui-font-sm: 12px;
  --ui-font-base: 13px;
  --ui-line-height: 1.5;
}

:root[data-font-size="comfortable"] {
  --ui-font-xs: 12px;
  --ui-font-sm: 13px;
  --ui-font-base: 14px;
  --ui-line-height: 1.55;
}

:root[data-font-size="large"] {
  --ui-font-xs: 14px;
  --ui-font-sm: 15px;
  --ui-font-base: 16px;
  --ui-line-height: 1.6;
}

:root[data-font-size="xlarge"] {
  --ui-font-xs: 16px;
  --ui-font-sm: 17px;
  --ui-font-base: 18px;
  --ui-line-height: 1.65;
}

html {
  background: var(--ui-bg);
}

body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-synthesis: none;
  font-family: Aptos, HarmonyOS Sans SC, MiSans, PingFang SC, Microsoft YaHei UI, Noto Sans CJK SC, sans-serif;
  font-size: var(--ui-font-base);
  line-height: var(--ui-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  transition: background-color var(--motion-normal),
    color var(--motion-normal);
}

::selection {
  background: rgba(var(--ui-accent-rgb), .18);
}

.shell {
  background: var(--ui-bg);
}

.shell:before {
  content: none;
}

.shell > aside {
  background: var(--ui-sidebar);
  color: var(--ui-muted);
  border-right: 1px solid var(--ui-border);
  box-shadow: none;
}

.brand {
  color: var(--ui-text);
  letter-spacing: -.02em;
}

.brand b {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  box-shadow: none;
  border-color: #0000;
}

nav button {
  min-height: 44px;
  color: var(--ui-muted);
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}

nav button:hover {
  background: var(--ui-panel-soft);
  color: var(--ui-text);
  transform: none;
}

nav button.active {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  box-shadow: none;
  font-weight: 650;
}

.workspace {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-top: 12px;
}

.workspace > header {
  gap: var(--space-4);
  min-height: 30px;
  margin-bottom: 12px;
}

.workspace > header small {
  color: var(--ui-muted);
}

.workspace > header h1 {
  color: var(--ui-text);
  letter-spacing: -.025em;
}

.header-actions {
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.store-switch {
  white-space: nowrap;
  min-height: 40px;
}

.store-context {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
  position: relative;
}

.header-theme-switcher {
  position: relative;
}

.header-theme-trigger {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-xs);
  background: var(--ui-panel-solid);
  min-height: 30px;
  color: var(--ui-text);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-weight: 750;
  line-height: 1.2;
  display: inline-flex;
  font-size: var(--ui-font-xs) !important;
}

.header-theme-trigger svg {
  fill: none;
  width: 15px;
  height: 15px;
  stroke: var(--ui-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7px;
}

.header-theme-trigger > i {
  border-right: 1.5px solid var(--ui-muted);
  border-bottom: 1.5px solid var(--ui-muted);
  width: 6px;
  height: 6px;
  transition: transform var(--motion-fast);
  margin-left: 1px;
  transform: translateY(-1px)rotate(45deg);
}

.header-theme-trigger[aria-expanded="true"] > i {
  transform: translateY(2px)rotate(225deg);
}

.header-theme-trigger:hover, .header-theme-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--ui-accent) 36%, var(--ui-border));
  background: var(--ui-accent-soft);
}

.header-theme-menu {
  z-index: 60;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: min(330px, 100vw - 28px);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 14px;
  padding: 12px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

.header-theme-menu > header {
  justify-content: space-between;
  align-items: center;
  padding: 2px 2px 10px;
  display: flex;
}

.header-theme-menu > header span {
  color: var(--ui-muted);
  font-size: var(--ui-font-xs);
}

.header-theme-menu > header b {
  color: var(--ui-accent);
  font-size: var(--ui-font-xs);
}

.header-theme-menu > div {
  gap: 7px;
  display: grid;
}

.header-theme-menu > div > button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  min-height: 54px;
  color: var(--ui-text);
  text-align: left;
  border-radius: 10px;
  grid-template-columns: 58px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  display: grid;
}

.header-theme-menu > div > button:hover, .header-theme-menu > div > button.selected {
  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border));
  background: var(--ui-accent-soft);
}

.header-theme-swatches {
  border: 1px solid color-mix(in srgb, var(--ui-border) 78%, transparent);
  border-radius: 8px;
  width: 58px;
  height: 34px;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #ffffff52;
}

.header-theme-swatches > i {
  flex: 1;
}

.header-theme-menu > div > button > span:nth-child(2) b, .header-theme-menu > div > button > span:nth-child(2) small {
  display: block;
}

.header-theme-menu > div > button > span:nth-child(2) b {
  font-size: var(--ui-font-xs);
}

.header-theme-menu > div > button > span:nth-child(2) small {
  color: var(--ui-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 9px;
  overflow: hidden;
}

.header-theme-menu > div > button > em {
  color: var(--ui-accent);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.store-switch-wrap {
  position: relative;
}

.store-switch {
  border-color: var(--ui-border);
  border-radius: var(--radius-xs);
  background: var(--ui-panel-solid);
  min-height: 30px;
  color: var(--ui-text);
  padding: 3px 8px;
  font-weight: 750;
  line-height: 1.2;
  font-size: var(--ui-font-xs) !important;
}

.store-switch > span {
  color: var(--ui-muted);
  margin-left: 2px;
  font-size: .9em;
  line-height: 1;
}

.current-account-trigger {
  min-height: 30px;
  color: var(--ui-muted);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-xs);
  background: var(--ui-panel-soft);
  white-space: nowrap;
  padding: 3px 10px;
  line-height: 1.2;
  font-size: var(--ui-font-xs) !important;
}

.current-account-trigger b {
  color: var(--ui-text);
  font-weight: 800;
}

.current-account-trigger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border));
  background: var(--ui-accent-soft);
}

.logout-trigger {
  border: 1px solid color-mix(in srgb, #b94d43 28%, var(--ui-border));
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, #b94d43 7%, var(--ui-panel-solid));
  color: #a23f37;
  white-space: nowrap;
  min-height: 30px;
  padding: 3px 10px;
  font-weight: 750;
  line-height: 1.2;
  font-size: var(--ui-font-xs) !important;
}

.logout-trigger:hover:not(:disabled) {
  background: color-mix(in srgb, #b94d43 12%, var(--ui-panel-solid));
  color: #8f302a;
  border-color: #c26b63;
}

.active-store-name {
  color: var(--ui-text);
  font-size: var(--ui-font-sm);
  font-weight: 500;
}

.store-menu {
  z-index: 40;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  background: var(--ui-panel-solid);
  width: min(280px, 100vw - 30px);
  box-shadow: var(--ui-shadow-overlay);
  padding: 6px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

.store-menu > button {
  text-align: left;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  display: flex;
}

.store-menu > button:hover, .store-menu > button.selected {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.store-menu > button.locked {
  color: var(--ui-text);
}

.store-menu > button.locked:hover {
  color: #8d621b;
  background: #fff8e8;
}

.store-menu > button.locked b {
  color: #96691d;
  background: #fff1cc;
  border-radius: 999px;
  padding: 3px 6px;
}

.store-menu > button b {
  font-size: var(--ui-font-xs);
}

.store-menu > button > span {
  gap: 3px;
  display: grid;
}

.store-menu > button > span small {
  color: var(--ui-muted);
  font-size: 9px;
  font-weight: 500;
}

.store-menu > p {
  color: var(--ui-muted);
  font-size: var(--ui-font-sm);
  text-align: center;
  margin: 0;
  padding: 14px 10px;
}

.store-access-dialog-backdrop {
  z-index: 120;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #0b1b1694;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.store-access-dialog {
  width: min(420px, 100vw - 32px);
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border: 1px solid var(--ui-border);
  text-align: center;
  border-radius: 18px;
  padding: 30px;
  animation: .18s ease-out store-access-dialog-in;
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 90px #0518114d;
}

.store-access-dialog:before {
  content: "";
  opacity: .42;
  background: #ffe8ad;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  position: absolute;
  top: -110px;
  left: -80px;
}

.store-access-dialog-close {
  z-index: 1;
  width: 32px;
  height: 32px;
  color: var(--ui-muted);
  background: var(--ui-subtle);
  border: 0;
  border-radius: 9px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  position: absolute;
  top: 14px;
  right: 14px;
}

.store-access-dialog-icon {
  color: #8b611a;
  background: linear-gradient(145deg, #fff5d8, #ffe6a2);
  border: 1px solid #f1d28c;
  border-radius: 17px;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 2px auto 13px;
  font-size: 16px;
  font-weight: 850;
  display: grid;
  box-shadow: 0 9px 24px #96691d29;
}

.store-access-dialog > small {
  color: #a57829;
  letter-spacing: .14em;
  font-size: 9px;
  font-weight: 800;
}

.store-access-dialog h2 {
  margin: 7px 0 18px;
  font-size: 20px;
  line-height: 1.3;
}

.store-access-dialog-store {
  color: var(--ui-muted);
  background: var(--ui-subtle);
  border: 1px solid var(--ui-border);
  text-align: left;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 11px;
  display: flex;
}

.store-access-dialog-store strong {
  color: var(--ui-text);
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 13px;
}

.store-access-dialog p {
  color: var(--ui-muted);
  margin: 16px 0 20px;
  font-size: 13px;
  line-height: 1.7;
}

.store-access-dialog-confirm {
  color: #fff;
  background: var(--ui-accent);
  width: 100%;
  min-height: 44px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-accent) 24%, transparent);
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}

@keyframes store-access-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

.logout-dialog-backdrop {
  z-index: 130;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #11191694;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.logout-dialog {
  width: min(430px, 100vw - 32px);
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border: 1px solid var(--ui-border);
  text-align: center;
  border-radius: 18px;
  padding: 30px;
  animation: .18s ease-out store-access-dialog-in;
  box-shadow: 0 28px 90px #05181152;
}

.logout-dialog-icon {
  color: #9b3c35;
  background: linear-gradient(145deg, #fff3f1, #ffdcd7);
  border: 1px solid #efc3bd;
  border-radius: 17px;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 13px;
  font-size: 12px;
  font-weight: 850;
  display: grid;
  box-shadow: 0 9px 24px #9b3c3524;
}

.logout-dialog > small {
  color: #a34a43;
  letter-spacing: .14em;
  font-size: 9px;
  font-weight: 800;
}

.logout-dialog h2 {
  margin: 7px 0 10px;
  font-size: 21px;
  line-height: 1.3;
}

.logout-dialog p {
  max-width: 340px;
  color: var(--ui-muted);
  margin: 0 auto 22px;
  font-size: 13px;
  line-height: 1.7;
}

.logout-dialog-actions {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.logout-dialog-actions > button {
  border-radius: 10px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 800;
}

.logout-dialog-cancel {
  border: 1px solid var(--ui-border);
  background: var(--ui-subtle);
  color: var(--ui-text);
}

.logout-dialog-confirm {
  color: #fff;
  background: linear-gradient(105deg, #a94139, #c15950);
  border: 1px solid #a94139;
  box-shadow: 0 8px 20px #a9413938;
}

button, input, select, textarea {
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
  color: var(--ui-text);
  transition: border-color var(--motion-fast),
    background-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}

button {
  min-height: 40px;
}

button:hover:not(:disabled) {
  border-color: var(--ui-border-strong);
}

button:active:not(:disabled) {
  transform: scale(.98);
}

button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

input::placeholder, textarea::placeholder {
  color: var(--ui-subtle);
}

:where(button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(var(--ui-accent-rgb), .22);
  outline-offset: 2px;
}

input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(var(--ui-accent-rgb), .14);
  border-color: var(--ui-accent) !important;
  box-shadow: none !important;
}

.primary, .pos-confirm, .checkout-submit, .confirm-recharge, .save-member {
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  color: var(--ui-on-accent) !important;
  box-shadow: none !important;
}

.primary:hover, .pos-confirm:hover, .checkout-submit:hover, .confirm-recharge:hover, .save-member:hover {
  background: var(--ui-accent-hover) !important;
}

:where(.stats article, .panel, .member-summary article, .table-panel, .recharge-step, .recharge-success, .pos-products, .pos-checkout, .pos-success, .catalog-pane, .settlement-pane, .quick-cashier > section, .quick-cashier > aside, .pass-purchase > section, .pass-purchase > aside, .catalog-stats article, .catalog-list, .form-section, .more-details, .member-form, .catalog-form, .toast) {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--ui-panel) !important;
  border-color: var(--ui-border) !important;
}

:where(.stats article, .panel, .member-summary article, .table-panel, .recharge-step, .pos-products, .pos-checkout, .catalog-pane, .settlement-pane, .catalog-stats article, .catalog-list) {
  border-radius: var(--radius-md);
}

:where(.form-body, .catalog-form-body, .member-head, .kind-tabs, .business-tabs, .success-ticket) {
  background: var(--ui-panel-soft) !important;
}

:where(.table-tools, .member-row, .form-header, .form-footer, .more-details[open] summary, .sub-section, .pos-order-title, .pos-member, .pos-payments, .pos-cart > div, .customer-box, .checkout-line, .settlement-summary, .catalog-list-head, .catalog-table > div) {
  border-color: var(--ui-border) !important;
}

:where(.stats span, .member-summary span, .table-tools p, .member-row small, .form-header p, .form-grid label > span, .wide-label > span, .avatar-field > span, .step-heading p, .pos-title small, .pos-order-title small, .catalog-stats span, .catalog-table small, .empty, .empty-cart, .payment-selector > span) {
  color: var(--ui-muted) !important;
}

:where(.stats em, .member-summary small, .panel p em, .level, .section-title > span, .more-details summary b, .step-heading > b, .plan-grid span, .pos-title span, .quick-cashier > section > span, .pass-heading span, .catalog-stats small, .catalog-list-head button.active) {
  color: var(--ui-accent) !important;
}

.notice {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-radius: var(--radius-sm);
  border-color: #0000;
}

.chart i {
  background: var(--ui-accent);
  opacity: .78;
  box-shadow: none;
}

.dot {
  background: var(--ui-positive);
  box-shadow: none;
}

.dot.warn {
  background: var(--ui-warning);
  box-shadow: none;
}

.member-hero, .catalog-hero {
  background: var(--ui-hero);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  box-shadow: none;
}

.member-hero .eyebrow, .catalog-hero > div:first-child span {
  color: var(--ui-accent);
}

.member-hero p, .catalog-hero p {
  color: var(--ui-muted);
}

.create-member-hero {
  color: var(--ui-on-accent);
  border-color: var(--ui-accent);
  box-shadow: none;
  background: var(--ui-accent) !important;
}

.create-member-hero small {
  color: color-mix(in srgb, var(--ui-on-accent), transparent 24%);
}

.create-member-hero > b {
  color: var(--ui-on-accent);
  background: #ffffff24;
}

.form-icon {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.level, .section-title > span, .step-heading > b, .plan-grid > button.selected, .payment-grid button.selected, .pos-selected-member, .member-card, .pos-payments button.selected, .payment-selector button.active, .quick-payments button.active, .pass-plan-grid > button.active, .catalog-list-head button.active {
  background: var(--ui-accent-soft) !important;
  border-color: rgba(var(--ui-accent-rgb), .34) !important;
}

.tag {
  background: color-mix(in srgb, var(--ui-warning), transparent 86%);
  color: var(--ui-warning);
}

.modal-backdrop {
  background: var(--ui-overlay);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.member-form, .catalog-form, .toast, .member-results, .pos-member-results, .member-dropdown {
  box-shadow: var(--ui-shadow-overlay);
}

.member-results {
  background: var(--ui-panel);
  border-color: var(--ui-border);
}

.result-caption {
  background: var(--ui-panel-soft);
  color: var(--ui-muted);
}

.member-results > button {
  border-color: var(--ui-border);
}

.member-results > button:hover {
  background: var(--ui-accent-soft);
}

.mini-avatar {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.check-card, .avatar-upload {
  background: var(--ui-panel-soft);
  border-color: var(--ui-border);
  color: var(--ui-muted);
}

.selected-member {
  background: var(--ui-accent-soft);
  border-color: rgba(var(--ui-accent-rgb), .26);
}

.member-avatar, .selected-member > span, .member-card > span, .product-grid i {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

.recharge-summary, .pass-summary {
  color: var(--ui-on-accent);
  box-shadow: none;
  border: 0;
  background: var(--ui-accent) !important;
}

.cashier-modebar > button.active {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-color: rgba(var(--ui-accent-rgb), .34);
  box-shadow: none;
}

.cashier-modebar > button.active > b {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

.cashier-modebar > button.active small {
  color: var(--ui-muted);
}

.modern-product-grid > button:hover, .product-grid > button:hover {
  border-color: var(--ui-accent);
  box-shadow: none;
  transform: none;
}

.grand-total strong, .pos-total strong, .product-grid b {
  color: var(--ui-text);
}

.service-dot {
  background: var(--ui-accent);
}

.goods-dot {
  background: #5b6f9e;
}

.empty-module {
  background: var(--ui-panel);
  border-color: var(--ui-border);
}

.theme-switcher {
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  background: var(--ui-panel);
  min-height: 40px;
  box-shadow: none;
  padding: 4px 5px 4px 10px;
  display: flex;
  position: relative;
}

.appearance-group {
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.appearance-divider {
  background: var(--ui-border);
  flex: 0 0 1px;
  width: 1px;
  height: 20px;
}

.theme-switcher-label {
  color: var(--ui-muted);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: flex;
}

.theme-switcher-label > i {
  background: var(--ui-accent);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.theme-options {
  gap: 2px;
  display: flex;
}

.theme-options > button {
  border-radius: var(--radius-xs);
  height: 30px;
  min-height: 30px;
  color: var(--ui-muted);
  background: none;
  border: 0;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  display: flex;
}

.theme-options > button:hover {
  background: var(--ui-panel-soft);
  color: var(--ui-text);
}

.theme-options > button.selected {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  box-shadow: none;
}

.theme-options b {
  white-space: nowrap;
  font-size: 10px;
}

.theme-swatches {
  display: flex;
}

.theme-swatches i {
  border: 1px solid #80808033;
  width: 7px;
  height: 13px;
}

.theme-swatches i:first-child {
  border-radius: 4px 0 0 4px;
}

.theme-swatches i:last-child {
  border-radius: 0 4px 4px 0;
}

.font-size-label {
  color: var(--ui-muted);
  font-size: var(--ui-font-xs);
  white-space: nowrap;
}

.font-size-options {
  gap: 2px;
  display: flex;
}

.font-size-options > button {
  border-radius: var(--radius-xs);
  min-width: 34px;
  height: 30px;
  min-height: 30px;
  color: var(--ui-muted);
  background: none;
  border: 0;
  padding: 3px 7px;
}

.font-size-options > button:hover {
  background: var(--ui-panel-soft);
  color: var(--ui-text);
}

.font-size-options > button.selected {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-weight: 700;
}

.font-size-options span {
  font-size: var(--ui-font-sm);
  line-height: 1;
}

.font-size-options b {
  display: none;
}

.appearance-settings {
  gap: 10px;
  display: grid;
}

.appearance-setting-section {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  background: var(--ui-panel);
  padding: 12px 14px;
}

.appearance-setting-section > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.appearance-setting-section > header span {
  color: var(--ui-accent);
  font-size: var(--ui-font-xs);
  letter-spacing: .14em;
  font-weight: 750;
}

.appearance-setting-section > header h3 {
  color: var(--ui-text);
  margin: 2px 0;
  font-size: 20px;
}

.appearance-setting-section > header p {
  color: var(--ui-muted);
  font-size: var(--ui-font-sm);
  margin: 0;
}

.appearance-setting-section > header > em {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-size: var(--ui-font-xs);
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 9px;
  font-style: normal;
}

.theme-preview-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.theme-preview-grid > button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  text-align: left;
  border-radius: 10px;
  min-height: 0;
  padding: 5px;
  overflow: hidden;
}

.theme-preview-grid > button:hover {
  border-color: var(--ui-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px #14181614;
}

.theme-preview-grid > button.selected {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 2px rgba(var(--ui-accent-rgb), .12);
}

.theme-preview {
  background: var(--preview-bg);
  border: 1px solid #50425424;
  border-radius: 10px;
  grid-template-columns: 28px 1fr;
  height: 80px;
  display: grid;
  overflow: hidden;
}

.theme-preview > i {
  background: var(--preview-side);
  flex-direction: column;
  gap: 5px;
  padding: 9px 5px;
  display: flex;
}

.theme-preview > i b {
  background: color-mix(in srgb, var(--preview-accent), transparent 38%);
  border-radius: 5px;
  height: 4px;
}

.theme-preview > i b:first-child {
  background: var(--preview-accent);
  width: 70%;
  height: 7px;
  margin-bottom: 5px;
}

.theme-preview > strong {
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  display: flex;
}

.theme-preview > strong > b {
  background: var(--preview-accent);
  opacity: .82;
  border-radius: 4px;
  width: 42%;
  height: 5px;
}

.theme-preview > strong > span {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  display: grid;
}

.theme-preview > strong > span i {
  border: 1px solid color-mix(in srgb, var(--preview-accent), transparent 72%);
  background: color-mix(in srgb, var(--preview-bg), white 35%);
  border-radius: 4px;
  height: 20px;
}

.theme-preview > strong > em {
  flex: 1;
  grid-template-columns: 1.4fr .8fr;
  gap: 4px;
  display: grid;
}

.theme-preview > strong > em i {
  border: 1px solid color-mix(in srgb, var(--preview-accent), transparent 72%);
  background: color-mix(in srgb, var(--preview-bg), white 28%);
  border-radius: 4px;
}

.theme-card-copy {
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 2px 1px;
  display: flex;
}

.theme-card-copy > span, .theme-card-copy strong, .theme-card-copy small {
  display: block;
}

.theme-card-copy strong {
  color: var(--ui-text);
  font-size: var(--ui-font-base);
}

.theme-card-copy small {
  color: var(--ui-muted);
  font-size: var(--ui-font-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
  overflow: hidden;
}

.theme-card-copy > i, .font-preview-grid > button > i {
  background: var(--ui-accent);
  width: 18px;
  height: 18px;
  color: var(--ui-on-accent);
  border-radius: 50%;
  flex: 0 0 18px;
  place-items: center;
  font-style: normal;
  display: grid;
}

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

.font-preview-grid > button {
  border: 1px solid var(--ui-border);
  text-align: left;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 10px;
  display: grid;
}

.font-preview-grid > button:hover {
  border-color: var(--ui-border-strong);
}

.font-preview-grid > button.selected {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.font-preview-grid > button > b {
  min-width: 28px;
  color: var(--ui-accent);
  font-size: 17px;
}

.font-preview-grid > button span, .font-preview-grid > button strong, .font-preview-grid > button small {
  display: block;
}

.font-preview-grid > button strong {
  color: var(--ui-text);
  font-size: var(--ui-font-sm);
}

.font-preview-grid > button small {
  color: var(--ui-muted);
  font-size: var(--ui-font-xs);
  margin-top: 1px;
}

.font-reading-sample {
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--radius-md);
  background: var(--ui-panel-soft);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 12px;
  display: grid;
}

.font-reading-sample span, .font-reading-sample small {
  color: var(--ui-muted);
  font-size: var(--ui-font-xs);
}

.font-reading-sample p {
  color: var(--ui-text);
  font-size: var(--ui-font-base);
  margin: 0;
  font-weight: 700;
}

:root[data-font-size] nav button, :root[data-font-size] .workspace :where(button, input, select, textarea), :root[data-font-size] .member-row, :root[data-font-size] .batch-row, :root[data-font-size] .count-row {
  line-height: var(--ui-line-height);
  font-size: var(--ui-font-base) !important;
}

:root[data-font-size] .workspace :where(p, label, dt, dd), :root[data-font-size] :where(.notice, .check-card, .custom-recharge, .recharge-remark, .payment-line), :root[data-font-size] :where(.product-grid strong, .pos-cart b, .pos-member-results b, .checkout-line b, .member-dropdown b, .catalog-table b, .rule-cards b, .inbound-tip b, .cashier-modebar strong) {
  line-height: var(--ui-line-height);
  font-size: var(--ui-font-sm) !important;
}

:root[data-font-size] .workspace :where(small, em), :root[data-font-size] :where(.eyebrow, .level, .tag, .section-title > span, .form-grid label > span, .wide-label > span, .avatar-field > span, .catalog-table .allowed, .catalog-table .restricted, .inventory-top > div > span, .inventory-tabs > span) {
  line-height: var(--ui-line-height);
  font-size: var(--ui-font-xs) !important;
}

:root[data-font-size] .workspace :where(.step-heading p, .table-tools p, .form-header p, .catalog-list-head p, .batch-toolbar p, .stocktake p, .quick-cashier > section > p) {
  font-size: var(--ui-font-sm) !important;
}

:root[data-font-size] .theme-switcher :where(span, b, button) {
  line-height: 1;
}

:root[data-font-size] .theme-switcher-label, :root[data-font-size] .font-size-label, :root[data-font-size] .theme-options b {
  font-size: var(--ui-font-xs) !important;
}

:root[data-font-size] .font-size-options span {
  font-size: var(--ui-font-sm) !important;
}

@media (max-width: 1050px) {
  .theme-options b, .theme-switcher-label, .font-size-label {
    display: none;
  }

  .theme-switcher {
    padding-left: 5px;
  }
}

@media (max-width: 650px) {
  button {
    min-width: 44px;
    min-height: 44px;
  }

  .shell {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
    display: block;
  }

  .shell > aside {
    z-index: 30;
    height: calc(64px + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);
    border: 0;
    border-top: 1px solid var(--ui-border);
    position: fixed;
    inset: auto 0 0;
  }

  .brand {
    display: none;
  }

  nav {
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    gap: 2px;
    height: 58px;
    display: flex;
    overflow-x: auto;
  }

  nav::-webkit-scrollbar {
    display: none;
  }

  nav button {
    text-align: center;
    white-space: nowrap;
    scroll-snap-align: center;
    flex: 0 0 74px;
    align-content: center;
    place-items: center;
    gap: 2px;
    height: 54px;
    min-height: 54px;
    padding: 7px 4px;
    font-size: 11px;
    line-height: 1.15;
    display: grid;
  }

  nav button:before {
    content: "•";
    height: 14px;
    color: var(--ui-subtle);
    font-size: 16px;
    line-height: 10px;
  }

  nav button.active:before {
    color: var(--ui-accent);
  }

  .workspace {
    padding: 10px 14px 18px;
  }

  .workspace > header {
    flex-wrap: wrap;
    align-items: center;
    min-height: 30px;
    margin-bottom: 10px;
  }

  .workspace > header h1 {
    margin: 4px 0 14px;
    font-size: 23px;
  }

  .workspace > header small {
    font-size: 10px;
  }

  .header-actions {
    flex-flow: wrap;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }

  .store-switch {
    height: 30px;
    min-height: 30px;
    padding-inline: 8px;
  }

  .theme-switcher {
    max-width: 100%;
    height: 52px;
    min-height: 52px;
  }

  .theme-options > button, .font-size-options > button {
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .appearance-divider {
    height: 28px;
  }

  .appearance-setting-section {
    padding: 16px;
  }

  .theme-preview-grid {
    grid-template-columns: 1fr;
  }

  .theme-preview {
    height: 145px;
  }

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

  .font-preview-grid > button {
    min-height: 80px;
    padding: 12px;
  }

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

  .stats article {
    padding: 15px;
  }

  .stats strong, .member-summary strong {
    font-size: 20px;
  }

  .member-summary {
    scroll-snap-type: x mandatory;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    padding-bottom: 4px;
    overflow-x: auto;
  }

  .member-summary article {
    scroll-snap-align: start;
  }

  .member-hero, .catalog-hero {
    border-radius: var(--radius-md);
    padding: 20px;
  }

  .member-hero h2, .catalog-hero h2 {
    font-size: 19px;
    line-height: 1.35;
  }

  .create-member-hero {
    min-width: 0;
    min-height: 56px;
  }

  .tool-actions {
    width: 100%;
  }

  .tool-actions input {
    width: 100%;
    min-height: 44px;
  }

  .tool-actions button {
    min-height: 44px;
  }

  .cashier-modebar {
    scroll-snap-type: x mandatory;
    padding-bottom: 3px;
    display: flex;
    overflow-x: auto;
  }

  .cashier-modebar > button {
    scroll-snap-align: start;
    flex: 0 0 76%;
    min-height: 64px;
  }

  .catalog-pane, .settlement-pane, .pos-products, .pos-checkout {
    padding: 14px;
  }

  .modern-product-grid, .product-grid {
    gap: 8px;
  }

  .modern-product-grid > button, .product-grid > button {
    min-height: 132px;
    padding: 12px;
  }

  .modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .member-form, .catalog-form {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100vw;
    height: min(92dvh, 900px);
    max-height: 92dvh;
  }

  .form-header {
    padding: 16px;
  }

  .form-body {
    padding: 14px;
  }

  .form-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }

  .form-footer button {
    min-height: 46px;
  }

  .toast {
    inset: 12px 12px auto;
  }
}

@media (max-width: 380px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .header-actions .store-switch {
    display: none;
  }
}

:root[data-theme="creator"] .shell > aside {
  color: #cdbfd2;
  background: radial-gradient(circle at 100% 15%, #8d33a33b, #0000 34%), linear-gradient(#2b1236 0%, #211029 55%, #1d0c25 100%);
  border-right-color: #ffffff14;
  box-shadow: inset -1px 0 #ffffff0a;
}

:root[data-theme="creator"] .brand {
  color: #fff8ff;
}

:root[data-theme="creator"] .brand b {
  color: #f4d7fb;
  background: #ffffff17;
  border: 1px solid #ffffff1f;
}

:root[data-theme="creator"] nav button {
  color: #cdbfd2;
}

:root[data-theme="creator"] nav button:hover {
  color: #fff;
  background: #ffffff12;
}

:root[data-theme="creator"] nav button.active {
  color: #fff;
  background: linear-gradient(90deg, #a441be57, #ffffff12);
  box-shadow: inset 3px 0 #f09a73, inset 0 0 0 1px #ffffff14, 0 8px 24px #08020c2e;
}

:root[data-theme="creator"] .workspace {
  background: radial-gradient(circle at 62% 0, #b54ccd14, #0000 26%), linear-gradient(#faf6fa 0%, #f5eff6 100%);
}

:root[data-theme="creator"] :where(.stats article, .panel, .member-summary article, .table-panel, .recharge-step, .recharge-success, .pos-products, .pos-checkout, .pos-success, .catalog-pane, .settlement-pane, .quick-cashier > section, .quick-cashier > aside, .pass-purchase > section, .pass-purchase > aside, .catalog-stats article, .catalog-list, .form-section, .more-details, .member-form, .catalog-form, .toast, .inventory-metrics article, .batch-panel, .stocktake, .inbound-form) {
  box-shadow: 0 12px 30px #4e275717, 0 2px 7px #4e27570d;
  background: #fffdfdf0 !important;
  border-color: #68427029 !important;
}

:root[data-theme="creator"] :where(.member-hero, .catalog-hero, .inventory-top) {
  color: #fff;
  background: radial-gradient(circle at 88% 12%, #e274f059, #0000 34%), linear-gradient(125deg, #5d1d75 0%, #7d2797 53%, #3f195c 100%);
  border-color: #ffffff29;
  box-shadow: 0 16px 38px #5c1f6d38;
}

:root[data-theme="creator"] :where(.primary, .pos-confirm, .checkout-submit, .confirm-recharge, .save-member) {
  box-shadow: 0 9px 22px #9634b73d;
  color: #fff !important;
  background: linear-gradient(135deg, #7d269e, #b73bd0) !important;
  border-color: #0000 !important;
}

:root[data-theme="creator"] :where(.recharge-summary, .pass-summary) {
  box-shadow: 0 16px 36px #4c145b3d;
  background: radial-gradient(circle at 82% 18%, #df69ee57, #0000 36%), linear-gradient(140deg, #57206e, #87299d) !important;
}

:root[data-theme="creator"] .cashier-modebar > button.active {
  color: #6e2188;
  background: linear-gradient(135deg, #f4e6f7, #fbf8fc);
  border-color: #9634b74d;
  box-shadow: 0 8px 20px #5b266817;
}

:root[data-theme="creator"] .theme-switcher {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #fffdfde0;
}

:root[data-theme="creator"] .theme-options > button.selected, :root[data-theme="creator"] .font-size-options > button.selected {
  color: #7e259a;
  background: #f0dbf5;
}

:root[data-theme="platform"] .shell > aside {
  color: #b7c9da;
  background: radial-gradient(circle at 100% 13%, #56a5d833, #0000 34%), linear-gradient(#102a47 0%, #0d223a 58%, #091a2d 100%);
  border-right-color: #203e5b;
  box-shadow: inset -1px 0 #ffffff09;
}

:root[data-theme="platform"] .brand {
  color: #f5faff;
}

:root[data-theme="platform"] .brand b {
  color: #bfeaff;
  background: #75d4ff1a;
  border-color: #75d4ff33;
}

:root[data-theme="platform"] nav button {
  color: #b7c9da;
}

:root[data-theme="platform"] nav button:hover {
  color: #fff;
  background: #75d4ff17;
}

:root[data-theme="platform"] nav button.active {
  color: #09233b;
  background: #75d4ff;
  box-shadow: inset 0 0 0 1px #ffffff4d, 0 8px 20px #05142233;
}

:root[data-theme="platform"] .workspace {
  background: radial-gradient(circle at 65% 0, #488bc414, #0000 27%), linear-gradient(#f6f9fc 0%, #eef3f8 100%);
}

:root[data-theme="platform"] :where(.stats article, .panel, .member-summary article, .table-panel, .recharge-step, .recharge-success, .pos-products, .pos-checkout, .pos-success, .catalog-pane, .settlement-pane, .quick-cashier > section, .quick-cashier > aside, .pass-purchase > section, .pass-purchase > aside, .catalog-stats article, .catalog-list, .form-section, .more-details, .member-form, .catalog-form, .toast, .inventory-metrics article, .batch-panel, .stocktake, .inbound-form) {
  box-shadow: 0 10px 28px #14365413, 0 2px 7px #1436540a;
  background: #fffffff5 !important;
  border-color: #d8e2eb !important;
}

:root[data-theme="platform"] :where(.primary, .pos-confirm, .checkout-submit, .confirm-recharge, .save-member) {
  box-shadow: 0 8px 20px #1f5f9f33;
  color: #fff !important;
  background: linear-gradient(135deg, #174d84, #2673b7) !important;
  border-color: #0000 !important;
}

:root[data-theme="platform"] :where(.recharge-summary, .pass-summary) {
  box-shadow: 0 14px 34px #123f6c38;
  background: radial-gradient(circle at 82% 18%, #75d4ff47, #0000 36%), linear-gradient(140deg, #123f6c, #1f659f) !important;
}

:root[data-theme="platform"] .cashier-modebar > button.active {
  color: #174d84;
  background: linear-gradient(135deg, #e5f0f9, #f8fbfd);
  border-color: #1f5f9f47;
  box-shadow: 0 7px 18px #1f5f9f14;
}

:root[data-theme="platform"] .theme-options > button.selected, :root[data-theme="platform"] .font-size-options > button.selected {
  color: #174d84;
  background: #e2eef8;
}

@media (max-width: 650px) {
  :root[data-theme="creator"] .shell > aside {
    background: #25102f;
  }

  :root[data-theme="platform"] .shell > aside {
    background: #0d223a;
  }
}

.auth-appearance {
  z-index: 100;
  position: fixed;
  top: 20px;
  right: 20px;
}

.auth-appearance .theme-switcher {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #ffffffe6;
  box-shadow: 0 10px 32px #23122a24;
}

@media (max-width: 650px) {
  .auth-appearance {
    top: 10px;
    left: 10px;
    right: 10px;
  }

  .auth-appearance .theme-switcher {
    width: 100%;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.shell {
  grid-template-columns: 236px minmax(0, 1fr);
}

.shell > aside {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-accent-soft) 24%, transparent), transparent 180px),
    var(--ui-sidebar);
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--ui-accent) 24%, transparent) transparent;
  scrollbar-width: thin;
  height: 100vh;
  padding: 18px 14px 24px;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.workspace {
  max-width: 1680px;
  margin-inline: auto;
  padding: 18px 26px 32px;
}

.workspace.cashier-workspace {
  max-width: none;
}

.brand {
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 74%, transparent);
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  margin: 0 4px 18px;
  padding: 0 4px 15px;
  display: grid;
}

.merchant-brand-mark {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 34%, transparent);
  width: 40px;
  height: 40px;
  color: var(--ui-on-accent);
  background: linear-gradient(145deg, var(--ui-accent-hover), var(--ui-accent));
  box-shadow: 0 8px 22px rgba(var(--ui-accent-rgb), .2);
  border-radius: 13px;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  display: grid;
}

.merchant-brand-mark img {
  border-radius: inherit;
  object-fit: contain;
  background: #fff;
  width: 100%;
  height: 100%;
}

.merchant-brand-copy {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.merchant-brand-copy strong {
  color: var(--ui-text);
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 780;
  overflow: hidden;
}

.merchant-brand-copy small {
  color: var(--ui-subtle);
  letter-spacing: .11em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 700;
  overflow: hidden;
}

.brand > b {
  letter-spacing: .04em;
  margin: 0;
  padding: 3px 5px;
  font-size: 8px;
}

.shell > aside nav {
  gap: 5px;
  display: grid;
}

.merchant-nav-group {
  gap: 3px;
  display: grid;
}

.merchant-nav-group-toggle, .merchant-nav-item {
  text-align: left;
  border: 0;
  width: 100%;
}

.merchant-nav-group-toggle {
  min-height: 50px;
  color: var(--ui-muted);
  background: none;
  border-radius: 12px;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  display: grid;
}

.merchant-nav-group-toggle:hover {
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-panel-soft) 76%, transparent);
}

.merchant-nav-group.active-group .merchant-nav-group-toggle {
  color: var(--ui-text);
}

.merchant-nav-group-icon {
  border: 1px solid color-mix(in srgb, var(--ui-border) 76%, transparent);
  background: color-mix(in srgb, var(--ui-panel) 74%, transparent);
  border-radius: 11px;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.merchant-nav-group.active-group .merchant-nav-group-icon {
  border-color: color-mix(in srgb, var(--ui-accent) 34%, transparent);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.merchant-nav-group-icon svg, .merchant-nav-item-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
}

.merchant-nav-group-copy {
  gap: 1px;
  min-width: 0;
  display: grid;
}

.merchant-nav-group-copy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 720;
  overflow: hidden;
}

.merchant-nav-group-copy small {
  color: var(--ui-subtle);
  font-size: 10px;
  line-height: 1.3;
}

.merchant-nav-chevron {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7px;
  width: 16px;
  height: 16px;
  transition: transform var(--motion-normal);
}

.merchant-nav-group-toggle[aria-expanded="true"] .merchant-nav-chevron {
  transform: rotate(180deg);
}

.merchant-nav-items {
  border-left: 1px solid color-mix(in srgb, var(--ui-border-strong) 68%, transparent);
  gap: 2px;
  margin: 1px 0 6px 25px;
  padding-left: 13px;
  display: grid;
}

.merchant-nav-items[hidden] {
  display: none;
}

.merchant-nav-item {
  min-height: 38px;
  color: var(--ui-muted);
  background: none;
  border-radius: 7px;
  grid-template-columns: 26px minmax(0, 1fr) 3px;
  align-items: center;
  gap: 8px;
  padding: 4px 7px;
  font-size: 13px;
  font-weight: 590;
  display: grid;
  position: relative;
}

.merchant-nav-item:hover {
  color: var(--ui-text);
  background: var(--ui-panel-soft);
}

.shell > aside .merchant-nav-item.active {
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent-soft) 82%, transparent);
  font-weight: 720;
}

.merchant-nav-item-icon {
  width: 26px;
  height: 26px;
  color: var(--ui-subtle);
  place-items: center;
  display: grid;
}

.merchant-nav-item.active .merchant-nav-item-icon {
  color: var(--ui-accent);
}

.merchant-nav-item-icon svg {
  width: 16px;
  height: 16px;
}

.merchant-nav-item-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.merchant-nav-active-rail {
  background: var(--ui-accent);
  width: 3px;
  height: 0;
  box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), .42);
  transition: height var(--motion-normal);
  border-radius: 999px;
}

.merchant-nav-item.active .merchant-nav-active-rail {
  height: 20px;
}

@media (max-width: 1050px) {
  .shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .shell > aside {
    padding-inline: 11px;
  }

  .workspace {
    padding-inline: 20px;
  }
}

@media (max-width: 760px) {
  .shell {
    grid-template-columns: 88px minmax(0, 1fr);
    padding-bottom: 0;
    display: grid;
  }

  .shell > aside {
    border-top: 0;
    border-right: 1px solid var(--ui-border);
    height: 100vh;
    padding-inline: 10px;
    position: sticky;
    inset: 0 auto auto;
  }

  .workspace {
    padding-inline: 14px;
  }

  .brand {
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
    display: flex;
  }

  .merchant-brand-copy, .brand > b, .merchant-nav-group-copy, .merchant-nav-chevron, .merchant-nav-item-label, .merchant-nav-active-rail {
    display: none;
  }

  .merchant-nav-group-toggle, .merchant-nav-item {
    flex: initial;
    justify-content: center;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    display: flex;
  }

  .merchant-nav-items {
    border-left: 0;
    margin: 0 0 4px;
    padding: 0;
  }

  .shell > aside nav {
    scroll-snap-type: none;
    height: auto;
    display: grid;
    overflow: visible;
  }

  .shell > aside nav button:before {
    content: none;
  }

  .merchant-nav-item-icon {
    width: 34px;
    height: 34px;
  }
}

:root :where(.member-hero, .catalog-hero, .benefit-toolbar, .org-hero) {
  color: var(--ui-on-accent);
  background: linear-gradient(120deg, var(--ui-accent-hover), var(--ui-accent));
  border-color: rgba(var(--ui-accent-rgb), .3);
}

:root :where(.member-hero, .catalog-hero, .benefit-toolbar, .org-hero) :where(p, small) {
  color: color-mix(in srgb, var(--ui-on-accent) 74%, transparent);
}

:root :where(.member-hero, .catalog-hero, .benefit-toolbar, .org-hero) :where(.eyebrow, span) {
  color: color-mix(in srgb, var(--ui-on-accent) 82%, var(--ui-accent));
}

.catalog-hero {
  margin-bottom: 16px;
}

.benefit-toolbar > div:last-child > button {
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  border-color: color-mix(in srgb, var(--ui-on-accent) 38%, transparent);
}

.benefit-toolbar > div:last-child > button.primary {
  color: var(--ui-on-accent) !important;
  background: color-mix(in srgb, var(--ui-accent-hover) 74%, black) !important;
  border-color: #0000 !important;
}

:root :where(.member-hero, .catalog-hero, .benefit-toolbar, .org-hero) {
  box-sizing: border-box;
  align-items: center;
  height: 154px;
  min-height: 154px;
  padding: 24px 26px;
  background: radial-gradient(circle at 88% 12%,
      rgba(var(--ui-accent-rgb), .3),
      transparent 34%),
    linear-gradient(115deg, var(--ui-accent-hover), var(--ui-accent)) !important;
}

:root .member-hero {
  color: var(--ui-on-accent) !important;
  background: radial-gradient(circle at 88% 12%,
      rgba(var(--ui-accent-rgb), .3),
      transparent 34%),
    linear-gradient(115deg, var(--ui-accent-hover), var(--ui-accent)) !important;
  border-color: rgba(var(--ui-accent-rgb), .3) !important;
}

:root :where(.member-hero, .catalog-hero, .benefit-toolbar, .org-hero) :where(h1, h2) {
  line-height: 1.3;
  margin: 8px 0 6px !important;
  font-size: 20px !important;
}

:root :where(.member-hero, .catalog-hero, .benefit-toolbar, .org-hero) :where(.eyebrow, div:first-child > span) {
  letter-spacing: 1.6px;
  font-weight: 800;
  line-height: 1.3;
  font-size: 12px !important;
}

:root :where(.member-hero, .catalog-hero, .benefit-toolbar, .org-hero) p {
  line-height: 1.6;
  margin: 0 !important;
  font-size: 11px !important;
}

:root .member-hero .eyebrow, :root .member-hero p {
  color: color-mix(in srgb, var(--ui-on-accent) 78%, transparent) !important;
}

@media (max-width: 760px) {
  :root :where(.member-hero, .catalog-hero, .benefit-toolbar, .org-hero) {
    height: auto;
    min-height: 154px;
  }
}

:root input[type="checkbox"]:is([name$="Enabled"], [name^="allow"], [name="active"], [name="isDefault"], [name="autoConfirm"], [name="namedStaff"], [name="stackable"], [name="activate"]) {
  cursor: pointer;
  vertical-align: middle;
  box-shadow: inset 0 1px 2px #141e190f;
  appearance: none !important;
  border: 1px solid var(--ui-border-strong) !important;
  background: var(--ui-panel-soft) !important;
  border-radius: 999px !important;
  flex: 0 0 37px !important;
  width: 37px !important;
  min-width: 37px !important;
  height: 21px !important;
  min-height: 21px !important;
  margin: 0 !important;
  padding: 1px !important;
  transition: background-color .3s ease-out, border-color .3s ease-out, box-shadow .3s ease-out !important;
  display: inline-block !important;
  position: relative !important;
}

:root input[type="checkbox"]:is([name$="Enabled"], [name^="allow"], [name="active"], [name="isDefault"], [name="autoConfirm"], [name="namedStaff"], [name="stackable"], [name="activate"]):before {
  content: "";
  background: var(--ui-panel-solid);
  border-radius: 50%;
  width: 17px;
  height: 17px;
  transition: transform .3s cubic-bezier(.2, 0, 0, 1), background-color .3s ease-out;
  display: block;
  transform: translateX(0);
  box-shadow: 0 1px 4px #141e1938, 0 0 0 1px #141e190d;
}

:root input[type="checkbox"]:is([name$="Enabled"], [name^="allow"], [name="active"], [name="isDefault"], [name="autoConfirm"], [name="namedStaff"], [name="stackable"], [name="activate"]):checked {
  box-shadow: 0 4px 12px rgba(var(--ui-accent-rgb), .22);
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent) !important;
}

:root input[type="checkbox"]:is([name$="Enabled"], [name^="allow"], [name="active"], [name="isDefault"], [name="autoConfirm"], [name="namedStaff"], [name="stackable"], [name="activate"]):checked:before {
  transform: translateX(16px);
}

:root input[type="checkbox"]:is([name$="Enabled"], [name^="allow"], [name="active"], [name="isDefault"], [name="autoConfirm"], [name="namedStaff"], [name="stackable"], [name="activate"]):focus-visible {
  outline: 3px solid rgba(var(--ui-accent-rgb), .2);
  outline-offset: 2px;
}

:root input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .48;
}

:root button.ui-state-switch {
  color: #0000;
  font-size: 0;
  transition: background-color .3s ease-out, border-color .3s ease-out, box-shadow .3s ease-out;
  position: relative;
  overflow: hidden;
  box-sizing: border-box !important;
  border: 1px solid var(--ui-border-strong) !important;
  background: var(--ui-panel-soft) !important;
  border-radius: 999px !important;
  flex: 0 0 52px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 3px !important;
  display: block !important;
}

:root button.ui-state-switch:before {
  content: "";
  background: var(--ui-panel-solid);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  transition: transform .3s cubic-bezier(.2, 0, 0, 1);
  display: block;
  transform: translateX(0);
  box-shadow: 0 1px 4px #141e1938, 0 0 0 1px #141e190d;
}

:root button.ui-state-switch[aria-checked="true"] {
  box-shadow: 0 4px 12px rgba(var(--ui-accent-rgb), .22);
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent) !important;
}

:root button.ui-state-switch[aria-checked="true"]:before {
  transform: translateX(16px);
}

@media (prefers-reduced-motion: reduce) {
  :root input[type="checkbox"], :root input[type="checkbox"]:before, :root button.ui-state-switch, :root button.ui-state-switch:before {
    transition: none !important;
  }
}

:root :where(.section-heading > div, .section-title > div, .step-heading > div, .catalog-list-head > div:first-child, .pos-title > div:first-child, .pass-heading, .report-card > header > div) {
  min-width: 0;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 2px 10px !important;
  display: flex !important;
}

:root :where(.section-heading > div, .section-title > div, .step-heading > div, .catalog-list-head > div:first-child, .pos-title > div:first-child, .pass-heading, .report-card > header > div) :where(h1, h2, h3, h4, p, span, small) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

:root .section-heading {
  min-height: 26px;
}

:root .section-title {
  margin-bottom: 11px;
}

:root .step-heading {
  margin-bottom: 12px;
}

:root .catalog-list-head {
  padding-block: 13px;
}

:root .report-card > header {
  align-items: baseline;
}

:root .business-hero {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 154px !important;
  min-height: 154px !important;
  color: var(--ui-on-accent) !important;
  border: 1px solid rgba(var(--ui-accent-rgb), .22) !important;
  background: linear-gradient(115deg,
    var(--ui-accent-hover) 0%,
    var(--ui-accent) 100%) !important;
  box-shadow: 0 10px 28px rgba(var(--ui-accent-rgb), .14) !important;
  border-radius: 16px !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 25px !important;
  margin: 0 0 16px !important;
  padding: 24px 26px !important;
  display: flex !important;
  overflow: hidden !important;
}

:root .business-hero > div:first-child {
  min-width: 0;
}

:root .business-hero > div:first-child > span, :root .business-hero .eyebrow {
  display: block;
  color: color-mix(in srgb,
    var(--ui-on-accent) 78%,
    var(--ui-accent)) !important;
  letter-spacing: 1.6px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

:root .business-hero :where(h1, h2) {
  color: var(--ui-on-accent) !important;
  letter-spacing: 0 !important;
  margin: 8px 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

:root .business-hero > div:first-child > p {
  max-width: 760px;
  color: color-mix(in srgb, var(--ui-on-accent) 74%, transparent) !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

:root:not([data-theme="ink"]) .business-hero {
  color: var(--ui-text) !important;
  border-color: color-mix(in srgb,
    var(--ui-accent) 16%,
    var(--ui-border)) !important;
  background: radial-gradient(circle at 88% 10%,
      rgba(var(--ui-accent-rgb), .09),
      transparent 36%),
    linear-gradient(105deg, var(--ui-panel-solid) 0%, var(--ui-hero) 100%) !important;
  box-shadow: 0 8px 24px rgba(var(--ui-accent-rgb), .08) !important;
  position: relative !important;
}

:root:not([data-theme="ink"]) .business-hero:before {
  content: "";
  background: linear-gradient(180deg,
    var(--ui-accent),
    color-mix(in srgb, var(--ui-accent) 35%, transparent));
  border-radius: 0 4px 4px 0;
  width: 4px;
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
}

:root:not([data-theme="ink"]) .business-hero > div:first-child > span, :root:not([data-theme="ink"]) .business-hero .eyebrow {
  color: var(--ui-accent) !important;
}

:root:not([data-theme="ink"]) .business-hero :where(h1, h2) {
  color: var(--ui-text) !important;
}

:root:not([data-theme="ink"]) .business-hero > div:first-child > p {
  color: var(--ui-muted) !important;
}

:root:not([data-theme="ink"]) .business-hero > div:not(:first-child) {
  color: var(--ui-text);
}

:root:not([data-theme="ink"]) .business-hero > div:not(:first-child) :where(small, p) {
  color: var(--ui-muted);
}

:root:not([data-theme="ink"]) .business-hero > button, :root:not([data-theme="ink"]) .business-hero [class*="heroActions"] button, :root:not([data-theme="ink"]) .business-hero [class*="tenant"] {
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  background: var(--ui-panel-solid) !important;
  box-shadow: 0 8px 20px rgba(var(--ui-accent-rgb), .1) !important;
}

:root:not([data-theme="ink"]) .business-hero > button :where(b, i), :root:not([data-theme="ink"]) .business-hero [class*="heroActions"] button > b, :root:not([data-theme="ink"]) .business-hero [class*="tenant"] > i {
  color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
}

:root:not([data-theme="ink"]) .business-hero :where([class*="heroActions"], [class*="tenant"]) small {
  color: var(--ui-muted) !important;
}

:root:not([data-theme="ink"]) .business-hero [class*="heroCards"] article {
  color: var(--ui-text) !important;
  border-color: color-mix(in srgb,
    var(--ui-accent) 18%,
    var(--ui-border)) !important;
  background: color-mix(in srgb,
    var(--ui-accent-soft) 72%,
    var(--ui-panel-solid)) !important;
}

:root:not([data-theme="ink"]) .business-hero [class*="heroCards"] :where(span, small) {
  color: var(--ui-muted) !important;
}

@media (max-width: 1000px) {
  :root .business-hero {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 154px !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  :root .business-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

:root .workspace:not(.cashier-workspace) {
  color: var(--ui-text);
}

:root .workspace:not(.cashier-workspace) :where(h1, h2, h3, h4) {
  color: var(--ui-text);
  text-wrap: balance;
}

:root .workspace:not(.cashier-workspace) h1 {
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.25;
}

:root .workspace:not(.cashier-workspace) h2 {
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.32;
}

:root .workspace:not(.cashier-workspace) h3 {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.38;
}

:root .workspace:not(.cashier-workspace) h4 {
  font-size: 15px;
  line-height: 1.4;
}

:root .workspace:not(.cashier-workspace) :where(p, label, dt, dd, td, th) {
  color: var(--ui-text);
  line-height: max(1.55, var(--ui-line-height));
  font-size: max(13px, var(--ui-font-sm)) !important;
}

:root .workspace:not(.cashier-workspace) :where(small, em, .eyebrow, .level, .tag, .status), :root .workspace:not(.cashier-workspace) :where(span:not([aria-hidden="true"]), figcaption) {
  line-height: 1.5;
  font-size: max(12px, var(--ui-font-xs)) !important;
}

:root .workspace:not(.cashier-workspace) :where(small, p[class*="note"], p[class*="description"]) {
  color: var(--ui-muted) !important;
}

:root .workspace:not(.cashier-workspace) :where(button, input, select, textarea) {
  min-height: 38px;
  color: var(--ui-text);
  border-color: var(--ui-border);
  line-height: 1.4;
  font-size: max(13px, var(--ui-font-sm)) !important;
}

:root .workspace:not(.cashier-workspace) :where(input, select, textarea) {
  background: var(--ui-panel-solid);
}

:root .workspace:not(.cashier-workspace) :where(input[type="checkbox"], input[type="radio"]) {
  min-width: 18px;
  min-height: 18px;
  accent-color: var(--ui-accent);
}

:root .workspace:not(.cashier-workspace) textarea {
  min-height: 76px;
}

:root .workspace:not(.cashier-workspace) :where(input, textarea)::placeholder {
  color: var(--ui-subtle);
  opacity: 1;
}

:root .workspace:not(.cashier-workspace) button:not(:disabled):hover {
  border-color: var(--ui-border-strong);
}

:root .workspace:not(.cashier-workspace) :where(button, input, select, textarea, summary):focus-visible {
  outline-offset: 2px;
  outline: 3px solid rgba(var(--ui-accent-rgb), .24) !important;
}

:root .workspace:not(.cashier-workspace) :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .56;
}

:root .workspace:not(.cashier-workspace) :where(a, [role="link"]) {
  color: var(--ui-accent);
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}

:root .workspace:not(.cashier-workspace) :where(a, [role="link"]):hover {
  color: var(--ui-accent-hover);
}

:root .workspace:not(.cashier-workspace) :where(dialog, [role="dialog"]) {
  color: var(--ui-text);
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  box-shadow: var(--ui-shadow-overlay);
}

:root .workspace:not(.cashier-workspace) :where(code, pre, kbd) {
  color: var(--ui-text);
  border-color: var(--ui-border);
  background: var(--ui-panel-soft);
}

:root .workspace:not(.cashier-workspace) :where(mark) {
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-warning) 24%, var(--ui-panel-solid));
}

:root .workspace:not(.cashier-workspace) :where(progress) {
  accent-color: var(--ui-accent);
}

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

:root .ui-readable :where(p, span, small, button, input, select, option, label, em, dt, dd, td, th, figcaption), :root :is(.ops-shell, .ops-login) :where(p, span, small, button, input, select, textarea, label, em, li, dt, dd, td, th, figcaption) {
  line-height: 1.5;
  font-size: 12px !important;
}

:root .workspace:not(.cashier-workspace) :where(table, [role="table"]) {
  color: var(--ui-text);
  border-color: var(--ui-border);
}

:root .workspace:not(.cashier-workspace) :where(th, [role="columnheader"]) {
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  font-weight: 700;
}

:root .workspace:not(.cashier-workspace) :where(td, th) {
  border-color: var(--ui-border);
  min-height: 44px;
  padding-block: 11px;
}

:root .workspace:not(.cashier-workspace) :where(.notice, [role="status"], [role="alert"]) {
  border-color: color-mix(in srgb, var(--ui-accent) 24%, var(--ui-border));
}

:root .workspace:not(.cashier-workspace) :where(hr) {
  border-color: var(--ui-border);
}

:root .workspace:not(.cashier-workspace) ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

:root .workspace:not(.cashier-workspace) ::-webkit-scrollbar-track {
  background: var(--ui-panel-soft);
}

:root .workspace:not(.cashier-workspace) ::-webkit-scrollbar-thumb {
  border: 2px solid var(--ui-panel-soft);
  background: var(--ui-border-strong);
  border-radius: 999px;
}

@media (prefers-contrast: more) {
  :root .workspace:not(.cashier-workspace) :where(button, input, select, textarea) {
    border-width: 2px;
    border-color: var(--ui-text);
  }

  :root .workspace:not(.cashier-workspace) :where(small, em, p) {
    color: var(--ui-text) !important;
  }
}

@media (max-width: 760px) {
  :root .workspace:not(.cashier-workspace) :where(button, input, select) {
    min-height: 44px;
  }
}

:where(input, select, textarea):required {
  border-color: color-mix(in srgb, var(--accent, #2f9f7f) 46%, var(--line, #d8e1de));
  background: color-mix(in srgb, var(--accent, #2f9f7f) 4%, var(--surface, #fff));
}

:where(label.required-field, label.required, .required-field) > :where(span, .field-label):after {
  content: " *";
  color: #e1251b;
  font-weight: 900;
}

:where(label, .field-label) em {
  color: #e1251b;
  font-style: normal;
  font-weight: 900;
}

/* [project]/apps/admin/app/reports/reports.css [app-client] (css) */
.report-page {
  --green: #247654;
  --line: #e4e9e6;
  padding-bottom: 40px;
}

.report-demo-notice {
  border: 1px solid color-mix(in srgb, var(--ui-warning) 35%, var(--ui-border));
  color: color-mix(in srgb, var(--ui-warning) 55%, var(--ui-text));
  background: color-mix(in srgb, var(--ui-warning) 10%, var(--ui-panel-solid));
  font-size: var(--ui-font-sm);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  display: flex;
}

.report-export-notice {
  border: 1px solid var(--ui-border);
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 9px;
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 11px;
}

.report-custom-range {
  align-items: center;
  gap: 6px;
  display: flex;
}

.report-custom-range input, .report-list-tools select {
  border: 1px solid var(--ui-border);
  min-height: 34px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 8px;
  padding: 0 8px;
}

.report-list-tools, .report-pagination {
  color: var(--ui-muted);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 11px;
  display: flex;
}

.report-list-tools label {
  align-items: center;
  gap: 7px;
  display: flex;
}

.performance-staff-panel {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 12px;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  display: grid;
}

.performance-staff-panel > header, .performance-staff-controls, .performance-selection-summary {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: flex;
}

.performance-staff-panel h3, .performance-staff-panel p {
  margin: 0;
}

.performance-staff-panel h3 {
  font-size: 15px;
}

.performance-staff-panel p, .performance-staff-panel small {
  color: var(--ui-muted);
  font-size: 12px;
}

.performance-staff-panel > header strong {
  color: var(--ui-accent);
}

.performance-staff-controls label {
  color: var(--ui-muted);
  flex: 1;
  gap: 6px;
  font-size: 12px;
  display: grid;
}

.performance-staff-controls input, .performance-staff-controls select {
  border: 1px solid var(--ui-border);
  width: 100%;
  min-height: 42px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-radius: 9px;
  padding: 0 11px;
}

.performance-selection-summary span {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  flex: 1;
  gap: 5px;
  padding: 12px;
  display: grid;
}

.performance-selection-summary b {
  font-size: 17px;
}

.performance-staff-directory {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.performance-staff-directory button {
  border: 1px solid var(--ui-border);
  min-height: 58px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  text-align: left;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.performance-staff-directory button:hover, .performance-staff-directory button:focus-visible {
  border-color: var(--ui-accent);
  outline: 2px solid var(--ui-accent-soft);
}

.performance-staff-directory button span {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.performance-staff-directory button span:last-child {
  text-align: right;
  flex: none;
}

.performance-staff-directory p {
  text-align: center;
  grid-column: 1 / -1;
  padding: 14px;
}

.report-pagination {
  justify-content: flex-end;
}

.report-pagination button {
  min-height: 34px;
}

.report-demo-notice b {
  flex: none;
}

.report-page button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.report-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: -10px 0 16px;
  display: flex;
}

.report-toolbar > span {
  color: #77827c;
  font-size: 10px;
}

.report-toolbar > span i {
  background: #35a776;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  display: inline-block;
  box-shadow: 0 0 0 4px #ddf2e8;
}

.report-tools {
  gap: 7px;
  display: flex;
}

.report-tools > button {
  font-size: 10px;
}

.range {
  background: #fff;
  border: 1px solid #dce2df;
  border-radius: 8px;
  padding: 2px;
  display: flex;
}

.range button {
  color: #7c8580;
  border: 0;
  padding: 6px 9px;
}

.report-tools .report-ai-btn {
  color: #fff;
  background: #183d31;
  border: 0;
  font-weight: 700;
}

.report-tools {
  align-items: center;
  gap: 10px;
}

.report-tools > button, .range button {
  min-height: 42px;
  padding: 9px 14px;
  font-weight: 650;
  font-size: 13px !important;
}

.range {
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  padding: 3px;
}

.range button {
  color: var(--ui-muted);
  background: none;
}

.range button.on {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.report-tools .report-ai-btn {
  box-shadow: 0 8px 20px rgba(var(--ui-accent-rgb), .2);
  color: var(--ui-on-accent) !important;
  background: var(--ui-accent) !important;
}

.dimensions {
  background: #e9eeeb;
  border-radius: 11px;
  margin-bottom: 14px;
  padding: 4px;
  display: flex;
  overflow: auto;
}

.dimensions button {
  color: #66716b;
  background: none;
  border: 0;
  flex: 1;
  min-width: 110px;
}

.dimensions button span {
  margin-right: 7px;
}

.dimensions button.on {
  color: #216c4d;
  background: #fff;
  box-shadow: 0 2px 7px #183c2e12;
}

.report-kpis {
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin-bottom: 11px;
  display: grid;
}

.report-kpis article, .report-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
}

.report-kpis article {
  min-width: 0;
  padding: 15px;
}

.report-kpis article > span {
  color: #7d8681;
  justify-content: space-between;
  font-size: 10px;
  display: flex;
}

.report-kpis article > span i {
  font-style: normal;
}

.goal-edit {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border: 0;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 800;
}

.goal-mask {
  z-index: 80;
  background: #0a20187a;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.goal-dialog {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 16px;
  width: min(480px, 100%);
  padding: 20px;
  box-shadow: 0 26px 70px #09201747;
}

.goal-dialog header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  display: flex;
}

.goal-dialog header small {
  color: var(--ui-accent);
  font-weight: 800;
}

.goal-dialog h2 {
  margin: 4px 0 0;
}

.goal-dialog header button {
  background: none;
  border: 0;
  font-size: 24px;
}

.goal-dialog > label, .goal-date-grid label {
  color: var(--ui-muted);
  gap: 7px;
  margin: 12px 0;
  font-size: 12px;
  display: grid;
}

.goal-dialog input, .goal-dialog select {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-height: 42px;
  color: var(--ui-text);
  border-radius: 9px;
  padding: 0 11px;
}

.goal-date-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.goal-dialog p {
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.6;
}

.goal-dialog > em {
  color: var(--ui-danger);
  font-size: 11px;
  font-style: normal;
  display: block;
}

.goal-dialog footer {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  display: flex;
}

.goal-dialog footer button:last-child {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

.report-kpis article > strong {
  margin: 10px 0 3px;
  font-size: 21px;
  display: block;
}

.report-kpis svg {
  width: 100%;
  height: 27px;
}

.report-kpis footer {
  gap: 5px;
  font-size: 8px;
  display: flex;
}

.report-kpis footer em {
  color: #25815c;
  font-style: normal;
}

.report-kpis footer small {
  color: #929a96;
}

.progress {
  background: #edf1ef;
  border-radius: 4px;
  height: 5px;
  margin: 15px 0 12px;
  overflow: hidden;
}

.progress i {
  background: linear-gradient(90deg, #287b59, #67bd95);
  height: 100%;
  display: block;
}

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

.report-card {
  min-width: 0;
  padding: 17px;
}

.report-card > header {
  justify-content: space-between;
  display: flex;
}

.report-card > header h2 {
  margin: 0 0 5px;
  font-size: 13px;
}

.report-card > header p {
  color: #929a96;
  margin: 0;
  font-size: 9px;
}

.report-card > header button {
  color: #2d7658;
  background: none;
  border: 0;
  padding: 2px;
  font-size: 9px;
}

.legend {
  color: #7f8883;
  gap: 15px;
  margin: 17px 0;
  font-size: 8px;
  display: flex;
}

.legend span i {
  border-top: 2px solid #287c5b;
  width: 15px;
  margin-right: 5px;
  display: inline-block;
}

.legend span:nth-child(2) i {
  border-style: dashed;
  border-color: #c4ccc8;
}

.legend b {
  margin-left: auto;
  font-weight: 400;
}

.legend em {
  color: #25815c;
  font-style: normal;
}

.trend-chart {
  background: repeating-linear-gradient(#0000 0 37px, #edf0ee 38px);
  height: 190px;
  padding-left: 32px;
  position: relative;
}

.trend-chart svg {
  width: 100%;
  height: 160px;
}

.trend-chart footer {
  color: #949c98;
  justify-content: space-between;
  font-size: 8px;
  display: flex;
}

.y-axis {
  color: #949c98;
  flex-direction: column;
  justify-content: space-between;
  height: 153px;
  font-size: 8px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.category {
  align-items: center;
  gap: 18px;
  padding: 22px 3px 15px;
  display: flex;
}

.donut {
  background: conic-gradient(#237b59 0 38%,
    #56aa82 38% 65%,
    #dfb05a 65% 86%,
    #9ba9a3 86%);
  border-radius: 50%;
  place-items: center;
  width: 120px;
  height: 120px;
  display: grid;
}

.donut:before {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  position: absolute;
}

.donut span {
  z-index: 1;
  color: #8b9490;
  text-align: center;
  font-size: 8px;
}

.donut span b {
  color: #202a26;
  margin-bottom: 4px;
  font-size: 13px;
  display: block;
}

.category > div:last-child {
  flex: 1;
}

.category p {
  grid-template-columns: 8px 1fr auto;
  border: 0 !important;
  margin: 0 !important;
  padding: 5px !important;
  font-size: 9px !important;
  display: grid !important;
}

.category p i {
  background: #237b59;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.category p i.c1 {
  background: #56aa82;
}

.category p i.c2 {
  background: #dfb05a;
}

.category p i.c3 {
  background: #9ba9a3;
}

.insight {
  color: #287a5a;
  background: #f0f7f4;
  border-radius: 8px;
  padding: 10px;
  font-size: 10px;
}

.insight small {
  color: #77847d;
  margin: 5px 0 0 22px;
  font-size: 8px;
  display: block;
}

.store-card {
  grid-column: 1;
}

.store-row {
  text-align: left;
  border: 0;
  border-bottom: 1px solid #edf0ee;
  border-radius: 0;
  grid-template-columns: 1.5fr .75fr 1fr .55fr;
  align-items: center;
  width: 100%;
  padding: 11px 4px;
  font-size: 9px;
  display: grid;
}

.store-row.performance-row {
  grid-template-columns: .8fr 1.4fr .9fr .75fr .75fr;
}

.store-row.head {
  color: #929995;
  background: #fafbfa;
}

.store-row > span:first-child {
  align-items: center;
  gap: 9px;
  display: flex;
}

.store-row > span:first-child i {
  color: #9a7b44;
  font-style: normal;
}

.store-row strong {
  font-size: 10px;
}

.store-row .bar {
  background: #edf1ef;
  border-radius: 4px;
  height: 5px;
}

.store-row .bar i {
  background: #58ae86;
  border-radius: 4px;
  max-width: 100%;
  height: 100%;
  display: block;
}

.store-row > em {
  color: #25815c;
  font-style: normal;
}

.store-row > em.bad {
  color: #c45c51;
}

.alerts {
  margin-top: 10px;
}

.alerts > button {
  text-align: left;
  border: 0;
  border-bottom: 1px solid #edf0ee;
  border-radius: 0;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 2px;
  display: grid;
}

.alerts > button > i {
  border-radius: 7px;
  place-items: center;
  width: 27px;
  height: 27px;
  font-style: normal;
  display: grid;
}

.alerts i.red {
  color: #bc554b;
  background: #fae9e7;
}

.alerts i.amber {
  color: #b77a27;
  background: #fbf1df;
}

.alerts i.blue {
  color: #52758e;
  background: #e8f0f5;
}

.alerts b, .alerts small {
  display: block;
}

.alerts b {
  font-size: 9px;
}

.alerts small {
  color: #929a96;
  margin-top: 4px;
  font-size: 8px;
}

.alerts em {
  color: #39785e;
  font-size: 8px;
  font-style: normal;
}

.heat-card {
  grid-column: 1 / -1;
}

.heatmap {
  margin-top: 14px;
}

.heatmap > div {
  grid-template-columns: 32px repeat(12, 1fr);
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  display: grid;
}

.heatmap span {
  color: #8e9792;
  font-size: 8px;
}

.heatmap i {
  background: #177451;
  border-radius: 2px;
  height: 13px;
}

.match {
  border-top: 1px solid #edf0ee;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding-top: 11px;
  display: flex;
}

.match > b {
  color: #287b59;
  font-size: 21px;
}

.match span {
  font-size: 9px;
}

.match small {
  color: #909994;
  margin-top: 3px;
  display: block;
}

.match em {
  color: #aa6a25;
  background: #fff1dd;
  border-radius: 8px;
  margin-left: auto;
  padding: 5px 8px;
  font-size: 8px;
  font-style: normal;
}

.report-ai-mask {
  z-index: 50;
  background: #10221c55;
  position: fixed;
  inset: 0;
}

.report-ai-drawer {
  color: #202b27;
  background: #f6f8f7;
  width: min(460px, 100vw);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  box-shadow: -20px 0 60px #10231d30;
}

.report-ai-drawer > header {
  color: #fff;
  background: #183d31;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 21px;
  display: flex;
}

.report-ai-drawer > header div {
  color: #7bd8ae;
}

.report-ai-drawer > header b {
  color: #fff;
}

.report-ai-drawer > header small {
  color: #aac8bd;
  margin: 4px 0 0 28px;
  font-size: 8px;
  display: block;
}

.report-ai-drawer > header button {
  color: #fff;
  background: none;
  border: 0;
  font-size: 23px;
}

.report-ai-loading {
  text-align: center;
  padding: 150px 20px;
}

.report-ai-loading i {
  border: 3px solid #dceae4;
  border-top-color: #287b59;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: auto;
  animation: .8s linear infinite report-spin;
  display: block;
}

.report-ai-loading h3 {
  margin-top: 19px;
  font-size: 13px;
}

.report-ai-loading p {
  color: #89938e;
  font-size: 9px;
}

.report-ai-result {
  padding: 17px;
}

.report-ai-health {
  color: #fff;
  background: linear-gradient(130deg, #173c30, #30765b);
  border-radius: 12px;
  padding: 17px;
}

.report-ai-health span, .report-ai-health strong, .report-ai-health em {
  display: block;
}

.report-ai-health span {
  color: #b8d1c7;
  font-size: 9px;
}

.report-ai-health strong {
  margin: 7px 0;
  font-size: 34px;
}

.report-ai-health strong small {
  color: #b1ccbf;
  font-size: 11px;
}

.report-ai-health em {
  color: #86ddb6;
  font-size: 9px;
  font-style: normal;
}

.report-ai-result section {
  background: #fff;
  border: 1px solid #e4e9e6;
  border-radius: 11px;
  margin-top: 11px;
  padding: 15px;
}

.report-ai-result section h3 {
  margin: 0 0 9px;
  font-size: 11px;
}

.report-ai-result section > p {
  color: #65716b;
  margin: 0;
  font-size: 9px;
  line-height: 1.8;
}

.report-ai-action {
  border-bottom: 1px solid #edf0ee;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 9px 0;
  display: grid;
}

.report-ai-action > i {
  color: #287b59;
  background: #e5f2ec;
  border-radius: 50%;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 8px;
  font-style: normal;
  display: grid;
}

.report-ai-action b, .report-ai-action small {
  display: block;
}

.report-ai-action b {
  font-size: 10px;
}

.report-ai-action small {
  color: #7a857f;
  margin: 3px 0;
  font-size: 8px;
  line-height: 1.6;
}

.report-ai-action button {
  color: #287b59;
  border: 0;
  padding: 0;
  font-size: 8px;
}

.report-ai-result > footer {
  background: #f6f8f7;
  padding: 12px 0;
  display: flex;
  position: sticky;
  bottom: 0;
}

.report-ai-result > footer input {
  border: 1px solid #dce3df;
  border-radius: 8px 0 0 8px;
  flex: 1;
  padding: 10px;
  font-size: 9px;
}

.report-ai-result > footer button {
  color: #fff;
  background: #247654;
  border-color: #247654;
  border-radius: 0 8px 8px 0;
}

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

.report-page {
  --green: var(--ui-accent);
  --line: var(--ui-border);
  color: var(--ui-text);
}

.report-page :where(.report-kpis article, .report-card, .range, .dimensions button.on, .report-ai-result section) {
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
}

.report-page :where(.report-toolbar > span, .report-card > header p, .legend, .y-axis, .trend-chart footer, .store-row.head, .category p, .report-ai-result section > p) {
  color: var(--ui-muted);
}

.report-page :where(.dimensions, .progress, .store-row .bar) {
  background: var(--ui-panel-soft);
}

.report-page :where(.range button.on, .dimensions button.on, .insight, .report-ai-action > i) {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.report-page :where(.report-tools .report-ai-btn, .report-ai-drawer > header, .report-ai-health) {
  color: var(--ui-on-accent);
  background: var(--ui-accent);
}

.report-page :where(.report-kpis svg, .trend-chart svg) {
  color: var(--ui-chart-1);
}

.report-page .trend-chart {
  background: repeating-linear-gradient(to bottom,
    transparent 0,
    transparent 37px,
    var(--ui-grid-line) 38px);
}

.report-page .progress i {
  background: linear-gradient(90deg, var(--ui-chart-1), var(--ui-chart-2));
}

.report-page .donut {
  background: conic-gradient(var(--ui-chart-1) 0 38%,
    var(--ui-chart-2) 38% 65%,
    var(--ui-chart-3) 65% 86%,
    var(--ui-chart-4) 86%);
}

.report-page .donut:before {
  background: var(--ui-panel-solid);
}

.report-page .category p i {
  background: var(--ui-chart-1);
}

.report-page .category p i.c1 {
  background: var(--ui-chart-2);
}

.report-page .category p i.c2 {
  background: var(--ui-chart-3);
}

.report-page .category p i.c3 {
  background: var(--ui-chart-4);
}

.report-page :where(.report-kpis footer em, .store-row > em, .match > b, .legend em, .report-card > header button) {
  color: var(--ui-accent);
}

.report-page :where(.store-row, .alerts > button, .match, .report-ai-action) {
  border-color: var(--ui-border);
}

.report-page .heatmap i {
  background: var(--ui-chart-1);
}

.report-page .report-ai-mask {
  background: var(--ui-overlay);
}

.report-page .report-ai-drawer, .report-page .report-ai-result > footer {
  color: var(--ui-text);
  background: var(--ui-bg);
}

.report-card > header > div {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
  display: flex;
}

.report-card > header > div :where(h2, p) {
  margin: 0;
}

.report-card > header {
  align-items: baseline;
}

@media (max-width: 1200px) {
  .report-kpis {
    grid-template-columns: repeat(3, 1fr);
  }

  .report-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .report-tools {
    flex-wrap: wrap;
  }
}

@media (max-width: 850px) {
  .report-grid {
    grid-template-columns: 1fr;
  }

  .store-card, .heat-card {
    grid-column: auto;
  }

  .report-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .performance-staff-directory {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .report-kpis {
    grid-template-columns: 1fr;
  }

  .report-tools > button:nth-of-type(2) {
    display: none;
  }

  .performance-staff-controls, .performance-selection-summary {
    flex-direction: column;
    align-items: stretch;
  }
}

.report-page :where(.legend b, .insight b, .store-row strong, .alerts b) {
  line-height: 1.5;
  font-size: 12px !important;
}

.report-v2 {
  --report-bg: #f5f7fb;
  --report-panel: #ffffffeb;
  --report-line: #0f172a17;
  --report-text: #111827;
  --report-muted: #687386;
  --report-blue: #4f7cff;
  --report-cyan: #22a6b8;
  --report-purple: #8067e8;
  --report-green: #26a06f;
  --report-red: #d95057;
  --report-orange: #d99035;
  min-width: 0;
  color: var(--report-text);
  background: radial-gradient(circle at 12% -10%, #4f7cff17, transparent 34%),
    radial-gradient(circle at 88% 10%, #8067e812, transparent 28%),
    var(--report-bg);
  border-radius: 24px;
  padding: 26px clamp(18px, 2.4vw, 36px) 52px;
}

.report-v2 button, .report-v2 input, .report-v2 select {
  font: inherit;
}

.report-command-bar, .report-filter-row, .report-data-stamp, .report-primary-kpi header, .report-metric-card header, .report-metric-card footer, .report-panel-header, .composition-list > div > span, .report-ranking-list button, .report-top-list button, .report-alert-list button, .report-list-tools, .performance-staff-controls {
  align-items: center;
  display: flex;
}

.report-command-bar {
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
}

.report-command-bar h1 {
  letter-spacing: -1.4px;
  margin: 7px 0 5px;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.15;
}

.report-command-bar p {
  color: var(--report-muted);
  margin: 0;
  font-size: 13px;
}

.report-eyebrow {
  color: var(--report-blue);
  letter-spacing: 1.6px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.report-eyebrow i {
  background: currentColor;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 5px #4f7cff1a;
}

.report-data-stamp {
  border: 1px solid var(--report-line);
  background: #ffffffb3;
  border-radius: 14px;
  flex: none;
  gap: 10px;
  padding: 10px 14px;
  box-shadow: inset 0 1px #ffffffe6;
}

.report-data-stamp div {
  gap: 2px;
  display: grid;
}

.report-data-stamp b {
  font-size: 12px;
}

.report-data-stamp small {
  color: var(--report-muted);
  font-size: 10px;
}

.status-dot {
  background: var(--report-green);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 5px #26a06f1a;
}

.status-dot.partial {
  background: var(--report-orange);
  box-shadow: 0 0 0 5px #d990351f;
}

.status-dot.no_data {
  background: #8791a2;
  box-shadow: 0 0 0 5px #8791a21f;
}

.report-filter-shell {
  border: 1px solid var(--report-line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #ffffffb8;
  border-radius: 18px;
  gap: 11px;
  margin-bottom: 18px;
  padding: 14px;
  display: grid;
  box-shadow: 0 8px 32px #1e2a4a09, inset 0 1px #fff;
}

.report-filter-row {
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}

.report-filter-row > span {
  width: 38px;
  color: var(--report-muted);
  font-size: 11px;
  font-weight: 700;
}

.report-segmented {
  background: #edf0f5;
  border-radius: 11px;
  gap: 3px;
  padding: 3px;
  display: inline-flex;
}

.report-segmented button, .store-chip, .report-detail-tabs button {
  min-height: 34px;
  color: var(--report-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  transition: all .18s;
}

.report-segmented button:hover, .store-chip:hover, .report-detail-tabs button:hover {
  color: var(--report-text);
  background: #ffffffbf;
}

.report-segmented button.on {
  color: var(--report-text);
  background: #fff;
  box-shadow: 0 2px 8px #19223717;
}

.report-custom-range {
  margin-left: auto;
}

.report-custom-range input {
  border-color: var(--report-line);
  background: #fff;
  min-height: 34px;
}

.store-chip {
  border: 1px solid var(--report-line);
  background: #ffffffa6;
  border-radius: 16px;
  min-height: 32px;
}

.store-chip.on {
  color: #fff;
  border-color: var(--report-blue);
  background: var(--report-blue);
  box-shadow: 0 5px 14px #4f7cff2e;
}

.report-store-filter > strong {
  color: var(--report-muted);
  margin-left: auto;
  font-size: 11px;
}

.report-error {
  background: #d9505712;
  border: 1px solid #d950573b;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 14px 16px;
  display: flex;
}

.report-error div {
  gap: 3px;
  display: grid;
}

.report-error b {
  font-size: 13px;
}

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

.report-error button {
  color: #fff;
  background: var(--report-red);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  min-height: 34px;
  padding: 0 14px;
}

.report-skeleton-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  display: grid;
}

.report-skeleton-grid i {
  background: linear-gradient(90deg, #eef1f5, #fafbfc, #eef1f5) 0 0 / 200% 100%;
  border-radius: 18px;
  height: 150px;
  animation: 1.3s infinite report-shimmer;
}

@keyframes report-shimmer {
  to {
    background-position: -200% 0;
  }
}

.report-hero-grid {
  grid-template-columns: minmax(280px, 1.03fr) minmax(0, 2fr);
  gap: 14px;
  display: grid;
}

.report-primary-kpi, .report-metric-card, .report-v2 .report-panel, .report-definitions {
  border: 1px solid var(--report-line);
  background: var(--report-panel);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 34px #1e2a4a0e, inset 0 1px #ffffffe6;
}

.report-primary-kpi {
  color: #f7f9ff;
  cursor: pointer;
  background: linear-gradient(145deg, #17223d 0%, #1f315c 58%, #3458a4 140%);
  min-height: 246px;
  padding: 24px;
}

.report-primary-kpi:after {
  content: "";
  border: 1px solid #ffffff21;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  position: absolute;
  bottom: -60px;
  right: -42px;
  box-shadow: 0 0 0 26px #ffffff06, 0 0 0 55px #ffffff05;
}

.report-primary-kpi header {
  justify-content: space-between;
}

.report-primary-kpi header > span {
  color: #ffffffb8;
  font-size: 12px;
  font-weight: 700;
}

.report-primary-kpi > strong {
  letter-spacing: -1.7px;
  margin-top: 26px;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  display: block;
}

.report-primary-kpi > p {
  color: #ffffffa8;
  margin: 12px 0 0;
  font-size: 11px;
}

.report-primary-kpi > small {
  color: #ffffff8c;
  font-size: 10px;
  position: absolute;
  bottom: 22px;
  left: 24px;
}

.mini-bars {
  align-items: end;
  gap: 6px;
  width: 58px;
  height: 62px;
  display: flex;
  position: absolute;
  bottom: 22px;
  right: 27px;
}

.mini-bars i {
  background: #ffffffbf;
  border-radius: 5px;
  flex: 1;
  min-height: 8px;
}

.mini-bars i + i {
  background: #ffffff3b;
}

.report-core-kpis, .report-secondary-kpis, .report-asset-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

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

.report-secondary-kpis {
  margin-top: 14px;
}

.report-asset-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.report-metric-card {
  min-height: 116px;
  padding: 17px 18px;
}

.report-metric-card header {
  justify-content: space-between;
  gap: 8px;
}

.report-metric-card header > span {
  color: var(--report-muted);
  font-size: 11px;
  font-weight: 700;
}

.report-metric-card > strong {
  letter-spacing: -.7px;
  margin-top: 15px;
  font-size: clamp(20px, 1.7vw, 28px);
  display: block;
}

.report-metric-card footer {
  justify-content: space-between;
  gap: 8px;
  position: absolute;
  bottom: 14px;
  left: 18px;
  right: 18px;
}

.report-metric-card footer small {
  color: var(--report-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.report-metric-card footer button {
  color: var(--report-blue);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 800;
}

.metric-glow {
  opacity: .08;
  filter: blur(2px);
  background: currentColor;
  border-radius: 50%;
  width: 92px;
  height: 92px;
  position: absolute;
  top: -34px;
  right: -34px;
}

.tone-blue {
  color: var(--report-blue);
}

.tone-cyan {
  color: var(--report-cyan);
}

.tone-purple {
  color: var(--report-purple);
}

.tone-green {
  color: var(--report-green);
}

.tone-red {
  color: var(--report-red);
}

.tone-orange {
  color: var(--report-orange);
}

.tone-gray {
  color: #8791a2;
}

.report-metric-card > strong, .report-metric-card header > span, .report-metric-card footer {
  color: var(--report-text);
}

.compare {
  min-height: 22px;
  color: var(--report-green);
  background: #26a06f17;
  border-radius: 11px;
  align-items: center;
  padding: 0 7px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.compare.down {
  color: var(--report-red);
  background: #d9505717;
}

.compare.flat, .compare.no-base {
  color: var(--report-muted);
  background: #68738614;
}

.report-analytics-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
  gap: 14px;
  margin-top: 14px;
  display: grid;
}

.report-v2 .report-panel {
  padding: 20px;
}

.report-panel-header {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.report-panel-header div {
  gap: 3px;
  display: grid;
}

.report-panel-header span {
  color: var(--report-blue);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 800;
}

.report-panel-header h2 {
  letter-spacing: -.25px;
  margin: 0;
  font-size: 16px;
}

.report-panel-header p {
  max-width: 58%;
  color: var(--report-muted);
  text-align: right;
  margin: 0;
  font-size: 9px;
  line-height: 1.5;
}

.report-trend {
  height: 210px;
  padding-bottom: 22px;
  position: relative;
}

.report-trend:before {
  content: "";
  background: repeating-linear-gradient(#0000 0 calc(25% - 1px), #0f172a0e 25%);
  position: absolute;
  inset: 0 0 22px;
}

.report-trend svg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

.report-trend polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-trend polyline.actual {
  stroke: var(--report-blue);
}

.report-trend polyline.consumption {
  stroke: var(--report-cyan);
}

.report-trend polyline.recharge {
  stroke: var(--report-purple);
}

.trend-labels {
  height: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.trend-labels span {
  color: var(--report-muted);
  white-space: nowrap;
  font-size: 8px;
  position: absolute;
  transform: translateX(-50%);
}

.report-legend {
  color: var(--report-muted);
  gap: 16px;
  margin-top: 6px;
  font-size: 9px;
  display: flex;
}

.report-legend span:before {
  content: "";
  background: currentColor;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  display: inline-block;
}

.report-legend .actual {
  color: var(--report-blue);
}

.report-legend .consumption {
  color: var(--report-cyan);
}

.report-legend .recharge {
  color: var(--report-purple);
}

.report-alert-list {
  gap: 8px;
  display: grid;
}

.report-alert-list button {
  border: 1px solid var(--report-line);
  width: 100%;
  min-height: 54px;
  color: var(--report-text);
  cursor: pointer;
  text-align: left;
  background: #f7f9fccc;
  border-radius: 13px;
  gap: 10px;
  padding: 10px;
}

.report-alert-list button > i {
  background: var(--report-blue);
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 5px #4f7cff14;
}

.report-alert-list button.warning > i {
  background: var(--report-orange);
  box-shadow: 0 0 0 5px #d9903517;
}

.report-alert-list button.critical > i {
  background: var(--report-red);
  box-shadow: 0 0 0 5px #d9505717;
}

.report-alert-list button span {
  flex: 1;
  gap: 3px;
  display: grid;
}

.report-alert-list b {
  font-size: 11px;
}

.report-alert-list small {
  color: var(--report-muted);
  font-size: 8px;
  line-height: 1.45;
}

.report-alert-list em {
  color: var(--report-blue);
  font-size: 9px;
  font-style: normal;
}

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

.report-composition {
  min-height: 300px;
}

.composition-body.with-donut {
  grid-template-columns: 106px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  display: grid;
}

.report-donut {
  width: 102px;
  height: 102px;
  position: relative;
}

.report-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.report-donut circle {
  stroke: currentColor;
}

.report-donut .base {
  color: #edf0f5;
}

.report-donut > span {
  text-align: center;
  place-content: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.report-donut b {
  font-size: 20px;
}

.report-donut small {
  color: var(--report-muted);
  font-size: 8px;
}

.composition-list {
  gap: 11px;
  display: grid;
}

.composition-list > div {
  grid-template-columns: 1fr auto;
  gap: 5px 8px;
  display: grid;
}

.composition-list > div > span {
  gap: 6px;
  min-width: 0;
}

.composition-list span > i {
  background: currentColor;
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.composition-list b {
  color: var(--report-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.composition-list small {
  color: var(--report-muted);
  font-size: 8px;
}

.composition-list strong {
  color: var(--report-text);
  font-size: 9px;
}

.composition-list u {
  background: #eef1f5;
  border-radius: 3px;
  grid-column: 1 / -1;
  height: 3px;
  text-decoration: none;
  overflow: hidden;
}

.composition-list u i {
  border-radius: inherit;
  background: currentColor;
  height: 100%;
  display: block;
}

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

.report-ranking-list, .report-top-list {
  gap: 5px;
  display: grid;
}

.report-ranking-list button, .report-top-list button {
  width: 100%;
  min-height: 48px;
  color: var(--report-text);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 11px;
  gap: 10px;
  padding: 8px 10px;
}

.report-ranking-list button:hover, .report-top-list button:hover {
  background: #f5f7fb;
}

.report-ranking-list em, .report-top-list em {
  width: 24px;
  color: var(--report-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.report-ranking-list span, .report-top-list span {
  gap: 2px;
  min-width: 120px;
  display: grid;
}

.report-ranking-list b, .report-top-list b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.report-ranking-list small, .report-top-list small {
  color: var(--report-muted);
  font-size: 8px;
}

.report-ranking-list button > i {
  background: #edf0f5;
  border-radius: 4px;
  flex: 1;
  height: 4px;
  position: relative;
  overflow: hidden;
}

.report-ranking-list button > i u {
  border-radius: inherit;
  background: linear-gradient(90deg,var(--report-blue),#8eabff);
  height: 100%;
  display: block;
}

.report-ranking-list strong, .report-top-list strong {
  text-align: right;
  min-width: 92px;
  font-size: 10px;
}

.report-definitions {
  margin-top: 14px;
  padding: 0 18px;
}

.report-definitions summary {
  min-height: 48px;
  color: var(--report-muted);
  cursor: pointer;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.report-definitions > div {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 0 16px;
  display: grid;
}

.report-definitions p {
  background: #f6f8fb;
  border-radius: 10px;
  gap: 3px;
  margin: 0;
  padding: 10px;
  display: grid;
}

.report-definitions b {
  font-size: 10px;
}

.report-definitions span {
  color: var(--report-muted);
  font-size: 9px;
  line-height: 1.55;
}

.report-detail-panel {
  margin-top: 14px;
  scroll-margin-top: 20px;
}

.report-drill-empty {
  min-height: 170px;
  color: var(--report-muted);
  text-align: center;
  place-items: center;
  gap: 6px;
  display: grid;
}

.report-drill-empty b {
  color: var(--report-text);
  font-size: 14px;
}

.report-drill-empty span {
  font-size: 10px;
}

.report-detail-tabs {
  background: #eef1f5;
  border-radius: 12px;
  gap: 4px;
  padding: 4px;
  display: flex;
  overflow-x: auto;
}

.report-detail-tabs button.on {
  color: var(--report-text);
  background: #fff;
  box-shadow: 0 2px 8px #19223714;
}

.item-sales-controls {
  border: 1px solid var(--report-line);
  background: color-mix(in srgb,var(--report-panel) 82%,var(--report-bg));
  border-radius: 14px;
  grid-template-columns: minmax(0, 1fr) 170px minmax(260px, .7fr);
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}

.item-type-filter {
  align-items: center;
  gap: 5px;
  display: flex;
  overflow-x: auto;
}

.item-type-filter button {
  border: 1px solid var(--report-line);
  min-height: 36px;
  color: var(--report-muted);
  background: var(--report-panel);
  cursor: pointer;
  border-radius: 10px;
  flex: none;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
}

.item-type-filter button.on {
  color: #fff;
  border-color: var(--report-blue);
  background: var(--report-blue);
}

.item-sales-controls > label {
  color: var(--report-muted);
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  display: grid;
}

.item-sales-controls select, .item-sales-controls input {
  border: 1px solid var(--report-line);
  min-width: 0;
  min-height: 36px;
  color: var(--report-text);
  background: var(--report-panel);
  border-radius: 9px;
  padding: 0 10px;
}

.item-sales-controls form {
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 6px;
  display: grid;
}

.item-sales-controls form button {
  color: #fff;
  background: var(--report-blue);
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  min-height: 36px;
  font-weight: 800;
}

.item-sales-summary {
  border-top: 1px solid var(--report-line);
  color: var(--report-muted);
  grid-column: 1 / -1;
  align-items: center;
  gap: 22px;
  padding-top: 9px;
  font-size: 10px;
  display: flex;
}

.item-sales-summary b {
  color: var(--report-text);
  margin-left: 4px;
  font-size: 12px;
}

.item-sales-note {
  color: var(--report-muted);
  margin: 9px 2px 0;
  font-size: 9px;
}

.report-v2 .report-list-tools {
  margin: 14px 0 8px;
}

.report-v2 .report-table {
  border: 1px solid var(--report-line);
  border-radius: 12px;
  overflow-x: auto;
}

.report-v2 .store-row {
  min-width: 680px;
}

.report-v2 .performance-staff-controls {
  background: #f6f8fb;
  border-radius: 12px;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
}

.report-v2 .performance-staff-controls label {
  color: var(--report-muted);
  gap: 5px;
  font-size: 9px;
  display: grid;
}

.report-v2 .performance-staff-controls input, .report-v2 .performance-staff-controls select {
  border: 1px solid var(--report-line);
  background: #fff;
  border-radius: 9px;
  min-height: 36px;
  padding: 0 10px;
}

.report-v2 .report-empty {
  color: var(--report-muted);
  text-align: center;
  font-size: 10px;
}

@media (max-width: 1180px) {
  .report-composition-grid, .report-secondary-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .report-v2 {
    border-radius: 18px;
    padding: 20px 16px 40px;
  }

  .report-command-bar, .report-analytics-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .report-command-bar {
    flex-direction: column;
  }

  .report-data-stamp {
    align-self: flex-start;
  }

  .report-hero-grid, .report-ranking-grid {
    grid-template-columns: 1fr;
  }

  .report-primary-kpi {
    min-height: 210px;
  }

  .item-sales-controls {
    grid-template-columns: 1fr 1fr;
  }

  .item-type-filter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .report-v2 {
    padding-inline: 10px;
  }

  .report-core-kpis, .report-secondary-kpis, .report-asset-kpis, .report-composition-grid {
    grid-template-columns: 1fr;
  }

  .report-filter-row > span {
    width: 100%;
  }

  .report-segmented {
    max-width: 100%;
    overflow-x: auto;
  }

  .report-store-filter > strong, .report-custom-range {
    width: 100%;
    margin-left: 0;
  }

  .composition-body.with-donut {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .report-donut {
    width: 84px;
    height: 84px;
  }

  .report-definitions > div, .item-sales-controls {
    grid-template-columns: 1fr;
  }

  .item-type-filter, .item-sales-summary {
    grid-column: 1;
  }
}

/* [project]/apps/admin/app/cashier-refinement.css [app-client] (css) */
.advanced-cashier-shell {
  --cashier-side-panel-width: 410px;
  --cashier-column-gap: 14px;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 0;
  display: flex;
  position: relative;
}

.advanced-cashier-shell:fullscreen {
  background: var(--ui-bg);
  width: 100%;
  height: 100%;
  padding: 20px 20px 76px;
  overflow: auto;
}

.advanced-cashier-shell:fullscreen::backdrop {
  background: var(--ui-bg);
}

.cashier-floating-actions {
  right: auto;
  left: calc(var(--cashier-side-panel-width) + var(--cashier-column-gap));
  z-index: 12;
  width: fit-content;
  max-width: calc(100% - var(--cashier-side-panel-width) - var(--cashier-column-gap));
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  display: flex;
  position: absolute;
  top: calc(100vh - 78px);
  bottom: auto;
}

.cashier-floating-actions > button, .cashier-floating-actions > button > span {
  white-space: nowrap;
}

.advanced-cashier-shell:fullscreen .cashier-floating-actions {
  right: auto;
  left: calc(var(--cashier-side-panel-width) + var(--cashier-column-gap));
  top: calc(100vh - 58px);
}

.cashier-modebar {
  order: 0;
}

.advanced-cashier-shell > [data-cashier-mode] {
  order: 1;
  width: 100%;
}

.cashier-fullscreen-toggle, .cashier-create-member-toggle, .cashier-ledger-toggle, .cashier-refund-toggle {
  border: 1px solid rgba(var(--ui-accent-rgb), .36);
  background: var(--ui-accent);
  height: 42px;
  color: var(--ui-on-accent);
  box-shadow: 0 8px 24px rgba(var(--ui-accent-rgb), .22);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 800;
  transition: background .14s, box-shadow .14s, transform .14s;
  display: inline-flex;
}

.cashier-fullscreen-toggle {
  min-width: 78px;
}

.cashier-create-member-toggle {
  border-color: rgba(var(--ui-accent-rgb), .38);
  background: var(--ui-accent-soft);
  min-width: 96px;
  color: var(--ui-accent);
  box-shadow: var(--ui-shadow-soft);
}

.cashier-ledger-toggle, .cashier-refund-toggle {
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  min-width: 88px;
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-soft);
}

.cashier-refund-toggle {
  color: color-mix(in srgb, var(--ui-danger) 78%, var(--ui-text));
}

.cashier-fullscreen-toggle:hover, .cashier-create-member-toggle:hover, .cashier-ledger-toggle:hover, .cashier-refund-toggle:hover {
  background: var(--ui-accent-hover);
  color: var(--ui-on-accent);
  box-shadow: 0 10px 28px rgba(var(--ui-accent-rgb), .28);
  transform: translateY(-1px);
}

.cashier-fullscreen-toggle:active, .cashier-create-member-toggle:active, .cashier-ledger-toggle:active, .cashier-refund-toggle:active {
  transform: scale(.96);
}

.cashier-fullscreen-toggle svg, .cashier-create-member-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 17px;
  height: 17px;
}

.cashier-modebar {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  display: grid;
}

.cashier-mode-card {
  background: #fff;
  border: 1px solid #dfe6e2;
  border-radius: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s, opacity .15s, transform .15s;
  display: grid;
  position: relative;
  overflow: hidden;
}

.cashier-mode-card.active {
  color: #fff;
  background: #17382d;
  border-color: #17382d;
  box-shadow: 0 8px 24px #15382c22;
}

.cashier-mode-card.dragging {
  opacity: .48;
  border-style: dashed;
  transform: scale(.98);
}

.cashier-mode-select {
  min-width: 0;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 10px 50px 10px 8px;
  display: flex;
}

.cashier-mode-select > b {
  color: #829088;
  background: #f0f3f1;
  border-radius: 8px;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 9px;
  display: grid;
}

.cashier-mode-card.active .cashier-mode-select > b {
  color: #12382a;
  background: #6dd2a3;
}

.cashier-mode-select strong, .cashier-mode-select small {
  display: block;
}

.cashier-mode-select strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.cashier-mode-select small {
  color: #8f9893;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-size: 8px;
  overflow: hidden;
}

.cashier-mode-card.active .cashier-mode-select small {
  color: #a8c7ba;
}

.cashier-mode-sort-actions {
  grid-template-columns: repeat(2, 20px);
  align-content: center;
  gap: 2px;
  padding: 0;
  display: grid;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

.cashier-mode-sort-actions > button {
  aspect-ratio: 1;
  color: #66746d;
  background: #f7f9f8;
  border-color: #dfe6e2;
  border-radius: 50%;
  flex: 0 0 20px;
  place-items: center;
  width: 20px;
  max-width: 20px;
  height: 20px;
  max-height: 20px;
  padding: 0;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
  display: grid;
  min-width: 20px !important;
  min-height: 20px !important;
}

.cashier-mode-sort-actions > button:hover:not(:disabled) {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
  transform: translateY(-1px);
}

.cashier-mode-sort-actions > button > svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}

.cashier-mode-card.active .cashier-mode-sort-actions > button {
  color: #d7e8e0;
  background: #ffffff12;
  border-color: #ffffff25;
}

.cashier-mode-card.active .cashier-mode-sort-actions > button:hover:not(:disabled) {
  border-color: var(--ui-accent-hover);
  background: var(--ui-accent-hover);
  color: #fff;
}

.cashier-mode-sort-actions > button:disabled {
  opacity: .28;
  cursor: default;
}

.cashier-mode-sort-actions > i {
  color: #8a9690;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  grid-column: 1 / -1;
  place-items: center;
  height: 19px;
  font-size: 14px;
  font-style: normal;
  line-height: 1;
  display: grid;
}

.cashier-mode-sort-actions > i:active {
  cursor: grabbing;
}

.cashier-mode-card.active .cashier-mode-sort-actions > i {
  color: #a8c7ba;
}

.mixed-payment-dialog {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: min(680px, 100vw - 28px);
  max-height: calc(100vh - 28px);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 20px;
  overflow: auto;
}

.mixed-payment-head {
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  align-items: flex-start;
  padding: 22px 26px 18px;
}

.mixed-payment-head span {
  color: var(--ui-accent);
  letter-spacing: .18em;
  font-size: 9px;
  font-weight: 800;
}

.mixed-payment-head h2 {
  color: var(--ui-text);
  margin: 7px 0 5px;
  font-size: 24px;
  line-height: 1.2;
}

.mixed-payment-head p {
  color: var(--ui-muted);
  font-size: 11px;
}

.mixed-payment-head > button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  width: 32px;
  height: 32px;
  color: var(--ui-muted);
  border-radius: 50%;
  place-items: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: grid;
}

.mixed-payment-head > button:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.mixed-payment-limit {
  border: 1px solid rgba(var(--ui-accent-rgb), .28);
  background: var(--ui-accent-soft);
  width: max-content;
  max-width: calc(100% - 52px);
  color: var(--ui-accent);
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  margin: 14px 26px 0;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1;
  display: flex;
}

.mixed-payment-limit > span {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  letter-spacing: .08em;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
}

.mixed-payment-total {
  background: linear-gradient(135deg, var(--ui-accent-hover), var(--ui-accent));
  color: var(--ui-on-accent);
  box-shadow: 0 12px 28px rgba(var(--ui-accent-rgb), .2);
  border-radius: 16px;
  align-items: center;
  margin: 12px 26px 0;
  padding: 17px 20px;
  display: flex;
}

.mixed-payment-total > div > span, .mixed-payment-total > div > small {
  color: var(--ui-on-accent);
  display: block;
}

.mixed-payment-total > div > span {
  font-size: 12px;
  font-weight: 800;
}

.mixed-payment-total > div > small {
  opacity: .72;
  margin-top: 5px;
  font-size: 9px;
}

.mixed-payment-total > strong {
  color: var(--ui-on-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  margin-left: auto;
  font-size: 38px;
  line-height: 1;
}

.mixed-payment-total > strong > small {
  color: inherit;
  opacity: .82;
  margin-right: 4px;
  font-size: 20px;
}

.mixed-payment-grid {
  background: var(--ui-panel-solid);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 16px 26px;
  display: grid;
}

.mixed-payment-grid > label {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  cursor: pointer;
  border-radius: 14px;
  min-width: 0;
  min-height: 108px;
  padding: 13px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
  position: relative;
}

.mixed-payment-grid > label:hover:not(.disabled) {
  border-color: rgba(var(--ui-accent-rgb), .55);
  transform: translateY(-1px);
}

.mixed-payment-grid > label.selected {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  box-shadow: 0 0 0 2px rgba(var(--ui-accent-rgb), .13);
}

.mixed-payment-grid > label.disabled {
  background: var(--ui-panel-soft);
  cursor: not-allowed;
  opacity: .45;
}

.mixed-payment-grid > label > span {
  min-height: 22px;
  color: var(--ui-text);
  align-items: center;
  padding-right: 28px;
}

.mixed-payment-method-name {
  color: var(--ui-text);
  font-size: 14px;
  line-height: 1.2;
}

.mixed-payment-available {
  color: var(--ui-muted) !important;
  font-size: 9px !important;
}

.mixed-payment-available > b {
  color: var(--ui-accent);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.mixed-payment-grid > label > div {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding: 5px 10px;
  display: flex;
}

.mixed-payment-grid > label > div:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .14);
}

.mixed-payment-grid > label > div > b {
  color: var(--ui-accent);
  font-size: 18px;
}

.mixed-payment-grid input {
  min-width: 0;
  height: 34px;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
  padding: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.mixed-payment-grid input::placeholder {
  color: var(--ui-subtle);
  opacity: .55;
  font-weight: 650;
}

.mixed-payment-grid input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.mixed-payment-grid input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.mixed-payment-check {
  background: var(--ui-accent);
  width: 23px;
  height: 23px;
  color: var(--ui-on-accent);
  box-shadow: 0 4px 10px rgba(var(--ui-accent-rgb), .25);
  border-radius: 50%;
  place-items: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  display: grid;
  position: absolute;
  top: 11px;
  right: 11px;
}

.payment-balance, .payment-balance.valid {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  color: var(--ui-text);
  border-radius: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 18px;
  margin: 0 26px;
  padding: 12px 15px;
  display: grid;
}

.payment-balance.valid {
  border-color: rgba(var(--ui-accent-rgb), .35);
  background: var(--ui-accent-soft);
}

.payment-balance > div > span, .payment-balance > div > strong {
  display: block;
}

.payment-balance > div > span {
  color: var(--ui-muted);
  font-size: 9px;
}

.payment-balance > div > strong {
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  font-size: 20px;
  line-height: 1.1;
}

.payment-balance > div:nth-child(2) > strong {
  color: var(--ui-accent);
}

.payment-balance.overpaid > div:nth-child(2) > strong, .payment-balance.overpaid > em {
  color: var(--ui-danger);
}

.payment-balance.overpaid > em {
  background: color-mix(in srgb, var(--ui-danger) 12%, transparent);
}

.payment-balance > em {
  background: rgba(var(--ui-accent-rgb), .12);
  color: var(--ui-accent);
  white-space: nowrap;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.mixed-payment-actions {
  border-top: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  justify-content: flex-end;
  gap: 9px;
  margin-top: 16px;
  padding: 15px 26px 17px;
  display: flex;
}

.mixed-payment-actions button {
  border-color: var(--ui-border-strong);
  background: var(--ui-panel-solid);
  min-width: 92px;
  height: 40px;
  color: var(--ui-text);
  padding: 0 17px;
  font-size: 12px;
  font-weight: 750;
}

.mixed-payment-actions button.primary {
  min-width: 138px;
  color: var(--ui-on-accent);
  background: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
}

.mixed-payment-actions button.primary:hover:not(:disabled) {
  background: var(--ui-accent-hover) !important;
  border-color: var(--ui-accent-hover) !important;
}

.mixed-payment-actions button:disabled {
  opacity: .42;
}

@media (max-width: 640px) {
  .mixed-payment-dialog {
    border-radius: 16px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .mixed-payment-head, .mixed-payment-grid, .mixed-payment-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mixed-payment-limit, .mixed-payment-total, .payment-balance {
    margin-left: 16px;
    margin-right: 16px;
  }

  .mixed-payment-grid {
    grid-template-columns: 1fr;
  }

  .mixed-payment-total > strong {
    font-size: 32px;
  }

  .payment-balance, .payment-balance.valid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-balance > em {
    text-align: center;
    grid-column: 1 / -1;
  }
}

.modern-pos {
  grid-template-columns: 410px minmax(0, 1fr);
}

.modern-pos > .settlement-pane, .quick-cashier > aside, .room-cashier > .room-session-panel, .pass-purchase > aside, .recharge-summary {
  order: -1;
}

.quick-cashier {
  grid-template-columns: 340px minmax(0, 1fr);
}

.room-cashier {
  grid-template-columns: 390px minmax(0, 1fr);
}

.pass-purchase {
  grid-template-columns: 340px minmax(0, 1fr);
}

.recharge-layout {
  grid-template-columns: 300px minmax(0, 1fr);
}

:root {
  --product-service-tone: #17724f;
  --product-physical-tone: #2e67a0;
  --product-timed-tone: #946000;
  --product-period-tone: #7049a8;
}

:root[data-theme="ink"] {
  --product-service-tone: #71d4aa;
  --product-physical-tone: #84b8f4;
  --product-timed-tone: #ebbd63;
  --product-period-tone: #c3a2f2;
}

.modern-product-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.kind-tabs {
  flex-wrap: wrap;
}

.modern-product-card {
  --product-tone: var(--product-service-tone);
  --product-card-muted: color-mix(in srgb,
    var(--product-tone) 42%,
    var(--ui-text));
  min-width: 0;
  position: relative;
}

.modern-product-card.product-type-physical {
  --product-tone: var(--product-physical-tone);
}

.modern-product-card.product-type-timed {
  --product-tone: var(--product-timed-tone);
}

.modern-product-card.product-type-period {
  --product-tone: var(--product-period-tone);
}

.modern-product-grid > button, .modern-product-card-main {
  border-color: color-mix(in srgb, var(--product-tone) 36%, var(--ui-border));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--product-tone) 12%, var(--ui-panel-solid)),
    var(--ui-panel-solid) 78%);
  width: 100%;
  min-width: 0;
  min-height: 88px;
  color: var(--ui-text);
  box-shadow: inset 3px 0 0 var(--product-tone);
  text-align: left;
  flex-direction: column;
  padding: 8px 10px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.modern-product-card-main:hover {
  border-color: var(--product-tone);
  background: color-mix(in srgb,
    var(--product-tone) 17%,
    var(--ui-panel-solid));
  box-shadow: inset 3px 0 0 var(--product-tone),
    0 8px 22px color-mix(in srgb, var(--product-tone) 14%, transparent);
  transform: translateY(-1px);
}

.modern-product-card-main:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--product-tone) 46%, transparent);
  outline-offset: 2px;
}

.modern-product-grid > button.in-cart, .modern-product-card-main.in-cart {
  background: color-mix(in srgb,
    var(--product-tone) 20%,
    var(--ui-panel-solid));
  box-shadow: inset 3px 0 0 var(--product-tone),
    0 0 0 2px color-mix(in srgb, var(--product-tone) 24%, transparent);
  border-color: var(--product-tone) !important;
}

.modern-product-card-main.in-cart em {
  padding-right: 30px;
}

.modern-product-card-decrease {
  z-index: 3;
  border: 1px solid rgba(var(--ui-accent-rgb), .42);
  background: var(--ui-panel);
  width: 27px;
  min-width: 27px;
  height: 27px;
  min-height: 27px;
  color: var(--ui-accent);
  box-shadow: 0 2px 7px rgba(var(--ui-accent-rgb), .12);
  border-radius: 7px;
  place-items: center;
  padding: 0;
  transition: background .14s, color .14s, transform .14s;
  display: grid;
  position: absolute;
  bottom: 7px;
  right: 7px;
}

.modern-product-card-decrease:hover {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  transform: translateY(-1px);
}

.modern-product-card-decrease:active {
  transform: scale(.94);
}

.modern-product-card-decrease svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8px;
  stroke-linecap: round;
  width: 16px;
  height: 16px;
  display: block;
}

.modern-product-grid strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 28px 4px 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow: hidden;
}

.modern-product-grid .product-type-badge {
  border: 1px solid
    color-mix(in srgb, var(--product-tone) 42%, var(--ui-border));
  background: color-mix(in srgb,
    var(--product-tone) 14%,
    var(--ui-panel-solid));
  width: fit-content;
  min-height: 18px;
  color: color-mix(in srgb, var(--product-tone) 78%, var(--ui-text));
  border-radius: 5px;
  align-items: center;
  margin: 0 0 5px;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
}

.modern-product-grid small {
  color: var(--product-card-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 1.35;
  overflow: hidden;
}

.modern-product-grid b {
  color: color-mix(in srgb, var(--product-tone) 72%, var(--ui-text));
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.2;
}

.modern-product-grid em {
  color: var(--product-card-muted);
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.25;
}

.modern-product-grid em.low-stock {
  color: var(--ui-danger);
  font-weight: 700;
}

.modern-product-grid i.promotion-badge {
  border: 1px solid color-mix(in srgb, var(--ui-danger) 42%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger) 12%, var(--ui-panel-solid));
  width: 23px;
  height: 23px;
  color: var(--ui-danger);
  border-radius: 6px;
  place-items: center;
  padding: 0;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  display: grid;
  position: absolute;
  top: 8px;
  right: 8px;
  transform: none;
}

.modern-pos > .settlement-pane {
  padding: 12px;
}

.workspace.cashier-workspace {
  padding-top: 20px;
}

.modern-pos .customer-box {
  border-bottom: 0;
  padding-bottom: 7px;
  overflow: visible;
}

.modern-pos .customer-box > input {
  border-color: var(--ui-border);
  background: var(--ui-panel);
  height: 36px;
  padding: 0 11px;
  font-size: 10px;
}

.modern-pos .customer-box > .member-dropdown {
  z-index: 30;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel);
  top: 38px;
}

.checkout-member-card {
  border: 1px solid rgba(var(--ui-accent-rgb), .28);
  background: var(--ui-accent-soft);
  border-radius: 10px;
  grid-template-columns: minmax(0, 4fr) auto minmax(62px, 1fr);
  margin-top: 6px;
  display: grid;
  position: relative;
}

.checkout-member-detail {
  border: 0;
  border-left: 1px solid rgba(var(--ui-accent-rgb), .2);
  min-height: 100%;
  color: var(--ui-accent);
  background: none;
  border-radius: 0;
  padding: 0 9px;
  font-size: 8px;
  font-weight: 750;
}

.checkout-member-detail:hover {
  background: rgba(var(--ui-accent-rgb), .1);
}

.checkout-member-hover-zone {
  border-radius: 9px 0 0 9px;
  outline: none;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  display: grid;
  position: relative;
}

.checkout-member-hover-zone:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ui-accent);
}

.checkout-member-avatar {
  background: var(--ui-accent);
  width: 31px;
  height: 31px;
  color: var(--ui-on-accent);
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.checkout-member-primary {
  min-width: 0;
}

.checkout-member-primary > b {
  color: var(--ui-text);
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  display: flex;
  overflow: hidden;
}

.checkout-member-primary > b em {
  color: var(--ui-accent);
  flex: none;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.checkout-member-primary > small {
  color: var(--ui-muted);
  white-space: nowrap;
  align-items: baseline;
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.2;
  display: flex;
  overflow: hidden;
}

.checkout-member-primary > small strong {
  color: var(--ui-text);
  margin-left: 2px;
  font-size: 10px;
  font-weight: 800;
}

.checkout-member-primary > small i {
  background: var(--ui-border);
  width: 1px;
  height: 9px;
  margin: 0 5px;
}

.checkout-member-clear {
  border: 0;
  border-left: 1px solid rgba(var(--ui-accent-rgb), .2);
  color: var(--ui-accent);
  background: none;
  border-radius: 0 9px 9px 0;
  padding: 0 5px;
  font-size: 8px;
}

.checkout-member-clear:hover {
  background: rgba(var(--ui-accent-rgb), .1);
}

.checkout-member-popover {
  z-index: 25;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel);
  width: 125%;
  height: min(510px, 100vh - 150px);
  max-height: min(510px, 100vh - 150px);
  box-shadow: var(--ui-shadow-overlay);
  color: var(--ui-text);
  border-radius: 12px;
  padding: 11px;
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  overflow: auto;
}

.checkout-member-hover-zone:hover .checkout-member-popover, .checkout-member-hover-zone:focus-within .checkout-member-popover {
  flex-direction: column;
  display: flex;
}

.member-popover-head {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  display: flex;
}

.member-popover-head b {
  font-size: 11px;
}

.member-popover-head span {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 700;
}

.checkout-member-popover dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0;
  display: grid;
}

.checkout-member-popover dl > div {
  background: color-mix(in srgb, var(--ui-panel) 98%, var(--ui-text) 2%);
  border-radius: 7px;
  min-width: 0;
  padding: 7px;
}

.checkout-member-popover dl > .member-popover-wide {
  grid-column: span 3;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.checkout-member-popover dt {
  color: var(--ui-muted);
  font-size: 7px;
}

.checkout-member-popover dd {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
}

.member-popover-wide dd {
  margin: 0;
}

.member-popover-section {
  border-top: 1px solid var(--ui-border);
  align-content: start;
  gap: 4px;
  min-height: 92px;
  padding: 12px 2px 10px;
  display: grid;
}

.member-popover-section + .member-popover-section {
  margin-top: 8px;
}

.member-popover-section > b {
  color: var(--ui-accent);
  font-size: 11px;
}

.member-popover-section > span {
  color: var(--ui-muted);
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
  display: flex;
}

.member-popover-section > span strong {
  color: var(--ui-text);
  flex: none;
  font-size: 11px;
}

.modern-pos .settlement-pane > .member-password {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  padding: 5px 7px;
  font-size: 8px;
}

.modern-pos .settlement-pane > .member-password input {
  height: 28px;
  min-height: 28px;
  font-size: 9px;
}

.modern-pos .checkout-lines {
  border: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-panel) 98%, var(--ui-text) 2%);
  border-radius: 11px;
  height: clamp(300px, 100vh - 430px, 500px);
  min-height: 300px;
  max-height: none;
  margin: 2px 0 6px;
  padding: 3px 9px;
  overflow: auto;
}

.modern-pos .checkout-line {
  border-color: var(--ui-border);
  padding: 8px 0;
}

.modern-pos .checkout-line b, .modern-pos .checkout-line > strong {
  font-size: 14px;
}

.modern-pos .commission-line {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  display: grid;
}

.modern-pos .checkout-line-identity {
  min-width: 0;
}

.modern-pos .checkout-line-name, .modern-pos .checkout-line-code {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  overflow: hidden;
}

.modern-pos .checkout-line-name {
  color: var(--ui-text);
  line-height: 1.35;
}

.modern-pos .checkout-line-code {
  color: var(--ui-muted);
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
}

.modern-pos .checkout-line-metrics {
  justify-content: flex-end;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.modern-pos .checkout-line-pass {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  margin: 0 auto 2px 0;
  overflow: hidden;
}

.modern-pos .checkout-line-price, .modern-pos .checkout-line-quantity {
  flex: none;
  align-items: center;
  gap: 5px;
  display: flex;
}

.modern-pos .checkout-line-price > span, .modern-pos .checkout-line-quantity > span {
  color: var(--ui-muted);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.modern-pos .checkout-line-locked-price {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  min-width: 76px;
  height: 40px;
  min-height: 40px;
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
  border-radius: 7px;
  place-items: center;
  font-size: 13px;
  display: grid;
}

.modern-pos .checkout-line-controls {
  align-items: center;
  gap: 5px;
  display: flex;
}

.modern-pos .unit-price-control {
  border: 1px solid var(--ui-border);
  width: 88px;
  min-width: 88px;
  height: 40px;
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  cursor: text;
  border-radius: 7px;
  align-items: center;
  padding: 0 5px;
  transition: border-color .14s, background .14s, box-shadow .14s;
  display: inline-flex;
}

.modern-pos .unit-price-control:focus-within {
  border-color: var(--ui-accent);
  background: var(--ui-panel-solid);
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .12);
}

.modern-pos .unit-price-control.changed {
  border-color: color-mix(in srgb, #13805d 54%, var(--ui-border));
  color: #0f7555;
  background: color-mix(in srgb, #dff5ec 72%, var(--ui-panel-solid));
}

.modern-pos .unit-price-control > input {
  width: 100%;
  min-width: 0;
  height: 36px;
  color: var(--ui-text);
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
  font-weight: 800;
}

.modern-pos .unit-price-control > em {
  color: #fff;
  white-space: nowrap;
  background: #13805d;
  border-radius: 4px;
  margin-left: 3px;
  padding: 2px 3px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.modern-pos .checkout-line-controls > button, .modern-pos .commission-trigger {
  border: 1px solid var(--ui-border);
  place-items: center;
  padding: 0;
  line-height: 1;
  display: grid;
}

.modern-pos .checkout-line-controls > button.quantity-step {
  background: var(--ui-panel-soft);
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  color: var(--ui-text);
  border-radius: 8px;
  font-weight: 900;
  transition: border-color .14s, background .14s, color .14s, transform .14s;
  font-size: 16px !important;
}

.modern-pos .checkout-line-controls > button.quantity-step svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 10px;
  height: 10px;
  display: block;
  overflow: visible;
}

.modern-pos .checkout-line-controls > button.quantity-step:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
  transform: translateY(-1px);
}

.modern-pos .checkout-line-controls > button.quantity-step:active {
  transform: translateY(0)scale(.94);
}

.modern-pos .quantity-input {
  width: 44px;
  min-width: 44px;
  height: 40px;
  min-height: 40px;
  color: var(--ui-text);
  text-align: center;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  outline: none;
  font-size: 14px;
  font-weight: 800;
  transition: border-color .14s, background .14s, box-shadow .14s;
}

.modern-pos .quantity-input:hover {
  background: var(--ui-panel-soft);
}

.modern-pos .quantity-input:focus {
  border-color: var(--ui-accent);
  background: var(--ui-panel-solid);
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .12);
}

.commission-trigger-wrap {
  margin-right: 4px;
  display: inline-flex;
  position: relative;
}

.modern-pos .commission-trigger {
  background: color-mix(in srgb, var(--ui-muted) 12%, var(--ui-panel-solid));
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  color: var(--ui-muted);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  transition: border-color .14s, background .14s, color .14s, box-shadow .14s;
}

.modern-pos .commission-trigger:hover, .modern-pos .commission-trigger.active {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
}

.modern-pos .commission-trigger.active {
  box-shadow: none;
}

.commission-summary-tooltip {
  z-index: 2000;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  color: var(--ui-text);
  pointer-events: none;
  border-radius: 12px;
  gap: 10px;
  padding: 16px;
  display: grid;
  position: fixed;
  overflow: auto;
  box-shadow: 0 14px 36px #0f1e172e;
}

.commission-summary-tooltip:before {
  content: "";
  border-top: 1px solid var(--ui-border);
  border-left: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 9px;
  height: 9px;
  position: absolute;
  top: -5px;
  right: 7px;
  transform: rotate(45deg);
}

.commission-summary-tooltip > b {
  color: var(--ui-muted);
  font-size: 13px !important;
}

.commission-summary-tooltip > span {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  display: flex;
}

.commission-summary-tooltip strong, .commission-summary-tooltip em {
  white-space: nowrap;
  font-size: 13px;
  font-style: normal;
}

.commission-summary-tooltip em {
  color: var(--ui-accent);
}

.commission-summary-tooltip strong {
  color: #111;
  font-size: 14px;
  font-weight: 850;
}

.commission-popover-layer {
  z-index: 1000;
  background: #111d1814;
  position: fixed;
  inset: 0;
}

.commission-popover {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  max-height: calc(100vh - 24px);
  color: var(--ui-text);
  border-radius: 15px;
  display: grid;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 24px 70px #0c1b143d;
}

.commission-popover-head {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 15px 17px 13px;
  display: flex;
}

.commission-popover-head span, .commission-popover-head h3, .commission-popover-head small {
  display: block;
}

.commission-popover-head span {
  color: var(--ui-accent);
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 800;
}

.commission-popover-head h3 {
  margin: 4px 0 2px;
  font-size: 20px;
}

.commission-popover-head small {
  color: var(--ui-muted);
  font-size: 12px;
}

.commission-popover-head > button {
  width: 28px;
  height: 28px;
  color: var(--ui-muted);
  background: none;
  border: 0;
  padding: 0;
  font-size: 20px;
}

.commission-popover-body {
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 390px;
  display: grid;
  overflow: hidden;
}

.commission-staff-picker {
  border-right: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 12px;
  display: grid;
}

.commission-staff-picker label > span {
  color: var(--ui-muted);
  margin-bottom: 6px;
  font-size: 13px;
  display: block;
}

.commission-staff-picker input {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 100%;
  height: 40px;
  color: var(--ui-text);
  border-radius: 7px;
  outline: none;
  padding: 0 8px;
  font-size: 13px;
}

.commission-staff-picker input:focus {
  border-color: var(--ui-accent);
}

.commission-staff-picker > div {
  align-content: start;
  gap: 4px;
  margin-top: 8px;
  display: grid;
  overflow: auto;
}

.commission-staff-picker > div > button {
  color: var(--ui-text);
  text-align: left;
  background: none;
  border: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 10px 8px;
  display: grid;
}

.commission-staff-picker > div > button:hover, .commission-staff-picker > div > button.selected {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.commission-staff-picker button i {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 5px;
  place-items: center;
  width: 17px;
  height: 17px;
  font-size: 9px;
  font-style: normal;
  display: grid;
}

.commission-staff-picker button.selected i {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
}

.commission-staff-picker button span, .commission-staff-picker p {
  font-size: 13px;
}

.commission-staff-picker p {
  color: var(--ui-muted);
  text-align: center;
}

.commission-allocation-editor {
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 12px 14px;
  display: grid;
}

.commission-allocation-title {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  display: flex;
}

.commission-allocation-title span {
  font-size: 14px;
  font-weight: 800;
}

.commission-allocation-title button {
  color: var(--ui-accent);
  background: none;
  border: 0;
  padding: 3px 0;
  font-size: 12px;
}

.commission-allocation-list {
  align-content: start;
  gap: 7px;
  display: grid;
  overflow: auto;
}

.commission-allocation-list article {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 9px;
  gap: 8px;
  padding: 9px;
  display: grid;
}

.commission-person-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.commission-person-row b {
  color: #111;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  overflow: hidden;
}

.commission-person-row label {
  color: var(--ui-muted);
  align-items: center;
  gap: 4px;
  font-size: 12px;
  display: flex;
}

.commission-person-row input {
  accent-color: var(--ui-accent);
}

.commission-person-row button {
  color: #b34840;
  background: none;
  border: 0;
  padding: 2px;
  font-size: 12px;
}

.commission-value-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  display: grid;
}

.commission-value-row label > span {
  color: var(--ui-muted);
  margin-bottom: 4px;
  font-size: 11px;
  display: block;
}

.commission-value-row label > div {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 7px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  display: grid;
  overflow: hidden;
}

.commission-value-row label:last-child > div {
  grid-template-columns: auto minmax(0, 1fr);
}

.commission-value-row input {
  width: 100%;
  min-width: 0;
  height: 38px;
  color: var(--ui-text);
  background: none;
  border: 0;
  outline: none;
  padding: 0 7px;
  font-size: 13px;
  font-weight: 800;
}

.commission-value-row em {
  color: var(--ui-muted);
  padding: 0 7px;
  font-size: 12px;
  font-style: normal;
}

.commission-allocation-empty {
  border: 1px dashed var(--ui-border);
  min-height: 150px;
  color: var(--ui-muted);
  text-align: center;
  border-radius: 9px;
  place-items: center;
  padding: 20px;
  font-size: 13px;
  display: grid;
}

.commission-popover-footer {
  border-top: 1px solid var(--ui-border);
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  display: grid;
}

.commission-popover-footer > div {
  color: var(--ui-muted);
  align-items: center;
  gap: 13px;
  font-size: 13px;
  display: flex;
}

.commission-popover-footer > div b {
  color: var(--ui-text);
  font-size: 15px;
}

.commission-popover-footer > div em {
  color: #b34840;
  font-style: normal;
}

.commission-popover-footer > button {
  min-width: 76px;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
}

.commission-popover-footer > button.primary {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: #fff;
}

.commission-popover-footer > button:disabled {
  opacity: .45;
}

.modern-pos .empty-cart {
  padding: 82px 0;
}

.modern-pos .benefit-deductions {
  border-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-panel) 98%, var(--ui-text) 2%);
  gap: 5px;
  margin: 5px 0;
  padding: 6px;
}

.benefit-deductions-primary {
  grid-template-columns: minmax(0, .78fr) minmax(145px, 1.22fr);
  gap: 5px;
  display: grid;
}

.modern-pos .benefit-deductions select, .modern-pos .benefit-deductions input {
  border-color: var(--ui-border);
  background: var(--ui-panel);
  height: 30px;
  min-height: 30px;
  padding: 0 7px;
  font-size: 8px;
}

.checkout-points-field {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel);
  border-radius: 7px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  display: grid !important;
}

.modern-pos .checkout-points-field > span {
  color: var(--ui-muted);
  white-space: nowrap;
  margin: 0 0 0 7px;
  font-weight: 800;
  font-size: var(--ui-font-base) !important;
}

.modern-pos .checkout-points-field > input {
  text-align: right;
  background: none;
  border: 0;
  min-width: 0;
  padding-right: 3px;
  font-weight: 800;
}

.modern-pos .coupon-code {
  gap: 5px;
}

.modern-pos .coupon-code button {
  background: var(--ui-accent-soft);
  height: 36px;
  min-height: 36px;
  color: var(--ui-accent);
  border-color: rgba(var(--ui-accent-rgb), .28);
  align-self: stretch;
  padding: 0 11px;
  font-size: 8px;
  font-weight: 800;
}

.modern-pos .benefit-deductions > small {
  font-size: 7px;
  line-height: 1.25;
}

.modern-pos .payment-selector {
  padding: 5px 0;
}

.modern-pos .payment-selector > div {
  gap: 4px;
}

.modern-pos .payment-selector > .payment-primary-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.modern-pos .payment-selector > .payment-secondary-row {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr);
  margin-top: 4px;
  position: relative;
}

.modern-pos .payment-selector button {
  white-space: nowrap;
  min-width: 0;
  height: 34px;
  padding: 0 2px;
  font-size: 9px;
  font-weight: 700;
}

.restricted-balance-choice {
  min-width: 0;
  position: relative;
}

.modern-pos .restricted-balance-choice > button {
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  display: flex;
}

.modern-pos .restricted-balance-choice > button > strong {
  color: var(--ui-accent);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.restricted-balance-tooltip {
  z-index: 30;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: min(320px, 100vw - 48px);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 11px;
  padding: 10px;
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
}

.restricted-balance-choice:hover .restricted-balance-tooltip, .restricted-balance-choice:focus-within .restricted-balance-tooltip, .restricted-balance-tooltip > b, .restricted-balance-tooltip > small {
  display: block;
}

.restricted-balance-tooltip > b {
  color: var(--ui-text);
  margin-bottom: 7px;
  font-size: 10px;
}

.restricted-balance-tooltip > small {
  color: var(--ui-muted);
  font-size: 9px;
  line-height: 1.45;
}

.restricted-balance-tooltip > div {
  gap: 5px;
  display: grid;
}

.restricted-balance-tooltip > div > span {
  background: var(--ui-panel-soft);
  border-radius: 7px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 7px 8px;
  display: flex;
}

.restricted-balance-tooltip em {
  color: var(--ui-muted);
  text-overflow: ellipsis;
  font-size: 9px;
  font-style: normal;
  line-height: 1.4;
  overflow: hidden;
}

.restricted-balance-tooltip strong {
  color: var(--ui-accent);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 10px;
}

.checkout-total-panel {
  border: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-panel) 98%, var(--ui-text) 2%);
  border-radius: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2px 0 7px;
  display: grid;
  overflow: hidden;
}

.modern-pos .checkout-total-panel .settlement-summary {
  border: 0;
  border-right: 1px solid var(--ui-border);
  align-content: center;
  padding: 7px 9px;
  display: grid;
}

.modern-pos .checkout-total-panel .settlement-summary > div {
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  font-size: 10px;
}

.modern-pos .checkout-total-panel .settlement-summary span {
  min-width: 0;
  line-height: 1.2;
}

.modern-pos .checkout-total-panel .settlement-summary b {
  flex: none;
  font-size: 14px;
  font-weight: 800;
}

.modern-pos .checkout-total-panel .grand-total {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 7px 10px;
  display: flex;
}

.modern-pos .checkout-total-panel .grand-total span {
  color: var(--ui-muted);
  align-items: center;
  gap: 5px;
  font-size: 9px;
  display: flex;
}

.modern-pos .checkout-total-panel .grand-total span small {
  color: var(--ui-accent);
  font-size: 7px;
  font-weight: 750;
}

.modern-pos .checkout-total-panel .grand-total strong {
  color: var(--ui-text);
  margin-top: 1px;
  font-size: 25px;
  line-height: 1.1;
}

.modern-pos .final-total-control {
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent-soft);
  width: 132px;
  min-height: 36px;
  color: var(--ui-text);
  cursor: text;
  border-radius: 9px;
  align-items: center;
  margin-top: 3px;
  padding: 0 7px;
  display: inline-flex;
}

.modern-pos .final-total-control:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .14);
}

.modern-pos .final-total-control.changed {
  background: color-mix(in srgb, #dff5ec 72%, var(--ui-panel-solid));
  border-color: #13805d;
}

.modern-pos .final-total-control > b {
  color: currentColor;
  flex: none;
  font-size: 16px;
}

.modern-pos .final-total-control > input {
  color: currentColor;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  height: 34px;
  font-size: 23px;
  font-weight: 850;
}

.modern-pos .final-total-control > em {
  color: #fff;
  background: #13805d;
  border-radius: 4px;
  margin-left: 3px;
  padding: 2px 3px;
  font-size: 6px;
  font-style: normal;
  font-weight: 800;
}

.modern-pos .checkout-submit {
  background: var(--ui-accent);
  height: 40px;
  color: var(--ui-on-accent);
}

@media (max-width: 1150px) {
  .cashier-floating-actions {
    flex-wrap: wrap;
    order: 2;
    max-width: 100%;
    margin: 12px 0 0;
    position: relative;
    inset: auto;
  }

  .cashier-holds-popover {
    left: 0;
    right: auto;
  }

  .modern-pos, .room-cashier, .quick-cashier, .pass-purchase, .recharge-layout {
    grid-template-columns: 1fr;
  }

  .modern-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .cashier-modebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .modern-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.customer-search-segmented {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 9px;
  grid-template-columns: minmax(0, 5fr) minmax(96px, 1fr);
  width: 100%;
  display: grid;
  overflow: hidden;
}

.customer-search-segmented:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .12);
}

.customer-search-segmented > input {
  width: 100%;
  min-width: 0;
  height: 38px;
  color: var(--ui-text);
  outline: 0;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1.4;
  background: none !important;
  border: 0 !important;
}

.customer-search-segmented > input::placeholder {
  font-size: 13px;
}

.customer-search-segmented > span {
  border-left: 1px solid
    color-mix(in srgb, var(--ui-accent) 18%, var(--ui-border));
  background: var(--ui-accent-soft);
  min-width: 96px;
  color: var(--ui-accent-hover);
  white-space: nowrap;
  place-items: center;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.checkout-action-split {
  border-radius: 10px !important;
}

.checkout-action-split > button:first-child {
  border-radius: 10px 0 0 10px !important;
}

.checkout-action-split > button:last-child {
  border-radius: 0 10px 10px 0 !important;
}

.discount-breakdown-trigger {
  cursor: help;
  position: relative;
}

.checkout-total-panel {
  overflow: visible;
}

.discount-breakdown-tooltip {
  z-index: 80;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 260px;
  box-shadow: var(--ui-shadow-overlay);
  color: var(--ui-text);
  border-radius: 11px;
  gap: 8px;
  padding: 12px;
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
}

.discount-breakdown-trigger:hover .discount-breakdown-tooltip, .discount-breakdown-trigger:focus-within .discount-breakdown-tooltip {
  display: grid;
}

.discount-breakdown-tooltip > strong {
  font-size: 12px;
}

.discount-breakdown-tooltip > em {
  color: var(--ui-muted);
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-style: normal;
  display: flex;
}

.discount-breakdown-tooltip > em b {
  color: var(--ui-accent);
  font-size: 12px !important;
}

.modern-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.modern-product-card {
  min-width: 150px;
}

.modern-product-card-main.in-cart {
  border: 1px solid var(--product-tone) !important;
  background: color-mix(in srgb,
    var(--product-tone) 20%,
    var(--ui-panel-solid)) !important;
  box-shadow: inset 3px 0 0 var(--product-tone) !important;
}

.modern-product-card-decrease {
  width: 19px;
  min-width: 19px;
  height: 19px;
  min-height: 19px;
  box-shadow: none;
  border-radius: 5px;
}

.modern-product-card-decrease svg {
  width: 11px;
  height: 11px;
}

.modern-product-card-main :where(strong, small, b, em) {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.quick-commission-control {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  min-height: 42px;
  color: var(--ui-muted);
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: 10px;
  display: flex;
}

.quick-cashier .commission-trigger {
  background: color-mix(in srgb, var(--ui-muted) 12%, var(--ui-panel-solid));
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  color: var(--ui-muted);
  border-radius: 50%;
  font-weight: 900;
}

.quick-cashier .commission-trigger:hover, .quick-cashier .commission-trigger.active {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

.member-offer-grid {
  grid-template-columns: repeat(auto-fill, 220px);
  place-content: start;
  gap: 12px;
}

.member-offer-card {
  width: 220px;
  min-height: 232px;
  overflow: visible;
  padding: 16px 17px !important;
}

.member-offer-card > em {
  order: 2;
  margin-top: 8px;
}

.member-offer-card > div {
  flex-direction: column;
  order: 3;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 3px;
  min-height: 54px;
  margin-top: auto;
}

.member-offer-card > div small {
  align-self: flex-start;
}

.member-offer-card > div b {
  text-align: right;
  width: 100%;
  font-size: 25px;
}

.member-offer-detail-trigger {
  color: currentColor;
  background: #ffffff8a;
  border: 1px solid;
  border-radius: 7px;
  order: 4;
  margin-top: 8px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 800;
  position: relative;
}

.member-offer-detail-trigger > span {
  z-index: 90;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 290px;
  box-shadow: var(--ui-shadow-overlay);
  color: var(--ui-text);
  border-radius: 11px;
  gap: 7px;
  margin-top: 0;
  padding: 12px;
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
}

.member-offer-detail-trigger:hover > span {
  display: grid;
}

.member-offer-detail-trigger > span b {
  font-size: 13px;
}

.member-offer-detail-trigger > span em {
  color: var(--ui-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
}

.member-selected-offer {
  background: color-mix(in srgb,
    var(--ui-accent-soft) 58%,
    var(--ui-panel-solid));
  padding-right: 54px;
  position: relative;
}

.member-offer-commission {
  margin: 0;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.modern-pos .member-business-payments {
  margin-top: auto;
}

.member-business-total {
  margin-top: 0;
}

.room-cashier {
  transition: grid-template-columns .18s;
  grid-template-columns: minmax(0, 1fr) 410px !important;
}

.room-session-panel {
  position: relative;
}

.room-settlement-toggle {
  border: 1px solid var(--ui-border);
  background: var(--ui-accent-soft);
  min-width: 42px;
  min-height: 30px;
  color: var(--ui-accent);
  border-radius: 8px;
  align-self: flex-end;
  margin-bottom: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 850;
}

.settlement-collapsed .room-session-panel {
  align-items: center;
  min-height: 96px;
  padding: 6px !important;
}

.settlement-collapsed .room-session-panel > :not(.room-settlement-toggle) {
  visibility: inherit;
}

.settlement-collapsed .room-settlement-toggle {
  border-radius: 12px;
  width: 34px;
  min-width: 34px;
  height: 56px;
  margin: 8px 0 0;
  font-size: 13px;
}

.room-card-status {
  border: 1px solid !important;
  border-radius: 7px !important;
  gap: 4px !important;
  min-height: 24px !important;
  padding: 2px 6px !important;
}

.room-card-status.occupied {
  color: #fff !important;
  background: #c63f34 !important;
  border-color: #c63f34 !important;
}

.room-card-status.reserved {
  color: #fff !important;
  background: #ad740d !important;
  border-color: #ad740d !important;
}

.room-card-status.cleaning {
  color: #fff !important;
  background: #d59c20 !important;
  border-color: #a77b17 !important;
}

.room-card-status.editable select {
  min-height: 18px !important;
  padding-right: 12px !important;
}

.room-card.available {
  background: color-mix(in srgb, #16845e 9%, var(--ui-panel-solid)) !important;
}

.room-card.cleaning {
  background: color-mix(in srgb, #e1a51f 14%, var(--ui-panel-solid)) !important;
}

.room-card.reserved {
  background: color-mix(in srgb, #c48719 12%, var(--ui-panel-solid)) !important;
}

.room-card.occupied {
  background: color-mix(in srgb, #cf5143 8%, var(--ui-panel-solid)) !important;
}

.room-reservation-detail {
  cursor: help;
  position: relative;
}

.room-reservation-detail > span {
  z-index: 60;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: 250px;
  box-shadow: var(--ui-shadow-overlay);
  color: var(--ui-text);
  white-space: normal;
  border-radius: 10px;
  gap: 6px;
  padding: 11px;
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

.room-reservation-detail:hover {
  overflow: visible;
}

.room-reservation-detail:hover > span {
  display: grid;
}

.room-reservation-detail > span b {
  font-size: 12px;
}

.room-reservation-detail > span em {
  color: var(--ui-muted);
  font-size: 10px;
  font-style: normal;
}

@media (max-width: 1150px) {
  .room-cashier, .room-cashier.settlement-collapsed {
    grid-template-columns: 1fr !important;
  }

  .settlement-collapsed .room-session-panel {
    min-height: 48px;
  }

  .settlement-collapsed .room-settlement-toggle {
    width: 100%;
    height: 36px;
    margin: 0;
  }

  .member-offer-grid {
    grid-template-columns: repeat(auto-fill, 220px);
  }
}

.checkout-confirm-backdrop {
  z-index: 1400;
  -webkit-backdrop-filter: blur(12px) saturate(.9);
  backdrop-filter: blur(12px) saturate(.9);
  background: #0e1814a3;
  place-items: center;
  padding: 24px;
  animation: .18s ease-out checkout-confirm-fade;
  display: grid;
  position: fixed;
  inset: 0;
}

.checkout-confirm-dialog {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, var(--ui-border));
  background: radial-gradient(circle at 88% 0%,
      color-mix(in srgb, var(--ui-accent) 13%, transparent),
      transparent 34%),
    var(--ui-panel);
  width: min(460px, 100%);
  color: var(--ui-text);
  border-radius: 24px;
  animation: .22s cubic-bezier(.2, .8, .2, 1) checkout-confirm-rise;
  overflow: hidden;
  box-shadow: 0 32px 90px #04120c52, 0 8px 24px #04120c29;
}

.checkout-confirm-dialog > header {
  justify-content: space-between;
  align-items: flex-start;
  padding: 23px 25px 10px;
  display: flex;
}

.checkout-confirm-dialog > header small, .checkout-confirm-success > small {
  color: var(--ui-accent);
  letter-spacing: .17em;
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 900;
  display: block;
}

.checkout-confirm-dialog > header h2 {
  letter-spacing: -.02em;
  margin: 0;
  font-size: 19px;
  font-weight: 900;
}

.checkout-confirm-dialog > header button {
  background: var(--ui-panel-soft);
  width: 32px;
  height: 32px;
  color: var(--ui-muted);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}

.checkout-confirm-price {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-panel-soft));
  text-align: center;
  border-radius: 19px;
  margin: 8px 24px 0;
  padding: 25px 18px 22px;
}

.checkout-confirm-price > span {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 800;
  display: block;
}

.checkout-confirm-price > strong {
  color: var(--ui-accent);
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  margin: 5px 0 4px;
  font-size: clamp(42px, 9vw, 57px);
  font-weight: 950;
  line-height: 1.05;
  display: block;
}

.checkout-confirm-price > strong i {
  vertical-align: .62em;
  margin-right: 5px;
  font-size: .42em;
  font-style: normal;
}

.checkout-confirm-price > p {
  color: var(--ui-muted);
  margin: 8px 0 0;
  font-size: 10px;
}

.checkout-confirm-meta {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 12px 24px 0;
  display: grid;
}

.checkout-confirm-meta > span {
  background: var(--ui-panel-soft);
  border-radius: 12px;
  min-width: 0;
  padding: 11px 13px;
}

.checkout-confirm-meta small, .checkout-confirm-meta b {
  display: block;
}

.checkout-confirm-meta small {
  color: var(--ui-muted);
  margin-bottom: 3px;
  font-size: 9px;
}

.checkout-confirm-meta b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.checkout-confirm-password {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border));
  background: var(--ui-panel);
  border-radius: 14px;
  margin: 12px 24px 0;
  padding: 13px 14px 14px;
  display: block;
}

.checkout-confirm-password > span {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
  display: flex;
}

.checkout-confirm-password b {
  font-size: 12px;
}

.checkout-confirm-password small {
  color: var(--ui-muted);
  font-size: 9px;
}

.checkout-confirm-password input {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  width: 100%;
  height: 45px;
  color: var(--ui-text);
  letter-spacing: .18em;
  text-align: center;
  border-radius: 11px;
  outline: 0;
  font-size: 19px;
  font-weight: 900;
}

.checkout-confirm-password input:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 15%, transparent);
}

.checkout-confirm-error {
  background: color-mix(in srgb, #d94b3d 10%, var(--ui-panel));
  color: #c83e32;
  text-align: center;
  border-radius: 10px;
  margin: 10px 24px 0;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 750;
}

.checkout-confirm-dialog > footer {
  grid-template-columns: .72fr 1.6fr;
  gap: 10px;
  padding: 16px 24px 24px;
  display: grid;
}

.checkout-confirm-dialog > footer button {
  cursor: pointer;
  border: 0;
  border-radius: 13px;
  min-height: 47px;
  font-size: 12px;
  font-weight: 900;
}

.checkout-confirm-dialog > footer .secondary {
  background: var(--ui-panel-soft);
  color: var(--ui-muted);
}

.checkout-confirm-dialog > footer .primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ui-accent) 86%, #fff),
    var(--ui-accent));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-accent) 27%, transparent);
  color: #fff;
}

.checkout-confirm-dialog > footer button:disabled {
  cursor: not-allowed;
  opacity: .52;
  box-shadow: none;
}

.checkout-confirm-success {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 430px;
  padding: 36px 28px;
  display: flex;
}

.checkout-success-mark {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--ui-accent) 70%, #fff),
    var(--ui-accent));
  width: 72px;
  height: 72px;
  box-shadow: 0 14px 35px color-mix(in srgb, var(--ui-accent) 28%, transparent);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  margin-bottom: 20px;
  font-size: 34px;
  font-weight: 900;
  display: grid;
}

.checkout-confirm-success h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 950;
}

.checkout-confirm-success > strong {
  color: var(--ui-accent);
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  margin: 9px 0 6px;
  font-size: 43px;
  font-weight: 950;
}

.checkout-confirm-success p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 11px;
}

.checkout-confirm-success > em {
  color: var(--ui-muted);
  margin-top: 8px;
  font-size: 9px;
  font-style: normal;
}

.checkout-success-progress {
  background: var(--ui-panel-soft);
  border-radius: 999px;
  width: 170px;
  height: 3px;
  margin-top: 28px;
  overflow: hidden;
}

.checkout-success-progress i {
  transform-origin: 0;
  border-radius: inherit;
  background: var(--ui-accent);
  width: 100%;
  height: 100%;
  animation: 2s linear forwards checkout-success-countdown;
  display: block;
}

@keyframes checkout-confirm-fade {
  from {
    opacity: 0;
  }
}

@keyframes checkout-confirm-rise {
  from {
    opacity: 0;
    transform: translateY(13px)scale(.98);
  }
}

@keyframes checkout-success-countdown {
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 520px) {
  .checkout-confirm-backdrop {
    padding: 12px;
  }

  .checkout-confirm-dialog {
    border-radius: 20px;
  }

  .checkout-confirm-meta, .checkout-confirm-dialog > footer {
    grid-template-columns: 1fr;
  }

  .checkout-confirm-dialog > footer .primary {
    grid-row: 1;
  }
}

.hold-confirm-dialog {
  width: min(480px, 100%);
}

.hold-confirm-price {
  background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-panel-soft));
}

.hold-confirm-meta {
  grid-template-columns: 1fr 1fr;
}

.hold-confirm-meta .hold-confirm-detail {
  grid-column: 1 / -1;
}

.hold-confirm-note, .common-remark-field {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 14px;
  margin: 12px 24px 0;
  padding: 13px 14px 14px;
  display: block;
}

.hold-confirm-note > span, .common-remark-field > span {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  display: flex;
}

.hold-confirm-note > span b, .common-remark-field > span b {
  font-size: 12px;
}

.hold-confirm-note > span small, .common-remark-field > span small {
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
  font-size: 9px;
}

.hold-confirm-note textarea, .common-remark-field textarea {
  resize: vertical;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel);
  width: 100%;
  min-height: 72px;
  color: var(--ui-text);
  font: inherit;
  border-radius: 11px;
  outline: 0;
  padding: 11px 12px;
  font-size: 12px;
  line-height: 1.6;
}

.hold-confirm-note textarea:focus, .common-remark-field textarea:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 14%, transparent);
}

.common-remark-phrases {
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  display: grid;
}

.common-remark-phrases > div {
  scrollbar-width: none;
  gap: 5px;
  min-width: 0;
  display: flex;
  overflow-x: auto;
}

.common-remark-phrases > div::-webkit-scrollbar {
  display: none;
}

.common-remark-phrases button {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  min-height: 28px;
  color: var(--ui-muted);
  border-radius: 999px;
  flex: none;
  padding: 4px 9px;
  font-size: 9px;
}

.common-remark-phrases button:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.common-remark-phrases .common-remark-add {
  width: 30px;
  height: 30px;
  min-height: 30px;
  color: var(--ui-accent);
  border-radius: 8px;
  padding: 0;
  font-size: 18px;
  font-weight: 800;
}

.cashier-holds-popover article > div em {
  max-width: 260px;
  color: var(--ui-accent);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  display: block;
  overflow: hidden;
}

@media (max-width: 520px) {
  .hold-confirm-meta {
    grid-template-columns: 1fr;
  }

  .hold-confirm-meta .hold-confirm-detail {
    grid-column: auto;
  }
}

.quick-cashier, .room-cashier {
  grid-template-columns: 410px minmax(0, 1fr) !important;
}

.quick-cashier > aside, .room-cashier > .room-session-panel {
  padding: 12px;
}

.checkout-action-split {
  z-index: 18;
  width: 100%;
  box-shadow: 0 10px 26px rgba(var(--ui-accent-rgb), .24);
  border-radius: 10px;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  margin-top: 10px;
  display: grid;
  position: sticky;
  bottom: 14px;
  overflow: hidden;
}

.checkout-action-split > button {
  width: 100%;
  height: 44px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 850;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  position: static !important;
}

.checkout-hold {
  border-color: var(--ui-accent) !important;
  background: var(--ui-panel-solid) !important;
  color: var(--ui-accent) !important;
}

.cashier-holds-toggle {
  border-color: var(--ui-border);
  background: var(--ui-panel-solid);
  min-width: 88px;
  height: 42px;
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-soft);
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}

.cashier-holds-toggle b {
  background: var(--ui-accent);
  min-width: 21px;
  height: 21px;
  color: var(--ui-on-accent);
  border-radius: 999px;
  place-items: center;
  font-size: 9px;
  display: grid;
}

.cashier-holds-popover {
  z-index: 30;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: min(390px, 100vw - 32px);
  max-height: 420px;
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 14px;
  padding: 10px;
  position: absolute;
  inset: auto 0 calc(100% + 8px) auto;
  overflow: auto;
}

.cashier-holds-popover > header, .cashier-holds-popover > article {
  border-bottom: 1px solid var(--ui-border);
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  display: grid;
}

.cashier-holds-popover > header {
  grid-template-columns: 1fr auto;
}

.cashier-holds-popover > header button {
  background: none;
  border: 0;
}

.cashier-holds-popover article b, .cashier-holds-popover article small {
  display: block;
}

.cashier-holds-popover article small {
  color: var(--ui-muted);
  margin-top: 4px;
  font-size: 9px;
}

.cashier-holds-popover article strong {
  color: var(--ui-accent);
  font-size: 13px;
}

.cashier-holds-popover article > button {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 9px;
}

.cashier-holds-popover > p {
  color: var(--ui-muted);
  text-align: center;
  padding: 30px;
}

.quick-cashier > aside {
  flex-direction: column;
  gap: 9px;
  min-height: 590px;
  display: flex;
}

.quick-benefit-deductions {
  display: grid !important;
}

.quick-payment-selector, .room-payment-selector {
  padding: 3px 0 !important;
}

.quick-payment-selector > div, .room-payment-selector > div {
  gap: 4px;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.quick-payment-selector button, .room-payment-selector button {
  white-space: nowrap;
  min-width: 0;
  height: 34px;
  padding: 0 2px;
  font-size: 9px;
}

.quick-total-panel, .room-total-panel {
  margin-top: auto;
}

.room-board {
  padding: 14px !important;
}

.room-category-filter {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 12px;
  min-height: 45px;
  margin: 0 0 12px !important;
  padding: 6px !important;
}

.room-category-filter > button {
  min-height: 31px;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}

.room-category-filter > button.active {
  background: var(--ui-panel-solid) !important;
  color: var(--ui-accent) !important;
  box-shadow: 0 3px 10px #16292112 !important;
}

.room-category-filter > span {
  margin-left: auto;
  padding-right: 7px;
  color: var(--ui-muted) !important;
  font-size: 8px !important;
}

.room-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.room-grid > .room-card {
  transition: border-color .18s, box-shadow .18s, transform .18s;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent) !important;
  background: var(--ui-panel-solid) !important;
  border-radius: 14px !important;
  min-height: 142px !important;
  box-shadow: 0 5px 18px #1628210e !important;
}

.room-grid > .room-card:before {
  display: none !important;
}

.room-grid > .room-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb,
    var(--ui-accent) 26%,
    var(--ui-border)) !important;
  box-shadow: 0 11px 25px #16282117 !important;
}

.room-card.available {
  border-color: color-mix(in srgb, #18845f 13%, var(--ui-border)) !important;
  background: color-mix(in srgb,
    #18845f 2.8%,
    var(--ui-panel-solid)) !important;
}

.room-card.occupied {
  border-color: color-mix(in srgb, #cf5143 18%, var(--ui-border)) !important;
  background: color-mix(in srgb,
    #cf5143 4.5%,
    var(--ui-panel-solid)) !important;
}

.room-card.reserved {
  border-color: color-mix(in srgb, #c48719 19%, var(--ui-border)) !important;
  background: color-mix(in srgb, #c48719 5%, var(--ui-panel-solid)) !important;
}

.room-card.cleaning {
  border-color: color-mix(in srgb, #987326 18%, var(--ui-border)) !important;
  background: color-mix(in srgb,
    #987326 4.5%,
    var(--ui-panel-solid)) !important;
}

.room-card-main {
  min-height: 108px;
  padding: 14px 14px 11px !important;
}

.room-card-heading {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex !important;
}

.room-card-heading > strong {
  min-width: 0;
  color: var(--ui-text);
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.room-card-status {
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  display: inline-flex;
  color: var(--ui-muted) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.room-card-status > i {
  border: 2px solid color-mix(in srgb, currentColor 17%, transparent);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 10%, transparent);
  background: currentColor;
  border-radius: 50%;
  flex: 0 0 7px;
}

.room-card-status > b {
  color: currentColor;
  white-space: nowrap;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.room-card-status.available {
  color: #18845f !important;
}

.room-card-status.occupied {
  color: #cf5143 !important;
}

.room-card-status.reserved {
  color: #c48719 !important;
}

.room-card-status.cleaning {
  color: #987326 !important;
}

.room-card-status.disabled {
  color: #8d9692 !important;
}

.room-card-status.editable select {
  cursor: pointer;
  outline: 0;
  color: currentColor !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 22px !important;
  padding: 0 14px 0 0 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.room-card-status.editable select:focus {
  box-shadow: none !important;
}

.room-card-capacity {
  align-items: baseline;
  gap: 6px;
  margin-top: 13px;
  display: flex;
}

.room-card-capacity span {
  color: var(--ui-muted);
  font-size: 9px;
}

.room-card-capacity b {
  color: color-mix(in srgb, var(--ui-text) 84%, var(--ui-muted));
  font-size: 11px;
  font-weight: 800;
}

.room-grid > .room-card.occupied {
  overflow: visible;
}

.room-grid > .room-card.occupied:hover, .room-grid > .room-card.occupied:focus-within {
  z-index: 20;
}

.room-card-detail {
  z-index: 6;
  position: absolute;
  top: 47px;
  right: 14px;
}

.room-card-detail > button {
  border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-panel-solid));
  min-height: 25px;
  color: var(--ui-accent-hover);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 800;
}

.room-card-detail-popover {
  z-index: 40;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, var(--ui-border));
  background: var(--ui-panel-solid);
  width: min(290px, 100vw - 48px);
  box-shadow: var(--ui-shadow-overlay);
  color: var(--ui-text);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  border-radius: 12px;
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
  position: absolute;
  top: -8px;
  left: calc(100% + 9px);
  overflow: hidden;
  transform: translateX(-5px);
}

.room-grid > .room-card:nth-child(4n) .room-card-detail-popover {
  left: auto;
  right: calc(100% + 9px);
  transform: translateX(5px);
}

.room-card-detail:hover .room-card-detail-popover, .room-card-detail:focus-within .room-card-detail-popover {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
  transform: translateX(0);
}

.room-card-detail-popover > header, .room-card-detail-popover > footer {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.room-card-detail-popover > header {
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
}

.room-card-detail-popover > header b, .room-card-detail-popover > footer b {
  color: var(--ui-text);
  font-size: 10px;
}

.room-card-detail-popover > header span, .room-card-detail-popover > footer span {
  color: var(--ui-muted);
  font-size: 8px;
}

.room-card-detail-lines {
  max-height: 210px;
  padding: 4px 12px;
  display: grid;
  overflow: auto;
}

.room-card-detail-lines > div {
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  display: flex;
}

.room-card-detail-lines > div:last-child {
  border-bottom: 0;
}

.room-card-detail-lines span b, .room-card-detail-lines span small {
  display: block;
}

.room-card-detail-lines span b {
  color: var(--ui-text);
  font-size: 9px;
}

.room-card-detail-lines span small {
  color: var(--ui-muted);
  margin-top: 3px;
  font-size: 8px;
}

.room-card-detail-lines strong {
  color: var(--ui-text);
  flex: none;
  font-size: 10px;
}

.room-card-detail-popover > p {
  color: var(--ui-muted);
  text-align: center;
  margin: 0;
  padding: 18px 12px;
  font-size: 9px;
}

.room-card-detail-popover > footer {
  border-top: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-panel-solid));
}

.room-card-summary {
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 74%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  min-height: 25px;
  padding-top: 9px;
  line-height: 1.4;
  display: flex;
  overflow: hidden;
  color: var(--ui-muted) !important;
  margin: 9px 0 0 !important;
  font-size: 9px !important;
}

.room-card-summary > i {
  background: color-mix(in srgb, var(--ui-muted) 55%, transparent);
  border-radius: 50%;
  flex: 0 0 3px;
  width: 3px;
  height: 3px;
  margin: 0 6px;
}

.room-time-alert {
  background: color-mix(in srgb, #d84c3f 10%, var(--ui-panel)) !important;
  color: #c74438 !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
  font-size: 8px !important;
  top: 46px !important;
  right: 14px !important;
}

.room-card > footer {
  border-top: 1px solid var(--ui-border);
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  background: color-mix(in srgb,
    var(--ui-panel-soft) 48%,
    transparent) !important;
  gap: 0 !important;
  padding: 0 !important;
  display: grid !important;
}

.room-card > footer button {
  border: 0 !important;
  border-right: 1px solid var(--ui-border) !important;
  min-height: 36px !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--ui-text) 82%, var(--ui-muted)) !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  font-weight: 750 !important;
}

.room-card > footer button:last-child {
  border-right: 0 !important;
}

.room-card > footer button.primary {
  background: color-mix(in srgb, var(--ui-accent) 7%, transparent) !important;
  color: var(--ui-accent) !important;
}

.room-card > footer button:not(:disabled):hover {
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent) !important;
  color: var(--ui-accent) !important;
}

.room-card.disabled {
  filter: grayscale(.85);
  opacity: .54;
  background: var(--ui-panel-soft) !important;
}

.room-card.disabled button {
  color: var(--ui-muted) !important;
  border-color: var(--ui-border) !important;
  background: none !important;
}

.room-session-panel {
  flex-direction: column;
  gap: 0;
  min-height: 610px;
  display: flex;
}

.modern-pos .room-customer-box {
  padding-bottom: 7px !important;
}

.room-session-meta {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 10px;
  grid-template-columns: 1.1fr 1.5fr .8fr;
  gap: 6px;
  margin: 0 0 6px;
  padding: 8px;
  display: grid;
}

.room-session-meta > div {
  border-right: 1px solid var(--ui-border);
  min-width: 0;
  padding-right: 6px;
}

.room-session-meta > div:last-child {
  border-right: 0;
}

.room-session-meta b, .room-session-meta span {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.room-session-meta b {
  font-size: 10px;
}

.room-session-meta span {
  color: var(--ui-muted);
  margin-top: 3px;
  font-size: 7px;
}

.room-add-item {
  display: none !important;
}

.modern-pos .room-checkout-lines {
  margin-top: 0;
}

.modern-pos .room-checkout-line {
  grid-template-columns: minmax(0, 1fr) auto 58px;
}

.room-commission-trigger {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.room-commission-trigger select {
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.modern-pos .checkout-line-controls > .room-line-delete {
  border-color: color-mix(in srgb, #c74a3e 22%, var(--ui-border));
  color: #b94b41;
  background: none;
  border-radius: 6px;
  width: auto;
  min-width: 30px;
  height: 24px;
  min-height: 24px;
  padding: 0 5px;
  font-size: 8px;
}

.modern-pos .checkout-line-controls > .room-line-delete:hover {
  background: #c74a3e14;
  border-color: #c74a3e;
}

.room-order-toolbar {
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
}

.room-order-toolbar > div {
  flex: 1;
}

.room-order-toolbar div b, .room-order-toolbar div span {
  display: block;
}

.room-order-toolbar div span {
  color: var(--ui-muted);
  margin-top: 3px;
  font-size: 9px;
}

.room-order-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.room-order-product-grid > button {
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  min-height: 130px;
  padding: 13px;
  display: flex;
}

.room-order-product-grid span {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 8px;
}

.room-order-product-grid strong {
  margin-top: 10px;
  font-size: 13px;
}

.room-order-product-grid small {
  color: var(--ui-muted);
  margin-top: 4px;
  font-size: 8px;
}

.room-order-product-grid b {
  margin-top: auto;
  font-size: 18px;
}

.room-order-product-grid em {
  color: var(--ui-accent);
  margin-top: 5px;
  font-size: 8px;
  font-style: normal;
}

.room-open-member-search {
  grid-column: 1 / -1;
  gap: 6px;
  display: grid;
}

.room-open-member-search > span {
  color: var(--ui-muted);
  font-size: 9px;
}

.room-party-stepper {
  grid-template-columns: 38px 64px 38px;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  display: grid;
}

.room-party-stepper button {
  height: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 22px;
  font-weight: 900;
}

.room-party-stepper input {
  text-align: center;
  font-weight: 900;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
}

.room-open-form > footer {
  grid-template-columns: auto 1fr 1fr;
  display: grid !important;
}

.room-transfer-modal {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  width: min(620px, 100vw - 30px);
  box-shadow: var(--ui-shadow-overlay);
  border-radius: 15px;
  overflow: hidden;
}

.room-transfer-modal > header {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: flex-start;
  padding: 17px 20px;
  display: flex;
}

.room-transfer-modal header span {
  color: var(--ui-accent);
  letter-spacing: 1.4px;
  font-size: 8px;
}

.room-transfer-modal header h2 {
  margin: 5px 0;
  font-size: 17px;
}

.room-transfer-modal header p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 9px;
}

.room-transfer-modal > div {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 420px;
  padding: 16px;
  display: grid;
  overflow: auto;
}

.room-transfer-modal > div > button {
  text-align: left;
  gap: 5px;
  display: grid;
}

.room-transfer-modal > div span, .room-transfer-modal > div small {
  color: var(--ui-muted);
  font-size: 8px;
}

@media (max-width: 1150px) {
  .quick-cashier, .room-cashier {
    grid-template-columns: 1fr !important;
  }

  .room-grid, .room-order-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .room-grid, .room-order-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cashier-floating-actions {
    gap: 6px;
    max-width: calc(100vw - 28px);
    bottom: auto;
    left: auto;
    right: auto;
  }

  .cashier-floating-actions > button {
    min-width: 0;
    padding-inline: 10px;
  }

  .cashier-holds-popover {
    left: auto;
    right: 0;
  }
}

@media (min-width: 721px) and (max-width: 1050px) {
  .cashier-floating-actions {
    left: auto;
    right: auto;
  }
}

.member-create-backdrop {
  z-index: 1000;
}

@media (max-width: 580px) {
  .cashier-modebar {
    grid-template-columns: 1fr;
  }

  .commission-popover-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .commission-staff-picker {
    border-right: 0;
    border-bottom: 1px solid var(--ui-border);
    max-height: 180px;
  }

  .commission-allocation-list {
    max-height: 240px;
  }

  .commission-popover-footer {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .commission-popover-footer > div {
    gap: 2px;
    display: grid;
  }
}

.member-offer-grid {
  place-content: start;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, 176px) !important;
}

.member-offer-card {
  cursor: pointer;
  min-height: 216px;
  overflow: hidden;
  width: 176px !important;
  padding: 15px 14px 13px !important;
}

.member-offer-card > em {
  margin-top: 8px;
}

.member-offer-detail-trigger {
  margin-top: 13px;
  padding: 5px 8px;
}

.room-cashier > .room-settlement-toggle {
  z-index: 36;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border));
  background: var(--ui-panel-solid);
  width: 42px;
  min-width: 42px;
  color: var(--ui-accent);
  box-shadow: 0 8px 22px rgba(var(--ui-accent-rgb), .14);
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  display: inline-flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.room-cashier.settlement-collapsed > .room-settlement-toggle {
  height: 104px;
  min-height: 104px;
  left: -18px;
}

.room-cashier:not(.settlement-collapsed) > .room-settlement-toggle {
  height: 82px;
  min-height: 82px;
  left: 389px;
}

.room-cashier > .room-settlement-toggle:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

@media (max-width: 1150px) {
  .room-cashier > .room-settlement-toggle {
    letter-spacing: 0;
    writing-mode: horizontal-tb;
    width: 70px;
    min-width: 70px;
    height: 36px;
    min-height: 36px;
    top: 10px;
    transform: none;
  }

  .room-cashier.settlement-collapsed > .room-settlement-toggle {
    left: 10px;
    right: auto;
  }

  .room-cashier:not(.settlement-collapsed) > .room-settlement-toggle {
    left: auto;
    right: 10px;
  }
}

.room-cashier > .room-settlement-toggle {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 32%, var(--ui-border));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ui-panel-solid) 96%, var(--ui-accent) 4%),
    color-mix(in srgb, var(--ui-accent-soft) 48%, var(--ui-panel-solid)));
  width: 48px;
  min-width: 48px;
  height: 112px;
  min-height: 112px;
  color: var(--ui-accent-hover);
  box-shadow: 0 10px 26px rgba(var(--ui-accent-rgb), .14),
    inset 0 1px 0 color-mix(in srgb, var(--ui-panel-solid) 82%, transparent);
  cursor: pointer;
  border-radius: 14px;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
  overflow: hidden;
}

.room-cashier > .room-settlement-toggle .room-settlement-toggle-label {
  color: inherit;
  letter-spacing: 3px;
  text-orientation: upright;
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  display: block;
}

.room-cashier > .room-settlement-toggle .room-settlement-toggle-icon {
  flex: 0 0 14px;
  width: 18px;
  height: 14px;
  display: block;
  position: relative;
}

.room-settlement-toggle-icon:before, .room-settlement-toggle-icon:after {
  content: "";
  border-bottom: 2px solid;
  border-right: 2px solid;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 3px;
}

.room-cashier.settlement-collapsed .room-settlement-toggle-icon:before {
  left: 0;
  transform: rotate(-45deg);
}

.room-cashier.settlement-collapsed .room-settlement-toggle-icon:after {
  left: 6px;
  transform: rotate(-45deg);
}

.room-cashier:not(.settlement-collapsed) .room-settlement-toggle-icon:before {
  right: 0;
  transform: rotate(135deg);
}

.room-cashier:not(.settlement-collapsed) .room-settlement-toggle-icon:after {
  right: 6px;
  transform: rotate(135deg);
}

@media (max-width: 1150px) {
  .room-cashier > .room-settlement-toggle {
    flex-direction: row;
    gap: 7px;
    width: 78px;
    min-width: 78px;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
  }

  .room-cashier > .room-settlement-toggle .room-settlement-toggle-label {
    letter-spacing: 0;
    text-orientation: mixed;
    writing-mode: horizontal-tb;
  }

  .room-cashier > .room-settlement-toggle:active:not(:disabled) {
    transform: scale(.97) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-cashier > .room-session-panel {
    transition: none;
  }
}

.room-cashier:not(.settlement-collapsed) > .room-session-panel .room-settlement-toggle {
  z-index: 34;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border));
  background: var(--ui-panel-solid);
  width: 42px;
  min-width: 42px;
  height: 82px;
  min-height: 82px;
  color: var(--ui-accent);
  box-shadow: 0 8px 22px rgba(var(--ui-accent-rgb), .14);
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
}

.room-cashier:not(.settlement-collapsed) > .room-session-panel .room-settlement-toggle:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

@media (max-width: 1150px) {
  .room-cashier:not(.settlement-collapsed) > .room-session-panel .room-settlement-toggle {
    letter-spacing: 0;
    writing-mode: horizontal-tb;
    width: 70px;
    min-width: 70px;
    height: 36px;
    min-height: 36px;
    top: auto;
    bottom: -18px;
    right: 14px;
    transform: none;
  }
}

.room-card-status.occupied, .room-card-status.reserved, .room-card-status.editable.cleaning {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 68px;
  min-width: 68px;
  height: 28px;
  color: #fff !important;
  border: 1px solid #0000 !important;
  border-radius: 8px !important;
  gap: 0 !important;
  min-height: 28px !important;
  padding: 0 7px !important;
}

.room-card-status.reserved {
  background: #c58a0b !important;
  border-color: #a97608 !important;
}

.room-card-status.editable.cleaning {
  background: #c99312 !important;
  border-color: #a97608 !important;
}

.room-card-status.occupied > i, .room-card-status.reserved > i, .room-card-status.editable.cleaning > i {
  display: none !important;
}

.room-card-status.occupied > b, .room-card-status.reserved > b {
  text-align: center;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 26px;
  margin: 0;
  display: flex;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.room-card-status.editable.cleaning select {
  appearance: none;
  text-align: center;
  text-align-last: center;
  width: 100%;
  height: 26px;
  margin: 0;
  display: block;
  color: #fff !important;
  background: none !important;
  border: 0 !important;
  min-height: 26px !important;
  padding: 0 12px 0 4px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 26px !important;
}

.member-offer-card > div small {
  font-size: 11px;
}

.member-offer-kind {
  min-height: 21px;
  padding: 0 8px;
}

.member-offer-card > strong {
  margin-top: 10px;
}

.member-offer-detail-trigger {
  transform: translateY(8px);
}

@media (min-width: 1151px) {
  .room-cashier:not(.settlement-collapsed) > .room-session-panel .room-settlement-toggle {
    transform: translateY(calc(-50% - 18px));
  }
}

.room-card-status.editable.cleaning select option {
  font-size: 12px !important;
}

.member-offer-remove {
  z-index: 4;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 44%, var(--ui-border));
  background: var(--ui-panel-solid);
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  color: var(--ui-accent);
  box-shadow: 0 4px 12px rgba(var(--ui-accent-rgb), .12);
  border-radius: 50%;
  place-items: center;
  padding: 0;
  font-size: 17px;
  font-weight: 850;
  line-height: 1;
  display: grid;
  position: absolute;
  bottom: 9px;
  right: 9px;
}

.member-offer-remove:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

.member-benefit-quantity {
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: 8px;
  display: flex;
}

.member-benefit-quantity button {
  border: 1px solid var(--line, #d9dfdc);
  color: #245a45;
  background: #fff;
  border-radius: 10px;
  width: 36px;
  min-height: 36px;
  font-size: 18px;
}

.member-benefit-quantity span {
  color: #245a45;
  text-align: center;
  min-width: 42px;
  font-size: 13px;
  font-weight: 700;
}

.restricted-balance-confirm-preview {
  border: 1px solid var(--line, #d9dfdc);
  background: #f7faf8;
  border-radius: 14px;
  margin: 14px 0;
  padding: 14px 16px;
}

.restricted-balance-confirm-preview > b {
  margin-bottom: 8px;
  display: block;
}

.restricted-balance-confirm-preview > div {
  border-top: 1px solid var(--line, #d9dfdc);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  display: flex;
}

.restricted-balance-confirm-preview span {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.restricted-balance-confirm-preview small {
  color: #66756d;
}

.restricted-balance-confirm-preview em {
  color: #245a45;
  font-style: normal;
  font-weight: 700;
}

.member-offer-global-tooltip {
  z-index: 100000;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 24%, var(--ui-border));
  background: radial-gradient(circle at 92% 4%,
      rgba(var(--ui-accent-rgb), .12),
      transparent 34%),
    color-mix(in srgb, var(--ui-panel-solid) 98%, var(--ui-accent) 2%);
  width: min(380px, 100vw - 32px);
  color: var(--ui-text);
  box-shadow: 0 26px 65px #12251e3b,
    0 8px 22px rgba(var(--ui-accent-rgb), .12);
  border-radius: 16px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  display: grid;
  position: fixed;
  overflow: visible;
}

.member-offer-global-tooltip > header {
  border-bottom: 1px solid
    color-mix(in srgb, var(--ui-accent) 16%, var(--ui-border));
  gap: 4px;
  padding-bottom: 11px;
  display: grid;
}

.member-offer-global-tooltip > header span {
  color: var(--ui-accent);
  letter-spacing: 1.2px;
  font-size: 10px;
  font-weight: 850;
}

.member-offer-global-tooltip > header strong {
  color: var(--ui-text);
  font-size: 16px;
  font-weight: 900;
}

.member-offer-global-tooltip > div {
  overscroll-behavior: contain;
  gap: 8px;
  min-height: 0;
  display: grid;
  overflow: auto;
}

.member-offer-global-tooltip p {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 12%, var(--ui-border));
  background: color-mix(in srgb,
    var(--ui-accent-soft) 34%,
    var(--ui-panel-solid));
  color: color-mix(in srgb, var(--ui-text) 80%, var(--ui-muted));
  border-radius: 10px;
  margin: 0;
  padding: 10px 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

@media (max-width: 650px) {
  .member-offer-grid {
    grid-template-columns: 1fr !important;
  }

  .member-offer-card {
    width: 100% !important;
  }
}

.room-status-filter {
  border-left: 1px solid var(--ui-border);
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 7px;
  display: flex;
}

.room-status-filter > button {
  min-height: 31px;
  color: var(--ui-muted);
  white-space: nowrap;
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 750;
  display: inline-flex;
}

.room-status-filter > button > i {
  background: currentColor;
  border-radius: 50%;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
}

.room-status-filter > button.available {
  color: #18845f;
}

.room-status-filter > button.reserved {
  color: #bd7d0d;
}

.room-status-filter > button.occupied {
  color: #c84a3f;
}

.room-status-filter > button:hover {
  background: color-mix(in srgb, currentColor 7%, var(--ui-panel-solid));
}

.room-status-filter > button.active {
  border-color: color-mix(in srgb, currentColor 22%, var(--ui-border));
  background: var(--ui-panel-solid);
  box-shadow: 0 3px 10px #16292112;
}

.room-status-filter > button.active.all {
  color: var(--ui-accent);
}

@media (max-width: 850px) {
  .room-category-filter {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .room-status-filter {
    border-top: 1px solid var(--ui-border);
    border-left: 0;
    width: 100%;
    margin-left: 0;
    padding-top: 6px;
    padding-left: 0;
  }
}

:is(button.ui-close-button, .report-ai-drawer > header > button:last-child, .catalog-form-head > button:last-child, .catalog-form-head > div:last-child > button:last-child, [class*="formHead"] > button:last-child, [class*="modal"] > header > button:last-child, [class*="shareModal"] > header > button:last-child) {
  position: relative;
  overflow: hidden;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  color: var(--ui-muted) !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  flex: 0 0 32px !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  display: grid !important;
}

:is(button.ui-close-button, .report-ai-drawer > header > button:last-child, .catalog-form-head > button:last-child, .catalog-form-head > div:last-child > button:last-child, [class*="formHead"] > button:last-child, [class*="modal"] > header > button:last-child, [class*="shareModal"] > header > button:last-child):before, :is(button.ui-close-button, .report-ai-drawer > header > button:last-child, .catalog-form-head > button:last-child, .catalog-form-head > div:last-child > button:last-child, [class*="formHead"] > button:last-child, [class*="modal"] > header > button:last-child, [class*="shareModal"] > header > button:last-child):after {
  content: "";
  background: currentColor;
  border-radius: 999px;
  width: 14px;
  height: 1.5px;
  position: absolute;
}

:is(button.ui-close-button, .report-ai-drawer > header > button:last-child, .catalog-form-head > button:last-child, .catalog-form-head > div:last-child > button:last-child, [class*="formHead"] > button:last-child, [class*="modal"] > header > button:last-child, [class*="shareModal"] > header > button:last-child):before {
  transform: rotate(45deg);
}

:is(button.ui-close-button, .report-ai-drawer > header > button:last-child, .catalog-form-head > button:last-child, .catalog-form-head > div:last-child > button:last-child, [class*="formHead"] > button:last-child, [class*="modal"] > header > button:last-child, [class*="shareModal"] > header > button:last-child):after {
  transform: rotate(-45deg);
}

:is(button.ui-close-button, .report-ai-drawer > header > button:last-child, .catalog-form-head > button:last-child, .catalog-form-head > div:last-child > button:last-child, [class*="formHead"] > button:last-child, [class*="modal"] > header > button:last-child, [class*="shareModal"] > header > button:last-child):hover {
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
}

.member-business-pos {
  align-items: stretch;
  min-height: 620px;
}

.member-offer-catalog {
  min-width: 0;
  padding: 14px;
}

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

.member-offer-toolbar .kind-tabs {
  gap: 7px;
  display: flex;
}

.member-offer-toolbar .kind-tabs button {
  border-radius: 9px;
  min-height: 36px;
  padding: 0 14px;
  font-weight: 750;
}

.member-offer-toolbar > span {
  color: var(--ui-muted);
  flex: none;
  font-size: 11px;
}

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

.member-offer-card {
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 202px;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 7px 22px #1e293b14;
  border: 1px solid #0000 !important;
  border-radius: 16px !important;
  padding: 19px 20px !important;
}

.member-offer-card.recharge {
  color: #075f48 !important;
  background: linear-gradient(145deg, #e7fff6 0%, #c9f8e7 100%) !important;
}

.member-offer-card.benefit {
  color: #66309a !important;
  background: linear-gradient(145deg, #f5ebff 0%, #e8d4ff 100%) !important;
}

.member-offer-card.pass {
  color: #8b4b05 !important;
  background: linear-gradient(145deg, #fff3df 0%, #ffe0aa 100%) !important;
}

.member-offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #1e293b24;
}

.member-offer-card.selected {
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .17),
    0 12px 28px #1e293b24;
  border-color: var(--ui-accent) !important;
}

.member-offer-kind {
  background: #ffffffb3;
  border-radius: 999px;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.member-offer-card > strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  margin-top: 12px;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.3;
  overflow: hidden;
}

.member-offer-card > p {
  opacity: .76;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 34px;
  margin: 7px 0 11px;
  font-size: 11px;
  line-height: 1.55;
  display: -webkit-box;
  overflow: hidden;
}

.member-offer-card > div {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  display: flex;
}

.member-offer-card > div small {
  opacity: .7;
  font-size: 10px;
}

.member-offer-card > div b {
  letter-spacing: -.6px;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
}

.member-offer-card > em {
  opacity: .7;
  margin-top: 8px;
  font-size: 10px;
  font-style: normal;
}

.member-offer-card > i {
  background: var(--ui-accent);
  width: 26px;
  height: 26px;
  color: var(--ui-on-accent);
  border-radius: 50%;
  place-items: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  display: grid;
  position: absolute;
  top: 14px;
  right: 14px;
}

.member-offer-empty {
  border: 1px dashed var(--ui-border);
  min-height: 220px;
  color: var(--ui-muted);
  border-radius: 14px;
  grid-column: 1 / -1;
  place-items: center;
  display: grid;
}

.member-business-settlement {
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.member-settlement-title {
  border-bottom: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
  padding: 0 2px 9px;
  display: flex;
}

.member-settlement-title span {
  font-size: 15px;
  font-weight: 850;
}

.member-settlement-title b {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
}

.member-business-settlement .customer-box {
  padding: 0;
}

.member-business-settlement .member-card {
  border: 1px solid rgba(var(--ui-accent-rgb), .26);
  background: var(--ui-accent-soft);
  border-radius: 11px;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  display: grid;
}

.quick-cashier .member-card {
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
}

.member-business-settlement .member-card > span {
  background: var(--ui-accent);
  width: 36px;
  height: 36px;
  color: var(--ui-on-accent);
  border-radius: 50%;
  place-items: center;
  font-weight: 850;
  display: grid;
}

.member-business-settlement .member-card > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.member-business-settlement .member-card small {
  color: var(--ui-muted);
  font-size: 9px;
}

.member-business-settlement .member-card > button {
  min-height: 30px;
  color: var(--ui-accent);
  background: none;
  border: 0;
  font-size: 10px;
  font-weight: 750;
}

.member-selected-offer {
  border: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-panel) 96%, var(--ui-accent) 4%);
  border-radius: 11px;
  gap: 4px;
  padding: 11px 12px;
  display: grid;
}

.member-selected-offer > span, .member-custom-recharge > span, .member-business-payments > span {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 700;
}

.member-selected-offer > strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 850;
  overflow: hidden;
}

.member-selected-offer > small {
  color: var(--ui-accent);
  font-size: 10px;
}

.member-custom-recharge {
  gap: 6px;
  display: grid;
}

.member-custom-recharge > div {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel);
  border-radius: 11px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  height: 50px;
  padding: 0 12px;
  display: grid;
}

.member-custom-recharge > div:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .12);
}

.member-custom-recharge b {
  font-size: 21px;
}

.member-custom-recharge input {
  outline: 0;
  width: 100%;
  height: 46px;
  font-weight: 850;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 23px !important;
}

.member-custom-recharge > small {
  color: var(--ui-muted);
  font-size: 9px;
}

.modern-pos .member-business-payments {
  padding: 0;
}

.modern-pos .member-business-payments > div {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.modern-pos .member-business-payments button {
  border-radius: 8px;
  height: 36px;
  font-size: 10px;
}

.member-business-summary {
  border: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-panel) 97%, var(--ui-text) 3%);
  border-radius: 10px;
  gap: 5px;
  padding: 9px 11px;
  display: grid;
}

.member-business-summary > div {
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  display: flex;
}

.member-business-summary .gift b {
  color: #0c9a6c;
}

.member-business-total {
  border-top: 1px solid var(--ui-border);
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding: 11px 2px 0;
  display: flex;
}

.member-business-total span {
  color: var(--ui-muted);
  font-size: 11px;
}

.member-business-total strong {
  color: var(--ui-text);
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
}

.member-business-settlement .business-message {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-radius: 8px;
  margin: 0;
  padding: 7px 9px;
  font-size: 10px;
}

.member-business-settlement .checkout-submit {
  border-radius: 10px;
  flex: none;
  height: 46px;
  font-size: 14px;
  font-weight: 850;
}

:where(.checkout-submit, .pos-confirm, .confirm-recharge) {
  z-index: 18;
  width: 100%;
  margin-top: 10px;
  position: sticky;
  bottom: 14px;
  box-shadow: 0 -8px 18px color-mix(in srgb, var(--ui-panel-solid) 82%, transparent),
    0 10px 26px rgba(var(--ui-accent-rgb), .24) !important;
}

@media (max-width: 650px) {
  :where(.checkout-submit, .pos-confirm, .confirm-recharge) {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

@media print {
  :where(.checkout-submit, .pos-confirm, .confirm-recharge) {
    position: static;
    box-shadow: none !important;
  }
}

@media (max-width: 850px) {
  .member-offer-grid {
    grid-template-columns: 1fr;
  }

  .member-offer-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

.room-cashier {
  position: relative;
}

.room-cashier > .room-board {
  min-width: 0;
  min-height: 610px;
}

.room-cashier.settlement-collapsed {
  grid-template-columns: minmax(0, 1fr) !important;
}

.room-cashier.settlement-collapsed > .room-board {
  grid-column: 1;
  width: 100%;
}

.room-cashier.settlement-collapsed > .room-session-panel {
  z-index: 32;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  top: 18px;
  left: -12px;
  padding: 0 !important;
  position: absolute !important;
}

.room-cashier.settlement-collapsed > .room-session-panel > :not(.room-settlement-toggle) {
  visibility: inherit;
}

.room-cashier.settlement-collapsed .room-settlement-toggle {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border));
  background: var(--ui-panel-solid);
  width: 54px;
  min-width: 54px;
  height: 40px;
  min-height: 40px;
  color: var(--ui-accent);
  box-shadow: 0 8px 22px rgba(var(--ui-accent-rgb), .14);
  white-space: nowrap;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
}

.room-cashier.settlement-collapsed .room-settlement-toggle:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.room-cashier .room-grid {
  align-content: start;
}

.room-cashier .room-board-empty {
  place-items: center;
  min-height: 220px;
  display: grid;
}

@media (max-width: 1150px) {
  .room-cashier.settlement-collapsed > .room-session-panel {
    top: 10px;
    left: 10px;
  }
}

.room-cashier.settlement-collapsed > .room-session-panel {
  top: 50%;
  left: -18px;
  transform: translateY(-50%);
}

.room-cashier.settlement-collapsed .room-settlement-toggle {
  background: var(--ui-panel-solid);
  letter-spacing: 3px;
  writing-mode: vertical-rl;
  border-radius: 10px;
  width: 42px;
  min-width: 42px;
  height: 104px;
  min-height: 104px;
  font-size: 13px;
  line-height: 1.25;
}

.room-card-status.occupied, .room-card-status.editable.cleaning {
  box-sizing: border-box;
  justify-content: center;
  width: 68px;
  min-width: 68px;
  height: 26px;
  color: #fff !important;
  border: 1px solid #0000 !important;
  border-radius: 8px !important;
  min-height: 26px !important;
  padding: 0 7px !important;
}

.room-card-status.occupied {
  background: #c94c40 !important;
  border-color: #b93f35 !important;
}

.room-card-status.editable.cleaning {
  position: relative;
  background: #c99312 !important;
  border-color: #a97608 !important;
}

.room-card-status.occupied > i, .room-card-status.editable.cleaning > i {
  display: none;
}

.room-card-status.occupied > b, .room-card-status.editable.cleaning select {
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.room-card-status.occupied > b {
  text-align: center;
  width: 100%;
}

.room-card-status.editable.cleaning select {
  appearance: none;
  text-align: center;
  text-align-last: center;
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 24px;
  color: #fff !important;
  background: none !important;
  min-height: 24px !important;
  padding: 0 12px !important;
}

.room-card-status.editable.cleaning:after {
  content: "⌄";
  color: #fff;
  pointer-events: none;
  font-size: 10px;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-58%);
}

.room-card.available > footer button.primary:first-child, .room-card.reserved > footer button.primary:first-child {
  color: #fff !important;
  background: #0b684d !important;
  border-color: #0b6048 !important;
}

.room-card.available > footer button.primary:first-child:not(:disabled):hover, .room-card.reserved > footer button.primary:first-child:not(:disabled):hover {
  color: #fff !important;
  background: #07553e !important;
}

.room-card.occupied > footer button:first-child {
  background: color-mix(in srgb,
    var(--ui-accent) 18%,
    var(--ui-panel-solid)) !important;
  color: color-mix(in srgb, var(--ui-accent) 88%, #052c20) !important;
}

.room-card.occupied > footer button:first-child:not(:disabled):hover {
  background: color-mix(in srgb,
    var(--ui-accent) 26%,
    var(--ui-panel-solid)) !important;
}

@media (max-width: 720px) {
  .room-cashier.settlement-collapsed > .room-session-panel {
    top: 10px;
    left: 10px;
    transform: none;
  }

  .room-cashier.settlement-collapsed .room-settlement-toggle {
    letter-spacing: 0;
    writing-mode: horizontal-tb;
    width: 66px;
    min-width: 66px;
    height: 36px;
    min-height: 36px;
  }
}

.member-offer-card {
  min-height: 216px;
}

.member-offer-card > strong {
  margin-top: 0;
  font-size: 17px;
}

.member-offer-card > div {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
  margin-top: 13px;
}

.member-offer-card > div small, .member-offer-card > div b {
  text-align: left;
  align-self: flex-start;
  width: 100%;
}

.member-offer-card > div b {
  font-size: 24px;
}

.member-offer-card.selected {
  box-shadow: 0 9px 24px rgba(var(--ui-accent-rgb), .13);
  border-color: color-mix(in srgb,
    var(--ui-accent) 62%,
    var(--ui-border)) !important;
  background: color-mix(in srgb,
    var(--ui-accent-soft) 82%,
    var(--ui-panel-solid)) !important;
  color: var(--ui-text) !important;
}

.room-card-status.occupied > b, .room-card-status.editable.cleaning select {
  font-size: 9px !important;
}

.room-card-status.editable.cleaning select option {
  font-size: 9px;
  background: var(--ui-panel-solid) !important;
  color: var(--ui-text) !important;
}

.room-grid > .room-card.checkout-selected, .room-grid > .room-card.checkout-selected:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 78%, #092b21) !important;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--ui-accent) 88%, #092d23),
    color-mix(in srgb, var(--ui-accent-hover) 92%, #061d17)) !important;
  color: var(--ui-on-accent) !important;
  box-shadow: 0 13px 28px rgba(var(--ui-accent-rgb), .25) !important;
}

.room-card.checkout-selected .room-card-heading > strong, .room-card.checkout-selected .room-card-capacity span, .room-card.checkout-selected .room-card-capacity b, .room-card.checkout-selected .room-card-summary {
  color: var(--ui-on-accent) !important;
}

.room-card.checkout-selected .room-card-capacity span, .room-card.checkout-selected .room-card-summary {
  opacity: .82;
}

.room-card.checkout-selected .room-card-summary {
  border-top-color: color-mix(in srgb, var(--ui-on-accent) 24%, transparent);
}

.room-card.checkout-selected .room-card-summary > i {
  background: color-mix(in srgb, var(--ui-on-accent) 65%, transparent);
}

.room-card.checkout-selected > footer {
  border-top-color: color-mix(in srgb,
    var(--ui-on-accent) 24%,
    transparent) !important;
  background: color-mix(in srgb,
    var(--ui-on-accent) 8%,
    transparent) !important;
}

.room-card.checkout-selected > footer button, .room-card.checkout-selected > footer button.primary {
  border-right-color: color-mix(in srgb,
    var(--ui-on-accent) 22%,
    transparent) !important;
  color: var(--ui-on-accent) !important;
  background: none !important;
}

.room-card.checkout-selected > footer button.primary {
  background: color-mix(in srgb,
    var(--ui-on-accent) 15%,
    transparent) !important;
  font-weight: 850 !important;
}

.room-card.checkout-selected > footer button:not(:disabled):hover {
  background: color-mix(in srgb,
    var(--ui-on-accent) 21%,
    transparent) !important;
  color: var(--ui-on-accent) !important;
}

.member-offer-grid {
  margin-top: -7px;
}

.member-offer-card {
  min-height: 210px;
  padding: 12px 14px 10px !important;
}

.member-offer-detail-trigger, .member-offer-detail-trigger > b {
  font-size: 10px;
}

.member-selected-offer {
  border-color: color-mix(in srgb, var(--ui-accent) 24%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-accent) 11%, var(--ui-panel-solid));
}

.room-cashier > .room-settlement-toggle {
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  writing-mode: horizontal-tb;
  flex-direction: column;
  gap: 6px;
}

.room-settlement-toggle-label {
  color: inherit;
  font: inherit;
  letter-spacing: 2px;
  pointer-events: none;
  writing-mode: vertical-rl;
  line-height: 1;
  display: block;
}

.room-settlement-toggle-icon {
  width: 20px;
  height: 20px;
  color: inherit;
  letter-spacing: 0;
  pointer-events: none;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  display: grid;
}

.room-cashier > .room-settlement-toggle:hover, .room-cashier > .room-settlement-toggle:focus-visible {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  box-shadow: 0 10px 25px rgba(var(--ui-accent-rgb), .2);
  outline: 0;
}

@media (min-width: 1151px) {
  .room-cashier > .room-settlement-toggle {
    top: 305px;
    transform: translateY(-50%);
  }
}

@media (max-width: 1150px) {
  .room-cashier > .room-settlement-toggle {
    flex-direction: row;
    gap: 5px;
  }

  .room-settlement-toggle-label {
    letter-spacing: 0;
    writing-mode: horizontal-tb;
  }
}

.room-cashier > .room-session-panel {
  opacity: 1;
  visibility: visible;
  will-change: transform, opacity;
  transition: transform .24s cubic-bezier(.22, .75, .2, 1), opacity .18s, visibility linear;
  transform: translateX(0);
}

.room-cashier.settlement-collapsed > .room-session-panel {
  z-index: 30;
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-radius: 14px;
  width: 410px;
  min-width: 410px;
  height: auto;
  min-height: 610px;
  transition: transform .24s cubic-bezier(.4, 0, .6, 1), opacity .18s, visibility 0s linear .24s;
  padding: 12px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: translateX(calc(-100% - 28px)) !important;
}

.room-cashier > .room-settlement-toggle {
  z-index: 36;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 32%, var(--ui-border));
  background: linear-gradient(180deg,
    var(--ui-panel-solid),
    color-mix(in srgb, var(--ui-accent-soft) 52%, var(--ui-panel-solid)));
  width: 48px;
  min-width: 48px;
  height: 112px;
  min-height: 112px;
  color: var(--ui-accent-hover);
  box-shadow: 0 10px 26px rgba(var(--ui-accent-rgb), .14),
    inset 0 1px 0 color-mix(in srgb, var(--ui-panel-solid) 82%, transparent);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  writing-mode: horizontal-tb;
  border-radius: 14px;
  outline: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  display: inline-flex;
  position: absolute;
  top: 305px;
  overflow: hidden;
  transform: translateY(-50%);
}

.room-cashier.settlement-collapsed > .room-settlement-toggle {
  left: -20px;
}

.room-cashier:not(.settlement-collapsed) > .room-settlement-toggle {
  left: 386px;
}

.room-cashier > .room-settlement-toggle:before {
  content: "";
  background: var(--ui-accent);
  opacity: .72;
  pointer-events: none;
  border-radius: 0 3px 3px 0;
  width: 3px;
  position: absolute;
  inset: 10px auto 10px 0;
}

.room-cashier > .room-settlement-toggle .room-settlement-toggle-label {
  color: inherit;
  letter-spacing: 3px;
  pointer-events: none;
  text-orientation: upright;
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  display: block;
}

.room-cashier > .room-settlement-toggle .room-settlement-toggle-icon {
  pointer-events: none;
  flex: 0 0 14px;
  width: 18px;
  height: 14px;
  display: block;
  position: relative;
}

.room-cashier > .room-settlement-toggle:hover, .room-cashier > .room-settlement-toggle:focus-visible {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-hover);
  box-shadow: 0 12px 30px rgba(var(--ui-accent-rgb), .2);
}

.room-cashier > .room-settlement-toggle:active:not(:disabled) {
  transform: translateY(-50%)scale(.97) !important;
}

@media (max-width: 1150px) {
  .room-cashier > .room-settlement-toggle {
    flex-direction: row;
    gap: 7px;
    width: 78px;
    min-width: 78px;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    top: 10px;
    transform: none;
  }

  .room-cashier.settlement-collapsed > .room-settlement-toggle {
    left: 10px;
    right: auto;
  }

  .room-cashier:not(.settlement-collapsed) > .room-settlement-toggle {
    left: auto;
    right: 10px;
  }

  .room-cashier > .room-settlement-toggle .room-settlement-toggle-label {
    letter-spacing: 0;
    text-orientation: mixed;
    writing-mode: horizontal-tb;
  }

  .room-cashier > .room-settlement-toggle:active:not(:disabled) {
    transform: scale(.97) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-cashier > .room-session-panel {
    transition: none;
  }
}

.room-card-status.editable.available select, .room-card-status.occupied > b, .room-card-status.editable.cleaning select {
  font-stretch: normal;
  letter-spacing: 0 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

@media (min-width: 1151px) {
  .room-cashier.settlement-collapsed > .room-settlement-toggle {
    padding: 10px 0 31px;
  }

  .room-cashier.settlement-collapsed > .room-settlement-toggle .room-settlement-toggle-icon {
    position: absolute;
    bottom: 11px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.room-card-status.editable.cleaning {
  padding-left: 3px !important;
  padding-right: 3px !important;
}

.room-card-status.editable.cleaning select {
  text-align: center;
  text-align-last: center;
  padding: 0 17px 0 1px !important;
  font-size: 12px !important;
}

.room-card-status.editable.cleaning:after {
  right: 5px;
}

.room-card-status.editable.cleaning select option {
  background: var(--ui-panel-solid) !important;
  color: var(--ui-text) !important;
  font-size: 12px !important;
}

.room-card-status.editable.available {
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 68px;
  min-width: 68px;
  height: 28px;
  position: relative;
  color: #fff !important;
  background: #16845e !important;
  border: 1px solid #0f6e50 !important;
  border-radius: 8px !important;
  gap: 0 !important;
  min-height: 28px !important;
  padding: 0 3px !important;
}

.room-card-status.editable.available > i {
  display: none !important;
}

.room-card-status.editable.available select {
  appearance: none;
  text-align: center;
  text-align-last: center;
  width: 100%;
  min-width: 0;
  height: 26px;
  margin: 0;
  display: block;
  color: #fff !important;
  background: none !important;
  border: 0 !important;
  min-height: 26px !important;
  padding: 0 17px 0 1px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 26px !important;
}

.room-card-status.editable.available:after {
  content: "⌄";
  color: #fff;
  pointer-events: none;
  font-size: 10px;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-58%);
}

.room-card-status.editable.available select option {
  background: var(--ui-panel-solid) !important;
  color: var(--ui-text) !important;
  font-size: 12px !important;
}

.checkout-signature {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 14px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.checkout-signature > button {
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent-soft);
  min-height: 42px;
  color: var(--ui-accent);
  border-radius: 10px;
  font-weight: 800;
}

.checkout-signature header {
  align-items: center;
  gap: 10px;
  display: flex;
}

.checkout-signature header small {
  color: var(--ui-muted);
}

.checkout-signature header button {
  color: var(--ui-danger);
  background: none;
  border: 0;
  margin-left: auto;
}

.checkout-signature-pad {
  border: 1px dashed var(--ui-border);
  background: var(--ui-bg);
  height: 180px;
  color: var(--ui-text);
  touch-action: none;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.checkout-signature-pad svg {
  width: 100%;
  height: 100%;
}

.checkout-signature-pad span {
  color: var(--ui-muted);
  pointer-events: none;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.room-card .room-time-alert {
  box-sizing: border-box;
  white-space: nowrap;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 20px;
  margin: 7px 0 0 auto;
  line-height: 1.2;
  display: flex;
  color: #a9342b !important;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
}

.modern-pos .room-session-panel .checkout-member-primary > small {
  color: color-mix(in srgb, var(--ui-text) 72%, var(--ui-muted) 28%);
  font-weight: 650;
}

.modern-pos .room-checkout-line {
  background: color-mix(in srgb, var(--ui-panel) 95%, var(--ui-accent) 5%);
  border-radius: 8px;
  grid-template-columns: minmax(0, 1fr) auto 88px;
  gap: 7px;
  padding: 8px 6px;
}

.modern-pos .room-checkout-line > .checkout-line-identity {
  align-self: center;
}

.modern-pos .room-checkout-line .checkout-line-name {
  color: color-mix(in srgb, var(--ui-text) 96%, var(--ui-accent) 4%);
  font-weight: 850;
}

.modern-pos .room-checkout-line .checkout-line-code {
  color: color-mix(in srgb, var(--ui-text) 72%, var(--ui-muted) 28%);
  font-weight: 700;
}

.modern-pos .room-line-price {
  align-content: center;
  justify-items: end;
  gap: 3px;
  min-width: 0;
  display: grid;
}

.modern-pos .room-line-price .unit-price-control, .modern-pos .room-line-price .checkout-line-locked-price {
  box-sizing: border-box;
  width: 84px;
  min-width: 84px;
}

.modern-pos .room-line-price > small {
  max-width: 88px;
  color: color-mix(in srgb, var(--ui-text) 78%, var(--ui-muted) 22%);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.2;
  overflow: hidden;
}

:root[data-theme="ink"] .modern-pos .room-checkout-line {
  border-color: color-mix(in srgb, var(--ui-border) 82%, var(--ui-accent) 18%);
  background: color-mix(in srgb, var(--ui-panel) 90%, var(--ui-accent) 10%);
}

:root[data-theme="ink"] .room-card .room-time-alert {
  background: color-mix(in srgb, #7d251f 36%, var(--ui-panel)) !important;
  color: #ffafa6 !important;
}

:root[data-theme="ink"] .modern-pos .room-checkout-line .checkout-line-name {
  color: color-mix(in srgb, var(--ui-text) 94%, white 6%);
}

:root[data-theme="ink"] .modern-pos .room-checkout-line .checkout-line-code, :root[data-theme="ink"] .modern-pos .room-line-price > small {
  color: color-mix(in srgb, var(--ui-text) 75%, var(--ui-muted) 25%);
}

:root[data-theme="ink"] .modern-pos .unit-price-control.changed {
  border-color: color-mix(in srgb, #52d6a2 60%, var(--ui-border));
  background: color-mix(in srgb, #123c31 64%, var(--ui-panel-solid));
}

@media (max-width: 1150px) {
  .modern-pos .room-checkout-line {
    grid-template-columns: minmax(0, 1fr) auto 84px;
    gap: 5px;
  }
}

/* [project]/apps/admin/app/operations.css [app-client] (css) */
.ops-shell, .ops-login {
  color: #17231d;
  background: #f3f5f2;
  min-height: 100vh;
  font-family: Inter, PingFang SC, Microsoft YaHei, sans-serif;
}

.ops-shell {
  grid-template-columns: 224px minmax(0, 1fr);
  display: grid;
}

.ops-sidebar {
  color: #eaf2ed;
  background: #11271d;
  border-right: 1px solid #244034;
  flex-direction: column;
  height: 100vh;
  padding: 24px 14px 16px;
  display: flex;
  position: sticky;
  top: 0;
}

.ops-brand {
  align-items: center;
  gap: 11px;
  padding: 0 8px 20px;
  display: flex;
}

.ops-brand > i, .ops-login-logo {
  color: #143224;
  background: #c5ef68;
  border-radius: 11px;
  place-items: center;
  width: 37px;
  height: 37px;
  font-style: normal;
  font-weight: 800;
  display: grid;
  box-shadow: 0 8px 24px #c5ef6829;
}

.ops-brand > i img, .ops-login-logo img {
  border-radius: inherit;
  object-fit: contain;
  background: #fff;
  width: 100%;
  height: 100%;
}

.ops-channel-center {
  gap: 18px;
  display: grid;
}

.ops-channel-metrics, .ops-channel-grid, .ops-channel-ledgers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.ops-channel-metrics article, .ops-channel-grid form, .ops-channel-panel, .ops-channel-ledgers > div {
  border: 1px solid var(--ops-border, #d9e1dc);
  background: var(--ops-card, #fff);
  border-radius: 16px;
  gap: 10px;
  padding: 18px;
  display: grid;
}

.ops-channel-metrics article b {
  font-size: 24px;
}

.ops-channel-grid form input, .ops-channel-grid form select, .ops-channel-inline-form input, .ops-channel-inline-form select {
  min-height: 44px;
}

.ops-channel-inline-form {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  align-items: end;
  gap: 10px;
  display: grid;
}

.ops-channel-rules {
  gap: 8px;
  display: grid;
}

.ops-channel-rules > span, .ops-channel-ledgers p {
  border-bottom: 1px solid var(--ops-border, #e4e9e6);
  grid-template-columns: minmax(160px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  display: grid;
}

.ops-channel-actions {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.ops-channel-payment-qr {
  border: 1px solid var(--ops-border, #e4e9e6);
  background: var(--ops-card, #fff);
  border-radius: 14px;
  justify-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 14px;
  display: inline-grid;
}

.ops-channel-payment-qr img {
  width: 240px;
  max-width: 100%;
  height: auto;
}

.ops-channel-ledgers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .ops-channel-metrics, .ops-channel-grid, .ops-channel-ledgers, .ops-channel-inline-form {
    grid-template-columns: 1fr;
  }
}

.ops-brand span, .ops-brand b, .ops-brand small {
  display: block;
}

.ops-brand small {
  color: #87a293;
  letter-spacing: .14em;
  margin-top: 3px;
  font-size: 9px;
}

.ops-scope {
  background: #173226;
  border: 1px solid #2d493b;
  border-radius: 10px;
  margin: 0 3px 17px;
  padding: 12px 13px;
}

.ops-scope span, .ops-scope b {
  display: block;
}

.ops-scope span {
  color: #7f9b8c;
  font-size: 9px;
}

.ops-scope b {
  margin-top: 5px;
  font-size: 11px;
}

.ops-sidebar nav {
  gap: 3px;
  display: grid;
}

.ops-sidebar nav button {
  color: #9db1a6;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  font-size: 11px;
  display: flex;
}

.ops-sidebar nav button:hover {
  color: #fff;
  background: #1b392b;
}

.ops-sidebar nav button.active {
  color: #142a20;
  background: #c5ef68;
  font-weight: 700;
}

.ops-sidebar nav i {
  opacity: .82;
  border: 1px solid;
  border-radius: 7px;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 9px;
  font-style: normal;
  display: grid;
}

.ops-user {
  border-top: 1px solid #294337;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding: 14px 8px 0;
  display: grid;
}

.ops-user > span {
  color: #173125;
  background: #d9eee1;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.ops-user b, .ops-user small {
  display: block;
}

.ops-user b {
  font-size: 10px;
}

.ops-user small {
  color: #7d9689;
  margin-top: 2px;
  font-size: 8px;
}

.ops-user button {
  color: #7f9b8c;
  background: none;
  border: 0;
  padding: 4px;
  font-size: 9px;
}

.ops-workspace {
  min-width: 0;
}

.ops-topbar {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #ffffffe0;
  border-bottom: 1px solid #dde3df;
  justify-content: space-between;
  align-items: center;
  height: 77px;
  padding: 0 30px;
  display: flex;
}

.ops-topbar small, .ops-hero small, .ops-binding-card > small, .ops-plan-head small, .ops-modal header small {
  color: #52665b;
  letter-spacing: .18em;
  font-size: 8px;
  font-weight: 700;
}

.ops-topbar h1 {
  letter-spacing: .02em;
  margin: 4px 0 0;
  font-size: 19px;
}

.ops-top-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ops-top-actions button {
  color: #456053;
  background: #fff;
  border: 1px solid #d8e0db;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 10px;
}

.ops-live {
  color: #27885a;
  font-size: 9px;
}

.ops-live:before {
  content: "";
  background: #42c47a;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  display: inline-block;
  box-shadow: 0 0 0 4px #e0f5e9;
}

.ops-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 25px 30px 44px;
}

.ops-notice {
  color: #165b3c;
  background: #e7f5ec;
  border: 1px solid #badfc8;
  border-radius: 9px;
  justify-content: space-between;
  margin: 14px 30px 0;
  padding: 10px 13px;
  font-size: 10px;
  display: flex;
}

.ops-notice button {
  color: inherit;
  background: none;
  border: 0;
}

.ops-primary {
  box-shadow: 0 6px 16px #176b4d24;
  color: #f8fff9 !important;
  background: #176b4d !important;
  border: 1px solid #176b4d !important;
}

.ops-hero {
  color: #f3fbf6;
  background: linear-gradient(125deg, #174b36, #0d2d20 68%, #1d5e41);
  border-radius: 16px;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 145px;
  padding: 28px 31px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px #14322424;
}

.ops-hero:after {
  content: "";
  border: 55px solid #c5ef681a;
  border-radius: 50%;
  width: 260px;
  height: 260px;
  position: absolute;
  top: -120px;
  right: -50px;
}

.ops-hero h2 {
  margin: 8px 0 6px;
  font-size: 25px;
}

.ops-hero p {
  color: #a9c4b6;
  margin: 0;
  font-size: 11px;
}

.ops-hero button {
  z-index: 1;
  color: #183126;
  background: #c5ef68;
  border: 0;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 10px;
  font-weight: 700;
}

.ops-metrics {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 15px 0;
  display: grid;
}

.ops-metrics button {
  text-align: left;
  background: #fff;
  border: 1px solid #dde4df;
  border-radius: 12px;
  padding: 17px 18px;
  display: grid;
  box-shadow: 0 5px 18px #1a312509;
}

.ops-metrics i {
  color: #9ca9a2;
  font-size: 8px;
  font-style: normal;
}

.ops-metrics span {
  color: #637269;
  margin-top: 11px;
  font-size: 10px;
}

.ops-metrics strong {
  margin: 5px 0 9px;
  font-size: 23px;
}

.ops-metrics small {
  color: #2d7c59;
  font-size: 8px;
}

.ops-grid-two {
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 14px;
  display: grid;
}

.ops-panel {
  background: #fff;
  border: 1px solid #dde4df;
  border-radius: 13px;
  padding: 18px;
  box-shadow: 0 5px 18px #1a312509;
}

.ops-panel-title h3 {
  margin: 0;
  font-size: 13px;
}

.ops-panel-title p {
  color: #8b9891;
  margin: 4px 0 0;
  font-size: 9px;
}

.ops-ledger-mini > div {
  border-top: 1px solid #edf0ee;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 2px;
  display: grid;
}

.ops-ledger-mini i {
  border-radius: 8px;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 9px;
  font-style: normal;
  display: grid;
}

.ops-ledger-mini i.in {
  color: #177048;
  background: #e3f5eb;
}

.ops-ledger-mini i.out {
  color: #9a5d26;
  background: #fbefdf;
}

.ops-ledger-mini b, .ops-ledger-mini small {
  display: block;
}

.ops-ledger-mini small {
  color: #8c9791;
  margin-top: 3px;
  font-size: 8px;
}

.ops-ledger-mini strong {
  font-size: 10px;
}

.ops-health {
  grid-template-columns: 130px 1fr;
  align-items: end;
  display: grid;
}

.ops-health .ops-panel-title {
  grid-column: 1 / -1;
}

.ops-health-ring {
  text-align: center;
  background: radial-gradient(circle, #fff 54%, transparent 56%),
    conic-gradient(#79bd73 0 93%, #e9eeea 93%);
  border-radius: 50%;
  place-content: center;
  width: 112px;
  height: 112px;
  margin-top: 16px;
  display: grid;
}

.ops-health-ring span {
  color: #829087;
  font-size: 8px;
}

.ops-health ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ops-health li {
  border-bottom: 1px solid #edf0ee;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 9px;
  display: flex;
}

.ops-health li span {
  color: #7e8b84;
}

.ops-toolbar {
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.ops-toolbar > div:last-child {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ops-toolbar input {
  border: 1px solid #dbe2dd;
  border-radius: 8px;
  width: 250px;
  padding: 8px 10px;
}

.ops-toolbar > div > b {
  color: #708078;
  font-size: 9px;
}

.ops-table-panel {
  overflow: hidden;
}

.ops-table {
  overflow-x: auto;
}

.ops-tr {
  border-top: 1px solid #e9eeeb;
  align-items: center;
  min-width: 1000px;
  display: grid;
}

.ops-merchants .ops-tr {
  grid-template-columns: 1.15fr 1.25fr .8fr .95fr .9fr 1.05fr;
}

.ops-agencies .ops-tr, .ops-ledger .ops-tr {
  grid-template-columns: 1.1fr .9fr .9fr .7fr .8fr 1.4fr;
}

.ops-tr > span {
  min-width: 0;
  padding: 11px 9px;
  font-size: 9px;
}

.ops-tr:first-child {
  color: #78877f;
  background: #f6f8f6;
  border-radius: 8px;
}

.ops-tr:first-child > span {
  padding: 8px 9px;
  font-weight: 600;
}

.ops-tr b, .ops-tr small {
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.ops-tr b {
  font-size: 10px;
}

.ops-tr small {
  color: #8a9690;
  margin-top: 4px;
  font-size: 8px;
}

.ops-tr em {
  color: #326c50;
  background: #e5f2e9;
  border-radius: 4px;
  margin-left: 5px;
  padding: 2px 5px;
  font-size: 7px;
  font-style: normal;
  display: inline-block;
}

.ops-tr em.ops-frozen-tag {
  color: #6f7873;
  background: #ecefed;
  margin-left: 6px;
}

.ops-sub-row {
  color: #a4ada8 !important;
}

.ops-warning {
  color: #b56826 !important;
}

.ops-row-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.ops-row-actions button {
  color: #276748;
  background: #edf6f0;
  border: 1px solid #d1e6d8;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 8px;
}

.ops-row-actions button.danger {
  color: #a84d45;
  background: #fff1ef;
  border-color: #efd4d0;
}

.ops-row-actions em.ok {
  color: #277451;
}

.ops-row-actions em.off {
  color: #a65b4f;
  background: #f9e8e5;
}

.ops-empty {
  color: #89958f;
  text-align: center;
  font-size: 10px;
  padding: 24px !important;
}

.ops-binding-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: 14px;
  display: grid;
}

.ops-binding-card h2 {
  margin: 8px 0;
  font-size: 20px;
}

.ops-binding-card > p {
  color: #75837b;
  max-width: 650px;
  font-size: 10px;
  line-height: 1.7;
}

.ops-binding-card > form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 22px;
  display: grid;
}

.ops-binding-card input, .ops-binding-card select {
  border: 1px solid #d5ded8;
  border-radius: 8px;
  padding: 10px 11px;
}

.ops-pool-result {
  background: #f5faf6;
  border: 1px solid #cfe2d5;
  border-radius: 11px;
  margin-top: 18px;
  padding: 16px;
}

.ops-pool-result > div {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ops-pool-result i {
  color: #fff;
  background: #176b4d;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-style: normal;
  display: grid;
}

.ops-pool-result b, .ops-pool-result small {
  display: block;
}

.ops-pool-result small {
  color: #7e8c84;
  margin-top: 3px;
  font-size: 8px;
}

.ops-pool-result ul {
  gap: 5px;
  padding: 0;
  list-style: none;
  display: flex;
}

.ops-pool-result li {
  color: #4f6b5b;
  background: #e8f2eb;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 8px;
}

.ops-pool-result label {
  gap: 4px;
  margin: 10px 0;
  font-size: 9px;
  display: grid;
}

.ops-search-empty {
  color: #8b6e45;
  background: #fff7e8;
  border-radius: 8px;
  margin-top: 15px;
  padding: 15px;
  font-size: 9px;
}

.ops-binding-rules ol {
  counter-reset: binding;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.ops-binding-rules li {
  counter-increment: binding;
  padding-left: 36px;
  position: relative;
}

.ops-binding-rules li:before {
  content: "0" counter(binding);
  color: #2c704f;
  font-size: 9px;
  font-weight: 800;
  position: absolute;
  top: 0;
  left: 0;
}

.ops-binding-rules b, .ops-binding-rules span {
  display: block;
}

.ops-binding-rules span {
  color: #85928b;
  margin-top: 3px;
  font-size: 8px;
  line-height: 1.5;
}

.ops-plan-head {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 16px;
  display: flex;
}

.ops-plan-head h2 {
  margin: 6px 0;
  font-size: 20px;
}

.ops-plan-head p {
  color: #7b8981;
  margin: 0;
  font-size: 10px;
}

.ops-plan-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  display: grid;
}

.ops-plan-grid article {
  background: #fff;
  border: 1px solid #dce4df;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 7px 22px #1833250a;
}

.ops-plan-grid article:nth-child(2) {
  border-top: 3px solid #4f9f6e;
}

.ops-plan-grid article:nth-child(3) {
  color: #eff8f2;
  background: #183326;
  border-color: #183326;
}

.ops-plan-grid header, .ops-plan-grid footer, .ops-plan-grid li {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ops-plan-grid header span {
  color: #78877f;
  letter-spacing: .14em;
  font-size: 8px;
}

.ops-plan-grid header em {
  color: #31704f;
  background: #e6f2e9;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 7px;
  font-style: normal;
}

.ops-plan-grid h3 {
  margin: 19px 0 6px;
  font-size: 19px;
}

.ops-plan-grid p {
  color: #809087;
  min-height: 32px;
  font-size: 9px;
  line-height: 1.5;
}

.ops-plan-grid ul {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.ops-plan-grid li {
  border-top: 1px solid #e8edea;
  gap: 6px;
  padding: 9px 0;
  font-size: 8px;
}

.ops-plan-grid li span {
  color: #819087;
}

.ops-plan-grid footer {
  border-top: 1px solid #e8edea;
  padding-top: 12px;
  font-size: 8px;
}

.ops-plan-grid article:nth-child(3) p, .ops-plan-grid article:nth-child(3) span, .ops-plan-grid article:nth-child(3) small {
  color: #9db7a9;
}

.ops-plan-grid article:nth-child(3) li, .ops-plan-grid article:nth-child(3) footer {
  border-color: #2f4b3c;
}

.ops-sms-rules article {
  border-top: 1px solid #e9eeeb;
  grid-template-columns: 35px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  display: grid;
}

.ops-sms-rules i {
  color: #276e4d;
  background: #e5f3e9;
  border-radius: 9px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-style: normal;
  display: grid;
}

.ops-sms-rules b, .ops-sms-rules small {
  display: block;
}

.ops-sms-rules small {
  color: #87948d;
  margin-top: 3px;
  font-size: 8px;
}

.ops-sms-rules strong {
  font-size: 12px;
}

.ops-sms-rules em {
  color: #8c5a25;
  background: #fbf0df;
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 8px;
  font-style: normal;
}

.ops-guide {
  color: #527161;
  background: #eef6f0;
  border-radius: 10px;
  gap: 13px;
  margin-top: 18px;
  padding: 17px;
  display: flex;
}

.ops-guide i {
  font-size: 22px;
  font-style: normal;
}

.ops-guide p {
  margin: 0;
  font-size: 9px;
  line-height: 1.7;
}

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

.ops-stack-form {
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.ops-stack-form > div, .ops-form-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  display: grid;
}

.ops-stack-form label, .ops-form-grid label, .ops-modal-body label {
  color: #5d6f65;
  gap: 5px;
  font-size: 9px;
  display: grid;
}

.ops-stack-form input, .ops-stack-form select, .ops-stack-form textarea, .ops-form-grid input, .ops-form-grid select, .ops-form-grid textarea, .ops-modal-body input, .ops-modal-body select, .ops-modal-body textarea {
  box-sizing: border-box;
  color: #1c2c24;
  width: 100%;
  font: inherit;
  background: #fbfcfb;
  border: 1px solid #d8e0db;
  border-radius: 7px;
  padding: 8px 9px;
}

.ops-form-grid .full {
  grid-column: 1 / -1;
}

.ops-inline-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 15px;
  display: grid;
}

.ops-inline-form input {
  border: 1px solid #d8e0db;
  border-radius: 7px;
  padding: 8px;
}

.ops-tags {
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  display: flex;
}

.ops-tags span {
  color: #914e48;
  background: #f9eae8;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 8px;
}

.ops-message-list article {
  border-top: 1px solid #e9eeeb;
  padding: 11px 2px;
}

.ops-message-list em {
  float: right;
  color: #3b7657;
  font-size: 7px;
  font-style: normal;
}

.ops-message-list p {
  color: #849089;
  margin: 4px 0 0;
  font-size: 8px;
}

.ops-ledger .income {
  color: #247550;
}

.ops-ledger .expense {
  color: #aa5d45;
}

.ops-modal-backdrop {
  z-index: 50;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #08181094;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.ops-modal {
  background: #fff;
  border-radius: 15px;
  width: min(680px, 95vw);
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 24px 80px #0000003d;
}

.ops-modal > header {
  border-bottom: 1px solid #e6ebe8;
  justify-content: space-between;
  padding: 21px 23px 16px;
  display: flex;
}

.ops-modal h2 {
  margin: 5px 0;
  font-size: 18px;
}

.ops-modal header p {
  color: #53645b;
  margin: 0;
  font-size: 9px;
}

.ops-modal header button {
  color: #78867e;
  background: none;
  border: 0;
  align-self: start;
  font-size: 22px;
}

.ops-modal-body {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 20px 23px;
  display: grid;
}

.ops-modal-body > .full, .ops-rule-note, .ops-quote, .ops-error {
  grid-column: 1 / -1;
}

.ops-rule-note {
  color: #6b785f;
  background: #f7f6ec;
  border-radius: 8px;
  margin: 3px 0;
  padding: 10px;
  font-size: 8px;
  line-height: 1.6;
}

.ops-quote {
  color: #285e43;
  background: #eaf5ed;
  border: 1px solid #cbe3d2;
  border-radius: 9px;
  gap: 5px;
  padding: 12px;
  font-size: 9px;
  display: grid;
}

.ops-modal > footer {
  border-top: 1px solid #e6ebe8;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 23px;
  display: flex;
}

.ops-test-feedback {
  width: min(520px, 95vw);
}

.ops-test-feedback-body {
  grid-template-columns: 1fr;
}

.ops-test-feedback-card {
  text-align: center;
  background: #f6faf7;
  border: 1px solid #d9e4dd;
  border-radius: 13px;
  justify-items: center;
  gap: 10px;
  padding: 24px 18px;
  display: grid;
}

.ops-test-feedback-card > i {
  border: 4px solid #cbd9d0;
  border-top-color: #287553;
  border-radius: 50%;
  width: 34px;
  height: 34px;
}

.ops-test-feedback-card.pending > i {
  animation: .9s linear infinite ops-test-feedback-spin;
}

.ops-test-feedback-card.success > i {
  background: #2f8a61;
  border: 0;
  box-shadow: inset 0 0 0 9px #dff1e7;
}

.ops-test-feedback-card.error > i {
  background: #b85c50;
  border: 0;
  box-shadow: inset 0 0 0 9px #f7e6e2;
}

.ops-test-feedback-card strong {
  color: #20392d;
  font-size: 16px;
}

.ops-test-feedback-card p {
  color: #5b6d63;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.ops-test-feedback-card pre {
  box-sizing: border-box;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: #355646;
  text-align: left;
  background: #edf4ef;
  border-radius: 8px;
  width: 100%;
  margin: 2px 0 0;
  padding: 10px 12px;
  font-size: 11px;
}

.ops-modal button:disabled {
  cursor: wait;
  opacity: .58;
}

@keyframes ops-test-feedback-spin {
  to {
    transform: rotate(360deg);
  }
}

.ops-modal button, .ops-panel button, .ops-binding-card button, .ops-plan-head button {
  cursor: pointer;
  border: 1px solid #d7dfda;
  border-radius: 7px;
  min-height: 30px;
  padding: 7px 10px;
  font-size: 9px;
}

.ops-error {
  color: #a44941;
  font-size: 9px;
}

.ops-login-error {
  color: #a44941;
  background: #fff0ee;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 9px;
}

.ops-login {
  color: #eaf4ed;
  background: radial-gradient(circle at 20% 15%, #244e39 0, #0000 38%), #10271c;
  grid-template-columns: 1.2fr minmax(390px, .8fr);
  place-items: center;
  padding: 7vw;
  display: grid;
}

.ops-login-visual {
  justify-self: start;
  max-width: 650px;
}

.ops-login-logo {
  width: 48px;
  height: 48px;
  font-size: 17px;
}

.ops-login-visual > small {
  color: #8ba596;
  letter-spacing: .22em;
  margin: 28px 0 10px;
  font-size: 8px;
  display: block;
}

.ops-login-visual h1 {
  letter-spacing: -.03em;
  margin: 0;
  font-size: clamp(32px, 4vw, 55px);
  line-height: 1.15;
}

.ops-login-visual p {
  color: #99b2a4;
  max-width: 520px;
  margin: 20px 0;
  font-size: 11px;
  line-height: 1.8;
}

.ops-login-points {
  gap: 7px;
  display: flex;
}

.ops-login-points span {
  color: #bdd1c5;
  border: 1px solid #31503f;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 8px;
}

.ops-login-card {
  box-sizing: border-box;
  color: #1a2b22;
  background: #fff;
  border-radius: 17px;
  gap: 15px;
  width: min(380px, 100%);
  padding: 34px;
  display: grid;
  box-shadow: 0 28px 80px #00000047;
}

.ops-login-card > div small {
  color: #56806a;
  letter-spacing: .18em;
  font-size: 8px;
}

.ops-login-card p {
  color: #849189;
  margin: 0;
  font-size: 9px;
}

.ops-login-card label {
  color: #52635a;
  gap: 6px;
  font-size: 9px;
  display: grid;
}

.ops-login-card input {
  border: 1px solid #d4ddd7;
  border-radius: 8px;
  padding: 10px 11px;
}

.ops-login-help {
  text-align: center;
  color: #8a9690;
  font-size: 8px;
}

.ops-loader {
  border: 3px solid #dce9df;
  border-top-color: #2f7855;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin: auto;
  animation: .8s linear infinite ops-spin;
}

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

.ops-permissions {
  border: 1px solid #d8e0db;
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  display: flex;
}

.ops-permissions legend {
  color: #5d6f65;
  padding: 0 5px;
  font-size: 9px;
}

.ops-permissions label {
  background: #f1f6f2;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  display: flex;
}

.ops-permissions input {
  width: auto;
}

.ops-stack-form .ops-check {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  display: flex;
}

.ops-stack-form .ops-check input {
  width: auto;
}

@media (max-width: 1050px) {
  .ops-plan-grid, .ops-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .ops-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ops-shell {
    grid-template-columns: 1fr;
  }

  .ops-sidebar {
    height: auto;
    padding: 12px;
    position: static;
  }

  .ops-sidebar nav {
    grid-template-columns: repeat(4, 1fr);
  }

  .ops-sidebar nav button {
    justify-content: center;
  }

  .ops-sidebar nav i, .ops-scope, .ops-user {
    display: none;
  }

  .ops-brand {
    padding-bottom: 10px;
  }

  .ops-topbar {
    height: 65px;
    padding: 0 16px;
  }

  .ops-live {
    display: none;
  }

  .ops-content {
    padding: 15px;
  }

  .ops-notice {
    margin: 10px 15px 0;
  }

  .ops-grid-two, .ops-binding-layout, .ops-sms-layout, .ops-plan-grid {
    grid-template-columns: 1fr;
  }

  .ops-login {
    grid-template-columns: 1fr;
    padding: 25px;
  }

  .ops-login-visual {
    display: none;
  }

  .ops-modal-body, .ops-form-grid {
    grid-template-columns: 1fr;
  }

  .ops-form-grid .full {
    grid-column: auto;
  }
}

.ops-hero .ops-hero-add-agency {
  color: #10314f;
  text-align: left;
  background: linear-gradient(135deg, #f8fdff, #dff5ff);
  border: 1px solid #ffffffc7;
  border-radius: 15px;
  grid-template-columns: 42px minmax(108px, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-width: 224px;
  min-height: 72px;
  padding: 12px 16px;
  transition: transform .18s, box-shadow .18s;
  display: grid;
  box-shadow: 0 14px 30px #04182b3d;
}

.ops-hero .ops-hero-add-agency:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px #04182b4d;
}

.ops-hero-add-icon {
  color: #fff;
  background: linear-gradient(145deg, #2386cf, #185c9b);
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  display: grid;
  box-shadow: 0 7px 16px #185c9b47;
}

.ops-hero-add-copy {
  gap: 4px;
  display: grid;
}

.ops-hero-add-copy strong {
  font-size: 15px;
  line-height: 1.2;
}

.ops-hero-add-copy small {
  color: #56738c;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

.ops-hero-add-arrow {
  color: #1f679e;
  font-size: 18px;
}

.ops-live-monitor {
  isolation: isolate;
  z-index: 2147483647;
  background: radial-gradient(circle at 96% 0, #75d4ff24, #0000 31%), #fff;
  border: 1px solid #dbe6ed;
  border-radius: 16px;
  margin-top: 18px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 7px 24px #1432480e;
}

.ops-live-monitor:before {
  content: "";
  background: linear-gradient(#2c93d4, #74d5fa);
  width: 4px;
  position: absolute;
  inset: 0 auto 0 0;
}

.ops-shell--agency .ops-live-monitor {
  background: radial-gradient(circle at 96% 0, #a8d97826, #0000 31%), #fff;
}

.ops-shell--agency .ops-live-monitor:before {
  background: linear-gradient(#328363, #a8d978);
}

.ops-live-monitor-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  display: flex;
}

.ops-live-monitor-kicker {
  color: var(--ops-primary);
  letter-spacing: .12em;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
}

.ops-live-monitor-kicker i {
  background: #3fc989;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  animation: 2s ease-in-out infinite ops-monitor-pulse;
  box-shadow: 0 0 0 5px #3fc9891f;
}

@keyframes ops-monitor-pulse {
  50% {
    box-shadow: 0 0 0 8px #3fc98905;
  }
}

.ops-live-monitor-head h3 {
  color: #183447;
  margin: 9px 0 5px;
  font-size: 19px;
}

.ops-live-monitor-head p {
  color: #788b98;
  margin: 0;
  font-size: 11px;
}

.ops-monitor-presets {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 650px;
  display: flex;
}

.ops-monitor-presets button {
  color: #607686;
  cursor: pointer;
  background: #f5f8fa;
  border: 1px solid #dce5eb;
  border-radius: 8px;
  min-height: 34px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 650;
}

.ops-monitor-presets button:hover, .ops-monitor-presets button.active {
  color: #fff;
  background: var(--ops-primary);
  border-color: var(--ops-primary);
  box-shadow: 0 5px 12px #1f5f9f29;
}

.ops-monitor-custom-range {
  border-top: 1px dashed #dce5eb;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
}

.ops-monitor-custom-range > span {
  color: #8a9aa5;
  padding-bottom: 12px;
  font-size: 11px;
}

.ops-monitor-custom-range label {
  color: #6d808d;
  gap: 5px;
  font-size: 10px;
  display: grid;
}

.ops-monitor-custom-range input {
  color: #263f4f;
  background: #f9fbfc;
  border: 1px solid #d6e1e8;
  border-radius: 8px;
  width: 156px;
  min-height: 38px;
  padding: 8px 10px;
}

.ops-monitor-custom-range button {
  border-radius: 8px;
  min-height: 38px;
  padding-inline: 18px;
}

.ops-monitor-error {
  color: #a24c43;
  background: #fff0ee;
  border-radius: 8px;
  margin: 12px 0 0;
  padding: 9px 12px;
  font-size: 11px;
}

.ops-monitor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 19px;
  display: grid;
}

.ops-monitor-grid article {
  border: 1px solid #e0e8ed;
  border-radius: 13px;
  align-items: center;
  gap: 16px;
  min-height: 126px;
  padding: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 16px #19394d09;
}

.ops-monitor-grid article:after {
  content: "";
  opacity: .055;
  background: currentColor;
  border-radius: 50%;
  width: 90px;
  height: 90px;
  position: absolute;
  bottom: -45px;
  right: -34px;
}

.ops-monitor-grid article.merchant {
  color: #276fa7;
  background: linear-gradient(135deg, #fbfdff, #eef8ff);
}

.ops-monitor-grid article.store {
  color: #288061;
  background: linear-gradient(135deg, #fcfffd, #eefaf4);
}

.ops-monitor-grid article.sms {
  color: #a06d20;
  background: linear-gradient(135deg, #fffefb, #fff7e8);
}

.ops-monitor-icon {
  color: #fff;
  background: currentColor;
  border-radius: 14px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 15px;
  font-weight: 800;
  display: grid;
  box-shadow: 0 8px 18px #1e4e6a29;
}

.ops-monitor-grid article > div {
  min-width: 0;
}

.ops-monitor-grid small {
  color: #71838e;
  font-size: 11px;
  font-weight: 650;
  display: block;
}

.ops-monitor-grid strong {
  color: #173448;
  overflow-wrap: anywhere;
  margin: 6px 0 4px;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.1;
  display: block;
}

.ops-monitor-grid p {
  color: #93a1aa;
  margin: 0;
  font-size: 10px;
}

@media (max-width: 1050px) {
  .ops-live-monitor-head {
    display: grid;
  }

  .ops-monitor-presets {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .ops-hero .ops-hero-add-agency {
    width: 100%;
    min-width: 0;
  }

  .ops-live-monitor {
    padding: 18px;
  }

  .ops-monitor-grid {
    grid-template-columns: 1fr;
  }

  .ops-monitor-custom-range {
    grid-template-columns: 1fr;
    align-items: stretch;
    display: grid;
  }

  .ops-monitor-custom-range > span {
    display: none;
  }

  .ops-monitor-custom-range input {
    width: 100%;
  }
}

.ops-shell, .ops-login {
  --ops-text: #17251e;
  --ops-muted: #65766d;
  --ops-subtle: #829087;
  --ops-line: #dfe6e1;
  --ops-surface: #fff;
  --ops-primary: #176b4d;
  --ops-primary-hover: #115c41;
  --ops-accent: #c5ef68;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  font-family: Inter, PingFang SC, Microsoft YaHei, Noto Sans CJK SC, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.ops-shell *, .ops-login * {
  box-sizing: border-box;
}

.ops-shell {
  background: #f5f7f5;
  grid-template-columns: 252px minmax(0, 1fr);
}

.ops-sidebar {
  padding: 28px 18px 20px;
}

.ops-brand {
  gap: 12px;
  padding: 0 8px 24px;
}

.ops-brand > i {
  border-radius: 12px;
  width: 42px;
  height: 42px;
  font-size: 17px;
}

.ops-brand b {
  letter-spacing: .02em;
  font-size: 17px;
}

.ops-brand small {
  letter-spacing: .08em;
  margin-top: 2px;
  font-size: 11px;
}

.ops-scope {
  border-radius: 12px;
  margin: 0 2px 20px;
  padding: 14px 15px;
}

.ops-scope span {
  font-size: 11px;
}

.ops-scope b {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
}

.ops-sidebar nav {
  gap: 5px;
}

.ops-sidebar nav button {
  border-radius: 10px;
  gap: 11px;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  transition: background-color .18s, color .18s, transform .18s;
}

.ops-sidebar nav button:hover {
  transform: translateX(2px);
}

.ops-sidebar nav i {
  border-radius: 8px;
  width: 25px;
  height: 25px;
  font-size: 11px;
}

.ops-user {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 18px 7px 0;
}

.ops-user > span {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.ops-user b {
  font-size: 13px;
  line-height: 1.35;
}

.ops-user small {
  margin-top: 3px;
  font-size: 11px;
}

.ops-user button {
  cursor: pointer;
  border-radius: 7px;
  min-height: 32px;
  padding: 5px 7px;
  font-size: 12px;
}

.ops-user button:hover {
  color: #fff;
  background: #1b392b;
}

.ops-user-actions {
  justify-items: stretch;
  gap: 2px;
  display: grid;
}

.ops-user-actions button {
  white-space: nowrap;
}

.ops-password-modal {
  width: min(520px, 100vw - 32px);
}

.ops-password-rule, .ops-password-error {
  border-radius: 9px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
}

.ops-password-rule {
  color: #5e7468;
  background: #f1f6f3;
}

.ops-password-error {
  color: #a33d3d;
  background: #fff0f0;
}

.ops-password-success {
  align-items: center;
  gap: 14px;
  display: flex;
}

.ops-password-success > i {
  color: #fff;
  background: #2f7653;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-style: normal;
  display: grid;
}

.ops-password-success b, .ops-password-success p {
  margin: 0;
  display: block;
}

.ops-password-success p {
  color: #718078;
  margin-top: 5px;
  font-size: 12px;
}

.ops-topbar {
  height: auto;
  min-height: 84px;
  padding: 16px clamp(22px, 3vw, 42px);
}

.ops-topbar small, .ops-hero small, .ops-binding-card > small, .ops-plan-head small, .ops-modal header small {
  letter-spacing: .12em;
  font-size: 11px;
  line-height: 1.3;
}

.ops-topbar h1 {
  margin: 5px 0 0;
  font-size: 23px;
  line-height: 1.25;
}

.ops-top-actions {
  gap: 14px;
}

.ops-top-actions button {
  cursor: pointer;
  border-radius: 9px;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
}

.ops-live {
  white-space: nowrap;
  font-size: 12px;
}

.ops-content {
  width: 100%;
  max-width: 1540px;
  padding: 30px clamp(22px, 3vw, 42px) 56px;
}

.ops-notice {
  border-radius: 10px;
  align-items: center;
  gap: 16px;
  width: calc(100% - clamp(44px, 6vw, 84px));
  max-width: 1456px;
  margin: 16px auto 0;
  padding: 12px 16px;
  font-size: 13px;
}

.ops-notice button {
  cursor: pointer;
  border-radius: 6px;
  min-width: 28px;
  min-height: 28px;
  font-size: 18px;
}

.ops-notice button:hover {
  background: #165b3c14;
}

.ops-primary {
  background: var(--ops-primary) !important;
  border-color: var(--ops-primary) !important;
}

.ops-primary:hover {
  background: var(--ops-primary-hover) !important;
  border-color: var(--ops-primary-hover) !important;
}

.ops-primary:focus-visible, .ops-shell button:focus-visible, .ops-shell input:focus-visible, .ops-shell select:focus-visible, .ops-shell textarea:focus-visible, .ops-login button:focus-visible, .ops-login input:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #398f6538;
}

.ops-shell button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.ops-hero {
  border-radius: 18px;
  align-items: center;
  min-height: 174px;
  padding: 34px 38px;
}

.ops-hero h2 {
  margin: 10px 0 8px;
  font-size: clamp(25px, 2.1vw, 32px);
  line-height: 1.25;
}

.ops-hero p {
  max-width: 720px;
  font-size: 14px;
  line-height: 1.7;
}

.ops-hero button {
  white-space: nowrap;
  cursor: pointer;
  border-radius: 10px;
  min-height: 42px;
  padding: 10px 16px;
  font-size: 13px;
}

.ops-metrics {
  gap: 16px;
  margin: 18px 0;
}

.ops-metrics button {
  border-radius: 14px;
  min-height: 152px;
  padding: 20px 22px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.ops-metrics button:hover {
  border-color: #c9d8ce;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #1a312514;
}

.ops-metrics i {
  font-size: 11px;
}

.ops-metrics span {
  margin-top: 13px;
  font-size: 13px;
}

.ops-metrics strong {
  margin: 5px 0 8px;
  font-size: 28px;
  line-height: 1.2;
}

.ops-metrics small {
  font-size: 11px;
}

.ops-grid-two {
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, .85fr);
  gap: 18px;
}

.ops-panel {
  border-radius: 15px;
  padding: 24px;
  box-shadow: 0 6px 22px #1a31250a;
}

.ops-panel-title h3 {
  font-size: 17px;
  line-height: 1.35;
}

.ops-panel-title p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.ops-ledger-mini {
  margin-top: 16px;
}

.ops-ledger-mini > div {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 62px;
  padding: 11px 3px;
}

.ops-ledger-mini i {
  border-radius: 9px;
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.ops-ledger-mini b {
  font-size: 13px;
}

.ops-ledger-mini small {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

.ops-ledger-mini strong {
  white-space: nowrap;
  font-size: 13px;
}

.ops-health {
  grid-template-columns: 142px 1fr;
}

.ops-health-ring {
  width: 124px;
  height: 124px;
}

.ops-health-ring strong {
  font-size: 29px;
}

.ops-health-ring span {
  font-size: 11px;
}

.ops-health li {
  gap: 16px;
  padding: 11px 0;
  font-size: 12px;
}

.ops-toolbar {
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}

.ops-toolbar > div:last-child {
  gap: 10px;
}

.ops-toolbar input {
  border-radius: 9px;
  width: min(320px, 36vw);
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
}

.ops-toolbar > div > b {
  min-width: 44px;
  color: var(--ops-muted);
  text-align: right;
  font-size: 12px;
}

.ops-table {
  border: 1px solid #e7ece8;
  border-radius: 11px;
}

.ops-tr, .ops-metrics, .ops-ledger-mini, .ops-plan-grid {
  font-variant-numeric: tabular-nums;
}

.ops-tr {
  min-width: 1080px;
  min-height: 62px;
}

.ops-merchants .ops-tr {
  grid-template-columns: 1.12fr .78fr .58fr 1.05fr .65fr 1.06fr .78fr minmax(118px, .48fr);
  min-width: 1420px;
}

.ops-agencies .ops-tr {
  grid-template-columns: 1.1fr .9fr .9fr .7fr .85fr minmax(225px, 1.35fr);
}

.ops-ledger .ops-tr {
  grid-template-columns: 1fr .9fr .9fr .85fr .9fr 1.5fr;
}

.ops-tr > span {
  padding: 13px 12px;
  font-size: 12px;
  line-height: 1.45;
}

.ops-tr:first-child {
  z-index: 2;
  border-top: 0;
  border-radius: 10px 10px 0 0;
  min-height: 44px;
  position: sticky;
  top: 0;
  box-shadow: 0 1px #e5ebe7;
}

.ops-tr:first-child > span {
  padding: 11px 12px;
  font-size: 12px;
}

.ops-tr b {
  font-size: 13px;
  line-height: 1.4;
}

.ops-tr small {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
}

.ops-tr strong {
  font-size: 14px;
}

.ops-tr em {
  border-radius: 6px;
  margin-left: 6px;
  padding: 3px 7px;
  font-size: 10px;
}

.ops-row-actions {
  gap: 7px;
}

.ops-row-actions button {
  border-radius: 7px;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
}

.ops-merchants .ops-row-actions {
  flex-wrap: nowrap;
}

.ops-row-actions .ops-merchant-operation-trigger {
  color: #f4fff8;
  background: linear-gradient(135deg, #2d7b59, #174b36);
  border-color: #1d6547;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 96px;
  min-height: 42px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  box-shadow: 0 8px 18px #1c5b3f2e;
}

.ops-row-actions .ops-merchant-operation-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 23px #1c5b3f40;
}

.ops-merchant-operation-trigger i {
  font-size: 19px;
  font-style: normal;
  line-height: 1;
}

.ops-row-actions .ops-merchant-login {
  color: #f4fff8;
  background: linear-gradient(135deg, #276f51, #174b36);
  border-color: #1d6547;
  transition: transform .3s ease-out, box-shadow .3s ease-out, opacity .3s ease-out;
  box-shadow: 0 7px 16px #1c5b3f26;
}

.ops-row-actions .ops-merchant-login:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px #1c5b3f38;
}

.ops-row-actions .ops-merchant-login:disabled {
  opacity: .62;
  cursor: wait;
}

.ops-merchant-operation-modal {
  width: min(780px, 100vw - 32px);
}

.ops-merchant-operation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 24px 26px;
  display: grid;
}

.ops-merchant-operation-grid > button {
  min-height: 88px;
  color: var(--ops-text);
  text-align: left;
  background: #fbfdfc;
  border: 1px solid #dfe8e3;
  border-radius: 13px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  display: grid;
}

.ops-merchant-operation-grid > button:hover:not(:disabled) {
  background: #f3faf6;
  border-color: #9fc9b3;
  transform: translateY(-1px);
}

.ops-merchant-operation-grid > button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.ops-merchant-operation-grid > button > i {
  color: #286f51;
  background: #e5f3eb;
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.ops-merchant-operation-grid span b, .ops-merchant-operation-grid span small {
  display: block;
}

.ops-merchant-operation-grid span b {
  font-size: 14px;
}

.ops-merchant-operation-grid span small {
  color: var(--ops-muted);
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
}

.ops-merchant-operation-grid > button > strong {
  color: #91a098;
  font-size: 21px;
}

.ops-merchant-operation-grid > button.login {
  background: linear-gradient(135deg, #f0faf5, #f9fcfa);
  border-color: #b8dbc8;
}

.ops-merchant-operation-grid > button.danger > i {
  color: #aa4d44;
  background: #faeae7;
}

.ops-merchant-operation-modal > footer {
  justify-content: space-between;
  align-items: center;
}

.ops-merchant-operation-modal > footer span {
  color: var(--ops-muted);
  font-size: 11px;
}

@media (max-width: 760px) {
  .ops-merchant-operation-grid {
    grid-template-columns: 1fr;
    padding: 18px 16px;
  }

  .ops-merchant-operation-modal > footer {
    flex-direction: column;
    align-items: stretch;
  }

  .ops-merchant-operation-modal > footer button {
    width: 100%;
  }
}

.ops-reset-credits-modal {
  width: min(620px, 100vw - 32px);
}

.ops-reset-credit-preview, .ops-sms-balance-summary {
  background: #f5faf7;
  border: 1px solid #dce9e2;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  display: flex;
}

.ops-reset-credit-preview > i, .ops-sms-balance-summary > i {
  color: #287151;
  background: #dff0e7;
  border-radius: 11px;
  flex: none;
  order: -1;
  place-items: center;
  width: 38px;
  height: 38px;
  font-style: normal;
  font-weight: 900;
  display: grid;
}

.ops-reset-credit-preview b, .ops-reset-credit-preview small, .ops-sms-balance-summary small, .ops-sms-balance-summary b {
  display: block;
}

.ops-reset-credit-preview b {
  font-size: 13px;
}

.ops-reset-credit-preview small, .ops-sms-balance-summary small {
  color: var(--ops-muted);
  margin-top: 4px;
  font-size: 11px;
}

.ops-sms-balance-summary {
  grid-column: 1 / -1;
  justify-content: space-between;
}

.ops-sms-balance-summary > i {
  order: 0;
}

.ops-sms-balance-summary b {
  color: #226b4c;
  margin-top: 5px;
  font-size: 21px;
}

.ops-child-store {
  background: linear-gradient(90deg, #f1f7f3 0 4px, #fbfdfb 4px 100%);
}

.ops-child-store:hover {
  background: linear-gradient(90deg, #b9d8c4 0 4px, #f5faf6 4px 100%);
}

.ops-sub-row {
  font-weight: 600;
  color: #72847a !important;
}

.ops-empty {
  min-width: 100%;
  font-size: 13px;
  padding: 38px 24px !important;
}

.ops-merchant-search-panel {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fbfdfcf0;
  border: 1px solid #dce7e1;
  border-radius: 16px;
  gap: 0;
  margin: 0 0 20px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 14px 36px #18412c0f;
}

.ops-merchant-search-heading {
  background: linear-gradient(115deg, #eaf6efe6, #fafcfbb8);
  border-bottom: 1px solid #e4ece7;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 15px 18px;
  display: flex;
}

.ops-merchant-search-heading > div {
  align-items: center;
  gap: 11px;
  display: flex;
}

.ops-merchant-search-heading > div > i {
  color: #fff;
  background: var(--ops-primary);
  width: 34px;
  height: 34px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ops-primary) 23%, transparent);
  border-radius: 10px;
  place-items: center;
  font-size: 12px;
  font-style: normal;
  display: grid;
}

.ops-merchant-search-heading b, .ops-merchant-search-heading small {
  display: block;
}

.ops-merchant-search-heading b {
  font-size: 14px;
}

.ops-merchant-search-heading small {
  color: var(--ops-muted);
  margin-top: 3px;
  font-size: 10px;
}

.ops-merchant-search-heading .ops-filter-toggle {
  min-height: 34px;
  color: var(--ops-primary);
  background: none;
  border-color: #0000;
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.ops-filter-toggle span {
  transition: transform .3s ease-out;
}

.ops-filter-toggle[aria-expanded="true"] span {
  transform: rotate(180deg);
}

.ops-merchant-search-primary {
  grid-template-columns: minmax(300px, 1.6fr) minmax(150px, .7fr) minmax(180px, .8fr) auto;
  align-items: end;
  gap: 13px;
  padding: 17px 18px;
  display: grid;
}

.ops-merchant-search-primary--agency {
  grid-template-columns: minmax(340px, 1.8fr) minmax(170px, .7fr) auto;
}

.ops-merchant-search-panel label {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.ops-merchant-search-panel label > span {
  color: #5c6d64;
  font-size: 11px;
  font-weight: 700;
}

.ops-merchant-search-panel input, .ops-merchant-search-panel select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 41px;
  color: var(--ops-text);
  font: inherit;
  background: #fff;
  border: 1px solid #d7e1dc;
  border-radius: 9px;
  outline: none;
  padding: 8px 11px;
  transition: border-color .3s ease-out, box-shadow .3s ease-out, background-color .3s ease-out;
}

.ops-merchant-search-panel input:hover, .ops-merchant-search-panel select:hover {
  border-color: #b9cec2;
}

.ops-merchant-search-panel input:focus, .ops-merchant-search-panel select:focus {
  border-color: var(--ops-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ops-primary) 12%, transparent);
}

.ops-merchant-keyword > div {
  position: relative;
}

.ops-merchant-keyword > div > i {
  z-index: 1;
  color: #7d8e85;
  font-size: 17px;
  font-style: normal;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-52%);
}

.ops-merchant-keyword input {
  padding-left: 37px;
}

.ops-merchant-search-actions {
  gap: 8px;
  display: flex;
}

.ops-merchant-search-actions button {
  white-space: nowrap;
  min-height: 41px;
}

.ops-merchant-search-actions .ops-primary {
  min-width: 104px;
}

.ops-merchant-search-advanced {
  background: #f4f8f6b8;
  border-top: 1px dashed #dce6e1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 17px 18px 19px;
  animation: .3s ease-out both ops-filter-reveal;
  display: grid;
}

.ops-filter-range > div {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  display: grid;
}

.ops-filter-range--date {
  grid-column: span 2;
}

.ops-filter-range em, .ops-filter-suffix em {
  color: #819087;
  white-space: nowrap;
  font-size: 10px;
  font-style: normal;
}

.ops-filter-suffix {
  position: relative;
}

.ops-filter-suffix input {
  padding-right: 48px;
}

.ops-filter-suffix em {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.ops-merchant-search-summary {
  color: var(--ops-muted);
  background: #fff;
  border-top: 1px solid #e7ede9;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
  font-size: 10px;
  display: flex;
}

.ops-merchant-search-summary b {
  color: var(--ops-primary);
  font-size: 12px;
}

.ops-merchant-search-summary em {
  font-style: normal;
}

@keyframes ops-filter-reveal {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ops-binding-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr);
  gap: 18px;
}

.ops-binding-card {
  padding: 32px;
}

.ops-binding-card h2 {
  margin: 9px 0;
  font-size: 25px;
  line-height: 1.3;
}

.ops-binding-card > p {
  font-size: 13px;
  line-height: 1.75;
}

.ops-binding-card > form {
  gap: 10px;
  margin-top: 26px;
}

.ops-binding-card input, .ops-binding-card select {
  border-radius: 9px;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 14px;
}

.ops-pool-result {
  border-radius: 12px;
  margin-top: 20px;
  padding: 20px;
}

.ops-pool-result > div {
  gap: 12px;
}

.ops-pool-result i {
  border-radius: 10px;
  width: 42px;
  height: 42px;
  font-size: 14px;
}

.ops-pool-result b {
  font-size: 14px;
}

.ops-pool-result small {
  margin-top: 4px;
  font-size: 11px;
}

.ops-pool-result ul {
  flex-wrap: wrap;
  gap: 7px;
}

.ops-pool-result li {
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11px;
}

.ops-pool-result label {
  gap: 6px;
  margin: 13px 0;
  font-size: 12px;
}

.ops-binding-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  display: flex;
}

.ops-binding-actions button {
  flex: none;
}

.ops-search-empty {
  margin-top: 18px;
  padding: 18px;
  font-size: 12px;
}

.ops-binding-rules ol {
  gap: 18px;
  margin-top: 22px;
}

.ops-binding-rules li {
  padding-left: 42px;
}

.ops-binding-rules li:before {
  font-size: 12px;
}

.ops-binding-rules b {
  font-size: 13px;
}

.ops-binding-rules span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.6;
}

.ops-plan-head {
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.ops-plan-head h2 {
  margin: 7px 0;
  font-size: 25px;
  line-height: 1.3;
}

.ops-plan-head p {
  font-size: 13px;
  line-height: 1.6;
}

.ops-plan-grid {
  gap: 18px;
}

.ops-plan-grid article {
  border-radius: 16px;
  flex-direction: column;
  min-height: 360px;
  padding: 25px;
  display: flex;
}

.ops-plan-grid article.ops-plan-card {
  color: var(--ops-text);
  background: #fff;
  border-color: #dce4df;
}

.ops-plan-grid article.ops-plan-card p, .ops-plan-grid article.ops-plan-card span, .ops-plan-grid article.ops-plan-card small {
  color: #718078;
}

.ops-plan-grid article.ops-plan-card li, .ops-plan-grid article.ops-plan-card footer {
  border-color: #e8edea;
}

.ops-plan-grid article.ops-plan-card--featured {
  border-top: 3px solid #4f9f6e;
}

.ops-plan-grid article.ops-plan-card--premium {
  color: #eff8f2;
  background: #183326;
  border-color: #183326;
}

.ops-plan-grid article.ops-plan-card--premium p, .ops-plan-grid article.ops-plan-card--premium span, .ops-plan-grid article.ops-plan-card--premium small {
  color: #aec4b7;
}

.ops-plan-grid article.ops-plan-card--premium li, .ops-plan-grid article.ops-plan-card--premium footer {
  border-color: #385345;
}

.ops-plan-grid header span {
  letter-spacing: .1em;
  font-size: 11px;
}

.ops-plan-grid header em {
  padding: 4px 8px;
  font-size: 10px;
}

.ops-plan-grid h3 {
  margin: 22px 0 8px;
  font-size: 23px;
  line-height: 1.3;
}

.ops-plan-grid p {
  min-height: 48px;
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

.ops-plan-grid ul {
  margin: 20px 0;
}

.ops-plan-grid li {
  grid-template-columns: minmax(48px, .55fr) 1.2fr 1.2fr;
  gap: 10px;
  min-height: 48px;
  padding: 12px 0;
  font-size: 12px;
  display: grid;
}

.ops-plan-grid li b {
  text-align: right;
  white-space: nowrap;
}

.ops-plan-grid footer {
  margin-top: auto;
  padding-top: 15px;
  font-size: 11px;
}

.ops-sms-layout {
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr);
}

.ops-sms-rules {
  margin-top: 17px;
}

.ops-sms-rules article {
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 13px;
  min-height: 70px;
  padding: 13px 4px;
}

.ops-sms-rules i {
  border-radius: 10px;
  width: 40px;
  height: 40px;
  font-size: 13px;
}

.ops-sms-rules b {
  font-size: 13px;
}

.ops-sms-rules small {
  margin-top: 4px;
  font-size: 11px;
}

.ops-sms-rules strong {
  white-space: nowrap;
  font-size: 15px;
}

.ops-sms-rules em {
  white-space: nowrap;
  padding: 5px 8px;
  font-size: 11px;
}

.ops-guide {
  gap: 15px;
  margin-top: 20px;
  padding: 20px;
}

.ops-guide p {
  font-size: 12px;
  line-height: 1.7;
}

.ops-content-grid {
  gap: 18px;
}

.ops-stack-form {
  gap: 14px;
  margin-top: 20px;
}

.ops-stack-form > div, .ops-form-grid {
  gap: 14px;
}

.ops-stack-form label, .ops-form-grid label, .ops-modal-body label {
  gap: 7px;
  font-size: 12px;
  line-height: 1.45;
}

.ops-stack-form input, .ops-stack-form select, .ops-stack-form textarea, .ops-form-grid input, .ops-form-grid select, .ops-form-grid textarea, .ops-modal-body input, .ops-modal-body select, .ops-modal-body textarea {
  border-radius: 9px;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

.ops-stack-form textarea, .ops-form-grid textarea, .ops-modal-body textarea {
  resize: vertical;
  min-height: 94px;
}

.ops-modal-body input[readonly] {
  color: #315d47;
  cursor: default;
  background: #eef5f0;
  font-weight: 700;
}

.ops-order-status {
  color: #7b8981;
  min-height: 18px;
  font-size: 11px;
  line-height: 1.45;
}

.ops-order-status.checking {
  color: #8a6a2f;
}

.ops-order-status.available {
  color: #23714d;
  font-weight: 600;
}

.ops-order-status.duplicate {
  color: #a44941;
  font-weight: 600;
}

.ops-direct-modal {
  width: min(760px, 100vw - 32px);
}

.ops-direct-page {
  gap: 18px;
  display: grid;
}

.ops-direct-heading {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  display: flex;
}

.ops-direct-heading-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  display: flex;
}

.ops-direct-heading-actions > strong {
  color: #2b6f50;
  text-align: right;
  min-width: 64px;
  margin-right: 3px;
  font-size: 14px;
}

.ops-direct-filters {
  grid-template-columns: minmax(115px, .7fr) repeat(3, minmax(155px, .8fr)) auto;
  gap: 10px;
  margin-bottom: 18px;
  display: grid;
}

.ops-direct-filters input, .ops-direct-filters select {
  color: #1c2c24;
  background: #fff;
  border: 1px solid #d8e0db;
  border-radius: 9px;
  min-width: 0;
  min-height: 40px;
  padding: 9px 11px;
  font-size: 13px;
}

.ops-direct-list .ops-tr {
  grid-template-columns: 1.15fr .9fr 1fr 1fr .8fr 1fr 1.2fr;
  min-width: 1220px;
}

.ops-direct-pagination {
  color: #77867e;
  align-items: center;
  gap: 16px;
  padding: 15px 2px 0;
  font-size: 12px;
  display: flex;
}

.ops-direct-pagination > label {
  align-items: center;
  gap: 7px;
  display: flex;
}

.ops-direct-pagination select {
  background: #fff;
  border: 1px solid #d8e0db;
  border-radius: 8px;
  min-height: 34px;
  padding: 6px 28px 6px 9px;
}

.ops-direct-pagination > div {
  gap: 6px;
  margin-left: auto;
  display: flex;
}

.ops-direct-pagination button {
  color: #315d47;
  background: #fff;
  border: 1px solid #d8e0db;
  min-height: 34px;
  padding: 6px 10px;
}

.ops-direct-pagination button.active {
  color: #fff;
  background: #2f7453;
  border-color: #2f7453;
}

.ops-direct-pagination button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.ops-category-modal {
  width: min(900px, 100vw - 32px);
}

.ops-category-manager {
  display: block;
}

.ops-category-create {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.ops-category-create form {
  background: #f8faf8;
  border: 1px solid #e1e8e3;
  border-radius: 12px;
  padding: 17px;
}

.ops-category-create h3, .ops-category-list h3 {
  color: #213a2d;
  margin: 0 0 13px;
  font-size: 15px;
}

.ops-category-list {
  margin-top: 22px;
}

.ops-category-list article {
  border-top: 1px solid #e5ebe7;
  padding: 14px 15px;
}

.ops-category-list article > div {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ops-category-list article > div > strong {
  font-size: 14px;
}

.ops-category-list ul {
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ops-category-list li {
  color: #486054;
  background: #f7faf8;
  border: 1px solid #dbe5de;
  border-radius: 8px;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 10px;
  font-size: 12px;
  display: flex;
}

.ops-category-list li.empty {
  color: #929e97;
  border-style: dashed;
}

.ops-category-list button.danger {
  color: #a84d45;
  background: #fff1ef;
  border: 1px solid #efd4d0;
  min-height: 28px;
  padding: 4px 7px;
  font-size: 11px;
}

.ops-export-modal {
  width: min(560px, 100vw - 32px);
}

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

.ops-agency-filters, .ops-ledger-filters, .ops-message-filters {
  grid-template-columns: minmax(180px, 1.2fr) repeat(4, minmax(135px, .8fr)) auto;
  gap: 10px;
  margin: 4px 0 18px;
  display: grid;
}

.ops-agency-filters input, .ops-agency-filters select, .ops-ledger-filters input, .ops-ledger-filters select, .ops-message-filters input, .ops-message-filters select {
  background: #fff;
  border: 1px solid #d8e0db;
  border-radius: 9px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 11px;
}

.ops-agency-directory .ops-tr {
  grid-template-columns: 1.05fr 1fr .9fr .9fr .6fr .75fr 1.3fr;
  min-width: 1260px;
}

.ops-agency-log-filters {
  grid-template-columns: minmax(210px, 1.25fr) minmax(150px, .8fr) minmax(145px, .75fr) minmax(145px, .75fr) auto;
  align-items: end;
  gap: 10px;
  margin: 4px 0 18px;
  display: grid;
}

.ops-agency-log-filters label {
  color: #66766e;
  gap: 5px;
  font-size: 11px;
  display: grid;
}

.ops-agency-log-filters input, .ops-agency-log-filters select {
  background: #fff;
  border: 1px solid #d8e0db;
  border-radius: 9px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 11px;
}

.ops-agency-log-filters > div {
  gap: 7px;
  display: flex;
}

.ops-agency-log-filters button {
  white-space: nowrap;
  min-height: 40px;
}

.ops-agency-log-table .ops-tr {
  grid-template-columns: .85fr 1.15fr 1.2fr .9fr .75fr 1.45fr 1.1fr;
  min-width: 1450px;
}

.ops-agency-log-table .ops-tr > span {
  padding-block: 13px;
}

.ops-agency-log-table em {
  margin: 0;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
}

.ops-agency-log-table em.sms {
  color: #7b5b1d;
  background: #fff3d8;
}

.ops-agency-log-table em.subscription {
  color: #28694d;
  background: #e7f4ec;
}

.ops-danger-primary {
  box-shadow: 0 6px 16px #a9473f29;
  color: #fff !important;
  background: #a9473f !important;
  border-color: #a9473f !important;
}

.ops-danger-primary:hover {
  background: #903930 !important;
  border-color: #903930 !important;
}

.ops-agency-action-modal {
  width: min(620px, 100vw - 32px);
}

.ops-agency-action-body {
  gap: 15px;
}

.ops-agency-action-target {
  background: #dfe7e2;
  border: 1px solid #dfe7e2;
  border-radius: 10px;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1.3fr .8fr;
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.ops-agency-action-target > span {
  background: #f7faf8;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  display: grid;
}

.ops-agency-action-target small {
  color: #7d8a83;
  font-size: 10px;
}

.ops-agency-action-target b, .ops-agency-action-target strong {
  color: #2c483a;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.ops-agency-action-body input {
  min-height: 44px;
  font-size: 14px;
}

.ops-agency-action-body textarea {
  resize: vertical;
  min-height: 104px;
}

.ops-agency-action-note {
  color: #2d6e50;
  background: #eef8f2;
  border: 1px solid #cfe3d7;
  border-radius: 9px;
  margin: 0;
  padding: 11px 12px;
  font-size: 11px;
  line-height: 1.65;
}

.ops-agency-action-note.warning {
  color: #8b4a3f;
  background: #fff3f0;
  border-color: #efd2cc;
}

.ops-agency-image-picker {
  background: #f5faf7;
  border: 1px dashed #b9d2c5;
  border-radius: 10px;
  gap: 7px;
  padding: 15px;
  display: grid;
}

.ops-agency-image-picker input {
  background: #fff;
  border: 1px solid #d8e4de;
  border-radius: 8px;
  padding: 7px;
}

.ops-agency-image-picker small {
  color: #708078;
  font-weight: 400;
}

.ops-agency-detail-modal {
  width: min(1040px, 100vw - 32px);
}

.ops-agency-detail-body {
  padding: 20px 23px 24px;
}

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

.ops-agency-detail-summary > span {
  background: #f8faf9;
  border: 1px solid #e0e8e4;
  border-radius: 10px;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  display: grid;
}

.ops-agency-detail-summary small {
  color: #78877f;
  font-size: 10px;
}

.ops-agency-detail-summary b {
  color: #314b3f;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
}

.ops-agency-gallery-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 13px;
  display: flex;
}

.ops-agency-gallery-toolbar h3, .ops-agency-gallery-toolbar p {
  margin: 0;
}

.ops-agency-gallery-toolbar p {
  color: #78877f;
  margin-top: 4px;
  font-size: 10px;
}

.ops-agency-gallery-toolbar > label {
  color: #1f6c4b;
  cursor: pointer;
  background: #edf8f2;
  border: 1px solid #bdd8ca;
  border-radius: 8px;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.ops-agency-gallery-toolbar > label.is-uploading {
  cursor: wait;
  opacity: .65;
}

.ops-agency-gallery-toolbar input {
  display: none;
}

.ops-agency-gallery {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 13px;
  display: grid;
}

.ops-agency-gallery figure {
  background: #fff;
  border: 1px solid #dce6e1;
  border-radius: 11px;
  margin: 0;
  overflow: hidden;
}

.ops-agency-gallery-image {
  background: #eef3f0;
  width: 100%;
  height: 130px;
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.ops-agency-gallery-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .2s;
  display: block;
}

.ops-agency-gallery-image:hover img {
  transform: scale(1.035);
}

.ops-agency-gallery figcaption {
  color: #6d7d75;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  font-size: 10px;
  display: flex;
}

.ops-agency-gallery figcaption button {
  color: #a34e46;
  background: #fff4f2;
  border-color: #eed4d1;
  min-height: 25px;
  padding: 3px 7px;
}

.ops-agency-gallery-empty {
  color: #829089;
  text-align: center;
  background: #fafcfb;
  border: 1px dashed #cddbd4;
  border-radius: 11px;
  padding: 36px 20px;
  font-size: 11px;
}

.ops-image-lightbox {
  z-index: 90;
  background: #040d09e8;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
  padding: 42px 24px 28px;
  display: grid;
  position: fixed;
  inset: 0;
}

.ops-lightbox-stage {
  place-items: center;
  min-width: 0;
  height: 100%;
  display: grid;
}

.ops-lightbox-stage img {
  object-fit: contain;
  border-radius: 8px;
  max-width: 100%;
  max-height: calc(100vh - 110px);
  box-shadow: 0 18px 70px #00000073;
}

.ops-lightbox-stage span {
  color: #fff;
  background: #0000008c;
  border-radius: 16px;
  padding: 5px 11px;
  font-size: 12px;
  position: absolute;
  bottom: 16px;
}

.ops-lightbox-close, .ops-lightbox-nav {
  color: #fff;
  cursor: pointer;
  background: #ffffff1f;
  border: 0;
}

.ops-lightbox-close {
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 27px;
  position: absolute;
  top: 16px;
  right: 18px;
}

.ops-lightbox-nav {
  border-radius: 50%;
  width: 54px;
  height: 54px;
  font-size: 40px;
  line-height: 1;
}

.ops-lightbox-nav:hover, .ops-lightbox-close:hover {
  background: #ffffff3b;
}

.ops-lightbox-nav.next {
  justify-self: end;
}

.ops-ledger-filters {
  grid-template-columns: repeat(5, minmax(135px, 1fr)) auto;
}

.ops-ledger-filters label {
  color: #66766e;
  gap: 5px;
  font-size: 11px;
  display: grid;
}

.ops-message-filters {
  grid-template-columns: minmax(220px, 1fr) 170px;
}

.ops-message-table {
  border: 1px solid #e3eae6;
  border-radius: 11px;
  overflow: hidden;
}

.ops-message-row {
  border-top: 1px solid #e7ede9;
  grid-template-columns: minmax(280px, 1.5fr) 100px 170px minmax(190px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: grid;
}

.ops-message-row.head {
  color: #77867f;
  background: #f5f8f6;
  border-top: 0;
  font-size: 11px;
}

.ops-message-row > span:first-child {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.ops-message-row img {
  object-fit: cover;
  border-radius: 6px;
  width: 52px;
  height: 40px;
}

.ops-message-row b, .ops-message-row small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.ops-message-row small, .ops-message-row time {
  color: #829088;
  font-size: 10px;
}

.ops-message-row em {
  color: #64746c;
  background: #eef2f0;
  border-radius: 12px;
  width: max-content;
  padding: 4px 8px;
  font-size: 10px;
  font-style: normal;
}

.ops-message-row em.published {
  color: #24714f;
  background: #e8f6ee;
}

.ops-message-row em.offline {
  color: #a65b4f;
  background: #f9e8e5;
}

.ops-message-modal, .ops-popup-rule-modal {
  width: min(1120px, 100vw - 32px);
}

.ops-popup-rule-modal {
  background: #f6f9f7;
  width: min(1380px, 100vw - 32px);
}

.ops-popup-rule-modal > header {
  background: #fff;
}

.ops-popup-rule-modal > footer {
  z-index: 4;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fffffff5;
  position: sticky;
  bottom: 0;
  box-shadow: 0 -8px 24px #1934260f;
}

.ops-message-editor-grid, .ops-popup-editor-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 20px;
  display: grid;
}

.ops-popup-editor-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(330px, .65fr);
  align-items: start;
  gap: 24px;
  padding: 24px;
}

.ops-cover-upload {
  grid-template-columns: 1fr auto;
  gap: 8px;
  display: grid;
}

.ops-cover-upload > label, .platform-rich-upload {
  color: #286c4e;
  cursor: pointer;
  background: #edf7f1;
  border: 1px solid #cfe1d7;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 7px 11px;
  display: inline-flex;
}

.ops-cover-upload input[type="file"], .platform-rich-upload input {
  display: none;
}

.platform-rich-field {
  gap: 6px;
  display: grid;
}

.platform-rich-field > span {
  color: #52635b;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  display: flex;
}

.platform-rich-field > span b {
  flex: none;
  font-size: 12px;
}

.platform-rich-field > span small {
  color: #7b8982;
  text-align: right;
  font-size: 10px;
  font-weight: 400;
}

.platform-rich-toolbar {
  background: #f5f8f6;
  border: 1px solid #d9e4df;
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px;
  display: flex;
}

.platform-rich-toolbar button, .platform-rich-toolbar select {
  color: #385248;
  background: #fff;
  border: 1px solid #d8e3de;
  border-radius: 6px;
  min-height: 30px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
}

.platform-rich-upload {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

.platform-rich-image-tools {
  gap: 4px;
  display: flex;
}

.platform-rich-editor {
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid #d9e4df;
  border-radius: 0 0 9px 9px;
  outline: 0;
  min-height: 220px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.75;
}

.platform-rich-field--large .platform-rich-editor {
  min-height: 440px;
  font-size: 14px;
  line-height: 1.8;
}

.platform-rich-editor:empty:before {
  color: #98a49e;
  content: attr(data-placeholder);
  pointer-events: none;
}

.platform-rich-editor:focus {
  border-color: #3d9670;
  box-shadow: 0 0 0 3px #e1f1e9;
}

.platform-rich-editor img {
  cursor: pointer;
  max-width: 100%;
  height: auto;
}

.platform-rich-editor img:hover {
  outline: 2px solid #3d9670;
}

.ops-rich-preview {
  background: #f6fbf8;
  border: 1px dashed #bdd6ca;
  border-radius: 12px;
  align-self: start;
  gap: 10px;
  padding: 15px;
  display: grid;
  position: sticky;
  top: 0;
}

.ops-rich-preview > small {
  color: #277454;
  font-weight: 700;
}

.ops-rich-preview > img {
  object-fit: contain;
  border-radius: 8px;
  width: 100%;
  max-height: 180px;
}

.ops-rich-preview h3 {
  margin: 2px 0;
}

.ops-rich-preview iframe {
  background: #fff;
  border: 1px solid #e2e9e5;
  border-radius: 8px;
  width: 100%;
  height: 360px;
}

.ops-popup-rule-modal .ops-rich-preview iframe {
  height: 500px;
}

.ops-inline-form {
  gap: 9px;
  margin-top: 18px;
}

.ops-inline-form input {
  border-radius: 9px;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 13px;
}

.ops-tags {
  gap: 7px;
  margin-top: 15px;
}

.ops-tags span {
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11px;
}

.ops-message-list {
  margin-top: 15px;
}

.ops-message-list article {
  min-height: 60px;
  padding: 13px 3px;
}

.ops-message-list em {
  font-size: 10px;
}

.ops-message-list b {
  font-size: 13px;
}

.ops-message-list p {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.5;
}

.ops-modal {
  border-radius: 17px;
  width: min(720px, 100vw - 32px);
}

.ops-modal > header {
  gap: 20px;
  padding: 24px 26px 19px;
}

.ops-modal h2 {
  margin: 7px 0 5px;
  font-size: 23px;
  line-height: 1.3;
}

.ops-modal header p {
  font-size: 12px;
  line-height: 1.55;
}

.ops-modal header button {
  cursor: pointer;
  border-radius: 8px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  font-size: 23px;
}

.ops-modal header button:hover {
  background: #f0f4f1;
}

.ops-modal-body {
  gap: 16px;
  padding: 24px 26px;
}

.ops-rule-note {
  padding: 13px 14px;
  font-size: 11px;
  line-height: 1.7;
}

.ops-quote {
  gap: 7px;
  padding: 15px;
  font-size: 12px;
}

.ops-quote strong {
  font-size: 18px;
}

.ops-modal > footer {
  gap: 10px;
  padding: 17px 26px;
}

.ops-modal button, .ops-panel button, .ops-binding-card button, .ops-plan-head button {
  border-radius: 9px;
  min-height: 38px;
  padding: 8px 13px;
  font-size: 13px;
}

.ops-error {
  font-size: 12px;
}

.ops-login-error {
  padding: 10px 12px;
  font-size: 12px;
}

.ops-permissions {
  border-radius: 10px;
  gap: 10px;
  padding: 15px;
}

.ops-permissions legend {
  padding: 0 7px;
  font-size: 12px;
}

.ops-permissions label {
  border-radius: 7px;
  gap: 7px;
  padding: 7px 10px;
}

.ops-login {
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
  padding: clamp(40px, 7vw, 110px);
}

.ops-login-visual > small {
  letter-spacing: .18em;
  margin: 31px 0 12px;
  font-size: 11px;
}

.ops-login-visual h1 {
  font-size: clamp(38px, 4vw, 58px);
}

.ops-login-visual p {
  margin: 22px 0;
  font-size: 14px;
  line-height: 1.85;
}

.ops-login-points {
  flex-wrap: wrap;
  gap: 9px;
}

.ops-login-points span {
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 11px;
}

.ops-login-card {
  border-radius: 19px;
  gap: 19px;
  width: min(430px, 100%);
  padding: 38px;
}

.ops-login-card > div small {
  letter-spacing: .14em;
  font-size: 11px;
}

.ops-login-card h2 {
  margin: 8px 0 6px;
  font-size: 25px;
}

.ops-login-card p {
  font-size: 12px;
  line-height: 1.55;
}

.ops-login-card label {
  gap: 8px;
  font-size: 13px;
}

.ops-login-card input {
  border-radius: 9px;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
}

.ops-login-card > button {
  min-height: 44px;
  font-size: 14px;
}

.ops-login-help {
  font-size: 11px;
}

@media (max-width: 1180px) {
  .ops-shell {
    grid-template-columns: 228px minmax(0, 1fr);
  }

  .ops-content {
    padding-inline: 24px;
  }

  .ops-notice {
    width: calc(100% - 48px);
  }

  .ops-grid-two, .ops-binding-layout, .ops-sms-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .ops-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-plan-grid {
    grid-template-columns: 1fr;
  }

  .ops-plan-grid article {
    min-height: 0;
  }

  .ops-login {
    grid-template-columns: 1fr;
  }

  .ops-login-visual {
    display: none;
  }

  .ops-direct-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ops-shell {
    display: block;
  }

  .ops-sidebar {
    z-index: 30;
    height: auto;
    padding: 11px 14px 0;
    position: sticky;
    top: 0;
    box-shadow: 0 5px 18px #07160e2e;
  }

  .ops-brand {
    padding: 0 2px 10px;
  }

  .ops-brand > i {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .ops-brand b {
    font-size: 15px;
  }

  .ops-brand small {
    font-size: 10px;
  }

  .ops-sidebar nav {
    scrollbar-width: none;
    gap: 7px;
    padding-bottom: 10px;
    display: flex;
    overflow-x: auto;
  }

  .ops-sidebar nav::-webkit-scrollbar {
    display: none;
  }

  .ops-sidebar nav button {
    justify-content: center;
    min-width: max-content;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .ops-sidebar nav button:hover {
    transform: none;
  }

  .ops-sidebar nav i {
    width: 21px;
    height: 21px;
    font-size: 9px;
    display: grid;
  }

  .ops-topbar {
    min-height: 68px;
    padding: 12px 16px;
  }

  .ops-topbar h1 {
    font-size: 20px;
  }

  .ops-topbar small {
    font-size: 9px;
  }

  .ops-top-actions {
    gap: 8px;
  }

  .ops-top-actions button {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .ops-content {
    padding: 18px 15px 38px;
  }

  .ops-notice {
    width: calc(100% - 30px);
    margin: 10px auto 0;
    font-size: 12px;
  }

  .ops-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    min-height: 190px;
    padding: 27px 24px;
  }

  .ops-hero h2 {
    font-size: 25px;
  }

  .ops-hero p {
    font-size: 13px;
  }

  .ops-metrics {
    gap: 10px;
  }

  .ops-metrics button {
    min-height: 132px;
    padding: 16px;
  }

  .ops-metrics strong {
    overflow-wrap: anywhere;
    font-size: 23px;
  }

  .ops-panel {
    padding: 19px;
  }

  .ops-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ops-toolbar > div:last-child, .ops-toolbar input {
    width: 100%;
  }

  .ops-direct-heading {
    align-items: flex-start;
  }

  .ops-direct-heading-actions {
    flex-direction: column;
    align-items: flex-end;
  }

  .ops-direct-filters {
    grid-template-columns: 1fr;
  }

  .ops-direct-pagination {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .ops-direct-pagination > div {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }

  .ops-category-create {
    grid-template-columns: 1fr;
  }

  .ops-toolbar-actions {
    width: 100%;
  }

  .ops-toolbar-actions button {
    flex: 1;
  }

  .ops-agency-filters, .ops-agency-log-filters, .ops-ledger-filters, .ops-message-filters, .ops-merchant-filters {
    grid-template-columns: 1fr;
  }

  .ops-agency-log-filters > div {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .ops-message-row {
    grid-template-columns: 1fr;
  }

  .ops-message-row.head {
    display: none;
  }

  .ops-message-editor-grid, .ops-popup-editor-grid {
    grid-template-columns: 1fr;
  }

  .ops-rich-preview {
    position: static;
  }

  .ops-merchants .ops-row-actions {
    flex-wrap: wrap;
  }

  .ops-plan-head {
    flex-direction: column;
    align-items: stretch;
  }

  .ops-binding-card {
    padding: 23px;
  }

  .ops-binding-card > form, .ops-inline-form, .ops-content-grid {
    grid-template-columns: 1fr;
  }

  .ops-form-grid .full {
    grid-column: auto;
  }

  .ops-sms-rules article {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .ops-sms-rules em {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .ops-modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .ops-modal {
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-height: 94vh;
  }

  .ops-modal-body {
    grid-template-columns: 1fr;
    padding: 21px 20px;
  }

  .ops-modal-body > .full, .ops-rule-note, .ops-quote, .ops-error {
    grid-column: auto;
  }

  .ops-modal > header {
    padding: 21px 20px 17px;
  }

  .ops-modal > footer {
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: #fff;
    position: sticky;
    bottom: 0;
  }

  .ops-login {
    grid-template-columns: 1fr;
    min-height: 100dvh;
    padding: 22px;
  }

  .ops-login-card {
    padding: 28px 24px;
  }
}

.merchant-activity-page {
  gap: 18px;
  display: grid;
}

.merchant-activity-hero {
  color: #eef9f1;
  background: linear-gradient(125deg, #173c2d, #236447);
  border-radius: 18px;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 28px 30px;
  display: flex;
  box-shadow: 0 14px 35px #173c2d29;
}

.merchant-activity-hero small {
  color: #abd4bd;
  letter-spacing: .15em;
  font-size: 11px;
}

.merchant-activity-hero h2 {
  margin: 8px 0 6px;
  font-size: 28px;
}

.merchant-activity-hero p {
  color: #c5dbcf;
  max-width: 760px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.merchant-activity-period {
  background: #041e1257;
  border-radius: 10px;
  flex: none;
  gap: 4px;
  padding: 4px;
  display: flex;
}

.merchant-activity-period button {
  color: #c7ded1;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  min-height: 36px;
  padding: 7px 13px;
}

.merchant-activity-period button.active {
  color: #183a2b;
  background: #c8f274;
  font-weight: 700;
}

.merchant-activity-error {
  background: #fff0ee;
  border-radius: 10px;
  margin: 0;
  padding: 12px 14px;
}

.merchant-activity-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.merchant-activity-metrics article {
  background: #fff;
  border: 1px solid #e0e7e2;
  border-radius: 14px;
  min-width: 0;
  padding: 20px 21px;
  box-shadow: 0 6px 22px #1a31250a;
}

.merchant-activity-metrics span, .merchant-activity-metrics small {
  color: #74827a;
  font-size: 12px;
  display: block;
}

.merchant-activity-metrics strong {
  color: #172a20;
  font-variant-numeric: tabular-nums;
  margin: 7px 0 5px;
  font-size: 30px;
  line-height: 1.15;
  display: block;
}

.merchant-activity-metrics strong i {
  color: #8a978f;
  margin-left: 3px;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
}

.merchant-activity-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr);
  gap: 18px;
  display: grid;
}

.merchant-activity-grid--lower {
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
}

.merchant-activity-page article > header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.merchant-activity-page article > header h3 {
  margin: 0;
  font-size: 17px;
}

.merchant-activity-page article > header p {
  color: #7b8981;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

.merchant-activity-page article > header > small {
  color: #7d8c84;
  white-space: nowrap;
  font-size: 11px;
}

.merchant-activity-bars {
  border-top: 1px solid #eef2ef;
  align-items: flex-end;
  gap: clamp(5px, 1.2vw, 15px);
  height: 230px;
  margin-top: 22px;
  padding: 16px 8px 0;
  display: flex;
}

.merchant-activity-bars > div {
  text-align: center;
  flex: 1;
  grid-template-rows: 155px auto auto;
  align-items: end;
  gap: 5px;
  min-width: 0;
  display: grid;
}

.merchant-activity-bars > div > span {
  background: #f0f5f1;
  border-radius: 7px;
  justify-self: center;
  align-items: flex-end;
  width: min(28px, 78%);
  height: 100%;
  display: flex;
  overflow: hidden;
}

.merchant-activity-bars i {
  background: linear-gradient(#8fce68, #28754f);
  border-radius: 7px 7px 0 0;
  width: 100%;
  min-height: 4px;
  display: block;
}

.merchant-activity-bars b {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.merchant-activity-bars small {
  color: #859189;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.merchant-activity-levels > div {
  gap: 11px;
  margin-top: 23px;
  display: grid;
}

.merchant-activity-levels > div > span {
  background: #f7f9f7;
  border: 1px solid #e8ede9;
  border-radius: 9px;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  display: grid;
}

.merchant-activity-levels i {
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.merchant-activity-levels b {
  font-size: 12px;
}

.merchant-activity-levels strong {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.level-thriving {
  background: #2a7a4f !important;
}

.level-high {
  background: #75aa58 !important;
}

.level-moderate {
  background: #d8a849 !important;
}

.level-low {
  background: #d47b4b !important;
}

.level-dormant {
  background: #a8b0ab !important;
}

.merchant-feature-ranking > div {
  gap: 12px;
  margin-top: 22px;
  display: grid;
}

.merchant-feature-ranking > div > div {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  display: grid;
}

.merchant-feature-ranking i {
  color: #91a098;
  font-size: 10px;
  font-style: normal;
}

.merchant-feature-ranking span {
  gap: 7px;
  display: grid;
}

.merchant-feature-ranking span b {
  font-size: 12px;
}

.merchant-feature-ranking em {
  background: #edf2ee;
  border-radius: 4px;
  height: 5px;
  display: block;
  overflow: hidden;
}

.merchant-feature-ranking u {
  background: #4a966b;
  border-radius: 4px;
  height: 100%;
  display: block;
}

.merchant-feature-ranking strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  font-size: 12px;
}

.merchant-size-note ol {
  gap: 12px;
  margin: 21px 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
}

.merchant-size-note li {
  border-bottom: 1px solid #edf1ee;
  grid-template-columns: 75px 1fr;
  gap: 12px;
  padding: 10px 0;
  display: grid;
}

.merchant-size-note li b {
  font-size: 12px;
}

.merchant-size-note li span {
  color: #748179;
  font-size: 11px;
  line-height: 1.55;
}

.merchant-size-tags {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.merchant-size-tags span {
  color: #3b6d52;
  background: #edf6f0;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
}

.merchant-activity-list .ops-toolbar form {
  gap: 8px;
  display: flex;
}

.merchant-activity-list .ops-toolbar form input {
  width: 270px;
}

.merchant-activity-table .ops-tr {
  grid-template-columns: 1.2fr .9fr .55fr .8fr .75fr .9fr .7fr;
  min-width: 1050px;
}

.activity-pill {
  color: #fff !important;
  margin-left: 0 !important;
}

@media (max-width: 1100px) {
  .merchant-activity-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merchant-activity-grid, .merchant-activity-grid--lower {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .merchant-activity-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
  }

  .merchant-activity-period button {
    flex: 1;
  }

  .merchant-activity-metrics {
    grid-template-columns: 1fr;
  }

  .merchant-activity-list .ops-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .merchant-activity-list .ops-toolbar form input {
    width: 100%;
  }

  .merchant-activity-bars {
    gap: 4px;
    overflow-x: auto;
  }

  .merchant-activity-bars > div {
    min-width: 26px;
  }
}

@media (max-width: 460px) {
  .ops-metrics {
    grid-template-columns: 1fr;
  }

  .ops-metrics button {
    min-height: 116px;
  }

  .ops-health {
    grid-template-columns: 1fr;
  }

  .ops-health-ring {
    margin-inline: auto;
  }

  .ops-plan-grid li {
    grid-template-columns: 42px 1fr;
  }

  .ops-plan-grid li b {
    text-align: left;
  }

  .ops-plan-grid li b:last-child {
    grid-column: 2;
  }

  .ops-topbar small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-shell *, .ops-login * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation-duration: .01ms !important;
  }
}

.ops-plan-grid article.ops-plan-card--inactive {
  color: #647169;
  box-shadow: none;
  opacity: .82;
  background: #f2f4f3;
  border-color: #d8dedb;
}

.ops-plan-youbi-gift {
  border: 1px solid
    color-mix(in srgb, var(--ops-accent, #1f6b4a) 28%, transparent);
  width: fit-content;
  color: var(--ops-accent, #1f6b4a);
  background: color-mix(in srgb, var(--ops-accent, #1f6b4a) 9%, white);
  border-radius: 999px;
  margin: 0 0 14px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 750;
}

.ops-plan-grid article.ops-plan-card--inactive header em {
  color: #7b635e;
  background: #e8e2df;
}

.ops-plan-actions {
  gap: 7px;
  display: flex;
}

.ops-plan-actions button {
  color: #355244;
  cursor: pointer;
  background: #fff;
  border: 1px solid #cfdbd4;
  border-radius: 7px;
  min-height: 30px;
  padding: 6px 10px;
  font-size: 11px;
}

.ops-plan-actions button.danger {
  color: #a44941;
}

.ops-plan-actions button.enable {
  color: #26734c;
  background: #eaf5ed;
}

.ops-plan-card--premium .ops-plan-actions button {
  color: #e7f2eb;
  background: #294737;
  border-color: #496655;
}

.ops-plan-card--premium .ops-plan-actions button.danger {
  color: #ffc6bd;
}

.ops-plan-price-editor {
  gap: 10px;
  display: grid;
}

.ops-plan-price-editor > strong {
  color: #344a3e;
  font-size: 11px;
}

.ops-plan-price-editor > div {
  background: #f5f8f6;
  border-radius: 9px;
  grid-template-columns: 54px 1fr 1fr;
  align-items: end;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.ops-plan-price-editor > div > span {
  color: #527060;
  align-self: center;
  font-size: 11px;
  font-weight: 700;
}

.ops-modal.ops-plan-modal {
  width: min(980px, 96vw);
}

.ops-plan-ai-summary {
  color: #365949;
  background: #f0f7f2;
  border: 1px solid #dbe8df;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding: 10px 12px;
  font-size: 11px;
  display: flex;
}

.ops-ai-analysis-config {
  background: linear-gradient(145deg, #f7fbf8, #eef6f1);
  border: 1px solid #dce7e0;
  border-radius: 12px;
  margin: 0;
  padding: 16px;
}

.ops-ai-analysis-config legend {
  color: #213b2f;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 800;
}

.ops-ai-analysis-config > p {
  color: #6d8075;
  margin: 0 0 12px;
  font-size: 11px;
}

.ops-ai-analysis-config > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  display: grid;
}

.ops-ai-analysis-config label {
  background: #ffffffd1;
  border: 1px solid #e0e9e3;
  border-radius: 9px;
  grid-template-columns: auto minmax(0, 1fr) auto 64px auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  display: grid;
}

.ops-ai-analysis-config label > input[type="checkbox"] {
  width: 17px;
  height: 17px;
}

.ops-ai-analysis-config label > input[type="number"] {
  text-align: center;
  min-width: 0;
  height: 34px;
  padding: 6px;
}

.ops-ai-analysis-config label span, .ops-ai-analysis-config label b, .ops-ai-analysis-config label small {
  display: block;
}

.ops-ai-analysis-config label small {
  color: #77877e;
  margin-top: 3px;
  font-size: 10px;
}

.ops-ai-analysis-config label em {
  color: #789083;
  font-size: 10px;
  font-style: normal;
}

@media (max-width: 760px) {
  .ops-ai-analysis-config > div {
    grid-template-columns: 1fr;
  }
}

.ops-media-storage {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  display: grid;
}

.ops-media-storage > :first-child {
  grid-column: 1 / -1;
}

.ops-media-facts {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
  display: grid;
}

.ops-media-facts article {
  background: #f5f8f6;
  border: 1px solid #e0e8e3;
  border-radius: 11px;
  min-width: 0;
  padding: 16px;
}

.ops-media-facts small, .ops-media-facts strong, .ops-media-facts span {
  display: block;
}

.ops-media-facts small {
  color: #7d8b83;
  font-size: 10px;
}

.ops-media-facts strong {
  overflow-wrap: anywhere;
  color: #213b2f;
  margin: 8px 0;
  font-size: 15px;
}

.ops-media-facts span {
  color: #7d8b83;
  font-size: 10px;
}

.ops-media-facts span.ok {
  color: #247451;
}

.ops-provider-grid {
  gap: 10px;
  margin-top: 18px;
  display: grid;
}

.ops-provider-grid article {
  border: 1px solid #e0e7e3;
  border-radius: 10px;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  display: grid;
}

.ops-provider-grid article.active {
  background: #eef8f2;
  border-color: #77aa90;
}

.ops-provider-grid i {
  color: #fff;
  background: #2c7454;
  border-radius: 9px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-style: normal;
  display: grid;
}

.ops-provider-grid b, .ops-provider-grid small {
  display: block;
}

.ops-provider-grid small {
  color: #87938c;
  margin-top: 4px;
  font-size: 10px;
}

.ops-provider-grid em {
  color: #718078;
  font-size: 10px;
  font-style: normal;
}

@media (max-width: 900px) {
  .ops-media-storage {
    grid-template-columns: 1fr;
  }

  .ops-media-storage > :first-child {
    grid-column: auto;
  }

  .ops-media-facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .ops-media-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ops-plan-price-editor > div {
    grid-template-columns: 1fr;
  }
}

.ops-workspace {
  --ops-page-gutter: clamp(22px, 3vw, 42px);
}

.ops-topbar {
  padding-inline: var(--ops-page-gutter);
}

.ops-content {
  padding-right: var(--ops-page-gutter);
  padding-left: var(--ops-page-gutter);
  margin-left: 0;
  margin-right: 0;
}

.ops-notice {
  z-index: 1200;
  border-radius: 14px;
  width: min(520px, 100vw - 32px);
  margin: 0;
  padding: 16px 18px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 22px 70px #122d2347;
}

@media (max-width: 1180px) {
  .ops-workspace {
    --ops-page-gutter: 24px;
  }
}

@media (max-width: 760px) {
  .ops-workspace {
    --ops-page-gutter: 16px;
  }

  .ops-content {
    padding: 18px var(--ops-page-gutter) 38px;
  }

  .ops-notice {
    margin-top: 10px;
  }
}

.ops-nav-groups {
  display: grid;
  gap: 8px !important;
}

@media (min-width: 761px) {
  .ops-shell {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .ops-sidebar {
    min-height: 0;
    position: static;
    overflow: hidden;
  }

  .ops-brand, .ops-scope, .ops-user {
    flex: none;
  }

  .ops-nav-groups {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    flex: auto;
    align-content: start;
    min-height: 0;
    padding-right: 4px;
    overflow-y: auto;
  }

  .ops-workspace {
    overscroll-behavior: contain;
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
  }

  .ops-topbar {
    z-index: 40;
    position: sticky;
    top: 0;
  }

  .ops-shell--platform {
    align-items: stretch;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .ops-shell--platform .ops-sidebar {
    min-height: 100vh;
    overflow: visible;
  }

  .ops-shell--platform .ops-nav-groups {
    scrollbar-gutter: auto;
    flex: none;
    min-height: auto;
    padding-right: 0;
    overflow: visible;
  }

  .ops-shell--platform .ops-workspace {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
}

.ops-nav-group {
  min-width: 0;
}

.ops-nav-group.always-expanded {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.ops-sidebar .ops-nav-parent {
  color: #afc0b7;
  cursor: pointer;
  letter-spacing: .01em;
  background: #ffffff09;
  border: 1px solid #ffffff0f;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 9px 11px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
}

.ops-sidebar .ops-nav-parent:hover {
  color: #fff;
  transform: none;
}

.ops-nav-parent > span {
  align-items: center;
  gap: 11px;
  display: flex;
}

.ops-nav-parent > span > i {
  opacity: .9;
  border: 1px solid;
  border-radius: 8px;
  place-items: center;
  width: 27px;
  height: 27px;
  font-size: 11px;
  font-style: normal;
  display: grid;
}

.ops-nav-parent > b {
  color: currentColor;
  font-size: 13px;
  font-weight: 500;
  transition: transform .18s;
}

.ops-nav-group.expanded .ops-nav-parent > b {
  transform: rotate(180deg);
}

.ops-nav-group.has-active:not(.expanded) .ops-nav-parent:after {
  content: "";
  background: var(--ops-accent);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-left: auto;
  box-shadow: 0 0 0 4px #ffffff0f;
}

.ops-nav-group.has-active:not(.expanded) .ops-nav-parent > b {
  display: none;
}

.ops-nav-children {
  background: #0000001f;
  border-left: 2px solid #ffffff24;
  border-radius: 0 9px 9px 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  margin: 6px 4px 2px 17px;
  padding: 6px 6px 6px 9px;
  display: grid;
}

.ops-nav-group.always-expanded .ops-nav-children {
  width: auto;
  margin-top: 7px;
}

.ops-nav-group.always-expanded .ops-nav-parent {
  cursor: pointer;
}

.ops-sidebar .ops-nav-children > button {
  color: #92a89d;
  border-radius: 8px;
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
}

.ops-sidebar .ops-nav-children > button i {
  border-radius: 7px;
  width: 23px;
  height: 23px;
  font-size: 9px;
}

.ops-shell--platform, .ops-login--platform {
  --ops-primary: #1f5f9f;
  --ops-primary-hover: #174d84;
  --ops-accent: #75d4ff;
}

@media (min-width: 761px) {
  .ops-shell--platform {
    background: linear-gradient(to right, #0d223a 0 252px, #f5f7f5 252px 100%);
  }
}

.ops-shell--platform .ops-top-actions .ops-youbi-shortcut {
  color: #124b73;
  background: #e8f7ff;
  border-color: #8fcde9;
  font-weight: 800;
}

.ops-shell--platform .ops-top-actions .ops-youbi-shortcut:hover, .ops-shell--platform .ops-top-actions .ops-youbi-shortcut.active {
  color: #fff;
  background: #1f5f9f;
  border-color: #1f5f9f;
}

.ops-shell--platform .ops-sidebar {
  background: #0d223a;
  border-right-color: #213c59;
}

.ops-shell--platform .ops-scope {
  background: #142d49;
  border-color: #2b4865;
}

.ops-shell--platform .ops-sidebar nav button:hover {
  background: #173653;
}

.ops-shell--platform .ops-sidebar nav button.active {
  color: #0b2943;
  background: #75d4ff;
}

.ops-shell--platform .ops-nav-group.expanded .ops-nav-parent {
  color: #e8f6ff;
  background: #173c5e;
  border-color: #2b5879;
}

.ops-shell--platform .ops-nav-group.direct.has-active .ops-nav-parent {
  color: #0b2943;
  background: #75d4ff;
  border-color: #75d4ff;
}

.ops-shell--platform .ops-nav-group.direct.has-active .ops-nav-parent:after {
  background: #0b2943;
  box-shadow: 0 0 0 4px #0b29431a;
}

.ops-shell--platform .ops-nav-children {
  background: #091c30;
  border-left-color: #4a91bd;
}

.ops-shell--platform .ops-brand > i {
  color: #0b2943;
  background: #75d4ff;
}

.ops-shell--platform .ops-hero {
  background: linear-gradient(125deg, #174f84, #0c2c4d 68%, #1b659f);
}

.ops-login--platform {
  background: radial-gradient(circle at 20% 15%, #194d79 0, #0000 38%), #0c2035;
}

.ops-login--platform .ops-login-logo {
  color: #0b2943;
  background: #75d4ff;
}

.ops-shell--agency, .ops-login--agency {
  --ops-primary: #287355;
  --ops-primary-hover: #1e5a42;
  --ops-accent: #a8d978;
}

.ops-shell--agency .ops-sidebar {
  background: #0d291e;
  border-right-color: #214536;
}

.ops-shell--agency .ops-scope {
  background: #15392a;
  border-color: #2b513f;
}

.ops-shell--agency .ops-sidebar nav button:hover {
  background: #1a4332;
}

.ops-shell--agency .ops-sidebar nav button.active {
  color: #143425;
  background: #a8d978;
}

.ops-shell--agency .ops-nav-group.expanded .ops-nav-parent {
  color: #eef9f3;
  background: #1a4936;
  border-color: #34654f;
}

.ops-shell--agency .ops-nav-group.direct.has-active .ops-nav-parent {
  color: #143425;
  background: #a8d978;
  border-color: #a8d978;
}

.ops-shell--agency .ops-nav-group.direct.has-active .ops-nav-parent:after {
  background: #143425;
  box-shadow: 0 0 0 4px #1434251a;
}

.ops-shell--agency .ops-nav-children {
  background: #081f16;
  border-left-color: #5f9a78;
}

.ops-shell--agency .ops-brand > i {
  color: #143425;
  background: #a8d978;
}

.ops-shell--agency .ops-hero {
  background: linear-gradient(125deg, #236246, #102f22 68%, #347b5b);
}

.ops-shell--agency .ops-live {
  color: #287355;
}

.ops-shell--agency .ops-live:before {
  background: #4ca879;
  box-shadow: 0 0 0 4px #dff2e8;
}

.ops-login--agency {
  background: radial-gradient(circle at 20% 15%, #245d44 0, #0000 38%), #0b251a;
}

.ops-login--agency .ops-login-logo {
  color: #143425;
  background: #a8d978;
}

.ops-system-overview {
  gap: 18px;
  display: grid;
}

.ops-system-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.ops-system-card-grid article {
  flex-direction: column;
  align-items: flex-start;
  min-height: 230px;
  display: flex;
}

.ops-system-card-grid article > i {
  color: #fff;
  background: var(--ops-primary);
  border-radius: 11px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 13px;
  font-style: normal;
  display: grid;
}

.ops-system-card-grid h3 {
  margin: 18px 0 8px;
  font-size: 16px;
}

.ops-system-card-grid p {
  color: var(--ops-muted);
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.7;
}

.ops-system-card-grid button, .ops-system-card-grid span {
  margin-top: auto;
}

.ops-system-card-grid span {
  color: var(--ops-primary);
  font-size: 11px;
  font-weight: 700;
}

.ops-system-runbook {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  display: flex;
}

.ops-system-runbook small {
  color: var(--ops-primary);
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 800;
}

.ops-system-runbook h3 {
  margin: 8px 0 5px;
  font-size: 15px;
}

.ops-system-runbook p {
  color: var(--ops-muted);
  margin: 0;
  font-size: 11px;
}

.ops-system-runbook em {
  color: #246b4c;
  background: #eaf5ee;
  border-radius: 7px;
  flex: none;
  padding: 7px 10px;
  font-size: 10px;
  font-style: normal;
}

.ops-infrastructure {
  gap: 22px;
  display: grid;
}

.ops-infra-error {
  background: #fff0ee;
  border-radius: 9px;
  margin: -8px 0 0;
  padding: 12px 14px;
}

.ops-runtime-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.ops-runtime-strip article {
  border: 1px solid var(--ops-line);
  background: #fff;
  border-radius: 13px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 96px;
  padding: 18px;
  display: grid;
}

.ops-runtime-strip i {
  color: #fff;
  background: var(--ops-primary);
  border-radius: 10px;
  place-items: center;
  width: 40px;
  height: 40px;
  font-style: normal;
  display: grid;
}

.ops-runtime-strip small, .ops-runtime-strip b, .ops-runtime-strip em {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.ops-runtime-strip small {
  color: var(--ops-muted);
  font-size: 10px;
}

.ops-runtime-strip b {
  margin: 4px 0 2px;
  font-size: 14px;
}

.ops-runtime-strip em {
  color: var(--ops-subtle);
  font-size: 10px;
  font-style: normal;
}

.ops-infra-section {
  gap: 14px;
  display: grid;
}

.ops-infra-heading {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  display: flex;
}

.ops-infra-heading h3 {
  margin: 0;
  font-size: 17px;
}

.ops-infra-heading p {
  color: var(--ops-muted);
  margin: 5px 0 0;
  font-size: 11px;
}

.ops-infra-heading > span {
  color: var(--ops-primary);
  flex: none;
  font-size: 11px;
  font-weight: 700;
}

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

.ops-infra-cards--database {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);
}

.ops-infra-provider {
  flex-direction: column;
  min-height: 238px;
  display: flex;
}

.ops-infra-provider.configured {
  border-color: color-mix(in srgb, var(--ops-primary) 38%, #dce4df);
}

.ops-infra-provider > header {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  display: grid;
}

.ops-infra-provider header > i {
  color: #fff;
  background: var(--ops-primary);
  border-radius: 10px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-style: normal;
  display: grid;
}

.ops-infra-provider h4 {
  margin: 0;
  font-size: 14px;
}

.ops-infra-provider header p {
  color: var(--ops-muted);
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

.ops-infra-provider header em {
  white-space: nowrap;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 9px;
  font-style: normal;
}

.ops-infra-provider header em.ok {
  color: #246b4c;
  background: #e6f4eb;
}

.ops-infra-provider header em.off {
  color: #8a6a3d;
  background: #fbf1df;
}

.ops-infra-provider dl {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 0;
  display: grid;
}

.ops-infra-provider dl div {
  background: #f6f8f7;
  border-radius: 8px;
  padding: 9px;
}

.ops-infra-provider dt {
  color: var(--ops-muted);
  font-size: 9px;
}

.ops-infra-provider dd {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 4px 0 0;
  font-size: 10px;
  overflow: hidden;
}

.ops-infra-provider > footer {
  gap: 8px;
  margin-top: auto;
  display: flex;
}

.ops-migration-guard b {
  font-size: 14px;
}

.ops-migration-guard ol {
  color: var(--ops-muted);
  gap: 10px;
  margin: 15px 0 0;
  padding-left: 20px;
  font-size: 11px;
  display: grid;
}

.ops-migration-list {
  gap: 0;
  display: grid;
}

.ops-migration-list > .ops-infra-heading {
  margin-bottom: 14px;
}

.ops-migration-list > article {
  border-top: 1px solid #e8edea;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  display: grid;
}

.ops-migration-list > article > i {
  width: 34px;
  height: 34px;
  color: var(--ops-primary);
  background: color-mix(in srgb, var(--ops-primary) 10%, white);
  border-radius: 9px;
  place-items: center;
  font-style: normal;
  display: grid;
}

.ops-migration-list b, .ops-migration-list small {
  display: block;
}

.ops-migration-list b {
  font-size: 12px;
}

.ops-migration-list small {
  color: var(--ops-muted);
  margin-top: 4px;
  font-size: 10px;
}

.ops-migration-list article > em {
  color: #7c642f;
  background: #fbf3df;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 9px;
  font-style: normal;
}

@media (max-width: 1200px) {
  .ops-system-card-grid, .ops-infra-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ops-nav-groups {
    grid-template-columns: 1fr !important;
  }

  .ops-sidebar .ops-nav-parent, .ops-sidebar nav button {
    justify-content: flex-start;
  }

  .ops-sidebar .ops-nav-parent > b {
    margin-left: auto;
  }

  .ops-sidebar nav i {
    display: grid;
  }

  .ops-runtime-strip, .ops-system-card-grid, .ops-infra-cards, .ops-infra-cards--database {
    grid-template-columns: 1fr;
  }

  .ops-system-runbook {
    flex-direction: column;
    align-items: flex-start;
  }
}

.ops-agency-create-modal {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #fafcfbf5;
  border: 1px solid #ffffffb8;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1080px, 100vw - 48px);
  max-height: min(90vh, 860px);
  animation: .32s ease-out both ops-agency-modal-enter;
  display: grid;
  overflow: hidden;
  box-shadow: 0 32px 90px #08231647, inset 0 1px #fffc;
}

.ops-agency-create-modal > header {
  background: linear-gradient(120deg, #ebf7f0f5, #fafcfbd6);
  padding: 27px 30px 22px;
  position: relative;
  overflow: hidden;
}

.ops-agency-create-modal > header:before {
  background: color-mix(in srgb, var(--ops-primary) 14%, transparent);
  content: "";
  border-radius: 50%;
  width: 220px;
  height: 220px;
  position: absolute;
  top: -170px;
  right: 90px;
}

.ops-agency-create-modal > header > * {
  position: relative;
}

.ops-agency-create-modal > header h2 {
  font-size: 26px;
}

.ops-agency-create-modal > header p {
  max-width: 650px;
}

.ops-agency-create-modal .ops-agency-form-layout {
  background: #f5f9f7b8;
  gap: 15px;
  padding: 20px 30px 24px;
  display: grid;
  overflow-y: auto;
}

.ops-agency-form-section {
  background: #ffffffe6;
  border: 1px solid #dfe8e3;
  border-radius: 14px;
  min-width: 0;
  margin: 0;
  padding: 17px 19px 19px;
  box-shadow: 0 10px 28px #1b442f0b;
}

.ops-agency-form-section legend {
  max-width: calc(100% - 12px);
  color: var(--ops-text);
  grid-template-columns: 28px max-content minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 9px 0 0;
  display: grid;
}

.ops-agency-form-section legend > span {
  color: #fff;
  background: var(--ops-primary);
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.ops-agency-form-section legend > b {
  font-size: 14px;
}

.ops-agency-form-section legend > small {
  color: var(--ops-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
  overflow: hidden;
}

.ops-agency-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
  display: grid;
}

.ops-agency-fields--account {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-agency-fields label {
  color: #52645a;
  gap: 7px;
  font-size: 12px;
  font-weight: 650;
  display: grid;
}

.ops-agency-fields input, .ops-agency-fields select, .ops-agency-fields textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  color: var(--ops-text);
  font: inherit;
  background: #fbfdfc;
  border: 1px solid #d6e1db;
  border-radius: 9px;
  outline: none;
  padding: 10px 12px;
  transition: border-color .3s ease-out, background-color .3s ease-out, box-shadow .3s ease-out, transform .3s ease-out;
}

.ops-agency-fields input:hover, .ops-agency-fields select:hover, .ops-agency-fields textarea:hover {
  background: #fff;
  border-color: #b9cec2;
}

.ops-agency-fields input:focus, .ops-agency-fields select:focus, .ops-agency-fields textarea:focus {
  border-color: var(--ops-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ops-primary) 13%, transparent),
    0 7px 18px #1f5b3d12;
  background: #fff;
  transform: translateY(-1px);
}

.ops-agency-fields select:disabled {
  color: #98a69e;
  cursor: not-allowed;
  background: #f0f4f2;
}

.ops-agency-fields textarea {
  resize: vertical;
  min-height: 78px;
}

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

.ops-agency-create-modal > footer {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffffff0;
  justify-content: space-between;
  padding: 17px 30px;
}

.ops-modal-footnote {
  color: var(--ops-muted);
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.ops-modal-footnote i {
  background: #48a776;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px #e4f3ea;
}

.ops-modal-actions {
  gap: 10px;
  display: flex;
}

.ops-agency-create-modal .ops-modal-actions button {
  min-width: 104px;
}

@keyframes ops-agency-modal-enter {
  from {
    opacity: 0;
    transform: translateY(18px)scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@media (max-width: 900px) {
  .ops-agency-create-modal {
    width: min(760px, 100vw - 28px);
  }

  .ops-agency-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ops-agency-create-modal {
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-height: 94vh;
  }

  .ops-agency-create-modal > header {
    padding: 22px 20px 18px;
  }

  .ops-agency-create-modal > header h2 {
    font-size: 23px;
  }

  .ops-agency-create-modal .ops-agency-form-layout {
    gap: 12px;
    padding: 16px 14px 20px;
  }

  .ops-agency-form-section {
    padding: 14px;
  }

  .ops-agency-form-section legend {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .ops-agency-form-section legend > small {
    display: none;
  }

  .ops-agency-fields, .ops-agency-fields--account {
    grid-template-columns: 1fr;
  }

  .ops-agency-create-modal > footer {
    padding: 13px 14px calc(13px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
  }

  .ops-modal-footnote {
    justify-content: center;
  }

  .ops-modal-actions {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .ops-agency-detail-modal {
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-height: 94vh;
  }

  .ops-agency-detail-summary {
    grid-template-columns: 1fr 1fr;
  }

  .ops-agency-action-modal {
    border-radius: 18px 18px 0 0;
    width: 100%;
  }

  .ops-agency-action-target {
    grid-template-columns: 1fr;
  }

  .ops-agency-gallery-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ops-agency-gallery-toolbar > label {
    justify-content: center;
  }

  .ops-agency-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .ops-image-lightbox {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 4px;
    padding-inline: 6px;
  }

  .ops-lightbox-nav {
    width: 42px;
    height: 42px;
    font-size: 31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-agency-create-modal {
    animation: none;
  }

  .ops-agency-fields input, .ops-agency-fields select, .ops-agency-fields textarea {
    transition: none;
  }
}

@media (max-width: 1200px) {
  .ops-merchant-search-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-merchant-search-advanced {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-merchant-search-actions {
    align-self: end;
  }
}

@media (max-width: 760px) {
  .ops-merchant-search-heading {
    align-items: flex-start;
    padding: 14px;
  }

  .ops-merchant-search-heading small {
    max-width: 220px;
    line-height: 1.45;
  }

  .ops-merchant-search-primary, .ops-merchant-search-advanced {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .ops-filter-range--date {
    grid-column: auto;
  }

  .ops-merchant-search-actions {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .ops-merchant-search-summary {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-merchant-search-advanced {
    animation: none;
  }

  .ops-filter-toggle span, .ops-merchant-search-panel input, .ops-merchant-search-panel select, .ops-row-actions .ops-merchant-login {
    transition: none;
  }

  .ops-row-actions .ops-merchant-login:hover:not(:disabled) {
    transform: none;
  }
}

.ops-online-bills {
  gap: 18px;
  display: grid;
}

.ops-online-bill-hero {
  color: #f5fff9;
  background: radial-gradient(circle at 82% 15%, #cbeed747, #0000 28%), linear-gradient(135deg, #173f31 0%, #246247 58%, #397f5d 100%);
  border-radius: 18px;
  justify-content: space-between;
  align-items: center;
  min-height: 154px;
  padding: 28px 32px;
  display: flex;
  box-shadow: 0 18px 38px #1a50382e;
}

.ops-online-bill-hero small {
  color: #a9d5bd;
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 800;
}

.ops-online-bill-hero h2 {
  margin: 8px 0 6px;
  font-size: 28px;
}

.ops-online-bill-hero p {
  color: #d3e9dc;
  margin: 0;
  font-size: 13px;
}

.ops-online-bill-hero > i {
  color: #1c5b3f;
  background: linear-gradient(145deg, #f7fff9, #cce8d8);
  border: 1px solid #ffffffad;
  border-radius: 22px;
  place-items: center;
  width: 72px;
  height: 72px;
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
  display: grid;
  box-shadow: 0 14px 30px #0723173d;
}

.ops-online-bill-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.ops-online-bill-summary article {
  background: linear-gradient(145deg, #fff, #f6faf7);
  border: 1px solid #dde8e1;
  border-radius: 14px;
  min-height: 112px;
  padding: 18px 20px;
  box-shadow: 0 8px 22px #214b370f;
}

.ops-online-bill-summary small, .ops-online-bill-summary b, .ops-online-bill-summary span {
  display: block;
}

.ops-online-bill-summary small {
  color: var(--ops-muted);
  font-size: 11px;
}

.ops-online-bill-summary b {
  color: #205f43;
  margin-top: 9px;
  font-size: 22px;
  line-height: 1.2;
}

.ops-online-bill-summary span {
  color: #849189;
  margin-top: 7px;
  font-size: 10px;
}

.ops-online-bill-filters {
  background: #fff;
  border: 1px solid #dfe8e3;
  border-radius: 15px;
  grid-template-columns: repeat(2, minmax(170px, .9fr)) minmax(260px, 1.35fr) minmax(165px, .8fr) minmax(135px, .65fr) auto;
  align-items: end;
  gap: 10px;
  padding: 18px;
  display: grid;
}

.ops-online-bill-filters label {
  color: #65756c;
  gap: 6px;
  font-size: 11px;
  display: grid;
}

.ops-online-bill-filters input, .ops-online-bill-filters select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  color: var(--ops-text);
  background: #fbfdfc;
  border: 1px solid #d7e2db;
  border-radius: 9px;
  padding: 9px 11px;
}

.ops-online-bill-filters input:focus, .ops-online-bill-filters select:focus {
  border-color: #6da487;
  outline: 3px solid #4e8b681f;
}

.ops-online-bill-filters > div:last-child, .ops-online-bill-amount {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ops-online-bill-filters > div:last-child button {
  white-space: nowrap;
  min-height: 42px;
}

.ops-online-bill-amount em {
  color: #91a098;
  font-size: 11px;
  font-style: normal;
}

.ops-online-bill-table {
  background: #fff;
  border: 1px solid #dfe8e3;
  border-radius: 15px;
  overflow-x: auto;
}

.ops-online-bill-table .ops-tr {
  grid-template-columns: .9fr .58fr 1fr 1.25fr .72fr 1.12fr .8fr .62fr;
  min-width: 1460px;
}

.ops-online-bill-table .ops-tr > span {
  padding-block: 14px;
}

.ops-online-bill-table em {
  border-radius: 999px;
  margin: 0;
  padding: 5px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.ops-online-bill-table em.wechat {
  color: #187746;
  background: #e2f6e9;
}

.ops-online-bill-table em.alipay {
  color: #1766a8;
  background: #e5f2fd;
}

.ops-online-bill-table strong {
  color: #1d6746;
  font-size: 15px;
}

.ops-online-order-no, .ops-online-trade-no {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.ops-online-bill-table .status-refunded, .ops-online-bill-table .status-frozen {
  color: #9b5148;
  background: #f9e8e5;
}

.ops-online-bill-table .status-available, .ops-online-bill-table .status-in_withdrawal {
  color: #936b19;
  background: #fff2d4;
}

.ops-online-bill-table .status-settled {
  color: #287052;
  background: #e5f3eb;
}

.ops-online-bill-footer {
  min-height: 44px;
  color: var(--ops-muted);
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  font-size: 11px;
  display: flex;
}

.ops-online-bill-footer button {
  min-width: 110px;
}

@media (max-width: 1180px) {
  .ops-online-bill-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-online-bill-filters > div:last-child {
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .ops-online-bill-hero {
    min-height: 0;
    padding: 22px;
  }

  .ops-online-bill-hero > i {
    border-radius: 17px;
    width: 56px;
    height: 56px;
  }

  .ops-online-bill-summary, .ops-online-bill-filters {
    grid-template-columns: 1fr;
  }

  .ops-online-bill-filters > div:last-child {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
}

.ops-version-line {
  align-items: center;
  gap: 7px;
  display: flex !important;
  overflow: visible !important;
}

.ops-version-badge {
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #0000;
  border-radius: 999px;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 25px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  display: inline-flex;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff85;
}

.ops-version-badge.trial {
  color: #176746;
  background: #e1f6eb;
  border-color: #a7dfc2;
}

.ops-version-badge.basic {
  color: #1d5f9a;
  background: #e8f4ff;
  border-color: #b5d8f3;
}

.ops-version-badge.pro {
  color: #6743a5;
  background: #f1eaff;
  border-color: #d1bff0;
}

.ops-version-badge.flagship {
  color: #8a5710;
  background: #fff2d3;
  border-color: #ead19a;
}

.ops-version-badge.unopened {
  color: #6c7771;
  background: #eef1ef;
  border-color: #d6ddda;
}

.ops-version-badge.tone-0 {
  color: #116b70;
  background: #e4f7f7;
  border-color: #a9dfe1;
}

.ops-version-badge.tone-1 {
  color: #a03d58;
  background: #fff0f4;
  border-color: #efbdca;
}

.ops-version-badge.tone-2 {
  color: #3f55a5;
  background: #edf0ff;
  border-color: #bec9f0;
}

.ops-version-badge.tone-3 {
  color: #9a4c19;
  background: #fff0e5;
  border-color: #edc2a2;
}

.ops-version-badge.tone-4 {
  color: #3d7025;
  background: #edf7e7;
  border-color: #bfdcae;
}

.ops-version-badge.tone-5 {
  color: #53616f;
  background: #edf2f6;
  border-color: #c8d2dc;
}

.ops-subscription-success-backdrop {
  z-index: 220;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #071c149e;
}

.ops-subscription-success {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, var(--ui-border));
  background: radial-gradient(circle at 50% 0,
      rgba(var(--ui-accent-rgb), .18),
      transparent 42%),
    var(--ui-panel-solid);
  text-align: center;
  border-radius: 22px;
  width: min(480px, 100vw - 32px);
  padding: 34px 34px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 90px #07221757;
}

.ops-subscription-success:before {
  content: "";
  background: linear-gradient(90deg, #37a873, #77d4a6, #d9b85d);
  height: 5px;
  position: absolute;
  inset: 0 0 auto;
}

.ops-subscription-success-close {
  z-index: 1;
  width: 34px;
  height: 34px;
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  border: 0;
  border-radius: 50%;
  padding: 0;
  font-size: 22px;
  position: absolute;
  top: 14px;
  right: 14px;
}

.ops-subscription-success-mark {
  background: linear-gradient(145deg, #258a5f, #68c995);
  border-radius: 50%;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 5px auto 16px;
  display: grid;
  box-shadow: 0 14px 30px #258a5f47;
}

.ops-subscription-success-mark span {
  color: #fff;
  border: 2px solid #ffffffb8;
  border-radius: 50%;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 31px;
  font-weight: 900;
  display: grid;
}

.ops-subscription-success > small {
  color: var(--ui-accent);
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 850;
}

.ops-subscription-success h2 {
  color: var(--ui-text);
  margin: 8px 0 6px;
  font-size: 25px;
}

.ops-subscription-success > p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 12px;
}

.ops-subscription-success-charge {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, var(--ui-border));
  background: color-mix(in srgb,
    var(--ui-accent-soft) 72%,
    var(--ui-panel-solid));
  border-radius: 15px;
  gap: 5px;
  margin: 22px 0 15px;
  padding: 17px;
  display: grid;
}

.ops-subscription-success-charge span, .ops-subscription-success-charge small {
  color: var(--ui-muted);
  font-size: 11px;
}

.ops-subscription-success-charge strong {
  color: var(--ui-accent);
  font-size: 31px;
  line-height: 1.15;
}

.ops-subscription-success > b {
  color: var(--ui-text);
  font-size: 12px;
}

.ops-subscription-success footer {
  margin-top: 22px;
}

.ops-subscription-success footer button {
  border-radius: 11px;
  width: 100%;
  min-height: 44px;
  font-size: 14px;
  font-weight: 850;
}

@media (max-width: 560px) {
  .ops-subscription-success {
    padding: 30px 20px 22px;
  }

  .ops-subscription-success h2 {
    font-size: 21px;
  }

  .ops-subscription-success-charge strong {
    font-size: 27px;
  }
}

.ops-channel-entitlements {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-soft);
  border-radius: 16px;
  gap: 14px;
  margin: 0;
  padding: 18px;
  display: grid;
}

.ops-channel-entitlements > legend {
  color: var(--ui-text);
  padding: 0 8px;
  font-size: 15px;
  font-weight: 850;
}

.ops-channel-entitlements > p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 12px;
}

.ops-channel-entitlements > details {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 13px;
  overflow: hidden;
}

.ops-channel-entitlements > details > summary {
  cursor: pointer;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  list-style: none;
  display: flex;
}

.ops-channel-entitlements > details > summary::-webkit-details-marker {
  display: none;
}

.ops-channel-entitlements > details > summary:after {
  color: var(--ui-muted);
  content: "展开";
  margin-left: auto;
}

.ops-channel-entitlements > details[open] > summary:after {
  content: "收起";
}

.ops-channel-entitlements > details > summary span {
  color: var(--ui-muted);
  font-size: 12px;
}

.ops-channel-entitlements > details > div {
  border: 0;
  border-top: 1px solid var(--ui-border);
  border-radius: 0;
}

.ops-consumer-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  display: grid;
}

.ops-consumer-module-grid label {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface-soft);
  border-radius: 14px;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  display: flex;
}

.ops-consumer-module-grid input {
  margin-top: 3px;
}

.ops-consumer-module-grid span {
  gap: 4px;
  display: grid;
}

.ops-consumer-module-grid b {
  color: var(--ui-text);
}

.ops-consumer-module-grid small {
  color: var(--ui-muted);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .ops-consumer-module-grid {
    grid-template-columns: 1fr;
  }
}

.ops-wechat-member-entitlement {
  border: 1px solid color-mix(in srgb, #18a058 35%, var(--ui-border));
  background: color-mix(in srgb, #18a058 8%, var(--ui-panel-solid));
  border-radius: 13px;
  align-items: flex-start;
  gap: 12px;
  min-height: 64px;
  padding: 14px;
  display: flex;
}

.ops-wechat-member-entitlement input {
  margin-top: 3px;
}

.ops-wechat-member-entitlement span {
  gap: 4px;
  display: grid;
}

.ops-wechat-member-entitlement b {
  color: var(--ui-text);
}

.ops-wechat-member-entitlement small {
  color: var(--ui-muted);
  line-height: 1.6;
}

.ops-plan-channel-summary {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.ops-plan-channel-summary span {
  border: 1px solid var(--ui-border);
  color: var(--ui-muted);
  background: var(--ui-panel-soft);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 750;
}

.ops-plan-channel-summary span.enabled {
  color: #137a45;
  border-color: color-mix(in srgb, #18a058 38%, var(--ui-border));
  background: color-mix(in srgb, #18a058 9%, var(--ui-panel-solid));
}

.ops-shell .ops-sidebar :where(button, .ops-scope b, .ops-user b) {
  font-size: 13px;
}

.ops-shell .ops-sidebar :where(.ops-brand small, .ops-scope span, .ops-user small) {
  font-size: 12px;
  line-height: 1.45;
}

.ops-shell .ops-sidebar nav button {
  min-height: 44px;
}

.ops-shell .ops-topbar :where(small, button, .ops-live) {
  font-size: 12px;
}

.ops-shell .ops-topbar h1 {
  white-space: nowrap;
  outline: none;
  min-width: max-content;
}

.ops-shell .ops-content :where(p, label, input, select, textarea, button, .ops-tr > span, .ops-empty) {
  font-size: 13px;
  line-height: 1.45;
}

.ops-shell .ops-content :where(small, em) {
  font-size: 12px;
  line-height: 1.45;
}

.ops-shell .ops-content :where(button, input, select) {
  min-height: 40px;
}

.ops-shell .ops-content :where(textarea) {
  min-height: 88px;
}

.ops-shell .ops-row-actions button {
  min-height: 36px;
  padding: 7px 10px;
}

.ops-shell .ops-empty {
  min-height: 132px;
  color: var(--ops-muted);
  background: color-mix(in srgb, var(--ui-panel-soft) 72%, transparent);
  text-align: center;
  border-radius: 12px;
  place-items: center;
  gap: 8px;
  padding: 28px;
  display: grid;
}

.ops-shell .ops-empty b, .ops-shell .ops-empty span {
  display: block;
}

.ops-shell .ops-empty b {
  color: var(--ops-text);
  font-size: 15px;
}

.ops-shell .ops-empty span {
  margin-top: 4px;
  font-size: 12px;
}

.ops-shell .ops-empty button {
  min-width: 112px;
  margin-top: 8px;
}

/* [project]/apps/admin/app/merchant-platform-cards.css [app-client] (css) */
.merchant-platform-strip {
  grid-template-columns: 1.15fr 1fr .8fr 1.35fr;
  gap: 9px;
  margin-bottom: 10px;
  display: grid;
}

.merchant-platform-strip article {
  color: #24352c;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  min-width: 0;
  padding: 13px 14px;
  box-shadow: 0 4px 15px #1c352809;
}

.merchant-platform-strip small {
  color: #7a8c82;
  letter-spacing: .14em;
  font-size: 7px;
  font-weight: 700;
}

.merchant-platform-strip h3 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 8px 0 4px;
  font-size: 13px;
  overflow: hidden;
}

.merchant-platform-strip p {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #78867f;
  margin: 0;
  font-size: 8px;
  overflow: hidden;
}

.merchant-platform-strip span {
  color: var(--ui-accent);
  margin-top: 8px;
  font-size: 8px;
  display: block;
}

@media (max-width: 1000px) {
  .merchant-platform-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .merchant-platform-strip {
    grid-template-columns: 1fr;
  }
}

.merchant-youbi b {
  color: var(--ui-accent);
}

.merchant-referral {
  position: relative;
}

.merchant-referral button {
  border: 1px solid var(--ui-border-strong);
  width: fit-content;
  color: var(--ui-accent);
  background: var(--ui-panel-solid);
  cursor: pointer;
  border-radius: 7px;
  margin-top: 7px;
  padding: 5px 8px;
  font-size: 10px;
}

.merchant-referral button:hover {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.merchant-referral button:disabled {
  cursor: wait;
  opacity: .65;
}

.merchant-referral > em {
  color: var(--ui-danger, #b42318);
  margin-top: 6px;
  font-size: 9px;
  font-style: normal;
  display: block;
}

.merchant-referral-backdrop {
  z-index: 1200;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #0f1f188f;
  place-items: center;
  padding: 24px;
  display: grid;
  position: fixed;
  inset: 0;
}

.merchant-referral-dialog {
  width: min(680px, 100%);
  color: var(--ui-text);
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-panel-solid);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 80px #09211747;
}

.merchant-referral-dialog > header {
  border-bottom: 1px solid var(--ui-border);
  background: linear-gradient(135deg,var(--ui-panel-solid),var(--ui-accent-soft));
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 22px 24px 18px;
  display: flex;
}

.merchant-referral-dialog > header small {
  color: var(--ui-accent);
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 800;
}

.merchant-referral-dialog > header h3 {
  margin: 5px 0 4px;
  font-size: 22px;
}

.merchant-referral-dialog > header p {
  color: var(--ui-muted);
  margin: 0;
  font-size: 12px;
}

.merchant-referral-dialog > header button {
  width: 34px;
  height: 34px;
  color: var(--ui-text);
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-panel-solid);
  cursor: pointer;
  border-radius: 10px;
  flex: none;
  place-items: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  display: grid;
}

.merchant-referral-dialog > header button:hover {
  color: var(--ui-accent);
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.merchant-referral-dialog-body {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  display: grid;
}

.merchant-referral-qr {
  border: 1px solid var(--ui-border);
  background: #fff;
  border-radius: 14px;
  align-content: start;
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px;
  display: grid;
}

.merchant-referral-qr img {
  aspect-ratio: 1;
  object-fit: contain;
  width: 198px;
  max-width: 100%;
  display: block;
}

.merchant-referral-qr figcaption {
  color: #51645b;
  font-size: 11px;
  font-weight: 700;
}

.merchant-referral-share-details {
  align-content: start;
  gap: 16px;
  min-width: 0;
  display: grid;
}

.merchant-referral-rewards {
  border: 1px solid color-mix(in srgb,var(--ui-accent),transparent 68%);
  background: var(--ui-accent-soft);
  border-radius: 13px;
  padding: 15px;
}

.merchant-referral-rewards h4 {
  margin: 0 0 11px;
  font-size: 14px;
}

.merchant-referral-rewards > div {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  display: grid;
}

.merchant-referral-rewards article {
  border: 1px solid var(--ui-border);
  background: var(--ui-panel-solid);
  border-radius: 10px;
  padding: 11px;
}

.merchant-referral-rewards span, .merchant-referral-rewards strong {
  display: block;
}

.merchant-referral-rewards span {
  color: var(--ui-muted);
  font-size: 10px;
}

.merchant-referral-rewards strong {
  color: var(--ui-accent);
  margin-top: 5px;
  font-size: 18px;
}

.merchant-referral-rewards p {
  color: var(--ui-muted);
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.55;
}

.merchant-referral-link-field {
  color: var(--ui-text);
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.merchant-referral-dialog-body > .merchant-referral-link-field {
  grid-column: 1 / -1;
}

.merchant-referral-link-field > div {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  display: grid;
}

.merchant-referral-link-field input {
  min-width: 0;
  height: 38px;
  color: var(--ui-text);
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-panel-soft);
  border-radius: 9px;
  padding: 0 11px;
  font-size: 11px;
}

.merchant-referral-dialog .merchant-referral-link-field button {
  border: 1px solid var(--ui-accent);
  background: var(--ui-accent);
  cursor: pointer;
  border-radius: 9px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 700;
  color: #fff !important;
}

.merchant-referral-link-field button:hover {
  background: var(--ui-accent-hover);
}

.merchant-referral-copy-status {
  color: var(--ui-accent);
  margin: -8px 0 0;
  font-size: 10px;
}

.merchant-referral-dialog-body > .merchant-referral-copy-status {
  grid-column: 1 / -1;
}

.merchant-referral-copy-status.is-error {
  color: var(--ui-danger, #b42318);
}

@media (max-width: 680px) {
  .merchant-referral-backdrop {
    align-items: end;
    padding: 12px;
  }

  .merchant-referral-dialog {
    border-radius: 16px;
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .merchant-referral-dialog > header {
    padding: 18px;
  }

  .merchant-referral-dialog-body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  .merchant-referral-qr {
    justify-self: center;
    width: min(230px, 100%);
  }
}

.merchant-platform-strip {
  gap: 12px;
}

.merchant-platform-strip article {
  min-height: 118px;
  color: var(--ui-text);
  background: var(--ui-panel-solid);
  border-color: var(--ui-border);
  padding: 18px 20px;
}

.merchant-platform-strip article:first-child {
  color: var(--ui-on-accent);
  background: linear-gradient(135deg,var(--ui-accent-hover),var(--ui-accent));
  border-color: var(--ui-accent);
}

.merchant-platform-strip small {
  color: var(--ui-muted);
  font-size: 12px !important;
}

.merchant-platform-strip article:first-child small {
  color: color-mix(in srgb,var(--ui-on-accent) 76%,transparent);
}

.merchant-platform-strip h3 {
  margin: 9px 0 6px;
  color: inherit !important;
  font-size: 18px !important;
}

.merchant-platform-strip p {
  color: var(--ui-muted);
  font-size: 13px !important;
}

.merchant-platform-strip article:first-child p {
  color: color-mix(in srgb,var(--ui-on-accent) 78%,transparent) !important;
}

.merchant-platform-strip span {
  color: var(--ui-accent);
  font-size: 12px !important;
}

.merchant-platform-strip article:first-child span {
  color: var(--ui-on-accent);
}

/* [project]/apps/admin/app/third-party.css [app-client] (css) */
.ops-third-tabs {
  gap: 8px;
  margin: 0 0 16px;
  display: flex;
}

.ops-third-tabs button {
  border-radius: 9px;
  padding: 9px 14px;
}

.ops-third-tabs button.active {
  color: var(--ui-on-accent);
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

.ops-integration-cards, .ops-review-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.ops-integration-cards article > header {
  align-items: center;
  gap: 11px;
  display: flex;
}

.ops-integration-cards article > header > i {
  width: 38px;
  height: 38px;
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-radius: 10px;
  place-items: center;
  font-style: normal;
  display: grid;
}

.ops-integration-cards article > header > div {
  flex: 1;
}

.ops-integration-cards h3, .ops-integration-cards p {
  margin: 0;
}

.ops-integration-cards p {
  color: var(--ui-muted);
  margin-top: 4px;
  font-size: 12px;
}

.ops-integration-cards dl {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
  display: grid;
}

.ops-integration-cards dl div {
  background: var(--ui-panel-soft);
  border-radius: 8px;
  padding: 10px;
}

.ops-integration-cards dt {
  color: var(--ui-muted);
  font-size: 11px;
}

.ops-integration-cards dd {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 700;
}

.ops-review-list article, .ops-withdraw-list article {
  border-bottom: 1px solid var(--ui-border);
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  display: flex;
}

.ops-review-list article > div, .ops-withdraw-list article > div {
  flex: 1;
}

.ops-review-list b, .ops-review-list small, .ops-withdraw-list b, .ops-withdraw-list small {
  display: block;
}

.ops-review-list small, .ops-withdraw-list small {
  color: var(--ui-muted);
  margin-top: 4px;
}

.ops-review-list span, .ops-withdraw-list span {
  gap: 6px;
  display: flex;
}

.ops-withdraw-list strong {
  color: var(--ui-accent);
  font-size: 16px;
}

@media (max-width: 900px) {
  .ops-integration-cards, .ops-review-columns {
    grid-template-columns: 1fr;
  }

  .ops-third-tabs {
    overflow-x: auto;
  }
}

/* [project]/apps/admin/app/global-remark-shortcuts.css [app-client] (css) */
.global-remark-shortcuts {
  z-index: 1200;
  border: 1px solid var(--ui-border, #dce3df);
  background: var(--ui-panel-solid, #fff);
  border-radius: 9px;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 6px;
  padding: 5px;
  display: grid;
  position: fixed;
  box-shadow: 0 10px 28px #162b2224;
}

.global-remark-shortcuts > div {
  scrollbar-width: none;
  gap: 5px;
  min-width: 0;
  display: flex;
  overflow-x: auto;
}

.global-remark-shortcuts > div::-webkit-scrollbar {
  display: none;
}

.global-remark-shortcuts button {
  border: 1px solid var(--ui-border, #dce3df);
  background: var(--ui-panel-soft, #f5f7f6);
  min-height: 26px;
  color: var(--ui-muted, #66736d);
  border-radius: 999px;
  flex: none;
  padding: 3px 8px;
  font-size: 9px;
}

.global-remark-shortcuts button:hover {
  border-color: var(--ui-accent, #247451);
  color: var(--ui-accent, #247451);
}

.global-remark-shortcuts .global-remark-add {
  width: 28px;
  height: 28px;
  min-height: 28px;
  color: var(--ui-accent, #247451);
  border-radius: 7px;
  padding: 0;
  font-size: 17px;
  font-weight: 800;
}

/* [project]/apps/admin/app/cashier-accessibility.css [app-client] (css) */
.advanced-cashier-shell .cashier-mode-card:not(.active) .cashier-mode-select > b {
  color: #52615a;
}

.advanced-cashier-shell .cashier-mode-card:not(.active) .cashier-mode-select small {
  color: #59665f;
}

.advanced-cashier-shell .modern-product-card-main small, .advanced-cashier-shell .modern-product-card-main em {
  color: var(--product-card-muted, var(--ui-muted));
}

.advanced-cashier-shell .modern-pos .checkout-total-panel .settlement-summary > div:not(.discount) :where(span, b) {
  color: #46534d;
}

/* [project]/apps/admin/app/ui-contract.css [app-client] (css) */
:root {
  --ui-control-min-height: 40px;
  --ui-touch-min-size: 44px;
  --ui-focus-ring: 0 0 0 3px rgba(var(--ui-accent-rgb), .22);
}

:root :is(.shell, .ops-shell, .ops-login) :where(button, input, select, textarea) {
  box-sizing: border-box;
  min-height: var(--ui-control-min-height);
  font-size: 14px;
  line-height: 1.4;
}

:root :is(.shell, .ops-shell, .ops-login) button {
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

:root :is(.shell, .ops-shell, .ops-login) :where(button, a, input, select, textarea, [role="button"], [role="switch"]):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  box-shadow: var(--ui-focus-ring);
}

:root :is(.shell, .ops-shell, .ops-login) :where(input, select, textarea):not(:disabled):hover {
  border-color: var(--ui-border-strong);
}

:root :is(.shell, .ops-shell, .ops-login) :where(input, select, textarea):not(:disabled):focus {
  border-color: var(--ui-accent);
}

:root :is(.ui-readable, .ops-shell, .ops-login) :where(p, span, small, button, input, select, option, textarea, label, em, dt, dd, td, th, figcaption) {
  line-height: 1.5;
  font-size: max(13px, 1em) !important;
}

:root :is(.shell, .ops-shell, .ops-login) :where(input[type="checkbox"]:not([name$="Enabled"]):not([name^="allow"]):not([name="active"]):not([name="isDefault"]):not([name="autoConfirm"]):not([name="namedStaff"]):not([name="stackable"]):not([name="activate"]), input[type="radio"]) {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  accent-color: var(--ui-accent);
}

:root :is(.shell, .ops-shell, .ops-login) label:has( > input[type="checkbox"],  > input[type="radio"]) {
  min-height: var(--ui-control-min-height);
  align-items: center;
}

:root input[type="checkbox"]:is([name$="Enabled"], [name^="allow"], [name="active"], [name="isDefault"], [name="autoConfirm"], [name="namedStaff"], [name="stackable"], [name="activate"]) {
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 3px !important;
}

:root input[type="checkbox"]:is([name$="Enabled"], [name^="allow"], [name="active"], [name="isDefault"], [name="autoConfirm"], [name="namedStaff"], [name="stackable"], [name="activate"]):before {
  width: 32px;
  height: 32px;
}

:root input[type="checkbox"]:is([name$="Enabled"], [name^="allow"], [name="active"], [name="isDefault"], [name="autoConfirm"], [name="namedStaff"], [name="stackable"], [name="activate"]):checked:before {
  transform: translateX(16px);
}

:root button.ui-state-switch {
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 3px !important;
}

:root button.ui-state-switch:before {
  width: 32px;
  height: 32px;
}

:root button.ui-state-switch[aria-checked="true"]:before {
  transform: translateX(16px);
}

:root [role="dialog"][aria-modal="true"] {
  color: var(--ui-text);
}

:root :where([role="alert"], [aria-live="assertive"], .error, [class*="error"]) {
  font-size: 13px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  :root *, :root :before, :root :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*# sourceMappingURL=apps_admin_app_1jpfbmv._.css.map*/