/* Module adapters are opt-in. Each block is removable without changing handlers. */

/* 11 · Text translation and read aloud */
#textModal.cf-unified #textPasteArea {
  border: 1px solid #dbe1ec;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}
#textModal.cf-unified #textLengthEstimate { color: #5b6473; }
#textModal.cf-unified :is(button[onclick="submitText()"], button[onclick="submitReadAloud()"]),
#textModal.cf-unified :is(button[data-sim-code="text.translate"], button[data-sim-code="text.readaloud"]) {
  min-height: 44px;
  border-radius: 12px;
  background: #4f46e5;
  color: #fff;
  box-shadow: none;
}
#textModal.cf-unified #textSubmissionStatus:not(.hidden) {
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  padding: 12px;
}

/* 12 · URL translation */
#urlModal.cf-unified #urlInput {
  min-height: 44px;
  border: 1px solid #dbe1ec;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
}
#urlModal.cf-unified button[onclick="submitUrl()"] {
  min-height: 44px;
  border-radius: 12px;
  background: #4f46e5;
  color: #fff;
  box-shadow: none;
}

/* 14 · Upload chooser, preparation and transfer status */
#uploadChoice.cf-unified { z-index: 2000030; }
#uploadChoice.cf-unified > div {
  border: 1px solid #dbe1ec;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}
#uploadChoice.cf-unified > div > button {
  min-height: 44px;
  border-radius: 12px;
  box-shadow: none;
}
#uploadChoice.cf-unified > div > div > button {
  box-sizing: border-box;
  min-height: 44px;
  flex-shrink: 0;
}
#uploadChoice.cf-unified > div > button:first-of-type { background: #4f46e5; }
#uploadChoice.cf-unified > div > button:nth-of-type(2) {
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
}
#uploadStatus.cf-unified,
#photoPreparation.cf-unified > div {
  border-color: #dbe1ec;
  border-radius: 16px;
}
#uploadStatus.cf-unified #uploadPhaseBadge {
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
}
#uploadStatus.cf-unified #uploadRetryBtn { background: #4f46e5; }

/* 16 · Feed detail and dark photo player */
#feedDetailCard.cf-unified { border-color: #dbe1ec; border-radius: 16px; }
#photoPlaybackModal.cf-photo-unified {
  box-sizing: border-box;
  z-index: 2000000;
  overflow: hidden;
}
body.cf-ongoing-visible #photoPlaybackModal.cf-photo-unified {
  height: calc(100dvh - var(--cf-ongoing-height, 42px)) !important;
  max-height: calc(100dvh - var(--cf-ongoing-height, 42px)) !important;
}
body:has(#photoPlaybackModal.cf-photo-unified:not(.hidden)) #helpModal { z-index: 2000001; }
#photoPlaybackModal.cf-photo-unified .photo-playback-nav > button {
  box-sizing: border-box;
  width: 54px !important;
  min-width: 54px !important;
  min-height: 44px !important;
  height: 44px !important;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  box-shadow: none;
}
#photoPlaybackModal.cf-photo-unified .photo-playback-top-mode {
  box-sizing: border-box;
  width: 104px;
  min-width: 104px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 10px;
  font-weight: 800;
}
#photoPlaybackModal.cf-photo-unified .photo-playback-top-mode select {
  width: 100%;
  height: 42px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: #4338ca;
  font-size: 11px;
  font-weight: 800;
  line-height: 42px;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 350px) {
  #photoPlaybackModal.cf-photo-unified .photo-playback-nav { gap: 4px; right: 8px; }
  #photoPlaybackModal.cf-photo-unified .photo-playback-nav > button {
    width: 44px !important;
    min-width: 44px !important;
    padding-inline: 3px !important;
  }
  #photoPlaybackModal.cf-photo-unified .photo-playback-top-mode { width: 96px; min-width: 96px; }
}
#photoPlaybackModal.cf-photo-unified #photoPlaybackAssistant > div:first-child {
  padding-top: max(12px, env(safe-area-inset-top));
}
#photoPlaybackModal.cf-photo-unified #photoPlaybackAssistant :is(#photoEnrichmentPanel,#photoQaPanel) {
  margin-top: 12px;
  color: #0f172a;
}
#photoPlaybackModal.cf-photo-unified #photoPlaybackControls {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  border-top: 1px solid rgba(199, 210, 254, .32);
  background: #111827;
}
#photoPlaybackModal.cf-photo-unified #photoChineseFullStage {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
#photoPlaybackModal.cf-photo-unified #photoImageTextCaption {
  display: block;
  flex: 0 0 30%;
  min-height: 96px;
  height: 30%;
  max-height: 30%;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
#photoPlaybackModal.cf-photo-unified #photoImageTextCaption.hidden { display: none; }
#photoPlaybackModal.cf-photo-unified #photoPlaybackProcessingRetry {
  min-height: 36px;
  border-radius: 10px;
  background: #e11d48;
  color: #fff;
}
#photoPlaybackModal.cf-photo-unified #photoPlaybackProcessingRetry.hidden { display: none; }
#photoPlaybackModal.cf-photo-unified :is(#photoPlaybackImageRetry,#photoPlaybackAudioRetry,#photoChineseCopyBtn) {
  min-height: 44px;
  border-radius: 12px;
  background: #4f46e5;
  color: #fff;
}

/* 19 · Personal reminders */
#reminderModal.cf-unified > div {
  width: min(calc(100vw - 24px), 440px);
  border-radius: 20px;
  border: 1px solid #dbe1ec;
}
#reminderModal.cf-unified > div > div:first-child > div:first-child {
  gap: 8px;
  flex-wrap: wrap;
}
#reminderModal.cf-unified :is(#remindTime,#remindContent) {
  min-height: 44px;
  border: 1px solid #dbe1ec;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
}
#reminderModal.cf-unified :is(#remindSaveBtn,#remindUpdateBtn,#remindSaveAsBtn) {
  min-height: 44px;
  border-radius: 12px;
  background: #4f46e5 !important;
  color: #fff !important;
  box-shadow: none;
}
#reminderModal.cf-unified :is(#remindEditHistoryBtn,#reminderListContainer > div) {
  border-radius: 12px;
  border-color: #dbe1ec;
}
#reminderModal.cf-unified button { min-height: 44px; border-radius: 12px; }

/* 20 · Music */
#musicModal.cf-unified .modal-content { border-radius: 20px; border: 1px solid #dbe1ec; }
#musicModal.cf-unified :is(.bg-orange-50,.bg-rose-50) { background: #eef2ff !important; }
#musicModal.cf-unified :is(.border-orange-100,.border-rose-100) { border-color: #c7d2fe !important; }
#musicModal.cf-unified :is(.bg-orange-600,.bg-rose-600) { background: #4f46e5 !important; }
#musicModal.cf-unified :is(.text-orange-700,.text-orange-600,.text-rose-800) { color: #4338ca !important; }
#musicModal.cf-unified :is(#musicTopTabSearch,#musicTopTabUpload,#musicTopTabLibrary) {
  min-height: 44px;
  border-radius: 12px;
}
#musicModal.cf-unified :is(input:not([type="checkbox"]),select) {
  min-height: 44px;
  border-color: #dbe1ec;
  border-radius: 12px;
  font-size: 16px;
}
#musicModal.cf-unified button { min-height: 44px; border-radius: 12px; }
#musicModal.cf-unified :is(.bg-gray-900,.bg-slate-900) { background: #4f46e5 !important; }
#musicModal.cf-unified [data-guide-help-for="musicFlowGuide"] { display: none; }

