:root {
  --ink: #252821;
  --paper: #f3efe5;
  --cream: #fbf8f0;
  --sage: #6d7964;
  --sage-deep: #4c5847;
  --terracotta: #b86e4e;
  --line: rgba(37, 40, 33, .14);
  --muted: #787b72;
  --shadow: 0 18px 50px rgba(44, 45, 36, .10);
  --font: "Times New Roman", Arial, SimSun, "宋体", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #d9d6cc; }
body { margin: 0; color: var(--ink); font-family: var(--font); background: #d9d6cc; }
button, input { font: inherit; }
button { color: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .12; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.app-shell { width: min(100%, 520px); margin: 0 auto; min-height: 100vh; background: var(--paper); box-shadow: 0 0 70px rgba(0,0,0,.15); overflow: hidden; }

.hero { position: relative; min-height: 570px; padding: max(24px, env(safe-area-inset-top)) 24px 28px; overflow: hidden; background: linear-gradient(145deg, #74806b, #64705d 54%, #4f5b49); color: #fffdf5; }
.hero:after { content:""; position:absolute; inset:auto -70px -100px; width:380px; height:380px; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.hero-topline { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2; }
.eyebrow { font-size:12px; letter-spacing:.22em; opacity:.78; }
.icon-button { width:40px; height:40px; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:transparent; display:grid; place-items:center; cursor:pointer; }
.icon-button svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.kicker { margin:70px 0 12px; font-size:15px; letter-spacing:.25em; }
.hero h1 { position:relative; z-index:2; margin:0; font-size:54px; line-height:.93; font-weight:normal; letter-spacing:-.04em; }
.hero h1 i { display:block; margin-top:14px; font-size:25px; font-weight:normal; letter-spacing:.02em; opacity:.78; }
.hero-copy { position:relative; z-index:2; max-width:280px; margin:24px 0 34px; font-size:14px; line-height:1.85; opacity:.82; }
.trip-meta { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 1.3fr 1fr; border-top:1px solid rgba(255,255,255,.23); padding-top:17px; gap:8px; }
.trip-meta span { display:block; font-size:11px; opacity:.58; margin-bottom:6px; }
.trip-meta strong { font-size:13px; font-weight:normal; }
.hero-art { position:absolute; right:-15px; top:108px; width:205px; height:258px; opacity:.75; }
.hero-art .sun { position:absolute; width:145px; height:145px; right:2px; top:2px; border-radius:50%; background:#d6b99d; opacity:.65; }
.bottle { position:absolute; bottom:0; display:block; border-radius:42% 42% 12px 12px; background:rgba(236,226,204,.63); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }
.bottle:before { content:""; position:absolute; left:35%; top:-35px; width:30%; height:42px; border-radius:4px 4px 0 0; background:inherit; }
.bottle.one { right:77px; width:69px; height:120px; }
.bottle.two { right:8px; width:56px; height:165px; background:rgba(178,113,79,.72); }
.bottle.three { right:132px; width:45px; height:83px; background:rgba(217,201,165,.58); }

.status-strip { margin:-1px 18px 0; transform:translateY(-20px); position:relative; z-index:4; background:var(--cream); border:1px solid rgba(255,255,255,.7); border-radius:18px; box-shadow:var(--shadow); display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:16px; }
.status-icon { width:34px; height:34px; display:grid; place-items:center; color:white; border-radius:50%; background:var(--terracotta); font-style:italic; font-weight:bold; }
.status-strip strong { display:block; font-size:14px; }
.status-strip p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.status-strip button { border:0; background:transparent; color:var(--terracotta); font-size:12px; cursor:pointer; }

.segmented { position:sticky; top:0; z-index:10; margin:0 18px 28px; padding:5px; display:grid; grid-template-columns:repeat(4,1fr); gap:3px; background:rgba(224,219,207,.92); backdrop-filter:blur(10px); border-radius:14px; }
.segmented button { border:0; padding:10px 4px; border-radius:10px; background:transparent; font-size:13px; cursor:pointer; }
.segmented button.active { background:var(--cream); color:var(--sage-deep); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.view { display:none; padding:0 18px 10px; }
.view.active { display:block; animation:rise .32s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(7px); } }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin:0 3px 18px; }
.section-heading > div { display:flex; align-items:baseline; gap:10px; }
.section-heading h2 { margin:0; font-size:23px; font-weight:normal; letter-spacing:-.03em; }
.section-heading p { margin:0; color:var(--muted); font-size:12px; }
.section-index { color:var(--terracotta); font-size:11px; letter-spacing:.12em; }
.section-heading.compact { margin-top:40px; padding:0 18px; }

.day-card { background:var(--cream); border-radius:24px; padding:20px 18px 8px; box-shadow:0 10px 35px rgba(59,58,48,.07); }
.day-summary { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--line); }
.day-summary h3 { margin:0 0 5px; font-size:21px; font-weight:normal; }
.day-summary p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.weather { min-width:62px; padding:8px 9px; border-radius:13px; background:#ece7da; text-align:center; font-size:11px; color:var(--sage-deep); }
.timeline { position:relative; padding:7px 0 6px 17px; }
.timeline:before { content:""; position:absolute; left:4px; top:29px; bottom:24px; width:1px; background:#c8c2b4; }
.timeline-item { position:relative; display:grid; grid-template-columns:58px 1fr; gap:13px; padding:17px 0; }
.timeline-item:before { content:""; position:absolute; left:-17px; top:24px; width:7px; height:7px; border:2px solid var(--cream); border-radius:50%; background:var(--terracotta); box-shadow:0 0 0 1px var(--terracotta); }
.timeline-time { font-size:12px; color:var(--sage-deep); padding-top:3px; }
.timeline-content h4 { margin:0 0 6px; font-size:16px; font-weight:normal; }
.timeline-content p { margin:0 0 10px; color:var(--muted); font-size:12px; line-height:1.65; }
.tag { display:inline-block; margin:0 5px 7px 0; padding:4px 8px; font-size:10px; border-radius:999px; color:var(--sage-deep); background:#e7eadf; }
.tag.warn { color:#8f4c33; background:#f3ddd2; }
.item-actions { display:flex; gap:8px; flex-wrap:wrap; }
.item-actions a, .details-toggle { text-decoration:none; border:1px solid var(--line); background:transparent; border-radius:999px; padding:7px 10px; font-size:11px; cursor:pointer; }
.item-actions a.primary { color:white; background:var(--sage); border-color:var(--sage); }
.item-details { display:none; margin-top:10px; padding:10px 12px; border-radius:12px; background:#efebe0; color:#686a62; font-size:11px; line-height:1.7; }
.timeline-item.open .item-details { display:block; }
.day-tabs { display:flex; gap:8px; overflow:auto; padding:2px 3px 13px; scrollbar-width:none; }
.day-tabs::-webkit-scrollbar, .wish-scroller::-webkit-scrollbar { display:none; }
.day-tabs button { min-width:88px; border:1px solid var(--line); padding:10px; border-radius:14px; background:transparent; text-align:left; cursor:pointer; }
.day-tabs button span, .day-tabs button small { display:block; }
.day-tabs button span { font-size:16px; }
.day-tabs button small { margin-top:2px; font-size:10px; color:var(--muted); }
.day-tabs button.active { color:white; background:var(--sage); border-color:var(--sage); }
.day-tabs button.active small { color:rgba(255,255,255,.67); }

.booking-list { display:grid; gap:12px; }
.booking-card { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:16px; background:var(--cream); border-radius:18px; box-shadow:0 8px 26px rgba(59,58,48,.05); }
.booking-num { width:37px; height:37px; border-radius:50%; background:#e7eadf; color:var(--sage-deep); display:grid; place-items:center; font-size:12px; }
.booking-card h3 { margin:0 0 5px; font-size:15px; font-weight:normal; }
.booking-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.booking-card a { text-decoration:none; color:var(--terracotta); font-size:11px; }
.soft-note { margin-top:16px; padding:17px; border-left:3px solid #d3a080; background:#ece5d8; border-radius:5px 16px 16px 5px; }
.soft-note strong { font-size:13px; }
.soft-note p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.65; }

.checklist-groups { display:grid; gap:13px; }
.check-group { background:var(--cream); border-radius:18px; padding:16px; }
.check-group h3 { margin:0 0 11px; font-size:15px; font-weight:normal; }
.check-item { display:flex; align-items:center; gap:10px; padding:9px 0; color:#4f514b; font-size:13px; border-top:1px solid rgba(37,40,33,.07); cursor:pointer; }
.check-item:first-of-type { border-top:0; }
.check-item input { appearance:none; width:19px; height:19px; border:1px solid #aaa89f; border-radius:5px; margin:0; display:grid; place-content:center; }
.check-item input:checked { background:var(--sage); border-color:var(--sage); }
.check-item input:checked:after { content:"✓"; color:white; font-size:13px; }
.check-item:has(input:checked) span { text-decoration:line-through; opacity:.5; }
.reset-button { display:block; width:100%; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:transparent; color:var(--muted); cursor:pointer; }

.wishlist { padding-bottom:40px; }
.wish-scroller { display:flex; overflow-x:auto; gap:12px; padding:0 18px 12px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.wish-card { min-width:180px; min-height:170px; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; padding:16px; border-radius:20px; background:#d8d4c8; }
.wish-card:nth-child(3n+2) { background:#c9d0c3; }
.wish-card:nth-child(3n+3) { background:#dfc8b8; }
.wish-card small { color:#686a62; font-size:10px; letter-spacing:.08em; }
.wish-card h3 { margin:auto 0 8px; font-size:18px; font-weight:normal; }
.wish-card p { margin:0; font-size:11px; color:#62645d; }
.wish-card a { margin-top:12px; color:var(--ink); font-size:11px; }

footer { padding:45px 24px max(45px, env(safe-area-inset-bottom)); color:#e9e5d8; background:var(--ink); text-align:center; }
.footer-mark { width:54px; height:54px; margin:0 auto 18px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; font-size:22px; }
footer p { margin:0; line-height:1.8; font-size:14px; }
footer small { display:block; margin-top:24px; color:#8e9089; font-size:10px; }
.toast { position:fixed; left:50%; bottom:26px; z-index:50; transform:translate(-50%, 20px); padding:10px 16px; background:rgba(37,40,33,.94); color:white; border-radius:999px; font-size:12px; opacity:0; pointer-events:none; transition:.25s ease; white-space:nowrap; }
.toast.show { opacity:1; transform:translate(-50%, 0); }

@media (min-width: 700px) {
  body { padding:24px 0; }
  .app-shell { border-radius:30px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }