:root {
  --type-scale: 1;
  --ink: #050505;
  --cream: #fcfcfb;
  --acid: #cbd572;
  --line: rgb(252 252 251 / 20%);
  --container-radius: 8px;
  --container-border: 1px solid rgb(252 252 251 / 50%);
  --type-t1-size: calc(24px * var(--type-scale));
  --type-t1-weight: 850;
  --type-t1-line-height: 1.2;
  --type-t1-letter-spacing: -.035em;
  --type-t2-size: calc(15px * var(--type-scale));
  --type-t2-weight: 750;
  --type-t2-line-height: 1.35;
  --type-t2-letter-spacing: 0;
  --type-t3-size: calc(12px * var(--type-scale));
  --type-t3-weight: 500;
  --type-t3-line-height: 1.6;
  --type-t3-letter-spacing: 0;
  /* 卡片标题：介于区块标题与正文之间的第四档，只用于内容卡片 */
  --type-card-title-size: calc(14px * var(--type-scale));
  --type-card-title-weight: 600;
  --type-card-title-line-height: 1.4;
  --type-card-title-letter-spacing: 0;
}

@media (max-width: 1023px) {
  :root { --type-scale: .92; }
}

@media (max-width: 743px) {
  :root { --type-scale: .84; }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--cream);
  background: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }

.page-content,
.app-header-inner,
.site-footer-inner {
  width: min(1600px, 90vw);
  margin-inline: auto;
}

.ui-container {
  border: var(--container-border);
  border-radius: var(--container-radius);
}

.page-shell {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
}

/* 内容高度固定的页面垂直居中；列表页会随条目增长，保持顶部对齐 */
.page-shell > .page-content {
  align-self: center;
  align-self: safe center;
}

/* 列表页：条目会随数据增长，从页头下方开始排 */
.updates-page .page-shell > .page-content,
.showcase-page .page-shell > .page-content,
.public-works-page .page-shell > .page-content,
.drafts-page .page-shell > .page-content,
.my-orders-page .page-shell > .page-content,
.howoo-lab-page .page-shell > .page-content {
  align-self: auto;
}

.site-page,
.page-content {
  background: var(--ink);
}

