/* ============================================================
   IMPETUS / MÉTODO CEO · PREMIUM BRAND
   Accent: #82B7D9
   ============================================================ */

:root {
  --brand-accent: #82B7D9;
  --brand-accent-hover: #9CC8E3;

  --brand-bg: #0B0D0F;
  --brand-surface: #12161A;
  --brand-surface-2: #151A1F;

  --brand-text: #F5F7F8;
  --brand-text-secondary: #A8B0B7;

  --brand-border: #252B31;
}


/* ------------------------------------------------------------
   GLOBAL
   ------------------------------------------------------------ */

body {
  background-color: var(--brand-bg);
  color: var(--brand-text);
}


/* ------------------------------------------------------------
   LINKS
   No classic hyperlink blue.
   ------------------------------------------------------------ */

a,
a:visited {
  color: var(--brand-text);
  text-decoration-color: rgba(245, 247, 248, .35);
}

a:hover,
a:focus-visible {
  color: var(--brand-accent);
  text-decoration-color: var(--brand-accent);
}


/* ------------------------------------------------------------
   PRIMARY BUTTONS
   ------------------------------------------------------------ */

button:not(.danger):not(.destructive),
.button:not(.danger):not(.destructive),
.btn:not(.danger):not(.destructive),
.btn-primary {
  border-color: var(--brand-accent);
}

button:not(.secondary):not(.ghost):not(.danger):not(.destructive),
.button:not(.secondary):not(.ghost):not(.danger):not(.destructive),
.btn-primary {
  background-color: var(--brand-accent);
  color: #0B0D0F;
}

button:not(.secondary):not(.ghost):not(.danger):not(.destructive):hover,
.button:not(.secondary):not(.ghost):not(.danger):not(.destructive):hover,
.btn-primary:hover {
  background-color: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
  color: #0B0D0F;
}


/* ------------------------------------------------------------
   SECONDARY / GHOST BUTTONS
   ------------------------------------------------------------ */

button.secondary,
.button.secondary,
button.ghost,
.button.ghost,
.btn-secondary {
  background: transparent;
  border-color: var(--brand-border);
  color: var(--brand-text);
}

button.secondary:hover,
.button.secondary:hover,
button.ghost:hover,
.button.ghost:hover,
.btn-secondary:hover {
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}


/* ------------------------------------------------------------
   ACTIVE STATES / NAV / TABS
   ------------------------------------------------------------ */

.active,
.selected,
[aria-current="page"] {
  border-color: var(--brand-accent);
}

nav .active,
.nav .active,
.tab.active,
.tabs .active,
.nav-item.active {
  color: var(--brand-accent);
}


/* ------------------------------------------------------------
   PROGRESS
   ------------------------------------------------------------ */

progress {
  accent-color: var(--brand-accent);
}

.progress-fill,
.progress-bar-fill,
.progress > span {
  background-color: var(--brand-accent);
}


/* ------------------------------------------------------------
   FORM FOCUS
   ------------------------------------------------------------ */

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline-color: var(--brand-accent);
  border-color: var(--brand-accent);
}


/* ------------------------------------------------------------
   CHECKBOX / RADIO
   ------------------------------------------------------------ */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-accent);
}


/* ------------------------------------------------------------
   CARDS / SURFACES
   Subtle premium definition.
   ------------------------------------------------------------ */

.card {
  border-color: var(--brand-border);
}


/* ------------------------------------------------------------
   UTILITY ACCENTS
   ------------------------------------------------------------ */

.accent,
.highlight,
.text-accent {
  color: var(--brand-accent);
}

.bg-accent {
  background-color: var(--brand-accent);
  color: #0B0D0F;
}


/* ------------------------------------------------------------
   VIDEO LINK / TECHNIQUE BUTTON
   ------------------------------------------------------------ */

[data-client-video-button] {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #0B0D0F !important;
}

[data-client-video-button]:hover {
  background-color: var(--brand-accent-hover) !important;
  border-color: var(--brand-accent-hover) !important;
}


/* ============================================================
   IMPETUS · PREMIUM COMPACT REFINEMENT
   ============================================================ */


/* ------------------------------------------------------------
   TYPOGRAPHY SCALE
   ------------------------------------------------------------ */

h1 {
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.02;
}

h2 {
  font-size: clamp(1.55rem, 5.5vw, 2.25rem);
  line-height: 1.08;
}

h3 {
  font-size: clamp(1.2rem, 4.5vw, 1.65rem);
}

p {
  line-height: 1.45;
}


/* ------------------------------------------------------------
   GENERAL SPACING
   ------------------------------------------------------------ */

main,
.app-main,
.page,
.screen,
.view {
  padding-top: 24px;
  padding-bottom: 32px;
}

section {
  margin-bottom: 22px;
}


/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 22px;

  padding: 22px;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, .16);
}


/* ------------------------------------------------------------
   COACH PROGRAMMING CLIENT CARDS
   ------------------------------------------------------------ */

#app .card[onclick],
#app .card[role="button"] {
  background: var(--brand-surface);
  color: var(--brand-text);

  border:
    1px solid var(--brand-border);

  min-height: auto;

  padding:
    20px 22px;

  transition:
    border-color .18s ease,
    transform .18s ease,
    background-color .18s ease;
}

#app .card[onclick]:hover,
#app .card[role="button"]:hover {
  border-color:
    rgba(130, 183, 217, .7);

  background:
    var(--brand-surface-2);
}


/* ------------------------------------------------------------
   CLIENT CARD TEXT
   ------------------------------------------------------------ */

#app .card[onclick] h2,
#app .card[onclick] h3,
#app .card[role="button"] h2,
#app .card[role="button"] h3 {
  color:
    var(--brand-text);

  margin-top:
    6px;

  margin-bottom:
    6px;
}

#app .card[onclick] p,
#app .card[role="button"] p {
  color:
    var(--brand-text-secondary) !important;

  opacity:
    1 !important;

  margin:
    4px 0 0;

  font-size:
    .98rem;
}


/* ------------------------------------------------------------
   LABELS / EYEBROWS
   ------------------------------------------------------------ */

.eyebrow,
.label,
.kicker,
.section-label,
.badge {
  color:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   BUTTON SIZE
   ------------------------------------------------------------ */

button,
.button,
.btn {
  min-height:
    48px;

  padding:
    12px 18px;

  border-radius:
    16px;

  font-size:
    1rem;

  font-weight:
    700;
}


/* ------------------------------------------------------------
   LARGE FULL-WIDTH CTA
   ------------------------------------------------------------ */

button[style*="width:100%"],
.button[style*="width:100%"] {
  min-height:
    52px;
}


/* ------------------------------------------------------------
   BACK BUTTON
   ------------------------------------------------------------ */

button[aria-label*="volver" i],
button[aria-label*="back" i],
.back-button {
  width:
    48px;

  height:
    48px;

  min-height:
    48px;

  border-radius:
    999px;

  padding:
    0;
}


/* ------------------------------------------------------------
   NEUTRAL LINKS
   ------------------------------------------------------------ */

a,
a:visited {
  color:
    var(--brand-text);

  text-decoration:
    none;
}

a:hover,
a:focus-visible {
  color:
    var(--brand-accent);
}


/* ------------------------------------------------------------
   INPUTS / SELECTS
   ------------------------------------------------------------ */

input,
select,
textarea {
  min-height:
    48px;

  border-radius:
    14px;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  body {
    font-size:
      16px;
  }

  main,
  .app-main,
  .page,
  .screen,
  .view {
    padding-left:
      18px;

    padding-right:
      18px;
  }

  .card {
    padding:
      18px;
  }

  h1 {
    font-size:
      2.35rem;
  }

  h2 {
    font-size:
      1.8rem;
  }

  h3 {
    font-size:
      1.35rem;
  }

  button,
  .button,
  .btn {
    font-size:
      .98rem;

    min-height:
      46px;
  }
}


/* ============================================================
   IMPETUS · COMPACT SCALE V3
   Reduce visual zoom without hurting usability
   ============================================================ */

html {
  font-size: 15px;
}

body {
  font-size: 1rem;
}


/* ------------------------------------------------------------
   PAGE SPACING
   ------------------------------------------------------------ */

main,
.app-main,
.page,
.screen,
.view {
  padding-top: 18px;
  padding-bottom: 24px;
}

section {
  margin-bottom: 18px;
}


/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

h1 {
  font-size: clamp(1.9rem, 5.8vw, 2.65rem);
  line-height: 1.04;
  margin-bottom: 12px;
}

h2 {
  font-size: clamp(1.45rem, 4.8vw, 1.95rem);
  line-height: 1.08;
}

h3 {
  font-size: clamp(1.12rem, 4vw, 1.45rem);
  line-height: 1.15;
}

p {
  font-size: .96rem;
}


/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.card {
  padding: 16px 18px;
  border-radius: 18px;
}

#app .card[onclick],
#app .card[role="button"] {
  padding: 16px 18px;
  border-radius: 18px;
}


