:root {
  --brand: #34c759;
  --ink: #1c1c1e;
  --muted: #636366;
  --surface: #f2f2f7;
  --surface-soft: #f8f8fa;
  --white: #ffffff;
  --hero-muted: rgba(255, 255, 255, 0.82);
  --hero-line: rgba(255, 255, 255, 0.22);
  --page-gutter: 16px;
  --space: 16px;
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-small: 8px;
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[hidden] {
  display: none !important;
}

/* IA refresh: mobile app usability pass */
:root {
  --primary: #58c15a;
  --primary-dark: #35a846;
  --bg: #f5f5f7;
  --card: #ffffff;
  --text: #18191c;
  --text-secondary: #5e6268;
  --text-muted: #8a8d93;
  --line: #e8e8ed;
  --chip-bg: #f0f1f5;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
  --brand: var(--primary);
  --ink: var(--text);
  --muted: var(--text-secondary);
  --surface: var(--chip-bg);
  --surface-soft: var(--bg);
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-sm);
  --radius-small: 12px;
  --shadow-light: var(--shadow-card);
}

.phone-shell {
  height: 100svh;
  max-height: none;
}

.bottom-nav {
  z-index: 30;
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 6px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);
}

.bottom-nav button {
  min-height: 46px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 700;
}

.tab-page,
.profile-page {
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.profile-sheet {
  padding-bottom: calc(136px + env(safe-area-inset-bottom));
}

.primary-action,
.composer-confirm,
.drawer-primary {
  min-height: 56px;
  border-radius: 20px;
  color: var(--white);
  background: var(--primary);
  font-weight: 800;
}

.primary-action {
  background: var(--primary);
  box-shadow: 0 16px 32px rgba(88, 193, 90, 0.28);
}

.home-focus {
  bottom: 258px;
}

.home-focus h2 {
  max-width: 12em;
  white-space: normal;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.12;
}

.home-focus p {
  max-width: 21em;
  margin: 12px auto 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 15px;
  line-height: 1.45;
}

.action-bar {
  left: 68px;
  right: 68px;
  bottom: 180px;
}

.discover-panel {
  display: none;
}

.discover-panel {
  position: absolute;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.app.content-mode .discover-panel,
.app.profile-mode .discover-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.quick-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.quick-chip-row button,
.template-card button,
.saved-actions button,
.day-view-toggle button,
.poi-actions button,
.profile-link-list button {
  border-radius: var(--radius-control);
  font-weight: 700;
}

.quick-chip-row button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
}

.template-section {
  display: grid;
  gap: 8px;
}

.template-section .section-heading {
  margin-bottom: 0;
}

.template-section .section-heading span {
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

.template-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.template-card strong,
.template-card span {
  display: block;
}

.template-card strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

.template-card span {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.3;
}

.template-card button {
  min-height: 34px;
  padding: 0 13px;
  color: var(--white);
  background: var(--primary);
}

.trip-summary-card,
.next-step-card,
.trip-tools-card,
.day-plan-card,
.share-slot-card,
.saved-card,
.collection-note,
.photo-ai-card,
.current-trip .trip-line,
.travel-footprint .footprint-card,
.profile-link-list {
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.trip-summary-card,
.next-step-card,
.trip-tools-card,
.day-plan-card,
.share-slot-card {
  padding: 20px;
}

.next-step-card {
  display: grid;
  gap: 14px;
}

.next-step-card span,
.next-step-card em {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.next-step-card strong {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.next-step-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.next-step-actions button {
  min-height: 44px;
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--chip-bg);
  font-weight: 800;
}

.next-step-actions button:first-child {
  color: var(--white);
  background: var(--primary);
}

.trip-summary-card small {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.trip-tools-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.gateway-status-stack {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.ai-gateway-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: rgba(88, 193, 90, 0.09);
}

.ai-gateway-status.is-ready {
  background: rgba(88, 193, 90, 0.1);
}

.ai-gateway-status.is-warning {
  background: rgba(255, 204, 0, 0.16);
}

.ai-gateway-status.is-fallback {
  background: rgba(142, 142, 147, 0.14);
}

.ai-gateway-status span,
.ai-gateway-status em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.ai-gateway-status strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-gateway-status em {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-tools-card strong,
.day-plan-card .section-heading span,
.page-header h2 {
  font-weight: 800;
}

.ai-scenario-row,
.trip-closure-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trip-closure-actions button,
.ai-scenario-row button {
  min-height: 42px;
  background: var(--chip-bg);
  color: var(--text);
}

.trip-status-grid {
  overflow: hidden;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.trip-status-grid div {
  min-height: 74px;
}

.day-view-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 4px;
  border-radius: 18px;
  background: var(--chip-bg);
}

.day-view-toggle button {
  min-height: 38px;
  color: var(--text-secondary);
  background: transparent;
}

.day-view-toggle .active {
  color: var(--white);
  background: var(--primary);
}

.timeline-list li {
  cursor: pointer;
  border-radius: 20px;
}

.timeline-list em {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  color: var(--primary-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.day-map-panel {
  margin-top: 0;
}

.saved-card {
  align-items: start;
}

.saved-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.saved-actions button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--text);
  background: var(--chip-bg);
  font-size: 12px;
}

.saved-actions button:first-child {
  color: var(--white);
  background: var(--primary);
}

.collection-note {
  margin-top: var(--space);
  padding: 14px 16px;
  color: var(--text-secondary);
}

.collection-note summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
}

.collection-note span {
  display: block;
  margin-top: 8px;
}

.composer-field {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.composer-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.composer-field span {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.composer-field input {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0 14px;
  color: var(--text);
  background: var(--chip-bg);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.support-message-field textarea {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  border: 0;
  border-radius: var(--radius-control);
  padding: 12px 14px;
  color: var(--text);
  background: var(--chip-bg);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  outline: none;
}

.support-actions {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 10px;
  margin: 8px 0 14px;
}

.support-result {
  margin-top: 8px;
}

.profile-toolbar {
  min-height: 40px;
}

.profile-link-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: var(--space);
  padding: 12px;
}

.profile-link-list button {
  min-height: 44px;
  color: var(--text);
  background: var(--chip-bg);
}

.sheet-intro {
  margin: -4px 0 14px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.compare-grid,
.adjust-impact-grid,
.poi-detail-list {
  display: grid;
  gap: 10px;
}

.compare-grid article,
.adjust-impact-grid div,
.poi-detail-list div,
.share-preview-card {
  padding: 14px;
  border-radius: 18px;
  background: var(--bg);
}

.compare-grid .recommended {
  border: 1px solid rgba(88, 193, 90, 0.22);
  background: rgba(88, 193, 90, 0.08);
}

.recommendation-explain {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(24, 119, 242, 0.14);
  border-radius: 14px;
  background: rgba(24, 119, 242, 0.07);
}

.life-data-panel {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(88, 193, 90, 0.08);
}

.life-data-panel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.life-data-panel span,
.life-data-panel dt,
.life-data-panel p {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.life-data-panel strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.life-data-panel dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.life-data-panel dl div {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
}

.life-data-panel dt,
.life-data-panel dd {
  margin: 0;
}

.life-data-panel dd {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.life-data-panel p {
  margin: 0;
  line-height: 1.4;
}

.compare-grid span,
.compare-grid strong,
.compare-grid em,
.adjust-impact-grid span,
.adjust-impact-grid strong,
.poi-detail-list span,
.poi-detail-list strong,
.recommendation-explain span,
.recommendation-explain strong,
.recommendation-explain em,
.share-preview-card span,
.share-preview-card strong,
.share-preview-card em {
  display: block;
}

.compare-grid span,
.adjust-impact-grid span,
.poi-detail-list span,
.recommendation-explain span,
.share-preview-card span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.compare-grid strong,
.adjust-impact-grid strong,
.poi-detail-list strong,
.recommendation-explain strong,
.share-preview-card strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.compare-grid em,
.recommendation-explain em,
.share-preview-card em,
.share-preview-card p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.recommendation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.recommendation-tags small {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(24, 119, 242, 0.12);
  font-size: 11px;
  font-weight: 800;
}

.impact-list {
  margin: 14px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.impact-list li {
  color: var(--text-secondary);
  font-size: 14px;
}

.sheet-actions,
.info-check-actions {
  grid-template-columns: 1fr 1fr;
}

/* Compact, scroll-safe bottom sheets */
.profile-drawer {
  z-index: 80;
  padding: 10px;
}

.profile-drawer-panel {
  max-height: min(86svh, calc(100% - 20px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

#aiReplaceSheet .profile-drawer-panel,
#aiAdjustSheet .profile-drawer-panel {
  max-height: min(82svh, calc(100% - 28px));
}

#aiReplaceSheet .drawer-header,
#aiAdjustSheet .drawer-header {
  margin-bottom: 10px;
}

#aiReplaceSheet .sheet-intro,
#aiAdjustSheet .sheet-intro {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.45;
}

#aiReplaceSheet .compare-grid {
  gap: 8px;
}

#aiReplaceSheet .compare-grid article {
  padding: 12px;
  border-radius: 16px;
}

#aiReplaceSheet .impact-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

#aiReplaceSheet .impact-list li {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--chip-bg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.sheet-actions {
  position: sticky;
  bottom: -1px;
  display: grid;
  gap: 10px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white) 28%);
}

/* Recommendation memory lives as a compact row on Trips and expands in a drawer. */
#recommendationMemorySheet .event-signal-card {
  box-shadow: none;
}

#recommendationMemorySheet .event-signal-grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}

#recommendationMemorySheet .event-signal-card p,
#recommendationMemorySheet .event-signal-card #profileBasis {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* Compact Trips layout: keep all controls available while reducing vertical scroll. */
.trips-page .trip-tools-card {
  gap: 10px;
  padding: 14px;
}

.trips-page .current-trip-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
}

.current-trip-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.current-trip-main button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-weight: 800;
  white-space: nowrap;
}

.trips-page .current-trip-card .recommendation-explain {
  margin-top: 8px;
}

.current-trip-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.current-trip-next span,
.current-trip-next strong,
.current-trip-next em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-trip-next span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.current-trip-next strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.current-trip-next em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
}

.trips-page .current-trip-next .next-step-actions {
  grid-template-columns: repeat(2, minmax(58px, 1fr));
  gap: 6px;
  min-width: 128px;
}

.trips-page .current-trip-next .next-step-actions button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.trips-page .trip-tools-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.trips-page .trip-tools-head em {
  display: none;
}

.trips-page .ai-tools-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface-soft);
  text-align: left;
}

