/* ═══════════════════════════════════════════════════════════════
   速溜 · 视觉系统
   风格：安静的 2D 动画短片 —— 低饱和的柔和色、扁平的层叠形状、
        圆润的边角、慢而轻的动作。舒服比抢眼重要。
   ═══════════════════════════════════════════════════════════════ */

/* ---------------------------- 令牌 ---------------------------- */
:root{
  /* 柔和色板（去饱和，接近水粉/色纸的质感） */
  --clay:#cfa596;   --clay-s:#f9f1ed;     /* 陶土 */
  --sage:#7fa99b;   --sage-s:#edf4f1;     /* 鼠尾草 */
  --ochre:#cfb27e;  --ochre-s:#faf4e8;    /* 赭黄 */
  --lilac:#a5a1c8;  --lilac-s:#f1f0f8;    /* 淡紫 */
  --haze:#93adc4;   --haze-s:#eef3f7;     /* 雾蓝 */
  --rose:#cfa5b6;   --rose-s:#f9f1f5;     /* 藕粉 */
    --fern:#95af90;   --fern-s:#f0f5ee;     /* 苔绿 */

  /* 语义 */
  --brand:var(--sage); --brand-soft:var(--sage-s); --brand-ink:#68948a;
  --accent:var(--clay); --accent-soft:var(--clay-s);
  --gold:#a3854d; --gold-soft:var(--ochre-s);
  --good:#6f957a; --good-soft:var(--fern-s);
  --warn:#a3854d; --bad:#bb8181; --bad-soft:#f9eded;
  --info:#7797ad; --info-soft:var(--haze-s);

  /* 纸张（暖白，低对比） */
  --bg:#faf8f4; --bg-soft:#fefdfb; --bg-sunk:#f4f1ea;
  --ink:#524f5b; --ink-2:#7d7987; --ink-3:#aaa6b3;
  --line:#ece8df; --line-2:#ddd7cb;

  --shadow-s:0 1px 2px rgba(95,88,78,.03), 0 3px 10px -6px rgba(95,88,78,.08);
  --shadow:0 1px 3px rgba(95,88,78,.03), 0 10px 24px -14px rgba(95,88,78,.12);
  --shadow-l:0 2px 5px rgba(95,88,78,.04), 0 22px 44px -24px rgba(95,88,78,.17);
  --ring:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:32px;
  --bw:1.5px;                                   /* 统一描边粗细，比之前细一半 */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,
         "PingFang SC","Hiragino Maru Gothic ProN","Hiragino Sans GB",
         "Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC",sans-serif;
  --maxw:1180px;
  --ease:cubic-bezier(.28,1.2,.52,1);          /* 轻回弹，比之前收敛 */
  --ease-s:cubic-bezier(.25,.8,.35,1);
}
html[data-theme="dark"]{
  --clay:#d8b0a4; --clay-s:#3b2f2b;
  --sage:#8fbcaf; --sage-s:#243430;
  --ochre:#d9c092; --ochre-s:#383325;
  --lilac:#b6b1d8; --lilac-s:#2d2b3b;
  --haze:#a5bdd1; --haze-s:#26333c;
  --rose:#d8b3c3; --rose-s:#392d33;
  --fern:#a8c1a3; --fern-s:#28322c;
  --brand-ink:#4e7d73; --gold:#d9c092; --good:#a8c1a3; --bad:#d8a3a3; --bad-soft:#3b2c2c; --info:#a5bdd1;
  --bg:#1d1c22; --bg-soft:#26252e; --bg-sunk:#18171b;
  --ink:#eceaf1; --ink-2:#b8b4c1; --ink-3:#8b8795;
  --line:#363347; --line-2:#484455;
  --shadow-s:0 1px 2px rgba(0,0,0,.3), 0 3px 10px -6px rgba(0,0,0,.5);
  --shadow:0 1px 3px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.6);
  --shadow-l:0 2px 5px rgba(0,0,0,.4), 0 22px 44px -24px rgba(0,0,0,.75);
}
@media (prefers-color-scheme:dark){
  html[data-theme="auto"]{
    --clay:#d8b0a4; --clay-s:#3b2f2b; --sage:#8fbcaf; --sage-s:#243430;
    --ochre:#d9c092; --ochre-s:#383325; --lilac:#b6b1d8; --lilac-s:#2d2b3b;
    --haze:#a5bdd1; --haze-s:#26333c; --rose:#d8b3c3; --rose-s:#392d33;
    --fern:#a8c1a3; --fern-s:#28322c;
    --brand-ink:#4e7d73; --gold:#d9c092; --good:#a8c1a3; --bad:#d8a3a3; --bad-soft:#3b2c2c; --info:#a5bdd1;
    --bg:#1d1c22; --bg-soft:#26252e; --bg-sunk:#18171b;
    --ink:#eceaf1; --ink-2:#b8b4c1; --ink-3:#8b8795;
    --line:#363347; --line-2:#484455;
    --shadow-s:0 1px 2px rgba(0,0,0,.3), 0 3px 10px -6px rgba(0,0,0,.5);
    --shadow:0 1px 3px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.6);
    --shadow-l:0 2px 5px rgba(0,0,0,.4), 0 22px 44px -24px rgba(0,0,0,.75);
  }
}

/* ---------------------------- 基础 ---------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15.5px;line-height:1.75;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--line) 42%,transparent) 1px, transparent 0);
  background-size:26px 26px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3,h4{line-height:1.32;letter-spacing:-.012em;margin:0;font-weight:800}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-style:wavy;text-underline-offset:3px}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--ink-3)}
[hidden]{display:none !important}
::selection{background:var(--ochre-s);color:var(--ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box}

/* 背景漂浮色块 */
.bg-mesh{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.bg-mesh i{position:absolute;border-radius:48% 52% 60% 40%/45% 55% 45% 55%;filter:blur(64px);opacity:.26;
  animation:drift 46s ease-in-out infinite}
.bg-mesh i:nth-child(1){width:36rem;height:28rem;left:-9rem;top:-7rem;background:var(--sage);animation-delay:-4s}
.bg-mesh i:nth-child(2){width:32rem;height:25rem;right:-8rem;top:2rem;background:var(--clay);animation-delay:-16s}
.bg-mesh i:nth-child(3){width:28rem;height:23rem;left:38%;top:28rem;background:var(--lilac);animation-delay:-28s;opacity:.2}
.bg-mesh i:nth-child(4){width:24rem;height:19rem;right:14%;top:54rem;background:var(--ochre);animation-delay:-9s;opacity:.18}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}
  33%{transform:translate(2rem,-1.4rem) scale(1.06) rotate(7deg)}
  66%{transform:translate(-1.4rem,1.8rem) scale(.96) rotate(-5deg)}
}

/* ---------------------------- 顶栏 ---------------------------- */
.topbar{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px) saturate(1.6);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  border-bottom:2px dashed color-mix(in srgb,var(--line) 90%,transparent)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand:hover .brand-mark{transform:rotate(-16deg) scale(1.15)}
.brand-mark{font-size:26px;transition:transform .4s var(--ease);display:inline-block}
.brand-txt{display:flex;flex-direction:column;line-height:1.16}
.brand-txt b{font-size:17px;letter-spacing:.1em;font-weight:900}
.brand-txt i{font-size:9.5px;font-style:normal;color:var(--ink-3);letter-spacing:.18em;text-transform:uppercase}
.topbar-actions{display:flex;gap:9px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;
  border:var(--bw) solid var(--line);background:var(--bg-soft);color:var(--ink-2);font-size:15px;
  text-decoration:none;transition:.22s var(--ease)}
.icon-btn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none;
  transform:translateY(-1px) rotate(-3deg);box-shadow:var(--shadow-s)}
.icon-btn:active{transform:translateY(0) scale(.94)}

/* ---------------------------- Hero ---------------------------- */
.hero{padding:52px 0 34px;position:relative}
.hero-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-deco .dd{opacity:.55}

.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 15px;border-radius:999px;
  background:var(--ochre-s);color:var(--gold);font-size:12.5px;font-weight:800;
  border:2px solid color-mix(in srgb,var(--ochre) 40%,transparent);margin-bottom:16px;
  transform:rotate(-.8deg);box-shadow:var(--shadow-s);position:relative;z-index:1}
.hero-title{font-size:clamp(27px,4.6vw,48px);font-weight:900;letter-spacing:-.03em;
  margin-bottom:14px;position:relative;z-index:1}
.hero-title em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.hero-title em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:8px;
  background:var(--brand-soft);border-radius:99px;z-index:-1;transform:rotate(-.6deg)}
.hero-title .hl{position:relative;white-space:nowrap;color:var(--accent)}
.hero-title .hl::after{content:"";position:absolute;left:-4px;right:-4px;bottom:1px;height:11px;
  background:var(--accent-soft);border-radius:99px 99px 60px 80px;z-index:-1;transform:rotate(.8deg)}
.hero-sub{color:var(--ink-2);font-size:15.5px;margin:0 0 26px;max-width:64ch;position:relative;z-index:1}

/* 搜索卡：手账纸片 */
.searchbox{position:relative;z-index:2;background:var(--bg-soft);
  border:var(--bw) solid var(--line);border-radius:var(--r-xl);
  padding:26px 24px 22px;box-shadow:var(--shadow-l);
  animation:cardIn .6s var(--ease) both}
.searchbox::before{content:"";position:absolute;top:-13px;left:50%;width:132px;height:28px;
  transform:translateX(-50%) rotate(-2.2deg);
  background:repeating-linear-gradient(45deg,
      color-mix(in srgb,var(--ochre) 30%,transparent) 0 7px,
      color-mix(in srgb,var(--ochre) 16%,transparent) 7px 14px);
  border-radius:3px;box-shadow:0 3px 8px rgba(90,70,50,.14)}
/* 入场动画只动 transform，不动 opacity。
   动画/过渡在后台标签页或不合成的环境里可能不推进，一旦 opacity 卡在 0，
   内容就永久看不见了 —— 这个代价远大于少一个淡入。 */