/* Client / clickable card titles */

#app .card[onclick] h2,
#app .card[onclick] h3,
#app .card[role="button"] h2,
#app .card[role="button"] h3 {
  font-size: 1.65rem;
  line-height: 1.08;
  margin-top: 4px;
  margin-bottom: 5px;
}


/* Secondary text / emails */

#app .card[onclick] p,
#app .card[role="button"] p {
  font-size: .92rem;
  line-height: 1.3;
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

button,
.button,
.btn {
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 14px;
  font-size: .96rem;
}

button[style*="width:100%"],
.button[style*="width:100%"] {
  min-height: 46px;
}


/* ------------------------------------------------------------
   BACK BUTTON
   ------------------------------------------------------------ */

button[aria-label*="volver" i],
button[aria-label*="back" i],
.back-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
}


/* ------------------------------------------------------------
   INPUTS
   ------------------------------------------------------------ */

input,
select,
textarea {
  min-height: 44px;
  font-size: .95rem;
}


/* ------------------------------------------------------------
   MOBILE TUNING
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  html {
    font-size: 14.5px;
  }

  main,
  .app-main,
  .page,
  .screen,
  .view {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card {
    padding: 15px 16px;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.55rem;
  }

  h3 {
    font-size: 1.22rem;
  }

  #app .card[onclick] h2,
  #app .card[onclick] h3,
  #app .card[role="button"] h2,
  #app .card[role="button"] h3 {
    font-size: 1.48rem;
  }

  #app .card[onclick] p,
  #app .card[role="button"] p {
    font-size: .88rem;
  }

  button,
  .button,
  .btn {
    min-height: 43px;
    padding: 9px 14px;
  }
}


/* ============================================================
   IMPETUS · PREMIUM OUTLINE V4
   Dark dominant / cyan outline / restrained accents
   ============================================================ */


/* ------------------------------------------------------------
   CORE PALETTE OVERRIDE
   ------------------------------------------------------------ */

:root {
  --brand-accent: #82B7D9;
  --brand-accent-hover: #9CC8E3;

  --brand-bg: #090B0D;
  --brand-surface: #101419;
  --brand-surface-2: #14191F;

  --brand-text: #F5F7F8;
  --brand-text-secondary: #9EA7B0;

  --brand-border: #2A3037;
  --brand-border-accent: rgba(130, 183, 217, .72);
}


/* ------------------------------------------------------------
   BODY / SURFACES
   ------------------------------------------------------------ */

body {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(130, 183, 217, .035),
      transparent 28%
    ),
    var(--brand-bg);
}


/* ------------------------------------------------------------
   BUTTONS · OUTLINE BY DEFAULT
   ------------------------------------------------------------ */

button:not(.danger):not(.destructive),
.button:not(.danger):not(.destructive),
.btn:not(.danger):not(.destructive),
.btn-primary {
  background:
    var(--brand-surface) !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid var(--brand-border-accent) !important;

  box-shadow:
    none !important;
}

button:not(.danger):not(.destructive):hover,
.button:not(.danger):not(.destructive):hover,
.btn:not(.danger):not(.destructive):hover,
.btn-primary:hover {
  background:
    var(--brand-surface-2) !important;

  color:
    var(--brand-accent) !important;

  border-color:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   IMPORTANT CTA
   Slight accent, still not filled cyan.
   ------------------------------------------------------------ */

[data-client-video-button],
.primary-action,
.cta,
button.primary,
.button.primary {
  background:
    linear-gradient(
      180deg,
      rgba(130, 183, 217, .08),
      rgba(130, 183, 217, .025)
    ) !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   BACK / ICON BUTTONS
   ------------------------------------------------------------ */

button[aria-label*="volver" i],
button[aria-label*="back" i],
.back-button {
  background:
    var(--brand-surface) !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid var(--brand-border-accent) !important;
}


/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.card {
  background:
    linear-gradient(
      180deg,
      #11151A,
      #0F1317
    ) !important;

  border:
    1px solid var(--brand-border) !important;

  box-shadow:
    0 12px 36px rgba(0, 0, 0, .18) !important;
}


/* Clickable cards */

#app .card[onclick],
#app .card[role="button"] {
  background:
    linear-gradient(
      180deg,
      #11151A,
      #0F1317
    ) !important;

  border:
    1px solid var(--brand-border) !important;

  color:
    var(--brand-text) !important;
}

#app .card[onclick]:hover,
#app .card[role="button"]:hover {
  border-color:
    var(--brand-border-accent) !important;
}


/* ------------------------------------------------------------
   ACTIVE / CURRENT CARDS
   ------------------------------------------------------------ */