.trips-page .ai-tools-toggle::after {
  content: "查看";
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(52, 199, 89, 0.1);
  font-size: 11px;
  font-weight: 800;
}

.trips-page .trip-tools-card.is-open .ai-tools-toggle::after {
  content: "收起";
  color: var(--muted);
  background: rgba(99, 99, 102, 0.1);
}

.trips-page .ai-tools-toggle span,
.trips-page .ai-tools-toggle strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trips-page .ai-tools-toggle span {
  font-size: 12px;
  font-weight: 850;
}

.trips-page .ai-tools-toggle strong {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.trips-page .ai-tools-panel {
  display: grid;
  gap: 8px;
}

.trips-page .trip-style-chips {
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.trips-page .trip-style-chips::-webkit-scrollbar,
.trips-page .event-signal-grid::-webkit-scrollbar {
  display: none;
}

.trips-page .trip-style-chips button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
  font-size: 12px;
}

.trips-page .trip-edit-demo {
  padding: 10px;
}

.trips-page .trip-edit-demo strong {
  font-size: 14px;
}

.trips-page .ai-scenario-row,
.trips-page .trip-closure-actions {
  gap: 6px;
}

.trips-page .trip-closure-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trips-page .ai-scenario-row button,
.trips-page .trip-closure-actions button {
  min-height: 31px;
  padding: 0 6px;
  font-size: 11px;
}

.trips-page .trip-status-grid,
.trips-page .day-plan-card {
  margin-top: 10px;
}

.trips-page .trip-status-grid div {
  min-height: auto;
  padding: 10px;
}

.trips-page .trip-status-grid strong {
  font-size: 20px;
}

.trips-page .day-plan-card {
  padding: 14px;
}

.trips-page .day-plan-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.day-plan-summary span,
.day-plan-summary strong,
.day-plan-summary em {
  display: block;
}

.day-plan-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.day-plan-summary strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
}

.day-plan-summary em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.day-plan-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.day-plan-summary dl div {
  min-width: 0;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.day-plan-summary dt,
.day-plan-summary dd {
  margin: 0;
}

.day-plan-summary dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.day-plan-summary dd {
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.day-plan-details {
  margin-top: 8px;
  border-radius: var(--radius-control);
  background: transparent;
}

.day-plan-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  list-style: none;
}

.day-plan-toggle::after {
  content: "查看";
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(52, 199, 89, 0.1);
  font-size: 11px;
  font-weight: 800;
}

.day-plan-details.is-open .day-plan-toggle::after {
  content: "收起";
  color: var(--muted);
  background: rgba(99, 99, 102, 0.1);
}

.day-plan-toggle span,
.day-plan-toggle strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-plan-toggle span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.day-plan-toggle strong {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.day-plan-panel .day-view-toggle {
  margin-top: 10px;
}

.trips-page .timeline-list {
  gap: 10px;
}

.trips-page .memory-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 9px 10px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.memory-summary-card span,
.memory-summary-card strong,
.memory-summary-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-summary-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.memory-summary-card strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.memory-summary-card em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.memory-summary-card button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

.recommendation-memory-detail {
  box-shadow: none;
}

.recommendation-memory-detail .event-signal-grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}

.recommendation-memory-detail p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.poi-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}

.poi-hero .saved-thumb {
  width: 96px;
  height: 96px;
  border-radius: 20px;
}

.poi-hero button {
  min-height: 42px;
  color: var(--white);
  background: var(--primary);
}

.poi-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.poi-actions button {
  min-height: 44px;
  color: var(--text);
  background: var(--chip-bg);
}

.poi-actions button:first-child {
  color: var(--white);
  background: var(--primary);
}

.version-list {
  display: grid;
  gap: 10px;
}

.version-preview {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.version-preview[hidden] {
  display: none;
}

.version-preview-empty,
.version-preview-head,
.version-compare article {
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.version-preview-empty span,
.version-preview-head span,
.version-compare span,
.version-preview-head em,
.version-compare em {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.version-preview-empty strong,
.version-preview-head strong,
.version-compare strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

.version-preview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.version-preview-head button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--primary);
  font-size: 13px;
  font-weight: 850;
}

.version-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.version-compare article {
  min-width: 0;
}

.version-compare article.is-target {
  border: 1px solid rgba(88, 193, 90, 0.24);
  background: rgba(88, 193, 90, 0.08);
}

.version-compare em {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.version-compare div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 9px;
}

.version-compare small {
  min-width: 0;
  padding: 6px 4px;
  border-radius: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.version-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.version-card span,
.version-card em {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.version-card strong {
  display: block;
  margin: 4px 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.version-card button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.workflow-result {
  display: grid;
  gap: 10px;
}

.workflow-poster-preview {
  display: block;
  width: min(100%, 260px);
  aspect-ratio: 3 / 4;
  margin: 0 auto 2px;
  border: 1px solid rgba(24, 38, 46, 0.08);
  border-radius: var(--radius-control);
  background: var(--white);
  box-shadow: 0 14px 36px rgba(24, 38, 46, 0.12);
  object-fit: cover;
}

.workflow-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.workflow-card span,
.workflow-card em {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.workflow-card strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.workflow-card code {
  display: block;
  max-height: 92px;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  color: var(--text);
  background: var(--white);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.workflow-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.workflow-actions button {
  min-height: 42px;
  color: var(--white);
  background: var(--primary);
}

.event-signal-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-card);
}

.event-signal-card .section-heading {
  margin-bottom: 0;
}

.section-heading-actions {
  display: flex;
  gap: 6px;
}

.event-signal-card .section-heading button {
  min-height: 30px;
  padding: 0 10px;
  color: var(--text);
  background: var(--chip-bg);
  font-size: 12px;
}

.event-signal-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(118px, 1fr);
  grid-template-columns: none;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.event-signal-grid::-webkit-scrollbar {
  display: none;
}

.event-signal-grid div {
  min-width: 0;
  padding: 8px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.event-signal-grid span,
.event-feed-list span {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.event-signal-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.event-signal-card p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.event-signal-card #profileBasis {
  -webkit-line-clamp: 1;
}

.event-feed-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-feed-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.profile-toggle-list {
  display: grid;
  gap: 8px;
}

.profile-toggle-list label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.profile-toggle-list input {
  grid-row: span 2;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.profile-toggle-list span,
.profile-toggle-list em {
  min-width: 0;
}

.profile-toggle-list span {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.profile-toggle-list em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100% - 40px);
  padding: 12px 16px;
  border-radius: 999px;
  color: var(--white);
  background: rgba(24, 25, 28, 0.88);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Final sheet layering fix: keep modal content above the tab bar on small screens. */
.profile-drawer {
  z-index: 80;
  padding: 10px;
}

.profile-drawer-panel {
  max-height: min(86svh, calc(100% - 20px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

#aiReplaceSheet .profile-drawer-panel,
#aiAdjustSheet .profile-drawer-panel {
  max-height: min(82svh, calc(100% - 28px));
}

#aiReplaceSheet .drawer-header,
#aiAdjustSheet .drawer-header {
  margin-bottom: 10px;
}

#aiReplaceSheet .sheet-intro,
#aiAdjustSheet .sheet-intro {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.45;
}

#aiReplaceSheet .compare-grid {
  gap: 8px;
}

#aiReplaceSheet .compare-grid article {
  padding: 12px;
  border-radius: 16px;
}

#aiReplaceSheet .impact-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

#aiReplaceSheet .impact-list li {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--chip-bg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.sheet-actions {
  position: sticky;
  bottom: -1px;
  display: grid;
  gap: 10px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white) 28%);
}

* {
  box-sizing: border-box;
}

html {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  background: #111;
  color: white;
  overflow: hidden;
  overscroll-behavior: none;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button {
  border: 0;
  font: inherit;
}

button:disabled {
  cursor: wait;
  opacity: 0.68;
}

button:focus-visible {
  outline: 2px solid rgba(52, 199, 89, 0.72);
  outline-offset: 2px;
}

.phone-shell {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, 100vw);
  height: 100vh;
  max-height: 932px;
  overflow: hidden;
  background: #050608;
}

@supports not (height: 100dvh) {
  .phone-shell {
    height: 100vh;
  }
}

.splash,
.app {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.splash {
  z-index: 3;
  transition:
    opacity 560ms ease,
    transform 560ms ease,
    visibility 560ms ease;
}

.splash.instant,
.app.instant,
.profile-page.instant {
  transition: none;
}

.splash.is-hidden {
  opacity: 0;
  transform: scale(1.04);
  visibility: hidden;
}

.splash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splash-shade,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.splash-shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72));
}

