/* ==========================================================
   Sound Routes Responsive Layer
   All responsive rules live here. Core/screen files define the
   desktop baseline. This file scales tokens and layout for medium,
   small, and tiny viewports.
   ========================================================== */

/* Original media block 1, from styles.css line 771. */
@media (max-width: 760px) {
  .screen { padding-inline: 10px; }
  .hero-media { min-height: 215px; border-radius: 20px; }
  .hero-top-row { padding: 12px; }
  .hero-header-actions { gap: 7px; }
  .embedded-header-content h1, .hero-copy h1 { font-size: clamp(1.55rem, 8vw, 2.6rem); }
  .embedded-header-content p, .hero-copy p { font-size: .86rem; }
  .group-summary-pill { font-size: .82rem; padding: 7px 10px; }
  .tabs, .profile-hub-actions, .app-action-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  .profile-hub-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tab-btn, .profile-hub-actions .btn-icon, .app-action-bar .tab-btn { min-height: var(--button-h);  font-size: .78rem; }
  .auth-grid, .field-grid, .settings-grid, .profile-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ui-section-card, .signup-field-box, .profile-description-field, .password-panel, .visibility-panel, .groups-section, .role-section, .settings-card { padding: 12px; }
  .label-row { font-size: .88rem; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea { min-height: 44px; padding: 9px 11px; font-size: .86rem; }
  .auth-image-field.ui-image-editor,
  .photo-crop-layout.ui-image-editor,
  #photoField .photo-crop-layout,
  #recordingPanel #photoField .photo-crop-layout {
    grid-template-columns: minmax(170px, 1fr) max-content;
    gap: 10px;
  }

  .photo-adjust-control { min-height: 58px; padding: 7px 9px; }
  .auth-avatar-editor, .photo-preview-shell { grid-template-columns: repeat(4, 34px); gap: 6px; }
  .recording-item, .group-card, .soundwalk-card { grid-template-columns: minmax(0,1fr) 76px; }
  .entry-photo, .recording-photo, .group-photo, .soundwalk-photo { width: 76px; height: 76px; }
  #mapCaptureArea { width: min(100%, 700px); }
  #map, .map {
    min-height: min(320px, 48vh);
    height: clamp(280px, 46vh, 420px);
  }
}

/* Original media block 2, from styles.css line 801. */
@media (max-width: 460px) {
  .auth-grid, .field-grid, .settings-grid, .profile-overview-grid { grid-template-columns: 1fr; }
  .auth-image-field.ui-image-editor,
  .photo-crop-layout.ui-image-editor,
  #photoField .photo-crop-layout,
  #recordingPanel #photoField .photo-crop-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "preview" "controls";
    justify-items: center;
  }
  .auth-image-field.ui-image-editor { grid-template-areas: "label" "preview" "controls"; }
  .photo-adjustments { width: min(100%, 320px); }
  .choice-grid, .visibility-options, .mode-choice-grid, .gender-choice-grid { grid-template-columns: 1fr; }
  .profile-title-row { align-items: flex-start; }
  #profileTitle { font-size: 2rem; }
  #map, .map {
    min-height: min(300px, 46vh);
    height: clamp(260px, 44vh, 360px);
  }
}

/* Original media block 3, from styles.css line 1059. */
@media (max-width: 760px) {
  .header-admin-row {
    top: 12px;
    right: 12px;
    gap: 7px;
  }

  .embedded-header-content h2 {
    grid-template-columns: clamp(46px, 14vw, 64px) minmax(0, 1fr);
    column-gap: 10px;
  }

  .embedded-header-content h2::before {
    width: clamp(46px, 14vw, 64px);
    border-radius: 14px;
  }

  .embedded-header-content h2 .main-title-line:first-child {
    font-size: clamp(1.45rem, 7.2vw, 2.15rem);
  }

  .embedded-header-content h2 .main-title-line:last-child {
    font-size: clamp(.78rem, 3.1vw, .98rem);
  }
}

/* Original media block 4, from styles.css line 1091. */
@media (max-width: 460px) {
  .gender-choice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Original media block 5, from styles.css line 1387. */
@media (max-width: 760px) {
  .panel-tabs,
  .tabs,
  .profile-hub-actions,
  .app-action-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }

  .tab-btn,
  .profile-hub-actions .btn-icon,
  .app-action-bar .tab-btn {
    padding: 0 8px;
    font-size: .74rem;
  }

  .archive-toggle-row,
  .map-toggle-row,
  .library-toggle-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .archive-toggle {
    grid-template-columns: var(--toggle-icon-size) minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
  }
}

/* Original media block 6, from styles.css line 1634. */
@media (max-width: 760px) {
  #mainScreen .header-banner .header-content {
    padding: 16px;
  }

  #mainScreen .header-banner .main-header-top h2 {
    grid-template-columns: clamp(46px, 14vw, 64px) minmax(0, 1fr);
    column-gap: 10px;
  }

  #mainScreen .header-banner .main-header-top h2::before {
    width: clamp(46px, 14vw, 64px);
    border-radius: 14px;
  }

  #mainScreen .header-banner .main-header-top h2 .main-title-line:first-child {
    font-size: clamp(1.45rem, 7.2vw, 2.15rem);
  }

  #mainScreen .header-banner .main-header-top h2 .main-title-line:last-child {
    font-size: clamp(.78rem, 3.1vw, .98rem);
  }

  .group-summary-pill {
    font-size: .72rem;
    gap: 5px;
    padding-inline: 8px;
  }

  .group-pill-stat-label {
    display: none;
  }
}

/* Original media block 7, from styles.css line 1861. */
@media (max-width: 560px) {
  .intro-welcome-card {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
  }

  .intro-welcome-card img {
    width: 84px;
    height: 84px;
    border-radius: 16px;
  }

  .choice-card-inner .choice-info {
    font-size: .72rem;
  }
}

/* Original media block 8, from styles.css line 2117. */
@media (max-width: 620px) {
  .audio-effects-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .audio-effect-toggle {
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    gap: 7px;
    padding: 9px 8px;
  }

  .audio-effect-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .audio-effect-icon svg {
    width: 16px;
    height: 16px;
  }

  .audio-effect-label {
    font-size: .68rem;
  }

  .audio-effect-description {
    font-size: .68rem;
    padding: 7px;
  }
}

/* Original media block 9, from styles.css line 2415. */
@media (max-width: 560px) {
  .intro-welcome-card img,
  .profile-title-photo {
    width: 62px !important;
    height: 62px !important;
  }

  .intro-welcome-kicker,
  #profileTitleMode {
    font-size: .72rem !important;
  }
}

/* Original media block 10, from styles.css line 2738. */
@media (max-width: 560px) {
  .recording-item-top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .recording-title-line {
    gap: 8px !important;
  }

  .recording-actions {
    gap: 6px !important;
  }

  .recording-details-row {
    grid-template-columns: minmax(0, 1fr) clamp(76px, 22vw, 96px) !important;
    gap: 10px !important;
  }
}

/* Original media block 11, from styles.css line 3851. */
@media (max-width: 520px) {
  :root {
    --button-h: 48px;
    --button-w: 136px;
    --button-min-w: 112px;
    --button-font: .64rem;
    --icon-button-size: 40px;
    --mini-icon-button-size: 36px;
    --image-preview: 140px;
    --image-control-size: 32px;
  }

  #loginPanel,
  #passwordResetPanel .reset-password-grid,
  #signupPanel .signup-core-box .auth-grid,
  #signupPanel .signup-password-box .auth-grid,
  #profileEditPanel .profile-fields-section,
  #profileEditPanel .auth-password-block .auth-grid,
  .auth-grid,
  .field-grid,
  .settings-grid,
  .profile-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  #signupPanel .signup-role-layout,
  #profileEditPanel .profile-fields-section > div:has(#profileUserTypeSelect),
  .auth-image-field.ui-image-editor,
  .photo-crop-layout.ui-image-editor,
  #photoField .photo-crop-layout,
  #recordingPanel #photoField .photo-crop-layout,
  .intro-photo-crop-layout.ui-image-editor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .choice-grid,
  .visibility-options,
  .mode-choice-grid,
  .soundmap-filter-grid,
  .library-filter-grid,
  .signup-organization-choice-grid,
  .visibility-grid,
  #visibilityChoices {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .auth-avatar-editor,
  .photo-preview-shell {
    grid-template-columns: repeat(4, var(--image-control-size)) !important;
    gap: 5px !important;
  }

  .role-add-btn,
  #signupAddUserTypeBtn,
  #profileAddUserTypeBtn,
  #signupAddOrganizationBtn,
  #profileAddOrganizationBtn,
  #createGroupMemberAddBtn {
    width: 52px !important;
    min-width: 52px !important;
  }
}

/* 1.4.0 repair pass: map frame, centered modals, profile counts, and live trim color. */
#mapCaptureArea {


  aspect-ratio: auto !important;

}

#mapCaptureArea #map,
#map {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

.map-location-strip {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 520 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.map-location-strip .diagnostic-pill {
  width: auto !important;
  max-width: min(48%, 310px) !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  text-align: center !important;
  pointer-events: auto !important;
}

.map-action-stack,
.map-action-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

#completeSoundwalkBtn {
  width: auto !important;
  min-width: 0 !important;
  max-width: min(100%, 360px) !important;
  min-height: 42px !important;
  padding: 8px 14px !important;
  white-space: normal !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

.confirm-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  background: rgba(18, 29, 39, .34) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

.confirm-modal-backdrop.hidden {
  display: none !important;
}

.confirm-modal-card {
  width: min(94vw, 430px) !important;
  margin: 0 !important;
  border-radius: var(--radius-md, 16px) !important;
  border: 1px solid rgba(190, 207, 218, .92) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 24px 70px rgba(15,23,32,.24) !important;
}

.confirm-modal-card h4 {
  margin: 0 !important;
  padding: 20px 22px 6px !important;
  color: var(--text, #27313d) !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
}

.confirm-modal-card p {
  margin: 0 !important;
  padding: 0 22px 16px !important;
  color: var(--text-soft, #5f6f7f) !important;
  font-size: .9rem !important;
  line-height: 1.38 !important;
}

.confirm-modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 0 22px 22px !important;
}

.confirm-modal-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 112px !important;
  min-height: 42px !important;
  padding: 9px 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  box-shadow: 0 10px 24px rgba(15,23,32,.13) !important;
}

#confirmModalCancelBtn {
  background: linear-gradient(135deg, #8ea0ab, #71828e) !important;
}

#confirmModal[data-intent="primary"] #confirmModalOkBtn {
  background: linear-gradient(135deg, #5f8b74, #7c9368) !important;
}

#confirmModal[data-intent="danger"] #confirmModalOkBtn {
  background: linear-gradient(135deg, #c94b55, #a93540) !important;
}

#confirmModalCancelBtn.hidden {
  display: none !important;
}

#profileOverviewGender .profile-gender-icon,
#profileOverviewGender .profile-gender-value svg {
  color: var(--profile-user-color, var(--brand)) !important;
}

#profileOverviewSoundwalkRating .profile-rating-stars .entry-rating-star,
#profileOverviewSoundsRating .profile-rating-stars .entry-rating-star,
#profileTitleRating .profile-rating-stars .entry-rating-star {
  color: #c4913e !important;
}

#profileOverviewSoundwalkRating .profile-rating-stars .entry-rating-star:not(.filled),
#profileOverviewSoundsRating .profile-rating-stars .entry-rating-star:not(.filled),
#profileTitleRating .profile-rating-stars .entry-rating-star:not(.filled) {
  color: rgba(95, 111, 127, .34) !important;
}

#profileOverviewSoundwalks .profile-stat-breakdown,
#profileOverviewSounds .profile-stat-breakdown {
  vertical-align: middle !important;
  align-items: center !important;
}

#profileOverview .profile-stat-total {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 23px !important;
  margin-right: 6px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

#profileOverviewSoundwalks .profile-stat-public svg,
#profileOverviewSounds .profile-stat-public svg,
.group-summary-pill .group-pill-mini-action.sounds-public svg {
  color: var(--public-color, #4f83a8) !important;
}

#profileOverviewSoundwalks .profile-stat-private svg,
#profileOverviewSounds .profile-stat-private svg,
.group-summary-pill .group-pill-mini-action.sounds-private svg {
  color: var(--private-color, #a7664f) !important;
}

#recordingPanel .trim-label,
#recordingPanel .trim-time-value,
#recordingPanel .trim-time-value.duration,
#profileEditSoundPanel .trim-label,
#profileEditSoundPanel .trim-time-value,
#profileEditSoundPanel .trim-time-value.duration {
  color: var(--recording-user-color, var(--current-user-color, var(--brand))) !important;
}

.app-credit {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: .28em !important;
  line-height: 1.45 !important;
}

/* Original media block 12, from styles.css line 4617. */
@media (max-width: 640px) {
  #loginPanel,
  #signupPanel .auth-grid,
  #profileEditPanel .auth-grid,
  #signupPanel .signup-role-layout,
  #profileEditPanel .signup-role-layout,
  .choice-grid.cols-2,
  .visibility-grid,
  .signup-organization-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .btn-icon:not(.recording-action-btn):not(.library-page-btn):not(.map-floating-btn):not(.photo-action-btn):not(.preview-history-btn):not(.photo-history-btn):not(.choice-icon-button) {
    min-height: 42px !important;
    padding-inline: 12px !important;
    font-size: .68rem !important;
  }

  .embedded-header-content,
  .auth-banner-media .embedded-header-content,
  #introScreen .embedded-header-content,
  #mainScreen .embedded-header-content,
  #profileScreen .embedded-header-content,
  #settingsScreen .embedded-header-content {
    padding-top: 42px !important;
    padding-bottom: 22px !important;
  }

  .embedded-header-content h2,
  #mainScreen .header-banner .main-header-top h2 {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    margin-top: 24px !important;
  }

  .embedded-header-content h2::before,
  #mainScreen .header-banner .main-header-top h2::before {
    width: 52px !important;
    height: 52px !important;
  }

  .photo-crop-layout.ui-image-editor,
  #photoField .photo-crop-layout,
  #recordingPanel #photoField .photo-crop-layout,
  .intro-photo-crop-layout.ui-image-editor,
  .auth-image-field.ui-image-editor {
    grid-template-columns: minmax(0, 1fr) minmax(var(--ui-image-preview-size), max-content) !important;
  }

  .library-pagination,
  .profile-list-pagination {
    align-items: center !important;
  }
}

/* Original media block 13, from styles.css line 5132. */
@media (max-width: 520px) {
  .embedded-header-content,
  #mainScreen .header-banner .main-header-top,
  .auth-banner-media .embedded-header-content,
  #introScreen .embedded-header-content,
  #profileScreen .embedded-header-content,
  #settingsScreen .embedded-header-content {
    padding-top: 44px !important;
    padding-bottom: 20px !important;
  }

  .embedded-header-content h2,
  #mainScreen .header-banner .main-header-top h2 {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    margin-top: 22px !important;
    column-gap: 10px !important;
  }

  .embedded-header-content h2::before,
  #mainScreen .header-banner .main-header-top h2::before {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }

  .embedded-header-content h2 .main-title-line:first-child,
  #mainScreen .header-banner .main-header-top h2 .main-title-line:first-child {
    font-size: 1.58rem !important;
  }

  .embedded-header-content h2 .main-title-line:last-child,
  #mainScreen .header-banner .main-header-top h2 .main-title-line:last-child {
    max-width: 27ch !important;
    font-size: .8rem !important;
  }

  .photo-crop-layout.ui-image-editor,
  #photoField .photo-crop-layout,
  #recordingPanel #photoField .photo-crop-layout,
  .intro-photo-crop-layout.ui-image-editor,
  .auth-image-field.ui-image-editor {
    grid-template-columns: minmax(0, 1fr) minmax(130px, max-content) !important;
  }

  .photo-adjustments,
  .ui-image-editor__controls {
    max-width: 100% !important;
  }
}

/* Original media block 14, from styles.css line 5303. */
@media (max-width: 520px) {
  .profile-more-filters .saved-filter-grid,
  .library-more-filters .saved-filter-grid,
  .saved-filter-grid.profile-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #signupPanel .signup-role-layout,
  #profileEditPanel .signup-role-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

/* Original media block 15, from styles.css line 5484. */
@media (max-width: 760px) {
  .profile-more-filters .saved-filter-grid,
  .library-more-filters .saved-filter-grid,
  .saved-filter-grid.profile-filter-grid,
  .library-filter-grid,
  .soundmap-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Original media block 16, from styles.css line 5494. */
@media (max-width: 480px) {
  .profile-more-filters .saved-filter-grid,
  .library-more-filters .saved-filter-grid,
  .saved-filter-grid.profile-filter-grid,
  .library-filter-grid,
  .soundmap-filter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Original media block 17, from styles.css line 5717. */
@media (max-width: 640px) {
  #signupPanel .auth-image-field.ui-image-editor,
  #profileEditPanel .auth-image-field.ui-image-editor,
  #profileCreateGroupPanel .auth-image-field.ui-image-editor {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "label"
      "preview"
      "controls" !important;
    max-width: 100% !important;
  }

  #signupPanel .auth-image-field.ui-image-editor .photo-crop-layout,
  #profileEditPanel .auth-image-field.ui-image-editor .photo-crop-layout,
  #profileCreateGroupPanel .auth-image-field.ui-image-editor .photo-crop-layout {
    max-width: 100% !important;
  }
}

/* Original media block 18, from styles.css line 5999. */
@media (max-width: 680px) {
  #signupPanel .auth-image-field.ui-image-editor {
    grid-template-columns: minmax(0, 1fr) minmax(132px, .72fr) !important;
    grid-template-areas:
      "label label"
      "controls preview" !important;
    gap: 12px !important;
  }

  #signupPanel .auth-image-field.ui-image-editor .auth-avatar-editor {
    --sr-image-editor-control-size: 32px;
  }
}

/* Original media block 19, from styles.css line 6013. */
@media (max-width: 480px) {
  #signupPanel .auth-image-field.ui-image-editor {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "label"
      "preview"
      "controls" !important;
  }

  #signupPanel .auth-image-field.ui-image-editor .auth-avatar-editor {
    justify-self: center !important;
  }
}

/* ==========================================================
   Final responsive stabilization layer
   This block intentionally comes last. It scales the shared tokens
   and keeps compact two-column mobile layouts for paired fields,
   while allowing full-width controls for long content.
   ========================================================== */
@media (max-width: 760px) {
  :root {
    --fs-body: 14px;
    --fs-label: .86rem;
    --fs-small: .74rem;
    --control-h: 44px;
    --button-h: 46px;
    --button-w: 148px;
    --button-min-w: 112px;
    --button-pad-x: 10px;
    --button-font: .74rem;
    --icon-button-size: 40px;
    --header-btn-size: 40px;
    --mini-icon-button-size: 34px;
    --mini-btn-size: 34px;
    --mini-btn-icon: 15px;
    --label-icon-size: 16px;
    --toggle-icon-size: 36px;
    --gap: 12px;
    --image-preview: 138px;
    --image-editor-control-size: 34px;
  }

  body { font-size: var(--fs-body); }

  .hero-content,
  .auth-panel,
  .ui-card,
  .profile-main-card,
  .panel-card,
  .settings-panel,
  .content-card,
  .section-card {
    padding: clamp(14px, 3vw, 22px);
  }
}

