@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');

:root { --ink:#17261e; --muted:#748178; --line:#d8e1da; --green:#218451; --green-soft:#e7f0ea; --paper:#fbfcfa; --orange:#d84a2c; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
.actions #downloadSvg { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body { margin:0; min-width:980px; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC",Arial,sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.designer { min-height:100vh; display:flex; flex-direction:column; }
.app-header { height:84px; display:grid; grid-template-columns:300px 1fr 230px; align-items:center; padding:0 28px; border-bottom:1px solid var(--line); background:#fff; }
.brand { font-size:21px; letter-spacing:-.04em; }
.workflow { height:100%; display:flex; align-items:stretch; justify-content:center; gap:14px; }
.workflow-step { position:relative; min-width:150px; padding:0 25px; border:0; color:#859188; background:transparent; font-size:17px; font-weight:700; }
.workflow-step::after { content:""; position:absolute; right:11px; bottom:15px; left:11px; height:3px; background:var(--green); transform:scaleX(0); transition:.18s; }
.workflow-step.active { color:var(--ink); box-shadow:inset 0 0 0 3px #bfddcb; }.workflow-step.active::after { transform:scaleX(1); }
.language { justify-self:end; display:flex; overflow:hidden; border:1px solid var(--line); border-radius:9px; }.language button { height:44px; padding:0 13px; border:0; color:#758078; background:#f9faf8; font-weight:700; }.language .selected { color:var(--ink); background:white; box-shadow:0 1px 5px #273d3018; }
.split-stage { height:min(65vh,720px); min-height:510px; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.model-pane,.map-pane { position:relative; overflow:hidden; }
.model-pane { background:linear-gradient(135deg,#d5e3e4 0%,#f1f1e7 56%,#aabda1 130%); border-right:1px solid var(--line); }
.map-pane { background:#4f6d4d; cursor:default; touch-action:none; }.map-pane.pan-enabled { cursor:grab; }.map-pane.is-panning { cursor:grabbing; }
.scene { position:absolute; inset:0; overflow:hidden; }.iso-terrain-canvas { display:none; width:100%; height:100%; touch-action:none; cursor:grab; }.iso-terrain-canvas:active { cursor:grabbing; }.scene.terrain-ready .iso-terrain-canvas { display:block; }.scene.terrain-ready .hex-model { display:none; }.hex-model { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,#dfe8d1 0 25%,transparent 26%); }
.render-overlay { position:absolute; z-index:8; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; color:#fff; background:#12221bd9; backdrop-filter:blur(7px); text-align:center; }.render-overlay strong { font-size:17px; }.render-overlay span { color:#dce8df; font-size:13px; }.render-spinner { width:58px; height:58px; border:3px solid #ffffff55; border-top-color:#ef6a4b; border-radius:50%; animation:render-spin .8s linear infinite; }@keyframes render-spin { to { transform:rotate(360deg); } }
.pane-label,.terrain-status,.map-ui { position:absolute; z-index:3; top:20px; padding:9px 14px; border:1px solid #d6dfd7; border-radius:8px; background:#fffffff2; box-shadow:0 2px 7px #17261e20; font-weight:800; }
.pane-label { left:20px; }.terrain-status { right:20px; color:#617167; font-size:14px; }.terrain-status i { display:inline-block; width:9px; height:9px; margin-right:8px; border-radius:50%; background:#24915a; }
.model-refresh-notice { position:absolute; z-index:7; top:72px; left:50%; transform:translateX(-50%); padding:8px 13px; border:1px solid #c9d8ce; border-radius:999px; color:#355342; background:#fffffff2; box-shadow:0 3px 12px #1a2d2226; font-size:12px; font-weight:800; pointer-events:none; }.scene.terrain-refreshing .iso-terrain-canvas { opacity:.74; filter:saturate(.72); transition:opacity .16s,filter .16s; }
.view-actions { position:absolute; z-index:4; bottom:20px; left:20px; display:flex; gap:9px; }.view-presets { display:flex; overflow:hidden; border-radius:8px; box-shadow:0 2px 7px #17261e20; }.view-presets button { min-height:42px; padding:0 13px; border:0; border-left:1px solid #d6dfd7; color:#607066; background:#fffffff2; font-size:13px; font-weight:800; }.view-presets button:first-child { border-left:0; }.view-presets button.active { color:#fff; background:var(--green); }
.view-actions #toggleExplodedView.active { border-color:var(--green); color:#fff; background:var(--green); }
.map-reset { position:absolute; z-index:6; top:72px; right:250px; min-height:38px; padding:0 12px; border:1px solid #d2dfd5; border-radius:8px; color:#355341; background:#fffffff2; font-size:12px; font-weight:800; box-shadow:0 2px 7px #17261e20; }
.soft-button,.primary-button { min-height:44px; padding:0 18px; border-radius:8px; font-weight:800; }.soft-button { border:1px solid #d5dfd7; color:var(--ink); background:white; }.primary-button { border:1px solid var(--green); color:#fff; background:var(--green); }.primary-button:disabled { opacity:.6; cursor:wait; }
.map-tiles { --map-pan-x:0px; --map-pan-y:0px; position:absolute; z-index:0; inset:0; overflow:hidden; background:linear-gradient(135deg,#587a53,#2f5d42 45%,#7b8153); pointer-events:auto; user-select:none; }.map-tiles > img { position:absolute; width:256px; height:256px; object-fit:cover; image-rendering:auto; filter:saturate(.94) contrast(1.08); transform:translate3d(var(--map-pan-x),var(--map-pan-y),0); will-change:transform; pointer-events:none; user-select:none; -webkit-user-drag:none; }.map-tiles .leaflet-tile { filter:saturate(.94) contrast(1.08); }.map-tiles .leaflet-control-scale { margin:0 0 20px 20px; }.map-tiles .leaflet-control-scale-line { border-color:#111; color:#111; background:#fffffff0; font-weight:800; }
.map-search { position:absolute; z-index:5; top:20px; right:118px; left:90px; display:grid; grid-template-columns:1fr auto; overflow:hidden; min-height:44px; border:1px solid #d6dfd7; border-radius:8px; background:#fff; box-shadow:0 2px 8px #0003; }.map-search input { min-width:0; padding:0 15px; border:0; outline:0; color:var(--ink); background:#fff; }.map-search button { min-width:74px; border:0; border-left:1px solid var(--line); color:var(--ink); background:#f8faf8; font-weight:800; }.map-search:focus-within { box-shadow:0 0 0 3px #b9ddc6,0 2px 8px #0003; }
.map-pan-tool { position:absolute; z-index:6; top:76px; right:154px; min-height:38px; padding:0 13px; border:0; border-radius:8px; color:#526158; background:#fffffff2; box-shadow:0 2px 8px #0003; font-size:13px; font-weight:800; }.map-pan-tool.active { color:#fff; background:var(--green); }.map-pan-tool span { margin-left:4px; }
.map-zoom { position:absolute; z-index:6; top:76px; right:20px; display:grid; grid-template-columns:38px minmax(58px,auto) 38px; overflow:hidden; min-height:38px; border-radius:8px; background:#fffffff2; box-shadow:0 2px 8px #0003; }.map-zoom button { border:0; color:#176f44; background:#fff; font-size:20px; font-weight:800; }.map-zoom button:hover,.map-zoom button:focus-visible { background:#edf7f0; }.map-zoom output { display:grid; place-items:center; padding:0 8px; border-right:1px solid var(--line); border-left:1px solid var(--line); color:#425349; background:#f7faf7; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.map-scale { position:absolute; z-index:5; bottom:20px; left:20px; display:grid; gap:4px; width:max-content; color:#fff; font-size:10px; font-weight:900; line-height:1; text-shadow:0 1px 3px #000; pointer-events:none; }.map-scale i { display:block; width:96px; height:7px; border:2px solid #fff; border-top:0; box-sizing:border-box; filter:drop-shadow(0 1px 1px #000); }
.map-zoom button:disabled { color:#aab5ae; background:#f4f6f4; cursor:not-allowed; }
.map-ui { right:20px; left:20px; display:flex; justify-content:space-between; align-items:center; border:0; background:transparent; box-shadow:none; color:#fff; text-shadow:0 1px 3px #000; }.map-ui>span { margin-top:62px; }.map-ui>div { overflow:hidden; border-radius:7px; box-shadow:0 2px 8px #0003; }.map-type { min-height:38px; padding:0 12px; border:0; color:#708078; background:#fffffff0; font-weight:800; }.map-type.selected { color:#1a7547; background:#fff; }
.map-overlay { position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:visible; touch-action:none; pointer-events:none; }.map-overlay .map-mask { fill:#07110b8f; pointer-events:none; }.map-overlay .map-selection { fill:none; stroke:white; stroke-width:.9; vector-effect:non-scaling-stroke; filter:drop-shadow(0 1px 1px #000); pointer-events:none; }.map-overlay #mapTrail { fill:none; stroke:#ee5d41; stroke-width:.75; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 1px #000); pointer-events:none; }.map-drag-hint { position:absolute; z-index:3; bottom:46px; left:50%; transform:translateX(-50%); padding:7px 11px; border:1px solid #ffffff55; border-radius:999px; color:#fff; background:#152a1fb8; font-size:11px; font-weight:800; pointer-events:none; }.map-help { position:absolute; z-index:3; right:20px; bottom:16px; left:20px; margin:0; color:#fff; font-size:12px; font-weight:600; text-align:center; text-shadow:0 1px 3px #000; }
.control-deck { position:relative; min-height:218px; padding:24px 176px 78px 28px; background:#fff; }.step-panel { display:none; grid-template-columns:310px repeat(3,minmax(180px,1fr)); gap:18px; align-items:start; }.step-panel.active { display:grid; }.step-copy h2 { margin:0 0 6px; font-size:22px; letter-spacing:-.04em; }.step-copy p,.source-note,.render-status { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }.shape-options { display:flex; gap:9px; align-items:center; }.shape-option { min-width:118px; height:56px; border:1px solid #d5dfd7; border-radius:9px; color:#65736a; background:white; font-size:16px; font-weight:800; }.shape-option.active { border-color:var(--green); color:#167245; background:#edf8f0; }.shape-option:hover { border-color:#91b8a0; }.shape-option:focus-visible { outline:3px solid #b9ddc6; outline-offset:2px; }
.control-deck { padding-right:28px; }.step-panel[data-panel="style"] { grid-template-columns:280px 370px 220px minmax(220px,1fr); }
.field { display:block; color:#44554b; font-size:14px; font-weight:800; }.field output { float:right; color:var(--green); font-variant-numeric:tabular-nums; }.field input,.select-control { display:block; width:100%; min-height:44px; margin-top:10px; padding:9px 11px; border:1px solid #ccd9cf; border-radius:8px; color:var(--ink); background:#fff; }.field input[type=range] { padding:0; accent-color:var(--green); }.compact { align-self:center; }
.measurements { display:flex; align-items:center; gap:20px; }.measurements div { min-width:92px; padding-left:17px; border-left:1px solid var(--line); }.measurements div:first-child { padding-left:0; border-left:0; }.measurements span,.render-summary span { display:block; color:#7a887f; font-size:11px; font-weight:600; }.measurements strong,.render-summary strong { font-size:15px; }
.upload-button { display:grid; place-items:center; min-height:46px; border:1px solid #c8d8cd; border-radius:8px; background:white; font-weight:800; cursor:pointer; }.source-note strong { color:#466153; }.check-field { display:flex; align-items:center; gap:10px; min-height:45px; color:#314839; font-weight:800; }.check-field input { width:22px; height:22px; accent-color:var(--green); }
.step-panel[data-panel="location"] { grid-template-columns:280px minmax(300px,1fr) minmax(250px,1fr) 220px; }.source-card { min-height:90px; padding:12px 14px; border:1px solid #dbe4dd; border-radius:9px; background:#f8faf8; }.source-fields { display:grid; grid-template-columns:minmax(190px,1fr) minmax(180px,1fr); gap:14px; align-items:center; }.source-fields p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }.source-fields .field input { margin-top:4px; }.source-note { align-self:center; }
.render-summary { display:flex; gap:20px; }.render-summary div { min-width:110px; padding-left:16px; border-left:1px solid var(--line); }.render-summary div:first-child { padding-left:0; border-left:0; }.actions { display:flex; flex-wrap:wrap; gap:8px; grid-column:2 / -1; }.actions button { flex:1; min-width:145px; font-size:13px; }.deck-nav { position:absolute; right:28px; bottom:25px; display:flex; gap:10px; }
.step-panel[data-panel="render"] { grid-template-columns:280px minmax(360px,1fr) 230px minmax(270px,1fr); }
.designer>footer { padding:13px 20px; border-top:1px solid var(--line); color:#718076; background:#f8faf7; font-size:12px; text-align:center; }
@media(max-width:1120px) { body { min-width:760px; }.app-header { grid-template-columns:240px 1fr 170px; }.workflow-step { min-width:100px; padding:0 10px; }.control-deck { padding-right:28px; }.step-panel.active { grid-template-columns:250px repeat(2,minmax(170px,1fr)); }.deck-nav { position:static; justify-content:flex-end; margin-top:20px; } }

/* Guided-flow redesign --------------------------------------------------- */
:root {
  --ink:#17251d; --muted:#68776e; --line:#dce4de; --green:#247a4b;
  --green-dark:#175c38; --green-soft:#edf6f0; --cream:#f5f3ea;
  --orange:#db6344; --shadow:0 12px 34px #18362613;
}
body { min-width:900px; background:#f4f6f2; }
.designer { min-height:100vh; }
.app-header {
  position:sticky; z-index:20; top:0; height:74px; grid-template-columns:260px 1fr 190px;
  padding:0 30px; border-bottom:1px solid #dce3dd; background:#fffdfbfa; backdrop-filter:blur(14px);
}
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:19px; letter-spacing:-.03em; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; color:#fff; background:var(--green); font-size:18px; }
.brand small { display:block; margin-top:1px; color:#7d8a82; font-size:10px; font-weight:600; letter-spacing:.08em; }
.workflow { gap:0; align-items:center; }
.workflow-step { min-width:118px; height:74px; padding:0 20px; display:flex; align-items:center; justify-content:center; gap:8px; color:#89948d; font-size:14px; }
.workflow-step b { display:grid; width:23px; height:23px; place-items:center; border:1px solid #cbd5ce; border-radius:50%; font-size:11px; }
.workflow-step::before { content:""; position:absolute; top:50%; right:-14px; width:28px; height:1px; background:#d9e1db; }
.workflow-step:last-child::before { display:none; }
.workflow-step::after { right:18px; bottom:0; left:18px; height:3px; }
.workflow-step.active { color:var(--green-dark); box-shadow:none; }
.workflow-step.active b { border-color:var(--green); color:#fff; background:var(--green); }
.mode-switch { justify-self:end; display:grid; grid-template-columns:1fr 1fr; padding:3px; border:1px solid #d6dfd8; border-radius:11px; background:#eef2ee; }
.mode-switch button { min-width:76px; height:34px; border:0; border-radius:8px; color:#69776f; background:transparent; font-size:12px; font-weight:800; }
.mode-switch button.selected { color:var(--green-dark); background:#fff; box-shadow:0 2px 7px #1f3d2c17; }

.workspace-heading { min-height:76px; display:grid; grid-template-columns:310px 1fr auto; align-items:center; gap:24px; padding:14px 30px; border-bottom:1px solid var(--line); background:#f8faf7; }
.workspace-heading>div:first-child { display:flex; flex-direction:column; }
.workspace-heading span { color:#7b8980; font-size:11px; font-weight:800; letter-spacing:.05em; }
.workspace-heading strong { margin-top:2px; font-size:18px; letter-spacing:-.03em; }
.workspace-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.preset-chip { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #d7e4da; border-radius:999px; background:#fff; white-space:nowrap; }
.preset-chip i { width:7px; height:7px; border-radius:50%; background:var(--green); }
.preset-chip span { color:#456354; font-size:10px; }
.mode-pro .preset-chip span { font-size:0; }.mode-pro .preset-chip span::after { content:"普通模式 · 参数默认锁定"; font-size:10px; }

.split-stage { height:clamp(450px,56vh,660px); min-height:450px; margin:0; border-bottom:1px solid #dbe3dc; background:#fff; }
.model-pane { background:radial-gradient(circle at 50% 44%,#f5f3e9 0,#dfe7df 58%,#bccbc0 115%); }
.model-pane,.map-pane { transition:box-shadow .16s ease,filter .16s ease; }
.model-pane.interaction-active,.map-pane.interaction-active { box-shadow:inset 0 0 0 4px #238653, inset 0 0 0 7px #ffffffa8; }
.interaction-gate { position:absolute; z-index:1; inset:0; display:block; width:100%; padding:0; border:0; cursor:pointer; background:transparent; transition:opacity .16s ease; }
.interaction-gate::before { content:none; }
.interaction-active>.interaction-gate { visibility:hidden; opacity:0; pointer-events:none; }
.render-overlay { z-index:10; }
.quality-checks li.is-working i { color:#fff; background:#819087; animation:render-pulse 1s ease-in-out infinite; }
.quality-checks li.failed i { color:#fff; background:#d35745; }
@keyframes render-pulse { 50% { transform:scale(.86); opacity:.65; } }
.pane-label,.map-caption { position:absolute; z-index:5; top:18px; left:18px; display:flex; flex-direction:column; padding:9px 12px; border:1px solid #d9e2db; border-radius:10px; color:var(--ink); background:#fffffff0; box-shadow:0 4px 14px #1e3c2b15; }
.pane-label span,.map-caption span { font-size:13px; font-weight:900; }.pane-label small,.map-caption small { margin-top:1px; color:#77857c; font-size:9px; font-weight:700; }
.terrain-status { top:18px; right:18px; border-radius:10px; font-size:11px; }
.empty-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:radial-gradient(ellipse at center,#f4f5ec 0 16%,transparent 45%); }
.empty-preview .empty-icon { display:grid; width:72px; height:72px; place-items:center; border:1px solid #b9c9bd; border-radius:50%; color:#789082; font-size:30px; }
.empty-preview strong { color:#52665a; font-size:15px; }.empty-preview small { color:#8b978f; font-size:11px; }
.view-actions { bottom:18px; left:18px; }.view-presets button { min-height:38px; font-size:11px; }
.soft-button,.primary-button { min-height:40px; border-radius:9px; font-size:12px; }
.primary-button { background:var(--green); }.primary-button:hover { background:var(--green-dark); }

.map-caption { color:#fff; border-color:#ffffff3b; background:#15241cbb; box-shadow:0 4px 14px #0002; }.map-caption small { color:#d8e0da; }
.map-search { top:18px; right:18px; left:178px; min-height:42px; }
.map-pan-tool { top:72px; right:154px; }
.map-zoom { top:72px; right:18px; }
.map-ui { top:112px; right:18px; left:18px; }
.map-ui>span { margin-top:0; }
.map-drag-hint { bottom:40px; }.map-help { bottom:13px; }
.mode-normal .pro-only { display:none !important; }

.control-deck { min-height:306px; padding:0 30px 76px; background:#fff; }
.step-panel,.step-panel.active { grid-template-columns:1fr; gap:18px; }
.step-panel { display:none; padding-top:22px; }.step-panel.active { display:grid; }
.panel-intro { display:flex; align-items:flex-start; gap:14px; }
.panel-number { display:grid; width:36px; height:36px; flex:0 0 auto; place-items:center; border-radius:10px; color:var(--green); background:var(--green-soft); font-size:11px; font-weight:900; }
.panel-intro h2 { margin:0 0 3px; font-size:20px; letter-spacing:-.04em; }.panel-intro p { margin:0; color:var(--muted); font-size:12px; }

.track-source-grid { display:grid; grid-template-columns:minmax(360px,1fr); gap:12px; align-items:stretch; }
.track-source-grid.single-source { max-width:760px; }
.source-card { min-height:120px; padding:16px; border:1px solid #dbe4dd; border-radius:14px; background:#fafbf9; }
.primary-source { border-color:#bad2c1; background:#f5faf6; }
.card-heading { display:flex; align-items:center; gap:10px; }.card-heading>div { display:flex; flex-direction:column; }.card-heading strong { font-size:13px; }.card-heading small { color:#829088; font-size:10px; }
.source-icon { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; color:#fff; background:var(--green); font-size:15px; font-weight:900; }
.link-entry { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:12px; }.link-entry input { min-width:0; height:42px; padding:0 12px; border:1px solid #cbd8ce; border-radius:9px; outline:0; background:#fff; font-size:12px; }.link-entry input:focus { border-color:#6ca283; box-shadow:0 0 0 3px #d8ebde; }
.inline-status { margin:7px 0 0; color:#7d8b82; font-size:10px; line-height:1.5; }.inline-status.success { color:#23744a; }.inline-status.error { color:#bd432f; }
.source-divider { position:relative; display:grid; place-items:center; color:#98a39c; font-size:10px; }.source-divider::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#e0e6e1; }.source-divider span { z-index:1; padding:6px 0; background:#fff; }
.upload-source { display:grid; grid-template-columns:minmax(220px,1fr) auto minmax(160px,.7fr); align-items:center; gap:14px; }.upload-source .card-heading { grid-column:auto; }.upload-source .upload-button { min-height:42px; padding:0 20px; color:var(--green-dark); background:#fff; font-size:11px; }.upload-source p { margin:0; color:#7e8b83; font-size:10px; }
.track-summary { display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1.4fr) auto; align-items:center; gap:20px; padding:12px 14px; border-radius:11px; background:#f4f6f3; }.track-summary div { display:flex; flex-direction:column; }.track-summary span { color:#869289; font-size:9px; }.track-summary strong { overflow:hidden; margin-top:2px; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }

.compose-layout { display:grid; grid-template-columns:minmax(430px,1.4fr) minmax(250px,.7fr); gap:18px; }
.option-group { min-width:0; margin:0; padding:0; border:0; }.option-group legend { margin-bottom:9px; color:#78867d; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.shape-options { gap:8px; }.shape-option { position:relative; min-width:0; width:100%; height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:12px; font-size:11px; }.shape-option em { position:absolute; top:6px; right:6px; padding:2px 5px; border-radius:999px; color:#fff; background:var(--green); font-size:8px; font-style:normal; }
.shape-symbol { display:block; width:34px; height:30px; border:2px solid currentColor; }.circle-symbol { width:31px; height:31px; border-radius:50%; }.hex-symbol { border:0; background:currentColor; clip-path:polygon(100% 50%,75% 6.7%,25% 6.7%,0 50%,25% 93.3%,75% 93.3%); }.hex-symbol::after { content:""; display:block; width:30px; height:26px; margin:2px; background:#fff; clip-path:inherit; }.polaroid-symbol { height:34px; border-bottom-width:7px; border-radius:2px; }
.frame-group { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.frame-group legend { grid-column:1/-1; }.choice-button { min-height:88px; padding:12px; display:flex; flex-direction:column; justify-content:center; border:1px solid #d7e1da; border-radius:12px; color:var(--ink); background:#fff; text-align:left; }.choice-button:hover { border-color:#8db59c; background:#f6faf7; }.choice-button strong { font-size:11px; }.choice-button small { margin-top:3px; color:#829087; font-size:9px; }
.preset-overview { padding:14px; border:1px solid #d9e3db; border-radius:12px; background:#f7f8f5; }.preset-overview>span { color:#7f8c84; font-size:9px; }.preset-overview>strong { display:block; margin:3px 0 10px; font-size:12px; }.preset-overview dl { display:grid; grid-template-columns:repeat(4,1fr); margin:0; }.preset-overview dl div { padding-left:10px; border-left:1px solid #dce3dd; }.preset-overview dl div:first-child { padding-left:0; border:0; }.preset-overview dt { color:#8a968e; font-size:8px; }.preset-overview dd { margin:2px 0 0; font-size:10px; font-weight:900; }

.pro-panel { padding:0 14px 14px; border:1px solid #d7e1d9; border-radius:12px; background:#fafcf9; }.pro-panel summary { padding:12px 0; color:#365a44; font-size:11px; font-weight:900; cursor:pointer; }.parameter-grid { display:grid; grid-template-columns:repeat(6,minmax(130px,1fr)); gap:12px; }.field { font-size:10px; }.field input,.select-control { min-height:38px; margin-top:5px; padding:7px 9px; border-radius:8px; font-size:11px; }.measurements { margin-top:13px; }.measurements span { font-size:8px; }.measurements strong { font-size:11px; }.parameter-fact { padding:8px 10px; border:1px solid #dfe6e0; border-radius:8px; background:#fff; }.parameter-fact span { display:block; color:#859188; font-size:8px; }.parameter-fact strong { font-size:11px; }

.personalize-layout { display:grid; grid-template-columns:260px minmax(420px,1fr) 250px; gap:20px; align-items:start; }
.template-picker { display:grid; gap:7px; }.template-option { min-height:54px; padding:7px 10px; display:flex; align-items:center; gap:10px; border:1px solid #d8e1da; border-radius:11px; color:var(--ink); background:#fff; text-align:left; }.template-option>b { display:grid; width:28px; height:28px; place-items:center; border-radius:8px; color:#6c7b72; background:#eef2ee; }.template-option>span { display:flex; flex-direction:column; }.template-option strong { font-size:11px; }.template-option small { color:#849188; font-size:9px; }.template-option.active { border-color:#75a487; background:#f1f8f3; }.template-option.active>b { color:#fff; background:var(--green); }
.route-visibility-control { display:flex; align-items:flex-start; gap:9px; padding:10px 11px; border:1px solid #d8e1da; border-radius:11px; color:var(--ink); background:#f8faf8; cursor:pointer; }.route-visibility-control input { width:18px; height:18px; margin:1px 0 0; accent-color:var(--green); }.route-visibility-control span { display:grid; gap:2px; }.route-visibility-control strong { font-size:11px; }.route-visibility-control small { color:#78877d; font-size:9px; line-height:1.45; }
.edge-copy-editor { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }.edge-field { position:relative; }.edge-field label { display:block; margin-bottom:4px; color:#718077; font-size:9px; font-weight:800; }.edge-field input { width:100%; height:38px; padding:0 66px 0 10px; border:1px solid #cfdbd1; border-radius:8px; color:var(--ink); background:#fff; font-size:11px; }.edge-field output { position:absolute; right:9px; bottom:11px; color:#4b8b65; font-size:8px; font-weight:800; }.edge-field.too-long input { border-color:#d65d48; box-shadow:0 0 0 2px #f7dcd6; }.edge-field.too-long output { color:#c44330; }.edge-copy-editor>.inline-status { grid-column:1/-1; }
.hex-text-map { display:flex; flex-direction:column; align-items:center; padding:8px 12px; border:1px solid #dbe3dd; border-radius:12px; background:#f7f8f4; }.hex-text-map svg { width:180px; height:155px; overflow:visible; }.hex-text-map path { fill:#e3ebe4; stroke:#5f7869; stroke-width:1.5; }.hex-text-map text { fill:#244b34; font-size:9px; font-weight:900; text-anchor:middle; }.hex-text-map small { color:#849188; font-size:8px; }

.finish-layout { display:grid; grid-template-columns:1.2fr 1fr .8fr; gap:16px; align-items:start; }.render-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:15px; border:1px solid #dce4de; border-radius:12px; background:#f7f9f6; }.render-summary div { min-width:0; }.render-summary span { font-size:8px; }.render-summary strong { overflow:hidden; display:block; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.quality-checks { display:grid; gap:6px; margin:0; padding:0; list-style:none; }.quality-checks li { display:flex; align-items:center; gap:9px; min-height:44px; padding:7px 9px; border:1px solid #dde4df; border-radius:10px; }.quality-checks i { display:grid; width:25px; height:25px; flex:0 0 auto; place-items:center; border-radius:50%; color:#fff; background:#819087; font-size:9px; font-style:normal; font-weight:900; }.quality-checks .passed i { background:var(--green); }.quality-checks span { display:flex; flex-direction:column; }.quality-checks strong { font-size:10px; }.quality-checks small { color:#839087; font-size:8px; }.quality-checks .failed { border-color:#e0a699; background:#fff7f5; }.quality-checks .failed i { background:#c84934; }
.render-callout { padding:14px; border-radius:12px; color:#fff; background:#203d2d; }.render-callout .primary-button { width:100%; border-color:#70a783; background:#fff; color:var(--green-dark); }.render-callout p { margin-top:8px; color:#d6e1da; font-size:9px; }.actions { grid-column:1/-1; }.actions button { min-width:130px; }
.deck-nav { right:30px; bottom:20px; }.deck-nav .primary-button { min-width:145px; }
.designer>footer { display:flex; justify-content:center; align-items:center; gap:28px; padding:11px 20px; }
.designer>footer button { padding:0; border:0; border-bottom:1px solid currentColor; color:#286e49; background:transparent; font-size:inherit; font-weight:800; }
.designer>footer button:hover,.designer>footer button:focus-visible { color:#174e32; }

.privacy-dialog { width:min(1180px,calc(100vw - 120px)); max-width:none; max-height:calc(100vh - 48px); padding:0; overflow:auto; border:0; border-radius:18px; color:var(--ink); background:#fff; box-shadow:0 32px 90px #101c1666; }
.privacy-dialog::backdrop { background:#17231d99; backdrop-filter:blur(7px); }
.privacy-sheet { padding:52px 58px 34px; }
.privacy-sheet>header { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; margin-bottom:34px; }
.privacy-sheet>header span { color:#6f7f75; font-size:10px; font-weight:900; letter-spacing:.12em; }
.privacy-sheet h2 { margin:6px 0 0; font-size:38px; line-height:1.22; letter-spacing:-.04em; }
.privacy-close { min-width:66px; height:40px; flex:0 0 auto; border:1px solid #b8d0c0; border-radius:999px; color:#245f40; background:#f5faf6; font-size:12px; font-weight:900; }
.privacy-close:hover,.privacy-close:focus-visible { border-color:#5d9672; background:#e9f4ec; outline:none; }
.privacy-sheet>section+section { margin-top:30px; }
.privacy-sheet h3 { margin:0 0 9px; font-size:20px; }
.privacy-sheet p { margin:0; color:#5f6d64; font-size:16px; line-height:1.85; }
.privacy-sheet p+p { margin-top:8px; }
.privacy-links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:14px; }
.privacy-links a { color:#17633c; font-size:15px; font-weight:800; text-underline-offset:3px; }
.privacy-sheet>footer { display:flex; justify-content:space-between; gap:20px; margin-top:32px; padding-top:16px; border-top:1px solid #e3e9e4; color:#89958d; font-size:10px; }

@media(max-width:720px) {
  .privacy-dialog { width:calc(100vw - 24px); max-height:calc(100vh - 24px); border-radius:14px; }
  .privacy-sheet { padding:28px 24px 22px; }
  .privacy-sheet>header { margin-bottom:26px; }
  .privacy-sheet h2 { font-size:24px; }
  .privacy-sheet p { font-size:13px; }
}

@media(max-width:1180px) {
  .app-header { grid-template-columns:220px 1fr 170px; }.workflow-step { min-width:96px; padding:0 12px; }
  .workspace-heading { grid-template-columns:270px 1fr; }.preset-chip { display:none; }
  .track-source-grid { grid-template-columns:1fr; }.compose-layout { grid-template-columns:1.2fr 1fr; }
  .personalize-layout { grid-template-columns:220px 1fr; }.hex-text-map { display:none; }.parameter-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:900px) {
  body { min-width:0; }.app-header { grid-template-columns:180px minmax(0,1fr) 150px; padding:0 16px; }.workflow-step span { display:none; }.workflow-step { min-width:58px; }
  .workspace-heading { padding:12px 18px; }.split-stage { grid-template-columns:1fr 1fr; }.control-deck { padding-right:18px; padding-left:18px; }
}

/* Desktop studio: one focused workspace, with controls kept in the viewport. */
/* Chrome 在高缩放或 Retina 截图下，实际 CSS 视口可能小于 901px；
   只要仍是横向双栏，就使用紧凑工作台。 */
@media (min-width:721px) {
  /* 不能把整个工作台锁死在一个视口高度：较矮的浏览器窗口会把预览或控制区裁掉。 */
  body { min-height:100dvh; overflow-x:hidden; overflow-y:auto; }
  .designer { min-height:100dvh; height:auto; overflow:visible; }
  .app-header { height:58px; grid-template-columns:190px 1fr 160px; padding:0 22px; }
  .brand { gap:8px; font-size:16px; }.brand-mark { width:29px; height:29px; border-radius:8px; font-size:15px; }.brand small { display:none; }
  .workflow-step { min-width:88px; height:58px; padding:0 12px; gap:6px; font-size:12px; }.workflow-step b { width:19px; height:19px; font-size:9px; }.workflow-step::before { right:-10px; width:20px; }.workflow-step::after { right:12px; left:12px; }
  .mode-switch button { min-width:62px; height:29px; font-size:11px; }
  .workspace-heading { min-height:46px; grid-template-columns:1fr auto; padding:8px 22px; background:#fff; }
  .workspace-heading span { font-size:9px; }.workspace-heading strong { margin:0; font-size:14px; }.workspace-heading p,.preset-chip { display:none; }
  .workspace-heading,.deck-nav { display:none; }
  .split-stage { height:auto; min-height:360px; flex:1 1 360px; }
  .pane-label,.map-caption { top:14px; left:14px; padding:6px 9px; border:0; border-radius:7px; background:#13231bc7; color:#fff; box-shadow:none; }.pane-label span,.map-caption span { font-size:10px; letter-spacing:.04em; }
  .terrain-status { display:none; }
  .view-actions { bottom:12px; left:12px; gap:5px; }.view-actions .soft-button,.view-presets button { min-height:32px; padding:0 9px; border-radius:7px; font-size:10px; }.view-presets { border-radius:7px; }
  .view-presets { display:none; }
  .map-ui { top:14px; right:14px; left:auto; padding:0; }.map-ui>span { display:none; }.map-ui>div { box-shadow:0 2px 8px #0005; }.map-type { min-height:30px; padding:0 9px; font-size:10px; }
  .map-pan-tool { top:auto; right:156px; bottom:12px; min-height:32px; padding:0 9px; border-radius:7px; font-size:10px; }.map-pan-tool span { display:none; }
  .map-pan-tool { right:auto; left:70px; }
  .map-reset { top:auto; right:auto; bottom:12px; left:12px; min-height:32px; padding:0 9px; border:0; border-radius:7px; font-size:10px; }
  .map-zoom { top:auto; right:12px; bottom:12px; grid-template-columns:32px 52px 32px; min-height:32px; border-radius:7px; }.map-zoom button { font-size:16px; }.map-zoom output { padding:0 4px; font-size:10px; }
  .map-scale { bottom:50px; left:12px; font-size:8px; }.map-scale i { width:72px; height:6px; }
  .map-search { top:12px; left:74px; right:112px; min-height:32px; }.map-search input { padding:0 9px; font-size:10px; }.map-search button { min-width:52px; font-size:10px; }
  .model-refresh-notice { top:14px; left:auto; right:14px; transform:none; padding:6px 9px; border-radius:7px; font-size:10px; }
  .control-deck { flex:0 0 176px; min-height:176px; padding:13px 22px 48px; border-top:1px solid var(--line); overflow:hidden; }
  .step-panel,.step-panel.active { grid-template-columns:170px minmax(0,1fr); gap:16px; align-items:center; padding:0; }
  .panel-intro { gap:9px; align-self:start; }.panel-number { width:28px; height:28px; border-radius:8px; font-size:9px; }.panel-intro h2 { margin:0; font-size:15px; line-height:1.35; }.panel-intro p { display:none; }
  .track-source-grid,.track-source-grid.single-source { max-width:none; }.source-card { min-height:64px; padding:10px 12px; border-radius:10px; }.upload-source { grid-template-columns:minmax(180px,1fr) auto minmax(130px,.65fr); gap:10px; }.source-icon { width:25px; height:25px; border-radius:7px; font-size:13px; }.card-heading strong { font-size:11px; }.card-heading small { display:none; }.upload-source .upload-button { min-height:34px; padding:0 12px; font-size:10px; }.upload-source p { font-size:9px; }
  .track-summary { grid-template-columns:1fr 1fr auto; gap:10px; margin-top:8px; padding:7px 9px; border-radius:8px; }.track-summary span { display:none; }.track-summary strong { margin:0; font-size:9px; }.track-summary .soft-button { min-height:30px; padding:0 9px; font-size:10px; }
  .step-panel[data-panel="track"],.step-panel[data-panel="track"].active { grid-template-columns:1fr; gap:8px; }
  .step-panel[data-panel="track"] .panel-intro { display:none; }
  .step-panel[data-panel="track"] .track-summary { grid-column:auto; grid-row:auto; margin-top:0; }
  .mode-normal .step-panel[data-panel="track"] .track-summary { display:none; }
  .mode-pro .step-panel[data-panel="track"] .track-summary,
  .mode-pro .map-search { display:none; }
  .compose-layout { grid-template-columns:minmax(360px,1fr) 230px; gap:12px; }.option-group legend { display:none; }.shape-option { height:64px; gap:3px; border-radius:9px; font-size:10px; }.shape-symbol { transform:scale(.72); margin:-4px; }.preset-overview { padding:9px 11px; border-radius:9px; }.preset-overview>span { display:none; }.preset-overview>strong { margin:0 0 6px; font-size:10px; }.preset-overview dl div { padding-left:7px; }.preset-overview dt { font-size:7px; }.preset-overview dd { font-size:9px; }
  .personalize-layout { grid-template-columns:1fr 1.35fr; gap:11px; }.template-picker { grid-template-columns:repeat(3,1fr); gap:6px; }.template-option { min-height:54px; padding:6px; gap:6px; border-radius:8px; }.template-option>b { width:22px; height:22px; border-radius:6px; font-size:9px; }.template-option strong { font-size:9px; }.template-option small { display:none; }.edge-copy-editor { gap:6px 8px; }.edge-field label { margin-bottom:2px; font-size:8px; }.edge-field input { height:31px; padding:0 45px 0 8px; border-radius:6px; font-size:9px; }.edge-field output { right:6px; bottom:8px; font-size:7px; }.inline-status { display:none; }.hex-text-map { display:none; }
  .finish-layout { grid-template-columns:1fr 1fr 210px; gap:10px; }.render-summary { padding:9px; border-radius:9px; }.render-summary span { font-size:7px; }.render-summary strong { font-size:9px; }.quality-checks { grid-template-columns:repeat(3,1fr); gap:5px; }.quality-checks li { min-height:57px; padding:6px; gap:5px; border-radius:8px; }.quality-checks i { width:19px; height:19px; font-size:7px; }.quality-checks strong { font-size:8px; }.quality-checks small { display:none; }.render-callout { padding:9px; border-radius:9px; }.render-callout .primary-button { min-height:32px; font-size:10px; }.render-callout p { display:none; }.finish-layout .actions { display:flex; grid-column:1/-1; margin:0; }.finish-layout .actions button { min-height:30px; }
  .deck-nav { right:22px; bottom:10px; gap:7px; }.deck-nav .soft-button,.deck-nav .primary-button { min-height:30px; padding:0 12px; font-size:10px; }.deck-nav .primary-button { min-width:116px; }
  .designer>footer { flex:0 0 24px; justify-content:flex-end; padding:4px 22px; font-size:9px; }.designer>footer span { display:none; }.designer>footer button { font-size:9px; }
  .pro-panel { max-height:124px; overflow:auto; }.parameter-grid { grid-template-columns:repeat(3,minmax(120px,1fr)); gap:7px; }.pro-panel summary { padding:7px 0; }
  body:is(.mode-normal,.mode-pro) .control-deck { flex-basis:250px; min-height:250px; }
  body:is(.mode-normal,.mode-pro) .control-deck:has(.step-panel[data-panel="compose"].active) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; padding:14px 0 0; }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="compose"].active { margin-bottom:10px; }
  body:is(.mode-normal,.mode-pro) .control-deck:has(.step-panel[data-panel="compose"].active) .step-panel[data-panel="compose"].active { grid-column:1; grid-row:1; grid-template-columns:1fr; min-width:0; margin:0; padding:0 22px; }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="compose"].active .panel-intro { display:none; }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="compose"].active .option-group { height:100%; }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="compose"].active .option-group legend { display:none; }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="compose"].active .shape-options { height:100%; align-items:stretch; }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="compose"].active .shape-option { height:100%; min-height:0; border-radius:10px; }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="compose"].active .shape-symbol { transform:scale(1.1); margin:0 0 8px; }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="personalize"].active { grid-template-columns:1fr; align-items:stretch; }
  body:is(.mode-normal,.mode-pro) .control-deck:has(.step-panel[data-panel="compose"].active) .step-panel[data-panel="personalize"].active { grid-column:2; grid-row:1; min-width:0; padding:0 22px; border-left:1px solid var(--line); }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="personalize"].active .panel-intro { display:none; }
  body:is(.mode-normal,.mode-pro) .step-panel[data-panel="personalize"].active .personalize-layout { grid-column:auto; grid-template-columns:1fr; height:100%; gap:10px; }
  .personalize-layout:has(#chineseMetricPicker:not([hidden])) { grid-template-columns:1fr 1fr 1.5fr; }
  .chinese-metric-picker { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.chinese-metric-picker label { color:#718077; font-size:8px; font-weight:800; }.chinese-metric-picker select { width:100%; height:29px; margin-top:2px; padding:0 6px; border:1px solid #cfdbd1; border-radius:6px; color:var(--ink); background:#fff; font-size:9px; }
  .mode-normal .compose-layout { grid-template-columns:1fr; height:100%; }.mode-normal .preset-overview { display:none; }
  .template-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.template-picker legend { display:none; }.template-picker #textTemplateSelect,.chinese-metric-picker { display:none !important; }.template-picker .template-option { min-height:42px; padding:6px; display:flex; gap:6px; border-radius:8px; }.template-option>b { width:22px; height:22px; border-radius:6px; font-size:9px; }.template-option strong { font-size:9px; }.template-option small { display:none; }
  .edge-field:has(.chinese-choice:not([hidden])) { display:flex; flex-wrap:wrap; gap:0 5px; }.edge-field:has(.chinese-choice:not([hidden])) label { width:100%; }.edge-field:has(.chinese-choice:not([hidden])) input { order:3; width:calc(56% - 3px); padding:0 7px; }.chinese-choice { order:2; width:calc(44% - 3px); height:31px; padding:0 6px; border:1px solid #cfdbd1; border-radius:6px; color:var(--ink); background:#fff; font-size:9px; font-weight:800; }.edge-field:has(.chinese-choice:not([hidden])) output { display:none; }
  .mode-normal .template-picker legend { display:none; }
  .mode-normal .step-panel[data-panel="personalize"].active .template-picker .template-option { min-height:52px; }
  .mode-normal .step-panel[data-panel="personalize"].active .edge-copy-editor { grid-template-columns:1fr 1fr; gap:9px 10px; }
  .mode-normal .step-panel[data-panel="personalize"].active .edge-field input { height:35px; }
  .mode-normal .control-deck:has(.step-panel[data-panel="finish"].active) { padding:14px 22px 0; }
  .mode-normal .step-panel[data-panel="finish"].active { grid-template-columns:1fr; align-items:stretch; }
  .mode-normal .step-panel[data-panel="finish"].active .panel-intro { display:none; }
  .mode-normal .finish-layout { display:grid; grid-template-columns:1fr; align-content:start; gap:9px; }
  .mode-normal .quality-checks { grid-template-columns:repeat(3,1fr); gap:9px; }
  .mode-normal .quality-checks li { min-height:48px; }
  .mode-normal .render-callout { display:flex; justify-content:center; align-items:center; min-height:48px; padding:8px 10px; }
  .mode-normal .render-callout .primary-button { width:min(360px,100%); min-height:32px; }
  .mode-normal .render-callout p { display:block; margin:0; }
  .mode-normal .finish-layout .actions { display:block; margin:0; }
  .mode-normal .finish-layout .actions .primary-button { width:100%; min-height:34px; }
  .mode-pro .compose-layout { grid-template-columns:1fr; height:100%; }
  .mode-pro .preset-overview { display:none; }
  .mode-pro .template-picker .template-option { min-height:52px; }
  .mode-pro .edge-copy-editor { grid-template-columns:1fr 1fr; gap:9px 10px; }
  .mode-pro .edge-field input { height:35px; }
  .mode-pro .control-deck:has(.step-panel[data-panel="style"].active) { flex-basis:250px; min-height:250px; padding:14px 22px 0; }
  .mode-pro .step-panel[data-panel="style"].active { grid-template-columns:180px minmax(0,1fr); align-items:start; }
  .mode-pro .pro-parameter-panels { display:grid; grid-template-columns:1fr; gap:10px; }
  .mode-pro .pro-parameter-panels .pro-panel { margin:0; }
  .mode-pro .pro-parameter-panels .pro-panel summary { padding:8px 0; }
  .mode-pro .pro-parameter-panels .parameter-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
  .mode-pro .pro-parameter-panels .measurements { margin-top:8px; }
  .mode-pro .render-callout { display:flex; justify-content:center; align-items:center; }
  .mode-pro .render-callout .primary-button { width:min(360px,100%); }
}

/* HOWOO brand system · TrailPrint laboratory -------------------------------- */
:root {
  --ink:#050505;
  --muted:rgb(5 5 5 / 64%);
  --line:rgb(5 5 5 / 18%);
  --green:#757f4a;
  --green-dark:#050505;
  --green-soft:#eef0df;
  --cream:#fcfcfb;
  --paper:#fcfcfb;
  --acid:#cbd572;
  --shadow:7px 7px 0 #757f4a;
}

body { color:var(--ink); background:var(--cream); font-family:"Noto Sans SC",Arial,sans-serif; }
button,input,select { font-family:inherit; }
.app-header { height:74px; padding:0 5vw; border-color:rgb(252 252 251 / 20%); background:#050505f5; }
.brand { gap:11px; color:var(--cream); }
.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 { color:var(--cream); font-family:"IBM Plex Mono","SFMono-Regular",monospace; font-size:14px; font-weight:700; letter-spacing:-.04em; line-height:1.1; }
.brand small { color:rgb(252 252 251 / 66%); font-family:"Noto Sans SC",Arial,sans-serif; font-size:9px; font-weight:600; letter-spacing:.07em; }
.workflow-step { color:rgb(252 252 251 / 58%); font-family:"IBM Plex Mono","SFMono-Regular",monospace; font-size:12px; letter-spacing:.02em; }
.workflow-step b { border-color:rgb(252 252 251 / 38%); font-family:"IBM Plex Mono","SFMono-Regular",monospace; }
.workflow-step::before { background:rgb(252 252 251 / 22%); }
.workflow-step::after { background:var(--acid); }
.workflow-step.active { color:var(--cream); }
.workflow-step.active b { color:#050505; border-color:var(--acid); background:var(--acid); }
.mode-switch { border-color:rgb(252 252 251 / 34%); border-radius:0; background:transparent; }
.mode-switch button { color:rgb(252 252 251 / 65%); border-radius:0; font-family:"IBM Plex Mono","SFMono-Regular",monospace; }
.mode-switch button.selected { color:#050505; background:var(--acid); box-shadow:none; }

.workspace-heading { min-height:92px; grid-template-columns:310px 1fr auto; padding:18px 5vw; border-color:var(--line); background:var(--cream); }
.workspace-heading span,.preset-chip span { color:#757f4a; font-family:"IBM Plex Mono","SFMono-Regular",monospace; font-size:10px; letter-spacing:.08em; }
.workspace-heading strong { font-size:23px; font-weight:900; letter-spacing:-.06em; }
.workspace-heading p { max-width:620px; color:var(--muted); font-size:13px; line-height:1.8; }
.preset-chip { border-color:#050505; border-radius:0; background:var(--acid); }
.preset-chip i { border-radius:0; background:#050505; }

.split-stage { border-color:var(--line); background:#050505; }
.model-pane { background:radial-gradient(circle at 50% 42%,#fcfcfb 0 4%,#dfe5bd 5%,#757f4a 49%,#050505 100%); border-color:rgb(252 252 251 / 22%); }
.map-pane { background:#757f4a; }
.pane-label,.map-caption,.terrain-status { border:1px solid rgb(252 252 251 / 44%); border-radius:0; box-shadow:none; }
.pane-label { color:#050505; background:var(--acid); }
.pane-label span,.map-caption span { font-family:"IBM Plex Mono","SFMono-Regular",monospace; font-size:10px; letter-spacing:.08em; }
.terrain-status { color:var(--cream); background:#050505d9; }
.terrain-status i { border-radius:0; background:var(--acid); }
.map-caption { color:var(--cream); background:#050505dc; }
.map-search,.map-zoom,.map-ui>div { border-radius:0; box-shadow:5px 5px 0 rgb(5 5 5 / 38%); }
.map-search { border-color:#050505; }
.map-search button,.map-zoom button { color:#050505; }
.map-pan-tool,.map-reset { border:1px solid #050505; border-radius:0; color:#050505; background:var(--cream); box-shadow:4px 4px 0 rgb(5 5 5 / 38%); }
.map-pan-tool.active { color:#050505; background:var(--acid); }
.map-type { border-radius:0; color:#050505; background:var(--cream); }
.map-type.selected { color:#050505; background:var(--acid); }
.map-overlay .map-mask { fill:#050505a3; }
.map-overlay .map-selection { stroke:var(--acid); }
.map-overlay #mapTrail { stroke:var(--acid); }
.empty-preview { background:radial-gradient(ellipse at center,#cbd572 0 14%,transparent 46%); }
.empty-preview .empty-icon { border-radius:50%; border-color:#050505; color:#050505; background:var(--acid); }
.empty-preview strong { color:#050505; font-weight:900; }.empty-preview small { color:rgb(5 5 5 / 70%); }

.control-deck { padding-right:5vw; padding-left:5vw; background:var(--cream); }
.panel-number { border-radius:50%; color:#050505; background:var(--acid); font-family:"IBM Plex Mono","SFMono-Regular",monospace; }
.panel-intro h2 { font-size:22px; font-weight:900; letter-spacing:-.06em; }.panel-intro p { color:var(--muted); line-height:1.8; }
.source-card,.option-group,.preset-overview,.template-option,.quality-checks li,.render-summary,.render-callout { border-color:var(--line); border-radius:0; background:var(--cream); box-shadow:none; }
.source-card { border-left:4px solid var(--green); }
.source-icon { border-radius:50%; color:#050505; background:var(--acid); }
.card-heading strong,.option-group legend { font-weight:900; }.card-heading small { color:var(--muted); }
.upload-button,.soft-button { border-color:#050505; border-radius:0; color:#050505; background:var(--cream); }
.primary-button { border-color:#050505; border-radius:0; color:var(--cream); background:#050505; }
.primary-button:hover,.primary-button:focus-visible { color:#050505; background:var(--acid); box-shadow:var(--shadow); transform:translate(-2px,-2px); }
.soft-button:hover,.soft-button:focus-visible { color:#050505; border-color:#050505; background:var(--acid); }
.shape-option,.template-option { border-color:var(--line); border-radius:0; color:#050505; }
.shape-option.active,.template-option.active { border-color:#050505; color:#050505; background:var(--acid); box-shadow:5px 5px 0 #757f4a; }
.shape-option:hover,.template-option:hover { border-color:#050505; background:#eef0df; }
.field,.edge-field label { color:#050505; font-weight:800; }.field output { color:#757f4a; }
.field input,.select-control,.edge-field input,.chinese-choice,.chinese-metric-picker select { border-color:var(--line); border-radius:0; color:#050505; background:var(--cream); }
.route-visibility-control { border-color:var(--line); border-radius:0; background:#eef0df; }
.pro-panel { border-color:var(--line); border-radius:0; background:var(--cream); }
.quality-checks li.passed i { color:#050505; background:var(--acid); }
.deck-nav { gap:0; }.deck-nav .soft-button { border-right:0; }
.designer>footer { border-color:var(--line); color:rgb(252 252 251 / 72%); background:#050505; font-family:"IBM Plex Mono","SFMono-Regular",monospace; }
.designer>footer button { color:var(--acid); }

@media (max-width:720px) {
  .app-header { height:64px; grid-template-columns:134px minmax(0,1fr) 96px; padding:0 14px; }
  .brand-logo { width:22px; height:32px; }.brand-divider { height:22px; }.brand-product { font-size:11px; }
  .workflow-step { height:64px; }.workflow-step span { display:none; }
  .mode-switch button { min-width:45px; }
  .split-stage { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .workspace-heading { padding-right:20px; padding-left:20px; }
  .control-deck { padding-right:20px; padding-left:20px; }
  .source-card { border-left-width:3px; }
  .shape-option.active,.template-option.active { box-shadow:3px 3px 0 #757f4a; }
}

/* 窄视口（包括浏览器放大后的有效宽度）绝不横向撑出屏幕。 */
@media (max-width:720px) {
  html,body { width:100%; min-width:0; overflow-x:hidden; }
  .designer { width:100%; min-width:0; }
  .app-header { height:54px; grid-template-columns:112px minmax(0,1fr) 96px; padding:0 10px; }
  .brand { gap:6px; font-size:14px; white-space:nowrap; }.brand-mark { width:26px; height:26px; border-radius:7px; font-size:13px; }.brand small { display:none; }
  .workflow { min-width:0; justify-content:space-between; }.workflow-step { min-width:0; flex:1 1 0; height:54px; padding:0 3px; gap:0; }.workflow-step b { width:18px; height:18px; font-size:9px; }.workflow-step::before { right:-7px; width:14px; }.workflow-step::after { right:5px; left:5px; }
  .mode-switch { padding:2px; border-radius:8px; }.mode-switch button { min-width:45px; height:28px; padding:0 5px; font-size:10px; }
  .workspace-heading { display:none; }
  .split-stage { height:clamp(300px,47vh,420px); min-height:300px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .pane-label,.map-caption { top:10px; left:10px; padding:5px 7px; border:0; border-radius:6px; color:#fff; background:#13231bc7; box-shadow:none; }.pane-label span,.map-caption span { font-size:9px; }
  .terrain-status,.model-refresh-notice,.map-search,.map-ui,.map-drag-hint,.map-help { display:none; }
  .view-actions { bottom:9px; left:9px; gap:4px; }.view-actions .soft-button { min-height:28px; padding:0 7px; border-radius:6px; font-size:9px; }.view-presets { display:none; }
  .map-reset { bottom:9px; left:9px; min-height:28px; padding:0 7px; border-radius:6px; font-size:9px; }.map-pan-tool { bottom:9px; left:67px; min-height:28px; padding:0 7px; border-radius:6px; font-size:9px; }.map-pan-tool span { display:none; }.map-zoom { right:9px; bottom:9px; grid-template-columns:28px 42px 28px; min-height:28px; border-radius:6px; }.map-zoom output { padding:0 3px; font-size:9px; }.map-zoom button { font-size:14px; }
  .map-scale { bottom:42px; left:9px; font-size:7px; }.map-scale i { width:56px; height:5px; }
  .control-deck { min-height:0; padding:12px 12px 18px; overflow:visible; }
  .step-panel,.step-panel.active { min-width:0; gap:12px; }.panel-intro { gap:8px; }.panel-number { width:27px; height:27px; border-radius:7px; font-size:9px; }.panel-intro h2 { font-size:15px; }.panel-intro p { display:none; }
  .track-source-grid,.track-source-grid.single-source,.compose-layout,.personalize-layout,.finish-layout { grid-template-columns:minmax(0,1fr); max-width:none; }.source-card { min-height:0; padding:11px; border-radius:9px; }.upload-source { grid-template-columns:minmax(0,1fr); gap:8px; }.upload-source .upload-button { width:100%; }.upload-source p { display:none; }
  .shape-options { gap:6px; }.shape-option { height:76px; font-size:10px; }.shape-symbol { transform:scale(.82); }.template-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }.template-option { min-height:68px; padding:7px; gap:5px; }.template-option>b { width:22px; height:22px; flex:0 0 22px; font-size:9px; }.template-option strong { font-size:9px; }.template-option small { display:none; }
  .edge-copy-editor { grid-template-columns:minmax(0,1fr); }.parameter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.deck-nav { position:static; justify-content:stretch; margin-top:12px; }.deck-nav .primary-button { width:100%; min-width:0; }
  .designer>footer { padding:9px 12px; font-size:9px; }
}

/* Keep Leaflet's native scale clear of the reset-map control. */
.map-tiles .leaflet-bottom .leaflet-control-scale { margin:0 0 64px 20px !important; }

/* Pre-native-map interaction state: the custom tile layer stays below the fixed model frame. */
.map-tiles { z-index:auto; pointer-events:none; }
.map-overlay .map-selection { fill:none; }
.interaction-gate { z-index:9; }
.model-pane .view-actions,
.model-pane .preview-render-slot,
.map-pane .map-search,
.map-pane .map-pan-tool,
.map-pane .map-reset,
.map-pane .map-zoom,
.map-pane .map-ui { z-index:10; }

/* 构图页：左侧仅显示预览，右侧依序呈现外形、文案样式、路线与文字。 */
.compose-aside { position:absolute; z-index:12; inset:0; display:grid; align-content:start; gap:16px; padding:24px; overflow:hidden; background:#f7faf7; }
.compose-aside .compose-layout { display:block; }
.compose-aside .compose-layout .preset-overview { display:none; }
.compose-aside .shape-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.compose-aside .shape-option { height:92px; }
.compose-aside .personalize-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; align-items:start; margin:0; padding-top:16px; border-top:1px solid var(--line); }
.compose-aside .template-picker { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.compose-aside .template-picker legend { display:none; }
.compose-aside .template-option { min-height:52px; }
.compose-aside .template-option small { display:none; }
.compose-aside .route-visibility-control { grid-column:1/-1; min-height:45px; padding:9px 11px; }
.compose-aside .route-visibility-control small { display:none; }
.compose-aside .chinese-metric-picker { grid-column:1/-1; }
.compose-aside .edge-copy-editor { grid-column:1/-1; }
.compose-aside .hex-text-map { display:none; }
.compose-aside .pro-parameter-panels { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.compose-aside .pro-parameter-panels .pro-panel { margin:0; }
.compose-aside .pro-parameter-panels .parameter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.preview-render-slot { position:absolute; z-index:9; top:18px; right:18px; }
.preview-render-slot .primary-button { min-width:106px; min-height:40px; box-shadow:0 4px 14px #173b2829; }
body:has(.step-panel[data-panel="compose"].active) .terrain-status { right:142px; }
.compose-aside .finish-layout { display:grid; grid-template-columns:1fr; gap:14px; }
.compose-aside .render-summary { display:none; }
.compose-aside .quality-checks { display:none; }
.compose-aside .quality-checks li { position:relative; min-height:72px; justify-content:center; padding:10px; text-align:center; }
.compose-aside .quality-checks li:not(:last-child)::after { content:'→'; position:absolute; top:50%; right:-23px; z-index:1; color:var(--green); font-size:22px; font-weight:900; transform:translateY(-50%); }
.compose-aside .quality-checks span { align-items:center; }
.compose-aside .render-callout { display:none; }
.compose-aside .actions { display:grid; grid-template-columns:1fr; gap:8px; margin:0; }
.compose-aside .actions .primary-button { width:100%; min-height:44px; }

body:has(.step-panel[data-panel="compose"].active) .workspace-heading,
body:has(.step-panel[data-panel="compose"].active) .control-deck,
body:has(.step-panel[data-panel="compose"].active) .designer>footer { display:none; }
body:has(.step-panel[data-panel="compose"].active) .split-stage { height:calc(100vh - 74px); min-height:720px; border-bottom:0; }

@media (min-width:721px) {
  .mode-pro .step-panel[data-panel="style"].active { grid-template-columns:240px minmax(0,1fr); align-items:start; }
  .mode-pro .pro-parameter-panels { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
  .mode-pro .pro-parameter-panels .pro-panel { min-width:0; max-height:none; margin:0; overflow:visible; }
  .mode-pro .pro-parameter-panels .parameter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
}