.skip-button {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  color: white;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
}

.splash-copy {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 48px;
}

.splash-copy p,
.eyebrow {
  margin: 0;
  color: var(--hero-muted);
  font-size: 12px;
}

.splash-copy h1 {
  max-width: 11em;
  margin: 10px 0 0;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
}

.app {
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 720ms ease 120ms,
    transform 720ms ease 120ms;
}

.app.is-ready {
  opacity: 1;
  transform: scale(1);
}

.hero-media {
  position: absolute;
  inset: 0;
  --space-x: 0px;
  --space-y: 0px;
  --earth-x: 0px;
  --earth-y: 0px;
  overflow: hidden;
  background: #030815;
  pointer-events: none;
}

.cinematic-scene {
  position: absolute;
  inset: 0;
}

.cinematic-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}

.cinematic-earth-cover {
  display: none;
}

.cinematic-orbit {
  display: none;
}

.orbit-back {
  border-top: 1px solid rgba(240, 211, 255, 0.32);
  border-bottom: 1px solid rgba(102, 184, 255, 0.12);
  filter: blur(0.2px);
  opacity: 0.34;
  box-shadow:
    0 -2px 14px rgba(255, 207, 255, 0.18),
    0 3px 18px rgba(78, 166, 255, 0.14);
}

.orbit-front {
  clip-path: inset(48% 0 0 0);
  border-top: 2px solid rgba(255, 228, 255, 0.58);
  border-bottom: 1px solid rgba(119, 207, 255, 0.2);
  opacity: 0.42;
  box-shadow:
    0 -2px 18px rgba(255, 207, 255, 0.24),
    0 5px 24px rgba(78, 166, 255, 0.2);
}

.cinematic-earth {
  position: absolute;
  left: calc(50% + var(--earth-x));
  top: calc(38.6% + var(--earth-y));
  z-index: 2;
  display: block;
  width: min(67vw, 288px);
  max-width: 67%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter:
    drop-shadow(0 0 12px rgba(93, 190, 255, 0.48))
    drop-shadow(0 16px 32px rgba(0, 0, 0, 0.28));
}

.cinematic-shimmer,
.cinematic-vignette {
  position: absolute;
  inset: 0;
  content: "";
}

.cinematic-shimmer {
  background:
    radial-gradient(circle at 34% 18%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 66% 47%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1.9px);
  background-size:
    122px 150px,
    168px 180px,
    96px 130px;
  mix-blend-mode: screen;
  opacity: 0.3;
}

.cinematic-vignette {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 34%, rgba(6, 12, 22, 0.2) 62%, rgba(0, 0, 0, 0.66) 100%),
    radial-gradient(ellipse at 50% 74%, rgba(0, 0, 0, 0.14) 0 28%, transparent 56%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.18));
}

@media (prefers-reduced-motion: reduce) {
  .globe,
  .cinematic-bg,
  .cinematic-shimmer {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
  }
}

.top-bar {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: var(--page-gutter);
  right: var(--page-gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.icon-button,
.avatar-button,
.search-button,
.primary-action,
.bottom-nav button {
  min-height: 44px;
  border-radius: var(--radius-control);
}

.icon-button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-light);
  font-size: 14px;
}

.icon-button span {
  position: relative;
  width: 14px;
  height: 14px;
  border: 2px solid var(--brand);
  border-radius: 999px 999px 999px 0;
  transform: rotate(-45deg);
}

.icon-button span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand);
}

.avatar-button {
  position: relative;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-light);
}

.avatar-button::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid var(--brand);
  border-radius: 999px;
}

.avatar-button::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand);
  transform: rotate(-45deg) translate(10px, 10px);
}

.search-button {
  padding: 0 16px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  background: var(--surface);
  box-shadow: var(--shadow-light);
  font-size: 14px;
}

.search-field {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.search-field span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.search-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--chip-bg);
  font: inherit;
  outline: none;
}

.search-field input:focus {
  border-color: rgba(24, 119, 242, 0.45);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12);
}

.search-result-list {
  display: grid;
  gap: 8px;
}

.search-result-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  color: var(--text);
  text-align: left;
  background: var(--chip-bg);
}