.active,
.selected,
[aria-current="page"] {
  background:
    var(--brand-surface) !important;

  border-color:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   LABELS / STATUS / EYEBROWS
   ------------------------------------------------------------ */

.eyebrow,
.label,
.kicker,
.section-label,
.badge,
.status,
.status-label {
  color:
    var(--brand-accent) !important;

  background:
    transparent !important;
}


/* Kill remaining #82B7D9-like emphasis where possible */

[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"] {
  color:
    var(--brand-accent) !important;

  border-color:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */

a,
a:visited {
  color:
    var(--brand-text) !important;

  text-decoration:
    none !important;
}

a:hover,
a:focus-visible {
  color:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   PROGRESS
   ------------------------------------------------------------ */

progress {
  accent-color:
    var(--brand-accent);
}

.progress-fill,
.progress-bar-fill,
.progress > span {
  background:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   INPUTS / SELECTS
   ------------------------------------------------------------ */

input,
select,
textarea {
  background:
    #0E1216 !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid var(--brand-border) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--brand-accent) !important;

  box-shadow:
    0 0 0 2px rgba(130, 183, 217, .08);
}


/* ------------------------------------------------------------
   COACH CLIENT CARDS
   ------------------------------------------------------------ */

#app .card[onclick] h2,
#app .card[onclick] h3,
#app .card[role="button"] h2,
#app .card[role="button"] h3 {
  color:
    var(--brand-text) !important;
}

#app .card[onclick] p,
#app .card[role="button"] p {
  color:
    var(--brand-text-secondary) !important;
}


/* ------------------------------------------------------------
   MOBILE
   Keep the interface airy but not oversized.
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  .card {
    border-radius:
      17px;
  }

  button,
  .button,
  .btn {
    border-radius:
      13px;
  }
}


/* ============================================================
   IMPETUS · VISUAL CLEANUP V5
   Final color + dense screen refinement
   ============================================================ */


/* ------------------------------------------------------------
   ELIMINATE LEGACY #82B7D9
   ------------------------------------------------------------ */

:root {
  --legacy-#82B7D9: #82B7D9;
}


/* Common accent/status classes */

.eyebrow,
.label,
.kicker,
.section-label,
.badge,
.status,
.status-label,
.progress-label,
.current-label,
.priority-label {
  color: var(--brand-accent) !important;
}


/* Inline styles that still use common #82B7D9 values */

[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"] {
  color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}


/* SVG / icon accent fallback */

svg [stroke="#82B7D9"],
svg [stroke="#82B7D9"],
svg [fill="#82B7D9"],
svg [fill="#82B7D9"] {
  stroke: var(--brand-accent) !important;
  fill: var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   ACTIVE / CURRENT STATE
   ------------------------------------------------------------ */

.active,
.selected,
[aria-current="page"] {
  border-color: var(--brand-accent) !important;
  box-shadow: none !important;
}


/* Remove competing secondary outlines */

.active::before,
.active::after,
.selected::before,
.selected::after,
[aria-current="page"]::before,
[aria-current="page"]::after {
  border-color: var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   PROGRESS
   ------------------------------------------------------------ */

progress {
  accent-color: var(--brand-accent) !important;
}

.progress-fill,
.progress-bar-fill,
.progress > span {
  background: var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   DENSE COACH / PROGRAMMING VIEWS
   ------------------------------------------------------------ */

body:has(h1) h1 {
  letter-spacing: -0.025em;
}


/* Programming screens tend to contain lots of cards */

#app h1 {
  max-width: 100%;
}


/* Slightly smaller titles in dense card stacks */

#app .card h2,
#app .card h3 {
  letter-spacing: -0.018em;
}


/* Exercise programming cards */

#app .card h2 {
  line-height: 1.08;
}


/* Coach/programming action buttons */

#app .card button,
#app .card .button {
  min-height: 42px;
}


/* ------------------------------------------------------------
   MOBILE DENSE MODE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  /* Coach/programming page headings */

  #app h1 {
    font-size: 1.88rem;
    line-height: 1.04;
  }

  /* Keep hero client greeting visually stronger */

  #app h1:first-of-type {
    font-size: 2rem;
  }

  /* Dense exercise/card headings */

  #app .card h2 {
    font-size: 1.38rem;
  }

  #app .card h3 {
    font-size: 1.16rem;
  }

  /* Smaller labels */

  .eyebrow,
  .label,
  .kicker,
  .section-label,
  .badge,
  .status,
  .status-label {
    font-size: .78rem;
    letter-spacing: .11em;
  }

  /* Compact stacked cards */

  .card {
    padding: 14px 15px;
  }

  /* Less vertical air in buttons */

  button,
  .button,
  .btn {
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


/* ============================================================
   IMPETUS · VISUAL CLEANUP V5
   Final color + dense screen refinement
   ============================================================ */


/* ------------------------------------------------------------
   ELIMINATE LEGACY #82B7D9
   ------------------------------------------------------------ */

:root {
  --legacy-#82B7D9: #82B7D9;
}


/* Common accent/status classes */

.eyebrow,
.label,
.kicker,
.section-label,
.badge,
.status,
.status-label,
.progress-label,
.current-label,
.priority-label {
  color: var(--brand-accent) !important;
}


/* Inline styles that still use common #82B7D9 values */

[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"] {
  color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}


/* SVG / icon accent fallback */

svg [stroke="#82B7D9"],
svg [stroke="#82B7D9"],
svg [fill="#82B7D9"],
svg [fill="#82B7D9"] {
  stroke: var(--brand-accent) !important;
  fill: var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   ACTIVE / CURRENT STATE
   ------------------------------------------------------------ */

.active,
.selected,
[aria-current="page"] {
  border-color: var(--brand-accent) !important;
  box-shadow: none !important;
}


/* Remove competing secondary outlines */

.active::before,
.active::after,
.selected::before,
.selected::after,
[aria-current="page"]::before,
[aria-current="page"]::after {
  border-color: var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   PROGRESS
   ------------------------------------------------------------ */

progress {
  accent-color: var(--brand-accent) !important;
}

.progress-fill,
.progress-bar-fill,
.progress > span {
  background: var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   DENSE COACH / PROGRAMMING VIEWS
   ------------------------------------------------------------ */

body:has(h1) h1 {
  letter-spacing: -0.025em;
}


/* Programming screens tend to contain lots of cards */

#app h1 {
  max-width: 100%;
}


/* Slightly smaller titles in dense card stacks */

#app .card h2,
#app .card h3 {
  letter-spacing: -0.018em;
}


/* Exercise programming cards */

#app .card h2 {
  line-height: 1.08;
}


/* Coach/programming action buttons */

#app .card button,
#app .card .button {
  min-height: 42px;
}


/* ------------------------------------------------------------
   MOBILE DENSE MODE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  /* Coach/programming page headings */

  #app h1 {
    font-size: 1.88rem;
    line-height: 1.04;
  }

  /* Keep hero client greeting visually stronger */

  #app h1:first-of-type {
    font-size: 2rem;
  }

  /* Dense exercise/card headings */

  #app .card h2 {
    font-size: 1.38rem;
  }

  #app .card h3 {
    font-size: 1.16rem;
  }

  /* Smaller labels */

  .eyebrow,
  .label,
  .kicker,
  .section-label,
  .badge,
  .status,
  .status-label {
    font-size: .78rem;
    letter-spacing: .11em;
  }

  /* Compact stacked cards */

  .card {
    padding: 14px 15px;
  }

  /* Less vertical air in buttons */

  button,
  .button,
  .btn {
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


/* ============================================================
   IMPETUS · PREMIUM SYSTEM ICONS
   ============================================================ */

.premium-system-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;

  padding: 0 !important;

  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    linear-gradient(
      180deg,
      rgba(18, 24, 31, .92),
      rgba(9, 13, 18, .98)
    ) !important;

  border:
    1px solid rgba(130, 183, 217, .72) !important;

  color:
    #F5F7F8 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 20px rgba(0,0,0,.24) !important;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease !important;
}


.premium-system-icon:hover,
.premium-system-icon:focus-visible {
  transform:
    translateY(-1px);

  border-color:
    #82B7D9 !important;

  color:
    #82B7D9 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.3),
    0 0 0 1px rgba(130,183,217,.10) !important;
}


.premium-system-icon:active {
  transform:
    scale(.97);
}


.premium-system-icon svg {
  width: 20px !important;
  height: 20px !important;

  display: block;

  stroke:
    currentColor;

  fill:
    none;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


@media (max-width: 600px) {

  .premium-system-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }

  .premium-system-icon svg {
    width: 19px !important;
    height: 19px !important;
  }
}


/* ============================================================
   IMPETUS · PREMIUM OUTLINE V4
   Dark dominant / cyan outline / restrained accents
   ============================================================ */


/* ------------------------------------------------------------
   CORE PALETTE OVERRIDE
   ------------------------------------------------------------ */

:root {
  --brand-accent: #82B7D9;
  --brand-accent-hover: #9CC8E3;

  --brand-bg: #090B0D;
  --brand-surface: #101419;
  --brand-surface-2: #14191F;

  --brand-text: #F5F7F8;
  --brand-text-secondary: #9EA7B0;

  --brand-border: #2A3037;
  --brand-border-accent: rgba(130, 183, 217, .72);
}


/* ------------------------------------------------------------
   BODY / SURFACES
   ------------------------------------------------------------ */

body {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(130, 183, 217, .035),
      transparent 28%
    ),
    var(--brand-bg);
}


/* ------------------------------------------------------------
   BUTTONS · OUTLINE BY DEFAULT
   ------------------------------------------------------------ */

button:not(.danger):not(.destructive),
.button:not(.danger):not(.destructive),
.btn:not(.danger):not(.destructive),
.btn-primary {
  background:
    var(--brand-surface) !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid var(--brand-border-accent) !important;

  box-shadow:
    none !important;
}

button:not(.danger):not(.destructive):hover,
.button:not(.danger):not(.destructive):hover,
.btn:not(.danger):not(.destructive):hover,
.btn-primary:hover {
  background:
    var(--brand-surface-2) !important;

  color:
    var(--brand-accent) !important;

  border-color:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   IMPORTANT CTA
   Slight accent, still not filled cyan.
   ------------------------------------------------------------ */

[data-client-video-button],
.primary-action,
.cta,
button.primary,
.button.primary {
  background:
    linear-gradient(
      180deg,
      rgba(130, 183, 217, .08),
      rgba(130, 183, 217, .025)
    ) !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   BACK / ICON BUTTONS
   ------------------------------------------------------------ */

button[aria-label*="volver" i],
button[aria-label*="back" i],
.back-button {
  background:
    var(--brand-surface) !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid var(--brand-border-accent) !important;
}


/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.card {
  background:
    linear-gradient(
      180deg,
      #11151A,
      #0F1317
    ) !important;

  border:
    1px solid var(--brand-border) !important;

  box-shadow:
    0 12px 36px rgba(0, 0, 0, .18) !important;
}


/* Clickable cards */

#app .card[onclick],
#app .card[role="button"] {
  background:
    linear-gradient(
      180deg,
      #11151A,
      #0F1317
    ) !important;

  border:
    1px solid var(--brand-border) !important;

  color:
    var(--brand-text) !important;
}

#app .card[onclick]:hover,
#app .card[role="button"]:hover {
  border-color:
    var(--brand-border-accent) !important;
}


/* ------------------------------------------------------------
   ACTIVE / CURRENT CARDS
   ------------------------------------------------------------ */

.active,
.selected,
[aria-current="page"] {
  background:
    var(--brand-surface) !important;

  border-color:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   LABELS / STATUS / EYEBROWS
   ------------------------------------------------------------ */

.eyebrow,
.label,
.kicker,
.section-label,
.badge,
.status,
.status-label {
  color:
    var(--brand-accent) !important;

  background:
    transparent !important;
}


/* Kill remaining #82B7D9-like emphasis where possible */

[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"] {
  color:
    var(--brand-accent) !important;

  border-color:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */

a,
a:visited {
  color:
    var(--brand-text) !important;

  text-decoration:
    none !important;
}

a:hover,
a:focus-visible {
  color:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   PROGRESS
   ------------------------------------------------------------ */

progress {
  accent-color:
    var(--brand-accent);
}

.progress-fill,
.progress-bar-fill,
.progress > span {
  background:
    var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   INPUTS / SELECTS
   ------------------------------------------------------------ */

input,
select,
textarea {
  background:
    #0E1216 !important;

  color:
    var(--brand-text) !important;

  border:
    1px solid var(--brand-border) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--brand-accent) !important;

  box-shadow:
    0 0 0 2px rgba(130, 183, 217, .08);
}


/* ------------------------------------------------------------
   COACH CLIENT CARDS
   ------------------------------------------------------------ */

#app .card[onclick] h2,
#app .card[onclick] h3,
#app .card[role="button"] h2,
#app .card[role="button"] h3 {
  color:
    var(--brand-text) !important;
}

#app .card[onclick] p,
#app .card[role="button"] p {
  color:
    var(--brand-text-secondary) !important;
}


/* ------------------------------------------------------------
   MOBILE
   Keep the interface airy but not oversized.
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  .card {
    border-radius:
      17px;
  }

  button,
  .button,
  .btn {
    border-radius:
      13px;
  }
}


/* ============================================================
   IMPETUS · VISUAL CLEANUP V5
   Final color + dense screen refinement
   ============================================================ */


/* ------------------------------------------------------------
   ELIMINATE LEGACY #82B7D9
   ------------------------------------------------------------ */

:root {
  --legacy-#82B7D9: #82B7D9;
}


/* Common accent/status classes */

.eyebrow,
.label,
.kicker,
.section-label,
.badge,
.status,
.status-label,
.progress-label,
.current-label,
.priority-label {
  color: var(--brand-accent) !important;
}


/* Inline styles that still use common #82B7D9 values */

[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"],
[style*="#82B7D9"] {
  color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}


/* SVG / icon accent fallback */

svg [stroke="#82B7D9"],
svg [stroke="#82B7D9"],
svg [fill="#82B7D9"],
svg [fill="#82B7D9"] {
  stroke: var(--brand-accent) !important;
  fill: var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   ACTIVE / CURRENT STATE
   ------------------------------------------------------------ */

.active,
.selected,
[aria-current="page"] {
  border-color: var(--brand-accent) !important;
  box-shadow: none !important;
}


/* Remove competing secondary outlines */

.active::before,
.active::after,
.selected::before,
.selected::after,
[aria-current="page"]::before,
[aria-current="page"]::after {
  border-color: var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   PROGRESS
   ------------------------------------------------------------ */

progress {
  accent-color: var(--brand-accent) !important;
}

.progress-fill,
.progress-bar-fill,
.progress > span {
  background: var(--brand-accent) !important;
}


/* ------------------------------------------------------------
   DENSE COACH / PROGRAMMING VIEWS
   ------------------------------------------------------------ */

body:has(h1) h1 {
  letter-spacing: -0.025em;
}


/* Programming screens tend to contain lots of cards */

#app h1 {
  max-width: 100%;
}


/* Slightly smaller titles in dense card stacks */

#app .card h2,
#app .card h3 {
  letter-spacing: -0.018em;
}


/* Exercise programming cards */

#app .card h2 {
  line-height: 1.08;
}


/* Coach/programming action buttons */

#app .card button,
#app .card .button {
  min-height: 42px;
}


/* ------------------------------------------------------------
   MOBILE DENSE MODE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

  /* Coach/programming page headings */

  #app h1 {
    font-size: 1.88rem;
    line-height: 1.04;
  }

  /* Keep hero client greeting visually stronger */

  #app h1:first-of-type {
    font-size: 2rem;
  }

  /* Dense exercise/card headings */

  #app .card h2 {
    font-size: 1.38rem;
  }

  #app .card h3 {
    font-size: 1.16rem;
  }

  /* Smaller labels */

  .eyebrow,
  .label,
  .kicker,
  .section-label,
  .badge,
  .status,
  .status-label {
    font-size: .78rem;
    letter-spacing: .11em;
  }

  /* Compact stacked cards */

  .card {
    padding: 14px 15px;
  }

  /* Less vertical air in buttons */

  button,
  .button,
  .btn {
    min-height: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* Refresh icon micro-fix */
button[aria-label*="refresh" i] .premium-system-icon svg,
button[title*="refresh" i] .premium-system-icon svg,
.premium-system-icon[data-icon="refresh"] svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}


/* ============================================================
   REFRESH BUTTON · PREMIUM SQUARE
   ============================================================ */

button[aria-label*="refresh" i],
button[title*="refresh" i] {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(130, 183, 217, 0.72) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    linear-gradient(
      180deg,
      rgba(14, 20, 31, 0.82) 0%,
      rgba(8, 12, 18, 0.96) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 20px rgba(0,0,0,0.28) !important;
}

button[aria-label*="refresh" i] .premium-system-icon,
button[title*="refresh" i] .premium-system-icon {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

button[aria-label*="refresh" i] .premium-system-icon svg,
button[title*="refresh" i] .premium-system-icon svg {
  width: 18px !important;
  height: 18px !important;

  display: block !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 600px) {
  button[aria-label*="refresh" i],
  button[title*="refresh" i] {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 13px !important;
  }
}


/* ============================================================
   REFRESH BUTTON · PREMIUM SQUARE
   ============================================================ */

button[aria-label*="refresh" i],
button[title*="refresh" i] {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(130, 183, 217, 0.72) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    linear-gradient(
      180deg,
      rgba(14, 20, 31, 0.82) 0%,
      rgba(8, 12, 18, 0.96) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 20px rgba(0,0,0,0.28) !important;
}

button[aria-label*="refresh" i] .premium-system-icon,
button[title*="refresh" i] .premium-system-icon {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

button[aria-label*="refresh" i] .premium-system-icon svg,
button[title*="refresh" i] .premium-system-icon svg {
  width: 18px !important;
  height: 18px !important;

  display: block !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 600px) {
  button[aria-label*="refresh" i],
  button[title*="refresh" i] {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 13px !important;
  }
}


/* ============================================================
   REFRESH V9 · exact selector
   ============================================================ */

.premium-system-icon[data-premium-system-icon="refresh"] {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;

  padding: 0 !important;

  border-radius: 13px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(130, 183, 217, .72) !important;

  background:
    linear-gradient(
      180deg,
      rgba(18, 24, 31, .92),
      rgba(9, 13, 18, .98)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 20px rgba(0,0,0,.24) !important;
}

.premium-system-icon[data-premium-system-icon="refresh"] svg {
  width: 19px !important;
  height: 19px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  transform: none !important;
  overflow: visible !important;
}



/* ============================================================
   IMPETUS LOGIN · CINEMATIC PREMIUM V10
   ============================================================ */

.login-screen {
  position: relative !important;
  isolation: isolate;

  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;

  margin: 0 !important;
  padding:
    clamp(32px, 5vw, 72px)
    clamp(22px, 6vw, 88px)
    clamp(38px, 7vw, 82px) !important;

  overflow: hidden;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;

  background:
    #07090c !important;
}


/* Original portrait */
.login-screen::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  background-image:
    url("/assets/login-martin.jpg");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: 64% 18%;

  filter:
    saturate(.88)
    contrast(1.04)
    brightness(.78);

  transform: scale(1.01);
}


/* Cinematic readability layer */
.login-screen::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      90deg,
      rgba(5, 7, 10, .95) 0%,
      rgba(5, 7, 10, .82) 34%,
      rgba(5, 7, 10, .30) 66%,
      rgba(5, 7, 10, .12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 7, 10, .08) 0%,
      rgba(5, 7, 10, .12) 35%,
      rgba(5, 7, 10, .82) 72%,
      rgba(5, 7, 10, .99) 100%
    );
}


/* Brand */
.login-screen .login-brand {
  width: min(100%, 480px);

  margin:
    0
    0
    24px !important;

  position: relative;
}


.login-screen .brand-mark {
  color:
    #F5F7F8 !important;

  font-size:
    clamp(27px, 4vw, 42px) !important;

  font-weight:
    700 !important;

  letter-spacing:
    .11em !important;

  line-height:
    1 !important;
}


.login-screen .brand-subtitle {
  margin-top:
    8px;

  color:
    rgba(245,247,248,.74) !important;

  font-size:
    11px !important;

  font-weight:
    500 !important;

  letter-spacing:
    .20em !important;

  text-transform:
    uppercase;
}


.login-screen .login-brand::after {
  content: "";

  display: block;

  width: 54px;
  height: 1px;

  margin-top: 18px;

  background:
    #82B7D9;

  box-shadow:
    0 0 18px rgba(130,183,217,.38);
}


/* Main statement */
.login-screen .login-heading {
  width:
    min(100%, 560px);

  margin:
    0 !important;

  color:
    #F7F9FA !important;

  font-size:
    clamp(38px, 5vw, 68px) !important;

  font-weight:
    700 !important;

  line-height:
    .98 !important;

  letter-spacing:
    -.045em !important;

  text-wrap:
    balance;
}


.login-screen .login-copy {
  width:
    min(100%, 490px);

  margin:
    18px
    0
    28px !important;

  color:
    rgba(227,232,237,.72) !important;

  font-size:
    clamp(14px, 1.4vw, 17px) !important;

  line-height:
    1.52 !important;
}


/* Form */
.login-screen #login-form {
  width:
    min(100%, 460px);

  margin:
    0 !important;

  padding:
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


.login-screen .form-group {
  margin-bottom:
    16px !important;
}


.login-screen .form-label {
  display:
    block;

  margin-bottom:
    8px !important;

  color:
    rgba(245,247,248,.76) !important;

  font-size:
    12px !important;

  font-weight:
    500 !important;

  letter-spacing:
    .04em;
}


.login-screen .input {
  width:
    100% !important;

  height:
    52px !important;

  min-height:
    52px !important;

  padding:
    0 16px !important;

  color:
    #F5F7F8 !important;

  background:
    rgba(8,12,17,.68) !important;

  border:
    1px solid rgba(130,183,217,.23) !important;

  border-radius:
    14px !important;

  outline:
    none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 28px rgba(0,0,0,.18) !important;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.login-screen .input::placeholder {
  color:
    rgba(210,218,225,.34);
}


.login-screen .input:focus {
  background:
    rgba(9,14,20,.82) !important;

  border-color:
    rgba(130,183,217,.82) !important;

  box-shadow:
    0 0 0 3px rgba(130,183,217,.08),
    0 12px 30px rgba(0,0,0,.24) !important;
}


/* CTA */
.login-screen #login-button {
  width:
    100% !important;

  min-height:
    54px !important;

  margin-top:
    5px !important;

  border:
    1px solid rgba(130,183,217,.88) !important;

  border-radius:
    15px !important;

  color:
    #F5F7F8 !important;

  background:
    linear-gradient(
      180deg,
      rgba(19,28,37,.86),
      rgba(8,13,19,.94)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(130,183,217,.05),
    0 10px 30px rgba(0,0,0,.28) !important;

  font-size:
    14px !important;

  font-weight:
    600 !important;

  letter-spacing:
    .015em;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


.login-screen #login-button:hover,
.login-screen #login-button:focus-visible {
  border-color:
    #82B7D9 !important;

  background:
    rgba(20,31,42,.94) !important;

  box-shadow:
    0 0 0 3px rgba(130,183,217,.07),
    0 13px 32px rgba(0,0,0,.34) !important;
}


.login-screen #login-button:disabled {
  opacity:
    .62;
}


/* Error */
.login-screen #login-error {
  min-height:
    20px;

  margin-top:
    12px;

  font-size:
    12px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .login-screen {
    min-height:
      100dvh !important;

    padding:
      30px
      22px
      30px !important;

    justify-content:
      flex-end !important;
  }


  .login-screen::before {
    background-size:
      auto 66vh;

    background-position:
      58% 0;

    background-color:
      #07090c;
  }


  .login-screen::after {
    background:
      linear-gradient(
        180deg,
        rgba(4,6,9,.05) 0%,
        rgba(4,6,9,.10) 24%,
        rgba(4,6,9,.45) 46%,
        rgba(4,6,9,.91) 61%,
        rgba(4,6,9,.995) 76%,
        #07090c 100%
      ),
      linear-gradient(
        90deg,
        rgba(4,6,9,.22) 0%,
        transparent 58%,
        rgba(4,6,9,.12) 100%
      );
  }


  .login-screen .login-brand {
    margin-bottom:
      20px !important;
  }


  .login-screen .brand-mark {
    font-size:
      28px !important;
  }


  .login-screen .brand-subtitle {
    font-size:
      10px !important;
  }


  .login-screen .login-heading {
    font-size:
      clamp(36px, 10.2vw, 47px) !important;

    line-height:
      .98 !important;

    max-width:
      390px;
  }


  .login-screen .login-copy {
    margin:
      15px
      0
      22px !important;

    max-width:
      390px;

    font-size:
      14px !important;
  }


  .login-screen .input {
    height:
      50px !important;

    min-height:
      50px !important;
  }


  .login-screen #login-button {
    min-height:
      52px !important;
  }
}


/* Short mobile screens */
@media (max-width: 700px) and (max-height: 760px) {

  .login-screen {
    padding-top:
      20px !important;

    padding-bottom:
      22px !important;
  }


  .login-screen::before {
    background-size:
      auto 57vh;
  }


  .login-screen .login-brand {
    margin-bottom:
      14px !important;
  }


  .login-screen .login-brand::after {
    margin-top:
      12px;
  }


  .login-screen .login-heading {
    font-size:
      34px !important;
  }


  .login-screen .login-copy {
    margin:
      10px
      0
      16px !important;
  }


  .login-screen .form-group {
    margin-bottom:
      11px !important;
  }

}


/* ============================================================
   LOGIN · RESPONSIVE COMPOSITION TUNING
   ============================================================ */

/* Desktop / tablet landscape */
@media (min-width: 701px) {

  .login-screen::before {
    background-size: auto 118vh !important;
    background-position: 78% 38% !important;

    filter:
      saturate(.92)
      contrast(1.02)
      brightness(.88) !important;
  }

  .login-screen::after {
    background:
      linear-gradient(
        90deg,
        rgba(5,7,10,.97) 0%,
        rgba(5,7,10,.90) 26%,
        rgba(5,7,10,.48) 48%,
        rgba(5,7,10,.12) 72%,
        rgba(5,7,10,.08) 100%
      ),
      linear-gradient(
        180deg,
        rgba(5,7,10,.08) 0%,
        rgba(5,7,10,.10) 48%,
        rgba(5,7,10,.42) 100%
      ) !important;
  }

  .login-screen {
    justify-content: center !important;
  }

  .login-screen .login-heading {
    max-width: 520px;
  }

  .login-screen .login-copy {
    max-width: 460px;
  }
}


/* Mobile portrait */
@media (max-width: 700px) {

  .login-screen::before {
    background-size: auto 62vh !important;
    background-position: 61% -2vh !important;
  }

  .login-screen .login-brand {
    margin-bottom: 24px !important;
  }

  .login-screen .login-heading {
    margin-top: 2px !important;
  }
}

/* ============================================================
   LOGIN MOBILE · HERO COMPOSITION V12
   ============================================================ */

@media (max-width: 700px) {

  .login-screen {
    min-height: 100dvh !important;

    padding:
      min(39vh, 330px)
      22px
      28px !important;

    justify-content: flex-start !important;

    overflow-y: auto !important;
  }


  /* Portrait becomes a true top hero */
  .login-screen::before {
    background-size: auto min(52vh, 440px) !important;
    background-position: 58% 0 !important;

    filter:
      saturate(.92)
      contrast(1.03)
      brightness(.90) !important;
  }


  /* Strong fade from portrait into UI */
  .login-screen::after {
    background:
      linear-gradient(
        180deg,
        rgba(5,7,10,.04) 0%,
        rgba(5,7,10,.05) 25%,
        rgba(5,7,10,.18) 37%,
        rgba(5,7,10,.76) 47%,
        rgba(5,7,10,.97) 55%,
        #07090c 67%,
        #07090c 100%
      ) !important;
  }


  .login-screen .login-brand {
    margin: 0 0 17px !important;
  }


  .login-screen .brand-mark {
    font-size: 25px !important;
    letter-spacing: .12em !important;
  }


  .login-screen .brand-subtitle {
    margin-top: 6px !important;
    font-size: 9px !important;
  }


  .login-screen .login-brand::after {
    width: 44px;
    margin-top: 12px;
  }


  .login-screen .login-heading {
    max-width: 350px;

    font-size:
      clamp(31px, 8.8vw, 39px) !important;

    line-height:
      1.01 !important;

    letter-spacing:
      -.035em !important;
  }


  .login-screen .login-copy {
    max-width: 350px;

    margin:
      12px
      0
      19px !important;

    font-size:
      13px !important;

    line-height:
      1.48 !important;
  }


  .login-screen #login-form {
    width: 100% !important;
    max-width: 390px !important;
  }


  .login-screen .form-group {
    margin-bottom: 12px !important;
  }


  .login-screen .form-label {
    margin-bottom: 6px !important;
    font-size: 11px !important;
  }


  .login-screen .input {
    height: 48px !important;
    min-height: 48px !important;

    border-radius: 13px !important;

    font-size: 14px !important;
  }


  .login-screen #login-button {
    min-height: 50px !important;

    border-radius: 14px !important;

    font-size: 13px !important;
  }
}


/* Taller phones */
@media (max-width: 700px) and (min-height: 800px) {

  .login-screen {
    padding-top: min(42vh, 360px) !important;
  }

}


/* Short phones */
@media (max-width: 700px) and (max-height: 799px) {

  .login-screen {
    padding-top: min(34vh, 260px) !important;
  }

  .login-screen::before {
    background-size: auto 46vh !important;
  }

  .login-screen .login-heading {
    font-size: 30px !important;
  }

}

/* ============================================================
   LOGIN MOBILE · SPACING TUNING V13
   ============================================================ */

@media (max-width: 700px) {

  .login-screen {
    padding-bottom: 54px !important;
  }

  .login-screen::before {
    background-position: 58% -5vh !important;
  }

}

@media (max-width: 700px) and (min-height: 800px) {

  .login-screen {
    padding-top: min(38vh, 320px) !important;
  }

}

/* LOGIN MOBILE · FINAL SAFE BOTTOM SPACE */
@media (max-width: 700px) {
  .login-screen {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}


/* ============================================================
   IOS SAFARI · PREVENT INPUT AUTO-ZOOM
   ============================================================ */

@media (max-width: 700px) {

  .login-screen input,
  .login-screen .input {
    font-size: 16px !important;
  }

}

/* iOS mobile stability */
@media (max-width: 700px) {
  html,
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .login-screen {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================================
   LOGIN MOBILE · REMOVE EXTRA BOTTOM SCROLL V17
   ============================================================ */

@media (max-width: 700px) {

  .login-screen {
    box-sizing: border-box !important;

    min-height: 100svh !important;

    padding-bottom:
      calc(32px + env(safe-area-inset-bottom)) !important;
  }

}

/* ============================================================
   LOGIN MOBILE · NATURAL CONTENT HEIGHT V18
   ============================================================ */

@media (max-width: 700px) {

  .login-screen {
    min-height: 0 !important;
    height: auto !important;

    overflow-y: visible !important;

    padding-bottom:
      calc(28px + env(safe-area-inset-bottom)) !important;
  }

}

/* ============================================================
   LOGIN · REMOVE ROOT EXTRA HEIGHT V19
   ============================================================ */

@media (max-width: 700px) {

  body:has(.login-screen) {
    min-height: 0 !important;
    height: auto !important;
  }

  body:has(.login-screen) #app {
    min-height: 0 !important;
    height: auto !important;
  }

  body:has(.login-screen) .login-screen {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;

    padding-bottom:
      calc(24px + env(safe-area-inset-bottom)) !important;
  }

}

/* ============================================================
   IMPETUS LOGIN · MOCKUP ALIGNMENT V20
   ============================================================ */

/* Wordmark built in HTML/CSS */

.login-screen .brand-mark {
  display: flex;
  align-items: center;
  gap: .13em;

  width: max-content;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;

  font-weight: 650 !important;
  letter-spacing: .17em !important;
}

.login-screen .brand-mark > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-screen .brand-e {
  width: .72em;
  height: .78em;

  flex-direction: column;
  justify-content: space-between !important;

  margin:
    0 .01em
    0 -.02em;
}

.login-screen .brand-e i {
  display: block;

  width: 100%;
  height: 18%;

  border-radius: 999px;

  background:
    #82B7D9;

  box-shadow:
    0 0 10px rgba(130,183,217,.16);
}


/* Input shells */

.login-input-shell {
  position: relative;

  width: 100%;
}

.login-input-shell .input {
  padding-left: 48px !important;
}

.login-password-shell .input {
  padding-right: 48px !important;
}

.login-field-icon,
.login-eye-icon {
  position: absolute;

  top: 50%;

  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 21px;
  height: 21px;

  color:
    rgba(170,184,198,.70);

  transform:
    translateY(-50%);

  pointer-events: none;
}

.login-field-icon {
  left: 17px;
}

.login-eye-icon {
  right: 17px;
}

.login-field-icon svg,
.login-eye-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* CTA arrow without touching login JS */

.login-screen #login-button::after {
  content: "→";

  display: inline-block;

  margin-left: 13px;

  color:
    #82B7D9;

  font-size: 1.25em;
  font-weight: 400;

  line-height: 1;

  transform:
    translateY(1px);
}


/* ============================================================
   MOBILE · CLOSE TO FINAL MOCKUP
   ============================================================ */

@media (max-width: 700px) {

  .login-screen .login-brand {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    margin-bottom: 20px !important;
  }


  .login-screen .brand-mark {
    margin: 0 auto;

    font-size: 29px !important;
    letter-spacing: .17em !important;
  }


  .login-screen .brand-subtitle {
    width: 100%;

    margin-top: 9px !important;

    text-align: center;

    font-size: 10px !important;
    letter-spacing: .28em !important;
  }


  .login-screen .login-brand::after {
    width: 47px;

    margin:
      17px auto
      0 !important;
  }


  .login-screen .login-heading {
    margin-left: auto !important;
    margin-right: auto !important;

    max-width: 365px;

    text-align: center;

    font-size:
      clamp(32px, 9.1vw, 40px) !important;

    line-height:
      1.02 !important;
  }


  .login-screen .login-copy {
    margin-left: auto !important;
    margin-right: auto !important;

    max-width: 345px;

    text-align: center;

    font-size: 14px !important;

    color:
      rgba(210,219,228,.71) !important;
  }


  .login-screen #login-form {
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* Hide visual labels, inputs keep accessible placeholders */
  .login-screen .form-label {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;

    white-space: nowrap !important;

    border: 0 !important;
  }


  .login-screen .form-group {
    margin-bottom: 14px !important;
  }


  .login-screen .input {
    height: 58px !important;
    min-height: 58px !important;

    border-radius: 15px !important;

    border-color:
      rgba(130,183,217,.30) !important;

    background:
      rgba(7,12,17,.70) !important;

    font-size: 16px !important;
  }


  .login-screen .input::placeholder {
    color:
      rgba(186,197,208,.56) !important;
  }


  .login-field-icon,
  .login-eye-icon {
    width: 22px;
    height: 22px;
  }


  .login-field-icon {
    left: 18px;
  }


  .login-eye-icon {
    right: 18px;
  }


  .login-input-shell .input {
    padding-left: 54px !important;
  }


  .login-password-shell .input {
    padding-right: 54px !important;
  }


  .login-screen #login-button {
    min-height: 59px !important;

    margin-top: 4px !important;

    border-radius: 17px !important;

    color:
      #DDEBF4 !important;

    font-size:
      16px !important;

    border-color:
      rgba(130,183,217,.95) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 0 18px rgba(130,183,217,.07) !important;
  }

}


/* ============================================================
   LOGIN DESKTOP · BRAND ALIGNMENT V21
   ============================================================ */

@media (min-width: 701px) {

  .login-screen .login-brand {
    margin-bottom: 28px !important;
  }

  .login-screen .brand-mark {
    font-size: 34px !important;
    letter-spacing: .16em !important;
  }

  .login-screen .brand-e {
    width: .72em;
    height: .78em;
  }

  .login-screen .brand-subtitle {
    margin-top: 8px !important;

    font-size: 11px !important;
    letter-spacing: .24em !important;

    color:
      rgba(235,240,245,.72) !important;
  }

  .login-screen .login-brand::after {
    width: 48px;
    margin-top: 16px;

    background:
      #82B7D9 !important;

    box-shadow:
      0 0 16px rgba(130,183,217,.22);
  }

}

/* ============================================================
   WORDMARK · E OPTICAL ALIGNMENT V22
   ============================================================ */

.login-screen .brand-e {
  position: relative;
  top: -0.03em;

  width: .69em;
  height: .72em;

  margin-left: .005em;
  margin-right: .015em;
}

.login-screen .brand-e i {
  height: 17%;
}


/* ============================================================
   WORDMARK · IMPETUS ALIGN FIX V23
   ============================================================ */

.login-screen .brand-mark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.login-screen .brand-e {
  position: relative;
  top: 0.02em;

  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;

  width: 0.78em;
  height: 0.56em;

  margin-left: 0.05em;
  margin-right: 0.09em;
}

.login-screen .brand-e i {
  display: block;
  width: 100%;
  height: 0.11em;
  border-radius: 999px;
}

@media (max-width: 600px) {
  .login-screen .brand-e {
    top: 0.025em;
    width: 0.80em;
    height: 0.57em;
    margin-left: 0.05em;
    margin-right: 0.10em;
  }
}


/* WORDMARK · FINAL E SPACING V24 */
.login-screen .brand-e {
  margin-right: 0.14em !important;
}

@media (max-width: 600px) {
  .login-screen .brand-e {
    margin-right: 0.15em !important;
  }
}


/* WORDMARK · FINAL OPTICAL SPACING V25 */

.login-screen .brand-e {
  margin-right: 0.17em !important;
}

@media (max-width: 600px) {
  .login-screen .brand-e {
    margin-right: 0.18em !important;
  }
}


/* WORDMARK · DESKTOP VERTICAL ALIGN V26 */

@media (min-width: 701px) {
  .login-screen .brand-e {
    top: 0.07em !important;
  }
}


/* WORDMARK · DESKTOP P-E SPACING V27 */

@media (min-width: 701px) {
  .login-screen .brand-e {
    margin-left: 0.015em !important;
  }
}


/* ============================================================
   IMPETUS · GLOBAL WORDMARK V28
   Shared by coach + client + programming
   ============================================================ */

.impetus-wordmark {
  display: inline-flex !important;
  align-items: center !important;

  width: max-content;

  gap: .13em;

  line-height: 1 !important;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;

  font-weight: 650 !important;
  letter-spacing: .16em !important;
}


.impetus-wordmark > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.impetus-wordmark .brand-e {
  position: relative;

  display: inline-flex;
  flex-direction: column;

  justify-content: space-between !important;

  width: .78em;
  height: .56em;

  margin-left: .05em;
  margin-right: .17em;

  top: .02em;
}


.impetus-wordmark .brand-e i {
  display: block;

  width: 100%;
  height: .11em;

  border-radius: 999px;

  background:
    #82B7D9;

  box-shadow:
    0 0 8px rgba(130,183,217,.14);
}


/* Hub headers */

.topbar .impetus-wordmark {
  font-size: 19px !important;
}


.topbar .brand-subtitle {
  margin-top: 5px;

  color:
    rgba(220,227,234,.70) !important;

  font-size: 10px !important;

  letter-spacing:
    .14em !important;

  text-transform:
    uppercase;
}


/* Preserve final login optical tuning */

@media (min-width: 701px) {

  .login-screen .brand-e {
    top: .07em !important;
    margin-left: .015em !important;
    margin-right: .17em !important;
  }

}


@media (max-width: 600px) {

  .topbar .impetus-wordmark {
    font-size: 18px !important;
  }

  .impetus-wordmark .brand-e {
    margin-right: .18em;
  }

}


/* ============================================================
   CLIENT ACCESS · INVITATION MANAGEMENT V29
   ============================================================ */

.client-access-card {
  margin-bottom: 18px !important;
}

.client-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-top: 8px;
}

.client-access-title {
  margin: 0 0 4px;

  font-size: 1.16rem !important;
  line-height: 1.15;
}

.client-access-actions {
  display: flex;
  align-items: center;

  gap: 9px;

  flex-shrink: 0;
}

.client-access-actions .button {
  min-height: 42px !important;

  padding-left: 14px;
  padding-right: 14px;
}


@media (max-width: 600px) {

  .client-access-row {
    align-items: stretch;
    flex-direction: column;

    gap: 14px;
  }

  .client-access-actions {
    width: 100%;

    display: grid;
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(145px, 1fr)
      );
  }

  .client-access-actions .button {
    width: 100%;
  }

}


/* ============================================================
   SHORT INVITATION ACTIVATION V31
   ============================================================ */

.activation-screen #activation-form {
  width: 100%;
}

.activation-screen #activation-button {
  width: 100%;
}

.activation-screen .form-error:not(:empty) {
  margin-top: 14px;
}


/* ============================================================
   ACTIVATION FORM WIDTH V32
   Keep activation form inside the left content column
   ============================================================ */

.activation-screen #activation-form {
  width: 100%;
  max-width: 560px;
}

.activation-screen .form-group,
.activation-screen .login-input-shell,
.activation-screen #activation-button {
  width: 100%;
}

@media (max-width: 700px) {

  .activation-screen #activation-form {
    max-width: none;
  }

}


/* ============================================================
   PASSWORD EYE · VISUAL FIX V34
   Functional button, visually behaves like an icon
   ============================================================ */

.login-input-shell {
  position: relative !important;
}


/* Leave room for eye icon */

.login-input-shell input[type="password"],
.login-input-shell input[type="text"] {
  padding-right: 52px !important;
}


/* Reset global button styling */

button.login-eye-icon.password-toggle,
.login-input-shell button.password-toggle {
  position: absolute !important;

  top: 50% !important;
  right: 15px !important;

  transform: translateY(-50%) !important;

  width: 24px !important;
  height: 24px !important;

  min-width: 24px !important;
  min-height: 24px !important;

  max-width: 24px !important;
  max-height: 24px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  color: rgba(190, 203, 214, .68) !important;

  cursor: pointer !important;

  z-index: 5 !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}


/* No button hover box */

button.login-eye-icon.password-toggle:hover,
button.login-eye-icon.password-toggle:focus,
button.login-eye-icon.password-toggle:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: #82B7D9 !important;

  outline: none !important;
}


/* Eye drawing */

