@layer reset, tokens, base, layout, sidebar, workspace, exercises, workouts, progress, components, users, states, responsive, feedback;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; min-width: 100%; min-height: 100%; }
  body, button, input, select, textarea { font: inherit; }
  button, input, select, textarea { color: inherit; }
  button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button { border: 0; background: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  h1, h2, h3, p { margin: 0; }
  svg { display: block; }
}

@layer tokens {
  :root {
    color-scheme: light;

    --viewport-height: 100dvh;
    --shell-header-height: 70px;
    --sidebar-wide: 320px;
    --sidebar-narrow: 78px;
    --sidebar-size: var(--sidebar-wide);

    --app-bg: #f9fafb;
    --sidebar-bg: #ffffff;
    --safe-area-bg: #f4f6fa;
    --content-header-bg: var(--safe-area-bg);
    --selected-bg: #f4f6fa;
    --hover-bg: #f4f6fa;
    --exercise-surface-bg: var(--safe-area-bg);

    --text: #1f2937;
    --text-soft: #667085;
    --icon: #98a2b3;
    --accent: #4f46e5;
    --accent-strong: #4338ca;
    --on-accent: #ffffff;

    --separator-color: #e1e5ee;
    --separator-width: 1px;
    --focus: rgba(79, 70, 229, .24);
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;

    --radius-selected: 15px;
    --radius-circle: 999px;

    /* Shared workspace-header action tokens. */
    --header-action-size: 44px;
    --header-action-track: 44px;
    --header-action-gap: 6px;
    --header-action-radius: 12px;
    --header-action-icon-size: 22px;
    --header-action-bg: var(--sidebar-bg);
    --header-action-border: var(--separator-color);

    /* Shared horizontal padding and maximum width for primary page content. */
    --workspace-column-padding: 28px;
    --primary-page-max-width: 1120px;
    --primary-surface-radius: 20px;
    --system-icon-tile-bg: var(--app-bg);
    --system-icon-tile-border: var(--separator-color);
    --primary-note-min-height: 58px;
    --primary-note-font-size: 11.5px;

    /* Shared icon-only actions used by every Bottom Sheet footer/confirmation. */
    --bottom-sheet-action-size: 46px;
    --bottom-sheet-action-radius: 13px;
    --bottom-sheet-action-icon-size: 21px;

    /* Shared secondary-column list rhythm. */
    --secondary-list-gap: 8px;
    --secondary-list-item-padding: 7px 10px;
    --secondary-list-item-radius: 12px;
    --secondary-list-item-min-height: 58px;
    --secondary-list-item-gap: 12px;
    --secondary-list-media-size: 44px;
    --secondary-list-media-radius: 13px;

    /* Shared controls for every element inside a workout-set row. */
    --workout-set-control-size: 44px;
    --workout-set-control-radius: 11px;
    --workout-set-control-bg: var(--sidebar-bg);
    --workout-set-control-border: var(--separator-color);
    --workout-set-row-padding: 12px;
    --workout-session-field-bg: color-mix(in srgb, var(--sidebar-bg) 86%, var(--app-bg));
    --workout-session-success-bg: color-mix(in srgb, var(--success) 9%, var(--sidebar-bg));

    --duration-fast: 140ms;
    --duration: 220ms;
    --duration-slow: 340ms;
    --ease: cubic-bezier(.22, .8, .22, 1);
    --font: "Google Sans", Arial, sans-serif;
  }

  html[data-theme="dark"] {
    color-scheme: dark;

    --app-bg: #162030;
    --sidebar-bg: #1b2536;
    --safe-area-bg: #111827;
    --content-header-bg: var(--safe-area-bg);
    --selected-bg: #252b55;
    --hover-bg: #202b3d;

    --text: #f4f6fa;
    --text-soft: #aab4c4;
    --icon: #8491a5;
    --accent: #4f46e5;
    --accent-strong: #6366f1;
    --on-accent: #ffffff;

    --separator-color: #2b3850;
    --focus: rgba(79, 70, 229, .34);

  }
}

@layer base {
  html { background: var(--app-bg); }
  body {
    min-height: var(--viewport-height);
    overflow: hidden;
    background: var(--app-bg);
    color: var(--text);
    font-family: var(--font);
    font-optical-sizing: auto;
    font-size: 14.5px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--duration) ease, color var(--duration) ease;
  }

  :focus-visible {
    outline: 1px solid color-mix(in srgb, var(--text-soft) 58%, transparent);
    outline-offset: 1px;
  }

  .brand:focus-visible {
    outline: 0;
    border-radius: 12px;
    background: var(--hover-bg);
  }

  .bottom-sheet:focus-visible,
  [role="dialog"][tabindex="-1"]:focus-visible {
    outline: 0;
  }

  ::selection {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
  }

  .icon {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    font-size: 24px;
    line-height: 1;
  }
}

@layer layout {
  .app-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-size);
    grid-template-areas: "workspace sidebar";
    width: 100%;
    height: var(--viewport-height);
    overflow: hidden;
    direction: ltr;
    background: var(--app-bg);
    transition:
      grid-template-columns var(--duration-slow) var(--ease),
      background-color var(--duration) ease;
  }

  .sidebar {
    grid-area: sidebar;
    position: relative;
    z-index: 20;
    display: flex;
    min-width: 0;
    height: var(--viewport-height);
    margin: 0;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-left: var(--separator-width) solid var(--separator-color);
    border-radius: 0;
    background: var(--sidebar-bg);
    box-shadow: none;
    direction: rtl;
    transition:
      background-color var(--duration) ease,
      border-color var(--duration) ease,
      transform var(--duration-slow) var(--ease);
  }

  .workspace {
    --secondary-column-width: clamp(320px, 30vw, 380px);

    grid-area: workspace;
    position: relative;
    display: grid;
    grid-template-rows: var(--shell-header-height) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    direction: rtl;
  }
}

@layer sidebar {
  .sidebar__header {
    display: flex;
    min-height: var(--shell-header-height);
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 28px;
  }

  .brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    color: var(--accent-strong);
    text-align: right;
  }

  .brand__icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    font-size: 32px;
    line-height: 1;
  }

  .brand__name {
    overflow: hidden;
    font-size: 22px;
    font-weight: 720;
    letter-spacing: -.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-icon-button {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 10px;
    color: var(--icon);
    transition:
      color var(--duration-fast) ease,
      background-color var(--duration-fast) ease,
      transform var(--duration-fast) ease;
  }

  .header-icon-button:hover {
    color: var(--text);
    background: var(--hover-bg);
  }

  .header-icon-button:active {
    transform: scale(.94);
  }

  .header-icon-button .icon {
    width: 27px;
    height: 27px;
    font-size: 27px;
  }

  .mobile-close-button {
    display: none;
  }

  .expand-icon {
    display: none;
  }

  .sidebar__top {
    padding: 0 18px 18px;
  }

  .primary-links {
    display: grid;
    gap: 2px;
    padding-top: 16px;
  }

  .menu-link {
    display: flex;
    width: 100%;
    min-height: 52px;
    font-size: 14.5px;
    align-items: center;
    gap: 15px;
    padding: 8px 16px;
    border-radius: 11px;
    color: var(--text);
    text-align: right;
    transition:
      background-color var(--duration-fast) ease,
      color var(--duration-fast) ease,
      transform var(--duration-fast) ease;
  }

  .menu-link:hover {
    background: var(--hover-bg);
  }

  .menu-link.is-active {
    background: var(--selected-bg);
  }

  .menu-link:active {
    transform: scale(.992);
  }

  .menu-link--accent {
    color: var(--accent-strong);
    font-weight: 650;
  }

  .accent-circle {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border-radius: var(--radius-circle);
    color: var(--on-accent);
    background: linear-gradient(145deg, var(--accent), var(--accent-strong));
  }

  .accent-circle .icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  .menu-link__icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    color: var(--icon);
    font-size: 25px;
  }

  .menu-link__arrow {
    width: 18px;
    height: 18px;
    margin-inline-start: auto;
    color: var(--icon);
    font-size: 18px;
  }

  .sidebar__scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .sidebar__scroll::-webkit-scrollbar {
    display: none;
  }

  .sidebar__utilities {
    display: grid;
    gap: 10px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--separator-color);
    background: var(--sidebar-bg);
    background-clip: padding-box;
    transition:
      background-color var(--duration) ease,
      border-color var(--duration) ease;
  }

  .theme-toggle {
    --theme-toggle-offset: 0px;

    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 18px;
    background: var(--safe-area-bg);
    transition:
      background-color var(--duration) ease,
      border-color var(--duration) ease;
  }

  html[data-theme="dark"] .theme-toggle { --theme-toggle-offset: calc(-100% - 5px); }

  .theme-toggle::before {
    position: absolute;
    z-index: 0;
    inset-block: 5px;
    inset-inline-start: 5px;
    width: calc((100% - 15px) / 2);
    border-radius: 14px;
    background: var(--sidebar-bg);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 10%, transparent);
    content: "";
    transform: translateX(var(--theme-toggle-offset));
    transition: transform var(--duration-slow) var(--ease), background-color var(--duration) ease, box-shadow var(--duration) ease;
  }

  html[data-theme="dark"] .theme-toggle::before { box-shadow: none; }

  .theme-toggle__option {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    color: var(--text-soft);
    font-size: 13.5px;
    font-weight: 650;
    transition:
      color var(--duration-fast) ease,
      background-color var(--duration-fast) ease,
      box-shadow var(--duration-fast) ease,
      transform var(--duration-fast) ease;
  }

  .theme-toggle__option .icon {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }

  .theme-toggle__option:hover {
    color: var(--text);
  }

  .theme-toggle__option.is-active {
    color: var(--accent-strong);
    background: transparent;
    box-shadow: none;
  }

  .theme-toggle__option:active {
    transform: scale(.97);
  }

  .sidebar-account-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
    gap: 8px;
  }

  .sidebar-account {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    width: 100%;
    min-height: 58px;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 15px;
    background: var(--sidebar-bg);
    color: var(--text);
    text-align: right;
    transition:
      color var(--duration-fast) ease,
      background-color var(--duration-fast) ease,
      border-color var(--duration) ease,
      transform var(--duration-fast) ease;
  }

  .sidebar-account:hover,
  .sidebar-account.is-active {
    background: var(--hover-bg);
  }

  .sidebar-account:active {
    transform: scale(.985);
  }

  .sidebar-account__icon {
    width: 28px;
    height: 28px;
    color: var(--accent-strong);
    font-size: 28px;
  }

  .sidebar-account__copy {
    display: grid;
    min-width: 0;
  }

  .sidebar-account__copy strong {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-account__copy small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-account__arrow {
    width: 18px;
    height: 18px;
    color: var(--icon);
    font-size: 18px;
  }

  .sidebar-logout {
    display: grid;
    width: 44px;
    min-width: 44px;
    min-height: 58px;
    place-items: center;
    padding: 0;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 15px;
    background: var(--sidebar-bg);
    color: var(--text-soft);
    transition:
      color var(--duration-fast) ease,
      background-color var(--duration-fast) ease,
      border-color var(--duration-fast) ease,
      transform var(--duration-fast) ease;
  }

  .sidebar-logout:hover {
    border-color: color-mix(in srgb, var(--danger) 24%, var(--separator-color));
    background: var(--hover-bg);
    color: var(--danger);
  }

  .sidebar-logout:active { transform: scale(.96); }
  .sidebar-logout .icon { width: 20px; height: 20px; font-size: 20px; }

  .sidebar-section {
    padding: 22px 18px;
    border-top: var(--separator-width) solid var(--separator-color);
  }

  .section-title {
    padding: 0 16px 12px;
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 540;
  }

  .section-title--secondary {
    padding-top: 26px;
  }

  .sidebar-section .menu-link + .menu-link {
    margin-top: 2px;
  }

  .recent-link {
    display: flex;
    width: 100%;
    min-height: 49px;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--radius-selected);
    color: var(--text);
    text-align: right;
    font-size: 14.5px;
    transition:
      background-color var(--duration-fast) ease,
      transform var(--duration-fast) ease;
  }

  .recent-link:hover,
  .recent-link.is-active {
    background: var(--selected-bg);
  }

  .recent-link:active {
    transform: scale(.992);
  }
}

