/* 漫滇拾云 00.27 · 原稿落地皮肤层（skin.css，整文件替换00.26版）
   ---------------------------------------------------------------------------
   依据：assets/final/approved-homepage.png（唯一构图基准）+
   过程记录/参赛开发-20261006/00.27/参考-最新唯一配色-第一个方案.png（唯一配色基准）。
   施工口径：近满幅连续插画舞台——左侧大地图为视觉主体（无卡片白框），
   顶部品牌/口号/搜索融进舞台；右侧为真实插画旅行包（satchel-frame.png 原图
   经 CSS background 三层窗口取用：顶=提手/挂签/纸面A，中=纸面B，底=纸面C拉链袋，
   不做任何像素改色，原图RGB/alpha原样）；内容在袋内滚动。
   素材皮革为灰绿sage（≈#A3B8AB），与唯一配色参考的苔绿#70856A存在色差——
   已如实报告，未做未授权改色，等待操作者定夺。
   地理：world-terrain仅为装饰（省界clipPath内+省外低透明度山云），真实轮廓/
   落点/路线一律以矢量与places.json为权威；已按00.27要求去掉16个省内文字标签。
   --------------------------------------------------------------------------- */

:root {
  /* 00.27 唯一配色（参考-最新唯一配色-第一个方案） */
  --s-sky: #edf2e9;            /* 青白天底 */
  --s-sky-deep: #e4ede6;
  --s-mist: #c9d8d2;           /* 远景雾 */
  --s-far: #a9bfbd;            /* 远山青蓝灰 */
  --s-moss: #7e9779;           /* 近丘苔绿 */
  --s-ink: #3c4a3e;            /* 墨绿灰正文 */
  --s-ink-soft: #5c6b62;
  --s-muted: #7f8d85;
  --s-paper: #f6f2e6;          /* 面板纸 */
  --s-card: #fbf8f0;           /* 输入/卡 */
  --s-line: #e4dece;
  --s-coral: #cc8275;          /* 主按钮柔粉珊瑚（参考实采样211,139,126带） */
  --s-coral-deep: #c0705f;
  --s-coral-ink: #d96f5d;      /* 图钉/强调 */
  --s-btn-text: #33424e;       /* 按钮深蓝文字（原稿可读） */
  --s-shadow: 0 10px 26px rgba(60, 74, 62, .16), 0 2px 8px rgba(60, 74, 62, .10);
}

