:root { --ink:#1c2230; --muted:#717989; --line:#e8eaf0; --paper:#fff; --ground:#f4f5f8; --accent:#2d5dff; --danger:#d94a55; --shadow:0 10px 30px rgba(30,37,54,.06); }
* { box-sizing:border-box; } body { margin:0; background:var(--ground); color:var(--ink); font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; } button,input { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.42; }
.shell { width:min(100%,680px); margin:0 auto; padding:calc(22px + env(safe-area-inset-top)) 18px calc(36px + env(safe-area-inset-bottom)); }.hero { padding:4px 4px 20px; }.eyebrow,.section-label { color:var(--muted); font:500 11px/1 "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }.pulse { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#30ba78; box-shadow:0 0 0 4px #dff7e9; }.hero-row { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:15px; } h1,h2,p { margin:0; } h1 { font-size:25px; letter-spacing:-.04em; }.hero p { margin-top:5px; color:var(--muted); font-size:13px; }.icon-button { width:38px; height:38px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:12px; font-size:20px; }.hero-text-button { height:38px; padding:0 14px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:12px; font-size:12px; font-weight:500; white-space:nowrap; }
.summary { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:var(--shadow); }.summary>div { min-width:0; padding:15px 10px 13px; border-right:1px solid var(--line); }.summary>div:nth-child(4) { border-right:0; }.summary span,.time-grid span,.stay-section>span,.departure-block>span { display:block; color:var(--muted); font-size:10px; white-space:nowrap; }.summary strong { display:block; overflow:hidden; margin-top:6px; font:500 13px "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }.summary-arrival { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); border-right:0!important; padding:12px 14px!important; }.summary-arrival strong { margin:0; color:var(--accent); }
.start-card { display:grid; grid-template-columns:auto 1fr 116px 73px; gap:10px; align-items:center; margin:18px 0 0; padding:15px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:var(--shadow); }.station-number { color:var(--accent); font:500 11px "DM Mono",monospace; }.start-number { align-self:start; padding-top:3px; }.start-copy h2 { margin-top:4px; font-size:18px; letter-spacing:-.02em; }.date-field,.time-field { display:grid; gap:3px; color:var(--muted); font-size:10px; }.date-field input,.time-field input { min-width:0; border:0; outline:0; color:var(--ink); background:transparent; font:500 12px "DM Mono",monospace; }.quick-starts { display:flex; grid-column:2/-1; align-items:center; gap:6px; margin-top:2px; }.quick-starts>span { margin-right:2px; color:var(--muted); font-size:10px; white-space:nowrap; }.quick-starts button,.stay-buttons button { padding:6px 9px; border:1px solid transparent; border-radius:999px; color:#5f687a; background:#eff1f5; font:500 11px "DM Mono",monospace; }.quick-starts button.active,.stay-buttons button.active { border-color:var(--ink); color:#fff; background:var(--ink); }
.timeline { position:relative; }.destination-wrap { position:relative; }.route-connector { position:relative; min-height:75px; padding:13px 0 11px 42px; color:var(--muted); font:500 11px/1.55 "DM Mono",monospace; }.route-connector:before { position:absolute; top:0; bottom:0; left:21px; width:1px; content:""; background:#ccd2df; }.route-connector:after { position:absolute; bottom:9px; left:17px; content:"↓"; color:var(--accent); font-size:15px; background:var(--ground); }.connector-route { color:var(--accent); font-size:14px; font-weight:600; }.skipped-connector { color:#a6adba; }.route-loading { display:flex; align-items:center; gap:7px; }.spinner { width:12px; height:12px; border:2px solid #dce3ff; border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }.date-divider { margin:0 0 11px; color:var(--muted); font:500 11px "DM Mono",monospace; text-align:center; }.date-divider:before,.date-divider:after { display:inline-block; width:24%; height:1px; margin:0 9px 3px; content:""; background:#dce0e9; vertical-align:middle; }
.destination-card { position:relative; padding:16px; border:1px solid var(--line); border-radius:19px; background:var(--paper); box-shadow:var(--shadow); transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,opacity .22s ease; }.destination-card.photo-golden { border-color:#efd686; background:linear-gradient(135deg,#fffdf7,#fff7d9); box-shadow:0 10px 30px rgba(204,160,35,.16); }.destination-card.photo-sunset { border-color:#f1ba8d; background:linear-gradient(135deg,#fffaf5,#fff0e0); box-shadow:0 10px 30px rgba(220,112,42,.16); }.destination-card.photo-blue { border-color:#b8c9f1; background:linear-gradient(135deg,#f9fbff,#eaf0ff); box-shadow:0 10px 30px rgba(50,91,193,.15); }.destination-card.is-skipped { filter:grayscale(.9); opacity:.56; }.card-topline { display:flex; align-items:center; gap:9px; }.card-actions { display:flex; gap:4px; margin-left:auto; }.card-actions button { width:auto; height:24px; padding:0 8px; border:0; border-radius:7px; color:var(--muted); background:#f4f5f8; font-size:10px; line-height:1; white-space:nowrap; }.card-actions button:last-child { color:var(--danger); }.place-picker { position:relative; margin-top:12px; }.place-picker input { width:100%; padding:10px 30px 10px 0; border:0; border-bottom:1px solid var(--line); outline:0; color:var(--ink); background:transparent; font-size:17px; font-weight:600; letter-spacing:-.02em; }.place-picker input:focus { border-color:var(--accent); }.return-input { border-bottom-color:transparent!important; }.search-mark { position:absolute; top:8px; right:0; color:var(--muted); font-size:21px; }.place-address { min-height:19px; margin-top:6px; color:var(--muted); font-size:11px; line-height:1.45; }.place-meta { margin-top:3px; color:#939aaa; font:400 10px/1.5 "DM Mono",monospace; }.poi-results { position:absolute; z-index:5; top:48px; right:0; left:0; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:0 14px 30px rgba(32,40,64,.16); }.poi-option { display:block; width:100%; padding:11px 13px; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:#fff; text-align:left; }.poi-option:last-child { border-bottom:0; }.poi-option b,.poi-option small { display:block; }.poi-option b { font-size:13px; }.poi-option small { margin-top:3px; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.time-grid { display:grid; grid-template-columns:1fr; margin-top:17px; }.time-grid strong,.departure-block strong { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:5px; font:500 18px "DM Mono",monospace; letter-spacing:-.06em; }.photo-badge { padding:3px 6px; border-radius:999px; font:600 9px "Noto Sans SC",sans-serif; letter-spacing:0; }.photo-badge.golden { color:#8e6500; background:#fff0ad; }.photo-badge.sunset { color:#a74b16; background:#ffd4b7; }.photo-badge.blue { color:#294fae; background:#d9e5ff; }.route-status { min-height:24px; margin-top:12px; padding:7px 9px; border-radius:8px; color:var(--muted); background:#f6f7f9; font:500 11px "DM Mono",monospace; }.route-status.error { color:#b52836; background:#fff1f2; }.route-status .retry { margin-left:7px; padding:0; border:0; color:inherit; background:transparent; text-decoration:underline; }.stay-section { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }.stay-buttons { display:grid; gap:7px; margin-top:8px; }.stay-relative-buttons,.stay-until-buttons { display:flex; flex-wrap:wrap; gap:7px; }.stay-until-buttons { grid-row:2; }.stay-buttons button { min-width:58px; }.stay-section p { margin-top:8px; color:var(--muted); font-size:11px; }.departure-block { margin-top:13px; padding-top:12px; border-top:1px solid var(--line); }.departure-block strong { color:var(--ink); }
.trip-actions { display:grid; grid-template-columns:7fr 3fr; gap:8px; margin-top:18px; }.trip-actions>.tk-action-btn { grid-column:1/-1; }.add-destination,.return-origin { display:flex; width:100%; align-items:center; justify-content:center; gap:7px; padding:14px; border-radius:14px; font-weight:600; }.add-destination { border:1px dashed #b8c0cf; color:#465066; background:transparent; }.add-destination span { color:var(--accent); font-size:20px; line-height:.5; }.return-origin { border:0; color:#58637a; background:#eaedf4; }.route-preview { margin-top:22px; padding:15px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:var(--shadow); }.route-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.route-preview h2 { margin-top:4px; font-size:17px; letter-spacing:-.02em; }.refresh-route-preview { flex:0 0 auto; padding:7px 10px; border:1px solid #ced8ff; border-radius:9px; color:#234fd4; background:#f0f4ff; font-size:11px; font-weight:600; }.refresh-route-preview:active { transform:translateY(1px); }.route-map { position:relative; display:grid; place-items:center; min-height:250px; margin-top:13px; overflow:hidden; border-radius:12px; color:var(--muted); background:#f5f7fb; font-size:11px; }.amap-route-canvas { width:100%; height:250px; }.amap-route-marker { display:grid; width:30px; height:30px; place-items:center; box-sizing:border-box; border:2px solid #20293a; border-radius:50%; color:#20293a; background:rgba(255,255,255,.96); box-shadow:0 2px 7px rgba(29,37,54,.18); font:600 10px "DM Mono",monospace; }.amap-route-canvas .amap-logo,.amap-route-canvas .amap-copyright { opacity:.68; }.route-map-svg { width:100%; height:250px; cursor:grab; }.route-map-svg:active { cursor:grabbing; }.map-road { fill:none; stroke:var(--accent); stroke-linecap:round; stroke-linejoin:round; stroke-width:4; vector-effect:non-scaling-stroke; }.map-marker { fill:#fff; stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke; }.map-marker-label { fill:var(--ink); font:600 13px "DM Mono",monospace; pointer-events:none; }.map-fallback-note { position:absolute; right:9px; bottom:8px; max-width:calc(100% - 18px); padding:4px 6px; border-radius:6px; color:#667085; background:rgba(255,255,255,.88); font-size:9px; }.footnote { padding:17px 6px 0; color:#8a92a1; font-size:10px; line-height:1.65; }
.trip-dock { position:fixed; top:50%; left:max(18px,calc(50% - 520px)); z-index:3; width:150px; max-height:72vh; padding:13px 10px; overflow:auto; transform:translateY(-50%); border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:var(--shadow); backdrop-filter:blur(12px); transition:border-color .18s ease,box-shadow .18s ease; }.dock-head { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-bottom:6px; }.dock-title { margin:0 5px; color:var(--muted); font:500 10px "DM Mono",monospace; letter-spacing:.1em; transition:color .18s ease; }.dock-toggle { padding:4px 6px; border:0; border-radius:7px; color:var(--accent); background:#edf1ff; font:500 10px "Noto Sans SC",sans-serif; }.trip-dock.is-collapsed #tripDock,.trip-dock #tripDock[hidden] { display:none!important; }.trip-dock.is-dragging { border-color:#b7c5ff; box-shadow:0 14px 34px rgba(45,93,255,.18); }.trip-dock.is-dragging .dock-title { color:var(--accent); }.dock-item { position:relative; display:flex; width:100%; align-items:center; gap:7px; padding:7px 5px; border:0; border-radius:8px; color:var(--ink); background:transparent; text-align:left; touch-action:none; user-select:none; cursor:grab; transition:opacity .16s ease,transform .16s ease,background .16s ease,box-shadow .16s ease,outline-color .16s ease; }.dock-item:active { cursor:grabbing; }.dock-item.is-pressing { background:#edf1ff; transform:scale(1.02); }.trip-dock.is-dragging .dock-item { opacity:.5; }.trip-dock.is-dragging .dock-item.is-dragging { z-index:2; opacity:1; transform:scale(1.06); border-radius:10px; background:#fff; box-shadow:0 9px 22px rgba(32,40,64,.2); cursor:grabbing; }.dock-item:not(:last-child):after { position:absolute; bottom:-5px; left:11px; width:1px; height:8px; content:""; background:#ccd2df; }.dock-item b { color:var(--accent); font:500 10px "DM Mono",monospace; }.dock-item span { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.dock-item.is-active { background:#edf1ff; }.dock-item.drag-over { outline:2px solid var(--accent); outline-offset:2px; background:#eaf0ff; box-shadow:0 0 0 4px rgba(45,93,255,.1); opacity:1!important; }.dock-item.is-skipped { color:#a8afbb; }.dock-item.is-skipped b { color:#a8afbb; }.dock-toast { position:fixed; z-index:40; bottom:calc(22px + env(safe-area-inset-bottom)); left:50%; max-width:min(90vw,360px); padding:10px 14px; border:1px solid #cbd6ff; border-radius:999px; color:#214bc9; background:#f0f4ff; box-shadow:0 10px 28px rgba(36,67,150,.18); font-size:12px; text-align:center; transform:translateX(-50%); }
.modal-backdrop { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:20px; background:rgba(28,34,48,.22); backdrop-filter:blur(4px); }.modal-backdrop[hidden] { display:none!important; }.delete-modal { width:min(100%,355px); padding:20px; border-radius:18px; background:#fff; box-shadow:0 18px 55px rgba(28,34,48,.2); }.delete-modal h2 { margin-top:7px; font-size:20px; }.delete-modal p { margin-top:9px; color:var(--muted); font-size:12px; line-height:1.65; }.delete-modal>div { display:flex; justify-content:flex-end; gap:8px; margin-top:19px; }.delete-modal button { padding:8px 13px; border:0; border-radius:9px; color:#596276; background:#eef0f5; }.delete-modal .danger { color:#fff; background:var(--danger); }
@media (max-width:1050px) { .trip-dock { left:10px; width:48px; padding:11px 5px; }.dock-title { display:none; }.dock-toggle { width:36px; padding:6px 0; font-size:0; }.dock-toggle:after { content:"↕"; font-size:16px; }.dock-item span { display:none; }.dock-item { justify-content:center; }.dock-item:not(:last-child):after { left:50%; }.shell { margin-left:max(70px,calc(50% - 340px)); margin-right:auto; } }
@media (max-width:760px) { .trip-dock { position:sticky; top:0; left:0; display:block; width:100%; max-height:none; padding:5px 13px; overflow:visible; transform:none; border-width:0 0 1px; border-radius:0; }.dock-head { margin:0; }.dock-title { display:block; }.dock-toggle { width:auto; padding:5px 8px; font-size:11px; }.dock-toggle:after { content:none; }.trip-dock:not(.is-collapsed) #tripDock { display:flex!important; width:100%; margin-top:5px; overflow-x:auto; overflow-y:hidden; }.dock-item { flex:0 0 auto; width:auto; padding:7px 8px; }.dock-item:not(:last-child):after { top:50%; right:-4px; bottom:auto; left:auto; width:1px; height:10px; transform:translateY(-50%); }.shell { width:100%; margin:0; padding-top:calc(17px + env(safe-area-inset-top)); }.dock-item span { display:block; max-width:74px; }.route-map-svg { height:225px; } }
@media (max-width:440px) { .shell { padding-right:13px; padding-left:13px; }.start-card { grid-template-columns:auto 1fr 99px 64px; gap:6px; padding:13px; }.date-field input,.time-field input { font-size:10px; }.quick-starts { gap:4px; }.quick-starts button { padding:5px; font-size:9px; }.summary>div { padding-right:7px; padding-left:7px; }.summary strong { font-size:11px; }.time-grid strong,.departure-block strong { font-size:16px; }.stay-buttons button { min-width:56px; padding:6px 8px; font-size:10px; } }
.preview-summary { display:grid; grid-template-columns:repeat(4,1fr); margin-top:13px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fafbfc; }.preview-summary>div { min-width:0; padding:10px 9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.preview-summary>div:nth-child(4),.preview-summary>div:nth-child(6) { border-right:0; }.preview-summary>div:nth-child(5),.preview-summary>div:nth-child(6) { border-bottom:0; }.preview-summary span { display:block; color:var(--muted); font-size:10px; white-space:nowrap; }.preview-summary strong { display:block; overflow:hidden; margin-top:5px; color:var(--ink); font:500 12px "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:440px) { .preview-summary { grid-template-columns:repeat(2,1fr); }.preview-summary>div:nth-child(2),.preview-summary>div:nth-child(4) { border-right:0; }.preview-summary>div:nth-child(5) { border-bottom:1px solid var(--line); }.preview-summary strong { font-size:11px; } }

/* Editable origin and non-truncating route preview metrics. */
.start-copy { min-width:0; }
.start-place-picker { margin-top:4px; }
.start-place-picker input { padding-top:6px; padding-bottom:6px; font-size:18px; }
.start-copy .place-address { margin-top:3px; }
.preview-summary > div { overflow:visible; }
.preview-summary > .preview-departure { grid-column:1 / 3; border-right:1px solid var(--line); border-bottom:0; text-align:left; }
.preview-summary > .preview-arrival { grid-column:3 / 5; border-right:0; border-bottom:0; text-align:right; }
.preview-summary strong { overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
.preview-summary .preview-arrival strong { text-align:right; }
@media (max-width:440px) {
  .preview-summary > .preview-departure { grid-column:1 / 2; border-right:1px solid var(--line); border-bottom:0; }
  .preview-summary > .preview-arrival { grid-column:2 / 3; border-right:0; border-bottom:0; }
}

/* The trip navigator intentionally uses a grid instead of a scrollable rail.
   It keeps every stop visible at once and leaves mobile swipes for page
   scrolling; long-press dragging still starts an explicit reorder gesture. */
.trip-dock {
  width:230px;
  max-height:none;
  overflow:visible;
}

#tripDock {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
}

.dock-item {
  width:100%;
  min-width:0;
  min-height:36px;
  padding:7px 8px;
  gap:6px;
  border:1px solid transparent;
  background:#f7f8fb;
}

.dock-item:not(:last-child):after { display:none; }
.dock-item span { min-width:0; font-size:10px; }
.dock-item.is-active { border-color:#c9d5ff; background:#edf1ff; }

@media (max-width:1050px) {
  .trip-dock {
    left:10px;
    width:170px;
    padding:10px;
  }

  .dock-title { display:block; }
  .dock-toggle { width:auto; padding:5px 8px; font-size:10px; }
  .dock-toggle:after { content:none; }
  .dock-item { justify-content:flex-start; }
  .dock-item span { display:block; }
  .shell { margin-left:max(190px,calc(50% - 340px)); margin-right:auto; }
}

@media (max-width:760px) {
  body { overflow-x:hidden; }

  .trip-dock {
    position:sticky;
    top:0;
    left:0;
    width:100%;
    /* 实色背景+安全区内边距：吸顶时遮住刘海/灵动岛区域，滚动内容不再透出 */
    padding:calc(7px + env(safe-area-inset-top)) 13px 9px;
    overflow:visible;
    transform:none;
    border-width:0 0 1px;
    border-radius:0;
    background:var(--ground);
  }

  .dock-head { margin:0; }
  .trip-dock:not(.is-collapsed) #tripDock {
    display:grid!important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
    margin-top:7px;
    overflow:visible;
  }

  .dock-item {
    min-height:38px;
    padding:8px;
    touch-action:none;
  }

  .dock-item span { max-width:none; }
  .shell { width:100%; margin:0; padding-top:calc(17px + env(safe-area-inset-top)); }
}

@media (min-width:480px) and (max-width:760px) {
  .trip-dock:not(.is-collapsed) #tripDock { grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); }
}

/* Standalone Roadbook sharing view. It deliberately has no dependency on the
   editable itinerary cards, so the exported image contains only trip facts. */
.hero-actions { display:flex; gap:7px; }
.share-backdrop { z-index:60; align-items:start; overflow:auto; padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); }
.share-modal { width:min(100%,760px); margin:auto; padding:16px; border-radius:20px; background:#fff; box-shadow:0 18px 55px rgba(28,34,48,.22); }
.share-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }.share-modal-head h2 { margin-top:4px; font-size:19px; letter-spacing:-.03em; }.share-modal-head .icon-button { width:34px; height:34px; font-size:20px; }
.share-name-panel { margin:0 0 12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fafbfe; }.share-name-panel label { display:flex; align-items:center; justify-content:space-between; color:#4f596c; font-size:12px; font-weight:600; }.share-name-panel label span { color:#8b94a4; font:500 10px "DM Mono",monospace; }.share-name-panel input { width:100%; box-sizing:border-box; min-height:39px; margin-top:8px; padding:8px 10px; border:1px solid #dbe0eb; border-radius:9px; outline:0; color:var(--ink); background:#fff; font:500 13px "Noto Sans SC",sans-serif; }.share-name-panel input:focus { border-color:#8ea8ff; box-shadow:0 0 0 3px rgba(45,93,255,.1); }.share-name-panel small { display:block; margin-top:5px; color:#8a92a1; font-size:10px; }.share-name-shortcuts { display:grid; gap:6px; margin-top:10px; }.share-name-shortcuts>div { display:flex; flex-wrap:wrap; gap:6px; }.share-name-shortcuts button { min-width:0; padding:6px 8px; overflow:hidden; border:1px solid #d8deea; border-radius:999px; color:#526078; background:#fff; font:500 10px "Noto Sans SC",sans-serif; text-overflow:ellipsis; white-space:nowrap; }.share-name-shortcuts button:first-child { max-width:100%; }.share-name-shortcuts button:active { transform:translateY(1px); color:#234fd4; border-color:#b6c6ff; background:#f0f4ff; }
.share-preview { max-height:60vh; padding:12px; overflow:auto; border:1px solid var(--line); border-radius:14px; background:#f4f5f8; }.share-preview::-webkit-scrollbar { width:6px; height:6px; }.share-preview::-webkit-scrollbar-thumb { border-radius:999px; background:#d5d9e3; }
.share-poster { width:min(620px,calc(100vw - 84px)); min-width:0; margin:auto; padding:25px; border-radius:18px; color:var(--ink); background:#f4f5f8; font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }.share-poster h2,.share-poster h3,.share-poster p { margin:0; }.share-header { padding:2px 3px 20px; }.share-kicker,.share-section-label { display:block; color:var(--muted); font:500 10px "DM Mono",monospace; letter-spacing:.11em; }.share-header h2 { margin-top:10px; font-size:27px; letter-spacing:-.045em; }.share-subtitle { margin-top:8px!important; color:var(--muted); font:500 11px "DM Mono",monospace; }
.share-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--paper); box-shadow:0 7px 20px rgba(30,37,54,.05); }.share-summary>div { min-width:0; padding:12px 9px; border-right:1px solid var(--line); }.share-summary>div:nth-child(4) { border-right:0; }.share-summary span { display:block; color:var(--muted); font-size:9px; white-space:nowrap; }.share-summary strong { display:block; margin-top:5px; overflow:hidden; font:500 12px "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }.share-summary-final { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); border-right:0!important; }.share-summary-final strong { margin:0; color:var(--accent); }
.share-route { margin-top:18px; padding:15px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 7px 20px rgba(30,37,54,.045); }.share-route-map-frame { position:relative; margin-top:8px; overflow:hidden; border-radius:10px; background:#f4f6fb; }.share-route-svg { position:relative; z-index:1; display:block; width:100%; height:220px; }.share-route-map-backdrop { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:.94; }.share-route-line { fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }.share-route-line.is-fallback { stroke:#7694f6; stroke-dasharray:8 7; }.share-route.has-amap-backdrop .share-route-line { opacity:.58; }.share-route-marker { fill:#fff; stroke:var(--ink); stroke-width:2.2; vector-effect:non-scaling-stroke; }.share-route-marker-label { fill:var(--ink); font:600 13px "DM Mono",monospace; pointer-events:none; }.share-route-note,.share-route-empty { margin-top:5px!important; color:var(--muted); font-size:10px; }.share-route-note { text-align:center; }
.share-timeline { position:relative; margin-top:20px; }.share-timeline>.share-section-label { margin:0 0 10px 2px; }.share-station { position:relative; padding:15px 16px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 7px 20px rgba(30,37,54,.045); }.share-station-heading { display:flex; align-items:baseline; gap:9px; }.share-station-number { flex:0 0 auto; color:var(--accent); font:500 12px "DM Mono",monospace; }.share-station h3 { min-width:0; overflow:hidden; font-size:17px; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }.share-station-address { margin-top:6px!important; color:var(--muted); font-size:10px; line-height:1.45; }.share-station-time,.share-station-departure { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:13px!important; }.share-station-time strong,.share-station-departure strong { font:500 15px "DM Mono",monospace; letter-spacing:-.045em; }.share-station-departure { margin-top:10px!important; padding-top:10px; border-top:1px solid var(--line); }.share-station-departure strong { color:var(--ink); }.share-station-meta,.share-station-stay { margin-top:8px!important; color:#8a92a1; font:400 10px/1.5 "DM Mono",monospace; }.share-station-stay { color:#596276; }.share-photo-badge { padding:3px 6px; border-radius:999px; font:600 9px "Noto Sans SC",sans-serif; letter-spacing:0; }.share-photo-badge.golden { color:#8e6500; background:#fff0ad; }.share-photo-badge.sunset { color:#a74b16; background:#ffd4b7; }.share-photo-badge.blue { color:#294fae; background:#d9e5ff; }
.share-leg { position:relative; min-height:70px; padding:15px 0 10px 45px; }.share-leg-line { position:absolute; top:0; bottom:0; left:20px; width:1px; background:#cbd2df; }.share-leg-route { color:var(--accent); font:600 12px "DM Mono",monospace; }.share-leg-arrow { position:absolute; bottom:7px; left:15px; color:var(--accent); font-size:15px; line-height:1; background:#f4f5f8; }.share-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:21px; padding:15px 4px 0; border-top:1px solid #d9dde6; color:#9aa1ae; font-size:10px; }.share-footer strong { color:#737c8c; font-weight:600; }
.share-actions { display:grid; grid-template-columns:1.1fr .9fr; gap:8px; margin-top:13px; }.share-actions button { min-height:42px; padding:9px 12px; border:1px solid var(--line); border-radius:11px; color:#4f596c; background:#f5f6f9; font-weight:600; }.share-actions #shareSystem { border-color:var(--accent); color:#fff; background:var(--accent); }.share-actions button:disabled { color:#9299a8; background:#eff1f5; border-color:transparent; }.share-status { min-height:18px; margin:9px 2px 0; color:var(--muted); font-size:11px; text-align:center; }
@media (max-width:440px) { .share-backdrop { padding-right:10px; padding-left:10px; }.share-modal { padding:13px; border-radius:17px; }.share-name-panel { padding:10px; }.share-name-shortcuts button { padding:6px 7px; font-size:9px; }.share-preview { max-height:57vh; padding:8px; }.share-poster { width:calc(100vw - 52px); padding:18px; border-radius:14px; }.share-header h2 { font-size:22px; }.share-summary>div { padding:10px 6px; }.share-summary strong { font-size:10px; }.share-route { padding:11px; }.share-route-svg { height:180px; }.share-station { padding:13px; }.share-station h3 { font-size:15px; }.share-actions { grid-template-columns:1fr 1fr; gap:6px; }.share-actions button { min-width:0; padding-right:6px; padding-left:6px; font-size:12px; } }

/* The shared Roadbook title and map labels adapt to dense, long itineraries. */
.share-header .share-route-title { font-size:var(--route-title-size,27px); line-height:1.32; overflow-wrap:anywhere; }
.share-custom-title { margin:0 0 15px!important; padding:0 0 14px; border-bottom:1px solid #d9deea; font-size:var(--share-custom-title-size,29px); line-height:1.3; letter-spacing:-.04em; overflow-wrap:anywhere; }
.share-custom-title[hidden] { display:none!important; }
.share-route-place-label { fill:#4c566a; font:500 11px "Noto Sans SC",sans-serif; paint-order:stroke; stroke:#fff; stroke-linejoin:round; stroke-width:4px; pointer-events:none; }
.share-drive-warning { display:inline-block; margin-top:7px; padding:3px 7px; border-radius:999px; font:600 9px "Noto Sans SC",sans-serif; }.share-drive-warning.is-orange { color:#a64b10; background:#fff0df; }.share-drive-warning.is-red { color:#b42332; background:#ffe7e9; }.share-night-arrival { font-size:15px; line-height:1; }.share-altitude-warning { margin-top:7px!important; color:#9b591e; font-size:10px; line-height:1.55; }
/* Match the share overlay to the live preview; fabricated fallback segments are never drawn. */
.share-route-line { stroke-width:4; stroke-opacity:.9; }
.share-route.has-amap-backdrop .share-route-line { opacity:1; }

.drive-warning { display:inline-block; margin:6px 0 0 8px; padding:4px 8px; border-radius:999px; font:500 12px/1.5 sans-serif; vertical-align:middle; white-space:nowrap; }
.drive-warning.is-orange { color:#a64b10; background:#fff0df; }
.drive-warning.is-red { color:#b42332; background:#ffe7e9; }
.night-arrival { display:inline-block; margin-left:8px; color:#596381; font:600 22px/1 sans-serif; vertical-align:middle; }
.altitude-warning { display:inline-block; width:fit-content; margin:6px 0 0; padding:3px 8px; border:1px solid #ecd9b8; border-radius:999px; color:#9b591e; background:#fdf6e9; font:600 10px/1.4 "Noto Sans SC",sans-serif; letter-spacing:.04em; }
/* Route connectors also provide a quick insertion point for a via stop. */
.route-connector { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding-right:8px; }
.route-connector > span { min-width:0; }
.add-via-point { position:relative; z-index:1; flex:0 0 auto; margin-top:-2px; padding:5px 9px; border:1px solid #d5dcf5; border-radius:999px; color:#315bdc; background:#f5f7ff; font:500 11px "Noto Sans SC",sans-serif; }
.add-via-point:active { transform:translateY(1px); }
.route-preview-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.route-map { aspect-ratio:1 / 1; min-height:0; }
.amap-route-canvas,.route-map-svg { height:100%; min-height:0; }
.refresh-modal { width:min(100%,390px); }
.turnstile-wrap { display:flex; min-height:66px; align-items:center; justify-content:center; margin-top:17px; overflow:hidden; }
.human-check-status { display:block; margin-top:4px; color:#7c879a; font-size:11px; text-align:center; }
.refresh-modal button:disabled { cursor:not-allowed; opacity:.48; }
.ai-analysis { margin:14px 0 18px; padding:16px; border:1px solid #dce4ff; border-radius:18px; background:linear-gradient(135deg,#f8faff,#fff); box-shadow:0 8px 23px rgba(45,94,251,.06); }
.ai-analysis-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.ai-analysis-head h2 { margin:4px 0 0; font-size:18px; letter-spacing:-.03em; }.ai-analysis-head button { flex:0 0 auto; padding:8px 11px; border:0; border-radius:10px; color:#fff; background:var(--accent); font:600 11px "Noto Sans SC",sans-serif; }.ai-analysis-head button:disabled { color:#9aa4bb; background:#e9edf5; }.ai-analysis-hint { margin:10px 0 0; color:#748097; font-size:11px; line-height:1.65; }.ai-analysis-result { display:grid; gap:12px; margin-top:14px; }.ai-result-lead { padding:12px; border-radius:12px; background:#fff; box-shadow:0 5px 14px rgba(34,46,76,.045); }.ai-result-lead h3 { margin:0; font-size:16px; letter-spacing:-.02em; }.ai-result-lead p { margin:7px 0 0; color:#59657a; font-size:12px; line-height:1.7; }.ai-result-section { padding-top:12px; border-top:1px solid #e5e9f2; }.ai-result-section h3 { margin:0 0 8px; color:#647086; font-size:11px; font-weight:600; }.ai-days,.ai-risks,.ai-suggestions { display:grid; gap:7px; }.ai-day,.ai-risk,.ai-suggestion { position:relative; padding:9px 10px; border-radius:10px; background:rgba(255,255,255,.8); }.ai-day { display:grid; grid-template-columns:82px 1fr; gap:8px; color:#566277; font-size:11px; line-height:1.6; }.ai-day b { color:#315efb; font:500 10px "DM Mono",monospace; }.ai-day.ai-level-attention { background:#fff8ed; }.ai-day.ai-level-high { background:#fff0f1; }.ai-risk { padding-right:84px; }.ai-risk p,.ai-suggestion p { margin:0; color:#4e596c; font-size:11px; line-height:1.6; }.ai-risk small { display:block; margin-top:4px; color:#8791a3; font-size:10px; line-height:1.55; }.ai-risk-high { border-left:3px solid #dc4657; }.ai-risk-medium { border-left:3px solid #e89b37; }.ai-risk-info { border-left:3px solid #7f98d8; }.ai-suggestion b { color:#303c52; font-size:11px; }.ai-suggestion p { margin-top:4px; }.ai-anchor { position:absolute; top:9px; right:9px; padding:4px 6px; border:0; border-radius:7px; color:#315efb; background:#edf2ff; font-size:9px; }.ai-modal p { max-width:340px; }
@media (max-width:440px) {
  .route-connector { gap:6px; padding-right:3px; }
  .add-via-point { padding:5px 7px; font-size:10px; }
  .ai-analysis { padding:13px; }.ai-day { grid-template-columns:70px 1fr; gap:6px; }.ai-risk { padding-right:72px; }
}
/* AI references remain secondary to the itinerary and never block editing. */
.scenic-ai { margin: 20px 0; border-top: 1px solid #e6e8ef; }
.scenic-ai details { padding: 14px 0; border-bottom: 1px solid #e6e8ef; }
.scenic-ai summary { cursor: pointer; font-size: 15px; font-weight: 600; color: #293044; }
.scenic-ai-body { display: grid; gap: 12px; margin-top: 12px; }
.scenic-ai-body small { color: #727b8e; font-size: 13px; line-height: 1.6; }
.scenic-ai-body p { font-size: 15px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.scenic-ai-body button { justify-self: start; padding: 9px 16px; border: 0; border-radius: 20px; color: #315bff; background: #eef1ff; }
.scenic-ai-error { color: #a94343; }

.share-route-map-frame { aspect-ratio:1 / 1; display:grid; place-items:center; }
.share-route-snapshot { display:block; width:100%; height:100%; object-fit:cover; }
.share-route-capturing { margin:0!important; color:var(--muted); font-size:11px; }

/* ===== 产品逻辑层通用钩子（20260913-ab1）：结构/文案归 app.js，皮肤层只做视觉覆盖 ===== */
/* Undo Snackbar：可逆操作的统一撤销入口，挂 body，两新皮肤各自重绘 */
.undo-snackbar { position:fixed; z-index:60; top:62%; bottom:auto; left:50%; display:flex; align-items:center; gap:16px; max-width:min(92vw,460px); padding:16px 16px 16px 22px; border:1px solid #d8deee; border-radius:18px; color:#171c28; background:#fff; box-shadow:0 18px 44px rgba(10,14,26,.38); font-size:15px; transform:translateX(-50%); }
.undo-snackbar[hidden] { display:none; }
.undo-snackbar-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.undo-snackbar-action { flex:0 0 auto; padding:12px 22px; border:0; border-radius:12px; color:#fff; background:var(--accent); font-size:15px; font-weight:700; }
/* persist 失败内联提示条 */
.persist-warning { margin:0 0 14px; padding:10px 14px; border:1px solid #f3c2c7; border-radius:12px; color:#b42332; background:#fff1f2; font-size:12px; }
/* 卡片 flags 行：过夜徽章 + derived 微标签 */
.card-flags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.overnight-badge { display:inline-block; padding:3px 8px; border-radius:999px; color:#3c4a6b; background:#e8edfb; font:500 10px/1.6 "Noto Sans SC",sans-serif; }
.derived-tag { display:inline-block; padding:2px 6px; border-radius:6px; color:#8b93a5; background:#f1f3f7; font-size:11px; line-height:1.4; }
.is-derived { cursor:default; }
/* 疲劳驾驶内联提醒：连接条与下一站卡片之间 */
.fatigue-banner { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 11px; padding:9px 12px; border:1px solid #f0d9b5; border-radius:12px; color:#8a5a12; background:#fff8ec; font-size:11px; line-height:1.5; }
.fatigue-banner button { flex:0 0 auto; padding:5px 10px; border:0; border-radius:8px; color:#fff; background:#d9822b; font-size:11px; }
/* 级联重算 flash：1.2s 渐隐 */
@keyframes valueFlash { 0% { background:#fff0b8; box-shadow:0 0 0 4px rgba(255,214,90,.55); } 100% { background:transparent; box-shadow:none; } }
.value-flash { border-radius:6px; animation:valueFlash 1.2s ease-out; }

/* 捕获长图期间钉住海报宽度：防止 vw 宽度在 html2canvas 重排时收缩产生右侧空白带 */
.share-poster.share-poster-capturing { width: var(--share-capture-width) !important; }


/* ============================================================
   POI 自动 AI 评价盒（Dots 联网评价）
   ============================================================ */
.poi-review { margin-top:12px; padding:11px 12px 10px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.poi-review .section-label { letter-spacing:.12em; }
.poi-review-title { margin:5px 0 6px; font-size:13px; font-weight:600; letter-spacing:-.01em; }
.poi-review-body p { margin:0; font-size:11px; line-height:1.75; white-space:pre-line; }
.poi-review-loading { animation:poiReviewPulse 1.4s ease-in-out infinite; }
@keyframes poiReviewPulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
.poi-review-meta { display:block; margin-top:8px; color:var(--muted); font-size:9px; line-height:1.5; }
.poi-review-error { color:#c2452f; }
.poi-review-retry { margin-top:7px; padding:4px 11px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:transparent; font-size:10px; cursor:pointer; }
.poi-review-lead { font-weight:600; }
.poi-review-more p + p { margin-top:7px; }
.poi-review-toggle { margin-top:8px; padding:4px 12px; border:1px solid var(--line); border-radius:999px; color:var(--accent); background:transparent; font-size:10px; font-weight:600; cursor:pointer; }

/* iPhone 14 Pro（393pt）等窄屏：汇总四宫格数字不再截断 */
@media (max-width: 430px) {
  .summary > div { padding:13px 7px 11px; }
  .summary strong { font-size:11px; letter-spacing:-.02em; }
  .summary-arrival strong { font-size:12px; }
}
/* 日期分隔带：连接线延长穿过分隔带直达下一张卡片（背景覆盖 padding 区） */
.date-divider { padding-bottom:11px; margin-bottom:0; background:linear-gradient(#ccd2df,#ccd2df) 21px 0 / 1px 100% no-repeat; }