:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: #17212b;
  background: #f3f4f6;
  letter-spacing: 0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f3f4f6;
  font-size: 15px;
}

button,
a,
span,
p,
h1,
h2,
strong,
b,
small {
  letter-spacing: 0;
}

.guide-header {
  border-bottom: 1px solid #cfd4da;
  background: #f7f7f7;
}

.guide-header-inner {
  width: min(1240px, calc(100% - 32px));
  min-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.guide-header h1 {
  margin: 0;
  padding-left: 14px;
  border-left: 4px solid #3178a8;
  color: #124c78;
  font-size: 24px;
}

.guide-header nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.guide-header a {
  color: #17679c;
  text-decoration: none;
}

.guide-shell {
  width: min(1320px, calc(100% - 24px));
  margin: 18px auto 32px;
}

.guide-intro {
  width: calc(100% - 112px);
  min-height: 62px;
  margin: 0 auto 12px;
  border: 1px solid #ccd2d8;
  background: #fff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.guide-intro div {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.guide-intro strong {
  font-size: 19px;
}

.guide-intro span {
  color: #66717c;
}

.guide-intro > b {
  color: #175a86;
  font-size: 14px;
  white-space: nowrap;
}

.guide-carousel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas:
    "previous stage next"
    ". progress .";
  align-items: center;
  gap: 12px;
}

.carousel-stage {
  grid-area: stage;
  min-height: 600px;
  border: 1px solid #c8ced4;
  background: #fff;
  overflow: hidden;
}

.guide-slide {
  min-height: 600px;
  display: none;
  grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.5fr);
}

.guide-slide.active {
  display: grid;
}

.poster-copy {
  min-width: 0;
  padding: 42px 34px;
  border-right: 1px solid #d7dce0;
  background: #f4f6f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.poster-page {
  width: fit-content;
  margin-bottom: 16px;
  border-left: 4px solid #3178a8;
  padding: 3px 0 3px 10px;
  color: #175a86;
  font-size: 13px;
  font-weight: 700;
}

.important-slide .poster-page {
  border-left-color: #b56a13;
  color: #96570f;
}

.poster-copy h2 {
  margin: 0 0 14px;
  color: #152331;
  font-size: 25px;
  line-height: 1.35;
}

.poster-copy p {
  margin: 0;
  color: #4e5c69;
  font-size: 16px;
  line-height: 1.9;
}

.guide-emphasis {
  color: inherit;
  font-weight: 700;
}

.poster-result {
  margin-top: 24px;
  border-top: 1px solid #d2d8dd;
  padding-top: 15px;
  color: #596773;
  line-height: 1.7;
}

.poster-result strong {
  display: block;
  margin-bottom: 2px;
  color: #263746;
}

.poster-demo {
  min-width: 0;
  padding: 32px;
  display: grid;
  align-items: center;
  background: #fff;
}

.mock-window {
  width: 100%;
  min-width: 0;
  border: 1px solid #c9cfd5;
  background: #fff;
  color: #26313b;
  font-size: 13px;
}

.mock-window-bar {
  min-height: 46px;
  border-bottom: 1px solid #d2d7dc;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f6f7f8;
}

.mock-window-bar strong {
  margin-right: auto;
  font-size: 15px;
}

.mock-window-bar > span:not(.mock-button) {
  color: #6c7781;
}

.mock-button,
.mock-input,
.mock-count,
.mock-city,
.mock-life {
  min-height: 36px;
  border: 1px solid #bdc5cc;
  background: #fff;
  padding: 8px 12px;
}

.mock-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #174f78;
  white-space: nowrap;
}

.mock-email-panel {
  padding: 34px 20px;
  display: grid;
  grid-template-columns: auto minmax(170px, 1fr) auto auto;
  align-items: center;
  gap: 9px;
}

.mock-field-label {
  white-space: nowrap;
}

.mock-field-label b {
  color: #b23a3a;
}

.mock-input {
  color: #7b858e;
}

.mock-tip {
  border-top: 1px solid #e0e3e6;
  padding: 12px 20px;
  color: #6e7881;
  background: #fafafa;
}

.mock-notice-line {
  border-bottom: 1px solid #d7dce1;
  padding: 12px 15px;
  color: #1769aa;
  background: #f8fafc;
}

