:root {
  --ink: #222222;
  --muted: #717171;
  --paper: #ffffff;
  --surface: #f7f7f7;
  --line: #dddddd;
  --brand: #ff385c;
  --brand-deep: #e61e4d;
  --brand-soft: #fff1f3;
  --green: #008a73;
  --green-soft: #e8f7f3;
  --shadow: 0 6px 20px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }
html { background: #f4f4f4; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(145deg, #f8f8f8 0%, #ececec 100%);
  font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; display: flex; justify-content: center; padding: 32px 18px; }
.mini-app {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 880px;
  overflow: hidden;
  border: 6px solid #1f1f1f;
  border-radius: 46px;
  background: var(--paper);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .18);
}

.boot-loader { position: absolute; z-index: 100; inset: 0; display: grid; align-content: center; justify-items: center; padding: 28px; color: var(--ink); background: rgba(255,255,255,.98); transition: opacity .28s ease, visibility .28s ease; }
.boot-loader.leaving { visibility: hidden; opacity: 0; pointer-events: none; }
.boot-mark { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 22px; color: white; background: linear-gradient(135deg,var(--brand),#d70466); box-shadow: 0 12px 30px rgba(230,30,77,.28); animation: loader-float 1.4s ease-in-out infinite; }
.boot-mark span { font-size: 40px; font-weight: 800; transform: rotate(45deg); }
.boot-loader p { margin: 20px 0 0; color: var(--brand); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.boot-loader h2 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.04em; }
.boot-loader small { margin-top: 10px; color: var(--muted); font-size: 11px; }
.boot-progress { width: min(210px,72vw); height: 5px; margin-top: 22px; overflow: hidden; border-radius: 99px; background: #f0f0f0; }
.boot-progress i { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--brand),#ff8fa3); animation: loader-progress 1.1s ease-in-out infinite; }

.status-bar { height: 34px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 22px 5px; color: #5f5f5f; font-size: 10px; }
.top-bar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 8px 20px 10px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 2px solid var(--brand); border-radius: 50%; color: var(--brand); font-size: 25px; font-weight: 700; transform: rotate(45deg); }
.brand p { margin: 0; color: var(--brand); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.brand h1 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.04em; }
.likes-button { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--brand); background: white; font-size: 18px; transition: box-shadow .2s ease, transform .2s ease; }
.likes-button:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.likes-button:active { transform: scale(.94); }
.likes-button b { position: absolute; top: -5px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid white; border-radius: 99px; color: white; background: var(--brand); font-size: 9px; line-height: 14px; }

.condition-pill { width: calc(100% - 40px); display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 5px; margin: 2px 20px 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 99px; background: white; box-shadow: 0 3px 12px rgba(0,0,0,.08); text-align: left; font-size: 10px; font-weight: 600; }
.condition-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: var(--brand); font-size: 12px; }
.condition-pill b { color: var(--brand); font-size: 9px; }

.deck-section { padding: 20px 20px 0; }
.deck-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 13px; }
.deck-heading p { margin: 0; color: var(--muted); font-size: 9px; }
.deck-heading h2 { margin: 3px 0 0; font-size: 21px; letter-spacing: -.045em; }
.deck-heading h2 span { color: var(--brand); }
.match-note { padding: 6px 9px; border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: 8px; font-weight: 700; }

.card-deck { position: relative; height: 486px; perspective: 1000px; }
.card-deck.is-loading::before { content: ""; position: absolute; z-index: 8; inset: 0; border-radius: 24px; background: rgba(255,255,255,.82); backdrop-filter: blur(5px); }
.card-deck.is-loading::after { content: "正在换一组周末灵感…"; position: absolute; z-index: 9; left: 50%; top: 50%; width: max-content; padding: 12px 16px 12px 40px; border: 1px solid rgba(0,0,0,.06); border-radius: 99px; color: #4c4c4c; background: white; box-shadow: 0 8px 24px rgba(0,0,0,.12); font-size: 11px; font-weight: 800; transform: translate(-50%,-50%); }
.swipe-card {
  --x: 0px;
  --r: 0deg;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow);
  transform: translateX(var(--x)) rotate(var(--r));
  transform-origin: center 90%;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  touch-action: none;
  user-select: none;
}
.swipe-card[data-depth="1"] { z-index: 2; transform: translateY(10px) scale(.965); opacity: .72; }
.swipe-card[data-depth="2"] { z-index: 1; transform: translateY(20px) scale(.925); opacity: .35; }
.swipe-card[data-depth="0"] { z-index: 3; }
.swipe-card.dragging { transition: none; }
.swipe-card.fly-left { transform: translateX(-135%) rotate(-18deg); opacity: 0; }
.swipe-card.fly-right { transform: translateX(135%) rotate(18deg); opacity: 0; }