@layer workspace {
  .workspace__header {
    position: relative;
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr);
    min-width: 0;
    color: var(--text-soft);
    transition: grid-template-columns var(--duration-slow) var(--ease);
  }

  .workspace__header-cell {
    min-width: 0;
    min-height: 0;
    border-bottom: var(--separator-width) solid var(--separator-color);
    transition: border-color var(--duration) ease;
  }

  .workspace__header-cell--secondary {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-left: 0 solid var(--separator-color);
    background: var(--content-header-bg);
  }

  .workspace__header-cell--content {
    display: none;
    grid-column: 2;
    align-items: center;
    justify-content: space-between;
    gap: var(--header-action-gap);
    padding: 12px 24px;
    background: var(--content-header-bg);
    transition: background-color var(--duration) ease;
  }

  .workspace.has-secondary .workspace__header {
    grid-template-columns: var(--secondary-column-width) minmax(0, 1fr);
  }

  .workspace.has-secondary .workspace__header-cell--secondary {
    grid-column: 1;
    border-left-width: var(--separator-width);
    background: var(--sidebar-bg);
  }

  .workspace.has-secondary .workspace__header-cell--content {
    display: flex;
  }

  .workspace__heading {
    display: grid;
    min-width: 0;
    justify-self: stretch;
    text-align: right;
  }

  .workspace__heading strong {
    overflow: hidden;
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace__heading small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace__heading--mobile-content {
    display: none;
  }

  .workspace__heading--content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .workspace__heading[hidden] {
    display: none !important;
  }

  .content-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--header-action-gap);
  }

  .icon-action-button {
    display: grid;
    width: var(--header-action-size);
    min-width: var(--header-action-size);
    height: var(--header-action-size);
    min-height: var(--header-action-size);
    align-self: center;
    place-items: center;
    padding: 0;
    border-radius: var(--header-action-radius);
    line-height: 1;
    color: var(--text-soft);
    transition:
      color var(--duration-fast) ease,
      background-color var(--duration-fast) ease,
      transform var(--duration-fast) ease;
  }

  .workspace__header .icon-action-button {
    flex: 0 0 var(--header-action-size);
    border: var(--separator-width) solid var(--header-action-border);
    background: var(--header-action-bg);
  }

  .workspace__header .icon-action-button:hover {
    background: var(--header-action-bg);
  }

  .workspace__header .icon-action-button .icon {
    display: block;
    width: var(--header-action-icon-size);
    height: var(--header-action-icon-size);
    font-size: var(--header-action-icon-size);
    line-height: 1;
  }

  .workspace__header .icon-action-button[aria-hidden="true"] {
    display: none !important;
  }

  .workspace-menu-button,
  .workspace-back-button,
  .secondary-search-button,
  .secondary-sheet-button {
    display: none;
  }

  .user-header-actions { display: none; }
  .workspace[data-view="users"].has-active-user .user-header-actions { position: absolute; z-index: 2; top: 13px; left: 24px; display: flex; align-items: center; gap: 4px; }
  .user-header-action--delete { color: var(--danger); }
  .user-header-action[aria-pressed="true"] { color: var(--accent); background: var(--selected-bg); }
  .user-header-action:disabled { opacity: .38; cursor: not-allowed; transform: none; }

  .workspace.has-secondary-sheet .workspace__header-cell--secondary {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace.has-secondary-sheet .secondary-sheet-button {
    position: absolute;
    top: 13px;
    left: 24px;
    z-index: 1;
    display: grid;
  }

  .workspace.has-secondary-search .workspace__header-cell--secondary {
    grid-template-columns: minmax(0, 1fr) var(--header-action-track);
  }

  .workspace.has-secondary-search .secondary-search-button {
    display: grid;
    grid-column: 2;
  }

  .workspace[data-secondary-action="user-create"] .workspace__header-cell--secondary {
    grid-template-columns: minmax(0, 1fr) var(--header-action-track) var(--header-action-track);
  }

  .workspace[data-secondary-action="user-create"] .secondary-sheet-button {
    position: static;
    grid-column: 3;
  }

  .workspace[data-secondary-action="user-create"] .secondary-search-button { grid-column: 2; }
  .secondary-search-button.is-active { color: var(--accent); background: var(--selected-bg); }

  .secondary-sheet-button[aria-expanded="true"] {
    color: var(--accent);
    background: var(--exercise-surface-bg);
  }

  .icon-action-button:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--sidebar-bg) 70%, transparent);
  }

  .icon-action-button:active {
    transform: scale(.94);
  }

  .workspace__label {
    justify-self: center;
    font-size: 12px;
  }

  .workspace__content {
    display: block;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .shell-columns {
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    direction: rtl;
    transition: grid-template-columns var(--duration-slow) var(--ease);
  }

  .secondary-column,
  .content-column {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .secondary-column {
    position: relative;
    grid-column: 1;
    opacity: 0;
    transform: translateX(-24px);
    border-left: 0 solid var(--separator-color);
    background: var(--sidebar-bg);
    pointer-events: none;
    transition:
      opacity var(--duration) ease,
      transform var(--duration-slow) var(--ease),
      background-color var(--duration) ease,
      border-color var(--duration) ease,
      border-width var(--duration-slow) var(--ease);
  }

  .content-column {
    grid-column: 2;
    background: var(--app-bg);
    transition: background-color var(--duration) ease;
  }

  .workspace.has-secondary .shell-columns {
    grid-template-columns: var(--secondary-column-width) minmax(0, 1fr);
  }

  .workspace.has-secondary .secondary-column {
    opacity: 1;
    transform: translateX(0);
    border-left-width: var(--separator-width);
    pointer-events: auto;
  }

  .secondary-column__content,
  .content-column__content {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    place-items: center;
    overflow: auto;
    padding: var(--workspace-column-padding);
  }

  .content-note {
    display: grid;
    justify-items: center;
    gap: 14px;
    color: var(--text-soft);
    text-align: center;
  }

  .content-note span {
    width: 42px;
    height: 3px;
    border-radius: var(--radius-circle);
    background: var(--accent);
  }

  .content-note p {
    font-size: 13px;
  }

  .bottom-sheet-backdrop {
    position: absolute;
    z-index: 5;
    top: var(--shell-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
      opacity var(--duration) ease,
      visibility 0s linear var(--duration);
  }

  .bottom-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  @media (min-width: 821px) {
    .workspace.has-secondary .bottom-sheet-backdrop {
      right: auto;
      left: 0;
      width: calc(100% - var(--secondary-column-width));
    }
  }

  .bottom-sheet {
    position: absolute;
    z-index: 6;
    right: auto;
    bottom: 0;
    left: calc((100% - var(--secondary-column-width)) / 2);
    display: grid;
    grid-template-rows: 64px minmax(0, 1fr) auto;
    width: min(760px, calc(100% - var(--secondary-column-width) - 48px));
    height: min(56%, 500px);
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: var(--sidebar-bg);
    background-clip: padding-box;
    visibility: hidden;
    overflow-anchor: none;
    transform: translate(-50%, 100%);
    pointer-events: none;
    transition:
      transform var(--duration-slow) var(--ease),
      visibility 0s linear var(--duration-slow),
      background-color var(--duration) ease,
      border-color var(--duration) ease;
  }

  .bottom-sheet.is-open {
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
    transition-delay: 0s;
  }

  .bottom-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
    background-clip: padding-box;
    transition:
      background-color var(--duration) ease,
      border-color var(--duration) ease;
  }

  .bottom-sheet__header h2 {
    overflow: hidden;
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bottom-sheet__close {
    flex: 0 0 44px;
  }

  .bottom-sheet__body {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
  }

  .bottom-sheet__footer {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 14px 20px;
    border-top: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
    background-clip: padding-box;
    transition:
      background-color var(--duration) ease,
      border-color var(--duration) ease;
  }

  .bottom-sheet__footer[hidden] {
    display: none;
  }

  .bottom-sheet.is-compact-confirmation .bottom-sheet__body {
    min-height: 0;
    overflow: auto;
  }

  .bottom-sheet.is-compact-confirmation .bottom-sheet__footer {
    min-height: 68px;
  }

  .secondary-column__content.is-route-enter-forward > *,
  .content-column__content.is-route-enter-forward > * {
    animation: route-enter-forward-rtl var(--duration-slow) var(--ease);
  }

  .secondary-column__content.is-route-enter-back > *,
  .content-column__content.is-route-enter-back > * {
    animation: route-enter-back-rtl var(--duration-slow) var(--ease);
  }

  @keyframes route-enter-forward-rtl {
    from {
      transform: translateX(-32px);
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes route-enter-back-rtl {
    from {
      transform: translateX(32px);
    }
    to {
      transform: translateX(0);
    }
  }
}

@layer exercises {
  .exercise-library,
  .exercise-detail {
    width: min(100%, var(--primary-page-max-width));
    align-self: start;
    justify-self: center;
  }

  .exercise-library {
    display: block;
    container-name: exercise-library;
    container-type: inline-size;
  }

  .exercise-search-panel {
    display: grid;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      max-height var(--duration-slow) var(--ease),
      opacity var(--duration) ease,
      transform var(--duration-slow) var(--ease),
      margin-bottom var(--duration-slow) var(--ease);
  }

  .exercise-search-panel.is-open {
    max-height: 74px;
    margin-bottom: 18px;
    opacity: 1;
    transform: translateY(0);
  }

  .exercise-search-field {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 40px;
    min-height: 52px;
    align-items: center;
    gap: 9px;
    padding: 5px 6px 5px 14px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
    background: var(--sidebar-bg);
  }

  .exercise-search-field > .icon {
    color: var(--icon);
    font-size: 20px;
  }

  .exercise-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
  }

  .exercise-search-field input::placeholder {
    color: var(--text-soft);
  }

  .exercise-search-field input::-webkit-search-cancel-button {
    display: none;
  }

  .exercise-search-field__clear {
    width: 38px;
    height: 38px;
  }

  .exercise-search-field__clear[hidden] {
    display: none;
  }

  .exercise-search-empty {
    padding: 52px 20px;
    color: var(--text-soft);
    text-align: center;
    font-size: 13px;
  }

  .exercise-search-empty[hidden] {
    display: none;
  }

  .exercise-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  @container exercise-library (min-width: 400px) {
    .exercise-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container exercise-library (min-width: 700px) {
    .exercise-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @container exercise-library (min-width: 940px) {
    .exercise-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .exercise-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--radius-selected);
    background: var(--sidebar-bg);
    transition: background-color var(--duration) ease;
  }

  .exercise-card__link {
    display: block;
  }

  .exercise-card__media,
  .exercise-detail__media {
    display: grid;
    overflow: hidden;
    place-items: center;
    background: var(--exercise-surface-bg);
  }

  .exercise-card__media {
    aspect-ratio: 16 / 10;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .exercise-card__media img,
  .exercise-card__media video,
  .exercise-detail__media img,
  .exercise-detail__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .exercise-video-shell {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    overflow: hidden;
    place-items: center;
    background: var(--exercise-surface-bg);
  }

  .exercise-video-shell video {
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration) ease;
  }

  .exercise-video-shell.is-ready video {
    opacity: 1;
  }

  .exercise-video-loader {
    position: absolute;
    z-index: 1;
    display: grid;
    inset: 0;
    place-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-fast) ease, visibility var(--duration-fast) ease;
  }

  .exercise-video-loader > span {
    width: 30px;
    height: 30px;
    border: var(--separator-width) solid color-mix(in srgb, var(--icon) 22%, transparent);
    border-top-color: var(--accent);
    border-radius: var(--radius-circle);
    animation: exercise-video-spin .75s linear infinite;
  }

  .exercise-video-shell.is-ready .exercise-video-loader,
  .exercise-video-shell.is-error .exercise-video-loader {
    opacity: 0;
    visibility: hidden;
  }

  .exercise-video-shell.is-error::after {
    content: "לא ניתן לטעון את הסרטון";
    grid-area: 1 / 1;
    color: var(--text-soft);
    font-size: 12px;
  }

  @keyframes exercise-video-spin {
    to { transform: rotate(360deg); }
  }

  .exercise-media-missing {
    display: grid;
    justify-items: center;
    gap: 9px;
    color: var(--icon);
  }

  .exercise-media-missing .icon {
    width: 38px;
    height: 38px;
    font-size: 38px;
  }

  .exercise-media-missing small {
    color: var(--text-soft);
    font-size: 12px;
  }

  .exercise-card__body {
    display: flex;
    min-height: 68px;
    align-items: center;
    padding: 13px 16px;
  }

  .exercise-card__body h2 {
    overflow: hidden;
    padding-inline-end: 50px;
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .exercise-card__compact-meta {
    display: none;
  }

  .exercise-card__favorite {
    position: absolute;
    bottom: 12px;
    left: 10px;
    background: var(--exercise-surface-bg);
  }

  .exercise-card__favorite.is-active,
  .exercise-detail__favorite.is-active {
    color: var(--accent);
    background: var(--exercise-surface-bg);
  }

  .exercise-card__favorite:hover,
  .exercise-detail__favorite,
  .exercise-detail__favorite:hover {
    background: var(--exercise-surface-bg);
  }

  .exercise-filters {
    --category-row-height: var(--secondary-list-item-min-height);
    --category-tree-indent: 38px;
    --category-media-size: var(--secondary-list-media-size);
    --category-tree-axis: calc(var(--category-media-size) / 2);
    --category-toggle-width: 24px;
    --category-count-size: 34px;
    --category-row-padding: 10px;

    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    align-self: stretch;
    justify-self: stretch;
  }

  .exercise-filters__section {
    display: grid;
    gap: var(--secondary-list-gap);
  }

  .exercise-filters__favorites {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: var(--separator-width) solid var(--separator-color);
    transition: border-color var(--duration) ease;
  }

  .exercise-filter {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: var(--secondary-list-item-padding);
    border-radius: var(--secondary-list-item-radius);
    color: var(--text);
    text-align: right;
    cursor: pointer;
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }

  .exercise-filter:hover,
  .exercise-filter.is-active {
    background: var(--exercise-surface-bg);
  }

  .exercise-filter.is-active {
    color: var(--accent-strong);
  }

  .exercise-filter__count {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-inline-start: auto;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--radius-circle);
    background: var(--sidebar-bg);
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1;
    transition:
      color var(--duration-fast) ease,
      background-color var(--duration) ease,
      border-color var(--duration) ease;
  }

  .exercise-filter.is-active .exercise-filter__count {
    color: var(--accent-strong);
  }

  .exercise-detail {
    display: grid;
    gap: 22px;
  }

  .exercise-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr);
    gap: 28px;
    align-items: start;
  }

  .exercise-detail__media {
    aspect-ratio: 16 / 10;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--radius-selected);
  }

  .exercise-detail__information {
    display: grid;
    gap: 24px;
  }

  .exercise-detail__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
  }

  .exercise-detail__heading p {
    flex: 1;
    color: var(--text-soft);
  }

  .exercise-detail__favorite {
    flex: 0 0 44px;
  }

  .exercise-detail__facts {
    display: grid;
    gap: 0;
    margin: 0;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--radius-selected);
    background: var(--sidebar-bg);
  }

  .exercise-detail__facts div {
    display: grid;
    grid-template-columns: minmax(110px, .7fr) minmax(0, 1fr);
    gap: 14px;
    padding: 12px 14px;
  }

  .exercise-detail__facts div + div {
    border-top: var(--separator-width) solid var(--separator-color);
  }

  .exercise-detail__facts dt {
    color: var(--text-soft);
  }

  .exercise-detail__facts dd {
    margin: 0;
    color: var(--text);
  }

  .exercise-detail__instructions {
    display: grid;
    gap: 12px;
  }

  .exercise-detail__instructions h2 {
    font-size: 17px;
  }

  .exercise-detail__instructions ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-inline-start: 22px;
    color: var(--text-soft);
  }

  @media (max-width: 1100px) {
    .exercise-detail__layout {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 820px) {
    .exercise-library,
    .exercise-detail {
      width: 100%;
    }

    .exercise-search-panel.is-open {
      max-height: 68px;
      margin-bottom: 12px;
    }

    .exercise-search-field {
      min-height: 48px;
      grid-template-columns: 22px minmax(0, 1fr) 38px;
      border-radius: 13px;
    }

    .exercise-search-field__clear {
      width: 36px;
      height: 36px;
    }

    .exercise-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    .exercise-library.is-compact-list .exercise-grid {
      gap: 10px;
    }

    .workspace[data-view="exercises"] .content-column__content {
      overflow-x: hidden;
    }

    .exercise-library.is-compact-list,
    .exercise-library.is-compact-list .exercise-grid,
    .exercise-library.is-compact-list .exercise-card {
      min-width: 0;
      max-width: 100%;
    }

    .exercise-library.is-compact-list .exercise-card__link {
      display: grid;
      width: 100%;
      min-width: 0;
      grid-template-columns: 132px minmax(0, 1fr);
      min-height: 88px;
      align-items: stretch;
    }

    .exercise-library.is-compact-list .exercise-card__media {
      width: 132px;
      height: 88px;
      aspect-ratio: 16 / 10;
      border-bottom: 0;
      border-left: var(--separator-width) solid var(--separator-color);
    }

    .exercise-library.is-compact-list .exercise-card__body {
      display: grid;
      min-width: 0;
      min-height: 88px;
      align-content: center;
      gap: 5px;
      padding: 11px 13px;
      padding-inline-end: 50px;
    }

    .exercise-library.is-compact-list .exercise-card__body h2 {
      display: block;
      min-width: 0;
      overflow: hidden;
      padding-inline-end: 0;
      font-size: 13.5px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .exercise-library.is-compact-list .exercise-card__compact-meta {
      display: block;
      min-width: 0;
      overflow: hidden;
      padding-inline-end: 0;
      color: var(--text-soft);
      font-size: 10.5px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .exercise-library.is-compact-list .exercise-card__compact-meta span {
      display: inline;
    }

    .exercise-library.is-compact-list .exercise-card__compact-meta span:empty {
      display: none;
    }

    .exercise-library.is-compact-list .exercise-card__compact-meta span + span::before {
      margin-inline-end: 6px;
      color: var(--separator-color);
      content: "•";
    }

    .exercise-library.is-compact-list .exercise-card {
      overflow: visible;
    }

    .exercise-library.is-compact-list .exercise-card__link {
      overflow: hidden;
      border-radius: inherit;
    }

    .exercise-library.is-compact-list .exercise-card__manage {
      top: 7px;
      left: 8px;
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px;
      overflow: hidden;
      border: var(--separator-width) solid var(--separator-color);
      border-radius: 10px;
      background: var(--exercise-surface-bg);
      transform: none;
    }

    .exercise-library.is-compact-list .exercise-card__manage:hover,
    .exercise-library.is-compact-list .exercise-card__manage:active,
    .exercise-library.is-compact-list .exercise-card__manage[aria-expanded="true"] {
      color: var(--accent);
      background: var(--exercise-surface-bg);
      transform: none;
    }

    .exercise-library.is-compact-list .exercise-card__manage .icon {
      width: 20px;
      height: 20px;
      font-size: 20px;
    }

    .exercise-library.is-compact-list .exercise-card__favorite {
      top: auto;
      bottom: 7px;
      left: 8px;
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px;
      transform: none;
    }

    .exercise-library.is-compact-list .exercise-card__favorite:active {
      transform: scale(.94);
    }

    .exercise-library.is-compact-list .exercise-card__favorite .icon {
      width: 21px;
      height: 21px;
      font-size: 21px;
    }
  }
}


@layer workouts {
  .secondary-column__content:has(.workout-program-directory) {
    place-items: start stretch;
  }

  .workout-program-directory {
    display: grid;
    width: 100%;
    align-content: start;
  }

  .workout-program-directory__empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 44px 18px;
    color: var(--text-soft);
    text-align: center;
  }

  .workout-program-directory__empty > span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 16px;
    background: var(--sidebar-bg);
    color: var(--accent);
  }

  .workout-program-directory__empty strong { color: var(--text); font-size: 15px; }
  .workout-program-directory__empty p { max-width: 240px; font-size: 12px; }

  .workout-program-list {
    display: grid;
    align-content: start;
    gap: var(--secondary-list-gap);
  }

  .workout-program-list-item__actions {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .workout-program-list-item__action {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    border: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .workout-program-list-item__action--start,
  .workout-program-list-item__action--running { color: var(--accent); }
  .workout-program-list-item__action--edit { color: var(--icon); }
  .workout-program-list-item__action:disabled {
    color: var(--icon);
    cursor: not-allowed;
    opacity: .38;
  }

  .workout-program-directory__message {
    min-height: 18px;
    margin: 8px 4px 0;
    color: var(--danger);
    font-size: 11.5px;
  }

  .workout-program-list-item {
    display: grid;
    min-height: var(--secondary-list-item-min-height);
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: var(--secondary-list-item-gap);
    padding: var(--secondary-list-item-padding);
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-item-radius);
    background: var(--sidebar-bg);
    color: var(--text);
    transition:
      background-color var(--duration-fast) ease,
      border-color var(--duration-fast) ease;
  }

  .workout-program-list-item.is-active {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--separator-color));
    background: var(--selected-bg);
  }

  .workout-program-list-item.is-session-active {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--separator-color));
    background: color-mix(in srgb, var(--selected-bg) 72%, var(--sidebar-bg));
  }

  .workout-program-list-item__open {
    display: grid;
    min-width: 0;
    align-self: stretch;
    grid-template-columns: var(--secondary-list-media-size) minmax(0, 1fr);
    align-items: center;
    gap: var(--secondary-list-item-gap);
    border-radius: calc(var(--secondary-list-item-radius) - 4px);
    color: inherit;
  }

  .workout-program-list-item__open:active { transform: scale(.994); }

  .workout-program-list-item__icon {
    display: grid;
    width: var(--secondary-list-media-size);
    height: var(--secondary-list-media-size);
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-media-radius);
    background: var(--sidebar-bg);
    color: var(--icon);
  }

  .workout-program-list-item.is-active .workout-program-list-item__icon { color: var(--accent); }
  .workout-program-list-item__icon .icon { font-size: 22px; }

  .workout-program-list-item__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .workout-program-list-item__copy strong,
  .workout-program-list-item__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workout-program-list-item__copy strong { font-size: 14px; font-weight: 680; }
  .workout-program-list-item__copy small { color: var(--text-soft); font-size: 11.5px; }

  .workout-program-overview,
  .workout-program-editor {
    width: min(100%, var(--primary-page-max-width));
    align-self: start;
    justify-self: center;
  }

  .workout-program-editor {
    container-name: workout-program-editor;
    container-type: inline-size;
  }

  .workout-program-overview {
    display: grid;
    align-content: start;
    gap: 18px;
  }

  .workout-program-overview__surface {
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--primary-surface-radius);
    background: var(--sidebar-bg);
  }

  .workout-program-overview__hero {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .workout-program-overview__eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; }
  .workout-program-overview__hero h2 { margin-top: 2px; font-size: 21px; }
  .workout-program-overview__hero p:last-child { margin-top: 5px; color: var(--text-soft); font-size: 13px; }

  .workout-program-overview__create,
  .workout-program-overview__empty button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    background: var(--sidebar-bg);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 680;
    transition:
      color var(--duration-fast) ease,
      border-color var(--duration-fast) ease,
      background-color var(--duration-fast) ease,
      transform var(--duration-fast) ease;
  }

  .workout-program-overview__create {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
  }

  .workout-program-overview__create:active,
  .workout-program-overview__empty button:active { transform: scale(.97); }

  .workout-program-overview__empty {
    display: grid;
    justify-items: center;
    gap: 9px;
    padding: 54px 24px;
    border: var(--separator-width) dashed var(--separator-color);
    border-radius: 20px;
    color: var(--text-soft);
    text-align: center;
  }

  .workout-program-overview__empty > span {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 20px;
    background: var(--selected-bg);
    color: var(--accent);
  }

  .workout-program-overview__empty > span .icon { font-size: 31px; }
  .workout-program-overview__empty h3 { color: var(--text); font-size: 18px; }
  .workout-program-overview__empty p { max-width: 480px; font-size: 12.5px; }
  .workout-program-overview__empty button { margin-top: 8px; color: var(--accent); }

  .workout-program-overview__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .workout-program-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 17px;
    background: var(--sidebar-bg);
    transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }

  .workout-program-card.is-session-active {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--separator-color));
    background: color-mix(in srgb, var(--selected-bg) 68%, var(--sidebar-bg));
  }
  .workout-program-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
  .workout-program-card__icon .icon { width: 24px; height: 24px; font-size: 24px; }
  .workout-program-card__copy { display: grid; min-width: 0; gap: 2px; }
  .workout-program-card__copy strong,
  .workout-program-card__copy small,
  .workout-program-card__copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workout-program-card__copy strong { font-size: 15px; }
  .workout-program-card__copy small,
  .workout-program-card__copy p { color: var(--text-soft); font-size: 11.5px; }

  .workout-program-card__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .workout-program-card__action {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    border: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .workout-program-card__action--start,
  .workout-program-card__action--running { color: var(--accent); }
  .workout-program-card__action--edit { color: var(--icon); }
  .workout-program-card__action:disabled {
    color: var(--icon);
    cursor: not-allowed;
    opacity: .38;
  }

  .workout-program-overview__message {
    min-height: 18px;
    color: var(--danger);
    font-size: 11.5px;
  }

  .workout-program-list-item__action--running,
  .workout-program-card__action--running,
  .workout-program-header-action--start.is-session-active {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--separator-color));
    background: color-mix(in srgb, var(--selected-bg) 76%, var(--sidebar-bg));
    color: var(--accent);
  }

  .workout-program-header-action--start.is-session-active [data-workout-start-icon] {
    display: none !important;
  }

  .workout-program-header-action--start:not(.is-session-active) [data-workout-running-indicator] {
    display: none !important;
  }

  .workout-running-indicator {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: currentColor;
  }

  .workout-running-indicator[hidden] { display: none !important; }

  .workout-running-indicator > span {
    width: 2px;
    height: 12px;
    border-radius: var(--radius-circle);
    background: currentColor;
    opacity: .46;
    transform: scaleY(.54);
    transform-origin: center;
    animation: workout-session-running-bars 1.2s ease-in-out infinite;
  }

  .workout-running-indicator > span:nth-child(2) {
    animation-delay: -.4s;
  }

  .workout-running-indicator > span:nth-child(3) {
    animation-delay: -.8s;
  }

  @keyframes workout-session-running-bars {
    0%, 100% { opacity: .42; transform: scaleY(.48); }
    50% { opacity: 1; transform: scaleY(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .workout-running-indicator > span { animation: none; }
    .workout-running-indicator > span:nth-child(1) { opacity: .55; transform: scaleY(.58); }
    .workout-running-indicator > span:nth-child(2) { opacity: 1; transform: scaleY(1); }
    .workout-running-indicator > span:nth-child(3) { opacity: .72; transform: scaleY(.76); }
  }

  .workout-program-form {
    display: grid;
    align-content: start;
    gap: 16px;
  }

  .workout-program-form__section {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 19px;
    background: var(--sidebar-bg);
  }

  .workout-program-form__section-heading,
  .workout-program-form__exercise-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
  }

  .workout-program-form__section-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 14px;
    background: var(--selected-bg);
    color: var(--accent);
  }

  .workout-program-form__section-heading > span:nth-child(2),
  .workout-program-form__exercise-heading > span:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .workout-program-form__section-heading strong,
  .workout-program-form__exercise-heading strong { font-size: 15px; }
  .workout-program-form__section-heading small,
  .workout-program-form__exercise-heading small { color: var(--text-soft); font-size: 11.5px; }

  .workout-program-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-inline-start: auto;
    padding: 7px 10px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
  }

  .workout-program-status input { position: absolute; opacity: 0; pointer-events: none; }
  .workout-program-status > span:last-child {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: var(--radius-circle);
    background: color-mix(in srgb, var(--text-soft) 18%, transparent);
    transition: background-color var(--duration) ease;
  }
  .workout-program-status > span:last-child::after {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-circle);
    background: var(--sidebar-bg);
    content: "";
    transition: transform var(--duration) var(--ease);
  }
  .workout-program-status input:checked + span { background: var(--accent); }
  .workout-program-status input:checked + span::after { transform: translateX(-18px); }

  .workout-program-form__identity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .workout-program-exercises {
    display: grid;
    gap: 14px;
    min-width: 0;
  }

  .workout-program-form__exercise-heading {
    justify-content: space-between;
    padding-inline: 4px;
  }

  .workout-program-form__add-exercise {
    flex: 0 0 var(--header-action-size);
    border: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
    color: var(--accent);
  }

  .workout-program-form__add-exercise:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
  }

  .workout-program-exercise-list {
    display: grid;
    gap: 18px;
  }

  .workout-program-exercise {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 18px;
    background: var(--sidebar-bg);
  }

  .workout-program-exercise__header {
    display: flex;
    min-width: 0;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .workout-program-exercise__identity {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .workout-program-exercise__identity strong,
  .workout-program-exercise__identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workout-program-exercise__identity strong { font-size: 16px; }
  .workout-program-exercise__identity small { color: var(--text-soft); font-size: 11.5px; }

  .workout-program-exercise__order {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
  }

  .workout-program-exercise__order .icon-action-button {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .workout-program-exercise__order .icon-action-button:disabled,
  .workout-program-set > button:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
  }

  .workout-program-exercise__order .icon { font-size: 18px; }
  .workout-program-exercise__add-set { color: var(--accent); }
  .workout-program-exercise__remove { color: var(--danger); }

  .workout-program-exercise__content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .workout-program-exercise__media-column {
    display: grid;
    min-width: 0;
    min-height: 0;
    align-items: stretch;
    background: var(--sidebar-bg);
  }

  .workout-program-exercise__media-panel {
    display: grid;
    min-width: 0;
    min-height: 0;
    order: 1;
    place-items: center;
    background: var(--sidebar-bg);
  }

  .workout-program-exercise__media.exercise-card__media {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: var(--sidebar-bg);
  }

  .workout-program-exercise__media img,
  .workout-program-exercise__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .workout-program-exercise__media .exercise-video-shell {
    height: 100%;
    background: var(--sidebar-bg);
  }

  .workout-program-rest {
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--sidebar-bg);
  }

  .workout-program-rest__title {
    display: flex;
    width: 100%;
    height: 30px;
    min-height: 30px;
    align-items: center;
    margin: 0;
    padding: 0 16px;
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--selected-bg);
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 650;
  }

  .workout-program-rest__options {
    --workout-rest-offset: 0px;

    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: var(--app-bg);
  }

  .workout-program-rest__options::before {
    position: absolute;
    z-index: 0;
    inset-block: 4px;
    inset-inline-start: 4px;
    width: calc((100% - 28px) / 6);
    border-radius: 10px;
    background: var(--sidebar-bg);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
    content: "";
    transform: translateX(var(--workout-rest-offset));
    transition: transform var(--duration-slow) var(--ease), background-color var(--duration) ease, box-shadow var(--duration) ease;
  }

  html[data-theme="dark"] .workout-program-rest__options::before { box-shadow: none; }
  .workout-program-rest__options:has(.workout-program-rest__option:nth-child(2) input:checked) { --workout-rest-offset: calc(-100% - 4px); }
  .workout-program-rest__options:has(.workout-program-rest__option:nth-child(3) input:checked) { --workout-rest-offset: calc(-200% - 8px); }
  .workout-program-rest__options:has(.workout-program-rest__option:nth-child(4) input:checked) { --workout-rest-offset: calc(-300% - 12px); }
  .workout-program-rest__options:has(.workout-program-rest__option:nth-child(5) input:checked) { --workout-rest-offset: calc(-400% - 16px); }
  .workout-program-rest__options:has(.workout-program-rest__option:nth-child(6) input:checked) { --workout-rest-offset: calc(-500% - 20px); }

  .workout-program-rest__option {
    position: relative;
    z-index: 1;
    min-width: 0;
    cursor: pointer;
  }

  .workout-program-rest__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .workout-program-rest__option span {
    display: grid;
    min-width: 0;
    min-height: 38px;
    place-items: center;
    border: var(--separator-width) solid transparent;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 680;
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }

  .workout-program-rest__option input:checked + span {
    border-color: transparent;
    background: transparent;
    color: var(--accent);
  }

  .workout-program-rest__option input:focus-visible + span {
    outline: 1px solid color-mix(in srgb, var(--text-soft) 58%, transparent);
    outline-offset: 1px;
  }

  .workout-program-rest__option:has(input:disabled) {
    cursor: default;
  }

  .workout-program-exercise__details {
    display: grid;
    min-width: 0;
    align-content: start;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
  }

  .workout-program-sets {
    display: grid;
    min-width: 0;
    gap: 0;
    padding: 0;
  }

  .workout-program-sets__rows {
    display: grid;
    gap: 0;
  }

  .workout-program-sets__head,
  .workout-program-set {
    display: grid;
    grid-template-columns:
      var(--workout-set-control-size)
      minmax(104px, .82fr)
      minmax(138px, 1fr)
      minmax(148px, 1fr)
      var(--workout-set-control-size);
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-items: stretch;
    gap: 10px;
    direction: rtl;
  }

  .workout-program-sets__head {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--selected-bg);
    color: var(--text-soft);
    text-align: center;
    font-size: 10.5px;
    font-weight: 650;
  }

  .workout-program-sets__head > span {
    display: grid;
    min-width: 0;
    place-items: center;
  }

  /* Keep headers and controls on the same explicit grid tracks in RTL. */
  .workout-program-sets__number-head,
  .workout-program-set__number { grid-column: 1; }
  .workout-program-sets__previous-head,
  .workout-program-set__previous { grid-column: 2; }
  .workout-program-sets__reps-head,
  .workout-program-set__reps { grid-column: 3; }
  .workout-program-sets__weight-head,
  .workout-program-set__weight { grid-column: 4; }
  .workout-program-sets__remove-head,
  .workout-program-set__remove { grid-column: 5; }

  .workout-program-set {
    min-height: calc(var(--workout-set-control-size) + (2 * var(--workout-set-row-padding)));
    padding: var(--workout-set-row-padding);
    border: 0;
    border-bottom: var(--separator-width) solid var(--separator-color);
    border-radius: 0;
    background: var(--app-bg);
  }

  .workout-program-set:last-child {
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .workout-program-set__number,
  .workout-program-set__previous,
  .workout-program-stepper,
  .workout-program-set > button {
    min-width: 0;
    height: var(--workout-set-control-size);
    border: var(--separator-width) solid var(--workout-set-control-border);
    border-radius: var(--workout-set-control-radius);
    background: var(--workout-set-control-bg);
  }

  .workout-program-set__number {
    display: grid;
    width: var(--workout-set-control-size);
    place-items: center;
    justify-self: center;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
  }

  .workout-program-set__previous {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0;
    padding: 0 7px;
    color: var(--text-soft);
    text-align: center;
  }

  .workout-program-set__previous small { font-size: 9.5px; }
  .workout-program-set__previous strong { color: var(--text); font-size: 11px; }

  .workout-program-stepper__field {
    position: relative;
    display: grid;
    min-width: 0;
    height: 100%;
    align-items: center;
  }

  .workout-program-stepper__field small {
    position: absolute;
    inset-inline-start: 7px;
    top: 50%;
    color: var(--text-soft);
    font-size: 9px;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .workout-program-stepper--weight input { padding-inline: 0; }

  .workout-program-set > button {
    width: var(--workout-set-control-size);
    min-width: var(--workout-set-control-size);
    height: var(--workout-set-control-size);
    min-height: var(--workout-set-control-size);
    flex-basis: var(--workout-set-control-size);
    align-self: center;
    justify-self: center;
    color: var(--icon);
  }

  .workout-program-set > button .icon { font-size: 17px; }

  @container workout-program-editor (max-width: 820px) {
    .workout-program-exercise {
      --workout-set-control-size: 40px;
    }

    .workout-program-exercise__content {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .workout-program-exercise__media-column {
      display: block;
      border-bottom: var(--separator-width) solid var(--separator-color);
    }

    .workout-program-exercise__media-panel,
    .workout-program-exercise__media.exercise-card__media {
      display: block;
      height: auto;
    }

    .workout-program-exercise__media img,
    .workout-program-exercise__media video,
    .workout-program-exercise__media .exercise-video-shell {
      height: auto;
    }

    .workout-program-exercise__details {
      border-inline-start: 0;
    }

    .workout-program-sets__head,
    .workout-program-set {
      grid-template-columns:
        var(--workout-set-control-size)
        minmax(0, 1fr)
        minmax(0, 1fr)
        var(--workout-set-control-size);
      gap: 7px;
    }

    .workout-program-sets__head {
      height: 30px;
      min-height: 30px;
      padding-inline: 7px;
      font-size: 10px;
    }

    .workout-program-sets__head > .workout-program-sets__previous-head,
    .workout-program-set__previous {
      display: none;
    }

    .workout-program-sets__number-head,
    .workout-program-set__number { grid-column: 1; }
    .workout-program-sets__reps-head,
    .workout-program-set__reps { grid-column: 2; }
    .workout-program-sets__weight-head,
    .workout-program-set__weight { grid-column: 3; }
    .workout-program-sets__remove-head,
    .workout-program-set__remove { grid-column: 4; }

    .workout-program-set {
      min-height: calc(var(--workout-set-control-size) + (2 * var(--workout-set-row-padding)));
      padding: var(--workout-set-row-padding);
    }

    .workout-program-stepper {
      grid-template-columns: 32px minmax(0, 1fr) 32px;
    }

    .workout-program-stepper button,
    .workout-program-stepper input {
      font-size: 16px;
    }

    .workout-program-stepper__field small {
      display: none;
    }

    .workout-program-stepper--weight input {
      padding-inline-start: 5px;
    }
  }

  @container workout-program-editor (max-width: 520px) {
    .workout-program-exercise__media-column {
      border-bottom: var(--separator-width) solid var(--separator-color);
    }

    .workout-program-exercise__media-panel {
      border-bottom: 0;
    }
  }

  .workout-program-form__empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 38px 20px;
    border: var(--separator-width) dashed var(--separator-color);
    border-radius: 16px;
    color: var(--text-soft);
    text-align: center;
  }
  .workout-program-form__empty.is-hidden { display: none; }
  .workout-program-form__empty > span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 16px; background: var(--selected-bg); color: var(--accent); }
  .workout-program-form__empty strong { color: var(--text); font-size: 15px; }
  .workout-program-form__empty p { max-width: 440px; font-size: 12px; }
  .workout-program-form__empty button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; margin-top: 4px; padding: 0 14px; border: var(--separator-width) solid var(--separator-color); border-radius: 12px; background: var(--sidebar-bg); color: var(--accent); font-weight: 650; }

  .workout-program-form__message,
  .workout-create-form__message,
  .workout-exercise-picker__message,
  .workout-program-delete__message { min-height: 20px; color: var(--text-soft); font-size: 12px; }
  .workout-program-form__message.is-error,
  .workout-create-form__message.is-error,
  .workout-exercise-picker__message.is-error,
  .workout-program-delete__message.is-error { color: var(--danger); }
  .workout-program-form__message.is-success,
  .workout-create-form__message.is-success { color: var(--success); }

  .workout-program-header-actions {
    display: none;
    align-items: center;
    gap: var(--header-action-gap);
  }

  .workspace[data-secondary-action="workout-create"] .workspace__header-cell--secondary,
  .workspace[data-secondary-action="measurement-create"] .workspace__header-cell--secondary {
    grid-template-columns: minmax(0, 1fr) var(--header-action-track);
  }

  .workspace[data-secondary-action="workout-create"] .secondary-sheet-button,
  .workspace[data-secondary-action="measurement-create"] .secondary-sheet-button {
    position: static;
    grid-column: 2;
    display: grid;
  }

  .workspace.has-workout-program-actions .workout-program-header-actions { display: flex; }
  .workout-program-header-action[hidden] { display: none !important; }
  .workout-program-header-action--delete { color: var(--danger); }
  .workout-program-header-action--save { color: var(--accent); }
  .workout-program-header-action--cancel { color: var(--icon); }
  .workout-program-header-action--save.is-loading,
  .workout-program-header-action--start.is-loading {
    position: relative;
    overflow: hidden;
    place-items: center;
  }

  .workout-program-header-action--save.is-loading .icon,
  .workout-program-header-action--start.is-loading .icon { opacity: 0; }
  .workout-program-header-action--save.is-loading::after,
  .workout-program-header-action--start.is-loading::after {
    position: absolute;
    inset: 0;
    width: 17px;
    height: 17px;
    margin: auto;
    border: var(--separator-width) solid currentColor;
    border-left-color: transparent;
    border-radius: var(--radius-circle);
    content: "";
    animation: spin .75s linear infinite;
  }

  .workout-program-editor:not(.is-editing) input[readonly] { cursor: default; }
  .workout-program-status.is-saving { opacity: .64; cursor: wait; }
  .workout-program-header-action--start { color: var(--accent); }
  .workout-program-header-action--start:disabled:not(.is-session-active) {
    color: var(--icon);
    cursor: not-allowed;
    opacity: .38;
  }

  .workout-session-header-actions {
    display: none;
    align-items: center;
    gap: var(--header-action-gap);
  }

  .workspace.has-workout-session-actions .workout-session-header-actions {
    display: flex;
  }

  .workout-session-header-action[hidden] { display: none !important; }
  .workout-session-header-action--start { color: var(--accent); }
  .workout-session-header-action--finish { color: var(--danger); }
  .workout-session-header-action--start:disabled {
    color: var(--icon);
    cursor: not-allowed;
    opacity: .38;
  }
  .workout-session-header-action--start.is-loading {
    position: relative;
    overflow: hidden;
    place-items: center;
  }
  .workout-session-header-action--start.is-loading .icon { opacity: 0; }
  .workout-session-header-action--start.is-loading::after {
    position: absolute;
    inset: 0;
    width: 17px;
    height: 17px;
    margin: auto;
    border: var(--separator-width) solid currentColor;
    border-left-color: transparent;
    border-radius: var(--radius-circle);
    content: "";
    animation: spin .75s linear infinite;
  }

  .workout-history-header-actions {
    display: none;
    align-items: center;
    gap: var(--header-action-gap);
  }

  .workspace.has-workout-history-actions .workout-history-header-actions { display: flex; }
  .workout-history-header-action[hidden] { display: none !important; }
  .workout-history-header-action--edit,
  .workout-history-header-action--save { color: var(--accent); }
  .workout-history-header-action--cancel { color: var(--text-soft); }
  .workout-history-header-action--delete { color: var(--danger); }
  .workout-history-header-action--save.is-loading {
    position: relative;
    overflow: hidden;
    place-items: center;
  }
  .workout-history-header-action--save.is-loading .icon { opacity: 0; }
  .workout-history-header-action--save.is-loading::after {
    position: absolute;
    inset: 0;
    width: 17px;
    height: 17px;
    margin: auto;
    border: var(--separator-width) solid currentColor;
    border-left-color: transparent;
    border-radius: var(--radius-circle);
    content: "";
    animation: spin .75s linear infinite;
  }

  .workspace.has-active-workout-return {
    grid-template-rows: var(--shell-header-height) minmax(0, 1fr);
  }

  /*
   * Desktop: the active-workout strip belongs only to the primary content
   * header. Keep the secondary-column header and its content at their normal
   * height instead of inserting a workspace-wide row beneath both columns.
   */
  .workspace.has-active-workout-return .content-column {
    padding-top: 46px;
  }

  .active-workout-return {
    position: absolute;
    z-index: 4;
    top: var(--shell-header-height);
    left: 0;
    display: grid;
    width: 100%;
    height: 46px;
    min-height: 46px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 24px 8px;
    border: 0;
    border-bottom: var(--separator-width) solid var(--separator-color);
    border-radius: 0;
    background: color-mix(in srgb, var(--accent) 2.5%, var(--safe-area-bg));
    color: var(--text);
    transition: background-color var(--duration-fast) ease;
  }

  .workspace.has-secondary .active-workout-return {
    width: calc(100% - var(--secondary-column-width));
  }

  .active-workout-return[hidden] { display: none !important; }
  .active-workout-return:hover,
  .active-workout-return:active {
    background: color-mix(in srgb, var(--accent) 5%, var(--safe-area-bg));
    transform: none;
  }

  .active-workout-return > .icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    font-size: 21px;
  }

  .active-workout-return__copy {
    display: grid;
    min-width: 0;
    align-content: center;
  }

  .active-workout-return__copy strong {
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
  }

  .active-workout-return__remaining {
    display: inline-flex;
    min-width: 0;
    align-items: baseline;
    gap: 3px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
  }

  .active-workout-return__remaining strong {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-size: 12px;
    font-weight: 750;
  }

  .active-workout-return__remaining small {
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 600;
  }

  .active-workout-return__progress {
    position: absolute;
    right: 24px;
    bottom: 5px;
    left: 24px;
    display: block;
    height: 3px;
  }

  .active-workout-return__progress-track {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 11%, var(--separator-color));
  }

  .active-workout-return__progress-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width 240ms ease;
  }

  .secondary-column__content:has(.workout-history-directory),
  .secondary-column__content:has(.workout-session-directory) {
    place-items: start stretch;
  }

  .workout-history-directory {
    display: grid;
    width: 100%;
    align-content: start;
  }

  .workout-history-directory__empty {
    display: grid;
    min-height: 280px;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--text-soft);
    text-align: center;
  }

  .workout-history-directory__empty > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
    background: var(--selected-bg);
    color: var(--accent);
  }
  .workout-history-directory__empty .icon { font-size: 23px; }
  .workout-history-directory__empty strong { color: var(--text); font-size: 14px; }
  .workout-history-directory__empty p { max-width: 245px; font-size: 11.5px; line-height: 1.55; }

  .workout-history-list {
    display: grid;
    width: 100%;
    align-content: start;
    gap: var(--secondary-list-gap);
  }

  .workout-history-list-item {
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-item-radius);
    background: var(--sidebar-bg);
  }

  .workout-history-list-item.is-active {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--separator-color));
    background: var(--selected-bg);
  }

  .workout-history-list-item__link {
    display: grid;
    min-height: var(--secondary-list-item-min-height);
    grid-template-columns: var(--secondary-list-media-size) minmax(0, 1fr);
    align-items: center;
    gap: var(--secondary-list-item-gap);
    padding: var(--secondary-list-item-padding);
    color: var(--text);
  }

  .workout-history-list-item__link:hover { background: var(--hover-bg); }
  .workout-history-list-item__icon {
    display: grid;
    width: var(--secondary-list-media-size);
    height: var(--secondary-list-media-size);
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-media-radius);
    background: var(--sidebar-bg);
    color: var(--icon);
  }
  .workout-history-list-item.is-active .workout-history-list-item__icon { color: var(--accent); }
  .workout-history-list-item__icon .icon { font-size: 22px; }
  .workout-history-list-item__copy { display: grid; min-width: 0; gap: 2px; }
  .workout-history-list-item__title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .workout-history-list-item__title-row strong { min-width: 0; }
  .workout-history-list-item__title-row time {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 550;
    unicode-bidi: isolate;
    white-space: nowrap;
  }
  .workout-history-list-item__copy strong,
  .workout-history-list-item__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workout-history-list-item__copy strong { font-size: 14px; font-weight: 680; }
  .workout-history-list-item__copy small { color: var(--text-soft); font-size: 11.5px; }
  .workout-session-directory {
    display: grid;
    width: 100%;
    align-content: start;
  }

  .workout-session {
    width: min(100%, 1180px);
    max-width: 100%;
    min-width: 0;
    align-self: start;
    justify-self: center;
  }

  .workout-session__mobile-exercises { display: none; }
  .workout-session__directory-list { display: grid; gap: var(--secondary-list-gap); }

  .workout-session-exercise {
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 18px;
    background: var(--sidebar-bg);
  }

  .workout-session-directory-item {
    display: grid;
    min-width: 0;
    min-height: var(--secondary-list-item-min-height);
    grid-template-columns: var(--secondary-list-media-size) minmax(0, 1fr) 28px;
    align-items: center;
    gap: var(--secondary-list-item-gap);
    padding: var(--secondary-list-item-padding);
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-item-radius);
    background: var(--sidebar-bg);
    color: var(--text);
    text-align: right;
    transition:
      background-color var(--duration-fast) ease,
      border-color var(--duration-fast) ease,
      transform var(--duration-fast) ease;
  }

  .workout-session-directory-item:hover { background: var(--hover-bg); }
  .workout-session-directory-item:active { transform: scale(.985); }
  .workout-session-directory-item.is-active {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--separator-color));
    background: var(--selected-bg);
  }

  .workout-session-directory-item__media {
    display: grid;
    width: var(--secondary-list-media-size);
    height: var(--secondary-list-media-size);
    overflow: hidden;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-media-radius);
    background: var(--exercise-surface-bg);
    color: var(--icon);
  }

  .workout-session-directory-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .workout-session-directory-item__media .icon { font-size: 21px; }
  .workout-session-directory-item__copy { display: grid; min-width: 0; gap: 2px; }
  .workout-session-directory-item__copy strong,
  .workout-session-directory-item__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workout-session-directory-item__copy strong { font-size: 13px; }
  .workout-session-directory-item__copy small { color: var(--text-soft); font-size: 10.5px; }

  .workout-session-directory-item__state,
  .workout-session-mobile-item__state {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--radius-circle);
    background: var(--sidebar-bg);
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 700;
  }

  .workout-session-directory-item.is-complete .workout-session-directory-item__state,
  .workout-session-mobile-item.is-complete .workout-session-mobile-item__state {
    border-color: color-mix(in srgb, var(--success) 28%, var(--separator-color));
    background: var(--workout-session-success-bg);
    color: var(--success);
  }

  .workout-session-directory-item__state .icon,
  .workout-session-mobile-item__state .icon { font-size: 14px; }
  .workout-session__stage { width: 100%; min-width: 0; }
  .workout-session-exercise[hidden] { display: none; }

  .workout-session-exercise__desktop-header {
    display: grid;
    min-height: 76px;
    grid-template-columns: 112px minmax(0, auto) minmax(180px, 1fr);
    grid-template-areas: "rest insights title";
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: var(--separator-width) solid var(--separator-color);
    direction: ltr;
  }

  .workout-session-exercise__title {
    grid-area: title;
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 2px;
    padding: 12px 18px;
    direction: rtl;
  }
  .workout-session-exercise__title strong { font-size: 17px; }
  .workout-session-exercise__title small { color: var(--text-soft); font-size: 11px; }
  .workout-session-exercise__insights {
    grid-area: insights;
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 7px;
    padding: 10px 14px;
    direction: rtl;
  }
  .workout-session-exercise__insights:empty { display: none; }
  .workout-session-exercise__insights > span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 10px;
    background: var(--exercise-surface-bg);
    color: var(--text-soft);
    font-size: 10.5px;
    white-space: nowrap;
  }
  .workout-session-exercise__insights strong { color: var(--text); }
  .workout-session-exercise__content {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(500px, 1.18fr);
    min-width: 0;
    align-items: start;
    gap: 16px;
    padding: 16px;
  }

  .workout-session-exercise__media-column {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 12px;
    background: var(--sidebar-bg);
  }

  .workout-session-media-card__header,
  .workout-session-media-card__divider { display: none; }

  .workout-session-media-card__media.exercise-card__media {
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 15px;
    background: var(--sidebar-bg);
  }

  .workout-session-media-card__media img,
  .workout-session-media-card__media video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .workout-session-media-card__media .exercise-video-shell {
    height: auto;
    background: var(--sidebar-bg);
  }

  .workout-session-rest {
    grid-area: rest;
    display: block;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--sidebar-bg);
    direction: rtl;
  }

  .workout-session-rest--desktop {
    align-self: stretch;
    justify-self: stretch;
    border-inline-start: var(--separator-width) solid var(--separator-color);
  }

  .workout-session-rest__display {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: 23px minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    line-height: 1;
  }
  .workout-session-rest__display small,
  .workout-session-rest__display strong {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .workout-session-rest__display small {
    border-bottom: var(--separator-width) solid var(--separator-color);
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 650;
  }
  .workout-session-rest__display strong {
    background: var(--app-bg);
    color: var(--accent);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .workout-session-sets { min-width: 0; }
  .workout-session-sets__table {
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
    background: var(--exercise-surface-bg);
  }

  .workout-session-sets__head,
  .workout-session-set {
    display: grid;
    grid-template-columns: var(--workout-set-control-size) minmax(108px, .92fr) minmax(116px, 1fr) minmax(116px, 1fr) var(--workout-set-control-size);
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .workout-session-sets__head {
    min-height: 42px;
    padding: 0 var(--workout-set-row-padding);
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--selected-bg);
    color: var(--text-soft);
    text-align: center;
    font-size: 10px;
    font-weight: 700;
  }

  .workout-session-set {
    min-height: calc(var(--workout-set-control-size) + (2 * var(--workout-set-row-padding)));
    padding: var(--workout-set-row-padding);
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
  }
  .workout-session-set:last-child {
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .workout-session-set__number,
  .workout-session-set__previous,
  .workout-session-stepper,
  .workout-session-set__complete {
    min-width: 0;
    height: var(--workout-set-control-size);
    border: var(--separator-width) solid var(--workout-set-control-border);
    border-radius: var(--workout-set-control-radius);
    background: var(--workout-set-control-bg);
  }

  .workout-session-set__number {
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
  }

  .workout-session-set__previous {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0;
    padding: 0 7px;
    color: var(--text-soft);
    text-align: center;
  }
  .workout-session-set__previous small { font-size: 9.5px; }
  .workout-session-set__previous strong { color: var(--text); font-size: 11px; }

  .workout-stepper {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    overflow: hidden;
    direction: rtl;
  }

  .workout-stepper:focus-within {
    border-color: color-mix(in srgb, var(--text-soft) 58%, var(--separator-color));
    box-shadow: none;
  }

  .workout-stepper button {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 0;
    text-align: center;
  }

  .workout-stepper button:first-child { border-left: var(--separator-width) solid var(--separator-color); }
  .workout-stepper button:last-child { border-right: var(--separator-width) solid var(--separator-color); }
  .workout-stepper button:active { background: var(--hover-bg); }
  .workout-stepper button:disabled { opacity: .38; cursor: not-allowed; }

  .workout-stepper input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 5px;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
    font-size: 12px;
  }

  .workout-stepper input::-webkit-inner-spin-button,
  .workout-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

  .workout-session-set__complete {
    display: grid;
    place-items: center;
    color: var(--icon);
  }
  .workout-session-set__complete .icon { font-size: 17px; }
  .workout-session-set.is-complete .workout-session-set__complete {
    border-color: color-mix(in srgb, var(--success) 28%, var(--separator-color));
    background: var(--workout-session-success-bg);
    color: var(--success);
  }

  .workout-session-readonly-value,
  .workout-session-set__history-state {
    display: grid;
    min-width: 0;
    height: var(--workout-set-control-size);
    place-items: center;
    border: var(--separator-width) solid var(--workout-set-control-border);
    border-radius: var(--workout-set-control-radius);
    background: var(--workout-set-control-bg);
    color: var(--text);
    text-align: center;
  }
  .workout-session-readonly-value strong { font-size: 12px; font-weight: 500; }
  .workout-session-readonly-value.is-empty { color: var(--text-soft); }
  .workout-session-set__history-state { color: var(--icon); }
  .workout-session-set__history-state.is-complete {
    border-color: color-mix(in srgb, var(--success) 28%, var(--separator-color));
    background: var(--workout-session-success-bg);
    color: var(--success);
  }
  .workout-session-set__history-state .icon { font-size: 17px; }

  .workout-history-stepper { display: none; }
  .workout-session--history.is-history-editing .workout-session-set.is-history-editable [data-workout-history-readonly-reps],
  .workout-session--history.is-history-editing .workout-session-set.is-history-editable [data-workout-history-readonly-weight] { display: none; }
  .workout-session--history.is-history-editing .workout-history-stepper { display: grid; }
  .workout-session--history.is-history-editing .workout-history-stepper {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--workout-set-control-border));
  }

  .workout-history-edit-panel,
  .workout-history-load-editor {
    display: none;
  }

  .workout-session--history.is-history-editing .workout-history-edit-panel {
    display: grid;
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr) minmax(190px, 240px);
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
    background: var(--selected-bg);
  }

  .workout-history-edit-panel__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: var(--separator-width) solid color-mix(in srgb, var(--accent) 22%, var(--separator-color));
    border-radius: 13px;
    background: var(--exercise-surface-bg);
    color: var(--accent);
  }

  .workout-history-edit-panel__icon .icon {
    width: 21px;
    height: 21px;
    font-size: 21px;
  }

  .workout-history-edit-panel__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .workout-history-edit-panel__copy strong {
    font-size: 12px;
  }

  .workout-history-edit-panel__copy small {
    color: var(--text-soft);
    font-size: 10.5px;
  }

  .workout-history-date-control {
    display: grid;
    min-width: 0;
  }

  .workout-history-date-trigger {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px;
    border: var(--separator-width) solid color-mix(in srgb, var(--accent) 22%, var(--separator-color));
    border-radius: 12px;
    background: var(--sidebar-bg);
    color: var(--text);
    font-size: 12px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .workout-history-date-trigger .icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--accent);
    font-size: 20px;
  }

  .workout-history-date-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 2px;
  }

  .workout-history-date-trigger:disabled {
    cursor: default;
    opacity: .62;
  }

  .workout-session--history.is-history-editing .workout-history-load-editor {
    min-height: 50px;
    display: block;
    padding: 0;
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
  }

  .workout-history-load-switch {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--app-bg);
  }

  .workout-history-load-switch button {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: var(--sidebar-bg);
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 700;
  }

  .workout-history-load-switch button + button {
    border-inline-start: var(--separator-width) solid var(--separator-color);
  }

  .workout-history-load-switch button[aria-pressed="true"] {
    background: var(--accent);
    color: var(--on-accent);
  }

  @media (min-width: 821px) {
    .workout-session-exercise__content {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: 0;
      padding: 0;
    }

    .workout-session-exercise__media-column {
      min-height: 0;
      align-self: start;
      border-inline-end: var(--separator-width) solid var(--separator-color);
    }

    .workout-session-media-card,
    .workout-session-media-card__media.exercise-card__media {
      width: 100%;
      height: auto;
    }

    .workout-session-media-card__media.exercise-card__media {
      display: block;
      min-height: 0;
      border: 0;
      border-radius: 0;
    }

    .workout-session-media-card__media img,
    .workout-session-media-card__media video {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .workout-session-media-card__media .exercise-video-shell {
      width: 100%;
      height: auto;
    }

    .workout-session-sets {
      display: block;
      min-height: 0;
      align-self: start;
    }

    .workout-session-sets__table {
      height: auto;
      border: 0;
      border-radius: 0;
      background: var(--sidebar-bg);
    }
  }

  .workout-session--preview .workout-session-stepper input {
    cursor: default;
    pointer-events: none;
  }
  .workout-session--preview .workout-session-stepper button:disabled {
    color: var(--text-soft);
    opacity: 1;
  }
  .workout-session--preview .workout-session-set__complete:disabled {
    cursor: default;
    opacity: .42;
  }
  .workout-session__empty {
    display: grid;
    min-height: 320px;
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 32px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--primary-surface-radius);
    background: var(--sidebar-bg);
    color: var(--text-soft);
    text-align: center;
  }
  .workout-session__empty > span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 16px;
    color: var(--accent);
  }
  .workout-session__empty > span .icon { font-size: 26px; }
  .workout-session__empty strong { color: var(--text); font-size: 16px; }
  .workout-session__empty p { max-width: 360px; font-size: 12px; }

  .workout-session__exercise-strip { display: contents; }
  .workout-session__exercise-strip-button { display: none; }

  @media (min-width: 821px) {
    .workout-session--history .workout-session__exercise-strip {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 38px;
      align-items: center;
      gap: 8px;
      padding-bottom: 12px;
    }

    .workout-session--history .workout-session__exercise-strip-button {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border: var(--separator-width) solid var(--separator-color);
      border-radius: 11px;
      background: var(--sidebar-bg);
      color: var(--icon);
    }

    .workout-session--history .workout-session__exercise-strip-button .icon {
      width: 17px;
      height: 17px;
      font-size: 17px;
      line-height: 1;
    }

    .workout-session--history .workout-session__history-exercises {
      display: flex;
      width: 100%;
      min-width: 0;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      padding: 0;
      scrollbar-width: none;
    }
    .workout-session--history .workout-session__history-exercises::-webkit-scrollbar { display: none; }
    .workout-session--history .workout-session-mobile-item {
      display: inline-flex;
      min-height: 36px;
      flex: 0 0 auto;
      align-items: center;
      gap: 7px;
      padding: 0 11px;
      border: var(--separator-width) solid var(--separator-color);
      border-radius: var(--radius-circle);
      background: var(--sidebar-bg);
      color: var(--text-soft);
      font-size: 10.5px;
      white-space: nowrap;
    }
    .workout-session--history .workout-session-mobile-item.is-active {
      border-color: color-mix(in srgb, var(--accent) 22%, var(--separator-color));
      background: var(--selected-bg);
      color: var(--accent);
    }
  }

  .workout-session--history .workout-session-mobile-item.is-complete .workout-session-mobile-item__state {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--separator-color));
    background: var(--selected-bg);
    color: var(--accent);
  }

  .workout-session--history .workout-session-mobile-item__state .icon {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0;
    font-size: 14px;
    line-height: 1;
  }
  .workout-session--history .workout-session-mobile-item__state .icon::before {
    display: block;
    line-height: 1;
  }
  .workout-session--history .workout-session__exercise-strip-button:disabled {
    cursor: default;
    opacity: .32;
  }

  .workout-session-exercise__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-top: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .workout-session-exercise__next,
  .workout-session-exercise__previous {
    display: inline-flex;
    min-width: 0;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: var(--sidebar-bg);
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 650;
  }
  .workout-session-exercise__position {
    display: grid;
    min-width: 0;
    min-height: 62px;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding: 0 8px;
    border-inline: var(--separator-width) solid var(--separator-color);
    background: var(--selected-bg);
    text-align: center;
  }
  .workout-session-exercise__position small {
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 600;
  }
  .workout-session-exercise__position strong {
    color: var(--text);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
  }
  .workout-session-exercise__next {
    background: var(--accent);
    color: var(--on-accent);
  }
  .workout-session-exercise__next .icon,
  .workout-session-exercise__previous .icon { font-size: 17px; }
  .workout-session-exercise__next:disabled,
  .workout-session-exercise__previous:disabled { opacity: .38; cursor: not-allowed; }
  .workout-session-exercise__next.is-auto-advancing:disabled {
    opacity: 1;
    cursor: progress;
  }
  .workout-session-exercise__next.is-auto-advancing .icon { display: none; }
  .workout-session-exercise__next.is-auto-advancing::before {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 2px solid color-mix(in srgb, var(--on-accent) 38%, transparent);
    border-top-color: var(--on-accent);
    border-radius: 50%;
    content: "";
    animation: bottom-sheet-action-spin .72s linear infinite;
  }
  .workout-session-exercise__next.is-auto-advancing span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workout-session-sheet {
    display: grid;
    gap: 16px;
    margin: 20px;
    padding: 20px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 18px;
    background: var(--sidebar-bg);
  }
  .workout-session-sheet__hero {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }
  .workout-session-sheet__icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 10%, var(--sidebar-bg));
    color: var(--accent);
  }
  .workout-session-sheet__icon .icon { font-size: 25px; }
  .workout-session-sheet.is-complete .workout-session-sheet__icon {
    background: color-mix(in srgb, var(--success) 11%, var(--sidebar-bg));
    color: var(--success);
  }
  .workout-session-sheet__copy { display: grid; min-width: 0; gap: 3px; }
  .workout-session-sheet__eyebrow {
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 650;
  }
  .workout-session-sheet.is-complete .workout-session-sheet__eyebrow { color: var(--success); }
  .workout-session-sheet__copy strong { color: var(--text); font-size: 17px; }
  .workout-session-sheet__copy p { color: var(--text-soft); font-size: 11.5px; line-height: 1.55; }
  .workout-session-sheet__progress {
    display: grid;
    gap: 9px;
    padding: 13px 14px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
    background: var(--app-bg);
  }
  .workout-session-sheet__progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .workout-session-sheet__progress-copy strong { color: var(--text); font-size: 12px; }
  .workout-session-sheet__progress-copy small { color: var(--text-soft); font-size: 10.5px; }
  .workout-session-sheet__progress-track {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-circle);
    background: color-mix(in srgb, var(--text-soft) 12%, transparent);
  }
  .workout-session-sheet__progress-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width var(--duration-slow) var(--ease);
  }
  .workout-session-sheet.is-complete .workout-session-sheet__progress-track > span { background: var(--success); }
  .workout-session-sheet__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
  }
  .workout-session-stat {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
    background: var(--app-bg);
  }
  .workout-session-stat__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--accent);
  }
  .workout-session-stat__icon .icon { font-size: 17px; }
  .workout-session-stat > span:last-child { display: grid; min-width: 0; gap: 2px; }
  .workout-session-stat small { color: var(--text-soft); font-size: 9.5px; white-space: nowrap; }
  .workout-session-stat strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .workout-session-sheet__current {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: var(--separator-width) solid color-mix(in srgb, var(--accent) 18%, var(--separator-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 5%, var(--sidebar-bg));
  }
  .workout-session-sheet__current-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
  }
  .workout-session-sheet__current-icon .icon { font-size: 19px; }
  .workout-session-sheet__current-copy { display: grid; min-width: 0; gap: 2px; }
  .workout-session-sheet__current-copy small { color: var(--text-soft); font-size: 9.5px; }
  .workout-session-sheet__current-copy strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .workout-session-sheet__current-copy span { color: var(--text-soft); font-size: 10.5px; }
  .workout-session-sheet__finish-note {
    padding: 11px 13px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text-soft) 7%, transparent);
    color: var(--text-soft);
    font-size: 10.5px;
    line-height: 1.55;
  }
  .workout-session-sheet__achievements {
    display: grid;
    overflow: hidden;
    border: var(--separator-width) solid color-mix(in srgb, var(--accent) 22%, var(--separator-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 4%, var(--sidebar-bg));
  }
  .workout-session-sheet__achievements[hidden] { display: none !important; }
  .workout-session-sheet__achievements-header {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px;
    border-bottom: var(--separator-width) solid color-mix(in srgb, var(--accent) 16%, var(--separator-color));
  }
  .workout-session-sheet__achievements-header span { color: var(--accent); font-size: 10px; font-weight: 700; }
  .workout-session-sheet__achievements-header strong { color: var(--text); font-size: 11.5px; }
  .workout-session-sheet__achievements-list {
    display: grid;
    grid-template-columns: repeat(var(--achievement-columns, 3), minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }
  .workout-session-achievement {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: var(--separator-width) solid color-mix(in srgb, var(--accent) 18%, var(--separator-color));
    border-radius: 12px;
    background: var(--sidebar-bg);
  }
  .workout-session-achievement__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: var(--separator-width) solid color-mix(in srgb, var(--accent) 20%, var(--separator-color));
    border-radius: 10px;
    background: var(--sidebar-bg);
    color: var(--accent);
  }
  .workout-session-achievement__copy { display: grid; min-width: 0; gap: 1px; }
  .workout-session-achievement__copy small { color: var(--accent); font-size: 8.5px; font-weight: 700; }
  .workout-session-achievement__copy strong,
  .workout-session-achievement__copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workout-session-achievement__copy strong { color: var(--text); font-size: 10.5px; }
  .workout-session-achievement__copy > span { color: var(--text-soft); font-size: 9.5px; }
  .workout-session-sheet__achievements-more {
    padding: 8px 12px;
    border-top: var(--separator-width) solid var(--separator-color);
    color: var(--text-soft);
    font-size: 9.5px;
    text-align: center;
  }
  .workout-session-sheet__message { min-height: 18px; color: var(--danger); font-size: 11.5px; }
  .workout-session-sheet__message:empty { display: none; }
  .workout-session-sheet__actions { display: flex; width: 100%; align-items: center; gap: 8px; }
  .workout-session-sheet__delete-button { flex: 0 0 var(--bottom-sheet-action-size); }
  .workout-session-sheet__finish-button {
    position: relative;
    min-width: 0;
    flex: 1;
    min-height: var(--bottom-sheet-action-size);
    gap: 8px;
    padding-inline: 18px;
  }
  .workout-session-sheet__finish-button .icon { font-size: 20px; }
  .workout-session-sheet__finish-button.is-loading .icon,
  .workout-session-sheet__finish-button.is-loading span { opacity: 0; }
  .workout-session-sheet__finish-button.is-loading::after {
    position: absolute;
    width: 18px;
    height: 18px;
    border: var(--separator-width) solid color-mix(in srgb, var(--on-accent) 30%, transparent);
    border-top-color: var(--on-accent);
    border-radius: var(--radius-circle);
    content: "";
    animation: bottom-sheet-action-spin .72s linear infinite;
  }
  .workout-session-sheet__finish-button--secondary.is-loading::after {
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    border-top-color: var(--accent);
  }
  .workout-session-sheet__finish-button[hidden] { display: none !important; }
  .workout-session__message { min-height: 18px; padding: 8px 2px 0; color: var(--text-soft); font-size: 11px; }
  .workout-session__message:empty { display: none; }
  .workout-session__message.is-error { color: var(--danger); }

  .bottom-sheet.is-workout-create,
  .bottom-sheet.is-workout-picker,
  .bottom-sheet.is-workout-session-finish {
    width: min(880px, calc(100% - var(--secondary-column-width) - 48px));
    height: min(86%, 760px);
  }

  .bottom-sheet.is-workout-delete {
    width: min(880px, calc(100% - var(--secondary-column-width) - 48px));
  }

  .bottom-sheet.is-compact-confirmation {
    grid-template-rows: 64px auto auto;
    height: auto;
    max-height: min(82%, 620px);
  }

  .bottom-sheet.is-workout-create .bottom-sheet__body,
  .bottom-sheet.is-workout-picker .bottom-sheet__body,
  .bottom-sheet.is-workout-delete .bottom-sheet__body,
  .bottom-sheet.is-workout-session-finish .bottom-sheet__body,
  .bottom-sheet.is-workout-session-overview .bottom-sheet__body,
  .bottom-sheet.is-workout-session-delete .bottom-sheet__body { background: var(--app-bg); }

  .workout-create-form,
  .workout-program-delete {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 20px;
  }

  .workout-create-form { min-height: 100%; }

  .workout-create-form__section,
  .workout-program-delete {
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 18px;
    background: var(--sidebar-bg);
  }

  .workout-create-form__section { display: grid; gap: 18px; padding: 20px; }
  .workout-create-form__section--exercises { min-height: 0; }
  .workout-create-form__heading { display: flex; align-items: center; gap: 12px; }
  .workout-create-form__icon,
  .workout-program-delete__icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border-radius: 15px;
    background: var(--selected-bg);
    color: var(--accent);
  }
  .workout-create-form__heading > span:last-child { display: grid; min-width: 0; gap: 2px; }
  .workout-create-form__heading strong { font-size: 15px; }
  .workout-create-form__heading small { color: var(--text-soft); font-size: 11.5px; }
  .workout-create-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .workout-create-form__picker-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .workout-create-form__picker-heading > span:first-child { display: grid; min-width: 0; gap: 2px; }
  .workout-create-form__picker-heading strong { font-size: 15px; }
  .workout-create-form__picker-heading small { color: var(--text-soft); font-size: 11.5px; }
  .workout-create-form__selection-count {
    display: grid;
    min-width: 92px;
    min-height: 34px;
    place-items: center;
    padding: 0 10px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 11px;
    background: var(--app-bg);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }
  .workout-create-form__actions,
  .workout-exercise-picker__actions,
  .workout-program-delete__actions { display: flex; width: 100%; align-items: center; justify-content: flex-end; gap: 8px; }

  .workout-exercise-picker {
    display: grid;
    min-height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px;
  }

  .workout-exercise-picker--embedded {
    min-height: 0;
    padding: 0;
  }

  .workout-exercise-picker--embedded .workout-exercise-picker__list {
    max-height: none;
    overflow: visible;
  }

  .workout-exercise-picker__search {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 13px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 13px;
    background: var(--sidebar-bg);
    color: var(--icon);
  }

  .workout-exercise-picker__search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
  }

  .workout-exercise-picker__list {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 16px;
    overflow: auto;
    padding: 1px;
  }

  .workout-exercise-picker__item {
    min-width: 0;
    text-align: right;
  }

  .workout-exercise-picker__item[hidden] { display: none; }
  .workout-exercise-picker__item.is-selected {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--separator-color));
    background: var(--sidebar-bg);
  }
  .workout-exercise-picker__item.is-unavailable { opacity: .44; }
  .workout-exercise-picker__item.is-unavailable .workout-exercise-picker__add { cursor: not-allowed; }

  .workout-exercise-picker__copy {
    display: grid;
    min-width: 0;
    width: 100%;
    gap: 4px;
  }

  .workout-exercise-picker__copy h3 {
    overflow: hidden;
    padding-inline-end: 50px;
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workout-exercise-picker__copy .exercise-card__compact-meta {
    display: none;
  }

  .workout-exercise-picker__add {
    color: var(--accent);
    border: var(--separator-width) solid var(--separator-color);
    background: var(--exercise-surface-bg);
  }

  .workout-exercise-picker__item.is-selected .workout-exercise-picker__add {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
  }

  .workout-exercise-picker__empty {
    grid-column: 1 / -1;
    padding: 32px;
    color: var(--text-soft);
    text-align: center;
  }

  .workout-program-delete {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: auto;
    margin: 20px;
    padding: 24px;
  }
  .workout-program-delete__icon { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
  .workout-program-delete__copy { display: grid; align-content: center; gap: 5px; }
  .workout-program-delete__copy strong { font-size: 16px; }
  .workout-program-delete__copy p { color: var(--text-soft); font-size: 12.5px; }
  .workout-program-delete__message { grid-column: 1 / -1; }

  @media (max-width: 820px) {
    .workout-program-overview,
    .workout-program-editor { width: 100%; }


    .workout-program-overview__hero { grid-template-columns: 52px minmax(0, 1fr); padding: 17px; }
    .workout-program-overview__hero-icon { width: 52px; height: 52px; border-radius: 15px; }
    .workout-program-overview__hero h2 { font-size: 17px; }
    .workout-program-overview__hero p:last-child { font-size: 12px; }
    .workout-program-overview__create { grid-column: 1 / -1; width: 100%; }
    .workout-program-overview__grid { grid-template-columns: 1fr; }

    .workout-program-form { gap: 12px; }
    .workout-program-form__section { gap: 15px; padding: 15px; border-radius: 16px; }
    .workout-program-exercises { gap: 12px; }
    .workout-program-exercise-list { gap: 14px; }
    .workout-program-form__section-heading { align-items: flex-start; }
    .workout-program-status { margin-inline-start: auto; }
    .workout-program-form__identity-grid { grid-template-columns: 1fr; }
    .workout-program-form__exercise-heading { align-items: flex-start; }
    .workout-program-form__exercise-heading > span:first-child { padding-top: 4px; }

    .workout-program-exercise__header { min-height: 68px; gap: 10px; padding: 12px; }
    .workout-program-exercise__order { gap: 4px; }
    .workout-program-exercise__order .icon-action-button { width: 34px; height: 34px; flex-basis: 34px; }
    .workout-program-exercise__content { grid-template-columns: 1fr; gap: 0; padding: 0; }
    .workout-program-sets__rows { gap: 0; }

    .workspace.has-workout-session-actions .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) auto;
    }
    .workspace.has-workout-session-actions .workout-session-header-actions,
    .workspace.has-workout-history-actions .workout-history-header-actions {
      grid-column: 3;
      gap: var(--header-action-gap);
    }
    .workspace.has-workout-history-actions .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) auto;
    }

    .workspace.has-active-workout-return {
      grid-template-rows:
        calc(var(--shell-header-height) + env(safe-area-inset-top))
        46px
        minmax(0, 1fr);
    }

    .workspace.has-active-workout-return .content-column {
      padding-top: 0;
    }

    .active-workout-return,
    .workspace.has-secondary .active-workout-return {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      padding:
        5px
        max(15px, env(safe-area-inset-right))
        8px
        max(15px, env(safe-area-inset-left));
    }

    .active-workout-return__progress {
      right: max(15px, env(safe-area-inset-right));
      left: max(15px, env(safe-area-inset-left));
    }

    .content-column__content:has(.workout-session) {
      min-width: 0;
      place-items: start stretch;
      overflow-x: hidden;
      padding: 0;
    }

    .workout-session {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }

    .workout-session--history.is-history-editing .workout-history-edit-panel {
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 10px;
      margin: 0 15px 10px;
      padding: 12px 15px;
      border-radius: 14px;
    }

    .workout-history-edit-panel__icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
    }

    .workout-history-date-control {
      grid-column: 1 / -1;
    }

    .workout-history-date-trigger {
      min-height: 46px;
      font-size: 16px;
    }

    .workout-session__empty {
      min-height: 260px;
      margin-inline: 15px;
      padding: 24px 18px;
    }

    .workout-session__exercise-strip { display: block; }

    .workout-session__mobile-exercises {
      display: flex;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 10px 15px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      overscroll-behavior-inline: contain;
      touch-action: pan-x;
    }
    .workout-session__mobile-exercises::-webkit-scrollbar { display: none; }
    .workout-session-mobile-item {
      display: inline-flex;
      min-height: 38px;
      flex: 0 0 auto;
      align-items: center;
      gap: 7px;
      padding: 0 11px;
      border: var(--separator-width) solid var(--separator-color);
      border-radius: var(--radius-circle);
      background: var(--sidebar-bg);
      color: var(--text-soft);
      font-size: 10.5px;
      white-space: nowrap;
    }
    .workout-session-mobile-item.is-active {
      border-color: color-mix(in srgb, var(--accent) 22%, var(--separator-color));
      background: var(--selected-bg);
      color: var(--accent);
    }
    .workout-session-exercise {
      margin-inline: 15px;
      border: var(--separator-width) solid var(--separator-color);
      border-radius: 16px;
      background: var(--sidebar-bg);
    }
    .workout-session-exercise__desktop-header { display: none; }
    .workout-session-exercise__content {
      grid-template-columns: 1fr;
      gap: 0;
      padding: 0;
    }
    .workout-session-media-card {
      overflow: hidden;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .workout-session-media-card__header {
      display: grid;
      min-height: 68px;
      grid-template-columns: minmax(0, 1fr) 84px;
      align-items: stretch;
      gap: 0;
      padding: 0;
      border-bottom: var(--separator-width) solid var(--separator-color);
    }
    .workout-session-media-card__copy {
      display: grid;
      min-width: 0;
      align-content: center;
      gap: 2px;
      padding: 10px 12px;
    }
    .workout-session-media-card__copy strong,
    .workout-session-media-card__copy small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workout-session-media-card__copy strong { font-size: 15px; }
    .workout-session-media-card__copy small { color: var(--text-soft); font-size: 10.5px; }
    .workout-session-media-card__divider { display: none; }
    .workout-session-media-card__media.exercise-card__media {
      border: 0;
      border-radius: 0;
    }
    .workout-session-rest--mobile {
      grid-area: auto;
      width: 100%;
      min-width: 0;
      height: 100%;
      align-self: stretch;
      border-inline-start: var(--separator-width) solid var(--separator-color);
      background: var(--sidebar-bg);
    }
    .workout-session-rest--mobile .workout-session-rest__display { grid-template-rows: 21px minmax(0, 1fr); }
    .workout-session-sets__table {
      border: 0;
      border-top: var(--separator-width) solid var(--separator-color);
      border-radius: 0;
      background: var(--sidebar-bg);
    }
    .workout-session-sets__head,
    .workout-session-set {
      grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 40px;
      gap: 10px;
    }
    .workout-session-sets__head {
      min-height: 40px;
      padding: 0 12px;
      background: var(--selected-bg);
      font-size: 9.5px;
    }
    .workout-session-sets__head span:nth-child(2) { display: none; }
    .workout-session-set {
      min-height: 64px;
      padding: 12px;
      background: var(--app-bg);
    }
    .workout-session-set:last-child { border-bottom: 0; }
    .workout-session-set__previous { display: none; }
    .workout-session-set__number,
    .workout-session-stepper,
    .workout-session-set__complete,
    .workout-session-readonly-value,
    .workout-session-set__history-state { background: var(--workout-session-field-bg); }
    .workout-session-set__number,
    .workout-session-set__complete,
    .workout-session-set__history-state { font-size: 11px; }
    .workout-session-readonly-value strong { font-size: 16px; font-weight: 400; }
    /* 16px prevents iOS from zooming/panning the entire viewport on focus. */
    .workout-session-stepper input { font-size: 16px; }
    .workout-session-stepper { grid-template-columns: 32px minmax(0, 1fr) 32px; }
    .workout-session-stepper button { font-size: 16px; }
    .workout-session-exercise__footer {
      position: static;
      z-index: auto;
      right: auto;
      bottom: auto;
      left: auto;
      grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
      gap: 0;
      padding: 0;
      border-top: var(--separator-width) solid var(--separator-color);
      background: var(--sidebar-bg);
    }
    .workout-session-exercise__next,
    .workout-session-exercise__previous {
      min-height: 58px;
      padding: 0 10px;
      font-size: 10.5px;
    }
    .workout-session-exercise__position {
      min-height: 58px;
      padding: 0 5px;
    }
    .workout-session-exercise__position small { font-size: 8.5px; }
    .workout-session-exercise__position strong { font-size: 10.5px; }
    .workout-session-sheet { gap: 14px; margin: 14px; padding: 16px; }
    .workout-session-sheet__hero { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
    .workout-session-sheet__icon { width: 48px; height: 48px; border-radius: 14px; }
    .workout-session-sheet__icon .icon { font-size: 22px; }
    .workout-session-sheet__copy strong { font-size: 15.5px; }
    .workout-session-sheet__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .workout-session-sheet__achievements-list { grid-template-columns: 1fr; }
    .workout-session-stat { min-height: 62px; padding: 10px; }
    .workout-session-sheet__progress-copy { align-items: flex-start; }
    .workout-session-sheet__finish-button { min-height: var(--bottom-sheet-action-size); padding-inline: 14px; font-size: 12px; }

    .bottom-sheet.is-workout-create,
    .bottom-sheet.is-workout-picker,
    .bottom-sheet.is-workout-delete,
    .bottom-sheet.is-workout-exercise-delete,
    .bottom-sheet.is-compact-confirmation {
      width: 100%;
      height: auto;
      max-height: calc(var(--viewport-height) - var(--shell-header-height) - env(safe-area-inset-top) - 8px);
    }

    .bottom-sheet.is-workout-session-finish {
      width: 100%;
      height: min(760px, calc(var(--viewport-height) - var(--shell-header-height) - env(safe-area-inset-top) - 8px));
      max-height: calc(var(--viewport-height) - var(--shell-header-height) - env(safe-area-inset-top) - 8px);
      grid-template-rows: 64px minmax(0, 1fr) auto;
    }

    .bottom-sheet.is-workout-session-finish .bottom-sheet__body {
      min-height: 0;
      overflow: auto;
    }

    .bottom-sheet.is-workout-session-finish .bottom-sheet__footer {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
    }
    .workout-create-form { gap: 12px; padding: 14px; }
    .workout-create-form__section { padding: 16px; }
    .workout-create-form__grid { grid-template-columns: 1fr; }
    .workout-create-form__picker-heading { align-items: flex-start; }
    .workout-create-form__selection-count { min-width: 78px; }
    .workout-exercise-picker { padding: 12px; }
    .workout-exercise-picker--embedded { padding: 0; }
    .workout-exercise-picker__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .workout-program-delete { margin: 14px; padding: 18px; }
  }

  @media (max-width: 430px) {
    .workout-program-exercise__header { align-items: flex-start; }
    .workout-program-exercise__order { gap: 3px; }
    .workout-program-exercise__order .icon-action-button { width: 32px; height: 32px; flex-basis: 32px; }
    .workout-program-rest__options { gap: 3px; padding: 3px; }
    .workout-program-rest__option span { min-height: 36px; font-size: 10.5px; }
    .workout-program-sets__head,
    .workout-session-sets__head {
      display: grid;
      height: 30px;
      min-height: 30px;
    }
    .workout-program-editor { --workout-set-control-size: 38px; }
    .workout-program-set,
    .workout-program-sets__head { gap: 6px; }
    .workout-session__mobile-exercises { padding-inline: 15px; }
    .workout-session-set { gap: 8px; padding: 11px 10px; }
    .workout-session-media-card__header { grid-template-columns: minmax(0, 1fr) 78px; }
    .workout-session-media-card__copy { padding: 9px 10px; }
  }
}


@layer progress {
  .workout-history-overview,
  .progress-overview,
  .exercise-progress,
  .workout-session--history {
    width: min(100%, var(--primary-page-max-width));
    max-width: 100%;
    align-self: start;
    justify-self: center;
  }
  .workout-history-overview__surface,
  .progress-overview__surface,
  .exercise-progress__surface {
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--primary-surface-radius);
    background: var(--sidebar-bg);
  }

  .workout-history-overview__intro,
  .progress-overview__intro {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 24px;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }
  .workout-history-overview__intro > div { display: grid; min-width: 0; gap: 3px; }
  .workout-history-overview__intro span { color: var(--accent); font-size: 10.5px; font-weight: 650; }
  .workout-history-overview__intro h2 { color: var(--text); font-size: 21px; }
  .workout-history-overview__intro p { max-width: 620px; color: var(--text-soft); font-size: 12px; line-height: 1.6; }

  @media (max-width: 820px) {
    .workout-history-overview { width: 100%; }
    .workout-history-overview__intro { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px; }
    .workout-history-overview__intro h2 { font-size: 16px; }
  }

  .secondary-column__content:has(.progress-directory) {
    place-items: start stretch;
    padding: 0;
  }

  .progress-directory {
    display: grid;
    width: 100%;
    align-content: start;
  }

  .progress-directory__empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 44px 18px;
    color: var(--text-soft);
    text-align: center;
  }

  .progress-directory__empty > span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 16px;
    background: var(--sidebar-bg);
    color: var(--accent);
  }

  .progress-directory__empty strong { color: var(--text); font-size: 15px; }
  .progress-directory__empty p { max-width: 250px; font-size: 12px; }

  .progress-exercise-list {
    display: grid;
    align-content: start;
    gap: var(--secondary-list-gap);
    padding: 12px var(--workspace-column-padding) 18px;
  }

  .progress-exercise-list__empty-search {
    padding: 28px 16px;
    color: var(--text-soft);
    font-size: 12px;
    text-align: center;
  }

  .progress-exercise-list-item {
    min-width: 0;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-item-radius);
    overflow: hidden;
    background: var(--sidebar-bg);
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }

  .progress-exercise-list-item.is-active {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--separator-color));
    background: var(--selected-bg);
  }

  .progress-exercise-list-item__link {
    display: grid;
    min-height: var(--secondary-list-item-min-height);
    grid-template-columns: var(--secondary-list-media-size) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--secondary-list-item-gap);
    padding: var(--secondary-list-item-padding);
  }

  .progress-exercise-list-item__media {
    display: grid;
    width: var(--secondary-list-media-size);
    height: var(--secondary-list-media-size);
    place-items: center;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-media-radius);
    background: var(--sidebar-bg);
    color: var(--icon);
  }

  .progress-exercise-list-item__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
  }

  .progress-exercise-list-item__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .progress-exercise-list-item__copy strong,
  .progress-exercise-list-item__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .progress-exercise-list-item__copy strong { font-size: 14px; font-weight: 680; }
  .progress-exercise-list-item__copy small { color: var(--text-soft); font-size: 11.5px; }

  .progress-trend-badge {
    display: inline-flex;
    min-width: 58px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 10px;
    background: var(--sidebar-bg);
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
    direction: ltr;
  }

  .progress-trend-badge .icon { width: 15px; height: 15px; font-size: 15px; }
  .progress-trend-badge--up { color: var(--success); }
  .progress-trend-badge--down { color: var(--danger); }
  .progress-trend-badge--stable { color: var(--text-soft); }
  .progress-trend-badge--new { color: var(--accent); }



  .progress-overview__intro > div { display: grid; gap: 4px; }
  .progress-overview__intro span { color: var(--accent); font-size: 12px; font-weight: 700; }
  .progress-overview__intro h2 { font-size: 21px; font-weight: 730; }
  .progress-overview__intro p { max-width: 680px; color: var(--text-soft); }

  .progress-overview__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
  }
  .progress-overview__tabs button {
    min-height: 42px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
  }
  .progress-overview__tabs button:first-child { border-inline-start: 0; }
  .progress-overview__tabs button[aria-selected="true"] { background: var(--sidebar-bg); color: var(--accent); }
  .progress-overview__panel[hidden] { display: none !important; }

  .progress-achievements { display: grid; }
  .progress-achievements__header { display: grid; gap: 2px; padding: 20px 24px 14px; }
  .progress-achievements__header span { color: var(--text-soft); font-size: 11px; }
  .progress-achievements__header h3 { color: var(--text); font-size: 17px; font-weight: 710; }
  .progress-achievements__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .progress-achievement-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 76px;
    padding: 12px 16px;
    border-top: var(--separator-width) solid var(--separator-color);
    border-inline-start: var(--separator-width) solid var(--separator-color);
    color: inherit;
  }
  .progress-achievement-card.achievement-layout__cell--row-start { border-inline-start: 0; }
  .progress-achievement-card__icon { width: 42px; height: 42px; border-radius: 12px; }
  .progress-achievement-card__copy { display: grid; min-width: 0; gap: 1px; }
  .progress-achievement-card__copy small { color: var(--accent); font-size: 9px; font-weight: 700; }
  .progress-achievement-card__copy strong,
  .progress-achievement-card__copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .progress-achievement-card__copy strong { color: var(--text); font-size: 12px; }
  .progress-achievement-card__copy > span { color: var(--text-soft); font-size: 10.5px; }
  .progress-achievement-card time { color: var(--text-soft); font-size: 9.5px; direction: ltr; }
  .progress-achievements__empty {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 24px;
    border-top: var(--separator-width) solid var(--separator-color);
  }
  .progress-achievements__empty > span { width: 48px; height: 48px; border-radius: 14px; }
  .progress-achievements__empty > div { display: grid; gap: 3px; }
  .progress-achievements__empty strong { color: var(--text); font-size: 13px; }
  .progress-achievements__empty p { color: var(--text-soft); font-size: 11px; line-height: 1.55; }
  .progress-achievements + .primary-surface-note { border-top: var(--separator-width) solid var(--separator-color); }


  .exercise-progress__chart-section {
    display: grid;
    gap: 0;
    padding: 0;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .exercise-progress__chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 12px;
  }

  .exercise-progress__chart-heading {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .exercise-progress__chart-heading > span:first-child { color: var(--text-soft); font-size: 11.5px; }
  .exercise-progress__chart-heading h2 { font-size: 18px; font-weight: 710; }

  .exercise-progress__library-link,
  .exercise-progress__library-status {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    color: var(--text-soft);
    font-size: 10.5px;
  }

  .exercise-progress__library-link { color: var(--accent); }
  .exercise-progress__library-link .icon,
  .exercise-progress__library-status .icon { flex: 0 0 auto; }
  .exercise-progress__library-link span,
  .exercise-progress__library-status span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .exercise-progress__library-status { color: var(--danger); }

  .exercise-progress__chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 24px 18px;
  }

  .progress-segmented,
  .progress-range {
    display: inline-grid;
    grid-auto-flow: column;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    background: var(--app-bg);
  }

  .progress-segmented button,
  .progress-range button {
    min-height: 36px;
    padding: 0 14px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 650;
  }

  .progress-segmented button:first-child,
  .progress-range button:first-child { border-inline-start: 0; }
  .progress-segmented button[aria-pressed="true"],
  .progress-range button[aria-pressed="true"] { background: var(--sidebar-bg); color: var(--accent); }
  .progress-segmented button:disabled { cursor: not-allowed; opacity: .38; }

  .progress-chart {
    display: grid;
    grid-template-areas:
      "canvas selection"
      "caption selection";
    grid-template-columns: minmax(0, 1fr) 190px;
    min-height: 318px;
    overflow: hidden;
    border-top: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
  }

  .progress-chart__canvas {
    grid-area: canvas;
    min-width: 0;
    min-height: 288px;
    padding: 0;
    overflow: hidden;
    direction: ltr;
  }

  .progress-chart__canvas svg { width: 100%; height: 288px; overflow: visible; color: var(--accent); direction: ltr; }
  .progress-chart__grid { stroke: var(--separator-color); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .progress-chart__axis-label { fill: var(--text-soft); font-family: var(--font); font-size: 10px; direction: ltr; unicode-bidi: isolate; }
  .progress-chart__axis-label--y {
    paint-order: stroke;
    stroke: var(--app-bg);
    stroke-width: 5px;
    stroke-linejoin: round;
  }
  .progress-chart__area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
  .progress-chart__line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .progress-chart__point circle { fill: var(--sidebar-bg); stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .progress-chart__point.is-active circle { fill: var(--accent); stroke: var(--on-accent); }
  .progress-chart__point:focus { outline: none; }
  .progress-chart__point:focus circle { stroke-width: 4; }
  .progress-chart__empty { display: grid; min-height: 286px; place-items: center; color: var(--text-soft); text-align: center; }

  .progress-chart__selection {
    display: grid;
    grid-area: selection;
    min-width: 0;
    align-content: center;
    gap: 5px;
    padding: 24px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .progress-chart__selection span,
  .progress-chart__selection small { color: var(--text-soft); }
  .progress-chart__selection span { font-size: 11.5px; }
  .progress-chart__selection strong { font-size: 19px; font-weight: 720; }
  .progress-chart__selection small { font-size: 10.5px; }

  .progress-chart__caption {
    display: flex;
    min-height: 46px;
    grid-area: caption;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-top: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
    color: var(--text-soft);
  }

  .progress-chart__caption .icon { flex: 0 0 auto; color: var(--accent); }
  .progress-chart__caption p { font-size: 11px; line-height: 1.35; }

  .exercise-progress__insight {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .exercise-progress__insight > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
    background: var(--app-bg);
    color: var(--accent);
  }

  .exercise-progress__insight > div { display: grid; gap: 3px; }
  .exercise-progress__insight strong { font-size: 14px; }
  .exercise-progress__insight p { color: var(--text-soft); font-size: 12px; }

  .exercise-progress__records { display: grid; }
  .exercise-progress__records-header {
    display: grid;
    gap: 2px;
    padding: 20px 24px 14px;
  }
  .exercise-progress__records-header span { color: var(--text-soft); font-size: 11.5px; }
  .exercise-progress__records-header h2 { color: var(--text); font-size: 17px; font-weight: 710; }
  .exercise-progress__records-grid { border-top: var(--separator-width) solid var(--separator-color); }
  .exercise-progress__achievement-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
  }
  .exercise-progress__achievement-strip > span {
    display: grid;
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 8px 11px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
  }
  .exercise-progress__achievement-strip > span:first-child { border-inline-start: 0; }
  .exercise-progress__achievement-strip > span > .icon { color: var(--accent); font-size: 18px; }
  .exercise-progress__achievement-strip > span > span { display: grid; min-width: 0; gap: 1px; }
  .exercise-progress__achievement-strip small { color: var(--text-soft); font-size: 8.5px; }
  .exercise-progress__achievement-strip strong { overflow: hidden; color: var(--text); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
  .exercise-progress__achievement-strip time { color: var(--text-soft); font-size: 8.5px; direction: ltr; }

  .exercise-progress__recent > header {
    display: grid;
    gap: 2px;
    padding: 20px 24px 14px;
  }

  .exercise-progress__recent > header span { color: var(--text-soft); font-size: 11.5px; }
  .exercise-progress__recent > header h2 { font-size: 17px; font-weight: 710; }

  .exercise-progress__recent-table { display: grid; }
  .exercise-progress__recent-head,
  .exercise-progress__recent-row {
    display: grid;
    grid-template-columns: .9fr 1.15fr 1.35fr .55fr .72fr .8fr .78fr;
    align-items: center;
  }

  .exercise-progress__recent-head {
    min-height: 38px;
    border-top: var(--separator-width) solid var(--separator-color);
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 650;
  }

  .exercise-progress__recent-head span,
  .exercise-progress__recent-row > * { min-width: 0; padding: 0 14px; }
  .exercise-progress__recent-head span:nth-child(n+4),
  .exercise-progress__recent-row > *:nth-child(n+4) { text-align: center; }

  .exercise-progress__recent-entry {
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .exercise-progress__recent-entry:last-child { border-bottom: 0; }
  .exercise-progress__recent-entry > summary { list-style: none; }
  .exercise-progress__recent-entry > summary::-webkit-details-marker { display: none; }

  .exercise-progress__recent-row {
    width: 100%;
    min-height: 56px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-align: right;
    cursor: pointer;
  }

  .exercise-progress__recent-row strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
  .exercise-progress__recent-row > span:not(.exercise-progress__change) { overflow: hidden; color: var(--text-soft); text-overflow: ellipsis; white-space: nowrap; }

  .exercise-progress__change {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--text-soft);
    white-space: nowrap;
  }

  .exercise-progress__change b { font-size: 11.5px; font-weight: 700; }
  .exercise-progress__change--up { color: var(--success); }
  .exercise-progress__change--down { color: var(--danger); }
  .exercise-progress__change--new { color: var(--accent); }
  .exercise-progress__recent-caret { color: var(--icon); transition: transform var(--duration) var(--ease); }
  .exercise-progress__recent-entry[open] .exercise-progress__recent-caret { transform: rotate(180deg); }

  .exercise-progress__recent-detail {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr);
    gap: 18px;
    padding: 14px 18px;
    border-top: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
  }

  .exercise-progress__recent-detail-summary,
  .exercise-progress__recent-sets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    background: var(--sidebar-bg);
    overflow: hidden;
  }

  .exercise-progress__recent-detail-summary > span,
  .exercise-progress__recent-sets > span {
    display: grid;
    min-height: 48px;
    place-content: center;
    gap: 2px;
    padding: 7px 10px;
    border-inline-end: var(--separator-width) solid var(--separator-color);
    text-align: center;
  }

  .exercise-progress__recent-detail-summary > span:last-child,
  .exercise-progress__recent-sets > span:last-child { border-inline-end: 0; }
  .exercise-progress__recent-detail small { color: var(--text-soft); font-size: 10px; }
  .exercise-progress__recent-detail strong { font-size: 11.5px; }

  @media (max-width: 1100px) and (min-width: 821px) {
    .progress-chart { grid-template-columns: minmax(0, 1fr) 160px; }
    .progress-achievement-card.achievement-layout__cell {
      grid-column: span 3;
      border-inline-start: var(--separator-width) solid var(--separator-color);
    }
    .progress-achievement-card.achievement-layout__cell:nth-child(odd) { border-inline-start: 0; }
    .progress-achievements__list.achievement-layout--odd > .achievement-layout__cell:last-child { grid-column: span 6; }
  }

  @media (max-width: 820px) {
    .progress-overview,
    .exercise-progress { width: 100%; }

    .progress-overview__surface,
    .exercise-progress__surface { border-radius: 16px; }

    .progress-overview__intro { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; padding: 20px 16px; }
    .progress-overview__intro h2 { font-size: 19px; }
    .progress-overview__intro p { font-size: 12px; }


    .exercise-progress__chart-header { padding: 17px 15px 11px; }
    .exercise-progress__chart-heading h2 { font-size: 17px; }
    .exercise-progress__chart-toolbar {
      display: grid;
      width: 100%;
      grid-template-columns: minmax(0, 1fr);
      gap: 9px;
      padding: 0 15px 14px;
      box-sizing: border-box;
    }
    .progress-range,
    .progress-segmented {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-flow: row;
      justify-self: stretch;
    }
    .progress-range button,
    .progress-segmented button {
      width: 100%;
      min-width: 0;
      padding: 0 5px;
    }

    .progress-chart {
      grid-template-areas:
        "canvas"
        "caption"
        "selection";
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .progress-chart__canvas { min-height: 228px; }
    .progress-chart__canvas svg { height: 220px; }
    .progress-chart__selection {
      min-height: 70px;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 2px 12px;
      padding: 12px 15px;
      border-inline-start: 0;
      border-top: var(--separator-width) solid var(--separator-color);
    }
    .progress-chart__selection strong { grid-row: 1 / span 2; grid-column: 2; font-size: 17px; text-align: left; }
    .progress-chart__selection small { grid-column: 1; }
    .progress-chart__caption { min-height: 44px; padding: 9px 15px; }

    .exercise-progress__insight { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 16px 15px; }
    .exercise-progress__insight > span { width: 42px; height: 42px; border-radius: 12px; }
    .exercise-progress__recent > header { padding: 17px 15px 12px; }
    .exercise-progress__recent-head,
    .exercise-progress__recent-row { grid-template-columns: .9fr 1.25fr .78fr .82fr; }
    .exercise-progress__recent-head span:nth-child(2),
    .exercise-progress__recent-head span:nth-child(4),
    .exercise-progress__recent-head span:nth-child(5),
    .exercise-progress__recent-row > *:nth-child(2),
    .exercise-progress__recent-row > *:nth-child(4),
    .exercise-progress__recent-row > *:nth-child(5) { display: none; }
    .exercise-progress__recent-head span,
    .exercise-progress__recent-row > * { padding: 0 8px; }
    .exercise-progress__recent-head span:nth-child(n+3),
    .exercise-progress__recent-row > *:nth-child(n+3) { text-align: center; }
    .exercise-progress__recent-row { min-height: 58px; }
    .exercise-progress__change { gap: 3px; }
    .exercise-progress__change b { font-size: 10.5px; }
    .exercise-progress__recent-caret { font-size: 13px; }
    .exercise-progress__recent-detail {
      grid-template-columns: 1fr;
      gap: 9px;
      padding: 12px;
    }
    .exercise-progress__recent-detail-summary,
    .exercise-progress__recent-sets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .exercise-progress__recent-sets { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
    .exercise-progress__recent-sets > span:nth-child(3n) { border-inline-end: 0; }
    .progress-overview__tabs button { min-height: 40px; font-size: 11.5px; }
    .progress-achievements__header { padding: 17px 15px 12px; }
    .progress-achievements__list { grid-template-columns: 1fr; }
    .progress-achievement-card.achievement-layout__cell { grid-column: 1 / -1; border-inline-start: 0; padding: 11px 14px; }
    .progress-achievements__empty { grid-template-columns: 42px minmax(0, 1fr); padding: 18px 15px; }
    .progress-achievements__empty > span { width: 42px; height: 42px; border-radius: 12px; }
    .exercise-progress__records-header { padding: 17px 15px 12px; }
    .exercise-progress__achievement-strip { grid-template-columns: 1fr; }
    .exercise-progress__achievement-strip > span { border-inline-start: 0; border-top: var(--separator-width) solid var(--separator-color); }
    .exercise-progress__achievement-strip > span:first-child { border-top: 0; }
  }

}


@layer components {
  .system-icon-tile {
    display: grid;
    place-items: center;
    border: var(--separator-width) solid var(--system-icon-tile-border);
    background: var(--system-icon-tile-bg);
    color: var(--accent);
  }

  .system-icon-tile--accent {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--separator-color));
    background: color-mix(in srgb, var(--accent) 8%, var(--sidebar-bg));
  }

  .system-icon-tile .icon,
  .system-icon-tile .icon::before {
    display: grid;
    place-items: center;
    line-height: 1;
  }

  .primary-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .primary-hero-icon .icon {
    width: 31px;
    height: 31px;
    font-size: 31px;
  }

  .primary-surface-note {
    display: flex;
    min-height: var(--primary-note-min-height);
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    color: var(--text-soft);
    font-size: var(--primary-note-font-size);
    line-height: 1.55;
  }

  .primary-surface-note__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
  }

  .primary-surface-note__icon .icon {
    width: 17px;
    height: 17px;
    font-size: 17px;
  }

  .primary-surface-note p { min-width: 0; }

  .primary-stat-grid {
    display: grid;
    border-bottom: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .primary-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .primary-stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .primary-stat-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .primary-stat-grid .primary-stat-cell {
    display: grid;
    min-width: 0;
    min-height: 104px;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
    text-align: start;
  }

  .primary-stat-grid .primary-stat-cell:first-child { border-inline-start: 0; }

  .primary-stat-grid .primary-stat-cell__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .primary-stat-grid .primary-stat-cell__icon .icon {
    width: 23px;
    height: 23px;
    font-size: 23px;
  }

  .primary-stat-grid .primary-stat-cell__copy {
    display: grid;
    min-width: 0;
    height: 48px;
    align-content: center;
    gap: 4px;
  }

  .primary-stat-grid .primary-stat-cell__copy strong,
  .primary-stat-grid .primary-stat-cell__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .primary-stat-grid .primary-stat-cell__copy strong {
    color: var(--text);
    font-size: 20px;
    font-weight: 730;
    line-height: 1.1;
  }

  .primary-stat-grid .primary-stat-cell__copy small {
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.2;
  }

  .primary-stat-grid .primary-stat-cell--up .primary-stat-cell__icon,
  .primary-stat-grid .primary-stat-cell--up .primary-stat-cell__copy strong {
    color: var(--success);
  }

  .primary-stat-grid .primary-stat-cell--down .primary-stat-cell__icon,
  .primary-stat-grid .primary-stat-cell--down .primary-stat-cell__copy strong {
    color: var(--danger);
  }

  .primary-stat-grid .primary-stat-cell--new .primary-stat-cell__icon,
  .primary-stat-grid .primary-stat-cell--new .primary-stat-cell__copy strong {
    color: var(--accent);
  }

  .primary-stat-grid .primary-stat-cell--stable .primary-stat-cell__icon {
    color: var(--icon);
  }

  @media (max-width: 820px) {
    .primary-hero-icon {
      width: 52px;
      height: 52px;
      border-radius: 15px;
    }

    .primary-hero-icon .icon {
      width: 25px;
      height: 25px;
      font-size: 25px;
    }

    .primary-surface-note {
      min-height: 54px;
      align-items: flex-start;
      padding: 11px 14px;
      font-size: 10.5px;
    }

    .primary-surface-note__icon {
      width: 30px;
      height: 30px;
      flex-basis: 30px;
      border-radius: 9px;
    }

    .primary-stat-grid--3,
    .primary-stat-grid--4,
    .primary-stat-grid--5 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .primary-stat-grid .primary-stat-cell {
      min-height: 82px;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 9px;
      padding: 12px;
      border-bottom: var(--separator-width) solid var(--separator-color);
    }

    .primary-stat-grid .primary-stat-cell:nth-child(odd) { border-inline-start: 0; }
    .primary-stat-grid .primary-stat-cell:nth-child(even) { border-inline-start: var(--separator-width) solid var(--separator-color); }

    .primary-stat-grid--3 .primary-stat-cell:last-child {
      grid-column: 1 / -1;
      border-inline-start: 0;
      border-bottom: 0;
    }

    .primary-stat-grid--4 .primary-stat-cell:nth-last-child(-n + 2) { border-bottom: 0; }

    .primary-stat-grid--5 .primary-stat-cell--trend {
      grid-column: 1 / -1;
      border-inline-start: 0;
    }

    .primary-stat-grid--5 .primary-stat-cell:nth-child(even) { border-inline-start: 0; }
    .primary-stat-grid--5 .primary-stat-cell:nth-child(odd):not(.primary-stat-cell--trend) {
      border-inline-start: var(--separator-width) solid var(--separator-color);
    }
    .primary-stat-grid--5 .primary-stat-cell:nth-last-child(-n + 2) { border-bottom: 0; }

    .primary-stat-grid .primary-stat-cell__icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
    }

    .primary-stat-grid .primary-stat-cell__icon .icon {
      width: 20px;
      height: 20px;
      font-size: 20px;
    }

    .primary-stat-grid .primary-stat-cell__copy {
      height: 40px;
      gap: 3px;
    }

    .primary-stat-grid .primary-stat-cell__copy strong { font-size: 17px; }
    .primary-stat-grid .primary-stat-cell__copy small { font-size: 9.5px; }
  }
}


