:root { color-scheme:light; --paper:#faf9f5; --surface:#fff; --ink:#233f35; --muted:#63776d; --green:#0b5742; --soft:#e8f1e8; --line:#d9e3d8; --error:#9a302a; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; line-height:1.6; color:var(--ink); background:#f2f5f0; }
* { box-sizing:border-box; }
body { margin:0; padding:24px 16px; padding-bottom:max(24px,env(safe-area-inset-bottom)); }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.55; }
a { color:var(--green); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #78a48d; outline-offset:3px; }
[hidden] { display:none !important; }
h1,h2,h3,h4,p { margin:0; }
h1 { font-size:clamp(1.7rem,4vw,2.1rem); line-height:1.25; letter-spacing:-.02em; font-weight:600; }
h2 { font-size:1.12rem; font-weight:600; }
h3,h4 { font-size:1rem; font-weight:600; }
.shell { max-width:860px; margin:0 auto; border:1px solid var(--line); border-radius:28px; background:var(--paper); overflow:hidden; }
.shell.trip-shell { max-width:640px; }
.header { padding:28px 28px 22px; }
.eyebrow { color:var(--muted); font-size:.875rem; margin-bottom:12px; letter-spacing:.04em; }
.header-row,.section-heading,.item-heading,.form-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.header-description { color:var(--muted); margin-top:10px; }
.header-actions,.actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.primary,.secondary,.subtle,.filter,.day-button { border:1px solid var(--line); border-radius:12px; min-height:44px; padding:10px 15px; background:var(--surface); color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:.875rem; }
.primary { background:var(--green); color:white; border-color:var(--green); font-weight:500; }
.subtle { background:var(--soft); color:var(--green); border-color:transparent; }
.text-button { padding:4px 0; background:none; color:var(--muted); border:0; min-height:44px; font-size:.875rem; }
.back { display:inline-flex; align-items:center; gap:6px; margin-bottom:18px; }
.main { padding:0 28px 28px; }
.trip-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.trip-card { padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:20px; text-align:left; color:var(--ink); display:flex; flex-direction:column; width:100%; gap:12px; min-height:182px; }
.trip-card:hover { border-color:#83a68f; }
.trip-card h2 { font-size:1.25rem; overflow-wrap:anywhere; }
.trip-city { font-size:.875rem; color:var(--muted); }
.trip-card-footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.875rem; color:var(--muted); }
.badge { display:inline-flex; padding:3px 9px; border-radius:7px; font-size:.75rem; background:var(--soft); color:var(--green); }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); padding:0 12px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tabs button { min-height:56px; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); font-weight:500; }
.tabs button[aria-pressed="true"] { border-bottom-color:var(--green); color:var(--green); }
.days { display:flex; gap:8px; overflow-x:auto; padding:0 0 8px; scrollbar-width:thin; }
.day-button { flex:1 0 96px; display:flex; flex-direction:column; gap:0; padding:9px 12px; font-size:1rem; }
.day-button small { font-size:.75rem; }
.day-button[aria-pressed="true"],.filter[aria-pressed="true"] { background:var(--green); border-color:var(--green); color:white; }
.section-heading { margin:20px 0 16px; }
.secondary-text { color:var(--muted); font-size:.875rem; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline-item { display:grid; grid-template-columns:54px minmax(0,1fr); gap:12px; padding-bottom:18px; }
.timeline-item:last-child { padding-bottom:0; }
.time { padding-top:16px; font-size:.875rem; font-variant-numeric:tabular-nums; color:var(--muted); }
.place-card { border:1px solid var(--line); background:var(--surface); border-radius:18px; padding:17px; min-width:0; }
.item-heading h3 { overflow-wrap:anywhere; }
.place-area,.place-note,.note-body { margin-top:8px; color:var(--muted); overflow-wrap:anywhere; white-space:pre-wrap; }
.place-area { font-size:.875rem; }
.actions { margin-top:14px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.filter { padding:8px 13px; }
.place-list,.note-list { display:grid; gap:14px; }
.note-card { padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:18px; }
.empty { padding:34px 20px; border:1px dashed var(--line); border-radius:18px; text-align:center; color:var(--muted); }
.empty p { margin:9px 0 16px; }
.sync-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); padding:12px 0; font-size:.75rem; }
.sync-error { color:var(--error); }
.notice { padding:12px 14px; background:var(--soft); border-radius:12px; font-size:.875rem; margin-bottom:16px; }
.notice.error { color:var(--error); background:#f9eae6; }
dialog { width:calc(100% - 24px); max-width:520px; max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--paper); color:var(--ink); }
dialog::backdrop { background:rgb(20 38 29 / .4); backdrop-filter:blur(3px); }
.form-heading { margin-bottom:12px; }
.close { min-height:44px; min-width:44px; padding:0; border:0; background:none; font-size:1.4rem; color:var(--muted); }
label { display:block; margin:16px 0 6px; font-size:.875rem; font-weight:500; }
label span { font-size:.75rem; color:var(--muted); font-weight:400; }
input,textarea,select { display:block; width:100%; min-width:0; min-height:46px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); padding:10px 12px; font-size:1rem; }
input::placeholder,textarea::placeholder { color:#859289; opacity:1; }
textarea { resize:vertical; line-height:1.6; }
.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-pair>div { min-width:0; }
.form-hint { font-size:.75rem; color:var(--muted); margin-top:7px; }
.form-error { color:var(--error); margin-top:12px; font-size:.875rem; }
.form-actions { display:flex; gap:10px; margin-top:22px; }
.form-actions .primary { flex:1; }
.share-url { word-break:break-all; font-size:.875rem; }
.toast { position:fixed; bottom:max(22px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:10; max-width:min(90vw,550px); padding:12px 18px; border-radius:12px; background:var(--ink); color:white; font-size:.875rem; box-shadow:0 6px 26px #0002; }
.loading { padding:30px; text-align:center; color:var(--muted); }
.join { max-width:480px; margin:32px auto; }
.join .main { padding-top:8px; }
.join .primary { width:100%; margin-top:16px; }
@media(max-width:560px) { body { padding:0; background:var(--paper); } .shell { border:0; border-radius:0; min-height:100dvh; } .header { padding:26px 20px 18px; } .main { padding:0 16px 24px; } .trip-grid { grid-template-columns:1fr; } .header-actions { gap:6px; } .header-actions button { padding:8px 10px; } .timeline-item { grid-template-columns:44px minmax(0,1fr); gap:8px; } .place-card { padding:14px; } .trip-card { min-height:158px; } dialog { padding:20px; } }
@media(prefers-reduced-motion:no-preference) { button,a { transition:background .12s,border-color .12s; } }