button.login-eye-icon.password-toggle svg {
  display: block !important;

  width: 19px !important;
  height: 19px !important;

  min-width: 19px !important;
  min-height: 19px !important;

  fill: none !important;

  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  pointer-events: none !important;
}


/* Keep icon vertically clean on mobile too */

@media (max-width: 700px) {

  button.login-eye-icon.password-toggle,
  .login-input-shell button.password-toggle {
    right: 14px !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;
  }

}


/* ============================================================
   PASSWORD EYE · CLICK FIX V35
   ============================================================ */

button.login-eye-icon.password-toggle {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

button.login-eye-icon.password-toggle svg,
button.login-eye-icon.password-toggle svg * {
  pointer-events: none !important;
}


/* ============================================================
   NOTIFICATIONS UI V1
   ============================================================ */

.notifications-shell {
  position: relative;
  flex: 0 0 auto;
}

.notification-bell {
  position: relative;
  overflow: visible !important;
}

.notification-bell-glyph {
  display: block;
  transform: rotate(45deg);
  font-size: 17px;
  line-height: 1;
  color: rgba(235,241,246,.94);
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;

  min-width: 18px;
  height: 18px;

  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #0b0d10;
  border-radius: 999px;

  background: #82B7D9;
  color: #071015;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.notifications-panel {
  position: absolute;
  z-index: 1000;

  top: calc(100% + 12px);
  right: 0;

  width: min(390px, calc(100vw - 28px));
  max-height: min(560px, 72vh);

  display: none;

  overflow: hidden;

  border:
    1px solid
    rgba(130,183,217,.18);

  border-radius: 18px;

  background:
    rgba(16,19,23,.985);

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.48);

  backdrop-filter: blur(18px);
}

.notifications-panel.is-open {
  display: block;
}

.notifications-panel-header {
  min-height: 70px;

  padding: 16px 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}

.notifications-panel-title {
  color: rgba(245,248,250,.98);

  font-size: 14px;
  font-weight: 750;
}

.notifications-panel-count {
  margin-top: 3px;

  color: rgba(220,227,234,.54);

  font-size: 11px;
}

.notifications-read-all {
  padding: 7px 9px;

  border: 0;
  background: transparent;

  color: #82B7D9;

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

.notifications-list {
  max-height: 470px;
  overflow-y: auto;
}

.notification-item {
  position: relative;

  width: 100%;

  padding: 15px 17px;

  display: grid;
  grid-template-columns: 30px 1fr 8px;

  gap: 11px;

  border: 0;
  border-bottom:
    1px solid
    rgba(255,255,255,.055);

  background: transparent;

  color: inherit;
  text-align: left;

  cursor: pointer;
}

.notification-item:last-child {
  border-bottom: 0;
}

.notification-item.is-unread {
  background:
    rgba(130,183,217,.055);
}

.notification-item:hover {
  background:
    rgba(255,255,255,.035);
}

.notification-item-icon {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(130,183,217,.22);

  border-radius: 10px;

  background:
    rgba(130,183,217,.07);

  color: #82B7D9;

  font-size: 13px;
  font-weight: 800;
}

.notification-item-content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}

.notification-item-title {
  color: rgba(245,248,250,.96);

  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
}

.notification-item-body {
  color: rgba(220,227,234,.64);

  font-size: 11px;
  line-height: 1.4;
}

.notification-item-time {
  margin-top: 2px;

  color: rgba(220,227,234,.40);

  font-size: 10px;
}

.notification-unread-dot {
  width: 7px;
  height: 7px;

  align-self: center;

  border-radius: 50%;

  background: #82B7D9;

  box-shadow:
    0 0 10px
    rgba(130,183,217,.30);
}

.notifications-empty {
  padding: 34px 20px;

  color: rgba(220,227,234,.48);

  font-size: 12px;
  text-align: center;
}


@media (max-width: 600px) {

  .notifications-panel {
    position: fixed;

    top: 76px;
    right: 14px;
    left: 14px;

    width: auto;

    max-height:
      calc(100vh - 96px);
  }

  .notifications-list {
    max-height:
      calc(100vh - 180px);
  }

}


/* ============================================================
   NOTIFICATIONS UI V1 · PREMIUM BELL POLISH
   ============================================================ */

.notification-bell {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;

  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border:
    1px solid
    rgba(130,183,217,.72) !important;

  border-radius: 50% !important;

  background:
    rgba(13,17,21,.82) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 0 0 1px rgba(130,183,217,.025) !important;
}

.notification-bell-glyph {
  width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: none !important;

  color:
    rgba(241,245,248,.94) !important;

  line-height: 0;
}

.notification-bell-glyph svg {
  display: block;

  width: 18px;
  height: 18px;

  overflow: visible;
}

.notification-bell:hover,
.notification-bell:focus-visible {
  border-color:
    rgba(130,183,217,.95) !important;

  background:
    rgba(130,183,217,.07) !important;
}

.notification-bell:focus-visible {
  outline:
    2px solid
    rgba(130,183,217,.18);

  outline-offset: 3px;
}

.notification-badge {
  top: -5px !important;
  right: -5px !important;

  min-width: 18px !important;
  height: 18px !important;

  border:
    2px solid
    #0b0d10 !important;

  box-shadow:
    0 2px 8px rgba(0,0,0,.38) !important;
}



/* COMPLETED SESSION REVIEW UI V1 */

.completed-session-screen {
  padding-bottom: 48px;
}

.completed-review-card {
  margin-top: 18px;
}

.completed-review-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.completed-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(130, 183, 217, .35);
  border-radius: 999px;
  background: rgba(130, 183, 217, .08);
  color: #82B7D9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
}

.completed-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.completed-metric {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

.completed-metric span,
.completed-comment > span,
.completed-prescription > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.completed-metric strong {
  display: block;
  color: rgba(255, 255, 255, .94);
  font-size: 15px;
  line-height: 1.35;
}

.completed-comment {
  margin-top: 12px;
  padding: 14px;
  border-left: 2px solid #82B7D9;
  border-radius: 0 12px 12px 0;
  background: rgba(130, 183, 217, .055);
}

.completed-comment p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  line-height: 1.55;
}

.completed-execution-section {
  margin-top: 28px;
}

.completed-section-heading {
  margin-bottom: 14px;
}

.completed-exercise-list {
  display: grid;
  gap: 14px;
}

.completed-exercise-card {
  overflow: hidden;
}

.completed-exercise-name {
  margin-bottom: 4px;
}

.completed-adaptation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(130, 183, 217, .24);
  border-radius: 12px;
  background: rgba(130, 183, 217, .06);
}

.completed-adaptation strong {
  color: #82B7D9;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.completed-adaptation span {
  color: rgba(255, 255, 255, .66);
  font-size: 13px;
}

.completed-prescription {
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.completed-prescription strong {
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  font-weight: 600;
}

.completed-set-head,
.completed-set-row {
  display: grid;
  grid-template-columns: 52px 1fr 1.25fr 1fr;
  gap: 8px;
  align-items: center;
}

.completed-set-head {
  padding: 13px 2px 8px;
  color: rgba(255, 255, 255, .42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.completed-set-row {
  min-height: 48px;
  padding: 10px 2px;
  border-top: 1px solid rgba(255, 255, 255, .055);
  color: rgba(255, 255, 255, .84);
  font-size: 14px;
}

.completed-set-row.is-incomplete {
  opacity: .52;
}

.completed-set-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(130, 183, 217, .24);
  border-radius: 50%;
  color: #82B7D9;
  font-size: 12px;
  font-weight: 700;
}

.completed-set-note {
  grid-column: 2 / -1;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  line-height: 1.45;
}

.completed-set-mobile-label {
  display: none;
}

.completed-session-empty {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, .1);
  border-radius: 12px;
  color: rgba(255, 255, 255, .48);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 520px) {

  .completed-review-grid {
    grid-template-columns: 1fr 1fr;
  }

  .completed-set-head {
    display: none;
  }

  .completed-set-row {
    grid-template-columns:
      42px
      minmax(54px, .8fr)
      minmax(96px, 1.35fr)
      minmax(68px, .9fr);
    padding: 12px 0;
  }

  .completed-set-mobile-label {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .36);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .completed-set-note {
    grid-column: 2 / -1;
  }
}