.search-result-list button span {
  grid-row: span 2;
  min-width: 44px;
  padding: 4px 6px;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(24, 119, 242, 0.1);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.search-result-list button strong,
.search-result-list button em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-list button strong {
  font-size: 14px;
  font-weight: 800;
}

.search-result-list button em,
.search-empty,
.search-life-data {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.search-life-data {
  grid-column: 2;
  overflow: hidden;
  color: var(--brand);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-recommendation {
  grid-column: 2;
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(24, 119, 242, 0.1);
}

.search-result-list button .search-recommendation strong {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.search-result-list button .search-recommendation em {
  white-space: normal;
}

.search-empty {
  margin: 10px 0 0;
}

.hero-copy {
  position: absolute;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: 236px;
  transition:
    opacity 280ms ease,
    transform 280ms ease;
}

.hero-copy.is-switching {
  opacity: 0;
  transform: translateY(12px);
}

.hero-copy h2 {
  max-width: 11em;
  margin: 10px 0;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0;
}

.home-focus {
  left: 32px;
  right: 32px;
  bottom: 262px;
  text-align: center;
}

.home-focus h2 {
  max-width: 12em;
  margin: 0 auto;
  color: var(--white);
  font-size: 26px;
  white-space: nowrap;
}

.hero-copy p:last-child {
  max-width: 22em;
  margin: 0;
  color: var(--hero-muted);
  font-size: 14px;
  line-height: 1.4;
}

.eyebrow {
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
}

.composer-options button,
.trip-tools-card nav button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
}

.composer-options .active,
.trip-tools-card nav .active {
  color: var(--white);
  background: var(--brand);
}

.action-bar {
  position: absolute;
  left: 86px;
  right: 86px;
  bottom: 190px;
  display: block;
}

.primary-action {
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: 600;
}

.primary-action {
  width: 100%;
  color: var(--white);
  background: linear-gradient(135deg, #51d5ff, #3478ff 72%);
  box-shadow: 0 12px 30px rgba(52, 120, 255, 0.36);
}

.bottom-nav {
  position: absolute;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(28, 28, 30, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-light);
  z-index: 5;
}

.bottom-nav button {
  color: var(--muted);
  background: transparent;
  font-size: 13px;
}

.bottom-nav .active {
  color: var(--white);
  background: var(--brand);
}

.app.profile-mode .bottom-nav {
  border-color: rgba(28, 28, 30, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-light);
}

.app.profile-mode .bottom-nav button {
  color: var(--muted);
}

.app.profile-mode .bottom-nav .active {
  color: var(--white);
  background: var(--brand);
}

.app.content-mode .bottom-nav {
  border-color: rgba(28, 28, 30, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-light);
}

.app.content-mode .bottom-nav button {
  color: var(--muted);
}

.app.content-mode .bottom-nav .active {
  color: var(--white);
  background: var(--brand);
}

.app.content-mode .top-bar,
.app.content-mode .hero-copy,
.app.content-mode .action-bar {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.app.profile-mode .top-bar,
.app.profile-mode .hero-copy,
.app.profile-mode .action-bar {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.tab-page {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  height: 100%;
  padding: max(16px, env(safe-area-inset-top)) var(--page-gutter) 132px;
  color: var(--ink);
  background: var(--surface-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tab-page.is-visible {
  display: block;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space);
}

.page-header span {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.page-header h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.15;
}

.page-header button,
.collection-tabs button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface);
  font-weight: 600;
}

.trip-summary-card,
.trip-tools-card,
.day-plan-card,
.share-slot-card,
.saved-card,
.collection-note,
.entitlement-card,
.collection-reserve-card {
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-light);
}

.trip-summary-card,
.trip-tools-card,
.share-slot-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space);
  align-items: center;
  padding: 16px;
}

.trip-summary-card span,
.trip-summary-card em,
.trip-tools-card span,
.trip-tools-card em,
.share-slot-card span,
.saved-card span,
.saved-card em,
.entitlement-card span,
.entitlement-card em,
.collection-reserve-card span,
.collection-reserve-card em,
.collection-note span,
.timeline-list span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  line-height: 1.4;
}

.trip-summary-card strong,
.trip-tools-card strong,
.share-slot-card strong,
.saved-card strong,
.entitlement-card strong,
.collection-reserve-card strong,
.collection-note strong,
.timeline-list strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.trip-summary-card button {
  min-height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-weight: 600;
}

.trip-tools-card,
.share-slot-card {
  margin-top: var(--space);
}

.trip-tools-card {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
  padding: 14px;
}

.trip-tools-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.trip-tools-head strong {
  font-size: 16px;
}

.trip-tools-head em {
  display: none;
}

.ai-adjust-button,
.trip-edit-demo button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.trip-style-chips {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.trip-style-chips::-webkit-scrollbar {
  display: none;
}

.trip-style-chips button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
  background: var(--surface);
  font-size: 12px;
}

.trip-edit-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.trip-edit-demo > div {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.trip-edit-demo strong {
  margin-top: 0;
  font-size: 14px;
}

.drag-handle {
  width: 18px;
  height: 24px;
  border-radius: 6px;
  background:
    radial-gradient(circle, var(--muted) 1.4px, transparent 1.8px) 0 0 / 8px 8px;
  opacity: 0.48;
}

.ai-scenario-row,
.trip-closure-actions {
  display: grid;
  gap: 6px;
}

.ai-scenario-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trip-closure-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-scenario-row button,
.trip-closure-actions button {
  min-height: 31px;
  padding: 0 6px;
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
}

.trip-closure-actions button {
  color: var(--muted);
  background: var(--surface-soft);
}

.share-slot-card button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
}

.trip-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-top: 10px;
  border-radius: var(--radius-card);
  background: rgba(28, 28, 30, 0.06);
  box-shadow: var(--shadow-light);
}

.trip-status-grid div {
  padding: 10px;
  text-align: center;
  background: var(--white);
}

.trip-status-grid strong {
  display: block;
  color: var(--brand);
  font-size: 20px;
  line-height: 1.1;
}

.trip-status-grid span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.day-plan-card {
  margin-top: 10px;
  padding: 14px;
}

.timeline-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trip-compact-details {
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.trip-compact-details summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  padding: 0 11px;
  cursor: pointer;
  list-style: none;
}

.trip-compact-details summary::-webkit-details-marker {
  display: none;
}

.trip-compact-details summary::after {
  content: "展开";
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.trip-compact-details[open] summary::after {
  content: "收起";
}

.trip-compact-details summary span,
.trip-compact-details summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-compact-details summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.trip-compact-details summary strong {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.trip-compact-details .gateway-status-stack {
  margin: 0;
  padding: 0 8px 8px;
}

.settings-system-status {
  margin-bottom: 12px;
}

.settings-system-status .gateway-status-stack {
  gap: 8px;
}

.timeline-list li {
  display: grid;
  grid-template-columns: 52px 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.timeline-list time {
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
}

.plan-thumb {
  display: block;
  width: 72px;
  height: 58px;
  overflow: hidden;
  border-radius: var(--radius-small);
  background-color: var(--surface);
  background-position: center;
  background-size: cover;
}

.timeline-mini-point {
  grid-template-columns: 52px 18px minmax(0, 1fr);
}

.timeline-mini-point .plan-thumb {
  justify-self: center;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(52, 199, 89, 0.22);
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.08);
}

.timeline-mini-point strong {
  font-size: 13px;
}

.timeline-mini-point span,
.timeline-mini-point em {
  font-size: 11px;
}

.station-thumb {
  background-image: url("https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?auto=format&fit=crop&w=240&q=82");
}

.lunch-thumb {
  background-image: url("https://images.unsplash.com/photo-1617196034183-421b4917c92d?auto=format&fit=crop&w=240&q=82");
}

.palace-thumb {
  background-image: url("https://images.unsplash.com/photo-1528360983277-13d401cdc186?auto=format&fit=crop&w=240&q=82");
}

.map-drawer {
  margin-top: 14px;
}

.map-drawer-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.map-drawer-toggle::after {
  content: "展开";
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(52, 199, 89, 0.1);
  font-size: 12px;
  font-weight: 700;
}

.map-drawer.is-open .map-drawer-toggle::after {
  content: "收起";
  color: var(--muted);
  background: rgba(99, 99, 102, 0.1);
}

.map-drawer-toggle span,
.map-drawer-toggle em {
  display: block;
}

.map-drawer-toggle span {
  font-size: 14px;
  font-weight: 700;
}

.map-drawer-toggle em {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-map-preview {
  position: relative;
  margin-top: 12px;
  height: 154px;
  overflow: hidden;
  border-radius: var(--radius-control);
  background:
    radial-gradient(circle at 24% 74%, rgba(52, 199, 89, 0.18) 0 8px, transparent 9px),
    radial-gradient(circle at 70% 26%, rgba(52, 199, 89, 0.12) 0 10px, transparent 11px),
    linear-gradient(rgba(28, 28, 30, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 28, 30, 0.045) 1px, transparent 1px),
    linear-gradient(145deg, #f8f8fa 0%, #eef7f1 100%);
  background-size:
    auto,
    auto,
    28px 28px,
    28px 28px,
    auto;
}

.route-map-preview::before,
.route-map-preview::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  height: 54px;
  border: 2px solid rgba(99, 99, 102, 0.14);
  border-left: 0;
  border-right: 0;
  border-radius: 50%;
  transform: rotate(-14deg);
}

.route-map-preview::before {
  top: 18px;
}

.route-map-preview::after {
  bottom: 16px;
  transform: rotate(-11deg);
}

.map-route-line {
  position: absolute;
  left: 23%;
  top: 69%;
  width: 53%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), rgba(52, 199, 89, 0.32));
  transform: rotate(-27deg);
  transform-origin: left center;
  box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.08);
}

.map-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 3px solid var(--white);
  border-radius: 999px;
  color: var(--white);
  background: var(--brand);
  box-shadow: 0 6px 18px rgba(52, 199, 89, 0.28);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.map-pin-start {
  left: 18%;
  bottom: 22%;
}

.map-pin-mid {
  left: 49%;
  top: 42%;
}

.map-pin-end {
  right: 18%;
  top: 20%;
}

.map-route-meta {
  margin-top: 12px;
}

.map-route-meta strong,
.map-route-meta span {
  display: block;
}

.map-route-meta strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.map-route-meta span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.external-nav-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.external-nav-row button {
  min-height: 36px;
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface);
  font-size: 12px;
  font-weight: 800;
}

.external-nav-row button:first-child {
  color: var(--white);
  background: var(--brand);
}

.collection-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space);
  overflow-x: auto;
}

.collection-tabs button {
  flex: 0 0 auto;
  color: var(--muted);
}

.collection-tabs .active {
  color: var(--white);
  background: var(--brand);
}

.saved-list {
  display: grid;
  gap: var(--space);
}

.saved-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.saved-card strong {
  margin-top: 0;
}

.saved-card em {
  margin-top: 7px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}

