/* CycleForce interface system. Keep module-specific content styles, share the shell. */
#offlinePhotoModal #offlinePhotoPrepare,
#offlinePhotoModal #offlinePhotoSpeak {
  background-color: #4338ca;
  color: #fff;
  min-height: 44px;
}
#offlinePhotoModal #offlinePhotoPick {
  background-color: #047857;
  color: #fff;
  min-height: 44px;
}
#offlinePhotoModal :is(#offlinePhotoPrepare,#offlinePhotoPick,#offlinePhotoSpeak):disabled {
  opacity: .55;
}

.cf-ui {
  --cf-primary: #4f46e5;
  --cf-primary-pressed: #4338ca;
  --cf-primary-soft: #eef2ff;
  --cf-primary-border: #c7d2fe;
  --cf-page: #f8fafc;
  --cf-surface: #fff;
  --cf-text: #0f172a;
  --cf-muted: #64748b;
  --cf-border: #e2e8f0;
  --cf-radius: 12px;
  --cf-space: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
}
.cf-ui :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--cf-primary);
  outline-offset: 2px;
}
.cf-ui .cf-home-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  padding: 0 11px;
  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;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}
.cf-ui .cf-home-button:active { background: #e0e7ff; }
.cf-ui :is(#tourismModal,#tourismHelpModal,#tripPlannerModal,#tourismJourneyModal,#attractionListModal,#attractionDetailModal,#promptLibraryModal),
.cf-health {
  --cf-primary: #047857;
  --cf-primary-pressed: #065f46;
  --cf-primary-soft: #ecfdf5;
  --cf-primary-border: #a7f3d0;
}
.cf-ui :is(#tourismModal,#tourismHelpModal,#tripPlannerModal,#tourismJourneyModal,#attractionListModal,#attractionDetailModal,#promptLibraryModal) .cf-home-button:active,
.cf-health .cf-home-button:active { background: #d1fae5; }
.cf-ui .cf-nav-pair {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: none;
  order: 99;
  margin-left: auto;
  white-space: nowrap;
}
.cf-ui .cf-nav-pair :is(.cf-help-button,.cf-home-button) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 72px !important;
  min-width: 72px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border-radius: var(--cf-radius) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none !important;
}
.cf-ui .cf-nav-pair .cf-help-button {
  border: 1px solid var(--cf-primary-border) !important;
  background: #fff !important;
  color: var(--cf-primary-pressed) !important;
}
.cf-ui .cf-nav-pair .cf-home-button {
  border: 1px solid var(--cf-primary-border) !important;
  background: var(--cf-primary-soft) !important;
  color: var(--cf-primary-pressed) !important;
}
.cf-admin .cf-nav-pair #back-home-btn-admin { width: 72px !important; min-width: 72px !important; height: 38px !important; padding: 0 6px !important; font-size: 12px !important; }

/* Main app: consistent headers and controls for functional modules. */
.cf-ui :is(#urlModal,#textModal,#meetingModal,#musicModal,#tourismModal,#userModal) .modal-content {
  border-radius: 18px;
}
.cf-ui :is(#urlModal,#textModal,#meetingModal,#musicModal,#tourismModal) .modal-content > div:first-child {
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cf-ui :is(#urlModal,#textModal,#meetingModal,#musicModal,#tourismModal) .modal-content > div:first-child h3 {
  min-width: 0;
  font-size: 17px;
  line-height: 1.25;
}
.cf-ui :is(#meetingModal,#musicModal) .module-help-note { display: none; }
.cf-ui .module-modal-actions { flex-wrap: nowrap; gap: 6px; }
.cf-ui .module-home-btn,
.cf-ui .action-btn,
.cf-ui .module-close-btn,
.cf-ui .module-guide-button { border-radius: var(--cf-radius); box-shadow: none; }
.cf-ui .module-home-btn.cf-home-button { min-height: 38px; padding-inline: 11px; font-size: 12px; }
.cf-ui :is(#urlModal,#textModal,#meetingModal,#musicModal,#reminderModal,#rssConfigModal) :where(input:not([type="checkbox"]),select) {
  min-height: 40px;
  border-color: var(--cf-border);
  border-radius: var(--cf-radius);
}
.cf-ui :is(#urlModal,#textModal,#meetingModal,#musicModal,#reminderModal,#rssConfigModal) textarea {
  border-color: var(--cf-border);
  border-radius: var(--cf-radius);
}
.cf-ui :is(#urlModal,#textModal) :where(input,textarea) { padding: 9px 11px; margin-bottom: 10px; }
.cf-ui #textModal .bg-purple-600,
.cf-ui #musicModal .bg-orange-600 { background: var(--cf-primary) !important; }
.cf-ui #musicModal :where(.bg-orange-50,.bg-orange-100) { background: var(--cf-primary-soft) !important; }
.cf-ui #musicModal :where(.border-orange-100,.border-orange-200) { border-color: var(--cf-primary-border) !important; }
.cf-ui #musicModal :where(.text-orange-700,.text-orange-600) { color: var(--cf-primary-pressed) !important; }
.cf-ui #musicModal :where(#musicTopTabSearch,#musicTopTabLibrary) { min-height: 38px; border-radius: var(--cf-radius); }
.cf-ui :is(#meetingModal,#musicModal,#rssAdminModal,#rssConfigModal,#reminderModal) .modal-content > div:first-child,
.cf-ui :is(#rssAdminModal,#rssConfigModal,#reminderModal) .module-modal-actions { gap: 6px; }
.cf-ui #tourismModal .tourism-main-nav button { background: var(--cf-primary); border-radius: var(--cf-radius); min-height: 48px; }
.cf-ui #tourismModal .tourism-main-nav button:nth-child(n) { background: var(--cf-primary); }
.cf-ui :is(#tourismHelpModal,#tripPlannerModal,#tourismJourneyModal) .tourism-child-actions button { min-height: 36px; border-radius: var(--cf-radius); }
.cf-ui :is(#tourismHelpModal,#tripPlannerModal,#tourismJourneyModal) .tourism-child-actions .cf-home-button { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); border: 1px solid var(--cf-primary-border); }
.cf-ui :is(#tripPlannerModal,#tourismJourneyModal) :is(.trip-head,.journey-header) { gap: 6px; }
.cf-ui :is(#tripPlannerModal,#tourismJourneyModal) :is(.trip-head,.journey-header) h2 { font-size: 18px; white-space: nowrap; }
.cf-ui :is(#tripPlannerModal,#tourismJourneyModal) :is(.trip-head,.journey-header) .tourism-child-actions { justify-content: flex-end; gap: 4px; }
.cf-ui :is(#tripPlannerModal,#tourismJourneyModal) .tourism-subnav { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cf-ui :is(#tripPlannerModal,#tourismJourneyModal) .tourism-subnav button { min-height: 34px; padding: 0 10px; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); background: #fff; color: var(--cf-primary-pressed); font-size: 12px; font-weight: 700; }
.cf-ui #tourismJourneyModal .journey-form > label:has(> input) { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: 6px; }
.cf-ui #tourismJourneyModal .journey-form > label:has(> input) input { min-width: 0; }
.cf-ui #tripPlannerModal :is(.trip-natural,#tripPlaceChoices) { background: var(--cf-primary-soft); }
.cf-ui #tripPlannerModal :is(.trip-natural button,#tripPlaceChoices button,.trip-actions button:first-child,.trip-result-action) { background: var(--cf-primary); color: #fff; border-radius: var(--cf-radius); }
.cf-ui #tripPlannerModal .trip-actions button:not(:first-child) { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-ui #tripPlannerModal :is(.trip-summary,.trip-option button) { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-ui #tourismJourneyModal .journey-primary-actions :is(button,label) { background: var(--cf-primary); border-radius: var(--cf-radius); }
.cf-ui #tourismJourneyModal .journey-route-options button.active { background: var(--cf-primary); border-color: var(--cf-primary); }
.cf-ui #tourismModal #tourismMapsEntryHint { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-ui #tourismModal .tourism-maps-usage-grid span { color: var(--cf-primary-pressed); }
.cf-ui #tourismModal #tourismMapsKeysForm button { background: var(--cf-primary); }
.cf-ui #tripPlannerModal #tripPlannerStatus { color: var(--cf-primary-pressed); }
.cf-ui #tourismJourneyModal :is(.journey-actions button:first-child,.journey-capture > button,.journey-file-button,.journey-link-import,.journey-records-head button,.journey-pending button) { background: var(--cf-primary); }
.cf-ui #tourismJourneyModal .journey-actions button:not(:first-child) { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-ui #tourismJourneyModal :is(.journey-history button,.journey-retry) { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); border-color: var(--cf-primary-border); }
.cf-ui #tourismJourneyModal :is(.journey-overview small a,.journey-guide a) { color: var(--cf-primary-pressed); }
.cf-ui #tourismJourneyModal :is(.journey-route-progress,.journey-player input[type="range"]) { accent-color: var(--cf-primary); }
.cf-ui #tourismJourneyModal .journey-event summary::marker { color: var(--cf-primary); }
.cf-ui :is(#tripPlannerModal,#tourismJourneyModal) :where(input:not([type="checkbox"]),select,textarea) { border-color: var(--cf-border); border-radius: var(--cf-radius); }
.cf-ui #meetingModal [data-audio-config] label:has(> select) {
  display: grid;
  grid-template-columns: 56px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cf-ui #meetingModal [data-audio-config] label:has(> select) select { margin-top: 0; min-width: 0; width: 100%; }
.cf-ui #liveTranslationModal [data-audio-config] label:has(> select) { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 6px; min-width: 0; }
.cf-ui #liveTranslationModal [data-audio-config] label:has(> select) select { min-width: 0; width: 100%; margin-top: 0; }
.cf-ui #liveTranslationModal .live-toolbar-safe > div:first-child { gap: 6px; padding-inline: 12px; padding-bottom: 8px; }
.cf-ui #liveTranslationModal #recordingTaskConfig { padding-inline: 12px; padding-bottom: 8px; }
.cf-ui #teleprompterModal > div:first-child { top: max(8px, env(safe-area-inset-top)) !important; left: 12px; right: 12px; justify-content: flex-end; align-content: flex-start; }
.cf-ui #teleprompterModal > div:first-child::before { content: ""; flex-basis: 100%; height: 0; order: 0; }
.cf-ui #teleprompterModal > div:first-child > button[onclick="closeTeleprompter()"] { order: -2; }
.cf-ui #teleprompterModal .cf-nav-pair { order: -1; margin-left: 0; }
.cf-ui #teleprompterFlowGuide { top: 110px !important; }
.cf-ui #photoPlaybackModal .photo-playback-nav {
  position: relative !important;
  flex: 0 0 auto !important;
  order: -1;
  top: auto !important;
  right: auto !important;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 4px 8px;
  align-items: center;
  background: #020617;
  z-index: 3;
}
.cf-ui #photoPlaybackModal.photo-playback-short-text #photoChineseFullStage { display: flex; flex-direction: column; }
.cf-ui #photoPlaybackModal.photo-playback-short-text #photoChineseFullText { margin-top: auto; margin-bottom: auto; }
.cf-ui #photoPlaybackModal .photo-playback-view-actions { min-width: 0; }
.cf-ui #photoPlaybackModal .photo-playback-mode-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 3px 5px 3px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.cf-ui #photoPlaybackModal #photoPlaybackModeSelect {
  min-width: 116px;
  height: 30px;
  padding: 0 27px 0 10px;
  border: 0;
  border-radius: 9px;
  background-color: #4f46e5;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  outline: none;
}
.cf-ui #photoPlaybackModal #photoPlaybackModeSelect:focus-visible {
  box-shadow: 0 0 0 2px #020617, 0 0 0 4px #a5b4fc;
}
.cf-ui #photoPlaybackModal #photoPlaybackToDiaryBtn {
  min-height: 44px;
  flex-shrink: 0;
}
@media (max-width: 360px) {
  .cf-ui #photoPlaybackModal .photo-playback-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 4px;
  }
  .cf-ui #photoPlaybackModal #photoPlaybackCounter {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }
  .cf-ui #photoPlaybackModal .photo-playback-main-actions { min-width: 0; }
  .cf-ui #photoPlaybackModal #photoPlaybackToDiaryBtn { grid-column: 2; grid-row: 2; }
  .cf-ui #photoPlaybackModal .photo-playback-view-actions { width: 100%; gap: 3px; }
  .cf-ui #photoPlaybackModal .photo-playback-view-actions button { min-width: 0; flex: 1 1 0; padding-inline: 3px; }
}
.cf-ui #reminderModal .bg-yellow-400 { background: var(--cf-primary-soft) !important; color: var(--cf-primary-pressed) !important; }
.cf-ui #promptLibraryModal .bg-rose-500 { background: var(--cf-primary) !important; }
.cf-ui :is(#trackModal,#trackHistoryModal,#rssAdminModal,#rssConfigModal,#userModal,#adminSystemModal,#offlineSyncCenterModal,#userRecycleBinModal,#liveTranslationModal,#recordingHistoryModal) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),select,textarea) {
  min-height: 40px;
  border-radius: var(--cf-radius);
  border-color: var(--cf-border);
}
.cf-ui #rssAdminModal .module-modal-actions + p,
.cf-ui #rssAdminModal h3 + p { display: none; }
.cf-ui :is(#diaryHomeModal,#diaryModal,#historyModal,#oralHistoryModal) { background: var(--cf-page); }
.cf-ui :is(#historyModal,#oralHistoryModal) > div:first-child { background: var(--cf-primary); }
.cf-ui :is(#diaryHomeModal,#diaryModal) .diary-toolbar { background: var(--cf-surface); color: var(--cf-text); border-bottom: 1px solid var(--cf-border); }
.cf-ui :is(#diaryHomeModal,#diaryModal) .diary-toolbar button { border-radius: var(--cf-radius); }
.cf-ui :is(#diaryHomeModal,#diaryModal) .diary-toolbar .cf-home-button { border: 1px solid var(--cf-primary-border); background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-ui :is(#diaryHomeModal,#diaryModal) .diary-toolbar .diary-save-button { background: var(--cf-primary); color: #fff; }
.cf-ui :is(#diaryHomeModal,#diaryModal) .diary-sections { background: var(--cf-surface); border-color: var(--cf-border); }
.cf-ui :is(#diaryHomeModal,#diaryModal) .diary-sections [aria-current="page"] { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-ui #accountingTabContainer > div:first-child > div:first-child { padding: 10px 12px; }
.cf-ui #accountingTabContainer > div:first-child > div:nth-child(2) { padding: 10px 12px; }
.cf-ui #accountingManualForm { gap: 8px; }
.cf-ui #accountingManualForm .grid { gap: 8px; }
.cf-ui #accountingManualForm :where(input,select) { min-height: 40px; padding: 8px 10px; border-radius: var(--cf-radius); }
.cf-ui #accountingManualForm #accAmount { font-size: 18px; }
.cf-ui #accountingManualForm :where(label) { color: var(--cf-muted); }
.cf-ui #accountingHistoryModal > div:first-child { padding: 8px 10px; }
.cf-ui #reminderModal .bg-white.w-\[90\%\] > div:first-child { padding: 14px 12px 8px; }
.cf-ui #rssConfigModal > div { padding: 16px; gap: 10px; border-radius: 18px 18px 0 0; }
.cf-ui #rssAdminModal > div > div:first-child { padding: 12px; }

/* Health uses the shared emerald module accent. Semantic status colors remain distinct. */
.cf-health { background: var(--cf-page); color: var(--cf-text); }
.cf-health header { background: var(--cf-surface); color: var(--cf-text); border-bottom: 1px solid var(--cf-border); padding: 10px 12px; }
.cf-health :where(button:not(.danger),.button:not(.danger),.file-choice:not(.secondary)) { background: var(--cf-primary); color: #fff; border-radius: var(--cf-radius); }
.cf-health button.secondary,
.cf-health .file-choice.secondary { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-health nav button { background: #fff; color: var(--cf-text); border: 1px solid var(--cf-border); }
.cf-health nav button.active { background: var(--cf-primary); color: #fff; border-color: var(--cf-primary); }
.cf-health :where(.card,.item) { border-color: var(--cf-border); box-shadow: none; }
.cf-health :where(input,select,textarea) { border-color: var(--cf-border); color: var(--cf-text); }
.cf-health .badge { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-health .overview-metric { background: #f4faf7; color: #173a36; border-radius: 0; border-top: 1px solid #dce9e5; }
.cf-health .overview-metric:nth-child(even) { background: #fbfdfc; }
.cf-health .overview-metric:hover { background: #eaf5f0; }
.cf-health #healthHelpButton { margin-left: auto; }
.cf-health .header-home { margin-left: 0; }
.cf-health .fieldrow label:has(> input),
.cf-health .fieldrow label:has(> select) { display: grid; grid-template-columns: minmax(55px,auto) minmax(0,1fr); align-items: center; gap: 6px; }
.cf-health .fieldrow label :where(input,select) { min-width: 0; }
.cf-health .single-metric-field { grid-template-columns: 84px minmax(0,1fr); }

/* Standalone discovery/events module. */
.cf-events { background: var(--cf-page); color: var(--cf-text); }
.cf-events .shell { padding: 12px 12px 48px; }
.cf-events .top { gap: 8px; justify-content: flex-end; }
.cf-events .top .eyebrow { margin-right: auto; color: var(--cf-muted); }
.cf-events .hero { margin: 10px 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--cf-surface); color: var(--cf-text); border: 1px solid var(--cf-border); box-shadow: none; }
.cf-events .hero .eyebrow { color: var(--cf-primary-pressed); }
.cf-events .hero .lead { color: var(--cf-muted); }
.cf-events .hero h1 { margin: 4px 0; font-size: 24px; }
.cf-events .hero-stat { min-width: 95px; padding: 8px 10px; color: var(--cf-primary-pressed); background: var(--cf-primary-soft); border-color: var(--cf-primary-border); border-radius: var(--cf-radius); }
.cf-events .hero-stat strong { font-size: 20px; }
.cf-events .layout { gap: 12px; }
.cf-events :where(.panel,.card) { border-color: var(--cf-border); border-radius: 16px; box-shadow: none; }
.cf-events .panel { padding: 12px; }
.cf-events .panel h2,.cf-events .results h2 { margin-bottom: 10px; }
.cf-events .field:has(> input),.cf-events .field:has(> select) { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 6px; margin: 8px 0; }
.cf-events .field :where(input,select) { min-width: 0; margin-top: 0; padding: 8px 10px; min-height: 40px; border-color: var(--cf-border); border-radius: var(--cf-radius); }
.cf-events .field textarea { border-color: var(--cf-border); border-radius: var(--cf-radius); }
.cf-events .btn { min-height: 38px; padding: 0 11px; background: var(--cf-primary); border-radius: var(--cf-radius); }
.cf-events .btn.secondary { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-events .btn.outline { background: #fff; border-color: var(--cf-border); color: var(--cf-text); }
.cf-events .card { padding: 12px; }
.cf-events .pill { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-events .pill.free { background: #ecfdf5; color: #047857; }
.cf-events .search-row { gap: 6px; margin-bottom: 10px; }
.cf-events .source-guide { margin: 10px 0; border-color: var(--cf-border); background: var(--cf-page); }

/* Config, payment and legacy player keep the same global shell language. */
.cf-admin #back-home-btn-admin { min-width: 0; flex: none; }
.cf-admin .input-row:not(:has(textarea)) { gap: 8px; margin-bottom: 6px; }
.cf-admin .input-row:not(:has(textarea)) label { line-height: 1.25; }
.cf-pay { --primary: var(--cf-primary); --primary-soft: var(--cf-primary-soft); --border: var(--cf-border); --radius: 16px; }
.cf-pay .hero { background: var(--cf-surface); color: var(--cf-text); border: 1px solid var(--cf-border); box-shadow: none; padding: 14px; border-radius: 16px; }
.cf-pay .hero p { color: var(--cf-muted); }
.cf-pay .hero > p { display: none; }
.cf-pay .hero-chip { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }
.cf-pay .section { margin-top: 10px; padding: 12px; border-radius: 16px; box-shadow: none; }
.cf-pay .hero h1 { margin: 8px 0 4px; font-size: 22px; }
.cf-legacy .glass-panel { background: var(--cf-surface); border-bottom: 1px solid var(--cf-border); }
.cf-legacy #legacyAppHeader .h-16 { height: auto; min-height: 64px; gap: 8px; }
.cf-legacy #legacyAppHeader .legacy-home { order: 3; }
.cf-legacy #legacyAppHeader .relative { order: 2; margin-left: auto; }
.cf-legacy #legacyAppHeader .relative button { width: 36px; height: 36px; padding: 8px; border-radius: var(--cf-radius); background: var(--cf-primary); color: #fff; box-shadow: none; }
.cf-legacy #legacyAppHeader .relative button[title="设置"] { background: var(--cf-primary-soft); color: var(--cf-primary-pressed); }

@media (max-width: 600px) {
  .cf-ui .cf-nav-pair { gap: 4px; }
  .cf-ui .cf-nav-pair :is(.cf-help-button,.cf-home-button) {
    width: auto !important; min-width: 64px !important;
    height: 44px !important; min-height: 44px !important;
    font-size: max(11px,.6875rem) !important; padding-inline: 8px !important;
  }
  .cf-admin .cf-nav-pair #back-home-btn-admin { width: 64px !important; min-width: 64px !important; height: 36px !important; padding: 0 4px !important; font-size: 11px !important; }
  .cf-ui .cf-home-button { min-height: 36px; padding-inline: 9px; font-size: 11px; }
  .cf-ui :is(#urlModal,#textModal,#meetingModal,#musicModal,#tourismModal) .modal-content { padding: 12px; }
  .cf-ui :is(#urlModal,#textModal,#meetingModal,#musicModal,#tourismModal) .modal-content > div:first-child h3 { font-size: 15px; }
  .cf-ui #meetingModal .module-modal-actions { gap: 4px; }
  .cf-health header .bar { gap: 5px; }
  .cf-health header h1 { font-size: 15px; }
  .cf-health #profileSelect { width: 64px; max-width: 64px; flex-basis: 64px; }
  .cf-health header .bar button { padding-inline: 5px; min-height: 36px; }
  .cf-health nav { padding: 2px 0 8px; }
  .cf-health .card { padding: 10px; margin-bottom: 8px; }
  .cf-events .hero-stat { margin-top: 8px; }
  .cf-events .hero .lead { font-size: 12px; }
  .cf-pay .shell { padding: 10px 12px 32px; }
  .cf-ui :is(#urlModal,#textModal,#meetingModal,#musicModal,#reminderModal,#rssConfigModal,#accountingTabContainer) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size: 16px; }
  .cf-ui :is(#tripPlannerModal,#tourismJourneyModal) :where(input:not([type="checkbox"]),select,textarea) { font-size: 16px; }
  .cf-ui :is(#trackModal,#trackHistoryModal,#rssAdminModal,#rssConfigModal,#userModal,#adminSystemModal,#offlineSyncCenterModal,#userRecycleBinModal,#liveTranslationModal,#recordingHistoryModal) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),select,textarea) { font-size: 16px; }
  .cf-events :where(input,select,textarea),.cf-pay :where(input,select,textarea),.cf-admin :where(input,select,textarea) { font-size: 16px; }
  .cf-legacy #legacyAppHeader .h-16 { flex-wrap: wrap; padding-block: 8px; }
  .cf-legacy #legacyAppHeader .legacy-home { order: 2; margin-left: auto; }
  .cf-legacy #legacyAppHeader .relative { order: 3; width: 100%; }
  .cf-legacy #legacyAppHeader .relative > .flex { justify-content: flex-end; }
}
@media (max-width: 430px) {
  .cf-admin .admin-user-pill { display: none !important; }
  .cf-events .top .eyebrow { display: none; }
  .cf-ui #diaryModal .diary-toolbar > strong { display: none; }
  .cf-ui #meetingModal [data-audio-config] label:has(> select),
  .cf-ui #liveTranslationModal [data-audio-config] label:has(> select) { display: block; }
  .cf-ui #meetingModal [data-audio-config] label:has(> select) select,
  .cf-ui #liveTranslationModal [data-audio-config] label:has(> select) select { width: 100%; margin-top: 4px; }
}
@media (max-width: 350px) {
  .cf-health header h1 { font-size: 13px; }
  .cf-health #profileSelect { width: 52px; max-width: 52px; flex-basis: 52px; }
  .cf-health header .bar button,.cf-health .header-home { padding-inline: 4px; font-size: 10px; }
  .cf-events .field:has(> input),.cf-events .field:has(> select) { grid-template-columns: 80px minmax(0,1fr); }
}

/* Keep phone-first workspaces readable on a desktop without constraining maps or media viewers. */
@media (min-width: 900px) and (pointer: fine) {
  .cf-ui #diaryHomeModal > :is(.diary-toolbar, .diary-save-status),
  .cf-ui #diaryModal > :is(.diary-toolbar, .diary-dictation, #diaryGuidePlaylist) {
    box-sizing: border-box;
    width: min(100%, 680px);
    margin-inline: auto;
  }

  .cf-ui #historyModal > :is(.diary-toolbar, .flex-1) {
    box-sizing: border-box;
    width: min(100%, 800px);
    margin-inline: auto;
  }

  .cf-ui #accountingTabContainer > .flex-col {
    box-sizing: border-box;
    width: min(100%, 900px);
    height: 100%;
    margin-inline: auto;
  }

  .cf-ui #accountingHistoryModal > :is(div) {
    box-sizing: border-box;
    width: min(100%, 980px);
    margin-inline: auto;
  }

  .cf-ui #musicModal.music-workspace.cf-unified > .music-page-content {
    max-width: 1040px;
    margin-inline: auto;
  }

  .cf-ui #liveTranslationModal #liveTranslationContent,
  .cf-ui #recordingHistoryModal .modal-content {
    box-sizing: border-box;
    max-width: 900px;
    margin-inline: auto;
  }
}