@media (max-width: 520px) {
  :root {
    --fs-body: 13px;
    --fs-label: .78rem;
    --fs-small: .70rem;
    --control-h: 42px;
    --button-h: 44px;
    --button-w: 132px;
    --button-min-w: 0;
    --button-pad-x: 8px;
    --button-font: .68rem;
    --icon-button-size: 38px;
    --header-btn-size: 38px;
    --mini-icon-button-size: 32px;
    --mini-btn-size: 32px;
    --mini-btn-icon: 14px;
    --toggle-icon-size: 34px;
    --gap: 9px;
    --image-preview: 128px;
    --image-editor-control-size: 32px;
  }

  body { font-size: var(--fs-body); }

  .screen {
    padding-inline: 8px;
  }

  .label-row {
    font-size: var(--fs-label);
    gap: 6px;
    margin: 8px 0 6px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
  select,
  textarea {
    min-height: var(--control-h);
    padding: 8px 9px;
    font-size: .78rem;
  }

  input[type="color"] {
    width: 56px;
    height: var(--control-h);
  }

  .button-bar,
  .form-actions,
  .profile-ok-row,
  .profile-groups-actions,
  .profile-soundwalks-actions,
  .auth-login-actions,
  .auth-reset-actions,
  .summary-modal-actions,
  .confirm-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    justify-content: stretch;
  }

  .button-bar .btn-icon,
  .form-actions .btn-icon,
  .profile-ok-row .btn-icon,
  .auth-login-actions .btn-icon,
  .auth-reset-actions .btn-icon,
  .summary-modal-actions .btn-icon,
  .confirm-modal-actions button,
  #authModeToggleBtn,
  #loginBtn,
  #forgotPasswordBtn,
  #sendResetEmailBtn,
  #confirmResetPasswordBtn,
  #resetBackToLoginBtn,
  #resetCancelBtn,
  #signupBtn,
  #profileUpdateBtn,
  #profileAbortBtn,
  #profileDeleteUserBtn,
  #createGroupSaveBtn,
  #createGroupAbortBtn,
  #startWalkBtn,
  #saveEntryBtn,
  #abortEditBtn,
  #summaryReportBtn,
  #summaryOkBtn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: var(--button-pad-x);
    font-size: var(--button-font);
  }

  #loginPanel,
  #passwordResetPanel .reset-password-grid,
  #signupPanel .signup-core-box .auth-grid,
  #signupPanel .signup-password-box .auth-grid,
  #profileEditPanel .profile-fields-section,
  #profileEditPanel .auth-password-block .auth-grid,
  .auth-grid,
  .field-grid,
  .settings-grid,
  .profile-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .auth-grid .full,
  .field-grid .full,
  .wide,
  textarea,
  .profile-overview-wide-cell,
  .profile-description-field,
  .visibility-panel,
  .password-panel,
  .groups-section,
  .role-section,
  .signup-description-box,
  .profile-description-box,
  .auth-message,
  .status-message,
  .error-text {
    grid-column: 1 / -1;
  }

  .choice-grid,
  .visibility-options,
  .mode-choice-grid,
  .soundmap-filter-grid,
  .library-filter-grid,
  .archive-toggle-row,
  .map-toggle-row,
  .library-toggle-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .gender-choice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .choice-card-inner,
  .gender-choice,
  .soundmap-toggle,
  .library-toggle,
  .archive-toggle {
    min-height: 52px;
    padding: 9px;
    gap: 8px;
  }

  .tabs,
  .panel-tabs,
  .profile-hub-actions,
  .app-action-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 7px;
  }

  .tab-btn,
  .profile-hub-actions .btn-icon,
  .app-action-bar .tab-btn {
    min-height: var(--button-h);
    padding-inline: 6px;
    font-size: .66rem;
  }

  .auth-image-field.ui-image-editor,
  .photo-crop-layout.ui-image-editor,
  #photoField .photo-crop-layout,
  #recordingPanel #photoField .photo-crop-layout,
  #signupPanel .auth-image-field.ui-image-editor {
    grid-template-columns: minmax(0, 1fr) minmax(118px, .70fr);
    grid-template-areas:
      "label label"
      "controls preview";
    gap: 10px;
    align-items: start;
  }

  .auth-avatar-editor,
  .photo-preview-shell,
  #signupPanel .auth-image-field.ui-image-editor .auth-avatar-editor {
    grid-template-columns: repeat(4, var(--image-editor-control-size));
    gap: 6px;
  }
}

@media (max-width: 380px) {
  :root {
    --button-font: .64rem;
    --mini-btn-size: 30px;
    --mini-btn-icon: 13px;
    --image-preview: 116px;
    --image-editor-control-size: 30px;
  }

  #loginPanel,
  #passwordResetPanel .reset-password-grid,
  .auth-reset-fields,
  .auth-grid.force-stack-tiny,
  .field-grid.force-stack-tiny {
    grid-template-columns: 1fr;
  }

  .auth-image-field.ui-image-editor,
  .photo-crop-layout.ui-image-editor,
  #photoField .photo-crop-layout,
  #recordingPanel #photoField .photo-crop-layout,
  #signupPanel .auth-image-field.ui-image-editor {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "preview"
      "controls";
    justify-items: stretch;
  }

  .auth-avatar-editor,
  .photo-preview-shell,
  #signupPanel .auth-image-field.ui-image-editor .auth-avatar-editor {
    justify-self: center;
  }
}


/* ==========================================================
   Global app header responsive scaling
   Same structure in all states: actions top, brand center, pill bottom.
   ========================================================== */
@media (max-width: 760px) {
  .app > [data-component="app-header"],
  .app > [data-include] {
    width: min(calc(100% - 20px), 964px);
    margin-top: 18px;
  }

  .app-header {
    min-height: clamp(218px, 40vw, 300px);
    border-radius: 20px;
    padding: 14px;
  }

  .app-header-logo {
    width: clamp(42px, 9vw, 62px);
    height: clamp(42px, 9vw, 62px);
  }

  .app-header-title-main { font-size: clamp(1.45rem, 5.8vw, 2.55rem); }
  .app-header-title-sub { font-size: clamp(.68rem, 2.35vw, .92rem); }
}

@media (max-width: 520px) {
  .app > [data-component="app-header"],
  .app > [data-include] {
    width: min(calc(100% - 20px), 964px);
    margin-top: 14px;
  }

  .app-header {
    min-height: clamp(212px, 56vw, 270px);
    padding: 12px;
  }

  .app-header-actions { gap: 6px; }
  .app-header-title { column-gap: 9px; }

  .app-header-logo {
    width: clamp(38px, 11vw, 52px);
    height: clamp(38px, 11vw, 52px);
    border-radius: 12px;
  }

  .app-header-title-main { font-size: clamp(1.25rem, 7vw, 2rem); }
  .app-header-title-sub {
    font-size: clamp(.62rem, 2.8vw, .78rem);
    line-height: 1.16;
  }

  .app-header-version {
    min-height: 22px;
    padding: 4px 9px;
    font-size: .56rem;
  }

  .app-header-pill-row .group-summary-pill {
    font-size: .68rem;
    padding: 5px 8px;
  }
}

@media (max-width: 380px) {
  .app-header { min-height: 208px; }
  .app-header-title-main { font-size: clamp(1.15rem, 7.5vw, 1.75rem); }
  .app-header-title-sub { font-size: .58rem; }
}


/* ==========================================================
   Header refinement pass: compact pill, square header icons, left lockup
   ========================================================== */

/* Keep the shared header visually aligned with the main content panel. */


/* Brand lockup starts from the left edge of the banner content, not from a floating center block. */
.app-header-brand {
  justify-self: start !important;
  width: min(720px, calc(100% - clamp(44px, 14vw, 180px))) !important;
  max-width: 100% !important;
  justify-items: start !important;
  text-align: left !important;
}

/* Four top buttons: use the same compact mini-button scale. */
.app-header-actions {
  top: auto !important;
  right: auto !important;
}

.app-header-action,
#modeBtn.app-header-action,
#profileBtn.app-header-action,
#settingsBtn.app-header-action,
#logoutBtn.app-header-action {
  width: var(--mini-btn-size, 30px) !important;
  height: var(--mini-btn-size, 30px) !important;
  min-width: var(--mini-btn-size, 30px) !important;
  min-height: var(--mini-btn-size, 30px) !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border-radius: var(--mini-btn-radius, 9px) !important;
  color: #fff !important;
}

.app-header-action svg,
#modeBtn.app-header-action svg,
#profileBtn.app-header-action svg,
#settingsBtn.app-header-action svg,
#logoutBtn.app-header-action svg {
  width: var(--mini-btn-icon, 15px) !important;
  height: var(--mini-btn-icon, 15px) !important;
  flex: 0 0 auto !important;
}

/* Pill: always compact/iconic from the first rendered state. No full labels on large screens. */
.app-header-pill-row .group-summary-pill,
.group-summary-pill {
  display: inline-flex !important;

  justify-content: center !important;


  gap: clamp(4px, .7vw, 7px) !important;
  min-height: clamp(30px, 3vw, 36px) !important;
  max-width: min(94%, 720px) !important;
  padding: clamp(4px, .65vw, 6px) clamp(8px, 1.2vw, 12px) !important;
  overflow: hidden !important;
}


.group-summary-pill .group-pill-item,
.group-summary-pill .group-pill-action,
.group-summary-pill .group-pill-mini-action {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: clamp(22px, 2.2vw, 26px) !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  gap: 4px !important;
}

.group-summary-pill .group-pill-action {
  padding-inline: 1px !important;
}


.group-summary-pill .group-pill-count,
.group-summary-pill .group-pill-mini-action span {
  font-size: clamp(.68rem, 1.1vw, .78rem) !important;
  line-height: 1 !important;
}

@media (max-width: 760px) {
  .app-header-brand {
    width: min(660px, calc(100% - 64px)) !important;
  }
}

@media (max-width: 520px) {
  .app-header-brand {
    width: 100% !important;
  }

  .app-header-action,
  #modeBtn.app-header-action,
  #profileBtn.app-header-action,
  #settingsBtn.app-header-action,
  #logoutBtn.app-header-action {
    width: var(--mini-btn-size, 30px) !important;
    height: var(--mini-btn-size, 30px) !important;
    min-width: var(--mini-btn-size, 30px) !important;
    min-height: var(--mini-btn-size, 30px) !important;
    border-radius: var(--mini-btn-radius, 9px) !important;
  }

  .app-header-action svg,
  #modeBtn.app-header-action svg,
  #profileBtn.app-header-action svg,
  #settingsBtn.app-header-action svg,
  #logoutBtn.app-header-action svg {
    width: var(--mini-btn-icon, 15px) !important;
    height: var(--mini-btn-icon, 15px) !important;
  }

  .group-summary-pill .group-pill-name {
    max-width: 88px !important;
  }
}

/* ==========================================================
   1.4.0 profile / header pill / my sounds targeted pass
   ========================================================== */
.app-header-pill-row .group-summary-pill,
.group-summary-pill {
  min-height: 42px !important;
  padding: 6px 8px !important;
  gap: 6px !important;
  align-items: center !important;

  line-height: 1.05 !important;
}

.group-summary-pill .group-pill-item,
.group-summary-pill .group-pill-action {
  min-height: 30px !important;
  padding: 4px 8px !important;

  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 4px 12px rgba(29,43,56,.10) !important;
  color: #34404a !important;
}


.group-summary-pill .group-pill-action:hover {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.94) !important;
}


.group-summary-pill .group-pill-name,
.group-summary-pill .group-pill-count,
.group-summary-pill .group-pill-stat-label {
  line-height: 1 !important;
}

.group-summary-pill .group-pill-count {
  font-size: .82rem !important;
}

.group-summary-pill .group-pill-stat-label {

  font-size: .66rem !important;
  font-weight: 800 !important;
  color: rgba(52,64,74,.72) !important;
}

.group-summary-pill .group-pill-stat-icon,
.group-summary-pill .group-pill-groups-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  overflow: visible !important;
}

.profile-title-photo {
  padding: 3px !important;
  border: 1px solid rgba(255,255,255,.96) !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(36,55,70,.16) !important;
  cursor: pointer !important;
}

.profile-title-photo:hover {
  transform: translateY(-1px) !important;
}

.profile-group-member-avatar,
.group-pill-avatar,
.profile-title-photo {
  outline: 1px solid rgba(255,255,255,.78) !important;
}

.profile-overview-grid > div > strong {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;

  min-height: 24px !important;
  margin-top: 6px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(46,111,152,.18) !important;
  border-radius: 999px !important;
  background: rgba(46,111,152,.08) !important;


  font-size: .76rem !important;

  line-height: 1.18 !important;

}

#profileOverviewGender,
#profileOverviewGroups,
#profileOverviewSoundwalks,
#profileOverviewSounds {
  font-family: var(--font) !important;
}

#profileOverviewGroups .profile-group-count-detail,
#profileOverviewGroups .profile-group-role-count,
.profile-overview-grid #profileOverviewGroups small,
.profile-overview-grid #profileOverviewGroups .profile-stat-count {
  font-size: .64rem !important;
  line-height: 1.15 !important;
}

#profileEditPanel .profile-fields-section,
#profileEditPanel .profile-description-field,
#profileEditPanel .profile-image-section,
#profileEditPanel .password-panel,
#profileEditPanel .visibility-panel,
#profileEditPanel .groups-section,
#profileEditPanel .role-section {
  background: rgba(246,249,251,.86) !important;
  border-color: rgba(213,224,231,.94) !important;
  box-shadow: 0 8px 20px rgba(36,55,70,.06) !important;
}


.entry-photo.expanded,
.auth-avatar-preview.expanded,
.photo-preview.expanded,
.profile-group-card-image.expanded,
.profile-soundwalk-image.expanded,
.image-zoom-clone {
  width: min(500px, calc(100vw - 20px)) !important;
  height: min(500px, calc(100vw - 20px), calc(100vh - 20px)) !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 20px) !important;
}

.profile-sounds-list-box {
  display: grid !important;
  gap: 14px !important;
  margin-top: 0 !important;
  padding: clamp(16px, 2.4vw, 22px) !important;
  border: 1px solid rgba(213,224,231,.94) !important;
  border-radius: var(--radius) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 26px rgba(36,55,70,.08) !important;
}


.profile-sound-details-toggle {
  width: min(100%, 250px) !important;
  margin: 0 !important;
}


.profile-sound-card {
  background: var(--surface-soft) !important;
}

@media (max-width: 620px) {
  .group-summary-pill .group-pill-stat-label {
    display: none !important;
  }
  .group-summary-pill {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .profile-sounds-actions {
    justify-content: center !important;
  }
}

/* ==========================================================
   1.3.10 profile value rollback / My Sounds refinement
   ========================================================== */
/* Top group/user pill: keep the improved click targets, but make the shell
   and inner clickable pills softer, with dots/parentheses visible again. */


/* Profile overview values: remove the pills. Keep only the cleaner typography
   and the blue value colour, with every value on the line under its label. */
.profile-overview-grid > div > strong {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin-top: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--brand) !important;
  font-family: var(--font) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
}

.profile-overview-grid > div > span {
  display: inline-flex !important;
  align-items: center !important;
}

.profile-overview-grid .profile-location-link,
.profile-overview-grid .profile-gender-value,
.profile-overview-grid .profile-stat-total,
.profile-overview-grid .profile-stat-count,
.profile-overview-grid .entry-rating-summary,
.profile-overview-grid .profile-group-summary,
.profile-overview-grid .profile-group-role,
.profile-overview-grid .profile-group-paren,
.profile-overview-grid .profile-group-separator,
.profile-overview-grid .profile-group-chip-name,
.profile-overview-grid .profile-group-chip em {
  color: var(--brand) !important;
  font-family: var(--font) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
}

.profile-overview-grid .profile-location-link {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-overview-grid .profile-stat-public,
.profile-overview-grid .profile-stat-private,
.profile-overview-grid .profile-rating-pill,
.profile-overview-grid .profile-group-summary-inner,
.profile-overview-grid .profile-group-chip {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-overview-grid .profile-stat-breakdown,
.profile-overview-grid .profile-group-list,
.profile-overview-grid .profile-group-summary-inner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

.profile-overview-grid .profile-group-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-inline-end: 5px !important;
}

.profile-overview-grid .profile-group-chip-avatar,
.profile-overview-grid .profile-gender-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
}

#profileOverviewGroups .profile-group-count-detail,
#profileOverviewGroups .profile-group-role-count,
.profile-overview-grid #profileOverviewGroups small,
.profile-overview-grid #profileOverviewGroups .profile-stat-count,
.profile-overview-grid #profileOverviewGroups .profile-group-role,
.profile-overview-grid #profileOverviewGroups .profile-group-paren,
.profile-overview-grid #profileOverviewGroups .profile-group-separator {
  font-size: .72rem !important;
  line-height: 1.2 !important;
}

.profile-overview-description {
  color: var(--brand) !important;
  font-family: var(--font) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1.34 !important;
}

/* My Sounds: align it visually with My Groups / My Soundwalks. */
#profileSoundsPanel .profile-list-box,
.profile-sounds-list-box {
  display: grid !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: clamp(14px, 2vw, 18px) !important;
  border: 1px solid var(--safe-inner-box-border, rgba(213,224,231,.94)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: var(--safe-inner-box-bg, rgba(246,249,251,.82)) !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.profile-sounds-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.profile-sound-details-toggle {
  width: min(100%, 220px) !important;
  margin-left: auto !important;
}

.profile-sounds-filter-panel {
  border: 1px solid var(--safe-inner-box-border, rgba(213,224,231,.94)) !important;
  background: rgba(255,255,255,.64) !important;
  border-radius: var(--radius-md, 16px) !important;
}

.profile-sounds-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.profile-sounds-list .recording-item,
.profile-sound-card {
  background: var(--surface-soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md, 16px) !important;
}

.profile-sounds-ok-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  grid-template-columns: none !important;
  margin-top: var(--panel-gap, 14px) !important;
}

/* Sound metadata typography, including Duration, must match the rest. */
.recording-meta,
.recording-meta span,
.recording-meta strong {
  font-family: var(--font) !important;
  font-size: .78rem !important;
  line-height: 1.32 !important;
}

@media (max-width: 760px) {
  .profile-sounds-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .profile-sounds-filter-grid {
    grid-template-columns: 1fr !important;
  }
  .profile-sound-details-toggle {
    margin-left: 0 !important;
  }
}

/* ==========================================================
   1.3.11 profile / pill / My Sounds correction pass
   ========================================================== */
:root {
  --profile-value-blue: #1f5e8c;
  --profile-value-blue-soft: rgba(31, 94, 140, .10);
  --profile-value-blue-border: rgba(31, 94, 140, .16);
  --private-color: #a7664f;
}

/* Top Sound Routes pill: thinner, softer, less bright. */
.app-header-pill-row .group-summary-pill,
.group-summary-pill {
  min-height: 32px !important;
  padding: 3px 8px !important;
  gap: 4px !important;
  background: rgba(255,255,255,.46) !important;
  border: 1px solid rgba(255,255,255,.50) !important;
  box-shadow: 0 5px 14px rgba(29,43,56,.08) !important;
  overflow: visible !important;
  line-height: 1.22 !important;
}

.group-summary-pill .group-pill-item,
.group-summary-pill .group-pill-action {
  min-height: 22px !important;
  padding: 1px 5px !important;
  gap: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow: none !important;
  line-height: 1.22 !important;
}

.group-summary-pill .group-pill-user-action {
  padding-left: 2px !important;
  padding-right: 6px !important;
}


.group-summary-pill .group-pill-name,
.group-summary-pill .group-pill-count,
.group-summary-pill .group-pill-stat-label,
.group-summary-pill .group-pill-mini-action span,
.group-summary-pill .group-pill-breakdown,
.group-summary-pill .group-pill-separator {
  font-size: .74rem !important;
  line-height: 1.22 !important;
  color: rgba(42,53,64,.82) !important;
}

.group-summary-pill .group-pill-name {
  max-width: clamp(86px, 15vw, 165px) !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.group-summary-pill .group-pill-stat-label {
  display: inline !important;
  font-size: .61rem !important;
  color: rgba(42,53,64,.62) !important;
}

.group-summary-pill .group-pill-stat-icon,
.group-summary-pill .group-pill-stat-icon svg,
.group-summary-pill .group-pill-mini-action svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
}

.group-summary-pill .group-pill-breakdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  color: rgba(42,53,64,.72) !important;
}