@keyframes cardIn{from{transform:translateY(20px) scale(.975)}to{transform:none}}

.row-main{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:end}
.field{display:flex;flex-direction:column;gap:7px;min-width:0;position:relative}
.field label{font-size:12px;font-weight:800;color:var(--ink-2);letter-spacing:.04em;
  display:flex;align-items:center;gap:5px}
.field label i{font-style:normal;font-size:13px}
.field input,.field select,.fake-input{width:100%;height:50px;padding:0 15px;border-radius:var(--r-sm);
  border:var(--bw) solid var(--line);background:var(--bg);transition:.2s var(--ease-s);min-width:0;
  font-weight:600}
.field input::placeholder{font-weight:400;color:var(--ink-3)}
.field input:hover,.field select:hover,.fake-input:hover{border-color:var(--line-2)}
.field input:focus,.field select:focus,.fake-input:focus,.fake-input.on{outline:none;
  border-color:var(--brand);box-shadow:var(--ring);transform:translateY(-1px)}
.field.sm input,.field.sm select,.field.sm .fake-input{height:44px;font-size:14px}
.fake-input{display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;
  font-size:14.5px;user-select:none}
.fake-input .ph{color:var(--ink-3);font-weight:400}
.fake-input .arrow{margin-left:auto;color:var(--ink-3);font-size:11px;transition:transform .25s var(--ease)}
.fake-input.on .arrow{transform:rotate(180deg)}

.swap{width:46px;height:50px;border-radius:var(--r-sm);border:var(--bw) solid var(--line);
  background:var(--bg);color:var(--ink-2);font-size:19px;transition:.35s var(--ease);align-self:end}
.swap:hover{border-color:var(--clay);color:var(--clay);transform:rotate(180deg)}
.swap:active{transform:rotate(180deg) scale(.9)}

.row-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:15px}
.row-tags{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.tags-label{font-size:12px;font-weight:800;color:var(--ink-2);display:flex;align-items:center;gap:5px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:6px 15px;border-radius:999px;border:var(--bw) solid var(--line);background:var(--bg);
  font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.24s var(--ease);user-select:none}
.tag:hover{border-color:var(--sage);transform:translateY(-1px) rotate(-1deg)}
.tag[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:var(--shadow-s);transform:rotate(-.8deg)}
.tag[aria-pressed="true"]:hover{transform:translateY(-1px) rotate(.8deg)}

.go{height:54px;padding:0 34px;border:none;border-radius:999px;color:#fff;font-weight:900;font-size:16px;
  background:linear-gradient(135deg,var(--brand-ink),color-mix(in srgb,var(--brand-ink) 62%, var(--haze)));white-space:nowrap;
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--sage) 70%,transparent);transition:.26s var(--ease);
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;width:100%;justify-content:center;
  position:relative;overflow:hidden}

.go:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px color-mix(in srgb,var(--sage) 70%,transparent)}

.go:active{transform:translateY(0) scale(.985)}
.go:disabled{opacity:.55;cursor:wait;transform:none;filter:grayscale(.3)}
.go .rocket{display:inline-block;transition:transform .3s var(--ease)}
.go:hover .rocket{transform:translateX(4px) rotate(14deg)}

/* 自动补全 */
.ac{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:var(--bg-soft);
  border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-l);
  max-height:300px;overflow:auto;display:none;padding:6px}
.ac.open{display:block;animation:popIn .22s var(--ease)}
@keyframes popIn{from{transform:translateY(-9px) scale(.96)}to{transform:none}}
.ac-item{padding:9px 13px;display:flex;justify-content:space-between;gap:10px;align-items:center;
  cursor:pointer;border-radius:11px;transition:.14s}
.ac-item:hover,.ac-item.on{background:var(--brand-soft);transform:translateX(3px)}
.ac-item b{font-weight:700}
.ac-item small{color:var(--ink-3);font-size:12px}
.ac-item .dot{font-size:10px;padding:1px 8px;border-radius:999px;background:var(--ochre-s);
  color:var(--gold);font-weight:800}

/* 热门 */
.popular{margin-top:26px;display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;position:relative;z-index:1}
.pop-label{font-size:12.5px;font-weight:800;color:var(--ink-2);padding-top:7px;white-space:nowrap;
  display:flex;align-items:center;gap:5px}
.pop-list{display:flex;flex-wrap:wrap;gap:8px}
.pop{padding:6px 15px;border-radius:999px;border:var(--bw) solid var(--line);background:var(--bg-soft);
  font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.24s var(--ease)}
.pop:nth-child(3n){transform:rotate(-.6deg)} .pop:nth-child(3n+1){transform:rotate(.5deg)}
.pop:hover{border-color:var(--clay);color:var(--clay);transform:translateY(-2px) rotate(-1.2deg);
  box-shadow:var(--shadow-s)}

/* ---------------------------- 日期选择器 ---------------------------- */
.dp{position:absolute;top:calc(100% + 10px);left:0;z-index:70;width:min(660px,92vw);
  background:var(--bg-soft);border:var(--bw) solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-l);padding:18px;display:none}
.dp.open{display:block;animation:popIn .26s var(--ease)}
.dp-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.dp-hd b{font-size:15px}
.dp-nav{display:flex;gap:6px}
.dp-nav button{width:32px;height:32px;border-radius:10px;border:var(--bw) solid var(--line);
  background:var(--bg);transition:.2s var(--ease);display:grid;place-items:center;font-size:13px}
.dp-nav button:hover{border-color:var(--brand);color:var(--brand);transform:scale(1.1)}
.dp-nav button:disabled{opacity:.35;cursor:not-allowed;transform:none}
.dp-months{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.dp-m h5{text-align:center;font-size:14px;margin:0 0 8px;font-weight:800}
.dp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.dp-w{font-size:10.5px;color:var(--ink-3);text-align:center;font-weight:800;padding-bottom:3px}
.dp-d{aspect-ratio:1;border:none;background:none;border-radius:11px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;position:relative;
  transition:.16s var(--ease-s);color:var(--ink);line-height:1.1}
.dp-d small{font-size:8px;font-weight:700;color:var(--gold);line-height:1;margin-top:1px}
.dp-d:hover:not(:disabled){background:var(--brand-soft);transform:scale(1.14)}
.dp-d:disabled{color:var(--ink-3);opacity:.35;cursor:not-allowed}
.dp-d.pad{visibility:hidden}
.dp-d.today{box-shadow:inset 0 0 0 2px var(--line-2)}
.dp-d.in{background:var(--brand-soft);border-radius:0}
.dp-d.start,.dp-d.end{background:var(--brand-ink);color:#fff;box-shadow:var(--shadow-s)}
.dp-d.start small,.dp-d.end small{color:#fff}
.dp-d.start{border-radius:11px 0 0 11px}
.dp-d.end{border-radius:0 11px 11px 0}
.dp-d.start.end{border-radius:11px}
.dp-d.hol::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;
  background:var(--clay)}
.dp-d.start.hol::after,.dp-d.end.hol::after{background:#fff}
.dp-ft{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:13px;
  border-top:var(--bw) dashed var(--line);flex-wrap:wrap}
.dp-sum{font-size:13.5px;color:var(--ink-2);font-weight:600}
.dp-sum b{color:var(--brand)}
.dp-quick{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.dp-quick button{padding:5px 12px;border-radius:999px;border:var(--bw) solid var(--line);background:var(--bg);
  font-size:12.5px;font-weight:700;color:var(--ink-2);transition:.2s var(--ease)}
.dp-quick button:hover{border-color:var(--clay);color:var(--clay);transform:translateY(-2px)}
.dp-quick button.ghost{border-style:dashed}
.dp-legend{display:flex;gap:12px;font-size:11.5px;color:var(--ink-3);margin-top:9px}
.dp-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--clay);
  margin-right:4px;vertical-align:1px}

/* ---------------------------- 加载 ---------------------------- */
.loading{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px)}
.loader{text-align:center;width:min(380px,84vw)}
.loader-scene{position:relative;height:76px;overflow:hidden}
.plane{display:inline-block;color:var(--ink-2);animation:fly 2.4s var(--ease-s) infinite}
@keyframes fly{
  0%{transform:translateX(-110px) translateY(4px) rotate(-8deg)}
  50%{transform:translateX(0) translateY(-10px) rotate(4deg)}
  100%{transform:translateX(110px) translateY(4px) rotate(-8deg)}
}
.cloud{position:absolute;color:var(--ink-3);opacity:.55;animation:cloudy 3.4s linear infinite}
.cloud:nth-child(2){left:8%;top:8px;animation-delay:0s}
.cloud:nth-child(3){left:62%;top:36px;animation-delay:-1.6s}
@keyframes cloudy{0%{transform:translateX(64px)}100%{transform:translateX(-110px)}}
.track{height:8px;border-radius:99px;margin:16px 0 12px;background:var(--bg-sunk);overflow:hidden;
  position:relative;border:var(--bw) solid var(--line)}
.track::after{content:"";position:absolute;inset:0;width:40%;border-radius:99px;
  background:linear-gradient(90deg,var(--sage),var(--ochre),var(--clay));animation:slide 1.5s var(--ease-s) infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}
.loader p{color:var(--ink-2);font-size:14.5px;margin:0;font-weight:600;min-height:1.6em}

/* ---------------------------- Tab ---------------------------- */
.tabbar{position:sticky;top:calc(var(--h-top) + var(--h-pb));z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(16px);border-bottom:var(--bw) dashed var(--line);
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:9px 22px;
  max-width:var(--maxw);margin:0 auto}
.tabbar::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:8px 15px;border:var(--bw) solid transparent;background:none;color:var(--ink-3);
  font-size:14px;font-weight:800;border-radius:999px;white-space:nowrap;transition:.24s var(--ease)}
