
/* SECTION: base */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --ink:#16283d; --sub:#5b6b80; --bg:#eef3fa; --card:#ffffff;
  --brand:#2f6bff; --accent:#ff8a3d;
  --hotel:#2f6bff; --flight:#7c4dff; --play:#ff8a3d;
  --line:#e3eaf4; --ok:#1fa971;
  --radius:16px;
}
html,body { height:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink);
}
#app { max-width:480px; margin:0 auto; min-height:100%; background:var(--bg);
  box-shadow:0 0 40px rgba(22,40,61,.08); padding-bottom:86px; position:relative; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea { font-family:inherit; font-size:15px; color:var(--ink); }
.hidden { display:none !important; }

/* SECTION: header */
.hero { position:relative; height:172px; overflow:hidden; background:linear-gradient(160deg,#1c3a6b,#2f6bff 55%,#7db3ff); }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero .veil { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,25,50,.15),rgba(10,25,50,.65)); }
.hero .txt { position:absolute; left:16px; right:16px; bottom:12px; color:#fff; }
.hero h1 { font-size:22px; letter-spacing:1px; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.hero .meta { font-size:12.5px; opacity:.92; margin-top:4px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hero .cd { background:rgba(255,138,61,.95); color:#fff; font-weight:700; border-radius:999px;
  padding:2px 10px; font-size:12px; }
.hero .tag { background:rgba(255,255,255,.18); border-radius:999px; padding:2px 9px; backdrop-filter:blur(2px); }
.start-row { display:flex; align-items:center; gap:8px; padding:10px 16px 2px; font-size:13px; color:var(--sub); }
.start-row input { flex:1; border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:13.5px; background:var(--card); }

/* SECTION: tabs & views */
.tabbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
  display:flex; background:var(--card); border-top:1px solid var(--line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom)); z-index:30; }
.tabbar button { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:11.5px; color:var(--sub); padding:5px 0; border-radius:12px; }
.tabbar button svg { width:23px; height:23px; }
.tabbar button.on { color:var(--brand); font-weight:700; }
.view { padding:14px 14px 8px; animation:fade .18s ease; }
@keyframes fade { from{opacity:0; transform:translateY(4px);} to{opacity:1;} }
.section-title { font-size:15px; font-weight:700; margin:4px 2px 10px; display:flex; align-items:center; justify-content:space-between; }
.section-title .btn-minor { font-size:12.5px; color:var(--brand); font-weight:600; padding:4px 8px; border-radius:8px; background:#e8f0ff; }

/* SECTION: cards (shared) */
.card { background:var(--card); border-radius:var(--radius); padding:14px; margin-bottom:12px;
  box-shadow:0 1px 4px rgba(22,40,61,.05); }
.day-head { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.day-badge { background:var(--brand); color:#fff; font-weight:700; font-size:13px;
  border-radius:8px; padding:3px 9px; flex-shrink:0; }
.day-date { font-size:12.5px; color:var(--sub); }
.day-cost { margin-left:auto; font-size:13px; font-weight:700; color:var(--accent); flex-shrink:0; }
.empty-tip { font-size:13px; color:var(--sub); text-align:center; padding:18px 0; line-height:1.7; }

/* SECTION: itinerary */
.todo { display:flex; align-items:flex-start; gap:9px; padding:8px 2px; border-bottom:1px dashed var(--line); }
.todo:last-of-type { border-bottom:none; }
.todo .ck { width:21px; height:21px; border-radius:50%; border:2px solid #c2d0e2; flex-shrink:0;
  margin-top:1px; display:flex; align-items:center; justify-content:center; background:#fff; }
.todo .ck svg { width:12px; height:12px; opacity:0; }
.todo.done .ck { background:var(--ok); border-color:var(--ok); }
.todo.done .ck svg { opacity:1; }
.todo .tx { flex:1; font-size:14.5px; line-height:1.5; word-break:break-all; }
.todo.done .tx { color:#93a3b8; text-decoration:line-through; }
.todo .ops { display:flex; gap:2px; flex-shrink:0; }
.todo .ops button { color:#93a3b8; font-size:16px; padding:2px 6px; }
.add-row { display:flex; gap:8px; margin-top:10px; }
.add-row input { flex:1; border:1px solid var(--line); border-radius:10px; padding:8px 11px; background:#f7fafd; }
.add-row button { background:var(--brand); color:#fff; border-radius:10px; padding:8px 14px; font-size:14px; font-weight:600; }
.day-del { margin-left:8px; color:#c9d4e2; font-size:16px; padding:0 4px; }

/* SECTION: costs list */
.cat-tag { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:10px; color:#fff; font-size:14px; font-weight:700; flex-shrink:0; }
.cost-item { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px dashed var(--line); }
.cost-item:last-child { border-bottom:none; }
.cost-item .nm { font-size:14.5px; font-weight:600; }
.cost-item .dt { font-size:11.5px; color:var(--sub); margin-top:2px; }
.cost-item .amt { margin-left:auto; font-weight:700; font-size:15px; text-align:right; flex-shrink:0; }
.cost-item .del { color:#c9d4e2; font-size:17px; padding:4px 4px 4px 8px; flex-shrink:0; }
.fab { position:fixed; right:calc(50% - 222px); bottom:100px; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(145deg,#ff9d4d,#ff6f2f); color:#fff; font-size:28px; font-weight:300;
  box-shadow:0 6px 18px rgba(255,111,47,.45); z-index:29; display:flex; align-items:center; justify-content:center; }
@media (max-width:480px){ .fab { right:18px; } }
.filter-row { display:flex; gap:8px; margin-bottom:12px; }
.chip { font-size:13px; padding:6px 13px; border-radius:999px; background:var(--card);
  color:var(--sub); border:1px solid var(--line); }
.chip.on { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }

/* SECTION: summary */
.total-card { background:linear-gradient(150deg,#1c3a6b,#2f6bff); color:#fff; text-align:center; padding:22px 14px 18px; }
.total-card .lab { font-size:13px; opacity:.85; }
.total-card .big { font-size:36px; font-weight:800; letter-spacing:.5px; margin:4px 0 2px; font-variant-numeric:tabular-nums; }
.total-card .sub { font-size:12.5px; opacity:.85; }
.bar-row { margin:11px 0; }
.bar-row .top { display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:5px; }
.bar-row .top b { font-variant-numeric:tabular-nums; }
.bar-row .pct { color:var(--sub); font-size:11.5px; margin-left:6px; }
.bar-track { height:9px; background:#eef2f8; border-radius:99px; overflow:hidden; }
.bar-fill { height:100%; border-radius:99px; transition:width .35s ease; }
.people-row { display:flex; align-items:center; gap:12px; }
.people-row .lab { font-size:14px; }
.stepper { margin-left:auto; display:flex; align-items:center; gap:2px; }
.stepper button { width:32px; height:32px; border-radius:9px; background:#e8f0ff; color:var(--brand); font-size:19px; font-weight:700; }
.stepper .num { width:44px; text-align:center; font-size:16px; font-weight:700; }
.people-row .pp { font-size:13px; color:var(--sub); }
.per-cap { text-align:center; padding:4px 0 2px; }
.per-cap .big { font-size:24px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.per-cap .lab { font-size:12px; color:var(--sub); }
.daily-row { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px dashed var(--line); font-size:13.5px; }
.daily-row:last-child { border-bottom:none; }
.daily-row .d { color:var(--sub); width:64px; flex-shrink:0; }
.daily-row .dots { display:flex; gap:5px; margin-left:auto; align-items:center; }
.dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dot.z { opacity:.22; }
.daily-row .amt { font-weight:700; width:86px; text-align:right; font-variant-numeric:tabular-nums; }

/* SECTION: modal */
.mask { position:fixed; inset:0; background:rgba(16,30,50,.5); z-index:40; display:flex;
  align-items:flex-end; justify-content:center; animation:fade .15s ease; }
.sheet { width:100%; max-width:480px; background:var(--card); border-radius:22px 22px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom)); animation:up .22s ease; max-height:82vh; overflow-y:auto; }
@keyframes up { from{transform:translateY(40px); opacity:.6;} to{transform:none; opacity:1;} }
.sheet h3 { font-size:17px; margin-bottom:14px; text-align:center; }
.fld { margin-bottom:13px; }
.fld label { display:block; font-size:12.5px; color:var(--sub); margin-bottom:5px; }
.fld input,.fld select,.fld textarea { width:100%; border:1px solid var(--line); border-radius:11px;
  padding:10px 12px; background:#f8fafd; }
.fld textarea { resize:none; height:56px; }
.cat-pick { display:flex; gap:8px; }
.cat-pick button { flex:1; border:1.5px solid var(--line); border-radius:11px; padding:9px 0;
  font-size:14px; color:var(--sub); background:#f8fafd; }
.cat-pick button.on { color:#fff; font-weight:700; border-color:transparent; }
.sheet .save { width:100%; background:var(--brand); color:#fff; font-size:16px; font-weight:700;
  border-radius:13px; padding:13px 0; margin-top:4px; }
.sheet .cancel { display:block; margin:10px auto 0; color:var(--sub); font-size:14px; padding:6px 20px; }
.fld .err { color:#e2504c; font-size:12px; margin-top:4px; }

/* SECTION: toast */
#toast { position:fixed; left:50%; bottom:110px; transform:translateX(-50%); background:rgba(22,40,61,.92);
  color:#fff; font-size:13.5px; padding:9px 18px; border-radius:999px; z-index:60; opacity:0;
  pointer-events:none; transition:opacity .25s; max-width:80vw; text-align:center; }
#toast.show { opacity:1; }
.note { font-size:11.5px; color:#93a3b8; text-align:center; padding:6px 16px 18px; line-height:1.6; }

.auth-screen,.loading-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(150deg,#dce9f8,#f6f8fc 65%)}
.auth-card{width:min(100%,400px);background:#fff;border-radius:22px;overflow:hidden;padding:0 24px 24px;box-shadow:0 18px 55px #152d5415}
.auth-art{height:138px;margin:0 -24px 24px;background:center 55%/cover url('https://agent.qianwen.com/service/b4a29a3e-6929-41/1f339fbc7e50a40a857306c70cc52482')}.auth-card h1{font-size:23px;margin-bottom:10px}.auth-card p{color:var(--sub);font-size:14px;line-height:1.7}
.auth-card form{margin-top:23px}.auth-card label{display:block;font-size:13px;font-weight:600;margin:12px 0 7px}.auth-card input{width:100%;padding:12px;border:1px solid #d5dfeb;border-radius:11px}
.primary{width:100%;padding:12px;border-radius:11px;background:var(--brand);color:white;font-weight:600;font-size:15px;margin-top:9px}.auth-card .auth-foot{margin-top:22px;text-align:center;font-size:12px}
.auth-error{font-size:13px!important;color:#b53b31!important;white-space:pre-wrap;margin-top:10px;min-height:18px}.cloud-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#fff;font-size:11px;color:var(--sub);gap:6px}.cloud-bar button{color:var(--brand);padding:5px 6px;font-size:12px}.cloud-bar #cloud-status{line-height:1.5}
.pending-banner{background:#fff1da;padding:12px;font-size:13px;line-height:1.5;color:#85531b}.pending-banner button{padding:8px 8px 0 0;color:#805000;text-decoration:underline}
.share-sheet{max-height:90vh;overflow:auto}.share-heading{display:flex;align-items:center;justify-content:space-between}.share-heading button{font-size:26px;padding:0 8px}.muted{font-size:12px;color:var(--sub);line-height:1.7;margin:0 0 13px}.two-fields{display:flex;gap:12px}.two-fields>.fld{flex:1}.share-sheet select{width:100%}
#invite-output{padding:14px;background:#eef4ff;border-radius:12px;margin:16px 0}#invite-url{display:block;width:100%;font-size:12px;padding:8px;margin:8px 0;border:1px solid #cbdaf0;border-radius:8px;resize:vertical}#invite-output label{font-size:12px}.minor{display:inline-block;padding:9px 12px;border-radius:9px;background:#e8f0ff;color:var(--brand);font-size:13px}.invite-row{padding:12px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}.invite-row .detail{flex:1;font-size:13px}.invite-row small{display:block;color:var(--sub);font-size:11px;margin-top:4px}.invite-row button{font-size:12px;padding:7px;color:#b54036}.share-sheet hr{border:0;border-top:1px solid var(--line);margin:22px 0}.share-sheet h3{font-size:17px}
button:disabled{opacity:.45;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #83b1ff;outline-offset:2px}.viewer .add-row,.viewer .todo .ops,.viewer .day-del,.viewer #btn-add-day,.viewer #btn-new-cost,.viewer .cost-item button{display:none}.viewer .todo .ck{pointer-events:none}.viewer .start-row input{pointer-events:none}.viewer #ppl-minus,.viewer #ppl-plus{visibility:hidden}.owner-only.hidden{display:none!important}
.share-sheet #member-name-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.share-sheet #member-name-fields .fld{margin:4px 0}.share-sheet #member-name-fields input{width:100%;padding:10px;border:1px solid #d5dfeb;border-radius:9px}

.member-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 8px}.member-options button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 12px;border:1px solid #dce5ef;border-radius:12px;background:#f8faff;text-align:left;color:var(--ink)}.member-options button:active{background:#e8f0ff}.member-options strong{font-size:15px}.member-options small{font-size:11px;color:var(--sub);white-space:nowrap}.auth-card #admin-login-title{font-size:15px;margin:22px 0 -8px}.auth-card .member-options+.muted{font-size:12px;margin:0}.share-sheet #member-name-fields{grid-template-columns:1fr}.member-setting{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-bottom:1px solid var(--line);padding:8px 0}.member-setting .fld{margin:4px 0}.member-setting input,.member-setting select{width:100%;padding:10px;border:1px solid #d5dfeb;border-radius:9px}.member-setting input:disabled{background:#f4f6f9;color:var(--sub)}@media(max-width:420px){.member-options button{padding:12px 9px}.member-options strong{font-size:14px}.member-setting{gap:8px}}

.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dashboard-grid .card{margin-bottom:10px}.total-card .big{font-size:25px}.actual-total .big{color:var(--accent)}.budget-balance{display:flex;justify-content:space-between;align-items:center}.budget-balance .big{font-size:21px}.budget-balance .per-cap{text-align:right}.shortcut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.shortcut-grid button{min-height:72px;padding:8px 4px;border:1px solid var(--line);border-radius:12px;background:#f8faff;font-size:22px}.shortcut-grid span{display:block;margin-top:4px;font-size:11px;color:var(--sub)}.recent-cost{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}.recent-cost:last-child{border-bottom:0}.recent-cost small{grid-column:1/-1;color:var(--sub);font-size:11px}.filter-row{display:flex;gap:8px;overflow-x:auto}.guide-section{margin-top:22px;scroll-margin-top:14px}.attraction-grid{display:grid;grid-template-columns:1fr;gap:12px}.attraction-card{overflow:hidden;background:var(--card);border-radius:var(--radius);box-shadow:0 1px 4px rgba(22,40,61,.05)}.attraction-card>img,.guide-image-placeholder{display:block;width:100%;height:190px;object-fit:cover;background:linear-gradient(135deg,#d9e9fa,#eff5fb);color:var(--sub)}.guide-image-placeholder{display:grid;place-items:center;font-size:13px}.guide-body{padding:12px 14px 14px}.guide-body h3{font-size:16px;margin-bottom:3px}.guide-location{font-size:11px;color:var(--sub)}.guide-body p{font-size:13px;line-height:1.6;margin-top:9px}.photo-credit{display:block;margin-top:8px;font-size:10px;color:var(--sub);line-height:1.5}.photo-credit a{color:var(--sub);text-decoration:underline}.guide-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.guide-actions button{font-size:12px;color:var(--brand);padding:5px 8px;background:#f1f5ff;border-radius:7px}.guide-row{display:flex;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid var(--line)}.guide-row:last-child{border-bottom:0}.guide-row>div:first-of-type{flex:1;min-width:0}.guide-row b{font-size:13px}.guide-row small{display:block;margin-top:4px;color:var(--sub);font-size:11px;line-height:1.5}.packing-row.checked b{text-decoration:line-through;color:#8b9aab}.packing-check{width:28px;height:28px;flex:none;border:1px solid var(--line);border-radius:50%;color:var(--brand);font-size:16px}.packing-row.checked .packing-check{background:#e8f5ef;color:#208d63}.viewer .packing-check{pointer-events:none}.viewer .packing-check{opacity:.7}.viewer .guide-actions{display:none!important}.viewer #btn-new-budget{display:none}.viewer [data-add-guide]{display:none!important}.view-planning>.note{text-align:left;padding:0 2px 12px}.view-planning #btn-new-budget{margin:0 0 10px}.view-planning .filter-row{margin-bottom:10px}@media(min-width:600px){.attraction-grid{grid-template-columns:1fr 1fr}.dashboard-grid .big{font-size:29px}}@media(max-width:360px){.shortcut-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid .big{font-size:21px}}

.guide-tabs{display:flex;gap:8px;overflow-x:auto;margin:12px -2px -8px;padding:2px 2px 8px;scrollbar-width:none;scroll-behavior:smooth}
.guide-tabs::-webkit-scrollbar{display:none}
.guide-tabs [role="tab"]{flex:0 0 auto;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--sub);font-size:13px;white-space:nowrap}
.guide-tabs [role="tab"].on{border-color:var(--brand);background:#edf3ff;color:var(--brand);font-weight:600}