.group-summary-pill .group-pill-mini-action {
  min-height: 20px !important;
  padding: 1px 4px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
}

.group-summary-pill .group-pill-separator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: 1px !important;
  color: rgba(42,53,64,.45) !important;
}

.group-summary-pill .group-pill-mini-action[title="Show private sounds"] svg,
.profile-overview-grid .profile-stat-private svg,
.privacy-badge.private svg,
.profile-visibility-badge.private svg {
  color: var(--private-color) !important;
}

/* View profile: values are plain text under labels, darker blue. */
#profileOverview .profile-overview-grid > div > strong,
#profileOverview .profile-overview-grid > div > strong *,
#profileOverview .profile-overview-description,
#profileOverview .profile-overview-description * {
  color: var(--profile-value-blue) !important;
  font-family: var(--font) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1.32 !important;
}

#profileOverview .profile-overview-grid > div > strong {
  display: block !important;
  width: 100% !important;
  margin-top: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-wrap: anywhere !important;
}

/* Restore only the pills that are useful: last location, public/private counts, and group chips. */
#profileOverviewLastLocation .profile-location-link {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 24px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  border: 1px solid var(--profile-value-blue-border) !important;
  background: var(--profile-value-blue-soft) !important;
  box-shadow: none !important;
  color: var(--profile-value-blue) !important;
}

#profileOverviewSoundwalks .profile-stat-public,
#profileOverviewSoundwalks .profile-stat-private,
#profileOverviewSounds .profile-stat-public,
#profileOverviewSounds .profile-stat-private {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: max-content !important;
  min-height: 23px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  border: 1px solid var(--profile-value-blue-border) !important;
  background: var(--profile-value-blue-soft) !important;
  box-shadow: none !important;
}

#profileOverviewGroups .profile-group-chip {


  gap: 5px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 26px !important;
  margin: 3px 5px 3px 0 !important;
  padding: 3px 8px 3px 4px !important;

  border: 1px solid var(--profile-value-blue-border) !important;
  background: var(--profile-value-blue-soft) !important;
  box-shadow: none !important;
}

#profileOverviewGroups .profile-group-chip-name {
  color: var(--profile-value-blue) !important;
  font-size: .8rem !important;
  font-weight: 800 !important;
}

#profileOverviewGroups .profile-group-chip em {
  color: var(--profile-user-color, var(--brand)) !important;
  font-size: .68rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}


#profileOverviewGroups .profile-group-summary-inner,
#profileOverviewGroups .profile-group-role,
#profileOverviewGroups .profile-group-paren,
#profileOverviewGroups .profile-group-separator,
#profileOverviewGroups .profile-stat-count {
  font-size: .70rem !important;
  line-height: 1.2 !important;
}

#profileOverview .profile-stat-total {
  color: var(--profile-value-blue) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
}

/* Profile edit image section: match the signup image editor rather than the later white override. */
#profileEditPanel .profile-image-section {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#profileEditPanel .auth-image-field.ui-image-editor {
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) auto !important;
  grid-template-areas:
    "label label"
    "controls preview" !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px 18px !important;


  margin: 0 auto var(--panel-gap, 14px) !important;
  padding: clamp(16px, 2.3vw, 22px) !important;
  border: 1px solid var(--safe-inner-box-border, rgba(213,224,231,.94)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: var(--safe-inner-box-bg, rgba(246,249,251,.82)) !important;
  box-shadow: none !important;
}

/* My Sounds: description + actions above the My sounds label; actions aligned right. */
#profileSoundsPanel > .profile-sounds-intro-note {
  margin: 0 0 10px !important;
}

#profileSoundsPanel > .profile-sounds-top-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

#profileSoundsPanel .profile-sounds-list-box {
  margin-top: 0 !important;
}

.profile-sound-details-toggle-btn {
  width: min(var(--button-w), 100%) !important;
  min-width: min(var(--button-min-w), 100%) !important;
  min-height: var(--button-h) !important;
  padding: 0 var(--button-pad-x) !important;
  border-radius: var(--button-radius) !important;
}

.profile-sound-details-toggle-btn[aria-pressed="true"] {
  filter: brightness(.98) saturate(1.05) !important;
}

.profile-sound-details-toggle-btn span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
}

@media (max-width: 620px) {
  #profileSoundsPanel > .profile-sounds-top-actions {
    justify-content: center !important;
  }
}

/* Current functional pass: profile colors, compact My Groups chips, top pill, metadata dots, edit sound summary. */
:root {
  --profile-neutral-value: #1f5e8c;
  --profile-dark-blue: #1f5e8c;
  --profile-eye-blue: #4f83a8;
  --profile-key-brown: #9b6a55;
  --profile-ochra: #c4872a;
}

.app-header-pill-row .group-summary-pill,
.group-summary-pill {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: min(100%, 540px) !important;
  min-height: 30px !important;
  padding: 2px 6px !important;
  gap: 3px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  background: var(--pill-user-bg, rgba(255,255,255,.9)) !important;
  border-color: rgba(255,255,255,.72) !important;
}

.group-summary-pill::-webkit-scrollbar {
  display: none !important;
}

.group-summary-pill .group-pill-item,
.group-summary-pill .group-pill-action {
  flex: 0 0 auto !important;
  background: var(--pill-user-item-bg, rgba(91,134,174,.18)) !important;
  border-color: var(--pill-user-item-border, rgba(91,134,174,.24)) !important;
}

.group-summary-pill .group-pill-action:hover {
  background: var(--pill-user-item-bg, rgba(91,134,174,.22)) !important;
  border-color: var(--pill-user-item-border, rgba(91,134,174,.30)) !important;
}

.group-summary-pill .group-pill-avatar {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.34) !important;
  box-shadow: none !important;
}

.group-summary-pill .group-pill-count,
.group-summary-pill .group-pill-mini-action span,
.group-summary-pill .group-pill-breakdown,
.group-summary-pill .group-pill-separator {
  color: var(--profile-neutral-value) !important;
}

.group-summary-pill .group-pill-stat-label {
  display: none !important;
}

#profileOverview .profile-overview-grid > div > strong,
#profileOverview .profile-overview-grid > div > strong *,
#profileOverview .profile-overview-description,
#profileOverview .profile-overview-description *,
#profileOverviewSoundwalks .profile-stat-total,
#profileOverviewSoundwalks .profile-stat-count,
#profileOverviewSounds .profile-stat-total,
#profileOverviewSounds .profile-stat-count {
  color: var(--profile-dark-blue) !important;
}

#profileOverview .profile-overview-grid > div:has(#profileOverviewEmail) > span svg,
#profileOverview .profile-overview-grid > div:has(#profileOverviewGender) > span svg {
  color: var(--profile-ochra) !important;
}

#profileOverviewGender,
#profileOverviewGender * {
  color: var(--profile-user-color, var(--brand)) !important;
}

#profileOverviewGroups .profile-group-role,
#profileOverviewGroups .profile-group-paren,
#profileOverviewGroups .profile-group-separator,
#profileOverviewGroups .profile-stat-count {
  color: var(--profile-dark-blue) !important;
}


#profileOverviewGroups .profile-group-chip,
#profileOverviewGroups .profile-group-chip.owner,
#profileOverviewGroups .profile-group-chip.member {
  border-color: var(--profile-value-blue-border) !important;
  background: var(--profile-value-blue-soft) !important;
}


#profileOverviewGroups .profile-group-chip em,
#profileOverviewGroups .profile-group-chip.owner em,
#profileOverviewGroups .profile-group-chip.member em {
  color: var(--profile-user-color, var(--brand)) !important;
}

.visibility-public .choice-icon-button svg,
.privacy-badge.public svg,
.privacy-badge.compact.public svg,
.profile-visibility-badge.public svg {
  color: var(--profile-eye-blue) !important;
}

.visibility-private .choice-icon-button svg,
.privacy-badge.private svg,
.privacy-badge.compact.private svg,
.profile-visibility-badge.private svg {
  color: var(--profile-key-brown) !important;
}

#profileGroupsList .profile-group-member-list {
  gap: 5px !important;
}

#profileGroupsList .profile-group-member-chip {
  min-height: 24px !important;
  gap: 4px !important;
  padding: 3px 7px 3px 3px !important;
  font-size: .68rem !important;
  line-height: 1.15 !important;
}

#profileGroupsList .profile-group-member-avatar,
#profileGroupsList .profile-group-member-avatar img {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
}

.edit-sound-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 14px !important;
  color: var(--profile-neutral-value) !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
}

.edit-sound-summary.hidden {
  display: none !important;
}

.edit-sound-summary span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 24px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(77,93,109,.16) !important;
  background: rgba(245,248,251,.82) !important;
}

.edit-sound-summary strong {
  color: var(--text) !important;
}

.meta-value-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 5px !important;
}

.dot {
  display: inline-block !important;
  width: .62em !important;
  height: .62em !important;
  min-width: .62em !important;
  border-radius: 999px !important;
  border: 1.5px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(39,49,59,.16) !important;
  vertical-align: -.02em !important;
}

.dot.anthro { background: #e9b44c !important; }
.dot.bio { background: #2a9d8f !important; }
.dot.geo { background: #457b9d !important; }
.dot.open { background: #7fb3d5 !important; }
.dot.layered { background: #9b7ede !important; }
.dot.dense { background: #d06f55 !important; }
.dot.quiet { background: #8aa3a8 !important; }
.dot.keynote { background: #c4872a !important; }
.dot.signal { background: #d9485f !important; }
/* 1.3.1 shared image editor layout: mirror the signup uploader. */
#profileEditPanel .auth-image-field.ui-image-editor,
#profileCreateGroupPanel .auth-image-field.ui-image-editor,
#profileEditSoundPanel .auth-image-field.ui-image-editor,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor,
#recordingPanel #photoField,
#introScreen .intro-soundwalk-image {
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) auto !important;
  grid-template-areas:
    "label label"
    "controls preview" !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px 18px !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto var(--panel-gap, 14px) !important;
  padding: clamp(16px, 2.3vw, 22px) !important;
  border: 1px solid var(--safe-inner-box-border, rgba(213,224,231,.94)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: var(--safe-inner-box-bg, rgba(246,249,251,.82)) !important;
  box-shadow: none !important;
}

#profileEditPanel .auth-image-field.ui-image-editor .auth-image-label,
#profileCreateGroupPanel .auth-image-field.ui-image-editor .auth-image-label,
#profileEditSoundPanel .auth-image-field.ui-image-editor .auth-image-label,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor .auth-image-label,
#recordingPanel #photoField > label,
#introScreen .intro-soundwalk-image > .intro-field-label {
  grid-area: label !important;
  margin: 0 !important;
  justify-self: start !important;
}

#profileEditPanel .auth-image-field.ui-image-editor .photo-crop-layout,
#profileCreateGroupPanel .auth-image-field.ui-image-editor .photo-crop-layout,
#profileEditSoundPanel .auth-image-field.ui-image-editor .photo-crop-layout,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor .photo-crop-layout {
  grid-area: controls !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 360px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#recordingPanel #photoField > .photo-crop-layout,
#introScreen .intro-soundwalk-image > .photo-crop-layout {
  display: contents !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#recordingPanel #photoField .photo-adjustments,
#introScreen .intro-soundwalk-image .photo-adjustments {
  grid-area: controls !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 360px !important;
  padding: 0 !important;
}

#recordingPanel #photoField .photo-capture-actions,
#introScreen .intro-soundwalk-image .photo-capture-actions {
  display: none !important;
}

#profileEditPanel .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileCreateGroupPanel .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileEditSoundPanel .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor .auth-avatar-editor,
#recordingPanel #photoField .photo-preview-shell,
#introScreen .intro-soundwalk-image .photo-preview-shell {
  grid-area: preview !important;
  display: grid !important;
  grid-template-columns: repeat(3, var(--sr-image-editor-control-size, 34px)) !important;
  grid-template-areas:
    "undo redo clear"
    "preview preview preview"
    "upload upload upload" !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

#recordingPanel #photoField .photo-history-controls,
#introScreen .intro-soundwalk-image .photo-history-controls {
  display: contents !important;
}

#profileEditPanel .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileCreateGroupPanel .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileEditSoundPanel .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor .auth-avatar-preview,
#recordingPanel #photoField .photo-preview,
#introScreen .intro-soundwalk-image .photo-preview {
  grid-area: preview !important;
  width: var(--sr-image-editor-preview-size, 132px) !important;
  height: var(--sr-image-editor-preview-size, 132px) !important;
  min-width: var(--sr-image-editor-preview-size, 132px) !important;
  min-height: var(--sr-image-editor-preview-size, 132px) !important;
  max-width: var(--sr-image-editor-preview-size, 132px) !important;
  max-height: var(--sr-image-editor-preview-size, 132px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  justify-self: center !important;
}

#profilePhotoResetBtn,
#createGroupImageResetBtn,
#editSoundImageResetBtn,
#editSoundwalkImageResetBtn,
#photoPrevBtn,
#soundwalkPhotoResetBtn { grid-area: undo !important; }

#profilePhotoRedoBtn,
#createGroupImageRedoBtn,
#editSoundImageRedoBtn,
#editSoundwalkImageRedoBtn,
#photoNextBtn,
#soundwalkPhotoRedoBtn { grid-area: redo !important; }

#profilePhotoClearBtn,
#createGroupImageClearBtn,
#editSoundImageClearBtn,
#editSoundwalkImageClearBtn,
#clearPhotoBtn,
#soundwalkClearPhotoBtn { grid-area: clear !important; }

#profilePhotoBtn,
#createGroupImageBtn,
#editSoundImageBtn,
#editSoundwalkImageBtn,
#uploadPhotoBtn,
#soundwalkUploadPhotoBtn {
  grid-area: upload !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: var(--button-radius, 15px) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#profileEditSoundPanel,
#profileEditSoundwalkPanel {
  gap: var(--panel-gap, 14px) !important;
}

#profileEditSoundPanel .profile-edit-wide-field,
#profileEditSoundwalkPanel .profile-edit-wide-field {
  grid-column: 1 / -1 !important;
}

#profileEditSoundPanel .profile-edit-sound-metadata {
  display: grid !important;
  gap: 12px !important;
}

#profileEditSoundPanel .profile-edit-choice-section {
  display: grid !important;
  gap: 8px !important;
}

@media (max-width: 720px) {
  #profileEditPanel .auth-image-field.ui-image-editor,
  #profileCreateGroupPanel .auth-image-field.ui-image-editor,
  #profileEditSoundPanel .auth-image-field.ui-image-editor,
  #profileEditSoundwalkPanel .auth-image-field.ui-image-editor,
  #recordingPanel #photoField,
  #introScreen .intro-soundwalk-image {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "label"
      "preview"
      "controls" !important;
    justify-items: center !important;
  }
}

/* 1.3.1 corrections: fixed two-column image editor, inverted top pill, add-group focus, inline group roles. */
#signupPanel .auth-image-field.ui-image-editor,
#profileEditPanel .auth-image-field.ui-image-editor,
#profileCreateGroupPanel .auth-image-field.ui-image-editor,
#profileEditSoundPanel .auth-image-field.ui-image-editor,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor,
#recordingPanel #photoField,
#introScreen .intro-soundwalk-image {
  display: grid !important;
  grid-template-columns: minmax(160px, 1fr) minmax(150px, auto) !important;
  grid-template-areas:
    "label label"
    "controls preview" !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: stretch !important;
  gap: 12px 18px !important;
  max-width: 600px !important;
}

#signupPanel .auth-image-field.ui-image-editor .photo-crop-layout,
#profileEditPanel .auth-image-field.ui-image-editor .photo-crop-layout,
#profileCreateGroupPanel .auth-image-field.ui-image-editor .photo-crop-layout,
#profileEditSoundPanel .auth-image-field.ui-image-editor .photo-crop-layout,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor .photo-crop-layout {
  grid-area: controls !important;
}

#signupPanel .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileEditPanel .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileCreateGroupPanel .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileEditSoundPanel .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor .auth-avatar-editor,
#recordingPanel #photoField .photo-preview-shell,
#introScreen .intro-soundwalk-image .photo-preview-shell {
  grid-area: preview !important;
  display: grid !important;
  grid-template-columns: repeat(4, var(--sr-image-editor-control-size, 34px)) !important;
  grid-template-areas:
    "preview preview preview preview"
    "upload undo redo clear" !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: 100% !important;
}

#signupPanel .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileEditPanel .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileCreateGroupPanel .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileEditSoundPanel .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor .auth-avatar-preview,
#recordingPanel #photoField .photo-preview,
#introScreen .intro-soundwalk-image .photo-preview {
  grid-area: preview !important;
}

#signupPhotoBtn,
#profilePhotoBtn,
#createGroupImageBtn,
#editSoundImageBtn,
#editSoundwalkImageBtn,
#uploadPhotoBtn,
#soundwalkUploadPhotoBtn {
  grid-area: upload !important;
  width: var(--sr-image-editor-control-size, 34px) !important;
  min-width: var(--sr-image-editor-control-size, 34px) !important;
  height: var(--sr-image-editor-control-size, 34px) !important;
  min-height: var(--sr-image-editor-control-size, 34px) !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

