/* Important declarations in the first layer override the legacy stylesheet's
   accumulated important rules without escalating selector specificity.
   Legacy retains visibility and behavioral classes used by the application. */
@layer modern, legacy;
@import url("legacy-ui.css") layer(legacy);

@layer modern {
  :root, body, body.sinan-user {
    --bg: #F1F4F2 !important;
    --surface: #ffffff !important;
    --surface-2: #F7F9F7 !important;
    --text: #25312C !important;
    --muted: #5B6962 !important;
    --line: #DCE4DE !important;
    --accent: #365D50 !important;
    --accent-soft: #E4EEE8 !important;
    --accent-line: #B8CEC0 !important;
    --button-green: #2C5044 !important;
    --button-green-soft: #D9E7DE !important;
    --button-green-line: #A3BDAE !important;
    --button-green-hover: #234236 !important;
    --good: #365D50 !important;
    --danger: #974D53 !important;
    --shadow: 0 2px 8px #25312C06 !important;
    --radius: 4px !important;
    --ui-red-soft: #F5E8E7 !important;
    --ui-blue: #4E697F !important;
    --ui-blue-soft: #E9EFF4 !important;
    --ui-orange: #7A592E !important;
    --ui-orange-soft: #F5EBDD !important;
    --ui-purple: #66526F !important;
    --ui-purple-soft: #EEE7F0 !important;
    --ui-control-line: #C9D6CD !important;
    --ui-header: 84px !important;
    --ui-nav: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    color-scheme: light !important;
  }

  body.dark-theme {
    --bg: #151b18 !important;
    --surface: #1c2420 !important;
    --surface-2: #242f28 !important;
    --text: #edf3ee !important;
    --muted: #a1b1a5 !important;
    --line: #35433a !important;
    --accent: #91d6ae !important;
    --accent-soft: #243d2f !important;
    --accent-line: #476f56 !important;
    --good: #91d6ae !important;
    --danger: #f3979d !important;
    --ui-red-soft: #3b252a !important;
    --ui-blue: #99c3f3 !important;
    --ui-blue-soft: #253343 !important;
    --ui-orange: #eebe83 !important;
    --ui-orange-soft: #3b3126 !important;
    color-scheme: dark !important;
  }

  html, body { background: var(--bg) !important; width: 100% !important; margin: 0 !important; }
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--text) !important; -webkit-font-smoothing: antialiased !important; }
  *, *::before, *::after { letter-spacing: 0 !important; box-sizing: border-box !important; }
  [hidden] { display: none !important; }
  .hidden-select { display: none !important; }
  h1, h2, h3, h4, p { overflow-wrap: anywhere !important; }
  h1, h2, h3, h4 { color: var(--text) !important; font-weight: 650 !important; line-height: 1.3 !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 15px !important; }
  strong, b { font-weight: 650 !important; }
  button, input, select, textarea { font-family: inherit !important; }
  button { font-weight: 600 !important; line-height: 1.35 !important; transition: background-color .16s, border-color .16s, box-shadow .16s !important; }
  button:disabled, input:disabled, select:disabled { opacity: .55 !important; cursor: not-allowed !important; }
  button:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--accent-line) !important; outline-offset: 3px !important; }
  label { color: var(--muted) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.5 !important; }
  .field, .unit-input, .date-display {
    height: 46px !important; min-height: 46px !important; width: 100% !important; max-width: 100% !important;
    border: 1px solid var(--ui-control-line) !important; border-radius: 4px !important;
    background: var(--surface) !important; color: var(--text) !important;
    box-shadow: none !important; padding: 10px 12px !important;
    font-size: 16px !important; font-weight: 500 !important; line-height: 1.4 !important;
  }
  textarea.field { height: auto !important; min-height: 88px !important; resize: vertical !important; }
  input::placeholder, textarea::placeholder { color: #8A968E !important; font-weight: 400 !important; opacity: 1 !important; }
  .field:focus, .unit-input:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
  .date-picker { min-width: 0 !important; max-width: 100% !important; }
  .date-display { font-size: 13px !important; text-align: left !important; padding-right: 34px !important; }
  .primary, .body-primary-btn, .gym-picker-confirm, .custom-program-btn, #manualFoodAddBtn, #foodSearchBtn {
    background: var(--button-green) !important; color: #ffffff !important; border: 1px solid var(--button-green) !important;
    border-radius: 4px !important; min-height: 46px !important; padding: 10px 18px !important;
    font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important;
  }
  .secondary, .auth-switch-btn, .gym-picker-cancel, .timer-btn {
    background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line) !important;
    border-radius: 4px !important; min-height: 44px !important; padding: 10px 14px !important; box-shadow: none !important; font-size: 13px !important;
  }
  .danger, .custom-exercise-delete { background: var(--ui-red-soft) !important; color: var(--danger) !important; border: 1px solid #E5CBCD !important; border-radius: 4px !important; min-height: 44px !important; box-shadow: none !important; }
  .action-row { gap: 8px !important; }
  .icon-btn { display: grid !important; place-items: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 10px !important; border: 1px solid #E5CBCD !important; border-radius: 4px !important; background: var(--ui-red-soft) !important; color: var(--danger) !important; box-shadow: none !important; }
  .icon-btn svg, .icon-btn svg * { color: var(--danger) !important; stroke: var(--danger) !important; }
  .empty, .medication-empty, .custom-program-empty { background: #EAF0EC !important; color: var(--muted) !important; border: 0 !important; border-radius: 4px !important; padding: 18px !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; }
  .chart-note, .nutrition-helper, .report-section-head p, .medication-section-head > span, .medication-dashboard-head p { color: var(--muted) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.6 !important; }
  .body-eyebrow, .nutrition-eyebrow { color: var(--muted) !important; font-size: 11px !important; font-weight: 550 !important; line-height: 1.5 !important; text-transform: none !important; }

  /* Shell: one scroller per screen, with a separately reserved navigation area. */
  .app {
    width: 100% !important; max-width: 1200px !important; min-height: 100svh !important; height: auto !important;
    margin: 0 auto !important; padding: 0 0 var(--ui-nav) !important;
    background: var(--bg) !important; border: 0 !important; box-shadow: none !important; overflow: visible !important;
  }
  .app > header {
    position: sticky !important; inset: 0 0 auto !important; z-index: 30 !important;
    height: auto !important; min-height: var(--ui-header) !important; width: 100% !important;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 24px 16px !important;
    background: var(--surface) !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  }
  .topbar { min-height: 50px !important; gap: 16px !important; align-items: center !important; }
  .app-heading { display: flex !important; align-items: center !important; gap: 12px !important; flex: 1 1 auto !important; min-width: 0 !important; }
  .app-heading-copy { min-width: 0 !important; }
  .app-brand { display: block !important; width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 4px !important; object-fit: cover !important; }
  .topbar h1 { margin: 0 !important; color: var(--text) !important; font-size: 23px !important; font-weight: 700 !important; line-height: 1.3 !important; }
  #todayText, .today, .header-date-line { margin-top: 3px !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.4 !important; white-space: normal !important; }
  .top-actions { gap: 8px !important; margin: 0 !important; flex: 0 0 auto !important; }
  .workout-header-actions, .workout-guide-actions { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
  body:not(:has(#workoutScreen.active)) #workoutHeaderActions { display: none !important; }
  .workout-guide-actions { flex: 0 0 auto !important; }
  .top-day-field { flex: 0 0 auto !important; width: 150px !important; height: 44px !important; min-width: 0 !important; }
  .top-day-button, .workout-add-exercise, .user-menu-button {
    width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important;
    margin: 0 !important; padding: 8px 10px !important; border-radius: 4px !important;
    border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--text) !important;
    box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important;
  }
  .workout-add-exercise { width: 88px !important; flex: 0 0 88px !important; padding-inline: 6px !important; font-size: 12px !important; }
  .top-day-button { background: var(--button-green-soft) !important; border-color: var(--button-green-line) !important; color: var(--button-green) !important; }
  .top-day-label, #currentUserLabel { color: inherit !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important; }
  .top-day-label { display: block !important; width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  body.sinan-user .top-day-label { white-space: normal !important; text-overflow: clip !important; overflow-wrap: normal !important; }
  .user-menu-button { width: auto !important; min-width: 60px !important; max-width: 120px !important; }
  #currentUserLabel { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .user-menu-popover { width: 210px !important; right: 0 !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: 0 8px 24px #25312C12 !important; padding: 6px !important; }
  .menu-action { min-height: 44px !important; color: var(--text) !important; background: transparent !important; border-radius: 4px !important; font-size: 13px !important; }
  .menu-version { font-size: 11px !important; font-weight: 400 !important; color: var(--muted) !important; border-top: 1px solid var(--line) !important; padding: 12px 8px 6px !important; }
  main { padding: 0 24px !important; margin: 0 !important; width: 100% !important; max-width: none !important; overflow: visible !important; }
  .screen { width: 100% !important; max-width: none !important; padding: 24px 0 !important; margin: 0 !important; background: transparent !important; }
  #workoutScreen { --workout-bg: var(--bg) !important; --workout-card: var(--surface) !important; --workout-ink: var(--text) !important; --workout-muted: var(--muted) !important; --workout-line: var(--line) !important; --workout-green: var(--accent) !important; --workout-green-soft: var(--accent-soft) !important; --workout-burgundy: var(--danger) !important; }
  #bodyScreen { --body-bg: var(--bg) !important; --body-card: var(--surface) !important; --body-card-strong: var(--surface) !important; --body-border: var(--line) !important; --body-text: var(--text) !important; --body-muted: var(--muted) !important; --body-accent: var(--accent) !important; --body-accent-2: var(--ui-purple) !important; --body-warm: var(--ui-orange) !important; --body-shadow: none !important; --body-soft-shadow: none !important; }
  #reportScreen { --report-line: var(--line) !important; --report-text: var(--text) !important; --report-muted: var(--muted) !important; --report-green: var(--accent) !important; --report-soft: var(--surface-2) !important; }
  #medicationScreen { --med-line: var(--line) !important; --med-text: var(--text) !important; --med-muted: var(--muted) !important; --med-green: var(--accent) !important; --med-soft: var(--surface-2) !important; }
  .screen:not(#nutritionScreen) > .panel, .body-entry-column > .panel {
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
    padding: 0 0 24px !important; margin: 0 0 24px !important;
  }
  .panel h2, .panel h3 { margin-top: 0 !important; }
  .body-entry-column { display: grid !important; min-width: 0 !important; gap: 24px !important; align-content: start !important; margin-bottom: 32px !important; }
  .body-entry-column > .panel { margin: 0 !important; padding: 0 !important; }
  .body-entry-column .body-metric-strip { margin: 0 !important; }
  .form-grid { gap: 14px 12px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .form-grid > label { min-width: 0 !important; display: grid !important; gap: 6px !important; }
  .form-grid > .full { grid-column: 1 / -1 !important; }
  .panel-toggle {
    width: 100% !important; min-height: 60px !important; padding: 12px 0 !important; gap: 16px !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--text) !important; box-shadow: none !important;
  }
  .panel-toggle h3, .panel-toggle strong { color: var(--text) !important; font-size: 16px !important; font-weight: 600 !important; text-align: left !important; }
  .panel-toggle small { color: var(--muted) !important; font-size: 12px !important; font-weight: 400 !important; }
  .panel-toggle .chev, .exercise-head .chev { color: var(--muted) !important; stroke: var(--muted) !important; width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }
  .collapsible-content { padding: 12px 0 0 !important; }
  .collapsible-panel:not(.open) { padding-bottom: 0 !important; }
  .metric-strip { gap: 10px !important; margin: 16px 0 24px !important; }
  .metric { padding: 16px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: none !important; min-width: 0 !important; }
  .metric span { color: var(--muted) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.5 !important; }
  .metric strong { display: block !important; color: var(--text) !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.4 !important; margin-top: 6px !important; font-variant-numeric: tabular-nums !important; overflow-wrap: anywhere !important; }
  .metric-strip > .metric { grid-column: auto !important; }
  .body-metric-strip, .body-progress-strip, .report-lift-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .history-item, .food-card, .medication-manage-item {
    background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: none !important; padding: 16px !important; color: var(--text) !important;
  }
  .history-item strong, .food-card strong, .medication-manage-item strong { color: var(--text) !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.5 !important; }
  .history-item span, .food-nutrition-lines, .food-card small, .medication-manage-item span { color: var(--muted) !important; font-size: 12px !important; line-height: 1.7 !important; }
  .food-nutrition-lines { display: flex !important; flex-wrap: wrap !important; gap: 2px 12px !important; margin-top: 6px !important; }
  .food-nutrition-lines > div:first-child { flex-basis: 100% !important; }
  .food-actions { gap: 6px !important; }
  canvas { width: 100% !important; max-width: 100% !important; border: 0 !important; border-radius: 0 !important; background: var(--surface) !important; }

  /* Bottom navigation keeps the established order without a raised center tab. */
  #bottomNav.bottom-nav {
    position: fixed !important; inset: auto 0 0 !important; transform: none !important; z-index: 40 !important;
    display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important; gap: 4px !important; width: 100% !important; max-width: 600px !important;
    height: var(--ui-nav) !important; min-height: 0 !important; margin: 0 auto !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--surface) !important; border: 1px solid var(--line) !important; border-bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important; box-shadow: 0 -2px 16px #25312C06 !important; overflow: hidden !important;
  }
  #bottomNav.locked, body.login-active #bottomNav, body.booting #bottomNav { display: none !important; }
  #bottomNav .nav-btn {
    order: 0 !important;
    display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important;
    position: relative !important; width: 100% !important; min-width: 0 !important; height: 60px !important; min-height: 0 !important;
    padding: 6px 2px !important; margin: 0 !important; gap: 6px !important; transform: none !important;
    border: 1px solid transparent !important; border-radius: 4px !important; background: transparent !important;
    color: var(--muted) !important; box-shadow: none !important; transition: color .12s !important;
  }
  #bottomNav .nav-btn.active { background: var(--button-green-soft) !important; color: var(--button-green) !important; border-color: var(--button-green-line) !important; }
  #bottomNav .nav-btn::before, #bottomNav .nav-btn::after { content: none !important; }
  #bottomNav .nav-icon { display: block !important; width: 22px !important; height: 22px !important; object-fit: contain !important; margin: 0 !important; opacity: .58 !important; filter: none !important; }
  #bottomNav .active .nav-icon { opacity: .9 !important; filter: none !important; }
  #bottomNav .nav-btn span:not(.nav-icon) { position: static !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 600 !important; color: inherit !important; white-space: nowrap !important; transform: none !important; }
  body.dark-theme #bottomNav .nav-icon { filter: invert(1) !important; }

  /* Workout: intrinsic card height and a flex scroller avoid collapsed open cards. */
  body:has(#workoutScreen.active) { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
  body.login-active:has(#workoutScreen.active) { height: auto !important; min-height: 100svh !important; overflow-y: auto !important; }
  .app:has(#workoutScreen.active) { display: flex !important; flex-direction: column !important; height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
  .app:has(#workoutScreen.active) > header { flex: 0 0 auto !important; }
  #appShell.app.locked, body.booting #appShell.app { display: none !important; }
  .app:has(#workoutScreen.active) > main { display: flex !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; }
  #workoutScreen.active { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; height: auto !important; max-height: none !important; min-height: 0 !important; padding: 20px 0 0 !important; overflow: hidden !important; }
  #workoutScreen::before, #workoutScreen::after { content: none !important; display: none !important; }
  #workoutScreen .hero, #workoutScreen .day-tabs { flex-shrink: 0 !important; }
  #workoutScreen .hero { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  #workoutScreen .day-title { display: block !important; position: static !important; width: 100% !important; height: auto !important; flex: 0 0 auto !important; margin: 0 0 16px !important; padding: 0 !important; background: transparent !important; color: var(--text) !important; border: 0 !important; box-shadow: none !important; }
  #workoutScreen .day-title-main { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 12px !important; }
  #workoutScreen .day-title h2 { display: none !important; }
  #workoutScreen .day-title-date { font-size: 11px !important; color: var(--muted) !important; font-weight: 400 !important; }
  body.sinan-user #workoutScreen.active .training-quote-display.is-empty,
  #workoutScreen.active .training-quote-display:empty { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  #workoutScreen .progress-track {
    display: block !important; position: relative !important; inset: auto !important; transform: none !important; isolation: isolate !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important;
    margin: 0 !important; border: 1px solid var(--accent-line) !important; border-radius: 4px !important;
    background: var(--accent-soft) !important; box-shadow: none !important; overflow: hidden !important;
  }
  #workoutScreen .progress-fill { position: absolute !important; inset: 0 auto 0 0 !important; height: 100% !important; background: #B8D2C1 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; opacity: 1 !important; transition: none !important; }
  #workoutScreen .progress-track::before, #workoutScreen .progress-track::after, #workoutScreen .progress-fill::before, #workoutScreen .progress-fill::after { content: none !important; display: none !important; }
  #progressLabel { position: absolute !important; inset: 0 !important; display: flex !important; padding: 0 12px !important; color: var(--accent) !important; font-size: 12px !important; z-index: 1 !important; text-transform: none !important; }
  .rest-status { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
  .rest-status strong { font-size: 12px !important; font-weight: 600 !important; }
  #progressLabel .rest-status strong { text-transform: none !important; color: var(--accent) !important; }
  #progressLabel .rest-status small { color: var(--accent) !important; }
  #workoutScreen .progress-track.rest-finished { background: var(--ui-red-soft) !important; border-color: #D9AFB1 !important; animation: none !important; }
  #workoutScreen .rest-finished .progress-fill { background: var(--ui-red-soft) !important; opacity: 1 !important; }
  #workoutScreen .rest-finished #progressLabel .rest-status { justify-content: center !important; }
  #workoutScreen .rest-finished #progressLabel .rest-status strong { color: var(--danger) !important; font-weight: 700 !important; text-align: center !important; }
  .rest-status small { font-size: 14px !important; font-weight: 650 !important; font-variant-numeric: tabular-nums !important; }
  #exerciseList {
    display: flex !important; flex-direction: column !important; gap: 10px !important;
    flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    width: 100% !important; max-width: none !important; margin: 0 !important; padding: 2px 2px 28px !important;
    overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior-y: contain !important;
    scroll-padding-block: 12px 24px !important; scrollbar-width: thin !important; scrollbar-color: var(--line) transparent !important;
    mask-image: none !important; -webkit-mask-image: none !important;
  }
  #workoutScreen .exercise {
    flex: 0 0 auto !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 63px !important; max-height: none !important;
    margin: 0 !important; border: 1px solid var(--line) !important; border-radius: 4px !important;
    box-shadow: none !important; background: var(--surface) !important; overflow: hidden !important;
  }
  #workoutScreen .exercise.open { border-color: #A6BFB0 !important; box-shadow: none !important; }
  #workoutScreen .exercise::before, #workoutScreen .exercise::after { content: none !important; }
  #workoutScreen .exercise-head {
    display: grid !important; grid-template-columns: 30px minmax(0, 1fr) auto 16px !important;
    gap: 10px !important; align-items: center !important; width: 100% !important; height: auto !important; min-height: 63px !important;
    padding: 14px 12px !important; border: 0 !important; border-radius: 0 !important;
    background: var(--surface) !important; color: var(--text) !important; box-shadow: none !important; text-align: left !important;
  }
  #workoutScreen .exercise.open .exercise-head { min-height: 70px !important; background: #F5F9F6 !important; border-bottom: 1px solid var(--line) !important; }
  #workoutScreen .exercise-head.done { background: var(--accent-soft) !important; }
  #workoutScreen .exercise-head .chev { stroke: var(--muted) !important; }
  #workoutScreen .exercise.open .chev { stroke: var(--accent) !important; }
  #workoutScreen .exercise-head .check { display: grid !important; place-items: center !important; width: 30px !important; height: 30px !important; min-width: 30px !important; border: 0 !important; border-radius: 4px !important; color: var(--muted) !important; background: #EDF2EE !important; font-size: 12px !important; font-weight: 650 !important; box-shadow: none !important; }
  #workoutScreen .exercise.open .check { color: var(--accent) !important; background: var(--accent-soft) !important; border-color: var(--accent-line) !important; }
  #workoutScreen .exercise-head.done .check { background: var(--button-green) !important; color: #ffffff !important; }
  #workoutScreen .exercise-title-clip { display: block !important; overflow: visible !important; mask-image: none !important; -webkit-mask-image: none !important; }
  #workoutScreen .exercise-name strong { display: block !important; width: auto !important; color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.5 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; animation: none !important; transform: none !important; }
  #workoutScreen .exercise-head-badges { display: flex !important; flex-wrap: wrap !important; align-items: center !important; width: auto !important; max-width: 116px !important; margin: 0 !important; gap: 4px !important; }
  .tag-prescription { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 5px 7px !important; min-height: 25px !important; border-radius: 3px !important; font-size: 11px !important; font-weight: 650 !important; line-height: 1.3 !important; box-shadow: none !important; border: 0 !important; white-space: nowrap !important; }
  .tag-prescription--yellow { background: #F2EBCD !important; color: #75612D !important; }
  .tag-prescription--blue { background: var(--ui-purple-soft) !important; color: var(--ui-purple) !important; }
  .tag-prescription--green { background: #DFECE3 !important; color: #355C48 !important; }
  .tag-prescription--red { background: #F2E1E2 !important; color: #894950 !important; }
  .tag-prescription--orange { background: var(--ui-orange-soft) !important; color: var(--ui-orange) !important; }
  .tag-prescription--black { background: #E7ECF0 !important; color: #465D6C !important; }
  .tag-prescription--purple { background: #E6E7F2 !important; color: #545B7E !important; }
  .tag-prescription--neutral { background: var(--surface-2) !important; color: var(--text) !important; }
  #workoutScreen .exercise-body { padding: 14px 12px !important; background: var(--surface) !important; border: 0 !important; }
  #workoutScreen .exercise:not(.open) .exercise-body { display: none !important; }
  #workoutScreen .exercise.open .exercise-body { display: block !important; }
  #workoutScreen .exercise-shared-weight { display: grid !important; grid-template-columns: minmax(0, 1fr) 108px !important; gap: 10px !important; align-items: center !important; margin: 0 0 16px !important; padding: 10px !important; background: #F3EAED !important; border: 1px solid #E4D6DC !important; border-radius: 4px !important; box-shadow: none !important; }
  .shared-weight-title { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; color: #6A4859 !important; font-size: 14px !important; font-weight: 650 !important; }
  #workoutScreen .set-grid { display: grid !important; gap: 8px !important; }
  #workoutScreen .set-row { display: grid !important; min-height: 44px !important; align-items: center !important; gap: 8px !important; }
  #workoutScreen .set-row > * { grid-column: auto !important; grid-row: auto !important; }
  #workoutScreen .set-row.shared-weight-set-row { grid-template-columns: minmax(0, 1fr) 82px 86px !important; }
  #workoutScreen .set-row.no-effort:not(.shared-weight-set-row):not(.bodyweight-row):not(.timer-row):not(.cardio-row) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 80px !important; }
  #workoutScreen .set-row.has-effort:not(.bodyweight-row):not(.timer-row):not(.cardio-row) { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr) 76px !important; }
  #workoutScreen .set-row.bodyweight-row.no-effort { grid-template-columns: minmax(0, 1fr) 86px !important; }
  #workoutScreen .set-row.bodyweight-row.has-effort { grid-template-columns: 64px minmax(0, 1fr) 86px !important; }
  #workoutScreen .set-row.timer-row.no-effort { grid-template-columns: minmax(0, 1fr) 76px 80px !important; }
  #workoutScreen .set-row.timer-row.has-effort { grid-template-columns: 54px minmax(0, 1fr) 70px 72px !important; }
  #workoutScreen .set-row.cardio-row { grid-template-columns: 42px repeat(3, minmax(0, 1fr)) 44px !important; gap: 6px !important; }
  .set-label, .set-last-label { width: auto !important; min-width: 0 !important; padding: 0 !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.5 !important; }
  .set-last-label { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; }
  .set-last-label strong { font-size: 11px !important; font-weight: 500 !important; color: var(--muted) !important; }
  .set-last-label span { font-size: 12px !important; font-weight: 550 !important; color: var(--text) !important; white-space: normal !important; overflow: visible !important; line-height: 1.4 !important; font-variant-numeric: tabular-nums !important; }
  #workoutScreen .unit-field { width: 100% !important; min-width: 0 !important; margin: 0 !important; height: 44px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; }
  #workoutScreen .unit-input { width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 8px 10px !important; border-radius: 4px !important; text-align: left !important; }
  #workoutScreen .unit-field:not(.no-suffix) .unit-input { padding-right: 28px !important; }
  #workoutScreen .per-side-weight .unit-input { padding-right: 34px !important; }
  #workoutScreen .per-side-weight::after, .unit-suffix { color: var(--muted) !important; font-size: 10px !important; font-weight: 500 !important; }
  #workoutScreen .tiny-check { min-height: 44px !important; height: 44px !important; width: 100% !important; padding: 6px !important; border: 1px solid var(--line) !important; border-radius: 4px !important; color: var(--muted) !important; background: var(--surface-2) !important; font-size: 12px !important; font-weight: 550 !important; box-shadow: none !important; line-height: 1.3 !important; }
  #workoutScreen .tiny-check.active { background: var(--button-green-soft) !important; color: var(--button-green) !important; border-color: var(--button-green-line) !important; font-size: 21px !important; }
  .cardio-plan { border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--surface) !important; overflow: hidden !important; }
  .cardio-plan-row { display: grid !important; grid-template-columns: repeat(var(--cardio-cols, 3), minmax(0, 1fr)) !important; gap: 8px !important; padding: 12px !important; color: var(--text) !important; font-size: 12px !important; font-weight: 450 !important; border-bottom: 1px solid var(--line) !important; }
  .cardio-plan-row:nth-child(odd) { background: var(--surface-2) !important; }
  .cardio-plan-row:last-child { border-bottom: 0 !important; }
  .cardio-complete-btn { min-height: 46px !important; background: var(--button-green-soft) !important; color: var(--button-green) !important; border: 1px solid var(--button-green-line) !important; border-radius: 4px !important; font-size: 13px !important; box-shadow: none !important; }
  .cardio-complete-btn.active { background: var(--button-green) !important; color: #ffffff !important; }
  #exerciseCards { display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; gap: inherit !important; width: 100% !important; min-width: 0 !important; }
  #workoutScreen .finish-row { flex: 0 0 auto !important; width: 100% !important; margin: 0 !important; padding: 12px 0 !important; position: static !important; background: var(--bg) !important; }
  .finish-danger { border-radius: 4px !important; background: var(--button-green) !important; color: white !important; min-height: 46px !important; font-size: 13px !important; box-shadow: none !important; }

  #workoutScreen .exercise-name strong,
  #workoutScreen .tag-prescription,
  #workoutScreen .shared-weight-title,
  #workoutScreen .set-label,
  #workoutScreen .set-last-label strong,
  #workoutScreen .set-last-label span,
  #workoutScreen .unit-input,
  #workoutScreen .unit-input::placeholder,
  #workoutScreen .tiny-check { font-weight: 650 !important; }

  /* Nutrition: neutral macros retain the existing reached / exceeded semantics. */
  #nutritionScreen {
    --nutrition-bg: var(--bg) !important;
    --nutrition-ink: var(--text) !important;
    --nutrition-line: var(--line) !important;
    --nutrition-green-soft: var(--accent-soft) !important;
    --nutrition-text: var(--text) !important;
    --nutrition-muted: var(--muted) !important;
    --nutrition-green: #53826A !important;
    --nutrition-track: #E4EAE6 !important;
    --nutrition-neutral-fill: #7B91A2 !important;
    --nutrition-danger: #AE666B !important;
    --nutrition-card: var(--surface) !important;
  }
  .user-menu-button, .workout-add-exercise {
    border-color: var(--ui-control-line) !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
  }
  #nutritionScreen .nutrition-dashboard {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #nutritionScreen .nutrition-page-head h2 {
    color: var(--text) !important;
  }
  #nutritionScreen .nutrition-page-head .nutrition-eyebrow {
    color: var(--muted) !important;
  }
  #nutritionScreen .nutrition-date-field .date-display {
    border-color: var(--ui-control-line) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
  }
  .nutrition-page-head, .body-section-head, .medication-dashboard-head { gap: 16px !important; margin-bottom: 22px !important; align-items: center !important; }
  .nutrition-date-field { width: 150px !important; flex: 0 0 150px !important; }
  .nutrition-targets { gap: 12px !important; }
  .nutrition-entry-column { display: grid !important; min-width: 0 !important; gap: 12px !important; align-content: start !important; margin-top: 16px !important; }
  .nutrition-entry-column > .collapsible-panel { margin: 0 !important; }
  #nutritionScreen #weeklyNutritionPanel { margin-top: 12px !important; }
  #nutritionScreen .calorie-summary { position: relative !important; min-height: 0 !important; padding: 20px !important; gap: 12px !important; border: 1px solid var(--line) !important; background: var(--nutrition-card) !important; border-radius: 4px !important; color: var(--nutrition-text) !important; box-shadow: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
  .calorie-summary::before, .calorie-summary::after { content: none !important; }
  #nutritionScreen .calorie-status-bar { border-radius: 3px !important; border: 0 !important; padding: 5px 8px !important; background: var(--accent-soft) !important; color: var(--accent) !important; font-size: 11px !important; font-weight: 650 !important; }
  #nutritionScreen .calorie-status-bar.red { background: var(--ui-red-soft) !important; color: var(--danger) !important; }
  #nutritionScreen .calorie-status-bar.purple { background: var(--ui-purple-soft) !important; color: var(--ui-purple) !important; }
  #nutritionScreen .calorie-summary-head > span { padding: 0 !important; background: transparent !important; color: var(--nutrition-muted) !important; font-size: 12px !important; font-weight: 600 !important; opacity: 1 !important; box-shadow: none !important; }
  #nutritionScreen .calorie-summary-head strong, #nutritionScreen .calorie-main-value { color: var(--nutrition-text) !important; font-size: 38px !important; font-weight: 750 !important; line-height: 1.15 !important; font-variant-numeric: tabular-nums !important; animation: none !important; opacity: 1 !important; transform: none !important; }
  .calorie-card-footer, .calorie-card-footer span { color: var(--nutrition-muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.5 !important; }
  .calorie-track { height: 10px !important; border-radius: 5px !important; background: var(--nutrition-track) !important; margin: 16px 0 12px !important; }
  .calorie-track .target-fill { background: var(--nutrition-green) !important; opacity: 1 !important; box-shadow: none !important; }
  .nutrition-macro-grid, .nutrition-secondary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  #nutritionScreen .macro-card { min-width: 0 !important; padding: 14px 12px !important; border-radius: 4px !important; box-shadow: none !important; border: 1px solid var(--line) !important; background: var(--nutrition-card) !important; }
  #nutritionScreen .macro-card strong { display: flex !important; flex-direction: column !important; gap: 5px !important; align-items: flex-start !important; }
  #nutritionScreen .macro-card strong span:first-child { font-size: 12px !important; font-weight: 600 !important; color: var(--muted) !important; }
  #nutritionScreen .macro-card strong span:last-child { font-size: 17px !important; font-weight: 750 !important; color: var(--nutrition-text) !important; line-height: 1.3 !important; white-space: normal !important; font-variant-numeric: tabular-nums !important; }
  #nutritionScreen .macro-card--reached { background: #EAF3ED !important; border-color: #BED4C5 !important; box-shadow: inset 2px 0 0 var(--nutrition-green) !important; }
  #nutritionScreen .macro-card--exceeded { background: #F6EBEB !important; border-color: #DEC2C4 !important; box-shadow: inset 2px 0 0 var(--nutrition-danger) !important; }
  .macro-progress { height: 18px !important; border-radius: 5px !important; margin-top: 11px !important; background: var(--nutrition-track) !important; box-shadow: none !important; }
  .macro-progress--neutral .target-fill, .macro-progress--under .target-fill { background: var(--nutrition-neutral-fill) !important; }
  .macro-progress--reached .target-fill { background: var(--nutrition-green) !important; }
  .macro-progress--exceeded .target-fill { background: var(--nutrition-danger) !important; }
  .macro-progress-percent { min-width: 34px !important; padding: 2px 5px !important; border-radius: 2px !important; background: #ffffff !important; color: var(--text) !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.25 !important; text-shadow: none !important; box-shadow: none !important; }
  #nutritionScreen .calorie-summary--reached { background: #EAF3ED !important; border-color: #BED4C5 !important; box-shadow: inset 2px 0 0 var(--nutrition-green) !important; }
  #nutritionScreen .calorie-summary--exceeded { background: #F6EBEB !important; border-color: #DEC2C4 !important; box-shadow: inset 2px 0 0 var(--nutrition-danger) !important; }
  #nutritionScreen .calorie-summary--neutral .target-fill { background: var(--nutrition-neutral-fill) !important; }
  #nutritionScreen .calorie-summary--exceeded .target-fill { background: var(--nutrition-danger) !important; }
  .macro-data-note { display: block !important; margin-top: 7px !important; color: var(--muted) !important; font-size: 11px !important; line-height: 1.5 !important; }
  .nutrition-review-note { margin: 18px 0 !important; padding-left: 12px !important; border-left: 2px solid #BA9C69 !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.7 !important; }
  .added-sugar-entry-btn { margin-top: 8px !important; }
  .manual-food-form label[hidden] { display: none !important; }
  #bodyScreen .body-calorie-panel label[hidden], #bodyScreen .calorie-calc-grid[hidden] { display: none !important; }
  .nutrition-plan-formulas { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin: 18px 0 !important; padding: 0 !important; }
  .nutrition-plan-formulas > div { min-width: 0 !important; }
  .nutrition-plan-formulas dt { font-size: 12px !important; color: var(--muted) !important; font-weight: 500 !important; }
  .nutrition-plan-formulas dd { margin: 4px 0 0 !important; color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; overflow-wrap: anywhere !important; }
  #calorieCalcOutput[data-plan="sinan"] .target-calorie { padding: 18px !important; border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--surface) !important; box-shadow: none !important; }
  #calorieCalcOutput[data-plan="sinan"] .target-calorie span { color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; }
  #calorieCalcOutput[data-plan="sinan"] .target-calorie strong { color: var(--text) !important; font-size: 34px !important; font-weight: 700 !important; }
  #nutritionScreen .fluid-tracker-card { padding: 18px !important; background: var(--nutrition-card) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: none !important; }
  .fluid-tracker-head span { color: var(--muted) !important; font-size: 11px !important; font-weight: 450 !important; }
  .fluid-tracker-head strong { color: var(--text) !important; font-size: 15px !important; }
  .fluid-bar-row { grid-template-columns: 34px minmax(0, 1fr) 80px !important; gap: 12px !important; font-size: 12px !important; }
  .fluid-bar-row strong { font-size: 12px !important; text-align: right !important; font-weight: 550 !important; color: var(--text) !important; }
  .fluid-track { height: 9px !important; background: var(--nutrition-track) !important; border-radius: 5px !important; }
  .fluid-fill.water { background: #7B9BB6 !important; }
  .fluid-fill.other { background: #C6A16F !important; }
  .fluid-entry-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .fluid-add-row { grid-template-columns: minmax(0, 1fr) 44px !important; gap: 6px !important; }
  .fluid-add-row button { height: 46px !important; min-height: 46px !important; width: 44px !important; padding: 0 !important; font-size: 22px !important; border-radius: 4px !important; border: 1px solid transparent !important; box-shadow: none !important; }
  .fluid-add-row button[data-fluid-type="water"] { background: var(--ui-blue-soft) !important; color: var(--ui-blue) !important; border-color: #cfdfef !important; }
  .fluid-add-row button[data-fluid-type="fluid"] { background: var(--ui-orange-soft) !important; color: var(--ui-orange) !important; border-color: #edd9bc !important; }
  .fluid-total-row { border-color: var(--line) !important; font-size: 12px !important; }
  .fluid-total-row strong { color: var(--text) !important; font-size: 16px !important; }
  .nutrition-quick-add { align-self: start !important; align-content: start !important; background: var(--nutrition-card) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; padding: 20px !important; margin: 0 !important; box-shadow: none !important; }
  .nutrition-section-heading { margin-bottom: 2px !important; }
  #nutritionScreen .nutrition-section-heading h3 { font-size: 18px !important; font-weight: 700 !important; }
  .food-search { grid-template-columns: minmax(0, 1fr) 72px !important; gap: 8px !important; align-items: end !important; }
  .nutrition-entry-grid { grid-template-columns: minmax(0, 1fr) 108px !important; gap: 12px !important; margin-top: 16px !important; }
  .nutrition-entry-grid #foodAmountLabel { grid-column: auto !important; }
  .amount-toggle { display: flex !important; gap: 4px !important; padding: 4px !important; min-height: 52px !important; background: var(--nutrition-track) !important; border: 0 !important; border-radius: 4px !important; }
  .amount-toggle button { flex: 1 !important; min-width: 0 !important; min-height: 44px !important; padding: 7px !important; border: 0 !important; background: transparent !important; border-radius: 4px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important; }
  .amount-toggle button.active, body.sinan-user #nutritionScreen .amount-toggle button.active { background: var(--button-green) !important; color: #fff !important; box-shadow: none !important; }
  #nutritionScreen input, #nutritionScreen select, #nutritionScreen textarea { color: var(--nutrition-text) !important; font-weight: 600 !important; }
  #nutritionScreen input::placeholder, #nutritionScreen textarea::placeholder { color: #8A968E !important; font-weight: 400 !important; opacity: 1 !important; }
  #nutritionScreen .collapsible-panel { padding: 0 16px !important; border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--nutrition-card) !important; box-shadow: none !important; margin-bottom: 0 !important; }
  #nutritionScreen .collapsible-panel.open { padding-bottom: 16px !important; }
  #nutritionScreen .collapsible-panel .panel-toggle { min-height: 58px !important; border: 0 !important; }
  .manual-food-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .manual-nutrition-title, .manual-food-primary { background: transparent !important; border-radius: 0 !important; border: 0 !important; padding: 0 !important; }
  .manual-food-form small, .manual-basis-label { font-size: 11px !important; font-weight: 400 !important; color: var(--muted) !important; }
  .week-day-btn, .week-day-item { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: none !important; color: var(--text) !important; }
  .week-day-btn.active, .week-day-item.active { background: var(--button-green) !important; border-color: var(--button-green) !important; color: #fff !important; }
  #weeklyNutritionDays .week-day-item.active strong,
  #weeklyNutritionDays .week-day-item.active span { color: #fff !important; opacity: 1 !important; }

  /* Reports, measurements and medication share the same controls. */
  .body-hero-panel, .body-chart-panel, .body-calorie-panel, .report-panel, .medication-dashboard { background: transparent !important; box-shadow: none !important; }
  .report-filter-card, .strength-chart-card, .calorie-result-card { background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .report-filter-card { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin: 20px 0 !important; }
  .weekly-summary-grid { gap: 10px !important; }
  .weekly-summary-item { min-width: 0 !important; padding: 16px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: none !important; }
  .weekly-summary-item span { color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; }
  .weekly-summary-item strong { color: var(--text) !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.5 !important; }
  .weekly-volume-chart { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .weekly-volume-empty { min-height: 160px !important; border: 0 !important; border-radius: 4px !important; background: #EAF0EC !important; color: var(--muted) !important; padding: 24px !important; font-size: 13px !important; font-weight: 400 !important; }
  .volume-bar-track { background: #E4EAE6 !important; border: 0 !important; border-radius: 3px !important; box-shadow: none !important; }
  .volume-bar-fill { background: #8CA99B !important; border-radius: 3px !important; box-shadow: none !important; }
  .volume-bar-item.peak .volume-bar-fill { background: #5B7E6F !important; }
  .volume-bar-value, .volume-bar-day { color: var(--muted) !important; font-size: 11px !important; font-weight: 600 !important; }
  .muscle-percent-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 0 !important; }
  .muscle-percent-item span, .muscle-percent-item strong { color: var(--text) !important; font-size: 12px !important; font-weight: 500 !important; }
  .muscle-percent-track { height: 6px !important; background: #DDE6E0 !important; border-radius: 3px !important; }
  .muscle-percent-fill { background: #779D8A !important; }
  .muscle-progress-track { height: 7px !important; border-radius: 3px !important; background: #DDE6E0 !important; }
  .muscle-progress-fill { background: #779D8A !important; }
  .body-chart-panel .chart-note { background: var(--ui-blue-soft) !important; color: var(--ui-blue) !important; padding: 12px !important; border-radius: 4px !important; box-shadow: none !important; }
  .calorie-result-item { padding: 14px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: none !important; }
  .calorie-result-item span { color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; }
  .calorie-result-item strong { color: var(--text) !important; font-size: 20px !important; }
  .body-eyebrow { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
  .weekly-summary-card { background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-radius: 4px !important; box-shadow: none !important; }
  .report-progress, .medication-progress { background: transparent !important; border: 0 !important; padding: 16px 0 0 !important; box-shadow: none !important; }
  .report-progress-label, .medication-progress-label { color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; }
  .report-progress-track, .medication-progress-track { height: 6px !important; background: #DDE6E0 !important; border-radius: 3px !important; }
  .report-progress-track > span, .medication-progress-track > span { background: #779D8A !important; }
  .medication-summary { gap: 12px !important; }
  #medicationScreen .medication-mini-card { border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--surface) !important; box-shadow: none !important; padding: 16px !important; text-align: left !important; }
  #medicationScreen .medication-mini-card span { color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; }
  #medicationScreen .medication-mini-card strong { color: var(--text) !important; font-size: 25px !important; font-weight: 650 !important; }
  .medication-time-group { margin-bottom: 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .medication-time-head { margin-bottom: 10px !important; }
  .medication-time-head h4 { margin: 0 !important; font-size: 14px !important; }
  .medication-count-badge, .medication-manage-meta small { padding: 4px 8px !important; border-radius: 5px !important; background: var(--surface-2) !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 500 !important; box-shadow: none !important; }
  .medication-card { grid-template-columns: 5px minmax(0, 1fr) auto !important; gap: 12px !important; padding: 14px !important; border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--surface) !important; box-shadow: none !important; }
  .medication-card.done { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; opacity: 1 !important; }
  .medication-card strong { font-size: 14px !important; color: var(--text) !important; }
  .medication-card span:not(.medication-dot) { font-size: 12px !important; color: var(--muted) !important; font-weight: 400 !important; }
  .medication-check { min-height: 44px !important; padding: 8px 12px !important; border-radius: 4px !important; background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; box-shadow: none !important; font-size: 12px !important; }
  .medication-check.active { background: var(--button-green) !important; color: white !important; border-color: var(--button-green) !important; }
  .medication-pill-row button { min-height: 44px !important; border-radius: 4px !important; color: var(--muted) !important; background: #E8EDE9 !important; font-size: 12px !important; box-shadow: none !important; }
  .medication-pill-row button.active { background: #4D7C63 !important; border-color: #416A54 !important; color: #ffffff !important; }
  .medication-dot { background: #92A99C !important; box-shadow: none !important; }
  .medication-card.done .medication-dot { background: var(--accent) !important; }
  .medication-done-label { background: var(--accent-soft) !important; color: var(--accent) !important; font-size: 11px !important; font-style: normal !important; }
  .calorie-safety-warning { background: var(--ui-orange-soft) !important; color: var(--ui-orange) !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; }

  /* Dialogs preserve their existing opening and closing behavior. */
  .modal { background: #25312C70 !important; backdrop-filter: blur(2px) !important; padding: 20px !important; z-index: 100 !important; }
  .modal-box { width: min(100%, 520px) !important; max-width: 520px !important; max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; padding: 24px !important; border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--surface) !important; box-shadow: 0 12px 48px #25312C24 !important; overflow-y: auto !important; overscroll-behavior: contain !important; color: var(--text) !important; }
  .modal-box h2 { font-size: 22px !important; }
  .modal-box p, .modal-box li { font-size: 14px !important; line-height: 1.75 !important; color: var(--text) !important; }
  .modal-heading { display: flex !important; align-items: flex-start !important; gap: 16px !important; }
  .modal-heading > h2 { flex: 1 !important; min-width: 0 !important; }

  /* Reading dialogs share one scroll area and keep their controls in view. */
  body:has(#confirmModal.training-guide-modal.show) { overflow: hidden !important; }
  #confirmModal.training-guide-modal { --guide-inset: 20px; padding: var(--guide-inset) !important; align-items: center !important; }
  #confirmModal.training-guide-modal .modal-box {
    display: flex !important; flex-direction: column !important; width: min(100%, 760px) !important; max-width: 760px !important;
    height: min(860px, calc(100dvh - var(--guide-inset) - var(--guide-inset) - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - var(--guide-inset) - var(--guide-inset) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    padding: 0 !important; overflow: hidden !important;
  }
  #confirmModal.training-guide-modal[data-guide="rir"] .modal-box { max-width: 600px !important; height: auto !important; }
  .training-guide-modal .modal-heading { flex: 0 0 auto !important; align-items: center !important; padding: 18px 24px !important; border-bottom: 1px solid var(--line) !important; }
  .training-guide-modal .modal-heading > h2 { margin: 0 !important; font-size: 22px !important; line-height: 1.3 !important; }
  .guide-close {
    display: grid !important; place-items: center !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-height: 44px !important;
    padding: 0 !important; border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--surface-2) !important;
    color: var(--text) !important; font-size: 26px !important; line-height: 1 !important; box-shadow: none !important;
  }
  .guide-close[hidden] { display: none !important; }
  .training-guide-modal #modalText {
    display: block !important; flex: 1 1 auto !important; min-height: 0 !important; min-width: 0 !important; max-height: none !important; margin: 0 !important; padding: 24px !important;
    overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; scrollbar-gutter: stable !important; scrollbar-width: thin !important; scrollbar-color: var(--accent-line) transparent !important;
    color: var(--text) !important; font-size: 15px !important; line-height: 1.75 !important; text-align: left !important;
  }
  .training-guide-modal .info-guide { display: block !important; width: 100% !important; max-width: 64ch !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; }
  .training-guide-modal .info-guide p, .training-guide-modal .info-guide li { color: var(--text) !important; font-size: 15px !important; line-height: 1.75 !important; }
  .training-guide-modal .info-guide p { margin: 0 0 16px !important; }
  .training-guide-modal .info-guide strong { color: var(--text) !important; font-weight: 650 !important; }
  .training-guide-modal .info-guide ul, .training-guide-modal .info-guide ol { margin: 0 0 18px !important; padding-left: 22px !important; }
  .training-guide-modal .info-guide li + li { margin-top: 8px !important; }
  .training-guide-modal .info-guide li::marker { color: var(--accent) !important; }
  .training-guide-modal .modal-box > .action-row { display: flex !important; flex: 0 0 auto !important; justify-content: flex-end !important; margin: 0 !important; padding: 14px 24px !important; border-top: 1px solid var(--line) !important; background: var(--surface-2) !important; }
  .training-guide-modal #modalOk { min-width: 132px !important; }
  .guide-section { margin: 0 0 36px !important; }
  .guide-section:last-child { margin-bottom: 0 !important; }
  .guide-section h3 { margin: 0 0 18px !important; color: var(--accent) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.5 !important; }
  .guide-section h4 { margin: 26px 0 14px !important; padding: 10px 12px !important; border-left: 3px solid var(--accent-line) !important; background: var(--surface-2) !important; color: var(--text) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.5 !important; }
  .training-notes > .guide-section:nth-child(3) h4 { border-left-color: #B8CADA !important; background: #F2F6F9 !important; }
  .guide-overview { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 24px !important; margin: 0 !important; padding: 0 !important; }
  .guide-overview > div { min-width: 0 !important; }
  .guide-overview dt, .guide-overview dt strong { color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.5 !important; }
  .guide-overview dd { margin: 5px 0 0 !important; color: var(--text) !important; font-size: 15px !important; font-weight: 550 !important; line-height: 1.6 !important; overflow-wrap: anywhere !important; }
  .training-notes table { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; margin: 0 0 20px !important; font-size: 14px !important; line-height: 1.65 !important; }
  .training-notes th, .training-notes td { padding: 12px !important; border-bottom: 1px solid var(--line) !important; text-align: left !important; vertical-align: top !important; overflow-wrap: anywhere !important; }
  .training-notes th { background: var(--surface-2) !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 600 !important; }
  .training-notes th:first-child { width: 64% !important; }
  .training-notes td:last-child { color: var(--accent) !important; font-weight: 650 !important; font-variant-numeric: tabular-nums !important; }
  .training-guide-modal .rir-guide { display: grid !important; gap: 20px !important; }
  .rir-intro h3 { margin: 0 0 12px !important; font-size: 18px !important; line-height: 1.5 !important; }
  .training-guide-modal .rir-intro p { margin: 0 !important; padding: 12px 14px !important; border-left: 3px solid var(--accent-line) !important; background: #F0F6F2 !important; font-size: 14px !important; }
  .rir-example { min-width: 0 !important; padding: 16px !important; border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--surface) !important; }
  .training-guide-modal .rir-example > p { font-size: 14px !important; }
  .training-guide-modal .rir-example ul { list-style: none !important; margin: 0 0 12px !important; padding: 0 !important; }
  .training-guide-modal .rir-example li { display: grid !important; grid-template-columns: minmax(0, 1fr) 16px 88px !important; align-items: center !important; gap: 8px !important; min-height: 46px !important; margin: 0 !important; padding: 8px 0 !important; border-bottom: 1px solid #EAF0EC !important; }
  .training-guide-modal .rir-example li:last-child { border-bottom: 0 !important; }
  .rir-example-reps { font-size: 18px !important; font-weight: 650 !important; font-variant-numeric: tabular-nums !important; }
  .rir-example-at { color: var(--muted) !important; font-size: 12px !important; text-align: center !important; }
  .rir-example-effort { padding: 4px 8px !important; background: var(--accent-soft) !important; border-radius: 3px !important; color: var(--accent) !important; font-size: 12px !important; font-weight: 650 !important; text-align: center !important; white-space: nowrap !important; }
  .rir-example + .rir-example .rir-example-effort { background: var(--ui-blue-soft) !important; color: var(--ui-blue) !important; }
  .training-guide-modal .rir-example .rir-example-verdict { margin: 0 !important; color: var(--accent) !important; font-size: 13px !important; font-weight: 600 !important; }
  .double-progression-guide { min-width: 0 !important; padding-top: 24px !important; border-top: 1px solid var(--line) !important; }
  .progression-table { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; margin: 0 0 20px !important; font-size: 13px !important; line-height: 1.6 !important; }
  .progression-table th, .progression-table td { padding: 10px 8px !important; border-bottom: 1px solid var(--line) !important; text-align: left !important; vertical-align: top !important; overflow-wrap: anywhere !important; }
  .progression-table th { background: var(--surface-2) !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 600 !important; }
  .progression-table:first-of-type th:first-child { width: 12% !important; }
  .progression-table:last-of-type th:first-child { width: 40% !important; }
  .progression-table td:last-child { color: var(--accent) !important; font-weight: 600 !important; }
  .gym-picker-head { align-items: center !important; gap: 12px !important; margin-bottom: 20px !important; }
  .gym-picker-head > div > span { color: var(--muted) !important; font-size: 11px !important; font-weight: 500 !important; }
  .gym-picker-head h2 { margin: 3px 0 0 !important; }
  .gym-picker-actions { gap: 6px !important; }
  .gym-picker-close, .gym-picker-info, .gym-picker-important { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 4px !important; box-shadow: none !important; border: 1px solid var(--line) !important; background: var(--surface-2) !important; color: var(--muted) !important; font-size: 20px !important; }
  .gym-picker-info { background: var(--button-green-soft) !important; border-color: var(--button-green-line) !important; color: var(--button-green) !important; }
  .gym-picker-important { background: var(--ui-red-soft) !important; border-color: #ecc9ca !important; color: var(--danger) !important; }
  .gym-picker-list { gap: 8px !important; }
  .gym-picker-option, .day-picker-option { min-height: 64px !important; padding: 12px !important; border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: none !important; }
  .gym-picker-option.selected, .gym-picker-option.active, .day-picker-option.selected, .day-picker-option.active { border-color: var(--button-green) !important; background: var(--button-green-soft) !important; }
  .gym-picker-option.selected .day-picker-copy strong,
  .day-picker-option.selected .day-picker-copy strong { color: #16332B !important; }
  .gym-picker-option strong, .gym-picker-option .day-picker-copy strong { color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; }
  .gym-picker-option small, .gym-picker-option .day-picker-copy small { color: var(--muted) !important; font-size: 11px !important; font-weight: 450 !important; }
  .gym-picker-option.selected .day-picker-index { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; color: var(--accent) !important; }
  #dayPickerList .gym-picker-option .day-picker-index--1 { background: #E3EEDF !important; border-color: #C6D8BE !important; color: #496240 !important; }
  #dayPickerList .gym-picker-option .day-picker-index--2 { background: #E4ECF4 !important; border-color: #C7D6E5 !important; color: #48637C !important; }
  #dayPickerList .gym-picker-option .day-picker-index--3 { background: #EEE4ED !important; border-color: #DBC7D8 !important; color: #75506E !important; }
  #dayPickerList .gym-picker-option .day-picker-index--4 { background: #F2E2E2 !important; border-color: #E0C7C7 !important; color: #894E52 !important; }
  #dayPickerList [data-day-picker="sinan_legs_b"] .day-picker-index { background: #F4E6D8 !important; border-color: #E6D0B9 !important; color: #865E36 !important; }
  #dayPickerList .gym-picker-option.weekday-day-option { grid-template-columns: 94px minmax(0, 1fr) 20px !important; }
  #dayPickerList .day-picker-index { border-radius: 4px !important; font-weight: 650 !important; }
  #dayPickerList .day-picker-index--weekday { display: flex !important; align-items: center !important; justify-content: center !important; width: 88px !important; padding: 0 4px !important; font-size: 11px !important; line-height: 1.2 !important; text-align: center !important; }
  .gym-picker-option.selected .gym-picker-option-check { background: transparent !important; color: var(--button-green) !important; }
  #dayPickerList .gym-picker-option.completed,
  #workoutScreen .day-tab.completed {
    background: var(--button-green-soft) !important;
    border-color: var(--button-green-line) !important;
    color: var(--button-green) !important;
    box-shadow: none !important;
  }
  #dayPickerList .gym-picker-option.completed.selected,
  #workoutScreen .day-tab.completed.active { border-color: var(--button-green) !important; }
  #dayPickerList .gym-picker-option.completed .day-picker-copy strong,
  #dayPickerList .gym-picker-option.completed .day-picker-copy small,
  #dayPickerList .gym-picker-option.completed .gym-picker-option-check,
  #workoutScreen .day-tab.completed strong,
  #workoutScreen .day-tab.completed span { color: var(--button-green) !important; }
  .gym-picker-confirm, .gym-picker-cancel { margin-top: 12px !important; }
  .toast { border-radius: 4px !important; background: var(--accent) !important; color: white !important; box-shadow: 0 4px 16px #25312C12 !important; font-size: 13px !important; font-weight: 500 !important; max-width: calc(100% - 32px) !important; bottom: calc(var(--ui-nav) + 12px) !important; }
  .login-screen { max-width: 440px !important; min-height: 100svh !important; background: var(--bg) !important; padding: 28px !important; }
  .login-card { padding: 28px !important; border: 1px solid var(--line) !important; border-radius: 4px !important; background: var(--surface) !important; box-shadow: none !important; }
  .login-brand { display: block !important; width: 64px !important; height: 64px !important; border-radius: 4px !important; margin-bottom: 24px !important; }
  .login-card h1 { font-size: 28px !important; margin-bottom: 12px !important; }
  .login-card p { font-size: 14px !important; font-weight: 400 !important; color: var(--muted) !important; }
  .login-form { gap: 16px !important; }
  .login-form label { font-size: 13px !important; }
  .login-form .field { margin-top: 6px !important; }
  .login-error:empty { display: none !important; }

  @media (min-width: 900px) {
    :root, body, body.sinan-user { --ui-nav: 90px !important; }
    #bottomNav.bottom-nav { bottom: 12px !important; height: 76px !important; border-bottom: 1px solid var(--line) !important; border-radius: 4px !important; }
    .app:has(#workoutScreen.active) > main { max-width: 960px !important; margin-inline: auto !important; }
    #workoutScreen.active { display: flex !important; flex-direction: column !important; padding-top: 24px !important; }
    #workoutScreen .day-title { padding-top: 0 !important; }
    #workoutScreen .day-title-main { gap: 0 !important; }
    #exerciseList { gap: 10px !important; padding-right: 4px !important; }
    #workoutScreen .exercise-head { min-height: 72px !important; padding: 16px 20px !important; gap: 14px !important; }
    #workoutScreen .exercise.open .exercise-head { min-height: 72px !important; }
    #workoutScreen .exercise-name strong { font-size: 15px !important; }
    #workoutScreen .exercise-body { padding: 20px !important; }
    #workoutScreen .exercise-shared-weight { grid-template-columns: minmax(0, 1fr) 150px !important; }
    #workoutScreen .set-row.shared-weight-set-row { grid-template-columns: minmax(0, 1fr) 128px 128px !important; }
    .set-last-label span { font-size: 14px !important; }
    .screen:not(#workoutScreen).active { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 40px !important; align-items: start !important; padding-top: 32px !important; }
    .screen > .panel { margin-bottom: 0 !important; }
    #nutritionScreen .nutrition-dashboard { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 36px !important; align-items: start !important; }
    #nutritionScreen .nutrition-page-head { grid-column: 1 / -1 !important; margin-bottom: 0 !important; }
    #nutritionScreen .nutrition-targets { grid-column: 1 !important; align-self: start !important; }
    #nutritionScreen .nutrition-entry-column { grid-column: 2 !important; margin: 0 !important; gap: 16px !important; }
    #nutritionScreen #weeklyNutritionPanel { grid-column: 1 / -1 !important; margin: 0 !important; }
    #bodyScreen .body-entry-column { grid-column: 1 !important; grid-row: 1 !important; margin-bottom: 0 !important; }
    #bodyScreen .body-chart-panel { grid-column: 2 !important; grid-row: 1 !important; }
    #bodyScreen .body-calorie-panel { grid-column: 1 / -1 !important; }
    #bodyScreen .calorie-profile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    #medicationScreen .medication-dashboard { grid-column: 1 !important; grid-row: 1 !important; }
    #medicationScreen .medication-form-panel { grid-column: 1 !important; grid-row: 2 !important; }
    #medicationScreen .medication-daily-panel { grid-column: 2 !important; grid-row: 1 / 3 !important; }
    #medicationScreen .medication-manage-panel { grid-column: 1 / -1 !important; }
    #reportScreen .report-strength-panel { grid-column: 2 !important; grid-row: 2 / 4 !important; }
    #reportScreen .report-muscle-panel { grid-column: 1 !important; }
    #reportScreen .report-filter-card { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }

  @media (max-width: 767px) {
    .app:has(#workoutScreen.active) .topbar { flex-wrap: wrap !important; }
    .app:has(#workoutScreen.active) .top-actions { display: contents !important; }
    .app:has(#workoutScreen.active) .user-menu { order: 1 !important; margin-left: auto !important; }
    .workout-header-actions { order: 2 !important; flex: 0 0 100% !important; width: 100% !important; gap: 6px !important; }
    .workout-guide-actions { gap: 6px !important; }
    .workout-header-actions .top-day-field { flex: 1 1 auto !important; width: auto !important; }
    .workout-guide-actions .gym-picker-important, .workout-guide-actions .gym-picker-info { width: 44px !important; min-width: 44px !important; }
  }

  @media (max-width: 599px) {
    .app > header { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px !important; min-height: 74px !important; }
    .topbar { gap: 10px !important; }
    .app-brand { display: none !important; }
    .topbar h1 { font-size: 19px !important; }
    .top-actions { gap: 6px !important; }
    .top-day-field { width: 118px !important; }
    .top-day-button, .user-menu-button { padding-inline: 6px !important; }
    .user-menu-button { min-width: 46px !important; max-width: 62px !important; }
    .top-day-label, #currentUserLabel { font-size: 11px !important; }
    main { padding-inline: 16px !important; }
    .screen { padding-top: 22px !important; }
    #workoutScreen.active { padding-top: 16px !important; }
    #workoutScreen .exercise-head { grid-template-columns: 26px minmax(0, 1fr) auto 14px !important; gap: 8px !important; padding: 12px 10px !important; }
    #workoutScreen .exercise-head .check { width: 26px !important; height: 28px !important; min-width: 26px !important; }
    #workoutScreen .exercise-head-badges { max-width: 108px !important; }
    .tag-prescription { font-size: 11px !important; padding-inline: 6px !important; white-space: normal !important; text-align: center !important; }
    #workoutScreen .exercise-name strong { font-size: 14px !important; }
    #workoutScreen .exercise-body { padding: 12px 10px !important; }
    #workoutScreen .exercise-shared-weight { grid-template-columns: minmax(0, 1fr) 100px !important; padding: 8px !important; }
    .shared-weight-title { gap: 5px !important; }
    #bottomNav.bottom-nav { border-inline: 0 !important; border-radius: 0 !important; padding-inline: 8px !important; }
    .nutrition-page-head { gap: 10px !important; }
    .nutrition-page-head h2 { font-size: 20px !important; }
    .nutrition-date-field { width: 134px !important; flex-basis: 134px !important; }
    .date-display { font-size: 12px !important; padding-inline: 9px 28px !important; }
    #nutritionScreen .macro-card { padding: 11px 9px !important; }
    #nutritionScreen .macro-card strong span:first-child { font-size: 11px !important; }
    #nutritionScreen .macro-card strong span:last-child { font-size: 15px !important; }
    .metric { padding: 12px 10px !important; }
    .metric strong { font-size: 20px !important; }
    .modal { padding: 12px !important; }
    .modal-box { padding: 20px !important; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
    #confirmModal.training-guide-modal { --guide-inset: 12px; }
    .training-guide-modal .modal-heading { padding: 14px 16px !important; }
    .training-guide-modal .modal-heading > h2 { font-size: 20px !important; }
    .training-guide-modal #modalText { padding: 20px 16px !important; }
    .training-guide-modal .modal-box > .action-row { padding: 12px 16px !important; }
    .training-guide-modal #modalOk { width: 100% !important; }
    .guide-overview { gap: 16px !important; }
    .guide-overview > div:nth-child(3), .guide-overview > div:last-child { grid-column: 1 / -1 !important; }
    .guide-section h3 { font-size: 17px !important; }
    .rir-example { padding: 14px !important; }
    .progression-table thead { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
    .progression-table tbody { display: grid !important; gap: 12px !important; }
    .progression-table tr { display: block !important; border: 1px solid var(--line) !important; border-radius: 4px !important; overflow: hidden !important; }
    .progression-table td { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; padding: 10px 12px !important; }
    .progression-table td::before { content: attr(data-label); color: var(--muted) !important; font-weight: 500 !important; }
    .progression-table td:first-child { background: var(--surface-2) !important; font-weight: 650 !important; }
    .progression-table td:last-child { border-bottom: 0 !important; }
    .gym-picker-actions { gap: 5px !important; }
    .gym-picker-close, .gym-picker-info, .gym-picker-important { min-width: 40px !important; width: 40px !important; height: 44px !important; }
  }

  @media (max-width: 359px) {
    .app > header { padding-inline: 12px !important; }
    main { padding-inline: 12px !important; }
    #bottomNav.bottom-nav { padding-inline: 6px !important; gap: 2px !important; }
    #bottomNav .nav-btn { padding-inline: 0 !important; }
    .topbar { gap: 6px !important; }
    .topbar h1 { font-size: 17px !important; }
    .top-day-field { width: 54px !important; }
    .user-menu-button { min-width: 44px !important; max-width: 44px !important; }
    #workoutScreen .set-row.shared-weight-set-row { grid-template-columns: minmax(0, 1fr) 72px 72px !important; gap: 6px !important; }
    #workoutScreen .set-row.has-effort:not(.bodyweight-row):not(.timer-row):not(.cardio-row) { grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr) 64px !important; gap: 5px !important; }
    #workoutScreen .set-row.timer-row.has-effort { grid-template-columns: 40px minmax(0, 1fr) 62px 62px !important; gap: 4px !important; }
    .nutrition-date-field { width: 126px !important; flex-basis: 126px !important; }
    .nutrition-page-head h2 { font-size: 18px !important; }
  }

  @media (max-height: 480px) {
    #confirmModal.training-guide-modal { --guide-inset: 10px; }
    .training-guide-modal .modal-heading { padding: 8px 16px !important; }
    .training-guide-modal .modal-heading > h2 { font-size: 18px !important; }
    .training-guide-modal #modalText { padding: 16px !important; }
    .training-guide-modal .modal-box > .action-row { padding: 8px 16px !important; }
  }

  @media (hover: hover) {
    .primary:hover, .gym-picker-confirm:hover { background: var(--button-green-hover) !important; }
    .secondary:hover, .menu-action:hover { background: var(--surface-2) !important; }
    #workoutScreen .exercise:not(.open) .exercise-head:not(.done):hover { background: var(--surface-2) !important; }
    #bottomNav .nav-btn:not(.active):hover { background: transparent !important; color: var(--accent) !important; border-color: transparent !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }

  @media (max-width: 360px) {
    .app:has(#workoutScreen.active) .app-heading-copy { display: none !important; }
    .app:has(#workoutScreen.active) .app-heading { flex: 1 1 0 !important; }
    body.sinan-user .top-day-field { width: 118px !important; }
  }
}