.card-photo { position: relative; height: 308px; overflow: hidden; background: #eee; }
.card-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .28s ease, transform .5s ease; }
.card-photo.image-loading::before, .saved-card-image.image-loading::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(105deg,#ededed 25%,#fafafa 42%,#ededed 58%); background-size: 220% 100%; animation: image-shimmer 1.15s linear infinite; }
.image-loading > img { opacity: 0; }
.image-ready > img { opacity: 1; }
.swipe-card[data-depth="0"]:hover .card-photo img { transform: scale(1.025); }
.card-badges { position: absolute; z-index: 2; top: 13px; left: 13px; right: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-badges span { padding: 7px 10px; border-radius: 99px; color: #333; background: rgba(255,255,255,.94); box-shadow: 0 2px 7px rgba(0,0,0,.1); backdrop-filter: blur(10px); font-size: 8px; font-weight: 800; }
.card-badges span:last-child { color: white; background: var(--brand); }
.place-overlay { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; color: white; }
.place-overlay p { margin: 0 0 3px; color: rgba(255,255,255,.84); font-size: 9px; }
.place-overlay h3 { margin: 0; font-size: 32px; line-height: 1; letter-spacing: -.065em; }
.card-info { padding: 14px 16px 15px; }
.card-reason { min-height: 34px; margin: 0; color: #525252; font-size: 11px; line-height: 1.5; }
.spot-line { margin: 5px 0 0; overflow: hidden; color: #777; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.campaign-line { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #5b5b5b; font-size: 9px; font-weight: 600; }
.campaign-line span { flex: none; padding: 4px 7px; border-radius: 6px; color: var(--brand-deep); background: var(--brand-soft); font-size: 8px; }
.campaign-line strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.campaign-line > b { flex: none; margin-left: auto; color: var(--brand); font-size: 8px; }
.card-footer { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 7px; margin-top: 8px; }
.card-footer div { padding: 8px 9px; border-radius: 10px; background: var(--surface); }
.card-footer span { display: block; color: #8a8a8a; font-size: 7px; }
.card-footer b { display: block; margin-top: 2px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.card-footer .price b { color: var(--brand); }
.card-footer .stay-price b { color: #8b5b18; font-size: 9px; }

.swipe-stamp { position: absolute; z-index: 5; top: 76px; padding: 8px 12px; border: 3px solid; border-radius: 10px; background: rgba(255,255,255,.88); font-size: 23px; font-weight: 900; opacity: 0; pointer-events: none; }
.swipe-stamp.nope { left: 22px; color: #767676; transform: rotate(-13deg); }
.swipe-stamp.love { right: 22px; color: var(--brand); transform: rotate(13deg); }

.gesture-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 23px; color: #9a9a9a; font-size: 8px; }
.gesture-hint i { width: 3px; height: 3px; border-radius: 50%; background: #c8c8c8; }
.action-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 13px; }
.action-button { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; background: white; box-shadow: 0 5px 16px rgba(0,0,0,.1); font-size: 25px; transition: transform .18s ease, box-shadow .18s ease; }
.action-button:active { transform: scale(.9); }
.action-button.dislike { color: #717171; }
.action-button.like { color: var(--brand); }
.action-button.shake { width: 68px; height: 68px; border: 0; color: white; background: linear-gradient(135deg, var(--brand), #d70466); box-shadow: 0 8px 24px rgba(230,30,77,.3); font-size: 29px; }
.action-button.shake.rolling span { animation: shake-dice .62s ease; }
.tap-hint { margin: 11px 0 calc(18px + env(safe-area-inset-bottom)); color: #9d9d9d; text-align: center; font-size: 8px; }
.app-view[hidden], .saved-prompt[hidden], .confirmed-card[hidden], .decision-bar[hidden] { display: none !important; }
.discover-view { padding-bottom: 72px; }
.saved-prompt { width: calc(100% - 40px); display: flex; align-items: center; justify-content: space-between; margin: -2px 20px 14px; padding: 11px 13px; border: 0; border-radius: 12px; color: white; background: #222; box-shadow: 0 8px 22px rgba(0,0,0,.18); font-size: 10px; }
.saved-prompt span { color: #ededed; }.saved-prompt span b { color: white; font-size: 13px; }.saved-prompt strong { color: #ff8da0; font-size: 9px; }

.bottom-nav { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; height: 70px; display: grid; grid-template-columns: repeat(2,1fr); padding: 7px 88px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #eeeeee; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.bottom-nav button { position: relative; display: grid; justify-items: center; gap: 1px; border: 0; color: #8b8b8b; background: none; font-size: 18px; }.bottom-nav button b { font-size: 8px; }.bottom-nav button.active { color: var(--brand); }.bottom-nav i { position: absolute; top: -2px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 4px; border: 2px solid white; border-radius: 99px; color: white; background: var(--brand); font-size: 8px; font-style: normal; line-height: 12px; }

.saved-view { min-height: 740px; padding: 16px 20px 100px; }
.saved-header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 15px; }.saved-header p { margin: 0; color: var(--brand); font-size: 8px; font-weight: 800; letter-spacing: .14em; }.saved-header h2 { margin: 3px 0 0; font-size: 26px; letter-spacing: -.05em; }.saved-header > span { padding: 7px 10px; border-radius: 99px; color: #666; background: var(--surface); font-size: 9px; }.saved-header > span b { color: var(--brand); }
.confirmed-card { position: relative; overflow: hidden; margin-bottom: 13px; padding: 14px; border-radius: 16px; color: white; background: linear-gradient(135deg,#222,#444); }.confirmed-card::after { content: "✓"; position: absolute; top: -22px; right: 5px; color: rgba(255,255,255,.08); font-size: 92px; font-weight: 900; }.confirmed-card > span { color: #ff91a3; font-size: 8px; font-weight: 800; }.confirmed-card h3 { margin: 4px 0 2px; font-size: 21px; }.confirmed-card p { margin: 0; color: #d0d0d0; font-size: 8px; }.confirmed-card button { position: absolute; z-index: 1; right: 12px; bottom: 12px; border: 0; color: white; background: none; font-size: 8px; font-weight: 800; }
.saved-list { display: grid; gap: 10px; }.saved-card { display: grid; grid-template-columns: 94px 1fr; gap: 11px; padding: 9px; border: 1px solid #e7e7e7; border-radius: 16px; background: white; box-shadow: 0 3px 12px rgba(0,0,0,.05); }.saved-card-image { position: relative; width: 94px; height: 112px; overflow: hidden; border-radius: 12px; background: #eee; }.saved-card-image img { width: 94px; height: 112px; object-fit: cover; transition: opacity .24s ease; }.saved-card-content { min-width: 0; }.saved-card-top { display: flex; align-items: start; justify-content: space-between; }.saved-card-top span { color: var(--brand); font-size: 8px; font-weight: 800; }.saved-card-top button { width: 24px; height: 24px; border: 0; border-radius: 50%; color: #777; background: var(--surface); font-size: 14px; }.saved-card h3 { margin: 2px 0 4px; font-size: 18px; }.saved-card p { margin: 0; overflow: hidden; color: #777; font-size: 8px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }.saved-card-tags { display: flex; gap: 4px; margin-top: 7px; overflow: hidden; }.saved-card-tags span { flex: none; padding: 3px 6px; border-radius: 99px; color: #666; background: var(--surface); font-size: 7px; }.saved-card-actions { display: flex; gap: 6px; margin-top: 8px; }.saved-card-actions button { flex: 1; padding: 7px 5px; border: 1px solid var(--line); border-radius: 8px; color: #555; background: white; font-size: 8px; font-weight: 700; }.saved-card-actions button:last-child { color: white; border-color: var(--brand); background: var(--brand); }
.saved-empty { display: grid; justify-items: center; padding: 90px 28px 30px; text-align: center; }.saved-empty > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 28px; }.saved-empty h3 { margin: 14px 0 5px; font-size: 18px; }.saved-empty p { margin: 0; color: #828282; font-size: 10px; line-height: 1.6; }.saved-empty button { margin-top: 17px; padding: 10px 15px; border: 0; border-radius: 9px; color: white; background: var(--brand); font-size: 10px; font-weight: 800; }
.saved-empty[hidden] { display: none; }
.decision-bar { position: sticky; z-index: 4; bottom: 2px; display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 11px 12px; border-radius: 14px; color: white; background: #222; box-shadow: 0 8px 24px rgba(0,0,0,.22); }.decision-bar span { display: block; color: #aaa; font-size: 7px; }.decision-bar b { display: block; margin-top: 2px; font-size: 10px; }.decision-bar button { padding: 9px 11px; border: 0; border-radius: 9px; color: white; background: var(--brand); font-size: 9px; font-weight: 800; }

.empty-state { height: 486px; display: grid; align-content: center; justify-items: center; padding: 30px; border: 1px dashed #cfcfcf; border-radius: 24px; background: var(--surface); text-align: center; }
.empty-state[hidden] { display: none; }
.empty-state > span { font-size: 38px; }.empty-state h2 { margin: 10px 0 5px; }.empty-state p { margin: 0; color: var(--muted); font-size: 11px; }
.empty-state button { margin-top: 18px; padding: 11px 18px; border: 0; border-radius: 9px; color: white; background: var(--brand); font-weight: 800; }

.overlay { position: absolute; z-index: 20; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); }
.bottom-sheet { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 90%; overflow-y: auto; padding: 12px 20px 24px; border-radius: 28px 28px 0 0; background: white; box-shadow: 0 -18px 50px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); scrollbar-width: none; }
.bottom-sheet::-webkit-scrollbar { display: none; }.bottom-sheet.open { transform: translateY(0); }
.sheet-handle { width: 38px; height: 4px; margin: 0 auto 17px; border-radius: 99px; background: #d5d5d5; }
.sheet-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 17px; }.sheet-title p { margin: 0; color: var(--brand); font-size: 8px; font-weight: 800; letter-spacing: .14em; }.sheet-title h2 { margin: 4px 0 0; font-size: 23px; }
.close-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e5e5e5; border-radius: 50%; color: #4f4f4f; background: white; font-size: 20px; }
.field { display: grid; gap: 7px; }.field > span, .range-field > span, .theme-field > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.select-wrap { position: relative; }.select-wrap select { width: 100%; appearance: none; padding: 13px 40px 13px 13px; border: 1px solid #b0b0b0; border-radius: 12px; color: var(--ink); background: white; outline: none; font-weight: 600; }.select-wrap select:focus { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }.select-wrap b { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); pointer-events: none; }
.range-field { display: grid; gap: 8px; margin-top: 16px; }.range-field > span { display: flex; justify-content: space-between; }.range-field b { color: var(--brand); font-size: 12px; }.range-field input { width: 100%; accent-color: var(--brand); }.range-field small { display: flex; justify-content: space-between; color: #9d9d9d; font-size: 8px; }.range-field i { font-style: normal; }
.theme-field { display: grid; gap: 9px; margin-top: 16px; }.theme-options { display: flex; flex-wrap: wrap; gap: 7px; }.theme-options button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 99px; color: #5f5f5f; background: white; font-size: 9px; }.theme-options button.active { color: var(--brand-deep); border-color: #ffafbd; background: var(--brand-soft); font-weight: 800; }
.primary-button { width: 100%; margin-top: 18px; padding: 14px; border: 0; border-radius: 10px; color: white; background: linear-gradient(90deg, var(--brand-deep), #d70466); font-weight: 800; box-shadow: 0 8px 20px rgba(230,30,77,.23); }

.detail-sheet { height: min(90vh, 780px); max-height: min(90vh, 780px); padding: 0; overflow-y: auto; overscroll-behavior: contain; }.detail-sheet.content-loading .detail-body { opacity: .22; pointer-events: none; }.detail-sheet.content-loading::after { content: "正在准备两天行程…"; position: absolute; z-index: 12; top: 282px; left: 50%; width: max-content; padding: 11px 15px; border-radius: 99px; color: #4d4d4d; background: white; box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: 11px; font-weight: 800; transform: translateX(-50%); }.detail-cover { position: relative; height: 255px; flex: none; overflow: hidden; contain: paint; background: #eee; }.detail-cover img { width: 100%; height: 100%; object-fit: cover; transition: opacity .28s ease; }.cover-close { position: absolute; z-index: 5; top: 14px; right: 14px; }.detail-cover > span { position: absolute; z-index: 4; left: 17px; bottom: 14px; padding: 6px 9px; border-radius: 99px; color: white; background: var(--brand); font-size: 8px; font-weight: 800; }
.media-loader { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; justify-items: center; gap: 9px; color: #7a7a7a; background: linear-gradient(105deg,#ededed 25%,#fafafa 42%,#ededed 58%); background-size: 220% 100%; animation: image-shimmer 1.15s linear infinite; transition: opacity .24s ease; }
.media-loader i { width: 25px; height: 25px; border: 3px solid rgba(255,56,92,.18); border-top-color: var(--brand); border-radius: 50%; animation: loader-spin .8s linear infinite; }
.media-loader span { font-size: 10px; font-weight: 700; }
.image-ready > .media-loader, .image-error > .media-loader { opacity: 0; pointer-events: none; }
.detail-body { padding: 17px 20px 22px; }.detail-type { margin: 0; color: var(--muted); font-size: 10px; }.detail-name-row { display: flex; align-items: baseline; justify-content: space-between; }.detail-name-row h2 { margin: 4px 0 6px; font-size: 30px; letter-spacing: -.055em; }.detail-name-row > b { color: var(--brand); font-size: 15px; }.detail-reason { margin: 0; color: #565656; font-size: 11px; line-height: 1.65; }.detail-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 12px; }.detail-stats div { padding: 10px; border-radius: 10px; background: var(--surface); }.detail-stats span { display: block; color: #8c8c8c; font-size: 8px; }.detail-stats b { display: block; margin-top: 3px; font-size: 10px; }
.promo-card { margin-top: 12px; padding: 14px; border: 1px solid #ffd5dc; border-radius: 14px; background: linear-gradient(145deg,#fff6f7,#fff0f3); }.promo-title { display: flex; align-items: center; justify-content: space-between; }.promo-title span { color: var(--brand); font-size: 8px; font-weight: 800; letter-spacing: .08em; }.promo-title b { padding: 4px 7px; border-radius: 99px; color: #8d5260; background: white; font-size: 7px; }.promo-card h3 { margin: 5px 0 5px; font-size: 16px; }.promo-card p { margin: 0; color: #6d5559; font-size: 9px; line-height: 1.55; }.promo-intro { padding-bottom: 11px; }.promo-meta { display: grid; grid-template-columns: 1fr 1.15fr; gap: 7px; }.promo-meta div { padding: 9px; border: 1px solid rgba(255,56,92,.1); border-radius: 10px; background: rgba(255,255,255,.72); }.promo-meta span, .promo-benefit > span { display: block; color: #a06d78; font-size: 7px; }.promo-meta b { display: block; margin-top: 3px; font-size: 9px; line-height: 1.35; }.promo-benefit { margin-top: 7px; padding: 10px; border-radius: 10px; background: white; }.promo-benefit p { margin-top: 3px; color: #503b40; font-weight: 650; }.promo-highlights { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }.promo-highlights span { padding: 5px 7px; border-radius: 99px; color: var(--brand-deep); background: rgba(255,255,255,.8); font-size: 7px; font-weight: 700; }.promo-tip { margin-top: 10px !important; padding-top: 9px; border-top: 1px dashed #efc8ce; color: #9b747c !important; font-size: 8px !important; }
.route-plan { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 10px; color: #656565; background: var(--surface); font-size: 8px; }.route-plan i { flex: 1; height: 1px; background: #cfcfcf; }
.transport-section { margin-top: 14px; padding: 14px; border: 1px solid #dce8e5; border-radius: 16px; background: linear-gradient(155deg,#fbfffe,#eef8f5); }.transport-heading { display: flex; align-items: end; justify-content: space-between; }.transport-heading span { color: var(--green); font-size: 7px; font-weight: 800; letter-spacing: .12em; }.transport-heading h3 { margin: 3px 0 0; font-size: 18px; }.transport-heading > b { color: var(--green); font-size: 9px; }.transport-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 8px 10px; border-radius: 9px; color: #38635a; background: white; font-size: 8px; }.transport-summary span { font-weight: 800; }.transport-summary b { color: #6c817c; }.transport-trips { display: grid; gap: 7px; margin-top: 8px; }.transport-trip { position: relative; padding: 11px; border: 1px solid #dbe9e6; border-radius: 11px; background: white; }.transport-trip > div { display: flex; align-items: center; gap: 6px; }.transport-trip > div span { color: #4d766d; font-size: 8px; font-weight: 800; }.transport-trip > div b { padding: 3px 6px; border-radius: 99px; color: white; background: var(--green); font-size: 7px; }.transport-trip h4 { margin: 6px 0 3px; font-size: 17px; letter-spacing: -.02em; }.transport-trip p { max-width: 78%; margin: 0; color: #64726f; font-size: 8px; line-height: 1.45; }.transport-trip > strong { position: absolute; right: 10px; bottom: 11px; color: var(--green); font-size: 10px; }.transport-note { margin: 9px 1px 0; padding-top: 8px; border-top: 1px dashed #c9ded9; color: #80918d; font-size: 7px; line-height: 1.5; }
.transport-trip > div i { padding: 3px 6px; border-radius: 99px; color: #16705f; background: #e7f8f3; font-size: 7px; font-style: normal; }.transport-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; margin-top: 10px; }.transport-actions button, .transport-actions a { display: grid; place-items: center; min-height: 37px; padding: 8px; border: 1px solid #b8d8d1; border-radius: 9px; color: var(--green); background: white; font-size: 8px; font-weight: 800; text-align: center; text-decoration: none; }.transport-actions a { color: white; border-color: var(--green); background: var(--green); }
.transport-sheet { padding-bottom: 26px; }.booking-route { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 11px; color: #285f54; background: var(--green-soft); }.booking-route span { font-size: 13px; font-weight: 800; }.booking-route b { padding: 4px 7px; border-radius: 99px; color: white; background: var(--green); font-size: 8px; }.booking-step { margin: 10px 1px 12px; color: #6f7f7b; font-size: 8px; line-height: 1.55; }.transport-options { display: grid; gap: 8px; }.transport-option { position: relative; width: 100%; padding: 12px; border: 1px solid #dcdcdc; border-radius: 13px; background: white; text-align: left; }.transport-option.selected { border: 1.5px solid var(--green); background: #f7fffc; box-shadow: 0 5px 16px rgba(0,138,115,.1); }.transport-option > div { display: flex; align-items: center; gap: 6px; }.transport-option > div span { font-size: 10px; font-weight: 800; }.transport-option > div i { padding: 3px 6px; border-radius: 99px; color: white; background: var(--green); font-size: 7px; font-style: normal; }.transport-option > div b { margin-left: auto; color: var(--green); font-size: 9px; }.transport-option p { margin: 8px 0 3px; font-size: 12px; font-weight: 750; }.transport-option small { color: #74817e; font-size: 8px; }.transport-option > strong { position: absolute; right: 12px; bottom: 11px; color: var(--green); font-size: 8px; }.handoff-note { margin-top: 12px; padding: 11px; border-radius: 11px; background: #fff8ea; }.handoff-note span { color: #9a681e; font-size: 8px; font-weight: 800; }.handoff-note p { margin: 4px 0 0; color: #7c6d58; font-size: 8px; line-height: 1.55; }.purchase-button { display: grid; place-items: center; width: 100%; margin-top: 12px; padding: 13px; border-radius: 10px; color: white; background: var(--green); font-size: 10px; font-weight: 800; text-decoration: none; }
.stay-section { margin-top: 16px; padding: 14px; border: 1px solid #eadfce; border-radius: 16px; background: linear-gradient(155deg,#fffdf9,#fff7eb); box-shadow: 0 8px 24px rgba(89,61,21,.08); }.stay-heading { display: flex; align-items: end; justify-content: space-between; }.stay-heading span, .guide-heading span { color: #9a681e; font-size: 7px; font-weight: 800; letter-spacing: .12em; }.stay-heading h3 { margin: 3px 0 0; font-size: 18px; }.stay-heading > b { color: #846944; font-size: 8px; }.stay-budget-card { position: relative; overflow: hidden; margin-top: 11px; padding: 13px; border-radius: 13px; color: white; background: linear-gradient(135deg,#3a2c1e,#72512a); }.stay-budget-card::after { content: "⌂"; position: absolute; right: 10px; bottom: -18px; color: rgba(255,255,255,.09); font-size: 70px; }.stay-budget-card > span { color: #ead8bf; font-size: 7px; font-weight: 700; }.stay-budget-card h4 { position: relative; z-index: 1; margin: 4px 0 3px; font-size: 19px; }.stay-budget-card p { margin: 0; color: #f7ede0; font-size: 9px; }.stay-budget-card i { display: inline-block; margin-top: 8px; padding: 4px 7px; border-radius: 99px; color: #3a2c1e; background: #f1dcae; font-size: 7px; font-style: normal; font-weight: 800; }.stay-options { display: grid; gap: 7px; margin-top: 9px; }.stay-option { padding: 10px; border: 1px solid #eee3d4; border-radius: 11px; background: rgba(255,255,255,.75); }.stay-option.featured { border: 1.5px solid #b88235; background: white; box-shadow: 0 5px 14px rgba(103,72,30,.1); }.stay-option > div { display: flex; align-items: center; gap: 6px; }.stay-option > div span { color: #8c785d; font-size: 8px; font-weight: 800; }.stay-option > div i { padding: 3px 6px; border-radius: 99px; color: white; background: #9a681e; font-size: 7px; font-style: normal; }.stay-option > div b { margin-left: auto; color: #6d4b1e; font-size: 9px; }.stay-option h4 { margin: 6px 0 3px; font-size: 11px; }.stay-option p { margin: 0; color: #766b5c; font-size: 8px; line-height: 1.5; }.stay-area-note { margin-top: 9px; padding-top: 10px; border-top: 1px dashed #ddcdb6; }.stay-area-note span { color: #9a681e; font-size: 7px; font-weight: 800; }.stay-area-note h4 { margin: 3px 0; font-size: 11px; }.stay-area-note p { margin: 0; color: #6f675c; font-size: 8px; line-height: 1.55; }
.weekend-guide, .shop-guide { margin-top: 18px; }
.guide-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 10px; }.guide-heading h3 { margin: 2px 0 0; font-size: 16px; }.guide-heading small { color: #909090; font-size: 8px; }
.timeline { position: relative; display: grid; gap: 8px; }.timeline::before { content: ""; position: absolute; top: 17px; bottom: 17px; left: 29px; width: 1px; background: #e7e7e7; }
.timeline article { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 7px; padding: 11px; border-radius: 12px; background: var(--surface); }
.timeline time { position: relative; z-index: 1; align-self: start; padding: 4px 0; border-radius: 99px; color: var(--brand); background: var(--surface); font-size: 8px; font-weight: 800; }
.timeline h4 { margin: 0 0 4px; font-size: 11px; }.timeline p { margin: 0; color: #626262; font-size: 9px; line-height: 1.65; }
.shop-list { display: flex; flex-wrap: wrap; gap: 7px; }.shop-list span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 99px; color: #4f4f4f; background: white; font-size: 9px; }.shop-list span::before { content: "♡"; margin-right: 5px; color: var(--brand); }
.guide-note { margin: 16px 2px 0; padding-top: 12px; border-top: 1px solid #eeeeee; color: #969696; font-size: 8px; line-height: 1.55; }
.detail-body > .primary-button { position: sticky; bottom: 0; z-index: 2; margin-bottom: env(safe-area-inset-bottom); }
.plan-sheet { height: min(90vh, 780px); max-height: min(90vh, 780px); padding: 0; overflow-y: auto; }.plan-hero { position: relative; height: 285px; overflow: hidden; background: #eee; }.plan-hero::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(transparent 35%,rgba(0,0,0,.72)); }.plan-hero img { width: 100%; height: 100%; object-fit: cover; transition: opacity .28s ease; }.plan-hero > span { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 6px 9px; border-radius: 99px; color: white; background: var(--brand); font-size: 8px; font-weight: 800; }.plan-hero > div { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 17px; color: white; }.plan-hero p { margin: 0; color: rgba(255,255,255,.75); font-size: 9px; }.plan-hero h2 { display: inline-block; margin: 2px 8px 0 0; font-size: 32px; }.plan-hero b { font-size: 11px; }.plan-body { padding: 16px 20px 24px; }.plan-meta { margin: 0; color: #666; font-size: 10px; line-height: 1.6; }.plan-transport { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--green-soft); }.plan-transport > div:first-child { display: flex; justify-content: space-between; color: var(--green); font-size: 8px; font-weight: 800; }.plan-transport .transport-trip { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 7px; margin-top: 7px; padding: 8px; }.plan-transport .transport-trip > div { display: block; }.plan-transport .transport-trip > div b { display: none; }.plan-transport .transport-trip h4 { margin: 0; font-size: 10px; }.plan-transport .transport-trip p { display: none; }.plan-transport .transport-trip > strong { position: static; font-size: 8px; }.plan-stay { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--brand-soft); }.plan-stay span { display: block; color: var(--brand); font-size: 8px; font-weight: 800; }.plan-stay b { display: block; margin-top: 4px; font-size: 11px; }.plan-days { display: grid; gap: 8px; margin-top: 12px; }.plan-days article { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 11px; border-radius: 12px; background: var(--surface); }.plan-days span { color: var(--brand); font-size: 8px; font-weight: 800; }.plan-days p { margin: 0; color: #5f5f5f; font-size: 9px; line-height: 1.55; }.plan-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }.plan-actions button { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 9px; font-weight: 800; }.plan-actions button:first-child { color: white; border-color: var(--brand); background: var(--brand); }
.plan-transport > a { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid #c7e1db; color: var(--green); font-size: 8px; font-weight: 800; text-align: right; text-decoration: none; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 11px 14px; border-radius: 99px; color: white; background: rgba(34,34,34,.96); font-size: 12px; opacity: 0; transform: translate(-50%, 12px); transition: .25s ease; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%,0); pointer-events: auto; }.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.toast button { flex: none; padding: 5px 8px; border: 0; border-radius: 99px; color: #222; background: white; font-size: 12px; font-weight: 800; }

.field-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9px; margin-top: 15px; }
.service-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.service-actions button, .service-actions a { display: grid; place-items: center; min-height: 40px; padding: 9px; border: 1px solid #e4b7bf; border-radius: 9px; color: var(--brand-deep); background: white; font-size: 11px; font-weight: 800; text-align: center; text-decoration: none; }
.service-actions.three-actions { grid-template-columns: repeat(3,1fr); }
.service-actions a { color: white; border-color: var(--brand); background: var(--brand); }
.stay-actions button, .stay-actions a { color: #75501f; border-color: #d9c3a3; background: white; }
.stay-actions a:first-child { color: white; border-color: #8f672e; background: #8f672e; }
.transport-actions button:last-child { color: white; border-color: var(--green); background: var(--green); }
.handoff-card { margin-top: 12px; padding: 12px; border: 1px solid #dce8e5; border-radius: 12px; background: #f7fffc; }
.handoff-card > span { color: var(--green); font-size: 11px; font-weight: 800; }
.handoff-card pre { margin: 7px 0 9px; color: #53645f; font-family: inherit; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.handoff-card button { width: 100%; min-height: 38px; border: 1px solid #b8d8d1; border-radius: 9px; color: var(--green); background: white; font-size: 11px; font-weight: 800; }
.budget-summary { display: grid; grid-template-columns: 1.05fr .95fr; gap: 12px; margin-top: 13px; padding: 14px; border-radius: 14px; color: white; background: linear-gradient(135deg,#222,#4b4542); }
.budget-summary span { color: #d8d3d1; font-size: 11px; }.budget-summary h3 { margin: 3px 0; font-size: 23px; }.budget-summary small { color: #bdf2df; font-size: 10px; }.budget-summary small.over { color: #ffc0ca; }
.budget-summary dl { display: grid; gap: 5px; margin: 0; }.budget-summary dl div { display: flex; justify-content: space-between; gap: 8px; }.budget-summary dt { color: #c8c4c2; font-size: 10px; }.budget-summary dd { margin: 0; font-size: 10px; font-weight: 800; }
.prep-checklist { margin-top: 13px; padding: 13px; border: 1px solid #e8e8e8; border-radius: 14px; }
.prep-heading { display: flex; align-items: end; justify-content: space-between; }.prep-heading span { color: var(--brand); font-size: 10px; font-weight: 800; }.prep-heading h3 { margin: 2px 0 0; font-size: 17px; }.prep-heading > b { color: #777; font-size: 10px; }
#prepItems { display: grid; gap: 7px; margin-top: 10px; }.prep-item { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 8px; padding: 9px; border-radius: 10px; background: var(--surface); }.prep-item > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #777; background: white; font-size: 13px; }.prep-item b,.prep-item small { display: block; }.prep-item b { font-size: 11px; }.prep-item small { margin-top: 2px; color: #777; font-size: 10px; }.prep-item button { padding: 7px 8px; border: 0; border-radius: 8px; color: white; background: var(--brand); font-size: 10px; font-weight: 800; }.prep-item.done { background: var(--green-soft); }.prep-item.done > span { color: white; background: var(--green); }.prep-item.done button { color: var(--green); background: white; }
.plan-transport > button { width: 100%; margin-top: 9px; padding: 9px; border: 0; border-top: 1px solid #c7e1db; color: var(--green); background: transparent; font-size: 11px; font-weight: 800; text-align: right; }
.plan-stay-links { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #f0ccd3; }.plan-stay-links a { display: grid; place-items: center; min-height: 38px; border: 1px solid #f0ccd3; border-radius: 9px; color: var(--brand); background: white; font-size: 11px; font-weight: 800; text-decoration: none; }
.return-sheet { padding-bottom: 30px; }.return-intro { margin: 0 0 13px; color: #666; font-size: 12px; line-height: 1.6; }.return-options { display: grid; gap: 8px; }.return-options button { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; width: 100%; padding: 12px; border: 1px solid #e2e2e2; border-radius: 13px; background: white; text-align: left; }.return-options span { grid-row: 1/3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 17px; }.return-options b { align-self: end; font-size: 13px; }.return-options small { color: #777; font-size: 11px; }.return-options button:first-child { border-color: #bcded5; background: #f8fffd; }.return-options button:first-child span { color: white; background: var(--green); }
.recovery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }.recovery-actions[hidden] { display: none; }.recovery-actions button { min-height: 42px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 11px; font-weight: 800; }.recovery-actions button:first-child { color: white; border-color: var(--brand); background: var(--brand); }

button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(255,56,92,.35); outline-offset: 2px; }
.condition-pill, .card-reason, .detail-reason, .plan-meta { font-size: 12px; }
.card-badges span, .campaign-line, .card-footer span, .match-note, .tap-hint, .guide-note, .transport-note { font-size: 10px; }
.card-footer b, .timeline p, .promo-card p, .stay-option p, .stay-area-note p, .plan-days p { font-size: 11px; }
.promo-title span, .transport-heading span, .stay-heading span, .guide-heading span, .detail-stats span { font-size: 10px; }
.bottom-nav button { color: #666; }.bottom-nav button b { font-size: 12px; }.saved-header p, .sheet-title p { font-size: 10px; }
.gesture-hint { color: #555; font-size: 12px; }
.tap-hint { color: #666; font-size: 12px; }

@media (max-width: 360px) {
  .service-actions.three-actions { grid-template-columns: 1fr; }
}

@keyframes shake-dice { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-22deg) scale(1.16); } 50% { transform: rotate(20deg) scale(.95); } 75% { transform: rotate(-12deg) scale(1.08); } }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes loader-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(340%); } }
@keyframes image-shimmer { to { background-position-x: -220%; } }

@media (max-width: 880px) {
  html, body { background: white; }
  .app-shell { min-height: 100dvh; padding: 0; }
  .mini-app { max-width: none; min-height: 100dvh; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  .status-bar { height: calc(34px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .overlay { position: fixed; z-index: 40; }
  .bottom-sheet { position: fixed; z-index: 50; max-height: calc(92dvh - env(safe-area-inset-top)); padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .detail-sheet { height: calc(92dvh - env(safe-area-inset-top)); max-height: calc(92dvh - env(safe-area-inset-top)); }
  .plan-sheet { height: calc(92dvh - env(safe-area-inset-top)); max-height: calc(92dvh - env(safe-area-inset-top)); }
  .bottom-nav { position: fixed; padding-bottom: calc(7px + env(safe-area-inset-bottom)); height: calc(70px + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .top-bar { padding-inline: 14px; }.condition-pill { width: calc(100% - 28px); margin-inline: 14px; }.deck-section { padding-inline: 14px; }
  .card-deck, .empty-state { height: 455px; }.card-photo { height: 285px; }.place-overlay h3 { font-size: 29px; }.card-info { padding: 12px 13px; }.card-reason { font-size: 10px; }.action-row { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }