:root {
  /* Spacing */
  --space-xxs: 3px;
  --space-xs: 5px;
  --space-s: 6.5px;
  --space-m: 10px;
  --space-l: 13px;
  --space-xl: 18px;
  --space-xxl: 20px;
  --space-xxxl: 25px;

  /* radius */
  --radius-xs: 2px;
  --radius-s: 3px;
  --radius-m: 5px;
  --radius-l: 10px;
  --radius-xl: 15px;
  --radius-xxl: 20px;

  /* colors */
  --color-surface: #ffffff;
  --color-background: #f6f6f6;
  --color-acent: #4a61ac;
  --color-darkgray: #434343;
  --color-ligthgray: #cccccc;
  --color-black: #000000;
  --color-red: #f53b3b;
  --color-orange: #ffad28;
  --color-green: #166534;
  --color-dark-blue: #0c1f3d;

  /* fontsize */
  --size-xxs: 10px;
  --size-xs: 13px;
  --size-s: 14px;
  --size-m: 16px;
  --size-l: 24px;
  --size-xxl: 36px;

  /* fontweigth */
  --weigth-xs: 200; /*e ligth*/
  --weigth-s: 300; /*ligth*/
  --weigth-m: 500; /*regular*/
  --weigth-l: 500; /*medium*/
  --weigth-xl: 600; /*semi bold*/

  /* Shadows */
  --shadow-One: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  --shadow-Modal: 0 20px 60px rgba(0, 0, 0, 0.25);

  /* Border */
  --border-One: solid 1px var(--color-ligthgray);
  --border-Two: solid 1px var(--color-acent);
  --border-Three: solid 1px var(--color-red);
  --border-cancel: solid 1px var(--color-red);

  --header-heigth: 60px;
  --footer-heigth: 100px;

  --standard-index: 1;
  --blur-index: 3;
  --menu-index: 2;
}

.shift_start_button {
  width: 100%;
  background-color: #368415;
  border-radius: var(--radius-m);
  border: none;
  padding: var(--space-m) 0px;

  min-height: 47px;
}
.shift_end_button {
  width: 100%;
  display: flex;
  gap: var(--space-m);
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface);
  border-radius: var(--radius-m);
  border: solid 1px var(--color-red);
  padding: var(--space-m) 0px;

  min-height: 47px;
}

.break_button {
  width: 33%;
  display: flex;
  gap: var(--space-m);
  align-items: center;
  background-color: var(--color-orange);
  border-radius: var(--radius-m);
  border: none;
  padding: var(--space-m);

  min-height: 47px;
}

.project_button {
  width: 66%;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--space-m);
  background-color: var(--color-surface);
  border-radius: var(--radius-m);
  border: solid 1px var(--color-acent);
  padding: var(--space-m);

  min-height: 47px;
}

.activity_context_box {
  width: 100%;
  background-color: var(--color-background);
  border: var(--border-One);
  border-radius: var(--radius-m);
  padding: var(--space-m);
}

/* ─── Record Desktop ──────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .card-header-Two {
    text-align: center;
    padding: var(--space-xxxl) 0;
  }

  #shift_timer {
    font-size: 64px;
    margin-bottom: var(--space-m);
  }

  .card-content-Two {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
  }

  .shift_start_button,
  .shift_end_button {
    max-width: 480px;
    width: 100%;
    font-size: var(--size-m);
  }

  .row.block {
    justify-content: center;
    width: 100%;
    max-width: 600px;
    gap: var(--space-l);
  }

  .break_button {
    width: auto;
    min-width: 140px;
    flex: 1;
    justify-content: center;
  }

  .project_button {
    width: auto;
    min-width: 280px;
    flex: 2;
    justify-content: center;
  }

  .activity_context_box {
    max-width: 480px;
    margin: 0 auto;
  }
}