:root{
      --blue:#007aff;--green:#34c759;--orange:#ff9500;--red:#ff3b30;--indigo:#5856d6;
      --bg:#f5f5f7;--card:#fff;--text:#1d1d1f;--secondary:#545458;--tertiary:#8e8e93;
      --line:rgba(0,0,0,.09);--line-strong:rgba(0,0,0,.16);--fill:rgba(0,0,0,.045);--fill-strong:rgba(0,0,0,.075);
      --glass:rgba(255,255,255,.74);--glass-strong:rgba(255,255,255,.9);
      --shadow:0 18px 52px rgba(0,0,0,.08);--shadow-strong:0 34px 100px rgba(0,0,0,.14);
      --topbar:72px;--max:1180px;--safe:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)
    }
    html.dark{
      --bg:#08080a;--card:#1c1c1e;--text:#f5f5f7;--secondary:#d1d1d6;--tertiary:#8e8e93;
      --line:rgba(255,255,255,.1);--line-strong:rgba(255,255,255,.18);--fill:rgba(255,255,255,.075);--fill-strong:rgba(255,255,255,.115);
      --glass:rgba(28,28,30,.74);--glass-strong:rgba(28,28,30,.92);
      --shadow:0 18px 56px rgba(0,0,0,.38);--shadow-strong:0 34px 100px rgba(0,0,0,.55)
    }
    *{box-sizing:border-box}
    html,body{height:100%;overflow:hidden}
    body{margin:0;color:var(--text);background:radial-gradient(circle at 16% -8%,rgba(0,122,255,.15),transparent 34%),radial-gradient(circle at 100% 10%,rgba(255,149,0,.12),transparent 30%),var(--bg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
    body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(127,127,127,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(127,127,127,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#000,transparent 74%)}
    a{color:inherit;text-decoration:none}button,input{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(0,122,255,.32);outline-offset:3px}
    .material{background:var(--glass);border:1px solid var(--line);backdrop-filter:saturate(180%) blur(28px);-webkit-backdrop-filter:saturate(180%) blur(28px)}
    .topbar{position:fixed;top:0;left:0;right:0;z-index:80;border-inline:0;border-top:0;border-radius:0;padding-top:var(--safe-top)}.top-inner{width:min(var(--max),calc(100% - 32px));height:var(--topbar);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:inline-flex;align-items:center;gap:12px;min-width:0}.brand-mark{position:relative;width:38px;height:38px;flex:0 0 auto;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#111827,#334155 58%,#0ea5e9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 24px rgba(0,0,0,.12)}.brand-mark:before,.brand-mark:after{content:"";position:absolute;bottom:7px;width:30px;height:19px;background:rgba(255,255,255,.86);clip-path:polygon(50% 0,100% 100%,0 100%)}.brand-mark:before{left:2px}.brand-mark:after{right:0;bottom:5px;opacity:.62;transform:scale(.82)}.brand-title{display:block;font-size:15px;font-weight:850;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-sub{display:block;margin-top:3px;color:var(--tertiary);font-size:11px;font-weight:720}
    .nav{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--fill);border:1px solid var(--line)}.nav button{height:34px;padding:0 14px;border-radius:999px;color:var(--secondary);font-size:13px;font-weight:760;transition:.2s}.nav button:hover{color:var(--text);background:var(--fill-strong)}.nav button.active{color:#fff;background:#1d1d1f}html.dark .nav button.active{color:#111;background:#fff}.toolbar{display:flex;align-items:center;gap:8px}.control{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:var(--fill);border:1px solid var(--line);font-size:15px;font-weight:900;transition:.18s}.control:hover{background:var(--fill-strong)}.primary{height:44px;padding:0 17px;border-radius:999px;background:var(--blue);color:#fff;font-size:14px;font-weight:850;box-shadow:0 14px 30px rgba(0,122,255,.25);transition:.18s}.primary:hover{background:#005ecb}.nav button:active,.control:active,.primary:active,.soft:active,.page-btn:active{transform:scale(.97)}
    .viewport{position:fixed;inset:calc(var(--topbar) + var(--safe-top)) 0 0;overflow:hidden}.track{height:100%;transition:transform .72s cubic-bezier(.22,1,.36,1);will-change:transform}.page{height:calc(100vh - var(--topbar) - var(--safe-top));overflow:hidden;padding:26px 0 28px;display:grid;place-items:center}.page-inner{width:min(var(--max),calc(100% - 32px));height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px}.eyebrow{color:var(--tertiary);font-size:12px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.title{margin:8px 0 0;font-size:clamp(34px,5vw,58px);line-height:.98;letter-spacing:-.055em;font-weight:900}.subtitle{max-width:700px;margin:12px 0 0;color:var(--secondary);font-size:16px;line-height:1.72;font-weight:560;letter-spacing:-.01em}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border-radius:999px;background:var(--fill);border:1px solid var(--line);color:var(--secondary);font-size:13px;font-weight:800;white-space:nowrap}.chip i{width:7px;height:7px;border-radius:50%;background:currentColor}.card{position:relative;overflow:hidden;border-radius:30px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.card.pad{padding:24px}.interactive{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-strong);border-color:var(--line-strong)}
    .hero{position:relative;width:100%;height:min(100%,720px);min-height:560px;overflow:hidden;border-radius:44px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 22%),linear-gradient(135deg,#0b1220 0%,#102a43 36%,#0f4c81 68%,#e2944d 100%);box-shadow:var(--shadow-strong);isolation:isolate}.hero:before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 78% 18%,rgba(255,216,155,.42),transparent 18%),radial-gradient(circle at 22% 12%,rgba(74,144,226,.28),transparent 26%)}.scene{position:absolute;inset:0;z-index:-2;overflow:hidden}.sun{position:absolute;right:12%;top:15%;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.96),rgba(255,204,0,.88) 38%,rgba(255,149,0,.18) 70%,transparent 72%);box-shadow:0 0 60px rgba(255,204,0,.42)}.mountain{position:absolute;bottom:-1px;width:120%;height:58%;clip-path:polygon(0 100%,0 65%,10% 56%,20% 68%,31% 38%,42% 62%,52% 24%,64% 66%,73% 46%,86% 64%,100% 34%,100% 100%)}.back{left:-12%;background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.06));opacity:.62;filter:blur(1px);transform:translateY(42px) scale(1.08)}.mid{left:-8%;background:linear-gradient(180deg,rgba(58,101,148,.72),rgba(16,42,67,.92));opacity:.92;transform:translateY(88px)}.front{left:-10%;background:linear-gradient(180deg,rgba(12,25,40,.96),rgba(6,12,22,1));transform:translateY(138px) scale(1.05)}.mist{position:absolute;left:-12%;right:-12%;bottom:22%;height:150px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent),linear-gradient(180deg,transparent,rgba(255,255,255,.1),transparent);filter:blur(22px);opacity:.82}.hero-content{position:relative;z-index:2;height:100%;padding:48px;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(320px,.58fr);align-items:end;gap:36px}.kicker{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.78);font-size:12px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(52,199,89,.18)}.hero h1{margin:18px 0 0;max-width:720px;color:#fff;font-size:clamp(44px,6.4vw,78px);line-height:.94;letter-spacing:-.065em;font-weight:900}.hero-desc{max-width:680px;margin:22px 0 0;color:rgba(255,255,255,.84);font-size:clamp(16px,1.7vw,20px);line-height:1.7;font-weight:620;letter-spacing:-.01em}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.hero-main-btn,.hero-sub-btn{height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:999px;font-size:15px;font-weight:850;transition:.18s}.hero-main-btn{color:#0b1220;background:rgba(255,255,255,.94)}.hero-sub-btn{color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.hero-panel{align-self:stretch;display:grid;align-content:end;gap:12px}.glass{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.13);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hero-stat{min-height:148px;padding:20px;border-radius:28px;color:#fff}.hero-stat label{display:block;color:rgba(255,255,255,.66);font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.hero-stat strong{display:block;margin-top:14px;font-size:48px;line-height:.92;letter-spacing:-.06em;font-weight:900}.hero-stat span{display:block;margin-top:12px;color:rgba(255,255,255,.68);font-size:13px;line-height:1.45;font-weight:700}.route{padding:22px;border-radius:30px;color:#fff}.route-title{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}.route-title strong{font-size:18px;font-weight:850;letter-spacing:-.02em}.pill{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.16);color:rgba(255,255,255,.8);font-size:12px;font-weight:850}.mini-route{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:10px}.mini-route:before{content:"";position:absolute;left:10%;right:10%;top:24px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.64),rgba(255,255,255,.25))}.route-dot{position:relative;z-index:1;display:grid;gap:10px;justify-items:center;color:rgba(255,255,255,.76);font-size:11px;line-height:1.25;font-weight:760;text-align:center}.route-dot i{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.13)}.route-dot.key i{background:var(--orange);box-shadow:0 0 0 6px rgba(255,149,0,.2)}
    .two-col{display:grid;grid-template-columns:1.08fr .92fr;gap:18px;align-items:center}.section-copy{margin-bottom:22px}.strategy{min-height:360px;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px;background:radial-gradient(circle at 10% 0%,rgba(0,122,255,.1),transparent 28%),var(--card)}.strategy-main{grid-column:1/-1;display:flex;align-items:start;justify-content:space-between;gap:20px}.strategy-main h3{margin:6px 0 0;font-size:30px;line-height:1.05;letter-spacing:-.045em;font-weight:900}.iconbox{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,rgba(0,122,255,.13),rgba(88,86,214,.1));border:1px solid var(--line)}.sf{position:relative;width:24px;height:24px;display:block}.sf.home:before{content:"";position:absolute;left:1px;top:8px;width:22px;height:14px;border-radius:4px;border:2px solid var(--blue)}.sf.home:after{content:"";position:absolute;left:4px;top:1px;width:16px;height:16px;border-left:2px solid var(--blue);border-top:2px solid var(--blue);transform:rotate(45deg);border-radius:3px}.sf.sun:before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 6px rgba(255,149,0,.16)}.sf.shield:before{content:"";position:absolute;inset:2px 4px;border:2px solid var(--green);border-radius:12px 12px 16px 16px;clip-path:polygon(0 0,100% 0,100% 66%,50% 100%,0 66%)}.strategy-btn{padding:20px;border-radius:24px;background:var(--fill);text-align:left;border:1px solid transparent;transition:.2s}.strategy-btn:hover{background:var(--fill-strong);border-color:var(--line);transform:translateY(-1px)}.strategy-btn strong{display:block;font-size:18px;line-height:1.25;letter-spacing:-.025em;font-weight:880}.strategy-btn p{margin:10px 0 0;color:var(--secondary);font-size:14px;line-height:1.65;font-weight:560}.readiness{display:grid;gap:14px}.ready{width:100%;text-align:left;min-height:112px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.ready-label{color:var(--tertiary);font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.ready-value{display:block;margin-top:6px;font-size:23px;font-weight:900;letter-spacing:-.04em}.meter{position:relative;width:58px;height:58px;flex:0 0 auto;border-radius:50%;background:conic-gradient(var(--meter-color) var(--meter),var(--fill) 0)}.meter:after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--card);border:1px solid var(--line)}
    .packing-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px;align-items:stretch}.search{display:flex;align-items:center;gap:10px;width:min(360px,100%);height:46px;padding:0 15px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.search-icon{position:relative;width:16px;height:16px;flex:0 0 auto;opacity:.68}.search-icon:before{content:"";position:absolute;inset:1px 4px 4px 1px;border:2px solid var(--tertiary);border-radius:50%}.search-icon:after{content:"";position:absolute;width:7px;height:2px;right:0;bottom:1px;border-radius:2px;background:var(--tertiary);transform:rotate(45deg)}.search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:15px;font-weight:650}.progress-card{padding:24px}.ring-wrap{display:grid;place-items:center;margin:12px 0 16px}.ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) calc(var(--done) * 1%),rgba(127,127,127,.12) 0);box-shadow:inset 0 0 0 1px var(--line);transition:.35s}.ring-inner{width:104px;height:104px;display:grid;place-items:center;border-radius:50%;background:var(--card);border:1px solid var(--line);text-align:center}.ring-inner strong{display:block;font-size:30px;line-height:1;letter-spacing:-.06em;font-weight:900}.ring-inner span{display:block;margin-top:7px;color:var(--tertiary);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.weights{display:grid;gap:10px}.weight{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--secondary);font-size:13px;font-weight:750}.weight span{display:inline-flex;align-items:center;gap:8px}.weight i{width:9px;height:9px;border-radius:50%;background:var(--dot)}.soft{width:100%;height:44px;margin-top:18px;border-radius:16px;background:rgba(255,59,48,.1);color:var(--red);font-size:14px;font-weight:850;transition:.18s}.soft:hover{background:rgba(255,59,48,.14)}.packing-list{display:flex;flex-direction:column;gap:12px;min-height:0;flex-shrink:0}.packing-list::-webkit-scrollbar{width:6px}.packing-list::-webkit-scrollbar-thumb{background:rgba(142,142,147,.28);border-radius:99px}.packing-list::-webkit-scrollbar-track{background:transparent}.pack-group{border-radius:26px;background:var(--card);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow);flex-shrink:0}.group-head{min-height:64px;padding:13px 17px;display:flex;align-items:center;justify-content:space-between;gap:14px}.group-title{display:flex;align-items:center;gap:12px;min-width:0}.glyphbox{width:38px;height:38px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;background:rgba(var(--cat-rgb),.13);color:var(--cat);border:1px solid rgba(var(--cat-rgb),.18)}.glyph{position:relative;display:block;width:20px;height:20px}.glyph.shoe:before{content:"";position:absolute;left:1px;bottom:4px;width:18px;height:9px;border:2px solid currentColor;border-radius:9px 9px 5px 5px;transform:skewX(-12deg)}.glyph.shield:before{content:"";position:absolute;inset:2px 4px;border:2px solid currentColor;border-radius:10px 10px 14px 14px;clip-path:polygon(0 0,100% 0,100% 65%,50% 100%,0 65%)}.glyph.bolt:before{content:"";position:absolute;inset:1px 5px;background:currentColor;clip-path:polygon(48% 0,100% 0,62% 43%,96% 43%,28% 100%,42% 56%,0 56%)}.group-title strong{display:block;font-size:16px;font-weight:850;letter-spacing:-.02em}.group-title span span{display:block;margin-top:3px;color:var(--tertiary);font-size:12px;font-weight:750}.pack-count{color:var(--tertiary);font-size:12px;font-weight:850;white-space:nowrap}.pack-items{min-height:0}.pack-items-inner{padding:6px;border-top:1px solid var(--line)}.pack-row{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border-radius:18px;text-align:left;transition:.18s}.pack-row:hover{background:var(--fill)}.check{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1.8px solid rgba(142,142,147,.45);color:transparent;transition:.2s}.pack-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pack-name{display:block;font-size:15px;font-weight:820;line-height:1.35;letter-spacing:-.022em}.pack-desc{display:block;margin-top:4px;color:var(--secondary);font-size:13px;line-height:1.55;font-weight:520}.pack-row.done .pack-name{color:var(--tertiary);text-decoration:line-through}.pack-row.done .pack-desc{opacity:.64}.qty{min-height:26px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;background:var(--fill);color:var(--tertiary);font-size:12px;font-weight:850;white-space:nowrap}.itinerary-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.segmented{position:relative;width:min(390px,100%);display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--fill);border:1px solid var(--line)}.seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--card);box-shadow:var(--shadow);transition:transform .32s cubic-bezier(.2,.8,.2,1)}.segmented.day2 .seg-ind{transform:translateX(100%)}.seg{position:relative;z-index:1;height:44px;border-radius:999px;color:var(--secondary);font-size:14px;font-weight:850;transition:.18s}.seg.active{color:var(--text)}.timeline-card{padding:10px}.timeline{position:relative;max-height:calc(100vh - 310px);overflow:auto;padding-right:4px}.timeline::-webkit-scrollbar{width:6px}.timeline::-webkit-scrollbar-thumb{background:rgba(142,142,147,.28);border-radius:99px}.timeline::-webkit-scrollbar-track{background:transparent}.time-row{position:relative;width:100%;display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px;padding:14px 12px;border-radius:22px;text-align:left;transition:.18s}.time-row:hover{background:var(--fill)}.time{color:var(--item);font-size:15px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.node{position:absolute;left:76px;top:19px;width:18px;height:18px;border-radius:50%;background:var(--card);border:5px solid var(--item);box-shadow:0 0 0 6px rgba(var(--item-rgb),.13)}.line{position:absolute;left:84px;top:46px;bottom:-16px;width:2px;background:linear-gradient(var(--line-strong),transparent)}.time-row:last-child .line{display:none}.time-copy{padding-left:32px}.risk{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:rgba(var(--risk-rgb),.12);color:var(--risk);font-size:12px;font-weight:850;margin-bottom:6px}.time-title{display:block;font-size:18px;line-height:1.32;letter-spacing:-.032em;font-weight:880}.time-desc{display:block;margin-top:5px;color:var(--secondary);font-size:14px;line-height:1.62;font-weight:520}.focus{padding:22px}.focus h3{margin:7px 0 0;font-size:28px;line-height:1.05;letter-spacing:-.045em;font-weight:900}.focus-list{display:grid;gap:12px;margin-top:18px}.focus-item{padding:16px;border-radius:20px;background:var(--fill)}.focus-item small{color:var(--tertiary);font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.focus-item strong{display:block;margin-top:6px;font-size:17px;line-height:1.38;letter-spacing:-.025em;font-weight:850}
    .elev-card{padding:26px}.chart-title{margin-bottom:18px}.chart-title h3{margin:7px 0 0;font-size:30px;line-height:1.05;letter-spacing:-.045em;font-weight:900}.chart{height:min(50vh,370px);overflow:hidden;border-radius:28px;background:linear-gradient(180deg,rgba(0,122,255,.08),transparent),var(--fill);border:1px solid var(--line)}.chart svg{display:block;width:100%;height:100%}.chart-label{fill:var(--tertiary);font:750 12px -apple-system,BlinkMacSystemFont,"SF Pro Text",Arial}.chart-grid{stroke:rgba(142,142,147,.22);stroke-width:1}
    .pager{position:fixed;right:22px;top:50%;z-index:84;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}.dot{width:8px;height:8px;border-radius:99px;background:var(--tertiary);opacity:.42;transition:.25s}.dot.active{height:28px;background:var(--blue);opacity:1}.page-btn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:var(--fill);border:1px solid var(--line);font-size:0;color:var(--text);transition:background .18s ease,transform .16s ease}.page-btn:hover{background:var(--fill-strong)}.page-btn:before,.page-btn:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2.5px;border-radius:999px;background:currentColor;transform-origin:center}.page-prev:before{transform:translate(-8px,-50%) rotate(-35deg)}.page-prev:after{transform:translate(-2px,-50%) rotate(35deg)}.page-next:before{transform:translate(-8px,-50%) rotate(35deg)}.page-next:after{transform:translate(-2px,-50%) rotate(35deg)}.hint{position:fixed;right:24px;bottom:calc(24px + var(--safe));z-index:82;color:var(--tertiary);font-size:12px;font-weight:750;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:9px 12px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
    .backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:.25s}.backdrop.open{opacity:1;pointer-events:auto}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:95;padding:0 14px calc(14px + var(--safe));transform:translateY(112%);transition:transform .34s cubic-bezier(.2,.8,.2,1)}.sheet.open{transform:translateY(0)}.sheet-panel{width:min(680px,100%);margin:0 auto;overflow:hidden;border-radius:32px;background:var(--glass-strong);border:1px solid var(--line);box-shadow:0 -20px 70px rgba(0,0,0,.24);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);max-height:80vh;display:flex;flex-direction:column}.grabber{width:40px;height:5px;margin:11px auto 5px;border-radius:999px;background:rgba(142,142,147,.45)}.sheet-head{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:14px 24px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}.sheet-head h3{margin:5px 0 0;font-size:28px;line-height:1.06;letter-spacing:-.045em;font-weight:900}.sheet-body{padding:22px 24px 24px;color:var(--secondary);font-size:16px;line-height:1.85;font-weight:540;white-space:pre-wrap;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.sheet-actions{display:none;grid-template-columns:1fr 1fr;gap:10px;padding:0 24px 24px;flex:0 0 auto}.sheet-actions.show{display:grid}.sheet-actions button,.sheet-actions a{height:46px;display:grid;place-items:center;border-radius:16px;font-size:14px;font-weight:850}.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:80;height:calc(52px + var(--safe));padding-bottom:var(--safe);display:none;align-items:center;justify-content:space-around;box-shadow:0 -1px 0 var(--line)}.tabbar-icon{width:22px;height:22px;opacity:.64;transition:opacity .18s,transform .18s}.tabbar button{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--secondary);font-size:10px;font-weight:750;transition:color .18s}.tabbar button:active .tabbar-icon{transform:scale(.9)}.tabbar button.active{color:var(--blue)}.tabbar button.active .tabbar-icon{opacity:1;color:var(--blue)}
    .chart-point{cursor:pointer;transition:r .18s ease,stroke-width .18s ease,filter .18s ease}.chart-point:hover,.chart-point.active{r:10;stroke-width:5;filter:drop-shadow(0 8px 14px rgba(0,122,255,.28))}.chart-info{position:fixed;left:0;top:0;z-index:130;width:min(340px,calc(100vw - 32px));display:grid;gap:10px;padding:16px 18px;border-radius:22px;background:var(--glass-strong);border:1px solid var(--line);box-shadow:0 18px 54px rgba(0,0,0,.18);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);pointer-events:none;opacity:0;transform:translate3d(-9999px,-9999px,0) scale(.96);transition:opacity .16s ease,transform .16s ease}.chart-info.show{opacity:1;transform:translate3d(var(--tip-x),var(--tip-y),0) scale(1)}.chart-info h4{margin:0;font-size:20px;letter-spacing:-.035em;font-weight:900}.chart-info p{margin:4px 0 0;color:var(--secondary);font-size:14px;line-height:1.58;font-weight:560}.chart-meta{display:flex;gap:8px;flex-wrap:wrap}.chart-meta span{height:30px;display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--secondary);font-size:12px;font-weight:850}.chart-tip{color:var(--blue)!important}
    @media(max-width:980px), (max-width:1366px) and (orientation:landscape){
      :root{--topbar:66px}
      .top-inner{width:min(100% - 28px,var(--max));height:66px}
      .brand-sub{display:none}
      .nav{display:flex}
      .primary{display:none}
      .viewport{position:fixed!important;inset:calc(var(--topbar) + var(--safe-top)) 0 0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:calc(84px + var(--safe))!important}
      .track{height:auto!important;transform:none!important;transition:none!important}
      .page{height:auto!important;overflow-y:visible!important;padding:18px 0 calc(54px + var(--safe))!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
      .pager{display:none!important}
      .page-inner{width:min(100% - 28px,var(--max));height:auto;min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding-top:12px;padding-bottom:24px}
      .hero{min-height:0;height:auto;padding-bottom:20px}
      .hero-content{grid-template-columns:1fr;padding:34px;align-items:start}
      .hero-panel{align-self:auto;margin-top:20px}
      .two-col,.itinerary-layout{grid-template-columns:1fr}
      .section-copy{margin-bottom:16px}
      .timeline{max-height:none;overflow:visible}
      .hint{display:none}
    }
    @media(max-width:1366px) and (orientation:landscape){
      .packing-layout{grid-template-columns:280px minmax(0,1fr)!important;gap:16px!important;align-items:stretch!important}
    }
    @media(max-width:980px) and (orientation:portrait){
      .packing-layout{grid-template-columns:1fr!important}
      .packing-page .packing-list{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:0!important;margin:0!important}
    }
    @media(max-width:640px){
      .nav{display:none}
      .pager{display:none}
      .brand-sub{display:none}
      .track{height:auto!important;transform:none!important;transition:none!important}
      .page{height:auto!important;overflow-y:visible!important;padding:24px 0 32px!important}
      .hero{border-radius:30px}
      .hero-content{padding:24px}
      .hero h1{font-size:clamp(40px,12.56vw,54px)}
      .hero-desc{font-size:15px}
      .hero-stats{grid-template-columns:1fr}
      .hero-stat{min-height:116px}
      .hero-stat strong{font-size:42px}
      .title{font-size:36px}
      .subtitle{font-size:14px}
      .strategy{grid-template-columns:1fr;padding:18px}
      .strategy-main h3{font-size:24px}
      .pack-row{grid-template-columns:32px minmax(0,1fr);align-items:start}
      .pack-name{font-size:16px;line-height:1.3}
      .chart{height:220px}
      .chart-label{font-size:10px}
      .chart-info,.chart-info.show{display:none!important}
      .sheet-panel{border-radius:28px 28px 0 0;max-height:85vh;padding-bottom:var(--safe)}
      .sheet{padding:0}
      .page:nth-child(3) .section-copy,.page:nth-child(4) .section-copy{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important}
      .search,.segmented{width:100%!important;max-width:100%!important}
    }
    @media(max-height:520px) and (orientation:landscape){
      :root{--topbar:48px}
      .page{padding:8px 0 60px}
      .hero{min-height:0;height:auto;padding-bottom:12px}
      .hero-content{grid-template-columns:1fr 1.2fr;padding:16px;gap:16px;align-items:center}
      .hero h1{font-size:28px}
      .hero-desc{font-size:13px;margin-top:8px}
      .hero-stats{grid-template-columns:1fr 1fr}
      .hero-stat{min-height:80px;padding:10px}
      .hero-stat strong{font-size:24px;margin-top:4px}
      .chart{height:160px}
    }
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}.track{transition:none}}
    /* ================================
       PC refinements
       1. Packing list transparent viewport
       2. Itinerary scrollbar outside card
       ================================ */
    @media (min-width: 981px) {
      .packing-page .packing-list::-webkit-scrollbar-track {
        background: transparent !important;
      }

      .packing-page .packing-list::-webkit-scrollbar-corner {
        background: transparent !important;
      }

      .timeline-card {
        overflow: visible !important;
      }

      .timeline {
        max-height: calc(100vh - 310px);
        overflow-y: auto;
        overflow-x: visible;
        margin-right: -18px;
        padding-right: 18px;
        scrollbar-gutter: stable;
      }

      .timeline::-webkit-scrollbar {
        width: 6px;
      }

      .timeline::-webkit-scrollbar-track {
        background: transparent;
      }

      .timeline::-webkit-scrollbar-thumb {
        background: rgba(142, 142, 147, 0.28);
        border-radius: 999px;
      }

      .timeline::-webkit-scrollbar-thumb:hover {
        background: rgba(142, 142, 147, 0.42);
      }
    }
    .need{display:inline-flex;align-items:center;height:22px;margin:0;padding:0 8px;border-radius:999px;background:rgba(0,122,255,.1);color:var(--blue);font-size:12px;font-weight:850}
    .is-hidden{display:none!important}
    .route-alert{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:12px 14px;border-radius:18px;background:rgba(255,149,0,.12);border:1px solid rgba(255,149,0,.22);color:var(--secondary);font-size:14px;line-height:1.5;font-weight:650}.route-alert strong{color:var(--orange);white-space:nowrap;font-weight:900}.plan-b{display:block;margin-top:8px;padding:9px 11px;border-radius:14px;background:rgba(255,149,0,.12);color:var(--secondary);font-size:13px;line-height:1.5;font-weight:650}.plan-b strong{color:var(--orange)}.mode-toggle{display:inline-grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px;border-radius:999px;background:var(--fill);border:1px solid var(--line)}.mode-toggle button{min-height:38px;padding:0 13px;border-radius:999px;color:var(--secondary);font-size:13px;font-weight:850}.mode-toggle button.active{background:var(--card);color:var(--text);box-shadow:var(--shadow)}@media(max-width:720px){.route-alert{align-items:flex-start;flex-direction:column;gap:4px}.mode-toggle{width:100%}.mode-toggle button{width:100%}}
    @media (min-width:981px){.itinerary-page .page-inner{justify-content:flex-start;gap:12px;min-height:0;overflow:visible;padding-top:clamp(8px,1.6vh,18px)}.itinerary-page .section-copy{margin-bottom:0;flex:0 0 auto}.itinerary-page .route-alert{flex:0 0 auto;margin-bottom:2px}.itinerary-page .itinerary-layout{flex:1 1 auto;min-height:0;height:auto;align-items:stretch}.itinerary-page .timeline-card,.itinerary-page .focus{height:100%;min-height:0}.itinerary-page .timeline-card{overflow:visible!important}.itinerary-page .timeline{height:100%;max-height:none!important;overflow-y:auto;overflow-x:visible;margin-right:-20px;padding-right:20px;scrollbar-gutter:stable}.itinerary-page .focus{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}.itinerary-page .focus::-webkit-scrollbar{width:6px}.itinerary-page .focus::-webkit-scrollbar-track{background:transparent}.itinerary-page .focus::-webkit-scrollbar-thumb{background:rgba(142,142,147,.28);border-radius:999px}.packing-page .page-inner{justify-content:flex-start;gap:12px;min-height:0;overflow:visible;padding-top:clamp(8px,1.6vh,18px)}.packing-page .section-copy{margin-bottom:0;flex:0 0 auto}.packing-page .packing-layout{width:100%;flex:1 1 auto;min-height:0;height:clamp(390px,calc(100svh - var(--topbar) - var(--safe-top) - 220px),560px);align-items:stretch!important;overflow:visible}.packing-page .progress-card{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.packing-page .packing-list{height:100%!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;padding:2px 10px 10px 2px!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;scrollbar-gutter:stable;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.elevation-page .page-inner{justify-content:flex-start;gap:10px;padding-top:clamp(34px,7vh,78px);padding-bottom:clamp(56px,9vh,98px)}.elevation-page .section-copy{margin-bottom:2px!important}.elevation-page .chart-title{margin-bottom:14px}}
    .packing-page .pack-items-wrapper{display:grid!important;grid-template-rows:1fr;opacity:1;transform:translateY(0);overflow:hidden;transition:grid-template-rows .52s cubic-bezier(.16,1,.3,1),opacity .22s ease,transform .52s cubic-bezier(.16,1,.3,1)}.packing-page .pack-group.collapsed .pack-items-wrapper{grid-template-rows:0fr!important;opacity:.001;transform:translateY(-6px)}.packing-page .ring{width:170px!important;height:170px!important;background:var(--ring-gradient,conic-gradient(rgba(127,127,127,.16) 0 100%))!important;box-shadow:0 18px 46px rgba(0,0,0,.12),inset 0 0 0 1px rgba(127,127,127,.13),inset 0 0 0 10px rgba(255,255,255,.05)!important}
    @media (max-width:1366px) and (orientation:landscape){.elevation-page .chart-label{font:900 17px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif!important;fill:var(--secondary)!important;letter-spacing:-.02em}}
    @media (max-width:980px) and (orientation:landscape){.elevation-page .chart{height:260px!important;overflow-x:auto!important;overflow-y:hidden!important}.elevation-page .chart svg{width:920px!important;min-width:920px!important;max-width:none!important;height:100%!important}}
    .glyph.sun:before{content:"";position:absolute;inset:6px;border-radius:50%;background:currentColor;box-shadow:0 -8px 0 -5px currentColor,0 8px 0 -5px currentColor,-8px 0 0 -5px currentColor,8px 0 0 -5px currentColor,6px 6px 0 -5px currentColor,-6px -6px 0 -5px currentColor,6px -6px 0 -5px currentColor,-6px 6px 0 -5px currentColor}.glyph.drop:before{content:"";position:absolute;left:5px;top:2px;width:10px;height:16px;background:currentColor;border-radius:9px 9px 10px 10px;clip-path:polygon(50% 0,100% 50%,100% 72%,82% 100%,18% 100%,0 72%,0 50%)}.glyph.battery:before{content:"";position:absolute;left:2px;top:6px;width:14px;height:9px;border:2px solid currentColor;border-radius:4px}.glyph.battery:after{content:"";position:absolute;right:0;top:9px;width:3px;height:5px;border-radius:0 2px 2px 0;background:currentColor}.glyph.firstaid:before{content:"";position:absolute;inset:3px;border:2px solid currentColor;border-radius:5px}.glyph.firstaid:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);background:currentColor;clip-path:polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%)}.glyph.idcard:before{content:"";position:absolute;left:1px;top:4px;width:18px;height:12px;border:2px solid currentColor;border-radius:5px}.glyph.idcard:after{content:"";position:absolute;left:5px;top:8px;width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:8px -1px 0 -1px currentColor,8px 4px 0 -1px currentColor}.glyph.wallet:before{content:"";position:absolute;left:2px;top:5px;width:16px;height:11px;border:2px solid currentColor;border-radius:5px}.glyph.wallet:after{content:"";position:absolute;right:2px;top:8px;width:7px;height:6px;border:2px solid currentColor;border-radius:4px;background:var(--card)}.glyph.backpack:before{content:"";position:absolute;left:4px;top:5px;width:12px;height:13px;border:2px solid currentColor;border-radius:6px 6px 5px 5px}.glyph.backpack:after{content:"";position:absolute;left:7px;top:2px;width:6px;height:5px;border:2px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0}.glyph.bed:before{content:"";position:absolute;left:2px;top:9px;width:17px;height:7px;border:2px solid currentColor;border-radius:3px}.glyph.bed:after{content:"";position:absolute;left:3px;top:6px;width:6px;height:5px;border:2px solid currentColor;border-radius:3px;background:var(--card)}.glyph.route:before{content:"";position:absolute;left:3px;top:4px;width:14px;height:12px;border:2px solid currentColor;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(20deg)}.glyph.route:after{content:"";position:absolute;left:3px;top:14px;width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:11px -10px 0 0 currentColor}.glyph.ticket:before{content:"";position:absolute;left:2px;top:5px;width:16px;height:11px;border:2px solid currentColor;border-radius:4px}.glyph.ticket:after{content:"";position:absolute;left:8px;top:6px;width:2px;height:10px;background:repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 4px)}
    .time-row{position:relative!important;display:block!important;min-height:124px;padding:18px 18px 18px 138px!important;border-radius:22px;text-align:left;transition:.18s}.time-row:hover{background:var(--fill)}.time{position:absolute!important;left:28px;top:0;bottom:0;width:72px!important;min-height:0!important;display:block!important;padding:0!important;color:var(--item);font-size:14px;line-height:1;font-weight:950;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:center;pointer-events:none}.time-range{position:absolute!important;inset:0;display:block!important;width:100%;height:100%}.time-start,.time-end,.time-single{position:absolute;left:50%;display:block;white-space:nowrap;transform:translate(-50%,calc(-50% - 1px))}.time-start{top:var(--time-start-y,30px)}.time-end{top:var(--time-end-y,90px)}.time-single{top:var(--time-start-y,30px)}.time-separator{position:absolute;left:50%;top:calc(var(--time-start-y,30px) + 17px);width:2px;height:calc(var(--time-end-y,90px) - var(--time-start-y,30px) - 34px);min-height:24px;margin:0;border-radius:999px;background:currentColor;opacity:.24;transform:translateX(-50%)}.node{position:absolute!important;left:108px!important;top:calc(var(--time-start-y,30px) - 9px)!important;width:18px;height:18px;border-radius:50%;background:var(--card);border:5px solid var(--item);box-shadow:0 0 0 6px rgba(var(--item-rgb),.13)}.line{position:absolute!important;left:116px!important;top:calc(var(--time-start-y,30px) + 22px)!important;bottom:-18px!important;width:2px;background:linear-gradient(var(--line-strong),transparent)}.time-row:last-child .line{display:none}.time-copy{display:flex;flex-direction:column;min-width:0;padding-left:0!important}.time-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:24px;margin:0 0 4px}.time-title{display:inline-block!important;margin:0!important;font-size:18px;line-height:1.32;letter-spacing:-.032em;font-weight:880}.risk{display:inline-flex!important;align-items:center;height:22px;margin:0!important;padding:0 8px;border-radius:999px;background:rgba(var(--risk-rgb),.12);color:var(--risk);font-size:11px;line-height:1;font-weight:850;vertical-align:middle}.time-desc{display:block;margin-top:4px;color:var(--secondary);font-size:14px;line-height:1.62;font-weight:520}.plan-b{display:block;margin-top:10px;padding:9px 11px;border-radius:14px;background:rgba(255,149,0,.12);color:var(--secondary);font-size:13px;line-height:1.5;font-weight:650}.plan-b strong{color:var(--orange)}@media(max-width:640px){.time-row{min-height:116px;padding:16px 10px 16px 112px!important}.time{left:18px;width:64px!important;font-size:12px}.node{left:88px!important}.line{left:96px!important}.time-title{font-size:16px}.risk{height:21px;font-size:10px}}
    .page-btn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:var(--fill);border:1px solid var(--line);font-size:0;color:var(--text);transition:background .18s ease,transform .16s ease}.page-btn:hover{background:var(--fill-strong)}.page-btn:before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-left:3px solid currentColor;border-top:3px solid currentColor;border-radius:2px;background:transparent;transform-origin:center}.page-btn:after{display:none!important}.page-prev:before{transform:translate(-50%,-38%) rotate(45deg)}.page-next:before{transform:translate(-50%,-62%) rotate(225deg)}.chart-mobile-hint{display:none;margin:10px 4px 0;color:var(--tertiary);font-size:12px;line-height:1.5;font-weight:750;text-align:center}@media(max-width:640px){.chart-mobile-hint{display:block}}
    @media (max-width:640px){:root{--mobile-chrome-x:12px;--mobile-chrome-gap:6px;--mobile-bar-h:56px;--mobile-top-space:calc(var(--safe-top) + var(--mobile-chrome-gap) + var(--mobile-bar-h));--topbar:var(--mobile-bar-h)}.topbar.material{position:fixed!important;top:0!important;left:0!important;right:0!important;height:var(--mobile-top-space)!important;padding:calc(var(--safe-top) + var(--mobile-chrome-gap)) var(--mobile-chrome-x) 0!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important}.topbar .top-inner{pointer-events:auto!important;width:100%!important;height:var(--mobile-bar-h)!important;margin:0!important;padding:0 8px 0 10px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;border-radius:24px!important;overflow:hidden!important;background:var(--glass-strong)!important;border:1px solid var(--line)!important;box-shadow:0 18px 52px rgba(0,0,0,.11)!important;backdrop-filter:blur(28px) saturate(180%)!important;-webkit-backdrop-filter:blur(28px) saturate(180%)!important}html.dark .topbar .top-inner{box-shadow:0 18px 56px rgba(0,0,0,.42)!important}.topbar .nav{display:none!important}.topbar #focusBtn.primary{display:inline-flex!important;align-items:center!important;justify-content:center!important}.topbar .brand{min-width:0!important;height:100%!important;display:flex!important;align-items:center!important;gap:10px!important;padding-left:2px!important}.topbar .brand-mark{width:36px!important;height:36px!important;border-radius:14px!important}.topbar .brand-title{max-width:180px!important;font-size:14px!important;line-height:1.05!important;font-weight:850!important;letter-spacing:-.018em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.topbar .brand-sub{display:none!important}.topbar .toolbar{height:100%!important;display:flex!important;align-items:center!important;justify-content:flex-end!important}.topbar .control{width:44px!important;height:44px!important;border-radius:20px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--text)!important}.topbar .control:hover,.topbar .control:active{background:var(--fill)!important}.viewport{inset:0!important;padding-top:0!important;padding-bottom:calc(86px + var(--safe))!important;background:transparent!important}.track{padding-top:0!important}.page:first-child{padding-top:0!important}.page:first-child .page-inner{width:100%!important;padding-top:0!important}.page:first-child .hero{margin-top:0!important;border-radius:0 0 30px 30px!important;min-height:calc(100svh - 12px)!important}.page:first-child .hero-content{padding-top:calc(var(--mobile-top-space) + 22px)!important}.page:not(:first-child){padding-top:calc(var(--mobile-top-space) + 18px)!important}.tabbar{display:flex!important;left:var(--mobile-chrome-x)!important;right:var(--mobile-chrome-x)!important;bottom:calc(var(--safe) + var(--mobile-chrome-gap))!important;height:var(--mobile-bar-h)!important;padding-bottom:0!important;border-radius:24px!important;background:var(--glass-strong)!important;border:1px solid var(--line)!important;box-shadow:0 18px 52px rgba(0,0,0,.11)!important;backdrop-filter:blur(28px) saturate(180%)!important;-webkit-backdrop-filter:blur(28px) saturate(180%)!important}}
    @media (max-width:640px){.page:first-child .page-inner{width:calc(100% - 24px)!important;margin:0 auto!important;padding-top:8px!important}.page:first-child .hero{margin-top:0!important;border-radius:30px!important;overflow:hidden!important;min-height:calc(100svh - 22px)!important}.page:first-child .hero-content{padding-top:calc(var(--mobile-top-space) + 22px)!important}}
    .hero-stat .stat-label{display:block;color:rgba(255,255,255,.66);font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
    /* =========================================
       Mobile elevation chart readability fix
       移动端强度曲线不再压缩横轴文字，改为横向可滚动图表
       ========================================= */

    @media (max-width:640px){
      /*
        图表容器横向可滚动，避免 SVG 被压缩到过窄导致文字不可读。
      */
      .elev-card .chart{
        height:280px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
        scroll-snap-type:x proximity;
        border-radius:24px !important;
      }

      /*
        SVG 保持足够宽度。
        760px 在 390px 左右手机屏上大约显示半屏多，
        横轴文字能达到正常阅读尺寸。
      */
      .elev-card .chart svg{
        width:760px !important;
        min-width:760px !important;
        max-width:none !important;
        height:100% !important;
        display:block;
      }

      /*
        横轴文字放大。因为 SVG 仍会按 760 / 980 缩放，
        这里用 SVG 坐标系里的 17px，实际显示约 13px。
      */
      .elev-card .chart-label{
        font:900 17px -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif !important;
        fill:var(--secondary) !important;
        letter-spacing:-.02em;
      }

      /*
        峰值文字同步提高可读性。
      */
      .elev-card .chart text[fill="#007aff"]{
        font-size:18px !important;
      }

      /*
        给底部标签留足空间，避免贴边。
      */
      .elev-card .chart svg .chart-label text{
        dominant-baseline:middle;
      }

      /*
        隐藏横向滚动条，但保留滚动能力。
      */
      .elev-card .chart::-webkit-scrollbar{
        height:0;
      }

      .elev-card .chart{
        scrollbar-width:none;
      }

      /*
        给用户一个轻量视觉暗示：右侧还有内容可横滑。
      */
      .elev-card .chart::after{
        content:"";
        position:sticky;
        right:0;
        top:0;
        float:right;
        width:34px;
        height:100%;
        pointer-events:none;
        background:linear-gradient(90deg,transparent,var(--fill));
      }
    }

    /* =========================================================
       Final UI Polish System
       iOS Liquid Glass buttons / sliders / rings / icons
       ========================================================= */

    .icon-sprite{
      position:absolute;
      width:0;
      height:0;
      overflow:hidden;
    }

    :root{
      --ios-glass-light:rgba(255,255,255,.66);
      --ios-glass-dark:rgba(28,28,30,.58);
      --ios-glass-border-light:rgba(255,255,255,.72);
      --ios-glass-border-dark:rgba(255,255,255,.14);
      --ios-highlight:rgba(255,255,255,.72);
      --ios-shadow-soft:0 14px 34px rgba(0,0,0,.12);
      --ios-shadow-deep:0 22px 58px rgba(0,0,0,.22);
      --ios-active-light:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.82));
      --ios-active-dark:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
    }

    html.dark{
      --ios-shadow-soft:0 18px 46px rgba(0,0,0,.38);
      --ios-shadow-deep:0 26px 70px rgba(0,0,0,.55);
    }

    /* ---------- SVG icons ---------- */

    .ui-icon{
      width:22px;
      height:22px;
      display:block;
      stroke:currentColor;
      fill:none;
      overflow:visible;
    }

    .iconbox .ui-icon,
    .glyphbox .ui-icon{
      width:23px;
      height:23px;
    }

    .strategy-basecamp{
      color:var(--blue);
      background:
        radial-gradient(circle at 35% 25%,rgba(255,255,255,.68),transparent 32%),
        linear-gradient(145deg,rgba(0,122,255,.18),rgba(52,199,89,.12)),
        var(--glass);
      border-color:rgba(0,122,255,.22);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.44),
        0 14px 36px rgba(0,122,255,.14);
    }

    /* ---------- General glass buttons ---------- */

    .primary,
    .hero-main-btn,
    .hero-sub-btn,
    .soft,
    .control,
    .page-btn,
    .strategy-btn,
    .ready-card,
    .focus-item,
    .pack-row{
      -webkit-backdrop-filter:blur(22px) saturate(180%);
      backdrop-filter:blur(22px) saturate(180%);
    }

    .primary,
    .hero-main-btn{
      background:
        radial-gradient(circle at 30% 15%,rgba(255,255,255,.55),transparent 28%),
        linear-gradient(180deg,#4f8cff,#2f74ff);
      color:#fff;
      border:1px solid rgba(255,255,255,.32);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.48),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 16px 34px rgba(0,122,255,.28);
    }

    .primary:hover,
    .hero-main-btn:hover{
      filter:saturate(1.08) brightness(1.04);
      transform:translateY(-1px);
    }

    .hero-main-btn{
      color:#07111f;
      background:
        radial-gradient(circle at 28% 14%,rgba(255,255,255,.96),transparent 34%),
        linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.82));
    }

    .hero-sub-btn,
    .soft{
      background:
        linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
      border:1px solid rgba(255,255,255,.24);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 14px 30px rgba(0,0,0,.12);
    }

    html.dark .hero-sub-btn,
    html.dark .soft{
      background:
        linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
      border-color:rgba(255,255,255,.14);
    }

    .control,
    .page-btn{
      background:
        linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)),
        var(--glass);
      border:1px solid var(--line);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 12px 28px rgba(0,0,0,.10);
    }

    html.dark .control,
    html.dark .page-btn{
      background:
        linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)),
        rgba(28,28,30,.68);
      border-color:rgba(255,255,255,.12);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 16px 34px rgba(0,0,0,.42);
    }

    /* ---------- Unified segmented controls: nav / day switch / packing switch ---------- */

    .nav,
    .segmented,
    .mode-toggle{
      position:relative;
      isolation:isolate;
      padding:5px !important;
      gap:4px !important;
      border-radius:999px !important;
      background:
        linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.32)),
        rgba(255,255,255,.48) !important;
      border:1px solid rgba(0,0,0,.08) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -1px 0 rgba(0,0,0,.05),
        0 14px 34px rgba(0,0,0,.10) !important;
      -webkit-backdrop-filter:blur(30px) saturate(180%);
      backdrop-filter:blur(30px) saturate(180%);
    }

    html.dark .nav,
    html.dark .segmented,
    html.dark .mode-toggle{
      background:
        linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.04)),
        rgba(28,28,30,.70) !important;
      border-color:rgba(255,255,255,.14) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(0,0,0,.42),
        0 18px 46px rgba(0,0,0,.42) !important;
    }

    .nav button,
    .seg,
    .mode-toggle button{
      position:relative;
      z-index:1;
      min-height:40px;
      border-radius:999px !important;
      color:var(--secondary);
      font-size:14px;
      font-weight:880;
      letter-spacing:-.01em;
      transition:
        color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .16s ease,
        filter .18s ease;
    }

    .nav button.active,
    .mode-toggle button.active{
      color:#111 !important;
      background:var(--ios-active-light) !important;
      border:1px solid rgba(255,255,255,.76);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.07),
        0 9px 22px rgba(0,0,0,.14),
        0 0 0 1px rgba(255,255,255,.45) !important;
    }

    html.dark .nav button.active,
    html.dark .mode-toggle button.active{
      color:#111 !important;
      background:var(--ios-active-dark) !important;
      border-color:rgba(255,255,255,.88);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,.10),
        0 10px 26px rgba(0,0,0,.48),
        0 0 28px rgba(255,255,255,.12) !important;
    }

    .segmented .seg.active{
      background:transparent !important;
      border-color:transparent !important;
      box-shadow:none !important;
      -webkit-backdrop-filter:none !important;
      backdrop-filter:none !important;
    }

    .segmented .seg.active::before{
      display:none !important;
    }

    .segmented .seg-ind{
      display:block !important;
      z-index:0;
      pointer-events:none;
    }

    .seg-ind{
      background:var(--ios-active-light) !important;
      border:1px solid rgba(255,255,255,.76);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.07),
        0 9px 22px rgba(0,0,0,.14),
        0 0 0 1px rgba(255,255,255,.45) !important;
    }

    html.dark .seg-ind{
      background:var(--ios-active-dark) !important;
      border-color:rgba(255,255,255,.88);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,.10),
        0 10px 26px rgba(0,0,0,.48),
        0 0 28px rgba(255,255,255,.12) !important;
    }

    .seg.active{
      color:#111 !important;
    }

    /* ---------- Packing donut / pie ring ---------- */

    .progress-card{
      background:
        linear-gradient(180deg,rgba(255,255,255,.08),transparent),
        var(--card);
    }

    .ring{
      position:relative;
      width:168px !important;
      height:168px !important;
      background:var(
        --ring-gradient,
        conic-gradient(rgba(127,127,127,.16) 0 100%)
      ) !important;
      box-shadow:
        inset 0 0 0 1px var(--line),
        inset 0 8px 18px rgba(255,255,255,.10),
        0 18px 46px rgba(0,0,0,.14);
    }

    .ring::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:50%;
      background:
        radial-gradient(circle at 32% 20%,rgba(255,255,255,.34),transparent 30%);
      pointer-events:none;
      mix-blend-mode:screen;
    }

    .ring-inner{
      width:106px !important;
      height:106px !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 0 1px var(--line);
    }

    .ring-inner strong{
      font-size:34px !important;
    }

    html.dark .ring{
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 8px 18px rgba(255,255,255,.06),
        0 24px 60px rgba(0,0,0,.45);
    }

    /* ---------- Packing rows / selected states ---------- */

    .pack-group{
      background:
        linear-gradient(180deg,rgba(255,255,255,.035),transparent),
        var(--card) !important;
    }

    .pack-items-wrapper {
      display: grid;
      grid-template-rows: 1fr;
      overflow: hidden;
    }

    .pack-items {
      overflow: hidden;
    }

    .pack-group .arrow-icon{
      display:inline-block;
      margin-left:8px;
      font-size:9px;
      transition:transform .2s ease;
      opacity:.5;
      vertical-align:middle;
    }

    .pack-group.collapsed .arrow-icon{
      transform:rotate(-90deg);
    }

    .group-head{
      cursor:pointer;
      user-select:none;
    }

    .glyphbox{
      background:
        radial-gradient(circle at 32% 18%,rgba(255,255,255,.45),transparent 36%),
        rgba(var(--cat-rgb),.14) !important;
      border:1px solid rgba(var(--cat-rgb),.24) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 10px 22px rgba(var(--cat-rgb),.10);
    }

    .pack-row{
      border:1px solid transparent;
    }

    .pack-row:hover{
      background:
        linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),
        rgba(var(--cat-rgb),.035) !important;
      border-color:rgba(var(--cat-rgb),.10);
    }

    .check{
      background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
    }

    /* ---------- Overview cards / meters ---------- */

    .strategy,
    .ready,
    .elev-card,
    .focus,
    .progress-card{
      border:1px solid var(--line);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        var(--shadow);
    }

    .strategy-btn{
      background:
        linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
        var(--fill) !important;
      border:1px solid transparent;
    }

    .strategy-btn:hover{
      background:
        linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)),
        var(--fill-strong) !important;
      border-color:var(--line);
    }

    .meter{
      filter:drop-shadow(0 10px 20px rgba(0,0,0,.12));
    }

    .meter::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:50%;
      background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.52),transparent 30%);
      pointer-events:none;
    }

    .meter::after{
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 0 1px var(--line);
    }

    /* ---------- Chart polish ---------- */

    .chart{
      background:
        radial-gradient(circle at 30% 0%,rgba(255,255,255,.10),transparent 34%),
        linear-gradient(180deg,rgba(0,122,255,.10),transparent),
        var(--fill) !important;
      border:1px solid var(--line);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,0,0,.08);
    }

    .chart-point{
      filter:drop-shadow(0 7px 13px rgba(0,122,255,.22));
    }

    .chart-point.active,
    .chart-point:hover{
      filter:
        drop-shadow(0 0 8px rgba(0,122,255,.42))
        drop-shadow(0 10px 18px rgba(0,122,255,.24));
    }

    /* ---------- Mobile: buttons / segmented / donut / chart ---------- */

    @media(max-width:640px){
      .hero-main-btn,
      .hero-sub-btn,
      .primary,
      .soft{
        min-height:48px;
        padding-inline:18px;
        border-radius:999px;
        font-size:15px;
        font-weight:880;
      }

      .mode-toggle,
      .segmented{
        width:100%;
      }

      .mode-toggle button,
      .seg{
        min-height:46px;
        font-size:14px;
      }

      .ring{
        width:156px !important;
        height:156px !important;
      }

      .ring-inner{
        width:100px !important;
        height:100px !important;
      }

      .tabbar{
        background:
          linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.40)),
          rgba(255,255,255,.52) !important;
        border:1px solid rgba(0,0,0,.08) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.68),
          0 16px 42px rgba(0,0,0,.16) !important;
      }

      html.dark .tabbar{
        background:
          linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.045)),
          rgba(28,28,30,.72) !important;
        border-color:rgba(255,255,255,.14) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.12),
          0 18px 48px rgba(0,0,0,.46) !important;
      }

      .tabbar button{
        position:relative;
        isolation:isolate;
      }

      .tabbar button.active::before{
        content:"";
        position:absolute;
        inset:6px 8px;
        z-index:-1;
        border-radius:18px;
        background:
          linear-gradient(180deg,rgba(0,122,255,.16),rgba(0,122,255,.07));
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.18),
          0 8px 18px rgba(0,122,255,.14);
      }

      .tabbar-icon{
        width:23px !important;
        height:23px !important;
      }

      .elev-card .chart{
        border-radius:26px !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.08),
          0 18px 44px rgba(0,0,0,.12);
      }
    }

    /* =========================================================
       Final polish: Today Focus button + packing checked icon
       目标：
       1. 今日重点按钮改为更精致的 iOS liquid glass CTA
       2. 极简打包选中图标改为细腻的分类色玻璃勾选状态
       ========================================================= */

    /* ---------- 今日重点按钮：只作用于顶部 CTA，不影响 sheet 里的 primary ---------- */

    #focusBtn.primary{
      position:relative;
      isolation:isolate;
      overflow:hidden;

      height:48px !important;
      min-width:118px;
      padding:0 20px !important;
      border-radius:999px !important;

      color:#fff !important;
      font-size:15px !important;
      font-weight:900 !important;
      letter-spacing:-.012em;

      background:
        radial-gradient(circle at 28% 18%,rgba(255,255,255,.72),transparent 30%),
        linear-gradient(180deg,#69a1ff 0%,#3478f6 48%,#0a63e8 100%) !important;

      border:1px solid rgba(255,255,255,.45) !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.62),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 12px 28px rgba(0,122,255,.30),
        0 0 0 1px rgba(0,122,255,.10) !important;

      backdrop-filter:blur(24px) saturate(180%) !important;
      -webkit-backdrop-filter:blur(24px) saturate(180%) !important;

      transform:translateZ(0);
      transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease,
        background .18s ease;
    }

    /* 玻璃高光层 */
    #focusBtn.primary::before{
      content:"";
      position:absolute;
      inset:1px 1px auto 1px;
      height:52%;
      z-index:-1;
      border-radius:999px;
      background:
        linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,.08));
      pointer-events:none;
    }

    /* 右侧轻微光晕，不增加额外图标，避免按钮显脏 */
    #focusBtn.primary::after{
      content:"";
      position:absolute;
      right:12px;
      top:50%;
      width:18px;
      height:18px;
      z-index:-1;
      border-radius:999px;
      background:rgba(255,255,255,.26);
      filter:blur(10px);
      transform:translateY(-50%);
      pointer-events:none;
    }

    #focusBtn.primary:hover{
      filter:saturate(1.08) brightness(1.04);
      transform:translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.68),
        inset 0 -1px 0 rgba(0,0,0,.18),
        0 16px 36px rgba(0,122,255,.36),
        0 0 0 1px rgba(0,122,255,.12) !important;
    }

    #focusBtn.primary:active{
      transform:scale(.975) translateY(0) !important;
      filter:saturate(1.02) brightness(.98);
    }

    /* 暗色模式下减少“塑料蓝”，增加玻璃层次 */
    html.dark #focusBtn.primary{
      background:
        radial-gradient(circle at 28% 18%,rgba(255,255,255,.66),transparent 30%),
        linear-gradient(180deg,#5f94ff 0%,#2f74ff 48%,#0a5bd7 100%) !important;

      border-color:rgba(255,255,255,.32) !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.48),
        inset 0 -1px 0 rgba(0,0,0,.24),
        0 16px 38px rgba(0,122,255,.30),
        0 0 36px rgba(0,122,255,.16) !important;
    }


    /* ---------- 极简打包：未选中状态 ---------- */

    .check{
      position:relative !important;
      width:30px !important;
      height:30px !important;
      flex:0 0 auto;

      display:grid !important;
      place-items:center !important;

      border-radius:999px !important;

      background:
        linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.48)),
        rgba(255,255,255,.58) !important;

      border:1.5px solid rgba(0,0,0,.16) !important;

      color:transparent !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -1px 0 rgba(0,0,0,.05),
        0 5px 12px rgba(0,0,0,.06) !important;

      backdrop-filter:blur(18px) saturate(180%);
      -webkit-backdrop-filter:blur(18px) saturate(180%);

      transform:translateZ(0);
      transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .16s ease;
    }

    /* 玻璃高光 */
    .check::after{
      content:"";
      position:absolute;
      inset:2px 2px auto 2px;
      height:42%;
      border-radius:999px;
      background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.04));
      opacity:.72;
      pointer-events:none;
    }

    /* 暗色模式未选中态 */
    html.dark .check{
      background:
        linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035)),
        rgba(28,28,30,.72) !important;

      border-color:rgba(255,255,255,.20) !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(0,0,0,.40),
        0 8px 18px rgba(0,0,0,.22) !important;
    }


    /* ---------- 极简打包：选中状态，跟随分类色 ---------- */

    /* 行选中状态也要轻一点，不要像粗暴高亮 */
    .pack-row.done{
      background:
        linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018)),
        rgba(var(--cat-rgb),.045) !important;

      border:1px solid rgba(var(--cat-rgb),.10) !important;
    }

    html.dark .pack-row.done{
      background:
        linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
        rgba(var(--cat-rgb),.075) !important;

      border-color:rgba(var(--cat-rgb),.16) !important;
    }

    /* 避免选中后文字过灰，看起来像 disabled */
    .pack-row.done .pack-name{
      color:var(--text) !important;
      text-decoration:none !important;
      opacity:.74;
    }

    .pack-row.done .pack-desc{
      opacity:.72 !important;
    }

    .pack-row.done:hover{
      background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),
        rgba(var(--cat-rgb),.07) !important;
    }

    /* 点击反馈 */
    .pack-row:active .check{
      transform:scale(.92);
    }

    .pack-row.done:active .check{
      transform:scale(.96) !important;
    }


    /* ---------- 移动端适配 ---------- */

    @media(max-width:640px){
      #focusBtn.primary{
        height:46px !important;
        min-width:auto;
        padding:0 18px !important;
        font-size:14px !important;
      }

      .check{
        width:32px !important;
        height:32px !important;
      }

    }

    /* =========================================================
       Final bugfix: focus CTA edge line + packing checked row seam
       1. 去掉“今日重点”按钮暗色底部白线 / 亮色顶部蓝线
       2. 去掉连续勾选项目之间的亮色横条
       ========================================================= */


    /* ---------- 今日重点按钮：重做为无硬边的 iOS glass CTA ---------- */

    #focusBtn.primary{
      position:relative !important;
      isolation:isolate !important;
      overflow:hidden !important;

      height:48px !important;
      min-width:118px;
      padding:0 20px !important;
      border-radius:999px !important;

      color:#fff !important;
      font-size:15px !important;
      font-weight:900 !important;
      letter-spacing:-.012em;

      /*
        关键：不要让高光贴到按钮最外边缘，
        避免亮色模式顶部蓝线、暗色模式底部白线。
      */
      background:
        radial-gradient(circle at 30% 18%,rgba(255,255,255,.58),transparent 31%),
        linear-gradient(180deg,#6aa2ff 0%,#3478f6 52%,#1768e8 100%) !important;

      border:1px solid rgba(255,255,255,.22) !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -1px 0 rgba(0,0,0,.16),
        0 12px 26px rgba(0,122,255,.25),
        0 0 0 1px rgba(0,122,255,.06) !important;

      backdrop-filter:blur(24px) saturate(180%) !important;
      -webkit-backdrop-filter:blur(24px) saturate(180%) !important;

      transform:translateZ(0);
    }

    /* 禁用旧版本产生边缘亮线的伪元素 */
    #focusBtn.primary::before,
    #focusBtn.primary::after{
      content:none !important;
      display:none !important;
    }

    #focusBtn.primary:hover{
      filter:saturate(1.06) brightness(1.03);
      transform:translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -1px 0 rgba(0,0,0,.16),
        0 16px 34px rgba(0,122,255,.32),
        0 0 0 1px rgba(0,122,255,.08) !important;
    }

    #focusBtn.primary:active{
      transform:scale(.975) !important;
      filter:saturate(1.02) brightness(.98);
    }

    html.dark #focusBtn.primary{
      background:
        radial-gradient(circle at 30% 18%,rgba(255,255,255,.48),transparent 31%),
        linear-gradient(180deg,#5f94ff 0%,#2f74ff 52%,#145edc 100%) !important;

      border-color:rgba(255,255,255,.18) !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.24),
        0 14px 32px rgba(0,122,255,.26),
        0 0 28px rgba(0,122,255,.12) !important;
    }


    /* ---------- 打包项：去掉连续勾选后的横向亮色接缝 ---------- */

    /*
      关键：
      选中状态不要再给整行做强边框 / 强阴影。
      勾选状态主要由左侧 check 表达，整行只给非常轻的底色。
    */
    .pack-row{
      position:relative !important;
      overflow:hidden !important;
      border:1px solid transparent !important;
      box-shadow:none !important;
      background:transparent !important;
    }

    .pack-row.done{
      background:
        linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
        rgba(var(--cat-rgb),.035) !important;

      border-color:transparent !important;
      box-shadow:none !important;
      outline:0 !important;
    }

    /* 禁止旧样式或浏览器抗锯齿形成整行底部亮线 */
    .pack-row.done::before,
    .pack-row.done::after{
      content:none !important;
      display:none !important;
    }

    html.dark .pack-row.done{
      background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
        rgba(var(--cat-rgb),.052) !important;

      border-color:transparent !important;
      box-shadow:none !important;
    }

    /* hover 也不要加边框，否则连续选中时仍会出现横线 */
    .pack-row.done:hover,
    html.dark .pack-row.done:hover{
      background:
        linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.016)),
        rgba(var(--cat-rgb),.065) !important;

      border-color:transparent !important;
      box-shadow:none !important;
    }


    /* ---------- 勾选圆点：保留精致状态，但不污染整行 ---------- */

    .check{
      position:relative !important;
      width:30px !important;
      height:30px !important;
      border-radius:999px !important;

      background:
        linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035)),
        rgba(127,127,127,.08) !important;

      border:1.5px solid rgba(142,142,147,.42) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,0,0,.08) !important;

      color:transparent !important;
      transform:translateZ(0);
    }

    .check::before{
      content:"" !important;
      position:absolute;
      left:50%;
      top:50%;
      width:7px;
      height:12px;
      border-right:2.5px solid #fff;
      border-bottom:2.5px solid #fff;
      border-radius:1px;
      opacity:0;
      transform:translate(-50%,-58%) rotate(45deg) scale(.72);
      transition:opacity .16s ease, transform .2s cubic-bezier(.2,1.15,.2,1);
    }

    /* 取消 check 自身可能造成外溢横线的高光层 */
    .check::after{
      content:none !important;
      display:none !important;
    }

    .pack-row.done .check{
      background:
        radial-gradient(circle at 34% 24%,rgba(255,255,255,.70),transparent 34%),
        linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.10)),
        var(--cat) !important;

      border-color:rgba(255,255,255,.34) !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -1px 0 rgba(0,0,0,.16),
        0 8px 18px rgba(var(--cat-rgb),.26),
        0 0 0 4px rgba(var(--cat-rgb),.08) !important;

      transform:scale(1.03) !important;
    }

    .pack-row.done .check::before{
      opacity:1;
      transform:translate(-50%,-58%) rotate(45deg) scale(1);
    }

    /*
      选中文本不再划线，避免视觉像 disabled。
    */
    .pack-row.done .pack-name{
      color:var(--text) !important;
      text-decoration:none !important;
      opacity:.78;
    }

    .pack-row.done .pack-desc{
      opacity:.72 !important;
    }


    /* ---------- 暗色模式微调 ---------- */

    html.dark .check{
      background:
        linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),
        rgba(28,28,30,.58) !important;

      border-color:rgba(255,255,255,.20) !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(0,0,0,.32) !important;
    }

    html.dark .pack-row.done .check{
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        inset 0 -1px 0 rgba(0,0,0,.20),
        0 8px 18px rgba(var(--cat-rgb),.24),
        0 0 0 4px rgba(var(--cat-rgb),.09) !important;
    }

    /* =========================================================
       Final fix: 今日重点按钮边缘线彻底移除
       原因：border + inset shadow + pseudo 高光共同导致边缘线
       ========================================================= */

    #focusBtn.primary{
      position:relative !important;
      isolation:isolate !important;
      overflow:hidden !important;

      height:46px !important;
      min-width:124px !important;
      padding:0 22px !important;
      border-radius:999px !important;

      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;

      color:#fff !important;
      font-size:15px !important;
      font-weight:900 !important;
      line-height:1 !important;
      letter-spacing:-.012em;

      /*
        关键 1：
        使用 border: none 避免透明边框漏出背景亮色。
      */
      border:none !important;

      /*
        关键 2：
        不需要限制在 padding-box，允许背景渐变铺满整个边界。
      */
      background:
        radial-gradient(circle at 32% 18%, rgba(255,255,255,.42), transparent 30%),
        linear-gradient(180deg, #5f96ff 0%, #3478f6 54%, #1768e8 100%) !important;

      /*
        关键 3：
        禁止 inset shadow。
        inset 高光最容易在圆角边缘形成白线。
      */
      box-shadow:
        0 12px 28px rgba(0,122,255,.28),
        0 0 28px rgba(0,122,255,.12) !important;

      outline:0 !important;

      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;

      transform:translateZ(0);
      transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        filter .18s ease,
        box-shadow .18s ease;
    }

    /*
      关键 4：
      禁用之前所有伪元素高光层。
      这些高光层即使 inset 2px，也可能在 Safari / Chrome 缩放下出现边缘亮线。
    */
    #focusBtn.primary::before,
    #focusBtn.primary::after{
      content:none !important;
      display:none !important;
    }

    #focusBtn.primary:hover{
      transform:translateY(-1px);
      filter:saturate(1.06) brightness(1.035);
      box-shadow:
        0 16px 34px rgba(0,122,255,.32),
        0 0 32px rgba(0,122,255,.14) !important;
    }

    #focusBtn.primary:active{
      transform:scale(.975) translateY(0) !important;
      filter:saturate(1.02) brightness(.98);
    }

    /* 暗色模式：进一步降低边缘光感 */
    html.dark #focusBtn.primary{
      border:none !important;

      background:
        radial-gradient(circle at 32% 18%, rgba(255,255,255,.34), transparent 30%),
        linear-gradient(180deg, #5a8fff 0%, #2f74ff 54%, #145edc 100%) !important;

      box-shadow:
        0 14px 30px rgba(0,122,255,.25),
        0 0 26px rgba(0,122,255,.10) !important;
    }

    /* 键盘可访问性保留，不污染正常状态 */
    #focusBtn.primary:focus{
      outline:none !important;
    }

    #focusBtn.primary:focus-visible{
      outline:3px solid rgba(0,122,255,.30) !important;
      outline-offset:4px !important;
    }

    @media(max-width:640px){
      #focusBtn.primary{
        height:46px !important;
        min-width:112px !important;
        padding:0 18px !important;
        font-size:14px !important;
      }
    }

    /* =========================================================
       Final sheet CTA polish
       让“检查物品 / 查看行程”参考“今日重点”按钮风格
       但避免边缘白线 / 蓝线 / 双按钮之间高光串色
       ========================================================= */

    #sheetActions{
      gap:12px !important;
      padding:0 24px 24px !important;
    }

    #sheetActions .primary{
      position:relative !important;
      isolation:isolate !important;
      overflow:hidden !important;

      height:48px !important;
      min-height:48px !important;
      border-radius:18px !important;
      padding:0 18px !important;

      display:grid !important;
      place-items:center !important;

      color:#fff !important;
      font-size:15px !important;
      font-weight:900 !important;
      line-height:1 !important;
      letter-spacing:-.012em;

      /*
        移除外边框，避免弹窗 CTA 边缘出现一圈硬线。
      */
      border:0 !important;
      background:
        radial-gradient(circle at 34% 18%, rgba(255,255,255,.34), transparent 30%),
        linear-gradient(180deg, #5f96ff 0%, #3478f6 54%, #1768e8 100%) !important;
      background-origin:border-box !important;
      background-clip:padding-box !important;
      -webkit-background-clip:padding-box !important;

      /*
        不使用 inset shadow，避免按钮顶部/底部硬线。
      */
      box-shadow:
        0 10px 24px rgba(0,122,255,.24),
        0 0 24px rgba(0,122,255,.10) !important;

      outline:0 !important;
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;

      transform:translateZ(0);
      transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        filter .18s ease,
        box-shadow .18s ease;
    }

    /*
      禁用可能继承或旧补丁残留的伪元素高光。
    */
    #sheetActions .primary::before,
    #sheetActions .primary::after{
      content:none !important;
      display:none !important;
    }

    #sheetActions .primary:hover{
      transform:translateY(-1px);
      filter:saturate(1.06) brightness(1.035);
      box-shadow:
        0 14px 30px rgba(0,122,255,.30),
        0 0 28px rgba(0,122,255,.12) !important;
    }

    #sheetActions .primary:active{
      transform:scale(.975) translateY(0) !important;
      filter:saturate(1.02) brightness(.98);
    }

    html.dark #sheetActions .primary{
      background:
        radial-gradient(circle at 34% 18%, rgba(255,255,255,.28), transparent 30%),
        linear-gradient(180deg, #5a8fff 0%, #2f74ff 54%, #145edc 100%) !important;

      border:0 !important;

      box-shadow:
        0 12px 28px rgba(0,122,255,.22),
        0 0 24px rgba(0,122,255,.10) !important;
    }

    /*
      避免两个并排按钮之间出现连成一片的高光。
    */
    #sheetActions .primary + .primary{
      margin-left:0 !important;
    }

    /*
      移动端：保持触控高度，双按钮仍然平分宽度。
    */
    @media(max-width:640px){
      #sheetActions{
        gap:10px !important;
        padding:0 18px calc(20px + var(--safe)) !important;
      }

      #sheetActions .primary{
        height:48px !important;
        min-height:48px !important;
        border-radius:17px !important;
        font-size:14px !important;
      }
    }

    /* =========================================================
       Final polish: sheet close button
       放大关闭 icon，并改成更稳定的 CSS 绘制 X
       ========================================================= */

    #closeSheet.control{
      position:relative !important;
      width:48px !important;
      height:48px !important;
      flex:0 0 48px !important;

      display:grid !important;
      place-items:center !important;

      border-radius:999px !important;

      /*
        隐藏原始字符 ×，避免字体大小和系统渲染不稳定。
      */
      font-size:0 !important;
      color:var(--text) !important;

      background:
        linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035)),
        var(--fill) !important;

      border:1px solid var(--line) !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 12px 28px rgba(0,0,0,.12) !important;

      backdrop-filter:blur(22px) saturate(180%) !important;
      -webkit-backdrop-filter:blur(22px) saturate(180%) !important;
    }

    #closeSheet.control::before,
    #closeSheet.control::after{
      content:"" !important;
      position:absolute;
      left:50%;
      top:50%;

      width:15px;
      height:2.8px;
      border-radius:999px;

      background:currentColor;
      opacity:.92;

      transform-origin:center;
    }

    #closeSheet.control::before{
      transform:translate(-50%,-50%) rotate(45deg);
    }

    #closeSheet.control::after{
      transform:translate(-50%,-50%) rotate(-45deg);
    }

    #closeSheet.control:hover{
      background:
        linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.055)),
        var(--fill-strong) !important;

      transform:translateY(-1px);
    }

    #closeSheet.control:active{
      transform:scale(.94) !important;
    }

    /* 暗色模式下稍微增强 X 的可读性 */
    html.dark #closeSheet.control{
      background:
        linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035)),
        rgba(44,44,46,.74) !important;

      border-color:rgba(255,255,255,.14) !important;

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 14px 34px rgba(0,0,0,.36) !important;
    }

    html.dark #closeSheet.control::before,
    html.dark #closeSheet.control::after{
      opacity:.96;
    }

    /* 移动端触控保持舒适，不要缩小 */
    @media(max-width:640px){
      #closeSheet.control{
        width:48px !important;
        height:48px !important;
        flex-basis:48px !important;
      }

      #closeSheet.control::before,
      #closeSheet.control::after{
        width:16px;
        height:3px;
      }
    }


    /* =========================================
       Packing list counters / done strike / alignment
       ========================================= */
    .packing-page .group-head{
      padding:13px 17px !important;
    }

    .packing-page .pack-count{
      display:inline-flex;
      align-items:center;
      justify-content:flex-end;
      gap:6px;
      min-width:88px;
      height:30px;
      padding:0 10px;
      border-radius:999px;
      background:rgba(var(--cat-rgb),.08);
      border:1px solid rgba(var(--cat-rgb),.12);
      color:var(--tertiary);
      font-size:12px;
      font-weight:880;
      letter-spacing:-.01em;
      white-space:nowrap;
      transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
    }

    .packing-page .pack-count.has-done{
      background:rgba(var(--cat-rgb),.13);
      border-color:rgba(var(--cat-rgb),.22);
      color:var(--cat);
    }

    .packing-page .pack-count .arrow-icon{
      margin-left:2px;
      opacity:.46;
    }

    .packing-page .pack-row{
      width:calc(100% - 12px) !important;
      margin:2px 6px 0 !important;
      display:grid !important;
      grid-template-columns:38px minmax(0,1fr) !important;
      gap:12px !important;
      align-items:start !important;
      padding:12px 11px !important;
      border-radius:18px !important;
    }

    .packing-page .pack-row:first-child{
      margin-top:0 !important;
    }

    .packing-page .pack-row .check{
      justify-self:center;
    }

    .packing-page .pack-row.done .pack-name,
    .packing-page .pack-row.done .pack-desc{
      color:var(--tertiary) !important;
      text-decoration-line:line-through !important;
      text-decoration-thickness:.08em !important;
      text-decoration-color:rgba(84,84,88,.48) !important;
      text-decoration-skip-ink:auto;
      opacity:.78 !important;
    }

    html.dark .packing-page .pack-row.done .pack-name,
    html.dark .packing-page .pack-row.done .pack-desc{
      text-decoration-color:rgba(209,209,214,.42) !important;
    }

    .packing-page .pack-row.done .need,
    .packing-page .pack-row.done .qty{
      text-decoration:none !important;
      opacity:.74;
    }

    /* =========================================================
       Packing divider fix
       修复：列表展开后 group-head 与选项之间出现双横线

       原因：
       .packing-page .pack-items 之前有 border-top；
       .pack-items-inner 也有 border-top；
       两条线叠在一起形成双横线。

       原则：
       pack-items 只负责裁剪和承载动画；
       pack-items-inner 负责真实 padding 和唯一分割线。
       ========================================================= */

    .packing-page .pack-items{
      padding:0 !important;
      border-top:0 !important;
      background:transparent !important;
    }

    .packing-page .pack-items-inner{
      padding:6px !important;
      border-top:1px solid var(--line) !important;
    }

    .packing-page .pack-group.collapsed .pack-items{
      padding:0 !important;
      border-top:0 !important;
    }

    .packing-page .pack-group.collapsed .pack-items-inner{
      padding-top:0 !important;
      padding-bottom:0 !important;
      border-top-color:transparent !important;
    }

    .packing-page .pack-row:first-child{
      margin-top:0 !important;
    }

    /* =========================================================
       Packing right panel polish
       1. 折叠态 group-head 垂直居中
       2. 右侧列表外层恢复卡片圆角容器
       ========================================================= */

    .packing-page .pack-items-wrapper{
      min-height:0 !important;
    }

    .packing-page .pack-items-wrapper > .pack-items{
      min-height:0 !important;
      overflow:hidden !important;
    }

    .packing-page .pack-group.collapsed .group-head{
      height:72px !important;
      min-height:72px !important;
      padding-top:0 !important;
      padding-bottom:0 !important;
      align-items:center !important;
    }

    .packing-page .pack-group.collapsed .group-title{
      align-items:center !important;
    }

    .packing-page .pack-group.collapsed .group-title > span:last-child{
      display:flex !important;
      flex-direction:column;
      justify-content:center;
      min-height:38px;
    }

    .packing-page .pack-group.collapsed .pack-items-wrapper{
      height:0 !important;
      min-height:0 !important;
      opacity:0 !important;
      transform:translateY(0) !important;
      pointer-events:none;
    }

    @media (min-width:981px){
      .packing-page .packing-list{
        border-radius:30px !important;
        background:var(--card) !important;
        border:1px solid var(--line) !important;
        box-shadow:var(--shadow) !important;
        padding:12px !important;
        margin:0 !important;
        gap:12px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        isolation:isolate;
        clip-path:inset(0 round 30px);
        scrollbar-gutter:stable;
      }

      html.dark .packing-page .packing-list{
        background:var(--card) !important;
      }

      .packing-page .packing-list::-webkit-scrollbar{
        width:6px;
      }

      .packing-page .packing-list::-webkit-scrollbar-track{
        margin:18px 0;
        background:transparent !important;
      }

      .packing-page .packing-list::-webkit-scrollbar-thumb{
        border-radius:999px;
        background:rgba(142,142,147,.28);
      }

      .packing-page .packing-list::-webkit-scrollbar-thumb:hover{
        background:rgba(142,142,147,.42);
      }

      .packing-page .packing-list .pack-group{
        box-shadow:0 12px 30px rgba(0,0,0,.055) !important;
      }

      html.dark .packing-page .packing-list .pack-group{
        box-shadow:0 12px 34px rgba(0,0,0,.32) !important;
      }
    }

    @media (max-width:980px){
      .packing-page .pack-group.collapsed .group-head{
        height:68px !important;
        min-height:68px !important;
      }
    }

    @media (max-width:640px){
      .packing-page .pack-group{
        scroll-margin-top:calc(var(--mobile-top-space) + 12px);
      }

      .packing-page .packing-layout{
        overflow:visible !important;
      }
    }

    /* =========================================================
       Packing landscape scroll container fix
       PC / 平板横屏 / 手机横屏：
       展开分类时只滚动右侧 packing-list，不滚动整个 page
       ========================================================= */

    @media (orientation:landscape) and (max-width:980px){
      .packing-page .page-inner{
        min-height:calc(100svh - var(--topbar) - var(--safe-top)) !important;
        overflow:visible !important;
      }

      .packing-page .section-copy{
        flex:0 0 auto !important;
        margin-bottom:0 !important;
      }

      .packing-page .packing-layout{
        width:100% !important;
        height:clamp(
          238px,
          calc(100svh - var(--topbar) - var(--safe-top) - 156px),
          430px
        ) !important;
        min-height:0 !important;
        align-items:stretch !important;
        overflow:visible !important;
      }

      .packing-page .progress-card{
        height:100% !important;
        min-height:0 !important;
        overflow:hidden !important;
      }

      .packing-page .packing-list{
        height:100% !important;
        min-height:0 !important;
        max-height:100% !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-gutter:stable;
      }

      .packing-page .pack-group{
        scroll-margin-top:0 !important;
      }
    }

    /* =========================================================
       PC fix: 强度曲线页一屏展示 + 浮层不出屏
       原因：
       1. elevation-page 之前给了较大的 padding-top / padding-bottom；
       2. elev-card 内部 chart 使用固定 height:min(50vh,370px)，
          在 1080p / 浏览器工具栏 / 缩放场景下容易把卡片底部顶出页面；
       3. chartInfo 虽然是 fixed，但定位函数只用 innerWidth/innerHeight，
          没有兼容 visualViewport，也没有限制 tooltip 自身最大高度。
       ========================================================= */

    @media (min-width:981px){
      .elevation-page{
        overflow:hidden !important;
      }

      .elevation-page .page-inner{
        height:100% !important;
        min-height:0 !important;
        justify-content:flex-start !important;
        gap:clamp(8px,1.1vh,12px) !important;
        padding-top:clamp(8px,1.6vh,18px) !important;
        padding-bottom:clamp(18px,2.8vh,32px) !important;
        overflow:visible !important;
      }

      .elevation-page .section-copy{
        flex:0 0 auto !important;
        margin-bottom:0 !important;
      }

      .elevation-page .title{
        margin-top:6px !important;
        font-size:clamp(40px,4.8vw,62px) !important;
        line-height:.96 !important;
      }

      .elevation-page .subtitle{
        max-width:880px !important;
        margin-top:8px !important;
        font-size:clamp(14px,1.2vw,16px) !important;
        line-height:1.52 !important;
      }

      .elevation-page .elev-card{
        width:100% !important;
        flex:1 1 auto !important;
        min-height:0 !important;
        max-height:100% !important;
        display:flex !important;
        flex-direction:column !important;
        padding:clamp(18px,2.1vh,24px) !important;
        overflow:hidden !important;
      }

      .elevation-page .chart-title{
        flex:0 0 auto !important;
        margin-bottom:clamp(8px,1.2vh,14px) !important;
      }

      .elevation-page .chart-title h3{
        margin-top:6px !important;
        font-size:clamp(26px,2.6vw,34px) !important;
        line-height:1.02 !important;
      }

      .elevation-page .chart{
        flex:1 1 auto !important;
        min-height:0 !important;
        height:auto !important;
        max-height:none !important;
        border-radius:24px !important;
      }

      .elevation-page .chart svg{
        width:100% !important;
        height:100% !important;
        display:block !important;
      }

      .chart-info{
        max-height:calc(100svh - 32px) !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
      }
    }

    @media (min-width:981px) and (max-height:820px){
      .elevation-page .page-inner{
        gap:8px !important;
        padding-top:8px !important;
        padding-bottom:18px !important;
      }

      .elevation-page .title{
        font-size:clamp(34px,4.2vw,52px) !important;
      }

      .elevation-page .subtitle{
        margin-top:6px !important;
        font-size:14px !important;
        line-height:1.42 !important;
      }

      .elevation-page .elev-card{
        padding:16px 20px !important;
      }

      .elevation-page .chart-title{
        margin-bottom:8px !important;
      }

      .elevation-page .chart-title h3{
        font-size:26px !important;
      }

      .elevation-page .eyebrow{
        font-size:11px !important;
      }
    }

    /* =========================================================
       Apple-grade cross-device interaction polish
       覆盖：移动端竖屏/横屏、平板竖屏/横屏、PC
       ========================================================= */

    :root{
      --tap-min:44px;
      --sheet-max-h:calc(100svh - 28px);
    }

    button,
    [role="button"],
    .pack-row,
    .time-row,
    .strategy-btn,
    .ready,
    .seg,
    .mode-toggle button{
      touch-action:manipulation;
    }

    .group-head{
      width:100%;
      border:0;
      background:transparent;
      color:inherit;
      text-align:left;
      cursor:pointer;
    }

    .group-head:focus-visible,
    .pack-row:focus-visible,
    .time-row:focus-visible,
    .strategy-btn:focus-visible,
    .ready:focus-visible,
    .seg:focus-visible,
    .mode-toggle button:focus-visible{
      outline:3px solid rgba(0,122,255,.34);
      outline-offset:3px;
    }

    .chart-point{
      pointer-events:auto;
      outline:none;
    }

    .chart-point:focus-visible{
      stroke-width:6 !important;
      filter:
        drop-shadow(0 0 9px rgba(0,122,255,.48))
        drop-shadow(0 10px 18px rgba(0,122,255,.26));
    }

    .sheet-body{
      overscroll-behavior:contain;
    }

    body.sheet-open{
      overscroll-behavior:none;
    }

    body.sheet-open .viewport{
      overscroll-behavior:contain;
    }

    .sheet-panel:focus{
      outline:none;
    }

    @media (hover:none){
      .interactive:hover{
        transform:none;
        box-shadow:var(--shadow);
      }

      .hero-main-btn,
      .hero-sub-btn,
      .primary,
      .soft,
      .control,
      .page-btn,
      .seg,
      .mode-toggle button,
      .pack-row,
      .time-row,
      .strategy-btn,
      .ready{
        min-height:var(--tap-min);
      }

      input,
      .search input{
        font-size:16px !important;
      }
    }

    @media (max-width:980px){
      .viewport{
        scroll-padding-top:calc(var(--topbar) + var(--safe-top) + 16px);
        scroll-padding-bottom:calc(92px + var(--safe));
        overscroll-behavior-y:contain;
      }

      .page-inner{
        width:min(100% - 28px,var(--max)) !important;
      }

      .sheet-panel{
        max-height:min(86svh,var(--sheet-max-h)) !important;
      }

      .sheet-body{
        font-size:16px;
        line-height:1.75;
      }

      .pack-group{
        border-radius:24px;
      }

      .pack-count{
        min-height:32px;
      }
    }

    @media (max-width:640px){
      .title{
        font-size:clamp(34px,10.8vw,52px);
      }

      .subtitle{
        font-size:15px;
        line-height:1.6;
      }

      .search{
        height:48px !important;
      }

      .pack-row{
        min-height:58px;
      }

      .sheet-head{
        padding:12px 18px 14px !important;
      }

      .sheet-body{
        padding:18px 20px 22px !important;
      }
    }

    @media (hover:none) and (orientation:landscape) and (max-height:560px){
      :root{
        --topbar:48px;
      }

      .top-inner{
        height:48px !important;
      }

      .page-inner{
        gap:10px !important;
        padding-top:8px !important;
        padding-bottom:18px !important;
      }

      .title{
        margin-top:4px !important;
        font-size:clamp(28px,8.5vh,42px) !important;
      }

      .subtitle{
        margin-top:6px !important;
        line-height:1.42 !important;
        display:-webkit-box;
        -webkit-line-clamp:2;
        line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }

      .card.pad,
      .elev-card,
      .focus,
      .timeline-card{
        border-radius:24px !important;
      }

      .sheet-panel{
        max-height:calc(100svh - 14px) !important;
      }
    }

    @media (min-width:641px) and (max-width:1180px){
      .page-inner{
        width:min(100% - 40px,var(--max)) !important;
      }

      .title{
        font-size:clamp(40px,6vw,62px);
      }
    }

    @media (min-width:981px) and (max-width:1366px) and (orientation:landscape){
      .packing-page .packing-layout{
        grid-template-columns:minmax(286px,.34fr) minmax(0,1fr) !important;
      }

      .elevation-page .page-inner{
        padding-top:clamp(10px,2vh,22px) !important;
        padding-bottom:clamp(18px,3vh,34px) !important;
      }
    }

    /* =========================================================
       Compact landscape packing fix
       目标：
       手机横屏 / 极低高度横屏时，不再强行一屏展示打包页。
       允许用户上下滚动查看完整 Checklist Progress 和列表。

       适用范围：
       - 手机横屏
       - 浏览器可视高度很低的横屏模式

       不影响：
       - PC
       - 平板正常横屏
       - 平板竖屏
       ========================================================= */

    @media (orientation:landscape) and (max-height:560px) and (max-width:1180px){
      html,
      body{
        overflow:hidden !important;
      }

      .viewport{
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-y:contain;
        padding-bottom:calc(32px + var(--safe)) !important;
      }

      .track{
        height:auto !important;
        min-height:0 !important;
        transform:none !important;
        transition:none !important;
      }

      .page{
        height:auto !important;
        min-height:calc(100svh - var(--topbar) - var(--safe-top)) !important;
        overflow:visible !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        padding-top:10px !important;
        padding-bottom:28px !important;
      }

      .packing-page{
        overflow:visible !important;
      }

      .packing-page .page-inner{
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
        justify-content:flex-start !important;
        gap:10px !important;
        padding-top:0 !important;
        padding-bottom:24px !important;
      }

      .packing-page .section-copy{
        flex:0 0 auto !important;
        margin-bottom:0 !important;
      }

      .packing-page .title{
        margin-top:4px !important;
        font-size:clamp(30px,9.5vh,44px) !important;
        line-height:.96 !important;
      }

      .packing-page .subtitle{
        margin-top:6px !important;
        font-size:14px !important;
        line-height:1.42 !important;
      }

      .packing-page .packing-layout{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        grid-template-columns:minmax(260px,320px) minmax(0,1fr) !important;
        align-items:start !important;
        overflow:visible !important;
        gap:14px !important;
      }

      .packing-page .progress-card{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-start !important;
        padding:18px !important;
      }

      .packing-page .ring-wrap{
        margin:8px 0 12px !important;
      }

      .packing-page .ring{
        width:138px !important;
        height:138px !important;
      }

      .packing-page .ring-inner{
        width:92px !important;
        height:92px !important;
      }

      .packing-page .weights{
        gap:8px !important;
      }

      .packing-page .soft{
        flex:0 0 auto !important;
        margin-top:14px !important;
      }

      .packing-page .packing-list{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
        padding-bottom:18px !important;
      }
    }

    @media (orientation:landscape) and (max-height:430px) and (max-width:980px){
      .packing-page .packing-layout{
        grid-template-columns:1fr !important;
      }

      .packing-page .progress-card{
        width:100% !important;
      }
    }

    /* =========================================================
       Apple-grade final polish
       低风险增量补丁：
       1. 打包项展开时增加内容渐显与微位移
       2. 移动端避免滚动链传递
       3. iOS 输入框避免自动放大
       4. 低高度横屏压缩标题和间距
       5. 强化触控热区与键盘焦点
       ========================================================= */

    .packing-page .pack-items-inner{
      opacity:1;
      transform:translateY(0);
      will-change:opacity,transform;
      transition:
        opacity .28s cubic-bezier(.2,.8,.2,1) .08s,
        transform .28s cubic-bezier(.2,.8,.2,1) .08s;
    }

    .packing-page .pack-group.collapsed .pack-items-inner{
      opacity:0;
      transform:translateY(-8px);
      transition:
        opacity .16s ease,
        transform .16s ease;
    }

    .packing-page .pack-row{
      will-change:transform,opacity,background;
      transition:
        background .18s ease,
        transform .22s cubic-bezier(.2,.8,.2,1),
        opacity .22s ease;
    }

    .packing-page .pack-group:not(.collapsed) .pack-row{
      animation:packRowIn .34s cubic-bezier(.2,.8,.2,1) both;
    }

    .packing-page .pack-group:not(.collapsed) .pack-row:nth-child(1){animation-delay:.03s}
    .packing-page .pack-group:not(.collapsed) .pack-row:nth-child(2){animation-delay:.055s}
    .packing-page .pack-group:not(.collapsed) .pack-row:nth-child(3){animation-delay:.08s}
    .packing-page .pack-group:not(.collapsed) .pack-row:nth-child(4){animation-delay:.105s}
    .packing-page .pack-group:not(.collapsed) .pack-row:nth-child(5){animation-delay:.13s}
    .packing-page .pack-group:not(.collapsed) .pack-row:nth-child(n+6){animation-delay:.15s}

    @keyframes packRowIn{
      from{
        opacity:0;
        transform:translateY(-6px) scale(.992);
      }
      to{
        opacity:1;
        transform:translateY(0) scale(1);
      }
    }

    .packing-page .packing-list,
    .itinerary-page .timeline,
    .itinerary-page .focus,
    .sheet-body,
    .chart{
      overscroll-behavior:contain;
    }

    @media (max-width:980px){
      .search input{
        font-size:16px !important;
      }

      .packing-page .packing-list,
      .timeline{
        overscroll-behavior-y:contain;
        -webkit-overflow-scrolling:touch;
      }
    }

    @media (hover:none){
      .pack-row,
      .time-row,
      .seg,
      .mode-toggle button,
      .group-head,
      .strategy-btn,
      .ready-card,
      .ready{
        min-height:44px;
      }

      .interactive:hover,
      .pack-row:hover,
      .time-row:hover,
      .strategy-btn:hover{
        transform:none;
      }
    }

    .group-head:focus-visible,
    .pack-row:focus-visible,
    .time-row:focus-visible,
    .strategy-btn:focus-visible,
    .ready-card:focus-visible,
    .ready:focus-visible,
    .seg:focus-visible,
    .mode-toggle button:focus-visible{
      outline:3px solid rgba(0,122,255,.34);
      outline-offset:3px;
    }

    .chart-point{
      outline:none;
    }

    .chart-point:focus-visible{
      stroke-width:6 !important;
      filter:
        drop-shadow(0 0 9px rgba(0,122,255,.42))
        drop-shadow(0 10px 18px rgba(0,122,255,.24));
    }

    @media (orientation:landscape) and (max-height:560px){
      :root{
        --topbar:48px;
      }

      .top-inner{
        height:48px !important;
      }

      .page-inner{
        gap:8px !important;
      }

      .title{
        margin-top:4px !important;
        font-size:clamp(28px,8.5vh,42px) !important;
        line-height:.96 !important;
      }

      .subtitle{
        margin-top:6px !important;
        line-height:1.42 !important;
        display:-webkit-box;
        -webkit-line-clamp:2;
        line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }

      .section-copy{
        margin-bottom:8px !important;
      }
    }

    @media (prefers-reduced-motion:reduce){
      .packing-page .pack-items-inner,
      .packing-page .pack-row,
      .packing-page .pack-group:not(.collapsed) .pack-row{
        animation:none !important;
        transition:none !important;
        transform:none !important;
      }
    }

    /* =========================================================
       Itinerary auto-current focus final
       - 根据日期自动切换 5/30 / 5/31 行程
       - 高亮当前计划
       - 只有 timeline 自身可滚动时才滚动 timeline
       - 手机竖屏整页展示不滚动 viewport
       ========================================================= */

    .itinerary-page .timeline{
      scroll-padding-top:8px;
      overscroll-behavior-y:contain;
    }

    .time-row.current{
      background:
        linear-gradient(90deg,rgba(var(--item-rgb),.16),rgba(var(--item-rgb),.07) 52%,transparent) !important;
      box-shadow:
        inset 0 0 0 1.5px rgba(var(--item-rgb),.32),
        0 12px 34px rgba(var(--item-rgb),.12) !important;
    }

    .time-row.current .node{
      box-shadow:
        0 0 0 7px rgba(var(--item-rgb),.18),
        0 10px 22px rgba(var(--item-rgb),.22) !important;
    }

    .time-row.current .time-title:after{
      content:"现在应执行" !important;
      display:inline-flex;
      align-items:center;
      height:22px;
      margin-left:8px;
      padding:0 8px;
      border-radius:999px;
      background:var(--item);
      color:#fff;
      font-size:11px;
      line-height:1;
      font-weight:900;
      vertical-align:middle;
      box-shadow:0 8px 18px rgba(var(--item-rgb),.2);
    }

    .time-row.current .time-desc{
      color:var(--text) !important;
      font-weight:620;
    }

    .time-row.current.focus-jump{
      animation:currentPlanFocusPulse .9s cubic-bezier(.2,.8,.2,1) 1;
    }

    @keyframes currentPlanFocusPulse{
      0%{transform:scale(1)}
      36%{transform:scale(1.012)}
      100%{transform:scale(1)}
    }

    /* =========================================================
       Packing progress legend canonical chips
       统一 PC / 平板 / 手机的图例视觉语言；
       只根据设备宽度、横竖屏和可用高度调整列数、尺寸和密度。
       ========================================================= */

    .packing-page .progress-card{
      --legend-cols:2;
      --legend-max:320px;
      --legend-gap:8px;
      --legend-h:32px;
      --legend-pad-x:10px;
      --legend-font:12.5px;
      --legend-dot:7px;
    }

    .packing-page .weights{
      width:min(100%,var(--legend-max)) !important;
      max-width:var(--legend-max) !important;
      margin:0 auto !important;
      display:grid !important;
      grid-template-columns:repeat(var(--legend-cols),minmax(0,1fr)) !important;
      gap:var(--legend-gap) !important;
      align-items:center !important;
      justify-items:stretch !important;
    }

    .packing-page .weight{
      width:100% !important;
      min-width:0 !important;
      max-width:none !important;
      height:var(--legend-h) !important;
      min-height:var(--legend-h) !important;
      padding:0 var(--legend-pad-x) !important;
      border-radius:999px !important;
      display:grid !important;
      grid-template-columns:minmax(0,1fr) auto !important;
      align-items:center !important;
      gap:8px !important;
      background:rgba(118,118,128,.075) !important;
      border:1px solid rgba(118,118,128,.105) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.46) !important;
      color:var(--secondary) !important;
      font-size:var(--legend-font) !important;
      line-height:1 !important;
      font-weight:780 !important;
      letter-spacing:-.012em !important;
    }

    html.dark .packing-page .weight{
      background:rgba(255,255,255,.06) !important;
      border-color:rgba(255,255,255,.08) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    .packing-page .weight span{
      min-width:0 !important;
      display:inline-flex !important;
      align-items:center !important;
      gap:7px !important;
      overflow:hidden !important;
      white-space:nowrap !important;
      text-overflow:ellipsis !important;
    }

    .packing-page .weight i{
      width:var(--legend-dot) !important;
      height:var(--legend-dot) !important;
      flex:0 0 var(--legend-dot) !important;
      border-radius:50% !important;
      background:var(--dot) !important;
      box-shadow:0 0 0 3px rgba(118,118,128,.10) !important;
    }

    .packing-page .weight strong{
      flex:0 0 auto !important;
      margin:0 !important;
      padding-left:2px !important;
      color:var(--text) !important;
      font-size:var(--legend-font) !important;
      font-weight:900 !important;
      font-variant-numeric:tabular-nums !important;
      white-space:nowrap !important;
    }

    .packing-page .soft{
      width:min(100%,var(--legend-max)) !important;
      margin:16px auto 0 !important;
    }

    @media (min-width:981px){
      .packing-page .progress-card{
        --legend-cols:2;
        --legend-max:318px;
        --legend-gap:8px;
        --legend-h:32px;
        --legend-pad-x:10px;
        --legend-font:12.5px;
        --legend-dot:7px;
      }
    }

    @media (min-width:641px) and (max-width:1366px) and (orientation:landscape){
      .packing-page .progress-card{
        --legend-cols:2;
        --legend-max:100%;
        --legend-gap:7px;
        --legend-h:30px;
        --legend-pad-x:9px;
        --legend-font:12px;
        --legend-dot:6px;
      }

      .packing-page .weight,
      .packing-page .weight span{
        gap:6px !important;
      }
    }

    @media (min-width:641px) and (max-width:980px) and (orientation:portrait){
      .packing-page .progress-card{
        --legend-cols:2;
        --legend-max:420px;
        --legend-gap:10px;
        --legend-h:34px;
        --legend-pad-x:12px;
        --legend-font:13px;
        --legend-dot:8px;
      }

      .packing-page .soft{
        margin-top:18px !important;
      }
    }

    @media (max-width:640px) and (orientation:portrait){
      .packing-page .progress-card{
        --legend-cols:2;
        --legend-max:344px;
        --legend-gap:8px;
        --legend-h:32px;
        --legend-pad-x:10px;
        --legend-font:12.5px;
        --legend-dot:7px;
      }

      .packing-page .ring-wrap{
        margin:10px 0 16px !important;
      }
    }

    @media (max-width:360px) and (orientation:portrait){
      .packing-page .progress-card{
        --legend-max:100%;
        --legend-gap:7px;
        --legend-h:31px;
        --legend-pad-x:8px;
        --legend-font:12px;
        --legend-dot:6px;
      }

      .packing-page .weight,
      .packing-page .weight span{
        gap:6px !important;
      }
    }

    @media (orientation:landscape) and (max-height:560px) and (max-width:980px){
      .packing-page .progress-card{
        --legend-cols:2;
        --legend-max:100%;
        --legend-gap:6px;
        --legend-h:28px;
        --legend-pad-x:8px;
        --legend-font:11.5px;
        --legend-dot:6px;
      }

      .packing-page .weights{
        gap:6px !important;
      }

      .packing-page .soft{
        height:40px !important;
        margin-top:12px !important;
      }
    }