#signupPhotoBtn span:not(.sr-only),
#profilePhotoBtn span:not(.sr-only),
#createGroupImageBtn span:not(.sr-only),
#editSoundImageBtn span:not(.sr-only),
#editSoundwalkImageBtn span:not(.sr-only),
#uploadPhotoBtn span:not(.sr-only),
#soundwalkUploadPhotoBtn span:not(.sr-only) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.app-header-pill-row .group-summary-pill,
.group-summary-pill {
  background: var(--pill-user-bg, color-mix(in srgb, var(--pill-user-color, #5b86ae) 28%, white)) !important;
  border-color: color-mix(in srgb, var(--pill-user-color, #5b86ae) 34%, white) !important;
}

.group-summary-pill .group-pill-item,
.group-summary-pill .group-pill-action,
.group-summary-pill .group-pill-mini-action {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.74) !important;
}

.group-summary-pill .group-pill-action:hover,
.group-summary-pill .group-pill-mini-action:hover {
  background: #fff !important;
  border-color: #fff !important;
}

#profileGroupsPanel.is-adding-group > .profile-groups-list-box,
#profileGroupsPanel.is-adding-group > .organization-requests-panel,
#profileGroupsPanel.is-adding-group > .profile-groups-actions {
  display: none !important;
}


#profileSendGroupRequestBtn {
  min-width: 84px !important;
  width: auto !important;
  white-space: nowrap !important;
}


/* ==========================================================
   1.3.1 targeted Soundmap + Library restoration
   Restores selected visual language from the previous CSS while keeping the
   current compact action-button system.
   ========================================================== */
:root {
  --sr-map-blue: #4f7ea8;
  --sr-map-blue-dark: #315f86;
  --sr-map-teal: #4a9a8b;
  --sr-map-purple: #745db2;
  --sr-map-ochre: #b6862f;
  --sr-map-earth: #8a6f48;
  --sr-map-red: #b05d52;
  --sr-map-green: #4a8e7f;
  --sr-map-chip-bg: rgba(247, 250, 252, .86);
}

/* Connected users / visible map groups above the soundmap. */
.map-groups-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 4px 0 12px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(91, 134, 174, .16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .62) !important;
  box-shadow: 0 8px 20px rgba(36, 55, 70, .07) !important;
}

.map-groups-legend.hidden {
  display: none !important;
}

.legend-group-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(91, 134, 174, .18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .86) !important;
  color: #3d4854 !important;
  box-shadow: none !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

button.legend-group-pill:hover,
button.legend-group-pill:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(79, 126, 168, .34) !important;
  background: #eef5f8 !important;
  color: var(--sr-map-blue-dark) !important;
  outline: 0 !important;
}

.legend-group-dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.96) !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 32, .08) !important;
}

/* Map layer control: restores the old panel behavior and icon treatment. */
.map-floating-controls {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 900 !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 8px !important;

}

.map-floating-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.62) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(28,48,64,.20), inset 0 1px 0 rgba(255,255,255,.34) !important;
  pointer-events: auto !important;
  backdrop-filter: blur(8px) !important;
}


.map-layer-control {
  position: relative !important;
  pointer-events: auto !important;
}

.map-layer-menu {
  position: absolute !important;
  top: 46px !important;
  right: 0 !important;
  z-index: 950 !important;
  display: grid !important;
  gap: 6px !important;
  min-width: 166px !important;
  padding: 8px !important;
  border: 1px solid rgba(94, 128, 153, .24) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 16px 34px rgba(28,48,64,.18) !important;
  backdrop-filter: blur(10px) !important;
}

.map-layer-menu.hidden {
  display: none !important;
}

.map-layer-menu button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 8px !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #3f4b56 !important;

  text-align: left !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
}

.map-layer-menu button:hover,
.map-layer-menu button:focus-visible,
.map-layer-menu button.active {
  background: #eaf2f7 !important;
  color: #315a78 !important;
  outline: 0 !important;
}

.map-layer-choice-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.map-layer-choice-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.map-layer-choice-icon.normal {
  background: linear-gradient(135deg, #5b86ae, #386888) !important;
}

.map-layer-choice-icon.minimal {
  background: linear-gradient(135deg, #2a9d8f, #5b86ae) !important;
}

.map-layer-choice-icon.satellite {
  background: linear-gradient(135deg, #7f8f5b, #b6862f) !important;
}

/* Location and live update diagnostics. */
.diagnostic-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 8px !important;
  text-align: center !important;
}

.map-location-strip {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
}

.map-diagnostic-strip {
  justify-content: flex-end !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.saved-diagnostic-strip {
  justify-content: flex-end !important;
  margin-top: 8px !important;
}

.diagnostic-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(214, 222, 230, .74) !important;
  border-radius: 999px !important;
  background: rgba(247, 250, 252, .78) !important;
  color: #5f6f7f !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.diagnostic-label {
  color: #697583 !important;
  font-weight: 750 !important;
}

.diagnostic-value {
  color: #3f4750 !important;
  font-weight: 900 !important;
}

.map-status-metric {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
  width: auto !important;
  min-height: 32px !important;
  padding: .35rem .55rem !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

.map-status-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}

.map-status-distance {
  color: var(--map-route-accent, #3f6f9f) !important;
}

.map-status-accuracy {
  color: var(--map-accuracy-accent, #4d78a8) !important;
}

.map-status-metric .diagnostic-value {
  color: var(--ink) !important;
}

.map-location-strip .map-status-metric,
.map-location-strip .map-status-metric.good,
.map-location-strip .map-status-metric.approximate,
.map-location-strip .map-status-metric.syncing,
.map-location-strip .map-status-metric.weak,
.map-location-strip .map-status-metric.error {
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(137, 164, 184, .38) !important;
  box-shadow: 0 7px 18px rgba(15, 23, 32, .12) !important;
}

.diagnostic-pill.good {
  background: rgba(74, 142, 127, .09) !important;
  border-color: rgba(74, 142, 127, .24) !important;
}

.diagnostic-pill.good .diagnostic-value {
  color: var(--sr-map-green) !important;
}

.diagnostic-pill.approximate,
.diagnostic-pill.syncing {
  background: rgba(138, 111, 72, .09) !important;
  border-color: rgba(138, 111, 72, .24) !important;
}

.diagnostic-pill.approximate .diagnostic-value,
.diagnostic-pill.syncing .diagnostic-value {
  color: var(--sr-map-earth) !important;
}

.diagnostic-pill.weak,
.diagnostic-pill.error {
  background: rgba(176, 93, 82, .09) !important;
  border-color: rgba(176, 93, 82, .25) !important;
}

.diagnostic-pill.weak .diagnostic-value,
.diagnostic-pill.error .diagnostic-value {
  color: var(--sr-map-red) !important;
}

/* Sound markers on the map. */
.leaflet-div-icon {
  background: transparent !important;
  border: 0 !important;
}

.sound-point-icon-wrap,
.leaflet-marker-icon.sound-point-icon-wrap {
  background: transparent !important;
  border: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

.sound-point-icon {
  --marker-color: #1f5e8c;
  --sound-marker-size: 25px;
  --sound-marker-scale: 1;
  width: var(--sound-marker-size) !important;
  height: var(--sound-marker-size) !important;
  min-width: var(--sound-marker-size) !important;
  min-height: var(--sound-marker-size) !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: var(--marker-color) !important;
  border: calc(2.5px * var(--sound-marker-scale)) solid rgba(255,255,255,.98) !important;
  box-shadow: 0 8px 18px rgba(15,23,32,.22) !important;
}

.sound-point-icon.own {
  width: var(--sound-marker-size) !important;
  height: var(--sound-marker-size) !important;
  min-width: var(--sound-marker-size) !important;
  min-height: var(--sound-marker-size) !important;
}

.sound-wave-mini {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  height: 13px !important;
  transform: scale(var(--sound-marker-scale, 1)) !important;
  transform-origin: center !important;
}

.sound-wave-mini span {
  display: block !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
}

.sound-wave-mini span:nth-child(1),
.sound-wave-mini span:nth-child(5) { height: 5px !important; }
.sound-wave-mini span:nth-child(2),
.sound-wave-mini span:nth-child(4) { height: 10px !important; }
.sound-wave-mini span:nth-child(3) { height: 13px !important; }

.sound-cluster-icon {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border: 2px solid var(--cluster-color, var(--brand, #2e6f98)) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--cluster-color, var(--brand, #2e6f98)) !important;
  font-size: .84rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 7px 17px rgba(15, 23, 32, .2) !important;
}

/* Library sound cards: old square-card clarity with current compact action buttons. */
.library-list-box {
  margin-top: 16px !important;
  padding: 14px !important;
  border: 1px solid rgba(91, 134, 174, .14) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.64) !important;
}

.recordings-list {
  display: grid !important;
  gap: 12px !important;
}

.recording-item,
.profile-sound-card {
  position: relative !important;
  display: block !important;
  padding: 12px !important;
  border: 1px solid rgba(214,222,230,.96) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f8fbfd, #ffffff) !important;
  box-shadow: 0 10px 24px rgba(15,23,32,.045) !important;
  cursor: default !important;
}

.recording-item:hover,
.profile-sound-card:hover {
  border-color: rgba(79, 126, 168, .30) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(15,23,32,.07) !important;
}

.recording-item-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
}

.recording-title-line {
  display: grid !important;
  grid-template-columns: var(--mini-icon-button-size, 36px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
}

.recording-title-stack {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.recording-title-heading {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.recording-title-stack h4,
.recording-item h4 {
  margin: 0 !important;
  color: #303943 !important;
  font-size: clamp(.88rem, 2.4vw, 1rem) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

.recording-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  margin-top: 1px !important;
}

.recording-card-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: fit-content !important;
  max-width: min(100%, 260px) !important;
  min-height: 24px !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(214,222,230,.88) !important;
  border-radius: 999px !important;
  background: rgba(247,250,252,.9) !important;
  color: #4b5560 !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.recording-card-chip.user {
  border-color: rgba(79,126,168,.22) !important;
  background: rgba(79,126,168,.08) !important;
}

.recording-card-chip.soundwalk {
  border-color: rgba(116,93,178,.22) !important;
  background: rgba(116,93,178,.08) !important;
}

.recording-card-chip.sound {
  border-color: rgba(182,134,47,.22) !important;
  background: rgba(182,134,47,.08) !important;
}

.recording-card-chip-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  color: var(--sr-map-blue) !important;
}

.recording-card-chip.soundwalk .recording-card-chip-icon {
  color: var(--sr-map-purple) !important;
}

.recording-card-chip.sound .recording-card-chip-icon {
  color: var(--sr-map-ochre) !important;
}

.recording-card-chip-icon svg {
  width: 14px !important;
  height: 14px !important;
}

.recording-card-chip-label {
  color: rgba(75,85,96,.64) !important;
  font-size: .62rem !important;
  font-weight: 850 !important;
}

.recording-card-chip strong {
  min-width: 0 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #3f4750 !important;
  font-weight: 900 !important;
}

.recording-actions {
  display: inline-grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--mini-icon-button-size, 36px) !important;

  align-items: center !important;
  justify-content: end !important;
}

.recording-action-btn,
.recording-title-line .recording-action-btn.details {
  width: var(--mini-icon-button-size, 36px) !important;
  height: var(--mini-icon-button-size, 36px) !important;
  min-width: var(--mini-icon-button-size, 36px) !important;
  min-height: var(--mini-icon-button-size, 36px) !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

.recording-mini-wave {
  height: 42px !important;
  min-height: 42px !important;
  margin-top: 8px !important;
  border-radius: 13px !important;
}

.recording-details-row {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(214,222,230,.74) !important;
}

@media (max-width: 620px) {
  .map-groups-legend {
    border-radius: 18px !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }

  .map-groups-legend::-webkit-scrollbar {
    display: none !important;
  }

  .recording-item-top {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .recording-actions {
    justify-content: start !important;
  }

  .recording-card-chip {
    max-width: 100% !important;
  }

  .recording-card-chip strong {
    max-width: 150px !important;
  }

  .map-layer-menu {
    right: -2px !important;
  }
}

/* 1.3.1 library refinement: user badge, global info button, and detail rows. */
.saved-actions-bar {
  display: flex !important;

  justify-content: flex-end !important;
  gap: 10px !important;

  margin-top: 14px !important;
}

.saved-actions-bar .library-details-toggle-btn {
  min-width: 132px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #8f7bd1, #6b5ab0) !important;
  box-shadow: 0 10px 22px rgba(107, 90, 176, .16) !important;
}

.saved-actions-bar .library-details-toggle-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, #5f829e, #3f6f8f) !important;
  box-shadow: 0 10px 22px rgba(63, 111, 143, .18) !important;
}

.saved-actions-bar .library-details-toggle-btn svg {
  width: 17px !important;
  height: 17px !important;
}

#recordingsList .group-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: min(100%, 320px) !important;
  gap: 7px !important;
  margin: 0 0 7px 44px !important;
  padding: 5px 9px !important;
  border: 1px solid color-mix(in srgb, var(--group-color, #5b86ae) 28%, #d6dee6) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--group-color, #5b86ae) 12%, #ffffff),
    rgba(247, 250, 252, .92)) !important;

  font-size: .72rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 14px rgba(15, 23, 32, .045) !important;
}

#recordingsList .group-badge-dot {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px !important;
  border-radius: 999px !important;
  background: var(--group-color, #5b86ae) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.96), 0 0 0 3px color-mix(in srgb, var(--group-color, #5b86ae) 18%, transparent) !important;
}

#recordingsList .group-badge-label {
  color: #6a7480 !important;
  font-size: .66rem !important;
  font-weight: 850 !important;
}

#recordingsList .group-badge-value {
  min-width: 0 !important;
  max-width: 210px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #37414b !important;
  font-weight: 900 !important;
}

#recordingsList .recording-card-meta {
  display: none !important;
}

#recordingsList .recording-details-row .recording-meta {
  gap: 7px !important;
}

#recordingsList .recording-details-row .recording-meta > span {
  display: block !important;
  font-weight: 500 !important;
}

#recordingsList .recording-details-row .recording-meta .recording-meta-value {
  color: var(--text-soft, #697583) !important;
  font-weight: 500 !important;
}

#recordingsList .recording-details-row .recording-duration-line strong {
  color: var(--text, #25303a) !important;
  font-weight: 850 !important;
}

@media (max-width: 620px) {
  .saved-actions-bar {
    justify-content: center !important;
    gap: 8px !important;
  }

  .saved-actions-bar .btn-icon {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: min(100%, 132px) !important;
  }

  #recordingsList .group-badge {
    margin-left: 36px !important;
    max-width: calc(100% - 36px) !important;
  }
}

/* 1.3.1 library/recording refinement pass: metadata weight, 3-column filters, recording waveform/trim. */
#recordingsList .recording-duration-line .entry-duration-value,
#recordingsList .recording-duration-line .recording-meta-value,
#profileSoundsList .recording-duration-line .entry-duration-value,
#profileSoundsList .recording-duration-line .recording-meta-value,
.recording-details-row .recording-duration-line .entry-duration-value,
.recording-details-row .recording-duration-line .recording-meta-value {
  color: var(--text-soft, #697583) !important;
  font-weight: 400 !important;
}

#recordingsList .recording-duration-line .entry-duration-value,
#profileSoundsList .recording-duration-line .entry-duration-value,
.recording-details-row .recording-duration-line .entry-duration-value {
  display: inline !important;
}

#profileSoundsList .recording-card-meta,
.profile-sounds-list .recording-card-meta {
  display: none !important;
}


@media (max-width: 760px) {
  #savedPanel .saved-advanced-filters .saved-filter-grid,
  #savedPanel .library-more-filters .saved-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  #savedPanel .saved-advanced-filters .saved-filter-grid,
  #savedPanel .library-more-filters .saved-filter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

#recordingPanel #recordSoundField {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 2px !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
  color: var(--label-tone, #48515a) !important;
  font-size: .94rem !important;
  font-weight: 800 !important;
}

#recordingPanel #recordSoundField .label-row {
  justify-content: flex-start !important;
}

#recordingPanel .recording-toolbox.field-missing,
#recordSoundField.field-missing + .recording-toolbox,
#recordSoundField.field-missing {
  border-color: rgba(217, 72, 95, .72) !important;
}

#recordingPanel .recording-toolbox .recording-controls {
  margin-top: 0 !important;
}

#recordingPanel .recording-toolbox .audio-player {
  width: 100% !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid var(--recording-user-color-border) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .92) !important;
}


#recordingPanel .recording-toolbox .player-wave-wrap {
  position: relative !important;
  height: 64px !important;
  min-height: 64px !important;
  border-radius: 16px !important;
  border: 1px solid var(--recording-user-color-border) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--recording-user-color) 8%, #eef6fb), #ffffff) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}


#recordingPanel .recording-toolbox[data-recording-state="recording"] .audio-effects-panel,
#recordingPanel .recording-toolbox[data-recording-state="recording"] .preview-history-controls,
#recordingPanel .recording-toolbox[data-recording-state="recording"] #previewDeleteBtn,
#recordingPanel .recording-toolbox[data-recording-state="recording"] #trimOverlay,
#recordingPanel .recording-toolbox[data-recording-state="recording"] #trimSummary,
#recordingPanel .recording-toolbox[data-recording-state="recording"] .player-controls {
  display: none !important;
}

#recordingPanel .recording-toolbox[data-recording-state="recording"] .player-wave-wrap {
  height: 70px !important;
  min-height: 70px !important;
  border-color: color-mix(in srgb, var(--recording-user-color) 38%, #d6dee6) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--recording-user-color) 10%, transparent) !important;
}

#recordingPanel .waveform-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

#recordingPanel .player-progress-fill {
  position: absolute !important;
  inset: 0 auto 0 0 !important;

  background: linear-gradient(90deg,
    color-mix(in srgb, var(--recording-user-color) 24%, transparent),
    color-mix(in srgb, var(--recording-user-color) 10%, transparent)) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#recordingPanel .player-progress {
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 2px !important;
  background: var(--recording-user-color) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.72), 0 0 10px color-mix(in srgb, var(--recording-user-color) 24%, transparent) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

#recordingPanel .trim-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  user-select: none !important;
  touch-action: none !important;
  pointer-events: none !important;
}

#recordingPanel .trim-shade {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  background: rgba(37, 48, 58, .18) !important;
  pointer-events: none !important;
}

#recordingPanel .trim-shade.left {
  left: 0 !important;
  width: 0;
}

#recordingPanel .trim-shade.right {
  right: 0 !important;
  width: 0;
}

#recordingPanel .trim-handle {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 22px !important;
  transform: translateX(-50%) !important;
  cursor: ew-resize !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

#recordingPanel .trim-handle::before {
  content: '' !important;
  width: 3px !important;
  height: calc(100% - 12px) !important;
  border-radius: 999px !important;
  background: var(--recording-user-color) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.76), 0 0 10px color-mix(in srgb, var(--recording-user-color) 18%, transparent) !important;
}

#recordingPanel .trim-handle::after {
  content: '' !important;
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 2px solid var(--recording-user-color) !important;
  top: 6px !important;
}

#recordingPanel .trim-label {
  position: absolute !important;
  top: 6px !important;
  left: 50% !important;
  transform: translateX(calc(-50% + var(--trim-label-shift, 0px))) !important;
  padding: 4px 8px !important;
  border: 1px solid var(--line, #d6dee6) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--heading-tone, #3f4750) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

#recordingPanel .trim-summary {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 6px 10px !important;
  border: 1px solid var(--recording-user-color-border) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9) !important;
  color: var(--heading-tone, #3f4750) !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

#recordingPanel .trim-summary.hidden {
  display: none !important;
}

#recordingPanel .trim-time-value,
#recordingPanel .trim-time-value.duration {
  color: var(--recording-user-color) !important;
  font-weight: 800 !important;
}

#recordingPanel .audio-effects-panel {
  width: min(100%, 520px) !important;
  margin: 0 auto !important;
  gap: 8px !important;
}

#recordingPanel .audio-effect-toggle {
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 18px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 9px !important;
  border: 1px solid var(--line, #d6dee6) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.88) !important;

  font-size: .72rem !important;
  font-weight: 800 !important;
}


#recordingPanel .audio-effect-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 9px !important;

  background: rgba(255,255,255,.74) !important;
}

#recordingPanel .audio-effect-icon svg {
  width: 15px !important;
  height: 15px !important;
}

#recordingPanel .audio-effect-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#recordingPanel .audio-effect-description {
  display: none !important;
}

@media (max-width: 620px) {
  #recordingPanel .recording-toolbox {
    padding: 12px !important;
  }

  #recordingPanel .recording-toolbox .player-wave-wrap {
    height: 58px !important;
    min-height: 58px !important;
  }

  #recordingPanel .recording-toolbox[data-recording-state="recording"] .player-wave-wrap {
    height: 64px !important;
    min-height: 64px !important;
  }

  #recordingPanel .audio-effects-panel {
    gap: 6px !important;
  }

  #recordingPanel .audio-effect-toggle {
    grid-template-columns: 18px minmax(0, 1fr) 15px !important;
    gap: 5px !important;
    min-height: 38px !important;
    padding: 7px 6px !important;
    font-size: .62rem !important;
  }

  #recordingPanel .audio-effect-icon,
  #recordingPanel .audio-effect-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
}

#recordingPanel .recording-toolbox:has(#recordSoundField.field-missing) {
  border-color: rgba(217, 72, 95, .72) !important;
  background: linear-gradient(180deg, rgba(217,72,95,.06), #ffffff) !important;
  box-shadow: 0 0 0 3px rgba(217,72,95,.08) !important;
}

#recordingPanel .recording-toolbox .player-top {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-height: 0 !important;
}

#recordingPanel .recording-toolbox .player-title {
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  text-align: center !important;
  color: var(--heading-tone, #3f4750) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
}

#recordingPanel .recording-toolbox .audio-player.live .player-title {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
}

#recordingPanel .recording-toolbox .preview-history-controls {
  position: absolute !important;
  top: 9px !important;
  right: 10px !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

#recordingPanel .recording-toolbox .audio-player.live .preview-history-controls {
  display: none !important;
}

#recordingPanel .recording-toolbox .preview-history-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}


#recordingPanel .recording-toolbox .player-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#recordingPanel .recording-toolbox .player-controls button {
  min-width: 118px !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 13px !important;
  font-size: .82rem !important;
}

#recordingPanel .recording-toolbox .player-time {
  color: var(--text-soft, #697583) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
}


#recordingPanel .recording-toolbox #recordSoundField {
  padding: 0 0 2px !important;
  margin: 0 !important;
}

#recordingPanel .recording-toolbox[data-recording-state="idle"]:not(.has-preview-audio) #audioPlayer,
#recordingPanel .recording-toolbox[data-recording-state="idle"]:not(.has-preview-audio) .audio-effects-panel,
#recordingPanel .recording-toolbox[data-recording-state="idle"]:not(.has-preview-audio) .preview-history-controls,
#recordingPanel .recording-toolbox[data-recording-state="idle"]:not(.has-preview-audio) .player-controls,
#recordingPanel .recording-toolbox:not(.has-preview-audio):not([data-recording-state="recording"]):not([data-recording-state="preview"]) #audioPlayer {
  display: none !important;
}

#recordingPanel .recording-toolbox[data-recording-state="recording"] #audioPlayer {
  display: grid !important;
}

#recordingPanel .recording-toolbox[data-recording-state="recording"] .player-top,
#recordingPanel .recording-toolbox[data-recording-state="recording"] .preview-history-controls,
#recordingPanel .recording-toolbox[data-recording-state="recording"] .audio-effects-panel,
#recordingPanel .recording-toolbox[data-recording-state="recording"] .player-controls,
#recordingPanel .recording-toolbox[data-recording-state="recording"] #trimOverlay,
#recordingPanel .recording-toolbox[data-recording-state="recording"] #trimSummary,
#recordingPanel .recording-toolbox[data-recording-state="recording"] #previewDeleteBtn {
  display: none !important;
}

#recordingPanel .recording-toolbox[data-recording-state="preview"] #audioPlayer,
#recordingPanel .recording-toolbox.has-preview-audio #audioPlayer {
  display: grid !important;
}

#recordingPanel .recording-toolbox[data-recording-state="preview"] .player-top,
#recordingPanel .recording-toolbox.has-preview-audio .player-top {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: 30px !important;
  width: 100% !important;
}

#recordingPanel .recording-toolbox[data-recording-state="preview"] .preview-history-controls,
#recordingPanel .recording-toolbox.has-preview-audio .preview-history-controls {
  position: static !important;
  display: inline-flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin-left: auto !important;
  z-index: 8 !important;
}

#recordingPanel .recording-toolbox[data-recording-state="preview"] .audio-effects-panel,
#recordingPanel .recording-toolbox.has-preview-audio .audio-effects-panel,
#recordingPanel .recording-toolbox[data-recording-state="preview"] .player-controls,
#recordingPanel .recording-toolbox.has-preview-audio .player-controls {
  display: grid !important;
}

#recordingPanel .recording-toolbox[data-recording-state="preview"] .player-controls,
#recordingPanel .recording-toolbox.has-preview-audio .player-controls {
  display: flex !important;
}

#recordingPanel .recording-toolbox .audio-player {
  border-color: var(--line, #d6dee6) !important;
  background: #ffffff !important;
}

#recordingPanel .recording-toolbox .player-wave-wrap {
  background: linear-gradient(180deg, #ffffff, var(--surface-soft, #f7fafc)) !important;
  border-color: var(--line, #d6dee6) !important;
}

#recordingPanel .recording-toolbox[data-recording-state="recording"] .player-wave-wrap,
#recordingPanel .recording-toolbox[data-recording-state="preview"] .player-wave-wrap,
#recordingPanel .recording-toolbox.has-preview-audio .player-wave-wrap {
  border-color: var(--recording-user-color-border) !important;
}

#recordingPanel .recording-toolbox .preview-history-btn {
  opacity: 1 !important;
  border: 1px solid color-mix(in srgb, var(--recording-user-color) 22%, var(--line, #d6dee6)) !important;
}


#recordingPanel .recording-toolbox .preview-history-btn:disabled {
  opacity: .38 !important;
  filter: grayscale(.18) !important;
}

#recordingPanel .waveform-canvas {
  opacity: 1 !important;
}

.recording-details-row .recording-duration-line,
.recording-details-row .recording-duration-line .recording-meta-value,
.recording-details-row .recording-duration-line .entry-duration-value,
#recordingsList .recording-duration-line .recording-meta-value,
#recordingsList .recording-duration-line .entry-duration-value,
#profileSoundsList .recording-duration-line .recording-meta-value,
#profileSoundsList .recording-duration-line .entry-duration-value {
  font-weight: 400 !important;
}

.recording-details-row .recording-duration-line > strong,
#recordingsList .recording-duration-line > strong,
#profileSoundsList .recording-duration-line > strong {
  font-weight: 850 !important;
}

#recordingPanel .player-progress-fill {
  inset: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--preview-progress-start, 0%) !important;
  width: 0;
}


#recordingPanel .recording-toolbox .preview-history-controls {
  gap: 7px !important;
  top: 10px !important;
  right: 12px !important;
}

#recordingPanel .recording-toolbox .preview-history-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  box-shadow: 0 8px 18px rgba(15,23,32,0.10) !important;
}

#recordingPanel .recording-toolbox .preview-history-btn.nav {
  background: linear-gradient(135deg, #c7bfd6, #a79cbb) !important;
  color: #ffffff !important;
}

#recordingPanel .recording-toolbox .preview-history-btn.delete {
  background: linear-gradient(135deg, #d4b5aa, #bd9285) !important;
  color: #ffffff !important;
}

#recordingPanel .recording-toolbox .preview-history-btn svg {
  width: 18px !important;
  height: 18px !important;
}

.profile-edit-beta-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(182, 134, 47, 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.92), rgba(255,255,255,0.94));
  color: #6f583b;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.25;
}

.profile-edit-beta-banner svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: #b6862f;
}

#profileEditSoundPanel .edit-sound-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .58fr);
  gap: 12px !important;
  margin: 0 !important;
  color: var(--heading-tone, #3f4750) !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
}

#profileEditSoundPanel .edit-sound-summary.hidden {
  display: none !important;
}

#profileEditSoundPanel .edit-sound-context-grid,
#profileEditSoundPanel .edit-sound-audio-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line, #d6dee6);
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbfd, #ffffff);
  box-shadow: 0 10px 24px rgba(15, 23, 32, 0.04);
}

#profileEditSoundPanel .edit-sound-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#profileEditSoundPanel .edit-sound-context-item {
  display: grid !important;
  gap: 3px !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(91, 134, 174, 0.14) !important;
  background: rgba(91, 134, 174, 0.06) !important;
}

#profileEditSoundPanel .edit-sound-context-item strong {
  color: var(--muted, #697583) !important;
  font-size: .64rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#profileEditSoundPanel .edit-sound-context-item span {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #4b5560 !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  overflow-wrap: anywhere;
}

#profileEditSoundPanel .edit-sound-audio-card {
  display: grid;
  gap: 9px;
  align-content: start;
}

#profileEditSoundPanel .edit-sound-audio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#profileEditSoundPanel .edit-sound-audio-head strong {
  color: var(--heading-tone, #3f4750) !important;
  font-size: .84rem !important;
}

#profileEditSoundPanel .edit-sound-audio-play {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #69aa9b, #4a8e7f);
  color: #fff;
}

#profileEditSoundPanel .edit-sound-audio-play.playing {
  background: linear-gradient(135deg, #ef6b6b, var(--stop, #d64545));
}

#profileEditSoundPanel .edit-sound-audio-play svg {
  width: 17px;
  height: 17px;
}

#profileEditSoundPanel .profile-edit-context-field {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line, #d6dee6);
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbfd, #ffffff);
}

#profileEditSoundPanel .profile-edit-sound-fields,
#profileEditSoundPanel .profile-edit-sound-metadata,
#profileEditSoundPanel .profile-edit-image-field,
#profileEditSoundPanel .auth-visibility-panel {
  background: linear-gradient(180deg, #f8fbfd, #ffffff) !important;
  border-color: var(--line, #d6dee6) !important;
}

#profileEditSoundPanel .choice-card .choice-title .dot {
  display: none !important;
}

#profileEditSoundPanel .choice-card-inner {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "icon title check"
    "info info info" !important;
}

#profileEditSoundPanel .choice-icon-button {
  grid-area: icon;
}

#profileEditSoundPanel .choice-info {
  grid-area: info;
}

.recording-meta-context-box {
  display: grid;
  gap: 4px;
  margin: 2px 0 4px;
  padding: 8px 10px;
  border-radius: 13px;
  border: 1px solid rgba(91,134,174,0.14);
  background: rgba(91,134,174,0.06);
}

@media (max-width: 720px) {
  #profileEditSoundPanel .edit-sound-summary {
    grid-template-columns: 1fr;
  }

  #profileEditSoundPanel .edit-sound-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  #profileEditSoundPanel .edit-sound-context-grid {
    grid-template-columns: 1fr;
  }
}

#recordingPanel .recording-toolbox .player-wave-wrap {
  background: linear-gradient(135deg, #eef6fb, #ffffff) !important;
}


#recordingPanel .trim-handle::before {
  background: #617180 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.76), 0 0 10px rgba(97,113,128,.18) !important;
}

#recordingPanel .trim-handle::after {
  border-color: #617180 !important;
}

/* 1.3.2 refinement: unified recording context, audio toggles, and compact map controls */
#recordingPanel .recording-context-panel {
  display: grid !important;
  gap: 10px !important;
  padding: 13px 14px !important;
  border: 1px solid var(--line, #d6dee6) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f8fbfd, #ffffff) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 32, 0.04) !important;
}

#recordingPanel .recording-context-title {
  justify-self: start !important;
  font-weight: 850 !important;
  color: var(--heading-tone, #3f4750) !important;
}

#recordingPanel .recording-context-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#recordingPanel .recording-context-grid label {
  min-width: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 7px !important;
}

#recordingPanel .compact-label {
  color: var(--muted, #697583) !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
}

#recordingPanel .recording-toolbox {
  margin-top: 22px !important;
  background: linear-gradient(180deg, #f8fbfd, #ffffff) !important;
  border: 1px solid var(--line, #d6dee6) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 32, 0.04) !important;
}

#recordingPanel .audio-effect-toggle {
  background: #f7fafc !important;
  border-color: var(--line, #d6dee6) !important;
  color: var(--heading-tone, #3f4750) !important;
  box-shadow: none !important;
}

#recordingPanel .audio-effect-toggle.checked,
#recordingPanel .audio-effect-toggle:has(input:checked) {
  border-color: rgba(79, 126, 168, 0.42) !important;
  background: #eef5f8 !important;
  color: #315f86 !important;
  box-shadow: 0 8px 18px rgba(79,126,168,0.10) !important;
}

#recordingPanel .audio-effect-icon {
  color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
}

#recordingPanel .audio-effect-toggle input {
  accent-color: #4f7ea8 !important;
}

#offlineQueueIndicator {
  display: none !important;
}

.map-floating-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(214, 222, 230, .72) !important;
  box-shadow: 0 8px 18px rgba(15,23,32,.10) !important;
  backdrop-filter: none !important;
}

.map-floating-btn.recenter {
  background: linear-gradient(135deg, #5f9a91, #3f7d75) !important;
}

.map-floating-btn.layers {
  background: linear-gradient(135deg, #8b6fd1, #5f4aa5) !important;
}

.map-floating-btn:hover,
.map-floating-btn:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(15,23,32,.13) !important;
  outline: 2px solid rgba(91,134,174,.20) !important;
  outline-offset: 2px !important;
}

.map-layer-menu {
  min-width: 172px !important;

  border-radius: 16px !important;
  border: 1px solid var(--line, #d6dee6) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 12px 26px rgba(15,23,32,.13) !important;
  backdrop-filter: none !important;
}

.map-layer-menu button {
  min-height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(214,222,230,.72) !important;
  background: #f7fafc !important;
  box-shadow: none !important;
}

.map-layer-menu button:hover,
.map-layer-menu button:focus-visible,
.map-layer-menu button.active {
  background: #eef5f8 !important;
  border-color: rgba(79,126,168,.34) !important;
  color: #315f86 !important;
}

.map-layer-choice-icon {
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32) !important;
}

@media (max-width: 620px) {
  #recordingPanel .recording-context-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Current layout pass: keep the main navigation bar and its panels on the Sound Routes header measure. */
:root {
  --app-shell-measure: min(calc(100% - clamp(24px, 6vw, 56px)), 964px);
}

.app > [data-component="app-header"],
.app > [data-include] {
  width: var(--app-shell-measure) !important;
  max-width: var(--app-shell-measure) !important;
  margin-inline: auto !important;
}

#mainScreen {
  width: var(--app-shell-measure) !important;
  max-width: var(--app-shell-measure) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

#mainScreen .stack {
  width: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

#mainScreen .panel-tabs.app-action-bar,
#mainScreen .panel-section.card {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

#mainScreen .panel-section.card {
  border: 1px solid var(--line, #d6dee6) !important;
  border-radius: var(--radius, 22px) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--shadow-soft, 0 10px 26px rgba(36, 55, 70, .10)) !important;
  overflow: hidden !important;
}

#mainScreen .panel-section.card > .card-content {
  border-radius: inherit !important;
  background: transparent !important;
}

#savedPanel.panel-section.card {
  overflow: hidden !important;
  border-radius: var(--radius, 22px) !important;
}

#savedPanel > .card-content {
  border-radius: inherit !important;
  background: transparent !important;
  overflow: hidden !important;
}

#savedPanel .saved-filter-panel,
#savedPanel .saved-advanced-filters,
#savedPanel .library-list-box {
  border-radius: var(--radius-md, 16px) !important;
  overflow: hidden !important;
}

#savedPanel .saved-advanced-filters .saved-filter-grid,
#savedPanel .library-more-filters .saved-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#savedPanel .saved-advanced-filters .filter-control,
#savedPanel .library-more-filters .filter-control,
#savedPanel .saved-advanced-filters select,
#savedPanel .library-more-filters select {
  min-width: 0 !important;
}

/* Map buttons follow the same compact icon layout as the top-right app header buttons. */
.map-floating-controls {
  align-items: center !important;
  gap: clamp(6px, 1.1vw, 10px) !important;
}

.map-floating-btn.app-header-action,
.map-floating-controls .app-header-action {
  width: var(--mini-btn-size, 30px) !important;
  height: var(--mini-btn-size, 30px) !important;
  min-width: var(--mini-btn-size, 30px) !important;
  min-height: var(--mini-btn-size, 30px) !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--mini-btn-radius, 9px) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12) !important;
  pointer-events: auto !important;
  backdrop-filter: none !important;
}

.map-floating-btn.app-header-action.recenter {
  background: linear-gradient(135deg, #7895a5, #678091) !important;
}

.map-floating-btn.app-header-action.layers {
  background: linear-gradient(135deg, #776b8f, #5d536f) !important;
}

.map-floating-btn.app-header-action svg,
.map-floating-controls .app-header-action svg {
  width: var(--mini-btn-icon, 15px) !important;
  height: var(--mini-btn-icon, 15px) !important;
  flex: 0 0 auto !important;
}

.map-floating-btn.app-header-action:hover,
.map-floating-btn.app-header-action:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(15,23,32,.13) !important;
}

/* 1.3.5 map popup restoration: older clear card rhythm with current icon buttons. */
.leaflet-container .leaflet-popup {
  margin-bottom: 16px !important;
}

.leaflet-container .leaflet-popup-content-wrapper {
  overflow: hidden !important;
  border: 1px solid rgba(137, 164, 184, .32) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 32, .18) !important;
}

.leaflet-container .leaflet-popup-content {
  width: min(310px, calc(100vw - 58px)) !important;
  margin: 0 !important;
  color: var(--text, #27313d) !important;
  font-family: var(--font, system-ui, sans-serif) !important;
  font-size: .76rem !important;
  line-height: 1.34 !important;
}

.leaflet-container .leaflet-popup-tip {
  border: 1px solid rgba(137, 164, 184, .28) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 32, .12) !important;
}