/* 23 · Accounting and monthly reconciliation */
#accountingTabContainer.cf-unified,
#accountingHistoryModal.cf-unified { background: #f8fafc; color: #0f172a; }
#accountingTabContainer.cf-unified :is(input:not([type="checkbox"]),select,textarea),
#accountingHistoryModal.cf-unified :is(input,select),
#paymentMethodModal.cf-unified textarea {
  min-height: 44px;
  border-color: #dbe1ec;
  border-radius: 12px;
  font-size: 16px;
}
#accountingTabContainer.cf-unified :is(button,.smart-entry),
#accountingHistoryModal.cf-unified button,
#paymentMethodModal.cf-unified button { min-height: 44px; border-radius: 12px; }
#accountingTabContainer.cf-unified #smartAccounting :is(.smart-card,.smart-entry),
#accountingHistoryModal.cf-unified .history-period-row { border-color: #dbe1ec; border-radius: 16px; }
#accountingTabContainer.cf-unified #smartAccounting :is(.smart-primary,#smartRecognize,#smartSave,#smartAccountSave),
#accountingTabContainer.cf-unified #accountingManualFooter [data-sim-code="accounting.save"] {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
  box-shadow: none;
}
#accountingTabContainer.cf-unified #smartAccounting :is(.smart-secondary button,.smart-config-options button),
#accountingHistoryModal.cf-unified :is(.action-btn-secondary,.cf-home-button) {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}
#accountingTabContainer.cf-unified #smartAccounting .smart-main-actions .smart-entry { background: #fff; color: #312e81; }
#accountingTabContainer.cf-unified #smartAccounting :is(.smart-history-controls button,.smart-period button) { min-height: 44px; }
#accountingHistoryModal.cf-unified #accountingHistoryStats { background: linear-gradient(125deg,#312e81,#4f46e5); }
#paymentMethodModal.cf-unified > div { border-radius: 20px; }

/* 24 · Diary writing and notebook */
:is(#diaryHomeModal,#diaryModal,#historyModal).cf-unified { background: #f8fafc; color: #0f172a; }
:is(#diaryHomeModal,#diaryModal,#historyModal).cf-unified .diary-toolbar {
  background: #fff;
  color: #0f172a;
  border-bottom: 1px solid #dbe1ec;
}
:is(#diaryHomeModal,#diaryModal,#historyModal).cf-unified :is(button,.diary-photo-add) {
  min-height: 44px;
  border-radius: 12px;
}
:is(#diaryHomeModal,#diaryModal,#historyModal).cf-unified :is(input:not([type="checkbox"]):not([type="range"]),textarea,select) {
  border-color: #dbe1ec;
  border-radius: 12px;
  font-size: 16px;
}
#diaryHomeModal.cf-unified .diary-hub button { background: #fff; border: 1px solid #dbe1ec; color: #4338ca; }
#diaryModal.cf-unified :is(.diary-save-button,#diaryMapApply) { background: #4f46e5; color: #fff; }
#diaryModal.cf-unified :is(.diary-photo-add,.diary-mic-button) { background: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca; }
#diaryModal.cf-unified :is(.diary-paper,.diary-menu,.diary-map-dialog) { border-color: #dbe1ec; border-radius: 16px; }
#historyModal.cf-unified #diarySearchContainer { background: #eef2ff; }
#historyModal.cf-unified #diarySearchInput { background: #fff; color: #0f172a; border: 1px solid #c7d2fe; }
#historyModal.cf-unified #diarySearchInput::placeholder { color: #64748b; }
#historyModal.cf-unified .diary-history-write { background: #4f46e5; color: #fff; }

/* 25 · Oral history workspace */
#oralHistoryModal.cf-unified { background: #f8fafc; color: #0f172a; }
#oralHistoryModal.cf-unified > div:first-child { background: #312e81; }
#oralHistoryModal.cf-unified :is(button,summary) { min-height: 44px; border-radius: 12px; }
#oralHistoryModal.cf-unified :is(input:not([type="checkbox"]),select,textarea) {
  min-height: 44px;
  border-color: #dbe1ec;
  border-radius: 12px;
  font-size: 16px;
}
#oralHistoryModal.cf-unified :is(#oralPeopleScreen,#oralPersonMenu,#oralCaptureSection,.oral-action-card,.oral-person-add-button,[data-person-id]) {
  border-color: #dbe1ec;
  border-radius: 16px;
}
#oralHistoryModal.cf-unified :is([data-sim-code="oral.person.create"],[data-sim-code="oral.capture.open"],[data-sim-code="oral.editor.open"],[data-sim-code="oral.export.open"],[data-sim-code="oral.source.save"],[data-sim-code="oral.rewrite"]) {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}
#oralHistoryModal.cf-unified .oral-person-add-button { background: #eef2ff; color: #4338ca; }
#oralHistoryModal.cf-unified .oral-action-card { background: #fff; color: #312e81; }
#oralHistoryModal.cf-unified #oralPersonMenu [data-sim-code="oral.capture.open"] { background: #4f46e5; color: #fff; }

/* 26 · Tourism overview, narration, location modes, and front-seat broadcast */
:is(#tourismModal,#travelNarrationModal,#placeGuideModal,#tourismRoamingModal,#tourismMapsModal,#tourismExplorePanel).cf-unified {
  --cf-primary: #4f46e5;
  --cf-primary-pressed: #4338ca;
  --cf-primary-soft: #eef2ff;
  --cf-primary-border: #c7d2fe;
}
:is(#tourismModal,#travelNarrationModal,#placeGuideModal,#tourismRoamingModal,#tourismMapsModal,#tourismExplorePanel).cf-unified :is(button,summary) {
  min-height: 44px;
  border-radius: 12px;
}
:is(#travelNarrationModal,#placeGuideModal,#tourismRoamingModal,#tourismMapsModal,#tourismExplorePanel).cf-unified :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea) {
  min-height: 44px;
  border-color: #dbe1ec;
  border-radius: 12px;
  font-size: 16px;
}
#tourismModal.cf-unified .tourism-main-nav button { background: #4f46e5; border-radius: 12px; }
#tourismModal.cf-unified .tourism-home-shell,
:is(#travelNarrationModal,#placeGuideModal,#tourismRoamingModal,#tourismMapsModal,#tourismExplorePanel).cf-unified > div {
  border-radius: 20px;
  border-color: #dbe1ec;
}
:is(#placeGuideModal,#tourismRoamingModal,#tourismExplorePanel).cf-unified :is(.place-guide-primary,#roamingStart,button[onclick="saveTourismConfig()"]) {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

/* Step 27 preview. Enabled only for the two selected panels. */
.cf-ui #tripPlannerModal.cf-unified .trip-shell,
.cf-ui #tourismJourneyModal.cf-unified .journey-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 980px;
  min-height: 100dvh;
  padding: 20px;
  background: #f8fafc;
  color: #172033;
}
.cf-ui #tripPlannerModal.cf-unified :is(.trip-head,.tourism-subnav),
.cf-ui #tourismJourneyModal.cf-unified :is(.journey-header,.tourism-subnav) {
  background: #fff;
  border: 1px solid #dbe1ec;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
}
.cf-ui #tripPlannerModal.cf-unified :is(.trip-head,.journey-header) h2,
.cf-ui #tourismJourneyModal.cf-unified :is(.trip-head,.journey-header) h2 {
  color: #172033;
  font-size: 20px;
  line-height: 1.35;
}
.cf-ui #tripPlannerModal.cf-unified .tourism-subnav,
.cf-ui #tourismJourneyModal.cf-unified .tourism-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cf-ui #tripPlannerModal.cf-unified :is(.tourism-subnav,.tourism-child-actions) button,
.cf-ui #tourismJourneyModal.cf-unified :is(.tourism-subnav,.tourism-child-actions) button {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
}
.cf-ui #tripPlannerModal.cf-unified :is(#tripEditor,.trip-advanced,.trip-natural,.trip-day),
.cf-ui #tourismJourneyModal.cf-unified :is(#journeyEditor,.journey-more,.journey-overview,.journey-auto,.journey-capture,.journey-guide,.journey-event) {
  border: 1px solid #dbe1ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}
