:root {
  --ink: #173044;
  --blue: #0c3557;
  --blue-2: #176679;
  --sand: #f4ead6;
  --paper: #fffaf0;
  --gold: #c58a3a;
  --coral: #d2694c;
  --muted: #6f7b7d;
  --line: rgba(12, 53, 87, .12);
  --shadow: 0 14px 36px rgba(20, 47, 62, .12);
  font-family: ui-rounded, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #dce9e8; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.app-shell { width: min(100%, 520px); min-height: 100vh; margin: auto; background: var(--paper); box-shadow: 0 0 50px rgba(0,0,0,.12); position: relative; }
.topbar { position: sticky; top: 0; z-index: 10; min-height: 78px; padding: 16px 18px 12px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,250,240,.94); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 4px; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 0; font: 800 24px/1.1 Georgia, "Songti SC", serif; color: var(--blue); }
h2 { font: 800 22px/1.2 Georgia, "Songti SC", serif; color: var(--blue); }
h3 { margin-bottom: 7px; font-size: 16px; }
.avatar { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--blue); color: white; font-weight: 900; box-shadow: 0 5px 13px rgba(12,53,87,.25); }
main { padding-bottom: 100px; min-height: calc(100vh - 78px); }
.page { padding: 16px; animation: enter .25s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.hero { min-height: 260px; padding: 20px; border-radius: 24px; color: white; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, transparent 25%, rgba(5,28,48,.88)), url("assets/ppt-image-3.jpg") center/cover; box-shadow: var(--shadow); }
.hero .tag { align-self: flex-start; }
.hero h2 { max-width: 290px; margin: 12px 0 8px; color: white; font-size: 30px; }
.hero p { margin: 0; color: rgba(255,255,255,.82); }
.tag { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--blue); font-size: 11px; font-weight: 800; }
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 25px 2px 12px; }
.section-head h2 { margin: 0; }
.section-head button, .text-link { border: 0; padding: 5px; background: transparent; color: var(--coral); font-size: 13px; font-weight: 800; }
.card { padding: 16px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 7px 20px rgba(20,47,62,.06); }
.next-card { position: relative; overflow: hidden; }
.next-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background: var(--gold); }
.meta { color: var(--muted); font-size: 12px; }
.pill-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0; }
.pill { padding: 6px 9px; border-radius: 99px; background: var(--sand); color: #6f4c1c; font-size: 11px; font-weight: 700; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.primary,.secondary,.map-btn,.vote-btn { min-height: 42px; border-radius: 12px; border: 0; font-weight: 800; }
.primary,.map-btn { background: var(--blue); color: white; }
.secondary { background: #eef3f1; color: var(--blue); }
.full { width: 100%; }
.outfit { display: grid; grid-template-columns: 54px 1fr; gap: 12px; background: linear-gradient(135deg,#fff3dd,#f8e5ca); }
.outfit-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:white; font-size:27px; }
.outfit p { margin: 0; font-size: 13px; line-height: 1.6; }
.day-basics { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:17px; }
.day-basics.single { grid-template-columns:1fr; }
.basic-card { padding:14px; }
.basic-card .basic-icon { font-size:22px; margin-bottom:8px; }
.basic-card p { margin:0; font-size:12px; color:var(--muted); line-height:1.55; }
.basic-card h3 { margin-bottom:5px; }
.basic-card a { display:inline-block; margin-top:8px; color:var(--coral); font-size:11px; font-weight:800; text-decoration:none; }
.sync-bar { margin-top: 14px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; border: 1px dashed rgba(23,102,121,.3); border-radius: 12px; background: #f2faf8; color: var(--blue-2); font-size: 12px; }
.global-sync { margin: 0 0 12px; }
.sync-bar .dot { width:8px; height:8px; border-radius:50%; background:#b3aaa0; flex:0 0 auto; }
.sync-bar .dot.online { background:#2aa879; box-shadow:0 0 0 4px rgba(42,168,121,.12); }
.dot { width:8px; height:8px; border-radius:50%; background:#4aa47e; box-shadow:0 0 0 4px rgba(74,164,126,.12); }
.day-tabs { display:flex; gap:8px; overflow:auto; scrollbar-width:none; margin: 0 -16px 16px; padding: 0 16px; }
.day-tabs button { flex:0 0 auto; min-width:56px; padding:10px 8px; border:1px solid var(--line); border-radius:14px; background:white; font-weight:800; }
.day-tabs button.active { background:var(--blue); color:white; }
.day-tabs small { display:block; opacity:.65; font-weight:600; margin-top:2px; }
.day-cover { position:relative; min-height:160px; margin-bottom:16px; border-radius:20px; overflow:hidden; background-size:cover; background-position:center; color:white; }
.day-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(5,28,48,.84)); }
.day-cover div { position:absolute; z-index:1; left:17px; right:17px; bottom:14px; }
.day-cover h2 { color:white; margin:0 0 4px; }
.timeline { position:relative; margin-left:7px; padding-left:23px; border-left:2px solid #e3d4b8; }
.stop { position:relative; margin-bottom:14px; }
.stop::before { content:""; position:absolute; width:12px; height:12px; left:-30px; top:18px; border-radius:50%; background:var(--gold); border:4px solid var(--paper); }
.stop-top { display:flex; justify-content:space-between; gap:10px; }
.stop p { margin:6px 0 0; line-height:1.5; font-size:13px; color:var(--muted); }
.stop.meal { border-left:5px solid var(--coral); background:#fff5ef; }
.stop.meal::before { background:var(--coral); }
.stop.meal.breakfast { border-left-color:#e2a84a; background:#fff9e9; }
.stop.meal.lunch { border-left-color:#d46f4d; }
.stop.meal.dinner { border-left-color:#8e5a8c; background:#faf1fa; }
.stop.flight { border-left:5px solid var(--blue-2); background:#f1f8f8; }
.stop.flight::before { background:var(--blue-2); }
.flight-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.flight-grid span { padding:8px; border-radius:9px; background:white; color:var(--blue); font-size:11px; line-height:1.45; }
.stop-kind { display:inline-flex; align-items:center; gap:5px; margin-bottom:5px; font-size:10px; font-weight:900; color:var(--coral); }
.guide-extra { margin-top:18px; padding-top:4px; border-top:1px solid var(--line); }
.guide-extra ul { padding-left:20px; }
.guide-extra li { margin:8px 0; font-size:14px; line-height:1.7; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.guide-card { min-height:205px; padding:0; overflow:hidden; }
.guide-card img { width:100%; height:112px; object-fit:cover; display:block; }
.guide-card { cursor:pointer; }
.guide-card:active { transform:scale(.985); }
.guide-body { padding:12px; }
.guide-body h3 { margin-bottom:4px; }
.guide-body p { margin:0; font-size:11px; color:var(--muted); line-height:1.45; }
.mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:14px; padding:5px; border-radius:15px; background:#edf2ef; }
.mode-switch button { min-height:39px; border:0; border-radius:11px; background:transparent; font-weight:800; color:var(--muted); }
.mode-switch button.active { background:white; color:var(--blue); box-shadow:0 4px 12px rgba(20,47,62,.09); }
.wish-summary { margin-bottom:14px; background:linear-gradient(135deg,#103e60,#176679); color:white; }
.wish-summary h2 { color:white; margin-bottom:6px; }
.wish-summary p { margin:0; color:rgba(255,255,255,.78); font-size:13px; line-height:1.55; }
.wish-list { display:grid; gap:11px; }
.wish-card { display:grid; grid-template-columns:48px 1fr; gap:12px; position:relative; }
.wish-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; background:var(--sand); font-size:23px; }
.wish-card h3 { padding-right:54px; margin-bottom:4px; }
.wish-card p { margin:0; }
.status-badge { position:absolute; right:12px; top:12px; padding:5px 7px; border-radius:99px; background:#eef3f1; color:var(--blue-2); border:0; font-size:10px; font-weight:800; }
.wish-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:2px; }
.wish-actions button,.wish-actions a { min-height:36px; display:grid; place-items:center; border:0; border-radius:10px; background:#f3f2ec; text-decoration:none; color:var(--blue); font-size:11px; font-weight:800; }
.wish-actions button.liked { background:#ffe8df; color:var(--coral); outline:1px solid #efbaa8; }
.source-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 18px; }
.source-links a { padding:11px; border:1px solid var(--line); border-radius:12px; background:white; color:var(--blue); text-align:center; text-decoration:none; font-size:12px; font-weight:800; }
.wish-map { position:relative; height:235px; margin-bottom:12px; overflow:hidden; border-radius:20px; background:linear-gradient(145deg,#cae3df,#f1dfbd); border:1px solid rgba(12,53,87,.12); }
.wish-map::before { content:""; position:absolute; inset:0; opacity:.55; background:radial-gradient(circle at 18% 25%,transparent 0 18%,rgba(255,255,255,.6) 19% 20%,transparent 21%),linear-gradient(32deg,transparent 45%,rgba(255,255,255,.6) 46% 48%,transparent 49%); }
.map-label { position:absolute; z-index:2; left:12px; top:12px; padding:7px 10px; border-radius:99px; background:rgba(255,255,255,.9); color:var(--blue); font-size:11px; font-weight:900; }
.map-pin { position:absolute; z-index:2; transform:translate(-50%,-50%); width:31px; height:31px; display:grid; place-items:center; border:3px solid white; border-radius:50% 50% 50% 8px; rotate:-45deg; background:var(--coral); box-shadow:0 4px 9px rgba(20,47,62,.24); text-decoration:none; }
.map-pin span { rotate:45deg; font-size:13px; }
.category-filter { display:flex; gap:7px; overflow:auto; margin:0 -16px 13px; padding:0 16px; scrollbar-width:none; }
.category-filter button { flex:0 0 auto; padding:8px 12px; border:1px solid var(--line); border-radius:99px; background:white; font-size:11px; font-weight:800; }
.category-filter button.active { background:var(--gold); color:white; border-color:var(--gold); }
.guide-dialog { width:min(calc(100% - 24px),500px); max-height:88vh; padding:0; border:0; border-radius:24px; overflow:auto; background:var(--paper); box-shadow:var(--shadow); }
.guide-dialog::backdrop { background:rgba(5,28,48,.62); backdrop-filter:blur(4px); }
.guide-close { position:sticky; z-index:4; float:right; top:12px; right:12px; width:38px; height:38px; margin:12px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--blue); font-size:25px; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.guide-hero { width:100%; height:225px; object-fit:cover; display:block; }
.guide-copy { padding:20px; }
.guide-copy h2 { font-size:28px; margin-bottom:8px; }
.guide-copy h3 { margin-top:22px; color:var(--coral); }
.guide-copy p { font-size:14px; line-height:1.8; }
.fact-strip { display:flex; gap:7px; flex-wrap:wrap; margin:12px 0; }
.city-filter { display:flex; gap:8px; margin-bottom:15px; }
.city-filter button { border:0; border-radius:99px; padding:8px 11px; background:#eef3f1; font-size:12px; font-weight:800; }
.city-filter button.active { background:var(--coral); color:white; }
.task-progress { padding:18px; background:var(--blue); color:white; }
.task-progress h2 { color:white; margin-bottom:7px; }
.progress { height:8px; background:rgba(255,255,255,.18); border-radius:99px; overflow:hidden; }
.progress span { display:block; height:100%; background:#f0bd68; border-radius:inherit; transition:.25s; }
.task-list { display:grid; gap:10px; margin-top:14px; }
.task { display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:start; }
.task input { width:20px; height:20px; accent-color:var(--blue); }
.task.done h3 { text-decoration:line-through; opacity:.5; }
.task p { margin:3px 0 0; }
.owner { padding:4px 7px; border-radius:99px; background:var(--sand); font-size:10px; font-weight:800; }
.add-task { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:12px; }
.add-task input, textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px; background:white; }
.vote-card + .vote-card { margin-top:12px; }
.vote-options { display:grid; gap:8px; }
.vote-btn { display:flex; justify-content:space-between; padding:0 12px; background:#f4f1e9; }
.vote-btn.selected { outline:2px solid var(--gold); background:#fff4db; }
.comment { padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.comment:last-child { border:0; }
.comment strong { color:var(--coral); }
.doc-row { display:flex; align-items:center; gap:11px; padding:13px 0; border-bottom:1px solid var(--line); }
.doc-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--sand); }
.doc-row p { margin:2px 0 0; }
.bottom-nav { position:fixed; z-index:12; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,520px); height:75px; padding:8px 8px max(8px, env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,1fr); background:rgba(255,250,240,.96); backdrop-filter:blur(18px); border-top:1px solid var(--line); }
.bottom-nav button { border:0; background:transparent; color:#7e8888; font-size:10px; font-weight:800; }
.bottom-nav span { display:block; margin-bottom:4px; font-size:19px; line-height:1; }
.bottom-nav button.active { color:var(--blue); }
.sheet { width:min(calc(100% - 24px),480px); margin:auto auto 12px; padding:0; border:0; border-radius:24px; background:var(--paper); box-shadow:var(--shadow); }
.sheet::backdrop { background:rgba(5,28,48,.5); backdrop-filter:blur(3px); }
.sheet form { padding:13px 18px 20px; }
.sheet-handle { width:42px; height:5px; margin:0 auto 18px; border-radius:99px; background:#d1d6d3; }
.member-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px; }
.member-list button { min-height:54px; border:1px solid var(--line); border-radius:14px; background:white; font-weight:800; }
.dialog-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:8px; margin-top:10px; }
textarea { min-height:110px; resize:none; }
.empty { padding:26px; text-align:center; color:var(--muted); }
@media (min-width: 700px) { body { padding:22px 0; } .app-shell { min-height:calc(100vh - 44px); border-radius:28px; overflow:hidden; } .bottom-nav { bottom:22px; border-radius:0 0 28px 28px; } }