.leaflet-container .leaflet-popup-close-button {
  top: 7px !important;
  right: 7px !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  color: #5f6f7f !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.leaflet-container .leaflet-popup-close-button:hover,
.leaflet-container .leaflet-popup-close-button:focus-visible {
  background: rgba(46, 111, 152, .08) !important;
  color: var(--brand, #2e6f98) !important;
}

.entry-popup,
.route-popup,
.sound-cluster-popup {
  display: grid !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 12px !important;
}

.popup-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.popup-title-line,
.route-popup-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding-right: 18px !important;
  flex-wrap: wrap !important;
}

.popup-title,
.route-popup-title,
.sound-cluster-popup > strong {
  min-width: 0 !important;
  color: #27313d !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere !important;
}

.popup-side-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex: 0 0 auto !important;

}

.route-popup-divider,
.entry-popup .popup-header + div[style] {
  height: 1px !important;
  margin: 0 !important;
  background: rgba(137, 164, 184, .26) !important;
}

.entry-popup-body,
.profile-popup-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 74px !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
}

.entry-popup-body:not(.has-image) {
  grid-template-columns: minmax(0, 1fr) !important;
}

.entry-popup-body .popup-thumb,
.soundwalk-popup-image,
.profile-popup-avatar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 74px !important;
  height: 74px !important;
  min-width: 74px !important;
  min-height: 74px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, .96) !important;
  border-radius: 14px !important;
  background: #eef4f7 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 32, .14) !important;
}

.entry-popup-body .popup-thumb img,
.soundwalk-popup-image img,
.profile-popup-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.profile-popup-body {
  grid-template-columns: minmax(0, 1fr) 58px !important;
}

.profile-popup-body.private-profile {
  grid-template-columns: minmax(0, 1fr) !important;
}

.profile-popup-avatar {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  border-radius: 999px !important;
}

.profile-popup-avatar-svg {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--profile-color, var(--brand, #2e6f98)) !important;
}

.profile-popup-avatar-svg svg {
  width: 30px !important;
  height: 30px !important;
}

.profile-popup-swatch {
  display: inline-flex !important;
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: var(--profile-color, var(--brand, #2e6f98)) !important;
  box-shadow: 0 0 0 1px rgba(137, 164, 184, .42) !important;
}

.entry-popup-meta,
.profile-popup-meta {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  color: #4e5f70 !important;
  font-size: .74rem !important;
  font-weight: 500 !important;
}

.entry-popup-meta br {
  display: none !important;
}

.entry-popup-meta > span,
.route-popup-line,
.profile-popup-meta .route-popup-line {
  display: block !important;
  margin: 0 0 4px !important;
  overflow-wrap: anywhere !important;
}

.entry-popup-meta strong,
.profile-popup-meta strong {
  color: #27313d !important;
  font-weight: 900 !important;
}

.popup-value,
.entry-popup-meta .meta-value-chip,
.profile-popup-meta .popup-value {
  color: #4e5f70 !important;
  font-weight: 500 !important;
}

.popup-title-stack {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.entry-popup .privacy-badge,
.route-popup .privacy-badge {
  min-height: 19px !important;
  padding: 2px 6px !important;
  font-size: .62rem !important;
  line-height: 1 !important;
}

.route-rating.entry-rating.compact {
  margin-top: 5px !important;
}

.popup-title-stack .entry-rating.compact {
  margin-top: 0 !important;
}

.route-rating .entry-rating-summary,
.entry-popup .entry-rating-summary {
  color: #5f6f7f !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
}

.entry-popup-body .popup-thumb.expanded,
.soundwalk-popup-image.expanded,
.profile-popup-avatar.expanded {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 100000 !important;
  width: min(92vw, 760px) !important;
  height: min(82vh, 620px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 18px !important;
  background: #101820 !important;
  cursor: zoom-out !important;
}

.entry-popup-body .popup-thumb.expanded *,
.soundwalk-popup-image.expanded *,
.profile-popup-avatar.expanded * {
  cursor: zoom-out !important;
}

.entry-popup-body .popup-thumb.expanded img,
.soundwalk-popup-image.expanded img,
.profile-popup-avatar.expanded img {
  object-fit: contain !important;
}

.sound-cluster-popup {
  gap: 7px !important;
}

.sound-cluster-entry {
  display: grid !important;
  gap: 2px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(137, 164, 184, .26) !important;
  border-radius: 12px !important;
  background: rgba(247, 250, 252, .86) !important;
  color: #27313d !important;
  text-align: left !important;
  box-shadow: none !important;
}

.sound-cluster-entry span {
  font-size: .76rem !important;
  font-weight: 900 !important;
}

.sound-cluster-entry small,
.sound-cluster-more {
  color: #5f6f7f !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
}

.leaflet-marker-icon.sound-point-icon-wrap,
.leaflet-marker-icon.group-position-icon-wrap,
.leaflet-marker-icon.route-endpoint-icon-wrap,
.leaflet-marker-icon.sound-cluster-icon-wrap {
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

.group-position-icon-wrap {
  display: grid !important;
  place-items: center !important;
}

.group-position-icon {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 2.5px solid rgba(255,255,255,.98) !important;
  border-radius: 999px !important;
  background: var(--group-position-color, var(--brand, #2e6f98)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(15,23,32,.22) !important;
  overflow: hidden !important;
}

.group-position-icon.live-current,
.group-position-icon.live-other {
  overflow: visible !important;
}

.group-position-icon.live-current::before,
.group-position-icon.live-other::before,
.group-position-icon.live-current::after,
.group-position-icon.live-other::after {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  z-index: 0 !important;
  border: 2px solid var(--group-position-color, var(--brand, #2e6f98)) !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: group-position-ripple 2.15s ease-out infinite !important;
}

.group-position-icon.live-current::after,
.group-position-icon.live-other::after {
  animation-delay: 1.05s !important;
}

.group-position-icon.live-current > *,
.group-position-icon.live-other > * {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes group-position-ripple {
  0% {
    opacity: .5;
    transform: scale(.72);
  }
  68% {
    opacity: .12;
    transform: scale(1.55);
  }
  100% {
    opacity: 0;
    transform: scale(1.95);
  }
}

.group-position-icon.live-other:not(.has-profile-image) {
  width: 36px !important;
  height: 36px !important;
}

.group-position-icon.has-profile-image {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
}

.group-position-photo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

.group-position-people {
  width: 19px !important;
  height: 19px !important;
}

.route-endpoint-icon-wrap {
  display: grid !important;
  place-items: center !important;
}

.route-endpoint-icon {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border: 2.5px solid rgba(255, 255, 255, .98) !important;
  border-radius: 999px !important;
  background: var(--route-endpoint-color, var(--current-user-color, var(--brand, #2e6f98))) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 32, .22) !important;
}

.route-endpoint-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.popup-mini-action-btn,
.popup-mini-audio-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--mini-btn-size, 30px) !important;
  height: var(--mini-btn-size, 30px) !important;
  min-width: var(--mini-btn-size, 30px) !important;
  min-height: var(--mini-btn-size, 30px) !important;
  border: 0 !important;
  border-radius: var(--mini-btn-radius, 9px) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 32, .13) !important;
}

.popup-mini-audio-btn.play,
.popup-mini-action-btn.download {
  background: linear-gradient(135deg, #668caf, #4e78a0) !important;
}

.popup-mini-audio-btn.stop,
.popup-mini-action-btn.delete {
  background: linear-gradient(135deg, #b57965, #c86b73) !important;
}

.popup-mini-action-btn.edit,
.popup-mini-action-btn.route-detail-btn {
  background: linear-gradient(135deg, #c4913e, #a9732d) !important;
}

.popup-mini-action-btn:disabled,
.popup-mini-audio-btn:disabled {
  filter: grayscale(.25) !important;
  opacity: .45 !important;
}

.popup-mini-action-btn svg,
.popup-mini-audio-btn svg {
  width: var(--mini-btn-icon, 15px) !important;
  height: var(--mini-btn-icon, 15px) !important;
}

@media (max-width: 520px) {


  .entry-popup,
  .route-popup,
  .sound-cluster-popup {
    padding: 10px !important;
  }

  .entry-popup-body,
  .profile-popup-body,
  .entry-popup-body:not(.has-image),
  .profile-popup-body.private-profile {
    display: flow-root !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  .entry-popup-body .popup-thumb,
  .soundwalk-popup-image,
  .profile-popup-avatar {
    float: right !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    margin: 0 0 8px 10px !important;
  }

  .profile-popup-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  .entry-popup-meta,
  .profile-popup-meta {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .entry-popup-meta > span,
  .route-popup-line,
  .profile-popup-meta .route-popup-line {
    display: block !important;
  }
}

/* Final map sizing override: keep diagnostics inside the capped map frame. */
#mapCaptureArea {
  position: relative !important;
  width: min(100%, 700px) !important;
  height: clamp(320px, 52vh, 700px) !important;
  max-width: 700px !important;
  max-height: 700px !important;
  margin-inline: auto !important;
  overflow: hidden !important;
}

#mapCaptureArea #map {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

#mapCaptureArea .map-location-strip {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 520 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  pointer-events: none !important;
}

#mapCaptureArea .map-location-strip .diagnostic-pill {
  width: auto !important;
  max-width: min(48%, 310px) !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  pointer-events: auto !important;
}

/* Final functional polish: ratings, language cards, signup validation, and map popup rhythm. */
.entry-rating.has-local-rating .entry-rating-star.my-rating {
  color: #c4913e !important;

}

.entry-rating .entry-rating-star[type="button"] {
  cursor: pointer !important;
}

.entry-rating .entry-rating-star[type="button"]:focus-visible {
  outline: 2px solid rgba(79, 131, 168, .45) !important;
  outline-offset: 2px !important;
  border-radius: 999px !important;
}

.route-popup-title-stack {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.route-popup-title-stack .profile-title-rating-inline {
  justify-self: start !important;
}

#settingsScreen .settings-language-grid .language-card-inner {
  border-radius: 16px !important;
  border: 1px solid rgba(174, 194, 208, .74) !important;
  background: var(--language-card-bg, rgba(255,255,255,.78)) !important;
}


#settingsScreen .language-flag {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.75rem !important;
}

#signupPanel .field-missing,
#signupPanel .auth-grid > .field-missing,
#signupPanel .auth-grid > label.field-missing,
#signupPanel .auth-password-block.field-missing,
#signupPanel .profile-description-field.field-missing {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#signupPanel .field-missing input,
#signupPanel .field-missing select,
#signupPanel .field-missing textarea,
#signupPanel input.field-missing,
#signupPanel select.field-missing,
#signupPanel textarea.field-missing {
  border-color: rgba(174, 94, 88, .72) !important;
  background: rgba(255, 248, 248, .96) !important;
  box-shadow: 0 0 0 3px rgba(174, 94, 88, .16) !important;
}

#profileCreateGroupPanel .create-group-box,
#profileCreateGroupPanel .ui-section-card.create-group-box,
#profileCreateGroupPanel #createGroupVisibilityField,
#profileCreateGroupPanel .auth-image-field.ui-image-editor {
  border: 1px solid var(--safe-inner-box-border, var(--line, #d5e0e7)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: var(--safe-inner-box-bg, var(--surface-soft, #f6f9fb)) !important;
  box-shadow: none !important;
  padding: clamp(16px, 2.3vw, 22px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#profileCreateGroupPanel .create-group-image-section {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

#profileCreateGroupPanel .auth-image-field.ui-image-editor {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 var(--panel-gap, 14px) !important;
  box-sizing: border-box !important;
}

#profileCreateGroupPanel .create-group-name-section,
#profileCreateGroupPanel .create-group-description-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

#profileCreateGroupPanel .create-group-classification-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#profileCreateGroupPanel .create-group-members-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#profileCreateGroupPanel .create-group-member-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
}

#profileCreateGroupPanel .create-group-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: var(--panel-gap, 14px) !important;
  grid-template-columns: none !important;
}

#profileCreateGroupPanel #createGroupStatus {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  justify-content: center !important;
  margin: 8px auto 0 !important;
}

@media (max-width: 640px) {
  #profileCreateGroupPanel .create-group-classification-section,
  #profileCreateGroupPanel .create-group-member-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #profileCreateGroupPanel #createGroupMemberAddBtn {
    justify-self: center !important;
  }
}

#profileEditPanel .profile-edit-box,
#profileEditPanel .ui-section-card.profile-edit-box,
#profileEditPanel .visibility-panel.profile-edit-box,
#profileEditPanel .auth-image-field.ui-image-editor {
  border: 1px solid var(--safe-inner-box-border, var(--line, #d5e0e7)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: var(--safe-inner-box-bg, var(--surface-soft, #f6f9fb)) !important;
  box-shadow: none !important;
  padding: clamp(16px, 2.3vw, 22px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#profileEditPanel .profile-account-box .auth-grid,
#profileEditPanel .profile-personal-box .auth-grid,
#profileEditPanel .profile-password-box .auth-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#profileEditPanel .profile-email-field,
#profileEditPanel .profile-country-field {
  grid-column: 1 / -1 !important;
}

#profileEditPanel .profile-role-box {
  display: grid !important;
  gap: 12px !important;
}

#profileEditPanel .profile-role-box .role-picker-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
}

#profileEditPanel .auth-image-field.ui-image-editor {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 var(--panel-gap, 14px) !important;
  box-sizing: border-box !important;
}

#profileEditPanel .auth-password-block .field-helper-text,
#profileEditPanel .profile-password-box .field-helper-text {
  margin: 10px 0 14px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(137, 164, 184, .34) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #5f6f7f !important;
  font-family: var(--font, 'Manrope', Arial, sans-serif) !important;
  font-size: .86rem !important;
  font-weight: 650 !important;
  line-height: 1.42 !important;
}

#profileEditPanel .profile-visibility-scope-field,
#profileEditPanel #profileVisibilityScopeField {
  margin-top: 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(137, 164, 184, .34) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .72) !important;
}

#profileEditPanel .profile-edit-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: var(--panel-gap, 14px) !important;
  grid-template-columns: none !important;
}

#profileEditPanel .profile-delete-user-row {
  display: none !important;
}

@media (max-width: 640px) {
  #profileEditPanel .profile-account-box .auth-grid,
  #profileEditPanel .profile-personal-box .auth-grid,
  #profileEditPanel .profile-password-box .auth-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #profileEditPanel .profile-email-field,
  #profileEditPanel .profile-country-field {
    grid-column: auto !important;
  }

  #profileEditPanel .profile-role-box .role-picker-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Start your journey / Soundwalk setup targeted cleanup */
#soundwalkModeField,
#soundwalkDetailsBlock .soundwalk-field-box {
  border: 1px solid var(--safe-inner-box-border, var(--line, #d5e0e7)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: var(--safe-inner-box-bg, var(--surface-soft, #f6f9fb)) !important;
  box-shadow: none !important;
  padding: clamp(16px, 2.3vw, 22px) !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#soundwalkDetailsBlock:not(.hidden):not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--panel-gap, 14px) !important;
  margin-top: 18px !important;
  padding: clamp(16px, 2.4vw, 24px) !important;
  border: 1px solid rgba(137, 164, 184, .26) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .46) !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


#soundwalkDetailsBlock .soundwalk-create-heading {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#soundwalkDetailsBlock .soundwalk-main-box .soundwalk-inline-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

#introScreen .intro-soundwalk-image {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 var(--panel-gap, 14px) !important;
  box-sizing: border-box !important;
}

#introScreen .button-bar {
  justify-content: center !important;
  text-align: center !important;
}

#introScreen #startWalkBtn {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 640px) {
  #soundwalkDetailsBlock .soundwalk-main-box .soundwalk-inline-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Auth / Signup / Login targeted cleanup */
#signupPanel .signup-account-box .auth-grid,
#signupPanel .signup-personal-box .auth-grid,
#signupPanel .signup-password-box .auth-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#signupPanel .signup-country-field {
  grid-column: 1 / -1 !important;
}

#signupPanel .signup-field-box,
#signupPanel .organization-panel,
#signupPanel .visibility-panel,
#signupPanel .auth-image-field.ui-image-editor,
#loginPanel,
#passwordResetPanel .auth-reset-fields {
  border: 1px solid var(--safe-inner-box-border, var(--line, #d5e0e7)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: var(--safe-inner-box-bg, var(--surface-soft, #f6f9fb)) !important;
  box-shadow: none !important;
  padding: clamp(16px, 2.3vw, 22px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#signupPanel .signup-role-box {
  display: grid !important;
  gap: 12px !important;
}

#signupPanel .signup-role-layout .role-picker-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
}

#signupPanel .auth-image-field.ui-image-editor {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 var(--panel-gap, 14px) !important;
}

#signupPanel .profile-visibility-scope-field {
  margin-top: 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(137, 164, 184, .34) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .72) !important;
}

#signupPanel .signup-button-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: var(--panel-gap, 14px) !important;
  grid-template-columns: none !important;
}

#signupPanel .signup-button-bar #signupBtn {
  width: auto !important;
  min-width: var(--button-w, 160px) !important;
  max-width: 100% !important;
}

#loginPanel #authError {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  #signupPanel .signup-account-box .auth-grid,
  #signupPanel .signup-personal-box .auth-grid,
  #signupPanel .signup-password-box .auth-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #signupPanel .signup-country-field {
    grid-column: auto !important;
  }

  #signupPanel .signup-role-layout .role-picker-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Final targeted visibility and spacing repair for profile/Soundwalk panels. */
#soundwalkDetailsBlock.hidden,
#soundwalkDetailsBlock[hidden] {
  display: none !important;
}

#profileScreen .profile-page-panel.hidden,
#profileScreen .profile-page-panel[hidden],
#profileOverview.hidden,
#profileOverview[hidden],
#profileSoundsPanel.hidden,
#profileSoundsPanel[hidden],
#profileEditPanel.hidden,
#profileEditPanel[hidden],
#profileGroupsPanel.hidden,
#profileGroupsPanel[hidden],
#profileSoundwalksPanel.hidden,
#profileSoundwalksPanel[hidden],
#profileEditSoundPanel.hidden,
#profileEditSoundPanel[hidden],
#profileEditSoundwalkPanel.hidden,
#profileEditSoundwalkPanel[hidden],
#profileCreateGroupPanel.hidden,
#profileCreateGroupPanel[hidden] {
  display: none !important;
}

#profileScreen .profile-page-panel:not(.hidden):not([hidden]),
#profileOverview:not(.hidden):not([hidden]),
#profileSoundsPanel:not(.hidden):not([hidden]),
#profileEditPanel:not(.hidden):not([hidden]),
#profileGroupsPanel:not(.hidden):not([hidden]),
#profileSoundwalksPanel:not(.hidden):not([hidden]),
#profileEditSoundPanel:not(.hidden):not([hidden]),
#profileEditSoundwalkPanel:not(.hidden):not([hidden]),
#profileCreateGroupPanel:not(.hidden):not([hidden]) {
  margin-top: var(--panel-gap, 14px) !important;
}

