.trip-screen {
  /* Neumorphic central action button */
  .central-action-button {
    width: var(--button-size);
    height: var(--button-size);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--color-bg-light), var(--color-bg-dark));
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
    transform: translateZ(0);
    box-shadow: 
      20px 20px 60px var(--color-shadow-dark),
      -20px -20px 60px var(--color-shadow-light),
      inset 1px 1px 1px var(--color-shadow-light),
      inset -1px -1px 1px var(--color-shadow-dark);
    transition: all 0.10s cubic-bezier(0, 0.55, 0.45, 1);
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-icon);
  }

  .central-action-button svg {
    width: 40%;
    height: 40%;
    fill: var(--color-icon);
    transition: all 0.10s cubic-bezier(0, 0.55, 0.45, 1);
  }

  /* Pressed state for neumorphic button */
  .central-action-button:active,
  .central-action-button.pressing,
  .neumorphic-button-label input[type="checkbox"]:checked + .central-action-button {
    background: linear-gradient(145deg, var(--color-bg-dark), var(--color-bg-light));
    box-shadow: 
      1px 1px 3px var(--color-bg-light),
      -1px -1px 3px var(--color-bg-dark),
      inset -20px -20px 60px var(--color-bg-light),
      inset 20px 20px 60px var(--color-bg-dark);
    color: var(--color-icon-pressed);
  }

  .central-action-button:active svg,
  .central-action-button.pressing svg,
  .neumorphic-button-label input[type="checkbox"]:checked + .central-action-button svg {
    filter: brightness(0.95);
    transform: scale(0.98);
    fill: var(--color-icon-pressed);
  }
}