@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+Thai:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* Reference: user-provided pakin.space screenshot. Fonts are visual matches;
   the reference site's CSS could not be fetched. Metro line colours remain data-driven. */
:root{--bg:#f1f5fb;--panel:#fff;--line:#cad6e6;--muted:#536884;--text:#172a44;--accent:#1c4175;--soft:#e7eef8;--gold:#ffd51c;--yellow:#ffd51c;--radius:2px;--font-body:'Space Grotesk','Noto Sans Thai',system-ui,sans-serif;--font-display:'Oswald','Noto Sans Thai',sans-serif;--font-mono:'IBM Plex Mono','Noto Sans Thai',monospace}
body{font-family:var(--font-body);background:linear-gradient(110deg,#f3f6fc,#edf3fc);color:var(--text);font-size:16px}button,input,select,dialog{font-family:var(--font-body)}::selection{background:var(--yellow);color:var(--text)}a{color:inherit}button,a,input,select{transition:background-color .16s,color .16s,border-color .16s}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.skip-link{background:var(--yellow);color:var(--text);border-radius:0}
.topbar{background:#f3f6fcef;backdrop-filter:blur(16px);border-color:var(--line)}.header-inner{min-height:86px}.brand{font-family:var(--font-display);font-size:24px;line-height:1.2;letter-spacing:.4px;font-weight:600;color:var(--text);gap:12px}.brand-icon{width:40px;height:40px;border:1px solid var(--line);background:transparent;border-radius:0}.brand-icon .line-icon{width:26px;height:26px;color:var(--accent)}.brand small{font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.3px;color:var(--muted);margin-top:7px}.trip-date{font-family:var(--font-mono);font-size:11px;letter-spacing:.4px}.rail{border-color:var(--line)}.rail-btn{font-size:14px;font-weight:400;min-height:55px}.rail-btn.active{font-weight:600;color:var(--accent)}.rail-btn.active:after{height:3px;border-radius:0;background:var(--yellow)}.nav-inner{gap:32px}.text-button{border-radius:0}.text-button:hover{background:#e1eaf8}.icon-button{border-radius:0;background:transparent;border-color:var(--line)}.icon-button:not(:disabled):hover{background:var(--yellow);border-color:var(--yellow);color:var(--text)}#infoBtn{border:1px solid var(--line);font-size:12px;padding:8px 14px}
.trip-overview{position:relative;padding:24px 0 28px;margin-top:0;margin-bottom:28px}.trip-overview:before{content:'';position:absolute;top:0;left:0;width:44px;height:3px;background:var(--yellow)}.overview-title{align-items:flex-start}.overview-title h1{margin:14px 0 10px;letter-spacing:0;line-height:1.3}.hero-latin{font-family:var(--font-display);display:block;font-size:clamp(46px,5vw,72px);font-weight:600;letter-spacing:-1px;color:var(--accent);line-height:1.1}.hero-thai{font-family:'Noto Sans Thai',sans-serif;display:block;font-size:23px;line-height:1.6;font-weight:500;color:var(--text);letter-spacing:0;margin-top:14px}.overview-sub{font-size:14px;color:var(--muted)}.eyebrow{font-family:var(--font-mono);font-weight:500;font-size:10px;letter-spacing:1.8px;line-height:1.8}.trip-badge{font-family:var(--font-mono);font-size:10px;border-radius:0;padding:11px 14px;letter-spacing:1px;background:transparent}.overview-bottom{margin-top:24px}.trip-stats b{font-family:var(--font-display);font-size:25px;font-weight:500}.trip-stats{gap:20px}.route-strip{column-gap:12px}.route-strip>i{color:#8a9db8}
.timeline-heading h2,.section-title h2{font-weight:600}.timeline{gap:7px}.day-btn{border-radius:0;border-color:transparent}.day-btn:hover{background:#e3ebf8}.day-btn.active{background:var(--yellow);color:var(--text);border-color:#d9b900}.day-btn.active small{color:#374e6f}.day-num{font-family:var(--font-mono);border-radius:0;font-weight:500;background:#e1eaf7;color:#4d6585}.day-btn.active .day-num{background:#ffffff60;color:var(--text)}.day-btn strong{font-weight:600}.day-btn.active small{color:#374e6f}.day-toolbar{font-family:var(--font-body)}#dayPosition{font-size:12px}.daily-panel,.scene-card,.quick-card,.detail-card,.budget-row,.check-row{border-radius:2px;border-color:var(--line);box-shadow:none;background:#ffffffb8}.daily-panel h2{font-size:31px;font-weight:600;letter-spacing:-.3px;color:var(--accent)}.day-meta{font-family:var(--font-body);font-size:12px}.day-count{font-family:var(--font-mono);border-radius:0;background:var(--soft);color:var(--accent);font-size:10px;border:1px solid var(--line)}.events time{font-family:var(--font-body);font-weight:600;color:var(--accent)}.event-text{font-weight:500}.event-text:before{background:var(--accent);box-shadow:0 0 0 4px #e5edf9}.event-text small{font-size:14px;line-height:1.8}.day-note,.callout,.reminder-card,.metro-condition,.metro-day-note{background:#fff9df;border-color:#e8d888;color:#5c532d;border-radius:0}.day-note{border-left-color:var(--yellow)}.callout{border-left-color:var(--yellow)}.reminder-card{color:#594e24}.reminder-card .place-cn{color:var(--accent)}.section-title .eyebrow{letter-spacing:1.5px}.small-tag,.badge{border-radius:0}.badge.paid{background:#e8effa;border-color:#c7d6eb;color:var(--accent)}.badge{background:#fff8d9;color:#645211;border-color:#e6d894}.detail-card h3{color:var(--accent);font-weight:500}.airport{font-family:var(--font-display);font-weight:500;font-size:33px;letter-spacing:.6px;color:var(--accent)}.airport small,.airport .place-names{font-family:var(--font-body);letter-spacing:0}.airport>small{font-size:20px}.money,.budget-total{font-family:var(--font-display);font-weight:500;color:var(--accent);letter-spacing:0}.money small,.budget-total small{font-family:var(--font-body)}.budget-total{font-size:58px}.budget-row .bar i{background:var(--accent)!important}.bar,.bar i{border-radius:0}.bar{background:#dbe5f3}.check-row{border-radius:0}.check-row input{accent-color:var(--accent)}.check-row:has(input:checked){background:#e5edf9}.check-row:has(input:checked) span{text-decoration-color:#8ca4c3}.toast{border-radius:0;background:#1b3e70;color:#fff;border-left:4px solid var(--yellow)}
.place-cn{color:#234b7f}.place-pinyin{color:var(--muted);font-family:var(--font-body)}.scene-switch,.scene-switch button,.map-controls,.pin-label{border-radius:0}.scene-switch{background:#11233de8}.scene-switch button[aria-pressed=true]{background:var(--yellow);color:#172a44}.map-controls{background:#11233de8}.map-controls button:not(:disabled):hover{background:var(--yellow);color:#172a44}.pin-dot{background:var(--yellow);box-shadow:0 0 0 3px #ffd51c30}.pin.active .pin-label{border-color:var(--yellow)}.highlight-days button{border-radius:0}.map-area{background:#11223b}.scene-hint{font-family:var(--font-body);letter-spacing:.2px}
.metro-entry-button{border-radius:0;background:var(--yellow);border-color:#e2bb07;color:#172a44;padding:17px 18px}.metro-entry-button:hover{background:#ffdf4b;color:#172a44}.metro-entry-button small{color:#3d4f65}.metro-entry-button strong{font-weight:600}.metro-event-button{border-radius:0;background:#edf3fc;border-color:#c0d1e8;color:var(--accent)}.metro-event-button:hover{background:var(--yellow);border-color:var(--yellow);color:var(--text)}.metro-dialog{border-radius:2px;border-color:var(--line);background:#f1f5fb;box-shadow:0 24px 100px #10213b50}.metro-dialog::backdrop{background:#10213ba8}.metro-header{background:#f5f8fd;border-color:var(--line);position:relative}.metro-header:before{content:'';position:absolute;top:0;left:0;width:64px;height:4px;background:var(--yellow)}.metro-header h2{color:var(--accent);font-weight:600}.metro-header .eyebrow{font-family:var(--font-mono)}#metroRouteSelect,.metro-route-summary,.metro-leg,.metro-line-chip,.metro-direction,.metro-walk-note{border-radius:0;border-color:var(--line)}#metroRouteSelect{background:#fff;color:var(--text)}.metro-route-summary{background:#fff}.metro-route-summary h3{font-weight:500;color:var(--accent)}.metro-line-chip{color:#253e5e;background:#fff}.metro-line-chip i{background:var(--metro-color)}.metro-fare{color:var(--accent)}.metro-fare strong{font-family:var(--font-display);font-size:34px;font-weight:500;letter-spacing:.3px}.metro-leg{background:#fff}.metro-step{background:var(--yellow);border-color:#e3c227;border-radius:0;color:var(--text);font-family:var(--font-mono)}.metro-station>span{color:var(--accent)}.metro-direction{background:#e9f0fa}.metro-direction .metro-label{color:#425e81}.metro-direction-hint{color:#5b7292}.metro-change{color:var(--accent);border-color:var(--line)}.metro-footer{color:var(--muted);border-color:var(--line)}.metro-footer a,.metro-footer summary{color:var(--accent)}
@media(max-width:1199px){.hero-latin{font-size:58px}.trip-stats{gap:14px}.trip-stats b{font-size:22px}}
@media(max-width:720px){.header-inner{min-height:78px}.brand{font-size:20px;letter-spacing:.3px}.brand small{font-size:9px}.brand-icon{height:33px;width:33px;border-radius:0}.brand-icon .line-icon{width:22px;height:22px}#infoBtn{padding:6px 8px}.nav-inner{gap:25px}.rail-btn{font-size:13px;min-height:50px}.trip-overview{padding-top:20px}.overview-title h1{margin-top:12px;margin-bottom:9px}.hero-latin{font-size:clamp(35px,9.3vw,56px);letter-spacing:-.6px;line-height:1.12}.hero-thai{font-size:19px;line-height:1.6;margin-top:10px}.overview-sub{font-size:12px}.overview-bottom{margin-top:19px}.eyebrow{font-size:9px;letter-spacing:1.2px}.trip-stats b{font-size:23px}.day-btn{border-radius:0;border-color:var(--line)}.day-btn.active .day-num{color:#172a44;background:transparent}.daily-panel{border-radius:0}.daily-panel h2{font-size:28px}.metro-dialog{border-radius:2px}.metro-entry-button{padding:14px 15px}.metro-entry-button strong{font-size:13px}.metro-fare strong{font-size:30px}.metro-header h2{font-size:21px}.metro-route-summary h3{font-size:18px}.budget-total{font-size:49px}.drawer-top h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){button,a,input,select{transition:none}}