.saved-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-small);
  background-position: center;
  background-size: cover;
}

.tokyo-thumb {
  background-image: url("https://images.unsplash.com/photo-1542051841857-5f90071e7989?auto=format&fit=crop&w=200&q=80");
}

.sanya-thumb {
  background-image: url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=200&q=80");
}

.cafe-thumb {
  background-image: url("https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=200&q=80");
}

.collection-note {
  margin-top: var(--space);
  padding: 16px;
}

.collection-reserve-card {
  margin-top: var(--space);
  padding: 16px;
}

.entitlement-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: var(--space);
  padding: 16px;
}

.quota-card {
  margin-top: 0;
  margin-bottom: var(--space);
}

.entitlement-card button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-size: 12px;
  font-weight: 600;
}

.entitlement-actions {
  display: grid;
  gap: 8px;
}

.entitlement-actions button:last-child {
  color: var(--brand);
  background: rgba(52, 199, 89, 0.1);
}

.entitlement-preview-card {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: rgba(88, 193, 90, 0.1);
}

.entitlement-preview-card span,
.entitlement-preview-card em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.entitlement-preview-card strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.entitlement-track-grid {
  display: grid;
  gap: 10px;
}

.entitlement-track-grid .workflow-card {
  gap: 8px;
}

.entitlement-track-grid button {
  min-height: 36px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-weight: 700;
}

.collection-note strong,
.entitlement-card strong,
.collection-reserve-card strong {
  margin-top: 0;
}

.collection-note span,
.entitlement-card em,
.collection-reserve-card em {
  margin-top: 7px;
}

.trip-composer {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(8px);
}

.trip-composer[hidden] {
  display: none;
}

.composer-panel {
  position: relative;
  width: 100%;
  max-height: calc(100% - 32px);
  padding: 16px;
  overflow-y: auto;
  border-radius: var(--radius-card);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-light);
}

.composer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  color: var(--muted);
  background: var(--surface);
  font-size: 20px;
  line-height: 1;
}

.composer-panel > span {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.composer-panel h2 {
  margin: 6px 44px 6px 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
}

.composer-trial-line {
  margin: 0 44px 14px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.guide-import-box {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(52, 199, 89, 0.18);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(52, 199, 89, 0.08), rgba(255, 255, 255, 0.96));
}

.guide-import-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.guide-import-head div,
.guide-import-summary,
.guide-import-item {
  display: grid;
  gap: 4px;
}

.guide-import-head span,
.guide-import-summary span,
.guide-import-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.guide-import-head strong,
.guide-import-summary strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.guide-import-head button {
  min-height: 32px;
  padding: 0 12px;
  color: var(--brand);
  background: rgba(52, 199, 89, 0.12);
  font-size: 12px;
  font-weight: 800;
}

.guide-source-options {
  margin-bottom: 0;
}

.guide-import-field {
  margin-bottom: 0;
}

.guide-import-field textarea {
  width: 100%;
  min-height: 116px;
  border: 0;
  border-radius: var(--radius-control);
  padding: 12px 14px;
  resize: vertical;
  color: var(--text);
  background: var(--chip-bg);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  outline: none;
}

.guide-import-confirm {
  width: 100%;
  min-height: 42px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.guide-import-result {
  display: grid;
  gap: 10px;
}

.guide-import-summary {
  padding: 10px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.82);
}

.guide-import-summary em,
.guide-import-item em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.guide-import-items {
  display: grid;
  gap: 8px;
}

.guide-import-item {
  padding: 10px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.74);
}

.guide-import-item input {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: var(--radius-small);
  padding: 0 10px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  outline: none;
}

.composer-group {
  margin-bottom: 12px;
}

.composer-group > span {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.composer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.composer-options button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
}

.composer-options span {
  margin-left: 5px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.72;
}

.composer-confirm {
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-size: 16px;
  font-weight: 600;
}

.unlock-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
}

.unlock-actions button {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
}

.profile-page {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: var(--ink);
  background: var(--surface-soft);
  transform: translateY(102%);
  transition:
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 260ms ease;
  opacity: 0;
  overflow-y: auto;
  padding-bottom: 132px;
}

.profile-page.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.profile-hero {
  position: relative;
  min-height: auto;
  margin: max(16px, env(safe-area-inset-top)) var(--page-gutter) 0;
  padding: 16px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 242, 247, 0.88)),
    var(--white);
  box-shadow: var(--shadow-light);
}

.profile-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.profile-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.profile-toolbar button {
  min-width: 46px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--muted);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
}

.profile-toolbar .support-mini {
  color: var(--white);
  background: var(--brand);
}

.profile-toolbar .info-check-mini {
  color: var(--brand);
  background: rgba(52, 199, 89, 0.1);
}

.provider-status-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-light);
}

.provider-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.provider-status-pill {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius-control);
  background: rgba(142, 142, 147, 0.12);
}

.provider-status-pill.is-ready {
  background: rgba(88, 193, 90, 0.12);
}

.provider-status-pill.is-warning {
  background: rgba(255, 204, 0, 0.16);
}

.provider-status-pill.is-fallback {
  background: rgba(142, 142, 147, 0.14);
}

.provider-status-pill span,
.provider-status-card p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.provider-status-pill strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-status-card p {
  margin: 0;
  font-size: 12px;
}

.profile-drawer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.profile-drawer[hidden] {
  display: none;
}

.profile-drawer-panel {
  width: 100%;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  padding: 16px;
  border-radius: var(--radius-card);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-light);
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.drawer-header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.drawer-header h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.drawer-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  color: var(--muted);
  background: var(--surface);
  font-size: 20px;
  line-height: 1;
}

.settings-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: rgba(28, 28, 30, 0.06);
}

.settings-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-height: 62px;
  padding: 12px 14px;
  border-radius: 0;
  text-align: left;
  background: var(--surface-soft);
}

.settings-list span,
.info-check-field span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.settings-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.road-assistant-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin: 12px 0;
  padding: 14px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px rgba(28, 28, 30, 0.06);
}

.road-assistant-card span,
.road-assistant-card strong,
.road-assistant-card em {
  display: block;
}

.road-assistant-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.road-assistant-card strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
}

.road-assistant-card em {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.road-assistant-card ul {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.road-realtime-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(28, 28, 30, 0.06);
}

.road-realtime-panel strong {
  font-size: 14px;
}

.road-realtime-panel ul {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-left: 16px;
}

.mini-refresh {
  min-width: 50px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  font-size: 12px;
  font-weight: 850;
}

.settings-toggle {
  min-width: 58px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--white);
  background: var(--brand);
  font-size: 13px;
  font-weight: 850;
}

.settings-toggle:not(.is-on) {
  color: var(--muted);
  background: var(--surface);
}

.road-assistant-demo {
  grid-column: 1 / -1;
  min-height: 40px;
  border-radius: var(--radius-control);
  font-weight: 800;
}

.lock-arrival-drawer {
  align-items: center;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.74)),
    radial-gradient(circle at 50% 18%, rgba(88, 193, 90, 0.24), transparent 38%);
}

.lock-arrival-panel {
  width: min(100%, 320px);
  padding: 18px;
  border-radius: 30px;
  color: var(--white);
  background: rgba(12, 14, 18, 0.82);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

.lock-arrival-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.78);
}

.lock-arrival-top span {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0;
}