@layer measurements {
  .body-measurements-overview,
  .body-measurement-detail {
    width: min(100%, var(--primary-page-max-width));
    max-width: 100%;
    align-self: start;
    justify-self: center;
  }

  .body-measurements-overview__surface,
  .body-measurement-detail__surface {
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--primary-surface-radius);
    background: var(--sidebar-bg);
  }

  .body-measurements-overview__intro,
  .body-measurement-detail__intro {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 132px;
    padding: 24px;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .body-measurements-overview__intro > div,
  .body-measurement-detail__copy {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .body-measurements-overview__intro > div > span,
  .body-measurement-detail__copy > span {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
  }

  .body-measurements-overview__intro h2,
  .body-measurement-detail__copy h2 {
    color: var(--text);
    font-size: 21px;
    font-weight: 730;
  }

  .body-measurements-overview__intro p,
  .body-measurement-detail__copy p {
    max-width: 680px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.6;
  }

  .body-measurement-detail__intro {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .body-measurement-header-actions {
    display: none;
    align-items: center;
    gap: var(--header-action-gap);
  }

  .workspace.has-body-measurement-actions .body-measurement-header-actions {
    display: flex;
  }

  .body-measurement-header-action--delete { color: var(--danger); }

  .secondary-column__content:has(.body-measurement-directory) {
    place-items: start stretch;
  }

  .body-measurement-directory {
    display: grid;
    width: 100%;
    align-content: start;
  }

  .body-measurement-directory__empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 44px 18px;
    color: var(--text-soft);
    text-align: center;
  }

  .body-measurement-directory__empty > span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 16px;
    background: var(--sidebar-bg);
    color: var(--accent);
  }

  .body-measurement-directory__empty strong { color: var(--text); font-size: 15px; }
  .body-measurement-directory__empty p { max-width: 250px; font-size: 12px; }

  .body-measurement-list {
    display: grid;
    width: 100%;
    align-content: start;
    gap: var(--secondary-list-gap);
  }

  .body-measurement-list-item {
    min-width: 0;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-item-radius);
    background: var(--sidebar-bg);
  }

  .body-measurement-list-item.is-active {
    border-color: color-mix(in srgb, var(--accent) 20%, var(--separator-color));
    background: var(--selected-bg);
  }

  .body-measurement-list-item__link {
    display: grid;
    min-height: var(--secondary-list-item-min-height);
    grid-template-columns: var(--secondary-list-media-size) minmax(0, 1fr);
    align-items: center;
    gap: var(--secondary-list-item-gap);
    padding: var(--secondary-list-item-padding);
  }

  .body-measurement-list-item__icon {
    width: var(--secondary-list-media-size);
    height: var(--secondary-list-media-size);
    border-radius: var(--secondary-list-media-radius);
  }

  .body-measurement-list-item__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .body-measurement-list-item__copy strong,
  .body-measurement-list-item__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .body-measurement-list-item__copy strong { color: var(--text); font-size: 14px; font-weight: 680; }
  .body-measurement-list-item__copy small { color: var(--text-soft); font-size: 11.5px; direction: rtl; }

  .body-measurements-overview__empty {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 170px;
    padding: 28px 24px;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .body-measurements-overview__empty > span { width: 52px; height: 52px; border-radius: 15px; }
  .body-measurements-overview__empty > div { display: grid; gap: 4px; }
  .body-measurements-overview__empty strong { color: var(--text); font-size: 15px; }
  .body-measurements-overview__empty p { color: var(--text-soft); font-size: 12px; line-height: 1.6; }

  .body-measurements-chart-section {
    display: grid;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .body-measurements-chart-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 12px;
  }

  .body-measurements-chart-section__header > div { display: grid; gap: 2px; }
  .body-measurements-chart-section__header span { color: var(--text-soft); font-size: 11.5px; }
  .body-measurements-chart-section__header h2 { color: var(--text); font-size: 18px; font-weight: 710; }

  .body-measurements-chart-section__toolbar {
    align-items: stretch;
  }

  .body-measurements-chart-section__metrics {
    width: min(100%, 680px);
    min-width: 0;
    flex: 0 1 680px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .body-measurements-chart-section__metrics button {
    min-width: 0;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .body-measurements-latest {
    display: grid;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .body-measurements-latest > header {
    display: grid;
    gap: 2px;
    padding: 18px 24px 12px;
  }

  .body-measurements-latest > header span { color: var(--text-soft); font-size: 11px; }
  .body-measurements-latest > header h2 { color: var(--text); font-size: 17px; font-weight: 710; }

  .body-measurements-latest__grid,
  .body-measurement-detail__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: var(--separator-width) solid var(--separator-color);
  }

  .body-measurement-value-cell {
    display: grid;
    min-width: 0;
    min-height: 96px;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 16px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
  }

  .body-measurement-value-cell:nth-child(4n + 1) { border-inline-start: 0; }
  .body-measurement-value-cell:nth-child(n + 5) { border-top: var(--separator-width) solid var(--separator-color); }
  .body-measurement-value-cell > .system-icon-tile { width: 44px; height: 44px; border-radius: 13px; }
  .body-measurement-value-cell > span:last-child { display: grid; min-width: 0; gap: 3px; }
  .body-measurement-value-cell strong,
  .body-measurement-value-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .body-measurement-value-cell strong { color: var(--text); font-size: 18px; font-weight: 720; }
  .body-measurement-value-cell small { color: var(--text-soft); font-size: 10.5px; }
  .body-measurement-value-cell.is-empty strong { color: var(--text-soft); }

  .body-measurement-detail__grid { border-top: 0; border-bottom: var(--separator-width) solid var(--separator-color); }

  .bottom-sheet.is-measurement-editor {
    width: min(880px, calc(100% - var(--secondary-column-width) - 48px));
    height: min(86%, 760px);
  }

  .bottom-sheet.is-measurement-editor .bottom-sheet__body {
    background: var(--app-bg);
  }

  .body-measurement-form {
    display: grid;
    min-height: 100%;
    align-content: start;
    gap: 16px;
    padding: 20px;
  }

  .body-measurement-form__section {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 18px;
    background: var(--sidebar-bg);
  }

  .body-measurement-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: center;
    overflow: hidden;
  }

  .body-measurement-input input {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
    direction: ltr;
    text-align: right;
  }

  .body-measurement-input small {
    display: grid;
    height: 100%;
    place-items: center;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    color: var(--text-soft);
    font-size: 10px;
  }

  .body-measurement-form__message {
    min-height: 18px;
    color: var(--text-soft);
    font-size: 11.5px;
  }
  .body-measurement-form__message.is-error,
  .workout-program-delete__message.is-error { color: var(--danger); }
  .body-measurement-form__message.is-success { color: var(--success); }

  .body-measurement-form__actions {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
  }

  @media (max-width: 1100px) and (min-width: 821px) {
    .body-measurements-latest__grid,
    .body-measurement-detail__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .body-measurement-value-cell:nth-child(4n + 1) { border-inline-start: var(--separator-width) solid var(--separator-color); }
    .body-measurement-value-cell:nth-child(3n + 1) { border-inline-start: 0; }
    .body-measurement-value-cell:nth-child(n + 4) { border-top: var(--separator-width) solid var(--separator-color); }
  }

  @media (max-width: 820px) {
    .body-measurements-overview,
    .body-measurement-detail { width: 100%; }

    .body-measurements-overview__surface,
    .body-measurement-detail__surface { border-radius: 16px; }

    .body-measurements-overview__intro,
    .body-measurement-detail__intro {
      grid-template-columns: 52px minmax(0, 1fr);
      gap: 13px;
      min-height: 0;
      padding: 20px 16px;
    }

    .body-measurement-detail__intro {
      grid-template-columns: 52px minmax(0, 1fr);
    }

    .workspace.has-secondary.is-content-active.has-body-measurement-actions .workspace__header-cell--secondary {
      grid-template-columns:
        var(--header-action-track)
        minmax(0, 1fr)
        calc(var(--header-action-track) + var(--header-action-track) + var(--header-action-gap));
    }

    .workspace.has-secondary.is-content-active.has-body-measurement-actions .body-measurement-header-actions {
      display: flex;
      grid-column: 3;
      align-items: center;
      justify-content: flex-end;
      gap: var(--header-action-gap);
    }

    .body-measurements-overview__intro h2,
    .body-measurement-detail__copy h2 { font-size: 19px; }
    .body-measurements-overview__intro p,
    .body-measurement-detail__copy p { font-size: 11px; }

    .body-measurements-chart-section__header { padding: 17px 15px 11px; }
    .body-measurements-chart-section__header h2 { font-size: 17px; }
    .body-measurements-chart-section__toolbar { padding: 0 15px 14px; }
    .body-measurements-chart-section__metrics {
      width: 100%;
      min-width: 0;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .body-measurements-chart-section__metrics button { min-height: 36px; }
    .body-measurements-chart-section__metrics button:nth-child(n + 5) {
      border-top: var(--separator-width) solid var(--separator-color);
    }
    .body-measurements-chart-section__metrics button:nth-child(5) {
      border-inline-start: 0;
    }

    .body-measurements-latest > header { padding: 16px 15px 11px; }
    .body-measurements-latest__grid,
    .body-measurement-detail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .body-measurement-value-cell,
    .body-measurement-value-cell:nth-child(3n + 1),
    .body-measurement-value-cell:nth-child(4n + 1) { border-inline-start: var(--separator-width) solid var(--separator-color); }
    .body-measurement-value-cell:nth-child(odd) { border-inline-start: 0; }
    .body-measurement-value-cell:nth-child(n) { border-top: 0; }
    .body-measurement-value-cell:nth-child(n + 3) { border-top: var(--separator-width) solid var(--separator-color); }
    .body-measurement-value-cell { min-height: 82px; grid-template-columns: 40px minmax(0, 1fr); gap: 9px; padding: 12px; }
    .body-measurement-value-cell > .system-icon-tile { width: 40px; height: 40px; border-radius: 12px; }
    .body-measurement-value-cell strong { font-size: 16px; }
    .body-measurement-value-cell small { font-size: 9.5px; }

    .bottom-sheet.is-measurement-editor {
      width: 100%;
      height: auto;
      max-height: calc(var(--viewport-height) - var(--shell-header-height) - env(safe-area-inset-top) - 8px);
    }

    .body-measurement-form { gap: 12px; padding: 14px; }
    .body-measurement-form__section { gap: 16px; padding: 16px; border-radius: 16px; }
    .body-measurement-form .exercise-editor-form__grid { grid-template-columns: 1fr; }
    .bottom-sheet.is-measurement-editor .bottom-sheet__footer {
      min-height: 62px;
      padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    }
    .body-measurement-form__actions {
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 6px;
    }
    .body-measurement-form__actions > .bottom-sheet-action {
      width: var(--bottom-sheet-action-size);
      min-width: var(--bottom-sheet-action-size);
      min-height: var(--bottom-sheet-action-size);
      flex: 0 0 var(--bottom-sheet-action-size);
      padding: 0;
    }
  }
}

@layer users {
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tertiary-column__content:has(.user-directory) { place-items: stretch; }
  .user-directory { display: flex; width: 100%; height: 100%; min-height: 0; flex-direction: column; background: var(--sidebar-bg); }
  .user-directory__tools,
  .progress-directory__search {
    display: grid;
    max-height: 0;
    overflow: hidden;
    gap: 10px;
    border-bottom: 0 solid var(--separator-color);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: max-height var(--duration-slow) var(--ease), padding var(--duration-slow) var(--ease), border-width var(--duration-slow) var(--ease), opacity var(--duration) ease, transform var(--duration-slow) var(--ease), visibility 0s linear var(--duration-slow);
  }
  .user-directory__tools { padding: 0 var(--workspace-column-padding); }
  .progress-directory__search { padding: 0 var(--workspace-column-padding); }
  .user-directory__tools.is-open,
  .progress-directory__search.is-open {
    max-height: 88px;
    padding: 14px var(--workspace-column-padding) 12px;
    border-bottom-width: var(--separator-width);
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }
  .user-search,
  .progress-directory-search {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-item-radius);
    background: var(--sidebar-bg);
    color: var(--icon);
  }
  .user-search input,
  .progress-directory-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
  .user-role-filters { --user-role-offset: 0px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: var(--workspace-column-padding) var(--workspace-column-padding) var(--secondary-list-gap); padding: 4px; border: var(--separator-width) solid var(--separator-color); border-radius: 12px; background: var(--app-bg); }
  .user-role-filters::before { position: absolute; z-index: 0; top: 4px; right: 4px; bottom: 4px; width: calc((100% - 20px) / 4); border-radius: 9px; background: var(--sidebar-bg); box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 7%, transparent); content: ""; transform: translateX(var(--user-role-offset)); transition: transform var(--duration-slow) var(--ease), background-color var(--duration) ease, box-shadow var(--duration) ease; }
  html[data-theme="dark"] .user-role-filters::before { box-shadow: none; }
  .user-role-filter { position: relative; z-index: 1; display: inline-flex; min-width: 0; min-height: 36px; align-items: center; justify-content: center; gap: 4px; border-radius: 9px; color: var(--text-soft); font-size: 10.5px; white-space: nowrap; transition: color var(--duration) ease, transform var(--duration-fast) ease; }
  .user-role-filter span { display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: var(--radius-circle); background: color-mix(in srgb, var(--text-soft) 10%, transparent); font-size: 9.5px; transition: color var(--duration) ease, background-color var(--duration) ease; }
  .user-role-filter.is-active { color: var(--accent); background: transparent; box-shadow: none; }
  .user-role-filter.is-active span { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .user-list { display: grid; min-height: 0; align-content: start; gap: var(--secondary-list-gap); overflow: auto; padding: 0 var(--workspace-column-padding) calc(var(--workspace-column-padding) + 4px); }
  .user-list__message { padding: 28px 12px; color: var(--text-soft); text-align: center; }
  .user-list-item { position: relative; display: grid; grid-template-columns: var(--secondary-list-media-size) minmax(0, 1fr) auto; width: 100%; min-height: var(--secondary-list-item-min-height); align-items: center; gap: var(--secondary-list-item-gap); padding: var(--secondary-list-item-padding); border: var(--separator-width) solid var(--separator-color); border-radius: var(--secondary-list-item-radius); background: var(--sidebar-bg); text-align: right; transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) ease; }
  .user-list-item::after { display: none; }
  .user-list-item:hover { border-color: color-mix(in srgb, var(--accent) 18%, var(--separator-color)); background: var(--sidebar-bg); }
  .user-list-item.is-active { border-color: color-mix(in srgb, var(--accent) 36%, var(--separator-color)); background: var(--selected-bg); }
  .user-list-item:active { transform: scale(.992); }
  .user-avatar { display: grid; width: var(--secondary-list-media-size); height: var(--secondary-list-media-size); place-items: center; border: var(--separator-width) solid color-mix(in srgb, var(--accent) 18%, var(--separator-color)); border-radius: var(--secondary-list-media-radius); background: var(--exercise-surface-bg); color: var(--accent); font-size: 17px; font-weight: 700; }
  .user-list-item__copy { display: grid; min-width: 0; gap: 3px; }
  .user-list-item__copy strong { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
  .user-list-item__copy small.user-list-item__details { display: flex; min-width: 0; align-items: center; gap: 5px; overflow: hidden; direction: rtl; color: var(--text-soft); font-size: 10.5px; text-align: right; white-space: nowrap; }
  .user-list-item__email { min-width: 0; overflow: hidden; direction: ltr; text-overflow: ellipsis; white-space: nowrap; }
  .user-list-item__separator { flex: 0 0 auto; color: var(--text-faint); }
  .user-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 0; border: 0; color: var(--text-soft); font-size: 9.5px; }
  .user-status::before { width: 6px; height: 6px; border-radius: var(--radius-circle); background: currentColor; content: ""; }
  .user-status--active { color: var(--success); }
  .user-status--invited { color: var(--warning); }
  .user-status--suspended { color: var(--danger); }
  .user-list-item__arrow { width: 20px; height: 20px; color: var(--icon); font-size: 18px; transition: transform var(--duration-fast) ease, color var(--duration-fast) ease; }
  .user-list-item:hover .user-list-item__arrow, .user-list-item.is-active .user-list-item__arrow { color: var(--accent); transform: translateX(-2px); }
  .user-action { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: var(--separator-width) solid var(--separator-color); border-radius: 12px; background: var(--sidebar-bg); color: var(--text); font-size: 12.5px; font-weight: 650; transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-fast) ease; }
  .user-action:hover { border-color: color-mix(in srgb, var(--accent) 28%, var(--separator-color)); background: var(--hover-bg); color: var(--accent); }
  .user-action:active { transform: scale(.97); }
  .user-action .icon { width: 19px; height: 19px; font-size: 19px; }
  .user-action--danger { border-color: color-mix(in srgb, var(--danger) 24%, var(--separator-color)); background: var(--danger); color: var(--on-accent); }
  .user-action--danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 88%, var(--text)); color: var(--on-accent); }
  .user-action--secondary { background: transparent; }
  .user-action:disabled { opacity: .4; cursor: not-allowed; transform: none; }
  .system-field { display: grid; min-width: 0; align-content: start; gap: 8px; color: var(--text); font-size: 12px; font-weight: 650; }
  .system-field--wide { grid-column: 1 / -1; }
  .system-field__label { display: flex; align-items: center; gap: 5px; }
  .system-field__label small { color: var(--text-soft); font-weight: 400; }
  .system-control { width: 100%; min-height: 50px; border: var(--separator-width) solid var(--separator-color); border-radius: 13px; outline: 0; background: var(--app-bg); transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration) ease; }
  .system-input { display: flex; align-items: center; }
  .system-input input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 0; outline: 0; background: transparent; }
  .system-control:focus-within,
  .custom-select__trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--text-soft) 58%, var(--separator-color));
    box-shadow: none;
  }
  .custom-select { position: relative; z-index: 1; min-width: 0; }
  .custom-select.is-open { z-index: 12; }
  .custom-select__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; color: var(--text); text-align: right; }
  .custom-select__trigger .icon { width: 18px; height: 18px; color: var(--icon); font-size: 18px; transition: transform var(--duration) var(--ease); }
  .custom-select.is-open .custom-select__trigger .icon { transform: rotate(180deg); }
  .custom-select__menu { position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; left: 0; display: grid; gap: 3px; padding: 6px; border: var(--separator-width) solid var(--separator-color); border-radius: 14px; background: var(--sidebar-bg); box-shadow: 0 14px 32px color-mix(in srgb, var(--text) 12%, transparent); }
  .custom-select__menu[hidden] { display: none; }
  .custom-select__option { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 11px; border-radius: 10px; color: var(--text); text-align: right; transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease; }
  .custom-select__option:hover, .custom-select__option:focus-visible { background: var(--hover-bg); color: var(--accent); outline: 0; }
  .custom-select__option .icon { width: 18px; height: 18px; color: var(--accent); font-size: 18px; opacity: 0; }
  .custom-select__option.is-selected { background: var(--selected-bg); color: var(--accent); font-weight: 650; }
  .custom-select__option.is-selected .icon { opacity: 1; }
  .user-form__message.is-error, .user-delete-confirmation__message.is-error { color: var(--danger); }
  .user-form__message.is-success { color: var(--success); }

  .bottom-sheet-action {
    position: relative;
    display: grid;
    width: var(--bottom-sheet-action-size);
    height: var(--bottom-sheet-action-size);
    min-width: var(--bottom-sheet-action-size);
    min-height: var(--bottom-sheet-action-size);
    flex: 0 0 var(--bottom-sheet-action-size);
    padding: 0;
    place-items: center;
    border-radius: var(--bottom-sheet-action-radius);
  }

  .bottom-sheet-action .icon {
    width: var(--bottom-sheet-action-icon-size);
    height: var(--bottom-sheet-action-icon-size);
    font-size: var(--bottom-sheet-action-icon-size);
  }

  .bottom-sheet-action.is-loading .icon {
    opacity: 0;
  }

  .bottom-sheet-action.is-loading::after {
    position: absolute;
    width: 18px;
    height: 18px;
    border: var(--separator-width) solid color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: currentColor;
    border-radius: var(--radius-circle);
    content: "";
    animation: bottom-sheet-action-spin .72s linear infinite;
  }

  @keyframes bottom-sheet-action-spin {
    to { transform: rotate(360deg); }
  }
}

@layer states {
  .app-shell.is-collapsed {
    --sidebar-size: var(--sidebar-narrow);
  }

  .app-shell.is-collapsed .sidebar-label {
    display: none;
  }

  .app-shell.is-collapsed .sidebar {
    align-items: stretch;
  }

  .app-shell.is-collapsed .sidebar__header {
    min-height: var(--shell-header-height);
    justify-content: center;
    padding: 12px;
  }

  .app-shell.is-collapsed .brand {
    display: none;
  }

  .app-shell.is-collapsed .collapse-icon {
    display: none;
  }

  .app-shell.is-collapsed .expand-icon {
    display: block;
  }

  .app-shell.is-collapsed .sidebar__top {
    padding: 0 10px 14px;
  }

  .app-shell.is-collapsed .primary-links {
    padding-top: 12px;
  }

  .app-shell.is-collapsed .menu-link {
    justify-content: center;
    padding-inline: 0;
  }

  .app-shell.is-collapsed .menu-link__arrow {
    display: none;
  }

  .app-shell.is-collapsed .sidebar-section {
    padding-inline: 10px;
  }

  .app-shell.is-collapsed .sidebar-section:nth-of-type(2) {
    display: block;
  }

  .app-shell.is-collapsed .sidebar-section .menu-link {
    min-height: 48px;
  }

  .app-shell.is-collapsed .sidebar__utilities {
    gap: 8px;
    padding: 12px 10px;
  }

  .app-shell.is-collapsed .theme-toggle {
    gap: 2px;
    padding: 3px;
    border-radius: 14px;
  }

  .app-shell.is-collapsed .theme-toggle__option {
    min-height: 36px;
    padding: 0;
    border-radius: 10px;
  }

  .app-shell.is-collapsed .theme-toggle__option .icon {
    width: 19px;
    height: 19px;
    font-size: 19px;
  }

  .app-shell.is-collapsed .sidebar-account-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .app-shell.is-collapsed .sidebar-account {
    grid-template-columns: 1fr;
    min-height: 48px;
    justify-items: center;
    padding: 0;
  }

  .app-shell.is-collapsed .sidebar-logout {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    border-radius: 12px;
  }
}

@layer responsive {
  @media (max-width: 820px) {
    :root {
      --sidebar-wide: clamp(250px, 64vw, 420px);
      --sidebar-size: var(--sidebar-wide);
    }

    html,
    body {
      background: var(--safe-area-bg);
    }

    .app-shell {
      display: block;
    }

    .app-shell.is-mobile-open {
      background: var(--safe-area-bg);
    }

    .sidebar {
      position: absolute;
      inset-block: 0;
      right: 0;
      width: var(--sidebar-wide);
      height: var(--viewport-height);
      border: 0;
      border-top: var(--separator-width) solid var(--separator-color);
      border-left: var(--separator-width) solid var(--separator-color);
      border-top-left-radius: 42px;
      transform: translate3d(102%, 0, 0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
      box-shadow: none;
      transition:
        transform var(--duration-slow) var(--ease),
        background-color var(--duration) ease,
        border-color var(--duration) ease;
    }

    .workspace {
      position: absolute;
      inset: 0;
      background: var(--app-bg);
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
      transition: transform var(--duration-slow) var(--ease), background-color var(--duration) ease;
    }

    .app-shell.is-mobile-open .sidebar {
      transform: translate3d(0, 0, 0);
    }

    .app-shell.is-mobile-open .workspace {
      transform: translate3d(calc(-1 * var(--sidebar-wide)), 0, 0);
    }

    .header-icon-button {
      display: none;
    }

    .mobile-close-button {
      display: grid;
    }

    .workspace-menu-button {
      display: grid;
      grid-column: 1;
      visibility: visible;
      transition:
        color var(--duration-fast) ease,
        background-color var(--duration-fast) ease,
        transform var(--duration-fast) ease;
    }

    .workspace-back-button {
      grid-column: 1;
    }

    .workspace__heading {
      grid-column: 2;
      min-width: 0;
      padding-inline: 2px;
    }

    .workspace__heading--mobile-content {
      display: none;
    }

    .secondary-sheet-button {
      position: static;
      grid-column: 3;
    }

    .workspace__header {
      display: block;
      min-height: calc(var(--shell-header-height) + env(safe-area-inset-top));
      padding: 0;
      background: var(--safe-area-bg);
    }

    .workspace__header-cell--secondary {
      --header-action-size: 38px;
      --header-action-track: 38px;
      --header-action-gap: 4px;

      grid-template-columns: var(--header-action-track) minmax(0, 1fr);
      min-height: calc(var(--shell-header-height) + env(safe-area-inset-top));
      gap: var(--header-action-gap);
      border-left: 0;
      background: var(--safe-area-bg);
      padding:
        calc(12px + env(safe-area-inset-top))
        max(9px, env(safe-area-inset-right))
        12px
        max(9px, env(safe-area-inset-left));
    }

    .workspace.has-secondary-sheet .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) var(--header-action-track);
    }

    .workspace[data-secondary-action="measurement-create"] .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) var(--header-action-track);
    }

    .workspace[data-secondary-action="measurement-create"] .secondary-sheet-button {
      position: static;
      grid-column: 3;
    }

    .workspace.has-secondary-search:not(.has-secondary-sheet) .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) var(--header-action-track);
    }

    .workspace.has-secondary-search:not(.has-secondary-sheet) .secondary-search-button {
      grid-column: 3;
    }

    .workspace[data-secondary-action="user-create"] .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) var(--header-action-track) var(--header-action-track);
    }

    .workspace[data-secondary-action="user-create"] .secondary-sheet-button {
      grid-column: 4;
    }

    .workspace[data-secondary-action="user-create"] .secondary-search-button { grid-column: 3; }

    .workspace.has-secondary .workspace__header-cell--secondary {
      border-left-width: 0;
      background: var(--safe-area-bg);
    }

    .workspace__header-cell--content {
      display: none;
      background: var(--safe-area-bg);
    }

    .workspace.has-secondary .workspace__header-cell--content {
      display: none;
    }

    .app-shell.is-mobile-open .workspace-menu-button {
      display: none;
    }

    .app-shell.is-mobile-open .workspace__header-cell--secondary {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-shell.is-mobile-open .workspace__heading {
      grid-column: 1;
    }

    .app-shell.is-mobile-open .workspace.has-secondary-sheet .workspace__header-cell--secondary {
      grid-template-columns: minmax(0, 1fr) var(--header-action-track);
    }

    .app-shell.is-mobile-open .workspace.has-secondary-search .workspace__header-cell--secondary {
      grid-template-columns: minmax(0, 1fr) var(--header-action-track) var(--header-action-track);
    }

    .app-shell.is-mobile-open .workspace.has-secondary-sheet .workspace__heading--secondary {
      grid-column: 1;
    }

    .app-shell.is-mobile-open .workspace.has-secondary-sheet .secondary-sheet-button {
      grid-column: 2;
    }

    .app-shell.is-mobile-open .workspace.has-secondary-search .secondary-search-button { grid-column: 2; }
    .app-shell.is-mobile-open .workspace.has-secondary-search .secondary-sheet-button { grid-column: 3; }

    .sidebar__header {
      min-height: calc(var(--shell-header-height) + env(safe-area-inset-top));
      padding: calc(12px + env(safe-area-inset-top)) 28px 12px;
    }

    .sidebar__scroll {
      padding-bottom: 0;
    }

    .shell-columns {
      display: block;
      position: relative;
      overflow: hidden;
    }

    .secondary-column,
    .content-column {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
      transition:
        transform var(--duration-slow) var(--ease),
        background-color var(--duration) ease;
    }

    .secondary-column {
      transform: translate3d(-100%, 0, 0);
      border-left: 0;
      pointer-events: none;
    }

    .content-column {
      display: block;
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
    }

    .workspace.has-secondary .secondary-column {
      transform: translate3d(0, 0, 0);
      border-left-width: 0;
      pointer-events: auto;
    }

    .workspace.has-secondary .content-column {
      transform: translate3d(-100%, 0, 0);
      pointer-events: none;
    }

    .workspace.has-secondary.is-content-active .secondary-column {
      transform: translate3d(100%, 0, 0);
      pointer-events: none;
    }

    .workspace.has-secondary.is-content-active .content-column {
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
    }

    .workspace.has-secondary.is-content-active .workspace-menu-button {
      display: none;
    }

    .workspace.has-secondary.is-content-active .workspace-back-button {
      display: grid;
    }

    .workspace.has-secondary.is-content-active .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr);
    }

    .workspace.has-secondary.is-content-active.has-workout-program-actions .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) auto;
    }

    .workspace[data-secondary-action="workout-create"].has-secondary.is-content-active .secondary-sheet-button {
      display: none;
    }

    .workspace.has-secondary.is-content-active.has-workout-program-actions .workout-program-header-actions {
      display: flex;
      grid-column: 3;
      align-items: center;
      justify-content: flex-end;
      gap: var(--header-action-gap);
    }

    .workspace.has-secondary.has-content-heading.is-content-active .workspace__heading--secondary {
      display: none;
    }

    .workspace.has-secondary.has-content-heading.is-content-active .workspace__heading--mobile-content {
      display: grid;
      grid-column: 2;
    }

    .workspace[data-view="users"].has-active-user .user-header-actions {
      display: none;
    }

    .workspace[data-view="users"].has-active-user.is-content-active .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) calc(var(--header-action-track) + var(--header-action-track) + var(--header-action-gap));
    }

    .workspace[data-view="users"].has-active-user.is-content-active .user-header-actions {
      position: static;
      display: flex;
      grid-column: 3;
      justify-content: flex-end;
      gap: 4px;
    }

    .workspace.has-secondary.is-content-active .secondary-search-button,
    .workspace.has-secondary.is-content-active .secondary-sheet-button {
      display: none;
    }

    .secondary-column__content,
    .content-column__content {
      padding-bottom: calc(var(--workspace-column-padding) + env(safe-area-inset-bottom));
      overscroll-behavior: contain;
      scroll-padding-top: calc(var(--shell-header-height) + env(safe-area-inset-top) + 12px);
      scroll-padding-bottom: calc(env(safe-area-inset-bottom) + 18px);
    }

    html.is-mobile-keyboard-open,
    html.is-mobile-keyboard-open body {
      overflow: hidden;
      overscroll-behavior: none;
    }

    html.is-mobile-keyboard-open .bottom-sheet__body {
      scroll-padding-top: 12px;
      scroll-padding-bottom: 18px;
    }

    html.is-mobile-keyboard-open .workout-session-exercise__footer {
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    .bottom-sheet {
      right: 0;
      left: 0;
      width: 100%;
      height: auto;
      max-height: calc(var(--viewport-height) - var(--shell-header-height) - env(safe-area-inset-top) - 8px);
      border-right: 0;
      border-left: 0;
      transform: translateY(100%);
      box-shadow: 0 -10px 18px -14px color-mix(in srgb, var(--text) 12%, transparent);
    }

    .bottom-sheet.is-open {
      transform: none;
    }

    .bottom-sheet-backdrop {
      top: calc(var(--shell-header-height) + env(safe-area-inset-top));
    }

    .bottom-sheet:not(.has-footer) .bottom-sheet__body {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-sheet__footer {
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .workspace.has-route-back.has-secondary-sheet .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr);
    }

    .workspace.has-route-back .secondary-sheet-button {
      display: none;
    }


  }

  @media (max-width: 390px) {
    .workspace__label {
      font-size: 12px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

@layer workspace {
  .exercise-header-actions {
    display: contents;
  }

  .exercise-list-header-actions,
  .exercise-create-actions {
    display: none;
  }

  .workspace[data-view="exercises"] .workspace__header-cell--secondary > .secondary-sheet-button {
    display: none !important;
  }

  .workspace[data-view="exercises"] .workspace__heading--secondary {
    padding-inline-end: 0;
  }

  .exercise-filter-header-button,
  .exercise-admin-header-button,
  .exercise-create-header-button,
  .category-create-header-button,
  .exercise-search-button,
  .exercise-layout-toggle-button,
  .exercise-category-panel-edit-button {
    display: none;
  }

  .exercise-search-button.is-active,
  .exercise-layout-toggle-button[aria-pressed="true"] {
    color: var(--accent);
    background: var(--selected-bg);
  }

  .exercise-create-header-button[aria-expanded="true"],
  .category-create-header-button[aria-expanded="true"],
  .exercise-admin-header-button[aria-expanded="true"],
  .exercise-category-panel-edit-button[aria-expanded="true"] {
    color: var(--accent);
    background: var(--exercise-surface-bg);
  }

  @media (min-width: 821px) {
    .workspace[data-view="exercises"].has-secondary.has-category-creation .workspace__header-cell--secondary {
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: var(--header-action-gap);
    }

    .workspace[data-view="exercises"].has-secondary.has-category-creation .workspace__heading--secondary {
      grid-column: 1;
      min-width: 0;
      padding-inline-end: 0;
    }

    .workspace[data-view="exercises"].has-secondary.has-category-creation .exercise-create-actions {
      display: flex;
      grid-column: 2;
      align-items: center;
      justify-self: end;
      gap: var(--header-action-gap);
    }

    .workspace[data-view="exercises"].has-secondary.has-category-creation .category-create-header-button[aria-hidden="false"],
    .workspace[data-view="exercises"].has-secondary.has-exercise-creation .exercise-create-header-button[aria-hidden="false"] {
      position: static;
      inset: auto;
      display: grid;
      margin: 0;
    }
  }
}

@layer exercises {
  .exercise-card__manage {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    border: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .exercise-card__manage:hover,
  .exercise-card__manage[aria-expanded="true"] {
    color: var(--accent);
    background: var(--sidebar-bg);
  }

  .bottom-sheet.is-exercise-editor,
  .bottom-sheet.is-category-editor {
    width: min(880px, calc(100% - var(--secondary-column-width) - 48px));
    height: min(86%, 760px);
  }

  .bottom-sheet.is-exercise-editor .bottom-sheet__body,
  .bottom-sheet.is-category-editor .bottom-sheet__body {
    background: var(--app-bg);
  }

  .exercise-editor-form {
    display: grid;
    min-height: 100%;
    align-content: start;
    gap: 16px;
    padding: 20px;
  }

  .exercise-editor-form__section {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 18px;
    background: var(--sidebar-bg);
  }

  .exercise-editor-form__section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .exercise-editor-form__section-heading > span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .exercise-editor-form__section-heading strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
  }

  .exercise-editor-form__section-heading small {
    color: var(--text-soft);
    font-size: 11.5px;
  }

  .exercise-editor-form__section-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 13px;
    background: var(--exercise-surface-bg);
    color: var(--accent);
  }

  .exercise-editor-form__section-icon .icon {
    width: 21px;
    height: 21px;
    font-size: 21px;
  }

  .exercise-editor-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .system-textarea {
    display: block;
    min-height: 112px;
    overflow: hidden;
  }

  .system-textarea--large {
    min-height: 170px;
  }

  .system-textarea textarea {
    display: block;
    width: 100%;
    min-height: inherit;
    resize: vertical;
    padding: 13px 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
  }

  .exercise-editor-form__message,
  .exercise-delete-confirmation__message {
    min-height: 20px;
    color: var(--text-soft);
    font-size: 12px;
  }

  .exercise-editor-form__message.is-error,
  .exercise-delete-confirmation__message.is-error {
    color: var(--danger);
  }

  .exercise-editor-form__message.is-success {
    color: var(--success);
  }

  .exercise-editor-form__actions {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
  }

  .exercise-editor-form__delete[hidden] { display: none; }

  .exercise-editor-form__actions-spacer {
    flex: 1;
  }

  .exercise-editor-form__section--media {
    padding-block: 14px;
  }

  .exercise-editor-form__section-heading--media {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .exercise-editor-form__section-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .exercise-editor-form__section-heading--media.has-media .exercise-editor-form__section-icon,
  .exercise-editor-form__section-heading--media.has-media .exercise-media-uploader__choose {
    color: var(--accent);
  }

  .exercise-editor-form__section-heading.exercise-editor-form__section-heading--media > .exercise-media-uploader__actions {
    display: inline-flex;
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
  }

  .exercise-media-uploader__actions .icon-action-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
    cursor: pointer;
  }

  .exercise-media-uploader__actions .icon-action-button:hover {
    background: var(--exercise-surface-bg);
  }

  .exercise-media-uploader__actions .icon-action-button:disabled {
    opacity: .42;
    pointer-events: none;
  }

  .exercise-media-uploader__choose {
    display: grid;
    place-items: center;
  }

  .exercise-delete-confirmation {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: var(--separator-width) solid color-mix(in srgb, var(--danger) 22%, var(--separator-color));
    border-radius: 18px;
    background: var(--sidebar-bg);
  }

  .exercise-delete-confirmation[hidden] {
    display: none;
  }

  .exercise-delete-confirmation__icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
  }

  .exercise-delete-confirmation__icon .icon {
    font-size: 25px;
  }

  .exercise-delete-confirmation__copy {
    display: grid;
    gap: 4px;
  }

  .exercise-delete-confirmation__copy strong {
    color: var(--text);
    font-size: 16px;
  }

  .exercise-delete-confirmation__copy p {
    color: var(--text-soft);
    font-size: 12px;
  }

  .exercise-delete-confirmation__actions {
    display: flex;
    grid-column: 1 / -1;
    gap: 9px;
    padding-top: 6px;
  }

  .exercise-delete-confirmation__message {
    grid-column: 1 / -1;
  }

  .exercise-editor-form.is-delete-confirming > :not(.exercise-delete-confirmation) {
    display: none;
  }
}

@media (max-width: 820px) {
  @layer responsive {
    .workspace {
      --workspace-column-padding: 15px;
      --bottom-sheet-action-size: 42px;
    }

    /* Exercise library: stable three-stage mobile header. */
    .workspace[data-view="exercises"].has-secondary .exercise-header-actions {
      display: contents;
    }

    .workspace[data-view="exercises"].has-secondary .exercise-list-header-actions--desktop {
      display: none !important;
    }

    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) max-content;
      align-items: center;
      column-gap: var(--header-action-gap);
    }

    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .workspace-menu-button {
      grid-column: 1;
    }

    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .workspace__heading--secondary {
      display: grid;
      grid-column: 2;
      min-width: 0;
      padding-inline: 2px;
    }

    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .exercise-create-actions {
      display: flex;
      grid-column: 3;
      align-items: center;
      justify-content: flex-end;
      gap: var(--header-action-gap);
    }

    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .category-create-header-button[aria-hidden="false"],
    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .exercise-create-header-button[aria-hidden="false"] {
      position: static;
      inset: auto;
      display: grid;
      margin: 0;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .workspace__heading--secondary {
      display: none !important;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .workspace__header-cell--secondary {
      direction: ltr;
      grid-template-columns: max-content minmax(0, 1fr) var(--header-action-track);
      grid-template-areas: "exercise-actions exercise-title exercise-back";
      align-items: center;
      column-gap: var(--header-action-gap);
      overflow: hidden;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .workspace-back-button {
      grid-area: exercise-back;
      justify-self: center;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .workspace__heading--mobile-content {
      display: grid;
      grid-area: exercise-title;
      width: 100%;
      min-width: 0;
      direction: rtl;
      text-align: right;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .exercise-list-header-actions--compact {
      display: grid;
      grid-area: exercise-actions;
      grid-auto-flow: column;
      grid-auto-columns: var(--header-action-track);
      align-items: center;
      justify-self: start;
      gap: var(--header-action-gap);
      direction: ltr;
      white-space: nowrap;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .exercise-list-header-actions--compact > .icon-action-button[aria-hidden="false"] {
      position: static;
      inset: auto;
      display: grid;
      margin: 0;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .exercise-create-actions {
      display: none !important;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .workspace__header-cell--secondary {
      direction: ltr;
      grid-template-columns: max-content minmax(0, 1fr) var(--header-action-track);
      grid-template-areas: "tertiary-actions tertiary-title tertiary-back";
      align-items: center;
      column-gap: var(--header-action-gap);
      overflow: hidden;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .workspace-back-button {
      grid-area: tertiary-back;
      justify-self: center;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .workspace__heading--mobile-tertiary {
      display: grid;
      grid-area: tertiary-title;
      width: 100%;
      min-width: 0;
      direction: rtl;
      text-align: right;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .tertiary-header-actions--mobile {
      display: flex;
      grid-area: tertiary-actions;
      align-items: center;
      justify-content: flex-start;
      gap: var(--header-action-gap);
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .exercise-category-panel-edit-button[aria-hidden="false"] {
      position: static;
      inset: auto;
      display: grid;
      margin: 0;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .exercise-header-actions,
    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .exercise-create-actions {
      display: none !important;
    }

  }

  @layer exercises {
    .bottom-sheet.is-exercise-editor,
    .bottom-sheet.is-category-editor {
      width: 100%;
      height: auto;
      max-height: calc(var(--viewport-height) - var(--shell-header-height) - env(safe-area-inset-top) - 8px);
    }

    .exercise-editor-form {
      gap: 12px;
      padding: 14px;
    }

    .exercise-editor-form__section {
      gap: 16px;
      padding: 16px;
      border-radius: 16px;
    }

    .exercise-editor-form__grid {
      grid-template-columns: 1fr;
    }

    .bottom-sheet.is-exercise-editor .bottom-sheet__footer,
    .bottom-sheet.is-category-editor .bottom-sheet__footer {
      min-height: 62px;
      padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    }

    .exercise-editor-form__actions {
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 6px;
    }

    .exercise-editor-form__actions-spacer {
      display: block;
      min-width: 0;
      flex: 1 1 auto;
    }

    .exercise-editor-form__actions > .bottom-sheet-action {
      width: var(--bottom-sheet-action-size);
      min-width: var(--bottom-sheet-action-size);
      min-height: var(--bottom-sheet-action-size);
      flex: 0 0 var(--bottom-sheet-action-size);
      padding: 0;
    }

    .exercise-editor-form__delete {
      margin-top: 0;
    }

    .exercise-editor-form__section--media {
      padding-block: 12px;
    }

    .exercise-editor-form__section-heading--media {
      gap: 9px;
    }

    .exercise-editor-form__section-heading--media small {
      display: none;
    }

    .exercise-editor-form__section-heading.exercise-editor-form__section-heading--media > .exercise-media-uploader__actions {
      gap: 5px;
    }

    .exercise-media-uploader__actions .icon-action-button {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
    }

    .exercise-delete-confirmation {
      grid-template-columns: 48px minmax(0, 1fr);
      padding: 20px 16px;
    }

    .exercise-delete-confirmation__icon {
      width: 48px;
      height: 48px;
    }

    .exercise-delete-confirmation__actions {
      align-items: center;
      justify-content: flex-end;
      flex-direction: row;
    }
  }
}

@layer exercises {
  .exercise-filters__section--categories {
    align-content: start;
  }

  .exercise-category-tree,
  .exercise-category-children {
    display: grid;
    min-width: 0;
    gap: var(--secondary-list-gap);
  }

  .exercise-category-node {
    position: relative;
    min-width: 0;
  }

  .exercise-category-node.is-inactive {
    opacity: .62;
  }

  .exercise-category-children {
    position: relative;
  }

  .exercise-category-children[hidden] {
    display: none;
  }

  .exercise-category-children::before {
    position: absolute;
    z-index: 0;
    inset-block: 0 calc(var(--category-row-height) / 2);
    inset-inline-start: calc(
      var(--category-row-padding)
      + (var(--category-parent-depth) * var(--category-tree-indent))
      + var(--category-tree-axis)
    );
    border-inline-start: var(--separator-width) solid color-mix(in srgb, var(--icon) 25%, transparent);
    content: "";
    pointer-events: none;
  }

  .exercise-category-node[data-category-depth]:not([data-category-depth="0"]) > .exercise-category-row::before {
    position: absolute;
    z-index: 0;
    inset-inline-start: calc(
      var(--category-row-padding)
      + ((var(--category-depth) - 1) * var(--category-tree-indent))
      + var(--category-tree-axis)
    );
    top: calc(var(--category-row-height) / 2);
    width: var(--category-tree-indent);
    border-top: var(--separator-width) solid color-mix(in srgb, var(--icon) 25%, transparent);
    content: "";
    pointer-events: none;
  }

  .exercise-category-row {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: var(--category-row-height);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    direction: rtl;
  }

  .exercise-category-row__surface {
    grid-column: 1;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: var(--secondary-list-item-min-height);
    grid-template-columns: minmax(0, 1fr) var(--category-toggle-width) var(--category-count-size);
    align-items: center;
    column-gap: 4px;
    padding: var(--secondary-list-item-padding);
    border: var(--separator-width) solid transparent;
    border-radius: var(--secondary-list-item-radius);
    direction: rtl;
    transition:
      color var(--duration-fast) ease,
      background-color var(--duration-fast) ease,
      border-color var(--duration-fast) ease,
      transform var(--duration-fast) ease;
  }

  .exercise-category-row__surface:hover {
    background: var(--hover-bg);
  }

  .exercise-category-row__surface:active {
    transform: scale(.985);
  }

  .exercise-category-row__surface.is-active {
    border-color: color-mix(in srgb, var(--accent) 14%, var(--separator-color));
    background: var(--selected-bg);
    color: var(--accent-strong);
  }

  .exercise-category-row__surface.is-active .exercise-filter__count {
    color: var(--accent-strong);
  }

  .exercise-category-select {
    grid-column: 1;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    color: inherit;
    text-align: right;
  }

  .exercise-category-select__inner,
  .exercise-category-row--system .exercise-category-select {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    grid-template-columns: var(--category-media-size) minmax(0, 1fr);
    align-items: center;
    gap: var(--secondary-list-item-gap);
  }

  .exercise-category-select__inner {
    padding-inline-start: calc(var(--category-depth, 0) * var(--category-tree-indent));
  }

  .exercise-category-media {
    position: relative;
    z-index: 1;
    display: grid;
    width: var(--category-media-size);
    height: var(--category-media-size);
    min-width: var(--category-media-size);
    place-items: center;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-media-radius);
    background: var(--sidebar-bg);
    color: var(--icon);
  }

  .exercise-category-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .exercise-category-filter__icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--icon);
    font-size: 24px;
    line-height: 1;
  }

  .exercise-category-row__surface.is-active .exercise-category-filter__icon,
  .exercise-category-row__surface.is-active .exercise-category-media {
    color: var(--accent);
  }

  .exercise-category-filter__copy {
    display: block;
    min-width: 0;
    overflow: hidden;
  }

  .exercise-category-filter__copy strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 520;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .exercise-category-toggle {
    grid-column: 2;
    display: grid;
    width: var(--category-toggle-width);
    height: 34px;
    place-items: center;
    justify-self: center;
    padding: 0;
    border-radius: 8px;
    color: var(--icon);
  }

  button.exercise-category-toggle:hover {
    color: var(--text);
    background: var(--hover-bg);
  }

  .exercise-category-toggle--placeholder {
    visibility: hidden;
    pointer-events: none;
  }

  .exercise-category-toggle__chevron {
    display: block;
    width: 8px;
    height: 8px;
    border-inline-end: var(--separator-width) solid currentColor;
    border-block-end: var(--separator-width) solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--duration-fast) ease;
  }

  .exercise-category-toggle.is-collapsed .exercise-category-toggle__chevron {
    transform: rotate(135deg);
  }

  .exercise-category-row__surface .exercise-filter__count {
    grid-column: 3;
    display: grid;
    width: var(--category-count-size);
    height: var(--category-count-size);
    min-width: var(--category-count-size);
    margin: 0;
    place-items: center;
    justify-self: end;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--radius-circle);
    background: var(--sidebar-bg);
    color: var(--text-soft);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1;
  }

  .exercise-category-manage {
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc(-1 * var(--workspace-column-padding));
    display: grid;
    width: var(--workspace-column-padding);
    height: var(--category-row-height);
    place-items: center;
    padding: 0;
    color: var(--icon);
  }

  .exercise-category-manage:hover {
    color: var(--text);
  }

  .exercise-category-manage .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .exercise-pagination {
    display: grid;
    width: fit-content;
    max-width: 100%;
    grid-template-columns: 38px minmax(0, auto) 38px auto;
    align-items: center;
    gap: 8px;
    margin: 26px auto 0;
    padding: 7px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 15px;
    background: var(--sidebar-bg);
  }

  .exercise-pagination[hidden] {
    display: none;
  }

  .exercise-pagination__pages {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
  }

  .exercise-pagination__arrow,
  .exercise-pagination__page {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: var(--separator-width) solid transparent;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 650;
  }

  .exercise-pagination__arrow:hover,
  .exercise-pagination__page:hover {
    border-color: var(--separator-color);
    background: var(--exercise-surface-bg);
    color: var(--text);
  }

  .exercise-pagination__page.is-active {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--separator-color));
    background: var(--selected-bg);
    color: var(--accent-strong);
  }

  .exercise-pagination__arrow:disabled {
    opacity: .34;
    cursor: not-allowed;
  }

  .exercise-pagination__arrow .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .exercise-pagination__ellipsis {
    display: grid;
    width: 24px;
    place-items: center;
    color: var(--text-soft);
  }

  .exercise-pagination__summary {
    padding-inline: 8px 4px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    color: var(--text-soft);
    font-size: 10.5px;
    white-space: nowrap;
  }

  .category-editor-hero {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .category-editor-hero__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
  }

  .category-editor-hero__media {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
    background: var(--exercise-surface-bg);
    color: var(--accent);
  }

  .category-editor-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .category-editor-hero__media .icon {
    width: 23px;
    height: 23px;
    font-size: 23px;
  }

  .category-editor-hero__copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .category-editor-hero__copy strong,
  .category-editor-hero__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .category-editor-hero__copy strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 650;
  }

  .category-editor-hero__copy small {
    color: var(--text-soft);
    font-size: 11.5px;
  }

  .category-status-toggle {
    display: inline-flex;
    min-width: 102px;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 11px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    background: var(--app-bg);
    cursor: pointer;
  }

  .category-status-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .category-status-toggle__track {
    position: relative;
    width: 36px;
    height: 22px;
    flex: 0 0 36px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--radius-circle);
    background: var(--sidebar-bg);
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }

  .category-status-toggle__track::after {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-circle);
    background: var(--icon);
    content: "";
    transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }

  .category-status-toggle input:focus-visible + .category-status-toggle__track {
    outline: 1px solid color-mix(in srgb, var(--text-soft) 58%, transparent);
    outline-offset: 1px;
  }

  .category-status-toggle input:checked + .category-status-toggle__track {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--separator-color));
    background: color-mix(in srgb, var(--accent) 14%, var(--sidebar-bg));
  }

  .category-status-toggle input:checked + .category-status-toggle__track::after {
    background: var(--accent);
    transform: translateX(-14px);
  }

  .category-status-toggle__label {
    min-width: 38px;
    color: var(--text);
    font-size: 11.5px;
    font-weight: 650;
    text-align: center;
  }

  .category-status-toggle.is-inactive .category-status-toggle__label {
    color: var(--text-soft);
  }

  .exercise-category-form__editor {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 16px;
  }

  .exercise-category-form__editor[hidden] {
    display: none;
  }

  .exercise-category-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .exercise-category-form__meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(128px, .7fr);
    gap: 16px;
  }

  .category-image-uploader__actions {
    flex: 0 0 auto;
  }

  .exercise-category-form__message,
  .category-delete-confirmation__message {
    min-height: 20px;
    color: var(--text-soft);
    font-size: 12px;
  }

  .exercise-category-form__message.is-error,
  .category-delete-confirmation__message.is-error {
    color: var(--danger);
  }

  .exercise-category-form__actions {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
  }

  .exercise-category-form__actions-spacer {
    flex: 1;
  }

  .exercise-category-form__delete[hidden] {
    display: none;
  }

  .category-delete-confirmation {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 24px;
    border: var(--separator-width) solid color-mix(in srgb, var(--danger) 24%, var(--separator-color));
    border-radius: 18px;
    background: var(--sidebar-bg);
  }

  .category-delete-confirmation[hidden] {
    display: none;
  }

  .category-delete-confirmation__icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
  }

  .category-delete-confirmation__copy {
    display: grid;
    gap: 5px;
  }

  .category-delete-confirmation__copy strong {
    font-size: 15px;
  }

  .category-delete-confirmation__copy p {
    color: var(--text-soft);
    font-size: 12px;
  }

  .category-delete-confirmation__replacement,
  .category-delete-confirmation__actions,
  .category-delete-confirmation__message {
    grid-column: 1 / -1;
  }

  .category-delete-confirmation__replacement[hidden] {
    display: none;
  }

  .category-delete-confirmation__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

}

