/* Sarabun โหลดจาก Google Fonts (ชุดเดียวกับแอปหลัก) — ห้ามประกาศ @font-face
   ชื่อ Sarabun ชี้ไปไฟล์ฟอนต์หัวกลมเดิมเด็ดขาด เพราะจะทับฟอนต์จริงเงียบ ๆ
   (เคยเกิดตอนแปลงชื่อฟอนต์ 2026-08-02) · Poppins ยังใช้กับตัวเลข/อังกฤษ */
@font-face{font-family:Poppins;src:url('../puppup-prototype/fonts/poppins-latin-400-normal.woff2');font-weight:400}@font-face{font-family:Poppins;src:url('../puppup-prototype/fonts/poppins-latin-600-normal.woff2');font-weight:600}
@font-face{font-family:Anuphan;src:url('../puppup-prototype/fonts/anuphan-thai-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Anuphan;src:url('../puppup-prototype/fonts/anuphan-thai-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Anuphan;src:url('../puppup-prototype/fonts/anuphan-thai-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Anuphan;src:url('../puppup-prototype/fonts/anuphan-thai-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--ink:#303c4d;--muted:#7d8796;--line:#e7e4e1;--paper:#fffdf9;--cream:#f8f5ef;--pink:#e86f91;--pink-soft:#fde8ee;--blue:#b9dfea;--blue-soft:#eaf6f8;--sage:#a8c8b4;--sage-soft:#eaf3ed;--lav:#c7b9dc;--danger:#d65b69;--shadow:0 16px 45px rgba(77,74,84,.10)}
*{box-sizing:border-box}body{margin:0;background:#ebe8e3;color:var(--ink);font-family:Sarabun,Poppins,system-ui,sans-serif}.prototype-note{height:30px;background:#3d4958;color:#fff;text-align:center;font:600 11px/30px Poppins,sans-serif;letter-spacing:.08em}.app-shell{width:min(1480px,100%);min-height:calc(100vh - 30px);margin:auto;background:var(--cream);display:grid;grid-template-columns:220px 1fr}.side-rail{background:#fffaf5;border-right:1px solid var(--line);padding:24px 14px;display:flex;flex-direction:column}.brand,.rail-foot{display:flex;gap:10px;align-items:center;padding:0 8px}.brand>span{width:42px;height:42px;border-radius:15px;background:var(--pink-soft);display:grid;place-items:center;font-size:23px}.brand div,.rail-foot div,.topbar>div:nth-child(2){display:grid}.brand small,.rail-foot small,.topbar small{color:var(--muted)}.main-nav{display:grid;gap:6px;margin-top:35px}.main-nav button,.mobile-nav button{border:0;background:transparent;color:var(--muted);font:600 15px Sarabun;padding:11px 12px;border-radius:14px;display:flex;align-items:center;gap:12px;cursor:pointer}.main-nav button i{width:26px;height:26px;border-radius:9px;background:#f2efeb;display:grid;place-items:center;font-style:normal}.main-nav button.active{background:var(--pink-soft);color:#b84f70}.main-nav button.active i{background:#fff}.rail-foot{margin-top:auto}.avatar{width:36px;height:36px;border:0;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font-weight:700}.workspace{min-width:0}.topbar{height:74px;background:rgba(255,253,249,.92);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 28px;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.icon-btn{border:0;background:#f2efeb;width:36px;height:36px;border-radius:12px;font-size:21px;cursor:pointer}.back{border:0;background:#f2efeb;height:36px;border-radius:12px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;gap:3px;padding:0 13px 0 10px;font:700 13px Sarabun,sans-serif;color:var(--ink);white-space:nowrap}.back span{font-size:19px;line-height:1}.top-actions{margin-left:auto;display:flex;gap:8px}.screen{display:none;padding:24px 28px 46px}.screen.active{display:block}.map-hero{aspect-ratio:1931/814;height:auto;border-radius:30px;overflow:hidden;position:relative;background:#cfe1e5;box-shadow:var(--shadow)}.map-hero>img{width:100%;height:100%;object-fit:contain;display:block}.day-summary{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px 20px;margin-top:14px;box-shadow:0 6px 18px rgba(40,66,107,.06)}.day-summary>div:nth-child(2)>span{font:600 11px Poppins;color:var(--pink);letter-spacing:.1em}.day-summary h1{font:700 23px Sarabun,Poppins;margin:2px 0}.day-summary p{margin:0;color:var(--muted)}.day-number{width:62px;height:62px;border-radius:50%;background:var(--pink-soft);display:grid;place-content:center;text-align:center}.day-number span{font:600 9px Poppins;color:var(--pink)}.day-number strong{font:600 23px Poppins}.hero-copy span,.page-head span,.eyebrow{font:600 11px Poppins,sans-serif;letter-spacing:.1em;color:#bd5a78}.hero-copy h1,.page-head h1{font:800 28px Sarabun;margin:3px 0}.hero-copy p,.page-head p{margin:0;color:var(--muted)}.today-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:14px}.paper-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 6px 18px rgba(78,73,72,.05)}.section-kicker{font-weight:700;color:#b34e6e}.pulse{width:9px;height:9px;background:var(--pink);border-radius:50%;display:inline-block;margin-right:6px}.next-time{display:flex;align-items:baseline;gap:12px;margin:12px 0}.next-time strong{font:600 32px Poppins}.next-time span{color:var(--muted)}.next-main{display:flex;gap:14px;align-items:center}.next-main img{width:72px;height:72px;object-fit:contain}.next-main h2{font:800 22px Sarabun;margin:0}.next-main p{margin:4px 0;color:var(--muted)}.member-presence{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.member-presence>span{background:#f7f4f0;border-radius:99px;padding:5px 9px 5px 5px;font-size:12px;display:flex;gap:5px;align-items:center}.face{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-weight:700}.face.pink{background:#f6bfd0}.face.blue{background:#c8e5ed}.face.cream{background:#f0dfbf}.card-actions,.sheet-actions{display:flex;gap:9px;justify-content:flex-end}.primary-btn,.soft-btn,.add-line{border:0;border-radius:12px;padding:10px 16px;font:700 14px Sarabun;cursor:pointer}.primary-btn{background:var(--pink);color:#fff;box-shadow:0 6px 15px rgba(232,111,145,.25)}.soft-btn{background:var(--pink-soft);color:#a54563}.section-title{display:flex;justify-content:space-between}.section-title h3{margin:3px 0;font:800 20px Sarabun}.section-title small{color:var(--muted)}.weather-now{display:flex;gap:12px;align-items:center;margin:18px 0}.weather-now>span{font-size:42px}.weather-now strong{font:600 38px Poppins}.weather-now div{color:var(--muted);font-size:13px}.weather-periods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.weather-periods div{display:grid;text-align:center;background:#f4f2ef;border-radius:14px;padding:10px}.weather-periods div.selected{background:var(--blue-soft);outline:1px solid var(--blue)}.weather-periods small{color:var(--muted)}.weather-tip{background:#fff3dc;padding:9px;border-radius:11px;font-size:12px}.money-strip{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:center}.money-strip>div{display:grid}.money-strip span{color:var(--muted)}.money-strip strong{font:600 20px Poppins}.money-strip small{color:var(--muted)}.page-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.plan-layout{max-width:960px;margin:auto}.day-tabs{display:flex;gap:8px;overflow:auto;margin-bottom:14px}.day-tabs button,.filters button,.segmented button{border:1px solid var(--line);background:var(--paper);border-radius:13px;padding:9px 14px;font:700 13px Sarabun;color:var(--muted)}.day-tabs button{min-width:120px;display:grid}.day-tabs button small{font-weight:400}.day-tabs button.active,.filters button.active,.segmented button.active{background:var(--pink);color:#fff;border-color:var(--pink)}.plan-list{display:grid;gap:9px}.plan-item{display:grid;grid-template-columns:24px 62px 58px 1fr auto;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:12px;cursor:grab}.plan-item.dragging{opacity:.45}.drag{color:#a8a4a0;font-size:20px}.plan-item time{font:600 14px Poppins}.plan-item img{width:54px;height:54px;object-fit:contain}.plan-item b{display:block}.plan-item small{display:block;color:var(--muted)}.plan-item em{font-style:normal;color:#b75070;background:var(--pink-soft);padding:2px 7px;border-radius:99px;font-size:10px}.plan-cost{text-align:right;font:600 14px Poppins}.drop-day{border:2px dashed #d9d3cd;color:var(--muted);text-align:center;border-radius:16px;padding:14px;margin-top:12px}.bill-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.bill-summary>div{display:grid}.bill-summary strong{font:600 22px Poppins;margin:4px 0}.bill-summary small{color:var(--muted)}.filters{display:flex;gap:8px;margin:16px 0;overflow:auto}.bill-table{padding:2px 18px}.bill-row{display:grid;grid-template-columns:60px 1fr auto;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.bill-row:last-child{border:0}.bill-row img{width:54px;height:54px;object-fit:contain}.bill-row small{display:block;color:var(--muted)}.tag{display:inline-block!important;width:max-content;margin-top:5px;padding:3px 8px;border-radius:99px;font-size:10px}.tag.shared{background:var(--blue-soft);color:#397b8f}.tag.private{background:#f1efed}.payer{text-align:right}.payer b,.payer em{display:block}.payer b{font:600 15px Poppins}.payer em{font-style:normal;color:var(--muted);font-size:11px}.privacy-note{background:var(--blue-soft);border:1px solid var(--blue);padding:12px;border-radius:14px;margin-bottom:14px}.wallet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.wallet-card{padding:22px;border-radius:24px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.wallet-card.jpy{background:linear-gradient(140deg,#f9dce5,#f7eef2)}.wallet-card.thb{background:linear-gradient(140deg,#dbeff2,#edf7f4)}.wallet-top{display:flex;justify-content:space-between}.wallet-card>strong{display:block;font:600 30px Poppins;margin:18px 0 2px}.wallet-card>small{color:var(--muted)}.wallet-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.wallet-stats span{display:grid;color:var(--muted);font-size:12px}.wallet-stats b{color:var(--ink);font:600 14px Poppins}.wallet-activity{margin-top:14px}.wallet-activity>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}.wallet-activity span{display:grid}.wallet-activity small{color:var(--muted)}.wallet-activity b{font:600 14px Poppins}.wallet-activity .plus{color:#4d9270}.manage-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.member-row{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.member-row span{display:grid}.member-row small{color:var(--muted)}.member-row em{font-style:normal;color:#4d7f70;background:var(--sage-soft);padding:3px 7px;border-radius:99px;font-size:10px}.close-lines{display:grid;gap:8px;margin:16px 0}.close-lines span,.close-block span{display:flex;justify-content:space-between}.mobile-nav,.mobile-fab{display:none}.sheet-mask{position:fixed;inset:0;background:rgba(39,44,51,.38);opacity:0;pointer-events:none;transition:.2s;z-index:50}.sheet-mask.open{opacity:1;pointer-events:auto}.bottom-sheet{position:fixed;right:0;top:0;width:min(480px,100%);height:100%;background:var(--paper);z-index:51;padding:28px;transform:translateX(105%);transition:.28s;overflow:auto}.bottom-sheet.open{transform:none}.sheet-handle{display:none}.sheet-close,.dialog-close{position:absolute;right:18px;top:14px;border:0;background:#f1efec;width:34px;height:34px;border-radius:50%;font-size:22px}.sheet-step{display:none}.sheet-step.active{display:grid;gap:14px}.sheet-step h2{font:800 26px Sarabun;margin:0}.sheet-step label{display:grid;gap:5px;font-weight:700}.sheet-step input,.sheet-step select{width:100%;border:1px solid #d9d5d0;background:#fff;border-radius:12px;padding:11px;font:14px Sarabun;color:var(--ink)}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:7px}.amount-input{display:grid;grid-template-columns:44px 1fr;align-items:center;border:2px solid var(--pink);border-radius:16px;overflow:hidden}.amount-input span{font:600 25px Poppins;text-align:center}.amount-input input{border:0;font:600 32px Poppins}.conversion{text-align:right;color:var(--muted);margin:0}.split-row{display:grid;grid-template-columns:1fr 120px 20px;gap:7px;align-items:center}.add-line{color:#a54563;background:transparent;border:1px dashed #d99bb0}.allocated,.share-result{background:var(--sage-soft);padding:11px;border-radius:12px;display:flex;justify-content:space-between}.toggle-row{display:flex;justify-content:space-between;gap:12px;align-items:center}.toggle-row span{display:grid}.toggle-row small{color:var(--muted)}.toggle{width:46px;height:27px;border:0;border-radius:99px;background:#cbc7c3;position:relative}.toggle:after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.2s}.toggle.on{background:var(--pink)}.toggle.on:after{left:22px}.people-checks{display:grid;grid-template-columns:1fr 1fr;gap:7px}.people-checks label{display:flex!important;background:#f4f2ef;border-radius:11px;padding:9px}.people-checks input{width:auto}.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-45%) scale(.96);width:min(520px,calc(100% - 28px));background:var(--paper);border-radius:24px;padding:26px;z-index:52;opacity:0;pointer-events:none;box-shadow:0 30px 90px rgba(35,39,46,.3);transition:.2s}.dialog.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.close-block{background:#f4f2ef;border-radius:14px;padding:12px;margin:10px 0}.close-block.trip-only{background:#fff0e3}.close-block h3{margin:0 0 8px}.close-block strong{display:block;text-align:right;margin-top:7px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#384552;color:#fff;border-radius:99px;padding:10px 18px;opacity:0;pointer-events:none;transition:.2s;z-index:60}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.side-rail{display:none}.screen{padding:15px 15px 100px}.topbar{padding:0 15px}.map-hero{height:auto;border-radius:22px}.today-grid,.manage-grid{grid-template-columns:1fr}.money-strip{grid-template-columns:1fr 1fr}.money-strip button{grid-column:1/-1}.mobile-nav{display:grid;position:fixed;bottom:0;left:0;right:0;height:68px;background:rgba(255,253,249,.96);border-top:1px solid var(--line);grid-template-columns:repeat(5,1fr);z-index:40;backdrop-filter:blur(12px)}.mobile-nav button{display:grid;place-items:center;gap:0;padding:5px;font-size:11px}.mobile-nav button i{font-style:normal;font-size:18px}.mobile-nav button.active{color:#b84f70}.mobile-fab{display:block;position:fixed;right:15px;bottom:78px;z-index:39;border:0;border-radius:99px;background:var(--pink);color:#fff;padding:12px 18px;font:700 14px Anuphan;box-shadow:0 10px 24px rgba(225,91,128,.33)}}
@media(max-width:640px){.prototype-note{font-size:9px}.topbar{height:64px}.back{padding:0 9px 0 7px;font-size:11px}.back span{font-size:17px}#allTripsBtn{font-size:0;padding:0 9px}#allTripsBtn:before{content:"🗂️";font-size:15px}.topbar>div:nth-child(2){min-width:0;flex:1;overflow:hidden}.topbar>div:nth-child(2) b,.topbar>div:nth-child(2) small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.map-hero{height:auto}.route-map{transform:scale(1.18)}.hero-copy{left:14px;right:14px;bottom:14px;padding:13px}.hero-copy h1{font-size:21px}.fox{right:6%;top:14%}.mountain{display:none}.today-grid{margin-top:12px}.paper-card{padding:15px;border-radius:18px}.next-main img{width:58px;height:58px}.weather-periods{gap:5px}.weather-periods div{padding:7px 3px}.money-strip{grid-template-columns:1fr 1fr;gap:12px}.page-head{align-items:flex-start}.page-head .primary-btn{font-size:0;padding:11px}.page-head .primary-btn:after{content:"＋";font-size:18px}.plan-item{grid-template-columns:18px 52px 48px 1fr}.plan-cost{grid-column:4;text-align:left}.bill-summary{grid-template-columns:1fr 1fr}.bill-summary>div:first-child{grid-column:1/-1}.bill-row{grid-template-columns:46px 1fr}.bill-row img{width:42px;height:42px}.payer{grid-column:2;text-align:left;display:flex;gap:8px;align-items:center}.wallet-grid{grid-template-columns:1fr}.bottom-sheet{left:0;right:0;top:auto;bottom:0;height:auto;max-height:91%;border-radius:24px 24px 0 0;padding:24px 18px;transform:translateY(105%)}.bottom-sheet.open{transform:none}.sheet-handle{display:block;width:42px;height:5px;background:#d6d1cc;border-radius:9px;margin:-12px auto 14px}.dialog{max-height:90%;overflow:auto}}

/* Color language approved from the four supplied reference images.
   Layout and content remain original to this prototype. */
:root{--ink:#10264a;--muted:#71809b;--line:#e2e8f2;--paper:#fff;--cream:#fffaf3;--pink:#ff668d;--pink-soft:#ffe7ee;--blue:#2f6fed;--blue-soft:#e7f5fb;--sage:#9ed3ad;--sage-soft:#e8f5e8;--lav:#a992e8;--danger:#e85b69;--shadow:0 14px 36px rgba(40,66,107,.10)}
.main-nav button.active{background:var(--blue-soft);color:var(--blue)}
.topbar{background:rgba(255,255,255,.92)}
.back,.icon-btn{background:var(--blue-soft);color:var(--ink)}
.route-map path{stroke:var(--blue)}
.map-pin circle{stroke:var(--blue)}
.map-pin.active circle{fill:var(--pink);stroke:#fff}
.map-pin text{fill:var(--ink)}
.hero-copy{background:rgba(255,255,255,.91)}
.hero-copy span,.page-head span,.eyebrow,.section-kicker{color:var(--pink)}
.paper-card{box-shadow:0 6px 18px rgba(40,66,107,.06)}
.member-presence>span,.privacy-note{background:var(--blue-soft)}
.primary-btn{background:var(--blue);box-shadow:0 6px 15px rgba(47,111,237,.25)}
.soft-btn{background:var(--blue-soft);color:var(--blue)}
.day-tabs button.active,.filters button.active,.segmented button.active{background:var(--blue);border-color:var(--blue)}
.plan-item em,.tag.private{color:#7155a5;background:#f1ecff}
.tag.shared{background:var(--blue-soft);color:var(--blue)}
.wallet-card.jpy{background:linear-gradient(140deg,#ffe4ec,#f7efff)}
.wallet-card.thb{background:linear-gradient(140deg,#dff4fb,#eaf7ec)}
.sheet-mask{background:rgba(16,38,74,.32)}
.sheet-close,.dialog-close{background:var(--blue-soft);color:var(--ink)}
.amount-input{border-color:var(--blue)}
.add-line{color:var(--lav);border-color:var(--lav)}
.toggle.on{background:#43bd7e}
.mobile-nav button.active{color:var(--blue)}
.mobile-fab{background:var(--blue)!important;box-shadow:0 10px 24px rgba(47,111,237,.33)!important}
.hero-copy h1,.page-head h1,.next-main h2,.section-title h3,.sheet-step h2{font-family:Sarabun,Poppins,Anuphan,sans-serif}
@media(max-width:640px){
  .map-hero{height:auto;aspect-ratio:1931/814;border-radius:20px}
  .map-hero>img{object-fit:contain}
  .day-summary{grid-template-columns:52px 1fr;padding:13px;margin-top:10px}
  .day-summary .day-number{width:52px;height:52px}
  .day-summary h1{font-size:17px}
  .day-summary p{font-size:12px}
  .day-summary>button{grid-column:2;width:max-content}
}
.current-day-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.current-day-route path{fill:none;stroke-linecap:round}
.current-day-route .future-route{stroke:var(--blue);stroke-width:5;stroke-dasharray:8 15;opacity:.22}
.current-day-route .completed-route{stroke:#43b77a;stroke-width:7;stroke-dasharray:9 12;filter:drop-shadow(0 3px 0 #fff)}
.current-day-route .active-route{stroke:var(--blue);stroke-width:8;stroke-dasharray:10 13;filter:drop-shadow(0 3px 0 #fff)}
.journey-pin circle{fill:#fff;stroke:var(--blue);stroke-width:7;filter:drop-shadow(0 3px 4px rgba(16,38,74,.16))}
.journey-pin text{fill:var(--ink);font:600 25px Poppins,sans-serif;paint-order:stroke;stroke:#fff;stroke-width:9px;stroke-linejoin:round}
.journey-pin.completed circle{fill:#43b77a;stroke:#fff}
.journey-pin.completed .check{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.journey-pin.current circle{fill:#fff;stroke:var(--blue);stroke-width:9}
.journey-pin.next circle{fill:var(--pink);stroke:#fff;stroke-width:8}
.journey-pin.future{opacity:.36}
.journey-pin.future circle{fill:#fff;stroke:#5c7dac;stroke-width:6}
.journey-pin.future text{fill:#405878;font-size:22px;stroke-width:8px}
.map-hero{display:block;width:100%;max-width:none;min-width:0}
.current-day-route{pointer-events:auto}

/* ── v11 · typography + pastel pass ───────────────────────────────
   Anuphan = body (was never loaded before), Sarabun = headings, Poppins = latin/numerals.
   Poppins is listed first so latin + numerals keep their geometric look,
   and Thai glyphs fall through to Anuphan per-character.               */
body{font-family:Poppins,Anuphan,system-ui,sans-serif}
.sheet-step input,.sheet-step select,.sheet-step textarea,
.editor-grid input,.editor-grid select,.editor-grid textarea{font-family:Poppins,Anuphan,system-ui,sans-serif}
.main-nav button,.mobile-nav button,.primary-btn,.soft-btn,.add-line,
.day-tabs button,.filters button,.segmented button,.ghost-btn,
.plan-item-controls .edit-plan-item,.cross-day-move button,
.mobile-fab{font-family:Poppins,Anuphan,system-ui,sans-serif}
/* These two use the `font:` shorthand, which resets font-family to a stack
   with no Thai coverage — their Thai runs were falling back to the system UI
   font instead of Anuphan. */
.prototype-note{font-family:Poppins,Anuphan,system-ui,sans-serif}
.hero-copy span,.page-head span,.eyebrow,.section-kicker{font-family:Poppins,Anuphan,system-ui,sans-serif}
.day-summary p,.page-head p,.next-main p,.plan-item small,.bill-row small,
.member-row small,.wallet-activity small,.weather-tip,.privacy-note,
.toggle-row small,.editor-note{font-weight:400;letter-spacing:.01em;line-height:1.5}

/* Pastel pass — surfaces and tags soften, action colours stay legible.
   --pink is now a fill only; --pink-ink carries every pink text run
   (the old #ff668d on white measured 2.8:1 and failed AA at 11px). */
:root{
  --ink:#2f3f57;--muted:#647285;--line:#e8e6e2;--paper:#fff;--cream:#fdf9f3;
  --pink:#f091ab;--pink-ink:#b84a6e;--pink-soft:#fdeaf0;
  --blue:#3f72c9;--blue-soft:#eaf2fb;
  --sage:#a9d2b6;--sage-soft:#eaf4ec;--lav:#b3a3dd;--danger:#d4636f;
  --shadow:0 14px 36px rgba(60,74,98,.09)
}
.hero-copy span,.page-head span,.eyebrow,.section-kicker,.day-summary>div:nth-child(2)>span,
.day-number span,.payer em.trip-only{color:var(--pink-ink)}
.avatar{background:var(--pink-soft);color:var(--pink-ink)}
.soft-btn{background:var(--blue-soft);color:#2c5aa8}
.primary-btn{box-shadow:0 6px 15px rgba(63,114,201,.22)}
.mobile-fab{box-shadow:0 10px 24px rgba(63,114,201,.28)!important}
.weather-tip{background:#fdf3e0}
.plan-item em,.tag.private{color:#6f5c9e;background:#f2eeff}

/* Future stops read as "faint" through a softer pin, not a faded label —
   opacity .36 pushed the place names under every contrast threshold. */
.journey-pin.future{opacity:1}
.journey-pin.future circle{fill:#fff;stroke:#a9bcd6;stroke-width:6}
.journey-pin.future text{fill:#5d6f8b;font-size:22px;stroke-width:8px}
.journey-pin.next circle{fill:#e8799d;stroke:#fff;stroke-width:8}
.current-day-route .future-route{opacity:.3}

/* ── v13 · Quick Add: three money dimensions, live validation ── */
.field-note{margin:-6px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
#ownerNote{background:var(--blue-soft);border-radius:11px;padding:9px 11px;margin:0}
#saveWarning{color:#b1414f;font-weight:600}
#saveWarning:empty,#ownerNote:empty{display:none}

.split-row{grid-template-columns:1fr 110px 30px}
.remove-split{border:0;background:#f2efec;color:var(--muted);border-radius:9px;height:34px;
  font-size:18px;line-height:1;cursor:pointer}
.remove-split:disabled{opacity:.35;cursor:not-allowed}
.allocated.off-balance{background:#fdeceb;outline:1px solid #eeb6b6}
.allocated.off-balance b{color:#b1414f}

.people-checks.disabled{opacity:.4;pointer-events:none}
.primary-btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.payer .wallet-line{color:var(--muted);font-size:11px}

/* Drop indicator for plan reordering — reorder now commits on drop, so the
   row being dragged survives the gesture and needs a visible target edge. */
.plan-item.drop-before{box-shadow:inset 0 3px 0 var(--blue)}
.plan-item.drop-after{box-shadow:inset 0 -3px 0 var(--blue)}
.plan-item.selected{border-color:var(--blue);background:var(--blue-soft)}

@media(max-width:640px){
  /* .day-summary drops to 2 columns here, but it has 3 children — the actions
     block was landing in the 52px day-number column and shrink-wrapping the
     button to one word per line. The old `.day-summary>button` rule no longer
     matches anything since the buttons moved inside .day-summary-actions. */
  .day-summary{grid-template-columns:52px 1fr;row-gap:10px}
  .day-summary-actions{grid-column:1/-1;justify-content:flex-end;flex-wrap:wrap}
  .day-summary-actions .soft-btn,.day-summary-actions .ghost-btn{white-space:nowrap}
}
.current-day-route>path{pointer-events:none}
.journey-pin{pointer-events:all;cursor:pointer;transition:opacity .2s}
.journey-pin:hover{opacity:1}
.journey-pin .check{display:none}
.journey-pin.completed .check{display:block}
.day-summary-actions{display:flex;gap:8px;align-items:center}
.ghost-btn{border:0;background:transparent;color:var(--muted);font:700 13px Sarabun;cursor:pointer}
.day-summary.previewing{border-color:#c9bcf3;background:linear-gradient(90deg,#fff,#faf7ff)}
.day-summary.previewing .day-number{background:#eee8ff}
.plan-day-overview{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:linear-gradient(100deg,var(--blue-soft),#fff);border:1px solid #cfe9f5;border-radius:18px;padding:14px 18px;margin-bottom:12px}
.plan-day-overview>div{display:grid}
.plan-day-overview h3{margin:2px 0;font-size:20px}
.plan-day-overview small{color:var(--muted)}
.plan-weather{display:flex;gap:14px;align-items:center}
.plan-weather>span{font-size:30px}
.plan-weather b{font:600 21px Poppins}
.plan-weather div{display:grid;text-align:right}
.plan-item.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,111,237,.10)}
.plan-item{grid-template-columns:24px 62px 58px 1fr auto auto}
.plan-item-controls{display:flex;gap:4px}
.plan-item-controls button{border:0;background:var(--blue-soft);color:var(--blue);width:30px;height:30px;border-radius:9px;cursor:pointer}
.plan-item-controls .edit-plan-item{width:auto;padding:0 9px;font:700 11px Sarabun}
.cross-day-move{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:2px dashed #cfd9e8;border-radius:16px;padding:12px 14px;margin-top:12px;color:var(--muted)}
.cross-day-move>div{display:flex;gap:7px;flex-wrap:wrap}
.cross-day-move button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:7px 11px;font:700 12px Sarabun;cursor:pointer}
.cross-day-move button:disabled{opacity:.4;cursor:not-allowed}
.plan-empty{text-align:center;color:var(--muted);padding:32px;background:#fff;border:1px dashed var(--line);border-radius:18px}
.bill-empty{text-align:center;color:var(--muted);padding:34px 12px}
.plan-editor{width:min(620px,calc(100% - 28px))}
.plan-editor h2{margin:4px 0 18px;font:800 26px Sarabun}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.editor-grid label{display:grid;gap:6px;font-weight:700}
.editor-grid .field-wide{grid-column:1/-1}
.editor-grid input,.editor-grid select,.editor-grid textarea{width:100%;border:1px solid #d9dfe8;background:#fff;border-radius:12px;padding:11px 12px;font:14px Sarabun;color:var(--ink)}
.editor-grid textarea{resize:vertical}
.editor-grid input:focus,.editor-grid select:focus,.editor-grid textarea:focus{outline:3px solid rgba(47,111,237,.12);border-color:var(--blue)}
.editor-note{background:var(--blue-soft);color:var(--muted);border-radius:12px;padding:10px 12px;margin:14px 0;font-size:12px}
@media(max-width:640px){
  .plan-day-overview{grid-template-columns:1fr}
  .plan-weather{justify-content:space-between}
  .plan-weather div{text-align:left}
  .cross-day-move{align-items:flex-start}
  .editor-grid{grid-template-columns:1fr}
  .editor-grid .field-wide{grid-column:auto}
  .plan-item-controls{grid-column:4;justify-content:flex-start}
}

/* ── v14 · accounting figures + 12-day tabs ──
   Negative amounts print as (1,234) with no minus sign, so the parenthesis
   itself carries the meaning and needs to read as clearly as the digits. */
.wallet-activity b.minus{color:var(--danger)}
.wallet-activity b.plus{color:#3f8f68}
.day-tabs{scroll-padding-inline:12px;padding-bottom:4px}
.day-tabs button{scroll-snap-align:center;flex:none}
.day-tabs::-webkit-scrollbar{height:6px}
.day-tabs::-webkit-scrollbar-thumb{background:#dcd8d3;border-radius:99px}

/* ── v15 · Thai coverage for the Poppins stack ──
   Poppins has no Thai glyphs, so every rule using the `font:` shorthand with
   Poppins silently dropped Thai to a system font (.plan-cost small, .day-number,
   .payer b …). Patching them one by one kept missing new ones. Registering
   Anuphan *under the Poppins family name* for the Thai unicode range fixes all
   of them at once — existing rules and any added later. */
@font-face{font-family:Poppins;src:url('../puppup-prototype/fonts/anuphan-thai-400-normal.woff2') format('woff2');
  font-weight:400;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;font-display:swap}
@font-face{font-family:Poppins;src:url('../puppup-prototype/fonts/anuphan-thai-500-normal.woff2') format('woff2');
  font-weight:500;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;font-display:swap}
@font-face{font-family:Poppins;src:url('../puppup-prototype/fonts/anuphan-thai-600-normal.woff2') format('woff2');
  font-weight:600;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;font-display:swap}
@font-face{font-family:Poppins;src:url('../puppup-prototype/fonts/anuphan-thai-700-normal.woff2') format('woff2');
  font-weight:700 900;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC;font-display:swap}

/* ── v16 · image pickers (banner / place icon / expense icon) ── */
.banner-edit{position:absolute;right:14px;bottom:14px;z-index:3;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);border-radius:99px;padding:9px 15px;
  font:700 13px Poppins,Anuphan,sans-serif;box-shadow:0 6px 18px rgba(16,38,74,.18);backdrop-filter:blur(6px)}
.banner-edit:hover{background:#fff}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}

.icon-field{display:flex;align-items:center;gap:12px;background:#f7f5f2;border-radius:14px;padding:11px 13px}
.icon-field>span{font-weight:700;flex:1}
.icon-preview{width:52px;height:52px;object-fit:contain;background:#fff;flex:none}
.icon-preview.rounded{border-radius:15px;padding:4px;border:1px solid var(--line)}
.icon-preview.circle{border-radius:50%;padding:5px;border:1px solid var(--line)}

.asset-picker{width:min(680px,calc(100% - 28px))}
.asset-spec{display:grid;gap:3px;background:var(--blue-soft);border-radius:13px;padding:11px 13px;margin-bottom:14px}
.asset-spec b{font:700 14px Poppins,Anuphan,sans-serif}
.asset-spec span{font-size:13px}
.asset-spec small{color:var(--muted);font-size:12px;line-height:1.5}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;
  max-height:46vh;overflow:auto;padding:2px}
.asset-option{border:2px solid transparent;background:#f7f5f2;border-radius:16px;padding:9px 7px;
  cursor:pointer;display:grid;gap:6px;justify-items:center;font:inherit}
.asset-option:hover{background:#f1eeea}
.asset-option.selected{border-color:var(--blue);background:var(--blue-soft)}
.asset-option small{font-size:11px;color:var(--muted);text-align:center;line-height:1.35}
.asset-thumb{display:grid;place-items:center;background:#fff;overflow:hidden;border:1px solid var(--line)}
.asset-thumb img{width:100%;height:100%;object-fit:contain}
.asset-thumb.rounded{width:64px;height:64px;border-radius:18px;padding:5px}
.asset-thumb.circle{width:64px;height:64px;border-radius:50%;padding:6px}
.asset-thumb.wide{width:100%;aspect-ratio:1931/814;border-radius:11px}
.asset-thumb.wide img{object-fit:cover}
.asset-grid:has(.asset-thumb.wide){grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}

.asset-upload{display:flex;align-items:center;gap:11px;margin-top:13px;padding:13px;
  border:1px dashed var(--lav);border-radius:14px;cursor:pointer}
.asset-upload input{flex:none;width:auto;max-width:180px;font-size:12px}
.asset-upload span{display:grid}
.asset-upload b{color:var(--lav)}
.asset-upload small{color:var(--muted);font-size:12px}

.banner-field{display:grid;gap:9px;margin:14px 0}
.banner-field>span{font-weight:700}
.banner-field img{width:100%;aspect-ratio:1931/814;object-fit:cover;border-radius:15px;border:1px solid var(--line)}
.banner-field .soft-btn{justify-self:start}
#newTripDialog .editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#newTripDialog label{display:grid;gap:5px;font-weight:700}
#newTripDialog input{width:100%;border:1px solid #d9dfe8;background:#fff;border-radius:12px;
  padding:11px 12px;font:14px Poppins,Anuphan,sans-serif;color:var(--ink)}
@media(max-width:640px){
  .asset-picker{width:calc(100% - 20px)}
  .asset-grid{max-height:38vh;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .banner-edit{right:10px;bottom:10px;padding:7px 12px;font-size:12px}
  #newTripDialog .editor-grid{grid-template-columns:1fr}
}
/* The picker is launched from other dialogs, so it must sit above them. */
.asset-picker{z-index:54}

/* ── v18 · split modes, live wallets, viewer switcher ── */
.split-mode{grid-template-columns:repeat(3,1fr);margin-bottom:2px}
.split-mode.disabled{opacity:.4;pointer-events:none}
.people-rows{display:grid;gap:7px}
.people-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  background:#f4f2ef;border-radius:11px;padding:7px 10px}
.people-row.off{opacity:.5}
.people-row label{display:flex!important;align-items:center;gap:8px;background:none;padding:0;font-weight:600}
.people-row input[type="checkbox"]{width:auto;flex:none}
.people-row .share-input{width:92px;padding:7px 9px;border:1px solid #d9d5d0;border-radius:9px;
  background:#fff;font:600 14px Poppins,Anuphan,sans-serif;text-align:right}
.people-row .share-unit{color:var(--muted);font-weight:600;width:16px;text-align:center}
.people-rows.disabled{opacity:.4;pointer-events:none}

.member-row{width:100%;text-align:left;border:0;background:transparent;cursor:pointer;font:inherit;
  border-bottom:1px solid var(--line);border-radius:10px}
.member-row:hover{background:#f7f5f2}
.member-row.viewing{background:var(--blue-soft)}
.member-row.viewing em{background:var(--blue);color:#fff}
.money-strip strong.over{color:var(--danger)}
.wallet-card.jpy{background:linear-gradient(140deg,#ffe4ec,#f7efff)}
.wallet-card.thb{background:linear-gradient(140deg,#dff4fb,#eaf7ec)}
.face.sage{background:#c4e3cd}
/* Rows moved inside #walletActivity, so the original `.wallet-activity>div`
   rule started matching the wrapper and laid every row out in one flex line. */
.wallet-activity>#walletActivity{display:block;padding:0;border:0}
.wallet-activity #walletActivity>div{display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.wallet-activity #walletActivity>div:last-child{border-bottom:0}

/* ── v20 · honest exchange-rate states ── */
.unknown-rate{color:var(--danger);font-weight:600}
.wallet-card.short{outline:1px solid #edb9b9}
.wallet-warn{background:#fdeceb;border-radius:11px;padding:9px 11px;margin:12px 0 0;
  font-size:12px;line-height:1.55;color:#96323f}
.wallet-warn small{color:#a8636c}
.bill-notice{background:#fff4e2;border:1px solid #f0d5a8;border-radius:12px;
  padding:10px 12px;margin:14px 0 0;color:#8a6321;font-size:12.5px;line-height:1.55}
.bill-notice:empty{display:none}

/* ── v21 · rate provenance badges + trip currencies ── */
.rate-badge{display:inline-block;margin-top:9px;padding:4px 10px;border-radius:99px;
  font:600 11px Poppins,Anuphan,sans-serif;line-height:1.5}
.rate-badge.live{background:#e7f0ff;color:#2c5aa8}
.rate-badge.planned{background:#fff1dc;color:#8a6321}
.rate-badge.locked{background:#e8f5e8;color:#3f8f68}
.rate-badge.none{background:#fdeceb;color:#96323f}
.bill-notice.calm{background:#eef4ff;border-color:#cfe0f8;color:#2c5aa8}
.bill-notice.danger{background:#fdeceb;border-color:#eeb6b6;color:#96323f}

.currency-row{display:grid;grid-template-columns:38px 1fr auto auto;gap:11px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.currency-row:last-of-type{border-bottom:0}
.currency-mark{width:38px;height:38px;border-radius:12px;background:var(--blue-soft);
  display:grid;place-items:center;font:600 17px Poppins,Anuphan,sans-serif;color:var(--blue)}
.currency-main{display:grid}
.currency-main small{color:var(--muted);font-size:11.5px}
.currency-rate{display:grid;text-align:right;font:600 14px Poppins,Anuphan,sans-serif}
.currency-rate small{color:var(--muted);font-weight:400;font-size:11px}
.currency-actions{display:flex;gap:6px}
.currency-actions button{border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:6px 10px;font:600 12px Poppins,Anuphan,sans-serif;color:var(--ink);cursor:pointer}
.currency-actions button:hover:not(:disabled){background:#f4f2ef}
.currency-actions button:disabled{opacity:.4;cursor:not-allowed}
#currencyDialog .editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#currencyDialog label{display:grid;gap:5px;font-weight:700}
#currencyDialog input{width:100%;border:1px solid #d9dfe8;background:#fff;border-radius:12px;
  padding:11px 12px;font:14px Poppins,Anuphan,sans-serif;color:var(--ink)}
#currencyDialog input:disabled{background:#f4f2ef;color:var(--muted)}
#currencyPreview{background:var(--sage-soft);border-radius:11px;padding:9px 11px;margin:12px 0 0}
#currencyError{color:#b1414f;font-weight:600}
#currencyError:empty,#currencyPreview:empty{display:none}
@media(max-width:640px){
  .currency-row{grid-template-columns:38px 1fr auto;row-gap:8px}
  .currency-actions{grid-column:2/-1;justify-content:flex-end}
  #currencyDialog .editor-grid{grid-template-columns:1fr}
}

/* ── v22 · wallet & currency icons ── */
.wallet-top{align-items:center}
.wallet-id{display:flex;align-items:center;gap:11px;min-width:0}
.wallet-icon{width:46px;height:46px;border-radius:14px;object-fit:contain;flex:none;
  background:rgba(255,255,255,.7);box-shadow:0 3px 9px rgba(40,66,107,.10)}
.wallet-id b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-swap{border:0;background:rgba(255,255,255,.72);width:34px;height:34px;border-radius:50%;
  font-size:15px;cursor:pointer;flex:none;line-height:1}
.icon-swap:hover{background:#fff}
.currency-mark{background:transparent;padding:0}
.currency-mark img{width:38px;height:38px;border-radius:50%;object-fit:cover;display:block}

/* ── v23 · fund / add wallet / close trip ── */
.fund-wallet{display:flex;align-items:center;gap:12px;background:#f7f5f2;border-radius:14px;
  padding:11px 13px;margin-bottom:14px}
.fund-wallet img{width:46px;height:46px;border-radius:14px;object-fit:contain;background:#fff;flex:none}
.fund-wallet span{display:grid}
.fund-wallet small{color:var(--muted);font-size:12px}
.fund-preview{display:grid;gap:7px;background:var(--sage-soft);border-radius:12px;padding:11px 13px;margin-top:13px}
.fund-preview:empty{display:none}
.fund-preview span{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fund-preview b{font:600 15px Poppins,Anuphan,sans-serif}
.fund-preview small{color:var(--muted);font-size:11px;margin-left:8px}
#fundDialog .editor-grid,#walletDialog .editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#fundDialog label,#walletDialog label{display:grid;gap:5px;font-weight:700}
#fundDialog input,#walletDialog input,#walletDialog select{width:100%;border:1px solid #d9dfe8;background:#fff;
  border-radius:12px;padding:11px 12px;font:14px Poppins,Anuphan,sans-serif;color:var(--ink)}
#fundError,#walletError{color:#b1414f;font-weight:600}
#fundError:empty,#walletError:empty{display:none}

#closeBody .close-block span{padding:5px 0}
.close-block .muted-line{color:var(--muted)}
.close-block.leftovers{background:var(--blue-soft)}
.close-problems{background:#fdeceb;border:1px solid #eeb6b6;border-radius:13px;padding:12px 14px;margin-top:12px;color:#96323f}
.close-problems ul{margin:7px 0 0;padding-left:18px;line-height:1.6;font-size:13px}
.close-ok{background:#e9f6ee;border-radius:13px;padding:12px 14px;margin-top:12px;color:#2f6f4f;line-height:1.6}
.close-ok small{color:#4b8567}
@media(max-width:640px){#fundDialog .editor-grid,#walletDialog .editor-grid{grid-template-columns:1fr}}

/* ── v24 · closed-trip lock ── */
/* ป้ายบอกว่าส่วนนี้ยังเป็นข้อมูลตัวอย่าง ใช้เฉพาะในโหมดข้อมูลจริง
   สีอ่อนกว่าแถบแดงด้านบน เพราะเป็นคำเตือนระดับ "อย่าเชื่อตัวเลขนี้"
   ไม่ใช่ "ระวังจะแก้ของจริง" */
.demo-flag{margin:0 0 10px;padding:7px 11px;border-radius:10px;
  background:#fef3c7;color:#78350f;font-size:12px;line-height:1.5}

/* แถบบอกว่ากำลังดูข้อมูลจริง — ติดบนสุดของจอและอยู่เหนือทุกอย่าง
   ตั้งใจให้เด่นจนมองข้ามไม่ได้ เพราะความต่างระหว่าง "ข้อมูลตัวอย่าง"
   กับ "เงินจริง" ต้องไม่ต้องเดา */
.live-bar{position:sticky;top:0;z-index:80;padding:8px 14px;font-size:13px;
  font-weight:600;text-align:center;letter-spacing:.01em}
.live-bar--live{background:#7f1d1d;color:#fff}
.live-bar--loading{background:#e5e7eb;color:#374151}
.live-bar--error{background:#fef3c7;color:#78350f}

.trip-locked-note{background:#eef2f8;border:1px solid #cfdaea;border-radius:14px;
  padding:12px 14px;margin-bottom:14px;color:#3c4d68;font-size:13px;line-height:1.6}
.trip-locked-note[hidden]{display:none}
.trip-locked-note b{color:var(--ink)}
body.trip-closed .mobile-fab{opacity:.4;pointer-events:none}

/* ── v25 · posting date + admin reopen + audit log ── */
.posting-field{background:#f7f5f2;border-radius:14px;padding:12px 14px;margin-top:14px}
.posting-field label{display:grid;gap:6px;font-weight:700}
.posting-field input{width:100%;max-width:220px;border:1px solid #d9dfe8;background:#fff;
  border-radius:11px;padding:10px 12px;font:14px Poppins,Anuphan,sans-serif;color:var(--ink)}
.posting-field .field-note{margin:9px 0 0}
.posting-warn{background:#fff3e0;border:1px solid #efd3a2;border-radius:11px;
  padding:9px 11px;color:#8a5b18;font-weight:600}

.close-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
#reopenTrip[hidden]{display:none}
#reopenTrip:disabled{opacity:.45;cursor:not-allowed}
.danger-btn{background:var(--danger)!important;box-shadow:0 6px 15px rgba(212,99,111,.28)!important}
.reopen-warn{background:#fdeceb;border:1px solid #eeb6b6;border-radius:13px;padding:12px 14px;
  color:#96323f;line-height:1.6;margin:6px 0 14px}
.reopen-warn small{color:#a8636c}
.reopen-reason{display:grid;gap:6px;font-weight:700}
.reopen-reason textarea{width:100%;border:1px solid #d9dfe8;background:#fff;border-radius:12px;
  padding:11px 12px;font:14px Poppins,Anuphan,sans-serif;color:var(--ink);resize:vertical}
#reopenError{color:#b1414f;font-weight:600}
#reopenError:empty{display:none}

.log-title{margin:18px 0 8px;font:700 14px Poppins,Anuphan,sans-serif}
.trip-log{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.trip-log li{border-left:3px solid var(--line);padding:8px 0 8px 11px;display:grid;gap:2px}
.trip-log li.close{border-left-color:#3f8f68}
.trip-log li.reopen{border-left-color:var(--danger)}
.trip-log b{font-size:13.5px}
.trip-log small{color:var(--muted);font-size:11.5px;line-height:1.5}

/* ── v26 · reversal accounting in the trip log ── */
.log-amounts{font:600 12px Poppins,Anuphan,sans-serif!important;color:var(--ink)!important}
.log-amounts.negative{color:var(--danger)!important}
.log-net{margin-top:12px;padding:11px 13px;background:var(--sage-soft);border-radius:12px;display:grid;gap:3px}
.log-net span{font-size:12px;color:#4b8567}
.log-net b{font:700 14px Poppins,Anuphan,sans-serif}
.log-net small{color:#4b8567;font-size:11px;line-height:1.5}

/* ── v27 · close acknowledgement + presence ── */
.close-ack{display:flex;gap:10px;align-items:flex-start;background:#fff8e8;border:1px solid #f0dcae;
  border-radius:13px;padding:12px 14px;margin-top:12px;cursor:pointer;line-height:1.6;font-size:13px}
.close-ack[hidden]{display:none}
.close-ack input{width:auto;flex:none;margin-top:2px}

.member-presence{display:grid;gap:7px;margin:16px 0 10px}
.presence-chip{display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;
  gap:1px 9px;align-items:center;background:#f7f4f0;border-radius:12px;padding:7px 10px;font-size:12px}
.presence-chip i{grid-row:1/3}
.presence-chip b{font-size:13px}
.presence-chip small{color:var(--muted);font-size:11.5px;line-height:1.45}
.presence-chip.live{background:var(--sage-soft)}
.presence-chip.live small{color:#3f8f68}
.presence-chip.stale{background:#fff3e0}
.presence-chip.stale small{color:#8a5b18}
.presence-chip.off{opacity:.62}
.presence-chip.me{outline:1px solid var(--blue)}
.presence-consent{background:var(--blue-soft);border-radius:12px;padding:9px 11px;margin:0 0 12px;
  font-size:12px;line-height:1.6;color:#2c5aa8}
.icon-btn.sharing{background:#43bd7e;color:#fff}
#checkIn:disabled{opacity:.45;cursor:not-allowed}

/* ── v28 · carry leftover to the next trip ── */
.carry-toggle{display:flex;gap:9px;align-items:flex-start;background:rgba(255,255,255,.6);
  border-radius:12px;padding:9px 11px;margin:0 0 12px;cursor:pointer;line-height:1.5}
.carry-toggle.on{background:rgba(255,255,255,.92);outline:1px solid var(--sage)}
.carry-toggle input{width:auto;flex:none;margin-top:2px}
.carry-toggle b{font-size:12.5px;display:block}
.carry-toggle small{color:var(--muted);font-size:11px;display:block}
.close-block.carried{background:#eaf4ec;outline:1px solid var(--sage)}
.carry-note{margin:9px 0 0;font-size:11.5px;line-height:1.6;color:#3f6f55}
.log-carry{color:#3f8f68!important;font-weight:600}

/* ── v29 · leftover settlement + realised FX ── */
.settlement{background:#f7f5f2;border-radius:15px;padding:14px;margin-top:14px}
.settlement[hidden]{display:none}
.settlement h3{margin:0 0 4px;font:800 17px Sarabun,Poppins,Anuphan,sans-serif}
.settlement-hint{margin:0 0 12px;color:var(--muted);font-size:12px;line-height:1.6}
.settle-row{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:9px}
.settle-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.settle-head b{font-size:14px}
.settle-head span{color:var(--muted);font:600 12px Poppins,Anuphan,sans-serif}
.settle-modes{display:flex;gap:14px;margin:10px 0 4px;flex-wrap:wrap}
.settle-modes label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer}
.settle-modes input{width:auto;flex:none}
.settle-input{display:grid;gap:8px;margin-top:8px}
.settle-input label{display:grid;gap:5px;font-size:12.5px;font-weight:700}
.settle-input select{width:100%;max-width:200px;border:1px solid #d9dfe8;background:#fff;border-radius:11px;
  padding:9px 11px;font:14px Poppins,Anuphan,sans-serif;color:var(--ink)}
.settle-amount{display:grid;grid-template-columns:34px 1fr;align-items:center;border:1px solid #d9dfe8;
  border-radius:11px;overflow:hidden;max-width:200px;background:#fff}
.settle-amount span{text-align:center;font:600 15px Poppins,Anuphan,sans-serif;color:var(--muted)}
.settle-amount input{border:0;padding:9px 11px 9px 0;font:600 15px Poppins,Anuphan,sans-serif;
  color:var(--ink);width:100%;background:transparent}
.fx-line{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.fx-line.gain{color:#2f7d5b;font-weight:600}
.fx-line.loss{color:#b1414f;font-weight:600}
.fx-line.neutral{color:#4b6b8a}
.fx-summary{display:grid;gap:5px;background:#fff;border-radius:12px;padding:11px 13px;font-size:12.5px}
.fx-summary b{font:700 13px Poppins,Anuphan,sans-serif}
.fx-total{padding-top:6px;border-top:1px solid var(--line);margin-top:2px}
.fx-total.gain{color:#2f7d5b}
.fx-total.loss{color:#b1414f}
.log-fx{font-weight:600!important}
.log-fx.gain{color:#2f7d5b!important}
.log-fx.loss{color:#b1414f!important}
/* The close dialog grew past the viewport once settlement rows were added, and
   only the ≤640px rule had a max-height — the confirm checkbox ended up off
   screen and unclickable on desktop. Scroll at every size. */
.dialog{max-height:calc(100vh - 40px);overflow:auto}

/* ── v31 · member markers on the map ── */
.presence-layer{pointer-events:none}
.presence-mark{pointer-events:auto;cursor:default}
.presence-mark circle{stroke:#fff;stroke-width:5;filter:drop-shadow(0 3px 5px rgba(16,38,74,.28))}
.presence-mark text{fill:var(--ink);font:700 20px Poppins,Anuphan,sans-serif;text-anchor:middle}
.presence-mark.stale{opacity:.5}
.presence-mark.stale circle{stroke:#e4e0da;stroke-dasharray:7 6}
.presence-mark.me circle{stroke:var(--blue);stroke-width:6}
/* ⚠️ transform-box ของ SVG ค่าเริ่มต้นคือ view-box ไม่ใช่ fill-box
   แปลว่า transform-origin:center = จุดกึ่งกลางของ "แผนที่ทั้งใบ" (965.5, 407)
   ไม่ใช่กึ่งกลางของวงกลมเอง · วงคลื่นจึงขยายโดยหมุนรอบกลางแผนที่ แล้ววิ่ง
   ออกจากหมุดไปมุมบนซ้ายทุกครั้ง (วัดแล้ว: จาก 1196,457 ไป 690,244)
   ต้องใส่ fill-box เพื่อให้ center หมายถึงกึ่งกลางของวงกลมจริง ๆ */
.presence-mark .ping{stroke:#43bd7e;stroke-width:4;opacity:.85;
  transform-box:fill-box;transform-origin:center;
  animation:presence-ping 2.4s ease-out infinite}
@keyframes presence-ping{
  0%{transform:scale(1);opacity:.8}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
@media(prefers-reduced-motion:reduce){.presence-mark .ping{animation:none;opacity:.35}}

/* วันที่มาจากฐานจริงยังไม่มีพยากรณ์อากาศ — บอกว่าไม่มี ดีกว่าโชว์เลขที่ไม่จริง */
.weather-empty{padding:14px 0;color:var(--muted);font-size:14px;line-height:1.6}

/* แถวหมวดที่มีช่องผูกสมุดบัญชีเพิ่มมา — ต้องกว้างขึ้นอีกคอลัมน์
   บนจอแคบวางซ้อนกันแทน เพราะ select สองอันเรียงกันจะแคบจนอ่านไม่ออก */
.split-row.with-ledger{grid-template-columns:1fr 1fr 110px 32px}
.split-row .category-ledger{min-width:0}
/* โหมดข้อมูลจริงใช้ช่องเดียว (รายการของทริป) เพราะหมวดบัญชีผูกมาในตัวรายการแล้ว */
.split-row .category-preset{min-width:0}
@media(max-width:640px){
  .split-row.with-ledger{grid-template-columns:1fr 90px 32px}
  .split-row.with-ledger .category-ledger{grid-column:1 / -1}
}

/* ── ฟอร์มแก้ชื่อทริป/วันเดินทาง ── */
#tripMetaForm{display:grid;gap:12px}
#tripMetaForm label{display:grid;gap:5px;font-size:13px;color:var(--muted)}
#tripMetaForm input,#tripMetaForm select{padding:11px 12px;border:1px solid var(--line);border-radius:11px;
  font:inherit;color:var(--ink);background:#fff}
/* สองช่องวันที่เรียงคู่กัน · จอแคบวางซ้อนเพราะ input[type=date] บีบแล้วอ่านไม่ออก */
.date-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.date-pair{grid-template-columns:1fr}}

/* ── ลิงก์ตรงเข้าทริป + โซนอันตราย (ลบทริป) ── */
.trip-direct-link{margin-top:14px}
.direct-link-row{display:flex;gap:8px;margin-top:6px}
.direct-link-row input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:11px;
  font-size:12px;color:var(--muted);background:#f8f6f3}
.danger-zone{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.danger-btn{color:var(--danger)!important;border:1px solid var(--danger)!important;background:#fff!important}
.danger-btn:disabled{opacity:.45;cursor:not-allowed}

/* ── จดค่าใช้จ่าย: หน้าเดียว ใช้มือเดียวบนมือถือ ──────────────────────
   โครง: หัวเรื่อง + พื้นที่เลื่อน + ปุ่มบันทึกติดล่าง
   ปุ่มบันทึกต้องอยู่กับที่ ไม่งั้นกรอกเสร็จแล้วต้องเลื่อนหาปุ่ม */
.quick-add{display:flex;flex-direction:column;max-height:92vh;padding-bottom:0}
.quick-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.quick-title{margin:2px 0 14px;font-size:19px}

/* ยอดเงินเป็นสิ่งแรกที่คนพิมพ์ จึงใหญ่ที่สุดและกดโดนง่ายที่สุด */
.amount-hero{display:flex;align-items:baseline;gap:8px;padding:14px 16px;
  background:var(--cream);border-radius:16px;border:1px solid var(--line)}
.amount-hero span{font-size:24px;color:var(--muted)}
.amount-hero input{flex:1;min-width:0;border:0;background:none;outline:none;
  font:700 34px/1.1 Poppins,Anuphan,sans-serif;color:var(--ink)}
.quick-add .conversion{margin:8px 2px 14px;font-size:13px;color:var(--muted)}

.quick-row{display:grid;gap:12px;margin-bottom:12px}
.quick-row.two{grid-template-columns:1fr 1fr}
.quick-add label{display:grid;gap:5px;font-size:13px;color:var(--muted)}
.quick-add label input,.quick-add label select{padding:11px 12px;border:1px solid var(--line);
  border-radius:11px;font:inherit;color:var(--ink);background:#fff;min-width:0}
.quick-field{margin-bottom:14px}

.quick-section{padding:14px 0;border-top:1px solid var(--line)}
.quick-section-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:10px;font-size:14px}
.quick-section-head span{font-size:12px;color:var(--muted)}

/* ตัวเลือกที่คนส่วนใหญ่ไม่แตะ — พับไว้แต่เปิดได้ในคลิกเดียว */
.quick-advanced{border-top:1px solid var(--line);padding-top:12px}
.quick-advanced summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);
  padding:6px 0;list-style:none}
.quick-advanced summary::before{content:'⌄ ';color:var(--muted)}
.quick-advanced[open] summary::before{content:'⌃ '}
.quick-advanced > *:not(summary){margin-top:12px}

.quick-footer{position:sticky;bottom:0;padding:12px 0 16px;background:var(--paper);
  border-top:1px solid var(--line)}
.quick-footer .primary-btn{width:100%;padding:15px;font-size:16px}
.quick-footer .field-note{margin:0 0 8px}
.quick-footer .field-note:empty{display:none}

@media(max-width:640px){
  .quick-add{max-height:94vh}
  .quick-row.two{grid-template-columns:1fr}
  .amount-hero input{font-size:30px}
}

/* ── อ่านง่าย + ลื่นบนมือถือ (2026-08-02) ─────────────────────────────
   1) สีตัวอักษรรองเข้มขึ้น — ของเดิม #71809b อ่อนจนอ่านยากบนพื้นครีม
   2) ช่องกรอกบนมือถือขั้นต่ำ 16px — เล็กกว่านั้น iOS จะซูมเข้าเองตอนแตะ
      แล้วค้างซูมไว้ทั้งหน้า เป็นสาเหตุหลักของอาการ "ใช้แล้วไม่ลื่น" */
:root{--muted:#5c6b87}
@media(max-width:640px){
  .sheet-step input,.sheet-step select,
  #tripMetaForm input,#tripMetaForm select,
  .quick-add input,.quick-add select,
  .editor-grid input,.editor-grid select,
  .dialog input,.dialog select,.dialog textarea{font-size:16px}
  .amount-input input{font-size:32px}
  .amount-hero input{font-size:30px}
  .direct-link-row input{font-size:12px}
}

/* ── ธีม Ghibli เข้าชุดแอปหลัก (2026-08-02 · North เลือกเอง) ──────────
   แอปหลักธีม Ghibli ใช้เขียว teal #216E64 + พื้นไล่ครีม/เขียวอ่อน + Sarabun
   หน้าทริปเดิมเป็นน้ำเงิน #2f6fed ซึ่งทำให้รู้สึกเป็นคนละแอป — จูนตัวแปรสี
   ที่ปลายไฟล์แบบนี้ทับของเดิมทั้งหน้าโดยไม่ต้องไล่แก้ทีละกฎ */
:root{
  --ink:#22403A;          /* ตัวหนังสือหลัก — เขียวเข้มแทนกรมท่า */
  --muted:#54706A;        /* ตัวหนังสือรอง — เข้มพอบนพื้นครีม */
  --blue:#216E64;         /* สีหลักของปุ่ม/แท็บ = primary ของแอปหลัก */
  --blue-soft:#DFF1F0;
  --cream:#F8FBF5;
  --line:#DFE8E0;
  --shadow:0 14px 36px rgba(33,110,100,.10);
}
body{background:linear-gradient(165deg,#DFF1F0,#F4FAF6 48%,#FDF7E9) fixed}
.prototype-note{background:#1F5A50}
.main-nav button.active{color:var(--blue)}
.section-kicker,.hero-copy span,.page-head span,.eyebrow{color:#1E7A54}
.primary-btn{box-shadow:0 6px 15px rgba(33,110,100,.25)}
.mobile-fab{background:var(--blue)!important;box-shadow:0 10px 24px rgba(33,110,100,.33)!important}
.mobile-nav button.active{color:var(--blue)}

/* ── ลดอาการกระตุกบนมือถือ ──
   backdrop-filter blur แพงมากบน GPU มือถือ — เปลี่ยนเป็นพื้นทึบไปเลย
   และปิดเงา/านิเมชันที่ไม่จำเป็นตอนจอแคบ */
@media(max-width:900px){
  .topbar{backdrop-filter:none;background:#fff}
  .mobile-nav{backdrop-filter:none;background:#fffdf9}
  .trip-pick-card{transition:none}
}