.lock-arrival-top em {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.lock-widget-preview {
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.lock-widget-preview small,
.lock-widget-preview span,
.lock-widget-preview p {
  color: rgba(255, 255, 255, 0.78);
}

.lock-widget-preview small {
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.lock-widget-preview strong {
  display: block;
  margin-top: 6px;
  color: var(--white);
  font-size: 18px;
  font-weight: 850;
}

.lock-widget-preview span,
.lock-widget-preview p {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.arrival-feedback-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.arrival-feedback-actions button,
.lock-arrival-dismiss {
  min-height: 38px;
  border-radius: 14px;
  font-weight: 800;
}

.arrival-feedback-actions button {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
}

.lock-arrival-dismiss {
  width: 100%;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.12);
}

.info-check-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.info-check-types button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
}

.info-check-types .active {
  color: var(--white);
  background: var(--brand);
}

.info-check-field {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.info-check-field input,
.info-check-field textarea {
  width: 100%;
  border: 0;
  border-radius: var(--radius-control);
  padding: 12px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.info-check-field textarea {
  min-height: 86px;
  resize: none;
}

.info-check-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.profile-editor-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-check-actions button {
  min-height: 44px;
  border-radius: var(--radius-control);
  font-size: 15px;
  font-weight: 600;
}

.secondary-action {
  color: var(--ink);
  background: var(--surface);
}

.drawer-primary {
  color: var(--white);
  background: var(--brand);
}

.profile-identity {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border: 2px solid var(--brand);
  border-radius: 999px;
  background:
    url("https://images.unsplash.com/photo-1526772662000-3f88f10405ff?auto=format&fit=crop&w=300&q=80");
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-light);
}

.profile-identity p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.profile-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.profile-identity .profile-vip-label,
.profile-identity .profile-star-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.profile-identity .profile-vip-label {
  padding: 0 9px;
  color: var(--muted);
  background: #e5e5ea;
}

.profile-page.is-vip .profile-vip-label {
  color: var(--white);
  background: var(--brand);
}

.profile-identity .profile-star-label {
  gap: 5px;
  padding: 0 8px 0 6px;
  color: rgb(var(--tier-rgb));
  background: rgba(var(--tier-rgb), 0.12);
}

.profile-star-label i {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, var(--white) 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 63%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 43% 52%, rgba(var(--tier-rgb), 0.9) 0 2px, transparent 3px),
    linear-gradient(145deg, #081426, var(--tier-deep));
  box-shadow:
    inset -3px -4px 5px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(var(--tier-rgb), 0.16);
}

.profile-star-label i::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  width: 16px;
  height: 5px;
  border-top: 1px solid rgba(var(--tier-rgb), 0.72);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.profile-identity h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.profile-identity span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
}

.profile-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 16px;
  border-radius: var(--radius-control);
  background: var(--surface);
}

.profile-metrics div {
  min-width: 0;
  padding: 12px 8px;
  text-align: center;
  background: transparent;
}

.profile-metrics div + div {
  border-left: 1px solid rgba(28, 28, 30, 0.06);
}

.profile-metrics strong {
  display: block;
  color: var(--brand);
  font-size: 24px;
  line-height: 1.1;
}

.profile-metrics span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.profile-sheet {
  position: relative;
  margin-top: 16px;
  padding: 0 var(--page-gutter) 136px;
  color: var(--ink);
  background: transparent;
}

.growth-banner,
.vip-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: var(--space);
  padding: 16px;
  border-radius: var(--radius-card);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-light);
}

.profile-page.is-vip .locked-only {
  display: none;
}

.growth-banner span,
.vip-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.growth-banner strong,
.vip-card strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.growth-banner button,
.vip-card button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-size: 14px;
  font-weight: 600;
}

.section-heading span {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.trip-line strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.trip-line span {
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.25;
}

.current-trip {
  margin-top: var(--space);
}

.star-map-milestone {
  margin-top: var(--space);
}

.star-map-milestone .section-heading button {
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}

.star-tier {
  --tier-rgb: 52, 199, 89;
  --tier-deep: #10263c;
  --tier-soft: rgba(52, 199, 89, 0.12);
  --tier-line: rgba(52, 199, 89, 0.28);
}

.tier-dawn {
  --tier-rgb: 52, 199, 89;
  --tier-deep: #15342b;
  --tier-soft: rgba(52, 199, 89, 0.12);
  --tier-line: rgba(52, 199, 89, 0.32);
}

.tier-cloud {
  --tier-rgb: 20, 160, 198;
  --tier-deep: #12324a;
  --tier-soft: rgba(20, 160, 198, 0.12);
  --tier-line: rgba(20, 160, 198, 0.32);
}

.tier-silver {
  --tier-rgb: 80, 122, 224;
  --tier-deep: #17285a;
  --tier-soft: rgba(80, 122, 224, 0.12);
  --tier-line: rgba(80, 122, 224, 0.32);
}

.tier-galaxy {
  --tier-rgb: 130, 92, 238;
  --tier-deep: #251a56;
  --tier-soft: rgba(130, 92, 238, 0.12);
  --tier-line: rgba(130, 92, 238, 0.34);
}

.tier-celestial {
  --tier-rgb: 210, 168, 82;
  --tier-deep: #3f2d12;
  --tier-soft: rgba(210, 168, 82, 0.14);
  --tier-line: rgba(210, 168, 82, 0.36);
}

.star-map-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 132px;
  padding: 16px;
  overflow: hidden;
  border-radius: var(--radius-card);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-light);
}

.star-map-art {
  position: relative;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 24%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 58%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 66%, rgba(255, 255, 255, 0.62) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 38%, rgba(255, 255, 255, 0.2), transparent 22%),
    radial-gradient(circle at 42% 45%, rgba(var(--tier-rgb), 0.78) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 70%, rgba(var(--tier-rgb), 0.3), transparent 30%),
    linear-gradient(145deg, #071425 0%, #0c1d33 46%, var(--tier-deep) 100%);
  box-shadow:
    inset -14px -18px 26px rgba(0, 0, 0, 0.36),
    inset 10px 9px 22px rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(var(--tier-rgb), 0.18),
    0 0 0 1px rgba(var(--tier-rgb), 0.2);
}

.star-map-art::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(120deg, transparent 0 38%, rgba(255, 255, 255, 0.08) 39% 41%, transparent 42%),
    radial-gradient(circle at 34% 58%, rgba(var(--tier-rgb), 0.18), transparent 28%);
}

.star-map-art::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 36px;
  width: 70px;
  height: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  border-bottom: 1px solid var(--tier-line);
  border-radius: 50%;
  transform: rotate(-20deg);
}

.star-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(121, 210, 255, 0.34);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
}

.orbit-one {
  width: 92px;
  height: 34px;
}

.orbit-two {
  width: 70px;
  height: 54px;
  border-color: rgba(var(--tier-rgb), 0.28);
  transform: translate(-50%, -50%) rotate(38deg);
}

.star-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: rgb(var(--tier-rgb));
  box-shadow: 0 0 0 5px rgba(var(--tier-rgb), 0.16);
}

.node-one {
  left: 24px;
  top: 33px;
}

.node-two {
  right: 20px;
  top: 24px;
}

.node-three {
  right: 25px;
  bottom: 24px;
}

.node-four {
  left: 28px;
  bottom: 20px;
}

.star-map-copy {
  min-width: 0;
}

.star-map-copy span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.star-map-copy strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.star-map-copy em {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.star-progress {
  height: 7px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface);
}

.star-progress i {
  display: block;
  width: 80%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--tier-rgb)), rgba(var(--tier-rgb), 0.58));
}

.star-map-copy small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.travel-footprint {
  margin-top: var(--space);
}

.retention-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space);
  margin-top: var(--space);
}

.retention-grid button {
  min-height: 88px;
  padding: 16px;
  border-radius: var(--radius-card);
  text-align: left;
  background: var(--white);
  box-shadow: var(--shadow-light);
}

.retention-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.retention-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-heading span {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.section-heading button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
}

.travel-footprint .section-heading button {
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}

.footprint-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 112px;
  padding: 16px;
  overflow: hidden;
  border-radius: var(--radius-card);
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-light);
  width: 100%;
  text-align: left;
}

.compact-star-card {
  grid-template-columns: 84px minmax(0, 1fr);
  min-height: 120px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(var(--tier-rgb), 0.14);
  background:
    radial-gradient(circle at 17% 34%, rgba(var(--tier-rgb), 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 248, 250, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 26px rgba(28, 28, 30, 0.05);
}

.compact-star-card .star-map-art {
  width: 84px;
  height: 84px;
}

.tier-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 10px;
}

.tier-section-head strong,
.tier-section-head span {
  display: block;
}

.tier-section-head strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.tier-section-head span {
  max-width: 190px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.nebula-tier-list {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.tier-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 60px;
  padding: 10px 11px;
  overflow: hidden;
  border: 1px solid rgba(28, 28, 30, 0.045);
  border-radius: var(--radius-control);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 248, 250, 0.86)),
    var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.tier-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, rgba(var(--tier-rgb), 0.64), transparent);
  opacity: 0.7;
}

.tier-row.is-current {
  border-color: rgba(var(--tier-rgb), 0.2);
  background:
    radial-gradient(circle at 14% 50%, rgba(var(--tier-rgb), 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), var(--tier-soft));
}