@media (max-width: 820px) {
  @layer exercises {
    .exercise-pagination {
      width: 100%;
      grid-template-columns: 36px minmax(0, 1fr) 36px;
      gap: 5px;
      padding: 6px;
    }

    .exercise-pagination__pages {
      justify-content: center;
      overflow: hidden;
    }

    .exercise-pagination__page,
    .exercise-pagination__arrow {
      width: 34px;
      height: 34px;
      flex-basis: 34px;
    }

    .exercise-pagination__summary {
      grid-column: 1 / -1;
      padding: 6px 4px 2px;
      border-inline-start: 0;
      border-top: var(--separator-width) solid var(--separator-color);
      text-align: center;
    }

    .category-editor-hero {
      gap: 10px;
    }

    .category-editor-hero__media {
      width: 42px;
      height: 42px;
      flex-basis: 42px;
      border-radius: 12px;
    }

    .category-editor-hero__copy small {
      max-width: 180px;
    }

    .category-status-toggle {
      min-width: 92px;
      min-height: 40px;
      padding-inline: 9px;
    }

    .exercise-category-form__grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .exercise-category-form__meta-grid {
      grid-template-columns: minmax(0, 1.55fr) minmax(96px, .7fr);
      gap: 8px;
    }

    .exercise-category-form__media-section {
      padding-block: 12px;
    }

    .category-image-uploader {
      gap: 9px;
    }

    .category-image-uploader small {
      display: none;
    }

    .exercise-category-form__actions {
      flex-wrap: nowrap;
      gap: 6px;
    }

    .exercise-category-form__actions > .bottom-sheet-action {
      width: var(--bottom-sheet-action-size);
      min-width: var(--bottom-sheet-action-size);
      min-height: var(--bottom-sheet-action-size);
      flex: 0 0 var(--bottom-sheet-action-size);
      padding: 0;
    }

    .category-delete-confirmation {
      grid-template-columns: 48px minmax(0, 1fr);
      padding: 18px 14px;
    }

    .category-delete-confirmation__icon {
      width: 48px;
      height: 48px;
    }

    .category-delete-confirmation__actions {
      flex-direction: row;
    }
  }
}

@layer components {
  .content-column__content:has(.dashboard) {
    place-items: start center;
  }

  .dashboard {
    display: grid;
    width: min(100%, 1240px);
    min-width: 0;
    align-self: start;
    gap: 14px;
    padding-bottom: 8px;
  }

  .dashboard-surface,
  .dashboard-panel {
    min-width: 0;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--primary-surface-radius);
    background: var(--sidebar-bg);
  }

  .dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    align-items: stretch;
  }

  .dashboard-hero__welcome {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 18px;
    padding: 26px;
  }

  .dashboard-hero__copy {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  .dashboard-hero__copy > span,
  .dashboard-section-header span,
  .dashboard-panel__header > div > span,
  .dashboard-current-workout__heading > span {
    color: var(--accent);
    font-size: 11px;
    font-weight: 690;
  }

  .dashboard-hero__copy h1 {
    color: var(--text);
    font-size: clamp(25px, 2.2vw, 34px);
    font-weight: 760;
    line-height: 1.12;
  }

  .dashboard-hero__copy p {
    max-width: 520px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.6;
  }

  .dashboard-current-workout {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 15px;
    padding: 22px 24px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    background: color-mix(in srgb, var(--app-bg) 72%, var(--sidebar-bg));
  }

  .dashboard-current-workout.is-active {
    background: color-mix(in srgb, var(--accent) 5%, var(--sidebar-bg));
  }

  .dashboard-current-workout__heading {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .dashboard-current-workout__heading strong {
    overflow: hidden;
    color: var(--text);
    font-size: 20px;
    font-weight: 740;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-current-workout__heading small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-current-workout__status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--success) !important;
  }

  .dashboard-current-workout__status .icon {
    width: 8px;
    height: 8px;
    font-size: 8px;
  }

  .dashboard-current-workout__status .icon::before {
    border-radius: 50%;
    background: currentColor;
  }

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

  .dashboard-current-workout__progress > span {
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: var(--radius-circle);
    background: color-mix(in srgb, var(--accent) 12%, var(--separator-color));
  }

  .dashboard-current-workout__progress > span > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
  }

  .dashboard-current-workout__progress > strong {
    min-width: 34px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 730;
    text-align: left;
  }

  .dashboard-primary-action,
  .dashboard-secondary-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
  }

  .dashboard-primary-action {
    width: fit-content;
    min-width: 138px;
    padding: 0 18px;
    background: var(--accent);
    color: var(--on-accent);
  }

  .dashboard-primary-action:hover { background: var(--accent-strong); }

  .dashboard-primary-action .icon,
  .dashboard-secondary-action .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .dashboard-weekly .primary-stat-grid {
    border-top: var(--separator-width) solid var(--separator-color);
    border-bottom: 0;
  }

  .dashboard-section-header {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
  }

  .dashboard-section-header > div {
    display: grid;
    gap: 2px;
  }

  .dashboard-section-header h2,
  .dashboard-panel__header h2 {
    color: var(--text);
    font-size: 18px;
    font-weight: 730;
    line-height: 1.25;
  }

  .dashboard-section-header > a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 13px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 11px;
    background: var(--app-bg);
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 650;
  }

  .dashboard-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .dashboard-grid--top {
    grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr);
  }

  .dashboard-panel {
    display: grid;
    align-content: start;
  }

  .dashboard-panel__header {
    display: grid;
    min-height: 82px;
    grid-template-columns: 48px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .dashboard-panel__header > div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .dashboard-panel__header h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-panel__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .dashboard-panel__icon .icon {
    width: 23px;
    height: 23px;
    font-size: 23px;
  }

  .dashboard-panel__link {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 11px;
    background: var(--app-bg);
    color: var(--icon);
  }

  .dashboard-panel__link .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .dashboard-panel__footer {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 10px 17px;
    border-top: var(--separator-width) solid var(--separator-color);
    color: var(--text-soft);
    font-size: 10.5px;
  }

  .dashboard-panel__footer span {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .dashboard-panel__footer .icon {
    width: 16px;
    height: 16px;
    color: var(--accent);
    font-size: 16px;
  }

  .dashboard-panel__empty {
    display: flex;
    min-height: 156px;
    align-items: center;
    gap: 13px;
    padding: 22px;
    color: var(--text-soft);
  }

  .dashboard-panel__empty > .system-icon-tile {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
  }

  .dashboard-panel__empty > .system-icon-tile .icon {
    width: 23px;
    height: 23px;
    font-size: 23px;
  }

  .dashboard-panel__empty > div {
    display: grid;
    gap: 4px;
  }

  .dashboard-panel__empty strong {
    color: var(--text);
    font-size: 14px;
  }

  .dashboard-panel__empty p {
    max-width: 440px;
    font-size: 11px;
    line-height: 1.55;
  }

  .dashboard-activity {
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
  }

  .dashboard-activity__chart {
    display: grid;
    min-height: 230px;
    height: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    direction: rtl;
    gap: 10px;
    padding: 22px 20px 18px;
  }

  .dashboard-activity__day {
    width: min(100%, 64px);
    min-width: 0;
    min-height: 178px;
    justify-self: center;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 50px;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-bg) 80%, var(--sidebar-bg));
  }

  .dashboard-activity__day.has-activity {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--separator-color));
  }

  .dashboard-activity__plot {
    position: relative;
    display: flex;
    min-height: 0;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--app-bg) 80%, var(--sidebar-bg));
  }

  .dashboard-activity__bar {
    width: 100%;
    height: var(--activity-height, 0%);
    min-height: 0;
    box-sizing: border-box;
    border: 0;
    background: color-mix(in srgb, var(--accent) 17%, var(--sidebar-bg));
  }

  .dashboard-activity__value {
    position: absolute;
    z-index: 1;
    top: 9px;
    color: var(--text-soft);
    font-size: 9.5px;
    font-weight: 700;
  }

  .dashboard-activity__meta {
    display: grid;
    place-content: center;
    gap: 2px;
    padding: 6px 3px;
    text-align: center;
    border-top: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .dashboard-activity__day.has-activity .dashboard-activity__meta {
    border-top-color: color-mix(in srgb, var(--accent) 30%, var(--separator-color));
  }

  .dashboard-activity__day strong {
    color: var(--text);
    font-size: 10.5px;
    line-height: 1.2;
  }

  .dashboard-activity__day small {
    color: var(--text-soft);
    font-size: 8.5px;
    line-height: 1.2;
  }

  .dashboard-activity__day.is-today .dashboard-activity__meta {
    border-top-color: var(--accent);
    background: var(--accent);
  }

  .dashboard-activity__day.is-today strong,
  .dashboard-activity__day.is-today small {
    color: var(--on-accent);
  }

  .dashboard-measurement__primary {
    display: grid;
    min-height: 126px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px;
  }

  .dashboard-measurement__primary > div {
    display: grid;
    gap: 2px;
  }

  .dashboard-measurement__primary > div small,
  .dashboard-measurement__primary > div span,
  .dashboard-measurement__change small {
    color: var(--text-soft);
    font-size: 10px;
  }

  .dashboard-measurement__primary > div strong {
    color: var(--text);
    font-size: 28px;
    font-weight: 760;
    line-height: 1.1;
  }

  .dashboard-measurement__change {
    display: grid;
    min-width: 116px;
    min-height: 64px;
    align-content: center;
    justify-items: center;
    gap: 3px;
    padding: 9px 12px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 13px;
    background: var(--app-bg);
    color: var(--text);
    font-size: 14px;
    font-weight: 730;
  }

  .dashboard-measurement__metrics,
  .dashboard-last-workout__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--separator-width) solid var(--separator-color);
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .dashboard-measurement__metrics > span,
  .dashboard-last-workout__metrics > span {
    display: grid;
    min-width: 0;
    min-height: 72px;
    align-content: center;
    gap: 3px;
    padding: 11px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    text-align: center;
  }

  .dashboard-measurement__metrics > span:first-child,
  .dashboard-last-workout__metrics > span:first-child {
    border-inline-start: 0;
  }

  .dashboard-measurement__metrics strong,
  .dashboard-last-workout__metrics strong {
    overflow: hidden;
    color: var(--text);
    font-size: 15px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-measurement__metrics small,
  .dashboard-last-workout__metrics small {
    color: var(--text-soft);
    font-size: 9.5px;
  }

  .dashboard-secondary-action {
    width: calc(100% - 32px);
    margin: 14px 16px 16px;
    border: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
    color: var(--text);
  }

  .dashboard-progress:has(.dashboard-progress__bars) {
    grid-template-rows: auto auto minmax(118px, 1fr) auto auto;
    align-content: stretch;
  }

  .dashboard-progress__summary {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 92px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
  }

  .dashboard-progress__summary > div {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .dashboard-progress__summary strong {
    overflow: hidden;
    color: var(--text);
    font-size: 21px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-progress__summary small {
    color: var(--text-soft);
    font-size: 10px;
  }

  .dashboard-trend {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 11px;
    background: var(--app-bg);
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 680;
    white-space: nowrap;
  }

  .dashboard-trend .icon {
    width: 17px;
    height: 17px;
    font-size: 17px;
  }

  .dashboard-trend--up { color: var(--success); }
  .dashboard-trend--down { color: var(--danger); }
  .dashboard-trend--new { color: var(--accent); }

  .dashboard-progress__bars {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 118px;
    align-items: flex-end;
    gap: 7px;
    padding: 12px 18px 0;
    direction: rtl;
    overflow: hidden;
    border-top: var(--separator-width) solid var(--separator-color);
    background: linear-gradient(to top, color-mix(in srgb, var(--separator-color) 55%, transparent) 1px, transparent 1px) 0 100% / 100% 33.333%;
  }

  .dashboard-progress__bars > span {
    display: block;
    min-width: 0;
    height: var(--progress-bar-height, 12%);
    flex: 1 1 0;
    border: var(--separator-width) solid color-mix(in srgb, var(--accent) 26%, var(--separator-color));
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: color-mix(in srgb, var(--accent) 22%, var(--sidebar-bg));
  }

  .dashboard-progress__bars > span:last-child {
    background: var(--accent);
  }

  .dashboard-progress__footer {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-top: var(--separator-width) solid var(--separator-color);
    color: var(--text-soft);
    font-size: 10.5px;
  }

  .dashboard-progress__footer a {
    color: var(--accent);
    font-weight: 680;
  }

  .dashboard-last-workout__card {
    display: grid;
    min-height: 104px;
    grid-template-columns: 70px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
  }

  .dashboard-last-workout__date {
    display: grid;
    min-height: 58px;
    align-content: center;
    justify-items: center;
    gap: 2px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 13px;
    background: var(--app-bg);
  }

  .dashboard-last-workout__date strong {
    color: var(--text);
    font-size: 12px;
  }

  .dashboard-last-workout__date small {
    color: var(--text-soft);
    font-size: 9px;
  }

  .dashboard-last-workout__copy {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .dashboard-last-workout__copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: 17px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-last-workout__copy small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-last-workout__card > .icon {
    width: 20px;
    height: 20px;
    color: var(--icon);
    font-size: 20px;
  }


  .dashboard-last-workout__insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-last-workout__insight {
    display: grid;
    min-width: 0;
    min-height: 94px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
  }

  .dashboard-last-workout__insight:first-child {
    border-inline-start: 0;
  }

  .dashboard-last-workout__insight > .system-icon-tile {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .dashboard-last-workout__insight > .system-icon-tile .icon {
    width: 21px;
    height: 21px;
    font-size: 21px;
  }

  .dashboard-last-workout__insight > span:last-child {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .dashboard-last-workout__insight small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-last-workout__insight strong {
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-last-workout__insight em {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 9.5px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-last-workout__insight--up > .system-icon-tile,
  .dashboard-last-workout__insight--up strong {
    color: var(--success);
  }

  .dashboard-last-workout__insight--down > .system-icon-tile,
  .dashboard-last-workout__insight--down strong {
    color: var(--danger);
  }

  .dashboard-last-workout__footer span,
  .dashboard-progress__note span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-last-workout__footer.has-records {
    color: var(--accent);
  }

  .dashboard-achievements__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .achievement-layout__cell--span-2 { grid-column: span 2; }
  .achievement-layout__cell--span-3 { grid-column: span 3; }
  .achievement-layout__cell--span-6 { grid-column: span 6; }

  .dashboard-achievement {
    display: grid;
    min-width: 0;
    min-height: 94px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    border-top: var(--separator-width) solid var(--separator-color);
  }

  .dashboard-achievement.achievement-layout__cell--row-start { border-inline-start: 0; }
  .dashboard-achievement.achievement-layout__cell--first-row { border-top: 0; }

  .dashboard-achievement > .system-icon-tile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .dashboard-achievement > .system-icon-tile .icon {
    width: 21px;
    height: 21px;
    font-size: 21px;
  }

  .dashboard-achievement > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .dashboard-achievement small,
  .dashboard-achievement time {
    color: var(--text-soft);
    font-size: 9px;
  }

  .dashboard-achievement strong,
  .dashboard-achievement em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-achievement strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
  }

  .dashboard-achievement em {
    color: var(--accent);
    font-size: 10px;
    font-style: normal;
  }

  .dashboard-achievement time { white-space: nowrap; }

  .dashboard-panel__empty--wide { min-height: 104px; }

  .dashboard-quick-actions .dashboard-section-header {
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .dashboard-quick-actions__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-quick-actions__grid > a,
  .dashboard-quick-actions__grid > button {
    display: grid;
    min-width: 0;
    min-height: 122px;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    gap: 2px 11px;
    padding: 17px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
    text-align: start;
  }

  .dashboard-quick-actions__grid > :first-child { border-inline-start: 0; }

  .dashboard-quick-actions__grid .system-icon-tile {
    width: 46px;
    height: 46px;
    grid-row: 1 / 3;
    border-radius: 13px;
  }

  .dashboard-quick-actions__grid .system-icon-tile .icon {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }

  .dashboard-quick-actions__grid strong,
  .dashboard-quick-actions__grid small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-quick-actions__grid strong {
    align-self: end;
    color: var(--text);
    font-size: 13px;
    font-weight: 710;
  }

  .dashboard-quick-actions__grid small {
    align-self: start;
    color: var(--text-soft);
    font-size: 9.5px;
  }

  .dashboard-habits__content {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.32fr) minmax(360px, .68fr);
  }

  .dashboard-habits__section {
    display: grid;
    min-width: 0;
    align-content: start;
  }

  .dashboard-habits__section + .dashboard-habits__section {
    border-inline-start: var(--separator-width) solid var(--separator-color);
  }

  .dashboard-habits__section-header {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 17px;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .dashboard-habits__section-header > div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .dashboard-habits__section-header > div > span {
    color: var(--text-soft);
    font-size: 9.5px;
  }

  .dashboard-habits__section-header h3 {
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    font-weight: 710;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-habits__peak {
    display: inline-flex;
    min-height: 32px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: var(--separator-width) solid color-mix(in srgb, var(--accent) 24%, var(--separator-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 7%, var(--sidebar-bg));
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
  }

  .dashboard-habits__peak .icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }

  .dashboard-habits__hour-chart {
    direction: rtl;
    display: grid;
    min-height: 172px;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
    gap: 4px;
    padding: 20px 18px 14px;
  }

  .dashboard-habits__hour {
    display: grid;
    min-width: 0;
    grid-template-rows: 116px 18px;
    align-items: end;
    justify-items: stretch;
    gap: 5px;
  }

  .dashboard-habits__hour-track {
    display: flex;
    width: 100%;
    height: 116px;
    align-items: flex-end;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 6px 6px 2px 2px;
    background: color-mix(in srgb, var(--app-bg) 82%, var(--sidebar-bg));
  }

  .dashboard-habits__hour.has-activity .dashboard-habits__hour-track {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--separator-color));
  }

  .dashboard-habits__hour-track > span {
    width: 100%;
    height: var(--habit-hour-height, 0%);
    min-height: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 5px 5px 0 0;
    background: color-mix(in srgb, var(--accent) 16%, var(--sidebar-bg));
  }

  .dashboard-habits__hour.is-peak .dashboard-habits__hour-track {
    border-color: var(--accent);
  }

  .dashboard-habits__hour.is-peak .dashboard-habits__hour-track > span {
    background: var(--accent);
  }

  .dashboard-habits__hour small {
    min-width: 0;
    color: var(--text-soft);
    font-size: 8px;
    line-height: 18px;
    text-align: center;
  }

  .dashboard-habits__hour.is-peak small {
    color: var(--accent);
    font-weight: 720;
  }

  .dashboard-habits__day-grid {
    direction: rtl;
    display: grid;
    min-height: 172px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
    padding: 20px 17px;
  }

  .dashboard-habits__day {
    display: grid;
    min-width: 0;
    min-height: 112px;
    grid-template-rows: 40px minmax(0, 1fr);
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--app-bg) 72%, var(--sidebar-bg));
  }

  .dashboard-habits__day-label {
    display: grid;
    min-width: 0;
    place-items: center;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .dashboard-habits__day-label small {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 720;
    line-height: 1;
  }

  .dashboard-habits__day-value {
    display: grid;
    min-width: 0;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 9px 4px 10px;
  }

  .dashboard-habits__day strong {
    overflow: hidden;
    max-width: 100%;
    color: var(--text);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    font-weight: 760;
    letter-spacing: -.01em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-habits__day.is-three-digit-count strong {
    font-size: 18px;
    letter-spacing: -.035em;
  }

  .dashboard-habits__day.is-compact-count strong {
    font-size: 17px;
    letter-spacing: -.025em;
  }

  .dashboard-habits__day em {
    overflow: hidden;
    max-width: 100%;
    color: var(--text-soft);
    font-size: 8.5px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-habits__day.is-peak {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--separator-color));
    background: color-mix(in srgb, var(--accent) 7%, var(--sidebar-bg));
  }

  .dashboard-habits__day.is-peak .dashboard-habits__day-label {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--separator-color));
    background: var(--accent);
  }

  .dashboard-habits__day.is-peak .dashboard-habits__day-label small {
    color: var(--on-accent);
  }

  .dashboard-habits__day.is-peak strong,
  .dashboard-habits__day.is-peak em {
    color: var(--accent);
  }

  .dashboard__message {
    min-height: 0;
    color: var(--danger);
    font-size: 11px;
    text-align: center;
  }

  @media (max-width: 1100px) and (min-width: 821px) {
    .dashboard-hero { grid-template-columns: minmax(0, 1fr) minmax(310px, .9fr); }
    .dashboard-hero__welcome { padding: 22px; }
    .dashboard-grid--top { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); }
    .dashboard-achievement.achievement-layout__cell {
      grid-column: span 3;
      border-inline-start: var(--separator-width) solid var(--separator-color);
      border-top: var(--separator-width) solid var(--separator-color);
    }
    .dashboard-achievement.achievement-layout__cell:nth-child(odd) { border-inline-start: 0; }
    .dashboard-achievement.achievement-layout__cell:nth-child(-n + 2) { border-top: 0; }
    .dashboard-achievements__list.achievement-layout--odd > .achievement-layout__cell:last-child { grid-column: span 6; }
    .dashboard-quick-actions__grid > a,
    .dashboard-quick-actions__grid > button { grid-template-columns: 42px minmax(0, 1fr); padding: 14px; }
  }

  @media (max-width: 820px) {
    .content-column__content:has(.dashboard) {
      place-items: start stretch;
    }

    .dashboard {
      width: 100%;
      gap: 11px;
      padding-bottom: 2px;
    }

    .dashboard-surface,
    .dashboard-panel {
      border-radius: 17px;
    }

    .dashboard-hero {
      grid-template-columns: 1fr;
    }

    .dashboard-hero__welcome {
      gap: 13px;
      padding: 17px 15px;
    }

    .dashboard-hero__copy h1 { font-size: 23px; }
    .dashboard-hero__copy p { font-size: 10.5px; }

    .dashboard-current-workout {
      gap: 13px;
      padding: 16px 15px;
      border-inline-start: 0;
      border-top: var(--separator-width) solid var(--separator-color);
    }

    .dashboard-current-workout__heading strong { font-size: 18px; }
    .dashboard-primary-action { width: 100%; }

    .dashboard-section-header {
      min-height: 66px;
      padding: 13px 14px;
    }

    .dashboard-section-header h2,
    .dashboard-panel__header h2 { font-size: 16px; }

    .dashboard-section-header > a {
      min-height: 34px;
      padding: 0 10px;
      font-size: 10px;
    }

    .dashboard-grid,
    .dashboard-grid--top {
      grid-template-columns: 1fr;
      gap: 11px;
    }

    .dashboard-panel__header {
      min-height: 72px;
      grid-template-columns: 42px minmax(0, 1fr) 36px;
      gap: 10px;
      padding: 12px 13px;
    }

    .dashboard-panel__icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
    }

    .dashboard-panel__icon .icon {
      width: 21px;
      height: 21px;
      font-size: 21px;
    }

    .dashboard-panel__link {
      width: 36px;
      height: 36px;
      border-radius: 10px;
    }

    .dashboard-habits__content {
      grid-template-columns: 1fr;
    }

    .dashboard-habits__section + .dashboard-habits__section {
      border-inline-start: 0;
      border-top: var(--separator-width) solid var(--separator-color);
    }

    .dashboard-habits__section-header {
      min-height: 66px;
      gap: 10px;
      padding: 11px 13px;
    }

    .dashboard-habits__section-header h3 { font-size: 12.5px; }

    .dashboard-habits__peak {
      min-height: 30px;
      padding-inline: 8px;
      font-size: 9px;
    }

    .dashboard-habits__hour-chart {
      min-height: 154px;
      gap: 3px;
      padding: 17px 12px 11px;
    }

    .dashboard-habits__hour {
      grid-template-rows: 100px 16px;
      gap: 4px;
    }

    .dashboard-habits__hour-track {
      height: 100px;
      border-radius: 5px 5px 2px 2px;
    }

    .dashboard-habits__hour small {
      font-size: 7px;
      line-height: 16px;
    }

    .dashboard-habits__day-grid {
      min-height: 142px;
      gap: 5px;
      padding: 15px 11px;
    }

    .dashboard-habits__day {
      min-height: 96px;
      grid-template-rows: 34px minmax(0, 1fr);
      border-radius: 10px;
    }

    .dashboard-habits__day-label small { font-size: 9px; }
    .dashboard-habits__day-value { gap: 5px; padding: 7px 3px 8px; }
    .dashboard-habits__day strong { font-size: 18px; }
    .dashboard-habits__day.is-three-digit-count strong { font-size: 15px; }
    .dashboard-habits__day.is-compact-count strong { font-size: 14px; }
    .dashboard-habits__day em { font-size: 7.5px; }

    .dashboard-activity__chart {
      min-height: 186px;
      gap: 6px;
      padding: 18px 12px 12px;
    }

    .dashboard-activity__day {
      width: min(100%, 48px);
      min-height: 154px;
      grid-template-rows: minmax(0, 1fr) 46px;
      border-radius: 10px;
    }

    .dashboard-activity__day small { font-size: 8px; }

    .dashboard-measurement__primary {
      min-height: 112px;
      padding: 15px;
    }

    .dashboard-measurement__primary > div strong { font-size: 24px; }
    .dashboard-measurement__change { min-width: 104px; }

    .dashboard-progress {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .dashboard-progress__summary {
      display: grid;
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      justify-items: start;
      gap: 10px;
      padding: 14px;
    }

    .dashboard-progress__summary > div {
      width: 100%;
      max-width: 100%;
    }

    .dashboard-progress__summary strong {
      max-width: 100%;
      font-size: 18px;
    }

    .dashboard-trend {
      max-width: 100%;
      min-height: 34px;
      padding-block: 7px;
      white-space: normal;
      line-height: 1.35;
      text-align: start;
    }

    .dashboard-trend .icon {
      flex: 0 0 auto;
    }

    .dashboard-progress__bars {
      min-height: 104px;
      gap: 5px;
      padding-inline: 12px;
    }

    .dashboard-progress__footer {
      flex-wrap: wrap;
      padding-inline: 14px;
    }

    .dashboard-progress__footer > span {
      min-width: 0;
      flex: 1 1 170px;
    }

    .dashboard-progress__footer > a {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .dashboard-progress__note {
      min-height: 0;
      align-items: flex-start;
      padding-block: 11px;
    }

    .dashboard-progress__note span {
      overflow: visible;
      white-space: normal;
      text-overflow: clip;
      line-height: 1.5;
    }

    .dashboard-progress__note .icon {
      flex: 0 0 auto;
      margin-top: 1px;
    }

    .dashboard-last-workout__card {
      min-height: 94px;
      grid-template-columns: 62px minmax(0, 1fr) 18px;
      gap: 11px;
      padding: 14px;
    }

    .dashboard-last-workout__date { min-height: 54px; }
    .dashboard-last-workout__copy strong { font-size: 15px; }


    .dashboard-last-workout__insight {
      min-height: 86px;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 9px;
      padding: 12px;
    }

    .dashboard-last-workout__insight > .system-icon-tile {
      width: 38px;
      height: 38px;
      border-radius: 11px;
    }

    .dashboard-last-workout__insight > .system-icon-tile .icon {
      width: 19px;
      height: 19px;
      font-size: 19px;
    }

    .dashboard-last-workout__insight strong { font-size: 12px; }

    .dashboard-achievements__list {
      grid-template-columns: 1fr;
    }

    .dashboard-achievement.achievement-layout__cell {
      grid-column: 1 / -1;
      min-height: 86px;
      border-inline-start: 0;
      border-top: var(--separator-width) solid var(--separator-color);
    }

    .dashboard-achievement:first-child { border-top: 0; }

    .dashboard-quick-actions__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-quick-actions__grid > a,
    .dashboard-quick-actions__grid > button {
      min-height: 104px;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 1px 9px;
      padding: 12px;
      border-top: var(--separator-width) solid var(--separator-color);
    }

    .dashboard-quick-actions__grid > :nth-child(odd) { border-inline-start: 0; }
    .dashboard-quick-actions__grid > :nth-child(even) { border-inline-start: var(--separator-width) solid var(--separator-color); }
    .dashboard-quick-actions__grid > :nth-child(-n + 2) { border-top: 0; }

    .dashboard-quick-actions__grid .system-icon-tile {
      width: 40px;
      height: 40px;
      border-radius: 12px;
    }

    .dashboard-quick-actions__grid .system-icon-tile .icon {
      width: 20px;
      height: 20px;
      font-size: 20px;
    }

    .dashboard-quick-actions__grid strong { font-size: 11.5px; }
    .dashboard-quick-actions__grid small { font-size: 8.5px; }
  }

  @media (max-width: 390px) {
    .dashboard-hero__welcome { align-items: flex-start; }
    .dashboard-hero__copy p { display: none; }
    .dashboard-habits__section-header { align-items: flex-start; }
    .dashboard-habits__peak { max-width: 112px; white-space: nowrap; }
    .dashboard-habits__hour-chart { gap: 2px; padding-inline: 8px; }
    .dashboard-habits__day-grid { gap: 4px; padding-inline: 8px; }
    .dashboard-habits__day { min-height: 90px; }
    .dashboard-activity__chart { gap: 4px; padding-inline: 9px; }
    .dashboard-activity__day {
      width: min(100%, 42px);
      min-height: 146px;
      grid-template-rows: minmax(0, 1fr) 44px;
    }
    .dashboard-measurement__primary { grid-template-columns: 1fr; gap: 10px; }
    .dashboard-measurement__change { min-width: 0; justify-items: start; }
    .dashboard-last-workout__insights { grid-template-columns: 1fr; }
    .dashboard-last-workout__insight { border-inline-start: 0; border-top: var(--separator-width) solid var(--separator-color); }
    .dashboard-last-workout__insight:first-child { border-top: 0; }
    .dashboard-achievement { grid-template-columns: 40px minmax(0, 1fr); }
    .dashboard-achievement time { display: none; }
  }
}

@layer components {
  .content-column__content:has(.profile-page) {
    place-items: start center;
  }

  .profile-page {
    width: min(100%, 1240px);
    min-width: 0;
    align-self: start;
    display: grid;
    gap: 14px;
    padding-bottom: 8px;
  }

  .profile-surface,
  .profile-panel {
    min-width: 0;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--primary-surface-radius);
    background: var(--sidebar-bg);
  }

  .profile-hero {
    min-height: 132px;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
  }

  .profile-hero__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .profile-hero__icon .icon {
    width: 29px;
    height: 29px;
    font-size: 29px;
  }

  .profile-hero__copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .profile-hero__copy > span,
  .profile-panel__header > div > span {
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
  }

  .profile-hero__copy h1 {
    overflow: hidden;
    color: var(--text);
    font-size: 24px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-hero__copy p {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 11px;
    direction: ltr;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-hero__meta {
    display: grid;
    grid-auto-flow: column;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
  }

  .profile-hero__meta > span {
    min-width: 112px;
    min-height: 66px;
    padding: 10px 12px;
    display: grid;
    place-content: center;
    gap: 3px;
    text-align: center;
    border-inline-start: var(--separator-width) solid var(--separator-color);
  }

  .profile-hero__meta > span:first-child { border-inline-start: 0; }
  .profile-hero__meta strong { color: var(--text); font-size: 12px; }
  .profile-hero__meta small { color: var(--text-soft); font-size: 8.5px; }

  .profile-layout {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }

  .profile-panel {
    display: grid;
    align-content: start;
  }

  .profile-panel__header {
    min-height: 82px;
    padding: 15px 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }

  .profile-panel__header > .system-icon-tile {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .profile-panel__header > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .profile-panel__header h2 {
    color: var(--text);
    font-size: 17px;
    line-height: 1.2;
  }

  .profile-form {
    min-width: 0;
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
  }

  .profile-form > .profile-primary-button,
  .profile-form > .profile-secondary-button {
    grid-column: 1;
    width: min(100%, 220px);
    justify-self: start;
  }

  .profile-form__message {
    grid-column: 2 / -1;
    min-height: 16px;
    align-self: center;
    color: var(--text-soft);
    font-size: 9.5px;
  }

  .profile-form__message:empty { min-height: 0; }
  .profile-form__message.is-error { color: var(--danger); }
  .profile-form__message.is-success { color: var(--success); }

  .profile-unit-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: center;
    overflow: hidden;
  }

  .profile-unit-input input {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
  }

  .profile-unit-input > span {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--text-soft);
    font-size: 10px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
  }

  .profile-primary-button,
  .profile-secondary-button {
    min-height: 48px;
    padding: 0 17px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
  }

  .profile-primary-button {
    color: var(--on-accent);
    background: var(--accent);
  }

  .profile-primary-button:hover { background: var(--accent-strong); }
  .profile-primary-button:disabled { opacity: .55; cursor: not-allowed; }

  .profile-secondary-button {
    color: var(--text);
    border: var(--separator-width) solid var(--separator-color);
    background: var(--app-bg);
  }

  .profile-primary-button .icon,
  .profile-secondary-button .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .profile-status-chip {
    min-height: 32px;
    padding: 0 11px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    background: var(--app-bg);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
  }

  .profile-status-chip.is-active {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 26%, var(--separator-color));
    background: color-mix(in srgb, var(--success) 8%, var(--sidebar-bg));
  }

  .profile-status-chip.is-blocked { color: var(--danger); }

  .profile-panel--notifications {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  }

  .profile-panel--notifications > .profile-panel__header,
  .profile-panel--notifications > .profile-panel__note {
    grid-column: 1 / -1;
  }

  .profile-setting-row {
    min-height: 104px;
    padding: 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 13px;
  }

  .profile-setting-row > .system-icon-tile {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .profile-setting-row > div {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .profile-setting-row strong { color: var(--text); font-size: 13px; }
  .profile-setting-row p { color: var(--text-soft); font-size: 10px; line-height: 1.6; }

  .profile-notification-actions {
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 9px;
    border-inline-start: var(--separator-width) solid var(--separator-color);
  }

  .profile-notification-actions > [hidden] { display: none; }
  .profile-notification-actions:has(> [hidden]) > :not([hidden]) { grid-column: 1 / -1; }

  .profile-panel__note {
    min-height: 50px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    color: var(--text-soft);
    font-size: 9.5px;
    line-height: 1.55;
    border-top: var(--separator-width) solid var(--separator-color);
  }

  .profile-panel__header + .profile-panel__note { border-top: 0; }

  .profile-theme-options {
    margin: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 14px;
  }

  .profile-theme-options > button {
    min-height: 82px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    text-align: right;
    background: var(--sidebar-bg);
    border-inline-start: var(--separator-width) solid var(--separator-color);
  }

  .profile-theme-options > button:first-child { border-inline-start: 0; }
  .profile-theme-options > button.is-active { background: color-mix(in srgb, var(--accent) 8%, var(--sidebar-bg)); }

  .profile-theme-options > button > .icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: var(--accent);
  }

  .profile-theme-options > button > span {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .profile-theme-options strong { color: var(--text); font-size: 12px; }
  .profile-theme-options small { color: var(--text-soft); font-size: 8.5px; }

  @media (max-width: 1100px) {
    .profile-hero { grid-template-columns: auto minmax(0, 1fr); }
    .profile-hero__meta {
      grid-column: 1 / -1;
      width: 100%;
      grid-auto-flow: row;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .profile-hero__meta > span { min-width: 0; }
    .profile-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-form > .system-field:last-of-type { grid-column: 1 / -1; }
    .profile-form > .profile-primary-button,
    .profile-form > .profile-secondary-button { grid-column: 1; }
    .profile-form__message { grid-column: 2; }
  }

  @media (max-width: 820px) {
    .content-column__content:has(.profile-page) { place-items: start stretch; }
    .profile-page { width: 100%; gap: 11px; padding-bottom: 2px; }
    .profile-surface,
    .profile-panel { border-radius: 17px; }
    .profile-hero { min-height: 0; padding: 16px; gap: 12px; }
    .profile-hero__icon { width: 56px; height: 56px; border-radius: 16px; }
    .profile-hero__copy h1 { font-size: 21px; }
    .profile-hero__meta > span { min-height: 58px; padding: 8px 5px; }
    .profile-layout { gap: 11px; }
    .profile-panel__header { min-height: 78px; padding: 14px 15px; }
    .profile-panel__header h2 { font-size: 16px; }
    .profile-form { padding: 15px; }
    .profile-panel--notifications { grid-template-columns: 1fr; }
    .profile-panel--notifications > * { grid-column: 1; }
    .profile-setting-row { min-height: 0; padding: 15px; }
    .profile-notification-actions {
      padding: 0 15px 15px;
      border-inline-start: 0;
    }
    .profile-panel__note { padding-inline: 15px; }
    .profile-theme-options { margin: 15px; }
  }

  @media (max-width: 620px) {
    .profile-form { grid-template-columns: 1fr; }
    .profile-form > .system-field:last-of-type,
    .profile-form > .profile-primary-button,
    .profile-form > .profile-secondary-button,
    .profile-form__message {
      grid-column: 1;
      width: 100%;
      max-width: none;
    }
    .profile-notification-actions { grid-template-columns: 1fr; }
  }

  @media (max-width: 430px) {
    .profile-hero__meta strong { font-size: 10.5px; }
    .profile-hero__meta small { font-size: 7.5px; }
    .profile-panel__header { grid-template-columns: auto minmax(0, 1fr); }
    .profile-panel__header .profile-status-chip {
      grid-column: 1 / -1;
      justify-self: stretch;
    }
    .profile-theme-options { grid-template-columns: 1fr; }
    .profile-theme-options > button {
      min-height: 70px;
      border-inline-start: 0;
      border-top: var(--separator-width) solid var(--separator-color);
    }
    .profile-theme-options > button:first-child { border-top: 0; }
  }
}

@layer components {
  .content-column__content:has(.system-settings-overview) { place-items: start center; }

  .system-settings-overview {
    width: min(100%, 1240px);
    min-width: 0;
    display: grid;
    align-self: start;
    gap: 14px;
    padding-bottom: 8px;
  }

  .system-settings-surface {
    min-width: 0;
    overflow: hidden;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--primary-surface-radius);
    background: var(--sidebar-bg);
  }

  .system-settings-hero {
    min-height: 128px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .system-settings-hero > .system-icon-tile { width: 64px; height: 64px; border-radius: 18px; }
  .system-settings-hero > .system-icon-tile .icon {
    width: 29px;
    height: 29px;
    place-self: center;
    font-size: 29px;
  }
  .system-settings-hero > div { min-width: 0; display: grid; gap: 3px; }
  .system-settings-hero span,
  .system-settings-section-header > div > span { color: var(--accent); font-size: 10.5px; font-weight: 700; }
  .system-settings-hero h1 { color: var(--text); font-size: 24px; line-height: 1.2; }
  .system-settings-hero p { color: var(--text-soft); font-size: 11px; }

  .system-settings-section-header {
    min-height: 82px;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: var(--separator-width) solid var(--separator-color);
  }
  .system-settings-section-header > div { min-width: 0; display: grid; gap: 2px; }
  .system-settings-section-header h2 { color: var(--text); font-size: 17px; }
  .system-settings-section-header > a {
    min-height: 38px;
    padding: 0 13px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
  }

  .system-settings-surface > .primary-stat-grid:last-child {
    border-bottom: 0;
  }

  .system-settings-available { display: grid; }
  .system-settings-primary-link {
    min-height: 94px;
    padding: 16px 18px;
    border-bottom: var(--separator-width) solid var(--separator-color);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
  }
  .system-settings-available > .primary-surface-note { border: 0; }
  .system-settings-primary-link > .system-icon-tile {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .system-settings-primary-link > .system-icon-tile .icon {
    width: 23px;
    height: 23px;
    font-size: 23px;
  }
  .system-settings-primary-link > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
  .system-settings-primary-link strong { color: var(--text); font-size: 13px; }
  .system-settings-primary-link small { color: var(--text-soft); font-size: 10px; }
  .system-settings-primary-link > .icon { color: var(--accent); font-size: 20px; }

  .system-settings-directory {
    width: 100%;
    min-height: 100%;
  }
  .system-settings-list {
    display: grid;
    align-content: start;
    gap: var(--secondary-list-gap);
  }
  .system-settings-list-item {
    width: 100%;
    min-width: 0;
    min-height: var(--secondary-list-item-min-height);
    padding: var(--secondary-list-item-padding);
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-item-radius);
    display: grid;
    grid-template-columns: var(--secondary-list-media-size) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--secondary-list-item-gap);
    color: var(--text);
    background: var(--sidebar-bg);
  }
  .system-settings-list-item__icon {
    width: var(--secondary-list-media-size);
    height: var(--secondary-list-media-size);
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--secondary-list-media-radius);
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--sidebar-bg);
  }
  .system-settings-list-item__icon .icon { font-size: 22px; }
  .system-settings-list-item__copy { min-width: 0; display: grid; gap: 2px; }
  .system-settings-list-item__copy strong,
  .system-settings-list-item__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .system-settings-list-item__copy strong { font-size: 14px; font-weight: 680; }
  .system-settings-list-item__copy small { color: var(--text-soft); font-size: 11.5px; }
  .system-settings-list-item__arrow { color: var(--icon); font-size: 18px; }
  .system-settings-list-item__status {
    min-height: 32px;
    padding: 0 9px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    color: var(--text-soft);
    font-size: 8.5px;
    font-weight: 700;
  }
  .system-settings-list-item.is-disabled { opacity: .62; }
  .system-settings-list-item.is-active {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--separator-color));
    background: var(--selected-bg);
  }
  .system-settings-list-item.is-active .system-settings-list-item__arrow,
  .system-settings-list-item.is-active .system-settings-list-item__icon { color: var(--accent); }

  @media (max-width: 820px) {
    .content-column__content:has(.system-settings-overview) { place-items: start stretch; }
    .system-settings-overview { width: 100%; gap: 11px; padding-bottom: 2px; }
    .system-settings-surface { border-radius: 17px; }
    .system-settings-hero { min-height: 0; padding: 16px; gap: 12px; }
    .system-settings-hero > .system-icon-tile { width: 56px; height: 56px; border-radius: 16px; }
    .system-settings-hero h1 { font-size: 21px; }
    .system-settings-section-header { min-height: 76px; padding: 14px 15px; }
    .system-settings-section-header h2 { font-size: 16px; }
    .system-settings-primary-link { padding: 14px 15px; }
  }

  @media (max-width: 560px) {
    .system-settings-section-header { align-items: flex-start; }
    .system-settings-section-header > a { min-height: 34px; }
  }
}