#profileScreen .profile-page-panel:not(.hidden):not([hidden]) > * + *,
#profileOverview:not(.hidden):not([hidden]) > * + *,
#profileSoundsPanel:not(.hidden):not([hidden]) > * + *,
#profileEditPanel:not(.hidden):not([hidden]) > * + *,
#profileGroupsPanel:not(.hidden):not([hidden]) > * + *,
#profileSoundwalksPanel:not(.hidden):not([hidden]) > * + *,
#profileEditSoundPanel:not(.hidden):not([hidden]) > * + *,
#profileEditSoundwalkPanel:not(.hidden):not([hidden]) > * + *,
#profileCreateGroupPanel:not(.hidden):not([hidden]) > * + * {
  margin-top: var(--panel-gap, 14px) !important;
}

#profileScreen .profile-page-panel:not(.hidden):not([hidden]) .profile-list-box,
#profileScreen .profile-page-panel:not(.hidden):not([hidden]) .profile-sounds-list-box,
#profileScreen .profile-page-panel:not(.hidden):not([hidden]) .profile-soundwalks-list-box,
#profileScreen .profile-page-panel:not(.hidden):not([hidden]) .profile-groups-list-box,
#profileEditPanel:not(.hidden):not([hidden]) .profile-edit-box,
#profileEditPanel:not(.hidden):not([hidden]) .ui-section-card.profile-edit-box,
#profileEditPanel:not(.hidden):not([hidden]) .visibility-panel.profile-edit-box,
#profileScreen #profileAddGroupPanel:not(.hidden):not([hidden]),
#profileCreateGroupPanel:not(.hidden):not([hidden]) .create-group-box,
#profileCreateGroupPanel:not(.hidden):not([hidden]) .ui-section-card.create-group-box,
#profileCreateGroupPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor,
#profileEditPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor {
  border: 1px solid var(--safe-inner-box-border, var(--line, #d5e0e7)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: var(--safe-inner-box-bg, var(--surface-soft, #f6f9fb)) !important;
  box-shadow: none !important;
  padding: clamp(16px, 2.3vw, 22px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#profileCreateGroupPanel:not(.hidden):not([hidden]) .create-group-image-section,
#profileEditPanel:not(.hidden):not([hidden]) .profile-image-box {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Final profile-only visual consistency guard: keep overview boxes on the same soft system. */
#profileOverview:not(.hidden):not([hidden]) .profile-overview-card,
#profileOverview:not(.hidden):not([hidden]) .profile-overview-grid > div {
  border: 1px solid var(--safe-inner-box-border, var(--line, #d5e0e7)) !important;
  border-radius: var(--radius-md, 16px) !important;
  background: var(--safe-inner-box-bg, var(--surface-soft, #f6f9fb)) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#profileOverview:not(.hidden):not([hidden]) .profile-overview-card {
  padding: clamp(16px, 2.3vw, 22px) !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Keep profile image upload labels above the editor/preview across late responsive overrides. */
#profileEditPanel .auth-image-field.ui-image-editor,
#profileCreateGroupPanel .auth-image-field.ui-image-editor,
#profileEditSoundPanel .auth-image-field.ui-image-editor,
#profileEditSoundwalkPanel .auth-image-field.ui-image-editor {
  display: grid !important;
  grid-template-columns: minmax(170px, .85fr) minmax(220px, 1fr) !important;
  grid-template-areas:
    "label label"
    "controls preview" !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
}

#profileEditPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-image-label,
#profileCreateGroupPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-image-label,
#profileEditSoundPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-image-label,
#profileEditSoundwalkPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-image-label {
  grid-area: label !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
}

#profileEditPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .photo-crop-layout,
#profileCreateGroupPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .photo-crop-layout,
#profileEditSoundPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .photo-crop-layout,
#profileEditSoundwalkPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .photo-crop-layout,
#profileEditPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .ui-image-editor__controls,
#profileCreateGroupPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .ui-image-editor__controls,
#profileEditSoundPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .ui-image-editor__controls,
#profileEditSoundwalkPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .ui-image-editor__controls {
  grid-area: controls !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#profileEditPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileCreateGroupPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileEditSoundPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileEditSoundwalkPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-avatar-editor,
#profileEditPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .ui-image-editor__preview-actions,
#profileCreateGroupPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .ui-image-editor__preview-actions,
#profileEditSoundPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .ui-image-editor__preview-actions,
#profileEditSoundwalkPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .ui-image-editor__preview-actions,
#profileEditPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileCreateGroupPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileEditSoundPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-avatar-preview,
#profileEditSoundwalkPanel:not(.hidden):not([hidden]) .auth-image-field.ui-image-editor .auth-avatar-preview {
  min-width: 0 !important;
}

@media (max-width: 720px) {
  #profileEditPanel .auth-image-field.ui-image-editor,
  #profileCreateGroupPanel .auth-image-field.ui-image-editor,
  #profileEditSoundPanel .auth-image-field.ui-image-editor,
  #profileEditSoundwalkPanel .auth-image-field.ui-image-editor {
    grid-template-columns: minmax(0, 1fr) minmax(128px, 140px) !important;
    grid-template-areas:
      "label label"
      "controls preview" !important;
    overflow: visible !important;
  }

  #profileEditPanel .auth-image-field.ui-image-editor .photo-adjustments,
  #profileCreateGroupPanel .auth-image-field.ui-image-editor .photo-adjustments,
  #profileEditSoundPanel .auth-image-field.ui-image-editor .photo-adjustments,
  #profileEditSoundwalkPanel .auth-image-field.ui-image-editor .photo-adjustments,
  #profileEditPanel .auth-image-field.ui-image-editor .photo-adjust-control,
  #profileCreateGroupPanel .auth-image-field.ui-image-editor .photo-adjust-control,
  #profileEditSoundPanel .auth-image-field.ui-image-editor .photo-adjust-control,
  #profileEditSoundwalkPanel .auth-image-field.ui-image-editor .photo-adjust-control {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 360px) {
  #profileEditPanel .auth-image-field.ui-image-editor,
  #profileCreateGroupPanel .auth-image-field.ui-image-editor,
  #profileEditSoundPanel .auth-image-field.ui-image-editor,
  #profileEditSoundwalkPanel .auth-image-field.ui-image-editor {
    grid-template-columns: minmax(0, 1fr) 124px !important;
    gap: 8px !important;
  }
}

#profileGroupsList .profile-group-meta-row,
#profileGroupsList .profile-group-owner-row,
#profileGroupsList .profile-group-members-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

#profileGroupsList .profile-group-meta-row > strong {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  color: var(--text-soft, #5f6f7f) !important;

}

#profileGroupsList .profile-group-meta-row .profile-group-member-list {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#profileGroupsList .profile-group-member-chip {
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid var(--safe-inner-box-border, rgba(213,224,231,.94)) !important;
  color: var(--text, #2f3a45) !important;
  box-shadow: none !important;
}

#profileGroupsList .profile-group-member-name {
  color: var(--text, #2f3a45) !important;
  font-size: .8rem !important;
  font-weight: 780 !important;
}

#profileScreen .profile-empty-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(202, 154, 61, .30) !important;
  border-radius: 16px !important;
  background: rgba(255, 244, 214, .72) !important;
  color: #5f6f7f !important;
  font-family: var(--font, 'Manrope', Arial, sans-serif) !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#profileScreen .profile-empty-state-icon {
  flex: 0 0 auto !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
}

#profileScreen .profile-empty-state-icon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

#profileScreen .profile-empty-state-text {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#profileScreen .profile-empty-state-text strong,
#profileScreen .profile-empty-state-text span {
  color: inherit !important;
  font: inherit !important;
}

#profileCreateGroupPanel .create-group-user-suggestions {
  display: grid !important;
  gap: 6px !important;
  width: 100% !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  margin-top: 8px !important;
  padding: 8px !important;
  border: 1px solid var(--safe-inner-box-border, var(--line, #d5e0e7)) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 24px rgba(36, 55, 70, .10) !important;
  box-sizing: border-box !important;
}

#profileCreateGroupPanel .create-group-user-suggestions.hidden {
  display: none !important;
}

#profileCreateGroupPanel .create-group-user-suggestion {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 7px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: var(--text, #2f3a45) !important;
  font-family: var(--font, 'Manrope', Arial, sans-serif) !important;
  text-align: left !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#profileCreateGroupPanel .create-group-user-suggestion:hover,
#profileCreateGroupPanel .create-group-user-suggestion:focus-visible,
#profileCreateGroupPanel .create-group-user-suggestion.active {
  border-color: rgba(91, 134, 174, .28) !important;
  background: rgba(91, 134, 174, .10) !important;
  outline: none !important;
}

#profileCreateGroupPanel .create-group-user-suggestion-text {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

#profileCreateGroupPanel .create-group-user-suggestion-text strong,
#profileCreateGroupPanel .create-group-user-suggestion-text small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#profileCreateGroupPanel .create-group-user-suggestion-text strong {
  color: var(--profile-dark-blue, #1f5e8c) !important;
  font-size: .84rem !important;
  font-weight: 850 !important;
}

#profileCreateGroupPanel .create-group-user-suggestion-text small {
  color: var(--text-soft, #5f6f7f) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
}

#profileCreateGroupPanel .create-group-member-chip {
  padding: 5px 7px 5px 10px !important;
  gap: 7px !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid var(--safe-inner-box-border, rgba(213,224,231,.94)) !important;
  color: var(--text, #2f3a45) !important;
  box-shadow: none !important;
}

#profileCreateGroupPanel .create-group-member-chip .organization-chip-name {
  color: var(--text, #2f3a45) !important;
  font-weight: 850 !important;
}

#profileCreateGroupPanel .create-group-member-chip .member-chip-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(174, 94, 88, .88) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#profileCreateGroupPanel .create-group-member-chip .member-chip-remove:hover,
#profileCreateGroupPanel .create-group-member-chip .member-chip-remove:focus-visible {
  background: rgba(150, 71, 66, .96) !important;
  outline: 2px solid rgba(174, 94, 88, .22) !important;
  outline-offset: 2px !important;
}

#profileCreateGroupPanel .create-group-member-chip .member-chip-remove svg {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
}

/* Targeted profile cleanup: overview cards should not sit inside another large card. */
#profileOverview:not(.hidden):not([hidden]) .profile-overview-grid {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
}


#profileOverviewSoundwalks .profile-stat-public,
#profileOverviewSoundwalks .profile-stat-private,
#profileOverviewSounds .profile-stat-public,
#profileOverviewSounds .profile-stat-private,
#profileOverviewSoundwalks .profile-stat-count,
#profileOverviewSounds .profile-stat-count {
  color: var(--text-soft, #5f6f7f) !important;
}

#profileOverviewGroups .profile-group-overview-summary,
#profileOverviewGroups .profile-group-count-detail,
#profileOverviewGroups .profile-group-count-role {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--text-soft, #5f6f7f) !important;
  font-weight: 800 !important;
}

#profileOverviewGroups .profile-group-count-role svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--profile-overview-icon-color, #c4872a) !important;
  stroke: currentColor !important;
}

#profileOverviewGroups .profile-group-paren,
#profileOverviewGroups .profile-group-separator,
#profileOverviewGroups .profile-group-count-role span {
  color: var(--text-soft, #5f6f7f) !important;
}

#profileScreen .profile-title-actions {
  gap: 8px !important;
}

#profileScreen .profile-title-edit-btn,
#profileScreen .profile-title-delete-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
}

#recordingPanel .meta-grid {
  display: grid !important;
}

#recordingPanel #recordingNameField { order: 10 !important; }
#recordingPanel #descriptionField { order: 20 !important; }
#recordingPanel #shortNoteField { order: 30 !important; }
#recordingPanel .recording-toolbox { order: 40 !important; }
#recordingPanel #photoField { order: 50 !important; }
#recordingPanel #recordingContextField { order: 60 !important; }
#recordingPanel #coordinatesField { order: 70 !important; }
#recordingPanel #hearingDistanceField { order: 75 !important; }
#recordingPanel #categoryField { order: 80 !important; }
#recordingPanel #conditionField { order: 90 !important; }
#recordingPanel #soundscapeRoleField { order: 100 !important; }
#recordingPanel #visibilityField { order: 110 !important; }
#recordingPanel #recordingStatus { order: 120 !important; }
#recordingPanel .save-entry-actions { order: 130 !important; }

#recordingPanel #recordingContextField,
#recordingPanel #coordinatesField,
#recordingPanel #hearingDistanceField,
#recordingPanel #recordingNameField,
#recordingPanel #descriptionField,
#recordingPanel #shortNoteField,
#recordingPanel #photoField,
#recordingPanel #categoryField,
#recordingPanel #conditionField,
#recordingPanel #soundscapeRoleField,
#recordingPanel #visibilityField,
#recordingPanel .recording-toolbox {
  background: var(--safe-inner-box-bg, rgba(246,249,251,.82)) !important;
  border: 1px solid var(--safe-inner-box-border, rgba(213,224,231,.94)) !important;
  box-shadow: none !important;
}

/* Targeted action harmonization: location, info, clear/reset, map layers, history/delete. */
:root {
  --sr-mini-action-size: 42px;
  --sr-mini-action-radius: 14px;
  --sr-mini-action-icon: 19px;
  --sr-action-location: var(--purple, #7b6aa4);
  --sr-action-location-strong: #6b5b97;
  --sr-action-info: var(--brand, #2e6f98);
  --sr-action-info-strong: #285f84;
  --sr-action-clear: var(--ochre, #c4913e);
  --sr-action-clear-strong: #a97022;
  --sr-action-history: #7f8fa3;
  --sr-action-history-strong: #65778d;
  --sr-action-danger: var(--danger, #c94848);
  --sr-action-danger-strong: #ac3939;
  --sr-action-map: var(--teal, #4d9aaa);
  --sr-action-map-strong: #2f779d;
}

.coordinate-row .coordinate-paste-btn,
.coordinate-row .coordinate-recenter-btn,
.recording-action-btn.locate,
.recording-action-btn.details,
.map-clear-search-btn,
#settingsMicrophoneInfoBtn,
#settingsCameraInfoBtn,
#profileToggleGroupsInfoBtn,
#recordingPanel .preview-history-btn,
#recordingPanel .photo-history-btn,
#recordingPanel .coordinate-paste-btn,
#recordingPanel .coordinate-recenter-btn,
#profileScreen .preview-history-btn.reset,
#profileScreen .preview-history-btn.redo,
#profileScreen .preview-history-btn.delete,
#authScreen .preview-history-btn.reset,
#authScreen .preview-history-btn.redo,
#authScreen .preview-history-btn.delete,
#introScreen .preview-history-btn.reset,
#introScreen .preview-history-btn.redo,
#introScreen .preview-history-btn.delete {
  width: var(--sr-mini-action-size) !important;
  height: var(--sr-mini-action-size) !important;
  min-width: var(--sr-mini-action-size) !important;
  min-height: var(--sr-mini-action-size) !important;
  padding: 0 !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-radius: var(--sr-mini-action-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 32, .07) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease !important;
}

.coordinate-row .coordinate-paste-btn svg,
.coordinate-row .coordinate-recenter-btn svg,
.recording-action-btn.locate svg,
.recording-action-btn.details svg,
.map-clear-search-btn svg,
#settingsMicrophoneInfoBtn svg,
#settingsCameraInfoBtn svg,
#profileToggleGroupsInfoBtn svg,
#recordingPanel .preview-history-btn svg,
#recordingPanel .photo-history-btn svg,
#profileScreen .preview-history-btn svg,
#authScreen .preview-history-btn svg,
#introScreen .preview-history-btn svg {
  width: var(--sr-mini-action-icon) !important;
  height: var(--sr-mini-action-icon) !important;
  min-width: var(--sr-mini-action-icon) !important;
  min-height: var(--sr-mini-action-icon) !important;
  stroke: currentColor !important;
}

.coordinate-row .coordinate-recenter-btn,
.recording-action-btn.locate,
.map-floating-btn.recenter {
  border-color: color-mix(in srgb, var(--sr-action-location) 38%, white) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sr-action-location) 16%, white), color-mix(in srgb, var(--sr-action-location) 7%, white)) !important;
  color: var(--sr-action-location-strong) !important;
}

.coordinate-row .coordinate-paste-btn {
  border-color: color-mix(in srgb, var(--sr-action-info) 30%, white) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sr-action-info) 12%, white), color-mix(in srgb, var(--sr-action-info) 5%, white)) !important;
  color: var(--sr-action-info-strong) !important;
}

.recording-action-btn.details,
#settingsMicrophoneInfoBtn,
#settingsCameraInfoBtn,
#profileToggleGroupsInfoBtn,
.choice-card .choice-icon-button,
.map-floating-btn.layers {
  border-color: color-mix(in srgb, var(--sr-action-info) 28%, white) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sr-action-info) 11%, white), color-mix(in srgb, var(--sr-action-info) 4%, white)) !important;
  color: var(--sr-action-info-strong) !important;
}

.choice-card.visibility-private .choice-icon-button,
.choice-card.visibility-private:has(input:checked) .choice-icon-button {
  border-color: color-mix(in srgb, var(--red, #c96865) 34%, white) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--red, #c96865) 10%, white), color-mix(in srgb, var(--red, #c96865) 3%, white)) !important;
  color: var(--red, #c96865) !important;
}

.clear-filters-btn,
.map-clear-search-btn {
  border: 1.5px solid color-mix(in srgb, var(--sr-action-clear) 34%, white) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sr-action-clear) 14%, white), color-mix(in srgb, var(--sr-action-clear) 6%, white)) !important;
  color: var(--sr-action-clear-strong) !important;
  box-shadow: 0 8px 18px rgba(196, 145, 62, .10) !important;
}


#recordingPanel .preview-history-btn.nav,
#recordingPanel .photo-history-btn.nav,
#profileScreen .preview-history-btn.reset,
#authScreen .preview-history-btn.reset,
#introScreen .preview-history-btn.reset,
#profileScreen .preview-history-btn.redo,
#authScreen .preview-history-btn.redo,
#introScreen .preview-history-btn.redo {
  border-color: color-mix(in srgb, var(--sr-action-history) 34%, white) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sr-action-history) 17%, white), color-mix(in srgb, var(--sr-action-history) 7%, white)) !important;
  color: var(--sr-action-history-strong) !important;
}

#recordingPanel .preview-history-btn.delete,
#recordingPanel .photo-history-btn.delete,
#profileScreen .preview-history-btn.delete,
#authScreen .preview-history-btn.delete,
#introScreen .preview-history-btn.delete,
button[id$="ClearBtn"].preview-history-btn.delete {
  border-color: color-mix(in srgb, var(--sr-action-danger) 36%, white) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sr-action-danger) 92%, white), var(--sr-action-danger-strong)) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(201, 72, 72, .18) !important;
}

.coordinate-row .coordinate-paste-btn:hover,
.coordinate-row .coordinate-recenter-btn:hover,
.recording-action-btn.locate:hover,
.recording-action-btn.details:hover,
.clear-filters-btn:hover,
.map-clear-search-btn:hover,
#settingsMicrophoneInfoBtn:hover,
#settingsCameraInfoBtn:hover,
#profileToggleGroupsInfoBtn:hover,
.choice-card .choice-icon-button:hover,
.map-floating-btn:hover,
.preview-history-btn:hover,
.photo-history-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 32, .11) !important;
}