.cf-ui #tripPlannerModal.cf-unified :is(#tripEditor>summary,.trip-advanced>summary),
.cf-ui #tourismJourneyModal.cf-unified :is(#journeyEditor>summary,.journey-more>summary) {
  min-height: 44px;
  color: #172033;
}
.cf-ui #tripPlannerModal.cf-unified :is(input,textarea,select),
.cf-ui #tourismJourneyModal.cf-unified :is(input:not([type=checkbox]),textarea,select) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
}
.cf-ui #tripPlannerModal.cf-unified :is(.trip-natural button,#tripPlanSubmit,.trip-result-action),
.cf-ui #tourismJourneyModal.cf-unified :is(#journeyCreateButton,.journey-primary-actions button,.journey-primary-actions label,.journey-link-import) {
  box-sizing: border-box;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: #4f46e5;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.cf-ui #tripPlannerModal.cf-unified :is(#tripPlannerStatus,.trip-warning),
.cf-ui #tourismJourneyModal.cf-unified :is(#journeyStatus,#journeyLinkStatus,.journey-warning,.journey-pending) {
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.cf-ui #tripPlannerModal.cf-unified .trip-map,
.cf-ui #tourismJourneyModal.cf-unified .journey-map { border-radius: 14px; overflow: hidden; }
.cf-ui #tourismJourneyModal.cf-unified .journey-route-options { background: #f8fafc; }
.cf-ui #tourismJourneyModal.cf-unified .journey-route-options button.active {
  border-color: #4f46e5;
  background: #4f46e5;
  color: #fff;
}
@media (max-width: 600px) {
  .cf-ui #tripPlannerModal.cf-unified .trip-shell,
  .cf-ui #tourismJourneyModal.cf-unified .journey-shell { padding: 12px; }
  .cf-ui #tripPlannerModal.cf-unified .trip-grid,
  .cf-ui #tourismJourneyModal.cf-unified .journey-grid { grid-template-columns: minmax(0,1fr); }
}

/* Step 28 visual preview: attraction list and detail only. */
.cf-ui #attractionListModal.cf-unified > div,
.cf-ui #attractionDetailModal.cf-unified > div {
  box-sizing: border-box;
  border: 1px solid #dbe1ec;
  border-radius: 20px;
  background: #f8fafc;
  color: #172033;
  box-shadow: 0 12px 36px #1720331a;
}
.cf-ui #attractionListModal.cf-unified h3 { color: #172033; font-size: 20px; }
.cf-ui #attractionListModal.cf-unified #attractionsContainer > div[onclick] {
  border: 1px solid #dbe1ec;
  border-radius: 16px;
  box-shadow: none;
  min-height: 76px;
}
.cf-ui #attractionListModal.cf-unified #attractionsContainer h4 { color: #172033; font-size: 15px; }
.cf-ui #attractionListModal.cf-unified button,
.cf-ui #attractionDetailModal.cf-unified :is(.module-home-btn,button[onclick="closeModalUniversal('attractionDetailModal')"]) {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}
.cf-ui #attractionDetailModal.cf-unified #attractionPhotoHeader { background: linear-gradient(135deg,#c7d2fe,#64748b); }
.cf-ui #attractionDetailModal.cf-unified #attractionPhotoHeader img[src=""] { visibility: hidden; }
.cf-ui #attractionDetailModal.cf-unified #attractionPhotoHeader img { object-fit: cover; }
.cf-ui #attractionDetailModal.cf-unified label { color: #475569; font-size: 13px; line-height: 1.35; }
.cf-ui #attractionDetailModal.cf-unified :is(input:not([type=file]),textarea) {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #172033;
  font-size: 16px;
  font-style: normal;
  box-shadow: none;
}
.cf-ui #attractionDetailModal.cf-unified button[onclick="saveAttractionData()"] {
  min-height: 44px;
  border-radius: 12px;
  background: #4f46e5 !important;
  color: #fff;
  box-shadow: none;
}
.cf-ui #attractionDetailModal.cf-unified button[onclick="document.getElementById('attractionPhotoUpload').click()"] {
  min-height: 40px;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
}
@media (max-width: 600px) {
  .cf-ui #attractionListModal.cf-unified > div { width: min(calc(100vw - 24px), 480px); padding: 16px; }
  .cf-ui #attractionDetailModal.cf-unified > div { border-radius: 0; }
}

/* Step 29 preview: only footprint containers. */
.cf-ui #trackModal.cf-unified .track-panel,
.cf-ui #trackConfirmModal.cf-unified > div,
.cf-ui #trackTypeModal.cf-unified > div,
.cf-ui #trackStopModal.cf-unified > div {
  border: 1px solid #dbe1ec;
  border-radius: 20px;
  background: #f8fafc;
  color: #172033;
  box-shadow: 0 12px 36px #1720331a;
}
.cf-ui #trackModal.cf-unified h3,
.cf-ui #trackHistoryModal.cf-unified h2,
.cf-ui #trackDetailMapModal.cf-unified h3 { color: #172033; }
.cf-ui #trackDetailMapModal.cf-unified #trackDetailPlaybackControls {
  position: absolute; top: max(76px, calc(env(safe-area-inset-top) + 60px)); left: 16px; right: 16px;
  z-index: 2000012; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100% - 32px); padding: 6px;
  border: 1px solid #dbe1ec; border-radius: 16px; background: #ffffffed;
  box-shadow: 0 8px 24px #17203324;
}
.cf-ui #trackDetailMapModal.cf-unified #trackDetailPlaybackControls button {
  box-sizing: border-box; flex: 0 0 auto; min-height: 42px; height: 42px;
  border: 1px solid #c7d2fe; border-radius: 11px; padding: 0 10px;
  background: #eef2ff; color: #4338ca; font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.cf-ui #trackDetailMapModal.cf-unified #trackDetailPlaybackToggle { background: #4f46e5 !important; color: #fff !important; }
