:root {
  color-scheme: light;
  font-family:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
  background: #dfe4eb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, #fafbfd 0, #e8ecf2 44%, #d8dde5 100%);
}

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

button {
  border: 0;
  color: inherit;
}

.phone-stage {
  --px: calc(100cqw / 375);
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  aspect-ratio: 9 / 16;
  container-type: inline-size;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 60px rgba(37, 51, 70, 0.23);
  isolation: isolate;
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  background: #fff;
  color: #202124;
}

.screen::-webkit-scrollbar {
  display: none;
}

.page-title {
  margin: 0;
  color: #17181a;
  text-align: center;
  font-size: calc(19 * var(--px));
  line-height: 1.3;
  font-weight: 750;
}

.required {
  color: #ef3d3d;
  font-style: normal;
}

.site-footer {
  flex: 0 0 auto;
  padding: calc(10 * var(--px)) calc(5 * var(--px)) calc(15 * var(--px));
  color: #a1a3a7;
  text-align: center;
  font-size: calc(10.2 * var(--px));
  line-height: 1.45;
  white-space: nowrap;
}

/* 服务大厅 */
.hall-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  font-size: calc(14 * var(--px));
}

.hall-header {
  min-height: calc(67 * var(--px));
  padding: calc(11 * var(--px)) calc(12 * var(--px)) calc(8 * var(--px));
  border-radius: 0 0 calc(31 * var(--px)) calc(31 * var(--px));
  background: linear-gradient(104deg, #081aa4 0%, #0867c8 45%, #09e1e8 100%);
  color: #fff;
  text-align: center;
  flex: 0 0 auto;
}

.hall-title {
  margin: 0;
  font-size: calc(18 * var(--px));
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: calc(0.2 * var(--px));
}

.hall-user {
  margin-top: calc(4 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: 1.25;
  font-weight: 650;
  white-space: nowrap;
}

.hall-section-title {
  height: calc(34 * var(--px));
  display: flex;
  align-items: flex-end;
  padding: 0 calc(14 * var(--px)) calc(7 * var(--px));
  color: #9a9da2;
  font-size: calc(14 * var(--px));
  line-height: 1;
  font-weight: 600;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: calc(0.5 * var(--px)) solid #eceef1;
  border-left: calc(0.5 * var(--px)) solid #eceef1;
}

.service-cell {
  position: relative;
  height: calc(74 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--px));
  padding: 0;
  background: #fff;
  border-right: calc(0.5 * var(--px)) solid #eceef1;
  border-bottom: calc(0.5 * var(--px)) solid #eceef1;
  cursor: pointer;
  user-select: none;
}

.service-cell:active {
  background: #f7fafe;
}

.service-cell:active .service-icon {
  transform: scale(0.96);
}

.service-cell.is-empty {
  cursor: default;
}

.service-icon {
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
  display: block;
  flex: 0 0 auto;
  overflow: visible;
}

.service-label {
  color: #606267;
  font-size: calc(13.5 * var(--px));
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}

.hall-spacer {
  min-height: calc(22 * var(--px));
  flex: 1 1 auto;
}

/* 账号绑定（本地资料） */
.binding-page {
  min-height: 100%;
  padding: calc(18 * var(--px)) calc(10 * var(--px)) calc(10 * var(--px));
  background: #f6f8fc;
  font-size: calc(14 * var(--px));
}

.binding-card {
  overflow: hidden;
  border-radius: calc(12 * var(--px));
  background: #fff;
}

.binding-line,
.binding-upload {
  min-height: calc(50 * var(--px));
  display: grid;
  grid-template-columns: calc(112 * var(--px)) minmax(0, 1fr);
  align-items: center;
  gap: calc(8 * var(--px));
  padding: 0 calc(14 * var(--px));
  border-bottom: calc(0.5 * var(--px)) solid #e8eaee;
  color: #2b2d30;
}

.binding-line input {
  min-width: 0;
  width: 100%;
  height: calc(38 * var(--px));
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #232529;
  text-align: right;
  font-size: calc(13.5 * var(--px));
}

.binding-line input::placeholder {
  color: #b3b7bd;
}

.binding-upload {
  position: relative;
}

.binding-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.binding-upload-text {
  color: #8e969f;
  text-align: right;
}

.binding-save {
  width: calc(100% - 28 * var(--px));
  height: calc(40 * var(--px));
  margin: calc(18 * var(--px)) calc(14 * var(--px)) calc(16 * var(--px));
  border-radius: calc(22 * var(--px));
  background: linear-gradient(90deg, #349cf5, #2f8ff1);
  color: #fff;
  font-size: calc(15.5 * var(--px));
  font-weight: 650;
}

.binding-page .site-footer {
  margin-top: calc(28 * var(--px));
}

/* 我的请假单 */
.leave-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: calc(18 * var(--px));
  background: #f7f8fd;
  font-size: calc(14 * var(--px));
}

.list-caption {
  margin: calc(29 * var(--px)) calc(14 * var(--px)) calc(11 * var(--px));
  color: #8593a8;
  font-size: calc(14 * var(--px));
  line-height: 1;
  font-weight: 700;
}

.leave-list-card {
  min-height: calc(1 * var(--px));
  margin: 0 calc(10 * var(--px));
  padding: calc(1 * var(--px)) calc(14 * var(--px));
  overflow: hidden;
  border-radius: calc(13 * var(--px));
  background: #fff;
  box-shadow: 0 calc(5 * var(--px)) calc(18 * var(--px)) rgba(78, 103, 141, 0.055);
}

.leave-entry {
  position: relative;
  width: 100%;
  min-height: calc(89 * var(--px));
  padding: calc(12 * var(--px)) calc(50 * var(--px)) calc(12 * var(--px)) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(6 * var(--px));
  border-bottom: calc(0.5 * var(--px)) solid #e2e4e8;
  background: transparent;
  text-align: left;
}

.leave-entry:last-child {
  border-bottom: 0;
}

.leave-entry:active {
  background: #fafbfe;
}

.leave-row {
  display: grid;
  grid-template-columns: calc(66 * var(--px)) 1fr;
  align-items: baseline;
  color: #17181a;
  font-size: calc(13.8 * var(--px));
  line-height: 1.25;
}

.leave-row .label {
  white-space: nowrap;
}

.leave-row .value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.leave-kind {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-width: calc(38 * var(--px));
  height: calc(22 * var(--px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(8 * var(--px));
  border-radius: calc(11 * var(--px));
  background: #eef4ff;
  color: #3e9bf3;
  font-size: calc(12 * var(--px));
  line-height: 1;
  white-space: nowrap;
}

.apply-card {
  margin: calc(18 * var(--px)) calc(10 * var(--px)) 0;
  padding: calc(16 * var(--px)) 0 calc(22 * var(--px));
  border-radius: calc(13 * var(--px));
  background: #fff;
  box-shadow: 0 calc(5 * var(--px)) calc(18 * var(--px)) rgba(78, 103, 141, 0.055);
}

.primary-apply,
.agreement-enter,
.submit-application {
  height: calc(40 * var(--px));
  border-radius: calc(22 * var(--px));
  background: linear-gradient(90deg, #3297f5 0%, #328cf1 100%);
  box-shadow: 0 calc(7 * var(--px)) calc(17 * var(--px)) rgba(50, 142, 241, 0.24);
  color: #fff;
  font-size: calc(16 * var(--px));
  font-weight: 650;
}

.primary-apply {
  width: calc(100% - 20 * var(--px));
  margin: 0 calc(10 * var(--px));
}

.leave-page .site-footer {
  margin-top: auto;
  padding-top: calc(68 * var(--px));
}

/* 承诺书 */
.agreement-page {
  min-height: 100%;
  padding: calc(12 * var(--px)) calc(10 * var(--px)) calc(8 * var(--px));
  background: #f7f8fd;
  color: #24262a;
  font-size: calc(13.2 * var(--px));
}

.agreement-card {
  padding: calc(18 * var(--px)) calc(15 * var(--px)) calc(22 * var(--px));
  border-radius: calc(12 * var(--px));
  background: #fff;
  box-shadow: 0 calc(4 * var(--px)) calc(16 * var(--px)) rgba(73, 91, 121, 0.045);
}

.agreement-card h1 {
  margin: 0 0 calc(18 * var(--px));
  color: #202124;
  text-align: center;
  font-size: calc(18 * var(--px));
  line-height: 1.5;
  font-weight: 750;
}

.agreement-card p {
  margin: 0 0 calc(13 * var(--px));
  line-height: 1.85;
  text-align: justify;
}

.agreement-card p strong {
  font-weight: 750;
}

.agreement-confirm {
  display: grid;
  grid-template-columns: calc(20 * var(--px)) 1fr;
  gap: calc(7 * var(--px));
  align-items: flex-start;
  margin-top: calc(8 * var(--px));
  color: #555b64;
  font-size: calc(12.4 * var(--px));
  line-height: 1.75;
}

.agreement-confirm input {
  width: calc(17 * var(--px));
  height: calc(17 * var(--px));
  margin: calc(2 * var(--px)) 0 0;
  accent-color: #308ef0;
}

.agreement-confirm em {
  color: #ef3d3d;
  font-style: normal;
}

.agreement-enter {
  width: 100%;
  margin-top: calc(18 * var(--px));
}

.agreement-enter:disabled {
  background: #b8d4ee;
  box-shadow: none;
}

.agreement-page .site-footer {
  padding-top: calc(28 * var(--px));
}

/* 请假申请表 */
.application-page {
  min-height: 100%;
  padding: calc(7 * var(--px)) calc(10 * var(--px)) calc(8 * var(--px));
  background: #f7f8fd;
  font-size: calc(14 * var(--px));
}

.application-page > .page-title {
  position: relative;
  top: calc(-1 * var(--px));
  font-size: calc(18 * var(--px));
  letter-spacing: calc(0.25 * var(--px));
}

.application-card {
  margin-top: calc(9 * var(--px));
  padding: calc(1 * var(--px)) calc(28 * var(--px)) calc(10 * var(--px));
  overflow: hidden;
  border-radius: calc(13 * var(--px));
  background: #fff;
  box-shadow: 0 calc(5 * var(--px)) calc(18 * var(--px)) rgba(78, 103, 141, 0.055);
}

.application-fields {
  margin: 0 calc(-13 * var(--px));
  padding: 0 calc(13 * var(--px)) calc(18 * var(--px));
  border-radius: calc(13 * var(--px));
  box-shadow: 0 0 calc(9 * var(--px)) rgba(78, 103, 141, 0.035);
}

.form-caption {
  margin-left: calc(-6 * var(--px));
  padding: calc(13 * var(--px)) 0 calc(13.5 * var(--px));
  color: #8a96a5;
  font-size: calc(11.5 * var(--px));
  font-weight: 500;
  transform: translateY(calc(3 * var(--px)));
}

.application-row {
  min-height: calc(46.6 * var(--px));
  display: grid;
  grid-template-columns: calc(91 * var(--px)) minmax(0, 1fr);
  align-items: center;
  gap: calc(6 * var(--px));
  border-bottom: calc(0.5 * var(--px)) solid #ededed;
}

.application-row.destination-row {
  grid-template-columns: calc(113 * var(--px)) minmax(0, 1fr);
}

.application-row label {
  color: #303030;
  font-size: calc(13.8 * var(--px));
  font-weight: 600;
  white-space: nowrap;
}

.application-row input,
.application-row select {
  min-width: 0;
  width: 100%;
  height: calc(42 * var(--px));
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  text-align: left;
  font-size: calc(14 * var(--px));
}

.application-row > label,
.application-row > input,
.application-row > select,
.application-row > output {
  transform: translateY(calc(2 * var(--px)));
}

.application-row select {
  appearance: none;
  -webkit-appearance: none;
  direction: ltr;
  font-weight: 600;
}

.application-row select option {
  direction: ltr;
}

.application-row input::placeholder {
  color: #c0c0c0;
}

.datetime-row {
  grid-template-columns: calc(113 * var(--px)) minmax(0, 1fr);
}

.datetime-row input {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  color: #3b4148;
  font-weight: 600;
  cursor: pointer;
}

.datetime-row input:invalid,
.datetime-row input:invalid::-webkit-datetime-edit {
  color: transparent;
}

.datetime-row input::-webkit-calendar-picker-indicator {
  display: none;
}

.duration-row {
  min-height: calc(46.6 * var(--px));
}

.duration-row output {
  color: #b8b8b8;
  text-align: left;
  font-size: calc(13.5 * var(--px));
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
}

.duration-row output[data-filled] {
  color: #303030;
  font-weight: 600;
}

.upload-section {
  min-height: calc(92 * var(--px));
  display: grid;
  grid-template-columns: calc(168 * var(--px)) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(8 * var(--px));
  padding-top: calc(13 * var(--px));
}

.upload-label {
  color: #303030;
  font-weight: 600;
  line-height: 1.5;
}

.upload-label span {
  color: #ef4848;
  font-size: calc(13 * var(--px));
}

.upload-help {
  margin: 0;
  color: #b8b8b8;
  font-size: calc(13 * var(--px));
  line-height: 1.5;
  text-align: left;
}

.upload-grid {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: calc(9 * var(--px));
  margin-top: calc(8 * var(--px));
}

.upload-add,
.upload-preview {
  position: relative;
  width: calc(68 * var(--px));
  height: calc(68 * var(--px));
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: calc(1 * var(--px)) dashed #bdc2c9;
  border-radius: calc(3 * var(--px));
  background: #fafbfc;
}

.upload-add input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.upload-add {
  width: calc(73 * var(--px));
  height: calc(73 * var(--px));
  border: calc(1 * var(--px)) solid #e4e4e4;
  border-radius: 0;
  background: #fff;
}

.upload-add span,
.upload-add span::after {
  position: absolute;
  width: calc(26 * var(--px));
  height: calc(1.5 * var(--px));
  background: #aeb4bb;
  content: "";
}

.upload-add span::after {
  transform: rotate(90deg);
}

.upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-preview::after {
  content: "×";
  position: absolute;
  top: calc(2 * var(--px));
  right: calc(2 * var(--px));
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: calc(12 * var(--px));
  line-height: 1;
}

.submit-application {
  width: calc(100% + 32 * var(--px));
  margin-left: calc(-16 * var(--px));
  margin-top: calc(24 * var(--px));
  height: calc(42 * var(--px));
  font-size: calc(14 * var(--px));
  font-weight: 500;
}

.application-page .site-footer {
  padding-top: calc(38 * var(--px));
}

/* 请假详情 */
.detail-page {
  min-height: 100%;
  padding: 0 calc(10 * var(--px)) calc(8 * var(--px));
  background: #f5f7fb;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(13.8 * var(--px));
  font-weight: 400;
}

.detail-heading {
  min-height: calc(142 * var(--px));
  height: calc(142 * var(--px));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(10 * var(--px)) 0 0 calc(28 * var(--px));
}

.detail-heading h1 {
  margin: calc(48 * var(--px)) 0 0;
  color: #000;
  font-size: calc(22 * var(--px));
  line-height: 1.3;
  font-weight: 700;
}

.qr-block {
  width: calc(112 * var(--px));
  flex: 0 0 auto;
  margin-right: calc(-10 * var(--px));
  transform: translateY(calc(-10 * var(--px)));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12 * var(--px));
  color: #000;
  font-size: calc(14.5 * var(--px));
  font-weight: 400;
  line-height: 1;
}

.qr-block canvas {
  width: calc(112 * var(--px));
  height: calc(112 * var(--px));
  padding: calc(5 * var(--px));
  display: block;
  background: #fff;
}

.detail-caption {
  margin: 0;
  padding: calc(17 * var(--px)) calc(7 * var(--px)) calc(13 * var(--px));
  color: #8a96a5;
  font-size: calc(11.5 * var(--px));
  font-weight: 500;
}

.detail-shell {
  padding: 0 calc(15 * var(--px)) calc(10 * var(--px));
  border-radius: calc(13 * var(--px));
  background: #fff;
}

.detail-card,
.cancel-card {
  overflow: hidden;
  padding: 0 calc(13 * var(--px));
  border-radius: calc(12 * var(--px));
  background: #fff;
  box-shadow: 0 calc(4 * var(--px)) calc(16 * var(--px)) rgba(76, 95, 126, 0.05);
}

.detail-row {
  min-height: calc(46.6 * var(--px));
  display: grid;
  grid-template-columns: calc(91 * var(--px)) minmax(0, 1fr);
  align-items: center;
  gap: calc(6 * var(--px));
  border-bottom: calc(0.5 * var(--px)) solid #e6e8ec;
  color: #24262a;
}

.detail-label {
  white-space: nowrap;
}

.detail-value {
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.detail-row.wide-value { grid-template-columns: calc(113 * var(--px)) minmax(0, 1fr); }
.detail-row.important-red, .detail-row.approval-red { min-height: calc(70 * var(--px)); }
.detail-row.text-red { min-height: calc(61 * var(--px)); }
.remark-detail .detail-value { padding-left: calc(10 * var(--px)); }

.detail-row.important-red .detail-label,
.detail-row.important-red .detail-value {
  color: #ff0000;
}

.detail-row.important-red .detail-value,
.detail-row.approval-red .detail-value {
  color: #ff0000;
  font-size: calc(28 * var(--px));
  font-weight: 400;
}

.detail-row.text-red .detail-value {
  color: #ff0000;
  font-size: calc(22 * var(--px));
}

.detail-row.text-blue .detail-value {
  color: #0000ff;
}

.attachment-row {
  min-height: calc(88 * var(--px));
  align-items: start;
  padding: calc(11 * var(--px)) 0;
}

.attachment-row .detail-label {
  padding-top: calc(6 * var(--px));
}

.detail-images {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: calc(7 * var(--px));
}

.detail-images img {
  width: calc(100 * var(--px));
  height: auto;
  max-height: calc(100 * var(--px));
  object-fit: contain;
  border-radius: calc(2 * var(--px));
}

.detail-images .empty-image {
  height: calc(75 * var(--px));
  object-fit: contain;
}

.commitment-row {
  padding: calc(14 * var(--px)) 0 calc(16 * var(--px));
  color: #33363b;
  font-size: calc(13.5 * var(--px));
  line-height: 1.75;
}

.cancel-card {
  margin-top: calc(16 * var(--px));
  font-weight: 500;
}

.cancel-card .detail-row:last-child {
  border-bottom: 0;
}
.cancel-card .detail-row { grid-template-columns: calc(96 * var(--px)) minmax(0, 1fr); }

.flow-link {
  display: block;
  width: calc(100% + 20 * var(--px));
  margin-left: calc(-10 * var(--px));
  background: transparent;
  text-align: left;
  padding: calc(24 * var(--px)) 0 0;
  color: #303338;
  font-size: calc(13.8 * var(--px));
}

.flow-page {
  min-height: 100%;
  background: #efeff4;
  color: #171717;
  padding-top: 0;
}
.flow-step {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
  min-height: calc(90 * var(--px));
  padding: calc(12 * var(--px)) calc(14 * var(--px));
  border-bottom: calc(.5 * var(--px)) solid #e7e7ec;
  font-size: calc(15 * var(--px));
}
.flow-step strong { font-weight: 600; }
.flow-number {
  display: grid;
  flex: 0 0 calc(56 * var(--px));
  height: calc(56 * var(--px));
  place-items: center;
  border-radius: 50%;
  background: #06a8db;
  color: #fff;
  font-size: calc(19 * var(--px));
  font-weight: 700;
}
.flow-review p {
  margin: calc(4 * var(--px)) 0 0;
  color: #8c97a8;
  font-size: calc(12 * var(--px));
  line-height: 1.3;
}
.flow-return {
  display: block;
  width: 100%;
  height: calc(42 * var(--px));
  margin-top: calc(13 * var(--px));
  border-radius: calc(5 * var(--px));
  background: #f8f8f8;
  border: calc(.5 * var(--px)) solid #dedee2;
  color: #171717;
  font-size: calc(15 * var(--px));
}

.flow-link.is-blue {
  color: #0000ff;
}

.detail-page .site-footer {
  padding-top: calc(30 * var(--px));
}

.photo-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  outline: none;
  cursor: zoom-out;
}
.photo-preview img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.detail-images img[src] { cursor: zoom-in; }

/* 水印随详情内容滚动，覆盖整页而非仅覆盖屏幕。 */
.detail-page, .flow-page { position: relative; overflow: hidden; }
.watermark-layer {
  position: absolute;
  top: calc(-18 * var(--px));
  bottom: 0;
  left: calc(-20 * var(--px));
  width: calc(422 * var(--px));
  z-index: 3;
  display: none;
  grid-template-columns: repeat(2, calc(211 * var(--px)));
  grid-auto-rows: calc(122 * var(--px));
  align-content: start;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.watermark-layer.is-visible {
  display: grid;
}

.watermark-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-15deg);
  color: rgba(0, 0, 0, 0.13);
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  font-size: calc(13.5 * var(--px));
  line-height: 1.55;
  white-space: nowrap;
}

.toast {
  visibility: hidden;
  position: absolute;
  left: 50%;
  bottom: calc(64 * var(--px));
  z-index: 8;
  max-width: 80%;
  padding: calc(8 * var(--px)) calc(13 * var(--px));
  border-radius: calc(6 * var(--px));
  background: rgba(30, 32, 36, 0.88);
  color: #fff;
  font-size: calc(12 * var(--px));
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(6 * var(--px)));
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-aspect-ratio: 9 / 16) {
  .phone-stage {
    width: 100vw;
    height: auto;
  }
}

/* WeChat's native bars reduce the available height. Mobile pages must use
   the full viewport width; a fitted 9:16 stage is only a desktop preview. */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
  .phone-stage {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}