.tier-row > i {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.96) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 55%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 56% 24%, rgba(255, 255, 255, 0.18), transparent 22%),
    radial-gradient(circle at 48% 50%, rgba(var(--tier-rgb), 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 72%, rgba(var(--tier-rgb), 0.34), transparent 28%),
    linear-gradient(145deg, #071425, var(--tier-deep));
  box-shadow:
    inset -8px -10px 14px rgba(0, 0, 0, 0.34),
    inset 5px 5px 10px rgba(255, 255, 255, 0.08),
    0 0 0 3px rgba(var(--tier-rgb), 0.1);
}

.tier-row > i::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 15px;
  width: 50px;
  height: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid var(--tier-line);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.tier-row strong,
.tier-row span,
.tier-row em {
  display: block;
}

.tier-row strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.tier-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.tier-row em {
  min-width: 46px;
  padding: 4px 7px;
  border-radius: 999px;
  color: rgb(var(--tier-rgb));
  background: rgba(var(--tier-rgb), 0.09);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.tier-row:not(.is-current) em {
  color: var(--muted);
  background: var(--surface);
}

.city-record-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: rgba(28, 28, 30, 0.06);
}

.city-record-list div {
  padding: 13px 14px;
  background: var(--white);
}

.city-record-list strong,
.scenic-api-slot strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.city-record-list span,
.scenic-api-slot em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.4;
}

.scenic-api-slot {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-control);
  background: rgba(52, 199, 89, 0.08);
}

.scenic-api-slot span {
  display: block;
  margin-bottom: 6px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
}

.footprint-orb {
  position: relative;
  z-index: 1;
  width: 64px;
  min-height: 64px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: var(--radius-control);
  background: transparent;
}

.globe {
  position: relative;
  left: auto;
  top: auto;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.42), transparent 13%),
    url("./assets/earth-rotating.jpg");
  background-position:
    0 0,
    0 center;
  background-size:
    auto,
    126px 126px;
  box-shadow:
    inset -14px -10px 18px rgba(0, 0, 0, 0.38),
    inset 9px 8px 13px rgba(255, 255, 255, 0.16);
  transform: translateZ(0);
  animation: globeSpin 12s linear infinite;
  will-change: background-position;
}

.globe::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 33% 28%, rgba(255, 255, 255, 0.28), transparent 20%),
    linear-gradient(90deg, transparent 54%, rgba(0, 0, 0, 0.38));
  border-radius: 999px;
  pointer-events: none;
}

.globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 48% 28%, rgba(255, 255, 255, 0.22) 0 7%, transparent 8%),
    radial-gradient(circle at 36% 56%, rgba(255, 255, 255, 0.16) 0 8%, transparent 9%);
  mix-blend-mode: screen;
  opacity: 0.75;
  pointer-events: none;
}

.globe-shadow {
  display: none;
}

.globe-pin {
  display: none;
}

@keyframes globeSpin {
  0% {
    background-position:
      0 0,
      0 center;
  }

  100% {
    background-position:
      0 0,
      126px center;
  }
}

.pin-shanghai {
  right: 22px;
  top: 31px;
}

.pin-tokyo {
  right: 12px;
  top: 22px;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(52, 199, 89, 0.16);
}

.pin-chiangmai {
  left: 21px;
  bottom: 23px;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(52, 199, 89, 0.16);
}

.footprint-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  align-self: center;
}

.footprint-copy strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
}

.footprint-copy span {
  display: block;
  max-width: 13em;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.footprint-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.footprint-tags em {
  padding: 6px 8px;
  border-radius: var(--radius-control);
  color: var(--muted);
  background: var(--surface);
  font-size: 12px;
  font-style: normal;
  backdrop-filter: none;
}

.photo-ai-card {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: var(--space);
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-light);
}

.photo-preview {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-small);
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(52, 199, 89, 0.78), rgba(28, 28, 30, 0.28)),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=240&q=80");
  background-position: center;
  background-size: cover;
  font-weight: 800;
}

.photo-preview.has-image span {
  display: none;
}

.photo-copy {
  min-width: 0;
}

.photo-copy span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.photo-copy strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-copy em {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-upload {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 38px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-size: 14px;
  font-weight: 600;
}

.trip-line {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-light);
}

.trip-thumb {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-small);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18)),
    url("https://images.unsplash.com/photo-1542051841857-5f90071e7989?auto=format&fit=crop&w=200&q=80");
  background-position: center;
  background-size: cover;
}

.trip-line b {
  padding: 8px 12px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-size: 14px;
  font-weight: 600;
}

@media (max-height: 760px) {
  .phone-shell {
    min-height: 640px;
  }

  .hero-copy {
    bottom: 210px;
  }

  .hero-copy h2 {
    font-size: 30px;
  }

  .home-focus h2 {
    font-size: 26px;
  }

  .action-bar {
    bottom: 146px;
  }

  .profile-hero {
    min-height: 296px;
  }

  .profile-identity {
    margin-top: 46px;
  }

  .footprint-card {
    grid-template-columns: 64px 1fr;
  }

  .footprint-orb {
    min-height: 64px;
  }

  .globe {
    width: 64px;
    height: 64px;
  }
}

/* Final IA refresh overrides */
.phone-shell {
  height: 100svh;
  max-height: none;
}

.bottom-nav {
  z-index: 30;
  bottom: max(12px, env(safe-area-inset-bottom));
  padding: 6px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);
}

.bottom-nav button {
  min-height: 46px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 700;
}

.tab-page,
.profile-page {
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.profile-sheet {
  padding-bottom: calc(136px + env(safe-area-inset-bottom));
}

.primary-action,
.composer-confirm,
.drawer-primary {
  min-height: 56px;
  border-radius: 20px;
  color: var(--white);
  background: var(--primary);
  font-weight: 800;
}

.primary-action {
  background: var(--primary);
  box-shadow: 0 16px 32px rgba(88, 193, 90, 0.28);
}

.home-focus {
  bottom: 258px;
}

.home-focus h2 {
  max-width: 12em;
  white-space: normal;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.12;
}

.home-focus p {
  max-width: 21em;
  margin: 12px auto 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 15px;
  line-height: 1.45;
}

.action-bar {
  left: 68px;
  right: 68px;
  bottom: 180px;
}

.discover-panel {
  position: absolute;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: none;
  gap: 12px;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.app.content-mode .discover-panel,
.app.profile-mode .discover-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.quick-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.quick-chip-row button,
.template-card button,
.saved-actions button,
.day-view-toggle button,
.poi-actions button,
.profile-link-list button {
  border-radius: var(--radius-control);
  font-weight: 700;
}

.quick-chip-row button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
}

.template-section {
  display: grid;
  gap: 8px;
}

.template-section .section-heading {
  margin-bottom: 0;
}

.template-section .section-heading span {
  color: var(--white);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

.template-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.template-card strong,
.template-card span {
  display: block;
}

.template-card strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

.template-card span {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.3;
}

.template-card button {
  min-height: 34px;
  padding: 0 13px;
  color: var(--white);
  background: var(--primary);
}

.trip-summary-card,
.trip-tools-card,
.day-plan-card,
.share-slot-card,
.saved-card,
.collection-note,
.photo-ai-card,
.current-trip .trip-line,
.travel-footprint .footprint-card,
.profile-link-list {
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.trip-summary-card,
.trip-tools-card,
.day-plan-card,
.share-slot-card {
  padding: 20px;
}

.trip-summary-card small {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.trip-tools-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.trip-tools-card strong,
.day-plan-card .section-heading span,
.page-header h2 {
  font-weight: 800;
}

.ai-scenario-row,
.trip-closure-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trip-closure-actions button,
.ai-scenario-row button {
  min-height: 42px;
  background: var(--chip-bg);
  color: var(--text);
}

.trip-status-grid {
  overflow: hidden;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.trip-status-grid div {
  min-height: 74px;
}

.day-view-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 4px;
  border-radius: 18px;
  background: var(--chip-bg);
}

.day-view-toggle button {
  min-height: 38px;
  color: var(--text-secondary);
  background: transparent;
}

.day-view-toggle .active {
  color: var(--white);
  background: var(--primary);
}

.timeline-list li {
  cursor: pointer;
  border-radius: 20px;
}

.timeline-list em {
  display: flex;
  gap: 6px;
  margin-top: 7px;
  color: var(--primary-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.day-map-panel {
  margin-top: 0;
}

.saved-card {
  align-items: start;
}

.saved-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.saved-actions button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--text);
  background: var(--chip-bg);
  font-size: 12px;
}

.saved-actions button:first-child {
  color: var(--white);
  background: var(--primary);
}

.collection-note {
  margin-top: var(--space);
  padding: 14px 16px;
  color: var(--text-secondary);
}

.collection-note summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 800;
}

.collection-note span {
  display: block;
  margin-top: 8px;
}

.composer-field {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.composer-field span {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.composer-field input {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0 14px;
  color: var(--text);
  background: var(--chip-bg);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.profile-link-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: var(--space);
  padding: 12px;
}

.profile-link-list button {
  min-height: 44px;
  color: var(--text);
  background: var(--chip-bg);
}

.sheet-intro {
  margin: -4px 0 14px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.compare-grid,
.adjust-impact-grid,
.poi-detail-list {
  display: grid;
  gap: 10px;
}

.compare-grid article,
.adjust-impact-grid div,
.poi-detail-list div,
.share-preview-card {
  padding: 14px;
  border-radius: 18px;
  background: var(--bg);
}

.compare-grid .recommended {
  border: 1px solid rgba(88, 193, 90, 0.22);
  background: rgba(88, 193, 90, 0.08);
}

.recommendation-explain {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(24, 119, 242, 0.14);
  border-radius: 14px;
  background: rgba(24, 119, 242, 0.07);
}

.compare-grid span,
.compare-grid strong,
.compare-grid em,
.adjust-impact-grid span,
.adjust-impact-grid strong,
.poi-detail-list span,
.poi-detail-list strong,
.recommendation-explain span,
.recommendation-explain strong,
.recommendation-explain em,
.share-preview-card span,
.share-preview-card strong,
.share-preview-card em {
  display: block;
}

.compare-grid span,
.adjust-impact-grid span,
.poi-detail-list span,
.recommendation-explain span,
.share-preview-card span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.compare-grid strong,
.adjust-impact-grid strong,
.poi-detail-list strong,
.recommendation-explain strong,
.share-preview-card strong {
  margin-top: 5px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.compare-grid em,
.recommendation-explain em,
.share-preview-card em,
.share-preview-card p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.recommendation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.recommendation-tags small {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--primary);
  background: rgba(24, 119, 242, 0.12);
  font-size: 11px;
  font-weight: 800;
}

.impact-list {
  margin: 14px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.impact-list li {
  color: var(--text-secondary);
  font-size: 14px;
}

.sheet-actions,
.info-check-actions {
  grid-template-columns: 1fr 1fr;
}

.poi-hero {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}

.poi-hero .saved-thumb {
  width: 96px;
  height: 96px;
  border-radius: 20px;
}

.poi-hero button {
  min-height: 42px;
  color: var(--white);
  background: var(--primary);
}

.poi-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.poi-actions button {
  min-height: 44px;
  color: var(--text);
  background: var(--chip-bg);
}

.poi-actions button:first-child {
  color: var(--white);
  background: var(--primary);
}

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100% - 40px);
  padding: 12px 16px;
  border-radius: 999px;
  color: var(--white);
  background: rgba(24, 25, 28, 0.88);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Final sheet layering fix: keep modal content above the tab bar on small screens. */
.profile-drawer {
  z-index: 80;
  padding: 10px;
}

.profile-drawer-panel {
  max-height: min(86svh, calc(100% - 20px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

#aiReplaceSheet .profile-drawer-panel,
#aiAdjustSheet .profile-drawer-panel {
  max-height: min(82svh, calc(100% - 28px));
}

#aiReplaceSheet .drawer-header,
#aiAdjustSheet .drawer-header {
  margin-bottom: 10px;
}

#aiReplaceSheet .sheet-intro,
#aiAdjustSheet .sheet-intro {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.45;
}

#aiReplaceSheet .compare-grid {
  gap: 8px;
}

#aiReplaceSheet .compare-grid article {
  padding: 12px;
  border-radius: 16px;
}

#aiReplaceSheet .impact-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

#aiReplaceSheet .impact-list li {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--chip-bg);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.sheet-actions {
  position: sticky;
  bottom: -1px;
  display: grid;
  gap: 10px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white) 28%);
}

/* Current trip is a single compact card: plan state plus next stop actions. */
.trips-page .current-trip-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
}