/* ---------- 舞台底色 + 连续山云装饰层（覆盖顶栏到地图，无硬矩形过渡） ---------- */
body {
  color: var(--s-ink);
  background:
    radial-gradient(120% 60% at 18% -6%, rgba(201, 216, 210, .55), transparent 60%),
    radial-gradient(90% 50% at 85% -4%, rgba(169, 191, 189, .30), transparent 55%),
    linear-gradient(180deg, var(--s-sky) 0%, var(--s-sky-deep) 34%, #eef0e6 62%, var(--s-paper) 100%);
  background-attachment: fixed;
}
/* 全页外围山云（world-terrain.png 原图低透明度大尺度铺开，边缘羽化；
   仅装饰，不参与坐标；真实省界裁切在地图SVG内完成） */
body::before {
  content: ""; position: fixed; inset: -6% -3% auto -3%; height: 86%;
  background-image: url('/assets/skin/stage-mountains.png');
  background-repeat: no-repeat;
  background-size: 118% auto;
  background-position: 50% 14%;
  opacity: .26; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 64%, transparent 97%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 64%, transparent 97%);
  filter: saturate(.74);
}
.topbar, .page { position: relative; z-index: 1; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--s-far); outline-offset: 3px; }
::selection { background: #cfe0d9; }

/* ---------- 顶栏：品牌 + 舞台主口号（原稿可见主标语）+ 纸面小导航 ---------- */
.topbar {
  max-width: 1680px; border-bottom: 0; padding: 7px clamp(10px, 1.6vw, 30px) 2px;
  background: transparent; gap: 12px;
}
.brand-icon { width: 44px; height: 33px; }
.brand b { display: block; font-size: 21px; font-weight: 800; letter-spacing: 3px; color: var(--s-ink); }
.stage-title {
  flex: 1; min-width: 0; margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(15px, 1.6vw, 25px); font-weight: 750; letter-spacing: 2px; color: var(--s-ink);
  text-shadow: 0 1px 0 rgba(250, 251, 247, .6); pointer-events: none;
}
.edition { color: #97a49b; }
.view-tabs {
  background: rgba(251, 248, 240, .72); border: 1px solid var(--s-line); padding: 3px;
  box-shadow: 0 2px 8px rgba(60, 74, 62, .07); backdrop-filter: blur(4px); align-self: center;
}
.view-tab { color: var(--s-muted); font-size: .84rem; padding: 5px 13px; }
.view-tab.on { background: rgba(201, 216, 210, .6); color: var(--s-ink); box-shadow: inset 0 -2px 0 var(--s-coral-ink); border-radius: 999px; }

/* ---------- 左：大地图舞台（无卡片框，直接铺在舞台上） ---------- */
.map-stage { position: relative; min-width: 0; }
.map-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 2px 2px 4px; }
.searchbox {
  position: relative; display: flex; gap: 8px; align-items: center; flex: 1 1 300px; min-width: 0;
  background: rgba(251, 248, 240, .92); border: 1px solid var(--s-line); border-radius: 999px;
  box-shadow: 0 3px 12px rgba(60, 74, 62, .10); padding: 0 8px 0 14px;
}
.searchbox input { padding: 9px 0; border: 0; outline: none; background: none; width: 100%; min-width: 0; font-size: 13px; color: var(--s-ink); }
.searchbox .s-ico { color: var(--s-ink-soft); }
.search-go { background: var(--s-ink); color: var(--s-paper); border-radius: 999px; padding: 6px 13px; font-size: 12px; }
.sample {
  background: var(--s-card); border: 1px solid var(--s-line); color: var(--s-ink);
  border-radius: 999px; padding: 8px 14px; transform: rotate(-.6deg);
  box-shadow: 0 2px 6px rgba(60, 74, 62, .10); font-size: 12px; white-space: nowrap;
}
.sample > span { color: var(--s-coral-ink); margin-right: 4px; }
.journey-steps { display: flex; gap: 9px; align-items: center; margin: 0; color: var(--s-muted); font-size: 10.5px; flex-wrap: wrap; }
.journey-steps b { display: inline-grid; place-items: center; width: 17px; height: 17px; border: 1.3px solid var(--s-far); border-radius: 50%; color: var(--s-ink-soft); font-size: 10px; margin-right: 4px; background: rgba(251,248,240,.7); }
.journey-steps i { font-style: normal; color: #b7c4ba; }
.atlas-city-row { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px; flex-wrap: wrap; }
.atlas-city-row .row-label { font-size: 11px; color: var(--s-muted); letter-spacing: 1px; flex: none; }
.atlas-city-row .chips { padding: 0; overflow-x: auto; flex: 1 1 auto;
  mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.city-hint { color: #a05948; font-size: .78rem; margin: 4px 2px; }
.chip { border: 1px solid var(--s-line); background: rgba(251, 248, 240, .85); color: var(--s-ink); border-radius: 999px; padding: 4px 11px; font-size: .8rem; }
.chip.on { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-paper); }
.regions { display: flex; gap: 6px; padding: 0 2px 4px; flex-wrap: wrap; }
.regions .chip { background: transparent; color: #6d7d74; border-color: transparent; }
.regions .chip.active { background: rgba(201, 216, 210, .55); color: var(--s-ink-soft); border-color: #b9cbc3; }
.catalog-link { color: #45686c; text-decoration: underline; text-decoration-color: #a9c2bd; text-underline-offset: 4px; font-size: 11px; background: none; border: 0; padding: 4px 2px; cursor: pointer; white-space: nowrap; }

/* 地图世界：真实省界内全彩地貌 + 省外同图低透明山云（装饰，非地理权威） */
.map-viewport { position: relative; overflow: auto; scrollbar-width: thin; }
.world {
  width: 100%; position: relative; aspect-ratio: 4/3; isolation: isolate;
  background:
    radial-gradient(70% 55% at 26% 18%, rgba(250, 251, 247, .22), transparent 62%),
    radial-gradient(60% 50% at 74% 12%, rgba(250, 251, 247, .16), transparent 64%);
}
#geographicBase, #routeLayer, #anchorLayer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#geographicBase {
  filter: drop-shadow(0 8px 14px rgba(92, 107, 98, .18));
  -webkit-mask-image: radial-gradient(125% 108% at 50% 44%, #000 80%, transparent 99%);
  mask-image: radial-gradient(125% 108% at 50% 44%, #000 80%, transparent 99%);
}
#anchorLayer { z-index: 2; }
#routeLayer { z-index: 1; }
.route-halo { fill: none; stroke: #fffdf6; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.route-line { fill: none; stroke: var(--s-coral-ink); stroke-width: 3.2; stroke-dasharray: 7 5; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) { .route-line { animation: atlasFlow 30s linear infinite; } }
@keyframes atlasFlow { to { stroke-dashoffset: -240; } }
.pin { position: absolute; transform: translate(-50%, -100%); z-index: 3; display: block; background: none; border: 0; box-shadow: none !important; padding: 0; font-size: 11px; }
.pin .landmark {
  display: block; width: 60px; height: 60px; margin: auto;
  background-image: url('/atlas/landmark-sprites.png'); background-repeat: no-repeat;
  background-size: var(--bsx, 300%) var(--bsy, 400%);
  background-position: var(--bpx, 0%) var(--bpy, 0%);
  filter: drop-shadow(0 3px 2px rgba(60, 74, 62, .16)); transition: transform .2s;
}
.pin:hover .landmark, .pin.selected .landmark { transform: translateY(-4px) scale(1.05); }
.pin-label {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--s-card); border: 1px solid var(--s-line); border-radius: 6px; padding: 3px 6px;
  color: var(--s-ink); box-shadow: 0 2px 4px rgba(60, 74, 62, .16); white-space: nowrap;
}
.pin.selected .pin-label { border: 2px solid var(--s-coral-ink); }
.pin .pin-dot { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--s-coral-ink); color: #fff; font-size: 9px; border: 2px solid #fff8ea; }
.pin.in-route .pin-dot { background: #b0503f; }
.pin.dim { opacity: .25; }
.compass { position: absolute; right: 5%; top: 7%; font-size: 30px; color: #6c7f74; z-index: 4; pointer-events: none; text-align: center; }
.compass small { display: block; font-size: 8px; letter-spacing: 2px; margin-top: 3px; }
/* 旅伴+石墙+小云：左下前景主角（约地图1/3宽，不挡锚点；不随缩放移动地理坐标） */
.map-companion {
  position: absolute; left: -3.5%; bottom: 5.5%; width: 55%; max-width: 700px; min-width: 280px;
  z-index: 6; pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 12px 20px rgba(60, 74, 62, .22));
}
.map-bottom {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px;
  font-size: 10.5px; color: #7c857b; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(180deg, transparent, rgba(238, 240, 230, .55));
  border-radius: 10px;
}
.legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--s-coral-ink); margin-right: 6px; }
.zoom { display: flex; gap: 3px; }
.zoom button { background: rgba(251, 248, 240, .9); border: 1px solid var(--s-line); border-radius: 8px; padding: 5px 12px; font-size: 12px; color: var(--s-ink); box-shadow: 0 1px 3px rgba(60,74,62,.08); }
.geo-credit { padding: 4px 10px 6px; font-size: 9px; color: #98a08e; background: linear-gradient(180deg, rgba(238,240,230,.35), rgba(238,240,230,.6)); border-radius: 10px; }
.geo-credit a { text-decoration: none; color: inherit; }
.map-fallback { padding: 40px 20px; text-align: center; }

/* ---------- 右：真实插画旅行包（原图三层窗口；内容在袋内滚动） ---------- */
/* 归零style.css里.field-notes的旧卡片样式（HTML保留该类名供atlas.js定位） */
.field-notes.satchel-stage {
  background: none !important; border: 0 !important; padding: 0 !important;
  box-shadow: none !important; border-radius: 0 !important; outline: 0 !important;
  min-height: 0 !important;
}
.field-notes.satchel-stage .planner-note { background: none; border: 0; padding: 0; box-shadow: none; }
.satchel-stage {
  container-type: inline-size;
  width: min(100%, clamp(340px, 40vw, 620px)); /* 稳定宽度区间，不绑视口高度 */
  justify-self: end;
  display: flex; flex-direction: column;
  filter: drop-shadow(0 16px 30px rgba(60, 74, 62, .22));
}
.satchel-top, .satchel-mid, .satchel-bot {
  position: relative;
  background-image: url('/assets/skin/satchel-frame.png');
  background-repeat: no-repeat;
  background-size: 100% auto;    /* 原图等比，仅窗口取段，无拉伸无改色 */
}
.satchel-top { aspect-ratio: 1024 / 690; background-position: 0 0; }
.satchel-mid  { aspect-ratio: 1024 / 405; background-position: 0 -67.3828cqw; }
.satchel-bot  { aspect-ratio: 1024 / 441; background-position: 0 -106.9336cqw; }
/* 纸面内容槽（按素材实测纸面矩形内缩；均为真实HTML） */
.tag-slot {
  position: absolute; left: 30.5%; right: 17.2%; top: 19.8%; bottom: 58.2%;
  display: flex; align-items: center; gap: 2.2cqw;
}
.flap-icon { width: 6.4cqw; height: 4.8cqw; flex: none; }
.flap-copy { min-width: 0; }
.flap-copy strong { display: block; font-size: clamp(12px, 3cqw, 19px); color: var(--s-ink); letter-spacing: 1px; line-height: 1.25; }
.flap-copy small { display: block; font-size: clamp(8px, 1.75cqw, 11px); color: var(--s-muted); margin-top: .4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-a, .slot-b, .slot-c { position: absolute; display: flex; flex-direction: column; min-height: 0; }
.slot-a { left: 14.5%; right: 12%; top: 50.5%; bottom: 3.2%; }
.slot-b { left: 13%; right: 10.5%; top: 5.5%; bottom: 4.5%; }
.slot-c { left: 13%; right: 12%; top: 4.5%; bottom: 24.5%; }
.slot-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }

/* 第一层·计划输入（紧凑：日期/天数/出发地同一行 + 心愿 + 生成） */
.planner-note { display: flex; flex-direction: column; gap: 1.35cqw; height: 100%; }
.brief-row { display: grid; grid-template-columns: 1.35fr .8fr 1.1fr; gap: 1.6cqw; }
.planner-note label { display: block; font-size: clamp(8px, 1.6cqw, 10.5px); color: #74806f; line-height: 1.5; min-width: 0; }
.planner-note input, .planner-note select, .planner-note textarea {
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--s-card); border: 1px solid var(--s-line); border-radius: 7px;
  padding: .9cqw 1.1cqw; font-size: clamp(10px, 1.95cqw, 13px); color: var(--s-ink); font-family: inherit;
}
.planner-note input:focus, .planner-note select:focus, .planner-note textarea:focus { outline: 2px solid rgba(169, 191, 189, .7); border-color: var(--s-far); }
.planner-note textarea { resize: none; flex: 1; min-height: 4.6em; line-height: 1.6; }
.wish-label { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wish-hints { display: flex; gap: 4px; flex-wrap: wrap; }
.wish-hints button { font-size: clamp(8px, 1.55cqw, 10.5px); padding: 3px 8px; border-radius: 999px; background: rgba(201, 216, 210, .4); color: #5d6d5f; border: 1px dashed #b9cbc3; }
.generate-options {
  width: 100%; font-size: clamp(11px, 2.2cqw, 14px); padding: 1.8cqw 1cqw; letter-spacing: 1px;
  background: linear-gradient(#d38b7e, var(--s-coral)); color: var(--s-btn-text);
  border: 1px solid #b06a5e; border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 6px rgba(60, 74, 62, .16);
}
.generate-options:hover { background: linear-gradient(#cd8577, var(--s-coral-deep)); }
.form-footnote { font-size: clamp(9px, 1.35cqw, 9.5px); color: #7c8272; text-align: center; line-height: 1.5; margin: 0; }

/* 第二层·逐日行程（选点与辅助说明收敛为一行条） */
.picks-strip { display: flex; align-items: center; gap: 1.8cqw; border-bottom: 1px dashed var(--s-line); padding-bottom: 1.4cqw; }
.picks-strip h2 { margin: 0; font-size: clamp(10px, 2cqw, 13px); color: var(--s-ink); }
.picks-strip > span { font-size: clamp(8px, 1.5cqw, 10px); color: var(--s-muted); }
.mini-ghost { background: var(--s-card); border: 1px solid var(--s-line); border-radius: 7px; padding: 3px 9px; font-size: clamp(8.5px, 1.6cqw, 11px); color: var(--s-ink); margin-left: auto; white-space: nowrap; }
.satchel-ol { list-style: none; padding: 0; margin: 1.2cqw 0 0; max-height: 8.5cqw; overflow-y: auto; scrollbar-width: thin; }
.satchel-ol li { display: flex; align-items: center; gap: 5px; font-size: clamp(9px, 1.7cqw, 11.5px); padding: .8cqw 0; border-bottom: 1px solid #eee9d8; }
.satchel-ol li small { color: var(--s-muted); }
.satchel-ol li button { padding: 1px 5px; font-size: 12px; color: #869181; }
.satchel-ol li.helper {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 11cqw; border-bottom: 0; color: #8d958a; padding: 0 1.5cqw;
  font-size: clamp(9px, 1.85cqw, 12px); line-height: 1.8;
}
.satchel-ol .stop-name { flex: 1; min-width: 0; word-break: break-word; }
.stop-index { background: #e3ddc2; border-radius: 50%; min-width: 4cqw; height: 4cqw; display: inline-grid; place-items: center; font-size: clamp(8px, 1.5cqw, 10px); color: #6f6244; flex: none; }
.helper { font-size: clamp(8px, 1.5cqw, 10px); line-height: 1.6; color: #8d958a; margin: .8cqw 0; }
.trip-version-row { display: flex; align-items: center; gap: 6px; margin: .8cqw 0; flex-wrap: wrap; }
.trip-version { font-size: clamp(8.5px, 1.6cqw, 11px); color: #45686c; background: #e6edea; border-radius: 999px; padding: 2px 9px; }
.day-filters { display: flex; gap: 5px; margin: .8cqw 0; flex-wrap: wrap; }
.day-filters button { font-size: clamp(8.5px, 1.6cqw, 11px); border-radius: 6px; padding: 4px 8px; background: #ece9db; color: #5d6a60; }
.day-filters button.active { background: var(--s-ink); color: var(--s-paper); }
.atlas-day-list { margin: .6cqw 0; }
.atlas-day h4 { margin: .8cqw 0 .4cqw; font-size: clamp(9.5px, 1.8cqw, 12px); color: var(--s-ink); }
.atlas-day ol { list-style: none; margin: 0; padding: 0; }
.atlas-day ol li { display: flex; align-items: center; gap: 5px; font-size: clamp(9px, 1.7cqw, 11.5px); padding: .6cqw 0; border-bottom: 1px dotted #e8e2ce; }
.atlas-day .stop-name { flex: 1; min-width: 0; word-break: break-word; }
.stop-slot { flex: none; font-size: clamp(7.5px, 1.3cqw, 9px); color: var(--s-muted); border: 1px solid var(--s-line); border-radius: 3px; padding: 1px 4px; }
.stop-loc { flex: none; font-size: clamp(7.5px, 1.3cqw, 9px); border-radius: 3px; padding: 1px 5px; }
.stop-loc.ok { background: #e2f0e8; color: #2e7d5b; }
.stop-loc.pending { background: #f2ecda; color: #8a6d1f; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: .8cqw; }
.actions.tight { gap: 5px; }
.raw-details { margin: .8cqw 0 0; font-size: clamp(8.5px, 1.6cqw, 11px); }
.raw-details summary { cursor: pointer; color: #45686c; }
.raw-details .ok-body { max-height: 220px; overflow: auto; font-size: 11px; }

/* 第三层·抽签袋（签筒+木签+明信片横排；未抽一句引导，抽后真实结果） */
.draw-deck { display: flex; flex-direction: column; gap: 1.2cqw; height: 100%; min-height: 0; }
.deck-head { display: flex; align-items: center; gap: 2cqw; }
.deck-copy { flex: 1; min-width: 0; }
.deck-copy h2 { margin: 0 0 .8cqw; font-size: clamp(10.5px, 2.1cqw, 14px); color: var(--s-ink); }
.deck-modes { padding: 0; gap: 4px; }
.deck-modes .chip { font-size: clamp(8px, 1.5cqw, 10.5px); padding: 3px 9px; }
.deck-postcard {
  flex: none; width: 11.5cqw; height: 11.5cqw; max-width: 76px; max-height: 76px;
  background: url('/assets/skin/lottery-objects.png') no-repeat 100% 0 / 300% 100%;
  transform: rotate(6deg); filter: drop-shadow(0 3px 5px rgba(60, 74, 62, .18));
}
.deck-shake {
  flex: none; font-size: clamp(9.5px, 1.9cqw, 12.5px); padding: 1.5cqw 1.8cqw; white-space: nowrap;
  background: linear-gradient(#d38b7e, var(--s-coral)); color: var(--s-btn-text);
  border: 1px solid #b06a5e; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 5px rgba(60,74,62,.16);
}
#drawHint { font-size: clamp(8px, 1.45cqw, 10px); color: var(--s-muted); margin: 0; line-height: 1.5; }
.draw-area { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.draw-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.draw-card {
  position: relative; background: var(--s-card); border: 1px solid var(--s-line); border-radius: 9px;
  padding: 8px 9px 7px; box-shadow: 0 2px 6px rgba(60, 74, 62, .10); animation: fadeUp .3s ease;
}
.draw-card .draw-seal { position: absolute; top: -7px; left: 10px; background: var(--s-coral-ink); color: #fff; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.draw-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.draw-label { color: #93856a; font-size: .75rem; }
.draw-name { margin: 4px 0 2px; font-size: 1.05rem; color: var(--s-ink); }
.draw-hook { margin: 0 0 3px; color: #6f7a6d; font-size: .85rem; }
.draw-card .actions { margin-top: 4px; }
.draw-card .btn { padding: 4px 9px; font-size: .8rem; }
.deck-tube-wrap { position: relative; flex: none; width: 9.5cqw; height: 13cqw; max-width: 62px; max-height: 86px; }
.deck-tube-body { position: absolute; inset: 0; background: url('/assets/skin/lottery-objects.png') no-repeat 0 0 / 300% 100%; filter: drop-shadow(0 3px 3px rgba(60, 74, 62, .2)); }
.deck-stick {
  position: absolute; left: 50%; bottom: 32%; width: 9px; height: 93px;
  background: url('/assets/skin/lottery-objects.png') no-repeat -148px -4px / 304px 101px;
  transform: translateX(-50%) translateY(18px); filter: drop-shadow(1px 2px 2px rgba(60, 74, 62, .2));
}
.deck-tube-wrap.shaking { animation: lTubeShake .6s ease; }
.deck-tube-wrap.shaking .deck-stick { animation: lStickOut .6s ease; }
@keyframes lTubeShake { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-8deg)} 30%{transform:rotate(7deg)} 45%{transform:rotate(-6deg)} 60%{transform:rotate(5deg)} 78%{transform:rotate(-3deg)} }
@keyframes lStickOut { 0%{transform:translateX(-50%) translateY(18px)} 100%{transform:translateX(-50%) translateY(-26px)} }
@media (prefers-reduced-motion: reduce) { .deck-tube-wrap.shaking, .deck-tube-wrap.shaking .deck-stick { animation: none; } }

/* ---------- 舞台下方区块（方案对比/搜索结果/印记/工具架）：纸面浮在舞台上 ---------- */
.scheme-section { margin: 26px 2px 4px; scroll-margin-top: 16px; }
.scheme-header h2 { color: var(--s-ink); }
.scheme-badge { color: #45686c; background: #e4ebe8; border-radius: 999px; padding: 4px 10px; }
.scheme-description { color: var(--s-muted); }
.scheme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 16px; margin-top: 14px; align-items: start; }
.scheme-card { position: relative; background: var(--s-card); border: 1px solid var(--s-line); border-top: 4px solid var(--s-far); border-radius: 12px; padding: 14px; box-shadow: var(--s-shadow); }
.scheme-card:nth-child(2) { border-top-color: var(--s-moss); transform: rotate(.4deg); }
.scheme-card:nth-child(3) { border-top-color: var(--s-coral); transform: rotate(-.35deg); }
.scheme-card.active { outline: 2.5px solid var(--s-coral-ink); outline-offset: 3px; }
.scheme-no { font-size: 10px; color: #93988a; letter-spacing: 2px; }
.scheme-card .scheme-meta { color: #8d958a; font-size: 10px; }
.scheme-card p { color: #5d6a64; font-size: 12px; }
.scheme-wishes { border-top: 1px dashed var(--s-line); }
.scheme-days { border: 1px dashed var(--s-line); border-radius: 8px; }
.scheme-card .btn.primary { width: 100%; margin-top: 8px; }

/* ---------- 通用组件（其它视图统一唯一配色） ---------- */
.btn.primary, .primary {
  background: linear-gradient(#d38b7e, var(--s-coral)); color: var(--s-btn-text); border: 1px solid #b06a5e;
}
.btn.primary:hover, .primary:hover { background: linear-gradient(#cd8577, var(--s-coral-deep)); }
.secondary, .btn.ghost { background: var(--s-card); color: var(--s-ink); border: 1px solid var(--s-line); }
.state-card, .trip-step, .menu-step, .p-card, .picks-list li, .marks-list li,
.suggest-body, .card-pick-group, .trip-card-cta, .challenge-box {
  background: var(--s-card); border-color: var(--s-line); color: var(--s-ink);
}
.trip-card-cta { background: linear-gradient(165deg, #faf7ee 0%, #efe9d9 100%); border: 1.5px dashed #c8b48c; }
.step-no { background: var(--s-ink); color: var(--s-paper); }
.tag-preset { background: #e4ebe0; color: #47664d; }
.sheet { background: var(--s-paper); }
.sheet-close { background: #ebe6d4; }
.toast { background: var(--s-ink); color: var(--s-paper); }
.user-say { background: var(--s-ink); color: var(--s-paper); }
.warn-list li { color: #8a6d1f; }
.challenge-opt.right { background: #e2f0e8; }
.dish-price { color: #45686c; }
.muted { color: var(--s-muted); }
.suggest { background: var(--s-card); border-color: var(--s-line); }
.suggest-error { background: #f6e3dc; color: #a05443; }
.spinner { border-color: var(--s-line); border-top-color: var(--s-ink); }
.shelf-icon.indigo { color: #3d5a66; background: #e2ebec; }
.shelf-icon.rust { color: var(--s-coral-ink); background: #f7e8e2; }
.shelf-icon.green { color: #5f8a6c; background: #e7efe3; }
.shelf-icon.gold { color: #9b7d3a; background: #f3ecd6; }
.foot { color: var(--s-muted); }

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
  /* 手机/窄屏：旅行包（含表单）先行，地图随后；舞台纵向排列 */
  .workbench { grid-template-columns: 1fr; }
  .satchel-stage { order: -1; width: min(100%, 560px); justify-self: center; margin: 0 auto; }
  .map-companion { width: 58%; min-width: 230px; }
  .scheme-cards { grid-template-columns: 1fr; }
}
@media (max-width: 740px) {
  .stage-title { font-size: 13px; letter-spacing: 1px; white-space: normal; }
  .brand b { font-size: 18px; letter-spacing: 2px; }
  .brand-icon { width: 36px; height: 27px; }
  .edition { display: none; }
  .view-tabs { order: 3; width: 100%; justify-content: space-around; }
  .pin:not(.selected):not(.in-route) .pin-label { display: none; }
  .pin .landmark { width: 42px; height: 42px; }
  .satchel-stage { width: 100%; }
  .tag-slot { left: 29%; right: 17%; }
  .map-companion { width: 62%; min-width: 180px; }
  .brief-row { grid-template-columns: 1.25fr .8fr; }
  .brief-row label:nth-child(3) { grid-column: 1 / -1; }
  .deck-head { flex-wrap: wrap; }
  .deck-postcard { display: none; }
  .deck-shake { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }