:root {
  color-scheme: light;
  --paper: #f5f6f8;
  --card: #fff;
  --ink: #182027;
  --muted: #64717d;
  --faint: #8a96a1;
  --line: #e1e5e9;
  --soft-line: #edf0f3;
  --accent: #c14932;
  --accent-dark: #a53e2b;
  --accent-soft: #f9eeeb;
  --accent-text: #fff;
  --topbar-bg: rgba(255,255,255,.95);
  --success: #16745d;
  --danger: #b93d42;
  --shadow: 0 10px 34px rgba(24, 32, 39, .055);
  --radius: 14px;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
/* ponytail: page zoom scales maps too; use separate text tiers if independent font sizing becomes necessary. */
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--paper); zoom: var(--ui-scale, 1); }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 9px 12px; transform: translateY(-160%); background: var(--ink); color: white; border-radius: 7px; }
.skip-link:focus { transform: none; }
.app-shell { min-height: 100vh; }
.loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 14px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.topbar { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; gap: 20px; height: 68px; padding: 0 max(22px, calc((100vw - 1336px) / 2)); border-bottom: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(16px); }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 750; letter-spacing: -.5px; }
.brand-name { display: flex; align-items: baseline; gap: 5px; font-size: 14px; font-weight: 700; letter-spacing: -.4px; }
.brand-name em { color: var(--accent); font-style: normal; font-weight: 600; }
.topbar-context { overflow: hidden; padding-left: 17px; border-left: 1px solid var(--line); color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-spacer { flex: 1; }
.topbar-user { color: var(--muted); font-size: 12px; }
.icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; transition: background .16s,border-color .16s,transform .16s; }
.icon-button:hover { border-color: #c7cfd6; background: #f8f9fa; }
.icon-button:active, .button:active { transform: scale(.985); }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .16s,border-color .16s,color .16s,transform .16s; }
.button-primary { background: var(--ink); color: #fff; }
.button-primary:hover { background: var(--accent); color: var(--accent-text); }
.button-quiet { border-color: var(--line); background: var(--card); color: var(--muted); }
.button-quiet:hover { border-color: #c7cfd6; background: #f8f9fa; color: var(--ink); }
.button-danger { border-color: #f0d9d9; background: var(--card); color: var(--danger); }
.button-danger:hover { background: #fff7f7; }
.button-small { min-height: 32px; padding: 0 10px; font-size: 12px; }
.content { width: min(1336px, 100%); margin: 0 auto; padding: 38px 26px 68px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: 1.4px; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(27px, 4vw, 38px); font-weight: 650; letter-spacing: -1.25px; line-height: 1.1; text-wrap: balance; }
h2 { margin-bottom: 8px; font-size: 20px; font-weight: 650; letter-spacing: -.55px; }
h3 { font-size: 14px; font-weight: 650; }
.page-heading p:last-child { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.welcome { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,.6fr); gap: 16px; margin-bottom: 28px; }
.welcome-copy { position: relative; overflow: hidden; min-height: 194px; padding: 25px 27px 24px; border: 1px solid #e9dfdc; border-radius: var(--radius); background: linear-gradient(113deg,#fff 0%,#fff 67%,#fbf1ee 100%); box-shadow: var(--shadow); }
.welcome-copy::after { position: absolute; top: -85px; right: -42px; width: 245px; height: 245px; border: 1px solid rgba(193,73,50,.12); border-radius: 50%; box-shadow: 0 0 0 24px rgba(193,73,50,.035),0 0 0 52px rgba(193,73,50,.025); content: ""; }
.welcome-copy h2 { max-width: 460px; margin: 0 0 11px; font-size: clamp(20px,2.5vw,28px); letter-spacing: -.8px; line-height: 1.24; }
.welcome-copy p:last-child { max-width: 420px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.welcome-mark { display: flex; min-height: 194px; align-items: center; justify-content: center; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.mark-route { width: 68px; height: 68px; }
.welcome-mark span { color: #a0abb5; font-size: 11px; letter-spacing: 1.5px; }
.metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 35px; }
.metric { min-height: 87px; padding: 16px 19px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.metric-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.metric strong { font-size: 24px; font-weight: 650; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.metric-next { font-size: 16px !important; letter-spacing: -.2px !important; }
.planner-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 17px; align-items: start; }
.new-trip-panel { position: sticky; top: 84px; }
.new-trip-panel h2 { margin-bottom: 17px; font-size: 18px; }
.stack-form { display: grid; gap: 12px; }
.stack-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.stack-form input, .stack-form textarea { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; outline: none; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 400; }
.stack-form textarea { min-height: 70px; resize: vertical; }
.stack-form input:focus, .stack-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(193,73,50,.1); }
.trip-page-heading { margin-top: 19px; }
.add-stop-panel { margin-top: 17px; }
.add-stop-panel h3 { margin: 0 0 14px; font-size: 16px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.section-heading h2 { margin: 0; font-size: 17px; }
.trip-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.trip-card { min-height: 202px; padding: 19px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(24,32,39,.025); transition: border-color .18s,transform .18s,box-shadow .18s; }
.trip-card:hover { transform: translateY(-2px); border-color: #d0d6dc; box-shadow: var(--shadow); }
.trip-cover { position: relative; margin: 0; overflow: hidden; border-radius: 9px; background: var(--soft-line); }
.trip-cover img { display: block; width: 100%; object-fit: cover; }
.trip-cover figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 12px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; font-size: 10px; }
.trip-cover figcaption a { color: inherit; }
.trip-cover-card { margin-bottom: 15px; }
.trip-cover-card img { height: 145px; }
.trip-cover-hero { margin-bottom: 18px; }
.trip-cover-hero img { max-height: 320px; min-height: 180px; }
.trip-cover-remove { position: absolute; top: 10px; right: 10px; }
.offline-writes { margin-bottom: 18px; border-color: var(--accent); }
.offline-writes ol { display: grid; gap: 9px; margin: 12px 0 0; padding-left: 20px; }
.offline-writes li { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--soft-line); }
.offline-writes li > div:first-child { min-width: 0; }
.offline-writes li strong, .offline-writes li small { display: block; overflow-wrap: anywhere; }
.offline-writes li small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.offline-writes details { margin-top: 7px; }
.offline-writes details summary { cursor: pointer; font-size: 11px; }
.offline-writes pre { max-height: 180px; overflow: auto; padding: 8px; background: var(--soft-line); white-space: pre-wrap; font-size: 10px; }
.offline-write-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }
@media (max-width: 650px) { .offline-writes li { display: grid; } .offline-write-actions { justify-content: start; } }
.stop-member-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 5px 0; color: var(--muted); font-size: 10px; }
.stop-member-rating select { min-height: 27px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; }
.stop-member-rating details summary { cursor: pointer; }
.stop-member-rating details ul { margin: 5px 0; padding-left: 17px; }
.trip-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 23px; }
.trip-card .trip-destination { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11px; font-weight: 600; }
.trip-card h3 { min-height: 22px; margin: 0 0 7px; font-size: 17px; letter-spacing: -.4px; }
.trip-dates { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.trip-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--soft-line); color: var(--faint); font-size: 11px; }
.trip-link { color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; }
.trip-link:hover { color: var(--accent); }
.empty-state { display: grid; min-height: 230px; place-items: center; padding: 30px; border: 1px dashed #cdd4db; border-radius: 12px; background: rgba(255,255,255,.5); text-align: center; }
.empty-mark { display: grid; width: 46px; height: 46px; place-items: center; margin: 0 auto 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 18px; }
.empty-state h3 { margin: 0 0 7px; }
.empty-state p { max-width: 310px; margin: 0 auto 15px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.trip-overview { display: grid; grid-template-columns: minmax(0,1fr) 286px; gap: 18px; align-items: start; }
.trip-overview-main { min-width: 0; }
.trip-overview-aside { display: grid; gap: 13px; }
.trip-date-shift { display: grid; gap: 11px; margin: -9px 0 18px; padding: 13px 15px; }
.trip-date-shift summary { color: var(--ink); font-size: 12px; font-weight: 650; cursor: pointer; }
.trip-date-shift form { display: grid; gap: 10px; padding-top: 4px; }
.trip-date-shift label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.trip-date-shift input, .trip-date-shift select { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; }
.trip-map-panel { margin-bottom: 22px; padding: 16px; }
.trip-map-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.trip-map-heading h3 { margin: 0; font-size: 16px; }
.trip-map-heading .eyebrow { margin: 0 0 5px; }
.trip-map-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; }
[data-roadtrip-via-mode][hidden] { display: none !important; }
[data-roadtrip-via-mode][aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.roadtrip-via-list { margin: 10px 0; }
.roadtrip-via-list:empty { display: none; }
.roadtrip-via-list > strong { font-size: 12px; }
.roadtrip-via-list ol { display: flex; gap: 7px; flex-wrap: wrap; margin: 7px 0 0; padding: 0; list-style: none; }
.roadtrip-via-list li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid var(--soft-line); border-radius: 7px; color: var(--muted); font-size: 11px; }
.roadtrip-preferences { margin: -10px 0 18px; padding: 12px 16px; }
.roadtrip-preferences summary { color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 650; }
.roadtrip-preferences form { display: grid; gap: 12px; padding-top: 12px; }
.roadtrip-preference-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.roadtrip-preferences label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.roadtrip-preferences input[type="number"], .roadtrip-preferences input[type="time"], .roadtrip-preferences select { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.roadtrip-preferences fieldset { display: flex; flex-wrap: wrap; gap: 8px 15px; margin: 0; padding: 9px 11px; border: 1px solid var(--soft-line); border-radius: 8px; }
.roadtrip-preferences legend { color: var(--muted); font-size: 11px; }
.roadtrip-preferences fieldset label { display: inline-flex; align-items: center; gap: 5px; }
.roadtrip-preferences .muted-hint { margin: 0; }
.roadtrip-route-warnings { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0; }
.roadtrip-route-warnings span { padding: 5px 8px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 11px; }
.roadtrip-boundaries { margin: -10px 0 18px; padding: 12px 16px; }
.roadtrip-boundaries summary { color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 650; }
.roadtrip-boundaries > p { margin: 10px 0; }
.roadtrip-boundaries form, .roadtrip-boundary-stale { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--soft-line); }
.roadtrip-boundaries form > strong, .roadtrip-boundaries form > span { font-size: 12px; }
.roadtrip-boundaries form > span { color: var(--muted); }
.roadtrip-boundaries form > small { flex-basis: 100%; color: var(--danger); }
.roadtrip-boundaries label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.roadtrip-boundaries select, .roadtrip-boundaries input[type="number"] { min-height: 33px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.roadtrip-google-import { margin: -10px 0 18px; padding: 12px 16px; }
.roadtrip-google-import summary { color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 650; }
.roadtrip-google-import > p { margin: 10px 0; }
.roadtrip-google-import form { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; }
.roadtrip-google-import label { display: grid; flex: 1; min-width: min(220px, 100%); gap: 5px; color: var(--muted); font-size: 11px; }
.roadtrip-google-import input { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.roadtrip-google-preview { margin-top: 14px; }
.roadtrip-google-preview > p, .roadtrip-google-preview small { color: var(--muted); font-size: 11px; }
.roadtrip-google-preview ol { display: grid; gap: 6px; max-height: 260px; overflow: auto; padding-left: 24px; }
.roadtrip-google-preview li { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.roadtrip-google-preview li label { display: inline-flex; flex: 0 1 auto; align-items: center; min-width: 0; gap: 6px; }
.roadtrip-google-preview input[type="checkbox"] { width: 15px; min-height: 0; height: 15px; margin: 0; }
.map-poi-single[hidden], .map-poi-multi[hidden] { display: none !important; }
.map-poi-multi { flex: 1 0 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; }
.map-poi-multi summary { cursor: pointer; color: var(--muted); font-size: 11px; }
.map-poi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 9px; }
.map-poi-grid label { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.map-poi-grid input[type="checkbox"] { width: 14px; height: 14px; min-height: auto; margin: 0; }
.trip-map-controls label, .stop-day-move { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.trip-map-controls input, .trip-map-controls select, .stop-day-move input { max-width: 165px; min-height: 31px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; }
.trip-map-status { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font-size: 11px; text-align: right; }
.trip-map-external-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.trip-map-external-links:empty { display: none; }
.trip-map-external-links span { color: var(--muted); font-size: 10px; }
.trip-format-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -10px 0 18px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.trip-format-bar > div { display: grid; gap: 2px; margin-right: auto; }
.trip-format-bar strong { color: var(--ink); font-size: 12px; }
.trip-format-bar span { color: var(--muted); font-size: 10px; }
.trip-format-bar input[type="date"] { min-height: 31px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; }
.calendar-feed-panel { display: grid; gap: 10px; margin: 0 0 18px; padding: 16px; }
.calendar-feed-panel h3, .calendar-feed-panel p { margin: 0; }
.calendar-feed-panel > div:first-child p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.calendar-feed-actions, .calendar-feed-url { display: flex; gap: 7px; flex-wrap: wrap; }
.calendar-feed-url input { flex: 1; min-width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); font: inherit; font-size: 12px; }
.trip-list-import { margin: -8px 0 18px; padding: 12px 16px; }
.trip-list-import summary { cursor: pointer; font-size: 12px; font-weight: 650; }
.trip-list-import form { display: grid; grid-template-columns: 120px minmax(180px, 1fr) 155px auto; align-items: end; gap: 10px; margin-top: 14px; }
.trip-list-import label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.trip-list-import input, .trip-list-import select { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; }
.trip-list-import .form-error { grid-column: 1 / -1; margin: 0; }
.trip-list-import .muted-hint { margin-bottom: 0; }
@media (max-width: 760px) { .trip-list-import form { grid-template-columns: 1fr; } }
.trip-print-option { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.trip-print-option input { accent-color: var(--accent); }
.trip-share-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 16px; margin: -7px 0 18px; padding: 13px 15px; }
.trip-share-copy h3 { margin: 0 0 4px; font-size: 14px; }
.trip-share-copy .eyebrow { margin: 0 0 4px; }
.trip-share-copy p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.trip-share-actions { display: flex; align-items: center; gap: 7px; }
.trip-share-url { display: flex; grid-column: 1 / -1; gap: 7px; }
.trip-share-url input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fafbfa; color: var(--muted); font-size: 11px; }
.trip-share-panel > .muted-hint { grid-column: 1 / -1; margin: 0; }
.trip-share-choices { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px 16px; }
.trip-share-choice { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.trip-share-choice input { accent-color: var(--accent); }
.trip-share-help { grid-column: 1 / -1; }
.shared-readonly { padding: 5px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 11px; }
.shared-trip-content { max-width: 860px; }
.shared-trip-map { margin: 16px 0; }
.shared-trip-map h2 { margin: 0 0 10px; font-size: 15px; }
.shared-trip-section { margin-top: 16px; }
.shared-trip-section h2 { margin: 0 0 10px; font-size: 16px; }
.shared-trip-section ol { display: grid; gap: 9px; margin: 0; padding-left: 21px; }
.shared-trip-section li { padding-left: 3px; }
.shared-trip-section li span, .shared-trip-section li small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.shared-trip-section li p { margin: 5px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.shared-stop-details { display: grid; gap: 4px; margin-top: 5px; }
.shared-stop-details p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.shared-stop-details .shared-stop-note { color: var(--ink); }
.shared-stop-details small, .shared-stop-details a { color: var(--muted); font-size: 11px; }
.shared-stop-photo { margin: 7px 0 0; }
.shared-stop-photo img { display: block; width: min(100%, 280px); max-height: 190px; border-radius: 8px; object-fit: cover; }
.shared-stop-photo figcaption { margin-top: 4px; color: var(--muted); font-size: 10px; }
.shared-day-note { margin: 10px 16px; padding: 10px 12px; border-left: 3px solid var(--note-color); border-radius: 6px; background: var(--soft-line); }
.shared-day-note strong, .shared-day-note small { display: block; }
.shared-day-note small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.shared-day-note .day-note-content { margin-top: 7px; }
.shared-days { display: grid; gap: 11px; }
.trip-chat { margin-top: 16px; }
.trip-chat .section-heading { margin-bottom: 10px; }
.trip-chat-messages { display: grid; gap: 9px; max-height: 370px; overflow-y: auto; margin: 0 0 12px; padding: 0; list-style: none; }
.trip-chat-message { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; }
.trip-chat-message-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.trip-chat-message-head time, .trip-chat-reply { color: var(--muted); font-size: 10px; }
.trip-chat-message p { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.trip-chat-reply { display: block; margin-top: 5px; }
.trip-chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.trip-chat-reaction, .trip-chat-emoji { padding: 3px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); cursor: pointer; font-size: 11px; }
.trip-chat-reaction[aria-pressed="true"] { border-color: var(--accent); }
.trip-chat form { display: grid; justify-items: start; gap: 8px; }
.trip-chat form label { width: 100%; font-size: 12px; }
.trip-chat textarea { width: 100%; margin-top: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; }
.trip-chat-replying { margin: 0; font-size: 11px; }
.trip-collab-workspace { display: grid; gap: 12px; margin-top: 16px; }
.trip-collab-workspace > details > summary { cursor: pointer; font-weight: 700; }
.trip-collab-workspace > details > button { margin-top: 10px; }
.collab-workspace-list { display: grid; gap: 10px; margin: 12px 0; }
.collab-workspace-item { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.collab-workspace-title { display: flex; align-items: center; gap: 8px; }
.collab-workspace-title small, .collab-workspace-item > small { color: var(--muted); }
.collab-note-content { overflow-wrap: anywhere; font-size: 12px; }
.collab-note-content p { margin: 3px 0; }
.trip-collab-workspace form { display: grid; gap: 8px; margin-top: 10px; }
.trip-collab-workspace form h3 { margin: 0; font-size: 13px; }
.trip-collab-workspace form label { display: grid; gap: 4px; font-size: 11px; }
.trip-collab-workspace input:not([type="checkbox"]), .trip-collab-workspace textarea { width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 7px; font: inherit; }
.trip-collab-workspace input[type="color"] { max-width: 80px; }
.collab-poll-options, .collab-workspace-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.collab-poll-options button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); cursor: pointer; }
.collab-poll-options button[aria-pressed="true"] { border-color: var(--accent); }
.collections-page { max-width: 1320px; }
.collection-library-layout { display: grid; grid-template-columns: 270px minmax(0,1fr); align-items: start; gap: 15px; }
.collection-library-sidebar { position: sticky; top: 16px; display: grid; gap: 12px; }
.collection-library-sidebar h2 { margin: 0; font-size: 15px; }
.collection-library-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.collection-library-list li { display: flex; align-items: center; gap: 3px; min-width: 0; }
.collection-library-list li .collection-library-link { flex: 1; min-width: 0; }
.collection-order-actions { display: flex; gap: 2px; }
.collection-order-actions button { width: 25px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); cursor: pointer; }
.collection-order-actions button:disabled { opacity: .35; cursor: default; }
.trip-collection-status { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.trip-collection-status h3 { width: 100%; margin: 0; font-size: 15px; }
.trip-collection-status p { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: 11px; }
.trip-collection-status label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.trip-collection-status select { min-height: 32px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; }
.collection-library-link { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.collection-library-link.active, .collection-library-link:hover { border-color: var(--line); background: #fafbfa; }
.collection-library-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: color-mix(in srgb,var(--collection-color) 18%,white); color: var(--collection-color); }
.collection-library-link > span:last-child { display: grid; gap: 2px; min-width: 0; }
.collection-library-link small { color: var(--muted); font-size: 10px; }
.collection-create-form { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.collection-create-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.collection-create-form input, .collection-create-form textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: 11px; }
.collection-library-detail { display: grid; min-width: 0; gap: 13px; }
.collection-library-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.collection-library-heading h1 { margin: 0 0 5px; font-size: 25px; }
.collection-library-heading p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.collection-file-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.collection-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.collection-meta-links { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 11px; overflow-wrap: anywhere; }
.collection-meta-edit { padding: 10px 12px; }
.collection-meta-edit summary { cursor: pointer; font-size: 12px; font-weight: 600; }
.collection-meta-edit form { display: grid; gap: 8px; margin-top: 10px; }
.collection-meta-edit label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; }
.collection-meta-edit input, .collection-meta-edit textarea { width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; }
.upcoming-reservations ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.upcoming-reservations li button { display: grid; gap: 3px; width: 100%; min-height: 70px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.upcoming-reservations li small, .upcoming-reservation-date { color: var(--muted); font-size: 10px; }
.admin-audit ol { display: grid; gap: 6px; padding: 0; list-style: none; }
.admin-audit li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.admin-audit li time, .admin-audit li small { color: var(--muted); }
.admin-audit li code { width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.collection-library-tools { display: grid; gap: 8px; }
.collection-trip-import { padding: 10px 12px; }
.collection-trip-import summary { cursor: pointer; font-size: 12px; font-weight: 600; }
.collection-trip-import p { color: var(--muted); font-size: 11px; }
.collection-trip-import label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.collection-trip-import select { min-height: 32px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; }
.collection-trip-import ol { max-height: 280px; overflow: auto; padding-left: 23px; }
.collection-trip-import li { margin: 6px 0; }
.collection-trip-import li label { display: flex; align-items: start; gap: 6px; }
.collection-trip-import li small { display: block; color: var(--muted); }
.collection-trip-import .collection-trip-force { display: flex; align-items: center; margin: 8px 0; }
.collection-map-panel { min-width: 0; padding: 14px; }
.collection-library-body { display: grid; gap: 10px; min-width: 0; }
.collection-map-panel .section-heading { margin-bottom: 10px; }
.collection-map-panel h2 { margin: 0; font-size: 15px; }
.collection-map-canvas { height: 340px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #edf0ec; }
.collection-map-status { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.collection-filter-panel { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; padding: 12px; }
.collection-filter-panel label { display: grid; gap: 4px; flex: 1 1 140px; color: var(--muted); font-size: 10px; }
.collection-filter-panel input, .collection-filter-panel select { min-height: 32px; width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: 11px; }
.collection-filter-panel [role="status"] { color: var(--muted); font-size: 11px; }
.collection-bulk-toolbar { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; padding: 12px; }
.collection-bulk-toolbar [role="status"] { color: var(--muted); font-size: 11px; margin-right: auto; }
.collection-bulk-toolbar label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.collection-bulk-toolbar select { min-height: 32px; min-width: 150px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: 11px; }
.collection-library-detail[data-collection-map-expanded="true"] .collection-map-canvas { height: min(70vh, 680px); }
.collection-library-detail[data-collection-map-expanded="true"] .collection-place-grid { display: none; }
@media (min-width: 1100px) {
  .collection-library-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .collection-library-body .collection-place-grid { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; max-height: min(75vh, 760px); overflow: auto; }
  .collection-library-body .collection-map-panel { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
  .collection-library-detail[data-collection-map-expanded="true"] .collection-library-body { grid-template-columns: 1fr; }
  .collection-library-detail[data-collection-map-expanded="true"] .collection-map-panel { grid-column: 1; position: static; }
}
.collection-place-form { margin-top: 3px; }
.collection-place-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.collection-place-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.collection-place-card > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.collection-place-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.collection-place-card-heading h3 { margin: 4px 0 0; font-size: 14px; }
.collection-place-photo { width: 100%; max-height: 180px; object-fit: cover; border-radius: 7px; }
.collection-place-extra { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; overflow-wrap: anywhere; }
.collection-place-edit summary { cursor: pointer; font-size: 11px; }
.collection-place-edit form { display: grid; gap: 8px; margin-top: 10px; }
.collection-place-edit label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; }
.collection-place-edit input, .collection-place-edit textarea { width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; }
.collection-place-status { color: var(--muted); font-size: 9px; }
.collection-place-category { color: var(--accent) !important; }
.collection-source { color: var(--muted); font-size: 10px; }
.collection-place-notes { white-space: pre-wrap; }
.collection-place-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.collection-place-tags span { padding: 3px 7px; border-radius: 99px; background: #f2f4f5; color: var(--muted); font-size: 9px; }
.collection-place-tags .collection-place-rating { background: #fff5e4; color: #9a6c14; letter-spacing: 1px; }
.collection-rating-votes { color: var(--muted); font-size: 10px; }
.collection-rating-votes summary { cursor: pointer; }
.collection-rating-votes ul { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 17px; }
.collection-place-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.collection-place-actions select, .collection-place-actions input { min-width: 0; min-height: 32px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: 10px; }
.collection-place-actions button { grid-column: 1 / -1; }
.collection-members ul, .collection-invites ul { display: grid; gap: 7px; margin: 10px 0; padding: 0; list-style: none; }
.collection-members li, .collection-invites li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.collection-members li > span, .collection-invites li strong { margin-right: auto; }
.collection-invites { padding-top: 12px; border-top: 1px solid var(--line); }
.collection-invites h3 { margin: 0 0 8px; }
.collection-invites li span { color: var(--muted); }
.collection-members form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.collection-members form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.collection-members select { min-height: 32px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); }
.collection-label-panel { display: grid; gap: 10px; }
.collection-label-filter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.collection-label-panel select, .collection-label-panel input { min-height: 32px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); }
.collection-label-panel input[type="color"] { width: 42px; padding: 3px; }
.collection-label-panel details > summary, .collection-place-labels > summary { cursor: pointer; font-size: 11px; }
.collection-label-panel form, .collection-label-bulk { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.collection-label-panel form label, .collection-label-bulk label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.collection-label-panel ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.collection-label-panel li { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.collection-managed-label { background: color-mix(in srgb, var(--label-color) 18%, var(--card)) !important; color: var(--label-color) !important; }
.collection-place-card[hidden] { display: none; }
.stop-item[hidden] { display: none; }
.user-tags-panel { margin-bottom: 16px; }
.user-tags-panel h3 { margin: 0 0 7px; }
.user-tags-panel form { display: flex; flex-wrap: wrap; align-items: end; gap: 7px; margin-top: 10px; }
.user-tags-panel form label { flex: 1 1 130px; }
.user-tags-panel input[type="color"] { width: 38px; min-height: 35px; padding: 2px; }
.user-tag-manager-list { margin-top: 12px; border-top: 1px solid var(--line); }
.user-tag-manager-list form { padding-top: 8px; }
.user-tag-manager-list input[name="name"] { flex: 1 1 100px; min-width: 0; }
.user-tag-filter { display: block; margin-top: 12px; }
.user-tag-filter select { width: 100%; }
.user-tag-badges, .user-tag-choices { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.user-tag-chip { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; color: var(--user-tag-color); background: color-mix(in srgb, var(--user-tag-color) 14%, var(--card)); font-size: 11px; font-weight: 700; }
.user-tag-picker { margin-top: 8px; font-size: 12px; }
.user-tag-picker summary { cursor: pointer; color: var(--accent); }
.user-tag-picker form { margin-top: 6px; }
.user-tag-choices label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.user-tag-picker .button { margin-top: 8px; }
.place-categories-panel { margin: 16px 0; }
.place-categories-panel form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.place-categories-panel form label { flex: 1 1 120px; }
.place-categories-panel input[name="name"] { flex: 1 1 150px; min-width: 0; }
.place-categories-panel input[name="icon"] { width: 48px; }
.place-categories-panel input[type="color"] { width: 42px; min-height: 36px; padding: 2px; }
.place-category-manager-list { margin-top: 12px; border-top: 1px solid var(--line); }
.place-category-manager-list form { padding-top: 8px; }
.place-category-filter { display: block; margin: 0 0 12px; }
.place-category-filter select { width: 100%; }
.place-category-badge { display: inline-flex; width: fit-content; align-items: center; margin: 4px 0; padding: 3px 7px; border-radius: 999px; color: var(--place-category-color); background: color-mix(in srgb, var(--place-category-color) 14%, var(--card)); font-size: 11px; font-weight: 700; }
.stop-actions { flex-wrap: wrap; }
.stop-actions [data-stop-category] { max-width: 130px; min-height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: 11px; }
.stop-location-saved { color: var(--success) !important; font-size: 10px !important; }
.stop-location-dialog .place-results { max-height: 300px; overflow: auto; }
.collection-place-select { align-self: center; }
.collection-place-labels form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.collection-place-labels form label { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
.collection-new-place-labels { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; }
.collection-new-place-labels legend { color: var(--muted); font-size: 10px; }
.collection-new-place-labels label { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
.trip-map-canvas { width: 100%; height: 340px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #edf0ec; z-index: 0; }
.map-poi-results { display: grid; max-height: 250px; gap: 6px; overflow: auto; margin-top: 9px; }
.map-charging-summary { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.charging-lookup { display: grid; justify-items: start; gap: 6px; padding: 6px 0; }
.charging-info { display: grid; gap: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.charging-info strong { color: var(--ink); }
.charging-info ul { margin: 2px 0; padding-left: 18px; }
.roadtrip-charging-panel ol { display: grid; gap: 12px; padding-left: 18px; }
.roadtrip-charging-panel li { padding: 4px 0; }
.roadtrip-charging-panel li button { margin: 0 0 6px 8px; }
.roadtrip-plan-preview > button { margin: 10px 0; }
.roadtrip-plan-preview [hidden] { display: none; }
.roadtrip-plan-days { display: grid; gap: 12px; margin-top: 10px; }
.roadtrip-plan-days section { padding: 11px; border: 1px solid var(--line); border-radius: 8px; }
.roadtrip-plan-days h4 { margin: 0 0 8px; }
.roadtrip-plan-days ol { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.roadtrip-plan-days li time { display: inline-block; min-width: 70px; color: var(--muted); }
.roadtrip-corridor { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.roadtrip-corridor summary { cursor: pointer; font-weight: 700; }
.roadtrip-corridor-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.roadtrip-corridor-controls label { display: grid; gap: 4px; font-size: 11px; }
.roadtrip-corridor-controls select, .roadtrip-corridor-controls input { min-height: 34px; max-width: 170px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; }
.hotel-location-fields [data-hotel-location-results], .hotel-booking-location [data-hotel-booking-results] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.hotel-booking-location { margin-top: 7px; font-size: 11px; }
.hotel-booking-location summary { cursor: pointer; color: var(--accent); }
.hotel-booking-location .search-row { margin-top: 7px; }
.roadtrip-hazard-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.roadtrip-hazard-tools[hidden] { display: none; }
.trip-map-empty { display: grid; height: 100%; min-height: 220px; place-items: center; padding: 20px; color: var(--muted); font-size: 12px; text-align: center; }
.trip-map-pin { border: 0; background: transparent; }
.trip-map-via-pin { border: 0; background: transparent; }
.trip-map-via-pin span { display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #fff; border-radius: 7px; background: #d68b38; box-shadow: 0 2px 8px rgba(0,0,0,.25); color: #fff; font: 700 17px/1 system-ui,sans-serif; cursor: grab; }
.trip-map-service-pin span { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid #fff; border-radius: 8px; background: var(--service-color); box-shadow: 0 2px 8px rgba(0,0,0,.25); color: #fff; font: 700 13px/1 system-ui,sans-serif; }
.roadtrip-service-list ol { display: grid; gap: 7px; padding: 0; list-style: none; }
.roadtrip-service-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.roadtrip-service-list li div { display: flex; flex-wrap: wrap; gap: 5px; }
.stop-service-kind { color: var(--accent); font-size: 11px; font-weight: 600; }
.roadtrip-stop-fields summary { cursor: pointer; font-size: 12px; font-weight: 650; }
.roadtrip-stop-fields .field-row { margin-top: 9px; }
.trip-map-pin span { display: grid; width: 28px; height: 28px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.25); color: #fff; font: 700 11px/1 system-ui,sans-serif; }
.trip-map-photo-pin { border: 0; background: transparent; }
.trip-map-photo-pin span { position: relative; display: block; width: 38px; height: 38px; border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.28); }
.trip-map-photo-pin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.trip-map-photo-pin b { position: absolute; right: -4px; bottom: -4px; display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid white; border-radius: 50%; background: var(--accent); color: white; font: 700 9px/1 system-ui,sans-serif; }
.trip-map-popup-photo { display: block; width: 170px; max-height: 100px; margin-bottom: 7px; border-radius: 6px; object-fit: cover; }
.trip-map-cluster { border: 0; background: transparent; }
.trip-map-cluster span { display: grid; width: 38px; height: 38px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #276b66; box-shadow: 0 2px 9px rgba(0,0,0,.25); color: #fff; font: 700 12px/1 system-ui,sans-serif; cursor: pointer; }
.trip-transit-details:empty { display: none; }
.trip-transit-details ol { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.trip-transit-details li { display: grid; gap: 3px; padding: 9px 12px; border-left: 3px solid var(--accent); background: var(--surface-muted); font-size: 13px; }
.trip-transit-details li span { color: var(--muted); }
.transit-route-choice { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.transit-route-choice select { max-width: min(100%, 360px); padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.trip-map-approx { display: inline-block; margin-top: 4px; color: #9a552f; }
.trip-modules { display: grid; gap: 12px; margin: 22px 0 28px; }
.trip-modules-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trip-modules-heading h3 { margin: 0; }
.trip-modules-heading .eyebrow { margin: 0 0 4px; }
.module-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 2px 0 5px; border-bottom: 1px solid var(--soft-line); }
.module-tab { flex: 0 0 auto; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.module-tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.module-content { display: grid; gap: 12px; }
.module-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 12px; border: 1px solid var(--soft-line); border-radius: 9px; background: #fcfcfb; }
.booking-import-panel { display: grid; gap: 9px; margin: 10px 0 14px; padding: 12px; border: 1px solid var(--soft-line); border-radius: 10px; }
.booking-import-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.booking-import-heading > div { display: grid; gap: 3px; }
.booking-import-heading > div > span, .booking-import-preview-list small { color: var(--muted); font-size: 10px; }
.booking-import-panel input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.booking-import-warnings { margin: 0; padding-left: 18px; color: var(--danger); font-size: 11px; }
.booking-import-preview-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.booking-import-preview-list li { padding: 8px; border: 1px solid var(--soft-line); border-radius: 8px; }
.booking-import-preview-list label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.booking-import-preview-list label > span { display: grid; gap: 3px; }
.module-form label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.module-form label:has(textarea), .module-form button[type="submit"] { grid-column: 1 / -1; }
.module-form input, .module-form select, .module-form textarea { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: 11px; }
.hotel-time-fields { grid-column: 1 / -1; margin: 0; padding: 8px 10px; border: 1px solid var(--soft-line); border-radius: 7px; }
.hotel-time-fields[hidden] { display: none; }
.module-form [data-transport-legs][hidden] { display: none; }
.hotel-time-fields legend { color: var(--muted); font-size: 11px; }
.module-form textarea { resize: vertical; }
.module-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.expense-ledger { display: grid; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.expense-ledger-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.expense-ledger-heading h4, .expense-ledger h5 { margin: 0; font-size: 13px; }
.todo-reminder-panel { display: grid; gap: 9px; margin: 12px 0; padding: 13px; border: 1px solid #efd7a1; border-radius: 10px; background: #fffaf0; }
.todo-reminder-panel h3 { margin: 0; font-size: 13px; }
.todo-reminder-panel .eyebrow { margin: 0 0 4px; color: #9a6c14; }
.todo-reminder-panel ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.todo-reminder-panel li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.todo-reminder-panel li div { display: grid; gap: 2px; }
.todo-reminder-panel li strong { font-size: 11px; }
.todo-reminder-panel li span { color: var(--muted); font-size: 10px; }
.expense-ledger h5 { margin-top: 4px; }
.expense-balances { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.expense-balances li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 9px; border-radius: 7px; background: #f8f9f7; color: var(--muted); font-size: 11px; }
.balance-credit { color: #26734d; }
.balance-debit { color: #a34438; }
.settlement-suggestion { align-items: center; }
.settlement-suggestion .module-item-actions input { min-height: 30px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font: inherit; font-size: 10px; }
.module-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--soft-line); border-radius: 8px; background: var(--card); }
.module-item.day-note-item { border-left: 3px solid var(--note-color,#d9dedf); padding-left: 9px; }
.day-note-icon { margin-right: 4px; }
.day-note-content { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.day-note-content p, .day-note-content ul, .day-note-content blockquote { margin: 4px 0; }
.day-note-content h1, .day-note-content h2, .day-note-content h3 { margin: 7px 0 4px; font-size: 12px; }
.day-note-content blockquote { padding-left: 9px; border-left: 2px solid var(--line); }
.day-note-content code { padding: 1px 4px; border-radius: 4px; background: var(--soft-line); font-family: ui-monospace,monospace; }
.day-note-content pre, .day-note-content table { display: block; max-width: 100%; overflow-x: auto; }
.day-note-content pre code { display: block; padding: 9px; white-space: pre; }
.day-note-content table { border-collapse: collapse; }
.day-note-content th, .day-note-content td { padding: 5px 8px; border: 1px solid var(--line); text-align: left; }
.day-note-content img { max-width: 100%; height: auto; }
.day-note-content a { overflow-wrap: anywhere; }
.booking-legs { display: grid; gap: 4px; margin: 5px 0 0; padding-left: 18px; color: var(--muted); font-size: 10px; }
.booking-legs li { display: flex; flex-wrap: wrap; gap: 5px; }
.booking-atlas-status { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.module-item-copy { display: grid; min-width: 0; gap: 3px; }
.module-item-copy strong { font-size: 12px; overflow-wrap: anywhere; }
.module-item-copy > span, .module-item-copy p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.module-item-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.module-empty { margin: 0; padding: 12px; color: var(--muted); font-size: 11px; }
.assistant-panel { margin: 0 0 27px; padding: 20px; border: 1px solid #e2e5e8; border-radius: 13px; background: var(--card); box-shadow: var(--shadow); }
.assistant-panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.assistant-panel-heading h2 { margin: 0 0 6px; font-size: 18px; }
.assistant-panel-heading p:last-child { max-width: 680px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.assistant-file-label { position: relative; flex-shrink: 0; overflow: hidden; }
.assistant-file-label input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.assistant-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.82fr); gap: 12px; align-items: start; }
.assistant-conversation { display: grid; max-height: 236px; gap: 8px; overflow-y: auto; padding: 11px; border: 1px solid var(--soft-line); border-radius: 9px; background: #fafbfc; }
.assistant-conversation-compact { max-height: 180px; margin: 12px 0; }
.assistant-empty { align-self: center; padding: 15px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.assistant-empty-small { padding: 8px 0; font-size: 10px; }
.assistant-message { max-width: 91%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.assistant-user { justify-self: end; border-color: #f1ddd8; background: #fff8f6; }
.assistant-message span { display: block; margin-bottom: 4px; color: var(--faint); font-size: 9px; }
.assistant-message p { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-compose { display: grid; gap: 8px; margin-top: 10px; }
.assistant-compose textarea { width: 100%; min-height: 82px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: var(--card); color: var(--ink); font: inherit; font-size: 12px; line-height: 1.55; resize: vertical; }
.assistant-compose textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(193,73,50,.1); }
.assistant-compose-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.assistant-link { padding: 5px 4px; border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.assistant-link:hover { color: var(--accent); }
.assistant-link:disabled { opacity: .45; cursor: default; }
.assistant-result { min-width: 0; }
.assistant-draft { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.assistant-draft-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.assistant-draft-head .eyebrow { margin-bottom: 5px; font-size: 9px; }
.assistant-draft-head h4 { margin: 0 0 5px; font-size: 14px; }
.assistant-draft-head p { margin: 0; color: var(--muted); font-size: 10px; }
.draft-state { padding: 4px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: 9px; white-space: nowrap; }
.assistant-draft ol { display: grid; max-height: 280px; gap: 7px; overflow-y: auto; margin: 11px 0; padding: 0; list-style: none; }
.assistant-draft li { display: grid; grid-template-columns: 85px minmax(0,1fr); gap: 3px 8px; font-size: 10px; }
.assistant-draft li time { grid-row: span 2; color: var(--faint); font-variant-numeric: tabular-nums; }
.assistant-draft li strong { font-size: 10px; font-weight: 600; overflow-wrap: anywhere; }
.assistant-draft li span { color: var(--muted); overflow-wrap: anywhere; }
.assistant-clear-warning { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--danger); border-radius: 7px; background: color-mix(in srgb, var(--danger) 8%, var(--card)); color: var(--danger); font-size: 11px; }
.assistant-clear-warning ul { margin: 6px 0 0; padding-left: 17px; }
.assistant-clear-warning li { display: list-item; margin-top: 3px; }
.assistant-draft-actions { display: flex; justify-content: end; gap: 7px; padding-top: 9px; border-top: 1px solid var(--soft-line); }
.assistant-trip-panel { margin-top: 18px; }
.assistant-trip-panel h3 { margin: 0 0 6px; }
.assistant-help { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.panel { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.panel h3 { margin: 0 0 13px; }
.note-copy { color: var(--muted); font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.day-section { margin-bottom: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.day-accommodations { margin: 0 16px 14px; padding: 11px 13px; border: 1px solid #dce9e7; border-radius: 8px; background: #f5faf9; }
.day-accommodations h3 { margin: 0 0 8px; color: #26645e; font-size: 11px; }
.day-accommodation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; padding: 5px 0; font-size: 11px; }
.day-accommodation + .day-accommodation { border-top: 1px solid #dce9e7; }
.day-accommodation span { color: var(--muted); }
.day-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: #fafbfc; border-bottom: 1px solid var(--soft-line); }
.day-weather { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.day-weather > span { color: var(--muted); font-size: 10px; }
.day-date { display: flex; align-items: baseline; gap: 9px; }
.day-date strong { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.day-date span { color: var(--muted); font-size: 11px; }
.stop-list { margin: 0; padding: 3px 16px 6px; list-style: none; }
.stop-item { position: relative; display: grid; grid-template-columns: 61px 17px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 13px 0; }
.stop-item + .stop-item { border-top: 1px solid var(--soft-line); }
.stop-draggable { cursor: grab; }
.stop-draggable.is-dragging { opacity: .42; cursor: grabbing; }
.stop-time { padding-top: 2px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.stop-pin { position: relative; display: grid; width: 17px; height: 17px; place-items: center; }
.stop-pin::before { width: 8px; height: 8px; border: 2px solid var(--accent); border-radius: 50%; background: #fff; content: ""; }
.stop-copy { min-width: 0; }
.stop-copy strong { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.stop-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.stop-copy .stop-note { margin-top: 6px; color: var(--faint); white-space: pre-wrap; }
.stop-copy .stop-detail { margin-top: 4px; color: var(--muted); font-size: 10px; }
.stop-photo { display: block; width: 92px; height: 62px; margin-top: 7px; border-radius: 7px; object-fit: cover; }
.photo-credit { max-width: 440px; margin-top: 4px !important; color: var(--muted); font-size: 11px; }
.enrichment-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.enrichment-photo-wrap { display: grid; width: 112px; gap: 3px; }
.enrichment-photo { display: grid; width: 100%; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); text-align: left; cursor: pointer; }
.enrichment-photo img { width: 100px; height: 68px; border-radius: 5px; object-fit: cover; }
.enrichment-photo span { font-size: 10px; line-height: 1.35; }
.enrichment-photo-links { font-size: 10px; line-height: 1.4; }
.stop-day-move { width: fit-content; margin-top: 8px; }
.stop-day-move input { min-height: 27px; }
.stop-actions { display: flex; align-items: center; gap: 6px; }
.stop-map { color: var(--accent); font-size: 11px; text-decoration: none; white-space: nowrap; }
.day-empty { margin: 0 16px 14px 104px; color: var(--faint); font-size: 11px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-error { min-height: 18px; margin: 0; color: var(--danger); font-size: 12px; }
.dialog { width: min(500px,calc(100vw - 26px)); max-width: none; max-height: min(88dvh,760px); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--card); color: var(--ink); box-shadow: 0 22px 80px rgba(10,17,24,.25); }
.dialog::backdrop { background: rgba(14,21,28,.48); backdrop-filter: blur(2px); }
.dialog-form { display: grid; gap: 14px; padding: 23px; }
.dialog-top { display: flex; align-items: start; justify-content: space-between; margin-bottom: 3px; }
.dialog-top h2 { margin: 0; font-size: 21px; }
.dialog-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; }
.dialog-form input, .dialog-form textarea, .auth-card input { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; outline: none; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 400; }
.dialog-form textarea { min-height: 82px; resize: vertical; }
.dialog-form input:focus, .dialog-form textarea:focus, .auth-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(193,73,50,.1); }
.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 3px; }
.search-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.search-row select { grid-column: 1 / -1; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); }
.search-row input { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; }
.search-row .button { min-height: 42px; }
.place-results { display: grid; gap: 6px; }
.place-result-card { display: grid; gap: 5px; }
.place-result { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); text-align: left; cursor: pointer; }
.place-result:hover { border-color: #e0b2a7; background: #fdf8f6; }
.place-result strong, .place-result span { display: block; }
.place-result img { display: block; width: 100%; max-height: 120px; margin-bottom: 7px; border-radius: 6px; object-fit: cover; }
.place-photo-candidates { display: flex; gap: 6px; overflow-x: auto; padding: 0 2px 3px; }
.place-photo-candidates button { flex: 0 0 64px; width: 64px; height: 46px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
.place-photo-candidates button:hover { border-color: var(--accent); }
.place-photo-candidates img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.stop-enrichment-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; }
.place-result strong { margin-bottom: 4px; font-size: 12px; }
.place-result span { color: var(--muted); font-size: 10px; }
.muted-hint { margin: 0; color: var(--faint); font-size: 11px; font-weight: 400; line-height: 1.55; }
.toast { position: fixed; z-index: 30; right: 20px; bottom: 20px; max-width: min(420px,calc(100vw - 32px)); padding: 12px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--ink); color: white; box-shadow: var(--shadow); font-size: 12px; }
.auth-screen { display: grid; min-height: 100vh; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr); }
.auth-story { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(26px,5vw,68px); background: var(--ink); color: white; }
.auth-story::after { position: absolute; right: -125px; bottom: -160px; width: 440px; height: 440px; border: 1px solid rgba(242,132,108,.24); border-radius: 50%; box-shadow: 0 0 0 35px rgba(242,132,108,.055),0 0 0 80px rgba(242,132,108,.035); content: ""; }
.auth-story .brand-name { color: white; }
.auth-story .brand-mark { background: #29323a; }
.auth-copy { position: relative; z-index: 1; max-width: 490px; margin: auto 0; padding: 70px 0; }
.auth-copy .eyebrow { color: #f2846c; }
.auth-copy h1 { margin-bottom: 16px; font-size: clamp(35px,5vw,58px); line-height: 1.06; }
.auth-copy p { max-width: 400px; color: #aeb8c1; font-size: 14px; line-height: 1.75; }
.auth-route { position: absolute; z-index: 0; right: 9%; bottom: 20%; width: 180px; height: 180px; opacity: .8; }
.auth-foot { position: relative; z-index: 1; color: #7d8993; font-size: 10px; }
.auth-side { display: grid; place-items: center; padding: 28px; background: var(--paper); }
.auth-card { width: min(100%,390px); padding: 29px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.auth-card h2 { margin: 0 0 8px; font-size: 22px; }
.auth-card > p { margin-bottom: 21px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.auth-form { display: grid; gap: 13px; }
.auth-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.auth-form .button { width: 100%; margin-top: 3px; }
.auth-form .form-error { min-height: 16px; }
.auth-security { display: flex; align-items: center; gap: 7px; margin-top: 16px; color: var(--faint); font-size: 10px; }
.auth-security::before { width: 6px; height: 6px; border-radius: 50%; background: var(--success); content: ""; }
.notice { padding: 11px 12px; border: 1px solid #f0d9d9; border-radius: 8px; background: #fff7f7; color: var(--danger); font-size: 11px; line-height: 1.55; }
.back-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.back-button:hover { color: var(--ink); }

@media (max-width: 900px) {
  .trip-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trip-overview { grid-template-columns: minmax(0,1fr) 240px; }
  .planner-grid { grid-template-columns: minmax(0,1fr) 260px; }
}
@media (max-width: 680px) {
  .topbar { height: 58px; gap: 12px; padding: 0 15px; }
  .brand-mark { width: 31px; height: 31px; }
  .brand-name { font-size: 13px; }
  .topbar-context { padding-left: 10px; font-size: 11px; }
  .topbar-user { display: none; }
  .content { padding: 26px 15px 48px; }
  .page-heading { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 19px; }
  .page-heading > .button { width: 100%; }
  .welcome { grid-template-columns: 1fr; }
  .welcome-copy { min-height: 166px; padding: 21px; }
  .welcome-mark { display: none; }
  .metrics { gap: 7px; margin-bottom: 26px; }
  .metric { min-height: 76px; padding: 12px 10px; }
  .metric-label { min-height: 26px; font-size: 10px; line-height: 1.35; }
  .metric strong { font-size: 20px; }
  .trip-grid { grid-template-columns: 1fr; gap: 10px; }
  .planner-grid { grid-template-columns: 1fr; }
  .new-trip-panel { position: static; }
  .trip-card { min-height: 175px; padding: 16px; }
  .trip-overview { grid-template-columns: 1fr; }
  .trip-overview-aside { grid-template-columns: 1fr; }
  .assistant-panel { padding: 15px; }
  .trip-map-panel { padding: 12px; }
  .trip-map-heading { flex-direction: column; }
  .trip-map-controls { width: 100%; flex-wrap: wrap; }
  .trip-map-controls label { flex: 1; }
  .trip-map-controls input, .trip-map-controls select { max-width: none; width: 100%; }
  .trip-map-status { text-align: left; }
  .trip-format-bar { align-items: stretch; }
  .trip-format-bar > div { flex: 1 0 100%; }
  .trip-format-bar .button, .trip-format-bar input[type="date"] { flex: 1; }
  .trip-share-panel { grid-template-columns: 1fr; }
  .trip-share-actions { flex-wrap: wrap; }
  .trip-share-actions .button { flex: 1; }
  .trip-share-url { flex-wrap: wrap; }
  .trip-share-url input, .trip-share-url button { width: 100%; }
  .collection-library-layout { grid-template-columns: 1fr; }
  .collection-library-sidebar { position: static; }
  .collection-place-grid { grid-template-columns: 1fr; }
  .collection-library-heading { flex-direction: column; }
  .trip-map-canvas { height: 290px; }
  .module-form { grid-template-columns: 1fr; }
  .module-form label, .module-form label:has(textarea), .module-form button[type="submit"] { grid-column: 1; }
  .module-item { align-items: start; }
  .module-item-actions { flex-direction: column; }
  .assistant-panel-heading { flex-direction: column; gap: 10px; }
  .assistant-panel-heading > .button { align-self: flex-start; }
  .assistant-body { grid-template-columns: 1fr; }
  .assistant-conversation { max-height: 190px; }
  .auth-screen { min-height: 100dvh; grid-template-columns: 1fr; }
  .auth-story { display: none; }
  .auth-side { min-height: 100dvh; padding: 17px; }
  .auth-card { padding: 23px; }
  .field-row { grid-template-columns: 1fr; }
  .dialog-form { padding: 18px; }
  .stop-list { padding-right: 12px; padding-left: 12px; }
  .stop-item { grid-template-columns: 48px 14px minmax(0,1fr) auto; gap: 7px; }
  .day-empty { margin-left: 81px; }
}
.atlas-metrics { margin-top: 8px; }
.atlas-continent-stats { margin-top: 10px; }
.atlas-continent-stats .section-heading { margin-bottom: 8px; }
.atlas-continent-stats ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.atlas-continent-stats li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--soft-line); border-radius: 8px; }
.atlas-continent-stats li strong { font-size: 12px; }
.atlas-continent-stats li span { color: var(--muted); font-size: 10px; }
.atlas-transport-status { margin-top: 8px; }
.atlas-endpoint-review { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.atlas-endpoint-review summary { color: var(--ink); font-size: 12px; font-weight: 650; cursor: pointer; }
.atlas-endpoint-review > p { margin: 9px 0; }
.atlas-endpoint-review form { padding: 12px 0; border-top: 1px solid var(--soft-line); }
.atlas-endpoint-review form > strong { display: block; margin-bottom: 8px; font-size: 11px; }
.atlas-endpoint-fields { display: grid; grid-template-columns: minmax(0, 1fr) 135px auto; align-items: end; gap: 8px; }
.atlas-endpoint-fields label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.atlas-endpoint-fields input, .atlas-endpoint-fields select { width: 100%; min-height: 32px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; }
.atlas-endpoint-results { display: grid; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.atlas-endpoint-choice { display: grid; gap: 3px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); text-align: left; cursor: pointer; }
.atlas-endpoint-choice:hover { border-color: var(--accent); }
.atlas-endpoint-choice span { color: var(--muted); font-size: 10px; }
@media (max-width: 640px) { .atlas-endpoint-fields { grid-template-columns: 1fr; } }
.atlas-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .75fr); gap: 16px; align-items: start; }
.atlas-sidebar { display: grid; gap: 14px; min-width: 0; }
.atlas-legend { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.atlas-legend i, .atlas-legend b, .atlas-legend em { width: 11px; height: 11px; border-radius: 50%; background: var(--success); }
.atlas-legend b { background: #4e78cf; }
.atlas-legend em { background: #d3a143; }
.atlas-search { display: grid; gap: 6px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.atlas-search input { min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; }
.atlas-search-results { position: relative; z-index: 2; display: grid; gap: 4px; }
.atlas-search-result { display: flex; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); text-align: left; cursor: pointer; }
.atlas-search-result span { color: var(--muted); }
.atlas-world-map { display: block; width: 100%; min-height: 270px; max-height: 620px; margin: 8px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #edf2f4; }
.atlas-country { fill: #d7dde0; stroke: #fff; stroke-width: .55; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .15s, opacity .15s; }
.atlas-country:hover, .atlas-country:focus { fill: var(--accent); outline: none; }
.atlas-country-visited { fill: var(--success); }
.atlas-country-planned { fill: #4e78cf; }
.atlas-country-wanted { fill: #d3a143; }
.atlas-map-credit { margin: 8px 0 0; color: var(--faint); font-size: 10px; }
.atlas-country-code { color: var(--muted); font-size: 12px; }
.atlas-country-actions { display: flex; align-items: end; gap: 9px; }
.atlas-derived-trips { margin: 9px 0 0; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.atlas-region-footprints { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--soft-line); }
.atlas-region-footprints h3 { margin: 0 0 9px; font-size: 14px; }
.atlas-region-map { display: block; width: 100%; max-height: 190px; margin: 8px 0 10px; border: 1px solid var(--soft-line); border-radius: 9px; background: var(--paper); }
.atlas-region-shape { fill: #edf0f2; stroke: #8a96a1; stroke-width: .18; cursor: pointer; transition: fill .15s ease, stroke .15s ease; }
.atlas-region-visited { fill: var(--success); }
.atlas-region-planned { fill: #4e78cf; }
.atlas-region-shape:hover, .atlas-region-selected { stroke: var(--accent); stroke-width: .65; }
.atlas-region-date { display: block; max-width: 210px; margin: 8px 0; color: var(--muted); font-size: 11px; }
.atlas-region-date input { display: block; width: 100%; min-height: 32px; margin-top: 4px; }
.atlas-region-list { display: grid; max-height: 330px; gap: 6px; margin: 8px 0 0; padding: 0 4px 0 0; overflow: auto; list-style: none; }
.atlas-region-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--soft-line); border-radius: 8px; }
.atlas-region-row > div:first-child { display: grid; min-width: 0; gap: 3px; }
.atlas-region-row > div:last-child { display: flex; gap: 5px; flex-wrap: wrap; }
.atlas-region-row strong { font-size: 12px; }
.atlas-region-row span { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.atlas-region-row-selected { border-color: var(--accent); }
.atlas-visit-date { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.atlas-visit-date input { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; }
.atlas-wish-list { display: grid; gap: 0; margin: 17px 0 0; padding: 0; list-style: none; }
.atlas-wish-list li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--soft-line); }
.atlas-wish-list li > div:first-child { display: grid; gap: 3px; }
.atlas-wish-list strong { font-size: 13px; }
.atlas-wish-list span, .atlas-wish-list p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.atlas-wish-actions { display: flex; align-items: center; gap: 5px; }
.packing-template-tools { display: grid; gap: 9px; margin: 12px 0; padding: 13px; border: 1px solid var(--soft-line); border-radius: 9px; background: #fbfcfc; }
.packing-template-tools > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.packing-template-tools > div:first-child span { color: var(--muted); }
.packing-template-tools form, .packing-template-apply { display: flex; align-items: end; gap: 8px; }
.packing-template-tools label { display: grid; flex: 1; gap: 5px; color: var(--muted); font-size: 11px; }
.packing-template-tools input, .packing-template-tools select { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.packing-template-apply select { flex: 1; }
.journey-index-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.journey-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.journey-card { display: grid; min-height: 220px; align-content: end; justify-items: start; gap: 8px; padding: 23px; border: 0; border-radius: 15px; color: #fff; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.journey-card strong { font-size: clamp(20px, 3vw, 28px); letter-spacing: -.7px; }
.journey-card > span:not(.eyebrow) { color: rgba(255,255,255,.85); font-size: 13px; }
.journey-card small { margin-top: 8px; color: rgba(255,255,255,.78); font-size: 11px; }
.journey-gradient-coast { background: linear-gradient(135deg, #134e5e 0%, #278d94 55%, #80c9b6 100%); }
.journey-gradient-dusk { background: linear-gradient(135deg, #2d1b69 0%, #6c56a2 55%, #cf7181 100%); }
.journey-gradient-sand { background: linear-gradient(135deg, #574631 0%, #b58c4d 55%, #e5bc76 100%); }
.journey-gradient-forest { background: linear-gradient(135deg, #163d35 0%, #3e7860 55%, #91aa75 100%); }
.journey-trip-picker { display: grid; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.journey-trip-picker legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
.journey-trip-option { display: flex !important; grid-template-columns: auto 1fr; align-items: start; gap: 9px !important; padding: 5px 0; }
.journey-trip-option input { width: 15px !important; min-height: 15px !important; margin: 2px 0 0; }
.journey-trip-option span { display: grid; gap: 2px; }
.journey-trip-option strong { color: var(--ink); font-size: 12px; }
.journey-trip-option small { color: var(--muted); font-size: 10px; font-weight: 400; }
.journey-detail-hero { display: flex; min-height: 230px; align-items: end; justify-content: space-between; gap: 16px; margin: 15px 0 22px; padding: 25px 28px; border-radius: 16px; color: white; }
.journey-detail-hero h1 { margin: 0 0 10px; }
.journey-detail-hero p { margin: 0 0 10px; color: rgba(255,255,255,.85); }
.journey-detail-hero span { color: rgba(255,255,255,.78); font-size: 12px; }
.journey-detail-actions { display: flex; gap: 7px; }
.journey-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 17px; align-items: start; }
.journey-detail-aside { display: grid; gap: 14px; }
.journey-timeline { min-width: 0; }
.journey-map-panel { margin-bottom: 18px; }
.journey-map-canvas { min-height: 300px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #edf2f1; }
.journey-map-empty { display: grid; min-height: 300px; place-items: center; padding: 20px; color: var(--muted); font-size: 13px; text-align: center; }
.journey-map-status { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.journey-location-search { display: grid; justify-items: start; gap: 5px; }
.journey-location-candidates { display: grid; width: 100%; gap: 6px; margin: 0; padding: 0; list-style: none; }
.journey-location-candidates button { display: grid; width: 100%; gap: 3px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.journey-location-candidates small { color: var(--muted); }
.journey-share-map-option { display: flex !important; align-items: flex-start; gap: 8px !important; color: var(--muted); font-size: 12px; }
.journey-share-map-option input { width: 15px !important; min-height: 15px !important; margin: 2px 0 0; }
.journey-entry-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.journey-entry-card { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 15px; }
.journey-entry-date { display: grid; align-content: start; gap: 4px; padding-top: 18px; color: var(--muted); font-size: 12px; }
.journey-entry-card article { min-width: 0; padding: 17px 19px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.journey-entry-heading { display: flex; justify-content: space-between; gap: 12px; }
.journey-entry-heading h3 { margin: 0; font-size: 15px; }
.journey-entry-heading span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.journey-entry-location { margin: 8px 0 0; color: var(--accent); font-size: 12px; }
.journey-entry-story { margin: 10px 0 0; color: var(--ink); font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.journey-entry-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.journey-entry-meta span { padding: 3px 8px; border-radius: 20px; background: #f0f3f4; color: var(--muted); font-size: 10px; }
.journey-entry-actions, .journey-entry-form-actions, .journey-share-actions { display: flex; gap: 6px; margin-top: 12px; }
.journey-share-url { display: flex; gap: 7px; margin: 10px 0; }
.journey-share-url input, .journey-trip-link-panel select { flex: 1; min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; }
.journey-trip-link-panel select { width: 100%; margin: 6px 0 8px; }
.journey-linked-trips { margin-top: 17px; }
.journey-linked-trip { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--soft-line); }
.journey-linked-trip a { display: grid; gap: 4px; text-decoration: none; }
.journey-linked-trip a strong { font-size: 12px; }
.journey-linked-trip a span { color: var(--muted); font-size: 10px; }
.journey-linked-trip button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); cursor: pointer; }
.journey-contributors ul { margin: 10px 0; padding: 0; list-style: none; }
.journey-contributors li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--soft-line); }
.journey-contributors li > div:first-child { display: grid; gap: 3px; }
.journey-contributors li > div:last-child { display: flex; flex-wrap: wrap; gap: 5px; }
.journey-contributors strong { font-size: 12px; }
.journey-contributors small { color: var(--muted); font-size: 10px; }
.journey-contributors select { min-height: 32px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.journey-contributors .stack-form { margin-top: 14px; }
.journey-readonly [data-journey-edit-meta], .journey-readonly [data-journey-complete], .journey-readonly .journey-entry-editor, .journey-readonly [data-journey-edit], .journey-readonly [data-journey-entry-delete], .journey-readonly [data-journey-unlink], .journey-readonly .journey-trip-link-panel { display: none !important; }
.journey-not-owner [data-journey-delete], .journey-not-owner [data-journey-edit-meta], .journey-not-owner [data-journey-complete], .journey-not-owner [data-journey-unlink], .journey-not-owner .journey-share-panel { display: none !important; }
.journey-public-footer { margin-top: 32px; color: var(--muted); font-size: 11px; text-align: center; }
.vacay-topbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 18px 0 12px; }
.vacay-topbar label, .vacay-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.vacay-topbar select, .vacay-controls select, .vacay-settings input[type="number"], .vacay-settings input[type="text"] { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.vacay-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.vacay-stats article { display: grid; gap: 5px; padding: 13px 15px; }
.vacay-stats article > span { color: var(--muted); font-size: 11px; }
.vacay-stats strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.vacay-stats small { color: var(--muted); font-size: 10px; }
.vacay-progress { height: 5px; overflow: hidden; border-radius: 5px; background: #edf0f2; }
.vacay-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.vacay-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 11px; margin-bottom: 14px; }
.vacay-hint { flex: 1; color: var(--muted); font-size: 11px; }
.vacay-legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 10px; }
.vacay-legend span { display: inline-flex; align-items: center; gap: 4px; }
.vacay-legend i { width: 9px; height: 9px; border-radius: 3px; background: #fecaca; }
.vacay-legend .vacay-legend-leave { background: #fca5a5; }
.vacay-legend .vacay-legend-comp { background: #bfdbfe; }
.vacay-legend .vacay-legend-company { background: #fde68a; }
.vacay-legend .vacay-legend-holiday { background: #ddd6fe; }
.vacay-legend .vacay-legend-school { background: #a5f3fc; }
.vacay-day-school-holiday .vacay-school-day-dot { background: #0e7490 !important; }
.vacay-school-list { display: grid; gap: 8px; margin: 10px 0 16px; padding: 0; list-style: none; }
.vacay-school-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--soft-line); border-radius: 9px; }
.vacay-school-list li > div:first-child { display: grid; gap: 3px; min-width: 0; }
.vacay-school-list li > div:last-child { display: flex; gap: 6px; flex-wrap: wrap; }
.vacay-school-list li span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.vacay-calendar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vacay-month { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.vacay-month h3 { margin: 0 0 10px; font-size: 13px; }
.vacay-weekdays, .vacay-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.vacay-weekdays { margin-bottom: 4px; color: var(--muted); font-size: 9px; text-align: center; }
.vacay-weekdays span { padding: 3px 0; }
.vacay-day-empty { min-height: 32px; }
.vacay-day { position: relative; display: grid; min-width: 0; min-height: 34px; align-content: center; justify-items: center; gap: 1px; padding: 2px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font-size: 10px; cursor: pointer; }
.vacay-day:hover:not(:disabled) { border-color: var(--accent); }
.vacay-day:disabled { color: #adb6bd; cursor: not-allowed; }
.vacay-day-weekend:not(.vacay-day-vacation):not(.vacay-day-comp):not(.vacay-day-company) { background: #f4f5f6; }
.vacay-day-vacation { background: #fecaca; color: #7f1d1d; }
.vacay-day-comp { background: #bfdbfe; color: #1e3a8a; }
.vacay-day-company { box-shadow: inset 0 0 0 2px #f2c94c; }
.vacay-day-holiday i { width: 4px; height: 4px; border-radius: 50%; background: #8b5cf6; }
.vacay-day small { font-size: 8px; line-height: 1; }
.vacay-shared-dots { position: absolute; right: 2px; bottom: 2px; display: flex; align-items: center; gap: 2px; }
.vacay-shared-dots i, .vacay-share-color { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.vacay-shared-dots small { font-size: 7px; }
.vacay-shares { margin-top: 18px; }
.vacay-share-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vacay-share-groups h3 { margin: 10px 0; }
.vacay-share-groups ul { display: grid; gap: 8px; padding: 0; list-style: none; }
.vacay-share-groups li { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.vacay-share-groups li strong { margin-right: auto; font-size: 12px; }
.vacay-share-groups form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.vacay-share-groups form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.vacay-share-groups select { min-height: 34px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); }
.vacay-fusion { margin: 16px 0; }
.vacay-fusion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vacay-fusion-grid > div > label { display: grid; gap: 5px; max-width: 220px; color: var(--muted); font-size: 11px; }
.vacay-fusion-grid select { min-height: 34px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); }
.vacay-fusion-people { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.vacay-fusion-people span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.vacay-fusion-people i { width: 8px; height: 8px; border-radius: 50%; }
.vacay-fusion-grid form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.vacay-fusion-grid form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.vacay-fusion-grid ul { display: grid; gap: 7px; padding: 0; list-style: none; }
.vacay-fusion-grid li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
@media (max-width: 650px) { .vacay-share-groups { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .vacay-fusion-grid { grid-template-columns: 1fr; } }
.vacay-settings { margin-top: 15px; }
.vacay-settings summary { color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.vacay-settings form { display: grid; gap: 10px; margin-top: 14px; }
.vacay-setting-check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.vacay-setting-check input { accent-color: var(--accent); }
.vacay-settings .field-row label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
@media (max-width: 900px) { .journey-index-layout, .journey-detail-layout { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .journey-card-grid { grid-template-columns: 1fr; } .journey-detail-hero { min-height: 200px; align-items: start; flex-direction: column; } .journey-entry-card { grid-template-columns: 1fr; gap: 5px; } .journey-entry-date { padding: 0 0 0 3px; } }
@media (max-width: 900px) { .vacay-calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .vacay-calendar, .vacay-stats { grid-template-columns: 1fr; } .vacay-topbar > .button { flex: 1; } .vacay-day { min-height: 38px; } }
@media (max-width: 840px) { .atlas-layout { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.trip-file-panel { display: grid; gap: 14px; margin-top: 12px; }
.auth-guide-link { display: block; margin-top: 16px; color: var(--accent); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.auth-guide-link:hover { text-decoration: underline; }
.help-page { max-width: 1120px; }
.help-hero { margin-bottom: 24px; }
.help-hero > p:last-child { max-width: 650px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.help-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 18px; }
.help-nav { position: sticky; top: 86px; display: grid; gap: 10px; padding: 20px; }
.help-nav strong { margin-bottom: 5px; font-size: 13px; }
.help-nav a { color: var(--muted); font-size: 13px; text-decoration: none; }
.help-nav a:hover, .help-articles a { color: var(--accent); }
.help-articles { display: grid; gap: 15px; }
.help-articles section { padding: 24px; scroll-margin-top: 86px; }
.help-articles p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.help-articles p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .help-layout { grid-template-columns: 1fr; } .help-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .help-nav strong { grid-column: 1 / -1; } }
@media (max-width: 480px) { .topbar { gap: 8px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; } .topbar::-webkit-scrollbar { display: none; } .topbar-context, .topbar-user { display: none; } .topbar .button-small { flex-shrink: 0; padding: 0 8px; } }
.account-panel { width: min(100%, 560px); margin-top: 28px; padding: 24px; scroll-margin-top: 86px; }
.data-load-error { max-width: 620px; margin: 40px auto; padding: 28px; }
.data-load-error p { color: var(--muted); line-height: 1.7; }
.data-load-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-panel > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.6; }
.account-panel .stack-form { margin-top: 18px; }
.featured-guide { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 24px; padding: clamp(20px, 3vw, 30px); background: #eaf3f1; }
.featured-guide h2 { margin: 4px 0 8px; }
.featured-guide p:last-child { max-width: 640px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.featured-guide .button { flex: none; }
@media (max-width: 640px) { .featured-guide { align-items: stretch; flex-direction: column; } }
.system-notice-banners { position: fixed; top: 76px; left: 50%; z-index: 90; width: min(760px, calc(100vw - 24px)); transform: translateX(-50%); display: grid; gap: 8px; }
.system-notice-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; width: min(360px, calc(100vw - 32px)); display: grid; gap: 8px; }
.system-notice-card { padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--card); box-shadow: 0 12px 28px #0002; }
.system-notice-card strong { display: block; font-size: 15px; }
.system-notice-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; white-space: pre-line; }
.system-notice-card .form-error { color: var(--danger); }
.system-notice-warn { border-left-color: #d58a22; }
.system-notice-critical { border-left-color: #cf4d52; }
.system-notice-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.system-notice-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; background: transparent; overflow: auto; }
.system-notice-dialog::backdrop { background: #1119; }
.system-notice-dialog .system-notice-card { box-shadow: none; }
.system-notice-admin { margin-top: 20px; }
.system-notice-admin > p:not(.eyebrow), .system-notice-admin-list span { color: var(--muted); font-size: 13px; }
.system-notice-admin .stack-form { margin-top: 18px; }
.system-notice-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.system-notice-admin-grid label { min-width: 0; }
.system-notice-admin details { padding: 12px 0; }
.system-notice-admin details > label, .system-notice-admin details > p { display: block; margin-top: 12px; }
.system-notice-admin-actions { display: flex; gap: 8px; }
.system-notice-admin-list { margin-top: 18px; }
.system-notice-admin-list > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.system-notice-admin-list strong { min-width: 150px; flex: 1; }
@media (max-width: 639px) { .system-notice-banners { top: 58px; } .system-notice-toasts { right: 12px; bottom: 70px; } }
.route-usage-panel { margin-top: 20px; }
.route-usage-panel > p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.route-usage-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 16px 0; }
.route-usage-metrics > div { padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.route-usage-metrics span { display: block; color: var(--muted); font-size: 11px; }
.route-usage-metrics strong { display: block; margin-top: 4px; font-size: 21px; }
.route-usage-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 14px 0; }
.route-usage-breakdown h3 { margin: 0 0 6px; }
.route-usage-breakdown ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.route-usage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.route-usage-actions label { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12px; }
.api-token-panel { margin-top: 20px; }
.api-token-panel > p:not(.eyebrow), .api-token-list span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.api-token-panel code { font-size: 12px; }
.api-token-created { display: grid; gap: 8px; margin: 14px 0; padding: 14px; border-radius: 8px; background: var(--accent-soft); }
.api-token-created input { width: 100%; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); font-family: ui-monospace, monospace; }
.api-token-created .button { justify-self: start; }
.api-token-scopes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; }
.api-token-scopes label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.api-token-list { margin-top: 20px; }
.api-token-list > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.api-token-list strong { min-width: 110px; }
.api-token-list span { flex: 1; min-width: 180px; }
.topbar-notification-count, .notification-count { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; }
.notifications-page { max-width: 900px; }
.notifications-settings { margin-bottom: 16px; }
.notifications-settings label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.notifications-settings p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.notifications-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.notifications-tools > span { margin-right: auto; color: var(--muted); font-size: 12px; }
.notifications-tools [aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.notification-rows { margin: 0; padding: 0; list-style: none; }
.notification-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.notification-unread { padding-left: 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.notification-row p { margin: 5px 0; color: var(--muted); font-size: 13px; }
.notification-row small { color: var(--faint); }
.notification-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) { .topbar-notifications { display: none; } }
.qingdao-guide { max-width: 1160px; }
.qingdao-hero { margin-bottom: 24px; padding: clamp(28px, 5vw, 56px); border-radius: 18px; background: #123b48; color: #fff; }
.qingdao-hero .eyebrow { color: #a6d7d5; }
.qingdao-hero h1 { max-width: 690px; font-size: clamp(32px, 5vw, 56px); line-height: 1.14; }
.qingdao-hero > p:not(.eyebrow) { max-width: 590px; margin: 14px 0 23px; color: #d0e1e4; font-size: 15px; line-height: 1.75; }
.qingdao-hero .button-primary { background: #fff; color: #123b48; }
.qingdao-guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.qingdao-days { display: grid; gap: 16px; scroll-margin-top: 82px; }
.qingdao-day { padding: clamp(18px, 3vw, 28px); }
.qingdao-day-heading { display: flex; align-items: start; gap: 17px; }
.qingdao-day-heading > span { flex-shrink: 0; padding: 7px 9px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 750; }
.qingdao-day-heading h2 { margin: 2px 0 5px; }
.qingdao-day-heading p, .qingdao-day > p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.qingdao-day > p { margin: 14px 0; }
.qingdao-day ol { display: grid; gap: 0; margin: 18px 0; padding: 0; list-style: none; }
.qingdao-day li { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 13px; padding: 12px 0; border-top: 1px solid var(--soft-line); }
.qingdao-day time { color: var(--accent); font-size: 12px; font-weight: 700; }
.qingdao-day li strong { font-size: 14px; }
.qingdao-day li p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.qingdao-day .qingdao-day-tip { margin-bottom: 0; padding: 11px 13px; border-radius: 8px; background: #f5f7f7; }
.qingdao-import { position: sticky; top: 84px; padding: 23px; }
.qingdao-import > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.7; }
.qingdao-import form, .qingdao-import label { display: grid; gap: 10px; }
.qingdao-import label { color: var(--muted); font-size: 12px; }
.qingdao-import input { min-height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.qingdao-import .form-error { margin: 0; color: var(--danger); font-size: 12px; }
.qingdao-import .muted-hint { margin: 15px 0 0; }
.qingdao-guide-extra { margin-top: 17px; padding: clamp(18px, 3vw, 28px); }
.qingdao-guide-extra h2 { margin: 20px 0 8px; }
.qingdao-guide-extra h2:first-child { margin-top: 0; }
.qingdao-guide-extra p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.qingdao-guide-extra a { color: var(--accent); }
@media (max-width: 800px) { .qingdao-guide-layout { grid-template-columns: 1fr; } .qingdao-import { position: static; order: -1; } }
.mobile-nav, .mobile-nav-sheet { display: none; }
.registration-page { display: grid; min-height: calc(100vh - 68px); place-items: center; }
.registration-card { width: min(480px, 100%); padding: clamp(22px, 4vw, 34px); }
.registration-card > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.7; }
.registration-card .stack-form { margin-top: 23px; }
.registration-login { display: inline-block; margin-top: 16px; color: var(--accent); font-size: 12px; text-decoration: none; }
.admin-invites-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 18px; align-items: start; }
.admin-invites-layout > .panel { padding: 22px; }
.admin-invite-list { margin: 0; padding: 0; list-style: none; }
.admin-invite-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--soft-line); }
.admin-invite-list li > div { display: grid; gap: 4px; }
.admin-invite-list li > div:last-child { display: flex; align-items: center; gap: 8px; }
.admin-invite-list strong { font-size: 13px; }
.admin-invite-list span { color: var(--muted); font-size: 11px; }
.admin-invite-list .admin-invite-active { color: var(--success); }
.admin-invite-list .admin-invite-ended { color: var(--faint); }
.admin-invite-created { display: grid; gap: 8px; margin-top: 18px; padding: 12px; border-radius: 8px; background: var(--accent-soft); }
.admin-invite-created strong { font-size: 12px; }
.admin-invite-created input { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); font-size: 11px; }
.admin-permissions { margin-top: 18px; padding: 22px; }
.admin-permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin: 18px 0; }
.admin-permission-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.admin-permission-grid select { width: 100%; min-height: 35px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); }
.admin-packing { display: grid; gap: 14px; margin-top: 18px; padding: 22px; }
.admin-packing form { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.admin-packing form label { display: grid; min-width: min(220px, 100%); flex: 1; gap: 5px; color: var(--muted); font-size: 12px; }
.admin-packing input { width: 100%; min-height: 35px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.admin-packing-list { display: flex; flex-wrap: wrap; gap: 7px; }
.admin-packing-list [aria-current="true"] { border-color: var(--accent); color: var(--accent); }
.admin-packing-detail { display: grid; gap: 13px; padding: 16px; border: 1px solid var(--soft-line); border-radius: 10px; }
.admin-packing-category { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--soft-line); border-radius: 9px; }
.admin-packing-category ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.admin-packing-category li { display: flex; align-items: end; gap: 8px; }
.admin-packing-category li form { flex: 1; }
.trip-members-panel { margin-top: 16px; }
.trip-member-list { margin: 0 0 12px; padding: 0; list-style: none; }
.trip-member-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--soft-line); }
.trip-member-list li > div:first-child { display: grid; gap: 2px; }
.trip-member-list li > div:last-child { display: flex; flex-wrap: wrap; gap: 5px; }
.trip-member-list strong { font-size: 12px; }
.trip-member-list small { color: var(--muted); font-size: 10px; }
.trip-member-add, .trip-member-transfer { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 11px 0; border-top: 1px solid var(--soft-line); }
.trip-member-add label, .trip-member-transfer label { display: grid; flex: 1; min-width: 145px; gap: 5px; color: var(--muted); font-size: 11px; }
.trip-member-add input, .trip-member-transfer select { min-height: 34px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.trip-member-add .form-error, .trip-member-transfer .form-error { flex-basis: 100%; margin: 0; color: var(--danger); font-size: 11px; }
.trip-invite-panel { margin: 14px 0; }
.trip-invite-panel h3 { margin: 0 0 8px; }
.trip-invite-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.trip-invite-actions label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.trip-invite-actions select { min-height: 32px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.trip-invite-url { display: flex; gap: 7px; margin: 10px 0; }
.trip-invite-url input { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; }
.trip-invite-landing { display: grid; min-height: calc(100vh - 68px); place-items: center; }
.trip-invite-card { width: min(460px, 100%); padding: clamp(22px, 4vw, 34px); }
.trip-invite-card > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.7; }
.trip-invite-card .stack-form { margin: 20px 0; }
@media (max-width: 850px) { .admin-invites-layout { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .content { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .mobile-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: calc(62px + env(safe-area-inset-bottom)); padding: 5px 6px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .98); box-shadow: 0 -6px 24px rgba(24, 32, 39, .06); }
  .mobile-nav a, .mobile-nav button { display: grid; align-content: center; justify-items: center; gap: 1px; min-width: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-decoration: none; cursor: pointer; }
  .mobile-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  .mobile-nav a > span, .mobile-nav button > span { height: 25px; font-size: 23px; line-height: 1; }
  .mobile-nav small { font-size: 10px; }
  .mobile-nav-sheet { position: fixed; z-index: 21; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); left: 10px; display: grid; gap: 12px; max-width: 420px; max-height: calc(100dvh - 100px); overflow-y: auto; margin: 0 auto; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 18px 48px rgba(24, 32, 39, .18); }
  .mobile-nav-sheet[hidden] { display: none; }
  .mobile-nav-sheet-heading { display: flex; align-items: center; justify-content: space-between; }
  .mobile-nav-sheet-heading button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); font-size: 20px; cursor: pointer; }
  .mobile-nav-all, .mobile-nav-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-nav-all a { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; font-size: 13px; }
  .mobile-nav-options label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
  .mobile-nav-options input { accent-color: var(--accent); }
  .mobile-nav-sheet p { margin: 0; color: var(--muted); font-size: 11px; }
  .mobile-nav-sheet .mobile-nav-error { color: var(--danger); }
}
.trip-file-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trip-file-toolbar > div:first-child, .trip-file-copy { display: grid; gap: 5px; min-width: 0; }
.trip-file-toolbar span, .trip-file-copy small { color: var(--muted); font-size: 12px; }
.trip-file-toolbar > div:last-child, .trip-file-actions, .trip-file-link-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trip-file-upload { display: grid; grid-template-columns: minmax(160px, 1.4fr) minmax(180px, 1fr) minmax(140px, 1fr) auto; align-items: end; gap: 10px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--card); }
.trip-file-upload > label, .trip-file-link-controls > select { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.trip-file-upload input, .trip-file-upload select, .trip-file-link-controls select { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--card); }
.trip-file-upload [data-files-progress] { grid-column: 1 / -1; margin: 0; }
.trip-file-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trip-file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--soft-line); border-radius: 10px; background: var(--card); }
.trip-file-copy > a { width: fit-content; color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.trip-file-copy > p { margin: 0; color: var(--muted); font-size: 12px; }
.trip-file-links { display: flex; gap: 6px; flex-wrap: wrap; }
.trip-file-link { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--muted); font-size: 11px; }
.trip-file-link button { padding: 0 2px; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.trip-file-link-controls { margin-top: 3px; }
.trip-file-link-controls > select { max-width: 340px; padding: 6px; font-size: 11px; }
.trip-file-description { display: flex; gap: 6px; margin-top: 2px; }
.trip-file-description input { min-width: 120px; max-width: 320px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); font-size: 12px; }
.module-item-draggable { cursor: grab; }
.module-item-draggable.is-dragging { opacity: .45; cursor: grabbing; }
.day-section[data-day-date] { transition: outline-color .12s ease; }
.day-section[data-day-date].drag-target { outline: 2px dashed var(--accent); outline-offset: 3px; }
.packing-weight-summary { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--soft-line); border-radius: 9px; background: var(--card); }
.packing-weight-summary strong { color: var(--ink); }
.packing-sharing { margin-top: 8px; font-size: 12px; }
.packing-sharing summary { color: var(--accent); cursor: pointer; }
.packing-sharing form { display: grid; justify-items: start; gap: 8px; margin-top: 8px; }
.packing-sharing select, .module-form select[name="visibility"] { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.packing-recipients { display: flex; flex-wrap: wrap; gap: 8px 13px; margin: 0; padding: 8px 10px; border: 1px solid var(--soft-line); border-radius: 8px; }
.packing-recipients legend { color: var(--muted); font-size: 11px; }
.packing-recipients label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.packing-import-tools { padding: 12px; border: 1px solid var(--soft-line); border-radius: 9px; background: var(--card); }
.packing-import-tools summary { color: var(--accent); cursor: pointer; font-size: 12px; font-weight: 650; }
.packing-import-tools form { display: grid; gap: 9px; margin-top: 10px; }
.packing-import-tools label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.packing-import-tools textarea, .packing-import-tools select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.packing-import-tools input[type="file"] { max-width: 100%; }
.packing-import-tools > p { margin: 10px 0 0; }
.packing-view-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.packing-view-controls button { padding: 5px 10px; border: 1px solid var(--soft-line); border-radius: 999px; color: var(--muted); background: var(--card); cursor: pointer; font-size: 12px; }
.packing-view-controls button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.packing-view-controls > span { color: var(--soft-line); }
.module-category-heading { margin-top: 12px; padding: 8px 2px 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
.packing-category-assignments { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--soft-line); border-radius: 9px; background: var(--card); }
.packing-category-assignments > p { margin: 0; }
.packing-category-assignments form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.packing-category-assignments form > span { min-width: 80px; font-size: 12px; font-weight: 650; }
.packing-category-assignments form > div { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.packing-category-assignments label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.packing-bag-tools { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--soft-line); border-radius: 10px; background: var(--card); }
.packing-bag-tools > div { display: flex; justify-content: space-between; gap: 10px; }
.packing-bag-tools > div span, .packing-bag-weight { color: var(--muted); font-size: 12px; }
.packing-bag-tools > form, .packing-bag-row > form { display: flex; align-items: center; gap: 7px; }
.packing-bag-tools input[name="name"], .packing-bag-row input[name="name"] { min-width: 130px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.packing-bag-tools input[type="number"], .packing-bag-row input[type="number"] { width: 142px; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.packing-bag-tools input[type="color"], .packing-bag-row input[type="color"] { width: 32px; height: 32px; padding: 1px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.packing-bag-row select[name="userId"] { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--card); }
.packing-bag-tools ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.packing-bag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--soft-line); border-radius: 8px; }
.packing-bag-weight.over-limit { color: var(--danger); font-weight: 650; }
.packing-bag-members { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.packing-bag-members summary { cursor: pointer; }
.packing-bag-members form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.packing-bag-members label { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 680px) {
  .trip-file-upload { grid-template-columns: 1fr; }
  .trip-file-row { align-items: flex-start; flex-direction: column; }
  .trip-file-toolbar { align-items: flex-start; flex-direction: column; }
  .trip-file-description { width: 100%; }
  .trip-file-description input { flex: 1; max-width: none; }
  .packing-bag-tools > form, .packing-bag-row { align-items: flex-start; flex-direction: column; }
  .packing-bag-row > form { width: 100%; flex-wrap: wrap; }
}

/* Per-browser appearance preferences. The default tokens above retain the Jiatao look. */
:root[data-mode="dark"] {
  color-scheme: dark;
  --paper: #11151b; --card: #1b222a; --ink: #edf1f4; --muted: #b3bec8;
  --faint: #8a9aa8; --line: #37424b; --soft-line: #2b343d;
  --accent: #f2846c; --accent-dark: #ff9d87; --accent-soft: #3a2726; --accent-text: #11151b;
  --success: #6bc7a9; --danger: #ff9299; --topbar-bg: rgba(27,34,42,.96);
  --shadow: 0 10px 34px rgba(0,0,0,.18);
}
:root[data-scheme="highContrast"] { --accent: #1d4ed8; --accent-dark: #1e40af; --accent-soft: #e6efff; --muted: #293640; --line: #8997a3; }
:root[data-scheme="indigo"] { --accent: #4f46e5; --accent-dark: #4338ca; --accent-soft: #eeedff; }
:root[data-scheme="teal"] { --accent: #0d9488; --accent-dark: #0f766e; --accent-soft: #e3f5f2; }
:root[data-scheme="rose"] { --accent: #e11d48; --accent-dark: #be123c; --accent-soft: #fff0f3; }
:root[data-scheme="amber"] { --accent: #d97706; --accent-dark: #b45309; --accent-soft: #fff4df; }
:root[data-scheme="violet"] { --accent: #7c3aed; --accent-dark: #6d28d9; --accent-soft: #f2eaff; }
:root[data-mode="dark"][data-scheme="highContrast"] { --accent: #60a5fa; --accent-dark: #93c5fd; --accent-soft: #1b314d; --accent-text: #06182f; --muted: #dce4ed; --line: #aebdc9; }
:root[data-mode="dark"][data-scheme="indigo"] { --accent: #a5b4fc; --accent-dark: #c7d2fe; --accent-soft: #2b2c4f; --accent-text: #12182f; }
:root[data-mode="dark"][data-scheme="teal"] { --accent: #5eead4; --accent-dark: #99f6e4; --accent-soft: #173c39; --accent-text: #04211f; }
:root[data-mode="dark"][data-scheme="rose"] { --accent: #fda4af; --accent-dark: #fecdd3; --accent-soft: #472831; --accent-text: #291014; }
:root[data-mode="dark"][data-scheme="amber"] { --accent: #fcd34d; --accent-dark: #fde68a; --accent-soft: #45381d; --accent-text: #1c1917; }
:root[data-mode="dark"][data-scheme="violet"] { --accent: #c4b5fd; --accent-dark: #ddd6fe; --accent-soft: #342a4c; --accent-text: #1d1531; }
:root[data-scheme="custom"] { --accent: var(--custom-accent); --accent-dark: var(--custom-accent); --accent-soft: color-mix(in srgb, var(--custom-accent) 14%, var(--card)); --accent-text: var(--custom-accent-text); }
:root[data-no-transparency] .topbar { background: var(--card); backdrop-filter: none; }
:root[data-density="compact"] .content { padding-top: 24px; }
:root[data-density="compact"] .panel, :root[data-density="compact"] .trip-card { padding: 13px; }
:root[data-density="compact"] .module-item { padding: 7px 9px; }
:root[data-reduce-motion] *, :root[data-reduce-motion] *::before, :root[data-reduce-motion] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

:root[data-mode="dark"] .button-primary, :root[data-mode="dark"] .brand-mark { color: #11151b; }
:root[data-mode="dark"] .button-primary:hover { color: var(--accent-text); }
:root[data-mode="dark"] .button-quiet:hover, :root[data-mode="dark"] .icon-button:hover { background: #26313b; border-color: #52616c; }
:root[data-mode="dark"] .button-danger:hover, :root[data-mode="dark"] .notice, :root[data-mode="dark"] .assistant-user { background: #36272b; }
:root[data-mode="dark"] .welcome-copy { border-color: var(--line); background: linear-gradient(113deg, #1b222a 0%, #1b222a 67%, #302629 100%); }
:root[data-mode="dark"] .welcome-mark, :root[data-mode="dark"] .auth-story { background: #202b35; color: #fff; }
:root[data-mode="dark"] .welcome-mark .brand-mark, :root[data-mode="dark"] .auth-story .brand-mark { color: #fff; }
:root[data-mode="dark"] .empty-state { background: var(--card); border-color: var(--line); }
:root[data-mode="dark"] .featured-guide { background: #203632; }
:root[data-mode="dark"] .day-accommodations, :root[data-mode="dark"] .qingdao-day .qingdao-day-tip { background: #223731; border-color: #365248; }
:root[data-mode="dark"] .todo-reminder-panel { background: #372f20; border-color: #6e5c34; }
:root[data-mode="dark"] .atlas-world-map { background: #26333d; }
:root[data-mode="dark"] .atlas-country { fill: #53616b; stroke: #25313a; }
:root[data-mode="dark"] .atlas-country-visited { fill: var(--success); }
:root[data-mode="dark"] .atlas-country-planned { fill: #759bdb; }
:root[data-mode="dark"] .atlas-country-wanted { fill: #d9ae55; }

.appearance-panel { width: min(100%, 560px); margin-top: 16px; padding: 24px; }
.appearance-panel > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.7; }
.appearance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.appearance-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.appearance-grid input, .appearance-grid select { min-width: 0; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); }
.appearance-grid input[type="color"] { width: 100%; padding: 3px; }
.appearance-grid input[type="range"] { padding: 0; accent-color: var(--accent); }
.appearance-grid .appearance-toggle { display: flex; align-items: center; gap: 9px; }
.appearance-toggle input { width: 17px; min-height: 17px; accent-color: var(--accent); }
.appearance-custom { display: contents; }
.appearance-custom[hidden] { display: none; }
@media (max-width: 600px) { .appearance-grid { grid-template-columns: 1fr; } }