/* Approved B: mist blue + apricot. Data and map services remain unchanged. */
:root {
  --ink:#233e55; --muted:#667c98; --accent:#4d7393; --accent-soft:#edf3f7;
  --green:var(--accent); --green-light:var(--accent-soft);
  --paper:#fff; --line:#e2e9f3; --gold:#a96535; --shadow:0 8px 30px #18365816;
  color:var(--ink); background:#f5f7fa;
}
body { background:#f5f7fa; }
.ui-icon { display:inline-block; width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; font-size:13px; min-height:44px; }
.button-primary { background:var(--accent); color:#fff; box-shadow:none; }
.button-primary:hover { background:#3f6381; }
.button-quiet,.button-outline { background:#fff; color:#234568; border:1px solid #dce5f2; }
.button-quiet:hover,.button-outline:hover { background:#f2f6ff; border-color:#c4d4ed; }
.text-button { color:var(--accent); }
.danger { color:#b3473a; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #a8c2d6; outline-offset:3px; }
input:focus,textarea:focus,select:focus { outline:2px solid #a8c2d6; outline-offset:1px; }
.sr-only,.map-provider-status { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.site-header { height:76px; padding:0 28px; background:#fff; border-bottom:1px solid var(--line); }
.brand { color:#233e55; font-size:24px; font-weight:750; gap:11px; letter-spacing:0; }
.brand-mark { display:block; width:48px; height:48px; border-radius:0; background:none; box-shadow:none; }
.brand small { color:#8191a7; font-size:10px; font-weight:400; letter-spacing:0; margin-top:3px; }
.header-actions { gap:10px; }
.header-actions #destinations-open { display:none; }
.workspace { height:calc(100dvh - 76px); min-height:0; grid-template-columns:470px minmax(0,1fr); }
.list-panel,.places-panel { padding:24px 22px 12px; background:#fff; overflow:auto; min-width:0; min-height:0; }
.places-panel { display:none; }
.workspace[data-view=destinations] .list-panel { display:none; }
.workspace[data-view=destinations] .places-panel { display:block; }
.section-heading { display:flex; gap:12px; align-items:center; justify-content:space-between; margin:0 0 5px; }
.section-heading h1 { font-size:25px; line-height:1.3; margin:0; letter-spacing:0; }
.section-heading .button { flex-shrink:0; padding:9px 15px; }
.section-description { color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 16px; }
.stats { display:flex; align-items:center; gap:0; border:0; padding:0; margin:0 0 17px; background:none; border-radius:0; box-shadow:none; }
.stats>div { display:flex; align-items:baseline; flex:none; gap:2px; font-size:12px; color:var(--muted); border:0; }
.stats>div:not(:first-child):before { content:"·"; margin:0 7px; color:#b0bccd; }
.stats strong,.stats span { font-size:12px; font-weight:400; display:inline; color:var(--muted); }
.stats .pending-stat { display:none; }
.search-row { gap:10px; margin-bottom:7px; }
.search-box { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border:1px solid #dce5f2; border-radius:10px; background:#fff; color:#536e92; }
.search-box input { flex:1; width:100%; min-width:0; padding:10px 0; border:0; margin:0!important; background:transparent; font-size:14px; }
.search-box input:focus { outline:none; }
.search-box:focus-within { outline:2px solid #a8c2d6; outline-offset:1px; }
.search-box input::placeholder { font-size:13px; color:#8d9db2; }
.filter-toggle { flex:none; padding:8px 12px; border:1px solid #dce5f2; background:#fff; }
.filter-toggle.is-active { background:var(--accent-soft); color:var(--accent); }
.quick-tabs { display:flex; justify-content:space-between; flex-wrap:nowrap; gap:10px; border-bottom:1px solid var(--line); margin:0 0 12px; }
.quick-tab { padding:12px 5px 11px; min-height:44px; white-space:nowrap; font-size:13px; font-weight:500; color:#6d809b; border-bottom:2px solid transparent; }
.quick-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:650; }
.destination-strip { display:flex; align-items:center; gap:7px; border:1px solid #e6ecf5; background:#f7faff; border-radius:10px; padding:3px 6px; }
.destination-label { display:flex; align-items:center; gap:5px; padding:7px 4px; min-height:38px; background:none; color:#426582; font-size:11px; flex-shrink:0; }
.destination-label .ui-icon { width:17px; height:17px; }
#destination-chips { display:flex; gap:5px; overflow:auto; min-width:0; padding:1px 0; scrollbar-width:thin; }
.destination-chip { background:#fff; border:1px solid #e2e9f3; border-radius:20px; min-height:32px; padding:5px 8px; color:#405775; display:flex; align-items:center; gap:4px; font-size:11px; white-space:nowrap; }
.destination-chip .ui-icon { width:15px; height:17px; color:var(--gold); }
.travel-panel { margin:8px 0 12px; padding:4px 9px; min-height:44px; gap:8px; flex-wrap:nowrap; background:#fff; border:1px solid #e2e9f3; border-radius:10px; }
.travel-panel>div { display:flex; align-items:center; gap:8px; min-width:0; color:#48627f; font-size:12px; }
.travel-panel .ui-icon { color:#426582; }
.travel-panel small { font-size:10px; color:#8b9aad; margin:0; }
.travel-panel label { flex:none; margin:0; }
.travel-panel select { min-height:36px; margin:0; min-width:90px; border-color:#e1e8f3; color:#254367; font-size:12px; padding:6px 9px; }
.filter-panel { border:1px solid var(--line); background:#f6f9ff; border-radius:12px; }
.filter-footer { color:var(--muted); }
.list-heading { font-size:10px; color:#91a0b4; margin:12px 0 8px; }
.little-dot { background:var(--accent); }
.listing-list { gap:12px; }
.home-card { background:#fff; border:1px solid #e2e9f3; border-radius:14px; overflow:hidden; box-shadow:0 2px 8px #243b5310; }
.home-card:hover { border-color:#b9ceee; box-shadow:0 4px 12px #24457812; }
.home-card.selected { border-color:var(--accent); }
.card-body { display:grid; grid-template-columns:34% minmax(0,1fr); align-items:stretch; gap:12px; padding:10px; }
.card-main { display:block; width:100%; min-width:0; min-height:145px; border-radius:9px; overflow:hidden; padding:0; background:#edf3fc; }
.card-cover { position:relative; width:100%; min-width:0; height:100%; min-height:145px; background:#edf3fc; border-radius:9px; }
.card-cover img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-photo-count { position:absolute; bottom:7px; right:7px; padding:2px 6px; border-radius:5px; background:#17314b99; color:white; font-size:11px; }
.card-info { padding:0; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.card-heading { display:flex; gap:5px; align-items:flex-start; min-width:0; }
.card-title { flex:1; min-width:0; padding:3px 0; margin:0; background:none; color:var(--ink); text-align:left; }
.card-title h3 { font-size:15px; line-height:1.4; margin:0; font-weight:700; overflow-wrap:anywhere; -webkit-line-clamp:2; }
.intent-select { min-width:78px; max-width:95px; min-height:34px; padding:5px 17px 5px 7px; font-size:11px; border-radius:8px; color:#6f7f91; border:1px solid #e0e7ef; background:#f2f5f9; }
.intent-high { color:#bd591a; background:#fff1df; border-color:#fff1df; }
.intent-medium { color:#a77415; background:#fff7e1; border-color:#fff1d0; }
.intent-low { color:#637791; background:#edf2f8; border-color:#e2e8f2; }
.intent-select:disabled { opacity:1; cursor:default; }
.rent { font-size:22px; line-height:1.2; letter-spacing:0; color:var(--accent); font-weight:750; }
.rent .currency { font-size:17px; font-weight:650; margin-right:0; }
.rent .unit { font-size:12px; font-weight:550; color:var(--accent); margin-left:2px; }
.rent.unknown { color:#7d8da4; font-size:13px; }
.quote-extras { margin:0; color:#7c8ba4; font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
.card-tags { display:flex; flex-wrap:wrap; gap:4px; }
.tag { background:#f2f5f8; color:#5a708b; padding:3px 5px; border-radius:5px; font-size:10px; line-height:1.4; }
.tag.status-tag { background:#edf3f7; color:#4d7393; }
.tag.excluded { background:#f2f3f5; color:#818b97; }
.tag.pending { background:#fff5e7; color:#a17836; }
.card-note { display:flex; gap:5px; align-items:center; padding:0; border:0; margin:0; color:#7a8aa0; font-size:10px; line-height:1.6; }
.card-note .ui-icon { width:14px; height:14px; }
.card-note span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.card-meta { color:#7b8da4; font-size:10px; line-height:1.5; margin:0; }
.route-summary { background:#fbfcff; padding:6px 10px; border-top:1px solid #e8edf5; color:#70839e; font-size:11px; }
.route-row { display:flex; gap:8px; align-items:center; }
.route-line { color:#6e819d; font-size:11px; margin:4px 0; min-width:0; }
.route-calculate { border:1px solid #d9e4f4; color:var(--accent); background:#fff; border-radius:8px; min-height:36px; padding:5px 10px; font-size:11px; }
.home-card .route-source { display:none; }
.detail-section .route-source { color:#7487a0; }
.empty-state { padding:22px 0 18px; }
.empty-state h2 { color:#254668; font-size:18px; }
.empty-state p { color:#778aa4; }
.empty-art { background:#edf3f7; }
.empty-mountain.one { background:#dce8f0; }
.empty-mountain.two { background:#cbddea; }
.empty-house { color:#527b9d; }
.empty-sun { background:#e8b58d; }
.empty-path { background:#dce8f0; }
.local-note,.list-footer { color:#8d9cb0; }
.list-footer { font-size:10px; padding:22px 0 14px; }
.notice { background:#eef4ff; color:#476387; }
.notice-error { background:#fff0eb; color:#ac4a32; }
.places-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:13px 0; }
.place-card { border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff; min-width:0; }
.place-card-heading { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.place-art { display:flex; align-items:center; justify-content:center; background:#edf3f7; border-radius:9px; width:52px; height:64px; flex-shrink:0; }
.place-art .ui-icon { color:var(--gold); width:26px; height:30px; }
.place-card-info { min-width:0; }
.place-card-info h2 { font-size:14px; line-height:1.4; margin:0 0 4px; overflow-wrap:anywhere; }
.place-card-info p { font-size:10px; margin:0; color:var(--muted); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.place-card-actions { display:flex; gap:6px; }
.place-card-actions .button { flex:1; min-width:0; font-size:11px; padding:6px 4px; min-height:36px; gap:4px; border-radius:8px; }
.place-card-actions .ui-icon { width:15px; height:15px; }
.places-empty { text-align:center; margin:26px 0; padding:12px; }
.places-empty>.ui-icon,.places-empty>span>.ui-icon { color:#a96535; width:34px; height:38px; margin-bottom:12px; }
.places-empty h2 { font-size:17px; }
.places-empty p { font-size:12px; color:var(--muted); }
.places-tip { display:flex; align-items:center; gap:8px; font-size:11px; color:#778ba5; line-height:1.6; margin:17px 0 0; }
.destination-row { border-color:var(--line); }
.map-panel,.main-map,.picker-body { background:#eaf0f8; }
.map-panel { border-color:var(--line); }
.map-title { background:#fffefef5; border-color:#e5ebf4; box-shadow:0 3px 12px #263f6210; }
.map-title small { color:#7d8fa7; }
.map-button { display:flex; align-items:center; justify-content:center; color:#426582; background:#fff; border-color:#dce6f4; }
.map-button .ui-icon { width:23px; height:23px; }
.map-caption { color:#597293; background:#fffffff0; box-shadow:0 3px 12px #263f6210; }
.price-pin,.price-pin.favorite { background:var(--accent); border:1px solid var(--accent); color:white; border-radius:12px; padding:7px 11px; box-shadow:0 2px 8px #234b8528; }
.price-pin:after { border-color:var(--accent); }
.price-pin.selected { background:#345773; border-color:#345773; box-shadow:0 0 0 3px #ffffffc0; }
.price-pin.selected:after { border-color:#345773; }
.destination-pin { background:#fff3e9; border-color:#fff; color:#a96535; }
.amap-picker-pin { background:var(--accent); }
.leaflet-control-zoom { border-color:#dce6f4!important; box-shadow:0 3px 12px #263f6210!important; }
.leaflet-control-zoom a { color:#426582!important; background:white!important; }
.map-preview { background:#fff; border-color:var(--line); box-shadow:0 8px 28px #243f6320; }
.map-preview .preview-photo { background:#edf3fc; }
.map-group-item { color:#4d7393; }
.preview-close { color:#6d819d; }
.sheet { background:#fff; color:var(--ink); box-shadow:0 20px 80px #172e5144; }
.sheet::backdrop { background:#152f5266; }
.sheet-header,.sheet-footer { background:#fff; border-color:var(--line); }
label,.field-label,legend { color:#455e7d; }
input,textarea,select { border-color:#dce5f2; background:#fff; color:var(--ink); }
input::placeholder,textarea::placeholder { color:#899ab1; }
.upload-button { background:#f5f9ff; border-color:#bcd1ed; color:var(--accent); }
.photo-item,.detail-photo,.detail-thumb { background:#edf3fc; }
.photo-remove { background:#17345eaa; }
.icon-button { color:#426186; background:#f0f5fc; }
.no-photo { background:linear-gradient(145deg,#e5eefc,#f4f7fe); color:#91aacb; }
.location-field { background:#f4f8ff; }
.viewing-notes { padding:16px; background:#f7faff; border:1px solid #e4ebf5; border-radius:12px; }
.viewing-notes textarea { background:#fff; }
.detail-section>h3 { color:#456287; }
.backup-icon { color:var(--accent); background:#edf3f7; }
.help-body p { color:#71849e; }
.place-search-form input { border-color:#dce5f2; }
.place-search-status,.place-result { color:#36587e; }
.place-result:hover,.place-result:focus-visible { background:#edf3f7; }
.place-result small,.place-search-hint { color:#7c8fa7; }
.toast { background:#233e55; color:#fff; }
.mobile-nav { display:flex; position:absolute; z-index:600; top:14px; bottom:auto; left:50%; right:auto; transform:translateX(-50%); gap:4px; height:48px; padding:4px; background:#f5f8fd; border:1px solid var(--line); border-radius:12px; }
.mobile-nav>button { display:flex; align-items:center; gap:7px; min-height:38px; padding:6px 13px; border-radius:8px; background:none; color:#6d809b; font-size:12px; }
.mobile-nav>button.active { background:#fff; color:var(--accent); font-weight:650; box-shadow:0 1px 5px #284d7910; }
.mobile-nav .ui-icon { width:18px; height:18px; }
@media(min-width:1500px) { .workspace { grid-template-columns:510px minmax(0,1fr); } .list-panel,.places-panel { padding:26px 28px 12px; } }
@media(min-width:761px) and (max-width:1050px) {
  .workspace { grid-template-columns:390px minmax(0,1fr); }
  .list-panel,.places-panel { padding:20px 16px 12px; }
  .site-header { padding:0 18px; }
  .mobile-nav { left:45%; }
  .mobile-nav>button { padding:6px 9px; }
  .header-actions .desktop-add { display:none; }
}
@media(max-width:760px) {
  .site-header { height:calc(70px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 17px 0; }
  .brand { font-size:22px; gap:9px; }
  .brand-mark { width:42px; height:44px; }
  .brand small { font-size:9px; letter-spacing:0; }
  .header-actions .button { border:1px solid #dce5f2; background:#fff; font-size:12px; padding:8px 10px; min-height:40px; }
  .header-actions .desktop-add { display:none; }
  .workspace { height:calc(100dvh - 137px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display:block; min-height:0; }
  .list-panel { padding:18px 16px 12px; height:100%; }
  .section-heading h1 { font-size:23px; }
  .section-heading .button { min-height:40px; padding:8px 12px; font-size:12px; }
  .section-heading .ui-icon { width:18px; height:18px; }
  .stats { margin-bottom:14px; }
  .stats strong,.stats span { font-size:12px; }
  .card-body { padding:9px; gap:10px; grid-template-columns:33% minmax(0,1fr); }
  .card-main,.card-cover { min-height:140px; }
  .card-title h3 { font-size:14px; }
  .intent-select { min-width:72px; max-width:85px; padding:4px 14px 4px 6px; min-height:32px; font-size:10px; }
  .rent { font-size:21px; }
  .rent .currency { font-size:16px; }
  .rent .unit { font-size:11px; }
  .quote-extras,.card-note { font-size:11px; }
  .tag { font-size:11px; }
  .travel-panel label { flex:none; }
  .workspace[data-view=list] .places-panel { display:none; }
  .workspace[data-view=map] .places-panel { display:none; }
  .workspace[data-view=destinations] { display:flex; flex-direction:column; }
  .workspace[data-view=destinations] .places-panel { display:block; flex:none; max-height:45%; overflow:auto; padding:17px 16px 12px; }
  .workspace[data-view=destinations] .map-panel { display:block; flex:1; min-height:220px; height:auto; }
  .places-panel .section-description { font-size:12px; margin-bottom:12px; }
  .places-panel .places-tip { margin-top:12px; font-size:10px; }
  .places-empty { margin:8px 0; padding:0; }
  .places-empty>span,.places-empty h2 { display:none; }
  .places-empty p { font-size:11px; margin:10px 0; }
  .places-grid { margin:10px 0 0; gap:8px; }
  .place-card { padding:8px; }
  .place-art { width:42px; height:52px; }
  .place-card-info h2 { font-size:12px; }
  .place-card-info p { font-size:9px; }
  .mobile-nav { position:fixed; top:auto; bottom:0; left:0; right:0; transform:none; display:grid; grid-template-columns:1fr 1fr 1fr; height:calc(67px + env(safe-area-inset-bottom)); padding:0 24px env(safe-area-inset-bottom); background:#fff; border:0; border-top:1px solid var(--line); border-radius:0; gap:0; }
  .mobile-nav>button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:60px; padding:6px 8px; border-radius:0; background:none; font-size:11px; color:#7789a2; }
  .mobile-nav>button.active { background:none; box-shadow:none; color:var(--accent); }
  .mobile-nav .ui-icon { width:24px; height:24px; }
  .map-title { max-width:none; }
  .map-title small { font-size:10px; }
  .map-preview { left:12px; bottom:57px; width:calc(100% - 24px); max-width:calc(100% - 24px); border-radius:14px; }
  .map-caption { bottom:24px; }
  .toast { bottom:calc(80px + env(safe-area-inset-bottom)); }
  .sheet { border-radius:0; }
  .confirm-sheet { border-radius:17px; }
  .viewing-notes { padding:12px; }
}
@media(max-width:350px) {
  .site-header { padding-left:12px; padding-right:12px; }
  .brand { font-size:19px; }
  .brand small { font-size:8px; }
  .list-panel { padding-left:12px; padding-right:12px; }
  .card-body { grid-template-columns:31% minmax(0,1fr); gap:8px; }
  .card-title h3 { font-size:13px; }
  .travel-panel small { display:none; }
  .destination-label { font-size:10px; }
}

/* Approved generated lockup: native layout trims transparent canvas padding. */
.brand { display:block; position:relative; width:220px; height:70px; overflow:hidden; flex-shrink:0; }
.brand-lockup { position:absolute; display:block; max-width:none; width:280px; height:auto; left:-25px; top:-12px; }
@media(max-width:760px) {
  .brand { width:200px; height:63px; }
  .brand-lockup { width:256px; left:-24px; top:-10px; }
}
@media(max-width:350px) {
  .brand { width:181px; height:57px; }
  .brand-lockup { width:232px; left:-21px; top:-9px; }
}