.tab:hover{color:var(--ink);background:var(--bg-sunk);transform:translateY(-2px)}
.tab[aria-selected="true"]{color:#fff;background:var(--brand-ink);border-color:var(--brand-ink);
  box-shadow:var(--shadow-s)}
.tab i{font-style:normal;margin-right:5px;font-size:15px;display:inline-block;transition:transform .3s var(--ease)}
.tab:hover i{transform:scale(1.12) rotate(-5deg)}

/* ---------------------------- 卡片 ---------------------------- */
.panel{padding:28px 0 12px}
.card{background:var(--bg-soft);border:var(--bw) solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow-s);margin-bottom:18px;position:relative;
  transition:.3s var(--ease-s);animation:cardIn .5s var(--ease) both}
.card:hover{box-shadow:var(--shadow);border-color:var(--line-2);transform:translateY(-2px)}
.card>h3{font-size:17px;margin-bottom:5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.card>.sub{color:var(--ink-3);font-size:13px;margin:0 0 16px;line-height:1.65}
.card.tight{padding:17px}
.grid{display:grid;gap:18px}
/* 网格子项默认 min-width:auto，内含 SVG 时会按 viewBox 的固有宽度撑破容器 */
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sec-title{font-size:22px;font-weight:900;letter-spacing:-.02em;margin:28px 0 15px;
  display:flex;align-items:center;gap:10px}
.sec-title:first-child{margin-top:0}
.sec-title small{font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:0}

/* 卡片入场错峰 */
.panel .card:nth-child(1){animation-delay:.02s} .panel .card:nth-child(2){animation-delay:.07s}
.panel .card:nth-child(3){animation-delay:.12s} .panel .card:nth-child(4){animation-delay:.17s}
.panel .card:nth-child(5){animation-delay:.22s} .panel .card:nth-child(n+6){animation-delay:.26s}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 12px;border-radius:999px;
  font-size:12.5px;font-weight:800;background:var(--bg-sunk);color:var(--ink-2);
  border:var(--bw) solid var(--line);transition:.2s var(--ease)}
.pill:hover{transform:translateY(-1px) rotate(-1.5deg)}
.pill.good{background:var(--good-soft);color:var(--good);border-color:transparent}
.pill.warn{background:var(--gold-soft);color:var(--gold);border-color:transparent}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.pill.info{background:var(--info-soft);color:var(--info);border-color:transparent}
.pill.brand{background:var(--brand-soft);color:var(--brand);border-color:transparent}

.kpi{display:flex;flex-direction:column;gap:2px;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--bg-sunk);border:var(--bw) solid transparent;transition:.26s var(--ease)}
.kpi:hover{border-color:var(--line);transform:translateY(-2px);background:var(--bg-soft);
  box-shadow:var(--shadow-s)}
.kpi .v{font-size:25px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--ink);line-height:1.2}
.kpi .l{font-size:12px;color:var(--ink-3);font-weight:700}
.kpi .n{font-size:12px;color:var(--ink-2)}

table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:11.5px;letter-spacing:.05em;color:var(--ink-3);
  font-weight:800;padding:8px 11px;border-bottom:var(--bw) solid var(--line)}
table.t td{padding:10px 11px;border-bottom:1.5px dashed var(--line);vertical-align:top}
table.t tbody tr{transition:.16s}
table.t tbody tr:hover{background:var(--bg-sunk)}
table.t tr:last-child td{border-bottom:none}
table.t td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13px}
.scrollx{overflow-x:auto;margin:0 -22px;padding:0 22px}

ul.bullets{margin:0;padding-left:0;list-style:none}
ul.bullets li{margin:7px 0;color:var(--ink-2);padding-left:1.5em;position:relative}
ul.bullets li::before{content:"◦";position:absolute;left:.35em;color:var(--brand);font-weight:900;font-size:16px}
ul.bullets li b,ul.bullets li strong{color:var(--ink)}
.note{background:var(--bg-sunk);border:2px dashed color-mix(in srgb,var(--brand) 42%,transparent);
  border-radius:var(--r-sm);padding:13px 16px;font-size:13.5px;color:var(--ink-2);margin:13px 0;
  position:relative}
.note.warn{border-color:color-mix(in srgb,var(--ochre) 62%,transparent);background:var(--gold-soft);color:var(--ink)}
.note.bad{border-color:color-mix(in srgb,var(--bad) 48%,transparent);background:var(--bad-soft);color:var(--ink)}
.note b{color:var(--ink)}

svg.chart{display:block;width:100%;max-width:100%;height:auto;overflow:visible}
svg text{font-family:var(--sans)}
.legend{display:flex;flex-wrap:wrap;gap:13px;font-size:12px;color:var(--ink-3);margin-top:11px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:5px;vertical-align:-1px}

/* ---------------------------- 总览头卡 ---------------------------- */
.hdr-card{background:
    linear-gradient(140deg,color-mix(in srgb,var(--sage) 11%,var(--bg-soft)),
                    color-mix(in srgb,var(--clay) 6%,var(--bg-soft)) 56%, var(--bg-soft));
  border:var(--bw) solid var(--line);border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-l);
  margin-bottom:20px;position:relative;overflow:hidden;animation:cardIn .55s var(--ease) both}
.hdr-card::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  border-radius:50%;background:var(--ochre);opacity:.09;pointer-events:none}
.hdr-top{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:flex-start;
  position:relative}
.hdr-title{font-size:clamp(23px,3.2vw,34px);font-weight:900;letter-spacing:-.035em}
.hdr-tag{color:var(--accent);font-size:15px;font-weight:800;margin-top:5px}
.hdr-imp{color:var(--ink-2);font-size:14.5px;margin:15px 0 0;max-width:68ch}
.hdr-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.hdr-meta .pill:nth-child(2n){transform:rotate(-1.4deg)}
.hdr-meta .pill:nth-child(3n){transform:rotate(1.2deg)}
.score-ring{display:grid;place-items:center;text-align:center;min-width:126px}
.score-ring .t{font-size:13.5px;font-weight:900;margin-top:5px}
.score-ring .c{font-size:11.5px;color:var(--ink-3)}

.exportbar{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;position:relative}
.btn{padding:8px 16px;border-radius:999px;border:var(--bw) solid var(--line);background:var(--bg-soft);
  color:var(--ink-2);font-size:13.5px;font-weight:800;text-decoration:none;display:inline-flex;gap:6px;
  align-items:center;transition:.24s var(--ease);cursor:pointer}
.btn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none;
  transform:translateY(-2px);box-shadow:var(--shadow-s)}
.btn:active{transform:translateY(0) scale(.96)}
.btn.primary{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;
  box-shadow:var(--shadow-s)}
.btn.primary:hover{color:#fff;filter:brightness(1.07)}
.btn.tiny{padding:3px 10px;font-size:12px;border-width:2px}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}

/* ---------------------------- 行程 ---------------------------- */
.day{border:var(--bw) solid var(--line);border-radius:var(--r-lg);background:var(--bg-soft);
  margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow-s);transition:.3s var(--ease-s);
  animation:cardIn .5s var(--ease) both;position:relative}
.day:hover{box-shadow:var(--shadow);border-color:var(--line-2)}
.day.drag-over{border-color:var(--brand);border-style:dashed;background:var(--brand-soft)}
.day-hd{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px 20px;background:var(--bg-sunk);border-bottom:var(--bw) dashed var(--line);
  cursor:pointer;flex-wrap:wrap;transition:.2s}
.day-hd:hover{background:color-mix(in srgb,var(--brand) 8%,var(--bg-sunk))}
.day-no{display:flex;align-items:center;gap:12px;min-width:0}
.day-badge{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(140deg,var(--brand-ink),color-mix(in srgb,var(--brand-ink) 60%,var(--haze)));color:#fff;font-weight:900;font-size:15px;
  transform:rotate(-2deg);box-shadow:var(--shadow-s);transition:.3s var(--ease)}
.day:hover .day-badge{transform:rotate(2deg) scale(1.03)}
.day-t b{font-size:15px;display:block;font-weight:800}
.day-t small{color:var(--ink-3);font-size:12.5px}
.day-stat{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chev{color:var(--ink-3);font-size:14px;transition:transform .28s var(--ease);display:inline-block}
.day.collapsed .chev{transform:rotate(-90deg)}
.day.collapsed .day-hd{border-bottom:none}

.tl{padding:8px 20px 16px;position:relative}
.tl::before{content:"";position:absolute;left:calc(20px + 66px);top:4px;bottom:16px;width:3px;
  border-radius:3px;background:repeating-linear-gradient(180deg,var(--line) 0 7px,transparent 7px 13px)}
.ev{display:grid;grid-template-columns:66px minmax(0,1fr);gap:14px;padding:10px 0;position:relative;
  border-radius:var(--r-sm);transition:.2s var(--ease-s)}
.ev:hover{background:var(--bg-sunk)}
.ev-time{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);padding-top:5px;text-align:right;
  line-height:1.5;word-break:keep-all;font-weight:600}
.ev-body{position:relative;padding-left:26px;min-width:0}
.ev-body::before{content:attr(data-icon);position:absolute;left:-12px;top:0;width:27px;height:27px;
  border-radius:50%;background:var(--bg-soft);border:var(--bw) solid var(--line);display:grid;
  place-items:center;font-size:12.5px;z-index:1;transition:.28s var(--ease)}
.ev:hover .ev-body::before{transform:scale(1.08) rotate(-4deg)}
.ev.poi .ev-body::before{border-color:var(--sage)}
.ev.food .ev-body::before{border-color:var(--clay)}
.ev.free .ev-body::before{border-color:var(--lilac)}
.ev.night .ev-body::before{border-color:var(--haze)}
.ev.stay .ev-body::before{border-color:var(--ochre)}
.ev.transit .ev-body::before{border-color:var(--line-2);font-size:11px}
.ev-title{font-weight:750;font-size:14.5px}
.ev-detail{color:var(--ink-3);font-size:13px;margin-top:3px;line-height:1.62}
.ev-cost{float:right;font-family:var(--mono);font-size:12px;color:var(--accent);margin-left:10px;
  font-weight:800}