.trips-page .current-trip-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.trips-page .current-trip-main button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-control);
  color: var(--white);
  background: var(--brand);
  font-weight: 800;
  white-space: nowrap;
}

.trips-page .current-trip-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.trips-page .current-trip-next span,
.trips-page .current-trip-next strong,
.trips-page .current-trip-next em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trips-page .current-trip-next span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.trips-page .current-trip-next strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.trips-page .current-trip-next em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
}

.trips-page .current-trip-next .next-step-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(58px, 1fr));
  gap: 6px;
  min-width: 128px;
}

.trips-page .current-trip-next .next-step-actions button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 800;
}

/* Trips page layout correction: avoid clipped controls and detached status blocks. */
.trips-page .current-trip-card {
  gap: 9px;
}

.trips-page .current-trip-next {
  grid-template-columns: 1fr;
}

.trips-page .current-trip-next .next-step-actions {
  min-width: 0;
  width: 100%;
}

.trips-page .current-trip-next strong,
.trips-page .current-trip-next em {
  white-space: normal;
}

.trips-page .current-trip-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.trips-page .current-trip-metrics div {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 12px;
  background: var(--surface-soft);
  text-align: center;
}

.trips-page .current-trip-metrics strong,
.trips-page .current-trip-metrics span {
  display: block;
}

.trips-page .current-trip-metrics strong {
  color: var(--brand);
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
}

.trips-page .current-trip-metrics span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.trips-page .ai-tools-toggle,
.trips-page .day-plan-toggle {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.trips-page .ai-tools-toggle::after,
.trips-page .day-plan-toggle::after {
  justify-self: end;
}

.trips-page .trip-style-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
  padding-bottom: 0;
}

.trips-page .trip-style-chips button {
  width: 100%;
  padding: 0 6px;
}

.trips-page .trip-closure-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trips-page .trip-status-grid {
  display: none;
}

.trips-page .compact-share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 0;
  padding: 10px;
  border-radius: 16px;
  background: var(--surface-soft);
  box-shadow: none;
}

.trips-page .compact-share-row span,
.trips-page .compact-share-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trips-page .compact-share-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}

.trips-page .compact-share-row strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
}

.trips-page .compact-share-row button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 16px;
  color: var(--white);
  background: var(--brand);
  font-size: 13px;
  font-weight: 850;
}

/* Trips final polish: one visual system for AI tools, memory, and day plan modules. */
.trips-page .trip-tools-card,
.trips-page .day-plan-card,
.trips-page .current-trip-card {
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.trips-page .trip-tools-card,
.trips-page .day-plan-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.trips-page .trip-tools-head,
.trips-page .day-plan-card .section-heading,
.trips-page .current-trip-main {
  min-height: 42px;
}

.trips-page .trip-tools-head > div,
.trips-page .day-plan-card .section-heading span,
.trips-page .current-trip-main > div {
  min-width: 0;
}

.trips-page .trip-tools-head span,
.trips-page .day-plan-card .section-heading span,
.trips-page .current-trip-main span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.trips-page .trip-tools-head strong,
.trips-page .day-plan-summary strong,
.trips-page .current-trip-main strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
}

.trips-page .ai-adjust-button,
.trips-page .day-plan-card .section-heading button,
.trips-page .current-trip-main button,
.trips-page .memory-summary-card button,
.trips-page .current-trip-next .next-step-actions button {
  min-height: 38px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 850;
}

.trips-page .ai-adjust-button,
.trips-page .current-trip-main button,
.trips-page .current-trip-next .next-step-actions button:first-child,
.trips-page .memory-summary-card button {
  color: var(--white);
  background: var(--brand);
}

.trips-page .ai-tools-toggle,
.trips-page .memory-summary-card,
.trips-page .day-plan-summary,
.trips-page .day-plan-toggle,
.trips-page .current-trip-next {
  border-radius: 16px;
  background: var(--surface-soft);
}

.trips-page .ai-tools-toggle,
.trips-page .day-plan-toggle,
.trips-page .memory-summary-card {
  min-height: 46px;
  padding: 8px 10px;
}

.trips-page .ai-tools-toggle::after,
.trips-page .day-plan-toggle::after {
  min-width: 44px;
  padding: 6px 10px;
  text-align: center;
}

.trips-page .memory-summary-card {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.trips-page .memory-summary-card strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
}

.trips-page .memory-summary-card em,
.trips-page .ai-tools-toggle strong,
.trips-page .day-plan-toggle strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.trips-page .trip-style-chips,
.trips-page .ai-scenario-row,
.trips-page .trip-closure-actions {
  gap: 8px;
}

.trips-page .trip-style-chips button,
.trips-page .ai-scenario-row button,
.trips-page .trip-closure-actions button {
  min-height: 34px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 800;
}

.trips-page .trip-style-chips .active {
  color: var(--white);
  background: var(--brand);
}

.trips-page .day-plan-summary {
  padding: 12px;
}

.trips-page .day-plan-summary dl div,
.trips-page .current-trip-metrics div {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.trips-page .day-view-toggle {
  border-radius: 18px;
}