:root{
  --bg:#EFEDE8;--surface:#FAF8F5;--surface2:#F4F2ED;--text:#333439;
  --muted:#737581;--line:#DFDACE;--sage:#374C7A;--sage2:#4A6399;
  --sageSoft:#EFE9DB;--blueSoft:#EFEDE8;--roseSoft:#F0E4EA;
  --shadow:0 6px 22px rgba(55,56,67,.06);--radius:17px;
  --primary:#374C7A;--primaryDeep:#3A4E79;--primarySoft:#EFE9DB
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif}
button,input,textarea,select{font:inherit}.app{max-width:760px;margin:auto;padding:0 14px 100px}
.header{position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -14px 8px;padding:12px 14px 10px;background:rgba(231,232,240,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(207,208,222,.85)}
h1{font-size:22px;margin:0;letter-spacing:.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;overflow:hidden;box-shadow:0 3px 10px rgba(55,56,67,.10)}
.brand-icon svg{display:block;width:100%;height:100%}
.header-subtitle{font-size:11px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:12px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-main{min-width:0;flex:1}
.sync-area{display:flex;align-items:center;gap:7px;flex:0 0 auto}.sync-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--sage2);font-size:19px}
.sync-state{font-size:11px;color:var(--muted);text-align:right;white-space:nowrap;min-width:max-content}
.hero,.card,.timeline,.empty,.editor{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero{padding:17px;margin:14px 0}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hero-panel+ .hero-panel{border-left:1px solid var(--line);padding-left:14px}
.label{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.05em}.big{font-size:24px;font-weight:780;margin-top:8px}.hero-title{font-size:17px;font-weight:730;margin-top:7px;line-height:1.35}.note{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
.pill{display:inline-block;margin-top:9px;padding:6px 9px;border-radius:999px;background:var(--sageSoft);color:var(--sage2);font-size:11px;font-weight:700}
.section{margin-top:18px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.section-title{font-size:18px;font-weight:780}
.link-btn,.text-btn{border:0;background:transparent;color:var(--sage2);padding:5px;font-size:12px}
.timeline{padding:7px 13px}.row{display:grid;grid-template-columns:48px 29px 1fr auto;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}
.row.current{background:var(--sageSoft);border-radius:13px;margin:0 -7px;padding:12px 7px;border-bottom:0}.row.next{background:var(--blueSoft);border-radius:13px;margin:0 -7px;padding:12px 7px;border-bottom:0}.row.done{opacity:.52}
.time{font-size:12px;color:var(--muted);line-height:1.4}.icon{width:28px;height:28px;border-radius:9px;background:var(--surface2);display:grid;place-items:center}
.name{font-size:15px;font-weight:720}.detail{font-size:12px;color:var(--muted);margin-top:3px}.tag{font-size:10px;padding:5px 7px;border-radius:999px;background:var(--surface2);color:var(--muted)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cards.single{grid-template-columns:1fr}.card{padding:14px}.card-title{font-size:16px;font-weight:740;margin-top:10px}.card-meta{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.55}
.date-nav,.filters{
 display:flex;
 gap:7px;
 overflow:auto;
 padding:7px 16px 9px;
 margin-inline:-14px;
 scroll-padding-inline:42%;
 scrollbar-width:none
}
.date-nav::-webkit-scrollbar,.filters::-webkit-scrollbar{display:none}
.date-chip,.filter-chip{
 flex:0 0 auto;
 white-space:nowrap;
 border:1px solid #506CA7;
 border-radius:999px;
 background:#EDE9E0;
 padding:8px 11px;
 color:#43598A;
 font-size:12px;
 font-weight:700
}
.date-chip.active,.filter-chip.active{
 background:var(--sage);
 color:#fff;
 border-color:var(--sage)
}
.day-summary{
 position:relative;
 margin:8px 0 12px;
 padding:12px 13px;
 background:rgba(245,245,250,.56);
 border-left:4px solid var(--sage);
 border-radius:0 14px 14px 0
}
.day-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.day-summary-copy{min-width:0;flex:1}
.day-summary-topline{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 align-items:center;
 column-gap:8px
}
.summary-title{
 min-width:0;
 font-size:15px;
 font-weight:800;
 line-height:1.3
}
.day-location{
 display:inline-flex;
 align-self:center;
 white-space:nowrap;
 padding:4px 7px;
 border-radius:999px;
 background:var(--surface2);
 color:var(--muted);
 font-size:11px;
 font-weight:700
}
.day-type-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.summary-main{
 font-size:13px;
 line-height:1.5;
 margin-top:8px;
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden
}
.summary-note{margin-top:8px}
.summary-note summary{font-size:11px;color:var(--sage2);font-weight:750;cursor:pointer}
.summary-note div{font-size:12px;color:var(--muted);line-height:1.55;margin-top:6px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:13px;margin-bottom:9px}.item-top{display:flex;gap:10px;align-items:flex-start}.todo-check{width:21px;height:21px;margin-top:1px;accent-color:var(--sage)}
.item-body{flex:1;min-width:0}.item-title{font-weight:720;font-size:15px}.item-meta{font-size:11px;color:var(--muted);margin-top:4px}.item.completed .item-title{text-decoration:line-through;color:var(--muted)}.item.completed{opacity:.62}
.icon-edit,.icon-delete{border:0;background:transparent;color:var(--muted);padding:3px 5px;font-size:15px}.icon-delete{color:#A56278}.icon-group{display:flex;gap:2px;align-items:center}
.add-btn{width:100%;border:1px solid var(--sage);border-radius:13px;background:var(--sage);color:#fff;padding:11px;font-weight:700;margin-bottom:10px}
.small-actions{display:flex;gap:7px;margin-top:9px}.small-actions button{border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:7px 9px;color:var(--text);font-size:11px}
.edit{display:none;border-top:1px solid var(--line);padding-top:7px;margin-top:10px}.edit.open{display:block}
label{display:block;font-size:11px;color:var(--muted);margin:9px 0 4px}input,textarea,select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}textarea{min-height:68px}
.delete{width:100%;margin-top:8px;border:1px solid #E2BFCC;border-radius:11px;padding:9px;background:#FAECF1;color:#A55574}.save{width:100%;margin-top:11px;border:0;border-radius:11px;padding:10px;background:var(--sage);color:#fff;font-weight:700}
.empty{padding:14px;color:var(--muted);font-size:13px}.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.more-grid button{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:20px 8px;color:var(--text);box-shadow:var(--shadow)}
.bottom{position:fixed;left:0;right:0;bottom:0;background:rgba(245,245,250,.95);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:7px 6px calc(7px + env(safe-area-inset-bottom));z-index:20}
.bottom button{border:0;background:transparent;color:var(--muted);padding:7px 2px;font-size:11px;border-radius:12px}.bottom button.active{background:var(--sageSoft);color:var(--sage2);font-weight:700}

.favorite-toolbar{display:grid;gap:8px;margin-bottom:10px}
.favorite-count{font-size:12px;color:var(--muted)}
.favorite-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:10px}
.favorite-card.arranged{opacity:.68}
.favorite-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.favorite-title{font-size:16px;font-weight:750}
.favorite-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.mini-chip{font-size:10px;padding:5px 7px;border-radius:999px;background:var(--surface2);color:var(--muted)}
.mini-chip.high{background:#EFE9DB;color:#4A6399}
.favorite-note{font-size:12px;color:var(--muted);line-height:1.55;margin-top:9px}
.favorite-actions{display:flex;gap:8px;margin-top:11px}
.favorite-actions button,.favorite-actions a{flex:1;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--text);padding:9px;text-align:center;text-decoration:none;font-size:12px}
.favorite-actions .primary{background:var(--sage);border-color:var(--sage);color:white}
.schedule-box{display:none;border-top:1px solid var(--line);margin-top:11px;padding-top:9px}
.schedule-box.open{display:block}

.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quick-card{appearance:none;width:100%;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:13px;box-shadow:var(--shadow);min-width:0}.quick-card.wide{grid-column:1/-1}.quick-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.quick-label{font-size:11px;color:var(--muted);font-weight:700}.quick-arrow{font-size:13px;color:var(--sage2)}.quick-value{font-size:20px;font-weight:780;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-note{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.45}@media(max-width:390px){.quick-grid{grid-template-columns:1fr}.quick-card.wide{grid-column:auto}}
@media(max-width:560px){.hero-grid,.cards{grid-template-columns:1fr}.hero-panel+ .hero-panel{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:13px}.row{grid-template-columns:43px 27px 1fr auto}}

.more-popover{display:none;position:fixed;right:14px;top:70px;z-index:40;width:180px;padding:7px;background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:0 12px 35px rgba(55,56,67,.15)}
.more-popover.open{display:grid;gap:4px}.more-popover button{border:0;background:transparent;text-align:left;padding:11px;border-radius:10px;color:var(--text)}@media (hover:hover){.more-popover button:hover{background:var(--surface2)}}
.prepare-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--surface2);border-radius:14px;padding:4px;margin:10px 0 13px}
.prepare-tab{border:0;background:transparent;padding:10px;border-radius:11px;color:var(--muted)}.prepare-tab.active{background:var(--surface);color:var(--text);font-weight:750;box-shadow:var(--shadow)}
.state-pill{font-size:10px;padding:5px 7px;border-radius:999px;background:var(--surface2);color:var(--muted);white-space:nowrap}.state-pill.overdue{background:#F4DFE7;color:#A55574}.state-pill.soon{background:var(--sageSoft);color:var(--sage2)}.state-pill.future{background:var(--blueSoft)}
.pack-group{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:13px;margin-bottom:10px}.pack-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.pack-title{font-weight:760}.pack-progress{font-size:11px;color:var(--muted)}
.pack-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.pack-item:first-of-type{border-top:0}
.map-icon{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:10px;background:var(--surface2);color:var(--sage2);text-decoration:none;flex:none}.map-icon svg{width:17px;height:17px}
.event-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:10px}.event-head{display:flex;gap:10px;align-items:flex-start}.event-time{width:52px;flex:none;font-size:12px;color:var(--muted);line-height:1.5}.event-main{flex:1;min-width:0}.event-type{font-size:10px;color:var(--sage2);font-weight:750;margin-bottom:4px}.event-title{font-size:16px;font-weight:760}.event-lines{margin-top:7px;display:grid;gap:4px}.event-line{font-size:12px;color:var(--muted);line-height:1.5}
.compact-actions{display:flex;gap:3px;flex:none}.compact-btn{width:32px;height:32px;border:0;border-radius:10px;background:var(--surface2);color:var(--muted)}
.phase-card{padding:17px;margin-top:14px}.phase-number{font-size:29px;font-weight:800;margin-top:7px}.phase-text{font-size:14px;margin-top:5px}.prep-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.sync-state{display:none}.brand-icon{width:38px;height:38px;flex-basis:38px}.prep-summary{grid-template-columns:1fr}}


.route-list{position:relative;margin-top:4px}
.route-list:before{content:"";position:absolute;left:10px;top:15px;bottom:15px;width:1px;background:var(--line)}
.route-item{position:relative;padding-left:28px;margin-bottom:11px}
.route-dot{position:absolute;left:5px;top:17px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:3px solid var(--sage);z-index:2}
.route-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px;box-shadow:var(--shadow)}
.route-item.current .route-card{border-color:var(--sage);box-shadow:0 0 0 2px var(--sageSoft)}
.route-item.done{opacity:.58}
.route-item.done .route-dot{border-color:var(--muted)}
.event-head{display:flex;gap:9px;align-items:flex-start}.event-main{flex:1;min-width:0}
.event-type{font-size:11px;color:var(--sage2);font-weight:750;margin-bottom:5px;min-height:0}
.event-title{font-size:16px;font-weight:760;line-height:1.4}
.event-lines{display:grid;gap:4px;margin-top:7px}.event-line{font-size:12px;color:var(--muted);line-height:1.5}


.prep-group{margin-top:18px}.prep-group:first-of-type{margin-top:12px}
.prep-group-head{display:flex;align-items:center;gap:8px;margin:0 2px 8px}
.prep-group-title{font-size:15px;font-weight:780}.prep-group-count{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--sageSoft);color:var(--sage2);font-size:11px;font-weight:750;display:grid;place-items:center}
.prep-item{padding:13px;margin-bottom:9px}
.prep-title-row{display:flex;align-items:flex-start;gap:10px}
.prep-title-row .item-title{flex:1;min-width:0;padding-top:1px;line-height:1.4}
.prep-title-row .compact-actions{margin-top:-4px}
.prep-meta-row{display:flex;align-items:center;gap:8px;margin:8px 0 0 31px}
.prep-dates{flex:1;min-width:0;font-size:11px;color:var(--muted);line-height:1.45}
.prep-note{margin:10px 0 0 31px;padding-top:9px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.prep-link{width:32px;height:32px}
.prep-item.completed .prep-note,.prep-item.completed .prep-dates{color:var(--muted)}
@media(max-width:420px){
 .prep-meta-row{align-items:flex-start}
 .prep-dates{line-height:1.55}
}


.editor-overlay{position:fixed;inset:0;z-index:80;background:rgba(39,41,48,.34);display:none;align-items:flex-end;justify-content:center}
.editor-overlay.open{display:flex}
.editor-sheet{width:min(760px,100%);height:min(88dvh,820px);background:var(--surface);border-radius:24px 24px 0 0;box-shadow:0 -18px 55px rgba(47,49,55,.2);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;animation:editorUp .2s ease-out}
@keyframes editorUp{from{transform:translateY(20px)}to{transform:translateY(0)}}
.editor-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 13px;border-bottom:1px solid var(--line);background:var(--surface)}
.editor-sheet-kicker{font-size:11px;color:var(--muted);margin-bottom:3px}
.editor-sheet-title{font-size:19px;font-weight:800;line-height:1.25}
.editor-close{width:38px;height:38px;border:0;border-radius:12px;background:var(--surface2);color:var(--muted);font-size:25px;line-height:1}
.editor-sheet-body{min-height:0;overflow:auto;padding:6px 18px 24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.editor-sheet-body label{margin-top:14px}
.editor-sheet-body textarea{min-height:130px;resize:vertical}
.editor-sheet-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.editor-sheet-actions .save{width:auto;margin:0}
.editor-sheet-actions .delete{width:auto;min-width:92px;margin:0;padding-inline:18px}
body.editor-open{overflow:hidden}
@media(max-width:420px){.editor-sheet{height:92dvh;border-radius:22px 22px 0 0}.editor-sheet-head{padding:14px 15px 12px}.editor-sheet-body{padding:5px 15px 22px}.editor-sheet-actions{padding:11px 15px calc(11px + env(safe-area-inset-bottom))}}


.filter-trigger{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700}
.filter-trigger.active{background:var(--primarySoft);border-color:var(--primarySoft);color:var(--primaryDeep)}
.active-filter-row{display:flex;align-items:center;gap:6px;overflow:auto;padding:2px 0 8px;scrollbar-width:none}
.active-filter-row::-webkit-scrollbar{display:none}
.active-filter-label{font-size:11px;color:var(--muted);white-space:nowrap}
.active-filter-chip{border:0;border-radius:999px;background:var(--primarySoft);color:var(--primaryDeep);padding:7px 9px;font-size:11px;white-space:nowrap}
.clear-filter-link{border:0;background:transparent;color:var(--primaryDeep);font-size:11px;white-space:nowrap}
.favorite-count{font-size:12px;color:var(--muted);margin:8px 0 10px}
.filter-section{margin-top:18px}
.filter-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.filter-section-title{font-size:15px;font-weight:780}
.filter-text-btn{border:0;background:transparent;color:var(--primaryDeep);font-size:12px}
.filter-option-grid{display:flex;flex-wrap:wrap;gap:8px}
.multi-filter-option{position:relative;display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 12px;color:var(--muted);font-size:13px}
.multi-filter-option input{position:absolute;opacity:0;pointer-events:none}
.multi-filter-option.selected{background:var(--primary);border-color:var(--primary);color:#fff}
/* 主要動作（建立／儲存）吃掉剩下的寬度，取消／刪除只佔自己需要的 ——
   先前反過來，於是「取消」比「建立」還大一倍，看起來像在鼓勵你放棄。 */
/* 主要動作吃掉剩下的寬度，取消／刪除只佔自己需要的。
   先前是 grid 的第一欄吃 1fr —— 而這一組視窗的 DOM 順序全部都是「取消在前」，
   所以每一個篩選視窗、排程視窗都變成取消比建立還大一倍。改用 flex 綁在
   .save／.delete 自己身上，跟誰先誰後無關，之後新增視窗也不會再踩到。 */
.filter-sheet-actions{display:flex;gap:9px;position:sticky;bottom:-1px;background:var(--surface);padding-top:15px;margin-top:20px}
.filter-sheet-actions .save{flex:1 1 auto;margin:0;width:auto}
.filter-sheet-actions .delete{flex:0 0 auto;margin:0;width:auto;min-width:92px;padding-inline:18px}


.travel-intro{margin-top:14px;padding:19px 18px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.travel-intro-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.travel-countdown{font-size:16px;font-weight:720;line-height:1.4}.travel-countdown strong{font-size:28px;margin:0 3px}
.travel-dates{font-size:12px;color:var(--muted);margin-top:4px}
.travel-locations{font-size:18px;font-weight:780;line-height:1.45;margin-top:16px}
.travel-description{font-size:13px;color:var(--muted);line-height:1.65;margin-top:7px}
.home-alert-list{display:grid;gap:9px}
.home-alert-card{width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;box-shadow:var(--shadow);color:var(--text)}
.home-alert-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.home-alert-date{font-size:11px;color:var(--muted)}
.home-alert-title{font-size:16px;font-weight:770;line-height:1.4;margin-top:7px}
.home-alert-note{font-size:12px;color:var(--muted);line-height:1.55;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.next-journey-card{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:17px;padding:16px;text-align:left;color:var(--text);box-shadow:var(--shadow)}
.next-journey-date{font-size:11px;color:var(--primaryDeep);font-weight:760}
.next-journey-place{font-size:19px;font-weight:800;margin-top:6px}
.next-journey-note{font-size:12px;color:var(--muted);line-height:1.55;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.next-journey-link{font-size:12px;color:var(--primaryDeep);font-weight:720;margin-top:11px}
.home-links{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:2px 14px;box-shadow:var(--shadow)}
.home-links button{width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:9px;border:0;border-top:1px solid var(--line);background:transparent;padding:14px 0;text-align:left;color:var(--text)}
.home-links button:first-child{border-top:0}
.home-links span{font-size:14px;font-weight:740}.home-links small{font-size:11px;color:var(--muted);font-weight:500}.home-links b{font-size:20px;color:var(--primaryDeep)}


.trip-view-switch{display:grid;grid-template-columns:1fr 1fr;background:var(--surface2);border-radius:14px;padding:4px;margin:9px 0 14px}
.trip-view-switch button{border:0;background:transparent;padding:10px;border-radius:11px;color:var(--muted);font-weight:680}
.trip-view-switch button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow);font-weight:780}
.calendar-legend{display:flex;align-items:center;gap:14px;overflow:auto;margin:2px 2px 14px;font-size:11px;color:var(--muted)}
.calendar-legend span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.calendar-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.calendar-legend i.work{background:#4C669E}.calendar-legend i.move{background:#3557A0}.calendar-legend i.walk{background:#374C7A}
.trip-month{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 10px 11px;margin-bottom:14px;box-shadow:var(--shadow)}
.trip-month-title{font-size:17px;font-weight:800;margin:1px 5px 11px}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.calendar-weekdays span{text-align:center;font-size:10px;color:var(--muted);padding:4px 0 7px}
.calendar-cell{min-width:0;min-height:78px;border:0;border-top:1px solid var(--line);border-left:1px solid var(--line);background:transparent;padding:6px 4px;text-align:left;color:var(--text);overflow:hidden}
.calendar-grid .calendar-cell:nth-child(7n+1){border-left:0}
.calendar-cell.outside{opacity:.18}
.calendar-cell.empty-day{color:#465D91}
.calendar-cell.trip-day{background:rgba(247,247,252,.72)}
.calendar-cell.trip-day.today{box-shadow:inset 0 0 0 2px var(--primary);border-radius:8px}
.calendar-date{font-size:11px;font-weight:760;line-height:1}
.calendar-place{font-size:10px;font-weight:740;line-height:1.25;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.calendar-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.calendar-tag{max-width:100%;padding:3px 4px;border-radius:5px;font-size:8px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-tag.work{background:#EEECE6;color:#2F3F62}.calendar-tag.move{background:#F1EADA;color:#4A649B}.calendar-tag.walk{background:#EDE7D8;color:#455C8F}.calendar-tag.rest{background:#EEEBE5;color:#2F3F62}.calendar-tag.shop{background:#EEE9DE;color:#475F94}.calendar-tag.normal{background:var(--surface2);color:var(--muted)}
.day-location{display:inline-block;margin-top:7px;padding:5px 8px;border-radius:999px;background:var(--primarySoft);color:var(--primaryDeep);font-size:11px;font-weight:720}
@media(max-width:420px){
 .trip-month{padding-inline:7px}
 .calendar-cell{min-height:72px;padding:5px 3px}
 .calendar-place{font-size:9px}
 .calendar-tag{font-size:7px;padding:3px}
}


.runtime-error{display:inline-block;margin-top:8px;font-size:12px;color:var(--muted);word-break:break-word}
.retry-btn{display:inline-block;width:auto;margin-top:14px;padding-inline:18px}

.generic-sheet{height:min(78dvh,720px)}.generic-sheet .editor-sheet-body{padding-top:16px}

.day-summary{position:relative}
.day-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.day-summary-more{flex:none;margin-top:0}
.day-location{display:flex;align-items:center;gap:7px;margin-top:8px;padding:0;background:transparent;color:var(--text);font-size:13px;font-weight:720}
.day-location-label{font-size:10px;color:var(--muted);font-weight:650}
.day-summary-menu{display:none;position:absolute;right:14px;top:58px;z-index:12;min-width:148px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 14px 35px rgba(47,49,55,.16)}
.day-summary-menu.open{display:grid}
.day-summary-menu button{border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:9px;color:var(--text);font-size:13px}
.day-summary-menu button:active{background:var(--surface2)}
.day-summary-menu button.danger{color:#A04A65}

.field-hint{font-size:11px;color:var(--muted);line-height:1.5;margin-top:6px}
.relation-picker{position:relative;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--blueSoft);margin-bottom:8px}
.relation-picker>label{margin-top:0;color:var(--text);font-weight:700}
.relation-search-wrap{position:relative}.relation-search{padding-right:40px;background:#fff}
.relation-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1}
.relation-panel{display:none;position:absolute;z-index:40;left:12px;right:12px;top:78px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(31,41,61,.16);overflow:hidden}.relation-panel.open{display:block}
.relation-filter-row{display:flex;gap:6px;padding:9px;border-bottom:1px solid var(--line);overflow:auto}.relation-filter-row button{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-size:11px;color:var(--muted)}.relation-filter-row button.active{background:var(--primary);border-color:var(--primary);color:#fff}
.relation-results{max-height:280px;overflow:auto}.relation-result{display:flex;width:100%;gap:9px;align-items:flex-start;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;padding:10px}.relation-result:last-child{border-bottom:0}.relation-result:active{background:var(--blueSoft)}
.relation-result-type{flex:0 0 auto;font-size:10px;padding:3px 6px;border-radius:999px;background:var(--blueSoft);color:var(--primary);font-weight:700}.relation-result-main{min-width:0;display:flex;flex-direction:column;gap:2px}.relation-result-main b{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relation-result-main small{font-size:10px;color:var(--muted);line-height:1.35}
.relation-empty,.relation-more{padding:14px;text-align:center;font-size:11px;color:var(--muted)}.relation-more{border-top:1px solid var(--line);background:#FAFAFA}

.payment-line{display:inline-flex;margin-top:4px;padding:5px 8px;border-radius:999px;background:var(--primarySoft);color:var(--primaryDeep);font-size:11px;font-weight:720}

.active-filter-chip.static{cursor:default;border:0}
.filter-trigger{white-space:nowrap}
.filter-option-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.multi-filter-option{min-height:38px}
.favorite-count{margin:4px 0 12px;color:var(--muted);font-size:12px}

.lodging-summary-section{margin:16px 0 4px}
.lodging-summary-section{margin:10px 0 18px}
.lodging-summary-card{
 background:var(--surface2);
 border:0;
 border-radius:15px;
 padding:12px 13px;
 box-shadow:none
}
.lodging-summary-card+.lodging-summary-card{margin-top:8px}
.lodging-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.lodging-summary-main{min-width:0;flex:1}
.lodging-summary-topline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.lodging-summary-label{
 display:inline-flex;
 padding:4px 7px;
 border-radius:999px;
 background:var(--sageSoft);
 color:var(--sage2);
 font-size:10px;
 font-weight:800
}
.lodging-summary-location{font-size:11px;color:var(--muted);font-weight:700}
.lodging-summary-title{
 font-size:16px;
 font-weight:800;
 line-height:1.35;
 margin-top:7px
}
.lodging-summary-stay{
 font-size:13px;
 color:var(--text);
 font-weight:800;
 margin-top:7px
}
.lodging-payment{
 display:inline-flex;
 padding:5px 8px;
 border-radius:999px;
 background:var(--sageSoft);
 color:var(--sage2);
 font-size:11px;
 font-weight:720
}
.lodging-note{margin-top:9px;border-top:1px solid rgba(207,208,222,.75);padding-top:8px}
.lodging-note summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:750}
.lodging-note div{font-size:12px;color:var(--muted);line-height:1.55;margin-top:7px}


.lodging-detail-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lodging-detail-expanded{font-size:12px;color:var(--muted);line-height:1.6}
.home-transport-list{display:grid;gap:10px}
.home-transport-card{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:15px;
 box-shadow:var(--shadow)
}
.home-transport-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.home-transport-time{font-size:12px;font-weight:760;color:var(--primaryDeep)}
.home-transport-title{font-size:16px;font-weight:780;line-height:1.35;margin-top:7px}
.home-transport-meta{font-size:12px;color:var(--muted);line-height:1.5;margin-top:6px}
.home-transport-payment{
 display:inline-flex;
 margin-top:9px;
 padding:5px 8px;
 border-radius:999px;
 background:var(--primarySoft);
 color:var(--primaryDeep);
 font-size:11px;
 font-weight:720
}


.route-head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.route-edit-btn{
 border:1px solid var(--line);
 border-radius:999px;
 min-height:34px;
 padding:7px 11px;
 font-size:12px;
 font-weight:760;
 white-space:nowrap
}
.route-edit-btn.secondary{background:var(--surface);color:var(--primaryDeep)}
.route-edit-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.route-edit-btn:disabled{opacity:.38;cursor:not-allowed}
.route-sort-mode .route-item{transition:opacity .14s ease}
.route-sortable .route-card{border-style:dashed}
.route-drag-handle{
 flex:0 0 40px;width:40px;height:44px;border:0;border-radius:12px;
 background:var(--primarySoft);color:var(--primaryDeep);font-size:20px;
 cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none
}
.route-drag-handle:active{cursor:grabbing}
.route-sort-mode .event-head{align-items:flex-start}
.route-dragging{user-select:none;-webkit-user-select:none}
.route-drag-source{opacity:.08;pointer-events:none}
.route-drag-ghost{
 position:fixed!important;
 z-index:9999;
 margin:0!important;
 pointer-events:none;
 opacity:.96;
 transform:translate3d(0,0,0);
 will-change:transform;
 filter:drop-shadow(0 18px 24px rgba(55,56,67,.20))
}
.route-drag-ghost .route-dot{opacity:0}
.route-drag-ghost .route-card{
 border-style:solid;
 border-color:var(--primary);
 background:var(--surface);
 transform:scale(.99)
}
.route-drag-placeholder{
 margin:10px 0;
 border:2px dashed rgba(76,97,167,.40);
 border-radius:var(--radius);
 background:rgba(216,220,244,.34);
 box-sizing:border-box;
 transition:height .12s ease
}
.route-list.saving-order{pointer-events:none;opacity:.72}


.route-sort-mode .route-card{transition:box-shadow .14s ease,border-color .14s ease}


.route-drag-ghost{transition:none!important}
.route-drag-placeholder.releasing{opacity:0}

@media(max-width:480px){
 .section-head{gap:10px}
 .route-head-actions{gap:6px}
 .route-edit-btn{padding:7px 10px}
}

/* Existing outline controls only — no extra frames added to content cards */
.multi-filter-option{
 background:#EDE9E0;
 border-color:#506CA7;
 color:#43598A;
 font-weight:700
}
.multi-filter-option.selected{
 background:var(--primary);
 border-color:var(--primary);
 color:#fff
}
.route-edit-btn.secondary{
 background:#EDE9E0;
 border-color:#506CA7;
 color:#3D527F
}
.close{
 background:#EDE9E0;
 border:1px solid #506CA7;
 color:#3D527F
}


@media(max-width:380px){
 .day-summary-topline{
  grid-template-columns:1fr;
  row-gap:6px
 }
 .day-location{
  justify-self:start;
 }
}


.checkout-strip{
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 align-items:center;
 gap:12px;
 background:transparent;
 border:0;
 border-left:4px solid #4A639A;
 border-radius:0 12px 12px 0;
 padding:10px 12px;
 margin:2px 0 8px
}
.checkout-strip-main{
 min-width:0;
 display:flex;
 align-items:center;
 gap:8px;
 flex-wrap:wrap
}
.checkout-strip-label{
 display:inline-flex;
 padding:4px 7px;
 border-radius:999px;
 background:#EDE9E0;
 color:#465D90;
 font-size:10px;
 font-weight:800
}
.checkout-strip-title{
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:13px;
 font-weight:760;
 color:var(--muted)
}
.checkout-strip-actions{
 display:flex;
 align-items:center;
 gap:8px;
 flex:0 0 auto
}
.checkout-strip-time{
 white-space:nowrap;
 font-size:13px;
 font-weight:800;
 color:var(--text)
}
.checkout-strip-details{position:relative}
.checkout-strip-details summary{
 list-style:none;
 cursor:pointer;
 padding:5px 8px;
 border-radius:999px;
 background:var(--surface2);
 color:var(--muted);
 font-size:10px;
 font-weight:750
}
.checkout-strip-details summary::-webkit-details-marker{display:none}
.checkout-strip-details[open] .lodging-detail-stack{
 position:absolute;
 z-index:8;
 right:0;
 top:34px;
 width:min(320px,78vw);
 padding:12px;
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:13px;
 box-shadow:0 12px 28px rgba(55,56,67,.14)
}
@media(max-width:480px){
 .checkout-strip{grid-template-columns:1fr;gap:7px}
 .checkout-strip-actions{justify-content:space-between}
 .checkout-strip-title{max-width:100%}
}


/* V20.17 overview and relationship refinements */
.transport-overview-list{display:grid;gap:10px}
.transport-overview-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.transport-overview-date{font-size:11px;color:var(--primaryDeep);font-weight:800;letter-spacing:.02em}
.transport-overview-route{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:17px;font-weight:800;line-height:1.35}
.transport-overview-arrow{color:var(--muted);font-weight:500}
.transport-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.transport-overview-field{min-width:0}
.transport-overview-key{font-size:10px;color:var(--muted);font-weight:700}
.transport-overview-value{font-size:12px;color:var(--text);font-weight:700;line-height:1.45;margin-top:2px;overflow-wrap:anywhere}
.transport-overview-note{margin-top:10px;padding:9px 10px;border-radius:11px;background:var(--surface2);font-size:12px;color:var(--muted);line-height:1.55;white-space:pre-wrap}
.transport-overview-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
.transport-overview-head{display:flex;align-items:flex-start;gap:10px}
.transport-overview-main{min-width:0;flex:1}
.transport-overview-payment{display:inline-flex;margin-top:10px;padding:5px 8px;border-radius:999px;background:var(--primarySoft);color:var(--primaryDeep);font-size:11px;font-weight:750}
@media(max-width:420px){.transport-overview-grid{grid-template-columns:1fr}.transport-overview-route{font-size:16px}}

/* Make itinerary lodging feel like a quiet part of the daily flow */
.lodging-summary-section{margin:8px 0 14px}
.lodging-summary-card{background:transparent;border:0;border-left:3px solid rgba(99,118,185,.42);border-radius:0 12px 12px 0;padding:9px 10px;box-shadow:none}
.lodging-summary-label{padding:3px 6px;background:transparent;border:1px solid #516DA9;color:#465D90}
.lodging-summary-title{font-size:14px;margin-top:5px}
.lodging-summary-stay{font-size:12px;margin-top:5px;color:var(--muted)}
.lodging-summary-location{font-size:10px}
.lodging-note{margin-top:7px;padding-top:6px}

/* Half-height checkout strip */
.checkout-strip{min-height:0;padding:5px 9px;margin:0 0 5px;gap:7px;border-left-width:3px}
.checkout-strip-main{gap:6px;flex-wrap:nowrap}
.checkout-strip-label{padding:2px 5px;font-size:9px}
.checkout-strip-title{font-size:12px}
.checkout-strip-actions{gap:5px}
.checkout-strip-time{font-size:12px}
.checkout-strip-details summary{padding:3px 6px;font-size:9px}
.checkout-strip-details[open] .lodging-detail-stack{top:27px}
@media(max-width:480px){.checkout-strip{grid-template-columns:minmax(0,1fr) auto;gap:6px}.checkout-strip-actions{justify-content:flex-end}.checkout-strip-title{max-width:none}}

/* Conventional filter sheet header and close placement */
.generic-sheet .editor-sheet-body{padding:0 18px 24px}
.sheet-head{position:sticky;top:0;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 -18px;padding:16px 18px 13px;background:var(--surface);border-bottom:1px solid var(--line)}
/* 標題那一塊要吃掉剩下的寬度，否則多一顆返回鍵之後 space-between 會把標題推到中間。 */
.sheet-head>div{flex:1 1 auto;min-width:0}
.sheet-title{font-size:19px;font-weight:800;line-height:1.25}
.sheet-head .close{flex:0 0 38px;width:38px;height:38px;border-radius:12px;padding:0;font-size:24px;line-height:1;background:var(--surface2);border:0;color:var(--muted)}
@media(max-width:420px){.generic-sheet .editor-sheet-body{padding:0 15px 22px}.sheet-head{margin:0 -15px;padding:14px 15px 12px}}

.booking-link-preview{margin-top:7px;padding:9px 10px;border-radius:11px;background:var(--blueSoft);font-size:11px;color:var(--muted);line-height:1.5}



/* V20.19 — consistent, high-contrast button states */
button{color:var(--text)}
button:disabled{color:var(--muted)}

/* Toggle / filter controls: never use white as the selected fill */
.prepare-tab,
.trip-view-switch button,
.relation-filter-row button,
.multi-filter-option,
.date-chip,
.filter-chip{
  background:#EDE9E0;
  border-color:#506CA7;
  color:#3C517E;
}
.prepare-tab.active,
.trip-view-switch button.active,
.relation-filter-row button.active,
.multi-filter-option.selected{
  background:var(--primarySoft);
  border-color:#486196;
  color:var(--primaryDeep);
  box-shadow:inset 0 0 0 1px rgba(61,76,118,.08);
  font-weight:780;
}

/* Date and top-level category chips need a stronger selected state */
.date-chip.active,
.filter-chip.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* Secondary controls should be visible against cards and sheets */
.sync-btn,
.compact-btn,
.close,
.route-edit-btn.secondary,
.small-actions button,
.favorite-actions button,
.favorite-actions a{
  background:#EDE9E0;
  border-color:#506CA7;
  color:#384B75;
}

/* Primary actions retain a dark fill with explicit white text */
.add-btn,
.save,
.route-edit-btn.primary,
.favorite-actions .primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* Press feedback remains visible without flashing white */
button:active,
.favorite-actions a:active{
  filter:brightness(.96);
}
.relation-result{background:var(--surface)}
.relation-result:active{background:var(--primarySoft)}

@media (prefers-contrast:more){
  .prepare-tab.active,
  .trip-view-switch button.active,
  .relation-filter-row button.active,
  .multi-filter-option.selected{border-color:var(--primaryDeep)}
}



/* V20.20 — balanced itinerary hierarchy */
.trip-view-switch{
 width:min(300px,100%);
 grid-template-columns:1fr 1fr;
 margin:7px auto 10px;
 padding:3px;
 border:1px solid rgba(187,190,211,.72);
 border-radius:12px;
 background:rgba(223,224,238,.72)
}
.trip-view-switch button{
 min-height:34px;
 padding:6px 12px;
 border-radius:9px;
 font-size:12px;
 font-weight:720
}
.trip-view-switch button.active{box-shadow:0 2px 8px rgba(55,56,67,.07)}
.day-summary{
 margin:5px 0 8px;
 padding:10px 2px 9px;
 background:transparent;
 border:0;
 border-bottom:1px solid var(--line);
 border-radius:0
}
.day-summary-head{align-items:center;gap:8px}
.day-summary-topline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.summary-title{font-size:14px;font-weight:790}
.day-location{padding:3px 7px;font-size:10px;background:#EDE9E0}
.day-type-row{margin-top:5px}
.day-summary-more{width:34px;height:34px;border-radius:11px}
.day-summary-menu{right:0;top:43px}
.day-overview-details{margin-top:7px}
.day-overview-details>summary{
 list-style:none;
 display:grid;
 grid-template-columns:auto minmax(0,1fr) auto;
 align-items:center;
 gap:8px;
 cursor:pointer;
 color:var(--text)
}
.day-overview-details>summary::-webkit-details-marker{display:none}
.day-overview-kicker{font-size:10px;font-weight:800;color:var(--primaryDeep);white-space:nowrap}
.day-overview-preview{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
.day-overview-chevron{font-size:12px;color:var(--muted);transition:transform .16s ease}
.day-overview-details[open] .day-overview-chevron{transform:rotate(180deg)}
.day-overview-body{padding:8px 0 1px 48px}
.day-overview-body .summary-main{margin:0;font-size:12px;line-height:1.6;display:block}
.day-overview-body .summary-note{margin-top:7px}
.lodging-summary-section{
 margin:8px 0 13px;
 padding:9px 10px 7px;
 border:1px solid rgba(207,208,222,.9);
 border-radius:13px;
 background:rgba(245,245,250,.45)
}
.lodging-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 1px 6px;color:var(--muted)}
.lodging-section-title{font-size:11px;font-weight:800;letter-spacing:.05em}
.lodging-section-count{font-size:10px}
.lodging-summary-card,.checkout-strip{border:0;border-top:1px solid rgba(207,208,222,.76);border-radius:0;background:transparent;margin:0;padding:7px 1px}
.lodging-summary-card:first-of-type,.checkout-strip:first-of-type{border-top:0}
.lodging-summary-card+.lodging-summary-card{margin-top:0}
.lodging-summary-label,.checkout-strip-label{padding:2px 6px;border:0;background:#EDE9E0;color:#465D90;font-size:9px}
.lodging-summary-title{font-size:13px;margin-top:4px}
.lodging-summary-stay{font-size:11px;margin-top:3px}
.lodging-summary-location{font-size:9px}
.lodging-note{margin-top:5px;padding-top:4px}
.lodging-note summary{font-size:10px}
.checkout-strip{grid-template-columns:minmax(0,1fr) auto;gap:6px}
.checkout-strip-main{gap:6px;flex-wrap:nowrap}
.checkout-strip-title{font-size:11px}
.checkout-strip-time{font-size:11px}
.checkout-strip-details summary{padding:3px 6px;font-size:9px}
@media(max-width:420px){
 .trip-view-switch{width:min(250px,100%)}
 .day-overview-body{padding-left:0}
 .lodging-summary-section{padding-inline:9px}
}


/* V20.21 — compact tabs, stable date navigation, and stay-over strip */
.trip-view-switch{
 width:100%;
 display:flex;
 margin:3px 0 10px;
 padding:0;
 border:0;
 border-bottom:1px solid var(--line);
 border-radius:0;
 background:transparent;
 box-shadow:none
}
.trip-view-switch button{
 flex:1;
 min-height:36px;
 padding:6px 10px 8px;
 border:0;
 border-bottom:2px solid transparent;
 border-radius:0;
 background:transparent;
 color:var(--muted);
 font-size:12px;
 font-weight:680;
 box-shadow:none
}
.trip-view-switch button.active{
 background:transparent;
 color:var(--primaryDeep);
 border-bottom-color:var(--primary);
 box-shadow:none;
 font-weight:790
}
.trip-view-switch button:active{background:rgba(99,118,185,.07)}
.stayover-strip .checkout-strip-label{background:#EDE9E0;color:#465D90}


/* V20.22 — simplified daily overview */
.day-summary .day-type-row{display:none}
.day-overview-details>summary{grid-template-columns:auto minmax(0,1fr) auto}
.day-overview-hint{font-size:11px;color:var(--muted);text-align:right;white-space:nowrap}
.day-overview-details[open] .day-overview-hint{visibility:hidden}
.day-overview-body{padding:9px 0 2px 0}
.day-overview-body .summary-main{font-size:13px;line-height:1.65;color:var(--text)}
.summary-reminder{margin-top:10px;padding-top:9px;border-top:1px solid rgba(207,208,222,.76);font-size:12px;line-height:1.6;color:var(--muted)}
.summary-reminder-label{margin-bottom:4px;font-size:10px;font-weight:800;color:var(--primaryDeep);letter-spacing:.04em}
@media(max-width:420px){.day-overview-hint{font-size:10px}}


/* V20.23 — unified site-wide design system */
:root{
  --ui-bg:#EFEDE8;
  --ui-surface:#FAF8F5;
  --ui-surface-muted:#F3F0EA;
  --ui-surface-pressed:#ECE7DC;
  --ui-text:#333439;
  --ui-muted:#737581;
  --ui-line:#DFDACE;
  --ui-primary:#374C7A;
  --ui-primary-deep:#3A4E79;
  --ui-primary-soft:#EFE9DB;
  --ui-danger:#A55574;
  --ui-danger-soft:#FAECF1;
  --ui-radius-sm:10px;
  --ui-radius-md:14px;
  --ui-radius-lg:17px;
  --ui-control-h:44px;
  --ui-icon-h:44px;
  --ui-shadow:0 5px 18px rgba(55,56,67,.055);
}

/* typography and section rhythm */
.section{margin-top:22px}
.section-head{align-items:flex-end;gap:12px;margin-bottom:11px}
.section-title{font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.section-note{font-size:12px;line-height:1.45;color:var(--ui-muted);margin-top:3px}
.label{font-size:10px;letter-spacing:.055em;color:var(--ui-muted)}
.note,.detail,.card-meta,.item-meta,.prep-note,.favorite-note{color:var(--ui-muted)}

/* one tab component everywhere */
.trip-view-switch,.prepare-tabs{
  width:100%;display:flex;align-items:stretch;gap:0;
  margin:4px 0 14px;padding:0;
  border:0;border-bottom:1px solid var(--ui-line);
  border-radius:0;background:transparent;box-shadow:none;
}
.trip-view-switch button,.prepare-tab{
  position:relative;flex:1;min-height:38px;padding:7px 10px 9px;
  border:0!important;border-radius:0!important;background:transparent!important;
  color:var(--ui-muted)!important;font-size:12px;font-weight:700;box-shadow:none!important;
}
.trip-view-switch button::after,.prepare-tab::after{
  content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:2px;
  border-radius:99px;background:transparent;
}
.trip-view-switch button.active,.prepare-tab.active{
  color:var(--ui-primary-deep)!important;font-weight:800;
}
.trip-view-switch button.active::after,.prepare-tab.active::after{background:var(--ui-primary)}
.trip-view-switch button:active,.prepare-tab:active{background:rgba(99,118,185,.07)!important}

/* button hierarchy */
button,.favorite-actions a{transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .08s ease,opacity .12s ease}
button:active,.favorite-actions a:active{filter:none;transform:scale(.985)}
button:disabled{opacity:.48;cursor:not-allowed;transform:none}
.add-btn,.save,.route-edit-btn.primary,.favorite-actions .primary{
  min-height:var(--ui-control-h);border:1px solid var(--ui-primary)!important;
  border-radius:var(--ui-radius-md)!important;background:var(--ui-primary)!important;
  color:#fff!important;font-weight:780;box-shadow:none;
}
.add-btn{padding:10px 14px;margin-bottom:12px}
.link-btn,.text-btn,.filter-text-btn{
  border:0;background:transparent;color:var(--ui-primary-deep);font-weight:730;
}
.small-actions button,.favorite-actions button,.favorite-actions a,
.route-edit-btn.secondary,.filter-trigger,.secondary,.retry-btn{
  min-height:36px;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius-sm)!important;
  background:var(--ui-surface-muted)!important;color:var(--ui-text)!important;box-shadow:none!important;
}

/* icon buttons */
.sync-btn,.compact-btn,.close,.icon-edit,.icon-delete,.day-summary-more,.map-icon{
  display:inline-grid;place-items:center;flex:0 0 auto;
  width:var(--ui-icon-h);height:var(--ui-icon-h);padding:0!important;
  border:1px solid transparent!important;border-radius:12px!important;
  background:var(--ui-surface-muted)!important;color:#384B75!important;
  box-shadow:none!important;
}
.icon-delete{color:var(--ui-danger)!important}
.sync-btn{border-color:var(--ui-line)!important;background:var(--ui-surface)!important}
.compact-actions,.icon-group{gap:6px}

/* filter chips and status pills */
.date-chip,.filter-chip,.relation-filter-row button,.multi-filter-option,.mini-chip,.state-pill,.tag{
  border:1px solid #526EAB;border-radius:999px;background:#EDE9E0;color:#3C517E;
  box-shadow:none;font-weight:700;
}
.relation-filter-row button.active,.multi-filter-option.selected{
  background:var(--ui-primary-soft)!important;border-color:#486196!important;color:var(--ui-primary-deep)!important;
}
.date-chip.active,.filter-chip.active{
  background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:#fff!important;
}
.state-pill.overdue{background:#F4DFE7;color:var(--ui-danger);border-color:#E5C3CF}
.state-pill.soon{background:var(--ui-primary-soft);color:var(--ui-primary-deep);border-color:#4A6AAE}
.state-pill.future{background:var(--blueSoft);color:#42598A;border-color:#E4DFD5}

/* card families */
.hero,.card,.timeline,.empty,.item,.favorite-card,.quick-card,.pack-group,.prep-item,
.transport-overview-card,.route-card,.relation-result{
  border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);
  background:var(--ui-surface);box-shadow:var(--ui-shadow);
}
.card,.favorite-card,.quick-card,.pack-group,.prep-item,.transport-overview-card,.route-card{padding:14px}
.item{padding:14px;margin-bottom:10px}
.item-title,.favorite-title,.card-title,.prep-title,.transport-overview-route{font-weight:760;color:var(--ui-text)}
.item.completed{opacity:.6}

/* quiet auxiliary sections */
.day-summary,.lodging-summary-section{
  margin:7px 0 14px;padding:10px 0;
  border:0;border-bottom:1px solid var(--ui-line);border-radius:0;
  background:transparent;box-shadow:none;
}
.day-summary{padding-top:5px}
.lodging-summary-section{padding:8px 0 9px}
.lodging-section-head{padding:0 0 6px}
.lodging-summary-card,.checkout-strip{
  border:0;border-top:1px solid rgba(207,208,222,.78);border-radius:0;
  background:transparent;box-shadow:none;padding:8px 0;margin:0;
}
.lodging-summary-card:first-of-type,.checkout-strip:first-of-type{border-top:0}

/* preparation list groups */
.prep-group{margin-top:20px}
.prep-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.prep-group-title{font-size:16px;font-weight:800}
.prep-group-count{display:inline-flex;min-width:24px;height:24px;align-items:center;justify-content:center;border-radius:999px;background:var(--ui-primary-soft);color:var(--ui-primary-deep);font-size:11px;font-weight:800}
.prep-item{margin-bottom:10px}
.prep-meta-row{gap:8px}

/* forms */
label{margin:13px 0 5px;font-size:11px;font-weight:720;color:var(--ui-muted)}
input,textarea,select,.country-trigger{
  min-height:var(--ui-control-h);padding:10px 11px;
  border:1px solid var(--ui-line);border-radius:var(--ui-radius-sm);
  background:#fff;color:var(--ui-text);outline:none;box-shadow:none;
}
textarea{min-height:92px;line-height:1.55}
input:focus,textarea:focus,select:focus{
  border-color:#3F5583;box-shadow:0 0 0 3px rgba(99,118,185,.13)
}
.field-hint{font-size:10px;color:var(--ui-muted);line-height:1.45;margin-top:5px}
.delete{min-height:var(--ui-control-h);border:1px solid #E2BFCC;border-radius:var(--ui-radius-md);background:var(--ui-danger-soft);color:var(--ui-danger);font-weight:700}

/* sheets and dialogs */
.editor-sheet,.generic-sheet{
  border-radius:22px 22px 0 0;background:var(--ui-surface);overflow:hidden;
}
.editor-sheet-head,.sheet-head{
  align-items:center;padding:14px 18px 12px;background:var(--ui-surface);border-bottom:1px solid var(--ui-line)
}
.editor-sheet-title,.sheet-title{font-size:18px;font-weight:800}
.editor-sheet-body{padding:7px 18px 24px}
.editor-sheet-actions,.filter-sheet-actions{
  gap:9px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--ui-line);background:var(--ui-surface)
}
.filter-sheet-actions{margin:18px -18px -24px;position:sticky;bottom:-24px}

/* menus */
.more-popover,.day-summary-menu{
  border:1px solid var(--ui-line);border-radius:var(--ui-radius-md);background:var(--ui-surface);
  box-shadow:0 14px 34px rgba(47,49,55,.15)
}
.more-popover button,.day-summary-menu button{border-radius:9px}
.more-popover button:active,.day-summary-menu button:active{background:var(--ui-surface-muted)}

/* bottom navigation */
.bottom{background:rgba(245,245,250,.96);padding-top:7px;gap:4px}
.bottom button{
  min-height:48px;border-radius:14px;background:transparent;color:var(--ui-muted);font-weight:650
}
.bottom button.active{background:var(--ui-primary-soft);color:var(--ui-primary-deep);font-weight:800}

/* empty and more tiles */
.empty{padding:18px;text-align:center;box-shadow:none}
.more-grid button{
  min-height:76px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);
  background:var(--ui-surface);color:var(--ui-text);box-shadow:var(--ui-shadow);font-weight:730
}

/* interaction consistency */
[role="button"],button,summary{touch-action:manipulation}
summary{cursor:pointer}

@media(max-width:420px){
  .app{padding-inline:12px}
  .header{margin-inline:-12px;padding-inline:12px}
  .section{margin-top:19px}
  .trip-view-switch,.prepare-tabs{margin-bottom:12px}
  .editor-sheet-head,.sheet-head{padding-inline:15px}
  .editor-sheet-body{padding-inline:15px}
  .editor-sheet-actions{padding-inline:15px}
  .filter-sheet-actions{margin-left:-15px;margin-right:-15px}
}


/* ===== V20.24 cohesive visual system ===== */
:root{
  --cohesive-surface:#FDFCFA;
  --cohesive-muted:#F5F2EA;
  --cohesive-line:#DBD6C9;
  --cohesive-line-soft:#E8E4DA;
  --cohesive-radius:18px;
  --cohesive-radius-sm:12px;
}

/* Navigation is one family: light, stable, and low-profile */
.trip-view-switch,.prepare-tabs{
  width:100%!important;
  margin:8px 0 10px!important;
  padding:0 10px!important;
  border:0!important;
  border-bottom:1px solid var(--cohesive-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.trip-view-switch button,.prepare-tab{
  min-height:42px!important;
  padding:9px 8px 10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ui-muted)!important;
  box-shadow:none!important;
}
.trip-view-switch button::after,.prepare-tab::after{
  height:2px!important;
  left:18%!important;
  right:18%!important;
  bottom:-1px!important;
  border-radius:999px!important;
}

.date-nav{
  display:flex!important;
  gap:4px!important;
  margin:0 0 12px!important;
  padding:0 8px 5px!important;
  overflow-x:auto!important;
  scroll-behavior:auto!important;
  scroll-snap-type:none!important;
  overscroll-behavior-inline:contain;
  border-bottom:1px solid var(--cohesive-line-soft);
  background:transparent!important;
}
.date-chip{
  flex:0 0 auto!important;
  min-width:62px!important;
  min-height:38px!important;
  padding:8px 10px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#3D527F!important;
  font-weight:760!important;
  box-shadow:none!important;
  position:relative;
}
.date-chip::after{
  content:"";
  position:absolute;
  left:18px;right:18px;bottom:1px;height:2px;
  border-radius:999px;background:transparent;
}
.date-chip.active{
  background:var(--ui-primary-soft)!important;
  color:var(--ui-primary-deep)!important;
  border-color:transparent!important;
}
.date-chip.active::after{background:var(--ui-primary)!important}
.date-chip:active{background:#F0EBDF!important}

/* Content is one family: all sections use the same surface, radius and border */
/* .section 不再是一張卡片。
   它裡面放的幾乎都是卡片（行程列、收藏卡、更多的功能卡…），外面再包一層等於畫
   兩層邊框、兩層底色 —— 使用者：「這要不需要有兩層框框了？這樣頁面是不是也會
   清爽一點。」是。section 現在只負責分組與間距，外觀交給裡面的內容。 */
.day-summary,.lodging-summary-section{
  border:1px solid var(--cohesive-line)!important;
  border-radius:var(--cohesive-radius)!important;
  background:var(--cohesive-surface)!important;
  box-shadow:0 3px 12px rgba(51,54,71,.035)!important;
}
.day-summary{
  margin:0 0 12px!important;
  padding:16px!important;
}
.lodging-summary-section{
  margin:-1px 0 14px!important;
  padding:0 16px 6px!important;
  border-top-left-radius:0!important;
  border-top-right-radius:0!important;
  border-top-color:transparent!important;
}
.day-summary + .lodging-summary-section{
  margin-top:-13px!important;
}
.section{
  margin-top:14px!important;
  padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}
.section-head{
  align-items:center!important;
  margin-bottom:12px!important;
  padding-bottom:0!important;
}
.section-title{font-size:18px!important}

/* Summary and lodging now read as one calm information card */
.day-overview-details{margin-top:9px;border-top:1px solid var(--cohesive-line-soft)}
.day-overview-details summary{padding:11px 0 2px!important}
.lodging-section-head{padding:11px 0 7px!important;border-top:1px solid var(--cohesive-line-soft)}
.lodging-summary-card,.checkout-strip{
  padding:10px 0!important;
  border-top:1px solid var(--cohesive-line-soft)!important;
}
.lodging-summary-card:first-of-type,.checkout-strip:first-of-type{border-top:0!important}

/* Route content should not feel like a second application */
.route-list{padding:0!important}
.route-item{margin-bottom:10px!important}
.route-card{
  border-color:var(--cohesive-line)!important;
  border-radius:var(--cohesive-radius-sm)!important;
  background:#FEFDFC!important;
  box-shadow:none!important;
}
.route-item:last-child{margin-bottom:0!important}
.empty{
  border:1px dashed var(--cohesive-line)!important;
  border-radius:var(--cohesive-radius-sm)!important;
  background:var(--cohesive-muted)!important;
  box-shadow:none!important;
}

/* Header actions use the same control proportions as all other sections */
.route-head-actions{display:flex;gap:7px;align-items:center}
.route-edit-btn.primary,.route-edit-btn.secondary{
  min-height:38px!important;
  border-radius:11px!important;
  padding:8px 12px!important;
}

@media(max-width:640px){
  .day-summary{padding:14px!important}
  .lodging-summary-section{padding-left:14px!important;padding-right:14px!important}
  .date-chip{min-width:58px!important;padding-left:8px!important;padding-right:8px!important}
}


/* ===== V20.25 aesthetic refinement ===== */
.day-panel{
  position:relative;
  margin:4px 0 18px;
  padding:16px 16px 14px;
  border:1px solid var(--cohesive-line);
  border-radius:24px;
  background:linear-gradient(180deg,#FEFDFB 0%,#FDFBF8 100%);
  box-shadow:0 8px 30px rgba(47,49,72,.045);
}
.day-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  margin-bottom:14px;
}
.day-panel-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.day-panel-date{font-size:28px;line-height:1.15;font-weight:820;letter-spacing:-.02em;color:#212D46}
.day-location-chip{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:8px 12px;border-radius:999px;background:#F2EEE5;color:#3B507C;font-size:14px;font-weight:760;
}
.day-panel-card{
  border:1px solid #E6E0D4;border-radius:20px;background:#FEFDFC;padding:8px 0;
}
.info-block{padding:16px 18px}
.info-block + .info-block{border-top:1px solid #ECE7DC}
.info-block-head{font-size:13px;font-weight:800;color:var(--ui-primary-deep);letter-spacing:.02em;margin-bottom:10px}
.overview-main{font-size:18px;line-height:1.55;color:#24304B}
.overview-note{margin-top:12px;padding-top:11px;border-top:1px solid #EEE8DC;color:#455C8E;font-size:13px;line-height:1.6}
.overview-note span{display:block;margin-bottom:4px;font-size:11px;font-weight:800;color:var(--ui-primary-deep);letter-spacing:.04em}
.lodging-block-body{display:grid;gap:8px}
.stay-row{padding:10px 0}
.stay-row-inline{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:4px 0}
.stay-inline-main{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.stay-inline-name{font-size:15px;font-weight:760;color:#2A3958;min-width:0}
.stay-inline-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.stay-inline-meta{font-size:13px;font-weight:760;color:#34466D;white-space:nowrap}
.stay-row-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.stay-topline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stay-status{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#F3EFE7;color:#3D5280;font-size:12px;font-weight:800;white-space:nowrap}
.stay-location{color:#324469;font-size:12px;font-weight:700}
.stay-name{margin-top:8px;font-size:18px;line-height:1.35;font-weight:800;color:#1D273C}
.stay-meta{margin-top:5px;font-size:13px;color:#455C8E;font-weight:700}
.stay-details{display:inline-block}
.stay-details summary{list-style:none;cursor:pointer;color:var(--ui-primary-deep);font-size:12px;font-weight:760}
.stay-details summary::-webkit-details-marker{display:none}
.stay-detail-stack{margin-top:8px;padding:10px 12px;border:1px solid #EBE5D9;border-radius:14px;background:#F9F7F3;display:grid;gap:6px;font-size:12px;line-height:1.55;color:#455C8E}
.route-section{margin-top:18px}
.route-section .section-head{margin-bottom:14px}
.route-section .section-title{font-size:18px;font-weight:820}
.route-section{border:0;background:transparent;box-shadow:none;padding:0}
.route-list:before{left:14px;top:18px;bottom:18px;background:#E6E1D4}
.route-item{padding-left:36px;margin-bottom:14px}
.route-dot{left:8px;top:24px;width:12px;height:12px;border:3px solid var(--ui-primary);background:#FEFDFC}
.route-card{padding:18px 18px 17px;border-radius:18px;background:#FEFDFC;border:1px solid #E1DBCE!important;box-shadow:0 3px 10px rgba(42,46,66,.03)!important}
.event-type{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#F4F1E9;color:#475F93;font-size:11px;font-weight:800;margin-bottom:10px}
.event-title{font-size:18px;line-height:1.35;color:#1B2438;margin-top:0}
.event-line{font-size:13px;color:#486196;line-height:1.55}
.route-head-actions .route-edit-btn.secondary{background:#fff!important;border-color:#526FAB!important}
.route-head-actions .route-edit-btn.primary{padding-inline:16px!important}
/* 行程路線的標題列有三個動作（今日地圖／排序／＋新增）。原本
   .route-head-actions 是 flex:0 0 auto，一排塞不下時不會換行，而是把左邊的標題
   壓成一個字一行。改成允許整列換行，並讓動作列在窄螢幕自己成一排。
   這一列（也只有這一列）靠右對齊；卡片內的動作維持靠左。 */
.route-section .section-head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;
}
.route-section .section-head>div:first-child{flex:0 1 auto;min-width:0}
.route-section .section-title{white-space:nowrap}
.route-head-actions{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:520px){
  /* 換行後自己佔滿一列，但仍然靠右 —— 靠左會讓它看起來像另一段內容的開頭。 */
  .route-head-actions{flex:1 1 100%;justify-content:flex-end}
}
.date-nav{gap:8px!important;padding:0 0 10px!important;border-bottom:0!important;margin:2px 0 14px!important}
.date-chip{min-width:58px!important;min-height:44px!important;border-radius:16px!important;padding:10px 8px 12px!important;color:#384B75!important}
.date-chip::after{left:20px!important;right:20px!important;bottom:7px!important;height:3px!important}
.date-chip.active{background:#F1ECE0!important}
.trip-view-switch,.prepare-tabs{margin:8px 0 12px!important;padding:0!important;border-bottom:0!important;border-radius:20px!important;background:#FEFDFC!important;border:1px solid var(--cohesive-line)!important;box-shadow:0 3px 12px rgba(51,54,71,.035)!important}
.trip-view-switch button,.prepare-tab{min-height:52px!important;font-size:17px!important;font-weight:770!important}
.trip-view-switch button::after,.prepare-tab::after{bottom:0!important;left:22%!important;right:22%!important;height:3px!important}
.compact-btn,.map-icon,.sync-btn{background:#F6F3EC!important;border:1px solid #E3DCCD!important;color:#3C517D!important}
.day-summary-more{width:42px!important;height:42px!important}
@media(max-width:640px){
  .day-panel{padding:14px 14px 12px;border-radius:22px}
  .day-panel-date{font-size:23px}
  .day-location-chip{padding:7px 10px;font-size:13px}
  .info-block{padding:14px 15px}
  .overview-main{font-size:17px}
  .stay-name{font-size:16px}
  .route-card{padding:15px 14px}
  .event-title{font-size:16px}
  .trip-view-switch button,.prepare-tab{font-size:16px!important;min-height:48px!important}
}


/* ===== V20.26 refined calmer day panel ===== */
.day-panel{
  margin:4px 0 16px!important;
  padding:13px 13px 11px!important;
  border:1px solid #5671AD!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#F8F5EF 0%,#F6F3EC 100%)!important;
  box-shadow:0 2px 10px rgba(47,49,72,.025)!important;
}
.day-panel-head{
  margin-bottom:10px!important;
  align-items:center!important;
}
.day-panel-title-row{gap:8px!important}
.day-panel-date{
  font-size:23px!important;
  line-height:1.18!important;
  font-weight:790!important;
  letter-spacing:-.015em!important;
  color:#212D46!important;
}
.day-location-chip{
  padding:6px 10px!important;
  font-size:12px!important;
  font-weight:740!important;
  background:#EEE9DF!important;
  color:#3E5380!important;
}
.day-panel-card{
  border:1px solid #E6E0D4!important;
  border-radius:18px!important;
  background:rgba(248,248,255,.62)!important;
  padding:2px 0!important;
}
.info-block{padding:12px 14px!important}
.info-block + .info-block{border-top:1px solid #EAE4D8!important}
.info-block-head{
  font-size:12px!important;
  margin-bottom:8px!important;
  color:#415786!important;
}
.overview-main{
  font-size:15px!important;
  line-height:1.6!important;
  color:#26334E!important;
}
.overview-note{
  margin-top:10px!important;
  padding-top:9px!important;
  font-size:12px!important;
  line-height:1.58!important;
  color:#486094!important;
}
.overview-note span{
  margin-bottom:3px!important;
  font-size:10px!important;
  font-weight:780!important;
}
.lodging-block-body{gap:6px!important}
.stay-row{padding:8px 0!important}
.stay-row-inline{gap:10px!important;padding:2px 0!important}
.stay-inline-main{gap:8px!important}
.stay-inline-name{
  font-size:14px!important;
  font-weight:740!important;
  color:#2A3958!important;
}
.stay-inline-meta{
  font-size:12px!important;
  font-weight:740!important;
  color:#3A4E78!important;
}
.stay-topline{gap:6px!important}
.stay-status{
  padding:5px 8px!important;
  font-size:11px!important;
  font-weight:780!important;
  background:#F0EBE1!important;
  color:#3D5280!important;
}
.stay-location{font-size:11px!important;color:#33446A!important}
.stay-name{
  margin-top:6px!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:780!important;
  color:#1E293F!important;
}
.stay-meta{
  margin-top:4px!important;
  font-size:12px!important;
  color:#475F94!important;
  font-weight:700!important;
}
.stay-details summary{
  font-size:11px!important;
  font-weight:740!important;
}
.stay-detail-stack{
  margin-top:6px!important;
  padding:9px 10px!important;
  border-radius:12px!important;
  background:#F6F3EC!important;
  font-size:11px!important;
  line-height:1.55!important;
}
.day-summary-more{
  width:38px!important;
  height:38px!important;
}
.compact-btn,.map-icon,.sync-btn{
  background:#F2EEE6!important;
}
@media(max-width:640px){
  .day-panel{padding:12px 12px 10px!important;border-radius:20px!important}
  .day-panel-date{font-size:21px!important}
  .info-block{padding:11px 12px!important}
  .overview-main{font-size:14px!important}
  .stay-name{font-size:15px!important}
}


/* ===== V20.27 compact top area and lodging row ===== */
.trip-view-switch,.prepare-tabs{
  margin:6px 0 8px!important;
  padding:0 6px!important;
  border-radius:16px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-bottom:1px solid #526EAB!important;
}
.trip-view-switch button,.prepare-tab{
  min-height:34px!important;
  padding:5px 8px 8px!important;
  font-size:13px!important;
  font-weight:730!important;
}
.trip-view-switch button::after,.prepare-tab::after{
  height:2px!important;
  left:28%!important;
  right:28%!important;
  bottom:-1px!important;
}
.date-nav{
  gap:6px!important;
  margin:0 0 10px!important;
  padding:0 0 4px!important;
}
.date-chip{
  min-width:52px!important;
  min-height:34px!important;
  padding:6px 6px 8px!important;
  border-radius:12px!important;
  font-size:11px!important;
  font-weight:760!important;
}
.date-chip::after{
  left:18px!important;
  right:18px!important;
  bottom:5px!important;
  height:2px!important;
}
.day-panel{
  padding:11px 11px 10px!important;
}
.day-panel-head{margin-bottom:8px!important}
.day-panel-date{
  font-size:18px!important;
  font-weight:780!important;
}
.day-location-chip{
  padding:5px 9px!important;
  font-size:11px!important;
}
.day-panel-card{
  border-radius:16px!important;
}
.info-block{padding:10px 12px!important}
.info-block-head{
  font-size:11px!important;
  margin-bottom:7px!important;
}
.overview-main{
  font-size:14px!important;
  line-height:1.55!important;
}
.overview-note-collapsible{margin-top:8px!important}
.overview-note-collapsible summary{
  list-style:none;
  cursor:pointer;
  color:#415786;
  font-size:11px;
  font-weight:760;
}
.overview-note-collapsible summary::-webkit-details-marker{display:none}
.overview-note{
  margin-top:6px!important;
  padding:8px 10px!important;
  border-top:0!important;
  border-radius:12px!important;
  background:#F4F0E8!important;
  font-size:11px!important;
  line-height:1.55!important;
}
.stay-row-main{
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
}
.stay-main-copy{min-width:0}
.stay-topline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0!important}
.stay-name{
  display:inline!important;
  margin:0 0 0 8px!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:780!important;
}
.stay-meta{
  display:inline!important;
  margin:0 0 0 10px!important;
  font-size:12px!important;
  white-space:nowrap;
}
.stay-row-main .compact-actions{grid-row:1 / span 2; align-self:start}
.stay-row-main .stay-details{
  grid-column:1 / -1;
  margin-top:6px!important;
}
@media(max-width:820px){
  .stay-name{display:block!important;margin:5px 0 0!important}
  .stay-meta{display:block!important;margin:4px 0 0!important}
  .stay-row-main{align-items:start!important}
}
@media(max-width:640px){
  .trip-view-switch button,.prepare-tab{font-size:12px!important;min-height:32px!important}
  .date-chip{min-width:50px!important;min-height:32px!important;font-size:10.5px!important}
  .day-panel-date{font-size:17px!important}
}


/* ===== V20.28 mobile lodging layout repair ===== */
.lodging-block-body{
  display:block!important;
}
.stay-entry{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:9px 0!important;
  border-top:1px solid #E7E2D6;
}
.stay-entry:first-child{border-top:0}
.stay-entry-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
}
.stay-entry-copy{
  flex:1 1 auto!important;
  min-width:0!important;
}
.stay-entry-primary{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  min-width:0!important;
}
.stay-entry-name{
  min-width:0!important;
  max-width:100%!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:760!important;
  color:#222E48!important;
  overflow-wrap:anywhere!important;
}
.stay-entry-meta{
  margin-top:5px!important;
  font-size:12px!important;
  line-height:1.4!important;
  font-weight:720!important;
  color:#3C517D!important;
}
.stay-entry-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
}
.stay-entry .stay-details{
  display:block!important;
  width:100%!important;
  margin-top:7px!important;
  grid-column:auto!important;
}
.stay-entry .stay-details summary{
  display:inline-flex!important;
  width:auto!important;
  padding:2px 0!important;
  font-size:11px!important;
  color:#3D527F!important;
}
.stay-entry .stay-detail-stack{
  display:grid!important;
  width:100%!important;
  max-width:100%!important;
  margin-top:7px!important;
  padding:10px 11px!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  white-space:normal!important;
}
.stay-entry .stay-detail-stack div{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
@media(max-width:640px){
  .stay-entry-row{align-items:flex-start!important}
  .stay-entry-primary{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;column-gap:7px!important;row-gap:4px!important}
  .stay-entry-primary .stay-location{grid-column:2!important}
  .stay-entry-name{font-size:13.5px!important}
  .stay-entry-actions .map-icon,.stay-entry-actions .compact-btn{width:34px!important;height:34px!important}
  .stay-entry-meta{font-size:11.5px!important}
}


/* ===== V20.29 lodging list rows + clearer collapsible ===== */
.overview-note-collapsible{margin-top:9px!important}
.overview-note-collapsible summary{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:6px 10px!important;
  border:1px solid #DED8CA!important;
  border-radius:999px!important;
  background:#F9F6F0!important;
  color:#415786!important;
  font-size:11px!important;
  font-weight:760!important;
}
.overview-note-collapsible[open] summary .chev,
.stay-inline-details[open] summary .chev{transform:rotate(180deg)}
.overview-note-collapsible summary .chev,
.stay-inline-details summary .chev{transition:transform .18s ease;display:inline-block}
.overview-note{margin-top:8px!important;padding:9px 10px!important;border-radius:12px!important;background:#F5F1E9!important}
.lodging-block-body{display:grid!important;gap:8px!important}
.stay-strip,.stay-overnight{
  border-top:1px solid #E8E3D6;
  padding-top:10px;
}
.stay-strip:first-child,.stay-overnight:first-child{border-top:0;padding-top:0}
.stay-strip-row,
.stay-overnight-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.stay-strip-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}
.stay-strip-name{
  min-width:0;
  font-size:14px;
  line-height:1.35;
  font-weight:760;
  color:#232F49;
  overflow-wrap:anywhere;
}
.stay-strip-side{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.stay-strip-time{
  white-space:nowrap;
  font-size:12px;
  line-height:1.35;
  color:#3D5280;
  font-weight:740;
}
.stay-inline-details{display:block}
.stay-inline-details summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  color:#415786;
  font-size:11px;
  font-weight:760;
}
.stay-inline-details summary::-webkit-details-marker{display:none}
.stay-inline-details .stay-detail-stack{
  margin-top:8px;
  padding:10px 11px;
  border:1px solid #E4DED0;
  border-radius:12px;
  background:#F9F6F0;
  font-size:11px;
  line-height:1.6;
  color:#425888;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.stay-overnight-row-sub{
  margin-top:6px;
  align-items:flex-start;
}
.stay-overnight-subleft{
  flex:1 1 auto;
  min-width:0;
}
.stay-overnight .stay-entry-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.stay-overnight .stay-location{font-size:12px;color:#324469;font-weight:700}
@media(max-width:640px){
  .stay-strip-row,.stay-overnight-row-main{align-items:flex-start}
  .stay-strip-main{gap:8px;align-items:flex-start}
  .stay-strip-name{font-size:13.5px}
  .stay-strip-time{font-size:11.5px}
  .stay-strip-row{flex-direction:column;align-items:stretch}
  .stay-strip-side{justify-content:flex-end;align-self:flex-end}
  .stay-overnight-row-sub{display:flex;justify-content:space-between;gap:10px}
  .stay-overnight-row-sub .stay-strip-side{align-self:flex-start}
  .stay-overnight .stay-entry-actions .map-icon,
  .stay-overnight .stay-entry-actions .compact-btn{width:34px;height:34px}
}


/* ===== V20.30 alignment and stable details ===== */
.overview-note-collapsible summary,
.stay-inline-details summary{
  vertical-align:middle;
  align-items:center!important;
  line-height:1!important;
}
.overview-note-collapsible summary .chev,
.stay-inline-details summary .chev{
  font-size:10px!important;
  line-height:1!important;
  margin-top:1px!important;
}
.overview-note-collapsible summary span:first-child,
.stay-inline-details summary span:first-child{
  line-height:1.2!important;
}
.overview-note-collapsible summary{padding:7px 11px!important}
.overview-note,
.stay-inline-details .stay-detail-stack{
  font-size:10.5px!important;
  line-height:1.55!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  white-space:normal!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
.stay-inline-details .stay-detail-stack div,
.overview-note{
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.stay-strip-row,
.stay-overnight-grid,
.stay-overnight-top,
.stay-entry-actions,
.stay-strip-main,
.stay-strip-side,
.day-panel-title-row{
  align-items:center!important;
}
.stay-entry-actions .map-icon,
.stay-entry-actions .compact-btn,
.day-summary-more{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.stay-strip-side{
  gap:8px!important;
}
.stay-strip-time{
  line-height:1.2!important;
}
.stay-overnight-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "top actions"
    "name meta"
    "detail detail";
  column-gap:12px!important;
  row-gap:8px!important;
  align-items:center!important;
}
.stay-overnight-top{
  grid-area:top;
  display:flex!important;
  gap:8px!important;
  min-width:0!important;
  flex-wrap:wrap!important;
}
.stay-overnight .stay-entry-actions{
  grid-area:actions;
  justify-self:end!important;
}
.stay-overnight-name{
  grid-area:name;
  min-width:0!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:760!important;
  color:#232F49!important;
  overflow-wrap:anywhere!important;
}
.stay-overnight-meta{
  grid-area:meta;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-width:0!important;
}
.stay-inline-details{
  min-width:0!important;
}
.stay-inline-details .stay-detail-stack{
  margin-top:8px!important;
}
.stay-overnight .stay-inline-details{
  display:inline-block!important;
}
.stay-overnight .stay-inline-details[open]{
  grid-area:detail!important;
  display:block!important;
}
.stay-overnight .stay-inline-details[open] summary{
  margin-bottom:8px!important;
}
.stay-location{
  line-height:1.2!important;
}
@media(max-width:640px){
  .stay-strip-row{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  .stay-strip-main{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  .stay-strip-name{font-size:13px!important}
  .stay-strip-time{font-size:11px!important}
  .stay-strip-side{
    flex:0 0 auto!important;
    justify-content:flex-end!important;
  }
  .stay-overnight-grid{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "top actions"
      "name meta"
      "detail detail"!important;
    column-gap:10px!important;
    row-gap:7px!important;
  }
  .stay-overnight-top{
    gap:7px!important;
    align-items:center!important;
  }
  .stay-overnight-name{
    font-size:13px!important;
  }
  .stay-overnight-meta{
    gap:7px!important;
    justify-content:flex-end!important;
    align-self:center!important;
  }
  .stay-overnight .stay-location{font-size:11px!important}
  .stay-entry-actions .map-icon,
  .stay-entry-actions .compact-btn{width:34px!important;height:34px!important}
}


/* ===== V20.31 home page flatten nested cards ===== */
.home-clean-section{
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.home-clean-section .section-head{
  margin-bottom:10px!important;
}
.home-flat-panel{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  overflow:hidden!important;
  box-shadow:0 1px 6px rgba(49,51,62,.03)!important;
}
.home-alert-list{
  display:block!important;
}
.home-alert-card{
  width:100%!important;
  text-align:left!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
  border-radius:0!important;
  background:transparent!important;
  padding:16px 18px!important;
  box-shadow:none!important;
  color:var(--text)!important;
}
.home-alert-card:first-child{border-top:0!important}
.home-alert-card:active{background:#F9F6F0!important}
@media (hover:hover){.home-alert-card:hover{background:#F9F6F0!important}}
.home-alert-date{font-size:11px!important;line-height:1.3!important}
.home-alert-title{font-size:18px!important;font-weight:800!important;line-height:1.35!important;margin-top:8px!important}
.home-alert-note{font-size:12px!important;line-height:1.6!important;color:var(--muted)!important;margin-top:8px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.next-journey-card{
  width:100%!important;
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  border-radius:20px!important;
  padding:18px!important;
  text-align:left!important;
  color:var(--text)!important;
  box-shadow:0 1px 6px rgba(49,51,62,.03)!important;
}
.next-journey-place{font-size:17px!important;line-height:1.3!important;margin-top:6px!important}
.next-journey-note{font-size:12px!important;line-height:1.6!important;margin-top:8px!important}
.next-journey-link{margin-top:12px!important}
.home-links{
  padding:0!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:0 1px 6px rgba(49,51,62,.03)!important;
}
.home-links button{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:10px!important;
  border:0!important;
  border-top:1px solid var(--line)!important;
  background:transparent!important;
  padding:16px 18px!important;
  text-align:left!important;
  color:var(--text)!important;
}
.home-links button:first-child{border-top:0!important}
.home-links button:active{background:#F9F6F0!important}
@media (hover:hover){.home-links button:hover{background:#F9F6F0!important}}
.home-links span{font-size:15px!important;font-weight:760!important}
.home-links small{font-size:11px!important;line-height:1.4!important}
@media(max-width:640px){
  .home-alert-card{padding:15px 16px!important}
  .home-alert-title{font-size:17px!important}
  .next-journey-card{padding:16px!important}
  .home-links button{padding:14px 16px!important}
}


/* ===== V20.32 itinerary text wrapping improvement ===== */
.route-card .event-head{
  position:relative!important;
  display:block!important;
  min-width:0!important;
}
.route-card .event-main{
  width:100%!important;
  min-width:0!important;
}
.route-card .compact-actions{
  position:absolute!important;
  top:0!important;
  right:0!important;
  z-index:2!important;
}
.route-card .event-type,
.route-card .event-title{
  padding-right:86px!important;
}
.route-card .event-lines{
  width:100%!important;
  min-width:0!important;
  margin-top:9px!important;
}
.route-card .event-line{
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  line-break:strict!important;
}
.route-card .event-line:lang(en){
  word-break:keep-all!important;
}
.route-card .route-drag-handle{
  float:left!important;
  margin-right:8px!important;
}
.route-sort-mode .route-card .event-main{
  padding-left:38px!important;
}
@media(max-width:640px){
  .route-card .event-type,
  .route-card .event-title{
    padding-right:78px!important;
  }
  .route-card .event-line{
    font-size:12px!important;
    line-height:1.55!important;
  }
}


/* ===== V20.33 lodging detail structural fix + compact event badge ===== */
.stay-detail-trigger{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:3px 0!important;
  border:0!important;
  background:transparent!important;
  color:#3E5381!important;
  font-size:11px!important;
  font-weight:760!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
.stay-detail-trigger .chev{
  display:inline-block!important;
  font-size:9px!important;
  line-height:1!important;
  transition:transform .16s ease!important;
}
.stay-detail-trigger.open .chev{transform:rotate(180deg)!important}
.stay-detail-panel{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin-top:9px!important;
  min-width:0!important;
}
.stay-detail-panel[hidden]{display:none!important}
.stay-detail-panel .stay-detail-stack{
  display:grid!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  gap:6px!important;
  margin:0!important;
  padding:10px 11px!important;
  border:1px solid #E2DCCE!important;
  border-radius:12px!important;
  background:#F6F3EC!important;
  color:#425888!important;
  font-size:10.5px!important;
  line-height:1.55!important;
  overflow:hidden!important;
}
.stay-detail-panel .stay-detail-stack div{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.stay-strip,.stay-overnight{min-width:0!important}
.stay-strip-row,.stay-overnight-grid{min-width:0!important}
.stay-strip-main,.stay-overnight-name,.stay-overnight-top{min-width:0!important}
.stay-strip-name,.stay-overnight-name{overflow-wrap:break-word!important;word-break:normal!important}
.route-card .event-type{
  display:inline-flex!important;
  width:auto!important;
  max-width:calc(100% - 86px)!important;
  padding:5px 10px!important;
  padding-right:10px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  vertical-align:top!important;
}
.route-card .event-title{
  padding-right:86px!important;
}
@media(max-width:640px){
  .route-card .event-type{
    max-width:calc(100% - 78px)!important;
    padding-right:10px!important;
  }
  .route-card .event-title{padding-right:78px!important}
  .stay-detail-panel .stay-detail-stack{font-size:10px!important;padding:9px 10px!important}
}


/* ===== V20.34 route action buttons =====
   Superseded by the V99 icon-button unification further down (same .map-icon /
   .icon-edit family, one shared size everywhere). This block used to pin
   .route-card's map/link icons to 38px via a two-class selector, which beat
   V99's bare .icon-edit on specificity alone — so the edit icon shrank to 28px
   while its map/link neighbours stayed at 38px in the exact same row. Removed
   rather than resized, so this family only ever has one place that sets its size. */
.route-card .compact-actions{gap:7px!important}
@media(max-width:640px){
  .route-card .compact-actions{gap:6px!important}
}


/* ===== V20.35 global icon button sizing + route header buttons ===== */
/* Same-type icon buttons use one shared size across the site */
.compact-btn,
.map-icon,
.icon-edit,
.icon-delete,
.close,
.editor-close,
.day-summary-more,
.sync-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  border-radius:11px!important;
  padding:0!important;
}
.map-icon svg,
.sync-btn svg,
.compact-btn svg,
.icon-edit svg,
.icon-delete svg,
.close svg,
.editor-close svg,
.day-summary-more svg{
  width:17px!important;
  height:17px!important;
}
.compact-actions,
.icon-group,
.stay-entry-actions,
.transport-overview-actions{
  gap:7px!important;
}
/* Keep the header refresh/more controls comfortably large for tap safety */
.header .sync-btn,
.header .more-btn{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  border-radius:13px!important;
}
/* Route section text buttons: still comfortably tappable */
.route-head-actions{gap:8px!important}
.route-edit-btn.primary,
.route-edit-btn.secondary{
  min-height:42px!important;
  padding:8px 14px!important;
  border-radius:11px!important;
  font-size:12.5px!important;
  line-height:1.2!important;
}
.route-edit-btn.primary{padding-inline:13px!important}
@media(max-width:640px){
  .compact-btn,
  .map-icon,
  .icon-edit,
  .icon-delete,
  .close,
  .editor-close,
  .day-summary-more,
  .sync-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
  .header .sync-btn,
  .header .more-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
  .route-edit-btn.primary,
  .route-edit-btn.secondary{
    min-height:34px!important;
    padding:6px 9px!important;
    font-size:11.5px!important;
  }
  .route-edit-btn.primary{padding-inline:12px!important}
}


/* ===== V20.36 shrink non-header icon buttons across cards ===== */
.compact-btn,
.map-icon,
.icon-edit,
.icon-delete,
.close,
.editor-close,
.day-summary-more{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  border-radius:8px!important;
  padding:0!important;
}
.map-icon svg,
.compact-btn svg,
.icon-edit svg,
.icon-delete svg,
.close svg,
.editor-close svg,
.day-summary-more svg{
  width:14px!important;
  height:14px!important;
}
.compact-actions,
.icon-group,
.stay-entry-actions,
.transport-overview-actions{
  gap:4px!important;
}
/* keep top header controls easier to tap */
.header .sync-btn,
.header .more-btn{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  border-radius:12px!important;
}
@media(max-width:640px){
  .compact-btn,
  .map-icon,
  .icon-edit,
  .icon-delete,
  .close,
  .editor-close,
  .day-summary-more{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
  }
}


/* ===== V20.37 compact primary text CTAs ===== */
/* Page-level add buttons: compact and right-aligned instead of full-width bars */
.add-btn{
  width:auto!important;
  min-width:150px!important;
  max-width:220px!important;
  min-height:36px!important;
  padding:7px 14px!important;
  margin:0 0 12px auto!important;
  display:block!important;
  border-radius:10px!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:760!important;
}
/* Favorite-card action: compact button aligned to the right */
.favorite-actions{
  justify-content:flex-end!important;
}
.favorite-actions .primary{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:112px!important;
  min-height:34px!important;
  padding:7px 13px!important;
  border-radius:10px!important;
  font-size:12.5px!important;
  line-height:1.2!important;
  font-weight:760!important;
}
/* Generic page primary CTA follows the same visual scale */
.transport-overview + .add-btn,
.section-head + .add-btn{
  margin-left:auto!important;
}
@media(max-width:640px){
  .add-btn{
    min-width:138px!important;
    max-width:190px!important;
    min-height:35px!important;
    padding:7px 12px!important;
    font-size:12.5px!important;
  }
  .favorite-actions .primary{
    min-width:108px!important;
    min-height:33px!important;
    padding:6px 12px!important;
    font-size:12px!important;
  }
}


/* ===== V20.38 page headings unify add button placement ===== */
.section-head .section-note{display:none!important}
.page-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:10px!important;
}
.head-main{min-width:0!important;flex:1 1 auto!important}
.head-title-row{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  min-width:0!important;
}
.page-head .section-title{
  margin:0!important;
  flex:0 0 auto!important;
}
.page-head .head-add-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:132px!important;
  max-width:none!important;
  min-height:34px!important;
  padding:6px 12px!important;
  margin:0!important;
  border-radius:10px!important;
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:760!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
}
.page-head .filter-trigger,
.page-head .link-btn{
  flex:0 0 auto!important;
}
.favorite-count{margin-top:2px!important}
@media(max-width:640px){
  .page-head{
    align-items:flex-start!important;
  }
  .head-title-row{
    gap:8px!important;
  }
  .page-head .head-add-btn{
    min-width:124px!important;
    min-height:33px!important;
    padding:6px 11px!important;
    font-size:12.5px!important;
  }
}


/* ===== V20.39 soften title-row add buttons ===== */
.page-head .head-add-btn{
  min-width:auto!important;
  max-width:none!important;
  min-height:31px!important;
  padding:5px 10px!important;
  border-radius:9px!important;
  border:1px solid #506BA6!important;
  background:#F5F1E8!important;
  color:#3F5482!important;
  font-size:12px!important;
  font-weight:740!important;
  box-shadow:none!important;
}
/* hover 只給真的有游標的裝置。手機上 :hover 會在點過之後**黏著不放**，按鈕就
   一直維持按下去的顏色 —— 使用者反映「點擊國家之後按鈕很常會變色」就是這個。 */
.page-head .head-add-btn:active{
  background:#EDE7D9!important;
  border-color:#496298!important;
}
@media (hover:hover){
 .page-head .head-add-btn:hover{
  background:#EDE7D9!important;
  border-color:#496298!important;
 }
}
.head-title-row{
  gap:8px!important;
}
@media(max-width:640px){
  .page-head .head-add-btn{
    min-height:40px!important;
    padding:8px 12px!important;
    font-size:12px!important;
  }
}


/* ===== V20.40 route spot title size refinement ===== */
.route-card .event-title{
  font-size:16.5px!important;
  line-height:1.38!important;
}
@media(max-width:640px){
  .route-card .event-title{
    font-size:15px!important;
    line-height:1.38!important;
  }
}

/* ===== V20.41 thinner favorite cards + compact actions ===== */
.favorite-card{
  padding:12px 13px!important;
  margin-bottom:8px!important;
}
.favorite-title{
  font-size:15.5px!important;
  line-height:1.35!important;
}
.favorite-chips{
  gap:5px!important;
  margin-top:5px!important;
}
.favorite-card .mini-chip{
  padding:4px 6px!important;
  line-height:1.2!important;
}
.favorite-note{
  margin-top:6px!important;
  line-height:1.45!important;
}
.favorite-actions{
  gap:6px!important;
  margin-top:8px!important;
  align-items:center!important;
  justify-content:flex-end!important;
}
.favorite-card .favorite-actions button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:88px!important;
  min-height:40px!important;
  padding:8px 12px!important;
  border-radius:11px!important;
  font-size:12px!important;
  line-height:1.2!important;
}
.favorite-card .favorite-actions a.map-icon{
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  border-radius:11px!important;
}
.favorite-card .favorite-actions a.map-icon svg{
  width:14px!important;
  height:14px!important;
}
@media(max-width:640px){
  .favorite-card{
    padding:11px 12px!important;
  }
  .favorite-card .favorite-actions button{
    min-width:84px!important;
    min-height:29px!important;
    padding:5px 9px!important;
    font-size:11px!important;
  }
  .favorite-card .favorite-actions a.map-icon{
    flex-basis:29px!important;
    width:29px!important;
    min-width:29px!important;
    height:29px!important;
    min-height:29px!important;
  }
}

/* ===== V20.42 preparation spacing + calmer itinerary headings ===== */
/* Form controls set a shared minimum height; reset list checkboxes so they
   do not invisibly make the preparation title row taller than its content. */
.prep-item .todo-check{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  padding:0!important;
  margin-top:2px!important;
  flex:0 0 20px!important;
}
.prep-item .prep-meta-row{
  margin-top:5px!important;
}
.day-panel-date{
  font-size:16.5px!important;
}
.route-card .event-title{
  font-size:15px!important;
  line-height:1.38!important;
}
@media(max-width:640px){
  .day-panel-date{
    font-size:16px!important;
  }
  .route-card .event-title{
    font-size:14px!important;
  }
}

/* ===== V20.44 categorized food and shopping favorites ===== */
.favorite-category-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  margin:4px 0 12px;
  padding:4px;
  border:1px solid var(--ui-line);
  border-radius:14px;
  background:var(--ui-surface-muted);
}
.favorite-category-tab{
  min-width:0;
  min-height:34px;
  padding:6px 8px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ui-muted);
  font-size:12px;
  font-weight:740;
}
.favorite-category-tab.active{
  background:var(--ui-surface);
  color:var(--ui-primary-deep);
  box-shadow:0 2px 7px rgba(51,54,71,.07);
}
.favorite-area-section{margin-top:16px}
.favorite-area-section:first-of-type{margin-top:10px}
.favorite-area-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 8px;
}
.favorite-area-title{font-size:15px;font-weight:800;color:var(--ui-text)}
.favorite-area-count{
  display:inline-grid;
  min-width:22px;
  height:22px;
  padding:0 7px;
  place-items:center;
  border-radius:999px;
  background:var(--ui-primary-soft);
  color:var(--ui-primary-deep);
  font-size:10.5px;
  font-weight:800;
}
.favorite-extra{
  display:grid;
  gap:4px;
  margin-top:7px;
  padding:7px 9px;
  border-radius:10px;
  background:var(--ui-surface-muted);
}
.favorite-extra-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:7px;
  font-size:11px;
  line-height:1.45;
}
.favorite-extra-label{color:var(--ui-primary-deep);font-weight:780}
.favorite-extra-value{min-width:0;color:var(--ui-muted);overflow-wrap:anywhere}
@media(max-width:420px){
  .favorite-category-tabs{gap:3px}
  .favorite-category-tab{padding-inline:5px;font-size:11px}
}

/* ===== V21 collection center ===== */
.favorite-v21{
  --favorite-accent:#364D7E;
  --favorite-accent-deep:#445B8D;
  padding-bottom:16px;
}
.favorite-v21 .page-head{margin-bottom:10px}
.favorite-schema-warning{
  margin:0 0 10px;
  padding:9px 11px;
  border:1px solid #3C62B4;
  border-radius:11px;
  background:#FAF8F2;
  color:#3F5583;
  font-size:10.5px;
  line-height:1.5;
}
.favorite-search-shell{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 10px;
  padding:0 12px;
  border:1px solid var(--ui-line);
  border-radius:13px;
  background:var(--ui-surface);
  box-shadow:0 4px 14px rgba(51,54,71,.035);
}
.favorite-search-shell svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
  color:var(--ui-muted);
}
.favorite-search-shell input{
  min-height:42px!important;
  padding:9px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:13px!important;
}
.favorite-search-clear{
  min-width:28px!important;
  min-height:28px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--ui-muted)!important;
  font-size:18px!important;
}
.favorite-overview-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:0 0 11px;
}
.favorite-stat{
  padding:9px 10px;
  border:1px solid var(--ui-line);
  border-radius:12px;
  background:var(--ui-surface);
}
.favorite-stat b{
  display:block;
  color:var(--ui-text);
  font-size:16px;
  line-height:1.15;
}
.favorite-stat span{
  display:block;
  margin-top:3px;
  color:var(--ui-muted);
  font-size:10.5px;
}
.favorite-status-tabs{
  display:flex;
  gap:6px;
  margin:0 0 12px;
  overflow-x:auto;
  scrollbar-width:none;
}
.favorite-status-tabs::-webkit-scrollbar{display:none}
.favorite-status-tab{
  min-width:max-content;
  min-height:31px;
  padding:5px 11px;
  border:1px solid var(--ui-line);
  border-radius:999px;
  background:var(--ui-surface);
  color:var(--ui-muted);
  font-size:11px;
  font-weight:760;
}
.favorite-status-tab.active{
  border-color:var(--favorite-accent);
  background:var(--ui-primary-soft);
  color:var(--favorite-accent-deep);
}
.favorite-view-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:4px 2px 9px;
}
.favorite-view-heading-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.favorite-back{
  display:grid;
  width:40px;
  height:40px;
  min-width:40px!important;
  min-height:40px!important;
  padding:0!important;
  place-items:center;
  border:1px solid var(--ui-line)!important;
  border-radius:9px!important;
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
}
.favorite-view-title{
  overflow:hidden;
  color:var(--ui-text);
  font-size:15px;
  font-weight:820;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.favorite-view-count{color:var(--ui-muted);font-size:11px}
.favorite-area-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.favorite-area-card{
  display:block;
  width:100%;
  min-height:0!important;
  padding:13px!important;
  border:1px solid var(--ui-line)!important;
  border-radius:15px!important;
  background:var(--ui-surface)!important;
  color:var(--ui-text)!important;
  text-align:left;
  box-shadow:0 5px 16px rgba(51,54,71,.04);
}
.favorite-area-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.favorite-area-card-title{
  overflow:hidden;
  font-size:14px;
  font-weight:820;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.favorite-area-card-arrow{
  color:var(--favorite-accent-deep);
  font-size:19px;
  line-height:1;
}
.favorite-area-card-total{
  margin-top:4px;
  color:var(--ui-muted);
  font-size:10.5px;
}
.favorite-area-card-categories{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}
.favorite-area-card-categories span{
  padding:4px 7px;
  border-radius:999px;
  background:var(--ui-surface-muted);
  color:var(--ui-primary-deep);
  font-size:9.5px;
  font-weight:730;
}
.favorite-compact-list{display:grid;gap:8px}
.favorite-list-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  padding:12px;
  border:1px solid var(--ui-line);
  border-radius:14px;
  background:var(--ui-surface);
  box-shadow:0 4px 14px rgba(51,54,71,.035);
}
.favorite-list-row.selected{
  border-color:var(--favorite-accent);
  background:#FDFCF9;
}
.favorite-list-row.arranged{opacity:.68}
.favorite-select{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  margin:2px 0 0!important;
  padding:0!important;
  accent-color:var(--favorite-accent);
}
.favorite-row-main{min-width:0}
.favorite-row-title{
  overflow:hidden;
  color:var(--ui-text);
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.favorite-row-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}
.favorite-row-tag{
  padding:3px 7px;
  border-radius:999px;
  background:var(--ui-surface-muted);
  color:var(--ui-muted);
  font-size:9.5px;
  font-weight:720;
}
.favorite-row-tag.category{
  background:var(--ui-primary-soft);
  color:var(--favorite-accent-deep);
}
.favorite-row-focus{
  margin-top:7px;
  color:var(--ui-text);
  font-size:11.5px;
  line-height:1.45;
}
.favorite-row-focus b{
  color:var(--favorite-accent-deep);
  font-weight:800;
}
.favorite-row-meta{
  margin-top:4px;
  color:var(--ui-muted);
  font-size:10.5px;
  line-height:1.45;
}
.favorite-row-actions{
  display:flex;
  gap:5px;
  align-items:center;
}
.favorite-row-actions button,
.favorite-row-actions a{
  display:grid;
  width:32px;
  height:32px;
  min-width:32px!important;
  min-height:32px!important;
  padding:0!important;
  place-items:center;
  border:1px solid var(--ui-line)!important;
  border-radius:9px!important;
  background:var(--ui-surface-muted)!important;
  color:var(--ui-primary-deep)!important;
  text-decoration:none;
}
.favorite-row-actions svg{width:16px;height:16px}
/* .favorite-row-add 的外觀已交給站上標準的 .rsv-btn（見檔案末段的
   .favorite-row-actions .rsv-btn）。這裡只留下它在列中的排列角色。 */
.favorite-row-add{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:auto!important;
}
.favorite-batch-bar{
  position:sticky;
  z-index:12;
  bottom:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:12px 0 0;
  padding:10px 12px;
  border:1px solid rgba(101,122,189,.35);
  border-radius:14px;
  background:rgba(247,249,255,.96);
  box-shadow:0 8px 24px rgba(51,54,71,.13);
  backdrop-filter:blur(12px);
}
.favorite-batch-bar span{
  color:var(--ui-text);
  font-size:11.5px;
  font-weight:760;
}
.favorite-batch-bar button{
  min-height:32px!important;
  padding:6px 11px!important;
  border:0!important;
  border-radius:9px!important;
  background:var(--favorite-accent)!important;
  color:white!important;
  font-size:11px!important;
  font-weight:790!important;
}
.favorite-schedule-summary{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:11px;
  background:var(--ui-surface-muted);
  color:var(--ui-muted);
  font-size:11.5px;
  line-height:1.55;
}
.favorite-schedule-fields{display:grid;gap:8px}
.favorite-schedule-fields label{margin-top:2px}
.favorite-schedule-hint{
  color:var(--ui-muted);
  font-size:10.5px;
  line-height:1.45;
}
.favorite-editor-hidden{display:none!important}
@media(max-width:640px){
  .favorite-area-grid{grid-template-columns:1fr}
  .favorite-list-row{grid-template-columns:auto minmax(0,1fr)}
  .favorite-row-actions{
    grid-column:2;
    justify-content:flex-end;
    margin-top:1px;
  }
  .favorite-row-add{margin-right:auto}
}


/* ===== V23.1 Stability-first Reference UI =====
   Built from V23.1.9 stable DOM/JS. No structural selectors are changed.
   Decorative layers never receive pointer events. Interactive children stay above decoration. */
:root{
  --ref-bg:#F2F0EB;--ref-paper:#FBF9F6;--ref-green:#304164;--ref-green-deep:#293755;
  --ref-peach:#EB98B4;--ref-ink:#1F293F;--ref-muted:#7D7D89;--ref-line:#D9DCDE;
}
html,body{background:var(--ref-bg)!important;color:var(--ref-ink)!important}
body{background-image:none!important}
.app{max-width:1180px;padding-bottom:108px}
.header{background:rgba(247,246,251,.96)!important;border-bottom:1px solid var(--ref-line)!important;backdrop-filter:blur(16px)}
.brand-icon{background:var(--ref-green)!important;border:0!important;border-radius:18px!important;color:var(--ref-peach)!important}
.sync-btn,.header .more-btn{background:var(--ref-green)!important;color:var(--ref-peach)!important;border:0!important;border-radius:15px!important}
h1,.section-title,.item-title,.card-title,.favorite-title{color:var(--ref-ink)!important}

/* Reference CTA without changing hit areas or layout wrappers */
.add-btn,.save,.route-edit-btn.primary,.favorite-row-add,.favorite-actions .primary{
  background:var(--ref-peach)!important;border-color:var(--ref-peach)!important;color:var(--ref-green-deep)!important;
  border-radius:14px!important;box-shadow:none!important;font-weight:780!important
}
.sync-btn,.more-btn,.compact-btn,.map-icon,.favorite-row-actions button,.favorite-row-actions a,
.small-actions button,.favorite-actions button,.favorite-actions a{
  position:relative;z-index:2
}

/* Tabs: visual only, no display/position overrides on containers */
.trip-view-switch,.prepare-tabs,.favorite-category-tabs{background:transparent!important;border:0!important;border-bottom:1px solid rgba(59,53,95,.18)!important;border-radius:0!important;box-shadow:none!important}
.trip-view-switch button,.prepare-tab,.favorite-category-tab{background:transparent!important;border:0!important;border-radius:0!important;color:#848490!important}
.trip-view-switch button.active,.prepare-tab.active,.favorite-category-tab.active{background:transparent!important;color:var(--ref-green)!important;box-shadow:inset 0 -3px 0 var(--ref-peach)!important}

/* Collection reference treatment, intentionally avoiding overflow:hidden on interactive rows */
.favorite-search-shell{background:var(--ref-paper)!important;border-color:var(--ref-line)!important;border-radius:19px!important;box-shadow:none!important}
.favorite-overview-stats{background:var(--ref-green)!important;border:0!important;border-radius:26px!important;box-shadow:none!important;padding:7px!important}
.favorite-stat{background:transparent!important;border:0!important}
.favorite-stat+.favorite-stat{border-left:1px solid rgba(255,255,255,.14)!important}
.favorite-stat b{color:#FAF7F0!important}.favorite-stat span{color:rgba(235,235,255,.65)!important}
.favorite-area-card{background:var(--ref-green)!important;border:0!important;border-radius:27px!important;box-shadow:none!important;color:#FAF7F0!important;position:relative!important}
.favorite-area-card-title{color:#FAF7F0!important}.favorite-area-card-total{color:rgba(235,235,255,.65)!important}
.favorite-area-card-categories span{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;color:#E8DBBC!important}
.favorite-area-card-arrow{color:var(--ref-green-deep)!important;background:var(--ref-peach)!important;border-radius:12px!important;padding:3px 9px!important;position:relative;z-index:2}
.favorite-list-row{background:var(--ref-paper)!important;border-color:var(--ref-line)!important;border-radius:24px!important;box-shadow:none!important;position:relative!important;overflow:visible!important}
.favorite-list-row.selected{background:#F6F5F2!important;border-color:#486196!important}
.favorite-row-actions{position:relative!important;z-index:3!important}
.favorite-row-actions button,.favorite-row-actions a{background:#F2F0EC!important;border-color:#E7E3DA!important;color:var(--ref-green)!important;border-radius:13px!important}

/* Ticket hint: pseudo elements are decoration only and can never steal clicks */
.transport-overview-card,.route-card{position:relative!important}
.transport-overview-card::before,.route-card::before{
  content:"";position:absolute;left:18px;right:18px;bottom:50px;border-top:1px dashed rgba(59,53,95,.18);
  pointer-events:none!important;z-index:0!important
}
.transport-overview-card>*,.route-card>*{position:relative;z-index:1}

/* Editors: reference palette, keep the original open/close mechanics untouched */
.editor-overlay{background:rgba(36,35,51,.38)!important}
.editor-sheet,.generic-sheet{background:var(--ref-paper)!important;border-radius:30px 30px 0 0!important}
.editor-sheet-head,.sheet-head,.editor-sheet-actions{background:var(--ref-paper)!important}
.editor-sheet-body{background:var(--ref-green)!important;color:#FAF7F0!important;margin:0 14px 12px!important;border-radius:25px!important;padding:14px 18px 26px!important}
.editor-sheet-body label{color:rgba(235,235,255,.72)!important}
.editor-sheet-body input,.editor-sheet-body textarea,.editor-sheet-body select,
.editor-sheet-body .country-trigger{background:rgba(255,255,255,.07)!important;color:#FBF9F3!important;border-color:rgba(255,255,255,.18)!important}
.editor-sheet-body input::placeholder,.editor-sheet-body textarea::placeholder{color:rgba(235,235,255,.42)!important}
.editor-sheet-body select option{background:white!important;color:#1F293F!important}
.editor-close{position:relative!important;z-index:3!important}

/* Bottom navigation stays clickable above all ordinary content */
.bottom{background:rgba(247,246,251,.97)!important;border:1px solid var(--ref-line)!important;box-shadow:0 12px 34px rgba(36,35,51,.10)!important;z-index:60!important}
.bottom button{position:relative!important;z-index:61!important}
.bottom button.active{background:var(--ref-green)!important;color:var(--ref-peach)!important;border-radius:16px!important}

/* Universal interaction guardrails */
button,a,input,select,textarea,[onclick]{pointer-events:auto!important}
.hero::after,.card::after,.route-card::after,.transport-overview-card::after,.favorite-area-card::after,.favorite-list-row::after{pointer-events:none!important}

@media(max-width:640px){
  .app{padding-bottom:104px}
  .favorite-area-card{min-height:122px!important}
  .editor-sheet-body{margin-inline:10px!important;border-radius:23px!important}
}


/* ============================================================
   ===== V29 登機證／護照感 Boarding-pass skin (full redesign) =====
   Deep navy + aged cream paper, condensed uppercase ticket type,
   dashed perforation lines, stamp badges. Replaces every visual
   layer added before it. Structure/JS untouched — paint only.
   ============================================================ */
:root{
  --bp-navy:#1B2A4A;--bp-navy-deep:#101A30;--bp-cream:#F3EEE0;--bp-paper:#FAF7EE;
  --bp-line:#D8D0BC;--bp-gold:#B8923F;--bp-stamp:#A23B3B;--bp-muted:#7A7566;
  --bp-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --bp-radius:14px;
}

html,body{
  background:
    repeating-linear-gradient(135deg,rgba(27,42,74,.02) 0 2px,transparent 2px 40px),
    var(--bp-cream)!important;
  background-attachment:fixed!important;
  color:var(--bp-navy)!important;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif!important;
}
.app{padding:0 16px 118px!important}

/* header: ticket-office signage */
.header{
  background:var(--bp-cream)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-bottom:2px dashed var(--bp-line)!important;padding:18px 2px 16px!important;
}
.brand-icon{background:var(--bp-navy)!important;color:var(--bp-cream)!important;border-radius:8px!important;border:0!important}
#tripTitle{
  font-weight:800!important;text-transform:uppercase!important;letter-spacing:.03em!important;
  font-size:20px!important;color:var(--bp-navy)!important;
}
.header-subtitle,.sub,#tripMeta{font-family:var(--bp-mono)!important;color:var(--bp-muted)!important}

/* generic flat card baseline: paper card, thin navy rule, sharp-ish corners */
.hero,.card,.item,.timeline,.empty,.favorite-card,.quick-card,.pack-group,.prep-item,
.transport-overview-card,.route-card,.relation-result,.lodging-summary-card,.checkout-strip,
.stay-strip,.stayover-strip,.stay-overnight,.day-panel-card,.info-block,.event-card,
.phase-card,.home-alert-card,.home-transport-card,.next-journey-card,
.more-popover,.day-summary-menu,.favorite-search-shell,.relation-panel{
  background:var(--bp-paper)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1.5px solid var(--bp-navy)!important;box-shadow:none!important;
  border-radius:var(--bp-radius)!important;
}
.editor-sheet,.generic-sheet{
  background:var(--bp-paper)!important;border:0!important;border-top:2px dashed var(--bp-navy)!important;
  border-radius:22px 22px 0 0!important;box-shadow:0 -8px 24px rgba(16,26,48,.14)!important;
}
.editor-sheet-head,.sheet-head,.editor-sheet-actions{background:var(--bp-paper)!important;border-color:var(--bp-line)!important}
.editor-overlay{background:rgba(16,26,48,.5)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.editor-sheet-body,.favorite-area-card,.favorite-overview-stats{
  background:var(--bp-navy)!important;color:var(--bp-cream)!important;border:0!important;border-radius:var(--bp-radius)!important;
}

/* ---- hero: boarding-pass ticket, perforated stub divider ---- */
.hero{
  margin:2px 0 26px!important;padding:22px 20px!important;position:relative!important;overflow:visible!important;
  background:var(--bp-navy)!important;color:var(--bp-cream)!important;border:0!important;border-radius:10px!important;
  box-shadow:0 6px 0 var(--bp-line),0 8px 18px rgba(16,26,48,.18)!important;
}
.hero,.hero .label,.hero .note,.hero-title{color:var(--bp-cream)!important}
.hero .label{
  font-family:var(--bp-mono)!important;text-transform:uppercase!important;letter-spacing:.12em!important;
  font-size:10.5px!important;color:rgba(243,238,224,.62)!important;
}
.hero .big,.hero .travel-countdown,.hero .travel-countdown strong{
  color:var(--bp-cream)!important;font-family:var(--bp-mono)!important;font-weight:700!important;letter-spacing:.01em!important;
}
.hero .pill{background:rgba(243,238,224,.14)!important;color:var(--bp-cream)!important;border:1px solid rgba(243,238,224,.3)!important;border-radius:5px!important}
.hero-grid{position:relative!important}
/* perforated divider between the two hero panels, ticket-stub style */
.hero-panel+.hero-panel{
  border-left:2px dashed rgba(243,238,224,.45)!important;padding-left:18px!important;margin-left:0!important;
}
.big{font-size:26px!important}

/* next-journey ticket stub */
.next-journey-card{
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;border-radius:10px!important;
  padding:0!important;overflow:hidden!important;box-shadow:none!important;
}
.next-journey-card .next-journey-place,.next-journey-card .next-journey-note,
.next-journey-card .next-journey-link{padding-left:18px!important;padding-right:18px!important}
.next-journey-place{
  font-weight:800!important;color:var(--bp-navy)!important;font-size:18px!important;
  padding-top:16px!important;
}
.next-journey-note{color:var(--bp-muted)!important;font-family:var(--bp-mono)!important;font-size:12.5px!important}
.next-journey-link{
  color:var(--bp-cream)!important;background:var(--bp-navy)!important;font-weight:800!important;
  display:inline-block!important;margin:14px 18px 16px!important;padding:9px 16px!important;
  border-radius:6px!important;text-transform:uppercase!important;letter-spacing:.04em!important;font-size:12px!important;
}

.home-alert-card{
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;border-radius:10px!important;
  padding:15px 16px!important;margin-bottom:10px!important;position:relative!important;padding-left:20px!important;
}
.home-alert-card::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;background:var(--bp-stamp);border-radius:0 3px 3px 0;
  pointer-events:none!important;z-index:0!important;
}
.home-alert-title{font-weight:800!important;color:var(--bp-navy)!important;font-size:16px!important}
.home-alert-date{font-family:var(--bp-mono)!important;color:var(--bp-muted)!important}

/* ---- quick overview: ticket-stub tiles ---- */
.quick-grid{gap:10px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
.quick-card{padding:15px!important;border-radius:10px!important;position:relative!important}
.quick-card::before{
  content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--bp-cream);
  border:1.5px solid var(--bp-navy);pointer-events:none!important;z-index:0!important;
}
.quick-label{
  font-family:var(--bp-mono)!important;text-transform:uppercase!important;letter-spacing:.08em!important;
  font-size:10px!important;color:var(--bp-muted)!important;
}
.quick-value{font-size:20px!important;font-weight:800!important;color:var(--bp-navy)!important;font-family:var(--bp-mono)!important}
.quick-card.wide{grid-column:1/-1!important}

/* ---- primary / secondary buttons: rectangular ticket buttons ---- */
.add-btn,.save,.route-edit-btn.primary,.favorite-row-add,.favorite-actions .primary{
  background:var(--bp-navy)!important;border:0!important;color:var(--bp-cream)!important;
  border-radius:8px!important;box-shadow:none!important;font-weight:800!important;
  text-transform:uppercase!important;letter-spacing:.03em!important;font-size:13px!important;
}
.add-btn:active,.save:active{background:var(--bp-navy-deep)!important}
.route-edit-btn.secondary,.filter-trigger,.secondary,.retry-btn{
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;color:var(--bp-navy)!important;
  border-radius:8px!important;font-weight:700!important;
}

/* icon buttons: small square stamps, not glass, not gradient */
.sync-btn,.compact-btn,.close,.icon-edit,.icon-delete,.day-summary-more,.map-icon{
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;color:var(--bp-navy)!important;
  box-shadow:none!important;border-radius:8px!important;
}
.icon-delete{color:var(--bp-stamp)!important;border-color:var(--bp-stamp)!important}
.header .more-btn,.header .sync-btn{background:var(--bp-navy)!important;color:var(--bp-cream)!important;border-radius:8px!important}

/* pills / chips / tags: rectangular stub labels, not rounded pills */
.pill,.date-chip,.filter-chip,.relation-filter-row button,.multi-filter-option,.mini-chip,.tag{
  background:var(--bp-paper)!important;color:var(--bp-navy)!important;border:1.3px solid var(--bp-navy)!important;
  border-radius:6px!important;font-weight:700!important;font-family:var(--bp-mono)!important;
  text-transform:uppercase!important;letter-spacing:.02em!important;
}
.date-chip.active,.filter-chip.active,.multi-filter-option.selected{
  background:var(--bp-navy)!important;color:var(--bp-cream)!important;
}
.state-pill{background:var(--bp-paper)!important;color:var(--bp-muted)!important;border:1.3px solid var(--bp-line)!important;border-radius:6px!important;font-family:var(--bp-mono)!important;text-transform:uppercase!important;font-weight:700!important;font-size:10.5px!important}
.state-pill.overdue{border-color:var(--bp-stamp)!important;color:var(--bp-stamp)!important}
.state-pill.soon{border-color:var(--bp-gold)!important;color:var(--bp-gold)!important}
.state-pill.completed{
  border:1.5px solid var(--bp-stamp)!important;color:var(--bp-stamp)!important;background:transparent!important;
  transform:rotate(-4deg)!important;font-weight:800!important;
}

/* inputs: underline-style ticket fields */
input,textarea,select,.country-trigger{
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-line)!important;color:var(--bp-navy)!important;
  border-radius:8px!important;
}
input:focus,textarea:focus,select:focus,.country-trigger:focus{border-color:var(--bp-navy)!important;box-shadow:none!important}

/* bottom nav: departure-gate row, dashed tear-line on top */
.bottom{
  background:var(--bp-cream)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:0!important;border-top:2px dashed var(--bp-navy)!important;box-shadow:none!important;
  left:0!important;right:0!important;bottom:0!important;border-radius:0!important;padding:8px 6px calc(8px + env(safe-area-inset-bottom))!important;
}
.bottom button{color:var(--bp-muted)!important;font-family:var(--bp-mono)!important;text-transform:uppercase!important;letter-spacing:.02em!important;font-size:10px!important;border-radius:8px!important}
.bottom button.active{background:var(--bp-navy)!important;color:var(--bp-cream)!important;font-weight:800!important}

/* tabs */
.trip-view-switch,.prepare-tabs,.favorite-category-tabs{
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;border-radius:8px!important;
  padding:3px!important;box-shadow:none!important;
}
.trip-view-switch button,.prepare-tab,.favorite-category-tab{
  color:var(--bp-muted)!important;border-radius:5px!important;font-weight:700!important;
  text-transform:uppercase!important;font-size:11.5px!important;letter-spacing:.02em!important;
}
.trip-view-switch button.active,.prepare-tab.active,.favorite-category-tab.active{
  background:var(--bp-navy)!important;color:var(--bp-cream)!important;box-shadow:none!important;
}

/* route / timeline: dashed flight-path line */
.route-list{position:relative!important;padding-left:4px!important}
.route-list::before{
  content:"";position:absolute;left:10px;top:6px;bottom:6px;width:0;
  border-left:2px dashed var(--bp-line);z-index:0!important;pointer-events:none!important;
}
.route-item{display:flex!important;align-items:flex-start!important;gap:12px!important;margin-bottom:13px!important}
.route-dot{
  margin-top:6px!important;flex:0 0 13px!important;width:13px!important;height:13px!important;
  background:var(--bp-paper)!important;border:2.5px solid var(--bp-navy)!important;box-shadow:none!important;z-index:1!important;
}
.route-item.current .route-dot{background:var(--bp-navy)!important}
.route-item.current .route-card{border:2px solid var(--bp-navy)!important}
.route-card{flex:1 1 auto!important;min-width:0!important;padding:14px!important}

/* favorite cards: ticket-file look, square gold marker instead of colour blob */
.favorite-card{position:relative!important;padding-left:64px!important;min-height:60px!important}
.favorite-card::before{
  content:"";position:absolute;left:14px;top:16px;width:34px;height:34px;border-radius:6px;
  background:var(--bp-cream);border:1.5px solid var(--bp-gold);pointer-events:none!important;z-index:0!important;
}
@media(max-width:390px){.favorite-card{padding-left:58px!important}.favorite-card::before{left:12px;top:14px;width:30px;height:30px}}

.section-title{
  font-weight:800!important;text-transform:uppercase!important;letter-spacing:.04em!important;font-size:16px!important;
  padding-left:0!important;
}
.section-title::before{display:none!important}
.label,.note,.section-note,.quick-note,.field-hint{color:var(--bp-muted)!important;font-family:var(--bp-mono)!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--bp-navy)!important}

.date-nav,.calendar-legend,.favorite-category-tabs{scrollbar-width:none!important}
.date-nav::-webkit-scrollbar,.calendar-legend::-webkit-scrollbar,.favorite-category-tabs::-webkit-scrollbar{display:none!important}

button,a,.card,.item,input,textarea,select{
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,filter .12s ease!important;
}
button:active,.quick-card:active,.favorite-card:active,.route-item:active{filter:brightness(.96)!important}


/* ============================================================
   ===== V30 修正遺漏元件 Fix pass (colours + nesting + overlap) =====
   ============================================================ */

/* day wrapper: make it a transparent grouping shell, NOT a second card
   (day-panel-card underneath is already the visible ticket card) */
.day-panel.day-panel{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:4px 2px 14px!important;margin:2px 0 22px!important;
}
.day-panel-date.day-panel-date{
  color:var(--bp-navy)!important;font-family:var(--bp-mono)!important;font-weight:800!important;font-size:22px!important;
}
.day-location-chip.day-location-chip{
  background:var(--bp-paper)!important;color:var(--bp-navy)!important;border:1.3px solid var(--bp-navy)!important;
  border-radius:6px!important;font-family:var(--bp-mono)!important;text-transform:uppercase!important;font-size:11px!important;
}
.day-panel-card.day-panel-card{
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;border-radius:12px!important;
}
.info-block-head.info-block-head{
  color:var(--bp-navy)!important;font-family:var(--bp-mono)!important;text-transform:uppercase!important;
  letter-spacing:.06em!important;font-size:11px!important;
}
.overview-main{color:var(--bp-navy)!important}

/* tags/pills that were missed the first pass: route step tag, stay-strip label,
   "注意事項" collapsible toggle, lodging summary label */
.event-type.event-type,.checkout-strip-label.checkout-strip-label,
.lodging-summary-label.lodging-summary-label{
  background:var(--bp-paper)!important;color:var(--bp-navy)!important;border:1.3px solid var(--bp-navy)!important;
  border-radius:6px!important;font-family:var(--bp-mono)!important;text-transform:uppercase!important;
  letter-spacing:.02em!important;font-weight:700!important;
}
.overview-note-collapsible summary,
.overview-note-collapsible summary.overview-note-collapsible{
  background:var(--bp-paper)!important;color:var(--bp-navy)!important;border:1.3px solid var(--bp-navy)!important;
  border-radius:6px!important;font-family:var(--bp-mono)!important;text-transform:uppercase!important;font-size:11px!important;
}
.overview-note,.overview-note span{color:var(--bp-muted)!important;border-color:var(--bp-line)!important}

/* nested detail boxes -> flatten to plain text rows, no extra box */
.lodging-detail-stack{background:transparent!important;border:0!important;padding:8px 0 0!important}
.lodging-detail-expanded,.lodging-payment{
  color:var(--bp-muted)!important;font-family:var(--bp-mono)!important;font-size:12px!important;
  border:0!important;background:transparent!important;padding:2px 0!important;
}
.lodging-payment{color:var(--bp-stamp)!important;font-weight:700!important}

/* next-journey-card: give the date label its own padding (card padding is 0 by design) */
.next-journey-date{
  color:var(--bp-navy)!important;font-family:var(--bp-mono)!important;font-weight:700!important;
  font-size:11px!important;padding:14px 18px 0!important;display:block!important;
}

/* state pills we missed at higher specificity contexts */
.route-card .event-type{
  background:var(--bp-paper)!important;color:var(--bp-navy)!important;border:1.3px solid var(--bp-navy)!important;
}

/* prevent any accidental horizontal overflow inside cards */
.route-card,.event-main,.event-lines,.event-line,.event-title,.checkout-strip,.lodging-summary-card{
  max-width:100%!important;overflow-wrap:break-word!important;word-break:break-word!important;
}


/* ============================================================
   ===== V31 互動保護 Interaction safety net =====
   Belt-and-braces: guarantee every real control stays clickable
   even if a decorative layer overlaps it, and make sure no
   decorative ::before/::after I introduced can ever intercept
   a tap. Mirrors the app's own pre-existing guardrail pattern. ===== */
button,a,input,select,textarea,[onclick],label{pointer-events:auto!important}
.hero::before,.hero::after,.card::before,.card::after,.route-card::before,.route-card::after,
.transport-overview-card::before,.transport-overview-card::after,
.favorite-area-card::before,.favorite-area-card::after,.favorite-list-row::before,.favorite-list-row::after,
.favorite-card::before,.favorite-card::after,.quick-card::before,.quick-card::after,
.home-alert-card::before,.home-alert-card::after,.next-journey-card::before,.next-journey-card::after,
.day-panel::before,.day-panel::after,.day-panel-card::before,.day-panel-card::after,
.item::before,.item::after,.route-list::before,.route-list::after{
  pointer-events:none!important;
}

/* ============================================================
   ===== V34 今日頁互動重排 Today-tab interactive redesign =====
   ============================================================ */

/* hero: slim progress bar under the current activity */
.hero-progress{
  margin-top:10px;height:4px;border-radius:3px;background:rgba(243,238,224,.28);overflow:hidden;
}
.hero-progress-fill{
  height:100%;background:var(--bp-cream);border-radius:3px;
}

/* today strip: horizontal scroll of compact time chips */
.today-strip{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:2px;
  scrollbar-width:none;
}
.today-strip::-webkit-scrollbar{display:none}
.today-strip-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-line)!important;color:var(--bp-muted)!important;
  border-radius:999px!important;padding:8px 14px!important;font-size:12.5px!important;font-weight:700!important;
  white-space:nowrap;
}
.today-strip-icon{font-size:13px}
.today-strip-time{font-family:var(--bp-mono);color:inherit}
.today-strip-chip.active{
  background:var(--bp-navy)!important;border-color:var(--bp-navy)!important;color:var(--bp-cream)!important;
}
.today-strip-chip.current:not(.active){border-color:var(--bp-navy)!important;color:var(--bp-navy)!important}
.today-strip-chip.done{opacity:.55}

/* the single expanded event below the strip: no dashed line, gets a little more room */
.today-focus-list{padding-left:0!important}
.today-focus-list::before{display:none!important}
.today-focus-list .route-item{margin-bottom:0!important}
.today-focus-list .route-dot{display:none!important}
.today-focus-list .route-card{padding:16px!important}


/* ============================================================
   ===== V35 出發前首頁重排 Before-trip home redesign =====
   ============================================================ */

/* countdown card: prep-progress bar + label */
.travel-prep-progress{background:rgba(27,42,74,.10)!important;margin-top:14px!important}
.travel-prep-progress .hero-progress-fill{background:var(--bp-navy)!important}
.travel-prep-label{
  margin-top:6px;font-family:var(--bp-mono);font-size:11.5px;color:var(--bp-muted);
}

/* attention cards: tighter, single-line-first layout */
.home-alert-card{padding:13px 15px!important}
.home-alert-top{display:flex!important;align-items:center!important;gap:8px!important}
.home-alert-top .state-pill{order:-1;flex:0 0 auto}
.home-alert-date{font-size:11px!important}
.home-alert-title{margin-top:4px!important;font-size:15px!important}
.home-alert-note{margin-top:3px!important;font-size:12px!important;color:var(--bp-muted)!important}

/* quick-look row: three tappable tiles instead of a settings list */
.home-tile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.home-tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;
  border-radius:14px!important;padding:14px 12px!important;text-align:left!important;
}
.home-tile-icon{font-size:16px;color:var(--bp-navy)}
.home-tile-value{font-family:var(--bp-mono);font-weight:800;font-size:20px;color:var(--bp-navy)}
.home-tile-label{font-size:10.5px;color:var(--bp-muted);line-height:1.3}
@media(max-width:390px){
  .home-tile-row{grid-template-columns:repeat(3,1fr);gap:7px}
  .home-tile{padding:11px 9px!important}
  .home-tile-value{font-size:18px}
  .home-tile-label{font-size:9.5px}
}


/* ============================================================
   ===== V36 出發前首頁：報表感拿掉，改成一段自然文字 =====
   ============================================================ */

/* fix: travel-intro was still on the old un-migrated palette (leftover
   lavender), out of step with the rest of the navy/cream theme */
.travel-intro{
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;
  box-shadow:none!important;border-radius:16px!important;
}
.travel-countdown{color:var(--bp-navy)!important;font-weight:750!important}
.travel-countdown strong{font-family:var(--bp-mono)!important;color:var(--bp-navy)!important}
.travel-dates{color:var(--bp-muted)!important}
.travel-locations{color:var(--bp-navy)!important}
.travel-description{color:var(--bp-muted)!important}

/* the whole page below the countdown is now flowing sentences, not cards */
.travel-notes{margin-top:14px;padding-top:14px;border-top:1px dashed var(--bp-line)}
.travel-note{
  margin:0 0 8px;font-size:14px;line-height:1.75;color:var(--bp-navy);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;
}
.travel-note:last-child{margin-bottom:0}
.travel-note a{
  color:var(--bp-navy);font-weight:800;cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(27,42,74,.32);text-underline-offset:2px;
}
.travel-note a:active{opacity:.6}


/* ============================================================
   ===== V37 全站色彩變數源頭統一 Root-variable remap =====
   Every remaining blue-violet trace comes from four separate
   :root token sets left over from earlier passes (base, --ui-*,
   --ref-*, --cohesive-*). Rather than chase individual selectors
   again, redefine the tokens themselves so every rule in the
   whole stylesheet that reads them automatically resolves to the
   navy/cream palette. This is the last color layer needed. */
:root{
  --bg:#F3EEE0!important;--surface:#FAF7EE!important;--surface2:#F1EDDF!important;
  --text:#1B2A4A!important;--muted:#7A7566!important;--line:#D8D0BC!important;
  --sage:#1B2A4A!important;--sage2:#101A30!important;
  --sageSoft:#E3E6EC!important;--blueSoft:#ECE8DD!important;--roseSoft:#F3E3E1!important;
  --primary:#1B2A4A!important;--primaryDeep:#101A30!important;--primarySoft:#E3E6EC!important;

  --ui-bg:#F3EEE0!important;--ui-surface:#FAF7EE!important;
  --ui-surface-muted:#F1EDDF!important;--ui-surface-pressed:#E8E2D0!important;
  --ui-text:#1B2A4A!important;--ui-muted:#7A7566!important;--ui-line:#D8D0BC!important;
  --ui-primary:#1B2A4A!important;--ui-primary-deep:#101A30!important;--ui-primary-soft:#E3E6EC!important;
  --ui-danger:#A23B3B!important;--ui-danger-soft:#F5E4E4!important;

  --ref-bg:#F3EEE0!important;--ref-paper:#FAF7EE!important;
  --ref-green:#1B2A4A!important;--ref-green-deep:#101A30!important;--ref-peach:#B8923F!important;
  --ref-ink:#1B2A4A!important;--ref-muted:#7A7566!important;--ref-line:#D8D0BC!important;

  --cohesive-surface:#FAF7EE!important;--cohesive-muted:#F1EDDF!important;
  --cohesive-line:#D8D0BC!important;--cohesive-line-soft:#E4DECB!important;
}


/* ============================================================
   ===== V38 卡中卡、內距、時間軸對齊修正 =====
   ============================================================ */

/* fix 1: info-block was itself a bordered "card" nested inside
   day-panel-card, and lodging entries were a THIRD card nested inside
   that. Strip the middle layer — info-block becomes a plain content
   section (just a divider between multiple blocks), so only the outer
   day card and (where relevant) the individual lodging/route card show
   a border. */
.info-block.info-block{
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;
  padding:16px 18px!important;
}
.info-block+.info-block.info-block{border-top:1px dashed var(--bp-line)!important}

/* fix 2: lodging strip / summary card padding was overridden down to
   5px 9px (or 7px 1px in one variant) by older rules — text was
   sitting almost flush against the border. Give it real breathing room. */
.checkout-strip.checkout-strip,.stay-strip.stay-strip,.stay-overnight.stay-overnight,
.stayover-strip.stayover-strip,.lodging-summary-card.lodging-summary-card{
  padding:14px 16px!important;margin:0 0 10px!important;
}
.checkout-strip.checkout-strip:last-child,.stay-overnight.stay-overnight:last-child{margin-bottom:0!important}

/* fix 3: timeline rail — rebuild dot + line on a fixed-width grid
   column instead of flex+gap, so the dashed line always passes
   exactly through the centre of every dot regardless of card
   padding/rounding. */
.route-list{position:relative!important;padding-left:0!important}
.route-list::before{
  content:"";position:absolute;left:12px;top:20px;bottom:20px;width:0;
  border-left:2px dashed var(--bp-line);z-index:0!important;pointer-events:none!important;
}
.route-item{
  display:grid!important;grid-template-columns:24px 1fr!important;column-gap:8px!important;
  align-items:start!important;margin-bottom:13px!important;position:relative!important;
  padding-left:0!important;
}
.route-dot{
  position:static!important;
  grid-column:1!important;justify-self:center!important;align-self:start!important;
  margin-top:20px!important;
  flex:none!important;width:12px!important;height:12px!important;top:auto!important;left:auto!important;
  background:var(--bp-paper)!important;border:2.5px solid var(--bp-navy)!important;box-shadow:none!important;z-index:1!important;
}
.route-card{grid-column:2!important;min-width:0!important;padding:14px!important}
.today-focus-list .route-item{grid-template-columns:0 1fr!important;column-gap:0!important;padding-left:0!important}


/* ============================================================
   ===== V40 第一輪功能：空狀態、搜尋、手勢 =====
   ============================================================ */

/* empty states: icon + friendly copy + optional CTA */
.empty-state{
  text-align:center;padding:36px 20px;color:var(--bp-muted);
}
.empty-state-icon{font-size:26px;color:var(--bp-line);margin-bottom:10px}
.empty-state-text{font-size:14px;line-height:1.6;color:var(--bp-muted);margin-bottom:14px}
.empty-state-cta{
  display:inline-block;background:var(--bp-navy)!important;color:var(--bp-cream)!important;
  border:0!important;border-radius:999px!important;padding:9px 18px!important;font-weight:800!important;
  font-size:13px!important;
}

/* search sheet */
/* search sheet needs to stay on the light theme — the generic sheet
   body is styled dark navy for edit-forms by default, which made the
   search title/hint unreadable when reused here */
.search-sheet-body{
  background:var(--bp-paper)!important;color:var(--bp-navy)!important;
}
.search-sheet-body .sheet-title{color:var(--bp-navy)!important}
.search-sheet-body .close{
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;color:var(--bp-navy)!important;
}

.search-input-wrap{
  display:flex;align-items:center;gap:8px;
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;
  border-radius:10px!important;padding:10px 14px!important;margin:2px 20px 14px;
}
.search-input-wrap svg{width:16px;height:16px;color:var(--bp-muted);flex:0 0 auto}
.search-input-wrap input{
  border:0!important;background:transparent!important;flex:1 1 auto;font-size:14px;color:var(--bp-navy);outline:none;
}
.search-hint{padding:24px 20px;text-align:center;color:var(--bp-muted);font-size:13px;line-height:1.6}
.search-results{padding:0 20px 20px;max-height:60vh;overflow-y:auto}
.search-result{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  background:transparent!important;border:0!important;border-bottom:1px solid var(--bp-line)!important;
  padding:12px 2px!important;border-radius:0!important;
}
.search-result:last-child{border-bottom:0!important}
.search-result-type{
  flex:0 0 auto;font-family:var(--bp-mono);font-size:9.5px;text-transform:uppercase;
  color:var(--bp-navy);border:1px solid var(--bp-navy);border-radius:5px;padding:2px 6px;
}
.search-result-main{display:flex;flex-direction:column;gap:2px}
.search-result-main b{color:var(--bp-navy);font-size:14px}
.search-result-main small{color:var(--bp-muted);font-size:11.5px;font-family:var(--bp-mono)}

/* pull-to-refresh indicator */
.pull-indicator{
  position:fixed;top:6px;left:50%;transform:translateX(-50%);
  background:var(--bp-navy);color:var(--bp-cream);font-size:11.5px;font-weight:700;
  padding:7px 16px;border-radius:999px;z-index:80;pointer-events:none;
  transition:opacity .15s ease;
}


/* ============================================================
   ===== V42 第二輪：當日地圖總覽 =====
   ============================================================ */
.section-head-actions{display:flex;align-items:center;gap:8px}
.today-map-link{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bp-paper)!important;border:1.3px solid var(--bp-navy)!important;color:var(--bp-navy)!important;
  border-radius:999px!important;padding:6px 12px!important;font-size:11.5px!important;font-weight:700!important;
  text-decoration:none!important;
}
.today-map-link svg{width:13px;height:13px}
.route-head-actions{align-items:center!important}

/* today map: embedded Leaflet/OpenStreetMap view */
.today-map-canvas{
  width:calc(100% - 40px);height:340px;margin:0 20px 14px;border-radius:12px;overflow:hidden;
  border:1.5px solid var(--bp-navy);background:var(--bp-line);
}
.today-map-fallback{
  padding:0 20px 20px;font-size:12px;color:var(--bp-muted);line-height:1.6;
}
.today-map-fallback a{color:var(--bp-navy);font-weight:700;text-decoration:underline}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{
  background:var(--bp-paper)!important;color:var(--bp-navy)!important;
}
.leaflet-control-zoom a{
  background:var(--bp-paper)!important;color:var(--bp-navy)!important;border-color:var(--bp-navy)!important;
}
.leaflet-control-attribution{
  background:rgba(250,247,238,.85)!important;color:var(--bp-muted)!important;font-size:9px!important;
}


/* ============================================================
   ===== V45 第三輪：離線可用性（本機快取備援） =====
   ============================================================ */
.offline-banner{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:var(--bp-gold);color:#3A2E0F;text-align:center;
  font-size:12px;font-weight:700;padding:7px 14px;
  padding-top:calc(7px + env(safe-area-inset-top));
}



/* ============================================================
   V37 — Editorial Travel Dashboard homepage
   Homepage-only redesign: magazine-like hero + actionable dashboard.
   Other pages intentionally untouched.
   ============================================================ */
.ed-home-hero,.ed-home-section,.ed-action-list,.ed-progress-grid,.ed-itinerary-list,.ed-decision-grid,
.ed-action-row,.ed-progress-item,.ed-itinerary-row,.ed-decision-chip{
  box-sizing:border-box
}
.ed-home-hero{
  position:relative;
  overflow:hidden;
  margin:18px 0 30px;
  padding:26px 24px 24px;
  min-height:330px;
  background:var(--bp-navy)!important;
  color:var(--bp-cream)!important;
  border:0!important;
  border-radius:28px!important;
  box-shadow:0 14px 36px rgba(16,26,48,.16)!important;
}
.ed-home-hero::before{
  content:"";
  position:absolute;
  width:250px;height:250px;
  right:-82px;top:-78px;
  border:1px solid rgba(243,238,224,.18);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(243,238,224,.035),0 0 0 70px rgba(243,238,224,.025);
  pointer-events:none!important;
}
.ed-home-hero::after{
  content:"";
  position:absolute;
  left:24px;right:24px;bottom:68px;
  border-top:1px dashed rgba(243,238,224,.28);
  pointer-events:none!important;
}
.ed-home-kicker{
  position:relative;z-index:1;
  font-family:var(--bp-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(243,238,224,.58);
}
.ed-home-countdown{
  position:relative;z-index:1;
  display:flex;align-items:baseline;gap:8px;
  margin-top:22px;
  color:var(--bp-cream);
}
.ed-home-countdown span{font-size:16px;font-weight:760}
.ed-home-countdown strong{
  font-family:var(--bp-mono);
  font-size:60px;line-height:.95;letter-spacing:-.055em;
  font-weight:780;color:#F4C783;
}
.ed-home-route{
  position:relative;z-index:1;
  max-width:92%;
  margin-top:24px;
  font-size:23px;line-height:1.45;font-weight:820;letter-spacing:.01em;
  color:var(--bp-cream);
}
.ed-home-meta{
  position:absolute;z-index:1;
  left:24px;bottom:24px;
  display:flex;align-items:center;gap:9px;
  font-family:var(--bp-mono);
  font-size:10.5px;
  color:rgba(243,238,224,.66);
}
.ed-home-meta i{width:3px;height:3px;border-radius:50%;background:rgba(243,238,224,.45)}
.ed-home-hero-cta{
  position:absolute;z-index:2;right:22px;bottom:18px;
  width:46px;height:46px;padding:0;
  display:grid;place-items:center;
  border:0!important;border-radius:14px!important;
  background:#F4C783!important;color:var(--bp-navy)!important;
  box-shadow:none!important;
}
.ed-home-hero-cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.ed-home-hero-cta b{font-size:21px;line-height:1}

.ed-home-section{margin-top:29px}
.ed-home-last{padding-bottom:8px}
.ed-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-bottom:12px;padding:0 2px;
}
.ed-section-head>div{min-width:0}
.ed-eyebrow{
  display:block;
  margin-bottom:4px;
  font-family:var(--bp-mono);
  font-size:9px;font-weight:760;letter-spacing:.15em;
  color:var(--bp-gold);
}
.ed-section-head h2{
  margin:0;
  color:var(--bp-navy);
  font-size:20px;line-height:1.2;font-weight:850;letter-spacing:-.025em;
}
.ed-section-head>button{
  flex:0 0 auto;
  border:0!important;background:transparent!important;
  padding:5px 0!important;
  color:var(--bp-muted)!important;
  font-size:11px!important;font-weight:720!important;
}

.ed-action-list{
  overflow:hidden;
  background:var(--bp-paper);
  border:1.5px solid var(--bp-navy);
  border-radius:20px;
}
.ed-action-row{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto 14px;
  align-items:center;gap:10px;
  padding:14px 15px;
  border:0!important;border-top:1px dashed var(--bp-line)!important;
  border-radius:0!important;
  background:transparent!important;color:var(--bp-navy)!important;
  text-align:left!important;
}
.ed-action-row:first-child{border-top:0!important}
.ed-action-row:active{background:#F5F0E4!important}
.ed-action-index{
  font-family:var(--bp-mono);font-size:10px;color:var(--bp-gold);font-weight:780;
}
.ed-action-main{min-width:0;display:grid;gap:3px}
.ed-action-main b{font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-action-main small{font-size:10.5px;color:var(--bp-muted)}
.ed-action-date{
  white-space:nowrap;
  font-family:var(--bp-mono);font-size:10px;color:var(--bp-muted);
}
.ed-action-arrow{font-size:20px;color:var(--bp-navy)}

.ed-progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ed-progress-item{
  min-width:0;
  padding:15px 14px 13px!important;
  border:1.5px solid var(--bp-line)!important;
  border-radius:18px!important;
  background:rgba(250,247,238,.78)!important;
  color:var(--bp-navy)!important;
  text-align:left!important;
}
.ed-progress-item:active{border-color:var(--bp-navy)!important}
.ed-progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ed-progress-top span{font-size:12px;font-weight:760}
.ed-progress-top b{font-family:var(--bp-mono);font-size:15px}
.ed-progress-track{
  height:5px;margin-top:12px;overflow:hidden;
  border-radius:99px;background:#DED7C6;
}
.ed-progress-track i{display:block;height:100%;border-radius:99px;background:var(--bp-navy)}
.ed-progress-caption{margin-top:7px;font-family:var(--bp-mono);font-size:9.5px;color:var(--bp-muted)}

.ed-itinerary-list{
  overflow:hidden;
  border-top:1.5px solid var(--bp-navy);
  border-bottom:1.5px solid var(--bp-navy);
}
.ed-itinerary-row{
  width:100%;
  display:grid;
  grid-template-columns:58px 14px minmax(0,1fr) 14px;
  align-items:stretch;gap:9px;
  min-height:78px;
  padding:12px 3px;
  border:0!important;border-top:1px solid var(--bp-line)!important;
  border-radius:0!important;
  background:transparent!important;color:var(--bp-navy)!important;
  text-align:left!important;
}
.ed-itinerary-row:first-child{border-top:0!important}
.ed-itinerary-date{display:flex;flex-direction:column;justify-content:center;gap:4px}
.ed-itinerary-date b{font-family:var(--bp-mono);font-size:12px}
.ed-itinerary-date small{font-family:var(--bp-mono);font-size:8px;letter-spacing:.05em;color:var(--bp-muted)}
.ed-itinerary-line{position:relative}
.ed-itinerary-line::before{
  content:"";position:absolute;left:6px;top:-12px;bottom:-12px;width:1px;background:var(--bp-line);
}
.ed-itinerary-line i{
  position:absolute;z-index:1;left:3px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--bp-navy);
}
.ed-itinerary-main{
  min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
}
.ed-itinerary-main b{font-size:15px;line-height:1.3}
.ed-itinerary-main small{
  color:var(--bp-muted);font-size:11px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ed-itinerary-arrow{align-self:center;font-size:20px}

.ed-decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ed-decision-chip{
  min-width:0;min-height:104px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  position:relative;
  padding:13px 12px!important;
  border:1.5px solid var(--bp-line)!important;
  border-radius:18px!important;
  background:var(--bp-paper)!important;color:var(--bp-navy)!important;
  text-align:left!important;
}
.ed-decision-chip b{font-family:var(--bp-mono);font-size:25px;line-height:1}
.ed-decision-chip span{margin-top:7px;font-size:10.5px;line-height:1.35;color:var(--bp-muted)}
.ed-decision-chip i{
  position:absolute;right:11px;top:9px;
  font-style:normal;font-size:17px;color:var(--bp-gold)
}
.ed-empty-line{
  padding:16px;
  color:var(--bp-muted);
  font-size:12px;line-height:1.55;
}

@media(max-width:480px){
  .ed-home-hero{margin-top:12px;min-height:316px;padding:22px 20px 20px;border-radius:24px!important}
  .ed-home-countdown{margin-top:20px}
  .ed-home-countdown strong{font-size:54px}
  .ed-home-route{font-size:21px;max-width:96%;margin-top:22px}
  .ed-home-meta{left:20px;bottom:22px;max-width:calc(100% - 92px);flex-wrap:wrap;row-gap:3px}
  .ed-home-hero-cta{right:18px;bottom:17px}
  .ed-home-section{margin-top:26px}
  .ed-progress-grid{gap:8px}
  .ed-progress-item{padding:13px 12px 12px!important}
  .ed-decision-grid{gap:7px}
  .ed-decision-chip{min-height:96px;padding:12px 10px!important}
  .ed-decision-chip b{font-size:22px}
  .ed-decision-chip span{font-size:9.5px}
}
@media(max-width:360px){
  .ed-home-route{font-size:19px}
  .ed-action-row{grid-template-columns:28px minmax(0,1fr) 12px}
  .ed-action-date{display:none}
  .ed-decision-grid{grid-template-columns:1fr}
  .ed-decision-chip{min-height:auto;flex-direction:row;align-items:center;gap:8px;justify-content:flex-start}
  .ed-decision-chip span{margin-top:0;font-size:10.5px}
}



/* V38 — travel-in-progress home preview */
.ed-preview-banner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:12px 0 10px;padding:10px 12px;border:1px dashed rgba(55,76,122,.45);
  border-radius:13px;background:rgba(250,248,245,.72);color:var(--primaryDeep)
}
.ed-preview-banner>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.ed-preview-banner b{font-size:11px;letter-spacing:.04em}
.ed-preview-banner span{font-size:11px;color:var(--muted);white-space:nowrap}
.ed-preview-banner>div:last-child{display:flex;gap:5px}
.ed-preview-banner button{border:0;background:var(--primarySoft);color:var(--primaryDeep);padding:6px 8px;border-radius:8px;font-size:10px;font-weight:800}
.preview-quick-times{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px}
.preview-quick-times button{border:1px solid var(--line);background:var(--surface2);color:var(--primaryDeep);border-radius:10px;padding:8px 4px;font-size:11px;font-weight:750}

.ed-live-hero{
  position:relative;overflow:hidden;margin-top:12px;padding:18px 18px 16px;
  min-height:255px;border-radius:24px;background:#172B52;color:#F8F2E5;
  box-shadow:0 16px 34px rgba(23,43,82,.14)
}
.ed-live-hero::before{
  content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(245,205,151,.18);
  border-radius:50%;right:-95px;top:-118px
}
.ed-live-hero::after{
  content:"";position:absolute;inset:auto -40px 35px 40%;height:1px;
  border-top:1px dashed rgba(245,205,151,.24);transform:rotate(-12deg);transform-origin:center
}
.ed-live-hero-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ed-live-day{font-size:11px;font-weight:850;letter-spacing:.08em;color:#EBC493}
.ed-live-date{margin-top:3px;font-size:11px;color:rgba(248,242,229,.68)}
.ed-live-kicker{position:relative;z-index:2;margin-top:18px;font-size:11px;letter-spacing:.08em;font-weight:850;color:#F0C98F}
.ed-live-hero h1{position:relative;z-index:2;margin:3px 0 0;font-size:34px;line-height:1.05;letter-spacing:-.04em;color:#FFF8EA!important;-webkit-text-fill-color:#FFF8EA!important;text-shadow:0 1px 0 rgba(255,255,255,.02)}
.ed-live-route{position:relative;z-index:2;margin-top:9px;max-width:94%;font-size:11px;line-height:1.5;color:rgba(248,242,229,.72)}
.ed-live-next{
  position:absolute;z-index:3;left:16px;right:16px;bottom:15px;
  display:grid;grid-template-columns:auto minmax(0,1fr) 44px;align-items:center;gap:12px;
  padding:12px 12px 12px 14px;border-radius:17px;background:#F6EFE2;color:#172B52
}
.ed-live-next>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:58px}
.ed-live-next>div:first-child span{font-size:9px;font-weight:800;color:#9A7751}
.ed-live-next>div:first-child b{font-size:18px;line-height:1;font-variant-numeric:tabular-nums}
.ed-live-next-main{min-width:0;display:flex;flex-direction:column;gap:2px;padding-left:11px;border-left:1px solid #DED1BE}
.ed-live-next-main small{font-size:9px;color:#8A8276}
.ed-live-next-main strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-live-next button{width:44px;height:44px;border:0;border-radius:13px;background:#EBC493;color:#172B52;font-size:19px;font-weight:900}

.ed-home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.ed-home-section-head>div{min-width:0}
.ed-home-section-head h2{margin:2px 0 0;font-size:20px;line-height:1.2;color:#172B52}
.ed-home-section-head button{border:0;background:transparent;color:var(--primaryDeep);font-size:11px;font-weight:800;padding:4px}
.ed-live-schedule{background:#FAF8F5;border:1px solid var(--line);border-radius:18px;padding:4px 14px}
.ed-live-schedule-row{
  width:100%;display:grid;grid-template-columns:48px 18px minmax(0,1fr) auto;gap:8px;align-items:center;
  border:0;border-top:1px solid var(--line);background:transparent;padding:12px 0;text-align:left;color:var(--text)
}
.ed-live-schedule-row:first-child{border-top:0}
.ed-live-schedule-row.done{opacity:.42}
.ed-live-schedule-row.current{opacity:1}
.ed-live-schedule-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ed-live-schedule-mark{position:relative;height:100%;display:grid;place-items:center}
.ed-live-schedule-mark::before{content:"";position:absolute;width:1px;top:-20px;bottom:-20px;background:var(--line)}
.ed-live-schedule-row:first-child .ed-live-schedule-mark::before{top:50%}
.ed-live-schedule-row:last-child .ed-live-schedule-mark::before{bottom:50%}
.ed-live-schedule-mark span{position:relative;z-index:1;width:8px;height:8px;border-radius:50%;background:#FAF8F5;border:2px solid #8390AA}
.ed-live-schedule-row.current .ed-live-schedule-mark span{width:10px;height:10px;border-color:#E2B77F;background:#E2B77F;box-shadow:0 0 0 4px #F4E7D5}
.ed-live-schedule-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.ed-live-schedule-main b{font-size:14px;color:#172B52;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-live-schedule-main span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-live-schedule-state{font-size:10px;color:#9A7751;font-weight:800}

.ed-live-lodging{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:16px 15px;border-radius:19px;background:#31496F;color:#F8F2E5;box-shadow:0 8px 22px rgba(49,73,111,.10)
}
.ed-live-lodging-main{min-width:0;display:flex;flex-direction:column}
.ed-live-lodging-main>span{font-size:9px;letter-spacing:.08em;color:#EBC493;font-weight:800}
.ed-live-lodging-main b{font-size:17px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-live-lodging-main small{font-size:10px;color:rgba(248,242,229,.65);margin-top:5px}
.ed-live-lodging-actions{display:flex;gap:6px}
.ed-live-icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(248,242,229,.18);border-radius:12px;background:rgba(255,255,255,.08);color:#F8F2E5;text-decoration:none;font-size:19px}
.ed-live-icon-btn svg{width:16px;height:16px}

.ed-live-transport-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ed-live-transport{padding:14px;border:1px solid var(--line);border-radius:17px;background:#FAF8F5}
.ed-live-transport-time{font-size:10px;color:#9A7751;font-weight:800}
.ed-live-transport-route{display:flex;align-items:center;gap:6px;margin-top:8px;min-width:0;color:#172B52}
.ed-live-transport-route b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-live-transport-route span{color:var(--muted);font-size:11px}
.ed-live-transport-meta{margin-top:7px;font-size:10px;color:var(--muted);line-height:1.45}

.ed-live-reminders{border-top:1px solid #172B52;border-bottom:1px solid #172B52}
.ed-live-reminders>div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:9px;padding:12px 1px;border-top:1px dashed rgba(23,43,82,.18)}
.ed-live-reminders>div:first-child{border-top:0}
.ed-live-reminders span{font-size:10px;font-weight:850;color:#B08A60}
.ed-live-reminders p{margin:0;font-size:12px;line-height:1.6;color:#172B52}

@media(max-width:480px){
  .ed-live-hero{min-height:265px;padding:16px 16px 15px;border-radius:22px}
  .ed-live-kicker{margin-top:15px}
  .ed-live-hero h1{font-size:32px}
  .ed-live-route{font-size:10.5px}
  .ed-live-next{left:13px;right:13px;bottom:13px;grid-template-columns:54px minmax(0,1fr) 42px}
  .ed-live-next button{width:42px;height:42px}
  .ed-live-transport-list{grid-template-columns:1fr}
  .ed-preview-banner{align-items:flex-start}
  .ed-preview-banner>div:first-child{flex-direction:column;align-items:flex-start;gap:2px}
}

/* ============================================================
   ===== V46 當地天氣預報 + 預算進度視覺化 =====
   ============================================================ */

/* weather chip */
.weather-chip{
  font-family:var(--bp-mono);font-size:10.5px;font-weight:700;color:rgba(243,238,224,.85);
  margin-left:8px;white-space:nowrap;
}
.day-panel-date+.day-location-chip+.weather-chip,
.day-location-chip+.weather-chip{color:var(--bp-muted)!important}

/* budget summary panel */
.budget-summary{
  background:var(--bp-paper);border:1.5px solid var(--bp-navy);border-radius:14px;
  padding:16px;margin:14px 20px;
}
.budget-target-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--bp-navy);font-weight:700}
.budget-target-progress{margin-top:8px;background:rgba(27,42,74,.10)!important}
.budget-set-target{display:inline-block;margin-bottom:2px}
.budget-bar{
  display:flex;width:100%;height:10px;border-radius:6px;overflow:hidden;margin-top:14px;background:var(--bp-line);
}
.budget-bar-seg{height:100%}
/* 類別圖例排成兩欄的格線。先前是 flex-wrap，每一項寬度隨字數跑 —— 第二欄的
   起點會因為左邊那一項多兩個字就整排位移，看起來像沒有對齊（使用者：「希望
   可左右上下排列整齊」）。格線讓每一欄固定起點，金額一律靠右對齊。 */
.budget-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:12px}
.budget-legend-item{
  display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--bp-muted);font-family:var(--bp-mono);
  width:100%;text-align:left;background:none;border:0;padding:4px 0;min-height:28px;
}
/* 金額緊跟在類別後面。先前用 margin-left:auto 把金額推到欄位最右邊，兩者中間空
   一大段 —— 對齊是好看了，但要讀「活動是多少錢」得把視線橫跨半個螢幕（使用者：
   「花費金額和類別文字離得太遠有點難閱讀」）。就近比對齊重要。 */
.budget-legend-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.budget-legend-item b{color:var(--bp-navy);font-weight:800;margin-left:6px;flex:0 0 auto}
.budget-legend-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
@media (hover:hover){.budget-legend-item:hover .budget-legend-name{text-decoration:underline}}

/* 類別明細視窗
   grid 的欄位預設是 auto —— 一筆名稱很長的支出（日文活動名）會把整欄撐得比視窗
   還寬，整張表就爆版。minmax(0,1fr) 讓欄寬跟著容器，配上每一層的 min-width:0，
   長名稱才會收在自己的格子裡。 */
.budget-cat-list{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.budget-cat-row{
  width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text);
  overflow:hidden
}
.budget-cat-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
/* 名稱太長就折成兩行再截斷 —— 只留一行的話「BIWA100 ウルトラ…」等於什麼都沒說。 */
.budget-cat-item{
  font-weight:720;font-size:15px;min-width:0;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35
}
.budget-cat-meta{font-size:12px;color:var(--muted)}
.budget-cat-amount{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.budget-cat-amount b{font-size:15px;font-weight:800}
.budget-cat-original{font-size:11px;color:var(--muted)}


/* ============================================================
   ===== V47 分帳功能 =====
   ============================================================ */
.budget-actions{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.settle-section{padding:0 20px 18px}
.settle-section-title{
  font-family:var(--bp-mono);text-transform:uppercase;letter-spacing:.06em;font-size:11px;
  color:var(--bp-muted);font-weight:700;margin-bottom:10px;
}
.settle-balance-row,.settle-tx-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--bp-line);font-size:13.5px;color:var(--bp-navy);
}
.settle-balance-row:last-child,.settle-tx-row:last-child{border-bottom:0}
.settle-balance-row b{font-family:var(--bp-mono)}
.settle-balance-row b.positive{color:#2E6B52}
.settle-balance-row b.negative{color:var(--bp-stamp)}
.settle-tx-row b{font-family:var(--bp-mono);color:var(--bp-navy)}


/* ============================================================
   ===== V48 多趟旅行切換 =====
   ============================================================ */
.trip-switcher-list{padding:0 20px}
.trip-switcher-item{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  background:var(--bp-paper)!important;border:1.5px solid var(--bp-navy)!important;border-radius:10px!important;
  padding:12px 14px!important;margin-bottom:9px!important;
}
.trip-switcher-item.active{background:var(--bp-navy)!important}
.trip-switcher-item.active .trip-switcher-name,.trip-switcher-item.active .trip-switcher-meta{color:var(--bp-cream)!important}
.trip-switcher-name{font-weight:800;color:var(--bp-navy);font-size:14.5px}
.trip-switcher-meta{font-family:var(--bp-mono);font-size:10.5px;color:var(--bp-muted)}
.trip-switcher-actions{padding:14px 20px 20px;display:flex;flex-direction:column;gap:8px}


/* ============================================================
   ===== V50 導覽重構：可點旅程名稱 + 五格導覽列 + 「更多」總覽頁 =====
   The ••• overflow menu is retired: its contents were three
   different kinds of thing (content pages, a context switcher,
   a preview tool) crammed behind one meaningless glyph. ===== */

/* header: trip title is now the trip switcher */
.trip-title-btn{
  display:flex!important;align-items:center;gap:6px;
  background:transparent!important;border:0!important;padding:0!important;
  text-align:left;min-height:0!important;
}
.trip-title-btn h1{margin:0}
.trip-title-caret{width:17px;height:17px;color:var(--bp-muted,#7A7566);flex:0 0 auto}
.trip-title-btn:active{opacity:.6}

/* bottom nav: five tabs, real line icons above the label */
.bottom{grid-template-columns:repeat(5,1fr)!important}
.bottom button{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:3px!important;line-height:1!important;
}
.bottom button svg{width:21px;height:21px;flex:0 0 auto}
.bottom button span{font-size:10.5px;font-weight:700;letter-spacing:.01em}

/* 更多 hub page: full-width cards carrying a summary figure */
.hub-list{display:flex;flex-direction:column;gap:9px}
.hub-card{
  width:100%;display:flex;align-items:center;gap:13px;text-align:left;
  background:var(--bp-paper,#FAF7EE)!important;
  border:1.5px solid var(--bp-navy,#1B2A4A)!important;border-radius:14px!important;
  padding:15px 16px!important;
}
.hub-card-icon{
  flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--bp-cream,#F3EEE0);color:var(--bp-navy,#1B2A4A);
}
.hub-card-icon svg{width:20px;height:20px}
.hub-card-body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.hub-card-title{font-size:15px;font-weight:800;color:var(--bp-navy,#1B2A4A)}
.hub-card-meta{
  font-size:11.5px;color:var(--bp-muted,#7A7566);
  font-family:var(--bp-mono,ui-monospace,monospace);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hub-card-arrow{flex:0 0 auto;color:var(--bp-muted,#7A7566);font-size:19px;line-height:1}
.hub-card:active{background:var(--bp-cream,#F3EEE0)!important}


/* ============================================================
   ===== V51 對比度修正 Contrast & legibility pass =====
   Audited every rule that pairs a colour with a background and
   computed WCAG contrast ratios. Two classes of problem found:
   (1) --muted grey sat at 3.9–4.3:1 on the cream surfaces, below
       the 4.5:1 minimum — this drove most of the "pale text on a
       pale card" cases, across pills, tags, notes and icon buttons.
   (2) a few accent colours (gold as text, the overdue pill) were
       under 4:1 on their own backgrounds.
   Targets here are ~7:1 (AAA) rather than the 4.5:1 floor, since
   comfortable reading matters more than just passing.
   ============================================================ */
:root{
  /* 3.93:1 -> 6.85:1 on the darkest cream surface */
  --muted:#555044!important;
  --ui-muted:#555044!important;
  --bp-muted:#555044!important;
  --ref-muted:#555044!important;
  --studio-muted:#555044!important;
  /* gold is fine as a fill but far too light as text (2.7:1) */
  --bp-gold-text:#7D6020;
}

/* accent text that failed on its own background */
.state-pill.overdue{color:#833654!important;border-color:#833654!important}
.delete,.icon-delete{color:#8E2F2F!important}
.next-journey-link{color:var(--bp-navy)!important}
.leaflet-control-attribution{color:#555044!important}

/* gold used as TEXT gets the darker tone; gold used as a FILL is unchanged */
.brand-icon,.sync-btn,.header .more-btn,.header .sync-btn{color:inherit}
.favorite-card::before{border-color:var(--bp-gold-text)!important}

/* ---- dark surfaces ----
   Only the containers whose text colour was genuinely unset get one.
   A blanket `container *` rule is NOT safe here: these panels contain
   light-background islands (the booking-relation picker, native select
   popups), and forcing cream onto everything inside turns those into
   pale-on-pale. Text colour is set on the container so real text nodes
   inherit it, and each light island keeps its own dark colour below. */
.favorite-overview-stats,
.favorite-overview-stats>div,.favorite-overview-stats>span,
.favorite-overview-stats b,.favorite-overview-stats strong,.favorite-overview-stats small{
  color:var(--bp-cream,#F3EEE0)!important;
}
.editor-sheet-body{color:#FAF7F0!important}
.editor-sheet-body>label,.editor-sheet-body>div>label{color:rgba(243,238,224,.88)!important}
/* …but keep the deliberately inverted chip readable on its gold fill */
.favorite-area-card-arrow{color:#3A2E0F!important;background:var(--bp-gold,#B8923F)!important}

/* ---- light islands sitting inside dark panels: force dark text back ---- */
.relation-picker,.relation-picker *,
.relation-search,.relation-panel,.relation-result,.relation-more,
.relation-results,.relation-search-wrap,.relation-filter-row button{
  color:#2A2416!important;
}
.relation-picker>label{color:rgba(243,238,224,.88)!important}
.relation-result-main b{color:#1B2A4A!important}
.relation-result-main small,.relation-empty,.relation-more,.relation-clear{color:#555044!important}
.relation-result-type{color:#1B2A4A!important;background:#E7E3D6!important}
.relation-filter-row button{background:#FFFFFF!important;color:#3B3524!important}
.relation-filter-row button.active{background:#1B2A4A!important;color:#F3EEE0!important}
.relation-search::placeholder{color:#6E6857!important;opacity:1!important}
select option{background:#FFFFFF!important;color:#1B2A4A!important}

.hero,.hero *:not(.hero-progress):not(.hero-progress-fill){color:var(--bp-cream,#F3EEE0)!important}
.hero .label{color:rgba(243,238,224,.82)!important}
.hero .pill{color:var(--bp-cream,#F3EEE0)!important}

.trip-switcher-item.active,.trip-switcher-item.active *{color:var(--bp-cream,#F3EEE0)!important}
.bottom button.active,.bottom button.active *{color:var(--bp-cream,#F3EEE0)!important}
.date-chip.active,.filter-chip.active,.multi-filter-option.selected,
.trip-view-switch button.active,.prepare-tab.active,.favorite-category-tab.active{
  color:var(--bp-cream,#F3EEE0)!important;
}
.add-btn,.save,.route-edit-btn.primary,.favorite-row-add,
.add-btn *,.save *,.route-edit-btn.primary *{color:var(--bp-cream,#F3EEE0)!important}
.offline-banner{color:#3A2E0F!important}

/* placeholders and disabled text: readable rather than nearly invisible */
input::placeholder,textarea::placeholder{color:#6E6857!important;opacity:1!important}
.editor-sheet-body input::placeholder,.editor-sheet-body textarea::placeholder{
  color:rgba(243,238,224,.70)!important;
}
.editor-sheet-body label{color:rgba(243,238,224,.88)!important}



/* ---- 系統性防護：每個淺色底都自己指定深色文字 ----
   這些選擇器設了淺色背景卻沒有設文字顏色，文字色就會從外層繼承 —— 一旦這種元件
   被放進深色面板裡，就會變成淺底淺字，完全看不到。

   ⚠️ 這條規則先前是**壞的**：自動產生清單時把註解的開頭吃掉了，於是像
   「sharp-ish corners」「thin navy rule」這類散文混進了選擇器清單。CSS 的逗號
   清單只要有一個選擇器無效，整條規則就會被瀏覽器丟掉 —— 所以這個防護從加上去
   到現在一次都沒有生效過。

   ⚠️ 修的時候我又踩了一次：在這段註解裡引用註解結束符號，會把註解**提前關掉**，
   後面的說明文字就變成 CSS 垃圾，整條規則一樣失效。這裡不要出現註解的結束符號。
   維護時請保持底下只有選擇器。 ---- */
.budget-summary,
.calendar-cell.trip-day,
.card,
.checkout-strip,
.checkout-strip-details[open] .lodging-detail-stack,
.compact-btn,
.day-location,
.day-panel-card,
.day-panel-card.day-panel-card,
.day-summary-menu,
.ed-action-list,
.ed-live-schedule,
.ed-live-schedule-mark span,
.ed-live-schedule-row.current .ed-live-schedule-mark span,
.ed-live-transport,
.editor,
.editor-sheet,
.editor-sheet-actions,
.editor-sheet-head,
.empty,
.event-card,
.favorite-batch-bar,
.favorite-card,
.favorite-category-tabs,
.favorite-extra,
.favorite-list-row,
.favorite-list-row.selected,
.favorite-search-shell,
.favorite-stat,
.filter-sheet-actions,
.generic-sheet,
.header,
.hero,
.home-alert-card,
.home-flat-panel,
.home-links,
.home-tile,
.home-transport-card,
.hub-card,
.icon,
.info-block,
.item,
.lodging-summary-card,
.lodging-summary-section,
.map-icon,
.more-popover,
.next-journey-card,
.overview-note,
.pack-group,
.phase-card,
.prep-item,
.prepare-tabs,
.quick-card,
.relation-more,
.relation-panel,
.relation-picker,
.relation-result,
.relation-search,
.route-card,
.route-dot,
.route-drag-ghost .route-card,
.route-head-actions .route-edit-btn.secondary,
.row.current,
.row.next,
.search-input-wrap,
.section,
.sheet-head,
.state-pill.future,
.stay-detail-stack,
.stay-overnight,
.stay-strip,
.stayover-strip,
.timeline,
.today-map-canvas,
.transport-overview-card,
.travel-intro,
.trip-month,
.trip-switcher-item,
.trip-view-switch,
.bottom,
.day-summary{
  color:#2A2416;
}

/* ============================================================
   ===== V54 貼上連結自動建立收藏 =====
   ============================================================ */
.head-btn-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.paste-link-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bp-paper,#FAF7EE)!important;
  border:1.5px solid var(--bp-navy,#1B2A4A)!important;
  color:var(--bp-navy,#1B2A4A)!important;
  border-radius:999px!important;padding:8px 14px!important;
  font-size:12.5px!important;font-weight:700!important;min-height:40px!important;
}
.paste-link-btn svg{width:15px;height:15px;flex:0 0 auto}
.paste-link-btn:active{background:var(--bp-cream,#F3EEE0)!important}


/* ============================================================
   ===== V55 座標補齊 / 順序建議 =====
   ============================================================ */
.backfill-intro{
  padding:0 20px 14px;font-size:13px;line-height:1.7;color:var(--bp-navy,#1B2A4A);
}
.backfill-status{
  margin:0 20px 6px;padding:12px 14px;border-radius:10px;
  background:var(--bp-cream,#F3EEE0);border:1.5px solid var(--bp-line,#D8D0BC);
  font-size:12.5px;font-family:var(--bp-mono,ui-monospace,monospace);
  color:var(--bp-navy,#1B2A4A);line-height:1.6;
}


/* ============================================================
   ===== V56 未排入提醒 =====
   ============================================================ */
/* 「想去」的提醒跟收藏的提醒長得一樣，只用左邊那條色帶區分：一個是這趟已經收藏
   的，一個是跨旅程想去的。 */
.unscheduled-notice.wish-notice{border-left-color:#5B8ABF}
.unscheduled-notice{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  text-align:left;margin:0 0 14px;
  background:var(--bp-paper,#FAF7EE)!important;
  border:1.5px dashed var(--bp-navy,#1B2A4A)!important;
  border-radius:12px!important;padding:13px 15px!important;
}
.unscheduled-notice-main{
  font-size:13.5px;font-weight:700;line-height:1.55;color:var(--bp-navy,#1B2A4A);
}
.unscheduled-notice-sub{
  font-size:11.5px;color:#8E2F2F;font-family:var(--bp-mono,ui-monospace,monospace);
}
.unscheduled-notice-go{
  font-size:11.5px;font-weight:800;color:var(--bp-navy,#1B2A4A);margin-top:2px;
}
.unscheduled-notice:active{background:var(--bp-cream,#F3EEE0)!important}


/* ============================================================
   ===== V57 預約／票券中心（Phase 1 UI）=====
   Ticket-pass styling rather than a CRUD table; scoped class names
   only, so nothing here reaches into shared components. ===== */
.rsv-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:2px 0 14px}
.rsv-summary-item{
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-navy,#1B2A4A);
  border-radius:12px;padding:12px 10px;text-align:center;
}
.rsv-summary-item b{
  display:block;font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:21px;font-weight:800;color:var(--bp-navy,#1B2A4A);
}
.rsv-summary-item span{font-size:10.5px;color:#555044}
.rsv-summary-item.warn{border-color:#8E2F2F}
.rsv-summary-item.warn b{color:#8E2F2F}

.rsv-list{display:flex;flex-direction:column;gap:11px;margin-top:12px}
.rsv-card{
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-navy,#1B2A4A);
  border-radius:14px;padding:14px 15px;position:relative;
}
.rsv-card-kicker{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#555044;margin-bottom:6px;
}
.rsv-card-main{
  display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:transparent!important;border:0!important;padding:0!important;min-height:0!important;
}
.rsv-card-title{font-size:16px;font-weight:800;color:var(--bp-navy,#1B2A4A);line-height:1.4}
.rsv-card-when{font-family:var(--bp-mono,ui-monospace,monospace);font-size:12px;color:#555044}
.rsv-card-place{font-size:12px;color:#555044}
.rsv-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center}
.rsv-tag{
  font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:6px;
  border:1.3px solid var(--bp-line,#D8D0BC);color:#555044;background:#fff;
}
.rsv-tag.ok{border-color:#2E6B52;color:#2E6B52}
.rsv-tag.warn{border-color:#8E2F2F;color:#8E2F2F}
.rsv-ref{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:10.5px;color:#555044;
}
.rsv-card-attention{
  margin-top:9px;font-size:11.5px;font-weight:700;color:#8E2F2F;
}
.rsv-card-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.rsv-btn{
  display:inline-flex;align-items:center;min-height:38px;padding:8px 13px;
  border-radius:999px;border:1.5px solid var(--bp-navy,#1B2A4A);
  background:#fff;color:var(--bp-navy,#1B2A4A);
  font-size:12px;font-weight:700;text-decoration:none;
}
.rsv-btn:active{background:var(--bp-cream,#F3EEE0)}

/* reservation strip shown on an itinerary card — reference only, never a copy */
.event-rsv{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px;
  padding:8px 10px;border-radius:9px;
  background:var(--bp-cream,#F3EEE0);border:1px solid var(--bp-line,#D8D0BC);
}
.event-rsv-status{
  font-size:10px;font-weight:800;padding:2px 7px;border-radius:5px;
  background:var(--bp-navy,#1B2A4A);color:var(--bp-cream,#F3EEE0);
}
.event-rsv-name{font-size:12.5px;font-weight:700;color:var(--bp-navy,#1B2A4A)}
.event-rsv-ref{font-family:var(--bp-mono,ui-monospace,monospace);font-size:11px;color:#555044}
.event-rsv-link{
  font-size:11.5px;font-weight:800;color:var(--bp-navy,#1B2A4A);
  text-decoration:underline;background:transparent!important;border:0!important;
  padding:4px 2px!important;min-height:0!important;
}
.event-add-rsv{
  margin-top:9px;font-size:11.5px;font-weight:700;
  background:transparent!important;border:1.3px dashed var(--bp-navy,#1B2A4A)!important;
  color:var(--bp-navy,#1B2A4A)!important;border-radius:8px!important;
  padding:7px 11px!important;min-height:36px!important;
}


/* ============================================================
   ===== V58 預約詳細頁：支出／待辦串聯（Phase 2）=====
   ============================================================ */
.rsv-detail{padding:0 20px 4px}
.rsv-detail-line{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:12.5px;
  color:#555044;margin-bottom:4px;
}
.rsv-detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rsv-detail-section{
  padding:16px 20px;border-top:1px dashed var(--bp-line,#D8D0BC);margin-top:14px;
}
.rsv-detail-heading{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#555044;margin-bottom:10px;
}
.rsv-linked-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;margin-bottom:8px;border-radius:10px;
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-line,#D8D0BC);
}
.rsv-linked-row b{display:block;font-size:13.5px;color:var(--bp-navy,#1B2A4A)}
.rsv-linked-row small{
  display:block;font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:11px;color:#555044;margin-top:2px;
}
.rsv-linked-empty{font-size:12.5px;color:#555044;padding:2px 0 10px}
.rsv-linked-actions{display:flex;flex-wrap:wrap;gap:8px}
.rsv-hint{font-size:11.5px;color:#555044}


/* ============================================================
   ===== V59 Phase 3：今日預約／待處理／健檢 =====
   ============================================================ */
.home-rsv-list{display:flex;flex-direction:column;gap:8px}
.home-rsv-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:11px;
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-line,#D8D0BC);
}
.home-rsv-time{
  flex:0 0 auto;font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:12.5px;font-weight:800;color:var(--bp-navy,#1B2A4A);min-width:44px;
}
.home-rsv-main{
  flex:1 1 auto;min-width:0;text-align:left;
  background:transparent!important;border:0!important;padding:0!important;min-height:0!important;
}
.home-rsv-main b{display:block;font-size:13.5px;color:var(--bp-navy,#1B2A4A);font-weight:800}
.home-rsv-main small{
  display:block;font-size:11px;color:#555044;margin-top:2px;
  font-family:var(--bp-mono,ui-monospace,monospace);
}
.home-rsv-ticket{
  flex:0 0 auto;font-size:11.5px;font-weight:800;
  color:var(--bp-navy,#1B2A4A);text-decoration:underline;
}
.home-rsv-more{
  background:transparent!important;border:1.3px dashed var(--bp-navy,#1B2A4A)!important;
  color:var(--bp-navy,#1B2A4A)!important;border-radius:10px!important;
  font-size:12px!important;font-weight:700!important;padding:9px 12px!important;
}
.mini-chip.needs-rsv{
  background:#FFF1F1!important;border-color:#8E2F2F!important;color:#8E2F2F!important;
  font-weight:800!important;
}
button.rsv-summary-item{cursor:pointer}


/* ============================================================
   ===== V60 整合缺口修補：搜尋／地圖／反向關聯 =====
   ============================================================ */
.item-rsv-source{
  display:inline-block;margin-top:7px;
  background:transparent!important;border:0!important;padding:0!important;
  min-height:0!important;
  font-size:11.5px;font-weight:700;color:var(--bp-navy,#1B2A4A);
  text-decoration:underline;text-underline-offset:2px;
}
.item-rsv-source:active{opacity:.6}


/* ============================================================
   ===== V61 可自訂導覽列 =====
   ============================================================ */
.nav-edit-intro{padding:0 20px 14px;font-size:12.5px;line-height:1.7;color:#555044}
.nav-edit-subtitle{
  padding:0 20px 6px;font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:11px;font-weight:700;letter-spacing:.04em;color:#6B6656;
}
.nav-edit-pinned-block{margin-bottom:18px}
/* 隱藏：把用不到的功能從「更多」收起來。只影響自己的畫面，資料不受影響。 */
.nav-edit-hide{
  flex:0 0 auto;
  min-height:28px!important;padding:4px 10px!important;
  border:1px solid var(--bp-line,#D8D0BC)!important;border-radius:999px!important;
  background:transparent!important;color:#6B6656!important;
  font-size:11px!important;font-weight:700!important;
}
.nav-edit-hide.active{
  background:var(--bp-navy,#1B2A4A)!important;
  border-color:var(--bp-navy,#1B2A4A)!important;
  color:var(--bp-cream,#F3EEE0)!important;
}
.nav-edit-row.is-hidden{opacity:.55;border-style:dashed}
.nav-edit-row.is-hidden .nav-edit-pin{opacity:.4;pointer-events:none}
@media(max-width:640px){
  .nav-edit-row.is-hidden .nav-edit-hide,
  .nav-edit-hide{grid-column:2;justify-self:start}
}
.nav-edit-row.nav-edit-fixed-more{
  opacity:.7;background:transparent;border-style:dashed;
}
.nav-edit-fixed-tag{
  flex:0 0 auto;font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:9.5px;font-weight:700;color:#6B6656;
  border:1px solid var(--bp-line,#D8D0BC);border-radius:4px;padding:1px 5px;
}
.nav-edit-empty{
  font-size:12.5px;color:#6B6656;line-height:1.6;padding:14px 13px;
  border:1.5px dashed var(--bp-line,#D8D0BC);border-radius:11px;margin-bottom:8px;
}
.nav-edit-list{padding:0 20px;position:relative}
.nav-edit-row{
  display:flex;align-items:center;gap:11px;
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-navy,#1B2A4A);
  border-radius:11px;padding:11px 13px;margin-bottom:8px;
}
.nav-edit-row.dragging{
  box-shadow:0 10px 24px rgba(27,42,74,.22);opacity:.96;
}
.nav-edit-icon{flex:0 0 auto;width:20px;height:20px;color:var(--bp-navy,#1B2A4A)}
.nav-edit-icon svg{width:20px;height:20px}
.nav-edit-label{flex:1 1 auto;font-size:14px;font-weight:700;color:var(--bp-navy,#1B2A4A)}
.nav-edit-handle{
  flex:0 0 auto;background:transparent!important;border:0!important;
  color:#555044!important;font-size:17px;padding:6px 4px!important;min-height:40px!important;
  cursor:grab;touch-action:none;
}
.nav-edit-placeholder{
  border:1.5px dashed var(--bp-navy,#1B2A4A);border-radius:11px;margin-bottom:8px;
  background:rgba(27,42,74,.05);
}
.nav-edit-divider{
  display:flex;align-items:center;gap:9px;margin:4px 0 12px;
}
.nav-edit-divider::before,.nav-edit-divider::after{
  content:"";flex:1 1 auto;height:0;border-top:1.5px dashed var(--bp-navy,#1B2A4A);
}
.nav-edit-divider span{
  flex:0 0 auto;font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:10.5px;font-weight:700;color:#555044;
}
body.nav-dragging{user-select:none}


/* ============================================================
   ===== V62 拖曳體驗與功能分區修正 =====
   ============================================================ */

/* The editor rows are drag targets, not text: suppress selection and the
   iOS long-press callout on them permanently, not only mid-drag. */
.nav-edit-row,.nav-edit-row *{
  -webkit-user-select:none!important;user-select:none!important;
  -webkit-touch-callout:none!important;
}
.nav-edit-handle{
  -webkit-user-select:none!important;user-select:none!important;
  -webkit-touch-callout:none!important;
}
body.nav-dragging,body.nav-dragging *{
  -webkit-user-select:none!important;user-select:none!important;
  -webkit-touch-callout:none!important;
}

/* group label on each editor row */
.nav-edit-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.nav-edit-group{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:10px;
  letter-spacing:.06em;color:#6B6656;
}
.nav-edit-label{flex:0 0 auto}

/* 更多 page: tighter rhythm now that it carries section headings */
.hub-list+.section,.section+.section{margin-top:22px}


/* ============================================================
   ===== V63 導覽編輯：儲存狀態、拖曳穩定性、分區命名 =====
   ============================================================ */
.nav-edit-list{padding:0 20px 4px;position:relative}

/* rows destined for the bottom bar read differently from the rest */
.nav-edit-row.on-nav{
  background:var(--bp-cream,#F3EEE0);
  border-color:var(--bp-navy,#1B2A4A);
}
.nav-edit-row.on-nav .nav-edit-label::after{
  content:"在導覽列";
  margin-left:7px;font-size:9.5px;font-weight:700;
  font-family:var(--bp-mono,ui-monospace,monospace);
  color:var(--bp-navy,#1B2A4A);
  border:1px solid var(--bp-navy,#1B2A4A);border-radius:4px;padding:1px 5px;
  vertical-align:middle;
}

/* sticky save bar: the state of the change is always visible */
.nav-edit-savebar{
  position:sticky;bottom:0;z-index:5;
  padding:12px 20px calc(14px + env(safe-area-inset-bottom));
  background:var(--bp-paper,#FAF7EE);
  border-top:1.5px solid var(--bp-line,#D8D0BC);
  display:flex;flex-direction:column;gap:9px;
}
.nav-edit-hint{font-size:11.5px;color:#555044;line-height:1.5}
.nav-edit-savebar-btns{display:flex;gap:8px}
.nav-edit-savebar-btns .save{flex:1 1 auto}
.nav-edit-savebar-btns .save:disabled{
  opacity:.45;background:var(--bp-line,#D8D0BC)!important;color:#555044!important;
}


/* ============================================================
   ===== V64 編輯導覽改為整頁：修正版面與卡頓 =====
   The editor no longer lives in a bottom sheet, so the save bar can
   anchor to the page bottom and drag coordinates match the viewport.
   These rules override the earlier sheet-based ones. ===== */
.nav-edit-intro{
  padding:0 0 14px!important;font-size:12.5px;line-height:1.7;color:#555044;
}
.nav-edit-list{padding:0!important;position:relative}
.nav-edit-row{
  display:flex;align-items:center;gap:10px;
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-navy,#1B2A4A);
  border-radius:12px;padding:11px 12px;margin-bottom:9px;
  box-sizing:border-box;
}
/* Only the handle opts out of scrolling. Putting touch-action:none on the
   whole row meant a finger anywhere on the list blocked the page from
   scrolling at all, since the rows cover the screen. */
.nav-edit-row.dragging{touch-action:none}
.nav-edit-row.dragging{box-shadow:0 12px 26px rgba(27,42,74,.25);opacity:.97}
.nav-edit-move{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.nav-edit-arrow{
  background:transparent!important;border:1px solid var(--bp-line,#D8D0BC)!important;
  color:var(--bp-navy,#1B2A4A)!important;border-radius:6px!important;
  font-size:10px!important;line-height:1!important;
  width:30px!important;height:24px!important;min-height:0!important;padding:0!important;
}
.nav-edit-arrow:disabled{opacity:.3}
.nav-edit-handle{
  flex:0 0 auto;background:transparent!important;border:0!important;
  color:#555044!important;font-size:18px;padding:0 2px!important;
  width:34px!important;min-height:44px!important;cursor:grab;touch-action:none;
}
.nav-edit-placeholder{
  border:1.5px dashed var(--bp-navy,#1B2A4A);border-radius:12px;margin-bottom:9px;
  background:rgba(27,42,74,.05);box-sizing:border-box;
}

/* save bar now sits at the page bottom, above the nav bar */
.nav-edit-savebar{
  position:sticky!important;bottom:calc(78px + env(safe-area-inset-bottom))!important;
  z-index:6;margin-top:18px;
  padding:13px 14px!important;
  background:var(--bp-paper,#FAF7EE);
  border:1.5px solid var(--bp-navy,#1B2A4A);border-radius:14px;
  box-shadow:0 6px 18px rgba(27,42,74,.12);
  display:flex;flex-direction:column;gap:9px;
}
.nav-edit-hint{font-size:11.5px;color:#555044;line-height:1.5}
.nav-edit-savebar-btns{display:flex;gap:8px}
.nav-edit-savebar-btns .save{flex:1 1 auto}
.nav-edit-savebar-btns .save:disabled{
  opacity:.5;background:var(--bp-line,#D8D0BC)!important;color:#555044!important;
}
@media(max-width:390px){
  .nav-edit-arrow{width:28px!important}
  .nav-edit-label{font-size:13.5px}
}


/* ============================================================
   ===== V66 編輯導覽：拿掉浮動儲存列 =====
   A sticky bottom bar is lifted over the content whenever its natural
   position sits below the fold — that is what kept covering the rows.
   Save now lives in the page header, which needs no positioning tricks. */
.nav-edit-savebar{display:none!important}

.nav-edit-head #navEditSave:disabled{
  opacity:.5;background:var(--bp-line,#D8D0BC)!important;color:#555044!important;
}
.nav-edit-hint{
  font-size:11.5px;color:#555044;line-height:1.5;margin:0 0 10px;
}
.nav-edit-footer{margin-top:16px;display:flex}
.nav-edit-footer .route-edit-btn{flex:1 1 auto}

/* arrows side by side: a short wide pair is easier to hit than a tall stack */
.nav-edit-move{flex-direction:row!important;gap:5px!important}
.nav-edit-arrow{
  width:34px!important;height:34px!important;min-height:34px!important;
  font-size:13px!important;border-radius:8px!important;
}
@media(max-width:390px){
  .nav-edit-arrow{width:31px!important;height:31px!important}
  .nav-edit-row{gap:7px!important;padding:10px!important}
}


/* ============================================================
   ===== V69 帳戶頁面 =====
   ============================================================ */
.account-card{
  margin:0 20px 4px;padding:16px;border-radius:14px;
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-navy,#1B2A4A);
}
.account-label{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#555044;margin-bottom:6px;
}
.account-id{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:20px;font-weight:800;
  color:var(--bp-navy,#1B2A4A);letter-spacing:.02em;word-break:break-all;
}
.account-note{font-size:12px;color:#555044;line-height:1.6;margin-top:8px}
.account-actions{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.account-google-card{background:#fff}
.account-profile-row{display:flex;align-items:center;gap:13px}
.account-avatar{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:50%;background:var(--bp-navy,#1B2A4A);color:#fff;font-size:20px;font-weight:800}
.account-profile-main{min-width:0;flex:1}
.account-email{color:var(--bp-navy,#1B2A4A);font-size:14px;font-weight:750;word-break:break-all}
.account-login-state{display:flex;align-items:center;gap:6px;margin-top:5px;color:#3E7654;font-size:11.5px;font-weight:700}
.account-login-state span{width:7px;height:7px;border-radius:50%;background:#4A9566;box-shadow:0 0 0 3px rgba(74,149,102,.12)}
.invite-url-preview{padding:10px;border:1px dashed var(--bp-line,#C9C1B4);border-radius:8px;color:#555044;font-size:11px;line-height:1.5;word-break:break-all;background:rgba(255,255,255,.6)}
.invite-code{font-family:var(--bp-mono,ui-monospace,monospace);font-size:32px;font-weight:900;letter-spacing:.18em;color:var(--bp-navy,#1B2A4A);text-align:center;padding:12px 0 6px}
.join-trip-card input{width:100%;box-sizing:border-box;margin-top:4px;padding:12px 13px;font-size:14px}
.join-trip-card .join-code-input{font-family:var(--bp-mono,ui-monospace,monospace);font-size:22px;font-weight:850;letter-spacing:.16em;text-align:center;text-transform:uppercase}
.join-trip-status{min-height:20px;margin:4px 20px 10px;color:#8E2F2F;font-size:12px;font-weight:700;line-height:1.5}


/* ============================================================
   ===== V70 帳戶與旅程管理 =====
   ============================================================ */
.account-trip-actions{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto}
.rsv-btn.danger{border-color:#8E2F2F!important;color:#8E2F2F!important}
.rsv-linked-row.dead{opacity:.72;border-style:dashed}
.rsv-linked-row.dead b{color:#555044}




/* V41 — Travel Day upcoming + exact itinerary focus */
.ed-live-schedule-row.untimed .ed-live-schedule-time{
  color:var(--muted);
}
.ed-live-schedule-row.untimed .ed-live-schedule-main span{
  color:#666A72;
}
.ed-live-schedule-more{
  width:100%;
  border:0;
  border-top:1px dashed var(--line);
  background:transparent;
  color:var(--primaryDeep);
  padding:12px 4px 10px;
  font-size:11px;
  font-weight:800;
  text-align:center;
}
.ed-live-schedule-finished{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface);
  color:var(--primaryDeep);
}
.ed-live-schedule-finished b{font-size:13px}
.ed-live-schedule-finished button{
  border:0;
  background:transparent;
  color:var(--primaryDeep);
  font-size:11px;
  font-weight:800;
}
.route-item{
  scroll-margin-top:120px;
  scroll-margin-bottom:130px;
}
.route-item.home-focus .route-card{
  border-color:#C99C5D !important;
  box-shadow:0 0 0 3px rgba(201,156,93,.20),0 10px 28px rgba(27,42,74,.10) !important;
  animation:journeyHomeFocus 1.8s ease-out;
}
.route-item.home-focus .route-dot{
  border-color:#C99C5D !important;
  background:#F4D7A7 !important;
}
@keyframes journeyHomeFocus{
  0%{transform:translateY(1px);filter:brightness(1.03)}
  35%{transform:translateY(0);filter:brightness(1.01)}
  100%{filter:none}
}



/* V42 — Travel Day lodging / transport exact-focus navigation */
.ed-live-clickable{
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(201,156,93,.12);
}
.ed-live-clickable:focus-visible{
  outline:2px solid #C99C5D;
  outline-offset:3px;
}
.ed-live-transport.ed-live-clickable{
  position:relative;
  padding-right:40px;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.ed-live-transport.ed-live-clickable::after{
  content:"›";
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  color:#9A7751;
  font-size:20px;
  font-weight:800;
}
.ed-live-transport.ed-live-clickable:active,
.ed-live-lodging.ed-live-clickable:active{
  transform:scale(.992);
}
.transport-overview-card[data-overview-key]{
  scroll-margin-top:120px;
  scroll-margin-bottom:130px;
}
.transport-overview-card.overview-focus,
.record-focus{
  border-color:#C99C5D !important;
  box-shadow:0 0 0 3px rgba(201,156,93,.20),0 10px 28px rgba(27,42,74,.10) !important;
  animation:journeyOverviewFocus 1.8s ease-out;
}
/* 任何可以被首頁「帶你過去」的卡片都要留捲動邊距，否則會停在被固定頁首
   或底部導覽列蓋住的位置。 */
[data-focus-key]{
  scroll-margin-top:120px;
  scroll-margin-bottom:130px;
}
@keyframes journeyOverviewFocus{
  0%{transform:translateY(1px);filter:brightness(1.035)}
  35%{transform:translateY(0);filter:brightness(1.012)}
  100%{filter:none}
}



/* ============================================================
   V43 — new-trip foundation / trip members / flexible navigation
   ============================================================ */
/* overflow-x:hidden 在 html/body 上會讓整頁失去「可捲動祖先」的資格，
   position:sticky 因此失效 —— 這就是 header 會被捲走的原因。
   overflow-x:clip 一樣擋住橫向溢出，但不會建立捲動容器，sticky 才留得住。 */
html,body{max-width:100%;overflow-x:clip}
.app,.editor-sheet,.editor-sheet-body,.generic-sheet{min-width:0;max-width:100%}
.editor-sheet-body{overflow-x:hidden}
.editor-sheet-body input,
.editor-sheet-body textarea,
.editor-sheet-body select,
.generic-sheet input,
.generic-sheet textarea,
.generic-sheet select{
  min-width:0!important;
  max-width:100%!important;
  inline-size:100%!important;
}
input[type="date"],input[type="time"]{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
}

.day-panel-missing .missing-day-copy{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 15px;border:1px dashed var(--bp-line);border-radius:14px;
  background:rgba(250,247,238,.58);
}
.missing-day-copy>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.missing-day-copy b{font-size:13px;color:var(--bp-navy)}
.missing-day-copy span{font-size:11px;line-height:1.55;color:var(--bp-muted)}
.date-chip-add{border-style:dashed!important}
.trip-first-day{margin-top:18px}

.trip-people-section{margin-top:18px}
.trip-people-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px}
.trip-people-heading>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.trip-people-heading b{font-size:15px;color:var(--bp-navy)}
.trip-people-heading span{font-size:11px;line-height:1.5;color:var(--bp-muted)}
.trip-person-row{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:8px;
}
/* Invite rows have no avatar column — a dedicated 2-column grid, not a
   variant of .trip-person-row, so the action buttons keep their natural
   width instead of stretching into a column meant for something else. */
.trip-invite-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:8px;
}
.trip-invite-row .icon-group{flex-wrap:nowrap;white-space:nowrap}
.trip-person-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bp-navy);color:var(--bp-cream);font-size:13px;font-weight:850}
.trip-person-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.trip-person-main b{font-size:14px;color:var(--bp-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trip-person-main span{font-size:10px;color:var(--bp-muted)}
.trip-person-badge{font-size:10px;font-weight:800;padding:5px 8px;border-radius:999px;background:var(--bp-cream);color:var(--bp-navy);border:1px solid var(--bp-line)}
.trip-people-empty{padding:13px;border:1px dashed var(--line);border-radius:13px;color:var(--muted);font-size:11px}

.nav-edit-pin{
  border:1px solid var(--bp-line);border-radius:999px;background:transparent;color:var(--bp-muted);
  padding:6px 9px;font-size:10px;font-weight:800;white-space:nowrap;
}
.nav-edit-pin{flex:0 0 auto}
.nav-edit-pin.active{background:var(--bp-navy);border-color:var(--bp-navy);color:var(--bp-cream)}
.nav-edit-row.on-nav{box-shadow:inset 3px 0 0 var(--bp-gold)}
.nav-edit-row.on-nav .nav-edit-label::after{display:none!important}

@media(max-width:480px){
 .day-panel-missing .missing-day-copy{align-items:stretch;flex-direction:column}
 .missing-day-copy .route-edit-btn{align-self:flex-start}
 .trip-people-heading{align-items:stretch;flex-direction:column}
 .trip-people-heading .route-edit-btn{align-self:flex-start}
 .nav-edit-row{grid-template-columns:auto minmax(0,1fr) auto!important}
 .nav-edit-pin{grid-column:2;justify-self:start;margin-top:3px}
 .nav-edit-move,.nav-edit-handle{align-self:center}
}



/* ============================================================
   V44 — expense form UX / multi-select split / custom split / route→expense
   ============================================================ */
.editor-field-wrap{min-width:0}
.editor-field-wrap>label{display:block}
.editor-segmented{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:7px;
  width:100%;
  margin-top:5px;
}
.editor-segment{
  min-width:0!important;
  min-height:40px!important;
  border:1px solid rgba(243,238,224,.28)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.06)!important;
  color:rgba(243,238,224,.86)!important;
  padding:8px 10px!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.2!important;
}
.editor-segment.active{
  background:var(--bp-gold,#B8923F)!important;
  border-color:var(--bp-gold,#B8923F)!important;
  color:var(--bp-navy,#1B2A4A)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.budget-field-hidden{display:none!important}
.budget-people-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:5px 0 7px;
}
.budget-people-toolbar span{
  font-size:10.5px;color:rgba(243,238,224,.60);font-family:var(--bp-mono);
}
.budget-people-toolbar button{
  border:0!important;background:transparent!important;color:var(--bp-gold,#D7B56D)!important;
  min-height:28px!important;padding:3px 2px!important;font-size:10.5px!important;font-weight:800!important;
}
.budget-people-grid{display:flex;flex-wrap:wrap;gap:7px}
.budget-person-chip{
  border:1px solid rgba(243,238,224,.28)!important;
  background:rgba(255,255,255,.06)!important;color:rgba(243,238,224,.86)!important;
  min-height:36px!important;padding:7px 11px!important;border-radius:999px!important;
  font-size:11.5px!important;font-weight:750!important;
}
.budget-person-chip.active{
  background:var(--bp-gold,#B8923F)!important;border-color:var(--bp-gold,#B8923F)!important;
  color:var(--bp-navy,#1B2A4A)!important;
}
.budget-custom-split{
  margin-top:6px;padding:10px 11px;border:1px dashed rgba(243,238,224,.25);
  border-radius:12px;background:rgba(255,255,255,.035);
}
.budget-custom-list{display:grid;gap:8px}
.budget-custom-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,42%);gap:10px;align-items:center;
}
.budget-custom-row>span{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#F3EEE0;font-size:12px;font-weight:750;
}
.budget-custom-input{position:relative;min-width:0}
.budget-custom-input small{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);z-index:1;
  font-size:9px;color:rgba(243,238,224,.48);font-family:var(--bp-mono);pointer-events:none;
}
.budget-custom-input input{
  padding-left:38px!important;text-align:right;font-variant-numeric:tabular-nums;
}
.budget-custom-summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:9px;border-top:1px solid rgba(243,238,224,.15);
  font-size:10.5px;color:rgba(243,238,224,.68);
}
.budget-custom-summary b{font-family:var(--bp-mono);font-size:10.5px}
.budget-custom-summary.ok b{color:#B9D8C5}
.budget-custom-summary.pending b{color:#E5C47D}
.budget-custom-summary.over b{color:#F0A9A9}
.budget-custom-empty{font-size:11px;color:rgba(243,238,224,.62);line-height:1.5}
.event-inline-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.event-inline-actions .event-add-rsv{margin-top:0}
.event-add-expense{
  min-height:36px!important;padding:7px 11px!important;border-radius:8px!important;
  border:1.3px solid var(--bp-gold,#B8923F)!important;
  background:rgba(184,146,63,.08)!important;color:var(--bp-navy,#1B2A4A)!important;
  font-size:11.5px!important;font-weight:800!important;
}
@media(max-width:420px){
 .editor-segmented{grid-template-columns:repeat(2,minmax(0,1fr))}
 .budget-custom-row{grid-template-columns:minmax(0,1fr) minmax(112px,44%)}
}


/* ===== V45 Money Engine ===== */
.budget-rate-control{display:grid;grid-template-columns:auto minmax(90px,1fr) auto;align-items:center;gap:8px;color:rgba(243,238,224,.74);font-size:12px}
.budget-rate-control input{min-width:0!important;text-align:right;font-family:var(--bp-mono)}
.budget-rate-control.base-currency{grid-template-columns:1fr}
.budget-rate-control.base-currency>*{display:none}
.budget-exchange-field .field-hint b{color:var(--bp-cream)}
.budget-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.budget-metric-grid>div{min-width:0;padding:12px;border:1px solid rgba(27,42,74,.14);border-radius:14px;background:rgba(255,255,255,.34);display:flex;flex-direction:column;gap:5px}
.budget-metric-grid span{font-size:10px;color:var(--bp-muted);font-weight:800;letter-spacing:.02em}
.budget-metric-grid b{font-family:var(--bp-mono);font-size:15px;color:var(--bp-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 幣別多的時候換行，不要擠成一條需要左右撥的長列。 */
.budget-original-currencies{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 11px}
.budget-original-currencies::-webkit-scrollbar{display:none}
.budget-original-currencies>span{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;border:1px solid var(--bp-line);border-radius:999px;padding:7px 10px;background:var(--bp-paper)}
.budget-original-currencies b{font-family:var(--bp-mono);font-size:11px;color:var(--bp-navy)}
.budget-conversion-warning{width:100%;border:1px solid #D7B36C;background:#FAF0D9;color:#5D4926;border-radius:13px;padding:11px 12px;margin:0 0 12px;text-align:left;display:flex;flex-direction:column;gap:3px}
.budget-conversion-warning b{font-size:12px}.budget-conversion-warning span{font-size:10px;line-height:1.5;color:#705C38}
.budget-category-title{margin-top:14px;font-size:10px;font-weight:850;letter-spacing:.08em;color:var(--bp-muted);text-transform:uppercase}
.money-settings-hint{margin:8px 0 15px;font-size:11px;line-height:1.55;color:var(--bp-muted)}
.money-rate-list{display:grid;gap:7px;margin-top:14px}.money-rate-row{display:grid;grid-template-columns:64px 14px minmax(90px,1fr) 48px;gap:6px;align-items:center;font-size:12px;color:var(--bp-navy)}
.money-rate-row input{min-width:0!important;text-align:right;font-family:var(--bp-mono)}.money-rate-row b{text-align:center;color:var(--bp-muted)}
.budget-item-list{display:grid;gap:9px}.budget-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:var(--shadow)}
.budget-item-main{min-width:0;display:flex;flex-direction:column;gap:3px}.budget-item-main>span{font-size:9px;color:var(--muted);font-weight:750}.budget-item-main>b{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.budget-item-main>small{font-size:10px;color:var(--muted)}
.budget-item-money{min-width:95px;text-align:right;display:flex;flex-direction:column;gap:3px}.budget-item-money strong{font-family:var(--bp-mono);font-size:13px;color:var(--bp-navy)}.budget-item-money small{font-size:9px;color:var(--muted)}.budget-item-money small.warn{color:var(--bp-stamp)}
.budget-item-actions{display:flex;gap:2px}
.settle-currency{margin:0 0 18px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}.settle-currency-head{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:var(--primarySoft);color:var(--primaryDeep)}.settle-currency-head b{font-size:13px;letter-spacing:.08em}.settle-currency-head span{font-family:var(--bp-mono);font-size:12px}
.settle-tx-card{padding:12px 0;border-bottom:1px solid var(--line)}.settle-tx-card:last-child{border-bottom:0}.settle-tx-main{display:flex;align-items:center;justify-content:space-between;gap:8px}.settle-tx-main span{font-size:12px;color:var(--text)}.settle-tx-main b{font-family:var(--bp-mono);font-size:12px;color:var(--primaryDeep)}.settle-tx-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}.settle-tx-actions button{border:1px solid var(--line);background:var(--surface2);color:var(--primaryDeep);border-radius:9px;padding:6px 9px;font-size:10px;font-weight:800}.settle-tx-actions button.primary{background:var(--primary);border-color:var(--primary);color:white}
.settle-history{padding:0 20px 18px}.settle-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.settle-history-row>div{min-width:0;display:flex;flex-direction:column;gap:2px}.settle-history-row b{font-size:11px;color:var(--text)}.settle-history-row small{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.settle-history-row strong{font-family:var(--bp-mono);font-size:11px;color:var(--primaryDeep)}.settle-history-row button{width:28px;height:28px;border:0;background:var(--surface2);border-radius:8px;color:var(--muted)}
.settle-amount-input{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}.settle-amount-input span{font-family:var(--bp-mono);color:var(--primaryDeep)}
@media(max-width:480px){.budget-metric-grid{grid-template-columns:1fr 1fr}.budget-metric-grid>div:first-child{grid-column:1/-1}.budget-item{grid-template-columns:minmax(0,1fr) auto}.budget-item-actions{grid-column:1/-1;justify-content:flex-end;margin-top:-4px}.money-rate-row{grid-template-columns:52px 12px minmax(76px,1fr) 42px}}

/* ============================================================
   ===== V71 版面修正：月曆對齊、快速動作、更多頁密度 =====
   ============================================================ */

/* --- 4. 月曆：日期固定在左上角，其餘內容往下排 --- */
.calendar-cell{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  justify-content:flex-start!important;gap:3px;
}
.calendar-date{
  align-self:flex-start!important;flex:0 0 auto!important;
  text-align:left!important;margin:0!important;
}
.calendar-place{
  flex:0 0 auto;font-size:10.5px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.calendar-tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:2px}

/* --- 6. 行程卡的快速動作：改成小尺寸圖示鈕，不再撐高卡片 --- */
/* 卡片內的動作維持靠左，跟上方的標題與說明對齊成同一條左邊界。
   靠右的只有「行程路線」標題列那三顆（見 .route-head-actions）。 */
.event-inline-actions{
  display:flex!important;gap:6px!important;flex-wrap:wrap;
  margin-top:8px!important;padding-top:0!important;border-top:0!important;
}
.event-quick-act{
  display:inline-flex;align-items:center;gap:4px;
  background:transparent!important;
  border:1px solid var(--bp-line,#D8D0BC)!important;
  color:#555044!important;
  border-radius:999px!important;
  padding:5px 10px!important;min-height:30px!important;
  font-size:11px!important;font-weight:700!important;line-height:1!important;
}
.event-quick-act svg{width:13px;height:13px;flex:0 0 auto}
.event-quick-act:active{background:var(--bp-cream,#F3EEE0)!important}

/* --- 3. 更多頁：一排一個 ---
   先前為了減少捲動改成兩欄並排，但兩欄會把說明文字擠成兩三行、圖示與標題也對
   不齊，反而更難掃過去。改回一排一個的橫向列：圖示、標題與說明、右側箭頭，
   跟站上其他列表列同一種形狀。 */
.hub-card-meta{
  white-space:normal!important;line-height:1.4;
}

/* --- 5. 元件樣式統一：同類按鈕共用一組尺寸與圓角 --- */
.paste-link-btn,.head-add-btn,.link-btn,.route-edit-btn{
  border-radius:999px!important;
}
.paste-link-btn,.head-add-btn,.route-edit-btn{
  min-height:38px!important;font-size:12.5px!important;font-weight:700!important;
}
.section-head .link-btn{font-size:12.5px!important;font-weight:700!important}


/* ============================================================
   ===== V72 選項按鈕均分 + 導覽列均分 =====
   ============================================================ */

/* --- 表單選項：交由 balancedOptionRows 決定每列幾個 ---
   Superseded by the row-based layout below: the per-count column rules here
   could only produce uniform grids, so 7 options became 3+3+1 instead of the
   balanced 4+3. Row sizes are now computed in JS and each row stretches to
   fill the width. */
.budget-people-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(88px,1fr))!important;
  gap:7px!important;
}

/* --- 導覽列：不論幾格都平均分配整個寬度 ---
   grid-template-columns is set inline by renderBottomNav to the live tab
   count, so this just guarantees the cells stretch rather than hug content. */
.bottom{width:100%}
.bottom button{width:100%;min-width:0}




/* ============================================================
   V73 — Claude handoff UX fixes
   ============================================================ */
.generic-sheet.search-sheet-body #moneyBaseCurrency,
.generic-sheet.search-sheet-body [data-money-rate],
.search-sheet-body #moneyBaseCurrency,
.search-sheet-body [data-money-rate]{
  background:var(--bp-paper,#FAF7EE)!important;
  color:var(--bp-navy,#1B2A4A)!important;
  border:1.5px solid var(--bp-line,#D8D0BC)!important;
  -webkit-text-fill-color:var(--bp-navy,#1B2A4A)!important;
  opacity:1!important;
}
.search-sheet-body #moneyBaseCurrency option{
  background:#fff!important;color:#1B2A4A!important;
}
.search-sheet-body [data-money-rate]::placeholder{
  color:#6E6857!important;-webkit-text-fill-color:#6E6857!important;opacity:1!important;
}
.search-sheet-body .money-rate-row,
.search-sheet-body .money-rate-row span,
.search-sheet-body .money-rate-row b,
.search-sheet-body label{
  color:var(--bp-navy,#1B2A4A)!important;
}

.budget-summary{
  width:100%!important;max-width:none!important;margin:14px 0!important;box-sizing:border-box!important;
}

.editor-segmented{
  display:flex!important;flex-direction:column!important;gap:7px!important;grid-template-columns:none!important;
}
.editor-segment-row{
  display:grid!important;
  grid-template-columns:repeat(var(--row-cols,1),minmax(0,1fr))!important;
  gap:7px!important;width:100%!important;min-width:0!important;
}
.editor-segment-row .editor-segment{
  width:100%!important;min-width:0!important;padding:8px 7px!important;
}
@media(max-width:420px){
  .editor-segmented{display:flex!important;grid-template-columns:none!important}
  .editor-segment-row{grid-template-columns:repeat(var(--row-cols,1),minmax(0,1fr))!important}
}

.bottom{width:100%!important}
.bottom button{width:100%!important;min-width:0!important;max-width:none!important}



/* ============================================================
   V74 — light-island readability + native date/time normalization
   ============================================================ */

/* Generic filter sheets are light surfaces. Older editor rules made their
   inherited text cream/white even though the visible sheet is paper-coloured. */
.generic-sheet .editor-sheet-body{
  background:var(--bp-paper,#FAF7EE)!important;
  color:var(--bp-navy,#1B2A4A)!important;
}
.generic-sheet .sheet-title,
.generic-sheet .section-note,
.generic-sheet .filter-section-title,
.generic-sheet .filter-section-head,
.generic-sheet .filter-text-btn,
.generic-sheet .active-filter-label,
.generic-sheet .clear-filter-link{
  color:var(--bp-navy,#1B2A4A)!important;
}
.generic-sheet .filter-section>label,
.generic-sheet .filter-section label{
  color:var(--bp-navy,#1B2A4A)!important;
}

/* Expense relation picker is another light island inside the dark editor. */
.editor-sheet-body .relation-picker{
  background:var(--bp-paper,#FAF7EE)!important;
  color:var(--bp-navy,#1B2A4A)!important;
}
.editor-sheet-body .relation-picker>label{
  color:var(--bp-navy,#1B2A4A)!important;
}
.editor-sheet-body .relation-search{
  background:#FFF!important;
  color:var(--bp-navy,#1B2A4A)!important;
  -webkit-text-fill-color:var(--bp-navy,#1B2A4A)!important;
  border-color:var(--bp-line,#D8D0BC)!important;
  opacity:1!important;
}
.editor-sheet-body .relation-search::placeholder{
  color:#6E6857!important;
  -webkit-text-fill-color:#6E6857!important;
  opacity:1!important;
}
.editor-sheet-body .relation-clear{
  color:#555044!important;
}

/* iOS gives date/time controls a different intrinsic metric. Keep the native
   picker, but normalize the visible box to the same control geometry. */
.editor-sheet-body input[type="date"],
.editor-sheet-body input[type="time"],
.generic-sheet input[type="date"],
.generic-sheet input[type="time"]{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  padding:10px 12px!important;
  margin:0!important;
  line-height:1.3!important;
  font-size:16px!important;
  text-align:left!important;
}
.editor-sheet-body input[type="date"]::-webkit-date-and-time-value,
.editor-sheet-body input[type="time"]::-webkit-date-and-time-value,
.generic-sheet input[type="date"]::-webkit-date-and-time-value,
.generic-sheet input[type="time"]::-webkit-date-and-time-value{
  text-align:left!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  line-height:1.3!important;
}



/* ============================================================
   V75 — personal budget dashboard + Travel Day expense snapshot
   ============================================================ */
.budget-metric-grid.budget-metric-self .primary,
.budget-metric-grid.budget-metric-solo .primary{
  background:var(--bp-navy,#1B2A4A)!important;
  border-color:var(--bp-navy,#1B2A4A)!important;
}
.budget-metric-grid.budget-metric-self .primary span,
.budget-metric-grid.budget-metric-self .primary b,
.budget-metric-grid.budget-metric-solo .primary span,
.budget-metric-grid.budget-metric-solo .primary b{
  color:var(--bp-cream,#F3EEE0)!important;
}
.budget-metric-grid.budget-metric-solo{
  grid-template-columns:1fr!important;
}
.budget-metric-grid.budget-metric-solo>div:first-child{
  grid-column:auto!important;
}
.budget-burden-hint{
  margin:-2px 0 12px;
  font-size:10.5px;
  line-height:1.55;
  color:#6B6656;
}
.budget-settlement-mini{
  margin:4px 0 13px;
  padding:12px;
  border:1px solid var(--bp-line,#D8D0BC);
  border-radius:13px;
  background:rgba(255,255,255,.32);
}
.budget-mini-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.budget-mini-head>span{
  font-size:10.5px;
  font-weight:850;
  color:#555044;
}
.budget-mini-head button{
  border:0;
  background:transparent;
  padding:2px 0;
  color:var(--bp-navy,#1B2A4A);
  font-size:10.5px;
  font-weight:800;
}
.budget-settlement-chips{
  display:flex;
  gap:7px;
  overflow-x:auto;
  scrollbar-width:none;
}
.budget-settlement-chips::-webkit-scrollbar{display:none}
.budget-settlement-chip{
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--bp-line,#D8D0BC);
  background:var(--bp-paper,#FAF7EE);
}
.budget-settlement-chip small{font-size:9.5px;font-weight:800}
.budget-settlement-chip b{font-family:var(--bp-mono,ui-monospace,monospace);font-size:11px}
.budget-settlement-chip.receive{border-color:#6D9A84}
.budget-settlement-chip.receive small,.budget-settlement-chip.receive b{color:#2E6B52}
.budget-settlement-chip.pay{border-color:#C88B8B}
.budget-settlement-chip.pay small,.budget-settlement-chip.pay b{color:#8E2F2F}
.budget-all-settled{
  font-size:11px;
  color:#2E6B52;
  font-weight:750;
}
.budget-personal-target{
  margin:4px 0 14px;
  padding:12px;
  border-top:1px dashed var(--bp-line,#D8D0BC);
  border-bottom:1px dashed var(--bp-line,#D8D0BC);
}
.budget-target-amount{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:3px;
}
.budget-target-amount b{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:18px;
  color:var(--bp-navy,#1B2A4A);
}
.budget-target-amount span{font-size:10.5px;color:#6B6656}
.budget-target-remaining{
  margin-top:3px;
  font-size:10.5px;
  font-weight:750;
  color:#555044;
}
.budget-secondary-note,.budget-subheading{
  font-size:10.5px;
  line-height:1.5;
  color:#6B6656;
}
.budget-secondary-note{margin:0 0 10px}
.budget-subheading{font-weight:800;margin:2px 0 7px}

/* Travel Day: intentionally compact, not a second dashboard. */
.ed-live-expense-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px 15px;
  border:1.5px solid var(--bp-navy,#1B2A4A);
  border-radius:15px;
  background:var(--bp-paper,#FAF7EE);
}
.ed-live-expense-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.ed-live-expense-main small,.ed-live-expense-group small{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:9.5px;
  font-weight:800;
  color:#6B6656;
}
.ed-live-expense-main strong{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:19px;
  color:var(--bp-navy,#1B2A4A);
}
.ed-live-expense-main span{
  font-size:10.5px;
  color:#6B6656;
}
.ed-live-expense-group{
  min-width:92px;
  padding-left:12px;
  border-left:1px solid var(--bp-line,#D8D0BC);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ed-live-expense-group b{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:12px;
  color:var(--bp-navy,#1B2A4A);
}
.ed-live-expense-add{
  grid-column:1/-1;
  width:100%;
  border:1px dashed var(--bp-navy,#1B2A4A);
  border-radius:9px;
  background:transparent;
  color:var(--bp-navy,#1B2A4A);
  padding:8px 10px;
  font-size:11px;
  font-weight:800;
}
.ed-live-expense-empty{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1.5px dashed var(--bp-navy,#1B2A4A);
  border-radius:14px;
  background:var(--bp-paper,#FAF7EE);
  color:var(--bp-navy,#1B2A4A);
  padding:13px 15px;
  text-align:left;
}
.ed-live-expense-empty span{font-size:12px;color:#6B6656}
.ed-live-expense-empty b{font-size:12px;color:var(--bp-navy,#1B2A4A)}
@media(max-width:420px){
  .ed-live-expense-card{grid-template-columns:minmax(0,1fr) auto}
  .ed-live-expense-group{min-width:84px}
}



/* ============================================================
   V76 — Open Loops is not Progress
   ============================================================ */
.ed-open-loop-list{
  border-top:1.5px solid var(--bp-navy,#1B2A4A);
  border-bottom:1.5px solid var(--bp-navy,#1B2A4A);
}
.ed-open-loop-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 16px!important;
  align-items:center!important;
  gap:11px!important;
  padding:13px 4px!important;
  border:0!important;
  border-top:1px solid var(--bp-line,#D8D0BC)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--bp-navy,#1B2A4A)!important;
  text-align:left!important;
}
.ed-open-loop-row:first-child{border-top:0!important}
.ed-open-loop-kicker{
  align-self:start;
  display:inline-flex;
  justify-content:center;
  padding:4px 6px;
  border:1px solid var(--bp-line,#D8D0BC);
  border-radius:7px;
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:9px;
  font-weight:850;
  letter-spacing:.04em;
  color:#6B6656;
  background:var(--bp-paper,#FAF7EE);
}
.ed-open-loop-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ed-open-loop-main b{
  font-size:13.5px;
  line-height:1.4;
  color:var(--bp-navy,#1B2A4A);
}
.ed-open-loop-main small{
  font-size:10.5px;
  line-height:1.5;
  color:#6B6656;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.ed-open-loop-arrow{
  font-size:20px;
  color:var(--bp-gold,#B8923F);
}



/* ============================================================
   V77 — Modal / form contrast hardening
   Fix invisible text inside light sheets and light sub-panels.
   ============================================================ */

/* ---------- A. Light generic sheets (filters / preview / settlement / quick panels) ---------- */
.search-sheet-body,
.search-sheet-body .sheet-title,
.search-sheet-body label,
.search-sheet-body .field-hint,
.search-sheet-body .filter-section-title,
.search-sheet-body .filter-section-head,
.search-sheet-body .filter-text-btn,
.search-sheet-body .active-filter-label,
.search-sheet-body .today-map-fallback,
.search-sheet-body .booking-link-preview,
.search-sheet-body .booking-link-preview *,
.search-sheet-body .settlement-empty,
.search-sheet-body .settlement-history-card,
.search-sheet-body .settlement-history-card *,
.search-sheet-body .preview-note{
  color:var(--bp-navy,#1B2A4A)!important;
}

.search-sheet-body input,
.search-sheet-body textarea,
.search-sheet-body select,
.search-sheet-body .settle-amount-input,
.search-sheet-body .search-input-wrap,
.search-sheet-body .booking-link-preview{
  background:#FFFFFF!important;
  color:var(--bp-navy,#1B2A4A)!important;
  border-color:rgba(27,42,74,.18)!important;
}

.search-sheet-body input::placeholder,
.search-sheet-body textarea::placeholder{
  color:rgba(27,42,74,.42)!important;
  opacity:1!important;
}

.search-sheet-body input[type="date"],
.search-sheet-body input[type="time"],
.search-sheet-body select{
  min-height:48px!important;
}

.search-sheet-body input[type="date"]::-webkit-datetime-edit,
.search-sheet-body input[type="time"]::-webkit-datetime-edit,
.search-sheet-body input[type="date"]::-webkit-datetime-edit-text,
.search-sheet-body input[type="time"]::-webkit-datetime-edit-text,
.search-sheet-body input[type="date"]::-webkit-datetime-edit-month-field,
.search-sheet-body input[type="date"]::-webkit-datetime-edit-day-field,
.search-sheet-body input[type="date"]::-webkit-datetime-edit-year-field,
.search-sheet-body input[type="time"]::-webkit-datetime-edit-hour-field,
.search-sheet-body input[type="time"]::-webkit-datetime-edit-minute-field{
  color:var(--bp-navy,#1B2A4A)!important;
  opacity:1!important;
}

.search-sheet-body input[type="date"]::-webkit-calendar-picker-indicator,
.search-sheet-body input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.9!important;
}

.search-sheet-body option{
  background:#FFFFFF!important;
  color:var(--bp-navy,#1B2A4A)!important;
}

/* Filter buttons / chips */
.search-sheet-body .multi-filter-option,
.search-sheet-body .filter-option,
.search-sheet-body .filter-chip,
.search-sheet-body .active-filter-chip,
.search-sheet-body .preview-quick-times button{
  background:#FFFFFF!important;
  color:var(--bp-navy,#1B2A4A)!important;
  border-color:var(--bp-navy,#1B2A4A)!important;
}
.search-sheet-body .multi-filter-option.selected,
.search-sheet-body .filter-option.selected,
.search-sheet-body .active-filter-chip.active,
.search-sheet-body .preview-quick-times button.active{
  background:var(--bp-navy,#1B2A4A)!important;
  color:#FFFFFF!important;
  border-color:var(--bp-navy,#1B2A4A)!important;
}
.search-sheet-body .filter-text-btn,
.search-sheet-body .clear-filter-link{
  color:var(--bp-navy,#1B2A4A)!important;
}

/* ---------- B. Light cards nested inside dark editor sheets ---------- */
.editor-sheet-body .relation-picker,
.editor-sheet-body .booking-link-preview,
.editor-sheet-body .budget-link-card,
.editor-sheet-body .light-panel{
  background:var(--bp-paper,#FAF7EE)!important;
  color:var(--bp-navy,#1B2A4A)!important;
  border-color:rgba(27,42,74,.16)!important;
}

.editor-sheet-body .relation-picker > label,
.editor-sheet-body .relation-picker .field-hint,
.editor-sheet-body .relation-picker .relation-result-main b,
.editor-sheet-body .relation-picker .relation-result-main small,
.editor-sheet-body .relation-picker .relation-result-type,
.editor-sheet-body .booking-link-preview,
.editor-sheet-body .booking-link-preview *{
  color:var(--bp-navy,#1B2A4A)!important;
}

.editor-sheet-body .relation-picker input,
.editor-sheet-body .relation-picker textarea,
.editor-sheet-body .relation-picker select,
.editor-sheet-body .relation-search{
  background:#FFFFFF!important;
  color:var(--bp-navy,#1B2A4A)!important;
  border-color:rgba(27,42,74,.16)!important;
}
.editor-sheet-body .relation-picker input::placeholder,
.editor-sheet-body .relation-picker textarea::placeholder{
  color:rgba(27,42,74,.42)!important;
  opacity:1!important;
}
.editor-sheet-body .relation-panel,
.editor-sheet-body .relation-result{
  background:#FFFFFF!important;
  color:var(--bp-navy,#1B2A4A)!important;
}
.editor-sheet-body .relation-filter-chip{
  background:#FFFFFF!important;
  color:var(--bp-navy,#1B2A4A)!important;
  border-color:var(--bp-navy,#1B2A4A)!important;
}
.editor-sheet-body .relation-filter-chip.active{
  background:var(--bp-navy,#1B2A4A)!important;
  color:#FFFFFF!important;
  border-color:var(--bp-navy,#1B2A4A)!important;
}

/* ---------- C. Safety net for any light surface inside modal sheets ---------- */
.generic-sheet [data-surface="light"],
.generic-sheet .surface-light,
.generic-sheet .bp-surface-light{
  color:var(--bp-navy,#1B2A4A)!important;
}
.generic-sheet [data-surface="light"] input,
.generic-sheet .surface-light input,
.generic-sheet .bp-surface-light input,
.generic-sheet [data-surface="light"] textarea,
.generic-sheet .surface-light textarea,
.generic-sheet .bp-surface-light textarea,
.generic-sheet [data-surface="light"] select,
.generic-sheet .surface-light select,
.generic-sheet .bp-surface-light select{
  color:var(--bp-navy,#1B2A4A)!important;
}



/* ============================================================
   V78 — Travel default FX, per-expense override only when needed
   ============================================================ */
.budget-exchange-field{margin-top:4px!important}
.budget-rate-summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border:1px solid rgba(243,238,224,.18);
  border-radius:12px;background:rgba(255,255,255,.055);
}
.budget-rate-summary-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.budget-rate-summary-main>span{
  font-size:10px;font-weight:800;color:rgba(243,238,224,.68)!important;
}
.budget-rate-summary-main>b{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:12.5px;color:#FAF7F0!important;
}
.budget-rate-summary-main>small{
  font-size:10.5px;line-height:1.45;color:rgba(243,238,224,.65)!important;
}
.budget-rate-edit-btn,.budget-rate-reset-btn{
  flex:0 0 auto;border:1px solid rgba(243,238,224,.34)!important;
  background:transparent!important;color:#FAF7F0!important;border-radius:8px!important;
  min-height:34px!important;padding:6px 10px!important;font-size:10.5px!important;font-weight:800!important;
}
.budget-rate-override{
  margin-top:8px;padding:10px 11px;border:1px dashed rgba(243,238,224,.26);border-radius:11px;
}
.budget-rate-override>label{
  margin:0 0 7px!important;color:rgba(243,238,224,.78)!important;font-size:10.5px!important;
}
.budget-rate-override .budget-rate-control{
  display:grid;grid-template-columns:auto minmax(86px,1fr) auto;gap:7px;align-items:center;
}
.budget-rate-override .budget-rate-control span{
  color:rgba(243,238,224,.75)!important;font-size:10.5px;
}
.budget-rate-override .budget-rate-control input{
  min-width:0!important;text-align:right!important;
}
.budget-rate-reset-btn{margin-top:8px;width:100%}
.budget-exchange-field.budget-field-hidden{display:none!important}



/* ============================================================
   V81 — Post-trip Mode
   ============================================================ */
.post-hero{
  position:relative;
  overflow:hidden;
  margin:14px 0 24px;
  padding:28px 26px 24px;
  min-height:286px;
  border-radius:24px;
  background:var(--bp-navy,#1B2A4A);
  color:var(--bp-cream,#F3EEE0);
  box-shadow:0 12px 32px rgba(27,42,74,.08);
}
.post-hero::before,
.post-hero::after{
  content:"";
  position:absolute;
  border:1px solid rgba(243,238,224,.16);
  border-radius:50%;
  pointer-events:none;
}
.post-hero::before{width:300px;height:300px;right:-126px;top:-155px}
.post-hero::after{width:230px;height:230px;right:-88px;top:-118px}
.post-hero-kicker{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:10px;
  letter-spacing:.18em;
  font-weight:800;
  color:#EBC493;
}
.post-hero-check{
  position:absolute;
  right:26px;
  top:26px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(243,238,224,.28);
  border-radius:50%;
  font-size:19px;
  color:#EBC493;
}
.post-hero h1{
  max-width:82%;
  margin:34px 0 8px;
  color:#FFF8EA!important;
  font-size:27px;
  line-height:1.2;
  letter-spacing:.01em;
}
.post-hero-dates{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:11.5px;
  color:rgba(243,238,224,.72);
}
.post-hero-route{
  margin-top:16px;
  font-size:12.5px;
  line-height:1.55;
  color:rgba(243,238,224,.86);
}
.post-hero-footer{
  position:absolute;
  left:26px;
  right:26px;
  bottom:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  border-top:1px dashed rgba(243,238,224,.25);
}
.post-hero-footer b{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:12px;
  color:#EBC493;
}
.post-hero-footer span{font-size:11px;color:rgba(243,238,224,.72)}

.post-section{margin:0 0 28px}
.post-section-last{padding-bottom:8px}
.post-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 4px 12px;
}
.post-section-head>div{display:flex;flex-direction:column;gap:2px}
.post-section-head span{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:9.5px;
  letter-spacing:.16em;
  font-weight:850;
  color:var(--bp-gold,#B8923F);
}
.post-section-head h2{
  margin:0;
  color:var(--bp-navy,#1B2A4A);
  font-size:20px;
}
.post-section-head button{
  border:0;
  background:transparent;
  color:var(--bp-navy,#1B2A4A);
  font-size:11px;
  font-weight:800;
  padding:6px 0;
}

.post-overview-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.post-overview-card{
  position:relative;
  min-width:0;
  min-height:124px;
  padding:16px 15px 14px!important;
  border:1.5px solid var(--bp-line,#D8D0BC)!important;
  border-radius:17px!important;
  background:var(--bp-paper,#FAF7EE)!important;
  text-align:left!important;
  color:var(--bp-navy,#1B2A4A)!important;
}
.post-overview-card small{
  display:block;
  margin-bottom:10px;
  font-size:10px;
  font-weight:800;
  color:#6B6656;
}
.post-overview-card strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:22px;
  line-height:1.15;
  color:var(--bp-navy,#1B2A4A);
}
.post-overview-card span{
  display:block;
  margin-top:6px;
  font-size:10px;
  line-height:1.35;
  color:#6B6656;
}
.post-overview-card i{
  position:absolute;
  right:13px;
  top:13px;
  font-style:normal;
  color:var(--bp-gold,#B8923F);
}

.post-money-card{
  padding:18px;
  border:1.5px solid var(--bp-navy,#1B2A4A);
  border-radius:19px;
  background:var(--bp-paper,#FAF7EE);
}
.post-money-primary{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.post-money-primary small{font-size:10px;font-weight:800;color:#6B6656}
.post-money-primary strong{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:25px;
  color:var(--bp-navy,#1B2A4A);
}
.post-money-primary span{font-size:10.5px;color:#6B6656}
.post-money-budget{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding:10px 0;
  border-top:1px dashed var(--bp-line,#D8D0BC);
  border-bottom:1px dashed var(--bp-line,#D8D0BC);
}
.post-money-budget span{font-size:10.5px;font-weight:800;color:#6B6656}
.post-money-budget b{font-size:11.5px;color:#2E6B52}
.post-money-budget.over b{color:#963C3C}
.post-money-original{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:13px;
}
.post-money-original>span,
.post-money-settlement>div:last-of-type span{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:6px 9px;
  border:1px solid var(--bp-line,#D8D0BC);
  border-radius:999px;
  background:#fff;
}
.post-money-original small,
.post-money-settlement small{font-size:9px;font-weight:800;color:#6B6656}
.post-money-original b,
.post-money-settlement b{font-family:var(--bp-mono,ui-monospace,monospace);font-size:10.5px;color:var(--bp-navy,#1B2A4A)}
.post-money-settlement{
  position:relative;
  width:100%;
  margin-top:13px;
  padding:11px 34px 11px 11px!important;
  border:1px solid var(--bp-line,#D8D0BC)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.35)!important;
  color:var(--bp-navy,#1B2A4A)!important;
  text-align:left!important;
}
.post-money-settlement>div:first-child{font-size:10.5px;font-weight:850;margin-bottom:7px}
.post-money-settlement>div:last-of-type{display:flex;flex-wrap:wrap;gap:6px}
.post-money-settlement .receive b,.post-money-settlement .receive small{color:#2E6B52}
.post-money-settlement .pay b,.post-money-settlement .pay small{color:#963C3C}
.post-money-settlement i{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-style:normal}
.post-money-settled{
  margin-top:13px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(46,107,82,.08);
  color:#2E6B52;
  font-size:10.5px;
  font-weight:800;
}
.post-money-warning{
  width:100%;
  margin-top:9px;
  padding:9px 11px!important;
  border:1px solid #C7A150!important;
  border-radius:10px!important;
  background:#FFF6DD!important;
  color:#6A5220!important;
  text-align:left!important;
  font-size:10.5px!important;
  font-weight:800!important;
}

.post-recap-list{
  border-top:1.5px solid var(--bp-navy,#1B2A4A);
  border-bottom:1.5px solid var(--bp-navy,#1B2A4A);
}
.post-recap-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:55px 12px minmax(0,1fr) 14px!important;
  align-items:center!important;
  gap:10px!important;
  padding:14px 4px!important;
  border:0!important;
  border-top:1px solid var(--bp-line,#D8D0BC)!important;
  border-radius:0!important;
  background:transparent!important;
  text-align:left!important;
}
.post-recap-row:first-child{border-top:0!important}
.post-recap-date{display:flex;flex-direction:column;gap:2px}
.post-recap-date b{font-family:var(--bp-mono,ui-monospace,monospace);font-size:12px;color:var(--bp-navy,#1B2A4A)}
.post-recap-date small{font-size:9px;color:#6B6656}
.post-recap-dot{
  width:8px;height:8px;border-radius:50%;background:var(--bp-navy,#1B2A4A);
}
.post-recap-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.post-recap-main b{font-size:14px;color:var(--bp-navy,#1B2A4A)}
.post-recap-main span{
  font-size:10.5px;line-height:1.45;color:#6B6656;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-recap-row i{font-style:normal;font-size:18px;color:var(--bp-gold,#B8923F)}
.post-recap-more{
  width:100%;
  margin-top:9px;
  border:0!important;
  background:transparent!important;
  color:var(--bp-navy,#1B2A4A)!important;
  padding:8px!important;
  font-size:10.5px!important;
  font-weight:800!important;
}

.post-wrap-list{display:flex;flex-direction:column;gap:8px}
.post-wrap-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 14px!important;
  align-items:center!important;
  gap:10px!important;
  padding:12px!important;
  border:1px solid var(--bp-line,#D8D0BC)!important;
  border-radius:13px!important;
  background:var(--bp-paper,#FAF7EE)!important;
  text-align:left!important;
}
.post-wrap-row>span{
  display:grid;
  place-items:center;
  min-height:28px;
  border:1px solid var(--bp-line,#D8D0BC);
  border-radius:7px;
  font-size:9px;
  font-weight:850;
  color:#6B6656;
}
.post-wrap-row>div{display:flex;flex-direction:column;gap:3px}
.post-wrap-row b{font-size:12px;color:var(--bp-navy,#1B2A4A)}
.post-wrap-row small{font-size:10px;line-height:1.45;color:#6B6656}
.post-wrap-row i{font-style:normal;font-size:18px;color:var(--bp-gold,#B8923F)}
.post-wrap-done{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  border:1px solid rgba(46,107,82,.25);
  border-radius:14px;
  background:rgba(46,107,82,.07);
}
.post-wrap-done>span{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:#2E6B52;color:white;font-weight:900;
}
.post-wrap-done>div{display:flex;flex-direction:column;gap:3px}
.post-wrap-done b{font-size:12px;color:#2E6B52}
.post-wrap-done small{font-size:10px;line-height:1.45;color:#557064}

@media(max-width:390px){
  .post-hero{padding-left:22px;padding-right:22px}
  .post-overview-card strong{font-size:19px}
}

/* ============================================================
   ===== V82 日期列定位 + 依時間捲到當下行程 =====
   ============================================================ */
.date-nav{scroll-behavior:auto}
.route-item-focus .route-card{
  box-shadow:0 0 0 2px var(--bp-navy,#1B2A4A),0 8px 20px rgba(27,42,74,.16)!important;
  transition:box-shadow .25s ease;
}
.route-item-focus .route-dot{
  background:var(--bp-navy,#1B2A4A)!important;
  transform:scale(1.15);transition:transform .25s ease;
}


/* ============================================================
   ===== V84 取消期限 / 匯率自動更新 / 重要資訊 / 每日筆記 / 花費趨勢 =====
   ============================================================ */

/* --- 匯率工具列 --- */
.money-rate-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px;
}
.money-rate-status{font-size:11.5px;color:#555044;line-height:1.5;flex:1 1 160px}

/* --- 重要資訊 --- */
.doc-intro{font-size:12.5px;color:#555044;line-height:1.7;margin-bottom:14px}
.doc-list{display:flex;flex-direction:column;gap:9px}
.doc-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-navy,#1B2A4A);
  border-radius:12px;padding:13px 14px;
}
.doc-row-main{min-width:0;flex:1 1 auto}
.doc-row-name{font-size:13px;font-weight:800;color:var(--bp-navy,#1B2A4A)}
.doc-row-value{
  display:block;margin-top:4px;text-align:left;
  background:transparent!important;border:0!important;padding:0!important;min-height:0!important;
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:15px;font-weight:700;
  color:var(--bp-navy,#1B2A4A);word-break:break-all;
}
.doc-row-note{margin-top:5px;font-size:11.5px;color:#555044;line-height:1.5}
.doc-row-actions{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.doc-row-actions .rsv-btn{min-height:32px!important;padding:5px 11px!important;font-size:11.5px!important}

/* --- 每日筆記 --- */
.day-note{
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-line,#D8D0BC);
  border-radius:12px;padding:13px 14px;margin-bottom:14px;
}
.day-note-text{font-size:13.5px;line-height:1.75;color:var(--bp-navy,#1B2A4A);white-space:pre-wrap}
.day-note-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.day-note-actions .rsv-btn{min-height:32px!important;padding:5px 11px!important;font-size:11.5px!important}
.day-note-empty{
  width:100%;margin-bottom:14px;
  background:transparent!important;border:1.3px dashed var(--bp-line,#D8D0BC)!important;
  color:#555044!important;border-radius:12px!important;
  padding:11px!important;min-height:40px!important;font-size:12.5px!important;font-weight:700!important;
}

/* --- 每日花費趨勢 --- */
.spend-trend{
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-line,#D8D0BC);
  border-radius:12px;padding:13px 14px;margin-bottom:12px;
}
.spend-trend-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;
  font-size:12px;font-weight:800;color:var(--bp-navy,#1B2A4A);
}
.spend-trend-head small{font-family:var(--bp-mono,ui-monospace,monospace);font-size:10.5px;color:#555044;font-weight:700}
/* 只能左右滑。overflow-x:auto 會讓另一個方向也變成 auto（規範如此），於是這張
   圖連著上下微微滑動 —— 使用者：「我不希望每日花費 bar 可以上下滑動。」
   touch-action:pan-x 讓手指的縱向動作直接交還給頁面捲動。 */
.spend-bars{
  display:flex;align-items:flex-end;gap:4px;height:92px;
  /* touch-action:pan-x 會讓手指放在長條上時整頁都捲不動；內部的上下捲已由
     overflow-y:hidden 擋掉，不必再限制手勢。 */
  overflow-x:auto;overflow-y:hidden;padding-bottom:2px;
  scrollbar-width:none;
}
.spend-bars::-webkit-scrollbar{display:none}
.spend-bar-col{
  flex:0 0 auto;width:26px;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;
  background:none;border:0;padding:0;cursor:pointer;
}
@media (hover:hover){.spend-bar-col:hover .spend-bar{filter:brightness(1.15)}}
.spend-bar{
  width:100%;border-radius:4px 4px 2px 2px;
  background:var(--bp-navy,#1B2A4A);min-height:3px;
}
.spend-bar.heavy{background:var(--bp-gold,#B8923F)}
.spend-bar-label{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:8.5px;color:#555044;
  white-space:nowrap;transform:rotate(-45deg);transform-origin:center;
}


/* ============================================================
   ===== V86 預計支出（已建立但尚未付款） =====
   ============================================================ */
.pending-expense-banner{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  text-align:left;margin-bottom:12px;
  background:var(--bp-paper,#FAF7EE)!important;
  border:1.5px dashed var(--bp-gold,#B8923F)!important;
  border-radius:12px!important;padding:12px 14px!important;
}
.pending-expense-main{font-size:13px;font-weight:800;color:var(--bp-navy,#1B2A4A)}
.pending-expense-sub{font-size:11px;color:#7D6020;line-height:1.5}

/* ============================================================
   ===== V87 日期／時間欄位與文字輸入框等高 =====
   The earlier attempt pinned date/time to a fixed 48px while ordinary inputs
   use min-height + padding and grow from their content, so the two could never
   line up. iOS also gives the inner date value its own metrics, which has to
   be flattened or it forces the box taller than whatever height is set. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  box-sizing:border-box!important;
  width:100%!important;
  /* identical geometry to a plain text input */
  height:auto!important;
  min-height:var(--ui-control-h,44px)!important;
  max-height:none!important;
  padding:10px 11px!important;
  margin:0!important;
  font-size:16px!important;   /* keeps iOS from zooming on focus */
  line-height:1.3!important;
  text-align:left!important;
  vertical-align:middle!important;
}
/* iOS renders the value in a shadow element with its own box; flatten it so it
   cannot push the control taller than the surrounding inputs. */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value{
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  line-height:1.3!important;
  text-align:left!important;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit{
  padding:0!important;margin:0!important;line-height:1.3!important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  margin:0!important;padding:0!important;
}
/* the same inside the dark editor sheet, overriding the old fixed-height rule */
.editor-sheet-body input[type="date"],
.editor-sheet-body input[type="time"],
.generic-sheet input[type="date"],
.generic-sheet input[type="time"],
.search-sheet-body input[type="date"],
.search-sheet-body input[type="time"]{
  height:auto!important;
  min-height:var(--ui-control-h,44px)!important;
  max-height:none!important;
  padding:10px 11px!important;
}


/* ============================================================
   ===== V88 支出表單版面：並排欄位與精簡關聯區塊 =====
   Pairing is done with CSS on the existing data-budget-field hooks, so the
   markup and the saved column order stay untouched. ===== */

/* 金額 ＋ 幣別 並排 */
.editor-sheet-body [data-budget-field="金額"],
.generic-sheet [data-budget-field="金額"]{
  float:left;width:calc(52% - 5px);clear:left;
}
.editor-sheet-body [data-budget-field="幣別"],
.generic-sheet [data-budget-field="幣別"]{
  float:right;width:calc(48% - 5px);
}
/* 關聯預約 ID ＋ 關聯行程 ID 並排 */
.editor-sheet-body [data-budget-field="關聯預約ID"],
.generic-sheet [data-budget-field="關聯預約ID"]{
  float:left;width:calc(50% - 5px);clear:left;
}
.editor-sheet-body [data-budget-field="關聯行程ID"],
.generic-sheet [data-budget-field="關聯行程ID"]{
  float:right;width:calc(50% - 5px);
}
/* stop the float from swallowing what follows */
.editor-sheet-body [data-budget-field="付款方式"],
.generic-sheet [data-budget-field="付款方式"],
.editor-sheet-body [data-budget-field="備註"],
.generic-sheet [data-budget-field="備註"],
.editor-sheet-body .save,
.generic-sheet .save{clear:both}

/* 幣別在並排時字級縮一點，避免三個按鈕擠成兩行 */
[data-budget-field="幣別"] .editor-segment{padding:8px 4px!important;font-size:11px!important}

/* 關聯行程／預訂：精簡成一個小區塊 */
[data-budget-field="關聯預訂"] .relation-picker{padding:10px 11px!important}
[data-budget-field="關聯預訂"] .relation-hint,
[data-budget-field="關聯預訂"] .relation-note{
  font-size:10.5px!important;line-height:1.45!important;margin-top:5px!important;
}
[data-budget-field="關聯預訂"] .relation-search{min-height:38px!important;font-size:13px!important}
[data-budget-field="關聯預訂"] label{margin-bottom:4px!important}

/* 關聯 ID 是給系統看的，不需要跟一般欄位一樣顯眼 */
[data-budget-field="關聯預約ID"] label,
[data-budget-field="關聯行程ID"] label{font-size:10px!important;opacity:.75}
[data-budget-field="關聯預約ID"] input,
[data-budget-field="關聯行程ID"] input{
  font-size:11.5px!important;font-family:var(--bp-mono,ui-monospace,monospace)!important;
  min-height:36px!important;padding:7px 9px!important;opacity:.8;
}

@media(max-width:360px){
  .editor-sheet-body [data-budget-field="金額"],
  .editor-sheet-body [data-budget-field="幣別"],
  .editor-sheet-body [data-budget-field="關聯預約ID"],
  .editor-sheet-body [data-budget-field="關聯行程ID"],
  .generic-sheet [data-budget-field="金額"],
  .generic-sheet [data-budget-field="幣別"],
  .generic-sheet [data-budget-field="關聯預約ID"],
  .generic-sheet [data-budget-field="關聯行程ID"]{float:none;width:100%}
}


/* ============================================================
   ===== V89 關聯欄位縮小 =====
   The block said the same thing three times (search box, hint line, preview
   line), which is why it drew more attention than the amount. ===== */
[data-budget-field="關聯預訂"] .relation-picker{
  padding:9px 10px!important;
  background:rgba(255,255,255,.04)!important;
  border-radius:9px!important;
}
[data-budget-field="關聯預訂"] label{
  font-size:10.5px!important;opacity:.75;margin-bottom:5px!important;
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
}
[data-budget-field="關聯預訂"] .label-hint{
  font-size:9.5px;opacity:.7;font-weight:400;
}
[data-budget-field="關聯預訂"] .relation-search{
  min-height:36px!important;height:36px!important;
  font-size:12.5px!important;padding:7px 30px 7px 10px!important;
}
[data-budget-field="關聯預訂"] .relation-clear{
  width:26px!important;height:26px!important;min-height:26px!important;
}
/* preview collapses entirely when nothing is linked */
[data-budget-field="關聯預訂"] .booking-link-preview{
  display:none!important;
}
[data-budget-field="關聯預訂"] .booking-link-preview.has-link{
  display:block!important;
  margin-top:5px!important;font-size:10px!important;opacity:.7;
}
[data-budget-field="關聯預訂"] .field-hint{display:none!important}
/* the picker panel itself can stay compact too */
[data-budget-field="關聯預訂"] .relation-filter-row button{
  padding:5px 9px!important;font-size:11px!important;min-height:30px!important;
}
[data-budget-field="關聯預訂"] .relation-results{max-height:190px!important}


/* ============================================================
   ===== V90 景點與預約表單：欄位並排 =====
   Pairs are laid out with the generic data-field hook, so no form markup
   changes and the stored column order stays as-is. ===== */
.editor-field-wrap[data-form="attractions"][data-field="日期"],
.editor-field-wrap[data-form="attractions"][data-field="經度"],
.editor-field-wrap[data-form="reservations"][data-field="預約名稱"],
.editor-field-wrap[data-form="reservations"][data-field="報到時間"],
.editor-field-wrap[data-form="reservations"][data-field="金額"],
.editor-field-wrap[data-form="reservations"][data-field="使用開始日期"],
.editor-field-wrap[data-form="reservations"][data-field="使用結束日期"]{
  float:left;width:calc(50% - 5px);clear:left;
}
.editor-field-wrap[data-form="attractions"][data-field="時間"],
.editor-field-wrap[data-form="attractions"][data-field="緯度"],
.editor-field-wrap[data-form="reservations"][data-field="預約類型"],
.editor-field-wrap[data-form="reservations"][data-field="地點"],
.editor-field-wrap[data-form="reservations"][data-field="幣別"],
.editor-field-wrap[data-form="reservations"][data-field="使用開始時間"],
.editor-field-wrap[data-form="reservations"][data-field="使用結束時間"]{
  float:right;width:calc(50% - 5px);
}
/* 金額稍寬一點，幣別按鈕才排得下 */
.editor-field-wrap[data-form="reservations"][data-field="金額"]{width:calc(52% - 5px)}
.editor-field-wrap[data-form="reservations"][data-field="幣別"]{width:calc(48% - 5px)}
[data-form="reservations"][data-field="幣別"] .editor-segment{padding:8px 4px!important;font-size:11px!important}

/* stop floats bleeding into the fields that follow each pair */
.editor-field-wrap[data-form="attractions"][data-field="景點名稱"],
.editor-field-wrap[data-form="attractions"][data-field="類型"],
.editor-field-wrap[data-form="attractions"][data-field="行程順序"],
.editor-field-wrap[data-form="reservations"][data-field="Google Maps 連結"],
.editor-field-wrap[data-form="reservations"][data-field="預約狀態"],
.editor-field-wrap[data-form="reservations"][data-field="取消期限"],
.editor-field-wrap[data-form="reservations"][data-field="票券／憑證連結"],
.editor-sheet-body .save,.generic-sheet .save{clear:both}

/* 經緯度是系統欄位，不需要跟一般欄位一樣顯眼 */
[data-form="attractions"][data-field="經度"] label,
[data-form="attractions"][data-field="緯度"] label,
[data-form="attractions"][data-field="行程順序"] label{font-size:10px!important;opacity:.75}
[data-form="attractions"][data-field="經度"] input,
[data-form="attractions"][data-field="緯度"] input,
[data-form="attractions"][data-field="行程順序"] input{
  font-size:11.5px!important;font-family:var(--bp-mono,ui-monospace,monospace)!important;
  min-height:36px!important;padding:7px 9px!important;opacity:.85;
}

@media(max-width:360px){
  .editor-field-wrap[data-form="attractions"],
  .editor-field-wrap[data-form="reservations"]{float:none!important;width:100%!important}
}


/* ============================================================
   ===== V91 類型改為可複選 =====
   ============================================================ */
.editor-segmented.multi .editor-segment.active::before{
  content:"✓ ";font-size:11px;
}
.event-type-extra{
  display:inline-block;margin-left:5px;
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;
  border:1px solid var(--bp-line,#D8D0BC);color:#555044;
}

/* ============================================================
   ===== V92 選項按鈕平衡排列 =====
   Row sizes come from balancedOptionRows (max 4 per row, distributed as
   evenly as possible): 5→3+2, 7→4+3, 9→3+3+3. Each row is its own grid so
   every row stretches to the full width regardless of how many it holds. */
.editor-segmented{
  display:flex!important;flex-direction:column!important;
  gap:7px!important;grid-template-columns:none!important;
}
.editor-segment-row{
  display:grid!important;
  grid-template-columns:repeat(var(--row-cols,1),minmax(0,1fr))!important;
  gap:7px!important;width:100%!important;min-width:0!important;
}
.editor-segment-row .editor-segment{
  width:100%!important;min-width:0!important;
  padding:9px 7px!important;font-size:12.5px!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 流式排列：選項長度不可預期時（城市名）用這個。每一顆寬度依內容，排不下換行，
   文字本身也可以折行 —— 等寬格線 + nowrap + ellipsis 會把長名字切掉。 */
.editor-segmented.flow .editor-segment-row{
  display:flex!important;flex-wrap:wrap!important;
  grid-template-columns:none!important;gap:7px!important;
}
.editor-segmented.flow .editor-segment{
  width:auto!important;flex:0 1 auto!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  padding:9px 12px!important;font-size:12.5px!important;text-align:left!important;
  overflow-wrap:anywhere;
}
/* tighter type as a row gets busier, so labels still fit */
.editor-segment-row[style*="--row-cols:3"] .editor-segment{padding:9px 5px!important;font-size:12px!important}
.editor-segment-row[style*="--row-cols:4"] .editor-segment{padding:9px 3px!important;font-size:11px!important}
@media(max-width:390px){
  .editor-segment-row[style*="--row-cols:3"] .editor-segment{font-size:11.5px!important}
  .editor-segment-row[style*="--row-cols:4"] .editor-segment{font-size:10.5px!important}
}


/* ============================================================
   ===== V93 交通與住宿表單：欄位並排 =====
   ============================================================ */
.editor-field-wrap[data-form="transport"][data-field="出發地"],
.editor-field-wrap[data-form="transport"][data-field="班次／車次"],
.editor-field-wrap[data-form="transport"][data-field="出發時間"],
.editor-field-wrap[data-form="lodging"][data-field="Check-in 日期"],
.editor-field-wrap[data-form="lodging"][data-field="Check-out 日期"],
.editor-field-wrap[data-form="lodging"][data-field="經度"]{
  float:left;width:calc(50% - 5px);clear:left;
}
.editor-field-wrap[data-form="transport"][data-field="目的地"],
.editor-field-wrap[data-form="transport"][data-field="訂位編號"],
.editor-field-wrap[data-form="transport"][data-field="抵達時間"],
.editor-field-wrap[data-form="lodging"][data-field="Check-in 時間"],
.editor-field-wrap[data-form="lodging"][data-field="Check-out 時間"],
.editor-field-wrap[data-form="lodging"][data-field="緯度"]{
  float:right;width:calc(50% - 5px);
}
/* clear each pair so the next field starts on its own line */
.editor-field-wrap[data-form="transport"][data-field="連結"],
.editor-field-wrap[data-form="transport"][data-field="備註"],
.editor-field-wrap[data-form="transport"][data-field="行程順序"],
.editor-field-wrap[data-form="lodging"][data-field="地址"],
.editor-field-wrap[data-form="lodging"][data-field="備註"],
.editor-field-wrap[data-form="lodging"][data-field="行程順序"]{clear:both}

/* system fields stay quieter than the ones filled on every record */
[data-form="transport"][data-field="行程順序"] label,
[data-form="lodging"][data-field="行程順序"] label,
[data-form="lodging"][data-field="經度"] label,
[data-form="lodging"][data-field="緯度"] label{font-size:10px!important;opacity:.75}
[data-form="transport"][data-field="行程順序"] input,
[data-form="lodging"][data-field="行程順序"] input,
[data-form="lodging"][data-field="經度"] input,
[data-form="lodging"][data-field="緯度"] input{
  font-size:11.5px!important;font-family:var(--bp-mono,ui-monospace,monospace)!important;
  min-height:36px!important;padding:7px 9px!important;opacity:.85;
}

@media(max-width:360px){
  .editor-field-wrap[data-form="transport"],
  .editor-field-wrap[data-form="lodging"]{float:none!important;width:100%!important}
}


/* ============================================================
   ===== V94 間距與標籤修正 =====
   ============================================================ */

/* --- 1. 表單欄位間距：並排欄位用 float，垂直間距被壓掉了 --- */
.editor-field-wrap{margin-bottom:14px!important}
.editor-sheet-body label,.generic-sheet label{
  display:block;margin-bottom:6px!important;
}
/* float pairs need their own bottom gap since margins don't collapse across them */
.editor-field-wrap[style*="float"],
.editor-field-wrap[data-field]{margin-bottom:14px!important}
.editor-segmented{margin-bottom:2px!important}
.editor-field-wrap .field-hint{margin-top:6px!important;line-height:1.5}

/* --- 4. 分帳：每人餘額與上方標題的間距 --- */
.settle-currency{margin-bottom:18px}
.settle-currency-head{margin-bottom:12px!important}
.settle-section{margin-top:16px!important}
.settle-section+.settle-section{margin-top:18px!important}
.settle-section-title{margin-bottom:10px!important}
.settle-balance-row{padding:11px 0!important}
.settle-approx-row{
  margin:2px 0 10px;font-size:11px;color:#555044;
  font-family:var(--bp-mono,ui-monospace,monospace);
}
.settle-approx{font-weight:700;color:var(--bp-navy,#1B2A4A)}

/* --- 2. 部分結清：金額提示 --- */
.settle-remainder{
  margin:6px 0 10px;font-size:11.5px;color:#555044;
  font-family:var(--bp-mono,ui-monospace,monospace);
}
.settle-remainder.over{color:#8E2F2F;font-weight:700}
.settle-quick{display:flex;gap:8px;margin-bottom:12px}
.settle-quick .rsv-btn{min-height:32px!important;padding:5px 12px!important;font-size:11.5px!important}

/* --- 5. 每日花費：日期標籤被裁掉 ---
   標籤是旋轉 45 度的，外框比字高一截；縱向改成 hidden（只准左右滑）之後，
   下緣的留白不夠就會直接被裁掉。留 32px。 */
.spend-bars{
  height:auto!important;min-height:120px;
  align-items:flex-end!important;padding-bottom:32px!important;
}
.spend-bar-col{
  height:96px!important;width:30px!important;position:relative;
  justify-content:flex-end!important;
}
.spend-bar-label{
  position:absolute;bottom:-22px;left:50%;
  transform:translateX(-50%) rotate(-45deg);transform-origin:center top;
  white-space:nowrap;font-size:9px!important;
}


/* ============================================================
   ===== V98 收藏表單：並排欄位與營業時間編輯器 =====
   ============================================================ */
.editor-field-wrap[data-form="favorites"][data-field="是否需要預約"],
.editor-field-wrap[data-form="favorites"][data-field="經度"]{
  float:left;width:calc(50% - 5px);clear:left;
}
.editor-field-wrap[data-form="favorites"][data-field="預計停留"],
.editor-field-wrap[data-form="favorites"][data-field="緯度"]{
  float:right;width:calc(50% - 5px);
}
.editor-field-wrap[data-form="favorites"][data-field="Google Maps 連結"],
.editor-field-wrap[data-form="favorites"][data-field="備註"]{clear:both}
[data-form="favorites"][data-field="經度"] label,
[data-form="favorites"][data-field="緯度"] label{font-size:10px!important;opacity:.75}
[data-form="favorites"][data-field="經度"] input,
[data-form="favorites"][data-field="緯度"] input{
  font-size:11.5px!important;font-family:var(--bp-mono,ui-monospace,monospace)!important;
  min-height:36px!important;padding:7px 9px!important;opacity:.85;
}
@media(max-width:360px){
  .editor-field-wrap[data-form="favorites"]{float:none!important;width:100%!important}
}

/* 營業時間編輯器 */
.hours-editor{display:flex;flex-direction:column;gap:9px}
.hours-row{display:flex;align-items:center;gap:7px}
.hours-row>span{flex:0 0 auto;opacity:.7;font-size:12px}
.hours-day{
  flex:0 0 22px!important;text-align:center;font-weight:800;font-size:12.5px;opacity:.9;
}
.hours-row input[type="time"]{flex:1 1 auto;min-width:0}
.hours-weekly{display:flex;flex-direction:column;gap:7px}
.hours-closed{
  flex:0 0 auto;background:transparent!important;
  border:1px solid var(--bp-line,#D8D0BC)!important;color:#555044!important;
  border-radius:7px!important;padding:5px 9px!important;min-height:34px!important;
  font-size:11px!important;font-weight:700!important;
}
.hours-closed.active{
  background:var(--bp-navy,#1B2A4A)!important;color:var(--bp-cream,#F3EEE0)!important;
  border-color:var(--bp-navy,#1B2A4A)!important;
}
.hours-editor .field-hint{margin-top:2px!important}


/* ============================================================
   ===== V101 現在最該做的事 / 準備度評分 =====
   ============================================================ */
.priority-card{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  text-align:left;margin:0 0 14px;padding:16px 17px!important;
  border-radius:16px!important;border:1.5px solid var(--bp-navy,#1B2A4A)!important;
  background:var(--bp-paper,#FAF7EE)!important;
}
.priority-card.urgent{border-color:#8E2F2F!important;background:#FFF6F5!important}
.priority-card.now{background:var(--bp-navy,#1B2A4A)!important;border-color:var(--bp-navy,#1B2A4A)!important}
.priority-card.wrap{border-style:dashed!important}
.priority-kicker{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#555044;
}
.priority-card.urgent .priority-kicker{color:#8E2F2F}
.priority-card.now .priority-kicker{color:rgba(243,238,224,.7)}
.priority-title{font-size:16px;font-weight:800;line-height:1.45;color:var(--bp-navy,#1B2A4A)}
.priority-card.now .priority-title{color:var(--bp-cream,#F3EEE0)}
.priority-note{font-size:12px;color:#555044;line-height:1.5}
.priority-card.now .priority-note{color:rgba(243,238,224,.72)}
.priority-go{
  margin-top:6px;font-size:12px;font-weight:800;color:var(--bp-navy,#1B2A4A);
}
.priority-card.urgent .priority-go{color:#8E2F2F}
.priority-card.now .priority-go{color:var(--bp-gold,#B8923F)}

.readiness{
  background:var(--bp-paper,#FAF7EE);border:1.5px solid var(--bp-line,#D8D0BC);
  border-radius:16px;padding:14px 15px;margin-bottom:16px;
}
.readiness-head{
  width:100%;display:flex;align-items:center;gap:13px;text-align:left;
  background:transparent!important;border:0!important;padding:0!important;min-height:0!important;
}
.readiness-score{
  flex:0 0 auto;font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:28px;font-weight:800;color:var(--bp-navy,#1B2A4A);line-height:1;
}
.readiness-score small{font-size:13px;margin-left:1px}
.readiness-label{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.readiness-label b{font-size:13.5px;color:var(--bp-navy,#1B2A4A)}
.readiness-label small{font-size:11px;color:#555044}
.readiness-go{flex:0 0 auto;font-size:19px;color:#555044}
.readiness-bars{display:flex;flex-direction:column;gap:7px;margin-top:13px}
.readiness-bar-row{
  width:100%;display:flex;align-items:center;gap:9px;
  background:transparent!important;border:0!important;padding:3px 0!important;min-height:0!important;
}
.readiness-bar-label{flex:0 0 72px;font-size:11.5px;color:#555044;text-align:left}
.readiness-bar{
  flex:1 1 auto;height:7px;border-radius:4px;
  background:var(--bp-cream,#F3EEE0);overflow:hidden;min-width:0;
}
.readiness-bar i{display:block;height:100%;background:var(--bp-navy,#1B2A4A);border-radius:4px}
.readiness-bar i.full{background:#2E6B52}
.readiness-bar-num{
  flex:0 0 auto;font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:10.5px;color:#555044;min-width:38px;text-align:right;
}




/* ============================================================
   ===== V92 出發前首頁：行動、健檢、狀況、行程四層 =====
   ============================================================ */
.prehome-section{margin-top:27px}
.prehome-last{padding-bottom:10px}
.prehome-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:11px}
.prehome-head>div{min-width:0}
.prehome-head span{display:block;font-family:var(--bp-mono,ui-monospace,monospace);font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--bp-gold,#B8923F)}
.prehome-head h2{margin:3px 0 0;font-size:21px;line-height:1.15;color:var(--bp-navy,#1B2A4A)}
.prehome-head button{border:0;background:transparent;color:#555044;font-size:11.5px;font-weight:800;padding:4px 0}

.prehome-primary{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;text-align:left;
  border:1.5px solid var(--bp-navy,#1B2A4A)!important;border-radius:16px!important;background:var(--bp-paper,#FAF7EE)!important;
  padding:16px 17px!important;color:var(--bp-navy,#1B2A4A)!important;box-shadow:none!important;position:relative;overflow:hidden}
.prehome-primary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bp-gold,#B8923F)}
.prehome-primary.overdue::before,.prehome-primary.soon::before{background:#8E2F2F}
.prehome-primary-label{grid-column:1/-1;font-family:var(--bp-mono,ui-monospace,monospace);font-size:10px!important;font-weight:800!important;color:#7D6020!important;letter-spacing:.04em}
.prehome-primary.overdue .prehome-primary-label,.prehome-primary.soon .prehome-primary-label{color:#8E2F2F!important}
.prehome-primary strong{grid-column:1/-1;font-size:17px;line-height:1.4}
.prehome-primary-dates{font-family:var(--bp-mono,ui-monospace,monospace);font-size:11px!important;color:#555044!important;letter-spacing:0!important}
.prehome-primary-note{grid-column:1/-1;font-size:11.5px!important;color:#6B655A!important;line-height:1.55;letter-spacing:0!important}
.prehome-primary-go{align-self:end;font-size:11.5px!important;font-weight:800!important;color:var(--bp-navy,#1B2A4A)!important;letter-spacing:0!important;white-space:nowrap}
.prehome-clear{padding:14px 16px;border:1px solid var(--bp-line,#D8D0BC);border-radius:14px;background:rgba(250,247,238,.66);display:flex;flex-direction:column;gap:3px}
.prehome-clear b{font-size:13.5px;color:var(--bp-navy,#1B2A4A)}
.prehome-clear span{font-size:11.5px;color:#6B655A;line-height:1.5}
.prehome-clear.compact{padding:12px 14px}

.prehome-task-list{border-top:1.5px solid var(--bp-navy,#1B2A4A);border-bottom:1.5px solid var(--bp-navy,#1B2A4A)}
.prehome-task-row{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto 16px;align-items:center;gap:9px;text-align:left;
  background:transparent!important;border:0!important;border-top:1px solid var(--bp-line,#D8D0BC)!important;padding:13px 4px!important;color:var(--bp-navy,#1B2A4A)!important}
.prehome-task-row:first-child{border-top:0!important}
.prehome-task-index{font-family:var(--bp-mono,ui-monospace,monospace);font-size:11px;color:var(--bp-gold,#B8923F);font-weight:800}
.prehome-task-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.prehome-task-main b{font-size:14.5px;line-height:1.35}
.prehome-task-main small{font-family:var(--bp-mono,ui-monospace,monospace);font-size:10.5px;color:#6B655A;line-height:1.4}
.prehome-task-state{font-size:10px!important;font-weight:800!important;white-space:nowrap;padding:4px 7px;border-radius:999px;background:var(--bp-cream,#F3EEE0);color:#555044!important;letter-spacing:0!important}
.prehome-task-state.overdue,.prehome-task-state.soon{color:#8E2F2F!important;background:#F4E6E1}
.prehome-task-state.future{color:#6B655A!important}
.prehome-task-arrow{font-size:20px;color:var(--bp-navy,#1B2A4A)}

.prehome-health-box{border-top:1.5px solid var(--bp-navy,#1B2A4A);border-bottom:1.5px solid var(--bp-navy,#1B2A4A)}
.prehome-health-group+.prehome-health-group{border-top:1px dashed var(--bp-line,#D8D0BC);padding-top:11px;margin-top:3px}
.prehome-health-group-title{font-family:var(--bp-mono,ui-monospace,monospace);font-size:10px;font-weight:800;letter-spacing:.06em;color:#6B655A;padding:10px 4px 5px}
.prehome-health-row{width:100%;display:grid;grid-template-columns:27px minmax(0,1fr) auto;align-items:center;gap:9px;text-align:left;background:transparent!important;border:0!important;padding:10px 4px!important;color:var(--bp-navy,#1B2A4A)!important}
.prehome-health-mark{width:22px;height:22px;border-radius:50%;display:grid!important;place-items:center;font-family:var(--bp-mono,ui-monospace,monospace)!important;font-size:10px!important;font-weight:900!important;letter-spacing:0!important;background:var(--bp-cream,#F3EEE0);color:#555044!important}
.prehome-health-row.urgent .prehome-health-mark,.prehome-health-row.warn .prehome-health-mark{background:#F4E6E1;color:#8E2F2F!important}
.prehome-health-main{min-width:0;display:flex!important;flex-direction:column;gap:2px}
.prehome-health-main b{font-size:13.5px;line-height:1.4}
.prehome-health-main small{font-size:10.8px;color:#6B655A;line-height:1.45}
.prehome-health-action{font-size:10.5px!important;font-weight:800!important;color:#6B655A!important;white-space:nowrap;letter-spacing:0!important}
.prehome-health-more{width:100%;border:0!important;border-top:1px solid var(--bp-line,#D8D0BC)!important;background:transparent!important;padding:11px 4px!important;text-align:left;color:#555044!important;font-size:11.5px!important;font-weight:800!important}
.prehome-health-ok{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--bp-line,#D8D0BC);border-radius:14px;padding:13px 14px;background:rgba(250,247,238,.66)}
.prehome-health-ok>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#E5EFE8;color:#2E6B52;font-weight:900}
.prehome-health-ok div{display:flex;flex-direction:column;gap:3px}
.prehome-health-ok b{font-size:13.5px;color:var(--bp-navy,#1B2A4A)}
.prehome-health-ok small{font-size:11px;line-height:1.45;color:#6B655A}

.prehome-status-list{border-top:1.5px solid var(--bp-navy,#1B2A4A);border-bottom:1.5px solid var(--bp-navy,#1B2A4A)}
.prehome-status-row{width:100%;display:grid;grid-template-columns:minmax(86px,auto) minmax(0,1fr) auto 18px;align-items:center;gap:9px;text-align:left;
  background:transparent!important;border:0!important;border-top:1px solid var(--bp-line,#D8D0BC)!important;padding:12px 4px!important;color:var(--bp-navy,#1B2A4A)!important}
.prehome-status-row:first-child{border-top:0!important}
.prehome-status-label{font-size:13.5px!important;font-weight:800!important;letter-spacing:0!important}
.prehome-status-note{font-size:10.5px!important;color:#8E2F2F!important;letter-spacing:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prehome-status-row.complete .prehome-status-note{color:#2E6B52!important}
.prehome-status-row b{font-family:var(--bp-mono,ui-monospace,monospace);font-size:12px;white-space:nowrap}
.prehome-status-arrow{font-size:17px!important;color:#555044!important;letter-spacing:0!important;text-align:right}
.prehome-status-row.complete .prehome-status-arrow{color:#2E6B52!important;font-size:13px!important;font-weight:900}

.pending-expense-pay-btn{width:112px!important;min-width:112px!important;max-width:112px!important;height:38px!important;min-height:38px!important;padding:0 10px!important;justify-content:center!important;white-space:nowrap!important;flex:0 0 112px!important;line-height:1!important}

@media(max-width:390px){
 .prehome-section{margin-top:24px}
 .prehome-head h2{font-size:20px}
 .prehome-primary{padding:15px 15px!important}
 .prehome-task-row{grid-template-columns:29px minmax(0,1fr) 15px}
 .prehome-task-state{grid-column:2;justify-self:start;margin-top:2px}
 .prehome-task-arrow{grid-column:3;grid-row:1/3}
 .prehome-status-row{grid-template-columns:76px minmax(0,1fr) auto 16px;gap:7px}
 .prehome-status-note{font-size:10px!important}
 .pending-expense-pay-btn{width:104px!important;min-width:104px!important;max-width:104px!important;flex-basis:104px!important;font-size:11.5px!important}
}



/* ============================================================
   ===== V92 Reservation cleanup: one booking, one language ===== */
.journey-action-btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:38px!important;height:38px!important;padding:0 13px!important;
  border-radius:10px!important;border:1.5px solid var(--bp-navy,#1B2A4A)!important;
  font-size:12px!important;font-weight:800!important;line-height:1!important;
  text-decoration:none!important;white-space:nowrap!important;box-sizing:border-box!important;
}
.journey-action-btn.primary{background:var(--bp-navy,#1B2A4A)!important;color:var(--bp-paper,#FAF7EE)!important}
.journey-action-btn.secondary{background:transparent!important;color:var(--bp-navy,#1B2A4A)!important}
.rsv-detail-actions{align-items:center!important}
.rsv-detail-actions .map-icon,.rsv-card-actions .map-icon{
  width:38px!important;height:38px!important;border-radius:10px!important;flex:0 0 38px!important;
}
.rsv-detail-actions .map-icon svg,.rsv-card-actions .map-icon svg{width:18px!important;height:18px!important}
.rsv-info-grid{display:grid;gap:0;margin-top:10px;border-top:1px dashed var(--bp-line,#D8D0BC)}
.rsv-info-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px dashed var(--bp-line,#D8D0BC);text-align:left}
.rsv-info-row span{font-size:10.5px;color:#777064;font-weight:650}
.rsv-info-row b{font-size:11.5px;color:var(--bp-navy,#1B2A4A);font-weight:750;overflow-wrap:anywhere}
.rsv-detail .rsv-info-grid{margin-top:12px}
.rsv-detail-note{margin-top:11px;padding:10px 11px;border-radius:9px;background:var(--bp-cream,#F3EEE0);font-size:12px;line-height:1.55;color:#555044;white-space:pre-wrap}
.rsv-card.cancelled{opacity:.58}
.reservation-expense-row{align-items:center}
.pending-expense-pay-btn{min-width:112px!important;flex:0 0 auto!important}
@media(max-width:390px){
 .rsv-linked-row.reservation-expense-row{align-items:flex-start}
 .pending-expense-pay-btn{min-width:104px!important;padding-inline:10px!important}
}

/* ============================================================
   V93 — Reservation / pending-expense follow-up
   ============================================================ */
.editor-sheet-body .budget-exchange-field,
.generic-sheet .budget-exchange-field{
  float:none!important;
  clear:both!important;
  width:100%!important;
  max-width:none!important;
}
.budget-rate-summary{width:100%!important;box-sizing:border-box!important}
.budget-rate-summary-main{flex:1 1 auto!important}
.budget-rate-edit-btn{min-width:64px!important;flex:0 0 64px!important}

.rsv-card-title-button{width:100%!important}
.rsv-card-meta-row{
  display:flex;align-items:center;gap:9px;margin-top:4px;min-width:0;
}
.rsv-card-meta-button{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:7px;
  border:0!important;background:transparent!important;padding:0!important;
  color:inherit!important;text-align:left!important;min-height:38px!important;
}
.rsv-card-meta-sep{font-family:var(--bp-mono,ui-monospace,monospace);font-size:11px;color:#777064}
.rsv-card-meta-row .rsv-card-place{
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rsv-card-map{margin-left:auto!important}
.rsv-card-info-button{margin-top:0!important}
.rsv-card-info-button:empty{display:none!important}
.rsv-card-info-button .rsv-info-grid{width:100%!important}

/* ============================================================
   ===== V94 Modal layout: fixed header + breathing room =====
   ============================================================ */
.editor-sheet-body{padding-top:18px!important}
.generic-sheet{
  grid-template-rows:auto minmax(0,1fr)!important;
  overflow:hidden!important;
}
.generic-sheet-head-slot{
  position:relative;
  z-index:60;
  background:var(--surface);
}
.generic-sheet-head-slot:empty{display:none}
.generic-sheet-head-slot .sheet-head{
  position:relative!important;
  top:auto!important;
  z-index:61!important;
  margin:0!important;
  padding:16px 18px 13px!important;
  background:var(--surface)!important;
  border-bottom:1px solid var(--line)!important;
}
.generic-sheet .editor-sheet-body{
  padding:18px 18px 24px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
.generic-sheet .search-sheet-body{padding-top:18px!important}
@media(max-width:420px){
  .editor-sheet-body{padding-top:16px!important}
  .generic-sheet-head-slot .sheet-head{padding:14px 15px 12px!important}
  .generic-sheet .editor-sheet-body{padding:16px 15px 22px!important}
}


/* ============================================================
   ===== V96 Shared related-item component =====
   ============================================================ */
.related-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  color:var(--text);
}
.related-item + .related-item{margin-top:8px}
.related-item-copy{min-width:0;display:grid;gap:3px}
.related-item-kind{
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  color:var(--muted);
}
.related-item-title{
  font-size:14px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.related-item-meta{
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}
.related-item-action{
  border:0;
  background:transparent;
  color:var(--primaryDeep);
  padding:8px 2px 8px 10px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.related-pending{border-color:#D8CBAA}
.related-item-inline-action{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}
.related-item-inline-action .pending-expense-pay-btn{
  min-height:36px!important;
  height:36px!important;
  width:auto!important;
  padding:0 13px!important;
}
.event-related-stack{
  display:grid;
  gap:7px;
  margin-top:11px;
}
.event-related-stack .related-item{
  padding:10px 11px;
  border-radius:11px;
  background:rgba(255,255,255,.34);
}
.event-related-stack .related-item-title{font-size:12px}
.event-related-stack .related-item-meta{font-size:10px}
.event-related-stack .related-item-action{font-size:10px}
.route-item.related-focus .route-card{
  border-color:var(--bp-gold,#C7A04D)!important;
  box-shadow:0 0 0 3px rgba(199,160,77,.20)!important;
  background:#FFF9E9!important;
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;
}
@media(max-width:420px){
 .related-item{gap:9px;padding:12px}
 .related-item-action{padding-left:5px}
}

/* ============================================================
   ===== V97 行程卡片：只提醒有預約／支出，不重述內容 =====
   ============================================================ */
.event-related-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}
.event-related-chip{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:4px 10px!important;
  border:1px solid var(--bp-line,#D8D0BC)!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#4A5A78!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.event-related-chip.pending{
  border-color:#C7A04D!important;
  color:#7D6020!important;
}
.event-related-chip:active{background:var(--bp-cream,#F3EEE0)!important}
.event-related-chip{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:420px){
  .event-related-chip{max-width:calc(100% - 2px)!important}
}

/* ============================================================
   ===== V98 住宿列：名稱用滿整行；預約明細動作列對齊 =====
   ============================================================ */
/* 今日退房／續住原本是一整行的 flex，名稱只能分到扣掉「12:00 退房 詳情」
   之後剩下的寬度，長飯店名就被擠成四行，右上角卻是空的。改成兩列：名稱那一
   列一路用到右邊界，時間與詳情移到下一列靠右，兩邊都不再互相壓縮。 */
.stay-strip-row,
.stay-overnight-row:not(.stay-overnight-grid){
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:start!important;
  gap:6px!important;
}
.stay-strip-main{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  width:100%!important;
}
.stay-strip-name{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}
.stay-strip-side{
  justify-content:flex-end!important;
  align-self:end!important;
  flex:0 0 auto!important;
}
@media(max-width:640px){
  .stay-strip-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    flex-direction:unset!important;
  }
  .stay-strip-side{justify-content:flex-end!important;align-self:end!important}
}

/* 預約明細的動作列：文字按鈕與地圖圖示同高同圓角，編輯也帶上跟站上其他
   編輯入口一樣的筆圖示。 */
.rsv-detail-actions{align-items:center!important;gap:8px!important}
.rsv-detail-actions .journey-action-btn{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:40px!important;
  padding:8px 14px!important;
  border-radius:11px!important;
}
.rsv-detail-actions .journey-action-btn svg{width:15px!important;height:15px!important}
.rsv-detail-actions .map-icon{
  width:40px!important;height:40px!important;
  min-width:40px!important;min-height:40px!important;
  border-radius:11px!important;
}

/* ============================================================
   ===== V99 編輯入口統一：同一支鉛筆、同一個尺寸 =====
   「編輯」原本有三種長相（•••、✎、文字按鈕），大小也各自為政（28／32／40px）。
   同一個動作長成三個樣子，等於每換一個畫面就要重新找一次。這裡把整個圖示按鈕
   家族釘在同一組尺寸上，鉛筆本身則由 editSvg 統一。
   ============================================================ */
.icon-edit,
.icon-delete,
.compact-btn,
.map-icon,
.favorite-row-actions .icon-edit,
.favorite-row-actions a,
.stay-entry-actions .map-icon,
.stay-entry-actions .icon-edit,
.transport-overview-actions .icon-edit,
.transport-overview-actions .map-icon{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  padding:0!important;
  border-radius:8px!important;
  display:inline-grid!important;
  place-items:center!important;
}
.icon-edit svg,
.icon-delete svg,
.compact-btn svg,
.map-icon svg,
.favorite-row-actions .icon-edit svg,
.favorite-row-actions a svg{
  width:14px!important;
  height:14px!important;
}
/* 明細頁的「編輯預約」是有文字的動作，維持按鈕外型，但用同一支鉛筆。 */
.rsv-detail-actions .journey-action-btn.rsv-detail-edit svg{width:15px!important;height:15px!important}

/* ============================================================
   ===== V99 營業時間：把七列同時攤開的元凶修掉，並加上快速填法 =====
   .hours-weekly{display:flex} 的優先權高過瀏覽器對 [hidden] 的 display:none，
   所以「每日相同」明明是選取狀態，底下七列還是全部攤開 —— 表單看起來要填
   十六個欄位，難填的其實是這個，不是時間本身。
   ============================================================ */
.hours-editor [hidden]{display:none!important}
.hours-presets,
.hours-weekly-tools{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.hours-preset{
  min-height:30px!important;
  padding:5px 10px!important;
  border:1px solid rgba(243,238,224,.34)!important;
  border-radius:999px!important;
  background:transparent!important;
  color:rgba(243,238,224,.86)!important;
  font-size:11.5px!important;
  font-weight:740!important;
  white-space:nowrap!important;
}
.hours-preset:active{background:rgba(255,255,255,.08)!important}
.hours-text .hours-raw{
  width:100%!important;
  min-height:72px!important;
  margin-top:2px!important;
}
.hours-weekly{gap:7px}
.hours-row .hours-open,
.hours-row .hours-close{min-width:0!important}

/* ===== V23.1 營業時間：把一天壓回一行 =====
   時段直接接在同一行後面，＋／× 用小圖示而不是文字按鈕，滿三段時 ＋ 直接消失。
   欄位高度在這個密集表格裡改用 38px，七天才不會長到看不完。 */
.hours-editor .hours-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}
.hours-editor .hours-segments{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  flex:1 1 auto!important;
  min-width:0!important;
}
.hours-editor .hours-segment{
  /* 固定五欄，同一天的每一行時段才會左右對齊；用 flex 時最後一行多一顆 ＋，
     其餘行的欄位就會多分到那格寬度，兩行看起來像各自為政。 */
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 30px 30px!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
}
.hours-seg-btn.is-placeholder{
  visibility:hidden!important;
  pointer-events:none!important;
}
/* 公休的選取狀態原本是深藍底＋米色字，但編輯區本身就是深藍，看起來像沒有
   按鈕的一段文字。改用金色，在深底上才看得出「這天已經標成公休」。 */
.hours-editor .hours-closed.active{
  background:var(--bp-gold,#B8923F)!important;
  border-color:var(--bp-gold,#B8923F)!important;
  color:#1B2A4A!important;
  font-weight:800!important;
}
.hours-row.is-closed .hours-segments{opacity:.35!important}
.hours-row.is-closed input[type="time"],
.hours-row.is-closed .hours-seg-btn{
  pointer-events:none!important;
}

/* ===== 行程健檢／關聯列：按鈕不要因為字數忽大忽小 ===== */
.rsv-linked-row{align-items:center!important;gap:10px!important}

/* 區塊底下的一句說明：解釋「為什麼這些東西會出現在這裡」 */
.rsv-section-hint{
  margin:-2px 0 10px;font-size:11.5px;line-height:1.6;color:var(--bp-muted,#7A7566);
}

/* ===== 記錄今日：心情與體力 =====
   四顆一模一樣的文字按鈕看不出程度差別，選哪個都像在填表。改成看得出高低的
   刻度：心情是一張臉，體力是電量格數。存回 Sheet 的值完全沒變。 */
/* ===== 心情與體力：緊湊的評分列 =====
   一整排愛心／電池就是控制項，點一下或橫向拖過去即可。先前用「大色塊 + 滑桿 +
   刻度標籤」三層，一個指標就佔掉半個畫面；這裡壓成一列。 */
.checkin-rates{display:flex;flex-direction:column;gap:8px}
.checkin-rate{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:12px;
  border:1.5px solid var(--bp-line,#D8D0BC);
  background:var(--tone-soft,#F1EEE4);
  --tone:#7A7566;--tone-text:#555044;--tone-soft:#F1EEE4;
}
.checkin-rate.tone-great{--tone:#3F8F6F;--tone-text:#2F6B53;--tone-soft:#E4F1EA}
.checkin-rate.tone-good {--tone:#5B8ABF;--tone-text:#3D628C;--tone-soft:#E6EEF7}
.checkin-rate.tone-okay {--tone:#B8923F;--tone-text:#7D6020;--tone-soft:#F6EEDC}
.checkin-rate.tone-tired{--tone:#C0763C;--tone-text:#8C5227;--tone-soft:#F8E9DC}
.checkin-rate.tone-low  {--tone:#A6524F;--tone-text:#8A3E3B;--tone-soft:#F6E3E2}
.checkin-rate.is-empty{background:transparent}
.checkin-rate-label{
  flex:0 0 auto;width:34px;
  font-size:12.5px;font-weight:800;color:var(--bp-navy,#1B2A4A);
}
/* 只包住圖形本身，不要撐滿整列 —— 可點區域是疊在這上面的，撐滿的話點在圖形
   右邊一大片空白也會被算成 5 分。分數靠 .checkin-rate-value 的 margin 推到右邊。 */
.checkin-rate-icons{
  flex:0 0 auto;display:flex;align-items:center;
  padding:4px 0;
}
.checkin-rate-value{
  flex:0 0 auto;min-width:36px;margin-left:auto;text-align:right;
  font-size:12px;font-weight:750;color:var(--tone-text);
}
.checkin-rate.is-empty .checkin-rate-value{color:var(--bp-muted,#7A7566);font-weight:700}
.checkin-clear{
  flex:0 0 auto;background:transparent!important;border:0!important;
  color:var(--bp-muted,#7A7566)!important;
  font-size:16px!important;line-height:1!important;
  padding:2px 4px!important;min-height:0!important;
}

/* 愛心與電池：填滿的格數＝等級 */
.rate-icons{display:inline-flex;align-items:center;gap:4px}
.rate-icons.hearts svg{
  width:22px;height:22px;flex:0 0 auto;
  fill:none;stroke:var(--tone,#7A7566);stroke-width:1.8;
  opacity:.42;transition:opacity .1s ease;
}
.rate-icons.hearts svg.on{fill:var(--tone,#7A7566);stroke:var(--tone,#7A7566);opacity:1}
.rate-icons.hearts.sm svg{width:13px;height:13px;stroke-width:2.2}

.rate-icons.battery{gap:2px}
.battery-shell{
  display:inline-flex;align-items:center;gap:2.5px;
  padding:3px;border:2px solid var(--tone,#7A7566);border-radius:4px;
}
.battery-shell i{
  display:block;width:6px;height:14px;border-radius:1px;
  background:var(--tone,#7A7566);opacity:.22;
}
.battery-shell i.on{opacity:1}
.battery-tip{
  display:block;width:3px;height:8px;border-radius:0 2px 2px 0;
  background:var(--tone,#7A7566);
}
.rate-icons.battery.sm .battery-shell{padding:2px;gap:1.5px;border-width:1.5px}
.rate-icons.battery.sm .battery-shell i{width:3px;height:8px}
.rate-icons.battery.sm .battery-tip{width:2px;height:5px}

/* 摘要標籤裡的圖示跟著標籤的字色走 */
.day-note-tag .rate-icons{margin-right:5px}
.day-note-tag.mood-great .rate-icons,.day-note-tag.energy-great .rate-icons{--tone:#2F6B53}
.day-note-tag.mood-good  .rate-icons,.day-note-tag.energy-good  .rate-icons{--tone:#3D628C}
.day-note-tag.mood-okay  .rate-icons,.day-note-tag.energy-okay  .rate-icons{--tone:#7D6020}
.day-note-tag.mood-tired .rate-icons,.day-note-tag.energy-tired .rate-icons{--tone:#8C5227}
.day-note-tag.mood-low   .rate-icons,.day-note-tag.energy-low   .rate-icons{--tone:#8A3E3B}

.checkin-body{display:flex;flex-direction:column;gap:20px;padding:4px 0 8px}
.checkin-block{display:flex;flex-direction:column;gap:10px}
.checkin-label{font-size:13.5px;font-weight:800;color:var(--bp-navy,#1B2A4A)}
.checkin-scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.checkin-option{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:12px 4px;min-height:78px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:14px;
  background:var(--bp-paper,#FAF7EE);color:var(--bp-navy,#1B2A4A);
  transition:border-color .12s ease,background .12s ease,transform .12s ease;
}
.checkin-option:active{transform:scale(.96)}
.checkin-option.active{
  border-color:var(--bp-navy,#1B2A4A);
  background:var(--bp-cream,#F3EEE0);
  box-shadow:inset 0 0 0 1px var(--bp-navy,#1B2A4A);
}
.checkin-face{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:15px;line-height:1;letter-spacing:-.02em;white-space:nowrap;
}

/* ===== 心情與體力的配色 =====
   四個一模一樣的方框看不出程度差別。由暖到冷各給一個色，未選時是淡淡的底，
   選中時整塊上色。存回去的值完全沒變，只是看起來分得出來。

   --tone 是選中時的填色，--tone-text 是未選中時的文字色，兩者必須分開：
   同一個飽和度的黃或橘拿來當填色很好看，當文字放在淡底上卻只有 2.5:1。 */
.checkin-option.tone-great,.checkin-option.tone-full{--tone:#3F8F6F;--tone-text:#2F6B53;--tone-soft:#E4F1EA}
.checkin-option.tone-good              {--tone:#5B8ABF;--tone-text:#3D628C;--tone-soft:#E6EEF7}
.checkin-option.tone-okay              {--tone:#B8923F;--tone-text:#7D6020;--tone-soft:#F6EEDC}
.checkin-option.tone-tired             {--tone:#C0763C;--tone-text:#8C5227;--tone-soft:#F8E9DC}
.checkin-option.tone-low,.checkin-option.tone-empty{--tone:#A6524F;--tone-text:#8A3E3B;--tone-soft:#F6E3E2}

.checkin-option[class*="tone-"]{
  background:var(--tone-soft);
  border-color:color-mix(in srgb,var(--tone) 34%,transparent);
  color:var(--tone-text);
}
.checkin-option[class*="tone-"] .checkin-face{color:var(--tone-text)}
.checkin-option[class*="tone-"] .checkin-option-label{color:var(--tone-text)}
.checkin-option[class*="tone-"].active{
  background:var(--tone);
  border-color:var(--tone);
  color:#FFFFFF;
  box-shadow:none;
}
.checkin-option[class*="tone-"].active .checkin-option-label,
.checkin-option[class*="tone-"].active .checkin-face{color:#FFFFFF}
.checkin-option[class*="tone-"].active .energy-meter i{background:rgba(255,255,255,.35)}
.checkin-option[class*="tone-"].active .energy-meter i.on{background:#FFFFFF}
.checkin-option[class*="tone-"] .energy-meter i{background:color-mix(in srgb,var(--tone) 22%,transparent)}
.checkin-option[class*="tone-"] .energy-meter i.on{background:var(--tone-text)}

/* 行程頁上的摘要標籤也跟著同一組顏色 */
.day-note-tag.mood-great,.day-note-tag.energy-full{background:#E4F1EA;color:#2F6B53}
.day-note-tag.mood-good                            {background:#E6EEF7;color:#3D628C}
.day-note-tag.mood-okay,.day-note-tag.energy-okay  {background:#F6EEDC;color:#7D6020}
.day-note-tag.energy-tired                         {background:#F8E9DC;color:#8C5227}
.day-note-tag.mood-low,.day-note-tag.energy-empty  {background:#F6E3E2;color:#8A3E3B}
.day-note-tag.mood-great .energy-meter i.on,
.day-note-tag.energy-full .energy-meter i.on{background:#2F6B53}
.day-note-tag.energy-okay .energy-meter i.on{background:#7D6020}
.day-note-tag.energy-tired .energy-meter i.on{background:#8C5227}
.day-note-tag.energy-empty .energy-meter i.on{background:#8A3E3B}
.checkin-option-label{font-size:11.5px;font-weight:750;line-height:1}
/* 電量計：格數越多代表越有電，一眼就分得出高低 */
.energy-meter{display:inline-flex;align-items:flex-end;gap:2.5px;height:16px}
.energy-meter i{
  display:block;width:5px;border-radius:1.5px;
  background:var(--bp-line,#D8D0BC);
}
.energy-meter i:nth-child(1){height:6px}
.energy-meter i:nth-child(2){height:9px}
.energy-meter i:nth-child(3){height:12.5px}
.energy-meter i:nth-child(4){height:16px}
.energy-meter i.on{background:var(--bp-navy,#1B2A4A)}
.checkin-option.active .energy-meter i.on{background:var(--bp-navy,#1B2A4A)}
.day-note-tag .energy-meter{height:12px;margin-right:5px}
.day-note-tag .energy-meter i:nth-child(1){height:4.5px}
.day-note-tag .energy-meter i:nth-child(2){height:7px}
.day-note-tag .energy-meter i:nth-child(3){height:9.5px}
.day-note-tag .energy-meter i:nth-child(4){height:12px}
.day-note-tag{display:inline-flex!important;align-items:center;gap:0}
.day-note-tag .mood-face{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:11px;font-weight:400;margin-right:5px;letter-spacing:-.02em;
}
.checkin-note{margin:0!important}
.checkin-empty-note{font-size:12px;color:var(--bp-muted,#7A7566);line-height:1.6}
.checkin-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ===== 我的每日紀錄：心情與體力曲線 ===== */
.day-log-intro{
  font-size:12.5px;line-height:1.75;color:var(--bp-muted,#7A7566);margin-bottom:14px;
}
/* 行程頁上的今日紀錄：已經記過就只留一行摘要，點一下才展開編輯。
   把整段筆記攤在行程頁上會把行程本身往下推。 */
.day-note-summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;
  padding:11px 13px;margin-bottom:14px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:13px;
  background:var(--bp-paper,#FAF7EE);color:inherit;font:inherit;
}
.day-note-summary:active{background:var(--bp-cream,#F3EEE0)}
.day-note-summary-main{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}
.day-note-summary .day-note-chips{margin-bottom:0;display:flex;flex-wrap:wrap;gap:6px}
.day-note-extra{font-size:11px;color:var(--bp-muted,#7A7566)}
.day-note-summary-go{flex:0 0 auto;color:var(--bp-muted,#7A7566);font-size:18px;line-height:1}
.settings-actions-page{margin:-4px 0 18px}
.day-chart{
  margin-bottom:16px;padding:14px 12px 10px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:14px;
  background:var(--bp-paper,#FAF7EE);
}
.day-chart-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px;padding:0 2px;
}
.day-chart-head>span{font-size:13.5px;font-weight:800;color:var(--bp-navy,#1B2A4A)}
.day-chart-legend{display:flex;gap:12px}
.day-chart-key{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:750;color:var(--bp-muted,#7A7566);
}
.day-chart-key::before{
  content:"";width:14px;height:2.5px;border-radius:2px;
}
.day-chart-key.mood::before{background:var(--bp-navy,#1B2A4A)}
.day-chart-key.energy::before{background:#C99C5D}
.day-chart svg{display:block;width:100%;height:auto}
.day-chart-grid{stroke:var(--bp-line,#D8D0BC);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.day-chart-axis{fill:var(--bp-muted,#7A7566);font-size:9.5px;font-weight:600}
.day-mood-line{fill:none;stroke:var(--bp-navy,#1B2A4A);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.day-mood-dot{fill:var(--bp-navy,#1B2A4A)}
.day-energy-line{fill:none;stroke:#C99C5D;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.day-energy-dot{fill:#C99C5D}

.day-log-row{margin-bottom:8px}
.day-log-main{
  display:flex;flex-direction:column;gap:6px;width:100%;
  padding:13px 14px;text-align:left;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:13px;
  background:var(--bp-paper,#FAF7EE);color:inherit;font:inherit;
}
.day-log-main:active{background:var(--bp-cream,#F3EEE0)}
.day-log-date{font-size:13.5px;font-weight:800;color:var(--bp-navy,#1B2A4A)}
.day-log-chips{display:flex;flex-wrap:wrap;gap:6px}
.day-log-note{font-size:12.5px;line-height:1.7;color:#555044}

/* ===== 選項設定 ===== */
.option-list{display:flex;flex-direction:column;gap:9px}
.option-row-main{
  display:flex;flex-direction:column;gap:7px;width:100%;
  padding:13px 14px;text-align:left;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:13px;
  background:var(--bp-paper,#FAF7EE);color:inherit;font:inherit;
}
.option-row-main:active{background:var(--bp-cream,#F3EEE0)}
.option-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.option-row-head b{font-size:13.5px;color:var(--bp-navy,#1B2A4A)}
.option-row-tag{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:9.5px;font-weight:700;
  color:var(--bp-navy,#1B2A4A);border:1px solid var(--bp-navy,#1B2A4A);
  border-radius:4px;padding:1px 5px;
}
.option-row-values{display:flex;flex-wrap:wrap;gap:5px}
.option-row-values span{
  font-size:11px;font-weight:650;color:#555044;
  background:var(--bp-cream,#F3EEE0);border-radius:999px;padding:3px 9px;
}
.option-row-values span.more{background:transparent;color:var(--bp-muted,#7A7566)}
.option-row-values span.empty{background:transparent;color:var(--bp-muted,#7A7566);padding-left:0}

.option-edit-body{display:flex;flex-direction:column;gap:12px;padding:4px 0 8px}
.option-edit-list{display:flex;flex-direction:column;gap:8px}
/* 用 grid 而不是 flex：輸入框佔滿剩下的空間，右側三欄寬度固定，
   所以「N 筆在用」有沒有出現都不會讓每一列的輸入框長度不一樣。 */
.option-edit-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto 62px;
  align-items:center;
  gap:7px;
}
/* 顏色交給檔案最後的「淺底配深字」統一處理，這裡只管尺寸與間距。 */
.option-edit-row input[type="text"]{
  flex:1 1 140px;min-width:0;min-height:38px;padding:8px 11px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:10px;
  font:inherit;font-size:13px;
}
.option-edit-move{display:flex;gap:4px;flex:0 0 auto}
/* 固定寬度並靠右：沒有「N 筆在用」的列會留下同樣寬度的空位，整欄才對得齊。 */
.option-edit-used{
  font-size:10.5px;color:var(--bp-muted,#7A7566);
  text-align:right;line-height:1.3;
}
.option-edit-empty{
  font-size:12.5px;line-height:1.7;color:var(--bp-muted,#7A7566);
  padding:14px 13px;border:1.5px dashed var(--bp-line,#D8D0BC);border-radius:11px;
}
.option-add{align-self:flex-start}
.option-edit-note{font-size:11.5px;line-height:1.6;color:var(--bp-muted,#7A7566)}
/* 「恢復預設」是少用的退路，不該和「儲存」搶注意力：改成低調的文字連結，
   放在主要動作下方。 */
.option-reset{
  align-self:center;margin-top:2px;
  font-size:12px!important;color:var(--bp-muted,#7A7566)!important;
}

/* ===== 網站設定 ===== */
.settings-block{
  margin-bottom:16px;padding:14px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:14px;
  background:var(--bp-paper,#FAF7EE);
}
.settings-block-head{
  font-size:13.5px;font-weight:800;color:var(--bp-navy,#1B2A4A);margin-bottom:12px;
}
.settings-field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.settings-field label{font-size:12px;font-weight:750;color:var(--bp-navy,#1B2A4A)}
/* 顏色交給檔案最後的「淺底配深字」統一處理，這裡只管尺寸與間距。 */
.settings-field input[type="text"],
.settings-field input[type="date"],
.settings-field input[type="number"],
.settings-field select{
  min-height:40px;padding:9px 11px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:10px;
  background:#fff;color:var(--bp-navy,#1B2A4A);font:inherit;font-size:13.5px;
}
.settings-field input:disabled{background:var(--bp-cream,#F3EEE0);color:var(--bp-muted,#7A7566)}
.settings-hint{font-size:11px;line-height:1.6;color:var(--bp-muted,#7A7566)}
.settings-color{display:flex;align-items:center;gap:10px}
.settings-color input[type="color"]{
  width:52px;height:40px;padding:2px;flex:0 0 auto;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:10px;background:#fff;
}
.settings-color code{
  font-family:var(--bp-mono,ui-monospace,monospace);font-size:12px;color:#555044;
}
.settings-actions{display:flex;justify-content:flex-end}

/* 結清紀錄改成可點編輯 */
.settle-history-main{
  min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;
  background:transparent!important;border:0!important;padding:0!important;
  font:inherit!important;color:inherit!important;
}
.settle-history-main:active{opacity:.6}

/* 新增表單最上面的「從連結填入」 */
.editor-link-fill{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px;padding:11px 13px;
  border:1.5px dashed var(--bp-line,#D8D0BC);border-radius:12px;
  background:var(--bp-cream,#F3EEE0);
}
.editor-link-fill-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.editor-link-fill-main b{font-size:12.5px;color:var(--bp-navy,#1B2A4A)}
.editor-link-fill-main span{font-size:11px;line-height:1.5;color:var(--bp-muted,#7A7566)}
.editor-link-fill .rsv-btn{flex:0 0 auto;min-height:32px!important;padding:5px 12px!important;font-size:11.5px!important}
@media(max-width:360px){
  .checkin-option{min-height:70px;padding:10px 2px}
  .checkin-face{font-size:13px}
}

/* ===== V100 每日筆記／導覽區塊／操作手冊 ===== */
.day-note-quick{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.day-note-quick .day-note-empty{margin-bottom:0!important}
.day-note-quick-row{display:flex;flex-wrap:wrap;gap:6px}
.day-note-chip{
  min-height:30px!important;padding:5px 12px!important;
  border:1px solid var(--bp-line,#D8D0BC)!important;border-radius:999px!important;
  background:transparent!important;color:#555044!important;
  font-size:12px!important;font-weight:700!important;
}
.day-note-chip:active{background:var(--bp-cream,#F3EEE0)!important}
.day-note-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.day-note-tag{
  padding:3px 9px;border-radius:999px;
  background:var(--bp-cream,#F3EEE0);color:var(--bp-navy,#1B2A4A);
  font-size:11px;font-weight:750;
}

.nav-edit-group-block{margin-bottom:16px}
.nav-edit-group-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 2px 8px;border-bottom:1px dashed var(--bp-line,#D8D0BC);margin-bottom:9px;
}
.nav-edit-group-name{font-size:13px;font-weight:800;color:var(--bp-navy,#1B2A4A)}

.guide-intro{font-size:13px;line-height:1.8;color:#555044;margin-bottom:18px}
.guide-section{margin-bottom:22px}
.guide-section-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.guide-section-index{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:11px;font-weight:800;color:var(--bp-gold,#B8923F);padding-top:4px;
}
.guide-section-head h2{margin:0;font-size:17px;color:var(--bp-navy,#1B2A4A)}
.guide-section-head p{margin:4px 0 0;font-size:12px;line-height:1.6;color:#555044}
.guide-item{
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:12px;
  background:var(--bp-paper,#FAF7EE);margin-bottom:8px;overflow:hidden;
}
.guide-item summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  list-style:none;cursor:pointer;padding:13px 14px;
  font-size:13.5px;font-weight:750;line-height:1.55;color:var(--bp-navy,#1B2A4A);
}
.guide-item summary::-webkit-details-marker{display:none}
.guide-item summary .chev{flex:0 0 auto;color:#555044;transition:transform .16s ease}
.guide-item[open] summary .chev{transform:rotate(180deg)}
.guide-answer{
  padding:0 14px 14px;font-size:12.5px;line-height:1.85;color:#555044;
  border-top:1px dashed var(--bp-line,#D8D0BC);padding-top:11px;margin:0 14px 14px;
}
.guide-foot{
  margin:6px 0 10px;padding:13px 14px;border:1.5px dashed var(--bp-line,#D8D0BC);
  border-radius:12px;font-size:12px;line-height:1.7;color:#555044;
}
.rsv-linked-actions{display:flex;gap:6px;flex:0 0 auto}

/* ===== 操作手冊：先講用途，再講規則 ===== */
.guide-hero{
  margin-bottom:22px;padding:16px 16px 18px;border-radius:16px;
  background:var(--bp-navy,#1B2A4A);color:var(--bp-cream,#F3EEE0);
}
.guide-hero h2{margin:0 0 8px;font-size:18px;color:var(--bp-cream,#F3EEE0)}
.guide-hero p{margin:0;font-size:12.5px;line-height:1.85;color:rgba(243,238,224,.8)}

/* 功能說明改成可收合，並依「更多」頁的同一組分類排列 ——
   22 個功能一次全部攤開，等於要捲很久才找得到想看的那一個。 */
.guide-search-shell{margin-bottom:16px}
.guide-feature-group{margin-bottom:16px}
.guide-feature-group-name{
  font-family:var(--bp-mono,ui-monospace,monospace);
  font-size:11px;font-weight:800;letter-spacing:.04em;
  color:#6B6656;margin:0 2px 7px;
}
.guide-feature{
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:13px;
  background:var(--bp-paper,#FAF7EE);margin-bottom:8px;overflow:hidden;
}
.guide-feature>summary{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;cursor:pointer;list-style:none;
}
.guide-feature>summary::-webkit-details-marker{display:none}
.guide-feature>summary b{flex:1 1 auto;font-size:14px;color:var(--bp-navy,#1B2A4A)}
.guide-feature>summary .chev{flex:0 0 auto;color:#555044;transition:transform .16s ease}
.guide-feature[open]>summary .chev{transform:rotate(180deg)}
.guide-feature-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--bp-cream,#F3EEE0);color:var(--bp-navy,#1B2A4A);
}
.guide-feature-icon svg{width:19px;height:19px}
.guide-feature-body{
  min-width:0;display:flex;flex-direction:column;gap:6px;
  padding:0 14px 13px 49px;
}
.guide-feature-body p{margin:0;font-size:12.5px;line-height:1.75;color:#555044}
.guide-feature-when{
  font-size:11.5px;line-height:1.6;color:var(--bp-muted,#7A7566);
  padding-top:3px;border-top:1px dashed var(--bp-line,#D8D0BC);
}

/* 插圖：內嵌 SVG，跟著配色走，不需要外部圖檔 */
.guide-figure{
  margin:0 0 14px;padding:14px 12px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:13px;
  background:var(--bp-paper,#FAF7EE);
  overflow-x:auto;
}
.guide-figure svg{display:block;width:100%;min-width:300px;height:auto}
.guide-flow-node rect{
  fill:var(--bp-cream,#F3EEE0);stroke:var(--bp-navy,#1B2A4A);stroke-width:1.5;
}
.guide-flow-node text{
  text-anchor:middle;fill:var(--bp-navy,#1B2A4A);
  font-size:12px;font-weight:800;
}
.guide-flow-node text.sub{
  font-size:9px;font-weight:600;fill:var(--bp-muted,#7A7566);
}
.guide-flow-line{
  stroke:var(--bp-navy,#1B2A4A);stroke-width:1.5;fill:none;color:var(--bp-navy,#1B2A4A);
}
.guide-flow-line.dashed{stroke-dasharray:4 3;opacity:.65}
.guide-flow-caption{
  text-anchor:middle;fill:var(--bp-muted,#7A7566);font-size:9.5px;font-weight:600;
}
.guide-share-group rect{
  fill:var(--bp-cream,#F3EEE0);stroke:var(--bp-navy,#1B2A4A);stroke-width:1.5;
}
.guide-share-private rect{
  fill:transparent;stroke:var(--bp-navy,#1B2A4A);stroke-width:1.5;stroke-dasharray:5 3;
}
.guide-share-group text,.guide-share-private text{
  text-anchor:middle;fill:#555044;font-size:10px;font-weight:600;
}
.guide-share-group text.head,.guide-share-private text.head{
  fill:var(--bp-navy,#1B2A4A);font-size:11.5px;font-weight:800;
}

/* ===== V101 共用拖曳的外觀 ===== */
.card-drag-ghost{
  position:fixed!important;z-index:9999!important;margin:0!important;
  pointer-events:none!important;opacity:.97!important;
  transform:translate3d(0,0,0);will-change:transform;
  filter:drop-shadow(0 16px 26px rgba(27,42,74,.22));
}
.card-drag-source{opacity:.08!important;pointer-events:none!important}
.card-drag-placeholder{
  margin:10px 0;border:2px dashed rgba(27,42,74,.34);border-radius:14px;
  background:rgba(27,42,74,.05);box-sizing:border-box;transition:height .12s ease;
}
.nav-edit-placeholder{margin:0 0 9px!important}
body.card-dragging{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.card-dragging *{-webkit-user-select:none!important;user-select:none!important}
.route-drag-handle,.nav-edit-handle{touch-action:none!important;cursor:grab}
.route-drag-handle:active,.nav-edit-handle:active{cursor:grabbing}

/* ===== V101 資料明細 ===== */
.record-detail{display:flex;flex-direction:column;gap:1px;margin-bottom:14px}
.record-detail-row{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;
  padding:11px 2px;border-bottom:1px dashed var(--bp-line,#D8D0BC);
}
.record-detail-row:last-child{border-bottom:0}
.record-detail-key{font-size:11.5px;color:#555044;font-weight:750}
.record-detail-value{
  font-size:13.5px;line-height:1.7;color:var(--bp-navy,#1B2A4A);
  overflow-wrap:anywhere;word-break:break-word;
}
.record-detail-inline{margin-left:6px}
.record-detail-value a{color:var(--bp-navy,#1B2A4A);font-weight:750;text-decoration:underline}
.record-detail-actions{display:flex;gap:8px;padding-bottom:6px}
.record-detail-actions .journey-action-btn{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  min-height:40px!important;padding:8px 14px!important;border-radius:11px!important;
}
.record-detail-actions .journey-action-btn svg{width:15px!important;height:15px!important}
/* 今日注意事項改成可點擊的列 */
.ed-live-reminder-row{
  width:100%!important;display:grid!important;
  grid-template-columns:28px minmax(0,1fr) 14px!important;
  gap:9px!important;align-items:start!important;text-align:left!important;
  padding:12px 1px!important;border:0!important;border-top:1px dashed rgba(23,43,82,.18)!important;
  background:transparent!important;color:inherit!important;
}
.ed-live-reminders>.ed-live-reminder-row:first-child{border-top:0!important}
.ed-live-reminder-row span{font-size:10px;font-weight:850;color:#B08A60}
.ed-live-reminder-row p{margin:0;font-size:12.5px;line-height:1.65;color:#172B52}
.ed-live-reminder-row i{font-style:normal;color:#9A7751;font-size:15px;align-self:center}
.ed-live-reminder-row.static i{display:none}
.ed-live-reminder-row:active{background:rgba(23,43,82,.04)!important}
/* 標題本來是 div，改成按鈕之後要拿掉瀏覽器預設外觀 */
.favorite-row-title,.item-title,.budget-item-main,
.transport-overview-main,button.event-title,
button.stay-strip-name,button.stay-overnight-name,
button.lodging-summary-title,button.checkout-strip-title{
  border:0!important;background:transparent!important;
  text-align:left!important;padding:0!important;
  font:inherit!important;color:inherit!important;
}
.budget-item-main{display:flex!important;flex-direction:column!important;gap:3px!important;min-height:0!important}
/* 交通／住宿卡片的標題區塊改成按鈕後仍要撐滿可用寬度，否則會縮成文字寬度，
   點擊範圍變得比看起來小很多。 */
.transport-overview-main{
  display:block!important;width:100%!important;min-width:0!important;
  flex:1 1 auto!important;
}
button.event-title{display:block!important;width:100%!important}
.favorite-row-title:active,.item-title:active,.budget-item-main:active,
.transport-overview-main:active,button.event-title:active,
button.stay-strip-name:active,button.stay-overnight-name:active,
button.lodging-summary-title:active,button.checkout-strip-title:active{opacity:.6}

/* 收藏列的「加入」／「看行程」改用站上標準的 .rsv-btn，不再是自成一格的實心
   小方塊。同一列的圖示按鈕是 28px，所以沿用 .doc-row-actions 既有的緊湊寫法
   讓兩者對齊。 */
.favorite-row-actions .rsv-btn{
  width:auto!important;
  min-width:auto!important;
  min-height:28px!important;
  height:28px!important;
  padding:5px 11px!important;
  border-radius:999px!important;
  font-size:11.5px!important;
  background:#fff!important;
  border:1.5px solid var(--bp-navy,#1B2A4A)!important;
  color:var(--bp-navy,#1B2A4A)!important;
}
.favorite-row-actions .rsv-btn:active{background:var(--bp-cream,#F3EEE0)!important}

.rsv-linked-row .rsv-btn,
.rsv-detail-section .rsv-btn{
  flex:0 0 auto!important;
  min-width:76px!important;
  min-height:34px!important;
  padding:6px 12px!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:12px!important;
}
.hours-editor input[type="time"]{
  flex:1 1 0!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  padding:6px 8px!important;
  font-size:15px!important;
}
.hours-dash{opacity:.6;text-align:center}
.hours-seg-btn{
  flex:0 0 auto!important;
  width:30px!important;height:30px!important;
  min-width:30px!important;min-height:30px!important;
  padding:0!important;
  border:1px solid rgba(243,238,224,.30)!important;
  border-radius:8px!important;
  background:transparent!important;
  color:rgba(243,238,224,.78)!important;
  font-size:15px!important;line-height:1!important;
}
.hours-seg-add{border-style:dashed!important}
.hours-seg-btn:active{background:rgba(255,255,255,.08)!important}
.hours-editor .hours-day{
  flex:0 0 16px!important;
  text-align:center!important;
  align-self:center!important;
}
.hours-editor .hours-closed{
  flex:0 0 auto!important;
  align-self:center!important;
  min-height:30px!important;
  padding:4px 8px!important;
  font-size:10.5px!important;
}
.hours-weekly{gap:8px!important}
.hours-presets,.hours-weekly-tools{gap:5px!important;margin-top:8px!important}
.hours-preset{
  min-height:28px!important;
  padding:4px 9px!important;
  font-size:11px!important;
}
.hours-tools-label{
  width:100%;
  color:rgba(243,238,224,.62);
  font-size:10.5px;
  font-weight:750;
}
@media(max-width:390px){
  .hours-editor input[type="time"]{font-size:14px!important;padding:6px!important}
  .hours-editor .hours-row{gap:6px!important}
}

/* ============================================================
   ===== 淺底配深字、深底配淺字 =====
   `.editor-sheet-body` 其實有兩種完全相反的底色：
     只有 .editor-sheet-body            → 深藍底（記錄的編輯表單）
     再加上 .search-sheet-body          → 淺米底（openSheet 開出來的視窗）
   先前兩種共用同一批文字顏色規則，所以總有一邊會撞色，而且是靠 CSS 先後順序
   與 specificity 決定誰贏 —— 這就是為什麼同一個 .field-hint 在深藍底上是
   深灰（1.77:1，幾乎看不到），而欄位標籤在淺米底上又變成淺色。
   這裡改成以「所在的底色」為準明確指定，兩種情境各自成立，不再互相搶。
   放在檔案最後是刻意的：同 specificity 時後定義者勝。
   ============================================================ */

/* --- 深藍底：說明文字要淺 --- */
.editor-sheet-body:not(.search-sheet-body) .field-hint,
.editor-sheet-body:not(.search-sheet-body) .label,
.editor-sheet-body:not(.search-sheet-body) .note,
.editor-sheet-body:not(.search-sheet-body) .section-note,
.editor-sheet-body:not(.search-sheet-body) .quick-note{
  color:rgba(243,238,224,.74)!important;
}

/* --- 淺米底：文字與欄位一律深色 --- */
.editor-sheet-body.search-sheet-body label,
.editor-sheet-body.search-sheet-body div label,
.editor-sheet-body.search-sheet-body .field-hint,
.editor-sheet-body.search-sheet-body .settings-block-head,
.editor-sheet-body.search-sheet-body .checkin-label,
.editor-sheet-body.search-sheet-body .option-edit-note,
.editor-sheet-body.search-sheet-body .rsv-section-hint{
  color:var(--bp-navy,#1B2A4A)!important;
}
.editor-sheet-body.search-sheet-body .settings-hint,
.editor-sheet-body.search-sheet-body .option-edit-used,
.editor-sheet-body.search-sheet-body .checkin-empty-note{
  color:#5A5648!important;
}
.editor-sheet-body.search-sheet-body input,
.editor-sheet-body.search-sheet-body textarea,
.editor-sheet-body.search-sheet-body select,
.editor-sheet-body.search-sheet-body div input,
.editor-sheet-body.search-sheet-body div textarea,
.editor-sheet-body.search-sheet-body div select{
  background:#FFFFFF!important;
  color:var(--bp-navy,#1B2A4A)!important;
  -webkit-text-fill-color:var(--bp-navy,#1B2A4A)!important;
  border-color:rgba(27,42,74,.18)!important;
}
.editor-sheet-body.search-sheet-body input::placeholder,
.editor-sheet-body.search-sheet-body textarea::placeholder{
  color:rgba(27,42,74,.45)!important;
  -webkit-text-fill-color:rgba(27,42,74,.45)!important;
  opacity:1!important;
}

/* --- 淺底上的金色小標：#B8923F 對米色只有 2.5:1 ---
   專案裡本來就有為文字準備的深金色 --bp-gold-text，只是這幾處沒用到。 */
.ed-home-eyebrow,
.ed-section-head span,
.ed-action-index,
.guide-section-index,
.prehome-head span{
  color:var(--bp-gold-text,#7D6020)!important;
}

/* ============================================================
   ===== 行程頁：把上方的資訊帶壓扁，讓行程本身往上 =====
   今日概覽、住宿與今日紀錄都是「一眼確認」的資訊，不需要各佔一整張大卡片。
   壓成緊湊的資訊列之後，行程清單能提早大約一個半螢幕出現。
   ============================================================ */
.day-panel{margin-bottom:10px!important;padding-bottom:0!important}
.day-panel-head{margin-bottom:8px!important}
.day-panel-card{
  padding:0!important;border-radius:13px!important;
  background:var(--bp-paper,#FAF7EE)!important;
  border:1.5px solid var(--bp-line,#D8D0BC)!important;
  overflow:hidden;
}
.day-panel-card .info-block{
  padding:10px 13px!important;margin:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
}
.day-panel-card .info-block+.info-block{
  border-top:1px dashed var(--bp-line,#D8D0BC)!important;
}
.day-panel-card .info-block-head{
  font-size:10.5px!important;font-weight:800!important;
  letter-spacing:.04em;color:var(--bp-muted,#7A7566)!important;
  margin-bottom:3px!important;
}
.day-panel-card .overview-main{
  font-size:13.5px!important;line-height:1.55!important;margin:0!important;
}
.day-panel-card .overview-note-collapsible{margin-top:5px!important}
.day-panel-card .lodging-block-body{margin:0!important}
/* 住宿列在這裡只需要一行：名稱與入住時間，細節仍可展開 */
.day-panel-card .stay-row,
.day-panel-card .lodging-summary-card{
  padding:0!important;border:0!important;background:transparent!important;
  margin:0!important;box-shadow:none!important;
}

/* 今日紀錄：從整塊按鈕縮成一列小小的入口 */
.day-note-quick{margin-bottom:12px!important}
.day-note-quick .day-note-empty{
  width:auto!important;min-height:34px!important;
  padding:7px 14px!important;margin:0!important;
  border-radius:999px!important;
  border:1.5px dashed var(--bp-line,#D8D0BC)!important;
  background:transparent!important;color:#555044!important;
  font-size:12.5px!important;font-weight:700!important;
}
.day-note-summary{padding:9px 12px!important;margin-bottom:12px!important}

/* 行程路線緊接在資訊帶之後 */
.route-section{margin-top:4px!important}

/* ============================================================
   ===== 這一輪的細部修正 =====
   ============================================================ */

/* 上傳照片按鈕原本緊貼著上一個輸入框，看起來像同一個元件 */
.photo-upload-row{margin-top:10px;display:flex}

/* 電池要夠大才好滑：它同時是控制項，不是純裝飾 */
.rate-icons.battery .battery-shell{padding:4px;gap:3px;border-width:2.5px;border-radius:5px}
.rate-icons.battery .battery-shell i{width:9px;height:20px;border-radius:1.5px}
.rate-icons.battery .battery-tip{width:4px;height:11px}
.checkin-rate-icons{min-height:38px}

/* 標題過長會爆版：一律允許收合成省略號，卡片本身也不再被撐開。
   .favorite-row-title 原本就設了 ellipsis，但少了 min-width:0，
   在 flex/grid 容器裡仍然會把容器撐開。 */
.favorite-row-title,
.favorite-row-main,
.day-log-main,
.option-row-main,
.transport-overview-main,
.budget-item-main,
.trip-person-main,
.item-body{min-width:0!important;max-width:100%!important}
.favorite-row-title{display:block!important;width:100%!important}
.transport-overview-route,
.transport-overview-date,
.day-log-date{min-width:0;overflow-wrap:anywhere}
/* 標題可以折行，但不要把版面推寬 */
.item-title,.budget-item-main>b,.day-log-date{overflow-wrap:anywhere}

/* 收藏頁的排序按鈕改用站上標準的膠囊按鈕 */
.favorite-sort-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.favorite-sort-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:7px 14px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:999px;
  background:#fff;color:var(--bp-navy,#1B2A4A);
  font-size:12.5px;font-weight:700;
}
.favorite-sort-btn.active{
  background:var(--bp-navy,#1B2A4A);border-color:var(--bp-navy,#1B2A4A);
  color:var(--bp-cream,#F3EEE0);
}
.favorite-sort-note{font-size:11px;color:var(--bp-muted,#7A7566)}

/* 住宿在行程頁的資訊帶裡只需要一行 —— 先前的規則寫錯了 class
   （實際是 .stay-strip／.stay-overnight，不是 .stay-row） */
.day-panel-card .stay-strip,
.day-panel-card .stay-overnight{
  padding:0!important;margin:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}
.day-panel-card .stay-overnight-grid{gap:4px!important}
.day-panel-card .stay-strip-row{gap:8px!important}
.day-panel-card .stay-detail-panel{margin-top:6px!important}

/* 明細頁的營業時間一天一行 */
.record-detail-value .hours-line{display:block}

/* 行程頁的「還沒排進行程的收藏」：每一筆各自可點 */
.unscheduled-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* chip 名稱可能很長。flex 項目預設不會縮到內容以下，只設 max-width 仍會撐破，
   所以要一起給 min-width:0 與 flex-shrink，才會真的收成省略號。 */
.unscheduled-chip{
  min-height:32px;padding:6px 12px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:999px;
  background:#fff;color:var(--bp-navy,#1B2A4A);
  font-size:12px;font-weight:700;
  flex:0 1 auto;min-width:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-block;
}
/* 根因：.unscheduled-notice 是 align-items:flex-start 的直向 flex，子元素會照
   自己的內容寬度撐開，而不是收在容器寬度裡。於是 chip 的 max-width:100% 量到的
   是一個已經爆掉的寬度，省略號永遠不會生效 —— 上一輪只加 min-width:0 沒有用，
   因為問題出在「這一列根本沒有被限制在容器寬度內」。先讓每一列撐滿容器。 */
.unscheduled-notice>*{align-self:stretch;min-width:0}
.unscheduled-chips{min-width:0}
.unscheduled-chip.more{background:transparent;border-style:dashed;color:#6B6656}

/* 圖示樣式選擇器 */
.icon-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.icon-choice{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:9px 4px;border-radius:13px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:#fff;
}
.icon-choice.active{
  border-color:var(--bp-navy,#1B2A4A);
  box-shadow:inset 0 0 0 1.5px var(--bp-navy,#1B2A4A);
}
.icon-choice-art{display:block;width:100%;max-width:52px}
.icon-choice-art svg{display:block;width:100%;height:auto;border-radius:11px}
.icon-choice-label{font-size:10.5px;font-weight:700;color:#555044}
.settings-reset{margin-top:2px;font-size:12px!important;color:var(--bp-muted,#7A7566)!important}
@media(max-width:380px){.icon-picker{grid-template-columns:repeat(3,minmax(0,1fr))}}

.budget-target-pace{color:var(--bp-muted,#7A7566);font-weight:650}
.budget-personal-target.record-focus,.budget-set-target.record-focus{border-radius:14px}

/* ============================================================
   ===== 住宿：點名稱看明細 =====
   「詳情」摺疊按鈕已移除，改成點住宿名稱開明細視窗（與站上其他資料一致）。

   .stay-detail-* / .lodging-note / .checkout-strip-details / .lodging-detail-*
   / .lodging-payment 現在都沒有任何地方會產生了，但**規則刻意留著沒刪**：它們
   散在這個檔案的七個歷史層裡，其中兩處（約 4163、4227 行）還跟仍在使用的選擇器
   共用同一條逗號清單，逐一挑掉的風險大於留著的成本。用不到的規則不會有作用。
   若日後要清，先確認每一條逗號清單裡沒有還活著的選擇器。

   退房與續住只是狀態說明，不是當天的重點，所以標籤改成灰色，讓「今晚住宿」
   那種真正要注意的狀態留住視線。淺底配深字。
   ============================================================ */
.stay-strip.checkout-entry .stay-status,
.stay-strip.stayover-entry .stay-status,
.checkout-strip .checkout-strip-label{
  background:#EDEAE3!important;
  color:#6B6656!important;
  font-weight:740!important;
}
.stay-strip.checkout-entry .stay-strip-time,
.stay-strip.stayover-entry .stay-strip-time,
.checkout-strip .checkout-strip-time{color:#6B6656!important}
/* ============================================================
   ===== 足跡 =====
   收藏＝以後想去，行程＝這趟要去，足跡＝真的去過。星星沿用心情愛心那一套
   （.rate-icons），只是換了圖形與顏色，兩邊的互動手感才會一致。
   這些都出現在淺米底的視窗與頁面上，所以一律深色文字。
   ============================================================ */
.rate-icons.stars svg{
  width:24px;height:24px;flex:0 0 auto;
  fill:none;stroke:#B9903C;stroke-width:1.7;stroke-linejoin:round;
  opacity:.38;transition:opacity .1s ease;
}
.rate-icons.stars svg.on{fill:#D6A54B;stroke:#B9903C;opacity:1}
.rate-icons.stars.sm svg{width:15px;height:15px;stroke-width:2}

.trace-body{display:flex;flex-direction:column;gap:20px;padding:4px 0 8px}
/* 拖過去給分：不關掉瀏覽器預設的觸控捲動，手指一動就變成捲頁而不是評分。 */

.trace-return-row{display:flex;flex-wrap:wrap;gap:8px}
.trace-return-chip{
  min-height:34px;padding:7px 14px;border-radius:999px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:#fff;
  color:var(--bp-navy,#1B2A4A);font-size:12.5px;font-weight:740;
  flex:0 1 auto;min-width:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.trace-return-chip.active{
  background:var(--bp-navy,#1B2A4A);border-color:var(--bp-navy,#1B2A4A);color:#FAF7EE;
}
.trace-note-input{
  width:100%;padding:10px 12px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:12px;background:#fff;
  color:var(--bp-navy,#1B2A4A);font:inherit;font-size:13px;line-height:1.6;
  resize:vertical;
}

.trace-quick-list{display:flex;flex-direction:column;gap:6px}
.trace-quick-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;
  padding:8px 10px;border:1px solid #EBE5D9;border-radius:12px;background:#fff;
}
.trace-quick-name{
  flex:1 1 auto;min-width:0;text-align:left;
  border:0;background:transparent;padding:0;font:inherit;
  color:var(--bp-navy,#1B2A4A);font-size:13px;font-weight:740;
  overflow-wrap:anywhere;
}
.trace-quick-name:active{opacity:.6}
.trace-quick-stars{flex:0 0 auto}
.trace-quick-tag{
  flex:0 0 auto;padding:3px 8px;border-radius:999px;
  background:#F0EBE1;color:#6B6656;font-size:11px;font-weight:740;white-space:nowrap;
}

.trace-summary{margin:0 2px 10px;font-size:12px;color:#6B6656}
.trace-list{display:flex;flex-direction:column;gap:9px}
.trace-row{padding:12px 13px;border:1px solid #EBE5D9;border-radius:14px;background:#FAF7EE}
.trace-row-head{display:flex;align-items:center;gap:8px;min-width:0}
.trace-row-name{
  flex:1 1 auto;min-width:0;text-align:left;
  border:0;background:transparent;padding:0;font:inherit;
  font-size:14.5px;font-weight:760;color:var(--bp-navy,#1B2A4A);
  overflow-wrap:anywhere;
}
.trace-row-name:active{opacity:.6}
.trace-row-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px;min-width:0}
/* 心得寫成幾行就顯示成幾行 —— HTML 預設會把換行吃掉，清單上就全部黏成一段。 */
.trace-row-note{
  margin-top:7px;font-size:12.5px;line-height:1.6;color:#4A4436;
  overflow-wrap:anywhere;white-space:pre-line;
}
/* ============================================================
   ===== 住宿：獨立顯示時的卡片外框，與名稱字級 =====
   ============================================================ */
/* 「住宿資訊」這一區原本是設計成緊接在每日摘要卡片下面、與它接成同一張卡，所以
   上緣做成方角並用 -1px 往上疊。但它現在**只在這一天沒有每日摘要時**才出現，
   上面根本沒有東西可以接，看起來就像一張被切掉上半部的卡片。還原成完整的卡。 */
.lodging-summary-section{
  border-radius:18px!important;
  margin-top:8px!important;
}
/* 續住與退房的住宿名稱不需要那麼大 —— 那兩種狀態下重點是「幾點退房」而不是
   飯店叫什麼，名稱只要看得清楚就好。今晚住宿維持原本的大小。 */
.stay-strip.checkout-entry .stay-strip-name,
.stay-strip.stayover-entry .stay-strip-name,
.checkout-strip .checkout-strip-title{
  font-size:13px!important;
  font-weight:720!important;
}
/* ===== 按鈕型欄位的「其他…」自訂輸入 =====
   先前這種欄位只有按鈕，清單以外的值完全填不進去。深色文字配淺底。 */
.editor-segment.segment-custom{border-style:dashed!important}
.editor-segment-custom-input{
  width:100%;margin-top:8px;padding:10px 12px;
  border:1.5px solid var(--bp-line,#D8D0BC);border-radius:12px;background:#fff;
  color:var(--bp-navy,#1B2A4A);font:inherit;font-size:13px;
}
.editor-segment-custom-input.is-hidden{display:none}
.multi-custom-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.multi-custom-row.is-hidden{display:none}
.multi-custom-row .editor-segment-custom-input{margin-top:0;flex:1 1 auto;min-width:0}
/* ===== 全站共用的返回上一頁按鈕 =====
   固定在畫面左下、底部導覽之上。全站只有這一顆，樣式自然一致。
   深藍底配淺色字。 */
/* 返回鍵半透明，但**不加毛玻璃** —— 模糊會把底下的斜紋底紋糊成一片灰，看起來
   髒髒的。單純降低不透明度就好：底下的內容仍然透得出來，按鈕本身也乾淨。 */
.nav-back-btn{
  position:fixed;left:12px;z-index:60;
  bottom:calc(72px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:5px;
  min-height:40px;padding:9px 15px 9px 12px;border-radius:999px;
  /* 透明度的下限是算出來的，不是喬出來的：低於 0.67 時，米色字疊在淺底上會掉到
     4.5:1 以下（白色卡片上更嚴格）。取 0.68 —— 已經是還讀得清楚的最透明。 */
  border:1px solid rgba(27,42,74,.55);
  background:rgba(27,42,74,.68);color:#FAF7EE;
  font-size:12.5px;font-weight:760;
  box-shadow:0 3px 10px rgba(27,42,74,.16);
}
.nav-back-btn svg{width:17px;height:17px;flex:0 0 auto}
.nav-back-btn:active{opacity:.75}
/* 返回鈕是固定定位的，會蓋住頁面最後面的內容。有它的時候把內容墊高一顆按鈕。 */
body.has-nav-back #content{padding-bottom:58px}
/* ===== 切換旅程：狀態標籤 =====
   淺底配深字；已結束刻意最不顯眼，它排在最後面，只是讓你認得出來。 */
.trip-switcher-title-row{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.trip-switcher-title-row .trip-switcher-name{flex:0 1 auto;min-width:0}
.trip-state-tag{
  flex:0 0 auto;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:780;white-space:nowrap;
}
.trip-state-tag.ongoing{background:#E4EDE6;color:#2F6B53}
.trip-state-tag.upcoming{background:#F3EBDA;color:#8A6A22}
.trip-state-tag.completed{background:#EDEAE3;color:#6B6656}
.trip-switcher-item.state-completed .trip-switcher-name{color:#4A4436}
/* 目前旅程那一張是深藍底。標籤本身是淺底深字，放上去會被卡片的文字色蓋掉而看
   不清楚 —— 深底上的淺色小方塊要自己把兩個顏色都講明。 */
.trip-switcher-item.active .trip-state-tag{
  background:#FAF7EE!important;color:#1B2A4A!important;
}
/* ===== 跨旅程：足跡分層與各趟花費 =====
   都在淺米底的頁面上，一律深色文字。 */
.trace-country-count{font-size:11px;color:#6B6656;font-weight:740}
.trace-missing,.trace-hint{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 12px;padding:10px 12px;border-radius:12px;
  border:1px dashed var(--bp-line,#D8D0BC);background:#FAF7EE;
  font-size:12px;line-height:1.6;color:#4A4436;
}
.trace-quick-tag.trip{background:#E7EBF3;color:#3D5280}
.trace-quick-tag.avoid{background:#F5E4E4;color:#8E2F2F}
.trace-row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.trace-avoid .trace-row{opacity:.9}

.trip-spend-total{margin:0 2px 10px;font-size:14px;font-weight:780;color:var(--bp-navy,#1B2A4A)}
.trip-spend-chart{margin:0 0 12px;overflow-x:auto}
.trip-spend-chart svg{width:100%;height:auto;display:block}
.trip-spend-label{font-size:9px;fill:#6B6656}
.trip-spend-list{display:flex;flex-direction:column}
.trip-spend-row{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:11px 2px;border-top:1px solid #EBE5D9;
}
.trip-spend-row:first-child{border-top:0}
.trip-spend-main{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.trip-spend-name{font-size:13.5px;font-weight:760;color:var(--bp-navy,#1B2A4A);overflow-wrap:anywhere}
.trip-spend-meta{font-size:11px;color:#6B6656}
.trip-spend-amount{flex:0 0 auto;font-size:13.5px;font-weight:780;color:var(--bp-navy,#1B2A4A);white-space:nowrap}
.budget-target-line{font-size:13px;line-height:1.7;color:var(--bp-navy,#1B2A4A)}
.budget-target-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.trace-place-row{display:flex;gap:8px;flex-wrap:wrap}
.trace-place-row .trace-note-input{flex:1 1 120px;min-width:0}
.trip-spend-detail{font-size:11px;color:#6B6656;line-height:1.6;overflow-wrap:anywhere}
/* ===== 足跡：統計列與工具列 ===== */
.trace-stats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.trace-stat{
  flex:1 1 68px;min-width:0;padding:10px 8px;border-radius:12px;
  border:1px solid #EBE5D9;background:#FAF7EE;text-align:center;
}
.trace-stat.wide{flex:1 1 100%}
.trace-stat b{display:block;font-size:15px;font-weight:800;color:var(--bp-navy,#1B2A4A);overflow-wrap:anywhere}
.trace-stat span{display:block;margin-top:3px;font-size:10.5px;color:#6B6656}
.trace-search input{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:#fff;
  color:var(--bp-navy,#1B2A4A);font:inherit;font-size:13px;
}
/* ===== 足跡：重訪與年度回顧 ===== */
.trace-repeat{margin-top:6px;font-size:11.5px;font-weight:740;color:#3D5280}
/* ===== 歷年足跡 =====
   一年一列，預設只展開最近的一年 —— 使用者：「絕對不是直接攤開」。 */
.trace-years{margin-bottom:14px}
.trace-year-item{border-bottom:1px solid var(--bp-line,#D8D0BC)}
.trace-year-item:last-child{border-bottom:0}
.trace-year-head{
  display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  padding:11px 2px;border:0;background:transparent;cursor:pointer;
}
.trace-year-head:active{background:#F1EEE4}
.trace-year-label{
  flex:0 0 auto;font-family:var(--bp-mono,inherit);
  font-size:15px;font-weight:800;color:var(--bp-navy,#1B2A4A);
}
.trace-year-main{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;font-weight:720;color:#4A4436;
}
.trace-year-count{flex:0 0 auto;font-size:11px;font-weight:740;color:#6B6656}
.trace-year-caret{flex:0 0 auto;font-size:11px;color:#6B6656}
.trace-year-body{padding:0 2px 10px}
/* 一年裡整理過的旅行。只在真的有旅行時才出現。 */
.trace-year-organise{
  width:100%;margin-top:4px;padding:8px;border:0;background:transparent;cursor:pointer;
  font-size:11.5px;color:#6B6656;text-align:left;
}
.trace-year-organise:active{color:var(--bp-navy,#1B2A4A)}
/* 旅行心得：讀的地方，行距放寬一點。 */
.trip-note{
  margin:2px 0 6px;padding:12px 14px;border-radius:12px;
  background:var(--bp-cream,#F3EEE0);border:1px solid var(--bp-line,#D8D0BC);
  font-size:13.5px;line-height:1.75;color:#2A2416;
}
.new-trip-form{display:flex;flex-direction:column;gap:4px}
.new-trip-form label{font-size:12px;font-weight:740;color:var(--bp-navy,#1B2A4A);margin-top:10px}
/* 不要自己捲 —— 視窗本身已經會捲，兩層捲動在手機上一定會打架。 */
.trip-city-list{display:flex;flex-direction:column;gap:6px}
.trip-city-divider{
  margin:12px 2px 4px;padding-top:10px;border-top:1px solid var(--bp-line,#D8D0BC);
  font-size:11px;font-weight:780;color:#6B6656;
}
.trip-city-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.trip-city-head label{margin-top:10px}

/* 這一段是索引，不是內容 —— 七個有外框的卡片疊起來太重。改成細線分隔的輕列。 */
.trace-year-line{
  display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  padding:9px 2px;border:0;border-bottom:1px solid rgba(216,208,188,.6);
  background:transparent;cursor:pointer;
}
.trace-year-line:last-child{border-bottom:0}
.trace-year-line:active{background:#F1EEE4}
/* 整理過的旅行：這一年裡最重要的一行，所以是唯一有框的。 */
.trace-year-trip{
  display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  padding:10px 11px;margin-bottom:7px;border-radius:10px;
  border:1px solid var(--bp-navy,#1B2A4A);background:transparent;cursor:pointer;
}
.trace-year-trip:active{background:#F1EEE4}
.trace-year-trip-name{flex:0 0 auto;font-size:13px;font-weight:800;color:var(--bp-navy,#1B2A4A)}
.trace-year-sub{margin:10px 2px 2px;font-size:11px;font-weight:780;color:#6B6656}
.trace-year-country{flex:0 0 auto;font-size:13px;font-weight:780;color:var(--bp-navy,#1B2A4A)}
.trace-year-cities{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;color:#5C5546;
}

/* ===== 花費：類別分佈與跨旅程比較 ===== */
.category-breakdown{display:flex;flex-direction:column;gap:10px}
.category-row{display:flex;flex-direction:column;gap:5px;min-width:0}
.category-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.category-name{font-size:12.5px;font-weight:740;color:var(--bp-navy,#1B2A4A);min-width:0;overflow-wrap:anywhere}
.category-amount{flex:0 0 auto;font-size:12.5px;font-weight:780;color:var(--bp-navy,#1B2A4A);white-space:nowrap}
.category-amount small{margin-left:6px;font-size:10.5px;font-weight:700;color:#6B6656}
.category-bar{height:7px;border-radius:999px;background:#EDEAE3;overflow:hidden}
.category-bar-fill{height:100%;border-radius:999px;background:#3D5280}
.trip-compare{
  display:flex;flex-direction:column;gap:3px;margin:0 0 12px;
  padding:11px 13px;border-radius:12px;
  border:1px dashed var(--bp-line,#D8D0BC);background:#FAF7EE;
  font-size:12.5px;line-height:1.6;color:var(--bp-navy,#1B2A4A);
}
.trip-compare span{font-size:11px;color:#6B6656}
/* ===== 國家下拉 =====
   淺底深字。清單裡沒有的國家用「其他」自己打，那種對不到地圖，但至少存得下來。 */
.country-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.country-field select{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:#fff;
  color:var(--bp-navy,#1B2A4A);font:inherit;font-size:13px;
}
.country-other{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:#fff;
  color:var(--bp-navy,#1B2A4A);font:inherit;font-size:13px;
}
.country-other.is-hidden{display:none}
.trace-place-row .country-field{flex:1 1 140px}
/* ============================================================
   ===== 我的足跡：版面 =====
   順序是刻意的：地圖 → 這一年 → 數字 → 工具 → 清單。
   先給一眼看得到累積感的東西，工具往後放。淺底一律深字。
   ============================================================ */
.world-map{margin:0 0 14px}
.world-map-loading{
  padding:26px 12px;text-align:center;font-size:12px;color:#6B6656;
  border:1px solid #EBE5D9;border-radius:16px;background:#FAF7EE;
}
.world-map-frame{
  border:1px solid #EBE5D9;border-radius:16px;background:#F3F1EA;
  padding:6px;overflow:hidden;
}
.world-map-svg{display:block;width:100%;height:auto}
/* 平面地圖時代的規則已移除 —— 地球儀的樣式在檔案後面，改用 .globe-* 命名。
   保留這段註解是為了說明：`.world-map-svg circle` 這種選擇器的優先度比
   `.globe-ocean` 高，留著會把地球儀的海與陰影一起蓋成陸地色。 */

.trace-best{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0;
  margin:0 0 14px;padding:11px 14px;border-radius:14px;
  border:1px solid #EBE5D9;background:#FAF7EE;
}
.trace-best span{font-size:11px;color:#6B6656;flex:0 0 auto}
.trace-best b{font-size:14px;font-weight:780;color:var(--bp-navy,#1B2A4A);min-width:0;overflow-wrap:anywhere}

.trace-search-input{margin-bottom:10px;
  width:100%;padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:#fff;
  color:var(--bp-navy,#1B2A4A);font:inherit;font-size:13px;
}

/* ===== 國家選擇器 =====
   它不是 <select>（191 個國家沒辦法在原生選單裡搜尋），但**沒有理由長得不一樣**。
   外觀完全交給上面那幾條 input/textarea/select 的規則去決定 —— 這裡只留版面。
   把數值抄一份過來是行不通的：那些規則後面還有覆蓋，抄完馬上就對不上。 */
.country-trigger{
  display:flex;align-items:center;gap:8px;width:100%;min-width:0;
  /* 名稱是單行（超出用省略號），所以直接固定成跟其他欄位一樣高 —— 只給
     min-height 的話，按鈕裡那一行文字的行高會把它撐高 2px。 */
  height:var(--ui-control-h);line-height:1.5;
  font:inherit;text-align:left;cursor:pointer;
}
.country-trigger:not(.has-value){opacity:.62}
.country-trigger>span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 箭頭跟著文字色走，深底淺底都看得到。 */
.country-trigger-caret{flex:0 0 auto;color:inherit;opacity:.7;font-size:11px}
.country-picker{display:flex;flex-direction:column;gap:10px}
.country-picker-search{
  width:100%;padding:11px 13px;border-radius:12px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:#fff;
  color:var(--bp-navy,#1B2A4A);font:inherit;font-size:13.5px;
}
.country-picker-list{display:flex;flex-direction:column;max-height:52vh;overflow-y:auto}
.country-option{
  display:flex;align-items:baseline;gap:9px;min-width:0;
  padding:11px 4px;border:0;border-bottom:1px solid #EBE5D9;background:transparent;
  text-align:left;font:inherit;
}
.country-option-zh{font-size:14px;font-weight:740;color:var(--bp-navy,#1B2A4A);flex:0 0 auto}
.country-option-en{font-size:11px;color:#6B6656;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.country-option.active .country-option-zh{color:#8A6A22}
.country-picker-empty{padding:18px 4px;font-size:12.5px;color:#6B6656;text-align:center}
/* ===== 旅程的國家清單（可多選）===== */
.country-list-field{display:flex;flex-direction:column;gap:9px;min-width:0}
.country-list-chips{display:flex;gap:7px;flex-wrap:wrap;min-width:0}
.country-list-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 8px 6px 12px;border-radius:999px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:#fff;
  color:var(--bp-navy,#1B2A4A);font-size:12.5px;font-weight:720;
  max-width:100%;min-width:0;
}
.country-list-chip button{
  border:0;background:transparent;color:#6B6656;
  font-size:14px;line-height:1;padding:2px 4px;flex:0 0 auto;
}
.country-list-empty{font-size:12px;color:#6B6656}
.trip-country-extra{margin-top:9px}
.world-map-note{
  margin-top:10px;padding:10px 12px;border-radius:12px;
  border:1px dashed var(--bp-line,#D8D0BC);background:#FAF7EE;
  font-size:11.5px;line-height:1.6;color:#4A4436;
}
/* ===== 足跡：地圖／清單兩種模式 ===== */
.trace-mode{display:flex;gap:6px;margin:0 0 12px;padding:4px;border-radius:999px;background:#EDEAE3}
.trace-mode-btn{
  flex:1 1 0;min-width:0;min-height:34px;border:0;border-radius:999px;
  background:transparent;color:#6B6656;font-size:13px;font-weight:760;
}
.trace-mode-btn.active{background:var(--bp-navy,#1B2A4A);color:#FAF7EE}
.trace-map-summary{margin:0 2px 10px;font-size:12.5px;font-weight:720;color:var(--bp-navy,#1B2A4A)}
.trace-map-hint{margin:10px 2px 0;font-size:11px;color:#6B6656;line-height:1.6}
/* 地圖模式下的地圖佔滿可用高度 —— 使用者要的是「一整頁的地圖」。 */
.trace-map-frame-tall .world-map-frame{height:min(56vh,440px);padding:0}
.world-map-frame{
  touch-action:none;              /* 縮放與拖曳自己處理，交給瀏覽器會變成捲頁 */
  -webkit-user-select:none;user-select:none;
  cursor:grab;
}
.world-map-frame:active{cursor:grabbing}
.world-map-frame .world-map-svg{height:100%;width:100%}
.map-controls{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap}
/* 控制鍵要小、而且夠透明 —— 它們是輔助，地圖才是主角。三顆都是同樣的小方塊：
   放大、縮小、回到全世界（⤢）。原本「回到全世界」是一顆很寬的文字鍵，把地圖
   擋掉一大塊。 */
.map-btn{
  width:32px;min-width:32px;height:32px;padding:0;border-radius:9px;
  border:1px solid rgba(27,42,74,.10);background:rgba(255,255,255,.38);
  color:var(--bp-navy,#1B2A4A);font-size:14px;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.map-btn:active{background:rgba(255,255,255,.88)}
/* 「回到全世界」用地球儀。原本用 ⤢，但那個符號在任何 App 裡都是「放到最大／
   縮到最小」的意思 —— 圖示講的話跟按鈕實際做的事不一樣，比沒有圖示更糟。 */
.map-btn-globe svg{width:17px;height:17px;display:block}
.map-btn.wide{min-width:0;font-size:10.5px;font-weight:720;padding:0 9px}
.map-zoom-level{font-size:10px;color:#6B6656;font-weight:720;min-width:34px}
/* ===== 足跡：全螢幕地圖 =====
   地圖模式時整個內容區都是地圖，頁首與底部導覽之外沒有別的東西。 */
/* 地圖模式：**整頁不能捲動，只有地圖會動**。
   position:fixed 讓頁面完全不能捲，overscroll-behavior:none 擋掉往下拉的「下拉
   重新整理」—— 使用者在地圖上往下滑時一直觸發重新整理，就是因為手勢傳到了瀏覽
   器手上。離開地圖模式時這個 class 會被移除，捲動也就恢復。 */
body.trace-map-fullscreen{
  position:fixed;width:100%;height:100%;
  overflow:hidden;overscroll-behavior:none;
}
/* 下拉重新整理是瀏覽器對**根元素**的手勢，只擋 body 不一定夠。 */
html:has(body.trace-map-fullscreen){overscroll-behavior:none}
body.trace-map-fullscreen #content{padding:0!important;overflow:hidden}
.trace-map-stage{position:relative}
.trace-map-stage .world-map{margin:0}
.trace-map-stage .world-map-frame{
  height:calc(100dvh - 168px);min-height:320px;
  border:0;border-radius:0;padding:0;background:#F3F1EA;
}
/* 全螢幕時控制列與圖例浮在地圖上，不佔掉地圖的高度。 */
/* 控制列要避開左下的返回鍵與右下的切換鍵，不然會疊在一起按不到。 */
/* 控制列改成靠右直排，放在右上角摘要卡下面 —— 放在下緣會跟左下的返回鍵、右下的
   切換鍵黏在一起，看起來很擠，手指也容易按錯。 */
.trace-map-stage .map-controls{
  position:absolute;right:10px;top:88px;left:auto;bottom:auto;
  margin:0;z-index:3;gap:5px;
  flex-direction:column;align-items:flex-end;
}
/* 控制列的每一顆同寬，才不會參差不齊。 */
.trace-map-stage .map-controls{width:auto}
.trace-map-stage .map-controls>*{width:32px;box-sizing:border-box}
.trace-map-stage .map-zoom-level{
  padding:2px 0;border-radius:7px;background:rgba(255,255,255,.38);
  color:#4A4436;font-weight:800;font-size:9.5px;
  text-align:center;line-height:1.4;
}
.trace-map-stage .map-btn{box-shadow:0 1px 5px rgba(27,42,74,.14)}
.trace-map-stage .world-map-note{position:absolute;left:12px;right:12px;top:64px;z-index:3;margin:0}
/* 摘要卡同時是「去過的國家」的入口 —— 國家標籤原本漂在畫面底部，卡在兩顆浮動
   按鈕與導覽列之間，幾乎點不到，國家一多還會變成一面標籤牆。 */
.trace-map-overlay{
  position:absolute;left:12px;top:12px;right:12px;z-index:3;
  display:flex;align-items:center;gap:10px;width:auto;text-align:left;
  padding:10px 13px;border-radius:14px;
  background:rgba(250,247,238,.94);border:1px solid #EBE5D9;
  box-shadow:0 2px 10px rgba(27,42,74,.12);
}
button.trace-map-overlay{cursor:pointer}
button.trace-map-overlay:active{background:rgba(240,235,225,.96)}
.trace-map-overlay-main{flex:1 1 auto;min-width:0}
.trace-map-overlay-caret{
  flex:0 0 auto;font-size:19px;line-height:1;color:var(--bp-navy,#1B2A4A);opacity:.55;
}
.trace-map-title{display:block;font-size:15px;font-weight:800;color:var(--bp-navy,#1B2A4A)}
.trace-map-sub{display:block;margin-top:2px;font-size:11.5px;color:#4A4436;line-height:1.5}

/* 去過的國家清單（從摘要卡點開） */
/* 視窗標題左邊的返回鍵。它就是同一列的關閉鍵，只是換一個圖示 —— 所以直接**沿用
   .close 這個既有元件**，這裡只補位置。先前我自己畫了一顆圓形外框按鈕，全站沒有
   第二個長那樣的東西（999px 的圓角在這個 app 是給標籤、徽章、進度條用的）；
   而且把尺寸抄一份過來也不對，.close 後面還有其他規則會蓋掉，抄完就對不上了。 */
.sheet-back{margin-right:2px}
/* 造訪紀錄：城市＋年份，沒有地點也能記。 */
.mark-row{display:flex;align-items:stretch;gap:6px}
.mark-row .mark-option{flex:1 1 auto;min-width:0}
.mark-visits{
  flex:0 0 auto;width:36px;padding:0;border:1px solid var(--bp-line,#D8D0BC);border-radius:10px;
  background:var(--card,#FAF7F0);color:var(--bp-navy,#1B2A4A);font-size:17px;line-height:1;cursor:pointer;
}
.mark-visits:active{background:#F1EEE4}
.visit-add{display:flex;gap:7px;align-items:center}
.visit-add .trace-note-input{flex:1 1 auto;min-width:0}
.visit-add .visit-year{flex:0 0 76px}
.visit-add .save{flex:0 0 auto;width:auto;margin:0}
.visit-list{display:flex;flex-direction:column;gap:6px}
.visit-row{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;
  border:1px solid var(--bp-line,#D8D0BC);background:var(--card,#FAF7F0);
}
/* 城市名與年份都是按鈕：點下去就地改，不必先刪再新增。 */
.visit-city{
  flex:1 1 auto;min-width:0;text-align:left;padding:0;border:0;background:transparent;
  font-size:14px;font-weight:740;color:var(--bp-navy,#1B2A4A);overflow-wrap:anywhere;cursor:pointer;
}
.visit-city:active{opacity:.6}
.visit-row.editing{flex-wrap:wrap;gap:8px}
.visit-row.editing .trace-note-input{flex:1 1 120px;min-width:0}
.visit-row.editing .visit-year{flex:0 0 84px}
.visit-row.editing .rsv-btn{flex:0 0 auto}
/* 一個城市一列，去過的年份排在右邊，每一個都可以單獨移除。 */
.visit-years{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
/* 編輯城市那一頁的年份標籤是靠左排的一整排，不是列尾的附註。 */
.visit-years.city-years{flex:1 1 auto;justify-content:flex-start;min-height:34px;align-items:center}
.visit-year-chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
  border:1px solid var(--bp-line,#D8D0BC);background:var(--bp-paper,#FAF7EE);
  color:#4A4436;font-size:11.5px;font-weight:720;cursor:pointer;
}
.visit-year-chip:active{background:#F1EEE4}
.visit-remove{
  flex:0 0 auto;width:30px;height:30px;padding:0;border:0;border-radius:999px;
  background:transparent;color:#8E2F2F;font-size:14px;line-height:1;cursor:pointer;
}
.map-country-list{display:flex;flex-direction:column;gap:6px;padding:2px 0 4px}
.map-country-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:12px 13px;border-radius:12px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:var(--card,#FAF7F0);cursor:pointer;
}
.map-country-row:active{background:#F1EEE4}
.map-country-name{flex:0 0 auto;font-size:15px;font-weight:780;color:var(--bp-navy,#1B2A4A)}
.map-country-note{flex:1 1 auto;min-width:0;font-size:11.5px;color:#5C5546}
.map-country-caret{flex:0 0 auto;font-size:17px;line-height:1;color:var(--bp-navy,#1B2A4A);opacity:.55}

/* 右下角的地圖／清單切換鍵，跟左下角的返回鍵同一種形狀。 */
.trace-mode-fab{
  position:fixed;right:12px;z-index:60;
  bottom:calc(72px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:9px 15px;border-radius:999px;
  border:1.5px solid var(--bp-navy,#1B2A4A);
  background:var(--bp-navy,#1B2A4A);color:#FAF7EE;
  font-size:12.5px;font-weight:760;
  box-shadow:0 4px 14px rgba(27,42,74,.22);
}
.trace-mode-fab svg{width:17px;height:17px;flex:0 0 auto}
.trace-mode-fab:active{opacity:.75}
body.has-trace-mode:not(.trace-map-fullscreen) #content{padding-bottom:58px}

/* 點地圖上的國家開的視窗（新增足跡已改用共用的編輯視窗） */
.country-sheet{display:flex;flex-direction:column;gap:12px}
/* 評分的可點區域：疊在圖形上的五個透明按鈕。心情、體力、足跡的星星共用。
   圖形大小不變，變大的是可以點的範圍（每格至少 44px 高）。 */
.checkin-rate-icons{position:relative}
/* touch-action:none：不關掉瀏覽器的預設觸控行為，手指一橫滑就變成捲頁而不是評分。 */
.rate-hits{position:absolute;inset:-6px 0;display:flex;z-index:1;touch-action:none}
.rate-hit{
  flex:1 1 0;min-width:0;min-height:44px;padding:0;
  border:0;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rate-hit:active{background:rgba(0,0,0,.05);border-radius:6px}
/* 同一列放在編輯視窗的深底上：底色與文字都得跟著換，不然就是深藍配深藍。 */
.checkin-rate.rate-on-dark{background:transparent;border-color:rgba(250,247,240,.26)}
.checkin-rate.rate-on-dark .checkin-rate-value{color:inherit}
.checkin-rate.rate-on-dark .checkin-clear{color:inherit!important;opacity:.75}
.checkin-rate.rate-on-dark .rate-hit:active{background:rgba(250,247,240,.12)}
.checkin-clear.is-hidden{display:none}
.trace-country-item .item-title{font-size:15px}
.item .item-meta .rate-icons{vertical-align:middle;margin-right:6px}
/* 國家選擇器疊在其他視窗之上（表單、編輯視窗都可能在底下）。 */
.country-picker-overlay{z-index:90}
.country-picker-overlay .editor-sheet{max-height:82vh}
/* 月曆格子裡的國家。只有跨國旅行才會出現 —— 單一國家的旅程每一格都寫同一個
   國名，只是雜訊。 */
.calendar-country{
  font-size:9px;font-weight:780;color:#8A5A1B;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ===== 地球儀 =====
   海是一顆圓，陸地畫在上面，最上層再蓋一層很淡的球面明暗 —— 沒有那層陰影，
   球看起來仍然是平的貼紙。 */
/* 「印在紙上的地球儀」：平的、沒有光澤，靠邊緣那一圈線讀出是一顆球。
   海用很淡的紙藍，陸地用站上的米色，國界是深藍細線 —— 國界要看得清楚，
   不然使用者不知道自己點到哪一國。 */
.world-map-svg .globe-ocean{fill:#E3EAEC;stroke:var(--bp-navy,#1B2A4A);stroke-width:2;stroke-opacity:.55}
.world-map-svg .globe-land path{fill:#F3EEE0;stroke:rgba(27,42,74,.42);stroke-width:.9;vector-effect:non-scaling-stroke}
.world-map-svg .globe-land path.visited{cursor:pointer;stroke:#8A4A0C;stroke-width:1.3;paint-order:stroke fill}
/* 六階深淺：1 年 / 2 年 / 3–4 / 5–6 / 7–10 / 10 年以上。
   同一個色相往下壓明度，每一階的差距刻意拉得夠開 —— 四階的時候去 3 年和去 8 年
   是同一個顏色，那張地圖就看不出哪裡是真的常去。 */
.world-map-svg .globe-land path.visited.level-1{fill:#F7D7A4}
.world-map-svg .globe-land path.visited.level-2{fill:#F0BE79}
.world-map-svg .globe-land path.visited.level-3{fill:#E5A253}
.world-map-svg .globe-land path.visited.level-4{fill:#D6822B}
.world-map-svg .globe-land path.visited.level-5{fill:#B76314}
.world-map-svg .globe-land path.visited.level-6{fill:#8E4708}
/* 最深的兩階配深色外框等於沒有外框，國界會糊成一片 —— 換成淺色的線。 */
.world-map-svg .globe-land path.visited.level-5,
.world-map-svg .globe-land path.visited.level-6{stroke:#E8C79A}
.world-map-svg .globe-shade{pointer-events:none;stroke:none}
.world-map-frame{background:transparent}
.trace-map-stage .world-map-frame{background:transparent}
/* ===== 足跡首頁：國家輪廓與世界進度 ===== */
.country-outline-box{
  flex:0 0 auto;width:48px;height:36px;margin-right:2px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:#F3EEE0;border:1px solid rgba(27,42,74,.12);
}
.country-outline{width:44px;height:32px;display:block}
.country-outline path{fill:#D6822B;stroke:#8A4A0C;stroke-width:.6;vector-effect:non-scaling-stroke}

.trace-cover{
  margin:0 0 14px;padding:13px 15px;border-radius:16px;
  border:1px solid #EBE5D9;background:#FAF7EE;
}
.trace-cover-main{display:flex;align-items:baseline;gap:7px}
.trace-cover-main b{font-size:26px;font-weight:800;color:var(--bp-navy,#1B2A4A);line-height:1}
.trace-cover-main span{font-size:12px;color:#6B6656;font-weight:720}
.trace-cover-bar{
  margin-top:9px;height:7px;border-radius:999px;background:#EDEAE3;overflow:hidden;
}
.trace-cover-bar i{display:block;height:100%;border-radius:999px;background:#D6822B}
.trace-cover-note{margin-top:7px;font-size:11.5px;color:#4A4436}
/* 只標記「去過」、還沒有任何地點的國家：比有紀錄的淡，但仍然看得出走過。 */
.world-map-svg .globe-land path.visited.been-only{fill:#FAECD6;stroke:#B98A4E;stroke-width:1}
/* 一個國家的統計表。深色數字配淺米底，跟站上其他統計區塊同一套。 */
/* .section 在別處被設成 flex row wrap（給並排的卡片用）。統計表是由上往下的
   幾個區塊，不宣告的話會被排成一橫排，長條圖就被擠成 72px 寬看不見。 */
.trace-stats{display:block!important;margin-bottom:14px}
.trace-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.trace-stat{
  padding:10px 12px;border-radius:12px;
  background:var(--card,#FAF7F0);border:1px solid var(--line,#DCD3C2);
}
.trace-stat b{display:block;font-size:22px;font-weight:820;color:var(--bp-navy,#1B2A4A);line-height:1.1}
.trace-stat span{display:block;margin-top:3px;font-size:11.5px;color:#5C5546}
/* 分布圖是可以點的：點 5 星就只看五星的地方。按鈕的外觀維持原本的長條樣子，
   選中時整條反白，才看得出「現在正在看的是哪一段」。 */
.trace-stat-bars{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.trace-stat-bar{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:4px 6px;margin:0 -6px;border:0;border-radius:8px;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.trace-stat-bar:disabled{cursor:default;opacity:.55}
.trace-stat-bar:not(:disabled):active{background:#EDE7D9}
.trace-stat-bar.active{background:var(--bp-navy,#1B2A4A)}
.trace-stat-bar.active .trace-stat-bar-label,
.trace-stat-bar.active .trace-stat-bar-n{color:var(--bp-cream,#F3EEE0)}
.trace-stat-bar.active .trace-stat-bar-track{background:rgba(250,247,240,.28)}
.trace-stat-bar-label{flex:0 0 34px;font-size:11.5px;color:#5C5546}
.trace-stat-bar-track{flex:1 1 auto;height:9px;border-radius:999px;background:#E7E0D0;overflow:hidden}
.trace-stat-bar-track i{display:block;height:100%;border-radius:999px;background:#D6A54B}
.trace-stat-bar-n{flex:0 0 22px;text-align:right;font-size:11.5px;font-weight:740;color:#2A2416}
.trace-stat-types{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
/* 統計裡可以點的字：想再去、類型標籤。 */
.trace-stat-inline{
  border:1px solid var(--bp-line,#D8D0BC);background:var(--card,#FAF7F0);
  color:var(--bp-navy,#1B2A4A);font-size:11.5px;font-weight:740;
  padding:4px 9px;border-radius:999px;cursor:pointer;
}
.trace-stat-inline:active{background:#EDE7D9}
.trace-stat-inline.active{
  background:var(--bp-navy,#1B2A4A);border-color:var(--bp-navy,#1B2A4A);
  color:var(--bp-cream,#F3EEE0);
}
/* 篩選中的說明列 */
/* 地區裡按類型分組的小標題。刻意做得很輕 —— 它是給眼睛落腳用的，不是另一層階層。 */
/* 「在哪裡」的標籤：只在清單跨地區／跨國家時出現，做得比其他標籤深一點，
   因為它是這種情況下最先要回答的問題。 */
/* 想去：還沒去過，所以沒有星星，用一個標籤說明它是什麼。刻意跟評分的金色分開。 */
.trace-quick-tag.wish{background:#E6EEF7;color:#3D628C;font-weight:780}
.editor-field-wrap.is-hidden{display:none}
.trace-quick-tag.place{background:var(--bp-cream,#F3EEE0);color:#4A4436;font-weight:780}
.trace-group{margin-bottom:14px}
.trace-group-head{display:flex;align-items:baseline;gap:7px;margin:0 2px 7px}
.trace-group-title{font-size:12.5px;font-weight:800;color:#4A4436}
.trace-group-count{font-size:11px;font-weight:740;color:#6B6656}
.trace-filter-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 10px;padding:9px 12px;border-radius:11px;
  background:var(--bp-cream,#F3EEE0);border:1px solid var(--bp-line,#D8D0BC);
  font-size:12.5px;font-weight:740;color:#2A2416;
}
.trace-stat-top{font-size:12.5px;color:#2A2416}
.trace-stat-top b{font-weight:780}
.trace-stat-top span{display:block;margin-top:2px;color:#5C5546}
.trace-mark-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.trace-mark-hint{font-size:11px;color:#6B6656;flex:1 1 140px;min-width:0;line-height:1.5}
.mark-option{align-items:center}
.mark-option .mark-check{
  flex:0 0 auto;width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--bp-line,#D8D0BC);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:var(--bp-navy,#1B2A4A);
}
.mark-option.active .mark-check{background:#D6822B;border-color:#8A4A0C;color:#fff}
.mark-option[disabled]{opacity:.72}
/* 摘要要能被壓縮 —— flex:0 0 auto 不會縮，去過十個城市的那一行就直接衝出容器
   （影片裡日本那一列的城市名整串蓋過右邊的按鈕）。 */
.mark-option .country-option-en{margin-left:auto;flex:0 1 auto;min-width:0}

/* ============================================================
   ===== 全站表單規則 =====
   兩條，都是使用者提出來的，套用到所有表單，新增欄位時不必再各自處理。

   1) **輸入欄位一律 16px。** iOS Safari 只要聚焦在字級小於 16px 的欄位，就會自動
      把整頁放大（而且不會自己縮回去）。使用者：「我不希望網頁出現自動放大的情況」。
      這是唯一可靠的解法 —— viewport 加 maximum-scale 會連手動縮放一起關掉，那是
      無障礙上不該做的事。
   2) **欄位之間一定要有間距。** 使用者：「不要有欄位黏在一起的情況」。編輯視窗
      本來就有（.editor-field-wrap），這裡補上視窗裡那些自己刻的表單。
   ============================================================ */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select{font-size:16px!important}

.new-trip-form,
.new-trace-form,
.country-sheet,
.country-picker,
.favorite-schedule-fields{gap:14px}
/* 動作列也是一個功能區塊，不能貼著上面那一區 —— 使用者：「編輯按鈕還黏著上面
   那一欄」。視窗裡任何一組按鈕、任何一個區塊之間都留同樣的 14px。 */
.record-detail-actions{margin-top:14px}
/* 視窗標題與底下第一個欄位之間同樣要留 —— 使用者：「HEADER 和第一個欄位也黏著」。
   .sheet-head 用的是 margin 簡寫（左右負值把分隔線推成滿版），所以這裡只覆蓋下緣。 */
.sheet-head{margin-bottom:14px}
.generic-sheet .section+.section,
.generic-sheet .section+.record-detail-actions,
.generic-sheet .trip-note+.section{margin-top:14px}
.new-trip-form>label,
.new-trace-form>label{margin-top:0}

/* ===== 從其他旅行複製 ===== */
.copy-section-title{font-size:12px;color:var(--muted);font-weight:700;margin:14px 0 9px}
.copy-source-list{display:grid;gap:9px;margin-bottom:14px}
.copy-source-item{
 width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-align:left;
 background:var(--bp-paper);border:1.5px solid var(--bp-navy);border-radius:10px;padding:12px 14px
}
.copy-source-item.active{background:var(--bp-navy)}
.copy-source-item.active .copy-source-name,.copy-source-item.active .copy-source-meta{color:var(--bp-cream)}
.copy-source-name{font-weight:760;font-size:15px}
.copy-source-meta{font-size:12px;color:var(--muted)}
.copy-status{padding:14px 2px;color:var(--muted);font-size:13px}
.copy-kind-list{display:grid;gap:9px;margin-top:14px}
/* 視窗內的 label 是「欄位標題」的樣式（display:block、小字、灰色），原生的
   checkbox 又被撐成滿寬的輸入框 —— 兩個都得擋掉，做法沿用篩選視窗那一套：
   把原生的框藏起來，自己畫一個。 */
.copy-kind{
 display:flex!important;align-items:center;gap:11px;position:relative;
 background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
 margin:0!important;font-size:15px;color:var(--text)
}
.copy-kind.selected{border-color:var(--primary)}
.copy-kind.empty{opacity:.5}
.copy-kind input{position:absolute;opacity:0;pointer-events:none;inline-size:auto!important}
.copy-kind-box{
 flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);
 display:flex;align-items:center;justify-content:center;background:#fff
}
.copy-kind.selected .copy-kind-box{background:var(--primary);border-color:var(--primary)}
.copy-kind.selected .copy-kind-box::after{
 content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
 transform:rotate(-45deg) translate(1px,-1px)
}
.copy-kind-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.copy-kind-label{font-weight:720;font-size:15px}
.copy-kind-meta{font-size:12px;color:var(--muted)}
.copy-actions{margin-top:14px}
.copy-actions .save{width:100%;margin:0}
.copy-actions .save[disabled]{opacity:.45}

/* ===== 我的花費：過往花費統計 =====
   每一個區塊之間、區塊裡的每一組欄位之間，都要有 14px 的間距（全站規則，見開發
   手冊 §4.2）。先前這一頁的區塊是直接疊在一起的。 */
.spend-block{
 background:var(--surface);border:1px solid var(--line);border-radius:14px;
 padding:14px;margin-top:14px
}
/* 這一頁沒有外層的 .section 卡片了（整頁只有一組內容，外面再包一層框等於畫兩層
   邊框）。每一塊自己就是一張卡，一律 14px。 */
.spend-block-title{font-size:14px;font-weight:800;color:var(--text)}
.spend-block-note{font-size:12px;color:var(--muted);margin-top:14px}
.spend-block-title+.spend-stat-list,.spend-block-note+.spend-stat-list{margin-top:14px}
.spend-stat-list{display:grid;gap:14px}
.spend-stat-row{display:grid;gap:4px}
.spend-stat-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.spend-stat-label{font-size:14px;font-weight:720;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spend-stat-amount{font-size:14px;font-weight:800;color:var(--bp-navy);flex:0 0 auto}
.spend-stat-meta{font-size:12px;color:var(--muted)}
.spend-stat-bar{height:6px;border-radius:999px;background:var(--surface2,#EDE9E0);overflow:hidden;margin-top:2px}
.spend-stat-fill{height:100%;background:var(--bp-navy);border-radius:999px}

.spend-currency-row,.spend-sort-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.spend-currency-chip,.spend-sort-chip{
 border:1.5px solid var(--line);background:var(--surface);color:var(--muted);
 border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;min-height:36px
}
.spend-currency-chip.active,.spend-sort-chip.active{background:var(--bp-navy);border-color:var(--bp-navy);color:#fff}
/* 切換列跟它下面那份清單是兩個東西，不可以黏在一起。用 *+* 而不是指定某一種
   清單 —— 之後在切換列下面放什麼都一樣有間距。 */
.spend-block .spend-sort-row+*{margin-top:14px}

/* ===== 間距的三個值 =====
   4px  同一個欄位的內部（標籤↔數值、名稱↔備註）
   9px  同一組裡的重複項目（清單的列、並排的卡片）
   14px 不同功能、不同區塊（頁標題↔內容、切換列↔清單、區塊↔區塊）
   距離是在說「哪些東西是一組的」—— 同一種關係在不同頁面用不同數字，讀者就沒辦法
   從距離推斷任何事。這裡先收掉最外層那一層的抖動（先前 10／12 混用）。 */
.section-head.page-head+*{margin-top:14px}
.favorite-category-tabs+.rsv-list{margin-top:14px}
.spend-total-block{text-align:left}
.spend-total-label{font-size:12px;color:var(--muted)}
.spend-total-amount{font-size:26px;font-weight:820;color:var(--bp-navy);margin-top:4px;letter-spacing:-.5px}
.spend-warn{font-size:12.5px;color:var(--muted);line-height:1.6}
.spend-block .budget-target-actions{margin-top:14px}
/* 旅程列表的每一列之間也要有間距（先前是 0，整份黏成一塊）。 */
.spend-block .trip-spend-list{display:grid;gap:14px}
.spend-block .trip-spend-row{margin:0}

/* ===== 跨旅程的類別比較 ===== */
/* 趨勢圖左右捲。兩個地方不能寫：
   1) min-width:100% / width:100% —— 那會把 SVG 拉伸，viewBox 跟著放大，**連 X 軸
      的文字一起變大**（使用者：「X 軸的文字太大了」）。改成由 JS 依實際可用寬度
      算出 SVG 寬度，一比一畫出來，字級就是字級。
   2) touch-action:pan-x —— 它宣告這一塊只吃水平手勢，於是手指放在圖上時**整頁都
      捲不動**（使用者：「甚至也無法滑動整個頁面」）。內部的上下捲已經由
      overflow-y:hidden 擋掉了，不需要再限制手勢。 */
.spend-trend-chart{
 margin-top:14px;background:var(--surface2,#F3EFE6);border-radius:12px;padding:8px 4px;
 overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
 scrollbar-width:none
}
.spend-trend-chart::-webkit-scrollbar{display:none}
.spend-trend-chart svg{display:block;height:auto}
.spend-trend-x{font-size:10px;fill:var(--muted);font-family:var(--bp-mono,ui-monospace,monospace)}
/* Y 軸固定在捲動區外面：左右滑動趨勢時刻度要一直看得到，也不會壓在資料線上。 */
.spend-trend-frame{display:flex;align-items:flex-start;margin-top:14px;background:var(--surface2,#F3EFE6);border-radius:12px;padding:8px 4px}
.spend-trend-frame .spend-trend-chart{margin-top:0;background:none;border-radius:0;padding:0;flex:1 1 auto;min-width:0}
.spend-trend-axis{flex:0 0 auto;display:block;height:auto}
/* Y 軸標線：淡到不會跟資料線搶眼睛，但看得出高度。 */
.spend-trend-grid{stroke:var(--line);stroke-width:1;opacity:.55}
/* 換算設定：一行說明加一個修改入口，取代原本那排幣別按鈕。 */
.spend-currency-line{
 display:flex;align-items:center;justify-content:space-between;gap:9px;
 font-size:13px;color:var(--muted);line-height:1.6
}
.spend-currency-line b{color:var(--text)}
.spend-rate-list{display:grid;gap:9px;margin-top:4px}
.spend-rate-row{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text)}
.spend-rate-row input{flex:1 1 auto;margin:0;width:auto;min-width:0}
.spend-trend-y{font-size:9px;fill:var(--muted);font-family:var(--bp-mono,ui-monospace,monospace);opacity:.85}
.spend-trend-legend{display:grid;gap:14px;margin-top:14px}
.spend-trend-chip{
 display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:8px;
 width:100%;text-align:left;background:none;border:0;padding:0;color:var(--text)
}
.spend-trend-chip.dim{opacity:.4}
.spend-trend-dot{width:10px;height:10px;border-radius:50%}
.spend-trend-name{font-size:14px;font-weight:720;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spend-trend-latest{font-size:14px;font-weight:800;color:var(--bp-navy)}
/* 這一行現在寫的是「最近一趟 2026/10」，不是增減金額，所以沒有漲跌顏色。 */
.spend-trend-delta{grid-column:2/4;font-size:12px;color:var(--muted)}
.spend-trend-chip.active .spend-trend-name{text-decoration:underline}

.spend-mix-row{display:grid;gap:4px}
.spend-mix-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--surface2,#EDE9E0);margin-top:2px}
.spend-mix-seg{display:block;height:100%}

/* ===== V123 匯入 =====
   一頁裡有三段互不相干的事（拿範本、選檔案、確認內容），所以用區塊分開，
   區塊之間留 14px，區塊裡的行留 9px。 */
.import-block{margin-top:14px}
.import-block:first-child{margin-top:0}
.import-block-title{font-size:15px;font-weight:600;color:var(--text)}
.import-block-note{margin-top:4px;font-size:13px;color:var(--muted);line-height:1.6}
.import-template-list{margin-top:9px;display:grid;gap:9px}
.import-template{
 display:flex;align-items:center;gap:11px;width:100%;text-align:left;
 background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text)
}
.import-template-main{flex:1 1 auto;min-width:0;display:grid;gap:4px}
.import-template-label{font-size:15px;font-weight:600}
.import-template:disabled{opacity:.55;cursor:default}
.import-template-meta{font-size:12px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.import-template-action{flex:none;font-size:14px;color:var(--primary);font-weight:600}
.import-file{display:block;margin-top:9px;position:relative}
.import-file input{position:absolute;inset:0;opacity:0;width:100%;height:100%}
.import-file span{
 display:flex;align-items:center;justify-content:center;
 border:1.5px dashed var(--line);border-radius:12px;padding:16px;font-size:15px;color:var(--primary);font-weight:600
}
.import-result-list{margin-top:9px;display:grid;gap:9px}
.import-result{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.import-result.bad{border-color:var(--danger,#C0563F)}
.import-result-head{display:flex;align-items:baseline;gap:9px}
.import-result-name{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.import-result-count{flex:none;font-size:14px;color:var(--muted)}
.import-result-kind{margin-top:9px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.import-result-kind select{flex:1 1 auto;margin:0;width:auto}
.import-result-note{margin-top:9px;font-size:13px;color:var(--muted);line-height:1.6}
.import-issue-list{margin-top:9px;border-top:1px solid var(--line);padding-top:9px;display:grid;gap:4px}
.import-issue-title{font-size:13px;font-weight:600;color:var(--text)}
.import-issue{font-size:13px;color:var(--muted);line-height:1.6}
.import-summary{font-size:14px;color:var(--text);line-height:1.6}
.import-actions{margin-top:9px;display:flex;align-items:center;gap:9px}
.import-actions .save{flex:1 1 auto;margin:0;width:auto}
.import-done{margin-top:4px;font-size:14px;color:var(--text);line-height:1.6}

.external-readonly-banner{
  position:sticky;
  top:0;
  z-index:1200;
  padding:7px 12px;
  background:#304164;
  color:#fff;
  text-align:center;
  font:600 12px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.02em
}
.external-readonly-banner:not(.is-alert){
  display:none
}
.external-write-banner.is-alert{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:30px
}
.journey-google-button{
  display:inline-flex;
  min-height:24px
}
.journey-login-gate{
  position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px;
  background:linear-gradient(155deg,#f6f0e7 0%,#edf1f7 48%,#dfe7f2 100%);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.journey-login-gate.is-hidden{display:none}
.journey-login-card{
  width:min(100%,420px);box-sizing:border-box;padding:38px 30px 30px;border:1px solid rgba(48,65,100,.13);
  border-radius:28px;background:rgba(255,255,255,.9);box-shadow:0 24px 70px rgba(48,65,100,.16);text-align:center
}
.journey-login-mark{width:58px;height:58px;margin:0 auto 18px;border-radius:19px;display:grid;place-items:center;background:#304164;color:#fff;font:700 28px/1 Georgia,serif;box-shadow:0 10px 24px rgba(48,65,100,.25)}
.journey-login-eyebrow{color:#8b6f4e;font-size:11px;font-weight:800;letter-spacing:.22em}
.journey-login-card h1{margin:9px 0 10px;color:#263650;font:700 28px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.journey-login-card p{margin:0 auto 26px;max-width:300px;color:#697386;font-size:14px;line-height:1.65}
.journey-login-card .journey-google-button{display:flex;justify-content:center;min-height:40px}
.journey-login-status{margin-top:14px;color:#6e7788;font-size:12px}
.journey-login-footnote{margin-top:26px;padding-top:20px;border-top:1px solid #e7eaf0;color:#9299a5;font-size:11px;line-height:1.6}
@media(max-width:520px){.journey-login-card{padding:32px 22px 26px;border-radius:24px}.journey-login-gate{padding:16px}}