/* 只有屏幕阅读器和搜索引擎需要的文本，不占布局 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Quick submission: approved two-panel layout; shared editor owns all template behavior. */
html body.quick-submit-page { --type-scale:1; margin:0; min-height:100dvh; color:var(--cream); background:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); }
html body.quick-submit-page .quick-submit-shell { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; width:min(1200px,94vw); margin-inline:auto; }
html body.quick-submit-page :is(.app-header,.app-header-inner,.quick-submit-workspace,.site-footer,.site-footer-inner) { width:100%; min-width:0; box-sizing:border-box; }
html body.quick-submit-page :is(.app-header-inner,.site-footer-inner) { margin-inline:0; }
html body.quick-submit-page .app-header { border-bottom:1px solid var(--line); }
html body.quick-submit-page .quick-submit-workspace { flex-shrink:0; margin-block:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,1fr); gap:18px; padding:20px 0; align-items:stretch; }
html body.quick-submit-page .quick-submit-preview { position:relative; min-width:0; min-height:0; aspect-ratio:1; align-self:start; border:var(--container-border); border-radius:var(--container-radius); overflow:hidden; background:#d7e0d9; }
html body.quick-submit-page .terrain-preview-window:not(.preview-fullscreen-fallback) { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; display:flex; flex-direction:column; gap:10px; }
html body.quick-submit-page .scene { position:relative; flex:1 1 auto; width:auto; height:auto; min-height:0; margin:0 3% 2%; }
html body.quick-submit-page .terrain-preview-canvas { width:100%; height:100%; min-height:0; }
html body.quick-submit-page .terrain-preview-toolbar { position:static; inset:auto; order:-1; margin:0; }
html body.quick-submit-page .terrain-preview-switch { display:none; }
html body.quick-submit-page [data-quick-preview-effect]:disabled { opacity:.45; cursor:default; }

html body.quick-submit-page .quick-preview-empty { position:absolute; z-index:4; inset:50% 10% auto; transform:translateY(-50%); margin:0; padding:16px; border-radius:8px; background:#050505b3; text-align:left; color:var(--cream); pointer-events:none; }
html body.quick-submit-page .quick-preview-empty a { color:var(--acid); text-decoration:underline; text-underline-offset:3px; pointer-events:auto; }
html body.quick-submit-page.has-uploaded-track .quick-preview-empty { display:none; }
html body.quick-submit-page .quick-submit-form { display:flex; flex-direction:column; min-width:0; min-height:0; aspect-ratio:1; align-self:start; overflow:visible; padding:12px 16px; border:var(--container-border); border-radius:var(--container-radius); background:#757f4a; }
html body.quick-submit-page .quick-submit-receipt { gap:14px; }
html body.quick-submit-page .quick-submit-receipt .quick-receipt-mail { margin:0; font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); letter-spacing:var(--type-t3-letter-spacing); }
html body.quick-submit-page .quick-submit-receipt .preview-3d-dialog-metadata { margin-top:0; padding-top:14px; }
html body.quick-submit-page .quick-receipt-identity [data-draft-order-meta="sn"] { font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); line-height:var(--type-t2-line-height); letter-spacing:var(--type-t2-letter-spacing); }
html body.quick-submit-page .quick-submit-receipt .sn-copy-value { flex-wrap:wrap; }
html body.quick-submit-page .quick-submit-heading { display:flex; flex-shrink:0; justify-content:space-between; align-items:center; gap:10px; margin:0 0 8px; }
html body.quick-submit-page h1 { margin:0; color:inherit; font-size:var(--type-t1-size); font-weight:var(--type-t1-weight); line-height:var(--type-t1-line-height); letter-spacing:var(--type-t1-letter-spacing); }
html body.quick-submit-page h2 { margin:0 0 10px; color:inherit; font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); line-height:var(--type-t2-line-height); }
html body.quick-submit-page h2 small { margin-right:6px; font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); }
html body.quick-submit-page .quick-submit-primary-fields,html body.quick-submit-page .edge-copy-editor { flex-shrink:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; }
html body.quick-submit-page .quick-submit-primary-fields { grid-template-columns:minmax(0,1fr); row-gap:4px; }
html body.quick-submit-page .quick-submit-primary-fields label { position:relative; }
html body.quick-submit-page .quick-field-error { position:absolute; z-index:1; top:50%; right:10px; transform:translateY(-50%); max-width:calc(100% - 20px); padding:0 0 0 6px; color:#a64229; background:#fff; pointer-events:none; font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); }
html body.quick-submit-page .quick-field-error[hidden] { display:none; }
html body.quick-submit-page .quick-submit-form .quick-submit-primary-fields input[aria-invalid="true"] { border-color:#a64229; outline:none; box-shadow:inset 0 0 0 1px #a64229; padding-right:12em; }
html body.quick-submit-page .quick-submit-primary-fields input[aria-invalid="true"]::placeholder { color:transparent; }
html body.quick-submit-page .quick-submit-primary-fields input:placeholder-shown + .quick-field-error { left:10px; right:auto; padding:0; }
/* Reserve all three text rows so template changes never resize either panel. */
html body.quick-submit-page .edge-copy-editor { --quick-label-height:calc(var(--type-t3-size) * var(--type-t3-line-height)); height:120px; grid-auto-rows:min-content; align-content:start; overflow:visible; }
html body.quick-submit-page .quick-submit-form label { display:grid; gap:3px; min-width:0; margin:0; color:var(--cream); font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); }
html body.quick-submit-page .quick-submit-form :is(input:not([type=file]),select) { position:static; width:100%; min-width:0; height:36px; min-height:36px; margin:0; padding:5px 9px; border:1px solid #fcfcfb9e; border-radius:6px; color:var(--cream); background:#ffffff12; font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); }
html body.quick-submit-page .quick-submit-form input:not([type=file]) { color:#252820; background:#fff; border-color:#fff; }
html body.quick-submit-page input::placeholder { color:#686d60; opacity:1; font-weight:400; }
html body.quick-submit-page .quick-submit-form select[id] { appearance:none; color-scheme:dark; cursor:pointer; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23fcfcfb' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px; }
html body.quick-submit-page select option { background:#505934; color:#fff; }
html body.quick-submit-page :focus-visible:not(#chineseLeftChoice):not(#chineseRightChoice):not([aria-invalid="true"]) { outline:2px solid var(--acid); outline-offset:3px; }
html body.quick-submit-page .chinese-metric-picker select:focus { outline:none; box-shadow:none; }
html body.quick-submit-page :is(.quick-submit-gpx-field,.quick-base-template) { flex-shrink:0; min-width:0; margin-top:8px; padding-top:12px; border:0; border-top:1px solid #fcfcfb55; }
html body.quick-submit-page .workflow-action-card { container-type:normal; display:block; height:auto; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
html body.quick-submit-page .workflow-action-card :is(.workflow-action-kicker,.workflow-action-title,.workflow-action-location,.workflow-action-feedback) { display:none; }
html body.quick-submit-page .workflow-action-file-picker { display:none; }
html body.quick-submit-page .workflow-action-button { position:static; inset:auto; transform:none; width:100%; min-height:40px; margin:0; padding:9px 12px; border:1px solid var(--cream); border-radius:6px; color:var(--ink); background:var(--cream); font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); cursor:pointer; }
html body.quick-submit-page .quick-submit-form .workflow-action-file-picker .gpx-upload-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; clip-path:none; visibility:visible; pointer-events:auto; cursor:pointer; }
html body.quick-submit-page .workflow-action-status:empty,html body.quick-submit-page .workflow-action-status:not(.is-error) { display:none; }
html body.quick-submit-page .workflow-action-status { position:static; inset:auto; transform:none; width:100%; display:block; margin:5px 0 0; padding:0; min-height:0; color:var(--cream); font-size:var(--type-t3-size); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html body.quick-submit-page .editor-component,html body.quick-submit-page #personalizationSections,html body.quick-submit-page #copySection,html body.quick-submit-page #copySection>.personal-section-content { display:block; contain:none; width:100%; max-width:none; height:auto; min-height:0; margin:0; padding:0; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
html body.quick-submit-page .editor-overview,html body.quick-submit-page [data-editor-section]:not(#copySection),html body.quick-submit-page #copySection>summary { display:none; }
html body.quick-submit-page .template-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; position:relative; margin:0 0 6px; padding:0; border:0; }
html body.quick-submit-page .template-picker legend { display:none; }
html body.quick-submit-page #textTemplateSelect { display:none; }
html body.quick-submit-page .template-picker .template-option { display:flex; align-items:center; justify-content:center; min-width:0; min-height:40px; padding:6px 8px; border:var(--container-border); border-radius:6px; color:var(--cream); background:transparent; font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); line-height:var(--type-t2-line-height); letter-spacing:var(--type-t2-letter-spacing); }
html body.quick-submit-page .template-picker .template-option strong { font:inherit; letter-spacing:inherit; }
html body.quick-submit-page .template-picker .template-option.active { color:var(--ink); background:var(--acid); border-color:var(--acid); }
html body.quick-submit-page .template-picker .template-option:disabled { opacity:.5; cursor:not-allowed; }
html body.quick-submit-page .quick-template-description { display:grid; align-items:center; height:calc(3 * var(--type-t3-size) * var(--type-t3-line-height) + 8px); margin:0 0 6px; color:var(--cream); font-size:var(--type-t3-size); line-height:var(--type-t3-line-height); overflow:visible; }
html body.quick-submit-page .quick-template-description p { display:none; margin:0; }
html body.quick-submit-page:not(.text-template-chinese):not(.text-template-custom) [data-template-help="concise"],html body.quick-submit-page.text-template-chinese [data-template-help="chinese"],html body.quick-submit-page.text-template-custom [data-template-help="custom"] { display:block; }
html body.quick-submit-page .chinese-metric-picker { display:contents; }
html body.quick-submit-page .edge-field span { color:inherit; font-size:inherit; }
/* Pair each existing metric selector and value in one horizontal control. */
html body.quick-submit-page .edge-field > span { display:none; }
html body.quick-submit-page .chinese-metric-picker .edge-field:has(.editor-select-control:not([hidden])) { grid-template-columns:calc(4em + 40px) minmax(0,1fr); gap:0; }
html body.quick-submit-page .chinese-metric-picker .editor-select-control:not([hidden]) { grid-column:1; grid-row:1; min-width:0; }
html body.quick-submit-page .chinese-metric-picker [data-editor-select-trigger] { height:36px; min-height:36px; padding:5px 9px; gap:8px; border:1px solid #fff; border-right-color:#d7e0d9; border-radius:6px 0 0 6px; color:#252820; background:#fff; }
html body.quick-submit-page .chinese-metric-picker [data-editor-select-trigger]::after { flex-shrink:0; margin-right:3px; }
html body.quick-submit-page .chinese-metric-picker .edge-field:has(.editor-select-control:not([hidden])) > input { grid-column:2; grid-row:1; border-left:0; border-radius:0 6px 6px 0; }
html body.quick-submit-page .chinese-metric-picker .edge-field:has(.editor-select-control:not([hidden])) > output { grid-column:1 / -1; grid-row:2; }
html body.quick-submit-page .editor-select-menu { padding:4px; border:1px solid #d7e0d9; border-radius:6px; color:var(--ink); background:var(--cream); box-shadow:0 6px 18px #05050524; }
html body.quick-submit-page .editor-select-menu button { min-height:40px; padding:6px 8px; }
html body.quick-submit-page .edge-field output:empty { display:none; }
html body.quick-submit-page .edge-field output { color:#fff0d0; font-size:var(--type-t3-size); }
html body.quick-submit-page .quick-submit-actions { display:flex; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; min-height:88px; margin-top:12px; padding:12px 0; border-top:1px solid #fcfcfb55; }
html body.quick-submit-page .quick-submit-actions h2 { align-self:stretch; }
html body.quick-submit-page .quick-submit-button { flex-shrink:0; width:54%; min-width:180px; max-width:100%; min-height:40px; margin:0; padding:8px; border:0; border-radius:6px; color:var(--cream); background:var(--ink); font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); cursor:pointer; transition:background-color .16s ease,color .16s ease; }
@media (hover:hover) and (pointer:fine) {
 html body.quick-submit-page .quick-submit-button:not(:disabled):hover { color:var(--ink); background:var(--acid); }
}
html body.quick-submit-page .quick-submit-button:not(:disabled):is(:focus-visible,:active) { color:var(--ink); background:var(--acid); }
@media (prefers-reduced-motion:reduce) { html body.quick-submit-page .quick-submit-button { transition:none; } }
html body.quick-submit-page .quick-submit-button:disabled { opacity:.55; cursor:not-allowed; }
html body.quick-submit-page .quick-submit-privacy { flex-shrink:0; margin:4px 0 0; text-align:center; font-size:var(--type-t3-size); }
html body.quick-submit-page .site-footer { border-top:1px solid var(--line); }
html body.quick-submit-page .quick-submit-runtime,html body.quick-submit-page [hidden] { display:none; }
html body.quick-submit-page .quick-submit-notice { display:grid; gap:4px; padding:12px 16px; margin-top:12px; border:1px solid var(--acid); border-radius:8px; }
html body.quick-submit-page .quick-submit-notice.is-error { border-color:#dfaaa0; }
@media(max-width:743px) {
 html body.quick-submit-page .quick-submit-workspace { grid-template-columns:1fr; gap:12px; padding:12px 0; }
 html body.quick-submit-page .quick-submit-preview { min-height:0; height:auto; aspect-ratio:1; }
 html body.quick-submit-page .terrain-preview-toolbar { flex-wrap:wrap; }
 html body.quick-submit-page .terrain-preview-notice { flex-basis:100%; min-height:36px; border-top:1px solid var(--line); }

 html body.quick-submit-page .quick-submit-form { padding:12px; aspect-ratio:auto; }
 html body.quick-submit-page .edge-copy-editor { --quick-label-height:25.6px; grid-template-columns:minmax(0,1fr); height:auto; }
 html body.quick-submit-page .quick-submit-heading>span { display:none; }
 html body.quick-submit-page .quick-submit-form label,html body.quick-submit-page .quick-submit-form :is(input:not([type=file]),select),html body.quick-submit-page .template-picker legend { font-size:16px; }
}

.three-column-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 18px;
}


.three-column-preview > div,
.three-column-preview > .satellite-map,
.three-column-preview > .terrain-preview-window,
.three-column-preview > .editor-component {
  width: 96%;
  aspect-ratio: var(--home-preview-aspect, 1);
  margin-inline: auto;
}

@media (min-width: 1280px) {
  .three-column-preview {
    --home-preview-aspect: auto;
    align-items: stretch;
  }
}

.three-column-preview > div,
.three-column-preview > .satellite-map,
.three-column-preview > .terrain-preview-window,
.three-column-preview > .editor-component {
  background: #757f4a;
}

.three-column-preview > .editor-component {
  display: block;
  height: 100%;
  aspect-ratio: auto;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
}

.three-column-preview > .editor-component[hidden] {
  display: none;
}

.three-column-preview > .top-split-container {
  display: grid;
  grid-template-rows: minmax(224px, 3fr) minmax(158px, 2fr);
  min-height: 400px;
  gap: 4.166667%;
  background: transparent;
}

.top-split-container > div {
  min-height: 0;
  background: #757f4a;
}

.two-column-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 24px;
}

.two-column-preview > .lower-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  margin-inline: auto;
  background: transparent;
}

.two-column-preview > .lower-panel:first-child {
  width: 98%;
  grid-column: span 2;
}

.two-column-preview > .lower-panel:last-child {
  width: 96%;
}

.lower-panel-title {
  margin: 0 0 16px;
  color: var(--cream);
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.lower-panel-title a {
  color: inherit;
  text-decoration: none;
}

.five-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2.040816%;
}

.five-row-grid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.five-row-grid > .update-item {
  width: 100%;
  height: 17.2%;
  margin-inline: auto;
}

[data-mobile-preview] { display: none; }

@media (min-width: 744px) and (max-width: 1279px) {
  .three-column-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }
  .three-column-preview > .terrain-preview-window { grid-column: 1; grid-row: 1; }
  .three-column-preview > :is(.satellite-map, .editor-component) { grid-column: 2; grid-row: 1; }
  .three-column-preview > .top-split-container { display: contents; }
  .top-split-container > :is(.howoo-card, .workflow-action-card) {
    width: 96%;
    height: auto;
    min-height: 224px;
    aspect-ratio: auto;
    margin-inline: auto;
  }
  .top-split-container > .howoo-card { grid-column: 1; grid-row: 2; }
  .top-split-container > .workflow-action-card { grid-column: 2; grid-row: 2; }
  .top-split-container > .workflow-action-card .workflow-action-button {
    width: calc(100% - 40px);
    min-height: 40px;
  }
  .two-column-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-column-preview > .lower-panel {
    width: 96%;
    grid-column: span 1;
    align-self: stretch;
  }
  .two-column-preview > .lower-panel:first-child {
    width: 96%;
    grid-column: span 1;
  }
  .two-column-preview .lower-panel-title {
    min-height: calc(var(--type-t1-size) * var(--type-t1-line-height));
  }
  .five-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .five-card-grid .showcase-card-media { aspect-ratio: 3 / 4; }
  .five-card-grid > :nth-child(n + 7) { display: none; }
  .five-row-grid {
    display: grid;
    width: 100%;
    min-height: 0;
    gap: 8px;
    align-content: start;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 40px;
    overflow: hidden;
  }
  .five-row-grid > .update-item {
    height: auto;
  }
}

@media (max-width: 743px) {
  .three-column-preview {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .three-column-preview > .terrain-preview-window { display: none; }
  .three-column-preview > .satellite-map {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    aspect-ratio: 1;
  }
  .three-column-preview > .satellite-map.is-mobile-preview-hidden { display: none; }
  .three-column-preview > .terrain-preview-window.is-mobile-preview-visible,
  .three-column-preview:has(> .editor-component:not([hidden])) > .terrain-preview-window {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    height: auto;
    aspect-ratio: 1;
  }
  .three-column-preview > .editor-component:not([hidden]) {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    aspect-ratio: auto;
  }
  body.mobile-stage-map .three-column-preview > .terrain-preview-window { display: none; }
  body.mobile-stage-map .three-column-preview > .satellite-map { display: block; }
  body.mobile-stage-preview .three-column-preview > .satellite-map { display: none; }
  body.mobile-stage-preview .three-column-preview > .terrain-preview-window,
  body.mobile-stage-edit .three-column-preview > .terrain-preview-window {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
  }
  .three-column-preview > .top-split-container { display: contents; }
  .top-split-container > :is(.workflow-action-card, .howoo-card) {
    width: 96%;
    margin-inline: auto;
  }
  .top-split-container > .workflow-action-card {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    aspect-ratio: auto;
  }
  .top-split-container > .howoo-card {
    grid-column: 1;
    grid-row: 3;
    min-height: 132px;
  }
  .three-column-preview:has(> .editor-component:not([hidden])) .top-split-container > .workflow-action-card { grid-row: 3; }
  .three-column-preview:has(> .editor-component:not([hidden])) .top-split-container > .howoo-card { grid-row: 4; }
  [data-mobile-preview] { display: inline-flex; }
  .two-column-preview {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  .two-column-preview > .lower-panel,
  .two-column-preview > .lower-panel:first-child {
    width: 96%;
    grid-column: span 1;
  }
  .five-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .five-card-grid .showcase-card-media { aspect-ratio: 3 / 4; }
  .five-card-grid > :nth-child(n + 7) { display: none; }
  .five-row-grid {
    gap: 8px;
    aspect-ratio: auto;
  }
  .five-row-grid > .update-item {
    min-height: 40px;
    height: auto;
  }
}

/* 还没上传轨迹时中间栏显示定制说明；上传后恢复地图 */
.stage-one-poster { display: block; }
body.has-uploaded-track .stage-one-poster { display: none; }
body:not(.has-uploaded-track) .three-column-preview > .satellite-map.satellite-map { display: none; }
.stage-one-poster .export-model-poster.is-stage-one { height: 100%; }
.three-column-preview > .editor-component > .export-model-poster { height: 100%; }
.three-column-preview .export-model-poster { height: 100%; }
.three-column-preview .editor-component > #exportModelDetails { flex: 1 1 auto; height: 100%; }
.three-column-preview .export-model-details { height: 100%; }
.three-column-preview .export-model-details > .export-model-poster { height: 100%; }


/* 第一步海报：等待状态用橙红点 */
.stage-one-poster .export-model-poster-state.is-waiting i {
  background: #ff6a3d;
  box-shadow: 0 0 0 4px rgb(255 106 61 / 18%);
}
.stage-one-poster .export-model-poster-services { display: grid; gap: 16px; }
.stage-one-poster .service-group { display: grid; gap: 4px; }
.stage-one-poster .service-label {
  margin: 0;
  color: var(--cream);
  font-size: var(--type-t3-size);
  font-weight: 700;
}
.stage-one-poster .service-body {
  margin: 0;
  color: var(--cream);
  opacity: 1;
  font-size: var(--type-t3-size);
  line-height: 1.7;
}

/* iOS 聚焦输入框会放大页面：移动端表单字号固定 16px */
@media (max-width: 743px) {
  input, select, textarea { font-size: 16px; }
}
.app-header {
  height: 74px;
  color: var(--cream);
  background: var(--ink);
}

.app-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  height: 100%;
  align-items: center;
}

.brand,
.account-nav,
.account-nav-actions {
  display: flex;
  align-items: center;
}

.brand {
  min-width: 0;
  padding: 0;
  gap: 11px;
  color: var(--cream);
  text-align: left;
}

.brand-logo-link,
.brand-product a {
  color: inherit;
  text-decoration: none;
}

.brand-logo-link {
  display: block;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: 31px;
  height: 42px;
  object-fit: contain;
}

.brand-divider {
  width: 1px;
  height: 28px;
  background: rgb(252 252 251 / 30%);
}

.brand-product {
  display: flex;
  align-items: center;
  color: var(--cream);
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
  white-space: nowrap;
}

.account-nav { justify-content: flex-end; }
.account-nav-actions { gap: 8px; }
.account-nav-actions[hidden] { display: none; }
.account-nav-actions > [hidden] { display: none; }
.account-nav-context {
  display: flex;
  gap: 0;
  margin: 0;
  align-items: center;
  color: var(--cream);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
  white-space: nowrap;
}
.account-nav :is(button, a) {
  padding: 0;
  color: var(--cream);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* 与页脚一致：按钮和链接共用同一套悬停反馈 */
.account-nav :is(button, a):is(:hover, :focus-visible) { color: var(--acid); }
.account-nav span {
  color: rgb(252 252 251 / 42%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
}
.account-nav-context > span { color: var(--cream); font: inherit; letter-spacing: inherit; }

@media (max-width: 743px) {
  .app-header { height: auto; min-height: 86px; }
  .app-header-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px;
    align-content: center;
  }
  .brand { gap: 6px; }
  .brand-logo { width: 22px; height: 32px; }
  .brand-divider { height: 22px; }
  .brand-product { min-width: 0; flex-wrap: wrap; }
  .account-nav {
    justify-content: flex-start;
    padding-left: 34px;
  }
  .account-nav-actions {
    max-width: 100%;
    flex-wrap: wrap;
  }
}

.site-footer {
  width: 100%;
  margin: auto 0 0;
  color: var(--cream);
  text-align: left;
  background: var(--ink);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 26px clamp(42px, 7vw, 110px);
  padding: 30px 0 20px;
  align-items: start;
}

.site-footer-brand {
  display: grid;
  grid-template-columns: max-content minmax(180px, 1fr);
  grid-template-rows: repeat(2, auto);
  column-gap: 30px;
  row-gap: 4px;
  min-width: 0;
  padding-top: 0;
  align-content: center;
}

.site-footer-identity {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  margin: 0;
  padding-right: 30px;
  align-items: center;
  border-right: 1px solid var(--line);
}

.site-footer-identity img { width: auto; height: 105px; object-fit: contain; }
.site-footer-brand p {
  grid-column: 2;
  margin: 0;
  color: var(--cream);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}
.site-footer-brand p:first-of-type { align-self: end; }
.site-footer-version { align-self: start; font-variant-numeric: tabular-nums; }
.site-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: clamp(34px, 5vw, 72px);
}
.site-footer-nav > div {
  display: grid;
  gap: 9px;
  align-content: start;
  justify-items: start;
}
.site-footer-nav strong {
  margin-bottom: 2px;
  color: var(--cream);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}
.site-footer-nav :is(button, span, a) {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  color: rgb(252 252 251 / 76%);
  font: inherit;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  background: transparent;
}
.site-footer-nav span b { font: inherit; font-variant-numeric: tabular-nums; }
.site-footer-nav :is(button, a) { cursor: pointer; }
/* 按钮与链接使用同一套悬停反馈；纯数字指标（span）保持静态 */
.site-footer-nav :is(button, a):is(:hover, :focus-visible) { color: var(--acid); }

@media (max-width: 899px) {
  .site-footer-inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer-nav { gap: 24px; }
}

@media (max-width: 743px) {
  .site-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 26px 0 18px;
  }
  .site-footer-brand {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: repeat(2, auto);
    width: 100%;
    column-gap: 24px;
    padding-top: 0;
  }
  .site-footer-identity { display: contents; }
  .site-footer-identity img {
    grid-column: 1;
    grid-row: 1 / 3;
    width: auto;
    height: 105px;
    align-self: center;
  }
  .site-footer-brand p { grid-column: 2; justify-self: end; text-align: right; }
  .site-footer-brand p:first-of-type { grid-row: 1; }
  .site-footer-brand .site-footer-version { grid-row: 2; }
  .site-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.account-dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  max-width: none;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  border: 0;
  background: var(--cream);
}

.account-dialog::backdrop {
  background: rgb(5 5 5 / 78%);
  backdrop-filter: blur(8px);
}

.account-dialog-panel { padding: 24px; }

.account-dialog header {
  display: flex;
  margin-bottom: 24px;
  align-items: flex-start;
  justify-content: space-between;
}

.account-dialog header span,
.account-dialog-status,
.account-dialog-hint {
  color: rgb(5 5 5 / 60%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.account-dialog h2 {
  margin: 0;
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.account-dialog button {
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.account-dialog [data-account-close],
.account-dialog .export-dialog-close {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
}

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

.account-dialog label {
  display: grid;
  gap: 6px;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.account-dialog input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding-inline: 12px;
  color: var(--ink);
  border: 1px solid rgb(5 5 5 / 42%);
  border-radius: var(--container-radius);
  outline: 0;
  background: #fff;
}

.account-dialog input:focus {
  border-color: var(--ink);
  outline: 3px solid rgb(203 213 114 / 58%);
}

.account-dialog input::placeholder { color: rgb(5 5 5 / 38%); }

.account-dialog .account-dialog-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.account-dialog .account-dialog-consent input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: #7a8549;
}

.account-dialog-consent button {
  padding: 0;
  color: #7a8549;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-dialog .account-dialog-primary {
  height: 44px;
  color: var(--ink);
  border-radius: var(--container-radius);
  background: var(--acid);
}

.account-dialog-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.account-dialog-code button { padding-inline: 12px; border: var(--container-border); border-radius: var(--container-radius); }
.account-dialog-code button { color: var(--cream); border-color: var(--ink); background: var(--ink); }

.account-dialog-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.account-dialog-actions button {
  color: #7a8549;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.account-dialog-status { min-height: 1.6em; margin: 14px 0 0; }

.account-dialog-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  margin-block: 16px;
  align-items: center;
  color: rgb(5 5 5 / 48%);
}

.account-dialog-divider::before,
.account-dialog-divider::after {
  height: 1px;
  content: "";
  background: rgb(5 5 5 / 18%);
}

.account-dialog-providers { display: grid; gap: 10px; }

.account-dialog .account-dialog-providers button {
  min-height: 44px;
  color: var(--cream);
  border: 1px solid #7a8549;
  border-radius: var(--container-radius);
  background: #7a8549;
}

.account-dialog .account-dialog-providers button:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--acid);
}

.account-dialog-qr {
  display: grid;
  width: min(260px, 70vw);
  aspect-ratio: 1;
  margin-inline: auto;
  place-items: center;
  border: 1px solid rgb(5 5 5 / 28%);
  border-radius: var(--container-radius);
  background: #fff;
  overflow: hidden;
}

.account-dialog-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.account-dialog-hint { margin: 16px 0 0; text-align: center; }

.account-dialog-wechat-code {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  text-align: center;
}

.account-dialog-wechat-code[hidden] { display: none; }

.account-dialog-wechat-code span {
  color: rgb(5 5 5 / 60%);
  font-size: var(--type-t3-size);
}

.account-dialog-wechat-code strong {
  font-size: 30px;
  letter-spacing: .18em;
}

.account-dialog-refresh { width: 100%; margin-top: 8px; }

.export-decision-dialog p {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.export-decision-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.export-decision-actions button {
  min-height: 44px;
  font-family: inherit;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  border: 1px solid var(--ink);
  border-radius: var(--container-radius);
}

.export-decision-actions button:active,
.account-dialog .export-dialog-close:active { filter: brightness(.9); }

.export-decision-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.export-decision-actions button:focus-visible,
.account-dialog .export-dialog-close:focus-visible {
  outline: 3px solid rgb(122 133 73 / 58%);
  outline-offset: 2px;
}

.account-dialog.export-success-dialog {
  width: min(380px, calc(100vw - 24px));
  color: var(--cream);
  border: 1px solid rgb(252 252 250 / 24%);
  border-radius: 16px;
  background: #070806;
  box-shadow: 0 28px 80px rgb(0 0 0 / 46%);
}

.export-success-dialog .account-dialog-panel { padding: 26px 12px 22px; text-align: center; }

.account-dialog.export-success-dialog .export-success-heading {
  display: grid;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  grid-template-columns: max-content max-content;
  grid-template-areas: "lead lead" "tail action";
  column-gap: 12px;
  align-items: center;
  color: var(--cream);
  font-size: clamp(24px, 4.4vw, 30px);
  line-height: 1.28;
  letter-spacing: -.02em;
  text-align: left;
  word-break: normal;
}

.export-success-heading-lead { grid-area: lead; }
.export-success-heading-tail { grid-area: tail; }

.export-success-purchase-link {
  display: inline-flex;
  grid-area: action;
  justify-self: center;
  color: var(--acid);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.export-support-area { position: relative; margin-bottom: 20px; }

.export-support-options {
  display: grid;
  width: 100%;
  margin: 12px auto 0;
  padding: 38px 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}

.export-support-options li {
  position: relative;
  min-width: 0;
  border-radius: 12px;
}

.export-support-options button {
  display: grid;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: inherit;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.export-support-options button:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.export-support-options button:disabled { cursor: wait; opacity: .62; }
.export-support-options button:active:not(:disabled) { opacity: .78; }

.export-support-bubble {
  position: absolute;
  top: -34px;
  left: 50%;
  margin: 0;
  padding: 5px 11px;
  color: #070806;
  border-radius: 999px;
  background: var(--cream);
  box-shadow: 0 8px 24px rgb(0 0 0 / 32%);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 5px) scale(.96);
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.22, .8, .28, 1);
}

.export-support-bubble::after {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--cream);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.export-support-options li:hover .export-support-bubble,
.export-support-options button:focus-visible .export-support-bubble {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.export-support-options img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  transform-origin: 50% 100%;
}

.export-support-options strong {
  color: var(--acid);
  font-size: 16px;
  line-height: 1.35;
  transition: color 160ms ease;
}

.export-support-status {
  min-height: 20px;
  margin: 8px 0 0;
  color: rgb(252 252 250 / 68%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  text-align: center;
}

.export-support-thanks {
  display: grid;
  min-height: 286px;
  padding: 18px;
  place-content: center;
  justify-items: center;
  gap: 18px;
}

.export-support-thanks[hidden] { display: none; }

.export-support-thanks h2 {
  margin: 0;
  color: var(--cream);
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.export-support-thanks p {
  max-width: 30ch;
  margin: 0;
  color: rgb(252 252 250 / 68%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.account-dialog .export-support-confirm {
  min-width: 132px;
  min-height: 44px;
  padding-inline: 24px;
  color: #070806;
  border: 1px solid var(--acid);
  border-radius: 999px;
  background: var(--acid);
  font-family: inherit;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.account-dialog .export-support-confirm:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}

@keyframes export-support-excited-hop {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  24% { transform: translateY(-13px) rotate(-5deg) scale(1.06); }
  48% { transform: translateY(-4px) rotate(5deg) scale(1.03); }
  68% { transform: translateY(-9px) rotate(-3deg) scale(1.05); }
  84% { transform: translateY(-2px) rotate(2deg) scale(1.01); }
}

.account-dialog .export-success-dismiss {
  width: auto;
  min-width: 132px;
  min-height: 44px;
  margin-inline: auto;
  padding-inline: 24px;
  color: rgb(252 252 250 / 62%);
  border: 1px solid rgb(252 252 250 / 24%);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.account-dialog .export-success-dismiss:focus-visible {
  outline: 3px solid rgb(203 213 114 / 64%);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .account-dialog .account-dialog-providers button:hover,
  .export-decision-actions button:hover {
    color: var(--ink);
    border-color: var(--ink);
    background: rgb(203 213 114 / 58%);
  }

  .account-dialog :is([data-account-close], .export-dialog-close):hover { color: #7a8549; }

  .export-success-purchase-link:hover { color: var(--cream); }
  .export-support-options button:hover img { animation: export-support-excited-hop 620ms cubic-bezier(.22, .8, .28, 1); }
  .export-support-options button:hover strong { color: var(--cream); }
  .account-dialog .export-success-dismiss:hover { color: #070806; border-color: var(--acid); background: var(--acid); }
  .account-dialog .export-support-confirm:hover { color: var(--cream); border-color: var(--cream); background: transparent; }
}

@media (max-width: 743px) {
  .account-dialog-panel { padding: 18px; }
}

@media (max-width: 420px) {
  .export-success-dialog .account-dialog-panel { padding: 22px 18px 18px; }
  .account-dialog.export-success-dialog .export-success-heading { font-size: 24px; line-height: 1.34; }
  .export-success-purchase-link { font-size: 13px; }
  .export-support-options { gap: 8px; }
  .export-support-options img { width: 74px; height: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .export-support-options button:hover img { animation: none; }
  .export-support-options strong,
  .export-support-bubble { transition: none; }
}

/* Checkout address form shared with the personal center. */
.checkout-dialog { --checkout-muted:#aaa9a2; --checkout-surface:#151613; --checkout-error:#ffb5aa; box-sizing:border-box; overflow:auto; font-size: var(--type-t3-size); font-weight: var(--type-t3-weight); line-height: var(--type-t3-line-height); letter-spacing: var(--type-t3-letter-spacing); width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; color: var(--cream); border: var(--container-border); border-radius: var(--container-radius); background: var(--checkout-surface); }
.checkout-dialog h2 { font-size: var(--type-t2-size); font-weight: var(--type-t2-weight); line-height: var(--type-t2-line-height); letter-spacing: var(--type-t2-letter-spacing); }
.checkout-dialog :is(h2, p) { margin: 0; }
.checkout-dialog .checkout-contact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.checkout-dialog .checkout-field { display: grid; gap: 4px; min-width: 0; }
.checkout-dialog .checkout-field :is(input, textarea) { width: 100%; box-sizing: border-box; }
.checkout-dialog .checkout-field input[readonly] { color: var(--checkout-muted); }
.checkout-dialog .checkout-field [aria-invalid="true"] { border-color: var(--checkout-error); }
.checkout-dialog .checkout-address-fields { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--container-radius); }
.checkout-dialog .checkout-address-fields legend { padding-inline: 6px; }
.checkout-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkout-dialog button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--container-radius); color: var(--cream); background: transparent; font: inherit; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.checkout-dialog button:hover { border-color: var(--acid); background: rgb(203 213 114 / 10%); }
.checkout-dialog :is(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.checkout-dialog button:disabled { opacity: .4; cursor: not-allowed; }
.checkout-dialog :is(input, select, textarea) { min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--container-radius); color: var(--cream); background: var(--ink); font: inherit; }
.checkout-dialog .checkout-primary { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.checkout-dialog .checkout-primary:hover { color: var(--ink); background: var(--cream); }
.checkout-dialog::backdrop { background: rgb(0 0 0 / 65%); backdrop-filter: blur(8px); }
.checkout-dialog form { display: grid; gap: 12px; }
#checkoutAddressDialog { padding: 16px; }
#checkoutAddressForm { gap: 8px; }
.checkout-dialog header { margin-bottom: 8px; }
.checkout-dialog header button { width: 44px; padding: 0; flex-shrink: 0; }
.checkout-dialog label { margin-top: 6px; }
#checkoutAddressForm label { margin-top: 0; }
.checkout-dialog button[type=submit] { margin-top: 6px; }
@media(max-width:743px) { .checkout-dialog { padding: 20px; } .checkout-dialog :is(input,select,textarea) { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .checkout-dialog button { transition: none; } }
.checkout-dialog .checkout-error { color:var(--checkout-error); }
.checkout-dialog [hidden] { display:none; }

/* Shared personal-center and administrator profile content. */
.account-profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto repeat(4,minmax(52px,auto)); column-gap:32px; padding:24px; }
.account-profile-grid-admin { grid-template-rows:auto repeat(5,minmax(52px,auto)); }
.account-profile-grid .account-profile-section { display:grid; grid-template-rows:subgrid; grid-row:span 5; padding:0; border:0; }
.account-profile-grid-admin .account-profile-section { grid-row:span 6; }
.account-profile-grid h2 { padding-bottom:12px; }
.account-profile-section { min-width:0; padding:24px; border:0; }
.account-profile-section > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.account-profile-section h2 { margin:0; font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); line-height:var(--type-t2-line-height); letter-spacing:var(--type-t2-letter-spacing); }
.account-profile-fields { display:contents; }
.account-profile-fields > div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:center; min-height:52px; box-sizing:border-box; padding:4px 0; border:0; }
.account-profile-fields dt { color:rgb(252 252 251 / 62%); }
.account-profile-fields dd { margin:0; overflow-wrap:anywhere; }
.account-profile-fields :is(dt,dd), .account-profile-section, .account-profile-header p { font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); letter-spacing:var(--type-t3-letter-spacing); }
.account-profile-fields .personal-center-field-action { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.account-profile-fields button { min-height:44px; padding:0 8px; color:var(--acid); background:transparent; border:0; text-decoration:underline; text-underline-offset:4px; font:inherit; cursor:pointer; }
.account-profile-header { padding:16px 24px; border-bottom:1px solid rgb(252 252 251 / 12%); }
.account-profile-header :is(h1,p) { margin:0; }
.account-profile-header p { color:rgb(252 252 251 / 62%); margin-bottom:8px; }
.account-profile-header h1 { font-size:var(--type-t1-size); font-weight:var(--type-t1-weight); line-height:var(--type-t1-line-height); letter-spacing:var(--type-t1-letter-spacing); }
.profile-address-list { display:grid; gap:12px; margin-top:16px; }
.profile-address-card { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; background:var(--ink); border:1px solid var(--line); border-radius:var(--container-radius); overflow-wrap:anywhere; }
.profile-address-card p { margin:4px 0 0; color:rgb(252 252 251 / 62%); white-space:pre-line; }
.profile-address-card > div { min-width:0; }
.profile-address-card a { color:var(--acid); flex-shrink:0; }
.profile-address-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.profile-default-address { display:inline-flex; align-items:center; gap:8px; min-height:44px; white-space:nowrap; cursor:pointer; }
.profile-default-address input { width:18px; height:18px; margin:0; accent-color:var(--acid); }
.profile-outline-button { min-height:44px; padding:8px 12px; color:var(--cream); background:transparent; border:1px solid var(--line); border-radius:var(--container-radius); font:inherit; cursor:pointer; }
.profile-outline-button:hover { border-color:var(--acid); }
.profile-resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-resource-grid a { display:grid; gap:10px; padding:20px; border:1px solid var(--line); border-radius:var(--container-radius); background:var(--ink); color:var(--cream); text-decoration:none; }
.profile-resource-grid strong { color:var(--acid); font-size:var(--type-t1-size); font-weight:var(--type-t1-weight); line-height:var(--type-t1-line-height); letter-spacing:var(--type-t1-letter-spacing); }
.profile-address-dialog { width:min(640px,calc(100% - 32px)); max-height:calc(100dvh - 48px); padding:24px; overflow:auto; color:var(--cream); background:#151613; border:1px solid var(--line); border-radius:var(--container-radius); font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); letter-spacing:var(--type-t3-letter-spacing); }
.profile-address-dialog::backdrop { background:rgb(0 0 0 / 72%); backdrop-filter:blur(8px); }
.profile-address-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.profile-address-dialog h2 { margin:0; font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); line-height:var(--type-t2-line-height); letter-spacing:var(--type-t2-letter-spacing); }
.profile-address-dialog header button { width:44px; height:44px; color:var(--cream); background:transparent; border:1px solid var(--line); border-radius:var(--container-radius); font:inherit; cursor:pointer; }
.profile-address-dialog footer { display:flex; justify-content:flex-end; margin-top:20px; }
.profile-address-dialog :is(button,a):focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
.profile-address-dialog [role=status]:empty { display:none; }
:is(.account-profile-section,.account-profile-header) :is(button,a):focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
@media(max-width:743px) {
 .account-profile-grid { grid-template-columns:minmax(0,1fr); gap:24px; padding:16px; grid-template-rows:none; }
 .account-profile-grid .account-profile-section { grid-row:auto; grid-template-rows:auto; row-gap:0; }
 .account-profile-section { padding:16px; }
 .account-profile-fields > div { grid-template-columns:100px minmax(0,1fr); }
 .profile-address-card { align-items:flex-start; flex-direction:column; }
}

.sn-copy-value { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; vertical-align: middle; }
.sn-copy-value > span { min-width: 0; overflow-wrap: anywhere; }
.sn-copy-value > .sn-copy-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 6px; font: inherit; color: inherit; background: transparent; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.sn-copy-button svg { display: block; width: .9em; height: .9em; }
.sn-copy-button:hover { background: rgb(127 127 127 / 20%); }
.sn-copy-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.clipboard-copy-field { position: fixed; left: -9999px; top: 0; }
.sn-reconcile-result { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid rgb(252 252 251 / 12%); }
.sn-reconcile-result > [data-admin-reconcile-work] { flex: 1; min-width: 0; }
.sn-reconcile-result > .sn-copy-value { padding-inline: 12px; }

.content-dialog {
  width: min(720px, 90vw);
  max-width: none;
  max-height: min(760px, 86vh);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 0;
  background: var(--cream);
}

.content-dialog::backdrop {
  background: rgb(5 5 5 / 78%);
  backdrop-filter: blur(8px);
}

.content-dialog-panel { padding: 24px; }

.content-dialog header {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.content-dialog h2,
.content-dialog h3,
.content-dialog p { margin-top: 0; }

.content-dialog h2 {
  margin-bottom: 0;
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.content-dialog h3 {
  margin-bottom: 8px;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.content-dialog p {
  max-width: none;
  margin-bottom: 0;
  color: #6f7f75;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.content-dialog .content-dialog-updated {
  margin: 6px 0 0;
  color: rgb(5 5 5 / 48%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.content-dialog-body section {
  padding-block: 18px;
}

.content-dialog-body section:first-of-type { padding-top: 0; }
.content-dialog-body section:last-of-type { padding-bottom: 0; }
.content-dialog-body a { color: #7a8549; text-underline-offset: 3px; }

.content-dialog-links {
  display: flex;
  gap: 8px 18px;
  margin-top: 8px;
  flex-wrap: wrap;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.content-dialog [data-content-close] {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
  color: inherit;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  place-items: center;
}

.content-dialog-body {
  max-height: calc(86vh - 104px);
  padding-right: 8px;
  overflow: auto;
}

.content-dialog-media {
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: var(--container-radius);
}

.content-dialog-media img { display: block; width: 100%; height: auto; }

.content-dialog-share-layout {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.content-dialog[data-content-dialog="share"] {
  width: min(460px, calc(100vw - 32px));
}

.content-dialog-share-layout > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(5 5 5 / 24%);
  border-radius: var(--container-radius);
}

.content-dialog-share-layout section,
.content-dialog-share-layout label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.content-dialog-share-layout label {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.content-dialog-share-layout input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding-inline: 12px;
  color: var(--ink);
  border: 1px solid rgb(5 5 5 / 42%);
  border-radius: var(--container-radius);
  background: #fff;
  font: inherit;
}

.content-dialog-share-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.content-dialog-share-actions button {
  min-height: 44px;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--container-radius);
  background: transparent;
  cursor: pointer;
}

.content-dialog-share-actions button:first-child { background: var(--acid); }

.content-dialog-share-actions button:active { filter: brightness(.9); }

.content-dialog-share-actions button:focus-visible,
.content-dialog [data-content-close]:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .content-dialog-share-actions button:hover {
    background: var(--acid);
  }
}

@media (max-width: 743px) {
  .content-dialog-panel { padding: 18px; }
  .content-dialog-share-layout { grid-template-columns: minmax(0, 1fr); }
  .content-dialog-share-layout > img { width: min(220px, 70vw); margin-inline: auto; }
}

.showcase-card {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease;
}

.showcase-card-media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #757f4a;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.showcase-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease, filter 180ms ease;
}

.showcase-card:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 4px;
}

.showcase-card:active .showcase-card-media {
  border-color: var(--acid);
}

@media (hover: hover) and (pointer: fine) {
  .showcase-card:hover {
    transform: translate(-6px, -6px);
  }

  .showcase-card:hover .showcase-card-media {
    border-color: var(--acid);
    box-shadow: 0 12px 28px rgb(0 0 0 / 32%);
  }

  .showcase-card:hover .showcase-card-image {
    filter: brightness(.86);
    transform: scale(1.03);
  }
}

.showcase-card-cover-title {
  position: relative;
  flex-shrink: 0;
  color: var(--cream);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.showcase-card-cover-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  min-height: 0;
  gap: 6px;
}

.showcase-card-cover-slogan,
.showcase-card-cover-tag {
  flex-shrink: 0;
  color: var(--cream);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.showcase-card-cover-slogan {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.showcase-card-cover-tag {
  flex-shrink: 0;
  color: rgb(252 252 251 / 50%);
}

.showcase-card-info {
  padding-top: 10px;
}

.showcase-card-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.showcase-card-heading h2 {
  min-width: 0;
  margin: 0;
  color: var(--cream);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.showcase-card-likes,
.showcase-card-info time {
  color: rgb(252 252 251 / 68%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  white-space: nowrap;
}

.showcase-card-likes {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.showcase-card-like-icon {
  font-size: 16px;
  line-height: 1;
}

.showcase-card-info time {
  display: block;
  margin-top: 4px;
}

.showcase-cards--media-only .showcase-card-info {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card,
  .showcase-card-media,
  .showcase-card-image {
    transition: none;
  }
}

.update-item {
  position: relative;
  container-type: inline-size;
  display: flex;
  padding-inline: 18px;
  align-items: center;
  justify-content: space-between;
  color: inherit;
  text-decoration: none;
  background: #757f4a;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.update-item:hover {
  z-index: 1;
  background: var(--acid);
  box-shadow: 0 12px 28px rgb(0 0 0 / 32%);
  transform: scale(1.02);
}

.update-item :is(h2, .update-item-title) {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--cream);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  text-overflow: ellipsis;
  white-space: nowrap;
  transform-origin: left center;
  transition: color 160ms ease, transform 160ms ease;
}

.update-item time {
  margin-left: 18px;
  color: rgb(252 252 251 / 68%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  white-space: nowrap;
  transform-origin: right center;
  transition: color 160ms ease, transform 160ms ease;
}

.update-item:hover :is(h2, .update-item-title, time) {
  color: var(--ink);
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .update-item,
  .update-item :is(h2, .update-item-title, time) {
    transition: none;
  }
}

.satellite-map {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #757f4a;
}

.satellite-map::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background: rgb(5 5 5 / 18%);
  pointer-events: none;
  transition: opacity 160ms ease;
}

.satellite-map.interaction-active::after {
  opacity: 0;
}

.satellite-map.map-fullscreen-fallback {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  border-radius: 0;
  box-sizing: border-box;
  margin: 0;
  aspect-ratio: auto;
}

.satellite-map.map-fullscreen-fallback {
  position: fixed;
  z-index: 10000;
  inset: 0;
  transform: none;
  box-shadow: none;
}

.satellite-map:fullscreen {
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  box-sizing: border-box;
  margin: 0;
  aspect-ratio: auto;
}

.satellite-map-canvas,
.satellite-map-canvas .maplibregl-map,
.satellite-map-canvas .maplibregl-canvas-container,
.satellite-map-canvas .maplibregl-canvas {
  width: 100%;
  height: 100%;
}

.satellite-map-canvas {
  position: absolute;
  inset: 0;
}

.map-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  touch-action: none;
}

.map-overlay .map-mask {
  fill: rgb(17 21 15 / 46%);
  pointer-events: none;
}

.map-overlay .map-selection {
  fill: none;
  stroke: var(--cream);
  stroke-width: 1;
  filter: drop-shadow(0 1px 1px var(--ink));
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.map-overlay #mapTrail {
  fill: none;
  stroke: #d94f3d;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px var(--ink));
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.satellite-map-canvas .maplibregl-canvas {
  display: block;
  outline: none;
}

.satellite-map-toolbar {
  container: map-toolbar / inline-size;
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  border-bottom: 0;
  border-radius: var(--container-radius) var(--container-radius) 0 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: rgb(5 5 5 / 72%);
  backdrop-filter: blur(10px);
}

.satellite-map-switch,
.satellite-map-actions {
  display: flex;
  flex-shrink: 0;
}

.satellite-map-search {
  display: flex;
  flex: 1;
  min-width: 0;
  margin: 0;
  border-inline: 0;
  border-right: 1px solid rgb(252 252 251 / 24%);
  align-items: center;
}


.satellite-map-search input {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  color: var(--cream);
  background: transparent;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.satellite-map-search input::placeholder { color: rgb(252 252 251 / 72%); }
.satellite-map-search:focus-within { box-shadow: inset 0 0 0 2px var(--acid); }
.satellite-map-search input:focus { outline: none; }
.satellite-map-search button { display: grid; place-items: center; border: 0; }

#mapZoomLabel { display: none; }
.satellite-map-toolbar .mobile-map-fullscreen { display: none; }

.satellite-map-toolbar :where(button:not([hidden]):not([data-mobile-preview])) { display: inline-flex; }

.satellite-map-toolbar button {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 42px;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid rgb(252 252 251 / 24%);
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.satellite-map-toolbar button:last-child {
  border-right: 0;
}

.satellite-map-toolbar button:focus-visible,
.satellite-map-toolbar button.is-active,
.satellite-map-toolbar button:active {
  color: var(--ink);
  background: var(--acid);
}

@media (hover: hover) and (pointer: fine) {
  .satellite-map-toolbar button:hover {
    color: var(--ink);
    background: var(--acid);
  }
}

.satellite-map-toolbar button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: -3px;
}

.satellite-map-results {
  position: absolute;
  z-index: 5;
  inset: 64px 18px auto;
  max-height: calc(100% - 120px);
  overflow-y: auto;
  padding: 10px;
  border: var(--container-border);
  border-radius: var(--container-radius);
  color: var(--cream);
  background: rgb(5 5 5 / 94%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
}
.satellite-map-results[hidden] { display: none; }
.satellite-map-results-heading { display: flex; align-items: center; justify-content: space-between; }
.satellite-map-results ul { list-style: none; margin: 0; padding: 0; }
.satellite-map-results button { width: 100%; min-height: 44px; padding: 8px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.satellite-map-results-heading button { width: 44px; text-align: center; border: 0; }
.satellite-map-results button :is(span,small) { display: block; }
.satellite-map-results small { font: inherit; color: rgb(252 252 251 / 72%); }
.satellite-map-results a { color: inherit; }
.satellite-map-results button:hover, .satellite-map-results button:focus-visible { color: var(--ink); background: var(--acid); outline: 2px solid var(--cream); outline-offset: -2px; }
.satellite-map-results button:hover small, .satellite-map-results button:focus-visible small { color: inherit; }

.satellite-map-status {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  max-width: calc(100% - 36px);
  margin: 0;
  padding: 8px 12px;
  border: var(--container-border);
  border-radius: var(--container-radius);
  color: var(--cream);
  background: rgb(5 5 5 / 72%);
  backdrop-filter: blur(10px);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.satellite-map-interaction-gate {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.satellite-map.interaction-active {
  box-shadow: inset 0 0 0 2px var(--acid);
}

.satellite-map.interaction-active .satellite-map-interaction-gate {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.satellite-map-status:empty {
  display: none;
}

@container map-toolbar (max-width: 340px) {
  .satellite-map-toolbar button { min-width: 28px; padding-inline: 6px; }
  .satellite-map-search input { padding-inline: 6px; }
}

@media (max-width: 743px) {
  .satellite-map-toolbar {
    inset: 12px 12px auto;
  }

  .satellite-map-toolbar button {
    min-width: 30px;
    min-height: 34px;
    padding: 7px 6px;
  }

  .satellite-map-search input { padding-inline: 8px; }

  .satellite-map-switch [data-map-type="map"],
  .satellite-map-actions :is(#mapZoomIn, #mapZoomOut) { display: none; }

  .satellite-map-toolbar .mobile-map-fullscreen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .satellite-map-results { inset: 56px 12px auto; }

  .satellite-map-status {
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
  }
}

/* 移动端：卫星视图按钮条只保留 全屏 / 3D / 分散，并贴在窗口顶部 */
@media (max-width: 900px) {
  .satellite-map-toolbar {
    inset: 0 0 auto;
    flex-wrap: nowrap;
    border-bottom: 0;
    border-radius: var(--container-radius) var(--container-radius) 0 0;
  }
  .satellite-map-switch [data-map-type],
  .satellite-map-search,
  .satellite-map-actions #mapZoomIn,
  .satellite-map-actions #mapZoomOut { display: none; }
  .satellite-map-actions #resetMap { display: inline-flex; flex: 1 1 0; justify-content: center; }
  .satellite-map-actions { margin-left: 0; flex: 1 1 auto; justify-content: space-between; gap: 0; }
  .satellite-map-actions button,
  .satellite-map-toolbar > [data-mobile-preview] { flex: 1 1 0; justify-content: center; }
  .satellite-map-switch { display: none; }

}

/* 卫星图工具栏顺序：全屏｜地图/卫星｜搜索框｜搜索按钮｜＋｜－｜复位 */
.satellite-map-toolbar #toggleMapFullscreen { display: inline-flex; order: 1; }
.satellite-map-toolbar .satellite-map-switch { order: 2; }
.satellite-map-toolbar .satellite-map-search { order: 3; }
.satellite-map-toolbar .satellite-map-actions { order: 4; }

/* 桌面卫星工具条：隐藏 3D 切换，搜索框保持可用宽度 */
@media (max-width: 743px) {
  .satellite-map:is(.map-fullscreen-fallback, :fullscreen) .satellite-map-toolbar {
    inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border: var(--container-border);
    border-radius: var(--container-radius);
  }
  body.home-page.has-uploaded-track[data-workflow-stage="upload"] .satellite-map-toolbar .satellite-map-switch,
  body.home-page.has-uploaded-track[data-workflow-stage="upload"] .satellite-map-toolbar .satellite-map-search { display: none; }
  body.home-page.has-uploaded-track[data-workflow-stage="upload"] .satellite-map-toolbar .satellite-map-actions { display: contents; }
  body.home-page.has-uploaded-track[data-workflow-stage="upload"] .satellite-map-toolbar :is(#toggleMapFullscreen, #resetMap, [data-mobile-preview="3d"]) { flex: 1 1 0; min-width: 0; }
  body.home-page.has-uploaded-track[data-workflow-stage="upload"] .satellite-map-toolbar #resetMap { order: 2; }
  body.home-page.has-uploaded-track[data-workflow-stage="upload"] .satellite-map-toolbar [data-mobile-preview="3d"] { order: 3; }
}
@media (min-width: 744px) {
  .satellite-map-toolbar [data-mobile-preview="3d"] { display: none; }
}
.satellite-map-toolbar .satellite-map-search { flex: 1 1 auto; min-width: 0; }
.satellite-map-toolbar .satellite-map-search input { flex: 1 1 auto; min-width: 110px; }

.terrain-preview-window {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #d7e0d9;
  cursor: default;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.render-overlay {
  grid-template-rows: auto 80px;
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  color: #fff;
  background: rgb(25 25 25 / 72%);
  backdrop-filter: blur(7px) saturate(.78);
  opacity: 1;
  text-align: center;
  transition: opacity .18s ease;
}

.render-overlay[hidden],
#renderOverlayTitle[hidden],
#renderOverlayRetry[hidden],
#renderOverlayComplete[hidden] {
  display: none !important;
}

.render-overlay > .render-hiker-icon { grid-area:1 / 1; }
.render-overlay > :is(#renderOverlayTitle, #renderOverlayStatus, #renderOverlayComplete) { grid-area:2 / 1; align-self:center; }
.render-overlay.is-global {
  position: fixed;
  z-index: 120;
  inset: 0;
}

.render-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}

.render-hiker-icon {
  display: block;
  position: relative;
  width: 136px;
  height: 136px;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / 28%));
}

.render-hiker-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.render-overlay strong,
.render-overlay span { max-width: min(430px, 84vw); }

.render-overlay :is(#renderOverlayTitle,#renderOverlayStatus,#renderOverlayComplete,#renderOverlayRetry) {
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.render-overlay strong {
  color: #fff;
}

.render-overlay span {
  min-height: 1.5em;
  color: rgb(255 255 255 / 78%);
}

.render-overlay.is-success #renderOverlayStatus {
  visibility: hidden;
}

.render-overlay.is-error .render-hiker-icon {
  opacity: .72;
  filter: grayscale(.35) drop-shadow(0 8px 14px rgb(0 0 0 / 28%));
  transform: translateY(4px) rotate(-4deg);
}

.render-overlay-complete,
#renderOverlayRetry {
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid rgb(255 255 255 / 64%);
  border-radius: var(--container-radius);
  cursor: pointer;
}

.render-overlay-complete {
  min-width: min(360px, 82vw);
  color: #fff;
  background: rgb(20 20 20 / 24%);
}

#renderOverlayRetry {
  min-width: 124px;
  color: var(--ink);
  background: #fff;
}

.render-overlay-complete:focus-visible,
#renderOverlayRetry:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .render-overlay { transition: none; }

}

.terrain-preview-window::before {
  position: absolute;
  z-index: 0;
  inset: -10px;
  background: url("/images/alpine-meadow-watercolor-v1.jpg") center / cover no-repeat;
  background-image: url("/images/alpine-meadow-watercolor-v1-1400.webp");
  content: "";
  filter: blur(5px) saturate(0.82) brightness(0.88);
  transform: scale(1.035);
  pointer-events: none;
}

@media (max-width: 900px) {
  /* 手机取小图，省一半以上流量 */
  .terrain-preview-window::before {
    background-image: url("/images/alpine-meadow-watercolor-v1-900.webp");
  }
}

.terrain-preview-window.interaction-active {
  cursor: grab;
  box-shadow: inset 0 0 0 2px var(--acid);
}

.terrain-preview-window.is-dragging {
  cursor: grabbing;
}

.terrain-preview-window.preview-fullscreen-fallback {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  border-radius: 0;
  box-sizing: border-box;
}

.terrain-preview-window.preview-fullscreen-fallback {
  position: fixed;
  z-index: 10000;
  inset: 0;
  transform: none;
  box-shadow: none;
}

.terrain-preview-window:fullscreen {
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  box-sizing: border-box;
}
.terrain-preview-window.preview-fullscreen-fallback .scene,
.terrain-preview-window:fullscreen .scene { flex: 1 1 0; min-height: 0; }
.terrain-preview-window.preview-fullscreen-fallback .terrain-preview-actions :is(.terrain-preview-close, [data-gallery-close]),
.terrain-preview-window:fullscreen .terrain-preview-actions :is(.terrain-preview-close, [data-gallery-close]) {
  display: none;
}

.terrain-preview-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  -webkit-user-drag: none;
}

/* 工具栏固定在预览窗口顶部，不再压住模型 */
.terrain-preview-window { display: flex; flex-direction: column; gap: 10px; }
.terrain-preview-window .scene { position: relative; flex: 1 1 auto; min-height: min(52vw, 300px); margin: 0 3% 2%; }
.terrain-preview-toolbar {
  position: static;
  z-index: 4;
  order: -1;
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: rgb(5 5 5 / 72%);
  backdrop-filter: blur(10px);
}

.terrain-preview-switch,
.terrain-preview-actions {
  display: contents;
}

.terrain-preview-toolbar .preview-format-switch,
.terrain-preview-toolbar .preview-format-switch .export-model-choice-options { display: contents; }
.terrain-preview-toolbar .preview-format-switch label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 36px;
  padding: 8px 12px;
  border-right: 1px solid rgb(252 252 251 / 24%);
  color: var(--cream);
  cursor: pointer;
  white-space: nowrap;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}
.terrain-preview-toolbar .preview-format-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.terrain-preview-toolbar .preview-format-switch label:has(input:checked) { color: var(--ink); background: var(--acid); }
.terrain-preview-toolbar .preview-format-switch label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.terrain-preview-toolbar .preview-format-switch label:focus-within { outline: 2px solid var(--acid); outline-offset: -2px; }
.terrain-preview-toolbar:has(.preview-format-switch) { flex-wrap: wrap; }

.terrain-preview-toolbar .mobile-preview-current { display: none; }
.terrain-preview-actions #resetView { display: none; }

.terrain-preview-interaction-gate {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.terrain-preview-window.interaction-active .terrain-preview-interaction-gate {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.terrain-preview-toolbar :where(button:not([hidden]):not([data-mobile-preview])) { display: inline-flex; }

.terrain-preview-toolbar button {
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 36px;
  padding: 8px 12px;
  color: var(--cream);
  border: 0;
  border-right: 1px solid rgb(252 252 251 / 24%);
  background: transparent;
  cursor: pointer;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.terrain-preview-notice {
  display:flex;
  align-items:center;
  flex:1;
  min-width:0;
  overflow:hidden;
  color:var(--cream);
  font-size:var(--type-t3-size);
  font-weight:var(--type-t3-weight);
  line-height:var(--type-t3-line-height);
  letter-spacing:var(--type-t3-letter-spacing);
}
.terrain-preview-notice > span {
  display:block;
  flex-shrink:0;
  width:max-content;
  padding-left:50%;
  white-space:nowrap;
  animation:terrain-notice-scroll 18s linear infinite;
}
.terrain-preview-notice:hover > span { animation-play-state:paused; }
@keyframes terrain-notice-scroll { to { transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce) {
  .terrain-preview-notice { overflow-x:hidden; }
  .terrain-preview-notice > span { width:100%; padding:0 12px; overflow:hidden; text-overflow:ellipsis; animation:none; }
}

.terrain-preview-toolbar button:last-child:not(#toggleExplodedView) {
  border-right: 0;
}

.terrain-preview-toolbar button:focus-visible,
.terrain-preview-toolbar button.is-active,
.terrain-preview-toolbar button:active {
  color: var(--ink);
  background: var(--acid);
}

@media (hover: hover) and (pointer: fine) {
  .terrain-preview-toolbar button:hover {
    color: var(--ink);
    background: var(--acid);
  }
}

.terrain-preview-toolbar button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: -3px;
}

@media (max-width: 743px) {
  .render-hiker-icon {
    width: 116px;
    height: 116px;
  }



  .terrain-preview-switch {
    display: flex;
    overflow: hidden;
    border: var(--container-border);
    border-radius: var(--container-radius);
    background: rgb(5 5 5 / 72%);
    backdrop-filter: blur(10px);
    pointer-events: auto;
  }

  /* 移动端工具条按钮等分宽度，含「作品广场」链接 */
  .terrain-preview-actions > button,
  .terrain-preview-actions .terrain-preview-plaza-link {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  .terrain-preview-toolbar button {
    min-height: 34px;
    padding: 7px 10px;
  }

  .terrain-preview-toolbar .mobile-preview-current {
    display: inline-flex;
    align-items: center;
  }

  .terrain-preview-actions #resetView:not([hidden]) { display: none; }

  body.mobile-stage-edit .terrain-preview-switch { display: none; }
  /* 编辑阶段没有卫星/3D 切换，按钮铺满工具条，不留空档 */
  body.mobile-stage-edit .terrain-preview-actions { margin-left: 0; flex: 1 1 auto; justify-content: space-between; }
  body.mobile-stage-edit .terrain-preview-actions button { flex: 1 1 0; justify-content: center; }

}

/* 渲染编辑之前不显示滚动提示语 */
[data-terrain-preview-window][data-preview-context="upload"] .terrain-preview-notice { display: none; }
[data-terrain-preview-window][data-preview-context="quick-receipt"] #toggleExplodedView { display: none; }




/* 移动端：上传前不显示按钮条；按钮只保留 全屏 / 效果切换 / 分散·合拢 */
@media (max-width: 743px) {
  body.home-page .terrain-preview-toolbar {
    display: flex;
    position: static;
    order: -1;
    margin: 0;
  }
  body.home-page .terrain-preview-toolbar .terrain-preview-switch { display: none; }
  body.home-page .terrain-preview-actions { margin-left: 0; flex: 1 1 auto; justify-content: space-between; gap: 0; }
  body.home-page .terrain-preview-actions button { flex: 1 1 0; justify-content: center; }
}

/* 没有可分散的装配体时不显示“分散” */
.terrain-preview-actions #toggleExplodedView[disabled] { display: none; }

/* 预览工具条：作品广场入口 */
.terrain-preview-toolbar .terrain-preview-plaza-link {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-left: 1px solid rgb(255 255 255 / 14%);
  color: var(--cream);
  font-size: var(--type-t3-size);
  text-decoration: none;
  white-space: nowrap;
}
.terrain-preview-plaza-link:hover { color: var(--acid); }
@media (max-width: 743px) {
}

/* 作品广场入口只在首页还没上传轨迹时出现 */
body.is-home-route.home-page:not(.has-uploaded-track) .terrain-preview-plaza-link { display: inline-flex; }

@media (max-width: 743px) {
  /* 编辑阶段不显示卫星切换 */
  body.home-page.mobile-stage-edit #previewEffectToggle { display: none; }
}

@media (max-width: 743px) {
  /* 上传前不显示卫星切换 */
  body.home-page:not(.has-uploaded-track) #previewEffectToggle { display: none; }
}

@media (max-width: 743px) {
  /* 移动端统一隐藏原始的卫星/3D 双按钮，改用单按钮切换 */
  .terrain-preview-toolbar .terrain-preview-switch { display: none; }
}

/* 所有预览按钮条统一外观：同样的高度、分隔线、底色和圆角 */
.terrain-preview-toolbar,
.satellite-map-toolbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 40px;
  overflow: hidden;
  border: var(--container-border);
  border-radius: var(--container-radius) var(--container-radius) 0 0;
  background: rgb(5 5 5 / 72%);
  backdrop-filter: blur(10px);
}
.terrain-preview-toolbar button,
.terrain-preview-toolbar .terrain-preview-plaza-link,
.satellite-map-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.terrain-preview-toolbar > :first-child,
.terrain-preview-toolbar button:first-child,
.satellite-map-toolbar > :first-child { border-left: 0; }
.terrain-preview-toolbar button:hover,
.terrain-preview-toolbar .terrain-preview-plaza-link:hover,
.satellite-map-toolbar button:hover { color: var(--acid); background: rgb(203 213 114 / 12%); }
.terrain-preview-toolbar button:disabled { color: rgb(255 255 255 / 35%); cursor: default; }
.terrain-preview-notice {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-left: auto;
  padding: 0 14px;
  border-left: 1px solid rgb(255 255 255 / 12%);
  color: rgb(255 255 255 / 70%);
  font-size: var(--type-t3-size);
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 743px) {
  .terrain-preview-toolbar,
  .satellite-map-toolbar,
  .terrain-preview-toolbar button,
  .satellite-map-toolbar button { min-height: 44px; }
}

.terrain-preview-toolbar button[hidden],
.terrain-preview-toolbar .terrain-preview-switch[hidden] { display: none; }

/* 作品广场入口默认不显示，只在首页工作流首屏出现 */
.terrain-preview-toolbar .terrain-preview-plaza-link { display: none; }
body.is-home-route.home-page:not(.has-uploaded-track) .terrain-preview-toolbar .terrain-preview-plaza-link { display: inline-flex; }

/* 原始的卫星/3D 双按钮在桌面也隐藏（移动端由单按钮切换替代） */
.terrain-preview-toolbar .terrain-preview-switch { display: none; }


/* 按钮默认按内容宽度；只有移动端且没有滚动字幕时才等分 */
@media (min-width: 744px) {
  .terrain-preview-toolbar .terrain-preview-close { display: none; }
  .terrain-preview-toolbar button,
  .terrain-preview-toolbar .terrain-preview-plaza-link { flex: 0 0 auto; }
}
.terrain-preview-toolbar .terrain-preview-notice { flex: 1 1 auto; min-width: 0; }
@media (max-width: 743px) {
  .terrain-preview-toolbar:not(:has(.terrain-preview-notice)) button,
  .terrain-preview-toolbar:not(:has(.terrain-preview-notice)) .terrain-preview-plaza-link {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }
}

@media (max-width: 743px) {
  body.home-page [data-preview-context="editing"] #toggleExplodedView,
  body.home-page [data-preview-context="upload"] #toggleExplodedView { display: none; }
  .terrain-preview-window .terrain-preview-toolbar {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    justify-content: space-between;
    border-radius: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    pointer-events: auto;
    flex: 0 0 auto;
    gap: 8px;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    overflow: visible;
  }
  .terrain-preview-window .terrain-preview-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    box-sizing: border-box;
    border: var(--container-border);
    border-radius: var(--container-radius) var(--container-radius) 0 0;
    background: rgb(5 5 5 / 72%);
  }
  .terrain-preview-window .terrain-preview-toolbar button,
  .terrain-preview-window .terrain-preview-plaza-link { flex: 1 1 0; min-width: 0; }
  .terrain-preview-window .terrain-preview-notice {
    display: none;
    inset: auto;
    min-height: 40px;
    border-radius: var(--container-radius);
    background: rgb(5 5 5 / 72%);
    pointer-events: auto;
  }
  .terrain-preview-window.preview-fullscreen-fallback .terrain-preview-toolbar .terrain-preview-notice,
  .terrain-preview-window:fullscreen .terrain-preview-toolbar .terrain-preview-notice {
    display: flex;
    position: relative;
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
    z-index: 4;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border: var(--container-border);
    border-radius: var(--container-radius);
    background: rgb(5 5 5 / 72%);
  }
  .terrain-preview-window:is(.preview-fullscreen-fallback, :fullscreen) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .terrain-preview-window:is(.preview-fullscreen-fallback, :fullscreen) .terrain-preview-toolbar { display: contents; }
  .terrain-preview-window:is(.preview-fullscreen-fallback, :fullscreen) .scene {
    grid-row: 2;
    grid-column: 1;
    min-height: 0;
    min-width: 0;
    margin: 0 3%;
  }
  .terrain-preview-window:is(.preview-fullscreen-fallback, :fullscreen) .terrain-preview-actions {
    grid-row: 3;
    grid-column: 1;
    position: relative;
    z-index: 4;
    border-radius: var(--container-radius);
  }
}

/* 隐藏的按钮一律不显示（覆盖统一按钮样式里的 display） */
.terrain-preview-toolbar button[hidden] { display: none; }

.workflow-action-card {
  position: relative;
  container-type: size;
  display: flex;
  min-height: 0;
  padding: 12px 14px;
  flex-direction: column;
  color: var(--cream);
  background: #757f4a;
}

.workflow-action-card [hidden] { display: none; }

.workflow-action-file-picker { display: contents; }

/* 上传与渲染只允许一套状态占用同一位置，避免初始化刷新打印状态时串台。 */
.workflow-action-card[data-stage="render"] #gpxMeta,
.workflow-action-card[data-stage="upload"] .workflow-action-feedback,
.workflow-action-card:has(.export-build-progress:not([hidden])) .workflow-action-feedback,
.workflow-action-card[data-stage="upload"] :is(#exportStageStatus, .export-build-progress) {
  display: none;
}

.workflow-action-kicker,
.workflow-action-title,
.workflow-action-status {
  margin: 0;
}

.workflow-action-card .export-build-progress {
  position: absolute;
  top: calc(50% + 31px);
  right: 20px;
  left: 20px;
  min-width: 0;
  padding-top: 8px;
}

.workflow-action-card .export-build-progress[hidden] { display: none; }

.workflow-action-card .export-build-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--cream);
}

.workflow-action-card .export-build-progress-copy > span {
  min-width: 0;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.workflow-action-status.is-error {
  color: var(--cream);
}

#exportBuildProgressLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#exportBuildProgressMeta { flex: 0 0 auto; }

.workflow-action-card .export-build-progress-track,
.preview-3d-dialog-details .export-build-progress-track {
  height: 6px;
  margin-top: var(--export-progress-track-margin, 6px);
  overflow: hidden;
  border: 1px solid rgb(252 252 251 / 70%);
  border-radius: 999px;
  background: rgb(0 0 0 / 24%);
}

.workflow-action-card .export-build-progress-track > span,
.preview-3d-dialog-details .export-build-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--cream);
  transition: width .35s ease;
}

.workflow-action-kicker {
  padding-left: 6px;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.workflow-action-title {
  margin-top: 9px;
  padding-left: 6px;
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.workflow-action-button {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px);
  min-height: 42px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: var(--container-radius);
  color: var(--cream);
  background: var(--ink);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.workflow-action-button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

.workflow-action-file-picker:has(.gpx-upload-input:focus-visible) .workflow-action-button {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

.workflow-action-button:focus-visible,
.workflow-action-button:active {
  color: var(--ink);
  background: var(--acid);
}

@media (hover: hover) and (pointer: fine) {
  .workflow-action-button:hover {
    color: var(--ink);
    background: var(--acid);
  }
}

.workflow-action-status {
  position: absolute;
  top: calc(50% + 31px);
  right: 20px;
  left: 20px;
  color: rgb(252 252 251 / 82%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

#gpxMeta:not(.is-error) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-action-feedback {
  /* 与底部两行坐标留出间距；长提示直接换行，不生成卡片内滚动条。 */
  display: flex;
  flex-direction: column;
  bottom: calc(12px + 2 * var(--type-t3-size) * var(--type-t3-line-height));
  min-height: 0;
  overflow: visible;
  overflow-wrap: anywhere;
}

.workflow-action-feedback > p {
  flex: 0 0 auto;
  order: 1;
  margin: 0;
}

.workflow-action-feedback .height-limit-notice {
  display: block;
  flex: 0 0 auto;
  order: 2;
}

.workflow-action-feedback .height-limit-notice[hidden] { display: none; }
.workflow-action-feedback .height-limit-notice.is-suppressed { display: none; }

.workflow-action-feedback #heightLimitNoticeTitle {
  display: none;
}

.workflow-action-feedback #heightLimitNoticeText {
  display: inline;
}

.workflow-action-feedback #restoreTerrainScale {
  display: inline;
  min-height: 0;
  padding: 0 0 0 4px;
  border: 0;
  border-radius: var(--container-radius);
  color: var(--acid);
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.workflow-action-feedback:focus-visible,
.workflow-action-feedback #restoreTerrainScale:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: -1px;
}

.workflow-action-location {
  display: grid;
  gap: 0;
  margin-top: auto;
  padding: 0 6px;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.workflow-action-location strong {
  font-weight: var(--type-t3-weight);
}

.workflow-action-location > :is(strong, span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-action-location span {
  color: rgb(252 252 251 / 82%);
}

.workflow-action-card[data-stage="render"] .workflow-action-button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 40px);
  margin: 0;
  transform: translate(-50%, -50%);
}

.workflow-action-card[data-stage="render"] .workflow-action-status,
.workflow-action-card[data-stage="render"] .export-build-progress {
  position: absolute;
  top: calc(50% + 31px);
  right: 20px;
  left: 20px;
  width: auto;
  margin: 0;
}

.workflow-action-card[data-stage="render"] .workflow-action-location {
  display: none;
}

.workflow-action-card[data-stage="render"] .workflow-action-feedback {
  bottom: 12px;
}

.workflow-action-card[data-stage="render"]:has(.export-build-progress:not([hidden])) .workflow-action-button {
  margin: 0;
}

.workflow-action-card[data-stage="render"]:has(.export-build-progress:not([hidden])) {
  cursor: progress;
  user-select: none;
}

.workflow-action-card[data-stage="render"]:has(.export-build-progress:not([hidden])) .export-build-progress {
  top: calc(50% + 21px);
  margin: 0;
  padding-top: 0;
}

.workflow-action-card[data-stage="render"]:has(.export-build-progress:not([hidden])) .export-build-progress-track {
  margin-top: 3px;
}

@media (min-width: 1280px) {
  .workflow-action-card[data-stage="render"]:has(.workflow-action-button[hidden]) .export-build-progress:not([hidden]) {
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 743px) {
  .workflow-action-card {
    container-type: inline-size;
    height: 224px;
    min-height: 224px;
    max-height: 224px;
  }
  .workflow-action-card :is(.workflow-action-button, .workflow-action-status, .export-build-progress) {
    position: absolute;
    right: 20px;
    left: 20px;
    width: auto;
  }
  .workflow-action-card .workflow-action-button,
  .workflow-action-card[data-stage="render"] .workflow-action-button {
    top: 50%;
    right: auto;
    left: 50%;
    width: calc(100% - 40px);
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .workflow-action-card .workflow-action-status,
  .workflow-action-card .export-build-progress,
  .workflow-action-card[data-stage="render"] :is(.workflow-action-status, .export-build-progress) {
    top: calc(50% + 31px);
    margin: 0;
  }
  .workflow-action-card .workflow-action-location,
  .workflow-action-card[data-stage="render"] .workflow-action-location {
    position: absolute;
    right: 20px;
    bottom: 8px;
    left: 20px;
    margin: 0;
    padding: 0 6px;
  }
  .workflow-action-card[data-stage="render"]:has(.export-build-progress:not([hidden])) .export-build-progress {
    top: calc(50% + 31px);
    padding-top: 8px;
  }
  .workflow-action-card[data-stage="render"]:has(.export-build-progress:not([hidden])) .export-build-progress-track {
    margin-top: 6px;
  }
  .workflow-action-card[data-stage="render"]:has(.workflow-action-button[hidden]) .export-build-progress:not([hidden]) {
    top: 50%;
    padding-top: 0;
    transform: translateY(-50%);
  }
  .workflow-action-button { min-height: 44px; }
}
.gpx-upload-input {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

@media (max-width: 743px), (pointer: coarse), (max-width: 1024px) and (max-height: 743px) {
  .workflow-action-file-picker {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: calc(100% - 40px);
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .workflow-action-file-picker .workflow-action-button {
    position: static;
    width: 100%;
    min-height: 44px;
    margin: 0;
    transform: none;
  }

  .top-split-container > .workflow-action-card .workflow-action-file-picker .workflow-action-button {
    width: 100%;
    min-height: 44px;
  }

  .workflow-action-file-picker .gpx-upload-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    clip-path: none;
    pointer-events: auto;
    cursor: pointer;
  }

  body.has-uploaded-track .workflow-action-file-picker .gpx-upload-input {
    visibility: hidden;
    pointer-events: none;
  }
}

.howoo-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 18px;
  color: var(--cream);
  background: #757f4a;
}

.howoo-card h2,
.howoo-card p {
  margin: 0;
}

.howoo-card h2 {
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.howoo-card p {
  color: rgb(252 252 251 / 78%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.howoo-card-link {
  width: fit-content;
  color: var(--acid);
  text-decoration: none;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.howoo-card-link:hover,
.howoo-card-link:focus-visible {
  color: var(--cream);
}

.howoo-card-link:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

.editor-component {
  box-sizing: border-box;
  min-width: 0;
  padding: 10px 18px;
  overflow: hidden;
  color: var(--cream);
  background: #757f4a;
  contain: size;
}

.quick-template-description { display:none; }

.editor-component[hidden] {
  display: none;
}

.editor-component [hidden] { display: none !important; }

.editor-component dialog {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 24px;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--container-radius);
  background: var(--cream);
}

.editor-component dialog::backdrop {
  background: rgb(5 5 5 / 78%);
  backdrop-filter: blur(8px);
}

.editor-component dialog strong {
  display: block;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.editor-component dialog p {
  margin: 14px 0 20px;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.editor-component dialog button {
  min-height: 44px;
  padding-inline: 16px;
  color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: var(--container-radius);
  background: var(--ink);
  cursor: pointer;
}

.editor-component dialog button + button { margin-left: 8px; }

.editor-component #advancedWarningTitle { padding-right: 56px; }

.editor-component .advanced-warning-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  place-items: center;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: 1;
}

.editor-component .advanced-warning-actions {
  display: flex;
  justify-content: center;
}

.editor-component .advanced-warning-actions #confirmAdvancedWarning {
  min-width: min(280px, 100%);
  margin: 0;
  color: var(--ink);
  background: var(--acid);
}

.editor-component .personalization-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: transparent;
}

.editor-component .personalization-sections:not(.editor-stack-active) {
  gap: 11px;
}

.editor-component .editor-overview {
  display: grid;
  flex: 0 0 42px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 42px;
  padding-inline: 6px;
  color: inherit;
  background: transparent;
}

.editor-component .editor-overview > strong {
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.editor-component .editor-overview > span {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  text-align: right;
}

.editor-component .personal-section {
  position: relative;
  display: block;
  flex: 0 0 40px;
  height: 40px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--cream);
  border: 1px solid var(--cream);
  border-radius: 8px;
  background: transparent;
}

.editor-component .personal-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0 8px;
  color: inherit;
  cursor: pointer;
  list-style: none;
}

.editor-component .personal-section:not([open]) > summary {
  height: 100%;
}

.editor-component .personal-section:not([open]) > :not(summary) { display: none; }

.editor-component .personal-section > summary::-webkit-details-marker {
  display: none;
}

.editor-component .personal-section-leading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.editor-component .personal-section-leading > span,
.editor-component .personal-section-summary,
.editor-component .personal-section-content,
.editor-component .editor-option-group,
.editor-component .field,
.editor-component .edge-field,
.editor-component .route-visibility-control,
.editor-component .base-visibility-control,
.editor-component .magnet-enable-control {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.editor-component .personal-section-leading > strong {
  overflow: hidden;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-component .personal-section-summary {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .82;
}

.editor-component .personalization-sections.editor-stack-active {
  gap: 0;
}

.editor-component .personalization-sections.editor-stack-active > .editor-overview {
  margin-bottom: 4px;
}

.editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]) {
  z-index: 1;
  flex: 1 1 0;
  height: auto;
  min-height: 14px;
  max-height: 44px;
  margin-bottom: -8px;
  overflow: hidden;
  background: #757f4a;
  box-shadow: 0 4px 10px rgb(5 5 5 / 18%);
}

.editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]) > summary {
  min-height: 14px;
  height: 100%;
  padding-inline: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]):last-child {
  margin-bottom: 0;
}

.editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]) .personal-section-leading {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
}

.editor-component .personal-section[open] {
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  height: auto;
  min-height: 0;
  margin-bottom: 6px;
  overflow: hidden;
  color: var(--ink);
  border-color: var(--cream);
  background: var(--acid);
}

.editor-component .personal-section[open] > summary {
  flex: 0 0 36px;
}

.editor-component .personal-section-content {
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  gap: 6px;
  min-height: 0;
  padding: 0 8px 8px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.editor-component .editor-option-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.editor-component .editor-option-group > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.editor-component :is(.shape-options, .template-picker) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.editor-component :is(.shape-option, .template-option) {
  display: grid;
  min-width: 0;
  min-height: 42px;
  place-items: center;
  padding: 4px 6px;
  color: var(--ink);
  border: 1px solid var(--cream);
  border-radius: 8px;
  background: var(--cream);
  cursor: pointer;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.editor-component :is(.shape-option, .template-option).active {
  color: var(--cream);
  background: #757f4a;
}

@media (hover: hover) and (pointer: fine) {
  .editor-component .personal-section > summary:hover,
  .editor-component button:not(:disabled):not(.active):hover,
  .editor-component dialog button:hover,
  .editor-unlock-dialog button:hover {
    color: var(--ink);
    background: var(--acid);
  }
}

.editor-component .shape-symbol {
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
}

.editor-component .circle-symbol {
  border-radius: 50%;
}

.editor-component .hex-symbol {
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
  background: currentColor;
}

.editor-component .polaroid-symbol {
  height: 24px;
  border-bottom-width: 6px;
}

.editor-component :is(.route-visibility-control, .base-visibility-control, .magnet-enable-control) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid var(--ink);
  border-radius: 8px;
}

.editor-component :is(.route-visibility-control, .base-visibility-control) {
  display: flex;
  gap: 8px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.editor-component .magnet-enable-control {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.editor-component :is(.route-visibility-control, .base-visibility-control, .magnet-enable-control) span {
  display: grid;
}

.editor-component :is(.route-visibility-control, .base-visibility-control) span {
  display: inline;
}

.editor-component :is(.route-visibility-control, .base-visibility-control, .magnet-enable-control) small {
  opacity: .7;
}

.editor-component .chinese-metric-picker,
.editor-component .edge-copy-editor,
.editor-component .parameter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
}

.editor-component .future-feature-list { gap:12px; }
.editor-component .landcover-color-options label.source-unavailable { cursor:not-allowed; }
.editor-component .feature-toggle-row { display:flex; flex-wrap:nowrap; align-items:center; gap:24px; min-width:0; }
.editor-component .feature-toggle-row > .magnet-enable-control { flex:0 1 auto; white-space:nowrap; }
.editor-component :is(.landcover-feature-row, .magnet-feature-controls) { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; min-width:0; }
.editor-component .landcover-feature-row > .feature-row-title,
.editor-component .magnet-feature-controls > .magnet-enable-control { flex:0 0 145px; }
.editor-component .future-feature-list .magnet-enable-control { min-height:38px; }
.editor-component .feature-row-title { font-size:var(--type-t3-size); line-height:var(--type-t3-line-height); }
.editor-component .landcover-color-options { display:flex; flex:1 1 285px; flex-wrap:wrap; align-items:center; gap:8px 16px; min-width:0; }
.editor-component .landcover-color-options label { display:inline-flex; align-items:center; gap:6px; min-height:38px; white-space:nowrap; cursor:pointer; }
.editor-component #magnetRadialControls { flex:1 1 420px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0; }
.editor-component .future-feature-list input[type="checkbox"] { box-sizing:border-box; flex:none; width:16px; min-width:16px; height:16px; min-height:16px; margin:0; padding:0; accent-color:var(--ink); }
.draft-export-details { display:contents; color:var(--cream); }
.draft-export-details[hidden], .draft-export-details #exportModelColors[hidden], .draft-export-details #landcoverPalette[hidden] { display:none; }
.editor-component .export-model-details {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  gap: 8px;
  color: var(--cream);
}
.editor-component:has(#exportModelDetails:not([hidden])) { padding-inline:12px; }
.editor-component .export-model-details-header,.draft-export-details > .export-model-details-header { display:flex; align-items:center; gap:12px; padding:4px 0 8px; border-bottom:1px solid rgb(252 252 251 / 42%); }
.editor-component .export-model-details-header h2,.draft-export-details > .export-model-details-header h2 { margin:0; font-size:var(--type-t1-size); font-weight:var(--type-t1-weight); line-height:var(--type-t1-line-height); letter-spacing:var(--type-t1-letter-spacing); }
.editor-component .export-model-choice-group,.draft-export-details .export-model-choice-group { display:grid; gap:6px; }
.editor-component .export-model-choice-group > strong,.editor-component .export-model-colors h3,.draft-export-details .export-model-choice-group > strong,.draft-export-details .export-model-colors h3 { display:block; font-size:var(--type-t2-size); font-weight:var(--type-t2-weight); line-height:var(--type-t2-line-height); letter-spacing:var(--type-t2-letter-spacing); }
.editor-component .export-model-choice-options,.draft-export-details .export-model-choice-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.editor-component .export-model-choice-options label,.draft-export-details .export-model-choice-options label { display:inline-flex; align-items:center; gap:8px; min-height:36px; color:var(--cream); cursor:pointer; }
.editor-component .export-model-choice-options input[type="checkbox"],.draft-export-details .export-model-choice-options input[type="checkbox"] { box-sizing:border-box; width:16px; min-width:16px; height:16px; min-height:16px; margin:0; padding:0; flex:none; accent-color:var(--ink); cursor:pointer; }
.editor-component .export-model-choice-options label:has(input:disabled),.draft-export-details .export-model-choice-options label:has(input:disabled) { opacity:.5; cursor:not-allowed; }
.editor-component .export-model-colors { display:grid; gap:5px; }
.draft-export-details .export-model-colors, .draft-export-details .landcover-palette { display:contents; }
.editor-component .export-model-colors h3,.draft-export-details .export-model-colors h3 { margin:0; }
.editor-component #exportDetailColorCount,.draft-export-details #exportDetailColorCount { font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); }
.editor-component .landcover-palette,.draft-export-details .landcover-palette { min-width:0; }
.editor-component .landcover-palette ul,.draft-export-details .landcover-palette ul { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.editor-component .landcover-palette li,.draft-export-details .landcover-palette li { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.editor-component .landcover-palette li > strong,.draft-export-details .landcover-palette li > strong { flex:none; }
.editor-component .landcover-color-values,.draft-export-details .landcover-color-values { display:flex; flex-wrap:wrap; gap:3px 9px; min-width:0; }
.editor-component .landcover-color-values span,.draft-export-details .landcover-color-values span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.editor-component :is(.export-model-choice-options label,.export-model-colors p,.landcover-palette li,.landcover-palette li strong,.landcover-color-values span),.draft-export-details :is(.export-model-choice-options label,.export-model-colors p,.landcover-palette li,.landcover-palette li strong,.landcover-color-values span) { font-size:var(--type-t3-size); font-weight:var(--type-t3-weight); line-height:var(--type-t3-line-height); letter-spacing:var(--type-t3-letter-spacing); }
.editor-component .landcover-swatch,.draft-export-details .landcover-swatch { display:inline-block; flex:none; width:14px; height:14px; border:1px solid rgb(0 0 0 / 20%); border-radius:3px; }
.editor-component .chinese-metric-picker {
  display: contents;
}

.editor-component .chinese-metric-picker select {
  font-size: var(--type-t3-size);
  line-height: var(--type-t3-line-height);
}

.editor-component .chinese-metric-picker[hidden],
.editor-component .custom-hex-extra[hidden] {
  display: none;
}

.editor-component :is(.field, .edge-field, .chinese-metric-picker label) {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--ink);
}

.editor-component .edge-field > span { display:none; }

.editor-component .custom-hex-extra > span { display:none; }
.editor-component .custom-hex-extra input::placeholder { color:#777c7c; opacity:1; }
.editor-component .editor-select-control { position:relative; min-width:0; }
.editor-component .editor-select-control[hidden],
.editor-component .editor-select-value { display:none; }
.editor-component [data-editor-select-trigger] {
  display:flex; align-items:center; justify-content:space-between; width:100%; min-height:32px;
  padding:0 8px; border:1px solid var(--cream); border-radius:7px;
  color:var(--ink); background:var(--cream); cursor:pointer;
  font-size:var(--type-t3-size); font-weight:var(--type-t3-weight);
  line-height:var(--type-t3-line-height); letter-spacing:var(--type-t3-letter-spacing);
}
.editor-component [data-editor-select-trigger]::after { content:''; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); }
.editor-component .editor-select-menu {
  position:fixed; inset:auto; box-sizing:border-box; margin:0; padding:4px;
  overflow:auto; border:1px solid var(--ink); border-radius:7px;
  color:var(--ink); background:var(--cream);
}
.editor-component .editor-select-menu button {
  display:block; width:100%; min-height:32px; padding:4px 8px; text-align:left;
  border:0; border-radius:4px; color:var(--ink); background:var(--cream); cursor:pointer;
  font-size:var(--type-t3-size); font-weight:var(--type-t3-weight);
  line-height:var(--type-t3-line-height); letter-spacing:var(--type-t3-letter-spacing);
}
.editor-component .editor-select-menu button[aria-selected="true"],
.editor-component .editor-select-menu button:hover { background:var(--acid); }
.editor-component :is([data-editor-select-trigger],.editor-select-menu button):focus-visible { outline:2px solid var(--ink); outline-offset:1px; }


.editor-component .edge-field output:empty {
  display: none;
}

.editor-component :is(input, select) {
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  color: var(--ink);
  border: 1px solid rgb(5 5 5 / 24%);
  border-radius: 7px;
  background: var(--cream);
  font: inherit;
}

.editor-component select {
  color: var(--ink);
  border-color: var(--cream);
  background: var(--cream);
  color-scheme: light;
}

.editor-component input:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.editor-component :is(button:not(.active), select):focus-visible,
.editor-component summary:focus-visible {
  color: var(--ink);
  background: var(--acid);
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.editor-component :is(.shape-option, .template-option):not(.active):active,
.editor-component dialog button:active,
.editor-unlock-dialog button:active {
  color: var(--ink);
  background: var(--acid);
}

.editor-unlock-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--cream);
  border-radius: var(--container-radius);
  background: var(--cream);
}

.editor-unlock-dialog::backdrop {
  background: rgb(5 5 5 / 72%);
}

.editor-unlock-dialog form {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.editor-unlock-dialog h2 {
  margin: 0;
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}

.editor-unlock-dialog p {
  margin: 0;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.editor-unlock-dialog form > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.editor-unlock-dialog button {
  min-height: 44px;
  color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

@media (max-width: 1279px) {
  .editor-component {
    padding: 8px 12px;
  }

  .editor-component .personalization-sections:not(.editor-stack-active) {
    gap: 6px;
  }

  .editor-component .editor-overview {
    flex-basis: 32px;
    min-height: 32px;
  }

  .editor-component .personal-section {
    flex-basis: 34px;
    height: 34px;
  }

  .editor-component .personal-section > summary {
    min-height: 30px;
  }
}

@media (max-width: 743px) {
  .editor-component {
    height: auto;
    overflow: visible;
    contain: none;
  }

  .editor-component .personalization-sections {
    height: auto;
    overflow: visible;
  }

  .editor-component .personal-section[open],
  .editor-component .personal-section-content {
    overflow: visible;
  }

  .editor-component .personalization-sections.editor-stack-active > .personal-section:not([open]) {
    flex: 0 0 34px;
    height: 34px;
    min-height: 34px;
    max-height: none;
  }
}

/* 模型详情：海报式下单引导 */
.export-model-details.export-model-details { padding: 0; }
.export-model-poster {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 22px 24px 20px;
  /* 与其它卡片用同一个圆角令牌 */
  border-radius: var(--container-radius);
  background: #111312;
  color: var(--cream);
  overflow: hidden;
}
/* 已下单作品展示订单信息，下单海报不再出现 */
.export-model-poster[hidden] { display: none; }
.export-model-poster::after {
  content: '';
  position: absolute;
  inset: -30% -20% auto auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(214 232 60 / 10%), transparent 62%);
  pointer-events: none;
}
.export-model-poster-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(252 252 251 / 16%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}
.export-model-poster-state { display: inline-flex; align-items: center; gap: 8px; opacity: .92; }
.export-model-poster-state i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 4px rgb(214 232 60 / 18%);
}
.export-model-poster-mark { opacity: .55; letter-spacing: .08em; }
/* 卡片名称，按规范归入 T2 */
.export-model-poster-title {
  margin: 0;
  font-size: var(--type-t1-size);
  font-weight: var(--type-t1-weight);
  line-height: var(--type-t1-line-height);
  letter-spacing: var(--type-t1-letter-spacing);
}
.export-model-poster-sub {
  margin: 0;
  opacity: .82;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}
.export-model-poster-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.export-model-poster-features li {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgb(252 252 251 / 16%);
  border-radius: 8px;
  font-size: var(--type-t3-size);
  line-height: var(--type-t3-line-height);
}
.export-model-poster-features strong { font-weight: 700; }
.export-model-poster-features span { opacity: .72; font-variant-numeric: tabular-nums; }
.export-model-poster-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--acid);
  color: #14160f;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.export-model-poster-cta:hover,
.export-model-poster-cta:focus-visible {
  background: #0b0c09;
  color: #fdfdfb;
}
.export-model-poster-flow,
.export-model-poster-params {
  margin: 0;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  opacity: .66;
}
.export-model-poster-params { padding-top: 10px; border-top: 1px solid rgb(252 252 251 / 12%); }
.export-model-poster-params span { margin-left: 12px; opacity: .9; }

/* 只在第四步海报显示时去掉绿色外卡，避免两层壳；第三步仍保留原样式 */
.editor-component:has(#exportModelDetails:not([hidden]) .export-model-poster) {
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* 详情页海报内的编辑/导出按钮 */
.export-model-poster-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.export-model-poster-actions button {
  padding: 13px 16px;
  border: 1px solid rgb(252 252 251 / 26%);
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  font-size: var(--type-t3-size);
  font-weight: 600;
  line-height: var(--type-t3-line-height);
  cursor: pointer;
}
.export-model-poster-actions button:hover { border-color: var(--acid); color: var(--acid); }

/* 详情页海报排版 */
.export-model-poster.is-detail {
  gap: 20px;
  padding: 24px 26px 22px;
}
.export-model-poster.is-detail .export-model-poster-top { padding-bottom: 14px; }
.export-model-poster.is-detail .export-model-poster-title { line-height: 1.28; }
.export-model-poster.is-detail .export-model-poster-sub { line-height: 1.85; }
.export-model-poster.is-detail .export-model-poster-actions { margin-top: 2px; }
.export-model-poster.is-detail .export-model-poster-actions button { min-height: 44px; }
.export-model-poster.is-detail .export-model-poster-cta { margin-top: 4px; min-height: 48px; }

.landcover-color-options label:has(input:disabled) { opacity: .42; cursor: not-allowed; }
.landcover-color-options label:has(input:disabled) input { cursor: not-allowed; }

body a:is(:hover, :focus-visible) {
  color: var(--acid);
}

html:has(dialog[open]),
body:has(dialog[open]) {
  overflow: hidden;
}

.drafts-layout {
  display: grid;
  align-content: start;
  gap: 28px;
  margin-block: 18px;
}

.drafts-status {
  width: 96%;
  margin: 0 auto;
  color: var(--cream);
}

.drafts-status.is-error { color: #ffb5aa; }

.public-works-dialog > button { min-height: 44px; padding: 8px 16px; border: var(--container-border); border-radius: var(--container-radius); background: var(--ink); color: var(--cream); cursor: pointer; }
.public-works-dialog, .public-works-dialog > button, .public-works-page .preview-3d-card-viewport { font-size: var(--type-t3-size); font-weight: var(--type-t3-weight); line-height: var(--type-t3-line-height); letter-spacing: var(--type-t3-letter-spacing); }
.public-works-page .preview-3d-card-viewport { display: grid; place-items: center; color: var(--cream); }
.public-works-page .preview-3d-card-copy { pointer-events: none; }
.public-works-dialog { width: min(1000px, 92vw); max-width: 92vw; padding: 16px; background: var(--ink); color: var(--cream); }
.public-works-dialog::backdrop { background: rgb(0 0 0 / 78%); }
.public-works-dialog > button { display: block; margin-left: auto; }
.public-works-preview { height: min(68vh, 640px); min-height: 280px; }
.public-works-preview > img { width: 100%; height: 100%; object-fit: contain; }
.public-works-preview > .terrain-preview-window { width: 100%; height: 100%; min-height: 0; }
.public-works-render-host { position: absolute; left: -10000px; top: 0; width: 720px; height: 540px; visibility: hidden; pointer-events: none; }
.public-works-render-host > .terrain-preview-window { width: 720px; height: 540px; }

.draft-detail-layout {
  width: min(960px, 90vw);
  gap: 12px;
  align-content: start;
}

.draft-detail-layout .drafts-status {
  width: 100%;
  margin: 0;
}

.drafts-grid {
  display: grid;
  width: 96%;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-inline: auto;
}

.drafts-section {
  display: grid;
  align-content: start;
  gap: 12px;
}

.drafts-section-header {
  display: flex;
  width: 96%;
  margin-inline: auto;
  align-items: baseline;
  justify-content: space-between;
  color: var(--cream);
}

.drafts-section-header h2 {
  margin: 0;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.drafts-section-header span,
.drafts-empty {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.drafts-section-header span { color: rgb(252 252 251 / 62%); }
.drafts-toolbar { justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.drafts-actions { display: flex; gap: 8px; }
.drafts-actions[hidden], .drafts-status[hidden] { display: none; }
.drafts-actions button {
  min-height: 32px;
  padding: 4px 12px;
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: transparent;
  color: var(--cream);
  font-family: inherit;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  cursor: pointer;
}
.drafts-actions button:disabled { opacity: .4; cursor: default; }
.drafts-actions button:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.drafts-empty { width: 96%; margin: 0 auto; color: rgb(252 252 251 / 62%); }
.drafts-empty[hidden] { display: none; }

.draft-preview-runtime {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 720px;
  height: 540px;
  visibility: hidden;
  pointer-events: none;
}

.draft-preview-runtime > :is(.terrain-preview-window, .satellite-map, .editor-component, .workflow-action-card) {
  width: 720px;
  height: 540px;
}

@media (min-width: 744px) and (max-width: 1023px) {
  .drafts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 743px) {
  .drafts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.draft-detail-page .preview-3d-dialog-layout .preview-3d-dialog-details {
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: #111312;
}
.draft-detail-page .preview-3d-dialog-layout .preview-3d-dialog-details > .export-model-poster { background: transparent; }
.draft-detail-page .preview-3d-dialog-layout .preview-3d-dialog-details > .export-model-poster.is-detail { flex: 1 1 auto; }
.draft-detail-page .preview-3d-dialog-layout .preview-3d-dialog-details > .export-model-poster.is-detail { height: 100%; }
/* 内容社区式卡片：圆角图 + 标题 + 作者行，不再用整块底色和浮层 */
.preview-3d-card {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  background: transparent;
  transition: transform 180ms ease;
}

.preview-3d-card-trigger {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: inherit;
  border-radius: 12px;
  /* 与预览图自带的浅色底一致，1:1 窗口里的留白不会突兀 */
  background: #d6e0d8;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.preview-3d-card-trigger:active,
.preview-3d-card-trigger[aria-busy="true"] { transform: scale(.98); filter: brightness(.85); }
@media (prefers-reduced-motion: reduce) {
  .preview-3d-card-trigger { transition: none; }
  .preview-3d-card-trigger:active,
  .preview-3d-card-trigger[aria-busy="true"] { transform: none; }
}

/* 悬停反馈参考内容社区：整体轻微上浮、封面微微放大，标题提亮 */
/* 悬停用半透明遮罩，不缩放不滤镜，圆角边缘不会出现毛边 */
.preview-3d-card-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0%);
  transition: background 180ms ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .preview-3d-card:hover .preview-3d-card-trigger::after { background: rgb(0 0 0 / 18%); }
}

.preview-3d-card-viewport {
  position: absolute;
  inset: 0;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
/* 图案居中，四周与窗口保持 4px */
.preview-3d-card-viewport { display: flex; align-items: center; justify-content: center; padding: 4px; box-sizing: border-box; }
.preview-3d-card-viewport > img { display: block; width: 100%; height: 100%; object-fit: contain; }

.preview-3d-card-select-target {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}

.preview-3d-card-select {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--acid);
  cursor: pointer;
}

.preview-3d-card-select:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
/* 选中用圆角描边，避免直角框盖在圆角图上 */
.preview-3d-card.is-selected .preview-3d-card-trigger { box-shadow: 0 0 0 2px var(--acid); }

.preview-3d-card-copy {
  pointer-events: none;
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--cream);
  text-align: left;
}

.preview-3d-card-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 卡片标题专用令牌，介于区块标题与正文之间 */
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-line-height);
  letter-spacing: var(--type-card-title-letter-spacing);
}

.preview-3d-card-author {
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
  color: rgb(252 252 251 / 66%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 链接默认色要与正文次级色一致，否则会继承全局链接色 */
a.preview-3d-card-author { color: rgb(252 252 251 / 66%); pointer-events: auto; }

/* 作者与日期同一行，日期靠右；只有日期时不额外占一行 */
.preview-3d-card-meta {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: baseline;
}

.preview-3d-card-date {
  margin-left: auto;
  color: rgb(252 252 251 / 42%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
  white-space: nowrap;
}
a.preview-3d-card-author:hover,
a.preview-3d-card-author:focus-visible { color: var(--acid); }

.preview-3d-card--empty { display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: rgb(252 252 251 / 6%); }
.preview-3d-card-empty-index { color: rgb(252 252 251 / 46%); font-size: var(--type-t2-size); }
.preview-3d-dialog-viewport { background-position: center; background-size: contain; background-repeat: no-repeat; }

/* 描边画在圆角图片上，不画在卡片外框上，避免直角套圆角 */
@media (hover: hover) and (pointer: fine) {
  .preview-3d-card:hover .preview-3d-card-trigger { box-shadow: 0 0 0 2px rgb(203 213 114 / 45%); }
}

.preview-3d-card:has(.preview-3d-card-trigger:focus-visible) .preview-3d-card-trigger {
  box-shadow: 0 0 0 3px rgb(203 213 114 / 60%);
}

:where(dialog).preview-3d-dialog {
  --preview-window-height: min(704px, calc(100dvh - 64px));
  --preview-sidebar-height: var(--preview-window-height);
  --preview-sidebar-overflow: auto;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1100px, 84vw);
  max-width: none;
  height: min(760px, calc(100dvh - 32px));
  padding: 0;
  color: var(--cream);
  border: 0;
  border-radius: var(--container-radius);
  background: transparent;
  box-shadow: none;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

.draft-detail-page [data-draft-detail-page] {
  width: 100%;
  max-height: none;
  margin-inline: auto;
  padding: clamp(12px, 2vw, 18px);
  overflow: visible;
  box-shadow: none;
}

.draft-detail-page [data-draft-detail-page][hidden] { display: none; }

.draft-detail-page .preview-3d-dialog-layout, [data-draft-detail-page]:not(.checkout-layout) { align-items: start; }
.draft-detail-page :is(.preview-3d-dialog-details, .preview-3d-dialog-viewport) { align-self: stretch; }

.preview-3d-dialog-close {
  position: absolute;
  z-index: 30;
  top: 18px;
  right: 18px;
  display: grid;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  place-items: center;
  color: var(--cream);
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: rgb(5 5 5 / 82%);
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.preview-3d-dialog-close[hidden] { display: none; }

.preview-3d-dialog-close:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 2px;
}

.preview-3d-dialog-close:active { background: var(--acid); color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .preview-3d-dialog-close:hover { background: var(--acid); color: var(--ink); }
}

.preview-3d-dialog::backdrop {
  background: rgb(5 5 5 / 30%);
  backdrop-filter: blur(18px) saturate(80%);
}

.purchase-height-warning-dialog {
  position: relative;
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 24px;
  color: var(--cream);
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: var(--ink);
  box-shadow: 0 24px 80px rgb(0 0 0 / 52%);
}

.purchase-height-warning-dialog::backdrop {
  background: rgb(5 5 5 / 78%);
  backdrop-filter: blur(8px);
}

.purchase-height-warning-dialog strong {
  display: block;
  padding-right: 56px;
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.purchase-height-warning-dialog p,
.purchase-height-warning-link {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.purchase-height-warning-dialog p { margin: 14px 0 20px; }

.purchase-height-warning-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--cream);
  border: 0;
  background: transparent;
  font-size: var(--type-t2-size);
  cursor: pointer;
}

.purchase-height-warning-link {
  min-height: 44px;
  padding: 0;
  color: var(--acid);
  border: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.purchase-height-warning-dialog :is(.purchase-height-warning-close, .purchase-height-warning-link):focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.preview-3d-dialog-layout, [data-draft-detail-page]:not(.checkout-layout) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .68fr);
  gap: 18px;
}

.draft-detail-page [data-draft-detail-page] {
  width: min(1100px, 100%);
  margin-inline: auto;
}

.preview-3d-dialog-viewport {
  position: relative;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  border-color: transparent;
  background: var(--ink);
}

.preview-3d-dialog-viewport::after {
  position: absolute;
  z-index: 15;
  inset: 0;
  border: var(--container-border);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.preview-3d-dialog-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.preview-3d-dialog-image[hidden] { display: none; }

.preview-3d-dialog-stage {
  position: absolute;
  z-index: auto;
  inset: 0;
}

.preview-3d-dialog-loading {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--cream);
  background: rgb(5 5 5 / 58%);
  backdrop-filter: blur(12px) saturate(70%);
  -webkit-backdrop-filter: blur(12px) saturate(70%);
  opacity: 1;
  transition: opacity 180ms ease;
}

.preview-3d-dialog-loading[hidden] { display: none; }
.preview-3d-dialog-loading.is-closing { opacity: 0; pointer-events: none; }

.preview-3d-dialog-loading .render-hiker-icon {
  display: block;
  position: relative;
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / 28%));
}

.preview-3d-dialog-loading .render-hiker-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.preview-3d-dialog-preview-status {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 18px;
  left: 18px;
  margin: 0;
  color: var(--cream);
  text-align: center;
  pointer-events: none;
}

.preview-3d-dialog-preview-status:empty { display: none; }

.preview-3d-dialog-stage > .terrain-preview-window {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.preview-3d-dialog-viewport .terrain-preview-switch {
  display: none;
}
/* 卫星/3D 切换只属于编辑界面，作品详情与管理中心作品详情都不显示 */

/* 详情/结算/广场：按钮一律靠左 */
.preview-3d-dialog-viewport .terrain-preview-toolbar {
  justify-content: flex-start;
}

.preview-3d-dialog-viewport .terrain-preview-actions {
  margin-left: 0;
}

.draft-detail-page .preview-3d-dialog-details > .export-model-poster { height: 100%; }
.preview-3d-dialog-details > .export-model-poster { height: 100%; }
.preview-3d-dialog-details {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.preview-3d-dialog .preview-3d-dialog-details > [hidden] { display: none; }

.preview-3d-dialog-details .export-build-progress { position:absolute; top:var(--export-progress-top, 6px); right:0; left:0; width:100%; min-width:0; padding:0; --export-progress-track-margin:0px; }
.preview-3d-dialog-details .export-build-progress[hidden],
.preview-3d-dialog-details .export-build-progress .export-build-progress-copy { display:none; }

.preview-3d-dialog-copy,
.preview-3d-dialog-metadata,
.preview-3d-order-summary {
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}

.preview-3d-dialog-copy,
.preview-3d-dialog-metadata {
  display: grid;
  gap: 6px;
  margin: 0;
}

.preview-3d-order-summary {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: var(--container-border);
}

.preview-3d-order-summary[hidden] { display: none; }
.preview-3d-order-summary h2,
.preview-3d-order-summary p { margin: 0; }
.preview-3d-order-summary h2 {
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}
.preview-3d-order-summary .preview-3d-dialog-metadata { margin-top: 0; padding-top: 0; border-top: 0; }
.preview-3d-order-summary p { color: rgb(252 252 251 / 62%); }
.preview-3d-dialog-metadata > div[hidden] { display: none; }
[data-draft-order-meta="tracking"] a, [data-admin-tracking-number] a, [data-order-purchase="nfc-url"] a { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
[data-draft-shipping-address] { white-space: pre-line; overflow-wrap: anywhere; }
.preview-3d-order-actions {
  position: relative;
  --export-progress-top: -12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.preview-3d-dialog-copy div,
.preview-3d-dialog-metadata div {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
}

.preview-3d-dialog-copy dt,
.preview-3d-dialog-metadata dt {
  white-space: nowrap;
  color: rgb(252 252 251 / 50%);
}

.preview-3d-dialog-copy dd,
.preview-3d-dialog-metadata dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.preview-3d-dialog-metadata dd a {
  color: var(--acid);
  text-decoration: none;
}
.preview-3d-dialog-metadata dd a:hover,
.preview-3d-dialog-metadata dd a:focus-visible {
  text-decoration: underline;
}

.preview-3d-dialog-copy div:first-child dd {
  color: var(--cream);
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
}

.preview-3d-dialog-metadata {
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--container-border);
}

.preview-3d-dialog-actions {
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: auto;
  padding-top: 24px;
}

.preview-3d-dialog-actions[hidden] { display: none; }
.preview-3d-dialog-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.preview-3d-dialog-actions button,
.preview-3d-order-actions button {
  font-size: var(--type-t2-size);
  font-weight: var(--type-t2-weight);
  line-height: var(--type-t2-line-height);
  letter-spacing: var(--type-t2-letter-spacing);
  min-height: 44px;
  color: var(--cream);
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: transparent;
  cursor: pointer;
}

.preview-3d-dialog-actions button:disabled,
.preview-3d-order-actions button:disabled { opacity: .52; cursor: wait; }

.preview-3d-dialog-actions [data-draft-purchase],
.preview-3d-order-actions [data-draft-repurchase] {
  color: var(--ink);
  border-color: var(--acid);
  background: var(--acid);
}

.preview-3d-order-actions [data-draft-repurchase] { grid-column: 1 / -1; }

.account-dialog.order-edit-copy-dialog { width: min(520px, calc(100vw - 32px)); }
.order-edit-copy-dialog .account-dialog-panel { display: grid; gap: 20px; }
.order-edit-copy-dialog header { margin-bottom: 0; }
.order-edit-copy-dialog .account-dialog-hint,
.order-edit-copy-status { margin: 0; }
.order-edit-copy-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.order-edit-copy-actions button {
  min-height: 44px;
  border-radius: var(--container-radius);
  cursor: pointer;
}
.order-edit-copy-cancel {
  color: var(--ink);
  border: 1px solid rgb(5 5 5 / 28%);
  background: transparent;
}
.order-edit-copy-status {
  min-height: var(--type-t3-line-height);
  color: #59611f;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}
.order-edit-copy-status[hidden] { display: none; }
.order-edit-copy-status.is-error { color: #9d2929; }
.order-edit-copy-actions button:disabled { opacity: .52; cursor: wait; }
.order-edit-copy-actions button:focus-visible { outline: 2px solid #7a8549; outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .order-edit-copy-cancel:not(:disabled):hover { border-color: var(--ink); background: rgb(5 5 5 / 6%); }
}

:is(.preview-3d-dialog-actions, .preview-3d-order-actions) button:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

:is(.preview-3d-dialog-actions, .preview-3d-order-actions) button:not(:disabled):active {
  filter: brightness(.9);
}

@media (hover: hover) and (pointer: fine) {
  :is(.preview-3d-dialog-actions, .preview-3d-order-actions) button:not(:disabled):hover {
    color: var(--cream);
    border-color: var(--acid);
    background: rgb(203 213 114 / 10%);
  }
  .preview-3d-dialog-actions [data-draft-purchase]:not(:disabled):hover,
  .preview-3d-order-actions [data-draft-repurchase]:not(:disabled):hover {
    color: var(--ink);
    background: var(--cream);
  }
}

@media (max-width: 743px) {
  .preview-3d-dialog {
    width: calc(100vw - 16px);
  }

  .preview-3d-dialog-layout, [data-draft-detail-page]:not(.checkout-layout) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 手机端详情：预览与信息连成一条，关闭键压在预览右上角 */
  .preview-3d-dialog-layout { gap: 0; }
  .preview-3d-dialog-viewport {
    border-radius: var(--container-radius) var(--container-radius) 0 0;
  }
  .preview-3d-dialog-details {
    position: static;
    border-top: 0;
    border-radius: 0 0 var(--container-radius) var(--container-radius);
  }
  .preview-3d-dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .preview-3d-dialog-copy div,
  .preview-3d-dialog-metadata div { grid-template-columns: 70px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .preview-3d-card {
    transition: none;
  }

  .preview-3d-dialog-loading {
    transition: none;
    animation: none;
  }
}

/* 标题行：标题左、日期右 */
.preview-3d-card-copy { padding-inline: 2px; }
.preview-3d-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-width: 0;
}
.preview-3d-card-head > strong {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.preview-3d-card-head .preview-3d-card-date {
  margin-left: 0;
  order: -1;
}

/* 详情页：文案两列，左上方/右上方在右侧 */
[data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-copy:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: 14px;
  margin-bottom: 6px;
}
[data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-copy > div:nth-child(1) { grid-area: 1 / 1; }
[data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-copy > div:nth-child(2) { grid-area: 2 / 1; }
[data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-copy > div:nth-child(3) { grid-area: 3 / 1; }
[data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-copy > div:nth-child(4) { grid-area: 4 / 1; }
[data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-copy > div:nth-child(5) { grid-area: 2 / 2; }
[data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-copy > div:nth-child(6) { grid-area: 3 / 2; }
[data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-copy dd { white-space: nowrap; }
@media (max-width: 743px) {
  dialog.preview-3d-dialog .preview-3d-dialog-copy,
  dialog.preview-3d-dialog [data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-copy:not([hidden]) { display: none; }
}

/* 信息块整体上移，分割线只留一条在信息与海报之间 */
[data-draft-detail-page]:not(.checkout-layout) .preview-3d-dialog-metadata { border-top: 0; margin-top: 0; }
[data-draft-detail-page]:not(.checkout-layout) .export-model-poster.is-detail {
  border-top: 1px solid rgb(252 252 251 / 16%);
  margin-top: 10px;
  padding-top: 18px;
  gap: 14px;
}
/* 标题单行，流程说明紧跟标题 */
[data-draft-detail-page]:not(.checkout-layout) .export-model-poster.is-detail .export-model-poster-title { white-space: nowrap; }
[data-draft-detail-page]:not(.checkout-layout) .export-model-poster.is-detail .export-model-poster-sub { margin-top: -4px; }


/* 广场预览：关闭按钮在按钮条最右侧 */
.public-works-dialog .terrain-preview-toolbar [data-gallery-close] {
  position: static;
  width: auto;
  height: 100%;
  margin: 0 0 0 auto;
  padding: 8px 16px;
  border: 0;
  border-left: 1px solid rgb(252 252 251 / 24%);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-size: var(--type-t3-size);
}

/* 广场预览弹窗只保留预览窗一层边框 */
.public-works-dialog {
  border: 0;
  padding: 0;
  background: transparent;
}
.public-works-dialog .public-works-preview { padding: 0; }
.public-works-dialog .terrain-preview-window {
  border: var(--container-border);
  border-radius: var(--container-radius);
  overflow: hidden;
}

/* The top-layer dialog must also fill the screen; Safari can clip fixed children to it. */
dialog.preview-3d-dialog.preview-fullscreen-host {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}
dialog.preview-3d-dialog.preview-fullscreen-host > :not(.preview-fullscreen-fallback) { display: none; }
dialog.preview-3d-dialog > .howoo-lab-detail-content {
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
}
dialog.preview-3d-dialog .preview-3d-dialog-layout,
dialog.preview-3d-dialog [data-draft-detail-page]:not(.checkout-layout) {
  height: auto;
  min-height: 100%;
  padding: clamp(12px, 2vw, 18px);
  grid-template-rows: auto;
  align-items: start;
  box-sizing: border-box;
}
dialog.preview-3d-dialog .preview-3d-dialog-viewport {
  height: var(--preview-window-height);
  min-height: 0;
  aspect-ratio: auto;
  align-self: start;
  border-radius: var(--container-radius);
  background: rgb(5 5 5 / 86%);
}
dialog.preview-3d-dialog .preview-3d-dialog-details {
  height: var(--preview-sidebar-height);
  min-height: 0;
  min-width: 0;
  overflow: var(--preview-sidebar-overflow);
  box-sizing: border-box;
  padding: 18px;
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: rgb(5 5 5 / 86%);
}
dialog.preview-3d-dialog .preview-3d-dialog-details > :not(dialog) { flex-shrink: 0; }
@media (max-width: 743px) {
  dialog.preview-3d-dialog {
    --preview-window-height: min(400px, calc((100dvh - 40px) / 2));
    --preview-sidebar-height: auto;
    --preview-sidebar-overflow: visible;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
  dialog.preview-3d-dialog .preview-3d-dialog-layout,
  dialog.preview-3d-dialog [data-draft-detail-page]:not(.checkout-layout) {
    grid-template-rows: var(--preview-window-height) auto;
  }
}
.preview-3d-dialog .preview-3d-dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
}

/* 移动端广场弹层：只保留全屏与关闭，其余按钮无意义 */
@media (max-width: 743px) {
  [data-gallery-dialog] .terrain-preview-switch,
  [data-gallery-dialog] .terrain-preview-actions #resetView#resetView { display: none; }
  [data-gallery-dialog] .terrain-preview-actions { margin-left: 0; }
  [data-gallery-dialog] .terrain-preview-toolbar { justify-content: flex-start; }
  [data-gallery-dialog] .terrain-preview-notice { display: none; }
  [data-gallery-dialog] .terrain-preview-toolbar [data-gallery-close] { margin-left: auto; }
}

/* 导出进度：位于 3D 预览窗口下方 */
.detail-export-progress {
  position: absolute;
  z-index: 6;
  inset: auto 12px 12px;
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border: var(--container-border);
  border-radius: var(--container-radius);
  background: rgb(5 5 5 / 72%);
}
.detail-export-progress[hidden] { display: none; }
.detail-export-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--type-t3-size);
}
.detail-export-progress-track {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(255 255 255 / 14%);
}
.detail-export-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acid);
  transition: width .2s linear;
}

body.detail-modal-open { overflow: hidden; }
.work-detail-modal { width: min(1100px, 92vw); max-height: calc(100dvh - 32px); }
.work-page-dialog .preview-3d-dialog-details[data-editing="true"] { position: relative; }
.preview-3d-dialog .editor-component { display: contents; contain: none; }
.preview-3d-dialog .editor-component .personalization-sections { height: auto; overflow: visible; }
.work-page-dialog .preview-3d-dialog-details .export-model-poster { height: auto; }
.work-page-dialog.checkout-page .checkout-content { width: 100%; height: auto; min-height: 100%; padding: 0; box-sizing: border-box; }
.work-page-dialog.checkout-page .checkout-layout { display: grid; width: 100%; height: auto; min-height: 100%; grid-template-rows: auto; align-items: start; }
.work-page-dialog.checkout-page .checkout-details { height: var(--preview-sidebar-height); min-height: 0; overflow: var(--preview-sidebar-overflow); box-sizing: border-box; }
.work-page-dialog.checkout-page .checkout-preview { min-height: 0; overflow: hidden; }
.work-page-dialog.checkout-page .checkout-preview-stage { height: var(--preview-window-height); min-height: 0; }
@media (max-width: 743px) {
  .work-page-dialog.checkout-page .checkout-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
}
.work-detail-modal .preview-3d-dialog-close { position: sticky; top: 0; margin-left: auto; z-index: 2; }

.admin-work-detail-modal { width: min(1100px, 92vw); max-height: calc(100dvh - 32px); }
.admin-work-detail-modal .preview-3d-dialog-close { position: sticky; top: 0; margin-left: auto; z-index: 2; }
/* 弹窗关闭键与订单详情一致：贴在信息栏右上角，不浮在弹窗顶部 */
.preview-3d-dialog-details { position: relative; }
.preview-3d-dialog-details > .preview-3d-dialog-close {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0;
}
/* 详情弹窗只保留 3D 背景，不再显示静态预览图 */
.work-detail-modal .preview-3d-dialog-image,
.admin-work-detail-modal .preview-3d-dialog-image { display: none; }
.work-detail-modal:focus,
.admin-work-detail-modal:focus { outline: none; }

.preview-3d-dialog:focus { outline: none; }

@media (max-width: 743px) {
  dialog.preview-3d-dialog .preview-3d-dialog-layout { gap: 0; }
  dialog.preview-3d-dialog .preview-3d-dialog-viewport {
    border-radius: var(--container-radius) var(--container-radius) 0 0;
  }
  dialog.preview-3d-dialog .preview-3d-dialog-details {
    position: static;
    border-top: 0;
    border-radius: 0 0 var(--container-radius) var(--container-radius);
  }
  dialog.preview-3d-dialog .preview-3d-dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
  }
  [data-gallery-dialog] .terrain-preview-toolbar { justify-content: flex-start; }
  [data-gallery-dialog] .terrain-preview-toolbar .terrain-preview-notice { display: none; }
  [data-gallery-dialog] .terrain-preview-toolbar [data-gallery-close] { margin-left: auto; }
}


/* Shared mobile toolbar geometry is owned by terrain-preview-window.css. */
@media (max-width: 743px) {
  .preview-3d-dialog .terrain-preview-toolbar { z-index: 30; }
  .preview-3d-dialog .preview-3d-dialog-loading { z-index: 20; }
  .preview-3d-dialog .terrain-preview-close,
  [data-gallery-dialog] [data-gallery-close] {
    position: static;
    width: auto;
    min-width: 0;
    margin: 0;
  }
}

@media (max-width: 743px) {
  .preview-3d-dialog .preview-3d-dialog-viewport > img,
  .preview-3d-dialog .preview-3d-dialog-viewport > canvas { max-width: 100%; max-height: 100%; object-fit: contain; }
}

.preview-frame-dialog { width: min(1100px, 96vw); height: min(92dvh, 980px); padding: 0; border: 0; background: var(--ink); }
.preview-frame-close { position: absolute; top: 8px; right: 8px; z-index: 2; min-height: 36px; padding: 6px 14px; color: var(--cream); border: var(--container-border); border-radius: 6px; background: rgb(5 5 5 / 82%); }
.preview-frame { width: 100%; height: 100%; border: 0; background: var(--ink); }

.preview-3d-dialog .preview-3d-dialog-image { object-fit: contain; background: var(--ink); }

@media (max-width: 743px) {
  .preview-3d-dialog .terrain-preview-window { pointer-events: auto; }
  .preview-3d-dialog .terrain-preview-toolbar { pointer-events: auto; }
}
.preview-3d-dialog .terrain-preview-interaction-gate { display: none; }

@media (max-width: 743px) {
  .preview-3d-dialog .preview-3d-dialog-close { display: none; }
  .work-page-dialog .preview-3d-dialog-details > .export-model-poster { display: none; }
}

/* 结算页样式：从 legacy styles.css 迁移，顺序与原文件一致。 */
/* 迁移日期 2026-10-22；命中 95 条规则 + @media 内 3 组。 */

.checkout-page {
  --red: #d04a3a; --checkout-muted: #aaa9a2; --checkout-surface: #151613; --checkout-error: #ffb5aa; }

.checkout-page .checkout-content { font-size: var(--type-t3-size); font-weight: var(--type-t3-weight); line-height: var(--type-t3-line-height); letter-spacing: var(--type-t3-letter-spacing); }

.checkout-page :is(h1, [data-checkout-total]) { font-size: var(--type-t1-size); font-weight: var(--type-t1-weight); line-height: var(--type-t1-line-height); letter-spacing: var(--type-t1-letter-spacing); }

.checkout-page :is(h2, .checkout-purchase-buttons button, .checkout-preview footer strong) { font-size: var(--type-t2-size); font-weight: var(--type-t2-weight); line-height: var(--type-t2-line-height); letter-spacing: var(--type-t2-letter-spacing); }

.checkout-page :is(h1, h2, p, dl, dd) { margin: 0; }

.checkout-page .checkout-content { margin-block: 16px 28px; }

.checkout-page .checkout-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }

.checkout-page .checkout-layout { display: grid; width: min(1100px, 100%); margin-inline: auto; grid-template-columns: minmax(0, 1fr) minmax(0, .68fr); grid-template-rows: auto; gap: 16px; align-items: stretch; }

.checkout-page .checkout-preview { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--checkout-surface); }

.checkout-page .checkout-details { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; padding: 18px 22px; background: var(--checkout-surface); }

.checkout-page .checkout-address { padding-bottom: 20px; border-bottom: 1px solid var(--line); }

.checkout-page .checkout-address-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.checkout-page .checkout-summary { flex: 0 0 auto; padding-block: 18px; }

.checkout-page .checkout-purchase { padding-top: 8px; border-top: 0; }

.checkout-page .checkout-layout > section { min-width: 0; }

.checkout-page .checkout-layout header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.checkout-page header span, .checkout-page .checkout-muted { color: var(--checkout-muted); }

.checkout-page :is(a, button) { touch-action: manipulation; }

.checkout-page .checkout-content a { color: var(--cream); text-decoration: none; }

.checkout-page :is(.checkout-details, .checkout-preview > footer) button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--container-radius); color: var(--cream); background: transparent; font: inherit; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }

.checkout-page :is(.checkout-details, .checkout-preview > footer) button:hover { border-color: var(--acid); background: rgb(203 213 114 / 10%); }

.checkout-page :is(.checkout-details, .checkout-preview > footer) :is(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }

.checkout-page :is(.checkout-details, .checkout-preview > footer) button:disabled { opacity: .4; cursor: not-allowed; }

.checkout-page .checkout-preview > :is(header, footer) { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; }

.checkout-page .checkout-preview footer { border-top: 1px solid var(--line); }

.checkout-page .checkout-preview-stage { position: relative; flex: 1; min-height: 360px; background: radial-gradient(ellipse at center, #373c2a, #181c14 75%); }

.checkout-page .checkout-preview-host { position: absolute; inset: 0; }

.checkout-page .checkout-preview-host > .terrain-preview-window { width: 100%; height: 100%; border: 0; }

.checkout-page .checkout-preview-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.checkout-page .checkout-preview-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--cream); }

.checkout-page .checkout-preview-empty > span { display: grid; width: 70px; height: 70px; place-items: center; border: 1px solid var(--acid); border-radius: 50%; color: var(--acid); }

.checkout-page .checkout-preview-empty a { padding: 10px 20px; border-bottom: 1px solid var(--acid); }
/* 与其他链接一致的悬停反馈：更深的选择器需要自己声明 */
.checkout-page .checkout-preview-empty a:is(:hover, :focus-visible) { color: var(--acid); border-bottom-color: var(--cream); }

.checkout-page .checkout-preview-loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--checkout-surface); }

.checkout-page .checkout-preview-status { position: absolute; bottom: 14px; left: 20px; right: 20px; color: var(--checkout-error); }

.checkout-page dt { color: var(--checkout-muted); }

.checkout-page dd { color: var(--cream); overflow-wrap: anywhere; }

.checkout-page .checkout-options { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; padding-block: 12px; border-bottom: 1px solid var(--line); }

.checkout-page #checkoutNfcHelp { grid-column: 1; grid-row: 2; justify-self: start; }

.checkout-page .checkout-content .checkout-help-link { display: inline-flex; align-items: center; min-height: 24px; color: var(--acid); text-decoration: underline; text-underline-offset: 4px; }

.checkout-page .checkout-content .checkout-help-link:hover { color: var(--cream); }

.checkout-page .checkout-nfc-option, .checkout-page .checkout-quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }

.checkout-page .checkout-nfc-option { grid-column: 1; grid-row: 1; justify-content: flex-start; min-height: 32px; gap: 8px; cursor: pointer; }

.checkout-page #checkoutNfc { flex: 0 0 20px; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--acid); cursor: pointer; }

.checkout-page .checkout-quantity-row { grid-column: 2; grid-row: 1 / 3; margin: 0; justify-content: flex-end; gap: 10px; }

.checkout-page .checkout-stepper { display: flex; align-items: center; gap: 8px; }

.checkout-page .checkout-stepper button { width: 44px; padding: 0; }

.checkout-page .checkout-stepper input { width: 56px; text-align: center; appearance: textfield; }

.checkout-page .checkout-stepper input::-webkit-inner-spin-button { appearance: none; }

.checkout-page :is(input, select, textarea) { min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--container-radius); color: var(--cream); background: var(--ink); font: inherit; }

.checkout-page .checkout-address-picker { position: relative; margin-top: 12px; }

.checkout-page #checkoutAddressSelect { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 72px; padding: 12px 16px; text-align: left; background: var(--ink); }

.checkout-page .checkout-address-copy { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }

.checkout-page .checkout-address-street { color: var(--checkout-muted); }

.checkout-page .checkout-address-arrow { width: 8px; height: 8px; flex: 0 0 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }

.checkout-page #checkoutAddressSelect[aria-expanded="true"] .checkout-address-arrow { transform: rotate(225deg); }

.checkout-page #checkoutAddressList { position: absolute; z-index: 10; top: calc(100% + 8px); inset-inline: 0; max-height: min(280px, 40dvh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--line); border-radius: var(--container-radius); background: var(--checkout-surface); box-shadow: 0 12px 32px rgb(0 0 0 / 35%); }

.checkout-page #checkoutAddressList [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 10px; text-align: left; border-color: transparent; }

.checkout-page #checkoutAddressList [aria-selected="true"] { background: rgb(203 213 114 / 10%); }

.checkout-page #checkoutAddressList [aria-selected="true"]::after { content: '✓'; color: var(--acid); flex-shrink: 0; }

.checkout-page #checkoutAddressList [role="option"]:focus-visible { outline-offset: -2px; }

.checkout-page .checkout-price-list { display: grid; gap: 14px; margin-block: 18px; }

.checkout-page .checkout-price-list div, .checkout-page .checkout-total { display: flex; justify-content: space-between; gap: 16px; }

.checkout-page .checkout-total { align-items: center; padding-top: 16px; border-top: 1px solid var(--line); margin-bottom: 12px; }

.checkout-page .checkout-total-prices { display: flex; min-height: calc(var(--type-t1-size) * 2.2 + 4px); flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 4px; }

.checkout-page .checkout-total-prices del { color: #fff; font-size: calc(var(--type-t1-size) * .85); font-weight: var(--type-t2-weight); line-height: var(--type-t1-line-height); letter-spacing: var(--type-t1-letter-spacing); text-decoration-color: var(--red); text-decoration-thickness: 2px; }

.checkout-page .checkout-total strong { color: var(--acid); }

.checkout-page .checkout-purchase-buttons { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 10px; }

.checkout-page .checkout-purchase-buttons button { min-height: 48px; }

.checkout-page .checkout-content .checkout-primary { color: var(--ink); background: var(--acid); border-color: var(--acid); }

.checkout-page .checkout-content .checkout-primary:hover { color: var(--ink); background: var(--cream); }

.checkout-page .checkout-status { margin-bottom: 16px; color: var(--checkout-muted); }

.checkout-page .checkout-status:empty { display: none; }

.checkout-page .checkout-error, .checkout-page .checkout-status.is-error { color: var(--checkout-error); }

.checkout-page [hidden] { display: none; }

.checkout-page [data-checkout-price-error] { min-height: 1.6em; }

.checkout-page [data-checkout-price-error][hidden] { display: block; visibility: hidden; }

@media (min-width: 744px) and (max-width: 1023px) {
  .checkout-page .checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .checkout-page .checkout-details { padding: 18px; }
  .checkout-page .checkout-layout header { flex-wrap: wrap; }
  .checkout-page .checkout-quantity-row { flex-direction: column; align-items: flex-end; gap: 4px; }
}

@media (max-width: 743px) {
  .checkout-page .checkout-layout { display: flex; flex-direction: column; gap: 16px; }
  .checkout-page .checkout-layout > :is(section, aside) { width: 100%; }
  .checkout-page .checkout-heading { align-items: start; }
  .checkout-page .checkout-heading > a { flex-shrink: 0; }
  .checkout-page .checkout-preview > header { flex-wrap: wrap; }
  .checkout-page .checkout-details { grid-column: 1; grid-row: 2; padding: 18px; }
  .checkout-page :is(input, select, textarea) { font-size: 16px; }
  .checkout-page .checkout-preview-stage { flex: none; height: 300px; min-height: 0; }
  .checkout-page .checkout-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .checkout-page .checkout-quantity-row { grid-column: 1; grid-row: 3; flex-direction: row; justify-content: space-between; align-items: center; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-page :is(.checkout-details, .checkout-preview > footer) button { transition: none; }
}

@media (min-width: 0px) {
  html body.mode-pro :is(
    .checkout-total [data-checkout-total],
    .brand-product.brand-product,
    #stepTitle#stepTitle,
    #trackActionTitle#trackActionTitle,
    #exportSectionTitle#exportSectionTitle,
    .export-model-details-header h2,
    #aboutHowoo#aboutHowoo > h2,
    #personalizationSections#personalizationSections > .editor-overview > strong,
    .track-content-feed.track-content-feed .trail-posts-panel > header h2,
    .track-content-feed.track-content-feed .related-posts-panel > header h2,
    .privacy-sheet.privacy-sheet > header h2,
    .personal-center-header h1,
    .password-reset-page h1,
    .project-section-heading h2,
    .project-detail-copy h2,
    .wechat-message-code-panel > strong
  ) {
    font-family: inherit !important;
    font-size: var(--type-t1-size) !important;
    font-style: normal !important;
    font-weight: var(--type-t1-weight) !important;
    line-height: var(--type-t1-line-height) !important;
    letter-spacing: var(--type-t1-letter-spacing) !important;
    text-transform: none !important;
  }
  html body.mode-pro :is(
    .checkout-content h2,
    .checkout-dialog h2,
    .checkout-purchase-buttons button,
    .checkout-preview footer > strong,
    #editModel#editModel,
    #exportPrintModels#exportPrintModels,
    #renderOverlayTitle#renderOverlayTitle,
    #renderOverlayComplete#renderOverlayComplete,
    #renderOverlayRetry#renderOverlayRetry,
    #renderOverlayStatus#renderOverlayStatus,
    .export-model-choice-group > strong,
    .export-model-colors h3,
    #personalizationSections#personalizationSections .personal-section-leading > strong,
    .track-content-feed.track-content-feed .trail-post-card > span,
    .privacy-sheet.privacy-sheet h3,
    .privacy-sheet.privacy-sheet .privacy-close,
    .privacy-sheet.privacy-sheet .warning-dialog-actions > button,
    .deck-nav.deck-nav > button,
    .site-footer.site-footer .site-footer-identity strong,
    .site-footer.site-footer .site-footer-nav strong,
    .project-card-title,
    .project-detail-actions button,
    .account-form > button,
    .account-nav :is(button,a),
    .account-settings-section > h2,
    .account-settings-row > strong
  ) {
    font-family: inherit !important;
    font-size: var(--type-t2-size) !important;
    font-style: normal !important;
    font-weight: var(--type-t2-weight) !important;
    line-height: var(--type-t2-line-height) !important;
    letter-spacing: var(--type-t2-letter-spacing) !important;
    text-transform: none !important;
  }
  html body.mode-pro :is(
    .checkout-content :is(p, a, dt, dd, label, header > span),
    .checkout-content button:not(.checkout-purchase-buttons button),
    .checkout-dialog :is(p, label, button),
    #stepEyebrow#stepEyebrow,
    #trackStepKicker#trackStepKicker,
    #exportStepKicker#exportStepKicker,
    #gpxMeta#gpxMeta,
    #track-upload#track-upload .workflow-card-geo,
    #track-upload#track-upload .workflow-card-geo > *,
    #exportStageStatus#exportStageStatus,
    #exportStageGeography#exportStageGeography,
    #exportStageGeography#exportStageGeography > *,
    #aboutHowoo#aboutHowoo > p,
    #modelDimensions#modelDimensions dt,
    #modelDimensions#modelDimensions dd,
    #resetView#resetView,
    #toggleExplodedView#toggleExplodedView,
    .view-presets.view-presets button,
    #mapPanMode#mapPanMode,
    #resetMap#resetMap,
    #mapZoomIn#mapZoomIn,
    #mapZoomLabel#mapZoomLabel,
    #mapZoomOut#mapZoomOut,
    .map-ui.map-ui > span,
    .map-ui.map-ui .map-type,
    #personalizationSections#personalizationSections .personal-section-leading > span,
    #personalizationSections#personalizationSections .personal-section-summary,
    #personalizationSections#personalizationSections .personal-section-content,
    #personalizationSections#personalizationSections .personal-section-content :is(button, b, em, label, span, strong, small, p, input, select, option, output),
    #personalizationSections#personalizationSections .future-feature-list,
    #personalizationSections#personalizationSections .future-feature-list *,
    #personalizationSections#personalizationSections .height-limit-notice,
    #personalizationSections#personalizationSections .height-limit-notice *,
    .track-content-feed.track-content-feed .trail-post-card > strong,
    .track-content-feed.track-content-feed .trail-post-card > small,
    .track-content-feed.track-content-feed .related-posts-panel nav a,
    .track-content-feed.track-content-feed .related-posts-panel nav a > span,
    .privacy-sheet.privacy-sheet > header span,
    .privacy-sheet.privacy-sheet section p,
    .privacy-sheet.privacy-sheet .privacy-links a,
    .privacy-sheet.privacy-sheet > footer,
    .privacy-sheet.privacy-sheet > footer > span,
    .export-model-choice-options label,
    .export-model-colors p,
    .landcover-palette :is(li, strong, span),
    .site-footer.site-footer .site-footer-brand > p,
    .site-footer.site-footer .site-footer-nav :is(button, span, a),
    .account-nav span,
    .personal-center :is(p,small,time,dt,dd),
    .personal-center-header > div > span,
    .project-section-heading :is(span,strong),
    .project-card-delete,
    .project-card-empty,
    .project-detail-copy > span,
    .account-form :is(label,option,p),
    .account-dialog-close,
    .account-form-links :is(span,button),
    .account-auth-switch :is(span,button),
    .account-code-row > button,
    .account-settings-row p,
    .account-settings-actions > button,
    .account-session-actions > button
  ) {
    font-family: inherit !important;
    font-size: var(--type-t3-size) !important;
    font-style: normal !important;
    font-weight: var(--type-t3-weight) !important;
    line-height: var(--type-t3-line-height) !important;
    letter-spacing: var(--type-t3-letter-spacing) !important;
    text-transform: none !important;
  }
  html body.mode-pro :is(.account-form, .checkout-content, .checkout-dialog) :is(input,select,textarea) {
    font-family: inherit !important;
    font-size: var(--type-t3-size) !important;
    font-style: normal !important;
    font-weight: var(--type-t3-weight) !important;
    line-height: var(--type-t3-line-height) !important;
    letter-spacing: var(--type-t3-letter-spacing) !important;
    text-transform: none !important;
  }
}

@media (max-width: 743px) {
  html body.mode-pro :is(.account-form, .checkout-content, .checkout-dialog) :is(input,select,textarea) {
    font-size: 16px !important;
  }
}


/* 款式选择 */
.checkout-craft { margin-bottom: 14px; }
.checkout-craft-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.checkout-craft-options label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgb(252 252 251 / 22%);
  border-radius: var(--container-radius);
  cursor: pointer;
  font-size: var(--type-t3-size);
  font-weight: var(--type-t3-weight);
  line-height: var(--type-t3-line-height);
  letter-spacing: var(--type-t3-letter-spacing);
}
.checkout-craft-options label:has(input:checked) {
  border-color: var(--acid);
  background: rgb(203 213 114 / 12%);
}
.checkout-craft-options input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.checkout-craft-options em { font-style: normal; opacity: .78; }
.checkout-nfc-option.is-disabled { opacity: .45; cursor: not-allowed; }

/* NFC 角标 */
.checkout-nfc-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--acid);
  color: #14160f;
  font-size: var(--type-t3-size);
  font-weight: 700;
  line-height: 1;
}
.checkout-preview { position: relative; }

/* 结算页预览只保留一层卡片边框 */
.checkout-page .checkout-preview {
  border: 0;
  background: transparent;
  padding: 0;
}
.checkout-page .checkout-preview > footer { display: none; }
.checkout-page .checkout-preview .terrain-preview-window {
  border: var(--container-border);
  border-radius: var(--container-radius);
  overflow: hidden;
}

/* 结算页：左右等高，由内容决定高度，禁止区块内滚动 */
.checkout-page .checkout-layout { align-items: stretch; }
.checkout-page .checkout-preview,
.checkout-page .checkout-details { height: auto; }
.checkout-page .checkout-details { overflow: visible; }
.checkout-page .checkout-preview-stage { flex: 1 1 auto; min-height: 380px; }

/* NFC 角标：按钮条右侧 */
.checkout-page .terrain-preview-toolbar [data-checkout-nfc-badge] {
  position: static;
  margin-left: auto;
  align-self: center;
  margin-right: 10px;
}
/* 地址操作按钮改窄 */
.checkout-page .checkout-details .checkout-address-actions button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: var(--type-t3-size);
}
/* 购买区：按钮在剩余空间内垂直居中，长度收窄 */
.checkout-page .checkout-purchase {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: -4px 0 0;
  border-top: 0;
  background: inherit;
  transform: translateY(-10px);
}
.checkout-page .checkout-purchase-buttons {
  width: min(100%, 320px);
  grid-template-columns: 1fr;
}

.checkout-page .checkout-nfc-option { order: 1; display: inline-flex; align-items: center; gap: 8px; }
.checkout-page .checkout-help-link { order: 2; margin: 0; white-space: nowrap; }
.checkout-page .checkout-quantity-row { order: 3; margin-left: auto; white-space: nowrap; }
/* 地址操作按钮再收窄 */
.checkout-page .checkout-details .checkout-address-actions button {
  min-height: 30px;
  padding: 4px 10px;
  font-size: var(--type-t3-size);
}

/* 款式按钮整体下移 10px */
.checkout-page .checkout-craft { transform: translateY(15px); }