/* Build 212 — stable three-panel navigation using the shared responsive layer. */
@layer responsive {
  .workspace {
    --tertiary-column-width: clamp(310px, 26vw, 370px);
  }

  .workspace__header {
    grid-template-columns: 0 0 minmax(0, 1fr);
  }

  .workspace__header-cell--tertiary {
    display: none;
    grid-column: 2;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--header-action-gap);
    padding: 12px 24px;
    border-left: var(--separator-width) solid var(--separator-color);
    background: var(--sidebar-bg);
  }

  .workspace__header-cell--content {
    grid-column: 3;
  }

  .workspace.has-secondary .workspace__header {
    grid-template-columns: var(--secondary-column-width) 0 minmax(0, 1fr);
  }

  .workspace.has-tertiary .workspace__header {
    grid-template-columns: var(--secondary-column-width) var(--tertiary-column-width) minmax(0, 1fr);
  }

  .workspace.has-tertiary .workspace__header-cell--tertiary {
    display: flex;
  }

  .workspace__heading--tertiary,
  .workspace__heading--mobile-tertiary {
    min-width: 0;
  }

  .workspace__heading--mobile-tertiary {
    display: none;
  }

  .tertiary-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--header-action-gap);
  }

  .tertiary-header-actions--mobile {
    display: none;
  }

  .tertiary-header-actions .icon-action-button[aria-hidden="true"] {
    display: none !important;
  }

  .user-header-actions--mobile {
    display: none !important;
  }

  .workspace[data-view="users"].has-active-user .user-header-actions--desktop {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--header-action-gap);
  }

  .shell-columns {
    grid-template-columns: 0 0 minmax(0, 1fr);
  }

  .secondary-column,
  .tertiary-column,
  .content-column {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .secondary-column { grid-column: 1; }

  .tertiary-column {
    position: relative;
    grid-column: 2;
    opacity: 0;
    transform: translateX(-24px);
    border-left: 0 solid var(--separator-color);
    background: var(--sidebar-bg);
    pointer-events: none;
    transition:
      opacity var(--duration) ease,
      transform var(--duration-slow) var(--ease),
      background-color var(--duration) ease,
      border-color var(--duration) ease,
      border-width var(--duration-slow) var(--ease);
  }

  .content-column { grid-column: 3; }

  .workspace.has-secondary .shell-columns {
    grid-template-columns: var(--secondary-column-width) 0 minmax(0, 1fr);
  }

  .workspace.has-tertiary .shell-columns {
    grid-template-columns: var(--secondary-column-width) var(--tertiary-column-width) minmax(0, 1fr);
  }

  .workspace.has-tertiary .tertiary-column {
    opacity: 1;
    transform: translateX(0);
    border-left-width: var(--separator-width);
    pointer-events: auto;
  }

  .tertiary-column__content {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    place-items: center;
    overflow: auto;
    padding: var(--workspace-column-padding);
  }

  .tertiary-column__content--directory:not(.exercise-category-tertiary) {
    display: block;
    padding: 0;
  }

  .tertiary-column__content--directory.exercise-category-tertiary {
    display: block;
  }

  @media (min-width: 821px) {
    .workspace.has-tertiary .bottom-sheet-backdrop {
      width: calc(100% - var(--secondary-column-width) - var(--tertiary-column-width));
    }

    .workspace.has-tertiary .bottom-sheet {
      left: calc((100% - var(--secondary-column-width) - var(--tertiary-column-width)) / 2);
      width: min(760px, calc(100% - var(--secondary-column-width) - var(--tertiary-column-width) - 48px));
    }

    .workspace.has-tertiary .active-workout-return {
      width: calc(100% - var(--secondary-column-width) - var(--tertiary-column-width));
    }
  }

  @media (min-width: 821px) and (max-width: 1240px) {
    .workspace.has-tertiary {
      --tertiary-column-width: 300px;
    }
  }

  @media (max-width: 820px) {
    .workspace__header-cell--tertiary {
      display: none !important;
    }

    .shell-columns {
      display: block;
    }

    .secondary-column,
    .tertiary-column,
    .content-column {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
      transition:
        transform var(--duration-slow) var(--ease),
        background-color var(--duration) ease;
    }

    .tertiary-column {
      transform: translate3d(-100%, 0, 0);
      border-left: 0;
      pointer-events: none;
    }

    .workspace.has-tertiary .secondary-column {
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
    }

    .workspace.has-tertiary .tertiary-column {
      transform: translate3d(-100%, 0, 0);
      border-left-width: 0;
      pointer-events: none;
    }

    .workspace.has-tertiary .content-column {
      transform: translate3d(-200%, 0, 0);
      pointer-events: none;
    }

    .workspace.has-tertiary.is-tertiary-active .secondary-column {
      transform: translate3d(100%, 0, 0);
      pointer-events: none;
    }

    .workspace.has-tertiary.is-tertiary-active .tertiary-column {
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
    }

    .workspace.has-tertiary.is-tertiary-active .content-column {
      transform: translate3d(-100%, 0, 0);
      pointer-events: none;
    }

    .workspace.has-tertiary.is-content-active .secondary-column {
      transform: translate3d(200%, 0, 0);
      pointer-events: none;
    }

    .workspace.has-tertiary.is-content-active .tertiary-column {
      transform: translate3d(100%, 0, 0);
      pointer-events: none;
    }

    .workspace.has-tertiary.is-content-active .content-column {
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
    }

    .workspace.has-tertiary.is-tertiary-active .workspace-menu-button,
    .workspace.has-tertiary.is-content-active .workspace-menu-button {
      display: none;
    }

    .workspace.has-tertiary.is-tertiary-active .workspace-back-button,
    .workspace.has-tertiary.is-content-active .workspace-back-button {
      display: grid;
    }

    .workspace.has-tertiary.is-tertiary-active .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) auto;
    }

    .workspace.has-tertiary.is-tertiary-active .workspace__heading--secondary,
    .workspace.has-tertiary.is-tertiary-active .workspace__heading--mobile-content {
      display: none;
    }

    .workspace.has-tertiary.is-tertiary-active .workspace__heading--mobile-tertiary {
      display: grid;
      grid-column: 2;
    }

    .workspace.has-tertiary.is-tertiary-active .tertiary-header-actions--mobile {
      display: flex;
      grid-column: 3;
      align-items: center;
      justify-content: flex-end;
      gap: var(--header-action-gap);
    }

    .workspace.has-tertiary.is-tertiary-active .secondary-search-button,
    .workspace.has-tertiary.is-tertiary-active .secondary-sheet-button,
    .workspace.has-tertiary.is-tertiary-active .exercise-header-actions {
      display: none !important;
    }

    .workspace.has-tertiary.is-content-active .workspace__heading--mobile-tertiary {
      display: none;
    }

    .workspace[data-view="users"].has-active-user.is-content-active .user-header-actions--desktop {
      display: none !important;
    }

    .workspace[data-view="users"].has-active-user.is-content-active .user-header-actions--mobile {
      position: static;
      display: flex !important;
      grid-column: 3;
      align-items: center;
      justify-content: flex-end;
      gap: var(--header-action-gap);
    }

    .tertiary-column__content,
    .secondary-column__content,
    .content-column__content {
      padding-bottom: calc(var(--workspace-column-padding) + env(safe-area-inset-bottom));
      overscroll-behavior: contain;
    }
  }
}

/* Build 217 — single-panel tablet workspace and safe administrator impersonation. */
@layer workspace {
  .impersonation-bar {
    z-index: 12;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 20px;
    border-bottom: var(--separator-width) solid color-mix(in srgb, var(--accent) 24%, var(--separator-color));
    background: color-mix(in srgb, var(--accent) 8%, var(--sidebar-bg));
    color: var(--text);
  }

  .impersonation-bar__copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }

  .impersonation-bar__copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .impersonation-bar__copy .icon {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 20px;
  }

  .impersonation-bar__return {
    min-height: 30px;
    flex: 0 0 auto;
    padding: 0 12px;
    border: var(--separator-width) solid color-mix(in srgb, var(--accent) 28%, var(--separator-color));
    border-radius: 10px;
    background: var(--sidebar-bg);
    color: var(--accent);
    font-size: 11px;
    font-weight: 650;
  }

  .impersonation-bar__return:disabled { opacity: .55; }

  .workspace.is-impersonating {
    grid-template-rows: 44px var(--shell-header-height) minmax(0, 1fr);
  }

  .workspace.is-impersonating .impersonation-bar { grid-row: 1; }
  .workspace.is-impersonating .workspace__header { grid-row: 2; }
  .workspace.is-impersonating .workspace__content { grid-row: 3; }

  .workspace.is-impersonating.has-active-workout-return .active-workout-return {
    top: calc(44px + var(--shell-header-height));
  }


  .user-impersonate-action {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--separator-color));
    color: var(--accent);
  }
}