.cf-ui #trackDetailMapModal.cf-unified.track-journey-active #trackDetailPlaybackControls { display: none; }
.cf-ui #trackModal.cf-unified .module-modal-actions { flex-wrap: wrap; justify-content: flex-end; }
.cf-ui #trackModal.cf-unified :is(.module-modal-actions button,#trackConfigToggleBtn,#trackChangeTypeBtn),
.cf-ui #trackHistoryModal.cf-unified :is(.module-modal-actions button,#trackHistorySelectBtn),
.cf-ui #trackDetailMapModal.cf-unified .cf-nav-pair button {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
}
.cf-ui #trackModal.cf-unified :is(#trackAnnouncementSettings,#trackMetrics,#liveTrackMapContainer) {
  border: 1px solid #dbe1ec;
  border-radius: 16px;
  box-shadow: none;
}
.cf-ui #trackModal.cf-unified #trackMetrics { background: #fff; }
.cf-ui #trackModal.cf-unified :is(input:not([type=checkbox]),select),
.cf-ui #trackHistoryModal.cf-unified :is(input:not([type=checkbox]):not([type=radio]),select) {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
}
.cf-ui #trackModal.cf-unified #trackFooter button,
.cf-ui #trackModal.cf-unified #trackAnnounceSaveBtn,
.cf-ui #trackStopModal.cf-unified button,
.cf-ui #trackConfirmModal.cf-unified button { min-height: 44px; border-radius: 12px; box-shadow: none; }
.cf-ui #trackModal.cf-unified #toggleTrackBtn,
.cf-ui #trackModal.cf-unified #trackAnnounceSaveBtn,
.cf-ui #trackStopModal.cf-unified #trackStopSaveBtn,
.cf-ui #trackConfirmModal.cf-unified button:first-child { background: #4f46e5; color: #fff; }
.cf-ui #trackModal.cf-unified #trackFooter #trackPauseBtn,
.cf-ui #trackModal.cf-unified #trackFooter #trackHistoryBtn { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.cf-ui #trackConfirmModal.cf-unified {
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.cf-ui #trackConfirmModal.cf-unified > .track-confirm-card {
  box-sizing: border-box;
  width: min(100%, 380px);
  max-width: 380px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 64px #0f172a38;
}
.cf-ui #trackConfirmModal.cf-unified .track-confirm-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  margin-bottom: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}
.cf-ui #trackConfirmModal.cf-unified .track-confirm-status > span {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px #a7f3d066;
}
.cf-ui #trackConfirmModal.cf-unified #trackConfirmTitle {
  margin: 0;
  color: #172033;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
}
.cf-ui #trackConfirmModal.cf-unified .track-confirm-summary {
  margin: 10px 0 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.65;
}
.cf-ui #trackConfirmModal.cf-unified .track-confirm-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #fde68a;
  border-radius: 12px;
  background: #fffbeb;
  color: #7c5a10;
  font-size: 13px;
  line-height: 1.55;
}
.cf-ui #trackConfirmModal.cf-unified .track-confirm-note strong {
  display: block;
  margin-bottom: 2px;
  color: #92400e;
  font-size: 12px;
}
.cf-ui #trackConfirmModal.cf-unified .track-confirm-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100%;
  margin-top: 20px;
}
.cf-ui #trackConfirmModal.cf-unified .track-confirm-actions > button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}
.cf-ui #trackConfirmModal.cf-unified #trackConfirmContinueBtn {
  border: 1px solid #4f46e5;
  background: #4f46e5;
  color: #fff;
}
.cf-ui #trackConfirmModal.cf-unified #trackConfirmStopBtn {
  border: 1px solid #fecdd3;
  background: #fff;
  color: #be123c;
}
.cf-ui #trackConfirmModal.cf-unified #trackConfirmCancelBtn {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
}
@media (max-width: 360px) {
  .cf-ui #trackConfirmModal.cf-unified { padding-inline: 12px; }
  .cf-ui #trackConfirmModal.cf-unified > .track-confirm-card { padding: 19px; border-radius: 20px; }
  .cf-ui #trackConfirmModal.cf-unified #trackConfirmTitle { font-size: 20px; }
  .cf-ui #trackConfirmModal.cf-unified .track-confirm-summary { font-size: 14px; }
}
.cf-ui #trackModal.cf-unified.track-view-overview .track-panel { background: #f7f9fc; gap: 0; }
.cf-ui #trackModal.cf-unified.track-view-landing .track-panel { background: #f7f9fc; gap: 0; padding-inline: 20px; }
.cf-ui #trackModal.cf-unified #trackLandingActions { display: none !important; }
.cf-ui #trackModal.cf-unified #trackOverflowMenu { display: none !important; }
.cf-ui #trackModal.cf-unified.track-menu-open #trackOverflowMenu:not(.hidden) { display: grid !important; gap: 4px; top: 76px !important; right: 16px; }
.cf-ui #trackModal.cf-unified #trackOverflowMenu .cf-nav-pair { display: contents !important; }
.cf-ui #trackModal.cf-unified #trackOverflowMenu button { width: 100% !important; min-height: 42px; border: 1px solid transparent; border-radius: var(--cf-radius); padding: 0 10px; background: #fff; color: var(--cf-primary-pressed); font-size: 14px; text-align: left; }
.cf-ui #trackModal.cf-unified #trackOverflowMenu button:active { background: var(--cf-primary-soft); }
.cf-ui #trackModal.cf-unified.track-view-landing #trackHeader { display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 0; padding: 4px 0 14px; border-bottom: 1px solid #e4e9f2; }
.cf-ui #trackModal.cf-unified.track-view-landing #trackHeader h3 { flex: 1 1 auto; min-width: 0; font-size: 22px; line-height: 1.25; color: #15223a; }
.cf-ui #trackModal.cf-unified #trackLandingNav { display: inline-flex; }
.cf-ui #trackModal.cf-unified #trackModuleBackBtn { display: none; }
.cf-ui #trackModal.cf-unified:is(.track-view-settings,.track-config-open,.track-view-overview) #trackModuleBackBtn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 38px; padding: 0 9px; border: 1px solid var(--cf-primary-border); border-radius: var(--cf-radius); background: var(--cf-primary-soft); color: var(--cf-primary-pressed); font-size: 12px; font-weight: 700; white-space: nowrap; }
.cf-ui #trackModal.cf-unified:is(.track-view-settings,.track-config-open) #trackConfigToggleBtn { display: none !important; }
.cf-ui #trackModal.cf-unified #trackHeader { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.cf-ui #trackModal.cf-unified #trackHeader h3 { flex: 1 1 auto; min-width: 0; }
.cf-ui #trackModal.cf-unified #trackLandingNav :is(.cf-help-button,.cf-home-button) { width: auto !important; min-width: 0 !important; padding-inline: 8px !important; }
.cf-ui #trackModal.cf-unified.track-view-landing #trackLandingActions { display: flex !important; flex-flow: row wrap !important; align-items: stretch; justify-content: flex-start; gap: 8px !important; margin-top: 24px; }
.cf-ui #trackModal.cf-unified.track-view-landing #trackLandingActions button { box-sizing: border-box; flex: 0 0 auto !important; width: max-content !important; min-width: 0 !important; min-height: 42px !important; height: 42px !important; padding: 0 12px !important; border-radius: var(--cf-radius); font-size: 14px !important; line-height: 1.2; font-weight: 700; white-space: nowrap; box-shadow: none; }
body.cf-ongoing-visible.cf-ui #trackModal.cf-unified:not(.hidden),
body.cf-ongoing-visible.cf-ui #trackModal.cf-unified .track-panel { height: calc(100dvh - 42px) !important; max-height: calc(100dvh - 42px) !important; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackHeader { display: flex; gap: 12px; margin: 0 0 20px; padding: 4px 2px 16px; border-bottom: 1px solid #e4e9f2; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackHeader h3 { flex: 1 1 auto; min-width: 0; font-size: 22px; line-height: 44px; color: #15223a; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackHeader .module-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackHeader .module-modal-actions :is(button,a) { box-sizing: border-box; width: auto !important; height: 42px; min-height: 42px !important; min-width: 42px !important; padding: 0 11px !important; border-radius: 12px; font-size: 13px !important; line-height: 20px; white-space: nowrap; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackHeader .module-modal-actions a { display: none !important; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackSetupRow { gap: 8px; margin: 0; min-width: 0; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackActivity { width: min(42vw,160px); height: 46px !important; min-height: 46px !important; padding: 0 12px; border-radius: 12px; font-size: 16px !important; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackCompassOverviewBtn { box-sizing: border-box; height: 46px; min-height: 46px !important; min-width: 90px; padding: 0 12px; border-radius: 12px; font-size: 15px !important; white-space: nowrap; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackCompassOverviewBtn[aria-pressed="true"] { width: 62px; height: 64px; min-height: 64px !important; padding: 0; }
.cf-ui #trackModal.cf-unified .track-overview-main { display: none; }
.cf-ui #trackModal.cf-unified.track-view-overview:not(.track-config-open) .track-overview-main { display: flex; flex: 1 1 auto; min-height: 0; overflow-y: auto; flex-direction: column; padding: 2px 3px 16px; }
.cf-ui #trackModal.cf-unified.track-view-overview.track-config-open .track-overview-main { display: block; flex: none; padding: 0 2px 12px; }
.cf-ui #trackModal.cf-unified.track-view-overview.track-config-open .track-overview-main > :not(.track-overview-choice) { display: none; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-kicker { color: #4f46e5; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-main h4 { margin: 9px 0 6px; color: #15223a; font-size: clamp(24px,7vw,30px); line-height: 1.2; font-weight: 800; letter-spacing: -.03em; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-main > p { margin: 0 0 22px; color: #59667b; font-size: 14px; line-height: 1.6; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-choice { padding: 18px; border: 1px solid #e2e8f2; border-radius: 20px; background: #fff; box-shadow: 0 8px 25px rgba(29,44,74,.05); }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-choice > label { display: block; margin-bottom: 12px; color: #26364f; font-size: 14px; font-weight: 700; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-ready { display: flex; flex: 1 1 auto; min-height: 130px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; border: 1px dashed #cfd9e8; border-radius: 20px; background: radial-gradient(circle at center,#fff 0%,#f2f6fb 100%); color: #44536a; text-align: center; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-ready-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e8edff; color: #4f46e5; font-size: 38px; line-height: 1; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-ready strong { font-size: 15px; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-ready small { padding: 0 12px; color: #77849a; font-size: 12px; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-map-link { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; min-height: 48px; margin-top: 14px; padding: 0 16px; border: 1px solid #dbe3f0; border-radius: 14px; background: #fff; color: #334ab4; font-size: 14px; font-weight: 700; text-decoration: none; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackFooter { display: flex; flex-direction: column; gap: 8px; padding: 12px 2px 2px; }
.cf-ui #trackModal.cf-unified #trackOverviewActionHint { display: none; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackOverviewActionHint { display: block; margin: 0 0 2px; color: #65738a; font-size: 12px; text-align: center; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackFooter button { min-height: 48px; font-size: 16px; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackFooter #toggleTrackBtn { min-height: 54px; background: #4f46e5; color: #fff; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackFooter #trackHistoryBtn { background: transparent; border: 0; color: #455576; }
.cf-ui #trackModal.cf-unified .track-panel { gap: 8px; padding-inline: 16px; }
.cf-ui #trackModal.cf-unified #trackHeader { align-items: center; gap: 12px; margin: 0; padding: 5px 0 11px; border-bottom: 1px solid #e5eaf2; }
.cf-ui #trackModal.cf-unified #trackHeader h3 { flex: 1 1 auto; min-width: 0; font-size: 21px; line-height: 1.25; white-space: nowrap; }
.cf-ui #trackModal.cf-unified #trackHeader .module-modal-actions { flex: none; margin: 0; }
.cf-ui #trackModal.cf-unified #trackHeader #trackConfigToggleBtn { min-width: 76px; height: 44px; min-height: 44px !important; padding: 0 15px; font-size: 15px !important; }
.cf-ui #trackModal.cf-unified.track-view-live #trackTimerDisplay { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; color: #18223a; }
.cf-ui #trackModal.cf-unified.track-view-live #trackTimerControls { display: flex; align-items: center; gap: 10px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackElapsed { color: #d92755; font-size: 28px; line-height: 1; }
.cf-ui #trackModal.cf-unified.track-view-live #trackPaceColumn { margin-left: auto; font-size: 12px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackCompassLiveBtn { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border-radius: 15px; background: #f1f5fd; }
.cf-ui #trackModal.cf-unified.track-view-live #trackCompassLiveBtn .track-compass-label { font-size: 11px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackMetrics { margin: 0; padding: 12px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackMetrics .grid > div { min-width: 0; }
.cf-ui #trackModal.cf-unified.track-view-live #trackMetricsFooter { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 11px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackPointCount { color: #334ab4; font-weight: 800; }
.cf-ui #trackModal.cf-unified.track-view-live #trackStatus { width: 100%; font-size: 11px; }
.cf-ui #trackModal.cf-unified.track-view-live #liveTrackMapContainer { margin: 0; border-radius: 18px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackFooter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackFooter :is(#toggleTrackBtn,#trackVoiceBtn) { box-sizing: border-box; min-height: 56px; font-size: 17px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackFooter #trackVoiceBtn { background: #172033; color: #fff; border: 1px solid #172033; }
.cf-ui #trackModal.cf-unified.track-view-live #trackFooter #trackVoiceBtn[aria-pressed="true"] { background: #d92755; border-color: #d92755; }
.cf-ui #trackModal.cf-unified #trackVoicePanel:not(.hidden) { align-items: center; flex-wrap: wrap; gap: 8px; min-height: 36px; color: #34445e; font-size: 12px; }
.cf-ui #trackModal.cf-unified #trackVoiceWave { min-width: 84px; height: 30px; }
.cf-ui #trackModal.cf-unified #trackVoiceCount { margin-left: auto; white-space: nowrap; font-weight: 800; }
.cf-ui #trackModal.cf-unified #trackVoicePreview:not(.hidden) { width: 100%; height: 36px; }
.cf-ui #trackModal.cf-unified .track-config-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; padding-bottom: 15px; border-bottom: 1px solid #dce5f1; }
.cf-ui #trackModal.cf-unified .track-config-actions :is(button,a) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 9px 13px; border: 1px solid #c7d2fe; border-radius: 12px; background: #fff; color: #4338ca; font-size: 14px; font-weight: 700; text-decoration: none; }
.cf-ui #trackModal.cf-unified .track-config-actions #trackPauseBtn { display: inline-flex !important; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-config-actions :is(#trackPauseBtn,#trackChangeTypeBtn,#trackOverviewBtn) { display: none !important; }
.cf-ui #trackModal.cf-unified.track-view-settings .track-config-actions #trackLiveSettingsBtn { display: none !important; }
.cf-ui #trackModal.cf-unified.track-view-settings .track-config-actions #trackOverviewBtn { display: none !important; }
.cf-ui #trackModal.cf-unified.track-view-live #trackTimerDisplay { display: grid; grid-template-columns: minmax(0,1fr) 58px; align-items: center; gap: 8px 14px; padding: 12px 14px 4px; border: 1px solid #dbe1ec; border-bottom: 0; border-radius: 18px 18px 0 0; background: #fff; }
.cf-ui #trackModal.cf-unified.track-view-live #trackTimerControls { display: contents; }
.cf-ui #trackModal.cf-unified.track-view-live #trackElapsed { justify-self: start; font-size: 27px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackCompassLiveSlot { justify-self: end; }
.cf-ui #trackModal.cf-unified.track-compass-unavailable #trackCompassLiveSlot { display: none !important; }
.cf-ui #trackModal.cf-unified.track-view-live.track-compass-unavailable #trackTimerDisplay { grid-template-columns: minmax(0,1fr); }
.cf-ui #trackModal.cf-unified.track-view-live #trackCompassLiveBtn { width: 54px; height: 54px; border: 0; background: #f4f7fc; }
.cf-ui #trackModal.cf-unified.track-view-live #trackPaceColumn { grid-column: 1 / -1; display: flex; justify-content: space-between; width: 100%; min-width: 0; margin: 0; line-height: 1.4; }
.cf-ui #trackModal.cf-unified.track-view-live #trackMetrics { margin-top: -8px; padding-top: 3px; border-top: 0; border-radius: 0 0 18px 18px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackMetricsFooter { align-items: center; gap: 2px 8px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackMetricsFooter > span:first-child { display: none; }
.cf-ui #trackModal.cf-unified.track-view-live #trackPointCount { order: 0; white-space: nowrap; }
.cf-ui #trackModal.cf-unified.track-view-live #trackStatus { order: 1; width: auto; flex: 1 1 120px; text-align: right; white-space: nowrap; font-size: 11px; }
.cf-ui #trackModal.cf-unified .track-gps-fix { position: absolute; top: 10px; right: 10px; z-index: 500; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #94a3b8; box-shadow: 0 2px 8px #17203330; font-size: 16px; }
.cf-ui #trackModal.cf-unified .track-gps-fix.is-fresh { color: #059669; }
.cf-ui #trackModal.cf-unified .track-gps-fix.is-stale { color: #d97706; }
.cf-ui #trackModal.cf-unified .track-map-actions { position: absolute; right: 10px; bottom: 20px; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.cf-ui #trackModal.cf-unified .track-map-actions button { display: grid; place-items: center; box-sizing: border-box; width: 42px; height: 42px; border: 1px solid #dbe1ec; border-radius: 12px; background: #fff; color: #334ab4; box-shadow: 0 2px 8px #17203330; font-size: 26px; line-height: 1; }
.cf-ui #trackModal.cf-unified .track-map-actions button[aria-pressed="true"] { color: #fff; background: #4f46e5; }
.cf-ui #trackModal.cf-unified #trackVoicePanel:not(.hidden) { display: flex; flex-wrap: nowrap; min-height: 42px; }
.cf-ui #trackModal.cf-unified #trackVoiceWave { width: 100%; height: 42px; }
.cf-ui #trackModal.cf-unified #trackVoiceWave .voice-capture-track { box-sizing: border-box; width: 100%; justify-content: center; }
.cf-ui #trackModal.cf-unified #trackVoiceWave .voice-capture-track canvas { width: 100%; min-width: 0; max-width: none; }
.cf-ui #trackModal.cf-unified #trackVoiceWave .voice-capture-caption { display: none; }
@media(max-width:360px){.cf-ui #trackModal.cf-unified.track-view-live #trackTimerDisplay{gap:8px;grid-template-columns:minmax(0,1fr) 52px;padding-inline:9px}.cf-ui #trackModal.cf-unified.track-view-live #trackPaceColumn{font-size:11px}}
/* 记录中界面：标题、三点菜单与两层指标压成一个紧凑面板。 */
.cf-ui #trackModal.cf-unified.track-view-live #trackHeader { min-height:36px; margin:0; padding:2px 0 5px; gap:7px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackHeader h3 { font-size:18px; line-height:24px; }
.cf-ui #trackModal.cf-unified #trackHeader #trackConfigToggleBtn {
  display:inline-grid!important; place-items:center; box-sizing:border-box;
  width:36px; min-width:36px!important; height:36px; min-height:36px!important;
  padding:0!important; font-size:0!important; line-height:1!important;
}
.cf-ui #trackModal.cf-unified:is(.track-view-landing,.track-view-settings,.track-config-open) #trackHeader #trackConfigToggleBtn { display:none!important; }
.cf-ui #trackModal.cf-unified.track-view-live #trackTimerDisplay {
  display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:7px;
  margin:0; padding:8px 9px 7px; border:1px solid #fecdd3; border-radius:15px;
  background:#fff7f8; color:#18223a;
}
.cf-ui #trackModal.cf-unified.track-view-live #trackCoreMetrics {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; text-align:center;
}
.cf-ui #trackModal.cf-unified.track-view-live #trackTimerControls { display:block; }
.cf-ui #trackModal.cf-unified.track-view-live #trackElapsed {
  display:flex; justify-content:center; color:#e11d48; font-size:clamp(18px,5.6vw,25px); line-height:29px;
}
.cf-ui #trackModal.cf-unified.track-view-live #trackPaceColumn {
  display:block; grid-column:auto; width:auto; margin:0; font-size:inherit; line-height:normal;
}
.cf-ui #trackModal.cf-unified.track-view-live #trackPaceColumn .track-pace-line { justify-content:center; }
.cf-ui #trackModal.cf-unified.track-view-live #trackMetrics {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 3px;
  margin:0; padding:7px 0 0; border:0; border-top:1px solid #ffe4e6;
  border-radius:0; background:transparent; box-shadow:none;
}
.cf-ui #trackModal.cf-unified.track-view-live #trackMetricsFooter {
  display:grid; grid-column:1 / -1; grid-template-columns:auto auto minmax(0,1fr) 32px;
  align-items:center; column-gap:6px; min-height:34px; padding:4px 0 0;
  border-top:1px solid #ffe4e6; font-size:inherit; text-align:left;
}
.cf-ui #trackModal.cf-unified.track-view-live #trackMetricsFooter > .track-minor-label { display:block; }
.cf-ui #trackModal.cf-unified.track-view-live #trackMetricsFooter > span:first-child { display:block; }
.cf-ui #trackModal.cf-unified.track-view-live #trackPointCount { order:initial; color:#475569; font-size:10px; line-height:15px; }
.cf-ui #trackModal.cf-unified.track-view-live #trackStatus { width:auto; }
.cf-ui #trackModal.cf-unified.track-view-live #trackCompassLiveSlot {
  position:static; display:flex; width:32px; height:32px; justify-self:end;
}
.cf-ui #trackModal.cf-unified.track-view-live.track-compass-unavailable #trackCompassLiveSlot { display:none!important; }
.cf-ui #trackModal.cf-unified.track-view-live #trackCompassLiveBtn { width:32px; height:32px; border:0; padding:0; border-radius:9px; background:#f1f5fd; }
@media(max-width:360px){
  .cf-ui #trackModal.cf-unified.track-view-live #trackTimerDisplay{grid-template-columns:minmax(0,1fr);gap:6px;padding-inline:8px}
}
.cf-ui #trackModal.cf-unified.track-view-overview:not(.track-config-open) .track-overview-main { flex: none; overflow: visible; padding: 24px 2px 0; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-main h4 { margin: 0 0 20px; font-size: 25px; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-choice { padding: 16px; box-shadow: none; }
.cf-ui #trackModal.cf-unified.track-view-overview .track-overview-choice > label { margin-bottom: 10px; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackSetupRow #trackActivity { width: 100%; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackCompassOverviewBtn { display: none !important; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackFooter { margin-top: 14px; padding: 0 2px; }
.cf-ui #trackModal.cf-unified.track-view-overview #trackFooter #toggleTrackBtn { display: flex; justify-content: center; width: 100% !important; flex: 1 1 auto !important; }
.cf-ui #trackModal.cf-unified.track-view-live #trackFooter { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
.cf-ui #trackModal.cf-unified.track-view-live #trackFooter > button { display: flex; justify-content: center; width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; }
.cf-ui #trackModal.cf-unified .track-map-actions { display: flex !important; flex-direction: column !important; align-items: flex-end !important; top: auto !important; bottom: 12px !important; width: 42px; height: auto !important; }
.cf-ui #trackModal.cf-unified .track-map-actions > button { display: grid; flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; }
.cf-ui #trackStopModal.cf-unified .track-stop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cf-ui #trackStopModal.cf-unified .track-stop-actions button { box-sizing: border-box; width: 100% !important; min-width: 0 !important; min-height: 48px; padding: 9px 12px; border-radius: 13px; font-size: 15px; line-height: 1.25; }
.cf-ui #trackStopModal.cf-unified #trackStopSaveBtn { grid-column: 1 / -1; }
.cf-ui #trackStopModal.cf-unified #trackStopDiscardBtn { color: #b42346; background: #fff1f3; border: 1px solid #f7c7d1; }
@media (max-width: 360px) {
  .cf-ui #trackModal.cf-unified.track-view-overview #trackHeader { align-items: flex-start; }
  .cf-ui #trackModal.cf-unified.track-view-overview #trackHeader .module-modal-actions { gap: 4px; }
  .cf-ui #trackModal.cf-unified.track-view-overview #trackHeader .module-modal-actions :is(button,a) { padding: 0 7px !important; font-size: 12px !important; }
}
.cf-ui #trackHistoryModal.cf-unified { background: #f8fafc; }
.cf-ui #trackHistoryModal.cf-unified > div:first-child { border-bottom: 1px solid #dbe1ec; }
.cf-ui #trackHistoryModal.cf-unified #trackHistoryList { background: #f8fafc; }
.cf-ui #trackDetailMapModal.cf-unified > div:last-child { border-top: 1px solid #dbe1ec; }
@media (max-width: 600px) {
  .cf-ui #trackModal.cf-unified .track-panel { border-radius: 0; }
  .cf-ui #trackHistoryModal.cf-unified .module-modal-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* Step 30 preview: recording mode only in the shared live container. */
.cf-ui #liveTranslationModal.cf-recording-unified:has(#recordingSectionNav:not(.hidden)) {
  background: #f8fafc;
  color: #172033;
}
.cf-ui #liveTranslationModal.cf-recording-unified:has(#recordingSectionNav:not(.hidden)) .live-toolbar-safe {
  border-bottom: 1px solid #dbe1ec;
  background: #fff;
}
.cf-ui #liveTranslationModal.cf-recording-unified:has(#recordingSectionNav:not(.hidden)) #livePanelTitle {
  color: #172033;
  font-size: 20px;
}
.cf-ui #liveTranslationModal.cf-recording-unified:has(#recordingSectionNav:not(.hidden)) :is(#recordingSectionNav button,#recordingConfigEntry button,.live-header-action) {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 14px;
  font-weight: 700;
}
.cf-ui #liveTranslationModal.cf-recording-unified:has(#recordingSectionNav:not(.hidden)) #recordingFilePanel {
  border-top: 1px solid #dbe1ec;
  background: #fff;
}
.cf-ui #liveTranslationModal.cf-recording-unified:has(#recordingSectionNav:not(.hidden)) #recordingFilePanel input,
.cf-ui #recordingConfigModal.cf-unified :is(input,select,textarea),
.cf-ui #recordingKeywordsModal.cf-unified :is(input,textarea),
.cf-ui #recordingHistoryModal.cf-unified :is(input,select) {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #172033;
  font-size: 16px;
}
.cf-ui #liveTranslationModal.cf-recording-unified:has(#recordingSectionNav:not(.hidden)) :is(#recordingProcessFileBtn,#livePauseResumeBtn) {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: #4f46e5;
  color: #fff;
  box-shadow: none;
}
.cf-ui #liveTranslationModal.cf-recording-unified:has(#recordingSectionNav:not(.hidden)) :is(#recordingSaveNotice,#recordingWavePanel) {
  border: 1px solid #c7d2fe;
  border-radius: 16px;
  background: #eef2ff;
  box-shadow: none;
}
.cf-ui #recordingConfigModal.cf-unified,
.cf-ui #recordingKeywordsModal.cf-unified,
.cf-ui #recordingHistoryModal.cf-unified { background: #f8fafc; color: #172033; }
.cf-ui #recordingConfigModal.cf-unified .modal-content,
.cf-ui #recordingKeywordsModal.cf-unified .modal-content,
.cf-ui #recordingHistoryModal.cf-unified .modal-content {
  box-sizing: border-box;
  border: 1px solid #dbe1ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: none;
}
.cf-ui #recordingHistoryModal.cf-unified #recordingHistoryList > button { border-radius: 14px; }
@media (max-width: 600px) {
  .cf-ui #recordingConfigModal.cf-unified .modal-content,
  .cf-ui #recordingKeywordsModal.cf-unified .modal-content,
  .cf-ui #recordingHistoryModal.cf-unified .modal-content { border-radius: 0; }
}