.ev.transit .ev-title{font-weight:600;color:var(--ink-3);font-size:13px}
.ev-photo{display:inline-block;margin-top:6px;font-size:12px;color:var(--accent);
  background:var(--accent-soft);padding:3px 11px;border-radius:999px;font-weight:700;
  transform:rotate(-1deg)}
.day-foot{padding:13px 20px;border-top:var(--bw) dashed var(--line);font-size:13px;color:var(--ink-2);
  background:var(--bg-sunk)}

/* ---------------------------- 编辑态 ---------------------------- */
.editing .ev{cursor:grab}
.editing .ev[draggable="true"]:active{cursor:grabbing}
.ev-ops{position:absolute;right:0;top:2px;display:flex;gap:4px;opacity:0;transform:translateX(6px);
  transition:.22s var(--ease-s);z-index:3}
.editing .ev:hover .ev-ops,.editing .ev:focus-within .ev-ops{opacity:1;transform:none}
.op{width:28px;height:28px;border-radius:9px;border:var(--bw) solid var(--line);background:var(--bg-soft);
  display:grid;place-items:center;font-size:12px;color:var(--ink-2);transition:.2s var(--ease);padding:0}
.op:hover{transform:translateY(-2px) scale(1.1);border-color:var(--brand);color:var(--brand)}
.op.del:hover{border-color:var(--bad);color:var(--bad)}
.ev.dragging{opacity:.4;transform:scale(.98)}
.ev.drop-target{box-shadow:inset 0 3px 0 var(--brand)}
.ev.just-added{animation:pulseIn .6s var(--ease)}
@keyframes pulseIn{0%{background:var(--brand-soft);transform:scale(.97)}100%{background:transparent;transform:none}}

.editor{background:var(--bg-sunk);border:var(--bw) dashed var(--brand);
  border-radius:var(--r);padding:15px;margin:6px 0;animation:popIn .24s var(--ease)}
.editor .er{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:11px}
.editor label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:800;color:var(--ink-2)}
.editor input,.editor textarea,.editor select{border:var(--bw) solid var(--line);border-radius:10px;
  padding:9px 11px;background:var(--bg-soft);font-size:14px;font-weight:500;width:100%}
.editor input:focus,.editor textarea:focus,.editor select:focus{outline:none;border-color:var(--brand);
  box-shadow:var(--ring)}
.editor textarea{resize:vertical;min-height:64px;line-height:1.6}
.editor .ea{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.icon-pick{display:flex;gap:5px;flex-wrap:wrap}
.icon-pick button{width:34px;height:34px;border-radius:10px;border:var(--bw) solid var(--line);
  background:var(--bg-soft);font-size:16px;transition:.2s var(--ease);padding:0}
.icon-pick button:hover{transform:translateY(-2px) scale(1.12);border-color:var(--brand)}
.icon-pick button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);
  transform:scale(1.08)}

.editbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  padding:13px 17px;border-radius:var(--r);border:var(--bw) dashed var(--line);background:var(--bg-soft)}
.editbar.on{border-color:var(--brand);border-style:solid;background:var(--brand-soft)}
.editbar .grow{flex:1;min-width:120px}
.editbar .search{height:38px;border-radius:999px;border:var(--bw) solid var(--line);background:var(--bg-soft);
  padding:0 15px;font-size:13.5px;min-width:150px;width:100%;max-width:260px;font-weight:600}
.editbar .search:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.day-ops{display:flex;gap:6px;padding:0 20px 14px;flex-wrap:wrap}
.hit{background:var(--ochre-s) !important;box-shadow:inset 0 0 0 2px var(--ochre)}
.dim{opacity:.28}
.edited-flag{font-size:11px;padding:2px 9px;border-radius:999px;background:var(--lilac-s);
  color:var(--lilac);font-weight:800;transform:rotate(-2deg);display:inline-block}

/* 便利贴 */
.stickynote{--sn:var(--ochre);margin:15px 0 4px;padding:15px 18px 16px;border-radius:4px 16px 4px 16px;
  background:color-mix(in srgb,var(--sn) 11%,var(--bg-soft));
  border:2px solid color-mix(in srgb,var(--sn) 42%,transparent);
  box-shadow:var(--shadow-s);transform:rotate(-.4deg);position:relative;transition:.3s var(--ease)}
.stickynote:hover{transform:rotate(.25deg) translateY(-2px);box-shadow:var(--shadow)}
.stickynote::before{content:"";position:absolute;top:-9px;left:22px;width:56px;height:19px;
  transform:rotate(-5deg);border-radius:2px;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--sn) 52%,transparent) 0 6px,
    color-mix(in srgb,var(--sn) 30%,transparent) 6px 12px)}
.stickynote b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.stickynote p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.7}

/* 彩色贴纸 chip */
.chip.sticker{background:hsl(var(--h) 34% 94%);border-color:hsl(var(--h) 26% 84%);
  color:hsl(var(--h) 28% 38%);font-weight:600}
html[data-theme="dark"] .chip.sticker{background:hsl(var(--h) 20% 22%);
  border-color:hsl(var(--h) 20% 34%);color:hsl(var(--h) 38% 78%)}
@media (prefers-color-scheme:dark){
  html[data-theme="auto"] .chip.sticker{background:hsl(var(--h) 20% 22%);
    border-color:hsl(var(--h) 20% 34%);color:hsl(var(--h) 38% 78%)}
}

/* 每月天气条 */
.monthstrip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;margin-top:15px}
.ms{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:11px;
  background:var(--bg-sunk);border:var(--bw) solid transparent;transition:.24s var(--ease);cursor:default}
.ms:hover{transform:translateY(-4px) scale(1.06);border-color:var(--line);background:var(--bg-soft)}
.ms b{font-size:19px;line-height:1}
.ms small{font-size:10px;color:var(--ink-3);font-weight:700}
.ms.on{background:var(--brand-soft);border-color:var(--brand);transform:scale(1.06)}
.ms.on small{color:var(--brand)}

/* 全部完成 */
.celebrate{text-align:center;padding:18px;border-radius:var(--r);margin-bottom:18px;font-weight:900;
  font-size:17px;background:linear-gradient(135deg,var(--sage-s),var(--ochre-s));
  border:var(--bw) dashed var(--sage);color:var(--ink);animation:cheer 1.6s var(--ease) infinite}
@keyframes cheer{0%,100%{transform:rotate(-.8deg) scale(1)}50%{transform:rotate(.8deg) scale(1.015)}}

/* 滚动进场：同样只动 transform，最坏情况就是"没有动画直接出现"。 */
.js-reveal .day,.js-reveal .tipsec{transform:translateY(18px) scale(.985);
  animation:none;transition:transform .55s var(--ease)}
.js-reveal .day.in,.js-reveal .tipsec.in{transform:none}

/* ---------------------------- 价格 ---------------------------- */
.band{position:relative;height:50px;border-radius:14px;overflow:hidden;border:var(--bw) solid var(--line);
  display:flex;margin:20px 0 8px;box-shadow:var(--shadow-s)}
.band-seg{height:100%;display:grid;place-items:center;font-size:11.5px;font-weight:800;transition:.3s}
.band-seg:hover{filter:brightness(1.1)}
.band-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.judge{display:flex;gap:9px;align-items:center;margin-top:16px;flex-wrap:wrap}
.judge input{height:44px;width:158px;padding:0 14px;border-radius:999px;
  border:var(--bw) solid var(--line);background:var(--bg);font-weight:700}
.judge input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
#judgeOut{font-size:13.5px}
.heat{display:grid;gap:3px}
.heat-row{display:grid;grid-template-columns:46px repeat(12,minmax(0,1fr));gap:3px;align-items:center}
.heat-cell{aspect-ratio:1.5;border-radius:6px;display:grid;place-items:center;
  font-size:9.5px;font-family:var(--mono);font-weight:700;color:#5a5664;cursor:default;
  transition:.18s var(--ease)}
.heat-cell:hover{transform:scale(1.22);z-index:2;box-shadow:var(--shadow-s);border-radius:8px}
.heat-lab{font-size:11px;color:var(--ink-3);font-family:var(--mono);text-align:right;
  padding-right:4px;font-weight:700}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal-h{font-size:10.5px;color:var(--ink-3);text-align:center;font-weight:800}
.cal-d{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;font-size:10.5px;border:var(--bw) solid transparent;line-height:1.25;padding:2px;
  transition:.18s var(--ease);color:#3b3340}
.cal-d:hover{transform:scale(1.12);z-index:2;box-shadow:var(--shadow-s)}
.cal-d b{font-size:12.5px;font-weight:800}
.cal-d small{font-family:var(--mono);font-size:9px;opacity:.85;font-weight:700}
.cal-d.target{border-color:var(--ink);box-shadow:0 0 0 3px var(--bg-soft) inset,var(--shadow-s)}
.cal-d.pad{background:transparent !important}

/* 起飞时段价差条 */
.tslot{display:grid;grid-template-columns:118px minmax(60px,1fr) 74px;grid-template-rows:auto auto;
  gap:2px 12px;align-items:center;padding:8px 4px;border-bottom:1.5px dashed var(--line)}
.tslot:last-of-type{border-bottom:none}
.ts-name{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.ts-bar{height:10px;border-radius:99px;background:var(--bg-sunk);overflow:hidden;
  border:1px solid var(--line)}
.ts-bar i{display:block;height:100%;border-radius:99px;opacity:.75;transition:width .5s var(--ease)}
.ts-price{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--ink-2);font-weight:700}
.ts-note{grid-column:1/-1;font-size:12px;color:var(--ink-3);line-height:1.55}

/* ---------------------------- 清单 ---------------------------- */
.check{display:flex;gap:11px;align-items:flex-start;padding:8px 10px;font-size:14px;
  color:var(--ink-2);cursor:pointer;border-radius:10px;transition:.18s;margin:1px 0}
.check:hover{background:var(--bg-sunk)}
.check input{width:19px;height:19px;flex:0 0 auto;margin-top:3px;accent-color:var(--sage);cursor:pointer;
  transition:transform .2s var(--ease)}
.check input:checked{transform:scale(1.15)}
.check input:checked + span{text-decoration:line-through;opacity:.45}
.prog{height:11px;border-radius:99px;background:var(--bg-sunk);overflow:hidden;margin:10px 0 14px;
  border:var(--bw) solid var(--line)}
.prog i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--sage),var(--ochre),var(--clay));
  transition:width .5s var(--ease);background-size:200% 100%;animation:flow 3s linear infinite}