@layer responsive {
  /*
   * Tablets use the same one-panel navigation model as phones. The sidebar
   * stays compact and visible, while secondary, tertiary and content panels
   * slide through one full-width work area instead of competing for width.
   */
  @media (min-width: 821px) and (max-width: 1679px) {
    .app-shell { --sidebar-size: var(--sidebar-narrow); }

    .app-shell .sidebar-label { display: none; }
    .app-shell .sidebar { align-items: stretch; }
    .app-shell .sidebar__header {
      min-height: var(--shell-header-height);
      justify-content: center;
      padding: 12px;
    }
    .app-shell .brand,
    .app-shell.is-collapsed .brand {
      display: inline-flex !important;
      width: 48px;
      height: 48px;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      color: var(--accent);
    }
    .app-shell .brand__icon { width: 25px; height: 25px; font-size: 25px; }
    .app-shell #collapseButton { display: none !important; }
    .app-shell .sidebar__top { padding: 0 10px 14px; }
    .app-shell .primary-links { padding-top: 12px; }
    .app-shell .menu-link { justify-content: center; padding-inline: 0; }
    .app-shell .menu-link__arrow { display: none; }
    .app-shell .sidebar-section,
    .app-shell.is-collapsed .sidebar-section { display: block !important; padding-inline: 10px; }
    .app-shell .sidebar-section .menu-link { min-height: 48px; }
    .app-shell .sidebar__utilities { gap: 8px; padding: 12px 10px; }
    .app-shell .theme-toggle { gap: 2px; padding: 3px; border-radius: 14px; }
    .app-shell .theme-toggle__option { min-height: 36px; padding: 0; border-radius: 10px; }
    .app-shell .theme-toggle__option .icon { width: 19px; height: 19px; font-size: 19px; }
    .app-shell .sidebar-account-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .app-shell .sidebar-account { grid-template-columns: 1fr; min-height: 48px; justify-items: center; padding: 0; }
    .app-shell .sidebar-logout { width: 100%; min-width: 0; min-height: 40px; border-radius: 12px; }

    .workspace { --workspace-column-padding: clamp(18px, 2.25vw, 28px); }

    .workspace__header {
      display: block;
      min-width: 0;
      min-height: var(--shell-header-height);
    }

    .workspace__header-cell--tertiary,
    .workspace__header-cell--content { display: none !important; }

    .workspace__header-cell--secondary,
    .workspace.has-secondary .workspace__header-cell--secondary {
      --header-action-size: 42px;
      --header-action-track: 42px;
      --header-action-gap: 6px;
      display: grid;
      width: 100%;
      min-width: 0;
      min-height: var(--shell-header-height);
      grid-column: 1 / -1;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: var(--header-action-gap);
      padding: 12px 18px;
      border-left: 0;
      border-bottom: var(--separator-width) solid var(--separator-color);
      background: var(--content-header-bg);
      overflow: hidden;
    }

    .workspace-menu-button { display: none !important; }
    .workspace-back-button { display: none; grid-column: 1; }

    .workspace__heading { min-width: 0; padding-inline: 2px; }
    .workspace__heading--secondary { display: grid; grid-column: 1; }
    .workspace__heading--mobile-tertiary,
    .workspace__heading--mobile-content { display: none; }

    .workspace.has-secondary-search:not(.has-secondary-sheet) .workspace__header-cell--secondary,
    .workspace.has-secondary-sheet:not(.has-secondary-search) .workspace__header-cell--secondary {
      grid-template-columns: minmax(0, 1fr) var(--header-action-track);
    }

    .workspace.has-secondary-search.has-secondary-sheet .workspace__header-cell--secondary,
    .workspace[data-secondary-action="user-create"] .workspace__header-cell--secondary {
      grid-template-columns: minmax(0, 1fr) var(--header-action-track) var(--header-action-track);
    }

    .secondary-search-button,
    .secondary-sheet-button {
      position: static;
      inset: auto;
      margin: 0;
    }
    .workspace.has-secondary-search .secondary-search-button { display: grid; grid-column: 2; }
    .workspace.has-secondary-sheet .secondary-sheet-button { display: grid; grid-column: 2; }
    .workspace.has-secondary-search.has-secondary-sheet .secondary-sheet-button,
    .workspace[data-secondary-action="user-create"] .secondary-sheet-button { grid-column: 3; }

    .workspace.is-tertiary-active .workspace__header-cell--secondary,
    .workspace.is-content-active .workspace__header-cell--secondary,
    .workspace.has-route-back.is-content-active .workspace__header-cell--secondary {
      grid-template-columns: var(--header-action-track) minmax(0, 1fr) auto;
    }

    .workspace.is-tertiary-active .workspace-back-button,
    .workspace.is-content-active .workspace-back-button { display: grid; }

    .workspace.is-tertiary-active .workspace__heading--secondary,
    .workspace.is-content-active .workspace__heading--secondary { display: none; }
    .workspace.is-tertiary-active .workspace__heading--mobile-tertiary { display: grid; grid-column: 2; }
    .workspace.is-content-active .workspace__heading--mobile-content { display: grid; grid-column: 2; }

    .workspace.is-tertiary-active .secondary-search-button,
    .workspace.is-tertiary-active .secondary-sheet-button,
    .workspace.is-content-active .secondary-search-button,
    .workspace.is-content-active .secondary-sheet-button { display: none !important; }

    .tertiary-header-actions--mobile {
      display: none;
      min-width: 0;
      align-items: center;
      justify-content: flex-end;
      gap: var(--header-action-gap);
    }
    .workspace.is-tertiary-active .tertiary-header-actions--mobile { display: flex; grid-column: 3; }

    .workspace[data-view="users"].has-active-user .user-header-actions--desktop { display: none !important; }
    .workspace[data-view="users"].has-active-user.is-content-active .user-header-actions--mobile {
      position: static;
      display: flex !important;
      grid-column: 3;
      align-items: center;
      justify-content: flex-end;
      gap: var(--header-action-gap);
    }

    .workspace.is-content-active .workout-program-header-actions,
    .workspace.is-content-active .workout-session-header-actions,
    .workspace.is-content-active .workout-history-header-actions,
    .workspace.is-content-active .body-measurement-header-actions {
      grid-column: 3;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      gap: var(--header-action-gap);
    }

    .workspace:not(.is-content-active) .workout-program-header-actions,
    .workspace:not(.is-content-active) .workout-session-header-actions,
    .workspace:not(.is-content-active) .workout-history-header-actions,
    .workspace:not(.is-content-active) .body-measurement-header-actions { display: none !important; }

    .shell-columns {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .secondary-column,
    .tertiary-column,
    .content-column {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      opacity: 1;
      border: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      will-change: transform;
      transition: transform var(--duration-slow) var(--ease), background-color var(--duration) ease;
    }

    .secondary-column { transform: translate3d(-100%, 0, 0); pointer-events: none; }
    .tertiary-column { transform: translate3d(-100%, 0, 0); pointer-events: none; }
    .content-column { transform: translate3d(0, 0, 0); pointer-events: auto; }

    .workspace.has-secondary .secondary-column { transform: translate3d(0, 0, 0); pointer-events: auto; }
    .workspace.has-secondary .content-column { transform: translate3d(-100%, 0, 0); pointer-events: none; }

    .workspace.has-tertiary .secondary-column { transform: translate3d(0, 0, 0); pointer-events: auto; }
    .workspace.has-tertiary .tertiary-column { transform: translate3d(-100%, 0, 0); pointer-events: none; }
    .workspace.has-tertiary .content-column { transform: translate3d(-200%, 0, 0); pointer-events: none; }

    .workspace.has-tertiary.is-tertiary-active .secondary-column { transform: translate3d(100%, 0, 0); pointer-events: none; }
    .workspace.has-tertiary.is-tertiary-active .tertiary-column { transform: translate3d(0, 0, 0); pointer-events: auto; }
    .workspace.has-tertiary.is-tertiary-active .content-column { transform: translate3d(-100%, 0, 0); pointer-events: none; }

    .workspace.has-secondary.is-content-active .secondary-column { transform: translate3d(100%, 0, 0); pointer-events: none; }
    .workspace.has-secondary.is-content-active .content-column { transform: translate3d(0, 0, 0); pointer-events: auto; }

    .workspace.has-tertiary.is-content-active .secondary-column { transform: translate3d(200%, 0, 0); pointer-events: none; }
    .workspace.has-tertiary.is-content-active .tertiary-column { transform: translate3d(100%, 0, 0); pointer-events: none; }
    .workspace.has-tertiary.is-content-active .content-column { transform: translate3d(0, 0, 0); pointer-events: auto; }

    .secondary-column__content,
    .tertiary-column__content,
    .content-column__content {
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
    }

    .workspace.has-active-workout-return {
      grid-template-rows: var(--shell-header-height) 46px minmax(0, 1fr);
    }
    .workspace.has-active-workout-return .content-column { padding-top: 0; }
    .active-workout-return,
    .workspace.has-secondary .active-workout-return,
    .workspace.has-tertiary .active-workout-return {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      height: 46px;
      border-bottom: var(--separator-width) solid var(--separator-color);
      padding: 5px 18px 8px;
    }

    .workspace.is-impersonating {
      grid-template-rows: 44px var(--shell-header-height) minmax(0, 1fr);
    }
    .workspace.is-impersonating.has-active-workout-return {
      grid-template-rows: 44px var(--shell-header-height) 46px minmax(0, 1fr);
    }
    .workspace.is-impersonating .impersonation-bar { grid-row: 1; }
    .workspace.is-impersonating .workspace__header { grid-row: 2; }
    .workspace.is-impersonating.has-active-workout-return .active-workout-return { grid-row: 3; top: auto; }
    .workspace.is-impersonating .workspace__content { grid-row: 3; }
    .workspace.is-impersonating.has-active-workout-return .workspace__content { grid-row: 4; }

    .bottom-sheet-backdrop,
    .workspace.has-secondary .bottom-sheet-backdrop,
    .workspace.has-tertiary .bottom-sheet-backdrop { width: 100%; }
    .bottom-sheet,
    .workspace.has-secondary .bottom-sheet,
    .workspace.has-tertiary .bottom-sheet {
      left: 50%;
      width: min(760px, calc(100% - 48px));
    }

    /* Keep session navigation available after the exercise directory becomes a panel. */
    .workspace.is-content-active .workout-session__exercise-strip { display: block; }
    .workspace.is-content-active .workout-session--history .workout-session__exercise-strip {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 38px;
      align-items: center;
      gap: 8px;
    }
    .workspace.is-content-active .workout-session__mobile-exercises {
      display: flex;
      width: 100%;
      min-width: 0;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 12px 0;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }
    .workspace.is-content-active .workout-session__mobile-exercises::-webkit-scrollbar { display: none; }
    .workspace.is-content-active .workout-session-mobile-item {
      display: inline-flex;
      min-height: 38px;
      flex: 0 0 auto;
      align-items: center;
      gap: 7px;
      padding: 0 11px;
      border: var(--separator-width) solid var(--separator-color);
      border-radius: var(--radius-circle);
      background: var(--sidebar-bg);
      color: var(--text-soft);
      font-size: 10.5px;
      white-space: nowrap;
    }
    .workspace.is-content-active .workout-session-mobile-item.is-active {
      border-color: color-mix(in srgb, var(--accent) 22%, var(--separator-color));
      background: var(--selected-bg);
      color: var(--accent);
    }

    /* Exercise library: one-panel tablet navigation without DOM relocation. */
    .workspace[data-view="exercises"].has-secondary .exercise-header-actions {
      display: contents;
    }

    .workspace[data-view="exercises"] .exercise-list-header-actions--desktop {
      display: none !important;
    }

    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .workspace__header-cell--secondary {
      direction: rtl;
      grid-template-columns: minmax(0, 1fr) max-content;
      align-items: center;
      column-gap: var(--header-action-gap);
    }

    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .workspace__heading--secondary {
      display: grid;
      grid-column: 1;
      min-width: 0;
    }

    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .exercise-create-actions {
      display: flex;
      grid-column: 2;
      align-items: center;
      justify-content: flex-end;
      gap: var(--header-action-gap);
    }

    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .category-create-header-button[aria-hidden="false"],
    .workspace[data-view="exercises"].has-secondary:not(.is-tertiary-active):not(.is-content-active) .exercise-create-header-button[aria-hidden="false"] {
      position: static;
      inset: auto;
      display: grid;
      margin: 0;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .workspace__heading--secondary {
      display: none !important;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .workspace__header-cell--secondary {
      direction: ltr;
      grid-template-columns: max-content minmax(0, 1fr) var(--header-action-track);
      grid-template-areas: "exercise-actions exercise-title exercise-back";
      align-items: center;
      column-gap: var(--header-action-gap);
      overflow: hidden;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .workspace-back-button {
      grid-area: exercise-back;
      justify-self: center;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .workspace__heading--mobile-content {
      display: grid;
      grid-area: exercise-title;
      width: 100%;
      min-width: 0;
      direction: rtl;
      text-align: right;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .exercise-list-header-actions--compact {
      display: grid;
      grid-area: exercise-actions;
      grid-auto-flow: column;
      grid-auto-columns: var(--header-action-track);
      align-items: center;
      justify-self: start;
      gap: var(--header-action-gap);
      direction: ltr;
      white-space: nowrap;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .exercise-list-header-actions--compact > .icon-action-button[aria-hidden="false"] {
      position: static;
      inset: auto;
      display: grid;
      margin: 0;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .exercise-layout-toggle-button,
    .workspace:is([data-view="exercises"], .has-exercise-management).has-secondary.is-content-active .exercise-create-actions {
      display: none !important;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .workspace__header-cell--secondary {
      direction: ltr;
      grid-template-columns: max-content minmax(0, 1fr) var(--header-action-track);
      grid-template-areas: "tertiary-actions tertiary-title tertiary-back";
      align-items: center;
      column-gap: var(--header-action-gap);
      overflow: hidden;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .workspace-back-button {
      grid-area: tertiary-back;
      justify-self: center;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .workspace__heading--mobile-tertiary {
      display: grid;
      grid-area: tertiary-title;
      width: 100%;
      min-width: 0;
      direction: rtl;
      text-align: right;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .tertiary-header-actions--mobile {
      display: flex;
      grid-area: tertiary-actions;
      align-items: center;
      justify-content: flex-start;
      gap: var(--header-action-gap);
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .exercise-category-panel-edit-button[aria-hidden="false"] {
      position: static;
      inset: auto;
      display: grid;
      margin: 0;
    }

    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .exercise-header-actions,
    .workspace[data-view="exercises"].has-tertiary.is-tertiary-active .exercise-create-actions {
      display: none !important;
    }


  }

  @media (max-width: 820px) {
    .workspace.is-impersonating {
      grid-template-rows: 44px calc(var(--shell-header-height) + env(safe-area-inset-top)) minmax(0, 1fr);
    }
    .workspace.is-impersonating.has-active-workout-return {
      grid-template-rows: 44px calc(var(--shell-header-height) + env(safe-area-inset-top)) 46px minmax(0, 1fr);
    }
    .workspace.is-impersonating .impersonation-bar { grid-row: 1; padding-inline: 12px; }
    .workspace.is-impersonating .workspace__header { grid-row: 2; }
    .workspace.is-impersonating.has-active-workout-return .active-workout-return { grid-row: 3; top: auto; }
    .workspace.is-impersonating .workspace__content { grid-row: 3; }
    .workspace.is-impersonating.has-active-workout-return .workspace__content { grid-row: 4; }
    .impersonation-bar__return { padding-inline: 9px; font-size: 10px; }
    .user-impersonate-action { width: 100%; }
  }
}


/* Build 235 — security settings and login activity, aligned with the shared system-settings layout. */
@layer components {
  .content-column__content:has(.security-settings-page) { place-items: start center; }

  .security-settings-page { width: min(100%, var(--primary-page-max-width)); }

  .security-settings-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .security-stats-header { align-items: center; }

  .security-health-chip {
    min-height: 34px;
    flex: 0 0 auto;
    padding: 0 11px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-soft);
    background: var(--app-bg);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
  }

  .security-health-chip.is-active { color: var(--success); }
  .security-health-chip .icon { width: 18px; height: 18px; font-size: 18px; }

  .security-settings-panel { display: grid; }

  .security-settings-section-header > button,
  .security-header-action,
  .security-header-actions > button {
    min-height: 38px;
    padding: 0 12px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--text-soft);
    background: var(--sidebar-bg);
    font-size: 10px;
    font-weight: 700;
  }

  .security-settings-section-header > button:hover,
  .security-header-actions > button:hover { color: var(--accent); background: var(--hover-bg); }
  .security-settings-section-header > button .icon,
  .security-header-actions > button .icon { width: 17px; height: 17px; font-size: 17px; }
  .security-header-actions > button:disabled { opacity: .42; cursor: not-allowed; }
  .security-header-actions > button:last-child { color: var(--danger); }

  .security-master-toggle {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    flex-direction: row-reverse;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    color: var(--text-soft);
    font-size: 10.5px;
    white-space: nowrap;
  }

  .security-master-toggle input,
  .security-option-field input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .security-master-toggle__track,
  .security-option-row__control {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: var(--radius-circle);
    background: var(--app-bg);
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }

  .security-master-toggle__track::after,
  .security-option-row__control::after {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-circle);
    background: var(--icon);
    content: "";
    transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }

  .security-master-toggle input:checked + .security-master-toggle__track,
  .security-option-field input:checked + .security-option-row__control {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--separator-color));
    background: color-mix(in srgb, var(--accent) 13%, var(--sidebar-bg));
  }

  .security-master-toggle input:checked + .security-master-toggle__track::after,
  .security-option-field input:checked + .security-option-row__control::after {
    background: var(--accent);
    transform: translateX(-18px);
  }

  .security-master-toggle__label {
    min-width: 42px;
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 700;
    text-align: right;
  }

  .security-master-toggle:has(input:focus-visible) .security-master-toggle__track {
    border-color: color-mix(in srgb, var(--text) 30%, var(--separator-color));
  }

  .security-master-toggle__label-active { display: none; color: var(--accent); }
  .security-master-toggle input:checked ~ .security-master-toggle__label .security-master-toggle__label-active { display: inline; }
  .security-master-toggle input:checked ~ .security-master-toggle__label .security-master-toggle__label-inactive { display: none; }

  .security-settings-form {
    --security-form-inline: 18px;

    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    padding: 20px var(--security-form-inline) 0;
  }

  .security-setting-item--third { grid-column: span 4; }
  .security-setting-item--quarter { grid-column: span 3; }

  .security-settings-form .system-control input:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
  }

  .security-unit-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding-inline: 14px;
  }

  .security-unit-input > span {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 550;
  }

  .security-option-field {
    min-height: 50px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    direction: ltr;
    cursor: pointer;
  }

  .security-option-field__status {
    min-width: 42px;
    color: var(--text-soft);
    direction: rtl;
    font-size: 10.5px;
    font-weight: 700;
    text-align: right;
  }

  .security-option-field__status-active { display: none; color: var(--accent); }
  .security-option-field input:checked ~ .security-option-field__status .security-option-field__status-active { display: inline; }
  .security-option-field input:checked ~ .security-option-field__status .security-option-field__status-inactive { display: none; }
  .security-option-field:focus-within { border-color: color-mix(in srgb, var(--text) 30%, var(--separator-color)); }

  .security-settings-form__message:empty { display: none; }

  .security-settings-form__footer {
    grid-column: 1 / -1;
    min-height: 68px;
    margin-inline: calc(var(--security-form-inline) * -1);
    padding: 10px var(--security-form-inline);
    border-top: var(--separator-width) solid var(--separator-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: end;
    gap: 14px;
  }

  .security-settings-form__footer > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-soft);
    font-size: 10.5px;
  }
  .security-settings-form__footer > span .icon { width: 18px; height: 18px; font-size: 18px; }
  .security-settings-form__footer .profile-primary-button { width: auto; min-width: 148px; }

  .security-empty-state {
    min-height: 116px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
  }
  .security-empty-state > .system-icon-tile { width: 48px; height: 48px; border-radius: 14px; }
  .security-empty-state > div { display: grid; gap: 3px; }
  .security-empty-state strong { color: var(--text); font-size: 13px; }
  .security-empty-state p { color: var(--text-soft); font-size: 10.5px; }

  .security-table-wrap { min-width: 0; overflow-x: auto; }
  .security-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--text);
    font-size: 10.5px;
  }
  .security-table th,
  .security-table td {
    min-width: 0;
    overflow: hidden;
    padding: 12px 13px;
    border-bottom: var(--separator-width) solid var(--separator-color);
    text-align: right;
    vertical-align: middle;
  }
  .security-table thead th {
    color: var(--text-soft);
    background: color-mix(in srgb, var(--app-bg) 76%, var(--sidebar-bg));
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
  }
  .security-table tbody tr:last-child td { border-bottom: 0; }
  .security-table td strong,
  .security-table td small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .security-table td strong { font-size: 11px; }
  .security-table td small { margin-top: 2px; color: var(--text-soft); font-size: 9px; }
  .security-table__ellipsis {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .security-table__ip {
    direction: rtl;
    text-align: left;
  }
  .security-table__ip bdi {
    direction: ltr;
    unicode-bidi: isolate;
  }
  .security-table__select { width: 42px; text-align: center !important; }
  .security-table__select input { width: 16px; height: 16px; accent-color: var(--accent); }
  .security-table__action { width: 86px; text-align: left !important; }
  .security-table__action button {
    min-height: 32px;
    padding: 0 10px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 9px;
    color: var(--accent);
    background: var(--sidebar-bg);
    font-size: 9.5px;
    font-weight: 700;
  }
  .security-blocks-table th:nth-child(1) { width: 28%; }
  .security-blocks-table th:nth-child(2) { width: 29%; }
  .security-blocks-table th:nth-child(3) { width: 11%; }
  .security-blocks-table th:nth-child(4) { width: 20%; }

  .security-events-table th:nth-child(2) { width: 15%; }
  .security-events-table th:nth-child(3) { width: 18%; }
  .security-events-table th:nth-child(4) { width: 14%; }
  .security-events-table th:nth-child(5) { width: 14%; }
  .security-events-table th:nth-child(6) { width: 18%; }

  .security-event-status {
    min-height: 28px;
    padding: 0 9px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--text-soft) 8%, transparent);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
  }
  .security-event-status--success { color: var(--success); background: color-mix(in srgb, var(--success) 9%, transparent); }
  .security-event-status--failure { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
  .security-event-status--blocked { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }

  .security-log-header { align-items: center; }
  .system-settings-section-header > .security-header-actions {
    display: flex;
    min-width: max-content;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: nowrap;
  }

  .system-settings-section-header > .security-header-actions > button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .security-log-toolbar {
    min-height: 64px;
    padding: 10px 13px;
    border-bottom: var(--separator-width) solid var(--separator-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--sidebar-bg);
  }

  .security-log-filters {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    background: var(--app-bg);
  }
  .security-log-filters button {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--text-soft);
    font-size: 9.5px;
    font-weight: 650;
  }
  .security-log-filters button.is-active { color: var(--accent); background: var(--sidebar-bg); }

  .security-log-search {
    width: min(100%, 290px);
    min-height: 42px;
    padding: 0 12px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--icon);
    background: var(--sidebar-bg);
  }
  .security-log-search .icon { width: 18px; height: 18px; font-size: 18px; }
  .security-log-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 10.5px; }

  .security-events-empty {
    min-height: 116px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
  }
  .security-events-empty[hidden] { display: none; }
  .security-events-empty > .system-icon-tile { width: 48px; height: 48px; border-radius: 14px; }
  .security-events-empty > div { display: grid; gap: 3px; }
  .security-events-empty strong { color: var(--text); font-size: 13px; }
  .security-events-empty p { color: var(--text-soft); font-size: 10.5px; }

  .security-pagination {
    min-height: 64px;
    padding: 10px 13px;
    border-top: var(--separator-width) solid var(--separator-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    background: var(--sidebar-bg);
    font-size: 10px;
  }
  .security-pagination nav {
    display: grid;
    grid-template-columns: minmax(86px, auto) minmax(112px, auto) minmax(86px, auto);
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .security-pagination nav > strong { min-width: 94px; color: var(--text-soft); font-size: 9.5px; font-weight: 650; text-align: center; }
  .security-pagination button {
    min-height: 34px;
    padding: 0 10px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--text);
    background: var(--sidebar-bg);
    font-size: 9.5px;
    font-weight: 650;
  }
  .security-pagination button:hover:not(:disabled) { color: var(--accent); background: var(--hover-bg); }
  .security-pagination button:disabled { opacity: .4; cursor: not-allowed; }
  .security-pagination button .icon { width: 15px; height: 15px; font-size: 15px; }
  .security-pagination.is-loading { opacity: .62; pointer-events: none; }

  .security-page-message {
    min-height: 42px;
    padding: 12px 14px;
    color: var(--text-soft);
    font-size: 10.5px;
    text-align: center;
  }
  .security-page-message:empty { display: none; }
  .security-page-message.is-error { color: var(--danger); }
  .security-page-message.is-success { color: var(--success); }

  .security-sheet-content { display: grid; gap: 16px; padding: 22px 20px; }
  .security-sheet-content__intro { display: grid; gap: 4px; }
  .security-sheet-content__intro strong { color: var(--text); font-size: 15px; }
  .security-sheet-content__intro p { color: var(--text-soft); font-size: 11px; line-height: 1.5; }
  .security-sheet-form { display: grid; gap: 15px; }
  .security-sheet-form .system-input input,
  .security-sheet-form .system-input select {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
    line-height: normal;
  }
  .security-sheet-form .system-input select { appearance: none; }
  .security-table tr[hidden] { display: none !important; }
  .security-sheet-form__message { min-height: 18px; color: var(--text-soft); font-size: 10.5px; }
  .security-sheet-form__message.is-error { color: var(--danger); }
  .security-sheet-confirmation { display: grid; gap: 10px; padding: 18px 20px 16px; text-align: center; }
  .security-sheet-confirmation > .system-icon-tile { width: 48px; height: 48px; justify-self: center; border-radius: 14px; color: var(--danger); }
  .security-sheet-confirmation p { max-width: 440px; justify-self: center; color: var(--text-soft); font-size: 11px; line-height: 1.55; }
  .security-sheet-confirmation p.is-error { color: var(--danger); }
  .security-sheet-actions { display: flex; width: 100%; justify-content: space-between; gap: 9px; }
  .security-sheet-actions button {
    min-height: 44px;
    padding: 0 16px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 12px;
    color: var(--text);
    background: var(--sidebar-bg);
    font-size: 11px;
    font-weight: 700;
  }
  .security-sheet-actions button[data-security-confirm-action] { margin-inline-start: auto; color: var(--on-accent); background: var(--danger); border-color: var(--danger); }
  .security-sheet-actions button[data-security-block-submit] { margin-inline-start: auto; color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

  .bottom-sheet.is-security-block,
  .bottom-sheet.is-security-confirmation {
    grid-template-rows: 64px auto auto;
    height: auto;
    max-height: min(82%, 620px);
  }
  .bottom-sheet.is-security-block { width: min(680px, calc(100% - var(--secondary-column-width) - 48px)); }
  .bottom-sheet.is-security-confirmation { width: min(620px, calc(100% - var(--secondary-column-width) - 48px)); }

  @media (max-width: 980px) {
    .security-settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .security-setting-item--third,
    .security-setting-item--quarter { grid-column: auto; }
    .security-log-toolbar { align-items: stretch; flex-direction: column; }
    .security-log-search { width: 100%; max-width: none; }
  }

  @media (max-width: 820px) {
    .content-column__content:has(.security-settings-page) { place-items: start stretch; }
    .security-settings-page { width: 100%; }
    .security-settings-hero { grid-template-columns: auto minmax(0, 1fr); }
    .security-stats-header { align-items: center; }
    .security-settings-form { --security-form-inline: 15px; grid-template-columns: 1fr; padding: 16px var(--security-form-inline) 0; gap: 15px; }
    .security-setting-item--third,
    .security-setting-item--quarter { grid-column: auto; }
    .security-settings-form__footer { align-items: stretch; flex-direction: column; }
    .security-settings-form__footer .profile-primary-button { width: 100%; }

    .security-settings-section-header {
      align-items: center;
      flex-direction: row;
    }

    .security-log-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 14px;
    }

    .system-settings-section-header > .security-header-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: 100%;
      min-width: 0;
      gap: 8px;
      overflow: visible;
    }

    .system-settings-section-header > .security-header-actions > button {
      width: 100%;
      min-width: 0;
      min-height: 44px;
      padding-inline: 8px;
    }

    .system-settings-section-header > .security-header-actions > button > span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .security-log-filters { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .security-table-wrap--blocks { overflow: visible; }
    .security-blocks-table,
    .security-blocks-table tbody { display: grid; }
    .security-blocks-table thead { display: none; }
    .security-blocks-table tbody { gap: 10px; padding: 12px; }
    .security-blocks-table tr {
      position: relative;
      display: grid;
      min-width: 0;
      gap: 0;
      overflow: hidden;
      border: var(--separator-width) solid var(--separator-color);
      border-radius: 14px;
      background: var(--sidebar-bg);
    }
    .security-blocks-table td {
      width: auto !important;
      min-height: 46px;
      padding: 10px 12px;
      border-bottom: var(--separator-width) solid var(--separator-color);
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      text-align: right !important;
    }
    .security-blocks-table td::before { color: var(--text-soft); font-size: 9px; font-weight: 650; content: attr(data-label); }
    .security-blocks-table td:last-child { border-bottom: 0; }
    .security-blocks-table .security-table__action button { width: 100%; }

    .security-table-wrap--events {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
    }
    .security-events-table { min-width: 920px; }
    .security-events-table th:nth-child(1) { width: 46px; }
    .security-events-table th:nth-child(2) { width: 138px; }
    .security-events-table th:nth-child(3) { width: 184px; }
    .security-events-table th:nth-child(4) { width: 126px; }
    .security-events-table th:nth-child(5) { width: 132px; }
    .security-events-table th:nth-child(6) { width: 150px; }
    .security-events-table th:nth-child(7) { width: 144px; }
    .security-events-table td { white-space: nowrap; }

    .security-pagination { position: sticky; right: 0; left: 0; }
    .bottom-sheet.is-security-block,
    .bottom-sheet.is-security-confirmation { width: 100%; }
  }

  @media (max-width: 560px) {
    .security-stats-header { align-items: center; }
    .security-master-toggle { min-height: 36px; gap: 8px; }
    .security-master-toggle__label { min-width: 40px; }
    .security-log-header { padding-bottom: 13px; }
    .security-log-toolbar { padding: 12px; gap: 10px; }
    .security-blocks-table td { grid-template-columns: 88px minmax(0, 1fr); }
    .security-pagination { padding-inline: 8px; }
    .security-pagination nav {
      width: 100%;
      grid-template-columns: minmax(76px, 1fr) minmax(100px, auto) minmax(76px, 1fr);
      gap: 8px;
    }
    .security-pagination button { width: 100%; padding-inline: 8px; }
  }
}

@layer feedback {
  [data-toast-source] {
    display: none !important;
  }

  .pulse-toast-region {
    position: fixed;
    z-index: 12000;
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: 50%;
    display: grid;
    width: min(430px, calc(100% - 28px));
    gap: 8px;
    pointer-events: none;
    transform: translateX(-50%);
  }

  .pulse-toast {
    --toast-tone: var(--accent);

    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 30px;
    min-height: 56px;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 10px 11px 10px 13px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 15px;
    color: var(--text);
    background: color-mix(in srgb, var(--sidebar-bg) 94%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: auto;
    animation: pulse-toast-enter 220ms var(--ease) both;
  }

  .pulse-toast--success { --toast-tone: var(--success); }
  .pulse-toast--error { --toast-tone: var(--danger); }
  .pulse-toast--warning { --toast-tone: var(--warning); }

  .pulse-toast.is-leaving {
    animation: pulse-toast-leave 180ms ease both;
  }

  .pulse-toast__icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: var(--separator-width) solid color-mix(in srgb, var(--toast-tone) 28%, var(--separator-color));
    border-radius: 9px;
    color: var(--toast-tone);
    background: color-mix(in srgb, var(--toast-tone) 8%, var(--sidebar-bg));
  }

  .pulse-toast__icon .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .pulse-toast__copy {
    min-width: 0;
    font-size: 12px;
    font-weight: 620;
    line-height: 1.45;
  }

  .pulse-toast__close {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    color: var(--icon);
  }

  .pulse-toast__close:hover {
    color: var(--text);
    background: var(--hover-bg);
  }

  .pulse-toast__close .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .pulse-tooltip {
    position: fixed;
    z-index: 13000;
    top: 0;
    left: 0;
    width: max-content;
    max-width: min(260px, calc(100vw - 16px));
    padding: 7px 10px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 9px;
    color: var(--text);
    background: color-mix(in srgb, var(--sidebar-bg) 96%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 10.5px;
    font-weight: 620;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform-origin: center;
    transition: opacity 120ms ease;
  }

  .pulse-tooltip[hidden] { display: none; }
  .pulse-tooltip.is-visible { opacity: 1; }

  @keyframes pulse-toast-enter {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes pulse-toast-leave {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(8px) scale(.985); }
  }

  @media (max-width: 560px) {
    .pulse-toast-region {
      bottom: calc(10px + env(safe-area-inset-bottom));
      width: calc(100% - 20px);
    }

    .pulse-toast {
      min-height: 54px;
      border-radius: 14px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pulse-toast,
    .pulse-toast.is-leaving,
    .pulse-tooltip {
      animation: none;
      transition: none;
    }
  }
}

/* Build 241 — exercise category directory, nested column navigation and context editing. */
@layer exercises {
  .exercise-category-directory {
    width: 100%;
    min-height: 100%;
  }

  .bottom-sheet.is-exercise-filters .bottom-sheet__body {
    padding: var(--workspace-column-padding);
    padding-bottom: calc(var(--workspace-column-padding) + env(safe-area-inset-bottom));
    background: var(--app-bg);
  }

  .bottom-sheet.is-exercise-filters .exercise-category-directory {
    min-height: 0;
  }

  .exercise-category-directory__list {
    align-content: start;
  }

  .exercise-category-directory__item {
    cursor: pointer;
    text-align: right;
  }

  .exercise-category-directory__media {
    overflow: hidden;
  }

  .exercise-category-directory__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .exercise-category-directory__end {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .exercise-category-directory__item .system-settings-list-item__status {
    min-width: 32px;
    justify-content: center;
  }

  .tertiary-column__content.exercise-category-tertiary {
    display: block;
    box-sizing: border-box;
    padding: var(--workspace-column-padding);
  }

}




/* Build 247 — canonical exercise-library headers: static owners per breakpoint. */
@layer responsive {
  @media (min-width: 1680px) {
    .workspace:is([data-view="exercises"], .has-exercise-management) .exercise-list-header-actions--compact {
      display: none !important;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management) .content-header-actions > .exercise-list-header-actions--desktop {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: var(--header-action-track);
      align-items: center;
      gap: var(--header-action-gap);
      direction: ltr;
      white-space: nowrap;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management) .content-header-actions > .exercise-list-header-actions--desktop > .icon-action-button[aria-hidden="false"] {
      position: static;
      inset: auto;
      display: grid;
      margin: 0;
    }

    .workspace:is([data-view="exercises"], .has-exercise-management) .workspace__header-cell--secondary .exercise-list-header-actions,
    .workspace:is([data-view="exercises"], .has-exercise-management) .workspace__header-cell--secondary .exercise-admin-header-button {
      display: none !important;
    }
  }
}

/* Build 262 — canonical user management editor and read-only preview. */
@layer components {
  .content-column__content:has(.user-editor) {
    place-items: start center;
  }

  .user-editor {
    width: min(100%, var(--primary-page-max-width));
    min-width: 0;
    display: grid;
    align-self: start;
    gap: 14px;
    padding-bottom: 8px;
  }

  .user-editor-hero {
    min-height: 128px;
  }

  .user-editor-hero__identity {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 16px;
  }

  .user-impersonate-action--hero {
    display: inline-flex;
    width: 52px;
    min-width: 52px;
    height: 52px;
    margin-inline-start: auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 16px;
  }

  .user-impersonate-action--hero .icon {
    width: 22px;
    height: 22px;
    color: var(--accent);
    font-size: 22px;
  }

  .user-editor-hero__tile {
    display: grid;
    place-items: center;
  }

  .user-editor-hero__avatar {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--accent);
    font-size: 27px;
    font-weight: 700;
  }

  .user-editor-hero__copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .user-editor__eyebrow {
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 700;
  }

  .user-editor-hero__copy h1 {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 24px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-editor-hero__copy p {
    min-width: 0;
    overflow: hidden;
    color: var(--text-soft);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-form-panel,
  .user-delete-confirmation {
    width: 100%;
  }

  .user-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .user-form__header {
    align-items: center;
  }

  .user-form__header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
  }

  .user-form__mode-chip {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: var(--separator-width) solid var(--separator-color);
    border-radius: 11px;
    background: var(--app-bg);
    color: var(--text-soft);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
  }

  .user-form__mode-chip .icon {
    width: 18px;
    height: 18px;
    color: var(--icon);
    font-size: 18px;
  }

  .user-editor.is-editing .user-form__mode-chip {
    color: var(--accent);
  }

  .user-editor.is-editing .user-form__mode-icon--view,
  .user-editor:not(.is-editing) .user-form__mode-icon--edit {
    display: none;
  }

  .user-form__body {
    display: grid;
    gap: 18px;
    padding: 18px;
  }

  .user-form__caption {
    color: var(--text-soft);
    font-size: 11.5px;
  }

  .user-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .user-editor:not(.is-editing) .system-control {
    background: var(--content-header-bg);
  }

  .user-editor:not(.is-editing) .system-input input[readonly] {
    cursor: default;
    color: var(--text);
  }

  .user-editor:not(.is-editing) .custom-select.is-disabled .custom-select__trigger {
    cursor: default;
    color: var(--text);
    opacity: 1;
  }

  .user-editor:not(.is-editing) .custom-select.is-disabled .custom-select__trigger .icon {
    opacity: .45;
  }

  .user-form__message {
    min-height: 18px;
    margin: 0;
    font-size: 12px;
  }

  .user-form__footer {
    min-height: 68px;
    padding: 10px 18px;
    border-top: var(--separator-width) solid var(--separator-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .user-form__preview-actions,
  .user-form__editing-actions {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }

  .user-form__preview-actions {
    min-width: 0;
    flex-wrap: wrap;
  }

  .user-form__editing-actions {
    margin-inline-start: auto;
  }

  .user-form__readonly-state {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    color: var(--text-soft);
    font-size: 10.5px;
  }

  .user-form__readonly-state .icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }

  .user-form__impersonate-message {
    min-height: 18px;
    color: var(--text-soft);
    font-size: 11px;
  }

  .user-editor.is-editing .user-form__preview-actions,
  .user-editor:not(.is-editing) .user-form__editing-actions,
  .user-editor.is-editing .user-impersonate-action--hero {
    display: none;
  }

  .user-form__submit {
    display: inline-flex;
    min-width: 168px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    border-radius: var(--radius-selected);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 650;
    transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
  }

  .user-form__submit:hover {
    background: var(--accent-strong);
  }

  .user-form__submit:active {
    transform: scale(.98);
  }

  .user-form__submit .icon {
    width: 21px;
    height: 21px;
    font-size: 21px;
  }

  .user-form__submit:disabled {
    opacity: .55;
    cursor: wait;
  }

  .user-delete-confirmation {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .user-delete-confirmation[hidden],
  .user-editor:not(.is-delete-confirming) .user-delete-confirmation,
  .user-editor.is-delete-confirming .user-form-panel {
    display: none;
  }

  .user-delete-confirmation__header {
    align-items: center;
  }

  .user-delete-confirmation__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: var(--separator-width) solid color-mix(in srgb, var(--danger) 24%, var(--separator-color));
    border-radius: 16px;
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
  }

  .user-delete-confirmation__icon .icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
  }

  .user-delete-confirmation__body {
    display: grid;
    gap: 16px;
    padding: 18px;
  }

  .user-delete-confirmation__body > p {
    color: var(--text-soft);
    font-size: 12px;
  }

  .user-delete-confirmation__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
  }

  .user-delete-confirmation__message {
    min-height: 18px;
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
  }
}

@layer responsive {
  @media (max-width: 820px) {
    .content-column__content:has(.user-editor) {
      place-items: start stretch;
    }

    .user-editor {
      width: 100%;
      gap: 11px;
      padding-bottom: 2px;
    }

    .user-editor-hero {
      min-height: 0;
      padding: 16px;
    }

    .user-editor-hero__identity {
      width: 100%;
      gap: 12px;
      align-items: center;
    }

    .user-impersonate-action--hero {
      width: 48px;
      min-width: 48px;
      height: 48px;
      border-radius: 14px;
    }

    .user-editor-hero__tile {
      width: 56px;
      height: 56px;
      border-radius: 16px;
    }

    .user-editor-hero__avatar {
      font-size: 24px;
    }

    .user-editor-hero__copy h1 {
      font-size: 21px;
    }

    .user-form__header {
      align-items: center;
    }

    .user-form__header-actions {
      width: 100%;
      justify-content: stretch;
      flex-direction: column;
      align-items: stretch;
    }

    .user-form__header-actions > * {
      width: 100%;
    }

    .user-form__mode-chip {
      min-height: 34px;
      padding-inline: 10px;
      justify-content: center;
    }

    .user-form__body,
    .user-delete-confirmation__body {
      padding: 16px;
    }

    .user-form__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .system-field--wide {
      grid-column: auto;
    }

    .user-form__footer {
      padding: 12px 16px;
      align-items: stretch;
      flex-direction: column;
    }

    .user-form__preview-actions,
    .user-form__editing-actions {
      width: 100%;
      align-items: stretch;
      flex-direction: column;
    }

    .user-form__preview-actions > .user-action,
    .user-form__editing-actions > *,
    .user-delete-confirmation__actions > * {
      width: 100%;
    }

    .user-form__readonly-state {
      justify-content: center;
    }

    .user-delete-confirmation__actions {
      align-items: stretch;
      flex-direction: column-reverse;
    }
  }
}