.mock-order-toolbar {
  padding: 18px 15px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.mock-count {
  width: 112px;
  display: grid;
  place-items: center;
  gap: 3px;
  color: #4d5964;
}

.mock-count b {
  font-size: 21px;
  line-height: 1;
}

.mock-count.active {
  border-color: #6798ba;
  background: #eaf3f9;
  color: #125784;
}

.mock-button.refresh {
  min-width: 100px;
}

.mock-table-head,
.mock-table-row {
  display: grid;
  grid-template-columns: 70px 110px minmax(180px, 1fr) 100px;
  align-items: center;
}

.mock-table-head {
  min-height: 38px;
  border-top: 1px solid #d2d7dc;
  border-bottom: 1px solid #d2d7dc;
  color: #69747f;
  background: #f5f6f7;
}

.mock-table-row {
  min-height: 84px;
}

.mock-table-head span,
.mock-table-row > span {
  min-width: 0;
  height: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  border-right: 1px solid #d7dce0;
}

.mock-table-head span:last-child,
.mock-table-row > span:last-child {
  border-right: 0;
}

.mock-table-row > span:nth-child(3) {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.mock-table-row small,
.mock-order-info small,
.mock-contact small,
.mock-pool-row small {
  display: block;
  margin-top: 3px;
  color: #687481;
  font-size: 11px;
  line-height: 1.4;
}

.mock-payment-link,
.mock-payment-actions b {
  color: #1769aa;
}

.mock-order-columns,
.mock-full-order-row {
  display: grid;
  grid-template-columns: 38px 46px minmax(180px, 1.4fr) 110px 72px minmax(110px, 0.8fr);
  align-items: stretch;
}

.mock-order-columns {
  min-height: 42px;
  color: #69747f;
  background: #f5f6f7;
}

.mock-order-columns > span,
.mock-full-order-row > span {
  min-width: 0;
  padding: 10px 8px;
  border-right: 1px solid #d7dce0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-order-columns > span:last-child,
.mock-full-order-row > span:last-child {
  border-right: 0;
}

.mock-full-order-row {
  min-height: 116px;
  border-top: 1px solid #d7dce0;
}

.mock-order-info,
.mock-contact {
  align-items: flex-start !important;
  flex-direction: column;
  justify-content: center !important;
}

.mock-payment-actions {
  gap: 10px;
}

.mock-checkbox {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid #82909c;
  background: #fff;
}

.mock-checkbox.checked {
  border-color: #2878b2;
  background: #2878b2;
  box-shadow: inset 0 0 0 3px #fff;
}

.mock-qr {
  width: 28px;
  height: 28px;
  position: relative;
  flex: 0 0 28px;
  border: 2px solid #202428;
  background: #fff;
}

.mock-qr u {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #202428;
  text-decoration: none;
}

.mock-qr u:nth-child(1) { top: 2px; left: 2px; }
.mock-qr u:nth-child(2) { top: 2px; right: 2px; }
.mock-qr u:nth-child(3) { bottom: 2px; left: 2px; }
.mock-qr u:nth-child(4) { top: 10px; left: 10px; }
.mock-qr u:nth-child(5) { right: 3px; bottom: 3px; width: 4px; height: 9px; }

.mock-clicked-note {
  border-top: 1px solid #d7dce0;
  padding: 12px 15px;
  color: #69747e;
  text-align: right;
}

.mock-clicked-note span {
  margin-right: 6px;
  color: #b56a13;
  font-weight: 700;
}

.status-demo .mock-window {
  max-width: 760px;
  margin: 0 auto;
}

.status-groups {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.status-group {
  min-width: 0;
  border: 1px solid #d6dbe0;
  border-left-width: 4px;
  padding: 12px;
  background: #fafafa;
}

.status-group > strong {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
}

.status-group > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-group > small {
  display: block;
  margin-top: 8px;
  color: #6a7580;
}

.status-group.urgent { border-left-color: #b23a3a; }
.status-group.normal { border-left-color: #2f855a; }
.status-group.complete { border-left-color: #3f82b8; }
.status-group.ended { border-left-color: #9ca3af; }

.order-status-label {
  display: inline-block;
  border-radius: 2px;
  padding: 3px 7px;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.order-status-label.pending { background: #b23a3a; }
.order-status-label.paid,
.order-status-label.processing { background: #2f855a; }
.order-status-label.ready { background: #16835c; }
.order-status-label.picked { background: #3f82b8; }
.order-status-label.ended { background: #9ca3af; }

.mock-batch-toolbar {
  min-height: 64px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #d5dae0;
  background: #f6f7f8;
}

.mock-batch-toolbar strong {
  margin-right: auto;
  white-space: nowrap;
}

.mock-select-row {
  min-height: 62px;
  padding: 10px 15px;
  display: grid;
  grid-template-columns: 26px 70px minmax(150px, 1fr) 80px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #d9dde1;
}

.mock-select-row:last-child {
  border-bottom: 0;
}

.mock-select-row.selected {
  background: #eef4f8;
}

.operation-demo .mock-window {
  font-size: 12px;
}

.operation-status-heading {
  min-height: 38px;
  border-top: 1px solid #d5dae0;
  border-bottom: 1px solid #d5dae0;
  padding: 9px 12px;
  background: #f3f5f6;
  font-weight: 700;
}

.compact-status-groups {
  padding: 10px;
  gap: 8px;
}

.compact-status-groups .status-group {
  padding: 9px;
}

.compact-status-groups .status-group > strong {
  margin-bottom: 6px;
  font-size: 12px;
}

.compact-status-groups .order-status-label {
  padding: 2px 6px;
  font-size: 11px;
}

.list-demo .mock-window {
  font-size: 12px;
}

.list-bar {
  flex-wrap: wrap;
}

.mock-filter-row {
  min-height: 54px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #d6dbe0;
  background: #f8f9fa;
}

.mock-filter-row > b {
  width: 38px;
  flex: 0 0 38px;
  color: #67727d;
  text-align: center;
}

.mock-city,
.mock-life {
  min-height: 38px;
  padding: 8px 12px;
}

.mock-city.active,
.mock-life.active {
  border-color: #6f9cbc;
  color: #174f7d;
  background: #edf4fa;
  font-weight: 700;
}

.mock-pool-head,
.mock-pool-row {
  display: grid;
  grid-template-columns: 72px 84px minmax(180px, 1fr) 170px;
  align-items: stretch;
}

.mock-pool-head {
  min-height: 38px;
  border-bottom: 1px solid #d5dae0;
  color: #68737d;
  background: #f3f5f6;
}

.mock-pool-row {
  min-height: 68px;
  border-bottom: 1px solid #d8dde1;
}

.mock-pool-row:last-child {
  border-bottom: 0;
}

.mock-pool-head > span,
.mock-pool-row > span {
  min-width: 0;
  padding: 8px;
  border-right: 1px solid #d8dde1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-pool-head > span:last-child,
.mock-pool-row > span:last-child {
  border-right: 0;
}

.mock-pool-row > span:nth-child(3) {
  justify-content: flex-start;
}

.mock-pool-row > span:last-child {
  flex-direction: column;
}

.life-badge {
  display: inline-block;
  padding: 2px 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
}

.life-badge.available { background: #2f7d5c; }
.life-badge.borrowed { background: #356f9f; }
.life-badge.frozen { background: #7f8790; }

.carousel-arrow {
  width: 44px;
  height: 66px;
  border: 1px solid #aeb7c0;
  border-radius: 4px;
  background: #fff;
  color: #185a86;
  font: 700 24px/1 Arial, sans-serif;
  cursor: pointer;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  border-color: #4f88ae;
  background: #edf5fa;
  outline: none;
}

.carousel-previous { grid-area: previous; }
.carousel-next { grid-area: next; }

.carousel-progress {
  grid-area: progress;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.carousel-counter {
  min-width: 42px;
  color: #596672;
  font-size: 13px;
  text-align: center;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border: 1px solid #85929d;
  border-radius: 50%;
  padding: 0;
  background: #fff;
  cursor: pointer;
}

.carousel-dot.active {
  border-color: #246f9f;
  background: #246f9f;
}

@media (max-width: 900px) {
  body {
    font-size: 14px;
  }

  .guide-header-inner,
  .guide-shell {
    width: calc(100% - 20px);
  }

  .guide-intro {
    width: 100%;
  }

  .guide-carousel {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "stage stage"
      "previous next"
      "progress progress";
    gap: 8px;
  }

  .carousel-stage,
  .guide-slide {
    min-height: 0;
  }

  .guide-slide.active {
    grid-template-columns: 1fr;
  }

  .poster-copy {
    padding: 24px;
    border-right: 0;
    border-bottom: 1px solid #d7dce0;
    justify-content: flex-start;
  }

  .poster-page {
    margin-bottom: 10px;
  }

  .poster-copy h2 {
    margin-bottom: 8px;
    font-size: 21px;
  }

  .poster-copy p {
    font-size: 15px;
    line-height: 1.75;
  }

  .poster-result {
    margin-top: 14px;
    padding-top: 10px;
  }

  .poster-result strong {
    display: inline;
    margin-right: 5px;
  }

  .poster-demo {
    padding: 20px;
  }

  .carousel-arrow {
    width: 100%;
    height: 42px;
  }

  .carousel-previous { justify-self: end; }
  .carousel-next { justify-self: start; }

  .carousel-progress {
    min-height: 32px;
  }
}

@media (max-width: 560px) {
  .guide-header-inner {
    min-height: 60px;
    padding: 10px 0;
  }

  .guide-header h1 {
    font-size: 20px;
  }

  .guide-header nav {
    align-items: flex-end;
    flex-direction: column;
    gap: 4px;
  }

  .guide-shell {
    margin-top: 10px;
  }

  .guide-intro {
    padding: 11px 13px;
  }

  .guide-intro div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .guide-intro strong {
    font-size: 16px;
  }

  .guide-intro > b {
    font-size: 12px;
  }

  .poster-copy,
  .poster-demo {
    padding: 16px;
  }

  .poster-copy h2 {
    font-size: 19px;
  }

  .mock-email-panel {
    padding: 16px;
    grid-template-columns: 1fr 1fr;
  }

  .mock-field-label,
  .mock-input {
    grid-column: 1 / -1;
  }

  .mock-input,
  .mock-button {
    text-align: center;
  }

  .mock-order-toolbar {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mock-count,
  .mock-button.refresh {
    width: 100%;
    min-width: 0;
  }

  .mock-table-head,
  .mock-table-row {
    grid-template-columns: 38px 70px minmax(100px, 1fr) 52px;
  }

  .mock-table-head span,
  .mock-table-row > span {
    padding: 7px 5px;
    font-size: 10px;
  }

  .mock-order-columns {
    display: none;
  }

  .mock-full-order-row {
    min-height: 120px;
    grid-template-columns: 26px 34px minmax(110px, 1fr) 62px;
    border-top: 0;
  }

  .mock-full-order-row > span {
    padding: 8px 5px;
  }

  .mock-full-order-row > span:nth-child(5),
  .mock-full-order-row > span:nth-child(6) {
    display: none;
  }

  .mock-payment-actions {
    flex-direction: column;
    gap: 6px;
  }

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

  .status-group {
    padding: 10px;
  }

  .mock-batch-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .mock-batch-toolbar strong {
    margin: 0 0 3px;
  }

  .mock-select-row {
    grid-template-columns: 24px 54px minmax(100px, 1fr) 54px;
    padding: 9px;
    font-size: 11px;
  }

  .mock-filter-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .mock-filter-row > b {
    width: 100%;
    flex-basis: 100%;
    text-align: left;
  }

  .mock-city,
  .mock-life {
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .mock-pool-head {
    display: none;
  }

  .mock-pool-row {
    grid-template-columns: 60px 54px minmax(0, 1fr);
  }

  .mock-pool-row > span {
    border-right: 1px solid #d8dde1;
  }

  .mock-pool-row > span:nth-child(3) {
    grid-column: 1 / -1;
    order: 4;
    border-top: 1px solid #e1e4e7;
    border-right: 0;
  }

  .mock-pool-row > span:nth-child(4) {
    border-right: 0;
  }

  .carousel-progress {
    gap: 10px;
  }

  .carousel-dots {
    gap: 7px;
  }
}