@keyframes flow{to{background-position:200% 0}}

/* ---------------------------- 杂项 ---------------------------- */
.dish{display:flex;gap:13px;padding:13px 10px;border-bottom:1.5px dashed var(--line);
  align-items:flex-start;border-radius:12px;transition:.2s var(--ease-s)}
.dish:hover{background:var(--bg-sunk);transform:translateX(4px)}
.dish:last-child{border-bottom:none}
.dish-em{font-size:26px;flex:0 0 auto;width:38px;text-align:center;transition:.3s var(--ease)}
.dish:hover .dish-em{transform:scale(1.12) rotate(-5deg)}
.dish b{font-size:15px}
.dish .w{font-size:13px;color:var(--ink-2)}
.dish .tp{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.dish .p{font-family:var(--mono);font-size:13.5px;color:var(--accent);font-weight:900;
  margin-left:auto;flex:0 0 auto;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.chip{font-size:13px;padding:4px 13px;border-radius:999px;background:var(--bg-sunk);
  border:var(--bw) solid var(--line);color:var(--ink-2);font-weight:600;transition:.22s var(--ease)}
.chip:nth-child(3n){transform:rotate(-.5deg)} .chip:nth-child(3n+2){transform:rotate(.6deg)}
.chip:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--brand)}
.tipsec{border:var(--bw) solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-soft);
  box-shadow:var(--shadow-s);transition:.3s var(--ease-s);animation:cardIn .5s var(--ease) both}
.tipsec:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tipsec-hd{display:flex;align-items:center;gap:10px;padding:14px 17px;background:var(--bg-sunk);
  border-bottom:var(--bw) dashed var(--line);font-weight:800;font-size:15px}
.tipsec-hd .b{margin-left:auto;font-size:11px;padding:3px 11px;border-radius:999px;color:#fff;
  font-weight:800;transform:rotate(-2deg)}
.tipsec-bd{padding:8px 17px 15px}
.tipsec-bd .row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:8px 0;
  border-bottom:1.5px dashed var(--line);font-size:13.5px}
.tipsec-bd .row:last-child{border-bottom:none}
.tipsec-bd .row.wide{grid-template-columns:minmax(0,1fr)}
.tipsec-bd .k{color:var(--ink-3);font-size:12.5px;font-weight:800}
.tipsec-bd .v{color:var(--ink-2)}
.err{background:var(--bad-soft);color:var(--bad);border:var(--bw) dashed color-mix(in srgb,var(--bad) 42%,transparent);
  border-radius:var(--r);padding:20px 22px;font-size:15px;margin:24px 0;font-weight:700;text-align:center;
  animation:shake .5s var(--ease-s)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

/* Toast */
.toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:100;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--bg);padding:11px 22px;border-radius:999px;font-size:14px;
  font-weight:700;box-shadow:var(--shadow-l);animation:toastIn .34s var(--ease);
  display:flex;align-items:center;gap:8px}
.toast.out{animation:toastOut .3s var(--ease-s) forwards}
/* 入场只动 transform：动 opacity 的话，时钟被冻住时 from{opacity:0}
   会永久停在 0，用户就再也看不到这条提示了。 */
@keyframes toastIn{from{transform:translateY(22px) scale(.9)}to{transform:none}}
/* 这两个可以动 opacity，因为它们失效的方向是内容仍然看得见：
   toastOut 本来就是要把提示藏起来，卡住等于提示留在屏幕上；
   fall 的静态基线是 opacity:0，卡住等于撒花不出现。
   入场与循环动画不在此列 —— 那些一律只能动 transform。 */
@keyframes toastOut{to{opacity:0;transform:translateY(-12px) scale(.94)}}

/* 撒花 */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:95;overflow:hidden}
.confetti i{position:absolute;width:9px;height:14px;border-radius:2px;opacity:0;
  animation:fall 2.4s var(--ease-s) forwards}
@keyframes fall{
  0%{opacity:1;transform:translateY(-10vh) rotate(0deg) scale(1)}
  100%{opacity:0;transform:translateY(105vh) rotate(760deg) scale(.6)}
}

.foot{margin-top:60px;padding:30px 0 44px;border-top:var(--bw) dashed var(--line);
  font-size:12.5px;color:var(--ink-3)}
.foot p{margin:4px 0}

/* ------------------------- 首页 / 子页面 ------------------------- */
/* 两个视图各占一整屏。子页面不带 hero，只有摘要条 + tab + 内容。
   吸顶高度用变量而不是写死 64px —— 顶栏在窄屏会变矮，摘要条也只在
   子页面才存在，写死的话 tab 条会盖住内容或者浮空一条缝。 */
:root{--h-top:64px;--h-pb:0px}
.view[hidden]{display:none}

.planbar{position:sticky;top:var(--h-top);z-index:55;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:var(--bw) dashed var(--line)}
.planbar-in{display:flex;align-items:center;gap:12px;min-height:56px;padding:9px 22px}
.pb-back{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border:var(--bw) solid var(--line);border-radius:999px;
  background:var(--bg-soft);color:var(--ink-2);font-size:13.5px;font-weight:800;
  cursor:pointer;transition:.22s var(--ease)}
.pb-back:hover{color:var(--ink);border-color:var(--brand);transform:translateX(-2px)}
.pb-route{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pb-cities{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;
  letter-spacing:-.015em;line-height:1.2}
.pb-cities b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.pb-cities i{flex:0 0 auto;color:var(--brand);font-style:normal;font-weight:800}
.pb-meta{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pb-mini{display:none}
.pb-actions{flex:0 0 auto;display:flex;gap:8px}
.err-act{margin-top:14px}

/* ---------------------------- 收藏夹 ---------------------------- */
/* 首页那个入口 —— 收藏本身在 #/saved 子页面里 */
.saved-entry{display:flex;align-items:center;gap:13px;width:100%;margin-top:22px;
  padding:14px 16px;text-align:left;cursor:pointer;
  background:linear-gradient(96deg,
    color-mix(in srgb,var(--ochre) 15%,var(--bg-soft)),var(--bg-soft) 66%);
  border:var(--bw) solid color-mix(in srgb,var(--ochre) 42%,var(--line));
  border-radius:16px;transition:.22s var(--ease)}
.saved-entry:hover{transform:translateY(-2px);box-shadow:var(--shadow-s);
  border-color:var(--ochre)}
.se-ico{font-size:21px;line-height:1;flex:0 0 auto}
.se-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.se-txt b{font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.se-txt i{font-style:normal;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.se-go{flex:0 0 auto;font-size:22px;color:var(--ink-3);line-height:1}
.saved-entry:hover .se-go{color:var(--ochre)}

.saved-hint{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin:16px 0 13px}
.saved-hint b{color:var(--ink-2)}
.saved-hint i{font-style:normal;font-family:var(--mono);opacity:.85}

/* 空状态：收藏成了一个可以直接打开的页面，空着的时候得说清怎么用 */
.saved-empty{text-align:center;padding:46px 20px 60px}
.se-emoji{font-size:42px;line-height:1;margin-bottom:14px}
.saved-empty h3{font-size:18px;margin-bottom:9px}
.saved-empty p{font-size:13.5px;color:var(--ink-3);line-height:1.75;
  max-width:430px;margin:0 auto 20px}

.fav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fav{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr) 30px;
  align-items:center;gap:10px;padding:11px 12px;
  background:var(--bg-soft);border:var(--bw) solid var(--line);border-radius:14px;
  cursor:pointer;transition:.2s var(--ease);
  /* 拖动时用 transform 而不是改高度，避免整列抖 */
  will-change:transform}
.fav:hover{border-color:var(--brand);transform:translateX(2px)}
.fav:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fav.star{background:linear-gradient(97deg,
  color-mix(in srgb,var(--ochre) 13%,var(--bg-soft)),var(--bg-soft) 62%);
  border-color:color-mix(in srgb,var(--ochre) 46%,var(--line))}
/* 「拿起来了」要一眼能看出来，否则用户不知道现在可以拖 */
.fav.dragging{border-color:var(--brand);box-shadow:var(--shadow-l);
  transform:scale(1.03) rotate(-.5deg);z-index:15}
.fav.dragging .fav-grip{color:var(--brand)}
.fav-list.dragging-on .fav:not(.dragging){transition:transform .16s var(--ease)}

/* 手柄是唯一禁用触屏滚动的地方 —— 整张卡都禁的话页面就滑不动了 */
.fav-grip{border:0;background:none;color:var(--ink-3);font-size:15px;line-height:1;
  padding:6px 2px;cursor:grab;touch-action:none;font-family:var(--mono)}
.fav-grip:active{cursor:grabbing;color:var(--brand)}
.fav:hover .fav-grip{color:var(--ink-2)}

.fav-body{min-width:0}
.fav-t{display:flex;align-items:center;gap:6px;min-width:0}
.fav-star{font-style:normal;color:var(--ochre);font-size:13px;flex:0 0 auto}
.fav-name{font-size:15px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-m{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.fav-chip{font-size:11.5px;color:var(--ink-3);background:var(--bg-sunk);
  border-radius:999px;padding:2px 8px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fav-note{font-size:12px;color:var(--ink-2);margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-more{border:0;background:none;color:var(--ink-3);font-size:17px;line-height:1;
  padding:4px 6px;border-radius:8px;cursor:pointer}
.fav-more:hover{background:var(--bg-sunk);color:var(--ink)}

/* 长按 / 右键出来的菜单 */
.fav.menu-open{border-color:var(--brand);z-index:12}
.fav-menu{position:absolute;right:8px;top:calc(100% - 6px);z-index:20;min-width:168px;
  display:flex;flex-direction:column;padding:5px;
  background:var(--bg);border:var(--bw) solid var(--line);border-radius:13px;
  box-shadow:var(--shadow-l);
  /* 入场只动 transform：动 opacity 的话时钟被冻住就永远看不到菜单 */
  animation:favMenuIn .16s var(--ease)}
@keyframes favMenuIn{from{transform:translateY(-5px) scale(.97)}to{transform:none}}
.fav-menu button{text-align:left;border:0;background:none;color:var(--ink);
  font-size:13.5px;font-weight:700;padding:9px 11px;border-radius:9px;cursor:pointer;
  white-space:nowrap}
.fav-menu button:hover{background:var(--bg-sunk)}
.fav-menu button.danger{color:var(--bad)}
.fav-menu button.danger:hover{background:var(--bad-soft)}

/* 就地改名 */
.fav.editing{cursor:default}
.fav-edit{display:flex;flex-direction:column;gap:7px}
.fav-in{width:100%;font:inherit;font-size:14px;font-weight:700;color:var(--ink);
  background:var(--bg);border:var(--bw) solid var(--line);border-radius:9px;
  padding:8px 10px}
.fav-in.sm{font-size:12.5px;font-weight:600}
.fav-in:focus{outline:0;border-color:var(--brand)}
.fav-edit-ops{display:flex;gap:7px}
.btn.sm{padding:6px 13px;font-size:12.5px}

.icon-btn.on{color:var(--ochre);border-color:color-mix(in srgb,var(--ochre) 55%,var(--line))}

/* 页脚备案号 */
.filings{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin-top:10px;font-size:12px;color:var(--ink-3)}
.filings a{color:var(--ink-3);text-decoration:none}
.filings a:hover{color:var(--brand);text-decoration:underline}
.psb-ico{font-style:normal;margin-right:4px;opacity:.8}
.fl-sep{opacity:.5}
@media print{ .filings{display:none} }

/* ---------------------------- 响应式 ---------------------------- */
@media (max-width:900px){
  .row-main{grid-template-columns:minmax(0,1fr);gap:11px}
  .swap{width:100%;height:38px;transform:rotate(90deg);margin:-3px 0}
  .swap:hover{transform:rotate(270deg) scale(1.04)}
  .row-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .hero{padding:28px 0 22px}
  .hero-deco{display:none}
  .ev{grid-template-columns:56px minmax(0,1fr);gap:11px}
  .tl::before{left:calc(20px + 56px)}
  .heat-row{grid-template-columns:34px repeat(12,minmax(0,1fr))}
  .heat-cell{font-size:0}
  .dp{width:min(94vw,420px);left:50%;transform:translateX(-50%)}
  .dp-months{grid-template-columns:minmax(0,1fr)}
  .dp-m:nth-child(2){display:none}
  .ev-ops{opacity:1;transform:none;position:static;margin-bottom:6px}
}
@media (max-width:900px){
  .monthstrip{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:700px){
  /* 窄屏（也就是触屏）不显示手柄：长按就能拿起来，手柄只是给鼠标用的，
     而且那么小一块手指本来也按不准 */
  .fav{grid-template-columns:minmax(0,1fr) 30px;gap:8px;padding:11px 12px}
  .fav-grip{display:none}
  .hint-wide{display:none}         /* 手柄都藏了，这句就成了废话 */
  .fav-name{font-size:14.5px}
  .fav-menu{left:8px;right:8px;min-width:0}
  /* 窄屏摘要条只留返回箭头，把宽度全让给城市名 */
  .planbar-in{gap:9px;padding:8px 15px;min-height:50px}
  .pb-back{padding:8px 11px}
  .pb-back-txt{display:none}
  .pb-cities{font-size:15.5px;gap:7px}
  .pb-cities b{max-width:34vw}
  .pb-meta{font-size:11.5px}
  .pb-full{display:none}
  .pb-mini{display:inline}
}
@media (max-width:390px){
  /* 极窄屏（iPhone SE 一档）让它换行，别用省略号把日期和人数吃掉 ——
     摘要条高十几像素无所谓，信息缺了才是问题 */
  .pb-meta{white-space:normal;text-overflow:clip;line-height:1.35}
  .pb-cities b{max-width:30vw}
}
@media (max-width:560px){
  .doodles .dd:not(:first-child){display:none}
  body{font-size:15px}
  .wrap{padding:0 15px}
  .tabbar{padding:8px 15px}
  .card{padding:16px}
  .hdr-card{padding:19px}
  .row-opts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .scrollx{margin:0 -16px;padding:0 16px}
  .searchbox{padding:22px 16px 18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}
@media print{
  .topbar,.hero,.tabbar,.planbar,.exportbar,.foot,.bg-mesh,.loading,.editbar,.ev-ops,.day-ops,
  .saved-entry,.saved-hint,.fav-menu,
  .toast-wrap,.confetti,.doodles,.people{display:none !important}
  body{background:#fff;font-size:11pt;background-image:none}
  .panel{display:block !important;page-break-inside:avoid;padding:0}
  .card,.day,.tipsec{break-inside:avoid;box-shadow:none;border-color:#ddd;animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   2D 插画 · 小人族 · 花式标题
   规则同前：入场与循环动画只动 transform / translate，
   静态 opacity 可以用，但绝不用动画把 opacity 从 0 推上来。
   ═══════════════════════════════════════════════════════════════ */

/* ------------------- 目的地简画（头卡背景） -------------------
   原来是页首单独一条填色插画带。填色画压在文字底下会跟标题抢注意力，
   所以换成线稿铺在头卡里当水印：左侧用卡片底色遮到几乎实心保住标题，
   往右逐渐透出笔画。字始终在 z-index 1 上。                        */
.hdr-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  color:var(--ink-3);border-radius:inherit}
.hdr-bg .sk{position:absolute;right:0;bottom:0;width:100%;height:100%;display:block}
.hdr-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    var(--bg-soft) 0%,
    color-mix(in srgb,var(--bg-soft) 92%,transparent) 30%,
    color-mix(in srgb,var(--bg-soft) 64%,transparent) 58%,
    color-mix(in srgb,var(--bg-soft) 42%,transparent) 100%)}
.hdr-card{position:relative;overflow:hidden}
.hdr-card>*:not(.hdr-bg){position:relative;z-index:1}
@media (max-width:560px){
  /* 窄屏文字占满整卡，水印再淡一档，免得跟标题挤 */
  .hdr-bg::after{background:linear-gradient(160deg,
    var(--bg-soft) 0%,
    color-mix(in srgb,var(--bg-soft) 90%,transparent) 46%,
    color-mix(in srgb,var(--bg-soft) 70%,transparent) 100%)}
}

.il-cloud{animation:cloudDrift var(--d,60s) linear infinite}
@keyframes cloudDrift{from{translate:-140px 0}to{translate:940px 0}}
.il-sun{transform-box:fill-box;transform-origin:center;animation:sunBreathe 7s ease-in-out infinite}
@keyframes sunBreathe{0%,100%{scale:1}50%{scale:1.07}}
.il-bird{animation:birdFly var(--d,26s) linear infinite}
@keyframes birdFly{from{translate:-40px 0}to{translate:860px -34px}}
.il-flake{animation:snowFall var(--d,12s) linear infinite}
@keyframes snowFall{from{translate:0 -30px}to{translate:-22px 240px}}

/* ---------------------------- 小人：沿页面底边一直溜达 ---------------------------- */
/* 上一版绕视口一圈，结果 3/4 的路程要么在屏幕外、要么被顶栏挡住，
   看起来就像"走一趟就没了"。改成贴着底边来回散步：
   walkX 用 alternate 无限往返，faceX 的周期是它的两倍、恰好在折返点翻面 ——
   走到边上就转身往回走，永远不会停。 */
.people{position:fixed;left:0;right:0;bottom:0;height:52px;z-index:3;
  pointer-events:none;overflow:visible}
.pp-wrap{position:absolute;bottom:0;left:calc(var(--i) * 42px);width:30px;height:46px;
  animation:walkX var(--t,54s) linear infinite alternate}
.pp-svg{width:100%;height:100%;opacity:.5;overflow:visible;transform-origin:center;
  animation:faceX calc(var(--t,54s) * 2) steps(1,end) infinite}
.pp{animation:sway .74s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.pp-l1,.pp-l2,.pp-a1,.pp-a2,.pp-balloon{transform-box:fill-box}
.pp-l1{animation:stepUp .37s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.pp-l2{animation:stepUp .37s ease-in-out infinite alternate-reverse;animation-delay:var(--dl,0s)}
.pp-a1{transform-origin:top right;
  animation:armSwing .74s ease-in-out infinite alternate-reverse;animation-delay:var(--dl,0s)}
.pp-a2{transform-origin:top left;
  animation:armSwing .74s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.pp-balloon{transform-origin:bottom center;animation:floaty 2.8s ease-in-out infinite}
@keyframes walkX{from{translate:-170px 0}to{translate:calc(100vw + 60px) 0}}
@keyframes faceX{0%,49.99%{transform:scaleX(1)}50%,100%{transform:scaleX(-1)}}
@keyframes sway{from{rotate:-2.2deg;translate:0 0}to{rotate:2.2deg;translate:0 -1.2px}}
@keyframes stepUp{from{translate:0 0}to{translate:0 -2.6px}}
@keyframes armSwing{from{rotate:9deg}to{rotate:-9deg}}
@keyframes floaty{0%,100%{rotate:-5deg;translate:0 0}50%{rotate:5deg;translate:0 -1.8px}}

/* ---------------------------- 花式标题 ---------------------------- */
.hero-title{perspective:600px}
.hero-title .ch{display:inline-block;white-space:pre;
  animation:chRise .62s var(--ease) both;
  animation-delay:calc(var(--i) * .028s)}
@keyframes chRise{
  from{transform:translateY(16px) rotateX(-42deg) scale(.94)}
  to{transform:none}
}
.hero-title em .ch{animation:chRise .62s var(--ease) both, chWave 5.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * .028s), calc(1s + var(--i) * .07s)}
@keyframes chWave{0%,100%{translate:0 0}50%{translate:0 -3px}}
.hero-title .hl .ch{animation:chRise .62s var(--ease) both, chWave 4.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * .028s), calc(1.2s + var(--i) * .06s)}

/* 手绘感的下划线：自己画出来 */
.squig{position:absolute;left:-4px;right:-4px;bottom:-7px;height:11px;overflow:visible;
  pointer-events:none}
.squig path{fill:none;stroke:var(--ul,var(--sage));stroke-width:4;stroke-linecap:round;
  opacity:.42;stroke-dasharray:var(--len,300);stroke-dashoffset:0;
  animation:draw 1.1s var(--ease-s);animation-delay:var(--d,.4s)}
@keyframes draw{from{stroke-dashoffset:var(--len,300)}to{stroke-dashoffset:0}}
.hero-title em::after,.hero-title .hl::after{display:none}
.hero-title em,.hero-title .hl{position:relative}
.hero-title .hl{color:var(--clay)}

/* ---------------------------- 方案选择 ---------------------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;margin:4px 0 6px}
.plan{position:relative;text-align:left;padding:16px 17px 15px;border-radius:var(--r);
  border:var(--bw) solid var(--line);background:var(--bg-soft);cursor:pointer;
  transition:.26s var(--ease);display:flex;flex-direction:column;gap:7px}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.plan[aria-pressed="true"]{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--bg-soft));
  box-shadow:var(--shadow)}
.plan[aria-pressed="true"]::after{content:"✓";position:absolute;top:11px;right:13px;width:21px;height:21px;
  border-radius:50%;background:var(--brand-ink);color:#fff;font-size:12px;display:grid;place-items:center;
  font-weight:900}
.plan.blocked{opacity:.55}
.plan.blocked:hover{transform:none}
.plan-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan-hd b{font-size:15.5px}
.plan-tag{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.plan-route{font-size:12px;color:var(--ink-3);line-height:1.7;
  display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.plan-route i{font-style:normal;padding:1px 8px;border-radius:999px;background:var(--bg-sunk);
  border:1px solid var(--line)}
.plan-route s{text-decoration:none;color:var(--line-2)}
.plan-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.plan-why{font-size:12px;color:var(--ink-2);line-height:1.66;margin:0;padding-left:1.1em;position:relative}
.plan-why::before{content:"·";position:absolute;left:.25em;color:var(--brand);font-weight:900}
.plan-why.warn{color:var(--bad)}
.dots{display:inline-flex;gap:2px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.dots i.on{background:var(--ochre)}

/* 路线地图（多城市连线） */
.legmap{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:thin}
.legmap .lm{flex:0 0 auto;display:flex;align-items:center;gap:0}
.lm-node{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:82px;text-align:center}
.lm-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:14px;
  background:var(--bg-soft);border:2px solid var(--brand-ink);color:var(--brand-ink);font-weight:900;
  transition:.25s var(--ease)}
.lm-node:hover .lm-dot{transform:scale(1.12) rotate(-4deg)}
.lm-name{font-size:12.5px;font-weight:700;line-height:1.35;max-width:96px}
.lm-days{font-size:11px;color:var(--ink-3)}
.lm-link{flex:0 0 auto;min-width:64px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:0 4px;margin-top:-16px}
.lm-line{width:100%;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px)}
.lm-mode{font-size:10.5px;color:var(--ink-3);white-space:nowrap}

@media (max-width:900px){
  .people{display:none}          /* 小屏内容已经很满，不再让小人抢注意力 */
  .dd-flytrack{display:none}
  .doodles .dd{scale:.8;transform-origin:top left}
  .plans{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .people{display:none}
  .dd,.dd *{animation:none !important}
  .il-cloud,.il-sun,.il-bird,.il-flake,.hero-title .ch,.squig path{animation:none !important}
}

/* ---------------------------- 简笔画涂鸦 ---------------------------- */
/* 每个页面顶部留白里的小装饰：太阳的光芒慢慢转、云朵来回飘、
   星星一闪一闪、纸飞机隔一阵横穿一次。全部 transform 动画，
   pointer-events:none，永远不挡内容。 */
.panel{position:relative}
.doodles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.dd{position:absolute;pointer-events:none;opacity:.62;color:var(--ink-3);line-height:0}
.dd svg{display:block;width:100%;height:auto}
.dd-drift{animation:ddDrift 10s ease-in-out infinite alternate}
.dd-bob{animation:ddBob 5.2s ease-in-out infinite alternate}
.dd-tw{transform-box:fill-box;transform-origin:center;
  animation:ddTwinkle 2.1s ease-in-out infinite alternate}
.dd .dd-tw{animation:ddTwinkle 2.1s ease-in-out infinite alternate}
.dd-rays{transform-box:fill-box;transform-origin:center;animation:ddSpin 48s linear infinite}
.dd-sway{transform-box:fill-box;transform-origin:left center;display:inline-block;
  animation:ddSway 3.6s ease-in-out infinite alternate}
.dd-flytrack{left:0;right:0;height:0;overflow:visible}
.dd-flymove{position:absolute;left:0;top:0;width:96px;
  animation:ddFly var(--fd,40s) linear infinite}
@keyframes ddDrift{from{translate:-12px 0}to{translate:12px 0}}
@keyframes ddBob{from{translate:0 0;rotate:-2deg}to{translate:0 -7px;rotate:2deg}}
@keyframes ddTwinkle{from{scale:.72;rotate:-8deg}to{scale:1.15;rotate:8deg}}
@keyframes ddSpin{to{rotate:360deg}}
@keyframes ddSway{from{rotate:-4deg}to{rotate:4deg}}
@keyframes ddFly{from{translate:-130px 14px}to{translate:100vw -10px}}

/* ---------------------------- 连不上后端时的引导层 ---------------------------- */
.connect{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);overflow:auto}
.connect-box{width:min(520px,100%);background:var(--bg-soft);border:var(--bw) solid var(--line);
  border-radius:var(--r-xl);padding:30px 28px;box-shadow:var(--shadow-l);text-align:left}
.connect-icon{font-size:38px;line-height:1;margin-bottom:10px}
.connect-box h2{font-size:21px;margin-bottom:8px}
.connect-box p{color:var(--ink-2);font-size:14px;margin:0 0 16px;line-height:1.75}
.connect-steps{margin:0 0 18px;padding-left:1.3em;color:var(--ink-2);font-size:14px;line-height:1.9}
.connect-steps b{color:var(--ink)}
.connect-steps code{font-family:var(--mono);font-size:12.5px;background:var(--bg-sunk);
  padding:2px 7px;border-radius:6px;border:1px solid var(--line)}
.connect-row{display:flex;gap:9px;flex-wrap:wrap}
.connect-row input{flex:1;min-width:180px;height:46px;padding:0 14px;border-radius:var(--r-sm);
  border:var(--bw) solid var(--line);background:var(--bg);font-weight:600;font-size:15px}
.connect-row input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.connect-msg{min-height:1.5em;margin:12px 0 14px !important;font-size:13.5px;font-weight:600}
.connect-msg.good{color:var(--good)}
.connect-msg.bad{color:var(--bad)}

/* ── 历年回顾：年份 / 月份多选下拉 ─────────────────────── */
.msel-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
.msel-hint{font-size:12px;color:var(--ink-3)}
.msel{position:relative}
.msel-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;
  border:var(--bw) solid var(--line);border-radius:999px;background:var(--bg);
  color:var(--ink);font-size:13px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.msel-btn:hover{border-color:var(--brand)}
.msel-btn[aria-expanded="true"]{border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.msel-tag{color:var(--ink-3);font-size:12px}
.msel-sum{font-weight:700}
.msel-caret{color:var(--ink-3);font-size:10px;transition:transform .2s}
.msel-btn[aria-expanded="true"] .msel-caret{transform:rotate(180deg)}
.msel-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:40;min-width:150px;
  max-height:264px;overflow-y:auto;background:var(--bg-soft);
  border:var(--bw) solid var(--line-2);border-radius:14px;padding:6px;
  box-shadow:var(--shadow);animation:mselIn .16s var(--ease) both}
@keyframes mselIn{from{transform:translateY(-4px) scale(.98)}to{transform:none}}
.msel-acts{display:flex;gap:6px;padding:2px 4px 6px;border-bottom:1px dashed var(--line);margin-bottom:4px}
.msel-acts button{border:none;background:none;color:var(--brand-ink);font-size:12px;font-weight:700;
  cursor:pointer;padding:3px 7px;border-radius:8px}
.msel-acts button:hover{background:var(--brand-soft)}
.msel-opt{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;
  font-size:13.5px;cursor:pointer;white-space:nowrap}
.msel-opt:hover{background:var(--brand-soft)}
.msel-opt input{accent-color:var(--brand-ink);width:15px;height:15px;cursor:pointer;margin:0}
/* 历年回顾按方式展开时，同一年的几行归成一组，靠上边线分隔 */
.t tr.yr-head>td{border-top:1.5px solid var(--line-2)}
.t tr.yr-head:first-child>td{border-top:none}

/* ── 历年回顾：日期日历（卡片内的行内面板，不是弹层） ────────
   年历有 366 个格子，塞进 400px 的下拉里每格只剩 17px，数字会挤成一团。
   所以给它整张卡片的宽度：auto-fill + minmax 让列数自己长，
   宽屏 4-5 列、手机 1 列，格子在哪种宽度下都留得住间距。            */
.yrcal{margin:0 0 16px;padding:14px 15px 12px;background:var(--bg);
  border:var(--bw) solid var(--line);border-radius:14px;
  animation:mselIn .18s var(--ease) both}
.cal-acts{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.cal-acts button{border:var(--bw) solid var(--line);background:var(--bg-soft);
  color:var(--brand-ink);font-size:12px;font-weight:700;cursor:pointer;
  padding:4px 11px;border-radius:999px}
.cal-acts button:hover{border-color:var(--brand);background:var(--brand-soft)}
.cal-tip{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.cal-msg{padding:22px 10px;text-align:center;font-size:13px;color:var(--ink-3);line-height:1.8}
.calyr{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px 18px}
.calmo{min-width:0}
.calmo.off{opacity:.42}
.calmo-h{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  font-size:12.5px;font-weight:800;color:var(--ink-2);padding:0 0 6px 2px}
.calmo-h:hover{color:var(--brand-ink)}
.calmo-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cald{position:relative;aspect-ratio:1;min-height:22px;padding:0;font-size:11px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;background:var(--bg-soft);color:var(--ink-3);
  transition:background .15s,color .15s,border-color .15s}
.cald:hover{border-color:var(--lvl)}
.cald[aria-pressed="true"]{background:color-mix(in srgb,var(--lvl) 22%,var(--bg-soft));
  border-color:color-mix(in srgb,var(--lvl) 46%,transparent);color:var(--ink);font-weight:700}
.cald.hol::after{content:"";position:absolute;top:2px;right:2px;width:4px;height:4px;
  border-radius:50%;background:var(--clay)}
.cal-lgd{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:13px;padding-top:9px;
  border-top:1px dashed var(--line);font-size:11.5px;color:var(--ink-3)}
.cal-lgd span{display:inline-flex;align-items:center;gap:5px}
.cal-lgd i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ── 全程手绘路线图 ──────────────────────────────────────
   路、图钉、车子用 SVG 画（要的就是手绘感），文案交给 HTML —— 
   这样在手机上文字照样清晰，不会被整体缩放糊掉。            */
.jny-defs{position:absolute;width:0;height:0;overflow:hidden}
.jny{position:relative;margin-top:2px}
.jny-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 13px;align-items:stretch}
.jny-rail{position:relative;min-height:34px}
.jny-road{position:absolute;left:0;top:0;width:56px;height:100%}
.jny-mark{position:absolute;left:50%;top:-2px;transform:translateX(-50%);
  width:38px;line-height:0;color:var(--ink-2)}
.jny-mark.home{width:44px;top:-4px}
.jny-veh{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;line-height:0;color:var(--ink-2);
  background:var(--bg-soft);border-radius:999px;padding:2px 3px}
.jny-body{padding:0 0 15px}
.jny-end .jny-body{padding-bottom:15px}

/* 站点卡：不规则圆角 —— 一点手绘的歪，比正圆角亲切 */
.jny-stop{background:var(--bg);border:var(--bw) solid var(--line);
  border-radius:17px 11px 19px 12px;padding:11px 14px 10px}
.jny-stop:nth-of-type(even){border-radius:12px 18px 11px 17px}
.jny-stop.start{background:var(--brand-soft);border-color:transparent}
.jny-hd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.jny-hd b{font-size:15.5px;letter-spacing:-.01em}
.jny-when{font-size:12px;color:var(--ink-3)}
.jny-sub{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin-top:3px}
.jny-facts{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.jf{display:grid;grid-template-columns:26px 22px minmax(0,1fr);align-items:center;gap:7px;
  font-size:12.5px;line-height:1.6}
.jf-i{line-height:0;color:var(--ink-2)}
.jf-k{color:var(--ink-3);font-size:11.5px;font-weight:700}
.jf-v{color:var(--ink);min-width:0}

/* 交通段。注意别给整行加 align-items:center —— 那样 rail 不再拉伸，
   路面会比行高矮几个像素，一条连续的路上就凭空多出几道断口。
   只让文案自己居中。                                              */
.jny-hop .jny-rail{min-height:56px}
.jny-hopbody{align-self:center;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-2);padding:6px 0}
.jny-hopbody b{color:var(--ink);font-weight:700}
.jny-hopbody span{color:var(--ink-3);font-size:12px}
.jny-hop.go-in .jny-hopbody b,.jny-hop.go-back .jny-hopbody b{color:var(--brand-ink)}
.jny-steam{animation:ddSway 4.5s ease-in-out infinite}

@media (max-width:560px){
  .jny-row{grid-template-columns:44px minmax(0,1fr);gap:0 10px}
  .jny-road{width:44px}
  .jny-mark{width:32px}
  .jny-mark.home{width:36px}
  .jny-veh{width:38px}
  .jf{grid-template-columns:22px 20px minmax(0,1fr);gap:6px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){ .jny-steam{animation:none} }
@media print{
  .jny-row{break-inside:avoid;page-break-inside:avoid}
  .jny-stop{border-color:#ccc}
}
.jny-city{font-size:11.5px;color:var(--brand-ink);background:var(--brand-soft);
  padding:1px 8px;border-radius:999px;font-weight:700}
.jny-same{color:var(--ink-3);font-size:12px}
.jny-hop.night .jny-hopbody b{color:var(--ink-2);font-weight:600}
.jny-hop.night .jny-rail{min-height:44px}

/* ── 页面顶部溜达的小女孩 ─────────────────────────────────
   顶栏底下到首屏第一个内容之间正好有一条 50px 的空白通道，她就走在
   那儿：不盖 logo 和按钮，也不压任何文字。

   刻意用 absolute 而不是 fixed —— fixed 会让她一路飘在正文上面，
   往下翻攻略时糊在表格和图上。她属于"页面顶部"，就该随页面滚走。

   走到左右边界转身（walkX alternate + faceX 双周期翻面），永远走不完。
   动效只动 transform：时钟停了也只是站住，不会消失。            */
.girl{position:absolute;top:0;left:0;right:0;height:50px;z-index:2;
  pointer-events:none;overflow:hidden}
.gl-wrap{position:absolute;bottom:0;left:0;width:34px;height:46px;
  animation:walkX var(--gt,38s) linear infinite alternate}
.gl-svg{width:100%;height:100%;opacity:.62;overflow:visible;transform-origin:center;
  animation:faceX calc(var(--gt,38s) * 2) steps(1,end) infinite}
.gl{animation:glBounce .52s ease-in-out infinite alternate}
.gl-a1,.gl-a2,.gl-l1,.gl-l2,.gl-hair1,.gl-hair2,.gl-ribbon,.gl-note{transform-box:fill-box}
/* 双臂大开大合：幅度 ±42°，是普通小人的四倍多 */
.gl-a1{transform-origin:top right;animation:glArmA .52s ease-in-out infinite alternate}
.gl-a2{transform-origin:top left;animation:glArmB .52s ease-in-out infinite alternate}
.gl-l1{transform-origin:top center;animation:glLegA .26s ease-in-out infinite alternate}
.gl-l2{transform-origin:top center;animation:glLegB .26s ease-in-out infinite alternate}
.gl-hair1{transform-origin:top right;animation:glHair .52s ease-in-out infinite alternate}
.gl-hair2{transform-origin:top left;animation:glHair .52s ease-in-out infinite alternate-reverse}
.gl-ribbon{transform-origin:top left;animation:glHair .7s ease-in-out infinite alternate}
.gl-note{transform-origin:bottom left;animation:glNote 2.6s ease-in-out infinite}
@keyframes glBounce{from{rotate:-3.4deg;translate:0 0}to{rotate:3.4deg;translate:0 -2.4px}}
@keyframes glArmA{from{rotate:-42deg}to{rotate:26deg}}
@keyframes glArmB{from{rotate:38deg}to{rotate:-30deg}}
@keyframes glLegA{from{rotate:-15deg}to{rotate:15deg}}
@keyframes glLegB{from{rotate:15deg}to{rotate:-15deg}}
@keyframes glHair{from{rotate:-13deg}to{rotate:13deg}}
@keyframes glNote{0%{translate:0 0;scale:1}50%{translate:3px -7px;scale:1.15}100%{translate:0 0;scale:1}}
@media (max-width:560px){ .girl{display:none} }  /* 窄屏顶栏本来就挤 */
@media (prefers-reduced-motion:reduce){
  .gl-wrap,.gl-svg,.gl,.gl-a1,.gl-a2,.gl-l1,.gl-l2,
  .gl-hair1,.gl-hair2,.gl-ribbon,.gl-note{animation:none}
}
@media print{ .girl{display:none} }

/* ── 环形行程总览（路线图卡片顶部） ─────────────────────── */
.rg-wrap{margin:0 0 6px;display:flex;justify-content:center}
.rg{width:100%;max-width:560px;height:auto;display:block}
.rg text{font-family:inherit}
@media (max-width:560px){
  /* 窄屏 560 宽的图缩到 ~330，站名会挤成一团；文字整体放大回可读 */
  .rg text{font-size:14px}
  .rg-wrap{margin-bottom:2px}
}

/* ── 陆运/水运票价（价格情报） ─────────────────────────── */
.gf{border:var(--bw) solid var(--line);border-radius:13px;padding:11px 13px;margin-bottom:10px;
  background:var(--bg)}
.gf-hd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.gf-hd b{font-size:14.5px}
.gf-rt{margin-left:auto;font-size:13px;font-weight:700;color:var(--brand-ink)}
.gf-seats{display:flex;gap:8px;flex-wrap:wrap}
.gf-seat{display:inline-flex;flex-direction:column;gap:1px;padding:6px 12px;border-radius:10px;
  background:var(--bg-soft);border:1px solid var(--line);min-width:96px}
.gf-seat i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.gf-seat b{font-size:14px;font-variant-numeric:tabular-nums}
.gf-note{margin-top:8px;font-size:12px;color:var(--ink-3);line-height:1.65}
@media (max-width:560px){ .gf-rt{margin-left:0;width:100%} .gf-seat{min-width:0;flex:1} }