.coordinate-row .coordinate-paste-btn:active,
.coordinate-row .coordinate-recenter-btn:active,
.recording-action-btn.locate:active,
.recording-action-btn.details:active,
.clear-filters-btn:active,
.map-clear-search-btn:active,
.map-floating-btn:active,
.preview-history-btn:active,
.photo-history-btn:active {
  transform: translateY(0) scale(.98) !important;
}

.coordinate-row .coordinate-paste-btn:focus-visible,
.coordinate-row .coordinate-recenter-btn:focus-visible,
.recording-action-btn.locate:focus-visible,
.recording-action-btn.details:focus-visible,
.clear-filters-btn:focus-visible,
.map-clear-search-btn:focus-visible,
#settingsMicrophoneInfoBtn:focus-visible,
#settingsCameraInfoBtn:focus-visible,
#profileToggleGroupsInfoBtn:focus-visible,
.choice-card .choice-icon-button:focus-visible,
.map-floating-btn:focus-visible,
.preview-history-btn:focus-visible,
.photo-history-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, currentColor 24%, transparent) !important;
  outline-offset: 2px !important;
}

.coordinate-row .coordinate-paste-btn:disabled,
.coordinate-row .coordinate-recenter-btn:disabled,
.recording-action-btn.locate:disabled,
.recording-action-btn.details:disabled,
.clear-filters-btn:disabled,
.map-clear-search-btn:disabled,
.map-floating-btn:disabled,
.preview-history-btn:disabled,
.photo-history-btn:disabled {
  opacity: .42 !important;
  filter: saturate(.72) !important;
  transform: none !important;
  box-shadow: none !important;
}

.map-floating-controls {
  gap: 9px !important;
}

.map-floating-btn {
  width: var(--sr-mini-action-size) !important;
  height: var(--sr-mini-action-size) !important;
  min-width: var(--sr-mini-action-size) !important;
  min-height: var(--sr-mini-action-size) !important;
  border-radius: var(--sr-mini-action-radius) !important;
  backdrop-filter: blur(10px) !important;
}

.map-floating-btn svg {
  width: var(--sr-mini-action-icon) !important;
  height: var(--sr-mini-action-icon) !important;
}

.map-layer-menu {
  min-width: 184px !important;
  gap: 7px !important;
  padding: 9px !important;
  border-radius: 18px !important;
  border-color: color-mix(in srgb, var(--sr-action-map) 24%, white) !important;
}

.map-layer-menu button {
  min-height: 42px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 6px 10px !important;
  border: 1.5px solid transparent !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--sr-action-map) 5%, white) !important;
  color: var(--text, #27313d) !important;
}

.map-layer-menu button:hover,
.map-layer-menu button:focus-visible {
  border-color: color-mix(in srgb, var(--sr-action-map) 24%, white) !important;
  background: color-mix(in srgb, var(--sr-action-map) 10%, white) !important;
  color: var(--sr-action-map-strong) !important;
}

.map-layer-menu button.active {
  border-color: color-mix(in srgb, var(--sr-action-map) 42%, white) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sr-action-map) 18%, white), color-mix(in srgb, var(--sr-action-map) 8%, white)) !important;
  color: var(--sr-action-map-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 8px 18px rgba(77,154,170,.12) !important;
}

.map-layer-choice-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
}

.settings-map-grid {
  gap: 8px !important;
  padding: 6px !important;
  border: 1px solid color-mix(in srgb, var(--sr-action-map) 18%, white) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--sr-action-map) 5%, white) !important;
}

.settings-map-grid .choice-card {
  margin: 0 !important;
}

.settings-map-grid .choice-card-inner {
  min-height: 58px !important;
  gap: 10px !important;
  border-radius: 15px !important;
  border: 1.5px solid transparent !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
}

.settings-map-grid .choice-card:hover .choice-card-inner,
.settings-map-grid .choice-card:focus-within .choice-card-inner {
  border-color: color-mix(in srgb, var(--sr-action-map) 22%, white) !important;
  background: rgba(255,255,255,.92) !important;
}

.settings-map-grid .choice-card:has(input:checked) .choice-card-inner,
.settings-map-grid .choice-card > input:checked + .choice-card-inner {
  border-color: color-mix(in srgb, var(--sr-action-map) 42%, white) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sr-action-map) 17%, white), color-mix(in srgb, var(--sr-action-map) 8%, white)) !important;
  color: var(--sr-action-map-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.78), 0 10px 22px rgba(77,154,170,.10) !important;
}

.settings-map-grid .choice-card .choice-title {
  color: inherit !important;
  font-size: .84rem !important;
}

.settings-map-grid .choice-card .choice-icon-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
}

/* ==========================================================
   Hard UI regression repair after SVG standardization
   Shared action/toggle layer only: no icon registry, label, or behavior changes.
   ========================================================== */
:root {
  --mini-btn-size: 42px;
  --mini-btn-radius: 14px;
  --mini-btn-icon: 19px;
  --action-save-bg: linear-gradient(135deg, #5f8b74, #7c9368);
  --action-audio-bg: linear-gradient(135deg, #b57965, #c86b73);
  --action-edit-bg: linear-gradient(135deg, #4f8c78, #2da98e);
  --action-info-bg: linear-gradient(135deg, #668caf, #4e78a0);
  --action-map-bg: linear-gradient(135deg, #4d9aaa, #2f779d);
  --action-settings-bg: linear-gradient(135deg, #776b8f, #5d536f);
  --action-neutral-bg: linear-gradient(135deg, #87939c, #687783);
  --action-danger-bg: linear-gradient(135deg, #d84a4a, #a92f36);
  --toggle-accent: var(--brand, #2e6f98);
  --toggle-selected-bg: color-mix(in srgb, var(--toggle-accent) 18%, white);
  --toggle-selected-border: color-mix(in srgb, var(--toggle-accent) 58%, var(--line, #d5e0e7));
  --toggle-selected-shadow: color-mix(in srgb, var(--toggle-accent) 18%, transparent);
}

.photo-action-btn,
.preview-history-btn,
.photo-history-btn,
.btn-upload,
.recording-action-btn,
.popup-mini-action-btn,
.popup-mini-audio-btn,
.map-floating-btn,
.map-clear-search-btn,
.library-page-btn,
.coordinate-paste-btn,
.coordinate-recenter-btn,
#pasteCoordinatesBtn,
#useCurrentCoordinatesBtn,
#settingsMicrophoneInfoBtn,
#settingsCameraInfoBtn,
#profileToggleGroupsInfoBtn,
.card-actions .btn-icon,
.entry-actions .btn-icon,
.profile-group-edit-btn,
.profile-group-delete-btn,
.profile-title-edit-btn,
.profile-title-delete-btn {
  width: var(--mini-btn-size) !important;
  height: var(--mini-btn-size) !important;
  min-width: var(--mini-btn-size) !important;
  min-height: var(--mini-btn-size) !important;
  max-width: var(--mini-btn-size) !important;
  max-height: var(--mini-btn-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--mini-btn-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(15, 23, 32, .13) !important;
}

.photo-action-btn svg,
.preview-history-btn svg,
.photo-history-btn svg,
.btn-upload svg,
.recording-action-btn svg,
.popup-mini-action-btn svg,
.popup-mini-audio-btn svg,
.map-floating-btn svg,
.map-clear-search-btn svg,
.library-page-btn svg,
.coordinate-paste-btn svg,
.coordinate-recenter-btn svg,
#pasteCoordinatesBtn svg,
#useCurrentCoordinatesBtn svg,
#settingsMicrophoneInfoBtn svg,
#settingsCameraInfoBtn svg,
#profileToggleGroupsInfoBtn svg,
.card-actions .btn-icon svg,
.entry-actions .btn-icon svg,
.profile-group-edit-btn svg,
.profile-group-delete-btn svg,
.profile-title-edit-btn svg,
.profile-title-delete-btn svg {
  width: var(--mini-btn-icon) !important;
  height: var(--mini-btn-icon) !important;
  min-width: var(--mini-btn-icon) !important;
  min-height: var(--mini-btn-icon) !important;
  stroke: currentColor !important;
}

.photo-action-btn > span,
.preview-history-btn > span,
.photo-history-btn > span,
.btn-upload > span,
.recording-action-btn > span,
.popup-mini-action-btn > span,
.popup-mini-audio-btn > span,
.map-floating-btn > span,
.map-clear-search-btn > span,
.library-page-btn > span,
.coordinate-paste-btn > span,
.coordinate-recenter-btn > span,
#pasteCoordinatesBtn > span,
#useCurrentCoordinatesBtn > span,
#settingsMicrophoneInfoBtn > span,
#settingsCameraInfoBtn > span,
#profileToggleGroupsInfoBtn > span,
.card-actions .btn-icon > span,
.entry-actions .btn-icon > span,
.profile-group-edit-btn > span,
.profile-group-delete-btn > span,
.profile-title-edit-btn > span:not(.sr-only),
.profile-title-delete-btn > span:not(.sr-only) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.recording-action-btn.play,
.popup-mini-audio-btn.play,
.photo-action-btn.upload,
.btn-upload {
  background: var(--action-save-bg) !important;
}

.recording-action-btn.record,
.popup-mini-audio-btn.record,
.popup-mini-audio-btn.stop {
  background: var(--action-audio-bg) !important;
}

.recording-action-btn.edit,
.popup-mini-action-btn.edit,
.profile-group-edit-btn,
.profile-title-edit-btn {
  background: var(--action-edit-bg) !important;
}

.recording-action-btn.details,
.popup-mini-action-btn.view,
.popup-mini-action-btn.route-detail-btn,
#settingsMicrophoneInfoBtn,
#settingsCameraInfoBtn,
#profileToggleGroupsInfoBtn {
  background: var(--action-info-bg) !important;
}

.recording-action-btn.locate,
.map-floating-btn,
.map-clear-search-btn,
.coordinate-recenter-btn,
#useCurrentCoordinatesBtn {
  background: var(--action-map-bg) !important;
}

.coordinate-paste-btn,
#pasteCoordinatesBtn,
.preview-history-btn.reset,
.preview-history-btn.redo,
.preview-history-btn.nav,
.photo-history-btn.reset,
.photo-history-btn.redo,
.photo-history-btn.nav,
.recording-action-btn.download,
.popup-mini-action-btn.download,
.library-page-btn {
  background: var(--action-neutral-bg) !important;
}

.profile-title-delete-btn,
.profile-group-delete-btn,
.recording-action-btn.delete,
.popup-mini-action-btn.delete,
.preview-history-btn.delete,
.photo-history-btn.delete,
button[id$="ClearBtn"].preview-history-btn.delete {
  background: var(--action-danger-bg) !important;
}

.photo-action-btn:disabled,
.preview-history-btn:disabled,
.photo-history-btn:disabled,
.recording-action-btn:disabled,
.popup-mini-action-btn:disabled,
.popup-mini-audio-btn:disabled,
.map-floating-btn:disabled,
.map-clear-search-btn:disabled,
.library-page-btn:disabled,
.coordinate-paste-btn:disabled,
.coordinate-recenter-btn:disabled,
#pasteCoordinatesBtn:disabled,
#useCurrentCoordinatesBtn:disabled,
#settingsMicrophoneInfoBtn:disabled,
#settingsCameraInfoBtn:disabled,
#profileToggleGroupsInfoBtn:disabled,
.profile-title-edit-btn:disabled,
.profile-title-delete-btn:disabled {
  opacity: .45 !important;
  filter: saturate(.72) !important;
  transform: none !important;
  box-shadow: none !important;
}

.clear-filters-btn {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: var(--button-radius, 15px) !important;
  background: var(--action-map-bg) !important;
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(47, 119, 157, .14) !important;
}

.clear-filters-btn svg {
  stroke: currentColor !important;
}

.coordinate-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--mini-btn-size) var(--mini-btn-size) !important;
  align-items: center !important;
  gap: 8px !important;
}

.coordinate-row input {
  min-width: 0 !important;
}

.choice-card,
.gender-choice-card,
.language-choice-card,
.soundmap-toggle,
.library-toggle,
.archive-toggle,
.audio-effect-toggle {
  --toggle-accent: var(--brand, #2e6f98);
}

.choice-card.anthrophony,
.choice-card.sound-source-anthrophony { --toggle-accent: #c4913e; }
.choice-card.biophony,
.choice-card.sound-source-biophony { --toggle-accent: #6f8d5b; }
.choice-card.geophony,
.choice-card.sound-source-geophony { --toggle-accent: #4d9aaa; }
.choice-card.open,
.choice-card.condition-open { --toggle-accent: #2f7fb2; }
.choice-card.layered,
.choice-card.condition-layered { --toggle-accent: #7b6aa4; }
.choice-card.dense,
.choice-card.condition-dense { --toggle-accent: #9b6a55; }
.choice-card.quiet,
.choice-card.condition-quiet { --toggle-accent: #6f8d5b; }
.choice-card.keynote,
.choice-card.role-keynote { --toggle-accent: #668caf; }
.choice-card.signal,
.choice-card.role-signal { --toggle-accent: #c4913e; }
.choice-card.soundmark,
.choice-card.role-soundmark { --toggle-accent: #4f8c78; }
.choice-card.visibility-public,
.archive-toggle.public,
.library-toggle.public { --toggle-accent: var(--visibility-public-color, #2f6f9f); }
.choice-card.visibility-private,
.archive-toggle.private,
.library-toggle.private { --toggle-accent: var(--visibility-private-color, #9b5f4d); }
.gender-choice-card.gender-male { --toggle-accent: #2f7fb2; }
.gender-choice-card.gender-female { --toggle-accent: #bd6b91; }
.gender-choice-card.gender-other,
.gender-choice-card.gender-prefer-not { --toggle-accent: #7b6aa4; }
.settings-map-grid .choice-card { --toggle-accent: var(--sr-action-map, #4d9aaa); }

.choice-card .choice-icon-button,
.choice-card .choice-icon,
.choice-card .toggle-icon,
.archive-toggle-icon,
.audio-effect-icon,
.soundmap-toggle-icon,
.library-toggle-icon {
  background: #fff !important;
  border: 1.5px solid color-mix(in srgb, var(--toggle-accent) 28%, var(--line, #d5e0e7)) !important;
  color: color-mix(in srgb, var(--toggle-accent) 86%, #27313d) !important;
  box-shadow: none !important;
}

.choice-card:has(input:checked) .choice-card-inner,
.choice-card > input:checked + .choice-card-inner,
.choice-card:has(input:checked) .gender-choice,
.language-choice-card:has(input:checked) .language-card-inner,
.soundmap-toggle:has(input:checked),
.library-toggle:has(input:checked),
.archive-toggle:has(input:checked),
.audio-effect-toggle:has(input:checked),
.audio-effect-toggle.checked {
  border-color: var(--toggle-selected-border) !important;
  background: var(--toggle-selected-bg) !important;
  color: var(--text, #27313d) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.78), 0 10px 22px var(--toggle-selected-shadow) !important;
}

.choice-card:has(input:checked) .choice-icon-button,
.choice-card:has(input:checked) .choice-icon,
.choice-card:has(input:checked) .toggle-icon,
.choice-card > input:checked + .choice-card-inner .choice-icon-button,
.choice-card > input:checked + .choice-card-inner .choice-icon,
.choice-card > input:checked + .choice-card-inner .toggle-icon,
.archive-toggle:has(input:checked) .archive-toggle-icon,
.audio-effect-toggle:has(input:checked) .audio-effect-icon,
.audio-effect-toggle.checked .audio-effect-icon,
.soundmap-toggle:has(input:checked) .soundmap-toggle-icon,
.library-toggle:has(input:checked) .library-toggle-icon {
  border-color: color-mix(in srgb, var(--toggle-accent) 54%, white) !important;
  background: color-mix(in srgb, var(--toggle-accent) 22%, white) !important;
  color: color-mix(in srgb, var(--toggle-accent) 88%, #27313d) !important;
}

#settingsScreen .language-choice-card.language-english { --toggle-accent: #cc4f5f; --language-card-bg: rgba(208, 80, 80, .16); }
#settingsScreen .language-choice-card.language-greek { --toggle-accent: #4e94cd; --language-card-bg: rgba(78, 148, 205, .18); }
#settingsScreen .language-choice-card.language-french { --toggle-accent: #436cbe; --language-card-bg: rgba(67, 108, 190, .17); }
#settingsScreen .language-choice-card.language-spanish { --toggle-accent: #d8a31f; --language-card-bg: rgba(226, 181, 55, .22); }
#settingsScreen .language-choice-card.language-german { --toggle-accent: #545454; --language-card-bg: rgba(80, 80, 80, .15); }

#settingsScreen .settings-language-grid .language-card-inner {
  border: 1.5px solid color-mix(in srgb, var(--toggle-accent) 26%, var(--line, #d5e0e7)) !important;
  background: var(--language-card-bg, rgba(255,255,255,.82)) !important;
}

#settingsScreen .language-choice-card:has(input:checked) .language-card-inner {
  border-color: color-mix(in srgb, var(--toggle-accent) 64%, var(--line, #d5e0e7)) !important;
  background: color-mix(in srgb, var(--toggle-accent) 24%, white) !important;
}

#settingsScreen .language-flag {
  text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 3px 10px color-mix(in srgb, var(--toggle-accent) 20%, transparent) !important;
}

#profileOverviewGroups .profile-group-summary-inline {
  display: grid !important;
  gap: 7px !important;
  align-items: start !important;
}

#profileOverviewGroups .profile-group-role-line {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

#profileOverviewGroups .profile-group-role {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 78px !important;
  color: var(--profile-dark-blue, #1f5e8c) !important;
  font-size: .84rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

#profileOverviewGroups .profile-group-role svg {
  width: 16px !important;
  height: 16px !important;


}

#profileOverviewGroups .profile-group-inline-list {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}

#profileOverviewGroups .profile-group-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 145px !important;
  min-height: 24px !important;
  padding: 2px 7px 2px 3px !important;
  border: 1px solid rgba(184, 203, 215, .74) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--profile-dark-blue, #1f5e8c) !important;
  font-size: .76rem !important;
  font-weight: 780 !important;
  line-height: 1 !important;
}

#profileOverviewGroups .profile-group-chip-image,
#profileOverviewGroups .profile-group-chip-image img {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

#profileOverviewGroups .profile-group-chip-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: inherit !important;
}

#profileOverviewGroups .profile-group-empty-members {
  color: var(--text-soft, #5f6f7f) !important;
  font-weight: 800 !important;
}

@media (max-width: 680px) {
  .notifications-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .notifications-mark-all-btn {
    align-self: flex-start;
  }

  .notification-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .notification-actions,
  .notification-read-state {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .notification-actions .notification-action {
    flex: 1 1 0;
  }
}

@media (max-width: 420px) {
  .notifications-filter-tabs {
    width: 100%;
  }

  .notifications-filter-btn {
    min-width: 0;
    flex: 1 1 0;
  }

  .notification-item {
    padding: 11px;
    gap: 10px;
  }

  .notification-message {
    font-size: .88rem;
  }
}