@font-face {
  font-family: "OPPO Sans";
  src: url("./assets/fonts/OPPOSans.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --mint: #64c3b2;
  --mint-dark: #41ae9d;
  --mint-soft: #e6f5f2;
  --bg: #f7f9f9;
  --line: #edf0f2;
  --text: #1f2933;
  --muted: #8a949e;
  --orange: #ff9f43;
  --blue: #5c9df5;
  --shadow: 0 8px 22px rgba(28, 48, 56, .08);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "OPPO Sans", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", Arial, sans-serif;
  display: grid;
  grid-template-columns: 248px 1fr;
  letter-spacing: 0;
}
button, input, select, textarea { font: inherit; font-family: "OPPO Sans", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", Arial, sans-serif; }
.sidebar {
  background: #fff;
  border-right: 1px solid var(--line);
  min-height: 100vh;
  position: relative;
}
.logo {
  height: 98px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}
.logo-mark {
  width: 52px;
  height: 52px;
  border: 2px solid #111;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 400;
}
.logo strong { display: block; font-size: 24px; line-height: 1.2; }
.logo span { display: block; color: var(--muted); margin-top: 6px; }
nav { padding: 22px 10px; }
.menu-item {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #26323d;
  padding: 0 16px;
  margin: 4px 0;
  border-radius: 7px;
  cursor: pointer;
}
.menu-item i { width: 22px; text-align: center; font-style: normal; font-size: 19px; }
.menu-item b { margin-left: auto; color: var(--muted); font-weight: 400; }
.menu-item.active {
  background: linear-gradient(135deg, var(--mint), #74cfc1);
  color: #fff;
  box-shadow: 0 8px 18px rgba(100, 195, 178, .24);
}
.collapse {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  border-top: 1px solid var(--line);
  padding-left: 22px;
  display: flex;
  align-items: center;
  color: #52606b;
}
.main { min-width: 0; }
.topbar {
  height: 62px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 26px;
}
.crumb { display: flex; align-items: center; gap: 28px; color: var(--mint-dark); }
#menuToggle, .plain, .icon-btn, .bell {
  border: 0;
  background: transparent;
  color: #1f2933;
  cursor: pointer;
}
#menuToggle { font-size: 26px; }
.top-actions { display: flex; align-items: center; gap: 20px; }
.bell { position: relative; font-size: 24px; }
.bell b {
  position: absolute;
  right: -8px;
  top: -9px;
  min-width: 19px;
  height: 19px;
  border-radius: 10px;
  background: #f05252;
  color: #fff;
  font-size: 11px;
  line-height: 19px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: url('') center/cover;
}
.user strong, .user span { display: block; }
.user span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.content { padding: 26px 30px 34px; }
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.page-head h1 { margin: 0 0 8px; font-size: 24px; }
.page-head p { margin: 0; color: #52606b; }
.date-chip, .btn, .secondary {
  height: 36px;
  border-radius: 5px;
  border: 1px solid #dfe5e8;
  background: #fff;
  padding: 0 16px;
  color: #36414c;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.btn {
  background: linear-gradient(135deg, var(--mint), #68caba);
  border-color: transparent;
  color: #fff;
  min-width: 120px;
  justify-content: center;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 22px;
}
.stat-card {
  height: 130px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 400; }
.stat-card strong { font-size: 38px; }
.stat-card p { color: var(--muted); margin: 4px 0 0; }
.stat-card p span { color: var(--mint-dark); margin-left: 6px; }
.stat-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 34px;
  background: var(--mint-soft);
  color: var(--mint-dark);
}
.stat-card:nth-child(2) .stat-icon { background: #fff4df; color: #f59e0b; }
.stat-card:nth-child(3) .stat-icon { background: #eaf3ff; color: #5c9df5; }
.stat-card:nth-child(4) .stat-icon { background: #ffe9eb; color: #ef5555; }
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.panel { padding: 18px 22px; }
.panel-head {
  height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.panel h2 { margin: 0; font-size: 18px; }
.link { color: var(--mint-dark); cursor: pointer; }
.seg { display: inline-grid; grid-template-columns: 86px 86px; border: 1px solid #dfe5e8; border-radius: 5px; overflow: hidden; }
.seg button { border: 0; background: #fff; height: 32px; cursor: pointer; }
.seg .on { background: var(--mint); color: #fff; }
.chart { height: 218px; padding: 12px 4px 0; }
.chart svg { width: 100%; height: 100%; display: block; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  background: #fafafa;
  color: #52606b;
  font-weight: 400;
  text-align: left;
  height: 38px;
}
td {
  height: 44px;
  border-bottom: 1px solid var(--line);
  color: #26323d;
}
tr:last-child td { border-bottom: 0; }
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  background: var(--mint-soft);
  color: var(--mint-dark);
  font-size: 12px;
}
.tag.orange { background: #fff4e3; color: var(--orange); }
.tag.blue { background: #eaf3ff; color: var(--blue); }
.tag.gray { background: #f1f3f5; color: #7b858e; }
.notice { display: grid; gap: 0; }
.notice-row {
  height: 72px;
  display: grid;
  grid-template-columns: 44px 1fr 54px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.notice-row:last-child { border-bottom: 0; }
.notice-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #eaf3ff;
  color: #5c9df5;
  display: grid;
  place-items: center;
  position: relative;
}
.notice-icon::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef5555;
}
.notice-row strong { display: block; font-size: 14px; }
.notice-row span { color: var(--muted); font-size: 13px; }
.notice-row time { color: var(--muted); font-size: 12px; }
.filter-card {
  padding: 26px 24px;
  margin-bottom: 28px;
}
.filters {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr 1.6fr;
  gap: 28px;
  align-items: end;
}
.field label { display: block; margin-bottom: 10px; color: #26323d; }
.field input, .field select {
  width: 100%;
  height: 42px;
  border: 1px solid #dfe5e8;
  border-radius: 5px;
  padding: 0 14px;
  background: #fff;
  color: #52606b;
}
.actions { display: flex; justify-content: flex-end; gap: 18px; margin-top: 22px; }
.table-card { overflow: hidden; }
.table-card table th, .table-card table td { padding: 0 20px; }
.ops { color: var(--mint-dark); display: flex; gap: 16px; white-space: nowrap; }
.ops span {
  cursor: pointer;
}
.ops span:hover {
  text-decoration: underline;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  color: #52606b;
}
.pages { display: flex; gap: 16px; align-items: center; }
.page-num {
  min-width: 30px;
  height: 30px;
  border-radius: 6px;
  display: grid;
  place-items: center;
}
.page-num.on { background: var(--mint); color: #fff; }
.editor-shell {
  height: calc(100vh - 74px);
  max-height: calc(100vh - 74px);
  display: grid;
  grid-template-columns: clamp(260px, 22vw, 380px) minmax(420px, 1fr) clamp(320px, 26vw, 460px);
  grid-template-rows: 60px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.editor-top {
  grid-column: 1 / -1;
  height: 60px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
}
.editor-actions { display: flex; gap: 14px; }
.components, .props {
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  min-height: 0;
  border-right: 1px solid var(--line);
}
.props { border-right: 0; border-left: 1px solid var(--line); }
.switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #f4f6f6;
  border-radius: 5px;
  padding: 2px;
  margin: 0 0 20px;
}
.switch button {
  height: 36px;
  border: 0;
  background: transparent;
  color: #69747d;
  cursor: pointer;
}
.switch .on {
  background: #fff;
  color: var(--mint-dark);
  box-shadow: 0 2px 7px rgba(0,0,0,.06);
}
.group-title { margin: 24px 0 12px; font-weight: 400; color: #26323d; }
.comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.comp {
  height: 54px;
  border: 1px solid #dfe5e8;
  border-radius: 5px;
  background: #fff;
  display: grid;
  place-items: center;
  color: #52606b;
  cursor: pointer;
}
.preview-zone {
  display: grid;
  grid-template-rows: 48px 1fr;
  min-width: 0;
  min-height: 0;
  background: #fbfcfc;
  overflow: hidden;
}
.device-bar {
  height: 48px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
}
.device-bar input {
  width: 70px;
  height: 32px;
  border: 1px solid #dfe5e8;
  border-radius: 4px;
  text-align: center;
}
.phone {
  width: 375px;
  height: 812px;
  margin: 18px auto;
  border: 12px solid #111;
  border-radius: 46px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
  position: relative;
  transform: scale(var(--phone-scale, .78));
  transform-origin: top center;
}
.phone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 92px;
  height: 26px;
  border-radius: 0 0 16px 16px;
  background: #111;
  z-index: 2;
}
.phone-screen {
  height: 100%;
  overflow: auto;
  padding: 54px 14px 22px;
  background: #fff;
}
.mini-nav { text-align: center; font-weight: 400; margin-bottom: 12px; }
.mini-banner {
  height: 196px;
  border-radius: 12px;
  background: url('') center/cover;
  color: #fff;
  padding: 38px 22px;
  margin-bottom: 18px;
}
.mini-banner strong { font-size: 19px; display: block; margin-bottom: 8px; }
.mini-button {
  margin-top: 16px;
  width: 88px;
  height: 34px;
  border-radius: 5px;
  background: var(--mint);
  display: grid;
  place-items: center;
  font-size: 13px;
}
.mini-icons { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; color: #52606b; margin-bottom: 24px; }
.mini-icons i { display: block; color: var(--mint); font-size: 24px; font-style: normal; }
.mini-section h3 { font-size: 17px; margin: 0 0 12px; }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-card img { width: 100%; height: 86px; border-radius: 8px; object-fit: cover; display: block; }
.mini-card span { display: block; text-align: center; margin-top: 8px; font-size: 13px; }
.mini-real { min-height: 100%; padding-bottom: 70px; color: #1f2933; font-size: 14px; }
.mini-real-top {
  height: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  margin-bottom: 12px;
}
.mini-real-top span { font-size: 14px; letter-spacing: 2px; }
.mini-real-hero {
  height: 168px;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 28px 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.mini-real-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,31,36,.45), rgba(20,31,36,.08));
}
.mini-real-hero > div { position: relative; z-index: 1; max-width: 220px; }
.mini-real-hero h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.35; }
.mini-real-hero p { margin: 0 0 18px; opacity: .92; }
.mini-real-hero button, .mini-real-booking button, .mini-real-panel button {
  border: 0;
  height: 34px;
  border-radius: 18px;
  background: var(--mint);
  color: #fff;
  padding: 0 18px;
}
.mini-real-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 1;
}
.mini-real-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
}
.mini-real-dots i.on { background: #fff; }
.mini-real-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 10px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(28,48,56,.08);
}
.mini-real-nav div, .mini-real-orders div { text-align: center; color: #52606b; }
.mini-real-nav i, .mini-real-orders i {
  display: block;
  color: var(--mint);
  font-style: normal;
  font-size: 22px;
  margin-bottom: 5px;
}
.mini-real-section { margin-bottom: 18px; }
.mini-real-section header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.mini-real-section h3 { margin: 0; font-size: 18px; }
.mini-real-section header span { color: #8a949e; font-size: 13px; }
.mini-real-masonry, .mini-real-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mini-real-horizontal {
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.mini-real-horizontal article {
  min-width: 150px;
}
.mini-real-masonry article, .mini-real-grid article, .mini-real-style-cards article {
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(28,48,56,.08);
}
.mini-real-masonry img, .mini-real-grid img {
  width: 100%;
  height: 116px;
  object-fit: cover;
  display: block;
}
.mini-real-masonry b, .mini-real-grid b, .mini-real-style-cards b {
  display: block;
  padding: 8px 10px 2px;
  font-size: 14px;
}
.mini-real-masonry em, .mini-real-grid p, .mini-real-style-cards p {
  display: block;
  margin: 0;
  padding: 0 10px 10px;
  color: #8a949e;
  font-style: normal;
  font-size: 12px;
}
.mini-real-tabs {
  display: flex;
  gap: 12px;
  overflow: hidden;
  margin: 8px 0 16px;
}
.mini-real-tabs span {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 18px;
  color: #52606b;
}
.mini-real-tabs span.on { background: var(--mint); color: #fff; }
.mini-real-style-list { display: grid; gap: 10px; }
.mini-real-style-list article, .mini-real-store, .mini-real-booking, .mini-real-panel, .mini-real-profile, .mini-real-orders {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(28,48,56,.08);
}
.mini-real-style-list article {
  display: grid;
  grid-template-columns: 112px 1fr;
  min-height: 78px;
  overflow: hidden;
}
.mini-real-style-list img, .mini-real-store img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini-real-style-list div { padding: 10px; }
.mini-real-style-list b { display: block; font-size: 15px; }
.mini-real-style-list p { margin: 4px 0 8px; color: #8a949e; font-size: 12px; }
.mini-real-style-list em, .mini-real-style-cards em {
  color: var(--mint-dark);
  font-style: normal;
  font-weight: 400;
}
.mini-badge {
  display: inline-flex;
  margin: 0 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--mint-dark);
  background: var(--mint-soft);
  font-size: 11px;
}
.mini-real-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  border-color: #e6ecef;
  color: #8a949e;
  font-size: 12px;
}
.mini-real-divider::before,
.mini-real-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: currentColor;
  opacity: .35;
}
.mini-real-divider span {
  white-space: nowrap;
}
.mini-real-style-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mini-real-style-cards img { width: 100%; height: 98px; object-fit: cover; display: block; }
.mini-real-booking {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin-bottom: 16px;
}
.mini-real-booking i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--mint-soft);
  color: var(--mint-dark);
  font-style: normal;
}
.mini-real-booking b, .mini-real-profile h3 { display: block; margin: 0 0 4px; font-size: 16px; }
.mini-real-booking p, .mini-real-profile p, .mini-real-store p, .mini-real-panel p { margin: 0; color: #8a949e; font-size: 12px; }
.mini-real-store {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  padding: 12px;
  margin-bottom: 16px;
}
.mini-real-store img { height: 76px; border-radius: 8px; }
.mini-real-panel { padding: 16px; margin-bottom: 14px; }
.mini-real-panel h3 { margin: 0 0 12px; font-size: 17px; }
.mini-real-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.mini-real-calendar span {
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #8a949e;
}
.mini-real-calendar span.on { background: var(--mint-soft); color: var(--mint-dark); }
.mini-real-profile {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #eefaf7, #fff);
}
.mini-real-profile .avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: url('') center/cover;
}
.mini-real-orders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 18px 8px;
}
.mini-real-tabbar {
  position: sticky;
  bottom: -22px;
  margin: 18px -14px -22px;
  height: 58px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
.mini-real-tabbar div { text-align: center; color: #69747d; font-size: 12px; }
.mini-real-tabbar i { display: block; font-style: normal; font-size: 20px; }
.mini-real-tabbar .on { color: var(--mint-dark); }
.picker-list {
  max-height: 180px;
  overflow: auto;
  border: 1px solid #dfe5e8;
  border-radius: 4px;
  padding: 8px 10px;
}
.picker-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin: 0;
  color: #36414c;
}
.picker-list input { width: auto; }
.structure-row {
  height: 42px;
  border: 1px solid #dfe5e8;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 8px;
}
.structure-row.active { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }
.structure-row button {
  border: 0;
  background: transparent;
  color: var(--mint-dark);
  cursor: pointer;
}
.prop-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.prop-tabs button { border: 0; background: transparent; height: 42px; color: #69747d; cursor: pointer; }
.prop-tabs .on { color: var(--mint-dark); border-bottom: 2px solid var(--mint); }
.prop-field { margin-bottom: 18px; }
.prop-field label { display: block; margin-bottom: 8px; color: #52606b; }
.prop-field input, .prop-field select, .prop-field textarea {
  width: 100%;
  border: 1px solid #dfe5e8;
  border-radius: 4px;
  padding: 9px 10px;
  resize: vertical;
}
.inline-input {
  width: 100%;
  height: 30px;
  border: 1px solid #dfe5e8;
  border-radius: 4px;
  padding: 0 8px;
}
.range-line { display: grid; grid-template-columns: 1fr 58px; gap: 12px; align-items: center; }
.toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  background: rgba(31, 41, 51, .92);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: .2s;
}
.toast.show { opacity: 1; }
.state-box {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--muted);
}
.state-box h2 {
  margin: 0;
  color: var(--text);
}
.state-box p {
  margin: 0;
}
.loader {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #dff3ef;
  border-top-color: var(--mint);
  animation: spin .8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(15, 23, 42, .28);
  display: grid;
  place-items: center;
}
.modal.hidden { display: none; }
.modal-card {
  width: min(1120px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-card.compact { width: 560px; }
.modal-card.large { width: min(1240px, calc(100vw - 32px)); }
.modal-head {
  height: 58px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-close {
  border: 0;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: #69747d;
}
.modal-body { padding: 22px; overflow-y: auto; }
.modal-body.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.modal-body.form-grid .prop-field.full { grid-column: 1 / -1; }
.modal-section { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fbfdfd; }
.modal-section h4 { margin: 0 0 8px; font-size: 16px; }
.modal-section p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.field-help { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 6px; }
.editor-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.design-tip { background: #f0faf7; border: 1px solid #d4f1ea; color: #397b71; border-radius: 12px; padding: 12px; line-height: 1.7; font-size: 13px; }
@media (max-width: 980px) { .modal-body.form-grid, .editor-columns { grid-template-columns: 1fr; } }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 22px 22px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.error-text {
  color: #ef5555;
  font-size: 13px;
  min-height: 18px;
}
.login-preview {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f7fbfa, #eef8f6);
  border-radius: 8px;
}
.login-card {
  width: 420px;
  padding: 34px;
}
.login-card h1 {
  margin: 0 0 8px;
  font-size: 26px;
}
.login-card p,
.muted {
  color: var(--muted);
}
.wizard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.tab-preview {
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  text-align: center;
  color: #52606b;
  background: #fff;
}
.tab-preview span:first-child {
  color: var(--mint-dark);
  font-weight: 400;
}

@media (max-width: 1180px) {
  body { grid-template-columns: 220px 1fr; }
  .editor-shell { grid-template-columns: clamp(250px, 21vw, 320px) minmax(400px, 1fr) clamp(300px, 25vw, 360px); }
  .phone { --phone-scale: .68; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1500px) {
  .phone { --phone-scale: .84; }
}

@media (min-height: 900px) {
  .phone { --phone-scale: .9; }
}

/* v9 works-page editor improvements */
.rich-picker {
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfc;
}
.rich-picker .picker-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.rich-picker .picker-item:hover { background: #eef9f6; }
.rich-picker .picker-item input { grid-row: 1 / span 2; width: 16px; height: 16px; margin: 0; }
.rich-picker .picker-name { color: var(--text); font-weight: 400; }
.rich-picker small { color: var(--muted); }
.field-help { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.structured-field { gap: 10px; }
.mini-list-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.structured-list { display: grid; gap: 10px; }
.structured-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(32,48,56,.04);
}
.structured-item.compact { padding: 10px; }
.structured-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--text); }
.structured-title span { color: var(--muted); font-size: 12px; }
.field-grid { display: grid; gap: 10px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.field-grid label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.field-grid input, .field-grid select { height: 34px; border: 1px solid #dde5e8; border-radius: 8px; padding: 0 8px; color: var(--text); }
.item-actions { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.item-actions label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.secondary.danger { color: #d75252; border-color: #f3d1d1; }
.empty-mini { padding: 16px; border-radius: 10px; background: #f7f9f9; color: var(--muted); text-align: center; }
@media (max-width: 1280px) { .field-grid.two { grid-template-columns: 1fr; } }
/* v10 works picker alignment fix */
.rich-picker .picker-item {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 46px;
  height: auto !important;
  gap: 2px 10px;
  align-items: center;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
.rich-picker .picker-item input { grid-row: 1 / span 2; grid-column: 1; justify-self: center; }
.rich-picker .picker-name { grid-column: 2; font-size: 14px !important; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rich-picker small { grid-column: 2; display: block; font-size: 12px !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v13 content editor visual builders */
.visual-builder {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdfd;
  overflow: hidden;
}
.builder-toolbar {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-weight: 400;
}
.builder-toolbar button,
.builder-actions-mini button {
  border: 1px solid #cfe8e2;
  background: #eefaf7;
  color: var(--mint-dark);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.builder-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.builder-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  border: 1px solid #dfe8ea;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(38, 62, 72, .05);
}
.builder-card.image-card {
  grid-template-columns: 112px 1fr auto;
  align-items: start;
}
.builder-card:hover {
  border-color: var(--mint);
  box-shadow: 0 10px 24px rgba(100, 198, 181, .12);
}
.builder-thumb {
  width: 112px;
  height: 92px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #eef3f4;
  color: var(--muted);
}
.builder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.builder-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.builder-fields label {
  margin: 0;
  color: #6a747d;
  font-size: 12px;
}
.builder-fields input,
.builder-fields select {
  margin-top: 5px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #dfe5e8;
  border-radius: 8px;
  font-size: 13px;
}
.builder-actions-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: center;
}
.builder-actions-mini button {
  white-space: nowrap;
  padding: 6px 9px;
  font-size: 12px;
}
@media (max-width: 1180px) {
  .builder-card.image-card { grid-template-columns: 92px 1fr; }
  .builder-card.image-card .builder-actions-mini { grid-column: 1 / -1; flex-direction: row; }
  .builder-thumb { width: 92px; height: 78px; }
  .builder-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .builder-card, .builder-card.image-card { grid-template-columns: 1fr; }
  .builder-fields { grid-template-columns: 1fr; }
  .builder-actions-mini { flex-direction: row; }
}

/* v14 media library picker */
.asset-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.asset-input-row input { width: 100%; }
.asset-textarea-row {
  display: grid;
  gap: 8px;
}
.asset-pick-btn {
  border: 1px solid #cfe8e2;
  background: #eefaf7;
  color: var(--mint-dark);
  border-radius: 8px;
  padding: 0 12px;
  min-height: 34px;
  cursor: pointer;
  white-space: nowrap;
}
.asset-pick-btn:hover { border-color: var(--mint); background: #e3f6f1; }
.asset-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, .34);
  display: grid;
  place-items: center;
  padding: 24px;
}
.asset-card {
  width: min(980px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.asset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.asset-head h3 { margin: 0 0 4px; font-size: 18px; }
.asset-head p { margin: 0; color: var(--muted); font-size: 13px; }
.asset-tools {
  display: flex;
  gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: #fbfdfd;
}
.asset-tools input {
  flex: 1;
  height: 38px;
  border: 1px solid #dfe5e8;
  border-radius: 10px;
  padding: 0 12px;
}
.asset-tools button {
  border: 1px solid #cfe8e2;
  background: #eefaf7;
  color: var(--mint-dark);
  border-radius: 10px;
  padding: 0 14px;
  cursor: pointer;
}
.asset-grid {
  padding: 18px 22px 22px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 14px;
}
.asset-item {
  border: 1px solid #dfe8ea;
  background: #fff;
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
  display: grid;
  gap: 8px;
}
.asset-item:hover { border-color: var(--mint); box-shadow: 0 10px 24px rgba(100, 198, 181, .16); }
.asset-item img {
  width: 100%;
  height: 104px;
  object-fit: cover;
  border-radius: 10px;
  background: #eef3f4;
}
.asset-item span {
  font-size: 12px;
  color: #53606a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.builder-card.dragging { opacity: .45; }
@media (max-width: 760px) {
  .asset-modal { padding: 12px; }
  .asset-card { width: calc(100vw - 24px); }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v16 asset upload and picker enhancements */
.asset-upload-btn {
  border: 1px solid var(--mint);
  background: var(--mint);
  color: #fff;
  border-radius: 10px;
  padding: 0 14px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
}
.asset-hint {
  padding: 0 22px 12px;
  color: var(--muted);
  font-size: 12px;
  background: #fbfdfd;
}
.asset-item-card {
  border: 1px solid #dfe8ea;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  display: grid;
}
.asset-item-card .asset-item {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.asset-item small {
  color: #95a1aa;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-copy {
  border: 0;
  border-top: 1px solid #edf2f3;
  background: #f8fbfb;
  color: var(--mint-dark);
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
}
.asset-copy:hover { background: #eefaf7; }
@media (max-width: 760px) {
  .asset-tools { flex-wrap: wrap; }
  .asset-tools input { min-width: 100%; }
}

/* v17 split live content editor */
.modal-card.split-live { width: min(1560px, calc(100vw - 28px)); max-height: calc(100vh - 28px); }
.split-preview-body { display: grid; grid-template-columns: minmax(620px, 1fr) minmax(360px, 430px); gap: 18px; padding: 0; overflow: hidden; }
.modal-edit-pane { padding: 22px; overflow-y: auto; max-height: calc(100vh - 128px); border-right: 1px solid var(--line); }
.modal-edit-pane.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.modal-edit-pane.form-grid .prop-field.full, .modal-edit-pane.form-grid .modal-section { grid-column: 1 / -1; }
.modal-preview-pane { background: linear-gradient(180deg, #f5f8f8, #eef4f4); overflow-y: auto; max-height: calc(100vh - 128px); padding: 20px; }
.preview-sticky { position: sticky; top: 0; }
.preview-title { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.live-preview-phone { width: 360px; min-height: 700px; margin: 0 auto; border: 10px solid #0f1417; border-radius: 42px; background: #f7f9f9; overflow: hidden; box-shadow: 0 18px 40px rgba(15,23,42,.18); }
.cms-phone-page { padding: 18px; font-family: "OPPO Sans", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: #18232b; }
.cms-phone-nav { height: 42px; display: grid; place-items: center; font-weight: 400; }
.cms-hero { position: relative; height: 190px; border-radius: 18px; overflow: hidden; background: #dfe8e8; margin-bottom: 14px; }
.cms-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.48)); }
.cms-hero div { position: absolute; left: 18px; right: 18px; bottom: 16px; color: #fff; z-index: 1; }
.cms-hero h3 { margin: 0 0 4px; font-size: 20px; }
.cms-hero p { margin: 0; opacity: .9; }
.cms-card { background: #fff; border-radius: 18px; padding: 16px; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(38,62,72,.06); }
.cms-card h4 { margin: 0 0 10px; font-size: 16px; }
.cms-card p { margin: 0; color: #6a747d; line-height: 1.65; font-size: 13px; }
.cms-summary { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cms-summary strong { color: var(--mint); font-size: 24px; white-space: nowrap; }
.cms-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cms-tags span { background: #e6f5f2; color: var(--mint-dark); padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.cms-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cms-specs span { border: 1px solid #eef2f3; border-radius: 12px; padding: 8px; text-align: center; }
.cms-specs b, .cms-specs em { display: block; font-style: normal; }
.cms-specs b { color: var(--mint-dark); }
.cms-specs em { color: #8a949c; font-size: 12px; margin-top: 4px; }
.cms-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cms-highlights span { border: 1px solid #eef2f3; border-radius: 12px; padding: 10px; }
.cms-highlights b, .cms-highlights em, .cms-highlights small { display: block; font-style: normal; }
.cms-highlights b { color: var(--mint-dark); font-size: 22px; }
.cms-highlights em { font-weight: 400; margin-top: 3px; }
.cms-highlights small { color: #8a949c; margin-top: 2px; }
.cms-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 72px; gap: 6px; }
.cms-mosaic.masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 90px; }
.cms-mosaic.art_wall { background: #111; padding: 6px; border-radius: 14px; }
.cms-mosaic.asymmetric, .cms-mosaic.magazine, .cms-mosaic.children_collage { grid-auto-rows: 78px; }
.cms-mosaic-item { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #edf3f3; min-height: 72px; }
.cms-mosaic-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-mosaic-item.span-2-1, .cms-mosaic-item.size-wide { grid-column: span 2; }
.cms-mosaic-item.span-1-2, .cms-mosaic-item.size-tall { grid-row: span 2; }
.cms-mosaic-item.span-2-2, .cms-mosaic-item.size-large { grid-column: span 2; grid-row: span 2; }
.cms-mosaic-item.span-2-3 { grid-column: span 2; grid-row: span 3; }
.cms-mosaic-item.span-3-2 { grid-column: span 3; grid-row: span 2; }
.cms-mosaic-item.span-3-4 { grid-column: span 3; grid-row: span 4; }
.cms-mosaic-item.span-4-3 { grid-column: span 4; grid-row: span 3; }
.cms-mosaic-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 8px; color: #fff; font-size: 11px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.52)); }
.cms-mosaic-item figcaption b, .cms-mosaic-item figcaption span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-empty { min-height: 120px; display: grid; place-items: center; color: #8b98a1; background: #f2f6f6; border: 1px dashed #d6e1e1; border-radius: 14px; }
.builder-thumb-wrap { display: grid; gap: 8px; }
.builder-thumb { position: relative; width: 132px; height: 132px; overflow: hidden; border-radius: 12px; background:#edf3f3; }
.builder-thumb img { width: 100%; height: 100%; object-fit: cover; display:block; }
.resize-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 144px; }
.resize-chips button { border: 1px solid #d6e9e4; background: #f6fcfa; color: var(--mint-dark); border-radius: 999px; padding: 3px 7px; font-size: 11px; cursor: pointer; }
.resize-chips button:hover, .resize-chips button.active { background: #64c3b2; color: #fff; border-color: #64c3b2; }
@media (max-width: 1220px) {
  .split-preview-body { grid-template-columns: 1fr; overflow-y: auto; }
  .modal-edit-pane, .modal-preview-pane { max-height: none; }
  .modal-preview-pane { border-top: 1px solid var(--line); }
}

/* v18: edit-list thumbnails stay fixed; only preview canvas changes size */
.visual-builder .builder-thumb {
  width: 112px !important;
  height: 92px !important;
  min-width: 112px;
  min-height: 92px;
  max-width: 112px;
  max-height: 92px;
}
.visual-builder .builder-thumb img {
  object-fit: cover;
  transform: none !important;
}
.builder-card.image-card {
  grid-template-columns: 138px 1fr auto;
}
.builder-fields label small {
  display: block;
  margin-top: 4px;
  color: #94a3ad;
  font-size: 11px;
}
.builder-fields input[type="range"] {
  padding: 0;
}
.asset-tools select {
  height: 38px;
  border: 1px solid #dfe5e8;
  border-radius: 10px;
  padding: 0 10px;
  background: #fff;
}
/* v18: admin live preview uses the same span-driven grid as the miniprogram */
.cms-mosaic,
.cms-mosaic.magazine,
.cms-mosaic.asymmetric,
.cms-mosaic.children_collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 78px;
  gap: 6px;
}
.cms-mosaic.grid {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 118px;
}
.cms-mosaic.masonry {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 90px;
}
.cms-mosaic-item img {
  will-change: transform;
}
/* v18: modular detail editor scaffold */
.module-editor-note {
  grid-column: 1 / -1;
  border: 1px dashed #cfe8e2;
  background: #f7fcfa;
  color: #53606a;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
}


/* v20 authoritative visual mosaic: backend live preview and mini program share this span contract */
.cms-mosaic,
.cms-mosaic.magazine,
.cms-mosaic.masonry,
.cms-mosaic.art_wall,
.cms-mosaic.children_collage,
.cms-mosaic.asymmetric,
.cms-mosaic.grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 78px !important;
  grid-auto-flow: dense !important;
  gap: 6px !important;
}
.cms-mosaic-item {
  min-width: 0 !important;
  min-height: 0 !important;
  grid-column: auto;
  grid-row: auto;
}
.cms-mosaic-item.span-1-1 { grid-column: span 1 !important; grid-row: span 1 !important; }
.cms-mosaic-item.span-2-1 { grid-column: span 2 !important; grid-row: span 1 !important; }
.cms-mosaic-item.span-1-2 { grid-column: span 1 !important; grid-row: span 2 !important; }
.cms-mosaic-item.span-2-2 { grid-column: span 2 !important; grid-row: span 2 !important; }
.cms-mosaic-item.span-2-3 { grid-column: span 2 !important; grid-row: span 3 !important; }
.cms-mosaic-item.span-3-2 { grid-column: span 3 !important; grid-row: span 2 !important; }
.cms-mosaic-item.span-3-4 { grid-column: span 3 !important; grid-row: span 4 !important; }
.cms-mosaic-item.span-4-3 { grid-column: span 4 !important; grid-row: span 3 !important; }
.cms-mosaic-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* editor thumbnails must stay fixed; selected span only affects right-side preview */
.visual-builder .builder-thumb,
.visual-builder .builder-thumb-wrap .builder-thumb {
  width: 112px !important;
  height: 92px !important;
  min-width: 112px !important;
  min-height: 92px !important;
  max-width: 112px !important;
  max-height: 92px !important;
}
.visual-builder .builder-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
}


/* v21 package picker for related style recommendations */
.package-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: #fbfdfd; }
.package-picker-item { display: grid; grid-template-columns: 20px 58px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e4eeee; border-radius: 12px; background: #fff; cursor: pointer; }
.package-picker-item:hover { border-color: var(--mint); box-shadow: 0 8px 18px rgba(100,195,178,.12); }
.package-picker-item img { width: 58px; height: 46px; object-fit: cover; border-radius: 8px; background: #eef5f5; }
.package-picker-item b { display: block; color: var(--text); }
.package-picker-item small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.package-picker-item em { color: var(--mint); font-style: normal; font-weight: 400; }
.span-hidden-input { display: none !important; }
.builder-thumb-wrap .builder-thumb { width: 112px !important; height: 112px !important; min-width: 112px !important; min-height: 112px !important; }
.builder-thumb-wrap .builder-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* v23 content editor accordions */
.editor-accordion {
  grid-column: 1 / -1;
  border: 1px solid rgba(100,195,178,.28);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  margin: 8px 0 14px;
  box-shadow: 0 8px 22px rgba(38,62,72,.04);
}
.editor-accordion > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 400;
  color: #1f2b35;
  background: linear-gradient(180deg, #ffffff, #f7fbfa);
  border-bottom: 1px solid #edf2f2;
}
.editor-accordion > summary::-webkit-details-marker { display: none; }
.editor-accordion > summary::after {
  content: '展开';
  color: #64c3b2;
  font-weight: 400;
  font-size: 12px;
}
.editor-accordion[open] > summary::after { content: '收起'; }
.editor-accordion > summary small {
  color: #8a949e;
  font-weight: 400;
  flex: 1;
  text-align: right;
}
.accordion-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.accordion-grid .prop-field.full { grid-column: 1 / -1; }
.cms-mosaic-item img { position: absolute; max-width: none; max-height: none; display: block; }
.cms-mosaic-item { overflow: hidden; }
.cms-mosaic.shape-square .cms-mosaic-item { border-radius: 0 !important; }
.cms-mosaic.shape-rounded .cms-mosaic-item { border-radius: 14px !important; }

/* v24 robust custom accordions: default collapsed, independent state, no details rendering quirks */
.editor-accordion {
  grid-column: 1 / -1;
  align-self: start;
  overflow: hidden;
}
.editor-accordion .accordion-summary {
  width: 100%;
  border: 0;
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 400;
  color: #1f2b35;
  background: linear-gradient(180deg, #ffffff, #f7fbfa);
  border-bottom: 1px solid #edf2f2;
  text-align: left;
}
.editor-accordion .accordion-summary::after {
  content: '展开';
  color: #64c3b2;
  font-weight: 400;
  font-size: 12px;
  flex: 0 0 auto;
}
.editor-accordion.is-open .accordion-summary::after { content: '收起'; }
.editor-accordion .accordion-summary span { flex: 0 0 auto; }
.editor-accordion .accordion-summary small {
  color: #8a949e;
  font-weight: 400;
  flex: 1;
  text-align: right;
}
.editor-accordion .accordion-grid[hidden] { display: none !important; }
.editor-accordion.is-collapsed { margin-bottom: 10px; }
.editor-accordion.is-open { margin-bottom: 16px; }
.visual-builder .builder-fields input[type="number"] { min-width: 0; }

/* v25: accordion layout isolation. Split editors use a normal vertical flow so expanded modules cannot overlap. */
.split-preview-body .modal-edit-pane.form-grid {
  display: block !important;
  position: relative;
}
.split-preview-body .modal-edit-pane .editor-accordion {
  display: block !important;
  width: 100% !important;
  clear: both;
  position: relative;
  z-index: 1;
}
.split-preview-body .modal-edit-pane .editor-accordion.is-open { z-index: 2; }
.editor-accordion.is-collapsed .accordion-grid,
.editor-accordion .accordion-grid[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.editor-accordion.is-open .accordion-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  overflow: visible;
}
.editor-accordion.is-open .accordion-grid .prop-field.full,
.editor-accordion.is-open .accordion-grid .visual-builder,
.editor-accordion.is-open .accordion-grid .package-picker-list {
  grid-column: 1 / -1;
}

/* v25: make the 360px live-preview phone mimic 750rpx mini-program geometry more closely. */
.live-preview-phone .cms-mosaic,
.live-preview-phone .cms-mosaic.magazine,
.live-preview-phone .cms-mosaic.masonry,
.live-preview-phone .cms-mosaic.art_wall,
.live-preview-phone .cms-mosaic.children_collage,
.live-preview-phone .cms-mosaic.asymmetric,
.live-preview-phone .cms-mosaic.grid {
  grid-auto-rows: 74px !important;
  gap: 5px !important;
}

/* v27 page decoration preview layout alignment */
.mini-real-work-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.mini-real-work-layout article {
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(28,48,56,.08);
  min-width: 0;
}
.mini-real-work-layout img { width: 100%; height: 118px; object-fit: cover; display: block; }
.mini-real-work-layout b { display: block; padding: 8px 10px 2px; font-size: 14px; }
.mini-real-work-layout em { display: block; margin: 0; padding: 0 10px 10px; color: #8a949e; font-style: normal; font-size: 12px; }
.mini-real-work-layout.layout-grid,
.mini-real-work-layout.layout-two_column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-real-work-layout.layout-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.mini-real-work-layout.layout-masonry article:nth-child(3n+1) img { height: 150px; }
.mini-real-work-layout.layout-masonry article:nth-child(3n+2) img { height: 112px; }
.mini-real-work-layout.layout-masonry article:nth-child(3n) img { height: 132px; }
.mini-real-work-layout.layout-horizontal { display: flex; overflow: hidden; }
.mini-real-work-layout.layout-horizontal article { min-width: 150px; }
.mini-real-work-layout.layout-big_left { grid-template-columns: 1.25fr .85fr; }
.mini-real-work-layout.layout-big_left article:first-child { grid-row: span 2; }
.mini-real-work-layout.layout-big_left article:first-child img { height: 268px; }
.mini-real-work-layout.layout-big_right { grid-template-columns: .85fr 1.25fr; }
.mini-real-work-layout.layout-big_right article:nth-child(2) { grid-row: span 2; }
.mini-real-work-layout.layout-big_right article:nth-child(2) img { height: 268px; }
.mini-real-work-layout.layout-magazine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-real-work-layout.layout-magazine article:first-child { grid-column: span 2; }
.mini-real-work-layout.layout-magazine article:first-child img { height: 140px; }
.mini-real-store.store-wide_card { display: block; padding: 12px; }
.mini-real-store.store-wide_card img { width: 100%; height: 120px; margin-bottom: 10px; object-fit: cover; }
.mini-store-call { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--mint-soft); color: var(--mint-dark); }
.note-field { background: #f7fbfa; border: 1px dashed #d3ebe7; border-radius: 12px; padding: 12px; }

/* v29 page decoration preview helpers */
.mini-store-actions { display:flex; flex-direction:column; gap:8px; }
.mini-real-store .mini-store-actions .mini-store-call { margin:0; }

/* v34 页面装修：内容/样式分组与颜色预览 */
.prop-panel { display: none; }
.prop-panel.is-active { display: block; }
.prop-group { border: 1px solid var(--line); border-radius: 16px; background: #fbfdfd; padding: 14px; margin-bottom: 18px; }
.prop-group-title { font-weight: 400; color: #26323d; margin-bottom: 12px; }
.prop-field.two-col, .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.color-input-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.color-input-row input[type="color"], .table-color-input input[type="color"] { width: 38px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
.color-hex-input { font-family: "OPPO Sans", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", Arial, sans-serif; }
.table-color-input { display: grid; grid-template-columns: 34px minmax(0, 105px); gap: 6px; align-items: center; }
.table-color-input .inline-input { min-width: 96px; font-family: "OPPO Sans", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", Arial, sans-serif; }
.mini-real-top p { margin: 4px 0 0; line-height: 1.35; }
.mini-real-top > div { min-width: 0; }

/* v37 内容管理多标签与模块属性增强 */
.seg.content-tabs.wide {
  display: inline-flex;
  grid-template-columns: none;
  width: auto;
  flex-wrap: wrap;
}
.seg.content-tabs.wide button {
  min-width: 86px;
  padding: 0 12px;
}
.module-settings-card .hint,
.prop-field .hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

/* v40 页面装修预览空状态：和小程序严格对齐，manual 未选内容时不再假装有内容 */
.mini-real-empty {
  min-height: 112px;
  border-radius: 18px;
  background: rgba(247, 249, 249, .9);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* v41 高保真页面装修预览：750rpx 设计坐标运行时
   所有尺寸先按小程序 rpx 数值在 750px 画布中布局，再按设备宽度统一缩放。 */
.preview-zone { overflow: hidden; align-content: start; }
.device-bar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); flex-wrap: wrap; min-height: 48px; height: auto; padding: 8px 18px; gap: 8px; }
.device-bar .device-title { font-weight: 400; margin-right: auto; }
.device-bar label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.device-bar input { width: 64px; }
.device-bar select { height: 32px; border: 1px solid #dfe5e8; border-radius: 6px; background: #fff; padding: 0 8px; }
.runtime-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 999px; background: #e6f5f2; color: #55afa1; font-size: 11px; font-weight: 400; white-space: nowrap; }

.phone.runtime-phone {
  --phone-scale: 1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 18px auto 30px;
  border: 10px solid #101315;
  border-radius: 42px;
  transform: none !important;
  overflow: hidden;
  box-sizing: border-box;
  transition: width .18s ease, height .18s ease;
}
.phone.runtime-phone::before { width: 86px; height: 22px; top: 0; border-radius: 0 0 14px 14px; }
.phone.runtime-phone::after { content:""; position:absolute; left:50%; bottom:5px; transform:translateX(-50%); width:36%; height:4px; border-radius:999px; background:#111; z-index:6; pointer-events:none; }
.phone.runtime-phone .phone-screen { height: 100%; padding: 0; overflow: auto; background: #f7f9f9; scrollbar-width: thin; }
.mini-runtime-viewport { position: relative; overflow: hidden; background: #f7f9f9; }
.mini-runtime-stage {
  width: 750px;
  min-height: 100%;
  transform-origin: top left;
  color: #1f2933;
  font-family: "OPPO Sans", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", Arial, sans-serif;
  font-size: 28px;
  line-height: normal;
}
.mini-runtime-stage *, .mini-runtime-stage *::before, .mini-runtime-stage *::after { box-sizing: border-box; }
.mini-runtime-stage button { font: inherit; }
.mini-runtime-page { position: relative; min-height: 100%; padding: 44px 28px 190px; overflow: hidden; }
.mini-runtime-stage img { max-width: none; }

.mini-runtime-stage .mini-real-top { position:relative; display:block; margin:-44px -28px 26px; padding:96px 28px 22px; }
.mini-runtime-stage .mini-real-top strong { display:block; line-height:1.15; }
.mini-runtime-stage .mini-real-top p { margin:8px 0 0; line-height:1.15; }
.mini-runtime-stage .runtime-title-stack { min-width:0; height:64px; max-width:500px; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }
.mini-runtime-stage .runtime-capsule { position:absolute; top:96px; right:28px; z-index:3; width:184px; height:64px; border:1px solid #e4e8eb; border-radius:36px; background:rgba(255,255,255,.86); display:flex; align-items:center; justify-content:center; white-space:nowrap; font-size:25px; color:#111; letter-spacing:0; }

.mini-runtime-stage .card { background: #fff; border-radius: 22px; box-shadow: 0 10px 26px rgba(28,48,56,.08); overflow: hidden; }
.mini-runtime-stage .section { margin-top: 28px; }
.mini-runtime-stage .section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.mini-runtime-stage .section-title { font-size: 31px; font-weight: 400; }
.mini-runtime-stage .section-title::before { content: ""; display: inline-block; width: 7px; height: 32px; margin-right: 12px; border-radius: 6px; background: #64c3b2; vertical-align: -5px; }
.mini-runtime-stage .more { color: #8a949e; font-size: 24px; white-space: nowrap; }
.mini-runtime-stage .sub { margin-top: 8px; color: #8a949e; font-size: 22px; }
.mini-runtime-stage .pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 999px; background: #e6f5f2; color: #55afa1; font-size: 22px; }

.mini-runtime-stage .hero { min-height: 318px; height: auto; position: relative; }
.mini-runtime-stage .hero-swiper { position: relative; width: 100%; height: 360px; min-height: 260px; overflow: hidden; }
.mini-runtime-stage .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.mini-runtime-stage .hero-slide.is-active { opacity: 1; }
.mini-runtime-stage .hero-img { width: 100%; height: 100%; display: block; object-fit: cover; background: #edf3f1; }
.mini-runtime-stage .hero-mask { position: absolute; inset: 0; padding: 64px 46px; color: #fff; background: linear-gradient(90deg, rgba(16,34,34,.42), rgba(16,34,34,.06)); pointer-events: none; }
.mini-runtime-stage .hero-title { width: 330px; max-width: 440px; font-size: 34px; line-height: 1.5; font-weight: 400; }
.mini-runtime-stage .hero-sub { margin-top: 8px; font-size: 23px; color: rgba(255,255,255,.9); }
.mini-runtime-stage .hero-btn { margin-top: 28px; width: 174px; height: 58px; border-radius: 32px; background: #64c3b2; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.mini-runtime-stage .runtime-dots { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 18px; z-index: 2; }
.mini-runtime-stage .runtime-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.48); }
.mini-runtime-stage .runtime-dots i.on { background: #fff; }
.mini-runtime-stage .hero.full { margin-left: -28px; margin-right: -28px; border-radius: 0 !important; }
.mini-runtime-stage .hero.split { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 360px; }
.mini-runtime-stage .hero.split .hero-swiper { height: 100% !important; min-height: 360px; }
.mini-runtime-stage .hero.split .hero-mask { position: static; display: flex; flex-direction: column; justify-content: center; padding: 44px 36px; background: transparent; color: #1f2933; }
.mini-runtime-stage .text-left { text-align: left; }
.mini-runtime-stage .text-center { text-align: center; }
.mini-runtime-stage .text-right { text-align: right; }
.mini-runtime-stage .text-center .hero-title, .mini-runtime-stage .text-center .hero-btn { margin-left: auto; margin-right: auto; }
.mini-runtime-stage .text-right .hero-title, .mini-runtime-stage .text-right .hero-btn { margin-left: auto; }

.mini-runtime-stage .image-ad { margin-top: 28px; min-height: 120px; overflow: hidden; }
.mini-runtime-stage .image-ad img { width: 100%; height: 360px; display: block; object-fit: cover; background: #edf3f1; }
.mini-runtime-stage .image-ad-copy { padding: 24px 28px; }
.mini-runtime-stage .image-ad.copy_overlay { position: relative; }
.mini-runtime-stage .image-ad.copy_overlay .image-ad-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 30px 26px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45)); }
.mini-runtime-stage .image-ad.copy_overlay .generic-title, .mini-runtime-stage .image-ad.copy_overlay .generic-sub, .mini-runtime-stage .image-ad.copy_overlay .generic-text { color: #fff !important; }
.mini-runtime-stage .image-ad.image_only .image-ad-copy { display: none; }
.mini-runtime-stage .image-ad.copy_below .image-ad-copy { position: static; padding: 20px 0 0; background: transparent; }
.mini-runtime-stage .image-ad.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.mini-runtime-stage .image-ad.split img { height: 100%; min-height: 260px; }
.mini-runtime-stage .ratio-1-1 > img, .mini-runtime-stage .ratio-1-1 .work-tile img, .mini-runtime-stage .ratio-1-1 .style-row img { aspect-ratio: 1 / 1; height: auto !important; }
.mini-runtime-stage .ratio-4-3 > img, .mini-runtime-stage .ratio-4-3 .work-tile img, .mini-runtime-stage .ratio-4-3 .style-row img { aspect-ratio: 4 / 3; height: auto !important; }
.mini-runtime-stage .ratio-3-4 > img, .mini-runtime-stage .ratio-3-4 .work-tile img, .mini-runtime-stage .ratio-3-4 .style-row img { aspect-ratio: 3 / 4; height: auto !important; }
.mini-runtime-stage .ratio-16-9 > img, .mini-runtime-stage .ratio-16-9 .work-tile img, .mini-runtime-stage .ratio-16-9 .style-row img { aspect-ratio: 16 / 9; height: auto !important; }

.mini-runtime-stage .title-block { margin: 30px 4px 16px; }
.mini-runtime-stage .text-panel { margin-top: 24px; padding: 28px; }
.mini-runtime-stage .generic-title { font-size: 32px; font-weight: 400; color: #1f2933; }
.mini-runtime-stage .generic-sub, .mini-runtime-stage .generic-text { margin-top: 10px; color: #6f7b84; font-size: 25px; line-height: 1.7; }
.mini-runtime-stage .generic-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 156px; height: 58px; margin-top: 18px; padding: 0 24px; border-radius: 32px; background: #e6f5f2; color: #55afa1; font-size: 24px; }

.mini-runtime-stage .category { margin-top: 28px; padding: 22px 10px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 16px; }
.mini-runtime-stage .category.cols-2 { grid-template-columns: repeat(2,1fr); }
.mini-runtime-stage .category.cols-3 { grid-template-columns: repeat(3,1fr); }
.mini-runtime-stage .category.cols-4 { grid-template-columns: repeat(4,1fr); }
.mini-runtime-stage .category.cols-5 { grid-template-columns: repeat(5,1fr); }
.mini-runtime-stage .category.horizontal { display: flex; overflow-x: auto; }
.mini-runtime-stage .category.horizontal .cat { min-width: 150px; }
.mini-runtime-stage .category.card_grid .cat { min-height: 128px; padding: 18px 12px; border-radius: 18px; background: #f7f9f9; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mini-runtime-stage .cat { min-width: 0; text-align: center; color: #56616b; font-size: 22px; }
.mini-runtime-stage .cat img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.mini-runtime-stage .cat-icon { width: 76px; height: 76px; margin: 0 auto 8px; border-radius: 50%; background: #e6f5f2; color: #64c3b2; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.mini-runtime-stage .cat > div:not(.cat-icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-runtime-stage .cat > span { display: block; margin-top: 6px; color: #8a949e; font-size: 20px; }

.mini-runtime-stage .page-tabs { min-height: 64px; display: block; white-space: nowrap; overflow-x: auto; }
.mini-runtime-stage .tab-pill { display: inline-flex; align-items: center; justify-content: center; margin-right: 16px; min-width: 96px; height: 56px; padding: 0 22px; border: 0; border-radius: 999px; background: #e6f5f2; color: #55afa1; cursor: pointer; }
.mini-runtime-stage .page-tabs.pills .tab-pill.on { background: #64c3b2; color: #fff; box-shadow: 0 10px 22px rgba(100,195,178,.22); }
.mini-runtime-stage .page-tabs.underline .tab-pill { background: transparent; color: #6f7b84; border-radius: 0; border-bottom: 4px solid transparent; }
.mini-runtime-stage .page-tabs.underline .tab-pill.on { color: #55afa1; border-bottom-color: #64c3b2; }
.mini-runtime-stage .page-tabs.plain .tab-pill { background: transparent; color: #6f7b84; padding-left: 8px; padding-right: 8px; }
.mini-runtime-stage .page-tabs.plain .tab-pill.on { color: #1f2933; font-weight: 400; }

.mini-runtime-stage .booking { margin-top: 28px; padding: 24px; display: grid; grid-template-columns: 72px 1fr 176px; align-items: center; gap: 18px; }
.mini-runtime-stage .booking-icon { width: 58px; height: 58px; border-radius: 14px; background: #dff3ef; color: #64c3b2; display: flex; align-items: center; justify-content: center; }
.mini-runtime-stage .booking-title { font-size: 30px; font-weight: 400; }
.mini-runtime-stage .booking-btn { background: #e6f5f2; color: #64c3b2; height: 58px; border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 24px; }

.mini-runtime-stage .work-layout { display: grid; gap: 14px; }
.mini-runtime-stage .work-layout.grid, .mini-runtime-stage .work-layout.two_column { grid-template-columns: repeat(2,1fr); }
.mini-runtime-stage .work-layout.horizontal { display: flex; overflow-x: auto; padding-bottom: 8px; }
.mini-runtime-stage .work-layout.horizontal .work-tile { flex: 0 0 310px; }
.mini-runtime-stage .work-layout.big_left { grid-template-columns: 1.25fr .85fr; }
.mini-runtime-stage .work-layout.big_left .work-tile:first-child { grid-row: span 2; }
.mini-runtime-stage .work-layout.big_left .work-tile:first-child img { height: 600px; }
.mini-runtime-stage .work-layout.big_right { grid-template-columns: .85fr 1.25fr; }
.mini-runtime-stage .work-layout.big_right .work-tile:nth-child(2) { grid-row: span 2; }
.mini-runtime-stage .work-layout.big_right .work-tile:nth-child(2) img { height: 600px; }
.mini-runtime-stage .work-layout.magazine { grid-template-columns: repeat(3,1fr); }
.mini-runtime-stage .work-layout.magazine .work-tile:first-child { grid-column: span 2; }
.mini-runtime-stage .work-layout.magazine .work-tile:first-child img { height: 300px; }
.mini-runtime-stage .work-layout.masonry { grid-template-columns: repeat(2,1fr); align-items: start; }
.mini-runtime-stage .work-layout.masonry .work-tile:nth-child(3n+1) img { height: 330px; }
.mini-runtime-stage .work-layout.masonry .work-tile:nth-child(3n+2) img { height: 250px; }
.mini-runtime-stage .work-layout.masonry .work-tile:nth-child(3n) img { height: 290px; }
.mini-runtime-stage .work-tile { position: relative; overflow: hidden; min-width: 0; transform: translateZ(0); }
.mini-runtime-stage .work-tile img { width: 100%; height: 280px; display: block; object-fit: cover; background: #edf3f1; }
.mini-runtime-stage .work-layout.grid .work-tile img, .mini-runtime-stage .work-layout.two_column .work-tile img { height: 310px; }
.mini-runtime-stage .work-layout.horizontal .work-tile img { height: 260px; }
.mini-runtime-stage .tile-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 16px; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.42)); font-size: 26px; }
.mini-runtime-stage .tile-caption div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-runtime-stage .tile-caption span { display: block; margin-top: 6px; font-size: 20px; opacity: .9; }
.mini-runtime-stage .work-layout-free { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; align-items: stretch; }
.mini-runtime-stage .work-free-item { position: relative; overflow: hidden; background: #f3f6f6; min-width: 0; min-height: 0; }
.mini-runtime-stage .work-free-item img { width: 100%; height: 100%; display: block; }
.mini-runtime-stage .work-layout-free.shape-rounded .work-free-item { border-radius: 20px; }
.mini-runtime-stage .work-layout-free.shape-square .work-free-item { border-radius: 0; }

.mini-runtime-stage .style-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mini-runtime-stage .style-row { height: 126px; display: grid; grid-template-columns: 150px 1fr; align-items: center; background: #fff; transform: translateZ(0); }
.mini-runtime-stage .style-row img { width: 150px; height: 126px; object-fit: cover; background: #edf3f1; }
.mini-runtime-stage .style-row > div { padding: 0 18px; }
.mini-runtime-stage .style-name { font-size: 30px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-runtime-stage .style-sub { color: #8a949e; font-size: 22px; margin: 8px 0 12px; }
.mini-runtime-stage .style-price { margin-top: 12px; color: #55afa1; font-size: 28px; font-weight: 400; }
.mini-runtime-stage .style-row .pill { margin: 10px 8px 0 0; }
.mini-runtime-stage .style-row .badge { background: #fff4df; color: #c87913; }
.mini-runtime-stage .style-mini.card_grid, .mini-runtime-stage .style-mini.two_column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.mini-runtime-stage .style-mini.card_grid .style-row, .mini-runtime-stage .style-mini.two_column .style-row { height: auto; display: block; overflow: hidden; }
.mini-runtime-stage .style-mini.card_grid .style-row img, .mini-runtime-stage .style-mini.two_column .style-row img { width: 100%; height: 220px; display: block; }
.mini-runtime-stage .style-mini.card_grid .style-row > div, .mini-runtime-stage .style-mini.two_column .style-row > div { padding: 18px; }
.mini-runtime-stage .style-mini.compact_list { display: grid; grid-template-columns: 1fr; }
.mini-runtime-stage .style-mini.compact_list .style-row { height: auto; min-height: 150px; }
.mini-runtime-stage .style-mini.horizontal_card { display: flex; overflow-x: auto; padding-bottom: 6px; }
.mini-runtime-stage .style-mini.horizontal_card .style-row { flex: 0 0 560px; }

.mini-runtime-stage .empty-state { min-height: 280px; border: 1px dashed rgba(100,195,178,.24); border-radius: 24px; background: rgba(255,255,255,.64); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8a949e; text-align: center; gap: 18px; }
.mini-runtime-stage .empty-icon { width: 96px; height: 96px; border-radius: 50%; background: #e6f5f2; color: #64c3b2; display: flex; align-items: center; justify-content: center; font-size: 48px; }

.mini-runtime-stage .appointment-mini, .mini-runtime-stage .calendar-mini { margin-top: 28px; padding: 28px; }
.mini-runtime-stage .form-preview { margin-top: 18px; color: #6f7b84; font-size: 24px; line-height: 1.8; }
.mini-runtime-stage .mini-submit { position: static; margin-top: 18px; width: 100%; }
.mini-runtime-stage .calendar-preview { margin-top: 20px; display: grid; grid-template-columns: repeat(7,1fr); gap: 12px; }
.mini-runtime-stage .calendar-preview span { height: 52px; border-radius: 50%; background: #f4f6f6; color: #8a949e; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.mini-runtime-stage .profile-mini { margin-top: 28px; padding: 24px; display: grid; grid-template-columns: 72px 1fr 132px; align-items: center; gap: 18px; }
.mini-runtime-stage .profile-avatar { width: 66px; height: 66px; border-radius: 50%; background: #e6f5f2; color: #64c3b2; display: flex; align-items: center; justify-content: center; font-weight: 400; }
.mini-runtime-stage .order-mini { margin-top: 28px; padding: 22px 8px; display: grid; grid-template-columns: repeat(4,1fr); text-align: center; }
.mini-runtime-stage .order-mini > div > span { display: block; color: #64c3b2; font-size: 34px; margin-bottom: 8px; }
.mini-runtime-stage .order-mini > div > div { color: #56616b; font-size: 22px; }

.mini-runtime-stage .store { margin-top: 28px; padding: 22px; display: grid; grid-template-columns: 210px 1fr auto; gap: 20px; align-items: center; }
.mini-runtime-stage .store > img { width: 210px; height: 126px; object-fit: cover; display: block; }
.mini-runtime-stage .store-actions { display: flex; flex-direction: column; gap: 12px; }
.mini-runtime-stage .call { width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%; background: #e6f5f2; color: #64c3b2; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.mini-runtime-stage .store.wide_card { position: relative; display: block; }
.mini-runtime-stage .store.wide_card > img { width: 100%; height: 260px; margin-bottom: 18px; }
.mini-runtime-stage .store.wide_card .store-actions { position: absolute; right: 22px; bottom: 22px; }
.mini-runtime-stage .store.minimal { grid-template-columns: 1fr auto; padding: 28px; }
.mini-runtime-stage .store.minimal > img { display: none; }
.mini-runtime-stage .store.minimal .store-actions { flex-direction: row; }

.mini-runtime-stage .decor-divider { position: relative; margin-left: 8px; margin-right: 8px; border-top: 1px solid #e6ecef; text-align: center; height: 1px; }
.mini-runtime-stage .decor-divider span { position: relative; top: -18px; display: inline-flex; padding: 0 22px; background: #f7f9f9; color: inherit; font-size: 24px; }
.mini-runtime-stage .generic-block { margin-top: 24px; }
.mini-runtime-stage .generic-block > img { width: 100%; height: 300px; display: block; object-fit: cover; }
.mini-runtime-stage .generic-content { padding: 28px; }
.mini-runtime-stage .runtime-empty-page { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8a949e; text-align: center; }

.mini-runtime-stage .mini-runtime-fixed-overlays { position:absolute; inset:0; pointer-events:none; z-index:12; }
.mini-runtime-stage .float-actions { position: absolute; right: 22px; bottom: 164px; z-index: 5; }
.mini-runtime-stage .float-btn { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg,#64c3b2,#87d4c8); color: #fff; box-shadow: 0 12px 28px rgba(66,152,139,.25); display: flex; align-items: center; justify-content: center; font-size: 22px; pointer-events:auto; }
.mini-runtime-stage .mini-real-tabbar-shell { position:absolute; left:24px; right:24px; bottom:18px; z-index:10; pointer-events:auto; }
.mini-runtime-stage .mini-real-tabbar { height: 108px; padding: 0 14px; border-radius: 999px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; background: rgba(255,255,255,.96); box-shadow: 0 12px 30px rgba(24,44,54,.10); border: 1px solid rgba(232,236,239,.95); }
.mini-runtime-stage .mini-tab-item { height: 82px; border-radius: 999px; display:flex; flex-direction:column; align-items:center; justify-content:center; color: #8b95a0; font-size: 21px; }
.mini-runtime-stage .mini-tab-item i { display: block; margin-bottom: 6px; font-style: normal; font-size: 32px; line-height:1; }
.mini-runtime-stage .mini-tab-item.on { color: #1f2933; background: rgba(100,195,178,.12); font-weight: 400; }
.mini-runtime-stage .mini-tab-item.on i { color:#55afa1; }
.mini-runtime-stage .runtime-component-anchor { display:block; }

.preview-modal-card { width: min(92vw, 920px); max-width: 920px; }
.preview-modal-body { max-height: calc(100vh - 180px); overflow: auto; background: #eef3f3; }

@media (max-width: 1280px) {
  .runtime-badge { display: none; }
  .device-bar { gap: 6px; padding-left: 10px; padding-right: 10px; }
}


/* v42 后台统一黑白灰视觉。小程序预览运行时保留页面自身配置色。 */
:root {
  --mint: #1f1f1f;
  --mint-dark: #111111;
  --mint-soft: #f1f1f1;
  --bg: #f5f5f5;
  --line: #dedede;
  --text: #171717;
  --muted: #737373;
  --orange: #555555;
  --blue: #3f3f3f;
  --shadow: 0 8px 22px rgba(0,0,0,.08);
}
body { background:#f5f5f5; color:#171717; }
.sidebar, .topbar, .panel, .card, .modal-card, .props, .components, .device-bar { background:#fff; }
.menu-item { color:#333; }
.menu-item.active { background:#171717; color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.16); }
.crumb, .link, a { color:#333; }
.btn { background:#171717 !important; color:#fff !important; border-color:#171717 !important; box-shadow:0 8px 18px rgba(0,0,0,.14) !important; }
.secondary, .asset-pick-btn, .page-num, .prop-tabs button, .switch button, .comp { background:#fff; color:#262626; border-color:#d4d4d4; }
.secondary:hover, .asset-pick-btn:hover, .comp:hover { background:#f2f2f2; border-color:#999; }
.prop-tabs button.on, .switch button.on, .page-num.on, .structure-row.active { background:#ededed !important; color:#111 !important; border-color:#a3a3a3 !important; box-shadow:none !important; }
input:focus, textarea:focus, select:focus { border-color:#555 !important; box-shadow:0 0 0 3px rgba(0,0,0,.06) !important; }
.status, .tag { filter: grayscale(1); }
.avatar, .stat-icon, .top-avatar { background:#2b2b2b !important; color:#fff !important; }
.badge:not(.mini-runtime-stage .badge), .pill:not(.mini-runtime-stage .pill) { filter:grayscale(1); }
.logo-mark { border-color:#111; }
.bell b { background:#333; }
.toast { background:#171717; }

/* 页面装修图片结构化编辑器 */
.component-image-editor .mini-list-actions { margin-bottom:10px; }
.image-structure-list { display:grid; gap:12px; }
.image-structure-item { padding:12px; }
.component-image-preview { height:150px; margin:10px 0 12px; border:1px solid #dedede; background:#f5f5f5; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#777; }
.component-image-preview img { width:100%; height:100%; display:block; }
.component-image-editor .span-two { grid-column:1 / -1; }
.component-image-editor .field-grid.two { align-items:end; }

/* 高保真预览里的图片焦点与贴边咨询按钮 */
.mini-runtime-stage .image-ad .single-image-frame { width:100%; height:360px; overflow:hidden; }
.mini-runtime-stage .image-ad .single-image-frame img { width:100%; height:100%; display:block; }
.mini-runtime-stage .image-ad.ratio-1-1 .single-image-frame { aspect-ratio:1/1; height:auto; }
.mini-runtime-stage .image-ad.ratio-4-3 .single-image-frame { aspect-ratio:4/3; height:auto; }
.mini-runtime-stage .image-ad.ratio-3-4 .single-image-frame { aspect-ratio:3/4; height:auto; }
.mini-runtime-stage .image-ad.ratio-16-9 .single-image-frame { aspect-ratio:16/9; height:auto; }
.mini-runtime-stage .image-ad.free_mosaic { overflow:hidden; }
.mini-runtime-stage .float-actions { position:absolute; right:0; bottom:170px; z-index:5; }
.mini-runtime-stage .float-btn { width:124px; height:68px; border-radius:0; background:rgba(31,41,51,.92); color:#fff; box-shadow:-10px 10px 24px rgba(15,23,42,.16); display:flex; align-items:center; justify-content:center; font-size:23px; letter-spacing:2px; }
.mini-runtime-stage .hero-btn { z-index:3; box-sizing:border-box; }

/* v42 黑白灰后台补全：只约束管理界面，不改变手机预览中的小程序页面配色。 */
.menu-item.active,
.seg .on,
.resize-chips button:hover,
.resize-chips button.active {
  background:#171717 !important;
  color:#fff !important;
  border-color:#171717 !important;
  box-shadow:none !important;
}
.stat-card:nth-child(2) .stat-icon,
.stat-card:nth-child(3) .stat-icon,
.stat-card:nth-child(4) .stat-icon,
.notice-icon {
  background:#ededed !important;
  color:#333 !important;
}
.notice-icon::after,
.bell b { background:#444 !important; }
.design-tip,
.modal-section,
.login-preview,
.preview-empty {
  background:#f3f3f3 !important;
  border-color:#d7d7d7 !important;
  color:#444 !important;
}
.error-text,
.secondary.danger { color:#4a4a4a !important; border-color:#c9c9c9 !important; }
.secondary.danger:hover { background:#e8e8e8 !important; color:#111 !important; }
.editor-accordion > summary::after,
.editor-accordion .accordion-summary::after,
.cms-highlights b,
.runtime-badge {
  color:#333 !important;
}
.runtime-badge { background:#ededed !important; }
.resize-chips button { background:#f7f7f7 !important; color:#333 !important; border-color:#d2d2d2 !important; }
.tag.orange, .tag.blue, .tag.gray,
.badge:not(.mini-runtime-stage .badge),
.pill:not(.mini-runtime-stage .pill) {
  background:#ededed !important;
  color:#444 !important;
  border-color:#d0d0d0 !important;
}
.editor-accordion > summary,
.editor-accordion .accordion-summary {
  background:linear-gradient(180deg,#fff,#f4f4f4) !important;
  border-color:#dedede !important;
}

/* v43 急修：编辑器状态连续、可滚动预览、轮播覆盖层与门店边界 */
.full-width-action { width: 100%; justify-content: center; }
.compact-title { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; }
.phone.runtime-phone .phone-screen { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.mini-runtime-viewport { overflow: visible; min-height: 100%; }
.mini-runtime-page { overflow-x: hidden; overflow-y: visible; }
.mini-runtime-stage .hero { position: relative; min-height: 318px; height: auto; }
.mini-runtime-stage .hero-swiper { width: 100%; height: 360px; min-height: 0; }
.mini-runtime-stage .hero[style*="height:"] .hero-swiper { height: 100%; min-height: 100%; }
.mini-runtime-stage .hero-mask { padding: 0; }
.mini-runtime-stage .hero-title,
.mini-runtime-stage .hero-sub { margin: 0; max-width: none; }
.mini-runtime-stage .hero-btn { z-index: 3; box-sizing: border-box; }
.mini-runtime-stage .float-actions { position: fixed; right: 0; bottom: 25vh; z-index: 12; }
.mini-runtime-stage .float-btn { width: 124px; height: 68px; border-radius: 0; background: rgba(31,41,51,.92); color: #fff; box-shadow: -10px 10px 24px rgba(15,23,42,.16); font-size: 23px; letter-spacing: 2px; }
.mini-runtime-page.no-page-top { padding-top: 0; }
.mini-runtime-stage .store { min-width: 0; overflow: hidden; box-sizing: border-box; }
.mini-runtime-stage .store:not(.wide_card):not(.minimal) { grid-template-columns: minmax(0,32%) minmax(0,1fr) minmax(0,72px) !important; }
.mini-runtime-stage .store:not(.wide_card):not(.minimal) > img { width: 100% !important; min-width: 0; max-width: 210px; }
.mini-runtime-stage .store-info { min-width: 0; overflow: hidden; }
.mini-runtime-stage .store-info .style-name,
.mini-runtime-stage .store-info .sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-runtime-stage .store-actions { min-width: 0; max-width: 72px; overflow: hidden; }
.mini-runtime-stage .store.wide_card .store-actions { right: 22px; max-height: calc(100% - 44px); overflow-y: auto; }
.mini-runtime-stage .store.minimal .store-actions { max-width: 240px; flex-wrap: wrap; justify-content: flex-end; }


/* v45 自由排版稳定容器 */
.mini-runtime-stage .work-layout-free { position:relative; isolation:isolate; }
.mini-runtime-stage .work-free-item { box-sizing:border-box; }

/* v45 悬浮胶囊 Tab：与小程序 custom-tab-bar 同步 */
.mini-runtime-stage .mini-real-tabbar-shell {
  left: 24px;
  right: 24px;
  bottom: 20px;
}
.mini-runtime-stage .mini-real-tabbar {
  height: 108px;
  padding: 0 14px;
  border-radius: 58px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(226,230,232,.92);
  box-shadow: 0 14px 38px rgba(30,44,54,.12);
}
.mini-runtime-stage .mini-tab-item {
  height: 100%;
  border-radius: 0;
  color: #A7AFB4;
  font-size: 21px;
  font-weight: 400;
}
.mini-runtime-stage .mini-tab-item i { font-size: 32px; margin-bottom: 7px; }
.mini-runtime-stage .mini-tab-item.on {
  color: #6F8D87;
  background: transparent;
  font-weight: 400;
}
.mini-runtime-stage .mini-tab-item.on i { color: inherit; }
.mini-runtime-stage .work-free-media { position:absolute; overflow:hidden; }
.mini-runtime-stage .work-free-media img { width:100%; height:100%; display:block; }

/* v46 多图与轮播文本预览 */
.mini-runtime-stage .hero-text-block { position:absolute; box-sizing:border-box; z-index:3; font-weight:400; }
.mini-runtime-stage .work-layout-free { width:100%; box-sizing:border-box; overflow:hidden; }
.mini-runtime-stage .work-free-item { isolation:isolate; }
.mini-runtime-stage .work-free-media { z-index:0; }
.mini-runtime-stage .work-free-item > .tile-caption { z-index:1; pointer-events:none; max-height:100%; box-sizing:border-box; overflow:hidden; }
.mini-runtime-stage .image-ad-gallery { width:100%; min-width:0; position:relative; }
.mini-runtime-stage .image-ad.copy_overlay { position:relative; }
.mini-runtime-stage .image-ad.copy_overlay .image-ad-copy { z-index:4; pointer-events:none; }
.mini-runtime-stage .image-ad.copy_below .image-ad-copy { position:static; transform:none; }
.mini-runtime-stage .image-ad.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
.mini-runtime-stage .image-ad.split .image-ad-gallery { min-width:0; height:100%; }
.mini-runtime-stage .image-ad.split .image-ad-copy { position:static; transform:none; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.mini-runtime-stage .image-ad.image_only .image-ad-copy { display:none !important; }

/* V58 后台默认常规字重；装修预览中的行内字重可覆盖。 */
body, button, input, textarea, select, option, label, p, span, div, a, h1, h2, h3, h4, h5, h6, strong, b, th, td {
  font-weight: 400;
}

/* V47: preview uses the same work-card + work-body composition as every mini-program page */
.mini-runtime-stage .work-layout.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.mini-runtime-stage .work-layout.grid,
.mini-runtime-stage .work-layout.two_column { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mini-runtime-stage .work-layout.horizontal { display:flex; overflow-x:auto; }
.mini-runtime-stage .work-layout.horizontal .work-card { min-width:310px; flex:0 0 auto; }
.mini-runtime-stage .work-layout.big_left { grid-template-columns:1.25fr .85fr; }
.mini-runtime-stage .work-layout.big_left .work-card:first-child { grid-row:span 2; }
.mini-runtime-stage .work-layout.big_right { grid-template-columns:.85fr 1.25fr; }
.mini-runtime-stage .work-layout.big_right .work-card:nth-child(2) { grid-row:span 2; }
.mini-runtime-stage .work-layout.magazine .work-card:first-child { grid-column:span 2; }
.mini-runtime-stage .work-layout.masonry { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.mini-runtime-stage .work-card { overflow:hidden; min-width:0; }
.mini-runtime-stage .work-card > img { width:100%; height:348px; display:block; object-fit:cover; }
.mini-runtime-stage .work-body { padding:18px; background:inherit; }
.mini-runtime-stage .work-title { font-size:28px; line-height:1.45; margin-bottom:14px; color:#1f2933; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-runtime-stage .work-meta { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; min-width:0; }
.mini-runtime-stage .work-meta > div:first-child { flex:1; min-width:0; overflow:hidden; }
.mini-runtime-stage .work-meta .pill { display:inline-flex; margin:0 8px 6px 0; }
.mini-runtime-stage .fav { color:#8a949e; font-size:24px; flex:0 0 auto; }
.mini-runtime-stage .work-price { margin-top:8px; color:#64c3b2; font-size:24px; }
.mini-runtime-stage .work-layout.ratio-1-1 .work-card > img { aspect-ratio:1/1; height:auto; }
.mini-runtime-stage .work-layout.ratio-4-3 .work-card > img { aspect-ratio:4/3; height:auto; }
.mini-runtime-stage .work-layout.ratio-3-4 .work-card > img { aspect-ratio:3/4; height:auto; }
.mini-runtime-stage .work-layout.ratio-16-9 .work-card > img { aspect-ratio:16/9; height:auto; }
.mini-runtime-stage .float-btn.shape-square { width:124px; height:68px; border-radius:0; }
.mini-runtime-stage .float-btn.shape-round { width:88px; height:88px; border-radius:50%; letter-spacing:0; }

/* V47 visual image navigation editor */
.visual-link-editor{border:1px solid #d8dde2;background:#f7f8f9;padding:12px;margin-top:4px}
.visual-link-title{font-size:13px;color:#222;margin-bottom:10px}
.visual-link-preview{margin-top:8px;font-size:12px;color:#777;word-break:break-all}
.visual-link-preview code{font-family:"OPPO Sans",sans-serif;color:#444;background:#fff;border:1px solid #e1e4e8;padding:3px 6px}


/* v48 图片作品卡片、独立边框线、PNG Tab 图标与原图轮播 */
.mini-runtime-stage .hero-mask { background: transparent !important; }
.mini-runtime-stage .image-border-line { box-sizing: border-box; pointer-events: none; }
.mini-runtime-stage .image-ad.work_card .image-ad-gallery,
.mini-runtime-stage .image-ad .image-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: start;
  min-height: 0 !important;
  overflow: visible;
}
.mini-runtime-stage .image-ad.work_card .image-card-item {
  position: relative; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:visible; background:#fff;
}
.mini-runtime-stage .image-ad.work_card .image-card-item .work-free-media {
  position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:100%; flex:none; overflow:hidden;
}
.mini-runtime-stage .image-ad.work_card.ratio-1-1 .image-card-item .work-free-media { aspect-ratio:1/1; }
.mini-runtime-stage .image-ad.work_card.ratio-4-3 .image-card-item .work-free-media { aspect-ratio:4/3; }
.mini-runtime-stage .image-ad.work_card.ratio-3-4 .image-card-item .work-free-media { aspect-ratio:3/4; }
.mini-runtime-stage .image-ad.work_card.ratio-16-9 .image-card-item .work-free-media { aspect-ratio:16/9; }
.mini-runtime-stage .image-ad.work_card.ratio-auto .image-card-item .work-free-media { height:280px; }
.mini-runtime-stage .image-ad.work_card .image-card-item .tile-caption {
  position:static; left:auto; right:auto; bottom:auto; padding:18px 18px 20px; color:#1F2933; background:transparent; font-size:28px; line-height:1.35; box-sizing:border-box;
}
.mini-runtime-stage .image-ad.work_card .image-card-item .tile-caption div { color:#1F2933; }
.mini-runtime-stage .image-ad.work_card .image-card-item .tile-caption span { color:#8A949E; opacity:1; font-size:22px; }
.mini-tab-icon-img { width:38px; height:38px; object-fit:contain; display:block; }
.tab-icon-editor { min-width:160px; display:grid; gap:8px; }
.tab-icon-preview { width:46px; height:46px; border:1px solid #E1E4E8; background:#F7F7F7; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tab-icon-preview img { width:34px; height:34px; object-fit:contain; }
.tab-icon-preview span, .tab-icon-editor small { color:#8B8B8B; font-size:12px; }
.tab-icon-pick { width:100%; }
.image-border-editor { border-top:1px solid #E5E5E5; padding-top:14px; margin-top:4px; }

/* v49 单图标着色、透明图片间距、可跨卡片分隔线、可调作品卡片文字框 */
.mini-runtime-stage .work-free-media,
.mini-runtime-stage .work-free-media img,
.mini-runtime-stage .image-ad-gallery,
.mini-runtime-stage .image-ad-gallery .multi-image-item,
.mini-runtime-stage .image-ad.work_card .image-card-item {
  background: transparent !important;
}
.mini-runtime-stage .image-ad-gallery,
.mini-runtime-stage .image-ad .image-card-grid,
.mini-runtime-stage .image-ad-gallery .multi-image-item,
.mini-runtime-stage .image-ad.work_card .image-card-item {
  overflow: visible !important;
}
.mini-runtime-stage .image-ad.work_card .image-card-item .tile-caption { max-height:none; overflow:hidden; }
.mini-tab-icon-mask {
  width:38px; height:38px; display:block; flex:none; background:currentColor;
  -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain;
  mask-position:center; mask-repeat:no-repeat; mask-size:contain;
}
.border-side-row { display:grid; grid-template-columns:52px repeat(4,minmax(0,1fr)); gap:8px; align-items:end; border:1px solid #E5E7EB; padding:10px; margin:8px 0; background:#FFF; }
.border-side-name { align-self:center; color:#222; }


/* v50 页面装修文本：保留用户输入的连续空格与回车 */
.mini-runtime-stage .brand,
.mini-runtime-stage .sub,
.mini-runtime-stage .title,
.mini-runtime-stage .hero-title,
.mini-runtime-stage .hero-sub,
.mini-runtime-stage .hero-text-block,
.mini-runtime-stage .section-title,
.mini-runtime-stage .more,
.mini-runtime-stage .generic-title,
.mini-runtime-stage .generic-sub,
.mini-runtime-stage .generic-text,
.mini-runtime-stage .tile-caption div,
.mini-runtime-stage .tile-caption span,
.mini-runtime-stage .generic-btn,
.mini-runtime-stage .hero-btn,
.mini-runtime-stage .decor-divider,
.mini-runtime-stage .store-info {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
}
.mini-runtime-stage .tile-caption div { text-overflow: clip; }

/* v51 图片组分隔线、卡片去阴影与像素标注 */
.mini-runtime-stage .image-group-separator { box-sizing:border-box; pointer-events:none; }
.mini-runtime-stage .image-ad.work_card,
.mini-runtime-stage .image-ad.work_card .image-ad-gallery,
.mini-runtime-stage .image-ad.work_card .image-card-item,
.mini-runtime-stage .image-ad.work_card .image-card-item .work-free-media,
.mini-runtime-stage .image-ad.work_card .image-card-item .tile-caption {
  box-shadow:none !important;
  filter:none !important;
}

/* V62: 设备栏和画布分开滚动，预览手机围绕画布中线展开。 */
.preview-canvas-scroll {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
.preview-canvas-center {
  width: max(100%, calc(var(--preview-display-width) + 168px));
  min-height: calc(var(--preview-display-height) + 106px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.preview-measure-wrap { position:relative; display:inline-block; flex:0 0 auto; padding:38px 64px 48px; }
.preview-measure-wrap .runtime-phone { position:relative; z-index:2; margin:0; }
.preview-measure-wrap.is-measuring { cursor:crosshair; }
.pixel-device-ruler { position:absolute; z-index:7; color:#E85C36; font-size:12px; pointer-events:none; }
.pixel-device-ruler::before,.pixel-device-ruler::after { content:""; position:absolute; background:#E85C36; }
.pixel-device-ruler.width { left:74px; top:16px; width:var(--preview-display-width); height:16px; border-top:1px solid #E85C36; }
.pixel-device-ruler.width::before,.pixel-device-ruler.width::after { top:-5px; width:1px; height:10px; }
.pixel-device-ruler.width::before { left:0; }.pixel-device-ruler.width::after { right:0; }
.pixel-device-ruler.width span { position:absolute; left:50%; top:-15px; transform:translateX(-50%); background:#E85C36; color:#fff; border-radius:5px; padding:3px 8px; }
.pixel-device-ruler.height { left:42px; top:48px; height:var(--preview-display-height); width:18px; border-left:1px solid #E85C36; }
.pixel-device-ruler.height::before,.pixel-device-ruler.height::after { left:-5px; height:1px; width:10px; }
.pixel-device-ruler.height::before { top:0; }.pixel-device-ruler.height::after { bottom:0; }
.pixel-device-ruler.height span { position:absolute; left:-8px; top:50%; transform:translate(-100%,-50%); background:#E85C36; color:#fff; border-radius:5px; padding:3px 8px; white-space:nowrap; }
.pixel-measure-overlay { position:absolute; inset:0; z-index:20; pointer-events:none; }
.pixel-selected-box { position:absolute; border:1px solid #E85C36; background:rgba(232,92,54,.035); }
.pixel-measure-line { position:absolute; border-color:#E85C36; color:#E85C36; font-size:11px; }
.pixel-measure-line.target-width { border-top:1px solid #E85C36; }
.pixel-measure-line.target-height { border-left:1px solid #E85C36; }
.pixel-measure-line.target-width::before,.pixel-measure-line.target-width::after { content:""; position:absolute; top:-4px; width:1px; height:8px; background:#E85C36; }
.pixel-measure-line.target-width::before { left:0; }.pixel-measure-line.target-width::after { right:0; }
.pixel-measure-line.target-height::before,.pixel-measure-line.target-height::after { content:""; position:absolute; left:-4px; width:8px; height:1px; background:#E85C36; }
.pixel-measure-line.target-height::before { top:0; }.pixel-measure-line.target-height::after { bottom:0; }
.pixel-measure-line span { position:absolute; background:#E85C36; color:#fff; border-radius:5px; padding:2px 6px; white-space:nowrap; }
.pixel-measure-line.target-width span { left:50%; top:-11px; transform:translate(-50%,-100%); }
.pixel-measure-line.target-height span { left:6px; top:50%; transform:translateY(-50%); }
.pixel-gap-label,.pixel-element-name { position:absolute; background:#E85C36; color:#fff; border-radius:5px; padding:2px 6px; font-size:10px; white-space:nowrap; transform:translate(-50%,-50%); }
.pixel-element-name { background:#2F343A; }
.preview-measure-selected { outline:1px dashed rgba(232,92,54,.8) !important; outline-offset:-1px; }
.device-bar .secondary.is-active { background:#1F2933; color:#fff; border-color:#1F2933; }

/* v51 像素检查：设备信息卡与更接近设计标注工具的标尺 */
.pixel-device-info {
  position:absolute;
  left:48px;
  top:50%;
  z-index:8;
  width:126px;
  transform:translate(-100%,-50%);
  display:grid;
  gap:5px;
  padding:12px 14px;
  border:1px solid #E2E4E7;
  background:rgba(255,255,255,.97);
  box-shadow:0 5px 16px rgba(15,23,42,.10);
  color:#3F454B;
  font-size:11px;
  line-height:1.35;
  pointer-events:none;
}
.pixel-device-info strong { color:#171A1D; font-size:13px; font-weight:400; }
.pixel-device-info span { white-space:nowrap; }
.pixel-device-info small { margin-top:4px; color:#8B9197; white-space:normal; }
.pixel-measure-overlay .pixel-gap-label { z-index:3; }
.pixel-measure-overlay .pixel-element-name { z-index:4; max-width:190px; overflow:hidden; text-overflow:ellipsis; }
.pixel-gap-line { position:absolute; z-index:2; color:#E85C36; font-size:10px; pointer-events:none; }
.pixel-gap-line.vertical { border-left:1px solid #E85C36; }
.pixel-gap-line.horizontal { border-top:1px solid #E85C36; }
.pixel-gap-line.vertical::before,.pixel-gap-line.vertical::after { content:""; position:absolute; left:-4px; width:8px; height:1px; background:#E85C36; }
.pixel-gap-line.vertical::before { top:0; }.pixel-gap-line.vertical::after { bottom:0; }
.pixel-gap-line.horizontal::before,.pixel-gap-line.horizontal::after { content:""; position:absolute; top:-4px; width:1px; height:8px; background:#E85C36; }
.pixel-gap-line.horizontal::before { left:0; }.pixel-gap-line.horizontal::after { right:0; }
.pixel-gap-line span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#E85C36; color:#fff; border-radius:5px; padding:2px 6px; white-space:nowrap; }

/* V52: Tab disabled state should be visually explicit without changing the monochrome admin palette. */
.tab-row-disabled { opacity: .5; }
.tab-row-disabled .tab-page-key-readonly { text-decoration: line-through; }
.tab-page-key { display:inline-block; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#333; background:#f3f3f3; padding:4px 8px; border-radius:4px; }

/* V52: Page Key is owned by pages, Tab manager only reads it. */
.tab-page-key-readonly,
.prop-field input[readonly] {
  background: #f3f3f3;
  color: #666;
  cursor: default;
}


/* V54: 页面/作品装修顶部信息区重排，去掉旧切换器后的空洞感。 */
.editor-shell { grid-template-rows: 84px minmax(0, 1fr); }
.editor-top {
  height: 84px;
  padding: 10px 18px;
  gap: 18px;
  background: #fff;
  box-sizing: border-box;
}
.editor-context {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  grid-template-areas: "title page" "status status";
  gap: 7px 16px;
  align-items: center;
}
.editor-context-title { grid-area: title; color: #171717; font-size: 17px; white-space: nowrap; }
.editor-page-line { grid-area: page; min-width: 0; display: flex; align-items: center; gap: 10px; }
.editor-page-label { flex: none; color: #777; font-size: 12px; }
.editor-page-line select { min-width: 0; width: 100%; height: 38px; }
.editor-status-line { grid-area: status; display: flex; align-items: center; gap: 9px; min-width: 0; color: #8a8a8a; font-size: 12px; }
.editor-status-line span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #64C3B2; flex: none; }
.editor-actions { flex: none; align-items: center; gap: 10px; }
.sidebar-section-title { margin: 0 0 12px; color: #171717; font-size: 14px; }
.work-meta-box { border-color: #d9dddf; background: #fafafa; }
.empty-editor-panel { max-width: 720px; margin: 40px auto; text-align: center; padding: 56px 28px; }
.empty-editor-panel p { margin: 12px 0 24px; color: #777; }

/* V54: 后台真机预览与小程序一致，模块无阴影、图片无蒙灰。 */
.mini-runtime-stage .card,
.mini-runtime-stage .section,
.mini-runtime-stage .work-card,
.mini-runtime-stage .style-row,
.mini-runtime-stage .generic-block,
.mini-runtime-stage .text-panel,
.mini-runtime-stage .appointment-mini,
.mini-runtime-stage .booking,
.mini-runtime-stage .store,
.mini-runtime-stage .float-btn,
.mini-runtime-stage .mini-real-tabbar { box-shadow: none !important; text-shadow: none !important; }
.mini-runtime-stage .hero-mask,
.mini-runtime-stage .image-ad.copy_overlay .image-ad-copy,
.mini-runtime-stage .tile-caption { background: transparent !important; background-image: none !important; box-shadow: none !important; filter: none !important; }
.mini-runtime-stage img { filter: none !important; opacity: 1 !important; }

/* V54: 双列/规整/瀑布流同一网格行等高，长标题固定两行。 */
.mini-runtime-stage .work-layout.work-grid,
.mini-runtime-stage .work-layout.grid,
.mini-runtime-stage .work-layout.two_column,
.mini-runtime-stage .work-layout.masonry { align-items: stretch !important; }
.mini-runtime-stage .work-card { height: 100%; display: flex; flex-direction: column; }
.mini-runtime-stage .work-body { flex: 1; display: flex; flex-direction: column; }
.mini-runtime-stage .work-title {
  min-height: 2.9em;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* V56: 后台真机预览中的所有模块按钮与轮播按钮共用同一套定位和外观。 */
.mini-runtime-stage .runtime-component-anchor { display: block; }
.mini-runtime-stage .runtime-module-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 999px;
  z-index: 6;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
}


/* V58 模块文字样式控制 */
.text-style-card { border:1px solid var(--line); border-radius:12px; padding:12px; margin:10px 0; background:#fff; }
.text-style-label { margin-bottom:10px; color:#26323d; font-size:13px; }

/* V61 后台预览改为真实小程序同源源码运行时。iframe 隔离后台 CSS，避免“看起来一样但底层不同”。 */
.same-source-runtime {
  position: relative;
  overflow: hidden !important;
  min-height: 0 !important;
  background: #f7f9f9;
}
.same-source-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 1;
  transition: opacity .12s ease;
}
.same-source-preview-frame.is-loading { opacity: .985; }
.phone.runtime-phone .phone-screen:has(.same-source-runtime) {
  overflow: hidden;
}
.preview-measure-selected { outline: none !important; }
.runtime-badge.is-error { background:#fff0f0; color:#a43a3a; }


/* V62: iframe 以真实设备 CSS 像素运行，后台缩放只发生在 iframe 外层。
   这样 px、rpx、fixed、文本换行和网格取整与真实小程序使用同一设备宽度语义。 */
.same-source-preview-frame {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
  max-width: none;
  max-height: none;
}
.mini-runtime-viewport.same-source-runtime { position: relative; }
.preview-zone > .preview-canvas-scroll { justify-self: stretch; align-self: stretch; }

/* V63: 服务器本地预览由服务器常驻 Chromium 执行真实小程序源码运行时，后台只显示渲染帧。 */
.server-local-runtime {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
}
.server-local-preview-image {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  transition: opacity .1s ease;
  z-index: 2;
}
.server-local-preview-image.is-loading { opacity: .92; }
.server-local-preview-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #5f676d;
  background: #f7f9f9;
  text-align: center;
  pointer-events: none;
}
.server-local-preview-placeholder b { font-size: 13px; font-weight: 400; color: #2f3438; }
.server-local-preview-placeholder small { font-size: 11px; color: #92999e; }
.server-local-runtime:not(.is-loading) .server-local-preview-image[src] + .server-local-preview-placeholder { opacity: 0; }
.server-local-runtime.is-loading { cursor: progress; }
.preview-measure-wrap.is-measuring .server-local-preview-image { cursor: crosshair; }