/* Step 31 preview: meeting workspace and detail only. */
.cf-ui #meetingModal.cf-unified .modal-content,
.cf-ui #meetingDetailModal.cf-unified .modal-content {
  border: 1px solid #dbe1ec;
  border-radius: 20px;
  background: #f8fafc;
  color: #172033;
  box-shadow: none;
}
.cf-ui #meetingModal.cf-unified .modal-content > div:first-child,
.cf-ui #meetingDetailModal.cf-unified .modal-content > div:first-child {
  border: 1px solid #dbe1ec;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
}
.cf-ui #meetingModal.cf-unified .modal-content h3,
.cf-ui #meetingDetailModal.cf-unified .modal-content h3 { color: #172033; font-size: 20px; }
.cf-ui #meetingModal.cf-unified :is([data-audio-config],#meetingAdvancedTools,.meeting-card),
.cf-ui #meetingDetailModal.cf-unified :is(section,.meeting-card) {
  border: 1px solid #dbe1ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}
.cf-ui #meetingModal.cf-unified :is(input:not([type=checkbox]):not([type=file]),select,textarea),
.cf-ui #meetingDetailModal.cf-unified :is(input:not([type=checkbox]),select,textarea) {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #172033;
  font-size: 16px;
}
.cf-ui #meetingModal.cf-unified select,
.cf-ui #meetingDetailModal.cf-unified select { height: 44px; }
.cf-ui #meetingModal.cf-unified :is(.module-modal-actions button,#meetingAdvancedTools button,#meetingHistoryMore),
.cf-ui #meetingDetailModal.cf-unified button {
  box-sizing: border-box;
  min-height: 44px;
  border-radius: 12px;
  box-shadow: none;
}
.cf-ui #meetingModal.cf-unified :is(input[type="file"],button[data-sim-code^="meeting."]) {
  box-sizing: border-box;
  min-height: 44px !important;
}
.cf-ui #meetingModal.cf-unified :is(button[data-sim-code="meeting.upload"],#meetingRecordBtn),
.cf-ui #meetingDetailModal.cf-unified button[data-sim-code="meeting.audio.toggle"] {
  background: #4f46e5;
  color: #fff;
}
.cf-ui #meetingModal.cf-unified :is(#meetingFlowGuide,#meetingOpsCenter,#meetingTaskCenter,#meetingList),
.cf-ui #meetingDetailModal.cf-unified :is(#meetingDetailBody,#meetingDetailContent) {
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .cf-ui #meetingModal.cf-unified .modal-content,
  .cf-ui #meetingDetailModal.cf-unified .modal-content { border-radius: 0; }
  .cf-ui #meetingModal.cf-unified .module-modal-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 400px) {
  .cf-ui #meetingModal.cf-unified .modal-content > div:first-child { flex-wrap: wrap; }
  .cf-ui #meetingModal.cf-unified .modal-content > div:first-child > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
  .cf-ui #meetingModal.cf-unified .modal-content > div:first-child h3 { white-space: nowrap; }
  .cf-ui #meetingModal.cf-unified .module-modal-actions { flex: 1 1 100%; }
}

/* Step 32 preview: live mode in the shared audio container. */
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) {
  background: #f8fafc;
  color: #172033;
}
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) .live-toolbar-safe {
  border-bottom: 1px solid #dbe1ec;
  background: #fff;
}
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) #livePanelTitle {
  color: #172033;
  font-size: 20px;
}
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) :is(.live-header-action,#liveConfigToggleBtn,#liveMicCheckBtn,#liveSettingsHelpButton,#liveStatusActions button,#liveCaptionViewRow button) {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 14px;
  font-weight: 700;
}
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) :is(#liveEngineSelect,#liveSourceLanguage,#liveTargetLanguage) {
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #172033;
  font-size: 16px;
}
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) :is(#liveEngineSelect,#liveSourceLanguage,#liveTargetLanguage) { height: 44px; }
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) :is(#livePauseResumeBtn,#liveStopBtn) {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: #4f46e5;
  color: #fff;
  box-shadow: none;
}
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) :is(#liveTextOnlyBtn,#liveSpeechBtn) {
  min-height: 44px;
  border-radius: 12px;
  box-shadow: none;
}
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) :is(#liveOriginalPane,#liveTranslatedPane) {
  background: #fff;
  border-color: #dbe1ec;
}
.cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) #liveStatusBar {
  border-radius: 16px;
  overflow-wrap: anywhere;
}
.cf-ui #liveHelpModal.cf-unified { background: #f8fafc; color: #172033; }
.cf-ui #liveHelpModal.cf-unified .live-toolbar-safe { background: #fff; border-color: #dbe1ec; }
.cf-ui #liveHelpModal.cf-unified button { min-height: 44px; border-radius: 12px; }
.cf-ui #liveCostRecordModal { background: #f8fafc; color: #172033; }
@media (max-width: 600px) {
  .cf-ui #liveTranslationModal.cf-live-unified:is(:has(#recordingSectionNav.hidden),.cf-native-live) .module-modal-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* Phone controls: keep the visible hit area usable without stretching rows. */
@media (max-width: 600px) {
  .cf-ui #liveTranslationModal .live-title-row .cf-nav-pair :is(.cf-help-button,.cf-home-button) {
    height: 44px !important;
    min-height: 44px !important;
  }
  .cf-ui .feed-toolbar :is(.feed-tab,#feedMoreMenuToggle) {
    box-sizing: border-box;
    min-width: 0;
    height: 44px;
    min-height: 44px;
  }
  .cf-ui .feed-toolbar .feed-tab { border-radius: 11px; }
  .cf-ui .feed-toolbar #feedMoreMenuToggle { width: 44px; min-width: 44px; }
  .cf-ui #trackModal.cf-unified.track-view-overview #trackSetupRow #trackActivity,
  .cf-ui #trackModal.cf-unified.track-view-overview #trackSetupRow #trackCompassOverviewBtn {
    min-height: 44px !important;
  }
  .cf-ui #trackModal.cf-unified.track-view-overview #trackSetupRow #trackActivity {
    height: 44px !important;
  }
  .cf-ui :is(#meetingModal,#textModal,#urlModal) .module-close-btn,
  .cf-ui #musicPlaylistAddButton {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
  }
  .cf-ui #meetingAdvancedTools > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .cf-ui #musicArtistCount {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .cf-ui #musicModal .music-action-row button {
    min-width: 44px;
    height: 44px !important;
    min-height: 44px !important;
  }
  .cf-ui #musicModal .music-action-row {
    padding-block: 0;
    border-block: 0;
    box-shadow: inset 0 1px #e5e7eb, inset 0 -1px #e5e7eb;
  }
  .cf-ui #musicModal #musicLibraryList .music-track-row {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    padding-block: 0;
    border: 0;
    box-shadow: inset 0 0 0 1px #e5e7eb;
  }
  .cf-ui #musicModal #musicLibraryList .music-track-row.is-selected {
    box-shadow: inset 0 0 0 1px #6366f1;
  }
  .cf-ui #musicModal #musicLibraryList .music-track-row.is-playing {
    background: #dbeafe;
    box-shadow: inset 4px 0 #2563eb, inset 0 0 0 2px #2563eb;
  }
  .cf-ui #musicModal #musicLibraryList .music-track-check-hit {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  .cf-ui #musicModal #musicLibraryList .music-track-text {
    align-items: center;
    min-height: 44px;
  }
  .cf-ui #musicModal #musicLibraryList .music-track-play {
    width: 44px;
    height: 44px;
    min-height: 44px !important;
    margin-left: auto;
  }
}

/* Keep version choices in normal flow beneath the photo navigation. */
#photoReadingDetailMode:not([hidden]) {display:contents}
#photoReadingDetailMode[hidden] {display:none}
#photoPlaybackModal.cf-photo-unified .photo-playback-nav > button,
#photoPlaybackModal.cf-photo-unified .photo-reading-version-trigger {
 width:44px !important;min-width:44px !important;height:44px;min-height:44px;
 border:1px solid #c7d2fe;border-radius:12px;background:#eef2ff;color:#4338ca;
 padding:0 3px;font-size:12px;flex-shrink:0;
}
.photo-reading-version-dialog {
 position:fixed;inset:0;margin:auto;padding:16px;border:0;border-radius:16px;
 background:#f8fafc;color:#172033;max-width:calc(100vw - 32px);
}
.photo-reading-version-dialog::backdrop {background:rgba(0,0,0,.45)}
.photo-reading-version-dialog button {min-height:48px;min-width:110px;margin:4px;padding:10px 18px;border:0;border-radius:10px;background:#4338ca;color:white;font-size:17px}


.photo-reading-version-dialog button[aria-pressed="false"] {background:#eef0ff;color:#4338ca}
.photo-reading-version-dialog button[aria-pressed="true"]::before {content:"✓ ";}